/* ============================================================================
   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.

   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);
}
body.homepage-black-white .mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
body.homepage-black-white .mobile-menu-toggle span {
  width: 24px;
  height: 2px;
  background: #000000;
  transition: all 0.3s 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) {
  body.homepage-black-white .nav-menu,
  body.homepage-black-white .nav-actions {
    display: none;
  }
  body.homepage-black-white .nav-menu.active {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 24px;
    gap: 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  }
  body.homepage-black-white .nav-actions.active {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 200px);
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 24px;
    gap: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  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(5px, 5px);
  }
  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(7px, -6px);
  }
}

@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 .main-nav {
    overflow: visible;
  }
  body.homepage-black-white .nav-container {
    position: relative;
    flex-wrap: wrap;
    height: 72px;
    align-items: center;
  }
  body.homepage-black-white .main-nav.mobile-open .nav-container {
    height: auto;
    padding-bottom: 16px;
  }
  body.homepage-black-white .nav-menu.active,
  body.homepage-black-white .nav-actions.active {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border: 0;
  }
  body.homepage-black-white .nav-menu.active {
    padding: 16px 0 10px;
    gap: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 10px;
  }
  body.homepage-black-white .nav-actions.active {
    padding: 12px 0 0;
    gap: 10px;
  }
  body.homepage-black-white .nav-actions.active .btn-primary,
  body.homepage-black-white .nav-actions.active .btn-login {
    width: 100%;
    text-align: center;
    /* Both buttons are inline-flex, and text-align does not position a flex
       item - the label sat hard left in the full-width bar. */
    justify-content: center;
  }

  /* Line 1 is sized by its tallest item, so when the panel opens the row
     collapses from the bar's 72px to the 44px toggle and the logo snaps up
     against the very top edge of the screen. Hold the closed height. */
  body.homepage-black-white .main-nav.mobile-open .nav-brand,
  body.homepage-black-white .main-nav.mobile-open .mobile-menu-toggle {
    min-height: 72px;
  }

  /* The open panel lives INSIDE the fixed bar, and .nav-container wraps. Flex
     lines are filled in DOM order - brand, menu, actions, toggle - so once the
     menu and the actions take a full-width line each, the hamburger is pushed
     onto a fourth line: the close button lands at the BOTTOM of the open
     panel, under "Join waitlist", instead of staying beside the logo. Ordering
     the four children explicitly keeps the logo and the toggle together on the
     first line and drops the panel underneath them. */
  body.homepage-black-white .nav-brand { order: 1; }
  body.homepage-black-white .mobile-menu-toggle {
    order: 2;
    /* The icon is 40x30 (24px bars + 8px padding), under the 44px
       minimum touch target. Grow the hit box, not the icon. */
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
  body.homepage-black-white .nav-menu { order: 3; }
  body.homepage-black-white .nav-actions { order: 4; }

  /* The bar is position:fixed and the toggle handler sets body{overflow:hidden},
     so a panel taller than the viewport - Resources expanded, or any phone in
     landscape under 768px - has nothing left to scroll and the CTA and close
     button become unreachable. Let the bar itself scroll. */
  body.homepage-black-white .main-nav.mobile-open {
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* .nav-menu keeps align-items:center from its desktop rule, so the links
     centre themselves while the full-width Resources row and the CTA stay left
     and full-bleed - three different alignments in one panel. Stretch every row
     to one left edge and give the links a real tap target. */
  body.homepage-black-white .nav-menu.active {
    align-items: stretch;
  }
  body.homepage-black-white .nav-menu.active > li > .nav-link {
    display: block;
    padding: 12px 0;
    font-size: 17px;
  }
  /* Matches the `> li >` child selector above rather than the flatter
     descendant form: `> li > .nav-link` counts an extra element (0,4,2)
     and would otherwise force this button to display:block, where a
     <button>'s UA text-align:center pushes "Resources" to the middle of
     the row while every other link sits left. */
  body.homepage-black-white .nav-menu.active > li > .nav-dropdown-toggle {
    display: flex;
    padding: 12px 0;
    font-size: 17px;
    text-align: left;
  }
  /* The desktop hover underline spans the whole row once the link is a block,
     drawing a rule across the panel. .active already reads as bold black. */
  body.homepage-black-white .nav-menu.active .nav-link::after {
    content: 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; }
}