/* Story layer — the acts wrapped around the Phase 1 explorer. */

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:860px}

.act{padding:96px 0;border-top:1px solid var(--line-soft);position:relative}
.act-num{font:600 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--rack);margin-bottom:14px}
.act h2{font-size:clamp(28px,3.6vw,44px);line-height:1.05;letter-spacing:-.035em;max-width:20ch}
.act-lede{max-width:64ch;margin:16px 0 0;color:var(--muted);font-size:15.5px;line-height:1.62}
.act-lede em{color:var(--text);font-style:italic}
.act-note{max-width:64ch;margin:26px 0 0;color:var(--faint);font-size:12.5px;line-height:1.65}
.act-note b{color:var(--muted)}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.9,.24,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- hero ---------- */
.hero{padding:clamp(56px,9vh,110px) 0 84px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.hero-title{font-size:clamp(46px,9vw,116px);line-height:.9;letter-spacing:-.055em;font-weight:780;margin:16px 0 0}
.hero-title .vs{color:var(--faint);font-weight:300}
.hero-lede{max-width:60ch;margin:26px 0 0;font-size:clamp(15px,1.5vw,18px);line-height:1.6;color:var(--muted)}
.hero-lede b{color:var(--text);font-weight:640}
.hero-lede .g{color:var(--turf)}
.hero-lede .d{color:var(--rack)}

.tickers{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:44px}
.ticker{padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:var(--panel);position:relative;overflow:hidden}
.ticker::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px}
.ticker.golf::after{background:linear-gradient(90deg,var(--turf-dim),var(--turf))}
.ticker.dc::after{background:linear-gradient(90deg,var(--rack-dim),var(--rack))}
.tick-label{display:flex;align-items:center;gap:8px;font:600 10.5px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.tick-num{font-size:clamp(30px,4.4vw,50px);font-weight:700;letter-spacing:-.03em;margin:14px 0 6px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.ticker.golf .tick-num{color:var(--turf)}
.ticker.dc .tick-num{color:var(--rack)}
.tick-sub{font-size:11px;color:var(--faint);line-height:1.5}
.tick-chips{display:flex;gap:5px;margin-top:12px;flex-wrap:wrap}
.tick-chips button{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:99px;
  padding:5px 10px;font-size:10.5px;transition:.15s}
.tick-chips button:hover{color:var(--text);border-color:#2f4d57}
.tick-chips button.active{background:var(--panel-2);border-color:var(--rack);color:var(--text)}
.tick-note{max-width:70ch;margin:16px 0 0;font-size:11.5px;color:var(--faint);line-height:1.6}
.tick-note em{color:var(--muted);font-style:italic}
.scroll-hint{margin-top:46px;font:600 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--faint);animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(5px);opacity:1}}

/* ---------- junk stat ---------- */
.junk{margin:38px 0 0;padding:26px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}
.junk-row{display:grid;grid-template-columns:260px minmax(0,1fr);gap:22px;align-items:center;margin-bottom:22px}
.junk-side{min-width:0}
.junk-tag{display:inline-block;font:600 9px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  padding:4px 7px;border-radius:5px;border:1px solid;margin-bottom:9px}
.junk-tag.wrong{color:#e08c78;border-color:#6b3a30}
.junk-tag.right{color:var(--turf);border-color:var(--turf-dim)}
.junk-num{font-family:var(--mono);font-size:clamp(18px,2.4vw,27px);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.junk-row:first-child .junk-num{color:#e08c78}
.junk-row:nth-child(2) .junk-num{color:var(--turf)}
.junk-unit{font-size:11px;color:var(--faint);margin-top:4px}
.junk-bar-wrap{height:26px;background:#0a1216;border:1px solid var(--line-soft);border-radius:8px;overflow:hidden}
.junk-bar{height:100%;width:0;border-radius:7px;transition:width 1.6s cubic-bezier(.16,.8,.28,1)}
.junk-bar.wrong{background:linear-gradient(90deg,#6b3a30,#e08c78)}
.junk-bar.right{background:linear-gradient(90deg,var(--turf-dim),var(--turf))}
.junk-verdict{text-align:center;font-size:14px;color:var(--muted);padding-top:16px;border-top:1px solid var(--line-soft)}
.junk-verdict b{color:#e08c78;font-size:19px;font-variant-numeric:tabular-nums}

/* ---------- explorer act ---------- */
.explorer-act .app{max-width:1680px;margin:34px auto 0;padding:0 24px}
.controls-top{display:flex;gap:8px;justify-content:flex-end;margin-bottom:14px;flex-wrap:wrap}

/* ---------- charts ---------- */
.chart-card{margin-top:30px;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}
.chart-card svg{display:block;width:100%;height:auto;overflow:visible}
.card-title{font-size:15px;font-weight:640;margin-bottom:16px;letter-spacing:-.015em}
.chart-note{margin:18px 0 0;font-size:11.5px;color:var(--faint);line-height:1.6;max-width:72ch}
.chart-note b{color:var(--muted)}
.two-col{display:grid;grid-template-columns:1.25fr .75fr;gap:14px;margin-top:30px}
.two-col .chart-card{margin-top:0}

/* chart primitives */
.ax-line{stroke:var(--line);stroke-width:1}
.ax-grid{stroke:var(--line-soft);stroke-width:1;stroke-dasharray:2 4}
.ax-text{fill:var(--faint);font:500 10px var(--mono)}
.series-label{font:600 11px var(--sans)}
.lollipop-label{fill:var(--text);font:500 12.5px var(--sans)}
.lollipop-src{fill:var(--faint);font:500 9px var(--mono)}
.lollipop-val{font:700 12px var(--mono);font-variant-numeric:tabular-nums}
.bar-label{fill:var(--muted);font:500 11.5px var(--sans)}
.bar-val{fill:var(--text);font:700 11.5px var(--mono);font-variant-numeric:tabular-nums}

/* ---------- what totals hide ---------- */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px}
.stat-card{padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.stat-card .sv{font-size:clamp(30px,4vw,44px);font-weight:750;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1}
.stat-card.warn .sv{color:var(--amber)}
.stat-card.good .sv{color:var(--turf)}
.stat-card.info .sv{color:var(--rack)}
.stat-card p{margin:12px 0 0;font-size:12.5px;color:var(--muted);line-height:1.55}
.stat-card .ssrc{margin-top:10px;font:500 9.5px/1.4 var(--mono);color:var(--faint)}
.big-stat{font-size:clamp(34px,4.6vw,52px);font-weight:750;letter-spacing:-.04em;color:var(--rack);
  font-variant-numeric:tabular-nums;line-height:1.05}
.big-stat small{display:block;font-size:12.5px;font-weight:500;color:var(--muted);margin-top:14px;
  letter-spacing:0;line-height:1.6}

/* ---------- receipts ---------- */
.verdict-legend{display:flex;gap:9px;flex-wrap:wrap;margin-top:26px}
.verdict-legend span{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);
  border:1px solid var(--line);border-radius:99px;padding:6px 11px}
#receipts .mgroup{margin-top:26px}
#receipts .scards{grid-template-columns:repeat(3,1fr)}

/* ---------- footer ---------- */
.foot{padding:38px 0 60px;border-top:1px solid var(--line-soft);margin-top:0}
.foot .wrap{font-size:11px;color:var(--faint);line-height:1.65;max-width:1180px}

@media(max-width:1180px){
  .two-col{grid-template-columns:1fr}
  #receipts .scards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .act{padding:66px 0}
  .wrap{padding:0 16px}
  .tickers{grid-template-columns:1fr}
  .stat-row{grid-template-columns:1fr}
  .junk-row{grid-template-columns:1fr;gap:12px}
  .junk-bar-wrap{height:20px}
  #receipts .scards{grid-template-columns:1fr}
  .explorer-act .app{padding:0 16px}
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .scroll-hint{animation:none}
  .junk-bar{transition:none}
}

/* ---------- act 06 · the wider ledger ---------- */
.picker-card{margin-top:32px;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}
.picker-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.picker-lead{font-size:17px;font-weight:640;letter-spacing:-.015em;white-space:nowrap}
.picker{display:flex;gap:6px;flex-wrap:wrap}
.picker button{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:99px;
  padding:7px 13px;font-size:12.5px;transition:.15s}
.picker button:hover{color:var(--text);border-color:#2f4d57}
.picker button.active{background:var(--panel-2);border-color:var(--turf);color:var(--text)}
.picker-verdict{margin-top:20px;padding-top:18px;border-top:1px solid var(--line-soft);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center}
.pv-num{font-size:clamp(34px,4.6vw,52px);font-weight:760;letter-spacing:-.045em;font-variant-numeric:tabular-nums;
  line-height:1;white-space:nowrap}
.pv-text{font-size:14px;line-height:1.55;color:var(--muted)}
.pv-text b{color:var(--text)}
.pv-pair{display:flex;gap:20px;flex-wrap:wrap;margin-top:12px}
.pv-pair span{font:500 10.5px/1.5 var(--mono);color:var(--faint)}
.pv-pair i{font-style:normal;color:var(--muted)}
.picker-boundaries{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.picker-boundaries .tick-chips{margin-top:0}

.bnd-tag{font:600 8.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;fill:var(--faint)}
.ledger-name{fill:var(--text);font:500 12.5px var(--sans)}
.ledger-val{font:700 11.5px var(--mono);font-variant-numeric:tabular-nums}

.unit-strip{margin-top:30px;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}
.units{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.unit{padding:15px;border:1px solid var(--line);border-radius:13px;background:#0a1216;position:relative}
.unit.pair-hi{border-color:var(--amber)}
.unit .uv{font-size:22px;font-weight:730;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--turf)}
.unit.dc .uv{color:var(--rack)}
.unit.pair-hi .uv{color:var(--amber)}
.unit .un{font-size:12px;color:var(--muted);margin-top:7px;line-height:1.4}
.unit .ub{font:600 8px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-top:9px;display:block}

@media(max-width:820px){
  .picker-verdict{grid-template-columns:1fr;gap:12px}
  .units{grid-template-columns:1fr 1fr}
}

/* ---------- act 01 · AI-side junk stats ---------- */
.junk-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.junk.mini{margin:0;padding:20px}
.junk.mini .junk-num{font-size:clamp(20px,2.6vw,30px)}
.junk.mini .junk-num[data-role="claim"]{color:#e08c78}
.junk.mini .junk-num[data-role="real"]{color:var(--turf)}
.mini-bars{display:grid;gap:6px;margin:12px 0 14px}
.mini-bars .junk-bar-wrap{height:14px}
.mini-factor{font:700 15px/1 var(--mono);color:#e08c78;margin-top:12px;font-variant-numeric:tabular-nums}
.mini-note{margin:10px 0 0;font-size:11px;color:var(--faint);line-height:1.55}
.mini-note b{color:var(--muted)}
@media(max-width:820px){.junk-duo{grid-template-columns:1fr}}

/* ---------- hero title word cycler ---------- */
.vs-word{color:var(--turf);position:relative;white-space:nowrap}
.vs-word.alt{color:var(--amber)}
.vs-word::after{content:"";display:inline-block;width:.08em;height:.82em;margin-left:.06em;
  background:currentColor;vertical-align:baseline;transform:translateY(.08em);opacity:0}
.vs-word.typing::after{opacity:1;animation:caret .7s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.vs-word.glitching{animation:glitch-jitter .09s steps(1) infinite}
.vs-word.glitching{text-shadow:.035em 0 0 rgba(255,60,60,.55),-.035em 0 0 rgba(61,219,232,.55)}
@keyframes glitch-jitter{
  0%{transform:translate(0,0)}25%{transform:translate(.012em,-.008em)}
  50%{transform:translate(-.014em,.006em)}75%{transform:translate(.008em,.01em)}100%{transform:translate(0,0)}}
@media(prefers-reduced-motion:reduce){
  .vs-word{color:var(--turf)!important}
  .vs-word::after{display:none}
  .vs-word.glitching{animation:none;text-shadow:none}
}