/* =============================================================
   VOLA FINANCE — style.css
   Brand: Vola Finance | Domain: volafinanceusa.com
   Palette: Deep Teal + Sage Green + Oat Beige
   ============================================================= */

/* NOTE: Google Fonts loaded via <link> in HTML <head> for non-blocking performance */

/* =============================================================
   1. CSS CUSTOM PROPERTIES
   ============================================================= */
:root {
  /* Brand palette */
  --clr-teal-900: #12404F;
  --clr-teal-800: #1A5769;
  --clr-teal-700: #21708A;
  --clr-teal-600: #2D8BA8;
  --clr-teal-500: #3EA8C8;
  --clr-teal-300: #85CCDF;
  --clr-teal-100: #D6EFF5;
  --clr-teal-50:  #EBF7FB;

  --clr-sage-700: #5C8367;
  --clr-sage-500: #7A9E87;
  --clr-sage-300: #A8C4AE;
  --clr-sage-100: #D8EDDD;
  --clr-sage-50:  #EEF7F0;

  --clr-oat-900: #1A1812;
  --clr-oat-700: #3E3A2E;
  --clr-oat-500: #7A7464;
  --clr-oat-300: #C2BBА7;
  --clr-oat-200: #D9D4C4;
  --clr-oat-100: #EEEADF;
  --clr-oat-50:  #F7F4ED;

  --clr-amber-700: #B85E16;
  --clr-amber-600: #D0701E;
  --clr-amber-500: #E8822A;
  --clr-amber-400: #F09A4E;
  --clr-amber-100: #FDECD9;

  /* Semantic */
  --color-primary:       var(--clr-teal-700);
  --color-primary-dark:  var(--clr-teal-900);
  --color-primary-light: var(--clr-teal-100);
  --color-secondary:     var(--clr-sage-500);
  --color-accent:        var(--clr-amber-500);
  --color-accent-dark:   var(--clr-amber-700);

  --color-bg:          #FDFAF4;
  --color-surface:     var(--clr-oat-50);
  --color-surface-2:   var(--clr-oat-100);
  --color-border:      #D4CFC0;
  --color-border-light:#E8E4D8;

  --color-text:          #181614;
  --color-text-secondary:#4A4F58;
  --color-text-muted:    #7A828E;
  --color-link:          var(--clr-teal-700);
  --color-link-hover:    var(--clr-teal-900);

  --color-success: #2A6B4D;
  --color-error:   #C03030;
  --color-warning: var(--clr-amber-600);

  /* Typography */
  --font-display: 'Bricolage Grotesque', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  --text-xs:   clamp(0.688rem, 0.64rem + 0.12vw, 0.75rem);
  --text-sm:   clamp(0.8rem,   0.76rem + 0.16vw, 0.875rem);
  --text-base: clamp(0.9rem,   0.86rem + 0.18vw, 1rem);
  --text-md:   clamp(1rem,     0.94rem + 0.24vw, 1.125rem);
  --text-lg:   clamp(1.1rem,   1rem    + 0.4vw,  1.25rem);
  --text-xl:   clamp(1.25rem,  1.1rem  + 0.5vw,  1.5rem);
  --text-2xl:  clamp(1.5rem,   1.3rem  + 0.8vw,  2rem);
  --text-3xl:  clamp(1.875rem, 1.5rem  + 1.5vw,  2.5rem);
  --text-4xl:  clamp(2.25rem,  1.8rem  + 2vw,    3.25rem);
  --text-5xl:  clamp(2.75rem,  2rem    + 3vw,    4.5rem);

  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  /* Spacing */
  --sp-1:  0.25rem;  --sp-2:  0.5rem;   --sp-3:  0.75rem;
  --sp-4:  1rem;     --sp-5:  1.25rem;  --sp-6:  1.5rem;
  --sp-8:  2rem;     --sp-10: 2.5rem;   --sp-12: 3rem;
  --sp-16: 4rem;     --sp-20: 5rem;     --sp-24: 6rem;
  --sp-32: 8rem;

  /* Layout */
  --max-w:        1100px;
  --max-w-wide:   1280px;
  --max-w-narrow: 720px;
  --pad-x:        clamp(1rem, 3vw, 1.5rem);

  /* Borders */
  --radius-sm:   0.375rem;
  --radius-md:   0.625rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-2xl:  2rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(24,22,20,0.06);
  --shadow-sm: 0 2px 6px rgba(24,22,20,0.08), 0 1px 2px rgba(24,22,20,0.05);
  --shadow-md: 0 4px 16px rgba(24,22,20,0.08), 0 2px 4px rgba(24,22,20,0.05);
  --shadow-lg: 0 10px 30px rgba(24,22,20,0.10), 0 4px 8px rgba(24,22,20,0.06);
  --shadow-xl: 0 20px 50px rgba(24,22,20,0.12), 0 8px 16px rgba(24,22,20,0.07);
  --shadow-focus: 0 0 0 3px rgba(33,112,138,0.35);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;

  /* Z-index */
  --z-below: -1; --z-base: 0; --z-raised: 1;
  --z-dropdown: 100; --z-sticky: 200; --z-modal: 300;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:          #0D1A20;
    --color-surface:     #132028;
    --color-surface-2:   #1A2C36;
    --color-border:      #25404E;
    --color-border-light:#1C3340;
    --color-text:        #EBF4F7;
    --color-text-secondary: #9BB8C4;
    --color-text-muted:  #5E8898;
    --shadow-sm: 0 2px 6px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.35);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.4);
  }
}
:root[data-theme="dark"] {
  --color-bg:          #0D1A20;
  --color-surface:     #132028;
  --color-surface-2:   #1A2C36;
  --color-border:      #25404E;
  --color-border-light:#1C3340;
  --color-text:        #EBF4F7;
  --color-text-secondary: #9BB8C4;
  --color-text-muted:  #5E8898;
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.4);
}

/* =============================================================
   2. RESET + BASE
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  hanging-punctuation: first last;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul[class], ol[class] { list-style: none; }
a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-link-hover); }
a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); }
button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

/* =============================================================
   3. TYPOGRAPHY
   ============================================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

h1 { font-size: var(--text-4xl); font-weight: var(--weight-extrabold); }
h2 { font-size: var(--text-3xl); font-weight: var(--weight-bold); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); font-weight: var(--weight-semibold); }

p { margin-bottom: var(--sp-4); max-width: 72ch; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: var(--weight-semibold); }
em, i { font-style: italic; }

small { font-size: var(--text-sm); }

.mono, code, kbd { font-family: var(--font-mono); font-size: 0.9em; }
code { background: var(--color-surface-2); padding: 0.15em 0.4em; border-radius: var(--radius-sm); }

.text-display {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-extrabold);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.text-headline {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-extrabold);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.text-title    { font-size: var(--text-3xl); font-weight: var(--weight-bold); }
.text-subtitle { font-size: var(--text-xl);  color: var(--color-text-secondary); }
.text-body-lg  { font-size: var(--text-md);  line-height: var(--leading-relaxed); }
.text-body     { font-size: var(--text-base); }
.text-small    { font-size: var(--text-sm); }
.text-caption  { font-size: var(--text-xs); color: var(--color-text-muted); }

.text-primary   { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-accent    { color: var(--color-accent); }
.text-muted     { color: var(--color-text-muted); }
.text-success   { color: var(--color-success); }
.text-error     { color: var(--color-error); }
.text-center    { text-align: center; }
.text-left      { text-align: left; }
.text-right     { text-align: right; }

.mono-number {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
}

/* Section eyebrow label */
.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--sp-3);
}

/* =============================================================
   4. LAYOUT — CONTAINER + GRID
   ============================================================= */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.container--wide   { max-width: var(--max-w-wide); }
.container--narrow { max-width: var(--max-w-narrow); }

.section { padding-block: clamp(2rem, 4vw, 3.5rem); }
.section--lg { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--sm { padding-block: clamp(1rem, 2.5vw, 2rem); }

.section-header {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--sp-8);
}
.section-header p { margin-inline: auto; color: var(--color-text-secondary); }

/* Grid utilities */
.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }

@media (max-width: 960px)  { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px)  { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: var(--sp-2); }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }
.gap-8 { gap: var(--sp-8); }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }

/* Backgrounds */
.bg-primary  { background-color: var(--color-primary); color: #fff; }
.bg-surface  { background-color: var(--color-surface); }
.bg-surface-2 { background-color: var(--color-surface-2); }
.bg-teal-dark { background-color: var(--clr-teal-900); color: #fff; }

/* Spacing helpers */
.mt-2 { margin-top: var(--sp-2); } .mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); } .mt-8 { margin-top: var(--sp-8); }
.mb-2 { margin-bottom: var(--sp-2); } .mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); } .mb-8 { margin-bottom: var(--sp-8); }
.pt-8 { padding-top: var(--sp-8); } .pb-8 { padding-bottom: var(--sp-8); }

/* =============================================================
   5. BUTTONS
   ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.75em 1.6em;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  font-family: var(--font-body);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  line-height: 1;
  position: relative;
  overflow: hidden;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { box-shadow: var(--shadow-focus); }

/* Primary CTA — Amber */
.btn--primary {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  box-shadow: var(--shadow-md);
  color: #fff;
}

/* Secondary — Teal */
.btn--secondary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.btn--secondary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fff;
}

/* Outline */
.btn--outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn--outline:hover {
  background: var(--color-primary);
  color: #fff;
}

/* Ghost */
.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn--ghost:hover {
  background: var(--color-surface);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* White (on dark backgrounds) */
.btn--white {
  background: #fff;
  color: var(--clr-teal-800);
  border-color: #fff;
}
.btn--white:hover {
  background: var(--clr-oat-100);
  border-color: var(--clr-oat-100);
}

/* Sizes */
.btn--sm  { padding: 0.55em 1.2em; font-size: var(--text-sm); }
.btn--lg  { padding: 0.9em 2em;    font-size: var(--text-md); }
.btn--xl  { padding: 1.05em 2.4em; font-size: var(--text-lg); }
.btn--full { width: 100%; }

/* Icon button */
.btn--icon {
  padding: 0.65em;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
}

/* =============================================================
   6. HEADER + NAVIGATION
   ============================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(253, 250, 244, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border-light);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.site-header.scrolled { box-shadow: var(--shadow-md); }

.site-header .container {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  height: 68px;
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  flex-shrink: 0;
}
.logo-icon {
  width: 36px; height: 36px;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
}
.logo-icon svg { width: 20px; height: 20px; fill: #fff; }
.logo-wordmark {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: var(--weight-extrabold);
  color: var(--color-text);
  line-height: 1;
}
.logo-wordmark span { color: var(--color-primary); }

/* ─── Vola Finance Logo (Option D Wordmark) ─── */
.vf-logo { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; text-decoration: none; }
.vf-name { display: flex; align-items: baseline; line-height: .9; }
.vf-v { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.04em; color: #21708A; line-height: .9; }
.vf-ola { font-family: var(--font-display); font-weight: 300; font-size: 1.05rem; letter-spacing: -0.025em; color: var(--color-text); line-height: .9; }
.vf-wave { display: block; width: 56px; height: 5px; margin-top: 3px; flex-shrink: 0; }
.vf-fin { font-family: var(--font-body); font-size: 0.48rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-text); opacity: 0.42; margin-top: 2px; }
.vf-logo--footer .vf-v { color: #3BADD4; }
.vf-logo--footer .vf-ola { color: rgba(255,255,255,.9); }
.vf-logo--footer .vf-fin { color: rgba(255,255,255,.4); opacity: 1; }

/* Main nav */
.main-nav { flex: 1; display: flex; justify-content: center; }
.nav-list {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  list-style: none;
}

.nav-link, .nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0.5em 0.75em;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-fast), background var(--dur-fast);
  text-decoration: none;
}
.nav-link:hover, .nav-dropdown-toggle:hover,
.nav-link.active, .nav-dropdown-toggle.active {
  color: var(--color-primary);
  background: var(--color-primary-light);
}

.nav-arrow {
  font-size: 0.65em;
  transition: transform var(--dur-base) var(--ease-out);
  display: inline-block;
}
.nav-dropdown-toggle[aria-expanded="true"] .nav-arrow { transform: rotate(180deg); }

/* Dropdown */
.nav-item--has-dropdown { position: relative; }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-2);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility var(--dur-base);
  transform: translateX(-50%) translateY(-8px);
  z-index: var(--z-dropdown);
}
.nav-item--has-dropdown:hover .nav-dropdown,
.nav-item--has-dropdown:focus-within .nav-dropdown,
.nav-dropdown.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-link {
  display: block;
  padding: 0.6em 1em;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.nav-dropdown-link:hover { color: var(--color-primary); background: var(--color-surface); }

/* Header actions */
.header-actions { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }

/* Mobile toggle — Hamburger ☰ / Close ✕ */
.nav-mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: 1.5px solid var(--color-border);
  cursor: pointer;
  padding: 9px 8px;
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.nav-mobile-toggle:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
.nav-mobile-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform 0.25s var(--ease-out), opacity 0.18s, width 0.18s;
  transform-origin: center;
}
/* X animation: rotate first/last, hide middle */
.nav-mobile-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-mobile-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-mobile-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1000px) {
  .main-nav { display: none; }
  .nav-mobile-toggle { display: flex; }

  .main-nav.mobile-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 68px;
    left: 0; right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding: var(--sp-2) 0 var(--sp-4);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    max-height: calc(100vh - 68px);
    overflow-y: auto;
    z-index: var(--z-sticky);
  }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-link, .nav-dropdown-toggle {
    padding: 0.85em var(--sp-6);
    font-size: var(--text-base);
    font-weight: 500;
    justify-content: space-between;
    border-radius: 0;
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text);
  }
  .nav-link:hover, .nav-dropdown-toggle:hover {
    background: var(--color-primary-light);
    color: var(--color-primary);
  }
  .nav-link.active { color: var(--color-primary); background: var(--color-primary-light); }
  .nav-item--has-dropdown { position: static; }
  .nav-dropdown {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    border: none;
    background: var(--color-surface);
    border-radius: 0;
    padding: 0;
    display: none;
  }
  .nav-dropdown.open { display: block; }
  .nav-dropdown-link {
    padding: 0.75em var(--sp-10);
    border-bottom: 1px solid var(--color-border-light);
    border-radius: 0;
    color: var(--color-text-secondary);
  }
  .nav-dropdown-link:hover { color: var(--color-primary); background: var(--color-primary-light); }
  /* Mobile header height */
  .site-header .container { height: 60px; }
  .main-nav.mobile-open { top: 60px; max-height: calc(100vh - 60px); }
}
@media (max-width: 480px) {
  .header-actions .btn--sm { display: none; } /* hide "Apply Now" header btn on very small screens */
}

/* =============================================================
   7. BREADCRUMB
   ============================================================= */
.breadcrumb {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-light);
  padding-block: var(--sp-3);
}
.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1);
  list-style: none;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.breadcrumb-list a { color: var(--color-text-muted); }
.breadcrumb-list a:hover { color: var(--color-primary); }
.breadcrumb-list .sep { margin-inline: var(--sp-1); opacity: 0.5; }
.breadcrumb-list [aria-current="page"] { color: var(--color-text-secondary); font-weight: var(--weight-medium); }

/* =============================================================
   8. HERO SECTIONS
   ============================================================= */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, #1A6380 0%, #21708A 28%, #2496B5 58%, #22BDD9 100%);
  color: #fff;
  padding-block: clamp(3rem, 7vw, 5rem);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 75% at 90% 15%, rgba(232,130,42,0.24) 0%, transparent 62%),
    radial-gradient(ellipse 45% 55% at 5%  90%, rgba(255,255,255,0.06) 0%, transparent 50%),
    linear-gradient(140deg, rgba(10,45,58,0.12) 0%, transparent 48%);
  z-index: 1;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* ── Homepage hero: full-width background image ── */
.hero--person-right .hero__bg {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.hero--person-right::before {
  /* gradient left→right: dark on left (text readable), lighter on right (image visible) */
  background:
    linear-gradient(to right,
      rgba(8,22,35,0.82) 0%,
      rgba(8,22,35,0.65) 35%,
      rgba(8,22,35,0.28) 65%,
      rgba(8,22,35,0.10) 100%
    );
}
/* Hide person image on small screens — hero stacks single col */
@media (max-width: 860px) {
  .hero--person-right .hero__bg { display: none; }
}
.hero__content {
  position: relative;
  z-index: 2;
  max-width: 700px;
}
.hero h1 { color: #fff; margin-bottom: var(--sp-6); text-shadow: 0 1px 12px rgba(10,35,50,0.45), 0 2px 4px rgba(10,35,50,0.30); }
.hero .hero-lead {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.92);
  margin-bottom: var(--sp-8);
  max-width: 56ch;
  text-shadow: 0 1px 8px rgba(10,35,50,0.40);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin-top: var(--sp-10);
  padding-top: var(--sp-8);
  border-top: 1px solid rgba(255,255,255,0.15);
}
.hero-stat__value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  color: #fff;
  line-height: 1;
}
.hero-stat__label {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.7);
  margin-top: var(--sp-1);
}

/* Hero with form on right */
.hero--split .hero__inner {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--sp-6);
  align-items: center;
}
@media (max-width: 960px) {
  .hero--split .hero__inner { grid-template-columns: 1fr; }
}

/* Page hero (shorter) */
.page-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(130deg, #1A6380 0%, #21708A 35%, #2898B8 65%, #22BDD9 100%);
  color: #fff;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 120% at 95% 50%, rgba(232,130,42,0.14) 0%, transparent 60%),
    linear-gradient(130deg, rgba(10,45,58,0.20) 0%, transparent 50%);
  z-index: 1;
}
.page-hero__bg { position: absolute; inset: 0; z-index: 0; object-fit: cover; width: 100%; height: 100%; }
.page-hero__content { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; font-size: var(--text-3xl); margin-bottom: var(--sp-4); }
.page-hero p  { color: rgba(255,255,255,0.8); max-width: 600px; font-size: var(--text-md); }

/* Wide banner hero (21:9 images) */
.hero--wide .hero__bg { aspect-ratio: 21/9; }

/* =============================================================
   9. CARDS
   ============================================================= */

/* Base card */
.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base);
}
.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  border-color: var(--color-border);
}
.card__body { padding: var(--sp-6); }
.card__footer { padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--color-border-light); }

/* Loan / feature card */
.loan-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  padding: var(--sp-6);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base);
}
.loan-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.loan-card__icon {
  width: 52px; height: 52px;
  background: var(--color-primary-light);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-5);
}
.loan-card__icon svg { width: 26px; height: 26px; color: var(--color-primary); }
.loan-card h3 { font-size: var(--text-xl); margin-bottom: var(--sp-3); }
.loan-card p  { color: var(--color-text-secondary); font-size: var(--text-sm); margin-bottom: 0; }

/* Stat card */
.stat-card {
  text-align: center;
  padding: var(--sp-6);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-light);
}
.stat-card__value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  color: var(--color-primary);
  line-height: 1.1;
}
.stat-card__label { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--sp-2); }

/* Highlight / trust card */
.trust-card {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: var(--sp-5);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
}
.trust-card__icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  background: var(--clr-teal-100);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary);
}
.trust-card__title { font-weight: var(--weight-semibold); margin-bottom: var(--sp-1); }
.trust-card__desc  { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: 0; }

/* =============================================================
   10. BLOG CARDS
   ============================================================= */
.blog-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base);
}
.blog-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }

.blog-card__img-wrap {
  overflow: hidden;
  aspect-ratio: 3/2;
}
.blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.blog-card:hover .blog-card__img { transform: scale(1.04); }

.blog-card__body { padding: var(--sp-5) var(--sp-5) var(--sp-4); flex: 1; }
.blog-card__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--sp-3);
}
.blog-card__category {
  display: inline-block;
  background: var(--clr-teal-100);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 0.2em 0.7em;
  border-radius: var(--radius-full);
}
.blog-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  margin-bottom: var(--sp-3);
  color: var(--color-text);
}
.blog-card__title a { color: inherit; }
.blog-card__title a:hover { color: var(--color-primary); }
.blog-card__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  margin-bottom: 0;
}
.blog-card__footer {
  padding: var(--sp-3) var(--sp-5) var(--sp-5);
  border-top: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.blog-card__author {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.blog-card__avatar {
  width: 28px; height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  object-fit: cover;
}
.blog-card__read-more {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}
.blog-card__read-more:hover { color: var(--color-primary-dark); }

/* =============================================================
   11. FORMS
   ============================================================= */
.form-group { margin-bottom: var(--sp-5); }
.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--sp-2);
}
.form-label .required { color: var(--color-error); margin-left: 2px; }

.form-control {
  display: block;
  width: 100%;
  padding: 0.75em 1em;
  font-size: var(--text-base);
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
  appearance: none;
  -webkit-appearance: none;
}
.form-control::placeholder { color: var(--color-text-muted); }
.form-control:hover { border-color: var(--color-primary-light); }
.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}
.form-control.error { border-color: var(--color-error); }

.form-hint {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.form-error {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--text-xs);
  color: var(--color-error);
}

.form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A4F58' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75em center; padding-right: 2.5em; }

.form-radio-group, .form-check-group {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
}
.form-radio, .form-check {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  font-size: var(--text-base);
}
.form-radio input, .form-check input { accent-color: var(--color-primary); width: 18px; height: 18px; cursor: pointer; }

/* Loan amount slider */
.range-wrap { position: relative; padding-bottom: var(--sp-4); }
.form-range {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(to right, var(--color-primary) 0%, var(--color-primary) var(--range-pct, 50%), var(--color-border) var(--range-pct, 50%), var(--color-border) 100%);
  border-radius: var(--radius-full);
  outline: none;
  cursor: pointer;
}
.form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid #fff;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.range-labels { display: flex; justify-content: space-between; margin-top: var(--sp-2); font-size: var(--text-xs); color: var(--color-text-muted); }

/* Form card (on hero, apply page) */
.form-card {
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  padding: var(--sp-8);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--color-border-light);
}
.form-card h2 { font-size: var(--text-2xl); margin-bottom: var(--sp-6); }

/* Native hero form card */
.form-card__header { margin-bottom: var(--sp-6); }
.form-card__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--color-text); line-height: 1.2; margin-bottom: 4px; }
.form-card__sub { font-size: var(--text-sm); color: var(--color-text-secondary); }
.hero-form .form-group { margin-bottom: var(--sp-4); }
.hero-form label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--color-text); margin-bottom: var(--sp-2); }
.btn--full { width: 100%; justify-content: center; margin-top: var(--sp-2); }
.form-card__note { font-size: 0.72rem; color: var(--color-text-muted); text-align: center; margin-top: var(--sp-3); }

/* Progress steps */
.form-progress {
  display: flex;
  align-items: center;
  margin-bottom: var(--sp-8);
  counter-reset: step;
}
.form-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  flex: 1;
  position: relative;
}
.form-step::before {
  counter-increment: step;
  content: counter(step);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  display: flex; align-items: center; justify-content: center;
}
.form-step.active::before { background: var(--color-primary); color: #fff; }
.form-step.done::before { background: var(--color-success); color: #fff; content: '✓'; }
.form-step__label { font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; }
.form-step.active .form-step__label { color: var(--color-primary); font-weight: var(--weight-semibold); }

/* =============================================================
   12. LOAN CALCULATOR
   ============================================================= */
.calculator {
  background: var(--color-surface);
  border-radius: var(--radius-2xl);
  padding: var(--sp-8);
  border: 1px solid var(--color-border-light);
}
.calculator h2 { margin-bottom: var(--sp-8); }

.calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: start;
}
@media (max-width: 700px) { .calc-grid { grid-template-columns: 1fr; } }

.calc-inputs { display: flex; flex-direction: column; gap: var(--sp-6); }

.calc-result-panel {
  background: var(--clr-teal-900);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: var(--sp-8);
  position: sticky;
  top: calc(68px + var(--sp-6));
}
.calc-result-panel h3 { color: #fff; font-size: var(--text-xl); margin-bottom: var(--sp-6); }

.calc-result-main {
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
  background: rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-5);
}
.calc-result-amount {
  font-family: var(--font-mono);
  font-size: var(--text-4xl);
  font-weight: var(--weight-extrabold);
  color: #fff;
  line-height: 1;
}
.calc-result-label {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.65);
  margin-top: var(--sp-2);
}

.calc-result-breakdown { display: flex; flex-direction: column; gap: var(--sp-3); }
.calc-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-size: var(--text-sm);
}
.calc-result-row:last-child { border-bottom: none; }
.calc-result-row .label { color: rgba(255,255,255,0.65); }
.calc-result-row .value {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  color: #fff;
}

/* Amortization toggle */
.calc-amortization {
  margin-top: var(--sp-6);
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur-slow) var(--ease-out);
}
.calc-amortization.open { max-height: 800px; }
.calc-amortization table { width: 100%; font-size: var(--text-xs); border-collapse: collapse; }
.calc-amortization th { padding: var(--sp-2) var(--sp-3); text-align: right; color: var(--color-text-muted); font-weight: var(--weight-semibold); border-bottom: 1px solid var(--color-border); }
.calc-amortization th:first-child { text-align: left; }
.calc-amortization td { padding: var(--sp-2) var(--sp-3); text-align: right; border-bottom: 1px solid var(--color-border-light); font-family: var(--font-mono); }
.calc-amortization td:first-child { text-align: left; font-family: var(--font-body); }

/* =============================================================
   13. RATING & REVIEW COMPONENTS
   ============================================================= */
.rating-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-8);
  align-items: center;
  padding: var(--sp-8);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-light);
}
@media (max-width: 600px) { .rating-summary { grid-template-columns: 1fr; text-align: center; } }

.rating-big {
  text-align: center;
  padding-right: var(--sp-8);
  border-right: 1px solid var(--color-border);
}
@media (max-width: 600px) { .rating-big { padding-right: 0; border-right: none; border-bottom: 1px solid var(--color-border); padding-bottom: var(--sp-6); } }
.rating-big__score {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: var(--weight-extrabold);
  color: var(--color-primary);
  line-height: 1;
}
.rating-big__max { font-size: var(--text-xl); color: var(--color-text-muted); }
.rating-big__label { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--sp-2); }

/* Stars */
.stars { display: inline-flex; gap: 2px; }
.star {
  font-size: 1.1em;
  color: var(--clr-oat-300);
}
.star.filled { color: #F5A623; }
.star.half   { background: linear-gradient(90deg, #F5A623 50%, var(--clr-oat-300) 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* Rating bars */
.rating-bars { display: flex; flex-direction: column; gap: var(--sp-3); }
.rating-bar-row {
  display: grid;
  grid-template-columns: 80px 1fr 36px;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--text-sm);
}
.rating-bar-label { color: var(--color-text-secondary); text-align: right; }
.rating-bar-track {
  height: 8px;
  background: var(--color-surface-2);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.rating-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  transition: width 1s var(--ease-out);
}
.rating-bar-pct { font-size: var(--text-xs); color: var(--color-text-muted); font-family: var(--font-mono); }

/* Editorial criteria rating */
.criteria-rating {
  padding: var(--sp-6);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-light);
}
.criteria-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--color-border-light);
}
.criteria-row:last-child { border-bottom: none; }
.criteria-name { font-weight: var(--weight-medium); }
.criteria-score {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.criteria-bar {
  width: 120px; height: 6px;
  background: var(--color-surface-2);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.criteria-bar-fill { height: 100%; background: var(--clr-sage-500); border-radius: var(--radius-full); }
.criteria-value { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-primary); font-family: var(--font-mono); min-width: 30px; text-align: right; }

/* =============================================================
   14. COMPARISON TABLE
   ============================================================= */
.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.compare-table thead { background: var(--clr-teal-900); color: #fff; }
.compare-table thead th { padding: var(--sp-4) var(--sp-5); text-align: left; font-weight: var(--weight-semibold); }
.compare-table thead th:first-child { border-radius: var(--radius-xl) 0 0 0; }
.compare-table thead th:last-child  { border-radius: 0 var(--radius-xl) 0 0; }

.compare-table tbody tr:nth-child(even) { background: var(--color-surface); }
.compare-table tbody tr:nth-child(odd)  { background: var(--color-bg); }
.compare-table tbody tr:hover           { background: var(--clr-teal-50); }
.compare-table tbody tr:last-child td:first-child { border-radius: 0 0 0 var(--radius-xl); }
.compare-table tbody tr:last-child td:last-child  { border-radius: 0 0 var(--radius-xl) 0; }

.compare-table td { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--color-border-light); }
.compare-table td:first-child { font-weight: var(--weight-semibold); color: var(--color-text); }
.compare-table tr:last-child td { border-bottom: none; }

.compare-check { color: var(--color-success); font-size: 1.1em; }
.compare-cross  { color: var(--color-error);   font-size: 1.1em; }

/* Comparison highlight */
.compare-table .highlight-col {
  background: var(--clr-teal-50) !important;
  border-left: 2px solid var(--color-primary);
  border-right: 2px solid var(--color-primary);
}
.compare-table thead .highlight-col { background: var(--clr-teal-700) !important; }

/* =============================================================
   15. FAQ ACCORDION
   ============================================================= */
.faq-list { display: flex; flex-direction: column; gap: var(--sp-3); }

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg);
  transition: box-shadow var(--dur-base);
}
.faq-item:hover { box-shadow: var(--shadow-sm); }
.faq-item.open  { box-shadow: var(--shadow-md); border-color: var(--color-primary); }

.faq-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  transition: color var(--dur-fast);
}
.faq-trigger:hover, .faq-item.open .faq-trigger { color: var(--color-primary); }

.faq-icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-base), transform var(--dur-base) var(--ease-out);
  font-size: 0.85em;
  color: var(--color-text-secondary);
}
.faq-item.open .faq-icon {
  background: var(--color-primary);
  color: #fff;
  transform: rotate(45deg);
}

.faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.faq-item.open .faq-body { grid-template-rows: 1fr; }
.faq-body-inner {
  overflow: hidden;
  padding: 0 var(--sp-6) 0;
  transition: padding var(--dur-slow) var(--ease-out);
}
.faq-item.open .faq-body-inner { padding: 0 var(--sp-6) var(--sp-5); }
.faq-body-inner p { color: var(--color-text-secondary); margin-bottom: var(--sp-3); font-size: var(--text-base); }
.faq-body-inner p:last-child { margin-bottom: 0; }

/* =============================================================
   16. PROCESS STEPS
   ============================================================= */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  position: relative;
}
.steps-grid::before {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(16.67% + var(--sp-6));
  right: calc(16.67% + var(--sp-6));
  height: 2px;
  background: var(--color-border);
  z-index: 0;
}
@media (max-width: 680px) {
  .steps-grid { grid-template-columns: 1fr; }
  .steps-grid::before { display: none; }
}

.step-card {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--sp-6) var(--sp-5);
}
.step-number {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--sp-5);
  box-shadow: var(--shadow-md);
}
.step-card h3 { font-size: var(--text-lg); margin-bottom: var(--sp-3); }
.step-card p  { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: 0; }

/* =============================================================
   17. CTA SECTIONS
   ============================================================= */
.cta-section {
  background: var(--clr-teal-900);
  color: #fff;
  padding-block: clamp(3.5rem, 8vw, 6rem);
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(62,168,200,0.15) 0%, transparent 60%);
}
.cta-section .container { position: relative; z-index: 1; }
.cta-section h2 { color: #fff; font-size: var(--text-3xl); margin-bottom: var(--sp-4); }
.cta-section p  { color: rgba(255,255,255,0.75); font-size: var(--text-lg); max-width: 56ch; margin-bottom: var(--sp-8); }
.cta-section .cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* Inline CTA banner */
.cta-banner {
  background: linear-gradient(135deg, var(--clr-teal-900), var(--clr-teal-700));
  border-radius: var(--radius-2xl);
  padding: var(--sp-8) var(--sp-10);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  flex-wrap: wrap;
}
.cta-banner__text h3 { color: #fff; font-size: var(--text-2xl); margin-bottom: var(--sp-2); }
.cta-banner__text p  { color: rgba(255,255,255,0.75); margin-bottom: 0; }

/* =============================================================
   18. ALTERNATIVES LIST (lender cards)
   ============================================================= */
.lender-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 680px) { .lender-grid { grid-template-columns: 1fr; } }

.lender-card {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  transition: box-shadow var(--dur-base), border-color var(--dur-base);
}
.lender-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border); }
.lender-card__logo {
  flex-shrink: 0;
  width: 48px; height: 48px;
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--weight-extrabold);
  font-size: var(--text-lg);
  color: var(--color-primary);
  font-family: var(--font-display);
}
.lender-card__info { flex: 1; min-width: 0; }
.lender-card__name { font-weight: var(--weight-semibold); margin-bottom: var(--sp-1); }
.lender-card__range { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--sp-2); }
.lender-card__tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.lender-tag {
  font-size: var(--text-xs);
  padding: 0.2em 0.65em;
  border-radius: var(--radius-full);
  background: var(--clr-sage-100);
  color: var(--clr-sage-700);
  font-weight: var(--weight-medium);
}

/* =============================================================
   19. SOCIAL SHARE
   ============================================================= */
.share-buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.share-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-secondary); }
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.45em 1em;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity var(--dur-fast), transform var(--dur-fast);
}
.share-btn:hover { opacity: 0.85; transform: translateY(-1px); }
.share-btn--twitter  { background: #1DA1F2; color: #fff; }
.share-btn--facebook { background: #1877F2; color: #fff; }
.share-btn--linkedin { background: #0A66C2; color: #fff; }
.share-btn--copy     { background: var(--color-surface-2); color: var(--color-text); }

/* =============================================================
   20. BADGES + TAGS
   ============================================================= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0.3em 0.8em;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
}
.badge--primary { background: var(--clr-teal-100); color: var(--clr-teal-800); }
.badge--sage    { background: var(--clr-sage-100); color: var(--clr-sage-700); }
.badge--amber   { background: var(--clr-amber-100); color: var(--clr-amber-700); }
.badge--success { background: #D4EDDA; color: var(--color-success); }
.badge--error   { background: #FAE0E0; color: var(--color-error); }
.badge--new     { background: var(--color-primary); color: #fff; }

/* =============================================================
   21. NOTICES + ALERTS
   ============================================================= */
.notice {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  border-left: 4px solid;
}
.notice--info    { background: var(--clr-teal-50);  border-color: var(--color-primary); }
.notice--success { background: #EDF7F1; border-color: var(--color-success); }
.notice--warning { background: var(--clr-amber-100); border-color: var(--color-warning); }
.notice--error   { background: #FEF0F0; border-color: var(--color-error); }
.notice__icon { flex-shrink: 0; font-size: 1.2em; margin-top: 1px; }
.notice__title { font-weight: var(--weight-semibold); margin-bottom: var(--sp-1); }
.notice p { margin-bottom: 0; }

/* APR disclosure box */
.apr-box {
  background: var(--clr-oat-50);
  border: 1px solid var(--clr-oat-200);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.apr-box strong { color: var(--color-text); }

/* =============================================================
   22. AUTHOR BIO
   ============================================================= */
.author-bio {
  display: flex;
  gap: var(--sp-5);
  padding: var(--sp-6);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-light);
  margin-block: var(--sp-10);
}
.author-avatar {
  flex-shrink: 0;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--color-surface-2);
  object-fit: cover;
}
.author-info h4 { font-size: var(--text-base); margin-bottom: var(--sp-1); }
.author-role { font-size: var(--text-sm); color: var(--color-primary); font-weight: var(--weight-medium); margin-bottom: var(--sp-2); }
.author-desc { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: 0; }

/* =============================================================
   23. BLOG POST — ARTICLE STYLES
   ============================================================= */
.article-body { max-width: var(--max-w-narrow); }
.article-body h2 {
  font-size: var(--text-2xl);
  margin-top: var(--sp-10);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--color-border-light);
}
.article-body h3 { font-size: var(--text-xl); margin-top: var(--sp-8); margin-bottom: var(--sp-4); }
.article-body h4 { font-size: var(--text-lg); margin-top: var(--sp-6); margin-bottom: var(--sp-3); }
.article-body p  { font-size: var(--text-md); line-height: var(--leading-relaxed); margin-bottom: var(--sp-5); color: var(--color-text-secondary); }
.article-body ul, .article-body ol { margin-block: var(--sp-5); padding-left: var(--sp-6); }
.article-body li { font-size: var(--text-md); line-height: var(--leading-normal); margin-bottom: var(--sp-2); color: var(--color-text-secondary); }
.article-body ul li { list-style: disc; }
.article-body ol li { list-style: decimal; }

/* Pull quote */
.pull-quote {
  border-left: 4px solid var(--color-primary);
  padding: var(--sp-5) var(--sp-6);
  margin-block: var(--sp-8);
  background: var(--clr-teal-50);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.pull-quote p {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-primary-dark);
  line-height: var(--leading-snug);
  margin-bottom: 0;
}

/* Callout box */
.callout {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--sp-6);
  margin-block: var(--sp-8);
}
.callout--teal  { background: var(--clr-teal-50);  border-color: var(--clr-teal-300); }
.callout--sage  { background: var(--clr-sage-50);  border-color: var(--clr-sage-300); }
.callout--amber { background: var(--clr-amber-100); border-color: var(--clr-amber-400); }
.callout--info  { background: var(--clr-teal-50); border-color: var(--clr-teal-300); }
.callout--compare {
  display: flex;
  gap: var(--sp-4);
  background: var(--clr-teal-50);
  border-color: var(--clr-teal-400);
  border-left: 4px solid var(--clr-teal-700);
  margin-block: var(--sp-8);
}
.callout--featured {
  background: var(--color-surface);
  border-color: var(--clr-teal-700);
  border-top: 3px solid var(--clr-teal-700);
}
.callout__icon  { font-size: 1.8em; flex-shrink: 0; margin-top: var(--sp-1); }
.callout__body  { flex: 1; }
.callout__title { font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--sp-3); color: var(--color-text); }
.callout__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); }
.callout h4 { margin-bottom: var(--sp-3); }
.callout p  { font-size: var(--text-base); color: var(--color-text-secondary); margin-bottom: var(--sp-2); }
.callout p:last-child { margin-bottom: 0; }

/* Checklist inside callouts */
.checklist { list-style: none; padding: 0; margin: var(--sp-3) 0; }
.checklist li { padding-left: 1.5rem; position: relative; margin-bottom: var(--sp-2); font-size: var(--text-sm); }
.checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--clr-teal-700); font-weight: 700; }
.checklist--compact li { margin-bottom: var(--sp-1); }

/* Steps list for how-it-works sections */
.steps-list { list-style: none; padding: 0; margin: var(--sp-6) 0 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.steps-list__item { display: flex; gap: var(--sp-4); }
.steps-list__number {
  flex-shrink: 0;
  width: 2.25rem; height: 2.25rem;
  background: var(--clr-teal-700);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--text-sm);
  margin-top: 0.15rem;
}
.steps-list__content h3 { font-size: var(--text-base); font-weight: 700; margin: 0 0 var(--sp-2); }
.steps-list__content p  { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; line-height: 1.7; }

/* Key takeaway */
.key-takeaway {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--clr-teal-900);
  border-radius: var(--radius-xl);
  color: #fff;
  margin-block: var(--sp-8);
}
.key-takeaway__icon { font-size: 1.5em; flex-shrink: 0; }
.key-takeaway h4 { color: #fff; margin-bottom: var(--sp-2); }
.key-takeaway p  { color: rgba(255,255,255,0.8); margin-bottom: 0; font-size: var(--text-sm); }

/* Table in article */
.article-table-wrap { overflow-x: auto; margin-block: var(--sp-8); border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
.article-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.article-table th { background: var(--color-surface-2); padding: var(--sp-3) var(--sp-4); text-align: left; font-weight: var(--weight-semibold); border-bottom: 1px solid var(--color-border); }
.article-table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--color-border-light); }
.article-table tr:last-child td { border-bottom: none; }
.article-table tr:nth-child(even) td { background: var(--color-surface); }

/* Inline image */
.article-img {
  width: 100%;
  border-radius: var(--radius-xl);
  margin-block: var(--sp-8);
  aspect-ratio: 16/9;
  object-fit: cover;
}
.article-img-caption { text-align: center; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: calc(var(--sp-8) * -1 + var(--sp-2)); margin-bottom: var(--sp-8); }

/* Related posts */
.related-posts { margin-top: var(--sp-12); }
.related-posts h3 { font-size: var(--text-2xl); margin-bottom: var(--sp-6); }
.related-posts .grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .related-posts .grid { grid-template-columns: 1fr; } }

/* Table of contents */
.toc {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--sp-6);
  margin-bottom: var(--sp-8);
}
.toc h4 { font-size: var(--text-base); margin-bottom: var(--sp-4); }
.toc ol { padding-left: var(--sp-5); margin: 0; }
.toc li { margin-bottom: var(--sp-2); }
.toc a  { font-size: var(--text-sm); color: var(--color-text-secondary); }
.toc a:hover { color: var(--color-primary); }

/* =============================================================
   24. FOOTER
   ============================================================= */
.site-footer {
  background: var(--clr-teal-900);
  color: rgba(255,255,255,0.8);
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-8);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-6);
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand .footer-logo {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  color: #fff;
  margin-bottom: var(--sp-4);
  display: block;
  text-decoration: none;
}
.footer-brand .footer-logo span { color: var(--clr-teal-300); }
.footer-brand p { font-size: var(--text-sm); line-height: var(--leading-normal); margin-bottom: var(--sp-3); }
.footer-brand a { color: rgba(255,255,255,0.7); text-decoration: none; }
.footer-brand a:hover { color: #fff; }
.footer-tagline { color: rgba(255,255,255,0.6); font-style: italic; }

.footer-col h3 {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  margin-bottom: var(--sp-5);
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-col a { font-size: var(--text-sm); color: rgba(255,255,255,0.65); text-decoration: none; transition: color var(--dur-fast); }
.footer-col a:hover { color: #fff; }

/* Disclosure */
.footer-disclosure {
  padding-top: var(--sp-8);
  border-top: 1px solid rgba(255,255,255,0.1);
}
.footer-disclosure p {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.4);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--sp-3);
  max-width: none;
}
.footer-disclosure strong { color: rgba(255,255,255,0.6); }
.footer-copyright {
  margin-top: var(--sp-6);
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.3);
}

/* =============================================================
   25. APR COMPARISON (right/wrong table)
   ============================================================= */
.apr-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-block: var(--sp-8);
}
@media (max-width: 600px) { .apr-compare { grid-template-columns: 1fr; } }

.apr-compare-col {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.apr-compare-col__header {
  padding: var(--sp-4) var(--sp-6);
  font-weight: var(--weight-semibold);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.apr-compare-col--good .apr-compare-col__header { background: #EDF7F1; color: var(--color-success); }
.apr-compare-col--bad  .apr-compare-col__header { background: #FEF0F0; color: var(--color-error); }
.apr-compare-col__body { padding: var(--sp-5) var(--sp-6); font-size: var(--text-sm); }
.apr-compare-col__body li { margin-bottom: var(--sp-3); display: flex; gap: var(--sp-2); }
.apr-compare-col__body li::before { flex-shrink: 0; }
.apr-compare-col--good .apr-compare-col__body li::before { content: '✓'; color: var(--color-success); font-weight: bold; }
.apr-compare-col--bad  .apr-compare-col__body li::before { content: '✗'; color: var(--color-error); font-weight: bold; }

/* =============================================================
   26. INDEX NOW + MISC UTILITIES
   ============================================================= */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.hidden   { display: none !important; }
.invisible { visibility: hidden; }

.divider {
  border: none;
  border-top: 1px solid var(--color-border-light);
  margin-block: var(--sp-8);
}
.rounded { border-radius: var(--radius-xl); }
.overflow-hidden { overflow: hidden; }

/* Aspect ratio boxes */
.aspect-hero { aspect-ratio: 16/9; }
.aspect-wide  { aspect-ratio: 21/9; }
.aspect-card  { aspect-ratio: 3/2; }
.aspect-square{ aspect-ratio: 1/1; }
.img-cover { width: 100%; height: 100%; object-fit: cover; }
.img-rounded { border-radius: var(--radius-xl); }

/* Sticky sidebar layout */
.sidebar-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--sp-6);
  align-items: start;
}
@media (max-width: 900px) { .sidebar-layout { grid-template-columns: 1fr; } }
.sidebar-sticky { position: sticky; top: calc(68px + var(--sp-6)); }

/* Reading progress bar */
.reading-progress {
  position: fixed;
  top: 68px;
  left: 0;
  height: 3px;
  background: var(--color-accent);
  z-index: calc(var(--z-sticky) + 1);
  transition: width 0.1s linear;
  width: 0%;
}

/* Smooth reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* =============================================================
   28. FAQ PAGE — FULL STYLES
   ============================================================= */

/* Intro prose */
.prose-block--intro {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--sp-6);
}
.prose-block--intro a { color: var(--color-primary); }
.prose-block--intro a:hover { color: var(--color-primary-dark); }

/* Jump nav pills */
.faq-jumps {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
  background: var(--clr-teal-50);
  border-radius: var(--radius-xl);
  border: 1px solid var(--clr-teal-100);
}
.faq-jumps__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  white-space: nowrap;
  padding-top: 0.4em;
  min-width: 4.5rem;
}
.faq-jumps__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.faq-jump-link {
  display: inline-flex;
  align-items: center;
  padding: 0.38em 0.85em;
  background: var(--color-bg);
  border: 1px solid var(--clr-teal-200);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  text-decoration: none;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.faq-jump-link:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  transform: translateY(-1px);
}

/* FAQ groups */
.faq-group { margin-bottom: var(--sp-14); }
.faq-group:last-child { margin-bottom: 0; }

.faq-group__heading {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: 2px solid var(--color-border-light);
}
.faq-group__icon {
  flex-shrink: 0;
  width: 2.4rem; height: 2.4rem;
  background: var(--clr-teal-100);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary);
}
.faq-group__icon svg { width: 1.1rem; height: 1.1rem; }
.faq-group__number {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  line-height: 1;
}

/* Per-group icon accent colors */
#faq-loan-basics     .faq-group__icon { background: #E6F4F8; color: var(--clr-teal-700); }
#faq-eligibility     .faq-group__icon { background: #EFF6EF; color: #2d7d32; }
#faq-rates-costs     .faq-group__icon { background: #FEF6E8; color: #B45309; }
#faq-application     .faq-group__icon { background: #EEF2FF; color: #4338CA; }
#faq-repayment       .faq-group__icon { background: #FDF1F8; color: #9D174D; }
#faq-vola-finance    .faq-group__icon { background: #E6F4F8; color: #21708A; }

/* Enhanced FAQ item borders */
.faq-item {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg);
  transition: box-shadow var(--dur-base), border-color var(--dur-base);
}
.faq-item:hover { box-shadow: var(--shadow-sm); border-color: var(--clr-teal-200); }
.faq-item.open {
  box-shadow: 0 4px 20px rgba(33,112,138,.1);
  border-color: var(--color-primary);
  border-left-width: 3px;
}

/* Enhanced icon — use a real +/× instead of empty span */
.faq-icon { position: relative; }
.faq-icon::before {
  content: '+';
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 1;
}
.faq-item.open .faq-icon::before { content: '×'; font-weight: 400; }

/* Body inner links */
.faq-body-inner a { color: var(--color-primary); text-decoration: underline; }
.faq-body-inner a:hover { color: var(--color-primary-dark); }

/* Support callout at bottom of FAQ */
.faq-support {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  background: var(--clr-teal-50);
  border: 1px solid var(--clr-teal-100);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  margin-top: var(--sp-14);
}
@media (max-width: 680px) { .faq-support { grid-template-columns: 1fr; } }
.faq-support__img {
  width: 100%; height: 100%;
  min-height: 260px;
  object-fit: cover;
  display: block;
}
.faq-support__content {
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.faq-support__content h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  margin-bottom: var(--sp-3);
}
.faq-support__content p { color: var(--color-text-secondary); margin-bottom: var(--sp-5); }

/* =============================================================
   29. HOMEPAGE SECTION ENHANCEMENTS
   ============================================================= */

/* Stat cards — teal accent top bar */
.stat-card {
  position: relative;
  text-align: center;
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-light);
  transition: box-shadow var(--dur-base), transform var(--dur-base);
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--clr-teal-400), var(--clr-teal-700));
}
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.stat-card__value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  color: var(--color-primary);
  line-height: 1.1;
}
.stat-card__label { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--sp-2); }

/* Loan cards — gradient icon area + hover polish */
.loan-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  padding: var(--sp-6);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base), border-color var(--dur-base);
  display: flex;
  flex-direction: column;
}
.loan-card:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
  border-color: var(--clr-teal-200);
}
.loan-card__icon {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--clr-teal-100) 0%, var(--clr-teal-50) 100%);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-5);
  border: 1px solid var(--clr-teal-100);
}
.loan-card__icon svg { width: 26px; height: 26px; color: var(--color-primary); }
.loan-card h3 { font-size: var(--text-xl); margin-bottom: var(--sp-3); }
.loan-card p  { color: var(--color-text-secondary); font-size: var(--text-sm); margin-bottom: 0; flex: 1; }

/* Trust card icon color variants */
.trust-card:nth-child(1) .trust-card__icon { background: #E6F4F8; color: #21708A; }
.trust-card:nth-child(2) .trust-card__icon { background: #FEF6E8; color: #B45309; }
.trust-card:nth-child(3) .trust-card__icon { background: #EFF6EF; color: #2d7d32; }
.trust-card:nth-child(4) .trust-card__icon { background: #EEF2FF; color: #4338CA; }

/* Blog card category color variants */
.blog-card__category[data-cat="Education"]    { background: #E6F4F8; color: var(--clr-teal-700); }
.blog-card__category[data-cat="Fair Credit"]  { background: #EFF6EF; color: #2d7d32; }
.blog-card__category[data-cat="Comparison"]   { background: #FEF6E8; color: #B45309; }
.blog-card__category[data-cat="Bad Credit"]   { background: #FDF1F8; color: #9D174D; }
.blog-card__category[data-cat="Emergency"]    { background: #FEF2F2; color: #991B1B; }

/* Step card enhanced */
.step-card {
  position: relative;
  z-index: 1;
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  text-align: center;
  padding: var(--sp-7) var(--sp-5) var(--sp-6);
  transition: box-shadow var(--dur-base), transform var(--dur-base);
}
.step-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.step-number {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--sp-5);
  box-shadow: 0 0 0 6px var(--clr-teal-50);
}

/* =============================================================
   30. HERO BRAND HEADLINE & EXTERNAL FORM
   ============================================================= */
/* External form card — let the third-party form own its own padding */
.form-card--external {
  padding: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  border: none;
  min-height: 420px;
  display: flex;
  flex-direction: column;
}
.form-card--external #_lg_form_ {
  flex: 1;
  width: 100%;
}

.hero-brand-headline {
  font-family: var(--font-display);
  font-size: clamp(3.8rem, 10vw, 6.8rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin: 0 0 var(--sp-4);
  /* bright amber → gold → warm white — maximum contrast on teal */
  background: linear-gradient(110deg, #FFD580 0%, #F5A534 30%, #E8822A 62%, #FF6B1A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* vivid glow lifts name off the hero image */
  filter:
    drop-shadow(0 0 28px rgba(255,165,40,0.55))
    drop-shadow(0 2px 6px rgba(180,70,0,0.40));
}

/* =============================================================
   27. MINI CALCULATOR
   ============================================================= */
.mini-calc-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  background: var(--clr-oat-50);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-2xl);
  padding: var(--sp-8);
  max-width: 820px;
  margin: 0 auto;
}
@media (max-width: 680px) {
  .mini-calc-wrap { grid-template-columns: 1fr; padding: var(--sp-5); gap: var(--sp-5); }
}
.mini-calc-field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.mini-calc-field:last-child { margin-bottom: 0; }
.mini-calc-field > label,
.mini-calc-field-header label { font-size: var(--text-xs); font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .08em; }
.mini-calc-field-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-1); }
.mini-calc-val { font-size: var(--text-xl); font-weight: 800; color: var(--clr-teal-700); font-family: var(--font-mono); }
.range-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 999px;
  background: var(--clr-teal-200); outline: none; cursor: pointer;
}
.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px;
  border-radius: 50%; background: var(--clr-teal-600);
  cursor: pointer; border: 3px solid #fff;
  box-shadow: 0 1px 6px rgba(33,112,138,0.35);
}
.range-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--clr-teal-600); cursor: pointer;
  border: 3px solid #fff; box-shadow: 0 1px 6px rgba(33,112,138,0.35);
}
.range-limits { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: 0.2rem; }
.term-buttons { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.term-btn {
  padding: 0.375rem 0.9rem; border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: 600;
  cursor: pointer; transition: all 0.15s;
}
.term-btn:hover { border-color: var(--clr-teal-500); color: var(--clr-teal-600); background: var(--clr-teal-50); }
.term-btn--active { background: var(--clr-teal-600); border-color: var(--clr-teal-600); color: #fff; }
.apr-info { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.apr-value { font-size: var(--text-2xl); font-weight: 800; color: #E8822A; font-family: var(--font-mono); }
.apr-note { font-size: var(--text-xs); color: var(--color-text-secondary); max-width: 24ch; line-height: 1.4; }
.mini-calc-results { display: flex; flex-direction: column; }
.calc-monthly-wrap {
  background: linear-gradient(135deg, var(--clr-teal-800, #164f64), var(--clr-teal-600, #2496b5));
  border-radius: var(--radius-xl); padding: var(--sp-6); text-align: center;
  margin-bottom: var(--sp-4); color: #fff;
}
.calc-monthly-label { display: block; font-size: var(--text-xs); font-weight: 700; opacity: .75; text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--sp-2); }
.calc-monthly-value { display: block; font-size: clamp(2.8rem, 7vw, 3.8rem); font-weight: 900; font-family: var(--font-mono); line-height: 1; }
.calc-breakdown { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.calc-breakdown-item { flex: 1; background: var(--color-surface); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-4); text-align: center; }
.breakdown-label { display: block; font-size: var(--text-xs); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 0.2rem; }
.breakdown-value { display: block; font-size: var(--text-lg); font-weight: 700; color: var(--color-text-primary, #1e293b); font-family: var(--font-mono); }
.calc-disclaimer { font-size: var(--text-xs); color: var(--color-text-secondary); margin-bottom: var(--sp-4); line-height: 1.6; }
.btn--full { width: 100%; text-align: center; display: block; }
.calc-full-link { display: block; text-align: center; font-size: var(--text-sm); color: var(--clr-teal-600); text-decoration: none; margin-top: var(--sp-2); }
.calc-full-link:hover { text-decoration: underline; }

/* =============================================================
   28. US STATES TILE MAP
   ============================================================= */
.us-tilemap {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 0.28rem;
  max-width: 660px;
  margin: 0 auto 1.5rem;
  aspect-ratio: 11 / 8;
}
.state-tile {
  display: flex; align-items: center; justify-content: center;
  border-radius: 5px;
  font-size: clamp(0.52rem, 1.15vw, 0.72rem);
  font-weight: 700; letter-spacing: .02em;
  transition: transform .15s, box-shadow .15s;
  cursor: default; user-select: none;
  min-height: 0;
}
.state-tile:hover { transform: scale(1.18); z-index: 2; }
.state-tile--available { background: var(--clr-teal-500); color: #fff; }
.state-tile--available:hover { background: var(--clr-teal-600); box-shadow: 0 2px 10px rgba(33,112,138,0.45); }
.state-tile--unavailable { background: #e2e8f0; color: #94a3b8; }
.tilemap-legend { display: flex; justify-content: center; gap: 2rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.tilemap-legend-item { display: flex; align-items: center; gap: 0.5rem; font-size: var(--text-sm); color: var(--color-text-secondary); }
.legend-dot { width: 13px; height: 13px; border-radius: 3px; flex-shrink: 0; }
.legend-dot--available { background: var(--clr-teal-500); }
.legend-dot--unavailable { background: #e2e8f0; border: 1px solid #cbd5e1; }
.tilemap-note { text-align: center; font-size: var(--text-xs); color: var(--color-text-secondary); }
.tilemap-note a { color: var(--clr-teal-600); }
@media (max-width: 500px) {
  .us-tilemap { gap: 0.15rem; }
  .state-tile { font-size: 0.58rem; border-radius: 3px; }
}

/* =============================================================
   29. HERO RATE CARD (index.html hero right column)
   ============================================================= */
.hero-rate-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-2xl);
  padding: var(--sp-7);
  backdrop-filter: blur(14px);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  align-self: start;
}
.hero-rate-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.8vw, 1.8rem);
  font-weight: 700;
  margin: 0.2rem 0 0;
  color: #fff;
  line-height: 1.1;
}
.hero-rate-card__rates {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: rgba(255,255,255,0.1);
  border-radius: var(--radius-xl);
  padding: var(--sp-4);
}
.hero-rate-card__rate-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  text-align: center;
}
.hero-rate-card__rate-value {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 700;
  color: #FFD580;
  line-height: 1;
}
.hero-rate-card__rate-label {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.60);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
  margin-top: 2px;
}
.hero-rate-card__divider {
  width: 1px;
  height: 2.2rem;
  background: rgba(255,255,255,0.2);
  flex-shrink: 0;
}
.hero-rate-card__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  color: rgba(255,255,255,0.85);
  font-size: 0.9rem;
}
.hero-rate-card__features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* =============================================================
   30. APPLY PAGE — EXTERNAL FORM WRAPPER
   ============================================================= */
.apply-form-wrap {
  max-width: 840px;
  margin: 0 auto;
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-2xl);
  padding: var(--sp-8) var(--sp-6);
  box-shadow: var(--shadow-md);
  min-height: 480px;
}
@media (max-width: 640px) {
  .apply-form-wrap { padding: var(--sp-5) var(--sp-4); border-radius: var(--radius-xl); }
  .hero-rate-card { padding: var(--sp-5); }
}

/* =============================================================
   31. PRINT
   ============================================================= */
@media print {
  .site-header, .site-footer, .cta-section, .share-buttons,
  .nav-mobile-toggle, .reading-progress { display: none !important; }
  body { font-size: 12pt; color: #000; background: #fff; }
  a[href]::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}

/* =============================================================
   32. TRUST BAR
   ============================================================= */
.trust-bar {
  background: var(--clr-oat-50);
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
  padding: var(--sp-3) 0;
}
.trust-bar__list {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
}
.trust-bar__item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
  padding: 0.35rem var(--sp-4);
  white-space: nowrap;
}
.trust-bar__item svg {
  color: var(--color-primary);
  flex-shrink: 0;
}
.trust-bar__divider {
  width: 1px;
  height: 1.25rem;
  background: var(--color-border-light);
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .trust-bar__item { padding: 0.3rem var(--sp-3); font-size: 0.68rem; }
  .trust-bar__divider { display: none; }
}

/* =============================================================
   33. LOAN AMOUNT CARDS
   ============================================================= */
.loan-amounts-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
@media (max-width: 900px) {
  .loan-amounts-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .loan-amounts-grid { grid-template-columns: repeat(2, 1fr); }
}
.loan-amount-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  background: var(--color-bg);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
  gap: var(--sp-2);
}
.loan-amount-card:hover,
.loan-amount-card:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 4px 18px rgba(33,112,138,0.13);
  transform: translateY(-2px);
  text-decoration: none;
}
.loan-amount-card--featured {
  border-color: var(--color-primary);
  background: var(--clr-teal-50);
}
.loan-amount-card__badge {
  position: absolute;
  top: -0.6rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  white-space: nowrap;
}
.loan-amount-card__range {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 700;
  color: var(--color-primary);
}
.loan-amount-card__label {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-heading);
}
.loan-amount-card__note {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}
.loan-amounts-note {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: 0;
}

/* =============================================================
   34. TESTIMONIALS
   ============================================================= */
.testimonial-aggregate {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  background: var(--clr-oat-50);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  padding: var(--sp-5) var(--sp-7);
  margin-bottom: var(--sp-10);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.testimonial-aggregate__score {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}
.testimonial-aggregate__info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.testimonial-aggregate__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
}
.testimonial-stars {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
@media (max-width: 860px) {
  .testimonial-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}
.testimonial-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-2xl);
  padding: var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  box-shadow: var(--shadow-sm);
}
.testimonial-text {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.7;
  margin: 0;
  font-style: italic;
  flex: 1;
}
.testimonial-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: auto;
}
.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--clr-teal-600);
  color: #fff;
  font-weight: 700;
  font-size: var(--text-base);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.testimonial-name {
  font-weight: 600;
  font-size: var(--text-sm);
  margin: 0;
  color: var(--color-heading);
}
.testimonial-detail {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin: 0;
}

/* =============================================================
   35. FAQ ACCORDION
   ============================================================= */
.faq-list {
  max-width: 820px;
  margin: 0 auto var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.faq-item {
  border-bottom: 1px solid var(--color-border-light);
}
.faq-item:first-child {
  border-top: 1px solid var(--color-border-light);
}
.faq-question {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-heading);
  line-height: 1.4;
  transition: color 0.15s;
}
.faq-question:hover {
  color: var(--color-primary);
}
.faq-icon {
  flex-shrink: 0;
  transition: transform 0.22s ease;
  color: var(--color-primary);
}
.faq-item--open .faq-icon {
  transform: rotate(180deg);
}
.faq-answer {
  padding-bottom: var(--sp-5);
}
.faq-answer p {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.75;
  margin: 0;
}
.faq-answer p + p {
  margin-top: var(--sp-3);
}
.faq-answer a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* =============================================================
   36. BACK TO TOP BUTTON
   ============================================================= */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: calc(var(--z-sticky) + 10);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 2rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(33,112,138,0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s ease, visibility 0.25s ease,
              transform 0.25s ease, background 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--clr-teal-700, #1a5a70);
  box-shadow: 0 6px 24px rgba(33,112,138,0.45);
  transform: translateY(-2px);
}
.back-to-top:active {
  transform: translateY(0);
}
.back-to-top svg {
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .back-to-top {
    bottom: 1.25rem;
    right: 1rem;
    padding: 0.55rem 0.9rem;
    font-size: 0.78rem;
  }
}

/* =============================================================
   37. MOBILE RESPONSIVE POLISH
   ============================================================= */

/* Hero: add fallback gradient for mobile (image hidden ≤860px) */
@media (max-width: 860px) {
  .hero--person-right {
    background: linear-gradient(145deg, #0a2336 0%, #144f6a 40%, #1e7a9a 75%, #1a6380 100%);
  }
}

/* Hero content on small screens */
@media (max-width: 640px) {
  .hero { padding-block: clamp(2.5rem, 8vw, 4rem); }
  .hero-brand-headline { font-size: clamp(1.6rem, 5vw, 2.2rem) !important; }
  .hero h1 { font-size: clamp(1.6rem, 6vw, 2.2rem) !important; }
  .hero-lead { font-size: var(--text-base) !important; }
  .hero-actions { flex-direction: column; gap: var(--sp-3); }
  .hero-actions .btn { width: 100%; justify-content: center; text-align: center; }
  .hero-stats { gap: var(--sp-4); margin-top: var(--sp-6); padding-top: var(--sp-6); }
  .hero-stat__value { font-size: var(--text-2xl); }
}

/* Rate card on mobile */
@media (max-width: 640px) {
  .hero-rate-card {
    padding: var(--sp-5) var(--sp-4);
    border-radius: var(--radius-xl);
  }
  .hero-rate-card__rates { gap: var(--sp-3); }
  .hero-rate-card__rate-value { font-size: 1.5rem; }
}

/* Stat cards grid on mobile */
@media (max-width: 480px) {
  .stat-grid, .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Trust bar: single-line scroll on very small screens */
@media (max-width: 400px) {
  .trust-bar__list { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding: 0 var(--sp-4); }
  .trust-bar__list::-webkit-scrollbar { display: none; }
  .trust-bar__item { scroll-snap-align: start; }
}

/* Loan amount grid: featured card spans full width on 2-col */
@media (max-width: 560px) {
  .loan-amount-card--featured { grid-column: span 2; }
}

/* CTA section on mobile */
@media (max-width: 640px) {
  .cta-actions { flex-direction: column; gap: var(--sp-3); }
  .cta-actions .btn { width: 100%; text-align: center; }
}

/* Testimonials: 2-col on tablet */
@media (min-width: 600px) and (max-width: 860px) {
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
}

/* Section padding compression on mobile */
@media (max-width: 640px) {
  section, .trust-bar, .breadcrumb { scroll-margin-top: 60px; }
}

/* =============================================================
   ENHANCEMENTS v30 — Sticky CTA · Dark Mode · Counter · Stars
   ============================================================= */

/* ---------- 1. Dark / Light Mode Toggle ---------- */
.theme-toggle {
  background: none;
  border: 1.5px solid rgba(255,255,255,0.25);
  color: inherit;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  flex-shrink: 0;
}
.site-header .theme-toggle {
  border-color: var(--color-border);
  color: var(--color-text);
}
.theme-toggle:hover { background: var(--color-surface-2); border-color: var(--color-primary); }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun  { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

/* ---------- 2. Sticky CTA Bar ---------- */
.sticky-cta {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: var(--z-sticky);
  background: var(--clr-teal-900);
  border-top: 2px solid var(--clr-teal-600);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transform: translateY(110%);
  transition: transform 0.35s var(--ease-out);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.25);
}
.sticky-cta.visible { transform: translateY(0); }
.sticky-cta__text {
  color: rgba(255,255,255,0.9);
  font-size: var(--text-sm);
  line-height: 1.35;
  flex: 1;
  min-width: 0;
}
.sticky-cta__text strong { color: #fff; display: block; font-size: var(--text-base); }
.sticky-cta__actions { display: flex; gap: 0.5rem; align-items: center; flex-shrink: 0; }
.sticky-cta__close {
  background: none; border: none;
  color: rgba(255,255,255,0.5);
  font-size: 1.25rem; line-height: 1;
  cursor: pointer; padding: 0.25rem;
  transition: color var(--dur-fast);
}
.sticky-cta__close:hover { color: #fff; }
@media (max-width: 480px) {
  .sticky-cta { flex-wrap: wrap; }
  .sticky-cta__text { flex-basis: 100%; }
  .sticky-cta__actions { width: 100%; }
  .sticky-cta__actions .btn { flex: 1; text-align: center; }
}

/* ---------- 3. Social Proof / Hero Stars ---------- */
.hero-social-proof {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.hero-stars {
  display: flex;
  gap: 2px;
  align-items: center;
}
.hero-stars svg { width: 16px; height: 16px; }
.hero-social-proof__text {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.8);
}
.hero-social-proof__text strong { color: #fff; }

/* ---------- 4. Animated Counter ---------- */
.hero-stat__value[data-count] {
  transition: none;
}

/* ---------- 5. Trust Badge Section — enhanced ---------- */
.trust-badges-section {
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-light);
}
.trust-badges-section .trust-badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--sp-4);
}
.trust-badge-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1rem;
  text-align: center;
  transition: box-shadow var(--dur-base), transform var(--dur-base);
}
.trust-badge-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.trust-badge-card .badge-icon {
  width: 48px; height: 48px;
  margin: 0 auto 0.75rem;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}
.trust-badge-card .badge-icon--teal { background: var(--clr-teal-100); }
.trust-badge-card .badge-icon--sage { background: var(--clr-sage-100); }
.trust-badge-card .badge-icon--amber { background: var(--clr-amber-100); }
.trust-badge-card .badge-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: 0.25rem;
}
.trust-badge-card .badge-sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .trust-badge-card .badge-icon--teal { background: rgba(33,112,138,0.2); }
  :root:not([data-theme="light"]) .trust-badge-card .badge-icon--sage { background: rgba(92,131,103,0.2); }
  :root:not([data-theme="light"]) .trust-badge-card .badge-icon--amber { background: rgba(232,130,42,0.18); }
}
[data-theme="dark"] .trust-badge-card .badge-icon--teal { background: rgba(33,112,138,0.2); }
[data-theme="dark"] .trust-badge-card .badge-icon--sage { background: rgba(92,131,103,0.2); }
[data-theme="dark"] .trust-badge-card .badge-icon--amber { background: rgba(232,130,42,0.18); }

/* ---------- 6. Apply Progress Bar ---------- */
.apply-progress {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-light);
  padding: 1rem 0;
}
.apply-progress__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-inline: var(--pad-x);
  display: flex;
  align-items: center;
  gap: 0;
}
.apply-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
  position: relative;
  text-align: center;
}
.apply-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 14px;
  left: 60%;
  right: -40%;
  height: 2px;
  background: var(--color-border);
}
.apply-step.done:not(:last-child)::after,
.apply-step.active:not(:last-child)::after {
  background: var(--clr-teal-500);
}
.apply-step__circle {
  width: 28px; height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  color: var(--color-text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
  font-weight: var(--weight-bold);
  z-index: 1;
  transition: background var(--dur-base), color var(--dur-base);
}
.apply-step.done .apply-step__circle {
  background: var(--clr-teal-600);
  color: #fff;
}
.apply-step.active .apply-step__circle {
  background: var(--clr-amber-500);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(232,130,42,0.2);
}
.apply-step__label {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.apply-step.active .apply-step__label { color: var(--clr-amber-600); font-weight: var(--weight-bold); }
.apply-step.done .apply-step__label { color: var(--clr-teal-600); }
@media (max-width: 560px) {
  .apply-step__label { display: none; }
  .apply-step__circle { width: 24px; height: 24px; font-size: 0.6rem; }
}

/* ---------- 7. Author Bio — enhanced full card ---------- */
.author-bio-card {
  display: flex;
  gap: var(--sp-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-left: 4px solid var(--clr-teal-500);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  margin-top: var(--sp-8);
}
.author-bio-card__avatar {
  flex-shrink: 0;
  width: 64px; height: 64px;
  border-radius: var(--radius-full);
  background: var(--clr-teal-100);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  font-weight: var(--weight-bold);
  color: var(--clr-teal-800);
  overflow: hidden;
}
.author-bio-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-bio-card__body {}
.author-bio-card__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
}
.author-bio-card__name {
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  color: var(--color-text);
  margin-bottom: 0.15rem;
}
.author-bio-card__role {
  font-size: var(--text-sm);
  color: var(--clr-teal-600);
  margin-bottom: 0.5rem;
}
.author-bio-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}
@media (max-width: 560px) {
  .author-bio-card { flex-direction: column; }
}

/* ---------- 8. Tawk.to Live Chat custom pulse ---------- */
/* Tawk widget is injected by their script; this just ensures z-index */
#tawkchat-status-circle, #tawk-bubble { z-index: calc(var(--z-modal) - 10) !important; }

/* Related articles links */
.related-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  color: var(--color-link);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.related-link:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transform: translateX(3px);
  color: var(--color-link-hover);
}