:root{
  --paper:#EDF1F4; --sheet:#FFFFFF; --ink:#13294B; --muted:#5A6B82; --line:#C9D3DD;
  --volt:#FFC531; --volt-ink:#13294B; --save:#1C7A4F; --warn:#B4441C; --tint:#E3EAF1;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0F1A2B; --sheet:#16253B; --ink:#E6EDF5; --muted:#9AAAC0; --line:#2C3F5A;
    --volt:#FFC531; --volt-ink:#13294B; --save:#4CC88A; --warn:#FF8A5C; --tint:#1D2F49;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0F1A2B; --sheet:#16253B; --ink:#E6EDF5; --muted:#9AAAC0; --line:#2C3F5A;
  --volt:#FFC531; --volt-ink:#13294B; --save:#4CC88A; --warn:#FF8A5C; --tint:#1D2F49;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 Barlow,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.wrap{max-width:680px;margin:0 auto;padding:0 18px}
header.top{padding:22px 0 8px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.brand{font:700 22px/1 "Barlow Condensed",Barlow,"Arial Narrow",sans-serif;letter-spacing:.3px;display:flex;align-items:center;gap:8px;text-decoration:none}
.bolt{width:26px;height:26px;border-radius:50%;background:var(--volt);display:inline-grid;place-items:center;color:var(--volt-ink);font-size:15px}
header.top nav{font-size:15px;color:var(--muted)}
header.top nav a{margin-left:14px}
header.top nav a:first-child{margin-left:0}
h1{font:700 clamp(38px,9vw,58px)/1.02 "Barlow Condensed",Barlow,"Arial Narrow",sans-serif;margin:28px 0 12px;letter-spacing:-.3px}
.lede{font-size:19px;color:var(--muted);margin:0 0 26px;max-width:34em}
h2{font:700 30px/1.1 "Barlow Condensed",Barlow,"Arial Narrow",sans-serif;margin:0 0 6px}
h3{font-size:18px;margin:26px 0 6px}
p{margin:0 0 14px}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}

/* The bill: the one memorable element */
.bill{background:var(--sheet);border:1px solid var(--line);border-top:8px solid var(--volt);border-radius:4px;padding:22px 20px 24px;position:relative}
.bill::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:9px;
  background:radial-gradient(circle at 6px 0,transparent 5px,var(--sheet) 5.5px) 0 0/12px 9px repeat-x}
.billhead{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px dashed var(--line);padding-bottom:10px;margin-bottom:16px}
.billhead span{color:var(--muted);font-size:14px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){.row{grid-template-columns:1fr}}
label{display:block;font-weight:600;font-size:15px;margin:0 0 5px}
.hint{display:block;font-weight:400;color:var(--muted);font-size:13.5px;margin-top:2px}
.field{margin-bottom:16px}
input[type=number],select{width:100%;font:500 18px Barlow,Arial,sans-serif;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:6px;padding:11px 12px;min-height:48px}
.money{position:relative}
.money input{padding-left:28px}
.money::before{content:"$";position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:600}
input:focus-visible,select:focus-visible,button:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid var(--volt);outline-offset:2px}
details.more{border-top:1px solid var(--line);margin-top:6px;padding-top:12px}
details.more summary{cursor:pointer;font-weight:600;padding:6px 0}
.checks label{display:flex;gap:10px;align-items:center;font-weight:500;margin:8px 0}
.checks input{width:20px;height:20px;accent-color:var(--save)}
button.go{width:100%;margin-top:10px;background:var(--volt);color:var(--volt-ink);border:0;border-radius:6px;font:700 21px "Barlow Condensed",Barlow,sans-serif;padding:14px;cursor:pointer;min-height:52px}
button.go:hover{filter:brightness(.96)}
.err{color:var(--warn);font-weight:600;min-height:1.4em;margin:10px 0 0}

/* Results */
#results{display:none;margin-top:44px}
#results.show{display:block}
section.block{padding:28px 0;border-top:1px solid var(--line)}
section.block:first-child{border-top:0;padding-top:0}
.verdict{font:700 26px/1.15 "Barlow Condensed",Barlow,sans-serif;margin:4px 0 10px}
.good{color:var(--save)} .bad{color:var(--warn)}
.scale{position:relative;height:14px;background:var(--tint);border-radius:7px;margin:18px 0 32px}
.scale .avg{position:absolute;top:-6px;width:2px;height:26px;background:var(--muted)}
.scale .avg span{position:absolute;top:28px;left:50%;transform:translateX(-50%);font-size:12.5px;color:var(--muted);white-space:nowrap}
.scale .you{position:absolute;top:-5px;width:24px;height:24px;margin-left:-12px;border-radius:50%;background:var(--volt);border:3px solid var(--ink)}
.stack{display:flex;height:30px;border-radius:5px;overflow:hidden;margin:14px 0 12px}
.stack div{height:100%}
.legend{list-style:none;padding:0;margin:0}
.legend li{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:16px}
.legend i{width:12px;height:12px;border-radius:3px;flex:none}
.legend b{margin-left:auto;font-variant-numeric:tabular-nums}
.total{background:var(--ink);color:var(--paper);border-radius:6px;padding:18px 20px;margin:16px 0 18px}
.total strong{display:block;font:700 46px/1 "Barlow Condensed",Barlow,sans-serif;color:var(--volt)}
.tips{list-style:none;padding:0;margin:0}
.tip{display:grid;grid-template-columns:24px 1fr auto;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);align-items:start}
.tip input{width:20px;height:20px;margin-top:3px;accent-color:var(--save)}
.tip .t{font-weight:600}
.tip .d{color:var(--muted);font-size:15px;margin-top:3px}
.tip .amt{font:700 20px "Barlow Condensed",Barlow,sans-serif;color:var(--save);text-align:right;white-space:nowrap}
.tip .amt small{display:block;font:500 12.5px Barlow,sans-serif;color:var(--muted)}
.help li{margin-bottom:10px}
.note{font-size:14px;color:var(--muted)}
.ad-slot{margin:30px 0;min-height:100px;border:1px dashed var(--line);border-radius:4px;display:grid;place-items:center;color:var(--muted);font-size:12px}
article.guide{margin-top:20px;padding-top:28px;border-top:1px solid var(--line)}
footer{margin:40px 0 0;padding:22px 0 40px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
footer a{margin-right:14px}
@media (prefers-reduced-motion:no-preference){
  #results.show{animation:print .5s ease-out}
  @keyframes print{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
}

/* State pages: key numbers, printed like the summary box of a bill */
.crumbs{font-size:14px;color:var(--muted);margin:14px 0 -14px}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden;margin:0 0 30px}
.facts div{background:var(--sheet);padding:14px 16px}
.facts dt{font-size:13.5px;color:var(--muted);margin:0}
.facts dd{margin:2px 0 0;font:700 30px/1.05 "Barlow Condensed",Barlow,sans-serif;font-variant-numeric:tabular-nums}
.facts dd small{display:block;font:500 13.5px/1.35 Barlow,sans-serif;color:var(--muted);margin-top:3px}
table.cmp{width:100%;border-collapse:collapse;font-size:16px;margin:8px 0 6px;font-variant-numeric:tabular-nums}
table.cmp th,table.cmp td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line)}
table.cmp th{font-size:13.5px;color:var(--muted);font-weight:600}
table.cmp td:not(:first-child),table.cmp th:not(:first-child){text-align:right}
table.cmp tr.me td{font-weight:700;background:var(--tint)}
ul.states{list-style:none;padding:0;margin:10px 0 0;columns:3 9em;column-gap:18px;font-size:15.5px}
ul.states li{padding:3px 0;break-inside:avoid}

/* Offers (plan comparison, solar quotes, tools) */
.offer{background:var(--sheet);border:1px solid var(--line);border-left:6px solid var(--save);border-radius:4px;padding:18px 18px 16px;margin:26px 0}
.offer h3{margin-top:0}
.offer .tag{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
a.cta{display:inline-block;background:var(--volt);color:var(--volt-ink);border-radius:6px;font:700 19px "Barlow Condensed",Barlow,sans-serif;padding:11px 18px;text-decoration:none;margin-top:4px}
a.cta:hover{filter:brightness(.96)}
.shop{font-size:14px;font-weight:600;white-space:nowrap}
ul.products{list-style:none;padding:0;margin:10px 0 0}
ul.products li{padding:9px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;align-items:baseline}
ul.products li span{color:var(--muted);font-size:15px}
@media (max-width:520px){ul.products li{flex-direction:column;gap:2px}}

/* Tools and guides grid */
.tools{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 0}
@media (max-width:520px){.tools{grid-template-columns:1fr}}
.tools a{display:block;background:var(--sheet);border:1px solid var(--line);border-top:4px solid var(--volt);border-radius:4px;padding:14px 16px;text-decoration:none}
.tools a b{display:block;font:700 21px/1.1 "Barlow Condensed",Barlow,sans-serif;margin-bottom:4px}
.tools a span{color:var(--muted);font-size:15px}
.tools a:hover b{text-decoration:underline}

/* Sortable tables */
.tablewrap{overflow-x:auto;margin:8px 0 6px}
table.cmp th button{all:unset;cursor:pointer;font:inherit;color:inherit}
table.cmp th button::after{content:" ↕";opacity:.5}
table.cmp th button:focus-visible{outline:3px solid var(--volt);outline-offset:2px}
table.cmp td.up{color:var(--warn)} table.cmp td.down{color:var(--save)}
.cite{background:var(--tint);border-radius:4px;padding:12px 14px;font-size:15px;word-break:break-word}

/* Appliance calculator */
.result-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden;margin:20px 0 6px}
@media (max-width:520px){.result-row{grid-template-columns:1fr 1fr}}
.result-row div{background:var(--sheet);padding:12px 14px}
.result-row span{display:block;font-size:13.5px;color:var(--muted)}
.result-row strong{font:700 28px/1.1 "Barlow Condensed",Barlow,sans-serif;font-variant-numeric:tabular-nums}
input[type=text]{width:100%;font:500 18px Barlow,Arial,sans-serif;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:6px;padding:11px 12px;min-height:48px}

footer .links a{display:inline-block;margin:0 14px 6px 0}

/* Plain text pages (about, contact, privacy) */
.page h2{margin-top:30px}
.page ul{padding-left:22px}
.page li{margin-bottom:8px}
.page .updated{color:var(--muted);font-size:15px}