:root{
  color-scheme:light;
  --bg:#f9f9f7;--panel:#ffffff;--panel2:#f2f1ed;--line:rgba(11,11,11,.08);--line2:rgba(11,11,11,.16);
  --text:#171716;--muted:#52514e;--faint:#6b6a64;--accent:#2470cc;--accent-ink:#1c5cab;--accent-soft:#e8f1fc;
  --green:#006300;--green-soft:#e9f5e9;--red:#b42f2f;--red-soft:#fbeceb;--warn:#8a5a00;--warn-soft:#fdf3dc;
  --grid:#e1e0d9;--axis:#c3c2b7;
  --sans:"Geist",system-ui,sans-serif;--mono:"Geist Mono",ui-monospace,monospace;
  --r:14px;--shadow:0 1px 2px rgba(23,23,22,.04),0 8px 24px -12px rgba(23,23,22,.10);
  --top:64px;
}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--top) + 16px)}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,p{margin:0}
.ic{font-size:22px;line-height:1;flex:none;display:inline-flex}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--text);color:var(--bg);padding:10px 14px;z-index:100}
.skip-link:focus{left:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Top bar */
.topbar{position:sticky;top:0;z-index:30;height:var(--top);display:flex;align-items:center;gap:20px;padding:0 24px;background:var(--bg);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:600;font-size:15px;white-space:nowrap;width:calc(var(--toc) - 24px)}
.brand-mark{width:14px;height:14px;border:1.5px solid var(--accent);transform:rotate(45deg)}
.progress{flex:1;height:3px;background:var(--line)}
.progress span{display:block;height:100%;background:var(--accent);width:0;transition:width .4s ease}
.progress-label{font:13px var(--mono);color:var(--muted);white-space:nowrap}
.menu-btn{display:none;background:none;border:0;padding:6px}

/* Shell */
.shell{display:grid;grid-template-columns:var(--toc) 1fr}
.toc{position:sticky;top:var(--top);height:calc(100vh - var(--top));overflow:auto;padding:28px 20px 24px 24px;border-right:1px solid var(--line);display:flex;flex-direction:column}
.toc-head{font:12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:m}
.toc li a{display:flex;align-items:center;gap:12px;padding:9px 10px;margin:0 -10px;text-decoration:none;color:var(--muted);font-size:15px;border-radius:4px}
.toc li a:hover{color:var(--text);background:var(--panel)}
.toc .dot{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--line2);flex:none}
.toc li.done .dot{background:var(--green);border-color:var(--green)}
.toc li.current a{color:var(--text);background:var(--panel2)}
.toc li.current .dot{border-color:var(--accent)}
.toc-score{margin-top:auto;padding-top:20px;font-size:14px;color:var(--muted)}
.toc-score b{color:var(--accent)}

main{min-width:0;overflow-x:hidden;overflow-x:clip;padding:56px clamp(20px,5vw,72px) 40px;outline:none}
.module{display:none;max-width:960px}
.module.current{display:block;animation:in .35s ease both}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.kicker{font:13px var(--mono);letter-spacing:.08em;color:var(--accent);margin-bottom:18px}
h1{font:600 clamp(2.3rem,4.6vw,3.9rem)/1.06 var(--sans);letter-spacing:-.035em;max-width:16ch}
h1 em{font-style:normal;color:var(--accent)}
.lede{font-size:clamp(18px,1.6vw,21px);color:var(--muted);max-width:60ch;margin:22px 0 44px}
.lede b{color:var(--text)}
h2{font:600 19px/1.3 var(--sans);margin-bottom:12px}
h3{font:600 18px/1.3 var(--sans)}
.note{font-size:14px;color:var(--muted);margin-top:16px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.note .ic{width:16px;height:16px;color:var(--accent)}

/* Callouts */
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.callout{background:var(--panel);border:1px solid var(--line);padding:24px 26px;margin-top:16px}
.split .callout{margin-top:0}
.callout ul,.callout ol{margin:0;padding-left:20px}
.callout li+li{margin-top:6px}
.callout.example{border-left:3px solid var(--accent)}
.callout.job{border-left:3px solid var(--green)}
.glossary{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px}
.glossary dt{font-weight:600}
.glossary dd{margin:0;color:var(--muted)}
kbd{font:13px var(--mono);border:1px solid var(--line2);padding:1px 6px;border-radius:3px}

/* Start map */
.map{margin:0;display:flex;align-items:center;gap:10px}
.map-step{flex:1;border:1px solid var(--line);background:var(--panel);padding:22px 18px;display:flex;flex-direction:column;gap:6px}
.map-step .ic{width:30px;height:30px;color:var(--accent);margin-bottom:6px}
.map-step b{font-size:18px}
.map-step span{font-size:14px;color:var(--muted)}
.map-arrow{color:var(--line2)}
.is-human.map-step,.chain-node.is-human,.fence-step.is-human{background:var(--text);color:var(--bg)}
.map-step.is-human span{color:rgba(255,255,255,.72)}
.map-step.is-human .ic{color:var(--bg)}

/* Trust chain */
.chain{margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;padding-bottom:58px}
.chain-node{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;font-weight:600;position:relative}
.chain-node .ic{width:88px;height:88px;padding:26px;border:1.5px solid var(--line2);border-radius:50%;color:var(--accent);background:var(--panel)}
.chain-node+.chain-node:before{content:"";position:absolute;top:44px;right:calc(50% + 50px);width:calc(100% - 100px);border-top:1.5px dashed var(--accent);opacity:.6}
.chain-node.is-fenced .ic{outline:1.5px dashed var(--accent);outline-offset:7px}
.chain-node.is-human{background:none;color:var(--text)}
.chain-node.is-human .ic{background:var(--text);color:var(--bg);border-color:var(--text)}
.chain-band{position:absolute;left:0;right:0;bottom:0;text-align:center;font:13px var(--mono);letter-spacing:.1em;color:var(--accent);border:1px solid var(--line);background:var(--accent-soft);padding:9px}

/* Layers */
.layers{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px}
.layer-list{display:flex;flex-direction:column;gap:8px}
.layer-btn{display:flex;align-items:center;gap:14px;text-align:left;padding:14px 16px;background:var(--panel);border:1px solid var(--line);font-weight:500;transition:border-color .2s,background .2s}
.layer-btn .n{font:13px var(--mono);color:var(--muted);width:16px}
.layer-btn .ic{color:var(--accent)}
.layer-btn:hover{border-color:var(--line2)}
.layer-btn.active{border-color:var(--accent);background:var(--panel2)}
.layer-btn.is-human{background:var(--text);color:var(--bg);border-color:var(--text)}
.layer-btn.is-human .ic,.layer-btn.is-human .n{color:var(--bg)}
.layer-btn.is-human.active{outline:2px solid var(--accent);outline-offset:2px}
.layer-detail{background:var(--panel);border:1px solid var(--line);padding:28px}
.meta{display:flex;justify-content:space-between;gap:12px;font:13px var(--mono);color:var(--muted);margin-bottom:28px;flex-wrap:wrap}
.meta span:first-child{color:var(--accent)}
.layer-detail h2{font-size:28px;letter-spacing:-.02em}
.layer-detail #layer-body{color:var(--muted)}
.label{font:12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:28px 0 8px}
.test{font-weight:600;font-size:18px}

/* Journey */
.persona-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.persona-tab,.pill{border:1px solid var(--line2);background:none;padding:10px 18px;border-radius:999px;font-size:15px;color:var(--muted)}
.persona-tab.active,.pill.active{background:var(--text);color:var(--bg);border-color:var(--text)}
.journey-head,.journey-row{display:grid;grid-template-columns:.8fr 1fr 1fr;gap:8px}
.journey-head{font:12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 0 10px}
.journey-head .today{color:var(--red)}.journey-head .future{color:var(--green)}
.journey-row{margin-bottom:8px}
.journey-row>*{padding:14px 16px;font-size:15px}
.journey-row b{background:var(--panel)}
.journey-row .today{background:var(--red-soft);color:#7a2420}
.journey-row .future{background:var(--green-soft);color:#1f4d1f}
.outcome{margin-top:16px;padding:18px 20px;border:1px solid var(--accent);color:var(--text)}

/* Protect */
.data-types{display:flex;gap:8px;flex-wrap:wrap}
.pill-detail{margin:16px 0 32px;color:var(--muted);min-height:1.65em}
.fence{margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;border:1.5px dashed var(--line2);padding:20px;position:relative}
.fence-step{background:var(--panel);border:1px solid var(--line);padding:20px 16px;display:flex;flex-direction:column;gap:6px;transition:border-color .3s}
.fence-step .ic{width:28px;height:28px;color:var(--accent);margin-bottom:6px}
.fence-step b{font-size:17px}
.fence-step span{font-size:14px;color:var(--muted)}
.fence-step.is-fenced{outline:1.5px dashed var(--accent);outline-offset:4px}
.fence-step.pulse{animation:pulse .6s ease}
@keyframes pulse{50%{border-color:var(--accent);transform:translateY(-3px)}}
.fence-band{grid-column:1/-1;display:flex;align-items:center;gap:10px;font-size:15px;color:var(--muted);padding-top:6px}
.fence-band .ic{color:var(--accent)}

/* AI cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.card{background:var(--panel);border:1px solid var(--line);padding:22px 20px;display:flex;flex-direction:column;gap:10px;transition:transform .3s,border-color .3s}
.card:hover{transform:translateY(-3px);border-color:var(--line2)}
.card p{font-size:15px;color:var(--muted)}
.card .gate{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);color:var(--text)}
.card.is-high{border-color:var(--red)}
.chip{align-self:flex-start;font:12px var(--mono);padding:4px 8px}
.chip.low{background:var(--green-soft);color:var(--green)}
.chip.mid{background:var(--accent-soft);color:var(--accent)}
.chip.high{background:var(--red-soft);color:var(--red)}
.meter{display:flex;gap:4px}
.meter i{flex:1;height:6px;background:var(--line)}
.meter[style*="--l:1"] i:nth-child(-n+1),.meter[style*="--l:2"] i:nth-child(-n+2){background:var(--green)}
.meter.is-off i{background:var(--red-soft)}

/* Cloud map */
.cloud-map{margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.cloud-col{border:1px solid var(--line);background:var(--panel);padding:14px 12px;display:flex;flex-direction:column;gap:8px}
.cloud-col.is-people{border-color:var(--line2)}
.cloud-name{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:2px}
.cloud-name .ic{width:18px;height:18px;color:var(--accent)}
.sys{border:1px solid var(--line);background:var(--bg);padding:10px 11px;transition:opacity .3s,border-color .3s,background .3s}
.sys b{display:block;font-size:14px;line-height:1.3}
.sys span{display:block;font-size:13px;color:var(--muted);line-height:1.35;margin-top:2px}
.sys.is-sor{border-color:var(--accent)}
.tracing .sys{opacity:.32}
.tracing .sys.lit{opacity:1;border-color:var(--accent);background:var(--accent-soft)}
.links{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 20px;padding:12px 4px 0;font-size:14px;color:var(--muted)}
.links span{display:flex;align-items:center;gap:8px;transition:color .3s}
.links .ic{width:18px;height:18px;color:var(--accent)}
.tracing .links span{opacity:.4}
.tracing .links span.lit{opacity:1;color:var(--text)}
.trace{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:20px;padding:22px 24px;border:1px solid var(--accent)}
.trace-count{font:13px var(--mono);color:var(--accent);margin-bottom:6px}
.trace h2{font-size:22px;margin-bottom:6px}
.trace p:last-child{color:var(--muted);max-width:60ch}
.trace-btns{display:flex;gap:8px;flex:none}

/* Vendors */
.raci{border:1px solid var(--line);margin-bottom:8px}
.raci-row{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;border-top:1px solid var(--line)}
.raci-row:first-child{border-top:0}
.raci-row span{padding:13px 16px;font-size:15px;color:var(--muted)}
.raci-row span:first-child{color:var(--text)}
.raci-row span.on{color:var(--accent);font-weight:600}
.raci-head span{font:12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)!important;background:var(--panel)}
.steps li{padding-left:4px}

/* Hub */
.hub{margin:0 auto;position:relative;width:min(440px,100%);aspect-ratio:1}
.hub-ring{position:absolute;inset:6%;border:1.5px dashed var(--line2);border-radius:50%}
.hub-core{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:var(--text);color:var(--bg);display:grid;place-items:center;text-align:center;font-weight:600;font-size:15px;line-height:1.25}
.spoke{position:absolute;left:50%;top:50%;width:27%;aspect-ratio:1;border-radius:50%;border:1.5px solid var(--line2);background:var(--panel);font-size:13px;font-weight:600;line-height:1.25;padding:8px;transform:translate(-50%,-50%) rotate(var(--a)) translateY(-150%) rotate(calc(-1 * var(--a)));transition:border-color .2s,background .2s}
.spoke:hover,.spoke.active{border-color:var(--accent);background:var(--panel2)}
.spoke.is-human{border-color:var(--accent)}
.hub-tip{text-align:center;color:var(--muted);margin:16px auto 0;max-width:52ch;min-height:3.3em}
.hub-tip b{color:var(--text)}

/* Scorecard */
.score-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.score-grid article{background:var(--panel);border:1px solid var(--line);padding:20px 18px;display:flex;flex-direction:column;gap:12px}
.score-grid h3{font-size:16px}
.score-grid p{display:flex;align-items:center;gap:8px;font-size:14px}
.score-grid .up .ic{color:var(--green);width:18px;height:18px}
.score-grid .guard{color:var(--muted)}
.score-grid .guard .ic{color:var(--accent);width:18px;height:18px}
.score-grid .is-human{border-color:var(--accent)}

/* Check */
.check{margin-top:48px;padding:26px;border:1px solid var(--line2);background:var(--panel)}
.check h2{font:13px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.check>p:not(.feedback){font-size:19px;font-weight:500;margin-bottom:18px}
.options{display:flex;flex-direction:column;gap:8px}
.options button{text-align:left;padding:14px 16px;background:var(--bg);border:1px solid var(--line2);transition:border-color .2s}
.options button:hover{border-color:var(--text)}
.options button.right{border-color:var(--green);background:var(--green-soft)}
.options button.wrong{border-color:var(--red);background:var(--red-soft)}
.feedback{margin-top:14px;font-weight:500;min-height:1.65em}
.feedback.is-right{color:var(--green)}.feedback.is-wrong{color:var(--red)}

/* Finish */
.rules{margin:32px 0 0;padding:0;list-style:none;counter-reset:r}
.rules li{counter-increment:r;display:grid;grid-template-columns:48px 1fr;padding:18px 0;border-top:1px solid var(--line);font-size:19px}
.rules li:before{content:counter(r);font:15px var(--mono);color:var(--accent);padding-top:3px}
.rules b{font-weight:600}
.result{margin-top:36px;padding:26px;border:1px solid var(--accent);display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.result p:first-child{font-size:22px}
.result b{color:var(--accent)}
.result p+p{color:var(--muted)}
.result .btn{margin-top:10px}

/* Buttons + pager */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;background:var(--accent);color:#fff;border:1px solid var(--accent);font-weight:600;font-size:16px}
.btn:hover{background:var(--accent-ink)}
.btn.ghost{background:none;color:var(--text);border-color:var(--line2)}
.btn.ghost:hover{border-color:var(--text)}
.btn:disabled{opacity:.35;cursor:default}
.btn .ic{width:18px;height:18px}
.pager{max-width:960px;display:flex;justify-content:space-between;margin-top:56px;padding-top:24px;border-top:1px solid var(--line)}
[hidden]{display:none!important}

/* Tablet */
@media(max-width:1100px){
  .cloud-map{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cards{grid-template-columns:repeat(2,1fr)}
  .score-grid{grid-template-columns:repeat(3,1fr)}
}
/* Phone */
@media(max-width:820px){
  :root{--top:58px}
  body{font-size:16px}
  .topbar{padding:0 16px;gap:12px}
  .menu-btn{display:block}
  .brand{width:auto;font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .brand-mark{flex:none}
  .progress{display:none}
  .progress-label{margin-left:auto;font-size:12px}
  .shell{grid-template-columns:1fr}
  .toc{position:fixed;top:var(--top);left:0;bottom:0;height:auto;width:min(320px,85vw);background:var(--bg);z-index:25;transform:translateX(-100%);transition:transform .25s ease}
  .toc.open{transform:none}
  main{padding:36px 16px 32px}
  .lede{margin-bottom:32px}
  .split,.layers{grid-template-columns:1fr}
  .map{flex-direction:column;align-items:stretch}
  .map-arrow{transform:rotate(90deg);align-self:center}
  .chain{grid-template-columns:1fr;gap:14px;padding-bottom:0}
  .chain-node{flex-direction:row;text-align:left}
  .chain-node .ic{width:60px;height:60px;padding:17px}
  .chain-node+.chain-node:before{display:none}
  .chain-band{position:static;margin-top:6px}
  .fence{grid-template-columns:1fr 1fr;padding:12px;gap:10px}
  .cards,.score-grid{grid-template-columns:1fr}
  .cloud-map{grid-template-columns:1fr 1fr}
  .journey-head,.journey-row{grid-template-columns:.8fr 1fr 1fr;gap:4px}
  .journey-row>*{padding:10px;font-size:13px}
  .raci-row{grid-template-columns:1.3fr 1fr 1fr 1fr}
  .raci-row span{padding:10px 8px;font-size:13px}
  .trace{flex-direction:column;align-items:stretch;position:sticky;bottom:8px;background:var(--bg);z-index:5;padding:16px}
  .trace p:last-child{font-size:14px}
  .spoke{font-size:11px;padding:4px}
  .check{padding:20px 16px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ===== Navigation v2: home + chapters + steps ===== */
.shell{display:block}
main{padding:40px clamp(20px,5vw,72px) 120px;max-width:1120px;margin:0 auto}
.module,.module.current{max-width:none}
.topbar{gap:24px}
.brand{width:auto}
.chapters{flex:1;display:flex;gap:4px;height:100%;min-width:0}
.chapter{flex:1;min-width:0;background:none;border:0;padding:0 14px;display:flex;flex-direction:column;justify-content:center;gap:7px;text-align:left;color:var(--muted);font-size:14px}
.chapter span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chapter i{display:block;height:3px;background:var(--line)}
.chapter i b{display:block;height:100%;background:var(--green);transition:width .4s}
.chapter:hover{color:var(--text)}
.chapter.active{color:var(--text);background:var(--panel);font-weight:600}
.chapter.active i b{background:var(--accent)}
.home-link{font-size:14px;color:var(--text);text-decoration:none;border:1px solid var(--line2);padding:9px 14px;white-space:nowrap}
.home-link:hover{border-color:var(--text)}

/* Home */
.home{display:none;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:48px;align-items:start}
.at-home .home{display:grid}
.at-home .mod-bar,.at-home .pager{display:none}
.home h1{max-width:none}
.home .lede{margin:14px 0 32px}
.home-ch{margin-bottom:26px}
.home-ch-name{font:12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tile{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;text-decoration:none;border:1px solid var(--line);color:var(--muted);transition:border-color .2s,color .2s}
.tile:hover{border-color:var(--text);color:var(--text)}
.tile.done{background:var(--panel);border-color:rgba(139,193,160,.5);color:var(--text)}
.tile.done .ic{color:var(--green);width:20px;height:20px}
.tile.now{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.now-tag{font:12px var(--mono)}
.continue{position:sticky;top:calc(var(--top) + 24px);background:var(--panel);border:1px solid var(--line);padding:30px;display:flex;flex-direction:column;gap:16px}
.continue .kicker{margin:0}
.continue h2{font-size:28px;line-height:1.15;letter-spacing:-.02em;margin:0}
.continue p{color:var(--muted)}
.bar{height:6px;background:var(--line)}
.bar span{display:block;height:100%;background:var(--accent);width:0}
.continue .btn{justify-content:space-between;font-size:17px;padding:16px 20px;text-decoration:none}
.score-line{font-size:14px}
.score-line b{color:var(--accent)}

/* Module bar + steps */
.mod-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:32px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.mod-name{font-weight:600;font-size:17px;display:flex;flex-direction:column;gap:2px}
.mod-name span{font:12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:400}
.step-tabs{display:flex;gap:6px;flex-wrap:wrap}
.step-tab{text-decoration:none;font-size:15px;padding:9px 16px;border-radius:999px;border:1px solid var(--line2);color:var(--muted)}
.step-tab.past{color:var(--green);border-color:rgba(139,193,160,.5)}
.step-tab.active{background:var(--text);color:var(--bg);border-color:var(--text);font-weight:600}
.step{display:none}
.step.current{display:block;animation:in .3s ease both}
.step>.check:first-child{margin-top:0}
.step>.split:first-child{margin-top:0}
.module .kicker{display:none}

/* Pinned pager */
.pager{position:fixed;left:0;right:0;bottom:0;z-index:20;max-width:none;margin:0;padding:14px clamp(16px,5vw,48px);background:var(--bg);border-top:1px solid var(--line2);align-items:center;gap:16px}
.pager-pos{font:13px var(--mono);color:var(--muted);text-align:center}
.pager #next{font-size:17px;padding:15px 24px;max-width:60vw}
.pager #next-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media(max-width:1100px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){
  .topbar{flex-wrap:wrap;height:auto;padding:10px 16px;gap:10px}
  .brand{flex:1}
  .chapters{order:3;flex:1 0 100%;height:48px;overflow-x:auto}
  .chapter{flex:0 0 auto;max-width:180px;font-size:13px;padding:0 10px}
  .home-link{font-size:13px;padding:7px 10px}
  main{padding:24px 16px 120px}
  .home{grid-template-columns:1fr;gap:28px}
  .continue{position:static;order:-1}
  .tiles{grid-template-columns:1fr 1fr}
  .pager-pos{display:none}
  .pager #next{max-width:none;flex:1;justify-content:space-between;margin-left:12px}
  .trace{bottom:96px}
}
.pager #next{min-width:0}
#clouds .trace{margin:0 0 16px}
@media(max-width:820px){.pager #next{font-size:15px;padding:14px 16px}#clouds .trace{position:static}}

/* ===== Light product UI ===== */
body{background:var(--bg);color:var(--text)}
.topbar{background:rgba(249,249,247,.92);backdrop-filter:saturate(1.4) blur(10px)}
h1{font-size:clamp(2rem,3.4vw,3rem);letter-spacing:-.03em;line-height:1.08;max-width:20ch}
h1 em{color:var(--accent)}
.lede{color:var(--muted)}
.callout,.layer-detail,.check,.card,.cloud-col,.continue,.map-step,.fence-step,.raci,.result,.trace,.viz,.layer-btn,.tile,.options button,.journey-row>*,.sys,.outcome{border-radius:var(--r)}
.callout,.layer-detail,.check,.card,.cloud-col,.continue,.map-step,.fence-step,.raci,.viz,.tile.done{background:var(--panel);box-shadow:var(--shadow)}
.raci{overflow:hidden}
.btn{border-radius:10px;transition:transform .15s cubic-bezier(.16,1,.3,1),background .2s}
.btn:active{transform:scale(.98)}
.btn.ghost{background:var(--panel)}
.home-link{border-radius:10px;background:var(--panel)}
.chapter{border-radius:10px}
.chapter.active{background:var(--panel);box-shadow:var(--shadow)}
.chapter.active i b{background:var(--accent)}
.tile.now{color:#fff}
.tile.now .now-tag{background:rgba(255,255,255,.18);padding:2px 8px;border-radius:999px}
.persona-tab.active,.pill.active,.step-tab.active{background:var(--text);color:#fff;border-color:var(--text)}
.step-tab.past{color:var(--green);border-color:rgba(0,99,0,.3)}
.layer-btn.active{background:var(--accent-soft);border-color:var(--accent)}
.layer-btn.is-human,.chain-node.is-human .ic,.map-step.is-human,.hub-core,.layer-btn.is-human .ic{background:var(--text);color:#fff}
.chain-node .ic{display:grid;place-items:center;width:88px;height:88px;padding:0;font-size:36px;background:var(--panel);box-shadow:var(--shadow);border-color:var(--line2)}
.chain-node+.chain-node:before{border-top:0;height:2px;background:linear-gradient(90deg,var(--accent) 50%,transparent 0) 0 0/12px 2px repeat-x;animation:dash 1.2s linear infinite;opacity:.8}
@keyframes dash{to{background-position:12px 0}}
.map-step .ic,.fence-step .ic{font-size:30px}
.layer-btn .ic{font-size:22px}
.cloud-name .ic,.links .ic{font-size:18px}
.chip.low{background:var(--green-soft);color:var(--green)}
.chip.mid{background:var(--warn-soft);color:var(--warn)}
.chip.high{background:var(--red-soft);color:var(--red)}
.meter i{border-radius:3px}
.meter[style*="--l:1"] i:nth-child(-n+1),.meter[style*="--l:2"] i:nth-child(-n+2){background:var(--accent)}
.card.is-high{border-color:rgba(180,47,47,.35)}
.spoke{background:var(--panel);box-shadow:var(--shadow)}
.spoke:hover,.spoke.active{background:var(--accent-soft);border-color:var(--accent)}
.spoke.is-human{border-color:var(--text)}
.tracing .sys.lit{background:var(--accent-soft);border-color:var(--accent)}
.sys{background:var(--bg)}
.sys.is-sor{border-color:var(--text)}
.journey-row b{background:var(--panel);box-shadow:var(--shadow)}
.pager{background:rgba(249,249,247,.94);backdrop-filter:blur(10px)}
.raci-head span{background:var(--panel2)}
.check{border-color:var(--line)}

/* Charts */
.viz{margin:24px 0 0;padding:24px;border:1px solid var(--line)}
.viz-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:20px}
.viz-head h3{font-size:18px;margin-bottom:4px}
.viz-head p{font-size:15px;color:var(--muted);max-width:60ch}
.tag{font:12px var(--mono);color:var(--muted);background:var(--panel2);padding:4px 8px;border-radius:6px;white-space:nowrap}
.viz-table{margin-top:16px;font-size:14px}
.viz-table summary{cursor:pointer;color:var(--accent-ink);font-weight:500;width:max-content}
.viz-table>div{overflow-x:auto;margin-top:10px}
.viz-table table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
.viz-table th,.viz-table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.viz-table th{font-weight:600;color:var(--muted)}
.viz-tip{position:fixed;left:0;top:0;z-index:50;pointer-events:none;background:var(--text);color:#fff;padding:10px 12px;border-radius:10px;font-size:13px;line-height:1.45;max-width:280px;opacity:0;transition:opacity .12s;display:flex;flex-direction:column;gap:2px;box-shadow:0 8px 24px -8px rgba(0,0,0,.3)}
.viz-tip.on{opacity:1}
.viz-tip span{color:rgba(255,255,255,.78)}

.funnel{display:flex;flex-direction:column;gap:10px}
.f-row{display:grid;grid-template-columns:200px 1fr 72px 64px;gap:14px;align-items:center;padding:4px 6px;margin:0 -6px;border-radius:8px;outline-offset:2px}
.f-row:hover{background:var(--panel2)}
.f-label{font-size:15px}
.f-track{height:28px;display:block}
.f-bar{display:block;height:100%;width:var(--w);background:var(--c);border-radius:0 4px 4px 0;transform-origin:left;animation:grow .8s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--d)}
@keyframes grow{from{transform:scaleX(0)}}
.f-val{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.f-drop{font:13px var(--mono);color:var(--red)}

.scatter{width:100%;height:auto;display:block;overflow:visible}
.scatter .zone{fill:var(--panel2)}
.scatter .zone-label{font:600 13px var(--sans);fill:var(--text)}
.scatter .grid{stroke:var(--grid);stroke-width:1}
.scatter .base{stroke:var(--axis);stroke-width:1}
.scatter .tick{font:12px var(--mono);fill:var(--faint)}
.scatter .axis-title{font:13px var(--sans);fill:var(--muted)}
.scatter .axis-arrow{stroke:var(--axis);stroke-width:1;stroke-dasharray:3 4}
.scatter .hit{fill:transparent}
.scatter .dot{fill:var(--accent);stroke:#fff;stroke-width:2;transition:r .2s}
.scatter .human .dot{fill:#fff;stroke:var(--text);stroke-width:2}
.scatter .pt{outline:none;cursor:default;animation:pop .5s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--d)}
@keyframes pop{from{opacity:0;transform:translateY(6px)}}
.scatter .pt:hover .dot,.scatter .pt:focus .dot{r:8}
.scatter .pt-label{font:13px var(--sans);fill:var(--text)}
.scatter .leader{fill:none;stroke:var(--axis);stroke-width:1}

.sc{display:flex;flex-direction:column}
.sc-head,.sc-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.4fr) minmax(0,.9fr) minmax(0,1.1fr);gap:20px;align-items:center}
.sc-head{font:12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding-bottom:10px;border-bottom:1px solid var(--line)}
.sc-row{padding:14px 0;border-bottom:1px solid var(--line)}
.sc-row:last-child{border-bottom:0}
.sc-name{display:flex;flex-direction:column}
.sc-name b{font-weight:600}
.sc-name span,.sc-now span{font-size:13px;color:var(--muted)}
.spark{width:100%;height:56px;display:block;overflow:visible}
.spark-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.spark-end{fill:var(--accent);stroke:#fff;stroke-width:2}
.spark .cross{stroke:var(--axis);stroke-width:1;opacity:0}
.spark .spark-hover{fill:#fff;stroke:var(--accent);stroke-width:2;opacity:0}
.spark.hovering .cross,.spark.hovering .spark-hover{opacity:1}
.spark .hit{fill:transparent}
.sc-now{display:flex;flex-direction:column}
.sc-now b{font-size:20px;font-variant-numeric:tabular-nums}
.sc-now span{display:flex;align-items:center;gap:4px}
.sc-now .up{color:var(--green)}
.sc-guard{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted)}
.sc-guard .ph{font-size:20px;margin-top:1px}
.sc-guard b{display:block;color:var(--text);font-size:14px}
.sc-guard.good .ph{color:var(--green)}
.sc-guard.warn .ph{color:var(--warn)}

.cloud-map{position:relative}
.flow-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
.flow-base{fill:none;stroke:var(--accent);stroke-opacity:.18;stroke-width:6;stroke-linecap:round}
.flow-dash{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:6 8;stroke-linecap:round;animation:flow 1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-14}}
.flow-end{fill:var(--accent);stroke:#fff;stroke-width:2}

@media(max-width:820px){
  .viz{padding:16px}
  .viz-head{flex-direction:column;gap:8px}
  .f-row{grid-template-columns:1fr 64px;row-gap:4px}
  .f-track{grid-column:1/-1;grid-row:2;height:20px}
  .f-drop{display:none}
  #viz-risk .viz-body{overflow-x:auto;margin:0 -16px;padding:0 16px}
  .scatter{min-width:640px}
  .sc-head{display:none}
  .sc-row{grid-template-columns:1fr 1fr;gap:10px 16px}
  .sc-chart{grid-column:1/-1;grid-row:2}
  .sc-guard{grid-column:1/-1}
}
main:focus,main:focus-visible{outline:none}

/* ===== Interactive learning ===== */
.module .lede{margin-bottom:28px}
.scn{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:24px;margin-bottom:24px}
.scn-label{display:flex;align-items:center;gap:8px;font:13px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:10px}
.scn-label .ph{font-size:18px}
.scn-q{font-size:20px;font-weight:600;line-height:1.4;margin-bottom:18px;max-width:52ch}
.scn-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.scn-opts button{text-align:left;padding:16px;border:1px solid var(--line2);border-radius:12px;background:var(--bg);font-size:15px;line-height:1.4;transition:transform .15s cubic-bezier(.16,1,.3,1),border-color .2s,background .2s}
.scn-opts button:hover{border-color:var(--text);transform:translateY(-2px)}
.scn-opts button:active{transform:scale(.98)}
.scn-opts button.right{border-color:var(--green);background:var(--green-soft)}
.scn-opts button.wrong{border-color:var(--red);background:var(--red-soft)}
.scn.answered .scn-opts button:not(.right):not(.wrong){opacity:.5}
.scn-why{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:16px;border-radius:12px;background:var(--accent-soft);animation:in .3s ease both}
.scn-why .ph{font-size:22px;color:var(--accent-ink);margin-top:2px}
.scn-why p{font-size:16px}

.more-list{display:flex;flex-direction:column;gap:10px;margin-top:0}
details.more{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
details.more summary{list-style:none;display:flex;align-items:center;gap:12px;padding:16px 20px;cursor:pointer;font-weight:600}
details.more summary::-webkit-details-marker{display:none}
details.more summary .ph{font-size:22px;color:var(--accent)}
details.more.job summary .ph:first-child{color:var(--green)}
details.more summary .caret{margin-left:auto;color:var(--faint);transition:transform .25s cubic-bezier(.16,1,.3,1)}
details.more[open] summary .caret{transform:rotate(180deg)}
details.more summary:hover{background:var(--panel2)}
.more-body{padding:0 20px 18px 54px;color:var(--muted)}
.more-body ul,.more-body ol{margin:0;padding-left:18px}
.more-body li+li{margin-top:6px}
.more-body b{color:var(--text)}

.words h2{margin-bottom:12px}
.flips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.flip{position:relative;min-height:132px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);box-shadow:var(--shadow);padding:18px;text-align:left;perspective:600px;transition:transform .15s}
.flip:active{transform:scale(.98)}
.flip-front,.flip-back{display:flex;flex-direction:column;gap:6px;transition:opacity .25s,transform .35s cubic-bezier(.16,1,.3,1)}
.flip-front b{font-size:17px}
.flip-front small{font-size:13px;color:var(--faint)}
.flip-back{position:absolute;inset:18px;opacity:0;transform:translateY(8px);font-size:15px;color:var(--text)}
.flip.on{background:var(--accent-soft);border-color:var(--accent)}
.flip.on .flip-front{opacity:0;transform:translateY(-8px)}
.flip.on .flip-back{opacity:1;transform:none}

.sorter{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:24px}
.sorter-head h2{font-size:22px;margin-bottom:4px}
.sorter-head p{color:var(--muted);margin-bottom:18px}
.pool{display:flex;flex-wrap:wrap;gap:8px;min-height:52px;padding:12px;border:1.5px dashed var(--line2);border-radius:12px;margin-bottom:16px}
.sorter.complete .pool{display:none}
.chip-drag{display:inline-flex;align-items:center;gap:8px;padding:11px 14px;border:1px solid var(--line2);border-radius:10px;background:var(--panel);font-size:15px;font-weight:500;cursor:grab;touch-action:none;user-select:none;box-shadow:0 1px 2px rgba(23,23,22,.06);transition:transform .15s,border-color .2s,background .2s}
.chip-drag .ph{color:var(--faint);font-size:18px}
.chip-drag:hover{border-color:var(--text)}
.chip-drag.picked{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-2px)}
.chip-drag.dragging{opacity:.35}
.chip-drag.placed{cursor:default;border-color:rgba(0,99,0,.3);background:var(--green-soft);color:var(--green)}
.chip-drag.placed .ph{display:none}
.chip-drag.ghost{position:fixed;left:0;top:0;z-index:60;pointer-events:none;box-shadow:0 12px 28px -8px rgba(23,23,22,.3);cursor:grabbing}
.chip-drag.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.buckets{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.bucket{border:1.5px solid var(--line);border-radius:12px;padding:14px;min-height:150px;background:var(--bg);transition:border-color .2s,background .2s,transform .2s}
.picking .bucket{border-style:dashed;border-color:var(--accent);cursor:pointer}
.bucket.over{border-color:var(--accent);background:var(--accent-soft);transform:scale(1.01)}
.bucket.yes{border-color:var(--green);background:var(--green-soft)}
.bucket.nope{border-color:var(--red);background:var(--red-soft)}
.bucket-name{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:10px}
.bucket-name .ph{font-size:20px;color:var(--accent)}
.bucket-drop{display:flex;flex-wrap:wrap;gap:6px}
.sorter-msg{margin-top:14px;min-height:1.6em;font-weight:500}
.sorter.complete .sorter-msg{color:var(--green)}
.sorter-reset{margin-top:6px;display:none}
.sorter.complete .sorter-reset{display:inline-flex}

@media(max-width:820px){
  .scn{padding:18px}
  .scn-q{font-size:18px}
  .scn-opts{grid-template-columns:1fr}
  .flips{grid-template-columns:1fr 1fr}
  .more-body{padding-left:20px}
  .sorter{padding:16px}
}
.chip-drag.placed{pointer-events:none}

/* ===== Scroll story (Apple-style) ===== */
.story{display:none}
.at-home .story{display:block}
.story em{font-style:normal;color:var(--accent)}
.s-hero{position:relative;min-height:calc(100svh - var(--top));display:grid;align-items:center;overflow:hidden;padding:0 clamp(20px,6vw,96px)}
.s-dots{position:absolute;inset:-4% -4% auto auto;width:min(760px,62vw);height:110%;display:grid;grid-template-columns:repeat(16,1fr);gap:18px;align-content:center;padding:40px;pointer-events:none;mask-image:radial-gradient(closest-side,#000 55%,transparent);-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent)}
.s-dots i{width:8px;height:8px;border-radius:50%;background:var(--axis);animation:breathe 4s ease-in-out infinite;animation-delay:calc(var(--i) * -37ms)}
.s-dots i:nth-child(7n){background:var(--accent)}
.s-dots i:nth-child(23n){background:var(--text)}
@keyframes breathe{50%{transform:scale(.55);opacity:.55}}
.s-hero-inner{position:relative;max-width:1180px;width:100%;margin:0 auto}
.s-eyebrow{font:13px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:22px}
.s-title{font:600 clamp(3rem,8.2vw,7.5rem)/.98 var(--sans);letter-spacing:-.045em;max-width:none;margin:0}
.s-title .ln{display:block;overflow:hidden;padding-bottom:.06em}
.s-title .ln>span{display:inline-block}
.s-sub{font-size:clamp(18px,1.7vw,22px);color:var(--muted);max-width:46ch;margin:28px 0 36px;line-height:1.55}
.s-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.s-actions .btn{font-size:17px;padding:16px 24px;text-decoration:none}
.s-scroll{display:inline-flex;align-items:center;gap:8px;color:var(--muted);text-decoration:none;font-weight:500}
.s-scroll .ph{animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(5px)}}

.s-scene{position:relative}
.s-pin{min-height:calc(100svh - var(--top));display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);align-items:center;padding:40px clamp(20px,6vw,96px);max-width:1440px;margin:0 auto;box-sizing:border-box}
.s-kicker{font:13px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:16px}
.s-h2{font:600 clamp(2.2rem,4.4vw,4rem)/1.02 var(--sans);letter-spacing:-.04em;margin:0 0 20px}
.s-body{font-size:19px;color:var(--muted);max-width:40ch;line-height:1.55}
.s-captions{position:relative;min-height:3.4em;font-size:21px;line-height:1.45}
.s-captions p{position:absolute;inset:0;opacity:0;transform:translateY(12px);transition:opacity .45s,transform .45s cubic-bezier(.16,1,.3,1)}
.s-captions p.on{opacity:1;transform:none}

.s-track{position:relative;padding:150px 0 40px}
.s-line{position:absolute;left:8%;right:8%;top:178px;width:84%;height:40px;overflow:visible}
.s-line-bg{stroke:var(--grid);stroke-width:3;fill:none;vector-effect:non-scaling-stroke}
.s-line-fg{stroke:var(--accent);stroke-width:3;fill:none;stroke-dasharray:1000;stroke-dashoffset:1000;vector-effect:non-scaling-stroke}
.s-stations{position:relative;display:grid;grid-template-columns:repeat(5,1fr)}
.s-st{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.s-st span{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;font-size:30px;background:var(--panel);border:1.5px solid var(--line2);color:var(--faint);box-shadow:var(--shadow);transition:background .45s cubic-bezier(.16,1,.3,1),border-color .45s cubic-bezier(.16,1,.3,1),color .45s cubic-bezier(.16,1,.3,1),box-shadow .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1)}
.s-st b{font-size:15px;color:var(--faint);transition:color .3s}
.s-st.on span{color:var(--accent);border-color:var(--accent);transform:scale(1.06)}
.s-st.on b{color:var(--text)}
.s-st.is-human.on span{background:var(--text);color:#fff;border-color:var(--text)}
.s-card{position:absolute;top:8px;left:calc(8% + var(--p,0) * 84%);transform:translateX(-50%);width:230px;padding:14px 16px;border-radius:14px;background:var(--panel);border:1px solid var(--line);box-shadow:0 20px 40px -18px rgba(23,23,22,.28);display:flex;flex-direction:column;gap:2px;will-change:left}
.s-card small{font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
.s-card b{font-size:15px}
.s-card span{font-size:13px;color:var(--muted)}
.s-card:after{content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:12px;background:var(--panel);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:translateX(-50%) rotate(45deg)}
.at-human .s-card{border-color:var(--text)}

.s-big{font:600 clamp(4.5rem,11vw,10rem)/.9 var(--sans);letter-spacing:-.05em;font-variant-numeric:tabular-nums;margin:0}
.s-big-label{font-size:20px;color:var(--muted);margin:14px 0 30px;min-height:1.5em}
.s-bars{display:flex;flex-direction:column;gap:10px}
.s-bar{display:grid;grid-template-columns:90px 1fr;gap:14px;align-items:center;font-size:14px;color:var(--faint);transition:color .3s}
.s-bar.on{color:var(--text)}
.s-bar i{display:block;height:14px;border-radius:0 4px 4px 0;background:var(--grid);position:relative;overflow:hidden}
.s-bar i:after{content:"";position:absolute;inset:0;width:var(--w);background:var(--accent);transform-origin:left;transform:scaleX(var(--f,0));border-radius:0 4px 4px 0}
.s-bar:last-child i:after{background:var(--accent-ink)}
.s-note{font:12px var(--mono);color:var(--faint);margin-top:16px}

.s-cloudmap{position:relative;height:420px}
.s-cl-lines{position:absolute;inset:0;width:100%;height:100%}
.s-cl-lines path{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.s-cl{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%) translateY(calc((1 - var(--a,0)) * 24px)) scale(calc(.9 + var(--a,0) * .1));opacity:var(--a,0);width:190px;padding:18px;border-radius:18px;background:var(--panel);border:1px solid var(--line);box-shadow:0 24px 48px -24px rgba(23,23,22,.25);display:flex;flex-direction:column;gap:4px}
.s-cl .ph{font-size:28px;color:var(--accent);margin-bottom:6px}
.s-cl b{font-size:16px}
.s-cl span{font-size:14px;color:var(--muted)}

.s-rule{padding:clamp(100px,18vh,200px) clamp(20px,6vw,96px);max-width:1280px;margin:0 auto}
.s-statement{font:600 clamp(2rem,4.8vw,4.4rem)/1.12 var(--sans);letter-spacing:-.035em}
.s-statement .w{transition:opacity .15s linear}
.s-cta{padding:40px clamp(20px,6vw,96px) clamp(80px,12vh,140px);max-width:1280px;margin:0 auto}
.s-cta .btn{text-decoration:none;font-size:17px;padding:16px 24px;margin-top:10px}
.at-home .home{padding-top:40px;border-top:1px solid var(--line)}

/* Static fallback (reduced motion / no JS lib) */
.story.static .s-card{display:none}
.story.static .s-captions{min-height:0}
.story.static .s-captions p{position:static;opacity:1;transform:none;margin-bottom:6px;font-size:18px}

/* Module polish: staggered reveal for each step */
.step.current>*{animation:rise .6s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}

@media(max-width:820px){
  .s-hero{min-height:calc(100svh - 110px);padding:40px 20px}
  .s-dots{width:100%;inset:auto 0 0 0;height:55%;opacity:.5}
  .s-pin{grid-template-columns:1fr;min-height:calc(100svh - 110px);padding:28px 20px;align-content:center;gap:24px}
  .s-h2{font-size:2.2rem}
  .s-captions{font-size:18px}
  .s-track{padding-top:120px}
  .s-line{top:140px}
  .s-st span{width:52px;height:52px;font-size:22px}
  .s-st b{font-size:12px}
  .s-card{width:170px;padding:10px 12px;left:calc(10% + var(--p,0) * 80%)}
  .s-card b{font-size:13px}
  .s-cloudmap{height:320px}
  .s-cl{width:130px;padding:12px}
  .s-cl b{font-size:13px}.s-cl span{font-size:12px}
  .s-cl .ph{font-size:22px}
  .s-big-label{font-size:17px}
}
.story{overflow-x:clip}
.s-hero-inner{z-index:1}
.s-dots{width:min(600px,46vw);inset:0 -2% 0 auto;height:100%;opacity:.75}
@media(max-width:820px){
  .s-dots{width:100%;inset:auto 0 0 0;height:45%;opacity:.35}
  .s-cl{width:128px}
  .s-cl:nth-of-type(1){left:18%}
  .s-cl:nth-of-type(4){left:82%}
}
@media(max-width:820px){
  .s-cloudmap{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .s-cl-lines{display:none}
  .s-cl,.s-cl:nth-of-type(1),.s-cl:nth-of-type(4){position:relative;left:auto;top:auto;width:auto;transform:translateY(calc((1 - var(--a,0)) * 24px)) scale(calc(.94 + var(--a,0) * .06))}
}

/* ===== Senior polish layer ===== */
:root{--r-lg:16px;--r-md:12px;--r-sm:8px;--r:var(--r-lg);
  --shadow:0 0 0 1px rgba(23,23,22,.05),0 1px 2px rgba(23,23,22,.04),0 12px 32px -16px rgba(23,23,22,.14);
  --shadow-hover:0 0 0 1px rgba(23,23,22,.07),0 2px 4px rgba(23,23,22,.05),0 20px 40px -18px rgba(23,23,22,.22);
  --ease:cubic-bezier(.16,1,.3,1)}
body{font-feature-settings:"ss01","cv11";text-rendering:optimizeLegibility}
::selection{background:var(--accent-soft);color:var(--accent-ink)}
h1,h2,h3,.s-title,.s-h2,.s-statement,.scn-q{text-wrap:balance}
p,li,dd{text-wrap:pretty}
.lede{max-width:58ch}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* Quieter, editorial labels (sans, not mono caps) */
.s-eyebrow,.s-kicker,.scn-label,.label,.home-ch-name,.mod-name span,.check h2,.journey-head,.raci-head span,.sc-head,.continue .kicker,.trace-count,.meta span:first-child{font-family:var(--sans);text-transform:none;letter-spacing:-.005em;font-weight:600;font-size:14px}
.s-eyebrow,.s-kicker{font-size:15px}
.home-ch-name,.journey-head,.sc-head,.raci-head span{color:var(--faint)}

/* Top bar: brand / segmented chapters / action */
.topbar{display:grid;grid-template-columns:1fr auto 1fr;height:var(--top);gap:16px;border-bottom-color:transparent;box-shadow:0 1px 0 var(--line)}
.brand{justify-self:start;font-size:15px;letter-spacing:-.01em}
.brand-mark{border-radius:3px}
.chapters{flex:none;height:auto;display:flex;gap:2px;padding:4px;background:var(--panel2);border-radius:var(--r-md)}
.chapter{flex:none;padding:7px 14px 9px;border-radius:9px;font-size:14px;gap:6px;color:var(--muted);transition:background .2s,color .2s,box-shadow .2s}
.chapter i{height:2px;border-radius:2px;background:rgba(11,11,11,.08)}
.chapter.active{background:var(--panel);color:var(--text);box-shadow:0 1px 2px rgba(23,23,22,.08),0 0 0 1px rgba(23,23,22,.04)}
.home-link{justify-self:end;border-radius:var(--r-md);font-weight:500;transition:background .2s,border-color .2s}
.home-link:hover{background:var(--panel2);border-color:var(--line2)}

/* Buttons */
.btn{border-radius:var(--r-md);height:48px;padding:0 22px;font-weight:600;letter-spacing:-.01em;transition:transform .2s var(--ease),background .2s,box-shadow .2s;box-shadow:0 1px 2px rgba(28,92,171,.25),inset 0 1px 0 rgba(255,255,255,.15)}
.btn:hover{transform:translateY(-1px);background:var(--accent-ink)}
.btn:active{transform:translateY(0) scale(.98)}
.btn .ic,.btn .ph{transition:transform .25s var(--ease)}
.btn:hover .ph-arrow-right{transform:translateX(3px)}
.btn.ghost{box-shadow:none;border-color:var(--line2)}
.btn.ghost:hover{background:var(--panel2)}
.s-actions .btn,.s-cta .btn,.continue .btn{height:52px}

/* Hero: keep the dot field clear of the headline */
.s-title{font-size:clamp(3rem,7.4vw,6.6rem);letter-spacing:-.05em}
.s-dots{width:min(520px,36vw);inset:12% -2% 12% auto;height:auto;opacity:.55}

/* Module header: breadcrumb + segmented steps */
.mod-bar{padding-bottom:20px;margin-bottom:36px}
.mod-name{font-size:18px;letter-spacing:-.015em}
.mod-name span{color:var(--accent-ink)}
.step-tabs{gap:2px;padding:4px;background:var(--panel2);border-radius:var(--r-md)}
.step-tab{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:9px;padding:8px 14px;font-size:14px;font-weight:500;color:var(--muted);transition:background .2s,color .2s}
.step-tab .st-n{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font:600 12px var(--sans);background:rgba(11,11,11,.07);color:var(--muted)}
.step-tab .ph{font-size:16px;color:var(--green)}
.step-tab:hover{color:var(--text)}
.step-tab.past{color:var(--text);border:0}
.step-tab.active{background:var(--panel);color:var(--text);font-weight:600;box-shadow:0 1px 2px rgba(23,23,22,.08),0 0 0 1px rgba(23,23,22,.04)}
.step-tab.active .st-n{background:var(--accent);color:#fff}

/* Pager: step dots instead of dev text */
.pager{padding-top:12px;padding-bottom:12px;box-shadow:0 -1px 0 var(--line);border-top:0}
.pager-pos{display:flex;flex-direction:column;align-items:center;gap:6px;font:500 13px var(--sans);color:var(--faint)}
.pg-dots{display:flex;gap:6px}
.pg-dots i{width:8px;height:8px;border-radius:4px;background:var(--line2);transition:width .3s var(--ease),background .3s}
.pg-dots i.past{background:var(--green)}
.pg-dots i.now{width:24px;background:var(--accent)}

/* Path: richer tiles */
.at-home .home{border-top:0;padding-top:clamp(56px,8vh,96px)}
.home h1{font-size:clamp(2.4rem,4vw,3.4rem)}
.tiles{gap:12px}
.tile{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;align-items:center;min-height:84px;padding:16px 18px;border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--shadow);border:0;color:var(--text);transition:transform .3s var(--ease),box-shadow .3s}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);color:var(--text)}
.t-num{grid-row:1/3;font:600 13px var(--sans);color:var(--faint);font-variant-numeric:tabular-nums;width:22px}
.t-title{font-weight:600;letter-spacing:-.01em;line-height:1.3}
.t-meta{grid-column:2;font-size:13px;color:var(--faint)}
.t-mark{grid-row:1/3;grid-column:3;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--panel2);color:var(--faint);transition:background .2s,color .2s,transform .3s var(--ease)}
.t-mark .ph{font-size:16px}
.tile:hover .t-mark{background:var(--accent);color:#fff;transform:translateX(2px)}
.tile.done{background:var(--panel);box-shadow:var(--shadow)}
.tile.done .t-mark{background:var(--green-soft);color:var(--green)}
.tile.done .t-mark .ic{font-size:18px;color:var(--green)}
.tile.now{background:var(--text);color:#fff}
.tile.now .t-num,.tile.now .t-meta{color:rgba(255,255,255,.6)}
.tile.now .t-mark{background:var(--accent);color:#fff}
.tile.now .now-tag{background:none;padding:0;font:600 11px var(--sans)}
.continue{border:0;padding:32px;border-radius:20px}
.continue h2{font-size:30px;letter-spacing:-.03em}
.continue-done{font-size:14px;color:var(--muted)}
.bar{height:8px;border-radius:4px;overflow:hidden;background:var(--panel2)}
.bar span{border-radius:4px;transition:width .8s var(--ease)}

/* Scenario: lettered answers */
.scn{border:0;padding:28px;border-radius:20px}
.scn-opts{counter-reset:opt}
.scn-opts button{counter-increment:opt;display:flex;gap:12px;align-items:flex-start;border-radius:var(--r-md);background:var(--panel);border-color:var(--line2)}
.scn-opts button:before{content:counter(opt,upper-alpha);flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:7px;font:600 12px var(--sans);background:var(--panel2);color:var(--muted);transition:background .2s,color .2s}
.scn-opts button:hover:before{background:var(--text);color:#fff}
.scn-opts button.right:before{background:var(--green);color:#fff}
.scn-opts button.wrong:before{background:var(--red);color:#fff}
.options{counter-reset:opt}
.options button{counter-increment:opt;display:flex;gap:12px;align-items:center;border-radius:var(--r-md);transition:border-color .2s,transform .2s var(--ease)}
.options button:before{content:counter(opt,upper-alpha);flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:7px;font:600 12px var(--sans);background:var(--panel2);color:var(--muted)}
.options button:hover{transform:translateX(2px)}
.options button.right:before{background:var(--green);color:#fff}
.options button.wrong:before{background:var(--red);color:#fff}
.check{border:0;border-radius:20px;box-shadow:var(--shadow);padding:28px}

/* Surfaces: one radius family, one shadow */
.callout,.layer-detail,.card,.cloud-col,.map-step,.fence-step,.raci,.viz,.sorter,details.more,.flip,.layer-btn,.sys,.trace{border-radius:var(--r-lg)}
.viz,.sorter,.layer-detail,.raci{border:0;box-shadow:var(--shadow)}
.layer-btn{border:0;box-shadow:var(--shadow);background:var(--panel);transition:transform .25s var(--ease),box-shadow .25s,background .2s}
.layer-btn:hover{transform:translateX(3px);box-shadow:var(--shadow-hover)}
.layer-btn.active{background:var(--panel);box-shadow:0 0 0 2px var(--accent),var(--shadow-hover)}
.layer-btn.is-human{background:var(--panel);color:var(--text);box-shadow:var(--shadow)}
.layer-btn.is-human .ic{background:none;color:var(--text)}
.layer-btn.is-human .n{color:var(--faint)}
.layer-btn.is-human.active{outline:0;box-shadow:0 0 0 2px var(--text),var(--shadow-hover)}
.layer-detail h2{font-size:30px;letter-spacing:-.03em}
.card{border:0}
.card:hover{box-shadow:var(--shadow-hover)}
.tag{border-radius:999px;padding:4px 10px;font:500 12px var(--sans)}

@media(max-width:820px){
  .topbar{grid-template-columns:1fr auto;height:auto}
  .chapters{grid-column:1/-1;grid-row:2;overflow-x:auto;justify-self:stretch}
  .chapter{padding:7px 12px 9px;font-size:13px;max-width:none}
  .s-dots{width:100%;inset:auto 0 0 0;opacity:.3}
  .tile{min-height:76px}
  .step-tab{padding:7px 10px}
  .pg-text{display:none}
  .scn,.check{padding:20px}
}
.tile{grid-template-columns:1fr auto;grid-template-rows:auto auto;grid-template-areas:"top mark" "title mark";row-gap:4px}
.t-top{grid-area:top;display:flex;gap:8px;align-items:center;font-size:13px;color:var(--faint)}
.t-top .t-num{width:auto;grid-row:auto}
.t-top .t-meta:before{content:"·";margin-right:8px}
.t-title{grid-area:title}
.t-mark{grid-area:mark}
.tile.now .t-top{color:rgba(255,255,255,.6)}
.chapter{padding:9px 16px}
.chapter i{margin-top:2px}
.meta{font:500 14px var(--sans)}
.meta span:last-child{color:var(--faint)}
.s-dots{width:min(460px,30vw);inset:14% -4% 14% auto}
@media(max-width:820px){.s-dots{width:100%;inset:auto 0 0 0;height:40%;opacity:.28}}

/* ===== Module illustrations ===== */
.learn-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;margin-bottom:28px}
.learn-hero h1{max-width:14ch}
.learn-hero .lede{margin:18px 0 0;font-size:clamp(18px,1.6vw,21px)}
.illus{margin:0;aspect-ratio:3/2;border-radius:24px;background:linear-gradient(180deg,#fff,#f4f3ef);box-shadow:var(--shadow);overflow:hidden;display:grid;place-items:center}
.illus svg{width:100%;height:100%;overflow:visible}
/* palette */
.illus .w{fill:#fff;stroke:rgba(23,23,22,.10);stroke-width:1.5}
.illus .k{fill:#171716}
.illus .a{fill:#2a78d6}
.illus .am{fill:#86b6ef}
.illus .al{fill:#e8f1fc}
.illus .g{fill:#e1e0d9}
.illus .s{fill:rgba(23,23,22,.08)}
.illus .glass{fill:rgba(255,255,255,.85);stroke:rgba(23,23,22,.14);stroke-width:1.5}
.illus .la{fill:none;stroke:#2a78d6;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.illus .lw{fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.illus .ln{fill:none;stroke:#c3c2b7;stroke-width:2;stroke-linecap:round}
.illus .ln2{fill:none;stroke:#898781;stroke-width:5;stroke-linecap:round}
.illus .track{fill:none;stroke:#e1e0d9;stroke-width:6;stroke-linecap:round}
.illus .tangle{fill:none;stroke:#c3c2b7;stroke-width:5;stroke-linecap:round;stroke-dasharray:2 10}
.illus .beam{fill:none;stroke:#2a78d6;stroke-width:3;stroke-dasharray:6 10;opacity:.7}
.illus .fence{fill:none;stroke:#2a78d6;stroke-width:3;stroke-dasharray:8 10}
.illus .ring{fill:none;stroke:#c3c2b7;stroke-width:2;stroke-dasharray:2 8}
.illus .ring2{fill:none;stroke:rgba(255,255,255,.25);stroke-width:2}
.illus .dial{fill:#2a78d6;stroke:#fff;stroke-width:3}
.illus .rail{fill:none;stroke:#171716;stroke-width:2.5;stroke-dasharray:10 8}
.illus .check{fill:none;stroke:#fff;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.illus .la.il-flow{stroke-dasharray:6 10;stroke-width:2.5}
/* motion: only while the step is on screen */
.illus .il-pop{transform-box:fill-box;transform-origin:center;opacity:0}
.illus .il-draw{stroke-dasharray:1;stroke-dashoffset:1}
.illus .il-grow{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0)}
.step.current .illus .il-pop{animation:ilPop .7s var(--ease) forwards;animation-delay:calc(var(--d,0) * 110ms + 150ms)}
.step.current .illus .il-draw{animation:ilDraw 1.6s var(--ease) .35s forwards}
.step.current .illus .il-grow{animation:ilGrow .9s var(--ease) forwards;animation-delay:calc(var(--d,0) * 90ms + 200ms)}
.illus .il-float{transform-box:fill-box;animation:ilFloat 5s ease-in-out infinite;animation-delay:calc(var(--f,0s) * -1)}
.illus .il-flow{animation:ilFlow 1.1s linear infinite}
.illus .il-pulse{transform-box:fill-box;transform-origin:center;animation:ilPulse 2.6s ease-in-out infinite}
.illus .il-spin{transform-box:view-box;transform-origin:240px 160px;animation:ilSpin 40s linear infinite}
.illus .il-spin-sm{transform-box:fill-box;transform-origin:center;animation:ilSpin 6s linear infinite}
.illus .il-tilt{transform-box:view-box;transform-origin:240px 192px;animation:ilTilt 5s ease-in-out infinite}
.illus .il-drop{animation:ilDrop 2.6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes ilPop{from{opacity:0;transform:translateY(14px) scale(.85)}to{opacity:1;transform:none}}
@keyframes ilDraw{to{stroke-dashoffset:0}}
@keyframes ilGrow{to{transform:scaleY(1)}}
@keyframes ilFloat{50%{transform:translateY(-7px)}}
@keyframes ilFlow{to{stroke-dashoffset:-32}}
@keyframes ilPulse{50%{transform:scale(1.06);opacity:.7}}
@keyframes ilSpin{to{transform:rotate(360deg)}}
@keyframes ilTilt{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes ilDrop{0%{transform:translateY(0);opacity:0}10%{opacity:1}85%{opacity:1}100%{transform:translateY(270px);opacity:0}}
@media(prefers-reduced-motion:reduce){.illus *{animation:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important}}
@media(max-width:820px){
  .learn-hero{grid-template-columns:1fr;gap:20px}
  .illus{order:-1;max-width:420px;width:100%}
}
@media(max-width:820px){.step-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}.step-tabs::-webkit-scrollbar{display:none}.step-tab{white-space:nowrap;flex:none}}

/* ===== D3 visuals ===== */
/* Hero network */
.s-dots.net{display:block;padding:0;mask-image:radial-gradient(closest-side,#000 70%,transparent);-webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent);pointer-events:none;opacity:1;width:min(620px,44vw);inset:6% 0 6% auto}
.s-dots.net svg{width:100%;height:100%;display:block;overflow:visible}
.nl{stroke:#d9d8d1;stroke-width:1}
.nl.bridge{stroke:var(--accent);stroke-opacity:.35;stroke-width:1.2;stroke-dasharray:3 4}
.nn{fill:#c3c2b7}
.nn.a{fill:var(--accent)}
.nn.k{fill:var(--text);stroke:#fff;stroke-width:2}

/* Record stream */
#viz-stream .viz-body{position:relative}
.stream{width:100%;height:auto;display:block;overflow:visible}
.stream .lane{fill:var(--panel2)}
.stream .gate{stroke:var(--text);stroke-width:2;stroke-linecap:round;stroke-dasharray:2 6}
.stream .gate-label{font:600 13px var(--sans);fill:var(--text)}
.stream .tray{stroke:var(--axis);stroke-width:1.5}
.stream .held-label{font:500 12px var(--sans);fill:var(--faint);font-variant-numeric:tabular-nums}
.stream .bin{fill:var(--accent)}
.stream .bin-n{font:700 22px var(--sans);fill:#fff;font-variant-numeric:tabular-nums}
.stream .bin-l{font:500 12px var(--sans);fill:rgba(255,255,255,.8)}
.stream .pt{transition:fill .25s}
.stream .pt.go{fill:#9c9b93}
.stream .pt.ok{fill:var(--accent)}
.stream .pt.drop{fill:#d0675f}

/* Story waffle */
.s-bars.waffle{display:grid;grid-template-columns:repeat(25,1fr);gap:4px;max-width:560px}
.waffle i{aspect-ratio:1;border-radius:3px;background:var(--accent);transition:background .35s,transform .35s var(--ease),opacity .35s}
.waffle i.off{background:var(--grid);transform:scale(.55);opacity:.7}
.waffle-key{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--faint);margin-top:12px}
.waffle-key i{width:10px;height:10px;border-radius:2px;background:var(--accent)}

/* Guardrail ring */
.hub.ring-viz{width:min(460px,100%);aspect-ratio:1;position:relative}
.ring-viz svg{width:100%;height:100%;overflow:visible}
.ring-viz .orbit{animation:ilSpin 60s linear infinite;transform-origin:0 0}
.ring-viz .orbit-ring{fill:none;stroke:#d9d8d1;stroke-width:1.5;stroke-dasharray:2 7}
.ring-viz .team{fill:#c3c2b7}
.ring-viz .team:nth-of-type(3n+1){fill:var(--mid,#86b6ef)}
.ring-viz .seg{cursor:pointer;outline:none}
.ring-viz .seg path{fill:#fff;stroke:rgba(23,23,22,.08);stroke-width:1;filter:drop-shadow(0 8px 16px rgba(23,23,22,.08));transition:fill .25s}
.ring-viz .seg:hover path,.ring-viz .seg:focus-visible path{fill:var(--accent-soft)}
.ring-viz .seg.active path{fill:var(--accent)}
.ring-viz .seg.human path{fill:var(--text)}
.ring-viz .seg.human .seg-label{fill:#fff}
.ring-viz .seg.human.active path{fill:var(--accent)}
.ring-viz .seg-label{font:600 13px var(--sans);fill:var(--text);pointer-events:none}
.ring-viz .seg.active .seg-label{fill:#fff}
.ring-viz .core circle{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.5}
.ring-viz .core text{font:600 16px var(--sans);fill:var(--accent-ink)}
.ring-viz .seg:focus-visible path{stroke:var(--accent);stroke-width:3}

@media(max-width:820px){
  .s-dots.net{width:100%;inset:auto 0 0 0;height:42%;opacity:.55}
  .s-bars.waffle{grid-template-columns:repeat(25,1fr);gap:2px}
  .stream .gate-label{font-size:11px}
  #viz-stream .viz-body{overflow-x:auto}
  .stream{min-width:560px}
  .ring-viz .seg-label{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.ring-viz .orbit{animation:none}}

/* ===== See-it upgrades ===== */
#viz-journey{margin:0 0 20px}
.dumb{width:100%;height:auto;display:block;overflow:visible}
.dumb .dl-label{font:600 14px var(--sans);fill:var(--text)}
.dumb .dl-track{stroke:var(--grid);stroke-width:2;stroke-linecap:round}
.dumb .dl-bar{stroke:var(--axis);stroke-width:6;stroke-linecap:round}
.dumb .dl-today{fill:#d0675f;stroke:#fff;stroke-width:3}
.dumb .dl-future{fill:var(--accent);stroke:#fff;stroke-width:3}
.dumb .dl-val{font:600 13px var(--sans);font-variant-numeric:tabular-nums}
.dumb .dl-val.today{fill:#a8433b}.dumb .dl-val.future{fill:var(--accent-ink)}
.dumb .dl-key{font:600 13px var(--sans)}.dumb .dl-key.today{fill:#a8433b}.dumb .dl-key.future{fill:var(--accent-ink)}

#viz-mask{margin:20px 0}
.mask-demo{display:grid;grid-template-columns:1fr 80px 1fr;align-items:center;gap:0}
.md-card{background:var(--bg);border-radius:var(--r-lg);padding:16px;box-shadow:inset 0 0 0 1px var(--line)}
.md-card.ai{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px rgba(42,120,214,.35)}
.md-head{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:10px}
.md-head .ph{font-size:20px;color:var(--accent)}
.md-row{display:flex;justify-content:space-between;gap:12px;padding:9px 10px;border-radius:8px;font-size:14px;transition:background .3s}
.md-row span{color:var(--muted)}
.md-row b{font-weight:600;text-align:right}
.md-row .tok{font-family:var(--mono);font-size:13px;color:var(--accent-ink);background:#fff;padding:1px 8px;border-radius:6px}
.md-row .held{display:inline-flex;align-items:center;gap:6px;color:#a8433b}
.md-row.hot{background:#fff;box-shadow:0 0 0 2px var(--accent)}
.md-card.ai .md-row.hot{background:#fff}
.run .md-card.ai .md-row.hot b{animation:mdIn .7s var(--ease) both}
@keyframes mdIn{from{opacity:0;transform:translateX(-14px)}}
.md-mid{position:relative;height:100%;display:grid;place-items:center}
.md-mid svg{position:absolute;inset:0;width:100%;height:100%}
.md-mid path{stroke:var(--accent);stroke-width:2.5;stroke-dasharray:6 8;animation:ilFlow 1s linear infinite;fill:none}
.md-filter{position:relative;z-index:1;width:48px;height:48px;border-radius:14px;background:var(--text);color:#fff;display:grid;place-items:center;font-size:22px;box-shadow:var(--shadow)}

.matrix{width:100%;height:auto;display:block}
.matrix .mh{font:600 14px var(--sans);fill:var(--text)}
.matrix .mr-bg{fill:var(--bg)}
.matrix .mr:nth-child(odd) .mr-bg{fill:transparent}
.matrix .mt{font:500 14px var(--sans);fill:var(--text)}
.matrix .c2{fill:var(--accent)}
.matrix .c1{fill:#fff;stroke:var(--accent);stroke-width:2.5}
.matrix .c0{fill:var(--grid)}
.matrix .ct{font:500 11px var(--sans);fill:var(--faint)}
.matrix-key{display:flex;gap:18px;font-size:13px;color:var(--muted);margin-top:10px}
.matrix-key span{display:flex;align-items:center;gap:6px}
.matrix-key i{width:12px;height:12px;border-radius:50%;display:inline-block}
.matrix-key .k2{background:var(--accent)}.matrix-key .k1{border:2px solid var(--accent)}
#viz-raci .viz-table .raci{box-shadow:none}

@media(max-width:820px){
  .mask-demo{grid-template-columns:1fr;gap:8px}
  .md-mid{height:56px}.md-mid svg{transform:rotate(90deg)}
  #raci-matrix,#journey-dumbbell{overflow-x:auto}
  .matrix{min-width:560px}.dumb{min-width:520px}
}

/* ===== Control tower overview ===== */
.tower{display:none}
.at-tower .tower{display:block}
.at-tower .mod-bar,.at-tower .pager,.at-tower .home,.at-tower .story{display:none!important}
.tower-link{display:inline-flex;align-items:center;gap:8px}
.tower-link .ph{font-size:18px;color:var(--accent)}
.at-tower .tower-link{background:var(--text);color:#fff;border-color:var(--text)}
.at-tower .tower-link .ph{color:#fff}
.top-actions{justify-self:end;display:flex;gap:8px}
.tw-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:28px}
.tw-kicker{font:600 15px var(--sans);color:var(--accent-ink);margin-bottom:12px}
.tw-head h1{max-width:none}
.tw-head .lede{margin:16px 0 0}
.tw-principles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tw-p,.tw-persona{display:flex;align-items:center;gap:12px;text-align:left;padding:14px 16px;border:0;border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--shadow);transition:transform .25s var(--ease),box-shadow .25s,background .2s}
.tw-p .ph,.tw-persona .ph{font-size:26px;color:var(--accent);flex:none}
.tw-p b,.tw-persona b{display:block;font-size:15px}
.tw-p small,.tw-persona small{display:block;font-size:13px;color:var(--muted);line-height:1.35}
.tw-p:hover,.tw-persona:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.tw-p[aria-pressed="true"]{background:var(--accent);color:#fff}
.tw-p[aria-pressed="true"] .ph,.tw-p[aria-pressed="true"] small{color:#fff}
.tw-personas{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:28px}
.tw-persona.on{background:var(--text);color:#fff}
.tw-persona.on .ph,.tw-persona.on small{color:#fff}
.tw-persona.on small{opacity:.7}

.tw-compare{background:var(--panel);border-radius:24px;box-shadow:var(--shadow);padding:24px;margin-bottom:28px}
.tw-compare-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.tw-compare-top h2,.tw-col h2,.tw-arch h2{font-size:20px;letter-spacing:-.02em;margin:0}
.tw-toggle{display:flex;gap:2px;padding:4px;background:var(--panel2);border-radius:var(--r-md)}
.tw-toggle button{border:0;background:none;padding:8px 14px;border-radius:9px;font-size:14px;font-weight:500;color:var(--muted)}
.tw-toggle button.on{background:var(--panel);color:var(--text);font-weight:600;box-shadow:0 1px 2px rgba(23,23,22,.08)}
.cvf{position:relative;border-radius:var(--r-lg);overflow:hidden;user-select:none}
.cvf-layer{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;padding:44px 14px 14px}
.cvf-layer.cur{background:#fbeceb}
.cvf-layer.fut{position:absolute;inset:0;background:var(--accent-soft);clip-path:inset(0 0 0 var(--pos));}
.cvf.anim .cvf-layer.fut,.cvf.anim .cvf-handle{transition:clip-path .6s var(--ease),left .6s var(--ease)}
.cvf-card{background:#fff;border-radius:14px;padding:14px;min-height:170px;display:flex;flex-direction:column;gap:6px;box-shadow:0 1px 2px rgba(23,23,22,.05);transition:box-shadow .25s,transform .25s var(--ease),opacity .25s}
.cvf-n{font:600 12px var(--sans);color:var(--faint)}
.cvf-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:22px;margin:2px 0 4px}
.cur .cvf-ic{background:#fbeceb;color:#b42f2f}
.fut .cvf-ic{background:var(--accent-soft);color:var(--accent)}
.cvf-card h3{font-size:15px;letter-spacing:-.01em}
.cvf-card p{font-size:14px;color:var(--muted);line-height:1.4}
.swap .cvf-card{animation:rise .5s var(--ease) both}
.swap .cvf-card:nth-child(2){animation-delay:40ms}.swap .cvf-card:nth-child(3){animation-delay:80ms}.swap .cvf-card:nth-child(4){animation-delay:120ms}.swap .cvf-card:nth-child(5){animation-delay:160ms}.swap .cvf-card:nth-child(6){animation-delay:200ms}
.cvf-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;background:var(--text);transform:translateX(-50%);pointer-events:none;z-index:2}
.cvf-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--text);color:#fff;display:grid;place-items:center;font-size:20px;box-shadow:0 6px 16px rgba(23,23,22,.25)}
.cvf-tag{position:absolute;top:12px;z-index:2;font:600 13px var(--sans);padding:4px 10px;border-radius:999px;background:#fff}
.cvf-tag.l{left:14px;color:#b42f2f}.cvf-tag.r{right:14px;color:var(--accent-ink)}
.cvf-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:3;margin:0}
.cvf-range:focus-visible+*{outline:none}
.cvf:has(.cvf-range:focus-visible){box-shadow:0 0 0 3px var(--accent)}

.tw-fix{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:28px}
.tw-col{background:var(--panel);border-radius:24px;box-shadow:var(--shadow);padding:24px}
.tw-col h2{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.tw-col.broken h2 .ph{color:#b42f2f;font-size:24px}.tw-col.enable h2 .ph{color:var(--accent);font-size:24px}
.tw-list{display:flex;flex-direction:column;gap:8px}
.tw-item{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--bg);transition:background .25s,box-shadow .25s,opacity .25s}
.tw-item>.ph{font-size:24px;flex:none;margin-top:2px}
.broken .tw-item>.ph{color:#b42f2f}.enable .tw-item>.ph{color:var(--accent)}
.tw-item h3{font-size:15px;margin-bottom:2px}
.tw-item p{font-size:14px;color:var(--muted);line-height:1.45}

.tw-arch{background:var(--panel);border-radius:24px;box-shadow:var(--shadow);padding:24px}
.tw-arch h2{margin-bottom:16px}
.tw-pipe{display:flex;align-items:stretch;gap:8px}
.tw-stage{flex:1;min-width:0;padding:16px;border-radius:16px;background:var(--bg);display:flex;flex-direction:column;gap:6px;transition:background .25s,box-shadow .25s,opacity .25s}
.tw-stage-ic{width:44px;height:44px;border-radius:12px;background:var(--text);color:#fff;display:grid;place-items:center;font-size:22px;margin-bottom:6px}
.tw-stage h3{font-size:15px}
.tw-stage p{font-size:13px;color:var(--muted);line-height:1.45}
.tw-arrow{display:grid;place-items:center;color:var(--faint);font-size:18px;flex:none}

/* Principle highlighting */
.tower[data-hl]:not([data-hl=""]) [data-p]:not(.lit){opacity:.35}
.tower [data-p].lit{box-shadow:0 0 0 2px var(--accent),var(--shadow-hover);background:#fff}
.tower[data-hl]:not([data-hl=""]) .cur .cvf-card{opacity:.35}

@media(max-width:1100px){.tw-head{grid-template-columns:1fr}.tw-personas{grid-template-columns:repeat(3,1fr)}.cvf-layer{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){
  .top-actions .tower-link{padding:7px 10px}
  .top-actions .home-link:not(.tower-link){display:none}
  .tw-principles{grid-template-columns:1fr 1fr}
  .tw-personas{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);overflow-x:auto;padding-bottom:4px}
  .tw-compare,.tw-col,.tw-arch{padding:16px}
  .cvf-layer{grid-template-columns:1fr 1fr}
  .cvf-card{min-height:150px}
  .tw-fix{grid-template-columns:1fr}
  .tw-pipe{flex-direction:column}
  .tw-arrow{transform:rotate(90deg)}
}
@media(max-width:820px){
  .cvf-range,.cvf-handle,.tw-toggle button[data-pos="50"]{display:none}
  .cvf-layer{grid-template-columns:1fr}
  .cvf-card{min-height:0;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center}
  .cvf-card .cvf-n{display:none}
  .cvf-card .cvf-ic{grid-row:1/3;margin:0}
  .cvf-tag.l,.cvf-tag.r{display:none}
}
@media(max-width:820px){.cvf-layer{padding:12px}}

/* ===== Control tower phase 2 + 3 ===== */
.tw-fix{position:relative}
.tw-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
.tw-links path{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:ilDraw .6s var(--ease) forwards}
.tw-links circle{fill:var(--accent);stroke:#fff;stroke-width:2}
#tw-broken .tw-item{cursor:pointer;outline:none}
#tw-broken .tw-item:hover,#tw-broken .tw-item:focus-visible,#tw-broken .tw-item.picked{background:#fbeceb;box-shadow:0 0 0 2px rgba(180,47,47,.35)}
#tw-enable .tw-item.fixes{background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent)}
.tw-learn{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font:600 13px var(--sans);color:var(--accent-ink);text-decoration:none}
.tw-learn .ph{transition:transform .2s var(--ease)}
.tw-learn:hover .ph{transform:translateX(3px)}
.tw-arch-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.tw-arch-top h2{margin:0}
.tw-play{gap:8px}
.tw-pipe-wrap{position:relative;padding-top:44px}
.tw-token{position:absolute;left:0;top:0;display:none;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--accent);color:#fff;font:600 13px var(--sans);box-shadow:0 8px 20px -6px rgba(42,120,214,.6);transition:transform .9s var(--ease),background .3s;z-index:3;white-space:nowrap}
.tw-token.on{display:inline-flex}
.tw-token.human{background:var(--text)}
.tw-token:after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;background:inherit;transform:translateX(-50%) rotate(45deg)}
.tw-playing .tw-stage{opacity:.45}
.tw-playing .tw-stage.past{opacity:.75}
.tw-playing .tw-stage.on{opacity:1;background:#fff;box-shadow:0 0 0 2px var(--accent),var(--shadow-hover);transform:translateY(-3px)}
.tw-stage{transition:opacity .4s,transform .4s var(--ease),box-shadow .4s,background .4s}
.tw-story{margin-top:18px}
.tw-prog{height:6px;border-radius:3px;background:var(--panel2);overflow:hidden;margin-bottom:12px}
.tw-prog span{display:block;height:100%;width:0;background:var(--accent);border-radius:3px;transition:width .9s var(--ease)}
.tw-cap{font-size:18px;line-height:1.5;min-height:3em;max-width:70ch}
.tw-cap.in{animation:rise .5s var(--ease) both}
.tw-video{margin:0 0 28px;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);background:#0d0d0c}
.tw-video video{display:block;width:100%;aspect-ratio:16/9}
.tw-poster{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:center;margin-top:28px;background:var(--panel);border-radius:24px;box-shadow:var(--shadow);padding:24px}
.tw-poster img{width:100%;height:auto;border-radius:14px;box-shadow:0 0 0 1px var(--line)}
.tw-poster h2{font-size:24px;letter-spacing:-.02em;margin-bottom:8px}
.tw-poster p{color:var(--muted);margin-bottom:18px}
.tw-poster-actions{display:flex;gap:10px;flex-wrap:wrap}
.tw-poster-actions .btn{text-decoration:none;gap:8px}
.trace-btns .btn .ph{font-size:18px}
#trace-play{gap:8px}
@media(max-width:820px){
  .tw-links{display:none}
  .tw-pipe-wrap{padding-top:0}
  .tw-token{display:none!important}
  .tw-poster{grid-template-columns:1fr}
  .trace-btns{flex-wrap:wrap}
}
.tw-arrow{pointer-events:none}
@media(max-width:820px){.tw-arrow{transform:none;height:24px}.tw-arrow .ph{transform:rotate(90deg)}}

/* ===== New-hire game board ===== */
#clouds .trace{display:none}
.nh{background:var(--panel);border-radius:24px;box-shadow:var(--shadow);padding:24px;margin-bottom:20px}
.nh-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.nh-top h2{font-size:24px;letter-spacing:-.02em;margin:0 0 4px}
.nh-top p{color:var(--muted)}
.nh-ctrl{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nh-ctrl .btn{gap:8px}
.nh-stars{display:inline-flex;align-items:center;gap:6px;font-weight:600;padding:8px 12px;border-radius:999px;background:var(--warn-soft);color:var(--warn)}
.nh-stars .ph{font-size:18px}
.nh-stars.pop{animation:starPop .6s var(--ease)}
@keyframes starPop{40%{transform:scale(1.25)}}
.nh-stage{position:relative;border-radius:20px;background:linear-gradient(180deg,#fbfbf9,#f3f2ee);overflow:hidden}
.nh-svg{display:block;width:100%;height:auto}
.nh-road{fill:none;stroke:#e6e5df;stroke-width:34;stroke-linecap:round;stroke-linejoin:round}
.nh-road-line{fill:none;stroke:#fff;stroke-width:2.5;stroke-dasharray:10 12;stroke-linecap:round}
.nh-prog{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;opacity:.85}
.nh-cloud{fill:#e8f1fc;animation:ilFloat 7s ease-in-out infinite}
.nh-cloud.c2{fill:#eceae4;animation-delay:-3s}
.nh-pole{stroke:var(--text);stroke-width:3;stroke-linecap:round}
.nh-cloth{fill:var(--accent);transform-origin:0 -50px;animation:wave 2.2s ease-in-out infinite}
@keyframes wave{50%{transform:skewY(-6deg) scaleX(.94)}}
/* Maria */
.nh-shadow{fill:rgba(23,23,22,.14)}
.nh-head{fill:#b9805a}
.nh-hair{fill:#2b2420}
.nh-coat{fill:var(--accent)}
.nh-badge{fill:#fff}
.nh-arm{fill:none;stroke:#1c5cab;stroke-width:5;stroke-linecap:round}
.nh-leg path{stroke:var(--text);stroke-width:5.5;stroke-linecap:round}
.nh-body{transform-box:fill-box;transform-origin:center bottom}
.nh-leg{transform-box:view-box}
.nh-leg.l{transform-origin:-4px -26px}.nh-leg.r{transform-origin:4px -26px}
.walking .nh-leg.l{animation:legL .42s ease-in-out infinite}
.walking .nh-leg.r{animation:legR .42s ease-in-out infinite}
.walking .nh-body>*:not(.nh-leg){animation:bob .42s ease-in-out infinite}
.walking .nh-arm.l{animation:legR .42s ease-in-out infinite}
@keyframes legL{0%,100%{transform:rotate(18deg)}50%{transform:rotate(-18deg)}}
@keyframes legR{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(18deg)}}
@keyframes bob{50%{transform:translateY(-3px)}}
.nh-maria:not(.walking) .nh-body{animation:idle 2.6s ease-in-out infinite}
@keyframes idle{50%{transform:translateY(-2px)}}
/* Tiles */
.nh-tiles{position:absolute;inset:0}
.nh-tile{position:absolute;transform:translate(-50%,-50%);border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:6px;width:110px;cursor:pointer}
.nh-ic{position:relative;width:60px;height:60px;border-radius:18px;background:#fff;display:grid;place-items:center;font-size:26px;color:var(--faint);box-shadow:var(--shadow);transition:transform .3s var(--ease),background .3s,color .3s,box-shadow .3s;margin-top:-6px}
.nh-ic em{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;background:var(--panel2);color:var(--muted);font:600 12px/22px var(--sans);font-style:normal;box-shadow:0 0 0 2px #fff}
.nh-tl{font:600 12px/1.25 var(--sans);color:var(--muted);text-align:center;background:rgba(255,255,255,.9);padding:3px 8px;border-radius:8px}
.nh-tile:hover .nh-ic{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.nh-tile.next .nh-ic{color:var(--accent);box-shadow:0 0 0 2px var(--accent),var(--shadow);animation:pulseRing 1.8s ease-in-out infinite}
@keyframes pulseRing{50%{box-shadow:0 0 0 7px rgba(42,120,214,.15),var(--shadow)}}
.nh-tile.done .nh-ic{background:var(--accent-soft);color:var(--accent)}
.nh-tile.done .nh-ic em{background:var(--green);color:#fff}
.nh-tile.here .nh-ic{background:var(--accent);color:#fff;transform:scale(1.08)}
.nh-tile.here .nh-ic em{background:var(--text);color:#fff}
.nh-tile.here .nh-tl,.nh-tile.done .nh-tl{color:var(--text)}
.nh-tile.star .nh-ic:after{content:"";position:absolute;left:-6px;top:-6px;width:14px;height:14px;background:#eda100;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
/* Panel */
.nh-panel{display:grid;grid-template-columns:200px 1fr;gap:24px;margin-top:18px;opacity:0;transform:translateY(14px);max-height:0;overflow:hidden;transition:opacity .45s var(--ease),transform .45s var(--ease),max-height .6s var(--ease)}
.nh-panel.open{opacity:1;transform:none;max-height:900px}
.nh-scene{border-radius:20px;background:var(--text);color:#fff;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:6px;padding:20px;min-height:220px;position:relative;overflow:hidden}
.nh-scene:before{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;border:1.5px dashed rgba(255,255,255,.18)}
.nh-scene-ic{position:absolute;right:20px;top:20px;width:72px;height:72px;border-radius:20px;background:var(--accent);display:grid;place-items:center;font-size:36px;animation:ilPop .6s var(--ease) both}
.nh-scene-n{font:600 13px var(--sans);opacity:.7}
.nh-where{font:600 18px var(--sans)}
.nh-body-txt h3{font-size:24px;letter-spacing:-.02em;margin-bottom:6px}
.nh-what{color:var(--muted);margin-bottom:14px}
.nh-cmp{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.nh-cmp>div{padding:12px 14px;border-radius:12px;font-size:15px}
.nh-cmp small{display:block;font:600 12px var(--sans);margin-bottom:2px}
.nh-today{background:#fbeceb;color:#7a2420}.nh-today small{color:#b42f2f}
.nh-future{background:var(--accent-soft);color:var(--accent-ink)}.nh-future small{color:var(--accent)}
.nh-sys-l{font:600 13px var(--sans);color:var(--faint);margin-bottom:6px}
.nh-sys{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.nh-sys span{font-size:13px;font-weight:500;padding:5px 10px;border-radius:999px;background:var(--panel2)}
.nh-q{border-top:1px solid var(--line);padding-top:14px}
.nh-q>p:first-child{display:flex;gap:8px;align-items:flex-start;font-weight:600;margin-bottom:10px}
.nh-q>p:first-child .ph{color:var(--accent);font-size:20px;margin-top:1px}
.nh-opts{display:flex;gap:8px;flex-wrap:wrap}
.nh-opts button{padding:11px 14px;border-radius:var(--r-md);border:1px solid var(--line2);background:var(--panel);font-size:15px;transition:transform .2s var(--ease),border-color .2s}
.nh-opts button:hover{border-color:var(--text);transform:translateY(-1px)}
.nh-opts button.right{border-color:var(--green);background:var(--green-soft)}
.nh-opts button.wrong{border-color:var(--red);background:var(--red-soft)}
.nh-why{margin-top:10px;font-size:15px}
.nh-finish{display:flex;gap:16px;align-items:center;margin-top:16px;padding:18px 20px;border-radius:16px;background:var(--text);color:#fff;animation:rise .6s var(--ease) both}
.nh-finish .ph{font-size:40px;color:var(--mid,#86b6ef)}
.nh-finish h3{font-size:20px}
.nh-finish p{color:rgba(255,255,255,.75)}
.nh-map-l{font:600 14px var(--sans);color:var(--faint);margin:6px 0 10px}
@media(max-width:820px){
  .nh{padding:14px}
  .nh-ctrl{width:100%}.nh-ctrl .btn{flex:1;justify-content:center}
  .nh-tile{width:120px}
  .nh-panel{grid-template-columns:1fr}
  .nh-scene{min-height:120px}
  .nh-cmp{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.walking *,.nh-maria *{animation:none!important}}
.nh-svgwrap{position:relative}
.nh-top-layer{position:absolute;inset:0;z-index:3;pointer-events:none}
.nh-tiles{z-index:2}
.nh-portrait{position:absolute;left:14px;top:18px;width:110px;height:auto;overflow:visible}
.nh-portrait .nh-shadow{fill:rgba(255,255,255,.15)}
.nh-portrait .nh-arm.r{transform-box:fill-box;transform-origin:top left;animation:waveArm 1.4s ease-in-out infinite}
@keyframes waveArm{0%,100%{transform:rotate(0)}50%{transform:rotate(-55deg)}}
@media(max-width:820px){.nh-portrait{width:70px;left:auto;right:110px;top:14px}}
.nh-sound{gap:8px}
.nh-sound.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}

/* ===== Board: one-frame layout on phones ===== */
.nh-canvas{position:relative}
.nh-frame{position:relative}
.nh-grab{display:none}
@media(max-width:820px){
  .nh{scroll-margin-top:120px}
  .nh-top{margin-bottom:10px}
  .nh-top p{display:none}
  .nh-top h2{font-size:20px;margin:0}
  .nh-ctrl{width:100%;flex-wrap:nowrap;gap:8px}
  .nh-ctrl .nh-sound span,.nh-ctrl .nh-auto span{display:none}
  .nh-ctrl .nh-sound,.nh-ctrl .nh-auto{flex:none;width:48px;padding:0}
  .nh-ctrl .nh-next{flex:1}
  .nh-frame{height:max(380px,calc(100svh - 240px));border-radius:20px;overflow:hidden;background:linear-gradient(180deg,#fbfbf9,#f3f2ee)}
  .nh-stage{height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;border-radius:0;background:none}
  .nh-stage::-webkit-scrollbar{display:none}
  .nh-canvas{padding-bottom:58%}
  .nh-panel{position:absolute;left:0;right:0;bottom:0;margin:0;max-height:62%;overflow-y:auto;overscroll-behavior:contain;background:var(--panel);border-radius:20px 20px 0 0;box-shadow:0 -12px 32px -12px rgba(23,23,22,.25);padding:0 16px 16px;display:block;opacity:1;transform:translateY(105%);transition:transform .45s var(--ease),max-height .35s var(--ease)}
  .nh-panel.open{transform:none;max-height:62%}
  .nh-panel.min{max-height:56px;overflow:hidden}
  .nh-grab{display:flex;position:sticky;top:0;z-index:2;align-items:center;gap:10px;width:calc(100% + 32px);margin:0 -16px 12px;padding:16px 16px 10px;border:0;background:var(--panel);text-align:left;font-size:15px}
  .nh-grab span{position:absolute;left:50%;top:6px;width:36px;height:4px;border-radius:2px;background:var(--line2);transform:translateX(-50%)}
  .nh-grab b{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nh-grab .ph{font-size:18px;color:var(--faint);transition:transform .3s var(--ease)}
  .nh-panel.min .nh-grab .ph{transform:rotate(180deg)}
  .nh-scene{min-height:0;flex-direction:row;align-items:center;justify-content:flex-start;padding:12px 14px;gap:10px;margin-bottom:12px}
  .nh-scene:before,.nh-portrait{display:none}
  .nh-scene-ic{position:static;width:44px;height:44px;font-size:22px;border-radius:12px;order:-1}
  .nh-scene-n{display:none}
  .nh-where{font-size:15px}
  .nh-body-txt h3{display:none}
  .nh-what{font-size:15px;margin-bottom:10px}
  .nh-cmp>div{padding:10px 12px;font-size:14px}
  .nh-finish{margin-top:10px}
}
@media(max-width:820px){
  .nh-canvas{padding-bottom:0}
  .nh-stage{position:relative;z-index:1;isolation:isolate}
  .nh-stage::after{content:"";display:block;height:58%}
  .nh-panel{z-index:5}
}
@media(max-width:820px){.nh-ctrl .nh-next{white-space:nowrap;font-size:15px;padding:0 14px}.nh-stars{padding:8px 10px}}

/* ===== Control tower radar ===== */
.tw-radar{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;margin-bottom:28px}
.rd-main,.rd-side{background:var(--panel);border-radius:24px;box-shadow:var(--shadow);padding:20px 22px}
.rd-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.rd-head h2{display:flex;align-items:center;gap:10px;font-size:20px;letter-spacing:-.02em;margin:0}
.rd-live{width:10px;height:10px;border-radius:50%;background:#0ca30c;box-shadow:0 0 0 0 rgba(12,163,12,.5);animation:livePulse 1.8s ease-out infinite}
@keyframes livePulse{70%{box-shadow:0 0 0 10px rgba(12,163,12,0)}100%{box-shadow:0 0 0 0 rgba(12,163,12,0)}}
.rd-stage{position:relative}
.rd-viz svg{display:block;width:100%;height:auto;overflow:visible}
.rd-ring{fill:none;stroke:#dcdbd4;stroke-width:1.2}
.rd-ring.r0{stroke-dasharray:2 7}.rd-ring.r1{stroke-dasharray:1 9;opacity:.7}
.rd-axis{stroke:#e8e7e1;stroke-width:1}
.rd-spoke{stroke:#ecebe5;stroke-width:1.2;stroke-dasharray:3 6}
.rd-sweep{animation:ilSpin 7s linear infinite}
.rd-beam{stroke:var(--accent);stroke-width:1.5;opacity:.55}
.rd-shield{fill:rgba(42,120,214,.05);stroke:var(--accent);stroke-width:2.5;stroke-dasharray:10 7;animation:ilFlow 3s linear infinite}
.rd-shield-l{font:600 13px var(--sans);fill:var(--accent-ink);paint-order:stroke;stroke:#fff;stroke-width:5px}
.rd-core circle{fill:var(--text)}
.rd-core text{fill:#fff;font:600 15px var(--sans)}
.rd-core{transform-box:fill-box;transform-origin:center}
.rd-core.pulse{animation:corePulse .5s var(--ease)}
@keyframes corePulse{40%{transform:scale(1.06)}}
.rd-p{stroke:#fff;stroke-width:1.5}
.rd-p.in{fill:#9c9b93}.rd-p.out{fill:var(--accent)}.rd-p.bl{fill:#d0675f}
.rd-nodes{position:absolute;inset:0}
.rd-node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;padding:0;width:120px;cursor:default}
.rd-node .ph{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:22px;background:#fff;box-shadow:var(--shadow);transition:transform .25s var(--ease),box-shadow .25s}
.rd-node.in .ph{color:var(--text)}
.rd-node.out .ph{color:#fff;background:var(--accent)}
.rd-node span{font:600 12px/1.2 var(--sans);text-align:center;background:rgba(255,255,255,.92);padding:2px 6px;border-radius:6px}
.rd-node.hot .ph,.rd-node:focus-visible .ph{transform:scale(1.12);box-shadow:0 0 0 3px var(--accent),var(--shadow-hover)}
.rd-node.ping .ph{animation:nodePing .6s var(--ease)}
@keyframes nodePing{40%{transform:scale(1.15);box-shadow:0 0 0 6px rgba(42,120,214,.2),var(--shadow)}}
.tw-radar .focus .rd-node:not(.hot){opacity:.5}
.rd-tip{position:absolute;left:50%;bottom:4px;transform:translate(-50%,8px);opacity:0;pointer-events:none;background:var(--text);color:#fff;border-radius:12px;padding:10px 14px;font-size:13px;display:flex;flex-direction:column;gap:2px;transition:opacity .2s,transform .2s;min-width:220px;text-align:center}
.rd-tip.on{opacity:1;transform:translate(-50%,0)}
.rd-tip span{color:rgba(255,255,255,.8)}
.rd-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-top:8px}
.rd-legend span{display:flex;align-items:center;gap:6px}
.rd-legend i{width:10px;height:10px;border-radius:50%;display:inline-block}
.rd-legend .in{background:#9c9b93}.rd-legend .out{background:var(--accent)}.rd-legend .bl{background:#d0675f}
.rd-counts{display:grid;gap:10px;margin-bottom:18px}
.rd-counts div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:14px;background:var(--bg)}
.rd-counts b{font-size:26px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rd-counts div:nth-child(2) b{color:#b42f2f}.rd-counts div:nth-child(3) b{color:var(--accent-ink)}
.rd-counts span{font-size:13px;color:var(--muted);text-align:right}
.rd-feed-l{font:600 14px var(--sans);color:var(--faint);margin-bottom:8px}
.rd-feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rd-ev{display:grid;grid-template-columns:auto auto 1fr;gap:8px;align-items:start;font-size:13px;padding:8px 10px;border-radius:10px;background:var(--bg);animation:rise .4s var(--ease) both}
.rd-ev time{font-family:var(--mono);color:var(--faint);font-size:12px;padding-top:1px}
.rd-ev b{display:block;font-weight:600}
.rd-ev span:last-child{color:var(--muted)}
.rd-dot{width:8px;height:8px;border-radius:50%;margin-top:5px}
.rd-ev.in .rd-dot{background:#9c9b93}.rd-ev.out .rd-dot{background:var(--accent)}.rd-ev.bl .rd-dot{background:#d0675f}
.rd-ev.bl b{color:#b42f2f}
@media(max-width:1100px){.tw-radar{grid-template-columns:1fr}}
@media(max-width:820px){
  .rd-main,.rd-side{padding:14px}
  .rd-node{width:84px}
  .rd-node .ph{width:34px;height:34px;font-size:17px;border-radius:10px}
  .rd-node span{font-size:10px;padding:1px 4px}
  .rd-shield-l{font-size:18px}
  .rd-core text{font-size:20px}
  .rd-counts{grid-template-columns:repeat(3,1fr);gap:6px}
  .rd-counts div{flex-direction:column;align-items:flex-start;padding:10px}
  .rd-counts b{font-size:20px}.rd-counts span{text-align:left;font-size:12px}
}
@media(prefers-reduced-motion:reduce){.rd-sweep,.rd-shield,.rd-live{animation:none}}
/* Radar: full width, labels beside icons */
.tw-radar{grid-template-columns:1fr}
.rd-side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:20px;align-items:start}
.rd-side .rd-counts{margin:0}
.rd-stage{max-width:880px;margin:0 auto}
.rd-node{width:auto}
.rd-node span{position:absolute;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:13px}
.rd-node.in span{right:calc(100% + 8px)}
.rd-node.out span{left:calc(100% + 8px)}
.rd-tip{bottom:-6px}
@media(max-width:820px){
  .rd-side{grid-template-columns:1fr}
  .rd-node span{white-space:normal;width:72px;font-size:10px;line-height:1.15}
  .rd-node.in span{text-align:right}
  .rd-node.out span{text-align:left}
  .rd-node .ph{width:30px;height:30px;font-size:15px;border-radius:9px}
  .rd-shield-l{display:none}
}
.rd-side{grid-template-rows:auto 1fr;row-gap:8px}
.rd-side .rd-counts{grid-row:1/3;grid-column:1}
.rd-side .rd-feed-l{grid-column:2;grid-row:1;margin:0}
.rd-side .rd-feed{grid-column:2;grid-row:2}
@media(max-width:820px){.rd-side .rd-counts,.rd-side .rd-feed-l,.rd-side .rd-feed{grid-column:1;grid-row:auto}.rd-side .rd-feed-l{margin-top:10px}}
/* Hide the module pager while walking Maria's journey */
.pager{transition:transform .4s var(--ease)}
.on-board:not(.board-done) .pager{transform:translateY(110%)}
.on-board:not(.board-done) main{padding-bottom:40px}
.nh-finish{flex-wrap:wrap}
.nh-finish>div{flex:1;min-width:200px}
.nh-continue{text-decoration:none;gap:8px;background:#fff;color:var(--text);box-shadow:none}
.nh-continue:hover{background:var(--accent-soft);color:var(--accent-ink)}


/* ===== Operating model ===== */
.opm{display:none}
.at-model .opm{display:block}
.at-model .mod-bar,.at-model .pager,.at-model .home,.at-model .story,.at-model .tower{display:none!important}
.at-model .opm-link,.at-tower .tw-link{background:var(--text);color:#fff;border-color:var(--text)}
.at-model .opm-link .ph,.at-tower .tw-link .ph{color:#fff}
.at-model .tw-link,.at-tower .opm-link{background:var(--panel);color:var(--text);border-color:var(--line2)}
.at-tower .opm-link .ph{color:var(--accent)}
.tower-link .sm{display:none}
.crumb{display:flex;align-items:center;gap:6px}
.crumb a{color:var(--accent-ink);text-decoration:none;border-bottom:1px solid rgba(28,92,171,.3)}
.crumb .ph{font-size:14px;color:var(--faint)}
.opm-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:28px}
.opm-head h1{max-width:18ch}
.opm-pillars{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tw-p.static{cursor:default}
.tw-p.static:hover{transform:none}
.opm h2{font-size:20px;letter-spacing:-.02em;margin:0 0 14px}
.opm-towers,.opm-flow,.opm-layers-sec,.opm-col{background:var(--panel);border-radius:24px;box-shadow:var(--shadow);padding:24px;margin-bottom:28px}
.opm-tower-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.opm-tower{position:relative;display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:18px;background:var(--bg);border:1.5px dashed var(--line2);color:var(--muted);text-decoration:none;min-height:150px}
.opm-tw-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:22px;background:var(--panel2);color:var(--faint)}
.opm-tw-txt b{display:block;color:var(--text);font-size:15px}
.opm-tw-txt small{font-size:13px}
.opm-badge{position:absolute;top:14px;right:14px;font:600 12px var(--sans);padding:3px 9px;border-radius:999px;background:var(--panel2);color:var(--faint)}
.opm-badge.live{background:#e9f5e9;color:var(--green);display:inline-flex;align-items:center;gap:6px}
.opm-badge.live:before{content:"";width:7px;height:7px;border-radius:50%;background:#0ca30c;animation:livePulse 1.8s ease-out infinite}
.opm-tower.live{background:var(--text);border:0;color:rgba(255,255,255,.7);box-shadow:var(--shadow);transition:transform .25s var(--ease),box-shadow .25s}
.opm-tower.live:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.opm-tower.live .opm-tw-ic{background:var(--accent);color:#fff}
.opm-tower.live .opm-tw-txt b{color:#fff}
.opm-open{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font:600 14px var(--sans);color:#fff}
.opm-open .ph{transition:transform .2s var(--ease)}
.opm-tower.live:hover .opm-open .ph{transform:translateX(3px)}
.opm-flow-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.opm-flow-top h2{margin-bottom:4px}
.opm-flow-top p,.opm-sub{color:var(--muted);font-size:15px}
.opm-sub{margin:-8px 0 14px}
.opm-reqs{display:flex;gap:8px;flex-wrap:wrap}
.opm-reqs .pill{font-size:14px;padding:8px 14px}
#opm-play{gap:8px}
.opm-stages-wrap{position:relative;padding-top:30px}
.opm-stages{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;counter-reset:st}
.opm-stage{position:relative;padding:16px 14px;border-radius:16px;background:var(--bg);display:flex;flex-direction:column;gap:6px;cursor:pointer;transition:opacity .4s,transform .4s var(--ease),box-shadow .4s,background .4s}
.opm-stage:not(:last-child):after{content:"";position:absolute;right:-9px;top:50%;width:8px;height:8px;border-top:2px solid var(--axis);border-right:2px solid var(--axis);transform:translateY(-50%) rotate(45deg);z-index:1}
.opm-st-n{font:600 12px var(--sans);color:var(--faint)}
.opm-st-ic{width:42px;height:42px;border-radius:12px;background:var(--text);color:#fff;display:grid;place-items:center;font-size:21px}
.opm-stage h3{font-size:15px;letter-spacing:-.01em}
.opm-stage p{font-size:13px;color:var(--muted);line-height:1.4}
.opm-agent{margin-top:auto;font:600 12px var(--sans);color:var(--accent-ink);background:var(--accent-soft);padding:3px 8px;border-radius:999px;align-self:flex-start}
.opm-playing .opm-stage{opacity:.45}
.opm-playing .opm-stage.past{opacity:.75}
.opm-playing .opm-stage.on{opacity:1;background:#fff;box-shadow:0 0 0 2px var(--accent),var(--shadow-hover);transform:translateY(-3px)}
.opm-playing .opm-stage.on .opm-st-ic{background:var(--accent)}
.opm-token{position:absolute;left:0;top:0;display:none;width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;place-items:center;font-size:18px;box-shadow:0 8px 20px -6px rgba(42,120,214,.6);transition:transform .9s var(--ease);z-index:3}
.opm-token.on{display:grid}
.opm-story{margin-top:18px}
.opm-cap{font-size:18px;line-height:1.5;min-height:3em;max-width:72ch}
.opm-cap.in{animation:rise .5s var(--ease) both}
.opm-layers{display:flex;flex-direction:column;gap:8px}
.opm-layer{border-radius:16px;background:var(--bg);transition:box-shadow .35s,background .35s}
.opm-layer.lit{background:#fff;box-shadow:0 0 0 2px var(--accent),var(--shadow)}
.opm-ly-head{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border:0;background:none;text-align:left}
.opm-ly-ic{width:42px;height:42px;border-radius:12px;background:var(--panel2);display:grid;place-items:center;font-size:21px;color:var(--accent);flex:none;transition:background .3s,color .3s}
.opm-layer.lit .opm-ly-ic{background:var(--accent);color:#fff}
.opm-ly-t{flex:1;min-width:0}
.opm-ly-t b{display:block;font-size:15px}
.opm-ly-t small{display:block;font-size:13px;color:var(--muted)}
.opm-ly-head>.ph{font-size:18px;color:var(--faint);transition:transform .3s var(--ease)}
.opm-layer.open .opm-ly-head>.ph{transform:rotate(180deg)}
.opm-ly-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.opm-layer.open .opm-ly-body{grid-template-rows:1fr}
.opm-ly-cols{overflow:hidden;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 16px}
.opm-layer.open .opm-ly-cols{padding:0 16px 16px}
.opm-ly-cols>div{background:#fff;border-radius:12px;padding:12px 14px;box-shadow:inset 0 0 0 1px var(--line)}
.opm-ly-cols h4{font-size:13px;margin:0 0 6px;color:var(--accent-ink)}
.opm-ly-cols ul{margin:0;padding-left:16px;font-size:14px;color:var(--muted)}
.opm-ly-cols li+li{margin-top:3px}
.opm-out{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.opm-col{margin-bottom:28px}
.opm-col h2{display:flex;align-items:center;gap:10px}
.opm-col h2 .ph{color:var(--accent);font-size:22px}
.opm-chips{display:flex;flex-wrap:wrap;gap:8px}
.opm-chips span{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;background:var(--bg);font-size:14px;font-weight:500}
.opm-chips .ph{font-size:18px;color:var(--accent)}
@media(max-width:1100px){.opm-head{grid-template-columns:1fr}.opm-tower-grid{grid-template-columns:1fr 1fr}.opm-stages{grid-template-columns:repeat(3,minmax(0,1fr))}.opm-stage:nth-child(3):after{display:none}}
@media(max-width:820px){
  .tower-link .lg{display:none}.tower-link .sm{display:inline}
  .top-actions{gap:6px}
  .opm-towers,.opm-flow,.opm-layers-sec,.opm-col{padding:16px}
  .opm-pillars{grid-template-columns:1fr 1fr}
  .opm-tower-grid{grid-template-columns:1fr}
  .opm-tower{min-height:0;flex-direction:row;align-items:center}
  .opm-tower .opm-badge{position:static;margin-left:auto}
  .opm-open{display:none}
  .opm-stages{grid-template-columns:1fr 1fr}
  .opm-stage:after{display:none}
  .opm-ly-cols{grid-template-columns:1fr}
  .opm-out{grid-template-columns:1fr}
  .opm-token{display:none!important}
  .opm-flow-top .btn{width:100%;justify-content:center}
}
.brand>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:820px){.topbar{grid-template-columns:minmax(0,1fr) auto}.brand{overflow:hidden}}
.opm-flow-top>div:first-child{flex:1 1 260px}

/* ===== Operating model: hero + stage colours ===== */
:root{--st1:#1f5fbf;--st2:#1f78c8;--st3:#0f97a8;--st4:#6a3fc1;--st5:#d9601f;--st6:#2f8a32}
.opm-head{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;margin-bottom:20px}
.opm-hero{margin:0;position:relative}
.opm-hero:before{content:"";position:absolute;inset:8% 4% 4% 10%;background:radial-gradient(closest-side,rgba(42,120,214,.10),transparent);border-radius:50%;z-index:-1}
.opm-hero-svg{width:100%;height:auto;display:block;overflow:visible}
.opm-pillars{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:28px}
/* hero: five-layer operating model stack (towers on top, foundation below) */
.hs .hs-t{fill:#fff;stroke:rgba(23,23,22,.10);stroke-width:1.2}
.hs .hs-l{fill:#e7e6e0}.hs .hs-r{fill:#d9d8d1}
.hs.s-towers .hs-t{stroke:rgba(31,95,191,.35);stroke-width:1.6}
.hs.s-towers .hs-l{fill:#dfe6f1}.hs.s-towers .hs-r{fill:#cfd9ea}
.hs.s-people .hs-t{fill:#f4f0fb;stroke:rgba(106,63,193,.25)}
.hs.s-people .hs-l{fill:#e2d9f5}.hs.s-people .hs-r{fill:#d4c7f0}
.hs.s-sec .hs-t{fill:rgba(42,120,214,.09);stroke:var(--accent);stroke-dasharray:6 5;stroke-width:1.5}
.hs.s-sec .hs-l{fill:rgba(42,120,214,.16)}.hs.s-sec .hs-r{fill:rgba(42,120,214,.24)}
.hs.s-data .hs-t{fill:#fbfaf7}
.hs.s-infra .hs-t{fill:#f3f8f2;stroke:rgba(47,138,50,.25)}.hs.s-infra .hs-l{fill:#dfe9dc}.hs.s-infra .hs-r{fill:#d0dfcc}
.hb{stroke:var(--accent);stroke-width:2;stroke-dasharray:4 7;opacity:.45;animation:ilFlow 1.4s linear infinite}
/* towers */
.zone .zt{fill:rgba(31,95,191,.05);stroke:rgba(31,95,191,.28);stroke-width:1;stroke-dasharray:3 3}
.lat{stroke:var(--accent);stroke-width:1.4;stroke-dasharray:3 5;opacity:.55;animation:ilFlow 2s linear infinite}
.tw{--c:var(--st1)}.tw.st2,.tag.st2{--c:var(--st2)}.tw.st3,.tag.st3{--c:var(--st3)}.tw.st4,.tag.st4{--c:var(--st4)}.tw.st5,.tag.st5{--c:var(--st5)}.tw.more,.tag.more{--c:#8f8b80}.tag{--c:var(--st1)}
.tw .pr .t{fill:#fff;stroke:var(--c);stroke-width:1}
.tw .pr .l{fill:var(--c)}.tw .pr .r{fill:var(--c);filter:brightness(.78)}
.tw .win{stroke:rgba(255,255,255,.75);stroke-width:1.6;stroke-linecap:round}
.tw .mast{stroke:var(--c);stroke-width:1.5}
.tw .beacon{fill:var(--c);animation:beacon 2.4s ease-in-out infinite}
.tw.more .pr .l,.tw.more .pr .r{fill:#e7e6e0;filter:none}.tw.more .pr .t{stroke:#b9b6ad;stroke-dasharray:3 2}
@keyframes beacon{0%,100%{opacity:1}50%{opacity:.35}}
.tag rect{fill:#fff;stroke:var(--c);stroke-width:1.2}
.tag text{font:700 11.5px var(--sans);fill:var(--c);text-anchor:middle}
/* people + agents */
.mgr circle,.mgr path{fill:var(--text)}
.mring{fill:none;stroke:var(--text);stroke-width:1.3;opacity:.35}
.emp circle,.emp path{fill:#8f8b80}
.ag rect{fill:var(--st4)}.ag circle{fill:#fff}.ag line{stroke:var(--st4);stroke-width:1.5}
.ag{transform-box:fill-box;transform-origin:center bottom;animation:agentPulse 2.75s ease-in-out infinite;animation-delay:var(--d)}
@keyframes agentPulse{0%,70%,100%{transform:translateY(0)}15%{transform:translateY(-5px)}}
.aglink{stroke:#b8a6e6;stroke-width:1.3;stroke-dasharray:2 3}
/* security */
.bound{fill:none;stroke:var(--accent);stroke-width:1.6;opacity:.55}
.lock path{fill:none;stroke:var(--accent-ink);stroke-width:1.6}.lock rect{fill:var(--accent-ink)}
.hsh{fill:var(--accent);stroke:#fff;stroke-width:2}
.hsh-c{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.fs rect{fill:#fff;stroke:var(--accent-ink);stroke-width:1.4}.fs circle{fill:var(--accent-ink)}
/* data */
.fab{fill:rgba(15,151,168,.10);stroke:var(--st3);stroke-width:1.4}
.fab-g{stroke:var(--st3);stroke-width:.8;opacity:.45}
.fab-dot{fill:var(--st3);stroke:#fff;stroke-width:2}
.feed{stroke:var(--st3);stroke-width:1.1;stroke-dasharray:2 4;opacity:.6;animation:ilFlow 1.6s linear infinite}
.pr.tool .t{fill:#fff6ef}.pr.tool .l{fill:#f2c6a8}.pr.tool .r{fill:#e8a77d}
.cy rect,.cy ellipse{fill:#7fc6cf}.cy .tp{fill:#bfe5ea}
/* infra */
.pr.srv .t{fill:#fff}.pr.srv .l{fill:#d9d8d1}.pr.srv .r{fill:#c3c2b7}
.chip rect{fill:#fff;stroke:#8f8b80;stroke-width:1.3}.chip line{stroke:#8f8b80;stroke-width:1.2}
.hcloud{fill:#e8f1fc;stroke:rgba(42,120,214,.3)}
.hpk{fill:var(--accent);stroke:#fff;stroke-width:2.5;filter:drop-shadow(0 4px 8px rgba(42,120,214,.5))}
/* labels: weight falls from top layer down */
.hl line{stroke:#d9d8d1;stroke-width:1.2;stroke-dasharray:2 4}
.hl text{font:600 13px var(--sans);fill:var(--text)}
.hl text.sub{font:500 11px var(--sans);fill:var(--muted)}
.hl.l1 text:not(.sub){font-size:17.5px;font-weight:700}.hl.l2 text:not(.sub){font-size:15.5px;font-weight:650}.hl.l3 text:not(.sub){font-size:14.5px}

.hl.l1 circle,.hn.l1 circle,.opm-k.l1{--c:var(--st1)}.hl.l2 circle,.hn.l2 circle,.opm-k.l2{--c:var(--st4)}.hl.l3 circle,.hn.l3 circle,.opm-k.l3{--c:var(--accent)}.hl.l4 circle,.hn.l4 circle,.opm-k.l4{--c:var(--st3)}.hl.l5 circle,.hn.l5 circle,.opm-k.l5{--c:var(--st6)}
.hl circle{fill:var(--c)}
.hv line{stroke:#b9b6ad;stroke-width:1.2}.hv path{fill:none;stroke:#b9b6ad;stroke-width:1.2}
.hv text{font:500 11px var(--sans);fill:var(--muted);text-anchor:end}
.hn{display:none}.hn circle{fill:var(--c);stroke:#fff;stroke-width:2.5}.hn text{font:700 13px var(--sans);fill:#fff;text-anchor:middle}
/* mobile key (tap to expand) */
.opm-key{display:none}.opm-pyr{display:none}
@media(max-width:640px){
  .opm-hero-svg .hl,.opm-hero-svg .hv{display:none}.opm-hero-svg .hn{display:inline}
  .opm-key{display:grid;gap:8px;margin-top:14px}
  .opm-k{background:var(--panel);border:1px solid var(--line,rgba(23,23,22,.1));border-radius:var(--r-md);overflow:hidden}
  .opm-key{display:none!important}
  .opm-head>*,.opm-hero{min-width:0}
  .opm-pyr{display:block;margin-top:4px;min-width:0;max-width:100%}
  .opm-pyr-svg{display:block;width:100%;height:300px;margin:0 auto;overflow:visible;touch-action:pan-y;transition:height .3s var(--ease)}
  .opm-pyr-hint{margin:2px 0 0;text-align:center;font:500 13px var(--sans);color:var(--faint);transition:opacity .4s var(--ease)}
  .opm-pyr-hint span{display:inline-block;animation:hintNudge 1.6s ease-in-out infinite}
  .opm-pyr.scrolled .opm-pyr-hint{opacity:0}
  @keyframes hintNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
  .opm-pyr:not(.scrolled) .pt.l2 .hn circle{animation:hintPulse 2s ease-in-out infinite}
  @keyframes hintPulse{0%,100%{stroke-width:2.5;stroke:#fff}50%{stroke-width:7;stroke:rgba(106,63,193,.25)}}
  .opm-pyr .pt{cursor:pointer;transform-box:fill-box;transform-origin:50% 60%;transition:transform .45s var(--ease),opacity .45s var(--ease),filter .45s var(--ease);opacity:.32;filter:grayscale(.75)}
  .opm-pyr .pt.on{transform:translateY(-8px) scale(1.09);opacity:1;filter:saturate(1.45) drop-shadow(0 8px 14px color-mix(in srgb,var(--c) 45%,transparent))}
  .opm-pyr .pt.l1{--c:var(--st1)}.opm-pyr .pt.l2{--c:var(--st4)}.opm-pyr .pt.l3{--c:var(--accent)}.opm-pyr .pt.l4{--c:var(--st3)}.opm-pyr .pt.l5{--c:var(--st6)}
  .opm-pyr .pt.on .hs-t{stroke:var(--c);stroke-width:2.4}
  .opm-pyr .pt.on .hn circle{r:13}
  .opm-pyr .hn{display:inline}.opm-pyr .pt.on .hn circle{stroke-width:3.5}
  .opm-pc-track{display:grid;gap:14px;margin-top:10px;padding-bottom:22vh}
  .opm-pc-track::-webkit-scrollbar{display:none}
  .opm-pc{min-width:0;opacity:0;transform:translateY(28px);transition:opacity .5s var(--ease),transform .6s var(--ease),box-shadow .3s;scroll-snap-align:start;box-sizing:border-box;background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--c);border-radius:var(--r-md);padding:14px 16px 16px}
  .opm-pc header{display:flex;align-items:center;gap:12px;margin-bottom:10px}
  .opm-pc h3{margin:0;font:700 18px/1.25 var(--sans);letter-spacing:-.01em}
  .opm-pc .opm-k-b{padding:0;font-size:15.5px!important}
  .opm-pc .opm-k-who li,.opm-pc .opm-k-list li{display:block}.opm-pc .opm-k-who b:after,.opm-pc .opm-k-list b:after{content:". "}
  .opm-pc .opm-k-who,.opm-pc .opm-k-list{gap:8px}
  .opm-pc.in{opacity:.5;transform:none}.opm-pc.in.on{opacity:1;box-shadow:var(--shadow-hover)}
  .opm-pc .opm-k-chips{flex-wrap:wrap;overflow:visible}
  .opm-pc.l1 .opm-k-chips span{border-color:color-mix(in srgb,var(--st1) 35%,transparent);color:var(--accent-ink);font-weight:600}
  .opm-pc.l1,.opm-pyr .l1{--c:var(--st1)}.opm-pc.l2{--c:var(--st4)}.opm-pc.l3{--c:var(--accent)}.opm-pc.l4{--c:var(--st3)}.opm-pc.l5{--c:var(--st6)}
  .opm-pc-verb{margin:14px 0 0;padding-top:10px;border-top:1px dashed var(--line2);font:500 14px var(--sans);color:var(--muted);display:flex;gap:6px}
  .opm-pc-verb span{color:var(--faint)}
  .opm-hero-svg{display:none}.opm-hero:before{display:none}.opm-key{margin-top:4px;gap:0}
  .opm-k-verb{display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 0;font:500 13px var(--sans);color:var(--muted)}
  .opm-k-verb span{font-size:15px;color:var(--faint)}
  .opm-k-b{font-size:16px!important;line-height:1.55!important}
  .opm-k summary{list-style:none;display:flex;align-items:center;gap:12px;padding:12px 14px;min-height:48px;cursor:pointer;font-size:16px}
  .opm-k summary::-webkit-details-marker{display:none}
  .opm-k summary b{flex:1}.opm-k.l1 summary b{font-size:17px}
  .opm-k summary .ph{transition:transform .2s var(--ease)}.opm-k[open] summary .ph{transform:rotate(180deg)}
  .opm-k-n{width:26px;height:26px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font:700 13px var(--sans);flex:none}
  .opm-k-b{padding:0 14px 14px;font-size:15px;line-height:1.5;color:var(--muted)}
  .opm-k-b p{margin:10px 0 0}.opm-k-b b{color:var(--text)}
  .opm-k-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .opm-k-chips span{flex:none;padding:7px 12px;border-radius:999px;background:var(--bg);border:1px solid rgba(23,23,22,.08);color:var(--text);font-size:14px;white-space:nowrap}
  .opm-k.l1 .opm-k-chips span{border-color:color-mix(in srgb,var(--st1) 35%,transparent);color:var(--accent-ink);font-weight:600}
  .opm-k-who,.opm-k-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
  .opm-k-who li,.opm-k-list li{display:grid;gap:2px;padding-left:14px;border-left:3px solid var(--c)}
  .opm-k-who li.m{--c:var(--text)}.opm-k-who li.e{--c:#8f8b80}.opm-k-who li.a{--c:var(--st4)}
}
/* stage colours on the flow */
.opm-stage:nth-child(1){--sc:var(--st1)}.opm-stage:nth-child(2){--sc:var(--st2)}.opm-stage:nth-child(3){--sc:var(--st3)}.opm-stage:nth-child(4){--sc:var(--st4)}.opm-stage:nth-child(5){--sc:var(--st5)}.opm-stage:nth-child(6){--sc:var(--st6)}
.opm-stage{border-top:4px solid var(--sc)}
.opm-st-ic{background:var(--sc)}
.opm-st-n{color:var(--sc)}
.opm-playing .opm-stage.on{box-shadow:0 0 0 2px var(--sc),var(--shadow-hover)}
.opm-playing .opm-stage.on .opm-st-ic{background:var(--sc)}
@media(prefers-reduced-motion:reduce){.opm-pc{transform:none!important;transition:none!important}.opm-hero-svg *,.opm-pyr-svg *{animation:none!important}.hpk{display:none}}
@media(max-width:1100px){.opm-head{grid-template-columns:1fr}.opm-hero{max-width:560px}.opm-pillars{grid-template-columns:1fr 1fr}}
/* Phone top bar: stack Operating model above Control tower */
@media(max-width:820px){
  .tower-link .lg{display:inline}
  .top-actions{flex-direction:column;align-items:stretch;gap:6px}
  .top-actions .tower-link{justify-content:flex-start;padding:7px 10px;font-size:13px;min-height:36px}
  .topbar{align-items:center;padding-top:10px;padding-bottom:10px}
  .opm-pillars{grid-template-columns:1fr 1fr}
}
/* compact top bar on phones after scrolling */
@media(max-width:640px){
  .top-compact .topbar{padding-top:8px;padding-bottom:8px;row-gap:0}
  .top-compact .chapters{display:none}
  .top-compact .brand{font-size:0;gap:0}
  .top-compact .top-actions{flex-direction:row;gap:6px}
  .top-compact .top-actions .tower-link{min-height:34px;padding:6px 10px}
}

/* pinned pyramid on phones (like the Maria stop header) */
@media(max-width:640px){
  .opm-pyr-svg{position:sticky;top:var(--toph,56px);z-index:3;background:var(--bg);box-shadow:0 10px 12px -12px rgba(23,23,22,.25);padding:4px 0 6px;box-sizing:content-box}
}
/* Control tower radar: pinned, scroll reveals its layers */
.rd-scrolly{position:relative;height:calc(var(--rd-steps,5) * 46vh + var(--rd-h,600px))}
.rd-scrolly .rd-main{position:sticky;top:calc(var(--toph,64px) + 10px)}
.rd-scrolly .rd-stage{max-width:min(880px,calc((100svh - var(--toph,64px) - 230px) * 1000 / 600))}
.rd-stepcap{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:6px 0 2px;min-height:48px}
.rd-stepcap .n{font:600 12px var(--mono,monospace);color:var(--accent-ink);background:var(--accent-soft);border-radius:999px;padding:3px 8px}
.rd-stepcap b{font-size:17px;letter-spacing:-.01em}
.rd-stepcap span:last-child{flex:1 0 100%;color:var(--muted);font-size:15px;line-height:1.45}
.rd-dots{display:flex;gap:6px;margin-left:auto}.rd-dots i{width:18px;height:4px;border-radius:2px;background:var(--line2);transition:background .3s}.rd-dots i.on{background:var(--accent)}
.tw-radar .rd-shield,.tw-radar .rd-shield-l,.tw-radar .rd-core,.tw-radar .rd-node,.tw-radar .rd-spoke,.tw-radar .rd-p{transition:opacity .5s var(--ease)}
.tw-radar[data-step="1"] :is(.rd-shield,.rd-shield-l,.rd-core,.rd-node.out,.rd-spoke.out,.rd-p.out),
.tw-radar[data-step="2"] :is(.rd-core,.rd-node.out,.rd-spoke.out,.rd-p.out),
.tw-radar[data-step="3"] :is(.rd-node.out,.rd-spoke.out,.rd-p.out){opacity:.08}
.tw-radar[data-step="1"] .rd-p.bl{opacity:0}
.tw-radar[data-step="2"] .rd-shield{stroke-width:4;filter:drop-shadow(0 0 10px rgba(42,120,214,.45))}
.tw-radar[data-step="3"] .rd-core circle{filter:drop-shadow(0 0 14px rgba(42,120,214,.6))}
@media(max-width:640px){
  .rd-scrolly{height:calc(var(--rd-steps,5) * 40vh + var(--rd-h,420px))}
  .rd-stepcap b{font-size:16px}.rd-stepcap span:last-child{font-size:14.5px}
}
/* layer 5 (infrastructure + models): gentle life to match the other layers */
.s-infra .hcloud{animation:cloudDrift 6s ease-in-out infinite}
@keyframes cloudDrift{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
.s-infra .pr.srv .t{animation:srvBlink 2.4s ease-in-out infinite}
.s-infra .pr.srv:nth-child(5) .t{animation-delay:.8s}.s-infra .pr.srv:nth-child(6) .t{animation-delay:1.6s}
@keyframes srvBlink{0%,100%{fill:#fff}45%{fill:#cfe2f8}}
.s-infra .chip rect{animation:chipGlow 3s ease-in-out infinite}
@keyframes chipGlow{0%,100%{stroke:#8f8b80}50%{stroke:var(--accent);fill:#e8f1fc}}
.s-infra .chip line{stroke-dasharray:3 2;animation:ilFlow 1.2s linear infinite}
/* layer 5: brighter icons */
.s-infra .pr.srv .l{fill:#8fb39a}.s-infra .pr.srv .r{fill:#6f9a7c}
.s-infra .hcloud{fill:#dcecfd;stroke:var(--accent);stroke-width:1.4}
.s-infra .chip rect{fill:#fff;stroke:var(--st6);stroke-width:1.6}.s-infra .chip line{stroke:var(--st6);stroke-width:1.5}
@keyframes srvBlink{0%,100%{fill:#fff}45%{fill:#c9f0cf}}
@keyframes chipGlow{0%,100%{stroke:var(--st6)}50%{stroke:#3fbf4a;fill:#eafbe9}}
/* landing: three doors */
.s-doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:8px 0 18px;max-width:980px}
.s-door{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--text);text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.s-door:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:var(--accent)}
.s-door:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.s-door-art{width:64px;height:52px;overflow:visible}
.s-door-t{display:grid;gap:3px;min-width:0}.s-door-t b{font-size:17px;letter-spacing:-.01em}.s-door-t small{font-size:14px;line-height:1.4;color:var(--muted)}
.s-door>.ph{color:var(--accent);font-size:20px;transition:transform .25s var(--ease)}.s-door:hover>.ph{transform:translateX(3px)}
.s-door-sweep{transform-origin:40px 32px;animation:doorSweep 4s linear infinite}
@keyframes doorSweep{to{transform:rotate(360deg)}}
.s-hero .s-scroll{display:inline-flex;gap:8px;align-items:center}
@media(max-width:900px){.s-doors{grid-template-columns:1fr;gap:10px}.s-door{padding:12px 14px}.s-door-art{width:52px;height:42px}}
@media(prefers-reduced-motion:reduce){.s-door-sweep{animation:none}.s-door,.s-door>.ph{transition:none}}
/* a11y: keep small feed times readable; hide (not dim) radar label until its step */
.rd-ev time{color:var(--muted)}
.tw-radar[data-step="1"] .rd-shield-l{opacity:0!important}
/* ===== De-box pass: fewer boxes inside boxes ===== */
/* value lines (operating model pillars, tower principles): one light row, no cards */
.opm-pillars,.tw-principles{display:flex;flex-wrap:wrap;gap:8px 10px;grid-template-columns:none}
.tw-p{background:none;box-shadow:none;padding:8px 14px 8px 10px;border-radius:999px;border:1px solid var(--line2);gap:8px}
.tw-p .ph{font-size:20px}.tw-p b{font-size:15px}.tw-p small{display:none}
.tw-p.static{border-color:transparent;padding-left:0}
.tw-p:hover{transform:none;box-shadow:none;border-color:var(--accent)}.tw-p.static:hover{border-color:transparent}
/* operating model sections sit on the page, not in panels (the interactive flow keeps its panel) */
.opm-towers,.opm-layers-sec,.opm-col{background:none;box-shadow:none;padding:0;border-radius:0}
.opm-towers,.opm-layers-sec,.opm-out{padding-top:24px;border-top:1px solid var(--line);margin-bottom:32px}
.opm-col{margin-bottom:0}
/* planned towers: small and quiet next to the live one */
.opm-tower-grid{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));align-items:start}
.opm-tower:not(.live){min-height:0;padding:12px 14px;gap:6px;border-width:1px}
.opm-tower:not(.live) small{display:none}
.opm-tower:not(.live) .opm-tw-txt b{font-size:14px}
@media(max-width:1100px){.opm-tower-grid{grid-template-columns:1fr 1fr}.opm-tower.live{grid-column:1/-1}}
/* layer list: rows with dividers instead of five grey cards */
.opm-layer{background:none!important;border-radius:0;border-bottom:1px solid var(--line)}
.opm-layer.lit{box-shadow:inset 3px 0 0 var(--accent)}
/* control tower: broken vs fixes as two clean lists */
.tw-col{background:none;box-shadow:none;padding:0}
.tw-fix{padding-top:24px;border-top:1px solid var(--line)}
.tw-item{background:none;border-radius:12px;border-bottom:1px solid var(--line)}
/* radar scroll story: shorter scroll per step */
.rd-scrolly{height:calc(var(--rd-steps,5) * 34vh + var(--rd-h,600px))}
@media(max-width:640px){.rd-scrolly{height:calc(var(--rd-steps,5) * 32vh + var(--rd-h,420px))}}
/* landing closing doors */
.s-cta .s-doors{margin-top:18px}
/* ===== Field guide: one scrolling page ===== */
.home{display:none!important}
.g-head,.g-toc{display:none}
.at-guide .g-head{display:block;grid-column:1/-1;margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.g-head h1{font-size:clamp(34px,5vw,56px);line-height:1.04;letter-spacing:-.03em;margin:6px 0 10px}
.g-head h1 em{font-style:normal;color:var(--accent)}
.g-head .lede{max-width:56ch;margin-bottom:18px}
.g-print{display:inline-flex;align-items:center;gap:8px}
.at-guide .mod-bar,.at-guide .pager{display:none!important}
.at-guide .module,.at-guide .module.current{display:block;animation:none;max-width:860px;grid-column:2;padding:8px 0 48px;margin-bottom:40px;border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--toph,64px) + 12px)}
.at-guide .module .step{display:block;animation:none;margin-bottom:36px;scroll-margin-top:calc(var(--toph,64px) + 12px)}
.at-guide .module .step:not(.current)>*{opacity:0}
.at-guide main{display:grid;grid-template-columns:230px minmax(0,1fr);column-gap:56px;align-items:start;padding-bottom:120px}
.at-guide .g-toc{display:block;grid-column:1;grid-row:2/span 30;position:sticky;top:calc(var(--toph,64px) + 20px);align-self:start;max-height:calc(100vh - var(--toph,64px) - 40px);overflow:auto}
.g-toc-btn{display:none}
.g-toc-h{font:600 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.g-toc-ch{font:600 13px var(--sans);color:var(--text);margin:16px 0 6px}
.g-toc ol{list-style:none;margin:0;padding:0 0 0 2px;border-left:2px solid var(--line)}
.g-toc a{display:block;padding:6px 10px;margin-left:-2px;border-left:2px solid transparent;color:var(--muted);text-decoration:none;font-size:14.5px;line-height:1.35}
.g-toc a:hover{color:var(--text)}
.g-toc a.on{color:var(--accent-ink);border-left-color:var(--accent);font-weight:600}
.g-toc .g-print{margin-top:20px;width:100%;justify-content:center}
/* worked examples replace quiz questions */
.scn.ex .scn-a{display:flex;gap:10px;align-items:flex-start;margin:10px 0 0;color:var(--muted);line-height:1.5}
.scn.ex .scn-a .ph{color:var(--green,#2f8a32);font-size:22px;flex:none;margin-top:1px}
.scn.ex .scn-a b{color:var(--text)}
.g-done{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.g-done p{margin:0;font-size:17px}
@media(max-width:1100px){
  .at-guide main{display:block}
  .at-guide .g-toc{position:sticky;top:var(--toph,56px);z-index:15;max-height:none;overflow:visible;margin:0 -20px 18px;padding:8px 20px;background:rgba(249,249,247,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .g-toc-btn{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:8px 14px;border-radius:999px;border:1px solid var(--line2);background:var(--panel);font:600 15px var(--sans);color:var(--text);cursor:pointer}
  .g-toc-btn .ph{transition:transform .25s var(--ease)}.g-toc.open .g-toc-btn .ph{transform:rotate(180deg)}
  .g-toc-now{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .g-toc-list{display:none;max-height:65vh;overflow:auto;padding:6px 4px 12px}
  .g-toc.open .g-toc-list{display:block}
  .g-toc-h{display:none}
}
@media(prefers-reduced-motion:reduce){.at-guide .module .step:not(.current)>*{opacity:1}}
/* ===== Print / PDF: the whole guide, one topic per page ===== */
@media print{
  @page{margin:16mm 14mm}
  body{background:#fff!important}
  .topbar,.story,.opm,.tower,.g-toc,.pager,.mod-bar,.skip-link,.g-print,.g-done .btn,.nh-ctrl,.nh-sound,.nh-auto,.nh-next,.sorter-reset,.trace-ctrl,#trace-play,.cvf-range,video{display:none!important}
  main{display:block!important;padding:0!important;overflow:visible!important}
  .g-head{display:block!important;border:0}
  .module,.module.current{display:block!important;max-width:none!important;border:0!important;border-top:1px solid #ddd!important;padding:14px 0 0!important;margin:0 0 18px!important}
  .module[data-chapter]:is(#start,#journey,#clouds,#measure){break-before:page}
  .module .step{display:block!important;margin-bottom:14px!important}
  figure,.illus,.scn,table,.flips,.rules li,details{break-inside:avoid}
  .illus svg{max-height:190px}
  .flip{min-height:0!important;padding:10px 12px!important}.flip-front small{display:none!important}.flip-back{opacity:1!important;inset:auto!important;font-size:13px!important}
  details>summary .caret{display:none}
  h1{font-size:28px!important;line-height:1.1!important}
  .module .step>*{opacity:1!important;animation:none!important;transform:none!important}
  .illus *,.il-pop,.il-draw,.il-grow{animation:none!important;opacity:1!important;stroke-dashoffset:0!important;transform:none}
  .flip{transform:none!important}.flip-back{position:static!important;transform:none!important;display:block!important;margin-top:6px}
  *{box-shadow:none!important;text-shadow:none!important}
  a{color:inherit;text-decoration:none}
}
/* phones: radar detail opens below the radar (card grows) instead of covering labels */
@media(max-width:640px){
  .rd-tip{position:static;left:auto;bottom:auto;transform:none;margin:0 auto;max-height:0;padding:0 14px;overflow:hidden;transition:max-height .3s var(--ease),opacity .25s,padding .3s,margin .3s}
  .rd-tip.on{transform:none;max-height:140px;padding:10px 14px;margin:10px auto 0}
  .rd-nodes{inset:0 0 auto 0;aspect-ratio:1000/600}
  .rd-tip.on{margin-top:26px}
}
.s-door-dl{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:6px 2px;border:0;background:none;color:var(--accent-ink);font:600 15px var(--sans);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
/* ===== Home story: shift → operating model → control tower → Maria ===== */
.s-captions-tall{min-height:6.4em}
.s-why{display:block;margin-top:10px;font-size:16px;line-height:1.5;color:var(--muted);max-width:46ch}
.s-why b{color:var(--accent-ink);font-weight:600}
.s-more{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font:600 16px var(--sans);color:var(--accent-ink);text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px}
.s-more:hover .ph{transform:translateX(3px)}.s-more .ph{transition:transform .25s var(--ease)}
/* the shift timeline */
.s-eras{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;position:relative}
.s-eras:before{content:"";position:absolute;left:12%;right:12%;top:38px;height:2px;background:var(--line2)}
.s-era{position:relative;display:grid;justify-items:center;text-align:center;gap:6px;opacity:.35;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.s-era span{width:76px;height:76px;border-radius:22px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line2);font-size:34px;color:var(--muted);transition:background .4s,color .4s,border-color .4s}
.s-era b{font-size:16px}.s-era small{font-size:13.5px;color:var(--muted);max-width:16ch}
.s-era.on{opacity:1;transform:none}.s-era.on span{color:var(--accent);border-color:var(--accent)}
.s-era.now.on span{background:var(--accent);color:#fff;box-shadow:0 10px 26px rgba(36,112,204,.35)}
.s-shift.landed .s-era.now span{animation:eraPulse 1.8s ease-in-out infinite}
@keyframes eraPulse{0%,100%{box-shadow:0 10px 26px rgba(36,112,204,.35)}50%{box-shadow:0 10px 36px rgba(36,112,204,.6)}}
/* operating model summary: the real five-layer graphic, one layer lit per beat */
.s-opm-art{min-width:0}
.s-opm-svg{display:block;width:100%;height:auto;max-height:calc(100svh - var(--top) - 80px);overflow:visible}
.s-opm-svg .hs,.s-opm-svg .hl{opacity:.22;filter:grayscale(.7);transition:opacity .5s var(--ease),filter .5s var(--ease)}
.s-opm-svg .hs.past,.s-opm-svg .hl.past{opacity:.55;filter:grayscale(.3)}
.s-opm-svg .hs.on,.s-opm-svg .hl.on{opacity:1;filter:none}
.s-opm-svg .hs.on{filter:drop-shadow(0 10px 18px rgba(36,112,204,.25))}
.s-opm-svg .hn{display:none}
/* control tower example */
.s-ct-art{display:block;width:100%;height:auto;max-height:calc(100svh - var(--top) - 80px);overflow:visible}
.ct-ring{fill:none;stroke:#d9d8d1;stroke-dasharray:2 5}
.ct-shield{fill:rgba(36,112,204,.06);stroke:var(--accent);stroke-width:1.5;stroke-dasharray:6 5;transition:stroke-width .4s,filter .4s}
.ct-shield-l{font:600 12px var(--sans);fill:var(--accent-ink);opacity:.35;transition:opacity .4s}
.ct-core circle{fill:var(--text)}.ct-core text{font:600 11px var(--sans);fill:#fff}
.ct-n circle,.ct-n rect{fill:var(--panel);stroke:#c3c2b7;stroke-width:1.5;transition:fill .4s,stroke .4s}
.ct-n text{font:600 12px var(--sans);fill:var(--text)}
.ct-n.ans text{font-size:11.5px;fill:#fff}
.ct-p{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s var(--ease)}
.ct-block{opacity:0;transition:opacity .4s}.ct-block circle{fill:#fbeceb;stroke:#b42f2f}.ct-block path{stroke:#b42f2f;stroke-width:2;stroke-linecap:round}.ct-block text{font:500 11px var(--sans);fill:#8f2626}
.ct-n.ans{opacity:0;transition:opacity .5s}.ct-n.ans rect{fill:var(--accent);stroke:var(--accent)}
.s-ct-art.b1 .p-ask{stroke-dashoffset:0}.s-ct-art.b1 .mgr circle{fill:var(--accent-soft);stroke:var(--accent)}
.s-ct-art.b2 .p-get{stroke-dashoffset:0}.s-ct-art.b2 .core-hr circle{fill:var(--accent-soft);stroke:var(--accent)}.s-ct-art.b2 .ct-block{opacity:1}
.s-ct-art.b3 .ct-shield{stroke-width:3.5;filter:drop-shadow(0 0 10px rgba(36,112,204,.45))}.s-ct-art.b3 .ct-shield-l{opacity:1}
.s-ct-art.b4 .p-out{stroke-dashoffset:0}.s-ct-art.b4 .ans{opacity:1}
/* closing field guide call */
.s-cta-sub{font-size:19px;color:var(--muted);max-width:52ch;margin:0 0 22px}
.s-cta-actions{display:flex;flex-wrap:wrap;gap:12px}
.story.static .s-era{opacity:1;transform:none}
@media(max-width:820px){
  .s-eras{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .s-eras:before{top:26px}
  .s-era span{width:52px;height:52px;border-radius:16px;font-size:24px}
  .s-era b{font-size:13px}.s-era small{display:none}
  .s-opm-svg{max-height:40svh}.s-ct-art{max-height:36svh}
  .s-why{font-size:15px}
  .s-captions-tall{min-height:7.6em}
}
@media(max-width:640px){.s-opm-svg .hl,.s-opm-svg .hv{display:none}.s-opm-svg .hn{display:inline}}
@media(prefers-reduced-motion:reduce){.s-shift.landed .s-era.now span{animation:none}}
.s-eras{align-items:start}
.s-ct-art text{paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
.ct-core text,.ct-n.ans text{stroke:none}
/* ===== Premium topic layout (sample: Start here, Protecting people data) ===== */
.t-topic{--navy:#0a1424;--glow:#5fb0ff}
.t-hero{position:relative;overflow:hidden;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:clamp(20px,4vw,48px);min-height:min(66vh,600px);padding:clamp(28px,5vw,60px);border-radius:28px;color:#fff;
  background:radial-gradient(90% 120% at 85% 10%,#1d4e8f 0%,rgba(29,78,143,0) 60%),radial-gradient(60% 80% at 0% 100%,#123460 0%,rgba(18,52,96,0) 70%),var(--navy)}
.t-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:36px 36px;mask-image:radial-gradient(80% 80% at 70% 40%,#000,transparent);pointer-events:none}
.t-hero-copy{position:relative;z-index:1}
.t-kicker{display:flex;align-items:center;gap:12px;font:500 13px var(--mono,monospace);letter-spacing:.12em;text-transform:uppercase;color:#9cc8ff;margin:0 0 18px}
.t-kicker span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(156,200,255,.5);color:#fff;letter-spacing:0}
.t-hero h1{color:#fff;font-size:clamp(34px,4.6vw,60px);line-height:1.02;letter-spacing:-.035em;margin:0 0 16px}
.t-hero h1 em{font-style:normal;color:#8cc4ff}
.t-lede{font-size:clamp(17px,1.6vw,20px);line-height:1.5;color:rgba(255,255,255,.78);max-width:40ch;margin:0}
.t-scene{position:relative;z-index:1;width:100%;height:auto;overflow:visible}
.t-path{fill:none;stroke:rgba(124,194,255,.45);stroke-width:2;stroke-dasharray:4 6;animation:ilFlow 1.6s linear infinite}
.t-path.faint{stroke:rgba(124,194,255,.25)}
.t-node rect{fill:rgba(255,255,255,.08);stroke:rgba(156,200,255,.6);stroke-width:1.4}
.t-node.human rect{fill:#fff;stroke:#fff}
.t-node text,.t-chip text{font:600 13px var(--sans);fill:#dbe9ff;text-anchor:middle}
.t-ic{fill:none;stroke:#cfe4ff;stroke-width:2;stroke-linecap:round}.t-ic.dark{stroke:var(--navy)}
.t-glow{opacity:0;animation:tGlow 4s ease-in-out infinite;animation-delay:var(--d)}
@keyframes tGlow{0%,100%{opacity:0}12%{opacity:1}35%{opacity:0}}
.t-pk{fill:#fff;filter:drop-shadow(0 0 6px #7cc2ff)}.t-pk.red{fill:#ff8a80;filter:drop-shadow(0 0 6px #ff6b60)}
.t-card rect:first-child{fill:rgba(255,255,255,.06);stroke:rgba(156,200,255,.35)}
.t-card-h{font:600 12px var(--sans);fill:#9cc8ff;letter-spacing:.06em;text-transform:uppercase}
.t-field rect{fill:rgba(255,255,255,.08)}.t-field text{font:500 12px var(--sans);fill:#e6f0ff}
.t-field.red rect{fill:rgba(255,107,96,.16);stroke:rgba(255,138,128,.5);animation:tRed 3s ease-in-out infinite}
@keyframes tRed{0%,60%,100%{opacity:1}75%{opacity:.35}}
.t-gate path{fill:rgba(124,194,255,.15);stroke:#7cc2ff;stroke-width:1.6;stroke-linejoin:round}
.t-fence{fill:rgba(124,194,255,.06);stroke:#7cc2ff;stroke-width:1.5;stroke-dasharray:6 5}
.t-chip rect:first-of-type{fill:#2470cc;stroke:#7cc2ff}
.t-cap{font:500 12px var(--sans);fill:rgba(219,233,255,.75);text-anchor:middle}
/* idea blocks: one idea, two lines, one visual */
.t-idea{display:grid!important;grid-template-columns:76px minmax(0,1fr);gap:8px 20px;padding:clamp(36px,6vh,64px) 0 8px;margin:0!important}
.t-n{font:300 44px/1 var(--sans);letter-spacing:-.04em;color:var(--accent);padding-top:4px}
.t-body h2{font-size:clamp(24px,2.6vw,34px);letter-spacing:-.025em;line-height:1.1;margin:0 0 10px}
.t-body>p{font-size:18px;line-height:1.55;color:var(--muted);max-width:56ch;margin:0 0 22px}
.t-flow{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;position:relative}
.t-flow:before{content:"";position:absolute;left:12%;right:12%;top:27px;height:2px;background:linear-gradient(90deg,var(--line2),var(--accent))}
.t-flow li{position:relative;display:grid;justify-items:center;text-align:center;gap:4px}
.t-flow .ph{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:26px;background:var(--panel);border:1px solid var(--line2);color:var(--accent)}
.t-flow .human .ph{background:var(--text);color:#fff;border-color:var(--text)}
.t-flow b{font-size:15px;margin-top:6px}.t-flow span{font-size:13.5px;color:var(--muted)}
.t-deeper{margin-top:20px;max-width:60ch}
.t-deeper summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;font:600 15px var(--sans);color:var(--accent-ink);padding:6px 0}
.t-deeper summary::-webkit-details-marker{display:none}
.t-deeper summary .ph{transition:transform .25s var(--ease)}.t-deeper[open] summary .ph{transform:rotate(180deg)}
.t-deeper p{margin:8px 0 0;font-size:16px;line-height:1.6;color:var(--muted);padding-left:14px;border-left:2px solid var(--accent)}
.t-body .words h2{display:none}
.t-body .scn.ex{background:none;border:0;padding:0;box-shadow:none}
.t-body .fence,.t-body .viz{margin-top:18px}
/* what you do */
.t-do{margin:48px 0 0!important;padding:24px clamp(20px,3vw,32px);border-radius:20px;background:var(--navy,#0a1424);color:#fff}
.t-do-h{font:500 12px var(--mono,monospace);letter-spacing:.14em;text-transform:uppercase;color:#9cc8ff;margin:0 0 12px}
.t-do ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:d}
.t-do li{counter-increment:d;font-size:16px;line-height:1.45;color:rgba(255,255,255,.82);padding-top:12px;border-top:1px solid rgba(156,200,255,.3)}
.t-do li:before{content:counter(d,decimal-leading-zero);display:block;font:500 12px var(--mono,monospace);color:#7cc2ff;margin-bottom:6px}
.t-do b{color:#fff}
.at-guide .t-topic .step:not(.current)>*{opacity:1}
.at-guide .t-topic .t-idea:not(.current) .t-body{opacity:0;transform:translateY(18px)}
.t-idea .t-body{transition:opacity .6s var(--ease),transform .7s var(--ease)}
@media(max-width:820px){
  .t-hero{grid-template-columns:1fr;min-height:0;padding:28px 22px;border-radius:22px}
  .t-idea{grid-template-columns:1fr}.t-n{font-size:34px}
  .t-flow{grid-template-columns:repeat(4,minmax(0,1fr))}.t-flow .ph{width:46px;height:46px;font-size:22px}.t-flow:before{top:22px}.t-flow span{display:none}.t-flow b{font-size:13px}
  .t-do ol{grid-template-columns:1fr;gap:12px}
}
@media(prefers-reduced-motion:reduce){.t-glow,.t-path,.t-field.red rect{animation:none}.t-pk{display:none}.at-guide .t-topic .t-idea .t-body{opacity:1;transform:none}}
@media print{.t-hero,.t-do{-webkit-print-color-adjust:exact;print-color-adjust:exact;break-inside:avoid}.t-idea .t-body{opacity:1!important;transform:none!important}.t-deeper p{display:block}}
.t-hero{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.t-hero h1{font-size:clamp(32px,3.6vw,50px)}
@media(min-width:1101px){.t-hero{padding:48px 44px}}
/* hero: headline on top, scene full width underneath (reads well in the guide's column) */
.t-hero{grid-template-columns:1fr!important;min-height:0;gap:8px}
.t-hero h1{font-size:clamp(32px,4.2vw,54px);max-width:16ch}
.t-scene{max-height:260px;margin:0 auto}
@media(max-width:820px){.t-scene{max-height:none}}
.s-era{opacity:.72}.s-era.on{opacity:1}
.s-era small{color:var(--text)}.s-era:not(.on) small{color:var(--muted)}.s-era{opacity:.85}
/* ===== Phones: field guide one topic per screen ===== */
.g-nav{display:none}
@media(max-width:820px){
  .g-one .module:not(.g-show),.g-index .module{display:none!important}
  .g-one .g-head{display:none!important}
  .g-one .module.g-show{border-bottom:0;padding-bottom:96px;margin-bottom:0}
  .g-one .g-nav{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:25;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(249,249,247,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  .g-nav-b{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);background:var(--panel);color:var(--text);text-decoration:none;font:600 15px var(--sans)}
  .g-nav-b:first-child .ph{transform:rotate(180deg)}
  .g-nav-b.next{background:var(--text);color:#fff;border-color:var(--text)}
  .g-nav-pos{display:grid;text-align:center;font-size:12.5px;line-height:1.3;color:var(--muted);min-width:0}
  .g-nav-pos b{font:600 13px var(--sans);color:var(--text)}
  /* topic list (index) */
  .g-index .g-toc{position:static;margin:0;padding:0;background:none;border:0;backdrop-filter:none}
  .g-index .g-toc-btn{display:none}
  .g-index .g-toc-list{display:block;max-height:none;padding:0}
  .g-index .g-toc ol{border-left:0;display:grid;gap:8px}
  .g-index .g-toc-ch{font:600 12px var(--mono,monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);margin:22px 0 10px}
  .g-index .g-toc a{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:12px 16px;margin:0;border:1px solid var(--line);border-radius:16px;background:var(--panel);font:600 16px var(--sans);color:var(--text)}
  .g-index .g-toc a:after{content:"";width:8px;height:8px;border-right:2px solid var(--accent);border-top:2px solid var(--accent);transform:rotate(45deg);flex:none;margin-left:12px}
  .g-index .g-toc a.on{border-left:1px solid var(--line)}
  .g-index .g-toc .g-print{margin-top:24px}
}
/* ===== Section transitions + cleaner phone layout (control tower, operating model) ===== */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.sec-pill,.tw-fix-tabs{display:none}
.seg{gap:4px;padding:4px;border-radius:999px;background:var(--panel2);width:max-content;max-width:100%}
.seg button{border:0;background:none;padding:9px 16px;border-radius:999px;font:600 14.5px var(--sans);color:var(--muted);cursor:pointer;min-height:40px}
.seg button.on{background:var(--panel);color:var(--text);box-shadow:0 1px 3px rgba(23,23,22,.12)}
@media print{.rv{opacity:1!important;transform:none!important}}
@media(max-width:820px){
  .at-model .sec-pill,.at-tower .sec-pill{display:block;position:fixed;left:50%;top:calc(var(--toph,56px) + 8px);z-index:24;transform:translate(-50%,-6px);margin:0;padding:6px 14px;border-radius:999px;background:rgba(10,20,36,.88);color:#fff;font:600 13px var(--sans);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;backdrop-filter:blur(8px)}
  .at-model .sec-pill.on,.at-tower .sec-pill.on{opacity:1;transform:translate(-50%,0)}
  /* people picker: wrapping pills, nothing cut off */
  .tw-personas{display:flex!important;flex-wrap:wrap;gap:8px;overflow:visible;padding:0}
  .tw-persona{flex:none;padding:8px 14px 8px 10px;border-radius:999px;box-shadow:none;border:1px solid var(--line2);background:var(--panel);gap:8px}
  .tw-persona .ph{font-size:18px}.tw-persona b{font-size:14.5px}.tw-persona small{display:none}
  .tw-persona.on{background:var(--text);border-color:var(--text);color:#fff}.tw-persona.on .ph{color:#fff}
  /* journey: a clean timeline; Today/Future crossfade in place */
  .tw-compare{background:none;box-shadow:none;padding:0;border-radius:0}
  .cvf{overflow:visible;border-radius:0}
  .cvf-layer{position:relative;padding:4px 0!important;background:none!important;gap:0;display:block}
  .cvf-layer:before{content:"";position:absolute;left:19px;top:24px;bottom:24px;width:2px;background:var(--line2)}
  .cvf-layer.fut{clip-path:none!important;opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
  .cvf-layer.cur{transition:opacity .45s var(--ease)}
  .cvf.is-fut .cvf-layer.fut{opacity:1;pointer-events:auto}.cvf.is-fut .cvf-layer.cur{opacity:0}
  .cvf-card{position:relative;display:block!important;min-height:0!important;padding:10px 0 14px 56px;background:none;box-shadow:none;border-radius:0}
  .cvf-card .cvf-ic{position:absolute;left:0;top:6px;width:40px;height:40px;border-radius:50%;margin:0;border:2px solid currentColor;background:var(--bg)!important;font-size:19px}
  .cvf-card h3{font-size:16px;margin:2px 0 2px}.cvf-card p{font-size:15px}
  .cvf-handle,.cvf-tag,.cvf-range{display:none!important}
  /* broken vs fixes: one list at a time */
  .tw-fix-tabs{display:flex;margin:8px 0 12px}
  .tw-fix{display:block;border-top:0;padding-top:0}
  .tw-fix:not(.show-fix) .tw-col.enable,.tw-fix.show-fix .tw-col.broken{display:none}
  .tw-fix .tw-col h2{display:none}
  .tw-links{display:none}
  /* how it's built: same timeline */
  .tw-pipe{position:relative;display:block}
  .tw-pipe:before{content:"";position:absolute;left:21px;top:24px;bottom:24px;width:2px;background:var(--line2)}
  .tw-stage{position:relative;padding:8px 0 14px 60px!important;background:none!important;box-shadow:none!important;border-radius:0;min-height:0}
  .tw-stage .tw-stage-ic{position:absolute;left:0;top:6px;margin:0}
  .tw-arrow{display:none!important}
  /* operating model: one request as a timeline, towers as rows */
  .opm-stages{grid-template-columns:1fr!important;gap:0}
  .opm-stage{display:grid;grid-template-columns:44px 1fr;column-gap:12px;align-items:start;padding:10px 0!important;border:0!important;border-radius:0;background:none;box-shadow:none!important}
  .opm-stage>.opm-st-ic{grid-row:1/5;width:40px;height:40px}
  .opm-stage .opm-st-n{display:none}
  .opm-stage h3,.opm-stage p,.opm-stage .opm-agent{grid-column:2;margin:0}
  .opm-stage .opm-agent{justify-self:start;margin-top:6px}
  .opm-stage:after{display:none!important}
  .opm-playing .opm-stage.on{box-shadow:none!important;background:var(--accent-soft)!important;border-radius:14px}
  .opm-tower:not(.live){flex-direction:row;align-items:center}
}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
.s-ex{font-size:16px;color:var(--muted);margin:-8px 0 14px;max-width:44ch}
/* flatten the last two panels: the interactive parts sit on the page like everything else */
.opm-flow,.tw-arch{background:none!important;box-shadow:none!important;border-radius:0!important;padding:24px 0 0!important;border-top:1px solid var(--line)}
@media(max-width:480px){.brand{font-size:0;gap:0}}
.s-def{font-size:16px;line-height:1.5;color:var(--muted);max-width:46ch;margin:-6px 0 16px;padding-left:14px;border-left:3px solid var(--accent)}
.s-def b{color:var(--text)}
@media(max-width:820px){.s-def{font-size:15px;margin:-4px 0 12px}}
.s-def+.s-ex{margin-top:0}
/* bridge from the shift into the operating model */
.s-next{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font:600 16px var(--sans);color:var(--accent-ink);text-decoration:none;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.s-next .ph{animation:nextBob 1.6s ease-in-out infinite}
@keyframes nextBob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.s-shift.landed .s-next,.story.static .s-next{opacity:1;transform:none;pointer-events:auto}
@media(prefers-reduced-motion:reduce){.s-next .ph{animation:none}}
.s-shift .s-next{grid-column:1/-1;justify-self:center;margin-top:8px}
/* ===== Final polish (design-taste pass) ===== */
/* solid accent instead of gradient text on the topic headers */
.t-hero h1 em{background:none;-webkit-background-clip:initial;background-clip:initial;color:#8cc4ff}
/* calmer hero headline: weight and color carry hierarchy, not sheer size */
.s-title{font-size:clamp(2.8rem,6.4vw,5.6rem)}
/* no neon: tinted, low-spread emphasis only */
.s-era.now.on span{box-shadow:0 8px 20px -8px rgba(36,112,204,.45)}
.s-shift.landed .s-era.now span{animation:none}
.tw-radar[data-step="2"] .rd-shield{filter:none;stroke-width:3.5}
.tw-radar[data-step="3"] .rd-core circle{filter:none}
.s-ct-art.b3 .ct-shield{filter:none;stroke-width:3}
.opm-pyr .pt.on{filter:saturate(1.3) drop-shadow(0 8px 12px color-mix(in srgb,var(--c) 22%,transparent))}
.s-opm-svg .hs.on{filter:drop-shadow(0 8px 14px rgba(36,112,204,.14))}
/* doors: asymmetric weighting, the operating model leads */
@media(min-width:901px){.s-doors{grid-template-columns:1.3fr 1fr 1fr}}
/* tactile press feedback everywhere you can tap */
:is(.s-door,.seg button,.tw-persona,.g-nav-b,.pill,.opm-ly-head,.g-toc a,.s-more,.s-next,.s-door-dl,.g-toc-btn,.tw-toggle button,.rd-node,.opm-tower.live):active{transform:scale(.98)}
:is(.s-door,.seg button,.tw-persona,.g-nav-b,.pill,.g-toc a,.g-toc-btn){transition:transform .18s var(--ease),background .25s,color .25s,border-color .25s,box-shadow .25s}
.s-door-dl{margin-right:28px}
/* Maria's board gets the whole phone screen: topic bars step aside while it is in view */
@media(max-width:820px){
  .g-nav{transition:transform .35s var(--ease)}
  .on-board .g-nav{transform:translateY(110%)}
  .on-board .g-toc{visibility:hidden}
}
/* "Who does what": the tasks sort themselves */
.sorter.ref .pool{border-style:dashed;min-height:56px;transition:opacity .4s var(--ease)}
.sorter.ref.complete .pool{display:flex;opacity:.0;height:0;min-height:0;padding:0;margin:0;border:0;overflow:hidden}
.sorter.ref .chip-drag{cursor:default;background:var(--panel);color:var(--text);border-color:var(--line2)}
.sorter.ref .chip-drag.placed{background:var(--panel);color:var(--text);border-color:var(--line2)}
.sorter.ref .bucket.yes{animation:bucketLand .6s var(--ease)}
@keyframes bucketLand{0%{box-shadow:0 0 0 0 rgba(36,112,204,0)}35%{box-shadow:0 0 0 3px rgba(36,112,204,.35)}100%{box-shadow:0 0 0 0 rgba(36,112,204,0)}}
.sorter.ref .sorter-reset{display:none;align-items:center;gap:8px;margin-top:12px}
.sorter.ref.complete .sorter-reset{display:inline-flex}
/* phones: the moving network sits up behind the headline, not hidden under the doors */
@media(max-width:820px){.s-dots.net{inset:2% -18% auto auto;width:92%;height:44%;opacity:.55}}
/* hero network: full-bleed behind all the hero text, stronger presence */
.s-dots.net{inset:0!important;width:100%!important;height:100%!important;opacity:.85!important;mask-image:radial-gradient(75% 70% at 60% 45%,#000 55%,transparent);-webkit-mask-image:radial-gradient(75% 70% at 60% 45%,#000 55%,transparent);transform-origin:60% 45%}
@media(max-width:820px){.s-dots.net{opacity:.7!important;mask-image:radial-gradient(90% 60% at 60% 40%,#000 50%,transparent);-webkit-mask-image:radial-gradient(90% 60% at 60% 40%,#000 50%,transparent)}}
/* hero network: softer so it never fights the headline */
.s-dots.net{opacity:.4!important}
@media(max-width:820px){.s-dots.net{opacity:.3!important}}
/* ===== Engine-room bands: Follow one request + How it is built ===== */
section.opm-flow,div.tw-arch{position:relative;overflow:hidden;color:#fff!important;border-radius:28px!important;border-top:0!important;padding:clamp(22px,4vw,44px)!important;margin:8px 0 36px;
  background:radial-gradient(70% 90% at 90% 0%,#1d4e8f 0%,rgba(29,78,143,0) 60%),radial-gradient(60% 80% at 0% 100%,#123460 0%,rgba(18,52,96,0) 70%),#0a1424!important}
section.opm-flow:before,div.tw-arch:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(90% 80% at 60% 30%,#000,transparent)}
section.opm-flow>*,div.tw-arch>*{position:relative}
section.opm-flow h2,div.tw-arch h2{color:#fff}
section.opm-flow .opm-flow-top p{color:rgba(255,255,255,.74)}
section.opm-flow .btn,div.tw-arch .btn{background:#fff;color:#0a1424;border-color:#fff;box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
section.opm-flow .btn .ph,div.tw-arch .btn .ph{color:#0a1424}
section.opm-flow .pill{background:rgba(255,255,255,.06);color:#e6f0ff;border-color:rgba(156,200,255,.3)}
section.opm-flow .pill.active{background:#fff;color:#0a1424;border-color:#fff}
/* glass steps */
section.opm-flow .opm-stage,div.tw-arch .tw-stage{background:rgba(255,255,255,.055)!important;border:1px solid rgba(156,200,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;color:#fff;backdrop-filter:blur(2px)}
section.opm-flow .opm-stage h3,div.tw-arch .tw-stage h3{color:#fff}
section.opm-flow .opm-stage p,div.tw-arch .tw-stage p{color:rgba(230,240,255,.72)}
section.opm-flow .opm-st-n{color:#9cc8ff}
section.opm-flow .opm-agent{background:rgba(124,194,255,.14);color:#cfe4ff}
div.tw-arch .tw-stage-ic{background:linear-gradient(160deg,#2a78d6,#163f7a);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
div.tw-arch .tw-learn{color:#8cc4ff}
div.tw-arch .tw-arrow{color:rgba(156,200,255,.5)}
/* reveal: steps rise in as the line reaches them */
section.opm-flow .opm-stage,div.tw-arch .tw-stage{opacity:.28;transform:translateY(14px);transition:opacity .6s var(--ease),transform .7s var(--ease),border-color .4s,background .4s}
section.opm-flow .opm-stage.lit,div.tw-arch .tw-stage.lit{opacity:1;transform:none}
section.opm-flow .opm-stage.lit .opm-st-ic,div.tw-arch .tw-stage.lit .tw-stage-ic{animation:engPop .6s var(--ease) both}
@keyframes engPop{0%{transform:scale(.6)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
section.opm-flow .opm-stage:hover,div.tw-arch .tw-stage:hover{border-color:rgba(124,194,255,.55)}
/* the line: draws with scroll, data pulses stream along it */
.eng-line{position:absolute;z-index:0;pointer-events:none;left:3%;right:3%;top:calc(var(--eng-top,64px));height:2px;background:rgba(124,194,255,.16);border-radius:2px}
.eng-line i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,#3d8bff,#7cc2ff);border-radius:inherit;transition:transform .25s linear}
.eng-line i:after{content:"";position:absolute;inset:-3px 0;background:repeating-linear-gradient(90deg,transparent 0 46px,rgba(255,255,255,.95) 46px 52px,transparent 52px 98px);background-size:98px 100%;animation:engFlow 1.6s linear infinite;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);border-radius:6px;filter:blur(.4px)}
@keyframes engFlow{to{background-position:98px 0}}
.opm-stages-wrap{--eng-top:96px}.tw-pipe-wrap{--eng-top:82px}
section.opm-flow .opm-stages,div.tw-arch .tw-pipe{position:relative;z-index:1}
/* playing: the token glows, captions read on navy */
section.opm-flow .opm-token,div.tw-arch .tw-token{box-shadow:0 0 0 6px rgba(124,194,255,.22),0 10px 24px -8px rgba(0,0,0,.6);z-index:2}
.opm-playing section.opm-flow .opm-stage.on,div.tw-arch.tw-playing .tw-stage.on,.tw-playing div.tw-arch .tw-stage.on{background:rgba(124,194,255,.16)!important;border-color:#7cc2ff;box-shadow:0 0 0 1px #7cc2ff,0 16px 34px -18px rgba(0,0,0,.8)!important}
section.opm-flow .opm-cap,div.tw-arch .tw-cap{color:#e6f0ff}
section.opm-flow .opm-cap b{color:#fff}
section.opm-flow .tw-prog,div.tw-arch .tw-prog{background:rgba(255,255,255,.12)}
section.opm-flow .tw-prog span,div.tw-arch .tw-prog span{background:linear-gradient(90deg,#3d8bff,#7cc2ff)}
@media(max-width:820px){
  section.opm-flow,div.tw-arch{border-radius:22px!important;margin:8px -4px 28px;padding:22px 18px!important}
  .eng-line{left:var(--eng-x,20px);right:auto;top:20px;bottom:20px;width:2px;height:auto}
  .eng-line i{transform-origin:50% 0;transform:scaleY(var(--p,0));background:linear-gradient(180deg,#3d8bff,#7cc2ff)}
  .eng-line i:after{inset:0 -3px;background:repeating-linear-gradient(180deg,transparent 0 46px,rgba(255,255,255,.95) 46px 52px,transparent 52px 98px);background-size:100% 98px;animation:engFlowV 1.6s linear infinite;mask-image:linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent)}
  @keyframes engFlowV{to{background-position:0 98px}}
  .opm-stages-wrap{--eng-x:20px}.tw-pipe-wrap{--eng-x:22px}
  div.tw-arch .tw-pipe:before{display:none}
  section.opm-flow .opm-stage,div.tw-arch .tw-stage{background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none}
  .opm-playing section.opm-flow .opm-stage.on,.tw-playing div.tw-arch .tw-stage.on{background:rgba(124,194,255,.14)!important;box-shadow:none!important;border-radius:14px}
  div.tw-arch .tw-arch-top{flex-wrap:wrap;gap:12px}
}
@media(prefers-reduced-motion:reduce){.eng-line i:after{animation:none}section.opm-flow .opm-stage,div.tw-arch .tw-stage{opacity:1;transform:none}}
@media print{section.opm-flow,div.tw-arch{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
/* ===== D3 motion graphics (fx.js) ===== */
.fx-on .opm-stages,.fx-on .tw-pipe,.fx-on .opm-token,.fx-on .tw-token,.fx-on .eng-line{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap;opacity:1!important}
.fx-on{padding-top:0!important}
.fx-host{position:relative;width:100%;margin:6px 0 4px}
.fx-svg{display:block;width:100%;height:auto;overflow:visible}
.fx-glow{fill:none;stroke-width:10;opacity:.35}
.fx-base{fill:none;stroke:rgba(156,200,255,.22);stroke-width:2;stroke-dasharray:3 7}
.fx-prog{fill:none;stroke-width:3.5;stroke-linecap:round}
.fx-p{fill:#cfe4ff}.fx-p.red{fill:#ff7b72}
.fx-node .fx-halo{fill:var(--c);opacity:.12;transform-box:fill-box;transform-origin:center;animation:fxBreath 3.2s ease-in-out infinite}
.fx-node .fx-ring{fill:none;stroke:var(--c);stroke-width:1.5;opacity:.6}
.fx-node .fx-core{fill:#0f1d33;stroke:var(--c);stroke-width:2;transition:fill .4s}
.fx-node.on .fx-core,.fx-node.past .fx-core{fill:var(--c)}
.fx-node.on .fx-halo{opacity:.35;animation-duration:1.4s}
.fx-node{transition:transform .4s var(--ease)}
.fx-ic{display:grid;place-items:center;width:24px;height:24px;font-size:20px;color:#fff;line-height:1}
.fx-lab{color:#fff;text-align:center;font:400 12.5px/1.35 var(--sans)}
.fx-lab b{display:block;font:600 14.5px/1.25 var(--sans);margin-bottom:3px}
.fx-lab span{display:block;color:rgba(230,240,255,.72)}
.fx-lab em{display:inline-block;margin-top:6px;font:600 11.5px var(--sans);font-style:normal;color:#cfe4ff;background:rgba(124,194,255,.14);padding:3px 8px;border-radius:999px}
.fx-lab.v{text-align:left;font-size:13.5px}.fx-lab.v b{font-size:16px}
.fx-node.on .fx-lab b{color:#9fd0ff}
.fx-orb-glow{fill:#7cc2ff;opacity:.35;filter:blur(4px)}
.fx-orb-core{fill:#fff}
.fx-orb-t{font:700 12px var(--sans);fill:#fff;letter-spacing:.02em}
.fx-burst{fill:none;stroke-width:2}
.fx-src{fill:#9cc8ff}.fx-src-l{fill:none;stroke:rgba(156,200,255,.35);stroke-width:1.2;stroke-dasharray:2 4;animation:ilFlow 1.4s linear infinite}
.fx-src-t{font:500 11.5px var(--sans);fill:rgba(230,240,255,.7)}
@keyframes fxBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
@media(prefers-reduced-motion:reduce){.fx-node .fx-halo{animation:none}}
@media print{.fx-host{display:none}.fx-on .opm-stages,.fx-on .tw-pipe{position:static!important;width:auto!important;height:auto!important;clip:auto!important;white-space:normal}}
/* fx: expanding stops + detail card */
.fx-host.v{position:relative;min-height:200px}
.fx-host.v .fx-svg{position:absolute;left:0;top:0;width:90px;overflow:visible}
.fx-rows{position:relative;margin-left:78px;display:grid;gap:6px;padding:14px 0 18px}
.fx-row{border-radius:16px;transition:background .4s var(--ease)}
.fx-row-h{display:block;width:100%;text-align:left;background:none;border:0;color:#fff;padding:8px 10px;cursor:pointer;font:inherit;border-radius:14px}
.fx-row-h b{display:block;font:600 16.5px/1.25 var(--sans)}
.fx-row-h span{display:block;color:rgba(230,240,255,.72);font-size:14.5px;line-height:1.45;margin-top:2px}
.fx-row-h em{display:inline-block;margin-top:8px;font:600 12px var(--sans);font-style:normal;color:#cfe4ff;background:rgba(124,194,255,.14);padding:4px 10px;border-radius:999px}
.fx-row.on{background:rgba(124,194,255,.1);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 60%,transparent)}
.fx-row.on .fx-row-h b{color:#9fd0ff}
.fx-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.fx-row.open .fx-more{grid-template-rows:1fr}
.fx-more-in{overflow:hidden;padding:0 10px;color:#e6f0ff}
.fx-row.open .fx-more-in{padding:2px 10px 14px}
.fx-more-in p,.fx-detail p{margin:0 0 10px;font-size:15.5px;line-height:1.55}
.fx-chips{display:flex;flex-wrap:wrap;gap:6px}
.fx-chips span{font:600 12px var(--sans);color:#cfe4ff;background:rgba(124,194,255,.14);border:1px solid rgba(124,194,255,.22);padding:4px 10px;border-radius:999px}

.fx-learn{display:inline-flex;align-items:center;gap:6px;color:#8cc4ff;font:600 14px var(--sans);text-decoration:none}
.fx-detail{margin:2px auto 0;max-width:760px;padding:16px 20px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(156,200,255,.18);border-left:3px solid var(--c,#7cc2ff);color:#e6f0ff;opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .5s var(--ease);min-height:0}
.fx-detail:empty{display:none}
.fx-detail.in{opacity:1;transform:none}
.fx-detail-k{font:600 12px var(--mono,monospace)!important;letter-spacing:.08em;text-transform:uppercase;color:#9cc8ff;margin:0 0 8px!important}
/* the old caption becomes screen-reader only while the graphic tells the story */
.opm-stages-wrap.fx-on+.opm-story .opm-cap,.tw-pipe-wrap.fx-on+.tw-story .tw-cap{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(prefers-reduced-motion:reduce){.fx-more,.fx-detail{transition:none}}
/* ===== Journey transform ===== */
.jx{display:none}
.tw-compare .cvf{display:none}
.jx{display:block;max-width:760px;margin:6px 0 0}
.jx-meter{position:sticky;top:calc(var(--toph,64px) + 52px);z-index:3;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:10px 16px;margin-bottom:14px;border-radius:999px;background:rgba(249,249,247,.92);backdrop-filter:blur(10px);border:1px solid var(--line)}
.jx-m{display:flex;align-items:baseline;gap:6px;font:500 14px var(--sans);color:var(--muted);white-space:nowrap}
.jx-m b{font:700 22px/1 var(--sans);color:var(--text);min-width:1ch;transition:color .4s}
.jx-bar{height:6px;border-radius:3px;background:#f1d6d4;overflow:hidden}
.jx-bar i{display:block;height:100%;background:linear-gradient(90deg,#3d8bff,#2470cc);border-radius:inherit;transition:width .5s var(--ease)}
.jx-state{font:600 12.5px var(--sans);color:var(--muted);white-space:nowrap}
.jx-list{list-style:none;margin:0;padding:0}
.jx-row{position:relative;display:grid;grid-template-columns:52px 1fr;column-gap:16px;min-height:96px;padding-bottom:6px}
.jx-ic{position:relative;z-index:1;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:22px;background:#fdf1f0;border:2px solid #b42f2f;color:#b42f2f;transition:background .5s var(--ease),border-color .5s,color .5s,box-shadow .5s,transform .5s var(--ease)}
.jx-ic .ph{grid-area:1/1;transition:opacity .4s,transform .5s var(--ease)}
.jx-ic .b{opacity:0;transform:scale(.4) rotate(-40deg)}
.jx-link{position:absolute;left:12px;top:48px;bottom:0;width:24px}
.jx-c{width:24px;height:100%;overflow:visible}
.jx-tangle{fill:none;stroke:#d98c86;stroke-width:2;stroke-dasharray:3 4;animation:ilFlow 2.4s linear infinite;transition:opacity .45s}
.jx-straight{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset .6s var(--ease) .1s}
.jx-wait{position:absolute;left:30px;top:50%;transform:translateY(-50%);font-size:15px;color:#b42f2f;opacity:.8;transition:opacity .4s}
.jx-wait .ph{animation:jxSpin 2.4s linear infinite;display:inline-block}
@keyframes jxSpin{to{transform:rotate(360deg)}}
.jx-t{position:relative;padding-top:4px}
.jx-t h3{font-size:17px;margin:0 0 4px}
.jx-t p{margin:0;font-size:15.5px;line-height:1.45;transition:opacity .45s var(--ease),transform .5s var(--ease)}
.jx-t .a{color:#8f2626}
.jx-t .b{position:absolute;left:0;right:0;top:calc(4px + 1.45em + 6px);opacity:0;transform:translateY(8px);color:var(--text);font-weight:500}
.jx-row:before{content:"";position:absolute;inset:-4px -10px 0 60px;border-radius:14px;background:linear-gradient(100deg,transparent 20%,rgba(61,139,255,.16) 50%,transparent 80%);background-size:220% 100%;background-position:120% 0;opacity:0;pointer-events:none}
/* fixed */
.jx-row.fixed .jx-ic{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 8px 18px -8px rgba(36,112,204,.6);transform:scale(1.04)}
.jx-row.fixed .jx-ic .a{opacity:0;transform:scale(.4) rotate(40deg)}
.jx-row.fixed .jx-ic .b{opacity:1;transform:none}
.jx-row.fixed .jx-tangle,.jx-row.fixed .jx-wait{opacity:0}
.jx-row.fixed .jx-straight{stroke-dashoffset:0}
.jx-row.fixed .jx-t .a{opacity:0;transform:translateY(-8px)}
.jx-row.fixed .jx-t .b{opacity:1;transform:none}
.jx-row.fixed:before{animation:jxSweep .9s var(--ease) both}
@keyframes jxSweep{0%{opacity:1;background-position:120% 0}100%{opacity:0;background-position:-20% 0}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(max-width:820px){.jx-meter{grid-template-columns:auto 1fr;gap:10px}.jx-state{display:none}.jx-row{min-height:92px}}
@media(prefers-reduced-motion:reduce){.jx-tangle,.jx-wait .ph{animation:none}.jx-row.fixed:before{animation:none}}
@media print{.jx{display:none}.tw-compare .cvf{display:block}}
/* ===== Simplified pages: three sections + download each ===== */
#opm-root .opm-pillars,#opm-root .opm-layers-sec,#opm-root .opm-out{display:none!important}
#tower-root .tw-principles,#tower-root .tw-fix-tabs,#tower-root .tw-fix,#tower-root .tw-arch{display:none!important}
#opm-root .opm-towers{order:3}
.opm-head .s-outcome{margin-top:14px;font-size:15px;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px}
.opm-head .s-outcome span{padding:6px 12px;border-radius:999px;background:var(--panel);border:1px solid var(--line);font-weight:500;color:var(--text)}
#tower-root .rd-scrolly{height:calc(var(--rd-steps,5) * 18vh + var(--rd-h,600px))}
#tower-root .rd-feed-l,#tower-root .rd-feed{display:none}
#tower-root .rd-side{display:block}
#tower-root .rd-counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#tower-root .tw-toggle button[data-pos="50"]{display:none}
/* scroll-driven sections */
.sfx #opm-root .opm-flow,.sfx #tower-root .tw-radar,.sfx #tower-root .tw-compare,.sfx .tw-poster{will-change:clip-path,transform}
@media(min-width:821px){.sfx #opm-root .opm-flow{min-height:calc(100svh - 90px);display:flex;flex-direction:column;justify-content:center}}
.sfx #opm-play{display:none}
.sfx .opm-flow-top p:after{content:" Scroll to move it, stop by stop.";}

/* Premium polish: calm surfaces, quieter accents, themed browser chrome */
html{scrollbar-color:var(--line2) transparent;caret-color:var(--accent)}
a{text-underline-offset:.2em;text-decoration-thickness:1px}
.callout.example,.callout.job{border-left:1px solid var(--line)}
.callout.example{background:linear-gradient(var(--accent-soft),var(--accent-soft)) left/3px 100% no-repeat,var(--panel)}
.callout.job{background:linear-gradient(var(--green-soft),var(--green-soft)) left/3px 100% no-repeat,var(--panel)}
.progress span{transition:width .4s var(--ease)}
.module.current{animation:in .45s var(--ease) both}
@keyframes in{from{opacity:0;transform:translateY(6px) scale(.995)}to{opacity:1;transform:none}}
@media(hover:none){.btn:hover{background:var(--accent)}.btn.ghost:hover{border-color:var(--line2)}}
.btn:active,.btn.ghost:active{transform:translateY(1px) scale(.98)}
@media(prefers-reduced-motion:reduce){.module.current{animation:fadeOnly .2s linear both!important}@keyframes fadeOnly{from{opacity:0}to{opacity:1}}}

/* Journey walker: a line-drawn figure that walks the six steps as you scroll */
.jx{position:relative}
.jx-fig{position:absolute;left:0;top:0;z-index:2;width:24px;height:38px;pointer-events:none;transition:transform .7s var(--ease);will-change:transform}
.jx-fig svg{width:24px;height:38px;overflow:visible;fill:none;stroke:#b42f2f;stroke-width:2;stroke-linecap:round;transition:stroke .4s}
.jx-fig circle{fill:var(--bg)}
.jx-fig path{transform-box:view-box;transition:transform .45s var(--ease)}
.jx-al,.jx-ar{transform-origin:14px 15px}.jx-ll,.jx-lr{transform-origin:14px 27px}
.jx-fig.stuck svg{transform:rotate(6deg) translateY(1px);transform-origin:14px 41px}
.jx-fig.stuck .jx-al{transform:rotate(14deg)}.jx-fig.stuck .jx-ar{transform:rotate(-14deg)}
.jx-q,.jx-ok{position:absolute;left:50%;top:-16px;transform:translateX(-50%);font:700 13px var(--sans);color:#b42f2f;opacity:0;transition:opacity .3s}
.jx-fig.stuck .jx-q{opacity:1}
.jx-fig.fut svg{stroke:var(--accent)}
.jx-fig.walk .jx-ll{animation:jxLeg .55s ease-in-out infinite alternate}
.jx-fig.walk .jx-lr{animation:jxLeg .55s ease-in-out infinite alternate-reverse}
.jx-fig.walk .jx-al{animation:jxLeg .55s ease-in-out infinite alternate-reverse}
.jx-fig.walk .jx-ar{animation:jxLeg .55s ease-in-out infinite alternate}
.jx-fig.walk.stuck .jx-ll,.jx-fig.walk.stuck .jx-lr,.jx-fig.walk.stuck .jx-al,.jx-fig.walk.stuck .jx-ar{animation-duration:1.1s}
@keyframes jxLeg{from{transform:rotate(-16deg)}to{transform:rotate(16deg)}}
.jx-fig.done .jx-al{transform:rotate(130deg)}.jx-fig.done .jx-ar{transform:rotate(-130deg)}
.jx-ok{display:grid;place-items:center;width:20px;height:20px;top:-24px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px}
.jx-fig.done .jx-ok{opacity:1}
.jx-end{margin:8px 0 0 60px;min-height:64px;opacity:.25;transform:translateY(6px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.jx-end.on{opacity:1;transform:none}
.jx-end p{margin:0;font-size:15.5px;color:var(--muted)}.jx-end b{color:var(--text);font-size:17px}
@media(prefers-reduced-motion:reduce){.jx-fig,.jx-fig path{transition:none}.jx-fig.walk path{animation:none!important}}

.rv-fade{opacity:0;transition:opacity .8s var(--ease)}.rv-fade.in{opacity:1}
@media(prefers-reduced-motion:reduce){.rv-fade{opacity:1;transition:none}}
@media print{.rv-fade{opacity:1!important}}

/* Journey steps, quiet and minimal: hairlines, neutral ink, one accent once a step is connected */
.jx-row{min-height:104px}
.jx-ic{background:var(--panel);border:1px solid var(--line2);color:var(--faint);box-shadow:0 1px 2px rgba(23,23,22,.04);font-size:20px}
.jx-row.fixed .jx-ic{background:var(--accent-soft);border-color:rgba(36,112,204,.35);color:var(--accent);box-shadow:none;transform:none}
.jx-tangle{stroke:var(--axis);stroke-width:1.5;stroke-dasharray:2 4}
.jx-straight{stroke-width:1.5}
.jx-wait{color:var(--faint);opacity:.7;font-size:13px}
.jx-t h3{font-size:16px;font-weight:600;letter-spacing:-.01em}
.jx-t .a{color:var(--muted)}
.jx-t .b{font-weight:400}
.jx-row:before{display:none}
.jx-fig svg{stroke:var(--muted)}
.jx-q{color:var(--muted)}
.jx-meter{background:rgba(249,249,247,.94);box-shadow:none}
.jx-bar{height:4px;background:var(--line)}
.jx-bar i{background:var(--accent)}

/* ===== Journey, fresh concept: two lanes on desktop, one repairing card on phones ===== */
.tw-compare .jx,.tw-compare .tw-toggle{display:none!important}
.ln{max-width:980px;margin-top:8px}
.ln-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.ln-lane ol{list-style:none;margin:0;padding:0}
.ln-head{display:flex;justify-content:space-between;align-items:baseline;padding:0 0 14px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.ln-head>b{font-size:15px;font-weight:600;letter-spacing:-.01em}
.ln-head span{font-size:14px;color:var(--muted)}.ln-head span b{font-size:18px;color:var(--text);font-variant-numeric:tabular-nums;margin-right:2px}
.ln-step{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start;padding:10px 0;opacity:.28;transform:translateY(6px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.ln-step.on{opacity:1;transform:none}
.ln-step h3{font-size:15.5px;font-weight:600;margin:5px 0 2px;letter-spacing:-.01em}
.ln-step p{margin:0;font-size:15px;line-height:1.45;color:var(--muted)}
.ln-ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:17px;border:1px solid var(--line2);background:var(--panel);color:var(--faint)}
.fut .ln-ic{border-color:rgba(36,112,204,.3);background:var(--accent-soft);color:var(--accent)}
.fut .ln-step p{color:var(--text)}
.ln-gap{position:relative;height:120px;margin-left:17px;opacity:.28;transition:opacity .5s var(--ease)}
.ln-gap.on{opacity:1}
.ln-gap>i{position:absolute;left:0;top:4px;bottom:4px;border-left:1.5px dotted var(--axis)}
.ln-gap span{position:absolute;left:16px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:6px;font-size:13px;color:var(--faint)}
.fut .ln-step+.ln-step{position:relative}
.fut .ln-step+.ln-step:before{content:"";position:absolute;left:17.5px;top:-10px;height:10px;border-left:1.5px solid rgba(36,112,204,.45)}
.ln-lane.fut{align-self:stretch}
.ln-stick{position:sticky;top:calc(var(--toph,64px) + 28px)}
.ln-done{min-height:48px;margin:18px 0 0 50px;font-size:15px;color:var(--muted);opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.ln-done.on{opacity:1;transform:none}.ln-done b{color:var(--text);font-weight:600}
.ln-end{margin:40px 0 8px;padding-top:24px;border-top:1px solid var(--line);opacity:.3;transition:opacity .6s var(--ease)}
.ln-end.on{opacity:1}
.ln-end p{margin:0;color:var(--muted);font-size:16px}.ln-end b{color:var(--text);font-size:clamp(19px,2vw,23px);letter-spacing:-.02em;font-weight:600}
.ln-cardwrap{display:none}
@media(max-width:820px){
  .ln-cols{display:none}
  .ln-cardwrap{display:block;position:relative}
  .ln-card{position:sticky;top:calc(var(--toph,56px) + 20px);min-height:340px;padding:22px 22px 20px;border:1px solid var(--line);border-radius:20px;background:var(--panel);box-shadow:0 1px 2px rgba(23,23,22,.04),0 18px 40px -28px rgba(23,23,22,.25);display:flex;flex-direction:column}
  .ln-ctop{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:26px}
  .ln-ctop b{color:var(--text);font-size:16px;font-variant-numeric:tabular-nums}
  .ln-cic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:20px;border:1px solid var(--line2);color:var(--faint);transition:background .4s var(--ease),color .4s,border-color .4s}
  .ln-card.fixed .ln-cic{background:var(--accent-soft);border-color:rgba(36,112,204,.3);color:var(--accent)}
  .ln-card h3{font-size:22px;letter-spacing:-.02em;margin:16px 0 14px}
  .ln-card p{margin:0;font-size:16px;line-height:1.45;transition:opacity .45s var(--ease),transform .45s var(--ease)}
  .ln-card .a{color:var(--muted)}.ln-card .b{color:var(--text);margin-top:10px;opacity:.25;transform:translateY(4px)}
  .ln-card.fixed .a{opacity:.4;text-decoration:line-through;text-decoration-color:var(--line2)}
  .ln-card.fixed .b{opacity:1;transform:none}
  .ln-tag{display:block;font-size:12px;font-weight:600;color:var(--faint);margin-bottom:2px}
  .ln-card.fixed .b .ln-tag{color:var(--accent)}
  .ln-dots{display:flex;gap:6px;margin-top:auto;padding-top:24px}
  .ln-dots i{flex:1;height:3px;border-radius:2px;background:var(--line)}
  .ln-dots i.on{background:var(--accent)}
  .ln-end{margin-top:24px}
}
@media(prefers-reduced-motion:reduce){.ln-step,.ln-gap,.ln-done,.ln-end,.ln-card p{transition:none}}

/* Journey polish: clearer lanes, less dead space, plain instructions */
.ln-hint{margin:0 0 22px;font-size:15px;color:var(--muted)}
.ln-step{opacity:.45;padding:8px 0}
.ln-gap{height:64px;opacity:.45}
.ln-lane.fut .ln-stick{padding:20px 22px 8px;border-radius:18px;background:linear-gradient(180deg,#f3f7fd,#fff 70%);border:1px solid rgba(36,112,204,.14)}
.ln-lane.today{padding:20px 0 0}
.ln-done{margin:12px 0 10px 50px;min-height:0}
@media(max-width:820px){
  .ln-hint{margin-bottom:16px}
  .ln-card{top:calc(var(--toph,56px) + 16svh);min-height:0;padding:20px}
  .ln-ctop{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
  .ln-cic{width:40px;height:40px;font-size:19px}
  .ln-card h3{font-size:21px;margin:0 0 14px}
  .ln-pane{padding:12px 14px;border-radius:12px;font-size:15.5px;line-height:1.45;transition:background .4s var(--ease),color .4s,border-color .4s,opacity .4s}
  .ln-pane.a{background:var(--panel2);color:var(--muted)}
  .ln-card.fixed .ln-pane.a{opacity:.55}
  .ln-pane.b{border:1px dashed var(--line2);color:var(--faint)}
  .ln-card.fixed .ln-pane.b{border:1px solid rgba(36,112,204,.25);background:var(--accent-soft);color:var(--text)}
  .ln-arrow{display:grid;place-items:center;height:26px;color:var(--faint);font-size:15px}
  .ln-card.fixed .ln-arrow{color:var(--accent)}
  .ln-card .ln-tag{font-size:12px;margin-bottom:3px}
  .ln-card.fixed .ln-pane.a{text-decoration:none}
  .ln-dots{padding-top:18px}
}

/* Scene change into the journey: a quiet chapter break, a real picker, and a soft entrance */
.tw-scene{margin:clamp(72px,10vw,128px) 0 22px;padding-top:clamp(40px,6vw,64px);border-top:1px solid var(--line);max-width:640px}
.tw-scene h2{font:600 clamp(26px,3.2vw,38px)/1.1 var(--sans);letter-spacing:-.03em;margin:0 0 10px;text-wrap:balance}
.tw-scene p{margin:0;font-size:16px;color:var(--muted)}
.tw-personas.rv{opacity:1;transform:none}
.tw-personas.rv .tw-persona{opacity:0;transform:translateY(12px) scale(.98);transition:opacity .5s var(--ease) var(--d,0ms),transform .6s var(--ease) var(--d,0ms),background .2s,box-shadow .2s}
.tw-personas.rv.in .tw-persona{opacity:1;transform:none}
.tw-compare{margin-top:clamp(40px,6vw,64px)}
#tw-ln.enter{animation:lnEnter .6s var(--ease) both}
@keyframes lnEnter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:820px){
  .tw-personas{display:grid!important;grid-template-columns:1fr 1fr;grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;gap:10px!important}
  .tw-personas .tw-persona{min-width:0;width:auto}
  .tw-persona{flex-direction:column;align-items:flex-start;gap:10px;padding:16px;border-radius:16px}
  .tw-persona:last-child{grid-column:1/-1;flex-direction:row;align-items:center}
  .tw-persona .ph{font-size:22px}.tw-persona small{display:block;font-size:13px}
}
@media(prefers-reduced-motion:reduce){.tw-personas.rv .tw-persona{opacity:1;transform:none;transition:none}#tw-ln.enter{animation:none}}

/* iPhone smoothness: no transforms above the pinned card, steady card height, no live blur */
#tw-ln.enter{animation:lnFade .4s ease-out both}
@keyframes lnFade{from{opacity:.2}to{opacity:1}}
.tw-compare.rv{transform:none}
@media(max-width:820px){
  .ln-pane{min-height:74px}
  .ln-card h3{min-height:1.2em}
  .ln-card .ln-txt{display:block}
  .sec-pill{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}

/* ===== Enhance round 1 (hierarchy): consulting-grade chapters ===== */
/* 1+2. Shorter hero headline; outcomes become one quiet line, not pills */
#opm-root .s-outcome{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:28px}
#opm-root .s-outcome span{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0 14px 0 0!important;margin:0 14px 0 0;font-size:15px;font-weight:500;color:var(--muted);border-right:1px solid var(--line2)!important;line-height:1.2}
#opm-root .s-outcome span:last-child{border-right:0!important;margin-right:0}
/* 3. Phone header: one slim row on the operating model and control tower */
@media(max-width:820px){
  .at-model .topbar .chapters,.at-tower .topbar .chapters{display:none!important}
  .at-model .top-actions,.at-tower .top-actions{flex-direction:row!important;gap:6px}
  .at-model .top-actions .tower-link,.at-tower .top-actions .tower-link{min-height:34px;padding:6px 10px;font-size:13px}
  .at-model .topbar,.at-tower .topbar{padding-top:8px;padding-bottom:8px}
}
/* 4. Dark plates run edge to edge, solid, content stays on the grid */
section.opm-flow,div.tw-arch{border-radius:0!important;background:#0b1322!important;border-image:conic-gradient(#0b1322 0 0) fill 0/0/0 100vmax;padding-top:clamp(64px,8vw,112px)!important;padding-bottom:clamp(64px,8vw,112px)!important;overflow:visible!important}
section.opm-flow:before,div.tw-arch:before{inset:0 -100vmax!important}
section.opm-flow .opm-stage,div.tw-arch .tw-stage{backdrop-filter:none!important}
/* 5. Each section is its own chapter */
#opm-root>*+*,#tower-root>*+*{margin-top:clamp(96px,12vw,176px)}
#tower-root>.tw-personas,#tower-root>.tw-scene+.tw-personas{margin-top:0}
#tower-root>.tw-compare{margin-top:clamp(48px,6vw,72px)}
#opm-root>section.opm-flow{margin-top:clamp(96px,12vw,176px)!important;margin-bottom:0!important}
.at-model main,.at-tower main{overflow-x:visible}
html,body{overflow-x:clip}

/* Phone: pinned, scroll-driven sideways stops for "Follow one request" */
.hx{display:none}
@media(max-width:820px){
  .sfx-h section.opm-flow{padding-top:20px!important;padding-bottom:28px!important;min-height:calc(100svh - 56px);display:flex;flex-direction:column}
  .sfx-h section.opm-flow .fx-host,.sfx-h section.opm-flow .opm-story{display:none}
  .sfx-h .opm-flow-top h2{font-size:22px}
  .sfx-h .opm-flow-top p{font-size:15px}
  .sfx-h .opm-reqs{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;gap:8px;margin:14px -20px 0;padding:0 20px 4px;scrollbar-width:none}
  .sfx-h .opm-reqs::-webkit-scrollbar{display:none}
  .sfx-h .opm-reqs .pill{flex:none;white-space:nowrap;font-size:14px;padding:8px 14px}
  .sfx-h .hx{display:block;margin-top:18px}
  .hx-rail{position:relative;display:flex;justify-content:space-between;align-items:center;height:14px;margin:0 6px 14px}
  .hx-rail:before,.hx-fill{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:rgba(156,200,255,.18)}
  .hx-fill{background:#7cc2ff;transform-origin:left;transform:scaleX(0)}
  .hx-rail b{position:relative;width:10px;height:10px;border-radius:50%;background:#0b1322;border:2px solid rgba(156,200,255,.35);transition:background .3s,border-color .3s}
  .hx-rail b.on{background:var(--c);border-color:var(--c)}
  .hx-view{overflow:hidden;margin:0 -20px;padding:0 20px}
  .hx-track{display:flex;gap:12px;will-change:transform}
  .hx-card{flex:0 0 calc(100% - 24px);min-height:300px;padding:18px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(156,200,255,.16);color:#e6f0ff;opacity:.45;transition:opacity .35s,border-color .35s}
  .hx-card.on{opacity:1;border-color:color-mix(in srgb,var(--c) 70%,transparent)}
  .hx-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
  .hx-ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:20px;color:#fff;background:var(--c)}
  .hx-n{font-size:12.5px;color:rgba(230,240,255,.6);font-variant-numeric:tabular-nums}
  .hx-card h3{font:600 21px/1.2 var(--sans);letter-spacing:-.02em;color:#fff;margin:0 0 4px}
  .hx-sub{margin:0;font-size:15px;color:rgba(230,240,255,.72)}
  .hx-card em{display:inline-block;margin-top:10px;font:600 12px var(--sans);font-style:normal;color:#cfe4ff;background:rgba(124,194,255,.14);padding:4px 10px;border-radius:999px}
  .hx-more{margin-top:14px;padding-top:14px;border-top:1px solid rgba(156,200,255,.14);font-size:15px;line-height:1.5}
  .hx-more p{margin:0 0 10px}
}

/* Phone journey, round 2: compact picker row + GSAP-pinned card with a scroll-scrubbed wipe */
@media(max-width:820px){
  .tw-scene{margin-top:72px;padding-top:36px}
  .tw-scene h2{font-size:26px}
  .tw-scene p{font-size:15px}
  .tw-personas{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:2px!important}
  .tw-personas .tw-persona,.tw-persona:last-child{grid-column:auto;flex-direction:column!important;align-items:center!important;gap:8px;padding:6px 0!important;border:0!important;background:none!important;box-shadow:none!important;border-radius:12px;text-align:center;color:var(--muted)}
  .tw-persona .ph{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:22px!important;background:var(--panel);border:1px solid var(--line2);color:var(--accent);transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
  .tw-persona span{display:block;min-width:0}
  .tw-persona b{font-size:12.5px!important;font-weight:500;line-height:1.2;white-space:normal}
  .tw-persona small{display:none!important}
  .tw-persona.on{color:var(--text)!important}
  .tw-persona.on .ph{background:var(--text);border-color:var(--text);color:#fff!important;transform:scale(1.06)}
  .tw-persona.on b{font-weight:600}
  .tw-persona:active .ph{transform:scale(.94)}
  /* pinned card: Connected wipes across as you scroll */
  .sfx-ln .ln-card{position:relative;top:auto}
  .sfx-ln .ln-pane.b{position:relative;overflow:hidden;border:1px dashed var(--line2);background:none;color:var(--text)}
  .sfx-ln .ln-pane.b:before{content:"";position:absolute;inset:0;background:var(--accent-soft);transform-origin:left;transform:scaleX(var(--t,0))}
  .sfx-ln .ln-pane.b>*{position:relative}
  .sfx-ln .ln-pane.b .ln-txt{clip-path:inset(0 calc((1 - var(--t,0)) * 100%) 0 0)}
  .sfx-ln .ln-card .ln-pane.a{opacity:calc(1 - var(--t,0) * .45)}
  .sfx-ln .ln-card.fixed .ln-pane.b{border-style:solid;border-color:rgba(36,112,204,.25)}
  .sfx-ln .ln-dots{position:relative;display:block;height:3px;border-radius:2px;background:var(--line);margin-top:auto}
  .sfx-ln .ln-dots i{display:none}
  .sfx-ln .ln-dots:after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--accent);transform-origin:left;transform:scaleX(var(--p,0))}
  .sfx-ln .ln-card{margin-bottom:0}
  .sfx-ln .ln-pane.b{min-height:74px}
}
@media(max-width:820px){
  .sfx-ln #tower-root .tw-compare,.sfx-ln #tw-ln{will-change:auto!important;transform:none!important;animation:none!important;clip-path:none!important}
  .sfx-ln .ln-dots{padding-top:0!important;margin-top:18px}
}

/* Mission control launch scene */
.lx{position:relative;height:150px;margin:-4px 0 14px;overflow:hidden;border-radius:14px;background:linear-gradient(var(--panel2),var(--panel2))}
.lx svg{position:absolute;left:50%;bottom:0;width:320px;height:170px;transform:translateX(-50%);overflow:visible}
.lx svg *{vector-effect:non-scaling-stroke}
.lx-tower path,.lx-ground,.lx-ship rect,.lx-ship path{fill:none;stroke:var(--muted);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.lx-ship .lx-tank{fill:var(--panel)}.lx-ship .lx-orb{fill:var(--panel);stroke:var(--text)}
.lx-ship rect:not(.lx-tank){fill:var(--panel)}
.lx-flame path{fill:#e8893a;stroke:none;opacity:0}
.lx-smoke circle{fill:#fff;stroke:var(--line2);opacity:0}
.lx-lights circle{fill:var(--panel);stroke:var(--line2);stroke-width:1.2;transition:fill .3s,stroke .3s}
.lx-lights circle.on{fill:var(--accent);stroke:var(--accent)}
.lx-hud{position:absolute;left:14px;top:12px;right:14px;display:flex;justify-content:space-between;align-items:baseline;z-index:1;font-variant-numeric:tabular-nums}
.lx-count{font:600 22px/1 var(--sans);letter-spacing:-.02em;color:var(--text)}
.lx-st{font:600 12px var(--sans);color:var(--muted);text-transform:none}
.lx.go .lx-st{color:var(--accent)}
.lx.up .lx-ship{transform:translateY(-260px);transition:transform 1.4s cubic-bezier(.55,0,.9,.4)}
.ln-stick .lx{margin:0 0 16px}
@media(prefers-reduced-motion:reduce){.lx.up .lx-ship{transition:none}}
@media(max-width:820px){
  .sfx-ln #tower-root .tw-compare{margin-top:24px;padding-top:4px;background:var(--bg)}
  .sfx-ln .tw-compare-top{margin-bottom:6px}
  .sfx-ln .ln-hint{margin-bottom:12px}
  .sfx-ln .lx{height:128px}
  .sfx-ln .ln-end{margin-top:16px;padding-top:14px}
  .sfx-ln .ln-end b{font-size:17px}.sfx-ln .ln-end p{font-size:14.5px}
}

/* Sticky person picker; journey waits for the first pick */
#tower-root .tw-personas{position:sticky;top:var(--toph,64px);z-index:6;background:var(--bg);padding:10px 0 12px!important;margin-bottom:0;box-shadow:0 1px 0 var(--line)}
.tw-nopick .tw-compare{display:none!important}
.tw-pickhint{display:none;margin:28px 0 0;padding:28px;border:1px dashed var(--line2);border-radius:16px;color:var(--muted);font-size:16px;text-align:center}
.tw-nopick .tw-pickhint{display:block}
.tw-nopick .tw-persona .ph{animation:pickPulse 2.4s var(--ease) infinite}
.tw-nopick .tw-persona:nth-child(2) .ph{animation-delay:.15s}.tw-nopick .tw-persona:nth-child(3) .ph{animation-delay:.3s}.tw-nopick .tw-persona:nth-child(4) .ph{animation-delay:.45s}.tw-nopick .tw-persona:nth-child(5) .ph{animation-delay:.6s}
@keyframes pickPulse{0%,70%,100%{box-shadow:0 0 0 0 rgba(36,112,204,0)}35%{box-shadow:0 0 0 6px rgba(36,112,204,.12)}}
@media(min-width:821px){.ln-stick{top:calc(var(--toph,64px) + 120px)}}
@media(prefers-reduced-motion:reduce){.tw-nopick .tw-persona .ph{animation:none}}
#tower-root .tw-personas{border-image:conic-gradient(var(--bg) 0 0) fill 0/0/0 100vmax}

/* Scroll affordance inside pinned sections: visible until the first scroll moves something */
.sx-hint{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px 0 0;font:600 13.5px var(--sans);color:var(--accent);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.sx-hint .ph{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--accent-soft);font-size:14px;animation:sxBob 1.4s var(--ease) infinite}
@keyframes sxBob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
.moved .sx-hint{opacity:0;transform:translateY(4px);pointer-events:none}
.ln-card .sx-hint{display:none}
.sfx-ln .ln-card .sx-hint{display:flex;margin-top:12px}
.hx .sx-hint{color:#9fd0ff;margin:0 0 12px}.hx .sx-hint .ph{background:rgba(124,194,255,.16)}
/* first step invites the eye: the empty Connected box breathes until scrolling starts */
.sfx-ln .ln-card:not(.moved) .ln-pane.b{animation:sxBreath 1.8s var(--ease) infinite}
@keyframes sxBreath{0%,100%{border-color:var(--line2)}50%{border-color:rgba(36,112,204,.5)}}
@media(prefers-reduced-motion:reduce){.sx-hint .ph,.sfx-ln .ln-card:not(.moved) .ln-pane.b{animation:none}}

/* Journey controls: tap Next/Back, scrolling still works */
.ln-ctl{display:none}
.sfx-ln .ln-card .sx-hint{display:none!important}
.sfx-ln .ln-ctl{display:flex;gap:10px;margin-top:14px}
.ln-back{width:48px;height:48px;flex:none;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line2);background:var(--panel);color:var(--text);font-size:18px}
.ln-back:disabled{opacity:.35}
.ln-next{flex:1;justify-content:center;min-height:48px;border-radius:12px!important;font-size:16px}
.ln-or{display:none;margin:6px 0 0;text-align:center;font-size:12.5px;color:var(--faint)}
.sfx-ln .ln-or{display:block}
.tw-pickhint b{color:var(--text)}
.sfx-ln .ln-card:not(.moved) .ln-next{animation:sxNudge 1.8s var(--ease) infinite}
@keyframes sxNudge{0%,100%{box-shadow:0 0 0 0 rgba(36,112,204,0)}50%{box-shadow:0 0 0 6px rgba(36,112,204,.18)}}
@media(prefers-reduced-motion:reduce){.sfx-ln .ln-card:not(.moved) .ln-next{animation:none}}
.ln-back .ph{transform:scaleX(-1)}

/* ===== Phone journey stepper (replaces the scroll-pinned card) ===== */
.ln-stepper{display:none}
@media(max-width:820px){
  .ln-cardwrap,.tw-compare .ln-hint,.tw-compare .ln-end{display:none!important}
  .ln-stepper{display:block}
  .st-story{margin:0 0 14px;font-size:17px;line-height:1.45;color:var(--muted)}.st-story b{color:var(--text)}
  .st-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 12px;padding:2px 16px 4px}
  .st-chips::-webkit-scrollbar{display:none}
  .st-chips button{flex:none;display:flex;align-items:center;gap:6px;padding:7px 12px 7px 8px;border-radius:999px;border:1px solid var(--line2);background:var(--panel);font-size:13.5px;color:var(--muted);transition:background .2s,color .2s,border-color .2s}
  .st-chips button span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--panel2);font-size:11.5px;font-weight:600;color:var(--muted)}
  .st-chips button.done{color:var(--text)}.st-chips button.done span{background:var(--accent-soft);color:var(--accent)}
  .st-chips button.on{background:var(--text);border-color:var(--text);color:#fff}.st-chips button.on span{background:#fff;color:var(--text)}
  .st-chips .st-fin .ph{font-size:14px}
  .st-view{overflow:hidden;border-radius:20px;border:1px solid var(--line);background:var(--panel);box-shadow:0 1px 2px rgba(23,23,22,.04),0 18px 40px -28px rgba(23,23,22,.25);touch-action:pan-y}
  .st-track{display:flex;transition:transform .45s var(--ease)}
  .st-slide{flex:0 0 100%;padding:20px;min-height:310px}
  .st-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
  .st-ic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:20px;background:var(--accent-soft);color:var(--accent)}
  .st-n{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
  .st-slide h3{font:600 22px/1.2 var(--sans);letter-spacing:-.02em;margin:0 0 16px}
  .st-row{display:grid;grid-template-columns:24px 1fr;gap:12px;padding:14px;border-radius:14px;align-items:start}
  .st-row .ph{font-size:22px;margin-top:1px}
  .st-row small{display:block;font-size:12.5px;font-weight:600;margin-bottom:2px}
  .st-row p{margin:0;font-size:16px;line-height:1.45}
  .st-row.bad{background:var(--panel2)}.st-row.bad .ph,.st-row.bad small{color:var(--muted)}.st-row.bad p{color:var(--muted)}
  .st-row.good{margin-top:10px;background:var(--accent-soft)}.st-row.good .ph,.st-row.good small{color:var(--accent)}.st-row.good p{color:var(--text)}
  .st-slide.on .st-row.good{animation:stIn .5s var(--ease) .18s both}
  @keyframes stIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .st-done{text-align:center}
  .st-done h3{margin:14px 0 14px}
  .st-launch .lx{margin:0}
  .st-score{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:18px}
  .st-score div{display:flex;flex-direction:column;align-items:center;min-width:92px}
  .st-score b{font:600 34px/1 var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}.st-score .on b{color:var(--accent)}
  .st-score span{font-size:12.5px;color:var(--muted);margin-top:4px}
  .st-score i{color:var(--faint);font-size:18px}
  .st-again{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
  .st-again button{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);font-size:14.5px;font-weight:500}
  .st-ctl{display:flex;gap:10px;margin-top:12px}
  .st-back{width:52px;height:52px;flex:none;display:grid;place-items:center;border-radius:14px;border:1px solid var(--line2);background:var(--panel);font-size:18px}
  .st-back .ph{transform:scaleX(-1)}.st-back:disabled{opacity:.35}
  .st-next{flex:1;justify-content:center;min-height:52px;border-radius:14px!important;font-size:16px}
  .st.fin .st-ctl{display:none}
}
@media(prefers-reduced-motion:reduce){.st-track{transition:none}.st-slide.on .st-row.good{animation:none}}
@media(max-width:820px){
  .sfx-h section.opm-flow{min-height:0}
  .sfx-h .hx-track{transition:transform .45s var(--ease);touch-action:pan-y}
  .sfx-h .hx-view{touch-action:pan-y}
  .sfx-h .hx-rail b{cursor:pointer}
  .hx-ctl .st-back{background:rgba(255,255,255,.06);border-color:rgba(156,200,255,.25);color:#fff}
  .hx-ctl .st-next{background:#fff;color:#0a1424;border-color:#fff}
  .hx-ctl .st-next .ph{color:#0a1424}
  .hx .sx-hint{transition:none}
}
@media(max-width:820px){.sfx-h .opm-flow-top p:after{content:none}}

/* Stepper as a conversation: the person thinks, the control tower responds (retro-future) */
@media(max-width:820px){
  .tw-compare-top{margin-bottom:4px}
  .st-story{font-size:16px;margin-bottom:10px}
  .st-chips{margin-bottom:10px}
  .st-slide{min-height:0;padding:16px 16px 18px}
  .st-head{margin-bottom:8px}.st-ic{width:36px;height:36px;font-size:18px}
  .st-slide h3{font-size:20px;margin-bottom:12px}
  .st-chat{display:grid;gap:12px}
  .st-msg{display:flex;align-items:flex-end;gap:8px}
  .st-msg.bot{justify-content:flex-end}
  .st-av{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:19px}
  .st-msg.me .st-av{background:var(--panel2);color:var(--text);border:1px solid var(--line2)}
  .st-msg.bot .st-av{background:var(--accent-soft);border:1px solid rgba(36,112,204,.25)}
  .st-bub{position:relative;max-width:78%;padding:10px 14px 12px;border-radius:20px}
  .st-bub small{display:block;font-size:12px;font-weight:600;margin-bottom:2px}
  .st-bub p{margin:0;font-size:16px;line-height:1.4}
  .st-msg.me .st-bub{background:var(--panel2);border-bottom-left-radius:6px;color:var(--muted)}
  .st-msg.me .st-bub small{color:var(--muted)}
  /* thought-bubble trail, a nod to cartoon thinking */
  .st-msg.me .st-bub:before,.st-msg.me .st-bub:after{content:"";position:absolute;border-radius:50%;background:var(--panel2)}
  .st-msg.me .st-bub:before{width:9px;height:9px;left:-8px;bottom:6px}.st-msg.me .st-bub:after{width:5px;height:5px;left:-15px;bottom:1px}
  .st-msg.bot .st-bub{background:var(--accent);color:#fff;border-bottom-right-radius:6px}
  .st-msg.bot .st-bub small{color:rgba(255,255,255,.8)}
  .st-dots{display:none;gap:4px;padding:6px 0 2px}
  .st-dots b{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.5;animation:stDot 1s infinite}
  .st-dots b:nth-child(2){animation-delay:.15s}.st-dots b:nth-child(3){animation-delay:.3s}
  @keyframes stDot{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-3px);opacity:1}}
  .st-bot{width:28px;height:28px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .st-bot rect{fill:#fff}.st-bot .st-eye{fill:var(--accent);stroke:none}.st-bot .st-orb{fill:var(--accent);stroke:none}
  /* choreography each time a step opens: think, then respond */
  .st-slide.on .st-msg.me{animation:stPop .35s var(--ease) both}
  .st-slide.on .st-msg.me .st-dots{display:flex;animation:stHide 0s linear .75s forwards}
  .st-slide.on .st-msg.me p{animation:stShow .3s var(--ease) .75s both}
  .st-slide.on .st-msg.bot{animation:stPop .35s var(--ease) .95s both}
  .st-slide.on .st-msg.bot .st-dots{display:flex;animation:stHide 0s linear 1.9s forwards}
  .st-slide.on .st-msg.bot p{animation:stShow .3s var(--ease) 1.9s both}
  .st-slide.on .st-orb{animation:stBlink .25s steps(2) 1s 4}
  .st-slide.on .st-eye{animation:stLook .5s var(--ease) 1.2s 2 alternate}
  @keyframes stPop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
  @keyframes stShow{from{opacity:0;max-height:0}to{opacity:1;max-height:6em}}
  @keyframes stHide{to{display:none;height:0;padding:0;opacity:0}}
  @keyframes stBlink{50%{opacity:.15}}
  @keyframes stLook{to{transform:translateX(1.5px)}}
  .st-slide.on .st-row.good{animation:none}
  /* always-reachable controls */
  .st-ctl{position:sticky;bottom:0;z-index:5;margin:10px -16px 0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line)}
}
@media(max-width:820px) and (prefers-reduced-motion:reduce){
  .st-slide.on .st-msg,.st-slide.on .st-msg p,.st-slide.on .st-orb,.st-slide.on .st-eye{animation:none!important}
  .st-dots{display:none!important}
}
@media(max-width:820px){
  .sfx-st .st-ctl{position:static;margin:10px 0 0;padding:0;border:0;background:none}
  .sfx-st #tower-root .tw-compare{will-change:auto!important;clip-path:none!important;margin-top:16px;background:var(--bg)}
  .sfx-st #tw-ln{animation:none!important}
  .st-try{margin:4px 0 8px;font-size:13px;font-weight:600;color:var(--muted)}
  .st-people{display:flex;justify-content:center;gap:6px;margin-bottom:14px}
  .st-people button{display:flex;flex-direction:column;align-items:center;gap:4px;width:68px;border:0;background:none;font-size:12px;color:var(--muted);padding:0}
  .st-people span{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line2);background:var(--panel);color:var(--accent);font-size:18px}
  .st-cont{min-height:46px;border-radius:12px!important;padding:0 20px}
  .st-done h3{margin:10px 0 10px}.st-score{margin-bottom:10px}
  .sfx-st .lx{height:118px}
}
.tw-poster{grid-template-columns:minmax(0,.75fr) minmax(0,1fr)}@media(max-width:820px){.tw-poster{grid-template-columns:1fr}.tw-poster img{max-width:420px;margin:0 auto}}
#tower-root .tw-jwrap>.tw-compare{margin-top:clamp(40px,6vw,64px)}

/* Follow one request (phone): one pinned screen */
@media(max-width:820px){
  .sfx-h section.opm-flow{padding-top:14px!important;padding-bottom:16px!important}
  .sfx-h .opm-flow-top h2{font-size:20px;margin-bottom:2px}
  .sfx-h .opm-flow-top p{font-size:14px}
  .sfx-h .opm-reqs{margin-top:10px}
  .sfx-h .opm-reqs .pill{padding:7px 12px;font-size:13.5px}
  .sfx-h .hx{margin-top:12px}
  .hx-rail{margin-bottom:8px}
  .hx .sx-hint{margin:0 0 8px;font-size:12.5px}.hx .sx-hint .ph{width:22px;height:22px;font-size:12px}
  .hx-card{min-height:0;padding:14px 16px}
  .hx-top{margin-bottom:8px}.hx-ic{width:34px;height:34px;font-size:17px}
  .hx-card h3{font-size:19px}
  .hx-sub{font-size:14px}
  .hx-card em{margin-top:6px}
  .hx-more{margin-top:10px;padding-top:10px;font-size:14px;line-height:1.45}
  .hx-more p{margin-bottom:8px}
  .hx-more .fx-chips span{font-size:11.5px;padding:3px 8px}
  .hx-ctl{position:static!important;margin:10px 0 0!important;padding:0!important;border:0!important;background:none!important}
  .hx-done h3{margin-bottom:6px}
  .hx-try{margin:14px 0 8px;font-size:12.5px;font-weight:600;color:rgba(230,240,255,.6)}
  .hx-reqs{display:flex;flex-direction:column;gap:8px}
  .hx-reqs button{text-align:left;padding:10px 14px;border-radius:12px;border:1px solid rgba(156,200,255,.25);background:rgba(255,255,255,.04);color:#fff;font-size:14.5px}
  .hx-acts{display:flex;gap:8px;margin-top:14px}
  .hx-cont{flex:1;justify-content:center;background:#fff!important;color:#0a1424!important;border-color:#fff!important;min-height:44px;border-radius:12px!important}
  .hx-cont .ph{color:#0a1424}
  .hx-replay{display:inline-flex;align-items:center;gap:6px;padding:0 14px;border-radius:12px;border:1px solid rgba(156,200,255,.25);background:none;color:#fff;font-size:14px}
  .hx-fin .hx-ctl{display:none}
}
@media(max-width:820px){
  .sfx-h section.opm-flow{min-height:calc(100svh - var(--toph,52px))!important;display:flex;flex-direction:column}
  .sfx-h .sec-pill{display:none!important}
}

/* ===== Skyline: one foundation, many control towers ===== */
#opm-root .opm-towers h2{font:600 clamp(26px,3.4vw,40px)/1.1 var(--sans);letter-spacing:-.03em;margin:0 0 10px}
.sky-lede{margin:0 0 28px;font-size:17px;color:var(--muted);max-width:52ch}
.sky{display:block!important;position:relative;max-width:820px}
.sky-towers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,2.4vw,28px);align-items:end;height:clamp(250px,34vw,340px);padding:0 clamp(6px,3vw,40px)}
.sky-t{position:relative;height:var(--h);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;border:0;background:none;padding:0;color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent}
.sky-pod{position:relative;z-index:1;width:min(100%,92px);aspect-ratio:1.5;border-radius:999px 999px 18px 18px;display:grid;place-items:center;font-size:clamp(20px,3vw,28px);border:1.5px dashed rgba(36,112,204,.55);background:var(--bg);color:var(--accent);transition:transform .25s var(--ease),box-shadow .25s}
.sky-shaft{flex:1;width:clamp(16px,3.4vw,30px);margin-top:-2px;border:1.5px dashed rgba(36,112,204,.45);border-top:0;border-bottom:0;background:none}
.sky-beacon{position:absolute;top:-14px;left:50%;width:2px;height:12px;margin-left:-1px;background:var(--line2)}
.sky-beacon:after{content:"";position:absolute;top:-6px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--line2)}
.sky-name{position:absolute;bottom:-50px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;white-space:nowrap}
.sky-name b{font-size:14.5px}.sky-name small{font-size:11.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.sky-t.live .sky-pod{border:0;background:#0b1322;color:#fff;box-shadow:0 18px 36px -18px rgba(11,19,34,.6)}
.sky-t.live .sky-shaft{border:0;background:#0b1322}
.sky-t.live .sky-beacon,.sky-t.live .sky-beacon:after{background:var(--accent)}
.sky-t.live .sky-name small{color:var(--accent)}
.sky-in .sky-t.live .sky-beacon:after{animation:skyBlink 1.6s ease-in-out infinite}
@keyframes skyBlink{0%,100%{box-shadow:0 0 0 0 rgba(36,112,204,.5)}50%{box-shadow:0 0 0 7px rgba(36,112,204,0)}}
.sky-t.sel .sky-pod{transform:translateY(-4px);box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent)}
.sky-t.live.sel .sky-pod{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent),0 18px 36px -18px rgba(11,19,34,.6)}
.sky-base{position:relative;z-index:2;display:grid;gap:3px;margin-top:0;border-radius:14px;overflow:hidden}
.sky-band{display:flex;align-items:center;gap:10px;padding:11px 16px;font-size:14.5px;font-weight:500;color:#e6f0ff;background:#0b1322}
.sky-band:nth-child(1){background:#173a6b}.sky-band:nth-child(2){background:#14305a}.sky-band:nth-child(3){background:#112748}.sky-band:nth-child(4){background:#0d1d36}
.sky-band .ph{font-size:18px;color:#9fd0ff}
.sky-towers{margin-bottom:56px}
.sky-towers{position:relative}
.sky-detail{margin:18px 0 0;min-height:3em;font-size:16px;line-height:1.5;color:var(--muted)}
.sky-detail b{color:var(--text)}.sky-detail a{color:var(--accent);font-weight:600;text-decoration:none;white-space:nowrap}
.sky-so{margin:20px 0 0;padding-top:20px;border-top:1px solid var(--line);font-size:clamp(18px,2.2vw,22px);line-height:1.4;color:var(--muted);letter-spacing:-.01em}
.sky-so b{color:var(--text)}
@media(max-width:820px){.sky-towers{margin-bottom:50px}.sky-name b{font-size:13px}.sky-band{padding:10px 14px;font-size:14px}}
.sky-towers{margin-bottom:0!important;padding-top:64px;height:clamp(300px,38vw,400px)}
.sky-name{bottom:auto;top:-62px}
.sky-beacon{top:-12px}

/* ===== Ace, the floating mission guide ===== */
.ace{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60}
.ace-fab{position:relative;width:60px;height:60px;border-radius:50%;border:0;background:#fff;box-shadow:0 10px 28px -10px rgba(11,19,34,.45),0 0 0 1px var(--line);display:grid;place-items:center;padding:6px;animation:aceBob 3.2s ease-in-out infinite}
.ace-fab svg{width:44px;height:44px}
.ace-orb{animation:aceBlink 1.8s ease-in-out infinite}
@keyframes aceBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}
@keyframes aceBlink{50%{opacity:.3}}
.ace-tip{position:absolute;right:68px;top:50%;transform:translateY(-50%);white-space:nowrap;background:#0b1322;color:#fff;font:600 13px var(--sans);padding:6px 10px;border-radius:10px;opacity:0;transition:opacity .25s;pointer-events:none}
.ace:not(.open) .ace-fab:hover .ace-tip,.ace:not(.open):not(.seen) .ace-tip{opacity:1}
.ace.open .ace-fab{animation:none}
.ace-panel{position:absolute;right:0;bottom:72px;width:min(360px,calc(100vw - 32px));height:min(520px,calc(100svh - 160px));display:flex;flex-direction:column;background:var(--panel);border-radius:20px;box-shadow:0 24px 60px -20px rgba(11,19,34,.45),0 0 0 1px var(--line);overflow:hidden}
.ace-panel[hidden]{display:none}
.ace-head{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#0b1322;color:#fff}
.ace-av{width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;padding:3px}.ace-av svg{width:32px;height:32px}
.ace-head b{display:block;font-size:15px}.ace-head small{font-size:12px;color:rgba(230,240,255,.7)}
.ace-x{margin-left:auto;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;font-size:22px;line-height:1}
.ace-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px}
.ace-m{max-width:85%;padding:10px 13px;border-radius:16px;font-size:15px;line-height:1.45}
.ace-m.bot{background:var(--panel2);border-bottom-left-radius:5px;align-self:flex-start}
.ace-m.me{background:var(--accent);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.ace-m a{color:var(--accent);font-weight:600;white-space:nowrap}
.ace-dots{display:inline-flex;gap:4px}.ace-dots b{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:stDot 1s infinite}.ace-dots b:nth-child(2){animation-delay:.15s}.ace-dots b:nth-child(3){animation-delay:.3s}
@keyframes stDot{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-3px);opacity:1}}
.ace-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px}
.ace-chips button{padding:7px 11px;border-radius:999px;border:1px solid var(--line2);background:var(--panel);font-size:13px;color:var(--text);text-align:left}
.ace-form{display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.ace-form input{flex:1;min-width:0;height:42px;padding:0 12px;border-radius:12px;border:1px solid var(--line2);background:var(--bg);font:16px var(--sans);color:var(--text)}
.ace-form button{width:42px;height:42px;border-radius:12px;border:0;background:var(--accent);color:#fff;font-size:18px;display:grid;place-items:center}
@media(max-width:820px){.ace{right:12px;bottom:calc(12px + env(safe-area-inset-bottom))}.ace-fab{width:54px;height:54px}.ace-fab svg{width:40px;height:40px}
  .ace.open{left:0;right:0;bottom:0}.ace.open .ace-fab{display:none}
  .ace-panel{position:fixed;left:0;right:0;bottom:0;width:auto;height:72svh;border-radius:20px 20px 0 0}}
@media(prefers-reduced-motion:reduce){.ace-fab,.ace-orb,.ace-dots b{animation:none}}
@media print{.ace{display:none}}

/* The rule: pinned, centred, words assemble */
.s-rule{min-height:100svh;display:flex;align-items:center}
.s-statement .w{display:inline-block;will-change:transform}
.s-statement em{position:relative;font-style:normal;color:var(--accent)}
.s-statement em:after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.08em;border-radius:.04em;background:var(--accent);transform-origin:left;transform:scaleX(var(--u,1))}
/* pinned sections: the reveal must not animate transform, or GSAP's pin hand-off eases and jumps */
.sfx-h section.opm-flow.rv,.sfx-st #tower-root .tw-compare.rv,.sfx #opm-root section.opm-flow.rv{transition:opacity .6s var(--ease)!important}
.sfx-h section.opm-flow.rv:not(.in),.sfx-st #tower-root .tw-compare.rv:not(.in){transform:none}
/* skyline fits one phone screen while pinned */
.sfx .opm-towers{will-change:auto!important}
@media(max-width:820px){
  .sfx .opm-towers{padding-top:12px}
  .sfx .opm-towers h2{font-size:24px}
  .sfx .sky-lede{font-size:15px;margin-bottom:6px}
  .sfx .sky-towers{height:250px;padding-top:58px}
  .sfx .sky-band{padding:8px 14px;font-size:13.5px}
  .sfx .sky-detail{margin-top:10px;font-size:14.5px;min-height:2.9em}
  .sfx .sky-so{margin-top:8px;padding-top:10px;font-size:16px}
}

/* Live view radar on phones: tap to inspect, short labels, steady info box */
.rd-node .sn{display:none}
.rd-dots i{cursor:pointer}
.rd-tip small{display:block;margin-top:4px;font-size:11.5px;opacity:.7}
@media(max-width:820px){
  .rd-node>span:not(.sn){display:none}.rd-node .sn{display:inline}
  .rd-node span{font-size:11.5px}
  .rd-tip{position:static!important;transform:none!important;left:auto!important;top:auto!important;margin:8px 0 0;max-width:none;min-height:0}
  .rd-tip:not(.on){display:none}
  .rd-dots{gap:8px}.rd-dots i{min-width:22px;height:6px}
  .rd-legend{flex-wrap:wrap;gap:6px 14px;padding-right:56px}
  .ace-fab{width:48px;height:48px}.ace-fab svg{width:36px;height:36px}
}
/* phones: the info card overlays the caption area, so nothing below moves */
.rd-hint{display:none}
@media(max-width:820px){
  .rd-scrolly .rd-main{position:sticky}
  .rd-hint{display:block;margin:2px 0 6px;text-align:center;font-size:12.5px;color:var(--muted)}
  .rd-tip{display:block!important;position:absolute!important;left:12px!important;right:12px!important;top:auto!important;bottom:12px!important;margin:0!important;z-index:5;
    padding:14px 44px 14px 16px;border-radius:16px;text-align:left!important;opacity:0;transform:translateY(12px)!important;pointer-events:none;transition:opacity .22s var(--ease),transform .28s var(--ease)!important}
  .rd-tip.on{opacity:1;transform:none!important;pointer-events:auto}
  .rd-tip b{display:block;font-size:16px;margin-bottom:2px}.rd-tip span{display:block;font-size:14.5px}
  .rd-x{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:20px;line-height:1}
  .rd-node:active .ph{transform:scale(.94)}
  .tw-radar.focus .rd-node.out{opacity:1}
}

/* ===== Lighter page + gentle section bands ===== */
:root{--bg:#ffffff;--band:#f3f6fb}
body{background:var(--bg)}
.topbar{background:rgba(255,255,255,.94)}
/* tinted chapters run edge to edge; white cards sit on them */
#opm-root>.opm-towers,#tower-root>.tw-jwrap,#opm-root>.tw-poster,#tower-root>.tw-poster{--bg:var(--band);background:var(--band);border-image:conic-gradient(var(--band) 0 0) fill 0/0/0 100vmax;padding-top:clamp(48px,7vw,96px)!important;padding-bottom:clamp(48px,7vw,96px)!important}
#opm-root>.tw-poster,#tower-root>.tw-poster{box-shadow:none;border-radius:0}
#opm-root>.tw-poster img,#tower-root>.tw-poster img{box-shadow:0 18px 40px -24px rgba(11,19,34,.35),0 0 0 1px var(--line)}
#tower-root .tw-jwrap .st-view,#tower-root .tw-jwrap .ln-lane.today{background:#fff}
#tower-root>.tw-jwrap{margin-top:clamp(64px,9vw,120px)}
#tower-root .tw-scene{margin-top:0;border-top:0;padding-top:0}
/* Control tower: radar follows the title closely */
#tower-root>.tw-radar{margin-top:20px!important}
#tower-root>.tw-head{padding-bottom:0}
/* radar icons: every icon is always tappable, with a full 48px target that never moves under the finger */
.rd-node{touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer;z-index:2}
.rd-node .ph{position:relative}
.rd-node .ph:after{content:"";position:absolute;inset:-8px}
.rd-node *{pointer-events:none}
.rd-node{pointer-events:auto!important}
/* phones: radar is one full frame that holds while its 5 steps play */
@media(max-width:820px){
  #tower-root .rd-scrolly{height:calc(var(--rd-steps,5) * 42svh + var(--rd-h,600px))}
  #tower-root .rd-scrolly .rd-main{top:calc(var(--toph,52px) + 8px);min-height:calc(100svh - var(--toph,52px) - 16px);display:flex;flex-direction:column;justify-content:center}
  .tw-poster img{max-height:44svh;width:auto;max-width:100%;margin:0 auto}
}
.sfx .tw-poster.rv{transition:opacity .6s var(--ease)!important;will-change:auto!important}
/* Agents tab: same picker, robot accent */
.tw-persona[data-k="agents"] .ph{color:#6a3fc1}
@media(max-width:820px){.tw-persona .ph{width:46px!important;height:46px!important;font-size:20px!important}.tw-persona b{font-size:11.5px!important}}

/* ===== Skyline v2: tower cards plugged into a shared foundation ===== */
.sky-towers{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:clamp(8px,2vw,20px)!important;height:auto!important;padding:0!important;margin:0!important;align-items:end}
.sky-t{height:auto!important;display:flex;flex-direction:column;align-items:stretch;border:0;background:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.sky-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px 14px;border-radius:14px;border:1.5px dashed rgba(36,112,204,.45);background:#fff;transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
.sky-ic{width:clamp(36px,5vw,48px);height:clamp(36px,5vw,48px);border-radius:12px;display:grid;place-items:center;font-size:clamp(18px,2.4vw,24px);background:var(--accent-soft);color:var(--accent)}
.sky-card b{font-size:clamp(13px,1.6vw,16px);color:var(--text);line-height:1.2;text-align:center}
.sky-card small{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sky-link{display:block;width:2px;height:22px;margin:0 auto;background:repeating-linear-gradient(180deg,rgba(36,112,204,.55) 0 4px,transparent 4px 7px)}
.sky-t.live .sky-card{border:1.5px solid #0b1322;background:#0b1322}
.sky-t.live .sky-card b{color:#fff}.sky-t.live .sky-card small{color:#9fd0ff}
.sky-t.live .sky-ic{background:rgba(255,255,255,.12);color:#fff}
.sky-t.live .sky-link{background:#0b1322}
.sky-t.sel .sky-card{border-color:var(--accent);box-shadow:0 0 0 3px rgba(36,112,204,.18);transform:translateY(-3px)}
.sky-t.live.sel .sky-card{border-color:#0b1322;box-shadow:0 0 0 3px rgba(36,112,204,.35)}
.sky-t:active .sky-card{transform:scale(.97)}
.sky-base{border-radius:14px}
.sky-pod,.sky-shaft,.sky-beacon,.sky-name{display:none!important}
@media(max-width:820px){.sky-card{padding:12px 4px 10px}.sky-card b{font-size:12.5px}.sky-card small{font-size:10px}}

/* Final QA: even chapter spacing on the control tower page; comfortable tap targets on text links */
#tower-root>.tw-jwrap,#tower-root>.tw-poster,#tower-root>.pin-spacer{margin-top:clamp(96px,12vw,176px)!important}
#story a:not(.btn):not(.s-door),.tw-kicker.crumb a,.continue a:not(.btn){display:inline-block;padding:11px 0;margin:-11px 0}
.s-door-dl{min-height:44px}

/* Taste round 3 polish */
/* 1. Orbit tip: brief, once per visit, never left behind */
.ace.seen .ace-tip{opacity:0!important}
/* 2. Radar: the frame is filled evenly, radar as large as the width allows */
@media(max-width:820px){
  #tower-root .rd-scrolly .rd-main{justify-content:space-evenly}
  #tower-root .rd-scrolly .rd-stage{max-width:none!important;width:calc(100% + 16px);margin:0 -8px}
}
/* 3. Home on phones: one slim header row, quieter dots behind the hero */
@media(max-width:820px){
  .at-home .topbar .chapters{display:none!important}
  .at-home .top-actions{flex-direction:row!important;gap:6px}
  .at-home .top-actions .tower-link{min-height:34px;padding:6px 10px;font-size:13px}
  .at-home .topbar{padding-top:8px;padding-bottom:8px}
  .s-hero .s-dots{opacity:.3!important}
}
/* 4. Skyline: frame starts filled, no blank band above the title */
@media(max-width:820px){.sfx #opm-root>.opm-towers{padding-top:20px!important}.sfx .opm-towers h2{margin-top:0}}
/* phones: the pyramid hero is one pinned frame, one layer card at a time */
@media(max-width:820px){
  .opm-pyr.gated{min-height:calc(100svh - var(--toph,52px));display:flex;flex-direction:column;justify-content:center;gap:8px;background:var(--bg)}
  .opm-pyr.gated .opm-pyr-svg{height:34svh!important}
  .opm-pyr.gated .opm-pc{display:none;opacity:1!important;transform:none!important}
  .opm-pyr.gated .opm-pc.on{display:block;animation:pcIn .35s var(--ease)}
  .opm-pyr.gated .opm-pc-track{display:block}
  @keyframes pcIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}
@media(max-width:820px){
  .opm-pyr.gated{justify-content:flex-start;gap:4px;padding-top:4px}
  .opm-pyr.gated .opm-pyr-svg{height:25svh!important}
  .opm-pyr.gated .opm-pyr-hint{margin:0}
  .opm-pyr.gated .opm-pc{padding:12px 14px!important}
  .opm-pyr.gated .opm-pc header{margin-bottom:6px}
  .opm-pyr.gated .opm-pc h3{font-size:17px}
  .opm-pyr.gated .opm-k-b{font-size:14px;line-height:1.4}
  .opm-pyr.gated .opm-k-b :is(span,li,.chip,em){font-size:12px}
  .opm-pyr.gated .opm-k-b :is(ul,.chips,div){gap:5px!important}
  .opm-pyr.gated .opm-k-b :is(ul,.chips,div)>*{padding:4px 9px!important;margin:0!important}
  .opm-pyr.gated .opm-pc-verb{margin-top:6px;font-size:12.5px}
}

/* ===== Swipe nudge ===== */
.nudge{position:fixed;left:50%;bottom:calc(150px + env(safe-area-inset-bottom));z-index:55;display:flex;flex-direction:column;align-items:center;gap:6px;transform:translate(-50%,10px);opacity:0;pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.nudge.on{opacity:1;transform:translate(-50%,0)}
.nudge svg{width:44px;height:60px;overflow:visible;filter:drop-shadow(0 6px 14px rgba(11,19,34,.25))}
.nudge .nd-thumb path{fill:#fff;stroke:#0b1322;stroke-width:2;stroke-linejoin:round}
.nudge .nd-trail{stroke:var(--accent);stroke-width:3;stroke-linecap:round;fill:none;stroke-dasharray:42;stroke-dashoffset:42;opacity:.8}
.nudge.on .nd-thumb{animation:ndThumb 1.3s cubic-bezier(.5,0,.3,1) infinite}
.nudge.on .nd-trail{animation:ndTrail 1.3s cubic-bezier(.5,0,.3,1) infinite}
@keyframes ndThumb{0%{transform:translateY(14px);opacity:0}15%{opacity:1}70%{transform:translateY(-16px);opacity:1}100%{transform:translateY(-22px);opacity:0}}
@keyframes ndTrail{0%{stroke-dashoffset:42;opacity:0}20%{opacity:.8}75%{stroke-dashoffset:0;opacity:.6}100%{stroke-dashoffset:0;opacity:0}}
.nudge .nd-mouse{fill:#fff;stroke:#0b1322;stroke-width:2}.nudge .nd-wheel{fill:var(--accent)}
.nudge.on .nd-wheel{animation:ndWheel 1.2s ease-in-out infinite}
@keyframes ndWheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(8px);opacity:0}100%{opacity:0}}
.nudge span{font:600 13px var(--sans);color:#fff;background:rgba(11,19,34,.88);padding:6px 12px;border-radius:999px;white-space:nowrap}
.nudge.still .nd-thumb,.nudge.still .nd-trail,.nudge.still .nd-wheel{animation:none!important;opacity:1;stroke-dashoffset:0}
@media print{.nudge{display:none}}
/* Nudge: calm, readable, dismissible. Motion stops within 5s (WCAG 2.2.2). */
.nudge{pointer-events:none}
.nudge .nd-off{pointer-events:auto;margin-top:2px;min-height:32px;padding:4px 12px;border:0;border-radius:999px;background:rgba(255,255,255,.95);color:#0b1322;font:600 12px var(--sans);box-shadow:0 0 0 1px var(--line2)}
.nudge:not(.on) .nd-off{pointer-events:none}
.nudge.on .nd-thumb,.nudge.on .nd-trail,.nudge.on .nd-wheel{animation-iteration-count:3!important}
.nudge .nd-txt{font:600 14px var(--sans);color:#fff;background:#0b1322;padding:7px 14px;border-radius:999px;white-space:nowrap}
.nudge span:not(.nd-txt){display:none}
.nudge.still svg .nd-thumb{transform:translateY(-6px)}

/* ===== Chapter takeovers ===== */
.chap{position:relative;z-index:3;min-height:calc(100svh - var(--toph,56px));display:grid;place-items:center;text-align:center;color:#fff;background:#0b1322;border-image:conic-gradient(#0b1322 0 0) fill 0/0/0 100vmax;padding:48px 20px;margin:0!important}
.chap+*,.chap+.pin-spacer{margin-top:0!important}
.chap-in{max-width:760px}
.chap-k{display:inline-block;margin:0 0 18px;padding:6px 14px;border-radius:999px;border:1px solid rgba(156,200,255,.35);color:#9fd0ff;font:600 13px var(--sans);letter-spacing:.02em}
.chap h2{margin:0 0 14px;font:600 clamp(32px,6vw,64px)/1.05 var(--sans);letter-spacing:-.035em;color:#fff;text-wrap:balance}
.chap-p{margin:0 auto;max-width:34ch;font-size:clamp(17px,2vw,20px);line-height:1.45;color:rgba(230,240,255,.78)}
.chap-cue{display:block;width:2px;height:44px;margin:28px auto 0;background:linear-gradient(#9fd0ff,transparent);border-radius:2px;animation:chapCue 1.8s ease-in-out 3}
@keyframes chapCue{0%{transform:scaleY(.3);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.3);transform-origin:bottom;opacity:.4}}
@media(prefers-reduced-motion:reduce){.chap-cue{animation:none}}
@media print{.chap{display:none}}
.chap{margin-top:0!important;margin-bottom:0!important}
#tower-root>.pin-spacer:has(>.chap),#opm-root>.pin-spacer:has(>.chap){margin-top:0!important}
.chap{min-height:100vh!important}

/* Two towers: HR / Sales switch */
.tw-switch{display:inline-flex;gap:4px;padding:4px;margin:4px 0 14px;border-radius:12px;background:var(--panel2)}
.tw-switch a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border-radius:9px;font:600 14px var(--sans);color:var(--muted);text-decoration:none}
.tw-switch a.on{background:var(--panel);color:var(--text);box-shadow:0 1px 2px rgba(23,23,22,.08),0 0 0 1px rgba(23,23,22,.05)}
.tw-switch .ph{font-size:17px}

.sky-towers{grid-template-columns:repeat(5,minmax(0,1fr))!important}
@media(max-width:820px){.sky-towers{gap:6px!important}.sky-card{padding:10px 2px 9px}.sky-card b{font-size:11.5px}.sky-ic{width:32px;height:32px;font-size:16px}}
.tw-persona .pn-s{display:none}
@media(max-width:820px){.tw-persona .pn-l{display:none!important}.tw-persona .pn-s{display:block}}
/* ===== Onboarding agent: automation example (HR tower) ===== */
.tw-onb{background:var(--bg);padding:28px 0 18px;min-height:calc(100vh - 70px);display:flex;flex-direction:column;gap:16px}
.at-sales #tower-root .tw-onb,.at-sales #tower-root .chap[data-for=".tw-onb"]{display:none!important}
.onb-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.onb-k{font:600 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
.onb-top h2{margin:0;font-size:clamp(24px,3vw,32px)}
.onb-lede{margin:6px 0 0;color:var(--muted);max-width:52ch}
.onb-meter{flex:none;font-size:14px;color:var(--muted);padding:8px 12px;border-radius:999px;background:var(--panel);box-shadow:var(--shadow);font-variant-numeric:tabular-nums}
.onb-meter b{color:var(--green)}
.onb-body{display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px;align-items:start}
.onb-rail{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;position:relative}
.onb-rail button{width:100%;display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px;border:0;border-radius:12px;background:none;text-align:left;font:inherit;font-size:14.5px;color:var(--muted)}
.onb-dot{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--line2);background:var(--panel);font-size:15px;transition:background .25s,color .25s,border-color .25s}
.onb-rt{flex:1;min-width:0}
.onb-hu{font-size:11.5px;font-weight:600;color:var(--warn);background:var(--warn-soft);padding:2px 7px;border-radius:999px}
.onb-rail button.done .onb-dot{background:var(--green);border-color:var(--green);color:#fff}
.onb-rail button.on{background:var(--panel);color:var(--text);font-weight:600;box-shadow:var(--shadow)}
.onb-rail button.on .onb-dot{border-color:var(--accent);color:var(--accent)}
.onb-view{display:grid}
.onb-card{grid-area:1/1;background:var(--panel);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:20px;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.onb-card.on{opacity:1;visibility:visible;transition:opacity .3s}
.onb-t{margin:0 0 6px;font:500 12.5px/1.3 var(--mono);color:var(--faint)}
.onb-card h3{margin:0 0 12px;font-size:21px}
.onb-rule{margin:0 0 14px;display:grid;gap:6px}
.onb-rule div{display:grid;grid-template-columns:84px 1fr;gap:10px;padding:9px 12px;border-radius:10px;background:var(--band,#f3f6fb)}
.onb-rule dt{font:600 12px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--accent-ink)}
.onb-rule div:last-child dt{color:var(--warn)}
.onb-rule dd{margin:0;font-size:15px;line-height:1.45}
.onb-msg{display:flex;gap:10px;align-items:flex-start;margin:0 0 10px}
.onb-bot{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--accent-soft);color:var(--accent)}
.onb-bot svg{width:22px;height:22px}
.onb-msg p{margin:0;padding:10px 14px;border-radius:4px 14px 14px 14px;background:var(--accent-soft);color:var(--text);font-size:15px;line-height:1.45}
.onb-card.on .onb-msg p{animation:onbIn .4s var(--ease) .15s both}
@keyframes onbIn{from{opacity:0;transform:translateY(6px)}}
.onb-who{display:flex;gap:8px;align-items:center;margin:0 0 10px;padding:9px 12px;border-radius:10px;background:var(--warn-soft);color:var(--warn);font-size:14.5px;font-weight:500}
.onb-sys{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.onb-sys span{font-size:12.5px;padding:4px 9px;border-radius:999px;border:1px solid var(--line2);color:var(--muted)}
.onb-stats{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.onb-stats li{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:12px;background:var(--green-soft)}
.onb-stats b{font-size:24px;color:var(--green)}
.onb-stats span{font-size:13px;color:var(--muted);line-height:1.35}
.onb-note{margin:0 0 14px;color:var(--muted);font-size:14.5px}
.onb-acts{display:flex;gap:10px;flex-wrap:wrap}
.onb-replay{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);font:inherit;font-size:14.5px}
.onb-ctl{display:flex;gap:10px;margin-left:280px}
.onb-ctl .st-back{width:52px;height:52px;flex:none;display:grid;place-items:center;border-radius:14px;border:1px solid var(--line2);background:var(--panel);font-size:18px}
.onb-ctl .st-back .ph{transform:scaleX(-1)}.onb-ctl .st-back:disabled{opacity:.35}
.onb-ctl .st-next{flex:1;justify-content:center;min-height:52px;border-radius:14px!important;font-size:16px}
.tw-onb.onb-fin .onb-ctl{visibility:hidden}
@media(max-width:820px){
  .tw-onb{padding:14px 0 0;gap:10px;min-height:calc(100svh - 56px)}
  .onb-lede{display:none}.onb-top h2{font-size:22px}.onb-k{margin-bottom:4px}
  .onb-meter{padding:6px 10px;font-size:13px}
  .onb-body{grid-template-columns:1fr;gap:10px}
  .onb-rail{flex-direction:row;justify-content:space-between;gap:0}
  .onb-rail:before{content:"";position:absolute;left:22px;right:22px;top:50%;height:1.5px;background:var(--line2)}
  .onb-rail li{position:relative}
  .onb-rail button{width:44px;padding:0;justify-content:center}
  .onb-rail button.on{background:none;box-shadow:none}
  .onb-rail button.on .onb-dot{background:var(--accent);color:#fff}
  .onb-rt,.onb-hu{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .onb-card{padding:16px}.onb-card h3{font-size:19px;margin-bottom:10px}
  .onb-rule div{grid-template-columns:1fr;gap:2px;padding:8px 10px}
  .onb-rule dd,.onb-msg p{font-size:14.5px}
  .onb-stats{grid-template-columns:1fr}.onb-stats li{flex-direction:row;align-items:baseline;gap:10px;padding:10px 12px}
  .onb-ctl{margin:0}
}
@media(prefers-reduced-motion:reduce){.onb-card,.onb-card.on{transition:none}.onb-card.on .onb-msg p{animation:none}}
/* home captions: stack in one grid cell so the box grows to the tallest line (no overlap on phones) */
.s-captions,.s-captions-tall{display:grid;min-height:0;flex-shrink:0}
.s-captions p{position:relative;inset:auto;grid-area:1/1;margin:0}
.story.static .s-captions p{grid-area:auto}
/* dark section breaks: full-bleed with a side shadow (border-image outsets get clipped on iOS Safari) */
.chap,section.opm-flow,div.tw-arch{border-image:none!important;box-shadow:0 0 0 100vmax #0b1322!important;clip-path:inset(0 -100vmax)}
.s-captions p{transition:opacity .2s,transform .2s}.s-captions p.on{transition:opacity .4s .18s,transform .45s cubic-bezier(.16,1,.3,1) .18s}
/* print / PDF: the phone one-topic-per-screen mode must not hide topics (print width is under 820px) */
@media print{
  .g-one .module,.g-one .module:not(.g-show),.g-index .module{display:block!important;padding-bottom:0!important}
  .g-one .g-head,.g-index .g-head{display:block!important}
  .g-nav,.g-index .g-toc,.g-toc{display:none!important}
}
@media print{.module#start{break-before:auto!important}}
/* home: two downloadable posters */
.s-posters{padding:72px 20px;max-width:1120px;margin:0 auto}
.s-posters .s-h2{margin-bottom:24px}
.s-pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.s-pcard{background:var(--panel);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:12px}
.s-pcard img{width:100%;height:auto;aspect-ratio:900/1272;object-fit:cover;object-position:top;border-radius:12px;box-shadow:0 0 0 1px var(--line)}
.s-pcard h3{margin:0;font-size:19px}.s-pcard p{margin:0;color:var(--muted);font-size:15px}
.s-pcard .tw-poster-actions{margin-top:auto}
@media(max-width:820px){.s-posters{padding:48px 16px}.s-pgrid{grid-template-columns:1fr}.s-pcard img{max-width:420px;margin:0 auto}}
/* back to top */
.totop{position:fixed;right:22px;bottom:calc(92px + env(safe-area-inset-bottom));z-index:59;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line2);background:var(--panel);color:var(--text);font-size:20px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .25s var(--ease),visibility 0s .25s}
.totop.on{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .25s var(--ease)}
.totop .ph{transform:rotate(-90deg)}
.totop:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
body:has(.ace.open) .totop{display:none}
@media(max-width:820px){.totop{right:15px;bottom:calc(78px + env(safe-area-inset-bottom));width:48px;height:48px}}
@media(prefers-reduced-motion:reduce){.totop,.totop.on{transition:none;transform:none}}
@media print{.totop{display:none}}
/* home posters: side by side in one frame, phones included */
.s-posters{min-height:calc(100svh - var(--toph,56px));display:flex;flex-direction:column;justify-content:center}
.s-pgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px;align-items:stretch}
.s-pcard img{max-height:62svh;object-fit:contain;background:var(--panel2);aspect-ratio:auto}
@media(max-width:820px){
  .s-posters{padding:24px 12px}
  .s-posters .s-h2{font-size:26px;margin-bottom:14px}
  .s-pgrid{gap:10px}
  .s-pcard{padding:8px;gap:8px;border-radius:14px}
  .s-pcard img{max-width:none;max-height:48svh;border-radius:8px}
  .s-pcard h3{font-size:14.5px;line-height:1.25}.s-pcard p{display:none}
  .s-pcard .tw-poster-actions{flex-direction:column;gap:6px}
  .s-pcard .tw-poster-actions .btn{min-height:44px;padding:0 8px;font-size:13.5px;justify-content:center;width:100%}
}
.s-posters{min-height:0;justify-content:flex-start;padding-top:40px;padding-bottom:40px}
.s-posters .s-h2{margin-bottom:16px}
.s-pcard img{max-height:calc(100svh - 400px);min-height:260px}
@media(max-width:820px){.s-posters{padding:20px 12px 28px}.s-pcard img{max-height:calc(100svh - 340px);min-height:0}}
/* hero network: reach the full width on desktop */
@media(min-width:821px){.s-dots.net{mask-image:radial-gradient(95% 90% at 50% 50%,#000 60%,transparent);-webkit-mask-image:radial-gradient(95% 90% at 50% 50%,#000 60%,transparent)}}
/* five rules: words flow as a sentence (the word-reveal spans were becoming grid cells) */
.rules li{display:block!important;position:relative;padding-left:48px}
.rules li:before{position:absolute;left:0;top:21px}
.rules li b{display:block;margin-bottom:2px}
@media(max-width:820px){.rules li{padding-left:36px;font-size:17px}.rules li:before{top:20px}}
/* field guide on phones: lift the floating buttons above the Previous / Next bar */
@media(max-width:820px){
  body.g-one .ace{bottom:calc(84px + env(safe-area-inset-bottom))}
  body.g-one .totop{bottom:calc(150px + env(safe-area-inset-bottom))}
}
/* journey: Play / Pause between Back and Next */
.st-play{position:relative;overflow:hidden;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:96px;height:52px;padding:0 16px;border-radius:14px;border:1px solid var(--line2);background:var(--panel);color:var(--text);font:600 15px var(--sans)}
.st-play .ph{font-size:18px;color:var(--accent)}
.st-play.on{border-color:var(--accent);color:var(--accent-ink)}
.st-pbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left}
.st-play:not(.on){animation:stPop .5s var(--ease) both,stGlow 2.4s ease-in-out .6s 2}
@keyframes stPop{from{transform:scale(.7);opacity:0}}
@keyframes stGlow{50%{box-shadow:0 0 0 6px var(--accent-soft)}}
.st.fin .st-play{display:none}
@media(prefers-reduced-motion:reduce){.st-play{animation:none!important}.st-pbar{transition:none!important}}
@media(max-width:820px){body.sfx-st .ace{bottom:calc(84px + env(safe-area-inset-bottom))}body.sfx-st .totop{bottom:calc(150px + env(safe-area-inset-bottom))}}
/* ===== Journey story player (phones): no scroll pin, everything inside one frame ===== */
@media(max-width:820px){
  .st-track{align-items:flex-start}
  .st-view{transition:height .35s var(--ease)}
  .st-ctl{position:static!important;margin:10px 0 0!important;padding:0!important;background:none!important;border:0!important}
  .st-done{text-align:center}
  .st-done .st-launch{max-height:120px;overflow:hidden;margin-bottom:8px}
  .st-done h3{font-size:18px;margin-bottom:10px}
  .st-score{margin-bottom:10px}.st-score b{font-size:28px}
  .st-try{margin:0 0 6px;font-size:13px}
  .st-people{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin:0 -16px 12px;padding:0 16px}
  .st-people::-webkit-scrollbar{display:none}
  .st-people button{flex:none}
  .st-again{flex-wrap:nowrap}
  .st-again .btn{background:var(--text)!important;color:#fff!important;border-color:var(--text)!important;flex:1;justify-content:center;min-height:48px}
  .st-again .st-replay{min-height:48px}
  body.st-focus .totop{opacity:0;visibility:hidden}
  body.st-focus .ace{opacity:0;pointer-events:none;transition:opacity .2s}
}
@media(prefers-reduced-motion:reduce){.st-view{transition:none}}
@media(max-width:820px){
  .st-done{overflow:hidden}
  .st-again{gap:8px}.st-again .btn{min-width:0}.st-again .st-replay{flex:none}
}
/* auto-advance bar under Next */
.st-next{position:relative;overflow:hidden}
.st-next .st-pbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.85);transform:scaleX(0);transform-origin:left}
/* phones: onboarding agent is not pinned; the card and its buttons fit together */
@media(max-width:820px){.tw-onb{min-height:0!important;padding-bottom:24px}.onb-card{padding:14px}.onb-rule{margin-bottom:10px}.onb-rule div{padding:7px 10px}.onb-card h3{margin-bottom:8px}}
/* phones: tighter scenario so personas, steps and buttons fit one screen while pinned */
@media(max-width:820px){
  #tower-root .tw-jwrap .tw-personas{padding:6px 0 8px!important}
  #tower-root .tw-jwrap .tw-compare{margin-top:0!important;padding-top:10px!important}
  #tower-root .tw-jwrap .tw-compare-top{margin:0 0 2px!important}
  #tower-root .tw-jwrap .tw-compare-top h2{font-size:18px}
  .st-story{margin:0 0 8px!important;font-size:15px}
  .st-chips{margin-bottom:8px!important}
  .st-ctl{margin-top:8px!important}
  /* onboarding: buttons ride along at the bottom while the section is on screen */
  .onb-ctl{position:sticky;bottom:0;z-index:4;margin:0 -16px!important;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line)}
  .onb-sys{display:none}
  body:has(.onb-ctl:hover) .totop{opacity:0}
}
@media(max-width:820px){.st-ctl.onb-ctl{position:sticky!important;bottom:0;margin:0 -16px!important;padding:10px 16px calc(10px + env(safe-area-inset-bottom))!important;background:var(--bg)!important;border-top:1px solid var(--line)!important}}
@media(max-width:820px){body.onb-focus .totop{opacity:0;visibility:hidden}body.onb-focus .ace{opacity:0;pointer-events:none;transition:opacity .2s}}
/* phones: onboarding is pinned, so it must fit one screen (no sticky bar inside a pin) */
@media(max-width:820px){
  .st-ctl.onb-ctl{position:static!important;margin:8px 0 0!important;padding:0!important;background:none!important;border:0!important}
  .tw-onb{padding:8px 0 0!important;gap:8px!important}
  .onb-k{display:none}.onb-top h2{font-size:20px}
  .onb-rule{gap:4px}
  .onb-rule div{display:block!important;padding:6px 10px!important}
  .onb-rule dt{display:inline;margin-right:6px;font-size:11px}
  .onb-rule dd{display:inline;font-size:14px}
  .onb-t{margin-bottom:2px}.onb-card h3{font-size:18px}
  .onb-msg{margin-bottom:6px}.onb-msg p{font-size:14px;padding:8px 12px}
  .onb-who{padding:7px 10px;font-size:13.5px;margin-bottom:0}
}
@media(max-width:820px){
  #tower-root>.pin-spacer>.tw-onb,#tower-root>.tw-onb{margin-top:0!important}
}
@media(max-width:820px){.st-done .st-launch{display:none!important}.st-done{padding-top:18px!important}}
/* pinned sections must not carry a margin on their pin-spacer (it shifts them after GSAP measures) */
#tower-root>.pin-spacer:has(>.tw-onb),#tower-root>.pin-spacer:has(>.tw-poster),#opm-root>.pin-spacer:has(>.tw-poster){margin-top:0!important}
@media(max-width:820px){.st-slide:not(.st-done) .st-head{display:none}.st-slide h3{margin-top:0}}
/* home close: why it matters */
.s-why-list{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:1040px}
.s-why-list li{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--shadow);font-size:15.5px;line-height:1.45;color:var(--muted)}
.s-why-list b{color:var(--text)}
.s-why-list .ph{flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:var(--accent-soft);color:var(--accent);font-size:20px}
.s-why-note{margin:14px 0 0;font-size:14px;color:var(--faint)}
@media(max-width:820px){.s-why-list{grid-template-columns:1fr;gap:10px}.s-why-list li{padding:12px 14px;font-size:15px}}
/* next-page link at the end of each page */
.pg-next{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:28px auto 56px;max-width:1120px;padding:20px 22px;border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--shadow);color:var(--text);text-decoration:none}
.pg-next span{display:grid;gap:3px}.pg-next small{font:600 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
.pg-next b{font-size:19px}.pg-next em{font-style:normal;color:var(--muted);font-size:14.5px}
.pg-next>.ph{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--text);color:#fff;font-size:18px;transition:transform .25s var(--ease)}
.pg-next:hover>.ph{transform:translateX(3px)}
@media(max-width:820px){.pg-next{margin:20px 0 40px;padding:16px}.pg-next b{font-size:17px}}
@media print{.pg-next{display:none}}
/* home: five layers + control tower fully open (no pin) */
.s-scene.flat .s-pin{min-height:0;padding-top:clamp(40px,7vh,72px);padding-bottom:clamp(40px,7vh,72px)}
.s-scene.flat .s-captions{display:block;min-height:0}
.s-scene.flat .s-captions p{position:static;grid-area:auto;opacity:1;transform:none;margin:0 0 8px;font-size:17px;padding:8px 12px;border-radius:12px;border-left:3px solid var(--line2);transition:background .2s,border-color .2s}
.s-opm.flat .s-captions p{cursor:pointer}
.s-opm.flat .s-captions p.pick,.s-opm.flat .s-captions p:hover,.s-opm.flat .s-captions p:focus-visible{background:var(--accent-soft);border-left-color:var(--accent);outline:0}
@media(max-width:820px){.s-scene.flat .s-pin{padding:32px 20px}.s-scene.flat .s-captions p{font-size:16px}}
@media(max-width:820px){
  /* phones: heading, short intro, then the picture, then the captions and link */
  .s-scene.flat .s-pin{display:flex;flex-direction:column;gap:14px}
  .s-scene.flat .s-copy{display:contents}
  .s-scene.flat .s-kicker{order:1;margin:0}.s-scene.flat .s-h2{order:2;margin:0}.s-scene.flat .s-def{order:3;margin:0}.s-scene.flat .s-ex{order:3;margin:0}
  .s-scene.flat .s-opm-art,.s-scene.flat .s-ct-art{order:4;width:100%;max-height:340px}
  .s-scene.flat .s-captions{order:5}.s-scene.flat .s-more{order:6;align-self:flex-start}
  .s-scene.flat .s-captions p{font-size:15.5px;padding:7px 10px;margin-bottom:6px}
}
/* home: no caption bullets under the five layers and the control tower */
.s-scene.flat .s-captions{display:none}
.flat-key{display:none}
@media(max-width:820px){
  .flat-key{order:5;display:flex;flex-wrap:wrap;gap:6px 12px;margin:0;font-size:13.5px;color:var(--muted)}
  .flat-key span{display:inline-flex;align-items:center;gap:5px}
  .flat-key b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--text);color:#fff;font-size:11.5px}
  .s-scene.flat .s-more{order:6}
}
/* ===== Skyline polish: roomy tiles, steady layout, a nudge to tap ===== */
.sky{display:flex!important;flex-direction:column}
.sky-hint{order:0;display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:14px;font-weight:600;color:var(--accent-ink)}
.sky-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);animation:skyPing 1.8s ease-out infinite}
@keyframes skyPing{0%{box-shadow:0 0 0 0 rgba(36,112,204,.5)}100%{box-shadow:0 0 0 12px rgba(36,112,204,0)}}
.sky.sky-used .sky-hint{opacity:0;pointer-events:none}.sky-hint{transition:opacity .3s}
.sky-towers{order:1}.sky-detail{order:2}.sky-base{order:3}.sky-so{order:4}
.sky-link{display:none}
.sky-card{transition:box-shadow .2s,border-color .2s,background .2s}
.sky-t.sel .sky-card,.sky-t.live.sel .sky-card{transform:none!important}
.sky-t.sel .sky-card{border-style:solid;border-color:var(--accent);box-shadow:0 0 0 3px rgba(36,112,204,.22)}
.sky-t:active .sky-card{transform:none!important;background:var(--accent-soft)}
.sky-t.live:active .sky-card{background:#16233c}
.sky:not(.sky-used) .sky-t:not(.sel){animation:skyNudge 2.4s ease-in-out 1.2s 3}
@keyframes skyNudge{0%,100%{transform:none}50%{transform:translateY(-4px)}}
.sky-detail{margin:14px 0 14px;padding:14px 16px;min-height:5.6em;border-radius:14px;background:var(--panel);box-shadow:var(--shadow);font-size:15.5px;line-height:1.5}
.sky-detail a{display:inline-flex;align-items:center;gap:4px;margin-top:4px}
@media(max-width:820px){
  .sky-lede{margin-bottom:16px!important}
  .sky-towers{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:8px!important}
  .sky-t.live{grid-column:span 3}.sky-t:not(.live){grid-column:span 2}
  .sky-card{flex-direction:row;justify-content:flex-start;gap:10px;padding:12px 12px!important;min-height:60px}
  .sky-t:not(.live) .sky-card{flex-direction:column;justify-content:center;gap:6px;text-align:center;padding:10px 4px!important}
  .sky-ic{flex:none;width:36px!important;height:36px!important;font-size:18px!important}
  .sky-card b{font-size:15px!important;text-align:left}
  .sky-t:not(.live) .sky-card b{font-size:13.5px!important;text-align:center}
  .sky-card small{font-size:10.5px!important}
  .sky-t.live .sky-card>b,.sky-t.live .sky-card>small{display:block}
  .sky-t.live .sky-card{display:grid;grid-template-columns:36px 1fr;grid-template-rows:auto auto;column-gap:10px;row-gap:0;align-items:center}
  .sky-t.live .sky-ic{grid-row:1/3}
  .sky-t.live .sky-card b{align-self:end;line-height:1.1}.sky-t.live .sky-card small{align-self:start}
  .sky-detail{min-height:6.6em;font-size:15px;padding:12px 14px}
  .sky-band{padding:12px 14px;font-size:14.5px}
}
@media(prefers-reduced-motion:reduce){.sky-dot,.sky:not(.sky-used) .sky-t:not(.sel){animation:none}}
@media(max-width:820px){.sky-t.live .sky-card small{text-align:left}.sky-detail{min-height:7.4em}}
.sky-detail{min-height:7.4em}
/* site footer */
.site-foot{background:#0b1322;color:#c4d2ea;padding:36px clamp(20px,6vw,96px) calc(36px + env(safe-area-inset-bottom));font-size:14.5px;line-height:1.55;position:relative;z-index:2}
.site-foot-in{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:10px 24px;align-items:center}
.sf-brand{margin:0;display:grid;gap:2px}.sf-brand b{color:#fff;font-size:16px}.sf-brand span{color:#9db8e8}
.sf-links{display:flex;gap:18px}
.sf-links a{color:#fff;text-decoration:none;font-weight:600;border-bottom:1px solid rgba(255,255,255,.4);padding:10px 0}
.sf-links a:hover{border-bottom-color:#fff}
.sf-fine{grid-column:1/-1;margin:6px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);color:#8fa3c4;font-size:13px}
@media(max-width:820px){.site-foot-in{grid-template-columns:1fr}.sf-links{order:2}.sf-fine{order:3}}
@media print{.site-foot{display:none}}
@media(max-width:820px){.sf-fine{padding-right:64px}}
/* Orbit: detailed answers */
.ace-m.bot ul{margin:8px 0 8px;padding-left:18px}.ace-m.bot li{margin-bottom:6px}
.ace-m.bot:has(ul){max-width:94%}
/* analytics notice */
.ga-note{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:80;max-width:420px;display:grid;gap:10px;padding:14px 16px;border-radius:16px;background:#0b1322;color:#e6eefb;font-size:14px;line-height:1.45;box-shadow:0 18px 40px -16px rgba(0,0,0,.5);opacity:0;transform:translateY(12px);transition:opacity .3s,transform .3s var(--ease)}
.ga-note.on{opacity:1;transform:none}
.ga-note p{margin:0}.ga-note a{color:#9db8e8;font-weight:600}
.ga-note div{display:flex;gap:8px;justify-content:flex-end}
.ga-note button{min-height:40px;padding:0 16px;border-radius:12px;border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;font:600 14px var(--sans);cursor:pointer}
.ga-note .ga-ok{background:#fff;color:#0b1322;border-color:#fff}
@media(max-width:820px){.ga-note{left:12px;right:12px;max-width:none;bottom:calc(12px + env(safe-area-inset-bottom));z-index:90}}
@media print{.ga-note{display:none}}