/* =====================================================================
   theme-home.css — index.html only ("Portal", data-theme="home").
   §6.2 H1–H8 signatures + the §14 home additions (hands-on note,
   "Meet your tutor", AI promise). Loaded after styles.css; only adds
   home-scoped rules. Hidden starting states live in the rule-10 block
   at the END of this file (final frame everywhere else).

   A  Hero (H1)                 E  About — meet your tutor (H5)
   B  Highlights gallery (H2)   F  Approach band + story sheet (H6)
   C  Subjects stage (H3)       G  Pricing ring (H7)
   D  Process line (H4)         H  RULE-10 BLOCK
   ===================================================================== */

/* ------------------------------------------------------------------ A */
.hero { isolation: isolate; overflow-x: clip; }
/* three inks glow softly behind the product shot (static) */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(30% 40% at 80% 38%, rgba(110,86,207,.11), transparent 70%),
    radial-gradient(24% 34% at 96% 76%, rgba(208,71,59,.08), transparent 70%),
    radial-gradient(28% 36% at 64% 86%, rgba(18,184,134,.09), transparent 70%);
}
.hero-meta {
  padding: 7px 14px 7px 12px; border-radius: var(--r-pill); background: var(--card-bg);
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line);
}
.hero-title { margin: 0; }
.hero-title .line { display: block; }
.hero-title .line-tone { position: relative; width: fit-content; max-width: 100%; }
/* the home lead carries more (levels, industry, AI) than a normal lead:
   one step smaller so the actions stay above the fold */
.hero-lead { margin-top: var(--s-6); font-size: clamp(1.125rem, 1rem + .42vw, 1.375rem); line-height: 1.38; max-width: 36em; }
/* desktop: a wider copy column and a display size that keeps the h1 on
   its two designed lines ("Tutoring that builds" / "real understanding."),
   so the tri-underline sits under one line and the CTA is above the fold */
@media (min-width: 1000px) {
  .hero .hero-grid { grid-template-columns: minmax(0, 1.34fr) minmax(0, .66fr); }
  .hero-title { font-size: min(var(--fs-display), 5.2vw, 4.625rem); }
  .hero-art .session-card { max-width: 100%; }
}

/* H1 tri-underline: three inks pass, the pencil stays, the spark lands */
.tri-underline { position: absolute; left: 0; bottom: -.2em; width: 100%; height: .4em; overflow: visible; pointer-events: none; }
.tu { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tu-math { stroke: var(--math); stroke-width: 4; stroke-dasharray: 1 2; opacity: 0; }
.tu-en { stroke: var(--english); stroke-width: 3; stroke-dasharray: 1 2; opacity: 0; }
.tu-cs { fill: var(--cs); stroke: none; opacity: 0; }
.tu-pencil { stroke: var(--graphite); stroke-width: 3.5; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.tu-spark { fill: var(--spark); stroke: none; transform-box: fill-box; transform-origin: center; }
@media (forced-colors: active) { .tu-pencil { stroke: CanvasText; } }

/* §14.4 hands-on note under the lead */
.hands-note {
  display: flex; align-items: flex-start; gap: 14px; max-width: 37rem; margin: var(--s-5) 0 0; padding: 14px 18px 14px 14px;
  border-radius: var(--r-lg); background: var(--card-bg); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line);
  font-size: 1rem; line-height: 1.5; color: var(--text-2);
}
.hands-note strong { color: var(--text); }
.hands-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--r-md); background: var(--tint); color: var(--accent-text); }
.hands-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hand-mark { position: relative; display: inline-block; font-weight: 600; color: var(--text); }
.hand-underline { position: absolute; left: -2%; bottom: -.3em; width: 104%; max-width: none; height: .5em; overflow: visible; pointer-events: none; }
.hand-underline .draw { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }

/* product shot: entry scale (scrub) + tilt use two different properties */
.hero-art { position: relative; }
.session-card { position: relative; }
.mock-plan .bar i { width: 100%; transform: scaleX(var(--w)); transform-origin: left; }
.live-pill { display: inline-flex; align-items: center; gap: 6px; }
.live-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .motion-ok .hero-art[data-motion~="tilt"] {
    transform: perspective(1000px) rotateX(calc((var(--my) - .5) * -4deg)) rotateY(calc((var(--mx) - .5) * 4deg));
    transition: transform 160ms linear;
  }
}

/* ------------------------------------------------------------------ B */
.highlights .section-head.is-split { margin-bottom: var(--s-6); }
.highlights .section-head.is-split .section-kicker { margin-bottom: var(--s-3); }
.tile-copy { display: grid; gap: var(--s-3); }
.tile-copy > * { display: block; }
/* the art is the tile's hero: large and centred in the space under the copy
   (strokes are in viewBox units, so they are thinned to stay pencil-weight at ~2.8x) */
.gallery .tile-art { flex: 0 1 auto; width: min(72%, 340px); height: auto; min-height: 0; aspect-ratio: 3 / 2; align-self: center; margin-block: auto; }
.gallery .tile-art path { stroke-width: 1.4; }
.gallery .tile-art .ta-grid { stroke-width: .5; }
.gallery .tile-art:has(.ta-term) { align-items: center; justify-content: center; }
.gallery .tile-art .ta-term { gap: 14px; padding: 22px 30px; border-radius: var(--r-lg); font-size: clamp(36px, 9vw, 60px); }

/* ------------------------------------------------------------------ C */
.subjects-switch { display: flex; justify-content: center; margin: 0 0 var(--s-6); }
.subject-stage {
  position: relative; isolation: isolate; border-radius: var(--r-2xl); background-color: var(--tint);
  padding: clamp(16px, 3vw, 48px); overflow: clip;
}
.motif-layer {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--motif);
  opacity: 0; transition: opacity var(--dur-swap) var(--ease-in-out);
}
#subject-stage[data-theme="math"] .motif-layer[data-for="math"],
#subject-stage[data-theme="english"] .motif-layer[data-for="english"],
#subject-stage[data-theme="cs"] .motif-layer[data-for="cs"] { opacity: 1; }
.subject-stage .seg-panel { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) { .subject-stage .seg-panel { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s-7); } }
.subject-stage .subject-card { box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line); }
html:not(.js) .subject-stage, html.no-m .subject-stage { background-color: transparent; padding: 0; overflow: visible; }
html:not(.js) .subject-stage .motif-layer, html.no-m .subject-stage .motif-layer { display: none; }
html:not(.js) .subject-stage .seg-panel, html.no-m .subject-stage .seg-panel {
  background: var(--motif), var(--tint); border-radius: var(--r-2xl); padding: clamp(16px, 3vw, 48px); margin-block-end: var(--gap);
}

/* preview windows: each subject's signature in miniature (aria-hidden) */
.preview-col { display: grid; gap: var(--s-5); justify-items: center; min-width: 0; }
.preview-window { width: min(100%, 26rem); margin: 0; }
.preview--math {
  padding: 14px; border-radius: var(--r-lg); background: var(--motif), var(--plot-bg);
  box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line);
}
.preview--math svg { display: block; width: 100%; height: auto; overflow: visible; }
.pv-axis { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-linecap: round; }
.preview--math .draw { stroke: var(--accent-ink); stroke-width: 4; stroke-linecap: round; }
.pv-dot { fill: var(--ink); transform-box: fill-box; transform-origin: center; }
.preview--english { font-size: 1.25rem; }
.preview--english .hl:not(.hl-ev):not(.hl-an) { background-image: linear-gradient(var(--hl-claim), var(--hl-claim)); }
.preview--english del { position: relative; text-decoration: none; }
.preview--english del::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 55%; height: 2px; border-radius: 2px;
  background: var(--pen); transform-origin: left;
}
.preview--english ins { display: inline-block; }
.preview--cs .term-body { padding: 22px 22px 26px; font-size: 1.0625rem; }
.preview--cs .pv-type { clip-path: inset(0 0 0 0); }
.tl-out { color: var(--tok-p); }
.preview-contents {
  width: min(100%, 26rem); padding: 10px 20px 6px; border-radius: var(--r-lg);
  background: var(--card-bg); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line);
}
.preview-contents .contents-list li:last-child a { box-shadow: none; }

/* ------------------------------------------------------------------ D */
/* H4 process line: numbers fill and a pencil line joins them as the
   list enters (scrub --pe on .steps). Segments live on each li. */
.process-line { position: relative; }
/* phones: one column, number beside the copy, a vertical line joins the numbers.
   720–1099px: 2 × 2, a horizontal line joins each row's pair (1→2, 3→4).
   ≥ 1100px: 4 across, one line joins all four. */
#process .process-line { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { #process .process-line { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { #process .process-line { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 719px) {
  #process .process-line > li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--s-4); align-items: start; }
  #process .process-line > li > .step-num { grid-row: 1 / span 2; }
  #process .process-line h3 { margin: 4px 0 .35em; }
}
.process-line .step-num { z-index: 2; isolation: isolate; background: var(--card-bg); }
.process-line .step-num::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--mark); }
.process-line > li:not(:last-child)::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none; border-radius: 2px; background: var(--mark);
  left: calc(var(--s-5) + 17px); top: calc(var(--s-5) + 18px); width: 2px; height: calc(100% + var(--gap)); transform-origin: top;
}
@media (min-width: 720px) {
  .process-line > li:not(:last-child)::after {
    left: calc(var(--s-5) + 18px); top: calc(var(--s-5) + 17px); width: calc(100% + var(--gap)); height: 2px; transform-origin: left;
  }
}
#process .nobr { white-space: nowrap; }   /* never "Free 20- / minute" */
/* 2 × 2: the line runs within a row only (step 2 ends its row) */
@media (min-width: 720px) and (max-width: 1099px) { .process-line > li:nth-child(2n)::after { content: none; } }

/* ------------------------------------------------------------------ E */
#about .section-head { max-width: 56rem; }
/* portrait slot: the hero card's round monogram, at portrait size (a configured photo replaces it) */
.monogram-portrait {
  width: 128px; height: 128px; font-size: 46px; font-weight: 600; letter-spacing: .02em;
  box-shadow: 0 0 0 6px var(--card-bg), 0 0 0 7.5px var(--mark), var(--shadow-2);
}
.about-photo img { width: 128px; height: 128px; box-shadow: 0 0 0 6px var(--card-bg), 0 0 0 7.5px var(--mark); }
.about-who { margin: 0 0 var(--s-5); text-align: center; }
.about-who h3 { margin: 0 0 6px; }
.about-role { margin: 0 0 var(--s-4); color: var(--accent-text); }
.about-bio { margin: 0 auto; font: 400 var(--fs-read)/1.55 var(--font-serif); color: var(--text-2); }
.about-why { margin: 0 0 var(--s-4); }
.about-copy > p:not(.pull):not(.about-cta) { font: 400 var(--fs-read)/1.62 var(--font-serif); color: var(--text-2); }
/* H5 pull quote (words ink in as it is read) */
.pull {
  max-width: 24em; margin: var(--s-6) 0; padding: 4px 0 4px var(--s-5); box-shadow: inset 3px 0 0 var(--mark);
  font: 600 var(--fs-h3)/1.2 var(--font-sans); letter-spacing: -.008em; color: var(--text);
}
.cred-grid { list-style: none; margin: var(--s-8) 0 0; padding: 0; display: grid; gap: var(--gap); }
/* 4 cards: 1 → 2 → 4 columns (never a 3 + 1 orphan row) */
@media (min-width: 640px) { .cred-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cred-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cred-card {
  position: relative; margin: 0; padding: clamp(20px, 1.25rem + .6vw, 32px); border-radius: var(--r-tile);
  background: var(--card-bg); box-shadow: var(--shadow-1), inset 0 3px 0 var(--mark), inset 0 0 0 1px var(--line); color: var(--text-2);
}
.cred-kicker { margin: 0 0 var(--s-3); color: var(--accent-text); }
.cred-card h3 { margin: 0 0 .4em; font-size: 1.1875rem; line-height: 1.25; }
.cred-card p:not(.cred-kicker) { margin: 0; font-size: 15px; color: var(--text-2); }
.about-stats { margin-top: var(--s-8); padding-top: var(--s-7); box-shadow: inset 0 1px 0 var(--line); }
.team-promise {
  max-width: 46rem; margin: var(--s-7) auto 0; padding: var(--s-5) var(--s-6); border-radius: var(--r-tile);
  background: var(--tint); box-shadow: inset 0 0 0 1px var(--line);
  font: 400 var(--fs-read)/1.6 var(--font-serif); color: var(--text); text-align: center;
}

/* ------------------------------------------------------------------ F */
.approach-duo { margin-bottom: var(--s-4); }
.duo-stance {
  margin: var(--s-5) 0 0; padding-top: var(--s-4); box-shadow: inset 0 1px 0 var(--line);
  font: 400 var(--fs-read)/1.55 var(--font-serif); color: var(--text);
}
/* H6 sheet: one line per subject, pencil first, then the spark annotates */
.spark-sheet { display: grid; align-content: center; align-content: safe center; aspect-ratio: 4 / 3; isolation: isolate; padding: clamp(18px, 3vw, 40px); }
@media (max-width: 899px) { .spark-sheet { aspect-ratio: auto; } }
.sheet-motif {
  display: none; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--motif-band);
}
.sheet-line {
  position: relative; display: grid; justify-items: start; gap: 6px; max-width: none; margin: 0;
  padding: clamp(10px, 1.3vw, 16px) 0; box-shadow: inset 0 -1px 0 var(--line);
}
.sheet-line:last-of-type { box-shadow: none; }
.sl-tag { color: var(--text-3); }
.sl-text { position: relative; display: inline-block; max-width: 100%; font: 400 clamp(1.0625rem, .92rem + .62vw, 1.5rem)/1.35 var(--font-serif); color: var(--text); }
.sheet-line[data-subject="cs"] .sl-text { font-family: var(--font-mono); font-size: clamp(.9375rem, .84rem + .42vw, 1.25rem); }
.sl-write { display: inline-block; max-width: 100%; }
.sl-write del { color: var(--text-3); text-decoration-color: #F08F80; text-decoration-thickness: 2px; }
.sl-write ins { text-decoration: none; font-style: italic; color: var(--text); }
.sheet--band .ring { overflow: visible; }
.sheet--band .ring .dash { stroke: var(--spark-bright); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.sl-pencil { display: none; position: absolute; left: 0; bottom: .05em; width: 100%; height: 1.2em; pointer-events: none; }
.sl-pencil svg { position: absolute; left: 0; bottom: 0; width: 1.9em; height: auto; overflow: visible; }
.sl-pencil-body { fill: var(--band-ink-2); }
.sl-pencil-tip { fill: var(--accent-bright); }
.sl-note { display: block; max-width: 34em; font-size: 14px; line-height: 1.45; color: var(--spark-text); }
.sl-spark { display: inline-block; color: var(--spark-text); }
.story-steps .step-pencil, .story-steps .step-spark { margin: 0 0 var(--s-3); }
.step-pencil .t-meta, .step-spark .t-meta { display: block; margin-bottom: 2px; }
.step-pencil .t-meta { color: var(--text-3); }
.step-spark .t-meta { color: var(--spark-text); }
.step-spark .t-meta::before { content: "✦ "; content: "✦ " / ""; }
@media (max-width: 599px) {
  .spark-sheet { padding: 14px 16px; }
  .sheet-line { gap: 3px; padding: 8px 0; }
  .sl-note { font-size: 13px; }
}

/* ------------------------------------------------------------------ G */
/* 3 formats: the featured card spans the top row at tablet widths (1 + 2),
   3 across once all three fit; 4 notes: 1 → 2 → 4 */
@media (min-width: 640px) and (max-width: 959px) {
  #pricing .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #pricing .card-grid > .price-card-featured:first-child { grid-column: 1 / -1; }
}
@media (min-width: 960px) { #pricing .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
#pricing .pricing-notes { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { #pricing .pricing-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { #pricing .pricing-notes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* H7 pricing ring: a conic border that turns once when the card reveals */
.price-card-featured { box-shadow: var(--shadow-2); }
.price-card-featured::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--arc), var(--accent), var(--tint-2) 30%, var(--accent-ink) 62%, var(--accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.motion-ok .price-card-featured.is-visible::before { animation: arc-spin 1.4s var(--ease-in-out) 400ms both; }
@media (forced-colors: active) { .price-card-featured::before { content: none; } .price-card-featured { outline: 2px solid CanvasText; } }

/* keyframes (each ends on the resting frame) */
@keyframes home-line-rise { from { transform: translateY(.3em); } }
@keyframes spectrum-in { from { background-size: 300% 100%; background-position: 100% 0; } to { background-size: 100% 100%; background-position: 0 0; } }
@keyframes tu-math { 0% { stroke-dashoffset: 1.001; opacity: 1; } 66% { stroke-dashoffset: 0; opacity: 1; } 82% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes tu-en { 0% { stroke-dashoffset: 1.001; opacity: 1; } 78% { stroke-dashoffset: 0; opacity: 1; } 84% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes tu-cs { 0%, 24% { opacity: 1; } 25%, 49% { opacity: 0; } 50%, 74% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes card-in { from { opacity: 0; translate: 0 40px; } }
@keyframes live-pulse { 50% { opacity: .25; } }
@keyframes pv-draw { 0% { stroke-dashoffset: 1.001; } 62%, 100% { stroke-dashoffset: 0; } }
@keyframes pv-pop { 0%, 60% { opacity: 0; scale: .3; } 76%, 100% { opacity: 1; scale: 1; } }
@keyframes pv-hl { 0% { background-size: 0% .62em; } 22%, 100% { background-size: 100% .62em; } }
@keyframes pv-strike { 0%, 46% { transform: scaleX(0); } 60%, 100% { transform: scaleX(1); } }
@keyframes pv-ins { 0%, 58% { opacity: 0; translate: 0 6px; } 72%, 100% { opacity: 1; translate: 0 0; } }
@keyframes pv-type { 0% { clip-path: inset(0 100% 0 0); } 60%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes pv-out { 0%, 64% { opacity: 0; scale: .7; } 78%, 100% { opacity: 1; scale: 1; } }

/* ------------------------------------------------------------------ H */
/* =====================================================================
   RULE-10 BLOCK (home) — hidden starting states, load sequences and
   pinned-only parts. Print, reduced motion and no-JS never see it.
   ===================================================================== */
@media screen and (prefers-reduced-motion: no-preference) {

  /* H1: lines rise (transform only — the h1 is always painted) */
  .motion-ok .hero-title .line { animation: home-line-rise var(--dur-hero) var(--ease-expo) both; }
  .motion-ok .hero-title .line-tone { animation-delay: 90ms; }
  .motion-ok .hero-title .tone--spectrum { animation: spectrum-in 1.6s var(--ease-out) 150ms both; }
  /* three inks pass (each ends invisible = its rest), pencil stays, spark lands */
  .motion-ok .tu-math { animation: tu-math 1s var(--ease-pencil) 200ms forwards; }
  .motion-ok .tu-en { animation: tu-en 1s var(--ease-pencil) 1.1s forwards; }
  .motion-ok .tu-cs { animation: tu-cs .8s steps(1) 2s forwards; }
  .motion-ok .tu-pencil { animation: draw-on .8s var(--ease-pencil) 2.9s both; }
  .motion-ok .tu-spark { animation: pop-in 420ms var(--ease-pop) 3.8s both; }
  /* subhead arrives a beat later */
  .motion-ok .hero-copy > .hero-meta { animation: rise-in 700ms var(--ease-out) both; }
  .motion-ok .hero-copy > .hero-lead { animation: rise-in 700ms var(--ease-out) 250ms both; }
  .motion-ok .hero-copy > .hands-note { animation: rise-in 700ms var(--ease-out) 350ms both; }
  .motion-ok .hero-copy > .hero-actions { animation: rise-in 700ms var(--ease-out) 450ms both; }
  .motion-ok .hero-copy > .trust-chips { animation: rise-in 700ms var(--ease-out) 550ms both; }
  .motion-ok .hero-copy > .replies { animation: rise-in 700ms var(--ease-out) 650ms both; }
  .motion-ok .hand-underline .draw { transition-delay: 1.2s; }

  /* product shot: entry scale (scrub, not on phones) + card arrives, then fills in */
  @media (min-width: 720px) { .motion-ok .hero-art[data-motion~="scrub"] { scale: calc(.92 + .08 * var(--pe)); } }
  .motion-ok .hero-art .session-card { animation: card-in 900ms var(--ease-expo) 200ms both; }
  .motion-ok .session-card:not(.is-in) :is(.mock-question, .mock-answer, .mock-note) { opacity: 0; translate: 0 10px; }
  .motion-ok .session-card :is(.mock-question, .mock-answer, .mock-note) { transition: opacity 500ms var(--ease-out), translate 500ms var(--ease-out); }
  .motion-ok .session-card .mock-question { transition-delay: 700ms; }
  .motion-ok .session-card .mock-answer { transition-delay: 1150ms; }
  .motion-ok .session-card .mock-note { transition-delay: 2300ms; }
  .motion-ok .session-card:not(.is-in) .mock-plan .bar i { transform: scaleX(0); }
  .motion-ok .session-card .mock-plan .bar i { transition: transform 900ms var(--ease-out) calc(1600ms + var(--li) * 150ms); }
  .motion-ok .session-card.is-in .live-pill::before { animation: live-pulse 1.2s ease-in-out 1s 3; }

  /* H3 previews: hidden until seen, then three short loops resting on the final frame */
  .motion-ok .preview--math:not(.is-in) .draw { stroke-dashoffset: 1.001; }
  .motion-ok .preview--math:not(.is-in) .pv-dot { opacity: 0; }
  .motion-ok .preview--math.is-in .draw { animation: pv-draw 1.6s var(--ease-pencil) 3 both; }
  .motion-ok .preview--math.is-in .pv-dot { animation: pv-pop 1.6s var(--ease-out) 3 both; }
  .motion-ok .preview--english:not(.is-in) .hl { background-size: 0% .62em; }
  .motion-ok .preview--english:not(.is-in) del::after { transform: scaleX(0); }
  .motion-ok .preview--english:not(.is-in) ins { opacity: 0; }
  .motion-ok .preview--english.is-in .hl { animation: pv-hl 1.6s var(--ease-out) 3 both; }
  .motion-ok .preview--english.is-in .hl-ev { animation-delay: .12s; }
  .motion-ok .preview--english.is-in .hl-an { animation-delay: .24s; }
  .motion-ok .preview--english.is-in del::after { animation: pv-strike 1.6s var(--ease-pencil) 3 both; }
  .motion-ok .preview--english.is-in ins { animation: pv-ins 1.6s var(--ease-out) 3 both; }
  .motion-ok .preview--cs:not(.is-in) .pv-type { clip-path: inset(0 100% 0 0); }
  .motion-ok .preview--cs:not(.is-in) .tl-out { opacity: 0; }
  .motion-ok .preview--cs.is-in .pv-type { animation: pv-type 1.6s steps(14) 3 both; }
  .motion-ok .preview--cs.is-in .tl-out { animation: pv-out 1.6s var(--ease-out) 3 both; }

  /* H4 process line: number k fills over t∈[k, k+.5], segment k grows over [k+.5, k+1] (t = 4·pe) */
  .motion-ok .process-line .step-num::before { opacity: clamp(0, (var(--pe) * 4 - var(--i)) * 2, 1); }
  .motion-ok .process-line > li:not(:last-child)::after { transform: scaleY(clamp(0, (var(--pe) * 4 - var(--i) - .5) * 2, 1)); }
  @media (min-width: 720px) {
    .motion-ok .process-line > li:not(:last-child)::after { transform: scaleX(clamp(0, (var(--pe) * 4 - var(--i) - .5) * 2, 1)); }
  }

  /* H6 pinned-only parts: subject motifs behind the sheet, the riding pencil,
     and a write-on clip widened so the spark ring around a token is not cut */
  .motion-ok .story.is-pinned .sheet-motif { display: block; }
  .motion-ok .story.is-pinned .sl-pencil { display: block; transform: translateX(calc(var(--on) * 100%)); }
  /* phones: long lines fill the sheet, so stop the pencil body inside the sheet's padding */
  @media (max-width: 599px) { .motion-ok .story.is-pinned .sl-pencil { transform: translateX(calc(var(--on) * (100% - 1.9em))); } }
  .motion-ok .story.is-pinned .sl-write.tp-write {
    clip-path: inset(-.8em calc((1 - var(--on)) * (100% + 1.4em) - 1.4em) -.8em -.5em);
  }

  /* H6 fit: while pinned, only the active step shows its two lines of detail
     (the rest keep their titles; the text stays readable to screen readers),
     so the list fits a 700px-tall laptop instead of running off the stage */
  @media (min-width: 900px) {
    .motion-ok .story.is-pinned .story-steps { gap: var(--s-5); }
    .motion-ok .story.is-pinned .story-steps > li:not(.is-active) :is(.step-pencil, .step-spark) {
      position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
  }
  /* phones and short screens: the pencil lines all stay on the sheet, but
     only the active step's AI note does (one note's height, never clipped) */
  @media (max-width: 899px), (max-height: 820px) {
    .motion-ok .story.is-pinned .story-stage:not([data-step-active="0"]) .sheet-line:nth-of-type(1) .sl-note,
    .motion-ok .story.is-pinned .story-stage:not([data-step-active="1"]) .sheet-line:nth-of-type(2) .sl-note,
    .motion-ok .story.is-pinned .story-stage:not([data-step-active="2"]) .sheet-line:nth-of-type(3) .sl-note,
    .motion-ok .story.is-pinned .story-stage:not([data-step-active="3"]) .sheet-line:nth-of-type(4) .sl-note { display: none; }
  }
  /* tablets/phones: centred like the other story sheets, but with a floor taller than the
     tallest step (the active note changes height), so the sheet never jumps between steps */
  @media (max-width: 899px) {
    .motion-ok .story.is-pinned .spark-sheet { align-self: center; min-height: min(100%, 25rem); }
  }
}

/* the config-driven list (data-tutor-credentials, painted by main.js from
   site.config.js tutor.credentials) is an optional owner-editable extra: it
   stays [hidden] while that list is empty (the cred-grid below carries the
   credentials). When filled it sits under the facts as a compact checklist. */
#about .about-card .credential-list {
  margin: var(--s-5) 0 0; padding-top: var(--s-5); box-shadow: inset 0 1px 0 var(--line);
  font-size: 15px; line-height: 1.45; text-align: left;
}