/* ==========================================================================
EnergyPlus — redesign stylesheet
Minimal / editorial, buffered content column, midnight hero,
compressed nav + accordion mobile drawer. Replaces /css/site.css and
/css/compare.css. Brand assets from repo-root /static (../../static here).
========================================================================== */
:root{
--ink:#14213D; --ink-70:#414A63; --ink-50:#5F687D; --ink-30:#9BA2B2;
--midnight-deep:#0E1729;
--paper:#FFFFFF; --mist:#F1F4F6; --mist-2:#E7ECEF;
--line:#E4E8EC; --line-strong:#CBD3D9;
--turq:#00B8A9; --turq-deep:#00897E; --turq-ink:#067A6F; --turq-wash:#E9F6F4;
--gold:#FBBE1E; /* bright bolt yellow — highlight/accent (mascot face) */
--gold-cta:#EFA100; /* the mascot's deeper golden yellow — CTA fill, INK text (~7.2:1 AA) */
--gold-deep:#D98600; --gold-wash:#FFF3D6; /* hover = the bolt's shadow tone; pale wash */
--danger:#C81E1E; --danger-wash:#FEF2F2; --warning:#B45309; --warning-wash:#FEF3C7;
--cat-solar:#F59E0B; --cat-ev:#6D28D9; --cat-ac:#06B6D4;
--font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
--space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
--icon-context-sm:56px; --icon-context-md:72px; --icon-context-lg:100px; /* mascot illustration icons — sized up to read as characters, not tiny marks */
/* sharper, less "bubbly" radii */
--radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:18px;
--container:1080px; --container-wide:1240px; --gutter:24px; --header-h:64px;
--shadow-sm:0 1px 2px rgba(20,33,61,.05);
--shadow-md:0 10px 30px rgba(20,33,61,.08);
--shadow-lg:0 20px 48px rgba(20,33,61,.14);
--ease:cubic-bezier(.4,0,.2,1); --dur-fast:120ms; --dur:200ms; --dur-slow:300ms;
/* compatibility aliases (old palette → new brand) */
--eph-navy:var(--ink); --eph-blue:var(--turq-ink); --eph-accent:var(--turq);
--eph-green:var(--turq); --eph-white:#fff; --eph-gray:var(--mist);
--eph-border:var(--line); --eph-text:var(--ink); --eph-muted:var(--ink-50);
--eph-bg:#fff; --eph-bg-alt:var(--mist); --eph-h:var(--header-h);
--eph-r:var(--radius-md); --eph-radius:var(--radius-lg);
--eph-z-mega:900; --eph-z-over:950; --eph-z-draw:1000;
--ep-blue:var(--gold-cta); --ep-navy:var(--ink); --ep-text:var(--ink);
--ep-muted:var(--ink-50); --ep-border:var(--line); --ep-bg:var(--mist);
--ep-card:#fff; --ep-green:var(--turq);
--s-1:8px; --s-2:12px; --s-3:16px; --s-4:20px; --s-5:24px; --s-6:32px;
}
/* ---- Base & type ---- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
html,body{overflow-x:clip;} /* clip (not hidden) so position:sticky header still works */
body{margin:0; font-family:var(--font); color:var(--ink); background:var(--paper);
font-size:16px; line-height:1.6; font-weight:400; -webkit-font-smoothing:antialiased;}
img,svg,video{max-width:100%; height:auto;}
picture{display:contents;} /* webp+png wrappers stay transparent to layout/selectors */
*{min-width:0;}
h1,h2,h3,h4{color:var(--ink); line-height:1.15; letter-spacing:0; margin:0 0 .5em; font-weight:800;}
h1{font-size:clamp(28px,3.2vw,38px);}
h2{font-size:clamp(21px,2.3vw,27px); font-weight:700;}
h3{font-size:19px; font-weight:700;}
p{margin:0 0 1em; color:var(--ink-70);}
strong,b{font-weight:700;}
hr{border:0; border-top:1px solid var(--line); margin:var(--space-6) 0;}
a{color:var(--turq-ink); text-decoration:none; transition:color var(--dur) var(--ease);}
a:hover{color:var(--turq-deep); text-decoration:underline;}
/* a:visited rule removed: it duplicated the base `a` colour but its higher
specificity (0,1,1) overrode single-class link components (.ep-nav__link,
.cta-button, .ep-header__cta...) for any VISITED url - the whole top menu
rendered turquoise for returning visitors. Visited links now simply keep
each component's own colour. */
::selection{background:var(--turq-wash); color:var(--ink);}
:focus-visible{outline:2px solid var(--turq-deep); outline-offset:2px; border-radius:3px;}
.nav{display:none !important;}
.ep-rate__v,.sidebar__price,.sidebar__savings-value,.hero__savings strong,
.home-preview__price,.home-preview__delta,.usage-money,.summary-box__row{font-variant-numeric:tabular-nums;}
/* ==========================================================================
Layout — the buffered content column + full-bleed bands
========================================================================== */
main{display:block; max-width:var(--container); margin:0 auto; padding:0 var(--gutter);}
.container,.ep-container{width:100%; margin:0 auto;}
main .container,main .ep-container{max-width:none; padding:0;}
section{margin:0;}
/* bands that break the column to full viewport width */
.home-hero,.hero,.form-section{
width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);}
.hero > .container,.form-section > .container{
max-width:var(--container); margin:0 auto; padding:0 var(--gutter);}
.ep-section{padding:var(--space-8) 0;}
.ep-section--alt{background:var(--mist);}
/* ── Information-page hero (LIGHT) — scene illustration ─────────────────────
Strict structure (see STYLE_GUIDE §"Information-page hero"):
*/
.ep-hero{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius-xl);
margin:16px 0 36px; overflow:hidden; display:grid; grid-template-columns:1.25fr .9fr; align-items:center;}
.ep-hero__content{padding:40px 44px; align-self:center; min-width:0;}
.ep-hero h1{color:var(--ink); margin:0 0 12px;}
.ep-hero p,.ep-hero li{color:var(--ink-70);}
.ep-hero strong{color:var(--ink); font-weight:700;}
.ep-hero a{color:var(--turq-ink);}
/* art panel matches the scene's 7:5 aspect so the illustration is never stretched/pixelated */
.ep-hero__art{position:relative; align-self:center; margin:24px 24px 24px 0; aspect-ratio:7/5;
border-radius:var(--radius-lg); overflow:hidden; background:linear-gradient(180deg,#EAF5F3,#DCEEEB);}
.ep-hero__scene{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center bottom;}
@media (max-width:820px){
.ep-hero{grid-template-columns:1fr;}
.ep-hero__art{order:-1; margin:16px 16px 0; max-width:360px; width:100%; justify-self:center;}
.ep-hero__content{padding:24px 22px;}
}
/* live-rates strip + final CTA band → clean brand surfaces (kill old green/white inline) */
.ep-live-rates{background:var(--mist) !important; border:1px solid var(--line) !important;
border-radius:var(--radius-lg); padding:22px !important; margin:24px 0 !important;}
.ep-cta-final{background:var(--mist) !important; border:1px solid var(--line);
border-radius:var(--radius-lg); padding:32px !important; margin:32px 0 !important;}
/* ==========================================================================
Buttons (gold explore · turquoise commit · neutral outline)
========================================================================== */
/* ── Button system — exactly 4 types, all WCAG AA ──────────────────────────
1 EXPLORE gold fill (mascot yellow) + ink text (~7.2:1) — compare / discover
2 COMMIT turquoise + ink text (6:1) — switch / confirmation actions
3 NEUTRAL paper + border + ink text — Edit / Back / secondary
4 GHOST transparent + turq-ink text — tertiary / inline
------------------------------------------------------------------------- */
.cta-button,.ep-btn,.ep-btn-primary,button.cta-button,.actions .cta-button,
.top-cta__btn,.sticky-cta__btn,.cta-btn,.email-results__btn,input[type="submit"]{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
font-family:var(--font); font-size:16px; font-weight:700; line-height:1;
padding:0 22px; height:48px; border:0; border-radius:var(--radius-md);
background:var(--gold-cta); color:var(--ink) !important; text-decoration:none !important;
cursor:pointer; transition:background var(--dur) var(--ease),transform var(--dur-fast) var(--ease); white-space:nowrap;}
.ep-btn-primary{background:var(--gold-cta) !important; color:var(--ink) !important;}
.cta-button:hover,.ep-btn-primary:hover,.actions .cta-button:hover,
.sticky-cta__btn:hover,input[type="submit"]:hover{background:var(--gold-deep); color:var(--ink) !important; text-decoration:none !important;}
.cta-button:active,.ep-btn-primary:active{transform:scale(.99);}
.cta-button[disabled],button[disabled]{background:var(--mist-2); color:var(--ink-30) !important; cursor:not-allowed;}
.actions .cta-button,#applyForm .actions .cta-button{width:100%; height:54px; font-weight:800;}
/* 3 · NEUTRAL */
.ep-btn-secondary,.details-card__edit,.details-edit__label{
display:inline-flex; align-items:center; justify-content:center; gap:6px;
font-family:var(--font); font-weight:700; font-size:14.5px; padding:0 16px; height:44px;
border-radius:var(--radius-md); background:var(--paper); color:var(--ink) !important;
border:1px solid var(--line-strong); text-decoration:none !important; cursor:pointer; transition:background var(--dur) var(--ease);}
.ep-btn-secondary{background:var(--paper) !important; color:var(--ink) !important; border-color:var(--line-strong) !important;}
.ep-btn-secondary:hover,.details-card__edit:hover{background:var(--mist); color:var(--ink) !important; border-color:var(--turq-deep);}
/* 2 · COMMIT / decision CTAs → calming turquoise (ink text, 6:1) at the high-stakes,
drop-off moments. Coral stays for lower-stakes explore actions. */
.cta-button--primary,#submitBtn,.js-tariff-apply,.cta-primary,.cta-primary--big,.sticky-cta__btn{
background:var(--turq) !important; color:var(--ink) !important;}
.cta-button--primary:hover,#submitBtn:hover,.js-tariff-apply:hover,
.cta-primary:hover,.cta-primary--big:hover,.sticky-cta__btn:hover{
background:var(--turq-deep) !important; color:var(--ink) !important;}
/* Two-line CTA — a main label with a small subtitle beneath ("Start switch" /
"Final step · 14-day cooling-off"). Stack them with auto height so the subtitle
never collides with the label or spills outside the button. */
.cta-primary--big,
a.cta-button:has(.cta-btn__sub),button.cta-button:has(.cta-btn__sub){
flex-direction:column; gap:3px; height:auto; min-height:56px;
padding:11px 22px; line-height:1.2; white-space:normal; text-align:center;}
.cta-btn__main{font-size:16px; font-weight:800; line-height:1.15;}
.cta-btn__sub{font-size:12px; font-weight:600; line-height:1.2; color:var(--ink) !important; opacity:.82;}
/* ==========================================================================
Header / compressed nav / mega
========================================================================== */
.ep-header *,.ep-header *::before,.ep-header *::after{box-sizing:border-box;}
.ep-header ul,.ep-drawer ul{list-style:none; margin:0; padding:0;}
.ep-header button{font-family:inherit; cursor:pointer;}
.ep-header{position:sticky; top:0; z-index:var(--eph-z-mega); background:rgba(255,255,255,.92);
backdrop-filter:saturate(180%) blur(8px); -webkit-backdrop-filter:saturate(180%) blur(8px);
border-bottom:1px solid var(--line);}
.ep-header__inner{display:flex; align-items:center; gap:6px; max-width:var(--container-wide);
margin:0 auto; padding:0 var(--gutter); height:var(--header-h);}
/* ── Logo wordmark lockup (bolt mascot + "Energy" + teal "Plus") ─────────────── */
.ep-logo{flex-shrink:0; margin-right:auto; display:inline-flex; align-items:center; gap:8px; text-decoration:none;}
.ep-lockup__mark{height:30px; width:auto; flex:0 0 auto;}
.ep-lockup__text{font-family:var(--font); font-weight:800; font-size:20px; letter-spacing:-.02em; line-height:1; color:var(--ink); white-space:nowrap;}
.ep-lockup__text span{color:var(--turq-ink);} /* the "Plus" */
.ep-logo:hover .ep-lockup__text{opacity:.88;}
/* dark surfaces (drawer head + footer) → white "Energy", brighter teal "Plus" */
.ep-drawer__head-logo .ep-lockup__text,.ep-footer__logo .ep-lockup__text{color:#fff;}
.ep-drawer__head-logo .ep-lockup__text span,.ep-footer__logo .ep-lockup__text span{color:var(--turq);}
.ep-nav{flex:0 0 auto; display:flex; align-items:stretch; position:relative;} /* mega anchor */
.ep-nav__list{display:flex; align-items:stretch;}
.ep-nav__item{position:static; display:flex; align-items:stretch;} /* megas anchor to .ep-nav, never overflow */
.ep-nav__link{display:flex; align-items:center; gap:5px; padding:0 14px; height:var(--header-h);
font-size:15px; font-weight:600; color:var(--ink); text-decoration:none; white-space:nowrap;
border-bottom:2px solid transparent; transition:color var(--dur),border-color var(--dur);}
.ep-nav__link svg{opacity:.45; transition:transform var(--dur);}
.ep-nav__item:hover .ep-nav__link,.ep-nav__item:focus-within .ep-nav__link{color:var(--turq-ink); border-bottom-color:var(--turq);}
.ep-nav__item:hover .ep-nav__link svg,.ep-nav__item:focus-within .ep-nav__link svg{transform:rotate(180deg); opacity:1;}
/* megas anchor to the right edge of the (right-hugging) nav and extend left — always on-screen */
.ep-mega{position:absolute; top:calc(var(--header-h) - 1px); right:0; left:auto; width:max-content;
max-width:min(720px,calc(100vw - 48px)); background:var(--paper); border:1px solid var(--line);
border-top:2px solid var(--turq); border-radius:0 0 var(--radius-lg) var(--radius-lg);
box-shadow:var(--shadow-lg); padding:22px 24px; opacity:0; visibility:hidden; pointer-events:none;
transition:opacity var(--dur),visibility var(--dur); z-index:var(--eph-z-mega);}
.ep-nav__item:hover .ep-mega,.ep-nav__item:focus-within .ep-mega{opacity:1; visibility:visible; pointer-events:auto;}
.ep-mega__grid{display:grid; gap:26px;}
.ep-mega__grid--1{grid-template-columns:minmax(300px,1fr);}
.ep-mega__grid--2{grid-template-columns:repeat(2,minmax(230px,1fr));}
.ep-mega__h{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
color:var(--ink-50); margin:0 0 10px; padding-bottom:8px; border-bottom:1px solid var(--line);}
.ep-mega__links{display:flex; flex-direction:column; gap:1px;}
.ep-mega__links--2col{display:grid; grid-template-columns:1fr 1fr; gap:1px 20px;}
.ep-mega__links a,.ep-mega__links--2col a{display:block; padding:6px 8px; font-size:13.5px;
color:var(--ink) !important; text-decoration:none !important; border-radius:var(--radius-sm);
transition:background var(--dur),color var(--dur);}
.ep-mega__links a:hover{background:var(--mist); color:var(--turq-ink) !important;}
.ep-header__search{flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:var(--radius-sm); color:var(--ink); margin-left:4px; transition:background var(--dur);}
.ep-header__search:hover{background:var(--mist); color:var(--turq-ink);}
/* turquoise + ink text = 6:1 (white-on-turquoise was only 2.5:1) */
.ep-header__cta{flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
background:var(--turq); color:var(--ink) !important; text-decoration:none !important; font-size:14px;
font-weight:700; padding:10px 18px; border-radius:var(--radius-md); white-space:nowrap;
transition:background var(--dur),transform var(--dur-fast); margin-left:6px;}
.ep-header__cta:hover{background:#00cfbe; color:var(--ink) !important;}
.ep-header__cta:active{transform:scale(.98);}
.ep-toggle{display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
width:40px; height:40px; padding:8px; border:none; border-radius:var(--radius-sm); background:none; flex-shrink:0; margin-left:2px;}
.ep-toggle:hover{background:var(--mist);}
.ep-toggle__bar{display:block; width:22px; height:2px; background:var(--ink); border-radius:2px;
transition:transform var(--dur-slow) var(--ease),opacity var(--dur),width var(--dur); transform-origin:center;}
.ep-toggle[aria-expanded="true"] .ep-toggle__bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
.ep-toggle[aria-expanded="true"] .ep-toggle__bar:nth-child(2){opacity:0; width:0;}
.ep-toggle[aria-expanded="true"] .ep-toggle__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
/* ---- Mobile drawer (accordion) ---- */
.ep-overlay{position:fixed; inset:0; background:rgba(14,23,41,.5); backdrop-filter:blur(2px);
z-index:var(--eph-z-over); opacity:0; visibility:hidden; transition:opacity var(--dur-slow),visibility var(--dur-slow);}
.ep-overlay.is-open{opacity:1; visibility:visible;}
.ep-drawer{position:fixed; top:0; right:0; width:360px; max-width:92vw; height:100%; display:flex;
flex-direction:column; overflow:hidden; z-index:var(--eph-z-draw); transform:translateX(100%);
transition:transform var(--dur-slow) var(--ease); background:#fff; box-shadow:-10px 0 40px rgba(20,33,61,.2);}
.ep-drawer.is-open{transform:translateX(0);}
.ep-drawer__head{display:flex; align-items:center; justify-content:space-between; padding:14px 18px;
background:var(--ink); flex-shrink:0;}
.ep-drawer__head-logo{display:inline-flex; align-items:center; gap:8px; text-decoration:none;}
.ep-drawer__head-logo .ep-lockup__mark{height:28px;}
.ep-drawer__close{display:flex; align-items:center; justify-content:center; width:36px; height:36px; border:none;
border-radius:var(--radius-sm); background:rgba(255,255,255,.14); color:#fff; transition:background var(--dur);}
.ep-drawer__close:hover{background:rgba(255,255,255,.26);}
.ep-drawer__body{flex:1; overflow-y:auto; overscroll-behavior:contain; padding:12px 0 24px;}
.ep-drawer__cta{display:block; margin:6px 18px 14px; text-align:center; background:var(--gold-cta);
color:var(--ink) !important; text-decoration:none !important; font-weight:800; padding:14px; border-radius:var(--radius-md);}
.ep-drawer__cta:hover{background:var(--gold-deep); color:var(--ink) !important;}
.ep-acc{border-top:1px solid var(--line);}
.ep-acc>summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
gap:12px; padding:15px 18px; font-weight:600; font-size:15.5px; color:var(--ink);}
.ep-acc>summary::-webkit-details-marker{display:none;}
.ep-acc__chev{opacity:.5; transition:transform var(--dur);}
.ep-acc[open]>summary{color:var(--turq-ink);}
.ep-acc[open]>summary .ep-acc__chev{transform:rotate(90deg);}
.ep-acc__links{display:flex; flex-direction:column; padding-bottom:8px;}
.ep-acc__link{padding:9px 18px 9px 32px; font-size:14px; color:var(--ink-70) !important; text-decoration:none !important;}
.ep-acc__link:hover{background:var(--mist); color:var(--turq-ink) !important;}
.ep-drawer__link{display:block; padding:15px 18px; font-weight:600; color:var(--ink) !important;
text-decoration:none !important; border-top:1px solid var(--line);}
.ep-drawer__link:hover{background:var(--mist); color:var(--turq-ink) !important;}
/* ==========================================================================
Breadcrumbs
========================================================================== */
.ep-breadcrumbs{display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:13px; color:var(--ink-50); padding:16px 0;}
.ep-breadcrumbs a{color:var(--turq-ink); font-weight:600;}
.ep-breadcrumbs .crumb{color:var(--ink-50);}
/* ==========================================================================
Home — midnight hero + magpie, tiles, rates, collapse
========================================================================== */
.home-hero{position:relative; color:var(--ink); border:0; border-radius:0; padding:56px 0 64px; overflow:hidden;
background:#E9F2EE url("/img/p1/hero_background.png") center bottom / cover no-repeat;
background-image:image-set(url("/img/p1/hero_background.webp") type("image/webp"), url("/img/p1/hero_background.png") type("image/png"));}
/* light wash on the copy side so dark text stays legible over the scene, fading
out on the right where the mascot sits */
.home-hero::before{content:""; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(100deg, rgba(247,249,247,.95) 0%, rgba(247,249,247,.82) 40%, rgba(247,249,247,0) 66%);}
.home-hero__grid{position:relative; z-index:1; max-width:var(--container); margin:0 auto; padding:0 var(--gutter); display:grid;
grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:48px; align-items:center;}
.home-badge{display:inline-block; color:var(--turq); text-transform:uppercase; letter-spacing:.12em;
font-size:12px; font-weight:700; background:none; border:0; padding:0; margin:0 0 16px;}
.home-hero__h1{color:var(--ink); margin:0 0 14px; font-size:clamp(30px,3.7vw,46px); line-height:1.08; letter-spacing:0; font-weight:800;}
.home-hero__h1 a{color:var(--ink); text-decoration:none;}
.home-hero__h1 em{font-style:normal; color:var(--turq-ink);}
.home-hero__sub{color:var(--ink-70); font-size:16.5px; line-height:1.6; max-width:54ch; margin:0 0 22px;}
.home-hero__sub a{color:var(--turq-ink);}
/* descriptive copy lifted out of the hero → calm lead line below it */
.home-lead{max-width:72ch; margin:28px 0 4px; font-size:16.5px; line-height:1.6; color:var(--ink-70); text-align:left;}
.home-lead a{color:var(--turq-ink); font-weight:600;}
.home-hero__art{display:flex; justify-content:center; align-items:center;}
/* mascot sits static on the right (no float), transparent cutout — no card frame */
.home-hero__art img{max-width:100%; max-height:340px; filter:drop-shadow(0 18px 26px rgba(20,33,61,.18));}
.home-hero .ep-form{max-width:520px; box-shadow:var(--shadow-lg);}
.home-form-title{margin:0 0 12px; color:var(--ink); font-size:18px; line-height:1.25;}
.home-hero .ep-form .ep-btn-primary,.home-hero .ep-form button[type="submit"]{background:var(--gold-cta) !important; color:var(--ink) !important;}
/* trust row now lives INSIDE the form as a footer strip (readable on the card,
not lost on the landscape) — hairline divides it from the consent line above */
.home-trust{list-style:none; margin:14px 0 0; padding:13px 0 0; border-top:1px solid var(--line);
display:flex; flex-wrap:wrap; gap:8px 18px; color:var(--ink-70); font-size:12.5px; font-weight:600;}
.home-trust li{display:inline-flex; align-items:center; gap:6px;}
.home-trust svg{color:var(--turq-ink); flex:0 0 auto;}
.home-legal{display:none;} /* redundant with the form's own consent line */
.home-strip{margin:40px 0 0;}
/* Full-width value band: four unframed statements, never nested cards. */
.home-values{width:100vw; margin:48px calc(50% - 50vw); background:var(--mist); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.home-values__inner{max-width:var(--container); margin:0 auto; padding:30px var(--gutter); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0;}
.home-value{position:relative; padding:0 24px; border-left:1px solid var(--line);}
.home-value:first-child{padding-left:0; border-left:0;}
.home-value:last-child{padding-right:0;}
.home-value strong{display:block; color:var(--ink); font-size:14px; line-height:1.35; margin-bottom:5px;}
.home-value span{display:block; color:var(--ink-50); font-size:12.5px; line-height:1.5;}
/* "How it works" — the Compare · Switch · Save journey made tangible (left-aligned
per §7; turquoise + line icons per §10). Adapted from homepage_mockup.html. */
.home-steps{margin:44px 0 8px;}
.home-steps__eyebrow{display:block; color:var(--turq-ink); text-transform:uppercase; letter-spacing:.12em; font-size:12px; font-weight:700; margin:0 0 8px;}
.home-steps__h{margin:0 0 8px;}
.home-steps__lead{max-width:70ch; margin:0 0 22px; color:var(--ink-70);}
.home-steps__list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.home-step{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px 20px;}
.home-step__icon{display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:var(--radius-md); background:var(--turq-wash); color:var(--turq-ink); margin-bottom:14px;}
.home-step__n{position:absolute; top:20px; right:20px; display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--mist); color:var(--ink-50); font-weight:800; font-size:13px;}
.home-step__title{font-size:17px; margin:0 0 6px;}
.home-step__body{font-size:14px; color:var(--ink-70); margin:0 0 12px;}
.home-step__meta{display:inline-block; font-size:12px; font-weight:700; color:var(--turq-ink); background:var(--turq-wash); border-radius:var(--radius-sm); padding:4px 10px; font-variant-numeric:tabular-nums;}
@media (max-width:760px){.home-steps__list{grid-template-columns:1fr;}}
/* "How we make money" — impartiality / transparency closer */
.home-trust-close{margin:8px 0 0;}
.home-money{display:flex; gap:18px; align-items:flex-start; background:var(--mist); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px 24px; margin:40px 0 8px;}
.home-money__icon{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:var(--radius-md); background:var(--turq-wash); color:var(--turq-ink);}
.home-money__body{min-width:0;}
.home-money__title{font-size:18px; margin:0 0 6px;}
.home-money__text{font-size:14px; color:var(--ink-70); line-height:1.6; margin:0 0 12px; max-width:74ch;}
.home-money__points{display:flex; flex-wrap:wrap; gap:8px 20px; list-style:none; margin:0; padding:0;}
.home-money__points li{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--ink);}
.home-money__tick{color:var(--turq-ink); flex:0 0 auto;}
@media (max-width:560px){.home-money{flex-direction:column; gap:14px;}}
/* price-cap callout — relocated out of the top, restyled as a clean band */
.cap-callout{margin:56px 0;}
/* clean editorial callout — eyebrow label instead of a coloured left stripe */
.ep-confirmed{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 28px;
background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
padding:22px 26px; font-family:var(--font);}
.ep-confirmed::before{content:"Price cap · now in effect"; flex-basis:100%; font-size:11px; font-weight:700;
letter-spacing:.1em; text-transform:uppercase; color:var(--turq-ink);}
.ep-confirmed > span{color:var(--ink-70); font-size:14.5px; line-height:1.55; font-weight:500; flex:1 1 380px; max-width:64ch;}
.ep-confirmed strong{color:var(--ink); font-weight:700;}
/* commit CTA — "See your personalised saving" enters the quote flow → turquoise
(matches the "Get your quote" header CTA; see REVIEW.md §A item 7) */
.ep-confirmed a{flex:0 0 auto; display:inline-flex; align-items:center; background:var(--turq);
color:var(--ink) !important; padding:12px 20px; border-radius:var(--radius-md); font-weight:700; font-size:14px;
text-decoration:none !important; white-space:nowrap; transition:background var(--dur) var(--ease);}
.ep-confirmed a:hover{background:var(--turq-deep); color:var(--ink) !important;}
.ep-last-updated{color:var(--ink-50); font-size:12px; margin:10px 0 0; font-family:var(--font);}
.home-preview__head{display:flex; align-items:center; justify-content:space-between; padding-bottom:10px; border-bottom:1px solid var(--line); margin-bottom:2px;}
.home-preview__title{font-weight:700; color:var(--ink); font-size:15px;}
.home-preview__updated{font-size:12px; color:var(--ink-50);}
.home-preview__row{display:grid; grid-template-columns:26px 1.5fr .8fr 1fr; gap:14px; align-items:center; padding:12px 4px; border-bottom:1px solid var(--line);}
.home-preview__row:last-of-type{border-bottom:0;}
.home-preview__rank{width:24px; height:24px; border-radius:50%; background:var(--mist-2); color:var(--ink-50); display:inline-grid; place-items:center; font-weight:800; font-size:12px;}
.home-preview__row:first-of-type .home-preview__rank{background:var(--turq); color:var(--ink);}
.home-preview__supplier{font-weight:700; color:var(--ink); font-size:14px;}
.home-preview__tariff{color:var(--ink-50); font-size:12px; display:block; margin-top:1px;}
.home-preview__rate{font-weight:600; color:var(--ink-70); font-size:13px; text-align:right; font-variant-numeric:tabular-nums;}
.home-preview__price{font-weight:800; color:var(--ink); text-align:right; display:block; font-variant-numeric:tabular-nums;}
.home-preview__delta{color:var(--turq-ink); font-weight:700; font-size:12px; text-align:right; display:block;}
.home-preview__foot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; padding-top:10px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-50);}
.home-preview__more{color:var(--turq-ink); font-weight:700; white-space:nowrap;}
/* mobile: the 4-column row crams supplier names into awkward wraps — restack to
two columns (rank + supplier/tariff/rate on the left, price/saving on the right) */
@media (max-width:480px){
.home-preview__row{grid-template-columns:26px minmax(0,1fr) auto; column-gap:12px; row-gap:2px; align-items:start; padding:13px 2px;}
.home-preview__rank{grid-column:1; grid-row:1 / span 2; align-self:center;}
.home-preview__row > span:nth-child(2){grid-column:2; grid-row:1; min-width:0;}
.home-preview__rate{grid-column:2; grid-row:2; text-align:left; font-size:12px; color:var(--ink-50); font-weight:600;}
.home-preview__row > span:nth-child(4){grid-column:3; grid-row:1 / span 2; align-self:center;}
.home-preview__foot{flex-direction:column; align-items:stretch; gap:10px;}
.home-preview__more{align-self:flex-end;}
}
.ep-preview-enquiry{display:grid; grid-template-columns:minmax(220px,1fr) auto; gap:12px; align-items:end;
max-width:720px; margin:20px 0 0; padding:20px; background:var(--mist); border:1px solid var(--line);
border-radius:var(--radius-md);}
.ep-preview-enquiry__field label{display:block; margin-bottom:6px; color:var(--ink); font-size:14px; font-weight:700;}
.ep-preview-enquiry p{grid-column:1 / -1; margin:0; color:var(--ink-50); font-size:12px;}
.ep-rates{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:48px 0;}
.ep-rate{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:16px;}
.ep-rate--alert{border-color:rgba(239,161,0,.45); background:var(--gold-wash);}
.ep-rate__k{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-50); font-weight:700;}
.ep-rate__v{font-size:23px; font-weight:800; color:var(--ink); margin-top:5px;}
.ep-rate__n{font-size:12px; color:var(--ink-50); margin-top:3px;}
.home-tiles__h{display:flex; align-items:center; gap:14px; font-size:11px; font-weight:700; letter-spacing:.14em;
text-transform:uppercase; color:var(--ink-50); margin:44px 0 18px;}
.home-tiles__h::before,.home-tiles__h::after{content:""; flex:1; height:1px; background:var(--line);}
.home-tiles{display:grid; grid-template-columns:repeat(6,1fr); gap:14px;}
.home-tile{position:relative; display:flex; flex-direction:column; padding:18px 16px; border-radius:var(--radius-lg);
background:#fff; border:1px solid var(--line); text-decoration:none !important; color:inherit !important;
transition:transform var(--dur),box-shadow var(--dur),border-color var(--dur); overflow:hidden; min-height:132px;}
.home-tile:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--line-strong);}
.home-tile::before{display:none;} /* simpler: no coloured accent bars */
.home-tile__icon{width:38px; height:38px; border-radius:var(--radius-md); display:inline-flex; align-items:center;
justify-content:center; margin-bottom:12px; background:var(--turq-wash); color:var(--turq-ink);}
.home-tile__icon svg{width:20px; height:20px;}
.home-tile__title{display:block; font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.25;}
.home-tile__sub{display:block; font-size:12px; color:var(--ink-50); margin-top:3px; line-height:1.4;}
.home-tile__chev{position:absolute; top:18px; right:14px; opacity:0; transition:opacity var(--dur),transform var(--dur); color:var(--ink-30);}
.home-tile:hover .home-tile__chev{opacity:1; transform:translateX(2px);}
.home-tile--primary{background:linear-gradient(155deg,var(--ink),var(--midnight-deep)); border-color:var(--ink);}
.home-tile--primary .home-tile__title{color:#fff;}
.home-tile--primary .home-tile__sub{color:rgba(255,255,255,.72);}
.home-tile--primary .home-tile__icon{background:rgba(0,184,169,.2); color:#5EE6D6;}
.home-tile--primary::before{background:var(--gold);}
.home-tile--econ7::before{background:var(--cat-solar);}
.home-tile--solar::before{background:#1a9e4f;}
/* long-form content uses focused native disclosures */
.ep-collapse{margin:48px 0; border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; overflow:hidden;}
.ep-installer-cta{margin:56px 0 !important;}
.ep-collapse>summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
gap:14px; padding:18px 22px; font-weight:700; font-size:17px; color:var(--ink);}
.ep-collapse>summary::-webkit-details-marker{display:none;}
.ep-collapse>summary::after{content:"+"; font-size:22px; font-weight:600; color:var(--turq-ink); line-height:1;}
.ep-collapse[open]>summary{border-bottom:1px solid var(--line);}
.ep-collapse[open]>summary::after{content:"\2013";}
.ep-collapse .ep-article{padding:20px 22px 8px;}
.home-knowledge{display:grid; gap:10px; margin:48px 0;}
.home-knowledge .ep-collapse{margin:0;}
.home-knowledge .ep-collapse>summary{min-height:62px; font-size:15.5px;}
.home-knowledge .ep-article--segment{padding:20px 22px 12px;}
.home-knowledge .ep-article--segment>h2:first-child{margin-top:4px;}
.home-knowledge .ep-article--segment>p:last-child,
.home-knowledge .ep-article--segment>ul:last-child,
.home-knowledge .ep-article--segment>ol:last-child{margin-bottom:8px;}
/* ==========================================================================
Cards / panels / notes
========================================================================== */
.card-section,.ep-card,.info-section,.notice-box,.details-card,.summary-box,.inset-panel,.info-block{
background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-5);}
.card-section + .card-section{margin-top:var(--space-5);}
.ep-card--muted,.summary-box,.inset-panel{background:var(--mist);}
.ep-card--flat{box-shadow:none;}
.section-title{margin:0 0 6px; font-size:18px; line-height:1.25; color:var(--ink); font-weight:700;}
.section-help{margin:0 0 16px; font-size:14px; color:var(--ink-70);}
.summary-box{padding:16px;}
.summary-box__title{margin:0 0 8px; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-50);}
.summary-box__row{margin:0; color:var(--ink);}
.summary-box__row + .summary-box__row{margin-top:8px;}
.summary-box a,.summary-box__link{color:var(--turq-ink); font-weight:700;}
.notice-box{background:var(--turq-wash); border-color:rgba(0,184,169,.3);}
.notice-box__title{font-weight:700; color:var(--ink); margin:0 0 4px;}
.notice-box__text{color:var(--ink-70); margin:0; font-size:14px;}
.ep-note{background:var(--mist); border:1px solid var(--line);
border-radius:var(--radius-md); padding:14px 16px; color:var(--ink-70); font-size:14px; margin:var(--space-4) 0;}
/* inline-styled intro callouts → clean cards, no coloured left stripe */
.ep-fresh-callout,.ep-cap-status{background:var(--mist) !important; border:1px solid var(--line) !important;
border-left:1px solid var(--line) !important; border-radius:var(--radius-lg) !important;
padding:16px 20px !important; margin:0 0 16px !important; color:var(--ink-70) !important; font-size:14px;}
.ep-fresh-callout strong,.ep-cap-status strong{color:var(--ink);}
.ep-cap-status p{color:var(--ink-70) !important;}
.ep-cap-status span{color:var(--ink-70) !important;}
.supplier-switch-cta>a{background:var(--turq) !important; color:var(--ink) !important;}
.error-box{border:1px solid #fecaca; background:var(--danger-wash); color:#991b1b; border-radius:var(--radius-md); padding:12px; font-weight:700;}
/* ==========================================================================
Hero (apply/results) + minimal stepper + savings
========================================================================== */
.hero{padding:34px 0; text-align:left; background:linear-gradient(180deg,var(--mist),#fff); border-bottom:1px solid var(--line);}
.hero h1{color:var(--ink); margin:0 0 8px;}
.hero p{font-size:16px; color:var(--ink-70); max-width:760px; margin:0 0 8px;}
.hero__meta{display:inline-block; background:none; border:0; padding:0; margin-bottom:10px;
color:var(--turq-ink); text-transform:uppercase; letter-spacing:.08em; font-size:12px; font-weight:700;}
.hero__privacy{font-size:14px; margin-top:6px; color:var(--ink-50);}
.saving-outcome{background:var(--ink); color:#fff; border:1px solid var(--ink); border-radius:var(--radius-md);}
.saving-outcome__eyebrow{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.72);}
.saving-outcome__value{font-size:36px; font-weight:800; line-height:1; color:var(--turq); font-variant-numeric:tabular-nums;}
.saving-outcome__context{font-size:12px; line-height:1.45; color:rgba(255,255,255,.76);}
.hero__savings{display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:4px 14px;
width:min(100%,560px); margin:10px 0 14px; padding:15px 18px;}
.hero__savings .saving-outcome__eyebrow,.hero__savings .saving-outcome__context{grid-column:2;}
.hero__savings .saving-outcome__value{grid-row:1 / span 2; font-size:34px; color:var(--turq);}
/* SSL-style trust pills removed per brand direction */
.trust-row,.trust-pill,.trust-bar{display:none !important;}
.journey-progress{display:flex; align-items:center; gap:6px; margin:0 0 22px; flex-wrap:nowrap; overflow-x:auto;}
.journey-progress__step{display:inline-flex; align-items:center; gap:9px; padding:0 8px; background:none;
border:0; color:var(--ink-50); font-weight:600; font-size:13.5px; white-space:nowrap; flex:0 0 auto;}
.journey-progress__step.done{color:var(--turq-ink);}
.journey-progress__step.active{color:var(--ink);}
.journey-progress__num{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%;
font-weight:800; font-size:12.5px; background:#fff; border:1.5px solid var(--line-strong); color:var(--ink-50);}
.journey-progress__step.active .journey-progress__num{background:var(--gold-cta); color:var(--ink); border-color:var(--gold-cta);}
.journey-progress__step.done .journey-progress__num{background:var(--turq); color:var(--ink); border-color:var(--turq);}
.journey-progress__bar{flex:1 1 18px; min-width:14px; height:2px; background:var(--line); border-radius:2px;}
.journey-progress__bar.done{background:var(--turq);}
.journey-progress__bar.active{background:linear-gradient(90deg,var(--turq),var(--gold-cta));}
/* §11.7 — on narrow screens wrap the steps and drop the connectors so labels
never clip ("Complete switch" was cutting to "Comp" at 390px) */
@media (max-width:560px){
.journey-progress{flex-wrap:wrap; overflow-x:visible; gap:10px 16px; margin-bottom:18px;}
.journey-progress__bar{display:none;}
.journey-progress__step{padding:0;}
}
/* ==========================================================================
Forms (checkbox bug fixed: no blanket #applyForm input width:100%)
========================================================================== */
.field label,.field > label{display:block; font-size:14px; font-weight:600; color:var(--ink); margin-bottom:6px;}
.required{color:var(--danger); font-weight:700; margin-left:2px;}
.field__message{margin-top:6px; font-size:12px; color:var(--ink-50);}
.field__message a{color:var(--turq-ink); font-weight:700;}
.field__message--error,.js-field-error,.field-validation-error{color:#b91c1c; font-weight:600; margin-top:6px;}
/* text inputs & selects share ONE height (48px) so they line up with buttons */
input[type="text"],input[type="email"],input[type="tel"],input[type="date"],input[type="number"],
input[type="password"],input[type="search"],select{
width:100%; height:48px; font-family:var(--font); font-size:16px; color:var(--ink);
border-radius:var(--radius-md); border:1px solid var(--line-strong); background:#fff;
padding:0 14px; outline:none; transition:border-color var(--dur),box-shadow var(--dur);}
textarea{width:100%; font-family:var(--font); font-size:16px; color:var(--ink); border-radius:var(--radius-md);
border:1px solid var(--line-strong); background:#fff; padding:12px 14px; outline:none;
transition:border-color var(--dur),box-shadow var(--dur);}
/* native-looking select → clean custom chevron, matching button height */
select{-webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; padding-right:42px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 15px center;}
select:disabled{background-color:var(--mist); color:var(--ink-50); cursor:not-allowed;}
input[readonly]{background:var(--mist); color:var(--ink-70);}
input:focus,select:focus,textarea:focus{border-color:var(--turq-deep); box-shadow:0 0 0 3px var(--turq-wash);}
input.is-invalid,select.is-invalid,textarea.is-invalid,input.input-validation-error{
border-color:var(--danger); background:var(--danger-wash); box-shadow:0 0 0 3px rgba(220,38,38,.12);}
/* checkboxes & radios must NOT be stretched by the text-input rule */
input[type="checkbox"],input[type="radio"]{width:auto; height:auto; padding:0; border:0; box-shadow:none; accent-color:var(--turq);}
.checkbox-label input[type="checkbox"]{width:18px; height:18px; margin-top:2px; flex:0 0 auto;}
.ep-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.ep-grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;}
.dob-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;}
/* DOB values are short (Day / Month / Year) — tighten the chevron so the label
isn't squeezed to "Mont" in the three narrow columns on mobile */
.dob-row select{padding-left:12px; padding-right:26px; background-position:right 8px center;}
/* de-pilled selectable controls (title / radio / filter / opt) */
.title-pills,.radio-group,.filter-pills{display:flex; flex-wrap:wrap; gap:8px;}
.title-pill,.radio-pill,.filter-pill,.opt-pill{position:relative; display:inline-flex; align-items:center; gap:8px;
padding:10px 15px; border-radius:var(--radius-sm); border:1px solid var(--line-strong); background:#fff;
font-weight:600; color:var(--ink); cursor:pointer; user-select:none; font-size:14px;
transition:border-color var(--dur),background var(--dur),color var(--dur);}
.title-pill input{position:absolute; opacity:0; pointer-events:none;}
.title-pill:hover,.radio-pill:hover,.filter-pill:hover,.opt-pill:hover{border-color:var(--turq-deep);}
.title-pill.is-selected,.filter-pill.is-active,.filter-pill[aria-pressed="true"]{background:var(--ink); color:#fff; border-color:var(--ink); font-weight:700;}
.ep-header__cta:focus-visible,.cta-button:focus-visible{outline:3px solid var(--turq-deep); outline-offset:2px;}
.opt-pill{border-radius:var(--radius-sm);}
.checkbox-row,.consent-row{margin-top:12px; padding:14px; border:1px solid var(--line); background:var(--mist); border-radius:var(--radius-md);}
.checkbox-label{display:flex; gap:10px; align-items:center; min-height:44px; font-weight:600; color:var(--ink); line-height:1.35;}
.checkbox-sub{margin-top:6px; font-size:12px; color:var(--ink-50); font-weight:500;}
.checkbox-row.is-invalid{border-color:var(--danger); background:var(--danger-wash);}
.toggle-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--mist);}
.toggle{position:relative; width:46px; height:44px; flex:0 0 auto;}
.toggle input{opacity:0; width:0; height:0;}
.slider{position:absolute; cursor:pointer; left:0; right:0; top:9px; bottom:9px; background:var(--line-strong); transition:var(--dur); border-radius:999px;}
.slider:before{position:absolute; content:""; height:20px; width:20px; left:3px; top:3px; background:#fff; transition:var(--dur); border-radius:50%; box-shadow:0 2px 8px rgba(20,33,61,.15);}
.toggle input:checked + .slider{background:var(--turq);}
.toggle input:checked + .slider:before{transform:translateX(20px);}
/*