/*! Sappar Studio — Copyright (c) 2026 Carrier Nation LLC. All rights reserved. */
/**
 * THE GLOBAL NAVIGATION STYLESHEET — the single style authority.
 *
 * Every page that carries the global nav links this file and NO page restates
 * these rules inline. The navbar diverged across six pages precisely because
 * each page owned its own copy; one authority is the correction.
 *
 * Markup authority is partials/nav.html. Injection and the guards that keep
 * both honest live in scripts/build-pages.mjs.
 *
 * ⚠ Links in the partial are ROOT-SAFE (/#features, /roadmap). The same markup
 * is injected into /help/*.html, where a relative "#features" would resolve to
 * /help/#features and a relative "roadmap.html" to /help/roadmap.html.
 *
 * ⚠ On /help/*, this nav sits ABOVE the documentation navigation. The docs
 * menu is its own component and is not replaced by it.
 */
/* 🚨 THE NAV OWNS ITS FONTS. Great Vibes and IBM Plex Sans were loaded per
   page, and most pages loaded neither: the wordmark fell back to a generic
   cursive and measured 76px wide on mission.html against 59.4px on the
   homepage. A stylesheet that cannot assume its host page's tokens cannot
   assume its fonts either.

   ⚠ @import MUST precede every rule in the file. Inserting it lower down — or,
   as happened here, INSIDE the section comment below — splits that comment,
   and the unterminated block silently kills every rule after it. The nav then
   rendered completely unstyled (position: static, padding: 0) while the font
   still loaded, so a font-only check would have called it fixed. */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=IBM+Plex+Sans:wght@400..500&family=Inter:wght@300..600&display=swap');

/* =========================================================
   NAV
   ========================================================= */

/* THE NAV'S HEIGHT IS DECLARED, NOT EMERGENT — and it is published on :root so
   host layouts can clear it.

   The bar is `position: fixed`, so every page that carries it must reserve the
   space. Its height used to be emergent (2×padding + whatever the brand line
   measured = 57.03px), which meant any layout wanting to clear it had to
   restate that number — a second source for one fact, the same shape as the
   four drifted legal-version copies and the four MIME maps. It bit
   immediately: /help/* has a sticky sidebar at top:0, so the bar covered the
   sidebar's own logo on all 14 pages.

   These are the only nav tokens deliberately published outside the
   `nav.top, .mobile-menu` scope. Everything else stays scoped so the component
   cannot leak into a host page's cascade; clearance is the one thing a host
   page legitimately needs to know. Consume `var(--nav-h)` — never a literal. */
:root{
  --nav-h: 58px;
  --nav-h-scrolled: 52px;
}

nav.top{
  position: fixed; top:0; left:0; right:0; z-index: 80;
  /* Height declared, with the inner row centred in it. Was `padding: 10px 0`
     with an intrinsic height; the padding transition is preserved as a height
     transition below so the shrink-on-scroll motion is unchanged. */
  height: var(--nav-h);
  box-sizing: border-box;
  display: flex; align-items: center;
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  background:
    linear-gradient(180deg, rgba(8,8,10,0.78), rgba(8,8,10,0.32) 85%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .35s ease, background .35s ease, height .3s ease;
}
nav.top .nav-edge{
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; pointer-events: none;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(255,255,255,0.05) 15%,
    rgba(255,255,255,0.14) 50%,
    rgba(255,255,255,0.05) 85%,
    transparent 100%);
  opacity: 0;
  transition: opacity .4s ease;
}
nav.top.scrolled{
  background: linear-gradient(180deg, rgba(6,6,8,0.92), rgba(6,6,8,0.72) 90%, rgba(6,6,8,0.5));
  height: var(--nav-h-scrolled);
}
nav.top.scrolled .nav-edge{ opacity: 1 }

/* Brand left, everything else in one right-aligned row. Flex with an auto
   margin on the brand rather than a 3-column grid: the grid forced the links
   to centre independently of the account cluster, so the two groups drifted
   apart as the viewport changed and never read as one row. `margin-right:auto`
   on the brand achieves the same layout without moving anything in the DOM —
   which matters because the Circle dropdown is positioned against its
   in-place wrapper. */
nav.top .inner{
  display: flex;
  align-items: center;
  /* Separates the destinations group from the account group. Must be clearly
     larger than the 30px rhythm inside .nav-links, or the boundary reads as
     just another link gap and the bar becomes one undifferentiated row —
     which is what 34px against 30px did. */
  gap: 52px;
  width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 16px;
}
.nav-side{ display: flex; align-items: center; gap: 18px; }
.nav-left{ margin-right: auto; }
.nav-right{ justify-content: flex-end; gap: 24px; }
  /* superseded by new nav system above */
  /* nav.top .inner styled above */
.brand{
  display:flex; align-items:center; gap:0;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--bone);
  font-weight: 400;
  letter-spacing: -0.01em;
  position: relative;
}
nav.top .brand-word,
.mobile-menu .brand-word{ display: inline-flex; align-items: baseline; gap: 0; }
nav.top .brand-word em,
.mobile-menu .brand-word em{
  font-style: italic;
  font-family: var(--font-italic);
  color: var(--bone);
  margin-right: 3px;
  font-weight: 400;
}
nav.top .brand-word-trail,
.mobile-menu .brand-word-trail{
  color: var(--fog-3);
  font-weight: 300;
  font-family: var(--font-display);
  font-style: normal;
}

.nav-sep{
  width: 1px; height: 18px;
  background: linear-gradient(to bottom, transparent, var(--hair-strong), transparent);
}

.nav-edition{
  display: flex; flex-direction: column; gap: 1px;
  line-height: 1;
  white-space: nowrap;
}
.nav-edition-num{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--fog-3);
  text-transform: uppercase;
}
.nav-edition-lab{
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 10.5px;
  color: var(--fog-1);
  letter-spacing: 0.01em;
  margin-top: 2px;
}

.nav-links{
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: none;
}
nav.top.scrolled .nav-links{
  border-color: transparent;
  background: transparent;
}
/* One treatment for every link. The bar previously carried five competing
   ones — uppercase tracked labels, italic roman numerals, a 32px script
   wordmark, a pill status chip and a filled CTA — which is what made it read
   as assembled rather than designed. Sentence case at a single size, with
   spacing (not rules or glyphs) doing the separating. */
/* Scoped to DIRECT children (plus the Circle link, which sits one level
   deeper inside its dropdown wrapper). A descendant selector here also
   matches the two CTAs inside the Circle dropdown — and at (0,1,1) it
   outranks their own (0,1,0) .ncd-cta-* rules, so it silently restyled them
   into inline-flex 13.5px fog-2 text with the nav link's padding. */
.nav-links > a,
.nav-links > .nav-circle-wrap > a.nav-circle{
  position: relative;
  display: inline-flex; align-items: center;
  padding: 6px 0;
  font-family: var(--font-nav);
  font-size: 13px;
  font-weight: 450;
  line-height: inherit;
  color: var(--fog-2);
  letter-spacing: -0.01em;
  text-transform: none;
  border-radius: 0;
  transition: color .2s ease;
  text-decoration: none;
}
/* thin inline-rule underline that animates in on hover */
.nav-links > a::after,
.nav-links > .nav-circle-wrap > a.nav-circle::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--fog-3);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.nav-links > a:hover,
.nav-links > .nav-circle-wrap > a.nav-circle:hover{
  color: var(--bone);
  background: transparent;
  transform: none;
}
.nav-links > a:hover::after,
.nav-links > .nav-circle-wrap > a.nav-circle:hover::after{ transform: scaleX(1); }
/* vertical hairline separator between links, via .nav-dot */
.nav-dot{
  display: inline-block;
  width: 1px; height: 12px;
  background: var(--hair-strong);
  color: transparent;
  font-size: 0;
  opacity: 1;
  user-select: none;
  line-height: 1;
  transform: none;
}

/* Circle nav button — hand-painted "Circle" wordmark in red brush.
   Caveat Brush gives the word a brush-stroke feel against the otherwise
   uniform Inter nav row. Note: must out-specificity .nav-links a (0,1,1)
   for font/color/transform to actually apply. */
/* Circle is a peer destination, so it is set like one — it takes the shared
   nav-link rule above and carries no styling of its own. It previously
   rendered as a 32px Sacramento wordmark in #c44050: off-brand three ways at
   once (not a brand face, not the sanctioned Circle wine #8A3A44, and
   colouring a wordmark the Circle spec keeps monochrome) at roughly 2.5x its
   neighbours' size. It was the loudest element in the bar.

   ⚠ This class appears on EIGHT pages. Normalising it here alone makes the
   homepage nav differ from the other seven until the same change is rolled
   across them — see docs/completion/2026-08-08-homepage-navbar-rework.md. */
/* nav.top uses backdrop-filter, which creates a stacking context
   and would otherwise clip absolutely-positioned children to its
   own box. overflow:visible is already the default; we just need
   to make sure no ancestor clips us. */
nav.top, nav.top .inner, .nav-links{ overflow: visible; }

/* Circle nav dropdown — clicking the Circle button opens a teaser
   popover with CTAs to Sappar Circle. Unauthenticated users land on
   Circle directly via the buttons; Circle's own auth-wall surfaces
   the sign-in / sign-up choice when they try to interact. */
.nav-circle-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-circle-dropdown{
  position: absolute;
  top: calc(100% + 26px);
  left: 50%;
  width: 380px;
  padding: 26px 26px 22px;
  background: #0c0c0e;
  border: 1px solid var(--hair-strong);
  border-radius: 12px;
  box-shadow:
    0 24px 64px rgba(0,0,0,0.7),
    0 2px 10px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.04);
  color: var(--fog-4);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity .18s ease, transform .22s ease, visibility .18s;
  z-index: 60;
}
.nav-circle-dropdown.is-open{
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-circle-dropdown::before{
  /* Small caret pointing up toward the Circle button */
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px;
  background: #0c0c0e;
  border-left: 1px solid var(--hair-strong);
  border-top: 1px solid var(--hair-strong);
}
.ncd-heading{
  /* Cormorant Garamond, matching every other heading on the page. This
     card was added after the unified-header selector list above and was
     never added to it, so it kept an earlier Fraunces treatment and was
     the only heading on the page in a different family. */
  font-family: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--bone);
  margin: 0 0 12px;
}
.ncd-heading .ital{
  font-style: italic !important;
  font-weight: 500;
  color: #c87d8a;
  /* "long-form" must not break at its own hyphen across lines. */
  white-space: nowrap;
}
.ncd-subtitle{
  font-family: var(--font-italic);
  font-style: italic !important;
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fog-2);
  margin: 0 0 20px;
}
.ncd-cta-primary,
.ncd-cta-secondary{
  display: block;
  width: 100%;
  padding: 12px 18px;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  font-family: var(--font-ui, "Inter", sans-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.005em;
  transition: background .18s, border-color .18s, transform .12s;
}
.ncd-cta-primary{
  background: #8a2d3a;
  color: var(--bone);
  border: 1px solid #8a2d3a;
  margin-bottom: 8px;
}
.ncd-cta-primary:hover{
  background: #9b3543;
  transform: translateY(-1px);
}
.ncd-cta-secondary{
  background: transparent;
  color: var(--bone);
  border: 1px solid rgba(255,255,255,0.18);
}
.ncd-cta-secondary:hover{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.28);
}
.ncd-features{
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}
.ncd-features li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
  font-family: var(--font-ui, "Inter", sans-serif);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fog-3);
}
.ncd-features li:last-child{ margin-bottom: 0; }
.ncd-icon{
  flex-shrink: 0;
  width: 11px;
  height: 14px;
  margin-top: 3px;
  fill: #8a2d3a;
}
.ncd-feat-label{
  display: inline;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fog-2);
  margin-right: 6px;
}
.ncd-feat-body{ display: inline; }
.ncd-feat-body code{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fog-4);
  background: rgba(255,255,255,0.04);
  padding: 1px 4px;
  border-radius: 3px;
}
.ncd-feat-body a{
  color: #c87d8a;
  text-decoration: underline;
  text-decoration-color: rgba(200,125,138,0.4);
  text-underline-offset: 2px;
}
.ncd-feat-body a:hover{ text-decoration-color: #c87d8a; }
@media (max-width: 980px){
  /* .nav-links row is hidden below 980px (mobile menu owns the nav).
     Circle button + its dropdown disappear with it. */
  .nav-circle-dropdown{ display: none; }
}

.nav-status{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fog-2);
  background: rgba(255,255,255,0.02);
}
.nav-status-dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #7acca0;
  box-shadow:
    0 0 0 3px rgba(122,204,160,0.14),
    0 0 10px rgba(122,204,160,0.45);
  animation: nav-pulse 2.6s ease-in-out infinite;
}
@keyframes nav-pulse{
  0%, 100% { box-shadow: 0 0 0 3px rgba(122,204,160,0.14), 0 0 10px rgba(122,204,160,0.45); }
  50%      { box-shadow: 0 0 0 5px rgba(122,204,160,0.06), 0 0 14px rgba(122,204,160,0.65); }
}
@media (prefers-reduced-motion: reduce){
  .nav-status-dot{ animation: none }
}

/* Primary action as emphasised text with a rule under it, matching the
   reference. It was a filled white pill carrying a five-layer box-shadow, a
   lift-on-hover and a diagonal shine sweep — the heaviest object in the bar
   and the clearest "generated SaaS header" tell. Emphasis now comes from
   weight and colour against fog-2 neighbours, plus the standing underline.
   ⚠ This is the site's primary conversion control; reverting to a button is
   a one-rule change if the flatter treatment costs signups. */
.nav-cta{
  display: inline-flex; align-items: center;
  padding: 6px 0;
  border-radius: 0;
  background: none;
  color: var(--bone) !important;
  font-family: var(--font-nav);
  /* One step above the 450 of its neighbours — the CTA still needs to read as
     the emphasised item now that it is text rather than a filled pill.
     Capped at 500 because the font is requested as the variable subrange
     400..500; anything above would clamp to 500 silently rather than error. */
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: none;
  border-bottom: 1px solid var(--fog-1);
  transition: border-color .2s ease;
  position: relative;
  overflow: visible;
  text-decoration: none;
}
.nav-cta::before{ content: none; }

/* =========================================================
   LANGUAGE SWITCHER
   =========================================================
   🚨 This had NO RULES AT ALL. The buttons fell back to the nav's base font
   and inherited colour — 16px pure white — which made a utility control the
   single loudest thing in the bar: larger than every link and brighter than
   the "Create account" CTA, the one element that is supposed to lead. The
   form-control reset above kept it from looking like a browser button, so it
   read as deliberate rather than unstyled.

   It sits at the BOTTOM of the hierarchy now, below the 13px/#a0a0a6 links:
   11px, tracked open so the uppercase pairs stay legible at that size, and
   dimmed to --fog-1. Reading order in the bar is CTA → links → languages.

   ⚠ `.lang-active` was styled ONLY in index.html (`:2924`), a nav-owned
   selector left behind in a page — so the marker showing which language is
   current appeared on the homepage and on none of the other 27 pages. It
   belongs here, in the style authority, like everything else the nav owns.

   ⚠ SCOPED UNDER `nav.top` / `.mobile-menu` DELIBERATELY. The form-control
   reset below is `nav.top button` — specificity (0,1,2) — and it sets
   `font: inherit; color: inherit`. A rule written as `.nav-langs button`
   is (0,1,1) and LOSES to it, so the size and colour silently stayed at the
   inherited 16px white while `.lang-active` (0,2,1) applied normally. A
   half-applied restyle is worse than none: it looked like the tokens were
   wrong rather than the selector. */
.nav-langs,
.mobile-langs{
  display: flex;
  align-items: center;
  gap: 2px;
}
nav.top .nav-langs button,
.mobile-menu .mobile-langs button{
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 450;
  letter-spacing: 0.06em;
  color: var(--fog-1);
  padding: 2px 4px;
  transition: color .2s ease;
}
nav.top .nav-langs button:hover,
.mobile-menu .mobile-langs button:hover{ color: var(--fog-3); }

/* The current language is marked by weight and tone only — no underline. An
   underline here would collide with .nav-cta's, which is the bar's single
   emphasis device and has to stay unique to it. */
nav.top .nav-langs button.lang-active,
.mobile-menu .mobile-langs button.lang-active{
  color: var(--fog-4);
  font-weight: 500;
}
.nav-cta:hover{
  transform: none;
  background: none;
  box-shadow: none;
  border-bottom-color: var(--bone);
}
.nav-cta-label{ line-height: 1; }
/* The arrow was decoration on an element that is now a text link. */
.nav-cta-arrow{ display: none; }

/* Quiet "Log in" text link — deliberately subordinate to Create account, so
   it sits at the same size and colour as the nav links rather than getting a
   third weight of its own. */
.nav-login{
  font-family: var(--font-nav);
  font-size: 13px;
  font-weight: 450;
  letter-spacing: -0.01em;
  color: var(--fog-2);
  text-decoration: none;
  padding: 6px 0;
  transition: color .18s ease;
  white-space: nowrap;
}
.nav-login:hover{ color: var(--bone); }

/* Mobile menu — hidden on desktop, revealed at <= 980px */
.mobile-menu-btn{
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  color: var(--fog-3);
  border-radius: 8px;
  transition: background .2s, color .2s;
}
.mobile-menu-btn:hover{
  color: var(--bone);
  background: rgba(255,255,255,0.05);
}
.mobile-menu{
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0,0,0,0.97);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 96px 32px 56px;
}
.mobile-menu.open{ display: flex }
.mobile-menu-close{
  position: absolute;
  top: 18px; right: 18px;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fog-3);
  border-radius: 8px;
  transition: background .2s, color .2s;
}
.mobile-menu-close:hover{
  color: var(--bone);
  background: rgba(255,255,255,0.05);
}
.mobile-menu-links{
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.mobile-menu-links a{
  display: block;
  padding: 14px 24px;
  font-family: var(--font-nav);
  font-size: 22px;
  color: var(--fog-3);
  letter-spacing: -0.01em;
  text-align: center;
  transition: color .25s ease;
}
.mobile-menu-links a:hover{ color: var(--bone); }
.mobile-menu-cta{
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 12px;
  padding: 12px 26px;
  border-radius: 999px;
  background: var(--bone);
  color: var(--ink-0);
  font-family: var(--font-nav);
  font-size: 14px; font-weight: 500;
}
.mobile-menu-login{
  display: inline-block;
  margin-top: 24px;
  padding: 8px 4px;
  color: var(--fog-3);
  font-family: var(--font-nav);
  font-size: 14px; font-weight: 500;
  text-decoration: none;
  transition: color .2s ease;
}
.mobile-menu-login:hover{ color: var(--bone); }

@media (max-width: 980px){
  nav.top .inner{ grid-template-columns: 1fr auto; }
  .nav-links{ display: none }
  .nav-edition{ display: none }
  .nav-sep{ display: none }
  .nav-status{ display: none }
  .nav-login{ display: none }        /* Login link lives in the mobile menu on narrow screens */
  .nav-cta{ display: none }          /* CTA lives in the mobile menu on narrow screens */
  /* Languages live in the drawer too (.mobile-langs), and this rule was the
     one member of the set that was missing — so below 980px the switcher was
     the ONLY thing left beside the hamburger, which is the opposite of the
     quiet-utility role it should have. roadmap.html had the rule privately;
     every other page did not. */
  .nav-langs{ display: none }
  .mobile-menu-btn{ display: inline-flex }
}

  /* old .nav-cta superseded */
  /* old nav-cta:hover superseded */

@media (max-width: 820px){
  /* nav-links hidden by wider 980px rule above */
}

/* =========================================================
   NAV-SCOPED WORDMARK — makes this stylesheet self-sufficient.

   🚨 WHY THIS BLOCK EXISTS. `.sappar-sig`, `.brand-word` and `.ital` are also
   used in page BODY COPY, so most pages define their own. Those rules would
   otherwise style the injected nav's wordmark too, and the nav would render
   differently on every page — the exact failure this whole change exists to
   end.

   Scoping to `nav.top` / `.mobile-menu` raises specificity above any page-level
   `.sappar-sig` (0,1,0) or `.brand-word .sappar-sig` (0,2,0) without touching
   the page's own body-copy usage. Values are index.html's, which is the design
   these were measured against.
   ========================================================= */
nav.top .sappar-sig,
.mobile-menu .sappar-sig{
  /* line-height too: pages set `.sappar-sig{ line-height: 1 }`, which drove the
     brand's line box to 23px on the legal pages and 38px on help against 36px
     on the homepage — three different bar heights from identical markup.
     `inherit` takes the 1.55 pinned on nav.top and outranks the page at 0,2,0. */
  line-height: inherit;
  font-family: "Great Vibes", cursive !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  font-size: 1.3em;
  vertical-align: -0.06em;
}
nav.top .brand-word .sappar-sig,
.mobile-menu .brand-word .sappar-sig{
  font-size: 1.55em;
  vertical-align: -0.15em;
  margin-right: 0.1em;
}

/* =========================================================
   TOKEN SELF-SUFFICIENCY — do not remove.

   🚨 This stylesheet is injected into pages that define their OWN :root
   tokens, with different values, or none at all. Consuming the page's
   tokens is what made the navbar render differently per page:
   `--maxw` is undefined on mission.html, so `max-width: var(--maxw)`
   was invalid, the nav row went unbounded and sat 8px lower than on the
   homepage.

   Declaring every token the nav uses ON THE NAV ITSELF makes the bar
   identical everywhere and leaks nothing back into the page. `font-size`
   is pinned for the same reason: every `em` in here would otherwise
   inherit the host page's base size (18px on mission vs 16px on index).

   Values are index.html's, which is the design these rules were measured
   against. If a token changes there, change it here too.
   ========================================================= */
nav.top, nav.top *, nav.top *::before, nav.top *::after,
.mobile-menu, .mobile-menu *, .mobile-menu *::before, .mobile-menu *::after{
  box-sizing: border-box;
}
nav.top,
.mobile-menu{
  font-size: 16px;
  line-height: 1.55;
  /* the nav must not inherit the host page's body face: help.css gave
     .nav-links "Source Serif 4", which changed the line box and made the
     bar 2px taller than everywhere else. */
  font-family: var(--font-nav);
  --font-nav: "IBM Plex Sans", sans-serif;
  --bone: #ffffff;
  --fog-1: #8c8c92;
  --fog-2: #a0a0a6;
  --fog-3: #c8c8cc;
  --fog-4: #e6e6e8;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-italic: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* 🚨 NO `--font-ui` HERE, DELIBERATELY: the nav is the one surface set in
     Plex, and routing it through the shared UI token would silently restyle
     every button, pill and form control on the page.

     ⚠ This note had LOST ITS OPENING `/*`, which turned it into a real custom
     property whose value was the sentence above. Three `.mobile-menu` rules
     consume `var(--font-ui)`, so all three were invalid at computed-value
     time — and because `font-family` INHERITS, they fell back to the nav's own
     face and rendered correctly by accident. Nothing looked wrong, nothing
     warned, and the declarations were doing no work. They now name
     `--font-nav`, which is what they were actually resolving to. */
  --font-nav: "IBM Plex Sans", sans-serif;
  --hair: rgba(255,255,255,0.07);
  --hair-strong: rgba(255,255,255,0.14);
  --ink-0: #000000;
  --maxw: 1280px;
}

/* Page resets reach inside the nav too: help.css put `padding: 0 0 1px` on the
   brand link, which alone made the help navbar taller. Pin the box. */
nav.top .brand,
.mobile-menu .brand{ padding: 0; margin: 0; }

/* help.css underlines anchors with `border-bottom: 1px`, which landed on the
   brand and every nav link and made the help bar 1px taller than the rest.
   Reset at ELEMENT specificity (0,0,2) so this stylesheet's own class rules —
   .nav-cta's underline at 0,1,0 — still win over it. */
nav.top a,
.mobile-menu a{ border: 0; }

/* 🚨 FORM-CONTROL RESET — the nav relied on index.html's global `button{}`
   reset without owning one. On every page that lacks it the language switcher
   rendered as a DEFAULT BROWSER BUTTON: grey rgb(240,240,240) fill, 2px outset
   border, Arial 13.33px. Same failure family as the tokens and the box-sizing:
   this stylesheet must assume nothing about its host page. */
nav.top button,
.mobile-menu button{
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  text-transform: none;
}

/* The wordmark rendered UNDERLINED on pages whose base styles decorate <a>.
   Pin it inside the nav; class rules that genuinely want an underline (the CTA)
   are at higher specificity and still win. */
nav.top a,
.mobile-menu a{ text-decoration: none; }