/* ============================================================
   LoanSpace.ai — Lead Funnel Wizard Styles
   ============================================================ */

:root {
  --primary: #1a6db5;
  --primary-light: #4a9ad4;
  --primary-dark: #145a96;
  --primary-bg: #e8f1fa;
  --success: #10b981;
  --success-bg: #ecfdf5;
  --warning: #f59e0b;
  --warning-bg: #fffbeb;
  --danger: #ef4444;
  --danger-bg: #fef2f2;
  --text: #1e293b;
  --text-light: #64748b;
  --text-muted: #94a3b8;
  --bg: #f0f4fb;
  --white: #ffffff;
  --border: #e2e8f0;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 40px rgba(0,0,0,0.1);
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Editorial finance tokens (used by the redesigned funnel hero,
     score preview, trust bar, and wizard). All contrast ratios on
     --paper hit WCAG AAA. Brand colors pulled from the logo: bright
     royal blue (roof) and bright orange (door stripe). */
  --ink: #0b1b2b;
  --ink-soft: #1f3a5f;
  --paper: #faf7f2;
  --paper-2: #f3ede2;
  --rule: #c8c0b0;
  --rule-strong: #9c9080;
  --brand-blue: #1a6db5;
  --brand-blue-soft: #4a9ad4;
  --brand-blue-deep: #11507f;
  --brand-orange: #ef7b1d;
  --brand-orange-soft: #f5a04a;
  --brand-orange-deep: #c95f0a;
  /* Back-compat aliases — older rules still reference --gold / --gold-soft.
     Mapped to the brand orange so the palette stays consistent. */
  --gold: var(--brand-orange);
  --gold-soft: var(--brand-orange-soft);
  --font-serif: "Fraunces", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

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

html {
  /* Match body so iOS rubber-band overscroll can't expose browser-default white */
  background: var(--paper);
  overscroll-behavior-y: none;
}

/* Funnel-specific html background in dark mode. */
html[data-theme="dark"] {
  background: #0b1220;
}

/* Dark-mode token remap — flips the editorial light tokens to their
   dark variants so any rule referencing var(--ink-soft) etc stays
   readable against the dark surface. Without this block, the funnel
   page's local :root tokens stay light-mode (#1f3a5f ink-soft etc.)
   and rules like `.eyebrow-page { color: var(--ink-soft) }` render
   dark-navy text on dark-navy background. */
html[data-theme="dark"] {
  --ink: #f5efe2;           /* was #0b1b2b — now light cream */
  --ink-soft: #b8c4d6;      /* was #1f3a5f — now light blue-gray */
  --paper: #0b1220;         /* was #faf7f2 — now editorial deep ink */
  --paper-2: #11192a;       /* was #f3ede2 — now lifted deep ink */
  --rule: rgba(126, 196, 245, 0.18);        /* was #c8c0b0 */
  --rule-strong: rgba(126, 196, 245, 0.32); /* was #9c9080 */
}

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
  /* Stop rubber-band overscroll from revealing html/browser background */
  overscroll-behavior-y: none;
}
[data-theme="dark"] body { color: #f5efe2; }

/* ---- Header ---- */
.funnel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Padding-top = device safe-area inset (notch/Dynamic Island in native
     app) OR a tight 12px baseline in Safari/desktop where the browser
     chrome already handles status-bar spacing. Previously 44px which
     produced visible dead space on Safari mobile. */
  padding-top: max(12px, env(safe-area-inset-top));
  padding-right: max(32px, env(safe-area-inset-right));
  padding-bottom: 16px;
  padding-left: max(32px, env(safe-area-inset-left));
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 100;
  /* Clip any content (including the logo image) that would extend above
     the header's top edge — prevents the logo tip poking into the status
     bar / system chrome area during overscroll bounces. */
  overflow: hidden;
}

.funnel-logo {
  text-decoration: none;
}

.funnel-logo img {
  height: 80px;
}

.skip-to-chat {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 8px;
  transition: var(--transition);
}

.skip-to-chat:hover {
  background: var(--primary-bg);
}

/* ---- Desktop header nav ---- */
.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-auth, .header-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-auth-link {
  color: var(--text-light);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 8px;
  transition: var(--transition);
}

.header-auth-link:hover {
  color: var(--text);
  background: var(--bg);
}

.btn-register {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  background: var(--primary);
  color: var(--white);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  transition: var(--transition);
}

.btn-register:hover {
  background: var(--primary-dark);
}

.header-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
}

/* ---- Mobile header controls (hidden on desktop) ---- */
.mobile-header-controls {
  display: none;
  align-items: center;
  gap: 4px;
}

/* ---- Mobile auth — compact text links ----
   Plain text links, no pill button. white-space:nowrap prevents the wrap
   into "Sign / In" that happened when the row got tight. The accent
   variant (Sign up) just bumps weight + uses primary color so it reads
   as the preferred action without the visual heft of a filled button. */
.mobile-auth-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-light);
  text-decoration: none;
  border-radius: 6px;
  white-space: nowrap;
  transition: var(--transition);
}
.mobile-auth-link:hover,
.mobile-auth-link:active {
  color: var(--text);
  background: var(--bg);
}
.mobile-auth-link--accent,
.mobile-auth-link--accent:link,
.mobile-auth-link--accent:visited {
  color: var(--primary) !important;
  font-weight: 600;
}
.mobile-auth-link--accent:hover,
.mobile-auth-link--accent:active {
  color: var(--primary-dark) !important;
  background: var(--bg);
}
.mobile-auth-link .header-avatar {
  width: 28px;
  height: 28px;
  font-size: 13px;
  margin: 0;
}
[data-theme="dark"] .mobile-auth-link {
  color: #cbd5e1;
}
[data-theme="dark"] .mobile-auth-link:hover,
[data-theme="dark"] .mobile-auth-link:active {
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .mobile-auth-link--accent,
[data-theme="dark"] .mobile-auth-link--accent:link,
[data-theme="dark"] .mobile-auth-link--accent:visited {
  color: #60a5fa !important;
}
[data-theme="dark"] .mobile-auth-link--accent:hover,
[data-theme="dark"] .mobile-auth-link--accent:active {
  color: #93c5fd !important;
}

.mobile-dark-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-light);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: var(--transition);
}

.mobile-dark-toggle:hover {
  background: var(--bg);
  color: var(--primary);
}

[data-theme="dark"] .mobile-dark-toggle {
  color: #fbbf24;
}

/* Override light :hover background that otherwise sticks after tap on iOS */
[data-theme="dark"] .mobile-dark-toggle:hover,
[data-theme="dark"] .mobile-dark-toggle:focus,
[data-theme="dark"] .mobile-dark-toggle:active {
  color: #f59e0b;
  background: rgba(255, 255, 255, 0.08);
}

/* ---- Hamburger (mobile only) ---- */
.hamburger-btn {
  display: none;
  background: none;
  border: none;
  font-size: 22px;
  color: var(--text);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: var(--transition);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  touch-action: manipulation;
  position: relative;
  z-index: 102;
}

/* Prevent child icon from swallowing taps (WebKit iPadOS 26 quirk) */
.hamburger-btn > * {
  pointer-events: none;
}

.hamburger-btn:hover {
  background: var(--bg);
}

/* Dark-mode: icon must be light on black header, and the :hover/:focus/:active
   background must also be dark — iOS Safari keeps :hover state after tap,
   which otherwise leaves a light-colored pill behind the icon. */
[data-theme="dark"] .hamburger-btn {
  color: #f1f5f9;
}

[data-theme="dark"] .hamburger-btn:hover,
[data-theme="dark"] .hamburger-btn:focus,
[data-theme="dark"] .hamburger-btn:active {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

/* ---- Mobile dropdown menu ----
   NOTE: no `display: none` here — that would prevent the `.open` class
   from animating `max-height`. Instead we use `max-height: 0` + `overflow: hidden`
   to hide it, which remains togglable at any viewport width. */
.mobile-menu {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
  position: fixed;
  /* Offset for header height + iOS safe-area inset so the menu sits below the notch/status bar */
  top: calc(57px + env(safe-area-inset-top));
  left: 0;
  right: 0;
  z-index: 101;
  visibility: hidden;
}

.mobile-menu.open {
  visibility: visible;
  max-height: 300px;
}

.mobile-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1px solid var(--border);
  transition: var(--transition);
}

.mobile-menu-item:last-child {
  border-bottom: none;
}

.mobile-menu-item:hover {
  background: var(--bg);
}

.mobile-menu-item i {
  width: 20px;
  text-align: center;
  color: var(--text-muted);
}

.mobile-menu-signup {
  color: var(--primary);
  font-weight: 600;
}

.mobile-menu-signup i {
  color: var(--primary);
}

/* ---- Progress Bar ---- */
.progress-container {
  position: sticky;
  /* Match header height (base padding + logo + safe-area inset) so the progress bar
     docks flush below the header on iOS devices with a notch / Dynamic Island */
  top: calc(113px + env(safe-area-inset-top));
  z-index: 99;
  background: var(--paper);
  padding: 0;
  border-bottom: 1px solid var(--rule);
  margin-top: -1px;
}
[data-theme="dark"] .progress-container {
  background: #0b1220;
  border-bottom-color: rgba(126, 196, 245, 0.18);
}

/* Hide the wizard progress bar while the landing hero is visible — showing
   "Goal · Your Details · Almost There" before the user has tapped Get Started
   prematurely signals they're already in step 1 and competes with the hero
   for attention. The bar reappears the moment funnel.js applies .hidden to
   the hero (which happens on Get Started or first wizard interaction).

   Uses :has() because the DOM order is .progress-container BEFORE
   .funnel-hero, so the `+` adjacent-sibling combinator can't reach back.
   :has() is baseline-supported across iOS Safari 15.4+ and all modern
   browsers — safe for the Capacitor WebView. */
body:has(.funnel-hero:not(.hidden)) .progress-container {
  display: none;
}

.progress-bar {
  height: 4px;
  background: var(--primary);
  transition: width 0.5s ease;
  width: 0%;
}

.progress-steps {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 12px 16px;
  font-size: 12px;
  color: var(--text-muted);
}

.progress-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  transition: var(--transition);
}

.progress-step.active {
  color: var(--primary);
}

.progress-step.completed {
  color: var(--success);
}

.progress-step .step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: var(--transition);
}

.progress-step.active .step-dot {
  background: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}

.progress-step.completed .step-dot {
  background: var(--success);
}

/* ============================================================
   Hero — Editorial Finance Cover
   A cream-paper canvas with hairline rules, an oversized serif
   headline, and a banking-style data ledger. IDs preserved:
   #funnelHero, #heroRateStrip, #heroRate30yr/15yr,
   #heroArrow30yr/15yr, #heroRateSource.
   ============================================================ */
.funnel-hero {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}

/* Very low-amplitude paper drift so the hero feels alive without
   being distracting. Disabled for prefers-reduced-motion. */
.funnel-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 600px at 0% 0%, rgba(168, 117, 40, 0.06), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgba(11, 27, 43, 0.04), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
}

/* --- Top index strip --- */
.hero-index-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.hero-index-strip .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-orange);
  margin: 0 8px;
  vertical-align: middle;
}
.hero-index-strip .sep {
  margin: 0 10px;
  color: var(--rule-strong);
}

/* --- Eyebrow row --- */
.hero-eyebrow-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 22px 0 18px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hero-eyebrow-row .eyebrow-num {
  color: var(--brand-orange);
  font-weight: 700;
  margin-right: 10px;
}
.hero-eyebrow-row .eyebrow-page {
  color: var(--ink-soft);
}

/* --- Editorial headline + body row --- */
.hero-main {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 56px;
  padding: 24px 0 56px;
  align-items: start;
}

.hero-headline-col {
  min-width: 0;
}

.funnel-hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.75rem, 7vw, 7.5rem);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 32px;
  text-wrap: balance;
}
.funnel-hero-title .accent {
  font-style: italic;
  font-weight: 400;
  color: var(--brand-orange);
  font-variation-settings: "opsz" 144, "SOFT" 60;
}
/* Legacy gradient class — kept for back-compat but recoloured to match */
.hero-gradient-text {
  font-style: italic;
  font-weight: 400;
  color: var(--brand-orange);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.hero-deck {
  font-size: 18px;
  line-height: 1.65;
  font-weight: 500;
  color: var(--ink-soft);
  max-width: 540px;
  margin: 0 0 32px;
}
.funnel-hero-subtitle { /* legacy alias — kept readable if any code still uses it */
  font-size: 18px;
  line-height: 1.65;
  font-weight: 500;
  color: var(--ink-soft);
  max-width: 540px;
  margin: 0 0 32px;
}

/* --- CTA row --- */
.hero-cta-row {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.hero-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--brand-orange);
  color: #ffffff;
  border: 1px solid var(--brand-orange);
  border-radius: 999px;
  padding: 18px 32px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  position: relative;
  box-shadow: 0 8px 24px -8px rgba(239, 123, 29, 0.55);
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.2s ease;
  min-height: 56px;
}
.hero-btn-primary::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  pointer-events: none;
  transition: border-color 0.25s ease;
}
.hero-btn-primary:hover {
  transform: translateY(-2px);
  background: var(--brand-orange-deep);
  border-color: var(--brand-orange-deep);
  box-shadow: 0 14px 32px -10px rgba(201, 95, 10, 0.55);
  color: #ffffff;
  text-decoration: none;
}
.hero-btn-primary:hover::after { border-color: rgba(255, 255, 255, 0.6); }
.hero-btn-primary i {
  font-size: 13px;
  transition: transform 0.2s ease;
}
.hero-btn-primary:hover i { transform: translateX(3px); }

.hero-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  color: var(--brand-blue);
  padding: 14px 4px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  position: relative;
  transition: color 0.2s ease;
  min-height: 48px;
}
.hero-btn-secondary::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 8px;
  height: 2px;
  background: var(--brand-blue);
  transform-origin: left center;
  transition: transform 0.25s ease, background 0.25s ease;
}
.hero-btn-secondary:hover { color: var(--brand-blue-deep); text-decoration: none; }
.hero-btn-secondary:hover::after { transform: scaleX(1.05); background: var(--brand-orange); }

/* --- Right column: photo as editorial figure --- */
.hero-figure-col {
  position: relative;
  min-width: 0;
}
.hero-figure {
  position: relative;
  margin: 0;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 12px;
  box-shadow: 0 30px 60px -40px rgba(11, 27, 43, 0.35);
}
.hero-figure-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
  filter: saturate(0.94) contrast(1.02);
}
.hero-figure::before {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  right: 16px;
  bottom: 16px;
  border: 1px solid var(--brand-blue-soft);
  pointer-events: none;
  z-index: -1;
}
.hero-figure-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 4px 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.hero-figure-caption .fig-num { color: var(--brand-orange); font-weight: 700; }

/* --- Trust micro-strip below CTA --- */
.hero-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 36px;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.hero-features {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero-feature {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: 0.01em;
}
.hero-feature i {
  color: var(--brand-blue);
  font-size: 14px;
  width: 18px;
  text-align: center;
}

.hero-quick-link {
  margin: 22px 0 0;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.55;
  font-weight: 500;
}
.hero-quick-link a,
.hero-quick-link a:link,
.hero-quick-link a:visited {
  color: var(--brand-blue) !important;
  text-decoration: underline;
  text-decoration-color: var(--brand-blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  font-weight: 600;
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
.hero-quick-link a:hover,
.hero-quick-link a:active {
  color: var(--brand-blue-deep) !important;
  text-decoration-color: var(--brand-orange);
}

/* --- Data ledger (full-width band beneath the hero) --- */
.hero-ledger {
  position: relative;
  z-index: 1;
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.hero-ledger-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.hero-ledger-cell {
  padding: 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  transition: background 0.2s ease;
}
.hero-ledger-cell + .hero-ledger-cell {
  border-left: 1px solid var(--rule);
}
.hero-ledger-cell:hover {
  background: rgba(26, 109, 181, 0.06);
}
.hero-ledger-label {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-blue);
  font-weight: 700;
}
.hero-ledger-value {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  min-height: 30px;
}
.hero-ledger-cell.is-loading .hero-ledger-value::before {
  content: '—';
  color: var(--rule-strong);
}
.hero-ledger-foot {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.hero-ledger-arrow {
  font-size: 14px;
  line-height: 1;
}
.hero-ledger-arrow.up   { color: #b04646; }
.hero-ledger-arrow.down { color: #2f7a4a; }
.hero-ledger-arrow.flat { color: var(--rule-strong); }

.hero-ledger-cell.score .hero-ledger-value { color: var(--brand-orange); }
.hero-ledger-cell.score .hero-ledger-label { color: var(--brand-orange-deep); }

/* Legacy rate-strip IDs stay on lookup but display via the ledger.
   Hide the wrapping label/divider/source elements that were styled
   for the old pill — the ledger cells supply their own structure. */
.hero-rate-strip { display: contents; }
.hero-rate-label,
.hero-rate-term,
.hero-rate-divider { display: none; }
.hero-rate-source { display: none; }

/* Hide hero after first step (preserved selector for funnel.js) */
.funnel-hero.hidden { display: none; }
.funnel-hero.hidden ~ .hero-ledger { display: none; }
.funnel-hero.hidden ~ .score-preview { display: none; }

/* ---- Hero Responsive ---- */
@media (max-width: 1024px) {
  .hero-inner { padding: 0 32px; }
  .hero-ledger-inner { padding: 0 32px; }
  .hero-main { grid-template-columns: 1fr; gap: 36px; }
  .hero-figure { max-width: 520px; margin: 0 auto; }
}

@media (max-width: 767px) {
  .hero-inner { padding: 0 20px; }
  .hero-ledger-inner { padding: 0 20px; }

  .hero-index-strip {
    flex-wrap: wrap;
    font-size: 11.5px;
    padding: 12px 0;
    gap: 6px 10px;
  }
  .hero-index-strip .hero-index-right { display: none; }

  .hero-eyebrow-row {
    padding: 18px 0 14px;
    font-size: 11.5px;
  }

  .hero-main { padding: 16px 0 40px; gap: 28px; }

  .funnel-hero-title {
    font-size: 2.75rem;
    line-height: 1.05;
  }

  .hero-deck,
  .funnel-hero-subtitle {
    font-size: 17px;
    line-height: 1.6;
  }

  .hero-cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    width: 100%;
    margin-bottom: 28px;
  }
  .hero-btn-primary,
  .hero-btn-secondary {
    width: 100%;
    justify-content: center;
    text-align: center;
    font-size: 17px;
  }
  .hero-btn-secondary {
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 16px 24px;
  }
  .hero-btn-secondary::after { display: none; }

  .hero-trust-strip { padding-top: 22px; gap: 16px 24px; }
  .hero-feature { font-size: 14.5px; }

  .hero-figure-img { aspect-ratio: 5 / 4; }
  .hero-figure::before { display: none; }
  /* On phones the figure caption is too tight for the two-column flex
     row — stack it so the description doesn't wrap awkwardly, and
     hide the redundant "LoanSpace.ai" tag (logo is already in the
     header). */
  .hero-figure-caption {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .hero-figure-caption > span:last-child { display: none; }

  /* Ledger stays 2-up on mobile — 30Y / 15Y side by side. */
  .hero-ledger-cell { padding: 18px 18px; }
  .hero-ledger-value { font-size: 26px; }
}

@media (max-width: 380px) {
  .funnel-hero-title { font-size: 2.4rem; }
  .hero-ledger-value { font-size: 22px; }
}

/* Subtle entrance animation — disabled for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .funnel-hero-title {
    animation: heroSerifSettle 700ms ease-out both;
  }
  .hero-ledger-cell {
    animation: heroLedgerIn 600ms ease-out both;
  }
  .hero-ledger-cell:nth-child(1) { animation-delay: 60ms; }
  .hero-ledger-cell:nth-child(2) { animation-delay: 140ms; }
}
@keyframes heroSerifSettle {
  0%   { opacity: 0; transform: translateY(6px); font-variation-settings: "opsz" 100, "SOFT" 30; }
  100% { opacity: 1; transform: translateY(0);    font-variation-settings: "opsz" 144, "SOFT" 30; }
}
@keyframes heroLedgerIn {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---- Dark mode (editorial inverted) ---- */
[data-theme="dark"] .funnel-hero {
  background: #0b1220;
  color: #f1e9d9;
  border-bottom-color: rgba(216, 207, 192, 0.15);
}
[data-theme="dark"] .funnel-hero::before {
  background:
    radial-gradient(1100px 600px at 0% 0%, rgba(239, 123, 29, 0.10), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgba(74, 154, 212, 0.08), transparent 60%);
}
[data-theme="dark"] .hero-index-strip,
[data-theme="dark"] .hero-eyebrow-row,
[data-theme="dark"] .hero-figure-caption,
[data-theme="dark"] .hero-ledger-foot { color: #b8c4d6; }
[data-theme="dark"] .hero-ledger-label { color: #7ec4f5; }
[data-theme="dark"] .hero-index-strip { border-bottom-color: rgba(126, 196, 245, 0.18); }
[data-theme="dark"] .hero-eyebrow-row .eyebrow-num,
[data-theme="dark"] .hero-figure-caption .fig-num,
[data-theme="dark"] .funnel-hero-title .accent,
[data-theme="dark"] .hero-gradient-text,
[data-theme="dark"] .hero-ledger-cell.score .hero-ledger-value,
[data-theme="dark"] .hero-ledger-cell.score .hero-ledger-label { color: var(--brand-orange-soft); }
[data-theme="dark"] .funnel-hero-title { color: #f5efe2; }
[data-theme="dark"] .hero-deck,
[data-theme="dark"] .funnel-hero-subtitle,
[data-theme="dark"] .hero-feature,
[data-theme="dark"] .hero-quick-link { color: #d6dde8; }
[data-theme="dark"] .hero-quick-link a,
[data-theme="dark"] .hero-quick-link a:link,
[data-theme="dark"] .hero-quick-link a:visited { color: #7ec4f5 !important; }
[data-theme="dark"] .hero-quick-link a:hover { color: #aedaff !important; }
[data-theme="dark"] .hero-btn-primary {
  background: var(--brand-orange);
  color: #ffffff;
  border-color: var(--brand-orange);
}
[data-theme="dark"] .hero-btn-primary:hover {
  background: var(--brand-orange-deep);
  border-color: var(--brand-orange-deep);
}
[data-theme="dark"] .hero-btn-primary::after { border-color: rgba(255, 255, 255, 0.4); }
[data-theme="dark"] .hero-btn-secondary { color: #7ec4f5; }
[data-theme="dark"] .hero-btn-secondary:hover { color: var(--brand-orange-soft); }
[data-theme="dark"] .hero-figure {
  background: #11192a;
  border-color: rgba(126, 196, 245, 0.2);
}
[data-theme="dark"] .hero-figure::before { border-color: rgba(126, 196, 245, 0.45); }
[data-theme="dark"] .hero-trust-strip { border-top-color: rgba(126, 196, 245, 0.18); }
[data-theme="dark"] .hero-feature i { color: var(--brand-blue-soft); }
[data-theme="dark"] .hero-ledger {
  background: #0f1a2b;
  border-top-color: rgba(126, 196, 245, 0.18);
  border-bottom-color: rgba(126, 196, 245, 0.18);
}
[data-theme="dark"] .hero-ledger-cell + .hero-ledger-cell { border-left-color: rgba(126, 196, 245, 0.18); }
[data-theme="dark"] .hero-ledger-cell:hover { background: rgba(74, 154, 212, 0.10); }
[data-theme="dark"] .hero-ledger-value { color: #f5efe2; }
[data-theme="dark"] .hero-ledger-arrow.up   { color: #f3a4a4; }
[data-theme="dark"] .hero-ledger-arrow.down { color: #7bd4a0; }

/* ---- Wizard Container ---- */
.wizard-container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 32px 80px;
  min-height: calc(100vh - 140px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* When hero is visible (step 1), don't vertically center — pull content up */
.funnel-hero:not(.hidden) ~ .wizard-container,
.funnel-hero:not(.hidden) + .progress-container + .wizard-container {
  justify-content: flex-start;
  min-height: auto;
  padding-top: 28px;
}

/* ---- Step ---- */
.wizard-step {
  animation: fadeSlideIn 0.4s ease;
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.step-header {
  text-align: left;
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}

.step-header::before {
  content: 'Step ' attr(data-step) ' / ' attr(data-total);
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-blue);
  font-weight: 700;
  margin-bottom: 10px;
}
.step-header:not([data-step])::before { display: none; }

.step-header h2 {
  font-family: var(--font-serif);
  font-variation-settings: "opsz" 144;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

.step-header p {
  font-size: 17px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--ink-soft);
  margin: 0;
  max-width: 580px;
}

/* ---- Options Groups ---- */
.options-group {
  margin-bottom: 12px;
}

.options-group-heading {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-orange);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 18px;
  padding-left: 0;
}

.options-group-secondary {
  margin-top: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}

.options-group-secondary .options-group-heading {
  font-size: 11.5px;
  color: var(--brand-blue);
}

[data-theme="dark"] .step-header { border-bottom-color: rgba(126, 196, 245, 0.18); }
[data-theme="dark"] .step-header::before { color: var(--brand-blue-soft); }
[data-theme="dark"] .step-header h2 { color: #f5efe2; }
[data-theme="dark"] .step-header p { color: #cdd4e0; }
[data-theme="dark"] .options-group-heading { color: var(--brand-orange-soft); }
[data-theme="dark"] .options-group-secondary { border-top-color: rgba(126, 196, 245, 0.18); }
[data-theme="dark"] .options-group-secondary .options-group-heading { color: var(--brand-blue-soft); }

/* ---- Option Cards ---- */
.options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 36px;
}

/* Primary cards: 2 columns so 4 cards = balanced 2×2 */
.options-group-primary .options-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Compact grid for secondary / tool cards: 5 across, larger gap so
   the beefier cards don't crowd each other on wide viewports. */
.options-grid-compact {
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.option-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 44px 28px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.25s ease;
  text-align: center;
  color: var(--ink);
  min-height: 220px;
}

.option-card:hover {
  border-color: var(--brand-blue-soft);
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -16px rgba(11, 27, 43, 0.25);
}

.option-card.selected {
  border-color: var(--brand-blue);
  background: #ffffff;
  box-shadow: 0 0 0 1px var(--brand-blue), 0 14px 32px -18px rgba(26, 109, 181, 0.45);
}
.option-card.selected::before {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-orange);
  box-shadow: 0 0 0 3px rgba(239, 123, 29, 0.18);
}

.option-card .option-icon {
  font-size: 38px;
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(26, 109, 181, 0.10);
  color: var(--brand-blue);
  transition: var(--transition);
  overflow: hidden;
}
.option-card .option-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.option-card .option-icon:has(svg) {
  background: none;
}

.option-card.selected .option-icon {
  background: rgba(239, 123, 29, 0.12);
  color: var(--brand-orange);
  transform: scale(1.06);
}

.option-card .option-label {
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.option-card .option-desc {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.5;
  font-weight: 500;
  max-width: 32ch;
}

[data-theme="dark"] .option-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(126, 196, 245, 0.18);
  color: #f5efe2;
}
[data-theme="dark"] .option-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--brand-blue-soft);
  box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] .option-card.selected {
  background: rgba(74, 154, 212, 0.10);
  border-color: var(--brand-blue-soft);
  box-shadow: 0 0 0 1px var(--brand-blue-soft), 0 14px 32px -18px rgba(74, 154, 212, 0.55);
}
[data-theme="dark"] .option-card .option-icon { background: rgba(74, 154, 212, 0.14); color: var(--brand-blue-soft); }
[data-theme="dark"] .option-card.selected .option-icon { background: rgba(245, 160, 74, 0.16); color: var(--brand-orange-soft); }
[data-theme="dark"] .option-card .option-label { color: #f5efe2; }
[data-theme="dark"] .option-card .option-desc { color: #cdd4e0; }

/* Small card variant for secondary / tool cards */
.option-card.option-card-sm {
  padding: 24px 14px;
  gap: 12px;
  min-height: 140px;
}

.option-card.option-card-sm .option-icon {
  width: 60px;
  height: 60px;
  font-size: 26px;
}

.option-card.option-card-sm .option-label {
  font-size: 14.5px;
  letter-spacing: -0.005em;
}

/* ---- Card Color Themes ----
   The funnel.js renderer assigns a `card-<color>` class per option to give
   each card a distinct visual identity. Under the editorial palette we
   keep each card's icon hue but unify the surface (cream-2 / hairline /
   subtle selected glow) so the wizard reads as part of the same page. */
.option-card[class*="card-"] .option-icon { background: none; }
.option-card.card-blue   .option-icon { color: #1a6db5; background: rgba(26, 109, 181, 0.10); }
.option-card.card-green  .option-icon { color: #15803d; background: rgba(34, 134, 58, 0.10); }
.option-card.card-purple .option-icon { color: #1a6db5; background: rgba(26, 109, 181, 0.10); }
.option-card.card-amber  .option-icon { color: #b45309; background: rgba(180, 83, 9, 0.10); }
.option-card.card-teal   .option-icon { color: #0d6e6a; background: rgba(13, 110, 106, 0.10); }
.option-card.card-slate  .option-icon { color: #475569; background: rgba(71, 85, 105, 0.10); }
.option-card.card-orange .option-icon { color: var(--brand-orange-deep); background: rgba(239, 123, 29, 0.12); }

/* Hover & selected states reuse the editorial accent (blue rule + orange
   dot) regardless of the card's color tag — keeps the UI unified. */
.option-card[class*="card-"]:hover {
  border-color: var(--brand-blue-soft);
  box-shadow: 0 10px 24px -16px rgba(11, 27, 43, 0.25);
}
.option-card[class*="card-"].selected {
  border-color: var(--brand-blue);
  background: #ffffff;
  box-shadow: 0 0 0 1px var(--brand-blue), 0 14px 32px -18px rgba(26, 109, 181, 0.45);
}
.option-card[class*="card-"].selected .option-icon {
  background: rgba(239, 123, 29, 0.12);
  color: var(--brand-orange);
  transform: scale(1.06);
}

[data-theme="dark"] .option-card.card-blue   .option-icon,
[data-theme="dark"] .option-card.card-purple .option-icon { color: var(--brand-blue-soft); background: rgba(74, 154, 212, 0.14); }
[data-theme="dark"] .option-card.card-green  .option-icon { color: #6ad58c; background: rgba(106, 213, 140, 0.14); }
[data-theme="dark"] .option-card.card-amber  .option-icon { color: var(--brand-orange-soft); background: rgba(245, 160, 74, 0.14); }
[data-theme="dark"] .option-card.card-teal   .option-icon { color: #5fc7c1; background: rgba(95, 199, 193, 0.14); }
[data-theme="dark"] .option-card.card-slate  .option-icon { color: #b5c3d8; background: rgba(181, 195, 216, 0.10); }
[data-theme="dark"] .option-card.card-orange .option-icon { color: var(--brand-orange-soft); background: rgba(245, 160, 74, 0.16); }
[data-theme="dark"] .option-card[class*="card-"].selected .option-icon { color: var(--brand-orange-soft); background: rgba(245, 160, 74, 0.18); }

/* ---- Input Fields ---- */
.input-group {
  margin-bottom: 24px;
}

.input-group label {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--ink);
  letter-spacing: -0.005em;
}

[data-theme="dark"] .input-group label {
  color: #f5efe2;
}

.input-group input,
.input-group select {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-size: 17px;
  font-family: inherit;
  font-weight: 500;
  background: #ffffff;
  color: var(--ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  min-height: 52px;
}

.input-group input::placeholder,
.input-group select::placeholder { color: #94a3b8; }

.input-group input:focus,
.input-group select:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(26, 109, 181, 0.15);
}

.input-group .input-hint {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 8px;
  font-weight: 500;
}

[data-theme="dark"] .input-group input,
[data-theme="dark"] .input-group select {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(126, 196, 245, 0.20);
  color: #f5efe2;
}
[data-theme="dark"] .input-group input:focus,
[data-theme="dark"] .input-group select:focus {
  border-color: var(--brand-blue-soft);
  box-shadow: 0 0 0 3px rgba(74, 154, 212, 0.25);
}
[data-theme="dark"] .input-group .input-hint { color: #b8c4d6; }

.input-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 620px;
}

/* Solo inputs (.input-group not inside .input-row) stay at a
   readable width on the now-wider wizard container. The grid items
   inside .input-row already inherit a width from the grid. */
.wizard-step > .input-group { max-width: 620px; }

/* Currency input wrapper */
.currency-input {
  position: relative;
}

.currency-input::before {
  content: '$';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 16px;
  pointer-events: none;
}

.currency-input input {
  padding-left: 32px;
}

/* Select arrow */
.select-wrap {
  position: relative;
}

.select-wrap::after {
  content: '\f107';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

/* ---- Buttons ---- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  background: var(--brand-orange);
  /* Explicit #ffffff — don't use var(--white) here because in dark mode
     var(--white) is re-aliased to a dark navy for card backgrounds, which
     would make button text invisible on the colored button. */
  color: #ffffff;
  border: 1px solid var(--brand-orange);
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.25s ease;
  text-decoration: none;
  position: relative;
  box-shadow: 0 8px 24px -8px rgba(239, 123, 29, 0.55);
  min-height: 56px;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

a.btn-primary,
.btn-primary:link,
.btn-primary:visited,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
  color: #ffffff;
}

.btn-primary:hover {
  background: var(--brand-orange-deep);
  border-color: var(--brand-orange-deep);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(201, 95, 10, 0.55);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-lg {
  padding: 18px 40px;
  font-size: 17px;
  width: 100%;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  background: transparent;
  color: var(--brand-blue);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
  min-height: 48px;
}

.btn-secondary:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue-deep);
  background: rgba(26, 109, 181, 0.05);
}

[data-theme="dark"] .btn-secondary {
  color: var(--brand-blue-soft);
  border-color: rgba(126, 196, 245, 0.30);
}
[data-theme="dark"] .btn-secondary:hover {
  color: #aedaff;
  border-color: var(--brand-blue-soft);
  background: rgba(74, 154, 212, 0.12);
}

.btn-text {
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 12px;
  font-family: inherit;
  transition: color 0.2s ease;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.btn-text:hover {
  color: var(--brand-blue);
  text-decoration-color: var(--brand-orange);
}

[data-theme="dark"] .btn-text { color: #cdd4e0; }
[data-theme="dark"] .btn-text:hover { color: var(--brand-blue-soft); }

.step-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 36px;
}

.step-nav .spacer {
  flex: 1;
}

/* On form steps the inputs are capped at 620px in a wider 1100px
   wizard container — without this rule the Continue button drifts
   to the far right, well past where the inputs end. Match the nav
   width to the input column. Card / option steps keep the full
   width nav because their cards span the whole container. */
.wizard-step:has(.input-group) .step-nav {
  max-width: 620px;
}

/* ============================================================
   Trust Bar — Prospectus footer strip
   Full-width cream-2 band, four equal cells with vertical
   hairline rules. Mono caps labels above sans values.
   ============================================================ */
.funnel-trust-bar {
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: none;
}
.funnel-trust-bar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  align-items: stretch;
}
.trust-badges {
  display: contents;
  margin: 0;
}
.trust-badge {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 22px;
  text-align: left;
  border-left: 1px solid var(--rule);
}
.trust-badge:first-child { border-left: none; }
.trust-badge .label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-blue);
  font-weight: 700;
}
.trust-badge .value {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
/* Back-compat: old Font Awesome <i> nodes were the markup before.
   Hide them if any leftover renders them; the new value spans
   carry the meaning. */
.trust-badge > i { display: none; }
.trust-social-proof {
  padding: 18px 22px;
  border-left: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: right;
}
.trust-proof-text {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.trust-proof-text strong {
  color: var(--ink);
  font-weight: 700;
}
.trust-stars { display: none; }

.funnel-trust-bar.hidden { display: none; }

[data-theme="dark"] .funnel-trust-bar {
  background: #0f1a2b;
  border-top-color: rgba(216, 207, 192, 0.15);
  border-bottom-color: rgba(216, 207, 192, 0.15);
}
[data-theme="dark"] .trust-badge { border-left-color: rgba(216, 207, 192, 0.15); }
[data-theme="dark"] .trust-badge .label,
[data-theme="dark"] .trust-social-proof,
[data-theme="dark"] .trust-proof-text { color: #b8aa90; }
[data-theme="dark"] .trust-badge .value { color: #f5efe2; }
[data-theme="dark"] .trust-proof-text strong { color: #f5efe2; }
[data-theme="dark"] .trust-social-proof { border-left-color: rgba(216, 207, 192, 0.15); }

@media (max-width: 1024px) {
  .funnel-trust-bar-inner { padding: 0 32px; }
}

@media (max-width: 767px) {
  .funnel-trust-bar-inner {
    padding: 0;
    grid-template-columns: repeat(2, 1fr);
  }
  .trust-badge {
    padding: 16px 18px;
    border-left: 1px solid var(--rule);
    border-top: 1px solid var(--rule);
  }
  .trust-badge:first-child,
  .trust-badge:nth-child(3) { border-left: none; }
  .trust-badge:first-child,
  .trust-badge:nth-child(2) { border-top: none; }
  .trust-badge .label { font-size: 11px; }
  .trust-badge .value { font-size: 14.5px; }
  .trust-social-proof {
    grid-column: 1 / -1;
    border-left: none;
    border-top: 1px solid var(--rule);
    justify-content: center;
    text-align: center;
    padding: 14px 18px;
    font-size: 11px;
  }
  .trust-proof-text { font-size: 11px; }
  [data-theme="dark"] .trust-badge {
    border-left-color: rgba(216, 207, 192, 0.15);
    border-top-color: rgba(216, 207, 192, 0.15);
  }
  [data-theme="dark"] .trust-social-proof { border-top-color: rgba(216, 207, 192, 0.15); }
}

/* ---- Inline Options (credit cards within form) ---- */
.inline-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}

.inline-option-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
}

.inline-option-card:hover {
  border-color: var(--primary-light);
  background: var(--primary-bg);
}

.inline-option-card.selected {
  border-color: var(--primary);
  background: var(--primary-bg);
  box-shadow: 0 0 0 3px rgba(26, 109, 181, 0.12);
}

.inline-option-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.inline-option-icon svg {
  width: 36px;
  height: 36px;
}

.inline-option-icon i {
  font-size: 20px;
  color: var(--primary);
}

.inline-option-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

@media (max-width: 480px) {
  .inline-options-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .inline-option-card {
    padding: 10px 10px;
    gap: 8px;
  }

  .inline-option-icon {
    width: 28px;
    height: 28px;
  }

  .inline-option-icon svg {
    width: 28px;
    height: 28px;
  }

  .inline-option-label {
    font-size: 12px;
  }

  .options-group-primary .options-grid {
    grid-template-columns: 1fr;
  }

  .options-grid-compact {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Score screen layout fixes ---- */
body.score-visible .funnel-header {
  position: relative;
}

body.score-visible .funnel-trust-bar {
  display: none;
}

/* ---- Score Screen ---- */
.score-screen {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 24px 160px;
}

.score-reveal {
  text-align: center;
  margin-bottom: 28px;
}

.score-reveal h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 32px;
}

.score-gauge-wrap {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 24px;
}

.score-gauge {
  transform: rotate(-90deg);
}

.gauge-bg {
  fill: none;
  stroke: var(--border);
  stroke-width: 10;
}

.gauge-fill {
  fill: none;
  stroke: var(--primary);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 534;
  stroke-dashoffset: 534;
  transition: stroke-dashoffset 1.5s ease, stroke 0.5s ease;
}

.score-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  font-size: 48px;
  font-weight: 800;
  color: var(--text);
}

.score-rating {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 40%);
  font-size: 16px;
  font-weight: 600;
  color: var(--primary);
}

.score-message {
  font-size: 16px;
  color: var(--text-light);
  max-width: 480px;
  margin: 0 auto;
}

/* Score breakdown */
.score-breakdown {
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
}

.breakdown-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.breakdown-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.breakdown-info {
  flex: 1;
}

.breakdown-info .breakdown-label {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.breakdown-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.breakdown-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 1s ease;
}

.breakdown-score {
  font-size: 14px;
  font-weight: 700;
  min-width: 50px;
  text-align: right;
}

/* Recommendations */
.score-recommendations {
  margin-bottom: 28px;
}

.score-recommendations h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
}

.recommendation-card {
  padding: 16px;
  background: var(--white);
  border-radius: var(--radius);
  border-left: 4px solid var(--primary);
  margin-bottom: 12px;
  box-shadow: var(--shadow);
  font-size: 14px;
  line-height: 1.6;
}

/* Personalized Nudge Banner */
.nudge-banner {
  padding: 16px 20px;
  border-radius: var(--radius);
  margin-bottom: 24px;
  text-align: center;
}
.nudge-banner h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}
.nudge-banner p {
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
}
.nudge-high {
  background: var(--success-bg);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #065f46;
}
.nudge-high h3 { color: #065f46; }
.nudge-mid {
  background: #eef2ff;
  border: 1px solid rgba(79, 70, 229, 0.25);
  color: #3730a3;
}
.nudge-mid h3 { color: #3730a3; }
.nudge-low {
  background: var(--warning-bg);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #92400e;
}
.nudge-low h3 { color: #92400e; }

/* Email My Report Section */
.email-report-section {
  text-align: center;
  margin-bottom: 32px;
}
.btn-email-report {
  background: var(--white);
  border: 2px solid var(--primary);
  color: var(--primary);
  padding: 12px 28px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}
.btn-email-report:hover {
  background: var(--primary);
  color: var(--white);
}
.btn-email-report i { margin-right: 6px; }
.email-report-form {
  max-width: 420px;
  margin: 0 auto;
}
.email-report-input-row {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.email-report-input-row input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: var(--transition);
}
.email-report-input-row input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26, 109, 181, 0.12);
}
.btn-send-report {
  padding: 10px 20px;
  font-size: 14px;
  white-space: nowrap;
  border-radius: var(--radius);
}
.email-report-feedback {
  font-size: 13px;
  margin-top: 8px;
  min-height: 18px;
}
.feedback-success { color: var(--success); }
.feedback-error { color: var(--danger); }

/* Connect with a Lender Section */
.lender-connect-section {
  text-align: center;
  padding: 40px 36px;
  background: linear-gradient(135deg, #ffffff 0%, #edf4fa 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid rgba(26, 109, 181, 0.12);
  position: relative;
  overflow: hidden;
}

.lender-connect-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--success));
}

.lender-connect-header {
  margin-bottom: 28px;
}

.lender-connect-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--primary-bg);
  color: var(--primary);
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.lender-connect-header h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
}

.lender-connect-header p {
  color: var(--text-light);
  font-size: 15px;
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.6;
}

.lender-connect-form {
  max-width: 560px;
  margin: 0 auto;
}

.lender-connect-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.lender-connect-form .form-group {
  text-align: left;
  margin-bottom: 0;
}

.lender-connect-form .form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.label-optional {
  font-weight: 400;
  color: var(--text-muted);
}

.btn-lender {
  margin-top: 8px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  font-size: 17px;
  letter-spacing: 0.2px;
}

.btn-lender:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(26, 109, 181, 0.35);
}

.lender-form-disclaimer {
  font-size: 13px;
  color: #64748b;
  margin-top: 16px;
  margin-bottom: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.lender-form-disclaimer i {
  color: #10b981;
  font-size: 14px;
}

/* Legacy lead-form fallback */
.lead-form {
  max-width: 400px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 12px;
}

.form-group input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 16px;
  font-family: inherit;
  transition: var(--transition);
}

.form-group input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26, 109, 181, 0.1);
}

/* Confirmation */
.lead-confirmed {
  text-align: center;
  padding: 40px;
}

.confirm-icon {
  font-size: 56px;
  color: var(--success);
  margin-bottom: 16px;
}

.lead-confirmed h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}

.lead-confirmed p {
  color: var(--text-light);
  margin-bottom: 24px;
}

.lead-confirmed .btn-primary {
  display: inline-flex;
  width: auto;
}

/* ---- Responsive ----
   Breakpoint widened to 900px so iPadOS 26 "Designed for iPhone" apps
   — which can render at variable widths in the resizable iPhone-compat
   window — always show the mobile nav with a tappable hamburger. */
@media (max-width: 900px) {
  .funnel-header {
    /* Tight top padding on mobile; env(safe-area-inset-top) handles the
       notch/Dynamic Island in the native Capacitor shell, 12px is a
       safe minimum for Safari where browser chrome covers the status bar. */
    padding-top: max(12px, env(safe-area-inset-top));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: 8px;
    padding-left: max(16px, env(safe-area-inset-left));
    border-bottom: none;
    box-shadow: none;
  }

  .funnel-logo img {
    height: 40px;
  }

  /* Hide desktop nav, show mobile controls */
  .header-desktop {
    display: none !important;
  }

  .mobile-header-controls {
    display: flex;
  }

  .hamburger-btn {
    display: block;
  }

  .mobile-menu {
    display: flex;
  }

  .progress-container {
    position: relative;
    top: auto;
    margin-top: 0;
    border-top: none;
  }

  .progress-steps {
    gap: 12px;
    font-size: 11px;
  }

  .wizard-container {
    padding: 24px 16px 60px;
  }

  .step-header h2 {
    font-size: 22px;
  }

  .options-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .options-group-primary .options-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Shrink the beefier desktop cards back down on phones */
  .option-card {
    padding: 22px 14px;
    gap: 10px;
    min-height: 0;
  }
  .option-card .option-icon { width: 56px; height: 56px; font-size: 24px; }
  .option-card .option-label { font-size: 14.5px; }
  .option-card .option-desc { font-size: 13px; }

  .options-grid-compact {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .option-card.option-card-sm {
    padding: 16px 10px;
    gap: 8px;
    min-height: 0;
  }
  .option-card.option-card-sm .option-icon { width: 44px; height: 44px; font-size: 20px; }
  .option-card.option-card-sm .option-label { font-size: 12.5px; }

  .input-row {
    grid-template-columns: 1fr;
  }

  .score-reveal h2 {
    font-size: 20px;
  }

  .lender-connect-section {
    padding: 28px 16px;
  }

  .lender-connect-form .form-row {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 12px;
  }

  .lender-connect-header h3 {
    font-size: 20px;
  }
}

/* ============================================================
   Score Preview — "Sample Report" tearout
   A printed-report look bridging hero -> wizard. Preserves
   .score-preview-fill, .score-preview-number, .score-preview-rating
   IDs/classes for back-compat with any future JS animation.
   ============================================================ */
.score-preview {
  background: var(--paper);
  padding: 72px 24px 96px;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.score-preview::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--rule);
}

.score-preview-eyebrow-row {
  max-width: 1100px;
  margin: 0 auto 28px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.score-preview-eyebrow-row .sample-num { color: var(--brand-orange); font-weight: 700; }

.score-preview-card {
  max-width: 1100px;
  margin: 0 auto;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  position: relative;
  box-shadow: 0 30px 60px -40px rgba(11, 27, 43, 0.25);
}

.score-preview-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 28px;
  background: var(--brand-blue-deep);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.score-preview-card-header .stamp {
  border: 1px solid var(--brand-orange-soft);
  color: var(--brand-orange-soft);
  padding: 3px 10px;
  letter-spacing: 0.18em;
  font-weight: 700;
  border-radius: 2px;
}

.score-preview-inner {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 56px;
  align-items: center;
  padding: 48px 48px 52px;
}

.score-preview-gauge {
  position: relative;
  width: 240px;
  height: 240px;
  justify-self: center;
}

.score-preview-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.score-preview-svg .gauge-bg {
  fill: none;
  stroke: var(--rule);
  stroke-width: 8;
}

.score-preview-fill {
  fill: none;
  stroke: var(--brand-blue);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 534;
  stroke-dashoffset: 117;
  transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Number sits slightly above true center; rating uses a fixed pixel
   offset below center so the two never collide regardless of font
   scaling. Previously both used percent translates relative to their
   own heights, which broke when the serif number was scaled up. */
.score-preview-number {
  position: absolute;
  top: calc(50% - 16px);
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-serif);
  font-size: 72px;
  font-weight: 500;
  font-variation-settings: "opsz" 144;
  color: var(--ink);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.score-preview-rating {
  position: absolute;
  top: calc(50% + 36px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand-orange);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.score-preview-copy { min-width: 0; }

.score-preview-eyebrow {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-orange);
}

.score-preview-title {
  margin: 0 0 20px;
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 1.15;
  font-weight: 500;
  font-variation-settings: "opsz" 144;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.score-preview-title span {
  font-style: italic;
  font-weight: 400;
  color: var(--brand-orange);
}

.score-preview-desc {
  margin: 0 0 28px;
  font-size: 17px;
  line-height: 1.65;
  font-weight: 500;
  color: var(--ink-soft);
  max-width: 580px;
}

.score-preview-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.score-preview-bullets li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 16px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.45;
  align-items: baseline;
}
.score-preview-bullets li > i {
  display: none; /* old fa-check icon — replaced with numbered prefix */
}
.score-preview-bullets li::before {
  content: counter(item, decimal-leading-zero);
  counter-increment: item;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-orange);
  letter-spacing: 0.06em;
}
.score-preview-bullets { counter-reset: item; }

.score-preview-card-footer {
  padding: 14px 28px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

[data-theme="dark"] .score-preview {
  background: #0b1220;
  border-bottom-color: rgba(216, 207, 192, 0.15);
}
[data-theme="dark"] .score-preview::before { background: rgba(216, 207, 192, 0.15); }
[data-theme="dark"] .score-preview-eyebrow-row,
[data-theme="dark"] .score-preview-card-footer { color: #b8aa90; }
[data-theme="dark"] .score-preview-eyebrow-row .sample-num,
[data-theme="dark"] .score-preview-eyebrow,
[data-theme="dark"] .score-preview-rating,
[data-theme="dark"] .score-preview-title span { color: var(--brand-orange-soft); }
[data-theme="dark"] .score-preview-fill { stroke: var(--brand-blue-soft); }
[data-theme="dark"] .score-preview-bullets li::before { color: var(--brand-orange-soft); }
[data-theme="dark"] .score-preview-card-header { background: #060d1a; }
[data-theme="dark"] .score-preview-card-header .stamp { border-color: var(--brand-orange-soft); color: var(--brand-orange-soft); }
[data-theme="dark"] .score-preview-card {
  background: #0f1a2b;
  border-color: rgba(216, 207, 192, 0.15);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] .score-preview-svg .gauge-bg { stroke: rgba(126, 196, 245, 0.20); }
[data-theme="dark"] .score-preview-number,
[data-theme="dark"] .score-preview-title { color: #f5efe2; }
[data-theme="dark"] .score-preview-desc { color: #cdd4e0; }
[data-theme="dark"] .score-preview-bullets { border-top-color: rgba(126, 196, 245, 0.18); }
[data-theme="dark"] .score-preview-bullets li {
  color: #f5efe2;
  border-bottom-color: rgba(126, 196, 245, 0.18);
}
[data-theme="dark"] .score-preview-card-footer { border-top-color: rgba(126, 196, 245, 0.18); }

@media (max-width: 1024px) {
  .score-preview { padding: 56px 24px 72px; }
  .score-preview-inner { grid-template-columns: 1fr; gap: 32px; padding: 36px 32px 40px; }
  .score-preview-gauge { width: 220px; height: 220px; justify-self: start; }
}

@media (max-width: 767px) {
  .score-preview { padding: 48px 20px 56px; }
  .score-preview-eyebrow-row { font-size: 11px; flex-wrap: wrap; gap: 4px 12px; }
  .score-preview-card-header,
  .score-preview-card-footer { padding: 12px 18px; font-size: 11px; letter-spacing: 0.1em; flex-wrap: wrap; gap: 8px; }
  .score-preview-card-header .stamp { font-size: 10.5px; padding: 2px 8px; }
  .score-preview-inner { padding: 32px 24px 32px; gap: 28px; }
  .score-preview-gauge { width: 200px; height: 200px; justify-self: center; }
  .score-preview-number { font-size: 60px; top: calc(50% - 14px); }
  .score-preview-rating { top: calc(50% + 30px); font-size: 11.5px; }
  .score-preview-title { font-size: 1.75rem; }
  .score-preview-desc { font-size: 17px; }
  .score-preview-bullets li {
    grid-template-columns: 44px 1fr;
    gap: 12px;
    font-size: 16px;
    padding: 14px 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .score-preview-card { animation: scoreCardSettle 600ms ease-out both; }
}
@keyframes scoreCardSettle {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}