/* ── The one top bar (2026-10-21) ────────────────────────────────────────
   Every page but the home page carries this bar, written into the page by
   scripts/site-nav.py so it is in the HTML before any script runs. The home
   page keeps its own bar with the same links and the same look; the check
   in site-nav.py holds the two to one link list.

   Apple's rule for glass, kept: glass on the floating bar only, never in
   the content, and a solid bar for anyone who asks for less transparency.
   Classes are sn-* so nothing in style.css can reach them.

   Measured ink, both themes:
   dark  #F1F4FB on the bar's solid fallback #070C1C   17.6 : 1
         #C3CBDC (links)                               11.9 : 1
   light #0D1B2A on #F4F7FB                            16.4 : 1
         #334155 (links)                                9.6 : 1
   The mint button: #04231F on #5EEAD4 11.9 : 1, #FFFFFF on #117670 5.6 : 1 */

.sn, [data-site-nav] {
  --sn-text: #F1F4FB; --sn-text-2: #C3CBDC; --sn-border: rgba(153,246,228,.22);
  --sn-rule: rgba(153,246,228,.14); --sn-mint: #5EEAD4; --sn-on-mint: #04231F;
  --sn-glass: rgba(6,10,26,.72); --sn-solid: #070C1C; --sn-panel: #0B1226;
  --sn-hover: rgba(255,255,255,.06);
}
.sn {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 14px;
  min-height: 68px; padding: 10px max(20px, calc((100vw - 1200px) / 2));
  background: var(--sn-glass);
  -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  font-family: var(--font-body, "Satoshi", ui-sans-serif, system-ui, sans-serif);
}
.sn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(94,234,212,0), rgba(94,234,212,.32) 22%, rgba(241,244,251,.2) 50%, rgba(167,139,250,.3) 78%, rgba(167,139,250,0));
}
:root[data-theme="light"] .sn, :root[data-theme="light"] [data-site-nav] {
  --sn-text: #0D1B2A; --sn-text-2: #334155; --sn-border: rgba(17,118,112,.24);
  --sn-rule: rgba(17,118,112,.14); --sn-mint: #117670; --sn-on-mint: #FFFFFF;
  --sn-glass: rgba(244,247,251,.8); --sn-solid: #F4F7FB; --sn-panel: #FFFFFF;
  --sn-hover: rgba(13,27,42,.05);
}
:root[data-theme="light"] .sn::after {
  background: linear-gradient(90deg, rgba(17,118,112,0), rgba(17,118,112,.3) 22%, rgba(13,27,42,.2) 50%, rgba(109,40,217,.24) 78%, rgba(109,40,217,0));
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .sn { background: var(--sn-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .sn-panel, .sn-menu { background: var(--sn-solid) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* the brand lockup, as style.css defines it: the type is the logo and the
   mint full stop is the icon */
.sn-mark { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.sn-mark .nb-logo { color: var(--sn-text); }

.sn-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.sn-links > a, .sn-drop-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 9px; border-radius: 999px; white-space: nowrap;
  color: var(--sn-text-2); font: 500 15px/1 var(--font-body, sans-serif); text-decoration: none;
  background: none; border: 0; cursor: pointer; transition: color .2s, background-color .2s;
}
.sn-links > a:hover, .sn-drop-btn:hover, .sn-drop-btn[aria-expanded="true"] { color: var(--sn-text); background: var(--sn-hover); }
.sn-links > a[aria-current="page"] { color: var(--sn-text); }
.sn-drop-btn svg { width: 12px; height: 12px; transition: transform .25s; }
.sn-drop-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.sn-new {
  font: 600 11px/1 var(--font-body, sans-serif); letter-spacing: .06em; text-transform: uppercase;
  color: var(--sn-on-mint); background: var(--sn-mint); padding: 4px 7px; border-radius: 999px;
}

.sn-drop { position: relative; }
.sn-panel {
  position: absolute; top: calc(100% + 10px); left: -12px; z-index: 110; width: 340px; padding: 8px; border-radius: 20px;
  background: var(--sn-panel); border: 1px solid var(--sn-border);
  box-shadow: 0 30px 70px -24px rgba(0,0,0,.6);
}
:root[data-theme="light"] .sn-panel { box-shadow: 0 30px 70px -24px rgba(13,27,42,.28); }
.sn-panel[hidden] { display: none; }
/* a menu is read, so it is solid: glass stays on the bar (Apple's rule) */
.sn-drop .sn-panel a, .sn-menu nav a {
  display: grid; min-height: 0; gap: 3px; padding: 12px 14px; border-radius: 14px; text-decoration: none; color: var(--sn-text);
  font: 600 15px/1.25 var(--font-body, sans-serif);
}
.sn-d { font-weight: 500; font-size: 13.5px; line-height: 1.3; color: var(--sn-text-2); }
.sn-menu nav a:has(.sn-new) { display: flex; align-items: center; gap: 8px; }
.sn-drop .sn-panel a:hover, .sn-menu nav a:hover, .sn-drop .sn-panel a[aria-current="page"], .sn-menu nav a[aria-current="page"] { background: var(--sn-hover); }

.sn-tools { display: flex; align-items: center; gap: 8px; }
.sn-ib, .sn .theme-btn, .sn-menu .theme-btn {
  width: 44px; height: 44px; display: inline-grid; place-items: center; flex: none; padding: 0; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--sn-border); background: rgba(255,255,255,.04); color: var(--sn-text);
  transition: border-color .2s, background-color .2s;
}
:root[data-theme="light"] .sn-ib, :root[data-theme="light"] .sn .theme-btn, :root[data-theme="light"] .sn-menu .theme-btn { background: rgba(255,255,255,.62); }
.sn-ib:hover, .sn .theme-btn:hover { border-color: var(--sn-mint); }
.sn-ib svg, .sn .theme-btn svg, .sn-menu .theme-btn svg { width: 18px; height: 18px; grid-area: 1 / 1; }
.sn-ib[aria-pressed="true"] { background: rgba(94,234,212,.16); border-color: var(--sn-mint); }
.sn .theme-btn .i-sun, .sn-menu .theme-btn .i-sun { opacity: 0; }
:root[data-theme="dark"] .sn .theme-btn .i-sun, :root[data-theme="dark"] .sn-menu .theme-btn .i-sun { opacity: 1; }
:root[data-theme="dark"] .sn .theme-btn .i-moon, :root[data-theme="dark"] .sn-menu .theme-btn .i-moon { opacity: 0; }
#sn-pause .i-play, .motion-paused #sn-pause .i-pause { display: none; }
.motion-paused #sn-pause .i-play { display: block; }
.sn-menu-btn { display: none; }
.sn-menu-btn .i-x, .sn-menu-btn[aria-expanded="true"] .i-bars { display: none; }
.sn-menu-btn[aria-expanded="true"] .i-x { display: block; }

.sn-cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  font: 700 14.5px/1 var(--font-body, sans-serif); text-decoration: none; white-space: nowrap;
  color: var(--sn-on-mint); background: var(--sn-mint);
  box-shadow: 0 10px 34px -12px rgba(94,234,212,.6), inset 0 1px 0 rgba(255,255,255,.45);
  transition: box-shadow .2s, transform .15s;
}
.sn-cta:hover { box-shadow: 0 14px 44px -12px rgba(94,234,212,.85), inset 0 1px 0 rgba(255,255,255,.45); }
.sn-cta:active, .sn-ib:active { transform: scale(.96); }
.sn-cta .short { display: none; }
.sn a:focus-visible, .sn button:focus-visible, .sn-menu a:focus-visible { outline: 2px solid var(--sn-mint); outline-offset: 2px; }

.sn-menu {
  position: fixed; top: 76px; left: 12px; right: 12px; z-index: 120; max-width: 420px; margin-left: auto;
  max-height: calc(100dvh - 92px); overflow-y: auto;
  padding: 10px; border-radius: 22px; background: var(--sn-panel); border: 1px solid var(--sn-border);
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.8);
}
.sn-menu[hidden] { display: none; }
.sn-menu nav { display: grid; }
.sn-menu .sn-group { margin: 6px 14px 2px; font: 600 11.5px/1 var(--font-body, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--sn-text-2); }
.sn-menu .sn-sep { height: 1px; margin: 8px 6px; background: var(--sn-rule); }
.sn-menu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; padding: 10px 6px 4px 14px; border-top: 1px solid var(--sn-rule); color: var(--sn-text-2); font-size: 14px; }

/* seven links fit from 1101px; below that the bar folds into the menu,
   on the home page's bar as on every other page's */
@media (max-width: 1100px) {
  .nav[data-site-nav] .links { display: none; }
  .nav[data-site-nav] .menu-btn { display: inline-grid; }
  .nav[data-site-nav] .tools > .theme-btn { display: none; }
}
/* the shared bar carries its own logo spacing, so it folds a little earlier */
@media (max-width: 1180px) {
  .sn-links { display: none; }
  .sn-menu-btn { display: inline-grid; }
  .sn-tools { margin-left: auto; }
  .sn-tools > .theme-btn { display: none; }
}
@media (max-width: 420px) {
  .sn { padding: 10px 14px; gap: 8px; }
  .sn-cta { padding: 0 14px; }
  .sn-cta .full { display: none; }
  .sn-cta .short { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .sn *, .sn-menu * { transition: none !important; }
}

/* the home page's own bar carries the same "Who it's for" list: its button
   takes the home page's link style, and its phone menu the group label */
.links .sn-drop-btn { padding: 0 4px; border-radius: 0; background: none !important; color: var(--s-text-2, var(--sn-text-2)); font-size: 15px; }
.links .sn-drop-btn:hover, .links .sn-drop-btn[aria-expanded="true"] { color: var(--s-text, var(--sn-text)); }
.links .sn-panel { left: -18px; }
.menu .sn-group { margin: 6px 14px 2px; font: 600 11.5px/1 var(--f-body, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--s-text-2); }
.menu .sn-sep { height: 1px; margin: 8px 6px; background: var(--s-rule); }

/* ── The one action button (2026-10-21) ──────────────────────────────────
   The home page's mint pill, for every page: one action colour, solid, 48px
   tall, never a gradient. The ghost is the second action beside it.
   #04231F on #5EEAD4 11.9 : 1; #FFFFFF on #117670 5.6 : 1. */
.nb-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px;
  border-radius: 999px; border: 1px solid transparent; text-decoration: none; white-space: nowrap; cursor: pointer;
  font: 700 15.5px/1 var(--font-body, "Satoshi", sans-serif);
  color: #04231F; background: #5EEAD4;
  box-shadow: 0 10px 34px -10px rgba(94,234,212,.6), inset 0 1px 0 rgba(255,255,255,.5);
  transition: box-shadow .2s, transform .15s, border-color .2s;
}
.nb-cta:hover { box-shadow: 0 14px 44px -10px rgba(94,234,212,.85), inset 0 1px 0 rgba(255,255,255,.5); }
.nb-cta:active { transform: scale(.97); }
.nb-cta:focus-visible { outline: 2px solid #5EEAD4; outline-offset: 3px; }
:root[data-theme="light"] .nb-cta { color: #FFFFFF; background: #117670; box-shadow: 0 10px 30px -12px rgba(17,118,112,.55), inset 0 1px 0 rgba(255,255,255,.25); }
:root[data-theme="light"] .nb-cta:focus-visible { outline-color: #117670; }
.nb-cta.nb-ghost { color: #F1F4FB; background: rgba(255,255,255,.04); border-color: rgba(153,246,228,.24); box-shadow: none; }
.nb-cta.nb-ghost:hover { border-color: #5EEAD4; }
:root[data-theme="light"] .nb-cta.nb-ghost { color: #0D1B2A; background: rgba(255,255,255,.72); border-color: rgba(17,118,112,.26); }
:root[data-theme="light"] .nb-cta.nb-ghost:hover { border-color: #117670; }
@media (prefers-reduced-motion: reduce) { .nb-cta { transition: none; } }
/* the home bar brightens its links once it turns solid and darkens them by
   day; its "Who it's for" button follows the same rules as those links */
.nav.solid .links .sn-drop-btn { color: #E2E7F1; }
.nav.solid .links .sn-drop-btn:hover, .nav.solid .links .sn-drop-btn[aria-expanded="true"] { color: #FFFFFF; }
:root[data-theme="light"] .nav .links .sn-drop-btn, :root[data-theme="light"] .nav.solid .links .sn-drop-btn,
[data-theme="light"] .nav.on-day .links .sn-drop-btn { color: var(--text-2, #334155); }
:root[data-theme="light"] .nav .links .sn-drop-btn:hover, :root[data-theme="light"] .nav .links .sn-drop-btn[aria-expanded="true"] { color: var(--text, #0D1B2A); }