/* EVChargingCalc. Layout: title, then the calculator (inputs left, live results right), then page content. Stacks on phones. */
@font-face{font-family:"Figtree";src:url(fonts/figtree-latin.woff2) format("woff2");font-weight:300 900;font-display:swap}
:root{
  --navy:#0A2A55; --volt:#0066FF;
  --bg:#ffffff; --soft:#f3f7fc; --surface:#ffffff; --ink:#0f2440; --muted:#556478; --line:#dbe3ee;
  --accent:#0066FF; --accent-ink:#ffffff; --accent-soft:#e5efff;
  --good:#127a45; --good-soft:#e5f5ec; --warn:#9a5b00;
  --brand-ink:#0A2A55; --chart-ev:#0066FF; --chart-gas:#c2410c;
  --f-ui:"Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-num:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0b1420; --soft:#101b2b; --surface:#132033; --ink:#e7eef7; --muted:#9fb0c4; --line:#243449;
  --accent:#4d94ff; --accent-ink:#04162c; --accent-soft:#12304f; --good:#4cc38a; --good-soft:#12301f; --warn:#f0b35a;
  --brand-ink:#e7eef7; --chart-ev:#4d94ff; --chart-gas:#fb923c; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0b1420; --soft:#101b2b; --surface:#132033; --ink:#e7eef7; --muted:#9fb0c4; --line:#243449;
  --accent:#4d94ff; --accent-ink:#04162c; --accent-soft:#12304f; --good:#4cc38a; --good-soft:#12301f; --warn:#f0b35a;
  --brand-ink:#e7eef7; --chart-ev:#4d94ff; --chart-gas:#fb923c; color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:16px/1.55 var(--f-ui);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a{color:var(--accent)}
.wrap{max-width:1180px;margin:0 auto;padding-inline:16px}

/* header: logo row + blue menu bar (desktop) */
header.top{background:var(--surface);border-bottom:1px solid var(--line)}
header.top .bar{display:flex;align-items:center;gap:12px;min-height:72px;padding-block:10px}
.brand{display:flex;align-items:center;text-decoration:none;color:var(--brand-ink);font-weight:800;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.025em;white-space:nowrap}
.brand .bolt{width:.62em;height:1.08em;margin:0 .02em 0 -.12em;flex:none}
.region{margin-left:auto;display:flex;border:1px solid var(--line);border-radius:999px;padding:3px;font-size:13px;font-weight:700}
.region a{padding:6px 12px;border-radius:999px;text-decoration:none;color:var(--muted)}
.region a[aria-current]{background:var(--navy);color:#fff}
nav.main{background:#0066FF}
nav.main>.wrap{display:flex;align-items:stretch;gap:2px;flex-wrap:wrap}
nav.main .dd{position:relative}
nav.main .dd>a,nav.main .dd>button{display:flex;align-items:center;gap:6px;height:46px;padding:0 14px;color:#fff;text-decoration:none;font:700 15px var(--f-ui);background:none;border:0;cursor:pointer}
nav.main .dd>button::after{content:"";width:7px;height:7px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-2px) rotate(45deg);opacity:.85}
nav.main .dd>a:hover,nav.main .dd>button:hover,nav.main .dd:focus-within>button,nav.main .dd>a[aria-current]{background:rgba(255,255,255,.14)}
.menu{position:absolute;left:0;top:100%;z-index:30;min-width:260px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:0 0 12px 12px;box-shadow:0 14px 30px rgba(10,42,85,.18);padding:12px;display:none}
.menu.wide{min-width:640px;display:none}
.dd:hover>.menu,.dd:focus-within>.menu,.dd.open>.menu{display:block}
.menu .cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 16px}
.menu a{display:block;padding:7px 8px;border-radius:6px;color:var(--ink);text-decoration:none;font-weight:600;font-size:14px}
.menu a small{display:block;color:var(--muted);font-weight:500;font-size:12.5px}
.menu a:hover{background:var(--soft)}
.menu .more{margin-top:6px;border-top:1px solid var(--line);padding-top:6px}
.menu .more a{color:var(--accent)}
@media (max-width:860px){nav.main{display:none}.region{display:none}}
.btn{appearance:none;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 14px/1 var(--f-ui);padding:11px 14px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;min-height:42px}
.btn:hover{border-color:var(--muted)}
.btn.small{min-height:34px;padding:7px 10px;font-size:13px}
.btn:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mnav-btn{display:none;align-items:center;gap:6px;cursor:pointer;font:700 14px var(--f-ui);color:var(--ink);background:var(--surface);padding:9px 12px;border:1px solid var(--line);border-radius:8px;min-height:42px;margin-left:auto}
@media (max-width:860px){.mnav-btn{display:inline-flex}}
.drawer-overlay{position:fixed;inset:0;background:rgba(6,16,30,.5);opacity:0;transition:opacity .25s ease;z-index:40}
.drawer-overlay.open{opacity:1}
.drawer{position:fixed;top:0;right:0;bottom:0;width:75%;max-width:360px;background:var(--surface);z-index:41;transform:translateX(100%);transition:transform .25s ease, visibility 0s linear .25s;visibility:hidden;display:flex;flex-direction:column;box-shadow:-10px 0 30px rgba(0,0,0,.2)}
.drawer.open{transform:translateX(0);visibility:visible;transition:transform .25s ease}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);font-weight:800}
.drawer-head button{background:none;border:1px solid var(--line);border-radius:8px;width:40px;height:40px;display:grid;place-items:center;color:var(--ink);cursor:pointer}
.drawer-body{overflow:auto;padding:4px 16px 24px}
.drawer-body p{margin:14px 0 4px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.drawer-body a{display:block;padding:10px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:600}
html.drawer-lock,html.drawer-lock body{overflow:hidden}
@media (prefers-reduced-motion:reduce){.drawer,.drawer-overlay{transition:none}}

/* hero */
.crumbs{font-size:13px;color:var(--muted);padding-top:14px}
.crumbs a{color:var(--muted)}
.hero{padding-block:14px 6px}
.hero h1{font-size:clamp(26px,3.6vw,38px);line-height:1.12;margin:0 0 8px;letter-spacing:-.022em;text-wrap:balance}
.hero p{margin:0;color:var(--muted);max-width:72ch}
.facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.fact{font-size:13px;padding:5px 10px;border-radius:999px;background:var(--soft);border:1px solid var(--line)}
.fact b{font-weight:700}

/* calculator */
.tool-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;margin-block:16px 26px;box-shadow:0 2px 10px rgba(10,42,85,.05)}
.tool-card>h2{font-size:18px;margin:0 0 14px;display:flex;align-items:center;gap:8px}
.tool-card>h2 svg{width:14px;height:22px;flex:none}
.tool-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:20px;align-items:start}
@media (max-width:860px){.tool-grid{grid-template-columns:minmax(0,1fr)}}
.inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:420px){.inputs{grid-template-columns:minmax(0,1fr)}}
.fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.fld.wide{grid-column:1/-1}
.fld label{font-size:13px;font-weight:700}
.fld small{font-size:12px;color:var(--muted)}
select,input[type=number]{width:100%;font:500 15px var(--f-ui);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px;min-height:44px}
.in{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden}
.in:focus-within{outline:2px solid var(--accent);outline-offset:1px}
.in input{border:0;border-radius:0;min-width:0;outline:none}
.in span{display:flex;align-items:center;padding:0 10px;background:var(--soft);color:var(--muted);font-size:13px;font-weight:600;white-space:nowrap;border-left:1px solid var(--line)}
.results{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:14px;position:sticky;top:12px}
@media (max-width:860px){.results{position:static;order:-1}}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.tile span{font-size:12.5px;color:var(--muted);font-weight:600}
.tile b{font-size:clamp(20px,2.4vw,26px);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink);overflow-wrap:anywhere}
.tile:first-child b{color:var(--accent)}
.tile small{font-size:12px;color:var(--muted)}
.compare{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:var(--good-soft);font-size:14.5px}
.compare b{color:var(--good)}
.notes{margin:10px 0 0;padding-left:18px;font-size:13.5px;color:var(--muted)}
.notes li{margin-bottom:4px}
.actions{margin-top:10px}
.tbl{overflow-x:auto;margin-top:12px}
table.t{width:100%;border-collapse:collapse;font-size:14px;background:var(--surface);border-radius:10px;overflow:hidden}
table.t th,table.t td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
table.t th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
table.t .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.t tr.hl td{background:var(--accent-soft);font-weight:700}
.chart{margin:12px 0 0;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px}
.chart svg{width:100%;height:auto;display:block}
.chart text{font:11px var(--f-ui);fill:var(--muted)}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart polyline{fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.chart .evl{stroke:var(--chart-ev)} .chart .gasl{stroke:var(--chart-gas);stroke-dasharray:6 5}
.chart figcaption{font-size:12.5px;color:var(--muted);display:flex;gap:6px 14px;align-items:center;flex-wrap:wrap;margin-top:4px}
.chart .k{display:inline-block;width:18px;height:3px;border-radius:2px;margin-right:-8px}
.chart .k.ev{background:var(--chart-ev)} .chart .k.gas{background:var(--chart-gas)}
.bars{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.bars div{display:grid;grid-template-columns:100px minmax(0,1fr) 70px;gap:10px;align-items:center;font-size:13px}
.bars i{display:block;height:14px;border-radius:7px;background:var(--line)}
.bars i.est{background:var(--accent)}
.bars b{text-align:right;font-variant-numeric:tabular-nums}
.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:10px 14px;border-radius:8px;font-size:14px;font-weight:600;z-index:50;max-width:calc(100% - 32px)}
.ad-slot{min-height:280px}

/* content */
.content{padding-block:6px 36px}
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
@media (max-width:860px){.cols{grid-template-columns:minmax(0,1fr)}}
.content h2{font-size:22px;margin:26px 0 10px;letter-spacing:-.012em;text-wrap:balance}
.content h3{font-size:16px;margin:18px 0 6px}
.content p,.content li{color:var(--muted);max-width:72ch}
.content li b,.content p b{color:var(--ink)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px}
.spec{width:100%;border-collapse:collapse;font-size:14.5px}
.spec th,.spec td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{color:var(--muted);font-weight:600;width:48%}
.spec td{font-weight:700;font-variant-numeric:tabular-nums}
.data{width:100%;border-collapse:collapse;font-size:14px;background:var(--surface)}
.data th,.data td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left}
.data th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:var(--soft);position:sticky;top:0}
.data td.num,.data th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.data a{font-weight:700}
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;max-height:640px}
.faq details{border-bottom:1px solid var(--line);padding:12px 0}
.faq summary{cursor:pointer;font-weight:700;color:var(--ink);list-style:none;display:flex;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'+';color:var(--accent);font-weight:800;width:12px;flex:none}
.faq details[open] summary::before{content:'–'}
.faq details p{margin:8px 0 0 22px}
.links{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:10px}
.links a{display:block;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;text-decoration:none;color:var(--ink);font-weight:700;font-size:14px}
.links a span{display:block;font-weight:500;color:var(--muted);font-size:13px}
.links a:hover{border-color:var(--accent)}
.toolgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-top:10px}
.toolgrid a{display:flex;flex-direction:column;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;text-decoration:none;color:var(--ink)}
.toolgrid a b{font-size:16px}
.toolgrid a span{color:var(--muted);font-size:14px}
.toolgrid a:hover{border-color:var(--accent)}
.reviewed{font-size:13px;color:var(--muted)}
.prose{max-width:780px;padding-block:18px 40px}
.prose h1{font-size:clamp(26px,3.4vw,34px);letter-spacing:-.02em;margin:10px 0 6px}
.prose h2{font-size:20px;margin:28px 0 8px}
.prose p,.prose li{color:var(--muted)}
footer{border-top:1px solid var(--line);padding-block:22px;font-size:13px;color:var(--muted);background:var(--soft)}
footer .wrap{display:flex;flex-direction:column;gap:10px}
footer nav{display:flex;flex-wrap:wrap;gap:6px 16px}
footer a{color:var(--muted)}

.minibar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:30;background:var(--navy);color:#fff;border-radius:12px;padding:10px 14px;display:flex;gap:14px;align-items:center;box-shadow:0 8px 24px rgba(0,0,0,.25);cursor:pointer}
.minibar span{display:flex;flex-direction:column;font-size:11.5px;opacity:.9;min-width:0}
.minibar b{font-size:18px;opacity:1;font-variant-numeric:tabular-nums}
.minibar em{margin-left:auto;font-style:normal;font-size:12.5px;font-weight:700;color:#8cc4ff;white-space:nowrap}
@media (min-width:861px){.minibar{display:none!important}}

/* simple-first form */
.simple{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.inputs{display:block}
@media (max-width:420px){.simple,.advgrid{grid-template-columns:minmax(0,1fr)}}
.adv{margin-top:14px;border:1px solid var(--line);border-radius:10px;background:var(--soft)}
.adv summary{cursor:pointer;padding:11px 14px;font-weight:700;font-size:14px;color:var(--accent);list-style:none;display:flex;align-items:center;gap:8px}
.adv summary::-webkit-details-marker{display:none}
.adv summary::before{content:"+";font-weight:800;width:12px}
.adv[open] summary::before{content:"–"}
.advgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 14px 14px}
.basis{margin:10px 0 0;font-size:13px;color:var(--muted)}
.actions{display:flex;gap:8px;flex-wrap:wrap}
/* searchable picker */
.cb{position:relative}
.cb input{width:100%;font:600 16px var(--f-ui);color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding:12px 38px 12px 14px;min-height:48px}
.cb input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.cb-caret{position:absolute;right:14px;top:50%;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.cb ul{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:25;margin:0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 28px rgba(10,42,85,.16);max-height:320px;overflow:auto}
.cb li{padding:8px 10px;border-radius:7px;cursor:pointer;display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.cb li b{font-weight:700}
.cb li span{color:var(--muted);font-size:13px;white-space:nowrap}
.cb li.act,.cb li:hover{background:var(--accent-soft)}
.cb li[aria-selected="true"] b{color:var(--accent)}
.cb li.none{color:var(--muted);cursor:default}
.jump{max-width:520px;margin:6px 0 14px}
/* car pages */
.carhead{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:22px;align-items:center;padding-block:10px 4px}
@media (max-width:860px){.carhead{grid-template-columns:minmax(0,1fr)}}
.carhead h1{font-size:clamp(26px,3.6vw,38px);line-height:1.12;margin:0 0 8px;letter-spacing:-.022em}
.carhead p{margin:0;color:var(--muted)}
.carpic{background:linear-gradient(180deg,var(--soft),var(--surface));border:1px solid var(--line);border-radius:16px;padding:14px 18px 8px}
.carpic svg{width:100%;height:auto;display:block}
.carpic figcaption{font-size:12px;color:var(--muted);text-align:center}
.carpic img.body{border-radius:12px;margin-bottom:6px}
.carpic img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:10px;display:block;margin-bottom:6px;animation:phin .35s ease}
.carpic.photo{padding:10px 10px 6px;background:var(--surface)}
.carpic figcaption a{color:inherit}
@keyframes phin{from{opacity:0}to{opacity:1}}
.tabs{display:flex;gap:4px;border-bottom:2px solid var(--line);margin-top:16px;overflow-x:auto}
.tabs a{padding:10px 16px;font-weight:700;text-decoration:none;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap}
.tabs a[aria-current]{color:var(--accent);border-bottom-color:var(--accent)}
.keyspecs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
@media (max-width:640px){.keyspecs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.keyspecs div{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.keyspecs span{display:block;font-size:12px;color:var(--muted);font-weight:600}
.keyspecs b{font-size:18px;font-variant-numeric:tabular-nums}
.cargrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:10px}
.cargrid a{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:12px;padding:10px 12px 12px;text-decoration:none;color:var(--ink);background:var(--surface)}
.cargrid a:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(0,102,255,.12)}
.cargrid svg{width:100%;height:auto;margin-bottom:4px}
.cargrid img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:8px;margin-bottom:6px;background:#eef0f2}
.cargrid b{font-size:15px}
.cargrid span{font-size:13px;color:var(--muted)}
.make{margin-top:22px}
.make h3{margin:0 0 6px}


/*---ammar ---*/
nav.main .dd>a, nav.main .dd>button { height:38px}
.brand{font-size:40px;}
@media (max-width:640px){ .brand{font-size:30px;} }

/* car card at the top of calculators */
.carfig{display:flex;align-items:center;gap:16px;margin:0 0 14px;padding:10px 16px 10px 10px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.carfig img{width:210px;max-width:46%;height:auto;aspect-ratio:4/3;flex:none;border-radius:8px;display:block;background:#e9ebee}
.carfig figcaption{font-size:13px;line-height:1.45;color:var(--muted);min-width:0}
.carfig figcaption b{display:block;font-size:16px;color:var(--ink);margin-bottom:2px}
.carfig .facts{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;color:var(--ink)}
.carfig .facts span{white-space:nowrap}
.carfig small{display:block;margin-top:6px;font-size:11.5px}
@media (max-width:560px){.carfig{gap:12px;padding:8px 12px 8px 8px}.carfig img{width:42%}.carfig figcaption b{font-size:15px}}

/* compare: inline in the calculator */
.carfig .cfx{min-width:0}
.cmpctl{margin-top:8px}
.cmpbtn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1.5px solid var(--accent);border-radius:8px;color:var(--accent);background:var(--surface);font:700 13px var(--f-ui);cursor:pointer}
.cmpbtn:hover{background:var(--accent-soft)}
.cmplab{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:4px}
.duo{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin:0 0 14px}
.duo .c{position:relative;border:1px solid var(--line);border-radius:12px;background:var(--soft);padding:8px;text-align:center;min-width:0}
.duo .c img{width:100%;max-width:170px;height:auto;border-radius:8px;display:block;margin:0 auto 4px}
.duo .c b{display:block;font-size:14px}.duo .c small{color:var(--muted);font-size:12px}
.duo .c.b2{border:2px solid var(--accent)}
.duo .x,.ctab .x{position:absolute;top:4px;right:6px;border:0;background:none;color:var(--muted);font-size:15px;cursor:pointer;padding:4px}
.duo .v{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;font:800 12px var(--f-ui);display:flex;align-items:center;justify-content:center}
.cmpmode .tiles{display:block}
.ctiles{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.ctiles .r{display:grid;grid-template-columns:1.1fr 1fr 1fr;border-bottom:1px solid var(--line)}
.ctiles .r:last-child{border:0}.ctiles .r>*{padding:10px 12px}
.ctiles .h{background:var(--soft);font-weight:800;font-size:13px}
.ctiles .l{color:var(--muted);font-size:13px;align-self:center}
.ctiles .n{font-size:18px;font-weight:800}
.ctiles .n.w{color:var(--good);background:var(--good-soft)}
.ctiles .n.w:after{content:"Best";margin-left:6px;padding:1px 6px;border-radius:999px;background:var(--surface);font-size:10px;vertical-align:3px}
.cfull{display:block;margin-top:8px;font-weight:700}
@media (max-width:560px){.ctiles .n{font-size:15px}.ctiles .r>*{padding:9px 8px}.ctiles .n.w:after{display:none}.duo .c b{font-size:13px}}
/* compare page */
.cmp-bar{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end;margin:0 0 14px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.cmp-bar .fld{min-width:220px;flex:1 1 220px}.cmp-bar .fld:nth-child(2){flex:0 1 200px;min-width:160px}
.cmp-basis{flex:1 1 100%;margin:0;font-size:13px;color:var(--muted)}
.cmp-sum{margin:0 0 14px;padding:12px 14px;border-radius:12px;background:var(--good-soft);font-size:15px;line-height:1.5}
.ctab-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.ctab{border-collapse:collapse;width:100%;font-size:14px}
.ctab th,.ctab td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.ctab thead th{vertical-align:top;min-width:150px}
.ctab th.lbl,.ctab td.lbl{min-width:120px;width:22%;color:var(--muted);font-weight:500}
.ctab .cc{position:relative;padding-top:4px}
.ctab .cc img{width:100%;max-width:200px;height:auto;border-radius:8px;display:block;margin-bottom:6px}
.ctab .cc b{display:block;font-size:15px;color:var(--ink)}.ctab .cc small{color:var(--muted);font-weight:500}
.ctab .add{border:2px dashed var(--line);border-radius:10px;padding:14px 10px;display:flex;flex-direction:column;gap:8px;color:var(--accent);font-weight:700;min-width:170px}
.ctab .grp td{background:var(--soft);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.ctab td.best{background:var(--good-soft);font-weight:700}
.win{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--surface);color:var(--good);font-size:11px;font-weight:700;vertical-align:1px}
@media (max-width:560px){.ctab{font-size:13px}.ctab th,.ctab td{padding:8px}.ctab thead th{min-width:130px}.ctab th.lbl,.ctab td.lbl{min-width:96px}.win{display:none}}
/* versus header on ready-made comparison pages */
.vs-top{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin:4px 0 14px}
.vs-car{border:1px solid var(--line);border-radius:14px;background:var(--soft);padding:10px;text-align:center;min-width:0}
.vs-car img{width:100%;max-width:260px;height:auto;border-radius:8px;display:block;margin:0 auto 6px}
.vs-car b{display:block;font-size:16px}.vs-car small{color:var(--muted)}
.vs-badge{width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
@media (max-width:560px){.vs-car img{max-width:150px}.vs-car b{font-size:14px}.vs-badge{width:34px;height:34px;font-size:13px}}
.cmp-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:8px 0 0}
.cmp-links a{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);text-decoration:none;font-weight:700;font-size:14px}
.cmp-links a:hover{border-color:var(--accent)}
.cmp-links img{width:64px;height:auto;border-radius:6px;flex:none}
.cmp-links span{min-width:0}.cmp-links small{display:block;color:var(--muted);font-weight:500}
.carcmp{margin:12px 0 0}

a.vs-car{text-decoration:none;color:var(--ink);display:block}a.vs-car:hover{border-color:var(--accent)}
.ctab .cc a{text-decoration:none}
@media (max-width:560px){.ctab thead th{min-width:112px}.ctab th.lbl,.ctab td.lbl{min-width:84px;width:auto}.ctab .add{min-width:120px;padding:10px 8px}}