/* SolarPrograms.com : Main Styles
   Import tokens.css first.
   All colours, sizes, and weights use CSS vars from tokens.css.
   No hardcoded hex values below this line.
   No em dashes in comments or copy.
*/

/* ============================================================
   RESET + BASE
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: var(--leading-normal);
  color: var(--ink);
  background: var(--bg);
  overflow-x: clip;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* Skip link */
.skip-link {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: var(--z-toast);
  padding: var(--sp-3) var(--sp-6);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: var(--step--1);
  border-radius: var(--r-sm);
  transform: translateY(-200%);
  transition: transform var(--dur-micro) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */

.wrap {
  width: min(100%, var(--maxw));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: clamp(var(--sp-16), 8vw, var(--sp-32));
}

.section + .section {
  border-top: 1px solid var(--line);
}

.section--tinted { background: var(--bg-2); }
/* section--dark repurposed: forest green (not black) accent band */
.section--dark {
  background: var(--accent);
  color: var(--ivory);
  border-top: none;
}

/* ============================================================
   HEADER + NAV
   ============================================================ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  height: var(--header-h);
}

/* Blur lives on ::before so it does not trap fixed children */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.90);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur-state) var(--ease-out);
}

.site-header.scrolled::before {
  box-shadow: var(--shadow-sm);
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  height: var(--header-h);
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  flex-shrink: 0;
}

.logo-dot { color: var(--accent); }

/* Desktop nav */
.nav-list {
  display: none;
  align-items: center;
  gap: var(--sp-1);
  margin-left: auto;
}

@media (min-width: 768px) {
  .nav-list {
    display: flex;
  }
}

.nav-list a {
  position: relative;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink-2);
  border-radius: var(--r-sm);
  transition: color var(--dur-micro) var(--ease-out);
}

/* Accent underline draws in from left */
.nav-list a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: var(--sp-4);
  right: var(--sp-4);
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-state) var(--ease-out);
}

@media (hover: hover) {
  .nav-list a:hover { color: var(--ink); }
  .nav-list a:hover::after { transform: scaleX(1); }
}

.nav-list a[aria-current="page"],
.nav-list a.active {
  color: var(--accent);
}
.nav-list a[aria-current="page"]::after,
.nav-list a.active::after {
  transform: scaleX(1);
}

/* CTA in header */
.btn-cta-sm {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--step--1);
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  border-radius: var(--r-full);
  transition: background var(--dur-micro) var(--ease-out), transform var(--dur-micro);
  white-space: nowrap;
}

@media (min-width: 900px) {
  .btn-cta-sm { display: flex; }
}

@media (hover: hover) {
  .btn-cta-sm:hover { background: var(--accent-mid); transform: translateY(-1px); }
}
.btn-cta-sm:active { transform: scale(0.97); }

/* Mobile menu button */
.menu-btn {
  --size: 44px;
  --pitch: 6px;
  --bar-w: 22px;
  --bar-h: 2px;
  --dot: 6px;
  --orbit: 18px;
  position: relative;
  width: var(--size);
  height: var(--size);
  padding: 0;
  border-radius: 50%;
  color: var(--ink);
  margin-left: auto;
}

@media (min-width: 768px) {
  .menu-btn { display: none; }
}

.menu-btn__bar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--bar-w);
  height: var(--bar-h);
  margin: calc(var(--bar-h) / -2) 0 0 calc(var(--bar-w) / -2);
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-state) var(--ease-out), opacity var(--dur-micro);
}

.menu-btn__bar:nth-child(1) { transform: translateY(calc(var(--pitch) * -1)); }
.menu-btn__bar:nth-child(3) { transform: translateY(var(--pitch)); }

.menu-btn::before,
.menu-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--dot);
  height: var(--dot);
  margin: calc(var(--dot) / -2) 0 0 calc(var(--dot) / -2);
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transform: translateX(0) scale(0);
  transition: transform 0.55s var(--ease-spring), opacity var(--dur-micro);
}

.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(1) { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(2) { transform: scaleX(0); opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(3) { transform: rotate(-45deg); }
.menu-btn[aria-expanded="true"]::before { opacity: 1; transform: translateX(calc(var(--orbit) * -1)) scale(1); transition-delay: 0.1s; }
.menu-btn[aria-expanded="true"]::after  { opacity: 1; transform: translateX(var(--orbit)) scale(1); transition-delay: 0.1s; }

/* Mobile nav panel */
.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-header) - 1);
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--sp-2);
  clip-path: circle(0% at calc(100% - 38px) 30px);
  transition: clip-path 0.5s var(--ease-out);
  pointer-events: none;
}

.mobile-nav.open {
  clip-path: circle(150% at calc(100% - 38px) 30px);
  pointer-events: all;
}

.mobile-nav a {
  display: block;
  padding: var(--sp-4) var(--sp-8);
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: var(--tracking-tight);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-state) var(--ease-out),
              transform var(--dur-state) var(--ease-out),
              color var(--dur-micro);
}

.mobile-nav.open a {
  opacity: 1;
  transform: translateY(0);
}
.mobile-nav.open a:nth-child(1) { transition-delay: 80ms; }
.mobile-nav.open a:nth-child(2) { transition-delay: 130ms; }
.mobile-nav.open a:nth-child(3) { transition-delay: 180ms; }
.mobile-nav.open a:nth-child(4) { transition-delay: 230ms; }
.mobile-nav.open a:nth-child(5) { transition-delay: 280ms; }

@media (hover: hover) {
  .mobile-nav a:hover { color: var(--accent); }
}

.mobile-nav .mobile-cta {
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-10);
  background: var(--accent);
  color: #fff;
  border-radius: var(--r-full);
  font-size: var(--step-1);
  font-weight: 700;
}

/* ============================================================
   PAGE BODY OFFSET (for fixed header)
   ============================================================ */

.page-body { padding-top: var(--header-h); }

/* ============================================================
   ALERT BANNER
   ============================================================ */

.alert-banner {
  background: var(--accent-pale);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-3) var(--gutter);
  text-align: center;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--accent-dim);
}

.alert-banner strong { font-weight: 700; }

/* ============================================================
   HERO
   ============================================================ */

.hero {
  padding-block: clamp(var(--sp-16), 10vw, var(--sp-32)) clamp(var(--sp-12), 7vw, var(--sp-24));
  text-align: center;
}

.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  margin-bottom: var(--sp-5);
}

.hero .eyebrow::before {
  content: "";
  display: block;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

.hero h1 {
  font-size: var(--step-5);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  max-width: 14ch;
  margin-inline: auto;
  margin-bottom: var(--sp-6);
}

.hero h1 em {
  font-style: normal;
  color: var(--accent);
}

.hero .hero-sub {
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--ink-2);
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: var(--sp-10);
}

/* State selector */
.state-picker {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: 420px;
  margin-inline: auto;
  flex-wrap: wrap;
  justify-content: center;
}

.state-picker select {
  flex: 1;
  min-width: 200px;
  padding: var(--sp-4) var(--sp-5);
  font: 600 var(--step-0)/1 var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234a4a4a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  padding-right: var(--sp-10);
  cursor: pointer;
  transition: border-color var(--dur-micro);
}

.state-picker select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(26,107,60,0.15); }

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-8);
  font: 700 var(--step-0)/1 var(--font-sans);
  color: #fff;
  background: var(--accent);
  border-radius: var(--r-md);
  transition: background var(--dur-micro) var(--ease-out),
              transform var(--dur-micro),
              box-shadow var(--dur-micro);
  position: relative;
  overflow: hidden;
}

/* Colour sweep from bottom on hover */
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-mid);
  transform: translateY(100%);
  transition: transform var(--dur-state) var(--ease-out);
}

@media (hover: hover) {
  .btn-primary:hover::before { transform: translateY(0); }
  .btn-primary:hover .btn-arrow { transform: translateX(4px); }
  .btn-primary:hover { box-shadow: var(--shadow-md); }
}

.btn-primary:active { transform: scale(0.97); }

.btn-primary span,
.btn-primary .btn-arrow { position: relative; }

.btn-arrow {
  transition: transform var(--dur-state) var(--ease-out);
}

/* ============================================================
   STATS BAR
   ============================================================ */

.stats-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg);
  box-shadow: var(--shadow-sm);
  margin-block: clamp(var(--sp-12), 6vw, var(--sp-20));
}

.stat-item {
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stat-item:last-child { border-right: none; }

@media (max-width: 599px) {
  .stat-item { border-right: none; }
  .stat-item:last-child { border-bottom: none; }
}

.stat-value {
  font-size: var(--step-4);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--accent);
  line-height: 1;
  margin-bottom: var(--sp-2);
}

.stat-label {
  font-size: var(--step--1);
  color: var(--ink-3);
  font-weight: 500;
  line-height: var(--leading-snug);
}

/* ============================================================
   PROGRAM TYPES GRID
   ============================================================ */

.program-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-10);
}

.program-card {
  padding: var(--sp-8) var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  position: relative;
  transition: transform var(--dur-state) var(--ease-out),
              box-shadow var(--dur-state) var(--ease-out);
}

@media (hover: hover) {
  .program-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }
}

/* Corner accent dot that breathes on hover */
.program-card::before {
  content: "";
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform 0.6s var(--ease-spring);
}

@media (hover: hover) {
  .program-card:hover::before {
    transform: scale(1.6);
  }
}

.program-card h3 {
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--sp-3);
  color: var(--ink);
}

.program-card p {
  font-size: var(--step--1);
  color: var(--ink-2);
  line-height: var(--leading-normal);
  margin-bottom: var(--sp-4);
}

.card-link {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  transition: gap var(--dur-micro);
}

@media (hover: hover) {
  .card-link:hover { gap: var(--sp-2); }
}

.program-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px var(--sp-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  border-radius: var(--r-full);
  background: var(--accent-pale);
  color: var(--accent-dim);
}

.program-badge.expired {
  background: #fde8e8;
  color: var(--danger);
}

/* ============================================================
   STATES GRID (Regional Browse)
   ============================================================ */

.section-header {
  margin-bottom: clamp(var(--sp-8), 4vw, var(--sp-12));
}

.section-header .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  margin-bottom: var(--sp-4);
}

.section-header .eyebrow::before {
  content: "";
  display: block;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

.section-header h2 {
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--ink);
  margin-bottom: var(--sp-4);
}

.section-sub {
  font-size: var(--step-0);
  color: var(--ink-2);
  max-width: 56ch;
}

.region-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--sp-10);
}

.region-group h3 {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}

.state-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.state-list a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink-2);
  transition: background var(--dur-micro), color var(--dur-micro);
}

@media (hover: hover) {
  .state-list a:hover {
    background: var(--accent-pale);
    color: var(--accent-dim);
  }
}

.state-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.state-dot.active   { background: var(--accent); }
.state-dot.inactive { background: var(--line); border: 1px solid var(--ink-3); }

/* ============================================================
   LEAD CAPTURE (light green band, no dark dot grid)
   ============================================================ */

.lead-capture {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

/* Subtle left accent bar */
.lead-capture::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}

.lead-capture-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
  align-items: center;
  text-align: center;
  padding-block: clamp(var(--sp-16), 8vw, var(--sp-24));
}

@media (min-width: 768px) {
  .lead-capture-inner {
    grid-template-columns: 1fr 1fr;
    text-align: left;
  }
}

.lead-capture h2 {
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--ink);
  margin-bottom: var(--sp-4);
}

.lead-capture p {
  font-size: var(--step-0);
  color: var(--ink-2);
  line-height: var(--leading-normal);
}

.lead-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.lead-form select,
.lead-form input {
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  font: var(--step-0)/1 var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--dur-micro);
  appearance: none;
  -webkit-appearance: none;
}

.lead-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234a4a4a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  background-color: var(--bg);
  padding-right: var(--sp-10);
  cursor: pointer;
}

.lead-form select:focus,
.lead-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(26,107,60,0.15);
}

.btn-primary-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-8);
  font: 700 var(--step-0)/1 var(--font-sans);
  color: #fff;
  background: var(--accent);
  border-radius: var(--r-md);
  width: 100%;
  transition: background var(--dur-micro), transform var(--dur-micro);
  position: relative;
  overflow: hidden;
}

@media (hover: hover) {
  .btn-primary-lg:hover { background: var(--accent-mid); }
}
.btn-primary-lg:active { transform: scale(0.97); }

.form-note {
  font-size: var(--step--1);
  color: var(--ink-3);
  text-align: center;
}

@media (min-width: 768px) {
  .form-note { text-align: left; }
}

/* State page form layout */
.lead-form-el {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  position: relative;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}

@media (min-width: 600px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}

.form-field {
  position: relative;
}

.form-field input {
  width: 100%;
  padding: var(--sp-5) var(--sp-4) var(--sp-3);
  font: var(--step-0)/1 var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--dur-micro), box-shadow var(--dur-micro);
  appearance: none;
  -webkit-appearance: none;
}

.form-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(26,107,60,0.15);
}

.form-field label {
  position: absolute;
  left: var(--sp-4);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--step-0);
  color: var(--ink-3);
  pointer-events: none;
  transition: top var(--dur-micro), font-size var(--dur-micro), color var(--dur-micro);
}

.form-field input:not(:placeholder-shown) ~ label,
.form-field input:focus ~ label {
  top: 10px;
  font-size: 11px;
  color: var(--accent);
  transform: none;
}

.form-footer {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.form-disclaimer {
  font-size: 12px;
  color: var(--ink-3);
  line-height: var(--leading-normal);
  text-align: center;
}

.btn-full {
  width: 100%;
  justify-content: center;
}

/* ============================================================
   FOOTER
   Forest green identity: warm, branded, solar-positive.
   Not a dark editorial band. Not Ariaria.
   ============================================================ */

.site-footer {
  background: var(--accent);
  color: var(--ivory);
  padding-block: clamp(var(--sp-12), 5vw, var(--sp-20));
  border-top: none;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
}

@media (min-width: 768px) {
  .footer-inner {
    grid-template-columns: 1.5fr 1fr 1fr;
  }
}

.footer-brand .site-logo { color: var(--ivory); }

.footer-tagline {
  margin-top: var(--sp-4);
  font-size: var(--step--1);
  color: var(--ivory-2);
  line-height: var(--leading-normal);
  max-width: 36ch;
}

.footer-nav h4 {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ivory-2);
  margin-bottom: var(--sp-5);
}

.footer-nav ul { display: flex; flex-direction: column; gap: var(--sp-3); }

.footer-nav a {
  font-size: var(--step--1);
  color: var(--ivory-2);
  transition: color var(--dur-micro);
}

@media (hover: hover) {
  .footer-nav a:hover { color: var(--ivory); }
}

.footer-bottom {
  margin-top: clamp(var(--sp-8), 3vw, var(--sp-12));
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255,255,255,0.18);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  align-items: center;
}

.footer-bottom p {
  font-size: var(--step--1);
  color: var(--ivory-2);
  line-height: var(--leading-normal);
  max-width: 64ch;
}

/* ============================================================
   STATE PAGE SPECIFIC
   Hero: deep forest green with subtle sun-ray radial gradient.
   Stats and text read as ivory on dark, gold accents pop.
   ============================================================ */

.state-hero {
  /* clears the fixed header, then the same breathing room above and below */
  padding-top: calc(var(--header-h) + clamp(var(--sp-10), 5vw, var(--sp-16)));
  padding-bottom: clamp(var(--sp-10), 5vw, var(--sp-16));
  background: var(--bg-dark);   /* flat: the same green as every other dark band */
  color: var(--ivory);
  position: relative;
  overflow: hidden;
}

/* Subtle dot grid texture */
.state-hero::before {
  content: none;
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.state-hero .breadcrumb {
  position: relative;
  font-size: var(--step--1);
  color: var(--ink-3);
  margin-bottom: var(--sp-6);
}

.state-hero .breadcrumb ol {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.state-hero .breadcrumb a {
  color: var(--ivory-2);
  transition: color var(--dur-micro);
}

@media (hover: hover) {
  .state-hero .breadcrumb a:hover { color: var(--ivory); }
}

.state-hero .breadcrumb span { color: var(--ivory-2); }

.state-hero h1 {
  position: relative;
  font-size: var(--step-4);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--ivory);
  margin-bottom: var(--sp-5);
}

.state-hero .state-meta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
  font-size: var(--step--1);
  color: var(--ivory-2);
}

.state-hero .verified-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 3px var(--sp-3);
  background: rgba(26,107,60,0.5);
  color: var(--ivory);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

/* State stats chips: semi-transparent glass style on dark hero */
.state-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}

.stat-chip {
  padding: var(--sp-4) var(--sp-6);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--r-md);
  text-align: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.stat-chip .chip-value {
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--sun);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  margin-bottom: 4px;
}

.stat-chip .chip-label {
  font-size: var(--step--1);
  color: var(--ivory-2);
  font-weight: 500;
}

/* Program sections on state pages */
.program-section {
  padding-block: clamp(var(--sp-10), 5vw, var(--sp-16));
  border-bottom: 1px solid var(--line);
}

.program-section:last-of-type { border-bottom: none; }

.program-section h2 {
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--sp-5);
  color: var(--ink);
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.detail-card {
  padding: var(--sp-5) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-2);
}

.detail-card .detail-label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-3);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: var(--sp-2);
}

.detail-card .detail-value {
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--ink);
  line-height: var(--leading-snug);
}

.detail-card .detail-value.positive { color: var(--accent); }
.detail-card .detail-value.negative { color: var(--danger); }
.detail-card .detail-value.accent   { color: var(--accent); }

/* Prose content in state pages */
.prose {
  font-size: var(--step-0);
  color: var(--ink-2);
  line-height: var(--leading-normal);
  max-width: 68ch;
}

.prose p + p { margin-top: var(--sp-4); }
.prose strong { color: var(--ink); font-weight: 700; }

/* ============================================================
   STATE PAGE: ALERT BANNER INTERNALS
   ============================================================ */

.alert-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
}

.alert-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--accent-dim);
}

/* ============================================================
   STATE PAGE: PROGRAM NAV (in-page jump links)
   ============================================================ */

.program-nav {
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.program-nav::-webkit-scrollbar { display: none; }

.program-nav__list {
  display: flex;
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: nowrap;
}

.program-nav__list a {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  border: 1px solid var(--line);
  background: var(--bg);
  transition: background var(--dur-micro), color var(--dur-micro), border-color var(--dur-micro);
}

@media (hover: hover) {
  .program-nav__list a:hover {
    background: var(--accent-pale);
    color: var(--accent-dim);
    border-color: var(--accent);
  }
}

.program-nav__list a[aria-current="true"] {
  background: var(--accent);
  color: var(--ivory);
  border-color: var(--accent);
}

/* ============================================================
   STATE PAGE: BODY LAYOUT
   ============================================================ */

.state-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding-block: var(--sp-8);
}

@media (min-width: 960px) {
  .state-body {
    grid-template-columns: 1fr 320px;
    gap: var(--sp-12);
    align-items: start;
  }
}

.state-sidebar {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-6));
}

/* ============================================================
   STATE PAGE: HIGHLIGHT LIST
   ============================================================ */

.highlight-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.highlight-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--step-0);
  color: var(--ink-2);
  line-height: var(--leading-snug);
}

.highlight-list li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 6px;
}

/* ============================================================
   STATE PAGE: DETAIL NOTE
   ============================================================ */

.detail-note {
  margin-top: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--step--1);
  color: var(--ink-2);
  line-height: var(--leading-normal);
}

.detail-note p { margin: 0; }
.detail-note p + p { margin-top: var(--sp-2); }

/* ============================================================
   STATE PAGE: SUBSECTION HEADING
   ============================================================ */

.subsection-heading {
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: var(--tracking-snug);
  margin-block: var(--sp-6) var(--sp-4);
}

/* ============================================================
   DARK BAND (deep forest green sections: lead capture, footer)
   ============================================================ */

.dark-band {
  background: var(--bg-dark);
  color: var(--ivory);
}

/* ============================================================
   STATE PAGE: LEAD SECTION (inline CTA on state pages)
   ============================================================ */

.lead-section {
  padding-block: clamp(var(--sp-16), 8vw, var(--sp-24));
}

.lead-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
  align-items: center;
}

@media (min-width: 768px) {
  .lead-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-16);
  }
}

.lead-content h2 {
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--ivory);
  margin-bottom: var(--sp-4);
}

.lead-content p {
  font-size: var(--step-0);
  color: var(--ivory-2);
  line-height: var(--leading-normal);
}

.lead-content .eyebrow--light {
  color: var(--ivory-2);
}

/* Lead form within dark band */
.lead-section .lead-form-el {
  background: var(--bg);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  box-shadow: var(--shadow-lg);
}

/* ============================================================
   STATE NOT FOUND MODAL (shown when state page 404s)
   ============================================================ */

.state-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-state) var(--ease-out);
}

.state-modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.state-modal {
  background: var(--bg);
  border-radius: var(--r-lg);
  padding: var(--sp-10) var(--sp-8);
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-lg);
  transform: translateY(16px) scale(0.97);
  transition: transform var(--dur-state) var(--ease-spring);
}

.state-modal-overlay.open .state-modal {
  transform: translateY(0) scale(1);
}

.state-modal .modal-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-pale);
  display: grid;
  place-items: center;
  margin: 0 auto var(--sp-5);
}

.state-modal h3 {
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin-bottom: var(--sp-3);
}

.state-modal p {
  font-size: var(--step--1);
  color: var(--ink-2);
  line-height: var(--leading-normal);
  margin-bottom: var(--sp-6);
}

.state-modal .modal-state-name {
  color: var(--accent);
  font-weight: 700;
}

.state-modal .modal-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.state-modal .btn-primary {
  width: 100%;
  justify-content: center;
}

.state-modal .modal-dismiss {
  font-size: var(--step--1);
  color: var(--ink-3);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--sp-2);
  transition: color var(--dur-micro);
}

@media (hover: hover) {
  .state-modal .modal-dismiss:hover { color: var(--ink-2); }
}

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-enter) var(--ease-out),
              transform var(--dur-enter) var(--ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Stagger children */
.reveal-group > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-enter) var(--ease-out),
              transform var(--dur-enter) var(--ease-out);
}

.reveal-group.visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0ms; }
.reveal-group.visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 80ms; }
.reveal-group.visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 160ms; }
.reveal-group.visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 240ms; }
.reveal-group.visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 320ms; }
.reveal-group.visible > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal-group > *,
  .reveal-group.visible > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   BACK TO TOP
   ============================================================ */

.back-to-top {
  position: fixed;
  bottom: clamp(var(--sp-5), 4vw, var(--sp-8));
  right: clamp(var(--sp-5), 4vw, var(--sp-8));
  z-index: var(--z-raised);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--ivory);
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-state) var(--ease-out),
              transform var(--dur-state) var(--ease-out),
              background var(--dur-micro);
  box-shadow: var(--shadow-md);
  bottom: max(clamp(var(--sp-5), 4vw, var(--sp-8)), env(safe-area-inset-bottom, var(--sp-5)));
}

.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: hover) {
  .back-to-top:hover { background: var(--accent); }
  .back-to-top:hover svg { transform: translateY(-2px); }
}

.back-to-top svg {
  transition: transform var(--dur-state) var(--ease-out);
}

/* ============================================================
   TOP PROGRESS BAR
   ============================================================ */

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: calc(var(--z-header) + 1);
  height: 3px;
  background: var(--accent);
  width: 0%;
  transition: width 100ms linear;
  pointer-events: none;
}

/* ============================================================
   SCREEN-READER ONLY
   ============================================================ */

.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;
}

/* ============================================================
   SATOSHI FONT FACE
   ============================================================ */

/* ---- 2026-10-15 homepage repairs ---- */
.header-inner .btn-sm { white-space: nowrap; margin-left: auto; }
@media (max-width: 767px) {
  .header-inner .btn-sm { display: none; }   /* the mobile menu carries Get Quote */
  .menu-btn { margin-left: auto; }
  .scroll-cue { display: none; }
}
.region-acc { display: grid; gap: var(--sp-3); }
@media (min-width: 768px) { .region-acc { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.region { border: 1px solid var(--line); border-radius: var(--r-md, 14px); background: var(--surface, #fff); }
.region summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); cursor: pointer; list-style: none; font-weight: 700; min-height: 44px; }
.region summary::-webkit-details-marker { display: none; }
.region summary::after { content: "+"; font-weight: 400; font-size: 1.4em; line-height: 1; color: var(--accent); transition: transform var(--dur-micro, .16s); }
.region[open] summary::after { transform: rotate(45deg); }
.region-count { margin-left: auto; font-size: var(--step--1); font-weight: 500; color: var(--ink-3); }
.state-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0 var(--sp-5) var(--sp-5); margin: 0; list-style: none; }
.state-chips a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--sp-4); border: 1px solid var(--line); border-radius: 999px; font-size: var(--step--1); font-weight: 500; color: var(--ink-2); text-decoration: none; }
@media (hover: hover) { .state-chips a:hover { background: var(--accent-pale); color: var(--accent-dim); border-color: var(--accent); } }
.state-chips a:focus-visible, .region summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.sp-form-msg { margin: var(--sp-3, 12px) 0 0; font-size: var(--step--1, 14px); font-weight: 600; }
.sp-form-msg.is-ok { color: var(--success, #1f7a4d); }
.sp-form-msg.is-err { color: var(--danger, #b3261e); }

.prose-page { padding: clamp(40px, 6vw, 80px) 0; }
.prose { max-width: 720px; }
.prose h1 { font-size: var(--step-4, 40px); line-height: 1.1; margin: 0 0 16px; }
.prose h2 { font-size: var(--step-1, 20px); margin: 32px 0 8px; }
.prose p { color: var(--ink-2); line-height: 1.7; margin: 0 0 12px; }
.prose .lede { font-size: var(--step-1, 20px); }
.prose a { color: var(--accent); }
.contact-form { display: grid; gap: 6px; margin: 24px 0 12px; max-width: 560px; }
.contact-form label { font-weight: 600; font-size: var(--step--1, 14px); margin-top: 10px; }
.contact-form input, .contact-form textarea { font: inherit; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface, #fff); color: inherit; }
.contact-form button { margin-top: 16px; justify-self: start; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fine { font-size: var(--step--1, 14px); color: var(--ink-3); }

.stats-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--sp-4, 16px); }
.stat-item { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }

.footer-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--sp-6, 24px); }
.footer-nav-col h3 { margin-bottom: var(--sp-3, 12px); }
.lead-form .select-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============================================================
   FOOTER LAYOUT FIX (all pages): brand + 3 nav columns side by side
   ============================================================ */
@media (min-width: 768px) {
  .footer-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.footer-nav-col h3 {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ivory-2);
  margin-bottom: var(--sp-4);
}

/* ==== 2026-10-16: banner menu tiles ==== */
.nav-list { gap: var(--sp-2); }
.nav-list a {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-4);
  font-size: var(--step--1); font-weight: 600; color: var(--ink-2);
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 1px 0 rgba(22, 32, 27, .04);
  transition: background var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.nav-list a::after { content: none; }
@media (hover: hover) {
  .nav-list a:hover { background: var(--accent-pale); border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
}
.nav-list a:active { transform: translateY(0) scale(.98); }
.nav-list a[aria-current="page"], .nav-list a.active { background: var(--accent); border-color: var(--accent); color: var(--ivory); }
.nav-list a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.header-inner .btn-sm { min-height: 44px; display: inline-flex; align-items: center; border-radius: 12px; }

/* mobile menu: the same tiles, full width */
.mobile-nav__list { display: grid; gap: var(--sp-3); }
.mobile-nav__list a:not(.btn-primary) {
  display: flex; align-items: center; gap: var(--sp-3); min-height: 52px; padding: 0 var(--sp-5);
  font-weight: 600; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
}
.mobile-nav__list a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--ivory); }

/* ==== 2026-10-16: one text color system ==== */
body { color: var(--ink-2); }
h1, h2, h3, h4, h5, h6, strong, b, th, dt, legend { color: var(--ink); }
p, li, td, dd, label, figcaption, blockquote { color: inherit; }
small, .fine, .section-sub, .stat-label, .region-count, .footer-tagline { color: var(--ink-3); }
a { color: var(--accent); }
a:where(:not(.btn-primary):not(.btn-sm)) { text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
.dark-band, .dark-band p, .dark-band li, .site-footer, .site-footer p { color: var(--ivory-2); }
.dark-band h1, .dark-band h2, .dark-band h3, .dark-band strong, .site-footer h3 { color: var(--ivory); }
.site-footer a { color: var(--ivory); }
.stat-chip .chip-value { color: var(--ivory); }
.stat-chip .chip-label { color: var(--ivory-2); }

/* light cards inside dark bands keep dark text */
.dark-band .lead-form, .dark-band .lead-form p, .dark-band .lead-form label, .dark-band .lead-form li { color: var(--ink-2); }
.dark-band .lead-form .form-disclaimer, .dark-band .lead-form small { color: var(--ink-3); }
.state-hero .breadcrumb, .state-hero .breadcrumb span, .state-hero .breadcrumb a { color: var(--ivory-2); }

/* ==== 2026-10-16: editorial type and surface system ====
   M: no faded text, no white strip between dark bands, no amateur type, no decorative icons.
   1. A real typeface: Satoshi when its files are present, otherwise self-hosted Inter (never a random system font).
   2. Every text color is solid and 7:1 or better. No opacity or alpha on text, no reveal fades.
   3. Labels in sentence case at normal tracking. No uppercase letter-spaced captions.
   4. Headings 700 with moderate tracking. Body 16 to 17px, 1.65 leading, 68ch measure.
*/
@font-face { font-family: "Satoshi"; src: url("/shared/satoshi/Satoshi-Variable.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/shared/satoshi/Satoshi-VariableItalic.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/shared/fonts/Inter-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/shared/fonts/Inter-VariableItalic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { font-family: var(--font-sans); font-feature-settings: "kern", "liga", "calt", "cv11"; color: var(--ink-2); line-height: 1.65; }
h1, h2, h3, h4 { font-family: var(--font-sans); color: var(--ink); font-weight: 700; text-wrap: balance; }
h1 { letter-spacing: -0.022em; line-height: 1.08; }
h2 { letter-spacing: -0.018em; line-height: 1.15; }
h3, h4 { letter-spacing: -0.01em; line-height: 1.3; }
.hero h1 { font-weight: 700; letter-spacing: -0.024em; max-width: 16ch; margin-inline: auto; }
.hero .hero-sub, .section-sub, .prose-page p { max-width: 62ch; }
p { text-wrap: pretty; }

/* Solid text: no fades anywhere */
.reveal, .reveal-group > *, .reveal.visible, .reveal-group.visible > * { opacity: 1 !important; transform: none !important; transition: none !important; }
::placeholder { color: var(--ink-3); opacity: 1; }
.stat-label, .form-disclaimer, .footer-legal, .footer-update { color: var(--ink-3); }

/* Labels: sentence case, normal tracking */
.program-badge, .region-group h3, .detail-card .detail-label, .footer-nav h4, .footer-nav-col h3, .state-hero .verified-badge {
  text-transform: none; letter-spacing: 0;
}
.region-group h3, .detail-card .detail-label { font-size: var(--step-0); font-weight: 600; color: var(--ink); }
.program-badge { font-size: 12px; font-weight: 600; }

/* Stats: a calm full-width band, not a floating card */
.stats-bar { border: 0; border-block: 1px solid var(--line); border-radius: 0; box-shadow: none; background: var(--bg-2); }
.stat-value { font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.stat-label { font-size: var(--step-0); color: var(--ink-2); }

/* Dark bands: ivory, solid */
.dark-band, .dark-band p, .dark-band li { color: var(--ivory-2); }
.dark-band h2, .dark-band h3, .dark-band strong { color: var(--ivory); }
.lead-content h2 { font-weight: 700; letter-spacing: -0.02em; }
.lead-points { list-style: none; margin: var(--sp-8) 0 0; padding: 0; display: grid; gap: var(--sp-4); max-width: 46ch; }
.lead-points li { padding-left: var(--sp-5); position: relative; line-height: 1.55; }
.lead-points li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--ivory); }
.lead-section .lead-form-el, .dark-band .lead-form { color: var(--ink-2); }
.dark-band .lead-form .form-disclaimer { color: var(--ink-3); }

/* Footer: one step deeper than the band above, solid ivory text */
.site-footer { background: var(--bg-dark-3); border-top: 1px solid var(--line-dark); }
.site-footer, .site-footer p, .footer-tagline, .footer-legal, .footer-update { color: var(--ivory-2); }
.footer-nav h4, .footer-nav-col h3 { font-size: var(--step-0); font-weight: 600; color: var(--ivory); margin-bottom: var(--sp-3); }
.footer-nav a { color: var(--ivory-2); }
@media (hover: hover) { .footer-nav a:hover { color: var(--ivory); text-decoration: underline; text-underline-offset: 3px; } }

/* State heroes and breadcrumbs: solid ivory */
.state-hero .breadcrumb, .state-hero .breadcrumb a, .state-hero .breadcrumb span { color: var(--ivory-2); }
.state-hero .breadcrumb [aria-current="page"] { color: var(--ivory); }
.stat-chip .chip-value { font-weight: 700; letter-spacing: -0.015em; }

.stat-item { border-bottom: 0; }
.site-footer .logo-dot { color: var(--ivory); }

/* Breadcrumbs on light pages: one inline row */
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); list-style: none; margin: 0 0 var(--sp-6); padding: 0; font-size: var(--step--1); color: var(--ink-3); }
.breadcrumb a { color: var(--accent); }

/* ==== 2026-10-19: banner tiles match the Get Quote button ====
   Same green fill, ivory text, 17px bold, 48px tall. The current page flips to the inverse. */
.nav-list a, .header-inner .btn-sm {
  min-height: 48px; font-size: var(--step-0); font-weight: 700; color: var(--ivory);
  background: var(--accent); border: 1px solid var(--accent); border-radius: 12px; box-shadow: none;
}
.header-inner .btn-sm { align-items: center; padding-block: 0; }
@media (min-width: 768px) { .header-inner .btn-sm { display: inline-flex; } }
@media (hover: hover) {
  .nav-list a:hover, .header-inner .btn-sm:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--ivory); }
}
.nav-list a[aria-current="page"] { background: var(--bg); color: var(--accent); border-color: var(--accent); }
@media (hover: hover) { .nav-list a[aria-current="page"]:hover { background: var(--accent-pale); color: var(--accent); border-color: var(--accent); } }
.nav-list a:focus-visible, .header-inner .btn-sm:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.mobile-nav__list a:not(.btn-primary) { background: var(--accent); color: var(--ivory); border-color: var(--accent); font-weight: 700; }
.mobile-nav__list a[aria-current="page"] { background: var(--bg); color: var(--accent); }

/* phone menu CTA: ivory on green like every other green button */
.mobile-nav a.btn-primary, .mobile-nav__list a.btn-primary { color: var(--ivory); background: var(--accent); }

/* ==== 2026-10-19: compact banner tiles ====
   Same type as the logo wordmark (17px, 700, -0.025em) and a snug fill around the text.
   36px tall: compact, still above the 24px WCAG 2.2 target minimum. */
.nav-list { gap: var(--sp-2); }
.nav-list a, .header-inner .btn-sm {
  min-height: 0; height: auto; padding: 6px 12px;
  font-size: 17px; font-weight: 700; letter-spacing: -0.025em; line-height: 24px;
  border-radius: 8px;
}

/* ==== 2026-10-19: green buttons and tiles stay exactly as they are on hover and click ====
   M: the quote button turned into a blank lighter green (the sweep layer covered the text).
   No sweep, no colour change, no shrink, no lift. Keyboard focus keeps its ring. */
.btn-primary::before { content: none; }
.btn-primary, .btn-primary-lg, .btn-cta-sm, .header-inner .btn-sm, .nav-list a,
.lead-form button[type="submit"], .lead-form-el button[type="submit"] { transition: none; }
.btn-primary:hover, .btn-primary:active, .btn-primary:focus,
.btn-primary-lg:hover, .btn-primary-lg:active,
.btn-cta-sm:hover, .btn-cta-sm:active,
.header-inner .btn-sm:hover, .header-inner .btn-sm:active,
.nav-list a:not([aria-current="page"]):hover, .nav-list a:not([aria-current="page"]):active,
.lead-form button[type="submit"]:hover, .lead-form button[type="submit"]:active,
.mobile-nav a.btn-primary:hover, .mobile-nav a.btn-primary:active {
  background: var(--accent); border-color: var(--accent); color: var(--ivory);
  transform: none; box-shadow: none;
}
.nav-list a[aria-current="page"]:hover, .nav-list a[aria-current="page"]:active {
  background: var(--bg); color: var(--accent); border-color: var(--accent); transform: none;
}
.btn-primary:hover .btn-arrow { transform: none; }

/* ==== 2026-10-19: page rhythm, every page like Federal Programs ====
   Sections alternate white and light green (--bg-2) with a hairline where they meet.
   The footer is the only dark green surface.
   Homepage: hero white, stats green, incentive types white, browse green, quotes white.
   State pages: header white, program content green, quotes white. */
.browse-section, .stats-bar, main > .content-wrap, .section-alt, .compare-section, .faq-section {
  background: var(--bg-2); border-block: 1px solid var(--line);
}
.hero, .programs-section, .lead-section, .state-hero, .page-hero, .cta-band { background: var(--bg); }

/* Quote section on white */
.lead-section, .lead-section p, .lead-section li { color: var(--ink-2); }
.lead-section h2, .lead-section strong { color: var(--ink); }
.lead-section .lead-points li::before { background: var(--accent); }
.lead-section .lead-form, .lead-section .lead-form-el { border: 1px solid var(--line); box-shadow: var(--shadow-md); }

/* State header on white */
.state-hero { color: var(--ink); border-bottom: 1px solid var(--line); }
.state-hero h1 { color: var(--ink); }
.state-hero .breadcrumb, .state-hero .breadcrumb span { color: var(--ink-3); }
.state-hero .breadcrumb a { color: var(--accent); }
.state-hero .breadcrumb [aria-current="page"] { color: var(--ink); }
.state-hero .stat-chip { background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow-sm); backdrop-filter: none; -webkit-backdrop-filter: none; }
.state-hero .stat-chip .chip-value { color: var(--ink); }
.state-hero .stat-chip .chip-label { color: var(--ink-2); }
@media (hover: hover) { .state-hero .breadcrumb a:hover { color: var(--accent); text-decoration: underline; } }

/* the state content band is centred; its full-width colour comes from state.css, hairlines from its neighbours */
main > .content-wrap { border-block: 0; }
.lead-section { border-top: 1px solid var(--line); }

/* homepage sections get the same breathing room as Federal Programs content sections */
.programs-section, .browse-section { padding-block: clamp(var(--sp-16), 8vw, var(--sp-24)); }

/* ==== 2026-10-21: header menu text matches the apple.com global nav link size ====
   M: the menu in the header was too big. apple.com #globalnav .globalnav-link: 12px, letter-spacing -.01em. */
.nav-list a { font-size: 12px; letter-spacing: -0.01em; }

/* ==== 2026-10-24: Get Quote uses exactly the menu tile type ====
   M: the header CTA was obviously bigger than the tiles (17px vs 12px). One header button style. */
.header-inner .btn-sm { font-size: 12px; letter-spacing: -0.01em; }

/* ==== 2026-10-24: ELECTRIC GREEN on light (v2) ====
   M: likes the electric green, near black green surfaces are out. White and mint sections, volt buttons and
   highlights with ink text, one vivid green (--accent) for text and the footer. No dark hero, no dark header. */

/* ---- buttons and tiles: one volt fill, ink text, no state change ---- */
.btn-primary, .btn-primary-lg, .btn-cta-sm, .header-inner .btn-sm, .nav-list a,
.lead-form button[type="submit"], .lead-form-el button[type="submit"], .mobile-nav a.btn-primary,
.btn-primary:hover, .btn-primary:active, .btn-primary:focus,
.btn-primary-lg:hover, .btn-primary-lg:active, .btn-cta-sm:hover, .btn-cta-sm:active,
.header-inner .btn-sm:hover, .header-inner .btn-sm:active,
.nav-list a:not([aria-current="page"]):hover, .nav-list a:not([aria-current="page"]):active,
.lead-form button[type="submit"]:hover, .lead-form button[type="submit"]:active,
.mobile-nav a.btn-primary:hover, .mobile-nav a.btn-primary:active {
  background: var(--volt); border-color: var(--volt); color: var(--on-volt); box-shadow: none; transform: none;
}
.nav-list a[aria-current="page"], .nav-list a[aria-current="page"]:hover, .nav-list a[aria-current="page"]:active {
  background: var(--bg); border-color: var(--accent); color: var(--accent);
}
.btn-primary-lg, .btn-full, .state-picker .btn-primary { border-radius: var(--r-full); font-weight: 700; }
.btn-primary .btn-arrow, .btn-primary svg { color: var(--on-volt); }
.header-inner .btn-sm { white-space: nowrap; flex-shrink: 0; }
.logo-dot, .site-logo .logo-dot { color: var(--accent); }

/* ---- hero: white, a faint green grid, one sun with pulse rings ---- */
.hero, .state-hero, .page-hero { position: relative; isolation: isolate; overflow: hidden; }
.hero {
  text-align: left;
  padding-top: calc(var(--header-h) + clamp(var(--sp-12), 7vw, var(--sp-24)));
  padding-bottom: clamp(var(--sp-16), 8vw, var(--sp-24));
}
.alert-banner { margin-top: var(--header-h); }
.alert-banner + .hero { padding-top: clamp(var(--sp-12), 6vw, var(--sp-20)); }
.hero h1 {
  font-size: var(--step-6); line-height: 1.04; letter-spacing: -0.035em;
  max-width: 13ch; margin-inline: 0; margin-bottom: var(--sp-6);
}
.hero h1 em {
  font-style: normal; color: var(--on-volt); background: var(--volt); border-radius: var(--r-md);
  padding: 0 0.14em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hero .hero-sub { max-width: 46ch; margin-inline: 0; font-size: var(--step-1); }
.state-picker {
  max-width: 600px; margin-inline: 0; justify-content: flex-start; flex-wrap: nowrap; gap: var(--sp-2);
  padding: var(--sp-2); border-radius: var(--r-full);
  background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow-md);
}
.state-picker select { border: 0; padding-left: var(--sp-5); box-shadow: none; border-radius: var(--r-full); background-color: transparent; }
.state-picker select:focus { box-shadow: none; outline: none; }
.state-picker:focus-within { border-color: var(--accent); }
@media (max-width: 560px) {
  .state-picker { flex-wrap: wrap; border-radius: var(--r-lg); }
  .state-picker select, .state-picker .btn-primary { flex: 1 1 100%; justify-content: center; min-height: 48px; }
}
.state-hero h1, .page-hero h1 { letter-spacing: -0.035em; }

/* ---- state hero chips: volt tiles with ink text ---- */
.state-hero .stat-chip { background: var(--volt); border: 0; box-shadow: none; }
.state-hero .stat-chip .chip-value, .state-hero .stat-chip .chip-label { color: var(--on-volt); }
.state-hero .stat-chip .chip-value { font-weight: 700; letter-spacing: -0.02em; }

/* ---- stats band: one volt stripe ---- */
.stats-bar { background: var(--volt); border-block: 0; margin-block: 0; }
.stats-bar .stat-item { border-color: color-mix(in srgb, var(--on-volt) 22%, transparent); }
.stat-value { color: var(--on-volt); font-size: clamp(2.25rem, 1.4rem + 3.2vw, 3.75rem); letter-spacing: -0.04em; line-height: 1; }
.stat-label { color: var(--on-volt); font-size: var(--step--1); }

/* ---- section headings ---- */
.section-header { margin-bottom: var(--sp-10); }
.section-header h2, .programs-section h2, .browse-section h2, .lead-content h2 {
  font-size: var(--step-4); letter-spacing: -0.03em; line-height: 1.08; color: var(--ink);
}
.section-sub { font-size: var(--step-1); color: var(--ink-2); }

/* ---- incentive cards: numbered, one dot, lift on hover devices ---- */
.programs-section .program-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--sp-5); counter-reset: pc; }
.programs-section .program-card {
  counter-increment: pc; position: relative; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-8) var(--sp-6) var(--sp-6);
  transition: transform var(--dur-state) var(--ease-out), box-shadow var(--dur-state) var(--ease-out), border-color var(--dur-state);
}
.programs-section .program-card::before, .programs-section .program-card:hover::before { content: none; display: none; }
.programs-section .program-card h3::before {
  content: counter(pc, decimal-leading-zero); display: block; margin-bottom: var(--sp-3);
  font-size: var(--step--1); font-weight: 700; letter-spacing: 0; color: var(--accent);
}
.programs-section .program-card h3 { font-size: var(--step-2); letter-spacing: -0.025em; color: var(--ink); }
.programs-section .program-card .card-link { color: var(--accent); font-weight: 700; }
@media (hover: hover) {
  .programs-section .program-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-md); }
}

/* ---- browse by region ---- */
.region { background: var(--bg); border-radius: var(--r-lg); }
.region summary { font-weight: 700; font-size: var(--step-1); letter-spacing: -0.02em; color: var(--ink); }
.state-chips a { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-full); color: var(--ink); font-weight: 600; }
@media (hover: hover) {
  .state-chips a:hover { background: var(--volt); border-color: var(--volt); color: var(--on-volt); }
  .region:hover { border-color: var(--accent); }
}

/* ---- quote section ---- */
.lead-form-el, .lead-section .lead-form-el { border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.form-field input:focus, .form-field select:focus, .lead-form select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--volt) 55%, transparent); outline: none;
}
.lead-section .lead-points li::before { background: var(--volt); border: 1px solid var(--accent); }

/* ---- footer: the one vivid green, ivory text ---- */
.footer-nav-col h3, .footer-nav h4, .footer-nav a, .footer-brand .site-logo, .site-footer p { color: var(--ivory); }
.footer-brand .logo-dot { color: var(--ivory); }
.footer-nav a { text-decoration: none; }
@media (hover: hover) { .footer-nav a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.site-footer :focus-visible { outline: 3px solid var(--ivory); outline-offset: 3px; }

/* ---- chrome ---- */
.progress-bar { background: var(--volt); }
.back-to-top { background: var(--volt); color: var(--on-volt); border: 0; }
::selection { background: var(--volt); color: var(--on-volt); }

/* ---- mobile ---- */
@media (max-width: 560px) {
  .header-inner { gap: var(--sp-3); }
  .header-inner .btn-sm { margin-left: auto; }
  .menu-btn { margin-left: 0; }
  .stats-inner { grid-template-columns: repeat(2, 1fr); }
  .stats-bar .stat-item { padding-block: var(--sp-5); }
  .stat-value { font-size: clamp(2rem, 9vw, 2.75rem); }
}
.stats-inner { gap: 0; }

/* ---- stats: four across on wide screens ---- */
@media (min-width: 760px) { .stats-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 759px) { .stats-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stats-inner { display: grid; }
.stats-bar .stat-item:nth-child(4n) { border-right: 0; }
.footer-credit { margin: var(--sp-2) 0 0; }
.footer-credit a { color: var(--ivory); font-weight: 600; }

/* ---- quote form: one column whenever the form itself is narrow (no clipped labels) ---- */
.lead-form-el { container-type: inline-size; }
@container (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.form-field input, .form-field select { text-overflow: ellipsis; }

/* ---- footer matches the electric green: volt fill, ink text ---- */
.site-footer { background: var(--volt); color: var(--on-volt); border-top: 0; }
.footer-nav-col h3, .footer-nav h4, .footer-nav a, .footer-brand .site-logo, .site-footer p, .footer-tagline, .footer-legal, .footer-update, .footer-credit a { color: var(--on-volt); }
.footer-brand .logo-dot { color: var(--on-volt); }
.footer-bottom { border-top: 1px solid var(--on-volt); }
.site-footer :focus-visible { outline: 3px solid var(--on-volt); outline-offset: 3px; }
.footer-nav a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
@media (hover: hover) { .footer-nav a:hover { text-decoration-color: var(--on-volt); } }

/* ---- footer bottom row: one grid, the rule runs exactly the width of the text ---- */
.footer-bottom {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: var(--sp-10); row-gap: var(--sp-2);
  align-items: start; justify-content: stretch; border-top: 0;
  background: linear-gradient(var(--on-volt), var(--on-volt)) top center / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}
.footer-bottom p { margin: 0; line-height: 1.6; }
.footer-bottom .footer-update, .footer-bottom .footer-credit { white-space: nowrap; text-align: right; }
@media (max-width: 760px) {
  .footer-bottom { grid-template-columns: minmax(0, 1fr); }
  .footer-bottom .footer-update, .footer-bottom .footer-credit { text-align: left; }
}

/* ---- last deep greens on every page type: electric green with ink text ---- */
.skip-link, .skip-link:focus, .timeline-dot, table thead th, table th {
  background: var(--volt) !important; color: var(--on-volt) !important; border-color: var(--volt) !important;
}

/* ---- footer contact address ---- */
.footer-contact { margin: var(--sp-3) 0 0; }
.footer-contact a { color: var(--on-volt); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---- hero headline: a marker highlight under the words, no full box, nothing clipped ---- */
.hero h1 { line-height: 1.1; padding-bottom: 0.08em; overflow: visible; }
.hero h1 em {
  background: linear-gradient(to top, var(--volt) 0, var(--volt) 0.34em, transparent 0.34em);
  color: var(--ink); border-radius: 0; padding: 0 0.04em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* highlighter sits behind the lower half of the letters, like a marker pass */
.hero h1 em {
  background: linear-gradient(to top, transparent 0.14em, var(--volt) 0.14em, var(--volt) 0.58em, transparent 0.58em);
  padding: 0 0.06em;
}

/* "clearly explained": a clean volt underline, no box */
.hero h1 em {
  background: none; padding: 0; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--volt); text-decoration-thickness: 0.09em;
  text-underline-offset: 0.12em; text-decoration-skip-ink: auto;
}
.hero h1 em { text-underline-offset: 0.2em; text-decoration-skip-ink: none; }
/* Word-style underline: close under the baseline, unbroken through descenders */
.hero h1 em { text-underline-offset: 0.09em; text-decoration-thickness: 0.07em; text-decoration-skip-ink: none; text-decoration-skip: none; }
/* Underline drawn from the measured baseline: it touches the bottoms of the letters (no white gap),
   runs unbroken through the y and p, and never covers the letters above it. Satoshi descent = 0.238em. */
.hero h1 em {
  text-decoration: none; padding: 0 0.02em 0.12em;
  background: linear-gradient(to top, transparent 0, transparent 0.298em, var(--volt) 0.298em, var(--volt) 0.37em, transparent 0.37em);
}
/* Satoshi round letters (c e a d) sit 0.013em below the baseline: the line starts exactly there, so ink never spills into it */
.hero h1 em {
  background: linear-gradient(to top, transparent 0, transparent 0.275em, var(--volt) 0.275em, var(--volt) 0.345em, transparent 0.345em);
}

/* ---- status dots: color follows the program's own status and end date; the badge text is the label ---- */
.content-wrap .status-badge { display: inline-flex; align-items: center; gap: 0.4rem; }
.content-wrap .status-badge::before {
  content: ""; flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--on-volt) 35%, transparent);
}
.content-wrap .status-active::before { background: var(--volt); }
.content-wrap .status-limited::before { background: var(--sun); }
.content-wrap .status-expired::before { background: var(--danger); }
.content-wrap .status-unknown::before { background: var(--ink-3); }
.content-wrap .status-unknown { background: var(--bg-2); color: var(--ink-2); }

/* the status badge is the only indicator on a card; no decorative corner dot */
.program-card::before, .program-card:hover::before { content: none !important; display: none !important; }

/* ---- federal credit status card (homepage) ---- */
.content-wrap .status-badge, .itc-card .status-badge { display: inline-flex; align-items: center; gap: 0.4rem; }
.itc-card .status-badge { font-size: var(--step--1); font-weight: 700; padding: 0.25rem 0.6rem; border-radius: var(--r-sm, 6px); background: var(--src-red-bg, var(--bg-2)); color: var(--ink-danger); }
.itc-card .status-badge::before { content: ""; flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--danger); }
.itc-card {
  display: grid; gap: var(--sp-3); justify-items: start; margin-bottom: var(--sp-5);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-6);
}
.itc-card h3 { font-size: var(--step-2); letter-spacing: -0.025em; color: var(--ink); margin: 0; }
.itc-card p { max-width: 62ch; margin: 0; color: var(--ink-2); }
.itc-card .card-link { color: var(--accent); font-weight: 700; }

/* ---- phone menu: an editorial list on one grid, not chips (2026-10-24) ---- */
.mobile-nav {
  background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none;
  justify-content: flex-start; align-items: stretch; gap: 0;
  padding: calc(var(--header-h) + var(--sp-6)) var(--gutter) calc(var(--sp-8) + env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
}
.mobile-nav:focus, .mobile-nav:focus-visible { outline: none; }
.mobile-nav .mobile-nav__list { display: block; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0; list-style: none; }
.mobile-nav .mobile-nav__list li { margin: 0; }
.mobile-nav .mobile-nav__list a:not(.btn-primary) {
  display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: 64px; padding: var(--sp-3) 0;
  font-size: var(--step-2); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2;
  color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
}
.mobile-nav .mobile-nav__list a[aria-current="page"]:not(.btn-primary) { color: var(--accent); background: transparent; }
.mobile-nav .mobile-nav__list a:not(.btn-primary):focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: var(--r-sm, 8px); }
@media (hover: hover) { .mobile-nav .mobile-nav__list a:not(.btn-primary):hover { color: var(--accent); background: transparent; } }
.mobile-nav .mobile-nav__list li:last-child { margin-top: var(--sp-8); }
.mobile-nav .mobile-nav__list a.btn-primary {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 0 var(--sp-6);
  border-radius: var(--r-full); font-size: var(--step-1); font-weight: 700; text-align: center;
}
.mobile-nav.open .mobile-nav__list li:nth-child(1) a { transition-delay: 80ms; }
.mobile-nav.open .mobile-nav__list li:nth-child(2) a { transition-delay: 125ms; }
.mobile-nav.open .mobile-nav__list li:nth-child(3) a { transition-delay: 170ms; }
.mobile-nav.open .mobile-nav__list li:nth-child(4) a { transition-delay: 215ms; }
/* one Get Quote on screen while the menu is open */
body:has(.mobile-nav.open) .header-inner .btn-sm { visibility: hidden; }