/* =============================================================================
   Best Savings Quote — 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.

   STRUCTURE is ported from lendspedia.com/css/aave-theme.css — BSQ and
   Lendspedia are built from the same Solcertain template (same section ids,
   same class names), so the layout language transfers almost verbatim.
   COLOUR is deliberately NOT Lendspedia's. Its periwinkle accent family was
   replaced with a cool mint green so the two sites read as siblings rather than
   copies. Everything else — type, spacing, radii, flatness — is shared.

   Adaptations from the Lendspedia source:
     (a) TOKEN BRIDGE. The two sites forked before a variable rename. BSQ's
         style.css drives headings off --serif and accents off --teal* /
         --cyan-tint. Those names are mapped onto the new palette below.
     (b) SECTION REMAP. #loan-types -> #conditions, #loan-types-list ->
         #conditions-list. BSQ has no #credentials / #providers / #answer-first.
     (c) BSQ-ONLY COMPONENTS. Blog post cards, about value cards, the legal
         pages and the prose pages have no counterpart on Lendspedia and would
         otherwise ship half-restyled. Section 8 covers them.

   Structural 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
     - 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

   Every colour below is contrast-measured; the ratios in the comments are real,
   not aspirational. If you re-skin, re-measure — green sits lighter than
   blue-purple at equal saturation, which is why the text steps here are darker
   than the periwinkle ones they replaced.
   ============================================================================ */

/* === 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:  #f3f6f4;   /* faint mint tint, matching the brand hue */
  --gray-50:   #fbfbfb;              /* panel fill */

  /* Mint accent family — cool blue-green (hue 158). Tints only. */
  --accent:   #69d3ac;   /* 1.82:1 on white */
  --accent-2: #b4e4d2;   /* hairline accent borders */
  --accent-3: #cfede2;
  --accent-4: #e1f4ed;   /* panel / chip / icon-tile fill */
  --accent-5: #f0f9f6;   /* lightest tint */

  /* --accent is a FILL/BORDER colour, never a text colour — at 1.82:1 it fails
     every text bar. Three darker steps carry mint text, and they are NOT
     interchangeable; pick by size and by what is behind the text:
       --accent-display  headline-scale on WHITE   3.51:1 (clears the 3:1 bar)
       --accent-text     body-size on WHITE        4.61:1 (clears AA)
       --accent-ink      anything on --accent-4    6.60:1
     Using --accent-display on a tint is the mistake that broke the $600 stat
     during the periwinkle build — see .science-visual below. */
  --accent-display: #2d9a72;
  --accent-text:    #268462;
  --accent-ink:     #136044;

  /* Action ramp — same hue, far deeper and more saturated so a button never
     reads as "a tint". White label on each: 6.36 / 8.61 / 10.9:1. */
  --action:      #0d6d4a;
  --action-dark: #0a573b;
  --action-deep: #07462f;

  /* --- BSQ TOKEN BRIDGE -------------------------------------------------
     style.css reaches for these names, not the ones above. Without this block
     every heading stays Libre Franklin and every accent stays navy. */
  --serif: 'Inter Tight', var(--sans);

  --teal:       var(--accent-text);   /* links, icon strokes — 4.61:1 on white */
  --teal-dark:  var(--action);        /* .btn-green primary CTA background */
  --teal-deep:  var(--action-dark);   /* CTA hover */
  --teal-light: var(--accent-2);      /* hairline accent borders */
  --cyan-tint:  var(--accent-5);      /* lightest fill */

  /* Compare-table check marks. Kept a step brighter than --action so a "yes"
     mark doesn't read as a button: 5.35:1 on white, 4.99:1 on the tinted
     highlight cell. */
  --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, .head h2, .prose h2, .legal 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,
.value-card h3, .post-card h3, .legal 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. Any heading on a dark panel needs it
   back. */
.mid-cta-inner 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(--action-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; }
/* BSQ's primary CTA class is .btn-green, wired to --teal-dark (the action ramp) */
.btn-green:hover { background: var(--action-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.
   style.css sets these uppercase at .14em tracking; the chip treatment reads
   better with the tracking pulled back. */
.section-label, .hero-eyebrow, .urgency-badge {
  display: inline-block;
  background: var(--accent-4);
  border: 1px solid var(--accent-2);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--accent-ink);
}
.hero-eyebrow { margin-bottom: 26px; }
.urgency-badge { margin-bottom: 18px; }

/* style.css scopes its body copy per section — `#science p`, `#expert p`,
   `#final-cta p` — at (1,0,1), which out-ranks the (0,1,0) chip rule above.
   All three labels are <p> elements, so without this they keep 16-17px body
   sizing, a 28px bottom margin and the plum body colour, and render as running
   text with a mint box round it rather than as chips. Restated at ID
   specificity. These are the only three sections in the site with an
   ID-scoped paragraph colour; the rest are covered by the rule above. */
#science .section-label,
#expert .section-label,
#final-cta .urgency-badge {
  font-size: 12px;
  line-height: 1.4;
  color: var(--accent-ink);
  margin-bottom: 14px;
}
#final-cta .urgency-badge { margin-bottom: 18px; }

/* Coverage pills and badges */
.pill {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-pill);
  font-weight: 450;
  color: var(--slate);
  box-shadow: none;
}
.pill:hover {
  background: var(--accent-4);
  border-color: var(--accent);
  color: var(--plum);
  transform: translateY(-2px);
}
.badge { background: var(--accent-4); border-radius: var(--radius); }
.badge::before { background: var(--accent); }

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

.card-icon, .benefit-icon {
  background: var(--accent-4);
  border: 1px solid var(--accent-2);
  border-radius: 14px;
}
.card-icon svg, .benefit-icon svg { stroke: #1c7655; }

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

/* Flatten the blue gradient washes into Aave's white / near-white alternation */
#conditions      { background: #fff; }
#how-it-works    { background: var(--gray-50); }
#compare         { background: #fff; }
#conditions-list { background: var(--gray-50); }
#expert          { background: #fff; }
#faq             { background: var(--gray-50); }

.science-visual {
  background: linear-gradient(135deg, var(--accent-4), var(--accent-5));
  border: 1px solid var(--accent-2);
  border-radius: var(--radius-panel);
}
.science-visual .big-number {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -.04em;
  /* NOT --accent-display. That step is calibrated for headline-scale type on
     WHITE, where it measures 3.51:1. Here the number sits on the mint panel
     above, where the same colour drops to 2.62:1 against the --accent-4 stop —
     under the 3:1 large-text bar. --accent-ink is the step defined for tinted
     grounds and measures 6.60:1 here. This exact trap cost a fix during the
     previous build; the panel is the background, not the page. */
  color: var(--accent-ink);
}

/* === 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(--accent-4); }

/* Dark panels: plum ground, mint 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(--accent-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(--accent); 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 */

/* Mint panel */
#testimonials h2 { color: var(--plum); }
#testimonials .subtitle { color: var(--gray-600); }
#testimonials .section-label { background: #fff; border-color: var(--accent-2); color: var(--accent-ink); }
#testimonials .testimonial-card { background: #fff; border: 1px solid var(--accent-2); }
/* style.css sets `#testimonials { color: #fff }` for the old blue gradient. The
   panel is mint 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); }
#testimonials .testimonial-author { color: var(--gray-600); }

/* 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(--accent-3); }
.final-cta-inner {
  background: var(--accent-5);
  border: 1px solid var(--accent-2);
  border-radius: var(--radius-panel);
}

/* Photo overlays: the two stock images already live in style.css and are
   gradient-masked in navy. Keep the photos, re-tint the mask to plum so they
   sit in the same family as the panels. */
.hiw-image, .expert-visual {
  border-radius: var(--radius);
  box-shadow: none;
  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-1450101499163-c8848c66ca85?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;
}

/* === 7. INNER PAGES ======================================================
   .page-header is the hero stand-in on about / blog / the three legal pages. */
.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: var(--accent-ink); }  /* beats style.css's --teal-dark */

/* === 8. BSQ-ONLY COMPONENTS ==============================================
   Lendspedia has no counterpart for any of these. Without them, about.html,
   blog.html and the three legal pages render half-restyled: navy gradients and
   weight-700 headings inside an otherwise flat plum page. */

/* --- blog.html --- */
.post-card { border: 1px solid var(--gray-200); }
.post-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: none;
}
.post-card-thumb { background: linear-gradient(135deg, var(--accent-3), var(--accent-5)); }
.post-card-thumb span {
  background: rgba(255,255,255,.72);
  color: var(--accent-ink);
  font-weight: 500;
  letter-spacing: -.005em;
  border-radius: var(--radius-pill);
}
.post-card-meta { color: var(--gray-500); font-weight: 450; letter-spacing: .06em; }
.post-card a.read-more { color: var(--accent-text); font-weight: 500; }
.post-card a.read-more:hover { color: var(--accent-ink); }

/* --- about.html --- */
.value-card { border: 1px solid var(--gray-200); box-shadow: none; }
.about-stats {
  background: var(--plum);
  border-radius: var(--radius-panel);
  padding: clamp(36px, 5vw, 52px) clamp(24px, 4vw, 40px);
}
.about-stats strong {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -.025em;
}
.about-stats span { color: rgba(255,255,255,.62); opacity: 1; }

/* --- prose pages (about) --- */
.prose .section-label { color: var(--accent-ink); }

/* --- legal pages (privacy / terms / disclaimer) --- */
.legal-meta { color: var(--gray-500); }
/* The amber notice was the one warm surface on an otherwise cool page; against
   plum it reads as an error state. Move it into the mint family. */
.legal-notice {
  background: var(--accent-5);
  border: 1px solid var(--accent-2);
  border-radius: var(--radius);
  color: var(--gray-700);
}
.legal-notice strong { color: var(--plum); }
.legal-toc {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}
.legal-toc h2 { font-weight: 500; letter-spacing: -.02em; }
.legal-toc a, .legal a { color: var(--accent-ink); }
.legal strong { color: var(--plum); }

/* --- footer --- */
footer { background: var(--plum-2); }
.footer-disclaimer-title { font-family: var(--display); font-weight: 500; letter-spacing: -.02em; }
.footer-divider { border-top-color: rgba(255,255,255,.12); }

/* === 9. HERO ============================================================= */
#hero {
  background: #fff;
  padding: 84px 0 72px;
  overflow: hidden;
}
/* Only the homepage hero contains the phone cluster; it drops its bottom
   padding so the group can bleed off the fold. Browsers without :has() simply
   keep the padding, which is the harmless direction to fail in. */
#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(--accent-display); }
.hero-sub {
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.55;
  color: var(--gray-600);
  max-width: 660px;
}

/* === 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(--accent-4);
  margin-bottom: 22px;
  overflow: hidden;
}
.ps-bar i { display: block; height: 100%; background: var(--accent); 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(--accent-4);
  border-color: var(--accent);
  color: #114a35;
  font-weight: 500;
}

.ps-cta { padding-top: 22px; }
.ps-cta i {
  display: block;
  border-radius: var(--radius-pill);
  background: var(--action-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(--accent-4);
  border: 1px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.ps-check svg { width: 28px; height: 28px; stroke: #1c7655; 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(--accent-4);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 500;
  color: var(--accent-ink);
}

/* === 10b. HERO SPLIT (above the fold) =====================================
   Copy on the left, phone cluster on the right, sized so that on a 1366x768
   laptop the headline, quick-start pills, CTA, trust line and the bottoms of
   all three phones are visible under the 68px nav without scrolling.
   The cluster keeps its exact markup and internal proportions: it is only
   scaled with a transform, and .hero-phones reserves the scaled height so the
   grid row knows how tall the column is. Below 900px the grid collapses to a
   centred single column and the cluster returns to its unscaled single-phone
   mobile treatment (see §11). */
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: end;
}
#hero:has(.hero-grid) { padding-top: 48px; }
.hero-copy { text-align: left; padding-bottom: 56px; }
.hero-copy .hero-eyebrow { margin-bottom: 22px; }
#hero .hero-grid h1 {
  font-size: clamp(38px, 4.2vw, 56px);
  max-width: 12ch;
  margin-left: 0;
  margin-bottom: 18px;
}
.hero-grid .hero-sub { font-size: 17px; max-width: 520px; margin: 0 0 22px; }
.hero-quickstart-label {
  font-size: 13px;
  font-weight: 450;
  color: var(--gray-500);
  margin-bottom: 10px;
}
.hero-quickstart { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.hero-quickstart .pill {
  display: inline-block;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 450;
  text-decoration: none;
  line-height: 1.3;
}
.hero-copy .btn-lg { margin-bottom: 14px; }
.cta-microcopy { font-size: 13px; color: var(--gray-500); margin: 0; }
.cta-microcopy .dot { margin: 0 8px; color: var(--gray-400); }

.hero-phones { position: relative; height: 452px; }
.hero-grid .phone-cluster {
  position: absolute;
  left: 50%;
  bottom: -18px;               /* crop the bottom edge, as the original bleed did */
  margin: 0;
  transform: translateX(-50%) scale(.76);
  transform-origin: bottom center;
}

/* === 10c. STICKY MOBILE CTA ===============================================
   Hidden above 768px. js/main.js adds .show once the hero button has scrolled
   above the viewport, and body.has-sticky-cta keeps the footer clear of it. */
.sticky-cta { display: none; }

/* === 10d. "WHAT TO EXPECT" CARDS ==========================================
   Reuses the testimonials panel + grid so the section keeps its rhythm, but
   the cards carry an icon tile, a title and one paragraph: no stars, no names. */
.expect-card { text-align: left; }
.expect-card .card-icon {
  background: var(--accent-4);
  border: 1px solid var(--accent-2);
  border-radius: 14px;
}
.expect-card .card-icon svg { stroke: var(--accent-ink); }
.expect-card h3 { font-size: 19px; margin-bottom: 8px; }
.expect-card p { font-size: 15px; line-height: 1.65; color: var(--gray-600); }

/* === 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; }
  .hero-grid { grid-template-columns: 1.1fr 1fr; gap: 24px; }
  #hero .hero-grid h1 { font-size: clamp(36px, 4.6vw, 48px); }
  .hero-phones { height: 400px; }
  .hero-grid .phone-cluster { transform: translateX(-50%) scale(.7); }
}

@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; }
  /* Split hero collapses: centred copy, then the single phone. */
  .hero-grid { display: block; }
  .hero-copy { text-align: center; padding-bottom: 0; }
  #hero .hero-grid h1 { max-width: 100%; margin-left: auto; margin-right: auto; }
  .hero-grid .hero-sub { margin: 0 auto 22px; }
  .hero-quickstart { justify-content: center; }
  .hero-phones { height: auto; margin-top: 44px; }
  .hero-grid .phone-cluster {
    position: static;
    transform: none;
    margin-bottom: -32px;
  }
}

@media (max-width: 768px) {
  #hero { padding: 56px 0 0; }
  #hero:has(.hero-grid) { padding-top: 44px; }
  #hero h1 { max-width: 100%; }
  .hero-quickstart { gap: 8px 6px; }
  .hero-quickstart .pill { padding: 9px 14px; font-size: 13.5px; }
  .hero-copy .btn-lg { width: 100%; max-width: 360px; }
  .sticky-cta {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--gray-200);
    transform: translateY(110%);
    transition: transform .25s;
  }
  .sticky-cta.show { transform: none; }
  .sticky-cta .btn { width: 100%; }
  body.has-sticky-cta { padding-bottom: 72px; }
  .nav-inner { height: 66px; }
  #stats > .container,
  #research > .container,
  #testimonials > .container { border-radius: 24px; }
  .mid-cta-inner, .final-cta-inner, .about-stats { 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. ARTICLE PAGES ===================================================
   Added when the blog stopped being a facade. These components have no
   counterpart in style.css at all — the project never had an article
   template — so unlike the rest of this file they are definitions, not
   overrides. Everything is built from the tokens in section 1; no new
   colours are introduced. */

.breadcrumbs {
  font-size: 13px;
  color: var(--gray-500);
  margin-bottom: 18px;
}
.breadcrumbs a { color: var(--accent-text); font-weight: 450; }
.breadcrumbs a:hover { color: var(--accent-ink); text-decoration: underline; }
.breadcrumbs .sep { color: var(--gray-400); margin: 0 7px; }

/* Byline strip under the article title */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: 13.5px;
  color: var(--gray-500);
  margin-top: 20px;
}
.article-meta .dot { color: var(--gray-400); }
.article-meta strong { color: var(--gray-700); font-weight: 500; }

.article-section { padding: 56px 0 88px; }
.article-body {
  max-width: 720px;   /* ~68ch at 17px — inside the 65–75ch band */
  margin: 0 auto;
}
.article-body > p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--gray-700);
  margin-bottom: 22px;
  text-wrap: pretty;
}
.article-body h2 {
  font-family: var(--display);
  font-size: clamp(24px, 3vw, 31px);
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--slate);
  line-height: 1.2;
  margin: 48px 0 16px;
  text-wrap: balance;
}
.article-body h2:first-child { margin-top: 0; }
.article-body h3 {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--slate);
  margin: 32px 0 10px;
}
.article-body ul, .article-body ol { margin: 0 0 22px; padding-left: 22px; }
.article-body li {
  font-size: 17px;
  line-height: 1.72;
  color: var(--gray-700);
  margin-bottom: 10px;
}
.article-body li::marker { color: var(--accent-text); }
.article-body strong { color: var(--plum); font-weight: 500; }
.article-body a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-body a:hover { color: var(--action); }

/* Lede — the opening paragraph carries a little more weight */
.article-body .lede {
  font-size: 19px;
  line-height: 1.65;
  color: var(--gray-600);
  margin-bottom: 28px;
}

/* Key-takeaways box at the top of each article */
.takeaways {
  background: var(--accent-5);
  border: 1px solid var(--accent-2);
  border-radius: var(--radius);
  padding: 24px 26px;
  margin: 0 0 32px;
}
.takeaways h2 {
  font-size: 13px !important;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 12px !important;
}
.takeaways ul { margin: 0; padding-left: 20px; }
.takeaways li { font-size: 15.5px; line-height: 1.6; margin-bottom: 8px; }
.takeaways li:last-child { margin-bottom: 0; }

/* Pull-out note inside the body */
.callout {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 28px 0;
}
.callout p { font-size: 15.5px; line-height: 1.65; color: var(--gray-700); margin: 0; }
.callout p + p { margin-top: 12px; }
.callout .callout-label {
  display: block;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 8px;
}

/* Mid-article conversion block */
.inline-cta {
  background: var(--plum);
  border-radius: var(--radius-panel);
  padding: clamp(28px, 4vw, 40px);
  margin: 40px 0;
  text-align: center;
}
.inline-cta h3 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.03em;
  color: #fff;
  margin: 0 0 10px;
}
.inline-cta p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,.72);
  margin: 0 0 20px;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}
.inline-cta .btn { background: #fff; color: var(--plum); }
.inline-cta .btn:hover { background: var(--accent-3); }

/* Sources — every article ends with one */
.sources {
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid var(--gray-200);
}
.sources h2 {
  font-size: 13px !important;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin: 0 0 14px !important;
}
.sources ol { margin: 0; padding-left: 20px; }
.sources li { font-size: 14px; line-height: 1.6; color: var(--gray-600); margin-bottom: 10px; }
.sources a { color: var(--accent-ink); word-break: break-word; }

/* Per-article editorial note. Selector is qualified because `.article-body > p`
   above is (0,1,1) and would otherwise out-rank a bare `.article-disclaimer`
   (0,1,0), rendering the small print at full 17px body size. */
.article-body > p.article-disclaimer {
  margin-top: 26px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--gray-500);
}

/* Related reading */
.related {
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  padding: 64px 0 80px;
}
.related h2 {
  font-family: var(--display);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 500;
  letter-spacing: -.03em;
  text-align: center;
  margin-bottom: 32px;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}
.related-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 22px 24px;
  transition: transform .2s, border-color .2s;
}
.related-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.related-card .tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 9px;
}
.related-card h3 {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.35;
  color: var(--slate);
  margin: 0;
}

@media (max-width: 768px) {
  .article-section { padding: 40px 0 64px; }
  .article-body > p, .article-body li { font-size: 16px; }
  .article-body .lede { font-size: 17.5px; }
  .inline-cta { border-radius: 24px; }
}