/* Carsite design system — dark, premium, data-dense. No frameworks. */
:root{
  --bg:#FFFFFF; --bg2:#F6F7F9; --card:#FFFFFF; --card2:#F3F5F7; --line:#E3E7EC;
  --text:#0E1420; --muted:#5A6472; --faint:#8A94A3;
  --accent-ev:#0E7C86; --accent-ice:#B45309; --brand:#0B62D6;
  --good:#0F8A5F; --warn:#B45309; --bad:#C42B2B;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06);
  --shadow-lg:0 12px 40px rgba(16,24,40,.12);
  --r:16px; --maxw:1180px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.6;
  font-size:16px;-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}
/* header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:20px;height:56px}
.logo{font-weight:800;font-size:18px;letter-spacing:-.02em;color:var(--text)}
.logo em{color:var(--brand);font-style:normal}
.nav{display:flex;gap:18px;margin-left:auto;font-size:14px}
.nav a{color:var(--muted)}.nav a:hover{color:var(--text);text-decoration:none}
/* hero */
.hero{position:relative;border-bottom:1px solid var(--line);overflow:hidden}
.hero-inner{display:grid;gap:24px;padding:36px 0 28px}
.crumbs{font-size:13px;color:var(--faint)}
.crumbs a{color:var(--faint)}.crumbs a:hover{color:var(--text)}
h1{font-size:clamp(26px,4.5vw,40px);line-height:1.15;letter-spacing:-.02em;font-weight:800}
.sub{color:var(--muted);max-width:640px}
.hero-img{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:var(--bg2);aspect-ratio:16/8;position:relative}
.hero-img .credit{position:absolute;bottom:6px;right:10px;font-size:11px;color:#aab;opacity:.75}
/* layout */
.grid{display:grid;gap:20px;padding:28px 0}
@media(min-width:1024px){.grid{grid-template-columns:minmax(0,1fr) 320px}}
.col-side{display:grid;gap:20px;align-content:start}
@media(min-width:1024px){.sticky{position:sticky;top:72px}}
/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow)}
.card h2{font-size:19px;margin-bottom:12px;letter-spacing:-.01em}
.card h3{font-size:15px;margin:14px 0 6px}
.card p{color:var(--muted);font-size:15px}
.card .num{color:var(--text);font-weight:700}
/* verdict */
.verdict{text-align:center}
.verdict .badge{display:inline-block;font-weight:800;font-size:22px;letter-spacing:.06em;
  padding:8px 26px;border-radius:999px;margin:10px 0 4px}
.v-BUY{background:rgba(52,211,153,.12);color:var(--good);border:1px solid var(--good)}
.v-CAUTION{background:rgba(251,191,36,.12);color:var(--warn);border:1px solid var(--warn)}
.v-AVOID{background:rgba(248,113,113,.12);color:var(--bad);border:1px solid var(--bad)}
.v-DATA{background:rgba(154,163,173,.12);color:var(--muted);border:1px solid var(--muted)}
.verdict ul{list-style:none;text-align:left;margin-top:12px;display:grid;gap:8px}
.verdict li{font-size:14px;color:var(--muted);padding-left:18px;position:relative}
.verdict li::before{content:"›";position:absolute;left:2px;color:var(--accent-ev)}
/* ad slots: reserved height, zero CLS */
.ad{min-height:280px;display:flex;align-items:center;justify-content:center;
  background:var(--bg2);border:1px dashed var(--line);border-radius:var(--r);
  color:var(--faint);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.ad-h{min-height:100px}
/* tables */
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);
  text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:9px 10px;border-bottom:1px solid var(--line);color:var(--muted)}
td:first-child{color:var(--text)}
tr:last-child td{border-bottom:0}
.tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 10px;border-radius:999px}
/* charts */
.chart svg{width:100%;height:auto;display:block}
.legend{display:flex;gap:16px;font-size:12px;color:var(--faint);margin-top:8px;flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px}
/* strips + grids */
.years-strip{display:flex;gap:8px;flex-wrap:wrap}
.years-strip a{padding:6px 13px;border:1px solid var(--line);border-radius:8px;font-size:14px;
  color:var(--muted)}
.years-strip a:hover{border-color:var(--accent-ev);color:var(--text);text-decoration:none}
.years-strip a.cur{border-color:var(--accent-ev);color:var(--accent-ev);font-weight:700}
.rel-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.rel-grid a{background:var(--card2);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;color:var(--text);font-size:14px}
.rel-grid a small{display:block;color:var(--faint);font-size:12px}
.rel-grid a:hover{border-color:var(--accent-ev);text-decoration:none}
/* faq */
details{border-bottom:1px solid var(--line);padding:10px 0}
details:last-child{border-bottom:0}
summary{cursor:pointer;font-weight:600;font-size:15px}
details p{margin-top:8px;font-size:14px}
/* sources */
.sources{font-size:13px;color:var(--faint)}
.sources a{color:var(--muted)}
/* CTA band */
.cta-band{background:linear-gradient(120deg,rgba(34,211,238,.10),rgba(245,158,11,.08));
  border:1px solid var(--line);border-radius:var(--r);padding:26px;text-align:center}
/* Primary action uses the brand blue, not the teal accent. The teal read as dated and
   fought with the blue used for every link on the page. One accent, used consistently. */
.btn{display:inline-block;background:var(--brand);color:#fff;font-weight:650;
  padding:11px 26px;border-radius:10px;font-size:15px;border:0;cursor:pointer;
  letter-spacing:-.005em;box-shadow:0 1px 2px rgba(11,98,214,.24);
  transition:background .18s ease,box-shadow .18s ease,transform .18s ease}
.btn:hover{background:#0A55BC;box-shadow:0 6px 18px -6px rgba(11,98,214,.55);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
/* calculator */
.calc label{display:block;font-size:13px;color:var(--muted);margin:12px 0 4px}
.calc input,.calc select{width:100%;background:#fff;color:var(--text);
  border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:15px}
.calc-out{font-size:30px;font-weight:800;margin-top:18px;letter-spacing:-.02em}
.calc-tabs{display:flex;gap:6px;margin-bottom:16px;background:var(--bg2);padding:4px;border-radius:12px}
.calc-tabs button{flex:1;background:transparent;border:0;border-radius:9px;padding:9px 10px;font-size:14px;
  font-weight:650;color:var(--muted);cursor:pointer}
.calc-tabs button.on{background:#fff;color:var(--text);box-shadow:0 1px 3px rgba(14,20,32,.12)}
.calc-tabs button:disabled{opacity:.45;cursor:not-allowed}
.calc-row{display:grid;gap:14px}
@media(min-width:620px){.calc-row{grid-template-columns:1fr 1fr}}
.calc-inline{display:flex;gap:8px}
.calc-inline input{flex:1 1 auto;min-width:0}
.calc-inline select{flex:0 0 auto;width:auto}
.calc-break{width:100%;border-collapse:collapse;margin-top:14px;font-size:14px}
.calc-break th{text-align:right;font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--faint);font-weight:700;padding:0 0 6px}
.calc-break th:first-child{text-align:left}
.calc-break td{padding:7px 0;border-top:1px solid var(--line);text-align:right;color:var(--text)}
.calc-break td:first-child{text-align:left;color:var(--muted)}
.calc-break td span{color:var(--faint);font-size:12px}
/* footer */
footer{border-top:1px solid var(--line);margin-top:40px;padding:30px 0;font-size:13px;
  color:var(--faint)}
footer .cols{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
footer a{color:var(--muted)}
/* home */
.home-hero{padding:60px 0 40px;text-align:center}
.home-hero h1{font-size:clamp(30px,5.5vw,52px);max-width:820px;margin:0 auto 14px}
.stat-row{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.stat-row div{text-align:center}
.stat-row b{display:block;font-size:30px;color:var(--text);letter-spacing:-.02em}
.stat-row span{font-size:13px;color:var(--faint)}
@media(max-width:767px){.hero-inner{padding-top:24px}.card{padding:16px}}
/* prose pages */
.prose{max-width:760px;padding:36px 0}
.prose h1{margin-bottom:16px}.prose h2{margin:26px 0 8px;font-size:20px}
.prose p,.prose li{color:var(--muted);margin-bottom:10px;font-size:15px}
.prose ul{padding-left:22px}
/* hero illustration */
.hero-flex{grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.hero-flex{grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr)}}
.hero-art{margin:0;position:relative;animation:artin .7s ease both}
.hero-art svg{width:100%;height:auto;display:block;filter:drop-shadow(0 14px 30px rgba(16,24,40,.18))}
.hero-art figcaption{position:absolute;right:6px;bottom:2px;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);opacity:.7}
@keyframes artin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hero-art{animation:none}}
/* ===== v2: header search + library + design lift ===== */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:18px;padding:10px 0}
.hdr .nav{margin-left:0}
.searchbox{position:relative;flex:1;max-width:430px}
.searchbox input{width:100%;background:var(--card2);border:1px solid var(--line);color:var(--text);
  border-radius:22px;padding:10px 18px;font-size:14px;outline:none;transition:border .2s,box-shadow .2s}
.searchbox input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(11,98,214,.12);background:#fff}
#q-out{position:absolute;top:110%;left:0;right:0;background:#fff;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;box-shadow:var(--shadow-lg);max-height:400px;overflow-y:auto}
#q-out a{display:flex;justify-content:space-between;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);color:var(--text)}
#q-out a:hover{background:var(--bg2);text-decoration:none}
.q-b{color:var(--faint);font-size:12px;white-space:nowrap}
.q-none{padding:12px 16px;color:var(--faint);font-size:13px}
.langs{position:relative;font-size:12px;color:var(--muted)}
.langs summary{cursor:pointer;list-style:none;border:1px solid var(--line);border-radius:8px;padding:5px 10px}
.langs div{position:absolute;right:0;top:120%;background:#fff;border:1px solid var(--line);border-radius:10px;
  display:grid;min-width:100px;overflow:hidden;z-index:60;box-shadow:var(--shadow-lg)}
.langs a{padding:8px 14px;color:var(--muted)}.langs a:hover{background:var(--bg2)}.langs a.cur{color:var(--brand);font-weight:700}
[dir=rtl] .langs div{right:auto;left:0}
/* library */
.lib-hero .hero-inner{padding:44px 0 34px}
.sec{margin:34px 0 16px;font-size:22px}
.brand-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.brand-tile{position:relative;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);
  border-radius:16px;padding:18px;min-height:92px;display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;transition:transform .18s,border-color .18s}
.brand-tile:hover{transform:translateY(-3px);border-color:var(--brand);box-shadow:var(--shadow-lg);text-decoration:none}
.brand-tile b{font-size:15px;position:relative;z-index:2}.brand-tile small{color:var(--faint);font-size:12px;position:relative;z-index:2}
/* The old tile floated the marque name over a 16%-opacity photograph, which read as a
   washed-out smudge. A logo on white is what a brand index is supposed to look like. */
.bt-logo{display:flex;align-items:center;justify-content:center;height:46px;margin-bottom:10px}
.bt-logo img{max-height:42px;max-width:76%;width:auto;height:auto;object-fit:contain;
  filter:saturate(1) contrast(1)}
.bt-initial{font-size:26px;font-weight:800;color:var(--brand);opacity:.28;letter-spacing:-.02em}
.az-jump{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 18px}
.az-jump a{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;
  border:1px solid var(--line);border-radius:8px;font-size:13px;font-weight:650;color:var(--muted)}
.az-jump a:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
.az-group{scroll-margin-top:80px}

/* About this car */
.about-card p{margin-bottom:12px;line-height:1.68}
.about-card p:last-of-type{margin-bottom:0}
.az{columns:4 220px;gap:26px}
.az-group{break-inside:avoid;margin-bottom:20px}
.az-group h3{color:var(--brand);font-size:14px;margin-bottom:6px;border-bottom:1px solid var(--line);padding-bottom:4px}
.az-group a{display:flex;justify-content:space-between;padding:4px 2px;color:var(--muted);font-size:14px}
.az-group a span{color:var(--faint);font-size:12px}
.az-group a:hover{color:var(--text);text-decoration:none}
.lib-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));padding:26px 0}
.lib-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s;cursor:zoom-in}
.lib-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.lib-card .ph{display:block;aspect-ratio:16/10;background:var(--bg2);overflow:hidden}
.lib-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.lib-card:hover .ph img{transform:scale(1.06)}
.lib-card .ph.noimg{display:flex;align-items:center;justify-content:center;color:#C9D2DC}
.lib-card .ph.noimg img{display:none}
.lib-card .ph.noimg svg{width:56%;opacity:.7}
.lib-card b{display:block;padding:12px 14px 2px;font-size:14px;line-height:1.35}
.lib-card small{display:block;padding:0 14px 12px;color:var(--faint);font-size:12px}
.lib-note{color:var(--faint);font-size:12px;padding:8px 0 30px}
/* photo hero on data pages */
.hero-art .photo{border-radius:18px;overflow:hidden;display:block;aspect-ratio:16/9;background:var(--bg2);
  box-shadow:var(--shadow-lg);cursor:zoom-in}
.hero-art .photo img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.hdr-in{flex-wrap:wrap}.searchbox{order:3;flex-basis:100%;max-width:none}}
/* ===== v3: geo bar, engagement, mobile-first polish ===== */
.geo-bar{padding:8px 0}
.geo-chip{display:inline-flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--line);
  border-radius:999px;padding:5px 12px;font-size:12px;color:var(--muted);max-width:100%;flex-wrap:wrap}
.geo-chip select{background:transparent;border:0;color:var(--brand);font-size:12px;font-weight:700;
  outline:none;cursor:pointer;max-width:150px}
.geo-chip select option{background:#fff;color:var(--text)}
.geo-facts{color:var(--faint)}
/* daily cards */
.daily-grid{display:grid;gap:16px;grid-template-columns:1fr;padding:20px 0}
@media(min-width:760px){.daily-grid{grid-template-columns:1.3fr 1fr}}
.daily{position:relative;display:block;border-radius:20px;overflow:hidden;min-height:230px;
  border:1px solid var(--line);background:var(--bg2);box-shadow:var(--shadow)}
.daily img{width:100%;height:100%;min-height:230px;object-fit:cover;transition:transform .5s}
.daily:hover img{transform:scale(1.05)}
.daily:hover{text-decoration:none}
.daily-b{position:absolute;inset:auto 0 0 0;padding:18px;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(8,12,20,.86))}
.daily-k{display:inline-block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:#7DD3FC;margin-bottom:6px;font-weight:700}
.daily-b b{display:block;font-size:19px;line-height:1.25}
.daily-b small{color:rgba(255,255,255,.75);font-size:12px}
/* game */
.game-card{padding:18px}
.game-head{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--muted);margin-bottom:12px}
/* The photo was full-width 16:10, which on a laptop pushed every answer button below the
   fold — you had to scroll to play. Cap it so question and answers share one screen. */
.game-img{border-radius:16px;overflow:hidden;background:var(--bg2);
  height:min(38vh,320px);max-width:620px;margin:0 auto}
.game-img img{width:100%;height:100%;object-fit:cover}
.game-ask{text-align:center;font-weight:700;font-size:16px;margin:14px 0 10px}
.game-opts{display:grid;gap:10px;margin-top:14px}
@media(min-width:620px){.game-opts{grid-template-columns:1fr 1fr}}
.game-opts button{background:#fff;border:1px solid var(--line);color:var(--text);border-radius:12px;box-shadow:var(--shadow);
  padding:14px 16px;font-size:15px;text-align:left;cursor:pointer;min-height:48px;transition:border-color .15s,background .15s}
.game-opts button:hover:not(:disabled){border-color:var(--brand);background:var(--bg2)}
.game-opts button.ok{border-color:var(--good);background:rgba(15,138,95,.10);color:var(--good);font-weight:700}
.game-opts button.no{border-color:var(--bad);background:rgba(196,43,43,.08);color:var(--bad)}
.game-note{color:var(--faint);font-size:11px;margin-top:10px}
.game-done{text-align:center;padding:26px 10px}
.game-done b{font-size:52px;display:block;color:var(--brand)}
.share-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.sbtn,.share-row button{background:#fff;border:1px solid var(--line);color:var(--text);border-radius:10px;box-shadow:var(--shadow);
  padding:10px 16px;font-size:14px;cursor:pointer;min-height:44px;display:inline-flex;align-items:center}
.sbtn:hover{border-color:var(--brand);text-decoration:none}
/* garage + prefs */
.gbtn{background:#fff;border:1px solid var(--line);color:var(--text);border-radius:10px;padding:12px 16px;box-shadow:var(--shadow);
  font-size:14px;cursor:pointer;min-height:44px;width:100%}
.gbtn.on{border-color:var(--brand);color:var(--brand);font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:#fff;border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:9px 16px;
  font-size:13px;cursor:pointer;min-height:40px}
.chip.on{border-color:var(--brand);color:var(--brand);background:rgba(11,98,214,.06);font-weight:600}
.sw{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:14px}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}
.muted{color:var(--muted)}
/* superlatives */
.sup-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.sup-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.sup-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.sup-b{padding:14px}
.sup-b b{display:block;font-size:15px}
.sup-v{display:block;color:var(--brand);font-size:22px;font-weight:800;margin:4px 0}
.sup-b small{color:var(--faint);font-size:11px}
/* ===== mobile-first hardening (most traffic is phones) ===== */
@media(max-width:767px){
  .wrap{padding-left:16px;padding-right:16px}
  h1{font-size:clamp(24px,7vw,32px);line-height:1.15}
  .hero-inner{padding:18px 0 16px}
  .grid{grid-template-columns:1fr!important}
  .col-side{order:-1}
  .verdict.sticky{position:static}
  .az{columns:1}
  .lib-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .brand-grid{grid-template-columns:1fr 1fr;gap:10px}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .nav{display:flex;gap:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    font-size:14px;width:100%;order:4;padding-bottom:2px}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;padding:6px 0;min-height:36px;display:inline-flex;align-items:center}
  a,button{-webkit-tap-highlight-color:rgba(34,211,238,.15)}
  .ad{min-height:250px}
  body{padding-bottom:env(safe-area-inset-bottom)}
}
@media(max-width:400px){.brand-grid{grid-template-columns:1fr}.lib-grid{grid-template-columns:1fr 1fr}}
/* geo cost block */
.geo-cost{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:16px;margin:12px 0}
.geo-cost-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;
  border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}
.geo-cost-row b{color:var(--text);font-weight:700;white-space:nowrap}
.geo-cost-row.total{border-bottom:0;padding-top:11px}
.geo-cost-row.total b{color:var(--text);font-size:22px}
.geo-note{color:var(--faint);font-size:11px;margin-top:8px;line-height:1.5}
/* ===== v4: light theme extras — hero mosaic, lightbox, search rows ===== */
.home-hero-v2{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#F8FAFC 0%,#FFFFFF 100%)}
.mosaic{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:1fr;gap:6px;opacity:.5;filter:saturate(1.05)}
@media(max-width:900px){.mosaic{grid-template-columns:repeat(2,1fr);opacity:.35}}
.mo-cell{position:relative;overflow:hidden;display:block;background:var(--bg2)}
.mo-cell img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.mo-cell:hover img{transform:scale(1.08)}
.mo-cell span{position:absolute;left:8px;bottom:6px;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.7);opacity:0;transition:opacity .2s}
.mo-cell:hover span{opacity:1}
.hh-in{position:relative;z-index:2;text-align:center;padding:88px 16px 72px;
  background:radial-gradient(ellipse 78% 84% at 50% 46%,rgba(255,255,255,.97) 42%,rgba(255,255,255,.86) 66%,rgba(255,255,255,0) 100%)}
.hh-kicker{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);font-weight:700;background:rgba(11,98,214,.08);border-radius:999px;padding:6px 14px;margin-bottom:16px}
.home-hero-v2 h1{font-size:clamp(30px,6vw,58px);letter-spacing:-.03em;max-width:900px;margin:0 auto}
.home-hero-v2 h1 em{color:var(--brand);font-style:normal}
.hh-sub{color:var(--muted);max-width:600px;margin:16px auto 0;font-size:17px}
.hh-sub b{color:var(--text)}
.hh-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.home-hero-v2 .stat-row{margin-top:36px}
@media(max-width:767px){.hh-in{padding:56px 16px 44px}}
/* lightbox */
.lb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px}
.lb[hidden]{display:none}
.lb-bd{position:absolute;inset:0;background:rgba(9,13,20,.86);backdrop-filter:blur(4px)}
.lb-fig{position:relative;z-index:2;max-width:1100px;width:100%;margin:0;
  background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.5);
  animation:lbin .18s ease both}
@keyframes lbin{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.lb-fig img{width:100%;max-height:76vh;object-fit:contain;background:#0E1420;display:block}
.lb-fig figcaption{padding:14px 18px;display:flex;flex-direction:column;gap:2px}
.lb-fig figcaption b{font-size:16px}
.lb-fig figcaption span{font-size:12px;color:var(--faint)}
.lb-x{position:absolute;top:10px;right:12px;z-index:3;width:38px;height:38px;border-radius:50%;
  border:0;background:rgba(255,255,255,.92);font-size:24px;line-height:1;cursor:pointer;
  box-shadow:var(--shadow);color:#0E1420}
.lb-x:hover{background:#fff}
/* search rows */
.q-brand{background:rgba(11,98,214,.05)}
.q-n i{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);
  font-style:normal;font-weight:700;margin-right:6px}
#q-out a{align-items:center}
.btn.ghost{background:#fff;border:1px solid var(--line);color:var(--text);box-shadow:none}
.btn.ghost:hover{border-color:var(--brand);color:var(--brand);background:#fff;box-shadow:0 4px 14px -8px rgba(14,20,32,.4)}

/* specifications table + Commons gallery on model pages */
.spec-table{grid-template-columns:1fr}
.gallery-card .gal-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.gal-cell{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:12px;background:var(--bg2);
  cursor:zoom-in;box-shadow:0 1px 2px rgba(14,20,32,.06)}
.gal-cell img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.gal-cell:hover img{transform:scale(1.06)}
.gallery-card [data-gal-credits]{margin-top:14px}
.model-shot figcaption{display:none}
/* ===== v4.1: split photo hero (photos fully visible) ===== */
.home-hero-v2{background:linear-gradient(180deg,#FFFFFF 0%,#F6F9FC 100%);
  border-bottom:1px solid var(--line);overflow:hidden}
.hh-grid{display:grid;gap:34px;align-items:center;padding:54px 16px 48px}
@media(min-width:960px){.hh-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:46px;padding:70px 16px 62px}}
.hh-copy{position:relative;z-index:2}
.hh-kicker{display:inline-block;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brand);font-weight:700;background:rgba(11,98,214,.08);border-radius:999px;
  padding:7px 15px;margin-bottom:18px}
.home-hero-v2 h1{font-size:clamp(32px,5.2vw,56px);letter-spacing:-.035em;line-height:1.05}
.home-hero-v2 h1 em{color:var(--brand);font-style:normal}
.hh-sub{color:var(--muted);max-width:520px;margin:18px 0 0;font-size:17px;line-height:1.6}
.hh-sub b{color:var(--text)}
/* justify-content must be reset explicitly: the older centred hero rule above still
   matches .hh-cta, and a later rule that simply omits the property does not undo it —
   which is why the two buttons sat centred while every other line was left-aligned. */
.hh-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;justify-content:flex-start}
.home-hero-v2 .stat-row{margin-top:34px;justify-content:flex-start;gap:34px}
.home-hero-v2 .stat-row div{text-align:left}
.home-hero-v2 .stat-row b{font-size:28px}
/* Single editorial hero shot. One large frame reads as a product; a grid of four
   mismatched snapshots reads as a stock-photo collage. */
.hh-mosaic{position:relative;isolation:isolate}
.hh-shot{position:relative;display:block;border-radius:24px;overflow:hidden;
  background:var(--bg2);aspect-ratio:4/3;
  box-shadow:0 30px 60px -25px rgba(14,20,32,.42), 0 2px 6px rgba(14,20,32,.06)}
/* Slow continuous drift. Free car video is not a real option — Wikimedia holds video for
   15 of ~13,700 models and the clips run 2–200 MB in OGV, which would wreck mobile data
   for no coverage. Motion comes from the photography instead: no bandwidth, no licensing
   risk, works on every device. */
.hh-shot img{width:100%;height:100%;object-fit:cover;display:block;
  transform-origin:58% 55%;animation:kenburns 22s ease-in-out infinite alternate;
  transition:transform 1.1s cubic-bezier(.16,.84,.44,1)}
.hh-shot:hover img{animation-play-state:paused;transform:scale(1.07)}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.11) translate3d(-1.2%,-1%,0)}}
/* scrim only across the lower third, so the car itself stays untouched */
.hh-shot-grad{position:absolute;inset:auto 0 0 0;height:46%;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,14,24,0) 0%,rgba(9,14,24,.60) 72%,rgba(9,14,24,.80) 100%)}
.hh-shot-tag{position:absolute;left:22px;bottom:20px;right:22px;color:#fff;z-index:2;
  font-size:15px;font-weight:750;letter-spacing:-.01em;display:grid;gap:3px}
.hh-shot-tag em{font-style:normal;font-size:11px;font-weight:500;letter-spacing:.02em;
  color:rgba(255,255,255,.72)}
@media(max-width:959px){.hh-shot{aspect-ratio:16/10;border-radius:20px}}
@media(prefers-reduced-motion:reduce){.hh-shot img{transition:none}.hh-shot:hover img{transform:scale(1.02)}}
/* full-bleed photo strip — moves on its own, pauses on hover so it can be read/clicked */
.photo-strip{display:flex;gap:2px;overflow:hidden;border-bottom:1px solid var(--line);
  background:#fff;--marquee:70s}
.photo-strip-inner{display:flex;gap:2px;flex:0 0 auto;animation:marquee var(--marquee) linear infinite;
  will-change:transform}
.photo-strip:hover .photo-strip-inner{animation-play-state:paused}
.photo-strip .st-cell{flex:0 0 clamp(150px,17vw,230px)}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){
  .photo-strip-inner{animation:none}
  .photo-strip{overflow-x:auto;scrollbar-width:none}
  .hh-shot img{animation:none}
}
.photo-strip::-webkit-scrollbar{display:none}

/* The Legends */
.pp-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));margin-bottom:30px}
.pp-card{display:block;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;
  transition:border-color .2s,box-shadow .2s,transform .2s}
.pp-card:hover{border-color:var(--brand);box-shadow:0 10px 26px -14px rgba(14,20,32,.4);
  transform:translateY(-2px);text-decoration:none}
.pp-ph{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--bg2)}
.pp-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block;
  transition:transform .6s ease}
.pp-card:hover .pp-ph img{transform:scale(1.05)}
.pp-noimg{background:linear-gradient(140deg,#E8EEF6,#F6F9FC)}
.pp-card b{display:block;padding:10px 12px 0;font-size:14px;letter-spacing:-.01em;color:var(--text)}
.pp-card small{display:block;padding:2px 12px 12px;font-size:11.5px;color:var(--muted);line-height:1.35}
.st-cell{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--bg2);cursor:zoom-in}
.st-cell img{width:100%;height:100%;object-fit:cover;filter:saturate(.96);transition:transform .5s,filter .3s}
.st-cell:hover img{transform:scale(1.06);filter:saturate(1.1)}
.st-cell span{position:absolute;left:10px;bottom:8px;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.9)}
@media(max-width:767px){.photo-strip{grid-auto-columns:minmax(150px,1fr)}}
/* ===== v5: model pages ===== */
.model-hero{background:linear-gradient(180deg,#FFFFFF,#F6F9FC);border-bottom:1px solid var(--line);
  padding:22px 0 34px}
.model-grid{display:grid;gap:26px;margin-top:14px}
@media(min-width:900px){.model-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:38px;align-items:start}}
.model-shot{margin:0;border-radius:20px;overflow:hidden;background:var(--bg2);box-shadow:var(--shadow-lg)}
.model-shot img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;cursor:zoom-in}
.model-shot figcaption{padding:10px 14px;font-size:11px;color:var(--faint);background:#fff}
.model-shot.noimg .ph{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;color:#C9D2DC}
.model-shot.noimg svg{width:45%}
.model-side h1{font-size:clamp(26px,4vw,42px);letter-spacing:-.03em;margin-bottom:6px}
.facts{display:grid;gap:0;margin:20px 0 24px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.fact{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;font-size:14px;
  border-bottom:1px solid var(--line);background:#fff}
.fact:last-child{border-bottom:0}
.fact span{color:var(--muted)}
.fact b{font-weight:700}
/* library card is now a link */
a.lib-card{display:block;color:var(--text)}
a.lib-card:hover{text-decoration:none}
a.lib-card .ph{display:block;aspect-ratio:16/10;background:var(--bg2);overflow:hidden}
a.lib-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
a.lib-card:hover .ph img{transform:scale(1.06)}
a.lib-card .ph.noimg{display:flex;align-items:center;justify-content:center;color:#C9D2DC}
a.lib-card .ph.noimg img{display:none}
a.lib-card .ph.noimg svg{width:56%}

/* Rate your love */
.rate-card .stars{display:flex;gap:6px;margin:6px 0 4px}
.star{background:none;border:0;padding:4px;cursor:pointer;line-height:0;color:var(--line);
  transition:color .15s,transform .12s}
.star svg{width:34px;height:34px;fill:currentColor}
.star:hover{transform:translateY(-1px)}
.star.on{color:#F2B01E}
.star:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}

/* ---------------------------------------------------------------- events */
.ev-controls{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:10px;margin:18px 0 10px}
.ev-controls input,.ev-controls select{width:100%;padding:11px 12px;border:1px solid var(--line);
  border-radius:10px;background:var(--card);color:var(--text);font:inherit;font-size:15px}
.ev-controls input:focus,.ev-controls select:focus{outline:2px solid var(--brand);outline-offset:1px}
.ev-controls .btn{white-space:nowrap}
.ev-controls .btn.on{background:var(--brand);color:#fff;border-color:var(--brand)}
#ev-count{font-size:14px;margin:2px 0 14px}
.ev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px;margin-bottom:28px}
.ev-card{display:flex;flex-direction:column;gap:5px;padding:16px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);color:var(--text)}
.ev-card:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.ev-card{transition:transform .16s ease,box-shadow .16s ease}
.ev-card b{font-size:16px;line-height:1.35}
.ev-card small{color:var(--faint);font-size:13px}
.ev-cat{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ev);font-weight:600}
.ev-when{font-size:14px;color:var(--muted)}
.ev-when.ok{color:var(--good);font-weight:600}
.ev-badge{display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;
  border:1px solid var(--line);color:var(--faint);vertical-align:middle;margin-left:6px}
.ev-badge.ok{color:var(--good);border-color:var(--good)}
.ev-page{padding:26px 16px 40px}
.ev-page h1{margin:8px 0 4px}
.ev-page h2{margin:26px 0 10px;font-size:20px}
.ev-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:18px 0}
.ev-facts>div{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:15px}
.ev-facts span{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:3px}
.ev-cta{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 4px}
@media(max-width:760px){
  .ev-controls{grid-template-columns:1fr 1fr}
  .ev-controls input{grid-column:1/-1}
  .ev-controls .btn{grid-column:1/-1;text-align:center}
}

/* ------------------------------------------------- motion (muted, running) */
.hh-shot{overflow:hidden}
.hh-shot img{animation:kenburns 24s ease-in-out infinite alternate;will-change:transform}
@keyframes kenburns{from{transform:scale(1) translateX(0)}to{transform:scale(1.09) translateX(-2.2%)}}
.ev-card,.rel-grid a,.brand-tile,.pp-card{transition:transform .18s ease,box-shadow .18s ease}
.rel-grid a:hover,.brand-tile:hover,.pp-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);text-decoration:none}
@media (prefers-reduced-motion:reduce){.hh-shot img{animation:none}}
.fact .est{display:block;font-size:11px;color:var(--faint);font-weight:400}

.owner-q{margin:10px 0;padding:10px 14px;border-left:3px solid var(--brand);background:var(--card2);
  border-radius:0 10px 10px 0;font-size:14px;color:var(--muted);font-style:italic}
.story-list{margin:18px 0;padding:0;list-style:none;counter-reset:st}
.story-list li{counter-increment:st;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line)}
.story-list li::before{content:counter(st);font-size:20px;font-weight:800;color:var(--faint);min-width:34px;text-align:right}
.story-list li a{flex:1;display:block;padding:13px 0;color:var(--text)}
.story-list li a small{display:block;color:var(--faint);font-size:13px}
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
.cmp-side{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}
.cmp-score{font-size:44px;font-weight:800;margin:6px 0}
.cmp-score small{font-size:18px;color:var(--faint)}
.cmp-side ul{margin:12px 0 0;padding-left:18px;color:var(--muted);font-size:14px}
@media(max-width:700px){.cmp-grid{grid-template-columns:1fr}}

/* --- 404 --- */
.nf{padding:64px 20px 88px;text-align:center;max-width:680px;margin:0 auto}
.nf-code{font-size:76px;font-weight:800;letter-spacing:.04em;color:var(--brand);margin:0;line-height:1}
.nf h1{margin:10px 0 10px}
.nf-sub{color:var(--faint);margin:0 auto 26px;max-width:48ch}
.nf .searchbox{max-width:430px;margin:0 auto 28px;text-align:left;flex:none}
.nf-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.nf-links a{background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:14px;color:var(--text);text-decoration:none}
.nf-links a:hover{border-color:var(--brand);color:var(--brand)}

/* ============================================================================
   v6 — Editorial reference system.
   The site read as a 2021 SaaS landing page: three competing accents, drop
   shadows on every surface, cards that lift on hover, gradient bands, and a
   heavy geometric sans doing the work of a headline face. Reference sites that
   actually hold authority (Britannica, and geniuses.club's own visual system)
   do the opposite: white canvas, serif for names and headings, system sans for
   everything functional, hairline borders instead of shadows, and exactly one
   reserved accent that only ever signals rank or record.
   Rules enforced below:
     Five colours. Two families. Six sizes. Eight spacing values.
     One accent (gold) — verdict, rank and record only, never decoration.
     No shadows, no lift, no scale, no gradient decoration.
     Hover = a navy hairline ring. Nothing moves.
   ========================================================================== */
:root{
    /* five values + two utilities, replacing fifteen */
  --bg:#FFFFFF; --bg2:#F6F8F9; --card:#FFFFFF; --card2:#F6F8F9; --line:#E6E9EC;
    --text:#111417; --muted:#6B7580; --faint:#8A939C;
    --brand:#10233F;            /* navy — links, nav, primary action */
  --gold:#A8751A;             /* the one accent: verdict, rank, record */
  --gold-wash:#FDF6E6;
    --accent-ev:#10233F; --accent-ice:#A8751A;   /* legacy names, remapped */
  --good:#1B6B4A; --warn:#A8751A; --bad:#9E2A2A;
    --shadow:none; --shadow-lg:none;
    --r:12px; --r-media:10px; --maxw:1180px;
    --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,ui-serif,serif;
}
body{font-size:17px;line-height:1.62}
/* serif is reserved for names and headings — it is the whole visual difference
   between a reference work and a listicle */
h1,h2,h3,.sec,.logo,.cmp-score,.calc-out,.nf-code,.stat-row b,
.lb-fig figcaption b,.hh-shot-tag,.model-side h1{
    font-family:var(--serif);font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(30px,4.2vw,44px);line-height:1.14;font-weight:700}
h2,.card h2,.sec{font-size:26px;line-height:1.25;letter-spacing:-.01em}
.card h3{font-size:17px;font-weight:700}
.card p,.prose p,.prose li{font-size:17px}
.logo{font-size:22px;letter-spacing:-.02em}
.logo em{color:var(--gold);font-style:normal}
/* one accent, and it never decorates */
a{color:var(--brand)}
.hdr{background:rgba(255,255,255,.94);border-bottom:1px solid var(--line)}
.nav{font-size:15px}
.nav a:hover{color:var(--brand)}
/* surfaces: hairline, never shadow */
.card,.brand-tile,.lib-card,a.lib-card,.pp-card,.ev-card,.sup-card,.cmp-side,
.game-opts button,.sbtn,.share-row button,.gbtn,.daily,.model-shot,.hh-shot,
#q-out,.langs div,.lb-fig,.gal-cell,.hero-img{box-shadow:none}
.card{padding:22px;border-radius:var(--r)}
.grid{gap:24px;padding:32px 0}
.sec{margin:64px 0 16px}
/* hover is a ring, not a jump */
.ev-card,.rel-grid a,.brand-tile,.pp-card,.lib-card,a.lib-card,.sup-card{
    transition:border-color .16s ease,color .16s ease}
.ev-card:hover,.rel-grid a:hover,.brand-tile:hover,.pp-card:hover,
.lib-card:hover,a.lib-card:hover,.sup-card:hover{
    transform:none;box-shadow:none;border-color:var(--brand);text-decoration:none}
.pp-card:hover .pp-ph img,.lib-card:hover .ph img,a.lib-card:hover .ph img,
.gal-cell:hover img,.st-cell:hover img,.mo-cell:hover img,.daily:hover img{transform:none}
.st-cell:hover img{filter:saturate(1)}
/* photo-led: the photograph is the product, type is the caption */
.pp-card,.lib-card,a.lib-card,.sup-card,.brand-tile{border-radius:var(--r-media)}
.pp-ph,.lib-card .ph,a.lib-card .ph,.gal-cell,.model-shot,.hh-shot,.hero-img,.hero-art .photo{
    border-radius:var(--r-media)}
.pp-card b,a.lib-card b,.lib-card b,.sup-b b{font-size:15px;font-weight:700;
                                               font-family:var(--font);letter-spacing:0;color:var(--text)}
.pp-card small,a.lib-card small,.lib-card small,.sup-b small{font-size:13px;color:var(--muted)}
/* the rank / record chip — gold, tabular, top-left of a card */
.rank{position:absolute;top:8px;left:8px;z-index:2;background:rgba(17,20,23,.82);color:#fff;
        border-radius:6px;padding:2px 7px;font-size:11.5px;font-weight:700;
        font-variant-numeric:tabular-nums}
/* verdict: a chip that states a finding, not a marketing badge */
.verdict .badge{font-family:var(--font);font-size:15px;font-weight:700;letter-spacing:.10em;
                  padding:7px 20px;border-radius:6px;border-width:1px;border-style:solid}
.v-BUY{background:rgba(27,107,74,.07);color:var(--good);border-color:rgba(27,107,74,.35)}
.v-CAUTION{background:var(--gold-wash);color:var(--gold);border-color:rgba(168,117,26,.38)}
.v-AVOID{background:rgba(158,42,42,.06);color:var(--bad);border-color:rgba(158,42,42,.32)}
.v-DATA{background:var(--bg2);color:var(--muted);border-color:var(--line)}
.verdict li::before{color:var(--gold)}
/* actions: navy, flat, one weight */
.btn{background:var(--brand);border-radius:8px;font-weight:600;font-size:16px;
       padding:12px 24px;box-shadow:none;letter-spacing:0}
.btn:hover{background:#1B3657}
.btn.ghost{background:#fff;border:1px solid var(--line);color:var(--text)}
.btn.ghost:hover{border-color:var(--brand);color:var(--brand);box-shadow:none}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
/* headings and labels */
th,.label,.ev-facts span,.ad{font-size:11px;letter-spacing:.09em;text-transform:uppercase;
                               color:var(--faint)}
table,td{font-size:15px}
/* strip the decoration the old system leaned on */
.cta-band{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r)}
.home-hero-v2,.model-hero{background:#fff}
.hh-kicker{background:transparent;border:1px solid var(--line);color:var(--muted);
             font-weight:600;letter-spacing:.12em;border-radius:999px}
.home-hero-v2 h1{font-family:var(--serif);font-weight:700;letter-spacing:-.02em;
                   font-size:clamp(34px,4.8vw,54px);line-height:1.06}
.home-hero-v2 h1 em{color:var(--gold);font-style:normal}
.hh-sub{font-size:18px}
.stat-row b{font-size:30px;font-weight:700}
.stat-row span{font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.hero-art svg{filter:none}
.hero-art{animation:none}
/* hero drift stays: motion on a photograph is editorial, and it measurably holds
   attention above the fold. What goes is motion on cards, which only ever adds noise. */
.az-group h3{color:var(--text);font-family:var(--serif);font-size:16px}
.geo-chip select{color:var(--brand)}
.chip.on,.gbtn.on,.ev-controls .btn.on{border-color:var(--brand);color:var(--brand);
                                         background:var(--bg2);font-weight:600}
.ev-cat{color:var(--gold);letter-spacing:.09em}
.daily-k{color:#E8C87A}
.nf-code{color:var(--brand);font-family:var(--serif)}
.game-done b{color:var(--brand);font-family:var(--serif)}
.star.on{color:var(--gold)}
.owner-q{border-left-color:var(--gold);background:var(--bg2);border-radius:0}
.story-list li::before{font-family:var(--serif);color:var(--gold)}
.searchbox input{border-radius:8px;background:#fff}
.searchbox input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(16,35,63,.10)}
.q-brand{background:var(--bg2)}
.q-n i{color:var(--gold)}
.years-strip a{border-radius:6px}
.years-strip a:hover{border-color:var(--brand);color:var(--text)}
.years-strip a.cur{border-color:var(--brand);color:var(--brand)}
.rel-grid a{background:#fff;border-radius:var(--r-media)}
.az-jump a:hover{border-color:var(--brand);color:var(--brand)}
.brand-tile{padding:16px;min-height:88px}
.bt-initial{color:var(--brand);opacity:.22;font-family:var(--serif)}
/* ad units: reserved, quiet, and never dressed up as content */
.ad{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r)}
/* the fact strip — fixed slots, hairline, no fill */
.facts{border-radius:var(--r)}
.fact{font-size:15px}
.fact b{font-weight:700;font-variant-numeric:tabular-nums}
.ev-facts>div{background:#fff;border-radius:var(--r)}
.calc-out{font-size:34px;font-weight:700}
.calc-tabs{background:var(--bg2);border-radius:10px}
.calc-tabs button.on{background:#fff;box-shadow:none;border:1px solid var(--line)}
.cmp-score{font-weight:700}
.nf-links a{background:#fff}
.nf-links a:hover{border-color:var(--brand);color:var(--brand)}
/* mobile is the design, not a breakpoint */
@media(max-width:767px){
    body{font-size:16px}
    h1{font-size:clamp(26px,7vw,34px)}
    h2,.card h2,.sec{font-size:21px}
    .sec{margin:48px 0 12px}
    .card{padding:18px}
    .pp-grid{grid-template-columns:1fr 1fr;gap:14px}
    .lib-grid{grid-template-columns:1fr 1fr;gap:14px}
    a,button{-webkit-tap-highlight-color:rgba(16,35,63,.12)}
}
/* trust triad — who checked this, against what, and when. Reference sites carry it
   above the fold; it is also the cheapest E-E-A-T signal on the page. */
.triad{font-size:13px;color:var(--faint);margin-top:10px}
.triad b{color:var(--muted);font-weight:600}
.triad a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
/* stat row: three figures on one line, labels quiet */
.stat-row{gap:40px;flex-wrap:wrap}
.stat-row span{font-size:11px;letter-spacing:.05em;white-space:nowrap}
.home-hero-v2 .stat-row{gap:40px}
@media(max-width:520px){.stat-row{gap:24px}}
/* verdict tags inside tables read as data, not as buttons */
.tag{border-radius:5px;font-size:11px;letter-spacing:.06em;padding:3px 9px;
       font-variant-numeric:tabular-nums}
/* Accessibility: #A8751A clears 3:1 only at display sizes. Anything set small — category
   kickers, verdict chips, table tags — uses the darker ink so it passes AA at 4.5:1. */
:root{--gold-ink:#8A5F12;--warn:#8A5F12}
.ev-cat,.q-n i,.v-CAUTION,.tag.v-CAUTION{color:var(--gold-ink)}

/* problems pages: complaint bars */
.pb-row{display:grid;grid-template-columns:170px 1fr 46px;gap:10px;align-items:center;
  padding:6px 0;font-size:14px}
.pb-row span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-row i{display:block;height:10px;border-radius:3px;background:var(--brand);opacity:.85}
.pb-row b{text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:600px){.pb-row{grid-template-columns:110px 1fr 40px;font-size:12.5px}}