/* Header copied from the Platform landing page (barespace-landing css/nav.css) so both pages share one header.
   The rules below are the bits of that page's base.css the header needs; home-2026's base.css doesn't have them. */
:root { --u: min(1px, calc(100vw / 1728)); } /* one design pixel on the 1728px canvas */
:where(.site-nav) a { color: inherit; text-decoration: none; }
:where(.site-nav) .btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px; border-radius: 20px; line-height: 1;
  white-space: nowrap; transition: opacity .2s;
}
:where(.site-nav) .btn:hover { opacity: .85; }
:where(.site-nav) .btn-outline { border: 1px solid var(--brand-dark-green); color: var(--brand-dark-green); }

/* ---- Nav (Figma 10338:26630) — fixed; gains a frosted background once the page scrolls ---- */
html { scroll-padding-top: calc(110 * var(--u) + 20px); }

.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  /* Same sizing as the old landing page's header: fixed type and buttons, only the outer spacing flexes. */
  padding: clamp(16px, 3.472vw, 60px) max(calc(144 * var(--u)), calc(50vw - 720px)) 30px; /* 16px + 14px room under the active dot */
  font-family: var(--font-body); font-size: 15.28px; line-height: normal;
  transition: transform .35s ease;
}
/* Liquid Glass bar once scrolled — same as the old landing page's header: see-through tint, blur + saturation,
   white hairline on the bottom edge. */
.site-nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(250, 250, 250, .35);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .6), 0 1px 0 rgba(42, 42, 60, .06);
  opacity: 0; transition: opacity .35s ease;
}
/* Scrolled: slides up so 16px sits above the bar (old site's compact height). */
.site-nav.is-scrolled { transform: translateY(calc(16px - clamp(16px, 3.472vw, 60px))); }
.site-nav.is-scrolled::before { opacity: 1; }

.nav-inner { display: flex; align-items: center; justify-content: space-between; }
.nav-logo { display: block; flex: none; }
.nav-logo img { width: 37.535px; height: auto; transform: scaleY(-1); }

.nav-right { display: flex; align-items: center; gap: clamp(24px, 4.167vw, 72px); }
.nav-links { display: flex; align-items: flex-start; gap: clamp(8px, 4.167vw, 72px); list-style: none; }
.nav-links li { min-width: clamp(96px, 7.87vw, 136px); text-align: center; }
.nav-link {
  position: relative; display: inline-block;
  font: inherit; color: var(--text-primary); white-space: nowrap; transition: color .2s;
}
.nav-link:hover, .nav-link.is-active { color: var(--brand-dark-green); }
/* Green dot under the active link. It moves with the scroll position (js/nav.js), so it's drawn in CSS on whichever
   link is active instead of being an image inside one link. */
.nav-link::after {
  content: ""; position: absolute; left: 50%; top: calc(100% + 6px); width: 8px; height: 8px; margin-left: -4px;
  border-radius: 50%; background: var(--brand-dark-green); opacity: 0; transition: opacity .2s;
}
.nav-link.is-active::after { opacity: 1; }

.nav-ctas { display: flex; align-items: center; gap: 24px; }
.nav-btn {
  padding: 18px 22px; /* 56px tall buttons, as the old site's header */
  font: inherit;
}
.nav-btn-signin { border-radius: 0; } /* square in Figma */
.nav-btn-demo { border: 1px solid var(--text-primary); border-radius: 10000px; color: var(--text-primary); }

.nav-menu-btn, .nav-menu { display: none; }

/* Mobile (Figma 10340:1283): logo · square "Book a demo" outline · menu button. The menu opens a liquid-glass panel. */
@media (max-width: 899px) {
  .site-nav { padding: 26px 25px 14px; }
  .site-nav.is-scrolled { transform: translateY(-10px); } /* compact: 16px above the bar */
  .site-nav.is-open::before { opacity: 1; }
  .nav-right { gap: 8px; }
  .nav-links, .nav-btn-signin { display: none; }
  .nav-logo img { width: 24.465px; }
  .nav-btn-demo { height: 44px; padding: 12px; border-color: var(--brand-dark-green); border-radius: 0; color: var(--brand-dark-green); }
  .nav-menu-btn {
    display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 10px;
    background: transparent; border: 1px solid var(--text-primary); border-radius: 0; cursor: pointer;
  }
  .nav-menu-close, .site-nav.is-open .nav-menu-open { display: none; }
  .site-nav.is-open .nav-menu-close { display: block; }

  /* Open menu (as the old landing page): the bar turns solid, and a full-width panel drops under it with the links
     on dividers, the current page marked with a green dot, and "Sign in" as a full-width pill. */
  .site-nav.is-open { transform: none; }
  .site-nav.is-open::before { opacity: 1; background: rgba(250, 250, 250, .97); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .nav-menu {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    padding: 8px 25px 24px;
    background: rgba(250, 250, 250, .97); box-shadow: 0 12px 16px rgba(42, 42, 60, .06);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .3s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.16, 1, .3, 1), visibility 0s .3s;
  }
  .site-nav.is-open .nav-menu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .nav-menu ul { list-style: none; }
  .nav-menu li a {
    position: relative; display: block; padding: 16px 0;
    border-bottom: 1px solid var(--border-default);
    font-size: 18px; line-height: normal; color: var(--text-primary);
  }
  .nav-menu li a.is-active { color: var(--brand-dark-green); }
  .nav-menu li a.is-active::after {
    content: ""; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
    border-radius: 50%; background: var(--brand-dark-green);
  }
  .nav-menu li a:hover { color: var(--brand-dark-green); }
  .nav-menu-cta {
    display: flex; align-items: center; justify-content: center; height: 56px; margin-top: 16px;
    border: 1px solid var(--text-primary); border-radius: 10000px;
    font-size: 16px; color: var(--text-primary); transition: background-color .2s;
  }
  .nav-menu-cta:active { background: rgba(42, 42, 42, .05); }
  html { scroll-padding-top: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav, .site-nav::before, .nav-menu { transition: none; }
}