@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');
:root{font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:#1a3440;background:#f4f7f7;font-synthesis:none}*{box-sizing:border-box}body{margin:0;font-size:16px}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #79c8cb;outline-offset:2px}h1,h2,p{margin-top:0}h1,h2,.brandname{font-family:'Plus Jakarta Sans',system-ui,sans-serif}h2{font-size:21px;letter-spacing:-.03em;margin:4px 0 0}small{font-size:12px}.topbar{background:#102d3a;color:#fff;border-bottom:3px solid #5ac8bb}.topinner{max-width:1800px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:16px 34px}.brand{text-decoration:none;color:#fff;display:flex;gap:12px;align-items:center}.brandmark{background:#d4f3e9;color:#183e48;display:flex;width:47px;height:47px;border-radius:13px;justify-content:center;align-items:center;font-weight:800;font-size:21px;letter-spacing:-.08em}.brandmark span{font-size:15px;color:#228d84}.brandname{font-size:23px;font-weight:800;letter-spacing:-.06em;line-height:1.06}.brandname small{display:block;letter-spacing:.2em;font:700 9px 'DM Sans',sans-serif;color:#a7cacd;margin-top:5px}.top-right{display:flex;align-items:center;gap:21px;color:#c9dde0;font-size:13px}.buildtag{border:1px solid #6b9196;border-radius:5px;padding:5px 9px;font-size:11px;font-weight:800;letter-spacing:.08em}.workspace{max-width:1800px;margin:auto;display:grid;grid-template-columns:300px minmax(0,1fr);min-height:100vh}.filters{background:#fff;border-right:1px solid #dce6e7;padding:29px 23px;align-self:stretch}.filtertop{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:27px}.filtertop h2{font-size:21px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;color:#23877d}.text-btn{background:none;border:0;color:#187f75;font-size:12px;font-weight:700;padding:6px 0}.control{display:flex;flex-direction:column;gap:8px;color:#526771;font-size:12px;font-weight:700;margin:0 0 19px}.control input,.control select,.toolcontrols select,.cost-inputs input{width:100%;border:1px solid #d5e1e3;border-radius:8px;background:#fff;padding:11px 12px;font-size:14px;color:#183542;min-height:42px}.control input::placeholder{color:#8b9da5}.control input:disabled{background:#f3f6f6}.filterpair{display:grid;grid-template-columns:1fr 1fr;gap:10px}.filterhelp{border-left:3px solid #66b9a6;color:#637780;font-size:12px;line-height:1.55;background:#f2f8f6;padding:11px 13px}.status-dot{display:inline-block;width:7px;height:7px;border-radius:100%;background:#6baa9d;margin-right:4px}.sidebar-bottom{margin-top:42px;border-top:1px solid #e3ebec;padding-top:22px}.sidebar-bottom strong{font-size:14px}.sidebar-bottom p{font-size:13px;line-height:1.6;color:#60727b}.content{padding:32px 35px 20px;min-width:0}.pageintro{display:flex;justify-content:space-between;align-items:center;gap:26px;margin-bottom:23px}.pageintro h1{font-size:clamp(30px,3vw,42px);line-height:1.17;letter-spacing:-.055em;margin:10px 0 12px}.pageintro h1 em{font-style:normal;color:#258e83}.pageintro p{font-size:15px;color:#667a83;line-height:1.5;margin:0}.intro-stat{min-width:180px;background:#e9f4f1;border:1px solid #d0e9e1;border-radius:12px;padding:18px 20px}.intro-stat span,.intro-stat small{display:block;font-size:11px;color:#52756d}.intro-stat span{font-weight:800;letter-spacing:.1em}.intro-stat strong{display:block;font-size:38px;line-height:1.25;color:#1f7066}.intro-stat small{line-height:1.3}.alert{display:flex;align-items:flex-start;gap:12px;background:#fff8e9;border:1px solid #eadbb6;border-radius:9px;padding:13px 17px;margin-bottom:22px;color:#7b6232}.alert p{margin:0;font-size:13px;line-height:1.5}.alert-symbol{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:100%;background:#d8b773;color:white;font-weight:800;width:20px;height:20px;font-size:13px}.catalog,.comparison,.costs{background:white;border:1px solid #dce6e7;box-shadow:0 5px 23px rgba(21,52,63,.035);border-radius:13px;margin-bottom:23px;overflow:hidden}.toolbar,.section-title{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:22px 23px}.toolbar{border-bottom:1px solid #e4ebeb}.toolbar h2 .count{font:600 12px 'DM Sans',sans-serif;vertical-align:middle;letter-spacing:0;color:#258a81;background:#e5f5f0;padding:5px 8px;border-radius:100px;margin-left:10px}.toolcontrols{display:flex;align-items:center;gap:10px}.toolcontrols label{font-size:12px;color:#647780;font-weight:700;display:flex;align-items:center;gap:9px}.toolcontrols select{width:210px;padding:8px;font-size:13px;min-height:38px}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse}#vehicleTable{min-width:980px}th{text-align:left;background:#f7faf9;color:#64757d;font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:800;padding:14px 13px;white-space:nowrap}td{padding:13px;border-top:1px solid #edf0f0;font-size:13px;white-space:nowrap}tbody tr:hover{background:#f7fbfa}th:first-child,td:first-child{padding-left:23px}th:last-child,td:last-child{padding-right:23px}.sorthead{border:0;background:transparent;text-transform:uppercase;letter-spacing:.07em;color:inherit;font-size:11px;font-weight:800;padding:0}.sorthead span{color:#7bb0a9}.vehicle-name{display:flex;align-items:center;gap:13px;min-width:210px}.thumb{display:flex;align-items:center;justify-content:center;width:91px;height:62px;flex-shrink:0;background:linear-gradient(135deg,#eaf0ef,#f6f8f7);border:1px solid #e3eaea;border-radius:7px;overflow:hidden}.thumb img{width:100%;height:100%;object-fit:contain}.thumb svg{width:44px;height:33px;stroke:#8ca7aa;fill:none;stroke-width:1.8}.vehicle-title{font-weight:800;color:#183746;font-size:14px}.vehicle-sub{color:#75868e;margin-top:5px;font-size:12px}.pill{border-radius:5px;padding:5px 8px;font-weight:800;font-size:11px;letter-spacing:.03em;color:#236f66;background:#e4f4ef}.pill.PHEV{color:#6b62a5;background:#eeeafa}.pill.HEV{color:#7b6724;background:#fbf1ce}.pill.FCEV{color:#44759b;background:#e4eef8}.muted{color:#8ca0a6}.numeric{font-variant-numeric:tabular-nums;font-weight:700}.price-pending{color:#7d9199;font-weight:600;font-size:12px}.secondary,.compare-btn{border:1px solid #cedddd;background:#fff;color:#1e675f;border-radius:7px;padding:9px 13px;font-weight:800;font-size:12px;white-space:nowrap}.compare-btn.selected,.primary{background:#1d736a;color:#fff;border-color:#1d736a}.primary{border-radius:7px;padding:10px 14px;font-weight:800;font-size:13px}.tablefoot{display:flex;justify-content:space-between;gap:15px;border-top:1px solid #ebefef;padding:13px 23px;color:#819098;font-size:11px}.comparison,.costs{padding-bottom:21px}.compare-empty{margin:0 23px;border:1px dashed #d3e2e2;border-radius:9px;text-align:center;padding:36px 20px;color:#778c92;font-size:14px}.compare-table{overflow:auto;margin:0 23px}.compare-table table{min-width:600px}.compare-table td:first-child{font-weight:700;color:#60757e}.costs{padding-bottom:22px}.cost-inputs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:0 23px}.cost-inputs label{font-size:12px;color:#62767f;font-weight:700}.cost-inputs input{margin-top:8px;font-size:15px}.disclaimer{font-size:12px;color:#819199;line-height:1.6;margin:15px 23px 0}.subtle{color:#8b9ba1;font-size:12px}footer{color:#849398;font-size:12px;padding:9px 0 25px}.noresults{padding:42px;text-align:center;color:#718b91}.mobile-cards,.mobile-filter{display:none}.compare-tray{position:fixed;right:20px;bottom:16px;background:#123e49;color:white;border-radius:11px;padding:11px 12px 11px 16px;box-shadow:0 8px 32px #0003;display:flex;align-items:center;gap:16px;z-index:10;font-size:13px}.compare-tray[hidden]{display:none!important}
@media(min-width:1500px){.workspace{grid-template-columns:315px minmax(0,1fr)}.content{padding-left:44px;padding-right:44px}td{padding-top:16px;padding-bottom:16px}}
@media(max-width:1150px){.workspace{grid-template-columns:245px minmax(0,1fr)}.filters{padding:23px 17px}.content{padding:25px 18px}.intro-stat{min-width:150px}.pageintro h1{font-size:30px}.filterpair{grid-template-columns:1fr}.filterpair .control{margin-bottom:12px}}
@media(max-width:780px){.topinner{padding:12px 16px}.top-note{display:none}.workspace{display:block}.filters{display:none;border-right:0;border-bottom:1px solid #dde8e8}.filters.open{display:block}.filterpair{grid-template-columns:1fr 1fr}.content{padding:20px 13px}.pageintro{align-items:start;flex-direction:column;gap:18px}.pageintro h1{font-size:32px}.intro-stat{min-width:unset;width:100%;padding:12px 15px}.intro-stat strong{font-size:28px}.mobile-filter{display:inline-flex}.toolbar{align-items:flex-start;flex-direction:column;padding:18px}.toolcontrols{width:100%;justify-content:space-between}.toolcontrols label{flex:1}.toolcontrols select{width:100%}.table-scroll{display:none}.mobile-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px}.mobile-card{border:1px solid #e0e9e9;border-radius:9px;padding:12px}.mobile-card .thumb{width:100%;height:90px;margin-bottom:10px}.mobile-card .vehicle-title{font-size:13px}.mobile-card .metrics{font-size:12px;color:#657b80;margin:11px 0}.mobile-card .metrics div{margin-bottom:5px}.cost-inputs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.mobile-cards{grid-template-columns:1fr}.mobile-card{display:grid;grid-template-columns:90px 1fr;column-gap:12px;align-items:start}.mobile-card .thumb{width:90px;height:75px;grid-row:span 3}.mobile-card .metrics{grid-column:2}.mobile-card .compare-btn{grid-column:1/-1}.filterpair{grid-template-columns:1fr 1fr}.cost-inputs{grid-template-columns:1fr 1fr;gap:10px}.section-title{align-items:flex-start;flex-direction:column}.tablefoot{flex-direction:column}.pageintro h1{font-size:29px}}


/* EVGuide v1.3.1 — desktop branding and visual-hierarchy refinement.
   No changes to data rendering, sorting, filters or comparison logic. */
:root { --ev-ink: #0d303e; --ev-mint: #49d6ba; --ev-green: #078875; }
.topbar {
  background: linear-gradient(116deg,#071f2d 0%,#0d3544 52%,#13505a 100%);
  border-bottom: 4px solid #46d9b7;
  box-shadow: 0 7px 22px rgba(7,34,47,.14);
}
.topinner { min-height: 94px; padding-top: 16px; padding-bottom: 16px; }
.brand { gap: 17px; }
.brandmark {
  width: 66px; height: 62px; border-radius: 16px;
  background: linear-gradient(145deg,#7df0ce 0%,#34cbb5 100%);
  color: #0a3540; font-size: 29px; font-weight: 800;
  letter-spacing: -.09em; box-shadow: 0 8px 23px rgba(7,12,20,.3), inset 0 1px 1px #ffffffaa;
  position: relative; transform: rotate(-3deg);
}
.brandmark span { color: #fff; font-size: 23px; position: relative; top: -3px; margin-left: 1px; }
.brandname { font-size: 32px; letter-spacing: -.055em; line-height: 1; color: #f9ffff; }
.brandname small { margin-top: 9px; font-size: 10px; font-weight: 800; letter-spacing: .24em; color: #b3ece3; }
.buildtag { border-color: #65d2c2; background: rgba(104,235,211,.12); color: #b8fff0; padding: 8px 12px; font-size: 11px; }
.top-note { color: #e1f4f3; font-weight: 600; font-size: 14px; }
.content { padding-top: 36px; }
.pageintro { padding: 7px 0 13px; margin-bottom: 21px; }
.intro-eyebrow { font-size: 12px; color: #087e73; letter-spacing: .19em; }
.pageintro h1 {
  font-size: clamp(42px,3.7vw,62px); font-weight: 800;
  letter-spacing: -.065em; line-height: 1.08; margin: 13px 0 17px;
  color: var(--ev-ink); max-width: 850px;
}
.pageintro h1 em { color: #087d72; position: relative; white-space: nowrap; }
.pageintro h1 em::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 5px;
  background: #7be2c7; border-radius: 20px; transform: rotate(-1.5deg);
}
.pageintro p { font-size: 17px; max-width: 790px; color: #546f7a; line-height: 1.55; }
.intro-stat { min-width: 207px; border-radius: 16px; padding: 21px 25px; background: linear-gradient(135deg,#e7f7f2,#f3faf8); border-color: #b9e5d7; }
.intro-stat strong { font-size: 48px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; letter-spacing: -.06em; }
.filtertop h2 { font-size: 24px; color: var(--ev-ink); }
.eyebrow { color: #087d72; }
.toolbar,.section-title { padding-top: 27px; padding-bottom: 26px; }
.toolbar h2,.section-title h2 { font-size: clamp(25px,2.1vw,31px); font-weight: 800; color: var(--ev-ink); letter-spacing: -.05em; line-height: 1.12; margin-top: 7px; }
.toolbar .eyebrow,.section-title .eyebrow { font-size: 11px; letter-spacing: .19em; }
.catalog,.comparison,.costs { border-radius: 15px; box-shadow: 0 10px 28px rgba(18,54,65,.05); }
.vehicle-title { font-size: 15px; }
.secondary,.compare-btn { font-size: 13px; }
@media(min-width:1500px){ .pageintro h1 { font-size: 61px; } }
@media(max-width:1150px){
  .brandname { font-size: 27px; }
  .brandmark { width: 57px; height: 56px; font-size: 25px; }
  .pageintro h1 { font-size: 41px; }
  .pageintro p { font-size: 16px; }
}
@media(max-width:780px){
  .topinner { min-height: 72px; }
  .brandmark { width: 46px; height: 46px; border-radius: 12px; font-size: 21px; }
  .brandmark span { font-size: 16px; }
  .brandname { font-size: 23px; }
  .brandname small { font-size: 8px; letter-spacing: .16em; }
  .buildtag { font-size: 10px; padding: 6px 8px; }
  .content { padding-top: 20px; }
  .pageintro h1 { font-size: 37px; }
  .pageintro p { font-size: 15px; }
  .toolbar h2,.section-title h2 { font-size: 25px; }
}
@media(max-width:480px){
  .pageintro h1 { font-size: 32px; }
  .brand { gap: 10px; }
  .brandname { font-size: 22px; }
  .intro-eyebrow { font-size: 10px; }
}
@media(prefers-reduced-motion:reduce){ .brandmark { transform: none; } }
