/* =====================================================================
   theme-approach.css — approach.html only. "Graphite & Spark" (§6.6 A1–A8)
   plus the site owner's content direction (§14: non-digital pledge,
   responsible-AI promise, grade school → college ladder).
   Loaded after styles.css. Theme-scoped rules only; shared tokens and
   component geometry are never redefined (§4 guard-rails).

   Rule 10: every hidden starting state / animation-from-hidden lives in
   the single @media screen and (prefers-reduced-motion:no-preference)
   block at the END of this file. Everything above it is the final frame.

   A1 hero stage "sketch, then spark"    A5 quiz stamps
   A2 why-paper pinned sheet             A6 AI-dial ladder
   A3 flip cards (shared, small tweaks)  A7 at-home index cards
   A4 AI rules band + family promise     A8 CTA spark
   ===================================================================== */

:root {
  /* ✦ shape used as a mask (rule badges, pledge bullets) */
  --spark-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0l3.1 8.9L24 12l-8.9 3.1L12 24l-3.1-8.9L0 12l8.9-3.1z'/%3E%3C/svg%3E");
  /* A1 pencil: graphite body, wood cone, dark lead, pink eraser; tip at the
     bottom-left of the image (5.6% / 94%) so it can sit on the writing line */
  --a1-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -7 54 35'%3E%3Cg transform='rotate(-32 3 26)'%3E%3Cpath d='M3 26l9-4v8z' fill='%23E8D5B0'/%3E%3Cpath d='M3 26l3.4-1.5v3z' fill='%23141413'/%3E%3Crect x='12' y='22' width='34' height='8' fill='%233D3D3A'/%3E%3Crect x='12' y='22' width='34' height='2.4' fill='%235E5D59'/%3E%3Crect x='46' y='22' width='4' height='8' fill='%23B0AEA5'/%3E%3Crect x='50' y='22' width='6' height='8' rx='2' fill='%23E39AB5'/%3E%3C/g%3E%3C/svg%3E");
}

/* ------------------------------------------------------------- hero */
[data-theme="approach"] .page-hero h1 .tone { display: block; }

/* §14.4 "most lessons are completely non-digital" — stated in the hero */
.hero-pledge {
  display: flex; align-items: flex-start; gap: 14px; max-width: 46rem; margin: var(--s-5) 0 0;
  padding: 16px 20px; border-radius: var(--r-lg); background: var(--card-bg);
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line);
  font: 500 1.0625rem/1.55 var(--font-sans); color: var(--text);
}
.pledge-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--paper-2); color: var(--graphite); }
.pledge-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pledge-key { position: relative; display: inline-block; font-weight: 700; white-space: nowrap; }
.pledge-line { position: absolute; left: -3%; bottom: -.38em; width: 106%; height: .5em; overflow: visible; pointer-events: none; }
.pledge-line .draw { stroke: var(--graphite); stroke-width: 2.6; stroke-linecap: round; }

/* ---------------------------------------------- A1 sketch, then spark */
.duo-fig { align-self: center; }
.duo-fig .hv-duo { position: relative; justify-self: center; width: min(100%, 31rem); }
.a1-line { position: relative; width: fit-content; max-width: 100%; }
.a1-ink { display: inline-block; }
/* the pencil rides each line (a pseudo the width of the line, so a
   translate of 100% = exactly the line's length; compositor-only) */
.a1-line::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: var(--a1-pencil) no-repeat 0 calc(100% - .42em) / 2.7em 1.75em;
}
.a1-line + .a1-line::after { opacity: 1; translate: 100% 0; }   /* rest: parked after line 2 */
/* the pencil strikes, it never erases: struck text stays readable */
.duo-fig del { position: relative; display: inline-block; text-decoration: none; color: var(--text-3); }
.duo-fig del::after {
  content: ""; position: absolute; left: -.12em; right: -.12em; top: 52%; height: 2px; border-radius: 2px;
  background: var(--graphite); rotate: -4deg; transform-origin: left center;
}
.duo-fig ins { display: inline-block; color: var(--graphite); font-style: italic; text-decoration: none; }
.duo-fig .spark-ring { overflow: visible; }
.duo-fig .ring-host { margin-inline: .2em; }   /* the dashed ring overhangs "+ 40"; keep it off "3w" and "− 40" */
.a1-spark { position: absolute; right: -.7em; top: -.95em; font-size: .95em; line-height: 1; color: var(--spark); pointer-events: none; }
.duo-fig .chat-bubble.is-ai { position: relative; }
.typing { display: none; position: absolute; left: 16px; top: 36px; gap: 5px; align-items: center; height: 12px; }
.typing i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--spark-text); }

/* ------------------------------------------ A2 why-paper pinned sheet */
/* the pinned visual is stretched to its grid row; keep the page centred in it
   (on phones it was top-aligned above a large empty band) */
#why-paper .story-visual { display: grid; align-content: center; }
.why-page {
  position: relative; display: grid; align-content: center; justify-items: start; gap: clamp(10px, .5rem + .8vw, 20px);
  min-height: clamp(220px, 10rem + 16vw, 400px); padding: clamp(4px, 1vw, 12px);
}
.hand { margin: 0; width: fit-content; max-width: 100%; font: italic 400 clamp(1.25rem, 1.02rem + 1vw, 1.875rem)/1.3 var(--font-hand); color: var(--graphite); }
.why-page .wl-wrong { color: var(--ink-3); }
.why-page .strike { background: var(--graphite); top: 52%; rotate: -2deg; }
.why-row { display: flex; align-items: center; gap: 12px; }
.margin-tick { flex: none; width: clamp(24px, 1.2rem + 1vw, 32px); height: auto; overflow: visible; }
.margin-tick .draw, .hand-underline .draw { stroke: var(--graphite); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* the sentence is written as two short lines so the left-to-right write
   never reveals a wrapped second line early on narrow screens */
.why-sentence { display: grid; justify-items: start; margin-top: clamp(6px, 1vw, 14px); font-size: clamp(1.25rem, 1.02rem + 1vw, 1.875rem); }
.hand-underline { display: block; width: 6.8em; height: .45em; margin: -.1em 0 0 1.15em; overflow: visible; }
.spark-hover { position: absolute; top: 6%; right: 6%; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1; color: var(--spark); pointer-events: none; }
.story:not(.is-pinned):not(.is-player) .spark-hover { display: none; }      /* final frame: the spark has left before the exam */
.why-exam { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: clamp(6px, 1.4vw, 20px); }
.stamp {
  display: inline-block; padding: 6px 12px; border-radius: var(--r-xs); box-shadow: inset 0 0 0 2px var(--danger);
  background: rgb(255 255 255 / .7); font: 700 clamp(.75rem, .7rem + .25vw, .9375rem)/1.2 var(--font-sans);
  letter-spacing: .14em; color: var(--danger); rotate: -4deg;
}
.timer-chip {
  display: inline-block; padding: 8px 12px; border-radius: var(--r-pill); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line);
  font: 600 var(--fs-mono-sm)/1 var(--font-mono); color: var(--text); font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------- A3 flip cards */
/* six cards: 3 + 3 on wide screens (auto-fit gave 4 + 2 at ≥ 1200px) */
@media (min-width: 960px) { #in-vivo .exercise-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
#in-vivo .flip-back p:not(.t-meta)::after { content: " ✦"; content: " ✦" / ""; font-size: .6em; vertical-align: .35em; color: var(--spark); }

/* ------------------------------------- A4 AI rules band + promise */
@media (min-width: 960px) {
  .ai-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 88px); }
}
@media (min-width: 960px) and (min-height: 720px) {
  .ai-copy { position: sticky; top: calc(var(--stick-top-ui) + 24px); align-self: start; }   /* scrub sits on the non-sticky .ai-split */
}
.ai-copy { min-width: 0; }
.ai-copy .section-head { margin-bottom: var(--s-6); }
.ai-para { font: 400 var(--fs-read)/1.62 var(--font-serif); color: var(--text-2); }
.tally-row { margin-top: var(--s-5); }
.tally { display: block; width: 120px; height: 80px; overflow: visible; }
.tally .draw { stroke: var(--band-ink); stroke-width: 4; stroke-linecap: round; }
.tally .tally-slash { stroke: var(--spark-bright); }
/* rule numerals keep the shared ring; a ✦ ignites on each badge */
.ai-split .rules li::after {
  content: ""; position: absolute; left: calc(var(--s-5) + 26px); top: calc(var(--s-5) - 8px); width: 18px; height: 18px; pointer-events: none;
  background: var(--spark-bright); -webkit-mask: var(--spark-mask) no-repeat center/100% 100%; mask: var(--spark-mask) no-repeat center/100% 100%;
}

/* §14.5 responsible-AI promise (echoed from the CS page) */
.ai-pledge {
  display: grid; gap: var(--s-6); margin-top: var(--s-9); padding: clamp(24px, 1rem + 2.5vw, 56px);
  border-radius: var(--r-tile); background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--line);
}
@media (min-width: 960px) {
  .ai-pledge { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 4vw, 72px); align-items: start; }
  .pledge-who { grid-column: 1 / -1; }
}
.pledge-main { min-width: 0; }
.pledge-kicker { margin: 0 0 var(--s-4); color: var(--accent-text); }
.pledge-kicker::before { content: "✦ "; content: "✦ " / ""; }
.pledge-text { margin: 0; font: 400 var(--fs-lead)/1.35 var(--font-serif); color: var(--text); max-width: 32em; }
.pledge-cols { display: grid; gap: var(--s-5); }
@media (min-width: 560px) and (max-width: 959px) { .pledge-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pledge-col h3 { margin: 0 0 var(--s-3); color: var(--text-3); }
.pledge-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pledge-list li { position: relative; margin: 0; padding-left: 28px; font-size: 1rem; line-height: 1.45; color: var(--text-2); }
.pledge-list li::before { position: absolute; left: 0; top: 0; width: 18px; text-align: center; }
.is-never li { color: var(--text-3); }
.is-never li::before { content: "×"; content: "×" / ""; font: 400 1.25rem/1.15 var(--font-sans); color: var(--text-3); }
.is-never span { position: relative; }
.is-never span::after { content: ""; position: absolute; left: -2px; right: -2px; top: 55%; height: 2px; border-radius: 2px; background: var(--text-3); transform-origin: left center; }
.is-always li::before {
  content: ""; top: .25em; width: 16px; height: 16px;
  background: var(--spark-text); -webkit-mask: var(--spark-mask) no-repeat center/100% 100%; mask: var(--spark-mask) no-repeat center/100% 100%;
}
.pledge-who { margin: 0; max-width: none; padding-top: var(--s-5); box-shadow: inset 0 1px 0 var(--line); font-size: 15px; color: var(--text-2); }
.pledge-who .link-arrow { margin-left: 4px; font-size: 15px; }

/* ------------------------------------------------- A5 quiz stamps */
.toc-item { position: relative; }
.toc-item.is-answered::after {
  content: "TOOL"; content: "TOOL" / ""; position: absolute; top: -12px; right: 16px; padding: 5px 9px; pointer-events: none;
  border-radius: var(--r-xs); background: var(--white); box-shadow: inset 0 0 0 2px currentColor;
  font: 700 12px/1 var(--font-mono); letter-spacing: .14em; color: var(--spark-ink); rotate: -6deg;
}
.toc-item.is-answered[data-verdict="crutch"]::after {
  content: "CRUTCH"; content: "CRUTCH" / ""; color: var(--graphite);
  text-decoration: line-through 2px; text-decoration-color: var(--graphite);
}

/* -------------------------------------------- A6 AI-dial ladder */
.ladder-wrap { display: grid; gap: var(--gap); }
@media (min-width: 900px) {
  .ladder-wrap { grid-template-columns: minmax(200px, 1fr) minmax(0, 3fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
  .dial { position: sticky; top: calc(var(--stick-top-ui) + 24px); align-self: start; }   /* scrub sits on .ladder-wrap */
}
.dial {
  display: grid; gap: 8px; padding: var(--s-5); border-radius: var(--r-tile); background: var(--card-bg);
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line);
}
.dial-now { display: grid; margin: 0 0 var(--s-3); font: 700 var(--fs-h3)/1.15 var(--font-sans); letter-spacing: -.008em; color: var(--text); }
.dial-now span { grid-area: 1 / 1; opacity: 0; transition: opacity var(--dur-ui) var(--ease-out); }
.dial-now span:last-child { opacity: 1; }
.ladder-wrap[data-step-active] .dial-now span { opacity: 0; }
.ladder-wrap[data-step-active="0"] .dial-now span:nth-child(1),
.ladder-wrap[data-step-active="1"] .dial-now span:nth-child(2),
.ladder-wrap[data-step-active="2"] .dial-now span:nth-child(3),
.ladder-wrap[data-step-active="3"] .dial-now span:nth-child(4),
.ladder-wrap[data-step-active="4"] .dial-now span:nth-child(5) { opacity: 1; }
.dial-label { margin: 6px 0 0; color: var(--text-3); }
.dial-track { display: block; height: 10px; overflow: hidden; border-radius: var(--r-pill); background: var(--paper-3); }
.dial-bar { display: block; height: 100%; border-radius: inherit; }
.dial-pencil { background: var(--graphite); }
.dial-spark { background: var(--spark); transform: scaleX(var(--ai)); transform-origin: left center; transition: transform var(--dur-swap) var(--ease-in-out); }
.ladder-wrap[data-step-active="0"] { --ai: .03; }
.ladder-wrap[data-step-active="1"] { --ai: .1; }
.ladder-wrap[data-step-active="2"] { --ai: .25; }
.ladder-wrap[data-step-active="3"] { --ai: .45; }
.ladder-wrap[data-step-active="4"] { --ai: .7; }
.dial-cap { margin: var(--s-3) 0 0; font: 400 15px/1.45 var(--font-serif); color: var(--text-2); }
/* the rungs read top → bottom, grade school first */
.ladder-wrap .ladder { grid-template-columns: minmax(0, 1fr); }
.ladder-wrap .ladder li { transition: color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out); }
.ladder-wrap .ladder li h3 { transition: color var(--dur-ui) var(--ease-out); }
@media (min-width: 720px) {
  .ladder-wrap .ladder li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: var(--s-5); align-items: baseline; }
  .ladder-wrap .ladder .grade { grid-row: 1 / span 2; }
  .ladder-wrap .ladder h3 { margin-top: 0; }
  .ladder-wrap .ladder li > p { grid-column: 2; }
}

/* ---------------------------------------- A7 at-home index cards */
.pillar-head { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--s-4); padding-bottom: var(--s-4); box-shadow: 0 1.5px 0 var(--margin-rule); }
.pillar-head .pillar-num { margin: 0; }
.pillar-icon { flex: none; width: 28px; height: 28px; overflow: visible; }
.pillar-icon .draw { stroke: var(--graphite); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) {
  .motion-ok #at-home .pillar[data-motion~="tilt"].is-visible {
    transform: perspective(900px) rotateX(calc((var(--my) - .5) * -4deg)) rotateY(calc((var(--mx) - .5) * 4deg));
  }
  .motion-ok #at-home .pillar[data-motion~="tilt"].is-visible:hover {
    transition: opacity var(--dur-reveal) var(--ease-out), transform 120ms linear;
  }
}

/* balanced rows: 3 index cards stay one column until all three fit;
   the 8 tool-or-crutch cards pair up (4 × 2) instead of 3 + 3 + 2 */
.pillars { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 720px) { .toc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------- A8 CTA spark */
.page-cta .section-head h2 { position: relative; }
.cta-spark {
  position: absolute; left: calc(50% + min(2.25em, 30%)); bottom: -.2em; line-height: 1;
  color: var(--spark); transform: translateX(-.05em) scale(.42); transform-origin: left bottom; pointer-events: none;
}

/* =====================================================================
   RULE-10 BLOCK (this file) — hidden starting states and one-shot
   sequences that start hidden. Print, reduced motion, the footer toggle
   and a failed motion.js never see any of it: final frame everywhere.
   ===================================================================== */
@media screen and (prefers-reduced-motion: no-preference) {

  /* hero pledge: the graphite underline draws once after load */
  .motion-ok .pledge-line .draw { animation: draw-on 900ms var(--ease-pencil) 700ms both; }

  /* A1 — 0.2 s line 1 writes · 0.95 s line 2 writes · 1.4 s student bubble ·
     2.0 s AI bubble + spark + ring · 2.1–2.8 s typing · 3.0 s the pencil
     strikes "+ 40" · 3.35 s "− 40" is written. Ends by 3.8 s (rule 7). */
  /* The sequence starts when the stage is in view (draw-once .is-in), not
     on load: at common laptop heights the stage sits just below the fold. */
  .motion-ok .duo-fig:not(.is-in) .a1-ink { clip-path: inset(-1em 100% -1em -.5em); }
  .motion-ok .duo-fig:not(.is-in) .a1-line::after,
  .motion-ok .duo-fig:not(.is-in) .chat-bubble,
  .motion-ok .duo-fig:not(.is-in) .ai-text,
  .motion-ok .duo-fig:not(.is-in) .a1-spark { opacity: 0; }
  .motion-ok .duo-fig:not(.is-in) del::after { transform: scaleX(0); }
  .motion-ok .duo-fig:not(.is-in) ins { clip-path: inset(0 100% 0 0); }
  .motion-ok .duo-fig.is-in .a1-line:first-child .a1-ink { animation: a1-write 700ms var(--ease-pencil) 200ms backwards; }
  .motion-ok .duo-fig.is-in .a1-line + .a1-line .a1-ink { animation: a1-write 600ms var(--ease-pencil) 950ms backwards; }
  .motion-ok .duo-fig.is-in .a1-line:first-child::after { animation: a1-ride-1 1000ms linear both; }
  .motion-ok .duo-fig.is-in .a1-line + .a1-line::after { animation: a1-ride-2 1550ms linear both; }
  .motion-ok .duo-fig.is-in .chat-bubble:not(.is-ai) { animation: rise-in 500ms var(--ease-out) 1.4s both; }
  .motion-ok .duo-fig.is-in .chat-bubble.is-ai { animation: rise-in 500ms var(--ease-out) 2s both; }
  .motion-ok .duo-fig.is-in .typing { display: flex; animation: a1-typing 760ms linear 2.05s both; }
  .motion-ok .duo-fig.is-in .typing i { animation: a1-dot 300ms var(--ease-in-out) 2.1s 2 alternate both; }
  .motion-ok .duo-fig.is-in .typing i:nth-child(2) { animation-delay: 2.2s; }
  .motion-ok .duo-fig.is-in .typing i:nth-child(3) { animation-delay: 2.3s; }
  .motion-ok .duo-fig.is-in .ai-text { animation: fade-in 320ms var(--ease-out) 2.8s both; }
  .motion-ok .duo-fig.is-in .a1-spark { animation: a1-fly 460ms var(--ease-pop) 2s both; }
  .motion-ok .duo-fig.is-in .spark-ring .draw { animation: draw-on 600ms var(--ease-pencil) 2.2s both; }
  .motion-ok .duo-fig.is-in del::after { animation: a1-strike 320ms var(--ease-pencil) 3s both; }
  .motion-ok .duo-fig.is-in ins { animation: a1-write-in 450ms var(--ease-pencil) 3.35s both; }

  /* A2 — while pinned: the stamp lands, the hovering spark turns slowly */
  .motion-ok .story:is(.is-pinned, .is-player) .stamp.tp-pop { transform: scale(calc(1.3 - .3 * var(--on))); }
  .motion-ok .story:is(.is-pinned, .is-player) .spark-hover { rotate: calc((var(--step) + var(--step-p)) * 60deg); }

  /* A4 — each rule's ✦ ignites after its card reveals */
  .motion-ok .ai-split .rules li.reveal:not(.is-visible)::after { opacity: 0; }
  .motion-ok .ai-split .rules li.is-visible::after { animation: a4-ignite 520ms var(--ease-pop) calc(var(--i) * var(--stagger) + 360ms) both; }
  /* promise: graphite strikes "never" first, then the sparks light "always" */
  .motion-ok .ai-pledge.reveal:not(.is-visible) .is-never span::after { transform: scaleX(0); }
  .motion-ok .ai-pledge.reveal .is-never span::after { transition: transform 420ms var(--ease-pencil) calc(500ms + var(--li) * 160ms); }
  .motion-ok .ai-pledge.reveal:not(.is-visible) .is-always li::before { opacity: 0; transform: scale(.4) rotate(-45deg); }
  .motion-ok .ai-pledge.reveal .is-always li::before { transition: opacity 200ms var(--ease-out) calc(1000ms + var(--li) * 90ms), transform 420ms var(--ease-pop) calc(1000ms + var(--li) * 90ms); }

  /* A5 — verdict stamps, the explanation flips down, wrong answers shake */
  .motion-ok .toc-item.is-answered::after { animation: stamp-in 420ms var(--ease-pop) both; }
  .motion-ok .toc-item.is-answered .toc-why { animation: flip-down 440ms var(--ease-out); }
  .motion-ok .toc-item.is-wrong { animation: shake 240ms var(--ease-out); }

  /* A6 — rungs light as they are passed (discrete, colour only on step change) */
  .motion-ok .ladder-wrap[data-step-active="0"] .ladder li:nth-child(n+2),
  .motion-ok .ladder-wrap[data-step-active="1"] .ladder li:nth-child(n+3),
  .motion-ok .ladder-wrap[data-step-active="2"] .ladder li:nth-child(n+4),
  .motion-ok .ladder-wrap[data-step-active="3"] .ladder li:nth-child(n+5) { color: var(--text-3); border-top-color: var(--line); }
  .motion-ok .ladder-wrap[data-step-active="0"] .ladder li:nth-child(n+2) h3,
  .motion-ok .ladder-wrap[data-step-active="1"] .ladder li:nth-child(n+3) h3,
  .motion-ok .ladder-wrap[data-step-active="2"] .ladder li:nth-child(n+4) h3,
  .motion-ok .ladder-wrap[data-step-active="3"] .ladder li:nth-child(n+5) h3 { color: var(--text-3); }

  /* A6 on narrow screens: the dial would scroll away above the rungs while
     it keeps changing, so it becomes a compact sticky bar that stays in
     view (grade · pencil bar · AI bar). Static/RM: the full card above. */
  @media (max-width: 899px) {
    .motion-ok .ladder-wrap .dial {
      position: sticky; top: calc(var(--stick-top-ui) + 8px); z-index: 2;
      grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 6px;
      padding: 12px 16px; box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line);
    }
    .motion-ok .ladder-wrap .dial-now { grid-column: 1 / -1; margin: 0; font-size: 1.125rem; }
    .motion-ok .ladder-wrap .dial-label { margin: 0; }
    .motion-ok .ladder-wrap .dial-cap { display: none; }
  }

  /* A8 — the spark pops after the pencil rule has drawn (250 + 900 ms) */
  .motion-ok .page-cta .section-head.is-visible .cta-spark { animation: pop-in 420ms var(--ease-pop) 1.2s both; }
  .motion-ok .page-cta .section-head.reveal:not(.is-visible) .cta-spark { opacity: 0; }

  @keyframes a1-write    { from { clip-path: inset(-1em 100% -1em -.5em); } to { clip-path: inset(-1em -3em -1em -.5em); } }
  @keyframes a1-write-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes a1-ride-1 {
    0%   { opacity: 0; translate: 0 0; }
    20%  { opacity: 1; translate: 0 0; animation-timing-function: cubic-bezier(.45,.05,.35,1); }
    90%  { opacity: 1; translate: 100% 0; }
    100% { opacity: 0; translate: 100% 0; }
  }
  @keyframes a1-ride-2 {
    0%, 60%  { opacity: 0; translate: 0 0; }
    61.3%    { opacity: 1; translate: 0 0; animation-timing-function: cubic-bezier(.45,.05,.35,1); }
    100%     { opacity: 1; translate: 100% 0; }
  }
  @keyframes a1-typing { 0% { opacity: 0; } 10%, 85% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes a1-dot    { from { translate: 0 2px; opacity: .45; } to { translate: 0 -3px; opacity: 1; } }
  @keyframes a1-fly    { from { opacity: 0; translate: 40px -40px; scale: .5; } }
  @keyframes a1-strike { from { transform: scaleX(0); } }
  @keyframes a4-ignite { from { opacity: 0; scale: .4; rotate: -45deg; } }
}