/* Patcharc launch page — ROADMAP 10.8. One first-party script (reveal.js) marks what is on screen;
   everything else is CSS, and every colour is a token (DESIGN.md §2). */

/* ---------- Fonts: self-hosted latin subsets, SIL OFL (fonts/OFL-*.txt) ---------- */
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk-latin-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens: light by default ---------- */
:root {
  --mint: #00FFB3;
  --ink: #171717;
  --bg: #FBFCFB;
  --surface: #F2F5F3;
  --surface-2: #E9EEEB;
  --line: #D9E0DC;
  --line-ui: #6F7A75;
  --text: #171717;
  --text-dim: #4A5550;
  --text-faint: #5F6A65;
  --accent-text: #171717;
  --focus: #171717;
  --btn-bg: #171717;
  --btn-text: #F1F4F2;
  --btn-hover: #333936;
  --progress: #6AA9FF;
  --pending: #FFC857;
  --danger: #FF6B6B;

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --col: 1120px;
  --gutter: 16px;
  --measure: 65ch;
  --section-y: clamp(80px, 6rem + 4vw, 136px);

  --r-sm: 6px;
  --r-md: 10px;
  --r-pill: 999px;

  --ease-std: cubic-bezier(.2, 0, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-snap: cubic-bezier(.34, 1.3, .64, 1);
}

/* The ink sections: mint on ink, in both themes (DESIGN.md §5). */
.ink {
  --bg: #171717;
  --surface: #1F2321;
  --surface-2: #262B28;
  --line: #2E3431;
  --line-ui: #7A8580;
  --text: #F1F4F2;
  --text-dim: #A7B0AC;
  --text-faint: #8C9691;
  --accent-text: #00FFB3;
  --focus: #00FFB3;
  --btn-bg: #F1F4F2;
  --btn-text: #171717;
  --btn-hover: #FFFFFF;
}

/* ---------- Tokens: dark ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E100F;
    --surface: #161917;
    --surface-2: #1D211F;
    --line: #2B312E;
    --line-ui: #7A8580;
    --text: #F1F4F2;
    --text-dim: #A7B0AC;
    --text-faint: #8C9691;
    --accent-text: #00FFB3;
    --focus: #00FFB3;
    --btn-bg: #F1F4F2;
    --btn-text: #171717;
    --btn-hover: #FFFFFF;
  }
  .ink {
    --bg: #171717;
    --surface: #1F2321;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.028em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
/* Running text in lists, tables and summaries breaks like paragraphs do: no word alone on its last line. */
:where(li, dd, dt, td, th, summary, figcaption, blockquote) { text-wrap: pretty; }
ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
code, pre, kbd { font-family: var(--font-mono); font-size: .9em; }
strong { font-weight: 600; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip {
  position: absolute; left: 16px; top: -64px; z-index: 100;
  background: var(--ink); color: #F1F4F2; padding: 10px 16px; border-radius: var(--r-sm);
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; outline-color: var(--mint); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: calc(var(--col) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 720px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }

.section { padding-block: var(--section-y); background: var(--bg); color: var(--text); }
.section + .section:not(.ink) { border-top: 1px solid var(--line); }
.ink + .section { border-top: 0; }
@media (prefers-color-scheme: dark) {
  .section.ink { border-top: 1px solid var(--mint); }
}

.section-head { display: grid; gap: 20px; margin-bottom: 56px; }
@media (min-width: 1024px) {
  .section-head { grid-template-columns: repeat(12, 1fr); column-gap: 32px; align-items: end; }
  .section-head > .kicker { grid-column: 1 / -1; }
  .section-head > h2 { grid-column: 1 / span 7; }
  .section-head > .lede { grid-column: 8 / -1; }
  .section-head.stacked > h2, .section-head.stacked > .lede { grid-column: 1 / span 8; }
}

.kicker { font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text-faint); }
h2 { font-size: clamp(1.875rem, 1.1rem + 2.6vw, 2.875rem); }
h3 { font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.25; }
.lede { font-size: 1.125rem; color: var(--text-dim); max-width: var(--measure); }
.small { font-size: .9375rem; color: var(--text-dim); max-width: var(--measure); }
.mono { font-family: var(--font-mono); }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

.glyph { width: 20px; height: 20px; flex: none; }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px;
  border-radius: var(--r-sm);
  font: 600 .9375rem/1.2 var(--font-body);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 150ms var(--ease-std), border-color 150ms var(--ease-std), color 150ms var(--ease-std);
  white-space: nowrap;
}
.btn-primary { background: var(--btn-bg); color: var(--btn-text); border-color: var(--btn-bg); }
.btn-primary:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--line-ui); }
.btn-secondary:hover { border-color: var(--text); }
.btn .glyph { width: 18px; height: 18px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.text-link {
  display: inline;
  font-weight: 600; color: var(--accent-text); text-decoration: underline;
  text-decoration-color: var(--line-ui);
  transition: text-decoration-color 150ms var(--ease-std);
}
.text-link:hover { text-decoration-color: currentColor; }
.text-link .glyph { display: inline-block; vertical-align: -2px; width: 16px; height: 16px; margin-left: 4px; }

/* ---------- Header (PA-10.8-03) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.header-row { display: flex; align-items: center; gap: 12px 28px; min-height: 64px; padding-block: 10px; flex-wrap: wrap; }
.brand { display: inline-flex; border-radius: var(--r-sm); }
.brand .brand-icon { width: 32px; height: 32px; }
.primary-nav ul { display: flex; flex-wrap: wrap; gap: 4px 22px; }
@media (min-width: 940px) and (max-width: 1199.98px) { .primary-nav ul { column-gap: 16px; } }
.primary-nav a {
  font-size: .9375rem; font-weight: 500; color: var(--text-dim); text-decoration: none;
  padding-block: 6px; transition: color 150ms var(--ease-std);
}
.primary-nav a:hover { color: var(--text); }
.primary-nav a[aria-current] { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent-text); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.btn-sm { min-height: 38px; padding: 8px 14px; font-size: .875rem; }
.btn-sm .glyph { width: 16px; height: 16px; }
/* The GitHub mark: the page's one third-party mark (DESIGN.md §7). In-page until the repository is public. */
.btn-github { gap: 8px; }
/* The header's Join the waitlist appears only once the hero's own has passed under the header
   (2026-09-28), so the two never show at once. The page's one script (reveal.js) sets .is-past-hero;
   GitHub makes room, then the button fades in — each 150 ms, in turn. Hidden by default, so nothing
   flashes before the script runs; noscript.css brings it back when scripts are off. Phones drop it:
   their header does not stick. */
@media (max-width: 719.98px) { .header-join { display: none; } }
@media (min-width: 720px) {
  .header-actions { position: relative; }
  .header-join {
    position: absolute; right: 0; width: 11rem;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 150ms var(--ease-std), transform 150ms var(--ease-std), visibility 0s linear 150ms;
  }
  .btn-github { transition: transform 150ms var(--ease-std) 150ms; }
  .is-past-hero .header-join {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 150ms var(--ease-std) 150ms, transform 150ms var(--ease-std) 150ms, visibility 0s linear 150ms;
  }
  .is-past-hero .btn-github { transform: translateX(calc(-11rem - 10px)); transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) { .header-join, .btn-github { transition: none !important; } }
@media (max-width: 719.98px) {
  .header-row { gap: 8px 16px; padding-block: 10px 8px; }
  .header-actions { gap: 8px; }
  /* One row that scrolls sideways (2026-10-04), so seven links never take two rows. */
  .primary-nav { order: 3; width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); }
  .primary-nav ul {
    flex-wrap: nowrap; gap: 0 18px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    padding-inline: var(--gutter); -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent);
  }
  .primary-nav ul::-webkit-scrollbar { display: none; }
  .primary-nav li { flex: none; }
  .primary-nav a { display: block; font-size: .875rem; padding-block: 6px; white-space: nowrap; }
  .site-header { position: static; }
}
/* Short screens — phones held sideways (2026-10-04): the header scrolls away too, so it never takes a
   fifth of the view. */
@media (max-height: 499.98px) { .site-header { position: static; } }
/* The label stays the link's accessible name; only the mark shows — on phones, and from 940 to 1199px,
   where seven links, GitHub and Join the waitlist would not fit one row (2026-10-04). */
@media (max-width: 429.98px), (min-width: 940px) and (max-width: 1199.98px) {
  .btn-github-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
  }
  .btn-github { padding-inline: 10px; }
}
@media (max-width: 400px) {
  .btn-sm { padding: 6px 10px; font-size: .8125rem; min-height: 36px; }
}
/* One row needs ~850px of content (measured); under 940px the nav takes its own row. */
@media (min-width: 720px) and (max-width: 939.98px) {
  .primary-nav { order: 3; width: 100%; }
}

/* ---------- Hero (PA-10.8-03, PA-10.8-02): the h1, two calls, and a narrated stage on a band ---------- */
.hero { background: var(--bg); }
/* The band is the stage and it holds the whole hero (2026-09-28): the h1 over the arc's dome, the
   scene, then the calls. Full bleed, the column inside it; depth is a border, never a shadow. */
.hero-band {
  position: relative; overflow: hidden; overflow: clip; isolation: isolate;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(36px, 1rem + 3vw, 72px) clamp(32px, 1rem + 2.5vw, 56px);
}
/* The band's pattern: a field of small arcs, the brand's dome repeated, as a mask filled with a
   token so it follows the theme. It drifts one tile up and left every 10 s, and a soft glint sweeps
   across it every 9 s, brightening the arcs it passes — transform only, still under reduced motion.
   A wash of the band's own colour keeps it quiet behind the scene and the words. */
.band-pattern {
  position: absolute; z-index: -1; inset: 0 -48px -32px 0; overflow: hidden; pointer-events: none;
  background: color-mix(in srgb, var(--line-ui) 24%, transparent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='32'%3E%3Cpath d='M8 14Q24 3 40 14M-16 30Q0 19 16 30M32 30Q48 19 64 30' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 48px 32px repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='32'%3E%3Cpath d='M8 14Q24 3 40 14M-16 30Q0 19 16 30M32 30Q48 19 64 30' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 48px 32px repeat;
}
.band-glint {
  position: absolute; top: 0; bottom: 0; left: 0; width: 100%;
  background: linear-gradient(105deg, transparent 28%, color-mix(in srgb, var(--text) 62%, transparent) 50%, transparent 72%);
  transform: translateX(-100%);
}
.hero-band::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 55% at 50% 52%, var(--surface) 30%, transparent 100%); }
/* A phone's band is tall and narrow, so the wash cannot reach the words; the pattern goes fainter instead. */
@media (max-width: 719.98px) { .band-pattern { opacity: .45; } }
@media (prefers-reduced-motion: no-preference) {
  .band-pattern { animation: band-drift 10s linear infinite; }
  .band-glint { animation: band-glint 9s var(--ease-in-out) infinite; }
  @keyframes band-drift { to { transform: translate(-48px, -32px); } }
  @keyframes band-glint { 0% { transform: translateX(-100%); } 62%, 100% { transform: translateX(100%); } }
}
.hero h1 {
  font-size: clamp(2.25rem, 1rem + 3.3vw, 3.625rem);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -0.04em;
}
.hero-stage { position: relative; container-type: inline-size; margin-top: clamp(20px, .5rem + 2vw, 36px); }
.hero-actions { margin-top: clamp(20px, .5rem + 2vw, 32px); }
@media (min-width: 720px) {
  .hero h1 { text-align: center; }
  .hero-actions { justify-content: center; }
}
.hero-scene { width: 100%; height: auto; }
/* One scene at every width (2026-10-07, the founder): on a phone the wide one is shrunk to fit, not
   stacked into a portrait one. */

/* The captions: one per beat, under the arc's dome, over a five-part progress line. The markup is
   a real list, so a screen reader hears all five in order whatever is showing. The resting state is
   the final frame: every bar full, the fifth caption shown. */
.hero-beats {
  position: absolute; left: 22.68%; top: 15.5%; width: 57.14%;
  display: grid; grid-template-columns: repeat(5, 44px); justify-content: center; column-gap: 8px;
}
.beat-bar { display: block; position: relative; height: 3px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.beat-bar::after { content: ""; position: absolute; inset: 0; background: var(--accent-text); transform-origin: left center; }
.beat-text {
  position: absolute; left: 0; right: 0; top: 22px;
  font-family: var(--font-display); font-size: clamp(1rem, 2.6cqw, 1.875rem); font-weight: 600;
  line-height: 1.15; letter-spacing: -0.028em; text-align: center; text-wrap: balance; color: var(--text);
}
.beat-1 .beat-text, .beat-2 .beat-text, .beat-3 .beat-text, .beat-4 .beat-text { opacity: 0; }
@media (max-width: 719.98px) {
  .hero-beats { position: relative; left: auto; top: auto; width: auto; height: 76px; margin-bottom: 12px; justify-content: start; }
  .beat-text { top: 16px; font-size: 1.25rem; text-align: left; }
}
/* From 540 px every caption takes one line, so the box holds one (2026-10-07). */
@media (min-width: 540px) and (max-width: 719.98px) { .hero-beats { height: 53px; } }

.trust { display: grid; grid-template-columns: 1fr; }
.trust li {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 0;
  font-family: var(--font-display); font-weight: 500; font-size: .9375rem; letter-spacing: -0.01em; line-height: 1.3;
  border-bottom: 1px solid var(--line);
}
.trust .glyph { color: var(--text-faint); }
@media (min-width: 720px) {
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust li { padding: 18px 16px; white-space: nowrap; }
  .trust li:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--line); }
}
@media (min-width: 1100px) {
  .trust { grid-template-columns: repeat(4, auto); }
  .trust li { padding: 22px 20px; border-bottom: 0; font-size: .875rem; }
  .trust li:nth-child(odd) { padding-left: 20px; }
  .trust li:first-child { padding-left: 0; }
  .trust li:last-child { padding-right: 0; }
  .trust li:not(:last-child) { border-right: 1px solid var(--line); }
}

/* The hero scene's paint: tokens only, so it follows the theme. Its resting state is the final frame. */
.hero-scene text { font-family: var(--font-display); fill: var(--text); }
.hero-scene .hs-mono { font-family: var(--font-mono); }
.hs-card { fill: var(--bg); stroke: var(--line); stroke-width: 1; }
.hs-avatar { fill: var(--surface-2); }
.hero-scene .hs-strong { font-weight: 600; }
.hero-scene .hs-msg { font-weight: 500; letter-spacing: -0.01em; }
.hero-scene .hs-d { fill: var(--text-dim); }
.hero-scene .hs-f, .hero-scene tspan.hs-f { fill: var(--text-faint); }
.hero-scene .hs-t { fill: var(--text); }
.hs-outline { fill: none; stroke: var(--line-ui); stroke-width: 1; }
.hs-chip { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.hs-track { fill: var(--line); }
.hs-bar, .hs-ink { fill: var(--text); }
.hs-mint { fill: var(--mint); }
.hero-scene .hs-on-mint { fill: var(--ink); }
.hs-on-mint-stroke { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hs-on-ink-stroke { fill: none; stroke: var(--bg); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hs-link { fill: none; stroke: var(--line-ui); stroke-width: 1.25; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hs-term { fill: var(--ink); stroke: var(--line); stroke-width: 1; }
.hs-term-dot { fill: #3A403D; }
.hs-term-rule { stroke: #2E3431; stroke-width: 1; }
.hero-scene .hs-term-dim { fill: #A7B0AC; }
.hero-scene .hs-term-faint { fill: #8C9691; }
.hero-scene .hs-term-text { fill: #F1F4F2; }
.hero-scene .hs-term-mint { fill: var(--mint); }
.hs-term-del { fill: #262B28; }
.hs-term-add { fill: #123A2E; }
.hs-term-mint-stroke { fill: none; stroke: var(--mint); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* The arc is the lockup's own geometry at 2.3×, so its stroke is set in those units: 3.2 ≈ 7 px. */
.hs-arc { fill: none; stroke: var(--accent-text); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hs-arrowhead { fill: var(--accent-text); stroke: var(--accent-text); stroke-width: 2.5; stroke-linejoin: round; }
.hs-cursor { fill: var(--text); stroke: var(--bg); stroke-width: 1.5; stroke-linejoin: round; }
@media (prefers-color-scheme: dark) { .hs-term { fill: #090B0A; stroke: var(--line-ui); } }
/* Final frame: what is gone by the end of beat 5. */
.a-pill-triage, .a-draft, .a-cursor { opacity: 0; }

.dim { color: var(--text-dim); }

/* ---------- The problem (PA-10.8-04): the same bug, twice ---------- */
/* Two lanes over the same four steps (2026-09-28): each a real list; today crawls, with Patcharc is
   done and waits. */
.lanes { display: grid; gap: 12px; margin-bottom: 56px; }
.lane {
  --seg-x: 1; --seg-y: 0; --seg-dir: 180deg; display: grid; gap: 4px 32px;
  padding: 24px 20px; border: 1px solid var(--line); border-radius: var(--r-md);
}
/* The Patcharc lane is the one to look at: its own panel, a stronger edge, the mint rule the pricing
   page uses for its featured plan, and the brand icon. Both lanes keep the same inner padding, so
   their four steps stay in line for comparing. The rule is its own element, clipped by the panel's
   rounded edge, so it can draw across when the section builds. */
.lane-patcharc { position: relative; overflow: hidden; overflow: clip; background: var(--surface); border-color: var(--line-ui); }
.lane-patcharc::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--mint); transform-origin: left center; }
.lane-name { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; }
.lane-icon { flex: none; width: 26px; height: 26px; }
.lane-span { font-family: var(--font-display); font-size: .9375rem; font-weight: 500; color: var(--text-dim); }
.lane-patcharc .lane-span { color: var(--text); }
.lane-events { display: grid; gap: 24px; margin-top: 18px; padding-left: 30px; }
.ev { position: relative; display: grid; gap: 4px; align-content: start; }
.ev::before {
  content: ""; position: absolute; left: -30px; top: 1px; width: 14px; height: 14px;
  border: 2px solid var(--text); border-radius: var(--r-pill); background: var(--bg);
}
.lane-today .ev::before { border-color: var(--line-ui); }
.ev:not(:last-child)::after {
  content: ""; position: absolute; left: -24px; top: 17px; width: 2px; height: calc(100% + 6px);
  background: var(--text); transform-origin: center top;
}
.lane-today .ev:not(:last-child)::after { background: repeating-linear-gradient(var(--seg-dir), var(--line-ui) 0 3px, transparent 3px 8px); }
.lane-patcharc .ev-4::before { background: var(--mint); border-color: var(--mint); }
.ev-check { position: absolute; left: -30px; top: 1px; width: 14px; height: 14px; padding: 2px; color: var(--ink); }
.ev-when { font-family: var(--font-mono); font-size: .8125rem; color: var(--text-faint); }
.ev-what { font-size: .9375rem; line-height: 1.45; color: var(--text); }
.lane-today .ev-what { color: var(--text-dim); }
@media (min-width: 880px) {
  .lane { --seg-x: 0; --seg-y: 1; --seg-dir: 90deg; grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: auto 1fr; padding: 30px 28px; }
  .lane-name { grid-column: 1; grid-row: 1; }
  .lane-span { grid-column: 1; grid-row: 2; align-self: start; }
  .lane-events { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; margin-top: 0; padding-left: 0; }
  .ev { padding-top: 30px; }
  .ev::before, .ev-check { left: 0; top: 0; }
  .ev:not(:last-child)::after { left: 18px; top: 6px; width: calc(100% + 2px); height: 2px; transform-origin: left center; }
}

/* What changes for everyone in the loop (2026-09-29): one bordered box, a bulleted note per person, a
   quiet line from each bullet down to the panel that holds the closing sentence. */
.loop { --gutter: 20px; --bullet: 8px; }
.loop-title { font-size: 1.25rem; margin-bottom: 20px; }
.loop-box { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; overflow: clip; }
.people { display: grid; padding: 24px var(--gutter) 0; }
.people li { position: relative; max-width: 34rem; padding: 0 0 24px 26px; font-size: 1.0625rem; line-height: 1.5; color: var(--text); }
.people b { font-family: var(--font-display); font-weight: 600; }
/* The bullet, centred on the first line, and its line down into the panel. */
.people li::before {
  content: ""; position: absolute; left: 0; top: calc(.75em - var(--bullet) / 2);
  width: var(--bullet); height: var(--bullet); border-radius: var(--r-pill); background: var(--text);
}
.people li::after {
  content: ""; position: absolute; left: calc(var(--bullet) / 2 - 1px); top: calc(.75em + var(--bullet) / 2 + 4px); bottom: 0;
  width: 2px; background: var(--line-ui); transform-origin: center top;
}
.people li:not(:last-child)::after { bottom: calc(4px - .75em + var(--bullet) / 2); }
.loop-caption {
  padding: 20px var(--gutter) 22px; border-top: 1px solid var(--line); background: var(--surface);
  font-family: var(--font-display); font-size: clamp(1.1875rem, 1rem + .6vw, 1.5rem); font-weight: 500;
  line-height: 1.3; letter-spacing: -0.02em;
}
.loop-say { display: block; max-width: 46rem; }
.loop-say .dim { display: block; }
@media (min-width: 880px) {
  .loop { --gutter: 28px; }
  .people { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; padding-top: 28px; }
  .people li { padding-bottom: 28px; }
  .people li:not(:last-child)::after { bottom: 0; }
  .loop-caption { padding-block: 22px 24px; }
}

/* ---------- How it works (PA-10.8-05) ---------- */
/* One bug, start to finish (2026-09-29): four steps down a rail, each beside the same bug at that
   step, set in HTML type (DESIGN.md §8). */
.flow { --node: 36px; display: grid; }
.step {
  position: relative; display: grid; grid-template-columns: var(--node) minmax(0, 1fr);
  gap: 18px 20px; padding-bottom: 48px;
}
.step-no {
  grid-column: 1; grid-row: 1 / span 2; position: relative; z-index: 1;
  display: grid; place-items: center; width: var(--node); height: var(--node);
  border: 2px solid var(--line-ui); border-radius: var(--r-pill); background: var(--bg);
  font-family: var(--font-display); font-size: .9375rem; font-weight: 600; color: var(--text);
}
/* The rail: from under this step's number to the next one's, and from the last to the audit line. */
.step::after {
  content: ""; position: absolute; left: calc(var(--node) / 2 - 1px); top: calc(var(--node) + 6px); bottom: 6px;
  width: 2px; background: var(--line-ui); transform-origin: center top;
}
.step-text { grid-column: 2; display: grid; gap: 8px; align-content: start; padding-top: 5px; }
.step-text h3 { font-size: 1.375rem; }
.step-text p { max-width: 34rem; color: var(--text-dim); }
.shot {
  grid-column: 2; align-self: start; display: grid; gap: 10px; align-content: start; padding: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: .875rem; line-height: 1.45;
}
.shot-card {
  display: grid; gap: 6px; padding: 12px 14px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.shot-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .8125rem; color: var(--text-faint); }
.shot-meta b { font-family: var(--font-display); font-weight: 600; color: var(--text); }
.shot-avatar {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-pill);
  background: var(--surface-2); font-family: var(--font-display); font-size: .75rem; font-weight: 600; color: var(--text);
}
.shot-quote { font-size: 1rem; color: var(--text); }
.shot-title { font-family: var(--font-display); font-size: .9375rem; font-weight: 600; color: var(--text); }
.shot code { font-family: var(--font-mono); font-size: .8125rem; }
.shot-sources { display: flex; flex-wrap: wrap; gap: 6px; }
.shot-sources li {
  padding: 2px 10px; border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: .75rem; color: var(--text-faint);
}
.shot-sources .is-this { border-color: var(--line-ui); color: var(--text); }
.shot-facts div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.shot-facts div:first-child { padding-top: 0; border-top: 0; }
.shot-facts div:last-child { padding-bottom: 0; }
.shot-facts dt { color: var(--text-faint); }
.shot-facts dd { color: var(--text); }
.shot-facts code { white-space: nowrap; }
@media (max-width: 419.98px) { .shot-facts div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.shot-choice { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.shot-btn {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  border: 1px solid var(--line-ui); border-radius: var(--r-sm); background: var(--bg);
  font-family: var(--font-display); font-size: .875rem; font-weight: 600; color: var(--text);
}
.shot-btn-fix { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.shot-pill {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-pill);
  background: var(--text); color: var(--bg); font-family: var(--font-display); font-size: .75rem; font-weight: 600;
}
/* Open, then done: the report waits in outline, the merged PR is filled. */
.shot-pill-open { background: transparent; border: 1px solid var(--line-ui); color: var(--text); }
.shot-reply { margin-left: 20px; }
@media (min-width: 960px) {
  .step { grid-template-columns: var(--node) minmax(0, 5fr) minmax(0, 6fr); column-gap: 20px; padding-bottom: 56px; }
  .step-no { grid-row: 1; }
  .shot { grid-column: 3; margin-left: 28px; }
  .shot-facts div { grid-template-columns: 6.5rem minmax(0, 1fr); }
}

.footnote {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line);
  font-size: .9375rem; color: var(--text-dim);
}
.footnote .glyph { width: 18px; height: 18px; margin-top: 3px; color: var(--text-faint); }
.flow-log { position: relative; margin-top: 0; padding-top: 0; border-top: 0; padding-left: 56px; }
.flow-log .glyph { position: absolute; left: 9px; top: 0; }

/* ---------- Fix with AI (PA-10.8-07) ---------- */
/* One run drawn as one picture (2026-09-30; DESIGN.md §8 tells it): a canvas of 1000 × 560 units,
   360 × 580 on a portrait screen, whose unit (--u) is a fraction of its width, so it scales as one
   drawing. At rest, the machine at work. Facts: PATCHARC §4 A1–A6, §6c, 04-jobs-and-runs. */
.run-intro { display: grid; gap: 12px; margin-bottom: 32px; }
.run-title { max-width: 40rem; }
.mx {
  --u: calc(100cqw / 1000); --lh: calc(19 * var(--u)); --o: 2;
  --edge: color-mix(in srgb, var(--line-ui) 55%, var(--bg));
  position: relative; container-type: inline-size; aspect-ratio: 1000 / 520; margin-inline: auto;
}
.mx-g { position: absolute; inset: 0; font-size: calc(11 * var(--u)); line-height: 1.35; }
/* The drawing is kept close to the words above it: the map rides 50 units up, the machine's scenes 10. */
.mx-up, .mx-world { translate: 0 calc(-50 * var(--u)); }
.mx-vmg, .mx-vaultg, .mx-ghg, .mx-briefg, .mx-netg { translate: 0 calc(-10 * var(--u)); }
.mx-o { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); }
.mx .glyph { width: 1.25em; height: 1.25em; }
.mx b { font-family: var(--font-display); font-weight: 600; }
.mx small { display: block; font-size: .875em; color: var(--text-faint); }
.mx-sv { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--vh, 560) * var(--u)); overflow: visible; fill: none; stroke-linecap: round; }
.mx-sv-p { display: none; }
.mx-w { stroke: var(--line-ui); stroke-width: 1.5; stroke-dasharray: 1; }
.mx-pipe { stroke: var(--edge); stroke-width: 7; }
.mx-w.mx-no { stroke: var(--danger); }
.mx-flow { stroke: var(--progress); stroke-width: 3.5; stroke-dasharray: .012 .07; }
/* Stacks: states of one thing in one place; each later state covers the one before. */
.mx-st { display: inline-grid; }
.mx-st > * { grid-area: 1 / 1; }
.mx-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: .3em; height: 1.9em; padding: 0 .75em;
  border-radius: var(--r-pill); font-family: var(--font-display); font-size: .875em; font-weight: 600; white-space: nowrap; color: var(--text);
}
.mx-pill-run { background: color-mix(in srgb, var(--progress) 24%, var(--bg)); }
.mx-pill-wait { background: color-mix(in srgb, var(--pending) 38%, var(--bg)); }
.mx-pill-done { background: var(--mint); color: var(--ink); }
/* The card and the PR: the focus of the first and the last scenes. */
.mx-focus { display: grid; gap: calc(9 * var(--u)); padding: calc(16 * var(--u)) calc(18 * var(--u)); background: var(--bg); border: 1.5px solid var(--text); border-radius: var(--r-md); }
.mx-card { --x: 370; --y: 163; --w: 260; }
.mx-pr { --x: 370; --y: 150; --w: 260; }
.mx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; font-size: .9em; color: var(--text-faint); }
.mx-quote, .mx-title { font-family: var(--font-display); font-size: 1.55em; font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; }
.mx-title { font-size: 1.35em; font-weight: 600; }
.mx-code { font-family: var(--font-mono); font-size: .95em; color: var(--text-dim); }
.mx-ev { display: flex; align-items: center; gap: .4em; font-size: .9em; color: var(--text-dim); }
.mx ins { color: var(--text); text-decoration: none; font-weight: 600; }
.mx del { color: var(--text-dim); text-decoration: none; }
.mx-btns { position: relative; display: flex; gap: .6em; margin-top: calc(4 * var(--u)); }
.mx-btns.mx-st { display: grid; }
.mx-btn {
  display: inline-flex; align-items: center; height: 2.7em; padding: 0 1.1em; border: 1px solid var(--line-ui); border-radius: var(--r-sm);
  background: var(--bg); font-family: var(--font-display); font-weight: 600; white-space: nowrap;
}
.mx-btns .mx-btn-go { justify-self: start; background: var(--mint); border-color: var(--mint); color: var(--ink); }
.mx-ev.mx-st { display: grid; }
.mx-ev.mx-st > span { display: flex; align-items: center; gap: .4em; background: var(--bg); }
.mx-btns.mx-st > span:not(.mx-merged) { justify-self: start; background: var(--bg); }
.mx-btns.mx-st > span + span { margin: -2px; padding: 2px; }
.mx-merged { display: flex; align-items: center; gap: .4em; background: var(--bg); font-weight: 600; }
.mx-cursor { position: absolute; left: calc(52 * var(--u)); top: calc(16 * var(--u)); width: calc(17 * var(--u)); fill: var(--text); stroke: var(--bg); stroke-width: 1.5; stroke-linejoin: round; }
/* The world: three nodes on labelled branches. */
.mx-node { display: grid; gap: calc(6 * var(--u)); align-content: start; padding: calc(10 * var(--u)) calc(12 * var(--u)); background: var(--bg); border: 1px solid var(--edge); border-radius: var(--r-md); }
.mx-jira { --x: 15; --y: 110; --w: 225; }
.mx-slack { --x: 15; --y: 300; --w: 225; }
.mx-chat { --x: 760; --y: 150; --w: 225; }
.mx-nh { display: flex; align-items: center; gap: .45em; font-size: 1.05em; }
.mx-nh .mx-st { margin-left: auto; }
.mx-nh small { display: inline; }
.mx-nt { font-weight: 600; }
.mx-act { display: grid; font-size: .9em; color: var(--text-faint); }
.mx-act > *, .mx-prog .mx-st > * { grid-area: 1 / 1; background: inherit; }
.mx-act, .mx-prog .mx-st { background: inherit; }
.mx-msg { font-size: .95em; }
.mx-rep { margin-left: .7em; padding-left: .7em; border-left: 2px solid var(--edge); }
.mx-bub { justify-self: start; max-width: 88%; padding: .4em .75em; border-radius: var(--r-md); background: var(--surface-2); font-size: .95em; }
.mx-us { justify-self: end; background: var(--text); color: var(--bg); }
.mx-note { justify-self: end; background: color-mix(in srgb, var(--pending) 38%, var(--bg)); }
.mx-lab { transform: translate(-50%, -50%); display: grid; text-align: center; font-size: .9em; }
.mx-lab > span { grid-area: 1 / 1; padding: .2em .7em; border: 1px solid var(--edge); border-radius: var(--r-pill); background: var(--bg); color: var(--text-dim); white-space: nowrap; }
.mx-lab-j { --x: 305; --y: 192; }
.mx-lab-s { --x: 305; --y: 342; }
.mx-lab-c { --x: 695; --y: 262; }
.mx-ring { position: absolute; inset: -4px; border: 1.5px solid var(--accent-text); border-radius: 14px; pointer-events: none; }
/* The machine. */
.mx-vm {
  --x: 300; --y: 24; --w: 400;
  display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding: calc(14 * var(--u));
  background: var(--surface); border: 2px solid var(--text); border-radius: var(--r-md);
}
.mx-vh { display: flex; align-items: center; gap: .7em; }
.mx-vh b { display: block; font-size: 1.45em; line-height: 1.15; }
.mx-vh .mx-st { margin-left: auto; }
.mx-disc { flex: none; display: grid; place-items: center; width: 3em; height: 3em; border-radius: var(--r-pill); background: color-mix(in srgb, var(--progress) 24%, var(--bg)); color: var(--text); }
.mx-disc .glyph { width: 1.5em; height: 1.5em; }
.mx-specs { display: grid; grid-template-columns: 1fr 1fr; gap: calc(6 * var(--u)); }
.mx-spec { display: grid; }
.mx-spec > span {
  grid-area: 1 / 1; display: flex; align-items: center; gap: .4em; padding: .3em .7em; border: 1px solid var(--edge); border-radius: var(--r-pill);
  background: var(--bg); font-family: var(--font-display); font-size: .95em; font-weight: 600; white-space: nowrap;
}
.mx-spec > span + span { border-color: var(--mint); background: var(--mint); color: var(--ink); }
.mx-agent { display: grid; color: var(--text-faint); }
.mx-agent > span { display: flex; align-items: baseline; gap: .45em; background: var(--surface); }
.mx-agent b { color: var(--text); }
.mx-dot { width: .6em; height: .6em; border-radius: var(--r-pill); background: var(--progress); }
.mx-term { height: calc(15 * var(--lh) + 20 * var(--u)); overflow: hidden; padding: 0 calc(12 * var(--u)); border-block: calc(10 * var(--u)) solid transparent; border-radius: var(--r-sm); color: var(--text); font: calc(10.5 * var(--u)) / var(--lh) var(--font-mono); }
.mx-log { translate: 0 calc(var(--o) * -1 * var(--lh)); }
.mx-log p { height: var(--lh); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mx-log span { margin-right: .7em; color: var(--text-faint); }
.mx-log i { display: inline-block; width: 4.4em; font-style: normal; color: var(--progress); }
.mx-log .mx-ok i, .mx-log ins { color: var(--mint); }
.mx-log .mx-ok::after { content: " ✓"; color: var(--mint); }
.mx-log .mx-bad i, .mx-log .mx-bad, .mx-log del { color: var(--danger); }
.mx-log em { padding: 0 .35em; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-dim); font-style: normal; }
.mx-log .mx-warn { background: color-mix(in srgb, var(--pending) 30%, var(--bg)); color: var(--pending); }
.mx-prog { display: flex; align-items: center; gap: .8em; font-size: .95em; color: var(--text-dim); background: var(--surface); }
.mx-prog .mx-st { flex: none; min-width: 13em; }
.mx-track { position: relative; flex: 1; height: calc(6 * var(--u)); overflow: hidden; border-radius: var(--r-pill); background: var(--line); }
.mx-fill { position: absolute; inset: 0; background: var(--progress); transform-origin: left center; }
.mx-fill-ok { background: var(--accent-text); }
/* Where things meet the machine: the key's slot at the edge, the port the code and brief enter,
   the hub the network leaves from. */
.mx-gate, .mx-key {
  --x: 222; --y: 187; --w: 96;
  display: flex; align-items: center; justify-content: center; gap: .4em; height: calc(26 * var(--u)); border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 600; white-space: nowrap;
}
.mx-gate { border: 1.5px dashed var(--line-ui); background: var(--surface); }
/* The label ends short of the machine's border (at 300), the key sitting across it (2026-10-07). */
.mx-gate small { position: absolute; right: calc(24 * var(--u)); top: 100%; margin-top: .35em; font-weight: 500; white-space: nowrap; }
.mx-key { background: var(--ink); border: 1px solid var(--line-ui); color: #F1F4F2; }
.mx-key .glyph { color: var(--mint); }
.mx-key { --kx: -180; --ky: 0; }
.mx-gring { --x: 218; --y: 183; --w: 104; height: calc(34 * var(--u)); border: 2px solid var(--accent-text); border-radius: var(--r-pill); }
.mx-port, .mx-hub { --x: 292; --y: 352; --w: 16; height: calc(16 * var(--u)); border: 3px solid var(--surface); border-radius: var(--r-pill); background: var(--progress); }
.mx-hub { --x: 692; --y: 272; }
/* The key vault: a door, not a box. */
.mx-vault { --x: 40; --y: 150; --w: 170; display: grid; gap: calc(8 * var(--u)); justify-items: start; }
.mx-door { width: calc(100 * var(--u)); fill: var(--surface); stroke: var(--text); stroke-width: 2.5; }
.mx-door circle + circle { stroke: var(--edge); }
.mx-dial { stroke: var(--text); stroke-width: 4; stroke-linecap: round; transform-origin: 50px 50px; }
.mx-cipher { display: grid; font-family: var(--font-mono); font-size: .9em; }
.mx-cipher > span { grid-area: 1 / 1; display: flex; align-items: center; gap: .4em; background: var(--bg); color: var(--text-faint); }
.mx-cipher .glyph { padding: .15em; border-radius: var(--r-pill); background: var(--mint); color: var(--ink); }
/* The code: a pipe from GitHub with its token tagged on, and the files coming down it. */
.mx-gh { --x: 40; --y: 328; --w: 170; display: grid; gap: calc(8 * var(--u)); justify-items: start; }
.mx-gh .mx-disc { width: calc(64 * var(--u)); height: calc(64 * var(--u)); background: var(--text); color: var(--bg); }
.mx-gh .mx-disc .glyph { width: 50%; height: 50%; }
.mx-tag { --x: 140; --y: 382; display: flex; align-items: center; gap: .4em; padding: .3em .7em; border: 1px solid var(--edge); border-radius: var(--r-sm); background: var(--bg); font-size: .9em; white-space: nowrap; }
.mx-tag::before { content: ""; position: absolute; left: 50%; bottom: 100%; height: calc(12 * var(--u)); border-left: 1px solid var(--line-ui); }
.mx-file {
  --y: 350; --fx: 98; --fy: 0; --x: 110; --w: 92;
  height: calc(20 * var(--u)); padding: 0 .5em; border-radius: var(--r-sm); background: var(--progress); color: var(--ink);
  font: calc(9.5 * var(--u)) / calc(20 * var(--u)) var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The brief: three sheets of paper, the customer's marked untrusted. */
.mx-sheet {
  --x: 50; --w: 190; --fx: 155;
  padding: .6em .8em; background: var(--bg); border: 1px solid var(--edge); border-radius: var(--r-sm); transform-origin: center;
}
.mx-sheet b { display: block; }
.mx-sh1 { --y: 226; --fy: 104; rotate: -3deg; }
.mx-sh2 { --y: 294; --fy: 36; rotate: 2deg; }
.mx-sh3 { --y: 360; --fy: -34; rotate: -1.5deg; }
.mx-untrusted { border: 1.5px dashed color-mix(in srgb, var(--pending) 80%, var(--text)); }
.mx-untrusted .mx-pill { float: right; height: 1.7em; }
/* The network: three hosts on their wires, and one refused. */
.mx-host {
  display: flex; align-items: center; gap: .5em; width: auto; padding: .35em .9em .35em .35em; border: 1px solid var(--edge); border-radius: var(--r-pill);
  background: var(--bg); font-family: var(--font-display); font-weight: 600; white-space: nowrap;
}
.mx-host .glyph { width: 1.8em; height: 1.8em; padding: .3em; border-radius: var(--r-pill); background: var(--mint); color: var(--ink); }
.mx-host.mx-no { border-color: color-mix(in srgb, var(--danger) 60%, var(--bg)); color: var(--text-dim); text-decoration: line-through; }
.mx-host.mx-no .glyph { background: var(--danger); }
.mx-h1 { --x: 790; --y: 93; }
.mx-h2 { --x: 790; --y: 193; }
.mx-h3 { --x: 790; --y: 293; }
.mx-h4 { --x: 743; --y: 413; }
.mx-ghost {
  --x: 300; --y: 64; --w: 400;
  --h: 489; height: calc(var(--h) * var(--u)); display: flex; align-items: flex-end; justify-content: center; padding-bottom: calc(18 * var(--u));
  border: 2px dashed var(--line-ui); border-radius: var(--r-md);
}
.mx-ghost span { padding: .25em .9em; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-dim); font-weight: 600; }
/* At rest: the machine at work — the vault, the key at the edge, the log to the tests, the hosts. */
.mx-world, .mx-card, .mx-ghg, .mx-briefg, .mx-ghost, .mx-pr, .mx-cursor, .mx-ring, .mx-gring, .mx-v4, .mx-log > :nth-child(n+18) { opacity: 0; }
.mx-term { background: var(--ink); }
@media (prefers-color-scheme: dark) { .mx-term { background: #0E100F; outline: 1px solid var(--line); outline-offset: -1px; } }
.run-chapters { display: grid; gap: 24px 40px; margin-top: 36px; counter-reset: ch; }
.ch { display: grid; gap: 6px; align-content: start; }
.ch h3 { font-size: 1.125rem; }
.ch h3::before { counter-increment: ch; content: counter(ch); margin-right: 10px; color: var(--text-faint); }
.ch p { max-width: 40rem; font-size: .9375rem; color: var(--text-dim); }
@media (min-width: 720px) { .run-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Portrait: the same drawing on 360 × 580 units — what comes in and goes out sits above the
   machine, and the map hangs off the card as a tree. */
@media (max-width: 959.98px) {
  .mx { --u: calc(100cqw / 360); --lh: calc(17 * var(--u)); --o: 4; --vh: 580; max-width: 480px; aspect-ratio: 360 / 580; }
  .mx-up, .mx-world, .mx-vmg, .mx-vaultg, .mx-ghg, .mx-briefg, .mx-netg { translate: none; }
  .mx-g { font-size: calc(10.5 * var(--u)); }
  .mx-sv-l { display: none; }
  .mx-sv-p { display: block; }
  .mx-card, .mx-pr { --x: 12; --y: 0; --w: 336; }
  /* The card opens a little large and settles. It already spans the drawing here, so it grows only
     downward and no wider than the drawing: never past the screen, never into the words above. */
  .mx-card { --card-in: 1.07; transform-origin: 50% 0; }
  .mx-chat { --x: 44; --y: 202; --w: 316; }
  .mx-jira { --x: 44; --y: 367; --w: 316; }
  .mx-slack { --x: 44; --y: 463; --w: 316; }
  .mx-lab { transform: none; text-align: left; }
  .mx-lab > span { padding: 0; border: 0; background: var(--bg); }
  .mx-lab-c { --x: 44; --y: 187; }
  .mx-lab-j { --x: 44; --y: 352; }
  .mx-lab-s { --x: 44; --y: 448; }
  .mx-vm { --x: 8; --y: 144; --w: 344; gap: calc(8 * var(--u)); padding: calc(10 * var(--u)); }
  .mx-ghost { --x: 8; --y: 144; --w: 344; --h: 401; }
  .mx-term { height: calc(13 * var(--lh) + 16 * var(--u)); padding: 0 calc(10 * var(--u)); border-block-width: calc(8 * var(--u)); font-size: calc(9.5 * var(--u)); }
  .mx-gate, .mx-key { --x: 60; --y: 131; --w: 90; }
  .mx-gate small { left: auto; right: 0; top: auto; bottom: 100%; margin: 0 0 .3em; white-space: nowrap; }
  .mx-key { --kx: -59; --ky: -106; }
  .mx-gring { --x: 56; --y: 127; --w: 98; }
  .mx-port { --x: 224; --y: 136; }
  .mx-hub { --x: 172; --y: 136; }
  .mx-vault { --x: 14; --y: 6; --w: 220; grid-template-columns: auto 1fr; align-items: center; column-gap: calc(10 * var(--u)); }
  .mx-door { width: calc(64 * var(--u)); grid-row: span 2; }
  .mx-gh { --x: 210; --y: 8; --w: 150; grid-template-columns: auto 1fr; align-items: center; column-gap: calc(8 * var(--u)); }
  .mx-gh .mx-disc { width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
  .mx-tag { --x: 244; --y: 84; font-size: .85em; }
  .mx-tag::before { left: -1px; bottom: auto; top: 50%; width: calc(10 * var(--u)); height: 0; border-left: 0; border-top: 1px solid var(--line-ui); translate: -100% 0; }
  .mx-file { --x: 192; --y: 58; --w: 80; --fx: 0; --fy: 64; }
  .mx-sheet { --x: 196; --w: 160; --fx: -44; }
  .mx-sh1 { --y: 0; --fy: 118; }
  .mx-sh2 { --y: 16; --fy: 102; }
  .mx-sh3 { --y: 38; --fy: 80; }
  .mx-h1 { --x: 0; --y: 22; }
  .mx-h2 { --x: 112; --y: 0; }
  .mx-h3 { --x: 236; --y: 22; }
  .mx-h4 { --x: 224; --y: 104; }
  .mx-vaultg { opacity: 0; }
}

/* Badges: a small label on a card (the pricing plan's Most teams). */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r-sm); line-height: 1.4;
}
.badge .glyph { width: 14px; height: 14px; }
.badge-outline { border: 1px solid var(--line-ui); color: var(--text-dim); }
.badge-mint { background: var(--mint); color: var(--ink); }

/* ---------- Control (PA-10.8-09, ink) ---------- */
/* Five rules, not settings (2026-10-01): beside the words, the settings page it is not — the rules
   switches locked on, the policy page and Pause plainly yours to set. */
.control { display: grid; gap: 48px; }
@media (min-width: 1024px) {
  .control { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  .control-intro { position: sticky; top: calc(var(--under, 64px) + 48px); }
}
.control-intro { display: grid; gap: 16px; align-content: start; }
.control-intro .kicker { color: var(--accent-text); }
.control-intro h2 { max-width: 12ch; }
.control-intro .closing-link { margin-top: 12px; }
.panel { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.panel-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px;
  border-bottom: 1px solid var(--line); background: var(--bg); font-size: .875rem; color: var(--text-faint);
}
.panel-bar b { font-family: var(--font-display); font-weight: 600; color: var(--text); }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 22px 20px 12px; }
.panel-head h3 { font-size: 1.0625rem; }
.panel-note { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--text-faint); }
.panel-note .glyph { width: 16px; height: 16px; color: var(--accent-text); }
.rules li, .controls li { padding: 16px 20px; border-top: 1px solid var(--line); }
.rules li, .control-pause { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.rules b, .controls b, .controls h4 { display: block; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; color: var(--text); }
.rules p span, .controls p span { display: block; margin-top: 3px; font-size: .9375rem; line-height: 1.5; color: var(--text-dim); }
.rules small { display: block; margin-top: 6px; font-size: .8125rem; color: var(--text-faint); }
.panel-yours { border-top: 1px solid var(--line); background: var(--bg); }
/* A switch: on, mint, locked — the shield on its knob — or off and yours to flip. */
.switch {
  position: relative; flex: none; width: 44px; height: 24px; border-radius: var(--r-pill);
  border: 1px solid var(--line-ui); background: var(--surface-2);
}
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: var(--r-pill); background: var(--text-dim); }
.switch-on { border-color: var(--mint); }
.switch-on::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: var(--mint); }
.switch-on::after { left: auto; right: 2px; background: var(--ink); }
.switch-locked .glyph { position: absolute; z-index: 1; top: 2px; right: 2px; width: 18px; height: 18px; padding: 3px; color: var(--mint); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin-top: 12px; }
@media (max-width: 479.98px) { .fields { grid-template-columns: minmax(0, 1fr); } }
.fields div { display: grid; gap: 4px; }
.fields dt { font-size: .8125rem; color: var(--text-faint); }
.fields dd {
  margin: 0; padding: 7px 10px; border: 1px solid var(--line-ui); border-radius: var(--r-sm); background: var(--surface);
  font-family: var(--font-mono); font-size: .8125rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.closing-link { font-family: var(--font-display); font-size: 1.125rem; }

/* ---------- Cost guardrails (PA-10.8-10) ---------- */
/* The bill before it happens (2026-10-01): every line a CTO pays for on one month of Team, each with
   what bounds it, ending on Overage: none; beside the words, the button as it reads at a cap. */
.cost { display: grid; gap: 48px; }
@media (min-width: 1024px) { .cost { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; } }
.cost-intro { display: grid; gap: 20px; align-content: start; }
.cost-intro h2 { max-width: 14ch; }
.capped { display: grid; gap: 10px; justify-items: start; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-md); }
.capped-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.capped-btns span {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid var(--line-ui); border-radius: var(--r-sm);
  font-family: var(--font-display); font-size: .9375rem; font-weight: 600;
}
.capped-btns .capped-fix { border-style: dashed; background: var(--surface); color: var(--text-faint); }
.capped-fix .glyph { width: 16px; height: 16px; }
.capped-note { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--text-dim); }
.capped-note::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--danger); }
.cost-rule { font-size: 1.0625rem; max-width: 34rem; }
.bill { margin: 0; border: 1px solid var(--line-ui); border-radius: var(--r-md); background: var(--bg); }
.bill-head, .bill-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding: 18px 22px; }
.bill-head { border-bottom: 1px solid var(--text); }
.bill-head b { font-family: var(--font-display); font-size: 1.125rem; }
.bill-head span { font-size: .875rem; color: var(--text-faint); }
.bill-lines li {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 14px; row-gap: 10px; align-items: center;
  padding: 14px 22px; border-bottom: 1px solid var(--line);
}
.bill-lines .glyph { width: 36px; height: 36px; padding: 8px; border-radius: var(--r-pill); background: var(--text); color: var(--bg); }
.bill-lines b { display: block; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; }
.bill-lines p span { display: block; font-size: .875rem; color: var(--text-dim); }
.bill-lines strong { font-family: var(--font-display); font-size: .9375rem; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.bill-lines li:first-child strong { font-size: 1.375rem; }
.bill-lines li:last-child strong { padding: 2px 10px; border-radius: var(--r-pill); background: var(--mint); color: var(--ink); }
.bill-meter { grid-column: 2 / -1; position: relative; height: 6px; border-radius: var(--r-pill); background: var(--line); }
.bill-meter i { position: absolute; inset: 0; border-radius: inherit; background: var(--progress); transform: scaleX(.8); transform-origin: left center; }
.bill-meter::after { content: ""; position: absolute; left: 80%; top: -4px; bottom: -4px; width: 2px; border-radius: 1px; background: var(--pending); }
.bill-total { border-top: 1px dashed var(--line-ui); margin-top: -1px; }
@media (max-width: 559.98px) {
  .bill-lines li { grid-template-columns: 36px minmax(0, 1fr); }
  .bill-lines strong { grid-column: 2; justify-self: start; text-align: left; }
}
.bill-total b { font-family: var(--font-display); font-size: 1.125rem; }
.bill-total strong { font-family: var(--font-display); font-weight: 600; }

/* ---------- Security (PA-10.8-11, ink) ---------- */
/* Redrawn 2026-10-03: what it can do beside what it never does, how it is held in four lines, then
   the honest gap and the documents. A check on mint for what it may do; an outlined x for never. */
.access { display: grid; margin-bottom: 64px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.access-col { padding: 24px 24px 20px; }
.access-never { border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  .access { grid-template-columns: 1fr 1fr; }
  .access-col { padding: 28px 32px 24px; }
  .access-never { border-top: 0; border-left: 1px solid var(--line); }
}
.access h3 { font-size: 1.125rem; margin-bottom: 8px; }
.access-list li { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); line-height: 1.45; }
.access-list li:last-child { border-bottom: 0; }
.access-list .glyph { width: 24px; height: 24px; padding: 4px; border-radius: var(--r-pill); background: var(--mint); color: var(--ink); }
.access-never .glyph { padding: 5px; background: none; border: 1px solid var(--line-ui); color: var(--text-dim); }
.access-end { padding-top: 14px; border-top: 1px solid var(--line); font-family: var(--font-display); font-weight: 600; color: var(--accent-text); }
.held { display: grid; gap: 36px 32px; margin-bottom: 64px; }
@media (min-width: 640px) { .held { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .held { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.held li { display: grid; gap: 8px; align-content: start; }
@media (max-width: 639.98px) { .held li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; } .held .glyph { grid-row: span 2; margin: 0; } }
.held .glyph { width: 44px; height: 44px; padding: 11px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: var(--r-md); color: var(--accent-text); }
.held h3 { font-size: 1.125rem; }
.held p { font-size: .9375rem; color: var(--text-dim); }
.honesty { display: grid; gap: 20px; padding-top: 32px; border-top: 1px solid var(--line); }
.honesty p { color: var(--text-dim); max-width: 62ch; }
.honesty b { font-family: var(--font-display); font-weight: 600; color: var(--text); }
.honesty .actions { gap: 10px; }

/* ---------- Open source (PA-10.8-12) ---------- */
/* Redrawn 2026-10-03: the words and the two calls beside the repository itself — where to read the
   connectors, the rules and the sandbox limits, where the commercial line runs, then how to run it. */
.oss { display: grid; gap: 48px; }
@media (min-width: 1024px) {
  .oss { grid-template-columns: 5fr 7fr; column-gap: 64px; align-items: start; }
  .oss-intro { position: sticky; top: calc(var(--under, 64px) + 48px); }
}
.oss-intro { display: grid; gap: 20px; }
.oss-intro .actions { margin-top: 8px; }
.repo { overflow: hidden; border: 1px solid var(--line-ui); border-radius: var(--r-md); background: var(--bg); }
.repo-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--surface); color: var(--text-dim); }
.repo-head b { color: var(--text); }
@media (max-width: 479.98px) { .repo-head { font-size: .875rem; padding-inline: 16px; } }
.repo-licence { margin-left: auto; white-space: nowrap; padding: 2px 10px; border: 1px solid var(--line-ui); border-radius: var(--r-pill); font-size: .8125rem; font-weight: 600; }
.repo-files li { display: grid; grid-template-columns: 20px minmax(0, 11rem) minmax(0, 1fr); gap: 4px 14px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.repo-files .glyph { width: 20px; color: var(--text-faint); }
.repo-files code { font-size: .875rem; font-weight: 600; line-height: 1.7; }
.repo-files span { font-size: .9375rem; color: var(--text-dim); }
@media (max-width: 599.98px) { .repo-files li { grid-template-columns: 20px minmax(0, 1fr); } .repo-files span { grid-column: 2; } }
.repo-run { display: grid; gap: 12px; padding: 20px; background: var(--ink); color: #F1F4F2; }
.repo-run pre { margin: 0; overflow-x: auto; font-size: .8125rem; line-height: 1.75; }
.repo-run pre:focus-visible { outline-color: var(--mint); }
.repo-run code { font-size: inherit; }
.repo-run p { font-size: .875rem; color: #A7B0AC; }
.prompt { color: var(--mint); user-select: none; }

/* ---------- Connectors (PA-10.8-13) ---------- */
/* Redrawn 2026-10-03: a card per slot — what it is for, every tool with its mark, and what you get
   when none is connected. Built is a check on mint; not yet is a Join waitlist button. Marks are
   monochrome in the text colour, so mint stays the one accent (DESIGN.md §7). A bento from 1100px:
   three columns of whole cards, paired to run the same length, the waitlist card closing the third;
   each column's last card stretches, so no edge is left ragged. */
.slots { display: grid; gap: 16px; }
.slot-col { display: contents; }
@media (min-width: 720px) {
  .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slot-col { display: flex; flex-direction: column; gap: 16px; }
  .slot-col > :last-child { flex: 1; }
  /* Tablets: the third pair runs across both columns — Chat beside AI agent over the waitlist card. */
  .slot-col:nth-child(3) { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr; }
  .slot-col:nth-child(3) > :first-child { grid-row: span 2; }
}
@media (min-width: 1100px) {
  .slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .slot-col:nth-child(3) { grid-column: auto; display: flex; }
}
.slot { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
.slot-head { padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.slot-head h3 { font-size: 1.125rem; }
.slot-head p { font-size: .875rem; color: var(--text-faint); }
.tiles { padding: 6px 0; }
.tile { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 48px; padding: 6px 14px 6px 20px; }
.logo { width: 20px; height: 20px; fill: currentColor; color: var(--text); }
.logo-mono { display: grid; place-items: center; border: 1.5px solid; border-radius: var(--r-sm); font: 700 .75rem/1 var(--font-display); }
.logo-mono::before { content: attr(data-l); }
.tile-name { display: grid; font-size: .9375rem; font-weight: 600; line-height: 1.3; }
a.tile-name { justify-self: start; align-content: center; min-height: 32px; text-decoration: underline; text-decoration-color: var(--line); }
a.tile-name:hover { text-decoration-color: currentColor; }
.tile-waitlist .logo, .tile-coming-soon .logo { color: var(--text-faint); }
.tile-waitlist .tile-name, .tile-coming-soon .tile-name { font-weight: 500; color: var(--text-dim); }
.state-built { display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--r-pill); background: var(--mint); color: var(--ink); }
.state-built .glyph { width: 12px; height: 12px; }
.state-soon { font-size: .8125rem; font-weight: 400; color: var(--text-faint); }
.tile-join {
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px 10px 4px 12px;
  border: 1px solid var(--line-ui); border-radius: var(--r-pill); font-size: .8125rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color 150ms var(--ease-std), color 150ms var(--ease-std), border-color 150ms var(--ease-std);
}
.tile-join:hover { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-text); }
.tile-join .glyph { width: 14px; height: 14px; }
.slot-none { margin-top: auto; padding: 14px 20px 16px; border-top: 1px dashed var(--line-ui); font-size: .875rem; color: var(--text-dim); }
.slot-none b { font-weight: 600; color: var(--text); }
.conn-cta { display: grid; gap: 4px; align-content: end; justify-items: start; padding: 16px 20px; background: var(--surface); }
.conn-cta h3 { font-size: 1.125rem; }
.conn-cta p { color: var(--text-dim); }
.conn-cta .btn { margin-top: 12px; }

/* ---------- The demo (PA-10.8-14) ---------- */
/* Centred (2026-10-03): the words, then the player; the chapters under it went on 2026-10-06. */
.section-head.centred { justify-items: center; text-align: center; }
@media (min-width: 1024px) { .section-head.centred > h2, .section-head.centred > .lede { grid-column: 2 / span 10; } }
.player { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--ink); aspect-ratio: 16 / 9; }
.player video { width: 100%; height: 100%; object-fit: contain; background: var(--ink); }
/* The player clips its corners, so the video's focus ring is drawn inside its edge (2026-10-07). */
.player video:focus-visible { outline-offset: -4px; }

/* ---------- Pricing (PA-10.8-15) ---------- */
/* Redrawn 2026-10-03: three cards — who each suits, the price and the call, then its footprint and
   what every plan has, each with a check — Managed AI's packs in one strip, and Self-hosted and
   Enterprise as cards of their own. The calls are Join the waitlist until launch. */
.plans, .tiers { display: grid; gap: 16px; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan, .tier { display: flex; flex-direction: column; gap: 12px; padding: 28px 24px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
.plan { display: grid; gap: 20px; align-content: start; }
.plan-top, .plan-body { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 600px) and (max-width: 899.98px) { .plan { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
/* From 900 px every part of a card is a row the three cards share — name, who it suits, price, note,
   call, footprint, In every plan, its list — so a line that wraps in one card moves the same part in
   all three, and the prices, calls and lists stay level (2026-10-07). */
@media (min-width: 900px) {
  .plan { grid-row: span 8; grid-template-rows: subgrid; row-gap: 12px; }
  .plan-top, .plan-body { display: contents; }
  .plan-body > .plan-list:first-child { margin-top: 8px; }
}
.plan-featured { border-color: var(--line-ui); background: var(--surface); box-shadow: inset 0 4px 0 var(--mint); }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
.plan h3, .tier h3 { font-size: 1.375rem; }
.plan-for { margin-top: -6px; font-size: .9375rem; color: var(--text-dim); }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; }
.price-num { font-family: var(--font-display); font-size: 3rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.price-unit { color: var(--text-dim); font-size: .9375rem; }
.price-note { margin-top: -6px; font-size: .875rem; color: var(--text-faint); }
.plan-cta { width: 100%; margin-block: 8px 0; }
.plan-list { display: grid; gap: 10px; align-content: start; }
.plan-list li { display: flex; gap: 10px; font-size: .9375rem; line-height: 1.4; }
.plan-list .glyph { width: 18px; height: 18px; margin-top: 1px; }
.plan-list span { display: block; }
.plan-list span::first-letter { text-transform: uppercase; }
.plan-also { padding-top: 16px; border-top: 1px solid var(--line); font-size: .8125rem; font-weight: 600; color: var(--text-faint); }
.plan-every li { color: var(--text-dim); }
.plan-every .glyph { color: var(--text-faint); }
.plan-two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
@media (max-width: 479.98px) { .plan-two { grid-template-columns: minmax(0, 1fr); } }
.tier .btn { align-self: flex-start; margin-top: auto; }
.tier .plan-list { margin: 4px 0 16px; }
.managed { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-block: 16px 48px; padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.managed p { max-width: 58ch; color: var(--text-dim); }
.managed b { font-family: var(--font-display); font-weight: 600; color: var(--text); }
.packs { display: flex; flex-wrap: wrap; gap: 8px; }
.packs li { padding: 6px 14px; border: 1px solid var(--line-ui); border-radius: var(--r-pill); background: var(--bg); font-size: .9375rem; font-weight: 600; }
.fine-print { margin: 32px auto 0; text-align: center; }
.fine-print a { color: var(--text); font-weight: 500; }

/* ---------- FAQ (PA-10.8-18): native details, open, two by two ---------- */
/* Trimmed 2026-10-03 to what the page above does not answer. */
.faq-list { display: grid; gap: 16px; }
@media (min-width: 900px) { .faq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.faq-list details { padding: 24px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
.faq-list summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ""; flex: none; width: 10px; height: 10px;
  border-right: 2px solid var(--text-faint); border-bottom: 2px solid var(--text-faint);
  transform: translateY(-3px) rotate(45deg); transition: transform 150ms var(--ease-std);
}
.faq-list details[open] summary::after { transform: translateY(3px) rotate(225deg); }
.faq-list details p { margin-top: 12px; color: var(--text-dim); }
.faq-more { margin-top: 24px; }
@media (prefers-reduced-motion: reduce) { .faq-list summary::after { transition: none; } }

/* ---------- The close (PA-10.8-19, ink) ---------- */
/* Redrawn 2026-10-03: centred under the brand's own gesture — one mint dome over the words, a single
   arrowhead landing at the end (BRAND.md) — drawn once as the section arrives. */
.close { padding-block: clamp(96px, 6rem + 6vw, 184px); }
.close-main { display: grid; gap: 28px; justify-items: center; text-align: center; }
.close-head { display: grid; justify-items: center; width: min(100%, 10.4em); font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.25rem); }
.close-arc { width: 100%; height: auto; margin-bottom: -4px; overflow: visible; }
.close-arc path { fill: none; stroke: var(--mint); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.close-dome { stroke-dasharray: 1; }
.close-tip { transform-box: fill-box; transform-origin: 100% 100%; }
.close h2 { font-size: 1em; letter-spacing: -0.036em; line-height: 1.04; }
.close .lede { max-width: 52ch; margin-inline: auto; color: var(--text-dim); }
.close .actions { justify-content: center; }
.close .btn-secondary { color: var(--text); border-color: var(--line-ui); }
.close .btn-secondary:hover { border-color: var(--text); }
.honest { margin-top: 16px; padding-top: 24px; border-top: 1px solid var(--line); }
@media (max-width: 719.98px) { .close-arc path { stroke-width: 9; } }

/* ---------- Footer (PA-10.8-20) ---------- */
.site-footer { background: var(--bg); color: var(--text); border-top: 1px solid var(--line); padding-block: 64px 40px; }
.footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
@media (min-width: 880px) { .footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.footer-cols h2 { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 14px; }
.footer-cols ul { display: grid; gap: 4px; }
.footer-cols a { color: var(--text-dim); text-decoration: none; font-size: .9375rem; display: inline-block; padding-block: 4px; transition: color 150ms var(--ease-std); }
.footer-cols a:hover { color: var(--text); text-decoration: underline; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); }
.footer-wordmark { width: 101px; height: 38px; color: var(--accent-text); }
.footer-promise { font-family: var(--font-display); font-weight: 600; font-size: .9375rem; }
.footer-meta { font-size: .875rem; color: var(--text-faint); margin-left: auto; }
@media (max-width: 719.98px) { .footer-meta { margin-left: 0; width: 100%; } }

/* hero:motion:start — PA-10.8-02. The one exception to the 150 ms rule (style bible §7): a
   twelve-second loop in five beats on transform, opacity and stroke-dashoffset only, each beat
   narrated by its caption. Declared only under no-preference, so reduced motion shows the resting
   styles above: the final frame. Beats: 1 complaint 0–2 s · 2 evidence 2–4.5 s · 3 click 4.5–6.5 s ·
   4 fix 6.5–9 s · 5 merged and told 9–10.6 s, hold to 11.6 s, crossfade to 12 s. 1 s = 8.333 %. */
@media (prefers-reduced-motion: no-preference) {
  .hero-scene .a-fix, .hero-scene .a-sandbox, .hero-scene .a-pill-triage, .hero-scene .a-pill-fixed, .hero-scene .a-check, .hero-scene .a-reply { transform-box: fill-box; transform-origin: center; }
  .hero-scene .a-bar { transform-box: fill-box; transform-origin: left center; }
  .hero-scene .a-cursor { transform-box: fill-box; transform-origin: 0 0; }
  .hs-all { animation: hs-all 12s var(--ease-in-out) infinite; }
  .a-card { animation: hs-card 12s var(--ease-out) infinite; }
  .a-trace { animation: hs-trace 12s var(--ease-snap) infinite; }
  .a-chip1 { animation: hs-chip1 12s var(--ease-snap) infinite; }
  .a-chip2 { animation: hs-chip2 12s var(--ease-snap) infinite; }
  .a-conf { animation: hs-conf 12s var(--ease-out) infinite; }
  .a-bar { animation: hs-bar 12s var(--ease-in-out) infinite; }
  .a-cursor { animation: hs-cursor 12s var(--ease-in-out) infinite; }
  .a-fix { animation: hs-fix 12s var(--ease-out) infinite; }
  .a-link1 { animation: hs-link1 12s var(--ease-in-out) infinite; }
  .a-sandbox { animation: hs-sandbox 12s var(--ease-out) infinite; }
  .a-d1 { animation: hs-d1 12s var(--ease-out) infinite; }
  .a-d2 { animation: hs-d2 12s var(--ease-out) infinite; }
  .a-d3 { animation: hs-d3 12s var(--ease-out) infinite; }
  .a-d4 { animation: hs-d4 12s var(--ease-out) infinite; }
  .a-link2 { animation: hs-link2 12s var(--ease-in-out) infinite; }
  .a-pr { animation: hs-pr 12s var(--ease-out) infinite; }
  .a-check { animation: hs-check 12s var(--ease-snap) infinite; }
  .a-draft { animation: hs-draft 12s var(--ease-out) infinite; }
  .a-merged { animation: hs-merged 12s var(--ease-out) infinite; }
  .a-arc { animation: hs-arc 12s var(--ease-in-out) infinite; }
  .a-head { animation: hs-head 12s var(--ease-out) infinite; }
  .a-reply { animation: hs-reply 12s var(--ease-out) infinite; }
  .a-pill-triage { animation: hs-triage 12s var(--ease-in-out) infinite; }
  .a-pill-fixed { animation: hs-fixed 12s var(--ease-out) infinite; }
  .beat-1 .beat-text { animation: hs-cap1 12s var(--ease-out) infinite; }
  .beat-2 .beat-text { animation: hs-cap2 12s var(--ease-out) infinite; }
  .beat-3 .beat-text { animation: hs-cap3 12s var(--ease-out) infinite; }
  .beat-4 .beat-text { animation: hs-cap4 12s var(--ease-out) infinite; }
  .beat-5 .beat-text { animation: hs-cap5 12s var(--ease-out) infinite; }
  .beat-1 .beat-bar::after { animation: hs-seg1 12s linear infinite; }
  .beat-2 .beat-bar::after { animation: hs-seg2 12s linear infinite; }
  .beat-3 .beat-bar::after { animation: hs-seg3 12s linear infinite; }
  .beat-4 .beat-bar::after { animation: hs-seg4 12s linear infinite; }
  .beat-5 .beat-bar::after { animation: hs-seg5 12s linear infinite; }

  @keyframes hs-all { 0%, 96.67% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes hs-card { 0%, 1.67% { opacity: 0; transform: translateX(-48px); } 10%, 100% { opacity: 1; transform: none; } }
  @keyframes hs-trace { 0%, 16.67% { opacity: 0; transform: translateY(8px); } 20.83%, 100% { opacity: 1; transform: none; } }
  @keyframes hs-chip1 { 0%, 20.83% { opacity: 0; transform: translateY(-10px); } 24.17%, 100% { opacity: 1; transform: none; } }
  @keyframes hs-chip2 { 0%, 23.33% { opacity: 0; transform: translateY(-10px); } 26.67%, 100% { opacity: 1; transform: none; } }
  @keyframes hs-conf { 0%, 26.67% { opacity: 0; } 28.33%, 100% { opacity: 1; } }
  @keyframes hs-bar { 0%, 27.5% { transform: scaleX(0); } 35.83%, 100% { transform: scaleX(1); } }
  @keyframes hs-cursor {
    0%, 37.5% { opacity: 0; transform: translate(240px, 24px) scale(1); }
    39.17% { opacity: 1; transform: translate(240px, 24px) scale(1); }
    46.67%, 47.92% { opacity: 1; transform: translate(0, 0) scale(1); }
    49.17% { opacity: 1; transform: translate(0, 0) scale(.85); }
    50.42%, 52.5% { opacity: 1; transform: translate(0, 0) scale(1); }
    54.17%, 100% { opacity: 0; transform: translate(0, 0) scale(1); }
  }
  @keyframes hs-fix { 0%, 47.92% { transform: scale(1); } 49.17% { transform: scale(.94); } 50.83%, 100% { transform: scale(1); } }
  @keyframes hs-link1 { 0%, 54.1% { opacity: 0; stroke-dashoffset: 1; } 54.17% { opacity: 1; stroke-dashoffset: 1; } 56.67%, 100% { opacity: 1; stroke-dashoffset: 0; } }
  @keyframes hs-sandbox { 0%, 55% { opacity: 0; transform: scale(.96); } 59.17%, 100% { opacity: 1; transform: none; } }
  @keyframes hs-d1 { 0%, 59.17% { opacity: 0; transform: translateX(-6px); } 61.25%, 100% { opacity: 1; transform: none; } }
  @keyframes hs-d2 { 0%, 61.25% { opacity: 0; transform: translateX(-6px); } 63.33%, 100% { opacity: 1; transform: none; } }
  @keyframes hs-d3 { 0%, 63.33% { opacity: 0; transform: translateX(-6px); } 65.42%, 100% { opacity: 1; transform: none; } }
  @keyframes hs-d4 { 0%, 65.42% { opacity: 0; transform: translateX(-6px); } 67.5%, 100% { opacity: 1; transform: none; } }
  @keyframes hs-link2 { 0%, 67.4% { opacity: 0; stroke-dashoffset: 1; } 67.5% { opacity: 1; stroke-dashoffset: 1; } 70%, 100% { opacity: 1; stroke-dashoffset: 0; } }
  @keyframes hs-pr { 0%, 69.17% { opacity: 0; transform: translateY(12px); } 73.33%, 100% { opacity: 1; transform: none; } }
  @keyframes hs-check { 0%, 75% { opacity: 0; transform: translateY(-14px); } 77.08%, 100% { opacity: 1; transform: none; } }
  @keyframes hs-draft { 0%, 77.08% { opacity: 1; } 77.92%, 100% { opacity: 0; } }
  @keyframes hs-merged { 0%, 77.08% { opacity: 0; } 77.92%, 100% { opacity: 1; } }
  @keyframes hs-arc { 0%, 77.9% { opacity: 0; stroke-dashoffset: 1; } 77.92% { opacity: 1; stroke-dashoffset: 1; } 83.33%, 100% { opacity: 1; stroke-dashoffset: 0; } }
  @keyframes hs-head { 0%, 82.92% { opacity: 0; } 83.75%, 100% { opacity: 1; } }
  @keyframes hs-reply { 0%, 82.5% { opacity: 0; transform: translateY(10px); } 85.83%, 100% { opacity: 1; transform: none; } }
  @keyframes hs-triage { 0%, 84.17% { opacity: 1; transform: none; } 85% , 100% { opacity: 0; transform: scaleY(0); } }
  @keyframes hs-fixed { 0%, 85% { opacity: 0; transform: scaleY(0); } 85.83%, 100% { opacity: 1; transform: none; } }
  @keyframes hs-cap1 { 0% { opacity: 0; transform: translateY(8px); } 2.92%, 14.58% { opacity: 1; transform: none; } 16.67%, 100% { opacity: 0; transform: translateY(-8px); } }
  @keyframes hs-cap2 { 0%, 16.67% { opacity: 0; transform: translateY(8px); } 19.58%, 35.42% { opacity: 1; transform: none; } 37.5%, 100% { opacity: 0; transform: translateY(-8px); } }
  @keyframes hs-cap3 { 0%, 37.5% { opacity: 0; transform: translateY(8px); } 40.42%, 52.08% { opacity: 1; transform: none; } 54.17%, 100% { opacity: 0; transform: translateY(-8px); } }
  @keyframes hs-cap4 { 0%, 54.17% { opacity: 0; transform: translateY(8px); } 57.08%, 72.92% { opacity: 1; transform: none; } 75%, 100% { opacity: 0; transform: translateY(-8px); } }
  @keyframes hs-cap5 { 0%, 75% { opacity: 0; transform: translateY(8px); } 77.92%, 96.67% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
  @keyframes hs-seg1 { 0% { opacity: 1; transform: scaleX(0); } 16.67%, 96.67% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
  @keyframes hs-seg2 { 0%, 16.67% { opacity: 1; transform: scaleX(0); } 37.5%, 96.67% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
  @keyframes hs-seg3 { 0%, 37.5% { opacity: 1; transform: scaleX(0); } 54.17%, 96.67% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
  @keyframes hs-seg4 { 0%, 54.17% { opacity: 1; transform: scaleX(0); } 75%, 96.67% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
  @keyframes hs-seg5 { 0%, 75% { opacity: 1; transform: scaleX(0); } 88.33%, 96.67% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
}
/* hero:motion:end */

/* problem:motion — PA-10.8-04 (2026-09-28): the section builds once on the way down, in page order
   (reveal.js marks each block; --reveal-lead chains them); reached from below it is complete; still
   without the script and under reduced motion. DESIGN.md §8 has the beats. */
@media (prefers-reduced-motion: no-preference) {
  .js .section-head[data-reveal] { --reveal-lead: 500ms; }
  .js .lanes[data-reveal] { --reveal-lead: 1300ms; }

  /* Hidden until arrival (a step's line is its child, so it hides with it). */
  .js .section-head[data-reveal]:not(.is-in-view, .is-seen) > *,
  .js .lanes:not(.is-in-view, .is-seen) .lane,
  .js .loop:not(.is-in-view, .is-seen) :is(.loop-title, .loop-box) { opacity: 0; }

  .js .is-in-view :is(h2, .lede, .lane, .loop-title, .loop-box, .people li, .loop-say),
  .js .is-in-view .lane-patcharc::before, .js .is-in-view .people li::after,
  .js .loop.is-in-view .loop-say .dim { animation: .6s var(--ease-out) both; }
  .js .section-head.is-in-view > h2 { animation-name: pb-rise; animation-duration: .7s; }
  .js .section-head.is-in-view > .lede { animation-name: pb-rise; animation-duration: .7s; animation-delay: .18s; }
  .js .lanes.is-in-view .lane { animation-name: pb-box; }
  .js .lanes.is-in-view .lane-patcharc { animation-delay: .14s; }
  .js .lanes.is-in-view .lane-patcharc::before { animation-name: pb-draw-x; animation-delay: .5s; animation-timing-function: var(--ease-in-out); }
  .js .loop.is-in-view .loop-title { animation-name: pb-rise; }
  .js .loop.is-in-view .loop-box { animation-name: pb-box; animation-delay: .15s; }
  .js .loop.is-in-view .people li { --note: .4s; animation-name: pb-rise; animation-duration: .55s; animation-delay: var(--note); }
  .js .loop.is-in-view .people li:nth-child(2) { --note: .6s; }
  .js .loop.is-in-view .people li:nth-child(3) { --note: .8s; }
  .js .loop.is-in-view .people li::after { animation-name: pb-draw-y; animation-delay: calc(var(--note) + .2s); animation-timing-function: var(--ease-in-out); }
  .js .loop.is-in-view .loop-say { animation-name: pb-rise; animation-duration: .7s; animation-delay: 1.45s; }
  .js .loop.is-in-view .loop-say .dim { animation-name: pb-fade; animation-delay: 1.75s; }
  @keyframes pb-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes pb-box { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
  @keyframes pb-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes pb-draw-x { from { transform: scaleX(0); } to { transform: none; } }
  @keyframes pb-draw-y { from { transform: scaleY(0); } to { transform: none; } }

  /* The same bug, twice. */
  .js .lanes.is-in-view :is(.ev, .lane-span, .ev-check) { animation-duration: 12s; animation-delay: .4s; animation-iteration-count: 1; animation-fill-mode: both; animation-timing-function: var(--ease-out); }
  .js .lanes.is-in-view .ev:not(:last-child)::after { animation-duration: 12s; animation-delay: .4s; animation-iteration-count: 1; animation-fill-mode: both; animation-timing-function: var(--ease-out); }
  .js .lanes.is-in-view .ev-1 { animation-name: pb-e1; }
  .js .lanes.is-in-view .lane-today .ev-2 { animation-name: pb-t2; }
  .js .lanes.is-in-view .lane-today .ev-3 { animation-name: pb-t3; }
  .js .lanes.is-in-view .lane-today .ev-4 { animation-name: pb-t4; }
  .js .lanes.is-in-view .lane-today .ev-1::after { animation-name: pb-ts1; animation-timing-function: linear; }
  .js .lanes.is-in-view .lane-today .ev-2::after { animation-name: pb-ts2; animation-timing-function: linear; }
  .js .lanes.is-in-view .lane-today .ev-3::after { animation-name: pb-ts3; animation-timing-function: linear; }
  .js .lanes.is-in-view .lane-today .lane-span { animation-name: pb-tspan; }
  .js .lanes.is-in-view .lane-patcharc .ev-2 { animation-name: pb-p2; }
  .js .lanes.is-in-view .lane-patcharc .ev-3 { animation-name: pb-p3; }
  .js .lanes.is-in-view .lane-patcharc .ev-4 { animation-name: pb-p4; }
  .js .lanes.is-in-view .lane-patcharc .ev-1::after { animation-name: pb-ps1; }
  .js .lanes.is-in-view .lane-patcharc .ev-2::after { animation-name: pb-ps2; }
  .js .lanes.is-in-view .lane-patcharc .ev-3::after { animation-name: pb-ps3; }
  .js .lanes.is-in-view .lane-patcharc .lane-span { animation-name: pb-pspan; }
  .js .lanes.is-in-view .ev-check { animation-name: pb-check; animation-timing-function: var(--ease-snap); }
  @keyframes pb-e1 { 0%, 4.17% { opacity: 0; transform: translateY(6px); } 6.67%, 100% { opacity: 1; transform: none; } }
  @keyframes pb-t2 { 0%, 31.94% { opacity: 0; transform: translateY(6px); } 34.44%, 100% { opacity: 1; transform: none; } }
  @keyframes pb-t3 { 0%, 59.72% { opacity: 0; transform: translateY(6px); } 62.22%, 100% { opacity: 1; transform: none; } }
  @keyframes pb-t4 { 0%, 87.5% { opacity: 0; transform: translateY(6px); } 90%, 100% { opacity: 1; transform: none; } }
  @keyframes pb-ts1 { 0%, 4.17% { opacity: 1; transform: scale(var(--seg-x), var(--seg-y)); } 31.94%, 100% { opacity: 1; transform: none; } }
  @keyframes pb-ts2 { 0%, 31.94% { opacity: 1; transform: scale(var(--seg-x), var(--seg-y)); } 59.72%, 100% { opacity: 1; transform: none; } }
  @keyframes pb-ts3 { 0%, 59.72% { opacity: 1; transform: scale(var(--seg-x), var(--seg-y)); } 87.5%, 100% { opacity: 1; transform: none; } }
  @keyframes pb-tspan { 0%, 87.5% { opacity: 0; transform: translateY(4px); } 90%, 100% { opacity: 1; transform: none; } }
  @keyframes pb-p2 { 0%, 11.11% { opacity: 0; transform: translateY(6px); } 13.61%, 100% { opacity: 1; transform: none; } }
  @keyframes pb-p3 { 0%, 18.06% { opacity: 0; transform: translateY(6px); } 20.56%, 100% { opacity: 1; transform: none; } }
  @keyframes pb-p4 { 0%, 25% { opacity: 0; transform: translateY(6px); } 27.5%, 100% { opacity: 1; transform: none; } }
  @keyframes pb-ps1 { 0%, 4.17% { opacity: 1; transform: scale(var(--seg-x), var(--seg-y)); } 11.11%, 100% { opacity: 1; transform: none; } }
  @keyframes pb-ps2 { 0%, 11.11% { opacity: 1; transform: scale(var(--seg-x), var(--seg-y)); } 18.06%, 100% { opacity: 1; transform: none; } }
  @keyframes pb-ps3 { 0%, 18.06% { opacity: 1; transform: scale(var(--seg-x), var(--seg-y)); } 25%, 100% { opacity: 1; transform: none; } }
  @keyframes pb-pspan { 0%, 25% { opacity: 0; transform: translateY(4px); } 27.5%, 100% { opacity: 1; transform: none; } }
  @keyframes pb-check { 0%, 25% { transform: scale(.4); } 28.33%, 100% { transform: none; } }
}

/* how:motion — PA-10.8-05 (2026-09-29): each step builds as it is reached — number, words, example,
   then the rail to the next — 450 ms apart; complete from below, without the script, under reduced
   motion. */
@media (prefers-reduced-motion: no-preference) {
  .js .step[data-reveal] { --reveal-lead: 450ms; }
  .js .step:not(.is-in-view, .is-seen) > *,
  .js .step:not(.is-in-view, .is-seen)::after,
  .js .flow-log:not(.is-in-view, .is-seen) { opacity: 0; }
  .js .step.is-in-view > *, .js .step.is-in-view::after, .js .step.is-in-view :is(.shot-facts div, .shot-reply),
  .js .flow-log.is-in-view { animation: .6s var(--ease-out) both; }
  .js .step.is-in-view .step-no { animation-name: pb-pop; animation-duration: .45s; animation-timing-function: var(--ease-snap); }
  .js .step.is-in-view .step-text { animation-name: pb-rise; animation-delay: .12s; }
  .js .step.is-in-view .shot { animation-name: pb-box; animation-delay: .25s; }
  .js .step.is-in-view .shot-facts div { --row: 0s; animation-name: pb-rise; animation-duration: .4s; animation-delay: calc(.45s + var(--row)); }
  .js .step.is-in-view .shot-facts div:nth-child(2) { --row: .1s; }
  .js .step.is-in-view .shot-facts div:nth-child(3) { --row: .2s; }
  .js .step.is-in-view .shot-facts div:nth-child(4) { --row: .3s; }
  .js .step.is-in-view .shot-facts div:nth-child(5) { --row: .4s; }
  .js .step.is-in-view .shot-reply { animation-name: pb-rise; animation-duration: .5s; animation-delay: .75s; }
  .js .step.is-in-view::after { animation-name: pb-draw-y; animation-duration: .5s; animation-delay: .35s; animation-timing-function: var(--ease-in-out); }
  .js .flow-log.is-in-view { animation-name: pb-rise; }
  @keyframes pb-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
}

/* reveal — 2026-10-01: from Control on, every section builds once as it is reached, like the problem
   section: its heading, then its pieces in order (.rv rises whole, .rv-list one child at a time).
   Control's rules switch on and lock one by one; the bill prints a line at a time, the minutes fill
   to their alert and Overage lands last. Complete from below, without the script, under reduced
   motion. */
:is(.rv-list, .rules, .bill-lines, .access-list, .repo-files) > :nth-child(2) { --i: 1; }
:is(.rv-list, .rules, .bill-lines, .access-list, .repo-files) > :nth-child(3) { --i: 2; }
:is(.rv-list, .rules, .bill-lines, .access-list, .repo-files) > :nth-child(4) { --i: 3; }
:is(.rv-list, .rules, .bill-lines, .access-list, .repo-files) > :nth-child(5) { --i: 4; }
:is(.rv-list, .rules, .bill-lines, .access-list, .repo-files) > :nth-child(6) { --i: 5; }
:is(.rv-list, .rules, .bill-lines, .access-list, .repo-files) > :nth-child(7) { --i: 6; }
:is(.rv-list, .rules, .bill-lines, .access-list, .repo-files) > :nth-child(n+8) { --i: 7; }
.panel-yours { --i: 5; }
.bill-total { --i: 6; }
.access-end { --i: 4; }
.access-never, .repo-run { --o: .5s; }
@media (prefers-reduced-motion: no-preference) {
  .js :is(.rv, .rv-list)[data-reveal] { --reveal-lead: 250ms; }
  .js .rv:not(.is-in-view, .is-seen), .js .rv-list:not(.is-in-view, .is-seen) > * { opacity: 0; }
  .js .rv.is-in-view { animation: pb-box .65s var(--ease-out) both; }
  .js .rv-list.is-in-view > * { animation: pb-rise .55s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms); }
  .js .panel.is-in-view :is(.rules li, .panel-yours), .js .bill.is-in-view :is(.bill-lines li, .bill-total) {
    animation: pb-rise .5s var(--ease-out) both; animation-delay: calc(.3s + var(--i, 0) * 130ms);
  }
  .js .panel.is-in-view .switch-on::before { animation: pb-fade .25s linear both; animation-delay: calc(.6s + var(--i, 0) * 130ms); }
  .js .panel.is-in-view .switch-on::after { animation: rv-knob .3s var(--ease-out) both; animation-delay: calc(.6s + var(--i, 0) * 130ms); }
  .js .panel.is-in-view .switch-locked .glyph { animation: pb-pop .35s var(--ease-snap) both; animation-delay: calc(.85s + var(--i, 0) * 130ms); }
  .js .bill.is-in-view .bill-meter i { animation: rv-meter 1s var(--ease-out) both; animation-delay: .75s; }
  .js .bill.is-in-view .bill-meter::after { animation: pb-pop .35s var(--ease-snap) both; animation-delay: 1.6s; }
  .js .access.is-in-view :is(.access-list li, .access-end), .js .repo.is-in-view :is(.repo-files li, .repo-run) {
    animation: pb-rise .5s var(--ease-out) both; animation-delay: calc(.3s + var(--o, 0s) + var(--i, 0) * 110ms);
  }
  .js .access.is-in-view .access-list .glyph { animation: pb-pop .35s var(--ease-snap) both; animation-delay: calc(.5s + var(--o, 0s) + var(--i, 0) * 110ms); }
  .js .close-main.is-in-view .close-dome { animation: rv-draw 1.1s var(--ease-in-out) both; animation-delay: .25s; }
  .js .close-main.is-in-view .close-tip { animation: pb-pop .35s var(--ease-snap) both; animation-delay: 1.25s; }
  @keyframes rv-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  .js .slots.is-in-view .state-built { animation: pb-pop .35s var(--ease-snap) both; animation-delay: calc(.35s + var(--i, 0) * 90ms); }
  .js .bill.is-in-view .bill-lines li:last-child strong { animation: pb-pop .4s var(--ease-snap) both; animation-delay: 1.35s; }
  @keyframes rv-knob { from { translate: -20px 0; } to { translate: none; } }
  @keyframes rv-meter { from { transform: scaleX(0); } to { transform: scaleX(.8); } }
}

/* ---------- The pages: Security, Privacy, Terms, Refunds (2026-10-03) ---------- */
/* The same header and footer as the landing; a heading, a contents list that stays beside the text
   from 1024px, and the text at a reading measure. No hero, so the header's Join the waitlist shows. */
@media (min-width: 720px) {
  .doc-page .header-join { opacity: 1; visibility: visible; transform: none; }
  .doc-page .btn-github { transform: translateX(calc(-11rem - 10px)); }
}
.doc { display: grid; gap: 40px; padding-block: clamp(48px, 2rem + 4vw, 96px) var(--section-y); }
@media (min-width: 1024px) {
  .doc { grid-template-columns: 220px minmax(0, 1fr); column-gap: 72px; }
  .doc-head { grid-column: 1 / -1; }
  .doc-toc { position: sticky; top: calc(var(--under, 64px) + 32px); align-self: start; }
}
@media (max-width: 1023.98px) { .doc-toc { display: none; } }
.doc-head { display: grid; gap: 16px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.doc-head h1 { font-size: clamp(2.25rem, 1.4rem + 2.8vw, 3.5rem); letter-spacing: -0.036em; line-height: 1.05; }
.doc-meta { font-size: .875rem; color: var(--text-faint); }
.doc-toc h2 { margin-bottom: 10px; font-size: .875rem; color: var(--text-faint); letter-spacing: 0; }
.doc-toc a { display: block; padding: 5px 0 5px 12px; border-left: 2px solid var(--line); font-size: .9375rem; color: var(--text-dim); text-decoration: none; }
.doc-toc a:hover { border-color: var(--text); color: var(--text); }
.doc-body { max-width: 48rem; }
.doc-body section + section { margin-top: 56px; }
.doc-body h2 { margin-bottom: 14px; font-size: 1.5rem; scroll-margin-top: calc(var(--under, 64px) + 24px); }
.doc-body p, .doc-body li { color: var(--text-dim); }
.doc-body > section > * + * { margin-top: 14px; }
.doc-body strong { color: var(--text); }
.doc-body a { color: var(--text); font-weight: 500; }
.doc-body ol { display: grid; gap: 10px; counter-reset: step; }
.doc-body ol li { display: grid; grid-template-columns: 32px minmax(0, 1fr); counter-increment: step; }
.doc-body ol li::before { content: counter(step); font: 600 .9375rem/1.6 var(--font-display); color: var(--text); }
.table { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); }
.table table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.table th, .table td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.45; }
.table tbody tr:last-child > * { border-bottom: 0; }
.table thead th { background: var(--surface); font-family: var(--font-display); font-weight: 600; color: var(--text); }
.table tbody th { font-weight: 600; color: var(--text); }
.table td { color: var(--text-dim); }
/* Phones: each row stacks — its heading, then its cells — so nothing scrolls sideways. */
@media (max-width: 639.98px) {
  .table thead { display: none; }
  .table tr, .table th, .table td { display: block; }
  .table tbody tr { padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .table tbody tr:last-child { border-bottom: 0; }
  .table tbody th, .table td { padding: 0; border: 0; }
  .table td { margin-top: 4px; }
}

/* run:scrub — PA-10.8-07 (2026-09-30): the run follows the scroll; DESIGN.md §8 has the
   story. reveal.js pins the stage (.is-scrub) and writes --p, 0 to 1; each part is a paused 1 s
   animation delayed by its start (--at) minus --p, so scrolling back plays it backwards. Generated
   from one timing table. Transform, opacity and stroke only. */
.mx-jira{--at:.072s}
.mx-lj1{--at:.075s}
.mx-chat{--at:.086s}
.mx-lc1{--at:.089s}
.mx-c1{--at:.095s}
.mx-slack{--at:.1s}
.mx-ls1{--at:.103s}
.mx-s1{--at:.11s}
.mx-k1{--at:.058s}
.mx-v1{--at:.146s}
.mx-v2{--at:.2s}
.mx-v3{--at:.532s}
.mx-v4{--at:.772s}
.mx-sp1{--at:.198s}
.mx-sp2{--at:.336s}
.mx-sp3{--at:.64s}
.mx-sp4{--at:.646s}
.mx-gate{--at:.27s}
.mx-dec{--at:.294s}
.mx-tag{--at:.41s}
.mx-ag{--at:.532s}
.mx-port{--at:.396s}
.mx-hub{--at:.632s}
.mx-m0{--at:.884s}
.mx-h1{--at:.646s}
.mx-h2{--at:.65s}
.mx-h3{--at:.654s}
.mx-h4{--at:.672s}
.mx-g1{--at:.532s}
.mx-g2{--at:.728s}
.mx-fill-ok{--at:.728s}
.mx-lj7{--at:.82s}
.mx-j7{--at:.824s}
.mx-lc7{--at:.826s}
.mx-c7{--at:.83s}
.mx-ls7{--at:.832s}
.mx-s7{--at:.836s}
.mx-appr{--at:.882s}
.mx-p8{--at:.916s}
.mx-m1{--at:.918s}
.mx-lj8{--at:.922s}
.mx-j8{--at:.924s}
.mx-j8b{--at:.924s}
.mx-lc8{--at:.928s}
.mx-c8{--at:.93s}
.mx-ls8{--at:.934s}
.mx-s8{--at:.936s}
.mx-log > :nth-child(1){--at:.152s}
.mx-log > :nth-child(2){--at:.166s}
.mx-log > :nth-child(3){--at:.18s}
.mx-log > :nth-child(4){--at:.196s}
.mx-log > :nth-child(5){--at:.3s}
.mx-log > :nth-child(6){--at:.322s}
.mx-log > :nth-child(7){--at:.334s}
.mx-log > :nth-child(8){--at:.404s}
.mx-log > :nth-child(9){--at:.44s}
.mx-log > :nth-child(10){--at:.468s}
.mx-log > :nth-child(11){--at:.532s}
.mx-log > :nth-child(12){--at:.576s}
.mx-log > :nth-child(13){--at:.592s}
.mx-log > :nth-child(14){--at:.66s}
.mx-log > :nth-child(15){--at:.672s}
.mx-log > :nth-child(16){--at:.69s}
.mx-log > :nth-child(17){--at:.726s}
.mx-log > :nth-child(18){--at:.76s}
.mx-log > :nth-child(19){--at:.77s}
.mx-log > :nth-child(20){--at:.79s}
.mx-wk{--at:.296s}
.mx-wp{--at:.398s}
.mx-n1{--at:.636s}
.mx-n2{--at:.64s}
.mx-n3{--at:.644s}
.mx-n4{--at:.66s}
.mx-f1{--at:.412s}
.mx-f2{--at:.424s}
.mx-f3{--at:.436s}
.mx-f4{--at:.448s}
.mx-sh1{--at:.542s}
.mx-sh2{--at:.556s}
.mx-sh3{--at:.57s}
.mx-card .mx-cursor{--at:.02s}
.mx-pr .mx-cursor{--at:.878s}
.mx-card .mx-press{--at:.02s}
.mx-pr .mx-press{--at:.878s}
.mx-rj{--at:.824s}
.mx-rc{--at:.83s}
.mx-rs{--at:.836s}
.mx-gring{--at:.318s}
.ch:nth-child(2){--at:.123s}
.ch:nth-child(3){--at:.248s}
.ch:nth-child(4){--at:.373s}
.ch:nth-child(5){--at:.498s}
.ch:nth-child(6){--at:.623s}
.ch:nth-child(7){--at:.748s}
@media (prefers-reduced-motion: no-preference) {
  /* The stage's measures, shared with the closing line after it: the words' row (their tallest
     chapter, set to its bottom), the gap, the paddings, and how far the drawing may bleed. */
  .js :is(.run.is-scrub, .run.is-scrub + .footnote) { --row: 150px; --gap: 14px; --pt: 14px; --pb: 10px; --bleed: 48px; --cap: 1360px; }
  .js .run.is-scrub { height: 1500vh; }
  .js .is-scrub .run-stage {
    position: sticky; top: var(--under, 0px); height: calc(100svh - var(--under, 0px)); container-type: size;
    display: grid; grid-template-rows: var(--row) auto; align-content: center; gap: var(--gap); padding-block: var(--pt) var(--pb);
  }
  .js .is-scrub .run-intro, .js .is-scrub .run-chapters { grid-area: 1 / 1; justify-self: center; max-width: 58rem; margin: 0; text-align: center; }
  .js .is-scrub .run-intro { gap: 8px; }
  .js .is-scrub .run-intro .lede { max-width: none; font-size: clamp(.875rem, .8rem + .3vw, 1.0625rem); }
  .js .is-scrub .run-title, .js .is-scrub .ch h3 { max-width: none; font-size: clamp(1.375rem, .9rem + 1.2vw, 2.125rem); }
  .js .is-scrub .run-intro, .js .is-scrub .run-chapters, .js .is-scrub .ch { align-self: end; }
  .js .is-scrub .run-chapters { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .js .is-scrub .ch { grid-area: 1 / 1; gap: 8px; }
  .js .is-scrub .ch h3::before { content: none; }
  .js .is-scrub .ch p { justify-self: center; max-width: 50rem; font-size: clamp(.875rem, .8rem + .3vw, 1.0625rem); }
  @media (min-width: 960px) and (max-height: 820px) {
    .js :is(.run.is-scrub, .run.is-scrub + .footnote) { --row: 100px; --gap: 10px; --pt: 10px; --pb: 8px; }
    .js .is-scrub .run-title, .js .is-scrub .ch h3 { font-size: 1.625rem; }
    .js .is-scrub :is(.ch p, .run-intro .lede) { font-size: .9375rem; }
  }
  /* The drawing may be wider than the page's column, as wide as the stage's height allows once the
     words (--head, their tallest chapter and the gaps) are set above it; the pair is centred. */
  .js .is-scrub .mx-fit { grid-row: 2; width: 100vw; margin-inline: calc(50% - 50vw); display: grid; justify-items: center; }
  .js .is-scrub .mx { width: min(100% - var(--bleed), var(--cap), (100cqh - var(--row) - var(--gap)) * 1000 / 520); }
  /* The closing line comes up into the band the last frame leaves under the map (the map ends 115
     units above the drawing's foot), so the run ends on it rather than on a gap. --cw is the
     drawing's width, worked out as above from the window. */
  @media (min-width: 960px) {
    .js .is-scrub + .footnote {
      --cw: min(100vw - var(--bleed), var(--cap), (100svh - var(--under, 0px) - var(--pt) - var(--pb) - var(--row) - var(--gap)) * 1000 / 520);
      position: relative; max-width: 52rem; margin-inline: auto;
      margin-top: calc(-1 * (var(--pb) + (100svh - var(--under, 0px) - var(--pt) - var(--pb) - var(--row) - var(--gap) - .52 * var(--cw)) / 2 + .115 * var(--cw)));
    }
  }
  @media (max-width: 959.98px) {
    .js .is-scrub .run-stage { grid-template-rows: auto auto; }
    .js .is-scrub .mx { width: min(100% - 32px, 480px, (100cqh - 195px) * 360 / 580); }
    .js .is-scrub + .footnote { margin-top: 16px; }
  }
  .js .is-scrub .sc {
    animation: 1s linear both paused;
    animation-delay: calc(var(--at, 0s) - var(--p, 0) * 1s);
  }
  .js .is-scrub :is(.mx-jira, .mx-lj1, .mx-chat, .mx-lc1, .mx-c1, .mx-slack, .mx-ls1, .mx-s1, .mx-k1, .mx-v1, .mx-v2, .mx-v3, .mx-v4, .mx-sp1, .mx-sp2, .mx-sp3, .mx-sp4, .mx-gate, .mx-dec, .mx-tag, .mx-ag, .mx-port, .mx-hub, .mx-m0, .mx-h1, .mx-h2, .mx-h3, .mx-h4, .mx-g1, .mx-g2, .mx-fill-ok, .mx-lj7, .mx-j7, .mx-lc7, .mx-c7, .mx-ls7, .mx-s7, .mx-appr, .mx-p8, .mx-m1, .mx-lj8, .mx-j8, .mx-j8b, .mx-lc8, .mx-c8, .mx-ls8, .mx-s8, .mx-log > :nth-child(1), .mx-log > :nth-child(2), .mx-log > :nth-child(3), .mx-log > :nth-child(4), .mx-log > :nth-child(5), .mx-log > :nth-child(6), .mx-log > :nth-child(7), .mx-log > :nth-child(8), .mx-log > :nth-child(9), .mx-log > :nth-child(10), .mx-log > :nth-child(11), .mx-log > :nth-child(12), .mx-log > :nth-child(13), .mx-log > :nth-child(14), .mx-log > :nth-child(15), .mx-log > :nth-child(16), .mx-log > :nth-child(17), .mx-log > :nth-child(18), .mx-log > :nth-child(19), .mx-log > :nth-child(20)) { animation-name: mx-in; }
  .js .is-scrub :is(.mx-wk, .mx-wp, .mx-n1, .mx-n2, .mx-n3, .mx-n4) { animation-name: mx-draw; }
  .js .is-scrub :is(.mx-f1, .mx-f2, .mx-f3, .mx-f4) { animation-name: mx-fly; }
  .js .is-scrub :is(.mx-sh1, .mx-sh2, .mx-sh3) { animation-name: mx-sheet; }
  .js .is-scrub :is(.mx-card .mx-cursor, .mx-pr .mx-cursor) { animation-name: mx-cur; }
  .js .is-scrub :is(.mx-card .mx-press, .mx-pr .mx-press) { animation-name: mx-press; }
  .js .is-scrub :is(.mx-rj, .mx-rc, .mx-rs) { animation-name: mx-ping; }
  .js .is-scrub :is(.mx-gring) { animation-name: mx-ping1; }
  .js .is-scrub :is(.ch:nth-child(2), .ch:nth-child(3), .ch:nth-child(4), .ch:nth-child(5), .ch:nth-child(6), .ch:nth-child(7)) { animation-name: mx-ch; }
  .js .is-scrub :is(.run-intro) { animation-name: mx-title; }
  .js .is-scrub :is(.ch:nth-child(1)) { animation-name: mx-ch1; }
  .js .is-scrub :is(.ch:nth-child(8)) { animation-name: mx-ch8; }
  .js .is-scrub :is(.mx-card) { animation-name: mx-card; }
  .js .is-scrub :is(.mx-world) { animation-name: mx-world; }
  .js .is-scrub :is(.mx-vmg) { animation-name: mx-vmg; }
  .js .is-scrub :is(.mx-vaultg) { animation-name: mx-vaultg; }
  .js .is-scrub :is(.mx-ghg) { animation-name: mx-ghg; }
  .js .is-scrub :is(.mx-briefg) { animation-name: mx-briefg; }
  .js .is-scrub :is(.mx-netg) { animation-name: mx-netg; }
  .js .is-scrub :is(.mx-pr) { animation-name: mx-pr; }
  .js .is-scrub :is(.mx-ghost) { animation-name: mx-ghost; }
  .js .is-scrub :is(.mx-wj) { animation-name: mx-wj; }
  .js .is-scrub :is(.mx-wc) { animation-name: mx-wc; }
  .js .is-scrub :is(.mx-ws) { animation-name: mx-ws; }
  .js .is-scrub :is(.mx-dial) { animation-name: mx-dial; }
  .js .is-scrub :is(.mx-key) { animation-name: mx-key; }
  .js .is-scrub :is(.mx-flow) { animation-name: mx-flow; }
  .js .is-scrub :is(.mx-fill) { animation-name: mx-fill; }
  .js .is-scrub :is(.mx-log) { animation-name: mx-log; }
  @media (max-width: 959.98px) { .js .is-scrub .mx-log { animation-name: mx-log-p; } }
  @keyframes mx-in{0%{opacity:0;translate:0 calc(6 * var(--u))}1.2%,100%{opacity:1;translate:none}}
  @keyframes mx-draw{0%{stroke-dashoffset:1}1.2%,100%{stroke-dashoffset:0}}
  @keyframes mx-fly{0%{opacity:0;translate:none}.2%{opacity:1}1.1%{opacity:1;translate:calc(var(--fx) * var(--u)) calc(var(--fy) * var(--u))}1.3%,100%{opacity:0;translate:calc(var(--fx) * var(--u)) calc(var(--fy) * var(--u))}}
  @keyframes mx-sheet{0%{opacity:1;translate:none;scale:1}1.6%{opacity:.5;translate:calc(var(--fx) * var(--u)) calc(var(--fy) * var(--u));scale:.18}1.9%,100%{opacity:0;translate:calc(var(--fx) * var(--u)) calc(var(--fy) * var(--u));scale:.18}}
  @keyframes mx-cur{0%{opacity:0;translate:calc(130 * var(--u)) calc(70 * var(--u))}.6%{opacity:1}3%{translate:none;scale:1}3.3%{scale:.86}3.7%{scale:1}4.4%{opacity:1;translate:none}5.2%,100%{opacity:0;translate:none}}
  @keyframes mx-press{0%,3.2%{scale:1}3.4%,3.7%{scale:.93}3.9%,100%{scale:1}}
  @keyframes mx-ping{0%{opacity:0;scale:.97}.4%{opacity:1}2.6%,10%{opacity:0;scale:1.08}10.01%{opacity:0;scale:.97}10.4%{opacity:1}12.6%,100%{opacity:0;scale:1.08}}
  @keyframes mx-ping1{0%{opacity:0;scale:.97}.4%{opacity:1}2.6%,100%{opacity:0;scale:1.1}}
  @keyframes mx-ch{0%{opacity:0;translate:0 12px}1%,12.3%{opacity:1;translate:none}13.3%,100%{opacity:0;translate:0 -12px}}
  @keyframes mx-title{0%,.8%{opacity:1;translate:none}1.6%,100%{opacity:0;translate:0 -12px}}
  @keyframes mx-ch1{0%{opacity:0;translate:0 12px}1.8%{opacity:0;translate:0 12px}2.8%{opacity:1;translate:none}12.1%{opacity:1;translate:none}13.1%{opacity:0;translate:0 -12px}100%{opacity:0;translate:0 -12px}}
  @keyframes mx-ch8{0%{opacity:0;translate:0 12px}87.3%{opacity:0;translate:0 12px}88.3%{opacity:1;translate:none}100%{opacity:1;translate:none}}
  @keyframes mx-card{0%{opacity:1;scale:var(--card-in, 1.2)}1.8%,12.8%{opacity:1;scale:1}13.6%,100%{opacity:0;scale:.96}}
  @keyframes mx-world{0%{opacity:0}6.2%{opacity:0}6.4%{opacity:1}12.8%{opacity:1}13.6%{opacity:0}80.3%{opacity:0}81%{opacity:1}100%{opacity:1}}
  @keyframes mx-vmg{0%{opacity:0;scale:.97}13.4%{opacity:0;scale:.97}14.6%{opacity:1;scale:1}79.5%{opacity:1;scale:1}80.8%{opacity:0;scale:.96}100%{opacity:0;scale:.96}}
  @keyframes mx-vaultg{0%{opacity:0}25.4%{opacity:0}26.4%{opacity:1}38.3%{opacity:1}39%{opacity:0}100%{opacity:0}}
  @keyframes mx-ghg{0%{opacity:0}38.6%{opacity:0}39.6%{opacity:1}50.8%{opacity:1}51.5%{opacity:0}100%{opacity:0}}
  @keyframes mx-briefg{0%{opacity:0}51.1%{opacity:0}52%{opacity:1}62.6%{opacity:1}63.4%{opacity:0}100%{opacity:0}}
  @keyframes mx-netg{0%{opacity:0}63.2%{opacity:0}64.2%{opacity:1}75.5%{opacity:1}76.2%{opacity:0}100%{opacity:0}}
  @keyframes mx-pr{0%{opacity:0;translate:0 calc(40 * var(--u));scale:.9}77.6%{opacity:0;translate:0 calc(40 * var(--u));scale:.9}79%{opacity:1;translate:none;scale:1}100%{opacity:1;translate:none;scale:1}}
  @keyframes mx-ghost{0%{opacity:0}79.7%{opacity:0}80.3%{opacity:1}82.6%{opacity:1}84%{opacity:0}100%{opacity:0}}
  @keyframes mx-wj{0%,6.4%{stroke-dashoffset:1}7.4%,13.6%{stroke-dashoffset:0}13.7%,81.2%{stroke-dashoffset:1}82.2%,100%{stroke-dashoffset:0}}
  @keyframes mx-wc{0%,7.8%{stroke-dashoffset:1}8.8%,13.6%{stroke-dashoffset:0}13.7%,81.8%{stroke-dashoffset:1}82.8%,100%{stroke-dashoffset:0}}
  @keyframes mx-ws{0%,9.2%{stroke-dashoffset:1}10.2%,13.6%{stroke-dashoffset:0}13.7%,82.4%{stroke-dashoffset:1}83.4%,100%{stroke-dashoffset:0}}
  @keyframes mx-dial{0%,27.6%{rotate:0deg}29.2%,100%{rotate:120deg}}
  @keyframes mx-key{0%,29.8%{opacity:0;translate:calc(var(--kx) * var(--u)) calc(var(--ky) * var(--u));scale:.7}30.2%{opacity:1}31.8%,100%{opacity:1;translate:none;scale:1}}
  @keyframes mx-flow{0%,65%{opacity:0;stroke-dashoffset:0}65.4%{opacity:1}74.5%{opacity:1;stroke-dashoffset:-1.6}75%,100%{opacity:0;stroke-dashoffset:-1.6}}
  @keyframes mx-fill{0%,64.8%{scale:0 1}72.6%,100%{scale:1 1}}
  @keyframes mx-log{0%{translate:none}69%{translate:0 calc(0 * var(--lh))}69.6%{translate:0 calc(-1 * var(--lh))}72.6%{translate:0 calc(-1 * var(--lh))}73.2%{translate:0 calc(-2 * var(--lh))}76%{translate:0 calc(-2 * var(--lh))}76.6%{translate:0 calc(-3 * var(--lh))}77%{translate:0 calc(-3 * var(--lh))}77.6%{translate:0 calc(-4 * var(--lh))}79%{translate:0 calc(-4 * var(--lh))}79.6%{translate:0 calc(-5 * var(--lh))}100%{translate:0 calc(-5 * var(--lh))}}
  @keyframes mx-log-p{0%{translate:none}66%{translate:0 calc(0 * var(--lh))}66.6%{translate:0 calc(-1 * var(--lh))}67.2%{translate:0 calc(-1 * var(--lh))}67.8%{translate:0 calc(-2 * var(--lh))}69%{translate:0 calc(-2 * var(--lh))}69.6%{translate:0 calc(-3 * var(--lh))}72.6%{translate:0 calc(-3 * var(--lh))}73.2%{translate:0 calc(-4 * var(--lh))}76%{translate:0 calc(-4 * var(--lh))}76.6%{translate:0 calc(-5 * var(--lh))}77%{translate:0 calc(-5 * var(--lh))}77.6%{translate:0 calc(-6 * var(--lh))}79%{translate:0 calc(-6 * var(--lh))}79.6%{translate:0 calc(-7 * var(--lh))}100%{translate:0 calc(-7 * var(--lh))}}
}