/* ==========================================================================
   easy.EVplug — charging business case, CLIENT surface.

   Loaded by BOTH the homepage #roi section and the standalone
   /ev-charging-roi-calculator page, so the two can never drift. Do not inline
   a copy into either page.

   THEMING CONTRACT: everything visual lives in the token block below, and it
   carries the marketing site's own palette (index.html's literal rgb() values
   resolved to hex). Nothing below that block hard-codes a colour.

   Every selector is scoped to .roi-calc. The homepage is a frozen-DOM export
   where most elements carry inline style="" attributes; scoping keeps these
   rules off everything that is not the calculator, and keeps the calculator
   free of the inline-style trap (nothing in the markup below sets a property
   that a media query here also sets).
   ========================================================================== */

.roi-calc{
  --ink:#171917; --page:#F3F2EC; --card:#FAF9F4; --paper:#FFFFFF;
  --brand:#00B03A; --brand-deep:#00821F;
  --deep:#061A0E; --fluoro:#B6FF50;
  --hair:#E6E6E2; --muted:rgba(23,25,23,.62); --muted-2:rgba(23,25,23,.45);
  --on-deep:#EAF3EC; --on-deep-muted:rgba(234,243,236,.62);
  --warn:#8A5A00; --warn-bg:#FFF6E3; --warn-line:#F0DCAE; --warn-ink:#6B4600;
  --conf-hi-bg:#E4F5E9;  --conf-hi-ink:#0A6B2C;
  --conf-med-bg:#FFF6E3; --conf-med-ink:#8A5A00;
  --conf-low-bg:#FDE8E4; --conf-low-ink:#9A3412;
  --font-body:'Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Cabinet Grotesk','Satoshi',sans-serif;
  --font-mono:'DM Mono',ui-monospace,monospace;
  --r:14px; --r-lg:22px;
  --shadow:0 1px 2px rgba(6,26,14,.04),0 8px 28px rgba(6,26,14,.06);

  color:var(--ink);
  font:400 16px/1.55 var(--font-body);
}
.roi-calc *{box-sizing:border-box}
.roi-calc h1,.roi-calc h2{margin:0;font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;line-height:1.06}
.roi-calc p{margin:0}
.roi-calc button{font:inherit;color:inherit}
.roi-calc .eyebrow{color:var(--brand-deep);font-family:var(--font-mono);letter-spacing:.24em;text-transform:uppercase;font-size:11px;font-weight:500}
.roi-calc .tnum{font-variant-numeric:tabular-nums}

/* ---------- page head ---------- */
.roi-calc .head{padding:0 0 26px;max-width:900px}
.roi-calc .head h1{font-size:clamp(34px,4.4vw,68px);max-width:16ch}
.roi-calc .head h1 em{font-style:normal;color:var(--brand-deep)}
.roi-calc .head .lede{margin-top:20px;max-width:64ch;color:var(--muted);font-size:16.5px;line-height:1.6}
.roi-calc .stamp{margin-top:16px;display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap;
  color:var(--muted-2);font-family:var(--font-mono);font-size:11px;letter-spacing:.08em}
.roi-calc .stamp b{font-weight:500;color:var(--muted)}

/* ---------- layout ---------- */
.roi-calc .grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:960px){.roi-calc .grid{grid-template-columns:minmax(0,1fr)}}

.roi-calc .card{background:var(--paper);border:1px solid var(--hair);border-radius:32px;padding:clamp(22px,3vw,34px);
  box-shadow:0 18px 40px rgba(23,25,23,.06)}
.roi-calc .card + .card{margin-top:18px}
.roi-calc .card h2{font-size:clamp(23px,2.2vw,27px)}
.roi-calc .card .sub{color:var(--muted);font-size:15px;margin-top:8px;margin-bottom:20px}

/* ---------- fields ---------- */
.roi-calc .field{padding:18px 0;border-top:1px solid var(--hair)}
.roi-calc .field:first-of-type{border-top:0;padding-top:4px}
.roi-calc .flabel{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.roi-calc .flabel .t{font-weight:700;font-size:15.5px}
.roi-calc .flabel .v{font-family:var(--font-mono);font-size:14px;color:var(--brand-deep);font-weight:500}
.roi-calc .hint{color:var(--muted);font-size:13.5px;margin-top:9px;line-height:1.55}

.roi-calc .chips{display:flex;flex-wrap:wrap;gap:8px}
.roi-calc .chip{border:1px solid var(--hair);background:var(--card);color:var(--ink);border-radius:999px;
  padding:11px 17px;font-size:14.5px;font-weight:600;cursor:pointer;transition:.15s}
.roi-calc .chip:hover{border-color:var(--brand)}
.roi-calc .chip[aria-pressed="true"]{background:var(--deep);color:var(--on-deep);border-color:var(--deep)}
.roi-calc .chip:focus-visible,.roi-calc .seg button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.roi-calc .row{display:flex;gap:12px;align-items:center}
.roi-calc input[type=range]{-webkit-appearance:none;appearance:none;flex:1;width:100%;height:6px;border-radius:999px;
  background:var(--hair);outline:none;outline-offset:4px;margin:0;cursor:pointer}
.roi-calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;
  border-radius:50%;background:var(--paper);border:7px solid var(--brand);box-shadow:0 2px 8px rgba(23,25,23,.25)}
.roi-calc input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--paper);
  border:7px solid var(--brand);box-shadow:0 2px 8px rgba(23,25,23,.25)}
.roi-calc input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:transparent}
.roi-calc input[type=range]:focus-visible{outline:2px solid var(--brand)}
/* Every slider is paired with a number box: WCAG 2.2 SC 2.5.7 (no
   dragging-only interaction) and precision, in one component. */
.roi-calc input[type=number],.roi-calc input[type=email],.roi-calc select{font:inherit;font-size:16px;
  padding:13px 15px;border:1px solid var(--hair);border-radius:16px;background:var(--paper);color:var(--ink);min-width:0}
.roi-calc input[type=number]{width:120px;text-align:right;font-variant-numeric:tabular-nums}
.roi-calc select{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:100%;cursor:pointer;
  font-weight:700;padding:15px 44px 15px 16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5L7 7.5L13 1.5' stroke='%23171917' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center}
.roi-calc input:focus-visible,.roi-calc select:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-color:var(--brand)}

.roi-calc .seg{display:flex;border:1px solid var(--hair);border-radius:16px;overflow:hidden;background:var(--paper)}
.roi-calc .seg button{flex:1;border:0;background:none;padding:13px 8px;font-size:14.5px;cursor:pointer;font-weight:600}
.roi-calc .seg button[aria-pressed="true"]{background:var(--deep);color:var(--on-deep)}

.roi-calc .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.roi-calc .two{grid-template-columns:1fr}}

/* source disclosure */
.roi-calc .src{border:0;background:none;padding:0 0 0 6px;color:var(--muted-2);cursor:pointer;font-size:13px;line-height:1;
  text-decoration:underline;text-underline-offset:2px;text-decoration-style:dotted}
.roi-calc .src:hover{color:var(--brand-deep)}
.roi-calc .src:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:3px}
.roi-calc .srcbox{margin-top:10px;padding:12px 14px;background:var(--card);border:1px solid var(--hair);
  border-left:3px solid var(--brand);border-radius:12px;font-size:13px;color:var(--muted);line-height:1.6}
.roi-calc .srcbox b{color:var(--ink);font-weight:700}
.roi-calc .conf{display:inline-block;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  padding:2px 6px;border-radius:5px;margin-left:6px;vertical-align:1px}
.roi-calc .conf.HIGH{background:var(--conf-hi-bg);color:var(--conf-hi-ink)}
.roi-calc .conf.MED{background:var(--conf-med-bg);color:var(--conf-med-ink)}
.roi-calc .conf.LOW{background:var(--conf-low-bg);color:var(--conf-low-ink)}
.roi-calc .warn{margin-top:14px;background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:14px;
  padding:13px 15px;font-size:13px;color:var(--warn);line-height:1.6}
.roi-calc .warn b{color:var(--warn-ink);font-weight:700}
/* Same box, quieter voice: where the cap does not bind this is context, not a
   compliance warning, and dressing it in amber would teach people to ignore
   the amber that matters. */
.roi-calc .warn.soft{background:var(--card);border-color:var(--hair);color:var(--muted)}
.roi-calc .warn.soft b{color:var(--ink)}

/* ---------- cost groups ----------
   A checkbox, a price and a sentence saying what unticking it means. The
   price stays visible when the box is clear: an unticked group is a cost the
   site already carries, not a cost that vanished. */
.roi-calc .grp{list-style:none;margin:0;padding:0}
.roi-calc .grp li{border-top:1px solid var(--hair)}
.roi-calc .grp li:first-child{border-top:0}
.roi-calc .grp input[type=checkbox]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.roi-calc .grp label{display:grid;grid-template-columns:22px 1fr auto;gap:4px 12px;align-items:baseline;
  padding:13px 0;cursor:pointer}
.roi-calc .grp .gt{font-weight:700;font-size:15px;grid-column:2}
.roi-calc .grp .gn{grid-column:3;font-family:var(--font-mono);font-size:14px;color:var(--brand-deep);font-weight:500;white-space:nowrap}
.roi-calc .grp .gs{grid-column:2 / -1;color:var(--muted);font-size:13px;line-height:1.55}
/* The box itself, drawn on the label so the whole row is the target. */
.roi-calc .grp label::before{content:'';grid-column:1;grid-row:1 / span 2;align-self:start;
  width:22px;height:22px;border:2px solid var(--hair);border-radius:7px;background:var(--paper);
  transition:background .12s,border-color .12s}
.roi-calc .grp input:checked + label::before{background:var(--brand-deep) no-repeat center/13px 10px;border-color:var(--brand-deep);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10' viewBox='0 0 13 10' fill='none'%3E%3Cpath d='M1 5l4 4L12 1' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.roi-calc .grp input:focus-visible + label::before{outline:2px solid var(--brand);outline-offset:3px}
.roi-calc .grp label:hover::before{border-color:var(--brand)}
/* Locked on. Still reads as ticked, but nothing about it invites a click. */
.roi-calc .grp input:disabled + label{cursor:default}
.roi-calc .grp input:disabled + label:hover::before{border-color:var(--brand-deep)}
.roi-calc .grp input:disabled + label::before{opacity:.65}
@media (max-width:480px){
  .roi-calc .grp label{grid-template-columns:22px 1fr}
  .roi-calc .grp .gn{grid-column:2;grid-row:2}
  .roi-calc .grp .gs{grid-row:3}
}

/* ---------- results ---------- */
.roi-calc .results{position:sticky;top:92px}
@media (max-width:960px){.roi-calc .results{position:static}}
/* Deliberately dark, not the competitor's bright-green card. */
.roi-calc .deepcard{background:var(--deep);color:var(--on-deep);border-radius:32px;padding:clamp(22px,3vw,32px);
  box-shadow:var(--shadow);background-image:radial-gradient(120% 90% at 100% 0%,rgba(182,255,80,.10),transparent 55%)}
.roi-calc .deepcard .k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-deep-muted)}
.roi-calc .big{font-family:var(--font-display);font-size:clamp(40px,5vw,64px);font-weight:800;letter-spacing:-.035em;
  line-height:1;margin:10px 0 4px;font-variant-numeric:tabular-nums}
.roi-calc .big.never{font-size:clamp(22px,2.6vw,30px);line-height:1.15}
.roi-calc .bigsub{color:var(--on-deep-muted);font-size:14px;line-height:1.55}
.roi-calc .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:22px}
.roi-calc .tile{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:15px 17px}
.roi-calc .tile .k{font-size:10px}
.roi-calc .tile .n{font-family:var(--font-display);font-size:24px;font-weight:800;margin-top:6px;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.roi-calc .finrow{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.14);font-size:13px;color:var(--on-deep-muted);font-variant-numeric:tabular-nums}
.roi-calc .finrow b{color:var(--on-deep);font-weight:700}

/* The falsifiable sentence. The most persuasive line on the page, because it
   is the only claim the buyer can check against their own car park. */
.roi-calc .be{margin-top:18px;background:rgba(182,255,80,.10);border:1px solid rgba(182,255,80,.26);
  border-radius:18px;padding:15px 16px;font-size:14px;line-height:1.65}
.roi-calc .be b{color:var(--fluoro);font-weight:700}

.roi-calc .cta{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:22px}
.roi-calc .btn{border-radius:999px;padding:15px 20px;font-size:15px;font-weight:700;cursor:pointer;
  border:1px solid transparent;text-decoration:none;text-align:center;display:block;line-height:1.25}
.roi-calc .btn.p{background:var(--fluoro);color:#0A2A12}
.roi-calc .btn.s{background:transparent;color:var(--on-deep);border-color:rgba(255,255,255,.6)}
.roi-calc .btn.s:hover{background:rgba(255,255,255,.12)}
.roi-calc .btn.p:hover{filter:brightness(1.05)}
.roi-calc .btn:focus-visible{outline:2px solid var(--fluoro);outline-offset:3px}

.roi-calc .chartwrap{margin-top:22px}
.roi-calc .chartwrap .k{margin-bottom:10px}
.roi-calc svg{display:block;width:100%;height:auto;overflow:visible}
.roi-calc .axis{font-family:var(--font-mono);font-size:9px;fill:var(--on-deep-muted);letter-spacing:.06em}

.roi-calc .scen{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}
.roi-calc .scen div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:12px}
.roi-calc .scen .k{font-size:9.5px}
.roi-calc .scen .n{font-family:var(--font-display);font-size:18px;font-weight:800;margin-top:5px;font-variant-numeric:tabular-nums}
.roi-calc .scen div.mid{background:rgba(182,255,80,.12);border-color:rgba(182,255,80,.26)}

/* ---------- the one-pager ask ---------- */
.roi-calc .lead{margin-top:18px;background:var(--card);border:1px solid var(--hair);border-radius:32px;padding:clamp(22px,3vw,34px)}
.roi-calc .lead h2{font-size:clamp(21px,2vw,25px)}
.roi-calc .leadrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.roi-calc .leadrow input[type=email]{flex:1 1 240px}
.roi-calc .leadbtn{border-radius:999px;padding:14px 26px;font-size:15px;font-weight:700;cursor:pointer;
  border:1px solid var(--brand-deep);background:var(--brand-deep);color:#fff;line-height:1.25}
.roi-calc .leadbtn:hover{background:var(--brand)}
.roi-calc .leadbtn:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.roi-calc .leadnote{margin-top:12px;color:var(--muted);font-size:13px;line-height:1.6}
.roi-calc .leadmsg{margin-top:12px;font-size:14px;font-weight:600;color:var(--brand-deep)}
.roi-calc .leadmsg.bad{color:#9A3412}
.roi-calc .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* `background` is declared, and must stay declared: both host pages carry a
   bare `footer{background:var(--ink)}` rule for the site footer, and a bare
   element selector also matches THIS footer. Without an own background the
   disclaimer rendered as its own dark text on that near-black band — a 1:1
   contrast ratio, i.e. invisible. The widget owns its surface; it does not
   inherit the page's chrome. */
.roi-calc .foot{background:transparent;border-top:1px solid var(--hair);margin-top:26px;padding:24px 0 0;
  color:var(--muted-2);font-size:13px;line-height:1.7}
.roi-calc .sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- mobile sticky (standalone page only — the homepage omits #mbar,
   because a position:fixed bar there would float over the whole site) ------- */
.roi-calc-mbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#061A0E;color:#EAF3EC;
  display:none;padding:10px 16px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -6px 24px rgba(6,26,14,.22)}
.roi-calc-mbar .in{display:flex;justify-content:space-between;align-items:center;gap:12px;max-width:1400px;margin:0 auto}
.roi-calc-mbar .n{font-family:'Cabinet Grotesk','Satoshi',sans-serif;font-size:20px;font-weight:800;
  font-variant-numeric:tabular-nums;line-height:1.15}
.roi-calc-mbar .k{font-family:'DM Mono',ui-monospace,monospace;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(234,243,236,.62)}
.roi-calc-mbar .btn{border-radius:999px;padding:11px 18px;font-size:14px;font-weight:700;text-decoration:none;
  background:#B6FF50;color:#0A2A12;white-space:nowrap}
@media (max-width:960px){.roi-calc-mbar{display:block}}

@media (prefers-reduced-motion: reduce){.roi-calc *{transition:none!important;animation:none!important}}

/* ---------- print: one A4 page, disclosures expanded ----------------------
   The two-column grid is KEPT in print. Stacking it, which is the obvious
   thing to do, is what pushes this onto a second page — and the whole point
   of the printed sheet is that it is one page someone can put in front of a
   board. Sizes below are tuned against 794 x 1123 px (A4 at 96dpi). */
@media print{
  .roi-calc{font-size:8.5px;line-height:1.38}
  .roi-calc .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px}
  .roi-calc .results{position:static}
  /* The lede is web framing; on a printed sheet the headline and the numbers
     carry it, and the room it frees is what keeps the worst case on one page. */
  .roi-calc .cta,.roi-calc .src,.roi-calc .lead,.roi-calc .stamp,.roi-calc .head .lede,
  .roi-calc-mbar{display:none!important}
  .roi-calc .head{padding:0 0 7px}
  .roi-calc .head h1{font-size:19px}
  .roi-calc .card,.roi-calc .deepcard{break-inside:avoid;box-shadow:none;border:1px solid #ccc;border-radius:6px;
    padding:8px;background:#fff!important;color:#000!important}
  .roi-calc .card + .card{margin-top:7px}
  .roi-calc .card h2{font-size:12px}
  .roi-calc .card .sub{font-size:8px;margin:3px 0 6px}
  .roi-calc .field{padding:4px 0}
  .roi-calc .flabel{margin-bottom:4px}
  .roi-calc .flabel .t{font-size:9px}
  .roi-calc .hint{font-size:7.5px;margin-top:3px}
  .roi-calc .chip{padding:3px 8px;font-size:8.5px}
  .roi-calc .grp label{padding:4px 0;gap:0 8px}
  .roi-calc .grp .gt{font-size:9px}
  .roi-calc .grp .gn{font-size:9px}
  /* The "untick if your site already has it" guidance is for the interactive
     page. On paper the group name and its price are the whole point. */
  .roi-calc .grp .gs{display:none}
  .roi-calc .grp label::before{width:11px;height:11px;border-width:1px;border-radius:3px;background-size:8px 6px}
  .roi-calc .seg button{padding:4px}
  .roi-calc input[type=number],.roi-calc select{padding:4px 7px;font-size:9px}
  .roi-calc .deepcard .k,.roi-calc .bigsub,.roi-calc .finrow{color:#444!important}
  .roi-calc .big{font-size:22px;margin:2px 0 2px}
  .roi-calc .tile,.roi-calc .scen div,.roi-calc .be{background:#f6f6f4!important;border-color:#ddd!important}
  .roi-calc .tile,.roi-calc .scen div{padding:6px 8px;border-radius:8px}
  .roi-calc .tile .n{font-size:14px;margin-top:2px}
  .roi-calc .scen .n{font-size:11px}
  .roi-calc .tiles,.roi-calc .scen{margin-top:7px;gap:6px}
  .roi-calc .finrow{margin-top:7px;padding-top:7px;font-size:8.5px}
  .roi-calc .chartwrap{margin-top:7px}
  .roi-calc .chartwrap svg{max-height:84px}
  .roi-calc .be{margin-top:7px;padding:7px;font-size:9px;border-radius:8px}
  .roi-calc .be b{color:#0A6B2C!important}
  /* Expanded on purpose: the sources are the reason the sheet is believable. */
  .roi-calc .srcbox{display:block!important;margin-top:4px;padding:5px 7px;font-size:7px;border-radius:6px}
  .roi-calc .foot{margin-top:7px;padding-top:5px;font-size:6.8px;color:#555!important;line-height:1.4}
  .roi-calc .foot p+p{margin-top:4px!important}
}