/* The EV Zone. Graphite green, one lime accent. Red Hat Display / Red Hat Text / JetBrains Mono (labels only).
   Radius rule: 8px controls (buttons, inputs, choices), 14px surfaces (tiles, panels, nav), 20px the quote sheet. */
:root{
  --bg:#0C1311; --surface:#121B18; --surface-2:#17221E; --edge:#22302B; --edge-2:#33463F;
  --text:#EAF2EF; --muted:#A6B7B1; --lime:#C6F432; --lime-hi:#D6F95E; --ink:#0C1311; --err:#FF9A8B;
  --display:"Red Hat Display",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Red Hat Text",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --r-s:8px; --r-m:14px; --r-l:20px;
  --ease:cubic-bezier(.3,.7,.2,1);
  --sec:clamp(72px,9vw,128px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--text);text-decoration-color:var(--lime);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color .2s}
a:hover{color:var(--lime)}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:4px}
::selection{background:var(--lime);color:var(--ink)}
svg{max-width:100%}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.frame{width:min(1200px,100% - 48px);margin-inline:auto}
.mono{font-family:var(--mono);letter-spacing:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:8px;background:var(--lime);color:var(--ink);padding:8px 14px;border-radius:var(--r-s);z-index:90;text-decoration:none}
.skip:focus{left:12px}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.muted{color:var(--muted);font-weight:400}

/* buttons */
.pill{display:inline-flex;align-items:center;justify-content:center;font:700 15px/1 var(--display);letter-spacing:-.005em;white-space:nowrap;padding:14px 22px;border-radius:var(--r-s);text-decoration:none;border:0;cursor:pointer;transition:background-color .2s var(--ease),transform .12s var(--ease)}
.pill-lime{background:var(--lime);color:var(--ink)}
.pill-lime:hover{background:var(--lime-hi);color:var(--ink)}
.pill:active{transform:translateY(1px) scale(.985)}
.pill:focus-visible{outline-offset:3px;border-radius:var(--r-s)}
.pill-lg{padding:19px 30px;font-size:17px}
.pill-block{width:100%;margin-top:20px;padding:18px;font-size:16px}
.pill[disabled]{opacity:.6;cursor:wait;transform:none}

/* nav: floating bar */
.nav-wrap{position:sticky;top:0;z-index:40;padding:14px 24px 0;background:linear-gradient(var(--bg) 55%,transparent)}
.nav{width:min(1200px,100%);margin:0 auto;display:flex;align-items:center;gap:28px;padding:9px 9px 9px 18px;border:1px solid var(--edge);border-radius:var(--r-m);background:rgba(18,27,24,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.brand{display:inline-flex;align-items:center;text-decoration:none;color:var(--text);border-radius:6px}
.brand-logo{display:block;height:34px;width:auto}
.links{display:flex;gap:28px;margin-left:auto}
.links a{color:var(--muted);text-decoration:none;font-size:15px;font-weight:500;padding:6px 0}
.links a:hover,.links a[aria-current=page]{color:var(--text)}
.nav-cta{padding:12px 18px;font-size:14.5px}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--edge-2);border-radius:var(--r-s);width:44px;height:42px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger b{display:block;width:18px;height:2px;border-radius:2px;background:var(--text)}

/* hero: headline across, then copy left and the car standing on the fold line */
.stage{padding:clamp(40px,5.2vw,76px) 0 0;overflow:hidden}
.stage-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:32px;align-items:end}
.stage h1{grid-column:1/-1;font:700 clamp(36px,5.3vw,74px)/1.03 var(--display);letter-spacing:-.028em;margin:0 0 clamp(24px,3vw,40px)}
.stage h1 br{display:none}
.hl{color:var(--lime);display:block;text-wrap:balance}
.stage-copy{padding-bottom:clamp(40px,5vw,72px)}
.intro{max-width:30em;margin:0 0 30px;color:var(--muted);font-size:19px;line-height:1.6}
.charge{margin:0 -96px 0 -24px}
.charge img{display:block;width:100%;height:auto}

/* reassurance strip, directly under the hero */
.assure{border-top:1px solid var(--edge)}
.assure-in{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
.assure li{padding:26px 0 28px 28px;border-left:1px solid var(--edge);display:flex;flex-direction:column;gap:2px}
.assure li:first-child{padding-left:0;border-left:0}
.assure strong{font:600 18px/1.3 var(--display);letter-spacing:0}
.assure span{color:var(--muted);font-size:15.5px}

/* sections */
.kicker{color:var(--lime);font-size:13px;font-weight:500;margin:0 0 14px}
section h2{font:700 clamp(30px,3.7vw,50px)/1.08 var(--display);letter-spacing:-.024em;margin:0 0 clamp(32px,4vw,52px);max-width:17em}
.explained{padding:var(--sec) 0 0;border-top:1px solid var(--edge)}

/* five cells: one feature, four in a staggered brick */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.tile{background:var(--surface);border-radius:var(--r-m);padding:28px 28px 30px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.tile svg{height:34px;width:auto;align-self:flex-start;flex:none}
.tile h3{font:600 20px/1.25 var(--display);letter-spacing:-.005em;margin:22px 0 8px}
.tile p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.6}
.tile:nth-child(1){grid-column:1/6;grid-row:1/3}
.tile:nth-child(2){grid-column:6/10}
.tile:nth-child(3){grid-column:10/13}
.tile:nth-child(4){grid-column:6/9}
.tile:nth-child(5){grid-column:9/13}
.tile-feature{background:var(--surface-2);padding:36px 36px 0}
.tile-feature h3{font-size:clamp(24px,2.3vw,30px);letter-spacing:-.018em;margin-top:0;order:1}
.tile-feature p{font-size:17px;order:2;max-width:26em}
.tile-feature svg{order:3;height:auto;width:112%;max-width:none;margin:auto -22% -9% auto;padding-top:40px}
.tile-feature svg *{vector-effect:non-scaling-stroke;stroke-width:2px}
.tile:nth-child(3){background:
  radial-gradient(circle at 100% 0,transparent 0 58px,rgba(234,242,239,.14) 58px 59px,transparent 59px 96px,rgba(234,242,239,.1) 96px 97px,transparent 97px 134px,rgba(234,242,239,.06) 134px 135px,transparent 135px),
  var(--surface)}
.tile-tint{background:linear-gradient(180deg,rgba(198,244,50,.11),rgba(198,244,50,.045));box-shadow:inset 0 0 0 1px rgba(198,244,50,.2)}
.tile-tint p{color:#B9C8C2}

/* how it works: heading left, the route right */
.flow{padding:var(--sec) 0 0}
.flow-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:32px;align-items:start}
.flow h2{margin-bottom:0;position:sticky;top:120px}
.track{list-style:none;margin:0;padding:0}
.track li{position:relative;padding:0 0 44px 72px}
.track li:last-child{padding-bottom:0}
.track li::before{content:"";position:absolute;left:21px;top:44px;bottom:0;width:2px;background:var(--edge-2)}
.track li:last-child::before{display:none}
.node{position:absolute;left:0;top:0;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--lime);color:var(--lime);font-size:15px;font-weight:500}
.track h3{font:600 22px/1.3 var(--display);letter-spacing:-.008em;margin:0 0 6px;padding-top:7px}
.track p{margin:0;color:var(--muted);max-width:34em}

/* questions: open grid, hairlines only */
.qa{padding:var(--sec) 0 0}
.qa-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:64px}
.qa-item{border-top:1px solid var(--edge-2);padding:26px 0 38px}
.qa-item h3{font:600 20px/1.3 var(--display);letter-spacing:-.005em;margin:0 0 8px}
.qa-item p{margin:0;color:var(--muted);max-width:32em}

/* closer: stays dark, lime lives on the button */
.band{padding:calc(var(--sec) - 24px) 0 var(--sec)}
.band-in{display:flex;align-items:center;justify-content:space-between;gap:28px 40px;flex-wrap:wrap;background:var(--surface-2);border-radius:var(--r-m);padding:clamp(32px,5vw,64px)}
.band h2{margin:0;max-width:none}

/* quote sheet */
.sheet{padding:40px 20px}
.js .sheet{position:fixed;inset:0;z-index:80;display:none;padding:16px;align-items:center;justify-content:center}
.js .sheet.is-open{display:flex}
.sheet-scrim{display:none}
.js .sheet-scrim{display:block;position:absolute;inset:0;background:rgba(5,10,8,.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sheet-panel{position:relative;width:min(580px,100%);margin:0 auto;background:var(--surface);border:1px solid var(--edge-2);border-radius:var(--r-l);padding:22px 30px 30px;box-shadow:0 32px 80px -20px rgba(3,10,7,.85)}
.js .sheet-panel{max-height:calc(100dvh - 32px);overflow-y:auto;animation:pop .28s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.quote-locked{overflow:hidden}
.sheet-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:38px}
.no-js .sheet-x,.no-js .sheet-back{display:none}
.sheet-step{font-size:12.5px;color:var(--muted);margin-right:auto}
.sheet-back{background:none;border:0;color:var(--muted);font:500 14.5px var(--body);cursor:pointer;padding:6px 0;margin-right:14px;transition:color .2s}
.sheet-back:hover{color:var(--text)}
.sheet-back[hidden]{display:none}
.sheet-x{background:transparent;border:1px solid var(--edge-2);color:var(--text);width:38px;height:38px;border-radius:var(--r-s);font-size:22px;line-height:1;cursor:pointer;transition:background-color .2s,border-color .2s}
.sheet-x:hover{background:var(--surface-2);border-color:var(--muted)}
.meter{height:3px;background:var(--edge);border-radius:3px;margin:14px 0 28px;overflow:hidden}
.meter span{display:block;height:100%;width:20%;background:var(--lime);border-radius:3px;transition:width .4s var(--ease)}
.qstep{border:0;margin:0;padding:0;min-width:0}
.js .qstep{display:none}
.js .qstep.is-active{display:block}
.no-js .qstep{margin-bottom:28px}
.qstep legend{padding:0;margin:0 0 20px;width:100%}
.qstep legend:focus,.qstep legend:focus-visible{outline:none}
.qstep h2{font:700 clamp(24px,3vw,28px)/1.15 var(--display);margin:0;letter-spacing:-.018em;outline:none;max-width:none}
.hint{margin:-12px 0 12px;color:var(--muted);font-size:15.5px}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choices label{position:relative;cursor:pointer}
.choices input{position:absolute;opacity:0;inset:0}
.choices span{display:block;height:100%;padding:17px 18px 18px;border:1px solid var(--edge-2);border-radius:var(--r-s);background:var(--bg);transition:border-color .2s,background-color .2s,transform .12s var(--ease)}
.choices b{display:block;font:600 16.5px/1.3 var(--display)}
.choices small{display:block;color:var(--muted);font-size:13.5px;line-height:1.45;margin-top:4px}
.choices label:hover span{border-color:var(--muted);background:var(--surface-2)}
.choices label:active span{transform:scale(.985)}
.choices input:checked + span{border-color:var(--lime);box-shadow:inset 0 0 0 1px var(--lime);background:rgba(198,244,50,.07)}
.choices input:focus-visible + span{outline:2px solid var(--lime);outline-offset:2px}
.lbl{display:block;font-weight:600;font-size:14.5px;margin:16px 0 7px}
.field{width:100%;font:400 17px var(--body);padding:14px 15px;background:var(--bg);color:var(--text);border:1px solid var(--edge-2);border-radius:var(--r-s);transition:border-color .2s,box-shadow .2s}
.field:hover{border-color:var(--muted)}
.field:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(198,244,50,.2)}
.field[aria-invalid=true]{border-color:var(--err)}
.field[aria-invalid=true]:focus{box-shadow:0 0 0 3px rgba(255,154,139,.22)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field-err{display:block;color:var(--err);font-size:13.5px;margin-top:6px}
.field-err:empty{display:none}
.consent-set{margin-top:20px;padding:16px;border:1px solid var(--edge);border-radius:var(--r-s);background:var(--bg)}
.consent-row{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;margin:8px 0}
.consent-row input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--lime)}
.consent-row label{font-size:13px;line-height:1.55;color:var(--muted)}
.consent-fine{font-size:12px;line-height:1.55;color:var(--muted);margin:12px 0 0}

/* inner pages */
.inner-hero{padding:clamp(48px,7vw,96px) 0 clamp(24px,3vw,40px)}
.inner-hero h1{font:700 clamp(36px,5.2vw,68px)/1.04 var(--display);letter-spacing:-.028em;margin:0 0 20px;max-width:14em}
.inner-hero p:not(.kicker){color:var(--muted);font-size:19px;line-height:1.6;max-width:34em;margin:0}
.copy{padding:16px 0 var(--sec)}
.copy .frame{border-top:1px solid var(--edge);padding-top:clamp(24px,3vw,40px)}
.copy .frame > *{max-width:680px}
.copy h2{font:600 24px/1.25 var(--display);letter-spacing:-.01em;margin:44px 0 10px}
.copy .frame > h2:first-child{margin-top:8px}
.copy p,.copy li{color:var(--muted)}
.copy strong{color:var(--text)}
.copy ul{padding-left:1.1em;margin:0}
.copy li{margin-bottom:8px;padding-left:4px}
.copy li::marker{color:var(--lime)}
.panel{border-radius:var(--r-m);background:var(--surface-2);padding:28px 30px;margin:44px 0 8px}
.panel:first-child{margin-top:8px}
.panel h2{margin-top:0}
.panel p:last-child{margin-bottom:0}
.legal{padding:clamp(48px,7vw,88px) 0 var(--sec)}
.legal-inner{width:min(760px,100% - 48px);margin-inline:auto}
.legal-kicker{font-family:var(--mono);color:var(--lime);font-size:13px;font-weight:500;margin:0}
.legal h1{font:700 clamp(32px,4.4vw,52px)/1.06 var(--display);letter-spacing:-.024em;margin:12px 0 10px}
.legal-updated{color:var(--muted);font-size:14.5px;margin:0 0 40px;padding-bottom:28px;border-bottom:1px solid var(--edge)}
.legal h2{font:600 21px/1.3 var(--display);letter-spacing:-.005em;margin:36px 0 8px;max-width:none}
.legal p,.legal li{color:var(--muted)}
.legal strong{color:var(--text)}
.legal li::marker{color:var(--lime)}
.done{padding:clamp(56px,8vw,112px) 0 var(--sec)}
.done .frame{max-width:680px}
.done svg{width:96px;height:96px;margin-left:-12px}
.done h1{font:700 clamp(34px,5vw,60px)/1.04 var(--display);letter-spacing:-.028em;margin:12px 0 16px}
.done p{color:var(--muted);font-size:19px;margin:0}
.done ul{list-style:none;padding:0;margin:40px 0 36px;border-bottom:1px solid var(--edge)}
.done li{border-top:1px solid var(--edge);padding:18px 0;color:var(--muted)}
.done li strong{color:var(--text)}

/* footer */
.footer{border-top:1px solid var(--edge);padding:56px 0 44px;font-size:14.5px;line-height:1.65;color:var(--muted)}
.footer-top{display:flex;justify-content:space-between;align-items:center;gap:20px 32px;flex-wrap:wrap}
.footer .brand-logo{height:30px}
.footer-links{display:flex;gap:10px 26px;flex-wrap:wrap}
.footer-links a{color:var(--text);text-decoration:none;font-weight:500}
.footer-links a:hover{color:var(--lime)}
.footer-desc{max-width:68em;margin:32px 0 14px}
.footer-sms{margin:0}
.footer-sms .mono{color:var(--lime);border:1px solid var(--edge-2);border-radius:4px;padding:1px 6px;margin-right:4px;font-size:12px}
.footer-legal{margin:14px 0 0}

/* one quiet entrance for the hero; visible by default, no JS involved */
@media (prefers-reduced-motion:no-preference){
  .stage h1,.stage-copy,.charge{animation:rise .7s var(--ease) backwards}
  .stage-copy{animation-delay:.08s}
  .charge{animation-delay:.16s}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}}
}

@media (max-width:1020px){
  .bento{grid-template-columns:1fr 1fr}
  .bento .tile:nth-child(n){grid-column:auto;grid-row:auto}
  .bento .tile:nth-child(1){grid-column:1/-1}
  .tile-feature svg{width:min(380px,70%);margin:auto -12% -5% auto}
  .charge{margin-right:-48px}
}
@media (max-width:860px){
  .links{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;gap:6px;padding:14px 18px;background:var(--surface);border:1px solid var(--edge-2);border-radius:var(--r-m);margin:0}
  .links a{padding:10px 0;font-size:16px;color:var(--text)}
  .nav{position:relative;padding-right:9px}
  .nav-open .links{display:flex}
  .no-js .links{display:flex;position:static;border:0;padding:0;background:none}
  .burger{display:flex}
  .nav-cta{display:none}
  .stage-in{grid-template-columns:1fr}
  .stage-copy{padding-bottom:12px}
  .charge{margin:8px -24px 0 -8px}
  .flow-in{grid-template-columns:1fr;row-gap:36px}
  .flow h2{position:static}
  .qa-grid{grid-template-columns:1fr}
  .qa-item{padding-bottom:30px}
}
@media (max-width:600px){
  body{font-size:16px}
  .frame{width:min(1200px,100% - 40px)}
  .nav-wrap{padding:10px 12px 0}
  .brand-logo{height:30px}
  .intro{font-size:17px;margin-bottom:24px}
  .stage-copy .pill{width:100%}
  .assure-in{grid-template-columns:1fr}
  .assure li,.assure li:first-child{padding:16px 0;border-left:0;border-top:1px solid var(--edge);flex-direction:row;align-items:baseline;justify-content:space-between;gap:16px}
  .assure li:first-child{border-top:0}
  .assure strong{font-size:16.5px}
  .assure span{text-align:right}
  .bento{grid-template-columns:1fr}
  .tile{padding:24px 22px 26px}
  .tile-feature{padding:28px 22px 0}
  .tile-feature svg{width:74%;margin:4px 0 26px auto}
  .track li{padding-left:60px}
  .band-in .pill{width:100%}
  .choices,.row2{grid-template-columns:1fr}
  .row2{gap:0}
  .js .sheet{align-items:flex-end;padding:0}
  .sheet-panel{border-radius:var(--r-l) var(--r-l) 0 0;padding:18px 20px 24px;border-bottom:0}
  .js .sheet-panel{max-height:94dvh}
  .inner-hero p:not(.kicker),.done p{font-size:17px}
  .legal-inner{width:min(760px,100% - 40px)}
  .footer-links{gap:10px 22px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}