/* MOAT motion pictograms (Docs + How it works) */
.mo{margin:24px 0 12px;border:1px solid #263a4a;border-radius:8px;background:#070e1c;overflow:hidden;text-align:left}
.mo-stage{position:relative;aspect-ratio:480/300;background:#0a1624}
.mo-stage.tall{aspect-ratio:480/280}
.mo-stage svg{display:block;width:100%;height:100%;overflow:hidden;touch-action:pan-y}
.mo text{font-family:var(--mono);font-size:var(--mo-fs,11px);letter-spacing:.06em;fill:#b8cadb}
.mo text.dim,.mo .dim{fill:#98adbf}
.mo .mo-read{fill:var(--ice)}
.mo .mo-call{fill:var(--ice)}
.mo .is-red{fill:var(--red)}
.mo .mo-br,.mo .mo-tower,.mo .mo-vault,.mo .mo-net{-webkit-tap-highlight-color:transparent}
.mo-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid #1d2d3d;background:#0c1927;min-height:62px}
.mo-btn{font:600 12px/1.2 var(--font);color:var(--white);background:#10202f;border:1px solid #33506a;border-radius:6px;padding:11px 14px;min-height:42px;cursor:pointer;transition:border-color .2s,background-color .2s}
.mo-btn:hover{border-color:var(--aqua);background:#6eeee312}
.mo-btn.ghost{background:transparent;color:var(--muted)}
.mo-btn[aria-pressed=true]{border-color:var(--aqua);color:var(--night);background:var(--aqua)}
.mo-btn:focus-visible,.mo-range input:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
.mo-range{display:flex;align-items:center;gap:10px;flex:1 1 240px;font:11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mo-range input{flex:1;accent-color:#ef7973;min-height:42px;cursor:pointer}
.mo-range.calm input{accent-color:#86b9db}
.mo figcaption{padding:12px 14px 14px;font-size:13px;line-height:1.55;color:var(--muted);border-top:1px solid #1d2d3d}
.mo figcaption b{color:var(--white);font-weight:700}
.mo-rm{display:none;margin:0;padding:0 14px 14px;font:11px/1.5 var(--mono);color:var(--amber)}
.mo-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mo-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mo-pair .mo{margin:24px 0 12px}
@media(prefers-reduced-motion:reduce){.mo-rm{display:block}}
@media(max-width:900px){.mo-pair{grid-template-columns:1fr;gap:0}}
@media(max-width:760px){.mo-bar{padding:10px}.mo-btn{flex:1 1 auto}.mo figcaption{font-size:13px}}

/* Scroll walkthrough */
.wk{padding:30px 0 70px}
.wk-head{text-align:center;max-width:640px;margin:0 auto 34px}
.wk-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:start}
.wk-scene{position:sticky;top:16px}
.wk-scene .mo{margin:0}
.wk-steps{display:grid;gap:18vh;padding:8vh 0 22vh}
.wk-step{padding:22px 22px 24px;border:1px solid #1d2d3d;border-radius:8px;background:#0a1624;opacity:.45;transition:opacity .35s,border-color .35s}
.wk-step.is-active{opacity:1;border-color:#3d5c74}
.wk-step .step-no{font:11px/1 var(--mono);letter-spacing:.14em;color:var(--aqua);display:block;margin-bottom:12px}
.wk-step h3{margin-bottom:10px}
.wk-step p{font-size:14px;color:var(--muted);margin:0}
.wk-step code{font:12px var(--mono);color:var(--ice)}
@media(max-width:900px){
  .wk-grid{grid-template-columns:1fr;gap:0}
  .wk-scene{top:0;z-index:2;background:var(--night);padding:6px 0 10px}
  .wk-steps{gap:34vh;padding:6vh 0 30vh}
}
@media(prefers-reduced-motion:reduce){.wk-step{opacity:1}.wk-steps{gap:18px;padding:18px 0}.wk-scene{position:relative;top:0}}