/* The site header, shared by every landing page (homepage, /demo, /docs, /faq,
   /terms, /privacy) so it never shifts between them. One copy: pages link it
   (<link rel="stylesheet" href="/nav.css">) and must not restyle nav, .nav-*,
   .mnav-*, .mobile-menu* themselves (a test enforces it). Design-system values
   are written in rather than read from each page's own CSS variables, which
   drifted between pages. */

nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  /* Inner edges line up with the page content grid (1120px, 32px gutters): on
     wide screens the logo and CTA sit over the content's edges, not the
     window's. The bar and its border still span the full width. */
  padding: 0 max(2rem, calc((100% - 1120px) / 2 + 32px)); height: 60px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0,0,0,0.07);
  box-sizing: border-box; margin: 0;
  /* Text metrics pinned here, not inherited, so pages with different body
     settings (line-height 1.6 vs 1.7, weights) render the same header. */
  font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 300;
  line-height: 1.6; letter-spacing: normal; -webkit-font-smoothing: antialiased;
}
.nav-logo {
  font-family: 'DM Serif Display', serif;
  font-size: 20px; font-weight: 400; color: #16151A;
  text-decoration: none;
  display: flex; align-items: center; gap: 8px;
}
.nav-dot { width: 8px; height: 8px; border-radius: 50%; background: #3D3BF3; animation: nav-pulse 2.5s infinite; }
@keyframes nav-pulse { 0%,100%{opacity:1} 50%{opacity:0.35} }
.nav-right { display: flex; align-items: center; gap: 12px; }
.mnav-link { display: inline-grid; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 400; line-height: normal; color: #68676A; text-decoration: none; transition: color 0.15s; }
/* reserves the bold width so the active / hovered link doesn't nudge its neighbours */
.mnav-link::after { content: attr(data-label); grid-area: 1 / 1; height: 0; overflow: hidden; visibility: hidden; font-weight: 500; pointer-events: none; user-select: none; }
.mnav-link:hover { color: #16151A; text-decoration: underline; text-underline-offset: 3px; }
.mnav-link--active { color: #3D3BF3 !important; font-weight: 500; }
.nav-cta {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  width: 106.83px; height: 36.8px;
  padding: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; line-height: 20.8px; font-weight: 500;
  border-radius: 10px;
  background: #1A1A2E; color: #fff;
  border: none; cursor: pointer; text-decoration: none;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.nav-cta:hover { opacity: 0.8; }
/* pages with a global a:hover underline must not underline the header */
.nav-logo:hover, .nav-cta:hover, .mobile-menu-link:hover { text-decoration: none; }

/* Mobile menu (≤640px) */
.nav-burger {
  display: none;
  width: 36px; height: 36px;
  background: none; border: none; cursor: pointer;
  align-items: center; justify-content: center;
  position: relative; padding: 0; flex-shrink: 0;
}
.nav-burger span {
  position: absolute; left: 9px; width: 18px; height: 1.5px;
  background: #16151A; border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-burger span:first-child  { transform: translateY(-5px); }
.nav-burger span:nth-child(2) { transform: translateY(0); }
.nav-burger span:last-child   { transform: translateY(5px); }
.nav-burger.open span:first-child  { transform: translateY(0) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:last-child   { transform: translateY(0) rotate(-45deg); }
.mobile-menu {
  position: fixed; top: 60px; left: 0; right: 0; z-index: 99;
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 1rem 12px;
  background: rgba(255,255,255,0.95); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0,0,0,0.07);
  opacity: 0; transform: translateY(-6px); visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.mobile-menu.open { opacity: 1; transform: translateY(0); visibility: visible; }
.mobile-menu-link {
  display: flex; align-items: center;
  height: 44px; padding: 0 10px; border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px; font-weight: 500; color: #16151A;
  text-decoration: none; transition: background 0.15s;
}
.mobile-menu-link:active { background: #F2F1EE; }
@media (min-width: 641px) { .mobile-menu { display: none; } }
/* site.css has a page-wide reduced-motion switch, but only the homepage and /demo load it */
@media (prefers-reduced-motion: reduce) {
  .nav-dot { animation: none; }
  .nav-burger span, .mobile-menu { transition: none; }
}
@media (max-width: 640px) {
  nav { padding: 0 1rem; }
  .mnav-link { display: none; }
  .nav-burger { display: flex; }
}