:root{
    --ink:#16140f;
    --paper:#f4efe4;
    --paper2:#ece4d3;
    --diesel:#b8772a;       /* amber / diesel */
    --diesel-dark:#8a5418;
    --volt:#1faa6e;         /* electric green */
    --volt-dark:#137a4d;
    --volt-light:#d7f2e5;
    --line:#d8cdb6;
    --muted:#736b58;
    --road:#26231c;
    --sans:'Barlow',-apple-system,sans-serif;
    --cond:'Barlow Condensed',sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%}
  body{
    font-family:var(--sans);
    background:var(--paper);
    color:var(--ink);
    line-height:1.5;
    overflow-x:hidden;
  }
  .wrap{max-width:760px;margin:0 auto;padding:0 18px}

  /* ---------- TOP BAR ---------- */
  .topbar{
    background:var(--road);
    color:#f4efe4;
    padding:10px 0;
    border-bottom:4px solid var(--diesel);
  }
  .topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .brand{font-family:var(--cond);font-weight:900;font-size:22px;letter-spacing:.02em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
  .brand .plug{color:var(--volt)}
  .brand .be{font-size:12px;background:var(--diesel);color:#fff;padding:2px 7px;border-radius:4px;font-weight:700;letter-spacing:.05em}
  .cfo-link{font-size:12.5px;color:#cdbf9f;text-decoration:none;border:1px solid #4a4438;padding:6px 11px;border-radius:20px;white-space:nowrap;transition:.15s}
  .cfo-link:hover{background:#33302a;color:#fff}

  /* ---------- HERO ---------- */
  .hero{
    background:
      radial-gradient(120% 80% at 80% 0%, rgba(31,170,110,.10), transparent 60%),
      linear-gradient(180deg,var(--paper),var(--paper2));
    padding:38px 0 26px;
    position:relative;
  }
  .hero h1{
    font-family:var(--cond);
    font-weight:900;
    font-size:clamp(34px,9vw,58px);
    line-height:.96;
    letter-spacing:-.01em;
    text-transform:uppercase;
  }
  .hero h1 .hl{color:var(--volt-dark);position:relative;white-space:nowrap}
  .hero h1 .hl::after{content:"";position:absolute;left:-2px;right:-2px;bottom:4px;height:.32em;background:var(--volt-light);z-index:-1;transform:rotate(-1deg)}
  .hero p.lead{font-size:17px;color:#534c3d;margin-top:14px;max-width:54ch}
  .hero .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
  .tag{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:13px;background:#fff;border:1.5px solid var(--line);padding:5px 11px;border-radius:20px}
  .tag.green{background:var(--volt-light);border-color:#bfe6d3;color:var(--volt-dark)}

  /* ---------- BIG ANSWER CARD ---------- */
  .answer{
    margin:22px auto 0;
    background:var(--road);
    color:#fff;
    border-radius:18px;
    padding:24px 22px 22px;
    box-shadow:0 18px 40px -18px rgba(0,0,0,.5);
    position:relative;
    overflow:hidden;
  }
  .answer::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent,transparent 38px,rgba(255,255,255,.025) 38px,rgba(255,255,255,.025) 40px);pointer-events:none}
  .answer .klabel{font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;font-size:13px;color:#b9ad92;font-weight:700}
  .answer .verdict{font-family:var(--cond);font-weight:900;font-size:clamp(40px,12vw,72px);line-height:.95;margin:4px 0 2px}
  .answer .verdict.win{color:var(--volt)}
  .answer .verdict.lose{color:var(--diesel)}
  .answer .sub{font-size:15.5px;color:#e8e0cf;max-width:46ch}
  .answer .sub b{color:#fff}

  .bigrow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
  .bigcell{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:13px 14px}
  .bigcell .t{font-family:var(--cond);text-transform:uppercase;letter-spacing:.08em;font-size:11.5px;color:#b9ad92;font-weight:700}
  .bigcell .v{font-family:var(--cond);font-weight:800;font-size:30px;line-height:1.05;margin-top:2px}
  .bigcell .v.green{color:var(--volt)}
  .bigcell .u{font-size:14px;color:#cfc6b2;font-weight:600}

  /* ---------- SLIDERS ---------- */
  .controls{margin:26px auto 0}
  .controls h2,.section h2{font-family:var(--cond);font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:23px;margin-bottom:3px}
  .controls .hint{color:var(--muted);font-size:14px;margin-bottom:16px}
  .ctrl{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:15px 16px;margin-bottom:12px}
  .ctrl .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:9px}
  .ctrl .name{font-weight:700;font-size:15.5px}
  .ctrl .val{font-family:var(--cond);font-weight:800;font-size:22px;color:var(--diesel-dark)}
  .ctrl .val .un{font-size:13px;color:var(--muted);font-weight:600}
  input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:8px;background:linear-gradient(90deg,var(--diesel) 0%,var(--diesel) var(--p,50%),#e7dcc6 var(--p,50%),#e7dcc6 100%);outline:none}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:26px;width:26px;border-radius:50%;background:#fff;border:3px solid var(--diesel-dark);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.25)}
  input[type=range]::-moz-range-thumb{height:26px;width:26px;border-radius:50%;background:#fff;border:3px solid var(--diesel-dark);cursor:pointer}
  .seg{display:flex;gap:7px;flex-wrap:wrap}
  .seg button{flex:1;min-width:64px;font-family:var(--sans);font-weight:600;font-size:14px;padding:10px 8px;border:1.5px solid var(--line);background:#fff;border-radius:10px;cursor:pointer;transition:.12s;color:var(--ink)}
  .seg button.on{background:var(--road);color:#fff;border-color:var(--road)}
  .seg button:active{transform:scale(.97)}

  /* ---------- COMPARE STRIP ---------- */
  .section{margin:30px auto 0}
  .vs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
  .pump,.plug{border-radius:16px;padding:18px 17px;border:2px solid}
  .pump{background:#fbf3e6;border-color:#ecc99a}
  .plug{background:var(--volt-light);border-color:#bfe6d3}
  .vs .ico{font-size:30px;line-height:1}
  .vs .who{font-family:var(--cond);font-weight:800;font-size:20px;text-transform:uppercase;margin:6px 0 10px}
  .pump .who{color:var(--diesel-dark)}
  .plug .who{color:var(--volt-dark)}
  .vs .big{font-family:var(--cond);font-weight:900;font-size:34px;line-height:1}
  .vs .big .un{font-size:14px;color:var(--muted);font-weight:600}
  .vs .lab{font-size:13px;color:var(--muted);margin-top:2px}
  .vs ul{list-style:none;margin-top:12px;font-size:13.5px}
  .vs li{display:flex;justify-content:space-between;padding:5px 0;border-top:1px dashed rgba(0,0,0,.12)}
  .vs li span:last-child{font-weight:700}

  /* ---------- WHERE MONEY GOES ---------- */
  .bars{margin-top:8px}
  .barrow{margin-bottom:13px}
  .barrow .lbl{display:flex;justify-content:space-between;font-size:14px;margin-bottom:5px}
  .barrow .lbl b{font-weight:700}
  .bartrack{position:relative;height:30px;background:#e9ddc6;border-radius:7px;overflow:hidden;display:flex}
  .barfill{height:100%;display:flex;align-items:center;padding:0 8px;font-size:12.5px;font-weight:700;color:#fff;white-space:nowrap}
  .barfill.d{background:var(--diesel)}
  .barfill.e{background:var(--volt)}
  .barcap{font-size:12px;color:var(--muted);margin-top:7px}

  /* ---------- PAYBACK ---------- */
  .payback{margin-top:8px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:18px}
  .payback .headline{font-family:var(--cond);font-weight:800;font-size:21px;text-transform:uppercase}
  .payyears{font-family:var(--cond);font-weight:900;font-size:52px;color:var(--volt-dark);line-height:1}
  .paytrack{display:flex;gap:4px;margin-top:14px}
  .payyear{flex:1;height:34px;border-radius:6px;background:#e9ddc6;display:flex;align-items:center;justify-content:center;font-family:var(--cond);font-weight:700;font-size:13px;color:#9b8e72}
  .payyear.paid{background:var(--volt);color:#fff}
  .payyear.partial{background:linear-gradient(90deg,var(--volt) 50%,#e9ddc6 50%);color:#fff}

  /* ---------- PLAIN FAQ ---------- */
  .faq{margin-top:10px}
  details.q{background:#fff;border:1.5px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
  details.q summary{cursor:pointer;list-style:none;padding:15px 16px;font-weight:700;font-size:15.5px;display:flex;justify-content:space-between;align-items:center;gap:12px}
  details.q summary::-webkit-details-marker{display:none}
  details.q summary::after{content:"+";font-family:var(--cond);font-size:24px;color:var(--diesel);font-weight:800;transition:.2s}
  details.q[open] summary::after{transform:rotate(45deg)}
  details.q .a{padding:0 16px 16px;font-size:14.5px;color:#4f4838}
  details.q .a b{color:var(--ink)}

  /* ---------- CFO CALLOUT ---------- */
  .cfo-callout{margin:28px auto 0;background:linear-gradient(135deg,#2a2620,#3b362c);color:#f4efe4;border-radius:16px;padding:22px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
  .cfo-callout .txt{flex:1;min-width:200px}
  .cfo-callout h3{font-family:var(--cond);font-weight:800;font-size:22px;text-transform:uppercase}
  .cfo-callout p{font-size:14px;color:#cdbf9f;margin-top:4px}
  .cfo-callout a.btn{background:var(--volt);color:#06281a;font-weight:800;font-family:var(--cond);font-size:17px;text-transform:uppercase;letter-spacing:.03em;text-decoration:none;padding:13px 20px;border-radius:10px;white-space:nowrap;transition:.15s}
  .cfo-callout a.btn:hover{background:#27c082;transform:translateY(-1px)}

  /* ---------- FOOTER ---------- */
  footer{margin-top:34px;background:var(--road);color:#a99e85;padding:24px 0 30px;font-size:12.5px}
  footer .wrap{display:flex;flex-direction:column;gap:8px}
  footer b{color:#e8e0cf}
  footer a{color:var(--volt);text-decoration:none}

  .disc{font-size:11.5px;color:#9b8e72;margin-top:14px;line-height:1.5}

  @media(max-width:560px){
    .bigrow{grid-template-columns:1fr 1fr}
    .vs{grid-template-columns:1fr}
    .answer .verdict{font-size:46px}
    /* the brand + the nowrap CFO pill together exceeded a 375px viewport and
       pushed the whole page sideways; shorten the pill instead of wrapping it */
    .topbar .wrap{gap:8px}
    .brand{font-size:19px}
    .cfo-link{font-size:11.5px;padding:5px 9px}
    .cfo-link .cfo-long{display:none}
  }
  @media(max-width:430px){
    /* the highlighted headline is white-space:nowrap, so at 34px it was 358px wide and
       pushed past a phone viewport; scale it down rather than break the highlight bar */
    .hero h1{font-size:clamp(25px,7.6vw,34px)}
  }
  @media(max-width:400px){
    /* smallest phones: brand (238px) + pill (93px) still exceeded the bar */
    .wrap{padding:0 12px}
    .brand{font-size:17px;gap:5px}
    .brand .be{font-size:10px;padding:1px 5px}
    #ver-badge{display:none}
    .cfo-link{font-size:11px;padding:5px 8px}
  }