/* ══ generic conversion layer ══════════════════════════════════
   The homepage blocks name its own sections. Every other page has
   its own section classes, so this catches them by behaviour. */
/* no dark grounds anywhere but the footer */
html[data-palette] section:not(.sharband):not(.next):not(.band), html[data-palette] header.hero, html[data-palette] main > div{ background:var(--ground); }
/* headline emphasis is never teal letterforms */
/* the small-label family across the deep-dive pages */
html[data-palette] .unit{ color:var(--ink); }
/* pill badges: teal is the fill, petrol is the type */
/* numeric units riding beside a figure */
html[data-palette] .figure small{ color:var(--ink-2); }
/* anything still painting teal type on a light card */
/* unit suffixes riding beside a figure, wherever they live */
html[data-palette] .kwh small, html[data-palette] .v small, html[data-palette] .num small, html[data-palette] h1 small, html[data-palette] h2 small, html[data-palette] h3 small, html[data-palette] .figure small{ color:var(--ink-2); }
/* pages that carry their own bullet marker do not also get the teal square */
html[data-palette] .eyebrow .ibatt-bullet{ display:none; }
/* product illustration panels move off the retired green onto petrol */
/* the page-label chip beside the logo is clutter; no competitor shows one */
html[data-palette] .page-label{ display:none; }
/* pages carrying their own battery glyph beside an eyebrow: one marker, not two */
/* the hero product render moves off the retired green onto petrol */
/* ══ inherited dark-era colour, caught at the token ═════════════
   These two tokens were cream because every ground used to be dark.
   On a light page they render text at 1:1 against the background. */
html[data-palette]{ --ink-soft:var(--ink-2); --ink-softer:var(--ink-3); --cream:var(--ground); }
html[data-palette] footer{ --ink-soft:rgba(251,249,244,.86); --ink-softer:rgba(251,249,244,.60); }
/* large amber numerals on white cards: amber is a fill, not a figure colour */
html[data-palette] .kwh, html[data-palette] .step .num, html[data-palette] .num{ color:var(--ink); }
/* ghost buttons away from the amber bar */
html[data-palette] .ghost:not(nav.top .ghost), html[data-palette] .cta-ghost:not(.nav-cta-group .cta-ghost){ color:var(--ink); border:1.5px solid var(--line); background:transparent; }
html[data-palette] .ghost:not(nav.top .ghost):hover, html[data-palette] .cta-ghost:not(.nav-cta-group .cta-ghost):hover{ border-color:var(--teal) !important; background:var(--band) !important; }
/* ══ page heads on the deep-dive pages ═════════════════════════
   These were dark sections. The ground is bone now, so the type
   has to come back to petrol or it renders invisible. */
html[data-palette] .pagehead, html[data-palette] header.hero{ background:var(--ground); color:var(--ink-2); border-bottom:1px solid var(--line); }
html[data-palette] .pagehead h1, html[data-palette] .pagehead h2, html[data-palette] header.hero h1{ color:var(--ink); }
html[data-palette] .pagehead p, html[data-palette] .pagehead .lede, html[data-palette] header.hero p, html[data-palette] header.hero .lede{ color:var(--ink-2); }
html[data-palette] .pagehead .eyebrow, html[data-palette] header.hero .eyebrow{ color:var(--ink); }
/* anything still inheriting the old cream text colour on a light ground */
html[data-palette] .wrap > h1, html[data-palette] .wrap > h2, html[data-palette] section > .wrap h1{ color:var(--ink); }
/* the nav CTA: some pages wrap it differently, so target it both ways */
html[data-nav] nav.top .cta:not(.cta-ghost), html[data-nav] .nav-cta-group .cta:not(.cta-ghost){ background:var(--ink); color:#FBF9F4; border:1.5px solid var(--ink); }
html[data-nav] nav.top .cta:not(.cta-ghost):hover{ background:var(--teal) !important; border-color:var(--teal) !important; color:var(--ink) !important; }
html[data-nav] nav.top .cta-ghost{ background:var(--ground); border:1.5px solid var(--ground); color:var(--ink); font-weight:700; }
html[data-nav] nav.top .cta-ghost .lock{ color:var(--teal); }
/* pale wash panels that assumed a dark ground */
html[data-palette] .lbl{ color:var(--ink); }
html[data-palette] .em-amber{ color:var(--ink); }
/* highlighted lanes: a pale amber wash needs petrol type, not amber */
html[data-palette] .lane.hi{ background:var(--band-amber); border-color:var(--band-amber-line); }
html[data-palette] .lane.hi *, html[data-palette] .lane.hi b, html[data-palette] .lane.hi strong{ color:var(--ink); }
html[data-palette] .lane.hi p, html[data-palette] .lane.hi li{ color:var(--ink-2); }
/* utility pages carry a header.page instead of a pagehead */
html[data-palette] header.page{ background:var(--ground); color:var(--ink-2); border-bottom:1px solid var(--line); }
html[data-palette] header.page h1, html[data-palette] header.page h2, html[data-palette] header.page .display{ color:var(--ink); }
html[data-palette] header.page p, html[data-palette] header.page .lede{ color:var(--ink-2); }
html[data-palette] header.page .eyebrow{ color:var(--ink); }
/* inline links in running copy: petrol type on a teal underline, because teal letterforms on a light ground are the one thing banned */
html[data-palette] p a:not(.cta):not(.btn):not(.jump):not(.cta-line):not(.gl), html[data-palette] li a:not(.cta):not(.btn):not(.jump):not(.mobile-nav-link), html[data-palette] dd a, html[data-palette] td a{ color:var(--ink) !important; text-decoration:none; border-bottom:2px solid var(--teal); padding-bottom:1px; }
html[data-palette] p a:hover, html[data-palette] li a:hover{ background:var(--band); }
html[data-palette] footer li a:not(.cta):not(.btn):not(.jump):not(.mobile-nav-link), html[data-palette] footer p a:not(.cta):not(.btn):not(.jump):not(.cta-line):not(.gl){ color:rgba(251,249,244,.80) !important; border-bottom:0; background:transparent; }
html[data-palette] footer li a:hover, html[data-palette] footer p a:hover{ color:#FFFFFF !important; background:transparent !important; }
/* ══ pages with their own naming scheme ════════════════════════ */
html[data-palette] [class*="__eyebrow"], html[data-palette] [class*="__tag"], html[data-palette] [class*="__more"], html[data-palette] [class*="__sub"], html[data-palette] [class*="__title"], html[data-palette] .ar, html[data-palette] .placeholder{ color:var(--ink); }
/* dark feature panels on the newsroom and elsewhere */
html[data-palette] [class*="__title"]{ color:var(--ink); }
html[data-palette] .card, html[data-palette] [class*="card"]{ ; }
html[data-palette] .card{ background:var(--surface); }
/* amber wash chips need petrol type */
html[data-palette] .placeholder{ background:var(--band-amber); color:var(--ink); }
/* any remaining dark section, but never the pale teal and pale amber bands */
html[data-palette] section.pad:not(.band):not(.sharband):not(.next):not(.what):not(.faq):not(.bundle):not(.unit):not(.split){ background:var(--ground); }
html[data-palette] section[style*="background:#0"], html[data-palette] section[style*="background:#1"], html[data-palette] section[style*="background: #0"], html[data-palette] section[style*="background: #1"]{ background:var(--ground); }
/* the two bands are part of the system, not leftovers */
/* table headers were teal on the old dark tables */
html[data-palette] th{ color:var(--ink); background:var(--raise,var(--band)); }
html[data-palette] table{ color:var(--ink-2); }
/* newsroom take-outs sat on a translucent black wash */
html[data-palette] .take, html[data-palette] [class*="take"]{ background:transparent; }
html[data-palette] .take{ background:var(--band); border:1px solid var(--band-line); }
html[data-palette] .take *{ color:var(--ink-2); }
html[data-palette] .take .n, html[data-palette] .take .num{ color:var(--ink); }
html[data-palette] [style*="rgba(0, 0, 0.2"]{ background:var(--band); }
/* links that sit directly in a container rather than inside a p or li */
html[data-palette] .note a, html[data-palette] .aside a, html[data-palette] .fine a, html[data-palette] .card a:not(.cta):not(.btn):not(.jump){ color:var(--ink); text-decoration:none; border-bottom:2px solid var(--teal); padding-bottom:1px; }
/* ══ one dropdown shape everywhere ═════════════════════════════
   Some pages only carried the old narrow popover. Every panel is
   the full-width mega panel now, so the nav behaves the same on
   every page. */
html[data-palette] nav.top{ position:sticky; top:0; z-index:80; display:flex; align-items:center; justify-content:space-between; }
html[data-palette] .nav-dd{ position:static; }
html[data-palette] .nav-links{ position:static; }
html[data-palette] .nav-dd-menu{ position:absolute; left:0; right:0; top:100%; width:auto; min-width:0; max-width:none; transform:translateY(10px); background:var(--surface); border:0; border-top:1px solid var(--line); border-radius:0 0 22px 22px; box-shadow:0 34px 80px -30px rgba(10,37,48,.34); padding:2rem clamp(1.4rem,4vw,2.6rem) 2.2rem; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.4rem 1.6rem; }
@media (max-width:1200px){
  html[data-palette] .nav-dd-menu{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:940px){
  html[data-palette] .nav-dd-menu{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
html[data-palette] .nav-dd:hover .nav-dd-menu, html[data-palette] .nav-dd.open .nav-dd-menu{ transform:translateY(0) !important; }
html[data-palette] .nav-dd--end .nav-dd-menu{ left:0; right:0; }
html[data-palette] .nav-dd-menu a{ display:block; padding:.75rem .85rem; border-radius:11px; text-decoration:none; }
html[data-palette] .nav-dd-menu .mi-t{ display:block; font-weight:700; font-size:1rem; line-height:1.2; color:var(--ink); }
/* a mail glyph inside a button that opens an email */
html[data-palette] a[href^="mailto:"].cta{ display:inline-flex; align-items:center; }
/* the numbered rail on the getting-set-up page */
/* ══ the bar now carries six items plus two controls ═══════════ */
html[data-palette] nav.top{ gap:1rem; padding-left:clamp(1rem,2.4vw,2rem) !important; padding-right:clamp(1rem,2.4vw,2rem) !important; }
html[data-palette] .logo-nav{ height:46px; flex:0 0 auto; }
@media (min-width:1280px){
  html[data-palette] .logo-nav{ height:52px; }
}
html[data-palette] .nav-links{ gap:.15rem; }
html[data-palette] .nav-links > a, html[data-palette] .nav-dd-trigger{ font-size:.94rem; padding:.5rem .62rem; white-space:nowrap; }
@media (min-width:1380px){
  html[data-palette] .nav-links{ gap:.35rem !important; }
  html[data-palette] .nav-links > a, html[data-palette] .nav-dd-trigger{ font-size:1rem !important; padding:.5rem .8rem !important; }
}
html[data-palette] .nav-cta-group{ gap:.45rem; flex:0 0 auto; }
html[data-palette] .nav-cta-group .cta{ font-size:.9rem; padding:.62rem 1.05rem; white-space:nowrap; }
@media (max-width:1120px){
  html[data-palette] .nav-cta-group .cta-ghost{ display:none; }
}
/* the coming-soon shell is a real page now, not a holding note */
html[data-palette] .soon{ min-height:0; padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,4rem); }
html[data-palette] .soon h1{ font-size:clamp(2.4rem,5.4vw,3.9rem); line-height:1.02; margin-bottom:1rem; }
html[data-palette] .soon .lede{ font-size:1.1rem; }
/* ══ the nav component, self-contained ═════════════════════════
   The legal and utility pages never carried the full header, so
   swapping the markup in left them with no layout at all. These
   rules make the bar work on a page that has none of its own. */
html[data-palette] nav.top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; box-sizing:border-box; }
html[data-palette] nav.top .logo-link{ display:inline-flex; align-items:center; line-height:0; text-decoration:none; }
html[data-palette] nav.top .logo-nav{ width:auto; display:block; }
html[data-palette] .nav-links{ display:none; align-items:center; font-weight:600; }
@media (min-width:1060px){
  html[data-palette] .nav-links{ display:inline-flex; }
}
html[data-palette] .nav-dd{ display:inline-flex; align-items:center; }
html[data-palette] .nav-dd-trigger{ display:inline-flex; align-items:center; gap:.32rem; background:transparent; border:0; margin:0; cursor:pointer; font-family:inherit; font-weight:600; line-height:1.2; }
html[data-palette] .nav-links > a{ display:inline-flex; align-items:center; text-decoration:none; font-weight:600; line-height:1.2; }
html[data-palette] .chev{ width:12px; height:12px; flex:0 0 auto; opacity:.85; transition:transform .24s var(--ease-out,ease); }
html[data-palette] .nav-dd:hover .chev{ transform:rotate(180deg); }
html[data-palette] .nav-cta-group{ display:inline-flex; align-items:center; }
html[data-palette] nav.top .cta{ display:inline-flex; align-items:center; justify-content:center; gap:.45rem; font-family:inherit; font-weight:700; line-height:1; text-decoration:none; border-radius:999px; cursor:pointer; box-sizing:border-box; }
html[data-palette] nav.top .lock{ width:14px; height:14px; flex:0 0 auto; display:inline-block; }
html[data-palette] nav.top svg{ max-width:100%; }
/* the burger only exists below the desktop breakpoint */
/* a fixed bar needs the page to start below it */
html[data-palette] body{ padding-top:0; }
html[data-palette] nav.top ~ *:not(script):not(style){ ; }
/* the panel is closed until asked for. Pages without their own header
   CSS had no closed state at all, so every menu rendered open. */
html[data-palette] .nav-dd-menu{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity .16s ease, visibility .16s ease, transform .22s var(--ease-out,ease); }
html[data-palette] .nav-dd:hover > .nav-dd-menu, html[data-palette] .nav-dd.open > .nav-dd-menu{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; }
/* body{overflow-x:hidden}turns the body into a scroll container, which adds a
   scrollbar's width to scrollWidth and reads as a horizontal overflow that is
   not there. clip does the same job without the scroll container. */
html[data-palette] body{ overflow-x:clip; overflow-y:visible; }
html[data-palette]{ overflow-x:clip; }
/* ══ the sticky page index clears the bar instead of sliding under it ══
      nav.top is 109px and sticky, so a TOC pinned at 6rem (96px) tucked its
      own heading behind the bar and, being transparent, let the page text
      show through it on the way past. Pin below the bar, give it a ground, and cap it so a sixteen-item index can never fill the viewport. ══ */
html[data-palette]{ --navh:109px; }
html[data-palette] aside.toc{ position:sticky; top:calc(var(--navh) + 1.25rem); align-self:start; max-height:calc(100vh - var(--navh) - 4rem); overflow-y:auto; overscroll-behavior:contain; background:var(--ground); border-left:1px solid var(--line); padding:0.85rem 0.35rem 0.85rem 1.5rem; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
html[data-palette] aside.toc::-webkit-scrollbar{ width:6px; }
html[data-palette] aside.toc::-webkit-scrollbar-thumb{ background:var(--line); border-radius:99px; }
html[data-palette] aside.toc h4{ color:var(--ink-2) !important; }
/* stacked layouts have no column to pin to */
@media (max-width:900px){
  html[data-palette] aside.toc{ position:static; max-height:none; overflow:visible; }
}
/* ══ the burger ══
      nav-mobile.js draws bone bars inside a bone-edged disc. On the amber bar
      that is roughly 1.4:1 — the control was there and unreadable. A teal disc
      carries the accent and gives the bars a ground they read on. ══ */
html[data-palette] .nav-toggle, html[data-palette] .nav-toggle.floating{ background:var(--teal) !important; border:1px solid rgba(10,37,48,.20) !important; box-shadow:0 6px 16px -8px rgba(10,37,48,.5) !important; }
html[data-palette] .nav-toggle:hover, html[data-palette] .nav-toggle.floating:hover{ background:var(--teal) !important; border-color:rgba(10,37,48,.38) !important; }
html[data-palette] .nav-toggle .bar, html[data-palette] .nav-toggle.floating .bar{ background:var(--ink) !important; height:2px !important; border-radius:2px !important; }
/* ══ the drawer ══ a bone mark on a white panel is not a mark */
html[data-palette] .mobile-nav-head .logo-link img{ height:30px; }
html[data-palette] .mobile-nav-link{ color:var(--ink); }
html[data-palette] .mobile-nav-link[style*="FFB300"], html[data-palette] .mobile-nav-link[style*="ffb300"]{ color:var(--ink); }
/* hover, focus and current stay ink — the band and the teal rule carry the
   state, so no teal letterforms on a light ground */
html[data-palette] .mobile-nav-link:hover, html[data-palette] .mobile-nav-link:focus, html[data-palette] .mobile-nav-link:focus-visible, html[data-palette] .mobile-nav-link:active, html[data-palette] .mobile-nav-link.active{ color:var(--ink) !important; background:var(--band) !important; box-shadow:inset 3px 0 0 var(--teal) !important; }