/* CarChargeMount — DESIGN.md §1 tokens. Single stylesheet. */
:root{
  --bg:#082A42; --surface:#0B3B5C; --elev:#0E3A5C;
  --ink:#E6F1F5; --muted:#9FB3C8; --accent:#22D3EE; --cta:#F59E0B;
  --line:#164E6E; --card:#F4F7FA; --card-ink:#1F2937;
  --fd:'Space Grotesk',system-ui,sans-serif; --fb:'Inter',system-ui,sans-serif;
  --fm:'IBM Plex Mono',ui-monospace,monospace;
  --wrap:1200px; --ease:cubic-bezier(.22,.8,.28,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fb);line-height:1.65;font-size:16px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent)}
h1,h2,h3{font-family:var(--fd);line-height:1.2;letter-spacing:-.01em}
h1{font-size:clamp(30px,4.2vw,52px);margin:.4em 0 .5em}
h2{font-size:clamp(22px,2.6vw,32px)}
.kicker{font-family:var(--fm);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
.lede{font-size:18px;color:var(--muted);max-width:62ch}
.skip{position:absolute;left:-999px}
.skip:focus{left:8px;top:8px;background:var(--cta);color:#111;padding:8px 12px;z-index:99}
.topbar{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.topbar__in{display:flex;align-items:center;gap:28px;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand__name{font-family:var(--fd);font-weight:700;font-size:19px}
.brand__name em{font-style:normal;color:var(--accent);font-weight:500}
.nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav a{display:block;padding:10px 12px;color:var(--muted);text-decoration:none;font-weight:500;font-size:14.5px;border-radius:8px}
.nav a.is-active,.nav a[aria-current]{color:var(--ink)}
.topbar__cta{margin-left:auto;display:flex;align-items:center;gap:12px}
.topbar__cta .btn{flex:none;align-self:center;white-space:nowrap;padding:10px 26px;border-radius:999px;line-height:1.3}
.mnav{display:none}
.btn{display:inline-block;padding:12px 22px;border-radius:999px;font-weight:600;text-decoration:none;border:1px solid transparent;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s}
.btn--cta{background:var(--cta);color:#1a1206}
.btn--ghost{border-color:var(--line);color:var(--ink)}
.btn--lg{padding:15px 34px;font-size:17px}
@media (hover: hover){
  .btn:hover{transform:translateY(-2px)}
  .btn--cta:hover{box-shadow:0 8px 24px rgba(245,158,11,.35)}
  .nav a:hover{background:var(--surface);color:var(--ink)}
  .pcard:hover{transform:translateY(-3px)}
  .morelink:hover{color:var(--cta)}
}
.btn:active{transform:scale(.97)}
.hero{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:center;padding:72px 24px 56px}
.hero__ctas{display:flex;gap:14px;margin:26px 0;flex-wrap:wrap}
.hero__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:8px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 12px}
.stat__n{display:block;font-family:var(--fd);font-size:24px;font-weight:700;color:var(--accent)}
.stat__l{font-size:12.5px;color:var(--muted)}
.hero__media img{border-radius:16px;border:1px solid var(--line)}
.section{padding:56px 0}
.section--tint{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:28px}
.morelink{color:var(--accent);font-weight:600;text-decoration:none;font-size:15px}
.picks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pick,.linecard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px}
.pick h3,.linecard h3{margin:.3em 0 .5em;font-size:20px}
.pick h3 a,.linecard h3 a{color:var(--ink);text-decoration:none}
.linecards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.vizcap{color:var(--muted);max-width:70ch}
.vizrow{display:grid;grid-template-columns:280px 1fr 70px;gap:14px;align-items:center;margin:14px 0}
.vizrow__l{font-size:14px;color:var(--muted)}
.vizrow__bar{background:var(--bg);border-radius:6px;height:14px;overflow:hidden}
.vizrow__bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#0E7490);border-radius:6px}
.vizrow__n{font-family:var(--fm);font-size:13px;text-align:right}
.evidence{background:var(--elev);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}
.evidence p{margin:0;font-family:var(--fm);font-size:13.5px;color:var(--muted);text-align:center}
.cta-final{text-align:center}
.cta-final p{color:var(--muted)}
.pagehead{padding:48px 24px 8px}
.prose{max-width:72ch}
.prose p{margin:1em 0;color:#D7E3EC}
.prose h2{margin:1.8em 0 .6em}
.prose ul{padding-left:22px}
.prose li{margin:.4em 0;color:#D7E3EC}
.cols{display:grid;grid-template-columns:7fr 5fr;gap:44px;align-items:start;padding-bottom:56px}
.sidecard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;margin-bottom:20px}
.sidecard h2{font-size:18px;margin:0 0 12px}
.factlist{list-style:none;margin:0 0 18px;padding:0}
.factlist li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.factlist span{color:var(--muted)}
.factlist b{font-weight:600;text-align:right}
.factlist b a{color:var(--ink)}
.linklist{list-style:none;margin:0 0 12px;padding:0}
.linklist li{margin:.55em 0;font-size:14.5px}
.filterbar{margin-bottom:22px}
.filterbar input{background:var(--surface);border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:11px 14px;width:min(420px,100%);font-size:15px}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;min-width:0}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .18s var(--ease);min-width:0}
.pcard__media{display:block;aspect-ratio:1;background:var(--bg)}
.pcard__media img{width:100%;height:100%;object-fit:cover}
.pcard__t{font-size:15px;margin:14px 14px 4px;line-height:1.4}
.pcard__t a{color:var(--ink);text-decoration:none}
.pcard__meta{font-family:var(--fm);font-size:12px;color:var(--muted);margin:0 14px 10px}
.pcard__cta{display:inline-block;margin:0 14px 16px;font-size:14px;font-weight:600}
.pdetail{display:grid;grid-template-columns:7fr 5fr;gap:44px;align-items:start;padding-top:8px;padding-bottom:56px}
.pdetail>*{min-width:0}
.pgal{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}
.pgal img{border-radius:12px;border:1px solid var(--line);aspect-ratio:1;object-fit:cover;width:100%}
.pgal img:first-child{grid-column:1/-1;aspect-ratio:16/10}
.tablewrap{overflow-x:auto;max-width:100%;border-radius:12px;border:1px solid var(--line)}
.spectable{width:100%;border-collapse:collapse;background:var(--card);color:var(--card-ink);font-size:14.5px}
.spectable th,.spectable td{padding:11px 14px;border-bottom:1px solid #E2E8F0;text-align:left;vertical-align:top}
.spectable th{width:32%;font-weight:600;background:#EDF1F5;font-family:var(--fm);font-size:13px}
.fineprint{font-size:13px;color:var(--muted)}
.faq{border-bottom:1px solid var(--line);padding:14px 0}
.faq h3{font-size:16px;margin:0 0 6px}
.faq p{margin:0;color:var(--muted);font-size:15px}
.crumbs ol{display:flex;gap:8px;list-style:none;margin:0;padding:18px 24px 0;font-size:13.5px;flex-wrap:wrap}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.leadform{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:30px;display:grid;gap:16px}
.leadform label{display:grid;gap:7px;font-weight:600;font-size:14.5px}
.leadform input,.leadform select,.leadform textarea{background:var(--bg);border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:12px 14px;font-size:15px;font-family:var(--fb);width:100%}
.leadform input:focus,.leadform select:focus,.leadform textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.honeypot{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.article h1{margin-top:.3em}
.footer{border-top:1px solid var(--line);background:#061E33;padding:48px 0 24px;margin-top:32px}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.footer__title{font-family:var(--fd);font-weight:700;font-size:18px;margin:0 0 10px}
.footer__h{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 10px}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin:.5em 0;font-size:14.5px;color:var(--muted)}
.footer a{color:var(--muted);text-decoration:none}
.footer__base{border-top:1px solid var(--line);margin-top:32px;padding-top:18px;font-size:13px;color:var(--muted)}
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .reveal.is-visible{opacity:1;transform:none}
@media(max-width:1023px){
  .pgrid{grid-template-columns:repeat(3,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:899px){
  .nav{display:none}
  .topbar__cta .btn{display:none}
  .nav-toggle{display:block;background:none;border:1px solid var(--line);border-radius:8px;padding:9px;cursor:pointer}
  .nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0}
  .mnav{display:none;border-top:1px solid var(--line);padding:12px 24px 20px;background:var(--bg)}
  .mnav.open{display:block}
  .mnav ul{list-style:none;margin:0 0 12px;padding:0}
  .mnav a{display:block;padding:11px 4px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
  .hero{grid-template-columns:1fr;padding-top:48px}
  .hero__media{order:-1}
  .picks,.linecards{grid-template-columns:1fr}
  .cols,.pdetail{grid-template-columns:1fr}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .hero__stats{grid-template-columns:repeat(2,1fr)}
  .vizrow{grid-template-columns:1fr;gap:6px}
  .vizrow__n{text-align:left}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
}