/* 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;
}

html { scroll-behavior: smooth; }

/* Standalone preview only — adds the slate background to <body> so the page
   chrome matches the wrapper. WordPress embeds DON'T add this class; the
   theme owns the body element. Toggle by adding class="ppsd-page" to <body>
   on standalone files (act.html, signed.html). */
body.ppsd-page {
  margin: 0;
  background: var(--color-slate);
}

/* Everything below is scoped to .ppsd-letter so it cannot collide with a
   host (WordPress theme) stylesheet. Browser support: Chrome 118+, Safari
   17.4+, Firefox 128+. Top-level @font-face, @keyframes, and :root vars
   above this point remain at top level (they're additive, not collision-
   prone). */
/* @OLDscope removed for browser compat */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Wrapper itself — was the `body` rule before scoping, plus the .al-body
   slate-look additions. Acts as the page surface in standalone and as the
   isolated block surface in WordPress. */
:scope {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-paper);
  background: var(--color-slate);
  -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,
.al-modal__kicker,
.leaderboard__kicker,
.hero__kicker,
.result-hero__kicker,
.result-hero__verify-label,
.results-cta__kicker,
.action-card__kicker,
.al-kicker,
.meth-section__num,
.meth-section__sub,
.meth-card__label,
.al-form-card__sub,
.al-field label,
.al-progress__live,
.advanced summary,
.disclaimer__title,
.detail__heading,
.al-demands__label,
.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); }

/* ============ ACTION-LETTER PAGE (act.html) ============ */
/* The slate background + paper color is set on the wrapper :scope rule at
   the top of this stylesheet (was .al-body before WordPress scoping). */

.al-main {
  position: relative;
  padding: clamp(48px, 6vw, 96px) 0 clamp(40px, 5vw, 72px);
  overflow: hidden;
}
/* The wrapper + main + footer stretch to viewport height on standalone so
   the slate watermarks don't read as a "footer strip" below shorter pages.
   In WP this is a no-op since the wrapper is sized by content within the
   theme's layout. */
:scope { min-height: 100vh; display: flex; flex-direction: column; }
:scope .al-main { flex: 1 0 auto; }
/* Oversized bolt watermark in bottom-right — slightly lifted opacity so it
   reads against the teal-ink bg without competing with content. */
.al-bg-bolt {
  position: absolute;
  right: -8%; bottom: -10%;
  width: 56vw; max-width: 880px;
  opacity: 0.05;
  transform: rotate(-12deg);
  pointer-events: none;
  z-index: 0;
}
.al-bg-bolt svg { width: 100%; height: auto; fill: var(--color-yellow); display: block; }
/* Two orange radial glows that frame the page — one bottom-left, one
   top-right. Larger radius + slightly higher opacity than the original so
   the page feels more atmospheric, less flat. */
.al-bg-glow {
  position: absolute;
  left: -18%; bottom: -28%;
  width: 90vw; height: 90vw; max-width: 1100px; max-height: 1100px;
  background: radial-gradient(closest-side, rgba(249, 92, 32, 0.28), transparent 75%);
  pointer-events: none;
  z-index: 0;
}
.al-bg-glow--tr {
  /* Override left/bottom so this one sits in the top-right. */
  left: auto; bottom: auto;
  right: -16%; top: -24%;
  width: 70vw; height: 70vw; max-width: 880px; max-height: 880px;
  background: radial-gradient(closest-side, rgba(244, 180, 0, 0.18), transparent 72%);
}

.al-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}
@media (max-width: 860px) {
  .al-grid { grid-template-columns: 1fr; gap: 56px; }
}

/* --- Pitch column --- */
.al-pitch { min-width: 0; }
.al-kicker {
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--color-yellow);
  margin-bottom: 24px;
}
.al-headline {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin: 0 0 32px;
  color: var(--color-paper);
  text-wrap: balance;
}
.al-headline__emph {
  color: var(--color-yellow);
  /* Highlighter swipe across the bottom third of the letterforms. Orange is
     softened to ~60% opacity so the yellow text reads cleanly above it
     instead of fighting it for contrast. box-decoration-break so each visual
     wrap gets its own swipe rather than one giant rectangle. */
  background: linear-gradient(180deg,
    transparent 60%,
    rgba(249, 92, 32, 0.6) 60%,
    rgba(249, 92, 32, 0.6) 96%,
    transparent 96%);
  padding: 0 0.06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.al-headline__period { color: var(--color-paper); }

.al-subhead {
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.45;
  color: rgba(250, 250, 247, 0.85);
  margin: 0 0 36px;
  max-width: 32ch;
}

/* --- Progress component (built to be the second-most-prominent element
       on the page, after the headline). --- */
.al-progress {
  background: rgba(250, 250, 247, 0.05);
  border-left: 6px solid var(--color-yellow);
  border-radius: var(--radius-sm);
  padding: 22px 26px;
  margin-bottom: 28px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.al-progress__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.al-progress__num-block {
  display: flex; flex-direction: column;
  min-width: 0;
}
/* Pulsing "Live count" indicator — signals that the number is real and
   updates as people sign. Pulse is subtle so it doesn't distract. */
.al-progress__live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px;
  letter-spacing: 1.6px;
  color: var(--color-green);
  margin-bottom: 4px;
}
.al-progress__live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-green);
  box-shadow: 0 0 0 0 rgba(93, 184, 91, 0.55);
  animation: al-pulse 1800ms ease-out infinite;
}
@keyframes al-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(93, 184, 91, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(93, 184, 91, 0); }
  100% { box-shadow: 0 0 0 0 rgba(93, 184, 91, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .al-progress__live-dot { animation: none; }
}
.al-progress__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 5vw, 56px);
  line-height: 0.95;
  letter-spacing: 0.005em;
  color: var(--color-yellow);
  font-variant-numeric: tabular-nums;
}
.al-progress__num-label {
  font-size: 14px;
  color: rgba(250, 250, 247, 0.7);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.al-progress__pct {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-yellow);
  font-variant-numeric: tabular-nums;
}
.al-progress__track {
  position: relative;
  height: 14px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
.al-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-yellow), var(--color-orange));
  border-radius: 999px;
  transition: width 1400ms cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 0 12px rgba(244, 180, 0, 0.55);
}
.al-progress__detail {
  font-size: 14px;
  color: rgba(250, 250, 247, 0.78);
  margin: 0;
}
.al-progress__detail strong { color: var(--color-yellow); font-weight: 700; }

/* Disclosure links — text buttons */
.al-disclosure {
  display: flex; flex-wrap: wrap; gap: 24px;
  margin-top: 4px;
}
.al-disclosure__link {
  background: transparent; border: 0; padding: 0;
  font-family: var(--font-body); font-weight: 600;
  font-size: 15px;
  color: var(--color-paper);
  text-decoration: underline;
  text-decoration-color: var(--color-yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color 120ms;
}
.al-disclosure__link:hover { color: var(--color-yellow); }
.al-disclosure__link:focus-visible {
  outline: 2px solid var(--color-yellow);
  outline-offset: 4px;
  border-radius: 2px;
}

/* --- Form card --- */
.al-form-card {
  position: relative;
  background: var(--color-paper);
  border-radius: 4px;
  padding: clamp(24px, 3vw, 36px);
  /* Push the form down on desktop so it visually anchors next to the headline
     and counter rather than floating above the headline's first line. */
  margin-top: clamp(0px, 6vw, 80px);
  /* Drop shadow + 10px solid yellow offset for poster feel. */
  box-shadow:
    10px 10px 0 var(--color-yellow),
    0 24px 48px rgba(0, 0, 0, 0.4);
  /* Faint yellow halo border, set 10px out via outline. */
  outline: 1px solid rgba(244, 180, 0, 0.35);
  outline-offset: 10px;
  color: var(--color-ink);
}
@media (max-width: 860px) {
  .al-form-card { margin-top: 0; }
}
.al-form-card__head {
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 2px dashed var(--color-line);
}
.al-form-card__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.al-form-card__sub {
  font-size: 12px;
  letter-spacing: 1.2px;
  color: var(--color-mute);
  margin-top: 4px;
}

.al-form { display: flex; flex-direction: column; gap: 16px; }
/* Restore the [hidden] attribute's default display:none, which our flex
   declaration above would otherwise override. */
.al-form[hidden] { display: none; }
.al-field { display: flex; flex-direction: column; }
.al-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) {
  .al-field-row { grid-template-columns: 1fr; }
}
.al-field label {
  font-size: 11px;
  letter-spacing: 1.2px;
  color: var(--color-mute);
  margin-bottom: 6px;
}
.al-field input {
  font-family: var(--font-body); font-weight: 500;
  font-size: 16px;
  padding: 14px 14px;
  border: 1.5px solid var(--color-line);
  border-radius: 2px;
  background: var(--color-paper);
  color: var(--color-ink);
  transition: border-color 120ms, box-shadow 120ms;
}
.al-field input:focus {
  outline: none;
  border-color: var(--color-ink);
  box-shadow: 0 0 0 3px rgba(244, 180, 0, 0.45);
}

.al-submit {
  position: relative;
  margin-top: 8px;
  width: 100%;
  padding: 20px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--color-paper);
  background: var(--color-orange);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  /* Tactile press: solid orange-dark "shadow" beneath. */
  box-shadow: 0 4px 0 var(--color-orange-dark);
  transition: transform 80ms, box-shadow 80ms;
}
.al-submit:hover { background: #ff6a31; }
.al-submit:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--color-orange-dark);
}
.al-submit:focus-visible {
  outline: 3px solid var(--color-yellow);
  outline-offset: 3px;
}
/* Briefly shown post-submit so the click feels "completed" before the form
   is swapped out for the inline thanks state and the modal appears. */
.al-submit--success {
  background: var(--color-green);
  box-shadow: 0 4px 0 var(--color-green-dark);
  cursor: default;
}
.al-submit--success:hover { background: var(--color-green); }

.al-form__trust {
  text-align: center;
  font-size: 12px;
  color: var(--color-mute);
  margin: 4px 0 0;
}
.al-form__error {
  background: rgba(249, 92, 32, 0.12);
  border-left: 3px solid var(--color-orange);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--color-ink);
}

/* Inline thanks state — small, replaces the form after submit. The richer
   share moment lives in the success modal that opens automatically; if the
   user dismisses that modal, the link in this block reopens it. */
.al-form-thanks {
  text-align: center;
  padding: 8px 0;
  animation: al-success-in 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes al-success-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.al-form-thanks__check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  background: var(--color-green);
  color: var(--color-paper);
  border-radius: 50%;
  margin-bottom: 16px;
}
.al-form-thanks__check svg { width: 28px; height: 28px; }
.al-form-thanks__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(24px, 3vw, 32px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 0 0 8px;
  color: var(--color-ink);
}
.al-form-thanks__sub {
  font-size: 15px;
  color: var(--color-mute);
  line-height: 1.5;
  margin: 0 0 16px;
  max-width: 36ch;
  margin-left: auto;
  margin-right: auto;
}
.al-form-thanks__link {
  background: transparent; border: 0; padding: 0;
  font-family: var(--font-body); font-weight: 600;
  font-size: 14px;
  color: var(--color-teal);
  text-decoration: underline;
  cursor: pointer;
}
.al-form-thanks__link:hover { color: var(--color-teal-dark); }

/* Wider variant of the modal panel — has more horizontal room than the
   letter / why modals so the 1080×1080 share card scales to a meaningful
   preview size. Used on the act-page success modal. */
.modal__panel--wide {
  width: min(640px, 100%);
  padding: 32px clamp(20px, 4vw, 32px) clamp(20px, 4vw, 32px);
}
.al-success-head {
  text-align: center;
  margin-bottom: 18px;
}
.al-success-head__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3.6vw, 38px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 0 0 8px;
  color: var(--color-ink);
}
.al-success-head__sub {
  font-size: 15px;
  color: var(--color-mute);
  line-height: 1.5;
  margin: 0 auto;
  max-width: 40ch;
}
.al-success-head__sub strong { color: var(--color-ink); font-weight: 700; }

/* The shareable card. Native 1080×1080 like the calc share card; CSS scale
   transform shrinks it to fit the form-card frame. JS resets the transform
   when capturing with html-to-image so the PNG comes out at full resolution. */
.al-share-frame {
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-line);
  background: var(--color-charcoal);
  margin-bottom: 18px;
}
.al-share-card {
  width: 1080px; height: 1080px;
  transform-origin: top left;
  /* JS sets `--al-share-scale` based on frame width / 1080. */
  transform: scale(var(--al-share-scale, 1));
  background: var(--color-charcoal);
  color: var(--color-paper);
  padding: 88px;
  font-family: var(--font-body);
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}
/* Decorative orange glow in bottom-left of share card — matches the page bg
   accent so the card reads as a clipped slice of the page. */
.al-share-card::before {
  content: "";
  position: absolute;
  left: -120px; bottom: -120px;
  width: 600px; height: 600px;
  background: radial-gradient(closest-side, rgba(249, 92, 32, 0.22), transparent 70%);
  pointer-events: none;
}
.al-share-card__kicker {
  position: relative; z-index: 1;
}
.al-share-card__logo {
  height: 200px; width: auto;
  display: block;
}
.al-share-card__headline {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-weight: 700;
  font-size: 96px;
  line-height: 0.96;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--color-paper);
  margin: 80px 0 0;
}
.al-share-card__emph {
  color: var(--color-yellow);
  background: linear-gradient(180deg,
    transparent 60%,
    rgba(249, 92, 32, 0.7) 60%,
    rgba(249, 92, 32, 0.7) 96%,
    transparent 96%);
  padding: 0 0.06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.al-share-card__count {
  position: relative; z-index: 1;
  font-family: var(--font-body);
  font-size: 36px;
  line-height: 1.35;
  margin: 56px 0 0;
  color: rgba(250, 250, 247, 0.85);
}
.al-share-card__count strong {
  color: var(--color-yellow);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  letter-spacing: 0.005em;
  margin-right: 4px;
}
.al-share-card__footer {
  position: absolute;
  left: 88px; right: 88px; bottom: 88px;
  z-index: 1;
}
.al-share-card__url {
  font-family: var(--font-body);
  font-size: 32px;
  line-height: 1.35;
  color: var(--color-paper);
  margin: 0 0 16px;
}
.al-share-card__url strong {
  color: var(--color-yellow);
  font-weight: 700;
}
.al-share-card__disclaimer {
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1.4;
  color: rgba(250, 250, 247, 0.55);
  margin: 0;
  max-width: 50ch;
}

/* Share action buttons */
.al-share-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.al-share-btn {
  flex: 1 1 auto;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  background: transparent;
  color: var(--color-ink);
  border: 1.5px solid var(--color-ink);
  border-radius: 2px;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.al-share-btn:hover { background: var(--color-ink); color: var(--color-paper); }
.al-share-btn:focus-visible {
  outline: 3px solid var(--color-yellow);
  outline-offset: 2px;
}
.al-share-btn--primary {
  background: var(--color-ink);
  color: var(--color-paper);
}
.al-share-btn--primary:hover {
  background: var(--color-charcoal);
}
.al-share-btn--copied {
  background: var(--color-green);
  color: var(--color-paper);
  border-color: var(--color-green);
}
.al-share-btn--copied:hover {
  background: var(--color-green-dark);
  border-color: var(--color-green-dark);
}

/* --- signed.html page header — sits on the dark slate, so title text is
       paper-colored and sub is paper at lower opacity. The .action-cards
       below carry their own paper-alt background and dark interior text. --- */
.al-signed-head {
  margin: clamp(32px, 5vw, 64px) 0 clamp(48px, 7vw, 80px);
  color: var(--color-paper);
}
.al-signed-head__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(64px, 11vw, 128px);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin: 0 0 20px;
  color: var(--color-paper);
}
.al-signed-head__sub {
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.5;
  color: rgba(250, 250, 247, 0.8);
  margin: 0;
  max-width: 50ch;
}
.al-signed-head__sub strong { color: var(--color-yellow); font-weight: 700; }

/* Three-up variant of the action-cards grid (default is 2-up). Falls back
   to one column on narrow viewports so each card keeps room to breathe. */
.action-cards--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .action-cards--three { grid-template-columns: 1fr; }
}

.btn.btn--copied {
  background: var(--color-green);
  color: var(--color-paper);
  border-color: var(--color-ink);
}

/* --- Letter modal — pattern-specific content (kicker, title, body, demands,
       footer, cta). Outer scaffolding (positioning, backdrop, panel chrome,
       close) is shared via the unified .modal classes further down. --- */
.al-modal__kicker {
  font-size: 11px; letter-spacing: 1.6px;
  color: var(--color-mute);
  margin-bottom: 10px;
}
.al-modal__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(22px, 2.6vw, 28px);
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: 0.005em;
  margin: 0 0 18px;
}
.al-modal__body p {
  font-size: 15px; line-height: 1.6;
  margin: 0 0 14px;
}
.al-modal__body p:last-child { margin-bottom: 0; }
.al-modal__close-line {
  margin-top: 20px;
  font-size: 14px;
  color: var(--color-mute);
}
.al-modal__close-line em { font-style: italic; }

/* Demands callout inside the letter modal */
.al-demands {
  background: var(--color-teal-50);
  border-left: 4px solid var(--color-teal);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  margin: 18px 0;
}
.al-demands__label {
  font-size: 11px; letter-spacing: 1.4px;
  color: var(--color-teal-ink);
  margin-bottom: 10px;
}
.al-demands__list {
  list-style: none;
  counter-reset: al-demand;
  padding: 0;
  margin: 0;
  display: flex; flex-direction: column;
  gap: 12px;
}
.al-demands__list li {
  counter-increment: al-demand;
  position: relative;
  padding-left: 38px;
  font-size: 14px;
  line-height: 1.55;
}
.al-demands__list li::before {
  content: counter(al-demand);
  position: absolute;
  left: 0; top: 0;
  width: 24px; height: 24px;
  background: var(--color-teal);
  color: var(--color-paper);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
}
.al-demands__list li strong {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
/* When demands are bare phrases (no supporting body), drop the trailing
   margin so the list reads tight. */
.al-demands__list--simple li {
  display: flex; align-items: center;
  min-height: 24px;
}
.al-demands__list--simple li strong {
  margin-bottom: 0;
  font-size: 14px;
}

.al-modal__footer {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--color-line);
  display: flex; justify-content: flex-end;
}
.al-modal__cta {
  background: var(--color-orange);
  color: var(--color-paper);
  border: 0;
  padding: 14px 22px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 120ms;
}
.al-modal__cta:hover { background: var(--color-orange-dark); }
.al-modal__cta:focus-visible {
  outline: 3px solid var(--color-yellow);
  outline-offset: 2px;
}

/* --- Footer (transparent, sits on the slate page bg) --- */
.al-footer {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  padding: 0 0 clamp(20px, 2.5vw, 32px);
}
.al-footer__inner {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 36px);
  padding-top: clamp(12px, 1.5vw, 20px);
}
.al-footer__logo {
  height: 110px;
  width: auto;
  flex-shrink: 0;
  display: block;
}
.al-footer__text {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(250, 250, 247, 0.55);
  margin: 0;
  max-width: 60ch;
}
@media (max-width: 640px) {
  .al-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .al-footer__logo { height: 88px; }
}
/* 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--letter — heavy chrome: yellow top accent + halo outline + deep
                      drop shadow + entry animation; close anchored top-right
                      so a long scrolling letter doesn't push it offscreen.
                      Used on act.html (open letter, why-this-matters,
                      success). */
.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--letter .modal__backdrop {
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.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--letter .modal__panel {
  width: min(580px, 100%);
  max-height: 88vh;
  border-radius: var(--radius-sm);
  border-top: 4px solid var(--color-yellow);
  outline: 1px solid rgba(244, 180, 0, 0.35);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  padding: 32px clamp(20px, 4vw, 36px);
  animation: modal-letter-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes modal-letter-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.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); }
/* Letter pattern places the close in the upper-right corner of the panel —
   the panel scrolls and the close stays anchored. Other patterns put the
   close inside the flex header alongside the title. */
.modal--letter .modal__close {
  position: absolute;
  top: 14px; right: 14px;
}
.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,
  .modal--letter .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));
  }
  /* Letter keeps its yellow top accent — brand cue carries through. */
  .modal--letter .modal__panel {
    border-top: 4px solid var(--color-yellow);
  }
  /* Anchor the absolute close button to the now-edge-to-edge corner. */
  .modal--letter .modal__close { top: 14px; right: 14px; }
  .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; }
}

/* end of former @OLDscope block */