/* =============================================================================
   Lendspedia — Aave-inspired theme layer
   -----------------------------------------------------------------------------
   ADDITIVE OVERRIDE. Loaded AFTER css/style.css; never edits it.
   To revert the restyle completely, delete the <link> to this file. Nothing else.

   Visual language borrowed from aave.com (measured from the live site):
     - white page, large 32px-radius panels, hairline borders, no drop shadows
     - plum-black #262228 text instead of blue-slate
     - periwinkle accent family #9896ff to #e5e5ff
     - display type at weight 500 with tight negative tracking (not weight 800)
     - fully-rounded pill buttons and chips
     - a three-phone hero cluster, centre phone taller and in front

   Lendspedia keeps its blue as the action colour — periwinkle CTAs on a
   mortgage-comparison site read crypto rather than lender.
   ============================================================================ */

/* === 1. TOKENS ===========================================================
   These names already exist in css/style.css :root. Redefining them here
   re-skins every existing rule at once, which is why this file stays small. */
:root {
  --sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Inter Tight', var(--sans);

  /* Plum-black replaces the blue-slate text ramp */
  --slate:     #262228;
  --slate-900: #1b171d;
  --gray-800:  #2f2b31;
  /* Alphas chosen so every step still clears WCAG AA (4.5:1) on white, the way
     the original slate ramp did. Aave itself drops to .5 for tertiary text —
     that measures 3.14:1 here, so this ramp is deliberately darker than the
     reference. Measured: .78 = 7.6:1, .70 = 5.8:1, .65 = 4.93:1. */
  --gray-700:  rgba(39,34,40,.78);
  --gray-600:  rgba(39,34,40,.70);
  --gray-500:  rgba(39,34,40,.65);
  --gray-400:  rgba(39,34,40,.36);   /* decorative separators only */
  --gray-200:  rgba(38,34,40,.10);   /* hairline borders */
  --gray-100:  #f4f3f6;
  --gray-50:   #fbfbfb;              /* panel fill */

  /* Periwinkle accent family, straight from Aave */
  --peri:   #9896ff;
  --peri-2: #bcbbff;
  --peri-3: #d0ceff;
  --peri-4: #e5e5ff;
  --peri-5: #f3f2ff;

  /* #9896ff is only 2.58:1 on white, so it is a FILL/BORDER colour, never a
     text colour. Two darker steps carry periwinkle text instead:
     --peri-display for headline-scale type (3.5:1, clears the 3:1 large-text
     bar) and --peri-text for anything body-sized (4.53:1, clears AA). */
  --peri-display: #7d78ff;
  --peri-text:    #6a63ee;
  --peri-ink:     #4a3fa8;   /* on lavender tints — 6.6:1 */

  /* Action blue, deepened so it sits against plum rather than slate */
  --blue:      #2148c8;
  --blue-dark: #143fb0;
  --blue-deep: #0f3494;
  --blue-light: var(--peri-3);
  --blue-tint:  var(--peri-5);

  /* #17a673 measures 2.81:1 on the tinted compare cell; the check mark carries
     meaning there, so the ramp is darkened to clear AA. */
  --green:      #0b7a53;
  --green-dark: #077048;

  --radius: 16px;
  --radius-panel: 32px;
  --radius-pill: 999px;

  /* Aave separates surfaces with hairlines and fills, not elevation. */
  --shadow: none;
  --shadow-lg: 0 1px 2px rgba(38,34,40,.05);

  --plum: #262228;
  --plum-2: #1b171d;
}

/* === 2. BASE TYPE ======================================================== */
body {
  font-family: var(--sans);
  color: var(--gray-700);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.005em;
}

h1, h2, h3, h4,
.btn, .btn-quiz-pill,
.research-stat, .stat-item strong,
.hiw-num, .match-step-num, .avatar,
.nav-logo-text {
  font-family: var(--display);
}

/* The single biggest shift: headlines drop from weight 800 to 500 and the
   tracking tightens, which is what makes Aave's type read the way it does. */
h1, h2 { font-weight: 500; letter-spacing: -.04em; color: var(--slate); }
h3     { font-weight: 500; letter-spacing: -.02em; color: var(--slate); }

/* style.css has `section h2 { font-weight: 800 }` at (0,0,2), which out-ranks the
   bare `h1, h2` above. Match its specificity — this file loads later, so it wins
   the tie. Without this, every section heading outside a .head wrapper stays 800
   and the page reads half-restyled. */
section h2, .article-body h2, .head h2 { font-weight: 500; letter-spacing: -.04em; }

/* Same story for h3 — style.css sets 700 on each component's h3 at (0,1,1). */
.card h3, .hiw-step h3, .research-card h3, .match-step h3, .benefit-card h3,
.providers-card h3, .article-body h3, .guide-card h3, .inline-cta h3 {
  font-weight: 500;
  letter-spacing: -.02em;
}

/* The `h3 { color: var(--slate) }` above paints a colour where style.css relied
   on INHERITING white from a dark parent — which turned the providers-card
   heading plum-on-plum. Any heading sitting on a dark panel needs it back. */
.providers-card h3, .providers-card h4,
.mid-cta-inner h3, .inline-cta h3,
#research .research-card h3, #stats h3 {
  color: #fff;
}

/* === 3. NAV ============================================================== */
nav {
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--gray-200);
}
.nav-inner { height: 76px; }
.nav-logo-mark {
  background: var(--plum);
  border-radius: 11px;
  width: 36px; height: 36px;
}
.nav-logo-text { font-weight: 600; letter-spacing: -.025em; font-size: 16px; }
.nav-logo-text span { font-weight: 400; letter-spacing: 0; }
.nav-links a { font-weight: 450; color: var(--gray-700); }
.nav-links a:hover { color: var(--plum); }
.btn-quiz-pill {
  background: var(--plum);
  border-radius: var(--radius-pill);
  padding: 11px 24px;
  font-weight: 500;
  letter-spacing: -.01em;
}
.btn-quiz-pill:hover { background: var(--blue-dark); }
.hamburger span { background: var(--plum); }

/* === 4. BUTTONS & PILLS ================================================== */
.btn {
  border-radius: var(--radius-pill);
  padding: 15px 32px;
  font-weight: 500;
  font-size: 15.5px;
  letter-spacing: -.015em;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.btn-lg { padding: 18px 40px; font-size: 17px; }
.btn-blue { background: var(--blue-dark); }
.btn-blue:hover { background: var(--blue-deep); transform: translateY(-1px); }
.btn-outline-white { border-radius: var(--radius-pill); border-color: rgba(255,255,255,.35); }

/* Eyebrows and section labels — Aave keeps these small, tinted and relaxed. */
.section-label, .hero-eyebrow {
  display: inline-block;
  background: var(--peri-4);
  border: 1px solid var(--peri-2);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  color: #4a3fa8;
}
.hero-eyebrow { margin-bottom: 26px; }

/* Loan-type chips, condition pills, badges */
.hero-quickstart a, .pill {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-pill);
  font-weight: 450;
  color: var(--slate);
  box-shadow: none;
}
.hero-quickstart a:hover, .pill:hover {
  background: var(--peri-4);
  border-color: var(--peri);
  color: var(--plum);
  transform: translateY(-2px);
}
.badge { background: var(--peri-4); border-radius: var(--radius); }
.badge::before { background: var(--peri); }
.urgency-badge { background: var(--peri-4); color: #4a3fa8; border-radius: var(--radius-pill); }

/* === 5. SURFACES ========================================================= */
.card, .research-card, .benefit-card, .testimonial-card,
.guide-card, .faq-item, .answer-box, .providers-card {
  border-radius: var(--radius);
  box-shadow: none;
}
.card { border: 1px solid var(--gray-200); }
.card:hover { transform: translateY(-3px); border-color: var(--peri); box-shadow: none; }

.card-icon, .benefit-icon {
  background: var(--peri-4);
  border: 1px solid var(--peri-2);
  border-radius: 14px;
}
.card-icon svg, .benefit-icon svg { stroke: #5b4fd6; }
.card-rate-link { color: #5b4fd6; font-weight: 500; }

.hiw-num, .match-step-num { background: var(--peri-4); color: #4a3fa8; font-weight: 500; }
.answer-box { background: var(--peri-5); border: 1px solid var(--peri-2); }
.faq-chevron { background: var(--peri-4); color: #4a3fa8; }
.faq-item.open .faq-chevron { background: var(--peri); color: #fff; }
.faq-search { border-radius: var(--radius-pill); }
.stars { color: var(--peri-text); }
.avatar { background: var(--peri-4); color: #4a3fa8; font-weight: 500; }
.check { color: var(--green); }
.compare-table th.highlight { background: var(--peri); color: var(--plum); }
.compare-table th:first-child { background: var(--plum); }
.compare-table td.highlight { color: #4a3fa8; background: var(--peri-5); }

/* Flatten the blue gradient washes into Aave's white / near-white alternation */
#loan-types      { background: #fff; }
#how-it-works    { background: var(--gray-50); }
#compare         { background: #fff; }
#loan-types-list { background: var(--gray-50); }
#expert          { background: #fff; }
#faq             { background: var(--gray-50); }
#providers       { background: #fff; }
#credentials     { background: #fff; }
.science-visual  { background: linear-gradient(135deg, var(--peri-4), var(--peri-5)); }

/* === 6. ROUNDED PANELS ===================================================
   Aave's signature move: a big 32px-radius block floating on the white page.
   Applied to the three sections that were solid blue gradients, so the rhythm
   is white -> panel -> white rather than a wall of rounded boxes. */
#stats, #research, #testimonials {
  background: none;
  padding: 24px 0;
}
#stats > .container,
#research > .container,
#testimonials > .container {
  border-radius: var(--radius-panel);
  padding-top: clamp(56px, 7vw, 96px);
  padding-bottom: clamp(56px, 7vw, 96px);
  padding-left: clamp(24px, 5vw, 64px);
  padding-right: clamp(24px, 5vw, 64px);
}
#stats > .container,
#research > .container { background: var(--plum); }
#testimonials > .container { background: var(--peri-4); }

/* Dark panels: plum ground, periwinkle accents */
#stats .stat-item strong { color: #fff; font-weight: 500; letter-spacing: -.025em; }
#stats .stat-item span   { color: rgba(255,255,255,.62); }
#research h2 { color: #fff; }
#research .subtitle { color: rgba(255,255,255,.62); }
#research .section-label { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.20); color: var(--peri-2); }
#research .research-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
#research .research-card h3 { color: #fff; }
#research .research-card p  { color: rgba(255,255,255,.70); }
#research .research-stat  { color: var(--peri); font-weight: 500; letter-spacing: -.04em; }
#research .research-label { color: rgba(255,255,255,.62); }
#research .research-source { color: rgba(255,255,255,.52); }  /* 5.2:1 on plum */

/* Lavender panel */
#testimonials h2 { color: var(--plum); }
#testimonials .subtitle { color: var(--gray-600); }
#testimonials .section-label { background: #fff; border-color: var(--peri-2); color: var(--peri-ink); }
#testimonials .testimonial-card { background: #fff; border: 1px solid var(--peri-2); }

/* Inline CTA blocks */
.mid-cta-inner {
  background: var(--plum);
  border-radius: var(--radius-panel);
  padding: clamp(36px, 5vw, 56px);
}
.mid-cta-inner .btn { background: #fff; color: var(--plum); }
.mid-cta-inner .btn:hover { background: var(--peri-3); }
.final-cta-inner {
  background: var(--peri-5);
  border: 1px solid var(--peri-2);
  border-radius: var(--radius-panel);
}
.providers-card { background: var(--plum); border-radius: var(--radius-panel); }
.providers-card .btn { background: #fff; color: var(--plum); }
.providers-list li { color: var(--peri-2); }

/* Photo overlays: the stock images are gradient-masked in navy. Re-tint to plum
   so they sit in the same family as the panels. */
.hiw-image, .expert-visual {
  border-radius: var(--radius);
  background-image:
    linear-gradient(to top, rgba(27,23,29,.86) 0%, rgba(27,23,29,.18) 45%, rgba(27,23,29,.05) 100%),
    var(--photo);
}
.hiw-image { --photo: url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?auto=format&fit=crop&w=1000&q=80'); }
.expert-visual { --photo: url('https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&w=1000&q=80'); }
.hiw-image span, .expert-visual .badge-big { font-family: var(--display); font-weight: 500; letter-spacing: -.02em; }

/* style.css sets `#testimonials { color: #fff }` for the old blue gradient.
   The panel is lavender now, so reset the inherited colour — every child
   currently declares its own, but this stops the next one from vanishing. */
#testimonials { color: var(--gray-700); }

/* === 7. SUBPAGES =========================================================
   Components that only appear on the inner pages: loan pages, the guides hub,
   the nine article pages, and the legal pages. */

/* Inner-page hero — same flattening as #hero */
.page-header {
  background: #fff;
  border-bottom: 1px solid var(--gray-200);
  padding: 88px 0 72px;
}
.page-header h1 { font-weight: 500; letter-spacing: -.04em; }
.page-header .section-label { color: #4a3fa8; }   /* beats style.css's blue-dark */

/* Answer box (GEO block) — the accent rail was blue */
.answer-box { border-left: 4px solid var(--peri); }
.answer-box .answer-label { font-weight: 500; letter-spacing: .08em; color: #4a3fa8; }
.answer-box strong { color: var(--plum); }

/* Article body */
.article-body h3 { font-weight: 500; letter-spacing: -.02em; }
.article-body a { color: #3a31a8; font-weight: 500; }
.breadcrumbs a { color: #3a31a8; }
.callout { border-radius: var(--radius); }
.inline-cta { background: var(--plum); border-radius: var(--radius-panel); }
.inline-cta .btn { background: #fff; color: var(--plum); }
.inline-cta .btn:hover { background: var(--peri-3); }

/* Guides hub + related-guides module */
.guide-card { box-shadow: none; }
.guide-card:hover { border-color: var(--peri); box-shadow: none; }
.guide-card .guide-tag { font-weight: 500; letter-spacing: .08em; color: #4a3fa8; }
.guide-card h3 { font-weight: 500; letter-spacing: -.02em; }
.related-guides h2 { font-weight: 500; letter-spacing: -.03em; }

/* `.disclaimer` is styled white-on-translucent-white for dark backgrounds, but
   on va.html it sits in #compare — a light section — so the legal text renders
   white on white and is invisible. (That predates this theme: #compare was a
   pale gradient before too.) Default it to the light-surface treatment and
   restore the white variant only where it really is on a dark panel. */
.disclaimer {
  background: var(--peri-5);
  border: 1px solid var(--peri-2);
  border-radius: var(--radius);
  color: var(--gray-600);
}
#research .disclaimer,
#stats .disclaimer,
.providers-card .disclaimer,
.mid-cta-inner .disclaimer,
.inline-cta .disclaimer {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.20);
  color: rgba(255,255,255,.82);
}

/* Lender application form (partners.html). style.css never styled these
   controls, so they render as raw browser defaults — Arial 13px inputs and a
   monospace textarea. That was true before this theme too, but it reads as
   broken beside a restyled page, so give them the same surface as everything
   else. Structure and field order are untouched. */
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--slate);
  letter-spacing: -.005em;
}
.form-field .req { color: var(--peri); font-weight: 600; }
.form-field input,
.form-field textarea,
.form-field select {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--slate);
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 12px 14px;
  width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.form-field textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--gray-400); }
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--peri);
  box-shadow: 0 0 0 3px var(--peri-4);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.form-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-panel);
  padding: clamp(28px, 4vw, 44px);
}
.form-intro, .form-note, .form-consent { font-size: 14px; color: var(--gray-600); line-height: 1.6; }
.form-consent { display: flex; gap: 10px; align-items: flex-start; }
.form-consent input[type="checkbox"] { width: auto; margin-top: 3px; accent-color: var(--peri); }
.form-submit { margin-top: 4px; }

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* === 8. FOOTER =========================================================== */
footer { background: var(--plum-2); }

/* === 9. HERO ============================================================= */
/* The five loan pages (refi, heloc, va, debt, business) reuse #hero WITHOUT a
   phone cluster, so the section keeps normal bottom padding by default. Only
   the homepage hero — the one that actually contains phones — drops it to zero
   so the cluster can bleed off the fold. Browsers without :has() simply keep
   the padding, which is the harmless direction to fail in. */
#hero {
  background: #fff;
  padding: 84px 0 72px;
  overflow: hidden;
}
#hero:has(.phone-cluster) { padding-bottom: 0; }
#hero h1 {
  font-size: clamp(42px, 6.4vw, 76px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.045em;
  color: var(--slate);
  max-width: 16ch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 24px;
}
#hero h1 span { color: var(--peri-display); }
.hero-sub {
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.55;
  color: var(--gray-600);
  max-width: 660px;
}
.hero-quickstart-label { font-weight: 450; color: var(--gray-500); }
.cta-microcopy { color: var(--gray-500); font-weight: 400; }
.cta-microcopy .dot { color: var(--gray-500); }   /* separators were too faint at --gray-400 */

/* === 10. PHONE CLUSTER ====================================================
   Aave's hero: centre phone taller and in front, the two flanks scaled down,
   pushed lower and tucked behind it, the whole group bleeding off the bottom
   of the section. The frames below are drawn in CSS — no image assets, and
   nothing on the screens is interactive or focusable. */
.phone-cluster {
  --phone-w: 288px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-top: 64px;
  margin-bottom: -40px;        /* flush-bottom bleed */
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.phone {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: var(--phone-w);
  background: var(--plum);
  border-radius: 46px;
  padding: 9px;
  box-shadow: 0 2px 4px rgba(38,34,40,.10), 0 24px 60px rgba(38,34,40,.16);
}
.phone--center {
  z-index: 2;
  box-shadow: 0 2px 4px rgba(38,34,40,.12), 0 32px 80px rgba(38,34,40,.22);
}
.phone--side {
  transform: translateY(30px) scale(.94);
  transform-origin: bottom center;
}
.phone-cluster .phone--side:first-child { margin-right: -84px; }
.phone-cluster .phone--side:last-child  { margin-left:  -84px; }

.phone-screen {
  position: relative;
  background: #fff;
  border-radius: 38px;
  overflow: hidden;
  padding: 34px 20px 26px;
  min-height: 528px;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.phone--center .phone-screen { min-height: 574px; }

/* Dynamic-island pill */
.phone-screen::before {
  content: "";
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  width: 84px; height: 22px;
  border-radius: var(--radius-pill);
  background: var(--plum);
}

/* --- screen chrome --- */
.ps-bar {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--peri-4);
  margin-bottom: 22px;
  overflow: hidden;
}
.ps-bar i { display: block; height: 100%; background: var(--peri); border-radius: inherit; }

.ps-eyebrow {
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 10px;
}
.ps-q {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -.03em;
  color: var(--slate);
  margin-bottom: 6px;
}
.ps-sub {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--gray-500);
  margin-bottom: 18px;
}

.ps-opts { display: flex; flex-direction: column; gap: 9px; }
.ps-opt {
  border: 1px solid var(--gray-200);
  border-radius: 13px;
  padding: 13px 15px;
  font-size: 13.5px;
  font-weight: 450;
  color: var(--slate);
  background: #fff;
  line-height: 1.25;
}
.ps-opt--on {
  background: var(--peri-4);
  border-color: var(--peri);
  color: #33299c;
  font-weight: 500;
}

.ps-cta { padding-top: 22px; }
.ps-cta i {
  display: block;
  border-radius: var(--radius-pill);
  background: var(--blue-dark);
  color: #fff;
  font-style: normal;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  padding: 13px 0;
}

/* Confirmation screen */
.ps-done { text-align: center; margin: auto 0; }
.ps-check {
  width: 60px; height: 60px;
  margin: 0 auto 20px;
  border-radius: var(--radius-pill);
  background: var(--peri-4);
  border: 1px solid var(--peri);
  display: flex; align-items: center; justify-content: center;
}
.ps-check svg { width: 28px; height: 28px; stroke: #5b4fd6; stroke-width: 2.25; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ps-done h4 {
  font-family: var(--display);
  font-size: 22px; font-weight: 500; letter-spacing: -.035em;
  color: var(--slate); margin-bottom: 8px;
}
.ps-done p { font-size: 13px; line-height: 1.5; color: var(--gray-500); }
.ps-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 20px; }
.ps-chips span {
  background: var(--peri-4);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 500;
  color: #4a3fa8;
}

/* === 11. RESPONSIVE ====================================================== */
@media (max-width: 1080px) {
  .phone-cluster { --phone-w: 250px; }
  .phone-cluster .phone--side:first-child { margin-right: -72px; }
  .phone-cluster .phone--side:last-child  { margin-left:  -72px; }
}

@media (max-width: 900px) {
  /* Aave drops to a single phone on narrow screens — so does this. */
  .phone--side { display: none; }
  .phone-cluster { --phone-w: 272px; margin-bottom: -32px; }
}

@media (max-width: 768px) {
  #hero { padding: 56px 0 0; }
  #hero h1 { max-width: 100%; }
  .nav-inner { height: 66px; }
  #stats > .container,
  #research > .container,
  #testimonials > .container { border-radius: 24px; }
  .mid-cta-inner, .final-cta-inner, .providers-card { border-radius: 24px; }
}

@media (max-width: 420px) {
  /* Narrow phones need a shallower bleed, otherwise the screen's own CTA
     falls below the section fold and gets clipped. */
  .phone-cluster { --phone-w: 238px; margin-bottom: -22px; }
  /* Deeper bottom padding keeps the screen's own CTA clear of the crop line —
     the extra space is invisible white inside the frame. */
  .phone-screen,
  .phone--center .phone-screen { min-height: 470px; padding: 30px 16px 44px; }
  .ps-opts { gap: 7px; }
  .ps-opt { padding: 11px 13px; }
  .ps-cta { padding-top: 14px; }
}

/* === 12. LEADERSHIP / FOUNDERS ========================================== */
/* Used by the #leadership section on about.html. Layout comes from the shared
   .research-grid (auto-fit, minmax 280px), so three founders sit 3-across on
   desktop and stack on mobile with no extra grid rules.

   The card is deliberately NOT .research-card: that class is re-skinned for the
   dark #research panel on index.html, and reusing it here would couple a light
   section to a dark section's overrides. */
.founder-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: none;
}

/* Monogram stands in for a headshot. Sized and positioned so a real <img>
   can replace the initials later without shifting the card at all. */
.founder-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--plum);
  color: #fff;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  overflow: hidden;
  flex: none;
}
.founder-avatar img { width: 100%; height: 100%; object-fit: cover; }

.founder-card h3 {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--slate);
  margin: 0 0 6px;
}

/* Matches the .section-label treatment so the role line reads as part of the
   same system as every other eyebrow on the site. */
.founder-role {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--peri-text);
  margin-bottom: 14px;
}

.founder-card p {
  color: var(--gray-600);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 768px) {
  .founder-card { padding: 26px 22px; }
  .founder-avatar { width: 56px; height: 56px; font-size: 19px; margin-bottom: 16px; }
}

/* Section shell. #expert (white) → #leadership (white) → #faq (gray-50) keeps
   the existing alternation intact; the cards' hairline borders carry the
   separation, the way .card does on every other white section. */
#leadership { padding: 88px 0; background: #fff; }
#leadership .head { text-align: center; margin-bottom: 48px; }
#leadership .head .subtitle { max-width: 640px; margin: 14px auto 0; }

@media (max-width: 768px) {
  #leadership { padding: 64px 0; }
  #leadership .head { margin-bottom: 32px; }
}

/* === 13. FUNDED / DEPOSIT SCENE ==========================================
   Used by #funded on index.html. Three handsets inside a lavender panel, each
   showing a lock screen carrying one deposit notification for one product line.

   Two rules this block exists to honour:

   1. Lendspedia never lends or disburses. So: no card art, no running balance,
      no send/receive row, no transaction ledger — anything that would read as
      "Lendspedia is the bank". Every alert is attributed to the lender the
      borrower matched with, and the section carries a visible disclosure.
   2. It must not become a second copy of the hero cluster. Dark lock screens
      instead of white quiz steps, a contained panel instead of a flush-bottom
      bleed, a machined frame instead of the flat plum slab used in the hero.

   Geometry is deliberately NOT shared with the hero. The .phone in the hero
   runs at roughly 1:1.83, which reads as a small tablet once the width drops;
   a real handset is about 1:2.16. Here the screen declares its own
   aspect-ratio and the frame follows it, so the proportion survives every
   breakpoint instead of being a min-height re-guessed at each one. */
#funded { padding: 88px 0; background: #fff; }
#funded .head { text-align: center; margin-bottom: 44px; }
#funded .head .subtitle { max-width: 660px; margin: 14px auto 0; }

.fund-panel {
  background: var(--peri-5);
  border: 1px solid var(--peri-3);
  border-radius: var(--radius-panel);
  padding: 56px 32px 52px;
  overflow: hidden;
}

.fund-cluster {
  --phone-w: 258px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* --- the handset --- */
/* Brushed rail: light along the top-left and bottom-right edges, shadowed on
   the other two. That alternation is what reads as machined metal; a flat grey
   fill reads as a rounded rectangle. */
.fund-phone {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: var(--phone-w);
  padding: 4px;
  border-radius: 52px;
  background: linear-gradient(148deg,
    #e9e7f2 0%, #a6a3b8 22%, #dbd9e6 48%, #8e8ba2 74%, #e4e2ee 100%);
  box-shadow:
    0 1px 2px rgba(38,34,40,.16),
    0 26px 64px rgba(38,34,40,.26);
}
.fund-phone--center {
  z-index: 2;
  box-shadow:
    0 1px 2px rgba(38,34,40,.18),
    0 34px 84px rgba(38,34,40,.32);
}
.fund-phone--side {
  transform: translateY(24px) scale(.92);
  transform-origin: bottom center;
}
.fund-cluster .fund-phone--side:first-child { margin-right: -40px; }
.fund-cluster .fund-phone--side:last-child  { margin-left:  -40px; }

/* Side buttons. Small, but their absence is exactly what makes a drawn phone
   look like a rectangle with rounded corners. */
.fund-phone::before,
.fund-phone::after {
  content: "";
  position: absolute;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #b7b4c7, #86839a);
}
.fund-phone::before { left: -1px;  top: 23%; height: 46px; }
.fund-phone::after  { right: -1px; top: 29%; height: 62px; }

/* --- the screen --- */
/* 9 / 19.5 is the modern handset ratio. box-sizing is border-box sitewide, so
   the ratio covers the bezel and the finished frame lands near 1:2.16. */
.fund-screen {
  position: relative;
  aspect-ratio: 9 / 19.5;
  background: #17141c;
  border: 7px solid #07060b;
  border-radius: 47px;
  overflow: hidden;
  padding: 14px 13px 10px;
  display: flex;
  flex-direction: column;
  text-align: left;
}

/* Dynamic island */
.fund-screen::before {
  content: "";
  position: absolute;
  top: 9px; left: 50%;
  transform: translateX(-50%);
  width: 72px; height: 21px;
  border-radius: var(--radius-pill);
  background: #000;
  z-index: 3;
}

/* --- status bar --- */
/* The left side stays empty on purpose: on a locked handset the time lives in
   the big clock below, not up here. */
.fs-status {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  height: 21px;
  padding-right: 4px;
  color: #fff;
}
.fs-status svg { display: block; fill: currentColor; }
.fs-signal {
  display: flex;
  align-items: flex-end;
  gap: 1.6px;
  height: 12px;
}
.fs-signal i {
  width: 3.2px;
  border-radius: 1px;
  background: currentColor;
}
.fs-signal i:nth-child(1) { height: 4px; }
.fs-signal i:nth-child(2) { height: 6.5px; }
.fs-signal i:nth-child(3) { height: 9.2px; }
.fs-signal i:nth-child(4) { height: 12px; }
.fs-wifi    { width: 16px; height: 12px; }
.fs-battery { width: 26px; height: 13px; }

/* --- lock clock --- */
.fs-lock { text-align: center; margin-top: 16px; }
.fs-date {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,.88);
  margin: 0 0 1px;
}
.fs-clock {
  font-family: var(--display);
  font-size: 54px;
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.035em;
  color: #fff;
  margin: 0;
}

/* --- notification --- */
/* The auto margin drops the alert into the lower half, where a real one sits. */
.fs-stack { margin-top: auto; }

.fs-alert {
  position: relative;
  z-index: 2;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 20px;
  padding: 12px 13px 13px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.fs-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}

.fs-icon {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 8px;
  background: var(--peri);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fs-icon svg {
  width: 14px; height: 14px;
  stroke: #17141c;
  stroke-width: 2.1;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fs-src {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  color: rgba(255,255,255,.62);
  margin: 0;
}
.fs-src span { flex: none; }

.fs-amt {
  font-family: var(--display);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -.03em;
  color: #fff;
  margin: 0 0 3px;
}

.fs-line {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255,255,255,.74);
  margin: 0;
}

/* The older notification underneath, collapsed to a sliver the way a phone
   shows a stack. It carries no text — it is depth, not content. */
.fs-peek {
  height: 12px;
  width: 88%;
  margin: -5px auto 0;
  border-radius: 0 0 16px 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
  border-top: 0;
}

.fs-home {
  width: 104px; height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  margin: 14px auto 0;
}

/* --- disclosure + link --- */
/* Visible, panel-width, not fine print. This is the sentence that keeps the
   section honest; it does not get shrunk or moved into the footer. */
.fund-disclosure {
  max-width: 680px;
  margin: 28px auto 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gray-600);
}

.fund-link {
  display: block;
  text-align: center;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--blue);
  text-decoration: none;
}
.fund-link:hover { text-decoration: underline; }

@media (max-width: 1080px) {
  .fund-cluster { --phone-w: 232px; }
  .fund-cluster .fund-phone--side:first-child { margin-right: -28px; }
  .fund-cluster .fund-phone--side:last-child  { margin-left:  -28px; }
  .fund-panel { padding: 44px 22px 40px; }
  .fs-clock { font-size: 48px; }
  .fs-amt { font-size: 23px; }
}

@media (max-width: 900px) {
  .fund-cluster { --phone-w: 204px; }
  .fund-cluster .fund-phone--side:first-child { margin-right: -22px; }
  .fund-cluster .fund-phone--side:last-child  { margin-left:  -22px; }
  .fs-clock { font-size: 40px; }
  .fs-date { font-size: 11px; }
  .fs-amt { font-size: 20px; }
  .fs-line { font-size: 11px; }
  .fs-src { font-size: 9.5px; }
}

/* Below 768px the handsets fall away and the three alerts stack as plain cards.
   The hero drops its flanking phones at this size; this section must not —
   business funding, home equity and personal payoff are the whole point, and
   three full handsets in a column would run past two screen heights. */
@media (max-width: 768px) {
  #funded { padding: 64px 0; }
  #funded .head { margin-bottom: 32px; }
  .fund-panel { border-radius: 24px; padding: 28px 18px 26px; }

  .fund-cluster {
    --phone-w: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .fund-phone {
    width: auto;
    background: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }
  .fund-phone::before,
  .fund-phone::after { display: none; }
  .fund-phone--side {
    transform: none;
    margin: 0 !important;
  }

  /* Flattened: the screen shell drops out entirely so each use case is one
     dark notification card, rather than a card nested inside a handset. */
  .fund-screen {
    aspect-ratio: auto;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
  }
  .fund-screen::before { display: none; }
  .fs-status,
  .fs-lock,
  .fs-peek,
  .fs-home { display: none; }
  .fs-alert {
    background: #17141c;
    border-color: rgba(255,255,255,.10);
    border-radius: 16px;
    padding: 15px 16px 16px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .fs-amt { font-size: 25px; }
  .fs-line { font-size: 12px; }
  .fs-src { font-size: 10.5px; }
}