/* v33 (9 Nov 2026): home "How it works" scroll story. Navy band, sticky isometric line on canvas, chapters as real text.
   Default (no JS) and reduced motion: a plain list. .ks-on (set by story.js) turns on the sticky scroll layout. */
.ks-story{--ks-top:76px;--ks-h:min(500px,calc(100vh - 180px));background:#0F2338;color:#fff;padding:104px 0 96px;overflow:clip}
.ks-story+.k-end{border-top:1px solid rgba(213,220,230,.12)}
.ks-story .ks-h{font-size:36px;letter-spacing:-.6px;color:#fff;margin:0 0 40px}
.ks-stage{display:none;position:relative}
.ks-canvas{display:block;width:100%;height:100%}
.ks-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.ks-ch{border-top:1px solid rgba(213,220,230,.22);padding-top:22px;position:relative}
.ks-ch::before{content:"";position:absolute;left:0;top:-1px;width:48px;height:2px;background:#8FC0F5}
.ks-n{display:block;font-size:14px;font-weight:bold;letter-spacing:.12em;color:#8FC0F5;margin-bottom:12px}
.ks-t{display:block;font-size:24px;line-height:1.2;color:#fff;margin-bottom:8px}
.ks-d{display:block;font-size:18px;line-height:1.5;color:#D5DCE6}
.ks-note{max-width:none;margin:56px 0 0;padding-top:24px;border-top:1px solid rgba(213,220,230,.14);font-size:17px;color:#D5DCE6}
.ks-note .k-link{color:#fff;margin-left:12px;display:inline;padding:0}
.ks-note .k-link:hover{color:#8FC0F5}

/* reduced motion: one still, paced frame above the plain list */
.ks-still .ks-stage{display:block;height:auto;aspect-ratio:16/8;max-height:460px;margin:0 0 48px}

/* scroll story */
.ks-on .ks-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:40px;align-items:start}
.ks-on .ks-stage{display:block;position:sticky;top:calc(var(--ks-top) + (100vh - var(--ks-top) - var(--ks-h)) / 2);height:var(--ks-h)}
.ks-on .ks-steps{display:block;padding:calc(var(--ks-h) * .5 - 32vh) 0}
.ks-on .ks-ch{min-height:64vh;display:flex;align-items:center;border-top:0;padding:0 0 0 28px}
.ks-on .ks-ch::before{top:50%;left:0;width:1px;height:120px;margin-top:-60px;background:rgba(213,220,230,.2);transition:background .35s,width .35s}
.ks-on .ks-n,.ks-on .ks-t,.ks-on .ks-d{transition:color .35s ease}
/* inactive chapters: dimmed by colour, still >= 4.5:1 on #0F2338 */
.ks-on .ks-ch:not(.ks-act) .ks-n{color:rgba(143,192,245,.75)}
.ks-on .ks-ch:not(.ks-act) .ks-t{color:rgba(255,255,255,.62)}
.ks-on .ks-ch:not(.ks-act) .ks-d{color:rgba(213,220,230,.65)}
.ks-on .ks-ch.ks-act::before{background:#8FC0F5;width:2px}
.ks-on .ks-t{font-size:32px;letter-spacing:-.5px;margin-bottom:12px}
.ks-on .ks-d{font-size:20px;max-width:380px}
.ks-on .ks-note{margin-top:24px}

@media (max-width:860px){
  .ks-story{--ks-top:64px;padding:64px 0}
  .ks-story .ks-h{font-size:28px;margin-bottom:28px}
  .ks-steps{grid-template-columns:1fr;gap:28px}
  .ks-note .k-link{display:inline;margin:0 0 0 6px;padding:0}
  .ks-still .ks-stage{aspect-ratio:4/3;margin-bottom:36px}
  .ks-on .ks-grid{display:block}
  .ks-on .ks-stage{--ks-ph:min(42vh,72vw);top:var(--ks-top);height:var(--ks-ph);z-index:2;background:#0F2338;margin:0 -20px;padding:0 8px}
  .ks-on .ks-stage::after{content:"";position:absolute;left:0;right:0;top:100%;height:40px;background:linear-gradient(#0F2338,rgba(15,35,56,0));pointer-events:none}
  .ks-on .ks-steps{padding:24px 0 56px}
  .ks-on .ks-ch{min-height:36vh;align-items:flex-start;padding:28px 0 0 20px}
  .ks-on .ks-ch:last-child{min-height:0}
  .ks-on .ks-ch::before{top:28px;margin-top:0;height:96px}
  .ks-on .ks-t{font-size:26px}
  .ks-on .ks-d{font-size:18px}
}
/* the wrap padding is 20px up to 760px and 24px above, so the full-bleed stage matches it */
@media (min-width:761px) and (max-width:860px){.ks-on .ks-stage{margin:0 -24px}}
@media (prefers-reduced-motion:reduce){.ks-on .ks-n,.ks-on .ks-t,.ks-on .ks-d,.ks-on .ks-ch::before{transition:none}}