/* CommercialElectricityRates.com — design system.

   One idea runs through every surface: VOLT means "you can shop this",
   NAVY means "set by your utility". The bill split, the market map, the
   calculators and the desk all use the same two colours for the same two
   meanings, so the core concept is learned once and read everywhere.

   No web fonts (system stack, fast everywhere). Numbers stay tabular. */

:root {
  /* brand */
  --navy:       #0a1b33;
  --navy-2:     #10294b;
  --navy-3:     #1d3c68;
  --volt:       #c5f23a;
  --volt-2:     #b3e42a;
  --volt-ink:   #0a1b33;
  --on-dark:    #ffffff;
  --on-dark-2:  #b8c4d6;   /* 9.8:1 on navy */
  --on-dark-3:  #8fa0b8;

  /* surfaces and text */
  --ink:        #0c1a2e;
  --ink-2:      #3c4a5e;
  --ink-3:      #5b6779;   /* AA: 5.74:1 on panel, 5.3:1 on paper */
  --rule:       #dce3ec;
  --rule-2:     #edf1f6;
  --paper:      #f4f6fa;
  --panel:      #ffffff;

  /* interactive and status */
  --accent:     #1f56e0;   /* links: 6.06:1 on panel */
  --accent-ink: #ffffff;
  --accent-sub: #eaf0ff;
  --ok:         #0b7a50;
  --ok-bg:      #e6f5ee;
  --warn:       #9a5300;
  --warn-bg:    #fff3de;
  --info:       #22477a;
  --info-bg:    #eaf1fb;

  /* the two meanings */
  --shop:       var(--volt);
  --locked:     var(--navy-3);

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1180px;
  --r: 12px;
  --r-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(10,27,51,.06), 0 2px 8px -2px rgba(10,27,51,.06);
  --shadow: 0 1px 2px rgba(10,27,51,.05), 0 14px 34px -14px rgba(10,27,51,.22);
  --shadow-lg: 0 2px 6px rgba(10,27,51,.06), 0 32px 70px -26px rgba(10,27,51,.38);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:#e7edf6; --ink-2:#aebbcd; --ink-3:#8594a8;
    --rule:#22324a; --rule-2:#1a283d;
    --paper:#0a1322; --panel:#0f1c30;
    --accent:#86a8ff; --accent-ink:#0a1322; --accent-sub:#15264a;
    --ok:#5fd3a0; --ok-bg:#0f2a20; --warn:#f0b35a; --warn-bg:#2a1f10; --info:#94b6e8; --info-bg:#132339;
    --navy:#0c1b31; --navy-2:#132a4a; --navy-3:#3a5f94;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 38px -14px rgba(0,0,0,.7);
    --shadow-lg: 0 2px 6px rgba(0,0,0,.5), 0 34px 80px -24px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"] {
  --ink:#e7edf6; --ink-2:#aebbcd; --ink-3:#8594a8;
  --rule:#22324a; --rule-2:#1a283d;
  --paper:#0a1322; --panel:#0f1c30;
  --accent:#86a8ff; --accent-ink:#0a1322; --accent-sub:#15264a;
  --ok:#5fd3a0; --ok-bg:#0f2a20; --warn:#f0b35a; --warn-bg:#2a1f10; --info:#94b6e8; --info-bg:#132339;
  --navy:#0c1b31; --navy-2:#132a4a; --navy-3:#3a5f94;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 38px -14px rgba(0,0,0,.7);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.5), 0 34px 80px -24px rgba(0,0,0,.85);
}

*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 16.5px/1.65 var(--sans);
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
@media (max-width: 480px) { .wrap { padding: 0 16px; } }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
h1,h2,h3,h4 { font-family: var(--display); line-height: 1.16; letter-spacing: -0.02em; margin: 0 0 .5em; font-weight: 720; color: var(--ink); }
h1 { font-size: clamp(32px, 4.6vw, 52px); letter-spacing: -0.032em; }
h2 { font-size: clamp(24px, 2.8vw, 32px); margin-top: 1.9em; letter-spacing: -0.024em; }
h3 { font-size: 19px; margin-top: 1.6em; }
p, li { max-width: 72ch; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:8px; top:8px; z-index:99; background:var(--panel); padding:10px 14px; border:2px solid var(--accent); border-radius:var(--r); }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- masthead ---------- */
.masthead {
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 30;
}
.masthead__in { display: flex; align-items: center; gap: 20px; min-height: 68px; flex-wrap: wrap; }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.brand__mark { display: grid; width: 32px; height: 32px; }
.brand__mark svg { width: 32px; height: 32px; display: block; }
.brand__sq { fill: var(--volt); }
.brand__bolt { fill: var(--navy); }
.brand__word { font: 600 17px/1 var(--display); letter-spacing: -0.02em; white-space: nowrap; }
.brand__word b { font-weight: 800; }
.brand__word small { font-size: 1em; font-weight: 500; color: var(--ink-3); }
@media (max-width: 380px) { .brand__word { font-size: 15px; } }

.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.nav li { max-width: none; }
.nav a:not(.btn) { display: block; color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 550; padding: 8px 12px; border-radius: 8px; }
.nav a:not(.btn):hover { color: var(--ink); background: var(--rule-2); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--rule-2); }
.nav__cta { margin-left: 8px; }

.navtoggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--rule); border-radius: 10px; background: var(--panel); color: var(--ink); cursor: pointer; place-items: center; }
.navtoggle__bars { display: grid; gap: 4px; width: 18px; }
.navtoggle__bars i { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 960px) {
  .nav { width: 100%; margin: 0 0 12px; }
  .nav ul { gap: 2px; }
  .js-nav .navtoggle:not([hidden]) { display: grid; }
  .js-nav .nav { display: none; margin: 0 0 14px; }
  .js-nav .nav.is-open { display: block; }
  .js-nav .nav ul { flex-direction: column; align-items: stretch; gap: 2px; padding-top: 6px; border-top: 1px solid var(--rule); }
  .js-nav .nav a:not(.btn) { font-size: 17px; padding: 12px 10px; }
  .js-nav .nav__cta { margin: 10px 0 4px; }
  .js-nav .nav__cta .btn { display: block; text-align: center; padding: 14px; font-size: 16px; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 999px; font: 700 15.5px/1.2 var(--sans);
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer; letter-spacing: -0.005em;
  transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease, border-color .16s ease, color .16s ease;
}
.btn--primary { background: var(--volt); color: var(--volt-ink); box-shadow: 0 1px 0 rgba(10,27,51,.12), inset 0 -2px 0 rgba(10,27,51,.1); }
.btn--primary:hover { background: var(--volt-2); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { border-color: var(--ink-3); background: var(--panel); }
.btn--dark { background: var(--navy); color: #fff; }
.btn--dark:hover { background: var(--navy-2); }
.btn--sm { padding: 9px 16px; font-size: 14.5px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* ---------- page hero (dark) ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(780px 360px at 92% 18%, rgba(197,242,58,.13), transparent 62%),
    radial-gradient(640px 360px at -6% 112%, rgba(47,107,255,.30), transparent 62%),
    var(--navy);
  color: var(--on-dark); padding: 26px 0 52px;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 78% 20%, #000 10%, transparent 72%);
          mask-image: radial-gradient(ellipse 70% 90% at 78% 20%, #000 10%, transparent 72%);
}
.hero h1 { color: #fff; max-width: 22ch; margin-top: 18px; }
.hero .crumbs + .eyebrow, .hero .crumbs + h1 { margin-top: 28px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 650 13px/1 var(--sans); letter-spacing: .01em;
  color: var(--volt); background: rgba(197,242,58,.1); border: 1px solid rgba(197,242,58,.28);
  padding: 7px 12px; border-radius: 999px; margin: 22px 0 0;
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--volt); box-shadow: 0 0 0 3px rgba(197,242,58,.2); }
.standfirst { font-size: 19px; line-height: 1.6; color: var(--on-dark-2); max-width: 66ch; margin: 0; }
.herometa { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 28px 0 0; padding: 0; }
.herometa li {
  display: grid; gap: 5px; padding: 12px 16px; flex: 1 1 auto; min-width: 150px; max-width: none;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r);
}
.herometa span { font: 600 12.5px/1.2 var(--sans); color: var(--on-dark-3); }
.herometa strong { font-size: 17px; font-weight: 700; color: #fff; }
.hero a:not(.btn) { color: var(--volt); }

/* ---------- breadcrumbs ---------- */
.crumbs { padding: 16px 0 0; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; font-size: 14px; color: var(--ink-3); }
.crumbs li { max-width: none; }
.crumbs li + li::before { content: "›"; margin-right: 8px; opacity: .6; }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.hero .crumbs { padding-top: 0; }
.hero .crumbs ol { color: var(--on-dark-3); }
.hero .crumbs a { color: var(--on-dark-2); }
.hero .crumbs a:hover { color: #fff; }

/* ---------- sections ---------- */
.sec { padding: 44px 0; }
.sec--tint { background: var(--panel); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.sec > .wrap > h2:first-child, .sec > .wrap > .prose > h2:first-child { margin-top: 0; }

/* ---------- answer block (AEO/GEO) ---------- */
.answer {
  position: relative; background: var(--panel); border: 1px solid var(--rule);
  border-left: 4px solid var(--accent); border-radius: var(--r); padding: 18px 22px 18px;
  margin: 0 0 28px; box-shadow: var(--shadow-sm);
}
.answer::before { content: "The short answer"; display: block; font: 700 12.5px/1 var(--sans); color: var(--accent); margin-bottom: 9px; letter-spacing: .01em; }
.answer__text { font-size: 17.5px; line-height: 1.6; margin: 0; max-width: 74ch; }
.answer__src { font-size: 13px; color: var(--ink-3); margin: 10px 0 0; }

/* ---------- notices ---------- */
.notice { padding: 14px 18px; border-radius: var(--r); margin: 0 0 22px; border: 1px solid; border-left-width: 4px; }
.notice p { margin: 0; }
.notice--ok   { background: var(--ok-bg);   border-color: color-mix(in srgb, var(--ok) 35%, transparent);   color: var(--ok); }
.notice--warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 35%, transparent); color: var(--warn); }
.notice--info { background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 35%, transparent); color: var(--info); }
.notice--ok { border-left-color: var(--ok); } .notice--warn { border-left-color: var(--warn); } .notice--info { border-left-color: var(--info); }
.notice strong { color: inherit; }
.notice a { color: inherit; font-weight: 650; }

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; margin: 22px 0; border: 1px solid var(--rule); border-radius: var(--r); background: var(--panel); box-shadow: var(--shadow-sm); }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
caption { text-align: left; padding: 14px 18px; font-size: 13.5px; color: var(--ink-3); border-bottom: 1px solid var(--rule); }
th, td { padding: 12px 18px; text-align: left; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
thead th { font: 650 13px/1.3 var(--sans); color: var(--ink-2); background: color-mix(in srgb, var(--rule-2) 70%, var(--panel)); border-bottom: 1px solid var(--rule); white-space: nowrap; }
tbody th { font-weight: 650; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: color-mix(in srgb, var(--rule-2) 45%, transparent); }
td.r, th.r { text-align: right; font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- about-this-page stamp ---------- */
.stamp { margin: 36px 0 0; padding: 16px 20px; border: 1px dashed var(--rule); border-radius: var(--r); background: transparent; }
.stamp dl { display: flex; flex-wrap: wrap; gap: 8px 36px; margin: 0; }
.stamp dl div { display: grid; gap: 3px; }
.stamp dt { font: 600 12px/1.2 var(--sans); color: var(--ink-3); }
.stamp dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.stamp__src { font-size: 13px; color: var(--ink-3); margin: 12px 0 0; max-width: none; }

/* ---------- chips ---------- */
.chip { display: inline-block; font: 650 12px/1 var(--sans); padding: 6px 11px; border-radius: 999px; border: 1px solid var(--rule); color: var(--ink-2); background: var(--panel); }
.chip--e1 { border-color: color-mix(in srgb, var(--info) 40%, transparent); color: var(--info); background: var(--info-bg); }
.chip--e2 { border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); background: var(--accent-sub); }
.chip--e3 { border-color: color-mix(in srgb, var(--warn) 40%, transparent); color: var(--warn); background: var(--warn-bg); }
.chip--e4 { border-color: color-mix(in srgb, var(--ok) 40%, transparent); color: var(--ok); background: var(--ok-bg); }

/* ---------- the one call to action per page ---------- */
.cta {
  position: relative; overflow: hidden; margin: 36px 0; padding: 30px 32px;
  border-radius: var(--r-lg); color: var(--on-dark);
  background:
    radial-gradient(520px 220px at 100% 0%, rgba(197,242,58,.16), transparent 65%),
    var(--navy);
  display: flex; align-items: center; gap: 18px 28px; flex-wrap: wrap;
  box-shadow: var(--shadow);
}
.cta .btn { order: 2; }
.cta__sub { order: 1; flex: 1 1 340px; margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--on-dark-2); }
.cta a:not(.btn) { color: var(--volt); }

/* ---------- cards / grids ---------- */
.grid { display: grid; gap: 16px; margin: 22px 0; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(290px,1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); }
.card { border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 22px; background: var(--panel); box-shadow: var(--shadow-sm); }
.card h3 { margin-top: 0; font-size: 18px; }
.card p { font-size: 15px; color: var(--ink-2); margin-bottom: 0; }
.card a { font-weight: 600; }
.card--link { text-decoration: none; color: inherit; display: block; }
.card--link h3 { color: var(--ink); }
.card--link:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

/* ---------- split bar: volt = shoppable, navy = utility ---------- */
.splitbar { display: flex; height: 44px; border-radius: 10px; overflow: hidden; margin: 18px 0 10px; box-shadow: inset 0 0 0 1px rgba(10,27,51,.06); }
.splitbar span { display: grid; place-items: center; font: 700 12.5px/1 var(--sans); color: #fff; white-space: nowrap; overflow: hidden; }
.splitbar .s-supply { background: var(--volt); color: var(--volt-ink); }
.splitbar .s-deliv  { background: var(--navy-3); }
.splitbar .s-tax    { background: #a9b4c2; color: var(--navy); }
.splitkey { display: flex; gap: 20px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 8px; font-size: 14px; color: var(--ink-2); }
.splitkey li { display: flex; align-items: center; gap: 8px; }
.swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* ---------- calculators ---------- */
.calc { border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--panel); overflow: hidden; margin: 26px 0; box-shadow: var(--shadow); }
.calc__in { padding: 22px; border-bottom: 1px solid var(--rule); display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); background: color-mix(in srgb, var(--rule-2) 45%, var(--panel)); }
.calc__out { padding: 22px; }
.field { display: grid; gap: 7px; align-content: start; }
.field label { font: 650 14px/1.3 var(--sans); color: var(--ink-2); }
.field input, .field select, .field textarea {
  font: 400 16px var(--sans); padding: 11px 13px; border: 1.5px solid var(--rule);
  border-radius: 10px; background: var(--panel); color: var(--ink); width: 100%;
  font-variant-numeric: tabular-nums; transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: color-mix(in srgb, var(--ink-3) 60%, var(--rule)); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.field small { font-size: 13px; color: var(--ink-3); }
.result { display: grid; gap: 14px; }
.result__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.result__big { font: 800 40px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.result__band { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.result__note { font-size: 15px; color: var(--ink-2); margin: 0; }
.assump { font-size: 13.5px; color: var(--ink-3); margin: 0; padding-left: 18px; }
.assump li { max-width: none; }

/* ---------- footer ---------- */
.foot { background: var(--navy); color: var(--on-dark-2); margin-top: 64px; padding: 56px 0 30px; }
.foot__top { display: grid; gap: 40px; grid-template-columns: minmax(260px, 1.1fr) 2.4fr; }
@media (max-width: 900px) { .foot__top { grid-template-columns: 1fr; } }
.foot__brand p { font-size: 14.5px; color: var(--on-dark-2); margin: 14px 0 0; max-width: 46ch; }
.foot__brand .btn { margin-top: 20px; }
.brand--foot { color: #fff; }
.brand--foot .brand__word small { color: var(--on-dark-3); }
.foot__grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); }
.foot__col h2 { font: 700 13px/1 var(--sans); color: #fff; margin: 0 0 14px; letter-spacing: .01em; }
.foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot__col a { color: var(--on-dark-2); text-decoration: none; font-size: 14.5px; }
.foot__col a:hover { color: #fff; text-decoration: underline; }
.foot__legal { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); }
.foot__legal p { font-size: 13px; color: var(--on-dark-3); max-width: 100ch; margin: 0 0 8px; }
.foot__legal strong { color: var(--on-dark-2); }
.foot__legal a { color: var(--on-dark-2); }
.foot__build { font-size: 12.5px !important; }

/* ---------- prose ---------- */
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--ink-3); }
.prose > p:first-child { margin-top: 0; }
.lede { font-size: 19px; line-height: 1.6; color: var(--ink-2); }
hr { border: 0; border-top: 1px solid var(--rule); margin: 36px 0; }
.small { font-size: 14px; color: var(--ink-3); }
.mono { font-family: var(--mono); }

@media print { .masthead, .foot, .cta, .navtoggle { display: none; } body { background: #fff; } .hero { background: #fff; color: #000; } .hero h1 { color: #000; } }

/* ---------- FAQ definition list ---------- */
.faq { margin: 18px 0; }
.faq dt { font-weight: 700; margin-top: 20px; font-size: 17px; }
.faq dd { margin: 6px 0 0; color: var(--ink-2); max-width: 74ch; }
.prose pre.mono { overflow-x: auto; padding: 16px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--panel); font-size: 13.5px; line-height: 1.6; }

/* ---------- intake form ---------- */
.intake { margin: 34px 0 0; }
.intakeform { border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--panel); padding: 26px; margin: 20px 0; box-shadow: var(--shadow); }
.intakeform__grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); margin-bottom: 18px; }
.intakeform .field label { display: block; }
.req { color: var(--warn); font-weight: 700; }
.field--invalid input, .field--invalid select, .field--invalid textarea { border-color: var(--warn); border-width: 2px; }
.field--invalid label { color: var(--warn); }
.intakeform__submit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--rule); }
.intakeform__submit .small { margin: 0; max-width: 52ch; }
.status--ok  { color: var(--ok); font-weight: 600; }
.status--err { color: var(--warn); font-weight: 600; }

/* permissions — separate, unbundled, text visible on the page */
.perms { border: 1px solid var(--rule); border-radius: var(--r); padding: 18px 20px; margin: 22px 0 0; }
.perms legend { font: 700 14px/1 var(--sans); color: var(--ink-2); padding: 0 8px; }
.perms__intro { font-size: 14.5px; color: var(--ink-2); margin: 0 0 16px; }
.perms__version { font-size: 12.5px; color: var(--ink-3); margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--rule-2); max-width: none; }
.perm { padding: 14px 0; border-bottom: 1px solid var(--rule-2); }
.perm:last-of-type { border-bottom: 0; }
.perm__row { display: flex; align-items: flex-start; gap: 10px; }
.perm__row input[type="checkbox"] { width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0; accent-color: var(--accent); }
.perm__label { font-weight: 650; font-size: 15.5px; cursor: pointer; display: block; }
.perm__text { font-size: 14px; color: var(--ink-2); margin: 8px 0 0 30px; max-width: 78ch; }
.perm--note { background: var(--info-bg); border-radius: 10px; padding: 14px; border-bottom: 0; }
.perm--note p { font-size: 14px; margin: 0; color: var(--info); }

/* honeypot — off-screen, never display:none (some bots skip hidden fields) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* The status line under the heading of a page that describes the supplier-comparison service. */
.statusbar { padding-top: 22px; }
.statusbar .notice { margin: 0; }
/* ---------- HAUSE brand layer ----------
   This is a HAUSE Energy property: a thin HAUSE bar above the masthead, "by HAUSE" in the lockup, and
   the HAUSE sign-off in the footer, as on the Electrical Bill Calculator by HAUSE. The page itself keeps
   the energy identity (volt = shop it, navy = your utility sets it). */
.hbar { background: var(--navy); color: var(--on-dark-2); font: 600 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.hbar__in { display: flex; align-items: center; gap: 18px; min-height: 36px; }
.hbar a { color: var(--on-dark); text-decoration: none; }
.hbar a:hover, .hbar a:focus-visible { color: var(--volt); }
.hbar__brand b { letter-spacing: .22em; margin-right: 2px; }
.hbar__tag { color: var(--on-dark-2); }
.hbar__geo { margin-left: auto; color: var(--on-dark-3); }
.hbar__tel { font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
@media (max-width: 760px) { .hbar__tag, .hbar__geo { display: none; } .hbar__tel { margin-left: auto; } }

.brandset { display: inline-flex; align-items: center; gap: 14px; flex-shrink: 0; }
.brand__by { display: grid; gap: 3px; padding: 2px 0 2px 14px; border-left: 1px solid var(--rule); text-decoration: none; color: var(--ink-3); font: 600 9px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.brand__by b { font-size: 12px; letter-spacing: .24em; color: var(--ink); font-weight: 800; }
.brand__by:hover b, .brand__by:focus-visible b { color: var(--accent); }
@media (max-width: 640px) {
  .brandset { flex-direction: column; align-items: flex-start; gap: 4px; }
  .brand__by { display: flex; align-items: baseline; gap: 6px; padding: 0 0 0 42px; border-left: 0; }
  .brand__by b { font-size: 10px; }
}
.brandset--foot .brand__by { border-color: rgba(255,255,255,.2); color: var(--on-dark-3); }
.brandset--foot .brand__by b { color: #fff; }
@media (max-width: 640px) { .brandset--foot .brand__by { padding-left: 42px; } }

.foot__hause { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px 40px; margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.12); }
.foot__sign { margin: 0; font: 700 clamp(26px, 4vw, 40px)/1.05 var(--display); letter-spacing: -.02em; text-transform: uppercase; color: #fff; }
.foot__sign b { color: var(--volt); font-weight: 700; }
.foot__hause-links { font-size: 14px; color: var(--on-dark-2); }
.foot__hause-links a { color: #fff; }
.foot__hause-links p { margin: 8px 0 0; }
.foot__hause-links small { color: var(--on-dark-3); }
/* =========================================================================
   THE DESK — a workspace, not a page. Dense, numeric, scannable.
   Concatenated onto site.css by the build.
   ========================================================================= */

.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.desk { padding-bottom: 40px; }

/* ---------- top bar ---------- */
/* The masthead wraps at narrow widths, so its height is measured at runtime
   into --masthead-h. The literal here is only a pre-hydration fallback. */
.desk__bar { border-bottom:1px solid var(--rule); background:var(--panel);
  position:sticky; top:var(--masthead-h, 98px); z-index:15; }
.desk__barin { max-width:var(--wrap); margin:0 auto; padding:16px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.desk__title h1 { font-size:26px; margin:0 0 2px; }
.desk__title p { margin:0; font-size:14px; color:var(--ink-3); }
.desk__actions { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width:760px){ .desk__bar { position:static; } .desk__actions { margin-left:0; width:100%; } }

/* ---------- KPI strip ---------- */
.desk__kpis { max-width:var(--wrap); margin:20px auto 0; padding:0 16px;
  display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); }
.kpi { border:1px solid var(--rule); border-radius:var(--r); background:var(--panel); padding:14px 16px; display:grid; gap:4px; }
.kpi span { font:600 10.5px/1 var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }
.kpi strong { font:700 26px/1.1 var(--sans); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.kpi small { font-size:12px; color:var(--ink-3); }
.kpi--accent { border-color:color-mix(in srgb, var(--accent) 45%, transparent); background:var(--accent-sub); }
.kpi--accent strong { color:var(--accent); }

/* ---------- layout ---------- */
.desk__grid { max-width:var(--wrap); margin:0 auto; padding:0 16px; display:grid; gap:24px; grid-template-columns:1fr; }
.desk__main > section { margin-top:34px; }
.desk__main h2 { margin-top:0; font-size:22px; }

/* ---------- empty state ---------- */
.empty { border:1px dashed var(--rule); border-radius:var(--r); background:var(--panel); padding:32px; }
.empty h2 { margin-top:0; }
.empty__steps { margin:18px 0 22px; padding-left:20px; }
.empty__steps li { margin-bottom:8px; color:var(--ink-2); }
.empty__note { font-size:13px; color:var(--ink-3); margin:14px 0 0; }

/* ---------- portfolio table ---------- */
.portfolio tbody th { font-weight:600; }
.rowsub { display:block; font-size:12.5px; color:var(--ink-3); font-weight:400; }
.linkish { background:none; border:0; padding:0; font:inherit; color:var(--accent); cursor:pointer; text-align:left; text-decoration:underline; text-underline-offset:2px; }
.linkish:hover { text-decoration-thickness:2px; }
.cell--hot { color:var(--warn); font-weight:700; }
.muted { color:var(--ink-3); }
.tag { display:inline-block; font:600 10.5px/1 var(--mono); letter-spacing:.05em; padding:5px 8px; border-radius:99px; border:1px solid var(--rule); color:var(--ink-2); white-space:nowrap; }
.tag--competitive { border-color:color-mix(in srgb,var(--ok) 40%,transparent); background:var(--ok-bg); color:var(--ok); }
.tag--limited { border-color:color-mix(in srgb,var(--warn) 40%,transparent); background:var(--warn-bg); color:var(--warn); }
.tag--regulated { border-color:color-mix(in srgb,var(--info) 40%,transparent); background:var(--info-bg); color:var(--info); }
.due { font:600 12px/1 var(--mono); padding:5px 8px; border-radius:4px; white-space:nowrap; display:inline-block; }
.due--high { background:var(--warn-bg); color:var(--warn); }
.due--medium { background:var(--info-bg); color:var(--info); }
.due--info { color:var(--ink-3); }

/* ---------- findings ---------- */
.findings { display:grid; gap:14px; margin:18px 0; }
.finding { border:1px solid var(--rule); border-left-width:4px; border-radius:var(--r); background:var(--panel); padding:18px 20px; }
.finding--high { border-left-color:var(--warn); }
.finding--medium { border-left-color:var(--info); }
.finding--info { border-left-color:var(--rule); }
.finding__head { display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap; }
.finding__head h3 { margin:0; font-size:17.5px; flex:1 1 300px; }
.finding__meta { display:flex; gap:6px; flex-wrap:wrap; }
.chip--high { border-color:color-mix(in srgb,var(--ok) 40%,transparent); background:var(--ok-bg); color:var(--ok); }
.chip--medium { border-color:color-mix(in srgb,var(--warn) 40%,transparent); background:var(--warn-bg); color:var(--warn); }
.chip--check { border-color:color-mix(in srgb,var(--info) 40%,transparent); background:var(--info-bg); color:var(--info); }
.finding__value { font:700 24px/1.1 var(--sans); font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--accent); margin:12px 0 0; }
.finding__value span { font-size:14px; font-weight:400; color:var(--ink-3); margin-left:6px; }
.finding__body { display:grid; grid-template-columns:auto 1fr; gap:6px 18px; margin:14px 0 0; }
.finding__body dt { font:600 10.5px/1.5 var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
.finding__body dd { margin:0; font-size:14.6px; color:var(--ink-2); max-width:72ch; }
.finding__learn { margin:14px 0 0; font-size:14px; }
.findings__foot { margin-top:18px; }
@media (max-width:620px){ .finding__body { grid-template-columns:1fr; gap:2px 0; } .finding__body dt { margin-top:10px; } }

/* ---------- decision timeline ---------- */
.timeline { display:grid; gap:12px; margin:18px 0; }
.tl { display:grid; grid-template-columns:200px 1fr 92px; gap:14px; align-items:center; }
.tl__label strong { display:block; font-size:15px; }
.tl__label span { font:400 12px var(--mono); color:var(--ink-3); }
.tl__track { position:relative; height:28px; background:var(--panel); border:1px solid var(--rule); border-radius:4px; overflow:hidden; }
.tl__window { position:absolute; top:0; bottom:0; background:var(--accent-sub); border-right:1px dashed color-mix(in srgb,var(--accent) 50%,transparent); }
.tl__pin { position:absolute; top:4px; bottom:4px; width:4px; border-radius:2px; background:var(--ink-2); transform:translateX(-2px); }
.tl__pin--high { background:var(--warn); }
.tl__pin--medium { background:var(--info); }
.tl__state { text-align:right; }
.tl__key { margin-top:6px; }
@media (max-width:700px){ .tl { grid-template-columns:1fr; gap:6px; } .tl__state { text-align:left; } }

/* ---------- site editor ---------- */
.desk__side { position:fixed; inset:0 0 0 auto; width:min(520px,100%); background:var(--panel);
  border-left:1px solid var(--rule); z-index:40; overflow-y:auto; box-shadow:-18px 0 44px rgba(0,0,0,.16); }
.editor { padding:22px; }
.editor__head { display:flex; align-items:center; gap:12px; margin-bottom:18px; position:sticky; top:0; background:var(--panel); padding-bottom:12px; border-bottom:1px solid var(--rule); }
.editor__head h2 { margin:0; font-size:20px; flex:1; }
.editor__close { background:none; border:1px solid var(--rule); border-radius:4px; width:34px; height:34px; font-size:22px; line-height:1; cursor:pointer; color:var(--ink-2); }
.editor fieldset { border:1px solid var(--rule); border-radius:var(--r); padding:16px; margin:0 0 16px; }
.editor legend { font:600 10.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); padding:0 8px; }
.editor .field { margin-bottom:14px; }
.editor__pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.editor__hint { font-size:13.5px; color:var(--ink-3); margin:0 0 14px; }
.editor__foot { display:flex; gap:10px; align-items:center; flex-wrap:wrap; position:sticky; bottom:0; background:var(--panel); padding-top:14px; border-top:1px solid var(--rule); }
.editor__foot .small { margin:0; flex:1 1 100%; }
.routehint { display:block; margin-top:6px; font-size:12.8px; }
.routehint--competitive { color:var(--ok); }
.routehint--limited { color:var(--warn); }
.routehint--regulated { color:var(--info); }
@media (max-width:560px){ .editor__pair { grid-template-columns:1fr; } }

/* ---------- handoff ---------- */
.desk__handoff { max-width:var(--wrap); margin:40px auto 0; padding:0 16px; }
.handoff__in { border:1px solid var(--rule); border-radius:var(--r); background:var(--panel); padding:26px;
  display:grid; gap:22px; grid-template-columns:1fr auto; align-items:center; }
.handoff__in h2 { margin-top:0; }
.handoff__cta { display:grid; gap:10px; }
@media (max-width:720px){ .handoff__in { grid-template-columns:1fr; } }

/* ---------- homepage opener: do, don't read ---------- */
.opener { display:grid; gap:32px; grid-template-columns:1fr 420px; align-items:start; margin-bottom:34px; }
.opener__do h2 { margin-top:0; }
.opener__list { margin:18px 0 22px; padding-left:20px; }
.opener__list li { margin-bottom:9px; color:var(--ink-2); }
.opener__actions { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
@media (max-width:900px){ .opener { grid-template-columns:1fr; } }

.peek { border:1px solid var(--rule); border-radius:var(--r); background:var(--panel); overflow:hidden; }
.peek__bar { display:flex; align-items:center; justify-content:space-between; padding:10px 14px;
  border-bottom:1px solid var(--rule); background:var(--paper);
  font:600 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.peek__dot { width:8px; height:8px; border-radius:50%; background:var(--accent); }
.peek__kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); }
.peek__kpis > div { background:var(--panel); padding:12px 14px; display:grid; gap:3px; }
.peek__kpis span { font:600 9.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.peek__kpis strong { font:700 17px/1.1 var(--sans); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.peek__accent strong { color:var(--accent); }
.peek__table { font-size:13px; }
.peek__table th, .peek__table td { padding:8px 14px; }
.peek__table thead th { font-size:9.5px; }
.peek__note { font-size:11.5px; color:var(--ink-3); margin:0; padding:10px 14px; border-top:1px solid var(--rule); }

.empty__actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* =========================================================================
   Desk: twelve-month history, charts and the what-if.
   ========================================================================= */

/* ---------- reading grid in the editor ---------- */
.readings table { font-size: 13px; }
.readings th, .readings td { padding: 4px 6px; }
.readings thead th { font-size: 9.5px; white-space: nowrap; }
.readings tbody th { padding-left: 6px; }
.readings input {
  width: 100%; min-width: 68px; padding: 6px 8px; font: 400 13px var(--sans);
  border: 1px solid var(--rule); border-radius: 3px; background: var(--paper);
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.readings input[type="month"] { min-width: 112px; font-size: 12px; }
.readings input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.editor__pasteactions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.editor__pasteactions .small { margin: 0; }
#s_paste { font: 400 12.5px/1.5 var(--mono); }

/* ---------- charts ---------- */
.charts { display: grid; gap: 18px; margin: 18px 0; }
.chart { margin: 0; border: 1px solid var(--rule); border-radius: var(--r); background: var(--panel); padding: 16px 18px; }
.chart figcaption { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-bottom: 10px; }
.chart figcaption strong { font-size: 16px; }
.chart figcaption span { font: 400 12.5px/1.5 var(--mono); color: var(--ink-3); }

.spark { width: 100%; height: auto; display: block; overflow: visible; }
.spark__bar { fill: color-mix(in srgb, var(--accent) 26%, transparent); }
.spark__bar--max { fill: color-mix(in srgb, var(--accent) 52%, transparent); }
.spark__peak { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark__billed { fill: none; stroke: var(--warn); stroke-width: 1.6; stroke-dasharray: 4 3; stroke-linejoin: round; }
.spark__ratchet { fill: var(--warn); }
.spark__label { font: 500 9.5px var(--mono); fill: var(--ink-3); text-anchor: middle; }

.chart__key { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--ink-3); }
.chart__key span { display: flex; align-items: center; gap: 6px; }
.k { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.k--bar { height: 10px; width: 8px; background: color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 1px; }
.k--peak { background: var(--accent); }
.k--billed { background: transparent; border-top: 2px dashed var(--warn); height: 0; }
.k--ratchet { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }

/* ---------- what-if ---------- */
.whatif { border: 1px solid var(--rule); border-radius: var(--r); background: var(--panel); padding: 20px; margin: 18px 0; }
.whatif__controls { display: grid; gap: 16px; grid-template-columns: 1.3fr 1.6fr 1fr; align-items: start; }
.whatif__controls .field { margin: 0; }
.whatif__controls output {
  display: block; margin-top: 6px; font: 700 20px/1 var(--sans);
  font-variant-numeric: tabular-nums; color: var(--accent);
}
.whatif__controls input[type="range"] { width: 100%; accent-color: var(--accent); padding: 0; }
@media (max-width: 760px) { .whatif__controls { grid-template-columns: 1fr; } }

.whatif__out { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule); }
.whatif__grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.wi { border: 1px solid var(--rule); border-radius: var(--r); padding: 14px; display: grid; gap: 4px; align-content: start; }
.wi span { font: 600 10px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.wi strong { font: 700 22px/1.15 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.wi small { font-size: 12.2px; color: var(--ink-3); line-height: 1.45; }
.wi--accent { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-sub); }
.wi--accent strong { color: var(--accent); }
.whatif__caveat { font-size: 13px; color: var(--ink-3); margin: 14px 0 0; max-width: 80ch; }
.whatif__blocked { font-size: 14px; color: var(--warn); margin: 0; }

/* =========================================================================
   VISUAL LAYER — maps, teardown, charts, diagrams, gauges.
   Same rule as the rest of the system: volt = you can shop it,
   navy = your utility sets it, amber = watch this, blue = interactive.
   ========================================================================= */

:root {
  --glow: 0 0 0 1px rgba(197,242,58,.35), 0 18px 48px -14px rgba(197,242,58,.55);
  --lift: var(--shadow);
  --lift-lg: var(--shadow-lg);
  --tile-shop-fill: color-mix(in srgb, var(--volt) 62%, var(--panel));
  --tile-shop-ink: var(--navy);
  --tile-shop-stroke: var(--volt-2);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tile-shop-fill: color-mix(in srgb, var(--volt) 20%, var(--panel));
    --tile-shop-ink: var(--volt);
    --tile-shop-stroke: color-mix(in srgb, var(--volt) 55%, transparent);
  }
}
:root[data-theme="dark"] {
  --tile-shop-fill: color-mix(in srgb, var(--volt) 20%, var(--panel));
  --tile-shop-ink: var(--volt);
  --tile-shop-stroke: color-mix(in srgb, var(--volt) 55%, transparent);
}

/* ---------- shared display type ---------- */
.hero__accent { color: var(--volt); }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 0; }
.btn--xl { padding: 17px 28px; font-size: 17px; }
.btn--primary.btn--xl { box-shadow: var(--glow); }

.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 13.5px/1 var(--sans); letter-spacing: .01em; color: var(--accent);
  margin: 0 0 14px;
}
.kicker::before { content: ""; width: 18px; height: 3px; border-radius: 3px; background: currentColor; }
h2.h2--big { font-size: clamp(30px, 3.8vw, 44px); letter-spacing: -.032em; max-width: 24ch; margin-top: 0; }

/* ---------- big statistics ---------- */
.statrow {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin: 36px 0;
}
.bigstat { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 24px; display: grid; gap: 8px; align-content: start; box-shadow: var(--shadow-sm); }
.bigstat__v { font: 800 clamp(34px, 4.2vw, 50px)/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.035em; color: var(--ink); }
.bigstat__u { font-size: .42em; font-weight: 600; color: var(--ink-3); margin-left: 5px; letter-spacing: 0; }
.bigstat__l { font: 700 14px/1.3 var(--sans); color: var(--ink); }
.bigstat__n { font-size: 14px; color: var(--ink-2); line-height: 1.5; }

/* ---------- the market map ---------- */
.mapwrap { margin: 28px 0; }
.usmap { width: 100%; height: auto; display: block; overflow: visible; }
.tile rect { fill: var(--panel); stroke: var(--rule); stroke-width: 1.2; transition: fill .18s ease, stroke .18s ease; }
.tile__abbr { font: 750 19px var(--sans); text-anchor: middle; dominant-baseline: middle; fill: var(--ink-2); letter-spacing: -0.02em; pointer-events: none; }
.tile__dot { font: 400 7px var(--mono); text-anchor: middle; fill: var(--ink-3); pointer-events: none; letter-spacing: 1px; }

.tile--competitive rect { fill: var(--tile-shop-fill); stroke: var(--tile-shop-stroke); }
.tile--competitive .tile__abbr, .tile--competitive .tile__dot { fill: var(--tile-shop-ink); }
.tile--limited rect { fill: color-mix(in srgb, var(--warn) 16%, var(--panel)); stroke: color-mix(in srgb, var(--warn) 45%, transparent); }
.tile--limited .tile__abbr, .tile--limited .tile__dot { fill: var(--warn); }
.tile--regulated rect { fill: var(--panel); stroke: var(--rule); }
.tile--regulated .tile__abbr { fill: var(--ink-3); }

.tile { cursor: pointer; }
.tile:hover rect { stroke-width: 2.5; stroke: var(--accent); }
.tile:focus-visible rect { stroke: var(--accent); stroke-width: 3; outline: none; }
.tile--active rect { stroke: var(--accent); stroke-width: 3.5; }
.tile--active .tile__abbr { fill: var(--accent); }
.tile--competitive.tile--active .tile__abbr { fill: var(--navy); }

.maplegend { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.maplegend li { display: flex; align-items: center; gap: 10px; font-size: 15px; max-width: none; }
.maplegend strong { font-variant-numeric: tabular-nums; }
.maplegend em { color: var(--ink-3); font-style: normal; font-size: 14px; }
.swatch--competitive { background: var(--volt); }
.swatch--limited { background: color-mix(in srgb, var(--warn) 55%, transparent); }
.swatch--regulated { background: var(--panel); box-shadow: inset 0 0 0 1.5px var(--rule); }
.maplegend .swatch { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; }
@media (max-width: 560px) { .tile__abbr { font-size: 22px; } .tile__dot { display: none; } }

/* ---------- the bill teardown ---------- */
.teardown { margin: 36px 0; }
.teardown__stage { border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--panel); padding: 30px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.teardown__total { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.teardown__total strong { font: 800 clamp(32px, 4vw, 48px)/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
.teardown__total span { font-size: 15px; font-weight: 600; color: var(--ink-3); }

.bars { display: grid; gap: 12px; }
.bar { display: grid; grid-template-columns: 200px 1fr 100px; gap: 18px; align-items: center; }
.bar__label { font-size: 15px; font-weight: 700; }
.bar__label small { display: block; font-size: 13px; font-weight: 550; color: var(--ink-3); margin-top: 3px; }
.bar__track { height: 36px; background: var(--rule-2); border-radius: 9px; overflow: hidden; position: relative; }
.bar__fill { height: 100%; border-radius: 9px; transform-origin: left center; transform: scaleX(var(--w, 0)); transition: transform .9s cubic-bezier(.22,.9,.3,1); }
.bar--supply .bar__fill { background: linear-gradient(90deg, var(--volt-2), var(--volt)); }
.bar--locked .bar__fill { background: linear-gradient(90deg, var(--navy-2), var(--navy-3)); }
.bar--tax .bar__fill { background: #a9b4c2; }
.bar__val { text-align: right; font: 750 17px var(--sans); font-variant-numeric: tabular-nums; }
@media (max-width: 680px) { .bar { grid-template-columns: 1fr auto; gap: 6px 12px; } .bar__track { grid-column: 1 / -1; grid-row: 2; } .bar__val { grid-row: 1; grid-column: 2; } }

.teardown__verdict { margin: 26px 0 0; padding: 20px 22px; border-radius: var(--r); background: var(--navy); color: var(--on-dark-2); }
.teardown__verdict p { margin: 0; font-size: 17px; max-width: none; }
.teardown__verdict strong { color: #fff; }

/* ---------- section rhythm ---------- */
.sec--hero-adjacent { padding-top: 12px; }
.sec--dark { background: var(--navy); color: var(--on-dark-2); padding: 72px 0; }
.sec--dark h2, .sec--dark h3 { color: #fff; }
.sec--dark p { color: var(--on-dark-2); }
.sec--dark a:not(.btn) { color: var(--volt); }
.sec--dark .kicker { color: var(--volt); }
.sec--dark .bigstat { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.sec--dark .bigstat__v, .sec--dark .bigstat__l { color: #fff; }
.sec--dark .bigstat__n { color: var(--on-dark-2); }

/* ---------- cards ---------- */
.card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card--link:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.card--num { display: grid; gap: 10px; }
.card--num .n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--volt); color: var(--volt-ink); font: 800 18px/1 var(--sans); }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.9,.3,1); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .bar__fill { transition: none; }
  .btn:hover, .card--link:hover { transform: none; }
  .usmap .tile rect { transition: none; }
}

/* ---------- 24-hour load shape ---------- */
.loadchart { margin: 26px 0; padding: 22px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow); }
.loadchart figcaption { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; margin-bottom: 12px; }
.loadchart figcaption strong { font-size: 17px; }
.loadchart figcaption span { font-size: 13px; color: var(--ink-3); }
.lc { width: 100%; height: auto; display: block; overflow: visible; }
.lc__grid { stroke: var(--rule-2); stroke-width: 1; }
.lc__base { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 4; opacity: .55; }
.lc__area { fill: color-mix(in srgb, var(--accent) 14%, transparent); }
.lc__line { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.lc__peak { fill: var(--warn); stroke: var(--panel); stroke-width: 2; }
.lc__hr { font: 500 10.5px var(--sans); fill: var(--ink-3); text-anchor: middle; }
.lc__ax { font: 500 9.5px var(--sans); fill: var(--ink-3); text-anchor: end; letter-spacing: .02em; }
.loadchart__note { font-size: 15px; color: var(--ink-2); margin: 14px 0 0; }
.loadchart__disclaimer { font-size: 13px; color: var(--ink-3); margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--rule-2); max-width: none; }

/* ---------- explanatory diagrams ---------- */
.diagram { margin: 30px 0; padding: 24px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow); }
.diagram figcaption { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; margin-bottom: 14px; }
.diagram figcaption strong { font-size: 17.5px; }
.diagram figcaption span { font-size: 13px; color: var(--ink-3); }
.diagram__note { font-size: 14px; color: var(--ink-3); margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--rule-2); max-width: none; }
.diagram__key { display: flex; gap: 18px; flex-wrap: wrap; list-style: none; padding: 0; margin: 12px 0 0; font-size: 13px; color: var(--ink-3); }
.diagram__key li { display: flex; align-items: center; gap: 7px; max-width: none; }
.k--drew { width: 12px; height: 12px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 55%, transparent); }
.k--gap { width: 12px; height: 12px; border-radius: 3px; background: color-mix(in srgb, var(--warn) 45%, transparent); border: 1px dashed var(--warn); }
.k--floor { width: 14px; height: 0; border-top: 2px dashed var(--warn); }

.rd, .lfd { width: 100%; height: auto; display: block; overflow: visible; }
.rd__drew { fill: color-mix(in srgb, var(--accent) 50%, transparent); }
.rd__drew--spike { fill: var(--accent); }
.rd__gap { fill: color-mix(in srgb, var(--warn) 28%, transparent); stroke: var(--warn); stroke-width: 1; stroke-dasharray: 3 3; }
.rd__floor { stroke: var(--warn); stroke-width: 2; stroke-dasharray: 6 4; }
.rd__floorlab { font: 700 11px var(--sans); fill: var(--warn); text-anchor: end; }
.rd__axis { stroke: var(--rule); stroke-width: 1; }
.rd__m { font: 500 11px var(--sans); fill: var(--ink-3); text-anchor: middle; }
.rd__ax { font: 500 10px var(--sans); fill: var(--ink-3); text-anchor: end; }

.lfd__t { font: 650 13px var(--sans); fill: var(--ink-2); }
.lfd__area { fill: color-mix(in srgb, var(--accent) 15%, transparent); }
.lfd__line { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; }
.lfd__peak { stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 5 4; }
.lfd__lf { font: 750 13px var(--sans); fill: var(--ink); }
.lfd__v { font: 500 11.5px var(--sans); fill: var(--ink-3); }

/* supply vs delivery */
.sdd { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; }
.sdd__leg { border: 1px solid var(--rule); border-radius: var(--r); padding: 18px; background: var(--paper); }
.sdd__leg--supply { border-color: var(--volt-2); background: color-mix(in srgb, var(--volt) 16%, var(--panel)); }
.sdd__h { margin: 8px 0 8px !important; font-size: 17.5px; font-weight: 720; color: var(--ink) !important; line-height: 1.25; }
.sdd__leg p { font-size: 14.5px; color: var(--ink-2); margin: 0 0 8px; }
.sdd__who { font-size: 13.5px !important; color: var(--ink-3) !important; margin: 10px 0 0 !important; padding-top: 10px; border-top: 1px solid var(--rule-2); }
.sdd__tag { display: inline-block; font: 750 11.5px/1 var(--sans); letter-spacing: .02em; padding: 5px 9px; border-radius: 999px; background: var(--volt); color: var(--volt-ink); }
.sdd__tag--locked { background: var(--navy-3); color: #fff; }
.sdd__arrow { display: grid; place-items: center; color: var(--ink-3); }
.sdd__arrow svg { width: 40px; height: 24px; }
@media (max-width: 720px) { .sdd { grid-template-columns: 1fr; } .sdd__arrow svg { transform: rotate(90deg); } }

/* ---------- delivery anatomy ---------- */
.da { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.da__row { display: grid; grid-template-columns: 200px 150px 1fr 130px; gap: 16px; align-items: center; padding: 15px 18px; background: var(--panel); }
.da__name strong { display: block; font-size: 15px; }
.da__name small { display: block; font-size: 12.5px; font-weight: 550; color: var(--ink-3); margin-top: 3px; }
.da__spark { width: 150px; height: 54px; }
.da__spark polyline { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.da__spark--fixed polyline { stroke: var(--ink-3); }
.da__spark--volumetric polyline { stroke: var(--accent); }
.da__spark--demand polyline { stroke: var(--warn); }
.da__spark--riders polyline { stroke: var(--ink-3); stroke-dasharray: 5 4; }
.da__detail { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.da__pill { display: inline-block; font: 700 12px/1 var(--sans); padding: 7px 11px; border-radius: 999px; white-space: nowrap; }
.da__pill--yes { background: var(--ok-bg); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 38%, transparent); }
.da__pill--none { background: var(--rule-2); color: var(--ink-3); border: 1px solid var(--rule); }
@media (max-width: 860px) {
  .da__row { grid-template-columns: 1fr auto; gap: 10px 14px; }
  .da__spark { grid-row: 1; grid-column: 2; }
  .da__detail, .da__lever { grid-column: 1 / -1; }
}

/* ---------- sibling territories ---------- */
.sibs { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); margin: 18px 0; }
.sib { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--rule); border-left-width: 5px; border-radius: var(--r); background: var(--panel); text-decoration: none; color: inherit; transition: transform .16s ease, box-shadow .16s ease; }
.sib:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.sib strong { font-size: 15.5px; }
.sib span { font-size: 13px; color: var(--ink-3); }
.sib em { font-style: normal; font-size: 13px; font-weight: 700; margin-top: 3px; }
.sib--yes { border-left-color: var(--volt-2); }
.sib--yes em { color: var(--ok); }
.sib--no { border-left-color: var(--navy-3); }
.sib--no em { color: var(--ink-3); }

/* ---------- load factor gauge ---------- */
.gauge { margin: 18px 0; }
.gauge__track { display: grid; grid-template-columns: repeat(5, 1fr); height: 48px; border-radius: 10px; overflow: hidden; border: 1px solid var(--rule); position: relative; }
.gauge__band { display: grid; place-items: center; border-right: 1px solid var(--rule); }
.gauge__band:last-child { border-right: 0; }
.gauge__band span { font: 700 11.5px/1 var(--sans); color: var(--ink-2); }
.gauge__band--0 { background: color-mix(in srgb, var(--warn) 24%, var(--panel)); }
.gauge__band--1 { background: color-mix(in srgb, var(--warn) 12%, var(--panel)); }
.gauge__band--2 { background: var(--panel); }
.gauge__band--3 { background: color-mix(in srgb, var(--volt) 30%, var(--panel)); }
.gauge__band--4 { background: color-mix(in srgb, var(--volt) 55%, var(--panel)); }
.gauge__pin { position: absolute; top: -6px; bottom: -6px; width: 3px; background: var(--ink); transform: translateX(-1.5px); border-radius: 2px; transition: left .35s cubic-bezier(.22,.9,.3,1); }
.gauge__pin span { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); font: 800 13px var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; background: var(--ink); color: var(--paper); padding: 4px 8px; border-radius: 6px; }
.gauge__scale { display: flex; justify-content: space-between; margin-top: 30px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .gauge__pin { transition: none; } }

/* =========================================================================
   HOMEPAGE
   ========================================================================= */

.hero--home { padding: 60px 0 76px; }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
@media (max-width: 1000px) { .hero__grid { grid-template-columns: 1fr; gap: 44px; } }
.hero--home .eyebrow { margin-top: 0; }
.hero--home h1 { font-size: clamp(40px, 6vw, 74px); line-height: 1.02; letter-spacing: -.042em; max-width: 12.5ch; margin: 22px 0 22px; font-weight: 780; }
.hero--home .standfirst { font-size: clamp(17.5px, 1.55vw, 20px); max-width: 54ch; }
.ticks { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.ticks li { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--on-dark-2); max-width: none; }
.ticks svg { color: var(--volt); flex-shrink: 0; }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.34); }
.btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,.07); }

.hero__visual { margin: 0; position: relative; }
.hero__visual::before {
  content: ""; position: absolute; inset: 6% -6% -8% 12%; z-index: -1;
  background: radial-gradient(closest-side, rgba(197,242,58,.30), transparent);
  filter: blur(34px);
}
.hero__visual figcaption { font-size: 12.5px; color: var(--on-dark-3); margin-top: 12px; text-align: right; }
@media (max-width: 1000px) { .hero__visual figcaption { text-align: left; } }

/* ---------- the example app card ---------- */
.mock {
  background: var(--panel); color: var(--ink); border-radius: 22px; overflow: hidden;
  box-shadow: 0 34px 90px -24px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08);
}
.mock__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--rule); background: color-mix(in srgb, var(--rule-2) 60%, var(--panel)); }
.mock__title { display: inline-flex; align-items: center; gap: 8px; font-weight: 750; font-size: 15px; }
.mock__title svg { color: var(--accent); }
.mock__tag { font: 700 11.5px/1 var(--sans); color: var(--ink-3); background: var(--panel); border: 1px solid var(--rule); border-radius: 999px; padding: 6px 10px; white-space: nowrap; }
.mock__body { padding: 20px 20px 22px; }
.mock__total { display: flex; justify-content: space-between; align-items: flex-end; gap: 6px 14px; flex-wrap: wrap; }
.mock__total span { display: block; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.mock__total strong { font: 800 42px/1.05 var(--display); letter-spacing: -.04em; }
.mock__total p { margin: 0 0 4px; font-size: 13px; color: var(--ink-3); font-weight: 550; }
.mock__split { display: flex; height: 16px; border-radius: 999px; overflow: hidden; margin: 16px 0 12px; gap: 3px; }
.mock__split i { display: block; min-width: 4px; }
.mock__split .s { background: var(--volt); }
.mock__split .l { background: var(--navy-3); }
.mock__split .t { background: #a9b4c2; }
.mock__split--sm { height: 12px; margin: 12px 0 10px; }
.mock__keys { display: flex; gap: 6px 20px; flex-wrap: wrap; }
.mock__keys p { margin: 0; font-size: 14px; color: var(--ink-2); display: flex; align-items: center; gap: 7px; }
.mock__keys b { color: var(--ink); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.dot--s { background: var(--volt); box-shadow: inset 0 0 0 1px rgba(10,27,51,.18); }
.dot--l { background: var(--navy-3); }
.mock__h { margin: 20px 0 10px; font: 700 12px/1 var(--sans); color: var(--ink-3); text-transform: uppercase; letter-spacing: .07em; }
.finds { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.find { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center; padding: 11px 12px; border: 1px solid var(--rule); border-radius: 13px; max-width: none; }
.find__ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; }
.find--warn .find__ic { background: var(--warn-bg); color: var(--warn); }
.find--info .find__ic { background: var(--accent-sub); color: var(--accent); }
.find--ok .find__ic { background: color-mix(in srgb, var(--volt) 40%, var(--panel)); color: var(--ink); }
.find__t b { display: block; font-size: 14.5px; line-height: 1.3; }
.find__t small { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.35; }
.find__v { font: 800 18px/1 var(--sans); color: var(--warn); white-space: nowrap; }
.find__v small { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.find__pill { font: 700 11.5px/1 var(--sans); padding: 6px 9px; border-radius: 999px; background: var(--accent-sub); color: var(--accent); white-space: nowrap; }
.find__pill--ok { background: color-mix(in srgb, var(--volt) 42%, var(--panel)); color: var(--ink); }
@media (max-width: 420px) { .find { grid-template-columns: 28px 1fr; } .find__v, .find__pill { grid-column: 2; justify-self: start; } }

/* ---------- facts strip ---------- */
.facts { background: var(--panel); border-bottom: 1px solid var(--rule); }
.facts__in { display: grid; grid-template-columns: repeat(4, 1fr); }
.facts__in p { margin: 0; padding: 22px 20px; display: flex; align-items: center; gap: 12px; border-right: 1px solid var(--rule); max-width: none; }
.facts__in p:first-child { padding-left: 0; }
.facts__in p:last-child { border-right: 0; }
.facts strong { font: 800 32px/1 var(--display); letter-spacing: -.035em; color: var(--ink); }
.facts span { font-size: 14px; color: var(--ink-2); line-height: 1.35; }
@media (max-width: 900px) {
  .facts__in { grid-template-columns: 1fr 1fr; }
  .facts__in p { padding: 18px 14px; }
  .facts__in p:nth-child(odd) { padding-left: 0; }
  .facts__in p:nth-child(2) { border-right: 0; }
  .facts__in p:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}

/* ---------- section rhythm on the homepage ---------- */
.hero--home ~ .sec { padding: 84px 0; }
@media (max-width: 700px) { .hero--home ~ .sec { padding: 60px 0; } }
.sechead { margin-bottom: 32px; }
.sechead .lede { margin: 0; max-width: 60ch; }
.sechead--center { text-align: center; }
.sechead--center h2 { margin-left: auto; margin-right: auto; }

/* ---------- what you can do ---------- */
.dogrid { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 820px) { .dogrid { grid-template-columns: 1fr; } }
.docard {
  display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--rule); border-radius: 22px;
  background: var(--panel); overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.docard:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 35%, var(--rule)); }
.docard__visual {
  padding: 28px 28px 0; border-bottom: 1px solid var(--rule); min-height: 196px; display: flex; align-items: flex-end;
  background:
    radial-gradient(420px 180px at 85% 0%, color-mix(in srgb, var(--volt) 22%, transparent), transparent 70%),
    linear-gradient(180deg, var(--paper), color-mix(in srgb, var(--rule-2) 70%, var(--paper)));
}
.docard__visual .mini { width: 100%; background: var(--panel); border: 1px solid var(--rule); border-bottom: 0; border-radius: 14px 14px 0 0; padding: 16px 16px 14px; box-shadow: var(--shadow); }
.docard__body { padding: 22px 26px 26px; display: flex; flex-direction: column; gap: 8px; }
.docard__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--navy); color: var(--volt); }
.docard h3 { margin: 8px 0 0; font-size: 22px; color: var(--ink); }
.docard p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.docard__status { align-self: flex-start; font: 700 12px/1 var(--sans); padding: 6px 10px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); margin-top: 2px; }
.docard__go { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-weight: 750; color: var(--accent); }
.docard__go svg { transition: transform .18s ease; }
.docard:hover .docard__go svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .docard:hover, .ind:hover { transform: none; } .docard:hover .docard__go svg { transform: none; } }

.mini__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-3); font-weight: 600; }
.mini__row b { font: 800 22px/1 var(--display); color: var(--ink); letter-spacing: -.02em; }
.mini__keys { display: flex; gap: 14px; font-size: 12.5px; color: var(--ink-2); font-weight: 650; }
.mini__keys span { display: inline-flex; align-items: center; gap: 6px; }
.mini__tag { font: 700 11px/1 var(--sans); padding: 5px 8px; border-radius: 999px; background: var(--rule-2); color: var(--ink-3); font-style: normal; }
.mini__input { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--accent); border-radius: 10px; padding: 8px 8px 8px 10px; font-weight: 700; letter-spacing: .04em; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.mini__input svg { color: var(--accent); }
.mini__input em { margin-left: auto; font-style: normal; font-size: 12.5px; letter-spacing: 0; background: var(--navy); color: #fff; padding: 6px 11px; border-radius: 7px; }
.mini__result { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--volt) 28%, var(--panel)); font-size: 14px; }
.mini__result--dim { background: var(--rule-2); }
.mini__yes { display: inline-flex; align-items: center; gap: 5px; font-weight: 750; color: var(--ink); font-size: 13px; }
.mini__no { font-size: 13px; font-weight: 700; color: var(--ink-3); }
.offer { display: grid; grid-template-columns: 62px 1fr 64px; gap: 10px; align-items: center; margin-top: 9px; font-size: 13px; font-weight: 650; color: var(--ink-2); }
.offer i { display: block; height: 12px; border-radius: 999px; background: color-mix(in srgb, var(--navy-3) 55%, var(--panel)); width: calc(var(--w) * 100%); }
.offer--best i { background: var(--volt-2); }
.offer b { font-size: 11.5px; color: var(--ok); }
.offer--stay i { background: transparent; border: 1.5px dashed var(--ink-3); height: 12px; }
.site { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid var(--rule-2); font-size: 13.5px; font-weight: 650; }
.mini__row + .site { margin-top: 8px; }
.site span { display: inline-flex; align-items: center; gap: 7px; }
.site svg { color: var(--ink-3); }
.chip-s { font: 700 11.5px/1 var(--sans); font-style: normal; padding: 5px 8px; border-radius: 999px; white-space: nowrap; }
.chip-s--warn { background: var(--warn-bg); color: var(--warn); }
.chip-s--info { background: var(--accent-sub); color: var(--accent); }
.chip-s--ok { background: var(--ok-bg); color: var(--ok); }

/* ---------- where the money goes ---------- */
.split2 { display: grid; grid-template-columns: .92fr 1.08fr; gap: 56px; align-items: start; }
@media (max-width: 1000px) { .split2 { grid-template-columns: 1fr; gap: 28px; } }
.split2 .teardown { margin: 0 0 12px; }
.split2 .teardown__stage { padding: 26px; }
.split2 .bar { grid-template-columns: 150px 1fr 82px; gap: 14px; }
@media (max-width: 680px) { .split2 .bar { grid-template-columns: 1fr auto; } }
.split2 .answer { margin: 0; }
.ways { list-style: none; padding: 0; margin: 24px 0 28px; display: grid; gap: 14px; }
.ways li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; font-size: 16px; color: var(--ink-2); max-width: 60ch; }
.ways svg { color: var(--ok); margin-top: 2px; }
.ways b { color: var(--ink); }

/* ---------- how it works ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; background: var(--panel); border: 1px solid var(--rule); border-radius: 20px; padding: 26px; box-shadow: var(--shadow-sm); max-width: none; }
.step__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.step__top svg { color: var(--accent); }
.step__n { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--volt); color: var(--volt-ink); font: 800 18px/1 var(--sans); }
.step h3 { margin: 0 0 8px; font-size: 20px; }
.step p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
@media (min-width: 861px) {
  .step:not(:last-child)::after { content: ""; position: absolute; top: 47px; right: -23px; width: 24px; height: 2px; background: repeating-linear-gradient(90deg, var(--ink-3) 0 4px, transparent 4px 8px); opacity: .5; }
}
.center-cta { display: flex; align-items: center; justify-content: center; gap: 18px 28px; flex-wrap: wrap; margin-top: 38px; }
.textlink { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; }
.textlink:hover { text-decoration: underline; }

/* ---------- can you choose ---------- */
.choice { display: grid; grid-template-columns: minmax(300px, .82fr) 1.18fr; gap: 52px; align-items: center; }
@media (max-width: 1000px) { .choice { grid-template-columns: 1fr; gap: 30px; } }
.zip { margin-top: 24px; background: var(--panel); border: 1px solid var(--rule); border-radius: 18px; padding: 20px; box-shadow: var(--shadow); }
.zip label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.zip__row { display: flex; gap: 8px; }
.zip__row input { flex: 1; min-width: 0; font: 650 20px var(--sans); letter-spacing: .05em; padding: 12px 14px; border: 1.5px solid var(--rule); border-radius: 12px; background: var(--panel); color: var(--ink); }
.zip__row input::placeholder { color: var(--ink-3); opacity: .75; letter-spacing: .02em; font-weight: 500; }
.zip__row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.zip__row .btn { border-radius: 12px; padding: 12px 22px; font-size: 16px; }
.zip .small { margin: 12px 0 0; }
.zip__msg { margin: 14px 0 0; font-weight: 650; color: var(--warn); }
.zres { margin-top: 16px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--rule); border-left: 5px solid var(--rule); }
.zres--yes { border-left-color: var(--volt-2); background: color-mix(in srgb, var(--volt) 14%, var(--panel)); }
.zres--maybe { border-left-color: var(--warn); background: var(--warn-bg); }
.zres--no { border-left-color: var(--navy-3); background: var(--rule-2); }
.zres p { margin: 0; max-width: none; }
.zres__state { font: 800 22px/1.2 var(--display); letter-spacing: -.02em; }
.zres__state span { font: 600 13px var(--sans); color: var(--ink-3); margin-left: 6px; letter-spacing: 0; }
.zres__head { font-weight: 750; margin-top: 4px !important; }
.zres__line, .zres__x { font-size: 14.5px; color: var(--ink-2); margin-top: 8px !important; }
.zres__go { display: inline-block; margin-top: 12px; font-weight: 750; }
.choice__map .mapwrap { margin: 0; }

/* ---------- industries ---------- */
.inds { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .inds { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .inds { grid-template-columns: 1fr; } }
.ind {
  display: grid; gap: 8px; align-content: start; padding: 22px; border: 1px solid var(--rule); border-radius: 18px;
  background: var(--panel); text-decoration: none; color: inherit; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ind:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 35%, var(--rule)); }
.ind__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: color-mix(in srgb, var(--volt) 45%, var(--panel)); color: var(--ink); }
.ind__t { font: 750 17px/1.25 var(--display); color: var(--ink); margin-top: 8px; }
.ind__d { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.more { margin: 24px 0 0; }

/* ---------- straight dealing ---------- */
.trust { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px; }
@media (max-width: 820px) { .trust { grid-template-columns: 1fr; } }
.trust__col { border-radius: 20px; padding: 26px 28px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
.trust__col h3 { margin: 0 0 16px; font-size: 21px; }
.trust__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.trust__col li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; color: var(--on-dark-2); font-size: 16px; max-width: none; }
.trust__col--do svg { color: var(--volt); }
.trust__col--dont svg { color: #ff9c8f; }
.paid { margin-top: 18px; padding: 24px 28px; border-radius: 20px; background: rgba(197,242,58,.07); border: 1px solid rgba(197,242,58,.26); }
.paid h3 { margin: 0 0 8px; font-size: 19px; }
.paid p { margin: 0; max-width: 92ch; }

/* ---------- FAQ ---------- */
.faqwrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 52px; align-items: start; }
@media (max-width: 900px) { .faqwrap { grid-template-columns: 1fr; gap: 22px; } }
.acc { display: grid; gap: 10px; }
.acc details { border: 1px solid var(--rule); border-radius: 16px; background: var(--panel); box-shadow: var(--shadow-sm); }
.acc summary { list-style: none; cursor: pointer; padding: 18px 56px 18px 22px; font: 700 17px/1.35 var(--display); position: relative; color: var(--ink); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px;
  border-right: 2.5px solid var(--ink-3); border-bottom: 2.5px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.acc details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.acc summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 16px; }
.acc__a { padding: 0 22px 20px; }
.acc__a p { margin: 0; color: var(--ink-2); }

/* ---------- final call ---------- */
.hero--home ~ .sec--final { padding: 24px 0 0; }
.final {
  text-align: center; border-radius: 28px; padding: 68px 28px; color: #fff; position: relative; overflow: hidden;
  background:
    radial-gradient(600px 260px at 50% -10%, rgba(197,242,58,.22), transparent 70%),
    radial-gradient(500px 260px at 100% 120%, rgba(47,107,255,.32), transparent 70%),
    var(--navy);
}
.final h2 { color: #fff; margin: 0 auto 12px; font-size: clamp(30px, 4.2vw, 48px); letter-spacing: -.035em; max-width: 20ch; }
.final p { color: var(--on-dark-2); margin: 0 auto; font-size: 18px; max-width: 52ch; }
.final .hero__cta { justify-content: center; }

/* ---------- containment: never let one wide child widen a grid track ---------- */
.hero__grid > *, .choice > *, .split2 > *, .faqwrap > *, .dogrid > *, .trust > *, .steps > *,
.inds > *, .foot__top > *, .ratecard__top > *, .facts__in > * { min-width: 0; }
.zip__row input { width: 100%; }
.zip__row input::placeholder { opacity: 1; }

/* =========================================================================
   RATES — the rate card, trend chart, split bars and map rate labels.
   Same encoding as everywhere: volt = energy (what suppliers compete on),
   navy = delivery (set by the utility), blue = the series being read.
   ========================================================================= */

.ratecard { background: var(--panel); border: 1px solid var(--rule); border-radius: 22px; box-shadow: var(--shadow-lg); padding: 28px; margin: 4px 0 8px; }
.ratecard__top { display: grid; grid-template-columns: minmax(220px, .8fr) 1.6fr; gap: 28px; align-items: center; margin-bottom: 8px; }
@media (max-width: 900px) { .ratecard__top { grid-template-columns: 1fr; gap: 18px; } .ratecard { padding: 20px; } }
.ratecard__main > * { margin: 0; max-width: none; }
.ratecard__label { font: 700 14px/1.35 var(--sans); color: var(--ink-2); }
.ratecard__big { display: flex; align-items: baseline; gap: 8px; margin-top: 8px !important; }
.ratecard__big strong { font: 800 clamp(56px, 8vw, 84px)/1 var(--display); letter-spacing: -.05em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ratecard__big span { font: 700 19px var(--sans); color: var(--ink-3); }
.ratecard__sub { margin-top: 8px !important; font-size: 14px; color: var(--ink-3); font-weight: 600; }
.ratecard__tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.rtile { display: grid; gap: 4px; align-content: start; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper); max-width: none; }
.rtile span { font: 650 12.5px/1.3 var(--sans); color: var(--ink-3); }
.rtile strong { font: 800 26px/1.1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rtile small { font-size: 12.5px; color: var(--ink-2); line-height: 1.35; }
.rtile--up strong { color: var(--warn); }
.rtile--down strong { color: var(--ok); }
.ratecard__split { margin-top: 22px; padding: 20px 22px; border-radius: 16px; background: var(--paper); border: 1px solid var(--rule); }
.ratecard__split h3 { margin: 0 0 8px; font-size: 18px; }
.ratecard__split p { max-width: 70ch; }
.mock__split--lg { height: 22px; margin: 14px 0 12px; }
.ratecard__split .mock__keys { margin: 0; max-width: none; }
.ratecard__split .mock__keys span { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink-2); }
.ratecard__def { margin: 18px 0 0; font-size: 13.5px; color: var(--ink-3); max-width: none; }

/* ---------- trend chart: solid = final annual, dashed + hollow = preliminary ---------- */
.rt { margin: 18px 0 0; }
.rt__svg { width: 100%; height: auto; display: block; overflow: visible; }
.rt__grid { stroke: var(--rule-2); stroke-width: 1; }
.rt__tick { font: 500 11.5px var(--sans); fill: var(--ink-3); }
.rt__state, .rt__us { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.rt__state { stroke: var(--accent); stroke-width: 3; }
.rt__us { stroke: var(--ink-3); stroke-width: 2; }
.rt__dash { stroke-dasharray: 5 5; }
.rt__dot--state { fill: var(--accent); stroke: var(--panel); stroke-width: 2; }
.rt__dot--us { fill: var(--ink-3); stroke: var(--panel); stroke-width: 2; }
.rt__hollow { fill: var(--panel); stroke-width: 2.5; }
.rt__hollow--state { stroke: var(--accent); }
.rt__hollow--us { stroke: var(--ink-3); }
.rt__lab { font: 750 13px var(--sans); }
.rt__lab--state { fill: var(--accent); }
.rt__lab--us { fill: var(--ink-2); }
.rt__cap { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.rt__cap span { display: inline-flex; align-items: center; gap: 8px; }
.rt__key { display: inline-block; width: 22px; height: 0; border-top: 3px solid; }
.rt__key--state { border-color: var(--accent); }
.rt__key--us { border-color: var(--ink-3); }
.rt__key--dash { border-top-style: dashed; border-color: var(--ink-3); }
.datatable { margin-top: 12px; }
.datatable summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--accent); }
.datatable summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
/* SVG text scales with the chart, so on a phone it is set larger in chart units. */
@media (max-width: 600px) { .rt__tick { font-size: 20px; } .rt__lab { font-size: 22px; } }

/* ---------- energy vs delivery split bars ---------- */
.sp { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sp__row { display: grid; grid-template-columns: 150px 1fr 190px; gap: 14px; align-items: center; max-width: none; }
.sp__name { font-weight: 700; font-size: 15px; }
.sp__bar { display: flex; height: 26px; border-radius: 8px; overflow: hidden; gap: 2px; }
.sp__e { background: var(--volt); display: block; }
.sp__d { background: var(--navy-3); display: grid; place-items: center; }
.sp__d b { font: 750 12px var(--sans); color: #fff; }
.sp__v { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.sp__v em { font-style: normal; color: var(--ink-3); }
.sp__key { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 14px 0 0; font-size: 13px; color: var(--ink-2); max-width: none; }
.sp__key span { display: inline-flex; align-items: center; gap: 7px; }
@media (max-width: 700px) { .sp__row { grid-template-columns: 1fr; gap: 4px; } .sp__v { white-space: normal; } }

/* ---------- map rate labels ---------- */
.tile__rate { font: 700 12px var(--sans); text-anchor: middle; fill: var(--ink-2); pointer-events: none; }
.tile--competitive .tile__rate { fill: var(--tile-shop-ink); }
.tile--limited .tile__rate { fill: var(--warn); }
.maplegend__note { margin: 12px 0 0; flex-basis: 100%; }
@media (max-width: 560px) { .tile__rate { font-size: 13px; } }

/* ---------- ranked table (hub) ---------- */
.pill { display: inline-block; font: 700 12px/1 var(--sans); padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.pill--competitive { background: color-mix(in srgb, var(--volt) 45%, var(--panel)); color: var(--ink); }
.pill--limited { background: var(--warn-bg); color: var(--warn); }
.pill--regulated { background: var(--rule-2); color: var(--ink-3); }
.ratetable th[data-type] { cursor: pointer; }
.rt-price { position: relative; min-width: 150px; }
.rt-bar { position: absolute; left: 0; top: 50%; height: 60%; width: calc(var(--w) * 100%); transform: translateY(-50%); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 0 6px 6px 0; }
.rt-price b { position: relative; }
.rt-chg--up { color: var(--warn); font-weight: 700; }
.rt-chg--down { color: var(--ok); font-weight: 700; }

/* sortable headings are real buttons so sorting works from the keyboard */
.sortbtn { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sortbtn::after { content: "\2195"; opacity: .4; font-size: 12px; }
th[aria-sort="descending"] .sortbtn::after { content: "\2193"; opacity: 1; }
th[aria-sort="ascending"] .sortbtn::after { content: "\2191"; opacity: 1; }
.tablewrap--sortable table { min-width: 720px; }

/* ---------- homepage: evidence card, key figures, ZIP result price ---------- */
.datacard { background: var(--panel); border: 1px solid var(--rule); border-radius: 20px; padding: 24px 26px; box-shadow: var(--shadow); }
.facts strong.up { color: var(--warn); }
.facts strong.down { color: var(--ok); }
.zres__rate { font-size: 15px; color: var(--ink); margin-top: 8px !important; }
.zres__rate b { font-variant-numeric: tabular-nums; }
/* price bars sit behind the right-aligned number, like a spreadsheet data bar */
.rt-bar { left: auto; right: 0; height: 64%; background: color-mix(in srgb, var(--accent) 16%, transparent); border-radius: 6px 0 0 6px; }

/* key figures on a phone: number above its caption instead of squeezed beside it */
@media (max-width: 900px) {
  .facts__in p { flex-direction: column; align-items: flex-start; gap: 6px; }
  .facts strong { font-size: 30px; }
}

/* ---------- rate checker output ---------- */
.rc__label { font: 700 14px/1.3 var(--sans); color: var(--ink-2); margin: 0; }
.rc__big { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 10px; max-width: none; }
.rc__big strong { font: 800 clamp(52px, 7vw, 76px)/1 var(--display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.rc__big span { font: 700 19px var(--sans); color: var(--ink-3); }
.rc__chip { display: inline-block; font: 750 14px/1.2 var(--sans); padding: 8px 14px; border-radius: 999px; margin: 0 0 20px; max-width: none; }
.rc__chip--above { background: var(--warn-bg); color: var(--warn); }
.rc__chip--below { background: var(--ok-bg); color: var(--ok); }
.rc__chip--close { background: var(--info-bg); color: var(--info); }
.rc__bars { display: grid; gap: 10px; margin: 0 0 18px; }
.rcbar { display: grid; grid-template-columns: 160px 1fr 84px; gap: 14px; align-items: center; max-width: none; }
.rcbar__l { font-size: 14.5px; font-weight: 650; }
.rcbar__t { display: block; height: 26px; background: var(--rule-2); border-radius: 8px; overflow: hidden; }
.rcbar__t i { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: 8px; transition: width .35s cubic-bezier(.22,.9,.3,1); }
.rcbar--you i { background: var(--accent); }
.rcbar--state i { background: var(--navy-3); }
.rcbar--us i { background: #a9b4c2; }
.rcbar b { text-align: right; font-variant-numeric: tabular-nums; }
.rc__gap { font-size: 16px; color: var(--ink); max-width: 70ch; margin: 0 0 10px; }
.rc--empty .rc__bars, .rc--empty .rc__gap { opacity: .35; }
@media (max-width: 640px) { .rcbar { grid-template-columns: 1fr auto; gap: 4px 10px; } .rcbar__t { grid-column: 1 / -1; grid-row: 2; } }
@media (prefers-reduced-motion: reduce) { .rcbar__t i { transition: none; } }

/* split bars inside prose: the article list styles must not indent or space them */
.prose .sp { padding-left: 0; }
.prose .sp li { margin: 0; }

/* ---------- biggest movers ---------- */
.mv { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mv__row { display: grid; grid-template-columns: 150px 1fr 190px; gap: 14px; align-items: center; max-width: none; }
.mv__name { font-weight: 700; font-size: 15px; }
.mv__bar { display: block; height: 18px; border-radius: 6px; background: var(--rule-2); overflow: hidden; }
.mv__bar i { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: 6px; }
.mv__row--up .mv__bar i { background: var(--warn); }
.mv__row--down .mv__bar i { background: var(--ok); }
.mv__v { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.mv__v b { font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.mv__v em { font-style: normal; color: var(--ink-3); }
.movers { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 8px; }
.movers h3 { margin: 0 0 12px; font-size: 17px; }
@media (max-width: 900px) { .movers { grid-template-columns: 1fr; } .mv__row { grid-template-columns: 1fr; gap: 4px; } .mv__v { white-space: normal; } }

/* =========================================================================
   BILL CHECK — the instant result panel and its form.
   Reuses the rate-checker bars (.rc__*, .rcbar) and the split bar (.mock__split)
   so the same two meanings carry through: volt = energy, navy = the utility.
   ========================================================================= */

.bcform .calc__out { padding: 26px; }
.bcmore { border-bottom: 1px solid var(--rule); background: color-mix(in srgb, var(--rule-2) 45%, var(--panel)); }
.bcmore > summary { cursor: pointer; padding: 14px 22px; font-weight: 700; font-size: 15px; list-style: none; display: flex; gap: 10px; align-items: center; }
.bcmore > summary::-webkit-details-marker { display: none; }
.bcmore > summary::before { content: ""; width: 8px; height: 8px; border-right: 2.5px solid var(--ink-3); border-bottom: 2.5px solid var(--ink-3); transform: rotate(-45deg); transition: transform .2s ease; flex-shrink: 0; }
.bcmore[open] > summary::before { transform: rotate(45deg); }
.bcmore > summary span { font-weight: 600; color: var(--ink-3); }
.bcmore > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.calc__in--more { border-top: 1px solid var(--rule); border-bottom: 0; background: transparent; }

.bc__based { font-size: 14px; color: var(--ink-3); margin: 0 0 18px; max-width: none; }
.bc__based b { color: var(--ink); }
.bc__notes { margin: 0 0 16px; padding: 10px 14px 10px 30px; background: var(--warn-bg); color: var(--warn); border-radius: 10px; font-size: 14px; max-width: none; }
.bc h3 { margin: 32px 0 12px; font-size: 19px; }
.bc__rate h3 { margin-top: 0; }
.bc__hint { font-size: 15px; color: var(--ink-2); max-width: 70ch; margin: 0; }
.bc__empty { margin: 0; color: var(--ink-2); font-size: 16px; }
.bc__fine { margin: 10px 0 0; max-width: none; }
.bc .mock__split--lg { margin: 6px 0 12px; }
.bc .mock__keys { max-width: none; margin: 0; }
.bc .mock__keys span { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink-2); }

/* findings */
.bcf__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.bcf { border: 1px solid var(--rule); border-left-width: 5px; border-radius: 14px; padding: 16px 18px; background: var(--panel); max-width: none; }
.bcf--high { border-left-color: var(--warn); }
.bcf--medium { border-left-color: var(--accent); }
.bcf--info { border-left-color: var(--navy-3); }
.bcf p { margin: 0 0 8px; max-width: 72ch; font-size: 15px; color: var(--ink-2); }
.bcf__top { display: flex; justify-content: space-between; gap: 8px 12px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 8px; }
.bcf .bcf__t { font: 750 17px/1.3 var(--display); color: var(--ink); margin: 0; }
.bcf__conf { font: 700 12px/1 var(--sans); padding: 6px 10px; border-radius: 999px; background: var(--rule-2); color: var(--ink-2); white-space: nowrap; }
.bcf .bcf__found { color: var(--ink); font-weight: 550; }
.bcf .bcf__value { background: var(--accent-sub); border-radius: 10px; padding: 10px 12px; color: var(--ink); }
.bcf__value span { color: var(--ink-2); display: block; font-size: 13.5px; margin-top: 4px; }
.bcf .bcf__valuenote { font-size: 13.5px; color: var(--ink-3); }
.bcf .bcf__do { margin-bottom: 0; }
.bcf__do b { color: var(--ink); }
.bc__total { margin: 14px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--navy); color: var(--on-dark-2); font-size: 15.5px; max-width: none; }
.bc__total b { color: #fff; }

/* next steps */
.bcn { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.bcn__step { display: grid; gap: 8px; max-width: none; }
.bcn__step p { margin: 0; color: var(--ink-2); font-size: 15px; max-width: 70ch; }
.bcn__step .btn { justify-self: start; }
.bcn__note { padding: 12px 14px; border-radius: 12px; background: var(--warn-bg); color: var(--warn); font-size: 14.5px; max-width: none; }
.bc__actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 28px 0 8px; padding-top: 18px; border-top: 1px solid var(--rule); }

@media print {
  .hero, .sec:not(#check), .bcform .calc__in, .bcmore, .bc__actions, .stamp { display: none !important; }
  #check .calc { box-shadow: none; border: 0; }
  #check .answer, #check .lede { display: none; }
  .bcf, .bc__rate { break-inside: avoid; }
  .bc__total { background: #fff; color: #000; border: 1px solid #000; }
  .bc__total b { color: #000; }
}

/* =========================================================================
   COST ESTIMATOR — the range bar, the figure tiles and the state ladder.
   Same colour meaning as the rest of the site: navy is data from the official
   survey, the accent is the visitor's own number, and nothing here is volt,
   because nothing here is a price anyone can shop.
   ========================================================================= */

.estform .calc__out { padding: 26px; }
.estform .calc__in { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.est__hero { margin: 0 0 6px; }
.est__big strong { font-size: clamp(48px, 6.4vw, 72px); }
.est__sub { font-size: 16px; color: var(--ink-2); max-width: 72ch; margin: 0 0 8px; }
.est__sub b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* range bar */
.eb { margin: 6px 0 26px; padding-top: 22px; max-width: none; }
.eb__track { position: relative; height: 34px; background: var(--rule-2); border-radius: 10px; }
.eb__wide, .eb__mid { position: absolute; top: 0; bottom: 0; border-radius: 10px; }
.eb__wide { background: color-mix(in srgb, var(--navy-3) 42%, var(--panel)); }
.eb__mid { background: var(--navy-3); }
.eb__med { position: absolute; top: -5px; bottom: -5px; width: 4px; margin-left: -2px; background: var(--ink); border-radius: 2px; }
.eb__you { position: absolute; top: -8px; bottom: -8px; width: 6px; margin-left: -3px; background: var(--accent); border-radius: 3px; box-shadow: 0 0 0 2px var(--panel); font-style: normal; }
.eb__you span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 3px; font: 800 12px/1 var(--sans); color: var(--ink); }
.eb__scale { position: relative; height: 22px; margin-top: 10px; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.eb__scale span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.eb__scale .eb__medl { color: var(--ink); font-weight: 800; }
.eb__key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; font-size: 13.5px; color: var(--ink-2); max-width: none; }
.eb__key span { display: inline-flex; align-items: center; gap: 7px; }
.eb__unit { margin-left: auto; color: var(--ink-3); }
.dot--mid { background: var(--navy-3); }
.dot--wide { background: color-mix(in srgb, var(--navy-3) 42%, var(--panel)); }
.dot--med { background: var(--ink); width: 4px; height: 12px; border-radius: 2px; }

/* the three figures */
.est__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0 0 14px; }
.est__tile { border: 1px solid var(--rule); border-radius: 14px; padding: 14px 16px; background: var(--panel); max-width: none; }
.est__tile p { margin: 0 0 4px; font-size: 13.5px; color: var(--ink-3); font-weight: 650; max-width: none; }
.est__tile b { display: block; font: 800 19px/1.3 var(--display); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.est__tile small { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-3); }
.est__price { font-size: 14.5px; color: var(--ink-2); max-width: 78ch; margin: 0; }
.est__price b { color: var(--ink); }
.est__you { font-size: 16px; color: var(--ink); max-width: 72ch; margin: 0 0 8px; }

/* the same building in every state */
.est__cmp { max-width: none; }
.est__ends { display: grid; gap: 4px; margin: 14px 0 0; font-size: 15.5px; color: var(--ink-2); max-width: none; }
.est__ends b { color: var(--ink); font-variant-numeric: tabular-nums; }
.est__rank { font-size: 15.5px; margin: 10px 0 0; max-width: none; }
.est__all { margin-top: 14px; border: 1px solid var(--rule); border-radius: 12px; background: var(--panel); }
.est__all > summary { cursor: pointer; padding: 12px 16px; font-weight: 700; font-size: 15px; }
.est__all > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 12px; }
.el { list-style: none; margin: 0; padding: 4px 16px 14px; display: grid; gap: 6px; }
.el__row { display: grid; grid-template-columns: 28px minmax(110px, 170px) 1fr 96px; gap: 10px; align-items: center; max-width: none; font-size: 14px; }
.el__row--home { background: var(--accent-sub); border-radius: 8px; margin: 0 -8px; padding: 3px 8px; }
.el__n { color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: right; }
.el__name { color: var(--ink); font-weight: 650; text-decoration: none; }
.el__name:hover { text-decoration: underline; }
.el__bar { display: block; height: 14px; background: var(--rule-2); border-radius: 6px; overflow: hidden; }
.el__bar i { display: block; height: 100%; width: calc(var(--w) * 100%); background: var(--navy-3); border-radius: 6px; }
.el__row--home .el__bar i { background: var(--accent); }
.el b { text-align: right; font-variant-numeric: tabular-nums; }

.bc__notes--plain { background: var(--rule-2); color: var(--ink-2); }
.bc__notes--plain li + li { margin-top: 6px; }
.bc__empty--note { padding: 14px 16px; background: var(--info-bg); color: var(--info); border-radius: 12px; }

/* the homepage's quick estimate */
.qe { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.qe__copy .lede { max-width: 52ch; }
.qe__card { border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow); padding: 22px; display: grid; gap: 18px; min-width: 0; }
.qe__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qe__fields .field { min-width: 0; }
.qe__fields .field:first-child { grid-column: 1 / -1; }
.qe__label { font-size: 14px; color: var(--ink-3); margin: 0 0 6px; max-width: none; }
.qe__label b { color: var(--ink); }
.qe__big { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; max-width: none; }
.qe__big strong { font: 800 clamp(44px, 6vw, 64px)/1 var(--display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.qe__big span { font: 700 18px var(--sans); color: var(--ink-3); }
.qe__sub { font-size: 15.5px; color: var(--ink-2); margin: 0; max-width: 60ch; }
.qe__sub b { color: var(--ink); }
.qe__empty { margin: 0; color: var(--ink-2); font-size: 16px; }
.qe__card .btn { justify-self: start; }
@media (max-width: 900px) { .qe { grid-template-columns: 1fr; } }

/* the table of every building type */
.bt { width: 100%; }
.bt td:nth-child(n+2), .bt th:nth-child(n+2) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bt__rel { font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--rule-2); color: var(--ink-2); }
.bt__rel--good { background: var(--ok-bg); color: var(--ok); }
.bt__rel--fair, .bt__rel--indicative { background: var(--warn-bg); color: var(--warn); }

@media (max-width: 560px) {
  .eb__x { display: none; }
  .eb__unit { margin-left: 0; width: 100%; }
  .el__row { grid-template-columns: 24px 1fr 78px; }
  .el__bar { display: none; }
}

@media print {
  .estform .calc__in { display: none !important; }
  #estimate .calc { box-shadow: none; border: 0; }
  #estimate .answer, #estimate .lede { display: none; }
  .est__all:not([open]) .el { display: none; }
}

/* =========================================================================
   SITE SEARCH — the menu button and the dialog it opens.
   ========================================================================= */

.nav__search { margin-left: 2px; }
.searchbtn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 40px; height: 40px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--ink-2); cursor: pointer; font: inherit; }
.searchbtn:hover { background: var(--rule-2); color: var(--ink); }
.searchbtn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.searchbtn .ic { width: 20px; height: 20px; }
.searchbtn__l { display: none; }
@media (max-width: 960px) {
  .js-nav .nav__search { margin: 0; }
  .js-nav .searchbtn { width: 100%; height: auto; justify-content: flex-start; padding: 12px 10px; border-radius: 8px; font-size: 17px; font-weight: 550; }
  .js-nav .searchbtn__l { display: inline; }
}

.sr { border: 0; padding: 0; background: transparent; width: min(660px, calc(100vw - 24px)); max-height: 84vh; margin: 8vh auto auto; color: var(--ink); overflow: visible; }
.sr::backdrop { background: rgba(5, 12, 24, .62); backdrop-filter: blur(3px); }
.sr__box { background: var(--panel); border: 1px solid var(--rule); border-radius: 16px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55); overflow: hidden; }
.sr__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.sr__bar input { flex: 1; min-width: 0; font: 600 18px var(--sans); padding: 10px 4px; border: 0; background: transparent; color: var(--ink); outline: none; box-shadow: none; }
.sr__bar input::placeholder { color: var(--ink-3); font-weight: 500; }
.sr__x { font: 700 12px var(--sans); padding: 6px 9px; border: 1px solid var(--rule); border-radius: 8px; background: transparent; color: var(--ink-3); cursor: pointer; }
.sr__x:hover { color: var(--ink); border-color: var(--ink-3); }
.sr ul { list-style: none; margin: 0; padding: 6px; max-height: min(58vh, 480px); overflow: auto; }
.sr li { max-width: none; }
.sr li a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.sr li[aria-selected="true"] a { background: var(--accent-sub); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.sr__t { font-weight: 700; font-size: 15.5px; display: flex; gap: 10px; align-items: baseline; }
.sr__t em { font: 700 11px var(--sans); font-style: normal; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); }
.sr__d { font-size: 13.5px; color: var(--ink-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr__none { padding: 18px 14px; color: var(--ink-2); font-size: 15px; }

@media print { .nav__search, .sr { display: none !important; } }

/* HAUSE Energy: forest, warm paper and purposeful lime, retaining tariff status colours. */
:root{--navy:#173c32;--navy-2:#204a3e;--navy-3:#42675a;--volt:#d3f36b;--volt-2:#c4e65d;--volt-ink:#173c32;--on-dark-2:#d0ded5;--on-dark-3:#b6cbbd;--paper:#f6f6ee;--rule:#dfe5d8;--rule-2:#e9ede3;--accent:#225f47;--accent-sub:#edf4df;--ink:#16372d;--ink-2:#405b4d;--ink-3:#536357;--r-lg:26px}
.hbar{background:#e9eedc;color:#173c32}.hbar a{color:inherit}.hbar__brand b{letter-spacing:.15em}.brand__by b{font-size:1.03rem;letter-spacing:.22em}.hero--home{background:radial-gradient(ellipse at 90% 0%,#315d48 0,transparent 50%),var(--navy)}.hero--home .hero__accent{color:var(--volt)}.hero{border-radius:0 0 28px 28px}.canada-related{display:flex;gap:1.25rem;flex-wrap:wrap;margin:2rem 0}.canada-intro{display:grid;grid-template-columns:1.6fr 1fr;gap:3rem;align-items:start}.canada-callout{background:var(--navy);color:white;border-radius:24px;padding:2rem}.canada-callout h3,.canada-callout a{color:var(--volt)}.canada-callout p{color:var(--on-dark-2)}.canada-tiles{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin:2rem 0 3rem}.canada-tiles a{display:flex;flex-direction:column;gap:10px;min-height:100px;padding:18px 10px;background:var(--panel);border:1px solid var(--rule);border-radius:14px;color:var(--ink);text-decoration:none;text-align:center;justify-content:center}.canada-tiles a:hover,.canada-tiles a:focus-visible{background:var(--volt);color:var(--volt-ink)}.canada-tiles b{font-size:1.65rem}.canada-tiles span{font-size:.78rem}.canada-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.canada-card{display:flex;flex-direction:column;gap:15px;padding:26px;border:1px solid var(--rule);border-radius:20px;color:var(--ink);background:var(--panel);text-decoration:none}.canada-card h3{font-size:1.35rem;margin:0}.canada-card p{margin:0;color:var(--ink-2)}.canada-card b{margin-top:auto;color:var(--accent);font-size:.85rem}.canada-card:hover{border-color:var(--accent);box-shadow:var(--shadow-sm)}.canada-faq{border-bottom:1px solid var(--rule);padding:1.25rem 0}.canada-faq summary{cursor:pointer;font-weight:700}.canada-workbench{display:grid;grid-template-columns:1.5fr 1fr;gap:36px;align-items:start;margin:2rem 0 4rem}.canada-workbench form,.canada-output{padding:28px;border:1px solid var(--rule);border-radius:22px;background:var(--panel)}.canada-workbench select{display:block;width:100%;margin:8px 0 24px;min-height:48px}.canada-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}.canada-fields input{width:100%;min-height:46px}.canada-output{position:sticky;top:100px;border-top:5px solid var(--volt)}.canada-output h2{font-size:clamp(2rem,4vw,3.4rem);overflow-wrap:anywhere}.canada-output dl>div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--rule)}.canada-output dd{font-weight:700;margin:0}.canada-output button{margin:10px 8px 0 0}.country-entry{padding:22px 0;background:var(--accent-sub);border-bottom:1px solid var(--rule)}.country-entry .wrap{display:flex;gap:18px;justify-content:space-between;align-items:center;flex-wrap:wrap}.country-entry a{font-weight:750}.canada-workbench label{font-weight:650}.canada-workbench input:focus-visible,.canada-workbench select:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.hbar__tag,.hbar__geo{color:inherit}.hbar a:hover,.hbar a:focus-visible{color:#225f47;text-decoration:underline}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#10251e;--panel:#173228;--ink:#edf4e9;--ink-2:#cfddd0;--ink-3:#aec2b1;--rule:#385346;--rule-2:#294337;--accent:#cce782;--accent-sub:#233d2b;--navy:#112c23;--navy-2:#173d30;--navy-3:#6f977e}:root:not([data-theme="light"]) .hbar{background:#203c2d;color:#edf4e9}:root:not([data-theme="light"]) .hbar a:hover{color:#d3f36b}}
[data-theme="dark"]{--paper:#10251e;--panel:#173228;--ink:#edf4e9;--ink-2:#cfddd0;--ink-3:#aec2b1;--rule:#385346;--accent:#cce782;--accent-sub:#233d2b}
[data-theme="dark"] .hbar{background:#203c2d;color:#edf4e9}[data-theme="dark"] .hbar a:hover{color:#d3f36b}
.canada-facts{margin:1.5rem 0 2.5rem;border:1px solid var(--rule);border-radius:18px;overflow:hidden;background:var(--panel)}.canada-facts>div{display:grid;grid-template-columns:minmax(150px,.7fr) 2fr;gap:6px 24px;padding:18px 22px;border-bottom:1px solid var(--rule)}.canada-facts>div:last-child{border-bottom:0}.canada-facts dt{font-weight:700;color:var(--ink)}.canada-facts dd{margin:0;color:var(--ink-2)}.canada-facts .src{display:block;margin-top:.45rem;font-size:.82rem;color:var(--ink-3)}.canada-facts .src a{color:var(--accent)}.canada-facts .until{display:inline-block;margin-left:.6rem;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}.canada-facts .is-expired dd{color:var(--ink-3)}
@media(max-width:700px){.canada-facts>div{grid-template-columns:1fr}}
@media(max-width:900px){.canada-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.canada-tiles{grid-template-columns:repeat(4,1fr)}.canada-intro,.canada-workbench{grid-template-columns:1fr}.canada-output{position:static}}
@media(max-width:540px){.canada-grid{grid-template-columns:1fr}.canada-fields{grid-template-columns:1fr}.canada-tiles{grid-template-columns:repeat(3,1fr)}.canada-workbench form,.canada-output{padding:20px}.brand__by b{font-size:.8rem}.canada-tiles a{padding:12px 6px}}
@media print{.hbar,.masthead,.foot,.country-entry,#ca-download,#ca-print{display:none!important}.canada-workbench{display:block}.canada-output{position:static;break-inside:avoid}.canada-fields{grid-template-columns:1fr 1fr}.hero{padding:25px 0}.canada-callout{background:white;color:#173c32}}
.qc-offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:16px;margin:18px 0}.qc-offer{margin:0;padding:14px 16px}.qc-offer legend{font-weight:750;padding:0 6px}.qc-flags{margin:12px 0;padding-left:20px}.qc-flags li{margin:6px 0}.inline-list{columns:2 240px;column-gap:28px;list-style:none;padding:0;margin:12px 0}.inline-list li{break-inside:avoid;margin:5px 0}.az ul{display:flex;flex-wrap:wrap;gap:6px 8px;list-style:none;padding:0;margin:16px 0}.az a{display:inline-block;min-width:2.4em;padding:5px 9px;text-align:center;border:1px solid var(--rule);border-radius:6px;text-decoration:none;font-weight:650}.nw{white-space:nowrap}.pricetable th[scope="row"]{min-width:12em}.pricetable th,.pricetable td{padding-left:10px;padding-right:10px}.glossary dt{scroll-margin-top:90px}.glossary dt a{color:inherit;text-decoration:none}.glossary dt a:hover{text-decoration:underline}.glossary + h2,.az + h2{margin-top:30px}