/* =============================================================
   Price My Solar — Compare Solar Quotes
   Brand palette: green #167E41 · orange #F79222 · mint #E8FAEC ·
                  amber #FFBF0C · yellow #FEEC25 (micro-accents only)
   ============================================================= */

:root {
  --brand-primary: #F79222;
  --brand-primary-dark: #d97d0e;
  --brand-primary-light: #fff8f0;
  --brand-primary-10: rgba(247,146,34,0.06);
  --brand-primary-20: rgba(247,146,34,0.12);
  --brand-primary-30: rgba(247,146,34,0.18);
  --brand-primary-50: rgba(247,146,34,0.40);
  --brand-primary-70: rgba(247,146,34,0.60);
  --brand-green: #167E41;
  --brand-green-dark: #0F5E30;
  --brand-green-light: #E8FAEC;
  --brand-green-10: rgba(22,126,65,0.06);
  --brand-green-20: rgba(22,126,65,0.12);
  --brand-green-30: rgba(22,126,65,0.18);
  --brand-mint: #E8FAEC;
  --brand-mint-strong: #D6F5DE;
  --brand-amber: #FFBF0C;
  --brand-yellow: #FEEC25;
  --brand-secondary: #0f172a;
  --brand-secondary-dark: #020617;
  --ink-900: #0f172a;
  --ink-700: #475569;
  --ink-500: #64748b;
  --ink-300: #e2e8f0;
  --ink-100: #f1f5f9;
  --ink-50:  #f8fafc;
  --white: #ffffff;
  --success: #167E41;
  --danger: #ef4444;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.03);
  --shadow: 0 2px 8px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.06);
  --shadow-xl: 0 12px 32px rgba(0,0,0,0.08);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --container-max: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  margin: 0; padding: 0;
  /* Lenis owns smooth scroll. Native fallback only if Lenis fails
     to load / reduced-motion is set. */
  scroll-behavior: auto;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
/* Lenis smooth-scroll compat (ported from /package/) — required so
   sticky header + native scroll-behavior don't fight the JS lerp. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
body {
  margin: 0; padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink-900);
  background: var(--white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; }
input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* =============================================================
   HEADER
   ============================================================= */
.header {
  position: sticky; top: 0; z-index: 50;
  background: #E8FAEC;
  border-bottom: none;
  transition: background 0.35s ease, box-shadow 0.25s ease, padding 0.25s ease;
}
.header-content {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0 12px 0;
  gap: 24px;
  transition: max-width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              padding 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              gap 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Bring the CTA in from the right so it visually aligns with the
   right edge of the hero phone-mockup. Container = 1200px, right
   column = ~552px, phone = 280px centered → ~136px inset. */
.header:not(.header-scrolled) .header-content { padding-right: 140px; }
@media (max-width: 1100px) {
  .header:not(.header-scrolled) .header-content { padding-right: 96px; }
}
@media (max-width: 940px) {
  .header:not(.header-scrolled) .header-content { padding-right: 24px; }
}

/* Scrolled state: shrink into a floating glassy iOS-style pill.
   Uses backdrop-filter blur on a translucent white gradient + inset
   highlights, matching the /package/ pill-nav. Logo + CTA sit close
   together inside a narrower container. */
.header.header-scrolled {
  background: transparent;
  border-bottom: none;
  box-shadow: none;
  padding: 12px 0;
}
.header.header-scrolled .container { max-width: 1100px; padding: 0 16px; }
.header.header-scrolled .header-content {
  max-width: 520px;
  margin: 0 auto;
  padding: 8px 8px 8px 20px;
  gap: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.35) 100%);
  backdrop-filter: saturate(180%) blur(30px);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(255,255,255,.25),
    0 1px 2px rgba(15,42,26,.08),
    0 12px 28px -12px rgba(15,42,26,.18);
}
.header.header-scrolled .logo-image { height: 32px; }
.header.header-scrolled .header-cta { padding: 8px 18px; }
.logo-link { display: flex; align-items: center; gap: 12px; }
.logo-image {
  display: block;
  height: 36px; width: auto;
  transition: height 0.2s ease, transform 0.2s ease;
}
.logo-mark {
  width: 60px; height: 40px; flex-shrink: 0;
}
.logo-mark svg { width: 100%; height: 100%; }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-title {
  font-size: 22px; font-weight: 800; letter-spacing: 0.5px;
  color: var(--brand-secondary);
}
.logo-tagline {
  font-size: 9px; font-weight: 500; color: var(--ink-500);
  margin-top: 4px; letter-spacing: 0.3px;
}
.header-right { display: flex; align-items: center; gap: 28px; }
.header-nav { display: flex; align-items: center; gap: 32px; }
.header-nav a {
  font-size: 13px; font-weight: 500; color: var(--ink-700);
  letter-spacing: 0.2px;
  transition: color 0.15s ease;
}
.header-nav a:hover { color: var(--ink-900); }
.header-cta {
  background: var(--brand-green); color: var(--white);
  padding: 10px 24px; border-radius: 999px;
  font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em;
  transition: background 0.15s ease, transform 0.1s ease;
}
.header-cta:hover { background: var(--brand-green-dark); }
.header-cta:active { transform: scale(0.97); }

@media (max-width: 880px) {
  .header-nav { display: none; }
  .logo-tagline { display: none; }
  .logo-title { font-size: 18px; }
  .logo-image { height: 38px; }
  /* Mobile: hide CTA at top, show after scroll */
  .header-content { justify-content: center; }
  .header-cta {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .header.header-scrolled .header-content { justify-content: space-between; padding-left: 16px; padding-right: 16px; }
  .header.header-scrolled .header-cta { opacity: 1; pointer-events: auto; }
  .header.header-scrolled .logo-image { height: 32px; }
  .header-content { position: relative; }
}

/* =============================================================
   HERO
   ============================================================= */
.hero {
  position: relative; overflow: visible;
  padding: 80px 0 100px;
  background: linear-gradient(180deg, #E8FAEC 0%, #EEFBF1 30%, #F5FCF7 60%, #FAFDFB 82%, #FFFFFF 95%);
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-bg-shape {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(22,126,65,0.06) 0%, transparent 70%);
}
.hero-bg-shape-1 {
  top: -120px; left: -120px; width: 500px; height: 500px;
}
.hero-bg-shape-2 {
  bottom: -80px; right: -80px; width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,191,12,0.05) 0%, transparent 70%);
}
.hero-bg-grass { display: none; }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "text   phone"
    "card   phone";
  gap: 8px 48px;
  align-items: start;
  position: relative; z-index: 1;
}
.hero-content      { grid-area: text; }
.hero-card         { grid-area: card; align-self: start; }
.hero-illustration { grid-area: phone; display: flex; justify-content: center; align-self: start; }

/* PHONE MOCKUP — fixed size (320px desktop, 200px mobile) so typewriter
   animations don't reflow the surrounding hero. */
.phone-mockup {
  position: relative;
  --phone-w: 280px;
  --phone-h: 580px;
  width: var(--phone-w);
  flex-shrink: 0;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,0.18)) drop-shadow(0 8px 16px rgba(0,0,0,0.10));
}
.phone-frame {
  position: relative;
  width: 100%;
  /* height determined by content */
  /* Frame radius + padding scale from --phone-w (same /280 basis as the
     inner content) so the whole device shrinks proportionally at any size. */
  border-radius: calc(var(--phone-w) * 44 / 280);
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.08);
  padding: calc(var(--phone-w) * 7 / 280) calc(var(--phone-w) * 5 / 280);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
.phone-notch {
  /* Island scales with --phone-w so it stays in proportion when the phone
     is reduced on mobile (was fixed 84x18 / top 15, which looked oversized). */
  position: absolute; top: calc(var(--phone-w) * 15 / 280); left: 50%; transform: translateX(-50%);
  width: calc(var(--phone-w) * 84 / 280); height: calc(var(--phone-w) * 18 / 280);
  background: #000; border-radius: calc(var(--phone-w) * 14 / 280); z-index: 2;
}
.phone-screen {
  background: linear-gradient(180deg, #fff 0%, #fff 65%, #EEFBF1 100%);
  border-radius: calc(var(--phone-w) * 36 / 280);
  /* height determined by content */
  padding: calc(var(--phone-w) * 42 / 280) calc(var(--phone-w) * 16 / 280) calc(var(--phone-w) * 40 / 280);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.phone-screen-logo { display: flex; justify-content: center; margin-bottom: calc(var(--phone-w) * 6 / 280); }
.phone-screen-logo svg { width: calc(var(--phone-w) * 44 / 280); height: auto; }
.phone-screen-address {
  font-size: calc(var(--phone-w) * 15 / 280); font-weight: 800;
  color: var(--brand-secondary); line-height: 1.3;
  margin-bottom: calc(var(--phone-w) * 14 / 280);
  letter-spacing: 0.1px;
  /* Reserve 3 lines worth of vertical space so the typewriter animation
     doesn't grow/shrink the phone and the surrounding hero. */
  min-height: 3.9em;
}
.phone-screen-address > div { min-height: 1.3em; }
.phone-screen-address > div:last-child { color: var(--brand-green); }
.phone-screen-table {
  width: 100%; border-collapse: collapse;
  font-size: calc(var(--phone-w) * 8.5 / 280); text-align: left;
  margin-bottom: calc(var(--phone-w) * 14 / 280);
  table-layout: fixed;
}
.phone-screen-table colgroup col:nth-child(1) { width: 38%; }
.phone-screen-table colgroup col:nth-child(2) { width: 31%; }
.phone-screen-table colgroup col:nth-child(3) { width: 31%; }
.phone-screen-table tbody td { overflow: hidden; }
.phone-row-total td { font-size: 1.15em; }
.phone-row-total td:not(:first-child) { white-space: nowrap; font-size: 1.05em; letter-spacing: 0.2px; }
.phone-screen-table thead th {
  font-weight: 700; padding: calc(var(--phone-w) * 4 / 280) calc(var(--phone-w) * 2 / 280) calc(var(--phone-w) * 5 / 280);
  border-bottom: 1px solid var(--ink-300);
  color: var(--ink-700);
  text-transform: uppercase; font-size: 0.95em;
}
.phone-screen-table thead th:not(:first-child) { text-align: center; }
.phone-screen-table tbody td {
  padding: calc(var(--phone-w) * 3.2 / 280) calc(var(--phone-w) * 2 / 280);
  color: var(--ink-700);
}
.phone-screen-table tbody td:first-child { font-weight: 500; }
.phone-screen-table tbody td:not(:first-child) { text-align: center; }
.phone-row-spacer td { padding: calc(var(--phone-w) * 5 / 280) 0 !important; border-bottom: 1px solid var(--ink-200); }
/* PHONE MOCKUP — visible by default; runLoop adds cycling animation as enhancement.
   This way the phone shows initial values even if JS doesn't run on production. */
.phone-anim-row { opacity: 1; transform: none; transition: opacity 0.45s ease, transform 0.45s ease; }
.phone-screen-table thead { opacity: 1; transition: opacity 0.4s ease; }

/* =============================================================
   SECTION LAZY REVEAL — our own lightweight scroll-in system.
   Layers our own .section-lazy / .section-visible
   on top. Hero + trust-strip are excluded (above fold / hidden).
   ============================================================= */
/* No content-visibility here. It was `content-visibility: auto` +
   `contain-intrinsic-size: auto 600px`, but the real sections run 138px-1442px,
   so every not-yet-rendered section mis-reported its height by up to ~800px.
   Measured effect on mobile: the document swung between 8072px and 11920px
   (+48%) while scrolling, which (a) made in-page anchors land in the wrong
   place — `#how` finished 1288px below the viewport — because Lenis resolves
   the target position at click time and the page then grows underneath the
   1.2s scroll, and (b) cost ~30% janky frames on desktop from the constant
   re-layout. Re-adding it needs per-section intrinsic sizes, not one number. */
section.section-lazy {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.35s ease,
              transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
section.section-lazy.section-visible {
  opacity: 1;
  transform: none;
  /* One-shot reveal — drop the layer hint so 10 sections don't hold
     compositor layers for the life of the page. */
  will-change: auto;
}

/* Section headlines — zoom out from 1.06 scale */
.section-lazy .section-title,
.section-lazy .info-split-title,
.section-lazy .save-band-title,
.section-lazy .dual-info-tab,
.section-lazy .final-section-title {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.3s ease 0.1s, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}
.section-visible .section-title,
.section-visible .info-split-title,
.section-visible .save-band-title,
.section-visible .dual-info-tab,
.section-visible .final-section-title {
  opacity: 1;
  transform: none;
}

/* Section subtitles + body text — fade in from below, delayed */
.section-lazy .section-subtitle,
.section-lazy .info-split-divider,
.section-lazy .save-band-text,
.section-lazy .final-section-subtitle {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease 0.18s, transform 0.3s ease 0.18s;
}
.section-visible .section-subtitle,
.section-visible .info-split-divider,
.section-visible .save-band-text,
.section-visible .final-section-subtitle {
  opacity: 1;
  transform: none;
}

/* Content blocks — slide in from left (text) and right (visual) */
/* Stat visuals excluded — they have their own IO-driven animation */
.section-lazy .info-split-text {
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.35s ease 0.15s, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
/* .illu-has-stat is added by JS to .info-split-illu containing .stat-visual — excluded here */
.section-lazy .info-split-illu:not(.illu-has-stat),
.section-lazy .dual-info-image {
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.35s ease 0.2s, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.section-lazy .info-split-reversed .info-split-text {
  transform: translateX(16px);
}
.section-lazy .info-split-reversed .info-split-illu:not(.illu-has-stat) {
  transform: translateX(-16px);
}
.section-visible .info-split-text,
.section-visible .info-split-illu:not(.illu-has-stat),
.section-visible .dual-info-image {
  opacity: 1;
  transform: none;
}

/* Generic section body content — catch sections without specific child rules */
.section-lazy .nz-intro-grid,
.section-lazy .save-band-text,
.section-lazy .reviews-content,
.section-lazy .dual-info-actions {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease 0.15s, transform 0.35s ease 0.15s;
}
.section-visible .nz-intro-grid,
.section-visible .save-band-text,
.section-visible .reviews-content,
.section-visible .dual-info-actions {
  opacity: 1; transform: none;
}

/* Dual-info columns — left slides left, right slides right */
.section-lazy .dual-info-col:nth-child(1) {
  opacity: 0; transform: translateX(-16px);
  transition: opacity 0.35s ease 0.12s, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}
.section-lazy .dual-info-col:nth-child(2) {
  opacity: 0; transform: translateX(16px);
  transition: opacity 0.35s ease 0.2s, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.section-visible .dual-info-col:nth-child(1),
.section-visible .dual-info-col:nth-child(2) {
  opacity: 1; transform: none;
}

/* Grid cards (steps, cost cards) — stagger fade up */
.section-lazy .step-card,
.section-lazy .cost-card {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.section-lazy .step-card:nth-child(1),
.section-lazy .cost-card:nth-child(1) { transition-delay: 0.12s; }
.section-lazy .step-card:nth-child(2),
.section-lazy .cost-card:nth-child(2) { transition-delay: 0.2s; }
.section-lazy .step-card:nth-child(3),
.section-lazy .cost-card:nth-child(3) { transition-delay: 0.28s; }
.section-visible .step-card,
.section-visible .cost-card {
  opacity: 1; transform: none;
}

/* FAQ items — stagger from left */
.section-lazy .faq-item {
  opacity: 0; transform: translateX(-10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.section-lazy .faq-item:nth-child(1) { transition-delay: 0.1s; }
.section-lazy .faq-item:nth-child(2) { transition-delay: 0.16s; }
.section-lazy .faq-item:nth-child(3) { transition-delay: 0.22s; }
.section-lazy .faq-item:nth-child(4) { transition-delay: 0.28s; }
.section-lazy .faq-item:nth-child(5) { transition-delay: 0.34s; }
.section-lazy .faq-item:nth-child(6) { transition-delay: 0.4s; }
.section-visible .faq-item {
  opacity: 1; transform: none;
}

/* CTA buttons — pop in last */
.section-lazy .btn-gradient,
.section-lazy .final-compare-btn,
.section-lazy .section-action {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease 0.3s, transform 0.3s ease 0.3s;
}
.section-visible .btn-gradient,
.section-visible .final-compare-btn,
.section-visible .section-action {
  opacity: 1; transform: none;
}

@media (prefers-reduced-motion: reduce) {
  section.section-lazy,
  .section-lazy .section-title, .section-lazy .info-split-title,
  .section-lazy .save-band-title, .section-lazy .dual-info-tab,
  .section-lazy .final-section-title, .section-lazy .section-subtitle,
  .section-lazy .info-split-divider, .section-lazy .save-band-text,
  .section-lazy .final-section-subtitle, .section-lazy .info-split-text,
  .section-lazy .info-split-illu, .section-lazy .dual-info-image,
  .section-lazy .dual-info-col, .section-lazy .dual-info-actions,
  .section-lazy .nz-intro-grid, .section-lazy .reviews-content,
  .section-lazy .step-card, .section-lazy .cost-card,
  .section-lazy .faq-item, .section-lazy .btn-gradient,
  .section-lazy .final-compare-btn, .section-lazy .section-action {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .phone-anim-row { transition: none; }
  .phone-screen-table thead { transition: none; }
}
.phone-row-total td { font-weight: 800; padding-top: calc(var(--phone-w) * 7 / 280) !important; padding-bottom: calc(var(--phone-w) * 7 / 280) !important; }
.phone-row-total td:not(:first-child) { color: var(--ink-900); font-weight: 800; }
.phone-screen-cta {
  width: 100%;
  background: var(--brand-primary); color: var(--white);
  padding: calc(var(--phone-w) * 11 / 280) calc(var(--phone-w) * 18 / 280); border-radius: 999px;
  font-size: calc(var(--phone-w) * 11.5 / 280); font-weight: 800; letter-spacing: 0.6px;
  box-shadow: 0 4px 12px rgba(248,146,29,0.25);
}
.phone-demo-label {
  font-size: 9px; color: var(--ink-500); letter-spacing: 0.3px;
  margin: 10px 0 0; font-weight: 500; line-height: 1.4;
}
/* Home indicator at bottom of phone frame */
.phone-frame::after {
  content: '';
  position: absolute;
  display: none;
  z-index: 2;
}

/* HERO CARD */
.hero-content { display: flex; flex-direction: column; align-items: flex-start; }
.hero-bigtitle {
  font-size: 54px; font-weight: 700; line-height: 1.1;
  color: var(--ink-900); margin: 0 0 18px;
  letter-spacing: -0.5px;
  max-width: 480px;
}
.hero-bigsubtitle {
  font-size: 18px; font-weight: 400; line-height: 1.6;
  color: var(--ink-500); margin: 0 0 12px;
  max-width: 480px;
}
.hero-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  width: 100%; max-width: 540px;
  margin-top: -12px;
}
.hero-trust-bullets {
  list-style: none; padding: 0; margin: 32px 0 0;
  display: flex; flex-direction: column; gap: 10px;
}
.hero-trust-bullets li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; font-weight: 500; color: var(--ink-500);
}
.hero-trust-bullets li svg {
  width: 15px; height: 15px; color: var(--success); flex-shrink: 0; margin-top: 1px;
}
@media (max-width: 880px) {
  .hero-card { margin-top: 0; }
  .hero-trust-bullets { align-items: flex-start; text-align: left; }
}
.hero-card-banner {
  display: inline-flex; align-items: baseline; gap: 6px;
  background: var(--brand-primary); color: var(--white);
  padding: 12px 20px; border-radius: var(--radius-sm);
  margin-bottom: 24px;
}
.hero-card-banner-strong {
  font-size: 26px; font-weight: 800; letter-spacing: 0.5px;
}
.hero-card-banner-light {
  font-size: 22px; font-weight: 400;
}
.hero-headline {
  font-size: 28px; font-weight: 700; line-height: 1.15;
  color: var(--brand-secondary); margin: 0 0 8px;
}
.hero-supporting {
  font-size: 18px; font-weight: 700;
  color: var(--brand-secondary); margin: 0 0 24px;
  letter-spacing: 0.3px;
}
.hero-input-wrapper {
  position: relative;
  margin-bottom: 12px;
}
.hero-input-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--brand-primary); pointer-events: none;
}
.hero-input {
  width: 100%; padding: 16px 110px 16px 44px;
  border: 1px solid var(--ink-300); border-radius: var(--radius);
  /* Dynamic: shrinks on narrow phones so the demo address doesn't truncate,
     caps at 16px on desktop (also the iOS no-zoom threshold at the top end). */
  font-size: clamp(14px, 3.7vw, 16px); color: var(--ink-900);
  background: var(--white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hero-input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-20);
}
.hero-input::placeholder { color: var(--ink-500); }
.hero-card-heading {
  font-size: 15px; font-weight: 600; color: var(--ink-900);
  margin: 0 0 14px;
}
.hero-input-inline {
  display: flex; align-items: center;
  border: 1px solid var(--ink-300); border-radius: var(--radius);
  background: var(--white);
  padding: 4px 4px 4px 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hero-input-inline:focus-within {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-20);
}
.hero-input-inline .hero-input {
  border: none; padding: 12px 12px 12px 44px;
  box-shadow: none; background: transparent;
  flex: 1; min-width: 0;
}
.hero-input-inline .hero-input:focus { outline: none; box-shadow: none; }
.hero-inline-btn {
  background: var(--brand-green); color: var(--white);
  padding: 10px 20px; border-radius: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.2px;
  white-space: nowrap; flex-shrink: 0;
  border: none; cursor: pointer;
  transition: background 0.15s ease;
}
.hero-inline-btn:hover { background: var(--brand-green-dark); }
.hero-input-google {
  position: absolute; right: 16px; bottom: -18px;
  font-size: 8px; color: var(--ink-400);
}
.hero-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--white);
  border: 1px solid #e5e7eb;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 10;
  max-height: 280px; overflow-y: auto;
}
.hero-dropdown-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ink-100);
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--ink-700);
  transition: background 0.1s ease;
}
.hero-dropdown-item:last-child { border-bottom: none; }
.hero-dropdown-item:hover, .hero-dropdown-item.active {
  background: var(--brand-primary-light); color: var(--ink-900);
}
.hero-dropdown-item svg { color: var(--brand-primary); flex-shrink: 0; }
.hero-helper {
  text-align: center; font-size: 14px; color: var(--brand-secondary);
  margin: 16px 0 16px; line-height: 1.4;
}
.hero-helper strong { color: var(--brand-secondary); font-weight: 700; }
.hero-action-row { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.hero-cta {
  width: auto; padding: 12px 29px; border-radius: 999px;
  font-size: 16px; font-weight: 600; letter-spacing: 0.2px;
  color: var(--white);
  transition: background 0.15s ease, transform 0.1s ease;
}
.hero-cta:active { transform: scale(0.98); }
.hero-cta-primary { background: var(--brand-green); }
.hero-cta-primary:hover { background: var(--brand-green-dark); }
.hero-cta-secondary { background: transparent; color: var(--ink-900); border: 1px solid var(--ink-300); }
.hero-cta-secondary:hover { border-color: var(--ink-900); }

/* Premium hero CTA — content-width pill with brand green gradient, deep
   warm shadow, and a subtle lift on hover. Sized for the hero card
   without being full-width. */
.hero-cta-block {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 44px;
  font-size: 16.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em;
  background: linear-gradient(135deg, #2FA05F 0%, var(--brand-green) 50%, var(--brand-green-dark) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.15s ease;
}
.hero-cta-block:hover {
  background: linear-gradient(135deg, #2FA05F 0%, var(--brand-green) 50%, var(--brand-green-dark) 100%);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30);
  filter: brightness(1.03);
}
.hero-cta-block:active { transform: translateY(0); filter: brightness(0.98); }

/* Mobile logo (in body) — desktop hidden, mobile shown */
.hero-mobile-logo { display: none; }

@media (max-width: 880px) {
  /* Remove header on mobile entirely */
  .header { display: none; }
  .hero { padding: 14px 0 40px; }
  .hero-card { position: relative; z-index: 5; }
  /* Mobile order: text → phone → card (pure CSS, no JS reorder) */
  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "phone"
      "card";
    gap: 10px;
  }
  .hero-content { align-items: center; text-align: center; }
  /* Centered mobile logo at top of body */
  .hero-mobile-logo {
    display: block; margin: 4px auto 10px;
    height: 33px; width: auto;
  }
  .hero-bigtitle {
    font-size: 37px; line-height: 1.05; margin-bottom: 12px;
    text-align: center;
  }
  .hero-bigsubtitle {
    font-size: 15px; margin-bottom: 14px;
    text-align: center; max-width: none;
  }
  .hero-card {
    padding: 0; max-width: none;
    background: transparent; box-shadow: none; border: none;
    width: 100%;
  }
  .hero-helper { text-align: center; }
  .hero-action-row { display: flex; align-items: center; justify-content: center; }
  /* Mobile hero CTA — compact pill, not full-width. Keeps the brand
     gradient + gives it a solid drop-shadow that reads like a "3D lift". */
  .hero-cta-primary { width: auto; }
  .hero-cta-block {
    width: auto;
    padding: 14px 36px;
    font-size: 17px;
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .hero-cta-block:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30);
  }
  .hero-cta-block:active {
    transform: translateY(0);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20);
  }
  .hero-trust-bullets { align-items: center; text-align: center; }
  /* Scroll input nicely into view on focus (avoid keyboard obscuring) */
  .hero-input, #quiz-address { scroll-margin-top: 24px; scroll-margin-bottom: 80px; }
  /* Phone fits between subtitle and search card on mobile (JS moves it).
     Smaller fixed size; further reduction kicks in on shorter screens. */
  .hero-illustration {
    margin: 4px 0 8px;
    padding: 0;
    background: transparent;
    align-self: center;
  }
  .phone-mockup { --phone-w: 150px; }
  .phone-demo-label { font-size: 5.4px; letter-spacing: 0.2px; margin-top: 6px; }

  /* Stack Compare below a FULL-WIDTH address input so Google sizes its
     autocomplete dropdown to the whole search box (no more truncated
     addresses). The button drops to a greyed, full-width secondary. */
  .hero-input-inline {
    flex-wrap: wrap;
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }
  .hero-input-inline:focus-within { border: none; box-shadow: none; }
  .hero-input-inline .hero-input {
    flex: 1 1 100%;
    border: 1px solid var(--ink-300);
    border-radius: var(--radius);
    background: var(--white);
    padding: 14px 14px 14px 44px;
  }
  .hero-input-inline .hero-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-20);
  }
  /* Icon now sits over the input (first row), not the stacked wrapper centre. */
  .hero-input-inline .hero-input-icon { top: 24px; }
  .hero-inline-btn {
    flex: 1 1 100%;
    width: 100%;
    margin-top: 8px;
    padding: 14px 20px;
    font-size: 15px;
    background: var(--ink-100);
    color: var(--ink-500);
    border: 1px solid var(--ink-300);
  }
  .hero-inline-btn:hover { background: var(--ink-100); }
}
@media (max-width: 880px) and (max-height: 800px) {
  .phone-mockup { --phone-w: 128px; }
}
@media (max-width: 880px) and (max-height: 700px) {
  .phone-mockup { --phone-w: 113px; }
}

/* =============================================================
   TRUST STRIP
   ============================================================= */
.trust-strip {
  background: var(--white);
  padding: 40px 0;
  border-bottom: 1px solid var(--ink-100);
}
.trust-strip-grid {
  display: flex; align-items: stretch; justify-content: center;
  flex-wrap: wrap; gap: 20px;
  max-width: 960px; margin: 0 auto;
}
.trust-strip-card {
  flex: 1; min-width: 200px; max-width: 280px;
  background: var(--ink-50);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 12px;
  transition: border-color 0.2s ease;
}
.trust-strip-card:hover {
  border-color: var(--brand-primary-30);
}
.trust-strip-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.trust-strip-icon svg { width: 22px; height: 22px; }
.trust-strip-card-1 .trust-strip-icon { background: rgba(255,191,12,0.12); }
.trust-strip-card-1 .trust-strip-icon svg { color: var(--brand-secondary); }
.trust-strip-card-2 .trust-strip-icon { background: rgba(247,146,34,0.12); }
.trust-strip-card-2 .trust-strip-icon svg { color: var(--brand-primary); }
.trust-strip-card-3 .trust-strip-icon { background: var(--brand-green-10); }
.trust-strip-card-3 .trust-strip-icon svg { color: var(--success); }
.trust-strip-card span {
  font-size: 13.5px; font-weight: 600; color: var(--ink-700); line-height: 1.4;
}
@media (max-width: 680px) {
  .trust-strip-grid { flex-direction: column; align-items: center; }
  .trust-strip-card { max-width: 320px; width: 100%; }
}

/* =============================================================
   SECTION HEADER (shared)
   ============================================================= */
.section-header { text-align: center; margin-bottom: 60px; }
.section-title {
  font-size: 36px; font-weight: 600; line-height: 1.2;
  color: var(--ink-900); margin: 0 0 16px;
  letter-spacing: -0.5px;
}

/* Inline numeric emphasis inside body copy — colour only, no
   highlighter (keeps paragraph rhythm clean). */
.num-accent {
  color: var(--brand-green);
  font-weight: 700;
}

/* Title accent: green keyword + soft yellow highlighter band across
   the bottom third of the word. Uses palette green + yellow together. */
.title-accent {
  color: var(--brand-green);
  background-image: linear-gradient(180deg,
    transparent 0,
    transparent 62%,
    rgba(254, 236, 37, 0.55) 62%,
    rgba(254, 236, 37, 0.55) 92%,
    transparent 92%);
  background-repeat: no-repeat;
  padding: 0 4px;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.section-subtitle {
  font-size: 15px; color: var(--ink-500); font-weight: 400;
  margin: 0; max-width: 520px; margin-left: auto; margin-right: auto;
  line-height: 1.7;
}
@media (max-width: 768px) {
  .section-title { font-size: 26px; }
  .section-subtitle { font-size: 14px; }
}

/* =============================================================
   STEPS / HOW IT WORKS
   ============================================================= */
.steps { padding: 100px 0; background: var(--white); }
.steps-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.step-card {
  background: var(--ink-50);
  border-radius: var(--radius-lg);
  padding: 32px 28px 36px;
  text-align: left;
  border: none;
  transition: background 0.2s ease;
  position: relative;
}
.step-card:hover { background: var(--ink-100); }
.step-number {
  width: 40px; height: 40px; margin: 0 0 24px;
  background: transparent;
  color: var(--ink-500);
  border: 1px solid var(--ink-300);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 600;
}
.step-title {
  font-size: 16px; font-weight: 600; color: var(--ink-900);
  margin: 0 0 10px;
}
.step-desc {
  font-size: 13.5px; color: var(--ink-500);
  margin: 0 0 16px; line-height: 1.7;
}
.step-time {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--white); color: var(--ink-700);
  padding: 5px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 500;
  border: 1px solid var(--ink-100);
}
.step-time svg { color: var(--brand-primary); }
@media (max-width: 768px) {
  .steps-grid { grid-template-columns: 1fr; }
  .steps { padding: 64px 0; }
}

/* =============================================================
   CTA STRIP (neutralized — no orange band)
   ============================================================= */
section.cta-section {
  background: #fff !important;
  padding: 32px 0 !important;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}
section.cta-section .container { display: flex; justify-content: center; }
.cta-button {
  background: var(--brand-green); color: var(--white);
  padding: 12px 29px; border-radius: 999px;
  font-size: 16px; font-weight: 600; letter-spacing: 0.2px;
  transition: background 0.15s ease, transform 0.1s ease;
  box-shadow: none;
}
.cta-button:hover { background: var(--brand-green-dark); transform: translateY(-2px); }
.cta-button:active { transform: translateY(0); }
.cta-button-large { padding: 20px 48px; font-size: 18px; }

/* =============================================================
   COST CARDS
   ============================================================= */
.cost-cards { padding: 100px 0; background: var(--ink-50); }
.cost-cards-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cost-card {
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  text-align: left;
  transition: border-color 0.2s ease;
}
.cost-card:hover { border-color: var(--ink-300); }
.cost-card-featured {
  border: 1px solid var(--ink-300);
  background: var(--white);
  position: relative;
}
.cost-card-featured::before { display: none; }
.cost-card-icon {
  width: 40px; height: 40px; margin: 0 0 20px;
  background: transparent;
  color: var(--ink-500);
  border: 1px solid var(--ink-300);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.cost-card-icon svg { width: 20px; height: 20px; }
.cost-card-band {
  display: block;
  font-size: 12px; font-weight: 500; letter-spacing: 0.3px;
  color: var(--ink-500); text-transform: none;
  margin-bottom: 4px;
}
.cost-card-title {
  font-size: 32px; font-weight: 700; color: var(--ink-900);
  margin: 0 0 14px; letter-spacing: -0.5px;
}
.cost-card-desc {
  font-size: 13.5px; color: var(--ink-500);
  margin: 0; line-height: 1.7;
}
.cost-cards-disclaimer {
  text-align: center; font-size: 12px; color: var(--ink-500);
  margin-top: 36px; max-width: 640px;
  margin-left: auto; margin-right: auto;
  font-style: normal;
}
@media (max-width: 768px) {
  .cost-cards-grid { grid-template-columns: 1fr; }
  .cost-cards { padding: 64px 0; }
}

/* =============================================================
   HOW SOLAR WORKS
   ============================================================= */
.how-solar { padding: 100px 0; background: var(--white); }
.how-solar-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.how-solar-card {
  background: var(--ink-50);
  border-radius: var(--radius-lg);
  padding: 32px 28px 36px;
  border: none;
  transition: background 0.2s ease;
}
.how-solar-card:hover { background: var(--ink-100); }
.how-solar-icon {
  width: 40px; height: 40px;
  background: transparent;
  color: var(--ink-500);
  border: 1px solid var(--ink-300);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
}
.how-solar-icon svg { width: 20px; height: 20px; }
.how-solar-card-title {
  font-size: 16px; font-weight: 600; color: var(--ink-900);
  margin: 0 0 10px;
}
.how-solar-card-desc {
  font-size: 13.5px; color: var(--ink-500);
  margin: 0; line-height: 1.7;
}
@media (max-width: 768px) {
  .how-solar-grid { grid-template-columns: 1fr; }
  .how-solar { padding: 64px 0; }
}

/* =============================================================
   FAQ
   ============================================================= */
.faq { padding: 100px 0; background: var(--ink-50); }
.faq-list { max-width: 680px; margin: 0 auto; }
.faq-item {
  background: transparent;
  border-radius: 0;
  margin-bottom: 0;
  overflow: hidden;
  border: none;
  border-bottom: 1px solid var(--ink-100);
  transition: none;
}
.faq-item:last-child { border-bottom: none; }
.faq-item:hover { border-color: var(--ink-300); }
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0;
  font-size: 15px; font-weight: 600; color: var(--ink-900);
  text-align: left;
}
.faq-question svg {
  flex-shrink: 0; margin-left: 16px;
  color: var(--ink-500); width: 18px; height: 18px;
  transition: transform 0.2s ease;
}
.faq-item.open .faq-question svg { transform: rotate(180deg); }
.faq-answer {
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-item.open .faq-answer { max-height: 600px; }
.faq-answer-content {
  padding: 0 0 20px;
  font-size: 14px; color: var(--ink-500);
  line-height: 1.7;
}
@media (max-width: 768px) {
  .faq { padding: 56px 0; }
  .faq-question { padding: 16px 20px; font-size: 15px; }
  .faq-answer-content { padding: 0 20px 16px; font-size: 14px; }
}

/* =============================================================
   FINAL CTA
   ============================================================= */
.final-section {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: var(--white);
  padding: 100px 0;
  text-align: center;
  border-top: none;
}
.final-section-title {
  font-size: 36px; font-weight: 600;
  margin: 0 0 14px;
  letter-spacing: -0.5px; color: var(--white);
}
.final-section-subtitle {
  font-size: 15px; color: rgba(255,255,255,0.9);
  margin: 0 0 40px;
}
/* The CustomCodedRenderer prepends a platform-level rule that forces every
   .cta-button to an orange gradient with !important + a high-specificity
   [class*="cta"]:not(...) selector. To get a white pill on the orange
   .final-section background we use a class whose name contains no "cta"
   substring, so the platform selector simply doesn't match it. */
.final-compare-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--white); color: var(--brand-green);
  padding: 12px 29px;
  border: none; border-radius: 999px;
  font-size: 16px; font-weight: 600; letter-spacing: 0.2px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
  box-shadow: none;
}
.final-compare-btn:hover {
  background: var(--ink-50);
  color: var(--brand-green-dark);
  transform: translateY(-2px);
}
.final-compare-btn:active { transform: translateY(0); }
@media (max-width: 768px) {
  .final-section { padding: 56px 0; }
  .final-section-title { font-size: 30px; }
  .final-section-subtitle { font-size: 16px; }
}

/* =============================================================
   FLOATING MOBILE CTA
   ============================================================= */
.floating-cta {
  position: fixed; bottom: 16px; left: 16px; right: 16px;
  z-index: 40;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.floating-cta.hidden {
  opacity: 0; pointer-events: none; transform: translateY(20px);
}
.floating-cta button {
  width: 100%;
  background: var(--brand-green); color: var(--white);
  padding: 16px 24px; border-radius: 999px;
  font-size: 15px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
@media (min-width: 769px) {
  .floating-cta, .floating-cta.visible { display: none !important; }
}

/* =============================================================
   FOOTER
   ============================================================= */
.footer {
  background: #0c0f14;
  color: var(--white);
  padding: 72px 0 32px;
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: 48px; margin-bottom: 40px;
}
.footer-brand {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.footer-logo-mark { width: 60px; height: 40px; }
.footer-brand-name {
  font-size: 22px; font-weight: 800; color: #ffffff !important;
  letter-spacing: 0.5px;
}
.footer-desc {
  font-size: 14px; color: #ffffff !important;
  line-height: 1.6; max-width: 360px;
  margin: 0 0 12px;
}
.footer-address {
  font-size: 13px; color: #ffffff !important;
  margin: 0; opacity: 0.95;
}
.footer-title {
  font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: #ffffff !important;
  margin: 0 0 16px;
}
.footer-links {
  list-style: none; padding: 0; margin: 0;
}
.footer-links li { margin-bottom: 10px; }
.footer-links a {
  font-size: 14px; color: #ffffff !important;
  transition: opacity 0.15s ease;
}
.footer-links a:hover { opacity: 0.7; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.25) !important;
  padding-top: 24px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.footer-legal { display: flex; gap: 24px; }
.footer-legal a {
  font-size: 13px; color: #ffffff !important;
  transition: opacity 0.15s ease;
}
.footer-legal a:hover { opacity: 0.7; }
.footer-copyright {
  font-size: 13px; color: #ffffff !important;
  margin: 0;
}
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* =============================================================
   POPUP OVERLAY (form quiz)
   ============================================================= */
/* FULLSCREEN white form (My Top Agent / WIO style) */
.popup-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: var(--white);
  display: none; opacity: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: opacity 0.2s ease;
}
.popup-overlay.active {
  display: block; opacity: 1;
}
.popup-back, .popup-close {
  position: fixed; top: 24px; z-index: 102;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ink-50); color: var(--ink-700);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--ink-100);
  transition: transform 0.15s ease, background 0.15s ease;
}
.popup-back { left: 24px; }
.popup-close { right: 24px; font-size: 26px; line-height: 1; }
.popup-back:hover, .popup-close:hover { background: var(--ink-100); transform: scale(1.05); }
.popup-back[hidden] { display: none !important; }
.popup-container {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  padding: 64px 24px 48px;
  animation: popup-in 0.25s ease-out;
  overflow: visible;
}
@keyframes popup-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.popup-content {
  width: 100%; max-width: 560px;
  margin: auto 0;
  padding: 16px 0;
  display: flex; flex-direction: column;
  align-items: stretch;
  overflow: visible;
}
.form-logo {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.form-logo-image { display: block; height: 44px; width: auto; }

/* PHASE PROGRESS DOTS */
.phase-progress {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-bottom: 32px;
}
.phase-dot {
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--ink-300);
  transition: all 0.3s ease;
}
.phase-dot.active {
  width: 32px; background: var(--brand-primary);
}
.phase-dot.complete { background: var(--brand-primary); }

/* FORM STEP */
.form-step {
  text-align: center;
  animation: step-in 0.3s ease;
}
@keyframes step-in {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
.form-step[hidden] { display: none; }
.step-heading {
  font-size: 26px; font-weight: 700; color: var(--ink-900);
  margin: 0 0 8px; line-height: 1.25;
}
.step-subhead {
  font-size: 15px; color: var(--ink-500);
  margin: 0 0 28px; line-height: 1.5;
}
.step-helper {
  font-size: 13px; color: var(--ink-500);
  margin: 16px 0 0;
}
.step-trust {
  font-size: 12px; color: var(--ink-700);
  margin: 8px 0 0; font-weight: 500;
}
.step-actions-row {
  display: flex; justify-content: center;
  margin-top: 24px;
}
.step-actions-row-double { gap: 12px; flex-wrap: wrap; }

/* Step 1 (address) — compact layout so map + buttons fit viewport */
.form-step[data-step="1"] .step-heading { font-size: 22px; margin-bottom: 2px; }
.form-step[data-step="1"] .step-subhead { margin-bottom: 8px; font-size: 14px; }
.form-step[data-step="1"] { overflow: visible; padding-bottom: 320px; }
.form-step[data-step="1"] .address-input-wrapper { overflow: visible; min-height: 60px; }

/* Address map (satellite view shown after address picked) */
.address-map-wrapper {
  margin: 8px 0 0;
  animation: consent-fade-in 0.35s ease-out;
}
.address-map {
  width: 100%; height: calc(100vh - 520px); min-height: 160px; max-height: 400px;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--ink-200);
  box-shadow: 0 4px 16px rgba(15,23,42,0.08);
  background:
    linear-gradient(135deg, rgba(22,126,65,0.08) 0%, rgba(247,146,34,0.06) 100%),
    repeating-linear-gradient(45deg, #e5e7eb 0, #e5e7eb 1px, transparent 1px, transparent 12px),
    #f3f4f6;
}
.address-map-placeholder {
  display: flex; align-items: center; justify-content: center;
  height: 100%; width: 100%;
  font-size: 13px; font-weight: 600; color: var(--ink-500);
  text-align: center; padding: 24px;
}
.address-map-label {
  font-size: 14px; font-weight: 600; color: var(--ink-900);
  text-align: center; margin: 8px 0 0;
}

/* Secondary "Change" button styled as outline */
.continue-btn-secondary {
  background: transparent;
  border: 2px solid var(--ink-300);
  color: var(--ink-700);
  font-size: 15px; font-weight: 600;
  padding: 12px 24px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.continue-btn-secondary:hover {
  background: var(--ink-50);
  border-color: var(--ink-500);
  color: var(--ink-900);
}
@media (max-width: 480px) {
  .step-actions-row-double { flex-direction: column-reverse; align-items: stretch; }
  .step-actions-row-double .continue-btn,
  .step-actions-row-double .continue-btn-secondary { width: 100%; }
  .address-map { height: calc(100vh - 460px); min-height: 120px; max-height: 240px; }

  /* Address step — empty state (input only): positions the question + input block around mid-
     viewport so the address bar sits in the natural thumb-zone on one-handed use, while still
     leaving a clean gap below the popup logo/progress strip. Browser auto-scrolls input above
     the keyboard on focus, so this only affects the resting (pre-keyboard) position. */
  .form-step[data-step="1"]:has(.address-map-wrapper[hidden]) { padding-top: 12vh; }

  /* Address step — map-shown state (post-selection): compact layout so Yes/Continue + Change
     both fit above the fold on small Android phones with on-screen 3-button nav. */
  .form-step[data-step="1"]:has(.address-map-wrapper:not([hidden])) { padding-bottom: 24px; }
  .form-step[data-step="1"]:has(.address-map-wrapper:not([hidden])) .step-heading { font-size: 20px; margin-bottom: 0; }
  .form-step[data-step="1"]:has(.address-map-wrapper:not([hidden])) .step-subhead { font-size: 13px; margin-bottom: 4px; }
  .form-step[data-step="1"]:has(.address-map-wrapper:not([hidden])) .address-map-wrapper { margin-top: 4px; }
  .form-step[data-step="1"]:has(.address-map-wrapper:not([hidden])) .address-map { max-height: 200px; min-height: 140px; }
  .form-step[data-step="1"]:has(.address-map-wrapper:not([hidden])) .address-map-label { font-size: 13px; margin-top: 4px; }
  .form-step[data-step="1"]:has(.address-map-wrapper:not([hidden])) .step-trust { font-size: 11px; margin-top: 4px; }
  .form-step[data-step="1"]:has(.address-map-wrapper:not([hidden])) .consent-note { margin-top: 8px; padding: 8px 12px; font-size: 12px; }
  .form-step[data-step="1"]:has(.address-map-wrapper:not([hidden])) .step-actions-row { margin-top: 12px; gap: 8px; }
}
.consent-note {
  margin: 12px 0 0;
  padding: 10px 14px;
  background: var(--ink-50);
  border: 1px solid var(--ink-100);
  border-left: 3px solid var(--brand-primary);
  border-radius: 8px;
  text-align: left;
  animation: consent-fade-in 0.35s ease-out;
}
.consent-note p {
  font-size: 11px; line-height: 1.45;
  color: var(--ink-700); margin: 0 0 4px;
}
.consent-note p:last-child { margin-bottom: 0; }
.consent-note a {
  color: var(--brand-primary); font-weight: 600; text-decoration: underline;
}
.consent-note strong { color: var(--ink-900); font-weight: 700; }
@keyframes consent-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* STEP INPUT */
.step-input {
  width: 100%; padding: 16px 20px;
  border: 1.5px solid var(--ink-300);
  border-radius: var(--radius);
  font-size: 16px; color: var(--ink-900);
  background: var(--white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  text-align: center;
}
.step-input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-20);
}
.step-input::placeholder { color: var(--ink-500); opacity: 1; font-weight: 400; }
/* Contact inputs: left-aligned so Chrome recognises the field group for autofill */
.step-input.contact-input { text-align: left; }

.input-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin-bottom: 16px;
}
.input-wrapper {
  margin-bottom: 16px;
  position: relative;
}
.input-wrapper-center { text-align: center; }
.input-error {
  font-size: 13px; color: var(--danger);
  margin-top: 6px; min-height: 18px;
  text-align: left;
}
.input-wrapper-center .input-error { text-align: center; }

/* ADDRESS INPUT (quiz) */
.address-input-wrapper {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
}
.address-input { padding-right: 110px !important; text-align: left; }
.powered-by-google {
  position: absolute; right: 16px; bottom: -22px;
  font-size: 8px; color: var(--ink-400);
  pointer-events: none;
}
.address-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--white);
  border: 1px solid #e5e7eb;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  max-height: 400px; overflow-y: auto;
  text-align: left;
}
.address-dropdown-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ink-100);
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--ink-700);
  transition: background 0.1s ease;
}
.address-dropdown-item:last-child { border-bottom: none; }
.address-dropdown-item:hover, .address-dropdown-item.active {
  background: var(--brand-primary-light); color: var(--ink-900);
}
.address-dropdown-item svg { color: var(--brand-primary); flex-shrink: 0; }
.address-dropdown-section-title {
  padding: 8px 16px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--ink-500); background: var(--ink-50);
}

/* RADIO CARDS */
.radio-cards {
  display: flex; flex-direction: column; gap: 10px;
  max-width: 440px; margin: 0 auto;
}
.radio-cards-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  max-width: 480px;
}
.radio-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: var(--white);
  border: 1.5px solid var(--ink-300);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  position: relative;
}
.radio-card:hover {
  border-color: var(--brand-primary);
  background: var(--brand-primary-light);
}
.radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.radio-card input:checked ~ * { color: var(--ink-900); }
.radio-card:has(input:checked) {
  border-color: var(--brand-green);
  background: var(--brand-green-light);
  box-shadow: 0 0 0 3px var(--brand-green-20);
}
.radio-card-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  background: var(--brand-primary-light);
  color: var(--brand-primary);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.radio-card-icon svg { width: 22px; height: 22px; }
.radio-card-text { flex: 1; line-height: 1.4; }
.radio-card-text strong {
  display: block; font-size: 15px; font-weight: 700; color: var(--ink-900);
}
.radio-card-text span {
  display: block; font-size: 13px; color: var(--ink-500); margin-top: 2px;
}

/* REGION CHIPS */
.region-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; max-width: 560px; margin: 0 auto;
}
.region-chip {
  cursor: pointer;
  padding: 12px 8px;
  background: var(--white);
  border: 1.5px solid var(--ink-300);
  border-radius: var(--radius);
  font-size: 13px; font-weight: 600; color: var(--ink-700);
  text-align: center;
  transition: all 0.15s ease;
  position: relative;
}
.region-chip input { position: absolute; opacity: 0; pointer-events: none; }
.region-chip:hover {
  border-color: var(--brand-primary);
  background: var(--brand-primary-light);
}
.region-chip:has(input:checked) {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
  color: var(--white);
}
@media (max-width: 480px) {
  .region-grid { grid-template-columns: repeat(2, 1fr); }
  .radio-cards-grid { grid-template-columns: 1fr; }
}

/* MOBILE FORM UI — more breathing room, card contrast */
@media (max-width: 640px) {
  .popup-overlay { background: var(--ink-50); }
  .popup-container { padding: 56px 48px 40px; }
  .popup-content { max-width: 100%; padding: 0; }
  .address-map { height: calc(100vh - 480px); min-height: 140px; max-height: 280px; }
  .form-step { padding: 0; }
  .step-heading { font-size: 22px; }
  .step-subheading { font-size: 14px; }
  .radio-cards { max-width: 100%; gap: 8px; }
  .radio-cards-grid { gap: 8px; }
  .radio-card {
    padding: 14px 16px; gap: 12px;
    background: var(--white);
    border: 1px solid var(--ink-300);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }
  .radio-card:has(input:checked) {
    box-shadow: 0 0 0 2px var(--brand-primary-20);
  }
  .radio-card-icon { width: 36px; height: 36px; border-radius: 10px; }
  .radio-card-icon svg { width: 18px; height: 18px; }
  .radio-card-text strong { font-size: 14px; }
  .radio-card-text span { font-size: 12px; }
  .region-chip {
    padding: 10px 6px; font-size: 12px;
    background: var(--white); border-radius: 10px;
    border: 1px solid var(--ink-300);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }
  .slider-wrapper { max-width: 100%; }
  .continue-btn { font-size: 15px; padding: 14px 24px; border-radius: 999px; }
  .popup-back, .popup-close {
    top: 14px; width: 38px; height: 38px;
  }
  .popup-back { left: 14px; }
  .popup-close { right: 14px; font-size: 22px; }
  .phase-progress { margin-bottom: 24px; }
}

/* SLIDER */
.slider-wrapper {
  max-width: 480px; margin: 0 auto;
  text-align: center;
}
.slider-value {
  font-size: 56px; font-weight: 800;
  color: var(--brand-primary);
  margin-bottom: 16px; line-height: 1;
}
.slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px;
  background: var(--ink-300);
  border-radius: 999px;
  outline: none;
  margin: 16px 0 0;
  position: relative;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px;
  background: var(--brand-primary);
  border: 3px solid var(--white);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(248,146,29,0.4);
  position: relative;
  z-index: 2;
}
.slider::-moz-range-thumb {
  width: 28px; height: 28px;
  background: var(--brand-primary);
  border: 3px solid var(--white);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(248,146,29,0.4);
}
/* Tick marks below slider */
.slider-ticks {
  display: flex; justify-content: space-between;
  padding: 0;
  margin-top: 10px;
  position: relative;
}
.slider-ticks span {
  font-size: 11px; font-weight: 500; color: var(--ink-400);
  text-align: center;
  position: relative;
  min-width: 24px;
}
.slider-ticks span::before {
  content: '';
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  width: 1px; height: 6px;
  background: var(--ink-300);
}
/* Legacy labels fallback */
.slider-labels {
  display: flex; justify-content: space-between;
  font-size: 13px; color: var(--ink-500);
  margin-top: 4px;
}

/* CONTINUE BUTTON */
.continue-btn {
  background: var(--brand-green); color: var(--white);
  padding: 16px 36px; border-radius: 999px;
  font-size: 16px; font-weight: 700;
  transition: background 0.15s ease, transform 0.1s ease;
  min-width: 180px;
}
.continue-btn:hover:not(:disabled) {
  background: var(--brand-green-dark);
}
.continue-btn:active:not(:disabled) { transform: scale(0.98); }
.continue-btn:disabled {
  background: var(--ink-300); cursor: not-allowed;
}

/* SECURE BADGE */
.secure-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-500);
  margin-top: 16px;
}
.secure-badge svg { color: var(--success); }
.otp-secure-row { text-align: center; margin-top: 14px; }

/* SMS / OTP INPUT */
.sms-input {
  width: 280px; max-width: 100%;
  padding: 18px 16px;
  border: 2px solid var(--ink-300);
  border-radius: var(--radius);
  font-size: 32px; font-weight: 700; letter-spacing: 12px;
  text-align: center;
  color: var(--ink-900);
  margin: 0 auto;
  display: block;
}
.sms-input:focus {
  outline: none; border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-20);
}
.sms-helper {
  font-size: 13px; color: var(--ink-500);
  margin: 16px 0;
}
.resend-link {
  color: var(--brand-primary); font-weight: 600;
  text-decoration: underline;
  background: none; padding: 0; margin: 0;
  font-size: inherit;
}
.resend-link:disabled { color: var(--ink-300); text-decoration: none; cursor: not-allowed; }

/* =============================================================
   ANALYSIS ANIMATION SCREEN (step 13)
   ============================================================= */
.analysis-screen {
  display: flex; flex-direction: column; align-items: center;
  padding: 20px 0 0;
}
.analysis-icon {
  width: 56px; height: 56px; margin-bottom: 20px;
}
.analysis-icon svg { width: 100%; height: 100%; }
@keyframes analysis-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.analysis-icon-spin {
  transform-origin: 24px 24px;
  animation: analysis-spin 3s linear infinite;
}
.analysis-checklist {
  display: flex; flex-direction: column; gap: 14px;
  width: 100%; max-width: 360px;
  margin: 24px auto 28px;
  text-align: left;
}
.analysis-item {
  display: flex; align-items: center; gap: 12px;
  opacity: 0.25;
  transition: opacity 0.3s ease;
}
.analysis-item.active { opacity: 1; }
.analysis-item.done { opacity: 1; }
.analysis-check {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--ink-300);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s ease;
  position: relative;
}
/* Waiting state — empty circle */
.analysis-item .analysis-check::after {
  content: '';
  display: none;
}
/* Active state — pulsing dot */
.analysis-item.active .analysis-check {
  border-color: var(--brand-primary);
  background: var(--brand-primary-10);
}
.analysis-item.active .analysis-check::after {
  content: '';
  display: block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand-primary);
  animation: analysis-pulse 1.2s ease-in-out infinite alternate;
}
@keyframes analysis-pulse {
  from { opacity: 0.3; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1.05); }
}
/* Done state — orange check */
.analysis-item.done .analysis-check {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
}
.analysis-item.done .analysis-check::after {
  content: '';
  display: block;
  width: 6px; height: 10px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: -2px;
  animation: none;
  border-radius: 0;
  background: none;
}
.analysis-label {
  font-size: 14px; font-weight: 500; color: var(--ink-700);
  line-height: 1.4;
}
.analysis-item.active .analysis-label { color: var(--ink-900); font-weight: 600; }
.analysis-item.done .analysis-label { color: var(--ink-900); }

.analysis-progress {
  width: 100%; max-width: 360px;
  height: 4px; border-radius: 999px;
  background: var(--ink-100);
  overflow: hidden;
  margin-bottom: 16px;
}
.analysis-progress-bar {
  height: 100%; width: 0%;
  border-radius: 999px;
  background: var(--brand-primary);
  transition: width 4s linear;
}
.analysis-powered {
  font-size: 11px; color: var(--ink-400);
  letter-spacing: 0.3px;
}

/* =============================================================
   SOLAR INSIGHTS RESULTS (step 14)
   ============================================================= */
.solar-results {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 0 0;
  animation: step-in 0.4s ease;
}
.solar-hero-stat {
  text-align: center; margin-bottom: 32px;
}
.solar-hero-label {
  font-size: 14px; font-weight: 600;
  color: var(--ink-500);
  text-transform: uppercase; letter-spacing: 1.5px;
  margin: 0 0 8px;
}
.solar-hero-pct {
  display: flex; align-items: baseline; justify-content: center;
  gap: 2px;
}
.solar-pct-number {
  font-size: 80px; font-weight: 800;
  color: var(--brand-primary);
  line-height: 1;
  letter-spacing: -2px;
}
.solar-pct-sign {
  font-size: 36px; font-weight: 700;
  color: var(--brand-primary);
  line-height: 1;
}
.solar-hero-sub {
  font-size: 16px; font-weight: 500;
  color: var(--ink-600, #475569);
  margin: 8px 0 0;
}
.solar-hero-disclaimer {
  font-size: 11px; color: var(--ink-400);
  margin: 10px auto 0; max-width: 360px;
  line-height: 1.5; font-weight: 400;
}

.solar-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; width: 100%; max-width: 520px;
  margin-bottom: 24px;
}
.solar-card {
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius);
  padding: 20px 16px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.solar-card:hover {
  border-color: var(--brand-primary-30);
  box-shadow: 0 4px 16px rgba(248,146,29,0.08);
}
.solar-card-icon {
  width: 40px; height: 40px;
  background: var(--brand-primary-10);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.solar-card-icon svg {
  width: 20px; height: 20px;
  color: var(--brand-primary);
}
.solar-card-eyebrow {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--ink-400);
}
.solar-card-value {
  font-size: 22px; font-weight: 800;
  color: var(--brand-green);
  line-height: 1.2;
}
.solar-card-desc {
  font-size: 12px; font-weight: 500;
  color: var(--ink-500);
}

.solar-fallback-note {
  display: flex; align-items: flex-start; gap: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 24px;
  max-width: 520px; width: 100%;
  text-align: left;
  animation: consent-fade-in 0.35s ease-out;
}
.solar-fallback-note[hidden] { display: none; }
.solar-fallback-note svg {
  width: 18px; height: 18px; flex-shrink: 0;
  color: #d97706; margin-top: 1px;
}
.solar-fallback-note span {
  font-size: 13px; color: #92400e; line-height: 1.5;
}
.solar-fallback-note strong { color: #78350f; }

/* Mobile responsive */
@media (max-width: 480px) {
  .solar-pct-number { font-size: 60px; }
  .solar-pct-sign { font-size: 28px; }
  /* Keep 3-column stat cards on mobile so the Get Free Quotes button is visible without scrolling */
  .solar-cards { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .solar-card { padding: 12px 6px; gap: 3px; text-align: center; }
  .solar-card-icon { width: 30px; height: 30px; border-radius: 8px; margin-bottom: 2px; }
  .solar-card-icon svg { width: 15px; height: 15px; }
  .solar-card-eyebrow { font-size: 8.5px; letter-spacing: 0.4px; line-height: 1.2; }
  .solar-card-value { font-size: 15px; }
  .solar-card-desc { font-size: 9.5px; line-height: 1.3; }
  .analysis-checklist { max-width: 100%; }
  .analysis-progress { max-width: 100%; }
  .analysis-label { font-size: 13px; }
}

/* FORM SUCCESS / THANK YOU */
.form-success {
  text-align: center;
  animation: step-in 0.4s ease;
}
.form-success[hidden] { display: none; }
.success-header { margin-bottom: 24px; }
.success-icon {
  width: 80px; height: 80px;
  margin: 0 auto 20px;
  background: var(--success); color: var(--white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  animation: success-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.success-icon svg { width: 44px; height: 44px; }
@keyframes success-pop {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.success-title {
  font-size: 28px; font-weight: 800; color: var(--ink-900);
  margin: 0 0 12px;
}
.success-subtitle {
  font-size: 15px; color: var(--ink-700);
  margin: 0; line-height: 1.6;
}
.success-reference {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--brand-primary-light);
  border: 1px solid var(--brand-primary-30);
  border-radius: var(--radius);
  padding: 12px 20px;
  margin: 24px 0;
}
.success-reference-label {
  font-size: 12px; font-weight: 700;
  color: var(--ink-500);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.success-reference-id {
  font-size: 16px; font-weight: 800;
  color: var(--brand-primary);
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  letter-spacing: 1px;
}
.success-trust {
  display: flex; flex-direction: column; gap: 10px;
  max-width: 360px; margin: 0 auto 28px;
  text-align: left;
}
.success-trust-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--ink-700);
}
.success-trust-item svg {
  width: 18px; height: 18px; color: var(--success);
  flex-shrink: 0;
}

/* Dynamic answer recap */
.success-recap {
  background: var(--ink-50);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius);
  padding: 8px 0;
  margin: 24px 0;
  text-align: left;
}
.success-recap-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--ink-100);
  font-size: 14px;
}
.success-recap-row:last-child { border-bottom: none; }
.success-recap-label {
  color: var(--ink-500);
  font-weight: 500;
  white-space: nowrap;
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.success-recap-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: var(--brand-primary-light);
  color: var(--brand-primary);
  border-radius: 6px;
}
.success-recap-icon svg { width: 14px; height: 14px; }
.success-recap-value {
  color: var(--ink-900);
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}

/* Confirmation list (next steps) */
.success-confirmation {
  text-align: left;
  margin: 0 0 24px;
}
.success-confirmation-title {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 16px;
}
.success-confirmation-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.success-confirmation-list li {
  padding: 10px 0 10px 32px;
  position: relative;
  font-size: 14px;
  color: var(--ink-700);
  line-height: 1.5;
}
.success-confirmation-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 12px;
  width: 22px; height: 22px;
  background: var(--success);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 14px 14px;
  background-position: center;
  background-repeat: no-repeat;
}
.success-confirmation-list li strong {
  color: var(--ink-900);
}
.success-secondary-link {
  display: inline-block;
  padding: 12px 24px;
  border: 1.5px solid var(--brand-green);
  border-radius: 999px;
  font-size: 14px; font-weight: 700;
  color: var(--brand-green);
  transition: all 0.15s ease;
}
.success-secondary-link:hover {
  background: var(--brand-green); color: var(--white);
}

/* RESUME-FORM PRE-PAINT (avoids step flash) */
html[data-pms-resume="1"] .form-step:not([data-paint-keep]) { display: none; }
html[data-pms-resume="1"] [data-paint-keep] { display: block; }

/* MOBILE POPUP — fullscreen */
@media (max-width: 768px) {
  .popup-container { padding: 56px 32px 32px; }
  .popup-back { top: 16px; left: 16px; width: 44px; height: 44px; }
  .popup-close { top: 16px; right: 16px; width: 44px; height: 44px; font-size: 22px; }
  .step-heading { font-size: 22px; }
}

/* =============================================================
   GRADIENT BUTTON — brand-green style
   ============================================================= */
.btn-gradient {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-green);
  color: #fff;
  font-size: 16px; font-weight: 600; letter-spacing: 0.2px;
  padding: 12px 29px;
  border-radius: 999px;
  text-transform: none;
  box-shadow: none;
  transition: background 0.15s ease, transform 0.15s ease;
  cursor: pointer; border: none;
  width: auto; max-width: none; min-width: 0;
}
.btn-gradient:hover { background: var(--brand-green-dark); transform: translateY(-2px); }
.btn-gradient:active { transform: translateY(0); }
.btn-gradient-wide { min-width: 0; width: auto; }
.btn-gradient-fullwidth { width: auto; max-width: none; padding: 12px 29px; font-size: 16px; }
@media (max-width: 768px) {
  .btn-gradient { font-size: 15px; padding: 12px 24px; }
  .btn-gradient-wide { min-width: 0; width: auto; }
  .btn-gradient-fullwidth { padding: 12px 24px; font-size: 15px; }
}

.section-action { display: flex; justify-content: center; margin-top: 24px; }
.section-action-left { justify-content: flex-start; margin-top: 12px; }

/* =============================================================
   NZ #1 INSTALLERS INTRO
   ============================================================= */
.nz-intro {
  padding: 72px 0 40px;
  background: var(--white);
  text-align: center;
}
.nz-intro-badge {
  display: flex; justify-content: center; margin-bottom: 16px;
}
.nz-intro-badge svg { width: 200px; height: auto; }
.nz-intro-title {
  font-size: 32px; font-weight: 700; color: var(--ink-900);
  margin: 0 0 18px; letter-spacing: -0.2px;
}
.nz-intro-text {
  font-size: 18px; color: var(--ink-700); line-height: 1.7;
  max-width: 880px; margin: 0 auto;
}
@media (max-width: 768px) {
  .nz-intro { padding: 48px 0 32px; }
  .nz-intro-badge svg { width: 150px; }
  .nz-intro-title { font-size: 20px; }
  .nz-intro-text { font-size: 15px; }
}

/* =============================================================
   DUAL-INFO 2-COLUMN (Costs / Power Co.)
   ============================================================= */
.dual-info { padding: 40px 0 80px; background: var(--white); }
.dual-info-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
}
.dual-info-col { display: flex; flex-direction: column; }
.dual-info-tab {
  align-self: flex-start;
  color: #fff; font-size: 18px; font-weight: 700; letter-spacing: 0.4px;
  padding: 14px 28px; margin-bottom: 0;
  position: relative; z-index: 2;
  width: 100%; text-align: center;
  border-top-left-radius: 8px; border-top-right-radius: 8px;
}
.dual-info-tab-orange { background: var(--brand-primary); }
.dual-info-tab-teal { background: var(--brand-secondary); }
.dual-info-image { position: relative; overflow: hidden; }
.dual-info-image svg { display: block; width: 100%; height: auto; }

/* =============================================================
   STAT VISUAL ANIMATIONS — default (pre-animation) states
   ============================================================= */
.stat-bar-fill,
.stat-meter-fill,
.stat-tl-fill-paying,
.stat-tl-fill-saving {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.stat-flow-step,
.stat-flow-arrow {
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.stat-check-item {
  opacity: 0; transform: translateX(-12px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.stat-compare-col {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.stat-kpi, .stat-row-item, .stat-tl-marker, .stat-tl-box,
.stat-check-footer, .stat-flow-stat {
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.stat-compare-tag {
  opacity: 0; transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Animated state — triggered by JS adding .stat-animated */
.stat-animated .stat-bar-fill,
.stat-animated .stat-meter-fill,
.stat-animated .stat-tl-fill-paying,
.stat-animated .stat-tl-fill-saving { transform: scaleX(1); }
.stat-animated .stat-flow-step,
.stat-animated .stat-flow-arrow,
.stat-animated .stat-check-item,
.stat-animated .stat-compare-col,
.stat-animated .stat-kpi, .stat-animated .stat-row-item,
.stat-animated .stat-tl-marker, .stat-animated .stat-tl-box,
.stat-animated .stat-check-footer, .stat-animated .stat-flow-stat,
.stat-animated .stat-compare-tag { opacity: 1; transform: none; }

/* Stagger — flow steps */
.stat-animated .stat-flow > :nth-child(1) { transition-delay: 0s; }
.stat-animated .stat-flow > :nth-child(2) { transition-delay: 0.15s; }
.stat-animated .stat-flow > :nth-child(3) { transition-delay: 0.3s; }
.stat-animated .stat-flow > :nth-child(4) { transition-delay: 0.45s; }
.stat-animated .stat-flow > :nth-child(5) { transition-delay: 0.6s; }
.stat-animated .stat-flow-stat:nth-child(1) { transition-delay: 0.9s; }
.stat-animated .stat-flow-stat:nth-child(2) { transition-delay: 1.0s; }
.stat-animated .stat-flow-stat:nth-child(3) { transition-delay: 1.1s; }
/* Stagger — checklist */
.stat-animated .stat-check-item:nth-child(1) { transition-delay: 0s; }
.stat-animated .stat-check-item:nth-child(2) { transition-delay: 0.12s; }
.stat-animated .stat-check-item:nth-child(3) { transition-delay: 0.24s; }
.stat-animated .stat-check-item:nth-child(4) { transition-delay: 0.36s; }
.stat-animated .stat-check-item:nth-child(5) { transition-delay: 0.48s; }
.stat-animated .stat-check-footer { transition-delay: 0.7s; }
/* Stagger — compare columns */
.stat-animated .stat-compare-col:nth-child(1) { transition-delay: 0s; }
.stat-animated .stat-compare-col:nth-child(2) { transition-delay: 0.15s; }
.stat-animated .stat-compare-col:nth-child(3) { transition-delay: 0.3s; }
.stat-animated .stat-compare-tag { transition-delay: 0.6s; }
/* Stagger — KPIs */
.stat-animated .stat-kpi:nth-child(1) { transition-delay: 0.8s; }
.stat-animated .stat-kpi:nth-child(2) { transition-delay: 0.9s; }
.stat-animated .stat-kpi:nth-child(3) { transition-delay: 1.0s; }
/* Stagger — stat rows */
.stat-animated .stat-row-item:nth-child(1) { transition-delay: 0.6s; }
.stat-animated .stat-row-item:nth-child(2) { transition-delay: 0.7s; }
.stat-animated .stat-row-item:nth-child(3) { transition-delay: 0.8s; }
/* Stagger — timeline */
.stat-animated .stat-tl-marker:nth-child(1) { transition-delay: 0.3s; }
.stat-animated .stat-tl-marker:nth-child(2) { transition-delay: 0.6s; }
.stat-animated .stat-tl-marker:nth-child(3) { transition-delay: 0.9s; }
.stat-animated .stat-tl-box:nth-child(1) { transition-delay: 1.0s; }
.stat-animated .stat-tl-box:nth-child(2) { transition-delay: 1.1s; }

/* Reduced motion — show everything immediately */
@media (prefers-reduced-motion: reduce) {
  .stat-bar-fill, .stat-meter-fill, .stat-tl-fill-paying, .stat-tl-fill-saving,
  .stat-flow-step, .stat-flow-arrow, .stat-check-item, .stat-compare-col,
  .stat-kpi, .stat-row-item, .stat-tl-marker, .stat-tl-box,
  .stat-check-footer, .stat-flow-stat, .stat-compare-tag {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* STAT VISUALS — clean data cards replacing SVG illustrations */
.stat-visual {
  background: var(--white); border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg); padding: 28px 24px;
}
.stat-visual-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; flex-wrap: wrap; gap: 8px;
}
.stat-visual-label {
  font-size: 13px; font-weight: 600; color: var(--ink-900); letter-spacing: 0.2px;
}
.stat-visual-badge {
  font-size: 11px; font-weight: 600; padding: 4px 10px;
  border-radius: 999px; letter-spacing: 0.2px;
}
.stat-visual-badge-green { background: var(--brand-mint); color: var(--brand-green); }
.stat-visual-badge-orange { background: #fff7ed; color: #d97706; }
.stat-example-note {
  margin-top: 14px; font-size: 11px; line-height: 1.4;
  color: var(--ink-500, #6b7280); font-style: italic;
}
.stat-visual-divider {
  height: 1px; background: var(--ink-100); margin: 20px 0;
}

/* Bar chart — cost comparison */
.stat-bars { display: flex; flex-direction: column; gap: 12px; }
.stat-bar-group {
  display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 10px;
}
.stat-bar-label {
  font-size: 11px; font-weight: 500; color: var(--ink-500); text-align: right;
}
.stat-bar-track {
  height: 28px; background: var(--ink-50); border-radius: 6px; overflow: hidden;
}
.stat-bar-fill {
  height: 100%; border-radius: 6px;
  transition: width 1s ease;
}
.stat-bar-old { background: var(--ink-300); }
.stat-bar-new { background: var(--brand-primary); }
.stat-bar-value {
  font-size: 14px; font-weight: 700; color: var(--brand-green); min-width: 60px;
}
.stat-bar-value-accent { color: var(--brand-green); }

/* KPI row */
.stat-kpis {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.stat-kpi { text-align: center; }
.stat-kpi-number {
  display: block; font-size: 22px; font-weight: 700; color: var(--brand-green);
  line-height: 1.2;
}
.stat-kpi-unit {
  display: block; font-size: 11px; font-weight: 500; color: var(--ink-500);
  margin-top: 2px;
}

/* Meter chart — bill comparison */
.stat-meter { display: flex; flex-direction: column; gap: 14px; }
.stat-meter-row {
  display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 12px;
}
.stat-meter-label {
  font-size: 11px; font-weight: 500; color: var(--ink-500); text-align: right;
}
.stat-meter-track {
  height: 32px; background: var(--ink-50); border-radius: 6px; overflow: hidden;
}
.stat-meter-fill {
  height: 100%; border-radius: 6px;
  display: flex; align-items: center; justify-content: flex-end; padding: 0 10px;
  font-size: 13px; font-weight: 700; color: var(--white);
  transition: width 1s ease;
}
.stat-meter-without { background: var(--ink-500); }
.stat-meter-with { background: var(--brand-primary); }

/* Row list — key-value stats */
.stat-row-list { display: flex; flex-direction: column; gap: 10px; }
.stat-row-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px;
}
.stat-row-key { font-size: 13px; font-weight: 500; color: var(--ink-500); }
.stat-row-val { font-size: 14px; font-weight: 700; color: var(--ink-900); }
.stat-row-val-red { color: #dc2626; }

@media (max-width: 680px) {
  .stat-bar-group { grid-template-columns: 40px 1fr auto; }
  .stat-meter-row { grid-template-columns: 70px 1fr; }
  .stat-kpis { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .stat-kpi-number { font-size: 18px; }
}

/* Flow diagram — vertical component chain */
.stat-flow {
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.stat-flow-step {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 12px 0;
}
.stat-flow-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.stat-flow-icon svg { width: 22px; height: 22px; }
.stat-flow-icon-orange { background: rgba(245,166,35,0.1); color: var(--brand-primary); }
.stat-flow-icon-dark { background: var(--ink-100); color: var(--ink-700); }
.stat-flow-icon-green { background: var(--brand-green-10); color: var(--brand-green); }
.stat-flow-name {
  font-size: 14px; font-weight: 600; color: var(--ink-900); margin-bottom: 3px;
}
.stat-flow-desc {
  font-size: 11.5px; font-weight: 400; color: var(--ink-500); max-width: 200px;
}
.stat-flow-arrow {
  width: 20px; height: 20px; color: var(--ink-300);
}
.stat-flow-arrow svg { width: 100%; height: 100%; }
.stat-flow-footer {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.stat-flow-stat { text-align: center; }
.stat-flow-stat-num {
  display: block; font-size: 18px; font-weight: 700; color: var(--brand-green); line-height: 1.2;
}
.stat-flow-stat-label {
  display: block; font-size: 11px; font-weight: 500; color: var(--ink-500); margin-top: 2px;
}

/* Compare grid — system types */
.stat-compare-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.stat-compare-col {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 20px 12px;
  border-radius: 12px; background: var(--ink-50);
  border: 1px solid var(--ink-100);
}
.stat-compare-col-featured {
  background: var(--brand-primary-light);
  border-color: var(--brand-primary-30);
}
.stat-compare-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.stat-compare-icon svg { width: 18px; height: 18px; }
.stat-compare-icon-gray { background: var(--ink-100); color: var(--ink-500); }
.stat-compare-icon-orange { background: var(--brand-primary); color: var(--white); }
.stat-compare-icon-green { background: var(--brand-green-10); color: var(--brand-green); }
.stat-compare-name {
  font-size: 13px; font-weight: 700; color: var(--ink-900); margin-bottom: 10px;
}
.stat-compare-traits {
  list-style: none; padding: 0; margin: 0 0 12px;
  display: flex; flex-direction: column; gap: 5px;
}
.stat-compare-traits li {
  font-size: 11px; font-weight: 400; color: var(--ink-500); line-height: 1.4;
}
.stat-compare-tag {
  font-size: 10px; font-weight: 600; color: var(--ink-500);
  padding: 3px 10px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--ink-100);
  letter-spacing: 0.2px;
}
.stat-compare-tag-orange {
  background: var(--brand-primary); color: var(--white); border-color: var(--brand-primary);
}
@media (max-width: 480px) {
  .stat-compare-grid { grid-template-columns: 1fr; gap: 10px; }
}

/* Timeline card — ROI */
.stat-timeline { margin-bottom: 4px; }
.stat-tl-track {
  display: flex; height: 8px; border-radius: 4px; overflow: hidden;
  margin-bottom: 12px;
}
.stat-tl-fill-paying {
  flex: 30; background: var(--ink-300);
}
.stat-tl-fill-saving {
  flex: 70; background: var(--brand-primary);
}
.stat-tl-markers {
  display: flex; justify-content: space-between; position: relative;
}
.stat-tl-marker {
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.stat-tl-dot {
  width: 10px; height: 10px; border-radius: 50%; margin-bottom: 6px;
}
.stat-tl-dot-dark { background: var(--ink-900); }
.stat-tl-dot-orange { background: var(--brand-primary); }
.stat-tl-dot-green { background: var(--brand-green); }
.stat-tl-year {
  font-size: 12px; font-weight: 700; color: var(--brand-green); line-height: 1.2;
}
.stat-tl-event {
  font-size: 10.5px; font-weight: 400; color: var(--ink-500);
}
.stat-tl-summary {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.stat-tl-box {
  padding: 14px 16px; border-radius: 10px;
}
.stat-tl-box-paying { background: var(--ink-50); }
.stat-tl-box-saving { background: rgba(245,166,35,0.06); }
.stat-tl-box-label {
  display: block; font-size: 12px; font-weight: 600; color: var(--ink-900);
  margin-bottom: 4px;
}
.stat-tl-box-detail {
  display: block; font-size: 11px; font-weight: 400; color: var(--ink-500);
  line-height: 1.5;
}

/* Checklist card */
.stat-checklist {
  display: flex; flex-direction: column; gap: 14px;
}
.stat-check-item {
  display: flex; align-items: flex-start; gap: 12px;
}
.stat-check-icon {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.stat-check-icon svg { width: 12px; height: 12px; }
.stat-check-done { background: var(--brand-primary); color: var(--white); }
.stat-check-text { display: flex; flex-direction: column; }
.stat-check-name {
  font-size: 13.5px; font-weight: 600; color: var(--ink-900); line-height: 1.3;
}
.stat-check-desc {
  font-size: 11.5px; font-weight: 400; color: var(--ink-500); margin-top: 1px;
}
.stat-check-footer {
  font-size: 11.5px; font-weight: 500; color: var(--ink-500);
  text-align: center; font-style: italic;
}

.dual-info-body {
  padding: 24px 0 0;
  display: flex; flex-direction: column; gap: 16px;
}
.dual-info-body p {
  font-size: 17px; line-height: 1.75; color: var(--ink-900); margin: 0;
}
.dual-info-link {
  color: var(--brand-primary); font-weight: 600; text-decoration: none;
}
.dual-info-link:hover { text-decoration: underline; }
.dual-info-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 40px;
}
.dual-info-actions .btn-gradient { width: auto; }
@media (max-width: 880px) {
  .dual-info-grid { grid-template-columns: 1fr; gap: 32px; }
  .dual-info-actions { grid-template-columns: 1fr; gap: 16px; text-align: center; }
  .dual-info-actions .btn-gradient:nth-child(2) { display: none; }
  .dual-info-tab { font-size: 15px; padding: 12px 20px; }
  /* Center-align all CTA buttons on mobile */
  .section-action, .section-action-left { text-align: center; display: flex; justify-content: center; }
  .btn-gradient, .btn-gradient-wide, .btn-gradient-fullwidth { display: block; margin: 0 auto; }
}

/* =============================================================
   COST CARDS (photo-based)
   ============================================================= */
.cost-cards { padding: 60px 0 80px; background: var(--ink-50); }
.cost-cards-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin-top: 32px;
}
.cost-card {
  background: var(--ink-50);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  display: flex; flex-direction: column;
  position: relative;
  box-shadow: none;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.cost-card:hover { border-color: var(--ink-300); }
.cost-card-featured { background: var(--brand-primary-light); border-color: var(--brand-primary-30); }
.cost-card-tab {
  display: inline-block; align-self: flex-start;
  background: transparent; color: var(--ink-500);
  padding: 0; margin: 0 0 14px;
  font-size: 11px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase;
  width: auto;
}
.cost-card-tab::after { display: none; }
.cost-card-photo {
  margin: 0 0 18px;
  border-radius: 10px; overflow: hidden;
  background: var(--ink-100);
}
.cost-card-photo img {
  width: 100%; height: 160px; object-fit: cover; display: block;
}
.cost-card-list {
  list-style: none; margin: 0 0 18px; padding: 0;
  font-size: 13px; color: var(--ink-500); line-height: 1.7;
  display: flex; flex-direction: column; gap: 4px;
}
.cost-card-list li {
  margin: 0; padding-left: 16px; position: relative;
}
.cost-card-list li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-primary);
}
.cost-card-price {
  margin: auto 0 0; padding-top: 14px;
  border-top: 1px solid var(--ink-100);
  font-size: 24px; font-weight: 700; color: var(--brand-green);
  text-align: left; letter-spacing: -0.3px;
}
.cost-card-note {
  margin: 4px 0 0; font-size: 11px; font-weight: 600;
  color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.5px;
}
.cost-cards-disclaimer {
  text-align: center; font-size: 12px; color: var(--ink-500);
  margin: 28px auto 0; max-width: 640px;
}
@media (max-width: 880px) {
  .cost-cards-grid { grid-template-columns: 1fr; gap: 12px; }
  .cost-card-photo img { height: 180px; }
}

/* =============================================================
   INFO-SPLIT (illustration + paragraphs) — used by How Solar Works,
   Choose Partner, ROI, Hybrid System
   ============================================================= */
.how-solar, .choose-partner, .roi-section, .hybrid-section {
  padding: 72px 0; background: var(--ink-50);
}
.choose-partner { background: var(--white); }
.hybrid-section { background: var(--ink-50); }
.info-split-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  align-items: start;
}
.info-split-reversed .info-split-illu { order: 1; }
.info-split-reversed .info-split-text { order: 2; }
.info-split-text { display: flex; flex-direction: column; gap: 16px; }
.info-split-title {
  font-size: 36px; font-weight: 700; color: var(--ink-900);
  margin: 0; letter-spacing: -0.3px;
}
.info-split-divider {
  width: 100%; height: 1px; background: var(--brand-secondary); opacity: 0.4;
  margin: 8px 0 4px;
}
.info-split-text p {
  font-size: 17px; color: var(--ink-900); line-height: 1.75; margin: 0;
}
.info-link {
  color: var(--brand-primary); font-weight: 600; text-decoration: none;
}
.info-link:hover { text-decoration: underline; }
.info-split-illu svg { width: 100%; height: auto; max-width: 500px; display: block; margin: 0 auto; }
@media (max-width: 880px) {
  .info-split-grid { grid-template-columns: 1fr; gap: 32px; }
  .info-split-reversed .info-split-illu { order: 0; }
  .info-split-reversed .info-split-text { order: 1; }
  .info-split-title { font-size: 24px; }
}

/* =============================================================
   FINANCE NOTE BOX (yellow-bordered note in ROI section)
   ============================================================= */
.finance-note {
  margin: 16px 0 8px;
  padding: 16px 22px;
  border: 2px solid var(--brand-primary);
  border-radius: 4px;
  background: var(--white);
  font-size: 14px; line-height: 1.6; color: var(--ink-700);
  text-align: center;
}
.finance-note-link {
  color: var(--brand-primary); font-weight: 600; text-decoration: none;
}
.finance-note-link:hover { text-decoration: underline; }

/* =============================================================
   SAVE BAND (centered "How much can I save")
   ============================================================= */
.save-band {
  padding: 64px 0 72px; background: var(--ink-50);
  text-align: center;
}
.save-band-title {
  font-size: 34px; font-weight: 700; color: var(--ink-900);
  margin: 0 0 24px; letter-spacing: -0.3px;
}
.save-band-text {
  font-size: 17px; line-height: 1.75; color: var(--ink-900);
  max-width: 1080px; margin: 0 auto 16px;
}
.save-band .section-action { margin-top: 32px; }
@media (max-width: 768px) {
  .save-band { padding: 48px 0; }
  .save-band-title { font-size: 22px; }
}

/* =============================================================
   REVIEWS SECTION
   ============================================================= */
.reviews-section { padding: 72px 0 80px; background: var(--white); overflow: hidden; }
.reviews-section .section-header { text-align: center; margin-bottom: 40px; }
.reviews-carousel {
  position: relative;
  /* Fade edges */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 6%, black 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, black 6%, black 94%, transparent 100%);
}
.reviews-track {
  display: flex; gap: 24px;
  width: max-content;
  animation: reviews-scroll 48s linear infinite;
  will-change: transform;
}
.reviews-track:hover { animation-play-state: paused; }
@keyframes reviews-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ==========================================================================
   REVIEW .review-cardS — Google-review layout
   --------------------------------------------------------------------------
   One block, identical on all 11 variants. The nine `.review-card` pages and
   the two `.testimonial-card` pages (v1/v2) had three different card designs;
   the inner markup is now the same everywhere and only the outer class
   differs, so the marquee CSS above still works untouched.

   Deliberately literal hex rather than each page's custom properties — the
   whole point is that the cards look the same across variants, and
   --ink-100 / --border-card / --star-gold do not resolve to the same values.

   There is NO Google logo and no "Posted on Google" wording. The copy is our
   own marketing text, so the layout may look like Google's; the claim that
   Google verified it must not be made.
   ========================================================================== */
.review-card {
  margin: 0;
  flex: 0 0 auto;
  width: 360px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08);
  text-align: left;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.review-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(60, 64, 67, 0.14);
}
.review-card .review-head { display: flex; align-items: center; gap: 12px; }
.review-card .review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  display: block;
  background: #f1f3f4;
  border: 0;
  box-shadow: none;
}
.review-card .review-id { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.review-card .review-name {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: #202124;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.review-card .review-sub { font-size: 12px; line-height: 1.4; color: #70757a; }
.review-card .review-more {
  flex: 0 0 auto;
  align-self: flex-start;
  font-size: 18px;
  line-height: 1;
  color: #70757a;
}
.review-card .review-stars { margin: 0; color: #fbbc04; font-size: 15px; letter-spacing: 1px; }
.review-card .review-text {
  margin: 0;
  flex: 1;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.58;
  color: #3c4043;
}
@media (max-width: 480px) {
  .review-card { width: 300px; padding: 16px; }
  .review-card .review-text { font-size: 13.5px; }
}

@media (max-width: 768px) {
  .reviews-section { padding: 56px 0 64px; }
  .reviews-track { animation-duration: 60s; }
}
@media (prefers-reduced-motion: reduce) {
  .reviews-track { animation: none; }
}

/* =============================================================
   FOOTER V2 (dark navy, Quick Links / Find Us)
   ============================================================= */
.footer { background: #243b53; color: #fff; padding: 56px 0 48px; }
.footer-grid-v2 {
  display: grid; grid-template-columns: 1fr 2fr; gap: 64px;
}
.footer-title-v2 {
  font-size: 18px; font-weight: 700; margin: 0 0 18px;
  color: #fff;
}
.footer-links-v2 {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.footer-links-v2 a {
  color: #fff; font-size: 15px; text-decoration: none;
  transition: opacity 0.15s ease;
}
.footer-links-v2 a:hover { opacity: 0.75; }
.footer-address-v2 {
  font-size: 15px; color: #fff; margin: 0 0 4px;
}
.footer-copyright-v2 {
  font-size: 14px; color: #fff; margin: 0; opacity: 0.85;
}
@media (max-width: 768px) {
  .footer { padding: 40px 0 32px; }
  .footer-grid-v2 { grid-template-columns: 1fr; gap: 32px; }
}

/* ==================================================================== */
/* V2 FORM POPUP — appended 2026-07-13                          */
/* Source: pms-au-landing/public/v2/styles.css lines 2407-3962         */
/* Scope: everything inside #form-popup and the .form-thankyou panel.  */
/* ==================================================================== */

/* -------------------------------------------------------------------- */
/* v2 popup — CSS tokens the popup depends on (add if missing).         */
/* -------------------------------------------------------------------- */
:root {
  --brand-navy: #0F172A;
  --brand-navy-light: #334155;
  --bg-alt: #EEF2F7;
  --border-card: #F1F5F9;
  --star-gold: #FFBF0C;
  --success: #167E41;
  --danger: #DC2626;
}

.popup-overlay {
  position: fixed;
  inset: 0;
  background: #ffffff;
  z-index: 100;
  display: none;
  overflow: hidden;
  animation: funnelFadeIn 0.25s ease;
}
.popup-overlay.active { display: block; }
@keyframes funnelFadeIn { from { opacity: 0; } to { opacity: 1; } }

.popup-content {
  /* MTA-style layout — flex-column with fixed viewport height + hidden
     overflow. Body flex-grows and scrolls, footer sits its natural
     height. No grid tracks, no keyboard-height JS, no scroll-init hacks. */
  height: 100vh;                                     /* pre-dvh fallback */
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: transparent;
  width: 100%;
  max-width: none;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  overflow: hidden;
  position: relative;
  animation: adelaide-sheet-up 0.6s cubic-bezier(.22,1,.36,1);
}
@keyframes adelaide-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@media (min-width: 720px) {
  .popup-content { animation: adelaide-popup-fade-in 0.42s cubic-bezier(.22,1,.36,1); }
  @keyframes adelaide-popup-fade-in {
    from { opacity: 0; transform: scale(1.015); }
    to   { opacity: 1; transform: scale(1); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .popup-content { animation: none; }
}

.popup-header {
  flex: 0 0 auto;
  background: transparent;
  border-bottom: 0;
  padding: 14px 20px 12px;
  z-index: 5;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 16px;
  row-gap: 12px;
}
.popup-header .logo {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  margin: 0;
  flex: 0 0 auto;
  font-size: 1.05rem;
  min-width: 0;
}
.popup-title { display: none; }

.progress-wrap {
  grid-column: 1 / -1;
  grid-row: 2;
  max-width: none;
  margin: 0;
  display: block;
}
.progress-dots {
  /* Hidden per design — visible aria-live progress-label still announces
     step changes to screen readers via the runtime's form_step event. */
  display: none;
}
.progress-dots span {
  flex: 1;
  height: 4px;
  min-width: 0;
  border-radius: 999px;
  background: var(--border-light);
  transition: background 0.35s ease;
  transform: none;
}
.progress-dots span.active,
.progress-dots span.done {
  background: var(--brand-green);
}
.progress-label { display: none; }

.popup-close {
  position: static;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-soft);
  border: none;
  font-size: 1.5rem;
  color: var(--text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}
.popup-close:hover { background: var(--border-light); color: var(--text-heading); }

.popup-body {
  /* MTA-style scroll pane — flex-child that grows, and its own inner
     flex-column so form-steps stack top-down inside the scroll area.
     min-height:0 is the load-bearing bit that lets a flex-child actually
     shrink and expose overflow. iOS momentum + elastic rubber-band come
     free from -webkit-overflow-scrolling:touch. */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  padding: 32px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  /* iOS Safari: force this into its own GPU compositor layer so it becomes
     scroll-ready on FIRST render, not after a bounce/repaint. Without these,
     users report "can't scroll on first landing, later I can" on real iPhones
     (Chromium / DevTools mobile view doesn't reproduce it because it doesn't
     share WebKit's scroll-layer initialization quirk). */
  transform: translateZ(0);
  will-change: scroll-position;
  /* Hide the native scrollbar on desktop — Windows / some laptops render it as
     a persistent bar in the middle-right of the form step. Still scrollable. */
  scrollbar-width: none;
}
.popup-body::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Why not display:flex here: iOS Safari refuses to touch-scroll a flex
   container when the flex item is taller than the container along the
   cross-axis (step 6 hits this — 771px form-step in a 530px popup-body).
   Block layout works fine — form-step.active is display:block and
   #pms-quiz-form's max-width:640px + margin:auto handles horizontal
   centering. OTP re-enables flex explicitly below for the bottom-sheet. */
/* NOTE: #pms-quiz-form and .popup-body live on the SAME <form> element,
   so any padding rule on the ID beats .popup-body (specificity). Keep
   padding here in sync with .popup-body — do not zero it out. */
#pms-quiz-form {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

.form-step { display: none; }
.form-step.active {
  display: block;
  animation: adelaide-step-in 0.35s cubic-bezier(.22,1,.36,1);
}
@keyframes adelaide-step-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .form-step.active { animation: none; }
}

.step-headline {
  font-size: clamp(1.65rem, 3.6vw, 2.25rem);
  font-weight: 800;
  color: var(--text-heading);
  margin: 0 0 14px;
  line-height: 1.2;
  text-align: center;
  letter-spacing: -0.01em;
}
.step-sub {
  color: var(--text-muted);
  margin: 0 auto 36px;
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  text-align: center;
  line-height: 1.55;
  max-width: 560px;
}
.step-badge-row {
  display: flex;
  justify-content: center;
  margin: -6px 0 18px;
}
.step-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: var(--brand-primary-10);
  color: var(--brand-primary-dark);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Input fields */
.field-group { margin-bottom: 16px; text-align: left; }
.field-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: 8px;
  text-align: left;
}
.field-input,
.field-textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  color: var(--text-heading);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field-input:focus,
.field-textarea:focus {
  outline: none;
  border-color: var(--brand-green);
  box-shadow: 0 0 0 3px var(--brand-green-20);
}
.field-error {
  display: none;
  color: var(--danger);
  font-size: 0.85rem;
  margin-top: 6px;
}
.field-group.invalid .field-input,
.field-group.invalid .field-textarea { border-color: var(--danger); }
.field-group.invalid .field-error { display: block; }

/* Radio option cards */
.radio-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
.radio-card {
  display: block;
  padding: 16px 20px;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
  font-weight: 500;
  color: var(--text-heading);
  position: relative;
}
.radio-card:hover {
  border-color: var(--brand-primary-50);
  background: var(--brand-primary-10);
}
.radio-card input[type="radio"] { position: absolute; opacity: 0; }
.radio-card::before {
  content: '';
  display: inline-block;
  width: 20px; height: 20px;
  flex-shrink: 0;
  border: 2px solid var(--border-light);
  border-radius: 50%;
  margin-right: 12px;
  vertical-align: middle;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.radio-card.selected {
  border-color: var(--brand-green);
  background: var(--brand-green-10);
}
.radio-card.selected::before {
  border-color: var(--brand-green);
  background: var(--brand-green);
  box-shadow: inset 0 0 0 4px #fff;
}
/* Two-line variant — title + description below (used on the shade step).
   The card becomes a flex row so a long description wraps inside the text
   column instead of dropping the whole block under the circle. */
.radio-card:has(.radio-card-text) {
  display: flex;
  align-items: center;
}
.radio-card .radio-card-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.35;
}
.radio-card .radio-card-title {
  font-weight: 600;
  color: var(--text-heading);
}
.radio-card .radio-card-desc {
  font-size: 0.86rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 2px;
}

/* File upload */
.file-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  border: 2px dashed var(--border-light);
  border-radius: var(--radius-md);
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  background: var(--bg-soft);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.file-drop:hover, .file-drop.drag-over {
  border-color: var(--brand-primary);
  background: var(--brand-primary-10);
}
.file-drop .file-icon {
  font-size: 2rem;
  color: var(--brand-primary);
  margin-bottom: 8px;
}
.file-drop .file-label {
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: 4px;
}
.file-drop .file-hint {
  color: var(--text-muted);
  font-size: 0.85rem;
}
.file-drop input[type="file"] { display: none; }

/* Two-tile picker: Take Photo | Upload File */
.file-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 8px 0 10px;
}
@media (max-width: 480px) {
  .file-options { grid-template-columns: 1fr; }
}
.file-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 13px 12px;
  border: 1.5px dashed var(--ink-900);
  border-radius: var(--radius-md);
  background: var(--bg-white);
  color: var(--text-heading);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.file-option:hover, .file-option.drag-over {
  border-color: var(--brand-primary);
  background: var(--brand-primary-10);
}
.file-option .file-option-icon svg { width: 22px; height: 22px; }
.file-option .file-option-icon {
  color: var(--brand-primary);
  line-height: 0;
}
.file-option .file-option-title {
  font-weight: 600;
  font-size: 0.98rem;
}
.file-option .file-option-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 400;
  line-height: 1.35;
}
.file-option input[type="file"] { display: none; }
.file-secure-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  margin: 4px 0 8px;
}

.file-preview {
  display: none;
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  color: var(--text-heading);
  align-items: center;
  gap: 10px;
}
.file-preview.has-file { display: flex; }
.file-preview .file-clear {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-weight: 600;
}

/* Consent */
.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0 4px;
}
.consent-row input[type="checkbox"] {
  width: 20px; height: 20px;
  margin-top: 2px;
  accent-color: var(--brand-green);
  flex: 0 0 auto;
}
.consent-row label {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* Nav row */
.form-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 36px;
}
.form-nav .btn-primary {
  flex: 1;
  max-width: 340px;
  margin-left: auto;
  padding: 18px 36px;
  font-size: 1.05rem;
}
.form-nav .btn-block {
  max-width: none;
}
.form-nav .btn-ghost {
  flex: 0 0 auto;
  padding: 14px 20px;
  font-size: 1rem;
}
.form-nav-back-only { justify-content: flex-start; }
/* Inline "(Optional)" tag next to a step headline — muted grey, lighter
   weight, slightly smaller so it reads as a modifier not a shout. */
.step-optional {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.72em;
  letter-spacing: 0;
  white-space: nowrap;
}
/* Split nav — "I'll upload later" (left) + "Skip" (right). Continue button
   only shows when a file has been chosen (see :has() rule below). */
.form-nav-split {
  justify-content: space-between;
  gap: 12px;
}
.form-nav-split .step-later {
  margin-right: auto;
  color: var(--brand-primary);
  font-weight: 700;
}
.form-nav-split .step-later:hover { color: var(--brand-primary-dark); }
.form-nav-split .step-skip {
  padding: 14px 24px;
  font-size: 1rem;
  min-width: 120px;
}
.form-nav-split .step-continue { display: none; }
/* When the file preview shows (has-file), switch to a single Continue CTA. */
.form-step[data-step="5"]:has(#file-preview.has-file) .step-later,
.form-step[data-step="5"]:has(#file-preview.has-file) .step-skip { display: none; }
.form-step[data-step="5"]:has(#file-preview.has-file) .step-continue { display: inline-flex; }

@media (max-width: 500px) {
  .form-nav { flex-wrap: wrap; }
  .form-nav .btn-primary { max-width: none; padding: 16px 24px; }
  .form-nav-split { flex-direction: row; }
  .form-nav-split .step-later,
  .form-nav-split .step-skip { flex: 1; padding: 14px 12px; font-size: 0.95rem; min-width: 0; }
}

/* Bigger inputs / radios / file-drop for full-screen feel */
.popup-body .field-input,
.popup-body .field-textarea {
  padding: 18px 20px;
  font-size: 1.05rem;
  border-radius: var(--radius-md);
}
.popup-body .field-label {
  font-size: 0.95rem;
  margin-bottom: 10px;
}
.popup-body .radio-card {
  padding: 20px 24px;
  font-size: 1.05rem;
}
.popup-body .radio-card::before {
  width: 22px;
  height: 22px;
  margin-right: 14px;
}
.popup-body .file-drop {
  padding: 44px 24px;
}
.popup-body .file-drop .file-icon { font-size: 2.5rem; }
.popup-body .file-drop .file-label { font-size: 1.05rem; margin-bottom: 6px; }

.popup-footer {
  /* MTA-style: lightweight trust line, no border, no coloured background,
     no bullet square. flex-shrink:0 so it takes only its content height
     (~40px) instead of reserving a full grid row. */
  padding: 10px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* =====================================================================
   THANK YOU (base) — expanded rules appended near end of file
   ===================================================================== */
.form-thankyou { display: none; }

/* MTA-style critical scroll override — when thank-you is active, drop the
   flex-column layout and let popup-content itself scroll as one block.
   Form + footer hide so the whole viewport becomes the thank-you canvas. */
.popup-content:has(.form-thankyou[data-thank-you="true"].active) {
  display: block;
  height: 100dvh;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.popup-content:has(.form-thankyou[data-thank-you="true"].active) .popup-body,
.popup-content:has(.form-thankyou[data-thank-you="true"].active) .popup-footer { display: none; }

/* =====================================================================
   HARDENING PASS OVERRIDES
   ===================================================================== */

/* #1 brand-primary fallback (already at top :root but redundant safety here) */
/* #2 no wide-band cta-section — .cta-band is the only band and stays orange by design */
/* #3 Footer pure-white text (override subtle rgba) */
.footer-tagline, .footer-col h4, .footer-col a, .footer-bottom, .footer-bottom a {
  color: #ffffff !important;
}
.footer-col a, .footer-bottom a { color: rgba(255,255,255,0.85) !important; }
.footer-col a:hover, .footer-bottom a:hover { color: #ffffff !important; }
.footer-bottom { border-top-color: rgba(255,255,255,0.25) !important; }

/* #4 Floating CTA hidden on desktop (with !important covering .visible class) */
@media (min-width: 769px) {
  .floating-cta, .floating-cta.visible { display: none !important; }
}

/* #6 Search dropdown: solid panel, clear edge, row separators, no truncation */
.pac-container {
  background: #fff !important;
  border: 1px solid var(--ink-300) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18) !important;
  margin-top: 6px;
  font-family: inherit !important;
  overflow: hidden;
}
.pac-item {
  padding: 12px 14px;
  font-size: 0.95rem;
  line-height: 1.35;
  /* Wrap long addresses onto a second line instead of clipping to "123 Fisher Stre…" */
  white-space: normal;
  border-top: 1px solid var(--ink-100);
  cursor: pointer;
}
.pac-item:first-child { border-top: none; }
.pac-item:hover,
.pac-item-selected { background: var(--ink-50); }
.pac-item-query { font-weight: 600; color: var(--text-heading); font-size: 0.95rem; }
/* Keep the marker aligned to the first line when the address wraps */
.pac-icon { margin-top: 3px; }

/* Body scroll lock when popup open */
body.popup-open { overflow: hidden; }

/* =====================================================================
   STEP 1 — ADDRESS CONFIRMATION PANEL (map + Yes/Search Again)
   Shown after user picks a Google Places suggestion. Mirrors the MTA
   Auckland pattern: hides input + nav in the same step and reveals
   a satellite map + "Is this your property?" confirm card.
   ===================================================================== */
.popup-confirm-panel {
  display: none;
  width: 100%;
}
.form-step[data-step="1"].confirm-mode .field-group,
.form-step[data-step="1"].confirm-mode .form-nav {
  display: none !important;
}
.form-step[data-step="1"].confirm-mode .popup-confirm-panel {
  display: block;
}

.popup-map-container {
  position: relative;
  width: 100%;
  height: 220px;
  border: 3px solid var(--brand-primary);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--bg-soft);
}
@media (min-width: 640px) {
  .popup-map-container {
    height: 280px;
    border-radius: 16px;
  }
}
#popup-map { width: 100%; height: 100%; }
.popup-map-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  z-index: 2;
}
.popup-map-loading.hidden { display: none; }
.map-loading-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--border-light);
  border-top-color: var(--brand-primary);
  border-radius: 50%;
  animation: mapSpin 0.7s linear infinite;
}
@keyframes mapSpin { to { transform: rotate(360deg); } }

.popup-confirm-card {
  margin-top: 16px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 18px;
}
.popup-confirm-question {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-heading);
  text-align: center;
  margin-bottom: 14px;
}
@media (min-width: 640px) {
  .popup-confirm-question { font-size: 18px; margin-bottom: 16px; }
}
.popup-confirm-address {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--brand-primary-10);
  border-radius: 10px;
  margin-bottom: 16px;
}
.popup-confirm-pin {
  width: 22px;
  height: 22px;
  color: var(--brand-primary);
  flex: 0 0 auto;
  margin-top: 1px;
}
.popup-confirm-address-text { min-width: 0; }
.popup-confirm-address-main {
  font-weight: 700;
  color: var(--text-heading);
  font-size: 15px;
  line-height: 1.35;
  word-break: break-word;
}
.popup-confirm-address-secondary {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 3px;
}
.popup-confirm-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.confirm-btn {
  padding: 14px 12px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease, color 0.15s ease;
}
.confirm-btn svg { width: 16px; height: 16px; }
.confirm-btn-no {
  background: #fff;
  color: var(--text-muted);
  border: 1.5px solid var(--border-light);
}
.confirm-btn-no:hover {
  border-color: var(--text-heading);
  color: var(--text-heading);
}
.confirm-btn-yes {
  background: var(--brand-green);
  color: #fff;
  border: 1.5px solid var(--brand-green);
}
.confirm-btn-yes:hover {
  background: var(--brand-green-dark);
  border-color: var(--brand-green-dark);
  transform: translateY(-1px);
}

/* =====================================================================
   OTP — inline step-styled screen (was: separate modal)
   ===================================================================== */
.form-otp { display: none; }
.otp-grip { display: none; }
/* OTP renders as a bottom sheet: the full-screen popup docks the form to the
   bottom and the OTP card slides up — position + animation matching the
   injected panel the other landing pages use. */
.popup-body:has(.form-otp.active) {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}
.popup-body:has(.form-otp.active) #pms-quiz-form { max-width: 460px; }
.form-otp.active {
  display: block;
  box-sizing: border-box;
  background: #fff;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -14px 40px rgba(15, 23, 42, 0.18);
  padding: 14px 22px calc(26px + env(safe-area-inset-bottom));
  animation: otpSheetUp 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Above phone breakpoint: OTP renders inline like every other .form-step
   — no centered card, no border-radius, no shadow. Just the popup-body
   flow. Prior "floating card in centre" look read as a mobile-style
   modal on a 1500px desktop viewport. */
@media (min-width: 521px) {
  .popup-body:has(.form-otp.active) {
    justify-content: flex-start;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .popup-body:has(.form-otp.active) #pms-quiz-form { max-width: none; }
  .form-otp.active {
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    background: transparent;
    animation: none;
  }
  .form-otp.active .otp-grip { display: none; }
}
@keyframes otpFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.form-otp.active .otp-grip {
  display: block;
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--border-light, #e2e8f0);
  margin: 2px auto 14px;
}
/* Keep all 6 code boxes on one row inside the (narrower) sheet. */
.form-otp.active .otp-inputs { flex-wrap: nowrap; gap: 6px; }
@media (max-width: 430px) {
  .form-otp.active .otp-digit { width: 44px; height: 52px; font-size: 1.45rem; }
}
@keyframes otpSheetUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .form-otp.active { animation: none; }
}
.form-otp .otp-inputs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 8px 0 6px;
  flex-wrap: wrap;
}
.form-otp .otp-digit {
  width: 48px;
  height: 56px;
  border: 1.5px solid #94a3b8;
  border-radius: var(--radius-md);
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  color: var(--text-heading);
  background: #fff;
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
@media (min-width: 640px) {
  .form-otp .otp-digit { width: 54px; height: 62px; font-size: 1.7rem; }
}
.form-otp .otp-digit:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-20);
}
.form-otp .otp-error {
  color: var(--danger);
  font-size: 0.9rem;
  min-height: 20px;
  text-align: center;
  margin: 6px 0 4px;
}
.otp-resend-line {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 4px 0 20px;
}
.otp-resend {
  background: none;
  border: none;
  color: var(--brand-primary);
  font-weight: 700;
  cursor: pointer;
  padding: 4px 6px;
  font-family: inherit;
  font-size: inherit;
}
.otp-resend:hover { color: var(--brand-primary-dark); text-decoration: underline; }
.otp-resend:disabled { color: var(--text-muted); cursor: not-allowed; text-decoration: none; }

/* Editable-phone affordance on the OTP step */
.form-otp .otp-note { color: var(--brand-secondary); margin-left: 6px; font-weight: 600; }
.otp-edit-row { max-width: 340px; margin: 12px auto 6px; text-align: center; }
.otp-edit-actions { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.btn.btn-outline {
  background: none;
  border: 1.5px solid var(--border-light);
  color: var(--text-heading);
}
.btn.btn-outline:hover { border-color: var(--brand-primary); color: var(--brand-primary); }

/* =====================================================================
   THANK YOU / SUCCESS CARD (MTA-style)
   ===================================================================== */
.form-thankyou.active {
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: stepFadeIn 0.35s ease;
}

.success-header {
  text-align: center;
}
.success-check {
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-secondary), var(--brand-green));
  color: #fff;
  display: grid;
  place-items: center;
  animation: successPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 10px 30px rgba(22, 126, 65, 0.35);
}
.success-check svg { width: 40px; height: 40px; }
@keyframes successPop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}
.success-title {
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 800;
  color: var(--text-heading);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.success-title span { color: var(--brand-primary); }
.success-subtitle {
  color: var(--text-muted);
  font-size: 1rem;
  margin: 0;
}

.summary-card {
  background: var(--bg-white);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.summary-card-header {
  padding: 14px 20px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border-card);
}
.summary-card-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-primary);
}
.summary-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.summary-address {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-weight: 700;
  color: var(--text-heading);
  font-size: 0.98rem;
  line-height: 1.4;
}
.summary-address .summary-icon,
.summary-row svg,
.summary-tag svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--brand-primary);
}
.summary-address .summary-icon { margin-top: 2px; }
.summary-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.summary-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--brand-primary-10);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-heading);
}
.summary-tag svg { width: 14px; height: 14px; }
.summary-divider {
  height: 1px;
  background: var(--border-light);
  margin: 4px 0;
}
.summary-row {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-heading);
  font-size: 0.95rem;
  word-break: break-word;
}

.success-next {
  background: var(--brand-primary-10);
  border: 1px solid var(--brand-primary-30);
  border-radius: 14px;
  padding: 18px 20px;
}
.success-next-title {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-primary-dark);
  margin-bottom: 10px;
}
.success-next ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.success-next li {
  padding: 6px 0 6px 20px;
  position: relative;
  color: var(--text-heading);
  font-size: 0.92rem;
  line-height: 1.5;
}
.success-next li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 8px;
  height: 8px;
  background: var(--brand-primary);
  border-radius: 50%;
}

/* =====================================================================
   THANK-YOU PAGE V2 — trust-heavy, dynamic, solar-specific
   ===================================================================== */
.form-thankyou.active {
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: stepFadeIn 0.4s ease;
  padding-bottom: 32px;
}

.ty-block {
  background: var(--bg-white);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow-md);
  animation: tyBlockIn 0.5s ease both;
}
.ty-block:nth-child(2)  { animation-delay: 0.10s; }
.ty-block:nth-child(3)  { animation-delay: 0.18s; }
.ty-block:nth-child(4)  { animation-delay: 0.26s; }
.ty-block:nth-child(5)  { animation-delay: 0.34s; }
.ty-block:nth-child(6)  { animation-delay: 0.42s; }
.ty-block:nth-child(7)  { animation-delay: 0.50s; }
.ty-block:nth-child(8)  { animation-delay: 0.58s; }
.ty-block:nth-child(9)  { animation-delay: 0.66s; }
.ty-block:nth-child(10) { animation-delay: 0.74s; }
@keyframes tyBlockIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ty-eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-primary-dark);
  margin-bottom: 10px;
}
.ty-hint {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ---------- Thank-you center-alignment: force everything to center ---------- */
.form-thankyou .ty-block { text-align: center; }
.form-thankyou .ty-eyebrow { text-align: center; }
.form-thankyou .ty-hint { text-align: center; }

/* ---------- 1. Hero ---------- */
.ty-hero {
  position: relative;
  text-align: center;
  padding: 20px 20px 8px;
  overflow: visible;
}
.ty-confetti {
  position: absolute;
  inset: -20px 0 auto;
  height: 220px;
  pointer-events: none;
  overflow: hidden;
}
.ty-confetti .conf {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  opacity: 0;
  animation: confettiFall 2.4s ease-in forwards;
}
@keyframes confettiFall {
  0%   { opacity: 0; transform: translateY(-20px) rotate(0deg); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(240px) rotate(720deg); }
}
.ty-check {
  width: 88px;
  height: 88px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-secondary), var(--brand-green));
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 40px rgba(22, 126, 65, 0.38), 0 0 0 8px rgba(22, 126, 65, 0.10);
  animation: checkPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), checkGlow 2.6s ease-in-out 0.6s infinite;
  position: relative;
  z-index: 2;
}
.ty-check svg { width: 46px; height: 46px; }
@keyframes checkPop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes checkGlow {
  0%, 100% { box-shadow: 0 12px 40px rgba(22, 126, 65, 0.38), 0 0 0 8px rgba(22, 126, 65, 0.10); }
  50%      { box-shadow: 0 16px 48px rgba(22, 126, 65, 0.50), 0 0 0 14px rgba(22, 126, 65, 0.06); }
}
.ty-title {
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  font-weight: 800;
  color: var(--text-heading);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 2;
}
.ty-title span { color: var(--brand-primary); }
.ty-subtitle {
  color: var(--text-muted);
  font-size: 1rem;
  margin: 0;
  position: relative;
  z-index: 2;
}

/* ---------- 2. Reference number ---------- */
.ty-reference-block { text-align: center; }
.ty-reference {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Courier New', monospace;
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  font-weight: 800;
  color: var(--text-heading);
  letter-spacing: 0.14em;
  background: var(--brand-primary-10);
  border: 1.5px dashed var(--brand-primary);
  border-radius: 10px;
  padding: 14px 20px;
  margin: 4px 0 8px;
  display: inline-block;
}

/* ---------- 3. Callback / countdown — horizontal banner ---------- */
.ty-callback-block {
  background: linear-gradient(135deg, #FFFFFF 0%, var(--brand-primary-light) 100%);
  border-color: rgba(247, 146, 33, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: left;
}
.ty-callback-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.form-thankyou .ty-callback-main .ty-eyebrow { text-align: left; margin-bottom: 2px; }
.ty-callback-icon {
  width: 48px; height: 48px;
  background: var(--brand-primary);
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  color: #fff;
  flex: 0 0 auto;
  box-shadow: 0 6px 16px var(--brand-primary-30);
}
.ty-callback-icon svg { width: 24px; height: 24px; }
.ty-countdown {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--text-heading);
  font-variant-numeric: tabular-nums;
  justify-content: flex-start;
}
.ty-cd-unit {
  background: var(--bg-white);
  border: 1px solid var(--border-card);
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 56px;
  justify-content: center;
}
.ty-cd-unit span {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--brand-primary);
  letter-spacing: -0.02em;
}
.ty-cd-unit small {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
}
.ty-cd-sep {
  color: var(--brand-primary-50);
  font-weight: 800;
  font-size: 1.2rem;
}
.ty-callback-meta {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-body);
  text-align: left;
  padding-left: 16px;
  border-left: 1px solid var(--brand-primary-30);
  flex: 0 0 auto;
}
.ty-callback-meta strong { color: var(--text-heading); }
.ty-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.92rem;
  font-family: inherit;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all 0.15s ease;
}
.ty-btn svg { width: 16px; height: 16px; }
.ty-btn-ghost {
  background: var(--bg-white);
  color: var(--text-heading);
  border-color: var(--border-light);
}
.ty-btn-ghost:hover { border-color: var(--brand-primary); color: var(--brand-primary-dark); }
.ty-btn-primary {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
  box-shadow: 0 4px 12px var(--brand-primary-30);
}
.ty-btn-primary:hover { background: var(--brand-primary-dark); border-color: var(--brand-primary-dark); }

/* ---------- 4. Solar match preview ---------- */
.ty-match-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 6px 0 12px;
}
.ty-metric {
  background: var(--bg-page);
  border: 1px solid var(--border-card);
  border-radius: 10px;
  padding: 14px 16px;
}
.ty-metric-highlight {
  background: linear-gradient(135deg, var(--brand-primary-10), rgba(247, 146, 33, 0.04));
  border-color: rgba(247, 146, 33, 0.28);
}
.ty-metric-label {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 500;
  margin-bottom: 4px;
  text-align: center;
}
.ty-metric-value {
  color: var(--brand-primary);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* ---------- 5. Steps timeline — left-aligned; connector lives in the
   marker gutter so it never crosses the copy ---------- */
.form-thankyou .ty-steps-block { text-align: left; }
.ty-steps {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
}
.ty-step {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: start;
  column-gap: 14px;
  padding: 0 0 20px;
  position: relative;
  text-align: left;
}
.ty-step:last-child { padding-bottom: 0; }
.ty-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 21px;
  top: 46px;
  bottom: 2px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--brand-primary-30) 0 4px, transparent 4px 8px);
}
.ty-step-marker {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--brand-primary);
  color: var(--brand-primary);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  z-index: 1;
  background-color: var(--bg-white);
  background-image: radial-gradient(circle, var(--brand-primary-10) 40%, var(--bg-white) 40%);
}
.ty-step-marker svg { width: 20px; height: 20px; }
.ty-step-body { padding-top: 8px; }
.ty-step-body strong {
  display: block;
  color: var(--text-heading);
  font-size: 1rem;
  margin-bottom: 3px;
  text-align: left;
}
.ty-step-body span {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: left;
  display: block;
}

/* ---------- 7. Trust bar ---------- */
.ty-trust-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) {
  .ty-trust-items { grid-template-columns: repeat(3, 1fr); }
}
.ty-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  background: var(--bg-page);
  border-radius: 10px;
  border: 1px solid var(--border-card);
  text-align: center;
}
.ty-trust-badge {
  width: 44px; height: 44px;
  border-radius: 8px;
  background: var(--brand-primary);
  color: #fff;
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.ty-trust-badge svg { width: 22px; height: 22px; }
.ty-trust-num {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--brand-primary);
  letter-spacing: -0.02em;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.ty-trust-rating { color: var(--star-gold); }
.ty-star { color: var(--star-gold); margin-left: 2px; }
.ty-trust-text { display: flex; flex-direction: column; gap: 1px; text-align: center; }
.ty-trust-text strong { color: var(--text-heading); font-size: 0.9rem; }
.ty-trust-text span { color: var(--text-muted); font-size: 0.78rem; }

/* ---------- 8. Free guide — centered stack ---------- */
.ty-guide-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  background: linear-gradient(135deg, var(--bg-white) 0%, var(--brand-primary-10) 100%);
  text-align: center;
}
.ty-guide-icon {
  width: 52px;
  height: 52px;
  background: var(--brand-primary);
  color: #fff;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  box-shadow: 0 8px 20px var(--brand-primary-30);
}
.ty-guide-icon svg { width: 26px; height: 26px; }
.ty-guide-body { text-align: center; }
.ty-guide-body h4 {
  font-size: 1.1rem;
  margin: 4px 0 8px;
  color: var(--text-heading);
  font-weight: 800;
  text-align: center;
}
.ty-guide-body p {
  color: var(--text-body);
  font-size: 0.92rem;
  margin: 0 0 14px;
  line-height: 1.5;
  text-align: center;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}
.ty-guide-body .ty-btn { margin: 0 auto; }
.ty-guide-toast {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(22, 126, 65, 0.12);
  border: 1px solid rgba(22, 126, 65, 0.30);
  border-radius: 8px;
  color: var(--brand-green-dark);
  font-size: 0.88rem;
  font-weight: 600;
  animation: toastIn 0.3s ease;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- 9. Urgent contact ---------- */
.ty-contact-block { text-align: center; }
.ty-contact-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--brand-primary);
  letter-spacing: -0.01em;
  margin: 4px 0 6px;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.ty-contact-phone svg { width: 24px; height: 24px; }
.ty-contact-phone:hover { color: var(--brand-primary-dark); }

/* ---------- 10. Share ---------- */
.ty-share-block { text-align: center; }
.ty-share-block p {
  color: var(--text-body);
  font-size: 0.92rem;
  margin: 0 0 14px;
}
.ty-share-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.ty-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.88rem;
  font-family: inherit;
  cursor: pointer;
  border: 1.5px solid var(--border-light);
  background: var(--bg-white);
  color: var(--text-heading);
  text-decoration: none;
  transition: all 0.15s ease;
}
.ty-share-btn svg { width: 16px; height: 16px; }
.ty-share-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary-dark); }
.ty-share-btn:first-child { background: #1877F2; color: #fff; border-color: #1877F2; }
.ty-share-btn:first-child:hover { background: #145FBF; border-color: #145FBF; color: #fff; }

/* ---------- 11. Reassurance ---------- */
.ty-reassurance {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 16px 20px;
  background: transparent;
  animation: tyBlockIn 0.5s ease 0.82s both;
}
@media (min-width: 640px) {
  .ty-reassurance { grid-template-columns: repeat(3, 1fr); }
}
.ty-reassurance-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 500;
  text-align: center;
}
.ty-reassurance-item svg {
  width: 20px;
  height: 20px;
  color: var(--brand-secondary);
  flex: 0 0 auto;
}

/* Mobile compaction */
@media (max-width: 500px) {
  .ty-match-grid { grid-template-columns: 1fr; }
  .ty-callback-block { flex-direction: column; text-align: center; gap: 12px; }
  .ty-callback-main { align-items: center; }
  .form-thankyou .ty-callback-main .ty-eyebrow { text-align: center; }
  .ty-countdown { justify-content: center; }
  .ty-callback-meta {
    text-align: center;
    padding-left: 0;
    padding-top: 10px;
    border-left: 0;
    border-top: 1px solid var(--brand-primary-30);
    width: 100%;
  }
  .ty-cd-unit { padding: 5px 8px; min-width: 48px; }
  .ty-cd-unit span { font-size: 1.15rem; }
  .ty-guide-block { flex-direction: column; }
}

/* =====================================================================
   DESKTOP LAYOUT — 2-column grid so users see more above the fold and
   scroll less. Mobile stays as the flex/single-column stack above.
   Order in the final layout (top → bottom):
     Row 1  hero                        (full width)
     Row 2  callback                    (full-width banner)
     Row 3  steps    | summary          (2 cols, equal height)
     Row 4  trust                       (full width)
     Row 5  guide                       (full width, has icon+CTA row)
     Row 6  share                       (full width)
     Row 7  reassurance                 (full width)
   ===================================================================== */
@media (min-width: 900px) {
  .form-thankyou.active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 20px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 32px 32px 48px;
    align-content: start;
    align-items: stretch;
  }
  .form-thankyou.active > .ty-hero,
  .form-thankyou.active > .ty-callback-block,
  .form-thankyou.active > .ty-trust-block,
  .form-thankyou.active > .ty-guide-block,
  .form-thankyou.active > .ty-share-block,
  .form-thankyou.active > .ty-reassurance {
    grid-column: 1 / -1;
  }
  /* Trust bar reads better horizontally when it has full width */
  .ty-trust-items {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  /* Reassurance strip goes horizontal on desktop */
  .ty-reassurance {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .form-thankyou.active,
  .ty-block,
  .ty-check,
  .ty-confetti .conf,
  .ty-reassurance { animation: none !important; }
}

/* =====================================================================
   ANTI-INJECTION — some deployments wrap tel-links / header-CTA elements
   in an accent-tinted pill that fights our clean nube layout. Nuke it.
   ===================================================================== */
.site-header .header-phone,
.site-header a[href^="tel:"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
.site-header .header-phone:hover,
.site-header a[href^="tel:"]:hover {
  background: transparent !important;
  color: var(--brand-primary) !important;
}
.site-header .header-actions {
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
}

/* =====================================================================
   MOBILE CENTER ALIGNMENT — hero, benefits, local sections
   When the split-column layout collapses to single-col, the copy
   should read as centered rather than left-anchored to a 12-col grid.
   ===================================================================== */
@media (max-width: 899px) {
  .hero-copy { text-align: center; }
  .hero-copy .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-badges { justify-content: center; }

  .benefits-copy { text-align: center; }
  .benefits-copy .lead { margin-left: auto; margin-right: auto; }
  .benefits-list { max-width: 440px; margin-left: auto; margin-right: auto; }
  .benefits-list li { text-align: left; }
  .benefits-copy .btn { display: inline-flex; }

  .local-copy { text-align: center; }
  .local-copy .lead { margin-left: auto; margin-right: auto; }
  .local-badges { justify-content: center; }
}

/* =====================================================================
   NARROW-SCREEN HEADER COMPACTION (iPhone SE, small Android)
   ===================================================================== */
@media (max-width: 400px) {
  .site-header .container { padding-left: 14px; padding-right: 14px; gap: 8px; }
  .site-header .logo { font-size: 0.95rem; gap: 6px; letter-spacing: -0.02em; }
  .site-header .logo-mark { width: 28px; height: 28px; font-size: 0.9rem; border-radius: 6px; }
  .site-header .header-actions .btn-primary,
  .site-header .header-actions .btn { padding: 8px 12px; font-size: 0.82rem; white-space: nowrap; }
}
@media (max-width: 340px) {
  /* Even tighter: hide the logo text, keep the mark */
  .site-header .logo > span:not(.logo-mark) { display: none; }
}

/* =====================================================================
   MOBILE STEP CONTENT — extra padding + smaller title so headings
   don't fill edge-to-edge on small screens (visual breathing room)
   ===================================================================== */
@media (max-width: 500px) {
  /* Give the mobile step content breathing room from the sticky header and
     from the screen edges. IDs beat classes for specificity, so we ALSO set
     padding on #pms-quiz-form to make sure it actually applies. */
  .popup-body,
  #pms-quiz-form.popup-body {
    padding: 44px 20px calc(28px + env(safe-area-inset-bottom, 0px));
  }
  .step-headline {
    font-size: clamp(1.35rem, 5.2vw, 1.75rem);
    padding: 0 4px;
    line-height: 1.25;
  }
  .step-sub {
    font-size: 0.95rem;
    padding: 0 4px;
  }
  .popup-body .field-input,
  .popup-body .field-textarea {
    font-size: 16px; /* iOS: prevents auto-zoom on focus */
  }
  .popup-body .radio-card { font-size: 1rem; padding: 18px 20px; }

  /* Fit-in-one-screen on mobile for all radio-card question steps
     (2 = monthly bill, 3 = shade, 4 = preference). Default spacing (radio
     gap 10, card padding 18/20, generous headline+sub margins, popup-body
     padding 44/28) overflows the ~530px popup-body slot on tall steps.
     Tighten uniformly so no radio-question step needs scroll. */
  .form-step[data-step="2"] .radio-list,
  .form-step[data-step="3"] .radio-list,
  .form-step[data-step="4"] .radio-list { gap: 6px; }
  .form-step[data-step="2"] .step-headline,
  .form-step[data-step="3"] .step-headline,
  .form-step[data-step="4"] .step-headline { margin-bottom: 8px; }
  .form-step[data-step="2"] .step-sub,
  .form-step[data-step="3"] .step-sub,
  .form-step[data-step="4"] .step-sub { margin-bottom: 16px; font-size: 0.9rem; }
  .popup-body:has(.form-step[data-step="2"].active),
  .popup-body:has(.form-step[data-step="3"].active),
  .popup-body:has(.form-step[data-step="4"].active),
  #pms-quiz-form.popup-body:has(.form-step[data-step="2"].active),
  #pms-quiz-form.popup-body:has(.form-step[data-step="3"].active),
  #pms-quiz-form.popup-body:has(.form-step[data-step="4"].active) {
    padding-top: 24px;
    padding-bottom: 16px;
  }
  .form-step[data-step="2"] .popup-body .radio-card,
  .form-step[data-step="3"] .popup-body .radio-card,
  .form-step[data-step="4"] .popup-body .radio-card,
  .form-step[data-step="2"] .radio-card,
  .form-step[data-step="3"] .radio-card,
  .form-step[data-step="4"] .radio-card { padding: 12px 16px; }
  .form-step[data-step="3"] .radio-card-title { font-size: 0.95rem; line-height: 1.25; }
  .form-step[data-step="3"] .radio-card-desc { font-size: 0.8rem; line-height: 1.25; }

}

/* =====================================================================
   NARROW-SCREEN THANK-YOU EXTRA COMPACTION
   ===================================================================== */
@media (max-width: 380px) {
  .ty-block { padding: 18px 16px; }
  .ty-reference { font-size: 1.05rem; letter-spacing: 0.1em; padding: 12px 14px; }
  .ty-callback-block { gap: 12px; }
  .ty-cd-unit { min-width: 44px; padding: 5px 6px; }
  .ty-cd-unit span { font-size: 1.05rem; }
  .ty-cd-sep { font-size: 1.05rem; }
  .ty-callback-icon { width: 40px; height: 40px; }
  .ty-callback-icon svg { width: 20px; height: 20px; }
  .ty-guide-block { padding: 20px 18px; }
  .ty-share-btns { gap: 8px; }
  .ty-share-btn { padding: 9px 12px; font-size: 0.82rem; }
}

/* -------------------------------------------------------------------- */
/* v2 base classes required by popup — .logo, .logo-img, .btn family    */
/* -------------------------------------------------------------------- */
.container {
  max-width: 1200px;
  margin-inline: auto;
  /* Notched iPhones can report a non-zero safe-area-inset on one edge and 0 on
     the other (rotation lock, split-screen, PWA install). Symmetric padding
     alone would then look off-centre. max() keeps our 20px minimum but grows
     to cover the inset when the OS reports one. */
  padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right));
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
  text-align: center;
  line-height: 1.2;
}
/* iOS "liquid glass" CTA — semi-translucent green gradient with backdrop
   blur, inset top-highlight + bottom-shadow for depth, subtle white border,
   soft green drop-shadow. Reads as pressed-glass on white and slightly
   frosted on the site's mint header. */
.btn-primary {
  background: linear-gradient(180deg,
    rgba(30, 143, 78, 0.92) 0%,
    rgba(15, 94, 48, 0.92) 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14);
}
.btn-primary:hover {
  background: linear-gradient(180deg,
    rgba(22, 126, 65, 0.96) 0%,
    rgba(10, 70, 35, 0.96) 100%);
  color: #fff;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
}
.btn-secondary {
  background: transparent;
  color: var(--text-heading);
  border: 2px solid var(--border-light);
}
.btn-secondary:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}
.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  padding: 12px 20px;
  font-weight: 500;
}
.btn-ghost:hover { color: var(--text-heading); }
.btn-lg { padding: 18px 36px; font-size: 1.125rem; }
.btn-block { width: 100%; }

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--text-heading);
  letter-spacing: -0.02em;
}
.logo-mark {
  width: 36px; height: 36px;
  background: var(--brand-primary);
  border-radius: 8px;
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 1.1rem;
  box-shadow: 0 2px 8px var(--brand-primary-30);
}
/* Real logo image — used in header, footer, popup */
.logo-img {
  height: 36px;
  width: auto;
  max-width: 200px;
  display: block;
  object-fit: contain;
}
.site-footer .logo-img { height: 40px; }
.popup-header .logo-img { height: 32px; }
@media (max-width: 400px) {
  .logo-img { height: 30px; max-width: 160px; }
  .popup-header .logo-img { height: 26px; }
}
@media (max-width: 340px) {
  .site-header .logo-img { height: 28px; max-width: 140px; }
}

/* ==================================================================== */
/* V2 FORM POPUP — CSS TOKENS scoped to popup elements only.            */
/* Prevents pms-au landing page tokens from being overwritten.           */
/* ==================================================================== */
#form-popup, .form-thankyou {
  --brand-primary: #F79221;
  --brand-primary-dark: #D97706;
  --brand-primary-light: #FEF3E7;
  --brand-primary-10: rgba(247, 146, 33, 0.10);
  --brand-primary-20: rgba(247, 146, 33, 0.20);
  --brand-primary-30: rgba(247, 146, 33, 0.30);
  --brand-primary-50: rgba(247, 146, 33, 0.50);
  --brand-primary-70: rgba(247, 146, 33, 0.70);
  --brand-secondary: #167E41;
  --brand-navy: #0F172A;
  --brand-navy-light: #334155;
  --text-heading: #0F172A;
  --text-body: #334155;
  --text-muted: #64748B;
  --bg-page: #F5F7FB;
  --bg-white: #FFFFFF;
  --bg-soft: #F5F7FB;
  --bg-alt: #EEF2F7;
  --border-light: #E5E7EB;
  --border-card: #F1F5F9;
  --star-gold: #FFBF0C;
  --success: #167E41;
  --danger: #DC2626;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 10px 30px -6px rgba(15, 23, 42, 0.12), 0 4px 10px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 22px 52px -10px rgba(15, 23, 42, 0.18), 0 10px 20px -4px rgba(15, 23, 42, 0.09);
  --shadow-hover: 0 32px 68px -12px rgba(15, 23, 42, 0.22), 0 14px 28px -6px rgba(15, 23, 42, 0.12);
}

/* -------------------------------------------------------------------- */
/* Delta updates — override the earlier appended v2 popup CSS block.    */
/* -------------------------------------------------------------------- */
.field-row-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.field-row-two .field-group { margin-bottom: 0; }
@media (max-width: 480px) {
  .field-row-two { grid-template-columns: 1fr; gap: 0; }
  .field-row-two .field-group { margin-bottom: 16px; }
  .field-row-two .field-group:last-child { margin-bottom: 0; }
}

.form-nav-split {
  justify-content: flex-end !important;
  gap: 12px;
}
.form-nav-split .step-later {
  margin-right: 0 !important;
  padding: 14px 24px;
  color: var(--brand-primary);
  font-weight: 700;
  font-size: 1rem;
}
.form-nav-split .step-skip { display: none !important; }
.form-nav-split .step-continue { display: none; }
.form-step[data-step="5"]:has(#file-preview.has-file) .step-later { display: none; }
.form-step[data-step="5"]:has(#file-preview.has-file) .step-continue { display: inline-flex; }

/* -------------------------------------------------------------------- */
/* Step 5 nav — stacked: Continue on top (full-width primary),          */
/* I'll upload later below right (ghost). Final overrides — earlier     */
/* .form-nav-split delta blocks were removed as dead code (they         */
/* cascaded into this one anyway).                                       */
/* -------------------------------------------------------------------- */
.form-nav-split {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  justify-content: flex-start !important;
}
.form-nav-split .step-continue {
  display: inline-flex !important;
  order: 1;
  width: 100% !important;
  padding: 14px 32px;
}
.form-nav-split .step-later {
  display: inline-flex !important;
  order: 2;
  align-self: center !important;
  padding: 6px 4px;
  color: var(--brand-primary);
  font-weight: 700;
  font-size: 1rem;
  background: transparent;
  border: none;
  width: auto !important;
}
.form-nav-split .step-later:hover { color: var(--brand-primary-dark); }
/* ============================================================
   Ported from /package/ — below-hero sections. Tokens scoped
   to .page-main to avoid clashing with pms-au hero/header.
   ============================================================ */

.page-main {
  --brand-50: #f0f9f2;  --brand-100: #dcf1e0;  --brand-200: #b8e3c1;
  --brand-300: #8bcf9a; --brand-400: #55b56b;  --brand-500: #22a34a;
  --brand-600: #17843a; --brand-700: #12652d;  --brand-800: #0f4b23;  --brand-900: #0a2e17;
  --ink-900: #0e1a13;   --ink-800: #1b2b21;   --ink-700: #364a3d;
  --ink-500: #61735f;   --ink-400: #8a9b8b;   --ink-300: #b7c4b4;
  --ink-200: #dbe3d6;   --ink-100: #eef2ea;   --ink-50:  #f6f8f3;
  --white: #ffffff;
  --accent-cream: #fff8e1; --accent-warm: #ffd77a;
  --cta-500: #167E41; --cta-600: #0F5E30; --cta-700: #094525;
  --container: 1200px; --container-narrow: 900px;
  --r-xs: 8px; --r-sm: 14px; --r-md: 20px; --r-lg: 28px; --r-xl: 36px; --r-2xl: 48px; --r-round: 999px;
  --sh-1: 0 1px 2px rgba(15,42,26,.06), 0 1px 1px rgba(15,42,26,.04);
  --sh-2: 0 6px 16px -6px rgba(15,42,26,.12), 0 3px 6px -2px rgba(15,42,26,.06);
  --sh-3: 0 20px 40px -12px rgba(15,42,26,.18), 0 10px 20px -8px rgba(15,42,26,.10);
  --sh-4: 0 40px 80px -20px rgba(15,42,26,.24), 0 20px 40px -12px rgba(15,42,26,.12);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  font-family: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* --- Buttons (from package/styles.css L96-141) --- */
/* ==========================================================================
   BUTTONS  (SCOPED to .page-main — these use --cta-500 / --r-round
   which are defined inside .page-main. If they leak globally, the
   popup-form buttons — which live OUTSIDE .page-main — render with
   unresolved tokens and become invisible. See earlier .btn/.btn-primary
   block around L4506 which owns the popup buttons.)
   ========================================================================== */
.page-main .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--r-round);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background .18s var(--ease-out);
  white-space: nowrap;
}
.page-main .btn svg { width: 18px; height: 18px; }
/* iOS liquid-glass CTA — scoped .page-main override; matches the popup
   .btn-primary treatment. Semi-translucent green gradient + backdrop blur,
   inset highlight + shadow, soft green glow. */
.page-main .btn-primary {
  background: linear-gradient(180deg,
    rgba(30, 143, 78, 0.92) 0%,
    rgba(15, 94, 48, 0.92) 100%);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14);
}
.page-main .btn-primary:hover {
  background: linear-gradient(180deg,
    rgba(22, 126, 65, 0.96) 0%,
    rgba(10, 70, 35, 0.96) 100%);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}
.page-main .btn-primary:active { transform: translateY(0); }
.page-main .btn-ghost {
  background: transparent;
  color: var(--ink-900);
  border: 1.5px solid var(--ink-200);
}
.page-main .btn-ghost:hover { background: var(--white); border-color: var(--ink-300); }
.page-main .btn-lg { padding: 14px 24px; font-size: 16px; }
.page-main .btn-xl { padding: 18px 32px; font-size: 17px; }
.page-main .btn-xl svg { width: 20px; height: 20px; }
.page-main .btn-block { width: 100%; }

/* Compare Now buttons: uppercase + Inter extra bold, no trailing arrow.
   Only applies inside .page-main so the popup form isn't affected. */
.page-main .btn-open-form {
  font-family: 'Inter', 'Manrope', system-ui, -apple-system, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.page-main .btn-open-form svg { display: none; }


/* --- Sections shared + below-hero (from package/styles.css L414-1299) --- */
/* ==========================================================================
   SECTIONS — shared (all titles centered)
   ========================================================================== */
.section {
  padding: 96px 0;
  position: relative;
  text-align: center;
}
.section-eyebrow {
  display: inline-block;
  padding: 4px 12px;
  background: var(--brand-100);
  color: var(--brand-700);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--r-round);
  margin-bottom: 16px;
}
.section-eyebrow-light { background: rgba(255,255,255,.15); color: rgba(255,255,255,.9); }
.section-title {
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  max-width: 820px;
  margin: 0 auto 20px;
}
.section-title em { color: var(--cta-500); }
.ef-caption em { color: var(--cta-500); }
/* Ported .title-hl now uses the same brand green + soft yellow
   highlighter treatment as .title-accent on the hero. */
.title-hl {
  color: #167E41;
  font-style: normal;
  font-family: inherit;
  background-image: linear-gradient(180deg,
    transparent 0,
    transparent 62%,
    rgba(254, 236, 37, 0.55) 62%,
    rgba(254, 236, 37, 0.55) 92%,
    transparent 92%);
  background-repeat: no-repeat;
  padding: 0 4px;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* Compact per-section CTA */
.section-cta {
  margin-top: 40px;
  text-align: center;
}
.section-lede {
  font-size: clamp(16px, 1.2vw, 19px);
  color: var(--ink-700);
  max-width: 720px;
  margin: 0 auto 40px;
}
.section-outro {
  font-size: 16px;
  color: var(--ink-700);
  max-width: 800px;
  margin: 32px auto 0;
}
.smarter-bullets {
  list-style: none;
  padding: 0;
  margin: -20px auto 32px;
  max-width: 720px;
  text-align: left;
  display: grid;
  gap: 10px;
}
.smarter-bullets li {
  position: relative;
  padding-left: 32px;
  font-size: 16px;
  color: var(--ink-700);
  line-height: 1.5;
}
.smarter-bullets li::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-500);
  box-shadow: 0 0 0 4px rgba(34,163,74,.15);
}

@media (max-width: 780px) {
  .section { padding: 64px 0; }
}

/* ==========================================================================
   SECTION: BEFORE YOU GO SOLAR
   ========================================================================== */
.section-before {
  background: var(--white);
}
.before-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
  margin-top: 32px;
}
.before-copy { text-align: left; }
.before-copy p { margin-bottom: 16px; color: var(--ink-700); font-size: 16px; }
.before-copy p:last-child { margin-bottom: 0; }

.before-visual {
  position: relative;
  border-radius: var(--r-xl);
  overflow: visible;
  aspect-ratio: 5 / 4;
  isolation: isolate;
  margin-bottom: 40px; /* room for the caption pill overflow */
}
.before-visual-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-xl);
  display: block;
}
.before-visual-overlay {
  position: absolute; inset: 0;
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(10,20,15,.25) 0%, rgba(10,20,15,.05) 40%, rgba(10,20,15,.45) 100%);
  pointer-events: none;
  z-index: 1;
}
.energy-flow {
  position: absolute;
  left: 20px; right: 20px; top: 40px; bottom: 60px;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  gap: 22px 10px;
}
/* Layout: two cards per row */
.ef-tile-sun    { grid-column: 1 / 2; grid-row: 1; }
.ef-arrow-1     { grid-column: 2 / 3; grid-row: 1; }
.ef-tile-panels { grid-column: 3 / 4; grid-row: 1; }
.ef-tile-home   { grid-column: 1 / 2; grid-row: 2; }
.ef-tile-battery{ grid-column: 3 / 4; grid-row: 2; }
/* Battery -> Home flows right-to-left in row 2, so flip arrow-3. */
.energy-flow .ef-arrow-3 {
  grid-column: 2 / 3;
  grid-row: 2;
  transform: rotate(180deg);
}
/* Panels -> Battery: down arrow in the right column, centred between rows. */
.energy-flow .ef-arrow-2 {
  display: block;
  position: absolute;
  left: 75%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  width: 32px;
  height: 22px;
  z-index: 3;
}
/* Liquid-glass tile — heavier blur, more see-through */
.ef-tile {
  padding: 18px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.14) 100%);
  backdrop-filter: saturate(200%) blur(36px);
  -webkit-backdrop-filter: saturate(200%) blur(36px);
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,.4);
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(255,255,255,.15),
    0 1px 2px rgba(10,20,15,.12),
    0 20px 40px -16px rgba(10,20,15,.35);
  position: relative;
}
.ef-tile::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.35), transparent 55%);
  pointer-events: none;
  mix-blend-mode: overlay;
}
.ef-icon {
  width: 48px; height: 48px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: var(--brand-100);
  color: var(--brand-700);
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  z-index: 1;
}
.ef-icon svg { width: 26px; height: 26px; }
.ef-tile-sun .ef-icon { background: #fff3c2; color: #b48800; }
.ef-tile-panels .ef-icon { background: #d9e9ff; color: #1f5aa8; }
.ef-tile-battery .ef-icon { background: var(--brand-100); color: var(--brand-700); }
.ef-tile-home .ef-icon { background: #ffe5d9; color: #b8461f; }
.ef-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 8px rgba(10,20,15,.6);
}
.ef-value {
  font-size: 12px;
  color: rgba(255,255,255,.9);
  margin-top: 2px;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 6px rgba(10,20,15,.5);
}
.ef-arrow {
  width: 32px; height: 22px;
  color: var(--white);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.4));
  position: relative;
  z-index: 2;
}
/* Floating caption pill — straddles the bottom edge of the image */
.ef-caption {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  z-index: 3;
  text-align: center;
  font-size: 13px;
  color: var(--ink-900);
  padding: 12px 22px;
  background: var(--white);
  border-radius: var(--r-round);
  box-shadow: 0 8px 24px -6px rgba(10,20,15,.25), 0 1px 2px rgba(10,20,15,.08);
  border: 1px solid var(--brand-100);
  white-space: nowrap;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.ef-caption em { color: var(--cta-500); }

@media (max-width: 900px) {
  .before-grid { grid-template-columns: 1fr; gap: 32px; }
  .before-visual { aspect-ratio: 4 / 5; }
  .energy-flow { left: 14px; right: 14px; top: 14px; gap: 12px 8px; }
  .ef-tile { padding: 14px 10px; }
  .ef-icon { width: 40px; height: 40px; margin-bottom: 8px; }
  .ef-icon svg { width: 22px; height: 22px; }
  .ef-label { font-size: 13px; }
  .ef-value { font-size: 11px; }
  .ef-arrow { width: 22px; height: 18px; }
  .ef-caption { font-size: 12px; padding: 10px 16px; white-space: normal; text-align: center; }
}

/* ==========================================================================
   SECTION: THE SMARTER WAY (compare cards)
   ========================================================================== */
.section-smarter {
  background: var(--white);
  padding-top: 32px;
}
.pkg-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  margin-top: 40px;
}
.pkg-card {
  padding: 24px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--r-xl);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.pkg-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.pkg-tag {
  display: inline-block;
  padding: 4px 12px;
  background: var(--brand-700);
  color: var(--white);
  border-radius: var(--r-round);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}
.pkg-card-b .pkg-tag { background: var(--brand-500); }
.pkg-hero {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 20px;
  background: var(--white);
  padding: 16px;
}
.pkg-hero-badge {
  position: absolute;
  top: 12px; right: 12px;
  padding: 4px 10px;
  background: rgba(255,255,255,.9);
  color: var(--brand-700);
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--r-round);
  z-index: 2;
}
.pkg-hero-illus svg { width: 100%; height: auto; display: block; }
.pkg-hero-illus img {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}
.pkg-list { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; margin: 0; }
.pkg-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--white);
  border-radius: var(--r-sm);
  border: 1px solid var(--ink-100);
}
.pkg-list span { font-size: 13px; color: var(--ink-500); }
.pkg-list strong { font-size: 14px; color: #167E41; font-weight: 700; }
.pkg-vs {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--ink-900);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 20px;
  box-shadow: var(--sh-3);
}

@media (max-width: 900px) {
  .pkg-compare { grid-template-columns: 1fr; }
  .pkg-vs { justify-self: center; }
}

/* ==========================================================================
   SECTION: HOW IT WORKS
   ========================================================================== */
.section-how {
  background: linear-gradient(180deg, var(--white) 0%, var(--brand-50) 100%);
  padding-top: 96px;
}
.how-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
  list-style: none;
  padding-left: 0;
}
.how-step {
  position: relative;
  padding: 32px 28px;
  background: var(--white);
  border-radius: var(--r-xl);
  border: 1px solid var(--ink-100);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.how-step:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--brand-200); }
.how-step-num {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 56px;
  color: #167E41;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.how-step-icon { display: none; }
.how-step-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.how-step-body {
  color: var(--ink-700);
  font-size: 15px;
  margin-bottom: 18px;
}
.how-step-note {
  display: inline-block;
  padding: 6px 12px;
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--r-round);
}

@media (max-width: 900px) {
  .how-steps { grid-template-columns: 1fr; }
  .how-step {
    display: grid;
    grid-template-columns: 92px 1fr;
    padding: 0;
    overflow: hidden;
    align-items: stretch;
  }
  .how-step-num {
    grid-column: 1;
    grid-row: 1 / -1;
    margin: 0;
    padding: 24px 0;
    background: var(--brand-600);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
  }
  .how-step-title { grid-column: 2; margin: 22px 22px 8px; }
  .how-step-body { grid-column: 2; margin: 0 22px 14px; }
  .how-step-note { grid-column: 2; margin: 0 22px 22px; justify-self: start; }
}

/* ==========================================================================
   SECTION: SAVINGS (Section 06) — dark card w/ chart
   ========================================================================== */
.section-savings {
  background: var(--brand-50);
  padding: 64px 0;
}
.savings-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 56px;
  background:
    linear-gradient(135deg, rgba(22,126,65,.55) 0%, rgba(15,94,48,.62) 100%),
    url('savings-bg.webp') center/cover no-repeat;
  border-radius: var(--r-2xl);
  color: var(--white);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Soft light-green glow (kept subtle, over the photo) */
.savings-card::before {
  content: '';
  position: absolute;
  top: -60%; right: -20%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(139,207,154,.25), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.savings-copy { position: relative; z-index: 1; text-align: center; }
.savings-body { margin-left: auto; margin-right: auto; }
.savings-title {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 20px;
  color: var(--white);
  text-shadow: 0 2px 16px rgba(0,0,0,.35);
}
/* Highlighted keyword stays white on the dark savings card, same
   treatment as .final-cta-title .title-hl. Yellow band remains. */
.savings-title .title-hl { color: var(--white); }
.savings-body {
  color: #ffffff;
  font-size: 15px;
  margin-bottom: 14px;
  max-width: 460px;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
.savings-copy .btn-primary {
  margin-top: 20px;
  background: var(--cta-500);
  color: var(--white);
  box-shadow: none;
}
.savings-copy .btn-primary:hover { background: var(--cta-600); }

.savings-visual {
  position: relative;
  z-index: 1;
  padding: 24px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-xl);
  backdrop-filter: blur(10px);
}
.savings-viz-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 12px;
  color: rgba(255,255,255,.7);
}
.savings-viz-legend { display: inline-flex; gap: 14px; align-items: center; }
.savings-viz-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.dot-before { background: rgba(255,255,255,.35); }
.dot-after { background: var(--brand-400); }

.savings-viz-bars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  height: 220px;
  align-items: end;
  padding: 0 8px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-bottom: 12px;
}
.savings-viz-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  align-items: end;
  height: 100%;
  position: relative;
}
.savings-viz-year {
  position: absolute;
  bottom: -24px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,.6);
  font-weight: 600;
}
.bar {
  height: var(--h, 0%);
  border-radius: 6px 6px 0 0;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4px;
  transition: height 1.2s var(--ease-out);
}
.bar span {
  font-size: 10px;
  font-weight: 700;
  color: var(--white);
  opacity: .9;
}
.bar-before { background: rgba(255,255,255,.2); }
.bar-after { background: linear-gradient(180deg, var(--brand-400), var(--brand-500)); }
.savings-viz-foot { margin-top: 32px; }
.savings-viz-note {
  font-size: 11px;
  color: rgba(255,255,255,.5);
  text-align: center;
}

@media (max-width: 900px) {
  .savings-card { grid-template-columns: 1fr; padding: 36px 28px; gap: 32px; border-radius: var(--r-xl); margin-inline: auto; max-width: 100%; }
}

/* ==========================================================================
   SECTION: WHY CHOOSE US
   ========================================================================== */
.section-why {
  background: var(--white);
  padding-top: 96px;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.why-card {
  padding: 28px 24px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--r-xl);
  transition: transform .3s var(--ease-out), background .3s;
}
.why-card:hover { transform: translateY(-4px); background: var(--white); border-color: var(--brand-300); box-shadow: var(--sh-3); }
.why-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  background: var(--brand-500);
  color: var(--white);
  border-radius: 14px;
  margin-bottom: 18px;
}
.why-icon svg { width: 26px; height: 26px; }
.why-card-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.015em;
}
.why-card-body {
  color: var(--ink-700);
  font-size: 14.5px;
}

@media (max-width: 1000px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .why-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SECTION: REVIEWS
   ========================================================================== */
.section-reviews {
  background: var(--ink-50);
  padding-top: 96px;
}
.reviews-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
  text-align: center;
}
.reviews-rating { text-align: center; }
.reviews-stars { color: #FFBF0C; font-size: 20px; letter-spacing: 2px; }
.reviews-rating-meta { font-size: 13px; color: var(--ink-500); margin-top: 4px; }
.reviews-rating-meta strong { color: #167E41; font-size: 16px; font-weight: 700; margin-right: 4px; }

/* Sliding auto-marquee (both desktop + mobile) */
.reviews-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
  padding: 8px 0 12px;
}
.reviews-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: reviewsScroll 80s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* Only pause on real hover — mobile touch-and-hold used to freeze the marquee. */
@media (hover: hover) {
  .reviews-marquee:hover .reviews-track { animation-play-state: paused; }
}
@keyframes reviewsScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .reviews-track { animation: none; }
}



/* ==========================================================================
   SECTION: FAQ
   ========================================================================== */
.section-faq {
  background: var(--white);
  padding-top: 96px;
}
.faq-container { max-width: var(--container-narrow); }
.faq-head { text-align: center; margin-bottom: 32px; }
.faq-head .section-eyebrow { margin-bottom: 12px; }
.faq-head .section-title { margin: 0 auto; }

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: background .2s;
}
.faq-item[open] { background: var(--white); border-color: var(--brand-200); box-shadow: var(--sh-2); }
.faq-item summary {
  padding: 20px 24px;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink-900);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: color .2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary { color: var(--brand-700); }
.faq-caret {
  display: inline-flex;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--white);
  color: var(--brand-700);
  align-items: center;
  justify-content: center;
  transition: transform .3s var(--ease-out);
  flex-shrink: 0;
}
.faq-caret svg { width: 18px; height: 18px; }
.faq-item[open] .faq-caret { transform: rotate(180deg); background: var(--brand-500); color: var(--white); }
.faq-body {
  padding: 0 24px 20px;
  color: var(--ink-700);
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
}
.faq-item summary { text-align: left; }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.section-final-cta {
  background: var(--white);
  padding: 64px 0 96px;
}
.final-cta-card {
  position: relative;
  padding: 72px 48px;
  background:
    linear-gradient(180deg, rgba(10,46,23,.55) 0%, rgba(10,46,23,.15) 45%, rgba(10,46,23,.55) 100%),
    url('final-cta-bg.webp') center/cover no-repeat;
  border-radius: var(--r-2xl);
  color: var(--white);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.final-cta-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,180,80,.28), transparent 60%);
  pointer-events: none;
  z-index: -1;
}
.final-cta-title {
  font-size: clamp(32px, 4.5vw, 54px);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 16px;
  color: var(--white);
  text-shadow: 0 2px 20px rgba(0,0,0,.5);
}
/* On the dark final-CTA background, keep the highlighted keyword
   white — green becomes unreadable. Yellow highlighter band stays. */
.final-cta-title .title-hl { color: var(--white); }
.final-cta-body {
  font-size: 17px;
  color: rgba(255,255,255,.92);
  margin-bottom: 32px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
.final-cta-btn {
  background: var(--cta-500);
  color: var(--white);
  box-shadow: none;
}
.final-cta-btn:hover { background: var(--cta-600); color: var(--white); }
.final-cta-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px;
  margin: 32px 0 0;
  padding: 28px 0 0;
  list-style: none;
  border-top: 1px solid rgba(255,255,255,.15);
}
.final-cta-strip li {
  font-size: 13px;
  color: rgba(255,255,255,.75);
  font-weight: 500;
  position: relative;
}
.final-cta-strip li::before {
  content: '✓';
  color: var(--brand-300);
  font-weight: 700;
  margin-right: 6px;
}

@media (max-width: 720px) {
  .final-cta-card { padding: 48px 24px; border-radius: var(--r-xl); }
  /* Column, ticks left-aligned in a vertical column; the block itself
     stays centred in the card via width:fit-content + margin-inline:auto. */
  .final-cta-strip { flex-direction: column; align-items: flex-start; width: fit-content; margin-inline: auto; gap: 10px; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--ink-900);
  color: rgba(255,255,255,.7);
  padding: 64px 0 32px;
}
.site-footer-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  margin-bottom: 40px;
}
.site-footer-logo { height: 32px; width: auto; margin-bottom: 12px; filter: brightness(0) invert(1); }
.site-footer-brand p { font-size: 14px; max-width: 380px; }
.site-footer-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.site-footer-links h4 {
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.site-footer-links a {
  display: block;
  font-size: 14px;
  color: rgba(255,255,255,.65);
  padding: 4px 0;
  transition: color .18s;
}
.site-footer-links a:hover { color: var(--white); }
.site-footer-copy {
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 13px;
  color: rgba(255,255,255,.5);
}

@media (max-width: 720px) {
  .site-footer-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* ==========================================================================
   FLOATING MOBILE CTA
   ========================================================================== */
.floating-cta {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  z-index: 35;
  display: none;
  opacity: 0;
  transform: translateY(120%);
  transition: opacity .28s ease, transform .32s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.floating-cta.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.floating-cta .btn {
  width: 100%;
  padding: 16px;
  font-size: 16px;
  box-shadow: 0 12px 30px -6px rgba(0,0,0,.3);
}
@media (max-width: 860px) {
  .floating-cta { display: block; }
  .page-main { padding-bottom: 80px; }
}


/* --- Reveal + Brands (from package/styles.css L1919-EOF) --- */
/* ==========================================================================
   REVEAL animations base (GSAP will drive these)
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}
/* Fallback if GSAP fails to load — show everything after 1.2s */
html.reveal-fallback [data-reveal] {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease-out, transform .6s ease-out;
}
/* Body-lock while popup open (script.js adds .popup-open to body) */
body.popup-open { overflow: hidden; }

/* Prefer reduced motion → skip all reveal + smooth-scroll transforms */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   BRANDS — partner logos strip (below hero)
   ========================================================================== */
.brands {
  padding: 56px 0 40px;
  background: var(--white);
  text-align: center;
  border-radius: 0;
  margin-top: 0;
  position: relative;
  z-index: 1;
}
.brands-headline {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-500);
  margin-bottom: 32px;
  font-weight: 700;
}
/* These tracks are deliberately plain `fr`, so each box is at least as wide as
   the logos inside it and the logos always render at their natural size.
   That means the grid has a hard floor of ~1150px and simply cannot fit a
   narrow window — which is why the marquee breakpoint below is 1199px and not
   899px. Do not "fix" this with minmax(0, 1fr): it lets the tracks shrink, and
   the logos shrink with them (tw-solar went 67px -> 38px at 1440). */
.brands-groups {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1.15fr;
  gap: 20px;
}
.brand-group {
  padding: 22px 20px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--r-xl);
  transition: box-shadow .25s, border-color .25s, transform .25s;
}
.brand-group:hover {
  box-shadow: var(--sh-2);
  border-color: var(--brand-200);
  transform: translateY(-2px);
}
.brand-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-700);
  margin-bottom: 16px;
}
.brand-group-logos {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: clamp(12px, 1.6vw, 24px);
  min-height: 48px;
}
.brand-logo-img {
  flex: 0 1 auto;
  height: 28px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  opacity: .8;
  transition: opacity .2s;
}
.brand-logo-img:hover { opacity: 1; }

/* Mobile: hide grouped grid, show a single sliding marquee of all logos */
.brands-marquee-mobile { display: none; }
/* 1199px, not 899px: the grouped grid above has a ~1150px min-content floor,
   so between 900px and ~1200px it overflowed and put a horizontal scrollbar on
   the whole page (small laptops, iPad landscape). The sliding strip is
   width-agnostic, so it covers that band too. */
@media (max-width: 1199px) {
  .brands-headline { display: none; }
  .brands-groups { display: none; }
  .brands-marquee-mobile {
    display: block;
    overflow: hidden;
    padding: 8px 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  }
  .brands-track-mobile {
    display: flex;
    align-items: center;
    gap: 42px;
    width: max-content;
    animation: brandsScrollMobile 28s linear infinite;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  .brands-track-mobile img {
    flex: 0 0 auto;
    height: 26px;
    width: auto;
    max-width: 110px;
    object-fit: contain;
    opacity: .8;
  }
  @keyframes brandsScrollMobile {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .brands-track-mobile { animation: none; }
}

/* --- Compare Columns (ported from /compare-solar-packages/) --- */
.compare-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 40px auto 0;
  max-width: 1040px;
  text-align: left;
}
.compare-column {
  padding: 24px;
  border-radius: var(--r-xl);
  border: 1px solid;
}
.compare-column-typical {
  background: #fafafa;
  border-color: var(--ink-100);
}
.compare-column-us {
  background: var(--brand-50);
  border-color: var(--brand-200);
}
.compare-column-head {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid;
}
.compare-column-typical .compare-column-head {
  color: var(--ink-500);
  border-color: var(--ink-100);
}
.compare-column-us .compare-column-head {
  color: var(--brand-800);
  border-color: var(--brand-200);
}
.compare-column-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.compare-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.5;
}
.compare-column-typical .compare-item { color: var(--ink-600); }
.compare-column-us .compare-item { color: var(--ink-900); }
.compare-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.compare-icon-x {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}
.compare-icon-check {
  background: var(--brand-500);
  color: var(--white);
}
.compare-icon svg { width: 12px; height: 12px; }

@media (max-width: 780px) {
  .compare-columns { grid-template-columns: 1fr; gap: 16px; }
  .compare-column { padding: 20px; }
}