/* Scroll story (spec §4 v3): pinned laptop console, evidence tiles, iPhone release.
   Colours are Meridian roles from css/design-system.css only. */
.scrolly { position: relative; background: var(--background-default); color: var(--text-default); }
.stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; z-index: 0; }
.stage__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.stage__glow { position: absolute; inset: 0; background: url("../media/textures/glow-01.jpg") center / cover no-repeat; mix-blend-mode: screen; opacity: .55; pointer-events: none; }
.stage::after { content: ""; position: absolute; inset: 0; background: url("../media/textures/grain.png"); opacity: .05; pointer-events: none; }
.laptop { position: relative; width: min(1080px, 86vw); transform-origin: 50% 55%; will-change: transform; }
.laptop__screen { position: relative; border-radius: 18px 18px 6px 6px; padding: 12px; background: var(--surface-frosted, rgb(255 255 255 / .06)); border: 1px solid var(--border-frosted, rgb(255 255 255 / .12)); backdrop-filter: blur(18px); }
.laptop__screen #console { max-height: 68vh; overflow: hidden; border-radius: 10px; }
.laptop__base { height: 12px; margin: 0 -4%; border-radius: 0 0 16px 16px; background: var(--surface-frosted, rgb(255 255 255 / .08)); border: 1px solid var(--border-frosted, rgb(255 255 255 / .12)); border-top: 0; }
.tiles { position: absolute; right: 22px; bottom: 22px; display: grid; grid-template-columns: repeat(2, 200px); gap: 10px; opacity: 0; transform: translateY(24px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.tile { margin: 0; border-radius: 12px; overflow: hidden; background: var(--surface-elevated); border: 1px solid var(--border-default); }
.tile video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.tile figcaption { font: 12px/1.35 var(--font-sans); padding: 8px 10px; color: var(--text-default); }
.tile b { display: block; font-weight: 600; color: var(--text-primary); }
.iphone { position: absolute; right: 7vw; top: 50%; width: 220px; aspect-ratio: 9 / 19.5; transform: translate(40px, -50%); opacity: 0; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); border-radius: 36px; padding: 10px; background: var(--neutral-base-950); border: 1px solid var(--border-frosted, rgb(255 255 255 / .14)); }
.iphone__screen { height: 100%; border-radius: 28px; background: var(--surface-elevated); padding: 22px 16px; display: grid; align-content: start; gap: 8px; }
.iphone__kicker { font: 500 10px/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--text-primary); margin: 0; }
.iphone__title { font: 500 18px/1.2 var(--font-display); margin: 0; color: var(--text-default); }
.iphone__meta { font-size: 12px; color: var(--text-subdued); margin: 0; }
.iphone__cta { margin-top: 18px; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 999px; background: var(--surface-primary); color: var(--text-on-primary); font: 500 12px/1.2 var(--font-sans); }
.iphone__face { width: 22px; height: 22px; border-radius: 7px; border: 2px solid currentColor; flex: none; }
.iphone__done { margin: 10px 0 0; font-size: 12px; color: var(--text-subdued); opacity: 0; transition: opacity .4s; }
body[data-step="3"] .tiles, body[data-step="4"] .tiles { opacity: 1; transform: none; }
body[data-step="5"] .iphone { opacity: 1; transform: translate(0, -50%); }
body[data-step="5"] .iphone__done { opacity: 1; transition-delay: .9s; }
.step { position: relative; z-index: 1; min-height: 100vh; display: grid; align-items: end; padding-block: 0 10vh; pointer-events: none; margin-top: -100vh; }
.step:first-of-type { margin-top: -100vh; }
.step + .step { margin-top: 0; }
.step--hero { min-height: 150vh; align-items: start; padding-block: 18vh 0; }
.caption { pointer-events: auto; max-width: 420px; margin-left: max(16px, 5vw); padding: 20px 22px; border-radius: 16px; background: var(--surface-frosted, rgb(21 23 36 / .72)); border: 1px solid var(--border-frosted, rgb(255 255 255 / .12)); backdrop-filter: blur(16px); }
.caption--hero { max-width: 760px; background: none; border: 0; backdrop-filter: none; padding: 0; }
.caption h2 { font-size: clamp(26px, 3vw, 40px); margin: 6px 0 8px; }
.fine { font-size: 12px; color: var(--text-subdued); }
@media (max-width: 1199px) {
  .stage { height: 55vh; }
  .stage__bg { display: none; }
  .laptop { width: 94vw; }
  .laptop__screen #console { max-height: 44vh; }
  .tiles { position: static; grid-template-columns: 1fr 1fr; padding: 8px 0 0; }
  .iphone { display: none; }
  .step { min-height: 80vh; margin-top: 0; align-items: center; padding-block: 24px; }
  .step:first-of-type { margin-top: 0; }
  .step--hero { min-height: auto; padding-block: 24px 48px; }
  .caption { margin: 0 16px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .tiles, .iphone, .iphone__done { transition: none; } }
/* The story's .step is a scroll step, not the shell's numbered process step. */
.scrolly > .step { border-top: 0; gap: 0; align-content: normal; }
.scrolly > .step::before { content: none; }
.caption--hero { display: grid; gap: var(--spacing-20); }
.caption--hero .lead { max-width: 58ch; }
.caption--hero p:last-child { display: flex; flex-wrap: wrap; gap: var(--spacing-12); }
.caption { display: grid; gap: var(--spacing-8); }
.caption p { color: var(--text-subdued); }
.caption--hero .lead, .caption--hero .eyebrow { color: inherit; }
.caption--hero .eyebrow { color: var(--text-primary); }
.step--hero { padding-top: calc(var(--navbar-height) + 7vh); }
/* Static path (reduced motion / no GSAP / console fallback) on desktop: no zoom, so the
   hero copy needs its own frosted ground to stay legible over the console. */
@media (min-width: 1200px) {
  .story--static .caption--hero { padding: 28px 32px; border-radius: var(--radius-2xl); background: color-mix(in oklab, var(--background-default) 82%, transparent);
    border: 1px solid var(--border-frosted); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
}
@media (max-width: 1199px) {
  .stage { top: var(--navbar-height); height: 55vh; }
  .step--hero { padding-top: 24px; }
}
@media (max-width: 1199px) {
  /* Captions scroll up UNDER the sticky screen, never over it. */
  .stage { z-index: 2; background: var(--background-default); border-bottom: 1px solid var(--border-frosted); }
}
@media (max-width: 1199px) {
  /* The whole laptop must fit the 55vh stage: screen padding + console + base. */
  .laptop__screen { padding: 8px; }
  .laptop__screen #console { max-height: calc(55vh - 44px); }
  .tiles { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 0; gap: 6px; grid-template-columns: 1fr 1fr; }
  .tile video { aspect-ratio: 16 / 7; }
  .tile figcaption { font-size: 10px; padding: 5px 7px; }
}
/* console.css gives .afc a 560px min-height (right for /platform); the story's screen is capped instead. */
.laptop__screen #console { min-height: 0; }
/* Reserve the screen before the console mounts: with only a max-height, the laptop grew as the
   console filled in (CLS ~0.1 on phones). The console is always taller than the cap, so nothing moves. */
.laptop__screen #console { height: 68vh; }
@media (max-width: 1199px) { .laptop__screen #console { height: calc(55vh - 44px); } }
/* Captions sit over the (light) console: a dark frosted ground keeps their text on the dark roles. */
.caption { background: color-mix(in oklab, var(--background-default) 84%, transparent); border-color: var(--border-frosted); }
.caption h2 { color: var(--text-emphasized); }
.caption--hero { background: none; }
@media (min-width: 1200px) {
  /* Step 6's point is the held reason, which sits bottom-left of the screen: caption goes right. */
  .scrolly > .step[data-step="6"] .caption { margin-left: auto; margin-right: max(16px, 5vw); }
}
@media (max-width: 1199px) {
  /* Phone: the headline comes first, then the screen sticks and the captions scroll under it. */
  .scrolly { display: flex; flex-direction: column; }
  .scrolly > .step--hero { order: -1; padding-top: calc(var(--navbar-height) + 32px); }
}
/* Review fixes (coordinator, 2026-09-24) */
@media (min-width: 1200px) {
  /* Steps 3–4: the four tiles are the evidence. They run as one strip along the bottom of the screen,
     over the capital panel (not the subject until step 5), which is hidden so nothing reads as clipped. */
  .tiles { left: 22px; right: 22px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tile video { aspect-ratio: 16 / 7; }
  body[data-step="3"] #console [data-panel="capital"], body[data-step="4"] #console [data-panel="capital"] { visibility: hidden; }
  /* Step 5: the laptop steps left so the iPhone never covers the "released" chip. */
  /* GSAP owns .laptop's transform (and writes translate: none inline), so the shift is a margin:
     the stage grid centres the laptop, and extra right margin moves it left by half. */
  .laptop { transition: margin-right .6s var(--ease-out); }
  body[data-step="5"] .laptop { margin-right: calc(2 * min(11vw, 170px)); }
  /* Shorter charts inside the story screen, so the middle panels end above the tile strip. */
  .laptop #console .afc__chart { height: 150px; }
  .iphone { right: max(16px, 2.5vw); }
}
@media (prefers-reduced-motion: reduce) { .laptop { transition: none; } }
@media (min-width: 1200px) {
  /* The strip must fit the capital panel's footprint (≈130px at 1440×900). */
  .tile video { aspect-ratio: 16 / 5; }
  .tile figcaption { padding: 6px 10px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tile b { display: inline; margin-right: 6px; }
}
@media (min-width: 1200px) {
  /* Steps 3–4: captions sit above the tile strip; step 4's subject (the checks chart) is on the left, so its caption goes right. */
  .scrolly > .step[data-step="3"], .scrolly > .step[data-step="4"] { padding-bottom: 34vh; }
  .scrolly > .step[data-step="4"] .caption { margin-left: auto; margin-right: max(16px, 5vw); }
}
/* Split stage (≥1200px, set by story.js): captions own a 400px left column; the laptop sits right of it. */
.story--split .scrolly > .step .caption { width: 400px; max-width: 400px; margin-left: 40px; margin-right: auto; }
.story--split .scrolly > .step[data-step="3"], .story--split .scrolly > .step[data-step="4"] { padding-bottom: 10vh; }
.story--split body[data-step="5"] .laptop { margin-right: 0; }
.story--split .scrolly > .step[data-step="5"] { padding-bottom: 2vh; }
.story--split .scrolly > .step--hero .caption--hero { width: auto; max-width: 760px; margin-left: max(16px, 5vw); }
/* The phone inside the step-5 caption card (split stage). */
.story--split .caption .iphone { position: relative; left: auto; right: auto; top: auto; width: 170px; margin: 0 0 14px;
  opacity: 1; transform: none; transition: none; }