/* ============================================================
   SwitcherMate — Premium WHITE design system
   Injected LAST in <head> (after each page's inline <style>).
   Flips the legacy dark-navy theme to a premium ivory/white system
   that matches the SwitcherMate Business site. Uses !important to
   beat the inline dark `!important` rules already on every page.
   Design layer only — no markup, script or content is touched.
   ============================================================ */

/* ---------- Self-hosted fonts ---------- */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/bricolage-600.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/bricolage-700.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/bricolage-800.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/jakarta-400.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/jakarta-500.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/jakarta-600.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/jakarta-700.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/jakarta-800.woff2') format('woff2')}

/* ---------- 'Inter' alias -> Plus Jakarta Sans ----------
   Dozens of legacy components (and JS-rendered cards) hard-code
   font-family:'Inter', but Inter is never loaded on any page. Rather
   than chase every selector, we redefine the 'Inter' family to point at
   the self-hosted Jakarta woff2 files, so every existing/inline/JS
   `font-family:'Inter'` renders as Plus Jakarta Sans with no markup
   change. (Leaves the 'Arial Black' O2 provider glyph untouched.) */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/jakarta-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/jakarta-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/jakarta-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/jakarta-700.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/jakarta-800.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:900;font-display:swap;src:url('/assets/fonts/jakarta-800.woff2') format('woff2')}

/* ---------- Design tokens ---------- */
:root{
  --pm-ground:#f7f9fb;      /* page ground */
  --pm-paper:#ffffff;       /* cards / surfaces */
  --pm-fill:#eef2f8;        /* recessed fills (tab tracks, chips) */
  --pm-fill-2:#e8eef6;      /* deeper fill / hover */
  --pm-ink:#0e1c30;         /* headings + strong */
  --pm-body:#33465c;        /* body text */
  --pm-muted:#5b6b80;       /* secondary / muted */
  --pm-line:rgba(14,28,48,0.10);   /* hairlines */
  --pm-line-2:rgba(14,28,48,0.06); /* faint hairlines */
  --pm-accent:#2E7DD2;      /* brand blue */
  --pm-accent-dk:#1f5fa8;   /* darker blue (hover / gradient) */
  --pm-shadow:0 4px 20px -6px rgba(14,28,48,0.12);
  --pm-shadow-lg:0 18px 48px -12px rgba(14,28,48,0.18);

  /* Re-point the per-page custom properties used by guide/news/speed
     pages so their var()-driven declarations recolour automatically. */
  --text:var(--pm-ink) !important;
  --muted:var(--pm-muted) !important;
  --blue:var(--pm-accent) !important;
  --sm-surface:var(--pm-paper) !important;
  --shadow:var(--pm-shadow) !important;
  --sm-shadow:var(--pm-shadow) !important;
}

/* ---------- Ground + base type ---------- */
html,body{
  background-color:var(--pm-ground) !important;
  background-image:none !important;
  color:var(--pm-body) !important;
}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
  -webkit-font-smoothing:antialiased;
}
/* Kill the moving dark dot-grid */
body::after{display:none !important;content:none !important}

/* Headings — display face + ink */
h1,h2,h3,h4{
  font-family:'Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif !important;
  color:var(--pm-ink) !important;
}

/* Links default to brand blue (specific components refine below) */
a{color:var(--pm-accent)}

/* Selection + focus */
::selection{background:rgba(46,125,210,0.16)}
:focus-visible{outline:2px solid var(--pm-accent) !important;outline-offset:3px}

/* Scrollbar → light */
::-webkit-scrollbar-track{background:transparent !important}
::-webkit-scrollbar-thumb{background:rgba(14,28,48,0.18) !important}

/* ---------- Header ---------- */
header,.header{
  background:rgba(255,255,255,0.88) !important;
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--pm-line) !important;
}
.menu-btn:hover{background:var(--pm-fill) !important}
.menu-btn span{background:var(--pm-ink) !important}

/* ---------- LOGO (wordmark via CSS only) ---------- */
.brand-text,.foot-brand,.brand{
  font-family:'Bricolage Grotesque',system-ui,sans-serif !important;
  text-transform:uppercase !important;
  letter-spacing:.04em !important;
  font-weight:800 !important;
  color:var(--pm-ink) !important;
}
.brand-text{font-size:1.15rem !important}
/* Kill the two-tone (both class-based and inline-styled spans) */
.brand-blue,.brand-green,
.brand-text span,.foot-brand span,.brand span{
  color:var(--pm-ink) !important;
  -webkit-text-fill-color:var(--pm-ink) !important;
}

/* ---------- Desktop nav ---------- */
.nav-link{color:var(--pm-muted) !important;font-family:'Plus Jakarta Sans',sans-serif !important}
.nav-link:hover{color:var(--pm-ink) !important;background:var(--pm-fill) !important}
.nav-dropdown-menu{
  background:var(--pm-paper) !important;
  border:1px solid var(--pm-line) !important;
  box-shadow:var(--pm-shadow-lg) !important;
}
.nav-dropdown-item{color:var(--pm-body) !important}
.nav-dropdown-item:hover{color:var(--pm-ink) !important;background:var(--pm-fill) !important}
.nav-dropdown-label svg{opacity:.55}

/* ---------- Mobile menu (light panel) ---------- */
.menu{
  background:var(--pm-paper) !important;
  border-left:1px solid var(--pm-line) !important;
  box-shadow:none !important;
}
.menu.open{box-shadow:-28px 0 70px rgba(14,28,48,0.16) !important}
.menu-head{border-bottom:1px solid var(--pm-line) !important}
.menu-close{color:var(--pm-muted) !important}
.menu-close:hover{background:var(--pm-fill) !important;color:var(--pm-ink) !important}
.menu-section-btn{color:var(--pm-muted) !important;border-bottom:1px solid var(--pm-line-2) !important}
.menu-section-btn:hover{color:var(--pm-body) !important}
.menu-section-btn.open{color:var(--pm-ink) !important}
.menu-link{color:var(--pm-body) !important;font-family:'Plus Jakarta Sans',sans-serif !important}
.menu-link:hover{color:var(--pm-ink) !important;background:var(--pm-fill) !important}
.backdrop.open{background:rgba(14,28,48,.28) !important}

/* ---------- Footer ---------- */
footer{
  background:var(--pm-paper) !important;
  border-top:1px solid var(--pm-line) !important;
}
.foot-link{color:var(--pm-muted) !important}
.foot-link:hover{color:var(--pm-ink) !important}
.foot-sep{color:var(--pm-muted) !important;opacity:.55}
.foot-legal-btn{color:var(--pm-muted) !important}
.foot-legal-btn:hover{color:var(--pm-ink) !important}
.foot-legal-menu{
  background:var(--pm-paper) !important;
  border:1px solid var(--pm-line) !important;
  box-shadow:var(--pm-shadow-lg) !important;
}
.foot-legal-item{color:var(--pm-body) !important}
.foot-legal-item:hover{color:var(--pm-ink) !important;background:var(--pm-fill) !important}
.foot-meta{color:var(--pm-muted) !important}

/* ---------- Hero ---------- */
.hero{background:transparent !important}
.hero h1{color:var(--pm-ink) !important}
/* the plain (uncoloured) hero span → ink; keep inline-coloured accent spans */
.hero h1 span:not([style]){color:var(--pm-ink) !important}
.hero p{color:var(--pm-muted) !important}
.hero-sub{color:var(--pm-muted) !important}

/* ---------- Search widget ---------- */
.widget{
  background:var(--pm-paper) !important;
  border:1px solid var(--pm-line) !important;
  box-shadow:var(--pm-shadow-lg) !important;
}
.widget > #p-bb,
.widget > #p-en,
.widget > #p-mob{background-color:var(--pm-paper) !important}

.tabs{background:var(--pm-fill) !important}
.tab{color:var(--pm-muted) !important;font-family:'Plus Jakarta Sans',sans-serif !important}
.tab:hover:not(.on){color:var(--pm-ink) !important;background:var(--pm-fill-2) !important}
.tab.on{background:var(--pm-accent) !important;color:#fff !important;box-shadow:0 6px 16px -4px rgba(46,125,210,0.5) !important}

.s-label{color:var(--pm-ink) !important}

.pc-input,.nl-input,.bd-email-input,.curr-select{
  background:var(--pm-paper) !important;
  border:1.5px solid var(--pm-line) !important;
  color:var(--pm-ink) !important;
  font-family:'Plus Jakarta Sans',sans-serif !important;
}
.pc-input:focus,.nl-input:focus,.bd-email-input:focus{
  border-color:var(--pm-accent) !important;
  background:#fff !important;
  box-shadow:0 0 0 3px rgba(46,125,210,0.14) !important;
}
.pc-input::placeholder,.nl-input::placeholder,.bd-email-input::placeholder,
.phone-input::placeholder{color:var(--pm-muted) !important;opacity:.8}
.curr-select option,.sort-sel option{background:#fff !important;color:var(--pm-ink) !important}

.btn-search,.nl-btn,.bd-email-send,.btn-find-deals,.back-cta{
  background:var(--pm-accent) !important;
  color:#fff !important;
  font-family:'Plus Jakarta Sans',sans-serif !important;
  box-shadow:0 8px 22px -8px rgba(46,125,210,0.6) !important;
}
.btn-search:hover,.nl-btn:hover,.bd-email-send:hover,.btn-find-deals:hover,.back-cta:hover{
  background:var(--pm-accent-dk) !important;
}

/* Address autocomplete dropdown */
.addr-dd{
  background:var(--pm-paper) !important;
  border:1px solid var(--pm-line) !important;
  box-shadow:var(--pm-shadow-lg) !important;
}
.addr-item{color:var(--pm-body) !important;border-bottom:1px solid var(--pm-line-2) !important}
.addr-item:hover{background:var(--pm-fill) !important;color:var(--pm-ink) !important}

/* Status / helper text */
.st{color:var(--pm-muted) !important}
.mob-results-empty,.no-deals{color:var(--pm-muted) !important}

/* Phone block */
.phone-block{border-top:1px solid var(--pm-line) !important}
.addr-confirmed{
  background:var(--pm-fill) !important;
  border:1px solid var(--pm-line) !important;
  color:var(--pm-body) !important;
}
.phone-label{color:var(--pm-ink) !important}
.phone-optional{color:var(--pm-muted) !important;background:var(--pm-fill) !important}
.phone-prefix{
  background:var(--pm-fill) !important;
  border:1.5px solid var(--pm-line) !important;
  border-right:none !important;
  color:var(--pm-body) !important;
}
.phone-input{
  background:var(--pm-paper) !important;
  border:1.5px solid var(--pm-line) !important;
  color:var(--pm-ink) !important;
}
.phone-input:focus{border-color:var(--pm-accent) !important;background:#fff !important}
.consent-text-sm,.consent-text{color:var(--pm-muted) !important}
.consent-text-sm a,.consent-text a{color:var(--pm-muted) !important}

/* ---------- Results view ---------- */
.results{background:transparent !important}
.r-title{color:var(--pm-ink) !important}
.r-addr,.eres-sub{color:var(--pm-muted) !important}
.eres-title{color:var(--pm-ink) !important}
.btn-back,.btn-ewiz-restart{
  border:1px solid var(--pm-line) !important;
  color:var(--pm-body) !important;
  background:var(--pm-paper) !important;
}
.btn-back:hover,.btn-ewiz-restart:hover{border-color:var(--pm-accent) !important;color:var(--pm-ink) !important}
#res .btn-back{background:var(--pm-paper) !important}

.curr-box,.filters,.bd-email-card,.speed-banner{
  background:var(--pm-paper) !important;
  border:1px solid var(--pm-line) !important;
  box-shadow:var(--pm-shadow) !important;
}
.curr-box h3{color:var(--pm-ink) !important}
.curr-box p{color:var(--pm-muted) !important}
.f-lbl{color:var(--pm-muted) !important}
.fpill{
  background:var(--pm-fill) !important;
  border:1px solid var(--pm-line) !important;
  color:var(--pm-body) !important;
}
.fpill.on,.fpill:hover{background:var(--pm-accent) !important;color:#fff !important;border-color:transparent !important}
.sort-sel{
  background:var(--pm-fill) !important;
  border:1px solid var(--pm-line) !important;
  color:var(--pm-body) !important;
}

/* Email-deals strip */
.bd-email-hint{color:var(--pm-muted) !important}
.bd-email-hint b{color:var(--pm-ink) !important}
.bd-email-success{color:var(--pm-muted) !important}
.bd-email-success strong{color:#2f8f4e !important}
.bd-email-success-actions a{color:var(--pm-accent) !important}

/* Speed banner */
.speed-banner-title{color:var(--pm-ink) !important}
.speed-banner-sub{color:var(--pm-muted) !important}
.speed-banner-badge{background:rgba(46,125,210,.10) !important;border:1px solid rgba(46,125,210,.22) !important}
.speed-banner-btn{background:var(--pm-accent) !important;color:#fff !important}
.speed-banner-btn:hover{background:var(--pm-accent-dk) !important}

/* Energy wizard chrome (cards already white via .ewiz-card *) */
.e-note{color:var(--pm-muted) !important}
.e-note a{color:var(--pm-accent) !important}
.ewiz-step{border:2px solid var(--pm-line) !important;color:var(--pm-muted) !important}
.ewiz-line{background:var(--pm-line) !important}

/* ---------- Deal / sim cards (already light — refine only) ---------- */
/* keep the per-provider coloured top accent stripe (inline, non-important) */
/* deal cards: left ENTIRELY to their original inline styling — operator wants them exactly as before, provider branding intact */

/* ---------- Legal / long-form pages ---------- */
.content{background:transparent !important}
.content h1,.content h2,.content h3{color:var(--pm-ink) !important}
.content p,.content li,.content ul{color:var(--pm-body) !important}
.content strong{color:var(--pm-ink) !important}
.content em{color:var(--pm-muted) !important}
.content a{color:var(--pm-accent) !important}
.content hr,hr{border-top:1px solid var(--pm-line) !important}
.back-btn{
  color:var(--pm-body) !important;
  -webkit-text-fill-color:var(--pm-body) !important;
  border:1px solid var(--pm-line) !important;
  background:var(--pm-paper) !important;
}
.back-btn:hover{background:var(--pm-fill) !important}

/* ---------- Contact form ---------- */
.field label{color:var(--pm-body) !important}
.field .opt{color:var(--pm-muted) !important}
.field input,.field textarea{
  background:var(--pm-paper) !important;
  border:1.5px solid var(--pm-line) !important;
  color:var(--pm-ink) !important;
}
.field input:focus,.field textarea:focus{border-color:var(--pm-accent) !important;background:#fff !important}
.field input::placeholder,.field textarea::placeholder{color:var(--pm-muted) !important;opacity:.75}
.type-btn{
  background:var(--pm-paper) !important;
  border:1.5px solid var(--pm-line) !important;
  color:var(--pm-body) !important;
}
.type-btn:hover,.type-btn.selected{
  border-color:var(--pm-accent) !important;
  background:#f2f7fd !important;
  color:var(--pm-ink) !important;
}

/* ---------- Guides (var()-driven; plus literal-dark overrides) ---------- */
.breadcrumb{color:var(--pm-muted) !important}
.breadcrumb span.current{color:var(--pm-ink) !important}
.breadcrumb span.sep{color:var(--pm-muted) !important;opacity:.55}

.guide-hero__summary{color:var(--pm-body) !important}

.guide-toc{background:var(--pm-paper) !important;border:1px solid var(--pm-line) !important;box-shadow:var(--pm-shadow) !important}
.guide-toc__toggle{background:var(--pm-fill) !important;color:var(--pm-ink) !important}
.guide-toc__list li{border-bottom:1px solid var(--pm-line-2) !important}

.prose p,.prose li{color:var(--pm-body) !important}
.prose h2,.prose h3,.prose strong{color:var(--pm-ink) !important}
.prose a:not(.guide-card__read){color:var(--pm-accent) !important}

.stat-callout,.tip-box{
  background:var(--pm-paper) !important;
  border:1px solid var(--pm-line) !important;
  border-left:4px solid var(--pm-accent) !important;
  box-shadow:var(--pm-shadow) !important;
}
.stat-callout__stat{color:var(--pm-ink) !important}
.stat-callout__src,.tip-box .src{color:var(--pm-muted) !important}
.tip-box{color:var(--pm-body) !important}
.tip-box strong{color:var(--pm-ink) !important}
.warn-box{
  background:#fff7ed !important;
  border:1px solid #fcd9a8 !important;
  border-left:4px solid #e07a00 !important;
  color:var(--pm-body) !important;
}
.warn-box strong{color:var(--pm-ink) !important}

/* Mid-content postcode checker */
.mid-check{
  background:var(--pm-paper) !important;
  border:1px solid var(--pm-line) !important;
  box-shadow:var(--pm-shadow-lg) !important;
}
.mid-check .s-label{color:var(--pm-ink) !important}
.mid-check .pc-icon{color:var(--pm-muted) !important}
.mid-check .pc-input{
  background:var(--pm-paper) !important;
  border:1.5px solid var(--pm-line) !important;
  color:var(--pm-ink) !important;
}
.mid-check .pc-input:focus{border-color:var(--pm-accent) !important;background:#fff !important}
.mid-check .btn-search{background:var(--pm-accent) !important;color:#fff !important}
.mid-check .guide-pc-err,.guide-pc-err{color:#c0392b !important}

/* FAQ (guide, town & speed variants) */
.faq-wrap,.faq-wrap h2{color:var(--pm-ink) !important}
.faq-item,.page-wrap .faq-item{
  background:var(--pm-paper) !important;
  border:1px solid var(--pm-line) !important;
  box-shadow:var(--pm-shadow) !important;
}
.faq-item.open{border-left-color:var(--pm-accent) !important}
.faq-question,.faq-q{color:var(--pm-ink) !important}
.faq-question:hover,.faq-question:focus-visible{color:var(--pm-accent) !important}
.faq-answer,.faq-answer-inner,.faq-a,.page-wrap .faq-a{color:var(--pm-body) !important}

/* Guide / news cards */
.guide-card{
  background:var(--pm-paper) !important;
  border:1px solid var(--pm-line) !important;
  box-shadow:var(--pm-shadow) !important;
}
.guide-card:hover,.guide-card--link:hover,.guide-card--link:focus-visible{
  background:#f2f7fd !important;
  border-color:rgba(46,125,210,.35) !important;
}
.guide-card__title{color:var(--pm-ink) !important}
.guide-card__desc{color:var(--pm-muted) !important}
.guide-card__meta{color:var(--pm-muted) !important}
.guide-card__read{color:var(--pm-accent) !important}

/* Hub pages */
.hub-hero h1{color:var(--pm-ink) !important}
.hub-hero p{color:var(--pm-body) !important}
.hub-cta{background:var(--pm-paper) !important;border:1px solid var(--pm-line) !important;box-shadow:var(--pm-shadow) !important}
.hub-cta p{color:var(--pm-ink) !important}
.hub-cta a{background:var(--pm-accent) !important;color:#fff !important}

/* ---------- News page ---------- */
.news-tab{
  background:var(--pm-paper) !important;
  border:1px solid var(--pm-line) !important;
  color:var(--pm-body) !important;
}
.news-tab.active{background:var(--pm-accent) !important;color:#fff !important;border-color:var(--pm-accent) !important}
.news-tab:hover:not(.active){color:var(--pm-ink) !important;border-color:rgba(46,125,210,.35) !important}
.section-label,.news-status-line{color:var(--pm-muted) !important}
.newsletter-box{background:var(--pm-paper) !important;border:1px solid var(--pm-line) !important;box-shadow:var(--pm-shadow) !important}
.newsletter-box h3{color:var(--pm-ink) !important}
.newsletter-box p{color:var(--pm-muted) !important}
.load-more{background:var(--pm-paper) !important;border:1px solid var(--pm-line) !important;color:var(--pm-body) !important}
.load-more:hover{border-color:var(--pm-accent) !important;color:var(--pm-accent) !important}
.nl-msg.ok{color:#2f8f4e !important}
.nl-msg.err{color:#c0392b !important}

/* ---------- Town / location pages ---------- */
/* Town template scopes text white via the #page-wrap ID selector, which
   out-ranks generic element rules — match its specificity to win. */
#page-wrap{color:var(--pm-body) !important}
#page-wrap h1,#page-wrap h2,#page-wrap h3,#page-wrap h4{color:var(--pm-ink) !important}
.content-page{background:transparent !important}
.stat{background:var(--pm-fill) !important;border:1px solid var(--pm-line) !important}
.stat:hover{background:var(--pm-fill-2) !important;border-color:rgba(46,125,210,.4) !important}
.stat-label{color:var(--pm-body) !important}
.section-block p{color:var(--pm-body) !important}
.section-block h2 span{color:var(--pm-accent) !important}
.town-link{
  background:var(--pm-paper) !important;
  border:1px solid var(--pm-line) !important;
  color:var(--pm-body) !important;
}
.town-link:hover{background:#f2f7fd !important;border-color:rgba(46,125,210,.3) !important;color:var(--pm-ink) !important}
.search-widget{
  background:var(--pm-paper) !important;
  border:1px solid var(--pm-line) !important;
  box-shadow:var(--pm-shadow) !important;
}
.search-widget>p{color:var(--pm-muted) !important}
.avail-table th{background:var(--pm-fill) !important;color:var(--pm-muted) !important}
.avail-table td{color:var(--pm-body) !important;border-bottom:1px solid var(--pm-line-2) !important}
.note-text{color:var(--pm-muted) !important}

/* ---------- Speed page ---------- */
.pill{background:var(--pm-fill) !important;border:1px solid var(--pm-line) !important;color:var(--pm-body) !important}
.mtable th{color:var(--pm-muted) !important;border-bottom:1px solid var(--pm-line) !important}
.mtable td{color:var(--pm-body) !important;border-bottom:1px solid var(--pm-line-2) !important}
.cta-box{background:var(--pm-paper) !important;border:1px solid var(--pm-line) !important;box-shadow:var(--pm-shadow) !important}
.cta-box p{color:var(--pm-body) !important}
.spd-eyebrow{color:var(--pm-muted) !important}
.spd-metric-card{
  background:var(--pm-paper) !important;
  border:1px solid var(--pm-line) !important;
  box-shadow:var(--pm-shadow) !important;
}
.spd-metric-card p{color:var(--pm-body) !important}
.spd-section-title{color:var(--pm-ink) !important}
.spd-table-wrap{background:var(--pm-paper) !important;border:1px solid var(--pm-line) !important}
.spd-compare-table thead th{background:var(--pm-fill) !important;color:var(--pm-muted) !important;border-bottom:1px solid var(--pm-line) !important}
.spd-tip-list li{color:var(--pm-body) !important}
.spd-postcode-after-faq .mid-check{background:var(--pm-paper) !important;border:1px solid var(--pm-line) !important;box-shadow:var(--pm-shadow-lg) !important}

/* NOTE: the Speed-Test gauge (.speed-box) and Broadband Health Check
   monitor (.w-monitor) are now fully premium-white — see the dedicated
   SPEED-TEST PAGE block near the end of this file. CSS-only recolour of
   surfaces, gauge arcs/readouts, chips and CTAs; JS toggle states are
   preserved (only presentation is overridden). Canvas-drawn chart and
   a few JS-baked hex palettes remain (documented as needs-markup). */

/* ---------- Loading overlay ---------- */
#sm-loading{
  background:var(--pm-ground) !important;
  background-image:radial-gradient(circle,rgba(14,28,48,0.05) 1px,transparent 1px) !important;
}
.sm-loading__address{color:var(--pm-ink) !important}
.sm-loading__step{color:var(--pm-muted) !important}
.sm-loading__count-label{color:var(--pm-muted) !important}
.sm-loading__divider,.sm-loading__progress-track{background:var(--pm-line) !important}

/* ============================================================
   POLISH PASS — flagship widget cards + guide/town remnants
   ============================================================ */

/* ---------- Footer: business-deals link (inline white) ---------- */
.foot-meta a{
  color:var(--pm-accent) !important;
  -webkit-text-fill-color:var(--pm-accent) !important;
  text-decoration:none;
}
.foot-meta a:hover{
  color:var(--pm-accent-dk) !important;
  -webkit-text-fill-color:var(--pm-accent-dk) !important;
  text-decoration:underline;text-underline-offset:2px;
}

/* ---------- Breadcrumb + guide-back links (were white / green) ---------- */
.breadcrumb a{color:var(--pm-muted) !important;text-decoration:none}
.breadcrumb a:hover{color:var(--pm-accent) !important;text-decoration:underline;text-underline-offset:2px}
.guide-back a{color:var(--pm-accent) !important}
.guide-back a:hover{color:var(--pm-accent-dk) !important}

/* ---------- Energy guide: comparison table (dark header remnant) ---------- */
.prose table.simple-table th,
.prose table.simple-table td{border:1px solid var(--pm-line) !important}
.prose table.simple-table th{background:var(--pm-fill) !important;color:var(--pm-ink) !important}
.prose table.simple-table td{color:var(--pm-body) !important}

/* ---------- Energy guide: solar CTA slab (was dark-green -> blue) ---------- */
.article-solar-cta{
  background:#eef4fb !important;
  border:1px solid #cfe0f4 !important;
  border-left:4px solid var(--pm-accent) !important;
}
.article-solar-cta h3{color:var(--pm-ink) !important}
.article-solar-cta p{color:var(--pm-body) !important}
/* its gradient button is re-tinted to brand blue in the canonical CTA block */

/* ---------- Town/location pages: resource cards + availability ---------- */
.resource-card{
  background:var(--pm-paper) !important;
  border:1px solid var(--pm-line) !important;
  box-shadow:var(--pm-shadow) !important;
}
.resource-card:hover{border-color:rgba(46,125,210,.4) !important}
.resource-card h3{color:var(--pm-ink) !important}
.resource-card p{color:var(--pm-body) !important}
/* brand-green / amber status text -> AA-legible on white */
.avail-yes{color:#1f7a3d !important}
.avail-partial{color:#b45309 !important}

/* ============================================================
   FLAGSHIP HERO WIDGET — SIM result cards (were built for dark)
   ============================================================ */
.sim-card{
  border:1px solid var(--pm-line) !important;
  box-shadow:var(--pm-shadow) !important;
}
/* off-brand cyan #00A6EB -> brand blue */
.sim-card__bar{background:var(--pm-accent) !important}
.sim-card__stat-val.highlight{color:var(--pm-accent) !important}
.sim-card__toggle{color:var(--pm-accent) !important}
.sim-card__check::before{color:var(--pm-accent) !important}
/* drop the leftover blue->green best-value gradient */
.sim-card__best-value{background:linear-gradient(90deg,var(--pm-accent) 0%,var(--pm-accent-dk) 100%) !important}
/* off-system green feature pills -> blue tint */
.sim-card__feature{background:#f2f7fd !important;border:1px solid #d6e6f7 !important;color:var(--pm-body) !important}
/* primary conversion button: off-brand cyan -> brand blue */
.sim-card__cta{
  background:var(--pm-accent) !important;
  color:#fff !important;
  box-shadow:0 8px 22px -8px rgba(46,125,210,0.6) !important;
}
.sim-card__cta:hover{background:var(--pm-accent-dk) !important}
/* tokenise the raw-hex body text */
.sim-card__stat-val,.sim-card__price-symbol,.sim-card__price-amount,
.sim-card__detail-row strong{color:var(--pm-ink) !important}
.sim-card__plan,.sim-card__price-per,.sim-card__stat-label{color:var(--pm-muted) !important}
.sim-card__detail-row,.sim-card__check{color:var(--pm-body) !important}
.sim-card__type-badge{background:var(--pm-fill) !important;color:var(--pm-body) !important}

/* ============================================================
   FLAGSHIP HERO WIDGET — device/mobile deal cards (.dev-card)
   (JS-rendered; built for the old dark widget — refine to premium)
   ============================================================ */
.dev-card{
  border:1px solid var(--pm-line) !important;
  box-shadow:var(--pm-shadow) !important;
}
/* off-brand cyan accents -> brand blue */
.dev-card__stat-val.blue{color:var(--pm-accent) !important}
.dev-card__toggle{color:var(--pm-accent) !important}
/* drop the blue->green corner ribbon gradient */
.dev-card__ribbon{background:linear-gradient(135deg,var(--pm-accent),var(--pm-accent-dk)) !important}

/* Inline cyan ✓ glyph injected by the deal-render JS (unreachable by class) */
[style*="color:#00A6EB"]{color:var(--pm-accent) !important}

/* ============================================================
   ENERGY TAB (#p-en) — inline white text on the now-white panel
   Scoped to the offending inline-style signatures so the
   self-dark OVO promo cards keep their branded dark tiles.
   ============================================================ */
#p-en > div[style*="text-align:center"] > div[style*="color:#fff"]{color:var(--pm-ink) !important}
#p-en > div[style*="text-align:center"] > div[style*="rgba(255,255,255,0.35)"]{color:var(--pm-muted) !important}
#p-en div[style*="background:rgba(255,255,255,0.03)"]{background:var(--pm-fill) !important;border:1px solid var(--pm-line) !important}
#p-en div[style*="background:rgba(255,255,255,0.03)"] div[style*="color:#fff"]{color:var(--pm-ink) !important}
#p-en div[style*="background:rgba(255,255,255,0.03)"] div[style*="rgba(255,255,255,0.35)"]{color:var(--pm-muted) !important}
/* business-energy CTA button label -> brand blue for contrast on light */
#p-en a[style*="color:#4A9FE8"]{color:var(--pm-accent) !important}

/* ============================================================
   POLISH PASS 3 — CANONICAL PRIMARY-CTA SYSTEM
   ONE button shape sitewide: brand blue #2E7DD2 bg / white text /
   12px radius / 700 weight / single blue drop-shadow, hover-darken
   to #1f5fa8 + 1px lift. Kills every legacy GREEN (#4CAF50) and
   old-navy-gradient CTA. Ghost style for secondary/back buttons.
   Placed last so it wins over the earlier partial CTA rules.
   ============================================================ */
.btn-search,.nl-btn,.bd-email-send,.btn-find-deals,.back-cta,
.btn-ewiz-next,.dev-card__cta,.cta-btn,
.btn-next,.sim-card__cta,.speed-banner-btn,.hub-cta a,
.w-btn,.w-compare-btn,.article-solar-cta a{
  background:var(--pm-accent) !important;
  background-image:none !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  border:none !important;
  border-radius:12px !important;
  font-family:'Plus Jakarta Sans',sans-serif !important;
  font-weight:700 !important;
  box-shadow:0 8px 22px -8px rgba(46,125,210,0.6) !important;
}
.btn-search:hover,.nl-btn:hover,.bd-email-send:hover,.btn-find-deals:hover,.back-cta:hover,
.btn-ewiz-next:hover,.dev-card__cta:hover,.cta-btn:hover,
.btn-next:hover,.sim-card__cta:hover,.speed-banner-btn:hover,.hub-cta a:hover,
.w-btn:not(:disabled):hover,.w-compare-btn:hover,.article-solar-cta a:hover{
  background:var(--pm-accent-dk) !important;
  background-image:none !important;
  color:#fff !important;
  box-shadow:0 12px 28px -8px rgba(46,125,210,0.5) !important;
  filter:none !important;
  opacity:1 !important;
  transform:translateY(-1px) !important;
}
/* legible disabled state (was invisible white-on-white / low-contrast) */
.btn-ewiz-next:disabled,.w-btn:disabled{
  background:var(--pm-fill) !important;
  color:var(--pm-muted) !important;
  -webkit-text-fill-color:var(--pm-muted) !important;
  box-shadow:none !important;
  transform:none !important;
  pointer-events:none !important;
}
/* hub CTA geometry (radius unified above; add padding for parity) */
.hub-cta a{padding:.8rem 1.4rem !important}

/* ---------- Secondary / ghost CTAs ---------- */
.btn-ewiz-back{
  background:var(--pm-paper) !important;
  border:1px solid var(--pm-line) !important;
  color:var(--pm-body) !important;
  -webkit-text-fill-color:var(--pm-body) !important;
  border-radius:12px !important;
  font-family:'Plus Jakarta Sans',sans-serif !important;
  font-weight:600 !important;
}
.btn-ewiz-back:hover{
  background:var(--pm-fill) !important;
  border-color:var(--pm-line) !important;
  color:var(--pm-ink) !important;
  -webkit-text-fill-color:var(--pm-ink) !important;
}
/* normalise pill-radius + aliased font on the wizard/results back buttons */
.btn-back,.btn-ewiz-restart{
  border-radius:10px !important;
  font-family:'Plus Jakarta Sans',sans-serif !important;
  font-weight:600 !important;
}
/* detail toggles -> muted, blue on hover (were low-contrast grey / lime) */
.btn-det{color:var(--pm-muted) !important}
.btn-det:hover{color:var(--pm-accent) !important}
/* deal-card toggle/check: left to original inline styling (operator: deal cards unchanged) */

/* ============================================================
   POLISH PASS 3 — GREEN / CYAN ACCENT SWEEP (non-CTA)
   ============================================================ */
/* energy wizard completed steps + connectors: green -> blue */
.ewiz-step.done{background:var(--pm-accent) !important;border-color:var(--pm-accent) !important;color:#fff !important}
.ewiz-line.done{background:var(--pm-accent) !important}
/* device-card feature pills: green tint -> blue tint (match .sim-card__feature) */
.dev-card__perk{background:#f2f7fd !important;border:1px solid #d6e6f7 !important;color:var(--pm-body) !important}
/* hero accent word "Switch." inline green -> blue */
.hero h1 span[style*="4CAF50"]{color:var(--pm-accent) !important;-webkit-text-fill-color:var(--pm-accent) !important}
/* deal-card inclusion checkmarks: left to original inline styling (operator: deal cards unchanged) */
/* featured-card + speed-banner accent stripes: blue->green gradient -> solid blue */
.card.top::before{background:var(--pm-accent) !important;background-image:none !important}
.speed-banner-bar{background:var(--pm-accent) !important;background-image:none !important}
/* loading overlay: green sweep/bars/step-3 accents -> blue */
.sm-loading__accent::after,.sm-loading__progress-fill::after{background:var(--pm-accent) !important}
.sm-loading__wave-bar:nth-child(3n){background:var(--pm-accent) !important;opacity:.4}
#sm-step-3{color:var(--pm-accent) !important}
#sm-step-3 .sm-loading__step-dot{background:var(--pm-accent) !important}
/* redirect interstitial wordmark second syllable: green -> blue */
.redirect-card__logo .green{color:var(--pm-accent) !important}

/* ============================================================
   SPEED-TEST PAGE — full premium-white instrument
   (.speed-box gauge + .w-monitor Health Check). Scoped to
   speed-only .w-* / .speed-* / .spd-* / #w* selectors so no rule
   leaks to other pages. JS toggle states preserved; only the
   presentation layer is overridden.
   ============================================================ */
/* Primary shells -> white cards */
.speed-box{background:var(--pm-paper) !important;border:1px solid var(--pm-line) !important;box-shadow:var(--pm-shadow) !important}
.w-monitor{background:var(--pm-paper) !important;border:1px solid var(--pm-line) !important;box-shadow:var(--pm-shadow) !important}

/* Gauge readouts + dial (CSS fill beats JS-set presentation attr) */
#wDV{fill:var(--pm-accent) !important}
#wUV{fill:var(--pm-accent-dk) !important}
.w-gauge svg text:not([id]){fill:var(--pm-muted) !important}
.w-gauge svg path:not([id]){stroke:rgba(14,28,48,0.08) !important}
#wUA{stroke:var(--pm-accent-dk) !important}
#wUD{fill:var(--pm-accent-dk) !important}

/* Gauge labels + widget wordmark + badge */
.w-glabel{color:var(--pm-muted) !important}
.w-glabel.dl{color:var(--pm-accent) !important}
.w-glabel.ul{color:var(--pm-accent-dk) !important}
.w-brand2 span{color:var(--pm-ink) !important;-webkit-text-fill-color:var(--pm-ink) !important}
.w-badge2{color:var(--pm-muted) !important}

/* Ping module */
.w-ping2{background:var(--pm-fill) !important;border:1px solid var(--pm-line) !important}
.w-ping2.active{background:rgba(245,158,11,0.10) !important;border-color:#b45309 !important}
.w-pval2,#wPV{color:var(--pm-ink) !important}
.w-plbl2{color:var(--pm-muted) !important}

/* Progress bar + step tracker */
.w-prog{background:var(--pm-line) !important}
.w-phase{color:var(--pm-muted) !important}
.w-step-dot{background:rgba(14,28,48,0.12) !important}
.w-step-dot.active{background:var(--pm-accent) !important}
.w-step-dot.done{background:var(--pm-accent) !important}
.w-step-line{background:var(--pm-line) !important}
.w-step-lbl{color:var(--pm-muted) !important}

/* Results tiles (upload green tile -> blue; ping amber darkened) */
.w-tlbl{color:var(--pm-muted) !important}
.w-results .w-tile[style*="76,175,80"]{background:rgba(46,125,210,0.08) !important;border-color:rgba(46,125,210,0.20) !important}
#wRU{color:var(--pm-accent) !important}
#wRP{color:#b45309 !important}

/* Bufferbloat panel */
.w-bb2{background:var(--pm-fill) !important;border:1px solid var(--pm-line) !important}
.w-bbt{color:var(--pm-ink) !important}
.w-bbs,.w-bb-note{color:var(--pm-muted) !important}

/* Privacy microcopy under Run button */
.speed-inner p{color:var(--pm-muted) !important}
.w-privacy{color:var(--pm-muted) !important}
.w-privacy a{color:var(--pm-accent) !important}

/* "Email my results" CTA strip (green -> blue/neutral) */
#wEmailCTA > div{background:var(--pm-fill) !important;border:1px solid var(--pm-line) !important}
#wEmailCTA div[style*="#4CAF50"]{color:var(--pm-accent) !important}
#wEmailCTA div[style*="255,255,255"]{color:var(--pm-muted) !important}
#wEmailCTA button{background:var(--pm-accent) !important;color:#fff !important;border-radius:12px !important}

/* Email-results form (green panel + dark input -> white/blue) */
.w-email-section{background:var(--pm-fill) !important;border:1px solid var(--pm-line) !important}
.w-email-title{color:var(--pm-accent) !important}
.w-email-sub{color:var(--pm-muted) !important}
.w-email-input{background:var(--pm-paper) !important;border:1px solid var(--pm-line) !important;color:var(--pm-ink) !important}
.w-email-input:focus{border-color:var(--pm-accent) !important}
.w-email-input::placeholder{color:var(--pm-muted) !important}
.w-email-send{background:var(--pm-accent) !important;color:#fff !important;border-radius:12px !important}
.w-email-send:disabled{background:var(--pm-fill) !important;color:var(--pm-muted) !important}
.w-email-success{color:#1f7a3d !important}
.w-email-success a{color:var(--pm-accent) !important}

/* Health Check monitor chrome */
.w-monitor-title{color:var(--pm-ink) !important}
.w-monitor-sub{color:var(--pm-muted) !important}
.w-monitor-stat{color:var(--pm-muted) !important}
.w-monitor-stat strong{color:var(--pm-ink) !important}
.w-monitor-countdown{color:var(--pm-muted) !important}
.w-monitor-btn.start{background:var(--pm-accent) !important;color:#fff !important;border-radius:8px !important}
.w-monitor-btn.start:hover{background:var(--pm-accent-dk) !important}
#wMonCountdown [style*="#4CAF50"]{color:#1f7a3d !important}

/* Monitor duration toggle (unselected text + spans + email input) */
#wMonOpt1,#wMonOpt4{color:var(--pm-body) !important}
#wMonOpt1 span,#wMonOpt4 span{color:var(--pm-muted) !important}
#wMonEmail{background:var(--pm-paper) !important;border:1px solid var(--pm-line) !important;color:var(--pm-ink) !important}
#wMonEmail::placeholder{color:var(--pm-muted) !important}

/* Monitor post-run email capture block */
.w-mon-post-email{background:var(--pm-fill) !important;border:1px solid var(--pm-line) !important}
.w-mon-post-email-label{color:var(--pm-ink) !important}
.w-mon-post-email-row input{background:var(--pm-paper) !important;border:1px solid var(--pm-line) !important;color:var(--pm-ink) !important}
.w-mon-post-email-row input::placeholder{color:var(--pm-muted) !important}
.w-mon-post-email-row button{background:var(--pm-accent) !important;color:#fff !important;border-radius:12px !important}
.w-mon-post-email-row button:disabled{background:var(--pm-fill) !important;color:var(--pm-muted) !important}
.w-mon-post-email-msg{color:#1f7a3d !important}
.w-mon-post-email-msg.err{color:#c0392b !important}

/* Comparison table (highlighted col header + ticks/crosses) */
.spd-compare-table thead th:nth-child(2){background:var(--pm-accent) !important;color:#fff !important;box-shadow:none !important}
.ck{color:#1f7a3d !important}
.cx{color:var(--pm-muted) !important}
.spd-compare-table tbody td:nth-child(2) .ck{color:var(--pm-accent) !important}

/* Speed-page body remnants (bare strong / trailing p / faq hover) */
.page-wrap strong{color:var(--pm-ink) !important}
.page-wrap > p{color:var(--pm-muted) !important}
.page-wrap .faq-q:hover{color:var(--pm-accent) !important}

/* speed/privacy.html: data tables + green "Consent" tag */
.sm-table th{color:var(--pm-muted) !important;border-bottom:1px solid var(--pm-line) !important}
.sm-table td{color:var(--pm-body) !important;border-bottom:1px solid var(--pm-line-2) !important}
.sm-table tr:last-child td{border-bottom:none !important}
.tag.green{color:#1f7a3d !important;background:rgba(31,122,61,0.10) !important;border-color:rgba(31,122,61,0.30) !important}
