.series-badge{
    display:inline-block;
    font-size:12px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:#0f2a4a;
    background:var(--teal-tint);
    padding:5px 12px;
    border-radius:999px;
    margin-bottom:14px;
  }
  h1.title{
    font-size:36px;
    font-weight:800;
    color:#0f2a4a;
    letter-spacing:-0.01em;
    margin:0 0 12px 0;
    line-height:1.15;
  }
  .dek{font-size:18px;color:var(--grey-text);margin:0;}
  .cst-guid-cont h2,
  article h2{
    font-size:24px;
    font-weight:800;
    color: #0f2a4a;
    margin:44px 0 14px 0;
    padding-bottom:10px;
    border-bottom:2px solid #1aa6b7;
    scroll-margin-top:20px;
  }
  .cst-guid-cont h3,
  article h3{
    font-size:17px;
    font-weight:700;
    color:#0f2a4a;
    margin:26px 0 8px 0;
  }
  article p{font-size:16px;margin:0 0 16px 0;}
  article ul{margin:0 0 16px 0;padding-left:22px;}
  article li{font-size:16px;margin-bottom:8px;}
  .cst-guid-cont a,
  article a{color:#d8571a;text-decoration:underline;font-weight:600;}
  article a:hover{color:#0f2a4a;}

  .stat-row{display:flex;gap:14px;flex-wrap:wrap;margin:20px 0 28px 0;}
  .stat{flex:1 1 150px;background:#f6f8f9;border:1px solid #e1e6ea;border-radius:12px;padding:16px;}
  .stat .big{font-size:26px;font-weight:800;color:#0f2a4a;}
  .stat .lbl{font-size:12.5px;color:var(--grey-text);margin-top:4px;}

  .divider{border:none;border-top:1px solid #e1e6ea;margin:44px 0;}

  /* tool / chart cards */
  .tool-card{background:#f6f8f9;border:1px solid #e1e6ea;border-radius:14px;padding:26px;margin:24px 0 36px 0;}
  .tool-eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#1aa6b7;margin-bottom:4px;}
  .tool-eyebrow.interactive{color:#d8571a;}
  .tool-title{font-size:20px;font-weight:800;color:#0f2a4a;margin:0 0 4px 0;}
  .tool-sub{font-size:14px;color:var(--grey-text);margin:0 0 20px 0;}

  .calc-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:28px;}
  @media (max-width:640px){ .calc-grid{grid-template-columns:1fr;} }

  .field{margin-bottom:18px;}
  .field label{display:block;font-size:13px;font-weight:700;color:#0f2a4a;margin-bottom:8px;}
  .preset-row{display:flex;gap:8px;flex-wrap:wrap;}
  .preset{border:1.5px solid #e1e6ea;background:#fff;color:var(--body-text);padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s ease;}
  .preset:hover{border-color:#f26b21;}
  .preset.active{background:#f26b21;border-color:#f26b21;color:#fff;}
  .preset:focus-visible,.charger:focus-visible,input[type=range]:focus-visible{outline:2px solid #d8571a;outline-offset:2px;}
  select.charger{width:100%;padding:11px 12px;border-radius:10px;border:1.5px solid #e1e6ea;font-size:14px;color:var(--body-text);background:#fff;}
  .slider-row{display:flex;align-items:center;gap:12px;}
  .slider-row input[type=range]{flex:1;accent-color:#f26b21;}

  .battery-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
  .battery-shell{width:150px;height:74px;border:4px solid #0f2a4a;border-radius:10px;position:relative;background:#fff;margin-bottom:6px;}
  .battery-nub{position:absolute;right:-11px;top:23px;width:8px;height:26px;background:#0f2a4a;border-radius:0 3px 3px 0;}
  .battery-fill{position:absolute;left:4px;top:4px;bottom:4px;width:10%;border-radius:6px;background:linear-gradient(90deg, #d8571a, #f26b21);transition:width .35s ease;}
  .battery-spark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:20px;color:#fff;filter:drop-shadow(0 0 2px rgba(0,0,0,.35));animation:pulse 1.4s ease-in-out infinite;}
  @keyframes pulse{0%,100%{opacity:.6;}50%{opacity:1;}}
  .battery-caption{font-size:12px;color:var(--grey-text);margin-bottom:18px;}

  .results{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;}
  .result{background:#fff;border:1.5px solid #e1e6ea;border-radius:10px;padding:12px 8px;}
  .result .num{font-size:21px;font-weight:800;color:#0f2a4a;font-variant-numeric:tabular-nums;}
  .result .lbl{font-size:11.5px;color:var(--grey-text);margin-top:2px;}
  .tool-note{grid-column:1/-1;font-size:12px;color:var(--grey-text);border-top:1px solid #e1e6ea;padding-top:12px;margin-top:4px;}

  .legend{display:flex;gap:20px;margin-bottom:10px;flex-wrap:wrap;}
  .legend-item{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--body-text);}
  .swatch{width:14px;height:14px;border-radius:3px;}
  .swatch.petrol{background:#f26b21;}
  .swatch.elec{background:#1aa6b7;}
  .axis-label{fill:var(--grey-text);font-size:11px;}
  .axis-label-petrol{fill:#d8571a;font-size:11px;font-weight:600;}
  .axis-label-elec{fill:#1aa6b7;font-size:11px;font-weight:600;}
  .data-label{fill:#0f2a4a;font-size:11px;font-weight:700;}
  .chart-source{font-size:12px;color:var(--grey-text);margin-top:14px;}

  /* plug connector graphic */
  .plug-grid{display:grid;grid-template-columns:auto 1fr 1fr;gap:0;margin:20px 0;border:1px solid #e1e6ea;border-radius:14px;overflow:hidden;background:#fff;}
  .plug-cell{padding:20px 14px;text-align:center;border-bottom:1px solid #e1e6ea;border-right:1px solid #e1e6ea;}
  .plug-cell:nth-child(3n){border-right:none;}
  .plug-row-label{
    display:flex;align-items:center;justify-content:center;
    font-size:22px;font-weight:800;color:#0f2a4a;
    background:var(--card-bg);
  }
  .plug-cell.header-empty{background:var(--card-bg);border-bottom:1px solid #e1e6ea;}
  .plug-name{font-weight:700;color:#0f2a4a;font-size:14px;margin-top:8px;}
  .plug-sub{font-size:12px;color:var(--grey-text);}

  /* range history chart */
  .range-bars{display:flex;align-items:flex-end;gap:18px;height:200px;margin:20px 0 8px 0;padding:0 4px;}
  .range-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;}
  .range-bar{
    width:100%;
    max-width:56px;
    flex-shrink:0;
    border-radius:8px 8px 0 0;
    background:linear-gradient(180deg, #1aa6b7, #0f2a4a);
    position:relative;
  }
  .range-bar-val{font-size:13px;font-weight:800;color:#0f2a4a;margin-bottom:6px;}
  .range-bar-year{font-size:12px;color:var(--grey-text);margin-top:8px;}

  .cta-box{background:#0f2a4a;border-radius:14px;padding:28px;color:#fff;margin:44px 0 0 0;}
  .cta-box p{color:#dbe4ec;margin-bottom:16px;}
  .cta-box a.btn{display:inline-block;background:#f26b21;color:#fff;font-weight:800;padding:12px 22px;border-radius:999px;text-decoration:none;}

  .tldr{background:var(--teal-tint);border:1px solid #BFE4E8;border-radius:14px;padding:22px 26px;margin-bottom:32px;}
  .tldr-title{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#0f2a4a;margin-bottom:10px;}
  .tldr ul{margin:0;padding-left:20px;}
  .tldr li{font-size:15px;margin-bottom:8px;color:var(--body-text);}
  .tldr li:last-child{margin-bottom:0;}

  .toc-in{background:#f6f8f9;border:1px solid #e1e6ea;border-radius:14px;padding:22px 26px;margin-bottom:32px;box-shadow: 0 6px 16px rgba(15, 42, 74, 0.10);}
  .toc-title{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#0f2a4a;margin-bottom:10px;}
  .toc-in ol{margin:0;padding-left:20px;counter-reset:toc;}
  .toc-in li{font-size:15px;margin-bottom:8px;}
  .toc-in a{color:var(--body-text);text-decoration:none;font-weight:600;border-bottom:1px dotted #e1e6ea;}
  .toc-in a:hover{color:#d8571a;border-bottom-color:#d8571a;}

  .subsection-title{font-size:15px;font-weight:800;color:#0f2a4a;margin:22px 0 4px 0;}

  .app-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0;}
  @media (max-width:640px){.app-grid{grid-template-columns:1fr;}}
  .app-card{background:#fff;border:1.5px solid #e1e6ea;border-radius:10px;padding:14px 16px;}
  .app-card a{font-size:15px;font-weight:700;}
  .app-card p{font-size:13px;color:var(--grey-text);margin:4px 0 0 0;}

  .gov-box{background:#fff;border:1.5px solid #1aa6b7;border-radius:12px;padding:18px 20px;margin:16px 0;}
  .gov-box .subsection-title{margin-top:0;}

  .article-img{width:85%;max-width:560px;aspect-ratio:16/9;object-fit:cover;border-radius:14px;display:block;margin:20px auto 8px auto;}
  .img-caption{font-size:13px;color:var(--grey-text);font-style:italic;text-align:center;margin:0 0 28px 0;}
  .hero-img{width:100%;max-width:100%;aspect-ratio:16/9;border-radius:16px;margin:0 0 8px 0;}

  /* ================================================================================================================================================= */
  .guide-py {
    padding: 30px 0;
  }
  .cst-guid-cont {
    max-width: 920px;
    margin: 0 auto;
  }
  .toc-hover:hover {
    transition: all 0.6s ease;
    color: #EE6806;
  }
  @media (min-width: 768px) {
    .guide-py {
      padding: 60px 0;
    }
  }
  @media (min-width: 1200px) {
    .guide-py {
      padding: 80px 0;
    }
  }

  /* ============ TOC: sticky page-nav that collapses to a dropdown on mobile ============ */
  .toc-caret { display: none; } /* hidden on desktop; shown only in the mobile block below */

  @media (max-width: 767px) {
    .toc {
      position: sticky;
      /* sits just below the fixed site header — guide.js sets the real height, 124px is a fallback */
      top: var(--toc-sticky-top, 124px);
      z-index: 20;
      transition: top 0.2s ease;
    }
    /* once the bar actually pins, guide.js adds .is-stuck: tuck up to the shrunk-header
       line and drop the inner top padding so it sits tight (resting state keeps its padding) */
    .toc.is-stuck {
      top: 90px;
    }
    .toc.is-stuck .guide-py {
      padding-top: 0;
    }
    /* collapse/dropdown behaviour is switched on by guide.js (.is-collapsible) so the
       list stays fully visible if JS never runs (progressive enhancement) */
    .toc.is-collapsible .toc-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0;
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
    }
    .toc.is-collapsible .toc-caret {
      display: inline-block;
      width: 9px;
      height: 9px;
      margin-left: 12px;
      flex: none;
      border-right: 2px solid #0f2a4a;
      border-bottom: 2px solid #0f2a4a;
      transform: rotate(45deg);
      transition: transform 0.25s ease;
    }
    .toc.is-collapsible ol {
      max-height: 0;
      overflow: hidden;
      margin: 0;
      padding-top: 0;
      padding-bottom: 0;
      transition: max-height 0.3s ease, margin 0.3s ease;
    }
    .toc.is-collapsible.is-open ol {
      max-height: 60vh;
      overflow-y: auto;
      margin-top: 12px;
    }
    .toc.is-collapsible.is-open .toc-caret {
      transform: rotate(-135deg);
    }
  }