/* aripone.com shared styles. Values come from /assets/theme.css only (no colours here, tested).
   Mobile first; no horizontal scroll at 320px. Plain CSS, no build.

   CLASS INDEX (what page authors can use; every page loads theme.css + site.css)
   Base        .wrap (content column) .vh (visually hidden) .skip (skip link) .signal (amber text)
               .muted (--ink-2) .label (mono uppercase label) .index ("01 / 04" counter) .lead (intro paragraph)
               .statement (huge uppercase two-liner) .small .mono .prose (long-form article text)
   Layout      .section (vertical band with top rule) .section-head (label + h2 + intro) .grid (auto columns)
               .grid-2 .grid-3 (fixed columns from 960px) .split (text left, figure right from 960px) .stack (vertical gap)
   Header      .site-header .brand .nav (#site-nav) .nav-book (the bordered nav action) .menu-toggle
   Footer      .site-footer .footer-grid .footer-nav .footer-note
   Hero        .hero (first screen; .hero-content holds the text, a .scene--bleed figure sits behind it)
               .hero-title (.line per line) .actions (button row)
   Actions     .btn (solid amber, the one primary action) .btn-bracket (corner-bracket secondary) .btn-line (quiet
               outlined, used by forms and tools) .arrow-link (inline text link with an arrow svg)
   Cards       .card (numbered card; lifts on hover) .card-body .card-link (stretched link covering the card)
   Rows        .rows (numbered link rows, e.g. self-checks) > li > .row-index .row-title .row-text .row-meta
   Numbers     .stats > .stat > .stat-value .stat-label   (big mono figure plus one line)
   Price       .price-block .price-amount .price-unit .price-terms   (published fee and its terms)
   Lists       .checklist (marked list; .checklist.is-signal for amber marks) .numbered (counted steps)
   Callout     .callout (amber-ruled note; .callout.is-ok for a sound/ok note)
   Table       .table (inside .table-wrap for horizontal scroll on phones)
   Scene       .scene (figure: canvas + .scene-pause + figcaption; driven by dots.js via data-dots / data-drive)
               .scene--bleed (fills its positioned parent, used behind the hero) .scene--card (inside a card)
               .scene--stage (the sticky stage of a scroll track) .scene-track (data-dots-track; sticky scroll section)
               .track-steps > .track-step (text beside the stage; the active one is marked via data-step)
   Forms       .form .form-panel .field (label + input) .opt (optional tag) .field-error (message under a field)
               .consent (checkbox row) .hp (honeypot, offscreen) .cta (submit row) .form-state (#id:target or
               .is-shown reveals it; [data-kind="error"] for failures) .js-line/.ns-line (helpers stay as pages set them)
   Page head   .pagehead (inner-page opener)
   Story       .story .story-flow .story-stage .beat .beat-card (practice-page scroll opener) .duo .steps .step .tiers
               .findings .f-bar .f-dur .k .sum .ex-score .ex-verdict .fig-note .state-ok .state-bad
   Tools       .tool (main) .tool-head .tool-body #form .area .q .seg (answer chips) .result .score-row .score
               .band[data-b] .progress .bars .bar .track .fill[data-l] .first .block .toast .note .example-note
               .tool-status (sticky phone strip) .results-email .form-col .tool-notes .crumb
   Motion      .reveal (fades and rises when it enters; set style="--d:N" to stagger) .lift (hover lift only)
*/

/* ---------- Fonts (self-hosted, Latin subset; licences in /assets/fonts/OFL-*.txt) ---------- */
@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("/assets/fonts/martian-mono.woff2") format("woff2"); font-weight: 100 800; font-stretch: 75% 112.5%; font-style: normal; font-display: swap; }

/* ---------- Reset and base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); scrollbar-color: var(--line-2) var(--bg); scroll-padding-top: calc(var(--header-h) + var(--s4)); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-width: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: var(--step-0); font-weight: var(--weight-body); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
::selection { background: var(--signal); color: var(--signal-ink); }
input, textarea, select { caret-color: var(--signal); }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 1px; text-underline-offset: 5px; transition: text-decoration-color var(--dur-1) ease, color var(--dur-1) ease; }
a:hover { text-decoration-color: var(--signal); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 1px; }
p { text-wrap: pretty; }
b, strong { font-weight: 620; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.skip { position: absolute; left: var(--s4); top: -80px; z-index: 100; padding: var(--s2) var(--s3); background: var(--surface); color: var(--ink); border: 1px solid var(--signal); }
.skip:focus { top: var(--s4); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Type roles: uppercase grotesk headlines, mono labels, plain body ---------- */
h1, h2, h3, .statement { font-weight: var(--weight-display); font-stretch: calc(var(--display-wdth) * 1%); text-transform: uppercase; letter-spacing: var(--tracking-display); text-wrap: balance; overflow-wrap: break-word; }
h1 { font-size: var(--step-5); line-height: 0.94; }
h2 { font-size: var(--step-3); line-height: 1; }
h3 { font-size: var(--step-2); line-height: 1.05; letter-spacing: -0.01em; }
.statement { font-size: var(--step-4); line-height: 0.98; }
.lead { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); max-width: 46ch; }
.lead strong { color: var(--ink); }
.small { font-size: var(--step--1); }
.muted { color: var(--ink-2); }
.signal { color: var(--signal); }
.mono, code { font-family: var(--font-mono); font-stretch: calc(var(--label-wdth) * 1%); font-size: 0.875em; font-variant-numeric: tabular-nums; }
.label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); font-family: var(--font-mono); font-stretch: calc(var(--label-wdth) * 1%); font-size: var(--step--2); font-weight: 400; line-height: 1.5; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-3); }
.label::before { content: ""; width: 6px; height: 6px; background: var(--signal); }
.label.plain::before { content: none; }
.index { color: var(--ink-2); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

.prose { max-width: var(--measure); display: grid; gap: var(--s4); }
.prose h2, .prose h3 { text-transform: none; letter-spacing: -0.01em; font-stretch: 104%; margin-top: var(--s5); }
.prose h2 { font-size: var(--step-2); line-height: 1.15; }
.prose h3 { font-size: var(--step-1); line-height: 1.25; }
.prose ul, .prose ol { display: grid; gap: var(--s2); padding-left: 1.2em; }
.prose ul { list-style: square; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--ink-3); }
.prose code { padding: 1px 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }

/* ---------- Layout ---------- */
.section { position: relative; padding-block: clamp(var(--s8), 9vw, var(--s10)); border-top: 1px solid var(--line); }
.section-head { display: grid; gap: var(--s4); max-width: 56rem; margin-bottom: clamp(var(--s6), 5vw, var(--s8)); }
.section-head p:not(.label) { max-width: var(--measure); color: var(--ink-2); font-size: var(--step-1); line-height: 1.5; }
.stack { display: grid; gap: var(--s4); align-content: start; }
.grid { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid-2, .grid-3, .split { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); }
.split > * { min-width: 0; }
.split .scene { min-height: 0; width: 100%; }   /* a 4:3 scene's min-height would force ~293px at 320px */
@media (min-width: 960px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); align-items: center; }
}

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--tap); color: var(--ink); text-decoration: none; font-weight: 700; font-stretch: 118%; font-size: 1.0625rem; letter-spacing: 0.16em; text-transform: uppercase; }
.brand::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 10px 0 0 var(--ink), 20px 0 0 var(--ink); margin-right: 24px; }
.nav { display: flex; align-items: center; gap: var(--s5); }
.nav a { color: var(--ink-2); text-decoration: none; font-family: var(--font-mono); font-stretch: calc(var(--label-wdth) * 1%); font-size: var(--step--2); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.nav a:hover, .nav a[aria-current] { color: var(--ink); }
.nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--signal); }
.nav .nav-book[aria-current="page"] { color: var(--signal-ink); text-decoration: none; }
.nav .nav-book { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s3); color: var(--signal-ink); background: var(--signal); border-radius: var(--radius); font-weight: 600; transition: background var(--dur-1) ease; }
.nav .nav-book:hover { color: var(--signal-ink); background: var(--signal-hi); }
.menu-toggle { display: none; }
@media (max-width: 899px) {
  .nav { display: none; position: absolute; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; max-height: calc(100svh - var(--header-h)); overflow-y: auto; background: var(--bg); border-bottom: 1px solid var(--line); padding: var(--s2) var(--gutter) var(--s5); }
  .nav a { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--line); font-size: var(--step--1); }
  .nav .nav-book { justify-content: center; margin-top: var(--s4); min-height: 48px; border: 0; }
  .site-header.open .nav { display: flex; }
  .menu-toggle { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--tap); padding: 0 var(--s3); background: none; color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius); font: 400 var(--step--2) var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; cursor: pointer; }
  .no-js .site-header .wrap { flex-wrap: wrap; padding-block: var(--s3); }
  .no-js .nav { display: flex; position: static; flex-direction: row; flex-wrap: wrap; gap: var(--s2) var(--s4); padding: 0; border: 0; background: none; max-height: none; }
  .no-js .nav a { min-height: var(--tap); border: 0; }
  .no-js .nav .nav-book { margin-top: 0; padding: 0 var(--s3); }
  .no-js .menu-toggle { display: none; }
}

/* ---------- Actions ---------- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.btn, .btn-bracket, .btn-line { display: inline-flex; align-items: center; justify-content: center; gap: var(--s3); min-height: 48px; padding: 0 var(--s5); font-family: var(--font-sans); font-size: var(--step--1); font-weight: 640; font-stretch: 108%; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; border-radius: var(--radius); cursor: pointer; transition: background var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease, background-size var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.btn { background: var(--signal); color: var(--signal-ink); border: 1px solid var(--signal); }
.btn:hover { background: var(--signal-hi); border-color: var(--signal-hi); color: var(--signal-ink); }
.btn svg, .btn-bracket svg, .btn-line svg { width: 18px; height: 10px; flex: none; transition: transform var(--dur-1) var(--ease-out); }
.btn:hover svg, .btn-bracket:hover svg { transform: translateX(3px); }
.btn:active, .btn-bracket:active, .btn-line:active { transform: translateY(1px); }
/* corner brackets drawn with eight gradients; they grow on hover */
.btn-bracket { --b: var(--bracket); color: var(--ink); background-color: transparent; border: 0; font-family: var(--font-mono); font-weight: 400; font-stretch: calc(var(--label-wdth) * 1%); font-size: var(--step--2); letter-spacing: var(--tracking-label);
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
                    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
  background-size: var(--b) 1px, 1px var(--b), var(--b) 1px, 1px var(--b), var(--b) 1px, 1px var(--b), var(--b) 1px, 1px var(--b);
  background-repeat: no-repeat; }
.btn-bracket:hover { --b: 16px; color: var(--signal); }
.btn-line { color: var(--ink); background: none; border: 1px solid var(--ink-3); font-weight: 560; }
.btn-line:hover { border-color: var(--ink); }
button.btn, button.btn-bracket, button.btn-line { font-family: inherit; }
button.btn-bracket { font-family: var(--font-mono); }
.btn:disabled, .btn-line:disabled, .btn-bracket:disabled { opacity: 0.55; cursor: progress; }
.arrow-link { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 560; text-decoration: none; }
.arrow-link span { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 5px; transition: text-decoration-color var(--dur-1) ease; }
.arrow-link:hover span { text-decoration-color: var(--signal); }
.arrow-link svg { width: 18px; height: 10px; flex: none; transition: transform var(--dur-1) var(--ease-out); }
.arrow-link:hover svg { transform: translateX(3px); }

/* ---------- Hero: text over a full-bleed scene ---------- */
.hero { position: relative; display: grid; align-items: end; min-height: calc(100svh - var(--header-h)); padding-block: var(--s9) clamp(var(--s7), 7vh, var(--s9)); overflow: hidden; isolation: isolate; }
.hero-content { position: relative; z-index: 1; display: grid; gap: var(--s5); pointer-events: none; }
.hero-content a, .hero-content button { pointer-events: auto; }
.hero-title .line { display: block; }
.hero .lead { max-width: 44ch; }
@media (min-width: 1024px) and (max-height: 760px) { .hero { padding-block: var(--s7) var(--s6); } .hero-content { gap: var(--s4); } }

/* ---------- Statement band ---------- */
.statement-grid { display: grid; gap: var(--s6); }
.statement-grid p:not(.label) { max-width: var(--measure); color: var(--ink-2); font-size: var(--step-1); line-height: 1.5; }
@media (min-width: 960px) { .statement-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: end; } }

/* ---------- Cards: numbered, each may carry a scene; lift on hover ---------- */
.card { position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) ease, background var(--dur-2) ease; }
.card:hover, .lift:hover { transform: translateY(var(--lift)); }
.card:hover { border-color: var(--line-2); background: var(--surface-2); }
.lift { transition: transform var(--dur-2) var(--ease-out); }
.card-body { display: grid; gap: var(--s3); align-content: start; padding: var(--s5); }
.card-body p:not(.label) { color: var(--ink-2); }
.card-link { margin-top: var(--s2); display: inline-flex; align-items: center; gap: var(--s2); font-weight: 560; text-decoration: none; }
.card-link span { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 5px; }
.card-link svg { width: 18px; height: 10px; transition: transform var(--dur-1) var(--ease-out); }
.card:hover .card-link span { text-decoration-color: var(--signal); }
.card:hover .card-link svg { transform: translateX(4px); }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.card .scene { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.card .scene-pause { z-index: 2; }

/* ---------- Numbered rows (self-checks, link lists) ---------- */
.rows { border-top: 1px solid var(--line-2); }
.rows > li { position: relative; display: grid; grid-template-columns: 3.2em minmax(0, 1fr); gap: var(--s2) var(--s4); padding: var(--s5) var(--s2); border-bottom: 1px solid var(--line-2); transition: background var(--dur-2) ease; }
.rows > li:hover { background: var(--surface); }
.row-index { font-family: var(--font-mono); font-stretch: calc(var(--label-wdth) * 1%); font-size: var(--step--2); letter-spacing: var(--tracking-label); color: var(--ink-3); padding-top: 0.5em; }
.row-title { font-size: var(--step-2); }
.row-title a { text-decoration: none; }
.row-title a::after { content: ""; position: absolute; inset: 0; }
.row-title a:hover { color: var(--signal); }
.row-text { grid-column: 2; color: var(--ink-2); max-width: var(--measure); }
.row-meta { grid-column: 2; font-family: var(--font-mono); font-stretch: calc(var(--label-wdth) * 1%); font-size: var(--step--2); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-3); }
@media (min-width: 960px) {
  .rows > li { grid-template-columns: 4em minmax(0, 5fr) minmax(0, 5fr) minmax(0, 2fr); align-items: baseline; padding-inline: var(--s3); }
  .row-text, .row-meta { grid-column: auto; }
  .row-meta { text-align: right; }
}

/* ---------- Stats: a big mono figure plus one line ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); border-top: 1px solid var(--line-2); }
.stat { display: grid; gap: var(--s3); align-content: start; padding: var(--s5) var(--s4) var(--s6) 0; border-bottom: 1px solid var(--line); }
.stat-value { font-family: var(--font-mono); font-stretch: calc(var(--label-wdth) * 1%); font-size: var(--step-3); font-weight: 400; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-value small { font-size: var(--step--1); letter-spacing: 0; color: var(--ink-3); }
.stat-label { color: var(--ink-2); max-width: 34ch; }

/* ---------- Price block ---------- */
.price-block { display: grid; gap: var(--s4); align-content: start; padding: var(--s5); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-card); }
.price-amount { display: block; font-family: var(--font-mono); font-stretch: calc(var(--label-wdth) * 1%); font-size: var(--step-4); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-unit { display: block; margin-top: var(--s2); color: var(--ink-2); font-size: var(--step--1); }
.price-terms { padding-top: var(--s3); border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--step--1); }
@media (min-width: 768px) { .price-block { padding: var(--s6); } }

/* ---------- Lists ---------- */
.checklist { display: grid; gap: var(--s3); }
.checklist li { position: relative; padding-left: 1.6em; color: var(--ink-2); }
.checklist li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border: 1px solid var(--ink-3); }
.checklist.is-signal li::before { background: var(--signal); border-color: var(--signal); }
.checklist li strong { color: var(--ink); }
.numbered { display: grid; gap: var(--s4); counter-reset: n; }
.numbered > li { position: relative; padding-left: 3em; counter-increment: n; }
.numbered > li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: 0.2em; font-family: var(--font-mono); font-stretch: calc(var(--label-wdth) * 1%); font-size: var(--step--2); letter-spacing: var(--tracking-label); color: var(--ink-3); }

/* ---------- Callout ---------- */
.callout { display: grid; gap: var(--s2); padding: var(--s4) var(--s5); background: var(--surface); border: 1px solid var(--line); border-top-color: var(--signal); border-radius: var(--radius); }
.callout.is-ok { border-top-color: var(--ok); }
.callout p { color: var(--ink-2); }

/* ---------- Table ---------- */
.table-wrap { overflow-x: auto; }   /* give it tabindex="0" role="region" aria-label so keyboards can scroll it */
.table-wrap:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
.table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.table caption { text-align: left; padding-bottom: var(--s3); color: var(--ink-3); font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.02em; }   /* captions are sentences: sentence case */
.table th, .table td { padding: var(--s3) var(--s3) var(--s3) 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table th { color: var(--ink-3); font-family: var(--font-mono); font-stretch: calc(var(--label-wdth) * 1%); font-size: var(--step--2); font-weight: 400; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.table td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Scene frame (dots.js) ----------
   <figure class="scene" data-dots="NAME" data-drive="loop|scroll"><canvas aria-hidden="true"></canvas>
   <button class="scene-pause" type="button">Pause</button><figcaption>...</figcaption></figure>
   Without JS the canvas and button hide and the caption stays. Set --ratio for a different shape. */
.scene { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; aspect-ratio: var(--ratio, 4 / 3); min-height: 220px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-card); }
.no-js .scene { background-image: radial-gradient(var(--line-2) 1px, transparent 1.6px); background-size: 14px 14px; }
.scene canvas { width: 100%; height: 100%; min-height: 0; }
/* the caption sits in a strip under the drawing, so canvas labels and caption never collide */
.scene figcaption { min-height: 56px; padding: var(--s2) 6.5rem var(--s3) var(--s4); font-family: var(--font-mono); font-stretch: calc(var(--label-wdth) * 1%); font-size: var(--step--2); line-height: 1.5; letter-spacing: 0.04em; color: var(--ink-3); text-wrap: balance; }
.scene-pause { position: absolute; bottom: 6px; right: var(--s3); z-index: 2; display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--s3); background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--ink-2); border: 1px solid var(--line-2); border-radius: var(--radius); font: 400 var(--step--2) var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; cursor: pointer; transition: color var(--dur-1) ease, border-color var(--dur-1) ease; }
.scene-pause:hover { color: var(--ink); border-color: var(--ink-3); }
/* out of sight until the scene is hovered or the button has keyboard focus; it stays in the tab order
   and the accessibility tree, so the pause control (WCAG 2.2.2) is always reachable. Once paused it stays shown so Play can be found. */
.scene-pause { opacity: 0; pointer-events: none; transition: opacity var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease; }
.scene:hover .scene-pause, .card:hover .scene-pause, .scene-pause:focus-visible, .scene-pause.is-paused { opacity: 1; pointer-events: auto; }
.no-js .scene canvas, .no-js .scene-pause { display: none; }
.no-js .scene figcaption { grid-row: 2; }
@media (prefers-reduced-motion: reduce) { .scene-pause { display: none; } }
@media (pointer: coarse) { .scene-pause { min-height: var(--tap); } }
/* behind the hero: fills the hero, no frame; a scrim keeps the text legible */
.scene--bleed { position: absolute; inset: 0; z-index: 0; display: block; aspect-ratio: auto; min-height: 0; border: 0; border-radius: 0; background: none; }
.scene--bleed canvas { position: absolute; inset: 0; }
.no-js .scene--bleed { background: none; }
.scene--bleed::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 30%, transparent 62%); }
.scene--bleed figcaption { position: absolute; right: var(--gutter); top: calc(var(--s3) + 52px); z-index: 1; min-height: 0; max-width: 30ch; padding: 0; text-align: right; }
.scene--bleed .scene-pause { top: var(--s3); bottom: auto; right: var(--gutter); }
@media (min-width: 900px) {
  .scene--bleed::after { background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 78%, transparent) 34%, transparent 62%), linear-gradient(0deg, var(--bg) 0%, transparent 24%); }
}
.scene--card { --ratio: 4 / 3; }
/* sticky scroll track: a stage that stays while its steps scroll past */
.scene-track { position: relative; display: grid; gap: var(--s5); }
.scene--stage { --ratio: auto; align-self: start; position: sticky; top: var(--header-h); z-index: 2; height: 46svh; min-height: 260px; aspect-ratio: auto; border-radius: 0 0 var(--radius-card) var(--radius-card); border-top: 0; }
.track-steps { display: grid; }
.track-step { display: grid; gap: var(--s3); align-content: start; min-height: 56svh; padding-block: var(--s5) var(--s6); }
.track-step h3 { color: var(--ink-2); transition: color var(--dur-2) ease; }
.track-step p { max-width: 46ch; color: var(--ink-2); }
.track-step .index { transition: color var(--dur-2) ease; }
.scene-track[data-step="0"] .track-step:nth-child(1) h3, .scene-track[data-step="1"] .track-step:nth-child(2) h3,
.scene-track[data-step="2"] .track-step:nth-child(3) h3, .scene-track[data-step="3"] .track-step:nth-child(4) h3 { color: var(--ink); }
.scene-track[data-step="0"] .track-step:nth-child(1) .index, .scene-track[data-step="1"] .track-step:nth-child(2) .index,
.scene-track[data-step="2"] .track-step:nth-child(3) .index, .scene-track[data-step="3"] .track-step:nth-child(4) .index { color: var(--signal); }
.scene-track:not([data-step]) .track-step h3 { color: var(--ink); }
@media (min-width: 960px) {
  .scene-track { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); }
  .scene--stage { grid-column: 2; grid-row: 1; top: calc(var(--header-h) + var(--s5)); height: calc(100svh - var(--header-h) - var(--s5) * 2); border-top: 1px solid var(--line); border-radius: var(--radius-card); }
  .track-steps { grid-column: 1; grid-row: 1; }
  .track-step { align-content: center; min-height: 78svh; }
}
.no-js .scene--stage { position: relative; top: 0; }
.no-js .scene--stage { height: auto; min-height: 0; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius-card); }
.no-js .track-step { min-height: 0; }
@media (max-height: 500px) { .scene--stage { position: relative; top: 0; } .track-step { min-height: 0; } }

/* ---------- Forms (booking and emailed results) ---------- */
.form { display: grid; gap: var(--s5); }
.form-panel { padding: var(--s6) var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
@media (min-width: 768px) { .form-panel { padding: var(--s7); } }
.form-panel > h2 { font-size: var(--step-2); }
.field { display: grid; gap: var(--s2); }
.field label { font-size: var(--step--1); font-weight: 560; color: var(--ink); }
.opt { margin-left: var(--s2); font-family: var(--font-mono); font-stretch: calc(var(--label-wdth) * 1%); font-size: var(--step--2); font-weight: 400; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-3); }
.field input, .field textarea, .field select { width: 100%; min-height: 48px; padding: var(--s3) var(--s4); font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--ink-3); border-radius: var(--radius); transition: border-color var(--dur-1) ease; }
.field textarea { min-height: 5.5em; line-height: 1.5; resize: vertical; }
.field textarea[readonly] { font-family: var(--font-mono); font-stretch: calc(var(--label-wdth) * 1%); font-size: var(--step--2); color: var(--ink-2); min-height: 13em; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: 1; }
.field input:hover, .field textarea:hover { border-color: var(--ink-2); }
.field input:focus, .field textarea:focus { border-color: var(--signal); }
.field input:user-invalid, .field textarea:user-invalid, .field.is-invalid input, .field.is-invalid textarea { border-color: var(--bad); }
.field-error { display: none; font-size: var(--step--1); color: var(--bad); }
.field.is-invalid .field-error, .field input:user-invalid ~ .field-error, .field textarea:user-invalid ~ .field-error { display: block; }
.consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); align-items: start; font-size: var(--step--1); color: var(--ink-2); }
.consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--signal); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cta { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: center; }
.form-state { display: none; gap: var(--s3); padding: var(--s4) var(--s5); border: 1px solid var(--ok); border-radius: var(--radius); background: var(--bg); color: var(--ink); }
.form-state[data-kind="error"] { border-color: var(--bad); }
.form-state:target, .form-state.is-shown { display: grid; }

/* ---------- Self-check tools. The scoring scripts write these ids and classes; these rules only style them ---------- */
.crumb { font-family: var(--font-mono); font-stretch: calc(var(--label-wdth) * 1%); font-size: var(--step--2); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-3); }
.crumb a { color: var(--ink-2); }
.tool-head { padding-block: var(--s8) var(--s7); border-bottom: 1px solid var(--line); }
.tool-head .wrap { display: grid; gap: var(--s5); }
.tool-head .meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); font-size: var(--step--1); color: var(--ink-3); }
.tool-head .meta button { min-height: var(--tap); padding: 0 var(--s4); background: none; border: 1px solid var(--line-2); border-radius: var(--radius); color: var(--ink); font: 400 var(--step--2) var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; cursor: pointer; transition: border-color var(--dur-1) ease; }
.tool-head .meta button:hover { border-color: var(--signal); }
.tool-body { padding-block: var(--s8) var(--s9); border-bottom: 1px solid var(--line); }
.tool-body > .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s5); row-gap: var(--s7); align-items: start; }
.tool #form { grid-column: 1 / span 7; display: grid; gap: var(--s7); }
.tool .result { grid-column: 9 / -1; position: sticky; top: calc(var(--header-h) + var(--s5)); max-height: calc(100svh - var(--header-h) - 48px); overflow: auto; display: grid; gap: var(--s4); padding: var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
@media (max-width: 1023px) { .tool #form, .tool .result { grid-column: 1 / -1; } .tool .result { position: static; max-height: none; } }
.tool .area { display: grid; }
.tool .area h2 { display: flex; align-items: baseline; gap: var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--line-2); font-size: var(--step-2); }
.tool .area h2 .n { font-family: var(--font-mono); font-size: var(--step--2); font-weight: 400; letter-spacing: var(--tracking-label); color: var(--ink-3); }
.tool .q { display: grid; gap: var(--s3); padding-block: var(--s5); border-bottom: 1px solid var(--line); }
.tool .q p { color: var(--ink); max-width: var(--measure); }
.tool .q .why { display: block; margin-top: var(--s1); font-size: var(--step--1); color: var(--ink-3); }
.tool .q .k { font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-3); }
.tool .seg { display: flex; flex-wrap: wrap; gap: var(--s2); }
.tool .seg label { position: relative; }
.tool .seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tool .seg span { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s4); border: 1px solid var(--ink-3); border-radius: var(--radius); font-size: var(--step--1); font-weight: 500; color: var(--ink-2); cursor: pointer; user-select: none; transition: background var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-1) var(--ease-out); }
.tool .seg span:hover { border-color: var(--ink-2); color: var(--ink); }
.tool .seg label:active span { transform: translateY(1px); }
.tool .seg input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 620; }
.tool .seg input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 3px; }
@media (forced-colors: active) { .tool .seg input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; } }
.tool .score-row, .tool .verdict { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.tool .result .score { font-family: var(--font-mono); font-stretch: calc(var(--label-wdth) * 1%); font-size: var(--step-4); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.tool .result .score small { font-size: var(--step--2); letter-spacing: 0; color: var(--ink-3); }
.tool .verdict h2 { flex-basis: 100%; font-size: var(--step-2); }
.band { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.02em; color: var(--bad); }
.band::before { content: ""; width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); }
.band[data-b="strong"], .band[data-b="sound"], .band[data-b="ready"], .band[data-b="nearly"], .band[data-b="tuning"] { color: var(--ok); }
.band[data-b="strong"]::before, .band[data-b="sound"]::before, .band[data-b="ready"]::before, .band[data-b="nearly"]::before, .band[data-b="tuning"]::before { border-radius: 50%; transform: none; }
.band[data-b="none"] { color: var(--ink-3); }
.band[data-b="none"]::before { background: none; border: 1px solid currentColor; border-radius: 50%; transform: none; }
.tool .progress { margin-left: auto; font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tool .result .bars { display: grid; gap: var(--s2); border-top: 1px solid var(--line-2); padding-top: var(--s3); }
.tool .result .bar { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--s3); align-items: center; font-size: var(--step--1); color: var(--ink-2); }
.tool .result .bar b { font-family: var(--font-mono); font-size: var(--step--2); font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }
.tool .result .track { grid-column: 1 / -1; height: 4px; background: var(--line); overflow: hidden; }
.tool .result .fill { height: 100%; width: 0; background: var(--ok); transition: background var(--dur-1) ease; }
.tool .result .fill[data-l="warn"] { background: var(--ink-2); }
.tool .result .fill[data-l="bad"] { background: var(--bad); }
.tool .first, .tool .block { display: grid; gap: var(--s2); }
.tool .first h2, .tool .first h3, .tool .block h3 { font-size: var(--step-0); letter-spacing: 0.02em; }
.tool .first ol, .tool .block ol { display: grid; gap: var(--s2); counter-reset: f; font-size: var(--step--1); }
.tool .first li, .tool .block li { position: relative; padding-left: 1.8em; color: var(--ink-2); counter-increment: f; }
.tool .first li::before, .tool .block li::before { content: counter(f); position: absolute; left: 0; top: 3px; font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-3); }
.tool .first li strong { color: var(--ink); }
.tool .block p { font-size: var(--step--1); color: var(--ink-2); }
.tool .result .cta .btn, .tool .result .cta .btn-line { min-height: var(--tap); padding: 0 var(--s4); }
.tool .toast { font-size: var(--step--1); color: var(--ok); }
.note { font-size: var(--step--1); color: var(--ink-3); }
.example-note { color: var(--ink-2); }
.results-email { padding-block: var(--s9); }
.results-email > .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s5); row-gap: var(--s6); align-items: start; }
.results-email .form-col { grid-column: 1 / span 7; }
.results-email .tool-notes { grid-column: 9 / -1; font-size: var(--step--1); color: var(--ink-3); max-width: var(--measure); }
@media (max-width: 1023px) { .results-email .form-col, .results-email .tool-notes { grid-column: 1 / -1; } }
/* phones: a pinned strip mirrors progress and the result band while answering (site.js fills it) */
.tool-status { display: none; }
@media (max-width: 1023px) {
  .js .tool-status { grid-column: 1 / -1; position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: var(--s4); min-height: 48px; margin-top: calc(-1 * var(--s7)); padding: 0 var(--gutter); margin-inline: calc(-1 * var(--gutter)); background: var(--bg); border-top: 1px solid var(--line-2); font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-2); }
  .tool-status [data-mirror=progress] { white-space: nowrap; }
  .tool-status a { margin-left: auto; color: var(--ink); font-family: var(--font-sans); font-size: var(--step--1); }
}

/* ---------- Close ---------- */
.close { position: relative; display: grid; align-items: end; min-height: min(100svh, 880px); padding-block: var(--s9) clamp(var(--s8), 10vw, 160px); overflow: hidden; isolation: isolate; border-top: 1px solid var(--line); }
.close .wrap { gap: var(--s6); }
.close p:not(.label) { max-width: 46ch; color: var(--ink-2); font-size: var(--step-1); line-height: 1.5; }

/* ---------- Footer ---------- */
.site-footer { padding-block: var(--s8) var(--s6); border-top: 1px solid var(--line); font-size: var(--step--1); color: var(--ink-2); }
.footer-grid { display: grid; gap: var(--s6); }
.footer-grid address { font-style: normal; display: grid; gap: var(--s1); }
.footer-grid address b { color: var(--ink); }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.footer-nav a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--ink-2); text-decoration: none; font-family: var(--font-mono); font-stretch: calc(var(--label-wdth) * 1%); font-size: var(--step--2); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.footer-nav a:hover { color: var(--ink); }
.footer-note { padding-top: var(--s5); border-top: 1px solid var(--line); color: var(--ink-3); font-family: var(--font-mono); font-stretch: calc(var(--label-wdth) * 1%); font-size: var(--step--2); letter-spacing: 0.04em; }
@media (min-width: 960px) { .footer-grid { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } .footer-note { grid-column: 1 / -1; } }

/* ---------- Inner page head ---------- */
.pagehead { position: relative; display: grid; gap: var(--s5); padding-block: clamp(var(--s8), 10vw, var(--s10)) clamp(var(--s7), 7vw, var(--s9)); }
.pagehead .lead { max-width: 52ch; }

/* ---------- Practice pages: the scroll story opener (sticky full-bleed scene, three beats over it) and its blocks ---------- */
.story { position: relative; display: grid; }
.story > * { grid-area: 1 / 1; min-width: 0; }
.story-flow { position: relative; z-index: 1; pointer-events: none; }
.story-flow a, .beat-card { pointer-events: auto; }
.story-stage { position: sticky; top: var(--header-h); z-index: 0; align-self: start; display: block; height: calc(100svh - var(--header-h)); min-height: 0; aspect-ratio: auto; border: 0; border-radius: 0; background: none; }
.story-stage canvas { position: absolute; inset: 0; }
.story-stage figcaption { position: absolute; top: var(--s3); left: var(--gutter); right: calc(var(--gutter) + 6.5rem); z-index: 1; min-height: 0; padding: 0; }
.story-stage .scene-pause { top: var(--s3); bottom: auto; right: var(--gutter); }
/* phones: the intro carries its own scrim, so the scene shows through as the text scrolls away */
.story .hero { background: linear-gradient(0deg, var(--bg) 0%, var(--bg) 48%, color-mix(in srgb, var(--bg) 70%, transparent) 64%, transparent 84%); }
/* a beat's step runs while its block passes the screen; on phones its card stays pinned under the scene for that time */
.beat { display: grid; align-content: end; min-height: 100svh; padding-block: var(--s3); }
.beat > .wrap { position: sticky; bottom: var(--s3); }
.beat-card { display: grid; gap: var(--s3); max-width: 30rem; padding: var(--s5); background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--line-2); border-radius: var(--radius-card); }
.beat-card p:not(.label) { color: var(--ink-2); }
.story[data-step="0"] .beat:nth-child(1) .index, .story[data-step="1"] .beat:nth-child(2) .index, .story[data-step="2"] .beat:nth-child(3) .index { color: var(--signal); }
@media (min-width: 900px) {
  .story .hero { background: none; }
  .story-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 30%, transparent 46%), linear-gradient(0deg, var(--bg) 0%, transparent 22%); }
  .story-stage figcaption { top: calc(var(--s3) + 52px); left: auto; right: var(--gutter); max-width: 32ch; text-align: right; }
  .beat { align-content: center; padding-block: var(--s8); }
  .beat > .wrap { position: static; }
  .beat-card { max-width: min(34rem, 40vw); }
}
.no-js .story > * { grid-area: auto; }
.no-js .story-flow { pointer-events: auto; }
.no-js .story-stage { position: relative; top: 0; height: auto; }
.no-js .story-stage figcaption { position: static; max-width: none; padding: var(--s4) var(--gutter); text-align: left; }
.no-js .story .hero { background: none; }
.no-js .beat { min-height: 0; padding-block: var(--s3); }
.no-js .beat > .wrap { position: static; }
.no-js .beat:last-child { padding-bottom: var(--s8); }

.duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
@media (min-width: 960px) { .duo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); align-items: start; } }
.duo > .stack { gap: var(--s5); }
.state-ok { color: var(--ok); }
.state-bad { color: var(--bad); }
.sum { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s4); font-family: var(--font-mono); font-stretch: calc(var(--label-wdth) * 1%); font-size: var(--step--2); letter-spacing: 0.02em; color: var(--ink-3); }
.fig-note { margin-top: var(--s3); color: var(--ink-3); font-size: var(--step--1); max-width: var(--measure); }
.steps { display: grid; gap: var(--s6) var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.step { display: grid; gap: var(--s3); align-content: start; padding-top: var(--s4); border-top: 1px solid var(--line-2); }
.step .index { color: var(--signal); }
.step p:not(.label) { color: var(--ink-2); }
.tiers { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.tiers .price-amount { font-size: var(--step-3); }
.price-block .actions { padding-top: var(--s2); }
/* a single self-check row beside its example: title and meta stacked, not the wide four-column row */
.duo .rows > li { grid-template-columns: 3.2em minmax(0, 1fr); }
.duo .row-meta { grid-column: 2; text-align: left; }
.ex-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); }
.ex-score b { font-family: var(--font-mono); font-stretch: calc(var(--label-wdth) * 1%); font-size: var(--step-4); font-weight: 400; line-height: 1; letter-spacing: -0.04em; }
.callout h3 { font-size: var(--step-0); letter-spacing: 0.02em; margin-top: var(--s3); }
.callout .numbered { gap: var(--s3); font-size: var(--step--1); color: var(--ink-2); }
.callout .numbered strong { color: var(--ink); }
.k { font-family: var(--font-mono); font-stretch: calc(var(--label-wdth) * 1%); font-size: var(--step--2); letter-spacing: 0.04em; color: var(--ink-3); padding-top: 0.25em; }
.findings { display: grid; margin-top: var(--s4); border-top: 1px solid var(--line-2); }
.findings li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2) var(--s4); padding-block: var(--s4); border-bottom: 1px solid var(--line); color: var(--ink-2); }
.findings .mono { margin-right: var(--s2); color: var(--ink); }
.f-dur { color: var(--ink); }
.f-bar { order: 1; grid-column: 1 / -1; height: 6px; background: var(--line); }
.f-bar i { display: block; width: var(--w); height: 100%; background: var(--ink-3); }
.findings .is-hot .f-bar i { background: var(--signal); }
.ex-verdict { font-size: var(--step-2); font-weight: var(--weight-display); font-stretch: calc(var(--display-wdth) * 1%); line-height: 1.1; }

/* ---------- Tool pages: quiet scene behind the tool head ---------- */
.tool-head { position: relative; overflow: hidden; isolation: isolate; }
.tool-head .wrap { position: relative; z-index: 1; pointer-events: none; }
.tool-head .wrap a, .tool-head .wrap button { pointer-events: auto; }
.tool-head .lead { max-width: 56ch; }
.tool-status .band { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-status a { flex: none; }
.tool #vtitle { text-transform: none; }   /* the verdict is a sentence */
.tool-head .wrap { grid-template-columns: minmax(0, 1fr); }
.tool-head h1 { font-size: var(--step-4); }
.tool-head .scene--bleed canvas { opacity: 0.3; }
.tool-head { padding-bottom: calc(var(--s7) + 48px); }
.tool-head .scene--bleed figcaption { top: auto; bottom: var(--s3); right: auto; left: var(--gutter); max-width: none; text-align: left; }
.tool-head .scene-pause { top: auto; bottom: var(--s3); }
.tool-body noscript { grid-column: 1 / -1; }
.tool-body noscript p { padding: var(--s4) var(--s5); border: 1px solid var(--line-2); border-top: 2px solid var(--signal); border-radius: var(--radius); background: var(--surface); }
.results-email .form-col .note { margin-top: calc(-1 * var(--s2)); }

/* ---------- Motion: entrances and hover. Nothing moves under reduced motion ---------- */
.rv .reveal { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms); }
.rv .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; scroll-behavior: auto !important; }
  .rv .reveal { opacity: 1; transform: none; }
  .card:hover, .lift:hover { transform: none; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Case studies: the facts strip and the two-column article */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); border-top: 1px solid var(--line-2); margin: 0; }
.facts div { display: grid; gap: var(--s2); padding: var(--s4) var(--s4) var(--s4) 0; border-bottom: 1px solid var(--line); }
.facts dt { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-3); }
.facts dd { margin: 0; }
.article-grid { display: grid; gap: var(--s7); }
.article-grid .aside { display: grid; gap: var(--s4); align-content: start; color: var(--ink-2); }
@media (min-width: 960px) { .article-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } .article-grid .aside { position: sticky; top: calc(var(--header-h) + var(--s5)); } }