/* How it works */

/* ---------- sticky scroll story ---------- */
.story-rail{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px)}
.story-stage{position:sticky;top:calc(var(--hdr) + 24px);align-self:start;height:min(64vh,560px)}
.story-visual{width:100%;height:100%;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center}
.story-visual img{grid-area:1/1;width:auto;height:auto;max-width:100%;max-height:100%;aspect-ratio:1122/1402;border-radius:var(--r-xl);border:1px solid var(--line);box-shadow:var(--shadow-2);opacity:0;transition:opacity 0s .45s}
/* the incoming poster fades in on top; the outgoing one stays opaque underneath until it is covered */
.story-visual img.on{opacity:1;z-index:1;transition:opacity .45s var(--ease)}
@media (prefers-reduced-motion:reduce){.story-visual img,.story-visual img.on{transition:none}}

.story-steps{display:grid;gap:clamp(60px,10vh,140px);padding-block:clamp(20px,4vh,60px) clamp(80px,24vh,220px)}
.story-step{opacity:.4;transition:opacity .5s var(--ease);max-width:52ch;scroll-margin-top:calc(var(--hdr) + 24px)}
.story-step.active{opacity:1}
.st-num{display:inline-block;font-size:.76rem;color:var(--accent-text);margin-bottom:10px;letter-spacing:.08em}
.story-step h3{font-size:clamp(1.3rem,1.05rem + 1vw,1.9rem);margin-bottom:10px}
.story-step p{color:var(--ink-2)}
@media (max-width:900px){
  .story-rail{grid-template-columns:1fr}
  .story-stage{top:var(--hdr);z-index:2;height:min(50vh,440px);padding-block:8px 12px;background:var(--bg);margin-bottom:8px}
  .story-steps{gap:36px;padding-block:6px}
  .story-step{opacity:1;max-width:none}
}
/* a landscape or zoomed phone has no room to read under a sticky picture */
@media (max-width:900px) and (max-height:599px){.story-stage{position:relative;top:0;height:min(80vh,440px)}}

/* ---------- QA loop ---------- */
.qa-loop{display:grid;gap:22px;padding:clamp(20px,2.6vw,34px);border-radius:var(--r-xl);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-2)}
.qa-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.qa-box{border-radius:var(--r-m);padding:14px 16px;font-size:.86rem;font-weight:600;display:grid;gap:4px;border:1px solid var(--line-strong)}
.qa-box.render{background:var(--surface-3)}
.qa-checks{display:grid;gap:8px;flex:1;min-width:180px}
.qa-box.check{background:var(--surface-2);font-weight:500;font-size:.82rem;color:var(--ink-2);border-style:dashed}
.qa-box.pass{background:color-mix(in oklab,var(--good) 16%,var(--surface));border-color:color-mix(in oklab,var(--good) 40%,var(--line))}
.qa-box.warn{background:color-mix(in oklab,var(--warn) 16%,var(--surface));border-color:color-mix(in oklab,var(--warn) 45%,var(--line))}
.qb-n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:.7rem;margin-bottom:2px}
.qa-arrow{color:var(--muted);font-size:1.3rem;flex:none}
.qa-retry{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:var(--accent-soft);color:var(--accent-text);font-size:.82rem;width:fit-content}
.qa-retry-arc{width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%}
.qa-fallback{margin-top:2px}
.qa-facts{display:grid;gap:12px;margin-top:24px}
.qa-facts li{padding-left:0;color:var(--ink-2);font-size:.95rem}
.qa-facts b{color:var(--ink);font:700 1.4rem/1 var(--f-display);margin-right:10px}
@media (max-width:620px){.qa-row{flex-direction:column;align-items:stretch}.qa-arrow{transform:rotate(90deg);justify-self:center}}

/* ---------- local-first ---------- */
.local-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
.lg-item h3{font-size:1.05rem;margin-bottom:6px}
.lg-item p{font-size:.88rem;color:var(--ink-2)}
.net-card{border-radius:var(--r-xl);padding:clamp(20px,2.6vw,30px);box-shadow:var(--shadow-2)}
.net-card .kicker{display:block;margin-bottom:16px;color:var(--muted)}
.net-row{display:flex;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.net-row:first-of-type{border-top:0}
.net-row b{font-size:.94rem}
.net-row p{font-size:.82rem;color:var(--muted);margin-top:2px}
.net-dot{width:9px;height:9px;border-radius:50%;background:var(--line-strong);margin-top:6px;flex:none}
.net-row.on .net-dot{background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
@media (max-width:620px){.local-grid{grid-template-columns:1fr}}