/* stepsim.com, the public site (blueprint section 14; D31). Visual direction
   from the owner, 1 October 2026: as close as possible to the live
   stepsim.com, real images of the product and micro-animation. Revised the
   same day: no photographs of people; the explainer's illustrated scenes,
   animation and effects instead (D44). The live site's system, rebuilt here on the brand tokens:
   a white canvas with lavender bands, near-black ink, violet actions, pill
   controls, product evidence in console frames. Motion plays once, moves only
   opacity and transform, and honours prefers-reduced-motion. */
@import url("../platform/brand/tokens.css");

/* Inter's metrics on a local fallback, so the swap to Inter moves nothing
   (measured on the vendored Inter 5.3 against Arial: fontTools, 2 Oct 2026).
   Every page also preloads the Inter file. Here, not in tokens.css, which
   the product loads too. */
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 106.64%; ascent-override: 90.85%; descent-override: 22.62%; line-gap-override: 0%; }
/* Motion tokens (assessment D): every entry rises --rise over --t-enter; lines
   draw over --t-draw; staggers step --t-step, at most four steps. Text is in
   place by 700 ms; a mark with no text by 1,000 ms. Everything plays once. */
:root { --t-press: 90ms; --t-reveal: 450ms; --t-draw: 600ms; --t-step: 60ms; --rise: 12px; --ease-draw: cubic-bezier(.65, 0, .35, 1); --ease-spring: cubic-bezier(.34, 1.4, .64, 1); }
:root { --film-wall: #ebe6f1; }
:root { --sans: Inter, "Inter Fallback", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; overflow-x: clip; color: var(--ink); background: #fff; font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, p, ul, ol, figure { margin: 0; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; z-index: 50; top: 10px; left: 16px; padding: 8px 14px; border-radius: var(--r-pill); color: #fff; background: var(--ink); transform: translateY(-160%); text-decoration: none; }
.skip-link:focus { transform: none; }
.shell { width: min(1240px, calc(100% - 48px)); margin: 0 auto; }
section[id] { scroll-margin-top: 92px; }
/* Pages cross-fade into each other; the nav stays put. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .nav { view-transition-name: site-nav; }
  ::view-transition-group(site-nav), ::view-transition-old(site-nav), ::view-transition-new(site-nav) { animation: none; }
  ::view-transition-old(root) { animation: 160ms var(--ease-std) both vt-out; }
  ::view-transition-new(root) { animation: 240ms var(--ease-out) both vt-in; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 40; background: rgb(255 255 255 / 93%); backdrop-filter: saturate(1.5) blur(12px); box-shadow: 0 1px 0 var(--card-line-soft); transition: box-shadow var(--t-base) var(--ease-std); }
.nav.is-scrolled { box-shadow: 0 1px 0 var(--card-line-soft), 0 10px 30px rgba(42, 33, 70, .06); }
.nav-inner > nav { margin-right: auto; }
.nav-menu { display: none; }
.nav-inner { display: flex; align-items: center; gap: 24px; height: 76px; }
.brand-logo { flex: none; }
.brand-logo img { width: 112px; height: auto; }
.nav-links { display: flex; align-items: center; gap: 2px; margin: 0 auto 0 8px; padding: 0; list-style: none; }
.nav-links a { display: inline-flex; padding: 8px 13px; border-radius: var(--r-pill); color: var(--ink-2); font-size: .9rem; font-weight: 550; text-decoration: none; white-space: nowrap; transition: color var(--t-fast), background-color var(--t-fast); }
.nav-links a:hover { color: var(--ink); background: var(--bg-sunken); }
.nav-links a[aria-current="page"] { color: var(--accent-press); background: var(--accent-soft); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 24px; border: 1px solid var(--card-line); border-radius: var(--r-pill); color: var(--ink); background: #fff; font: 600 15px/1.2 var(--sans); letter-spacing: -.005em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-base), background-color var(--t-fast), border-color var(--t-fast); }
.btn:hover { border-color: var(--accent-line); box-shadow: 0 8px 22px rgba(42, 33, 70, .08); }
.btn:active { transform: scale(.97); transition-duration: var(--t-press); }
.btn-primary { position: relative; border-color: var(--accent); color: #fff; background: var(--accent); box-shadow: 0 10px 28px rgba(109, 40, 217, .18), inset 0 1px 0 rgba(255, 255, 255, .24); }
.btn-primary:hover { border-color: var(--accent-hover); background: var(--accent-hover); box-shadow: 0 14px 34px rgba(109, 40, 217, .28), inset 0 1px 0 rgba(255, 255, 255, .24); }
.btn-sm { min-height: 40px; padding: 8px 18px; font-size: 14px; }
.btn-dark { border-color: rgb(255 255 255 / 40%); color: #fff; background: transparent; }
.btn-dark:hover { border-color: rgb(255 255 255 / 70%); background: rgb(255 255 255 / 8%); }
/* On a dark band the primary action is white with ink text. */
:is(.cta, .band) .btn-primary { border-color: #fff; color: var(--ink); background: #fff; box-shadow: none; }
:is(.cta, .band) .btn-primary:hover { border-color: #fff; background: var(--accent-soft); }
/* The focus ring wins over every button's own shadow. */
.btn:focus-visible, :is(.cta, .band) .btn-primary:focus-visible { box-shadow: var(--focus); }
.arrow { display: inline-block; transition: transform var(--t-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .arrow, .text-link:hover .arrow { transform: translateX(4px); }
}
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-press); font-weight: 650; text-decoration: none; }
.text-link:hover { color: var(--accent); }

/* ---------- Type ---------- */
.eyebrow { display: flex; align-items: center; gap: 10px; width: fit-content; color: var(--accent-press); font-size: .74rem; font-weight: 650; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
.eyebrow::before { content: ""; flex: none; width: 18px; height: 2px; border-radius: 1px; background: var(--accent); }
.eyebrow-plain::before { display: none; }
.display { margin-top: 22px; max-width: 11em; font-size: clamp(2.6rem, 5vw, 4.5rem); font-weight: 650; letter-spacing: -.048em; line-height: 1; text-wrap: balance; }
.grad { color: transparent; background: linear-gradient(90deg, var(--accent-press) 0%, var(--brand) 100%); -webkit-background-clip: text; background-clip: text; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lead { margin-top: 24px; max-width: 34em; color: var(--ink-2); font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.62; }
.title { margin-top: 18px; max-width: 19em; font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 650; letter-spacing: -.035em; line-height: 1.07; text-wrap: balance; }
.sub { margin-top: 18px; max-width: 42em; color: var(--ink-2); font-size: 1.08rem; line-height: 1.64; }
.note { margin-top: 28px; max-width: 40em; padding-left: 16px; border-left: 2px solid var(--accent-line); color: var(--muted); font-size: .9rem; line-height: 1.58; }

/* ---------- Sections ---------- */
.section { position: relative; padding: clamp(64px, 7vw, 96px) 0; }
.section-soft { background: var(--bg-page); }
.section-head { max-width: 800px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head-center { margin-inline: auto; text-align: center; }
.section-head-center .eyebrow { margin-inline: auto; }
.section-head-center .title, .section-head-center .sub { margin-inline: auto; }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(56px, 7vw, 96px) 0 clamp(72px, 8vw, 112px); background: linear-gradient(135deg, #fff 0%, var(--bg-page-soft) 48%, var(--pastel-mist) 100%); }
.hero::before, .hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.hero::before { top: -260px; right: 4%; width: 520px; height: 520px; background: radial-gradient(circle, rgba(221, 210, 255, .5) 0%, transparent 67%); }
.hero::after { right: -180px; bottom: -300px; width: 560px; height: 560px; background: radial-gradient(circle, rgba(139, 92, 246, .16) 0%, transparent 68%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(40px, 6vw, 80px); align-items: center; }
.hero .btn-row { margin-top: 34px; }
.hero-page .display { max-width: 13em; font-size: clamp(2.4rem, 4.4vw, 3.9rem); }

/* Product evidence frame: a real capture of the build, in a window. */
.console { position: relative; border: 1px solid var(--card-line); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-float); }
.console-bar { display: flex; justify-content: space-between; gap: 12px; padding: 13px 18px; border-radius: calc(var(--r-xl) - 1px) calc(var(--r-xl) - 1px) 0 0; color: rgb(255 255 255 / 72%); background: var(--ink); font: 500 .72rem/1.3 var(--mono); }
.console-bar span:first-child::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--brand); }
.console-shot { overflow: hidden; border-radius: 0 0 calc(var(--r-xl) - 1px) calc(var(--r-xl) - 1px); }
.console-shot img { width: 100%; height: auto; }
.console-cap { margin-top: 30px; color: var(--muted); font-size: .82rem; text-align: center; }

.stage { position: relative; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--r-pill); color: var(--accent-press); background: var(--accent-soft); font-size: .68rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.pill-warn { color: var(--warn); background: var(--warn-bg); }
.pill-dark { color: #fff; background: rgb(255 255 255 / 12%); }
.dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--accent-soft); }

/* ---------- Trust strip ---------- */
.strip { border-block: 1px solid var(--card-line-soft); background: #fff; }
.strip ul.shell { margin-inline: auto; }
.strip ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px; margin: 0; padding: 22px 0; list-style: none; }
.strip li { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: .9rem; font-weight: 550; }
.strip li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }

/* ---------- Splits, photos and cards ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 88px); align-items: center; }
.split-wide { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
/* A chat thread over a scene, as in the explainer: bubbles arrive in turn. */
.chat { position: absolute; top: 18px; right: 18px; left: 18px; display: grid; gap: 10px; justify-items: end; }
.bubble { max-width: 260px; margin: 0; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: #fff; box-shadow: var(--shadow-float); font-size: 13px; line-height: 1.4; }
.bubble strong { display: block; margin-bottom: 2px; color: var(--accent-press); font-size: 11.5px; letter-spacing: .02em; }
.bubble em { display: block; margin-top: 4px; color: var(--muted); font-style: normal; font-weight: 600; }
.bubble-in { justify-self: start; border-radius: 16px 16px 16px 4px; background: var(--accent-soft); }
.bubble-typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.bubble-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
/* A photo with a product card overlapping its corner. */
.combo { position: relative; padding: 0 0 56px 0; }
.combo .console { position: absolute; right: -16px; bottom: 0; width: 64%; }

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: clamp(24px, 3vw, 32px); overflow: hidden; border: 1px solid var(--card-line); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-card); transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
/* Only a card that is one link lifts, and only under a mouse. */
@media (hover: hover) and (pointer: fine) {
  .card:is(.bl-card, .card-link):hover { border-color: var(--accent-line); box-shadow: var(--shadow-lift); transform: translateY(-3px); }
}
.card h3 { margin: 16px 0 10px; font-size: clamp(1.2rem, 1.8vw, 1.42rem); font-weight: 650; letter-spacing: -.025em; line-height: 1.2; }
.card p { color: var(--ink-2); line-height: 1.63; }
.card .text-link { margin-top: auto; padding-top: 20px; }
.card-photo { padding: 0; }
.card-photo > img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.card .pill { align-self: flex-start; }
.card-photo .card-body { display: flex; flex: 1; flex-direction: column; padding: 24px 26px 28px; }
.card-photo .card-body h3 { margin-top: 12px; }
.card-dark { border-color: transparent; color: #fff; background: radial-gradient(circle at 85% 15%, rgba(139, 92, 246, .42), transparent 34%), linear-gradient(145deg, var(--ink) 0%, var(--navy-2) 100%); box-shadow: var(--shadow-card-lg); }
.card-dark p { color: var(--on-dark-muted); }
.card-dark .pill { color: #fff; background: rgb(255 255 255 / 12%); }
.card-num::before { content: attr(data-n); color: var(--accent-press); font: 700 .78rem/1 var(--mono); letter-spacing: .06em; }
.ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: var(--accent); background: var(--accent-soft); }
.ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Check list. */
.checks { display: grid; gap: 12px; margin-top: 24px; padding: 0; list-style: none; }
.checks li { position: relative; padding-left: 30px; color: var(--ink-2); line-height: 1.57; }
.checks li::before { content: "\2713"; position: absolute; top: .2em; left: 0; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--accent-press); background: var(--accent-soft); font-size: .7rem; font-weight: 850; }
.checks-x li::before { content: "\2715"; }

/* Trace rows: what a person did, as the record lists it. */
.traces { display: grid; gap: 8px; margin-top: 22px; }
.trace-row { display: grid; grid-template-columns: 92px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--card-line-soft); border-radius: var(--r-md); background: var(--bg-page-soft); font-size: .88rem; }
.trace-row span { color: var(--muted); font: 650 .68rem/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.trace-row strong { font-weight: 600; }
.trace-row.is-skip { border-style: dashed; background: #fff; }
.trace-row.is-skip strong { color: var(--muted); font-weight: 500; }
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.compare .card { padding: 24px; }
.compare h3 { display: flex; align-items: center; justify-content: space-between; margin: 0; font-size: 1.05rem; }
.compare .result { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--card-line); color: var(--ink); font-size: .9rem; font-weight: 600; }

/* Method rail. */
.rail { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: rail; }
.rail::before { content: ""; position: absolute; z-index: 0; top: 41px; right: 10%; left: 10%; height: 2px; background: var(--gradient-rail); transform-origin: left; }
.rail li { position: relative; z-index: 1; padding: 24px 22px 26px; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-card); counter-increment: rail; }
.rail li::before { content: "0" counter(rail); display: inline-grid; place-items: center; width: 36px; height: 36px; margin-bottom: 18px; border-radius: 50%; color: #fff; background: var(--accent); box-shadow: 0 0 0 6px var(--accent-soft); font: 700 .7rem/1 var(--mono); }
.rail strong { display: block; font-size: 1.02rem; font-weight: 650; line-height: 1.35; }
.rail span { display: block; margin-top: 8px; color: var(--ink-2); font-size: .92rem; line-height: 1.55; }
.rail-9 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rail-9::before { display: none; }

/* ---------- Dark band ---------- */
.band { position: relative; isolation: isolate; overflow: hidden; padding: clamp(72px, 8vw, 112px) 0; color: #fff; background: linear-gradient(135deg, var(--ink) 0%, var(--navy-2) 100%); }
.band .eyebrow { color: #ddd6fe; }
.band .eyebrow::before { background: #c4b5fd; }
.band .title { color: #fff; }
.band .sub { color: var(--on-dark-muted); }
.band-quote { max-width: 22em; margin-top: 20px; font-size: clamp(1.7rem, 3.4vw, 3rem); font-weight: 650; letter-spacing: -.035em; line-height: 1.12; }
.band-quote + .sub { margin-top: 22px; }
.video { margin: 0; padding: 10px; border: 1px solid rgb(255 255 255 / 14%); border-radius: var(--r-2xl); background: rgb(255 255 255 / 6%); box-shadow: 0 40px 80px -30px rgb(0 0 0 / 60%); }
.video video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-lg); background: #000; }
.video-fallback { display: none; place-items: center; aspect-ratio: 16 / 9; border-radius: var(--r-lg); color: #fff; background: var(--gradient-hero); font-weight: 600; text-align: center; }
.video[data-video="missing"] video { display: none; }
.video[data-video="missing"] .video-fallback { display: grid; }
.video figcaption { margin-top: 10px; padding: 0 6px 4px; color: var(--on-dark-faint); font-size: .8rem; }

/* People row. */
.faces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.faces li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: #fff; color: var(--muted); font-size: .84rem; line-height: 1.35; }
.faces img { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--bg-sunken); }
.faces strong { display: block; color: var(--ink); font-size: .95rem; }

/* Table. */
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th, .table td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--card-line); color: var(--ink-2); text-align: left; vertical-align: top; line-height: 1.5; }
.table thead th { color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.table tbody th { color: var(--accent-press); font: 700 .8rem/1.6 var(--mono); white-space: nowrap; }
.table-wrap { padding: 8px 28px 12px; border: 1px solid var(--card-line); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-card); }
.table tbody tr:last-child > * { border-bottom: 0; }

/* Prose for policy pages. */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 44px; font-size: 1.4rem; font-weight: 650; letter-spacing: -.02em; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-2); line-height: 1.7; }
.prose p { margin-top: 12px; }
.prose ul { margin-top: 12px; padding-left: 22px; }
.prose li + li { margin-top: 8px; }
.prose a { color: var(--accent-press); text-underline-offset: 3px; }

/* ---------- CTA and footer ---------- */
.cta { position: relative; isolation: isolate; overflow: hidden; padding: clamp(48px, 6vw, 72px); border-radius: var(--r-2xl); color: #fff; background: var(--accent-deep); }
.cta-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.cta h2 { max-width: 16em; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 650; letter-spacing: -.035em; line-height: 1.1; }
.cta p { margin-top: 14px; max-width: 34em; color: var(--on-dark-muted); line-height: 1.6; }
.cta .btn-row { justify-content: flex-end; }
.cta-photo { position: absolute; z-index: -1; inset: 0 0 0 auto; width: 42%; object-fit: cover; opacity: .18; mask-image: linear-gradient(90deg, transparent, #000 60%); }

.footer { padding: 64px 0 40px; border-top: 1px solid var(--card-line-soft); background: var(--bg-page-soft); color: var(--muted); font-size: .9rem; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: 32px; }
.footer img { width: 112px; height: auto; margin-bottom: 14px; }
.footer p { max-width: 30em; line-height: 1.6; }
.footer h2 { margin-bottom: 12px; color: var(--ink); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.footer ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.footer a { color: var(--ink-2); text-decoration: none; }
.footer a:hover { color: var(--accent-press); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--card-line); font-size: .82rem; }

/* ---------- Motion ---------- */
/* Scroll reveal: only when the script is running, so nothing is hidden
   without it. Each block rises once, staggered by --i (at most four steps).
   A reveal takes --t-reveal, so four stagger steps still land by 690 ms.
   Transitions live on the arrived state only, so nothing animates on load
   or on the way out. A click or key press lands what is moving (site.mjs). */
.js [data-reveal] { opacity: 0; transform: translateY(var(--rise)); }
.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); transition-delay: calc(min(var(--i, 0), 4) * var(--t-step)); }
.js .rail[data-reveal]::before { transform: scaleX(0); }
.js .rail[data-reveal].is-in::before { transform: scaleX(1); transition: transform var(--t-draw) var(--ease-draw) 200ms; }
.js .traces[data-reveal] .trace-row { opacity: 0; transform: translateX(-10px); }
.js .traces[data-reveal].is-in .trace-row { opacity: 1; transform: none; transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); transition-delay: calc(100ms + min(var(--r, 0), 4) * var(--t-step)); }
.js .is-done, .js .is-done *, .js .is-done::before, .js .is-done *::before, .js .is-done *::after { transition: none !important; animation: none !important; }

/* Hero entry: the copy is static from the first paint (it is what the visitor
   reads, and the largest paint); only the stage beside it rises, once. */
@keyframes rise { from { opacity: 0; transform: translateY(var(--rise)); } to { opacity: 1; transform: none; } }
@keyframes blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes settle { from { transform: scale(1.08); } to { transform: none; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
.stage .console { animation: rise 450ms var(--ease-out) 100ms both; }
.js [data-reveal] .bubble { opacity: 0; transform: translateY(8px); }
.js [data-reveal].is-in .bubble { opacity: 1; transform: none; transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); transition-delay: calc(min(var(--b, 0), 4) * 120ms); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal], .js .traces[data-reveal] .trace-row { opacity: 1; transform: none; }
  .js .rail[data-reveal]::before { transform: none; }
  .js [data-reveal] .bubble { opacity: 1; transform: none; }
}

/* ---------- Layout ---------- */
@media (max-width: 1080px) {
  .hero-grid, .split, .split-wide, .cta-grid { grid-template-columns: minmax(0, 1fr); }
  .cta .btn-row { justify-content: flex-start; }
  .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rail::before { display: none; }
  .faces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .hero { padding-top: 56px; }
  .grid-3, .grid-2, .compare, .rail-9 { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .shell { width: calc(100% - 32px); }
  .display { font-size: clamp(2.3rem, 10vw, 3rem); }
  .rail, .faces { grid-template-columns: minmax(0, 1fr); }
  .chat { top: auto; right: 12px; bottom: 60px; left: 12px; gap: 8px; }
  .bubble { max-width: 220px; padding: 8px 12px; font-size: 12px; }
  .combo { padding-bottom: 0; }
  .combo .console { position: relative; right: auto; width: 100%; margin-top: -48px; }
  .strip ul { flex-direction: column; align-items: flex-start; gap: 10px; }
  .trace-row { grid-template-columns: 1fr auto; }
  .trace-row span { grid-column: 1 / -1; }
  .table thead { display: none; }
  .table tr { display: grid; padding: 12px 0; border-bottom: 1px solid var(--card-line); }
  .table th, .table td { padding: 2px 0; border: 0; }
  .table-wrap { padding: 4px 20px; }
  .cta { padding: 32px 24px; }
  .btn { white-space: normal; text-align: center; }
  .footer a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer ul { gap: 0; }
}

/* Comparison cards are narrow: a tighter trace row. */
.compare .trace-row { grid-template-columns: 58px 1fr; gap: 8px; padding: 9px 12px; font-size: .84rem; }
.compare .trace-row span { font-size: .62rem; }

/* ======================================================================
   Fifth build, shared layer (copy deck, 2 October 2026, sections 3 and 4).
   Everything below plays once, moves only opacity and transform, and has a
   reduced-motion state with no animation or transition at all. Page agents
   add their own CSS only in a marked block at the very end of this file:
   / * page: <name> * / ... / * end page: <name> * /
   ====================================================================== */

[hidden] { display: none !important; }
/* A revealed block stays the offset parent it was while it moved, so the
   reveal never changes a layout box (visual check e). Zero specificity: any
   page rule that positions the block wins. */
:where(.js [data-reveal]) { position: relative; }
/* Dark cards keep a dark base colour under their gradients (contrast check c). */
.card-dark { background-color: var(--ink); }

/* ---------- Nav under 1100 px: one 56 px sticky bar, the call button and a Menu ----------
   Six links (WEBSITE_EXPANSION_PLAN.md section 4) need about 1080 px.
   The menu is a native <details>, so it opens without the script; site.mjs
   only closes it on Escape, on a link and on a tap outside. */
@media (max-width: 1100px) {
  .nav-inner { position: relative; gap: 10px; height: 56px; }
  .nav-inner > nav { display: none; }
  .brand-logo img { width: 100px; }
  .nav .btn { margin-left: auto; min-height: 40px; padding: 8px 14px; font-size: 14px; }
  .nav-menu { display: block; }
  .nav-menu summary { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: var(--r-pill); color: var(--ink); font-size: .9rem; font-weight: 600; list-style: none; cursor: pointer; }
  .nav-menu summary::-webkit-details-marker { display: none; }
  .nav-menu[open] summary { background: var(--bg-sunken); }
  .nav-menu ul { position: absolute; top: 56px; right: -16px; left: -16px; display: grid; margin: 0; padding: 8px 16px 14px; border-bottom: 1px solid var(--card-line); background: #fff; box-shadow: 0 18px 30px rgba(42, 33, 70, .08); list-style: none; }
  .nav-menu a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--card-line-soft); color: var(--ink); font-weight: 600; text-decoration: none; }
  .nav-menu li:last-child a { border-bottom: 0; }
  .nav-menu a[aria-current="page"] { color: var(--accent-press); }
  section[id] { scroll-margin-top: 72px; }
}
@media (max-width: 720px) {
  .hero { padding-top: 28px; }
  .page-top { padding-top: 40px; }
}

/* ---------- Small shared pieces ---------- */
.strip li { align-items: flex-start; }
.strip li::before { flex: none; margin-top: .5em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.chips li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--card-line); border-radius: var(--r-pill); background: #fff; color: var(--ink-2); font-size: .86rem; font-weight: 550; }
.chips li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.quiet-link { display: inline-block; margin-top: 16px; color: var(--accent-press); font-size: .92rem; font-weight: 600; text-underline-offset: 3px; }
.mono-k { color: var(--muted); font: 600 .74rem/1.4 var(--mono); letter-spacing: .04em; }
.fineprint { margin-top: 28px; max-width: 60em; color: var(--muted); font: 500 .76rem/1.55 var(--mono); }
.footnote { margin-top: 28px; max-width: 60em; color: var(--ink-2); font-size: .92rem; line-height: 1.62; }
.link-row { margin-top: 32px; }
.pill-solid { color: #fff; background: var(--accent); }
.pill-ink { color: #fff; background: var(--ink); }
.close-quote { margin-top: clamp(48px, 6vw, 72px); max-width: 40em; padding-left: 20px; border-left: 3px solid var(--accent); font-size: clamp(1.15rem, 1.7vw, 1.35rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.4; }
.nowrap { white-space: nowrap; }

/* ---------- Illustration: a scene with its "Illustrative scene" tag ---------- */
.scene { position: relative; overflow: hidden; margin: 0; aspect-ratio: 1600 / 907; border-radius: var(--r-2xl); background: var(--bg-sunken); box-shadow: var(--shadow-card-lg); }
.scene > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.scene-tall { aspect-ratio: 4 / 5; }
.scene-tag { position: absolute; z-index: 1; top: 12px; left: 12px; padding: 5px 10px; border-radius: 0; color: var(--ink); background: #fff; font: 600 .72rem/1.2 var(--sans); letter-spacing: 0; }
.scene-wrap { margin: 0; }
.scene-cap { margin-top: 12px; color: var(--muted); font: 500 .78rem/1.5 var(--mono); }
.js .scene[data-reveal] > img, .js [data-reveal] .scene > img { transform: scale(1.03); }
.js .scene[data-reveal].is-in > img, .js [data-reveal].is-in .scene > img { transform: none; transition: transform var(--t-draw) var(--ease-out); }

/* ---------- Capture: a real product screen, its console bar and its caption ---------- */
.capture { margin: 0; }
.capture-cap { margin-top: 14px; color: var(--muted); font: 500 .78rem/1.5 var(--mono); }
.crop { position: relative; overflow: hidden; aspect-ratio: var(--cw) / var(--ch); border-radius: 0 0 calc(var(--r-xl) - 1px) calc(var(--r-xl) - 1px); background: #fff; }
.crop > img { position: absolute; max-width: none; width: calc(var(--iw) / var(--cw) * 100%); height: auto; left: calc(var(--cx) / var(--cw) * -100%); top: calc(var(--cy) / var(--ch) * -100%); }
/* Where a line of the capture runs on past the crop, its edge fades to say so. */
.crop[data-fade="all"]::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 64px; background: linear-gradient(90deg, rgb(255 255 255 / 0%), rgb(255 255 255 / 92%)); pointer-events: none; }
@media (max-width: 720px) {
  .crop[data-fade="sm"]::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 48px; background: linear-gradient(90deg, rgb(255 255 255 / 0%), rgb(255 255 255 / 92%)); pointer-events: none; }
}
/* A phone window of its own: inline custom properties cannot be overridden from a
   media query, so a crop that carries a -sm set reads it here, at most 610 source
   pixels wide, so product text stays at 12 px or more. */
@media (max-width: 720px) {
  .crop[style*="--cw-sm"] { aspect-ratio: var(--cw-sm) / var(--ch-sm); }
  .crop[style*="--cw-sm"] > :is(img, .marks) { width: calc(var(--iw) / var(--cw-sm) * 100%); left: calc(var(--cx-sm) / var(--cw-sm) * -100%); top: calc(var(--cy-sm) / var(--ch-sm) * -100%); }
}
.combo:has(.capture-cap) { padding-bottom: 96px; }
.combo .capture { position: absolute; z-index: 1; right: -16px; bottom: 0; width: 72%; }
.console-bar { flex-wrap: wrap; row-gap: 2px; }
.combo .capture .console { position: relative; right: auto; bottom: auto; width: auto; }
.combo .capture-cap { padding: 8px 12px; border-radius: var(--r-md); background: #fff; box-shadow: var(--shadow-card); }

/* ---------- Home hero (H-1, H-5): the copy beside the film ----------
   The copy is static. The film box is in the HTML from the first byte, sized
   by the first screen's height, and plays only on a click. */
.hero-home .hero-grid { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy film" "meta film"; grid-template-rows: auto 1fr; row-gap: 0; align-items: start; }
.hero-home .hero-copy { grid-area: copy; align-self: end; }
.hero-home .hero-film { grid-area: film; width: clamp(400px, calc((100svh - 200px) * .8), 560px); }
.hero-home .hero-meta { grid-area: meta; }
/* ---------- Proof band (H-7 with B1): one readable real screen ----------
   It reveals as it enters view. The capture lifts once, then three marks and
   their notes arrive; all done by 640 ms. Any click, key press or mouse press
   lands it at once. */
.proof-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.proof-grid .section-head { margin-bottom: 0; }
.proof-shot { margin: 0; }
.proof-shot .console::before { display: none; }
.proof-band .shots-k { margin-top: clamp(40px, 5vw, 56px); }
.crop > .marks { position: absolute; max-width: none; width: calc(var(--iw) / var(--cw) * 100%); height: auto; aspect-ratio: 2160 / 1215; left: calc(var(--cx) / var(--cw) * -100%); top: calc(var(--cy) / var(--ch) * -100%); overflow: visible; pointer-events: none; }
.marks .mark { transform-box: fill-box; transform-origin: center; }
.marks ellipse, .marks rect { fill: none; stroke: var(--ink); stroke-width: 3; vector-effect: non-scaling-stroke; }
.marks .mark-bar { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.marks .pin circle { fill: var(--ink); }
.marks .pin text { fill: #fff; font: 600 18px/1 var(--mono); text-anchor: middle; }
.legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.legend li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--card-line); border-radius: var(--r-md); background: #fff; color: var(--ink-2); font-size: .82rem; line-height: 1.4; }
.legend strong { color: var(--ink); font-weight: 650; }
.legend q { color: var(--ink); font-weight: 650; quotes: "\201C" "\201D"; }
.pin-k { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; background: var(--ink); font: 600 .7rem/1 var(--mono); }
.ai-chip { display: inline-block; padding: 1px 6px; border-radius: 6px; color: #334155; background: #e2e8f0; font: 600 .66rem/1.5 var(--sans); letter-spacing: .02em; vertical-align: 1px; }
.quiet-links { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 18px; font-size: .92rem; }
.quiet-links a { color: var(--accent-press); font-weight: 600; text-underline-offset: 3px; }
.quiet-links a[hidden] { display: none; }
.quiet-links a:not([hidden]) ~ a:not([hidden])::before { content: "\00B7"; display: inline-block; padding: 0 10px; color: var(--muted); }
.facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 18px 0 0; padding: 0; list-style: none; color: var(--ink-2); font-size: .88rem; }
.facts li { display: inline-flex; align-items: baseline; gap: 8px; }
.facts li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); transform: translateY(-2px); }
@keyframes lift { from { transform: translateY(14px) scale(1.015); } to { transform: none; } }
@keyframes mark-in { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes note-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.js .proof-shot:not(.is-in) .marks .mark, .js .proof-shot:not(.is-in) .legend li { opacity: 0; }
.proof-shot.is-in .console { animation: lift 450ms var(--ease-out) both; }
.proof-shot.is-in .marks .mark { animation: mark-in 400ms var(--ease-out) both; }
.marks .mark-1 { animation-delay: 160ms; }
.marks .mark-2 { animation-delay: 200ms; }
.marks .mark-3 { animation-delay: 240ms; }
.proof-shot.is-in .legend li { animation: note-in 240ms var(--ease-out) both; }
.legend .note-1 { animation-delay: 240ms; }
.legend .note-2 { animation-delay: 300ms; }
.legend .note-3 { animation-delay: 360ms; }
.proof-shot.is-landed *, .proof-shot.is-landed *::before { animation: none !important; }
@media (max-width: 1080px) {
  .hero-home .hero-grid { grid-template-areas: "copy" "film" "meta"; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 32px; }
  .hero-home .hero-film { width: min(100%, 480px); justify-self: center; }
  .proof-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .hero-home .hero-grid { row-gap: 22px; }
  .hero-home .hero-film { width: calc(100% + 32px); margin-inline: -16px; }
  .marks .pin text { font-size: 16px; }
  .legend { grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 10px; }
  .legend li { padding: 8px 10px; }
  .legend .note-3, .proof-shot .bar-step { display: none; }
  .hero-home .btn-row { margin-top: 24px; gap: 10px; }
  .facts { gap: 4px 16px; font-size: .84rem; }
}

/* ---------- Home pieces from the assessment (2 October 2026) ---------- */
/* The pilot: one wide card, its four points in two columns. */
.pilot-card { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 40px; max-width: none; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--card-line); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-card); }
/* B2: the run in four real screens. */
.shots-k { margin-bottom: 14px; color: var(--muted); font: 500 .78rem/1.5 var(--mono); text-align: center; }
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.shot { margin: 0; }
/* The numbered list beside a marked capture (B4): the numbers are labels, not counts. */
.checks-num { counter-reset: chk; }
.checks-num li { counter-increment: chk; }
.checks-num li::before { content: counter(chk); color: #fff; background: var(--ink); font: 600 .7rem/1 var(--mono); }
.checks-after { margin-top: 18px; padding-left: 30px; color: var(--ink-2); line-height: 1.57; }
@media (max-width: 880px) { .wide-only { display: none; } }
.lead-split { grid-template-columns: minmax(0, .38fr) minmax(0, .62fr); align-items: start; }
.lead-shot { margin: 0; }
.lead-shot .marks .pin circle { fill: var(--ink); }
.lead-shot .marks .pin text { fill: #fff; font: 600 20px/1 var(--mono); text-anchor: middle; }
.session-shell { max-width: 880px; }
/* Three article titles as plain links, above the call to action. */
.reads { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 2fr) auto; gap: 16px 40px; align-items: baseline; margin-bottom: clamp(40px, 5vw, 56px); padding-bottom: clamp(28px, 4vw, 40px); border-bottom: 1px solid var(--card-line); }
.reads-h { font-size: 1.15rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.3; }
.reads ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.reads ul a { color: var(--ink); font-weight: 550; line-height: 1.45; text-decoration: none; }
.reads ul a:hover { color: var(--accent-press); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1080px) {
  .lead-split { grid-template-columns: minmax(0, 1fr); }
  .reads { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 880px) {
  .pilot-card, .shots { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .shots { gap: 16px; }
  .reads ul a { display: block; padding: 6px 0; }
}

/* ---------- Problem cards and the register figure (H-3) ---------- */
.signals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.signal { padding: 20px 22px; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-card); }
.signal-k { display: block; color: var(--muted); font: 650 .7rem/1.3 var(--mono); letter-spacing: .06em; }
.signal p { margin-top: 10px; color: var(--ink); line-height: 1.5; }
.signal-on { border-color: var(--accent); color: #fff; background: var(--accent); }
.signal-on .signal-k { color: rgb(255 255 255 / 88%); }
.signal-on p { color: #fff; }
.figure-note { margin-top: 28px; max-width: 880px; padding: 20px 24px; border: 1px solid var(--card-line); border-left: 3px solid var(--accent); border-radius: var(--r-md); background: var(--bg-page-soft); }
.figure-note p { color: var(--ink); line-height: 1.6; }
.figure-note .credit { margin-top: 8px; color: var(--muted); font: 500 .76rem/1.4 var(--mono); }

/* ---------- Numbered cards (H-6) and the six-step rail (H-7) ---------- */
.card-k { color: var(--accent-press); font: 700 .78rem/1 var(--mono); letter-spacing: .06em; }
.card-k + h3 { margin-top: 12px; }
.rail-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* The numbered badges carry the order; a connector on the first row only read as unfinished. */
.rail-6::before { display: none; }

/* ---------- Pull quote with its static label (H-9) ---------- */
.pull { margin: 28px 0 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--accent); }
.pull blockquote { margin: 0; }
.pull blockquote p { color: var(--ink); font-size: 1.15rem; font-weight: 600; line-height: 1.5; }
.pull-label { margin-top: 12px; color: var(--muted); font: 500 .76rem/1.55 var(--mono); }
.pull-label + .pull-label { margin-top: 2px; }

/* The typing dots hold still while they show (the H-9 debrief exchange). */
@keyframes pending { from { opacity: 1; } to { opacity: 1; } }
/* ======================================================================
   C2. "A client asks" thread (partners P-1): reuses .chat and .bubble.
   ====================================================================== */
.convo { position: relative; overflow: hidden; border-radius: var(--r-2xl); background: #ebe6f1; box-shadow: var(--shadow-card-lg); }
.convo .scene { border-radius: 0; box-shadow: none; }
.chat.chat-flow { position: static; display: grid; gap: 14px; justify-items: stretch; margin: 0; padding: 4px 18px 8px; list-style: none; }
.chat-step { display: grid; gap: 10px; }
.chat-step .bubble { justify-self: end; max-width: 84%; font-size: .95rem; }
.chat-step .bubble-in { justify-self: start; }
.chat-reply { display: grid; justify-items: end; }
.chat-reply > * { grid-area: 1 / 1; }
.chat-reply .bubble-typing { align-self: start; }
.convo .fineprint { margin: 6px 18px 18px; }
.js .chat-step[data-reveal] { opacity: 1; transform: none; }
.js .chat-step[data-reveal] .bubble { transition-delay: 0s; }
.js .chat-step[data-reveal] .chat-reply .bubble { transition-delay: .4s; }
.js .chat-step[data-reveal] .chat-reply .bubble-typing, .js .chat-step[data-reveal].is-in .chat-reply .bubble-typing { opacity: 0; transform: none; transition: none; }
.js .chat-step[data-reveal].is-in .chat-reply .bubble-typing { animation: pending .35s linear .1s; }
.js .chat-step[data-reveal].is-in .bubble-typing span { animation: blink .25s ease-in-out .1s; }
.js .chat-step[data-reveal].is-in .bubble-typing span:nth-child(2) { animation-delay: .15s; }
.js .chat-step[data-reveal].is-in .bubble-typing span:nth-child(3) { animation-delay: .2s; }
html:not(.js) .chat-flow .bubble-typing { display: none; }

/* The debrief exchange (home H-9): what the room talks about afterwards. */
.debrief { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); align-items: center; margin-top: clamp(48px, 6vw, 72px); }
.debrief-h { font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 650; letter-spacing: -.03em; line-height: 1.2; }
.debrief-lead { margin-top: 14px; max-width: 34em; color: var(--ink-2); line-height: 1.6; }
.debrief-panel { padding: 22px 6px 18px; border-radius: var(--r-2xl); background: #ebe6f1; box-shadow: var(--shadow-card); }
.debrief-panel .fineprint { margin: 14px 18px 0; }
@media (max-width: 860px) { .debrief { grid-template-columns: minmax(0, 1fr); } }

/* ======================================================================
   C3. Same Friday. Two routes. (home H-8): B3, route lanes, then luck.
   Markup from tools/route-map.mjs. The line is the site's one "in order"
   device. One ink colour; no green, no red, no corner to aim for.
   ====================================================================== */
.routes { margin-top: clamp(48px, 6vw, 72px); }
.routes-h { font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 650; letter-spacing: -.03em; }
.routes-lead { margin-top: 12px; max-width: 46em; color: var(--ink-2); line-height: 1.6; }
.routes-foot { margin-top: 24px; max-width: 46em; color: var(--ink); font-weight: 600; line-height: 1.55; }
.routes-label { margin-top: 10px; max-width: 60em; color: var(--muted); font: 500 .78rem/1.5 var(--mono); }
.lanes { display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 290px); column-gap: 32px; margin: 28px 0 0; padding: 24px 32px 8px; border: 1px solid var(--card-line); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-card); }
.lanes-k { grid-column: 2; color: var(--muted); font: 600 .72rem/1.3 var(--mono); letter-spacing: .04em; }
.lanes-axis { position: relative; grid-column: 2; height: 22px; margin-top: 6px; color: var(--muted); font: 500 .72rem/1 var(--mono); }
.lanes-axis span { position: absolute; top: 6px; left: calc(var(--h) / 7 * 100%); transform: translateX(-50%); }
.lane { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; row-gap: 16px; padding: 22px 0 24px; border-top: 1px solid var(--card-line-soft); }
.lane-name { grid-column: 1; align-self: start; margin: 0; padding-top: 6px; color: var(--ink); font-size: 1rem; font-weight: 650; }
.lane-track { position: relative; grid-column: 2; height: 58px; }
/* The unused review hours stay visible as a faint rule under every lane. */
.lane-track::before { content: ""; position: absolute; top: 17px; right: 0; left: 0; border-top: 1px dashed var(--card-line); }
.lane-line { position: absolute; top: 16px; left: 0; width: calc(var(--to) / 7 * 100%); height: 3px; border-radius: 2px; background: var(--accent); transform-origin: left center; }
.lane-dot { position: absolute; top: 17.5px; left: calc(var(--h) / 7 * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px #fff; }
.lane-span { position: absolute; top: 34px; left: calc(var(--from) / 7 * 100%); width: calc((var(--to) - var(--from)) / 7 * 100%); padding-top: 6px; border-top: 1px solid var(--ink-2); color: var(--ink-2); font: 600 .72rem/1.2 var(--mono); text-align: center; }
.lane-span::before, .lane-span::after { content: ""; position: absolute; top: -5px; width: 1px; height: 5px; background: var(--ink-2); }
.lane-span::before { left: 0; }
.lane-span::after { right: 0; }
.lane-sent { grid-column: 3; color: var(--ink); font-size: 1rem; font-weight: 600; line-height: 1.5; }
.lane-sent > span { display: block; }
.lane-sent > span + span { margin-top: 4px; color: var(--ink-2); font-size: .92rem; font-weight: 500; }
.lane-luck { display: grid; grid-column: 2 / -1; grid-template-columns: 116px repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.luck-k { position: relative; align-self: center; padding-right: 22px; color: var(--muted); font: 600 .72rem/1.35 var(--mono); }
/* Where the case's luck forks: a dashed line into the two ends. */
.luck-k::after { content: ""; position: absolute; top: 50%; right: 0; width: 16px; border-top: 2px dashed var(--accent-line); }
.luck-end { padding: 12px 14px; border: 1px solid var(--card-line); border-radius: var(--r-md); background: var(--bg-page-soft); }
.luck-other { border-style: dashed; background: #fff; }
.luck-end h5 { margin: 0; color: var(--accent-press); font: 650 .68rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.luck-end p { margin-top: 6px; color: var(--ink-2); font-size: .9rem; line-height: 1.5; }
.luck-name { display: block; margin-top: 4px; color: var(--muted); font-size: .82rem; }
/* Once on arrival: the line draws, each dot lands at its hour, then the two ends. Labels never move. */
.js .lanes[data-reveal] { opacity: 1; transform: none; }
.js .lanes[data-reveal] .lane-line { transform: scaleX(0); }
.js .lanes[data-reveal] .lane-dot { opacity: 0; transform: scale(.5); }
.js .lanes[data-reveal] .luck-end { opacity: 0; }
.js .lanes[data-reveal].is-in .lane-line { transform: none; transition: transform 360ms var(--ease-out); }
.js .lanes[data-reveal].is-in .lane-b .lane-line { transition-delay: 80ms; }
.js .lanes[data-reveal].is-in .lane-dot { opacity: 1; transform: none; transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); transition-delay: calc(var(--h) / 7 * 360ms); }
.js .lanes[data-reveal].is-in .luck-end { opacity: 1; transition: opacity 240ms var(--ease-out) 380ms; }
.js .lanes[data-reveal].is-in .luck-other { transition-delay: 460ms; }

/* ======================================================================
   C4. "StepSim is not | Because" (home H-12): a published limits table.
   ====================================================================== */
.limits-wrap { padding: 20px 28px 8px; border: 1px solid var(--card-line); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-card); }
.limits { width: 100%; border-collapse: collapse; }
.limits th { padding: 6px 24px 12px 0; border-bottom: 2px solid var(--accent); color: var(--muted); font: 650 .72rem/1.3 var(--mono); letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.limits td { width: 50%; padding: 18px 24px 18px 0; border-bottom: 1px solid var(--accent-line); color: var(--ink-2); line-height: 1.55; vertical-align: top; }
.limits td:first-child { color: var(--ink); font-weight: 600; }
.limits tr:last-child td { border-bottom: 0; }
.js .limits[data-reveal] { opacity: 1; transform: none; }
.js .limits[data-reveal] td { opacity: 0; transform: translateY(8px); }
.js .limits[data-reveal].is-in td { opacity: 1; transform: none; transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); transition-delay: calc(min(var(--r, 0), 4) * var(--t-step)); }

/* ======================================================================
   C5. Forward block with "Copy this paragraph" (home H-14, partners P-2)
   ====================================================================== */
.forward { margin-top: 28px; padding: 22px 24px; border: 1px solid var(--card-line); border-radius: var(--r-xl); background: #fff; }
.forward-k { color: var(--muted); font: 600 .72rem/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.forward-text { margin-top: 10px; color: var(--ink); line-height: 1.62; }
.forward .btn { margin-top: 16px; }
.cta .forward { border-color: rgb(255 255 255 / 28%); background: rgb(255 255 255 / 6%); }
.cta .forward .forward-k { margin: 0; color: rgb(255 255 255 / 88%); }
.cta .forward .forward-text { max-width: none; color: #fff; }
.copy-btn { display: inline-grid; }
.copy-btn > span { grid-area: 1 / 1; }
.copy-btn .copy-done, .copy-btn.is-copied .copy-idle { visibility: hidden; }
.copy-btn.is-copied .copy-done { visibility: visible; }
.cta-stack .btn-row { justify-content: flex-start; margin-top: 26px; }
.cta-founder { font-size: .92rem; }
.cta-founder a { color: #fff; text-underline-offset: 3px; }
.cta-grid-top { align-items: start; }

/* ======================================================================
   C6. Questions: details/summary (how it works) and a plain list (partners)
   ====================================================================== */
.faq { display: grid; gap: 10px; max-width: 880px; }
.faq details { border: 1px solid var(--card-line); border-radius: var(--r-lg); background: #fff; }
.faq summary { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: var(--r-lg); color: var(--ink); font-size: 1.04rem; font-weight: 650; line-height: 1.4; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; flex: none; display: grid; place-items: center; min-width: 34px; height: 24px; border-radius: var(--r-pill); color: #fff; background: var(--accent); font: 700 .9rem/1 var(--mono); }
.faq details[open] summary::before { content: "\2212"; }
.faq-a { padding: 0 20px 20px 68px; color: var(--ink-2); line-height: 1.65; }
.faq-a p + p { margin-top: 10px; }
.qa { display: grid; max-width: 900px; margin: 0; }
.qa > div { padding: 20px 0; border-bottom: 1px solid var(--card-line); }
.qa > div:last-child { border-bottom: 0; }
.qa dt { color: var(--ink); font-size: 1.05rem; font-weight: 650; }
.qa dd { margin: 8px 0 0; color: var(--ink-2); line-height: 1.65; }

/* ======================================================================
   C7. Roles table (partners P-5): two columns read as pairs.
   ====================================================================== */
.roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.roles-col { padding: 24px 26px; border: 1px solid var(--card-line); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-card); }
.roles-col h3 { margin: 0 0 8px; font-size: 1rem; }
.roles-col .pill { font-size: .74rem; padding: 5px 12px; }
.roles-col ul { display: grid; margin: 0; padding: 0; list-style: none; }
.roles-col li { padding: 14px 0; border-bottom: 1px solid var(--accent-line); color: var(--ink-2); line-height: 1.55; }
.roles-col li:last-child { border-bottom: 0; }
.js .roles[data-reveal] { opacity: 1; transform: none; }
.js .roles[data-reveal] li { opacity: 0; transform: translateY(8px); }
.js .roles[data-reveal].is-in li { opacity: 1; transform: none; transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); transition-delay: calc(min(var(--r, 0), 4) * var(--t-step)); }

/* ======================================================================
   C8. Run-of-show rail (home H-10, partners P-4): reuses .rail, vertical.
   ====================================================================== */
.rail-show { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.rail-show::before { display: block; top: 24px; right: auto; bottom: 24px; left: 39px; width: 2px; height: auto; background: linear-gradient(180deg, var(--accent-line), var(--accent)); transform-origin: top center; }
.rail-show li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 16px; align-items: start; padding: 16px 20px; }
.rail-show li::before { content: counter(rail, decimal-leading-zero); grid-row: 1 / span 2; width: auto; min-width: 40px; height: 26px; margin: 0; padding: 0 10px; border-radius: var(--r-pill); box-shadow: 0 0 0 5px #fff; }
.rail-show strong, .rail-show li > span:not(.rail-glyph) { grid-column: 2; }
.rail-show li > span:not(.rail-glyph) { margin-top: 4px; }
.rail .rail-glyph { grid-column: 3; grid-row: 1 / span 2; display: grid; place-items: center; width: 32px; height: 32px; margin: 0; border-radius: 10px; color: var(--accent-press); background: var(--accent-soft); }
.rail-glyph svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.js .rail-show[data-reveal] { opacity: 1; transform: none; }
.js .rail-show[data-reveal]::before { transform: scaleY(0); }
.js .rail-show[data-reveal].is-in::before { transform: none; transition: transform var(--t-draw) var(--ease-draw) 100ms; }
.js .rail-show[data-reveal] li { opacity: 0; transform: translateY(var(--rise)); }
.js .rail-show[data-reveal].is-in li { opacity: 1; transform: none; transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); transition-delay: calc(min(var(--i, 0), 4) * var(--t-step)); }

/* ======================================================================
   C9. Mission story cards (home H-11): the one hero gradient, in-world.
   ====================================================================== */
.story-card { padding: 0; }
.story-band { position: relative; display: flex; align-items: flex-end; gap: 12px; min-height: 172px; padding: 22px; background: var(--gradient-hero); }
.story-glyph { flex: none; width: 56px; height: 56px; overflow: hidden; border-radius: 16px; box-shadow: 0 0 0 3px rgb(255 255 255 / 32%); }
.story-glyph img { width: 100%; height: 100%; }
.story-bubble { min-width: 0; margin: 0; padding: 10px 14px; border-radius: 16px 16px 16px 4px; color: #fff; background: var(--tool); box-shadow: 0 8px 20px rgb(17 18 23 / 22%); font-size: .92rem; line-height: 1.4; }
.story-card .story-bubble { color: #fff; }
.story-card .story-tile { color: var(--ink); }
.story-bubble strong { display: block; margin-bottom: 2px; color: #cbd5e1; font-size: .74rem; font-weight: 650; }
.story-tile { min-width: 0; margin: 0; padding: 10px 14px; border-radius: 12px; color: var(--ink); background: #fff; box-shadow: 0 8px 20px rgb(17 18 23 / 22%); }
.story-tile span { display: block; color: var(--muted); font: 650 .68rem/1.35 var(--mono); letter-spacing: .04em; }
.story-tile strong { display: block; margin-top: 2px; font-size: 1.05rem; font-weight: 650; }
.story-tile span + strong + span { margin-top: 6px; }
.story-card .card-body { display: flex; flex: 1; flex-direction: column; padding: 22px 24px 26px; }
.story-card .card-body h3 { margin-top: 12px; }

.card-link h3 a { color: inherit; text-decoration: none; }
.card-link h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card-link:hover h3 a, .card-link h3 a:focus-visible { color: var(--accent-press); }
/* Article thumbnails as scenes inside .card-photo cards. */
.card-photo > .scene { border-radius: 0; box-shadow: none; aspect-ratio: 16 / 10; }

/* ---------- The films: the teaser (4:5) in the home hero, the full film (16:9) on /film ----------
   The cover image is the poster and the largest paint; the video loads
   nothing until a click. The box never changes size, whatever the state. */
.walk { margin: 0; }
.walk-box { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: 2px solid var(--card-line); border-radius: 18px; background: #19103b; box-shadow: 0 1px 2px rgba(76, 29, 149, .06), 0 8px 24px rgba(76, 29, 149, .10); }
.walk-box video, .walk-play, .walk-play img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.walk-play { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.walk-play:focus-visible { border-radius: 16px; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px var(--ink); }
.walk-pill { position: absolute; left: 50%; bottom: 24px; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: var(--r-pill); color: #fff; background: var(--ink); font: 600 15px/1.2 var(--sans); white-space: nowrap; transform: translateX(-50%); }
.walk-pill svg { width: 14px; height: 14px; fill: currentColor; }
.walk-play:focus-visible .walk-pill { outline: 2px solid #fff; outline-offset: 2px; }
.walk-missing { display: none; }
.walk[data-video="missing"] .walk-missing { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; display: block; padding: 14px 18px; color: var(--ink); background: #fff; font-size: .92rem; font-weight: 600; }
.walk-chapters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.walk-chapters button { min-height: 40px; padding: 6px 14px; border: 1px solid var(--card-line); border-radius: var(--r-pill); background: #fff; color: var(--ink); font: 600 .82rem/1.2 var(--sans); cursor: pointer; }
.walk-chapters [aria-current] { background: var(--accent-soft); color: var(--accent-press); border-color: var(--line-strong); }
.walk .capture-cap strong { color: var(--ink); }
.walk-forward { margin-top: 14px; color: var(--ink-2); font-size: .9rem; line-height: 1.55; }
.walk-forward code { font: 500 .8rem/1.4 var(--mono); overflow-wrap: anywhere; }
.walk-forward .btn { margin-top: 8px; }
.transcript { margin-top: 16px; padding: 16px 20px; border-radius: var(--r-xl); background: var(--film-wall); }
.transcript summary { color: var(--ink); font-weight: 650; cursor: pointer; }
.transcript h3 { margin-top: 18px; font-size: .95rem; font-weight: 650; }
.transcript p { margin-top: 6px; color: var(--ink-2); font-size: .9rem; line-height: 1.55; }
.transcript summary + p { margin-top: 12px; }
.hero-home .hero-film .capture-cap { max-width: none; }
/* The full film on /film: the shell's full width, at least 960 px on a desktop (docs/video/SITE_FILMS.md). */
.walk-wide { margin-top: clamp(28px, 4vw, 44px); }
.walk-wide .walk-box { aspect-ratio: 16 / 9; }
.walk-wide .capture-cap { max-width: none; }
.walk-wide + .walk-wide { margin-top: clamp(56px, 8vw, 96px); }
.walk-len { margin-left: .4em; color: var(--muted); font-size: .5em; font-weight: 550; letter-spacing: 0; white-space: nowrap; }
/* H-8: the film's debrief still. Taller than the still beside the wide screen, so the
   record capture overlapping its lower right leaves the three faces clear. */
@media (min-width: 721px) { .scene-debrief { aspect-ratio: 4 / 3; } }
#session, #walkthrough, #film { scroll-margin-top: 88px; }
.pilot-session { margin-top: clamp(48px, 6vw, 72px); }
.pilot-session h3.title { margin-top: 0; font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
@media (max-width: 1080px) {
  .pilot-session .scene { order: 1; }
  .pilot-session > div { display: contents; }
  .pilot-session h3 { order: 0; }
  .pilot-session .rail, .pilot-session .footnote { order: 2; }
}
@media (max-width: 720px) {
  .walk-box { border-radius: 0; border-inline: 0; }
  .walk-play:focus-visible { border-radius: 0; }
  .walk-chapters, .hero-film .capture-cap, .walk-forward, .transcript { margin-inline: 16px; }
  .walk-wide { margin-inline: -16px; }
  .walk-wide .capture-cap, .walk-wide .btn-row { margin-inline: 16px; }
}

/* ---------- Layout for the components ---------- */
@media (max-width: 880px) {
  .signals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rail-6 { grid-template-columns: minmax(0, 1fr); }
  .roles { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .signals { grid-template-columns: minmax(0, 1fr); }
  .combo:has(.capture-cap) { padding-bottom: 0; }
  .combo .capture { position: relative; right: auto; width: 100%; margin-top: -48px; }
  /* Lanes on a phone: one column; each route keeps its hour track, full width. */
  .lanes { display: block; padding: 18px 18px 4px; }
  .lanes-axis { margin-top: 4px; }
  .lane { grid-template-columns: minmax(0, 1fr); row-gap: 10px; padding: 18px 0 20px; }
  .lane-name { padding-top: 0; }
  .lane-track { grid-column: 1; height: 54px; }
  .lane-span { font-size: .68rem; }
  .lane-sent, .lane-luck { grid-column: 1; }
  .lane-luck { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .luck-k { padding: 4px 0 0; }
  .luck-k::after { display: none; }
  .limits-wrap { padding: 8px 20px; }
  .limits thead { display: none; }
  .limits tr { display: grid; gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--accent-line); }
  .limits tr:last-child { border-bottom: 0; }
  .limits td { display: block; width: auto; padding: 0; border: 0; }
  .limits td::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--muted); font: 650 .66rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
  .faq-a { padding-left: 20px; }
  .rail-show li { grid-template-columns: auto minmax(0, 1fr); }
  .rail .rail-glyph { display: none; }
}

/* A side illustration beside a longer list rides with it, as on About. */
.side-scene { align-self: start; }
@media (min-width: 1081px) {
  .side-scene { position: sticky; top: 112px; }
}

/* ---------- Reduced motion: nothing moves, nothing waits ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .scene[data-reveal] > img, .js [data-reveal] .scene > img { transform: none; }
  .js :is(.limits, .roles, .rail-show)[data-reveal] :is(td, li) { opacity: 1; transform: none; }
  .js .rail-show[data-reveal]::before { transform: none; }
  .js .lanes[data-reveal] :is(.lane-line, .lane-dot, .luck-end) { opacity: 1; transform: none; }
  .js .chat-step[data-reveal] .bubble { opacity: 1; transform: none; }
  .chat-flow .bubble-typing { display: none; }
  .hero-home .stage .console-shot img { transform: none; }
}

/* ---------- Type pass (assessment P32): mono only where the copy deck asks for it ----------
   Console bars, capture captions, scene tags, fine print and data ticks stay in
   Geist Mono; every other kicker and label is Inter, in small caps-style tracking. */
:is(.signal-k, .card-k, .card-num::before, .figure-note .credit, .shots-k, .lane-span, .luck-k, .luck-end h5, .limits th, .limits td::before, .forward-k, .pin-k, .mono-k, .path-act-k, .path-chip, .week-k, .issue-k, .table thead th, .table tbody th, .trace-row span, .face-role, .ai-role-k, .story-tile span, .lanes-k, .faq summary::before, .bl-num) { font-family: var(--sans); }
:is(.signal-k, .card-k, .luck-end h5, .limits th, .forward-k, .path-act-k, .ai-role-k, .trace-row span, .table thead th) { letter-spacing: .07em; }
.card-num::before, .card-k, .week-k, .table tbody th { font-variant-numeric: tabular-nums; }

/* ---------- Print: a printed or saved page is never blank ---------- */
@media print {
  .js [data-reveal] { opacity: 1; transform: none; }
  .js [data-reveal] * { opacity: 1 !important; transform: none !important; }
  .bubble-typing { display: none !important; }
  .nav { position: static; }
}

/* page: facilitators */
/* F-3: the status box sits directly under the strip, in the same white band as F-4. */
.fac-status-box { max-width: 880px; padding: 24px 28px; border: 1px solid var(--card-line); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-card); }
.fac-status-box p:not(.eyebrow) { margin-top: 10px; color: var(--ink-2); line-height: 1.62; }
.fac-status-box .eyebrow + p { margin-top: 16px; }
.fac-status-box strong { color: var(--ink); font-weight: 650; }
@media (max-width: 720px) {
  .fac-status-box { padding: 20px; }
}
/* F-5: the weeks on the site's one "in order" line. */
.weeks { position: relative; display: grid; gap: 0; margin: 28px 0 0; padding: 0; list-style: none; }
.week { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 20px; padding: 0 0 22px 28px; }
.week::before { content: ""; position: absolute; top: 6px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg-page); }
.week::after { content: ""; position: absolute; top: 18px; bottom: -4px; left: 4px; border-left: 2px solid var(--accent-line); }
.week:last-child::after { display: none; }
.week-opt::before { background: #fff; box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 4px var(--bg-page); }
.week-opt { padding-bottom: 0; }
.week-k { grid-row: 1 / span 2; color: var(--accent-press); font: 650 .74rem/1.6 var(--mono); letter-spacing: .04em; }
.week strong { color: var(--ink); font-weight: 600; line-height: 1.45; }
.week-p { margin-top: 2px; color: var(--ink-2); font-size: .94rem; line-height: 1.5; }
/* F-6: what is issued, two plain steps joined by the line. */
.issue { position: relative; display: grid; gap: 16px; }
.issue-step { position: relative; display: grid; gap: 4px; padding: 20px 22px 20px 52px; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-card); }
.issue-step::before { content: ""; position: absolute; top: 26px; left: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.issue-step + .issue-step::after { content: ""; position: absolute; top: -17px; left: 27px; height: 17px; border-left: 2px solid var(--accent-line); }
.issue-k { color: var(--muted); font: 600 .72rem/1.4 var(--mono); letter-spacing: .04em; }
.issue-step strong { color: var(--ink); font-size: 1.08rem; font-weight: 650; }
.issue-step > span:last-child { color: var(--ink-2); }
@media (max-width: 720px) {
  .week { grid-template-columns: minmax(0, 1fr); }
  .week-k { grid-row: auto; }
}
.fac-status { padding: 0 0 clamp(8px, 2vw, 16px); }
/* end page: facilitators */

/* page: about-privacy */
/* About A-2: the scene stays beside the prose while it is read. */
.about-why .split { align-items: start; }
@media (min-width: 1081px) {
  .about-scene { position: sticky; top: 112px; }
}
/* About A-4: the lead sentence, then the statement. */
.about-labs .card p + p { margin-top: 12px; }
.about-labs .about-labs-lead { color: var(--ink); font-weight: 550; }
.about-labs .card a { color: var(--accent-press); text-underline-offset: 3px; }
/* end page: about-privacy */

/* page: missions */
/* M-2: three rows, mono label, mission name, line. */
.ai-roles { display: grid; margin: 0; padding: 4px 28px; border: 1px solid var(--card-line); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-card); list-style: none; }
.ai-role { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .8fr) minmax(0, 2fr); gap: 6px 28px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--accent-line); }
.ai-role:last-child { border-bottom: 0; }
.ai-role-k { color: var(--accent-press); font: 700 .74rem/1.45 var(--mono); letter-spacing: .06em; }
.ai-role strong { color: var(--ink); font-size: 1.08rem; font-weight: 650; letter-spacing: -.01em; }
.ai-role p { color: var(--ink-2); line-height: 1.6; }
/* M-3: the mission cards sit under the rows in the same section. */
.mission-cards { margin-top: clamp(48px, 6vw, 72px); }
/* A long "Read:" link wraps with its arrow after the last word. */
.mission-cards .text-link { display: block; align-self: flex-start; }
/* M-4: each face carries a role and one line in the person's own voice. */
.faces-voice li { align-items: flex-start; }
.face-role { display: block; margin-top: 2px; color: var(--muted); font: 600 .7rem/1.4 var(--mono); letter-spacing: .03em; }
.face-line { display: block; margin-top: 10px; color: var(--ink); font-size: .9rem; line-height: 1.45; }
.faces-after { display: grid; gap: 8px; max-width: 46em; margin-top: 32px; }
.faces-after p { color: var(--ink-2); font-size: 1.02rem; line-height: 1.6; }
.faces-after p:first-child { color: var(--ink); font-weight: 600; }
/* M-5: the four cards with the scene beside them. */
.every-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); align-items: start; }
.every-grid > .scene { position: sticky; top: 100px; }
@media (max-width: 1080px) {
  .every-grid { grid-template-columns: minmax(0, 1fr); }
  .every-grid > .scene { position: relative; top: auto; }
}
@media (max-width: 720px) {
  .ai-roles { padding: 4px 20px; }
  .ai-role { grid-template-columns: minmax(0, 1fr); padding: 18px 0; }
}
/* The hero's three in-world artefacts, stacked straight. */
.bands-stack { display: grid; gap: 14px; }
.bands-stack .story-band { min-height: 0; align-items: center; padding: 18px 20px; border: 1px solid var(--card-line); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-card); }
.bands-stack .story-glyph { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 0 0 1px var(--card-line); }
.bands-stack .story-bubble, .bands-stack .story-tile { box-shadow: none; }
.bands-stack .story-tile { border: 1px solid var(--card-line); }
.call-shot { max-width: 880px; margin: clamp(36px, 5vw, 56px) auto 0; }
/* JunoAI is not one of the people: a slate row of its own, under the cast. */
.faces-ai { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 14px; padding: 14px 16px; border: 1px dashed #cbd5e1; border-radius: var(--r-lg); background: #f8fafc; }
.faces-ai strong { color: var(--ink); font-size: .95rem; }
.faces-ai .face-line { flex-basis: 100%; margin-top: 4px; }
.mission-cards .card { scroll-margin-top: 96px; }
/* M-5: four plain answers, no icons. */
.defs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin: 0; }
.defs > div { padding: 20px 0; border-top: 1px solid var(--card-line); }
.defs dt { color: var(--ink); font-size: 1.08rem; font-weight: 650; }
.defs dd { margin: 6px 0 0; color: var(--ink-2); line-height: 1.6; }
@media (max-width: 720px) { .defs { grid-template-columns: minmax(0, 1fr); } }
/* end page: missions */

/* page: partners */
/* P-1: the thread is taller than the copy, so both columns start at the top; the stage rises once, as on every hero. */
.pt-hero .hero-grid { align-items: start; }
.pt-hero .stage .convo { animation: rise 450ms var(--ease-out) 100ms both; }
/* P-2: the copyable card beside the two short answers. */
.pt-say { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; }
.pt-say .forward { grid-row: span 2; margin: 0; padding: clamp(24px, 3vw, 32px); box-shadow: var(--shadow-card); }
.pt-say .forward-text { margin: 0; font-size: 1.12rem; line-height: 1.65; }
.pt-say .card h3 { margin-top: 0; }
/* P-4 and P-6: the rail and the capture set the height; the other column starts at the top. */
.pt-day, .pt-view { align-items: start; }
/* P-8: article titles are h3 under the section's h2; the whole card is the link. */
.pt-reads .bl-card h3 { margin: 6px 0 0; font-size: clamp(1.15rem, 1.6vw, 1.32rem); letter-spacing: -.02em; line-height: 1.25; }
.pt-reads .bl-card h3 a { color: var(--ink); text-decoration: none; }
.pt-reads .bl-card h3 a::after { content: ""; position: absolute; inset: 0; }
.pt-reads .bl-card:hover h3 a, .pt-reads .bl-card h3 a:focus-visible { color: var(--accent-press); }
/* Two columns only: the hero copy stays beside the thread as it is read (clip, unlike hidden, lets it stick), and the group capture gets the wider column. */
@media (min-width: 1081px) {
  .pt-hero { overflow: clip; }
  .pt-hero .hero-copy { position: sticky; top: 116px; }
  .pt-view { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
}
@media (max-width: 880px) {
  .pt-say { grid-template-columns: minmax(0, 1fr); }
  .pt-say .forward { grid-row: auto; }
}
/* P-4: each step says who acts, in words. */
.rail-show .who { grid-column: 3; grid-row: 1 / span 2; align-self: start; padding: 3px 9px; border-radius: var(--r-pill); color: var(--accent-press); background: var(--accent-soft); font: 600 .7rem/1.4 var(--sans); font-style: normal; white-space: nowrap; }
@media (max-width: 720px) {
  .rail-show .who { grid-column: 2; grid-row: auto; justify-self: start; margin-top: 8px; }
}
/* end page: partners */

/* page: how-it-works */
/* W-2, B5: the run as a pathway. One rail (the site's "in order" line), grouped under the
   product's screen names; the screen for the act being read sits beside it. */
.path { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.path-stage { position: sticky; top: 96px; display: grid; }
.path-shot { grid-area: 1 / 1; align-self: start; margin: 0; opacity: 0; box-shadow: var(--shadow-card-lg); }
.path-shot.is-on { opacity: 1; }
.js .path-shot { transition: opacity 350ms var(--ease-std); }
.path-inline { display: none; margin: 0 0 18px; }
.path-act { position: relative; padding: 0 0 12px 48px; }
.path-act::before { content: ""; position: absolute; top: 6px; bottom: -6px; left: 15px; border-left: 2px solid var(--accent-line); }
.path-later::before { border-left-style: dashed; }
.path-act:last-child::before { bottom: 40px; }
.path-act-k { position: relative; margin-bottom: 14px; color: var(--accent-press); font: 650 .72rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.path-act-k::before { content: ""; position: absolute; top: 50%; left: -38px; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px #fff; }
.path-steps { display: grid; gap: 18px; margin: 0 0 18px; padding: 0; list-style: none; }
.path-step { position: relative; }
.path-step::before { content: counter(list-item, decimal-leading-zero); position: absolute; top: -2px; left: -48px; display: grid; place-items: center; width: 32px; height: 26px; border-radius: var(--r-pill); color: var(--accent-press); background: #fff; box-shadow: inset 0 0 0 1.5px var(--accent-line); font: 650 .7rem/1 var(--mono); }
.path-step strong { display: block; color: var(--ink); font-size: 1.04rem; font-weight: 650; }
.path-step span { display: block; margin-top: 4px; color: var(--ink-2); line-height: 1.58; }
.path-pivot .path-step { padding: 16px 18px; border: 1px solid var(--accent); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-card); }
.path-pivot .path-step::before { top: 14px; color: #fff; background: var(--accent); box-shadow: none; }
.path-chip { position: relative; width: fit-content; margin: 2px 0 26px 48px; padding: 5px 12px; border: 1px solid var(--card-line); border-radius: var(--r-pill); color: var(--ink-2); background: #fff; font: 600 .74rem/1.3 var(--mono); }
.path-fork { display: grid; gap: 10px; margin: 4px 0 0; color: var(--ink-2); font-size: .9rem; font-weight: 600; }
.path-fork span { display: flex; align-items: center; gap: 12px; }
.path-fork span::before { content: ""; flex: none; width: 40px; border-top: 2px solid var(--accent); }
.path-fork .fork-dashed::before { border-top-style: dashed; }
@media (max-width: 1080px) {
  .path { grid-template-columns: minmax(0, 1fr); }
  .path-stage { display: none; }
  .path-inline { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .path { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  .path-stage { display: none; }
  .path-inline { display: block; }
}

/* W-3: the record capture overlaps only the scene's lower right, so the raised hand in the-push-back stays in view. */
section.hiw-record .combo { padding-bottom: 0; }
section.hiw-record .combo .capture { position: relative; right: auto; bottom: auto; width: 100%; margin: 16px 0 0; }
@media (max-width: 720px) {
  section.hiw-record .combo .capture { width: 100%; margin: 16px 0 0; }
  /* W-5 and deck section 3: label and value stay on one line; 80 px is the width of the mono "Facilitator". */
  .hiw-traces .trace-row { grid-template-columns: 80px minmax(0, 1fr); align-items: baseline; }
  .hiw-traces .trace-row span { grid-column: auto; }
  .hiw-traces .trace-row .pill { grid-column: 2; justify-self: start; }
}
/* end page: how-it-works */

/* page: partner brief */
.brief-sheet { max-width: 860px; margin: 0 auto; padding: clamp(28px, 4vw, 48px); border: 1px solid var(--card-line); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-card); }
.brief-top { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--card-line); }
.brief-promise { color: var(--ink); font-size: 1.15rem; font-weight: 650; letter-spacing: -.02em; }
.brief-prose { margin-top: 8px; max-width: none; }
.brief-sign { color: var(--muted); font: 500 .8rem/1.5 var(--mono); }
.mail-text { margin-top: 12px; overflow-x: auto; font: inherit; line-height: 1.62; white-space: pre-wrap; }
@media print {
  .page-brief :is(.nav, .footer, .hero, .brief-email, .skip-link) { display: none !important; }
  .page-brief .brief-section { padding: 0; }
  .page-brief .brief-sheet { max-width: none; padding: 0; border: 0; box-shadow: none; }
  .page-brief .brief-prose { font-size: 10.5pt; }
}
/* end page: partner brief */

/* ---------- Home (D98): three labelled real screens in the hero, the challenge, the record-to-action chain ---------- */
.hero-home .hero-shots { grid-area: film; width: clamp(380px, 38vw, 520px); margin: 0; }
.hero-shots ol { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.hero-shots .console { box-shadow: var(--shadow-card); }
.hero-shots .console-bar { padding: 9px 14px; color: #fff; font-size: .74rem; }
.hero-shots .console-bar b { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; color: var(--ink); background: #fff; font-weight: 700; }
.hero-note { margin-top: 12px; color: var(--ink-2); font-size: .88rem; }
.signals-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.signals-3 .signal-k { color: var(--ink-2); font: 600 .95rem/1.4 var(--sans); letter-spacing: 0; }
.signals-3 .signal p { font-size: 1.15rem; font-weight: 650; }
.signal-on .signal-k, .chain .signal-k { font: 650 .7rem/1.3 var(--mono); letter-spacing: .06em; }
.signal-on .signal-k { color: rgb(255 255 255 / 88%); }
.signal-on p { color: #fff; }
.challenge-body { max-width: 46em; margin-top: clamp(28px, 4vw, 40px); }
.challenge-body .sub + .sub { margin-top: 14px; }
.chain-h { margin: clamp(40px, 5vw, 56px) 0 16px; font-size: 1.15rem; font-weight: 650; }
.chain .signal p { font-size: 1rem; font-weight: 500; }
.split-film { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); margin-top: clamp(40px, 5vw, 64px); }
.split-film .sub + .sub { margin-top: 14px; }
.cta > h2 { margin-bottom: 24px; }
.cta-stack h3 { margin-top: 20px; font-size: 1.1rem; font-weight: 650; }
.cta-stack h3:first-child { margin-top: 0; }
@media (max-width: 1080px) {
  .hero-home .hero-shots { width: min(100%, 560px); justify-self: center; }
}
@media (max-width: 720px) {
  .signals-3 { grid-template-columns: minmax(0, 1fr); }
  .split-film { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Home "Why it matters now": the one research figure, large (WEBSITE_EXPANSION_PLAN.md section 5) ---------- */
.figure-note .stat-num { display: block; margin-bottom: 6px; color: var(--accent-press); font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; }

/* ---------- Home run (D105): the opening minute of The Friday file ----------
   One scene beside the hero copy, in four beats. site.mjs sets data-mode on
   the hero. "held" (wide, tall, motion allowed): the scene holds in place
   while four steps scroll past. "compact" (short screens, phones, reduced
   motion): one beat at a time, moved by the chips and the Next buttons, with
   normal page scroll. Without script the four beats are stacked cards with
   every word showing. One file opens and one decision is sent; every move
   inside a beat ends within 600 ms. */
.hero-run { overflow: clip; }
.run-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.btn-trainer { border-color: var(--accent); color: var(--accent-press); background: var(--accent-soft); }
.btn-trainer:hover { border-color: var(--accent-hover); background: #e6dcff; }
.hero-trainer { margin-top: 14px; max-width: 34em; color: var(--ink-2); font-size: .95rem; line-height: 1.5; }
.hero-trainer::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--accent); vertical-align: .08em; }
.hero-run .hero-note .text-link { margin-left: 4px; }
.run-steps { display: none; margin: 0; padding: 0; list-style: none; }
.run-stage { margin: 0; }
.run-scene { position: relative; overflow: hidden; border: 1px solid var(--card-line); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-float); }
.run-bar { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; color: rgb(255 255 255 / 78%); background: var(--ink); font: 500 .72rem/1.3 var(--mono); }
.run-bar span:first-child::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--brand); }
.run-prog, .run-line, .run-chips, .s-next-row, .s-pick:empty { display: none; }
.beats { display: grid; gap: 0; }
.beat { padding: 22px clamp(18px, 2.4vw, 28px) 24px; border-top: 1px solid var(--card-line-soft); }
.beat:first-child { border-top: 0; }
.beat-ink { color: #fff; background: #17122b; border-top-color: rgb(255 255 255 / 8%); }
.beat-k { margin-bottom: 12px; color: var(--accent-press); font: 650 .72rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.beat-k b, .run-k b { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; color: #fff; background: var(--accent); font-size: .68rem; }
.beat-ink .beat-k { color: #c4b5fd; }
.beat-cap { margin-top: 16px; color: var(--ink-2); font-size: .95rem; line-height: 1.55; }
.beat-ink .beat-cap { color: rgb(255 255 255 / 82%); }
.s-setting { color: var(--muted); font: 500 .8rem/1.4 var(--mono); }
.s-msg { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--card-line); border-radius: 4px var(--r-lg) var(--r-lg) var(--r-lg); background: var(--ai-soft); color: var(--ink); line-height: 1.5; }
.s-who { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--muted); font-size: .78rem; font-weight: 650; }
.s-av { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: var(--ai); font-size: .7rem; }
.run-scene mark { padding: 0 3px; border-radius: 3px; color: var(--ink); background: #fde68a; }
.s-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.s-tiles li { padding: 10px 12px; border: 1px solid var(--ok-line); border-radius: var(--r-md); background: var(--ok-bg); }
.s-tiles span { display: block; color: var(--ink-2); font-size: .75rem; }
.s-tiles b { display: block; margin-top: 2px; color: var(--ok); font-size: 1.15rem; letter-spacing: -.02em; }
.s-file { padding: 0; color: rgb(255 255 255 / 70%); font: 500 .76rem/1.4 var(--mono); }

/* Beat 2: one file opens. The other seven are labels, not controls. */
.s-files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.s-files li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px dashed rgb(255 255 255 / 14%); border-radius: var(--r-md); color: rgb(255 255 255 / 52%); font-size: .8rem; }
.s-files li::before { content: ""; flex: none; width: 10px; height: 12px; border: 1.5px solid rgb(167 139 250 / 55%); border-radius: 2px; }
.s-files .s-open-li { padding: 0; border: 0; }
.s-files .s-open-li::before { display: none; }
.s-open { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 7px 10px; border: 1.5px solid #a78bfa; border-radius: var(--r-md); color: #fff; background: rgb(139 92 246 / 22%); font: 650 .82rem/1.2 var(--sans); text-align: left; cursor: pointer; transition: transform 160ms var(--ease-out), background-color 160ms; }
.s-open::before { content: ""; flex: none; width: 10px; height: 12px; border: 1.5px solid #c4b5fd; border-radius: 2px; }
.s-open:hover { background: rgb(139 92 246 / 34%); transform: translateY(-2px); }
.s-open-k { margin-left: auto; padding: 2px 8px; border-radius: var(--r-pill); color: var(--ink); background: #c4b5fd; font-size: .7rem; }
.s-open[aria-expanded="true"] .s-open-k { display: none; }
.s-files-n { margin-top: 8px; color: rgb(255 255 255 / 56%); font-size: .78rem; }
.s-doc { margin-top: 12px; padding: 14px 16px; border-radius: var(--r-lg); color: var(--ink); background: #fff; line-height: 1.5; font-size: .92rem; }
.s-doc p + p { margin-top: 6px; }
.s-doc-t { font-weight: 650; }
.s-doc-vs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 10px !important; padding-top: 10px; border-top: 1px dashed var(--card-line); color: var(--ink-2); font-size: .84rem; }
.s-doc-vs span { flex-basis: 100%; color: var(--muted); font: 500 .7rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.s-doc-vs b { color: var(--ok); }
.s-doc-vs q { color: var(--ai); font-weight: 600; }

/* Beat 3: one decision, sent. */
.s-options { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.s-options legend { margin-bottom: 10px; }
.s-options label { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border: 1px solid rgb(255 255 255 / 14%); border-radius: var(--r-md); color: rgb(255 255 255 / 86%); font-size: .86rem; cursor: pointer; transition: border-color 160ms, background-color 160ms, opacity 200ms, transform 200ms var(--ease-out); }
.s-options label:hover { border-color: #a78bfa; background: rgb(139 92 246 / 12%); }
.s-options input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: #a78bfa; }
.s-options label.is-picked { border-color: #a78bfa; color: #fff; background: rgb(139 92 246 / 30%); }
.s-options.is-sent label:not(.is-picked) { opacity: .4; }
.s-sent { min-height: 1.4em; margin-top: 10px; color: #c4b5fd; font-weight: 650; font-size: .9rem; }

/* Beat 4: two illustrative outcomes, then one becomes a record. */
.s-pick { margin-top: 8px; color: rgb(255 255 255 / 82%); font-size: .86rem; }
.s-runs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.s-run { padding: 12px 14px; border: 1px solid rgb(255 255 255 / 14%); border-radius: var(--r-lg); background: rgb(255 255 255 / 6%); font-size: .86rem; line-height: 1.45; }
.s-run p + p { margin-top: 6px; }
.s-run-k { margin-bottom: 6px; color: #c4b5fd; font: 650 .7rem/1.35 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.s-rec { position: relative; margin-top: 12px; padding: 12px 16px; border-radius: var(--r-lg); color: var(--ink); background: #fff; font-size: .86rem; }
.s-rec .s-run-k { color: var(--accent-press); }
.s-rec ul { display: grid; gap: 2px; margin: 0; padding: 0 0 0 16px; }
.s-rec-n { margin-top: 8px; color: var(--muted); font-size: .8rem; line-height: 1.45; }
.beat-cta { margin-top: 18px; }
.run-stage .capture-cap { max-width: none; }
.run-k { color: var(--accent-press); font: 650 .78rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.run-cap { margin-top: 14px; max-width: 22em; font-size: clamp(1.35rem, 2.1vw, 1.8rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.run-cta { margin-top: 26px; }

/* Both script modes: progress, chips, Next buttons. */
.js .hero-run[data-mode] .run-prog { display: block; height: 3px; background: rgb(255 255 255 / 10%); }
.js .hero-run[data-mode] .run-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), #c4b5fd); transform: scaleX(calc(var(--n, 1) / 4)); transform-origin: left; transition: transform 400ms var(--ease-out); }
.js .hero-run[data-mode] .run-scene[data-beat="1"] { --n: 1; } .js .hero-run[data-mode] .run-scene[data-beat="2"] { --n: 2; }
.js .hero-run[data-mode] .run-scene[data-beat="3"] { --n: 3; } .js .hero-run[data-mode] .run-scene[data-beat="4"] { --n: 4; }
.js .hero-run[data-mode] .run-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.js .run-chips button { min-height: 40px; padding: 8px 16px; border: 1px solid var(--card-line); border-radius: var(--r-pill); color: var(--ink-2); background: #fff; font: 600 .84rem/1.2 var(--sans); cursor: pointer; }
.js .run-chips button[aria-current="step"] { border-color: var(--accent); color: var(--accent-press); background: var(--accent-soft); }
.js .hero-run[data-mode] .s-next-row { display: block; margin-top: 14px; text-align: right; }
.s-next { min-height: 40px; padding: 8px 16px; border: 0; border-radius: var(--r-pill); color: #fff; background: var(--accent); font: 650 .86rem/1.2 var(--sans); cursor: pointer; }
.s-next:hover { background: var(--accent-hover); }
.js .hero-run[data-mode] .beat[data-b="2"]:not(.is-open) .s-doc { display: none; }
.js .hero-run[data-mode] .beat[data-b="2"].is-open :is(.s-files li:not(.s-open-li), .s-files-n) { display: none; }
.js .hero-run[data-mode] .beat[data-b="2"].is-open .s-files { grid-template-columns: minmax(0, 1fr); }
.js .hero-run[data-mode] .run-scene[data-beat]:not([data-beat="1"]) { border-color: rgb(255 255 255 / 10%); background: #17122b; }

/* Compact: one beat at a time; the scene is as tall as its tallest beat, so nothing below it moves. */
.js .hero-run[data-mode="compact"] .beats { grid-template-areas: "b"; }
.js .hero-run[data-mode="compact"] .beat { grid-area: b; border-top: 0; visibility: hidden; opacity: 0; transition: opacity 220ms var(--ease-std), visibility 0s 220ms; }
.js .hero-run[data-mode="compact"] .beat.is-on { visibility: visible; opacity: 1; transition: opacity 220ms var(--ease-std) 40ms; }
.js .hero-run[data-mode="compact"] .beat-k { display: none; }
.js .hero-run[data-mode="compact"] .beat .beat-cta { margin-top: 14px; }
.js .hero-run[data-mode="compact"] .run-stage { margin-top: 0; }
.js .hero-run[data-mode="compact"] .run-stage { display: flex; flex-direction: column; }
.js .hero-run[data-mode="compact"] .run-chips { order: -1; justify-content: flex-start; margin: 0 0 12px; }
.js .hero-run[data-mode="compact"] .beat:not([data-b="1"]) .beat-cap { display: none; }
@media (min-width: 961px) {
  .js .hero-run[data-mode="compact"] { padding-top: clamp(32px, 6vh, 64px); }
  .js .hero-run[data-mode="compact"] .beat { padding: 18px 22px 20px; }
  .js .hero-run[data-mode="compact"] .s-run { font-size: .82rem; }
}

/* Held: wide, tall screens with motion. The scene holds while the steps scroll past. */
.js .hero-run[data-mode="held"] { padding-bottom: 0; }
.js .hero-run[data-mode="held"] .run-steps { display: block; }
.js .hero-run[data-mode="held"] .run-step { display: flex; flex-direction: column; justify-content: center; min-height: 58vh; padding: 40px 0; }
.js .hero-run[data-mode="held"] .run-cap { transition: color 200ms var(--ease-std); }
.js .hero-run[data-mode="held"] .run-step:last-child { min-height: 72vh; }
.js .hero-run[data-mode="held"] .run-step:not(.is-on) .run-cap { color: var(--muted); }
.js .hero-run[data-mode="held"] .run-stage { position: sticky; top: 76px; display: flex; flex-direction: column; justify-content: center; height: calc(100svh - 76px); padding: 16px 0; }
.js .hero-run[data-mode="held"] .run-scene { background: var(--bg-page); transition: background-color 240ms var(--ease-std), border-color 240ms; }
.js .hero-run[data-mode="held"] .run-scene[data-beat]:not([data-beat="1"]) { background: #17122b; }
.js .hero-run[data-mode="held"] .run-line { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; }
.js .hero-run[data-mode="held"] .run-line path { fill: none; stroke: var(--accent-line); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: .7; }
.js .hero-run[data-mode="held"] .run-scene:not([data-beat="1"]) .run-line path { stroke: #4c3d7a; }
.js .hero-run[data-mode="held"] .beats { position: relative; height: min(560px, calc(100svh - 76px - 130px)); }
.js .hero-run[data-mode="held"] .beat { position: absolute; z-index: 1; inset: 16px 24px 16px 48px; overflow: auto; scrollbar-width: none; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-card-lg); opacity: 0; pointer-events: none; transform: translateX(10%) scale(.97); transform-origin: left center; transition: opacity 240ms var(--ease-std), transform 380ms var(--ease-out); }
.js .hero-run[data-mode="held"] .beat-ink { border-color: rgb(255 255 255 / 10%); background: #211a3a; box-shadow: 0 24px 48px -16px rgb(0 0 0 / 55%); }
.js .hero-run[data-mode="held"] .beat.is-on { z-index: 2; opacity: 1; pointer-events: auto; transform: none; transition: opacity 240ms var(--ease-std) 60ms, transform 380ms var(--ease-out) 60ms; }
/* The beat just left steps back and tilts behind the new one. */
.js .hero-run[data-mode="held"] .beat.is-prev { opacity: .3; transform: translateX(-34%) rotate(-5deg) scale(.86); }
.js .hero-run[data-mode="held"] .beat.is-past:not(.is-prev) { transform: translateX(-40%) rotate(-6deg) scale(.8); }
.js .hero-run[data-mode="held"] .beat :is(.beat-k, .beat-cap, .beat-cta) { display: none; }
.js .hero-run[data-mode="held"] .beat[data-b="1"] .beat-cap { display: block; margin-top: 16px; padding: 10px 14px; border-left: 3px solid var(--accent); color: var(--ink); font-size: 1rem; font-weight: 600; }
.js .hero-run[data-mode="held"] { transition: background-color 600ms var(--ease-std); }
.js .hero-run[data-mode="held"].is-ink { background: linear-gradient(160deg, #1b1433 0%, #2a1d52 60%, var(--accent-deep) 100%); }
.js .hero-run[data-mode="held"].is-ink .capture-cap { color: rgb(255 255 255 / 66%); }
.js .hero-run[data-mode="held"].is-ink .run-k { color: #c4b5fd; }
.js .hero-run[data-mode="held"].is-ink .run-cap { color: #fff; }
.js .hero-run[data-mode="held"].is-ink .run-step:not(.is-on) .run-cap { color: rgb(255 255 255 / 60%); }
.js .hero-run[data-mode="held"].is-ink .run-chips button { border-color: rgb(255 255 255 / 18%); color: rgb(255 255 255 / 82%); background: rgb(255 255 255 / 6%); }
.js .hero-run[data-mode="held"].is-ink .run-chips button[aria-current="step"] { border-color: #a78bfa; color: #fff; background: rgb(139 92 246 / 30%); }

/* Inside a beat: each move plays once as the beat arrives. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-run[data-mode] .beat:not(.is-on):not(.is-prev) :is(.s-tiles li, .s-msg, .s-files li, .s-run, .s-rec) { opacity: 0; }
  .js .beat.is-on .s-setting { animation: note-in 260ms var(--ease-out) both; }
  .js .beat.is-on .s-msg { animation: pop 320ms var(--ease-spring) 60ms both; }
  .js .beat.is-on .s-tiles li { animation: rise 300ms var(--ease-out) both; }
  .js .beat.is-on .s-tiles li:nth-child(1) { animation-delay: 200ms; }
  .js .beat.is-on .s-tiles li:nth-child(2) { animation-delay: 250ms; }
  .js .beat.is-on .s-tiles li:nth-child(3) { animation-delay: 300ms; }
  .js .beat.is-on .s-files li { animation: note-in 220ms var(--ease-out) both; }
  .js .beat.is-on .s-files li:nth-child(n+3) { animation-delay: 60ms; } .js .beat.is-on .s-files li:nth-child(n+5) { animation-delay: 120ms; } .js .beat.is-on .s-files li:nth-child(n+7) { animation-delay: 180ms; }
  .js .beat.is-open .s-doc { animation: pop 340ms var(--ease-spring) both; }
  .js .beat.is-open .s-doc mark { animation: mark-in 300ms var(--ease-out) 360ms both; }
  .js .beat.is-open .s-doc-vs { animation: note-in 260ms var(--ease-out) 520ms both; }
  .js .s-options label.is-picked { animation: settle 260ms var(--ease-spring); }
  .js .s-sent:not(:empty) { animation: note-in 220ms var(--ease-out) both; }
  .js .beat.is-on .s-run { animation: rise 300ms var(--ease-out) 40ms both; }
  .js .beat.is-on .s-run-b { animation-delay: 120ms; }
  .js .beat.is-on .s-rec { animation: rise 340ms var(--ease-out) 340ms both; }
}
.s-run-b { border-color: #a78bfa; }

@media (max-width: 960px) {
  .run-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
/* A phone: the headline, one explanation and the two entrances, then the case at once; the notes follow it. */
@media (max-width: 720px) {
  .run-grid { gap: 0; }
  .run-copy, .hero-run .hero-copy { display: contents; }
  .hero-run .hero-copy > * { order: 0; }
  .hero-run .run-stage, .js .hero-run[data-mode="compact"] .run-stage { order: 1; margin-top: 24px; }
  .hero-run :is(.hero-trainer, .hero-note) { order: 2; }
  .hero-run .hero-trainer { margin-top: 20px; }
  .run-bar { font-size: .66rem; white-space: nowrap; }
  .js .hero-run[data-mode="compact"] .run-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .js .hero-run[data-mode="compact"] .run-chips button { flex: none; min-height: 36px; padding: 6px 14px; font-size: .8rem; }
}
@media (max-width: 560px) {
  .s-runs { grid-template-columns: minmax(0, 1fr); }
  .hero-run .btn-row .btn { width: 100%; }
}

@media print {
  .js .hero-run[data-mode] .beats { display: block; height: auto; }
  .js .hero-run[data-mode] .beat { position: static; visibility: visible; opacity: 1; transform: none; }
  .js .hero-run[data-mode] .run-steps, .js .hero-run[data-mode] .run-chips, .s-next-row { display: none; }
}

.rail-compact li { padding: 18px 20px; }
.rail-compact::before { top: 35px; }

/* ---------- In the room (D105): one chain from a decision to an action, then the real group screen ---------- */
.section-room { padding: clamp(64px, 8vw, 112px) 0; background: #fff; }
.room-label { margin-top: 14px; color: var(--muted); font: 500 .74rem/1.45 var(--mono); }
.room-step { margin-bottom: 12px; color: var(--accent-press); font: 650 .78rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.room-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.room-list li { position: relative; padding-left: 16px; color: var(--ink-2); font-size: .92rem; line-height: 1.45; }
.room-list li::before { content: ""; position: absolute; top: .55em; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.chain { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.chain::before { content: ""; position: absolute; top: 7px; right: 6%; left: 6%; height: 2px; background: linear-gradient(90deg, var(--accent), #c4b5fd); transform-origin: left; }
.chain-n { position: relative; padding-top: 28px; }
.chain-n::before { content: ""; position: absolute; top: 0; left: 0; width: 16px; height: 16px; border: 3px solid #fff; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent-line); }
.chain-card { padding: 16px 18px; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-card); }
.chain-who { margin-bottom: 8px; color: var(--muted); font: 500 .74rem/1.3 var(--mono); }
.chain-calls { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chain-calls li { display: flex; gap: 10px; align-items: baseline; padding: 9px 12px; border: 1px solid var(--card-line); border-radius: var(--r-md); background: #fff; box-shadow: var(--shadow-card); font-size: .9rem; font-weight: 600; line-height: 1.35; }
.chain-calls span { flex: none; color: var(--accent-press); font: 650 .74rem/1.3 var(--mono); }
.chain-q p { font-size: 1.05rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.4; }
.chain-act { border-color: var(--accent-line); background: var(--accent-soft); }
.chain-act p:first-child { font-weight: 650; line-height: 1.45; }
.chain-owner { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chain-owner span { padding: 3px 10px; border-radius: var(--r-pill); color: var(--accent-press); background: #fff; font: 600 .74rem/1.4 var(--mono); }
.room-proof { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; margin-top: clamp(56px, 7vw, 88px); }
.room-proof-copy h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 650; letter-spacing: -.02em; }
.room-proof-copy p { margin: 12px 0 22px; color: var(--ink-2); line-height: 1.55; }
.findings { display: none; padding: 18px; border: 1px solid var(--card-line); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-card); }
.findings-k { margin-bottom: 6px; font-size: 1.05rem; font-weight: 650; }
.findings ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.findings li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--card-line-soft); }
.findings li p { font-size: .9rem; font-weight: 600; line-height: 1.35; }
.findings li b { font-size: .95rem; }
.findings small { grid-column: 1 / -1; color: var(--muted); font-size: .8rem; }
.fbar { grid-column: 1 / -1; position: relative; display: block; height: 10px; border-radius: var(--r-pill); background: #efeaf8; }
.fbar::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: 50%; width: 1px; background: #b9b1cc; }
.fbar i { position: absolute; top: 0; bottom: 0; left: calc(var(--lo) * 1%); width: calc((var(--hi) - var(--lo)) * 1%); border-radius: var(--r-pill); background: #4a4458; }
.shot-open { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; margin-left: 6px; }
.shot-dlg { width: min(1200px, 96vw); max-width: none; max-height: 92vh; padding: 12px; border: 0; border-radius: var(--r-xl); box-shadow: var(--shadow-float); }
.shot-dlg::backdrop { background: rgb(20 16 36 / 72%); }
.shot-dlg form { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.shot-scroll { overflow: auto; max-height: calc(92vh - 80px); }
.shot-scroll img { display: block; width: 100%; min-width: 900px; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .js .chain[data-reveal] { opacity: 1; transform: none; }
  .js .chain::before { transform: scaleX(0); transition: transform 900ms var(--ease-draw); }
  .js .chain.is-in::before { transform: none; }
  .js .chain:not(.is-in) .chain-n { opacity: 0; transform: translateY(var(--rise)); }
  .js .chain.is-in .chain-n { transition: opacity 300ms var(--ease-out) calc(var(--i) * 120ms), transform 300ms var(--ease-out) calc(var(--i) * 120ms); }
  /* One record becomes four decisions: the cards fan out from the first. */
  .js .chain:not(.is-in) .chain-calls li { opacity: 0; transform: translate(-60%, calc(var(--j) * -42px)) scale(.9); }
  .js .chain.is-in .chain-calls li { transition: transform 400ms var(--ease-out) calc(120ms + var(--j) * 50ms), opacity 260ms calc(120ms + var(--j) * 50ms); }
  /* The question becomes an action, then gains its owner and date. */
  .js .chain:not(.is-in) .chain-owner span { opacity: 0; transform: translateY(6px); }
  .js .chain.is-in .chain-owner span { transition: opacity 240ms var(--ease-out) 400ms, transform 240ms var(--ease-out) 400ms; }
  .js .chain.is-in .chain-owner span + span { transition-delay: 450ms; }
}
@media (max-width: 960px) {
  .chain { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-left: 30px; }
  .chain::before { top: 6px; bottom: 6px; left: 7px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--accent), #c4b5fd); transform-origin: top; }
  .js .chain:not(.is-in)::before { transform: scaleY(0); }
  .chain-n { padding-top: 0; }
  .chain-n::before { left: -30px; }
  .room-proof { grid-template-columns: minmax(0, 1fr); }
}
/* A phone shows the three findings as text; the full screen opens on request. */
@media (max-width: 720px) {
  .room-crop { display: none; }
  .findings { display: block; }
}

/* ---------- The problem (D105): AI's part beside the person's part ---------- */
.ledger { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ledger li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); border: 1px solid var(--card-line); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.ledger p { padding: 16px 20px; line-height: 1.45; }
.ledger p span { display: block; margin-bottom: 4px; font: 650 .7rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.ledger-ai { color: var(--ink-2); background: var(--ai-soft); }
.ledger-ai span { color: var(--ai); }
.ledger-you { position: relative; font-weight: 650; }
.ledger-you span { color: var(--accent-press); }
.ledger-you::before { content: "\2192"; position: absolute; top: 50%; left: -11px; display: grid; place-items: center; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; color: #fff; background: var(--accent); font-size: .8rem; }
.ledger-def { margin-top: 24px; max-width: 46em; color: var(--ink); font-size: 1.1rem; font-weight: 600; line-height: 1.5; }
@media (max-width: 720px) {
  .ledger li { grid-template-columns: minmax(0, 1fr); }
  .ledger-you::before { content: "\2193"; top: -11px; left: 20px; margin-top: 0; }
}

/* The gap, drawn: an AI answer, the person's checks, the business result. One
   sequence, played once as the figure arrives; the final frame is the whole
   picture. Opacity and transform only. Delays are in the markup (--d). */
.gapfig { margin: 0 0 28px; padding: clamp(20px, 3.2vw, 40px); border: 1px solid var(--card-line); border-radius: var(--r-2xl); background: linear-gradient(135deg, #fff 0%, var(--bg-page-soft) 45%, var(--pastel-mist) 100%); box-shadow: var(--shadow-card); }
.gapfig-stage { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1.35fr) 44px minmax(0, 1fr); align-items: center; max-width: 1080px; margin: 0 auto; }
.gf-card { position: relative; display: grid; gap: 8px; align-content: start; padding: 20px 22px; border: 1px solid var(--card-line); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-float); }
.gf-card strong { font-size: 1.12rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.28; }
.gf-card small { color: var(--muted); font-size: .86rem; line-height: 1.4; }
.gf-tag { width: fit-content; padding: 3px 9px; border-radius: var(--r-pill); color: var(--accent-press); background: var(--accent-soft); font: 650 .66rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.gf-tag-ai { color: var(--ai); background: var(--ai-soft); }
.gf-tag-result { color: #fff; background: var(--accent); }
.gf-ai { border-color: var(--tool-line); }
.gf-result { border-color: var(--accent-line); }
.gf-gap { position: relative; display: grid; padding: 34px 14px 14px; border: 2px dashed var(--accent-line); border-radius: calc(var(--r-xl) + 8px); }
.gf-gap-label { position: absolute; top: -10px; left: 50%; padding: 0 10px; color: var(--accent-press); background: var(--bg-page-soft); font: 650 .66rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transform: translateX(-50%); }
.gf-person { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 12px; padding: 16px 18px; }
.gf-person .gf-tag { grid-column: 1 / -1; }
.gf-face { display: block; border-radius: 50%; }
.gf-checks { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.gf-checks li { display: flex; align-items: center; gap: 9px; color: var(--ink-2); font-size: .9rem; font-weight: 550; line-height: 1.3; }
.gf-checks i { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); }
.gf-checks i::after { content: ""; position: absolute; top: 4px; left: 7px; width: 5px; height: 9px; border: solid var(--accent-press); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.gf-link { position: relative; display: block; height: 2px; background: var(--gradient-rail); transform-origin: left; }
.gf-link::after { content: ""; position: absolute; top: -4px; right: -1px; width: 8px; height: 8px; border: solid var(--accent); border-width: 2px 2px 0 0; transform: rotate(45deg); }
.gf-link-b { height: 4px; border-radius: 2px; background: var(--accent); }
.gf-link-b::after { top: -2px; }
.gf-replay { display: flex; align-items: center; gap: 6px; margin: 18px 0 -8px auto; padding: 6px 4px; border: 0; color: var(--accent-press); background: none; font: 650 .82rem/1.2 var(--sans); cursor: pointer; }
.gf-replay:hover { color: var(--accent); }

.js .gapfig .gf-card, .js .gapfig .gf-gap, .js .gapfig .gf-checks li { opacity: 0; transform: translateY(var(--rise)); }
.js .gapfig .gf-checks li { transform: translateX(-10px); }
.js .gapfig .gf-checks i::after, .js .gapfig .gf-checks i { transform: none; }
.js .gapfig .gf-checks i::after { opacity: 0; transform: rotate(45deg) scale(.4); }
.js .gapfig .gf-link { transform: scaleX(0); }
.js .gapfig.is-play .gf-card, .js .gapfig.is-play .gf-gap, .js .gapfig.is-play .gf-checks li { opacity: 1; transform: none; transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); transition-delay: var(--d, 0ms); }
.js .gapfig.is-play .gf-checks i::after { opacity: 1; transform: rotate(45deg); transition: opacity 200ms var(--ease-out), transform 360ms var(--ease-spring); transition-delay: calc(var(--d, 0ms) + 380ms); }
.js .gapfig.is-play .gf-link { transform: none; transition: transform var(--t-draw) var(--ease-draw); transition-delay: var(--d, 0ms); }
.js .gapfig.is-play .gf-link-a { transition-duration: 380ms; }
.js .gapfig .gf-link::after { opacity: 0; }
.js .gapfig.is-play .gf-link::after { opacity: 1; transition: opacity 120ms linear; transition-delay: calc(var(--d, 0ms) + 340ms); }
.js .gapfig.is-play .gf-link-b::after { transition-delay: calc(var(--d, 0ms) + 540ms); }
@media (max-width: 860px) {
  .gapfig-stage { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .gf-link { width: 2px; height: 40px; margin: 0 auto; transform-origin: top; }
  .gf-link::after { top: auto; right: -4px; bottom: -1px; transform: rotate(135deg); }
  .gf-link-b { width: 4px; height: 40px; }
  .gf-link-b::after { right: -2px; }
  .js .gapfig .gf-link { transform: scaleY(0); }
  .gf-gap-label { white-space: normal; width: max-content; max-width: 90%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .gf-replay { display: none; }
  .js .gapfig :is(.gf-card, .gf-gap, .gf-checks li, .gf-link) { opacity: 1; transform: none; }
  .js .gapfig .gf-checks i::after { opacity: 1; transform: rotate(45deg); }
  .js .gapfig .gf-link::after { opacity: 1; }
}

/* ---------- The three cases (D102) ---------- */
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.case { overflow: hidden; border: 1px solid var(--card-line); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-card); transition: transform 180ms ease, box-shadow 180ms ease; }
.case img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 500ms var(--ease-out); }
.case-in { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; }
.case h3 { font-size: 1.15rem; font-weight: 650; letter-spacing: -.02em; }
.case p { color: var(--ink-2); font-size: .94rem; line-height: 1.55; }
.case .case-q { color: var(--accent-press); font-weight: 650; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .case:hover, .case:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
  .case:hover img, .case:focus-within img { transform: scale(1.04); }
  .case .case-q { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 300ms var(--ease-out), opacity 300ms; }
  .case:hover .case-q, .case:focus-within .case-q { max-height: 4em; opacity: 1; }
}
.cases + .capture-cap { margin-bottom: clamp(36px, 5vw, 56px); }
@media (max-width: 960px) { .cases { grid-template-columns: minmax(0, 1fr); } }
details.forward > summary { cursor: pointer; list-style: none; }
details.forward > summary::-webkit-details-marker { display: none; }
details.forward > summary::after { content: " +"; }
details.forward[open] > summary::after { content: " \2212"; }