/* ==== css/base.css ==== */
/* Self-hosted fonts (SIL Open Font License; licenses in /fonts). Latin subset, variable weights. */
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/geist-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/fonts/instrument-serif-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched fallbacks: see README (foundation edits) */
@font-face { font-family: "Geist Fallback"; font-style: normal; font-weight: 100 500; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"); size-adjust: 102.07%; ascent-override: 98.95%; descent-override: 29.39%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Fallback"; font-style: normal; font-weight: 600 900; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"); size-adjust: 99.63%; ascent-override: 101.38%; descent-override: 30.11%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono Fallback"; font-style: normal; font-weight: 100 900; src: local("Courier New"), local("CourierNewPSMT"), local("Liberation Mono"), local("Cousine"); size-adjust: 100%; ascent-override: 102.5%; descent-override: 27.5%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif Fallback"; font-style: italic; font-weight: 400; src: local("Georgia Italic"), local("Georgia-Italic"), local("Gelasio Italic"); size-adjust: 77.78%; ascent-override: 127.29%; descent-override: 39.86%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Tokens (light default; palette from prototype C) ---------- */
:root {
  --bg: #FAFAF9;
  --surface: #FFFFFF;
  --surface-2: #F3F3F1;
  --grid: #EFEFEC;          /* hero 8px grid, decorative */
  --line: #E2E2DD;          /* decorative dividers */
  --line-strong: #86888F;   /* UI borders, 3.4:1 on bg */
  --ink: #0B0C0E;           /* 18.7:1 on bg */
  --muted: #5A5D64;         /* 6.3:1 on bg, 5.9:1 on surface-2 */
  --faint: #686B72;         /* 5.1:1 on bg, 4.8:1 on surface-2 */
  --accent: #B53F0C;        /* signal text/strokes: 5.5:1 on bg */
  --accent-fill: #E5531A;   /* signal for graphics only (packets, dots, pulses) */
  --accent-ink: #FFFFFF;    /* marks drawn on top of --accent-fill */
  --accent-soft: rgba(229, 83, 26, 0.10);
  --btn-bg: #B53F0C;        /* primary button fill */
  --btn-ink: #FFFFFF;       /* 5.7:1 on --btn-bg */
  --ok: #1E7A4C;            /* 5.1:1 */
  --ok-soft: rgba(30, 122, 76, 0.16);
  --mark-ink: #0B0C0E;
  --mark-dot: #E5531A;
  --header-bg: rgba(250, 250, 249, 0.86);

  --sans: "Geist", "Geist Fallback", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --serif: "Instrument Serif", "Instrument Serif Fallback", Georgia, serif;

  --max: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-pad: clamp(80px, 10vw, 136px);
  --r-btn: 6px;
  --r-card: 12px;
  --r-media: 16px;
  color-scheme: light;
}
/* Dark theme: explicit choice, or system preference when no choice is stored */
:root[data-theme="dark"] {
  --bg: #0C0D0F; --surface: #15171A; --surface-2: #111316; --grid: #15171A;
  --line: #25282D; --line-strong: #626A7C;            /* 3.6:1 on bg */
  --ink: #F2F2F0; --muted: #9DA0A6; --faint: #80858E; /* 17.4 / 7.4 / 5.2:1 on bg */
  --accent: #FF6A2B; --accent-fill: #FF6A2B;          /* 6.8:1 on bg */
  --accent-ink: #0C0D0F;
  --accent-soft: rgba(255, 106, 43, 0.14);
  --btn-bg: #FF6A2B; --btn-ink: #0C0D0F;              /* 6.8:1 */
  --ok: #6FCF97; --ok-soft: rgba(111, 207, 151, 0.22);
  --mark-ink: #F2F2F0; --mark-dot: #FF6A2B;
  --header-bg: rgba(12, 13, 15, 0.84);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0C0D0F; --surface: #15171A; --surface-2: #111316; --grid: #15171A;
    --line: #25282D; --line-strong: #626A7C;
    --ink: #F2F2F0; --muted: #9DA0A6; --faint: #80858E;
    --accent: #FF6A2B; --accent-fill: #FF6A2B;
    --accent-ink: #0C0D0F;
    --accent-soft: rgba(255, 106, 43, 0.14);
    --btn-bg: #FF6A2B; --btn-ink: #0C0D0F;
    --ok: #6FCF97; --ok-soft: rgba(111, 207, 151, 0.22);
    --mark-ink: #F2F2F0; --mark-dot: #FF6A2B;
    --header-bg: rgba(12, 13, 15, 0.84);
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.mo-paused, html.mo-jump { scroll-behavior: auto; } /* mo-jump: deep-link landing is a jump (§5.0) */
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body, .section, .rd, .site-footer { position: relative; }
.why-grid { overflow: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; }
::selection { background: var(--btn-bg); color: var(--btn-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--btn-bg); color: var(--btn-ink);
  padding: 12px 16px; border-radius: var(--r-btn); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

/* Type */
.label {
  display: block;
  font: 500 12px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
}
h2 {
  font-size: clamp(30px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.03em;
  margin-top: 16px; text-wrap: balance;
}
/* Copy accents render as a two-tone continuation (one serif accent per page: the hero) */
h2 em, h3 em { font-style: normal; color: var(--muted); }
h3 { font-size: 20px; line-height: 1.3; letter-spacing: -0.015em; }
.small { font-size: 14.5px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 20px; border-radius: var(--r-btn);
  font: 500 16px/1.2 var(--sans); text-decoration: none;
  border: 1px solid var(--line-strong); color: var(--ink); background: transparent;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { border-color: var(--ink); }
.btn-primary { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-ink); font-weight: 600; }
.btn-primary:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn svg { width: 16px; height: 16px; flex: none; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--ink); font-weight: 500; text-decoration: none;
  border-bottom: 1px solid transparent;
}
.link-arrow span { border-bottom: 1px solid var(--line-strong); transition: border-color .15s; }
.link-arrow:hover span { border-color: var(--accent); }
.text-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; transition: text-decoration-color .15s; }
.text-link:hover { text-decoration-color: var(--accent); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .15s;
}
.site-header.scrolled, .site-header.menu-open { border-bottom-color: var(--line); }
.nav { display: flex; align-items: center; gap: 16px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; flex: none; }
.brand svg { width: 32px; height: 32px; flex: none; }
.brand-name { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; white-space: nowrap; }
.site-nav { margin-left: auto; }
.site-nav ul { list-style: none; display: flex; align-items: center; gap: 4px; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-size: 14.5px; color: var(--muted); text-decoration: none; border-radius: var(--r-btn);
  transition: color .15s;
}
.site-nav a:hover { color: var(--ink); }
.nav-theme { display: none; }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border-radius: var(--r-btn);
  background: transparent; color: var(--muted); border: 1px solid transparent; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.icon-btn:hover { color: var(--ink); border-color: var(--line); }
.icon-btn svg { width: 20px; height: 20px; }
.theme-toggle .i-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .i-moon { display: block; }
  :root:not([data-theme]) .theme-toggle .i-sun { display: none; }
}
.nav-cta { min-height: 40px; padding: 9px 16px; font-size: 14.5px; }
.nav-cta .short { display: none; }
.menu-btn { display: none; }

@media (max-width: 1119px) {
  .menu-btn { display: inline-flex; }
  .nav-actions { margin-left: auto; }
  .site-nav {
    display: none;
    position: absolute; top: 64px; left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 16px;
    max-height: calc(100vh - 64px); overflow-y: auto;
  }
  .menu-open .site-nav { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; max-width: var(--max); margin: 0 auto; }
  .site-nav li { border-bottom: 1px solid var(--line); }
  .site-nav li:last-child { border-bottom: 0; }
  .site-nav a { display: flex; min-height: 52px; padding: 0; font-size: 17px; color: var(--ink); }
  .menu-btn .i-close { display: none; }
  .menu-open .menu-btn .i-close { display: block; }
  .menu-open .menu-btn .i-menu { display: none; }
}
@media (max-width: 559px) {
  .nav { gap: 8px; }
  .nav-actions { gap: 4px; }
  .nav-actions .theme-toggle { display: none; }
  .nav-theme { display: block; }
  .nav-theme button {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    min-height: 52px; padding: 0; background: none; border: 0; color: var(--ink);
    font: 400 17px/1 var(--sans); cursor: pointer;
  }
  .nav-theme .state { font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
  .nav-cta .full { display: none; }
  .nav-cta .short { display: inline; }
  .nav-cta { padding: 9px 14px; }
  .brand-name { font-size: 15px; }
}
@media (max-width: 359px) { .brand-name { display: none; } }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; padding: clamp(56px, 8vw, 112px) 0 var(--section-pad); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 8px 8px; background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 320px, transparent 720px);
  mask-image: linear-gradient(to bottom, #000 0, #000 320px, transparent 720px);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 12px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-fill); box-shadow: 0 0 0 4px var(--accent-soft); }
h1 {
  font-size: clamp(44px, 6.4vw, 84px); line-height: 1.0; letter-spacing: -0.045em;
  margin-top: 24px; max-width: 10.928em; text-wrap: balance;
}
h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--accent); padding-right: .04em; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; margin-top: 40px;
}
.lede { font-size: clamp(18px, 1.7vw, 20px); line-height: 1.6; color: var(--muted); max-width: 34em; text-wrap: pretty; }
.hero-start { margin-top: 24px; padding-left: 16px; border-left: 2px solid var(--accent); max-width: 34em; }
.hero-start a { color: var(--ink); font-weight: 500; text-decoration: none; line-height: 1.5; }
.hero-start a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px; }
.micro { margin-top: 20px; font-size: 14.5px; color: var(--faint); }
@media (min-width: 1180px) {
  .hero-grid { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 56px; align-items: start; }
  .hero-copy { padding-top: 8px; }
}
@media (max-width: 1179px) { .panel { max-width: 780px; } }

/* Diagram panel */
.panel {
  margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-media);
  overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 10px 10px 18px; border-bottom: 1px solid var(--line); min-height: 58px;
}
.panel-head figcaption { font: 500 11.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.panel-tools { display: flex; align-items: center; gap: 6px; flex: none; }
.chip {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px;
  font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent);
}
.pause-btn { display: none; }
.motion .pause-btn { display: inline-flex; }
.pause-btn .i-play { display: none; }
#fig1.paused .pause-btn .i-play { display: block; }
#fig1.paused .pause-btn .i-pause { display: none; }
.panel-body { padding: 20px; }
.fig { width: 100%; height: auto; overflow: visible; }
.fig-v { display: none; max-width: 400px; margin: 0 auto; }
@media (max-width: 719px) {
  .fig-h { display: none; }
  .fig-v { display: block; }
  .panel-body { padding: 16px; }
  .panel-head { padding-left: 16px; }
}
.status {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 18px; border-top: 1px solid var(--line);
  font: 400 12.5px/1.6 var(--mono); color: var(--muted);
  min-height: 46px;
}
.status .caret { color: var(--accent); flex: none; }
.status .cursor { display: inline-block; width: 7px; height: 1.1em; vertical-align: -0.2em; margin-left: 2px; background: var(--accent-fill); opacity: 0; }
.live .status .cursor { opacity: 1; }
@media (max-width: 719px) { .status { min-height: 88px; padding: 12px 16px; } }

/* SVG diagram styling (inherits theme tokens) */
.fig text { font-family: var(--mono); fill: var(--ink); }
.fig .lane { font-size: 10.5px; font-weight: 500; letter-spacing: .12em; fill: var(--faint); }
.fig .t-sub { font-size: 10px; font-weight: 500; letter-spacing: .12em; fill: var(--faint); }
.fig .tile .t-sub { fill: var(--muted); }   /* --faint on --surface-2 is < 4.5:1 */
.fig .t-main { font-size: 12px; fill: var(--ink); }
.fig .t-name { font-family: var(--sans); font-size: 13.5px; font-weight: 600; fill: var(--ink); }
.fig .t-note { font-size: 10.5px; fill: var(--muted); }
.fig .t-row { font-family: var(--sans); font-size: 13px; fill: var(--ink); }
.fig .t-on { font-size: 10px; font-weight: 500; letter-spacing: .1em; fill: var(--ok); }
.fig .cc-title { font-size: 11px; font-weight: 500; letter-spacing: .12em; fill: var(--accent); }
.fig .tile rect { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1; transition: stroke .15s, fill .15s; }
.fig .tile.hit rect { stroke: var(--accent); fill: var(--accent-soft); }
.fig .tile-review rect.box { fill: var(--bg); stroke: var(--accent); stroke-dasharray: 3 3; }
.fig .tile-review.hit rect.box { fill: var(--accent-soft); stroke-dasharray: none; }
.fig .tag rect { fill: var(--accent-soft); stroke: var(--accent); }
.fig .tag text { font-size: 10px; fill: var(--accent); }
.fig .mini rect { fill: none; stroke: var(--line-strong); }
.fig .mini text { font-size: 10.5px; fill: var(--ink); }
.fig .wire { fill: none; stroke: var(--line-strong); stroke-width: 1.25; }
.fig .wire-review { stroke: var(--accent); stroke-dasharray: 4 4; }
.fig .feed { fill: none; stroke: var(--line-strong); stroke-width: 1.25; stroke-dasharray: 1 5; stroke-linecap: round; }
.fig .agent { fill: var(--bg); stroke: var(--accent); stroke-width: 1.25; }
.fig .halo { fill: var(--mark-dot); opacity: 0; transform-box: fill-box; transform-origin: center; }
.fig .cc { fill: var(--bg); stroke: var(--line-strong); }
.fig .rule { fill: none; stroke: var(--line); }
.fig .steps { font-size: 11px; fill: var(--faint); }
.fig .st .tick { opacity: 0; }
.fig .st.on { fill: var(--ok); }
.fig .st.on .tick { opacity: 1; }
.fig .sw { fill: var(--ok-soft); stroke: var(--ok); }
.fig .sw-knob { fill: var(--ok); }
.fig .audit { font-size: 10.5px; fill: var(--muted); transition: fill .15s; }
.fig .audit .time { fill: var(--faint); }
.fig .audit.hot { fill: var(--accent); }
.fig .packet { fill: var(--accent-fill); stroke: var(--accent); stroke-width: 1; opacity: 0; }
.fig .parked circle { fill: var(--accent-fill); stroke: var(--accent); stroke-width: 1; }
.live .fig .parked { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .live .fig .halo { animation: pulse 2.4s ease-out infinite; }
  .live.paused .fig .halo { animation-play-state: paused; }
}
@keyframes pulse {
  0% { opacity: .45; transform: scale(1); }
  70% { opacity: 0; transform: scale(2.4); }
  100% { opacity: 0; transform: scale(2.4); }
}

/* ---------- Sections ---------- */
.section { padding: var(--section-pad) 0; border-top: 1px solid var(--line); }
.section-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px;
  align-items: end; margin-bottom: 56px;
}
.section-head .intro { color: var(--muted); max-width: 34em; }
.section-head.solo { grid-template-columns: minmax(0, 1fr); }
.section-head.solo h2 { max-width: 13.66em; }
@media (max-width: 899px) { .section-head { grid-template-columns: minmax(0, 1fr); margin-bottom: 40px; } }

/* Sound familiar */
.pains { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; counter-reset: pain; }
.pains li {
  counter-increment: pain; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px;
  padding: 20px 0; border-top: 1px solid var(--line); font-size: 18px; line-height: 1.5;
}
.pains li::before { content: counter(pain, decimal-leading-zero); font: 500 12px/1.9 var(--mono); color: var(--accent); letter-spacing: .08em; padding-top: 2px; }
.fit { margin-top: 40px; color: var(--muted); max-width: 44em; padding-top: 24px; border-top: 1px solid var(--line); }
@media (max-width: 719px) { .pains { grid-template-columns: minmax(0, 1fr); } .pains li { font-size: 17px; } }

/* What we automate */
.cells {
  list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
}
.cell { grid-column: span 2; background: var(--bg); padding: 32px 28px; display: flex; flex-direction: column; transition: background-color .15s; }
.cell:nth-child(5), .cell:nth-child(6) { grid-column: span 3; }
.cells .cell-lead {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px 56px; padding: 40px; align-items: start; background: var(--surface);
}
.cell-lead:hover { background: var(--surface); }
.cell-lead h3 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.025em; }
.lead-top { display: flex; align-items: center; gap: 12px; }
.lead-top .chip { height: 22px; }
/* Wiki page figure (FIG. 02) */
.wiki { margin: 0; border: 1px solid var(--line-strong); border-radius: var(--r-media); background: var(--bg); overflow: hidden; }
.wiki-cap {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  font: 500 11.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.wiki-page { padding: 20px 20px 16px; }
.crumbs { font: 400 12px/1.4 var(--mono); color: var(--faint); }
.wiki-title { margin-top: 10px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.wiki-meta { margin-top: 6px; font: 400 12px/1.5 var(--mono); color: var(--muted); }
.wiki-text { margin-top: 14px; font-size: 15px; line-height: 1.6; }
.wiki sup { font: 500 10.5px/0 var(--mono); color: var(--accent); margin-left: 2px; }
.wiki-flag {
  margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--accent); border-radius: 8px;
  font-size: 14px; line-height: 1.5; color: var(--ink);
}
.flag-key { font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-right: 6px; }
.wiki-src { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); list-style: none; counter-reset: src; display: grid; gap: 4px; }
.wiki-src li { counter-increment: src; font: 400 12px/1.5 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.wiki-src li::before { content: "[" counter(src) "] "; color: var(--accent); }
.wiki-review {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface-2);
  font: 400 12px/1.5 var(--mono); color: var(--muted);
}
.rq { color: var(--accent); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; margin-right: 6px; }
.mini-btn { flex: none; font: 500 12px/1 var(--mono); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 4px; padding: 7px 10px; }
.cell:hover { background: var(--surface); }
.num { font: 500 12px/1 var(--mono); color: var(--accent); letter-spacing: .08em; }
.cell h3 { margin: 18px 0 8px; }
.cell .sum { color: var(--muted); font-size: 15.5px; }
.ba { margin: 24px 0 0; display: grid; gap: 14px; padding-top: 20px; border-top: 1px solid var(--line); }
.ba div { display: grid; gap: 4px; }
.ba dt { font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.ba dt.after { color: var(--ok); }
.ba dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.ba dd.after { color: var(--ink); }
.soft-cta { margin-top: 32px; color: var(--muted); }
.soft-cta a { color: var(--ink); font-weight: 500; }
@media (max-width: 1023px) {
  .cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cell, .cell:nth-child(5) { grid-column: auto; }
  .cell:nth-child(6) { grid-column: 1 / -1; }
  .cells .cell-lead { grid-template-columns: minmax(0, 1fr); padding: 32px 28px; }
}
@media (max-width: 679px) {
  .cells { grid-template-columns: minmax(0, 1fr); }
  .cell, .cell:nth-child(6) { grid-column: auto; padding: 28px 20px; }
  .cells .cell-lead { padding: 28px 20px; }
  .wiki-page { padding: 16px; }
  .wiki-review { flex-wrap: wrap; }
}

/* Control center */
.control-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 72px; align-items: start; }
.control-grid .intro { color: var(--muted); margin-top: 24px; max-width: 32em; }
.teams { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.teams li {
  font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 8px 12px;
}
.controls { list-style: none; border-top: 1px solid var(--line); }
.controls li {
  display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 8px 24px;
  padding: 22px 0; border-bottom: 1px solid var(--line);
}
.controls .key { font: 500 12px/1.9 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.controls p { color: var(--muted); }
.controls strong { color: var(--ink); font-weight: 600; display: block; margin-bottom: 2px; }
.control-close { margin-top: 28px; font-size: 18px; line-height: 1.5; }
.control-wiki { margin-top: 16px; color: var(--muted); padding-left: 16px; border-left: 2px solid var(--accent); }
@media (max-width: 959px) { .control-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 559px) { .controls li { grid-template-columns: minmax(0, 1fr); } }

/* How it works */
.track { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; position: relative; }
.track::before {
  content: ""; position: absolute; top: 20px; left: 20px; right: 20px; height: 1px; background: var(--line-strong);
}
.track li { position: relative; }
.node {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--accent); color: var(--accent);
  font: 500 13px/1 var(--mono); position: relative;
}
.track h3 { margin-top: 24px; }
.track .tag { display: inline-block; margin-top: 8px; font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.track p { margin-top: 14px; color: var(--muted); font-size: 15.5px; }
@media (max-width: 959px) {
  .track { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .track::before { top: 20px; bottom: 20px; left: 20px; right: auto; width: 1px; height: auto; }
  .track li { padding-left: 64px; }
  .node { position: absolute; left: 0; top: 0; }
  .track h3 { margin-top: 6px; }
}

/* Engagements */
.cards { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 28px; display: flex; flex-direction: column; transition: border-color .15s;
}
.card:hover { border-color: var(--line-strong); }
.card-first { border-color: var(--accent); }
.card-first:hover { border-color: var(--accent); }
.card .kicker { font: 500 11.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.card h3 { font-size: 24px; letter-spacing: -0.02em; margin-top: 16px; }
.card .one { margin-top: 10px; color: var(--muted); font-size: 15.5px; }
.meta { margin: 24px 0 0; border-top: 1px solid var(--line); }
.meta div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.meta dt { font: 500 11px/1.9 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.meta dd { margin: 0; font-size: 15px; }
.inc-label { margin-top: 24px; }
.includes { list-style: none; margin-top: 12px; display: grid; gap: 10px; }
.includes li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.5; }
.includes li::before { content: ""; position: absolute; left: 0; top: .75em; width: 10px; height: 1px; background: var(--accent); }
.card .foot { margin-top: auto; padding-top: 24px; font-size: 14px; color: var(--faint); }
.cards-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 40px; }
.cards-cta p { color: var(--muted); }
@media (max-width: 1023px) { .cards { grid-template-columns: minmax(0, 1fr); max-width: 680px; } }
@media (max-width: 559px) { .card { padding: 24px 20px; } }

/* Example scenarios */
.disclaimer {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 16px; align-items: start;
  padding: 18px 20px; margin-bottom: 32px;
  border: 1px solid var(--accent); border-radius: var(--r-card); background: var(--accent-soft);
}
.disclaimer p { color: var(--ink); max-width: 60em; }
.scenarios { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.scenario { border: 1px solid var(--line); border-radius: var(--r-card); padding: 28px; background: var(--bg); transition: border-color .15s; }
.scenario:hover { border-color: var(--line-strong); }
.scenario .tags { display: flex; flex-wrap: wrap; gap: 8px; }
.scenario .tags span { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 6px 8px; border-radius: 4px; }
.scenario .t-ex { color: var(--btn-ink); background: var(--btn-bg); }
.scenario .t-il { color: var(--muted); border: 1px solid var(--line-strong); }
.scenario h3 { margin-top: 16px; }
.scenario dl { margin: 20px 0 0; display: grid; gap: 16px; }
.scenario dt { font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.scenario dd { margin: 4px 0 0; font-size: 15.5px; color: var(--muted); }
@media (max-width: 899px) { .scenarios { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 559px) { .scenario { padding: 24px 20px; } .disclaimer { grid-template-columns: minmax(0, 1fr); } }

/* Why i² */
.why-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 72px; align-items: start; }
.why-grid .intro { color: var(--muted); margin-top: 24px; max-width: 30em; }
.why-list { list-style: none; border-top: 1px solid var(--line); }
.why-list li { padding: 24px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; }
.why-list .num { line-height: 1.9; }
.why-list h3 { font-size: 19px; }
.why-list p { margin-top: 8px; color: var(--muted); font-size: 15.5px; }
@media (min-width: 960px) { .why-grid > div:first-child { position: sticky; top: 104px; } }
@media (max-width: 959px) { .why-grid { grid-template-columns: minmax(0, 1fr); } }

/* Stack */
.stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; margin: 0; }
.stack div { background: var(--bg); padding: 28px; }
.stack dt { font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.stack dd { margin: 12px 0 0; color: var(--muted); font-size: 15.5px; }
.stack-close { margin-top: 28px; font-size: 18px; }
@media (max-width: 719px) { .stack { grid-template-columns: minmax(0, 1fr); } .stack div { padding: 24px 20px; } }

/* R&D band */
.rd { background: var(--surface); border-top: 1px solid var(--line); padding: clamp(48px, 6vw, 72px) 0; }
.rd-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px 72px; align-items: start; }
.rd h3 { font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -0.025em; margin-top: 14px; line-height: 1.15; text-wrap: balance; }
.rd p { color: var(--muted); }
.rd .link-arrow { margin-top: 12px; }
@media (max-width: 899px) { .rd-inner { grid-template-columns: minmax(0, 1fr); } }

/* FAQ */
.faq-list { max-width: 760px; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 20px 0; min-height: 64px; font-size: 18px; font-weight: 500; letter-spacing: -0.01em;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--accent); }
.faq-list summary .pm { position: relative; width: 14px; height: 14px; flex: none; }
.faq-list summary .pm::before, .faq-list summary .pm::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor;
  transition: transform .15s;
}
.faq-list summary .pm::after { transform: rotate(90deg); }
.faq-list details[open] summary .pm::after { transform: rotate(0); }
.faq-list .ans { padding: 0 40px 24px 0; color: var(--muted); }
@media (max-width: 559px) { .faq-list summary { font-size: 17px; } .faq-list .ans { padding-right: 0; } }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px 72px; align-items: start; }
.contact-grid .body { color: var(--muted); margin-top: 24px; max-width: 34em; font-size: 18px; }
.brief { list-style: none; margin-top: 32px; counter-reset: b; border-top: 1px solid var(--line); max-width: 36em; }
.brief li { counter-increment: b; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.brief li::before { content: counter(b, decimal-leading-zero); font: 500 12px/1.9 var(--mono); color: var(--accent); }
.contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 28px; }
.contact-card .btn { width: 100%; }
.contact-card .alt { margin-top: 20px; font-size: 15px; color: var(--muted); }
.contact-card .alt a { overflow-wrap: anywhere; }
.contact-card .note { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--faint); }
@media (max-width: 899px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } .contact-card { max-width: 520px; } }
@media (max-width: 559px) { .contact-card { padding: 24px 20px; } }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 48px 0 calc(40px + env(safe-area-inset-bottom)); }
.foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.foot-brand .brand svg { width: 28px; height: 28px; }
.foot-brand .tagline { margin-top: 8px; color: var(--muted); font-size: 15px; }
.foot-links { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14.5px; color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--ink); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; color: var(--faint); }
.foot-bottom a { color: var(--muted); overflow-wrap: anywhere; }
.foot-bottom a:hover { color: var(--ink); }

/* Replacements for inline style attributes (CSP: no 'unsafe-inline') */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.mk-dot { fill: var(--mark-dot); }
.mk-ink { fill: var(--mark-ink); }
.mk-stroke { stroke: var(--mark-ink); }
.link-arrow span.arr { border-bottom: 0; }
.label-gap { margin-top: 32px; }
.brief.tight { margin-top: 12px; }

/* Document pages (privacy, 404) */
.doc { padding: clamp(48px, 7vw, 96px) 0 var(--section-pad); }
.doc .wrap > * { max-width: 720px; }
.doc h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.05; letter-spacing: -0.035em; margin-top: 16px; max-width: none; }
.doc .eff { margin-top: 16px; font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.doc .summary { margin-top: 32px; padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); color: var(--ink); }
.doc h2 { font-size: 22px; line-height: 1.3; letter-spacing: -0.02em; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.doc p { margin-top: 12px; color: var(--muted); }
.doc ul { margin-top: 12px; padding-left: 20px; display: grid; gap: 10px; color: var(--muted); }
.doc strong { color: var(--ink); font-weight: 600; }
.doc a { color: var(--ink); text-decoration-color: var(--line-strong); text-underline-offset: 3px; overflow-wrap: anywhere; }
.doc a:hover { text-decoration-color: var(--accent); }
.doc .cta-row { margin-top: 32px; }

/* ---------- Pause motion control (see README) ---------- */
.motion-toggle, .nav-motion { display: none; }
@media (prefers-reduced-motion: no-preference) and (min-width: 640px) { .js .motion-toggle { display: inline-flex; } }
@media (prefers-reduced-motion: no-preference) and (max-width: 639px) { .js .nav-motion { display: block; } }
@media (prefers-reduced-motion: no-preference) and (min-width: 1120px) and (max-width: 1199px) { .js .site-nav a { padding: 0 8px; } .js .nav-actions { gap: 4px; } }
@media (prefers-reduced-motion: reduce) { .site-nav .nav-theme { border-bottom: 0; } }
.nav-motion button {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  min-height: 52px; padding: 0; background: none; border: 0; color: var(--ink);
  font: 400 17px/1 var(--sans); cursor: pointer;
}
.nav-motion svg { width: 28px; height: 28px; flex: none; }
/* The glyph shows the button's pressed state: resting = OFF (knob left, outline), paused = ON (knob right, green) */
.i-switch .sw-track { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.i-switch .sw-knob { fill: var(--muted); transform: translateX(-10px); }
.mo-paused .i-switch .sw-track { fill: var(--ok-soft); stroke: var(--ok); }
.mo-paused .i-switch .sw-knob { fill: var(--ok); transform: none; }
.motion .i-switch .sw-knob { transition: transform .2s var(--ease-dock); }
/* Header (icon only): the pause glyph in both states; pressed (paused) is drawn like the menu switch's ON (--ok).
   Its label shows on keyboard focus, and on hover only for real hover devices (a tap never leaves it stuck). The label
   belongs to the button's hover box (a bridge spans the gap), and Escape hides it until the pointer leaves or focus moves. */
.i-pp { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.motion-toggle { position: relative; }
.motion-toggle[aria-pressed="true"] { color: var(--ok); border-color: var(--ok); background: var(--ok-soft); }
.motion-toggle::before, .motion-toggle::after { position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; }
.motion-toggle::before { content: ""; top: 100%; width: 132px; height: 7px; }
.motion-toggle::after {
  content: attr(aria-label); top: calc(100% + 6px); z-index: 1; opacity: 0;
  padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--ink);
  font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.motion-toggle:focus-visible::after { opacity: 1; pointer-events: auto; }
@media (hover: hover) and (pointer: fine) { .motion-toggle:hover::before, .motion-toggle:hover::after { opacity: 1; pointer-events: auto; } }
.motion-toggle[data-tip-off]::after { opacity: 0; pointer-events: none; }

/* ==== css/core.css ==== */
/* Motion core: MOTION_SPEC §1.3 §1.5 §1.9 */
:root {
  --ease-route: cubic-bezier(.35,0,.15,1); --ease-drop: cubic-bezier(.55,.05,.35,1); --ease-dock: cubic-bezier(.3,1.6,.5,1);
  --ease-draw: cubic-bezier(.65,0,.35,1); --ease-out: cubic-bezier(.2,.8,.2,1); --ease-fade: cubic-bezier(.4,0,.2,1);
  --ease-anticipate: cubic-bezier(.5,0,.9,.5); --ease-human: cubic-bezier(.45,.05,.55,.95); --ease-trace: cubic-bezier(.22,1,.36,1);
  --pk-glow: 0 0 0 3px var(--accent-soft); --spine: var(--line-strong);
  --dim: .6; --ghost-o: .35; --wire-o: .7;
}
@supports (transition-timing-function: linear(0,1)) { :root { --ease-human: linear(0, .14 12%, .19 20%, .2 27%, .47 44%, .52 53%, .53 58%, .84 78%, .9 88%, 1); } }
:root[data-theme="dark"] { --pk-glow: 0 0 0 3px var(--accent-soft), 0 0 14px rgba(255,106,43,.4); --ghost-o: .3; --wire-o: .6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pk-glow: 0 0 0 3px var(--accent-soft), 0 0 14px rgba(255,106,43,.4); --ghost-o: .3; --wire-o: .6; } }
.mo-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: clip; pointer-events: none; z-index: 2; contain: layout style; }
.mo-layer > * { position: absolute; left: 0; top: 0; }
.mo-pk, .mo-ghost, .mo-ring, .mo-hand { width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; opacity: 0; }
.mo-pk, .mo-ghost { background: var(--accent-fill); }
.mo-pk { box-shadow: inset 0 0 0 1px var(--accent), var(--pk-glow); }
/* the speed streak: a tapered smear under its packet (head solid, tail clear); no ring and no glow in either theme */
.mo-ghost { background: linear-gradient(to left, var(--accent-fill), transparent); box-shadow: none; }
.mo-ring { box-shadow: inset 0 0 0 1px var(--accent); }
.mo-hand { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; box-shadow: inset 0 0 0 1.5px var(--accent); }
.mo-s-hand, .mo-s-sys, .mo-s-live, .mo-s-pend, .mo-s-ghost, .mo-c-hand { fill: none; stroke: var(--accent); stroke-width: 1.25; }
.mo-s-hand, .mo-s-ghost { stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mo-s-sys { stroke: var(--line-strong); }
.mo-s-pend { stroke-dasharray: 4 4; }
.mo-s-ghost { stroke-width: 1.5; stroke-dasharray: 1 5; opacity: var(--ghost-o); }
.mo-c-pk { fill: var(--accent-fill); stroke: var(--accent); }
.mo-c-hand { stroke-width: 1.5; }
.mo-ns { vector-effect: non-scaling-stroke; }

/* ==== css/sections/g1-hero.css ==== */
/* g1-hero (MOTION_SPEC §2.1-2.2). Unscoped rules are final states; pre-states sit under .mo-live or the boot flags. */
/* Header: comet (WAAPI on ::after), nav dot, menu hairlines + icon turn */
.site-header .nav { position: relative; }
.site-header .site-nav a[aria-current] { color: var(--ink); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent) 40%); transform: scaleX(0); transform-origin: 0 0; opacity: 0; pointer-events: none; }
.site-header .nav-dot { display: none; position: absolute; left: 0; bottom: 8px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--accent-fill); box-shadow: 0 0 0 3px var(--accent-soft); opacity: 0; pointer-events: none; transition: translate .42s var(--ease-out), scale .24s var(--ease-out), opacity .2s var(--ease-fade); }
@media (min-width: 1120px) { .motion .site-header .nav-dot { display: block; } }
@media (max-width: 1119px) {
  .site-header .site-nav li { position: relative; }
  .site-header .site-nav li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--line-strong); transform-origin: 0 0; opacity: 0; pointer-events: none; }
  .mo-live .site-header.menu-open .site-nav li:not(:last-child)::after { animation: g1-hair .58s calc(var(--g1-i, 0) * 40ms) both; }
  .mo-live .site-header.menu-open .menu-btn .i-close { --g1-r: -90deg; animation: g1-turn .16s var(--ease-out); }
  .mo-live .site-header[data-g1-menu]:not(.menu-open) .menu-btn .i-menu { --g1-r: 90deg; animation: g1-turn .16s var(--ease-out); }
}
@keyframes g1-hair { 0% { transform: scaleX(0); opacity: 1; animation-timing-function: var(--ease-draw); } 48% { transform: none; opacity: 1; animation-timing-function: var(--ease-fade); } 100% { transform: none; opacity: 0; } }
@keyframes g1-turn { from { transform: rotate(var(--g1-r)); opacity: 0; } }

/* Hero pre-roll: the agent reads "ı2" until the full stop docks */
@property --mark-dot { syntax: '<color>'; inherits: true; initial-value: #E5531A; }
.motion #fig1 .fig use { transition: --mark-dot .2s var(--ease-fade); }
.mo-dotless #fig1 .fig use, .mo-live #fig1[data-g1-dot] .fig use { --mark-dot: transparent; }
.mo-boot #fig1 .fig .parked, .mo-boot #fig1 .fig .st .tick, .mo-boot #fig1 .status-text,
.mo-live #fig1[data-g1-boot] .fig .parked, .mo-live #fig1[data-g1-boot] .fig .st .tick, .mo-live #fig1[data-g1-boot] .status-text { opacity: 0; }
.mo-boot #fig1 .fig .st.on, .mo-live #fig1[data-g1-boot] .fig .st.on { fill: var(--faint); }
/* untaught, the agent is machine grey; the docked full stop warms it to signal */
.mo-dotless #fig1 .fig .agent, .mo-live #fig1[data-g1-dot] .fig .agent { stroke: var(--line-strong); }
.motion #fig1 .fig .agent { transition: stroke .6s var(--ease-out); }

/* Fig. 01 loop */
#fig1 { --g1-glow: drop-shadow(0 0 3px rgba(229,83,26,.45)); }
:root[data-theme="light"] #fig1 { --g1-glow: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) #fig1 { --g1-glow: none; } }
#fig1.live .fig .halo { animation: none; }
#fig1 .fig .packet, #fig1 .fig .g1-hd { filter: var(--g1-glow); }
#fig1 .fig .g1-ch, #fig1 .fig .tb-path { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; opacity: 0; }
#fig1 .fig .g1-gh { fill: var(--accent-fill); opacity: 0; }
#fig1 .fig .tag, #fig1 .fig .g1-bl { transform-box: fill-box; transform-origin: center; }
#fig1.live .fig .tile-review.hit rect.box { stroke-dasharray: 3 3; }
#fig1 .fig .mini rect { transition: stroke .15s; }
#fig1 .fig .mini.invite rect { stroke: var(--accent); }
/* Trace-back: everything off the chain dims; the thread, its head and the bloom ride above */
#fig1 .fig .g1-hd { fill: var(--accent-fill); stroke: var(--accent); opacity: 0; }
#fig1 .fig .g1-bl { fill: none; stroke: var(--accent); stroke-width: 1.25; opacity: 0; }
/* paint-only dim (fill/stroke-opacity): an opacity transition would promote ~54 SVG children to their own layers */
#fig1 .fig > :not([data-tb], .packets, .g1-ch) { transition: fill-opacity .22s var(--ease-fade), stroke-opacity .22s var(--ease-fade); }
#fig1 .fig.tracing > :not([data-tb], .packets, .g1-ch) { fill-opacity: var(--dim); stroke-opacity: var(--dim); }
#fig1 .fig .st.trace { fill: var(--accent); }

/* ==== css/sections/g2-fit-automate.css ==== */
/* g2: #fit, #automate (MOTION_SPEC 2.3-2.4). These rules are the final frame; JS only arms pre-states. */

/* Fit: the teach-once figure, beside the paragraph at >=1180, beneath it below (space reserved) */
#fit .fit-row { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
#fit .fit-row .fit { margin: 0; padding: 0; border: 0; }
#fit .teach-fig { width: 100%; max-width: 480px; height: auto; aspect-ratio: 3 / 1; margin-top: 24px; }
@media (min-width: 1180px) {
  #fit .fit-row { display: grid; grid-template-columns: minmax(0, 44em) minmax(0, 1fr); gap: 48px; align-items: start; }
  #fit .teach-fig { margin-top: 0; }
}
#fit .teach-node { fill: var(--surface-2); stroke: var(--line-strong); stroke-linejoin: round; }
#fit .tl, #fit .teach-author { fill: none; }
#fit .tl { stroke-opacity: .6; }
#fit .teach-hand, #fit .teach-charge, #fit .teach-person { opacity: 0; }

/* Automate: pictograms on the number row, out of the text flow */
#automate .cell { position: relative; }
#automate .picto { position: absolute; top: 24px; right: 28px; width: 56px; height: 28px; fill: none; stroke: var(--line-strong); }
#automate .picto * { vector-effect: non-scaling-stroke; }
#automate .picto .i { fill: var(--surface-2); }
#automate .picto .ref { stroke-width: 2; stroke-linecap: round; }
#automate .picto .k { fill: var(--ok); stroke: var(--ok); }
#automate .picto .ko { stroke: var(--ok); }
#automate .picto .g { fill: var(--accent-fill); stroke: var(--accent); }
#automate .picto .s, #automate .picto .fg { stroke: var(--accent); stroke-dasharray: 2 2; }
#automate .picto .fg { stroke-dasharray: none; }
#automate .picto .fd { fill: var(--accent-soft); stroke-dasharray: 1.5 1; }
#automate .picto .fl { fill: none; stroke: var(--bg); }
#automate .picto .sw { stroke: var(--ink); opacity: 0; }
#automate .picto [data-t] { transform-box: fill-box; transform-origin: 50% 100%; }
#automate .picto .fg { transform-origin: 0 100%; }
@media (max-width: 679px) { #automate .picto { top: 22px; right: 20px; width: 48px; height: 24px; } }

/* Fig. 02: a rail in the page's left padding; highlights sit under the text */
#automate .wiki-page { position: relative; isolation: isolate; }
#automate .wiki-ov { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#automate .w-rail { opacity: .6; }
#automate .w-nd { fill: var(--bg); stroke: var(--line-strong); transform-box: fill-box; transform-origin: center; }
#automate .wiki-ov .w-el { stroke-width: 1.5; }
#automate .w-arc { fill: none; stroke: var(--accent); opacity: .35; }
#automate .wiki sup, #automate .wiki-src li, #automate .rq { position: relative; }
#automate .wiki sup::after, #automate .wiki-src li::after, #automate .rq::after {
  content: ""; position: absolute; inset: -1px -3px; z-index: -1; border-radius: 3px;
  background: var(--accent-soft); opacity: 0; transition: opacity .15s var(--ease-fade);
}
#automate .wiki-src li::after { inset: 0 -6px; }
#automate .wiki sup::after { inset: -2px -2px -1px -1px; box-shadow: inset 0 0 0 1px var(--accent); }
#automate .wiki .is-cited::after { opacity: 1; transition-duration: .12s; } /* marker + its source light as one pair */
/* waits for its owner: the queue is underlined, Approve invited, never pressed */
#automate .rq::after { inset: auto 0 -3px; height: 1px; z-index: 0; border-radius: 0; background: var(--accent); transform-origin: left; transition: none; }
#automate .g2-ask .rq::after { animation: g2-sweep .8s both; }
.motion #automate .mini-btn { transition: border-color .3s var(--ease-fade); }
#automate .g2-ask .mini-btn { border-color: var(--accent); }
@keyframes g2-sweep {
  0% { opacity: 1; transform: scaleX(0); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  50% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
}

/* ==== css/sections/g3-control.css ==== */
/* g3-control: #control, THE SWITCHBOARD (MOTION_SPEC §2.5). Unscoped rules = final state; pre-states are set by JS arm(). */
#control .control-grid, #control .teams li, #control .controls li { position: relative; }
#control .g3-gl, #control .g3-rl { position: absolute; pointer-events: none; opacity: 0; }
#control .g3-gl { inset: -1px; border: 1px solid var(--accent); border-radius: inherit; box-shadow: 0 0 0 3px var(--accent-soft); }
#control .g3-rl { left: 0; right: 0; top: -1px; height: 1px; background: var(--accent); transform-origin: 0 0; }

/* Row glyphs (32x16 units): never change row height */
#control .ctl-glyph { display: block; width: 32px; height: 16px; margin-top: 8px; overflow: visible; }
@media (min-width: 560px) { #control .ctl-glyph { width: 48px; height: 24px; } }
@media (min-width: 960px) { #control .ctl-glyph { width: 56px; height: 28px; } }
@media (max-width: 559px) { #control .ctl-glyph { display: inline-block; vertical-align: -3px; margin: 0 0 0 10px; } }
#control .ctl-glyph * { fill: none; stroke-width: 1; }
#control .ctl-glyph .g-pk, #control .g-q, #control .g-f, #control .g-kn, #control .g-tk, #control .g-c, #control .g-h { transform-box: fill-box; transform-origin: center; }
#control .g-ln { stroke: var(--line-strong); }
#control .ctl-glyph .g-pk, #control .ctl-glyph .g-f { fill: var(--accent-fill); stroke: var(--accent); stroke-width: .75; }
#control [data-ctl="review"] .g-pk { opacity: .6; }
#control .g-q, #control .g-d { stroke: var(--accent); }
#control .g-q { stroke-dasharray: 2 2; }
#control .ctl-glyph .g-m { stroke: #fff; stroke-width: 3; }
#control .ctl-glyph .g-t { stroke: var(--accent-ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
#control .ctl-glyph .g-c { fill: var(--accent); stroke: none; opacity: .8; }
#control .ctl-glyph .g-sw { fill: var(--ok-soft); stroke: var(--ok); }
#control .ctl-glyph .g-kn { fill: var(--ok); stroke: none; }
/* Hand ring = a person acting; it rests beside the approval it signed, and leaves the switch once flipped */
#control .ctl-glyph .g-h { stroke: var(--accent); stroke-width: .85; opacity: var(--ghost-o); }
#control [data-ctl="switch"] .g-h { opacity: 0; }
#control .ctl-glyph .g-tk { fill: var(--muted); stroke: none; shape-rendering: crispEdges; }
/* Pre-state while a row waits to play (class set by arm(), removed by final(); gone with .mo-live) */
.mo-live #control .g3-pre .g-pk, .mo-live #control .g3-pre .g-c, .mo-live #control .g3-pre .g-h { opacity: 0; }
.mo-live #control .g3-pre .g-d { stroke-dasharray: 2 2; }
.mo-live #control .g3-pre .g-m, .mo-live #control .g3-pre .g-t { stroke-dasharray: 0 99; }
.mo-live #control .g3-pre .g-f, .mo-live #control .g3-pre .g-tk { transform: scale(0); }

/* Harness (>=960, built by JS from measured geometry; 1 unit = 1 CSS px) */
#control .g3-hx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#control .g3-hx path { fill: none; stroke: var(--line-strong); stroke-width: 1.25; }
#control .g3-w { opacity: var(--wire-o); }
#control .g3-hx .g3-ch { stroke: var(--accent); }
#control .g3-hx .g3-tb { stroke-width: 2; stroke-linecap: round; }
#control .g3-hx circle, #control .g3-st { fill: var(--accent-fill); stroke: var(--accent); transform-box: fill-box; transform-origin: center; }
#control .g3-hx .g3-sh { fill: var(--bg); stroke-width: 1.25; } /* the merge port: ring over the wires, brass core */

/* ==== css/sections/g4-process-pricing.css ==== */
/* g4-process-pricing: #process, #pricing (MOTION_SPEC §2.6-2.7). Unscoped rules are the final state. */
#process .node { z-index: 1; }
#process .node::before, #process .node::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--accent-soft); }
#process .node::after { opacity: 0; } /* Operate heartbeat layer (JS pulses it) */
#process .g4-ov, #pricing .cards-ov, #pricing .g4-y { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
#process .g4-ko { stroke: var(--bg); stroke-width: 3; }
#process .g4-tk { stroke-width: 1.5; }
#process .g4-tk.mo-s-pend { stroke-dasharray: 2.5 2.5; }
#process .g4-ring { fill: var(--bg); }
#pricing .cards { position: relative; }
#pricing .g4-man { opacity: calc(var(--wire-o) * .6); }
#pricing .g4-pr { fill: none; stroke: var(--accent); }
/* pre-state: armed idle scenes, never in the #target section */
.mo-live #process:not(:target) [data-mo="idle"] .node::before { transform: scale(0); }
.mo-live #process:not(:target) [data-mo="idle"] .g4-ov, .mo-live #pricing:not(:target) [data-mo="idle"] .cards-ov, .mo-live #pricing:not(:target) [data-mo="idle"] ~ .g4-y { visibility: hidden; }
.mo-live #pricing:not(:target) [data-mo="idle"] .card-first { border-color: var(--line); }
/* proof: the baseline border transition returns card 1 to gold as the trace closes (900 ms); instant when paused */
.mo-live #pricing [data-mo="play"] .card-first { transition-delay: .9s; }
html:not(.mo-live) #pricing .card-first { transition: none; }

/* ==== css/sections/g5-examples-why-stack-rd.css ==== */
/* g5 §2.8-2.11; unscoped rules = final frame */
#examples .chip{position:relative}
#examples .chip::after{content:"";position:absolute;inset:-6px;border:1px dashed var(--accent);border-radius:99px}
#stack dt,#stack dl>div{position:relative}
#stack dl>:first-child{z-index:1}
#stack dl>div::before,#stack dl>div::after{content:"";position:absolute;background:var(--accent);clip-path:inset(50%)}
#stack dl>:first-child::before,#stack dl>:nth-child(3)::before{right:-1px;width:1px;top:0;bottom:0}
#stack dl>:nth-child(3)::after,#stack dl>:nth-child(4)::before{top:-1px;height:1px;left:0;right:0}
#stack dt::before,#stack dt::after,#stack dl>:first-child::after{content:"";position:absolute;left:-17px;top:5px;width:7px;height:7px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line-strong)}
#stack dt::after,#stack dl>:first-child::after{background:var(--accent-fill);box-shadow:inset 0 0 0 1px var(--accent),0 0 0 4px var(--accent-soft)}
#stack dl>:first-child::after{left:auto;top:auto;right:-4px;bottom:-4px;clip-path:none}
@media (max-width:719px){#stack dt::before,#stack dt::after{left:-13px}#stack dl>div::before,#stack dl>div::after{display:none}}
#rd{isolation:isolate}
#rd .rd-ov{position:absolute;left:0;right:0;top:-25px;height:49px;overflow:hidden;pointer-events:none;z-index:-1}
#rd .rd-ov::before,#rd .rd-ov i{content:"";position:absolute;top:24px;height:1px;left:var(--g5-x,0px);right:0}
#rd .rd-ov::before{background:repeating-linear-gradient(90deg,var(--accent) 0 3px,transparent 0 8px);opacity:var(--wire-o)}
#rd .rd-ov i{right:-50%;opacity:0}
#rd .rd-ov i::after{content:"";position:absolute;left:-3.5px;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--accent-fill)}
#rd .rd-ov :first-child::after{box-shadow:inset 0 0 0 1px var(--accent),var(--pk-glow)}
@media (min-width:1280px){#rd .rd-ov{--g5-x:calc(max(0px,(100% - var(--max))/2) + var(--gutter) - 32px)}}
.mo-live #stack [data-mo=idle] dt::after,.mo-live #stack [data-mo=idle]>:first-child::after{scale:0}
.mo-live #examples [data-mo=idle] .chip::after,.mo-live #rd[data-mo=idle] .rd-ov::before{clip-path:inset(0 100% 0 0)}

/* ==== css/sections/g6-faq-contact-footer-global.css ==== */
/* g6 (MOTION_SPEC §2.0, §2.12-2.14). Unscoped rules = final state; pre-state only under .mo-live */

/* Ports: hollow ring = waiting, brass dot = docked */
[data-port] { position: relative; }
[data-port]::before, [data-port]::after { content: ""; position: absolute; top: 3.5px; left: -14px; width: 7px; height: 7px; border-radius: 50%; }
[data-port]::before { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-strong); }
.rd [data-port]::before { background: var(--surface); }
[data-port]::after { background: var(--accent-fill); box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft); }
/* Lighting transitions only on ports relayed on screen (g6v) */
[data-g6v]::after { transition: transform .36s var(--ease-dock), opacity .12s linear; }
.mo-live [data-g6]::after { transform: scale(0); opacity: 0; }

/* Layer packets restyled: the seam comet and the spine tail */
.g6-seam, .g6-tail { border-radius: 0; box-shadow: none; }
.g6-seam { width: 100%; height: 1px; margin: 0; background: linear-gradient(90deg, var(--accent) 0 8%, transparent 70%); transform-origin: 0 0; }
.g6-tail { width: 1px; height: 64px; margin: -64px 0 0 -.5px; background: linear-gradient(transparent, var(--accent)); transform-origin: 50% 100%; }

/* The spine (>=1280): a dashed bus in the left gutter from #fit into the footer elbow */
@media (min-width: 1280px) {
  [data-port]::before, [data-port]::after { left: -35px; }
  .section, .rd {
    background-image: repeating-linear-gradient(var(--spine) 0 3px, transparent 0 9px);
    background-size: 1px 100%; background-repeat: no-repeat;
    background-position: calc((100% + 1px - var(--max)) / 2 + var(--gutter) - 32px) 0;
  }
  /* Footer: spine + elbow into the mark's dot (y 63.44), one masked path; 1.5 stroke on pixel rows. No mask, no elbow */
  @supports (mask: none) or (-webkit-mask: none) {
    .site-footer::after {
      content: ""; position: absolute; top: 0; left: calc((100% - var(--max)) / 2 + var(--gutter) - 32px);
      width: 39.2px; height: 64px; background: var(--spine);
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='64'%3E%3Cpath d='M.25 0V47.75a16 16 0 0 0 16 16H40' fill='none' stroke='red' stroke-width='1.5' stroke-dasharray='3 6'/%3E%3C/svg%3E") no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='64'%3E%3Cpath d='M.25 0V47.75a16 16 0 0 0 16 16H40' fill='none' stroke='red' stroke-width='1.5' stroke-dasharray='3 6'/%3E%3C/svg%3E") no-repeat;
    }
  }
}

/* FAQ: the open answer is traced to its question. Native details; height never animates. */
#faq .ans { position: relative; }
#faq .ans::before { content: ""; position: absolute; left: -14px; top: 0; bottom: 24px; width: 2px; background: var(--accent); transform-origin: 50% 0; }
.motion #faq details:not([open]) .ans::before { transform: scaleY(0); }
.motion #faq details[open] .ans::before { transition: transform .32s var(--ease-draw); }
@starting-style { .motion #faq details[open] .ans::before { transform: scaleY(0); } }
#faq .pm::after { transition: none; }
.motion #faq .pm::after { transition: transform .24s var(--ease-dock); }

/* Live wires (contact, footer charge), only while playing */
.g6-ov { overflow: visible; pointer-events: none; }
.g6-ov path { fill: none; stroke: var(--accent); stroke-width: 1; }
#contact .contact-grid { position: relative; }
#contact .contact-ov { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

/* Footer homecoming: the mark's dot fades in as the packet docks (JS holds it transparent until then) */
.motion .site-footer .brand svg { transition: --mark-dot .2s var(--ease-fade); }