/* SAKE Labs site: visual system v2 (issue #3, concept v4 "orbital").
   Tokens from docs/design/orbital/tokens.css (brand values from the brief,
   unchanged), plus the component values from the pack's Components and Motion
   tabs and the v3 orbital prototype. Every colour in a rule below is a token; raw
   colour values appear only in the token blocks. */

/* ---------- Fonts: self-hosted, licences in fonts/OFL*.txt ---------- */
@font-face { font-family: "Montserrat"; font-weight: 300; font-style: normal; font-display: swap; src: url("fonts/Montserrat-Light.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/Montserrat-Bold.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/Montserrat-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/IBMPlexSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2"); }

/* ---------- Tokens: light (default ground) ---------- */
:root {
  /* Brand (brief §5) */
  --bg: #EEF1F5; --surface: #FFFFFF; --ink: #0B1630; --ink-4: #5E6A80;
  --accent: #022656; --brand-teal: #01ABA0; --brand-teal-text: #00776F;
  /* Extensions */
  --surface-2: #F6F8FB; --surface-3: #E9EEF5; --line: #D3DBE7; --line-strong: #9AA8BE;
  --ink-2: #3A4760; --h-ink: #022656; --focus: #00776F;
  --ink-note: #3A4760;
  --on-accent: #FFFFFF; --accent-hover: #0B3A7A;
  --step-bg: rgba(2,38,86,.07);
  --line-muted: #C4CEDC;
  --stripe-a: #E9EEF5; --stripe-b: #F4F7FB;
  --gate-bg: rgba(0,119,111,.07); --doing-bg: rgba(2,38,86,.04); --ok-bg: rgba(0,119,111,.08);
  --warn-ink: #9A5B00;
  --header-bg: rgba(6,20,48,.86);
  --chip-ink: #0B1630;

  /* Call to action: teal on navy, the same in both grounds */
  --cta: #2BC4B8; --cta-hover: #5FD8CE; --on-cta: #061430; --cta-ring: #E8EEF7;
  --nav-ink: #C9D3E3; --nav-hover: #FFFFFF;
  --slot: #F2B84B;

  /* Map-only accents (pack §3): never body text on light grounds */
  --map-sea-0: #061430; --map-sea-1: #0B1F44; --map-grid: #1E3560;
  --map-lamp: #FFCF73; --map-ok: #2BC4B8; --map-warn: #F2B84B; --map-error: #F06A5D;
  --map-violet: #C3B4FF; --map-violet-2: #8C7BFF; --map-human: #5BD68A; --map-hull: #F2F4F8;
  --map-pv-1: rgba(6,20,48,.45); --map-pv-2: rgba(6,20,48,.75);
  --scan-1: rgba(43,196,184,0); --scan-2: rgba(43,196,184,.07); --scan-3: rgba(43,196,184,.22);
  --sel-bg: rgba(43,196,184,.16); --hover-bg: rgba(43,196,184,.08); --legend-on: rgba(43,196,184,.1);
  --role-on: #12305F;

  /* Type: Montserrat display · IBM Plex Sans text · IBM Plex Mono HUD */
  --font-display: "Montserrat", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-text: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --t-h1: 800 clamp(36px, 4.8vw, 62px)/1.02 var(--font-display);
  --t-h2: 800 clamp(30px, 4.2vw, 50px)/1.06 var(--font-display);
  --t-lede: 400 17px/1.55 var(--font-text);
  --t-step: 400 15px/1.45 var(--font-text);
  --t-ui: 700 15px/1 var(--font-display);
  --t-chip: 500 14px/1.2 var(--font-text);
  --t-tag: 500 12px/1.2 var(--font-mono);
  --t-hud: 500 11px/1.3 var(--font-mono);
  --t-note: 400 12px/1.5 var(--font-mono);

  /* Spacing (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px;
  --gutter: clamp(16px, 4vw, 56px); --section-gap: clamp(24px, 4vw, 64px);
  --header-h: 60px; --rail-h: 44px; --hit: 44px;
  --rail-reserve: 52px; /* the home rail from 900px: 4px inset + 44px + 4px clear */
  --top-pad: 124px;

  /* Radii */
  --r-step: 8px; --r-card-sm: 10px; --r-card: 16px; --r-map: 18px; --r-pill: 999px;

  /* Shadows and glows */
  --shadow-card: 0 18px 40px -28px rgba(2,38,86,.35);
  --glow-active: 0 0 0 4px rgba(43,196,184,.14);
  --glow-gate: 0 0 0 4px rgba(0,119,111,.12);

  /* Motion */
  --d-fast: 200ms; --d-base: 350ms; --d-cam: 450ms; --d-move: 550ms;
  --e-out: cubic-bezier(.2,.8,.2,1);
  --pin-length: 220vh;
}

/* ---------- Tokens: dark ground ---------- */
[data-theme="dark"] {
  --bg: #061430; --surface: #0B1F44; --ink: #E8EEF7; --ink-4: #8A9AB8;
  --accent: #2BC4B8; --brand-teal: #01ABA0; --brand-teal-text: #2BC4B8;
  --surface-2: #10295A; --surface-3: #14306A; --line: #1E3560; --line-strong: #2A4478;
  --ink-2: #B9C6DA; --h-ink: #E8EEF7; --focus: #2BC4B8;
  --ink-note: #8A9AB8;
  --on-accent: #061430; --accent-hover: #7FE3DA;
  --step-bg: rgba(43,196,184,.12);
  --chip-ink: #C9D3E3;
  --shadow-card: 0 0 0 1px rgba(43,196,184,.04), 0 24px 60px -30px rgba(43,196,184,.35);
}

@media (min-width: 900px) { :root { --top-pad: 92px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--rail-h) + 4px); -webkit-text-size-adjust: 100%; }
@media (min-width: 900px) { html { scroll-padding-top: calc(var(--header-h) + 4px); } }
body { margin: 0; background: var(--map-sea-0); color: var(--ink); font: 400 16px/1.55 var(--font-text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s-4); top: -100px; z-index: 30; display: inline-flex; align-items: center; min-height: var(--hit); padding: 0 var(--s-4); border-radius: var(--r-card-sm); background: var(--cta); color: var(--on-cta); font: var(--t-ui); text-decoration: none; }
.skip:focus { top: var(--s-2); }
.no-js .js-only { display: none !important; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--hit); padding: 0 22px; border: 0; border-radius: var(--r-pill); font: var(--t-ui); text-decoration: none; cursor: pointer; }
.btn--cta { background: var(--cta); color: var(--on-cta); }
.btn--cta:hover { background: var(--cta-hover); color: var(--on-cta); }
.btn--cta:focus-visible { outline-color: var(--cta-ring); }
.btn--lg { min-height: 48px; padding: 0 28px; font-size: 16px; }
/* 40px to the eye, 44px to the finger */
.btn--sm { position: relative; min-height: 40px; padding: 0 20px; }
.btn--sm::after { content: ""; position: absolute; inset: -2px 0; }
.btn--navy { background: var(--accent); color: var(--on-accent); }
.btn--navy:hover { background: var(--accent-hover); }
.btn--line { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); font-size: 14px; }
.btn--ghost { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
.btn--ghost:hover { background: var(--step-bg); }
.btn[aria-disabled="true"] { background: var(--line); color: var(--ink-2); border-color: var(--line); cursor: default; }
.btn--line[aria-disabled="true"] { background: transparent; color: var(--ink-4); }

/* Chips: pills (dark grounds), segments (cards), chat prompts (light) */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pill, .seg { min-height: var(--hit); padding: 0 15px; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); background: transparent; color: var(--ink); font: var(--t-chip); text-align: left; cursor: pointer; }
.seg { padding: 0 12px; border-radius: var(--r-step); font-size: 13px; line-height: 1.25; color: var(--chip-ink); }
.pill:hover, .seg:hover { border-color: var(--accent); }
.pill[aria-pressed="true"], .seg[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.kicker { margin: 0; font: 500 11px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }

/* ---------- Header ---------- */
.top { position: fixed; inset: 0 0 auto; z-index: 20; background: var(--header-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); color: var(--ink); }
.top-bar { height: var(--header-h); display: flex; align-items: center; gap: var(--s-5); padding: 0 clamp(16px, 3vw, 32px); }
.lockup { display: flex; align-items: center; gap: 10px; min-height: var(--hit); margin-right: auto; color: var(--ink); text-decoration: none; }
.lockup:hover { color: var(--ink); }
.lockup img { height: 26px; width: auto; }
.wordmark { font-family: var(--font-display); font-size: 19px; letter-spacing: .01em; white-space: nowrap; }
.wordmark b { font-weight: 800; }
.wordmark span { font-weight: 300; }
.rooms { display: none; gap: clamp(12px, 1.5vw, 20px); font-size: clamp(13px, 1.1vw, 14px); }
.rooms a { color: var(--nav-ink); text-decoration: none; padding: var(--s-3) 0; white-space: nowrap; }
.rooms a:hover { color: var(--nav-hover); }
.rooms a[aria-current] { color: var(--accent); }
.rail { position: relative; display: flex; justify-content: space-between; height: var(--rail-h); padding: 0 8px; border-top: 1px solid var(--line); }
.rail::before { content: ""; position: absolute; left: 28px; right: 28px; top: 17px; border-top: 1px dashed var(--line-strong); }
.rail a { position: relative; width: 40px; height: var(--hit); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--ink-4); font: 500 10px/1 var(--font-mono); text-decoration: none; }
.rail a::before { content: ""; width: 9px; height: 9px; transform: rotate(45deg); background: var(--bg); border: 1px solid var(--ink-4); transition: transform var(--d-base); }
.rail a[aria-current] { color: var(--accent); }
.rail a[aria-current]::before { background: var(--accent); border-color: var(--accent); transform: rotate(45deg) scale(1.3); }
@media (min-width: 900px) {
  .rooms { display: flex; }
  .rail { display: none; }
}

/* ---------- Sections ---------- */
.sec { position: relative; background: var(--bg); color: var(--ink); --p: 1; overflow-x: clip; }
.sec + .sec { border-top: 1px solid var(--line); }
.stage { display: flex; align-items: center; padding: var(--top-pad) var(--gutter) 40px; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: var(--section-gap); align-items: center; }
.copy { flex: 1 1 320px; max-width: 500px; min-width: 0; }
.art { flex: 1.1 1 320px; min-width: 0; }
.sec--map .wrap { max-width: 1360px; gap: clamp(20px, 3vw, 40px); }
.sec--hero .copy { max-width: 460px; position: relative; z-index: 2; }
.sec--hero .art { flex: 1.7 1 320px; }
.sec--proof .copy { flex-basis: 300px; max-width: 420px; }
.sec--proof .art { flex: 1.8 1 320px; display: flex; flex-direction: column; gap: 10px; }

.tag { margin: 0; font: var(--t-tag); letter-spacing: .16em; text-transform: uppercase; color: var(--brand-teal-text); }
h1, h2 { margin: 14px 0 16px; color: var(--h-ink); letter-spacing: -.02em; text-wrap: balance; }
h1 { font: var(--t-h1); margin-bottom: 14px; }
h2 { font: var(--t-h2); }
.lede { margin: 0; font: var(--t-lede); color: var(--ink-2); text-wrap: pretty; }
.copy > .btn { margin-top: 22px; }

/* Long copy above 900px, the .short phone variant below it (docs/copy/home.md). */
.short { display: none; }
@media (max-width: 899px) { .long { display: none; } .short { display: block; } }

/* ---------- Step list: end state (done) is the default; script adds is-act / is-idle ---------- */
.steps { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); counter-reset: s; }
.steps li { position: relative; counter-increment: s; display: grid; grid-template-columns: 24px 1fr; gap: 6px; padding: 7px 10px; border-radius: var(--r-step); font: var(--t-step); color: var(--ink); }
.steps li::before { content: "\2713"; content: "\2713" / ""; font: 700 12px/1.9 var(--font-display); color: var(--brand-teal-text); }
.steps li.is-act::before, .steps li.is-idle::before { font: 500 12px/1.9 var(--font-mono); content: counter(s, decimal-leading-zero); content: counter(s, decimal-leading-zero) / ""; }
.steps li.is-act { background: var(--step-bg); font-weight: 500; }
.steps li.is-idle, .steps li.is-idle::before { color: var(--ink-4); }
/* A row the script turns into a button covers the whole row. */
.row-btn { all: unset; box-sizing: border-box; display: flex; align-items: center; margin: 0 -10px 0 -40px; padding: 6px 10px 6px 40px; min-height: var(--hit); border-radius: var(--r-step); cursor: pointer; }
.row-btn:hover { background: var(--hover-bg); }
.row-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.steps li:has(> .row-btn) { padding: 0 10px; align-items: center; }
/* Before the script wraps them, the rows already take the button's height (no layout shift). */
.js .rooms-list li, .js .legend li { min-height: var(--hit); align-items: center; padding-top: 6px; padding-bottom: 6px; }
.js .rooms-list li:has(> .row-btn), .js .legend li:has(> .row-btn) { padding-top: 0; padding-bottom: 0; }
.steps li:has(> .row-btn[aria-pressed="true"]) { background: var(--sel-bg); }

/* Proof legend: a swatch instead of a number */
.legend li::before, .legend li.is-act::before, .legend li.is-idle::before { content: ""; width: 10px; height: 10px; margin-top: 6px; background: var(--sw); transition: opacity var(--d-base); }
.legend li.is-idle::before { opacity: .35; }
.legend li { border: 1px solid transparent; }
.legend li:has(> .row-btn[aria-pressed="true"]) { border-color: var(--sw); background: var(--legend-on); }
.legend b { font-weight: 600; }
.sec--proof .kicker { margin-top: var(--s-4); }
.sec--proof .legend { margin-top: var(--s-2); }
.sw-lamp { --sw: var(--map-lamp); }
.sw-warn { --sw: var(--map-warn); }
.sw-vio { --sw: var(--map-violet); }
.sw-human { --sw: var(--map-human); }
.legend .sw-vio::before, .legend .sw-human::before { border-radius: 50%; }

/* ---------- Cards, HUD labels ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-card); }
.hud { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; font: var(--t-hud); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
.hud .hi { color: var(--ink); }
.note { margin: 0; font: var(--t-note); color: var(--ink-note); }
.ctl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.ctl .chips { gap: 6px; }
.ctl--col { flex-direction: column; align-items: flex-start; }

/* ---------- Chart frame, camera, overlays (driven by --p and state classes) ---------- */
.frame { position: relative; border: 1px solid var(--line); border-radius: var(--r-map); overflow: hidden; background: var(--map-sea-0); perspective: 1400px; }
.cam { transform-origin: 50% 50%; transition: transform var(--d-cam) var(--e-out); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate(calc(var(--cx) * 1%), calc(var(--cy) * 1%)) scale(var(--cs)); }
.plane { position: relative; }
.chart { width: 100%; height: auto; }
.chart-compact { display: none; }
@media (max-width: 999px) { .chart-full { display: none; } .chart-compact { display: block; } }
/* The chart's viewBox, so overlays sit in the README's coordinate space. */
#s00 .plane { --vx: 0; --vy: 0; --vw: 1200; --vh: 760; }
#s035 .plane { --vx: 0; --vy: 0; --vw: 1200; --vh: 660; }
@media (max-width: 999px) {
  #s00 .plane { --vx: 180; --vy: 110; --vw: 780; --vh: 570; }
  #s035 .plane { --vx: 150; --vy: 90; --vw: 880; --vh: 560; }
  .spot[data-dim] { display: none; }
}
.ov { position: absolute; inset: 0; }
.ov > * { position: absolute; left: calc((var(--x) - var(--vx)) / var(--vw) * 100%); top: calc((var(--y) - var(--vy)) / var(--vh) * 100%); transform: translate(-50%, -50%); }

/* /00 camera: in from 1.1 to 1, then a slow push; a chosen base flies in to 1.3 */
#s00 .cam {
  --a: clamp(0, calc(var(--p) * 2), 1);
  --b: clamp(0, calc(var(--p) * 2 - 1), 1);
  --cx: calc(4 * var(--b)); --cy: calc(3 - 3 * var(--a) + 2 * var(--b)); --cs: calc(1.1 - .1 * var(--a) + .12 * var(--b));
}
#s00.is-sel .cam { --cx: var(--sx); --cy: var(--sy); --cs: 1.3; }
/* /03.5 camera: settles from 1.15 over the first 80% */
#s035 .cam {
  --t: min(1, calc(var(--p) / .8));
  --cx: calc(4 * var(--t) - 4); --cy: calc(2 - 2 * var(--t)); --cs: calc(1.15 - .15 * var(--t));
}

.spot { width: max(var(--hit), calc(var(--r) * 2.2 / var(--vw) * 100%)); min-height: var(--hit); aspect-ratio: 2 / 1.15; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.spot::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed var(--accent); opacity: 0; transition: opacity var(--d-fast); }
.spot:hover::before, .spot[aria-pressed="true"]::before { opacity: 1; }
.spot:focus-visible { outline: 2px solid var(--cta-ring); outline-offset: 2px; }
.spot i, .mark { pointer-events: none; }
.spot i { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; }
.spot[aria-pressed="true"] i { animation: v2pulse 1.8s ease-out infinite; }
.mark { width: 7%; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--sw); opacity: 0; }
.mark--lg { width: 22%; }
[data-mark="agent"] .mark[data-m="agent"], [data-mark="flag"] .mark[data-m="flag"], [data-mark="vio"] .mark[data-m="vio"], [data-mark="human"] .mark[data-m="human"] { opacity: 1; animation: v2pulse 1.8s ease-out infinite; }

.frame-hud { position: absolute; left: 12px; top: 10px; right: 12px; margin: 0; display: flex; justify-content: space-between; gap: 10px; font: 500 10px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); pointer-events: none; }
.scan { position: absolute; left: 0; right: 0; top: 0; height: 12%; background: linear-gradient(180deg, var(--scan-1) 0%, var(--scan-2) 85%, var(--scan-3) 100%); animation: v3scan 7s linear infinite; pointer-events: none; }
@media (max-width: 479px) { .frame-hud { font-size: 9px; letter-spacing: .08em; } }
.corner { position: absolute; width: 14px; height: 14px; pointer-events: none; }
.corner--bl { left: 8px; bottom: 8px; border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); }
.corner--tr { right: 8px; top: 30px; border-right: 1.5px solid var(--accent); border-top: 1.5px solid var(--accent); }
.map-key { margin: 0; font: var(--t-hud); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }

/* /00 layout: the chart bleeds right on desktop and runs full width on phones */
.hero-art { display: grid; gap: 10px; }
.hero-art .frame { margin: 0 calc(-1 * var(--gutter)); border-radius: 0; border-left: 0; border-right: 0; }
@media (min-width: 900px) { .hero-art .frame { margin: 0 calc(-1 * var(--gutter)) 0 0; border-radius: var(--r-map) 0 0 var(--r-map); border-left: 1px solid var(--line); } }
.hero-info { order: 1; display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.flog { order: 2; }
.hero-art .map-key { order: 3; }
.info { flex: 1.3 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.info.is-on { border-color: var(--accent); }
.info p { margin: 0; }
.info-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.info-name { font: 700 19px/1.3 var(--font-display); }
.info-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); color: var(--ink-4); font: 600 10px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.info[data-k="lit"] .info-chip { color: var(--accent); border-color: var(--accent); }
.info[data-k="dim"] .info-chip { color: var(--chip-ink); }
.info-line { font-size: 15px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.info-cta { align-self: flex-start; min-height: var(--hit); padding: 0 4px; border: 0; background: transparent; color: var(--accent); font: 600 14px var(--font-text); cursor: pointer; }
.info-cta::after { content: " \2192"; content: " \2192" / ""; }
.info-cta:hover { color: var(--accent-hover); }
.rooms-list { flex: 1 1 240px; margin: 0; }
.picker { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }

/* Flight log: under the chart, so it never covers a base */
.flog { padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.flog-h { margin: 0 0 6px; display: flex; justify-content: space-between; font: 500 10px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.flog ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.flog li { display: none; grid-template-columns: 8px 1fr; gap: 8px; align-items: center; font: 400 11px/1.35 var(--font-mono); color: var(--ink-2); }
.flog li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dot); }
.flog li[data-pos] { display: grid; }
.flog li[data-pos="0"] { order: 0; }
.flog li[data-pos="1"] { order: 1; }
.flog li[data-pos="2"] { order: 2; }
/* Older rows recede by a fainter dot: opacity on the text would fail contrast over the chart. */
.flog li[data-pos="0"]::before { opacity: .35; }
.flog li[data-pos="1"]::before { opacity: .55; }
.flog li[data-pos="2"]::before { opacity: .75; }
.flog li[data-pos="3"] { order: 3; color: var(--ink); }
.js .flog li[data-pos="3"] { animation: v2in .4s ease-out both; }
.d-lamp { --dot: var(--map-lamp); } .d-warn { --dot: var(--map-warn); } .d-vio { --dot: var(--map-violet); } .d-ok { --dot: var(--map-ok); } .d-human { --dot: var(--map-human); }
/* The hero fits the screen so it can pin: the chart's width follows the height left over. */
@media (min-width: 900px) {
  .sec--hero { --hero-chrome: 295px; }
  .sec--hero .wrap { justify-content: space-between; }
  .sec--hero .art { max-width: max(320px, calc((100vh - var(--hero-chrome)) * 1200 / 760 - var(--gutter))); }
  .hero-art { gap: var(--s-2); }
  .hero-info { gap: var(--s-2); }
  .hero-info .info { flex: 1 1 200px; padding: 12px 14px; }
  .hero-info .steps { flex: 1.4 1 300px; margin: 0; }
}
/* From 900px the flight log is a one-line ticker under the chart. */
@media (min-width: 900px) {
  .sec--hero { --hero-chrome: 356px; }
  .flog { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s-3); padding: 8px 12px; }
  .flog-h { flex: none; gap: var(--s-2); margin: 0; }
  .flog ol { flex: 1 1 240px; min-width: 0; }
  .flog li[data-pos]:not([data-pos="3"]) { display: none; }
  .is-sel .flog { display: none; }
}

/* ---------- /01 Sales call panel ---------- */
.lead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: var(--r-card-sm); background: var(--surface-2); font-size: 15px; }
.status { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: var(--r-pill); border: 1px solid var(--accent); color: var(--accent); font: 600 12px/1 var(--font-mono); white-space: nowrap; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sales [data-v], .lead-t [data-ind], .call { display: none; }
.sales[data-s="0"] [data-v="0"], .sales[data-s="1"] [data-v="1"], .sales[data-s="2"] [data-v="2"], .sales[data-s="3"] [data-v="3"],
.sales[data-ind="0"] [data-ind="0"], .sales[data-ind="1"] [data-ind="1"], .sales[data-ind="2"] [data-ind="2"] { display: inline; }
.sales[data-ind="0"] .call[data-ind="0"], .sales[data-ind="1"] .call[data-ind="1"], .sales[data-ind="2"] .call[data-ind="2"] { display: flex; }
.sales[data-s="0"] .status { color: var(--ink-2); border-color: var(--line-strong); }
.wave { height: 36px; opacity: .25; transition: opacity var(--d-base); }
.wave-svg { width: 100%; height: 36px; }
.sales[data-s="1"] .wave, .sales[data-s="2"] .wave { opacity: 1; }
.calls { min-height: 214px; }
.call { list-style: none; margin: 0; padding: 0; flex-direction: column; gap: 6px; }
.call li { max-width: 88%; padding: 8px 12px; border-radius: var(--r-card-sm); font: 400 14px/1.45 var(--font-text); }
.call .who { margin-right: 6px; font: 600 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.call .ai { align-self: flex-start; background: var(--surface-2); }
.call .ai .who { color: var(--accent); }
.call .ld { align-self: flex-end; background: var(--surface-3); }
.call .ld .who { color: var(--ink-4); }
.call .sys { align-self: center; padding: 4px 10px; border: 1px dashed var(--accent); color: var(--accent); font: 500 11px/1.4 var(--font-mono); }
/* Without script: the end of the clinic call. With script: the lines it has reached. */
.no-js .call li:nth-child(-n+3) { display: none; }
.js .call li:not(.is-on) { display: none; }
.js .call li.is-on { animation: v2in .35s ease-out both; }
@media (max-width: 999px) { .calls { min-height: 0; } .no-js .call li:nth-child(-n+5) { display: none; } }
.bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--k, 1)); transition: transform .5s linear; }
.bar + .hud { margin-top: var(--s-2); letter-spacing: .12em; }
.booked { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-card-sm); border: 1px dashed var(--accent); font-size: 15px; opacity: 0; transform: translateY(8px); transition: opacity var(--d-base), transform var(--d-base); }
.booked b { font: 700 13px/1 var(--font-display); color: var(--accent); }
.sales[data-s="3"] .booked { opacity: 1; transform: none; }
.sales:not([data-s="3"]) .booked { position: absolute; visibility: hidden; }
.run-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.run-row .note { flex: 1 1 160px; }

/* ---------- /02 Ops board ---------- */
.board { position: relative; }
.cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.cols > div { height: 190px; padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-card-sm); font: 500 10px/1.2 var(--font-mono); letter-spacing: .1em; color: var(--ink-4); text-transform: uppercase; }
.cols > .gate { border: 1.5px dashed var(--brand-teal-text); color: var(--brand-teal-text); font-weight: 600; }
.ops[data-col="1"] .doing { background: var(--doing-bg); }
.ops[data-col="2"] .gate { background: var(--gate-bg); }
.task { position: absolute; top: 30px; left: 0; width: calc((100% - 24px) / 4); padding: 0 var(--s-1); --col: 3; transform: translateX(calc(var(--col) * (100% + 8px))); transition: transform var(--d-move) var(--e-out); }
.ops[data-col="0"] .task { --col: 0; }
.ops[data-col="1"] .task { --col: 1; }
.ops[data-col="2"] .task { --col: 2; }
.task > div { padding: 9px; border-radius: var(--r-card-sm); background: var(--surface-2); border: 1.5px solid var(--line); }
.ops[data-col="2"] .task > div { border-color: var(--brand-teal-text); box-shadow: var(--glow-gate); }
.ops[data-col="3"] .task > div { border-color: var(--brand-teal-text); }
.task-t { font-size: 13px; line-height: 1.35; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.task-s { margin-top: 6px; font: 500 10px/1.35 var(--font-mono); color: var(--brand-teal-text); }
.task-s [data-c="sent"] { color: var(--warn-ink); }
.tags { position: absolute; left: calc(25% + 6px); bottom: 10px; margin: 0; display: flex; gap: 6px; opacity: 0; transition: opacity var(--d-base); }
.tags span { padding: 3px 6px; border-radius: 4px; font: 600 10px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; background: var(--accent); color: var(--on-accent); }
.tags span + span { background: var(--surface-3); color: var(--accent); }
.tags span + span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--accent); vertical-align: 1px; animation: v2dot 1.2s ease-in-out infinite; }
.ops[data-col="1"] .tags { opacity: 1; }
@media (max-width: 479px) {
  .cols > div { height: 210px; padding: var(--s-1); letter-spacing: .02em; white-space: nowrap; }
  .task { padding: 0 2px; }
  .task > div { padding: 6px; }
  .task-t { font-size: 11px; overflow-wrap: normal; -webkit-hyphens: auto; hyphens: auto; }
  .task-s { font-size: 10px; }
  .tags { left: 4px; }
}
.ops [data-c], .ops-head [data-h] { display: none; }
.ops[data-sub="0"] [data-c="0"], .ops[data-sub="1"] [data-c="1"], .ops[data-sub="sent"] [data-c="sent"], .ops[data-sub="2"] [data-c="2"], .ops[data-sub="redone"] [data-c="redone"], .ops[data-sub="3"] [data-c="3"],
.ops[data-col="0"] [data-h="0"], .ops[data-col="1"] [data-h="0"], .ops[data-col="2"] [data-h="2"], .ops[data-col="3"] [data-h="3"] { display: inline; }
.ops[data-col="2"] .ops-head { color: var(--brand-teal-text); }
.gate-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.gate-row p { flex: 1 1 180px; margin: 0; font: var(--t-note); color: var(--ink-2); }

/* ---------- /03 Manager chat ---------- */
.handed { margin-top: 20px; display: flex; flex-direction: column; gap: 6px; }
.routed { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.routed li { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--line-muted); background: var(--surface); color: var(--ink-4); font: 500 12px var(--font-mono); }
.routed li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .6; }
.routed li.is-on { border-color: var(--brand-teal-text); background: var(--ok-bg); color: var(--brand-teal-text); }
.chat { gap: 10px; }
.log { display: flex; flex-direction: column; gap: 10px; }
.b { position: relative; margin: 0; max-width: 84%; padding: 10px 14px; font-size: 15px; line-height: 1.45; text-wrap: pretty; transition: opacity var(--d-base), transform var(--d-base); }
.b.me { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--accent); color: var(--on-accent); }
.b.ai { align-self: flex-start; border-radius: 14px 14px 14px 4px; background: var(--surface-3); color: var(--ink); }
.b.typing { color: var(--ink-4); }
.b.is-off { opacity: 0; transform: translateY(10px); }
.js .b.is-new { animation: v2in .35s ease-out both; }
@media (max-width: 899px) { .b.long { display: none; } .b.short { display: block; } }
.chat .chips { margin-top: var(--s-1); }
.chip { min-height: var(--hit); padding: 8px 14px; border-radius: var(--r-pill); border: 1.5px solid var(--accent); background: var(--surface); color: var(--accent); font: 600 14px/1.3 var(--font-text); text-align: left; cursor: pointer; }
.chip:hover { background: var(--surface-3); }
.chip[aria-disabled="true"] { border-color: var(--line-muted); color: var(--ink-4); cursor: default; background: var(--surface); }
@media (min-width: 900px) { .js .log { max-height: 360px; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; } }

/* ---------- /04 Org chart ---------- */
.org { gap: 10px; }
.org-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; }
.org-ctl p { flex: 1 1 180px; margin: 0; font: var(--t-note); color: var(--ink-2); }
.founder { align-self: center; width: min(220px, 70%); padding: 10px; text-align: center; border: 1.5px dashed var(--map-human); border-radius: var(--r-card-sm); font: 600 13px/1.3 var(--font-mono); }
.founder small { display: block; font: 400 11px/1.4 var(--font-mono); color: var(--ink-2); }
.org-row { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--s-2); padding-top: 10px; border-top: 1px solid var(--line); }
.role { min-height: 56px; padding: 8px 4px; text-align: center; border-radius: var(--r-card-sm); background: var(--surface-2); border: 1.5px solid var(--line); color: var(--ink); font: 600 12px/1.25 var(--font-mono); text-transform: uppercase; overflow-wrap: anywhere; }
button.role { cursor: pointer; }
button.role:hover { border-color: var(--accent); }
@media (max-width: 479px) { .role { padding: 8px 2px; font-size: 11px; letter-spacing: 0; } }
.role small { display: block; margin-top: 3px; font: 400 11px/1.4 var(--font-mono); text-transform: none; color: var(--ink-2); }
.role small:not([data-a="0"]) { display: none; }
.role[data-a="1"] small[data-a="0"], .role[data-a="2"] small[data-a="0"] { display: none; }
.role[data-a="1"] small[data-a="1"], .role[data-a="2"] small[data-a="2"] { display: block; }
.role:not([data-a="0"]) { background: var(--role-on); border-color: var(--accent); box-shadow: var(--glow-active); }
.role:not([data-a="0"]) small { color: var(--accent); }

/* ---------- /05 Team dashboard ---------- */
.dash { gap: 12px; }
.dash-top { align-items: center; }
.pill-tag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 12px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font: 600 11px/1.2 var(--font-mono); letter-spacing: .12em; }
.segs { display: flex; padding: 2px; border: 1px solid var(--line-muted); border-radius: var(--r-pill); }
.segs button { position: relative; min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--accent); font: 500 12px var(--font-mono); letter-spacing: 0; text-transform: none; cursor: pointer; }
.segs button::after { content: ""; position: absolute; inset: -4px 0; }
.segs button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--s-2); }
.ag { display: flex; flex-direction: column; gap: var(--s-2); padding: 12px; border-radius: 12px; background: var(--surface-2); border: 1.5px solid var(--line); }
.ag b { font: 600 12px/1.2 var(--font-mono); text-transform: uppercase; }
.ag span { font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.ag small { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1.2 var(--font-mono); color: var(--ink); }
.ag small::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-teal-text); border: 2px solid var(--brand-teal-text); }
.ag[data-s="n"] .st-d, .ag[data-s="d"] .st-n { display: none; }
.ag[data-s="i"] small { color: var(--ink-4); }
.ag[data-s="i"] small::before { background: var(--ink-4); border-color: var(--ink-4); }
.ag[data-s="n"] small { color: var(--accent); }
.ag[data-s="n"] small::before { background: var(--surface); border-color: var(--accent); }
.ag[data-s="d"] small { color: var(--brand-teal-text); }
.ag .btn { font-size: 13px; }
.is-risen .ag[data-s="n"] { order: -1; border-color: var(--accent); background: var(--surface); }
.agents[data-f="ok"] .ag:not([data-s="n"]) { display: none; }
.clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--s-2); }
.clips > div { height: 72px; display: flex; align-items: flex-end; padding: var(--s-2); border: 1px dashed var(--line-strong); border-radius: var(--r-card-sm); background: repeating-linear-gradient(135deg, var(--stripe-a) 0 8px, var(--stripe-b) 8px 16px); font: 500 10px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }

/* ---------- /05+ The workshop ---------- */
.wrap--col { display: grid; gap: 22px; max-width: 1280px; }
.work-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 40px; }
.work-head .copy { flex: 1 1 320px; max-width: 640px; }
.work-head h2 { margin-bottom: 14px; }
.work-head .chips { gap: 6px; }
.work { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 14px; }
.wcard { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 0 16px 16px; border-radius: var(--r-card); border: 1.5px solid var(--line); background: var(--surface); overflow: hidden; transition: transform .25s var(--e-out); }
.wcard:has(.wbtn):hover { transform: translateY(-4px); border-color: var(--accent); }
.wcard.is-open { border-color: var(--accent); box-shadow: var(--glow-active); }
.pv { position: relative; margin: 0 -16px 6px; height: 118px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; background-color: var(--surface-2); background-image: linear-gradient(var(--map-grid) 1px, transparent 1px), linear-gradient(90deg, var(--map-grid) 1px, transparent 1px); background-size: 20px 20px; border-bottom: 1px solid var(--line); }
.pv span { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; background: var(--map-pv-1); font: 500 11px/1.2 var(--font-mono); color: var(--ink-2); --dot: var(--ink-4); }
.pv span::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--dot); }
.pv span:nth-child(2) { --dot: var(--map-lamp); }
.pv span:nth-child(2)::before { animation: v2dot 1.4s ease-in-out infinite; }
.pv span:nth-child(3) { --dot: var(--map-ok); background: var(--map-pv-2); color: var(--ink); }
.pv span.wait { --dot: var(--map-warn); }
.wmeta { margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 500 10px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
.wchip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); color: var(--chip-ink); font: 600 10px var(--font-mono); letter-spacing: .06em; text-transform: none; white-space: nowrap; }
[data-st="pilot"] .wchip { color: var(--accent); border-color: var(--accent); }
.wcard h3 { margin: 0; font: 700 18px/1.25 var(--font-display); }
.wline { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
/* The title becomes the card's button, and its hit area covers the card. */
.wbtn { all: unset; cursor: pointer; }
.wbtn::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); }
.wbtn:focus-visible { outline: none; }
.wbtn:focus-visible::after { outline: 2px solid var(--focus); outline-offset: -3px; }
.wdetail { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; padding: 20px; border-radius: var(--r-card); border: 1.5px solid var(--accent); background: var(--surface); animation: v2in .35s ease-out both; scroll-margin: 120px; }
.wd-head { flex: 1 1 260px; }
.wd-head .kicker { color: var(--accent); }
.wdetail[data-st="pilot"] [data-st="custom"], .wdetail[data-st="custom"] [data-st="pilot"] { display: none; }
.wd-name { margin: 8px 0 0; font: 800 26px/1.15 var(--font-display); }
.wd-steps { flex: 2 1 320px; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; counter-reset: w; }
.wd-steps li { counter-increment: w; padding: 12px; border-radius: var(--r-card-sm); background: var(--surface-2); font-size: 14px; line-height: 1.45; }
.wd-steps li::before { content: counter(w, decimal-leading-zero); content: counter(w, decimal-leading-zero) / ""; display: block; margin-bottom: 4px; font: 600 11px var(--font-mono); color: var(--accent); }
.wd-act { flex: 0 1 auto; display: flex; flex-direction: column; gap: 6px; }
.wd-room { display: inline-flex; align-items: center; min-height: var(--hit); font-size: 14px; }

/* ---------- /06 Apply ---------- */
.sec--apply { background: var(--surface); }
.sec--apply .stage { min-height: 100vh; padding-bottom: var(--s-16); }
.apply-card { gap: var(--s-4); background: var(--bg); box-shadow: none; padding: 20px; }
.apply-card p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.apply-card .btn { align-self: flex-start; }
.first { display: flex; flex-direction: column; gap: 8px; }
.first .chips { gap: 6px; }
/* Inline mail links: a 44px tall hit area without changing the line box */
.tap { display: inline-block; padding: 13px 0; margin: -13px 0; }

/* ---------- Footer ---------- */
.foot { background: var(--bg); color: var(--ink-2); border-top: 1px solid var(--line); padding: var(--s-8) var(--gutter); font-size: 14px; line-height: 1.6; }
.foot p { max-width: 1180px; margin: 0 auto; }
.foot a { color: var(--accent); }

/* ---------- Site navigation (every page, #4) ---------- */
/* ≥900: inline in the top bar. Below 900: a Menu disclosure that works without script. */
.site-nav { display: none; gap: clamp(14px, 1.6vw, 24px); font-size: 14px; }
.site-nav a, .menu-nav a { color: var(--nav-ink); text-decoration: none; white-space: nowrap; }
.site-nav a { padding: var(--s-3) 0; }
.site-nav a:hover, .menu-nav a:hover { color: var(--nav-hover); }
.site-nav a[aria-current], .menu-nav a[aria-current] { color: var(--accent); }
.menu summary { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--hit); padding: 0 var(--s-2); border-radius: var(--r-pill); color: var(--nav-ink); font: var(--t-ui); font-size: 14px; list-style: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ""; width: 7px; height: 7px; margin-top: -4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.menu[open] summary::after { margin-top: 3px; transform: rotate(225deg); }
.menu summary:hover { color: var(--nav-hover); }
.menu-nav { position: absolute; left: 0; right: 0; top: var(--header-h); z-index: 2; display: flex; flex-direction: column; padding: var(--s-2) var(--gutter) var(--s-4); background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-card); }
.menu-nav a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--line); font: 500 16px/1.2 var(--font-text); }
.menu-nav a:last-child { border-bottom: 0; }
@media (max-width: 899px) { .top-bar { gap: var(--s-3); } }
/* Home rail links: 44px targets (eight fit in 352px, so the 360px row holds them). */
.top--home .rail { padding: 0 var(--s-1); }
.top--home .rail a { width: auto; flex: 0 1 var(--hit); min-width: 0; }
@media (min-width: 900px) {
  .site-nav { display: flex; }
  .menu { display: none; }
  /* Home: the room links live in the rail, which stands on the right edge as the scroll index.
     Every home stage reserves the rail's width, so no art or copy runs under it. */
  .top--home .rail { position: absolute; right: var(--s-1); top: 50vh; transform: translateY(-50%); display: flex; flex-direction: column; justify-content: center; gap: 2px; height: auto; padding: var(--s-2) 0; border: 0; border-radius: var(--r-pill); background: var(--header-bg); }
  .top--home .rail::before { left: 50%; right: auto; top: 22px; bottom: 22px; border-top: 0; border-left: 1px dashed var(--line-strong); }
  .top--home .rail a { flex: none; width: var(--hit); }
  .top--home ~ main .stage { padding-right: calc(var(--gutter) + var(--rail-reserve)); }
}

/* ---------- Content pages (#4): text-led sections on the same tokens ---------- */
.page-hero { padding: calc(var(--header-h) + clamp(40px, 8vw, 104px)) var(--gutter) clamp(48px, 7vw, 96px); overflow: hidden; }
.page-sec { padding: clamp(48px, 7vw, 96px) var(--gutter); }
.page-wrap { position: relative; max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: var(--section-gap); align-items: center; }
.page-wrap--split { align-items: flex-start; }
.page-copy { flex: 1 1 320px; max-width: 680px; min-width: 0; position: relative; z-index: 1; }
.page-copy > .btn, .page-body > .btn { margin-top: var(--s-2); align-self: flex-start; }
.page-head { flex: 1 1 280px; max-width: 420px; min-width: 0; }
.page-head h2 { margin-bottom: 0; }
.page-body { flex: 1.6 1 320px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.page-body > p { margin: 0; font: var(--t-lede); color: var(--ink-2); max-width: 64ch; text-wrap: pretty; }
.page-body strong { color: var(--ink); font-weight: 600; }
.page-hero .lede { max-width: 56ch; font-size: clamp(17px, 1.5vw, 19px); }
.page-hero .page-copy > .btn { margin-top: var(--s-6); }
.page-hero h1 { max-width: 18ch; }

/* Decorative orbit, after the chart's dashed rings. aria-hidden; one slow turn, off with reduced motion. */
.orbit { flex: 0 1 300px; margin-left: auto; color: var(--accent); }
.orbit svg { width: 100%; height: auto; overflow: visible; }
.orbit .ring { fill: none; stroke: currentColor; stroke-opacity: .35; stroke-dasharray: 2 8; }
.orbit .ring--solid { stroke-opacity: .18; stroke-dasharray: none; }
.orbit .core { fill: var(--surface-2); stroke: currentColor; stroke-opacity: .5; }
.orbit .halo { fill: currentColor; opacity: .08; }
.orbit .n-ok { fill: var(--map-ok); } .orbit .n-lamp { fill: var(--map-lamp); } .orbit .n-vio { fill: var(--map-violet); } .orbit .n-human { fill: var(--map-human); }
.orbit .turn { transform-origin: 160px 160px; animation: sk-spin 120s linear infinite; }
@media (max-width: 719px) { .orbit { display: none; } }

/* Numbered cards: steps, rules, controls */
.plist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--s-3); counter-reset: p; }
.plist li { counter-increment: p; display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4) var(--s-5) var(--s-5); border-radius: var(--r-card-sm); border: 1px solid var(--line); background: var(--surface); font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.plist li::before { content: counter(p, decimal-leading-zero); content: counter(p, decimal-leading-zero) / ""; font: 600 11px/1 var(--font-mono); letter-spacing: .1em; color: var(--brand-teal-text); }
.plist b { display: block; font: 700 17px/1.3 var(--font-display); color: var(--h-ink); }
.plist--gate li { border-color: var(--line-strong); }
.plist--gate li::before { content: ""; width: 10px; height: 10px; transform: rotate(45deg); background: var(--brand-teal-text); }

/* Use cases: one problem per section */
.case-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-3); font-size: 15px; color: var(--ink-2); }
.case-meta .kicker { color: var(--brand-teal-text); }
.wchip--pilot { align-self: flex-start; height: 26px; font-size: 11px; color: var(--accent); border-color: var(--accent); }

/* Placeholders: clearly marked, never mistaken for copy */
.ph { margin: 0; padding: var(--s-4) var(--s-5); border: 1.5px dashed var(--ph-ink); border-radius: var(--r-card-sm); color: var(--ink-2); font-size: 15px; line-height: 1.55; --ph-ink: var(--warn-ink); }
span.ph { display: block; }
[data-theme="dark"] .ph, [data-theme="dark"] .draft-bar { --ph-ink: var(--slot); }
.ph-tag { display: block; margin-bottom: var(--s-1); font: 600 11px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ph-ink); }
.draft-bar { --ph-ink: var(--warn-ink); margin: 0 0 var(--s-4); display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--s-3); border: 1px dashed var(--ph-ink); border-radius: var(--r-pill); font: 600 11px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ph-ink); }

/* Company facts */
.facts { margin: 0; border-top: 1px solid var(--line); }
.facts p { margin: 0; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.55; color: var(--ink-2); }

.prose { width: 100%; max-width: 68ch; margin: 0 auto; display: flex; flex-direction: column; gap: var(--s-4); }
.prose > p { margin: 0; font: var(--t-lede); color: var(--ink-2); }
.prose h2 { font: 800 clamp(24px, 3vw, 32px)/1.15 var(--font-display); margin: var(--s-6) 0 0; }
.prose ul { margin: 0; padding-left: 1.25em; display: flex; flex-direction: column; gap: var(--s-2); font: var(--t-lede); color: var(--ink-2); }
.prose ul ul { margin-top: var(--s-2); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { overflow-wrap: anywhere; }
.back { display: inline-flex; align-items: center; min-height: var(--hit); font-size: 14px; }

/* Tools cards */
.tools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--s-4); }
.tool { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6); border-radius: var(--r-card); border: 1.5px solid var(--line); background: var(--surface); box-shadow: var(--shadow-card); }
.tool h2 { margin: 0; font: 800 26px/1.15 var(--font-display); }
.tool p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.tool dl { margin: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.tool dt { font: 500 11px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
.tool dd { margin: var(--s-1) 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.tool .btn { align-self: flex-start; margin-top: auto; }
.tool--custom { border-style: dashed; box-shadow: none; }
.tool .wchip { align-self: flex-start; }

/* Engineering: stat band (figures are real text; 2×2 below 900, one row from 900), proof notes and FAQ */
.stats-band { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.stats li { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5) var(--s-4); border-radius: var(--r-card-sm); border: 1px solid var(--line); border-top: 2px solid var(--brand-teal); background: var(--surface); box-shadow: var(--shadow-card); }
.stat-fig { font: 800 clamp(32px, 8.4vw, 60px)/1 var(--font-display); letter-spacing: -.02em; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-label { font-size: 14px; line-height: 1.4; color: var(--ink-2); text-wrap: pretty; }
@media (min-width: 900px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
  .stats li { padding: var(--s-6); }
  .stat-fig { font-size: clamp(44px, 4.4vw, 60px); }
  .stat-label { font-size: 15px; }
}
.page-body > .note { max-width: 64ch; }
.faq { border-top: 1px solid var(--line); }
.faq .qa { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.faq h3 { margin: 0 0 var(--s-2); font: 700 17px/1.3 var(--font-display); color: var(--h-ink); }
.faq p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 64ch; }
.faq code { font-family: var(--font-mono); font-size: .9em; }

/* Close: the one call to action */
.page-close { background: var(--surface); }
.page-close .page-wrap { flex-direction: column; align-items: flex-start; gap: 0; }
.page-close h2 { max-width: 20ch; }
.page-close .btn { margin-top: var(--s-6); }

/* Not found */
.nf { min-height: 100vh; display: flex; align-items: center; }
.nf-links { margin-top: var(--s-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.nf-links a:not(.btn) { display: inline-flex; align-items: center; min-height: var(--hit); font-weight: 500; }

/* ---------- Pinning: only with script, motion allowed, ≥900 wide and ≥640 tall ---------- */
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) and (min-height: 640px) {
  .js .sec[data-pin] { height: var(--pin-length); overflow-x: visible; }
  .js .sec[data-pin] > .stage { position: sticky; top: 0; min-height: 100vh; }
  /* A panel taller than the screen (the script measures it) scrolls instead of pinning. */
  .js .sec[data-pin].is-tall { height: auto; }
  .js .sec[data-pin].is-tall > .stage { position: relative; }
  .sec--hero .stage { padding-top: 76px; padding-bottom: 24px; }
  .js .sec--map > .stage { overflow: hidden; }
}

/* Short screens: a tighter frame and no decoration that repeats a label, so rooms still pin. */
@media (min-width: 900px) and (max-height: 819.98px) {
  .hero-info .info { gap: var(--s-1); padding: var(--s-2) var(--s-3); }
  .info-chip { white-space: nowrap; }
  .info-name { font-size: 16px; }
  .info-line { font-size: 14px; line-height: 1.35; }
  .info-cta { min-height: 32px; text-align: left; }
  .sec[data-pin] > .stage { padding-top: 72px; padding-bottom: 16px; }
  .sec--hero > .stage { padding-top: 68px; padding-bottom: 12px; }
  .wave, .clips { display: none; }
  .sales > .note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 900px) and (max-width: 1099.98px) {
  .copy { flex-basis: 280px; }
  .chat .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chat .chips .pill { padding: 0 var(--s-2); font-size: 13px; line-height: 1.2; }
}

@media (min-width: 900px) and (max-width: 1099.98px) and (max-height: 819.98px), (min-width: 900px) and (max-height: 719.98px) {
  .sec[data-pin] > .stage { padding-top: 68px; padding-bottom: 8px; }
  .sec--hero { --hero-chrome: 424px; }
  .hero-art .map-key { display: none; }
  .js .rooms-list li { min-height: 36px; }
}

/* ---------- Loops (transform and opacity only) ---------- */
@keyframes v2pulse { 0% { opacity: .9; transform: translate(-50%, -50%) scale(.7); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } }
@keyframes v2dot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes v2in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes v3scan { 0% { transform: translateY(-100%); } 100% { transform: translateY(900%); } }
/* Chart loops, named by the generator (docs/design/orbital/map.js and map-space.js) */
@keyframes sk-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes sk-spin { to { transform: rotate(360deg); } }
@keyframes sk-halo { 0%, 100% { opacity: .14; transform: scale(.9); } 50% { opacity: .34; transform: scale(1.15); } }
@keyframes sk-ripple { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes sk-blink { 0% { opacity: 1; } 50% { opacity: .25; } }
@keyframes sk-grow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
@keyframes sk-flare { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes sk-wave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes sk-tw { 0%, 100% { opacity: .15; } 50% { opacity: .95; } }
@keyframes sk-eng { 0%, 100% { opacity: .6; transform: scaleX(1); } 50% { opacity: 1; transform: scaleX(1.45); } }
@keyframes sk-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ---------- Reduced motion: end states (script sets every --p to 1), loops off, no pinning ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .scan { display: none; }
  .spot[aria-pressed="true"] i, .mark { animation: none; }
  [data-mark="agent"] .mark[data-m="agent"], [data-mark="flag"] .mark[data-m="flag"], [data-mark="vio"] .mark[data-m="vio"], [data-mark="human"] .mark[data-m="human"],
  .spot[aria-pressed="true"] i { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}