/* ChargePK catalogue styles — extracted from the page template.
   Previously inlined into every generated page (108 KB per page, re-downloaded
   on every view). As one file it is fetched once and cached for the session.
   Generated pages link this alongside /style.css. */

    .car-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; margin:24px 0; }
    /* ── car card ────────────────────────────────────────────────────────────
 Used on every listing page. 45 of 47 cars have no photo yet, so the
 placeholder has to look deliberate rather than broken — it gets the
 brand wordmark and a body silhouette instead of an empty grey box. */
    .car-card { position:relative; display:flex; flex-direction:column; background:var(--s1);
border:1px solid var(--hair); border-radius:18px; padding:0; overflow:hidden;
text-decoration:none; isolation:isolate;
transition:border-color .22s, transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s; }
    .car-card:hover { border-color:rgba(0,230,118,.5); transform:translateY(-4px);
box-shadow:0 18px 40px rgba(0,0,0,.4); }
    .car-card:focus-visible { outline:2px solid var(--green); outline-offset:3px; }

    .car-img { position:relative; aspect-ratio:16/10; margin:0; overflow:hidden; border:0;
display:flex; align-items:center; justify-content:center;
background:radial-gradient(72% 78% at 50% 38%, rgba(0,230,118,.13), transparent 70%), rgba(255,255,255,.03); }
    /* pool of light under the car, so a cut-out photo sits on something */
    .car-img::after { content:''; position:absolute; left:50%; bottom:7%; transform:translateX(-50%);
width:66%; height:9%; border-radius:50%; pointer-events:none;
background:radial-gradient(ellipse,rgba(0,0,0,.5),transparent 70%); filter:blur(9px); }
    .car-img img { width:100%; height:100%; object-fit:contain; padding:14px 16px; display:block;
transition:transform .35s cubic-bezier(.4,0,.2,1);
filter:drop-shadow(0 10px 16px rgba(0,0,0,.45)); }
    .car-card:hover .car-img img { transform:scale(1.06); }
    .car-img .ph { position:relative; z-index:1; text-align:center; padding:10px; }
    .car-img .ph b { display:block; font-family:'Sora','Space Grotesk',sans-serif;
font-size:clamp(15px,2.4vw,19px); font-weight:800; color:rgba(255,255,255,.28);
letter-spacing:-.01em; line-height:1.2; }
    .car-img .ph span { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.12em;
color:rgba(255,255,255,.18); margin-top:5px; }

    /* powertrain badge, top-left over the image */
    .cc-badge { position:absolute; top:12px; left:12px; z-index:2; padding:4px 10px; border-radius:999px;
font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
background:rgba(4,19,10,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.16); color:var(--ink); }
    .cc-badge.ev { color:var(--green); border-color:rgba(0,230,118,.45); }

    .cc-body { display:flex; flex-direction:column; flex:1; padding:16px 18px 18px; }
    .car-card .cc-make { color:var(--muted); font-size:10.5px; font-weight:800;
text-transform:uppercase; letter-spacing:.13em; }
    .car-card .cc-name { color:var(--ink); font-size:18px; font-weight:800; margin:5px 0 0;
font-family:'Sora','Space Grotesk',sans-serif; letter-spacing:-.02em; line-height:1.2; }
    .car-card .cc-meta { color:var(--muted); font-size:12.5px; margin:7px 0 0; }
    /* range gets its own line with a bolt, the one number buyers scan for */
    .cc-range { display:flex; align-items:center; gap:7px; margin:11px 0 0;
font-size:13px; color:var(--body-c); }
    .cc-range svg { width:14px; height:14px; color:var(--green); flex:none; }
    .cc-range b { color:var(--ink); font-weight:800; }
    .cc-foot { display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
margin-top:auto; padding-top:15px; }
    .cc-from { display:block; font-size:9.5px; font-weight:800; letter-spacing:.13em;
text-transform:uppercase; color:var(--muted); margin-bottom:3px; }
    .car-card .cc-price { color:var(--ink); font-size:17px; font-weight:800;
font-family:'Sora','Space Grotesk',sans-serif; letter-spacing:-.02em; }
    .cc-go { flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
background:rgba(255,255,255,.07); border:1px solid var(--line2); color:var(--body-c);
transition:background .22s, color .22s, border-color .22s, transform .22s; }
    .cc-go svg { width:15px; height:15px; }
    .car-card:hover .cc-go { background:var(--green); border-color:var(--green); color:#04130a;
transform:translateX(3px); }

    /* horizontal rail used for the powertrain rows */
    .rail-wrap { position:relative; margin:18px 0 0; }
    .brm { margin-top:18px; }
    .rail { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(248px,1fr);
gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 14px;
scrollbar-width:none; }
    .rail::-webkit-scrollbar { display:none; }
    .rail > * { scroll-snap-align:start; }
    @media (min-width:1100px){ .rail { grid-auto-columns:minmax(262px,1fr); } }
    .rail-btn { position:absolute; top:38%; z-index:5; width:38px; height:38px; border-radius:50%;
display:grid; place-items:center; cursor:pointer;
background:rgba(6,17,11,.88); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
border:1px solid var(--line2); color:var(--ink); transition:all .18s; }
    .rail-btn:hover { background:var(--green); border-color:var(--green); color:#04130a; }
    .rail-btn svg { width:16px; height:16px; }
    .rail-btn.prev { left:-6px; } .rail-btn.next { right:-6px; }
    .rail-btn[hidden] { display:none; }
    @media (max-width:700px){ .rail-btn { display:none; } }

    .car-filters { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
    .car-chip { display:inline-block; font-size:13px; font-weight:600; padding:7px 14px; border-radius:999px; background:var(--s2); color:var(--body-c); border:1px solid var(--s3); cursor:pointer; text-decoration:none; }
    .car-filters a.car-chip { color:var(--body-c); }
    .car-filters a.car-chip:hover { border-color:rgba(0,230,118,.5); color:var(--green); }
    .car-chip.active { background:rgba(0,230,118,.13); color:var(--green); border-color:rgba(0,230,118,.5); }
    .charge-box { background:rgba(0,230,118,.06); border:1px solid rgba(0,230,118,.22); border-radius:16px; padding:24px; margin:28px 0; }
    /* ── car detail page: one repeating rhythm — heading, subtitle, panel ── */
    .cp-page { max-width:none; }
    .cp-page > .lead { max-width:none; }
    .cp-h { margin:44px 0 2px; font-size:clamp(24px,3.4vw,32px); }
    .cp-h:first-of-type { margin-top:32px; }
    .cp-sub { color:var(--muted); font-size:14.5px; margin:0 0 16px; }
    .cp-panel { background:var(--s1); border:1px solid var(--hair); border-radius:18px; padding:24px 26px; }
    @media (max-width:600px){ .cp-panel { padding:18px 16px; } }

    /* hero */
    .cp-hero { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:26px; align-items:center;
background:var(--s1); border:1px solid var(--hair); border-radius:20px; padding:22px; margin:22px 0 8px; }
    @media (max-width:760px){ .cp-hero { grid-template-columns:1fr; gap:18px; } }
    .cp-shot { aspect-ratio:16/10; border-radius:14px; overflow:hidden; display:flex; align-items:center; justify-content:center;
background:linear-gradient(140deg,rgba(0,230,118,.10),var(--s1)); border:1px solid var(--s2); }
    .cp-shot img { width:100%; height:100%; object-fit:contain; padding:10px; }
    .cp-shot .ph { text-align:center; padding:14px; }
    .cp-shot .ph b { display:block; font-family:'Sora','Space Grotesk',sans-serif; font-size:clamp(17px,2.6vw,24px); color:var(--body-c); }
    .cp-shot .ph span { font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); }
    .cp-price { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--hair); }
    .cp-price .var { font-family:'Sora','Space Grotesk',sans-serif; font-size:20px; font-weight:700; color:var(--ink); }
    .cp-price .amt { font-family:'Sora','Space Grotesk',sans-serif; font-size:clamp(22px,3vw,30px); font-weight:800; color:var(--ink); text-align:right; line-height:1.1; }
    .cp-price .amt small { display:block; font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:700; }
    .cp-stats { display:grid; grid-template-columns:1fr 1fr; gap:18px 14px; margin-top:16px; }
    .cp-stat b { display:block; font-family:'Sora','Space Grotesk',sans-serif; font-size:26px; font-weight:800; color:var(--green); line-height:1; }
    .cp-stat b i { font-style:normal; font-size:13px; color:var(--body-c); margin-left:2px; }
    .cp-stat span { display:block; font-size:12.5px; color:var(--muted); margin-top:5px; }

    /* spec sheet */
    .cp-specs { display:grid; grid-template-columns:1fr 1fr; gap:10px 40px; }
    @media (max-width:680px){ .cp-specs { grid-template-columns:1fr; gap:6px; } }
    .cp-grp { break-inside:avoid; }
    .cp-grp h3 { font-size:11.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); margin:16px 0 6px; font-family:'Inter',sans-serif; font-weight:800; }
    .cp-grp:first-child h3, .cp-grp:nth-child(2) h3 { margin-top:0; }
    .cp-row { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:10px 0; border-bottom:1px solid var(--s2); font-size:14.5px; }
    .cp-row:last-child { border-bottom:none; }
    .cp-row .k { color:var(--body-c); } .cp-row .v { color:var(--ink); font-weight:700; text-align:right; }
    .cp-row .note { display:block; font-weight:400; font-size:12px; color:var(--muted); margin-top:3px; max-width:52ch; }
    /* Prose that is actually read, rather than a tracked uppercase micro-label,
 gets a floor on phones. The on-road notes carry the tax assumptions, which
 is the last place to make someone squint. Uppercase eyebrow labels are
 left alone — at that size and tracking they read fine and they are the
 typographic device the pages are built on. */
    @media (max-width:700px){
.cp-row .note { font-size:13px; }
.wb-card .hrs { font-size:13px; }
.car-card .cc-meta { font-size:13px; }
.wb-badge { font-size:11.5px; }
    }

    /* inputs / segmented control */
    .cp-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:14px; margin-bottom:18px; }
    .cp-f { display:flex; flex-direction:column; gap:6px; }
    .cp-f > span { font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
    .cp-f input, .cp-f select { padding:12px 14px; border-radius:12px; border:1px solid var(--line2); background:var(--s1); color:var(--ink); font-size:15px; font-family:inherit; font-weight:600; }
    .cp-f input:focus, .cp-f select:focus { outline:none; border-color:rgba(0,230,118,.6); }
    .seg { display:inline-flex; border:1px solid var(--line2); border-radius:999px; overflow:hidden; align-self:start; }
    .seg button { background:none; border:none; color:var(--body-c); padding:11px 20px; font-size:13.5px; font-weight:700; cursor:pointer; font-family:inherit; }
    .seg button.on { background:var(--green); color:#04130a; }

    /* result strip (savings / total) */
    .cp-result { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap;
margin-top:18px; padding-top:16px; border-top:1.5px solid rgba(0,230,118,.28); }
    .cp-result .big { font-family:'Sora','Space Grotesk',sans-serif; font-size:clamp(24px,3.6vw,32px); font-weight:800; color:var(--green); line-height:1; }
    .cp-result .lbl { font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); font-weight:800; margin-bottom:6px; }
    .cp-result .side { text-align:right; font-size:14px; color:var(--muted); line-height:1.7; }
    .cp-result .side b { color:var(--ink); }
    /* two-group on-road: delivered price, then registration */
    .or-grp { font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:800; margin:22px 0 4px; }
    .or-grp:first-of-type { margin-top:6px; }
    .cp-result-sub { border-top-style:dashed; border-top-color:var(--hair); margin-top:12px; padding-top:12px; }
    .cp-result-sub .mid { font-family:'Sora','Space Grotesk',sans-serif; font-size:clamp(18px,2.4vw,22px); font-weight:800; color:var(--ink); line-height:1; }

    /* where to charge — our signature block */
    .cp-charge { background:linear-gradient(150deg,rgba(0,230,118,.10),rgba(0,229,255,.05)); border:1px solid rgba(0,230,118,.3); border-radius:18px; padding:26px; }
    .cp-charge .ports { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 6px; }
    .cp-port { display:inline-flex; align-items:center; gap:7px; background:var(--s2); border:1px solid var(--line2); border-radius:999px; padding:7px 14px; font-size:13.5px; font-weight:700; color:var(--ink); }
    .cp-port em { font-style:normal; font-size:10px; font-weight:800; letter-spacing:.06em; color:#04130a; background:var(--green); border-radius:5px; padding:2px 5px; }
    .cp-port i { font-style:normal; color:var(--muted); font-weight:600; }
    .cp-cov { display:grid; grid-template-columns:auto 1fr; gap:6px 20px; align-items:center; margin-top:20px; padding-top:20px; border-top:1px solid rgba(0,230,118,.2); }
    @media (max-width:560px){ .cp-cov { grid-template-columns:1fr; } }
    .cp-cov .num { font-family:'Sora','Space Grotesk',sans-serif; font-size:clamp(34px,5vw,46px); font-weight:800; color:var(--green); line-height:1; }
    .cp-cov .num small { font-size:17px; color:var(--muted); font-weight:700; }
    .cp-cov .pct { font-family:'Sora','Space Grotesk',sans-serif; font-size:20px; font-weight:800; color:var(--ink); text-align:right; }
    .cp-bar { height:10px; border-radius:999px; background:var(--s3); overflow:hidden; }
    .cp-bar i { display:block; height:100%; background:linear-gradient(90deg,var(--green),var(--teal)); border-radius:999px; }
    .cp-cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }

    /* ── car match quiz ── */
    /* honest placeholder when a car's specs are not verified yet */
    .cp-pending { margin:18px 0 0; padding:14px 16px; border-radius:12px; font-size:13px; line-height:1.6;
color:var(--muted); background:rgba(255,255,255,.04); border:1px dashed var(--line2); }
    .cp-panel .cp-pending a { color:var(--green); font-weight:700; text-decoration:none; }
    .cp-panel .cp-pending a:hover { text-decoration:underline; }

    /* ── charger vendors (hardware, not charging stations) ──────────────
 Distinct from charger-map.html: this lists who SELLS the unit. The
 power filter is the useful axis, because what you can buy is capped by
 whether your home is single- or three-phase. */
    .vd-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; margin:20px 0 0; }
    .vd-card { position:relative; display:flex; flex-direction:column; gap:13px; padding:22px;
border-radius:18px; background:var(--s1); border:1px solid var(--hair); transition:all .2s; }
    .vd-card:hover { border-color:rgba(0,230,118,.45); transform:translateY(-3px);
box-shadow:0 14px 34px rgba(0,0,0,.32); }
    .vd-card[hidden] { display:none; }
    .vd-top { display:flex; align-items:flex-start; gap:14px; }
    .vd-ico { flex:none; width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
background:linear-gradient(150deg,rgba(0,230,118,.2),rgba(0,229,255,.08));
border:1px solid rgba(0,230,118,.3); }
    .vd-ico svg { width:22px; height:22px; color:var(--green); }
    .vd-name { font-family:'Sora','Space Grotesk',sans-serif; font-size:16px; font-weight:800;
color:var(--ink); line-height:1.25; letter-spacing:-.01em; }
    .vd-city { font-size:12.5px; color:var(--muted); margin-top:4px; }
    .vd-sample { position:absolute; top:14px; right:14px; padding:3px 9px; border-radius:999px;
background:rgba(255,190,80,.14); border:1px solid rgba(255,190,80,.4); color:#ffbe50;
font-size:9.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
    .vd-note { font-size:13px; color:var(--body-c); line-height:1.55; }
    .vd-tags { display:flex; gap:6px; flex-wrap:wrap; }
    .vd-tag { padding:5px 11px; border-radius:999px; background:rgba(255,255,255,.05);
border:1px solid var(--hair); font-size:11.5px; font-weight:600; color:var(--muted); }
    .vd-tag.kw { background:rgba(0,230,118,.1); border-color:rgba(0,230,118,.28); color:var(--green); font-weight:700; }
    .vd-foot { display:flex; align-items:center; justify-content:space-between; gap:12px;
margin-top:auto; padding-top:14px; border-top:1px solid var(--hair); }
    .vd-from span { display:block; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
    .vd-from b { font-family:'Sora','Space Grotesk',sans-serif; font-size:16px; font-weight:800; color:var(--green); }
    .vd-card .vd-cta { padding:9px 15px; border-radius:999px; font-size:12.5px; font-weight:800;
background:rgba(255,255,255,.07); border:1px solid var(--line2); color:var(--muted); cursor:not-allowed; }
    .vd-fits { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--green); font-weight:700; }
    .vd-fits svg { width:13px; height:13px; }

    /* what each power level actually buys you */
    .vd-pow { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin:20px 0 0; }
    .vd-p { padding:20px; border-radius:16px; background:var(--s1); border:1px solid var(--hair); }
    .vd-p b { display:block; font-family:'Sora','Space Grotesk',sans-serif; font-size:23px; font-weight:800;
color:var(--green); line-height:1; letter-spacing:-.02em; }
    .vd-p i { display:block; font-style:normal; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
color:var(--muted); margin:8px 0 12px; }
    .vd-p p { margin:0; font-size:13px; color:var(--body-c); line-height:1.6; }

    /* ── installer directory ────────────────────────────────────────────────
 Anyone can list installers. What nobody here does is tell you what the
 job should cost before you ring round — so the estimator leads. */
    /* proof-of-work strip: real install photos, the verification made visible */
    .ins-shots { display:flex; gap:8px; margin:12px 0 2px; overflow-x:auto; scrollbar-width:none; }
    .ins-shots::-webkit-scrollbar { display:none; }
    .ins-shots a { flex:none; display:block; border-radius:10px; overflow:hidden;
border:1px solid var(--hair); transition:border-color .2s, transform .2s; }
    .ins-shots a:hover { border-color:rgba(0,230,118,.5); transform:translateY(-2px); }
    .ins-shots img { display:block; width:76px; height:76px; object-fit:cover; }
    /* lightbox gallery for install photos */
    .pk-lb { position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center;
background:rgba(4,19,10,.96); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
opacity:0; pointer-events:none; transition:opacity .2s ease; }
    .pk-lb.on { opacity:1; pointer-events:auto; }
    .pk-lb img { max-width:min(92vw,900px); max-height:82vh; border-radius:14px;
border:1px solid rgba(255,255,255,.12); box-shadow:0 30px 80px rgba(0,0,0,.6); display:block; }
    .pk-lb-x, .pk-lb-p, .pk-lb-n { position:fixed; display:grid; place-items:center; width:46px; height:46px;
border-radius:50%; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
color:var(--ink); font-size:22px; line-height:1; cursor:pointer; user-select:none;
transition:background .2s, border-color .2s; }
    .pk-lb-x:hover, .pk-lb-p:hover, .pk-lb-n:hover { background:rgba(0,230,118,.15); border-color:rgba(0,230,118,.5); }
    .pk-lb-x { top:calc(18px + env(safe-area-inset-top, 0px)); right:18px; }
    .pk-lb-p { left:12px; top:50%; transform:translateY(-50%); }
    .pk-lb-n { right:12px; top:50%; transform:translateY(-50%); }
    .pk-lb-c { position:fixed; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); left:50%; transform:translateX(-50%);
font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:600; letter-spacing:.08em; color:var(--muted); }
    @media (max-width:640px){ .pk-lb-p { left:6px; } .pk-lb-n { right:6px; } .pk-lb img { max-width:96vw; } }
    @media (prefers-reduced-motion:reduce){ .pk-lb { transition:none; } }
    .ins-warn { display:flex; align-items:flex-start; gap:12px; margin:26px 0 0; padding:15px 18px;
border-radius:14px; background:rgba(255,190,80,.09); border:1px solid rgba(255,190,80,.34);
font-size:13.5px; color:var(--body-c); line-height:1.55; }
    .ins-warn svg { width:18px; height:18px; color:#ffbe50; flex:none; margin-top:1px; }
    .ins-warn b { color:#ffbe50; font-weight:800; }

    /* Empty directory. Shown instead of the filter UI and card grid while there
 are no verified listings — invented businesses are worse than none. */
    .ins-none { margin:22px 0 0; padding:34px 30px; border-radius:22px; text-align:center;
background:rgba(255,255,255,.03); border:1px dashed rgba(255,255,255,.16); }
    @media (max-width:620px){ .ins-none { padding:26px 20px; } }
    .ins-none svg { width:30px; height:30px; color:var(--green); opacity:.85; margin:0 0 12px; }
    .ins-none h3 { margin:0 0 8px; font-size:19px; letter-spacing:-.01em; }
    .ins-none p { margin:0 auto; max-width:52ch; font-size:14px; line-height:1.65; color:var(--muted); }
    .ins-none .ins-none-cta { display:inline-flex; align-items:center; gap:8px; margin:18px 0 0;
padding:11px 20px; border-radius:999px; font-size:13.5px; font-weight:800;
background:var(--green); color:#04150c; text-decoration:none; }

    /* estimator */
    .ins-est { position:relative; overflow:hidden; margin:30px 0 0; padding:28px 30px; border-radius:22px;
background:linear-gradient(150deg,rgba(0,230,118,.1),rgba(255,255,255,.03));
border:1px solid rgba(0,230,118,.24); }
    @media (max-width:620px){ .ins-est { padding:22px 18px; } }
    .ins-est h2 { margin:0 0 6px; font-size:clamp(20px,2.8vw,26px); letter-spacing:-.02em; }
    .ins-est .cp-sub { margin:0 0 22px; }
    .ins-eg { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; }
    .ins-f { display:block; }
    .ins-f > span { display:block; font-size:11px; font-weight:800; letter-spacing:.11em;
text-transform:uppercase; color:var(--muted); margin:0 0 9px; }
    .ins-seg { display:flex; gap:6px; flex-wrap:wrap; }
    .ins-seg button { flex:1; min-width:62px; padding:9px 10px; border-radius:10px; background:rgba(255,255,255,.05);
border:1.5px solid var(--line2); color:var(--body-c); font-family:inherit; font-size:13px;
font-weight:700; cursor:pointer; transition:all .16s; }
    .ins-seg button:hover { border-color:rgba(0,230,118,.55); color:var(--ink); }
    .ins-seg button.on { background:var(--green); border-color:var(--green); color:#04130a; }
    .ins-f input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:8px;
border-radius:99px; background:rgba(255,255,255,.09); outline:none; cursor:pointer; }
    .ins-f input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px;
border-radius:50%; background:var(--green); border:4px solid #04130a;
box-shadow:0 0 0 1px var(--green),0 4px 14px rgba(0,230,118,.5); cursor:grab; }
    .ins-f input[type=range]::-moz-range-thumb { width:18px; height:18px; border-radius:50%;
background:var(--green); border:4px solid #04130a; cursor:grab; }
    .ins-f .val { font-family:'Sora','Space Grotesk',sans-serif; font-size:15px; font-weight:800;
color:var(--ink); margin-top:9px; display:block; }
    .ins-out { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;
margin:24px 0 0; padding:20px 0 0; border-top:1px solid rgba(0,230,118,.2); }
    .ins-out .lbl { font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--green); }
    .ins-out .big { display:block; font-family:'Sora','Space Grotesk',sans-serif;
font-size:clamp(26px,4vw,38px); font-weight:800; color:var(--ink); line-height:1.05;
letter-spacing:-.025em; margin-top:8px; }
    .ins-out .note { font-size:12.5px; color:var(--muted); max-width:34ch; line-height:1.5; }
    .ins-break { display:grid; gap:7px; margin:18px 0 0; }
    .ins-br { display:flex; justify-content:space-between; gap:14px; font-size:13px; color:var(--body-c); }
    .ins-br span:last-child { color:var(--ink); font-weight:700; white-space:nowrap; }

    /* city filter + cards */
    .ins-cities { display:flex; gap:7px; flex-wrap:wrap; margin:18px 0 0; }
    .ins-city { padding:8px 15px; border-radius:999px; background:rgba(255,255,255,.05);
border:1px solid var(--line2); color:var(--body-c); font-family:inherit; font-size:12.5px;
font-weight:700; cursor:pointer; transition:all .16s; }
    .ins-city:hover { border-color:rgba(0,230,118,.55); color:var(--green); }
    .ins-city.on { background:var(--green); border-color:var(--green); color:#04130a; }

    .ins-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:14px; margin:20px 0 0; }
    .ins-card { position:relative; display:flex; flex-direction:column; gap:14px; padding:22px;
border-radius:18px; background:var(--s1); border:1px solid var(--hair); transition:all .2s; }
    .ins-card:hover { border-color:rgba(0,230,118,.45); transform:translateY(-3px);
box-shadow:0 14px 34px rgba(0,0,0,.32); }
    .ins-card[hidden] { display:none; }
    .ins-top { display:flex; align-items:flex-start; gap:14px; }
    .ins-mono { flex:none; width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
background:linear-gradient(150deg,rgba(0,230,118,.2),rgba(0,229,255,.08));
border:1px solid rgba(0,230,118,.3); font-family:'Sora','Space Grotesk',sans-serif;
font-size:15px; font-weight:800; color:var(--green); }
    .ins-name { font-family:'Sora','Space Grotesk',sans-serif; font-size:16px; font-weight:800;
color:var(--ink); line-height:1.25; letter-spacing:-.01em; }
    .ins-where { font-size:12.5px; color:var(--muted); margin-top:4px; }
    .ins-sample { position:absolute; top:14px; right:14px; padding:3px 9px; border-radius:999px;
background:rgba(255,190,80,.14); border:1px solid rgba(255,190,80,.4); color:#ffbe50;
font-size:9.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
    .ins-note { font-size:13px; color:var(--body-c); line-height:1.55; }
    .ins-tags { display:flex; gap:6px; flex-wrap:wrap; }
    .ins-tag { padding:5px 11px; border-radius:999px; background:rgba(255,255,255,.05);
border:1px solid var(--hair); font-size:11.5px; font-weight:600; color:var(--muted); }
    .ins-foot { display:flex; align-items:center; justify-content:space-between; gap:12px;
margin-top:auto; padding-top:14px; border-top:1px solid var(--hair); }
    .ins-from span { display:block; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
    .ins-from b { font-family:'Sora','Space Grotesk',sans-serif; font-size:16px; font-weight:800; color:var(--green); }
    .ins-cta { padding:9px 15px; border-radius:999px; font-size:12.5px; font-weight:800; }
    .ins-card .ins-cta { background:rgba(255,255,255,.07); border:1px solid var(--line2);
color:var(--muted); cursor:not-allowed; }

    /* how it works */
    .ins-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin:20px 0 0; }
    .ins-step { padding:22px; border-radius:18px; background:var(--s1); border:1px solid var(--hair); }
    .ins-step b { display:grid; place-items:center; width:32px; height:32px; border-radius:10px;
background:rgba(0,230,118,.14); border:1px solid rgba(0,230,118,.3); color:var(--green);
font-family:'Sora','Space Grotesk',sans-serif; font-size:14px; font-weight:800; margin:0 0 13px; }
    .ins-step h3 { margin:0 0 7px; font-size:15.5px; letter-spacing:-.01em; }
    .ins-step p { margin:0; font-size:13.5px; color:var(--body-c); line-height:1.6; }

    /* ── the ChargePK difference band ──────────────────────────────────────
 The station count is read from the live Supabase charger table at build
 time rather than hard-coded, and the ring answers the question a static
 spec sheet cannot: how much of the network this particular car can use. */
    .dif { position:relative; overflow:hidden; border-radius:24px; margin:52px 0 0;
padding:38px 40px; border:1px solid rgba(0,230,118,.24);
background:radial-gradient(80% 120% at 88% 0%, rgba(0,229,255,.10), transparent 62%),
  linear-gradient(140deg, rgba(0,230,118,.13), rgba(255,255,255,.03)); }
    @media (max-width:620px){ .dif { padding:26px 20px; border-radius:20px; } }
    .dif::before { content:''; position:absolute; inset:0; pointer-events:none;
background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
background-size:52px 52px;
-webkit-mask-image:radial-gradient(70% 80% at 20% 10%,#000,transparent 76%);
mask-image:radial-gradient(70% 80% at 20% 10%,#000,transparent 76%); }
    .dif-in { position:relative; z-index:2; display:grid;
grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:38px; align-items:center; }
    @media (max-width:900px){ .dif-in { grid-template-columns:1fr; gap:28px; } }
    .dif h2 { margin:10px 0 12px; font-size:clamp(24px,3.4vw,34px); line-height:1.14;
letter-spacing:-.03em; text-wrap:balance; }
    .dif p { margin:0; color:var(--body-c); font-size:15.5px; line-height:1.7; max-width:56ch; }
    .dif-stats { display:flex; gap:34px; flex-wrap:wrap; margin:26px 0 0;
padding:22px 0 0; border-top:1px solid rgba(255,255,255,.1); }
    .dif-s b { display:block; font-family:'Sora','Space Grotesk',sans-serif;
font-size:clamp(26px,3.4vw,34px); font-weight:800; color:var(--ink); line-height:1; letter-spacing:-.025em; }
    .dif-s span { display:block; font-size:11.5px; letter-spacing:.07em; text-transform:uppercase;
color:var(--muted); margin-top:7px; }
    .dif .bh-cta { margin-top:26px; }

    .dif-viz { display:grid; align-content:center; }
    .dif-panel { padding:24px 26px 22px; border-radius:20px;
background:linear-gradient(165deg, rgba(6,20,13,.82), rgba(3,11,7,.62));
border:1px solid rgba(255,255,255,.11);
-webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
box-shadow:0 24px 60px rgba(0,0,0,.4); }
    @media (max-width:620px){ .dif-panel { padding:20px 18px; } }

    .dif-head { display:flex; align-items:baseline; justify-content:space-between; gap:14px;
padding:0 0 16px; border-bottom:1px solid rgba(255,255,255,.09); margin:0 0 18px; }
    .dif-live { display:inline-flex; align-items:center; gap:7px; font-size:10.5px; font-weight:800;
letter-spacing:.14em; text-transform:uppercase; color:var(--green); }
    .dif-live i { width:7px; height:7px; border-radius:50%; background:var(--green);
box-shadow:0 0 0 0 rgba(0,230,118,.6); animation:difPulse 2s ease-out infinite; }
    @keyframes difPulse {
0% { box-shadow:0 0 0 0 rgba(0,230,118,.55); }
70% { box-shadow:0 0 0 9px rgba(0,230,118,0); }
100% { box-shadow:0 0 0 0 rgba(0,230,118,0); }
    }
    .dif-total { font-family:'Sora','Space Grotesk',sans-serif; font-size:clamp(28px,3.6vw,36px);
font-weight:800; color:var(--ink); line-height:1; letter-spacing:-.035em; }
    .dif-total em { font-style:normal; font-size:12px; font-weight:700; color:var(--muted);
letter-spacing:.06em; text-transform:uppercase; margin-left:8px; }

    /* one row per connector — the split nobody else in Pakistan publishes */
    .dif-rows { display:grid; gap:13px; }
    .dif-row { display:grid; grid-template-columns:74px minmax(0,1fr) auto; align-items:center; gap:13px; }
    .dif-cn { font-size:12.5px; font-weight:700; color:var(--body-c); }
    .dif-row.lead .dif-cn { color:var(--ink); font-weight:800; }
    .dif-bar { height:9px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden; }
    .dif-bar i { display:block; height:100%; width:0; border-radius:99px;
background:linear-gradient(90deg, rgba(0,230,118,.45), rgba(0,229,255,.7));
animation:difGrow .9s cubic-bezier(.4,0,.2,1) forwards; animation-delay:calc(var(--i,0) * 110ms + 200ms); }
    .dif-row.lead .dif-bar i { background:linear-gradient(90deg, var(--green), var(--teal));
box-shadow:0 0 14px rgba(0,230,118,.5); }
    @keyframes difGrow { to { width:var(--w,0%); } }
    .dif-n { font-family:'Sora','Space Grotesk',sans-serif; font-size:15px; font-weight:800;
color:var(--ink); white-space:nowrap; }
    .dif-n em { font-style:normal; font-size:11px; font-weight:700; color:var(--muted); margin-left:6px; }
    .dif-row.lead .dif-n { color:var(--green); }

    @media (prefers-reduced-motion: reduce){
.dif-bar i { animation:none; width:var(--w,0%); }
.dif-live i { animation:none; }
    }
    .dif-cap { font-size:12.5px; color:var(--muted); margin:20px 0 0; line-height:1.6;
padding-top:16px; border-top:1px solid rgba(255,255,255,.07); }

    /* ── car finder ─────────────────────────────────────────────────────────
 Search-first. The differentiator is that it shows what it understood
 from the sentence as removable pills, so the matching is never a
 black box and the user can correct it without retyping. */
    .fx-hero { position:relative; overflow:hidden; width:100vw; margin-left:calc(50% - 50vw);
padding:60px 0 54px;
background:radial-gradient(70% 110% at 50% -10%, rgba(0,230,118,.20), rgba(0,229,255,.05) 46%, transparent 72%),
  linear-gradient(172deg,#072a19 0%,#05190e 58%,var(--bg) 100%); }
    .fx-hero::before { content:''; position:absolute; inset:0; pointer-events:none;
background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
background-size:60px 60px;
-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.8),transparent 76%); mask-image:linear-gradient(180deg,rgba(0,0,0,.8),transparent 76%); }
    .fx-in { position:relative; z-index:2; text-align:center; }
    .fx-hero h1 { font-size:clamp(30px,4.6vw,44px); line-height:1.08; letter-spacing:-.03em;
margin:0 auto 14px; max-width:19ch; text-wrap:balance; }
    .fx-sub { color:var(--body-c); font-size:16px; line-height:1.6; margin:0 auto 30px; max-width:56ch; }

    /* the search field */
    .fx-search { position:relative; max-width:720px; margin:0 auto; }
    .fx-field { display:flex; align-items:center; gap:13px; padding:6px 6px 6px 20px; border-radius:999px;
background:rgba(3,12,7,.82); border:1.5px solid rgba(255,255,255,.16);
box-shadow:0 18px 44px rgba(0,0,0,.5); transition:border-color .18s, box-shadow .18s; }
    .fx-search:focus-within .fx-field { border-color:var(--green); box-shadow:0 18px 52px rgba(0,230,118,.26); }
    .fx-field > svg { width:19px; height:19px; color:var(--muted); flex:none; transition:color .18s; }
    .fx-search:focus-within .fx-field > svg { color:var(--green); }
    .fx-field input { flex:1; min-width:0; background:none; border:0; outline:none; color:var(--ink);
font-family:inherit; font-size:16px; font-weight:500; padding:14px 0; }
    .fx-field input::placeholder { color:var(--muted); }
    .fx-go { flex:none; padding:12px 22px; border-radius:999px; background:var(--green); color:#04130a;
border:0; font-family:inherit; font-size:14px; font-weight:800; cursor:pointer; transition:transform .16s; }
    .fx-go:hover { transform:translateY(-1px); }
    .fx-clear { flex:none; width:30px; height:30px; border-radius:50%; border:0; background:rgba(255,255,255,.09);
color:var(--muted); font-family:inherit; font-size:15px; cursor:pointer; display:none; }
    .fx-clear.on { display:block; }
    .fx-clear:hover { background:rgba(255,255,255,.16); color:var(--ink); }
    .fx-slash { position:absolute; right:112px; top:50%; transform:translateY(-50%); pointer-events:none;
font-size:11px; color:var(--muted); opacity:.7; }
    .fx-search:focus-within .fx-slash { opacity:0; }
    @media (max-width:620px){ .fx-slash { display:none; } .fx-go { padding:12px 16px; } }

    /* example queries */
    .fx-egs { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:22px auto 0; max-width:760px; }
    .fx-eg { padding:8px 15px; border-radius:999px; background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.14); color:var(--body-c); font-family:inherit; font-size:12.5px;
font-weight:600; cursor:pointer; transition:all .16s; }
    .fx-eg:hover { border-color:rgba(0,230,118,.55); color:var(--green); background:rgba(0,230,118,.07); }

    /* what we understood — removable */
    .fx-read { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:30px 0 0; }
    .fx-read-lbl { font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--green); }
    .fx-tok { display:inline-flex; align-items:center; gap:8px; padding:7px 8px 7px 14px; border-radius:999px;
background:rgba(0,230,118,.11); border:1px solid rgba(0,230,118,.3); color:var(--ink);
font-size:13px; font-weight:700; }
    .fx-tok em { font-style:normal; color:var(--muted); font-weight:600; margin-right:2px; }
    .fx-tok button { width:19px; height:19px; border-radius:50%; border:0; background:rgba(0,230,118,.2);
color:var(--green); font-family:inherit; font-size:12px; line-height:1; cursor:pointer; flex:none; }
    .fx-tok button:hover { background:var(--green); color:#04130a; }
    .fx-none { font-size:13px; color:var(--muted); }
    /* words we recognised but hold no data for — said out loud, never dropped */
    .fx-ig { display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:999px;
background:rgba(255,255,255,.05); border:1px dashed var(--line2); color:var(--muted); font-size:12.5px; }
    .fx-ig i { font-style:normal; opacity:.75; }

    .fx-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:26px 0 0; }
    .fx-count { font-size:14px; color:var(--body-c); }
    .fx-count b { font-family:'Sora','Space Grotesk',sans-serif; font-size:20px; font-weight:800; color:var(--green); }

    .fx-empty { padding:52px 24px; text-align:center; border:1px dashed var(--line2); border-radius:18px; margin:20px 0 0; }
    .fx-empty b { display:block; font-family:'Sora','Space Grotesk',sans-serif; font-size:19px; font-weight:800;
color:var(--ink); margin:0 0 8px; }
    .fx-empty p { color:var(--muted); font-size:14px; margin:0 0 18px; }
    .fx-relax { display:inline-flex; gap:8px; flex-wrap:wrap; justify-content:center; }
    .fx-relax button { padding:9px 16px; border-radius:999px; background:rgba(0,230,118,.1);
border:1px solid rgba(0,230,118,.3); color:var(--green); font-family:inherit; font-size:13px;
font-weight:700; cursor:pointer; }
    .fx-relax button:hover { background:var(--green); color:#04130a; }

    /* ── car match quiz ─────────────────────────────────────────────────────
 Full-height split. Left asks, right reacts: the count of cars still
 matching falls as answers come in, which is the whole point of a quiz
 and something a static marketing panel can't do. */
    /* .qz2 sits directly in <main>, which is already full width — no bleed
 needed. The outer padding is derived from .container (1120px, 28px
 gutters) so the quiz text lines up with every section below it.
 Percentages resolve against main's width, not 100vw, so a scrollbar
 can't knock it out of alignment. */
    /* The grid sits on the SAME geometry as .container (1120px, 28px gutters),
 so quiz text lines up with every section below. Each panel then pulls its
 own edge out to the viewport with an equal negative margin + padding, so
 the background still bleeds while the content stays on the grid. vw is
 used only for the bleed distance — a scrollbar can shift the background
 edge a few px, but never the text. */
    .qz2 { --bleed:max(28px,calc((100vw - 1064px) / 2)); position:relative;
max-width:1120px; margin:0 auto; padding:0 28px;
display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
min-height:calc(100vh - 69px); }
    @media (max-width:960px){ .qz2 { grid-template-columns:1fr; min-height:0; } }

    .qz-ask { position:relative; display:flex; flex-direction:column; justify-content:center;
margin-left:calc(-1 * var(--bleed));
padding:56px clamp(28px,4vw,60px) 56px var(--bleed);
border-top:1px solid var(--hair); overflow:hidden;
background:radial-gradient(80% 90% at 12% 8%, rgba(0,230,118,.12), transparent 62%), var(--bg); }
    .qz-ask::before { content:''; position:absolute; inset:0; pointer-events:none;
background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
background-size:56px 56px; -webkit-mask-image:radial-gradient(70% 70% at 20% 20%,#000,transparent 75%);
mask-image:radial-gradient(70% 70% at 20% 20%,#000,transparent 75%); }
    .qz-in { position:relative; z-index:2; width:100%; max-width:620px; }

    .qz-kicker { font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
color:var(--green); margin:0 0 12px; }
    .qz2 h1 { font-size:19px; font-weight:700; color:var(--muted); margin:0 0 30px;
letter-spacing:-.01em; line-height:1.4; max-width:44ch; }

    /* segmented stepper — one bar per question, filled as you go */
    .qz-segs { display:flex; gap:5px; margin:0 0 12px; }
    .qz-seg { flex:1; height:4px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; }
    .qz-seg i { display:block; height:100%; width:0; border-radius:99px;
background:linear-gradient(90deg,var(--green),var(--teal)); transition:width .45s cubic-bezier(.4,0,.2,1); }
    .qz-seg.done i, .qz-seg.now i { width:100%; }
    .qz-meta { display:flex; justify-content:space-between; align-items:baseline;
font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
color:var(--muted); margin:0 0 30px; }
    .qz-meta b { color:var(--green); }

    .qz-q { font-family:'Sora','Space Grotesk',sans-serif; font-size:clamp(25px,3.4vw,36px);
font-weight:800; line-height:1.14; letter-spacing:-.028em; color:var(--ink); margin:0 0 10px; text-wrap:balance; }
    .qz-hint { color:var(--muted); font-size:14.5px; line-height:1.6; margin:0 0 26px; max-width:50ch; }

    .qz-opts { display:grid; gap:9px; }
    .qz-o { display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer;
padding:15px 17px; border-radius:14px; background:rgba(255,255,255,.04);
border:1px solid var(--line2); color:var(--ink); font-family:inherit; font-size:15px; font-weight:600;
transition:border-color .16s, background .16s, transform .16s; }
    .qz-o:hover { border-color:rgba(0,230,118,.6); background:rgba(0,230,118,.07); transform:translateX(4px); }
    .qz-o:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
    .qz-o.on { border-color:var(--green); background:rgba(0,230,118,.12); }
    /* number key badge — the whole quiz is answerable from the keyboard */
    .qz-k { flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
background:rgba(255,255,255,.07); border:1px solid var(--line2); font-size:11.5px; font-weight:800;
color:var(--muted); transition:all .16s; }
    .qz-o:hover .qz-k, .qz-o.on .qz-k { background:var(--green); border-color:var(--green); color:#04130a; }
    .qz-o .lbl { flex:1; min-width:0; }
    .qz-o small { display:block; font-weight:400; font-size:12.5px; color:var(--muted); margin-top:3px; }
    .qz-o .arw { flex:none; width:16px; height:16px; color:var(--green); opacity:0; transition:opacity .16s, transform .16s; }
    .qz-o:hover .arw { opacity:1; transform:translateX(3px); }

    .qz-foot { display:flex; align-items:center; gap:16px; margin:26px 0 0; flex-wrap:wrap; }
    .qz-back { background:none; border:0; color:var(--muted); font-family:inherit; font-size:13.5px;
font-weight:700; cursor:pointer; padding:8px 0; }
    .qz-back:hover { color:var(--green); }
    .qz-tip { font-size:12px; color:var(--muted); opacity:.75; }
    .qz-tip kbd { display:inline-block; padding:1px 6px; border-radius:5px; background:rgba(255,255,255,.08);
border:1px solid var(--line2); font-family:inherit; font-size:11px; font-weight:700; color:var(--body-c); }

    /* answered-so-far chips, click to jump back */
    .qz-crumbs { display:flex; gap:7px; flex-wrap:wrap; margin:22px 0 0; }
    .qz-crumb { padding:6px 12px; border-radius:999px; background:rgba(0,230,118,.09);
border:1px solid rgba(0,230,118,.26); color:var(--body-c); font-size:11.5px; font-weight:700;
cursor:pointer; font-family:inherit; transition:all .16s; }
    .qz-crumb:hover { background:rgba(0,230,118,.18); color:var(--green); }

    /* ── right panel: the live narrowing ── */
    .qz-live { position:relative; display:flex; flex-direction:column; justify-content:center;
margin-right:calc(-1 * var(--bleed));
padding:56px var(--bleed) 56px clamp(28px,3.5vw,52px); overflow:hidden;
border-top:1px solid var(--hair); border-left:1px solid var(--hair);
background:radial-gradient(85% 70% at 78% 18%, rgba(0,230,118,.14), transparent 60%),
  linear-gradient(200deg,#08251588,#020a06 62%,#010603); }
    @media (max-width:960px){
.qz-ask, .qz-live { margin-left:calc(-1 * var(--bleed)); margin-right:calc(-1 * var(--bleed));
  padding:44px var(--bleed); }
.qz-live { border-left:0; }
    }
    .qz-live::after { content:''; position:absolute; width:460px; height:460px; right:-140px; top:50%;
transform:translateY(-50%); border-radius:50%; pointer-events:none;
background:radial-gradient(circle,rgba(0,230,118,.15),transparent 66%); filter:blur(42px); }
    .qz-livein { position:relative; z-index:2; }
    .qz-lk { font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
color:var(--green); margin:0 0 18px; }
    .qz-count { display:flex; align-items:baseline; gap:14px; }
    .qz-num { font-family:'Sora','Space Grotesk',sans-serif; font-size:clamp(64px,10vw,124px); font-weight:800;
line-height:.85; letter-spacing:-.05em; color:var(--ink);
background:linear-gradient(150deg,#fff,var(--green)); -webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; }
    .qz-of { font-size:14px; color:var(--muted); font-weight:700; }
    .qz-cap { margin:18px 0 0; font-size:15.5px; color:var(--body-c); line-height:1.6; max-width:34ch; }

    /* contenders currently leading */
    .qz-lead { display:grid; gap:8px; margin:30px 0 0; }
    .qz-lc { display:flex; align-items:center; gap:13px; padding:9px 13px; border-radius:12px;
background:rgba(255,255,255,.04); border:1px solid var(--hair); text-decoration:none;
opacity:0; transform:translateY(6px); animation:qzIn .34s forwards; }
    @keyframes qzIn { to { opacity:1; transform:none; } }
    .qz-lc img { width:52px; height:34px; object-fit:contain; flex:none; }
    .qz-lc .ph2 { width:52px; height:34px; flex:none; border-radius:7px; background:rgba(255,255,255,.06); }
    .qz-lc b { font-size:13px; color:var(--ink); font-weight:700; display:block; line-height:1.3; }
    .qz-lc span { font-size:11.5px; color:var(--muted); }
    .qz-lc .pr { margin-left:auto; font-size:12px; font-weight:800; color:var(--green); white-space:nowrap; }

    /* ── results ────────────────────────────────────────────────────────────
 The asking column is capped at 620px for readable question text; the
 answer needs the whole page, so .done lifts that cap. */
    .qz2.done { grid-template-columns:1fr; min-height:0; }
    .qz2.done .qz-live { display:none; }
    .qz2.done .qz-ask { justify-content:flex-start;
margin-left:calc(-1 * var(--bleed)); margin-right:calc(-1 * var(--bleed));
padding:44px var(--bleed) 76px; }
    .qz2.done .qz-in { max-width:none; margin:0; }
    .qz2.done h1 { margin-bottom:22px; }

    /* align-items:start — without it the verdict card stretches to the height
 of the two stacked panels beside it and ends in dead space */
    .qz-rgrid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:20px;
margin:26px 0 0; align-items:start; }
    @media (max-width:900px){ .qz-rgrid { grid-template-columns:1fr; } }

    /* closing line inside the verdict, so the card ends on something */
    .qz-vfoot { position:relative; z-index:2; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
margin:22px 0 0; padding:16px 0 0; border-top:1px solid rgba(0,230,118,.22);
font-size:13.5px; color:var(--body-c); }
    .qz-vfoot b { color:var(--green); font-weight:800; }
    .qz-vfoot svg { width:16px; height:16px; color:var(--green); flex:none; }
    .qz-verdict2 .qz-vjump { margin-left:auto; color:var(--green); font-weight:700; text-decoration:none; white-space:nowrap; }
    .qz-verdict2 .qz-vjump:hover { text-decoration:underline; }

    .qz-side { display:grid; gap:20px; align-content:start; }
    .qz-panel { border-radius:20px; padding:24px 26px; background:var(--s1); border:1px solid var(--hair); }
    .qz-panel h3 { font-family:'Sora','Space Grotesk',sans-serif; font-size:12px; font-weight:800;
letter-spacing:.14em; text-transform:uppercase; color:var(--green); margin:0 0 18px; }

    /* recap of the answers that produced this verdict */
    .qz-recap { display:grid; gap:0; }
    .qz-rr { display:flex; justify-content:space-between; align-items:baseline; gap:14px;
padding:11px 0; border-bottom:1px solid var(--hair); font-size:13px; }
    .qz-rr:last-child { border-bottom:0; padding-bottom:0; }
    .qz-rr:first-child { padding-top:0; }
    .qz-rr dt { color:var(--muted); flex:none; }
    .qz-rr dd { margin:0; color:var(--ink); font-weight:700; text-align:right; }

    .qz-res-cta { display:flex; flex-wrap:wrap; gap:11px; margin:36px 0 0; }
    .qz-verdict2 { position:relative; overflow:hidden; border-radius:24px; padding:38px 40px;
background:linear-gradient(140deg,rgba(0,230,118,.14),rgba(0,229,255,.05));
border:1px solid rgba(0,230,118,.34); }
    @media (max-width:620px){ .qz-verdict2 { padding:26px 22px; } }
    .qz-verdict2::after { content:''; position:absolute; width:340px; height:340px; right:-110px; bottom:-140px;
border-radius:50%; pointer-events:none;
background:radial-gradient(circle,rgba(0,230,118,.22),transparent 66%); filter:blur(34px); }
    .qz-vhead { position:relative; z-index:2; display:flex; align-items:flex-start; gap:18px; margin:14px 0 0; }
    .qz-vicon { flex:none; width:62px; height:62px; border-radius:18px; display:grid; place-items:center;
background:rgba(0,230,118,.13); border:1px solid rgba(0,230,118,.35); }
    .qz-vicon svg { width:30px; height:30px; color:var(--green); filter:drop-shadow(0 0 12px rgba(0,230,118,.55)); }
    @media (max-width:620px){ .qz-vicon { width:50px; height:50px; border-radius:14px; } .qz-vicon svg { width:24px; height:24px; } }
    .qz-verdict2 .kind { font-family:'Sora','Space Grotesk',sans-serif; font-size:clamp(28px,4.2vw,42px);
font-weight:800; color:var(--green); line-height:1.05; margin:0 0 8px; letter-spacing:-.03em; }
    .qz-verdict2 .qz-why { position:relative; z-index:2; }
    .qz-why { display:grid; gap:9px; margin:20px 0 0; padding:0; list-style:none; }
    .qz-why li { display:flex; gap:10px; font-size:14.5px; color:var(--body-c); line-height:1.55; }
    .qz-why li::before { content:'✓'; color:var(--green); font-weight:800; flex:none; }
    /* confidence bars across the three families */
    .qz-scores { display:grid; gap:11px; margin:26px 0 0; max-width:430px; }
    .qz-sc { display:grid; grid-template-columns:112px 1fr auto; align-items:center; gap:12px; font-size:12.5px; }
    .qz-sc .nm { color:var(--body-c); font-weight:700; }
    .qz-sc .tr { height:7px; border-radius:99px; background:rgba(255,255,255,.09); overflow:hidden; }
    .qz-sc .fl { display:block; height:100%; border-radius:99px; background:rgba(0,230,118,.35); width:0;
transition:width .6s cubic-bezier(.4,0,.2,1); }
    .qz-sc.top .fl { background:linear-gradient(90deg,var(--green),var(--teal)); box-shadow:0 0 12px rgba(0,230,118,.5); }
    .qz-sc.top .nm { color:var(--green); font-weight:800; }
    .qz-sc .pc { color:var(--muted); font-weight:700; }

    .qz { max-width:720px; margin:26px auto 0; }
    .qz-bar { height:6px; border-radius:999px; background:var(--s3); overflow:hidden; margin:10px 0 6px; }
    .qz-bar i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--green),var(--teal)); border-radius:999px; transition:width .35s ease; }
    .qz-step { font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); display:flex; justify-content:space-between; }
    .qz-card { background:var(--s1); border:1px solid var(--hair); border-radius:20px; padding:28px; margin-top:18px; }
    @media (max-width:600px){ .qz-card { padding:20px 16px; } }
    .qz-card h2 { font-size:clamp(21px,3.2vw,28px); margin:0 0 6px; }
    .qz-card .qz-hint { color:var(--muted); font-size:14.5px; margin:0 0 20px; }
    .qz-opts { display:grid; gap:10px; }
    .qz-opt { display:flex; align-items:flex-start; gap:13px; width:100%; text-align:left; cursor:pointer;
background:var(--s1); border:1.5px solid var(--line2); border-radius:14px; padding:15px 17px; color:var(--ink);
font-family:inherit; font-size:15.5px; font-weight:600; transition:border-color .18s, background .18s; }
    .qz-opt:hover { border-color:rgba(0,230,118,.55); background:rgba(0,230,118,.05); }
    .qz-opt.on { border-color:var(--green); background:rgba(0,230,118,.1); }
    .qz-opt .tick { flex:none; width:20px; height:20px; border-radius:50%; border:2px solid var(--line2); margin-top:1px; display:grid; place-items:center; font-size:11px; color:#04130a; }
    .qz-opt.on .tick { background:var(--green); border-color:var(--green); }
    .qz-opt small { display:block; font-weight:400; font-size:13px; color:var(--muted); margin-top:3px; }
    .qz-nav { display:flex; justify-content:space-between; gap:12px; margin-top:22px; }
    .qz-back { background:none; border:none; color:var(--muted); font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; padding:10px 4px; }
    .qz-back:hover { color:var(--ink); }
    .qz-verdict { background:linear-gradient(150deg,rgba(0,230,118,.12),rgba(0,229,255,.05)); border:1px solid rgba(0,230,118,.32); border-radius:20px; padding:28px; }
    .qz-verdict .kind { font-family:'Sora','Space Grotesk',sans-serif; font-size:clamp(26px,4.5vw,38px); font-weight:800; color:var(--green); line-height:1.1; margin:4px 0 10px; }
    .qz-why { display:grid; gap:8px; margin:16px 0 0; padding:0; list-style:none; }
    .qz-why li { display:flex; gap:9px; font-size:14.5px; color:var(--body-c); }
    .qz-why li::before { content:'✓'; color:var(--green); font-weight:800; flex:none; }

    /* ── where to buy ── */
    .wb-tabs { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:18px; }
    .wb-tab { background:var(--s1); border:1.5px solid var(--line2); border-radius:999px; padding:9px 18px; color:var(--body-c);
font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; transition:border-color .18s,background .18s,color .18s; }
    .wb-tab:hover { border-color:rgba(0,230,118,.5); color:var(--ink); }
    .wb-tab.on { background:var(--green); border-color:var(--green); color:#04130a; }
    .wb-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(266px,1fr)); gap:14px; }
    .wb-grid[hidden] { display:none; }   /* author display must not defeat [hidden] */
    .wb-card { background:var(--s1); border:1px solid var(--hair); border-radius:16px; padding:19px 20px; }
    .wb-card h3 { font-size:16.5px; margin:0 0 3px; color:var(--ink); }
    .wb-card .meta { font-size:13px; color:var(--muted); margin:0 0 2px; }
    .wb-card .addr { font-size:13.5px; color:var(--body-c); margin:6px 0 0; }
    .wb-card .hrs { font-size:12px; color:var(--muted); margin:8px 0 0; }
    .wb-badge { display:inline-block; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
background:rgba(0,230,118,.14); color:var(--green); border-radius:5px; padding:3px 7px; margin-left:6px; vertical-align:2px; }
    .wb-acts { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
    /* scoped with the parent class so these beat the site-wide .guide a colour rule */
    .wb-acts a { font-size:13px; font-weight:700; text-decoration:none; border-radius:999px; padding:8px 15px; }
    .wb-acts .wb-dir { background:var(--green); color:#04130a; }
    .wb-acts .wb-dir:hover { background:#00c853; color:#04130a; }
    .wb-acts .wb-call { background:var(--s2); color:var(--ink); border:1px solid var(--line2); }
    .wb-acts .wb-call:hover { border-color:var(--green); color:var(--green); }
    /* ── spacing reset ──────────────────────────────────────────────
 The site-wide rule section padding:120px 0 is meant for the
 marketing homepage. On these pages every block is a <section>, so it
 injected ~120px of dead space everywhere. Opt out once here, then set
 one deliberate vertical rhythm below. */
    main section { padding:0; }
    main section.charge-box { padding:26px; }        /* keeps its own inner padding */

    /* vertical rhythm: 52px between major blocks, 18px header→content */
    .ev-secrow { margin:72px 0 0; padding:0; }
    .ev-secrow + .car-grid { margin-top:18px; }
    .car-grid { margin:18px 0 0; }
    /* hub section headings: 36px, with 72px of air above each one.
 Overrides the global h2 clamp(30px,4.2vw,50px), which rendered at 50px. */
    main > h2, .ev-secrow h2 { font-size:clamp(26px,3.2vw,36px); line-height:1.14; }
    main > h2 { margin:72px 0 6px; }
    main > h2 + .cp-sub { margin-bottom:18px; }
    main > .car-filters { margin:0 0 6px; }
    main > .bud-grid { margin:18px 0 0; }
    main > .ev-tools { margin:52px 0 0; }            /* beats the later .ev-tools rule */
    main > .car-filters + h2 { margin-top:52px; }    /* keep every major break equal */
    main > p:last-child { margin-top:44px; }

    /* ── display font: EV car pages only (scoped to this page's style block,
 footer left alone so it matches the rest of the site) ── */
    main h1, main h2, main h3,
    main .guide h1, main .guide h2, main .guide h3, .cp-page h1, .cp-page h2, .cp-page h3,
    .cc-name, .cp-price .var, .cp-price .amt, .cp-stat b, .evh-proof b,
    .cp-cov .num, .cp-cov .pct, .cp-result .big, .qz-verdict .kind,
    .cp-shot .ph b, .car-img .ph b, .evh-type b
    { font-family:'Sora','Space Grotesk',sans-serif; letter-spacing:-.02em; }
    main h1 { letter-spacing:-.03em; }

    /* ── EV section only: the main header scrolls away with the page and the
 segmented sub-nav sticks to the top in its place ── */
    body > nav { position:relative; top:auto; }
    .evsub { position:sticky; top:0; z-index:900;
background:linear-gradient(180deg, rgba(5,22,13,.96), rgba(5,22,13,.90));
backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
border-bottom:1px solid rgba(255,255,255,.06);
box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 8px 26px rgba(0,0,0,.28); }
    .evsub-in { display:flex; justify-content:center; padding:9px 0; }
    /* the track holds the pills and gives the group a single object feel */
    /* this is a <nav>, so undo the site-wide fixed-nav rule first */
    nav.evsub-track { position:static; top:auto; left:auto; right:auto; height:auto; z-index:auto;
backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; }
    /* width:max-content + flex:0 1 auto keeps the track content-sized so the
 centring actually works; overflow-x only kicks in once it must scroll */
    .evsub-track { display:flex; align-items:center; gap:3px; padding:4px;
background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); border-radius:999px;
width:max-content; max-width:100%; flex:0 1 auto;
overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
    .evsub-track::-webkit-scrollbar { display:none; }
    .evsub-i { flex:none; display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
padding:9px 16px; border-radius:999px; font-size:13.5px; font-weight:700; letter-spacing:-.005em;
color:var(--body-c); text-decoration:none; transition:background .2s, color .2s, transform .2s; }
    .evsub-i svg { width:15px; height:15px; flex:none; opacity:.85; }
    .evsub-track .evsub-i:hover { background:rgba(255,255,255,.06); color:var(--ink); }
    .evsub-track .evsub-i:hover svg { opacity:1; }
    .evsub-i.on { background:linear-gradient(135deg,var(--green),#00c9a7); color:#04130a;
box-shadow:0 5px 16px rgba(0,230,118,.34), 0 1px 0 rgba(255,255,255,.28) inset; }
    .evsub-track .evsub-i.on:hover { background:linear-gradient(135deg,var(--green),#00c9a7); color:#04130a; }
    .evsub-i.on svg { opacity:1; }
    @media (max-width:1080px){ .evsub-i { padding:9px 13px; font-size:13px; gap:7px; } }
    @media (max-width:820px){
.evsub { top:0; }
.evsub-in { justify-content:flex-start; padding:8px 0; }
.evsub-track { border-radius:16px; }
.evsub-i { padding:8px 12px; font-size:12.5px; }
.evsub-i svg { width:14px; height:14px; }
    }

    /* ── car detail hero: full-bleed band, product first ── */
    .cp-bleed { padding-top:0; }
    .cp-page:not(.cp-bleed) { padding-top:44px; }          /* band supplies its own nav clearance */
    .ch { position:relative; padding:0; margin:0 0 44px; }
    .ch-band { position:relative; width:100vw; margin-left:calc(50% - 50vw); padding:52px 0 46px; overflow:hidden;
background:
  radial-gradient(90% 120% at 78% 0%, rgba(0,230,118,.20) 0%, rgba(0,229,255,.07) 42%, transparent 70%),
  linear-gradient(170deg, #072a19 0%, #05190e 58%, var(--bg) 100%); }
    .ch-band::before { content:''; position:absolute; inset:0;
background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
background-size:60px 60px;
-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 80%); mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 80%); }
    .ch-in { position:relative; z-index:2; }
    /* reset the site-wide fixed-nav rule, which otherwise pins this breadcrumb
 to the viewport top behind the header */
    nav.ch-crumbs { position:static; background:none; backdrop-filter:none; -webkit-backdrop-filter:none;
border:none; box-shadow:none; height:auto; z-index:auto; padding:0; }
    .ch-crumbs { font-size:12.5px; margin-bottom:20px; display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
    .ch-crumbs a { color:var(--muted); text-decoration:none; }
    .ch-in .ch-crumbs a:hover { color:var(--green); }
    .ch-crumbs span { color:var(--muted); opacity:.55; }
    .ch-crumbs b { color:var(--body-c); font-weight:600; }

    .ch-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:44px; align-items:center; }
    @media (max-width:900px){ .ch-grid { grid-template-columns:1fr; gap:22px; } }

    .ch-shot { position:relative; aspect-ratio:16/10; display:grid; place-items:center; }
    .ch-shot img { width:100%; height:100%; object-fit:contain;
filter:drop-shadow(0 34px 42px rgba(0,0,0,.6)) drop-shadow(0 0 70px rgba(0,230,118,.14)); }
    /* soft pool of light under the car */
    .ch-shot::after { content:''; position:absolute; left:50%; bottom:4%; transform:translateX(-50%);
width:74%; height:11%; border-radius:50%; background:radial-gradient(ellipse,rgba(0,230,118,.20),transparent 68%); filter:blur(13px); }
    .ch-shot .ph { text-align:center; padding:22px; }
    .ch-shot .ph b { display:block; font-family:'Sora','Space Grotesk',sans-serif; font-size:clamp(20px,3.4vw,30px); font-weight:800; color:rgba(255,255,255,.20); }
    .ch-shot .ph span { font-size:11px; text-transform:uppercase; letter-spacing:.11em; color:var(--muted); }

    .ch-eyebrow { display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:800; letter-spacing:.11em;
text-transform:uppercase; color:var(--green); margin-bottom:12px; flex-wrap:wrap; }
    .ch-in .ch-eyebrow a { color:var(--green); text-decoration:none; }
    .ch-in .ch-eyebrow a:hover { text-decoration:underline; }
    .ch-eyebrow i { font-style:normal; color:var(--muted); opacity:.6; }
    .ch h1 { margin:0 0 6px; line-height:1.02; letter-spacing:-.03em; }
    .ch h1 .nm { display:block; font-size:clamp(30px,4.6vw,44px); }
    .ch h1 .ql { display:block; font-size:clamp(13px,1.5vw,16px); font-weight:600; letter-spacing:.01em;
color:var(--muted); margin-top:10px; font-family:'Inter',sans-serif; }

    .ch-vars { display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 0; }
    .ch-var { padding:8px 16px; border-radius:999px; background:var(--s1); border:1.5px solid var(--line2);
color:var(--body-c); font-family:inherit; font-size:13.5px; font-weight:700; cursor:pointer; transition:all .18s; }
    .ch-vars .ch-var:hover { border-color:rgba(0,230,118,.55); color:var(--ink); }
    .ch-var.on { background:var(--green); border-color:var(--green); color:#04130a; }
    .ch-price { display:flex; align-items:baseline; gap:10px; margin:16px 0 4px; flex-wrap:wrap; }
    .ch-price b { white-space:nowrap; }
    .ch-price b { font-family:'Sora','Space Grotesk',sans-serif; font-size:clamp(26px,3.6vw,36px); font-weight:800; color:var(--ink); line-height:1; letter-spacing:-.02em; }
    .ch-price span { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }

    .ch-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:14px 10px; margin:22px 0 0;
padding:18px 0 0; border-top:1px solid rgba(255,255,255,.1); }
    .ch-stat b { display:block; font-family:'Sora','Space Grotesk',sans-serif; font-size:21px; font-weight:800; color:var(--green); line-height:1; }
    .ch-stat b i { font-style:normal; font-size:11.5px; color:var(--body-c); margin-left:2px; }
    .ch-stat span { display:block; font-size:11.5px; color:var(--muted); margin-top:5px; }

    .ch-cta { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
    .ch-fit { display:inline-flex; align-items:center; gap:9px; margin-top:16px; padding:10px 15px; border-radius:999px;
background:rgba(0,230,118,.09); border:1px solid rgba(0,230,118,.26); font-size:13px; color:var(--body-c); }
    .ch-fit b { color:var(--green); font-weight:800; }
    .ch-fit svg { width:15px; height:15px; color:var(--green); flex:none; }
    @media (max-width:900px){ .ch-band { padding:38px 0 34px; } .ch-shot { aspect-ratio:16/9; } }

    /* ── brand page ─────────────────────────────────────────────────────────
 Full-bleed hero: the brand's own mark, blown up and ghosted, is the
 artwork. Nothing else on the page is per-brand, so it has to carry it. */
    .bh { position:relative; padding:0; margin:0 0 8px; }
    .bh-band { position:relative; width:100vw; margin-left:calc(50% - 50vw); padding:44px 0 0; overflow:hidden;
background:
  radial-gradient(78% 120% at 82% -10%, rgba(0,230,118,.22) 0%, rgba(0,229,255,.07) 44%, transparent 72%),
  linear-gradient(168deg, #072a19 0%, #05190e 56%, var(--bg) 100%); }
    .bh-band::before { content:''; position:absolute; inset:0; pointer-events:none;
background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
background-size:60px 60px;
-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 78%); mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 78%); }
    .bh-in { position:relative; z-index:2; }
    /* z-index:2 above makes this a stacking context, which traps an open
 dropdown (z-index 400) below the sticky compare header (70). The select
 enhancer adds .csel-lift while a panel is open so it can escape. */
    .bh-in.csel-lift { z-index:800; }
    /* A band holding a dropdown can't clip, or the open panel is cut off.
 Safe only where the band has no ghost mark bleeding past its edges. */
    .bh-band.bh-open { overflow:visible; }
    nav.bh-crumbs { position:static; background:none; backdrop-filter:none; -webkit-backdrop-filter:none;
height:auto; left:auto; right:auto; top:auto; z-index:auto; border:0; padding:0;
display:flex; gap:8px; align-items:center; font-size:12.5px; margin:0 0 26px; flex-wrap:wrap; }
    .bh-crumbs a { color:var(--muted); text-decoration:none; }
    .bh-in .bh-crumbs a:hover { color:var(--green); }
    .bh-crumbs span { color:var(--muted); opacity:.55; }
    .bh-crumbs b { color:var(--body-c); font-weight:600; }

    /* the ghosted mark, bled off the right edge */
    .bh-ghost { position:absolute; right:-4%; top:50%; transform:translateY(-54%); width:min(46%,520px);
pointer-events:none; z-index:1; }
    /* the 48px mark, blurred into atmosphere — the blur is the point, it turns
 an upscale artefact into a glow */
    .bh-ghost img { position:absolute; right:6%; top:50%; transform:translateY(-50%) scale(1.15);
width:72%; height:auto; filter:brightness(0) invert(1) blur(26px); opacity:.14; }
    .bh-ghost img.detail { filter:invert(1) blur(26px); }
    /* a real high-res mark needs none of that — crisp, flattened white, faint */
    .bh-ghost img.hi { position:static; transform:none; width:100%; max-height:340px; object-fit:contain;
filter:brightness(0) invert(1) blur(0); opacity:.06; }
    /* the crisp layer: the wordmark, clipped off the right edge like the pack */
    .bh-ghost b { position:relative; display:block; text-align:right; font-family:'Sora','Space Grotesk',sans-serif;
font-weight:800; font-size:clamp(90px,11vw,170px); line-height:.85; color:#fff; opacity:.05;
letter-spacing:-.045em; white-space:nowrap; }
    @media (max-width:900px){ .bh-ghost { display:none; } }

    .bh-grid { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:40px; align-items:end; }
    @media (max-width:980px){ .bh-grid { grid-template-columns:1fr; gap:26px; align-items:start; } }

    .bh-eyebrow { display:flex; align-items:center; gap:9px; font-size:11.5px; font-weight:800; letter-spacing:.12em;
text-transform:uppercase; color:var(--green); margin:0 0 16px; flex-wrap:wrap; }
    .bh-eyebrow i { font-style:normal; color:var(--muted); opacity:.6; }
    .bh-id { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
    .bh-mark { flex:none; width:62px; height:62px; border-radius:17px; display:grid; place-items:center;
background:linear-gradient(150deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
border:1px solid rgba(255,255,255,.15); box-shadow:0 12px 34px rgba(0,0,0,.42); }
    @media (max-width:600px){ .bh-mark { width:52px; height:52px; border-radius:14px; } }
    .bh-mark img { max-width:58%; max-height:58%; object-fit:contain; filter:brightness(0) invert(1); }
    .bh-mark img.detail { filter:invert(1); }
    .bh-mark span { font-family:'Sora','Space Grotesk',sans-serif; font-size:21px; font-weight:800; color:var(--ink); }
    .bh h1 { margin:0; font-size:clamp(30px,4.6vw,44px); line-height:1.06; letter-spacing:-.03em; }
    .bh-lede { margin:20px 0 0; max-width:56ch; color:var(--body-c); font-size:16px; line-height:1.65; }

    .bh-cta { display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 0; }
    /* both scoped with the parent so they out-rank the site-wide .guide a colour */
    .bh-cta .bh-b { display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:999px;
font-size:14px; font-weight:800; text-decoration:none; transition:transform .18s, box-shadow .18s, border-color .18s, background .18s; }
    .bh-cta .bh-b.pri { background:var(--green); color:#04130a; box-shadow:0 8px 24px rgba(0,230,118,.32); }
    .bh-cta .bh-b.pri:hover { transform:translateY(-2px); box-shadow:0 14px 32px rgba(0,230,118,.46); color:#04130a; }
    .bh-cta .bh-b.sec { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); color:var(--ink); }
    .bh-cta .bh-b.sec:hover { transform:translateY(-2px); border-color:rgba(0,230,118,.6); color:var(--green); background:rgba(0,230,118,.07); }

    /* stat rail sits on the band's bottom edge, half-overlapping the page below */
    .bh-stats { position:relative; z-index:3; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
margin:40px 0 0; border-top:1px solid rgba(255,255,255,.11); }
    @media (max-width:720px){ .bh-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } }
    .bh-st { padding:20px 22px 24px; border-right:1px solid rgba(255,255,255,.08); }
    .bh-st:last-child { border-right:0; }
    @media (max-width:720px){ .bh-st { padding:16px 14px 18px; }
.bh-st:nth-child(2n) { border-right:0; } .bh-st:nth-child(-n+2) { border-bottom:1px solid rgba(255,255,255,.08); } }
    .bh-st b { display:block; font-family:'Sora','Space Grotesk',sans-serif; font-size:clamp(22px,3vw,29px);
font-weight:800; color:var(--ink); line-height:1; letter-spacing:-.02em; }
    .bh-st b i { font-style:normal; font-size:12.5px; color:var(--muted); margin-left:3px; font-weight:700; }
    .bh-st span { display:block; font-size:11.5px; letter-spacing:.07em; text-transform:uppercase;
color:var(--muted); margin-top:8px; }

    /* price ladder — every model on one shared scale, cheapest to dearest */
    .bp-ladder { margin:20px 0 0; display:flex; flex-direction:column; gap:2px; }
    .bp-rung { display:grid; grid-template-columns:minmax(120px,1.1fr) minmax(0,2.4fr) auto; gap:16px;
align-items:center; padding:13px 16px; border-radius:12px; text-decoration:none; transition:background .18s; }
    .bp-ladder .bp-rung:hover { background:rgba(0,230,118,.07); }
    .bp-ladder .bp-rung:hover .bp-rname { color:var(--green); }
    .bp-rname { color:var(--ink); font-size:14.5px; font-weight:700; line-height:1.3; transition:color .18s; }
    .bp-rname i { display:block; font-style:normal; font-size:11.5px; font-weight:600; color:var(--muted); margin-top:3px; }
    .bp-rtrack { position:relative; height:8px; border-radius:999px; background:rgba(255,255,255,.07); }
    /* bar grows from the cheapest model, so length reads directly as price */
    .bp-rfill { position:absolute; top:0; bottom:0; left:0; border-radius:999px;
background:linear-gradient(90deg,rgba(0,230,118,.32),var(--green)); box-shadow:0 0 14px rgba(0,230,118,.3); min-width:10px; }
    /* faint tail covering a model's price spread across its variants */
    .bp-rtail { position:absolute; top:0; bottom:0; border-radius:999px; background:rgba(0,230,118,.22); }
    .bp-rcap { position:absolute; top:50%; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%;
background:var(--green); box-shadow:0 0 12px rgba(0,230,118,.75); }
    .bp-rprice { font-family:'Sora','Space Grotesk',sans-serif; font-size:13.5px; font-weight:800;
color:var(--green); white-space:nowrap; text-align:right; }
    @media (max-width:720px){ .bp-rung { grid-template-columns:1fr auto; gap:6px 12px; }
.bp-rtrack { grid-column:1 / -1; } }
    .bp-scale { display:flex; justify-content:space-between; font-size:11px; letter-spacing:.07em;
text-transform:uppercase; color:var(--muted); padding:10px 16px 0; border-top:1px solid var(--hair); margin-top:6px; }

    /* about — editorial column plus a facts card */
    .bp-about-wrap { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:34px; align-items:start; margin:20px 0 0; }
    @media (max-width:860px){ .bp-about-wrap { grid-template-columns:1fr; gap:22px; } }
    .bp-about-text { display:grid; gap:18px; align-content:start; }
.bp-about { margin:0; color:var(--body-c); font-size:16px; line-height:1.78; }
    .bp-facts { padding:22px 24px; border-radius:18px; background:var(--s1); border:1px solid var(--hair); }
    .bp-fact { display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:11px 0;
border-bottom:1px solid var(--hair); font-size:13.5px; }
    .bp-fact:last-child { border-bottom:0; padding-bottom:0; }
    .bp-fact:first-child { padding-top:0; }
    .bp-fact dt { color:var(--muted); }
    .bp-fact dd { margin:0; color:var(--ink); font-weight:700; text-align:right; }

    /* dealer city chips */
    .bp-cities { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; margin:18px 0 0; }
    .bp-city { display:block; text-align:center; padding:14px 16px; border-radius:12px; background:var(--s1);
border:1px solid var(--hair); color:var(--ink); font-size:14px; font-weight:700; text-decoration:none; transition:all .18s; }
    .bp-cities .bp-city:hover { border-color:rgba(0,230,118,.55); background:rgba(0,230,118,.07); color:var(--green); }

    /* CTA band */
    .bp-cta { position:relative; overflow:hidden; display:grid; grid-template-columns:auto 1fr auto; gap:28px;
align-items:center; padding:34px 36px; border-radius:22px; margin:52px 0 0;
background:linear-gradient(135deg,#062515,#04150c); border:1px solid rgba(0,230,118,.24); }
    @media (max-width:820px){ .bp-cta { grid-template-columns:1fr; gap:18px; padding:26px 22px; text-align:left; } }
    .bp-cta .bolt { flex:none; width:96px; height:96px; color:var(--green); opacity:.9;
filter:drop-shadow(0 0 22px rgba(0,230,118,.5)); }
    @media (max-width:820px){ .bp-cta .bolt { width:62px; height:62px; } }
    .bp-cta h2 { margin:0 0 8px; font-size:clamp(23px,3.2vw,31px); line-height:1.12; letter-spacing:-.02em; }
    .bp-cta p { margin:0; color:var(--body-c); font-size:14.5px; line-height:1.6; max-width:52ch; }

    /* ── browse pages (body type / budget / powertrain) ────────────────────
 Same hero shell as the brand page, but the artwork is the body-type
 line drawing rather than a logo, and the list is filterable in place. */
    .bw-ghost { position:absolute; right:-2%; top:50%; transform:translateY(-50%); width:min(52%,620px);
opacity:.07; pointer-events:none; z-index:1; color:#fff; }
    .bw-ghost svg, .bw-ghost img { width:100%; height:auto; }
    .bw-ghost svg { stroke-width:.5; }
    .bw-ghost img { filter:brightness(0) invert(1); }
    @media (max-width:900px){ .bw-ghost { display:none; } }

    /* sibling switcher — jump straight to the neighbouring browse page */
    .bw-sibs { display:flex; gap:8px; flex-wrap:wrap; margin:26px 0 0; }
    .bw-sibs .bw-sib { display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px;
background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); color:var(--body-c);
font-size:13px; font-weight:700; text-decoration:none; transition:all .18s; }
    .bw-sibs .bw-sib:hover { border-color:rgba(0,230,118,.55); color:var(--green); background:rgba(0,230,118,.07); }
    .bw-sibs .bw-sib.on { background:var(--green); border-color:var(--green); color:#04130a; }
    .bw-sib svg { width:22px; height:12px; flex:none; }
    .bw-sib i { font-style:normal; opacity:.6; font-size:11.5px; }

    /* filter + sort toolbar, sticky under the subnav */
    /* clears the sticky subnav (69px tall) with an 8px breath */
    .bw-bar { position:sticky; top:77px; z-index:80; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
justify-content:space-between; margin:34px 0 0; padding:13px 18px; border-radius:14px;
background:rgba(9,20,14,.9); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
border:1px solid var(--hair); }
    .bw-chips { display:flex; gap:7px; flex-wrap:wrap; }
    .bw-chip { padding:7px 14px; border-radius:999px; background:transparent; border:1.5px solid var(--line2);
color:var(--body-c); font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer; transition:all .16s; }
    .bw-chips .bw-chip:hover { border-color:rgba(0,230,118,.5); color:var(--ink); }
    .bw-chip.on { background:var(--green); border-color:var(--green); color:#04130a; }
    .bw-only { font-size:12.5px; font-weight:700; color:var(--muted); }
    .bw-sort { display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--muted); }
    .bw-sort select { padding:8px 13px; border-radius:10px; background:var(--s1); border:1px solid var(--line2);
color:var(--ink); font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer; }
    .bw-count { font-size:12.5px; color:var(--muted); margin:14px 0 0; }
    .bw-count b { color:var(--green); font-weight:800; }
    .bw-empty { padding:44px 20px; text-align:center; color:var(--muted); font-size:14.5px;
border:1px dashed var(--line2); border-radius:16px; margin:18px 0 0; }
    /* .car-card sets its own display, which would otherwise beat [hidden] */
    .car-grid .car-card[hidden] { display:none; }

    /* ── custom select ──────────────────────────────────────────────────────
 A native <select> popup is drawn by the OS and cannot be themed, so the
 real select stays in the DOM (value, events, no-JS fallback) and this
 listbox is layered over it. */
    .csel { position:relative; }
    .csel > select.csel-native { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
    .csel-btn { display:flex; align-items:center; gap:10px; width:100%; padding:11px 13px; border-radius:11px;
background:rgba(255,255,255,.05); border:1px solid var(--line2); color:var(--ink);
font-family:inherit; font-size:14px; font-weight:600; text-align:left; cursor:pointer;
transition:border-color .16s, background .16s; }
    .csel-btn:hover { border-color:rgba(0,230,118,.45); }
    .csel-btn:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
    .csel.open .csel-btn { border-color:var(--green); background:rgba(0,230,118,.07); }
    .csel-lbl { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .csel-btn.placeholder .csel-lbl { color:var(--muted); font-weight:500; }
    .csel-cv { width:15px; height:15px; flex:none; color:var(--muted); transition:transform .2s, color .16s; }
    .csel.open .csel-cv { transform:rotate(180deg); color:var(--green); }

    .csel-panel { position:absolute; z-index:400; top:calc(100% + 7px); left:0; right:0;
background:#0a1a11; border:1px solid rgba(0,230,118,.28); border-radius:14px; overflow:hidden;
box-shadow:0 22px 48px rgba(0,0,0,.62); opacity:0; transform:translateY(-6px) scale(.985);
transform-origin:top center; pointer-events:none; transition:opacity .16s, transform .16s; }
    .csel.open .csel-panel { opacity:1; transform:none; pointer-events:auto; }
    .csel.up .csel-panel { top:auto; bottom:calc(100% + 7px); transform-origin:bottom center; }

    .csel-search { display:flex; align-items:center; gap:9px; padding:11px 13px; border-bottom:1px solid var(--hair); }
    .csel-search svg { width:15px; height:15px; color:var(--muted); flex:none; }
    .csel-search input { flex:1; min-width:0; background:none; border:0; outline:none; color:var(--ink);
font-family:inherit; font-size:13.5px; }
    .csel-search input::placeholder { color:var(--muted); }

    .csel-list { max-height:290px; overflow-y:auto; padding:6px; scrollbar-width:thin;
scrollbar-color:rgba(0,230,118,.4) transparent; }
    .csel-list::-webkit-scrollbar { width:9px; }
    .csel-list::-webkit-scrollbar-track { background:transparent; }
    .csel-list::-webkit-scrollbar-thumb { background:rgba(0,230,118,.3); border-radius:99px;
border:2.5px solid #0a1a11; }
    .csel-list::-webkit-scrollbar-thumb:hover { background:rgba(0,230,118,.55); }

    .csel-opt { display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:9px;
font-size:13.5px; color:var(--body-c); cursor:pointer; transition:background .12s, color .12s; }
    .csel-opt:hover, .csel-opt.cursor { background:rgba(0,230,118,.1); color:var(--ink); }
    .csel-opt[aria-selected="true"] { background:rgba(0,230,118,.15); color:var(--green); font-weight:700; }
    .csel-opt .tick { width:14px; height:14px; flex:none; color:var(--green); opacity:0; }
    .csel-opt[aria-selected="true"] .tick { opacity:1; }
    .csel-opt .txt { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .csel-none { padding:20px 12px; text-align:center; font-size:13px; color:var(--muted); }
    /* per-context sizing — the wrapper replaces the select in the layout */
    .bw-sort .csel { min-width:196px; }
    .bw-sort .csel-btn { padding:8px 13px; font-size:12.5px; font-weight:700; background:var(--s1); }
    .cp-f .csel, .cm-slot .csel { width:100%; }

    /* ── compare ────────────────────────────────────────────────────────────
 Three slots, a sticky car header, and a table that can hide every row
 where the cars agree — the differences are the reason you're here. */
    .cm-slots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:26px 0 0; }
    @media (max-width:820px){ .cm-slots { grid-template-columns:1fr; } }
    .cm-slot { position:relative; border-radius:16px; background:var(--s1); border:1px solid var(--hair);
padding:14px 16px; min-height:78px; display:flex; flex-direction:column; justify-content:center; transition:border-color .18s; }
    .cm-slot.filled { border-color:rgba(0,230,118,.32); background:rgba(0,230,118,.05); }
    .cm-slot select { width:100%; padding:11px 13px; border-radius:11px; background:rgba(255,255,255,.05);
border:1px solid var(--line2); color:var(--ink); font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; }
    .cm-slotn { font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
color:var(--muted); margin:0 0 9px; }
    .cm-slot.filled .cm-slotn { color:var(--green); }

    /* sticky header carrying the three cars while you scroll the table */
    .cm-head { position:sticky; top:77px; z-index:70; display:grid; gap:0;
background:rgba(9,20,14,.94); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
border:1px solid var(--hair); border-radius:16px 16px 0 0; overflow:hidden; }
    .cm-hcell { padding:16px 18px; border-left:1px solid var(--hair); min-width:0; }
    .cm-hcell:first-child { border-left:0; }
    /* Image restored to its original large size — it fills the whole cell with
 no reserved strip for text. The label floats bottom-left over it on a flat
 40% panel, sized to its own content rather than spanning the card. */
    .cm-hcard { position:relative; height:168px; border-radius:13px; overflow:hidden;
background:radial-gradient(70% 76% at 50% 40%, rgba(0,230,118,.12), transparent 72%), rgba(255,255,255,.03);
border:1px solid var(--hair); }
    @media (max-width:820px){ .cm-hcard { height:126px; } }
    .cm-hcard img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
padding:6px; display:block; filter:drop-shadow(0 12px 18px rgba(0,0,0,.5)); }
    .cm-hcard .ph { position:absolute; inset:0; display:grid; place-items:center;
font-family:'Sora','Space Grotesk',sans-serif; font-size:14px; font-weight:800; color:rgba(255,255,255,.2); }
    .cm-hover { position:absolute; left:0; bottom:0; display:inline-block; max-width:100%;
padding:8px 13px 9px; border-radius:0 12px 0 12px;
background:rgba(3,11,7,.4); }
    .cm-hmk { display:block; font-size:9.5px; font-weight:800; letter-spacing:.14em;
text-transform:uppercase; color:rgba(255,255,255,.62); }
    .cm-hnm { display:block; font-family:'Sora','Space Grotesk',sans-serif; font-size:14.5px; font-weight:800;
color:#fff; line-height:1.2; margin:3px 0 0; letter-spacing:-.015em; }
    .cm-hpr { display:block; font-size:12.5px; font-weight:800; color:var(--green); margin:4px 0 0; }
    .cm-spacer { padding:16px 18px; }
    @media (max-width:820px){ .cm-hnm { font-size:12.5px; }
.cm-hcell, .cm-spacer { padding:12px 10px; } .cm-hpr { font-size:11.5px; } }

    /* Phone layout. Three cars across 390px leaves ~85px a column, which no
 amount of type tuning survives, so the table scrolls sideways instead —
 the standard spec-table pattern. The label column pins to the left so you
 always know which row you are reading while swiping between cars. */
    @media (max-width:700px){
#cmWrap { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
#cmWrap .cm-head, #cmWrap .cm-tbl { width:max-content; min-width:100%; }
/* Making the wrapper scrollable also makes it the containing block for
   position:sticky, so the header can no longer stick to the viewport —
   and its top:77px got applied as a 77px downward shift that buried the
   Overview label and the whole Price row. Horizontal scrolling needs the
   header and rows in one scroll container, so viewport-sticky is simply
   not available here. The pinned label column is the orientation aid that
   matters when swiping between cars. */
#cmWrap .cm-head { position:static; top:auto; }
#cmWrap .cm-head, #cmWrap .cm-row { --cm-col:150px; --cm-lbl:118px; }
.cm-lbl, .cm-spacer, .cm-grp { position:sticky; left:0; z-index:3;
  background:#0a1710; border-right:1px solid var(--hair); }
.cm-grp { width:max-content; min-width:100%; }
/* The overlay is a desktop device. At 150px the price wrapped to seven
   lines across the car, so on a phone the label sits under the image and
   the photo stays visible. */
.cm-hcard { height:auto; background:none; border:0; border-radius:0; overflow:visible; }
.cm-hcard img { position:static; height:84px; width:100%; padding:0; }
.cm-hcard .ph { position:static; height:84px; }
.cm-hover { position:static; display:block; max-width:none;
  padding:7px 0 0; background:none; border-radius:0; }
.cm-hnm { font-size:13px; }
.cm-hpr { font-size:12px; }
    }

    /* the table proper */
    .cm-tbl { border:1px solid var(--hair); border-top:0; border-radius:0 0 16px 16px; overflow:hidden; }
    .cm-grp { padding:14px 18px 10px; font-size:10.5px; font-weight:800; letter-spacing:.14em;
text-transform:uppercase; color:var(--green); background:rgba(255,255,255,.025);
border-top:1px solid var(--hair); }
    .cm-row { display:grid; border-top:1px solid rgba(255,255,255,.055); }
    .cm-row:hover { background:rgba(255,255,255,.02); }
    .cm-row[hidden] { display:none; }
    .cm-lbl { padding:13px 18px; font-size:13px; color:var(--muted); }
    .cm-lbl i { font-style:normal; opacity:.6; }
    .cm-val { padding:13px 18px; font-size:14px; color:var(--ink); font-weight:600;
border-left:1px solid rgba(255,255,255,.055); min-width:0; word-break:break-word; }
    /* the standout figure in a row */
    .cm-val.win { color:var(--green); font-weight:800; }
    .cm-val.win::after { content:'BEST'; display:inline-block; margin-left:8px; padding:2px 7px; border-radius:999px;
background:rgba(0,230,118,.15); border:1px solid rgba(0,230,118,.4); font-size:9px; font-weight:800;
letter-spacing:.1em; color:var(--green); vertical-align:middle; }
    .cm-val.same { color:var(--body-c); font-weight:600; }
    .cm-val em { font-style:normal; color:var(--muted); }

    @media (max-width:620px){
.cm-lbl, .cm-val { padding:11px 9px; font-size:12.5px; }
.cm-lbl { font-size:11.5px; }
.cm-grp { padding:12px 10px 8px; }
/* the BEST pill costs more width than it earns on a phone */
.cm-val.win::after { content:'★'; margin-left:5px; padding:0; border:0; background:none; font-size:11px; }
    }

    /* toolbar above the table */
    .cm-tools { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:30px 0 12px; }
    .cm-toggle { display:inline-flex; align-items:center; gap:10px; font-size:13.5px; color:var(--body-c);
cursor:pointer; user-select:none; }
    .cm-toggle input { position:absolute; opacity:0; pointer-events:none; }
    .cm-sw { width:42px; height:24px; border-radius:999px; background:rgba(255,255,255,.12);
border:1px solid var(--line2); position:relative; transition:background .18s, border-color .18s; flex:none; }
    .cm-sw::after { content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
background:var(--muted); transition:transform .18s, background .18s; }
    .cm-toggle input:checked + .cm-sw { background:rgba(0,230,118,.3); border-color:var(--green); }
    .cm-toggle input:checked + .cm-sw::after { transform:translateX(18px); background:var(--green); }
    .cm-toggle input:focus-visible + .cm-sw { outline:2px solid var(--green); outline-offset:2px; }
    .cm-diffn { font-size:12.5px; color:var(--muted); }
    .cm-diffn b { color:var(--green); font-weight:800; }

    .cm-empty { padding:56px 24px; text-align:center; border:1px dashed var(--line2); border-radius:18px;
color:var(--muted); font-size:15px; margin:26px 0 0; }
    .cm-empty b { display:block; color:var(--ink); font-family:'Sora','Space Grotesk',sans-serif;
font-size:19px; font-weight:800; margin:0 0 8px; }

    /* head-to-head shortcuts */
    .cm-pop { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:10px; margin:18px 0 0; }
    .cm-pop .cm-vs { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 17px;
border-radius:13px; background:var(--s1); border:1px solid var(--hair); color:var(--ink);
font-size:13.5px; font-weight:700; text-decoration:none; transition:all .18s; }
    .cm-pop .cm-vs:hover { border-color:rgba(0,230,118,.55); background:rgba(0,230,118,.06); transform:translateY(-2px); }
    .cm-vs span { min-width:0; }
    .cm-vs i { font-style:normal; color:var(--green); font-weight:800; font-size:11px; letter-spacing:.1em; flex:none; }

    /* ── budget pages ───────────────────────────────────────────────────────
 A budget page answers one question — what can I afford — so the price
 cap is a live control, not a fixed number baked into the URL. */

    /* the dial */
    .bg-dial { position:relative; overflow:hidden; margin:34px 0 0; padding:28px 30px 26px; border-radius:22px;
background:linear-gradient(150deg,rgba(0,230,118,.09),rgba(255,255,255,.03));
border:1px solid rgba(0,230,118,.22); }
    @media (max-width:620px){ .bg-dial { padding:22px 18px 20px; } }
    .bg-dhead { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin:0 0 20px; }
    .bg-dlbl { font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--green); }
    .bg-dval { display:block; font-family:'Sora','Space Grotesk',sans-serif; font-size:clamp(30px,5vw,46px);
font-weight:800; color:var(--ink); line-height:1; letter-spacing:-.025em; margin-top:9px; }
    .bg-dcount { text-align:right; font-size:13.5px; color:var(--body-c); }
    .bg-dcount b { display:block; font-family:'Sora','Space Grotesk',sans-serif; font-size:34px;
font-weight:800; color:var(--green); line-height:1; }
    @media (max-width:620px){ .bg-dhead { flex-direction:column; align-items:flex-start; gap:14px; }
.bg-dcount { text-align:left; } }

    /* range input — restyled in full, both engines */
    .bg-slider { -webkit-appearance:none; appearance:none; width:100%; height:10px; border-radius:999px;
background:rgba(255,255,255,.09); outline:none; cursor:pointer; margin:0; }
    .bg-slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:26px; height:26px;
border-radius:50%; background:var(--green); border:4px solid #04130a;
box-shadow:0 0 0 1px var(--green),0 4px 18px rgba(0,230,118,.6); cursor:grab; }
    .bg-slider::-webkit-slider-thumb:active { cursor:grabbing; }
    .bg-slider::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:var(--green);
border:4px solid #04130a; box-shadow:0 0 0 1px var(--green),0 4px 18px rgba(0,230,118,.6); cursor:grab; }
    .bg-slider::-moz-range-track { height:10px; border-radius:999px; background:rgba(255,255,255,.09); }
    .bg-ends { display:flex; justify-content:space-between; font-size:11.5px; letter-spacing:.06em;
text-transform:uppercase; color:var(--muted); margin:12px 2px 0; }

    /* "spend a little more and N more cars open up" */
    .bg-next { display:flex; align-items:center; gap:11px; margin:20px 0 0; padding:13px 17px; border-radius:12px;
background:rgba(0,230,118,.08); border:1px solid rgba(0,230,118,.2); font-size:13.5px; color:var(--body-c); }
    .bg-next svg { width:17px; height:17px; color:var(--green); flex:none; }
    .bg-next b { color:var(--green); font-weight:800; }
    .bg-next[hidden] { display:none; }
    .bg-dial .bg-jump { margin-left:auto; color:var(--green); font-weight:700; text-decoration:none; white-space:nowrap; }
    .bg-dial .bg-jump:hover { text-decoration:underline; }

    /* ── body-type cards ── */
    .bt-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:18px 0 0; }
    .bt { display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; padding:18px 14px 16px;
border-radius:16px; background:var(--s1); border:1px solid var(--hair); transition:all .2s; }
    .bt-grid .bt:hover { border-color:rgba(0,230,118,.55); background:rgba(0,230,118,.06); transform:translateY(-3px); }
    .bt b { font-size:14.5px; font-weight:700; color:var(--ink); }
    .bt span { font-size:11.5px; color:var(--muted); }

    /* ── brand cards ── */
    .br-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:10px; margin:18px 0 0; }
    .br { display:flex; align-items:center; gap:12px; text-decoration:none; padding:13px 15px; border-radius:14px;
background:var(--s1); border:1px solid var(--hair); transition:all .2s; }
    .br-grid .br:hover { border-color:rgba(0,230,118,.55); background:rgba(0,230,118,.06); }
    .br-logo { flex:none; width:34px; height:34px; display:grid; place-items:center; }
    /* Flat silhouettes render pure white, whatever their source colours. */
    .br-logo img { max-width:100%; max-height:100%; object-fit:contain; filter:brightness(0) invert(1); opacity:.92; }
    /* Marks whose detail is carried in colour would flatten to a solid blob, so
 invert only — that lifts them off the dark background and keeps structure. */
    .br-logo.detail img { filter:invert(1); opacity:1; }
    .br-mono { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:var(--s3);
font-family:'Sora','Space Grotesk',sans-serif; font-size:13px; font-weight:800; color:var(--ink); letter-spacing:-.02em; }
    .br-txt b { display:block; font-size:14px; font-weight:700; color:var(--ink); line-height:1.2; }
    .br-txt span { font-size:11.5px; color:var(--muted); }
    @media (max-width:520px){ .br-grid { grid-template-columns:1fr 1fr; } .bt-grid { grid-template-columns:1fr 1fr; } }

    /* ── brand marquee ──────────────────────────────────────────────────────
 The track holds the brand list TWICE, so translating it exactly -50%
 lands on an identical frame and the loop is seamless. Motion pauses on
 hover and on keyboard focus, there is an explicit pause button (WCAG
 2.2.2), and reduced-motion users get a plain scrollable row instead. */
    .brm { position:relative; margin:18px 0 0; }
    .brm-vp { overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
    .brm-track { display:flex; gap:10px; width:max-content;
animation:brmScroll var(--brm-dur,64s) linear infinite; will-change:transform; }
    @keyframes brmScroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
    .brm:hover .brm-track, .brm:focus-within .brm-track,
    .brm.paused .brm-track { animation-play-state:paused; }
    .brm .br { flex:0 0 auto; width:186px; }
    .brm .br:hover { border-color:rgba(0,230,118,.55); background:rgba(0,230,118,.06); }

    .brm-ctl { display:flex; align-items:center; gap:9px; margin:14px 0 0; }
    .brm-pause { display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px;
background:rgba(255,255,255,.05); border:1px solid var(--line2); color:var(--muted);
font-family:inherit; font-size:12px; font-weight:700; cursor:pointer; transition:all .18s; }
    .brm-pause:hover { border-color:rgba(0,230,118,.5); color:var(--green); }
    .brm-pause svg { width:12px; height:12px; }
    .brm-hint { font-size:12px; color:var(--muted); opacity:.75; }

    @media (prefers-reduced-motion: reduce) {
.brm-track { animation:none; }
.brm-vp { overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
.brm-ctl { display:none; }
    }

    /* ── budget cards ── */
    .bud-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:14px; margin:18px 0 8px; }
    .bud { display:flex; flex-direction:column; text-decoration:none; border-radius:18px; overflow:hidden;
background:var(--s1); border:1px solid var(--hair); transition:border-color .2s, transform .2s, background .2s; }
    .bud-grid .bud:hover { border-color:rgba(0,230,118,.55); background:rgba(0,230,118,.06); transform:translateY(-3px); }
    .bud-shot { aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; overflow:hidden;
background:linear-gradient(145deg,rgba(0,230,118,.12),rgba(0,229,255,.04)); }
    .bud-shot img { width:100%; height:100%; object-fit:contain; padding:10px 8px; }
    .bud-shot .ph { text-align:center; padding:8px; }
    .bud-shot .ph b { display:block; font-family:'Sora','Space Grotesk',sans-serif; font-size:19px; font-weight:800; color:rgba(255,255,255,.22); line-height:1; }
    .bud-shot .ph span { font-size:9.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
    .bud-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px 15px; }
    .bud-foot b { font-family:'Sora','Space Grotesk',sans-serif; font-size:15.5px; font-weight:800; color:var(--ink); line-height:1.25; letter-spacing:-.01em; }
    .bud-foot i { flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
background:var(--s2); color:var(--body-c); font-style:normal; font-size:13px; transition:all .2s; }
    .bud-grid .bud:hover .bud-foot i { background:var(--green); color:#04130a; }
    .bud-n { display:block; font-size:11.5px; font-weight:600; color:var(--muted); margin-top:3px; letter-spacing:0; }
    @media (max-width:520px){ .bud-grid { grid-template-columns:1fr 1fr; gap:11px; } .bud-foot { padding:11px 12px 12px; } .bud-foot b { font-size:14px; } }

    /* ── hero: full-bleed band + floating search card ── */
    /* override the global section padding:120px 0 rule so the band sits flush
 under the fixed nav; nav clearance lives in the band's own padding */
    .evh { position:relative; padding:0; margin-bottom:52px; }
    .evh-band { position:relative; width:100vw; margin-left:calc(50% - 50vw); padding:78px 0 132px; overflow:hidden;
background:
  radial-gradient(120% 140% at 50% -20%, rgba(0,230,118,.28) 0%, rgba(0,229,255,.10) 38%, transparent 68%),
  linear-gradient(168deg, #072a19 0%, #05190e 55%, var(--bg) 100%); }
    /* faint grid, fades out downward — depth without noise */
    .evh-band::before { content:''; position:absolute; inset:0;
background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
background-size:64px 64px;
-webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 78%);
mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 78%); }
    .evh-band::after { content:''; position:absolute; left:50%; top:-42%; transform:translateX(-50%);
width:min(920px,92vw); aspect-ratio:1; border-radius:50%; pointer-events:none;
background:radial-gradient(circle, rgba(0,230,118,.22), transparent 62%); filter:blur(20px); }
    .evh-inner { position:relative; z-index:2; text-align:center; }
    .evh-eyebrow { display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:800; letter-spacing:.13em;
text-transform:uppercase; color:var(--green); background:rgba(0,230,118,.1); border:1px solid rgba(0,230,118,.28);
border-radius:999px; padding:7px 16px; margin-bottom:22px; }
    .evh-eyebrow i { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); animation:blink 2s infinite; }
    .evh h1 { font-size:clamp(34px,6.4vw,68px); line-height:1.04; letter-spacing:-.025em; margin:0 auto 18px; max-width:16ch; text-wrap:balance; }
    .evh h1 em { white-space:nowrap; }
    .evh h1 em { font-style:normal; background:linear-gradient(100deg,var(--green),var(--teal));
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
    .evh-sub { color:var(--body-c); font-size:clamp(15px,1.8vw,18px); max-width:60ch; margin:0 auto; line-height:1.6; }

    /* search card — deliberately overlaps the band edge */
    .evh-card { position:relative; z-index:3; margin-top:-86px; background:rgba(9,28,18,.86);
backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
border:1px solid rgba(0,230,118,.22); border-radius:22px; padding:22px;
box-shadow:0 28px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset; }
    .evh-form { display:flex; align-items:center; gap:12px; }
    .evh-form input { flex:1; min-width:0; padding:17px 20px; border-radius:15px; border:1px solid var(--line2);
background:rgba(255,255,255,.045); color:var(--ink); font-size:16.5px; font-family:inherit; }
    .evh-form input::placeholder { color:var(--muted); }
    .evh-form input:focus { outline:none; border-color:rgba(0,230,118,.65); box-shadow:0 0 0 4px rgba(0,230,118,.1); }
    .evh-go { flex:none; width:52px; height:52px; border:none; cursor:pointer; border-radius:50%;
background:linear-gradient(135deg,var(--green),var(--teal)); color:#04130a; font-size:21px; font-weight:800;
display:grid; place-items:center; transition:transform .18s, box-shadow .18s; box-shadow:0 8px 26px rgba(0,230,118,.4); }
    .evh-go:hover { transform:scale(1.06); box-shadow:0 12px 34px rgba(0,230,118,.55); }
    .evh-hints { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
    .evh-hint { font-size:13px; font-weight:600; padding:7px 14px; border-radius:999px; text-decoration:none;
background:rgba(255,255,255,.05); border:1px solid var(--line2); color:var(--body-c); transition:all .18s; }
    .evh-hints .evh-hint:hover { border-color:rgba(0,230,118,.55); color:var(--green); background:rgba(0,230,118,.08); }

    /* powertrain pills */
    .evh-types { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:26px 0 0; }
    .evh-type { display:inline-flex; align-items:center; gap:9px; text-decoration:none; padding:11px 20px; border-radius:999px;
background:var(--s1); border:1px solid var(--line2); color:var(--ink); font-size:14.5px; font-weight:700; transition:all .18s; }
    .evh-types .evh-type:hover { border-color:var(--green); color:var(--green); background:rgba(0,230,118,.08); transform:translateY(-1px); }
    .evh-type svg { width:17px; height:17px; flex:none; }
    .evh-type b { color:var(--muted); font-weight:700; font-size:12.5px; }
    .evh-types .evh-type:hover b { color:var(--green); }

    /* live proof strip — the thing a pure car catalogue cannot show */
    .evh-proof { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px 30px; margin-top:30px; }
    .evh-proof div { display:flex; align-items:baseline; gap:8px; }
    .evh-proof b { font-family:'Sora','Space Grotesk',sans-serif; font-size:23px; font-weight:800; color:var(--ink); line-height:1; }
    .evh-proof span { font-size:13px; color:var(--muted); }
    .evh-proof .dot { width:4px; height:4px; border-radius:50%; background:var(--line2); }
    @media (max-width:640px){
.evh-band { padding:52px 0 110px; }
.evh-eyebrow { font-size:10.5px; letter-spacing:.09em; padding:6px 12px; margin-bottom:16px; white-space:nowrap; }
.evh h1 { max-width:13ch; }
.evh-sub { font-size:15px; }
.evh-card { margin-top:-76px; padding:14px; border-radius:18px; }
.evh-form { gap:9px; }
.evh-form input { padding:14px 15px; font-size:15.5px; text-overflow:ellipsis; }
.evh-go { width:46px; height:46px; font-size:18px; }
.evh-hints { gap:7px; margin-top:11px; }
.evh-hint { font-size:12.5px; padding:6px 12px; }
.evh-types { gap:8px; margin-top:20px; }
.evh-type { padding:9px 15px; font-size:13.5px; gap:7px; }
.evh-proof { gap:8px 16px; margin-top:22px; }
.evh-proof b { font-size:20px; }
.evh-proof span { font-size:12px; }
.evh-proof .dot { display:none; }
    }
    .ev-secrow { display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; }
    .ev-secrow h2 { margin:0; }
    .ev-stats { display:flex; gap:28px; flex-wrap:wrap; margin:16px 0; }
    .ev-stat b { display:block; font-family:'Sora','Space Grotesk',sans-serif; font-size:28px; color:var(--green); line-height:1; }
    .ev-stat span { color:var(--muted); font-size:13px; }
    .ev-tools { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin:24px 0; }
    .ev-tool { display:block; text-decoration:none; background:var(--s1); border:1px solid var(--hair); border-radius:16px; padding:22px; transition:border-color .2s; }
    .ev-tool:hover { border-color:rgba(0,230,118,.5); }
    .ev-tool h3 { margin:0 0 6px; color:var(--ink); font-size:19px; }
    .ev-tool p { margin:0; color:var(--muted); font-size:14px; }
    .footer-col .footer-h { font-size:15px; font-weight:700; margin:0 0 14px; letter-spacing:-.01em; }
    .bw-gh { margin:22px 0 6px; font-size:17px; letter-spacing:-.01em; }
    .bw-gp { margin:0; color:var(--body-c); font-size:14.5px; line-height:1.7; max-width:74ch; }
    .cp-verdict { font-size:15.5px; line-height:1.75; color:var(--body-c); max-width:74ch;
border-left:3px solid var(--green); padding:4px 0 4px 18px; }

/* ── Browse-page comparison table (brand / body-type / budget) ── */
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:6px 0 8px;
  border:1px solid var(--line2);border-radius:16px}
.cmp{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
.cmp th,.cmp td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line2);white-space:nowrap}
.cmp thead th{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  font-weight:700;background:rgba(255,255,255,.02)}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp tbody tr:hover{background:rgba(0,230,118,.05)}
.cmp .cmp-name a{color:var(--ink);font-weight:700;text-decoration:none}
.cmp .cmp-name a:hover{color:var(--green)}
.cmp .cmp-conn{color:var(--body-c);font-size:13.5px}
.cmp .cmp-price{color:var(--green);font-weight:700}
@media(max-width:560px){.cmp{font-size:13.5px}.cmp th,.cmp td{padding:11px 12px}}