/* ==== src/styles/tokens.css ==== */
/* ─────────────────────────────────────────────────────────────
   StratPsych design tokens — "Signal"
   Shared by strategicpsychotherapeutics.com and (next) the StratPsych
   platform. Self-contained: no dependency on site.css. Load this first.

   Palette: clinical science rendered as neural signal. Dark "ink" bands for
   the hero and feature blocks, bright "paper" bands for long reading.
   Primary accent is Synapse (the cyan sampled from the neurons in the hero
   photo); Cortex blue → Synapse is the brand gradient (the logo's bracket).
   On LIGHT backgrounds accents use --link (#1C46E0) for AA contrast — never
   Synapse cyan as text on white.
   Type: Geist (variable) for everything; Geist Mono for small uppercase
   labels, module numbers and "readouts".
   ───────────────────────────────────────────────────────────── */
@font-face { font-family: 'Geist'; src: url('/fonts/geist.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/fonts/geist-mono.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; }

:root {
  /* dark bands */
  --ink: #060B14;
  --deep: #0B1628;
  --deep-2: #10203A;
  --line: rgba(148, 190, 255, .14);
  --line-2: rgba(148, 190, 255, .28);
  --ice: #EAF2FF;
  --ice-2: #B9C9E4;   /* secondary text on dark (AA on --ink: 11:1) */
  --ice-3: #7F93B5;   /* tertiary / readouts on dark (AA: 5.4:1) */
  /* light bands */
  --paper: #F4F7FB;
  --paper-2: #E9EEF6;
  --surface: #FFFFFF;
  --text: #0B1426;
  --muted: #4A5872;   /* AA on --paper: 6.6:1 */
  --hair: rgba(11, 20, 38, .12);
  --hair-2: rgba(11, 20, 38, .22);
  /* accents */
  --synapse: #3ED6D8;       /* pulses, links on dark, focus, highlights */
  --synapse-2: #8AEBEC;     /* the bright head of a pulse */
  --cortex: #2F5BFF;        /* brand blue */
  --navy: #1E3A8A;
  --deep-navy: #10245E;     /* the logo gradient on light starts here */
  --link: #1C46E0;          /* links / accents on light (AA on white: 6.3:1) */
  --grad-brand: linear-gradient(90deg, #1E3A8A 0%, #2F5BFF 50%, #3ED6D8 100%);
  --grad-brand-light: linear-gradient(90deg, #10245E 0%, #2F5BFF 100%);
  --grad-btn: linear-gradient(100deg, #3ED6D8 0%, #6EE3E4 100%);
  /* type */
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --fs-display: clamp(2.6rem, 6vw, 5.6rem);
  --fs-h1: clamp(2.3rem, 5vw, 4.4rem);
  --fs-h2: clamp(1.8rem, 3.4vw, 3.1rem);
  --fs-h3: clamp(1.2rem, 1.7vw, 1.5rem);
  --fs-lede: clamp(1.05rem, 1.3vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-label: .72rem;
  --track-display: -.035em;
  --track-label: .14em;
  /* space + shape */
  --pad: clamp(16px, 4.5vw, 80px);
  --sec: clamp(64px, 8vw, 124px);
  --gap: clamp(20px, 3vw, 48px);
  --bar-h: 68px;
  --r: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --pulse-travel: 20%;   /* fraction of a pulse cycle spent travelling (see brand/pulse.css) */
}

/* ==== src/brand/pulse.css ==== */
/* ─────────────────────────────────────────────────────────────
   The StratPsych bracket + "mental pulse" — reusable brand component.
   Markup comes from src/brand/logo.mjs (logo({ pulse: true })). Everything
   here is CSS-only, starts from the document on the first frame and animates
   ONLY stroke-dashoffset on small paths, transform and opacity. No filters,
   no blend modes on movers.

   Anatomy (all inside one <svg class="sp">):
     .sp-line    the bracket path (pathLength=1), gradient stroke, draws on
     .sp-pulse   one travelling pulse = three stacked dash segments (wide faint,
                 mid, bright core) + a launch ring at the start dot and a fire
                 flash + ripple ring at the arrival dot.
     .sp-dot     the two end dots (static), .sp-halo their soft glow (static)
     .sp-word / .sp-tm / .sp-motto   the traced lockup (fade up after the draw)

   Pacing: STEADY and continuous. Two .sp-pulse copies (--k: 0 and 1) share
   one travel time --t and one linear speed; each runs a 2×--t cycle (travel
   for the first half, off-path for the second) and the second starts --t
   later, so the moment one pulse reaches the upper-right dot (and fires)
   the next is launching from the lower-left dot. There is always exactly
   one pulse on the line, evenly spaced, forever.
   Reduced motion: line drawn, word visible, no pulses; the dots stay lit.
   ───────────────────────────────────────────────────────────── */
.sp { display: block; overflow: visible; width: 100%; height: auto; }
.sp * { vector-effect: none; }
.sp-line { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.sp-dot { fill: var(--synapse); }
.sp-dot-a { fill: var(--cortex); }
.sp-halo { fill: var(--synapse); opacity: .16; }
.sp-halo-a { fill: var(--cortex); opacity: .22; }
.sp-word, .sp-tm { fill: var(--ice); }
.sp-motto { fill: var(--ice-2); }
/* dark variant: the word and line carry their gradient ids inline (namespaced per instance) */
.sp--dark .sp-motto { fill: var(--link); }
.sp--dark .sp-dot { fill: var(--cortex); }
.sp--dark .sp-dot-a { fill: var(--deep-navy); }
.sp--dark .sp-halo { opacity: .12; }

/* ── entrance (.sp--live): the line draws on from the lower-left dot, then the word rises, then the loop begins ── */
.sp--live .sp-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sp-draw 1.5s var(--ease-io) .5s forwards; } /* .5s: a beat of the brain on its own first (Ben) */
.sp--live .sp-word, .sp--live .sp-tm, .sp--live .sp-motto { opacity: 0; transform: translateY(4px); transform-box: fill-box; animation: sp-rise .9s var(--ease) 1.35s forwards; }
.sp--live .sp-motto { animation-delay: 1.6s; }
.sp--live .sp-dot-b, .sp--live .sp-halo-b { opacity: 0; animation: sp-in .5s ease 1.55s forwards; }
.sp--live .sp-halo-b { animation-name: sp-in-halo; }
@keyframes sp-draw { to { stroke-dashoffset: 0; } }
@keyframes sp-rise { to { opacity: 1; transform: none; } }
@keyframes sp-in { to { opacity: 1; } }
@keyframes sp-in-halo { to { opacity: .16; } }

/* ── the pulses ── */
.sp-pulse { --t: 2.6s; --k: 0; }
.sp-p, .sp-fire, .sp-flash, .sp-launch { animation-duration: calc(var(--t) * 2); animation-delay: calc(var(--t) * var(--k)); animation-iteration-count: infinite; animation-timing-function: linear; }
.sp-p { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sp-p1 { stroke: var(--synapse); stroke-width: 16; opacity: .22; stroke-dasharray: .16 1.4; stroke-dashoffset: .16; animation-name: sp-run-16; }
.sp-p2 { stroke: var(--synapse); stroke-width: 8; opacity: .7; stroke-dasharray: .10 1.4; stroke-dashoffset: .10; animation-name: sp-run-10; }
.sp-p3 { stroke: #fff; stroke-width: 4; opacity: 1; stroke-dasharray: .045 1.4; stroke-dashoffset: .045; animation-name: sp-run-045; }
/* the head travels 0 → 1 at constant speed over the first half of the cycle (offset = L - head); the tail then leaves the end
   at the same speed (offset → -1) and the segment waits off-path until the cycle restarts at the start dot */
@keyframes sp-run-16 { 0% { stroke-dashoffset: .16; } 50% { stroke-dashoffset: -.84; } 58%, 100% { stroke-dashoffset: -1; } }
@keyframes sp-run-10 { 0% { stroke-dashoffset: .10; } 50% { stroke-dashoffset: -.90; } 55%, 100% { stroke-dashoffset: -1; } }
@keyframes sp-run-045 { 0% { stroke-dashoffset: .045; } 50% { stroke-dashoffset: -.955; } 52.25%, 100% { stroke-dashoffset: -1; } }
/* the end dot fires when the head arrives (50%): a flash on the dot and a ring that ripples out; the start dot emits a ring at launch (0%) */
.sp-fire, .sp-flash, .sp-launch { transform-box: fill-box; transform-origin: center; opacity: 0; animation-timing-function: ease-out; }
.sp-fire { fill: none; stroke: var(--synapse-2); stroke-width: 2.5; animation-name: sp-fire; }
.sp-flash { fill: #fff; animation-name: sp-flash; }
.sp-launch { fill: none; stroke: var(--cortex); stroke-width: 2; animation-name: sp-launch; }
@keyframes sp-fire { 0%, 49.5% { transform: scale(.5); opacity: 0; } 50% { transform: scale(.6); opacity: .95; } 64% { transform: scale(3.2); opacity: 0; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes sp-flash { 0%, 49.5% { transform: scale(.6); opacity: 0; } 50.5% { transform: scale(1.35); opacity: 1; } 60% { transform: scale(1); opacity: 0; } 100% { transform: scale(1); opacity: 0; } }
@keyframes sp-launch { 0% { transform: scale(.6); opacity: .8; } 8% { transform: scale(2.6); opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } }
/* with the entrance, the loop begins once the line is drawn and the word is up */
.sp--live .sp-p, .sp--live .sp-fire, .sp--live .sp-flash, .sp--live .sp-launch { animation-delay: calc(2.3s + var(--t) * var(--k)); }

/* ── a quieter voice for inner uses (cards, footer): same pace, softer glow ── */
.sp--quiet .sp-p1 { display: none; }
.sp--quiet .sp-p2 { opacity: .4; }
.sp--quiet .sp-fire { stroke-width: 2; }

@media (prefers-reduced-motion: reduce) {
  .sp--live .sp-line { stroke-dashoffset: 0; animation: none; }
  .sp--live .sp-word, .sp--live .sp-tm, .sp--live .sp-motto, .sp--live .sp-dot-b { opacity: 1; transform: none; animation: none; }
  .sp--live .sp-halo-b { opacity: .16; animation: none; }
  .sp-pulse { display: none; }
}

/* ==== src/styles/site.css ==== */
/* ─────────────────────────────────────────────────────────────
   Strategic Psychotherapeutics — "Signal"
   Tokens live in tokens.css, the bracket + pulse in brand/pulse.css.
   Dark, cinematic bands (hero, platform, subscription, watch, more,
   advisory, footer) alternate with bright paper bands for the long copy.
   The layout system is a sideline grid: readout kicker + title in the left
   third, lede on the right, hairlines, mono readouts, and one motif
   repeated everywhere — the logo's bracket line + end dots.
   ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 16px); background: var(--ink); }
body { margin: 0; background: var(--ink); color: var(--ice); font: 400 var(--fs-body)/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; font-feature-settings: 'ss01', 'cv11'; }
img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }
img[style*='--max'] { max-width: min(100%, var(--max)); }
h1, h2, h3, h4, p, ul, ol, dl, dd, dt, figure, blockquote, fieldset, address { margin: 0; padding: 0; font-style: normal; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
legend { padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
b, strong { font-weight: 600; }
sup { font-size: .5em; line-height: 0; }
:focus-visible { outline: 2px solid var(--synapse); outline-offset: 3px; }
.on-paper :focus-visible { outline-color: var(--link); }
::selection { background: var(--synapse); color: var(--ink); }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 200; background: var(--synapse); color: var(--ink); padding: 12px 18px; font: 600 .85rem var(--sans); border-radius: 8px; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: 1400px; margin-inline: auto; padding-inline: var(--pad); }
p + p { margin-top: 1em; }
figcaption { font: 400 .85rem/1.4 var(--sans); color: var(--ice-3); margin-top: 10px; }
.on-paper figcaption { color: var(--muted); }
section { position: relative; }
.on-paper { background: var(--paper); color: var(--text); }
.on-paper .lede { color: var(--muted); }
.on-paper a:not(.btn) { color: var(--link); }
.on-paper .kicker { color: var(--link); }

/* ── type ── */
.h-page, .h-sec, .h-item, .hero-tag { font-family: var(--sans); font-weight: 600; letter-spacing: var(--track-display); line-height: 1.02; text-wrap: balance; }
.h-page { font-size: var(--fs-h1); line-height: .98; font-weight: 650; }
.h-sec { font-size: var(--fs-h2); letter-spacing: -.03em; }
.h-sec em, .h-page em { font-style: normal; color: var(--synapse); }
.on-paper .h-sec em, .on-paper .h-page em { color: var(--link); }
.h-item { font-size: var(--fs-h3); letter-spacing: -.015em; line-height: 1.15; font-weight: 600; }
.lede { font: 400 var(--fs-lede)/1.55 var(--sans); color: var(--ice-2); text-wrap: pretty; }
.fine { font-size: .9rem; color: var(--ice-3); }
.on-paper .fine { color: var(--muted); }
.kicker { display: flex; align-items: center; gap: 12px; font: 500 var(--fs-label)/1.2 var(--mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--synapse); margin-bottom: clamp(14px, 1.8vw, 22px); }
.kicker::before { content: ''; width: 18px; height: 1px; background: currentColor; flex: none; opacity: .8; }
.readout { display: inline-block; font: 500 var(--fs-label)/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ice-3); }
.on-paper .readout { color: var(--muted); }

/* section head: kicker + title in the left half, lede on the right, a hairline over the top with the two end dots */
.shead { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 12px clamp(24px, 4vw, 72px); align-items: end; border-top: 1px solid var(--line); padding-top: clamp(22px, 2.6vw, 34px); margin-bottom: clamp(36px, 5vw, 72px); }
.on-paper .shead { border-top-color: var(--hair); }
.shead::before, .shead::after { content: ''; position: absolute; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--cortex); }
.shead::before { left: 0; }
.shead::after { right: 0; background: var(--synapse); }
.on-paper .shead::before { background: var(--deep-navy); }
.on-paper .shead::after { background: var(--cortex); }
.shead .kicker { grid-column: 1; }
.shead .h-sec { grid-column: 1; max-width: 18ch; }
.shead-side { grid-column: 2; grid-row: 1 / 3; align-self: end; display: grid; gap: 18px; justify-items: start; }
.shead-side .lede { max-width: 56ch; }
@media (max-width: 800px) { .shead { grid-template-columns: 1fr; } .shead-side { grid-column: 1; grid-row: auto; } }

/* ── buttons ── */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 46px; padding: .75em 1.35em; font: 600 .93rem/1 var(--sans); letter-spacing: -.005em; text-decoration: none; border: 1px solid transparent; border-radius: var(--r-pill); white-space: nowrap; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s, transform .25s var(--ease), box-shadow .25s; }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn-big { min-height: 54px; padding: .95em 1.7em; font-size: 1rem; }
.btn-sm { min-height: 38px; padding: .55em 1.05em; font-size: .85rem; }
/* primary on dark: ink text on Synapse (AA 11:1). White on the Cortex→Synapse gradient fails AA, so the gradient is the ring, not the fill. */
.btn-cyan { background: var(--grad-btn); color: var(--ink); border-color: transparent; box-shadow: 0 0 0 0 rgba(62, 214, 216, 0); }
.btn-cyan:hover { box-shadow: 0 0 0 4px rgba(62, 214, 216, .18), 0 10px 30px -10px rgba(62, 214, 216, .6); }
.btn-ghost { color: var(--ice); border-color: rgba(234, 242, 255, .32); background: rgba(6, 11, 20, .25); }
.btn-ghost:hover { border-color: var(--ice); background: rgba(234, 242, 255, .06); }
/* primary on light: white on Cortex (AA 5.1:1) */
.btn-ink { background: var(--cortex); color: #fff; border-color: var(--cortex); }
.btn-ink:hover { background: var(--link); border-color: var(--link); box-shadow: 0 10px 30px -12px rgba(47, 91, 255, .7); }
.btn-line { color: var(--text); border-color: var(--hair-2); }
.btn-line:hover { border-color: var(--text); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 1.8rem; }
.arrow-link { display: inline-flex; align-items: center; gap: .45em; min-height: 34px; font: 600 .95rem/1.2 var(--sans); text-decoration: none; color: var(--synapse); padding-bottom: 2px; border-bottom: 1px solid transparent; transition: border-color .2s; }
.arrow-link svg { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.arrow-link:hover { border-color: currentColor; }
.arrow-link:hover svg { transform: translateX(4px); }
.on-paper .arrow-link { color: var(--link); }

/* ── bar ── */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--bar-h); display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 18px; padding-inline: var(--pad); background: rgba(6, 11, 20, .78); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); color: var(--ice); border-bottom: 1px solid var(--line); transition: background .35s, border-color .35s; }
.is-home .bar:not(.solid) { background: linear-gradient(to bottom, rgba(6, 11, 20, .55), rgba(6, 11, 20, 0)); border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.menu-open .bar { background: var(--ink); border-color: transparent; transition: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding-right: calc(var(--pad) + var(--sbw, 0px)); }
.bar-logo { grid-column: 1; display: flex; align-items: center; text-decoration: none; }
.bar-mark { width: 150px; height: auto; overflow: visible; }
/* at this size the logo's strokes are ~0.7px: thicken the line and the pulse so the motion still reads, keep the dots crisp */
.bar-mark .sp-line { stroke-width: 8; }
.bar-mark .sp-p2 { stroke-width: 26; opacity: .5; }
.bar-mark .sp-p3 { stroke-width: 12; }
.bar-mark .sp-fire { stroke-width: 7; }
.bar-mark .sp-launch { stroke-width: 6; }
.bar-nav { grid-column: 2; }
.bar-nav > ul { display: flex; justify-content: center; align-items: center; gap: clamp(14px, 2vw, 32px); }
.bar-nav a, .bar-menu > button { position: relative; display: inline-flex; align-items: center; gap: 4px; font: 500 .92rem/1 var(--sans); letter-spacing: -.005em; text-decoration: none; padding: 10px 0; color: var(--ice-2); transition: color .2s; }
.bar-nav a:hover, .bar-nav a[aria-current], .bar-menu > button:hover, .bar-menu > button[aria-expanded='true'] { color: var(--ice); }
/* the active item's underline is the bracket motif: a line with a dot at each end */
.bar-nav a::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: 2px; height: 1px; background: var(--grad-brand); opacity: 0; transform: scaleX(.6); transform-origin: left; transition: opacity .25s, transform .3s var(--ease); }
.bar-nav a[aria-current]::after, .bar-nav a:hover::after { opacity: 1; transform: none; }
.bar-menu > button svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.bar-menu > button[aria-expanded='true'] svg { transform: rotate(180deg); }
.bar-menu { position: relative; }
.bar-drop { position: absolute; top: calc(100% + 6px); left: 50%; transform: translate(-50%, -6px); min-width: 300px; padding: 8px; background: var(--deep); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); opacity: 0; visibility: hidden; transition: opacity .2s, transform .25s var(--ease), visibility 0s .25s; }
.bar-menu.open .bar-drop, .bar-menu:focus-within .bar-drop { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.bar-drop a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px; }
.bar-drop a::after { display: none; }
.bar-drop a:hover { background: rgba(148, 190, 255, .08); }
.bar-drop a span { font-weight: 600; color: var(--ice); }
.bar-drop a small { font-size: .82rem; color: var(--ice-3); }
.bar-cta { grid-column: 3; display: flex; align-items: center; gap: 18px; }
.bar-login { font: 600 .9rem/1 var(--sans); text-decoration: none; color: var(--ice); padding: 10px 0; }
.bar-login:hover { color: var(--synapse); }
.burger { grid-column: 4; display: none; width: 44px; height: 44px; place-items: center; margin-right: -8px; }
.burger-lines { position: relative; width: 22px; height: 14px; display: block; }
.burger-lines span { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .3s var(--ease), top .3s var(--ease), opacity .2s; }
.burger-lines span:nth-child(1) { top: 0; }
.burger-lines span:nth-child(2) { top: 6px; }
.burger-lines span:nth-child(3) { top: 12px; }
.burger[aria-expanded='true'] .burger-lines span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.burger[aria-expanded='true'] .burger-lines span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] .burger-lines span:nth-child(3) { top: 6px; transform: rotate(-45deg); }
@media (max-width: 1060px) { .bar-nav { display: none; } .burger { display: grid; } .bar { grid-template-columns: auto 1fr auto auto; } .bar-cta { grid-column: 3; } }
@media (max-width: 600px) { .bar-cta .btn { display: none; } .bar { gap: 10px; } .bar-mark { width: 124px; } }
/* the panel is a sibling of the bar, never a child (a filtered bar traps a fixed child) */
.m-menu { position: fixed; inset: 0; z-index: 99; background: var(--ink); color: var(--ice); padding: calc(var(--bar-h) + 16px) var(--pad) 32px; overflow-y: auto; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; animation: menuin .4s var(--ease); }
.m-menu[hidden] { display: none; }
@keyframes menuin { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.mi li { border-top: 1px solid var(--line); }
.mi a { display: flex; align-items: center; gap: 10px; padding: 14px 0; font: 600 clamp(1.9rem, 8vw, 3rem)/1 var(--sans); letter-spacing: -.03em; text-decoration: none; }
.mi a svg { width: 18px; height: 18px; }
.mi a[aria-current], .mi a:hover { color: var(--synapse); }
.mi-sm a { font-size: 1.15rem; padding: 12px 0; letter-spacing: -.01em; color: var(--ice-2); }
.m-h { margin: 26px 0 6px; font: 500 var(--fs-label)/1 var(--mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ice-3); }
.m-foot { display: grid; gap: 12px; }
.m-foot .btn { width: 100%; }
.m-addr { color: var(--ice-3); font-size: .9rem; margin-top: 8px; }
.soc { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 50%; color: inherit; transition: border-color .2s, color .2s; }
.soc:hover { border-color: var(--synapse); color: var(--synapse); }
.soc svg { width: 19px; height: 19px; }
.on-paper .soc { border-color: var(--hair-2); }
.on-paper .soc:hover { border-color: var(--link); color: var(--link); }
body.menu-open { overflow: hidden; padding-right: var(--sbw, 0px); }

/* ── reveals ── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ── HERO ─────────────────────────────────────────────────────
   A living 3D brain (canvas, src/brand/brain.js) over a static poster
   of the same seeded geometry. Paint order: ink + the nebula (CSS, instant),
   the poster (an <img> from the document), the canvas (opacity 0 until the
   scene has drawn its first frame → .gl-on cross-fades it in), one light
   vignette, then the centred block. Reduced motion, no WebGL2 or a shader
   failure leave the poster. */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 660px; max-height: 1180px; overflow: hidden; contain: paint; background: var(--ink); color: var(--ice); }
.hero-nebula { position: absolute; inset: 0; background: radial-gradient(ellipse 56% 44% at 50% 44%, rgba(47, 91, 255, .22), rgba(16, 36, 94, .12) 45%, rgba(6, 11, 20, 0) 100%), radial-gradient(ellipse 30% 22% at 50% 40%, rgba(62, 214, 216, .08), rgba(62, 214, 216, 0) 100%); }
.hero-poster, .hero-poster img, .hero-gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-poster img { object-fit: cover; object-position: 50% 50%; mix-blend-mode: screen; }
/* Below 23:20 the scene fits the brain to the hero's WIDTH (brain.js resize: fitW < 1 when aspect < ~1.156), and
   its size and offset from the hero centre scale with the width. The portrait poster was captured the same way
   (900 wide), so it has to be width-fitted and centred too. "cover" height-fitted it, which drew the brain ~1.65x
   too big on a 390x844 phone until the canvas faded in (the snap Ben saw). Its black ground leaves no edge. */
@media (max-aspect-ratio: 23/20) {
  .hero-poster img { inset: auto 0; top: 50%; height: auto; transform: translateY(-50%); object-fit: fill; }
}
.hero-gl { opacity: 0; transition: opacity .9s var(--ease); mix-blend-mode: screen; }
.hero.gl-on .hero-gl { opacity: 1; }
.hero.gl-on .hero-poster { transition: opacity 1.2s var(--ease) .3s; opacity: 0; }
.hero.gl-reduced .hero-gl, .hero.gl-failed .hero-gl, .hero.gl-lost .hero-gl { display: none; }
/* the poster capture (tools/poster.mjs): the canvas alone, nothing over it */
.hero.is-poster .hero-nebula, .hero.is-poster .hero-vignette, .hero.is-poster .hero-center, .hero.is-poster .hero-foot, .hero.is-poster .hero-poster { display: none; }
.hero.is-poster .hero-gl { transition: none; mix-blend-mode: normal; }
body:has(.hero.is-poster) .bar { display: none; }
.hero-vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 34% 26% at 50% 50%, rgba(6, 11, 20, .5), rgba(6, 11, 20, 0) 100%), radial-gradient(ellipse 46% 40% at 50% 46%, rgba(6, 11, 20, .42), rgba(6, 11, 20, 0) 100%), linear-gradient(to bottom, rgba(6, 11, 20, .55), rgba(6, 11, 20, 0) 20%, rgba(6, 11, 20, 0) 72%, rgba(6, 11, 20, .96)); }
/* the block: logo, tagline, sub, buttons — centred in the hero (Ben) */
.hero-center { position: absolute; inset: 0; z-index: 2; display: grid; align-content: center; justify-items: center; text-align: center; padding: calc(var(--bar-h) + 12px) var(--pad) 128px; pointer-events: none; }
.hero-center a { pointer-events: auto; }
.hero-logo { width: min(50vw, 760px); margin: 0 0 clamp(14px, 2.2vh, 22px); font-size: 1rem; line-height: 0; }
.hero-logo .sp { overflow: visible; }
.hero-tag { font-size: clamp(1.35rem, 2.3vw, 1.95rem); letter-spacing: -.02em; font-weight: 500; color: var(--ice); }
.hero-tag, .hero-sub, .hero-cta { opacity: 0; transform: translateY(12px); animation: rise .9s var(--ease) forwards; }
.hero-tag { animation-delay: 1.9s; }
.hero-sub { animation-delay: 2.1s; }
.hero-cta { animation-delay: 2.3s; }
@keyframes rise { to { opacity: 1; transform: none; } }
.hero-sub { margin-top: 8px; font: 500 clamp(1rem, 1.2vw, 1.15rem)/1.5 var(--sans); color: var(--ice); letter-spacing: .01em; }
/* the brain glows behind the type: a soft ink halo keeps the small lines readable over its brightest rims */
.hero-tag, .hero-sub { text-shadow: 0 0 18px rgba(6, 11, 20, .95), 0 0 6px rgba(6, 11, 20, .9), 0 1px 2px rgba(6, 11, 20, .9); }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(20px, 3vh, 30px); }
/* the foot: readout · "proudly partner with" + the two marks as ice on the dark · scroll cue */
.hero-foot { position: absolute; z-index: 2; left: var(--pad); right: var(--pad); bottom: 24px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 16px; color: var(--ice-3); opacity: 0; animation: rise 1s var(--ease) 2.8s forwards; }
.hero-read { justify-self: start; }
.hero-partners { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 26px); }
.hero-partners .readout { font-size: .62rem; white-space: nowrap; }
.partner { display: block; opacity: .72; transition: opacity .25s; }
.partner:hover { opacity: 1; }
/* the marks: their JPEG/PNG logos inverted + desaturated, screened onto the dark — light marks, no boxes */
/* the marks are pre-keyed transparent ice PNGs (tools/partner-marks.mjs), so no filter/blend tricks */
.partner img { height: 30px; width: auto; max-width: 200px; object-fit: contain; }
.hero-scroll { justify-self: end; display: inline-flex; align-items: center; gap: 10px; font: 500 var(--fs-label)/1 var(--mono); letter-spacing: var(--track-label); text-transform: uppercase; }
.hero-scroll i { display: block; width: 1px; height: 28px; background: linear-gradient(var(--synapse), transparent); transform-origin: top; animation: scrollcue 2.2s var(--ease) infinite; }
@keyframes scrollcue { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); } 100% { transform: scaleY(1) translateY(28px); opacity: 0; } }
@media (max-width: 1000px) { .hero-read { display: none; } .hero-foot { grid-template-columns: 1fr auto; } .hero-partners { justify-content: start; } }
@media (max-width: 700px) {
  .hero { min-height: 100svh; max-height: none; }
  .hero-nebula { background: radial-gradient(ellipse 90% 34% at 50% 44%, rgba(47, 91, 255, .22), rgba(16, 36, 94, .12) 45%, rgba(6, 11, 20, 0) 100%); }
  .hero-center { padding-bottom: 150px; }
  .hero-logo { width: 88vw; }
  .hero-tag { font-size: 1.35rem; }
  .hero-sub { max-width: 30ch; }
  .hero-cta { flex-direction: column; align-items: stretch; width: min(100%, 320px); }
  .hero-foot { bottom: 16px; grid-template-columns: 1fr; gap: 12px; }
  .hero-partners { flex-wrap: wrap; justify-content: center; gap: 12px 18px; }
  .hero-partners .readout { width: 100%; text-align: center; }
  .partner img { height: 24px; max-width: 150px; }
  .hero-scroll { justify-self: center; }
  .hero-scroll i { height: 20px; }
}
@media (min-aspect-ratio: 2/1) and (max-height: 640px) { .hero-logo { width: 40vw; margin-bottom: 8px; } }
@media (prefers-reduced-motion: reduce) {
  .hero-tag, .hero-sub, .hero-cta, .hero-foot { opacity: 1; transform: none; animation: none; }
  .hero-scroll i { animation: none; }
}

/* ── platform: vision + facts, the glass panel, the module spine ── */
.platform { padding: var(--sec) 0; background: linear-gradient(to bottom, var(--ink), var(--deep) 60%, var(--ink)); }
.plat-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.plat-text .lede { max-width: 48ch; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; margin-top: clamp(28px, 3.5vw, 44px); padding-top: 24px; border-top: 1px solid var(--line); }
.facts li { display: grid; gap: 2px; }
.fact-n { font: 600 clamp(2rem, 3.4vw, 3rem)/1 var(--sans); letter-spacing: -.04em; color: var(--ice); }
.fact-l { font: 600 .95rem/1.2 var(--sans); color: var(--ice); margin-top: 6px; }
.fact-s { font: 500 var(--fs-label)/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ice-3); }
.glass { position: relative; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(148, 190, 255, .08), rgba(148, 190, 255, .02)); box-shadow: 0 40px 100px -40px rgba(47, 91, 255, .35), inset 0 1px 0 rgba(234, 242, 255, .08); }
/* the panel's "browser" top: three dots left, the address centred (grid with equal side columns), nothing overhangs the box */
.glass-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 4px 12px; }
.glass-dots { display: flex; gap: 6px; }
.glass-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.glass-url { grid-column: 2; justify-self: center; font-size: .68rem; padding: 4px 12px; border: 1px solid var(--line); border-radius: 6px; }
.glass-shot img { border-radius: 8px; width: 100%; }
.glass figcaption { padding: 14px 4px 2px; }
.spine { margin-top: var(--sec); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line); }
.spine-list { position: relative; display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 0; margin-top: 8px; counter-reset: n; }
.spine-list::before { content: ''; position: absolute; left: 3.3%; right: 3.3%; top: 7px; height: 1px; background: var(--line-2); }
.spine-node { position: relative; display: grid; justify-items: center; text-align: center; gap: 12px; padding-top: 0; opacity: .38; transition: opacity .5s var(--ease); transition-delay: calc(var(--i) * 90ms); }
.spine-node i { display: block; width: 15px; height: 15px; border-radius: 50%; background: var(--deep); border: 1px solid var(--line-2); transition: background-color .4s, border-color .4s, box-shadow .4s; transition-delay: calc(var(--i) * 90ms); }
.spine-node .readout { font-size: .62rem; }
.spine-node b { font: 500 .78rem/1.25 var(--sans); color: var(--ice-2); max-width: 9ch; }
.spine.lit .spine-node { opacity: 1; }
.spine.lit .spine-node i { background: var(--synapse); border-color: var(--synapse); box-shadow: 0 0 0 4px rgba(62, 214, 216, .18); }
.spine.lit .spine-node:last-child i { background: var(--cortex); border-color: var(--cortex); box-shadow: 0 0 0 4px rgba(47, 91, 255, .22); }
@media (max-width: 1100px) { .spine-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px 8px; } .spine-list::before { display: none; } .spine-node { justify-items: start; text-align: left; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 4px 10px; } .spine-node i { grid-row: 1 / 3; align-self: start; margin-top: 2px; } .spine-node b { max-width: none; } }
@media (max-width: 900px) { .plat-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .spine-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facts { gap: 18px 16px; } .glass-url { font-size: .62rem; } }

/* ── inside: tier tabs + chips + the detail panel ── */
.inside { padding: var(--sec) 0; }
.tiers { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); grid-template-rows: auto 1fr; grid-template-areas: 'tabs detail' 'panel detail'; gap: 24px clamp(24px, 3vw, 48px); align-items: start; }
.tier-tabs { grid-area: tabs; display: flex; gap: 8px; flex-wrap: wrap; }
.tier-tabs [role=tab] { display: grid; gap: 2px; min-width: 150px; padding: 12px 16px 12px; border: 1px solid var(--hair-2); border-radius: var(--r); background: var(--surface); text-align: left; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.tier-tabs [role=tab] .readout { font-size: .62rem; }
.tier-tabs [role=tab] b { font-size: 1.05rem; letter-spacing: -.01em; }
.tier-tabs [role=tab] small { font-size: .8rem; color: var(--muted); }
.tier-tabs [role=tab]:hover { border-color: var(--text); }
.tier-tabs [role=tab][aria-selected='true'] { border-color: var(--cortex); box-shadow: 0 0 0 3px rgba(47, 91, 255, .14); }
.tier-tabs [role=tab][aria-selected='true'] .readout { color: var(--link); }
.tier-panel { grid-area: panel; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px 8px 12px; border: 1px solid var(--hair-2); border-radius: var(--r-pill); background: var(--surface); text-align: left; transition: border-color .2s, background-color .2s, color .2s, box-shadow .2s; }
.chip .readout { font-size: .66rem; color: var(--muted); }
.chip b { font: 500 .95rem/1.2 var(--sans); text-transform: capitalize; letter-spacing: -.005em; }
.chip:hover, .chip:focus-visible { border-color: var(--text); }
.chip[aria-pressed='true'] { background: var(--text); color: var(--ice); border-color: var(--text); }
.chip[aria-pressed='true'] .readout { color: var(--synapse); }
.chip.flash { box-shadow: 0 0 0 4px rgba(62, 214, 216, .5); }
.tier-detail { grid-area: detail; position: sticky; top: calc(var(--bar-h) + 24px); padding: clamp(20px, 2.4vw, 32px); background: var(--ink); color: var(--ice); border-radius: var(--r-lg); min-height: 240px; }
.tier-detail .readout { color: var(--synapse); }
.tier-detail .h-item { margin: 10px 0 12px; text-transform: capitalize; font-size: clamp(1.4rem, 2vw, 1.9rem); }
.tier-detail p:not(.readout) { color: var(--ice-2); }
.inside-note { margin-top: 28px; font-size: .88rem; color: var(--muted); max-width: 70ch; }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; grid-template-areas: 'tabs' 'detail' 'panel'; } .tier-detail { position: static; } .tier-tabs [role=tab] { flex: 1 1 140px; min-width: 0; } }

/* ── subscribe: price card + the subscriber update ── */
.sub { padding: var(--sec) 0; }
.sub-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: start; }
.price { position: relative; padding: clamp(28px, 3.5vw, 52px); border: 1px solid var(--line-2); border-radius: var(--r-lg); background: linear-gradient(160deg, var(--deep-2), var(--deep) 60%, var(--ink)); overflow: hidden; }
.price-logo { position: absolute; left: clamp(20px, 2.6vw, 40px); top: clamp(22px, 2.6vw, 40px); width: min(46%, 260px); pointer-events: none; }
.price .kicker { position: relative; margin-top: clamp(56px, 7vw, 76px); }
.price-n { display: flex; align-items: baseline; gap: 4px; font: 650 clamp(3.6rem, 7vw, 6rem)/1 var(--sans); letter-spacing: -.05em; color: var(--ice); margin: 6px 0 18px; }
.price-cur { font-size: .5em; align-self: flex-start; margin-top: .25em; color: var(--synapse); letter-spacing: 0; }
.price-per { font: 500 var(--fs-label)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ice-3); margin-left: 10px; }
.price .lede { max-width: 46ch; }
.incl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.incl li { display: flex; align-items: center; gap: 10px; font-size: .95rem; }
.incl svg { width: 18px; height: 18px; color: var(--synapse); flex: none; }
.price .fine { margin-top: 18px; }
.file { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.file li { display: grid; gap: 2px; }
.file li span:last-child { font-size: .9rem; color: var(--ice-3); }
.update { padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--deep); }
.update-k { color: var(--synapse); }
.update .h-item { margin: 12px 0 18px; }
.update-apps { max-width: 220px; margin-bottom: 18px; border-radius: 10px; overflow: hidden; }
.update-log { display: grid; gap: 8px; margin-bottom: 18px; }
.update-log li { display: grid; grid-template-columns: 52px 1fr; align-items: baseline; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: .95rem; }
.update-log .readout { color: var(--synapse); font-size: .62rem; }
.update p:not(.readout) { color: var(--ice-2); font-size: .95rem; }
.update .arrow-link { margin-top: 18px; }
@media (max-width: 900px) { .sub-grid { grid-template-columns: 1fr; } .incl { grid-template-columns: 1fr; } }

/* ── watch ── */
.watch { padding: var(--sec) 0; background: var(--deep); }
.watch-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; gap: var(--gap); }
.watch-main { grid-row: 1 / 3; }
.watch-main figcaption { display: grid; gap: 8px; justify-items: start; margin-top: 16px; }
.watch-main figcaption b { font-size: 1.2rem; color: var(--ice); }
.yt { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: #000; border: 1px solid var(--line); }
.yt img { width: 100%; height: 100%; object-fit: cover; opacity: .75; transition: opacity .3s, transform .6s var(--ease); }
.yt:hover img { opacity: .9; transform: scale(1.03); }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-play { position: absolute; inset: 0; display: grid; place-items: center; }
.yt-play svg { width: 74px; height: 74px; padding: 20px; border-radius: 50%; background: var(--synapse); color: var(--ink); box-shadow: 0 20px 50px -10px rgba(62, 214, 216, .6); transition: transform .3s var(--ease); }
.yt-play:hover svg { transform: scale(1.06); }
.wcard { display: grid; grid-template-columns: 42% 1fr; gap: 18px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink); text-decoration: none; color: inherit; transition: border-color .25s, transform .3s var(--ease); }
.wcard:hover { border-color: var(--line-2); transform: translateY(-2px); }
.wcard-img { border-radius: 10px; overflow: hidden; align-self: start; }
.wcard-body { display: grid; gap: 8px; align-content: start; }
.wcard-body b { font-size: 1.1rem; letter-spacing: -.01em; }
.wcard-t { font-size: .9rem; color: var(--ice-2); }
.wcard .arrow-link { margin-top: 4px; }
@media (max-width: 900px) { .watch-grid { grid-template-columns: 1fr; } .watch-main { grid-row: auto; } }
@media (max-width: 480px) { .wcard { grid-template-columns: 1fr; } }

/* ── SEPI ── */
.sepi { padding: var(--sec) 0; }
.sepi-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.sepi-text .h-sec { max-width: 20ch; }
.sepi-date { display: grid; gap: 2px; margin: 28px 0 24px; padding: 18px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.sepi-date b { font: 650 clamp(1.8rem, 3.2vw, 2.8rem)/1.05 var(--sans); letter-spacing: -.035em; }
.sepi-date span:last-child { color: var(--muted); }
.sepi-more { display: block; margin: 18px 0 30px; color: var(--link); }
.sepi-text .h-item { margin: 22px 0 8px; }
.sepi-photo { position: sticky; top: calc(var(--bar-h) + 24px); }
.sepi-photo img { border-radius: var(--r-lg); }
@media (max-width: 900px) { .sepi-grid { grid-template-columns: 1fr; } .sepi-photo { position: static; order: -1; } }

/* ── more: certificate, podcasts, resources ── */
.more { padding: var(--sec) 0; }
.more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.mcard { display: grid; gap: 14px; align-content: start; padding: clamp(24px, 3vw, 40px) clamp(22px, 2.6vw, 34px) clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--deep); }
.mcard .readout { color: var(--synapse); }
.mcard p:not(.readout) { color: var(--ice-2); }
.mcard-img { border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.res-list { display: grid; gap: 8px; }
.res-list a { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; transition: border-color .2s, background-color .2s; }
.res-list a:hover { border-color: var(--line-2); background: rgba(148, 190, 255, .05); }
.res-list b { color: var(--ice); }
.res-list span { grid-column: 1; font-size: .85rem; color: var(--ice-3); }
.res-list svg { grid-column: 2; grid-row: 1 / 3; width: 18px; height: 18px; align-self: center; color: var(--synapse); }
@media (max-width: 900px) { .more-grid { grid-template-columns: 1fr; } }

/* ── institutional ── */
.inst { padding: var(--sec) 0; }
.aud { border-top: 1px solid var(--hair); }
.aud-row { display: grid; grid-template-columns: 70px minmax(0, 5fr) minmax(0, 7fr); gap: 8px clamp(18px, 3vw, 48px); align-items: start; padding: clamp(20px, 2.4vw, 30px) 0; border-bottom: 1px solid var(--hair); }
.aud-row .readout { padding-top: 6px; }
.aud-row .h-item { font-size: clamp(1.15rem, 1.5vw, 1.35rem); }
.aud-row p { color: var(--muted); }
.inst-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 32px; margin-top: clamp(28px, 3.5vw, 44px); }
.inst-cta .lede { max-width: 40ch; }
@media (max-width: 800px) { .aud-row { grid-template-columns: 44px 1fr; } .aud-row p { grid-column: 2; } }

/* ── newsletter ── */
.news { padding: var(--sec) 0; }
.news-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gap); align-items: end; }
.news-grid .lede { max-width: 40ch; }
.news-form { display: grid; gap: 14px; }
.news-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 800px) { .news-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .news-fields { grid-template-columns: 1fr; } }

/* ── forms ── */
.f { display: grid; gap: 6px; }
.f > span { font: 500 var(--fs-label)/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ice-3); }
.f > span small { text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: .8rem; }
.f input, .f textarea { width: 100%; min-height: 48px; padding: 12px 14px; background: rgba(148, 190, 255, .06); border: 1px solid var(--line-2); border-radius: 10px; color: var(--ice); transition: border-color .2s, background-color .2s; }
.f input:focus, .f textarea:focus { outline: none; border-color: var(--synapse); background: rgba(148, 190, 255, .1); }
.f textarea { resize: vertical; min-height: 140px; }
.on-paper .f > span { color: var(--muted); }
.on-paper .f input, .on-paper .f textarea { background: var(--surface); border-color: var(--hair-2); color: var(--text); }
.on-paper .f input:focus, .on-paper .f textarea:focus { border-color: var(--cortex); box-shadow: 0 0 0 3px rgba(47, 91, 255, .14); }
.f legend { font: 500 var(--fs-label)/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.radios { display: flex; flex-wrap: wrap; gap: 8px; }
.radio { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 1px solid var(--hair-2); border-radius: var(--r-pill); background: var(--surface); cursor: pointer; font-size: .92rem; transition: border-color .2s, background-color .2s, color .2s; }
.radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio:has(input:checked) { background: var(--text); color: var(--ice); border-color: var(--text); }
.radio:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; }
.form-go { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.form-status { font-size: .92rem; min-height: 1.4em; }
.form-status.ok { color: var(--synapse); }
.form-status.err { color: #FF8A8A; }
.on-paper .form-status.ok { color: #0E7C7E; }
.on-paper .form-status.err { color: #B3261E; }
.turnstile:empty { display: none; }

/* ── the subscribe band every inner page ends on ── */
.bband { padding: clamp(48px, 6vw, 96px) 0; border-top: 1px solid var(--line); background: linear-gradient(to bottom, var(--deep), var(--ink)); }
.bband-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: center; }
.bband-line { font: 500 clamp(1.4rem, 2.6vw, 2.2rem)/1.2 var(--sans); letter-spacing: -.025em; max-width: 24ch; }
.bband .btn-row { margin: 0; justify-content: flex-end; }
@media (max-width: 800px) { .bband-grid { grid-template-columns: 1fr; } .bband .btn-row { justify-content: flex-start; } }

/* ── footer ── */
.foot { padding: clamp(40px, 5vw, 72px) 0 32px; border-top: 1px solid var(--line); background: var(--ink); color: var(--ice-2); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 7fr)); gap: 32px clamp(24px, 4vw, 64px); }
.foot-mark { width: min(100%, 320px); overflow: visible; }
.foot-logo { display: block; }
.foot-tag { margin-top: 14px; font-size: .95rem; color: var(--ice-3); }
.foot-h { font: 500 var(--fs-label)/1.2 var(--mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ice-3); margin-bottom: 14px; }
.foot-addr { font-size: .95rem; line-height: 1.5; margin-bottom: 8px; }
.foot-a, .foot-nav a { display: block; padding: 4px 0; font-size: .95rem; text-decoration: none; color: var(--ice-2); }
.foot-a:hover, .foot-nav a:hover { color: var(--synapse); }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: clamp(32px, 4vw, 56px); padding-top: 22px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--ice-3); }
/* base rows: the copyright/credit line full width, then the socials (left) and "Made by BenSited" (right, last on phones) */
.foot-base > p:first-child { flex-basis: 100%; }
.foot-soc { order: 1; }
.foot-credit { order: 2; white-space: nowrap; }
.foot-credit a { color: var(--ice); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--synapse); padding-bottom: 1px; transition: color .2s; }
.foot-credit a:hover, .foot-credit a:focus-visible { color: var(--synapse); }
.foot-soc { display: flex; gap: 8px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }

/* ── sub-page opener ── */
.opener { padding: calc(var(--bar-h) + clamp(56px, 8vw, 120px)) 0 clamp(40px, 5vw, 72px); background: radial-gradient(ellipse 60% 80% at 80% 0%, rgba(47, 91, 255, .18), transparent 60%), radial-gradient(ellipse 50% 60% at 10% 100%, rgba(62, 214, 216, .08), transparent 60%), var(--ink); }
.opener-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(24px, 4vw, 72px); align-items: end; }
.opener-lede { max-width: 44ch; padding-bottom: 6px; }
.opener .h-page { max-width: 14ch; }
@media (max-width: 800px) { .opener-grid { grid-template-columns: 1fr; } }

/* ── subscription page ── */
.prod { padding: clamp(32px, 4vw, 56px) 0 var(--sec); }
.prod-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: stretch; }
.prod-photo img { height: 100%; object-fit: cover; border-radius: var(--r-lg); }
.prod-photo { display: grid; grid-template-rows: 1fr auto; }
.incl-sec { padding: var(--sec) 0; }
.incl-list { border-top: 1px solid var(--hair); }
.incl-row { display: grid; grid-template-columns: 70px minmax(0, 7fr) minmax(0, 4fr); gap: 12px clamp(18px, 3vw, 48px); align-items: start; padding: clamp(24px, 3vw, 40px) 0; border-bottom: 1px solid var(--hair); }
.incl-row .readout { padding-top: 6px; }
.incl-body { display: grid; gap: 12px; justify-items: start; }
.incl-body p { color: var(--muted); max-width: 62ch; }
.incl-img { border-radius: 10px; overflow: hidden; border: 1px solid var(--hair); align-self: start; }
@media (max-width: 800px) { .incl-row { grid-template-columns: 44px 1fr; } .incl-img { grid-column: 2; } .prod-grid { grid-template-columns: 1fr; } .prod-photo { display: none; } }
.verify { padding: var(--sec) 0; }
.ladder-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gap); align-items: start; }
.ladder { position: relative; display: grid; gap: 14px; padding-left: 30px; }
.ladder::before { content: ''; position: absolute; left: 7px; top: 20px; bottom: 20px; width: 1px; background: linear-gradient(to bottom, var(--navy), var(--cortex), var(--synapse)); }
.rung { position: relative; display: grid; gap: 8px; padding: clamp(20px, 2.4vw, 30px); border: 1px solid var(--line); border-radius: var(--r); background: var(--deep); }
.rung::before { content: ''; position: absolute; left: -30px; top: 24px; width: 15px; height: 15px; border-radius: 50%; background: var(--ink); border: 1px solid var(--cortex); box-shadow: 0 0 0 4px rgba(47, 91, 255, .14); }
.rung:nth-child(2)::before { border-color: var(--cortex); }
.rung:nth-child(3)::before, .rung:nth-child(4)::before { border-color: var(--synapse); }
.rung--cert::before { background: var(--synapse); border-color: var(--synapse); box-shadow: 0 0 0 4px rgba(62, 214, 216, .22); }
.rung-n { color: var(--synapse); }
.rung p { color: var(--ice-2); font-size: .95rem; }
.badge { position: sticky; top: calc(var(--bar-h) + 24px); padding: 24px; background: #fff; border-radius: var(--r-lg); }
.badge figcaption { color: var(--muted); text-align: center; }
@media (max-width: 800px) { .ladder-grid { grid-template-columns: 1fr; } .badge { position: static; max-width: 320px; } }

/* ── training page ── */
.tr-intro { padding: clamp(24px, 4vw, 48px) 0 var(--sec); }
.tr-intro-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.tr-text .lede + .lede { margin-top: 1.2em; }
.tr-side { position: sticky; top: calc(var(--bar-h) + 24px); display: grid; gap: 12px; padding: clamp(20px, 2.4vw, 30px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--deep); }
.tr-harris { width: 120px; border-radius: 10px; overflow: hidden; }
.tr-name { display: grid; }
.tr-name span { color: var(--ice-3); font-size: .9rem; }
.tr-facts { display: grid; gap: 8px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .92rem; color: var(--ice-2); }
.tr-facts li { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: baseline; }
@media (max-width: 900px) { .tr-intro-grid { grid-template-columns: 1fr; } .tr-side { position: static; } }
.level { padding: var(--sec) 0; }
.level + .level { padding-top: 0; }
.level-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 12px clamp(24px, 4vw, 72px); align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.level-head .kicker, .level-head .h-sec { grid-column: 1; }
.level-head .lede { grid-column: 2; grid-row: 1 / 3; align-self: end; }
@media (max-width: 800px) { .level-head { grid-template-columns: 1fr; } .level-head .lede { grid-column: 1; grid-row: auto; } }
/* the two-track timeline: the bracket line as connector, a dot per stop */
.track { position: relative; display: grid; gap: 0; padding-left: 34px; }
.track::before { content: ''; position: absolute; left: 8px; top: 26px; bottom: 26px; width: 1px; background: linear-gradient(to bottom, var(--deep-navy), var(--cortex) 60%, var(--synapse)); }
.stop { position: relative; display: grid; padding: clamp(20px, 2.6vw, 32px) 0; border-top: 1px solid var(--hair); }
.stop:last-child { border-bottom: 1px solid var(--hair); }
.stop-dot { position: absolute; left: -34px; top: calc(clamp(20px, 2.6vw, 32px) + 6px); width: 17px; height: 17px; border-radius: 50%; background: var(--paper); border: 1px solid var(--cortex); box-shadow: 0 0 0 4px rgba(47, 91, 255, .12); }
.stop:nth-child(n + 4) .stop-dot { border-color: var(--synapse); box-shadow: 0 0 0 4px rgba(62, 214, 216, .18); }
.stop--soon .stop-dot { border-style: dashed; box-shadow: none; }
.stop--soon .h-item { color: var(--muted); }
.stop-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px clamp(18px, 3vw, 48px); align-items: start; }
.stop-body > .readout { grid-column: 1 / -1; }
.stop-body .h-item { font-size: clamp(1.3rem, 2vw, 1.7rem); }
.stop-by { grid-column: 1; color: var(--muted); }
.stop-mods { grid-column: 2; grid-row: 2 / 4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.stop-mods .readout { width: 100%; margin-bottom: 2px; }
.modchip { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 12px; border: 1px solid var(--hair-2); border-radius: var(--r-pill); background: var(--surface); font: 500 .88rem/1.1 var(--sans); text-transform: capitalize; text-decoration: none; color: var(--text) !important; transition: border-color .2s, background-color .2s, color .2s; }
a.modchip:hover { background: var(--text); color: var(--ice) !important; border-color: var(--text); }
.modchip--none { color: var(--muted) !important; border-style: dashed; }
.stop-videos { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 12px; }
.stop-videos > .readout { grid-column: 1 / -1; }
.stop-videos figcaption { font-size: .88rem; }
.stop-body .arrow-link { grid-column: 1 / -1; margin-top: 6px; }
.level-notes { margin-top: clamp(24px, 3vw, 40px); padding: clamp(20px, 2.4vw, 30px); border: 1px solid var(--hair); border-radius: var(--r); background: var(--surface); color: var(--muted); max-width: 80ch; }
@media (max-width: 800px) { .stop-body { grid-template-columns: 1fr; } .stop-mods { grid-column: 1; grid-row: auto; } }
.tr-reg { padding: var(--sec) 0; }
.reg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.reg-card { display: grid; gap: 14px; align-content: start; justify-items: start; padding: clamp(22px, 2.6vw, 34px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--deep); }
.reg-card .readout { color: var(--synapse); }
.reg-card p { color: var(--ice-2); }
@media (max-width: 900px) { .reg-grid { grid-template-columns: 1fr; } }
.tr-int { padding: var(--sec) 0; }
.tr-int-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: center; }
.tr-int .h-sec { font-size: clamp(1.5rem, 2.6vw, 2.3rem); }
@media (max-width: 900px) { .tr-int-grid { grid-template-columns: 1fr; } }
.tr-rel { padding: var(--sec) 0; }
.rel-list { display: grid; gap: 8px; }
.rel-list a { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; transition: border-color .2s, background-color .2s; }
.rel-list a:hover { border-color: var(--line-2); background: rgba(148, 190, 255, .05); }
.rel-list b { grid-column: 1; font-size: 1.05rem; }
.rel-list svg { grid-column: 2; grid-row: 1 / 3; width: 18px; height: 18px; align-self: center; color: var(--synapse); }
.reading { display: grid; gap: 4px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line); }

/* ── team page ── */
.roster { padding: var(--sec) 0; }
.who-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px) clamp(12px, 1.6vw, 22px); }
.who-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.who-btn { display: grid; gap: 12px; width: 100%; text-align: left; border-radius: var(--r); }
/* portraits in full colour, always (Ben); the hover is a lift + a Cortex ring, nothing changes in the picture */
.who-pic { position: relative; border-radius: var(--r); overflow: hidden; background: var(--paper-2); box-shadow: 0 0 0 0 rgba(47, 91, 255, 0); transition: transform .4s var(--ease), box-shadow .3s var(--ease); }
.who-pic img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.who-btn:hover .who-pic, .who-btn:focus-visible .who-pic { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--cortex), 0 24px 40px -24px rgba(11, 20, 38, .5); }
.who-text { display: grid; gap: 2px; }
.who-text b { font-size: 1rem; letter-spacing: -.01em; line-height: 1.25; }
.who-text span { font-size: .85rem; color: var(--muted); line-height: 1.35; }
.who-more { display: inline-flex; align-items: center; gap: 6px; font: 600 .82rem/1 var(--sans); color: var(--link); }
.who-more svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.who-btn:hover .who-more svg { transform: translateX(3px); }
.roster--adv .who-text span { color: var(--ice-3); }
.roster--adv .who-more { color: var(--synapse); }
.roster--adv .who-pic { background: var(--deep); }
/* in memoriam: a quiet card — no duotone, a soft frame, a small readout */
.who--mem .who-pic { outline: 1px solid var(--hair-2); outline-offset: 4px; }
.who--mem .who-text span { color: var(--text); font-style: italic; }
@media (max-width: 1100px) { .who-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .who-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .who-grid, .who-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.assoc { padding: var(--sec) 0; border-top: 1px solid var(--line); }
.assoc-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); align-items: center; }
.assoc-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.assoc-list li { display: grid; gap: 10px; }
.assoc-list img { aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); }
.assoc-list b { font-size: .95rem; }
@media (max-width: 800px) { .assoc-grid { grid-template-columns: 1fr; } }
.research { padding: var(--sec) 0; }
.res-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.res-log { display: grid; gap: 0; border-top: 1px solid var(--hair); }
.res-log li { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--hair); }
.res-log .readout { color: var(--link); }
.res-card { display: grid; gap: 14px; justify-items: start; padding: clamp(22px, 2.6vw, 34px); border: 1px solid var(--hair); border-radius: var(--r-lg); background: var(--surface); }
.res-card .readout { color: var(--link); }
.res-card .lede { font-size: 1.1rem; }
@media (max-width: 900px) { .res-grid { grid-template-columns: 1fr; } }
/* the bio dialog */
.bio { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 16px; background: rgba(6, 11, 20, .78); }
.bio[hidden] { display: none; }
.bio-panel { position: relative; width: min(100%, 980px); max-height: calc(100vh - 32px); max-height: calc(100svh - 32px); overflow-y: auto; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0; background: var(--paper); color: var(--text); border-radius: var(--r-lg); animation: bioin .35s var(--ease); }
@keyframes bioin { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.bio-photo img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-lg) 0 0 var(--r-lg); }
.bio-body { padding: clamp(24px, 3.5vw, 48px); }
.bio-body .h-sec { font-size: clamp(1.5rem, 2.6vw, 2.2rem); margin-bottom: 18px; }
.bio-text { color: var(--muted); }
.bio-links { margin-top: 24px; }
.bio-x { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; background: var(--text); color: var(--ice); font-size: 1.4rem; line-height: 1; }
@media (max-width: 700px) { .bio-panel { grid-template-columns: 1fr; } .bio-photo img { aspect-ratio: 4 / 3; border-radius: var(--r-lg) var(--r-lg) 0 0; } }

/* ── contact page ── */
.contact { padding: clamp(24px, 4vw, 48px) 0 var(--sec); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.contact-info { display: grid; gap: 28px; }
.contact-photo img { border-radius: var(--r-lg); }
.contact-addr, .contact-mail, .contact-soc { display: grid; gap: 8px; justify-items: start; }
.contact-addr .readout, .contact-mail .readout, .contact-soc .readout { color: var(--synapse); }
.cform { padding: clamp(24px, 3vw, 44px); background: var(--paper); color: var(--text); border-radius: var(--r-lg); }
.cform .kicker { color: var(--link); }
.cform .f > span, .cform legend { color: var(--muted); }
.cform .f input, .cform .f textarea { background: var(--surface); border-color: var(--hair-2); color: var(--text); }
.cform .f input:focus, .cform .f textarea:focus { border-color: var(--cortex); box-shadow: 0 0 0 3px rgba(47, 91, 255, .14); }
.cform .form-status.ok { color: #0E7C7E; }
.cform .form-status.err { color: #B3261E; }
.cform .btn-cyan { background: var(--cortex); color: #fff; }
.cform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.f-wide { grid-column: 1 / -1; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cform-grid { grid-template-columns: 1fr; } }

/* ── legal ── */
.legal { padding: var(--sec) 0; min-height: 40vh; }
.legal-grid { display: grid; gap: 18px; max-width: 70ch; }
.legal-status { color: var(--link); }