:root{
  --bg:#0b0d10;
  --bg2:#111419;
  --panel:#161a20;
  --ink:#f3f5f7;
  --muted:#9aa4b0;
  --line:#262c34;
  --teflon:#22d3a6;     /* mint accent (links / primary) */
  --alarm:#ff5d5d;      /* the loss */
  --cash:#2ec16b;       /* carmula green */
  --gold:#ffd34d;
  --flame:#ff7a18;      /* the fire — destruction */
  --steel:#9fb0c0;      /* cold metal — what's left */
  --scrapgold:#e0b94d;  /* the cheap-metal payout */
  --maxw:880px;
  --r:14px;
  font-synthesis:none;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;width:100%}
.center{text-align:center}
.nowrap{white-space:nowrap}
em{font-style:italic;color:var(--ink)}
a{color:var(--teflon)}
strong{color:#fff}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;border:1px solid var(--line);border-radius:999px;
  padding:.8em 1.4em;font-weight:700;font-size:1rem;text-decoration:none;cursor:pointer;
  transition:transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--teflon);color:#04221a;border-color:var(--teflon)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-cash{background:var(--cash);color:#04200f;border-color:var(--cash);font-size:1.15rem;padding:.95em 1.8em}
.btn-cash:hover{filter:brightness(1.08)}

/* ---------- hero ---------- */
.hero{
  min-height:100svh;display:flex;align-items:center;
  background:radial-gradient(1200px 600px at 50% -10%, #15202b 0%, var(--bg) 60%);
  border-bottom:1px solid var(--line);
}
.kicker{letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-size:.78rem;margin:0 0 1.2em}
.title{font-size:clamp(2.6rem,8vw,5rem);line-height:1.02;letter-spacing:-.02em;margin:0 0 .5em;font-weight:800}
.teflon{color:var(--teflon);position:relative}
.teflon::after{content:"";position:absolute;left:0;right:0;bottom:.08em;height:.12em;background:var(--teflon);opacity:.25;border-radius:2px}
.lede{font-size:clamp(1.05rem,2.6vw,1.4rem);color:var(--muted);max-width:42ch;margin:0 0 2em}
.lede strong{color:var(--alarm)}
.hero-cta{display:flex;gap:.7em;flex-wrap:wrap}
.scroll-hint{margin-top:3em;color:var(--muted);font-size:.85rem;letter-spacing:.12em;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(5px);opacity:1}}

/* ---------- sections ---------- */
.section{padding:clamp(64px,12vw,120px) 0;border-bottom:1px solid var(--line)}
.section-title{font-size:clamp(2rem,5.5vw,3.2rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 .35em;font-weight:800}
.section-sub{color:var(--muted);font-size:clamp(1rem,2.3vw,1.2rem);max-width:46ch;margin:0 auto 2em}
.villains .section-sub{margin-left:0}
.villains .section-title{margin-bottom:.25em}

/* ---------- villain cards ---------- */
.cards{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:640px){.cards{grid-template-columns:1fr 1fr}}
.card{
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:var(--r);padding:24px;position:relative;overflow:hidden;
}
.card::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--alarm);opacity:.8}
.card .big{font-size:clamp(2.2rem,7vw,3rem);font-weight:800;color:var(--gold);line-height:1;margin:.1em 0 .15em}
.card .unit{color:var(--muted);font-size:.95rem;margin:0 0 1em;font-weight:600}
.card .quip{font-size:1.08rem;margin:0 0 .8em;color:#fff}
.card .detail{font-size:.9rem;color:var(--muted);margin:0 0 1em}
.card .src{font-size:.8rem}
.card .src a{color:var(--muted);text-decoration:underline}

/* ---------- worst plates (click to open the city's file) ---------- */
.scofflaws{margin-top:clamp(40px,7vw,72px);border-top:1px solid var(--line);padding-top:clamp(32px,5vw,56px)}
.scofflaws-title{font-size:clamp(1.5rem,4.2vw,2.3rem);font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:0 0 .3em;text-align:center}
.scofflaws-sub{color:var(--muted);font-size:clamp(1rem,2.3vw,1.15rem);max-width:54ch;margin:0 auto 1.6em;text-align:center}
.plate-buttons{display:flex;flex-direction:column;gap:32px;align-items:center}
.plate-group{width:100%;text-align:center}
.pg-head{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 .2em}
.pg-icon{font-size:1.3rem;line-height:1}
.pg-label{font-weight:800;font-size:1.2rem;letter-spacing:.01em}
.pg-blurb{color:var(--muted);font-size:.98rem;margin:0 auto 1.1em;max-width:52ch;line-height:1.5}
.pg-btns{display:flex;flex-direction:column;align-items:center;gap:14px}
/* pill-shaped CTA buttons (match the page's .btn pills), stacked + centered */
/* pill-shaped CTA buttons (match the page's .btn pills), stacked + centered */
.plate-btn{
  display:flex;flex-direction:column;align-items:center;gap:.12em;cursor:pointer;text-align:center;
  width:100%;max-width:480px;
  background:linear-gradient(180deg,var(--panel),var(--bg2));border:2px solid var(--line);border-radius:999px;padding:22px 36px;
  transition:transform .1s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
.plate-btn:hover{border-color:var(--teflon);transform:translateY(-2px);box-shadow:0 10px 28px rgba(34,211,166,.14)}
.plate-btn:active{transform:translateY(0)}
.plate-btn.active{border-color:var(--teflon);background:linear-gradient(180deg,#16241f,var(--bg2))}
.plate-tag{display:flex;flex-direction:column;align-items:center;gap:1px}
.pt-region{font-size:.85rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.pt-number{font-family:"Courier New",monospace;font-weight:800;letter-spacing:.16em;font-size:2.6rem;line-height:1.1;color:#fff}
.pb-cta{color:var(--teflon);font-weight:800;font-size:1.2rem;line-height:1.35;margin-top:.3em}
.pb-arrow{display:inline-block;transition:transform .15s ease}
.plate-btn:hover .pb-arrow{transform:translateX(4px)}
.scofflaws-note{color:var(--muted);font-size:.8rem;margin:1.2em 0 0;max-width:64ch;line-height:1.55}
#scofflaw-result{margin-top:1.4em}
.opendata-link{display:inline-block;margin-top:.9em;font-size:.85rem;color:var(--teflon);text-decoration:underline}

/* ---------- the number ---------- */
.thenumber{background:linear-gradient(180deg,var(--bg),#0e1318)}
.counter{
  font-size:clamp(2.8rem,11vw,6.5rem);font-weight:800;letter-spacing:-.03em;color:var(--alarm);
  font-variant-numeric:tabular-nums;line-height:1;margin:.1em 0 .25em;
}
.counter-label{color:var(--muted);font-size:clamp(1rem,2.4vw,1.25rem);margin:0 auto 2.2em;max-width:34ch}
.bigstats{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:28px;padding:0;margin:0 0 2em}
.bigstats li{display:flex;flex-direction:column;min-width:120px}
.bigstats .num{font-size:clamp(1.6rem,5vw,2.4rem);font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.bigstats .cap{color:var(--muted);font-size:.85rem;max-width:16ch;margin:0 auto}
.aside{color:var(--muted);max-width:48ch;margin:1.5em auto 0;font-size:1.02rem}
.aside strong{color:var(--gold)}

/* ---------- lookup ---------- */
.lookup{background:radial-gradient(900px 500px at 50% 0%, #131b24 0%, var(--bg) 65%)}
.plate-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:0 auto 1.5em;max-width:520px}
#plate-input{
  flex:1 1 200px;min-width:0;background:#fff;color:#111;border:3px solid #111;border-radius:10px;
  font-size:1.5rem;font-weight:800;letter-spacing:.12em;text-align:center;text-transform:uppercase;
  padding:.5em .4em;font-family:"Courier New",monospace;
}
#plate-input::placeholder{color:#9aa;letter-spacing:.1em}
#state-input{
  background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:10px;
  font-size:1.1rem;font-weight:700;padding:0 .7em;
}
.plate-form .btn{flex:1 1 100%}
@media(min-width:560px){.plate-form .btn{flex:0 0 auto}}

.result{margin:1.5em auto 0;max-width:560px;text-align:left}
.result.show{animation:rise .35s ease both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.scorecard{
  background:linear-gradient(160deg,#1a1f27,#0e1217);border:1px solid var(--line);border-radius:var(--r);
  padding:26px;position:relative;overflow:hidden;
}
.scorecard .plate-chip{
  display:inline-block;background:#fff;color:#111;border:3px solid #111;border-radius:8px;
  font-family:"Courier New",monospace;font-weight:800;letter-spacing:.12em;padding:.15em .5em;font-size:1.2rem;margin-bottom:.7em;
}
.scorecard .verdict{font-size:clamp(1.3rem,4vw,1.8rem);font-weight:800;margin:.1em 0 .5em;line-height:1.15}
.scorecard .verdict .money{color:var(--alarm)}
.scorecard .clean .verdict .money{color:var(--teflon)}
.scorecard .row{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:.55em 0;color:var(--muted)}
.scorecard .row b{color:#fff;font-variant-numeric:tabular-nums}
.scorecard .list{margin:.8em 0 0;font-size:.85rem;color:var(--muted)}
.scorecard .list .li{display:flex;justify-content:space-between;gap:10px;padding:.25em 0;border-top:1px dashed var(--line)}
.share-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:1.1em}
.share-row .btn{font-size:.9rem;padding:.6em 1em}
.share-x{background:#111;color:#fff;border-color:#333}
.share-reddit{background:#ff4500;color:#fff;border-color:#ff4500}
.share-copy{background:transparent;color:var(--ink)}
.muted-note{color:var(--muted);font-size:.82rem;margin:.9em 0 0;text-align:center}
.err{color:var(--alarm);text-align:center;font-weight:600}
.loading{color:var(--muted);text-align:center}

/* ---------- quit / cta ---------- */
.quit{background:linear-gradient(180deg,#0e1318,#0b0d10)}
.cta-box{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:18px;padding:32px 24px;max-width:560px;margin:0 auto}
.cta-line{font-size:1.25rem;font-weight:700;margin:0 0 .3em}
.cta-sub{color:var(--muted);margin:0 0 1.4em}
.cta-fine{color:var(--muted);font-size:.82rem;margin:1.2em 0 0}

/* ---------- footer ---------- */
.footer{padding:48px 0 80px;color:var(--muted);font-size:.88rem}
.src-title{text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--muted);margin:0 0 .8em}
.sources{list-style:none;padding:0;margin:0 0 1.5em;display:grid;gap:.4em}
.sources a{color:var(--muted);text-decoration:underline}
.disclaimer{max-width:60ch;line-height:1.6}
.tinylink{margin-top:1.5em}
.tinylink a{color:var(--muted)}

/* ---------- ACT 1 · firehose ---------- */
.firehose{background:radial-gradient(1000px 500px at 50% 120%, #14211b 0%, var(--bg) 70%);position:relative;overflow:hidden}
/* same bold display font as the hero hook (.title), sized for a full sentence */
.firehose-hook{font-size:clamp(2rem,5.5vw,3.6rem);line-height:1.04;letter-spacing:-.02em;font-weight:800;margin:0 0 .35em;max-width:18ch;margin-inline:auto}
.firehose-counter{
  font-size:clamp(2.4rem,9vw,5rem);font-weight:800;letter-spacing:-.02em;color:var(--cash);
  font-variant-numeric:tabular-nums;line-height:1;margin:.1em 0 .25em;
}
.firehose .counter-label strong{color:#fff}
.firehose-canvas{display:block;width:100%;height:220px;margin:1.5em auto 0;pointer-events:none}
@media(min-width:640px){.firehose-canvas{height:300px}}

/* ---------- ACT 2 · the gap ---------- */
.gap{background:linear-gradient(180deg,#0e1318,var(--bg))}
.gap .section-title em,.gap .section-sub em{color:var(--alarm);font-style:normal;font-weight:800}
.gap-chart{margin:1.5em 0 0}
.gap-chart svg{display:block;width:100%;height:auto;overflow:visible}
.gap-label{fill:#fff;font-weight:800;font-size:18px}
.gap-mech{fill:var(--muted);font-size:13px}
.gap-track{fill:var(--panel);stroke:var(--line)}
.gap-pct{fill:#fff;font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}
.gap-foot{color:var(--muted);font-size:.9rem;max-width:60ch;margin:1.6em 0 0;line-height:1.6}

/* ---------- ACT 3 · leaderboard ---------- */
.leaderboard{background:linear-gradient(180deg,var(--bg),#0e1318)}
.leaderboard .section-sub em{color:var(--gold);font-style:normal;font-weight:800}
.leaderboard-chart{margin:1.5em 0 0}
.leaderboard-chart svg{display:block;width:100%;height:auto;overflow:visible}
.lb-name{fill:#fff;font-weight:700;font-size:15px}
.lb-val{fill:var(--muted);font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}

/* ---------- the cliffhanger (hinge → carmula) ---------- */
.cliffhanger{background:radial-gradient(900px 500px at 50% 120%, #1c1418 0%, var(--bg) 70%);border-bottom:1px solid var(--line)}
.cliff-eyebrow{letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-size:.9rem;margin:0 0 .6em;font-weight:700}
.cliff-eyebrow em{color:var(--ink);font-style:normal}
.cliff-headline{font-size:clamp(1.8rem,5.5vw,3.2rem);line-height:1.08;letter-spacing:-.02em;font-weight:800;margin:0 auto .6em;max-width:18ch}
.cliff-headline .alarm{color:var(--alarm)}
.cliff-body{color:var(--muted);font-size:clamp(1rem,2.4vw,1.2rem);max-width:46ch;margin:0 auto 2em}
.cliff-cta{font-size:1.1rem;padding:.95em 1.8em}

@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

/* ============================================================ *
 * SCRAP CITY — additions on top of the cloned base
 * ============================================================ */

/* hero: the burning headline number */
.hero .flame,.title .flame{color:var(--flame);text-shadow:0 0 30px rgba(255,122,24,.35);white-space:nowrap}
.hero{background:radial-gradient(1200px 600px at 50% -10%, #271810 0%, var(--bg) 62%)}

/* the reveal: intact (red loss) -> scrap (cheap gold) */
.thenumber .counter{color:var(--alarm)}
.reveal-flip{margin:2.4em auto 0;padding-top:2em;border-top:1px solid var(--line);max-width:36ch}
.flip-label{color:var(--muted);font-size:clamp(1rem,2.4vw,1.2rem);margin:0 0 .2em}
.counter.scrap{color:var(--scrapgold)}
.scrap-label strong{color:#fff}
.thenumber .aside strong{color:var(--flame)}

/* wreckage cards */
.villains .cards .card::before{background:var(--flame)}
.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.2em}
.card-icon{font-size:1.7rem;line-height:1}
.tag{font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:.3em .7em;border-radius:999px;border:1px solid var(--line)}
.tag-doc{color:var(--cash);border-color:rgba(46,193,107,.5);background:rgba(46,193,107,.08)}
.tag-est{color:var(--scrapgold);border-color:rgba(224,185,77,.45);background:rgba(224,185,77,.08)}
.card .big{color:#fff}
.cardmath{font-family:ui-monospace,Menlo,monospace;font-size:.85rem;color:var(--steel);margin:.2em 0 1em;line-height:1.5}
.cardmath strong{color:#fff}

/* the gap chart accents */
.gap{background:linear-gradient(180deg,#171015,var(--bg))}
.gap .section-title em{color:var(--scrapgold)}
.gap-pct{fill:var(--scrapgold)}

/* the bus anchor */
.busanchor{background:radial-gradient(900px 500px at 50% 0%, #20140d 0%, var(--bg) 65%)}
.bus-flip{display:flex;align-items:center;justify-content:center;gap:clamp(14px,4vw,40px);flex-wrap:wrap;margin:1.4em auto 0}
.bus-side{display:flex;flex-direction:column;align-items:center;gap:.2em;min-width:150px}
.bus-cap{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.bus-num{font-size:clamp(2.2rem,8vw,3.6rem);font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.bus-num.intact{color:#fff}
.bus-num.scrap{color:var(--scrapgold)}
.bus-sub{font-size:.85rem;color:var(--muted);max-width:18ch}
.bus-arrow{font-size:2.2rem;color:var(--flame);font-weight:800}
.busanchor .aside strong{color:var(--flame)}

/* the calculator */
#car-input{flex:1 1 240px;min-width:0;background:#fff;color:#111;border:3px solid #111;border-radius:10px;
  font-size:1.15rem;font-weight:700;padding:.55em .6em;text-align:center}
.calc-or{color:var(--muted);font-size:.95rem;margin:.2em auto 0}
#weight-input{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;
  font-size:1rem;font-weight:700;padding:.4em .5em;width:6.5em;text-align:center}
.calc-verdict{color:var(--steel);font-size:1rem;margin:.2em 0 1em}
.scorecard .verdict .money{color:var(--scrapgold)}
.calc-pitch{font-size:1rem;color:#fff;margin:1em 0 0;line-height:1.5}
.calc-pitch em{color:var(--cash);font-style:normal;font-weight:700}
.calc-cta{display:inline-block;margin:1.1em 0 .2em}
.lookup{background:radial-gradient(900px 500px at 50% 0%, #131b24 0%, var(--bg) 65%)}

/* cliffhanger + cta retheme */
.cliffhanger{background:radial-gradient(900px 500px at 50% 120%, #1c1410 0%, var(--bg) 70%)}
.cliff-headline .alarm{color:var(--flame)}
.quit .section-title em{color:var(--flame);font-style:normal;font-weight:800}

/* ---- freshness stamp + change log (dated, hand-maintained — not a live feed) ---- */
.freshness{margin:2.4em auto 0;max-width:46ch;border-top:1px solid var(--line);padding-top:1.3em}
.freshness .asof{font-size:.86rem;color:var(--muted);line-height:1.55;margin:0 0 .6em}
.freshness .asof strong{color:var(--steel)}
.freshness .src-inline{display:inline-block;color:var(--muted);opacity:.8;font-size:.8rem}
.changelog{font-size:.85rem;color:var(--muted)}
.changelog summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.4em;
  color:var(--scrapgold);font-weight:600;letter-spacing:.02em}
.changelog summary::-webkit-details-marker{display:none}
.changelog summary:hover{filter:brightness(1.1)}
.changelog .chev{transition:transform .2s ease;font-size:.8em}
.changelog[open] .chev{transform:rotate(180deg)}
.changelog ul{list-style:none;margin:.9em 0 0;padding:0;text-align:left}
.changelog li{position:relative;padding:.5em 0 .5em 1em;border-left:2px solid var(--line);margin-left:.2em;line-height:1.5}
.changelog li::before{content:"";position:absolute;left:-5px;top:.95em;width:8px;height:8px;border-radius:50%;
  background:var(--scrapgold)}
.changelog li:first-child::before{background:var(--flame);box-shadow:0 0 8px rgba(255,122,24,.6)}
.changelog .cl-date{color:var(--steel);font-weight:600}

/* counter-led hero (merged hero + reveal) — headline stays main-title size */
.hero-counter{min-height:auto;padding:clamp(2.8rem,9vh,6.5rem) 0}
.hero-counter .title{max-width:24ch;margin-left:auto;margin-right:auto}
.hero-counter .hero-cta{justify-content:center;margin-top:.2em}
.hero-counter .reveal-flip{margin-top:1.5em}
.hero-counter .freshness{margin-top:2.6em}

/* "intact value:" lead label above the headline counter */
.intact-lead{margin:.35em 0 0;font-size:clamp(1.7rem,4.8vw,2.8rem);font-weight:800;
  letter-spacing:.01em;text-transform:none}
.intact-lead .flame{color:var(--flame)}