/* ============================================================================
   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;
  }
}
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;
  }
}

/* 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; }
}