:root{--ink:#0F2A33;--ink-2:#4A6670;--line:#D3DEDF;--bg:#E9EFEE;--surf:#FFFFFF;
--ok:#0E8C74;--ok-bg:#DFF0EA;--near:#C8871A;--near-bg:#FAEEDA;--low:#C0495B;--low-bg:#F8E3E5;
--acc:#FFC94A;--c-inf:#0E8C74;--c-hg:#3C6E9F;--c-st:#C8871A;--c-ot:#7A5AA8;}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Inter',-apple-system,'Segoe UI',sans-serif;
 font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px 72px}
h1,h2,h3{font-family:'Bricolage Grotesque','Inter',sans-serif;font-weight:700;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(30px,5vw,52px);line-height:1.02}
h2{font-size:24px} h3{font-size:18px}
.n,.score-v,.kpi b,.ax,.slab,.cc-kpi b,.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.eyebrow{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
.hero{padding:52px 0 30px;border-bottom:3px solid var(--ink)}
.hero p.thesis{font-size:17px;max-width:56ch;color:var(--ink-2);margin:16px 0 0}
.hero .period{margin-top:10px;font-size:13px;color:var(--ink-2)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:28px}
.kpi{background:var(--surf);padding:16px 18px}
.kpi b{display:block;font-size:26px;font-weight:600;letter-spacing:-.02em}
.kpi span{font-size:11px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.08em}
section{margin-top:52px}
.lead{max-width:64ch;color:var(--ink-2);margin:10px 0 0}
.gates{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.gate{background:var(--surf);border:1px solid var(--line);padding:18px}
.gate .step{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-2)}
.gate h4{margin:6px 0 4px;font-family:'Bricolage Grotesque',sans-serif;font-size:17px}
.gate .bm{display:inline-block;margin-top:8px;background:var(--ink);color:#fff;padding:2px 8px;font-family:'IBM Plex Mono',monospace;font-size:11.5px}
.gate p{margin:8px 0 0;font-size:13px;color:var(--ink-2)}
.gate .hit{margin-top:12px;font-size:12px;border-top:1px dashed var(--line);padding-top:9px}
.gate .hit b{font-family:'IBM Plex Mono',monospace}

/* interactive module */
.tool{background:var(--surf);border:1px solid var(--line);margin-top:22px}
.bar{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-end;padding:16px 20px;border-bottom:1px solid var(--line)}
.ctl label{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-weight:600;margin-bottom:7px}
.pills{display:flex;gap:6px;flex-wrap:wrap}
.pill{font:500 12.5px/1 'Inter',sans-serif;padding:8px 13px;border:1px solid var(--line);background:#fff;color:var(--ink-2);cursor:pointer;border-radius:2px}
.pill:hover{border-color:var(--ink-2);color:var(--ink)}
.pill[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.pill:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.tool-body{display:grid;grid-template-columns:1fr 306px;gap:0}
.plot{padding:16px 12px 6px 6px;position:relative;min-width:0}
.side{border-left:1px solid var(--line);padding:14px 16px;max-height:620px;overflow-y:auto}
.side h4{margin:0 0 4px;font-family:'Bricolage Grotesque',sans-serif;font-size:14px}
.side .hint{font-size:11.5px;color:var(--ink-2);margin:0 0 12px}
.lg{display:flex;align-items:center;gap:9px;padding:7px 6px;border-radius:3px;cursor:pointer;border:none;background:none;width:100%;text-align:left}
.lg:hover{background:var(--bg)}
.lg.off{opacity:.34}
.lg i{width:12px;height:3px;border-radius:2px;flex:none}
.lg .nmw{flex:1;min-width:0}
.lg .nm2{display:block;font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg .sub{display:block;font-size:10.5px;color:var(--ink-2);font-family:'IBM Plex Mono',monospace}
.lg .badge{font-family:'IBM Plex Mono',monospace;font-size:10px;padding:2px 5px;border-radius:2px;flex:none}
.badge.ok{background:var(--ok-bg);color:var(--ok)} .badge.near{background:var(--near-bg);color:var(--near)}
.badge.low{background:var(--low-bg);color:var(--low)}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;padding:10px 12px;font-size:12px;
 border-radius:3px;opacity:0;transition:opacity .12s;max-width:250px;z-index:5}
.tip b{display:block;font-size:13px;margin-bottom:6px;color:var(--acc)}
.tip table{width:100%;border:0;margin:0}
.tip td{border:0;padding:1px 0;color:#CFDDE0;font-size:11.5px}
.tip td.v{text-align:right;font-family:'IBM Plex Mono',monospace;color:#fff}
.readout{padding:14px 20px;border-top:1px solid var(--line);background:var(--bg);font-size:13px;color:var(--ink-2)}
.readout b{color:var(--ink)}
svg.chart{width:100%;height:auto;display:block;overflow:visible}
.gridl{stroke:var(--line);stroke-width:1}
.axl{font-family:'IBM Plex Mono',monospace;font-size:10px;fill:var(--ink-2)}
.stagel{font-size:11.5px;fill:var(--ink);font-weight:600}
.stagen{font-size:10px;fill:var(--ink-2);font-family:'IBM Plex Mono',monospace}
.bmpath{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:5 4}
.bmdot{fill:var(--ink)}
.line{fill:none;stroke-width:1.8;opacity:.5;transition:opacity .12s,stroke-width .12s}
.line.hi{opacity:1;stroke-width:3.4}
.line.dim{opacity:.09}
.hit{fill:none;stroke:transparent;stroke-width:14;cursor:pointer}
.pt{opacity:.5;transition:opacity .12s} .pt.hi{opacity:1} .pt.dim{opacity:.07}
.endlab{font-size:11px;font-weight:600;paint-order:stroke;stroke:#fff;stroke-width:3.5px;stroke-linejoin:round}

/* campaign cards */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:22px}
.cc{background:var(--surf);border:1px solid var(--line);padding:20px}
.cc-kpi{display:flex;gap:20px;margin-top:12px;flex-wrap:wrap}
.cc-kpi span{display:block;font-size:10px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.07em}
.cc-kpi b{display:block;font-size:16px;letter-spacing:-.02em;color:var(--ink)}
.cc-scores{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.score{padding:10px 11px;border-left:4px solid}
.score-l{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
.score-v{display:block;font-size:19px;font-weight:600;letter-spacing:-.02em;margin-top:2px}
.score-b{font-size:10.5px;color:var(--ink-2)}
.score.ok{background:var(--ok-bg);border-color:var(--ok)} .score.ok .score-v{color:var(--ok)}
.score.near{background:var(--near-bg);border-color:var(--near)} .score.near .score-v{color:var(--near)}
.score.low{background:var(--low-bg);border-color:var(--low)} .score.low .score-v{color:var(--low)}
table{width:100%;border-collapse:collapse;margin-top:12px}
th{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2);text-align:left;
 padding:8px 9px;border-bottom:2px solid var(--ink);font-weight:600;white-space:nowrap}
td{padding:8px 9px;border-bottom:1px solid var(--line);font-size:13px}
th.n,td.n{text-align:right} td.nm{font-weight:500;white-space:nowrap}
td.ok{color:var(--ok);font-weight:600} td.near{color:var(--near)} td.low{color:var(--low)}
tr.thin td{opacity:.5}
table.todo td{vertical-align:top;font-size:12.5px;line-height:1.45}
table.todo td.nm{white-space:normal;width:130px}
table.todo td b{display:block;margin-bottom:2px}
table.todo .badge{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:10px;padding:2px 6px;border-radius:2px}
table.todo .badge.low{background:var(--low-bg);color:var(--low)}
table.todo .badge.near{background:var(--near-bg);color:var(--near)}
.callout p+p{margin-top:14px}
.sw{display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:2px}
details.dt{background:var(--surf);border:1px solid var(--line);margin-top:10px;padding:0 18px}
details.dt summary{cursor:pointer;padding:13px 0;font-weight:600;font-size:13.5px;list-style:none}
details.dt summary::-webkit-details-marker{display:none}
details.dt summary:before{content:'+';display:inline-block;width:18px;font-family:'IBM Plex Mono',monospace;color:var(--ink-2)}
details.dt[open] summary:before{content:'–'}
details.dt[open]{padding-bottom:18px}
.callout{background:var(--ink);color:#fff;padding:26px 28px;margin-top:22px}
.callout h3{color:var(--acc);font-size:20px}
.callout p{margin:10px 0 0;max-width:66ch;color:#CFDDE0}
.callout .pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:20px}
.callout .pair div{border-top:2px solid rgba(255,255,255,.25);padding-top:10px}
.callout .pair b{display:block;font-family:'IBM Plex Mono',monospace;font-size:19px;color:#fff}
.callout .pair span{font-size:12.5px;color:#A9C0C5}
.panel{background:var(--surf);border:1px solid var(--line);padding:22px;margin-top:20px}
.fig{width:100%;height:auto;display:block;margin:8px 0}
.grid{stroke:var(--line);stroke-width:1}
.bmline{stroke:var(--ink);stroke-width:1.4;stroke-dasharray:4 3}
.bmlab{font-family:'IBM Plex Mono',monospace;font-size:10px;fill:var(--ink)}
.ax{font-size:10px;fill:var(--ink-2)} .ax.r{text-anchor:end} .ax.b{font-size:12px;fill:var(--ink);font-weight:600}
.cap{font-size:11px;fill:var(--ink-2);font-family:'Inter',sans-serif}
.slope{stroke:var(--c-hg);stroke-width:1.6;opacity:.55}
.dot.a{fill:var(--low)} .dot.b{fill:var(--ok)}
.slab{font-size:9.5px;fill:var(--ink-2)} .slab.r{text-anchor:end}
ol.actions{counter-reset:a;list-style:none;padding:0;margin:0}
ol.actions li{counter-increment:a;position:relative;padding:14px 0 14px 46px;border-top:1px solid var(--line)}
ol.actions li:first-child{border-top:0;padding-top:0}
ol.actions li:first-child:before{top:-2px}
ol.actions li:before{content:counter(a);position:absolute;left:0;top:12px;width:28px;height:28px;background:var(--ink);
 color:var(--acc);font-family:'IBM Plex Mono',monospace;font-size:13px;display:flex;align-items:center;justify-content:center}
ol.actions b{display:block;font-size:15px}
ol.actions p{margin:3px 0 0;color:var(--ink-2);font-size:13px;max-width:72ch}
footer{margin-top:48px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-2)}
.tool-body.sl{grid-template-columns:1fr 268px}
.sl .side{max-height:430px}
.dv{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-2)}
.dv b{color:var(--ok)}
.slk{font-size:11.5px;fill:var(--ink-2);font-family:'IBM Plex Mono',monospace}
.slk.r{text-anchor:end}
.sline{fill:none;stroke-width:2;opacity:.45;transition:opacity .12s,stroke-width .12s}
.sline.hi{opacity:1;stroke-width:3.6} .sline.dim{opacity:.08}
.sdot{transition:opacity .12s} .sdot.dim{opacity:.08}
.snm{font-size:11.5px;font-weight:600;paint-order:stroke;stroke:#fff;stroke-width:3.5px;stroke-linejoin:round}
@media (max-width:960px){.tool-body.sl{grid-template-columns:1fr}.tool-body{grid-template-columns:1fr}.side{border-left:0;border-top:1px solid var(--line);max-height:340px}
 .cards{grid-template-columns:1fr}}
@media (max-width:760px){.kpis,.gates,.cc-scores,.callout .pair{grid-template-columns:1fr 1fr}
 table{display:block;overflow-x:auto;white-space:nowrap}}
@media print{body{background:#fff}.cc,.panel,section,.tool{break-inside:avoid}.side{max-height:none}}

.cards.m7{grid-template-columns:repeat(4,1fr);gap:14px}
.cards.m7 .cc{padding:16px}
.cards.m7 .cc-kpi{gap:14px;margin-top:10px}
.cards.m7 .cc-kpi b{font-size:14px}
.cards.m7 .cc-scores{gap:6px;margin-top:12px}
.cards.m7 .score{padding:8px 9px}
.cards.m7 .score-v{font-size:16px}
.cards.m7 .score-l{font-size:9px}
.cards.m7 .score-b{font-size:9.5px}
.callout.tight{padding:20px 24px;margin-top:20px}
.callout.tight p{margin:0;max-width:none;color:#CFDDE0}
.callout.tight b{color:var(--acc)}
.srcpill{display:inline-block;margin-left:8px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;
 letter-spacing:.05em;background:var(--bg);color:var(--ink-2);padding:1px 5px;border-radius:2px;vertical-align:middle}
table.todo td.verdict{width:38%;white-space:normal}
table.todo .badge.ok{background:var(--ok-bg);color:var(--ok)}
.tline{fill:none;stroke-width:2.6}
.tdot{stroke:#fff;stroke-width:2}
.tval{font-family:'IBM Plex Mono',monospace;font-size:10.5px;fill:var(--ink);font-weight:600}
.qbar{transition:opacity .12s}
.qlab{font-family:'IBM Plex Mono',monospace;font-size:11px;fill:var(--ink);font-weight:600}
.qsub{font-family:'IBM Plex Mono',monospace;font-size:9.5px;fill:var(--ink-2)}
.qgrp{font-size:12px;fill:var(--ink);font-weight:600}
@media (max-width:1000px){.cards.m7{grid-template-columns:repeat(2,1fr)}}

/* ---- horizontal creative rail ---- */
.grail{position:relative;margin-top:22px}
.gscroll{display:flex;gap:16px;overflow-x:auto;padding:2px 2px 16px;scroll-snap-type:x mandatory;
 scrollbar-width:thin;scrollbar-color:var(--ink-2) var(--bg)}
.gscroll::-webkit-scrollbar{height:9px}
.gscroll::-webkit-scrollbar-track{background:var(--bg);border-radius:5px}
.gscroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px}
.gscroll::-webkit-scrollbar-thumb:hover{background:var(--ink-2)}
.gcard{flex:0 0 372px;scroll-snap-align:start;background:var(--surf);border:1px solid var(--line);
 display:flex;flex-direction:column}
.gvid{position:relative;background:#0B1F26;aspect-ratio:1/1;overflow:hidden}
.gvid video{width:100%;height:100%;object-fit:cover;display:block}
.gplay{position:absolute;inset:0;margin:auto;width:54px;height:54px;border-radius:50%;border:0;
 background:rgba(15,42,51,.78);color:#fff;font-size:17px;cursor:pointer;display:flex;align-items:center;
 justify-content:center;padding-left:4px;transition:background .15s,opacity .15s}
.gplay:hover{background:var(--ink)}
.gplay.playing{opacity:0}
.gvid:hover .gplay.playing{opacity:1}
.gdur{position:absolute;right:9px;bottom:9px;background:rgba(15,42,51,.85);color:#fff;
 font-family:'IBM Plex Mono',monospace;font-size:10.5px;padding:2px 7px;border-radius:2px}
.gbody{padding:15px 16px 16px;display:flex;flex-direction:column;flex:1}
.gbody .badge{align-self:flex-start;font-family:'IBM Plex Mono',monospace;font-size:10px;padding:3px 7px;border-radius:2px}
.gbody .badge.ok{background:var(--ok-bg);color:var(--ok)}
.gbody .badge.low{background:var(--low-bg);color:var(--low)}
.gbody h4{margin:9px 0 0;font-family:'Bricolage Grotesque',sans-serif;font-size:16px;letter-spacing:-.01em}
.gmet{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
 border:1px solid var(--line);margin:12px 0 11px}
.gmet div{background:var(--surf);padding:7px 5px;text-align:center}
.gmet b{display:block;font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600}
.gmet span{display:block;font-size:8.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);margin-top:1px}
.gmet .ok b{color:var(--ok)} .gmet .near b{color:var(--near)} .gmet .low b{color:var(--low)}
.gmet .neu b{color:var(--ink)}
.gbody p{margin:0 0 12px;font-size:12.5px;line-height:1.5;color:var(--ink-2);flex:1}
.gbody p b{color:var(--ink)}
.gfoot{font-size:10.5px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:9px}
.gfoot code{font-family:'IBM Plex Mono',monospace;font-size:9.5px;word-break:break-all;color:var(--ink-2)}
@media (max-width:760px){.gcard{flex:0 0 84vw}}