/* story.css: the shared "data story" kit (Undervolt structure, RefereeAI palette).
   Numbered chapters, one big true number, data drawn on the right, deep court-green bands for emphasis.
   Rule: every number shown must be measured; label where it came from. */
.chap{font:500 12px/1 'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--court)}
.punch{font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:-.01em;margin-top:14px;text-wrap:balance}
.big{font:600 clamp(64px,8vw,112px)/1 Inter,system-ui,sans-serif;letter-spacing:-.04em;color:var(--court);margin:22px 0 10px;font-variant-numeric:tabular-nums}
.big small{font-size:.38em;letter-spacing:0;color:var(--muted);font-weight:500}
.uv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:center}
.uv .sub{max-width:44ch}
.split-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:center}
.split-hero .lead{max-width:none}
.cta-row{display:grid;grid-template-columns:minmax(0,1.6fr) auto;gap:40px;align-items:center}
.cta-row .ctas{margin-top:0}
/* stat card: one big number + its bars in one bordered card */
.statcard{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center;border:1px solid var(--line);border-radius:6px;padding:32px 36px;margin-top:28px}
.statcard .big{margin-top:0}
/* bars */
.bars{margin:0;display:grid;gap:18px}
.bars figcaption{display:grid;gap:4px;margin-bottom:6px}.bars figcaption b{font-size:15px}
.bars figcaption span,.bars .note{font:12px 'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;color:var(--muted)}
.bar{display:grid;grid-template-columns:160px minmax(0,1fr) 64px;gap:16px;align-items:center;font-size:14px}
.bar i{display:block;height:26px;border-radius:3px;background:linear-gradient(90deg,var(--court) var(--w),#e6ebe7 var(--w))}
.bar em{font:500 14px 'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-style:normal;text-align:right;font-variant-numeric:tabular-nums}
/* feature mini-cards with a mono label */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:24px}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards>div{display:grid;gap:8px;align-content:start;border:1px solid var(--line);border-radius:6px;padding:20px}
.cards small{font:500 11px 'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-bottom:10px;border-bottom:1px solid var(--line)}
.cards b{font-size:16px}.cards span{font-size:14px;color:var(--muted)}
/* panel: a quiet filled block for a stat that needs its own room */
.panel{background:#eef1ed;border:1px solid var(--line);border-radius:6px;padding:32px 36px}
.panel .big{margin-top:0}
/* service / link rows */
.uv-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.svc{border-top:1px solid var(--line)}
.svc a{display:grid;grid-template-columns:220px minmax(0,1fr) auto;gap:24px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.svc b{font-size:18px;font-weight:600}.svc span{color:var(--muted);font-size:15px}
.svc em{font:500 13px 'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-style:normal;color:var(--court);white-space:nowrap}
.svc a:hover em{text-decoration:underline;text-underline-offset:4px}
/* deep court-green band: use on one or two sections per page, never all */
.deep{--ink:#f4f6f2;--muted:#a9bdb3;--line:#24493c;--court:#3ddc97;background:#0d2e24!important;color:var(--ink)}
.deep .punch,.deep b,.deep h2,.deep h3{color:var(--ink)}
.deep .btn-primary,.deep .btn-primary:hover{color:#06140e;background:#3ddc97;border-color:#3ddc97}
.deep .btn-ghost{background:transparent;color:var(--ink);border-color:#3b6354}
.deep .bar i{background:linear-gradient(90deg,#3ddc97 var(--w),#173d31 var(--w))}
.deep .panel{background:#123a2e}
@media (max-width:900px){
  .uv,.split-hero,.cta-row,.statcard{grid-template-columns:minmax(0,1fr);gap:24px}
  .statcard,.panel{padding:24px 20px}
  .cards,.cards.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc a{grid-template-columns:minmax(0,1fr);gap:6px}
  .bar{grid-template-columns:110px minmax(0,1fr) 52px;gap:10px}
}
@media (max-width:520px){.cards,.cards.three{grid-template-columns:minmax(0,1fr)}}
