/* ============================================================================
   Public nav - site-wide, for every page EXCEPT the homepage.

   The homepage loads the product site's own stack (marketing.css,
   how-it-works.css, footer.css, homepage-brand.css, logo-strip.css) and does
   NOT load site.css, so it already has these rules from marketing.css. Every
   other page loads site.css instead, and takes the nav from here.

   Why not simply link marketing.css site-wide: it carries a `*` reset, a bare
   `html` rule, an unscoped `.container` at a different max-width, skeleton
   styling for generic names (.card-title, .card-meta, .stat-value), and ten
   @keyframes whose names site.css also defines (`pulse`, `fadeIn`, ...).
   @keyframes share one flat global namespace and the last one parsed wins, so
   linking it would silently repoint site.css's own animations.

   Everything below is generated from static/css/marketing.css: every rule
   whose selector names a nav class, @media nesting preserved, in source
   order. The one edit is `.btn-primary`'s base rule, re-scoped to
   `.nav-actions .btn-primary` so it cannot reach the waitlist submit button.
   Regenerate rather than hand-edit if marketing.css changes upstream.
   The phone menu panel (.mobile-nav-*, 19 Oct 2026) was ported by hand from the
   product site's marketing.css; the one local change is box-shadow:none on its
   focus ring, because site.css shadows every focused link on these pages.

   Scoped to `body.homepage-black-white`, which base.html puts on every page.
============================================================================ */

body.homepage-black-white .main-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  z-index: 1000;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin: 0;
  padding: 0;
}
body.homepage-black-white .main-nav.scrolled {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: transparent;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03), 0 10px 30px rgba(0, 0, 0, 0.06);
}
body.homepage-black-white .nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
  padding: 0 24px;
  max-width: none;
  width: 100%;
}
body.homepage-black-white .nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 20px;
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
body.homepage-black-white .nav-brand:hover {
  opacity: 0.8;
}
body.homepage-black-white .brand-icon svg {
  width: 28px;
  height: 28px;
  stroke: #000000;
}
.nav-brand .brand-logo {
  height: 56px;
  width: auto;
  display: block;
}

@media (max-width: 768px) {
  .nav-brand .brand-logo {
    height: 36px;
  }
}

@media (min-width: 769px) {
  body.homepage-black-white .nav-container {
    padding: 0 40px;
  }
  body.homepage-black-white .nav-brand {
    flex: 1 1 0;
    min-width: 0;
  }
  body.homepage-black-white .nav-menu {
    flex: 0 0 auto;
  }
  body.homepage-black-white .nav-actions {
    flex: 1 1 0;
    justify-content: flex-end;
  }
}
.nav-dropdown {
  position: relative;
}
.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
}
.nav-dropdown-caret {
  margin-top: 1px;
  transition: transform 0.2s ease;
}
.nav-dropdown:hover .nav-dropdown-caret,
.nav-dropdown.open .nav-dropdown-caret {
  transform: rotate(180deg);
}
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  min-width: 210px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.05);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1001;
}
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-dropdown-menu a {
  display: block;
  padding: 11px 16px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #4a4a4a;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-dropdown-menu a:hover {
  background: #f5f5f5;
  color: #000000;
}

@media (max-width: 768px) {
  .nav-dropdown,
  .nav-dropdown-toggle {
    width: 100%;
  }
  .nav-dropdown-toggle {
    justify-content: space-between;
  }
  .nav-dropdown-menu {
    position: static;
    transform: none;
    display: none;
    min-width: 0;
    margin-top: 10px;
    padding: 4px 0 0 14px;
    border: none;
    border-left: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav-dropdown-menu::before {
    display: none;
  }
  .nav-dropdown.open .nav-dropdown-menu {
    display: block;
  }

  /* `.nav-dropdown.open .nav-dropdown-menu` above (0,3,0) sets
     translateX(-50%) for the desktop popover, and outranks the
     `.nav-dropdown-menu` reset in this block (0,1,0) - a media query adds no
     specificity. Matching that selector here, later in the file, is what
     actually lands. Without it the submenu renders half a panel-width off the
     left edge of the phone screen, showing an empty white box. */
  .nav-dropdown.open .nav-dropdown-menu {
    transform: none;
  }
}
body.homepage-black-white .nav-menu {
  display: flex;
  list-style: none;
  gap: 32px;
  margin: 0;
  padding: 0;
  align-items: center;
}
body.homepage-black-white .nav-menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}
body.homepage-black-white .nav-link {
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: #4a4a4a;
  text-decoration: none;
  transition: color 0.2s ease;
  position: relative;
  padding: 8px 2px;
}
body.homepage-black-white .nav-link:hover {
  color: #000000;
}
body.homepage-black-white .nav-link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: #000000;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body.homepage-black-white .nav-link:hover::after,
body.homepage-black-white .nav-link.active::after {
  transform: scaleX(1);
}
body.homepage-black-white .nav-link.active {
  color: #000000;
  font-weight: 600;
}
body.homepage-black-white .nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
body.homepage-black-white .btn-login {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding: 11px 22px;
  border: 1.5px solid #dcdcdc;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: #1a1a1a;
  background: transparent;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
body.homepage-black-white .btn-login:hover {
  border-color: #111111;
  background: #f6f6f6;
  color: #000000;
}
body.homepage-black-white .nav-actions .btn-primary {
  background: #000000;
  color: #ffffff;
  padding: 13px 28px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  border: none;
  cursor: pointer;
  display: inline-block;
}
body.homepage-black-white .nav-actions .btn-primary:hover {
  background: #1a1a1a;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
body.homepage-black-white .nav-actions .btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}
body.homepage-black-white .nav-actions .btn-primary {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  padding: 11px 26px;
  border: 1.5px solid #000000;
  border-radius: 10px;
  background: #000000;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
body.homepage-black-white .nav-actions .btn-primary:hover {
  background: #1a1a1a;
  border-color: #1a1a1a;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.20);
}
body.homepage-black-white .nav-actions .btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
/* The hamburger: a 48px rounded tile (the 44px touch minimum with room to
   spare), three 22px bars 8px apart so the two outer ones meet as an X when
   each turns 45deg and moves 4px in. */
body.homepage-black-white .mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

body.homepage-black-white .mobile-menu-toggle:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.16);
}

/* The phone menu panel (components/public_nav.html) exists only under 768px;
   its styles live in the mobile block near the end of this file. */
.mobile-nav-overlay {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav-overlay,
  .mobile-nav-list > li,
  body.homepage-black-white .mobile-menu-toggle span {
    transition: none;
  }
}

body.homepage-black-white .mobile-menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 3px 0;
  background: #000000;
  border-radius: 2px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.nav-link:focus-visible,
.nav-dropdown-toggle:focus-visible,
.nav-dropdown-menu a:focus-visible,
.nav-brand:focus-visible,
.btn-login:focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
  border-radius: 6px;
}

@media (max-width: 768px) {
  /* The desktop menu and buttons are not shown on a phone at all: the
     panel below (.mobile-nav-overlay) carries the same links. */
  body.homepage-black-white .nav-menu,
  body.homepage-black-white .nav-actions {
    display: none;
  }

  body.homepage-black-white .mobile-menu-toggle {
    display: flex;
  }

  body.homepage-black-white .mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
  }

  body.homepage-black-white .mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  body.homepage-black-white .mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
  }
}

@media (max-width: 480px) {
  body.homepage-black-white .nav-container {
    padding: 0 16px;
  }
}

@media (max-width: 1280px) and (min-width: 769px) {
  body.homepage-black-white .nav-menu {
    gap: 20px;
  }
  body.homepage-black-white .nav-actions {
    gap: 10px;
  }
  body.homepage-black-white .nav-actions .btn-primary {
    padding: 10px 18px;
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  body.homepage-black-white .nav-container {
    height: 72px;
    align-items: center;
  }

  /* ---- The phone menu panel ----
     Black, from the foot of the bar to the bottom of the screen, slides in
     from the right; the links follow it in one after another. It starts
     BELOW the bar rather than behind it, so the bar is left exactly as it
     is: switching the bar to solid white while the panel moved flashed
     grey at the top on every open and close. Scrolls on its own, because
     the toggle handler locks the page behind it. pointer-events:none while
     closed, so the off-screen panel never swallows a tap. */
  .mobile-nav-overlay {
    display: block;
    position: fixed;
    top: 72px;              /* the bar's height on a phone */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;           /* under the bar (1000): they never overlap */
    background: #000000;
    color: #ffffff;
    padding: 20px 24px 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* translate3d keeps the panel on its own compositor layer from the
       start: with a plain translateX, iOS Safari painted it in place
       for a frame before moving it off-screen - a black blink. */
    transform: translate3d(100%, 0, 0);
    will-change: transform;
    pointer-events: none;
    /* Hidden once it has slid out, not before: visibility flips after
       the slide on close, at once on open. */
    visibility: hidden;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.35s;
  }

  .mobile-nav-overlay.active {
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
    visibility: visible;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
  }

  .mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .mobile-nav-list > li {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  .mobile-nav-overlay.active .mobile-nav-list > li {
    opacity: 1;
    transform: translateX(0);
  }

  .mobile-nav-overlay.active .mobile-nav-list > li:nth-child(1) { transition-delay: 0.08s; }
  .mobile-nav-overlay.active .mobile-nav-list > li:nth-child(2) { transition-delay: 0.14s; }
  .mobile-nav-overlay.active .mobile-nav-list > li:nth-child(3) { transition-delay: 0.20s; }
  .mobile-nav-overlay.active .mobile-nav-list > li:nth-child(4) { transition-delay: 0.26s; }
  .mobile-nav-overlay.active .mobile-nav-list > li:nth-child(5) { transition-delay: 0.32s; }

  .mobile-nav-list > li > a,
  .mobile-nav-label {
    display: block;
    padding: 16px 20px;
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .mobile-nav-label {
    padding-bottom: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
  }

  .mobile-nav-list > li > a:hover,
  .mobile-nav-list > li > a.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
  }

  .mobile-nav-sub {
    list-style: none;
    margin: 0;
    padding: 0 0 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .mobile-nav-sub a {
    display: block;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .mobile-nav-sub a:hover,
  .mobile-nav-sub a.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
  }

  .mobile-nav-cta {
    margin-top: 16px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* The buttons sit in their own box so the link rule above
     (.mobile-nav-list > li > a) never reaches them: it painted
     "Get started free" white on white. */
  .mobile-nav-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Login (outline) and Get started (solid white) read as the inverse of
     the desktop pair, since the panel is black. */
  .mobile-nav-login,
  .mobile-nav-primary {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 16px 24px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }

  .mobile-nav-login {
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    background: transparent;
  }

  .mobile-nav-login:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
  }

  .mobile-nav-primary {
    border: 1.5px solid #ffffff;
    color: #000000;
    background: #ffffff;
  }

  .mobile-nav-primary:hover {
    background: #ededed;
    border-color: #ededed;
  }

  /* The focus ring is black elsewhere on the page; on the black panel
     it needs to be white to be seen. */
  .mobile-nav-overlay a:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
    /* site.css adds a blue focus shadow to every link on these pages;
       one white ring reads better on the black panel. */
    box-shadow: none;
  }
}

/* The fixed bar is 88px + a 1px border on desktop, 72px + 1px below 768px.
   site.css reserves the body's top padding from --nav-height, so the token has
   to track the real bar or the first heading slides under it. */
@media (max-width: 768px) {
  :root { --nav-height: 73px; }
}