/* ══ 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, 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 */
/* pill badges: teal is the fill, petrol is the type */
/* numeric units riding beside a figure */
/* 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] h1 small, html[data-palette] h2 small, html[data-palette] h3 small{ color:var(--ink-2); }
/* pages that carry their own bullet marker do not also get the teal square */
/* 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{ 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] header.hero{ background:var(--ground); color:var(--ink-2); border-bottom:1px solid var(--line); }
html[data-palette] header.hero h1{ color:var(--ink); }
html[data-palette] header.hero p{ color:var(--ink-2); }
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 */
/* highlighted lanes: a pale amber wash needs petrol type, not amber */
/* 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{ 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); 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); 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{ 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 */
/* any remaining dark section */
html[data-palette] section[style*="background"]{ background:var(--ground); }
/* 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{ color:var(--ink); }
html[data-palette] [style*="rgba(0, 0, 0.2"]{ background:var(--band); }