/* Texas Commercial Plans, design system "The band".
   Tokens, type and rules: redesign/DESIGN.md. One stylesheet, no CDN, no framework.
   Color never grades a rate: there is no green for cheap and no red for expensive.
   Flag red has exactly one job, the median notch and the median figure above it. */

@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/overpass-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/overpass-latin-800-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/public-sans-latin-wght-normal.woff2") format("woff2-variations"),
       url("/assets/fonts/public-sans-latin-wght-normal.woff2") format("woff2");
}

:root {
  --label: #FFFFFF;
  --ink: #13171D;
  --steel: #56606B;
  --survey: #EAF0F4;
  --rule: #C9D2DA;
  --flag-red: #BF0D3E;
  --action: #0035A8;      /* buy buttons only: the logo's Old Glory Blue, lifted to read as blue on screen */
  --action-deep: #002868; /* buy-button hover: the logo's exact Old Glory Blue */

  --font-display: "Overpass", "Public Sans", system-ui, sans-serif;
  --font-text: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --page-max: 1120px;
  --gutter: clamp(20px, 5vw, 56px);
  --measure: 68ch;
  --radius-control: 4px;
  --radius-panel: 6px;
  --radius-band: 2px;
  --band-scale-max: 30; /* cents per kWh */

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;

  --text-body: 1.0625rem;  /* 17px */
  --text-small: 0.9375rem; /* 15px */
  --text-h1: clamp(2.125rem, 1.5rem + 3vw, 3.5rem);
  --text-h2: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem);
  --text-h3: clamp(1.25rem, 1.18rem + 0.3vw, 1.375rem);
  --text-median: 1.375rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--label);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.12;
  margin: 0 0 var(--s3);
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); font-weight: 800; letter-spacing: -0.02em; }
h2, .h2 { font-size: var(--text-h2); font-weight: 800; letter-spacing: -0.01em; }
h3, .h3 { font-size: var(--text-h3); font-weight: 700; letter-spacing: 0; }
p { margin: 0 0 var(--s4); }
ul, ol { margin: 0 0 var(--s4); }

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness 120ms ease;
}
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.num { font-variant-numeric: tabular-nums lining-nums; }
.wrap { max-width: calc(var(--page-max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.lede { font-size: 1.125rem; max-width: var(--measure); }
.fine { font-size: var(--text-small); color: var(--steel); margin: var(--s3) 0 0; }
.optional { font-weight: 400; color: var(--steel); }
.sep { color: var(--steel); margin: 0 var(--s2); }
.plain-list { list-style: none; padding: 0; }
.plain-list li { margin: 0 0 var(--s2); }

.skip-link {
  position: absolute;
  left: var(--s3);
  top: -200px;
  z-index: 10;
  background: var(--ink);
  color: var(--label);
  padding: var(--s3) var(--s4);
  border-radius: var(--radius-control);
}
.skip-link:focus { top: var(--s3); }

/* ── Buttons and forms ─────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--s5);
  border: 1px solid var(--ink);
  border-radius: var(--radius-control);
  font: 600 1rem/1.2 var(--font-text);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary { background: var(--ink); color: var(--label); }
.btn-primary:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.btn-secondary { background: var(--label); color: var(--ink); }
.btn-secondary:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Blue means buy. A button that goes to checkout (a link into /download/ or a handleCheckout
   button) is the only thing on the site in --action: filled when primary, outlined when secondary.
   Form, booking and navigation buttons stay Ink. A new buy button gets the color by linking to
   /download/ (redesign/tests/test_buy_buttons.py pins that every priced button does). */
a.btn-primary[href^="/download"],
button.btn-primary[onclick^="handleCheckout"] { background: var(--action); border-color: var(--action); }
a.btn-primary[href^="/download"]:hover,
button.btn-primary[onclick^="handleCheckout"]:hover { background: var(--action-deep); border-color: var(--action-deep); }
a.btn-secondary[href^="/download"],
button.btn-secondary[onclick^="handleCheckout"] { color: var(--action); border-color: var(--action); }
a.btn-secondary[href^="/download"]:hover,
button.btn-secondary[onclick^="handleCheckout"]:hover { color: var(--action-deep); border-color: var(--action-deep); }

.btn:disabled { cursor: progress; opacity: 0.7; }

label { display: block; font-size: var(--text-small); font-weight: 600; margin: 0 0 var(--s1); }
input[type="email"], input[type="text"], select, textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0 var(--s3);
  border: 1px solid var(--steel);
  border-radius: var(--radius-control);
  background: var(--label);
  color: var(--ink);
  font: 400 var(--text-body)/1.3 var(--font-text);
}
input::placeholder { color: var(--steel); opacity: 1; }
.field { margin: 0 0 var(--s4); }
.signup__row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.signup__row input { flex: 1 1 14rem; width: auto; }
.form-msg { margin: var(--s3) 0 0; padding-left: var(--s3); border-left: 3px solid var(--ink); font-size: var(--text-small); }
.form-msg.is-error { font-weight: 600; }
.form-msg[hidden] { display: none; }

.panel { background: var(--survey); border-radius: var(--radius-panel); padding: var(--s6) var(--s5); }
@media (min-width: 640px) { .panel { padding: var(--s6); } }

/* ── Header and navigation ─────────────────────────────────────────────────── */

.site-header { border-bottom: 1px solid var(--rule); }
.site-header__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  align-content: flex-start;
  column-gap: var(--s4);
  min-height: 64px;
  padding-block: 10px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink);
}
.brand:hover .brand__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.brand__flag { flex: none; outline: 1px solid var(--rule); border-radius: 1px; }
.brand__name { padding-top: 2px; }
@media (max-width: 419.98px) { .brand { font-size: 1rem; gap: 8px; } .site-header__bar { column-gap: var(--s2); } }

.menu-toggle {
  display: none;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding: 0 var(--s3);
  border: 1px solid var(--ink);
  border-radius: var(--radius-control);
  background: var(--label);
  color: var(--ink);
  font: 600 1rem/1 var(--font-text);
  cursor: pointer;
}

.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.site-nav a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s2);
  font-size: var(--text-small);
  text-decoration: none;
}
.site-nav a:not(.btn):hover, .site-nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.site-nav__buy--last { display: none; }

/* Under 900px, without JavaScript: the brand, then every link on a wrapped row. Nothing is
   hidden until a script runs. With JavaScript: a real disclosure button opens the same list. */
@media (max-width: 899.98px) {
  .site-nav { width: 100%; padding-top: var(--s2); }
  .site-nav a:not(.btn) { padding: 0 var(--s4) 0 0; }
  .site-nav__buy--first { order: -1; width: 100%; margin: var(--s1) 0 var(--s2); }
  .site-nav__buy--first .btn { width: 100%; }
  .js .menu-toggle { display: inline-flex; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: block; }
  .js .site-nav.is-open ul { flex-direction: column; align-items: stretch; }
  .js .site-nav.is-open a:not(.btn) { display: flex; min-height: 48px; padding: 0; font-size: var(--text-body); }
}
@media (min-width: 900px) {
  .site-nav ul { gap: var(--s1); }
  .site-nav__buy--first { display: none; }
  .site-nav__buy--last { display: block; margin-left: var(--s3); }
}

/* ── Footer ────────────────────────────────────────────────────────────────── */

.site-footer { margin-top: var(--s9); border-top: 1px solid var(--rule); padding: var(--s7) 0 var(--s6); }
.site-footer .brand { margin-bottom: var(--s3); }
.site-footer__provenance, .site-footer__disclaimer { font-size: var(--text-small); color: var(--steel); max-width: var(--measure); margin-bottom: var(--s2); }
.site-footer__nav ul { list-style: none; margin: var(--s4) 0 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: var(--s4); }
.site-footer__nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; font-size: var(--text-small); }

/* ── The rate band ─────────────────────────────────────────────────────────── */

.band-stack { margin: 0; }
.band-stack__asof { font-size: var(--text-small); color: var(--steel); margin: 0 0 var(--s2); }
.band-stack__status { font-size: var(--text-small); margin: 0 0 var(--s3); padding-left: var(--s3); border-left: 3px solid var(--steel); }
.band-stack__status[hidden] { display: none; }
.band-stack__note { font-size: var(--text-small); color: var(--steel); max-width: var(--measure); margin: var(--s3) 0 0; }
.band-stack__note + .band-stack__note { margin-top: var(--s1); }

.band-axis, .band-row { display: grid; grid-template-columns: 1fr; column-gap: var(--s6); }
.band-axis__spacer { display: none; }
.band-axis__scale { position: relative; height: 1.4rem; font-size: 0.875rem; color: var(--steel); }
.band-axis__tick { position: absolute; top: 0; transform: translateX(-50%); line-height: 1.4rem; }
.band-axis__tick--first { transform: none; }
.band-axis__tick--last { transform: translateX(-100%); }

.band-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule); }
.band-row { padding: var(--s2) 0 var(--s3); border-top: 1px solid var(--rule); align-items: center; }
.band-row__name { font-size: 1.25rem; margin: 0; }
.band-row__name a { text-decoration-thickness: 1px; }
.band-row__region, .band-row__counts { font-size: var(--text-small); color: var(--steel); margin: 0; line-height: 1.4; }
.band-row__nodata { font-size: var(--text-small); margin: var(--s2) 0 0; }
.band-row__label { margin-bottom: var(--s2); }

.band { position: relative; }
.band__median {
  margin: 0;
  padding-left: var(--median);
  transform: translateX(-1.5px);
  white-space: nowrap;
  font-size: var(--text-small);
  color: var(--steel);
  line-height: 1.1;
}
.band__median-figure {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-median);
  color: var(--flag-red);
  margin-right: 2px;
}
.band--median-right .band__median { padding-left: 0; padding-right: calc(100% - var(--median)); text-align: right; transform: translateX(1.5px); }
.band__graphic { display: block; width: 100%; height: 26px; overflow: visible; }
.band__ends { position: relative; height: 1.4em; margin: 2px 0 0; font-size: var(--text-small); color: var(--steel); line-height: 1.4; }
.band__low { position: absolute; left: var(--low); }
.band__high { position: absolute; right: calc(100% - var(--high)); }
.band--narrow .band__ends { height: auto; }
.band--narrow .band__low, .band--narrow .band__high { position: static; }
.band--narrow .band__high::before { content: ", "; }

@media (min-width: 760px) {
  .band-axis, .band-row { grid-template-columns: minmax(200px, 24rem) 1fr; }
  .band-axis__spacer { display: block; }
  .band__graphic { height: 30px; }
  .band-row__label { margin-bottom: 0; }
}

/* ── Shared: dataset tiers (/download/) ───────────────────────────────────── */

.tiers { margin: var(--s5) 0 var(--s5); display: grid; gap: 0; }
.tiers__row { padding: var(--s4) 0; border-top: 1px solid var(--rule); }
.tiers__row:last-child { border-bottom: 1px solid var(--rule); }
.tiers dt { font-family: var(--font-display); font-weight: 700; font-size: var(--text-h3); }
.tiers dd { margin: var(--s1) 0 0; color: var(--steel); }
.tiers__price { display: block; font-family: var(--font-text); font-weight: 600; font-size: var(--text-body); color: var(--ink); margin-top: 2px; }
.tiers__row--anchor { background: var(--survey); border-top: 0; border-radius: var(--radius-panel); padding: var(--s5); margin-bottom: var(--s3); }
.tiers__row--anchor dt { font-size: var(--text-h2); }
.tiers__row--anchor + .tiers__row { border-top: 0; }
@media (min-width: 900px) {
  .tiers { grid-template-columns: 3fr 2fr 2fr; column-gap: var(--s6); align-items: stretch; }
  .tiers__row { border: 0; border-left: 1px solid var(--rule); padding: var(--s2) 0 var(--s2) var(--s5); }
  .tiers__row:last-child { border-bottom: 0; }
  .tiers__row--anchor { border-left: 0; padding: var(--s5); margin: 0; }
}

/* ── Homepage: pitch, one band card, why, the $10 offer, the Monday report ── */
/* One loud moment (the band card in the first screen), then quiet sections with room around
   them. Revised 2026-11-01: the five-band stack put about 35 numbers in the first screen
   (redesign/DESIGN.md section 4). */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.btn-lg { min-height: 52px; padding: 0 28px; font-size: 1.0625rem; }

.hero { padding-top: var(--s6); padding-bottom: var(--s8); }
.hero h1 { font-size: clamp(2.125rem, 1.45rem + 2.6vw, 3.375rem); line-height: 1.04; margin-bottom: var(--s4); max-width: 15ch; }
.hero__lede { font-size: 1.125rem; line-height: 1.5; max-width: 34rem; margin-bottom: var(--s5); text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.hero__free { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
@media (max-width: 559.98px) { .hero__actions .btn { width: 100%; } }
@media (min-width: 640px) { .hero__lede { font-size: 1.25rem; } }

.rate-card { margin-top: var(--s7); background: var(--survey); border-radius: var(--radius-panel); padding: var(--s5) var(--s5) var(--s4); }
.rate-card__title { font-size: var(--text-h3); margin: 0 0 2px; }
.rate-card__asof { font-size: var(--text-small); color: var(--steel); margin: 0 0 var(--s4); }
.rate-card__status { font-size: var(--text-small); margin: 0 0 var(--s4); padding-left: var(--s3); border-left: 3px solid var(--steel); }
.rate-card__status[hidden] { display: none; }

.tdu-picker { border: 0; margin: 0 0 var(--s5); padding: 0; min-width: 0; }
.tdu-picker__options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.tdu-picker__option { position: relative; }
/* The radio itself covers its label, invisible, so the tap target is the full 44px button and
   the native radio keeps its keyboard behavior (arrow keys move the choice). */
.tdu-picker__option input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tdu-picker__option label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0 var(--s2);
  text-align: center;
  border: 1px solid var(--steel);
  border-radius: var(--radius-control);
  background: var(--label);
  font-size: var(--text-small);
  font-weight: 600;
  cursor: pointer;
}
.tdu-picker__option label:hover { border-color: var(--ink); }
.tdu-picker__option input:checked + label { background: var(--ink); border-color: var(--ink); color: var(--label); }
.tdu-picker__option input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; }
.tdu-picker__hint { font-size: var(--text-small); color: var(--steel); margin: var(--s3) 0 0; }

.rate-panel + .rate-panel { margin-top: var(--s6); }
.rate-panel__region { font-weight: 600; margin: 0 0 var(--s3); }
.rate-panel__nodata { font-size: var(--text-small); margin: 0 0 var(--s2); }
.rate-panel__counts { font-size: var(--text-small); color: var(--steel); margin: var(--s3) 0 0; }
.rate-panel__link { margin: 0; }
.rate-panel__link a { display: inline-flex; align-items: center; min-height: 44px; }

.band--hero .band__median { font-size: 1rem; margin-bottom: var(--s1); }
.band--hero .band__median-figure { font-size: clamp(2.5rem, 2.1rem + 1.6vw, 3.5rem); line-height: 1; margin-right: var(--s1); }
.band--hero .band__graphic--compact { height: 22px; }
.rate-card .band__track { fill: var(--label); } /* the Survey track would vanish on the Survey card */
.band--hero .band__ends { margin-top: var(--s1); }

/* The picker: native radios, swapped with :has() so it works with JavaScript off. A browser
   without :has() skips the picker and shows every territory's panel in a column instead. */
.tdu-picker { display: none; }
@supports selector(:has(*)) {
  .tdu-picker { display: block; }
  .rate-panel { display: none; }
  .rate-card:has(#tdu-oncor:checked) .rate-panel[data-tdu="oncor"],
  .rate-card:has(#tdu-centerpoint:checked) .rate-panel[data-tdu="centerpoint"],
  .rate-card:has(#tdu-aep-central:checked) .rate-panel[data-tdu="aep-central"],
  .rate-card:has(#tdu-aep-north:checked) .rate-panel[data-tdu="aep-north"],
  .rate-card:has(#tdu-tnmp:checked) .rate-panel[data-tdu="tnmp"] { display: block; }
  .rate-panel + .rate-panel { margin-top: 0; }
}

@media (max-width: 479.98px) {
  .rate-card { padding-inline: var(--s4); }
  .tdu-picker__option label { font-size: 0.875rem; padding: 0 var(--s1); }
}
@media (max-width: 374.98px) {
  .tdu-picker__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 640px) {
  .rate-card { padding: var(--s6) var(--s6) var(--s5); }
}
@media (min-width: 960px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); column-gap: var(--s8);
          align-items: center; padding-top: var(--s8); padding-bottom: var(--s9); }
  .rate-card { margin-top: 0; }
}

.home-why { padding-bottom: var(--s9); }
.home-why h2 { margin-bottom: var(--s5); }
.home-why__row { padding: var(--s5) 0; border-top: 1px solid var(--rule); }
.home-why__row:last-child { border-bottom: 1px solid var(--rule); }
.home-why__row h3 { margin-bottom: var(--s2); }
.home-why__row p { max-width: var(--measure); margin: 0; text-wrap: pretty; }
@media (min-width: 900px) {
  .home-why__row { display: grid; grid-template-columns: 19rem 1fr; column-gap: var(--s7); align-items: baseline; }
  .home-why__row h3 { margin: 0; }
}

.home-offer { background: var(--survey); padding: var(--s8) 0; }
.home-offer h2 { margin-bottom: var(--s3); }
.home-offer .lede { margin-bottom: var(--s5); }
.home-offer__list { list-style: none; padding: 0; margin: 0; max-width: 36rem; }
.home-offer__list li { padding: var(--s3) 0; border-top: 1px solid var(--rule); text-wrap: pretty; }
.home-offer__list li:last-child { border-bottom: 1px solid var(--rule); }
.home-offer__buy { margin-top: var(--s7); background: var(--label); border-radius: var(--radius-panel); padding: var(--s6) var(--s5); }
.home-offer__buy .btn { width: 100%; }
.home-offer__terms { font-size: var(--text-small); color: var(--steel); margin: var(--s3) 0 var(--s5); }
.home-offer__more { margin: 0; text-wrap: pretty; }
@media (min-width: 640px) { .home-offer__buy { padding: var(--s6); } }
@media (min-width: 960px) {
  .home-offer { padding: var(--s9) 0; }
  .home-offer__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: var(--s8); align-items: center; }
  .home-offer__buy { margin-top: 0; }
}

.home-monday { padding-top: var(--s8); }
.home-monday h2 { margin-bottom: var(--s3); }
.home-monday h2 span { display: block; } /* break after "Not ready to buy?" at every width */
.home-monday__pitch p { max-width: 36rem; }
.home-monday__latest { font-size: var(--text-small); color: var(--steel); margin: 0; text-wrap: pretty; }
.home-monday__form { margin-top: var(--s5); }
@media (min-width: 960px) {
  .home-monday { padding-top: var(--s9); }
  .home-monday__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: var(--s8); align-items: end; }
  .home-monday__form { margin-top: 0; }
}