/* Act C only. Shared scroll.js owns measurement, sticky travel and --p.
   No additional JS, scroll listener, timer or layout animation. */
.how-act { position: relative; margin-top: 32px; }
#how .head .eyebrow { color: var(--aqua-700); }
.how-stage {
  position: absolute;
  width: 100%;
  visibility: hidden;
  pointer-events: none;
  padding-block: 24px;
}
.how-demo-label { color: var(--aqua-700); font-weight: 700; margin: 0 0 16px; }
.how-frames { display: grid; }
.how-frame { grid-area: 1 / 1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; }
.how-visual { min-width: 0; display: grid; place-items: center; }
.how-phone { width: 300px; max-width: 100%; padding: 10px; border-radius: 28px; border: 1px solid var(--sand-300); background: var(--navy-950); box-shadow: 0 16px 32px #07182718; }
.how-phone-head { color: white; font-weight: 700; padding: 4px 12px 12px; }
.how-screen { background: var(--sand-50); border-radius: 18px; padding: 16px; }
.how-screen h4, .how-board h4 { margin: 0; font-size: 18px; }
.how-field { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--sand-200); font-size: 16px; }
.how-field > span { color: var(--slate-600); }
.how-field:last-child { border: 0; }
.how-screen p, .how-board p { margin: 10px 0; font-size: 16px; color: var(--slate-600); }
.how-score-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.how-cell { display: grid; text-align: center; border-radius: 8px; border: 1px solid var(--sand-300); background: white; padding: 4px; }
.how-cell small { color: var(--slate-600); font-size: 12px; font-weight: 600; }
.how-cell b { font-size: 20px; }
.how-board { width: 340px; max-width: 100%; background: white; border: 1px solid var(--sand-300); padding: 20px; border-radius: 16px; }
.how-board ol { list-style: none; padding: 0; margin: 12px 0 0; }
.how-row { display: grid; grid-template-columns: 18px 1fr 34px 28px; align-items: center; gap: 8px; min-height: 44px; border-top: 1px solid var(--sand-200); font-variant-numeric: tabular-nums; }
.how-move { color: var(--slate-600); font-size: 14px; font-weight: 700; }
.how-move.up { color: var(--aqua-700); }
.how-move.dn { color: var(--coral-600); }
.how-caption h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 8px 0; }
.how-caption p { margin: 0; font-size: 16px; color: var(--slate-600); }
.how-step { font-weight: 800; color: #a9332a; }
.how-progress { height: 3px; background: var(--sand-300); margin: 20px 0 16px; }
.how-progress span { display: block; height: 100%; background: var(--aqua-700); transform-origin: left; transform: scaleX(var(--p)); }
.how-caveat { margin: 0; font-size: 16px; color: var(--slate-600); }
.how-sequence { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.how-sequence > li { min-width: 0; padding: 24px; background: white; border: 1px solid var(--sand-200); border-top: 3px solid var(--aqua-400); border-radius: 0 0 12px 12px; }
.how-sequence > li > h3 { margin: 8px 0; font-size: 20px; }
.how-sequence > li > p { color: var(--slate-600); font-size: 16px; }
.how-sequence .how-static-visual { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.how-sequence > li > h4 { margin-top: 24px; }
.how-static-note { font-size: 16px; color: var(--slate-600); }

/* The hidden stage keeps the same measurable intrinsic size in both modes.
   Only the engine's successful fit test enables its visual presentation.
   The semantic steps stay accessible in their original reading order. */
.how-act[data-scroll-pinned] > .how-stage { visibility: visible; }
.how-act[data-scroll-pinned] > .how-sequence,
.how-act[data-scroll-pinned] ~ .how-static-note { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%); }
.how-act[data-scroll-pinned] .how-frame { opacity: var(--beat); transform: translateY(calc((1 - var(--beat)) * 32px)); }
.how-frame-0 { --beat: clamp(0, calc((.22 - var(--p)) * 50), 1); }
.how-frame-1 { --beat: clamp(0, min(calc((var(--p) - .20) * 50), calc((.52 - var(--p)) * 50)), 1); }
.how-frame-2 { --beat: clamp(0, min(calc((var(--p) - .50) * 50), calc((.82 - var(--p)) * 50)), 1); }
.how-frame-3 { --beat: clamp(0, calc((var(--p) - .80) * 50), 1); }
/* All nine scores finish before the next crossfade, leaving a readable hold. */
.how-act[data-scroll-pinned] .how-cell { --entered: clamp(0, calc((var(--p) - .20 - var(--cell) * .02) / .04), 1); opacity: var(--entered); transform: translateY(calc((1 - var(--entered)) * 8px)); }
.how-act[data-scroll-pinned] .how-row { --ranked: clamp(0, calc((var(--p) - .52) / .18), 1); }
.how-act[data-scroll-pinned] .how-row-1 { transform: translateY(calc((1 - var(--ranked)) * 100%)); }
.how-act[data-scroll-pinned] .how-row-2 { transform: translateY(calc((var(--ranked) - 1) * 100%)); }
.how-act[data-scroll-pinned] .how-final { opacity: clamp(0, calc((var(--p) - .70) * 100), 1); }

/* Phone: upright 240/216 px phone, then caption, in one reserved area.
   Keep the engine's two-viewport travel, with wider complementary crossfades.
   Oversized localized stages stay stacked. */
@media (max-width: 700px) {
  .how-frame { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .how-frame .how-visual { align-self: start; }
  .how-phone { width: 240px; }
  .how-screen { padding: 12px; }
  .how-board { width: 280px; }
  .how-board { padding: 14px; }
  .how-caption h3 { font-size: 24px; }
  .how-stage { padding-block: 16px; }
  .how-frame-0 { --beat: clamp(0, calc((.26 - var(--p)) / .08), 1); }
  .how-frame-1 { --beat: clamp(0, min(calc((var(--p) - .18) / .08), calc((.56 - var(--p)) / .08)), 1); }
  .how-frame-2 { --beat: clamp(0, min(calc((var(--p) - .48) / .08), calc((.86 - var(--p)) / .08)), 1); }
  .how-frame-3 { --beat: clamp(0, calc((var(--p) - .78) / .08), 1); }
  .how-act[data-scroll-pinned] .how-frame { transform: translateY(calc((1 - var(--beat)) * 16px)); }
  .how-sequence { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 920px) {
  .how-sequence { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 359px) {
  .how-phone { width: 216px; }
  .how-board { width: 256px; }
  .how-sequence > li { padding: 18px 12px; }
}
@media (prefers-reduced-motion: reduce), print {
  .how-act[data-scroll-pinned] { min-height: 0; }
  .how-act > .how-stage,
  .how-act[data-scroll-pinned] > .how-stage { visibility: hidden; position: absolute; }
  .how-act[data-scroll-pinned] > .how-sequence,
  .how-act[data-scroll-pinned] ~ .how-static-note { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}