/* ============================================================
   Sagewise Adwall Prototype v1 — Shared Stylesheet
   Single source for /heloc, /refi, /purchase, /credit-challenged
   Audit fixes baked in: L-02, L-03, L-16, color discipline
   ============================================================ */

/* Inter — self-hosted (TODO: bundle WOFF2 to /fonts/ before live) */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Inter-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Inter-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Inter-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/Inter-Bold.woff2') format('woff2'); }

:root {
  /* Layer 1 · Brand identity */
  --sg-primary: #2F6B57;
  --sg-primary-dark: #1F4A3C;
  --sg-primary-tint: #E4EDEA;

  /* Layer 2 · Interaction (H1 accent only — exception logged) */
  --primary-green: #22C98A;

  /* Layer 3 · Amber CTA + surface + feedback */
  --cta-orange: #E89A1C;
  --cta-orange-dark: #B97715;
  --feedback-error: #D0513A;
  --feedback-error-soft: #F5CDC1;

  --surface: #FFFFFF;
  --surface-canvas: #FAFAF7;
  --page-bg: #F7F8F7;
  --panel-bg: #FCFBF8;

  /* Text + lines */
  --text: #214E4A;
  --muted: #5E6E6B;
  --tertiary: #8E98A3;
  --ink-deep: #1a1a1a;
  --border: #D9DDDB;
  --border-strong: #BFCBC7;
  --divider: #E7E4DE;

  /* Third-party (kept literal — not "ours") */
  --star-amber: #F59E0B;
  --trustpilot-green: #00B67A;

  /* Score modal — dark spotlight overlay */
  --surface-overlay: #0D1B2A;
  --text-on-overlay: #FFFFFF;
  --text-muted-on-overlay: rgba(255,255,255,.72);
  --divider-on-overlay: rgba(255,255,255,.14);
  --score-bar-track-on-overlay: rgba(255,255,255,.16);
  --score-tier-amber: #F59E0B;
  --score-tier-neutral: rgba(255,255,255,.45);

  /* Modal/sheet scrims (L-15 token discipline fix) */
  --scrim: rgba(8,12,20,.55);
  --scrim-soft: rgba(16,24,40,.45);
  --scrim-card: rgba(16,24,40,.20);

  /* Radii — adwall canonical: 12px CTAs (NOT 999 pill) */
  --radius-card: 12px;
  --radius-sm: 8px;
  --radius-cta: 12px;
  --radius-ribbon-corner: 12px;
  --radius-field: 8px;

  /* Shadows */
  --shadow-card: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow-card-hover: 0 4px 12px rgba(16,24,40,.08), 0 1px 3px rgba(16,24,40,.05);
  --shadow-cta-orange: 0 4px 14px rgba(232,154,28,.28);
  --shadow-cta-orange-hover: 0 6px 18px rgba(232,154,28,.32);
  --shadow-sticky: 0 -8px 24px rgba(16,24,40,.10);
  --shadow-sheet: 0 -16px 32px rgba(16,24,40,.20);
  --shadow-modal: 0 24px 60px rgba(0,0,0,.25), 0 6px 16px rgba(0,0,0,.10);
  --shadow-modal-deep: 0 20px 50px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.18);

  /* Focus rings */
  --focus-ring-orange: 0 0 0 3px rgba(232,154,28,.35);
  --focus-ring-neutral: 0 0 0 3px rgba(94,110,107,.25);
  --focus-ring-on-dark: 0 0 0 3px rgba(255,255,255,.55);
  --focus-ring-sage: 0 0 0 3px rgba(47,107,87,.22);

  /* Motion */
  --ease: cubic-bezier(.2,.6,.2,1);
  --dur-fast: 120ms;
  --dur-base: 160ms;
  --dur-med: 260ms;

  /* Layout */
  --phone-slot-h: 36px;
  --container-max: 1200px;
  --sticky-bar-h: 44px; /* L-02 fix: was 40, now WCAG 2.5.5 compliant */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--surface-canvas);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}
a { color: var(--text); }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

/* ============================================================
   DISCLOSURE BAR · sits ABOVE the green header (BestMoney pattern)
   ============================================================ */
.disclosure-bar { background: var(--surface-canvas); border-bottom: 1px solid var(--divider); width: 100%; }
.disclosure-bar-inner { max-width: var(--container-max); margin: 0 auto; padding: 8px 20px; font-size: 11px; line-height: 1.45; color: var(--muted); text-align: center; }
.disclosure-bar-inner a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; transition: color var(--dur-base) var(--ease); }
.disclosure-bar-inner a:hover { color: var(--sg-primary-dark); }
@media (min-width: 760px) { .disclosure-bar-inner { padding: 10px 24px; font-size: 12px; } }

/* ============================================================
   SITE HEADER · sage band
   ============================================================ */
.site-header { background: var(--sg-primary); padding: 12px 24px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); width: 100%; }
.site-header-inner { max-width: var(--container-max); margin: 0 auto; display: flex; align-items: center; justify-content: flex-start; gap: 16px; }
.brand-mark { display: inline-flex; align-items: center; text-decoration: none; }
.brand-mark .brand-logo { height: 24px; width: auto; display: block; }
@media (min-width: 760px) { .site-header { padding: 16px 24px; padding-top: calc(16px + env(safe-area-inset-top, 0px)); } .brand-mark .brand-logo { height: 35px; } }

/* ============================================================
   SOCIAL PROOF — mobile bar + desktop filter cell
   ============================================================ */
.social-proof-bar { max-width: var(--container-max); margin: 14px auto 0; padding: 0 20px; display: flex; justify-content: center; }
.social-proof-bar-inner { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--sg-primary-tint); color: var(--sg-primary-dark); border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; }
.social-proof-bar-inner .sp-count { font-weight: 700; font-variant-numeric: tabular-nums; }
.sp-pulse { width: 8px; height: 8px; border-radius: 999px; background: var(--sg-primary); display: inline-block; flex: 0 0 auto; box-shadow: 0 0 0 0 rgba(47,107,87,.5); animation: sp-pulse 2s ease-out infinite; }
@keyframes sp-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(47,107,87,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(47,107,87,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,107,87,0); }
}
@media (max-width: 759px) { .social-proof-bar-inner { font-size: 12px; padding: 7px 12px; } }
@media (min-width: 760px) { .social-proof-bar { display: none; } }
@media (prefers-reduced-motion: reduce) { .sp-pulse { animation: none; } }

.filter-social-cell { display: none; }
@media (min-width: 760px) {
  .filter-social-cell {
    display: flex; align-items: center; justify-content: center;
    min-height: 64px; padding: 10px 14px;
    background: var(--sg-primary-tint); color: var(--sg-primary-dark);
    border: 1.5px solid transparent; border-radius: var(--radius-field);
    gap: 10px; text-align: left; line-height: 1.25; letter-spacing: -0.005em;
  }
  .filter-social-cell .sp-text { font-size: 12px; font-weight: 600; color: var(--sg-primary-dark); }
  .filter-social-cell .sp-count { font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--sg-primary-dark); }
}

/* ============================================================
   HERO
   ============================================================ */
.hero { max-width: var(--container-max); margin: 0 auto; padding: 24px 20px 16px; text-align: center; }
.h1 { font-size: 28px; line-height: 34px; letter-spacing: -0.02em; font-weight: 700; color: var(--text); margin: 0 auto 12px; max-width: 100%; }
.h1 .h1-accent { color: var(--primary-green); } /* Founder-logged exception 2026-04-28 */
.subhead { font-size: 16px; line-height: 24px; color: var(--muted); margin: 0 auto; font-weight: 400; max-width: 580px; }
@media (min-width: 760px) { .hero { padding: 40px 24px 20px; } .h1 { font-size: 44px; line-height: 52px; max-width: 970px; white-space: nowrap; } .subhead { font-size: 18px; line-height: 26px; } }
@media (min-width: 760px) and (max-width: 1023px) { .h1 { font-size: 38px; line-height: 46px; white-space: normal; } }

/* ============================================================
   INFO BAR · trust strip
   ============================================================ */
.info-bar { max-width: var(--container-max); margin: 0 auto; padding: 0 20px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--muted); display: flex; align-items: center; justify-content: center; }
.info-bar .info-trust-group { display: inline-flex; align-items: center; gap: 6px 10px; flex-wrap: nowrap; justify-content: center; }
.info-bar .info-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.info-bar .info-item svg { color: var(--text); flex: 0 0 auto; width: 14px; height: 14px; }
.info-bar .info-sep { color: var(--border-strong); user-select: none; font-size: 12px; line-height: 1; }
@media (max-width: 759px) {
  .info-bar { font-size: 12px; padding: 0 16px; }
  .info-bar .info-item:not(.is-ssl), .info-bar .info-sep { display: none; }
  .info-bar .info-item svg { width: 13px; height: 13px; }
}
@media (min-width: 760px) {
  .info-bar { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -0.005em; padding: 0 24px; }
  .info-bar .info-trust-group { gap: 8px 14px; }
  .info-bar .info-item svg { width: 16px; height: 16px; }
}

/* ============================================================
   ADWALL LIST + FILTER CARD
   ============================================================ */
.adwall-list { max-width: var(--container-max); margin: 0 auto; padding: 16px 20px 12px; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 760px) { .adwall-list { padding: 20px 24px 14px; } }

.filter-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-card); padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-card); }
@media (max-width: 759px) { .filter-card { display: none; } }
@media (min-width: 760px) { .filter-card { flex-direction: row; align-items: center; gap: 12px; padding: 10px 14px; } }
.filter-prompt { flex: 0 0 auto; font-size: 14px; line-height: 1.35; font-weight: 600; color: var(--text); letter-spacing: -.005em; margin: 0; }
@media (min-width: 760px) { .filter-prompt { font-size: 15px; max-width: 180px; } }

.filter-fields { display: grid; grid-template-columns: 1fr; gap: 10px; flex: 1 1 auto; margin: 0; }
@media (min-width: 760px) { .filter-fields { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; } }

/* Filter pills — no icons, 64px, label/value stack + caret */
.filter-field {
  position: relative;
  min-height: 64px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-field);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  display: grid;
  grid-template-columns: 1fr 14px;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.filter-field:hover { border-color: var(--border-strong); box-shadow: 0 4px 12px rgba(16,24,40,.08); transform: translateY(-1px); }
.filter-field:focus-visible { outline: none; border-color: var(--sg-primary); box-shadow: var(--focus-ring-sage); transform: none; }
.filter-field.is-open { border-color: var(--sg-primary); box-shadow: var(--focus-ring-sage); transform: none; }
.filter-field-stack { display: flex; flex-direction: column; gap: 3px; min-width: 0; pointer-events: none; }
.filter-field-label { font-size: 12px; font-weight: 600; color: var(--sg-primary); letter-spacing: .02em; line-height: 1; }
.filter-field-value { font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; letter-spacing: -0.005em; }
.filter-field-caret { width: 14px; height: 14px; color: var(--text); pointer-events: none; transition: transform var(--dur-base) var(--ease); display: inline-flex; align-items: center; justify-content: center; }
.filter-field-caret svg { width: 14px; height: 9px; }
.filter-field.is-open .filter-field-caret { transform: rotate(180deg); }
.filter-field-select { display: none; }

/* Listbox panel */
.filter-field-options { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(16,24,40,.12), 0 4px 12px rgba(16,24,40,.06); list-style: none; margin: 0; padding: 6px; z-index: 60; max-height: 240px; overflow-y: auto; }
.filter-field-options[hidden] { display: none; }
.filter-field-options li { font-size: 16px; font-weight: 600; color: var(--text); padding: 12px 14px; border-radius: 8px; cursor: pointer; line-height: 1.3; transition: background-color 120ms; }
.filter-field-options li:hover,
.filter-field-options li.is-active { background: var(--page-bg); }
.filter-field-options li[aria-selected="true"] { background: var(--sg-primary-tint); color: var(--sg-primary-dark); font-weight: 700; }

/* L-16: at 760px breakpoint, prevent Cash-Out Refinance overflow */
@media (min-width: 760px) and (max-width: 1023px) {
  .filter-field-value[data-truncate-760="cash-out-refi"]::after { content: "Cash-Out Refi"; }
  .filter-field-value[data-truncate-760="cash-out-refi"] > .full { display: none; }
}

/* ============================================================
   LENDER CARD
   ============================================================ */
.lender-card { position: relative; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-card); overflow: hidden; transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
@media (min-width: 760px) { .lender-card { border-width: 2px; } }
.lender-card:hover { box-shadow: var(--shadow-card-hover); border-color: var(--border-strong); }
.lender-card:has(.score-tooltip[open]) { overflow: visible; }

/* Ribbon */
.card-ribbon { display: inline-flex; align-items: center; gap: 6px; background: var(--sg-primary); color: var(--surface); font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: .04em; text-transform: uppercase; padding: 5px 10px 5px 12px; border-bottom-right-radius: var(--radius-ribbon-corner); white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
.card-ribbon svg { color: var(--surface); flex: 0 0 auto; }

/* Mobile-only logo + NMLS */
.card-mobile-logo { display: block; padding: 10px 14px 6px; }
.card-mobile-logo .logo-img { max-width: 140px; max-height: 38px; width: auto; height: auto; object-fit: contain; }
/* Per-lender logo size overrides — for brands whose native PNG dimensions render undersized in the standard box */
.lender-card[data-lender="achieve"] .card-mobile-logo .logo-img { max-height: 50px; max-width: 150px; }
/* COMPLIANCE LOCK — NMLS disclosure size = 11px / weight 400 (founder-confirmed 2026-05-05). Standardized 6px gap below logo. Do not reduce below 11px. */
.card-mobile-logo .nmls { display: block; margin-top: 6px; font-size: 11px !important; line-height: 1.3; color: var(--tertiary); font-weight: 400; letter-spacing: .01em; cursor: default; }

.card-main { display: flex; flex-direction: column; gap: 14px; padding: 6px 14px 12px; }
@media (min-width: 760px) { .card-main { flex-direction: row; align-items: stretch; gap: 28px; padding: 14px 18px; } }

.card-desktop-logo { display: none; }
@media (min-width: 760px) {
  .card-desktop-logo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; width: 170px; text-align: center; }
  .card-desktop-logo .logo-img { max-width: 170px; max-height: 58px; width: auto; height: auto; object-fit: contain; }
  /* Per-lender logo size override (Achieve scaled up for visual parity with peers) */
  .lender-card[data-lender="achieve"] .card-desktop-logo .logo-img { max-height: 72px; max-width: 180px; }
  /* COMPLIANCE LOCK — NMLS disclosure size = 11px / weight 400 (founder-confirmed 2026-05-05). Do not reduce below 11px. */
  .card-desktop-logo .nmls { font-size: 11px !important; line-height: 1.3; color: var(--tertiary); font-weight: 400; letter-spacing: .01em; cursor: default; }
  .card-mobile-logo { display: none; }
}

.card-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.card-brand-line { display: flex; flex-direction: column; gap: 0; margin: 0 0 2px; }
.card-brand-name { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -.01em; line-height: 1.1; }
.card-brand-line .reviews-line { font-size: 14px; line-height: 1.05; }
.card-brand-line .reviews-line .trustpilot-logo { height: 20px; }
@media (min-width: 760px) {
  .card-brand-line { gap: 0; margin: 0 0 2px; }
  .card-brand-name { font-size: 18px; }
  .card-brand-line .reviews-line { font-size: 16px; }
  .card-brand-line .reviews-line .trustpilot-logo { height: 26px; }
}
@media (max-width: 759px) {
  .card-brand-line { display: none; }
}

.card-headline { font-size: 15px; line-height: 1.3; font-weight: 600; color: var(--text); margin: 0 0 6px; letter-spacing: -.005em; }
@media (min-width: 760px) { .card-headline { font-size: 16px; } }

.card-bullets { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 20px; color: var(--ink-deep); font-weight: 400; }
.card-bullets li { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0; padding: 0; }
.card-bullets li.lg-only { display: none; }
.card-bullets .bullet-check { flex: 0 0 auto; width: 16px; height: 16px; color: var(--sg-primary); margin-top: 2px; }
@media (min-width: 760px) {
  .card-bullets { font-size: 15px; line-height: 22px; }
  .card-bullets li { margin: 6px 0; gap: 10px; }
  .card-bullets li.lg-only { display: flex; }
  .card-bullets .bullet-check { width: 18px; height: 18px; margin-top: 2px; }
}

.card-right { display: flex; flex-direction: column; align-items: stretch; flex: 0 0 auto; width: 100%; border-top: 1px solid var(--divider); padding-top: 12px; gap: 8px; }
@media (min-width: 760px) { .card-right { width: 220px; align-items: center; text-align: center; border-top: none; padding-top: 0; justify-content: center; } }

/* Score block */
.score-block { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
@media (min-width: 760px) { .score-block { align-items: center; } }
.score-row { display: inline-flex; align-items: flex-end; gap: 4px; }
.score-value { font-size: 32px; line-height: 1; font-weight: 700; letter-spacing: -.02em; color: var(--sg-primary); font-variant-numeric: tabular-nums; }
.score-divisor { font-size: 14px; line-height: 1; font-weight: 600; color: var(--tertiary); margin-bottom: 4px; }
@media (min-width: 760px) { .score-value { font-size: 40px; } .score-divisor { font-size: 15px; margin-bottom: 5px; } }

.score-label-row { display: inline-flex; align-items: center; gap: 5px; line-height: 1; }
.score-label { font-size: 13px; color: var(--text); line-height: 1.2; letter-spacing: -0.005em; }
.score-label-brand { font-weight: 700; }
.score-label-product { font-weight: 400; }
@media (min-width: 760px) { .score-label { font-size: 14px; } }

/* Score tooltip — L-03 fix: 44x44 hit-area on mobile via ::before */
.score-tooltip { position: relative; display: inline-flex; align-items: center; }
.score-tooltip > summary {
  list-style: none; cursor: pointer;
  width: 16px; height: 16px;
  padding: 0; border: none; background: transparent;
  color: var(--tertiary);
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
  transition: color var(--dur-base) var(--ease);
  border-radius: 4px;
  position: relative; /* for ::before */
}
.score-tooltip > summary::-webkit-details-marker { display: none; }
.score-tooltip > summary::marker { content: ''; }
.score-tooltip > summary svg { width: 14px; height: 14px; display: block; transition: transform var(--dur-base) var(--ease); }
.score-tooltip > summary:hover { color: var(--sg-primary); }
.score-tooltip > summary:focus-visible { outline: none; box-shadow: var(--focus-ring-sage); color: var(--sg-primary); }
.score-tooltip[open] > summary { color: var(--sg-primary); }
.score-tooltip[open] > summary svg { transform: rotate(180deg); }

/* L-03: 44x44 hit-area on mobile — symmetric expansion */
@media (max-width: 759px) {
  .score-tooltip > summary { touch-action: manipulation; border-radius: 6px; transition: color var(--dur-base) var(--ease), background var(--dur-fast) var(--ease); }
  .score-tooltip > summary::before {
    content: '';
    position: absolute;
    top: -14px; right: -14px; bottom: -14px; left: -14px;
    /* 16+14+14 = 44 height; 16+14+14 = 44 width — full WCAG 2.5.5 compliance */
  }
  .score-tooltip > summary:active { background: var(--sg-primary-tint); }
}

/* Score popover/modal */
.score-tooltip-content {
  position: fixed;
  top: 50%; left: 50%; right: auto; bottom: auto;
  transform: translate(-50%, -50%);
  width: min(340px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  background: var(--surface-overlay);
  border: 1px solid var(--divider-on-overlay);
  border-radius: 14px;
  padding: 18px 18px 14px;
  box-shadow: var(--shadow-modal-deep);
  z-index: 100;
  text-align: left;
  color: var(--text-on-overlay);
}
@media (min-width: 760px) {
  .score-tooltip-content {
    position: absolute;
    top: 50%; bottom: auto;
    right: calc(100% + 10px); left: auto;
    transform: translateY(-50%);
    width: 320px;
    max-height: none; overflow-y: visible;
    padding: 16px 16px 12px;
    z-index: 30;
  }
}
.score-tooltip-intro { display: none; }
@media (max-width: 759px) {
  .score-tooltip-intro { display: block; font-size: 13px; line-height: 1.5; color: var(--text-muted-on-overlay); margin: 0 0 14px; letter-spacing: -0.005em; }
}
.score-tooltip-title { font-size: 14px; font-weight: 700; color: var(--text-on-overlay); margin: 0 0 12px; letter-spacing: -0.005em; }
@media (min-width: 760px) { .score-tooltip-title { font-size: 13px; margin-bottom: 10px; } }

.score-metric-list { display: flex; flex-direction: column; gap: 12px; margin: 0 0 10px; padding: 0; list-style: none; }
@media (min-width: 760px) { .score-metric-list { gap: 10px; } }
.score-metric { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 5px; align-items: center; }
.score-metric-label { font-size: 13px; font-weight: 700; color: var(--text-on-overlay); line-height: 1.3; letter-spacing: -0.005em; }
@media (min-width: 760px) { .score-metric-label { font-size: 12px; font-weight: 600; } }
.score-metric-value { font-size: 14px; font-weight: 700; color: var(--text-on-overlay); font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -0.005em; }
@media (min-width: 760px) { .score-metric-value { font-size: 13px; } }
.score-metric-bar { grid-column: 1 / -1; height: 6px; background: var(--score-bar-track-on-overlay); border-radius: 999px; overflow: hidden; }
.score-metric-bar-fill { display: block; height: 100%; background: var(--score-tier-neutral); border-radius: 999px; transition: width var(--dur-med) var(--ease); }
.score-metric[data-tier="green"]   .score-metric-bar-fill { background: var(--primary-green); } /* L-14 fix: was --score-tier-green dup */
.score-metric[data-tier="amber"]   .score-metric-bar-fill { background: var(--score-tier-amber); }
.score-metric[data-tier="neutral"] .score-metric-bar-fill { background: var(--score-tier-neutral); }

.score-tooltip-foot { font-size: 11px; line-height: 1.45; color: var(--text-muted-on-overlay); margin: 0; padding-top: 10px; border-top: 1px solid var(--divider-on-overlay); }
.score-tooltip-foot a { color: var(--text-on-overlay); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: opacity var(--dur-base) var(--ease); }
.score-tooltip-foot a:hover { opacity: 0.8; }

.score-tooltip-close { display: none; }
@media (max-width: 759px) {
  .score-tooltip-close {
    display: inline-flex; position: absolute;
    top: 10px; right: 10px;
    width: 32px; height: 32px;
    align-items: center; justify-content: center;
    border: 0; background: rgba(255,255,255,.08);
    color: var(--text-on-overlay);
    border-radius: 999px; cursor: pointer;
    transition: background var(--dur-base) var(--ease);
  }
  .score-tooltip-close:hover { background: rgba(255,255,255,.18); }
  .score-tooltip-close:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.45); }
  .score-tooltip-close svg { width: 16px; height: 16px; display: block; }
}

.score-modal-backdrop { position: fixed; inset: 0; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity var(--dur-med) var(--ease); z-index: 95; }
.score-modal-backdrop.is-open { opacity: 1; pointer-events: auto; }
@media (min-width: 760px) { .score-modal-backdrop { display: none !important; } }

/* ============================================================
   ADVERTISER DISCLOSURE MODAL
   ============================================================ */
.ad-disclosure-backdrop { position: fixed; inset: 0; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity var(--dur-med) var(--ease); z-index: 110; }
.ad-disclosure-backdrop.is-open { opacity: 1; pointer-events: auto; }
.ad-disclosure-modal {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 14px;
  padding: 28px 32px 24px;
  box-shadow: var(--shadow-modal);
  z-index: 120;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
  color: var(--text); text-align: left;
}
.ad-disclosure-modal.is-open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
@media (max-width: 759px) { .ad-disclosure-modal { padding: 22px 20px 18px; } }
.ad-disclosure-modal .ad-disclosure-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; background: transparent; color: var(--muted); border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease); }
.ad-disclosure-modal .ad-disclosure-close:hover { background: var(--page-bg); color: var(--text); }
.ad-disclosure-modal .ad-disclosure-close:focus-visible { outline: none; box-shadow: var(--focus-ring-neutral); }
.ad-disclosure-modal .ad-disclosure-close svg { width: 18px; height: 18px; display: block; }
.ad-disclosure-modal .ad-disclosure-title { font-size: 16px; font-weight: 700; color: var(--ink-deep); margin: 0 0 14px; letter-spacing: -.005em; padding-right: 36px; }
.ad-disclosure-modal p { font-size: 14px; line-height: 1.55; color: var(--text); margin: 0 0 12px; }
.ad-disclosure-modal p:last-child { margin-bottom: 0; }
.ad-disclosure-modal a { color: var(--sg-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ad-disclosure-modal a:hover { color: var(--sg-primary-dark); }

/* ============================================================
   "How We Score" Modal — methodology explanation
   Mirrors ad-disclosure-modal frame; content mirrors score-tooltip-content
   styling (founder-requested). Replaces external Google Doc link.
   ============================================================ */
.how-we-score-backdrop { position: fixed; inset: 0; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity var(--dur-med) var(--ease); z-index: 110; }
.how-we-score-backdrop.is-open { opacity: 1; pointer-events: auto; }
.how-we-score-modal {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: 14px;
  padding: 28px 28px 24px;
  box-shadow: var(--shadow-modal);
  z-index: 120;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
  color: var(--text); text-align: left;
}
.how-we-score-modal.is-open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
@media (max-width: 759px) { .how-we-score-modal { padding: 22px 20px 18px; } }
.how-we-score-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; background: transparent; color: var(--muted); border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease); padding: 0; }
.how-we-score-close:hover { background: var(--page-bg); color: var(--text); }
.how-we-score-close:focus-visible { outline: none; box-shadow: var(--focus-ring-neutral); }
.how-we-score-close svg { width: 18px; height: 18px; display: block; }
.how-we-score-title { font-size: 18px; font-weight: 700; color: var(--ink-deep); margin: 0 0 6px; letter-spacing: -.01em; padding-right: 36px; }
@media (min-width: 760px) { .how-we-score-title { font-size: 20px; } }
.how-we-score-modal p { font-size: 14px; line-height: 1.55; color: var(--text); margin: 0 0 14px; }
.how-we-score-modal p:last-child { margin-bottom: 0; }
.how-we-score-modal h3 { font-size: 13px; font-weight: 700; color: var(--text); margin: 18px 0 10px; letter-spacing: .02em; text-transform: uppercase; }
.how-we-score-metric-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.how-we-score-metric-list li { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: var(--surface-canvas); border-radius: 8px; border: 1px solid var(--divider); }
.how-we-score-metric-name { font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: -.005em; }
.how-we-score-metric-desc { font-size: 13px; line-height: 1.5; color: var(--muted); }
.how-we-score-foot { font-size: 12px; color: var(--tertiary); margin: 16px 0 0 !important; padding-top: 12px; border-top: 1px solid var(--divider); }

/* ============================================================
   STARS + REVIEWS LINE
   ============================================================ */
.stars-row { display: inline-flex; align-items: center; gap: 1px; }
.stars-row svg { width: 16px; height: 16px; color: var(--star-amber); }
.reviews-line { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); font-weight: 500; line-height: 1.2; white-space: nowrap; }
.reviews-line .trustpilot-logo { height: 18px; width: auto; }

/* ============================================================
   CTA PILL + PHONE PILL
   ============================================================ */
.cta-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 44px;
  border-radius: var(--radius-cta);
  background: var(--cta-orange); color: var(--surface);
  text-decoration: none;
  font-size: 16px; line-height: 1; font-weight: 700; letter-spacing: .01em;
  border: none;
  box-shadow: var(--shadow-cta-orange);
  transition: background-color 140ms ease, box-shadow 180ms ease, transform var(--dur-fast) var(--ease);
  margin-top: 4px; padding: 0 22px;
}
.cta-pill:hover { background: var(--cta-orange-dark); box-shadow: var(--shadow-cta-orange-hover); }
.cta-pill:active { transform: translateY(1px); }
.cta-pill:focus-visible { outline: none; box-shadow: var(--focus-ring-orange), var(--shadow-cta-orange); }
.cta-pill .arrow { transition: transform var(--dur-base) var(--ease); }
.cta-pill:hover .arrow { transform: translateX(2px); }

.phone-slot { width: 100%; min-height: var(--phone-slot-h); display: flex; align-items: center; justify-content: center; }
.phone-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: var(--phone-slot-h);
  padding: 0 14px;
  border-radius: var(--radius-cta);
  border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text);
  text-decoration: none;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.phone-pill:hover { border-color: var(--sg-primary); background: var(--sg-primary-tint); color: var(--sg-primary-dark); }
.phone-pill:hover svg { color: var(--sg-primary); animation: phone-wiggle 0.5s ease-in-out; }
.phone-pill:focus-visible { outline: none; box-shadow: var(--focus-ring-neutral); border-color: var(--text); }
.phone-pill svg { color: var(--muted); flex: 0 0 auto; transition: color var(--dur-base) var(--ease); }
@keyframes phone-wiggle {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-12deg); }
  40% { transform: rotate(10deg); }
  60% { transform: rotate(-8deg); }
  80% { transform: rotate(6deg); }
}
/* CARD HEIGHT LOCK — phone-slot reserves vertical space on ALL breakpoints so cards
   without phone numbers match the height of cards that have one (AmeriSave reference).
   Founder-confirmed 2026-05-06. Do not change to display:none. */
.phone-slot.is-empty { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .phone-pill:hover svg { animation: none; } }

/* ============================================================
   STICKY BAR (mobile only) · L-02 height fix · L-08 dynamic
   ============================================================ */
.sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow-sticky);
  padding: 10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: 1fr;
  align-items: center; gap: 10px;
  z-index: 50;
  transition: grid-template-columns 280ms var(--ease);
}
.sticky-bar.has-cta { display: flex; gap: 8px; }
.sticky-bar.has-cta .refine-btn { margin-right: auto; flex: 0 0 auto; }
.sticky-bar.has-cta .sticky-lender-meta { flex: 0 1 auto; max-width: 50%; }
.sticky-bar.has-cta .cta-pill { flex: 0 0 auto; }
.sticky-bar .refine-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; padding: 0 16px;
  border-radius: var(--radius-cta);
  border: 1.5px solid var(--border-strong); background: var(--surface);
  color: var(--text); font-size: 14px; font-weight: 700; letter-spacing: 0;
  cursor: pointer; transition: border-color 160ms, background 160ms;
  white-space: nowrap;
}
.sticky-bar .refine-btn:hover { border-color: var(--text); background: var(--page-bg); }
.sticky-bar .refine-btn:focus-visible { outline: none; box-shadow: var(--focus-ring-neutral); border-color: var(--text); }
.sticky-bar .refine-btn svg { width: 14px; height: 14px; color: var(--text); }
.sticky-bar:not(.has-cta) .refine-btn { width: 100%; max-width: 320px; justify-self: center; }

.sticky-lender-meta { display: none; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
.sticky-bar.has-cta .sticky-lender-meta { display: inline-flex; }
.sticky-mini-score { flex: 0 0 auto; font-size: 22px; line-height: 1; font-weight: 700; color: var(--sg-primary); font-variant-numeric: tabular-nums; letter-spacing: -.02em; display: inline-flex; align-items: baseline; }
.sticky-mini-divisor { font-size: 11px; font-weight: 600; color: var(--tertiary); margin-left: 2px; }
.sticky-mini-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow: hidden; line-height: 1; align-items: center; text-align: center; }
.sticky-mini-name { font-size: 12px; font-weight: 700; color: var(--text); letter-spacing: -.005em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-mini-stars { display: inline-flex; gap: 1px; line-height: 0; }
.sticky-mini-stars svg { width: 10px; height: 10px; color: var(--star-amber); }

/* L-02 fix: sticky CTA height was 40 → 44 for WCAG 2.5.5 */
.sticky-bar .cta-pill {
  display: none;
  width: auto; min-width: 0; flex: 0 0 auto;
  height: var(--sticky-bar-h); padding: 0 16px;
  font-size: 13px; margin-top: 0;
}
.sticky-bar.has-cta .cta-pill { display: inline-flex; }

@media (min-width: 760px) { .sticky-bar { display: none !important; } }

/* ============================================================
   REFINE BOTTOM SHEET
   ============================================================ */
.sheet-backdrop { position: fixed; inset: 0; background: var(--scrim-soft); opacity: 0; pointer-events: none; transition: opacity 220ms var(--ease); z-index: 60; }
.sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }

.refine-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--surface);
  border-top-left-radius: 18px; border-top-right-radius: 18px;
  box-shadow: var(--shadow-sheet);
  transform: translateY(110%);
  transition: transform 320ms var(--ease);
  z-index: 70; max-height: 85vh;
  display: flex; flex-direction: column;
  padding-bottom: calc(0px + env(safe-area-inset-bottom, 0px));
}
.refine-sheet.is-open { transform: translateY(0); }
.refine-sheet .sheet-grabber { width: 36px; height: 4px; border-radius: 999px; background: var(--border-strong); margin: 8px auto 4px; flex: 0 0 auto; }
.refine-sheet .sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 20px 14px; border-bottom: 1px solid var(--divider); flex: 0 0 auto; }
.refine-sheet .sheet-title { font-size: 20px; line-height: 26px; font-weight: 700; color: var(--text); letter-spacing: -.01em; margin: 0; }
.refine-sheet .sheet-close { width: 44px; height: 44px; border-radius: 999px; border: 0; background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 160ms; }
.refine-sheet .sheet-close:hover { background: var(--page-bg); color: var(--text); }
.refine-sheet .sheet-close:focus-visible { outline: none; box-shadow: var(--focus-ring-neutral); }
.refine-sheet .sheet-body { padding: 18px 20px 14px; overflow-y: auto; flex: 1 1 auto; display: flex; flex-direction: column; gap: 16px; }
.refine-sheet .sheet-footer { padding: 14px 20px 18px; border-top: 1px solid var(--divider); flex: 0 0 auto; }
.refine-sheet .sheet-footer .cta-pill { width: 100%; margin-top: 0; }
@media (min-width: 760px) { .refine-sheet, .sheet-backdrop { display: none !important; } }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--surface); border-top: 1px solid var(--divider); padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); margin-top: 0; text-align: center; }
.site-footer-inner { max-width: var(--container-max); margin: 0 auto; }
.footer-brand-desktop { display: none; }
.footer-brand-desktop svg { height: 28px; width: auto; max-width: 100%; }
.footer-line { display: inline-flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 0 8px; font-size: 10px; color: var(--muted); line-height: 1.4; max-width: 100%; }
.footer-line a { color: var(--muted); text-decoration: none; font-size: 10px; white-space: nowrap; transition: color var(--dur-base) var(--ease); }
.footer-line a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.footer-social { display: none; }
.footer-social a { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
.footer-social a svg { width: 16px; height: 16px; display: block; }
.footer-social a:hover { color: var(--sg-primary); border-color: var(--sg-primary); transform: translateY(-1px); }
.footer-social a:focus-visible { outline: none; box-shadow: var(--focus-ring-sage); border-color: var(--sg-primary); color: var(--sg-primary); }
.footer-sep { color: var(--border-strong); user-select: none; font-size: 11px; }
.footer-mark { font-weight: 700; color: var(--text); letter-spacing: .005em; display: inline-flex; align-items: center; }
.footer-mark-text { display: none; }
.footer-leaf { width: 16px; height: 16px; display: inline-block; flex: 0 0 auto; }
@media (min-width: 760px) {
  .site-footer { padding: 22px 20px; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); text-align: left; }
  .site-footer-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; }
  .footer-brand-desktop { display: inline-flex; align-items: center; min-width: 120px; }
  .footer-mark { display: none; }
  .footer-line { flex-wrap: wrap; gap: 6px 12px; font-size: 12px; line-height: 1.5; justify-content: center; }
  .footer-line a { font-size: 12px; }
  .footer-social { display: inline-flex; align-items: center; gap: 10px; justify-self: end; }
  .footer-sep { font-size: 12px; }
  .footer-mark-text { display: inline; }
  .footer-leaf { display: none; }
}

@media (max-width: 759px) {
  body { padding-bottom: 70px; }
  body.sticky-active { padding-bottom: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   SUB-580 / CREDIT-CHALLENGED VARIANT
   APR labels swap to "No Monthly Payments" / "Equity Share"
   Score breakdown labels: Reputation / Customer Reviews / Approval Flexibility / Cash Access
   (No CSS divergence — content-driven via markup)
   ============================================================ */