/* ============================================================================
   JETTISON — canonical nav (Mistral-grid flat bar, dual-skin)
   One full-bleed bar flush to the viewport top, every element a hairline-
   divided cell: brand cell (mark + Aeonik lowercase wordmark) · route cells
   (42dot Sans, small carets) · spacer · theme-toggle cell · CTA cell (flame,
   flush to the right edge). Squared corners throughout; the bar closes with a
   single hairline border-bottom. Popovers drop flush from the bar, squared.
   Both skins derive from the semantic tokens: light = warm glass over cream,
   dark = ground-based glass with bone routes. Shadow/edge values that cannot
   derive from tokens ride the nav-local mode vars below (same plumbing as
   tokens.css: explicit data-theme, then system preference, then the
   mode-invariant re-pin).
   ========================================================================= */
:root {
  --on-accent: #161511;   /* ink ON Flame fills — Flame is mode-invariant, so its ink is too */
  --pill-solid-hover: #fff;
  --pill-dark-hover: #000;
  --nav-bar-line: var(--line);
  --nav-bar-shadow: 0 12px 40px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
  --nav-pop-line: var(--line-faint);
  --nav-pop-shadow: 0 34px 80px -28px rgba(0,0,0,.9), 0 6px 18px -8px rgba(0,0,0,.6);
  --nav-panel-shadow: 0 28px 60px rgba(0,0,0,.45);
  --tt-sun: block;
  --tt-moon: none;
}
:root[data-theme="light"] {
  --pill-solid-hover: #000;
  --pill-dark-hover: #fff;
  --nav-bar-line: var(--line);
  --nav-bar-shadow: 0 12px 40px rgba(22,21,17,.10), 0 2px 8px rgba(22,21,17,.04);
  --nav-pop-line: var(--line);
  --nav-pop-shadow: 0 42px 90px -34px rgba(59,49,37,.30), 0 10px 26px -12px rgba(59,49,37,.18);
  --nav-panel-shadow: 0 30px 70px rgba(59,49,37,.22);
  --tt-sun: none;
  --tt-moon: block;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --pill-solid-hover: #000;
    --pill-dark-hover: #fff;
    --nav-bar-line: var(--line);
    --nav-bar-shadow: 0 12px 40px rgba(22,21,17,.10), 0 2px 8px rgba(22,21,17,.04);
    --nav-pop-line: var(--line);
    --nav-pop-shadow: 0 42px 90px -34px rgba(59,49,37,.30), 0 10px 26px -12px rgba(59,49,37,.18);
    --nav-panel-shadow: 0 30px 70px rgba(59,49,37,.22);
    --tt-sun: none;
    --tt-moon: block;
  }
}
.mode-invariant {
  --pill-solid-hover: #fff;
  --pill-dark-hover: #000;
  --nav-bar-line: var(--line);
  --nav-bar-shadow: 0 12px 40px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
  --nav-pop-line: var(--line-faint);
  --nav-pop-shadow: 0 34px 80px -28px rgba(0,0,0,.9), 0 6px 18px -8px rgba(0,0,0,.6);
  --nav-panel-shadow: 0 28px 60px rgba(0,0,0,.45);
}
/* pills — the retool CTA shape */ .pill { display:inline-flex; align-items:center; gap:10px; border-radius:999px; padding:13px 26px; font-size:15px; cursor:pointer; white-space:nowrap; transition:var(--hover); }
.pill.solid { background:var(--inverse-ground); color:var(--inverse-ink); }
.pill.solid:hover { background:var(--pill-solid-hover); }
.pill.ghost { border:1px solid var(--line); color:var(--ink-2); }
.pill.ghost:hover { color:var(--ink); border-color:color-mix(in srgb, var(--ink) 30%, transparent); }
.pill.dark { background:var(--inverse-ink); color:var(--inverse-ground); }
.pill.dark:hover { background:var(--pill-dark-hover); }
[hidden] { display:none !important; }
/* ============ the bar ============ */
/* full-bleed, flush to the viewport top — Zac 2026-07-18: nav goes Mistral
 * (cell grid, squared, flush-right CTA); the Jettison wordmark stays. */
.nav { position:fixed; top:0; left:0; right:0; z-index:60; pointer-events:none; }
.nav.scrolled { /* bar is constant; scroll state is a no-op by design */ }
.nav-bar { pointer-events:auto; display:flex; align-items:stretch; position:relative; min-height:46px;
  background:color-mix(in srgb, var(--ground) 97%, transparent);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--nav-bar-line); }
.brand { display:inline-flex; align-items:center; text-decoration:none; color:var(--ink); padding:0 18px; border-right:1px solid var(--nav-bar-line); }
.brand svg.lockup { height:21px; width:auto; display:block; }
.brand svg path { fill:currentColor; }
.brand svg path[fill="#FFB162"] { fill:#FFB162; } /* the flame chip keeps its brand ink in both modes */
/* ============ routes + popovers ============ */
.nav .menu { display:flex; align-items:stretch; }
.mitem { position:static; display:flex; align-items:stretch; }
.mbtn { display:inline-flex; align-items:center; gap:6px; padding:0 17px; font-size:13.5px; font-weight:500; color:var(--ink); background:transparent; border:0; border-right:1px solid var(--nav-bar-line); cursor:pointer; font-family:'42dot Sans',sans-serif; text-decoration:none; transition:var(--hover); }
a.mbtn:hover, .mitem:hover .mbtn, .mitem.open .mbtn { color:var(--ink); background:color-mix(in srgb, var(--ink) 5%, transparent); }
.mbtn .chev { font-size:8.5px; color:var(--ink-3); transition:transform 200ms var(--ease-sig); }
.mitem.open .chev { transform:rotate(180deg); }
.pop { position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(6px);
  background:color-mix(in srgb, var(--ground-2) 98.5%, transparent);
  backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px);
  border:1px solid var(--nav-pop-line); border-top:0; padding:30px 38px 32px; display:flex; gap:56px; flex-wrap:wrap; max-width:min(96vw, 1360px); width:max-content;
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity 180ms var(--ease-sig), transform 220ms var(--ease-sig), visibility 0s 220ms;
  box-shadow:var(--nav-pop-shadow); }
.mitem.open .pop { opacity:1; pointer-events:auto; visibility:visible; transform:translateX(-50%) translateY(0); transition:opacity 180ms var(--ease-sig), transform 220ms var(--ease-sig); }
.pop .grp .glab { font-family:'Geist Mono',monospace; font-weight:700; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); padding-bottom:16px; }
.pop .grp ul { list-style:none; margin:0; padding:0 0 0 20px; border-left:1px solid var(--line-faint); display:flex; flex-direction:column; gap:12px; }
.pop .grp a { font-family:'42dot Sans',sans-serif; font-weight:400; font-size:18px; color:var(--ink-2); white-space:nowrap; display:block; text-decoration:none; transition:var(--hover); }
.pop .grp a:hover { color:var(--ink); }
.pop .grp a small { display:block; font-family:'FK Grotesk',sans-serif; font-size:12.5px; color:var(--ink-3); margin-top:2px; }
/* coming-soon rows (Markets verticals) — labels, not links */
.pop .grp .soon { font-family:'42dot Sans',sans-serif; font-weight:400; font-size:18px; color:var(--ink-3); white-space:nowrap; display:inline-flex; align-items:center; gap:10px; cursor:default; }
.pop .grp .soon em { font-family:'Geist Mono',monospace; font-style:normal; font-weight:700; font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); border:1px solid var(--line-faint); border-radius:999px; padding:2.5px 8px 1.5px; }
/* ============ theme toggle + CTA cells ============ */
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:46px; padding:0; margin-left:auto; border:0; border-left:1px solid var(--nav-bar-line); background:transparent; color:var(--ink-2); cursor:pointer; transition:var(--hover); flex-shrink:0; }
.theme-toggle:hover { color:var(--ink); background:color-mix(in srgb, var(--ink) 6%, transparent); }
.theme-toggle svg { width:15px; height:15px; display:block; }
.theme-toggle .tt-sun { display:var(--tt-sun, block); }
.theme-toggle .tt-moon { display:var(--tt-moon, none); }
.nav-cta { display:inline-flex; align-items:center; gap:10px; background:var(--accent); color:var(--on-accent); padding:0 20px; font-family:'FK Grotesk',sans-serif; font-size:13.5px; font-weight:500; text-decoration:none; white-space:nowrap; flex-shrink:0; transition:background 150ms var(--ease-standard); }
.nav-cta:hover { background:color-mix(in srgb, var(--accent) 88%, #fff); }
.nav-cta .go-ball { display:inline-block; font-size:15px; line-height:1; transition:transform 150ms var(--ease-standard); }
.nav-cta:hover .go-ball { transform:translateX(3px); }
/* ============ mobile (<900px): drawer off the bar ============ */
.mobile-menu-toggle, .mobile-menu-panel { display:none; }
@media (max-width:900px) {
  .nav-bar { min-height:42px; }
  .nav .menu, .nav-cta { display:none; }
  .brand { padding:0 14px; } .brand svg.lockup { height:18px; }
  .theme-toggle { width:42px; }
  .mobile-menu-toggle { display:inline-flex; align-items:center; justify-content:center; border:0; border-left:1px solid var(--nav-bar-line); padding:0 20px; background:transparent; color:var(--ink); font:500 13.5px 'FK Grotesk',sans-serif; cursor:pointer; transition:var(--hover); }
  .mobile-menu-toggle:hover { background:color-mix(in srgb, var(--ink) 6%, transparent); }
  .mobile-menu-panel { position:absolute; top:100%; left:0; right:0; padding:18px;
    border-bottom:1px solid var(--nav-bar-line);
    background:color-mix(in srgb, var(--ground) 96%, transparent);
    backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px);
    box-shadow:var(--nav-panel-shadow); pointer-events:auto; }
  .mobile-menu-panel:not([hidden]) { display:grid; grid-template-columns:1fr 1fr; gap:0; }
  .mobile-menu-panel > a:not(.pill) { padding:15px 4px; border-bottom:1px solid var(--line-faint); color:var(--ink-2); font-size:15px; text-decoration:none; }
  .mobile-menu-panel .pill { grid-column:1 / -1; justify-content:center; margin-top:18px; }
}
/* ---- shared component helpers that ride with the nav file (kontext + landing) ---- */
.ocell.quote .logo { font-family:'Geist Mono',monospace; font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.applyright .pill { border:0; font-family:'FK Grotesk',sans-serif; }
.operator-form .pill { border:0; justify-self:start; font-family:'FK Grotesk',sans-serif; }