/* Self-hosted fonts (via @fontsource). Avoids the cross-origin round-trip
   to Google Fonts and the visible swap-from-fallback that came with it.
   font-display: swap means text shows in the system fallback for the brief
   moment before the woff2 arrives, then swaps; with the file served from
   the same origin and only ~12-20 KB each, that window is usually <50ms. */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/oswald-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/oswald-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/work-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/work-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/work-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/work-sans-700.woff2') format('woff2');
}

/* Cross-page transitions on browsers that support the View Transitions API
   (Chromium 126+, Safari 18.2+). Firefox falls back to the default hard
   reload. We override the default gentle crossfade with a snappier
   fade-out + slide-up-and-fade-in to feel more deliberate. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: 160ms ease-in both pp-page-out;
}
::view-transition-new(root) {
  animation: 280ms cubic-bezier(0.2, 0.8, 0.2, 1) both pp-page-in;
}
@keyframes pp-page-out {
  to { opacity: 0; }
}
@keyframes pp-page-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 1ms;
  }
}

:root {
  /* PPSD brand palette */
  --color-ink: #000000;
  --color-teal: #027D8A;
  --color-green: #5DB85B;
  --color-yellow: #F4B400;
  --color-orange: #F95C20;

  /* Derived */
  --color-teal-dark: #01606B;
  --color-teal-ink: #013138;
  --color-teal-50: #E6F4F6;
  --color-orange-dark: #D84A10;
  --color-green-dark: #4A9749;
  /* Bar-chart "cool" fill — lighter and less saturated than --color-teal so
     bars read as airier than the teal accents elsewhere on the site. Used by
     both the low-tier and mid-tier bar fills (we collapsed them to the same
     blue rather than the original green/teal split). */
  --color-bar-cool: #4A9FB0;
  --color-charcoal: #2D2D2D;
  /* Slate sits between Coal and brand Charcoal — used as the dark page bg
     for the action-letter and results-cta surfaces. Cool undertone helps
     orange/yellow accents pop without the page feeling pitch-black. */
  --color-slate: #1A1D1F;
  --color-paper: #FAFAF7;
  --color-paper-alt: #F1F1EC;
  --color-line: #D4D4CE;
  --color-mute: #6B6B66;

  /* Type — Cubano replaced with Oswald here; swap in Cubano in production */
  --font-display: "Oswald", "Arial Narrow Bold", sans-serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Scale */
  --text-hero: clamp(44px, 7vw, 72px);
  /* Hero h1: each phrase is on its own line via explicit <br> tags; this
     scale sizes those lines so the longest phrase ("somewhere else.")
     fits its column without wrapping, from ~320px phones to wide desktops.
     Ceiling caps growth so the line doesn't exceed the headline column at
     ~1280–1500px viewports where the leaderboard takes ~480px alongside. */
  --text-display-xl: clamp(32px, 8vw, 80px);
  --text-display: clamp(28px, 3.5vw, 40px);
  --text-h1: clamp(26px, 2.5vw, 32px);
  --text-h2: clamp(20px, 2vw, 24px);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-full: 9999px;

  /* Tactile poster shadows — solid offset-block in brand colors. Used on
     modals, cards, and the primary button to give surfaces a chunky, hand-
     pasted feel. Sizes ascend with the prominence of the surface. */
  --shadow-y-sm: 4px 4px 0 var(--color-yellow);
  --shadow-y-md: 8px 8px 0 var(--color-yellow);
  --shadow-y-lg: 12px 12px 0 var(--color-yellow);
  --shadow-ink-sm: 4px 4px 0 var(--color-ink);

  /* Z-index scale — keep layers explicit so a future sticky element doesn't
     accidentally land above a modal. */
  --z-sticky: 10;
  --z-modal: 100;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
}

/* Utility classes */
.container { max-width: 1280px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 72px); }
.display { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.01em; line-height: 1.05; text-transform: uppercase; }
.tabular { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Canonical "kicker" treatment — uppercase Oswald 700, used as eyebrow text
   above headings, on form labels, in callout panels, etc. The selector list
   below applies the shared triplet to every kicker site in the codebase.
   New code can use the bare `.kicker` class. Per-component sizes, colors,
   letter-spacing, and margins live in the component-specific rules. */
.kicker,
.input-card__label,
.leaderboard__kicker,
.hero__kicker,
.result-hero__kicker,
.result-hero__verify-label,
.results-cta__kicker,
.action-card__kicker,
.meth-section__num,
.meth-section__sub,
.meth-card__label,
.advanced summary,
.disclaimer__title,
.detail__heading,
.site-footer__poweredby-label,
.bar__caveats-label {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
}

/* All inline icons inherit text color via fill: currentColor. 18px is the
   floor across the icon set so glyph detail (especially the outlined ring
   on info/help/alert) stays legible regardless of the surrounding text size. */
.icon {
  display: inline-block;
  width: 18px; height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}
.icon--bolt    { width: 18px; height: 18px; }
.icon--bolt-sm { width: 18px; height: 18px; }
.icon--info    { width: 18px; height: 18px; }
.icon--help    { width: 18px; height: 18px; }
.icon--alert   { width: 18px; height: 18px; }

/* ============ HEADER ============ */
.site-header {
  border-bottom: 1px solid var(--color-line);
  background: var(--color-paper);
  position: sticky; top: 0; z-index: var(--z-sticky);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  /* padding-block (not shorthand) so .container's horizontal padding sticks. */
  padding-block: 18px;
}
.wordmark {
  display: flex; align-items: center; gap: 16px;
  text-decoration: none;
  color: var(--color-ink);
  /* let the logo set the row height */
}
.wordmark__logo {
  width: 72px; height: 72px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}
.wordmark__text {
  display: flex; flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}
.wordmark__org {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--color-teal);
  white-space: nowrap;
}
.wordmark__tool {
  font-family: var(--font-body); font-weight: 500;
  font-size: 14px;
  color: var(--color-mute);
  letter-spacing: 0.02em;
  margin-top: 3px;
}
.nav {
  display: flex; gap: 32px;
}
.nav a {
  color: var(--color-ink); text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 1.5px;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color 120ms, border-color 120ms;
}
.nav a:hover { color: var(--color-teal); }
.nav a[aria-current="page"] {
  color: var(--color-teal);
  border-bottom-color: var(--color-teal);
}

/* ============ HERO ============ */
.hero {
  padding: 56px 0 64px;
  background: linear-gradient(180deg, var(--color-paper) 0%, var(--color-teal-50) 100%);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 480px);
  gap: 48px clamp(56px, 6vw, 96px);
  align-items: start;
}
.hero__main { min-width: 0; }
.hero__kickers {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 24px;
}
.hero__kicker {
  display: inline-block;
  font-size: 12px; letter-spacing: 2px;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  line-height: 1.2;
}
.hero__kicker--solid {
  background: var(--color-orange);
  color: var(--color-paper);
  border: 2px solid var(--color-orange);
}
.hero__kicker--outline {
  background: transparent;
  color: var(--color-teal);
  border: 2px solid var(--color-teal);
}
.hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-display-xl);
  line-height: 1.02; text-transform: uppercase;
  margin-bottom: 28px;
}
.hero h1 em {
  font-style: normal; color: var(--color-orange);
}
.hero h1 mark {
  background: linear-gradient(180deg, transparent 64%, rgba(244,180,0,0.55) 64%);
  color: inherit;
  padding: 0 0.04em;
  /* If the phrase wraps within the column, paint the gradient on each
     visual line independently — otherwise the inline-block fallback
     stretches one big rectangle across both lines. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hero__sub {
  font-size: 18px; line-height: 1.55; max-width: 55ch;
  color: var(--color-teal-ink);
  margin-bottom: 0;
}

/* ============ LEADERBOARD ============ */
.leaderboard { position: relative; }
.leaderboard__panel {
  position: relative;
  background: var(--color-ink);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(244, 180, 0, 0.06) 0,
    rgba(244, 180, 0, 0.06) 1px,
    transparent 1px,
    transparent 14px
  );
  color: var(--color-paper);
  border-radius: var(--radius-md);
  padding: 22px 26px 18px;
  box-shadow: var(--shadow-y-md);
}
.leaderboard__kicker {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 1.8px;
  color: var(--color-yellow);
  margin-bottom: 12px;
}
.leaderboard__kicker .icon { color: var(--color-yellow); }
.leaderboard__title {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin-bottom: 14px;
  white-space: nowrap;
}
.leaderboard__list {
  list-style: none;
  margin: 0; padding: 0;
}
.lb-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(250, 250, 247, 0.18);
  font-variant-numeric: tabular-nums;
}
.lb-row:last-child { border-bottom: none; }
.lb-row__rank {
  font-family: var(--font-display); font-weight: 700;
  color: var(--color-yellow);
  font-size: 16px; letter-spacing: 0.04em;
}
.lb-row__city {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase;
  font-size: 16px; letter-spacing: 0.02em;
  line-height: 1.1;
}
.lb-row__utility {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px; letter-spacing: 0.04em;
  color: rgba(250, 250, 247, 0.55);
  margin-left: 8px;
  text-transform: none;
}
.lb-row__value {
  font-family: var(--font-display); font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.02em;
}
.lb-row--gap { /* dashed separator already on previous row; just adds breathing room */
  height: 6px; padding: 0; border: none;
}
.lb-row--sdge .lb-row__rank,
.lb-row--sdge .lb-row__city,
.lb-row--sdge .lb-row__value { color: var(--color-orange); }
.lb-row--sdge .lb-row__utility { color: rgba(249, 92, 32, 0.7); }
.lb-row--placeholder {
  /* Skeleton state before JS populates the list. */
  height: 36px;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.03) 100%);
}
.lb-row--error {
  display: block;
  padding: 16px 12px;
  font-size: 14px;
  color: rgba(250, 250, 247, 0.85);
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-sm);
  border-bottom: none;
}
.init-error {
  margin: 24px 0;
  padding: 16px 20px;
  background: var(--color-paper-alt);
  border-left: 4px solid var(--color-orange);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-size: 15px;
  line-height: 1.5;
}
.init-error strong { display: block; margin-bottom: 4px; }
.init-error a { color: var(--color-teal); text-decoration: underline; }
.leaderboard__footer {
  margin-top: 12px;
  font-size: 11px; line-height: 1.4;
  color: rgba(250, 250, 247, 0.45);
  letter-spacing: 0.02em;
}
/* "Why these cities?" disclosure trigger inside the leaderboard panel —
   uses .btn + .btn--text with a leading help icon. The dark panel needs
   a higher-contrast rest color than --color-mute, and a yellow hover so
   it picks up the panel's existing accent color rather than going teal. */
/* The leaderboard__panel descendant prefix is intentional — bumps
   specificity above .btn--text:hover, which is defined later in the
   file and would otherwise win the cascade for color. */
.leaderboard__panel .leaderboard__why {
  margin-top: 8px;
  padding: 8px 0;
  font-size: 12px;
  letter-spacing: 1.2px;
  color: rgba(250, 250, 247, 0.65);
  text-decoration-color: rgba(250, 250, 247, 0.35);
}
.leaderboard__panel .leaderboard__why:hover {
  color: var(--color-yellow);
  text-decoration-color: var(--color-yellow);
}

/* ============ CTA SECTION ============ */
.cta {
  padding: 72px 0 96px;
  background: var(--color-paper);
}
.cta__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

/* ============ INPUT CARD ============ */
.input-card {
  background: var(--color-paper);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-md);
  padding: 40px;
  width: 100%;
  max-width: 760px;
  box-shadow: 10px 10px 0 var(--color-teal);
}
.input-card__label {
  display: block;
  font-size: 12px; letter-spacing: 1.8px;
  color: var(--color-ink);
  margin-bottom: 14px;
}
.input-row {
  display: flex; gap: 12px; margin-bottom: 18px;
}
.input-field {
  flex: 1;
  min-width: 0;
  border: 1.5px solid var(--color-ink);
  background: #fff;
  padding: 18px 24px;
  font-family: var(--font-body); font-size: 20px; font-weight: 500;
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
}
.input-field--display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 6vw, 72px);
  line-height: 1;
  padding: 24px 28px;
  letter-spacing: 0.01em;
}
.input-field--display::placeholder {
  color: var(--color-line);
}
.input-field:focus { border-color: var(--color-teal); box-shadow: 0 0 0 3px rgba(2,125,138,0.2); }
.input-unit {
  display: flex; align-items: center; justify-content: center;
  padding: 0 24px;
  background: var(--color-paper-alt);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-sm);
  font-family: var(--font-display); font-weight: 700;
  color: var(--color-mute);
  letter-spacing: 1px;
}
.input-unit--solid {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-paper);
  font-size: 22px;
  letter-spacing: 0.04em;
  min-width: 96px;
}
.input-helper {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; color: var(--color-mute);
  margin-bottom: 24px;
  line-height: 1.5;
}
.input-helper .icon--info { color: var(--color-mute); margin-top: 2px; }
.input-helper strong { color: var(--color-ink); font-weight: 700; }

/* Smaller advisory note (e.g. CCA / SDCP disclosure on landing). */
.input-note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-mute);
  margin-bottom: 24px;
  padding: 10px 14px;
  background: var(--color-paper-alt);
  border-left: 3px solid var(--color-teal);
  border-radius: var(--radius-sm);
}
.input-note strong { color: var(--color-ink); font-weight: 700; }
.input-note a { color: var(--color-teal); text-decoration: underline; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.4px;
  font-size: 15px;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 120ms;
  text-decoration: none;
}
.btn--primary {
  background: var(--color-orange); color: var(--color-ink);
  border-color: var(--color-ink);
  box-shadow: var(--shadow-ink-sm);
}
.btn--primary:hover {
  background: var(--color-orange-dark); color: var(--color-paper);
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--color-ink);
}
.btn--primary:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--color-ink);
}
.btn--primary .icon { color: var(--color-ink); }
.btn--primary:hover .icon { color: var(--color-paper); }
.btn--secondary {
  background: transparent; color: var(--color-ink);
  border-color: var(--color-ink);
  box-shadow: var(--shadow-ink-sm);
}
.btn--secondary:hover {
  background: var(--color-ink); color: var(--color-paper);
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--color-ink);
}
.btn--secondary:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--color-ink);
}
/* Yellow accent — same tactile chrome as --primary but with the brand
   yellow as the fill. Designed for dark surfaces (leaderboard panel,
   slate sections) where the orange-on-ink primary loses its drop-shadow
   contrast. The ink shadow still applies so the button keeps its weight
   on light surfaces too. */
.btn--yellow {
  background: var(--color-yellow); color: var(--color-ink);
  border-color: var(--color-ink);
  box-shadow: var(--shadow-ink-sm);
}
.btn--yellow:hover {
  background: #FFC830;
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--color-ink);
}
.btn--yellow:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--color-ink);
}
.btn--yellow .icon { color: var(--color-ink); }
.btn--text {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--color-mute);
  padding: 14px 8px;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}
.btn--text:hover {
  background: transparent;
  color: var(--color-teal);
  text-decoration-thickness: 2px;
  transform: none;
  box-shadow: none;
}
.btn--text:active { transform: none; box-shadow: none; }
/* Canonical button row. Use anywhere a row of buttons sits in the page flow.
   Buttons are left-aligned in DOM order: primary first, supporting actions
   (text/secondary) to its right. */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 28px;
}

/* Expandable panel */
.advanced {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1.5px dashed var(--color-line);
}
.advanced summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; letter-spacing: 1.4px;
  color: var(--color-teal);
  user-select: none;
}
.advanced summary::-webkit-details-marker { display: none; }
.advanced__chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border: 1.5px solid var(--color-teal);
  border-radius: var(--radius-sm);
  font-size: 16px; font-weight: 700;
  line-height: 1;
  transition: transform 120ms;
}
.advanced[open] .advanced__chip { transform: rotate(45deg); }
.advanced__body { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }

/* Trust signals — sit below the input card, full-width centered row */
.trust {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px 32px;
}
.trust li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px;
  color: var(--color-teal-ink);
}
.trust .icon { color: var(--color-teal); }
.advanced__field label {
  display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: 1px; color: var(--color-mute); margin-bottom: 6px;
  font-weight: 600;
}
.advanced__field input,
.advanced__field select {
  width: 100%; padding: 10px 12px; font-size: 15px;
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  background: var(--color-paper);
}

/* ============ RESULTS ============ */
.results {
  padding: 64px 0;
  display: none;
}
.results.active { display: block; }

/* "← Check another bill" link at the top of the results page */
.back-link {
  display: inline-block;
  margin-bottom: 32px;
  font-family: var(--font-display);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-mute);
  text-decoration: none;
  font-weight: 700;
  transition: color 120ms;
}
.back-link:hover { color: var(--color-teal); }

.result-hero {
  padding: 40px;
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: var(--radius-md);
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
}
.result-hero::before {
  /* Soft yellow radial glow in the top-right corner — same fuzzy treatment
     as the act page watermarks. Pulled off-canvas so the visible portion is
     just the brighter inner ring fading into the hero's ink background. */
  content: '';
  position: absolute; top: -120px; right: -120px;
  width: 480px; height: 480px;
  background: radial-gradient(closest-side, rgba(244, 180, 0, 0.22), transparent 70%);
  pointer-events: none;
}
.result-hero__kicker {
  font-size: 12px; letter-spacing: 2px; color: var(--color-yellow);
  margin-bottom: 16px;
}
.result-hero__headline {
  font-family: var(--font-display); font-size: var(--text-hero);
  line-height: 1; text-transform: uppercase;
  margin-bottom: 16px;
  /* Distribute line lengths evenly so the price/savings amounts don't end up
     orphaned on their own line. Falls back to default wrapping in older browsers. */
  text-wrap: balance;
  /* Equal-width digits so the count-up animation doesn't reflow the line as
     each digit fills in. Combined with padStart in animateCount, the spans
     hold their final width from frame one. */
  font-variant-numeric: tabular-nums;
}
.result-hero__headline em {
  font-style: normal; color: var(--color-orange);
}
/* Second clause inside the headline — drops to ~half the size and gets a
   yellow highlight on the savings amounts so the punchline still reads
   without competing with the main statement above. */
.result-hero__savings {
  display: block;
  font-size: 0.5em;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
  margin-top: 0.45em;
  color: rgba(250, 250, 247, 0.92);
  text-wrap: balance;
}
.result-hero__savings strong {
  font-weight: 700;
  background: linear-gradient(180deg, transparent 62%, rgba(244, 180, 0, 0.55) 62%);
  padding: 0 0.08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.result-hero__sub {
  font-size: 18px; line-height: 1.5;
  color: rgba(250,250,247,0.8);
  font-variant-numeric: tabular-nums;
}
.result-hero__verify {
  margin-top: 18px;
  padding: 12px 16px;
  background: rgba(250, 250, 247, 0.06);
  border-left: 3px solid var(--color-yellow);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(250, 250, 247, 0.85);
}
.result-hero__verify[hidden] { display: none; }
.result-hero__verify strong { color: var(--color-paper); }
.result-hero__verify-label {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 1.4px;
  color: var(--color-yellow);
  margin-right: 8px;
}

/* Entry animation on the result hero — single slide-up + fade-in instead of
   the older opacity-dim pulse, which fought visually with the count-up
   numbers and read as flicker. */
@keyframes result-hero-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.result-hero--pulse {
  animation: result-hero-in 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .result-hero--pulse { animation: none; }
}

/* Chart */
.chart {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 32px;
  margin-bottom: 24px;
}
.chart__title {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 14px; letter-spacing: 1.5px;
  color: var(--color-mute);
  margin-bottom: 24px;
}
.bar {
  display: grid;
  grid-template-columns: 200px 1fr 110px 16px;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-paper-alt);
  cursor: pointer;
  list-style: none;
  transition: background 120ms;
}
.bar::-webkit-details-marker { display: none; }
.bar::marker { content: ''; }
.bar:hover { background: rgba(0, 0, 0, 0.02); }
.bar-row[open] > .bar { border-bottom-color: transparent; }
.bar-row:last-child > .bar { border-bottom: none; }
.bar__label { min-width: 0; }
.bar__city {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; font-size: 16px; letter-spacing: 0.5px;
  line-height: 1.1;
}
.bar__utility { font-size: 12px; color: var(--color-mute); margin-top: 2px; }
.bar__track {
  height: 36px;
  background: var(--color-paper-alt);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.bar__fill {
  height: 100%;
  border-radius: 2px;
  transition: width 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
  width: 0;
  /* Gentle diagonal-stripe texture overlaid on the solid color set by modifiers. */
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.18) 0,
    rgba(255, 255, 255, 0.18) 1.5px,
    transparent 1.5px,
    transparent 5px
  );
}
.bar__fill--sdge { background-color: var(--color-orange); }
.bar__fill--low  { background-color: var(--color-bar-cool); }
.bar__fill--mid  { background-color: var(--color-bar-cool); }
.bar__fill--high { background-color: var(--color-orange); opacity: 0.55; }
.bar__values { text-align: right; }
.bar__value {
  font-weight: 600; text-align: right; font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.bar__delta {
  font-size: 12px; color: var(--color-mute); margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.bar__chevron {
  font-size: 14px; line-height: 1;
  color: var(--color-mute);
  transition: transform 180ms ease;
  transform-origin: center;
  text-align: center;
}
.bar-row[open] .bar__chevron { transform: rotate(-180deg); color: var(--color-ink); }

/* SDG&E row: orange tint + diamond marker before city name */
.bar-row--sdge {
  background: rgba(249, 92, 32, 0.04);
  margin: 0 -16px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
}
.bar--sdge .bar__city { color: var(--color-orange); }
.bar--sdge .bar__city::before {
  content: '◆ ';
  color: var(--color-orange);
  font-family: var(--font-body);
  font-size: 0.85em;
  margin-right: 2px;
}
.bar-row--sdge > .bar { border-bottom-color: transparent; }

/* Expandable details panel */
.bar__details {
  padding: 24px 0 28px;
  border-top: 1px solid var(--color-line);
}
.bar-row--sdge .bar__details { border-top-color: rgba(249, 92, 32, 0.18); }
.bar__caveats {
  margin: 0 0 24px;
  padding: 14px 18px;
  background: rgba(244, 180, 0, 0.10);
  border-left: 3px solid var(--color-yellow);
  border-radius: var(--radius-sm);
}
.bar__caveats-label {
  font-size: 11px;
  letter-spacing: 1.4px;
  color: var(--color-ink);
  margin-bottom: 6px;
}
.bar__caveats-list {
  list-style: disc;
  padding-left: 18px;
  margin: 0;
}
.bar__caveats-list li {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-ink);
  margin: 4px 0;
}
.bar__details-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.detail__heading {
  font-size: 11px; letter-spacing: 1.5px;
  color: var(--color-mute);
  margin-bottom: 14px;
}
.detail__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 6px;
  line-height: 1.3;
}
.detail__meta {
  color: var(--color-mute);
  font-size: 14px;
  margin-bottom: 12px;
  line-height: 1.5;
}
.detail__link {
  display: inline-block;
  color: var(--color-teal);
  font-weight: 600;
  text-decoration: underline;
  font-size: 14px;
  margin-bottom: 14px;
}
.detail__verified {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--color-mute);
}

/* Bill breakdown table */
.breakdown { display: flex; flex-direction: column; gap: 8px; }
.breakdown__row {
  display: flex; justify-content: space-between; gap: 16px;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}
.breakdown__row dt { color: var(--color-ink); }
.breakdown__row dd { font-weight: 500; color: var(--color-ink); }
.breakdown__row--total {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--color-line);
  font-weight: 700;
}
.breakdown__row--total dt,
.breakdown__row--total dd { font-weight: 700; }
.breakdown__note {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-mute);
  padding: 8px 10px;
  background: var(--color-paper-alt);
  border-radius: var(--radius-sm);
}

/* vs SDG&E */
.vs-delta {
  font-family: var(--font-display); font-weight: 700;
  font-size: 36px;
  line-height: 1;
  letter-spacing: 0.01em;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.vs-delta--less { color: var(--color-green-dark); }
.vs-delta--more { color: var(--color-orange-dark); }
.vs-delta--neutral { color: var(--color-mute); font-size: 32px; }
.vs-context { font-size: 13px; color: var(--color-mute); line-height: 1.5; }

/* Disclaimer */
.disclaimer {
  background: var(--color-teal-50);
  border-left: 4px solid var(--color-teal);
  padding: 24px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-bottom: 32px;
}
.disclaimer__title {
  font-size: 13px; letter-spacing: 1.5px;
  color: var(--color-teal-ink);
  margin-bottom: 10px;
}
.disclaimer__body { font-size: 14px; line-height: 1.65; color: var(--color-teal-ink); }
.disclaimer__body a { color: var(--color-teal); font-weight: 600; }

/* ============ RESULTS-PAGE TAKE-ACTION CTA ============
   Dark slate card that funnels calculator users to the open letter. Visual
   language matches act.html (slate bg, yellow kicker, orange CTA, soft glow)
   so the two surfaces feel like the same campaign. */
.results-cta {
  position: relative;
  background: var(--color-slate);
  border-radius: var(--radius-md);
  padding: clamp(32px, 4.5vw, 56px);
  margin: 48px 0 0;
  color: var(--color-paper);
  overflow: hidden;
}
.results-cta__glow {
  position: absolute;
  right: -18%; top: -30%;
  width: 80%; height: 200%;
  background: radial-gradient(closest-side, rgba(249, 92, 32, 0.22), transparent 75%);
  pointer-events: none;
}
.results-cta__inner {
  position: relative; z-index: 1;
  max-width: 60ch;
}
.results-cta__kicker {
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--color-yellow);
  margin-bottom: 18px;
}
.results-cta__lead {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
  margin: 0 0 28px;
  color: rgba(250, 250, 247, 0.92);
}
.results-cta__btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 18px 28px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--color-paper);
  background: var(--color-orange);
  border: 0;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--color-orange-dark);
  transition: transform 80ms, box-shadow 80ms, background 120ms;
}
.results-cta__btn:hover { background: #ff6a31; }
.results-cta__btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--color-orange-dark);
}
.results-cta__btn:focus-visible {
  outline: 3px solid var(--color-yellow);
  outline-offset: 3px;
}
.results-cta__btn .icon { width: 18px; height: 18px; fill: var(--color-paper); }
.results-cta__close {
  margin: 24px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(250, 250, 247, 0.65);
}
.results-cta__close strong { color: var(--color-yellow); font-weight: 700; }

/* Freshness */
.freshness {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--color-mute);
  margin-top: 24px;
}
.chart__freshness {
  display: flex;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--color-paper-alt);
  font-size: 13px;
}
.freshness__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-green);
}
.freshness--aging .freshness__dot { background: var(--color-yellow); }
.freshness--stale .freshness__dot { background: var(--color-orange); }

/* ============ TAKE-ACTION PAGE — action cards ============
   Two scannable side-by-side options on /about.html (now "Take Action").
   Visual language mirrors the IOU/POU modal: paper-alt fill, orange title,
   uppercase kicker, body text, button anchored at bottom. */
.action-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}
@media (max-width: 700px) {
  .action-cards { grid-template-columns: 1fr; gap: 16px; }
}
.action-card {
  background: var(--color-paper-alt);
  border-radius: var(--radius-md);
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
}
.action-card__kicker {
  font-size: 12px; letter-spacing: 1.4px;
  color: var(--color-mute);
  margin: 0 0 10px;
}
.action-card__title {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: 0.005em;
  line-height: 1.05;
  color: var(--color-ink);
  margin: 0 0 16px;
}
.action-card__body {
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-ink);
  margin: 0 0 24px;
  /* Push the button to the bottom so the two cards' CTAs align even when
     body text length differs. */
  flex: 1;
}
.action-card__btn {
  align-self: flex-start;
}

/* ============ METHODOLOGY PAGE ============ */
.meth { padding: 56px 0 96px; }
.meth-page-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1; text-transform: uppercase;
  letter-spacing: 0.005em;
  margin-bottom: 56px;
}
.meth-page-title em { font-style: normal; color: var(--color-orange); }

/* Numbered sections */
.meth-section {
  margin-bottom: 64px;
  scroll-margin-top: 80px; /* clear sticky header on anchor jump */
}
.meth-section__num {
  font-size: 14px; letter-spacing: 2px;
  color: var(--color-teal);
  margin-bottom: 8px;
}
.meth-section__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.05; text-transform: uppercase;
  letter-spacing: 0.005em;
  margin-bottom: 24px;
}
.meth-section__title em {
  font-style: normal; color: var(--color-orange);
}
.meth-section__sub {
  font-size: 13px;
  letter-spacing: 1.6px;
  color: var(--color-teal);
  margin-top: 28px;
  margin-bottom: 12px;
}
.meth-section p {
  font-size: 16px; line-height: 1.65;
  margin-bottom: 18px;
  max-width: 78ch;
}
.meth-section p:last-child { margin-bottom: 0; }
.meth-section a:not(.btn) {
  color: var(--color-teal);
  font-weight: 600;
}

/* Inline arrow-link CTA used inside paragraphs */
.meth-cta-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--color-teal);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid var(--color-teal);
  padding-bottom: 1px;
}
.meth-cta-link:hover { color: var(--color-teal-dark); border-bottom-color: var(--color-teal-dark); }
.meth-cta-link .icon { width: 14px; height: 14px; }

/* Bulleted lists */
.meth-list {
  list-style: disc;
  padding-left: 22px;
  margin-bottom: 18px;
}
.meth-list li {
  font-size: 16px; line-height: 1.65;
  margin-bottom: 8px;
  max-width: 76ch;
}

/* Section 04 — cards grid */
.meth-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.meth-card {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 22px 24px;
}
.meth-card__label {
  font-size: 11px; letter-spacing: 1.6px;
  color: var(--color-orange);
  margin-bottom: 10px;
}
.meth-card p {
  font-size: 14px; line-height: 1.55;
  margin: 0;
  color: var(--color-ink);
}

/* Section 05 — data sources table */
.meth-table-wrap {
  border: 1.5px solid var(--color-ink);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: 24px;
}
.meth-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.meth-table thead {
  background: var(--color-ink);
  color: var(--color-paper);
}
.meth-table thead th {
  text-align: left;
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase;
  font-size: 11px; letter-spacing: 1.6px;
  padding: 14px 16px;
}
.meth-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-line);
  vertical-align: top;
  line-height: 1.45;
}
.meth-table tbody tr:nth-child(even) td {
  background: var(--color-paper-alt);
}
.meth-table tbody tr:last-child td { border-bottom: none; }
.meth-table__loading {
  text-align: center;
  color: var(--color-mute);
  font-style: italic;
  padding: 28px 16px !important;
}
.meth-table__city {
  /* td stays a proper table-cell so row alignment behaves; the inner span
     handles the flex layout for the dot + city name + badge. */
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 13px; letter-spacing: 0.04em;
}
.meth-table__city-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.meth-table__city .freshness__dot { flex-shrink: 0; }
.meth-table__source {
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.meth-table__source .icon { width: 14px; height: 14px; }

/* Info button next to a column header — small, inherits th color */
.th-info {
  display: inline-flex; align-items: center; gap: 6px;
}
.th-info__btn {
  background: transparent; border: 0; padding: 0; margin: 0;
  cursor: pointer; color: inherit;
  display: inline-flex; align-items: center;
  border-radius: 50%;
  width: 18px; height: 18px;
  opacity: 0.7;
  transition: opacity 120ms;
}
.th-info__btn:hover, .th-info__btn:focus-visible { opacity: 1; }
.th-info__btn .icon { width: 14px; height: 14px; fill: currentColor; }
.th-info__btn:focus-visible {
  outline: 2px solid var(--color-yellow);
  outline-offset: 2px;
}

/* ============ MODAL (unified) ============
   One scaffold for every dialog in the app. Variant modifiers tweak visual
   weight and chrome — pick the one that matches the surface:
     .modal--info   — default look: paper panel, yellow offset shadow, flex
                      header with inline close. Used on results, methodology,
                      landing leaderboard.
     .modal--share  — like info but with an ink border + larger shadow + a
                      slight backdrop blur. Used on the results share card. */
.modal {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal[hidden] { display: none; }

.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.modal--share .modal__backdrop {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.modal__panel {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  /* Stop iOS rubber-band scroll inside a tall modal from chaining out to the
     page underneath when the user reaches top/bottom of the panel. */
  overscroll-behavior: contain;
  background: var(--color-paper);
  color: var(--color-ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-y-md);
  padding: 28px 32px 32px;
}
.modal--share .modal__panel {
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  border: 2px solid var(--color-ink);
  padding: 28px;
  box-shadow: var(--shadow-y-lg);
}
.modal__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.modal__head h2 {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.005em;
  font-size: clamp(22px, 2.5vw, 28px);
  margin: 0;
}
.modal--share .modal__head { gap: 12px; margin-bottom: 8px; }
.modal--share .modal__head h2 { font-size: 18px; letter-spacing: 1px; }

.modal__close {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1.5px solid var(--color-line);
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-ink);
  transition: background 120ms, color 120ms;
  flex-shrink: 0;
}
.modal__close:hover { background: var(--color-ink); color: var(--color-paper); }
.modal--share .modal__close {
  width: 32px; height: 32px;
  border-color: var(--color-ink);
}

.modal__actions {
  display: flex; justify-content: flex-end;
}
.modal--share .modal__actions {
  flex-wrap: wrap; gap: 12px;
  align-items: center;
  justify-content: flex-start;
  margin-top: 22px;
}

/* Mobile: every modal goes edge-to-edge full-screen so the dialog sits
   comfortably in the phone viewport instead of as a windowed card with
   cropped chrome. 100dvh handles the iOS dynamic viewport (URL bar
   show/hide). The bottom padding bumps past the iOS home-indicator
   safe area when present. */
@media (max-width: 640px) {
  .modal { padding: 0; }
  .modal__panel,
  .modal--share .modal__panel {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border: none;
    outline: none;
    box-shadow: none;
    padding: 24px 20px max(20px, env(safe-area-inset-bottom));
  }
  .modal__actions .btn { width: 100%; }
}

/* === Info-pattern (methodology utility-type explainer) inner content === */
.info-modal__body-text {
  font-size: 16px; line-height: 1.55;
  color: var(--color-ink);
  margin: 0 0 24px;
}
.info-modal__compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}
.info-modal__col {
  background: var(--color-paper-alt);
  border-radius: var(--radius-sm);
  padding: 20px;
}
.info-modal__col-title {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase;
  font-size: 22px; letter-spacing: 0.04em;
  color: var(--color-orange);
  margin: 0 0 4px;
}
.info-modal__col-sub {
  font-size: 12px; letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-mute);
  font-weight: 600;
  margin: 0 0 14px;
}
.info-modal__list {
  list-style: disc;
  padding-left: 18px;
  margin: 0 0 14px;
}
.info-modal__list li {
  font-size: 14px; line-height: 1.5;
  margin-bottom: 6px;
}
.info-modal__examples {
  font-size: 13px; line-height: 1.5;
  color: var(--color-mute);
  margin: 0;
}
.info-modal__examples strong { color: var(--color-ink); }
@media (max-width: 640px) {
  .info-modal__compare { grid-template-columns: 1fr; gap: 16px; }
}

/* Mobile collapse for the table — switches to a card-style stack */
@media (max-width: 760px) {
  .meth-table thead { display: none; }
  .meth-table, .meth-table tbody, .meth-table tr, .meth-table td { display: block; width: 100%; }
  .meth-table tbody tr {
    padding: 16px;
    border-bottom: 1px solid var(--color-line);
  }
  .meth-table tbody tr:nth-child(even) td { background: transparent; }
  .meth-table tbody td {
    padding: 4px 0;
    border-bottom: none;
  }
}

/* Frame holds the scaled-down card preview. Card itself is at 1080×1080 native. */
.share-card-frame {
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-line);
  background: var(--color-paper);
}
.share-card {
  width: 1080px;
  height: 1080px;
  transform-origin: top left;
  /* JS sets `--share-scale` on .share-card based on frame width / 1080. */
  transform: scale(var(--share-scale, 1));
  background: var(--color-paper);
  padding: 88px;
  font-family: var(--font-body);
  color: var(--color-ink);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.share-card__kicker {
  display: flex; align-items: center; justify-content: flex-start; gap: 18px;
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase;
  font-size: 30px; letter-spacing: 0.14em;
  color: var(--color-teal);
}
.share-card__logo {
  height: 240px; width: auto;
  flex-shrink: 0; display: block;
  margin-left: 0;
}
.share-card__headline {
  font-family: var(--font-display); font-weight: 700;
  font-size: 84px;
  line-height: 0.98;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 64px 0 0;
}
.share-card__amount {
  color: var(--color-orange);
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, transparent 68%, rgba(244,180,0,0.55) 68%);
  padding: 0 0.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.share-card__sub {
  font-family: var(--font-body);
  font-size: 32px;
  line-height: 1.4;
  color: var(--color-ink);
  margin: 28px 0 0;
}
.share-card__sub strong {
  font-weight: 700;
}

.share-card__footer {
  margin-top: auto;
  padding-top: 40px;
  display: flex; flex-direction: column;
  gap: 18px;
}
.share-card__disclaimer {
  font-family: var(--font-body);
  font-size: 32px;
  line-height: 1.4;
  color: var(--color-mute);
  margin: 0;
  max-width: 60ch;
}
.share-card__url {
  font-family: var(--font-body);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-ink);
  margin: 0;
}

/* ============ 404 / ERROR PAGE ============ */
.error-page {
  padding: clamp(72px, 10vw, 160px) 0 clamp(64px, 8vw, 120px);
  position: relative;
}
.error-page__inner {
  max-width: 720px;
}
.error-page__code {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(120px, 18vw, 220px);
  line-height: 0.9;
  letter-spacing: -0.005em;
  color: var(--color-orange);
  /* Dropped tactile shadow echoes the brand button treatment so the 404 feels
     like an extension of the design system, not a generic web error. */
  text-shadow: 8px 8px 0 var(--color-ink);
  margin-bottom: 32px;
}
.error-page__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--color-ink);
  margin: 0 0 20px;
}
.error-page__lede {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--color-mute);
  margin: 0 0 36px;
  max-width: 50ch;
}

/* ============ FOOTER ============ */
.site-footer {
  margin-top: 96px;
  padding: 48px 0 32px;
  background: var(--color-ink);
  color: var(--color-paper);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  align-items: start;
}
.site-footer__poweredby {
  display: flex; align-items: center; gap: 16px;
}
.site-footer__poweredby-label {
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(250,250,247,0.5);
  margin-bottom: 4px;
}
.site-footer__poweredby-name {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 18px;
  text-transform: uppercase; color: var(--color-yellow);
  letter-spacing: 0.05em;
}
.site-footer__poweredby-name a {
  display: inline-flex; align-items: center; gap: 8px;
  color: inherit;
  text-decoration: none;
  transition: opacity 120ms;
}
.site-footer__poweredby-name a:hover { opacity: 0.85; }
.icon--bolt-footer { width: 18px; height: 18px; fill: var(--color-yellow); }
.site-footer__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 32px;
  font-size: 14px;
  /* On a single column at narrow viewports the four links read fine stacked. */
}
@media (max-width: 480px) {
  .site-footer__links { grid-template-columns: 1fr; }
}
.site-footer__links a {
  color: rgba(250,250,247,0.7);
  text-decoration: none;
  /* Keep "Public Power San Diego ↗" on a single line so the arrow doesn't
     orphan onto its own line at narrow column widths. */
  white-space: nowrap;
}
.site-footer__links a:hover { color: var(--color-yellow); }
.site-footer__legal {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 32px; padding-top: 20px;
  font-size: 12px; color: rgba(250,250,247,0.5);
}

/* Tablet — collapse hero grid to single column */
@media (max-width: 960px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .leaderboard__panel { box-shadow: 6px 6px 0 var(--color-yellow); }
  .input-card { padding: 32px; box-shadow: 8px 8px 0 var(--color-teal); }
  .cta { padding: 56px 0 72px; }
}

/* Mobile */
@media (max-width: 640px) {
  .site-header__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-block: 14px;
  }
  .nav { gap: 22px; flex-wrap: wrap; width: 100%; }
  .nav a { font-size: 12px; letter-spacing: 1.2px; }
  .wordmark { gap: 12px; }
  .wordmark__logo { width: 56px; height: 56px; }
  .wordmark__org { font-size: 15px; }
  .wordmark__tool { font-size: 12px; }

  .hero { padding: 40px 0 48px; }
  .input-card { padding: 24px; box-shadow: 4px 4px 0 var(--color-teal); }
  .input-row { flex-direction: column; }
  .input-unit--solid { min-width: 0; padding: 14px 18px; }
  .input-field--display { font-size: clamp(40px, 14vw, 56px); padding: 18px 20px; }
  .chart { padding: 16px; }
  .bar { grid-template-columns: 90px 1fr 64px; gap: 8px; }
  .bar__chevron { display: none; }
  .bar__city { font-size: 12px; line-height: 1.05; }
  .bar__utility { font-size: 10px; margin-top: 2px; }
  .bar__value { font-size: 14px; }
  .bar__delta { font-size: 10px; }
  .bar__details-grid { grid-template-columns: 1fr; gap: 24px; }
  .vs-delta { font-size: 28px; }
  .meth-page-title { font-size: clamp(32px, 9vw, 60px); }
  .meth-section__title { font-size: clamp(24px, 6vw, 36px); }
  .result-hero__headline { font-size: clamp(32px, 8vw, 56px); }
  .result-hero { padding: 24px; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .leaderboard__panel { padding: 22px 20px 18px; box-shadow: var(--shadow-y-sm); }
  .lb-row { grid-template-columns: 28px 1fr auto; gap: 10px; padding: 11px 0; }
  .lb-row__city { font-size: 15px; }
  .lb-row__utility { display: block; margin-left: 0; margin-top: 2px; }
  .lb-row__value { font-size: 19px; }
  .trust { gap: 10px 20px; }
  .trust li { font-size: 13px; }
  .btn-row .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}