/* =========================================
   EV Calculator India – Main CSS
   Theme: Dark (style.css colors as base)
   ========================================= */
:root{
  --bg:#f7fafc; --card:#ffffff; --card2:#f7fafc; --text:#1a202c; --dim:#718096;
  --line:rgba(15,23,42,.09); --line2:rgba(15,23,42,.16);
  --green:#16a34a; --green2:#15803d; --cyan:#2563eb; --red:#dc2626; --amber:#c05621;
  --shadow:0 12px 28px rgba(15,23,42,.08); --shadow2:0 6px 16px rgba(15,23,42,.06); --radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);min-height:100vh;
  background:
    radial-gradient(circle at 14% 0%,rgba(22,163,74,.06),transparent 42%),
    radial-gradient(circle at 86% 10%,rgba(37,99,235,.05),transparent 42%),
    linear-gradient(180deg,#ffffff 0%,#f7fafc 100%);
  padding:0 0 56px;
}
/* ============================
   Responsive Image Utility
   ============================ */
.img-responsive {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}

/* ---- NAV ---- */
.site-nav{
  position:sticky;top:0;z-index:999;
  background:rgba(255,255,255,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{
  max-width:92%;margin:0 auto;padding:0 18px;
  display:flex;align-items:center;gap:8px;height:58px;
}
.nav-brand{
  color:var(--green);font-size:17px;font-weight:900;text-decoration:none;
  white-space:nowrap;margin-right:auto;letter-spacing:-.3px;
}
.nav-brand:hover{color:var(--green2)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-link{
  color:var(--dim);text-decoration:none;font-size:15px;font-weight:700;
  padding:8px 12px;border-radius:8px;white-space:nowrap;
  transition:color .15s ease,background .15s ease;
}
.nav-link:hover,.nav-link.active{color:var(--text);background:rgba(15,23,42,.045)}
.nav-dropdown{position:relative;}
.nav-dropdown-btn{
  display:inline-flex;align-items:center;gap:4px;
  background:none;border:none;cursor:pointer;
  color:var(--dim);font-size:15px;font-weight:700;
  padding:8px 12px;border-radius:8px;white-space:nowrap;
  transition:color .15s ease,background .15s ease;
}
.nav-dropdown-btn:hover,.nav-dropdown-btn.open{color:var(--text);background:rgba(15,23,42,.045)}
/* Mega menu: right-anchored so it never overflows the right edge of the viewport,
   width capped to viewport so it never overflows the left edge either,
   scrolls internally if the content is taller than the viewport. */
.nav-dropdown-menu{
  display:none;position:absolute;top:calc(100% + 8px);right:0;left:auto;
  background:var(--card);border:1px solid var(--line2);border-radius:14px;
  padding:14px;width:min(880px,calc(100vw - 32px));
  max-height:calc(100vh - 90px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  box-shadow:var(--shadow);z-index:1000;
}
.nav-dropdown-menu.open{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px 14px;
  animation:megamenuIn .16s ease;
}
.nav-dropdown-menu a{
  display:flex;align-items:flex-start;gap:8px;
  padding:9px 10px;border-radius:9px;
  color:var(--dim);text-decoration:none;font-size:14px;font-weight:600;line-height:1.35;
  transition:color .13s ease,background .13s ease;
}
.nav-dropdown-menu a:hover{color:var(--text);background:rgba(15,23,42,.05)}
@keyframes megamenuIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* Tablet: mega menu narrows to 2 columns and a smaller panel so it fits mid-size viewports */
@media(max-width:1024px) and (min-width:769px){
  .nav-dropdown-menu{width:min(600px,calc(100vw - 32px))}
  .nav-dropdown-menu.open{grid-template-columns:repeat(2,1fr)}
}
.nav-toggle{
  display:none;background:none;border:1px solid var(--line2);color:var(--dim);
  padding:6px 10px;border-radius:8px;cursor:pointer;font-size:18px;
}

/* ---- LAYOUT ---- */
.wrap{max-width:92%;margin:0 auto;padding:18px 16px 0}
.page-wrap{max-width:82%;margin:0 auto;padding:24px 16px 0}

/* ---- HERO ---- */
.hero{text-align:center;padding:28px 10px 12px}
.hero h1{
  margin:0 0 10px;font-size:clamp(29px,5.6vw,47px);line-height:1.05;font-weight:900;letter-spacing:-.7px;
  background:linear-gradient(90deg,var(--green),var(--cyan));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero p{margin:0;color:var(--dim);font-size:15.5px;line-height:1.6;max-width:85%;margin:0 auto}

/* ---- CARDS ---- */
.card{
  background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow);margin-top:18px;
}
.card-title{margin:0 0 6px;display:flex;align-items:center;gap:8px;font-size:19px;font-weight:850}
.card-sub{margin:0 0 18px;color:var(--dim);font-size:14.5px;line-height:1.55}

/* ---- CALCULATOR FORM ---- */
.calc-card{
  background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow);margin-top:20px;
}
.calc-title{
  font-size:clamp(20px,3.4vw,27px);font-weight:900;letter-spacing:-.4px;
  background:linear-gradient(90deg,var(--green),var(--cyan));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  margin:0 0 6px;
}
.calc-sub{color:var(--dim);font-size:15px;line-height:1.6;margin:0 0 20px}
.section-label{
  display:flex;align-items:center;gap:7px;margin:22px 0 12px;
  color:var(--green);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
}
.section-label::after{content:"";height:1px;flex:1;background:var(--line)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:8px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:8px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13.5px;color:var(--dim);font-weight:700;line-height:1.4}
.field input,.field select,.field textarea{
  appearance:none;background:#eef2f7;color:var(--text);
  border:1px solid var(--line);padding:11px 12px;border-radius:11px;font-size:16px;outline:none;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:rgba(22,163,74,.7);box-shadow:0 0 0 3px rgba(22,163,74,.12)
}
.field select option{background:var(--card);color:var(--text)}
.field .hint{font-size:13px;color:var(--dim);margin-top:2px;line-height:1.4}
.btn-calc{
  width:100%;margin-top:14px;padding:14px 14px;border:none;border-radius:12px;cursor:pointer;
  color:#04150d;font-size:17px;font-weight:900;
  background:linear-gradient(90deg,var(--green),var(--cyan));
  box-shadow:0 10px 24px rgba(22,163,74,.14);transition:transform .14s ease,box-shadow .14s ease
}
.btn-calc:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(22,163,74,.22)}
.tab-btn a {
    text-decoration: none !important;color: #fff;}

/* ---- RESULTS ---- */
.results{margin-top:20px;display:grid;gap:10px;animation:fadein .24s ease}
.results.hidden{display:none}
.stat{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#eef2f7;border:1px solid var(--line);border-radius:12px;padding:12px 16px}
.stat .lbl{font-size:14.5px;color:var(--dim);line-height:1.35}
.stat .val{font-size:17px;font-weight:800;text-align:right}
.stat.highlight{border-color:rgba(22,163,74,.34);background:linear-gradient(90deg,rgba(22,163,74,.10),rgba(37,99,235,.06))}
.stat.highlight .val{font-size:19px;background:linear-gradient(90deg,var(--green),var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat.danger .val{color:var(--red)}
.note{margin-top:10px;color:var(--dim);font-size:13.5px;line-height:1.55}
.disclaimer{
  background:rgba(192,86,33,.07);border:1px solid rgba(192,86,33,.24);
  border-radius:12px;padding:14px 16px;color:#92400e;font-size:14px;line-height:1.6;margin-bottom:18px;
}
.disclaimer b{color:var(--amber)}
.disclaimer ul{margin:8px 0 0;padding-left:18px}
.disclaimer li{margin-bottom:4px}

/* ---- TABLES ---- */
.scrollbox{max-height:320px;overflow:auto;border-radius:12px;border:1px solid var(--line);margin-top:16px}
table{width:100%;border-collapse:collapse;font-size:14.5px}
thead th{
  position:sticky;top:0;z-index:1;background:var(--card2);color:var(--dim);
  text-align:right;padding:9px 12px;border-bottom:1px solid var(--line);
  font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
}
thead th:first-child,tbody td:first-child{text-align:left}
tbody td{padding:9px 12px;text-align:right;border-bottom:1px solid rgba(15,23,42,.035)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:rgba(15,23,42,.025)}
.tfoot-row td,.tfoot-row th{
  font-weight:800;color:var(--green);background:rgba(22,163,74,.06);
  border-top:1px solid rgba(22,163,74,.22);
}
.savings-row td{color:var(--amber)!important;font-weight:800}

/* ---- COMPARISON TABLE ---- */
.comp-table{width:100%;border-collapse:collapse;margin-top:10px;font-size:15px}
.comp-table th,.comp-table td{padding:10px 12px;text-align:right;border-bottom:1px solid var(--line)}
.comp-table th:first-child,.comp-table td:first-child{text-align:left;color:var(--dim)}
.comp-table th{color:var(--dim);font-weight:700;font-size:13.5px;text-transform:uppercase;letter-spacing:.04em;background:var(--card2)}
.comp-table .ev-col{color:var(--green);font-weight:800}
.comp-table .fuel-col{color:var(--cyan)}
.comp-table .total-row td{font-weight:800;background:rgba(15,23,42,.035)}
.comp-table .savings-row td{color:var(--amber);font-weight:800;background:rgba(192,86,33,.06);border-top:1px solid rgba(192,86,33,.2)}

/* ---- HOME CALCULATOR GRID ---- */
.calc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:16px}
.calc-item{
  display:block;text-decoration:none;color:var(--text);
  background:linear-gradient(135deg,var(--card),var(--card2));
  border:1px solid var(--line);border-radius:14px;padding:18px;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.calc-item:hover{transform:translateY(-2px);border-color:rgba(22,163,74,.3);box-shadow:0 12px 28px rgba(0,0,0,.25)}
.calc-item .icon{font-size:27px;margin-bottom:8px;display:block}
.calc-item .name{font-size:15.5px;font-weight:800;color:var(--green);margin-bottom:4px}
.calc-item .desc{font-size:14px;color:var(--dim);line-height:1.5}

/* ---- BLOG ---- */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-top:18px}
.blog-card{
  background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid var(--line);border-radius:var(--radius);padding:22px;
  box-shadow:var(--shadow2);display:flex;flex-direction:column;gap:10px;
}
.blog-card .blog-tag{
  display:inline-block;background:rgba(22,163,74,.12);border:1px solid rgba(22,163,74,.25);
  color:var(--green);font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  padding:3px 9px;border-radius:999px;
}
.blog-card h2{font-size:18px;font-weight:800;line-height:1.4;margin:0}
.blog-card p{font-size:14.5px;color:var(--dim);line-height:1.65;margin:0;flex:1}
.blog-card .blog-meta{font-size:13px;color:var(--dim);display:flex;gap:12px;align-items:center}
.read-more{
  display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:700;
  color:var(--cyan);text-decoration:none;margin-top:auto;
  border:1px solid rgba(37,99,235,.3);padding:8px 14px;border-radius:999px;
  background:rgba(37,99,235,.07);transition:all .2s ease;
}
.read-more:hover{background:rgba(37,99,235,.14);border-color:rgba(37,99,235,.5)}

/* ---- EV COMPARE CARDS ---- */
.ev-compare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:16px}
.ev-card{
  background:#eef2f7;border:1px solid var(--line);border-radius:14px;padding:18px;
}
.ev-card h3{margin:0 0 12px;font-size:17px;color:var(--cyan);font-weight:800}
.ev-card .ev-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.ev-card .ev-row:last-child{border-bottom:none}
.ev-card .ev-row .k{color:var(--dim)}
.ev-card .ev-row .v{font-weight:700;color:var(--green)}

/* ---- FILTER GRID ---- */
.filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:14px}
.filter-block{
  background:#eef2f7;border:1px solid var(--line);border-radius:14px;padding:18px;
}
.filter-block h3{font-size:15.5px;color:var(--cyan);font-weight:800;margin:0 0 14px}
.filter-block label{display:block;font-size:13.5px;color:var(--dim);font-weight:700;margin-bottom:5px;margin-top:10px}
.filter-block label:first-of-type{margin-top:0}
.filter-block select{
  width:100%;appearance:none;background:#f7fafc;color:var(--text);
  border:1px solid var(--line);padding:10px 12px;border-radius:10px;font-size:15.5px;outline:none;
  transition:border-color .16s ease;
}
.filter-block select:focus{border-color:rgba(22,163,74,.7)}

/* ---- ANIMATIONS ---- */
@keyframes fadein{from{opacity:.25;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ---- FOOTER ---- */
.site-footer{
  text-align:center;color:var(--dim);font-size:13.5px;margin-top:40px;
  padding:20px 16px;border-top:1px solid var(--line);line-height:1.8;
}
.site-footer a{color:var(--cyan);text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.footer-nav{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}

/* ---- TOAST ---- */
.toast{
  position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(20px);
  background:rgba(8,13,24,.94);border:1px solid rgba(15,23,42,.10);color:#fff;
  padding:10px 16px;border-radius:999px;font-size:14.5px;font-weight:700;
  box-shadow:var(--shadow2);opacity:0;pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;z-index:9999;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- BREADCRUMB ---- */
.breadcrumb{font-size:14px;color:var(--dim);padding:12px 0 0;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.breadcrumb a{color:var(--cyan);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb span{color:var(--dim)}

/* =========================================
   EV vs Petrol Two-Wheeler Calculator
   ========================================= */

/* ---- layout helpers ---- */
.container{width:100%}
.main-heading{text-align:center;padding:8px 6px 4px}
.main-heading h1{
  margin:0 0 8px;font-size:clamp(24.5px,4.9vw,36px);line-height:1.15;font-weight:900;letter-spacing:-.5px;
  background:linear-gradient(90deg,var(--green),var(--cyan));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.main-heading p{margin:0;color:var(--dim);font-size:15px;line-height:1.6}

/* ---- action bar ---- */
.action-bar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:16px 0}
.action-btn{
  background:#eef2f7;border:1px solid var(--line);color:var(--text);
  font-size:14px;font-weight:700;padding:8px 14px;border-radius:999px;cursor:pointer;
  transition:border-color .15s ease,background .15s ease,transform .12s ease;
}
.action-btn:hover{border-color:rgba(22,163,74,.4);background:rgba(22,163,74,.08);transform:translateY(-1px)}

/* ---- mode tabs ---- */
.mode-tabs{display:flex;gap:8px;background:#eef2f7;border:1px solid var(--line);border-radius:14px;padding:6px;margin:12px 0}
.mode-tab{
  flex:1;background:none;border:none;color:var(--dim);cursor:pointer;
  font-size:14.5px;font-weight:800;padding:10px 8px;border-radius:10px;
  transition:background .15s ease,color .15s ease;white-space:nowrap;
}
.mode-tab:hover{color:var(--text)}
.mode-tab.active{color:#04150d;background:linear-gradient(90deg,var(--green),var(--cyan))}

/* ---- presets ---- */
.preset-section{margin-top:8px}
.preset-section h3{font-size:14px;color:var(--dim);font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.preset-buttons{display:flex;gap:8px;flex-wrap:wrap}
.preset-btn{
  background:#eef2f7;border:1px solid var(--line);color:var(--text);
  font-size:14px;font-weight:700;padding:8px 14px;border-radius:999px;cursor:pointer;
  transition:all .15s ease;
}
.preset-btn:hover{border-color:rgba(37,99,235,.4);background:rgba(37,99,235,.08)}
.preset-btn.active{border-color:transparent;color:#04150d;background:linear-gradient(90deg,var(--cyan),var(--green))}
.preset-btn.petrol-preset.active{background:linear-gradient(90deg,var(--amber),#dd6b20)}

/* ---- forms ---- */
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-bottom:8px}
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.form-group label{font-size:13.5px;color:var(--dim);font-weight:700;line-height:1.4}
.form-group .unit{color:var(--dim);font-weight:600;text-transform:none}
.form-group input[type="number"],.form-group input[type="text"],.form-group select{
  appearance:none;background:#eef2f7;color:var(--text);
  border:1px solid var(--line);padding:11px 12px;border-radius:11px;font-size:16px;outline:none;
  width:100%;transition:border-color .16s ease,box-shadow .16s ease;
}
.form-group input:focus,.form-group select:focus{
  border-color:rgba(22,163,74,.7);box-shadow:0 0 0 3px rgba(22,163,74,.12)
}
.form-group select option{background:var(--card);color:var(--text)}
.hint{display:block;font-size:13px;color:var(--dim);margin-top:2px;line-height:1.4}
.warning{display:none;font-size:13px;color:var(--amber);margin-top:4px;line-height:1.4;font-weight:700}
.warning.show{display:block}

/* ---- sliders ---- */
.slider-container{display:flex;align-items:center;gap:10px}
.slider-container input[type="range"]{
  flex:1;appearance:none;height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--green),var(--cyan));outline:none;cursor:pointer;
}
.slider-container input[type="range"]::-webkit-slider-thumb{
  appearance:none;width:18px;height:18px;border-radius:50%;
  background:#fff;border:3px solid var(--green);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.slider-container input[type="range"]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--green);cursor:pointer;
}
.slider-container select{flex:1}
.slider-value{min-width:34px;text-align:right;font-weight:800;color:var(--green);font-size:15px}
.slider-container input[type="number"]{
  background:#eef2f7;color:var(--text);border:1px solid var(--line);border-radius:9px;
  padding:7px 8px;font-size:15px;text-align:right;
}

/* ---- charging split ---- */
.charging-split{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--dim)}
.charging-split input[type="range"]{flex:1}
.split-label{min-width:78px;text-align:center;font-weight:800;color:var(--cyan)}

/* ---- toggle switch ---- */
.toggle-group{display:flex;align-items:center;gap:10px;margin-top:6px}
.toggle-switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{
  position:absolute;cursor:pointer;inset:0;background:#1a2438;border:1px solid var(--line2);
  border-radius:999px;transition:background .18s ease;
}
.toggle-slider::before{
  content:"";position:absolute;height:16px;width:16px;left:3px;top:2px;
  background:#fff;border-radius:50%;transition:transform .18s ease;
}
.toggle-switch input:checked + .toggle-slider{background:linear-gradient(90deg,var(--green),var(--cyan));border-color:transparent}
.toggle-switch input:checked + .toggle-slider::before{transform:translateX(18px)}
.toggle-label{font-size:14px;color:var(--dim);font-weight:600;line-height:1.4}

/* ---- collapsible ---- */
.collapsible-header{
  display:flex;align-items:center;justify-content:space-between;cursor:pointer;
  margin-top:22px;padding-bottom:8px;border-bottom:1px solid var(--line);
}
.collapsible-header h3{margin:0}
.chevron{color:var(--dim);transition:transform .2s ease;font-size:13.5px}
.chevron.open{transform:rotate(180deg);color:var(--green)}
.collapsible-body{
  max-height:0;overflow:hidden;transition:max-height .25s ease,opacity .2s ease;opacity:0;
}
.collapsible-body.open{max-height:1000px;opacity:1;padding-top:14px}

/* ---- generic h2/h3 inside cards ---- */
.card h2{font-size:19px;font-weight:850;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.card h3{font-size:14.5px;color:var(--green);font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}

/* ---- info box ---- */
.info-box{
  background:rgba(37,99,235,.08);border:1px solid rgba(37,99,235,.22);
  border-radius:10px;padding:10px 12px;font-size:13.5px;color:var(--dim);line-height:1.6;
}
.info-box a{color:var(--cyan)}

/* ---- results grid / KPI cards ---- */
.results-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:14px}
.result-card{
  background:#eef2f7;border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center;
}
.result-card .label{font-size:13px;color:var(--dim);font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.result-card .value{font-size:22.5px;font-weight:900;color:var(--text)}
.result-card .value.green{color:var(--green)}
.result-card .sub-label{font-size:12.5px;color:var(--dim);margin-top:6px}

/* ---- comparison / year tables (reuse table look) ---- */
.comparison-table,.year-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:480px}
.comparison-table th,.year-table th{
  background:var(--card2);color:var(--dim);text-align:right;padding:9px 12px;
  border-bottom:1px solid var(--line);font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
}
.comparison-table td,.year-table td{padding:9px 12px;text-align:right;border-bottom:1px solid rgba(15,23,42,.035)}
.comparison-table th:first-child,.comparison-table td:first-child,
.year-table th:first-child,.year-table td:first-child{text-align:left;color:var(--dim)}
.comparison-table tr:last-child td,.year-table tr:last-child td{border-bottom:none}
.comparison-table tr:hover td,.year-table tr:hover td{background:rgba(15,23,42,.025)}

/* ---- per-km bars ---- */
.per-km-bar-container{margin-top:18px;background:#eef2f7;border:1px solid var(--line);border-radius:14px;padding:16px}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.bar-row:last-of-type{margin-bottom:6px}
.bar-label{min-width:64px;font-size:14px;font-weight:700;color:var(--dim)}
.bar-track{flex:1;height:12px;border-radius:999px;background:rgba(15,23,42,.045);overflow:hidden}
.bar-fill{height:100%;border-radius:999px;transition:width .3s ease}
.bar-fill.orange{background:linear-gradient(90deg,#c05621,var(--amber))}
.bar-fill.green{background:linear-gradient(90deg,var(--green),var(--cyan))}
.bar-value{min-width:64px;text-align:right;font-weight:800;font-size:14.5px}

/* ---- verdict banner ---- */
.verdict-banner{margin-top:18px;border-radius:14px;padding:14px 16px;font-size:15px;font-weight:700;line-height:1.6}
.verdict-banner.green{background:rgba(22,163,74,.1);border:1px solid rgba(22,163,74,.3);color:var(--green2)}
.verdict-banner.amber{background:rgba(192,86,33,.1);border:1px solid rgba(192,86,33,.3);color:var(--amber)}
.verdict-banner.red{background:rgba(220,38,38,.1);border:1px solid rgba(220,38,38,.3);color:var(--red)}

/* ---- chart ---- */
.chart-container{position:relative;height:320px;margin-top:12px;background:#eef2f7;border:1px solid var(--line);border-radius:14px;padding:14px}

/* ---- share section ---- */
.share-section{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0;}
.share-btn{
  flex:1;min-width:150px;border:none;border-radius:12px;padding:12px 14px;cursor:pointer;
  font-size:15px;font-weight:800;transition:transform .14s ease,box-shadow .14s ease;
}
.share-btn.primary{color:#04150d;background:linear-gradient(90deg,var(--green),var(--cyan));box-shadow:0 10px 24px rgba(22,163,74,.14)}
.share-btn.whatsapp{color:#04150d;background:linear-gradient(90deg,#25d366,#128c7e)}
.share-btn.outline{color:var(--text);background:#eef2f7;border:1px solid var(--line2)}
.share-btn:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(0,0,0,.25)}

/* ---- footer inside card ---- */
.footer{text-align:center;color:var(--dim);font-size:13.5px;margin-top:28px;padding-top:16px;border-top:1px solid var(--line)}

/* ---- mode visibility ---- */
body.mode-scooter .journey-only,body.mode-bike .journey-only{display:none}
body.mode-journey .commute-only{display:none}

/* ---- RESPONSIVE ---- */
@media(max-width:768px){
  .nav-links{
    display:none;position:absolute;top:58px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    max-height:calc(100vh - 58px);overflow-y:auto;-webkit-overflow-scrolling:touch;
    background:rgba(255,255,255,.98);border-bottom:1px solid var(--line);padding:10px;
  }
  .nav-links.open{display:flex}
  .nav-toggle{display:block}
  .nav-dropdown{position:static;width:100%}
  .nav-dropdown-menu{
    position:static;transform:none;box-shadow:none;
    background:rgba(15,23,42,.035);border:none;border-radius:10px;
    margin-top:4px;min-width:0;max-width:100%;padding:6px;width:100%;
  }
  .nav-dropdown-menu.open{display:grid;grid-template-columns:1fr;gap:2px;width:100%}
  .nav-dropdown-btn,.nav-link{width:100%;text-align:left;padding:11px 14px;justify-content:space-between}
  .grid,.grid-2{grid-template-columns:1fr}
  .calc-card{padding:18px}
  .hero h1{font-size:27px}
  .card{padding:16px}
  .page-wrap{padding:16px 12px 0}
  .form-grid{grid-template-columns:1fr}
  .results-grid{grid-template-columns:repeat(2,1fr)}
  .mode-tab{font-size:13.5px;padding:9px 4px}
  .action-bar{gap:6px}
  .action-btn{font-size:13px;padding:7px 11px}
  .preset-buttons{gap:6px}
  .preset-btn{font-size:13px;padding:7px 11px}
  .chart-container{height:260px;padding:10px}
  .share-section{flex-direction:column}
  .share-btn{min-width:0}
}
@media(max-width:480px){
  .calc-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .ev-compare-grid,.filter-grid{grid-template-columns:1fr}
  .stat{flex-direction:column;align-items:flex-start}
  .stat .val{font-size:15.5px}
  .results-grid{grid-template-columns:1fr 1fr}
  .result-card{padding:12px}
  .result-card .value{font-size:19px}
  .mode-tabs{flex-wrap:wrap}
  .mode-tab{flex:1 1 30%}
  .bar-label{min-width:52px;font-size:13px}
  .bar-value{min-width:52px;font-size:13.5px}
  .slider-container{flex-wrap:wrap}
  .split-label{min-width:0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}


  .wrap{max-width:92%;margin:0 auto}
  .topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:4px 4px 0}
  .brand{color:var(--dim);text-decoration:none;font-size:14.5px;font-weight:700}
  .brand:hover{color:var(--text)}
  .blog-link,.share-btn,.copy-btn,.reset-btn{
    display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--cyan);
    border:1px solid rgba(56,189,248,.35);background:rgba(56,189,248,.08);
    padding:9px 14px;border-radius:999px;font-size:14.5px;font-weight:700;cursor:pointer;
    transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;
  }
  .blog-link:hover,.share-btn:hover,.copy-btn:hover,.reset-btn:hover{transform:translateY(-1px);background:rgba(56,189,248,.15);border-color:rgba(56,189,248,.58);box-shadow:0 10px 24px rgba(56,189,248,.08)}
  .hero{text-align:center;padding:18px 10px 8px}
  .hero h1{
    margin:0 0 8px; font-size:clamp(29px,5.6vw,45px); line-height:1.05; font-weight:900; letter-spacing:-.7px;
    background:linear-gradient(90deg,var(--green),var(--cyan));
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  }
  .hero p{margin:0;color:var(--dim);font-size:15.5px;line-height:1.55}
  .actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
  .section-block{
    background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-top:14px
  }
  .section-title{margin:0 0 6px;font-size:20px;font-weight:900}
  .section-sub{margin:0;color:var(--dim);font-size:14.5px;line-height:1.55}
  .tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:18px 4px 12px}
  .tab-btn{
    display:flex;align-items:center;gap:7px;padding:10px 14px;border-radius:999px;border:1px solid var(--line);
    background:rgba(17,26,43,.95);color:var(--dim);font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .2s ease;
  }
  .tab-btn:hover{border-color:var(--line2);color:var(--text);transform:translateY(-1px)}
  .tab-btn.active{color:#fff;border-color:rgba(22,163,74,.42);background:linear-gradient(135deg,rgba(22,163,74,.15),rgba(37,99,235,.14));box-shadow:0 10px 24px rgba(22,163,74,.09)}
  .panel{display:none;animation:fadein .22s ease}
  .panel.active{display:block}
  @keyframes fadein{from{opacity:.25;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
  .card{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
  .card-title{margin:0 0 5px;display:flex;align-items:center;gap:8px;font-size:19px;font-weight:850}
  .card-sub{margin:0 0 18px;color:var(--dim);font-size:14.5px;line-height:1.55}
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-bottom:8px}
  .field{display:flex;flex-direction:column;gap:6px}
  .field label{font-size:13.5px;color:var(--dim);font-weight:700}
  .field input,.field select{width: 100%;appearance:none;background:#eef2f7;color:var(--text);border:1px solid var(--line);padding:11px 12px;border-radius:11px;font-size:16px;outline:none;
    transition:border-color .16s ease,box-shadow .16s ease;
  }
  .field input:focus,.field select:focus{border-color:rgba(22,163,74,.7);box-shadow:0 0 0 3px rgba(22,163,74,.12)}
  .section-label{display:flex;align-items:center;gap:7px;margin:18px 0 10px;color:var(--green);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
  .section-label::after{content:"";height:1px;flex:1;background:var(--line)}
  .btn-calc{
    width:100%;margin-top:10px;padding:13px 14px;border:none;border-radius:12px;cursor:pointer;color:#04150d;font-size:17px;font-weight:900;
    background:linear-gradient(90deg,var(--green),var(--cyan));box-shadow:0 10px 24px rgba(22,163,74,.14);transition:transform .14s ease,box-shadow .14s ease
  }
  .btn-calc:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(22,163,74,.2)}
  .results{margin-top:18px;display:grid;gap:10px;animation:fadein .24s ease}
  .results.hidden{display:none}
  .stat{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#eef2f7;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
  .stat .lbl{font-size:14.5px;color:var(--dim);line-height:1.35}
  .stat .val{font-size:18px;font-weight:800}
  .stat.highlight{border-color:rgba(22,163,74,.34);background:linear-gradient(90deg,rgba(22,163,74,.10),rgba(37,99,235,.06))}
  .stat.highlight .val{font-size:20px;background:linear-gradient(90deg,var(--green),var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .note{margin-top:10px;color:var(--dim);font-size:13.5px;line-height:1.55}
  .disclaimer{background:rgba(192,86,33,.07);border:1px solid rgba(192,86,33,.24);border-radius:12px;padding:12px 14px;color:#92400e;font-size:14px;line-height:1.55;margin-bottom:18px}
  .disclaimer b{color:var(--amber)}
  .scrollbox{max-height:280px;overflow:auto;border-radius:10px;border:1px solid var(--line);margin-top:14px}
  table{width:100%;border-collapse:collapse;font-size:14.5px}
  thead th{position:sticky;top:0;z-index:1;background:var(--card2);color:var(--dim);text-align:right;padding:8px 10px;border-bottom:1px solid var(--line);font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
  thead th:first-child,tbody td:first-child{text-align:left}
  tbody td{padding:8px 10px;text-align:right;border-bottom:1px solid rgba(15,23,42,.035)}
  .tco-table{width:100%;border-collapse:collapse;margin-top:6px;font-size:15px}
  .tco-table th,.tco-table td{padding:10px 10px;text-align:right;border-bottom:1px solid var(--line)}
  .tco-table th:first-child,.tco-table td:first-child{text-align:left;color:var(--dim)}
  .tco-table th{color:var(--dim);font-weight:700;font-size:13.5px;text-transform:uppercase;letter-spacing:.04em}
  .tco-table .ev-col{color:var(--green);font-weight:800}
  .find-result{margin-top:18px;display:grid;gap:10px}
  .find-card{background:#eef2f7;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
  .find-card h4{margin:0 0 6px;font-size:15px;color:var(--green);display:flex;align-items:center;gap:6px}
  .find-card p{margin:0;font-size:15px;line-height:1.65;color:var(--text)}
  .faq{margin-top:18px;display:grid;gap:10px}
  .faq-item{background:#eef2f7;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
  .faq-item h3{margin:0 0 8px;font-size:15.5px}
  .faq-item p{margin:0;color:var(--dim);line-height:1.65;font-size:14.5px}
  .popular{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
  .popular a{display:block;text-decoration:none;color:var(--text);background:#eef2f7;border:1px solid var(--line);border-radius:14px;padding:14px 16px;transition:transform .15s ease,border-color .15s ease}
  .popular a:hover{transform:translateY(-1px);border-color:rgba(15,23,42,.12)}
  .popular b{display:block;margin-bottom:4px;color:var(--green)}
  footer{text-align:center;color:var(--dim);font-size:13px;margin-top:30px;line-height:1.65}
  .toast{
    position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(20px);
    background:rgba(8,13,24,.94);border:1px solid rgba(15,23,42,.10);color:#fff;padding:10px 14px;border-radius:999px;font-size:14.5px;font-weight:700;
    box-shadow:var(--shadow2);opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease;z-index:9999;max-width:min(92vw,520px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  /* ── Prevent iOS auto-zoom on input focus (font-size must be ≥16px) ── */
  @media (max-width:767px){
    .field input,.field select{font-size:18px}
  }

  /* ── Tablet (641–1019px) ── */
  @media (max-width:1019px){
    .wrap{padding:0 4px}
    .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  }

  /* ── Mobile landscape + large phones (481–640px) ── */
  @media (max-width:640px){
    body{padding:12px 10px 60px}
    .card,.section-block{padding:14px 12px;border-radius:14px}
    /* Topbar: brand left, blog right, no wrapping chaos */
    .topbar{flex-wrap:nowrap;gap:8px}
    .brand{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
    .blog-link{padding:7px 11px;font-size:13.5px;white-space:nowrap}
    /* Hero actions: wrap neatly, equal-ish width buttons */
    .actions{gap:8px}
    .copy-btn,.share-btn,.reset-btn{padding:8px 12px;font-size:13.5px;flex:1 1 auto;justify-content:center}
    /* Tabs: wrap into 3-column grid so all buttons are visible */
    .tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:14px 0 10px}
    .tab-btn{justify-content:center;text-align:center;padding:9px 6px;font-size:13px;white-space:normal;line-height:1.25;border-radius:10px}
    /* Grid: 2 columns */
    .grid{grid-template-columns:1fr 1fr;gap:10px}
    .popular{grid-template-columns:1fr 1fr;gap:10px}
    /* Stat rows */
    .stat{padding:10px 12px}
    .stat .lbl{font-size:13.5px}
    .stat .val{font-size:17px}
    .stat.highlight .val{font-size:18px}
    /* TCO table: horizontal scroll wrapper */
    .tco-table{font-size:13.5px}
    .tco-table th,.tco-table td{padding:7px 7px;font-size:13.5px}
    /* Scrollbox table: smaller text */
    .scrollbox table{font-size:13.5px}
    thead th{font-size:12.5px;padding:7px 8px}
    tbody td{padding:7px 8px}
    /* Section title */
    .section-title{font-size:18px}
    .card-title{font-size:17px}
  }

  /* ── Small phones (≤480px) ── */
  @media (max-width:480px){
    body{padding:10px 8px 60px}
    .card,.section-block{padding:12px 10px;border-radius:12px}
    /* Topbar: compact */
    .brand{max-width:110px;font-size:13px}
    .blog-link{padding:6px 10px;font-size:13px}
    /* Hero */
    .hero{padding:12px 4px 6px}
    .hero p{font-size:14.5px}
    .actions{flex-direction:row;flex-wrap:wrap}
    .copy-btn,.share-btn,.reset-btn{padding:8px 10px;font-size:13px;flex:1 1 calc(50% - 4px);min-width:0}
    /* Grid: single column */
    .grid{grid-template-columns:1fr;gap:10px}
    .popular{grid-template-columns:1fr}
    /* Stat: stack label above value */
    .stat{flex-direction:column;align-items:flex-start;gap:4px;padding:10px 12px}
    .stat .val{font-size:20px}
    .stat.highlight .val{font-size:22.5px}
    /* TCO table: make scrollable */
    .tco-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
    .tco-table{min-width:340px}
    /* Tabs: 3-column grid, compact */
    .tabs{grid-template-columns:repeat(3,1fr);gap:5px;padding:12px 0 8px}
    .tab-btn{font-size:12.5px;padding:8px 4px}
    /* Section labels */
    .section-label{font-size:12.5px}
    .find-card{padding:12px 12px}
    .faq-item{padding:12px 12px}
    footer{font-size:12.5px;padding:0 4px}
    /* Disclaimer */
    .disclaimer{font-size:13.5px;padding:10px 12px}
    /* Note */
    .note{font-size:13px}
  }

  /* ── Very small phones (≤360px) ── */
  @media (max-width:360px){
    body{padding:8px 6px 56px}
    .copy-btn,.share-btn,.reset-btn{font-size:12.5px;padding:7px 8px}
    .brand{max-width:90px}
    .hero h1{letter-spacing:-.4px}
    .tab-btn{font-size:12px;padding:7px 3px}
  }

  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
  .why-strip {
            text-align: center;
            font-size: 1.01rem;
            color: #4a5568;
            max-width: 85%;
            margin: -4px auto 20px;
            line-height: 1.55;
        }
        .why-strip strong { color: #2d3748; }
        .checklist {
            list-style: none;
            margin: 12px 0 0;
            padding: 0;
            display: grid;
            gap: 10px;
        }
        .checklist li {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            font-size: 1.01rem;
            color: #2d3748;
            padding: 10px 12px;
            background: #f7fafc;
            border-radius: 8px;
            border: 1px solid #edf2f7;
        }
        .checklist .tick {
            flex-shrink: 0;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #ebf8ff;
            color: #2b6cb0;
            font-size: 0.84rem;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-top: 1px;
        }
        .breakdown-bars .bar-row { margin-bottom: 10px; }
        .breakdown-bars .bar-label {
            min-width: 110px;
            font-size: 0.9rem;
        }
        .bar-fill.blue {
            background: linear-gradient(90deg, #63b3ed, #3182ce);
        }
        .bar-fill.teal {
            background: linear-gradient(90deg, #4fd1c5, #319795);
        }
        .toggle-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .toggle-row label.chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            background: #fff;
            cursor: pointer;
            font-size: 0.95rem;
            font-weight: 600;
            color: #4a5568;
        }
        .toggle-row label.chip:has(input:checked) {
            border-color: #2b6cb0;
            background: #ebf8ff;
            color: #2b6cb0;
        }
        .toggle-row input { accent-color: #2b6cb0; }
        .legal-note {
            font-size: 0.92rem;
            color: #4a5568;
            margin-top: 10px;
            line-height: 1.5;
        }
        #freePortableWrap[hidden] { display: none !important; }
        .kpi-hero .value { font-size: 2.07rem; }
        @media (max-width: 480px) {
            .breakdown-bars .bar-label { min-width: 72px; }
        }
            .why-strip {
            text-align: center;
            font-size: 1.01rem;
            color: #4a5568;
            max-width: 88%;
            margin: -4px auto 20px;
            line-height: 1.55;
        }
      
        .headline-compare {
            display: grid;
            grid-template-columns: 1fr auto 1fr auto 1fr;
            gap: 10px;
            align-items: center;
            max-width: 90%;
            margin: 0 auto 24px;
            padding: 14px 18px;
            background: linear-gradient(135deg, #f0fff4 0%, #ebf8ff 100%);
            border: 1px solid #c6f6d5;
            border-radius: 12px;
        }
        .headline-compare .side { text-align: center; }
        .headline-compare .side .tag {
            font-size: 0.78rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: #718096;
            margin-bottom: 2px;
        }
        .headline-compare .side .amt {
            font-size: 1.4rem;
            font-weight: 800;
            color: #276749;
        }
        .headline-compare .side.ice .amt { color: #c05621; }
        .headline-compare .vs {
            font-size: 0.81rem;
            font-weight: 700;
            color: #a0aec0;
        }
        .headline-compare .sub {
            font-size: 0.78rem;
            color: #718096;
            margin-top: 2px;
        }
        .mode-deliveries .daily-km-only { display: none; }
        .mode-dailyKm .deliveries-derived-hint { display: none; }
        .charge-swap .depot-only,
        .charge-swap .public-only,
        .charge-swap .mixed-only { display: none; }
        .charge-depot .swap-only,
        .charge-depot .public-only { display: none; }
        .charge-public .swap-only,
        .charge-public .depot-tariff-only { display: none; }
        .charge-mixed .swap-only { display: none; }
        .unit-metrics {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin: 16px 0 8px;
        }
        .unit-metrics .metric {
            background: #f7fafc;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 12px 14px;
            text-align: center;
        }
        .unit-metrics .metric .k {
            font-size: 0.81rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            color: #718096;
        }
        .unit-metrics .metric .v {
            font-size: 1.34rem;
            font-weight: 800;
            color: #2b6cb0;
            margin-top: 2px;
        }
        .unit-metrics .metric .s {
            font-size: 0.81rem;
            color: #718096;
        }
        .bar-fill.teal { background: linear-gradient(90deg, #4fd1c5, #319795); }
        @media (max-width: 768px) {
            .headline-compare {
                grid-template-columns: 1fr;
                text-align: center;
            }
            .headline-compare .vs { display: none; }
            .unit-metrics { grid-template-columns: 1fr; }
        }
         
        .why-strip {
            text-align: center;
            font-size: 1.01rem;
            color: #4a5568;
            max-width: 88%;
            margin: -4px auto 20px;
            line-height: 1.55;
        }
        .why-strip strong { color: #2d3748; }
        .headline-compare {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 12px;
            align-items: center;
            max-width: 82%;
            margin: 0 auto 24px;
            padding: 14px 18px;
            background: linear-gradient(135deg, #f0fff4 0%, #ebf8ff 100%);
            border: 1px solid #c6f6d5;
            border-radius: 12px;
        }
        .headline-compare .side {
            text-align: center;
        }
        .headline-compare .side .tag {
            font-size: 0.81rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: #718096;
            margin-bottom: 2px;
        }
        .headline-compare .side .amt {
            font-size: 1.51rem;
            font-weight: 800;
            color: #16a34a;
        }
        .headline-compare .side.ice .amt { color: #c05621; }
        .headline-compare .vs {
            font-size: 0.84rem;
            font-weight: 700;
            color: #a0aec0;
        }
        .headline-compare .sub {
            font-size: 0.81rem;
            color: #718096;
            margin-top: 2px;
        }
        .mode-erickshaw .eauto-hint { display: none; }
        .mode-eauto .erickshaw-hint { display: none; }
        .energy-swap .own-only,
        .energy-swap .ice-primary-only { display: none; }
        .energy-own .swap-only,
        .energy-own .ice-primary-only { display: none; }
        .energy-petrol .swap-only,
        .energy-petrol .own-only,
        .energy-cng .swap-only,
        .energy-cng .own-only { display: none; }
        .energy-petrol .ev-compare-only,
        .energy-cng .ev-compare-only { display: none; }
        .bar-fill.teal {
            background: linear-gradient(90deg, #4fd1c5, #319795);
        }
        .bar-fill.blue {
            background: linear-gradient(90deg, #63b3ed, #3182ce);
        }
        .kpi-hero .value { font-size: 1.96rem; }
        .breakdown-list {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .breakdown-list li {
            display: flex;
            justify-content: space-between;
            gap: 16px;
            padding: 10px 0;        
            font-size: 1.03rem;
            color: #fff;
        }
        .breakdown-list li:last-child { border-bottom: none; }
        .breakdown-list .muted { color: #718096; }
        .breakdown-list .final {
            font-weight: 700;
            font-size: 1.18rem;
            color: #2b6cb0;
            border-top: 2px solid #ebf8ff;
            margin-top: 4px;
            padding-top: 14px;
        }
        .breakdown-list .neg { color: #c53030; }
        .breakdown-list .pos { color: #16a34a; }
        .two-col-results {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-top: 16px;
        }
        @media (max-width: 768px) {
            .headline-compare {
                grid-template-columns: 1fr;
                text-align: center;            }
            .headline-compare .vs { display: none; }
            .two-col-results { grid-template-columns: 1fr; }
        }
   
@media (max-width: 768px) {
  .page-wrap {
    max-width: 95%;
  }
}
   .why-strip {
            text-align: center;
            font-size: 1.01rem;
            color: var(--dim);
            max-width: 85%;
            margin: -4px auto 20px;
            line-height: 1.55;
        }
        .why-strip strong { color: var(--dim); }
        .triple-compare {
            display: grid;
            grid-template-columns: 1fr auto 1fr auto 1fr;
            gap: 10px;
            align-items: center;
            margin: 0 auto 20px;
            max-width: 92%;
        }
        .triple-compare .side {
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 14px 12px;
            text-align: center;
        }
        .triple-compare .side.winner-glow {
            border-color: #48bb78;
            box-shadow: 0 0 0 2px rgba(72, 183, 120, 0.25);
        }
        .triple-compare .tag {
            font-size: 0.84rem;
            font-weight: 700;
            color: #718096;
            text-transform: uppercase;
            letter-spacing: 0.02em;
        }
        .triple-compare .amt {
            font-size: 1.62rem;
            font-weight: 800;
            color: #2b6cb0;
            margin: 4px 0 2px;
        }
        .triple-compare .side.hev .amt { color: #c05621; }
        .triple-compare .side.phev .amt { color: #805ad5; }
        .triple-compare .sub {
            font-size: 0.84rem;
            color: #a0aec0;
        }
        .triple-compare .vs {
            font-weight: 800;
            color: #cbd5e0;
            font-size: 0.9rem;
        }
        .bar-fill.blue { background: linear-gradient(90deg, #63b3ed, #3182ce); }
        .bar-fill.purple { background: linear-gradient(90deg, #b794f4, #805ad5); }
        .powertrain-cols {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px;
            margin-top: 12px;
        }
        .powertrain-cols h3 {
            font-size: 1.06rem;
            margin-bottom: 8px;
        }
        .powertrain-cols .col {
            background: #f7fafc;
            border: 1px solid #edf2f7;
            border-radius: 10px;
            padding: 12px;
        }
        .powertrain-cols .col.ev { border-top: 3px solid #3182ce; }
        .powertrain-cols .col.hev { border-top: 3px solid #c05621; }
        .powertrain-cols .col.phev { border-top: 3px solid #805ad5; }
        .collapsible-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            margin-top: 18px;
            padding: 8px 0;
            border-top: 1px solid #edf2f7;
            user-select: none;
        }
        .collapsible-header h3 { margin: 0; }
        .collapsible-header .chevron {
            color: #718096;
            transition: transform 0.2s;
        }
        .collapsible-header .chevron.open { transform: rotate(180deg); }
        .collapsible-body { display: none; margin-top: 10px; }
        .collapsible-body.open { display: block; }
        .winner-badge {
            display: inline-block;
            font-size: 0.78rem;
            background: #c6f6d5;
            color: #276749;
            padding: 2px 8px;
            border-radius: 999px;
            margin-left: 6px;
            vertical-align: middle;
        }
        .tco-table td.win { color: #276749; font-weight: 700; }
        @media (max-width: 768px) {
            .triple-compare {
                grid-template-columns: 1fr;
                text-align: center;
            }
            .triple-compare .vs { display: none; }
            .powertrain-cols { grid-template-columns: 1fr; }
        }
/* =========================================
   EV Calculator India – Main CSS
   Theme: Dark (style.css colors as base)
   ========================================= */
:root{
  --bg:#f7fafc; --card:#ffffff; --card2:#f7fafc; --text:#1a202c; --dim:#718096;
  --line:rgba(15,23,42,.09); --line2:rgba(15,23,42,.16);
  --green:#16a34a; --green2:#15803d; --cyan:#2563eb; --red:#dc2626; --amber:#c05621;
  --shadow:0 12px 28px rgba(15,23,42,.08); --shadow2:0 6px 16px rgba(15,23,42,.06); --radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);min-height:100vh;
  background:
    radial-gradient(circle at 14% 0%,rgba(22,163,74,.06),transparent 42%),
    radial-gradient(circle at 86% 10%,rgba(37,99,235,.05),transparent 42%),
    linear-gradient(180deg,#ffffff 0%,#f7fafc 100%);
  padding:0 0 56px;
}

/* ---- NAV ---- */
.site-nav{
  position:sticky;top:0;z-index:999;
  background:rgba(255,255,255,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{
  max-width:92%;margin:0 auto;padding:0 18px;
  display:flex;align-items:center;gap:8px;height:58px;
}
.nav-brand{
  color:var(--green);font-size:17px;font-weight:900;text-decoration:none;
  white-space:nowrap;margin-right:auto;letter-spacing:-.3px;
}
.nav-brand:hover{color:var(--green2)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-link{
  color:var(--dim);text-decoration:none;font-size:15px;font-weight:700;
  padding:8px 12px;border-radius:8px;white-space:nowrap;
  transition:color .15s ease,background .15s ease;
}
.nav-link:hover,.nav-link.active{color:var(--text);background:rgba(15,23,42,.045)}
.nav-dropdown{position:relative;}
.nav-dropdown-btn{
  display:inline-flex;align-items:center;gap:4px;
  background:none;border:none;cursor:pointer;
  color:var(--dim);font-size:15px;font-weight:700;
  padding:8px 12px;border-radius:8px;white-space:nowrap;
  transition:color .15s ease,background .15s ease;
}
.nav-dropdown-btn:hover,.nav-dropdown-btn.open{color:var(--text);background:rgba(15,23,42,.045)}
/* Mega menu: right-anchored so it never overflows the right edge of the viewport,
   width capped to viewport so it never overflows the left edge either,
   scrolls internally if the content is taller than the viewport. */
.nav-dropdown-menu{
  display:none;position:absolute;top:calc(100% + 8px);right:0;left:auto;
  background:var(--card);border:1px solid var(--line2);border-radius:14px;
  padding:14px;width:min(880px,calc(100vw - 32px));
  max-height:calc(100vh - 90px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  box-shadow:var(--shadow);z-index:1000;
}
.nav-dropdown-menu.open{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px 14px;
  animation:megamenuIn .16s ease;
}
.nav-dropdown-menu a{
  display:flex;align-items:flex-start;gap:8px;
  padding:9px 10px;border-radius:9px;
  color:var(--dim);text-decoration:none;font-size:14px;font-weight:600;line-height:1.35;
  transition:color .13s ease,background .13s ease;
}
.nav-dropdown-menu a:hover{color:var(--text);background:rgba(15,23,42,.05)}
@keyframes megamenuIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* Tablet: mega menu narrows to 2 columns and a smaller panel so it fits mid-size viewports */
@media(max-width:1024px) and (min-width:769px){
  .nav-dropdown-menu{width:min(600px,calc(100vw - 32px))}
  .nav-dropdown-menu.open{grid-template-columns:repeat(2,1fr)}
}
.nav-toggle{
  display:none;background:none;border:1px solid var(--line2);color:var(--dim);
  padding:6px 10px;border-radius:8px;cursor:pointer;font-size:18px;
}

/* ---- LAYOUT ---- */
.wrap{max-width:92%;margin:0 auto;padding:18px 16px 0}
.page-wrap{max-width:82%;margin:0 auto;padding:24px 16px 0}

/* ---- HERO ---- */
.hero{text-align:center;padding:28px 10px 12px}
.hero h1{
  margin:0 0 10px;font-size:clamp(29px,5.6vw,47px);line-height:1.05;font-weight:900;letter-spacing:-.7px;
  background:linear-gradient(90deg,var(--green),var(--cyan));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero p{margin:0;color:var(--dim);font-size:15.5px;line-height:1.6;max-width:85%;margin:0 auto}

/* ---- CARDS ---- */
.card{
  background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow);margin-top:18px;
}
.card-title{margin:0 0 6px;display:flex;align-items:center;gap:8px;font-size:19px;font-weight:850}
.card-sub{margin:0 0 18px;color:var(--dim);font-size:14.5px;line-height:1.55}

/* ---- CALCULATOR FORM ---- */
.calc-card{
  background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow);margin-top:20px;
}
.calc-title{
  font-size:clamp(20px,3.4vw,27px);font-weight:900;letter-spacing:-.4px;
  background:linear-gradient(90deg,var(--green),var(--cyan));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  margin:0 0 6px;
}
.calc-sub{color:var(--dim);font-size:15px;line-height:1.6;margin:0 0 20px}
.section-label{
  display:flex;align-items:center;gap:7px;margin:22px 0 12px;
  color:var(--green);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
}
.section-label::after{content:"";height:1px;flex:1;background:var(--line)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:8px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:8px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13.5px;color:var(--dim);font-weight:700;line-height:1.4}
.field input,.field select,.field textarea{
  appearance:none;background:#eef2f7;color:var(--text);
  border:1px solid var(--line);padding:11px 12px;border-radius:11px;font-size:16px;outline:none;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:rgba(22,163,74,.7);box-shadow:0 0 0 3px rgba(22,163,74,.12)
}
.field select option{background:var(--card);color:var(--text)}
.field .hint{font-size:13px;color:var(--dim);margin-top:2px;line-height:1.4}
.btn-calc{
  width:100%;margin-top:14px;padding:14px 14px;border:none;border-radius:12px;cursor:pointer;
  color:#04150d;font-size:17px;font-weight:900;
  background:linear-gradient(90deg,var(--green),var(--cyan));
  box-shadow:0 10px 24px rgba(22,163,74,.14);transition:transform .14s ease,box-shadow .14s ease
}
.btn-calc:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(22,163,74,.22)}

/* ---- RESULTS ---- */
.results{margin-top:20px;display:grid;gap:10px;animation:fadein .24s ease}
.results.hidden{display:none}
.stat{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#eef2f7;border:1px solid var(--line);border-radius:12px;padding:12px 16px}
.stat .lbl{font-size:14.5px;color:var(--dim);line-height:1.35}
.stat .val{font-size:17px;font-weight:800;text-align:right}
.stat.highlight{border-color:rgba(22,163,74,.34);background:linear-gradient(90deg,rgba(22,163,74,.10),rgba(37,99,235,.06))}
.stat.highlight .val{font-size:19px;background:linear-gradient(90deg,var(--green),var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat.danger .val{color:var(--red)}
.note{margin-top:10px;color:var(--dim);font-size:13.5px;line-height:1.55}
.disclaimer{
  background:rgba(192,86,33,.07);border:1px solid rgba(192,86,33,.24);
  border-radius:12px;padding:14px 16px;color:#92400e;font-size:14px;line-height:1.6;margin-bottom:18px;
}
.disclaimer b{color:var(--amber)}
.disclaimer ul{margin:8px 0 0;padding-left:18px}
.disclaimer li{margin-bottom:4px}

/* ---- TABLES ---- */
.scrollbox{max-height:320px;overflow:auto;border-radius:12px;border:1px solid var(--line);margin-top:16px}
table{width:100%;border-collapse:collapse;font-size:14.5px}
thead th{
  position:sticky;top:0;z-index:1;background:var(--card2);color:var(--dim);
  text-align:right;padding:9px 12px;border-bottom:1px solid var(--line);
  font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
}
thead th:first-child,tbody td:first-child{text-align:left}
tbody td{padding:9px 12px;text-align:right;border-bottom:1px solid rgba(15,23,42,.035)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:rgba(15,23,42,.025)}
.tfoot-row td,.tfoot-row th{
  font-weight:800;color:var(--green);background:rgba(22,163,74,.06);
  border-top:1px solid rgba(22,163,74,.22);
}
.savings-row td{color:var(--amber)!important;font-weight:800}

/* ---- COMPARISON TABLE ---- */
.comp-table{width:100%;border-collapse:collapse;margin-top:10px;font-size:15px}
.comp-table th,.comp-table td{padding:10px 12px;text-align:right;border-bottom:1px solid var(--line)}
.comp-table th:first-child,.comp-table td:first-child{text-align:left;color:var(--dim)}
.comp-table th{color:var(--dim);font-weight:700;font-size:13.5px;text-transform:uppercase;letter-spacing:.04em;background:var(--card2)}
.comp-table .ev-col{color:var(--green);font-weight:800}
.comp-table .fuel-col{color:var(--cyan)}
.comp-table .total-row td{font-weight:800;background:rgba(15,23,42,.035)}
.comp-table .savings-row td{color:var(--amber);font-weight:800;background:rgba(192,86,33,.06);border-top:1px solid rgba(192,86,33,.2)}

/* ---- HOME CALCULATOR GRID ---- */
.calc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:16px}
.calc-item{
  display:block;text-decoration:none;color:var(--text);
  background:linear-gradient(135deg,var(--card),var(--card2));
  border:1px solid var(--line);border-radius:14px;padding:18px;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.calc-item:hover{transform:translateY(-2px);border-color:rgba(22,163,74,.3);box-shadow:0 12px 28px rgba(0,0,0,.25)}
.calc-item .icon{font-size:27px;margin-bottom:8px;display:block}
.calc-item .name{font-size:15.5px;font-weight:800;color:var(--green);margin-bottom:4px}
.calc-item .desc{font-size:14px;color:var(--dim);line-height:1.5}

/* ---- BLOG ---- */
.blog-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:18px}
.blog-card{
  background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid var(--line);border-radius:var(--radius);padding:22px;
  box-shadow:var(--shadow2);display:flex;flex-direction:column;gap:10px;
}
.blog-card .blog-tag{
  display:inline-block;background:rgba(22,163,74,.12);border:1px solid rgba(22,163,74,.25);
  color:var(--green);font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  padding:3px 9px;border-radius:999px;
}
.blog-card h2{font-size:18px;font-weight:800;line-height:1.4;margin:0}
.blog-card p{font-size:14.5px;color:var(--dim);line-height:1.65;margin:0;flex:1}
.blog-card .blog-meta{font-size:13px;color:var(--dim);display:flex;gap:12px;align-items:center}
.read-more{
  display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:700;
  color:var(--cyan);text-decoration:none;margin-top:auto;
  border:1px solid rgba(37,99,235,.3);padding:8px 14px;border-radius:999px;
  background:rgba(37,99,235,.07);transition:all .2s ease;
}
.read-more:hover{background:rgba(37,99,235,.14);border-color:rgba(37,99,235,.5)}

/* ---- EV COMPARE CARDS ---- */
.ev-compare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:16px}
.ev-card{
  background:#eef2f7;border:1px solid var(--line);border-radius:14px;padding:18px;
}
.ev-card h3{margin:0 0 12px;font-size:17px;color:var(--cyan);font-weight:800}
.ev-card .ev-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.ev-card .ev-row:last-child{border-bottom:none}
.ev-card .ev-row .k{color:var(--dim)}
.ev-card .ev-row .v{font-weight:700;color:var(--green)}

/* ---- FILTER GRID ---- */
.filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:14px}
.filter-block{
  background:#eef2f7;border:1px solid var(--line);border-radius:14px;padding:18px;
}
.filter-block h3{font-size:15.5px;color:var(--cyan);font-weight:800;margin:0 0 14px}
.filter-block label{display:block;font-size:13.5px;color:var(--dim);font-weight:700;margin-bottom:5px;margin-top:10px}
.filter-block label:first-of-type{margin-top:0}
.filter-block select{
  width:100%;appearance:none;background:#f7fafc;color:var(--text);
  border:1px solid var(--line);padding:10px 12px;border-radius:10px;font-size:15.5px;outline:none;
  transition:border-color .16s ease;
}
.filter-block select:focus{border-color:rgba(22,163,74,.7)}

/* ---- ANIMATIONS ---- */
@keyframes fadein{from{opacity:.25;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ---- FOOTER ---- */
.site-footer{
  text-align:center;color:var(--dim);font-size:13.5px;margin-top:40px;
  padding:20px 16px;border-top:1px solid var(--line);line-height:1.8;
}
.site-footer a{color:var(--cyan);text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.footer-nav{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}

/* ---- TOAST ---- */
.toast{
  position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(20px);
  background:rgba(8,13,24,.94);border:1px solid rgba(15,23,42,.10);color:#fff;
  padding:10px 16px;border-radius:999px;font-size:14.5px;font-weight:700;
  box-shadow:var(--shadow2);opacity:0;pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;z-index:9999;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- BREADCRUMB ---- */
.breadcrumb{font-size:14px;color:var(--dim);padding:12px 0 0;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.breadcrumb a{color:var(--cyan);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb span{color:var(--dim)}

/* =========================================
   EV vs Petrol Two-Wheeler Calculator
   ========================================= */

/* ---- layout helpers ---- */
.container{width:100%}
.main-heading{text-align:center;padding:8px 6px 4px}
.main-heading h1{
  margin:0 0 8px;font-size:clamp(24.5px,4.9vw,36px);line-height:1.15;font-weight:900;letter-spacing:-.5px;
  background:linear-gradient(90deg,var(--green),var(--cyan));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.main-heading p{margin:0;color:var(--dim);font-size:15px;line-height:1.6}

/* ---- action bar ---- */
.action-bar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:16px 0}
.action-btn{
  background:#eef2f7;border:1px solid var(--line);color:var(--text);
  font-size:14px;font-weight:700;padding:8px 14px;border-radius:999px;cursor:pointer;
  transition:border-color .15s ease,background .15s ease,transform .12s ease;
}
.action-btn:hover{border-color:rgba(22,163,74,.4);background:rgba(22,163,74,.08);transform:translateY(-1px)}

/* ---- mode tabs ---- */
.mode-tabs{display:flex;gap:8px;background:#eef2f7;border:1px solid var(--line);border-radius:14px;padding:6px;margin:12px 0}
.mode-tab{
  flex:1;background:none;border:none;color:var(--dim);cursor:pointer;
  font-size:14.5px;font-weight:800;padding:10px 8px;border-radius:10px;
  transition:background .15s ease,color .15s ease;white-space:nowrap;
}
.mode-tab:hover{color:var(--text)}
.mode-tab.active{color:#04150d;background:linear-gradient(90deg,var(--green),var(--cyan))}

/* ---- presets ---- */
.preset-section{margin-top:8px}
.preset-section h3{font-size:14px;color:var(--dim);font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.preset-buttons{display:flex;gap:8px;flex-wrap:wrap}
.preset-btn{
  background:#eef2f7;border:1px solid var(--line);color:var(--text);
  font-size:14px;font-weight:700;padding:8px 14px;border-radius:999px;cursor:pointer;
  transition:all .15s ease;
}
.preset-btn:hover{border-color:rgba(37,99,235,.4);background:rgba(37,99,235,.08)}
.preset-btn.active{border-color:transparent;color:#04150d;background:linear-gradient(90deg,var(--cyan),var(--green))}
.preset-btn.petrol-preset.active{background:linear-gradient(90deg,var(--amber),#dd6b20)}

/* ---- forms ---- */
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-bottom:8px}
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.form-group label{font-size:13.5px;color:var(--dim);font-weight:700;line-height:1.4}
.form-group .unit{color:var(--dim);font-weight:600;text-transform:none}
.form-group input[type="number"],.form-group input[type="text"],.form-group select{
  appearance:none;background:#eef2f7;color:var(--text);
  border:1px solid var(--line);padding:11px 12px;border-radius:11px;font-size:16px;outline:none;
  width:100%;transition:border-color .16s ease,box-shadow .16s ease;
}
.form-group input:focus,.form-group select:focus{
  border-color:rgba(22,163,74,.7);box-shadow:0 0 0 3px rgba(22,163,74,.12)
}
.form-group select option{background:var(--card);color:var(--text)}
.hint{display:block;font-size:13px;color:var(--dim);margin-top:2px;line-height:1.4}
.warning{display:none;font-size:13px;color:var(--amber);margin-top:4px;line-height:1.4;font-weight:700}
.warning.show{display:block}

/* ---- sliders ---- */
.slider-container{display:flex;align-items:center;gap:10px}
.slider-container input[type="range"]{
  flex:1;appearance:none;height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--green),var(--cyan));outline:none;cursor:pointer;
}
.slider-container input[type="range"]::-webkit-slider-thumb{
  appearance:none;width:18px;height:18px;border-radius:50%;
  background:#fff;border:3px solid var(--green);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.slider-container input[type="range"]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--green);cursor:pointer;
}
.slider-container select{flex:1}
.slider-value{min-width:34px;text-align:right;font-weight:800;color:var(--green);font-size:15px}
.slider-container input[type="number"]{
  background:#eef2f7;color:var(--text);border:1px solid var(--line);border-radius:9px;
  padding:7px 8px;font-size:15px;text-align:right;
}

/* ---- charging split ---- */
.charging-split{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--dim)}
.charging-split input[type="range"]{flex:1}
.split-label{min-width:78px;text-align:center;font-weight:800;color:var(--cyan)}

/* ---- toggle switch ---- */
.toggle-group{display:flex;align-items:center;gap:10px;margin-top:6px}
.toggle-switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{
  position:absolute;cursor:pointer;inset:0;background:#1a2438;border:1px solid var(--line2);
  border-radius:999px;transition:background .18s ease;
}
.toggle-slider::before{
  content:"";position:absolute;height:16px;width:16px;left:3px;top:2px;
  background:#fff;border-radius:50%;transition:transform .18s ease;
}
.toggle-switch input:checked + .toggle-slider{background:linear-gradient(90deg,var(--green),var(--cyan));border-color:transparent}
.toggle-switch input:checked + .toggle-slider::before{transform:translateX(18px)}
.toggle-label{font-size:14px;color:var(--dim);font-weight:600;line-height:1.4}

/* ---- collapsible ---- */
.collapsible-header{
  display:flex;align-items:center;justify-content:space-between;cursor:pointer;
  margin-top:22px;padding-bottom:8px;border-bottom:1px solid var(--line);
}
.collapsible-header h3{margin:0}
.chevron{color:var(--dim);transition:transform .2s ease;font-size:13.5px}
.chevron.open{transform:rotate(180deg);color:var(--green)}
.collapsible-body{
  max-height:0;overflow:hidden;transition:max-height .25s ease,opacity .2s ease;opacity:0;
}
.collapsible-body.open{max-height:1000px;opacity:1;padding-top:14px}

/* ---- generic h2/h3 inside cards ---- */
.card h2{font-size:19px;font-weight:850;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.card h3{font-size:14.5px;color:var(--green);font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}

/* ---- info box ---- */
.info-box{
  background:rgba(37,99,235,.08);border:1px solid rgba(37,99,235,.22);
  border-radius:10px;padding:10px 12px;font-size:13.5px;color:var(--dim);line-height:1.6;
}
.info-box a{color:var(--cyan)}

/* ---- results grid / KPI cards ---- */
.results-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:14px}
.result-card{
  background:#eef2f7;border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center;
}
.result-card .label{font-size:13px;color:var(--dim);font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.result-card .value{font-size:22.5px;font-weight:900;color:var(--text)}
.result-card .value.green{color:var(--green)}
.result-card .sub-label{font-size:12.5px;color:var(--dim);margin-top:6px}

/* ---- comparison / year tables (reuse table look) ---- */
.comparison-table,.year-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:480px}
.comparison-table th,.year-table th{
  background:var(--card2);color:var(--dim);text-align:right;padding:9px 12px;
  border-bottom:1px solid var(--line);font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
}
.comparison-table td,.year-table td{padding:9px 12px;text-align:right;border-bottom:1px solid rgba(15,23,42,.035)}
.comparison-table th:first-child,.comparison-table td:first-child,
.year-table th:first-child,.year-table td:first-child{text-align:left;color:var(--dim)}
.comparison-table tr:last-child td,.year-table tr:last-child td{border-bottom:none}
.comparison-table tr:hover td,.year-table tr:hover td{background:rgba(15,23,42,.025)}

/* ---- per-km bars ---- */
.per-km-bar-container{margin-top:18px;background:#eef2f7;border:1px solid var(--line);border-radius:14px;padding:16px}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.bar-row:last-of-type{margin-bottom:6px}
.bar-label{min-width:64px;font-size:14px;font-weight:700;color:var(--dim)}
.bar-track{flex:1;height:12px;border-radius:999px;background:rgba(15,23,42,.045);overflow:hidden}
.bar-fill{height:100%;border-radius:999px;transition:width .3s ease}
.bar-fill.orange{background:linear-gradient(90deg,#c05621,var(--amber))}
.bar-fill.green{background:linear-gradient(90deg,var(--green),var(--cyan))}
.bar-value{min-width:64px;text-align:right;font-weight:800;font-size:14.5px}

/* ---- verdict banner ---- */
.verdict-banner{margin-top:18px;border-radius:14px;padding:14px 16px;font-size:15px;font-weight:700;line-height:1.6}
.verdict-banner.green{background:rgba(22,163,74,.1);border:1px solid rgba(22,163,74,.3);color:var(--green2)}
.verdict-banner.amber{background:rgba(192,86,33,.1);border:1px solid rgba(192,86,33,.3);color:var(--amber)}
.verdict-banner.red{background:rgba(220,38,38,.1);border:1px solid rgba(220,38,38,.3);color:var(--red)}

/* ---- chart ---- */
.chart-container{position:relative;height:320px;margin-top:12px;background:#eef2f7;border:1px solid var(--line);border-radius:14px;padding:14px}

/* ---- share section ---- */
.share-section{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0;}
.share-btn{
  flex:1;min-width:150px;border:none;border-radius:12px;padding:12px 14px;cursor:pointer;
  font-size:15px;font-weight:800;transition:transform .14s ease,box-shadow .14s ease;
}
.share-btn.primary{color:#04150d;background:linear-gradient(90deg,var(--green),var(--cyan));box-shadow:0 10px 24px rgba(22,163,74,.14)}
.share-btn.whatsapp{color:#04150d;background:linear-gradient(90deg,#25d366,#128c7e)}
.share-btn.outline{color:var(--text);background:#eef2f7;border:1px solid var(--line2)}
.share-btn:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(0,0,0,.25)}

/* ---- footer inside card ---- */
.footer{text-align:center;color:var(--dim);font-size:13.5px;margin-top:28px;padding-top:16px;border-top:1px solid var(--line)}

/* ---- mode visibility ---- */
body.mode-scooter .journey-only,body.mode-bike .journey-only{display:none}
body.mode-journey .commute-only{display:none}

/* ---- RESPONSIVE ---- */
@media(max-width:768px){
  .nav-links{
    display:none;position:absolute;top:58px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    max-height:calc(100vh - 58px);overflow-y:auto;-webkit-overflow-scrolling:touch;
    background:rgba(255,255,255,.98);border-bottom:1px solid var(--line);padding:10px;
  }
  .nav-links.open{display:flex}
  .nav-toggle{display:block}
  .nav-dropdown{position:static;width:100%}
  .nav-dropdown-menu{
    position:static;transform:none;box-shadow:none;
    background:rgba(15,23,42,.035);border:none;border-radius:10px;
    margin-top:4px;min-width:0;max-width:100%;padding:6px;width:100%;
  }
  .nav-dropdown-menu.open{display:grid;grid-template-columns:1fr;gap:2px;width:100%}
  .nav-dropdown-btn,.nav-link{width:100%;text-align:left;padding:11px 14px;justify-content:space-between}
  .grid,.grid-2{grid-template-columns:1fr}
  .calc-card{padding:18px}
  .hero h1{font-size:27px}
  .card{padding:16px}
  .page-wrap{padding:16px 12px 0}
  .form-grid{grid-template-columns:1fr}
  .results-grid{grid-template-columns:repeat(2,1fr)}
  .mode-tab{font-size:13.5px;padding:9px 4px}
  .action-bar{gap:6px}
  .action-btn{font-size:13px;padding:7px 11px}
  .preset-buttons{gap:6px}
  .preset-btn{font-size:13px;padding:7px 11px}
  .chart-container{height:260px;padding:10px}
  .share-section{flex-direction:column}
  .share-btn{min-width:0}
}
@media(max-width:480px){
  .calc-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .ev-compare-grid,.filter-grid{grid-template-columns:1fr}
  .stat{flex-direction:column;align-items:flex-start}
  .stat .val{font-size:15.5px}
  .results-grid{grid-template-columns:1fr 1fr}
  .result-card{padding:12px}
  .result-card .value{font-size:19px}
  .mode-tabs{flex-wrap:wrap}
  .mode-tab{flex:1 1 30%}
  .bar-label{min-width:52px;font-size:13px}
  .bar-value{min-width:52px;font-size:13.5px}
  .slider-container{flex-wrap:wrap}
  .split-label{min-width:0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}


  .wrap{max-width:92%;margin:0 auto}
  .topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:4px 4px 0}
  .brand{color:var(--dim);text-decoration:none;font-size:14.5px;font-weight:700}
  .brand:hover{color:var(--text)}
  .blog-link,.share-btn,.copy-btn,.reset-btn{
    display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--cyan);
    border:1px solid rgba(56,189,248,.35);background:rgba(56,189,248,.08);
    padding:9px 14px;border-radius:999px;font-size:14.5px;font-weight:700;cursor:pointer;
    transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;
  }
  .blog-link:hover,.share-btn:hover,.copy-btn:hover,.reset-btn:hover{transform:translateY(-1px);background:rgba(56,189,248,.15);border-color:rgba(56,189,248,.58);box-shadow:0 10px 24px rgba(56,189,248,.08)}
  .hero{text-align:center;padding:18px 10px 8px}
  .hero h1{
    margin:0 0 8px; font-size:clamp(29px,5.6vw,45px); line-height:1.05; font-weight:900; letter-spacing:-.7px;
    background:linear-gradient(90deg,var(--green),var(--cyan));
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  }
  .hero p{margin:0;color:var(--dim);font-size:15.5px;line-height:1.55}
  .actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
  .section-block{
    background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-top:14px
  }
  .section-title{margin:0 0 6px;font-size:20px;font-weight:900}
  .section-sub{margin:0;color:var(--dim);font-size:14.5px;line-height:1.55}
  .tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:18px 4px 12px}
  .tab-btn{
    background: linear-gradient(90deg, var(--green), var(--cyan));display:flex;align-items:center;gap:7px;padding:10px 14px;border-radius:999px;border:1px solid var(--line);
    color:#fff;font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .2s ease;
  }
  .tab-btn:hover{ background: var(--green);border-color:var(--line2);color:var(--text);transform:translateY(-1px)}
  .tab-btn.active{color:#fff;border-color:rgba(22,163,74,.42);background:linear-gradient(135deg,rgba(22,163,74,.15),rgba(37,99,235,.14));box-shadow:0 10px 24px rgba(22,163,74,.09)}
  .panel{display:none;animation:fadein .22s ease}
  .panel.active{display:block}
  @keyframes fadein{from{opacity:.25;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
  .card{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
  .card-title{margin:0 0 5px;display:flex;align-items:center;gap:8px;font-size:19px;font-weight:850}
  .card-sub{margin:0 0 18px;color:var(--dim);font-size:14.5px;line-height:1.55}
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-bottom:8px}
  .field{display:flex;flex-direction:column;gap:6px}
  .field label{font-size:13.5px;color:var(--dim);font-weight:700}
  .field input,.field select{width: 100%;appearance:none;background:#eef2f7;color:var(--text);border:1px solid var(--line);padding:11px 12px;border-radius:11px;font-size:16px;outline:none;
    transition:border-color .16s ease,box-shadow .16s ease;
  }
  .field input:focus,.field select:focus{border-color:rgba(22,163,74,.7);box-shadow:0 0 0 3px rgba(22,163,74,.12)}
  .section-label{display:flex;align-items:center;gap:7px;margin:18px 0 10px;color:var(--green);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
  .section-label::after{content:"";height:1px;flex:1;background:var(--line)}
  .btn-calc{
    width:100%;margin-top:10px;padding:13px 14px;border:none;border-radius:12px;cursor:pointer;color:#04150d;font-size:17px;font-weight:900;
    background:linear-gradient(90deg,var(--green),var(--cyan));box-shadow:0 10px 24px rgba(22,163,74,.14);transition:transform .14s ease,box-shadow .14s ease
  }
  .btn-calc:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(22,163,74,.2)}
  .results{margin-top:18px;display:grid;gap:10px;animation:fadein .24s ease}
  .results.hidden{display:none}
  .stat{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#eef2f7;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
  .stat .lbl{font-size:14.5px;color:var(--dim);line-height:1.35}
  .stat .val{font-size:18px;font-weight:800}
  .stat.highlight{border-color:rgba(22,163,74,.34);background:linear-gradient(90deg,rgba(22,163,74,.10),rgba(37,99,235,.06))}
  .stat.highlight .val{font-size:20px;background:linear-gradient(90deg,var(--green),var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .note{margin-top:10px;color:var(--dim);font-size:13.5px;line-height:1.55}
  .disclaimer{background:rgba(192,86,33,.07);border:1px solid rgba(192,86,33,.24);border-radius:12px;padding:12px 14px;color:#92400e;font-size:14px;line-height:1.55;margin-bottom:18px}
  .disclaimer b{color:var(--amber)}
  .scrollbox{max-height:280px;overflow:auto;border-radius:10px;border:1px solid var(--line);margin-top:14px}
  table{width:100%;border-collapse:collapse;font-size:14.5px}
  thead th{position:sticky;top:0;z-index:1;background:var(--card2);color:var(--dim);text-align:right;padding:8px 10px;border-bottom:1px solid var(--line);font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
  thead th:first-child,tbody td:first-child{text-align:left}
  tbody td{padding:8px 10px;text-align:right;border-bottom:1px solid rgba(15,23,42,.035)}
  .tco-table{width:100%;border-collapse:collapse;margin-top:6px;font-size:15px}
  .tco-table th,.tco-table td{padding:10px 10px;text-align:right;border-bottom:1px solid var(--line)}
  .tco-table th:first-child,.tco-table td:first-child{text-align:left;color:var(--dim)}
  .tco-table th{color:var(--dim);font-weight:700;font-size:13.5px;text-transform:uppercase;letter-spacing:.04em}
  .tco-table .ev-col{color:var(--green);font-weight:800}
  .find-result{margin-top:18px;display:grid;gap:10px}
  .find-card{background:#eef2f7;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
  .find-card h4{margin:0 0 6px;font-size:15px;color:var(--green);display:flex;align-items:center;gap:6px}
  .find-card p{margin:0;font-size:15px;line-height:1.65;color:var(--text)}
  .faq{margin-top:18px;display:grid;gap:10px}
  .faq-item{background:#eef2f7;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
  .faq-item h3{margin:0 0 8px;font-size:15.5px}
  .faq-item p{margin:0;color:var(--dim);line-height:1.65;font-size:14.5px}
  .popular{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
  .popular a{display:block;text-decoration:none;color:var(--text);background:#eef2f7;border:1px solid var(--line);border-radius:14px;padding:14px 16px;transition:transform .15s ease,border-color .15s ease}
  .popular a:hover{transform:translateY(-1px);border-color:rgba(15,23,42,.12)}
  .popular b{display:block;margin-bottom:4px;color:var(--green)}
  footer{text-align:center;color:var(--dim);font-size:13px;margin-top:30px;line-height:1.65}
  .toast{
    position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(20px);
    background:rgba(8,13,24,.94);border:1px solid rgba(15,23,42,.10);color:#fff;padding:10px 14px;border-radius:999px;font-size:14.5px;font-weight:700;
    box-shadow:var(--shadow2);opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease;z-index:9999;max-width:min(92vw,520px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  /* ── Prevent iOS auto-zoom on input focus (font-size must be ≥16px) ── */
  @media (max-width:767px){
    .field input,.field select{font-size:18px}
  }

  /* ── Tablet (641–1019px) ── */
  @media (max-width:1019px){
    .wrap{padding:0 4px}
    .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  }

  /* ── Mobile landscape + large phones (481–640px) ── */
  @media (max-width:640px){
    body{padding:12px 10px 60px}
    .card,.section-block{padding:14px 12px;border-radius:14px}
    /* Topbar: brand left, blog right, no wrapping chaos */
    .topbar{flex-wrap:nowrap;gap:8px}
    .brand{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
    .blog-link{padding:7px 11px;font-size:13.5px;white-space:nowrap}
    /* Hero actions: wrap neatly, equal-ish width buttons */
    .actions{gap:8px}
    .copy-btn,.share-btn,.reset-btn{padding:8px 12px;font-size:13.5px;flex:1 1 auto;justify-content:center}
    /* Tabs: wrap into 3-column grid so all buttons are visible */
    .tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:14px 0 10px}
    .tab-btn{justify-content:center;text-align:center;padding:9px 6px;font-size:13px;white-space:normal;line-height:1.25;border-radius:10px}
    /* Grid: 2 columns */
    .grid{grid-template-columns:1fr 1fr;gap:10px}
    .popular{grid-template-columns:1fr 1fr;gap:10px}
    /* Stat rows */
    .stat{padding:10px 12px}
    .stat .lbl{font-size:13.5px}
    .stat .val{font-size:17px}
    .stat.highlight .val{font-size:18px}
    /* TCO table: horizontal scroll wrapper */
    .tco-table{font-size:13.5px}
    .tco-table th,.tco-table td{padding:7px 7px;font-size:13.5px}
    /* Scrollbox table: smaller text */
    .scrollbox table{font-size:13.5px}
    thead th{font-size:12.5px;padding:7px 8px}
    tbody td{padding:7px 8px}
    /* Section title */
    .section-title{font-size:18px}
    .card-title{font-size:17px}
  }

  /* ── Small phones (≤480px) ── */
  @media (max-width:480px){
    body{padding:10px 8px 60px}
    .card,.section-block{padding:12px 10px;border-radius:12px}
    /* Topbar: compact */
    .brand{max-width:110px;font-size:13px}
    .blog-link{padding:6px 10px;font-size:13px}
    /* Hero */
    .hero{padding:12px 4px 6px}
    .hero p{font-size:14.5px}
    .actions{flex-direction:row;flex-wrap:wrap}
    .copy-btn,.share-btn,.reset-btn{padding:8px 10px;font-size:13px;flex:1 1 calc(50% - 4px);min-width:0}
    /* Grid: single column */
    .grid{grid-template-columns:1fr;gap:10px}
    .popular{grid-template-columns:1fr}
    /* Stat: stack label above value */
    .stat{flex-direction:column;align-items:flex-start;gap:4px;padding:10px 12px}
    .stat .val{font-size:20px}
    .stat.highlight .val{font-size:22.5px}
    /* TCO table: make scrollable */
    .tco-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
    .tco-table{min-width:340px}
    /* Tabs: 3-column grid, compact */
    .tabs{grid-template-columns:1fr;gap:5px;padding:12px 0 8px}
    .tab-btn{font-size:12.5px;padding:8px 4px}
    /* Section labels */
    .section-label{font-size:12.5px}
    .find-card{padding:12px 12px}
    .faq-item{padding:12px 12px}
    footer{font-size:12.5px;padding:0 4px}
    /* Disclaimer */
    .disclaimer{font-size:13.5px;padding:10px 12px}
    /* Note */
    .note{font-size:13px}
  }

  /* ── Very small phones (≤360px) ── */
  @media (max-width:360px){
    body{padding:8px 6px 56px}
    .copy-btn,.share-btn,.reset-btn{font-size:12.5px;padding:7px 8px}
    .brand{max-width:90px}
    .hero h1{letter-spacing:-.4px}
    .tab-btn{font-size:12px;padding:7px 3px}
  }

  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
  .why-strip {
            text-align: center;
            font-size: 1.01rem;
            color: #4a5568;
            max-width: 85%;
            margin: -4px auto 20px;
            line-height: 1.55;
        }
        .why-strip strong { color: #2d3748; }
        .checklist {
            list-style: none;
            margin: 12px 0 0;
            padding: 0;
            display: grid;
            gap: 10px;
        }
        .checklist li {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            font-size: 1.01rem;
            color: #2d3748;
            padding: 10px 12px;
            background: #f7fafc;
            border-radius: 8px;
            border: 1px solid #edf2f7;
        }
        .checklist .tick {
            flex-shrink: 0;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #ebf8ff;
            color: #2b6cb0;
            font-size: 0.84rem;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-top: 1px;
        }
        .breakdown-bars .bar-row { margin-bottom: 10px; }
        .breakdown-bars .bar-label {
            min-width: 110px;
            font-size: 0.9rem;
        }
        .bar-fill.blue {
            background: linear-gradient(90deg, #63b3ed, #3182ce);
        }
        .bar-fill.teal {
            background: linear-gradient(90deg, #4fd1c5, #319795);
        }
        .toggle-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .toggle-row label.chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            background: #fff;
            cursor: pointer;
            font-size: 0.95rem;
            font-weight: 600;
            color: #4a5568;
        }
        .toggle-row label.chip:has(input:checked) {
            border-color: #2b6cb0;
            background: #ebf8ff;
            color: #2b6cb0;
        }
        .toggle-row input { accent-color: #2b6cb0; }
        .legal-note {
            font-size: 0.92rem;
            color: #4a5568;
            margin-top: 10px;
            line-height: 1.5;
        }
        #freePortableWrap[hidden] { display: none !important; }
        .kpi-hero .value { font-size: 2.07rem; }
        @media (max-width: 480px) {
            .breakdown-bars .bar-label { min-width: 72px; }
        }
            .why-strip {
            text-align: center;
            font-size: 1.01rem;
            color: #4a5568;
            max-width: 88%;
            margin: -4px auto 20px;
            line-height: 1.55;
        }
      
        .headline-compare {
            display: grid;
            grid-template-columns: 1fr auto 1fr auto 1fr;
            gap: 10px;
            align-items: center;
            max-width: 90%;
            margin: 0 auto 24px;
            padding: 14px 18px;
            background: linear-gradient(135deg, #f0fff4 0%, #ebf8ff 100%);
            border: 1px solid #c6f6d5;
            border-radius: 12px;
        }
        .headline-compare .side { text-align: center; }
        .headline-compare .side .tag {
            font-size: 0.78rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: #718096;
            margin-bottom: 2px;
        }
        .headline-compare .side .amt {
            font-size: 1.4rem;
            font-weight: 800;
            color: #276749;
        }
        .headline-compare .side.ice .amt { color: #c05621; }
        .headline-compare .vs {
            font-size: 0.81rem;
            font-weight: 700;
            color: #a0aec0;
        }
        .headline-compare .sub {
            font-size: 0.78rem;
            color: #718096;
            margin-top: 2px;
        }
        .mode-deliveries .daily-km-only { display: none; }
        .mode-dailyKm .deliveries-derived-hint { display: none; }
        .charge-swap .depot-only,
        .charge-swap .public-only,
        .charge-swap .mixed-only { display: none; }
        .charge-depot .swap-only,
        .charge-depot .public-only { display: none; }
        .charge-public .swap-only,
        .charge-public .depot-tariff-only { display: none; }
        .charge-mixed .swap-only { display: none; }
        .unit-metrics {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin: 16px 0 8px;
        }
        .unit-metrics .metric {
            background: #f7fafc;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 12px 14px;
            text-align: center;
        }
        .unit-metrics .metric .k {
            font-size: 0.81rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            color: #718096;
        }
        .unit-metrics .metric .v {
            font-size: 1.34rem;
            font-weight: 800;
            color: #2b6cb0;
            margin-top: 2px;
        }
        .unit-metrics .metric .s {
            font-size: 0.81rem;
            color: #718096;
        }
        .bar-fill.teal { background: linear-gradient(90deg, #4fd1c5, #319795); }
        @media (max-width: 768px) {
            .headline-compare {
                grid-template-columns: 1fr;
                text-align: center;
            }
            .headline-compare .vs { display: none; }
            .unit-metrics { grid-template-columns: 1fr; }
        }
         
        .why-strip {
            text-align: center;
            font-size: 1.01rem;
            color: #4a5568;
            max-width: 88%;
            margin: -4px auto 20px;
            line-height: 1.55;
        }
        .why-strip strong { color: #2d3748; }
        .headline-compare {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 12px;
            align-items: center;
            max-width: 82%;
            margin: 0 auto 24px;
            padding: 14px 18px;
            background: linear-gradient(135deg, #f0fff4 0%, #ebf8ff 100%);
            border: 1px solid #c6f6d5;
            border-radius: 12px;
        }
        .headline-compare .side {
            text-align: center;
        }
        .headline-compare .side .tag {
            font-size: 0.81rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: #718096;
            margin-bottom: 2px;
        }
        .headline-compare .side .amt {
            font-size: 1.51rem;
            font-weight: 800;
            color: #16a34a;
        }
        .headline-compare .side.ice .amt { color: #c05621; }
        .headline-compare .vs {
            font-size: 0.84rem;
            font-weight: 700;
            color: #a0aec0;
        }
        .headline-compare .sub {
            font-size: 0.81rem;
            color: #718096;
            margin-top: 2px;
        }
        .mode-erickshaw .eauto-hint { display: none; }
        .mode-eauto .erickshaw-hint { display: none; }
        .energy-swap .own-only,
        .energy-swap .ice-primary-only { display: none; }
        .energy-own .swap-only,
        .energy-own .ice-primary-only { display: none; }
        .energy-petrol .swap-only,
        .energy-petrol .own-only,
        .energy-cng .swap-only,
        .energy-cng .own-only { display: none; }
        .energy-petrol .ev-compare-only,
        .energy-cng .ev-compare-only { display: none; }
        .bar-fill.teal {
            background: linear-gradient(90deg, #4fd1c5, #319795);
        }
        .bar-fill.blue {
            background: linear-gradient(90deg, #63b3ed, #3182ce);
        }
        .kpi-hero .value { font-size: 1.96rem; }
        .breakdown-list {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .breakdown-list li {
            display: flex;
            justify-content: space-between;
            gap: 16px;
            padding: 10px 0;        
            font-size: 1.03rem;
            color: #fff;
        }
        .breakdown-list li:last-child { border-bottom: none; }
        .breakdown-list .muted { color: #718096; }
        .breakdown-list .final {
            font-weight: 700;
            font-size: 1.18rem;
            color: #2b6cb0;
            border-top: 2px solid #ebf8ff;
            margin-top: 4px;
            padding-top: 14px;
        }
        .breakdown-list .neg { color: #c53030; }
        .breakdown-list .pos { color: #16a34a; }
        .two-col-results {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-top: 16px;
        }
        @media (max-width: 768px) {
            .headline-compare {
                grid-template-columns: 1fr;
                text-align: center;            }
            .headline-compare .vs { display: none; }
            .two-col-results { grid-template-columns: 1fr; }
        }
   
@media (max-width: 768px) {
  .page-wrap {
    max-width: 95%;
  }
}
   .why-strip {
            text-align: center;
            font-size: 1.01rem;
            color: var(--dim);
            max-width: 85%;
            margin: -4px auto 20px;
            line-height: 1.55;
        }
        .why-strip strong { color: var(--dim); }
        .triple-compare {
            display: grid;
            grid-template-columns: 1fr auto 1fr auto 1fr;
            gap: 10px;
            align-items: center;
            margin: 0 auto 20px;
            max-width: 92%;
        }
        .triple-compare .side {
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 14px 12px;
            text-align: center;
        }
        .triple-compare .side.winner-glow {
            border-color: #48bb78;
            box-shadow: 0 0 0 2px rgba(72, 183, 120, 0.25);
        }
        .triple-compare .tag {
            font-size: 0.84rem;
            font-weight: 700;
            color: #718096;
            text-transform: uppercase;
            letter-spacing: 0.02em;
        }
        .triple-compare .amt {
            font-size: 1.62rem;
            font-weight: 800;
            color: #2b6cb0;
            margin: 4px 0 2px;
        }
        .triple-compare .side.hev .amt { color: #c05621; }
        .triple-compare .side.phev .amt { color: #805ad5; }
        .triple-compare .sub {
            font-size: 0.84rem;
            color: #a0aec0;
        }
        .triple-compare .vs {
            font-weight: 800;
            color: #cbd5e0;
            font-size: 0.9rem;
        }
        .bar-fill.blue { background: linear-gradient(90deg, #63b3ed, #3182ce); }
        .bar-fill.purple { background: linear-gradient(90deg, #b794f4, #805ad5); }
        .powertrain-cols {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px;
            margin-top: 12px;
        }
        .powertrain-cols h3 {
            font-size: 1.06rem;
            margin-bottom: 8px;
        }
        .powertrain-cols .col {
            background: #f7fafc;
            border: 1px solid #edf2f7;
            border-radius: 10px;
            padding: 12px;
        }
        .powertrain-cols .col.ev { border-top: 3px solid #3182ce; }
        .powertrain-cols .col.hev { border-top: 3px solid #c05621; }
        .powertrain-cols .col.phev { border-top: 3px solid #805ad5; }
        .collapsible-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            margin-top: 18px;
            padding: 8px 0;
            border-top: 1px solid #edf2f7;
            user-select: none;
        }
        .collapsible-header h3 { margin: 0; }
        .collapsible-header .chevron {
            color: #718096;
            transition: transform 0.2s;
        }
        .collapsible-header .chevron.open { transform: rotate(180deg); }
        .collapsible-body { display: none; margin-top: 10px; }
        .collapsible-body.open { display: block; }
        .winner-badge {
            display: inline-block;
            font-size: 0.78rem;
            background: #c6f6d5;
            color: #276749;
            padding: 2px 8px;
            border-radius: 999px;
            margin-left: 6px;
            vertical-align: middle;
        }
        .tco-table td.win { color: #276749; font-weight: 700; }
        @media (max-width: 768px) {
            .triple-compare {
                grid-template-columns: 1fr;
                text-align: center;
            }
            .triple-compare .vs { display: none; }
            .powertrain-cols { grid-template-columns: 1fr; }
        }
/* =========================================
   ARTICLE / BLOG POST LAYER
   ========================================= */
/* Article presentation layer: preserves supplied copy while making long-form posts readable. */
.article-shell{max-width:100%;margin:0 auto;padding:0 16px}.article-hero{padding:42px 18px 24px;text-align:center}.article-hero h1{font-size:clamp(31.5px,5.6vw,54px);line-height:1.1;margin:0 auto 14px;max-width:88%;background:linear-gradient(90deg,var(--green),var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.article-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;color:var(--dim);font-size:13.5px}.article-pill{border:1px solid rgba(22,163,74,.3);color:var(--green);background:rgba(22,163,74,.09);padding:4px 10px;border-radius:999px;font-weight:800}.article-content{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(20px,4vw,44px);font-size:18px;line-height:1.75}.article-content h1{font-size:clamp(29px,4.5vw,40.5px);line-height:1.2;margin:0 0 20px;color:var(--text)}.article-content h2{font-size:clamp(23.5px,3.4vw,31.5px);line-height:1.25;margin:30px 0 11px;color:var(--green)}.article-content h3{font-size:21.5px;margin:24px 0 8px;color:var(--cyan)}.article-content h4{font-size:19px;margin:20px 0 6px}.article-content p{margin:0 0 15px}.article-content ul,.article-content ol{margin:0 0 18px 24px}.article-content li{margin:5px 0}.article-content a{color:var(--cyan);text-decoration:underline;text-decoration-color:rgba(37,99,235,.4);text-underline-offset:3px}.article-content table{overflow-x:auto;border:1px solid var(--line);border-radius:12px;margin:18px 0}.article-content th,.article-content td{min-width:130px;padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}.article-content th{color:var(--green);background:rgba(22,163,74,.07)}.article-content blockquote{border-left:3px solid var(--cyan);padding:5px 16px;margin:18px 0;color:#4a5568}.article-content pre{overflow:auto;background:#eef2f7;border:1px solid var(--line);border-radius:10px;padding:14px;font-size:14.5px;line-height:1.55}.article-tags{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:22px 0}.tag{font-size:13.5px;color:var(--dim);border:1px solid var(--line2);padding:5px 10px;border-radius:999px}.article-footer{max-width:92%;margin:24px auto 0;padding:0 16px}.back-link{color:var(--cyan);text-decoration:none;font-weight:800}.category-nav{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:4px 0 24px}.category-nav a{color:var(--dim);text-decoration:none;border:1px solid var(--line);padding:8px 12px;border-radius:999px;font-size:13.5px}.category-nav a:hover,.category-nav a.active{color:var(--text);border-color:rgba(22,163,74,.35);background:rgba(22,163,74,.08)}.blog-intro{max-width:92%;margin:0 auto;text-align:center;color:var(--dim);line-height:1.65}.blog-card .tag-row{display:flex;gap:6px;flex-wrap:wrap}.blog-card .tag-row .tag{font-size:11px;padding:3px 8px}.blog-card h2 a{color:var(--text);text-decoration:none}.blog-card h2 a:hover{color:var(--green)}@media(max-width:600px){.article-content{font-size:17px;padding:18px 16px}.article-hero{padding:30px 8px 18px}}

.lead-cta{margin:28px 0;text-align:center;padding:18px;border:1px solid rgba(22,163,74,.28);border-radius:14px;background:linear-gradient(135deg,rgba(22,163,74,.08),rgba(37,99,235,.06))}.lead-cta-button,.lead-submit{border:0;border-radius:999px;padding:12px 20px;font:inherit;font-weight:800;color:#04150d;background:linear-gradient(90deg,var(--green),var(--cyan));cursor:pointer}.lead-modal[hidden]{display:none}.lead-modal{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:18px}.lead-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(4px)}.lead-modal-card{position:relative;width:min(92%,420px);padding:25px;background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line2);border-radius:18px;box-shadow:var(--shadow);z-index:1}.lead-modal-card h2{margin:0 0 18px;color:var(--green)}.lead-modal-close{position:absolute;right:12px;top:8px;background:none;border:0;color:var(--dim);font-size:31.5px;cursor:pointer}.lead-modal-card form{display:grid;gap:12px}.lead-modal-card label{display:grid;gap:6px;color:var(--dim);font-size:14.5px;font-weight:700}.lead-modal-card input{width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:#eef2f7;color:var(--text);font:inherit}.lead-modal-card input:focus{outline:2px solid rgba(22,163,74,.45);border-color:var(--green)}.lead-submit{margin-top:4px;border-radius:10px}@media(prefers-reduced-motion:reduce){.lead-modal *{transition:none!important}}

.placement-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:20px 0;padding:14px 16px;border:1px solid rgba(22,163,74,.3);border-radius:12px;background:rgba(22,163,74,.07)}.placement-cta span{color:var(--green);font-weight:800;font-size:15.5px}.placement-cta button{border:0;border-radius:999px;padding:9px 15px;color:#04150d;background:linear-gradient(90deg,var(--green),var(--cyan));font-weight:800;cursor:pointer;white-space:nowrap}@media(max-width:520px){.placement-cta{align-items:flex-start;flex-direction:column}.placement-cta button{width:100%}}

.calculator-bridge{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:14px 0 20px;padding:14px 16px;border:1px solid rgba(37,99,235,.35);border-radius:14px;background:linear-gradient(135deg,rgba(37,99,235,.1),rgba(22,163,74,.08))}.calculator-bridge div{display:grid;gap:3px}.calculator-kicker{text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:var(--cyan);font-weight:800}.calculator-bridge strong{font-size:15.5px;color:var(--text)}.calculator-bridge a{white-space:nowrap;color:#04150d;background:linear-gradient(90deg,var(--green),var(--cyan));padding:9px 14px;border-radius:999px;text-decoration:none;font-size:13.5px;font-weight:900}@media(max-width:520px){.calculator-bridge{align-items:flex-start;flex-direction:column}.calculator-bridge a{width:100%;text-align:center}}
/* ========================================
   TABLE OF CONTENTS - CSS STYLES
   ID Selector: #toc
   ======================================== */

#toc {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 24px;
    margin: 24px 0;
    max-width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* TOC Title/Heading */
#toc > h2,
#toc > h3,
#toc > .toc-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 16px;
    margin-top: 0;
    padding-bottom: 12px;
    border-bottom: 2px solid #667eea;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Main List Container */
#toc > ul,
#toc > ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* TOC List Items */
#toc li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#toc > ul > li,
#toc > ol > li {
    margin-bottom: 8px;
}

#toc > ul > li:last-child,
#toc > ol > li:last-child {
    margin-bottom: 0;
}

/* TOC Links - Main Level */
#toc a {
    display: block;
    padding: 10px 12px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    border-radius: 4px;
    transition: all 0.3s ease;
    position: relative;
    border-left: 3px solid transparent;
}

#toc a:hover {
    background-color: #e8f0fe;
    color: #667eea;
    border-left-color: #667eea;
    padding-left: 16px;
}

#toc a:active,
#toc a:focus {
    outline: 2px solid #667eea;
    outline-offset: -2px;
}

/* Nested Lists in TOC */
#toc ul ul,
#toc ol ol,
#toc ul ol,
#toc ol ul {
    margin-left: 16px;
    margin-top: 4px;
    padding-left: 0;
}

#toc ul ul > li,
#toc ol ol > li,
#toc ul ol > li,
#toc ol ul > li {
    margin-bottom: 4px;
    font-size: 13px;
}

#toc ul ul a,
#toc ol ol a,
#toc ul ol a,
#toc ol ul a {
    padding: 6px 8px;
    font-size: 13px;
    font-weight: 400;
}

/* Deep Nested Lists */
#toc ul ul ul,
#toc ol ol ol {
    margin-left: 12px;
    font-size: 12px;
}

#toc ul ul ul a,
#toc ol ol ol a {
    padding: 4px 6px;
    font-size: 12px;
}

/* Sections within TOC */
#toc > .toc-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #ddd;
}

#toc > .toc-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

#toc .toc-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #667eea;
    margin: 12px 0 8px 0;
    letter-spacing: 0.5px;
}

/* TOC with Numbers */
#toc > ol {
    counter-reset: item;
}

#toc > ol > li {
    counter-increment: item;
}

#toc > ol > li::before {
    content: counter(item) ". ";
    font-weight: 700;
    color: #667eea;
    margin-right: 4px;
}

#toc > ol > li > a::before {
    content: none;
}

/* TOC with Bullets */
#toc > ul > li::before {
    content: "▸";
    color: #667eea;
    margin-right: 8px;
    font-weight: bold;
}

/* Badge/Label Styling in TOC */
#toc .badge {
    display: inline-block;
    background-color: #e8f0fe;
    color: #667eea;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 6px;
    border-radius: 3px;
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

#toc .badge.new {
    background-color: #fff3cd;
    color: #856404;
}

#toc .badge.important {
    background-color: #f8d7da;
    color: #721c24;
}

#toc .badge.updated {
    background-color: #d1ecf1;
    color: #0c5460;
}

/* Indented TOC (Common pattern) */
#toc.toc-indented a {
    padding-left: 24px;
}

#toc.toc-indented ul ul a {
    padding-left: 40px;
}

#toc.toc-indented ul ul ul a {
    padding-left: 56px;
}

/* Styled TOC with Left Border */
#toc.toc-left-border {
    border-left: 4px solid #667eea;
    padding-left: 20px;
}

/* Compact TOC */
#toc.toc-compact a {
    padding: 6px 8px;
    font-size: 13px;
}

#toc.toc-compact {
    padding: 16px;
}

/* Minimal TOC */
#toc.toc-minimal {
    background: transparent;
    border: none;
    padding: 0;
}

#toc.toc-minimal a {
    padding: 6px 0;
}

#toc.toc-minimal a:hover {
    background-color: transparent;
    color: #667eea;
}

/* Full Width TOC */
#toc.toc-full-width {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    border-radius: 0;
    padding: 32px calc(50vw - 50%);
}

/* Dark Mode TOC */
#toc.toc-dark {
    background-color: #2a2a2a;
    border-color: #404040;
}

#toc.toc-dark h2,
#toc.toc-dark h3,
#toc.toc-dark .toc-title {
    color: #e8f0fe;
    border-bottom-color: #667eea;
}

#toc.toc-dark a {
    color: #e0e0e0;
}

#toc.toc-dark a:hover {
    background-color: #404040;
    color: #99bbff;
    border-left-color: #667eea;
}

#toc.toc-dark .badge {
    background-color: #404040;
    color: #99bbff;
}

/* Flat/Card Style TOC */
#toc.toc-cards > ul > li {
    background: white;
    margin-bottom: 12px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

#toc.toc-cards a {
    padding: 12px 16px;
    margin: 0;
}

#toc.toc-cards a:hover {
    background-color: #f0f7ff;
}

/* Two Column TOC */
#toc.toc-columns-2 > ul {
    columns: 2;
    column-gap: 20px;
}

#toc.toc-columns-2 > ul > li {
    break-inside: avoid;
}

/* Icon Support in TOC */
#toc .icon {
    display: inline-block;
    margin-right: 6px;
    font-size: 16px;
}

/* Active/Current Section Styling */
#toc a.active,
#toc a.current {
    background-color: #e8f0fe;
    color: #667eea;
    font-weight: 600;
    border-left-color: #667eea;
}

/* Print Styles */
@media print {
    #toc {
        border: 1px solid #ccc;
        background-color: #f9f9f9;
        page-break-inside: avoid;
    }

    #toc a {
        text-decoration: none;
        color: #000;
    }

    #toc a:hover {
        background-color: transparent;
    }
}

/* Tablet Styles */
@media (max-width: 768px) {
    #toc {
        padding: 16px;
    }

    #toc > h2,
    #toc > h3,
    #toc > .toc-title {
        font-size: 16px;
        margin-bottom: 12px;
    }

    #toc a {
        font-size: 13px;
        padding: 8px 10px;
    }

    #toc ul ul a {
        font-size: 12px;
        padding: 6px 8px;
        list-style: disc;
    }

    #toc.toc-columns-2 > ul {
        columns: 1;
    }
}

/* Mobile Styles */
@media (max-width: 480px) {
    #toc {
        padding: 12px;
        margin: 16px -12px;
        border-radius: 0;
    }

    #toc > h2,
    #toc > h3,
    #toc > .toc-title {
        font-size: 14px;
        margin-bottom: 12px;
        padding-bottom: 8px;
    }

    #toc a {
        font-size: 12px;
        padding: 8px;
    }

    #toc ul ul a {
        font-size: 11px;
    }

    #toc .badge {
        display: none;
    }

    #toc.toc-full-width {
        width: calc(100% + 24px);
        margin-left: -12px;
        padding: 12px;
    }
}

/* Accessibility */
#toc a:focus-visible {
    outline: 3px solid #667eea;
    outline-offset: 2px;
}

#toc a:visited {
    color: #666;
}

/* TOC with Separators/Lines */
#toc.toc-lines > ul > li {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 8px;
    margin-bottom: 8px;
}

#toc.toc-lines > ul > li:last-child {
    border-bottom: none;
}

/* TOC Animation on Scroll (JavaScript integration) */
#toc a.scroll-active {
    animation: highlightTOC 0.3s ease;
}

@keyframes highlightTOC {
    0% {
        background-color: #fff3cd;
    }
    100% {
        background-color: #e8f0fe;
    }
}

/* Sticky TOC */
#toc.toc-sticky {
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Back to Top Link in TOC */
#toc .back-to-top,
#toc .toc-back-to-top {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #ddd;
    text-align: center;
}

#toc .back-to-top a {
    display: inline-block;
    padding: 8px 16px;
    background-color: #667eea;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

#toc .back-to-top a:hover {
    background-color: #764ba2;
}

/* Breadcrumb Navigation in TOC */
#toc .breadcrumb {
    font-size: 11px;
    color: #666;
    margin-bottom: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #e0e0e0;
}

#toc .breadcrumb a {
    color: #667eea;
    padding: 0;
    margin: 0;
    border: none;
}

#toc .breadcrumb a:hover {
    background: none;
    text-decoration: underline;
}

#toc .breadcrumb-separator {
    color: #999;
    margin: 0 4px;
}
.ev-break-even-cta {
    padding: 30px;
    margin: 30px 0;
    background: #f4faf6;
    border: 2px solid #2e9d57;
    border-radius: 12px;
}

.ev-break-even-cta h2 {
    margin-top: 0;
    color: #1f7a42;
}

.ev-break-even-cta p {
    line-height: 1.6;
}

.ev-break-even-cta ul {
    margin: 15px 0;
    padding-left: 25px;
}

.ev-break-even-cta li {
    margin-bottom: 8px;
}

.comparison-list {
    padding: 15px;
    margin: 15px 0 25px;
    background: #ffffff;
    border-left: 4px solid #2e9d57;
    font-weight: 600;
}

.ev-cta-button {
    display: inline-block;
    padding: 14px 25px;
    background: #2e9d57;
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 600;
    border-radius: 6px;
}

.ev-cta-button:hover {
    background: #217a42;
}


/* Container */
.blog-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Blog Grid */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 40px;
}

/* Mobile (Single Column) */
@media (max-width: 640px) {
  .blog-container {
    padding: 15px;
  }
  
  .blog-grid {
    gap: 16px;
  }
}

/* Tablet (2 Columns) */
@media (min-width: 641px) and (max-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop (3 Columns) */
@media (min-width: 1025px) {
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Large Desktop (4 Columns) */
@media (min-width: 1400px) {
  .blog-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Blog Card */
.blog-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.blog-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
}

/* Card Image */
.blog-card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  overflow: hidden;
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.blog-card:hover .blog-card-image img {
  transform: scale(1.05);
}

/* Card Content */
.blog-card-content {
  padding: 16px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

/* Card Category Tag */
.blog-card-category {
  display: inline-block;
  background-color: #007bff;
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 12px;
  width: fit-content;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.blog-card-category.tech {
  background-color: #17a2b8;
}

.blog-card-category.lifestyle {
  background-color: #28a745;
}

.blog-card-category.travel {
  background-color: #dc3545;
}

/* Card Title */
.blog-card-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1.4;
  color: #222;
}

.blog-card-title a {
  text-decoration: none;
  color: #222;
  transition: color 0.3s ease;
}

.blog-card-title a:hover {
  color: #007bff;
}

/* Card Excerpt */
.blog-card-excerpt {
  font-size: 14px;
  color: #666;
  margin-bottom: 16px;
  flex-grow: 1;
  line-height: 1.5;
}

/* Card Meta (Date, Author, Reading Time) */
.blog-card-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #999;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.blog-card-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.blog-card-meta-item::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  background-color: #ccc;
  border-radius: 50%;
}

.blog-card-meta-item:first-child::before {
  display: none;
}

/* Card Button */
.blog-card-button {
  display: inline-block;
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.3s ease;
  border: none;
  cursor: pointer;
  text-align: center;
  margin-top: auto;
}

.blog-card-button:hover {
  background-color: #0056b3;
}

/* Featured Post (Larger) */
.blog-card.featured {
  grid-column: span 1;
}

@media (min-width: 1025px) {
  .blog-card.featured {
    grid-column: span 2;
    grid-row: span 2;
  }
  
  .blog-card.featured .blog-card-image {
    height: 300px;
  }
}

/* Loading State */
.blog-card.loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Empty State */
.blog-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 8px;
}

.blog-empty h3 {
  font-size: 24px;
  color: #333;
  margin-bottom: 10px;
}

.blog-empty p {
  color: #666;
  font-size: 16px;
}

/* Pagination */
.blog-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}

.blog-pagination a,
.blog-pagination button {
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  color: #333;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.blog-pagination a:hover,
.blog-pagination button:hover {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

.blog-pagination .active {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

/* Filter/Sort Bar */
.blog-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.blog-filters select,
.blog-filters input {
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
}

.blog-filters select:focus,
.blog-filters input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .blog-card,
  .blog-card-image img,
  .blog-card-button {
    transition: none;
  }
}