/* ============================================================
   Acorn Finance — WordPress Plugin CSS
   tokens.css + claude.css concatenated (no @font-face / @import).
   Generated: 2026-06-16
   Font families (Sohne, Open Sans, Geist Mono) are provisioned
   by GeneratePress Premium — no font loading needed here.
   Asset URLs rewritten to /wp-content/uploads/assets/ by scripts/build-css.js.
   ============================================================ */

/* =========================================================
   Acorn Finance V2 — Design Tokens (generated from tokens.json)
   Single source of truth for color, type, spacing, radii,
   shadows, motion, layout. Import this first.
   ========================================================= */

/* -----------------------------  FONTS  -----------------------------
   Sohne (display) — headlines, display, UI labels
   Open Sans (ui)  — long-form body, default UI
   Geist Mono (mono) — tabular numerals in Payment Amount Widgets only

   ⚠️  Font loading (@font-face / @import) is intentionally absent here.
       In WordPress the GeneratePress Premium theme provisions all three
       families. For Claude Design previews, load styles/preview-fonts.css
       BEFORE this file.
*/

:root {
  /* ======================  COLOR — RAW PALETTE  ================== */
  /* Blues */
  --af-ink-black:         #03171A;
  --af-sapphire-sky:      #016DE1;
  --af-link-blue:         #0B81FE;
  --af-bright-blue:       #0092FF;
  --af-alice-blue:        #EBF8FF;
  --af-icy-blue:          #B7E7FF;
  --af-ice-tint:          #D8F2FF;
  --af-deep-space-blue:   #00273E;
  --af-ocean:             #003452;
  --af-white:             #FFFFFF;

  /* Greens */
  --af-lime-green:        #2FC600;
  --af-lime-green-deep:   #018749;
  --af-lime-bright:       #9BEC00;
  --af-lime-pale:         #E9F7D6;

  /* Neutrals */
  --af-gray-100:          #F9FAFB;
  --af-gray-200:          #F3F4F6;
  --af-gray-300:          #ECEDF0;
  --af-gray-400:          #E5E7EB;
  --af-gray-500:          #D1D5DB;
  --af-gray-600:          #9CA3AF;
  --af-gray-700:          #6B7280;
  --af-gray-800:          #485169;
  --af-gray-900:          #242424;

  /* Status (raw) */
  --af-error:             #E23636;
  --af-warning:           #FFAC0A;
  --af-success:           #008024;
  --af-info:              var(--af-sapphire-sky);

  /* ======================  SEMANTIC — FG / BG / BORDER  ========== */
  --fg-1:                 var(--af-ink-black);       /* primary text */
  --fg-2:                 var(--af-gray-800);        /* secondary text */
  --fg-3:                 var(--af-gray-700);        /* placeholders, labels */
  --fg-muted:             var(--af-gray-600);        /* disabled, hints */
  --fg-link:              var(--af-sapphire-sky);
  --fg-link-hover:        var(--af-link-blue);
  --fg-on-dark:           var(--af-white);

  --bg-page:              var(--af-white);
  --bg-subtle:            var(--af-gray-100);
  --bg-tint:              var(--af-alice-blue);
  --bg-dark:              var(--af-deep-space-blue);

  --border-default:       var(--af-gray-400);
  --border-strong:        var(--af-gray-500);
  --border-focus:         var(--af-sapphire-sky);

  /* ======================  TYPOGRAPHY FAMILIES  ================== */
  --font-display:         "Sohne", sans-serif;
  --font-sans:            "Open Sans", sans-serif;
  --font-serif:           "Sohne", sans-serif; /* legacy alias — V2 retires Bitter */
  --font-mono:            "Geist Mono", monospace;

  /* ======================  TYPE SCALE  =========================== */
  --fs-h1:                72px;
  --fs-h2:                56px;
  --fs-h3:                48px;
  --fs-h4:                40px;
  --fs-h5:                32px;
  --fs-title-1:           24px;
  --fs-title-2:           20px;
  --fs-quote:             32px;
  --fs-body-1:            18px;
  --fs-body-2:            16px;
  --fs-body-3:            14px;
  --fs-body-4:            12px;
  --fs-button-1:          17px;
  --fs-button-2:          14px;
  --fs-overline:          14px;

  --lh-heading:           1.2;
  --lh-body:              1.4;
  --ls-tight:             -0.01em;
  --ls-overline:          3px;

  /* ======================  SPACING — 4px base  =================== */
  --space-2xs:            4px;
  --space-xs:             8px;
  --space-sm:             12px;
  --space-md:             16px;
  --space-lg:             20px;
  --space-xl:             24px;
  --space-2xl:            32px;
  --space-3xl:            40px;
  --space-4xl:            48px;
  --space-5xl:            60px;
  --space-6xl:            72px;
  --space-7xl:            80px;
  --space-8xl:            96px;
  --space-9xl:            120px;
  --space-10xl:           160px;

  /* ======================  RADII  ================================ */
  --radius-sm:            4px;
  --radius-md:            8px;
  --radius-lg:            12px;
  --radius-xl:            16px;
  --radius-pill:          999px;

  /* ======================  SHADOWS  ============================== */
  --shadow-0:             0 0 0 1px var(--border-default);
  --shadow-1:             0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.08);
  --shadow-2:             0 4px 12px rgba(0,0,0,0.08);
  --shadow-3:             0 8px 24px rgba(0,0,0,0.10);
  --shadow-focus-ring:    0 0 0 4px rgba(1,109,225,0.20);

  /* ======================  LAYOUT  =============================== */
  --container-desktop:    1200px;
  --container-desktop-min:1199px;
  --container-tablet:     720px;
  --gutter-desktop:       24px;
  --gutter-mobile:        16px;

  /* ======================  BREAKPOINTS  ========================== */
  --bp-sm:                480px;
  --bp-md:                600px;
  --bp-lg:                900px;
  --bp-xl:                1024px;
  --bp-2xl:               1280px;
  --bp-3xl:               1440px;

  /* ======================  MOTION  =============================== */
  --duration-instant:     0ms;
  --duration-fast:        140ms;
  --duration-default:     220ms;
  --duration-slow:        400ms;
  --duration-lazy:        700ms;

  --ease-standard:        cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out:             cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:          cubic-bezier(0.2, 0.8, 0.3, 1.2);
}

/* -----------------------------  RESET-ISH  ----------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body-1);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* -----------------------------  SEMANTIC ELEMENTS  --------------------- */
h1, .af-h1, h2, .af-h2, h3, .af-h3, h4, .af-h4, h5, .af-h5,
.af-title-1, .af-title-2, .af-blockquote {
  font-family: var(--font-display);
  line-height: var(--lh-heading);
  color: var(--fg-1);
  margin: 0;
  letter-spacing: var(--ls-tight);
}
h1, .af-h1 { font-size: var(--fs-h1); font-weight: 500; }
h2, .af-h2 { font-size: var(--fs-h2); font-weight: 500; }
h3, .af-h3 { font-size: var(--fs-h3); font-weight: 500; }
h4, .af-h4 { font-size: var(--fs-h4); font-weight: 500; }
h5, .af-h5 { font-size: var(--fs-h5); font-weight: 500; }
.af-title-1 { font-size: var(--fs-title-1); font-weight: 600; }
.af-title-2 { font-size: var(--fs-title-2); font-weight: 600; }
.af-blockquote { font-size: var(--fs-quote); font-weight: 300; letter-spacing: var(--ls-tight); }

p, .af-body  { font-size: var(--fs-body-1); line-height: var(--lh-body); margin: 0; }
.af-body-2   { font-size: var(--fs-body-2); line-height: var(--lh-body); }
.af-body-3   { font-size: var(--fs-body-3); line-height: var(--lh-body); }
.af-body-4   { font-size: var(--fs-body-4); line-height: var(--lh-body); }

.af-overline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--fg-1);
}

.af-num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

a, .af-link {
  color: var(--fg-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
/* Only restyle plain, unclassed anchors and the explicit .af-link helper.
   Classed components (CTAs, nav links, tiles) own their own hover styles
   so we don't override their color or add a global underline. */
a:not([class]):hover,
.af-link:hover { color: var(--fg-link-hover); }

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--af-gray-200);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}


/* ============================================================
   Acorn Finance — claude.css
   ============================================================
   Single source of truth for all component / page CSS.

   Load order in Claude Design preview files:
     1. styles/preview-fonts.css  ← preview-only, OMIT in WP
     2. styles/tokens.css         ← design tokens & CSS vars
     3. styles/claude.css         ← this file

   In WordPress the GeneratePress Premium plugin enqueues
   /wp-content/plugins/seo-site-plugin-af-claude-customizations/assets/css/claude.css
   which is tokens.css + this file concatenated (no font loading).

   ⚠️  DO NOT add @font-face or @import font rules here.
       Font loading lives exclusively in styles/preview-fonts.css.
   ============================================================ */


/* ============================================================
   Source: styles/global.css
   ============================================================ */

/* ============================================================
   Acorn Finance — Global styles
   ============================================================
   Loaded by every marketing page AFTER tokens.css and BEFORE the
   page-specific stylesheet. Contains only rules that are shared
   across all pages — anything page-specific belongs in
   header.css / landing.css / contractors.css.
   ============================================================ */

/* ---- BASELINE -------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--af-ink-black);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Marketing pages and the embedded Header preview live on the same
   neutral white surface; individual sections paint over this. */
body {
  background: var(--af-white);
}

/* Images default to block-level + responsive — kills the stray inline
   baseline gap and keeps imported assets contained inside their wrappers. */
img,
svg,
video {
  max-width: 100%;
  display: block;
}

/* Inputs/buttons inherit the page font instead of the UA default. */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* Accessible focus ring using the design-system token. Applied only on
   keyboard navigation so mouse users don't see double-outlines on
   buttons that already have a hover/pressed treatment. */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
  border-radius: var(--radius-sm);
}

/* NOTE — the heading-family override (h1/h2/.lp-h1/.co-hero-h1/etc → Söhne)
   lives in styles/headings.css. It must load AFTER the page-specific
   stylesheet so it wins same-specificity conflicts, so it is linked last
   in each page's <head>. */

/* ---- REDUCED-MOTION SAFETY NET ------------------------------------------
   Page-specific stylesheets already disable their own keyframe animations
   under prefers-reduced-motion; this is a final backstop that neutralises
   any animation/transition we forgot to gate. Use targeted overrides in
   the page CSS rather than relying on this catch-all.
   --------------------------------------------------------------------- */

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


/* ============================================================
   Source: styles/nav.css
   ============================================================ */

/* ============================================================
   Acorn Finance — Navigation styles
   ============================================================
   Two related but distinct navigation systems live here:

   1.  `.nav-*`  — used by the standalone hero preview pages
                   (Header.html / Header-print.html). Static, no
                   sticky behaviour, no mobile drawer.

   2.  `.lp-nav-*` — used by the React LandingNav fallback inside
                     the production marketing pages
                     (homepage.html / borrowers.html /
                     contractors.html). Sticky-top, with a
                     mobile burger + drawer.

   The production pages PRIMARILY render the <global-nav> web
   component whose styles ship inside dist/global-nav.js as
   shadow-DOM CSS — that's intentional encapsulation and lives
   with its component. The rules below cover only the non-shadow
   markup paths.

   Both systems share the same visual language (8px radii, Open
   Sans, Sapphire hover) but use different sizes (header: 16px /
   80px tall / 44px logo; landing: 15px / 80px tall / 36px logo)
   so they're kept as separate class scopes rather than merged.
   ============================================================ */

/* Reserve space for navbar */
global-nav:not(:defined) {
  display: block;
  height: 64px;
}

/* ---- 1. HERO-PREVIEW NAV (.nav-*) ----------------------------------- */

.nav {
  position: relative;
  z-index: 2;
  height: 80px;
  padding: 0 56px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 48px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--af-ink-black);
  /*backdrop-filter: blur(8px);*/
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.nav-logo { display: inline-flex; align-items: center; height: 100%; text-decoration: none; }
.nav-logo img { height: 44px; width: auto; display: block; }

.nav-links {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 6px;
  justify-content: center;
}
.nav-link {
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-sans);
  font-size: 16px; font-weight: 600;
  color: var(--af-ink-black);
  padding: 10px 14px;
  border-radius: 8px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background 140ms ease, color 140ms ease;
}
.nav-link:hover { background: var(--af-alice-blue); color: var(--af-sapphire-sky); }
.nav-link svg { transition: transform 140ms ease; }
.nav-link:hover svg { transform: translateY(1px); }

.nav-actions { display: flex; align-items: center; gap: 20px; }
.nav-signin {
  color: var(--af-ink-black);
  font-weight: 600; font-size: 16px;
  text-decoration: none;
  padding: 8px 4px;
  transition: color 140ms ease;
}
.nav-signin:hover { color: var(--af-sapphire-sky); }

/* Size override applied on top of the shared .btn / .btn-primary in
   header.css when the CTA appears in the nav. */
.nav-cta { font-size: 15px; padding: 12px 24px; }

/* ---- 2. LANDING NAV (.lp-nav-*) ------------------------------------- */

.lp-nav {
  height: 80px;
  padding: 0 56px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 48px;
  background: var(--af-white);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  position: sticky;
  top: 0;
  z-index: 50;
}
.lp-nav-logo { display: inline-flex; align-items: center; height: 100%; text-decoration: none; }
.lp-nav-logo img { height: 36px; width: auto; display: block; }
.lp-nav-links {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 6px; justify-content: center;
}
.lp-nav-link {
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-sans);
  font-size: 15px; font-weight: 600;
  color: var(--af-ink-black);
  padding: 10px 14px;
  border-radius: 8px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background 140ms ease, color 140ms ease;
}
.lp-nav-link:hover { background: var(--af-alice-blue); color: var(--af-sapphire-sky); }
.lp-nav-actions { display: flex; align-items: center; gap: 20px; }
.lp-nav-signin {
  color: var(--af-ink-black);
  font-weight: 600; font-size: 15px;
  text-decoration: none;
  transition: color 140ms ease;
}
.lp-nav-signin:hover { color: var(--af-sapphire-sky); }
.lp-nav-cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--af-sapphire-sky);
  color: var(--af-white);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  padding: 11px 22px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 6px 16px rgba(1, 109, 225, 0.25);
}
.lp-nav-cta:hover {
  background: var(--af-link-blue);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 8px 22px rgba(1, 109, 225, 0.35);
  transform: translateY(-1px);
}

/* Defaults outside the mobile breakpoint — burger hidden on desktop,
   .lp-nav stays a positioning context for the drawer when sticky. */
.lp-nav-burger { display: none; }
.lp-nav { position: relative; }

/* ----- Mobile drawer (≤768px) --------------------------------------- */

@media (max-width: 768px) {
  .lp-nav {
    padding: 0 16px;
    height: 60px;
    gap: 8px;
    grid-template-columns: auto 1fr auto;
  }
  .lp-nav-links,
  .lp-nav-actions { display: none; }
  .lp-nav-logo img { height: 26px; }

  .lp-nav-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 10px;
    margin-left: auto;
  }
  .lp-nav-burger span {
    display: block;
    height: 2px;
    background: var(--af-ink-black);
    border-radius: 1px;
    transition: transform 200ms ease, opacity 200ms ease;
  }
  .lp-nav.is-open .lp-nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .lp-nav.is-open .lp-nav-burger span:nth-child(2) { opacity: 0; }
  .lp-nav.is-open .lp-nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .lp-nav-drawer {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--af-white);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 8px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.10);
    z-index: 100;
    animation: lp-drawer-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes lp-drawer-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .lp-nav-drawer-link {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 16px;
    color: var(--af-ink-black);
    padding: 14px 8px;
    border-radius: 8px;
    text-decoration: none;
  }
  .lp-nav-drawer-link:hover { background: var(--af-alice-blue); }
  .lp-nav-drawer-link--muted { color: var(--af-gray-800); font-weight: 600; }
  .lp-nav-drawer-cta {
    margin-top: 8px;
    text-align: center;
    padding: 14px 16px !important;
    font-size: 15px !important;
  }
}


/* ============================================================
   Source: styles/header.css
   ============================================================ */

/* ============================================================
   Acorn Finance Hero Header — styles
   Söhne for display, Open Sans for UI.
   ============================================================ */

/* ---- VIEWPORT STAGE ----------------------------------------------------- */
/* The hero is designed at a fixed 1440×800 frame. We scale it to fit the
   viewport WIDTH, anchoring at the top so it always spans 100% of the
   browser without letterboxed edges. CSS-only — no JS resize listener. */

/* html/body baseline + box-sizing reset now live in styles/global.css */
.stage {
  width: 100%;
  background: transparent;
}
/* .stage-inner is the responsive layout box: it sizes itself to viewport
   width and uses aspect-ratio to set its height to the matching scaled
   value. container-type: inline-size lets the inner .hero use cqw units
   to compute its scale based on this exact box width. */
.stage-inner {
  width: 100%;
  aspect-ratio: 1440 / 960;
  container-type: inline-size;
  position: relative;
  overflow: hidden;
}
/* .hero stays at design dimensions (1440×960) and is visually scaled to
   exactly fill .stage-inner. Dividing two lengths yields a unitless
   <number> per CSS Values 4, which scale() requires. */
.stage-inner > .hero {
  position: absolute;
  top: 0; left: 0;
  transform-origin: top left;
  transform: scale(calc(100cqw / 1440px));
}

/* Mobile (≤600px viewport): stop shrinking the design any further.
   Lock the scale at a size where the phone reads naturally and CROP the
   off-center cards via .stage-inner's overflow:hidden. The hero is
   centered horizontally so the phone sits at the viewport center. */
@media (max-width: 600px) {
  .stage-inner {
    aspect-ratio: auto;
    height: 700px;
  }
  .stage-inner > .hero {
    left: calc(50% - 720px);   /* center the 1440-wide hero on the viewport */
    transform-origin: top center;
    transform: scale(0.7);
  }
}

/* ---- ARTBOARD ROOT ------------------------------------------------------ */

.hero {
  width: 1440px;
  height: 960px;
  background: transparent;
  color: var(--af-white);
  position: relative;
  overflow: hidden;
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

/* (Removed ambient navy gradient + grain so the hero sits on a transparent
   background. The phone + cards are self-contained against any host bg.) */

/* ---- NAV ---------------------------------------------------------------- */
/* Nav styles (.nav, .nav-link, .nav-cta, etc.) now live in styles/nav.css.
   That file also holds the .lp-nav* landing-page nav so all navigation
   rules are in one place. */

/* ---- BUTTONS ------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
  font-weight: 700;
  border: 0; cursor: pointer;
  text-decoration: none;
  transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease, color 140ms ease;
}
.btn-primary {
  background: var(--af-sapphire-sky);
  color: var(--af-white);
  border-radius: 8px;
  padding: 12px 22px;
  font-size: 15px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 6px 16px rgba(1,109,225,0.35);
}
.btn-primary:hover {
  background: var(--af-link-blue);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 22px rgba(1,109,225,0.45);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }
.btn-lg { padding: 18px 36px; font-size: 17px; border-radius: 10px; }
.btn-link {
  background: transparent;
  color: var(--af-bright-blue);
  font-size: 17px;
  font-weight: 700;
  padding: 18px 18px;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}
.btn-link:hover { color: var(--af-icy-blue); }

/* .nav-cta size override moved with the rest of the nav rules to nav.css */

/* ---- HERO BODY ---------------------------------------------------------- */

.hero-body {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  padding: 36px 64px 28px;
  text-align: center;
}

/* ---- TAB TOGGLE --------------------------------------------------------- */

.tab-toggle {
  position: relative;
  display: inline-flex;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 22px;
}
.tab-toggle button {
  position: relative; z-index: 2;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 700; font-size: 15px;
  color: rgba(255,255,255,0.7);
  padding: 9px 22px;
  border-radius: 999px;
  transition: color 220ms ease;
}
.tab-toggle button.is-on { color: var(--af-ink-black); }
.tab-pill {
  position: absolute; top: 4px; bottom: 4px;
  width: calc(50% - 4px);
  background: var(--af-white);
  border-radius: 999px;
  transition: transform 320ms cubic-bezier(.4,.0,.2,1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  z-index: 1;
}
.tab-pill[data-pos="contractors"] { transform: translateX(0); left: 4px; }
.tab-pill[data-pos="borrowers"] { transform: translateX(100%); left: 4px; }

/* ---- OVERLINE ----------------------------------------------------------- */

.overline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--af-bright-blue);
  margin-bottom: 18px;
  animation: hl-fade 700ms ease 80ms both;
}

/* ---- HEADLINE ----------------------------------------------------------- */

.hl {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 68px;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  text-wrap: balance;
  max-width: 1320px;
}
.hl-row { display: block; }
.hl-row--1 { margin-bottom: 4px; color: var(--af-bright-blue); }
.hl-row--2 { color: var(--af-white); }

/* per-word entrance — staggered fade-up */
.hl-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  animation: hl-rise 720ms cubic-bezier(.2,.7,.2,1) forwards;
}
.w-the   { animation-delay:  120ms; }
.w-free  { animation-delay:  220ms; }
.w-fin   { animation-delay:  320ms; }
.w-plat  { animation-delay:  420ms; }
.w-built { animation-delay:  540ms; }

@keyframes hl-rise {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hl-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* italic FREE — keeps a subtle highlight shimmer within the blue line */
.w-free em {
  font-style: italic;
  font-weight: 800;
  background: linear-gradient(100deg,
    var(--af-bright-blue)  0%,
    var(--af-icy-blue)    35%,
    var(--af-bright-blue) 65%,
    var(--af-bright-blue) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hl-rise 720ms cubic-bezier(.2,.7,.2,1) forwards,
             free-shimmer 5.5s ease-in-out 1.5s infinite;
}
@keyframes free-shimmer {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}

/* period sits with "CONTRACTORS" — match the line's white + entrance */
.hl-period {
  color: var(--af-white);
  display: inline-block;
  opacity: 0;
  animation: hl-rise 720ms cubic-bezier(.2,.7,.2,1) 640ms forwards;
}

/* ---- SUB ---------------------------------------------------------------- */

.sub {
  max-width: 720px;
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  margin: 6px 0 30px;
  animation: hl-fade 800ms ease 760ms both;
}
.sub strong { color: var(--af-white); font-weight: 700; }

/* ---- CTAs --------------------------------------------------------------- */

.ctas {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 22px;
  animation: hl-fade 800ms ease 860ms both;
}

/* ---- TRUST -------------------------------------------------------------- */

.trust {
  display: flex; gap: 14px; align-items: stretch;
  animation: hl-fade 900ms ease 980ms both;
}
.trust-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  padding: 10px 14px;
  color: rgba(255,255,255,0.78);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
}
.trust-pill .trust-label { font-weight: 700; color: rgba(255,255,255,0.92); }
.stars { display: inline-flex; gap: 2px; }
.trust-src { font-size: 12px; opacity: 0.85; }
.trust-pill--bbb { padding-left: 6px; }
.bbb {
  background: rgba(255,255,255,0.85);
  color: var(--af-deep-space-blue);
  font-weight: 800;
  font-style: italic;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 14px;
  letter-spacing: -0.02em;
}

/* ---- HERO PHOTOS region (bottom) ---------------------------------------- */

.hero-photos {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  margin-top: 0;
  padding: 0;
  /* Premium entrance: subtle rise from below with a long, smooth easeOut.
     The focused card's per-element build-in animations layer over this. */
  animation: hp-rise 1400ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both;
}
@keyframes hp-rise {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(155,236,0,0.18); } 50% { box-shadow: 0 0 0 7px rgba(155,236,0,0.04); } }

/* ---- Phone stage (the Acorn Finance mobile app frame) ----------------- */

.phone-stage {
  position: relative;
  width: 100%;
  height: 100%;
}

.phone {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 440px;
  height: 900px;
  z-index: 1;        /* behind the cards */
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.55));
}
/* Hand holding the phone — sized so its bezel roughly matches the drawn
   bezel; positioned so the visible hand wraps around our drawn phone. */
.phone-hand {
  /* Override the global `img { max-width: 100% }` reset — this image is
     intentionally wider than its absolutely-positioned .phone parent so
     the hand wraps around the drawn phone. */
  max-width: none;
  position: absolute;
  width: 1328px;
  height: auto;
  left: 207px;
  top: -43px;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.phone-bezel {
  width: 100%; height: 100%;
  background: linear-gradient(180deg, #1A1A1F, #0A0A0F);
  border-radius: 52px;
  padding: 12px;
  position: relative;
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,0.08),
    inset 0 1px 0 rgba(255,255,255,0.10);
}
.phone-screen {
  width: 100%; height: 100%;
  background: var(--af-gray-100);
  border-radius: 42px;
  overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
}

/* status bar */
.phone-status {
  position: relative;
  height: 50px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px 0 30px;
  color: var(--af-ink-black);
  font-family: -apple-system, "SF Pro", system-ui, sans-serif;
  font-weight: 600; font-size: 15px;
  flex: 0 0 auto;
}
.phone-status-time { letter-spacing: -0.3px; }
.phone-status-icons {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--af-ink-black);
}
.phone-island {
  position: absolute;
  top: 10px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 30px;
  background: #000;
  border-radius: 999px;
}

/* app bar */
.phone-app-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 18px 12px;
  flex: 0 0 auto;
}
.phone-app-id { display: flex; align-items: center; gap: 8px; }
.phone-app-mark {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
}
.phone-app-name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  color: var(--af-ink-black);
  letter-spacing: -0.01em;
}
.phone-app-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--af-ink-black);
}
.phone-app-bell {
  position: relative;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--af-gray-800);
}
.phone-app-dot {
  position: absolute;
  top: 4px; right: 6px;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--af-sapphire-sky);
  border: 1.5px solid var(--af-gray-100);
}

/* section header */
.phone-section {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 22px 0;
  flex: 0 0 auto;
}
.phone-section-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--af-gray-700);
}
.phone-section-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--af-sapphire-sky);
}

/* stage slot (just space-holder; the focused card sits over it via the arc) */
.phone-stage-slot {
  flex: 0 0 auto;
  height: 312px;
  margin: 14px 18px 0;
}

/* ghost feed rows below the focused card */
.phone-ghost-rows {
  flex: 1 1 auto;
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px 22px 0;
  mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 90%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 90%);
}
.phone-ghost {
  display: flex; align-items: center; gap: 10px;
  background: var(--af-white);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 1px 4px rgba(0,0,0,0.05);
}
.phone-ghost-avatar {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: linear-gradient(140deg, var(--af-icy-blue), var(--af-alice-blue));
  flex: 0 0 auto;
}
.phone-ghost-lines { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.phone-ghost-l1 { display: block; height: 10px; width: 60%; background: var(--af-gray-400); border-radius: 4px; }
.phone-ghost-l2 { display: block; height: 8px;  width: 40%; background: var(--af-gray-300); border-radius: 4px; }
.phone-ghost-amt {
  width: 60px; height: 16px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--af-gray-300), var(--af-gray-200));
}

/* tab bar */
.phone-tabs {
  display: flex; align-items: stretch;
  justify-content: space-around;
  padding: 8px 12px 0;
  border-top: 1px solid var(--af-gray-300);
  background: var(--af-white);
  flex: 0 0 auto;
  height: 60px;
}
.phone-tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  flex: 1 1 0;
  color: var(--af-gray-600);
}
.phone-tab.is-on { color: var(--af-sapphire-sky); }
.phone-tab-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
}

/* home indicator (sits over the screen's bottom edge) */
.phone-home {
  width: 134px; height: 5px;
  border-radius: 100px;
  background: rgba(0,0,0,0.55);
  position: absolute;
  left: 50%; bottom: 8px;
  transform: translateX(-50%);
}

/* ---- V3 — Arc of approval notifications -------------------------------- */

.arc {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  /* clip so cards passing off the arc fade behind the gradient edges */
  position: absolute;
  inset: 0;
  z-index: 2;
}
.arc-guide {
  position: absolute;
  left: 0; right: 0; top: 8px;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.4;
  z-index: 0;
}
.arc-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* anchor: center top of the stage; cards translate from here */
}
.arc-feed {
  position: absolute;
  top: 10px;
  left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  padding: 6px 14px 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.4px;
  backdrop-filter: blur(6px);
  z-index: 200;
}
.arc-feed-pulse {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--af-lime-bright);
  box-shadow: 0 0 0 4px rgba(155,236,0,0.18);
  animation: pulse 2.2s ease-in-out infinite;
}

/* ----------------- ARC CARD (positioning shell) ------------------------- */

.arc-card {
  position: absolute;
  top: 231px;   /* aligns focused card center with the phone screen stage slot */
  left: 50%;
  width: 380px;
  /* transform + filter composed in JS: translate(-50% + Xpx, Ypx) rotate scale,
     and a defocus blur+desaturation that ramps with distance from center. */
  transform-origin: 50% 50%;
  transition:
    transform 900ms cubic-bezier(.2,.7,.2,1),
    opacity   700ms ease,
    filter    700ms ease;
  will-change: transform, opacity, filter;
}
.arc-card.is-focused .nc {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.10) inset,
    0 24px 60px rgba(0,0,0,0.55),
    0 8px 24px rgba(0,0,0,0.35);
}

/* ----------------- NOTIFICATION CARD ------------------------------------ */

.nc {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
    var(--af-white);
  border-radius: 18px;
  padding: 22px 24px 20px;
  display: flex; flex-direction: column;
  gap: 14px;
  color: var(--af-ink-black);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.04) inset,
    0 12px 30px rgba(0,0,0,0.35);
  position: relative;
  font-family: var(--font-sans);
}

/* top row */
.nc-top {
  display: flex; align-items: center; justify-content: space-between;
}
.nc-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid;
  text-transform: capitalize;
}
.nc-badge-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  display: inline-block;
}
/* status variants — only Funded (green) and Offered (blue) */
.nc-badge--funded  { background: rgba(47,198,0,0.12);  border-color: rgba(47,198,0,0.32);  color: #0E8A3E; }
.nc-badge--funded  .nc-badge-dot { background: #2FC600; }
.nc-badge--offered { background: rgba(0,146,255,0.12); border-color: rgba(0,146,255,0.32); color: #016DE1; }
.nc-badge--offered .nc-badge-dot { background: #0092FF; }
.nc-time {
  font-size: 12px;
  font-weight: 600;
  color: #016DE1;
}

/* head: avatar + name + city */
.nc-head {
  display: flex; align-items: center; gap: 12px;
}
.nc-avatar {
  width: 44px; height: 44px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.5px;
  flex: 0 0 auto;
  border: 1px solid rgba(0,0,0,0.06);
}
.nc-id { display: flex; flex-direction: column; min-width: 0; }
.nc-name {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 800;
  color: var(--af-ink-black);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.nc-city {
  font-size: 13px;
  font-weight: 500;
  color: var(--af-gray-700);
  margin-top: 3px;
}

/* project pill */
.nc-project {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--af-gray-200);
  border-radius: 999px;
  padding: 8px 16px 8px 12px;
  align-self: flex-start;
  border: 1px solid rgba(0,0,0,0.04);
}
.nc-project-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  color: var(--af-gray-700);
}
.nc-project-icon svg { stroke: currentColor; }
.nc-project-label {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--af-gray-800);
  text-transform: none;
}

/* amount */
.nc-amount {
  display: flex; flex-direction: row;
  align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 2px 0 0;
}
.nc-amount-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--af-gray-700);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.nc-amount-value {
  font-family: var(--font-sans);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--af-ink-black);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* footer */
.nc-foot {
  display: flex; align-items: center; gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--af-gray-300);
  min-height: 30px;
}
.nc-foot-icon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--af-gray-700);
}
.nc-foot-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--af-gray-800);
}
.nc-foot-text strong { color: var(--af-ink-black); font-weight: 700; }
.nc-foot-text--right { margin-left: auto; }

/* "offers ready" stacked-bars footer */
.nc-bars {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
}
.nc-bar {
  height: 5px;
  width: var(--w);
  background: linear-gradient(90deg, var(--af-sapphire-sky), var(--af-bright-blue));
  border-radius: 999px;
  flex: 0 1 auto;
  opacity: 0.18;
}

/* ============= BUILD-IN ANIMATION (focused card only) ================== */
/* Each child fades + rises in with a staggered delay. The whole inner card
   re-mounts when focused, so animations replay every cycle. */

.nc--animated .nc-top,
.nc--animated .nc-head,
.nc--animated .nc-project,
.nc--animated .nc-amount,
.nc--animated .nc-foot {
  opacity: 0;
  animation: nc-rise 520ms cubic-bezier(.2,.7,.2,1) both;
}
.nc--animated .nc-top     { animation-delay:  60ms; }
.nc--animated .nc-head    { animation-delay: 180ms; }
.nc--animated .nc-project { animation-delay: 320ms; }
.nc--animated .nc-amount  { animation-delay: 480ms; }
.nc--animated .nc-foot    { animation-delay: 700ms; }

@keyframes nc-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* offers bars fill from left when card is focused */
.nc--animated .nc-bar {
  animation: nc-bar-in 500ms cubic-bezier(.2,.7,.2,1) both;
  animation-delay: calc(820ms + var(--d, 0ms));
  transform-origin: left center;
}
@keyframes nc-bar-in {
  from { opacity: 0;    transform: scaleX(0); }
  60%  { opacity: 0.95; transform: scaleX(1.04); }
  to   { opacity: 0.95; transform: scaleX(1); }
}

/* approved/funded foot icons get a pop */
.nc--animated .nc-foot-icon {
  animation: nc-pop 500ms cubic-bezier(.2,.8,.3,1.2) both;
  animation-delay: 820ms;
  transform-origin: center;
}
@keyframes nc-pop {
  from { opacity: 0; transform: scale(0.4); }
  60%  { opacity: 1; transform: scale(1.18); }
  to   { opacity: 1; transform: scale(1); }
}

/* ----- hero spacing tweaks (formerly variant-3 specific) -------------- */
.hero .hero-body { padding-bottom: 6px; }
.hero .hero-photos {
  padding: 0;
  margin-top: -8px;
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hl-word, .overline, .sub, .ctas, .trust, .hero-photos { animation: none !important; opacity: 1; transform: none; }
  .w-free em { animation: none !important; }
  .xfade-in, .xfade-out { animation: none !important; }
  .arc-card { transition: opacity 200ms ease !important; }
  .nc--animated .nc-top,
  .nc--animated .nc-head,
  .nc--animated .nc-project,
  .nc--animated .nc-amount,
  .nc--animated .nc-foot,
  .nc--animated .nc-bar,
  .nc--animated .nc-foot-icon { animation: none !important; opacity: 1; transform: none; }
}


/* ---- Borrower phone variant — pre-qualified headline above the rotating
   lender offer cards. */
.phone-app-bar--borrower {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 18px 24px 24px;
  gap: 8px;
}
.phone-bo-confetti {
  font-size: 30px;
  line-height: 1;
  margin-bottom: 2px;
  /* Subtle wiggle so the confetti glyph feels celebratory rather than static. */
  animation: phone-bo-wiggle 2.4s ease-in-out infinite;
  transform-origin: 50% 80%;
}
@keyframes phone-bo-wiggle {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(8deg); }
}
.phone-bo-headline {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--af-ink-black);
  text-wrap: balance;
}
.phone-bo-sub {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--af-gray-700);
  letter-spacing: 0.01em;
}

/* When the phone is in the borrower variant, the lender carousel sits
   inside the screen — we still want a subtle gradient stripe behind the
   headline so the celebratory framing has more presence. */
.phone--borrower .phone-screen {
  background: linear-gradient(180deg, var(--af-alice-blue) 0%, var(--af-gray-100) 220px);
}


/* Borrower variant has a taller app-bar (headline + sub) — give the
   stage slot less reserved height so the ghost-feed rows pull up into
   view rather than sitting at the bottom of a long screen. */
.phone--borrower .phone-stage-slot { height: 200px; }

/* Borrower phone shows more ghost rows (single-offer cards are short, so
   extra rows keep the screen from looking empty) — push the fade deeper
   so the additional rows stay visible. */
.phone--borrower .phone-ghost-rows {
  gap: 9px;
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 98%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 98%);
}

/* Borrower hand image has different dimensions and framing (two hands,
   centered phone) — reposition + resize so the photo's phone area lines
   up with our drawn phone bezel. */
.phone--borrower .phone-hand {
  width: 1380px;
  height: auto;
  left: 214px;
  top: -45px;
  transform: translateX(-50%);
}




/* ============================================================
   Source: styles/landing.css
   ============================================================ */

/* ============================================================
   Acorn Finance — Landing page layout
   Section frames, navigation, and a scaling wrapper for the
   hero animation (which is designed at a fixed 1440×960).
   ============================================================ */

/* Page reset — landing page uses natural flow (unlike Header.html
   which uses a fixed-aspect scaling stage). */
.lp-page {
  background: var(--af-white);
  color: var(--af-ink-black);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ----- TOP NAV ------------------------------------------------------- */
/* All .lp-nav* rules now live in styles/nav.css alongside the .nav*
   styles for the hero preview. */

/* ----- SECTION FRAME ------------------------------------------------- */

.lp-section {
  position: relative;
  width: 100%;
}
/* Placeholder treatment so we can see the section frames + know what we
   still need to build. Real sections replace this. */
.lp-section--placeholder {
  min-height: 480px;
  padding: 96px 56px;
  background: var(--af-gray-100);
  border-top: 1px solid var(--af-gray-300);
  display: flex; flex-direction: column; gap: 16px;
  align-items: center; justify-content: center;
  text-align: center;
}
.lp-section--placeholder + .lp-section--placeholder {
  background: var(--af-white);
}
.lp-placeholder-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 999px;
  background: var(--af-sapphire-sky);
  color: var(--af-white);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
}
.lp-placeholder-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.02em;
  color: var(--af-ink-black);
  margin: 0;
}
.lp-placeholder-note {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--af-gray-700);
  max-width: 480px;
  margin: 0;
}

/* ----- HERO SECTION -------------------------------------------------- */

.lp-section--hero {
  background: var(--af-deep-space-blue);
  color: var(--af-white);
  /* subtle ambient gradient so the dark navy isn't dead-flat */
  position: relative;
  overflow: hidden;
}
.lp-section--hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(1100px 600px at 50% -10%, rgba(0,146,255,0.10), transparent 60%),
    radial-gradient(700px 500px at 90% 30%, rgba(127,182,230,0.06), transparent 60%);
  pointer-events: none;
}

.lp-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 56px 56px 0;
  text-align: center;
}

/* Audience toggle */
.lp-tab-toggle {
  position: relative;
  display: inline-flex;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 22px;
}
.lp-tab-toggle button {
  position: relative; z-index: 2;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 700; font-size: 14px;
  color: rgba(255,255,255,0.7);
  padding: 9px 22px;
  border-radius: 999px;
  transition: color 220ms ease;
}
.lp-tab-toggle button.is-on { color: var(--af-ink-black); }
.lp-tab-pill {
  position: absolute; top: 4px; bottom: 4px;
  width: calc(50% - 4px);
  background: var(--af-white);
  border-radius: 999px;
  transition: transform 320ms cubic-bezier(.4,.0,.2,1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  z-index: 1;
}
.lp-tab-pill[data-pos="contractors"] { transform: translateX(0); left: 4px; }
.lp-tab-pill[data-pos="borrowers"] { transform: translateX(100%); left: 4px; }

/* Headline */

/* Eyebrow over the H1 — sloppy green marker-stroke highlight behind the
   text (assets/green-highlight.svg). Text sits on top in white. */
.lp-hero-overline {
  display: inline-block;
  position: relative;
  margin-bottom: 18px;
}
.lp-hero-overline-text {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--af-white);
  padding: 0 2px 9px;
}
.lp-hero-overline::after {
  content: "";
  position: absolute;
  left: -8px; right: -8px;
  bottom: 0;
  height: 11px;
  background: url("/wp-content/uploads/assets/h1-paint-stroke.png") center/100% 100% no-repeat;
  z-index: 0;
  pointer-events: none;
}

.lp-h1 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(28px, 7vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  text-wrap: balance;
  max-width: 980px;
}
.lp-h1-row--1 { display: block; color: var(--af-bright-blue); margin-bottom: 4px; }
.lp-h1-row--2 { display: block; color: var(--af-white); }
/* New token-aware spans (used by the responsive line-break version) */
.lp-h1-blue  { color: var(--af-bright-blue); }
.lp-h1-white { color: var(--af-white); }
.lp-h1-mob-br  { display: none; }   /* breaks only on mobile */
.lp-h1-desk-br { display: block; }  /* breaks only on desktop */

/* Hero eyebrow — small uppercase label above the hero title. Used as the
   semantic <h1> on the homepage (visually an eyebrow, SEO keyword line)
   and as a plain <div> on the borrower hero. Class overrides the UA h1
   sizing/margins so the tag choice never changes the look. */
.lp-hero-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--af-icy-blue);          /* pops on the dark homepage hero */
  margin: 0 0 18px;
}
.bo-hero .lp-hero-eyebrow { color: var(--af-sapphire-sky); }  /* dark text on the light borrower hero */

/* Hand-painted lime stroke under "without the costs." — uses a PNG of the
   real brush mark so the texture and frayed ends read polished. */
.lp-h1-paint {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.lp-h1-paint-img {
  position: absolute;
  left: -0.04em;
  bottom: -0.18em;
  width: calc(100% + 0.08em);
  height: auto;
  pointer-events: none;
  user-select: none;
  display: block;
  /* Brush-sweep reveal — left-to-right wipe, kicks in just after the
     headline text settles. */
  clip-path: inset(0 100% 0 0);
  animation: lp-h1-paint-sweep 520ms cubic-bezier(0.22, 0.61, 0.36, 1) 380ms forwards;
}
@keyframes lp-h1-paint-sweep {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0%   0 0); }
}

/* Headline text rises in with a subtle stagger, sub follows.
   Each animation has an explicit from+to so Chrome for Android
   doesn't have to infer the from state. fill-mode is `backwards`
   (not `both`): the animation supplies the hidden start state during
   the delay, but the RESTING state after it finishes is the element's
   own natural style (opacity:1) rather than an animation-held value.
   Holding the final frame inside a composited layer — what `both` +
   will-change does — is what made the first H1 line vanish until a
   tap forced a repaint on Chrome for Android. */
.lp-h1 > .lp-h1-white {
  display: inline-block;
  animation: lp-h1-word-in 460ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}
.lp-h1 > .lp-h1-paint { animation-delay: 140ms; }
@keyframes lp-h1-word-in {
  from { opacity: 0; transform: translateY(0.18em); }
  to   { opacity: 1; transform: none; }
}

.lp-sub {
  animation: lp-sub-in 480ms cubic-bezier(0.22, 0.61, 0.36, 1) 260ms backwards;
}
@keyframes lp-sub-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-h1-paint-img,
  .lp-h1 > .lp-h1-white,
  .lp-sub {
    animation: none;
    clip-path: none;
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 600px) {
  .lp-h1-mob-br  { display: block; }
  .lp-h1-desk-br { display: none; }
}
.lp-h1 em {
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(100deg,
    var(--af-bright-blue) 0%, var(--af-icy-blue) 35%,
    var(--af-bright-blue) 65%, var(--af-bright-blue) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: lp-shimmer 5.5s ease-in-out 1.5s infinite;
}
@keyframes lp-shimmer {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}

/* Sub */
.lp-sub {
  max-width: 640px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  margin: 6px 0 28px;
}
.lp-sub strong { color: var(--af-white); font-weight: 700; }

/* CTAs */
.lp-ctas {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 22px;
  flex-wrap: wrap; justify-content: center;
}
.lp-cta {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease, color 140ms ease;
}
.lp-cta--primary {
  background: var(--af-sapphire-sky);
  color: var(--af-white);
  border-radius: 10px;
  padding: 16px 32px;
  font-size: 16px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 6px 16px rgba(1,109,225,0.35);
}
.lp-cta--primary:hover {
  background: var(--af-link-blue);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 8px 22px rgba(1,109,225,0.45);
}
.lp-cta--link {
  background: transparent;
  color: var(--af-bright-blue);
  font-size: 16px;
  font-weight: 700;
  padding: 16px 18px;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}
.lp-cta--link:hover { color: var(--af-icy-blue); }

/* Trust */
.lp-trust {
  display: flex; gap: 14px; align-items: stretch;
  flex-wrap: wrap; justify-content: center;
}
.lp-trust-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  padding: 10px 14px;
  color: rgba(255,255,255,0.78);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
}
.lp-trust-pill .lp-trust-label { font-weight: 700; color: rgba(255,255,255,0.92); }
.lp-trust-stars { display: inline-flex; gap: 2px; }
.lp-trust-src { font-size: 12px; opacity: 0.85; }
.lp-trust-pill--bbb { padding-left: 6px; }
.lp-bbb {
  background: rgba(255,255,255,0.85);
  color: var(--af-deep-space-blue);
  font-weight: 800;
  font-style: italic;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 14px;
  letter-spacing: -0.02em;
}

/* ---- Trust bar (redesigned) — single inline credibility line ------- */
/* Sits at the bottom of the dark hero, directly on the navy background:
   white BBB logo, off-white (#C9D4DA) copy and monochrome marks.
   Scoped with .lp-trustbar / .tb-* so the legacy .lp-trust pills used on
   other heroes stay untouched. */
.lp-trustbar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 28px;
  font-family: var(--font-sans);
  color: #C9D4DA;
  padding: 4px 0;
}
.lp-trustbar a { text-decoration: none; color: inherit; }

/* BBB Accredited Business logo */
.tb-bbb {
  display: inline-flex;
  align-items: center;
  transition: opacity .18s ease;
}
.tb-bbb:hover { opacity: 0.82; }
.tb-bbb-logo {
  display: block;
  height: 32px;
  width: auto;
}

/* Trustpilot / Google review items */
.tb-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #C9D4DA;
  transition: opacity .18s ease;
}
.tb-item:hover { opacity: 0.7; }
.tb-copy { white-space: nowrap; }
.tb-u {
  text-underline-offset: 2px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(201,212,218,0.55);
  font-weight: 600;
}
.tb-brand { display: inline-flex; align-items: center; gap: 5px; }
.tb-tp-star { display: block; color: #C9D4DA; }
.tb-tp-name {
  font-weight: 700;
  color: #C9D4DA;
  letter-spacing: -0.01em;
}
.tb-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  color: #C9D4DA;
  border: 1px solid rgba(201,212,218,0.4);
}

@media (max-width: 767px) {
  .lp-trustbar { gap: 10px 18px; }
}

/* Ink variant — dark-navy #00273E text + monochrome marks, for use on a
   light hero (borrowers). Logo swaps to the dark BBB asset in markup. */
.lp-trustbar--ink,
.lp-trustbar--ink .tb-item,
.lp-trustbar--ink .tb-tp-star,
.lp-trustbar--ink .tb-tp-name,
.lp-trustbar--ink .tb-google { color: #00273E; }
.lp-trustbar--ink .tb-u { text-decoration-color: rgba(0,39,62,0.45); }
.lp-trustbar--ink .tb-google { border-color: rgba(0,39,62,0.22); }

/* ----- HERO STAGE — scaled phone animation -------------------------- */
/* The phone animation is designed at 1440×960. We scale it to fit the
   landing-page viewport width using the same container-query trick as
   the standalone hero, but scoped to this section so it doesn't disturb
   the rest of the page. */

.lp-hero-stage {
  width: 100%;
  /* Cropped shorter than the design's natural 1440×960 so the hand bottom
     gets clipped just below the third finger — keeps the focused card
     visible (its center is at y~376 in design coords) while reclaiming
     hero vertical space. */
  aspect-ratio: 1440 / 620;
  container-type: inline-size;
  position: relative;
  overflow: hidden;
}
.lp-hero-stage-inner {
  position: absolute;
  top: 0; left: 0;
  width: 1440px;
  height: 960px;
  transform-origin: top left;
  transform: scale(calc(100cqw / 1440px));
}
.lp-hero-stage-inner > .phone-stage {
  width: 100%;
  height: 100%;
  position: relative;
}

/* Mobile crop (≤600px): lock the animation scale so the phone reads
   naturally, crop the off-center cards via overflow:hidden. */
@media (max-width: 600px) {
  .lp-hero-stage {
    aspect-ratio: auto;
    height: 460px;
  }
  .lp-hero-stage-inner {
    left: calc(50% - 720px);
    transform-origin: top center;
    transform: scale(0.7);
  }
}

/* Entrance: hero stays hidden until the user first scrolls, then rises
   into place. The state class is toggled by SectionHero. */
.lp-hero-stage {
  opacity: 0;
  transform: translateY(60px);
  transition:
    opacity   1400ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1400ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.lp-hero-stage.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ----- SECTION 2 — LENDER LOGOS -------------------------------------- */

.lp-section--lenders {
  background: var(--af-alice-blue);
  padding: 56px 56px;
}
.lp-overline {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--af-ink-black);
  margin: 0 0 36px;
}
.lp-lenders-row {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: nowrap;
}
.lp-lender-cell {
  display: flex; align-items: center; justify-content: center;
  flex: 0 1 auto;
  min-width: 0;
}
.lp-lender {
  height: 30px;
  width: auto;
  display: block;
  object-fit: contain;
  max-width: 100%;
}
.lp-lenders-more {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--af-sapphire-sky);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 140ms ease;
}
.lp-lenders-more:hover { color: var(--af-link-blue); }

@media (max-width: 900px) {
  .lp-lenders-row { gap: 24px 40px; justify-content: center; flex-wrap: wrap; }
  .lp-section--lenders { padding: 40px 24px; }
}
@media (max-width: 600px) {
  .lp-lenders-row { gap: 20px 32px; }
  .lp-lender { height: 28px; }
}

/* ----- SECTION 2b — TRADES WE FINANCE (carousel) --------------------- */

.lp-section--trades {
  background: var(--af-white);
  padding: 88px 0 96px;       /* zero side padding — the track bleeds wide */
  overflow: hidden;
}
.trades-head {
  max-width: 1240px;
  margin: 0 auto 36px;
  padding: 0 56px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
/* Left-aligned variant of the shared overline used in this section. */
.lp-overline--left {
  text-align: left;
  margin: 0 0 12px;
}
.trades-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--af-ink-black);
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}
.trades-controls {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}
.trades-arrow {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--af-gray-300);
  background: var(--af-white);
  color: var(--af-ink-black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.trades-arrow:hover {
  background: var(--af-sapphire-sky);
  border-color: var(--af-sapphire-sky);
  color: var(--af-white);
  transform: translateY(-1px);
}
.trades-arrow:active { transform: translateY(0); }
.trades-arrow:focus-visible {
  outline: 2px solid var(--af-sapphire-sky);
  outline-offset: 2px;
}

/* Viewport masks the track edges so cards fade in/out at the sides. */
.trades-viewport {
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
}
.trades-track {
  display: flex;
  gap: 20px;
  padding: 8px 56px;          /* matches section gutter; first/last not flush */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  touch-action: pan-x pan-y;     /* allow native horizontal swipe on touch + vertical page scroll */
  user-select: none;
  -webkit-user-select: none;
}
.trades-track::-webkit-scrollbar { display: none; }
.trades-track.is-dragging { cursor: grabbing; }

.trade-card {
  position: relative;
  flex: 0 0 300px;
  width: 300px;
  height: 380px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-decoration: none;
  background: var(--af-gray-200);
  box-shadow: 0 1px 2px rgba(0,39,62,0.06);
  transition: box-shadow 220ms ease, transform 220ms cubic-bezier(0.22,0.61,0.36,1);
  -webkit-tap-highlight-color: transparent;
}
.trade-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,39,62,0.18);
}
.trade-card:focus-visible {
  outline: 3px solid var(--af-sapphire-sky);
  outline-offset: 3px;
}
.trade-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;   /* pin right edge; crop the left */
  display: block;
  transition: transform 520ms cubic-bezier(0.22,0.61,0.36,1);
  -webkit-user-drag: none;
}
.trade-card:hover .trade-card-img { transform: scale(1.06); }
.trade-card-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(0,39,62,0.86) 0%,
    rgba(0,39,62,0.45) 32%,
    rgba(0,39,62,0.05) 60%,
    rgba(0,39,62,0) 100%);
  pointer-events: none;
}
.trade-card-arrow {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.35);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: var(--af-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.trade-card:hover .trade-card-arrow {
  background: var(--af-white);
  color: var(--af-sapphire-sky);
  transform: rotate(0deg) scale(1.05);
}
.trade-card-info {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.trade-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--af-white);
  line-height: 1.1;
}
.trade-card-desc {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.82);
  line-height: 1.3;
}

.trades-foot {
  max-width: 1240px;
  margin: 36px auto 0;
  padding: 0 56px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.trades-foot-text {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--af-gray-700);
}
.trades-foot-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--af-sapphire-sky);
  text-decoration: none;
  transition: color 140ms ease, transform 140ms ease;
}
.trades-foot-link:hover { color: var(--af-link-blue); transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  .trade-card,
  .trade-card-img { transition: none; }
}

@media (max-width: 900px) {
  .lp-section--trades { padding: 64px 0 72px; }
  .trades-head { padding: 0 24px; margin-bottom: 28px; }
  .trades-track { padding: 8px 24px; }
  .trades-viewport {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
  .trades-foot { padding: 0 24px; }
}
@media (max-width: 600px) {
  .lp-section--trades { padding: 48px 0 56px; }
  .trades-head { flex-direction: column; align-items: flex-start; gap: 18px; padding: 0 16px; }
  .trades-track { padding: 8px 16px; gap: 14px; }
  .trades-viewport {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
  .trade-card { flex-basis: 240px; width: 240px; height: 320px; }
  .trade-card-title { font-size: 19px; }
  .trades-foot { padding: 0 16px; }
}

/* ----- SECTION 3 — COMPARISON TABLE ---------------------------------- */

.lp-section--comparison {
  background: var(--af-white);
  padding: 96px 24px 120px;
}
.lp-comp-inner {
  max-width: 1240px;
  margin: 0 auto;
  text-align: center;
}
.lp-comp-h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(40px, 7.5vw, 108px);
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--af-ink-black);
  margin: 0 0 36px;
}
.lp-comp-h2 span { display: block; }
.lp-comp-sub {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.55;
  color: var(--af-gray-800);
  max-width: 880px;
  margin: 0 auto 56px;
}

.lp-comp-table {
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) repeat(4, 1fr);
  max-width: 1080px;
  margin: 0 auto;
  border-radius: var(--radius-md);
}
.lp-comp-row {
  display: contents;
}
.lp-comp-cell {
  display: flex; align-items: center; justify-content: center;
  padding: 24px 12px;
  border-bottom: 1px solid var(--af-gray-300);
  font-family: var(--font-sans);
}
.lp-comp-row--head .lp-comp-cell {
  padding: 24px 12px 20px;
  border-bottom: none;
}
.lp-comp-row:last-child .lp-comp-cell { border-bottom: none; }
.lp-comp-cell--label {
  justify-content: flex-start;
  padding-left: 0;
  font-weight: 700;
  font-size: 15px;
  color: var(--af-ink-black);
  text-align: left;
}
.lp-comp-cell--acorn {
  background: var(--af-alice-blue);
}
.lp-comp-row--head .lp-comp-cell--acorn {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}
.lp-comp-row:last-child .lp-comp-cell--acorn {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

/* logos in the header row */
.lp-comp-logo {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--af-ink-black);
}
.lp-comp-logo-text { letter-spacing: 1.5px; }
.lp-comp-logo--type {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 1.5px;
}
.lp-comp-logo-img {
  height: 28px;
  width: auto;
  display: block;
}

@media (max-width: 720px) {
  .lp-comp-table {
    grid-template-columns: minmax(140px, 1.5fr) repeat(4, 1fr);
  }
  .lp-comp-cell { padding: 16px 6px; }
  .lp-comp-cell--label { font-size: 13px; }
  .lp-comp-logo { font-size: 11px; gap: 4px; }
  .lp-comp-logo--type { font-size: 11px; letter-spacing: 0.8px; }
  .lp-comp-logo-img { height: 20px; }
  .lp-section--comparison { padding: 56px 16px 72px; }
  .lp-comp-sub { margin-bottom: 36px; }
}

/* ----- SECTION 4 — CREDIBILITY NUMBERS ------------------------------- */

/* Comparison stack hidden by default; appears on mobile (≤600). */
.lp-comp-stack { display: none; }

@media (min-width: 601px) {
  /* keep table visible above 600 */
}

@media (max-width: 600px) {
  .lp-comp-table { display: none; }
  .lp-comp-stack {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    padding: 4px 16px 16px;
    margin: 0 -16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .lp-comp-stack::-webkit-scrollbar { display: none; }
  .lp-comp-stack-card {
    flex: 0 0 calc(100% - 48px);
    max-width: 380px;
    scroll-snap-align: center;
    background: var(--af-white);
    border: 1px solid var(--af-gray-300);
    border-radius: 18px;
    padding: 22px 22px 18px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  }
  .lp-comp-stack-card.is-acorn {
    background: var(--af-alice-blue);
    border-color: rgba(1,109,225,0.25);
    box-shadow: 0 8px 28px rgba(1,109,225,0.12);
  }
  .lp-comp-stack-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 18px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--af-gray-300);
    min-height: 32px;
  }
  .lp-comp-stack-card.is-acorn .lp-comp-stack-head {
    border-bottom-color: rgba(1,109,225,0.18);
  }
  .lp-comp-stack-tag {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--af-sapphire-sky);
    background: rgba(1,109,225,0.10);
    padding: 4px 10px;
    border-radius: 999px;
  }
  .lp-comp-stack-list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .lp-comp-stack-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--af-ink-black);
  }
  .lp-comp-stack-item.is-no { color: var(--af-gray-600); }
  .lp-comp-stack-item svg { flex: 0 0 auto; margin-top: 1px; }
  /* matching the in-row icon sizing for the stack */
  .lp-comp-stack-item svg { width: 18px; height: 18px; }

  /* tighten the section padding around the new stack */
  .lp-section--comparison { padding: 48px 0 64px; }
  .lp-comp-inner { padding: 0; }
  .lp-comp-h2, .lp-comp-sub { padding: 0 20px; }
  .lp-comp-h2 { font-size: clamp(22px, 6.4vw, 40px); margin-bottom: 20px; }
  .lp-comp-sub { font-size: 13px; line-height: 1.5; margin-bottom: 28px; }
  .lp-comp-stack-head .lp-comp-logo-img { height: 32px; }
}

/* Keep the comparison headline to exactly two lines below desktop:
   each span (one line) can't wrap, and the font scales to always fit. */
@media (max-width: 767px) {
  .lp-comp-h2 { font-size: clamp(19px, 5.4vw, 40px); }
  .lp-comp-h2 span { white-space: nowrap; }
}

/* ----- SECTION 4 (real heading recovered below) ---------------------- */

.lp-section--stats {
  background: var(--af-white);
  padding: 24px 56px 96px;
}
.lp-stats-row {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.lp-stat {
  background: var(--af-lime-bright);
  border-radius: 28px;
  padding: 56px 48px 40px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* entrance: starts hidden, slides up on scroll-into-view */
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity   900ms cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms);
  will-change: transform, opacity;
}
.lp-stat.is-in {
  opacity: 1;
  transform: translateY(0);
}
.lp-stat-value {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(56px, 7.5vw, 96px);
  line-height: 1;
  color: var(--af-ink-black);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.lp-stat-label {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--af-ink-black);
  margin-top: 56px;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .lp-stats-row { grid-template-columns: 1fr; gap: 16px; }
  .lp-stat { min-height: 220px; padding: 44px 36px 32px; }
  .lp-stat-label { margin-top: 36px; }
}
@media (max-width: 600px) {
  .lp-section--stats { padding: 12px 16px 56px; }
}

/* ----- SECTION 5 — HOW IT WORKS -------------------------------------- */

.lp-section--how {
  background: var(--af-white);
  padding: 96px 56px;
}
.lp-how-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: stretch;
}

/* overline with sloppy green marker-stroke highlight */
.lp-how-overline {
  display: inline-block;
  position: relative;
  margin-bottom: 28px;
}
.lp-how-overline-text {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--af-ink-black);
  padding: 0 2px 9px;
}
.lp-how-overline::before {
  content: "";
  position: absolute;
  left: -8px; right: -8px;
  bottom: 0;
  height: 11px;
  /*background: url("/wp-content/uploads/assets/h1-paint-stroke.png") center/100% 100% no-repeat;*/
  z-index: 0;
  pointer-events: none;
}

.lp-how-h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--af-ink-black);
  margin: 0 0 40px;text-wrap: balance;
}
.lp-how-list { display: flex; flex-direction: column; }
.lp-how-item {
  border-top: 1px solid var(--af-gray-300);
}
.lp-how-item:last-child { border-bottom: 1px solid var(--af-gray-300); }
.lp-how-row {
  background: transparent;
  border: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 4px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  color: var(--af-ink-black);
}
.lp-how-icon {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: var(--af-alice-blue);
  color: var(--af-sapphire-sky);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.lp-how-label {
  flex: 1;
  font-size: 18px;
  font-weight: 700;
}
.lp-how-chev {
  color: var(--af-ink-black);
  transition: transform 280ms ease;
  display: inline-flex;
}
.lp-how-item.is-open .lp-how-chev { transform: rotate(180deg); }
.lp-how-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 320ms ease;
}
.lp-how-item.is-open .lp-how-body { max-height: 220px; }
.lp-how-body-inner {
  padding: 0 4px 24px 58px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--af-gray-800);
  line-height: 1.55;
}

/* ----- RIGHT SIDE — signup form mockup ------------------------------ */

.lp-how-right {
  display: flex;
  justify-content: center;
  align-items: stretch;
}
.lp-how-mockup-stage {
  width: 100%;
  display: flex;
  position: relative;
}
/* Static HTML: all 4 step mockups live inside .lp-how-mockup-stage; only
   the one with .is-on is shown, and the swap-in animation fires each time
   .is-on moves to a different child. */
.lp-how-mockup {
  display: none;
  width: 100%;
}
.lp-how-mockup.is-on {
  display: flex;
  animation: lp-how-swap 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes lp-how-swap {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lp-formcard {
  position: relative;
  width: 100%;
  border-radius: 20px;
  background: linear-gradient(135deg, #EBF8FF 0%, #F5F8FF 40%, #FFFCE5 80%, #EBF8FF 100%);
  padding: 64px 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 1;
}
.lp-formcard-stripes {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 120px;
  height: 80px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(1,109,225,0.20) 0,
      rgba(1,109,225,0.20) 1.5px,
      transparent 1.5px,
      transparent 6px
    );
  pointer-events: none;
}
.lp-formcard-inner {
  background: var(--af-white);
  border-radius: 14px;
  width: 100%;
  padding: 32px 28px 28px;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.04) inset,
    0 12px 32px rgba(0,0,0,0.08);
  position: relative;
}

.lp-stepper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.lp-step {
  width: 36px; height: 36px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  background: var(--af-gray-300);
  color: var(--af-gray-700);
}
.lp-step.is-done,
.lp-step.is-active {
  background: var(--af-deep-space-blue);
  color: var(--af-white);
}

.lp-progress {
  height: 8px;
  background: var(--af-gray-200);
  border-radius: 999px;
  margin: 0 auto 22px;
  overflow: hidden;
}
.lp-progress-fill {
  height: 100%;
  width: 60%; /* static mock state (moved from inline style) */
  background: var(--af-deep-space-blue);
  border-radius: 999px;
}

.lp-tooltip {
  border: 1.5px solid var(--af-deep-space-blue);
  border-radius: 6px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--af-ink-black);
}
.lp-tooltip svg { color: var(--af-deep-space-blue); flex: 0 0 auto; }

.lp-form-controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lp-back-btn {
  background: transparent;
  border: 0;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  cursor: pointer;
  color: var(--af-ink-black);
  align-self: flex-start;
  margin-bottom: -4px;
}

.lp-field { position: relative; }
.lp-field label {
  position: absolute;
  top: -7px; left: 12px;
  background: var(--af-white);
  padding: 0 6px;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--af-gray-700);
  z-index: 1;
}
.lp-select {
  border: 1px solid var(--af-gray-500);
  border-radius: 4px;
  padding: 14px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--af-ink-black);
  font-family: var(--font-sans);
  font-size: 14px;
}
.lp-select svg { color: var(--af-gray-700); }
.lp-form-next {
  background: var(--af-deep-space-blue);
  color: var(--af-white);
  border: 0;
  border-radius: 4px;
  padding: 14px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  margin-top: 8px;
  transition: background 140ms ease;
}
.lp-form-next:hover { background: var(--af-ocean); }

/* ---- Mock content shared bits (Share / Offers / Paid) -------------- */

.lp-mock-eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--af-sapphire-sky);
  margin-bottom: 8px;
}
.lp-mock-title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--af-ink-black);
  margin-bottom: 18px;
}

/* Share */
.lp-mock-linkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--af-gray-100);
  border: 1px solid var(--af-gray-300);
  border-radius: 8px;
  padding: 6px 6px 6px 14px;
  margin-bottom: 14px;
}
.lp-mock-linkurl {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--af-ink-black);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lp-mock-copy {
  background: var(--af-sapphire-sky);
  color: var(--af-white);
  border: 0;
  border-radius: 6px;
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.lp-mock-share-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.lp-mock-share {
  background: var(--af-white);
  border: 1px solid var(--af-gray-300);
  border-radius: 8px;
  padding: 14px 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  color: var(--af-ink-black);
  cursor: pointer;
}
.lp-mock-share svg { color: var(--af-sapphire-sky); }

/* Offers */
.lp-mock-offers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lp-mock-offer {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  background: var(--af-white);
  border: 1px solid var(--af-gray-300);
  border-radius: 10px;
  padding: 12px;
}
.lp-mock-offer-lender { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lp-mock-offer-mark {
  width: 32px; height: 32px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--af-white);
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 13px;
  flex: 0 0 auto;
}
.lp-mock-offer-name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  color: var(--af-ink-black);
}
.lp-mock-offer-tag {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--af-gray-700);
}
.lp-mock-offer-meta { text-align: right; }
.lp-mock-offer-pmt {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  color: var(--af-ink-black);
}
.lp-mock-offer-apr {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--af-gray-700);
}
.lp-mock-offer-cta {
  background: var(--af-sapphire-sky);
  color: var(--af-white);
  border: 0;
  border-radius: 6px;
  padding: 8px 12px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

/* Paid */
.lp-mock-paid-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  margin-bottom: 16px;
}
.lp-mock-paid-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--af-gray-700);
  margin-bottom: 2px;
}
.lp-mock-paid-value {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  color: var(--af-ink-black);
}
.lp-mock-paid-value--ok { color: var(--af-success); }
.lp-mock-paid-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--af-lime-pale);
  border: 1px solid rgba(47,198,0,0.30);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: #086620;
}

/* Mobile inline mockup (≤900px): right column hidden, mockup shows
   inside each accordion body instead. */
.lp-how-body-mockup { display: none; }

@media (max-width: 900px) {
  .lp-how-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .lp-section--how { padding: 56px 24px; }
  .lp-how-h2 { margin-bottom: 32px; }
  .lp-formcard { padding: 32px 24px; }
  /* hide the right column; show mockup inline within each open accordion */
  .lp-how-right { display: none; }
  /* reset body padding so the body text and mockup both span the full
     accordion width — no negative-margin escape needed. */
  .lp-how-body-inner { padding: 0 4px 18px 4px; }
  .lp-how-body-mockup {
    display: block;
    margin-top: 14px;
  }
  /* Override the max-height ceiling so the inline mockup gets full room. */
  .lp-how-item.is-open .lp-how-body { max-height: 1200px; }
  .lp-how-body-mockup .lp-formcard {
    padding: 20px 18px;
    border-radius: 14px;
    /* keep all internal content inside the card visually */
    overflow: hidden;
  }
  /* tighten internal mockup widths so nothing overflows on narrow phones */
  .lp-mock-offer { gap: 8px; padding: 10px; }
  .lp-mock-offer-mark { width: 28px; height: 28px; font-size: 12px; }
  .lp-mock-offer-name { font-size: 13px; }
  .lp-mock-offer-pmt { font-size: 13px; }
  .lp-mock-offer-cta { padding: 7px 10px; font-size: 11px; }
}

/* Stack offer card content on very narrow screens */
@media (max-width: 420px) {
  .lp-mock-offer { grid-template-columns: 1fr auto; }
  .lp-mock-offer-cta { grid-column: 1 / -1; width: 100%; }
  .lp-mock-share-row { gap: 6px; }
  .lp-mock-share { padding: 10px 4px; font-size: 11px; }
  .lp-mock-paid-grid { grid-template-columns: 1fr; gap: 10px; }
}

/* ----- SECTION 6 — VIDEO --------------------------------------------- */

.lp-section--video {
  background: var(--af-white);
  padding: 24px 56px 96px;
}
.lp-video-inner {
  max-width: 1240px;
  margin: 0 auto;
}
.lp-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 12px 32px rgba(0,0,0,0.10);
}
.lp-video-thumb {
  position: absolute; inset: 0;
  border: 0; padding: 0; margin: 0;
  cursor: pointer;
  background: transparent;
  width: 100%; height: 100%;
}
.lp-video-thumb img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.lp-video-thumb:hover img { transform: scale(1.02); }
/* Centered blue play button overlay (decorative — the whole thumb is the button) */
.lp-video-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  border-radius: 999px;
  background: var(--af-sapphire-sky);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px rgba(1,109,225,0.45);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), background 200ms ease;
  pointer-events: none;
}
.lp-video-play svg { margin-left: 4px; }
.lp-video-thumb:hover .lp-video-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--af-link-blue);
}
@media (max-width: 767px) {
  .lp-video-play { width: 56px; height: 56px; box-shadow: 0 10px 24px rgba(1,109,225,0.45); }
  .lp-video-play svg { width: 24px; height: 24px; }
}
.lp-video-iframe {
  width: 100%; height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 600px) {
  .lp-section--video { padding: 16px 16px 56px; }
  .lp-video-frame { border-radius: 12px; }
}

/* ----- SECTION 7 — VALUE PROP ---------------------------------------- */

.lp-section--value {
  background: var(--af-white);
  padding: 96px 56px 120px;
}
.lp-value-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 120px;
}
.lp-value-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity   900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.lp-value-row.is-in {
  opacity: 1;
  transform: translateY(0);
}
/* alternate which side the image sits on */
.lp-value-row--right .lp-value-img-wrap { order: 2; }
.lp-value-row--right .lp-value-text { order: 1; }

.lp-value-img-wrap {
  border-radius: 20px;
  overflow: visible;
}
.lp-value-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
}
.lp-value-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--af-ink-black);
  margin: 0 0 18px;}
.lp-value-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.6;
  color: var(--af-gray-800);
  max-width: 460px;
  margin: 0;
}

@media (max-width: 900px) {
  .lp-section--value { padding: 56px 24px 72px; }
  .lp-value-inner { gap: 64px; }
  .lp-value-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .lp-value-row--right .lp-value-img-wrap { order: 0; }
  .lp-value-row--right .lp-value-text { order: 0; }
}

/* ----- SECTION 8 — TESTIMONIALS -------------------------------------- */

.lp-section--testimonials {
  background: var(--af-white);
  padding: 80px 0 96px;
  text-align: center;
  /* card width drives slider math; clamped for responsive behavior */
  --test-card-w: clamp(320px, 60vw, 920px);
  --test-card-h: clamp(380px, 45vw, 560px);
  --test-gap: 24px;
  overflow: hidden;
}

/* overline with sloppy green marker-stroke highlight (centered) */
.lp-test-overline {
  display: inline-block;
  position: relative;
  margin-bottom: 12px;
}
.lp-test-overline-text {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--af-ink-black);
  padding: 0 2px 9px;
}
.lp-test-overline::before {
  content: "";
  position: absolute;
  left: -8px; right: -8px;
  bottom: 0;
  height: 11px;
  /*background: url("/wp-content/uploads/assets/h1-paint-stroke.png") center/100% 100% no-repeat;*/
  z-index: 0;
  pointer-events: none;
}

.lp-test-h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(28px, 3.8vw, 52px);
  letter-spacing: -0.02em;
  color: var(--af-ink-black);
  margin: 0 auto 48px;line-height: 1.05;
  text-wrap: balance;
  max-width: 1080px;
  padding: 0 24px;
}
.lp-test-h2 span { color: var(--af-ink-black); }

.lp-test-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* slider: a horizontally-overflowing track translated by idx */
.lp-test-slider {
  width: 100%;
  overflow: hidden;
  margin-bottom: 32px;
  /* allow touch swipe without interfering with vertical page scroll */
  touch-action: pan-y;
}
.lp-test-track {
  display: flex;
  gap: var(--test-gap);
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  /* Offset is computed in JS (initTestimonials) and set inline as a px
     translateX against the slider's OWN width. Driving it from JS instead
     of a CSS calc() keeps the carousel immune to WordPress CSS minifiers
     (which strip the required whitespace around calc() '-' operators and
     would otherwise drop this transform entirely) and avoids the old
     50vw-vs-container mismatch once the slider sits in a constrained column. */
  transform: translateX(0);
  will-change: transform;
}
.lp-test-card {
  flex: 0 0 var(--test-card-w);
  height: var(--test-card-h);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  transition: opacity 400ms ease, transform 400ms ease;
}
.lp-test-card:not(.is-active) {
  opacity: 0.35;
  cursor: pointer;
}
.lp-test-card:not(.is-active):hover {
  opacity: 0.55;
}
.lp-test-card:not(.is-active):focus-visible {
  outline: 3px solid var(--af-sapphire-sky);
  outline-offset: 4px;
  opacity: 0.7;
}

.lp-test-sil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.lp-test-quote-block {
  position: absolute;
  top: 50%;
  left: clamp(20px, 4%, 56px);
  transform: translateY(-50%);
  background: var(--af-white);
  border-radius: 18px;
  padding: clamp(20px, 3%, 32px);
  max-width: clamp(280px, 44%, 460px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.20);
  text-align: left;
}
.lp-test-badge {
  display: inline-block;
  background: var(--af-alice-blue);
  color: var(--af-sapphire-sky);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.lp-test-quote {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.4;
  color: var(--af-ink-black);
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}
.lp-test-author {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--af-ink-black);
}
.lp-test-company {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--af-gray-700);
  margin-top: 2px;
}

.lp-test-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0 24px;
}
.lp-test-dot {
  width: 18px;
  height: 6px;
  background: var(--af-gray-300);
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: background 200ms ease, width 200ms ease;
}
.lp-test-dot.is-on {
  background: var(--af-sapphire-sky);
  width: 32px;
}

/* prev / next arrows flanking the dots; hidden (but space kept) at the ends */
.lp-test-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.lp-test-arrow {
  width: 44px; height: 44px;
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--af-gray-400);
  background: var(--af-white);
  color: var(--af-deep-space-blue);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.lp-test-arrow:hover,
.lp-test-arrow:focus-visible {
  background: var(--af-sapphire-sky);
  border-color: var(--af-sapphire-sky);
  color: var(--af-white);
  outline: none;
}
.lp-test-arrow.is-hidden { visibility: hidden; }

/* Mobile (<=600px): single card fills viewport, quote block fills card */
@media (max-width: 600px) {
  .lp-section--testimonials {
    --test-card-w: calc(100vw - 32px);
    --test-card-h: 460px;
    --test-gap: 16px;
    padding: 48px 0 64px;
  }
  .lp-test-h2 { margin-bottom: 32px; }
  .lp-test-quote-block {
    left: 16px;
    right: 16px;
    max-width: none;
    padding: 20px 22px;
  }
}

/* ----- SECTION 9 — FINAL CTA ----------------------------------------- */

.lp-section--final {
  background: var(--af-deep-space-blue);
  color: var(--af-white);
  padding: 120px 24px 120px;
  text-align: center;
}
.lp-final-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.lp-final-h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(36px, 7vw, 96px);
  line-height: 1.04;
  letter-spacing: -0.025em;color: var(--af-white);
  margin: 0 0 28px;
  text-wrap: balance;
}
.lp-final-sub {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  margin: 0 auto 36px;
  max-width: 720px;
}
.lp-final-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 44px;
}
.lp-final-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.20);
  color: var(--af-white);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 999px;
}
.lp-final-ctas {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
/* re-use .lp-cta + .lp-cta--primary for "Sign up now" */

.lp-final-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--af-ocean);
  color: var(--af-white);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  padding: 16px 32px;
  border-radius: 10px;
  text-decoration: none;
  transition: background 140ms ease, transform 140ms ease;
}
.lp-final-secondary:hover {
  background: #0a3f5f;
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .lp-section--final { padding: 72px 16px; }
  .lp-final-pills { gap: 8px; margin-bottom: 32px; }
  .lp-final-pill { font-size: 13px; padding: 9px 14px; }
}

/* ----- SECTION 10 — FAQs --------------------------------------------- */

.lp-section--faqs {
  background: var(--af-white);
  padding: 96px 24px 120px;
}
.lp-faq-inner {
  max-width: 980px;
  margin: 0 auto;
}
.lp-faq-overline {
  display: inline-block;
  position: relative;
  margin: 0 auto 16px;
  left: 50%;
  transform: translateX(-50%);
}
.lp-faq-overline-text {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--af-ink-black);
  padding: 0 2px 9px;
}
.lp-faq-overline::before {
  content: "";
  position: absolute;
  left: -8px; right: -8px;
  bottom: 0;
  height: 11px;
  /*background: url("/wp-content/uploads/assets/h1-paint-stroke.png") center/100% 100% no-repeat;*/
  z-index: 0;
  pointer-events: none;
}
.lp-faq-h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(32px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-align: center;color: var(--af-ink-black);
  margin: 0 0 56px;
}
.lp-faq-list { display: flex; flex-direction: column; }
.lp-faq-item {
  border-top: 1px solid var(--af-gray-300);
}
.lp-faq-item:last-child { border-bottom: 1px solid var(--af-gray-300); }
.lp-faq-row {
  background: transparent;
  border: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 4px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  color: var(--af-ink-black);
  transition: color 140ms ease;
}
.lp-faq-row:hover, .lp-faq-row:focus { color: var(--af-sapphire-sky); background-color:transparent !important; }
.lp-faq-q {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
}
.lp-faq-chev {
  color: var(--af-ink-black);
  transition: transform 280ms ease;
  display: inline-flex;
}
.lp-faq-item.is-open .lp-faq-chev { transform: rotate(180deg); }
.lp-faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 320ms ease;
}
.lp-faq-item.is-open .lp-faq-body { max-height: 320px; }
.lp-faq-body-inner {
  padding: 0 4px 22px 4px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--af-gray-800);
  line-height: 1.6;
  max-width: 760px;
}

@media (max-width: 600px) {
  .lp-section--faqs { padding: 56px 16px 72px; }
  .lp-faq-h2 { margin-bottom: 36px; }
  .lp-faq-q { font-size: 15px; }
}

/* ----- SECTION 11 — RELATED ARTICLES --------------------------------- */

.lp-section--articles {
  background: var(--af-white);
  padding: 96px 56px;
}
.lp-art-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.lp-art-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 36px;
  gap: 24px;
}
.lp-art-h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 52px);
  letter-spacing: -0.025em;
  color: var(--af-ink-black);
  margin: 0;line-height: 1.0;
}
.lp-art-seeall {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  color: var(--af-sapphire-sky);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: color 140ms ease;
}
.lp-art-seeall:hover { color: var(--af-link-blue); }
.lp-art-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.lp-art-card {
  background: var(--af-white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.05),
    0 4px 14px rgba(0,0,0,0.05);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.lp-art-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.05),
    0 12px 28px rgba(0,0,0,0.10);
}
.lp-art-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.lp-art-illus {
  display: block;
  width: 100%;
  height: 100%;
}
.lp-art-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lp-art-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  color: var(--af-ink-black);
  margin: 0;
}
.lp-art-date {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--af-gray-700);
}
.lp-art-byline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--af-gray-800);
}
.lp-art-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 40%, #5C3A1F 0%, #5C3A1F 40%, transparent 41%),
    linear-gradient(140deg, #A47147, #5C3A1F);
  display: inline-block;
  flex: 0 0 auto;
}
.lp-art-author {
  color: var(--af-sapphire-sky);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

@media (max-width: 900px) {
  .lp-art-grid { grid-template-columns: 1fr; gap: 20px; }
  .lp-section--articles { padding: 64px 24px; }
  .lp-art-head { margin-bottom: 24px; }
}

/* ----- SECTION 12 — TRENDING SEARCHES -------------------------------- */

.lp-section--trending {
  background: var(--af-white);
  padding: 24px 56px 96px;
}
.lp-trend-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.lp-trend-h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 52px);
  letter-spacing: -0.025em;
  text-align: center;color: var(--af-ink-black);
  margin: 0 0 48px;
  line-height: 1.0;
}
.lp-trend-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.lp-trend-card {
  background: var(--af-alice-blue);
  color: var(--af-sapphire-sky);
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  padding: 28px 22px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  min-height: 96px;
  transition: background 160ms ease, transform 160ms ease, color 160ms ease;
}
.lp-trend-card:hover {
  background: var(--af-icy-blue);
  color: var(--af-link-blue);
  transform: translateY(-2px);
}

@media (max-width: 900px) {
  .lp-trend-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-section--trending { padding: 16px 24px 64px; }
}
@media (max-width: 480px) {
  .lp-trend-grid { grid-template-columns: 1fr; }
  .lp-trend-card { min-height: 72px; padding: 20px; font-size: 14px; }
}

/* ----- SECTION 13 — SEO COPY ----------------------------------------- */

.lp-section--seo {
  background: var(--af-white);
  padding: 24px 56px 96px;
}
.lp-seo-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.lp-seo-card {
  background: var(--af-alice-blue);
  border-radius: 24px;
  padding: 36px 40px;
}
.lp-seo-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: -0.02em;color: var(--af-ink-black);
  margin: 0 0 16px;
  line-height: 1.15;
}
.lp-seo-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: var(--af-ink-black);
  margin: 0;
}
.lp-seo-more {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms ease;
}
.lp-seo-card.is-open .lp-seo-more {
  max-height: 600px;
}
.lp-seo-more p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: var(--af-ink-black);
  margin: 16px 0 0;
}
.lp-seo-toggle {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--af-sapphire-sky);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  padding: 0;
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 140ms ease;
}
.lp-seo-toggle:hover { color: var(--af-link-blue); }
.lp-seo-toggle svg { transition: transform 280ms ease; }
.lp-seo-card.is-open .lp-seo-toggle svg { transform: rotate(180deg); }

@media (max-width: 600px) {
  .lp-section--seo { padding: 16px 16px 64px; }
  .lp-seo-card { padding: 28px 24px; border-radius: 18px; }
}

/* ----- SECTION 14 — FOOTER ------------------------------------------- */

.lp-section--footer {
  background: var(--af-deep-space-blue);
  color: var(--af-white);
  padding: 64px 56px 56px;
  font-family: var(--font-sans);
}
.lp-foot-inner {
  max-width: 1240px;
  margin: 0 auto;
}
.lp-foot-logo {
  display: inline-block;
  text-decoration: none;
}
.lp-foot-logo img {
  height: 40px;
  width: auto;
  display: block;
}
.lp-foot-tagline {
  font-family: var(--font-sans);
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  margin: 16px 0 28px;
}
.lp-foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-bottom: 28px;
}
.lp-foot-link {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  color: var(--af-bright-blue);
  text-decoration: none;
  transition: color 140ms ease;
}
.lp-foot-link:hover { color: var(--af-icy-blue); }
.lp-foot-rule {
  height: 1px;
  background: rgba(255,255,255,0.10);
  margin: 0 0 24px;
}
.lp-foot-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}
.lp-foot-meta p {
  font-family: var(--font-sans);
  font-size: 13px;
  color: rgba(255,255,255,0.78);
  margin: 0;
  line-height: 1.5;
}
.lp-foot-inline-link {
  color: var(--af-bright-blue);
  text-decoration: none;
  font-weight: 600;
}
.lp-foot-inline-link:hover { color: var(--af-icy-blue); }
.lp-foot-legal {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lp-foot-legal h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--af-white);
  margin: 8px 0 -4px;
}
.lp-foot-legal p {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255,255,255,0.65);
  margin: 0;
}
.lp-foot-legal sup {
  font-size: 10px;
  vertical-align: super;
  margin-right: 1px;
  color: rgba(255,255,255,0.78);
}

@media (max-width: 600px) {
  .lp-section--footer { padding: 48px 24px 40px; }
  .lp-foot-nav { gap: 14px 20px; }
}

/* =====================================================================
   MOBILE PASS (≤600px) — consistent padding, sizing, touch targets
   ===================================================================== */
@media (max-width: 600px) {
  /* Hero */
  .lp-hero-inner { padding: 36px 20px 0; }
  .lp-tab-toggle { margin-bottom: 18px; }
  .lp-tab-toggle button { padding: 11px 22px; font-size: 14px; }
  .lp-h1 { font-size: clamp(26px, 10vw, 38px); margin-bottom: 14px; }
  .lp-sub { font-size: 15px; margin: 4px 0 22px; padding: 0 6px; }
  .lp-ctas { width: 100%; flex-direction: column; gap: 10px; margin-bottom: 24px; }
  .lp-ctas .lp-cta { width: 100%; min-height: 52px; }
  .lp-cta--primary { padding: 14px 24px; }
  .lp-cta--link { padding: 14px 18px; }
  .lp-trust { gap: 8px; }
  .lp-trust-pill { font-size: 12px; padding: 8px 10px; gap: 8px; }

  /* Lenders */
  .lp-section--lenders { padding: 36px 16px; }
  .lp-overline { font-size: 12px; letter-spacing: 2px; margin-bottom: 24px; }
  .lp-lenders-row { gap: 18px 28px; }
  .lp-lender { height: 30px; }
  .lp-lenders-more { font-size: 12px; }

  /* Comparison */
  .lp-section--comparison { padding: 48px 12px 64px; }
  .lp-comp-h2 { font-size: clamp(36px, 11vw, 52px); margin-bottom: 24px; letter-spacing: -0.03em; }
  .lp-comp-sub { font-size: 13px; line-height: 1.5; margin-bottom: 28px; padding: 0 8px; }
  .lp-comp-table { grid-template-columns: minmax(120px, 1.3fr) repeat(4, 1fr); }
  .lp-comp-cell { padding: 14px 4px; }
  .lp-comp-cell--label { font-size: 12px; line-height: 1.3; padding-right: 4px; }
  .lp-comp-logo { font-size: 9px; gap: 3px; }
  .lp-comp-logo svg { width: 14px; height: 12px; }
  .lp-comp-logo-text { letter-spacing: 0.5px; }
  .lp-comp-logo--type { font-size: 9px; letter-spacing: 0.4px; }
  .lp-comp-logo-img { height: 16px; }

  /* Stats — already stacks at 900; tighten mobile */
  .lp-stat { padding: 36px 28px 28px; min-height: 180px; border-radius: 22px; }
  .lp-stat-value { font-size: clamp(48px, 14vw, 72px); }
  .lp-stat-label { font-size: 14px; margin-top: 24px; }

  /* How it works — full mobile pass */
  .lp-section--how { padding: 48px 20px; }
  .lp-how-overline { margin-bottom: 20px; }
  .lp-how-overline-text { font-size: 12px; }
  .lp-how-h2 { font-size: clamp(30px, 9vw, 44px); margin-bottom: 28px; }
  .lp-how-row { padding: 18px 4px; min-height: 56px; gap: 12px; }
  .lp-how-icon { width: 36px; height: 36px; }
  .lp-how-label { font-size: 16px; }
  .lp-how-body-inner { padding: 0 4px 20px 50px; font-size: 13px; }
  .lp-formcard { padding: 32px 20px; }
  .lp-formcard-inner { padding: 24px 20px; }
  .lp-stepper { gap: 10px; }
  .lp-step { width: 32px; height: 32px; font-size: 13px; }
  .lp-tooltip { font-size: 12px; padding: 8px 12px; }
  .lp-select { padding: 12px; font-size: 13px; }
  .lp-form-next { padding: 14px; min-height: 48px; }

  /* Video */
  .lp-section--video { padding: 12px 12px 48px; }

  /* Value Prop */
  .lp-section--value { padding: 48px 20px 56px; }
  .lp-value-inner { gap: 56px; }
  .lp-value-title { font-size: clamp(24px, 7vw, 32px); margin-bottom: 12px; }
  .lp-value-body { font-size: 14px; }

  /* Testimonials — already responsive; tighten copy */
  .lp-test-h2 { padding: 0 16px; font-size: clamp(26px, 7.5vw, 36px); }
  .lp-test-overline-text { font-size: 12px; }
  .lp-test-badge { font-size: 11px; padding: 6px 12px; margin-bottom: 12px; }
  .lp-test-quote { font-size: 15px; }

  /* Final CTA */
  .lp-section--final { padding: 64px 20px; }
  .lp-final-h2 { font-size: clamp(34px, 10vw, 52px); margin-bottom: 20px; }
  .lp-final-sub { font-size: 14px; margin-bottom: 28px; padding: 0 4px; }
  .lp-final-ctas { width: 100%; flex-direction: column; gap: 10px; }
  .lp-final-ctas .lp-cta,
  .lp-final-ctas .lp-final-secondary { width: 100%; min-height: 52px; }

  /* FAQs */
  .lp-section--faqs { padding: 48px 20px 64px; }
  .lp-faq-overline-text { font-size: 12px; }
  .lp-faq-h2 { font-size: clamp(28px, 8vw, 40px); margin-bottom: 24px; }
  .lp-faq-row { padding: 18px 4px; min-height: 56px; gap: 12px; }
  .lp-faq-q { font-size: 14px; line-height: 1.35; }
  .lp-faq-body-inner { font-size: 13px; padding-bottom: 18px; }

  /* Articles */
  .lp-section--articles { padding: 48px 20px; }
  .lp-art-head { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 20px; }
  .lp-art-h2 { font-size: clamp(28px, 8vw, 40px); }
  .lp-art-seeall { font-size: 14px; }
  .lp-art-body { padding: 18px 18px 20px; }
  .lp-art-title { font-size: 16px; }
  .lp-art-date { font-size: 12px; }

  /* Trending */
  .lp-section--trending { padding: 12px 20px 56px; }
  .lp-trend-h2 { font-size: clamp(28px, 8vw, 40px); margin-bottom: 28px; }

  /* SEO */
  .lp-section--seo { padding: 12px 20px 56px; }
  .lp-seo-card { padding: 24px 20px; }
  .lp-seo-h3 { font-size: clamp(20px, 6vw, 26px); margin-bottom: 14px; }
  .lp-seo-body { font-size: 14px; }
  .lp-seo-more p { font-size: 14px; }

  /* Footer */
  .lp-section--footer { padding: 40px 20px 32px; }
  .lp-foot-logo img { height: 32px; }
  .lp-foot-tagline { font-size: 13px; margin: 12px 0 20px; }
  .lp-foot-nav { gap: 10px 18px; margin-bottom: 20px; }
  .lp-foot-link { font-size: 13px; }
  .lp-foot-meta p { font-size: 12px; }
  .lp-foot-legal p { font-size: 11px; }
  .lp-foot-legal h4 { font-size: 12px; }
}

/* Very narrow (≤360px): squeeze comparison table a hair more */
@media (max-width: 360px) {
  .lp-comp-table { grid-template-columns: minmax(100px, 1.2fr) repeat(4, 1fr); }
  .lp-comp-cell--label { font-size: 11px; }
  .lp-comp-cell { padding: 12px 3px; }
}


/* =====================================================================
   BORROWER PAGE — sections unique to /borrowers
   ===================================================================== */

/* Shared overline — ink-black uppercase text with a lime underline bar
   that sits just below the cap-line. Used on all /borrower section
   eyebrows so the page has a consistent typographic accent. */
.bo-overline {
  display: inline-block;
  position: relative;
  margin-bottom: 18px;
}
.bo-overline-text {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--af-ink-black);
  padding: 0 2px;
}
.bo-overline::after {
  content: "";
  position: absolute;
  left: -4px; right: -4px;
  bottom: -2px;
  height: 8px;
 /* background: var(--af-lime-bright);*/
  z-index: 0;
}

/* ----- BORROWER CATEGORIES ------------------------------------------- */

.bo-section--categories {
  background: var(--af-white);
  padding: 96px 56px 72px;
}
.bo-cat-inner {
  max-width: 1240px;
  margin: 0 auto;
}
.bo-cat-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  margin-bottom: 40px;
}
.bo-cat-head .bo-overline {
  grid-column: 1;
}
.bo-cat-h2 {
  grid-column: 1;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--af-ink-black);
}
.bo-cat-seeall {
  grid-column: 2;
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--af-sapphire-sky);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 6px;
  transition: color 140ms ease, transform 140ms ease;
}
.bo-cat-seeall:hover {
  color: var(--af-link-blue);
  transform: translateX(2px);
}
.bo-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.bo-cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--af-alice-blue);
  border: 1px solid rgba(1, 109, 225, 0.08);
  border-radius: 18px;
  padding: 32px 28px 28px;
  text-decoration: none;
  color: var(--af-ink-black);
  min-height: 260px;
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 220ms ease,
              border-color 220ms ease,
              background 220ms ease;
  overflow: hidden;
}
.bo-cat-card::after {
  content: "";
  position: absolute;
  inset: auto -40% -60% auto;
  width: 70%;
  height: 70%;
  background: radial-gradient(closest-side, rgba(0, 146, 255, 0.12), transparent 70%);
  pointer-events: none;
  opacity: 0.7;
}
.bo-cat-card:hover {
  transform: translateY(-4px);
  background: var(--af-white);
  border-color: rgba(1, 109, 225, 0.22);
  box-shadow: 0 12px 28px rgba(0, 39, 62, 0.10);
}
.bo-cat-icon {
  position: relative;
  margin-bottom: 18px;
  width: 96px;
  height: 96px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.bo-cat-icon-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0, 39, 62, 0.18));
  transition: opacity 80ms linear;
}
.bo-cat-icon-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0, 39, 62, 0.18));
  /* Video snaps in (instant) and fades out fast. While it's on, the PNG
     hides instantly — the video carries the same poster image so there's
     no visible gap during the swap. */
  opacity: 0;
  transition: opacity 80ms linear;
  pointer-events: none;
}
.bo-cat-icon-video.is-on {
  opacity: 1;
  transition: opacity 0s;
}
.bo-cat-card:has(.bo-cat-icon-video.is-on) .bo-cat-icon-img {
  opacity: 0;
  transition: opacity 0s;
}
.bo-cat-card:hover .bo-cat-icon {
  transform: translateY(-3px) scale(1.04);
}
.bo-cat-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  line-height: 1.15;
}
.bo-cat-blurb {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: var(--af-gray-800);
  margin: 0 0 28px;
  flex: 1;
}
.bo-cat-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: var(--af-white);
  border: 1px solid rgba(1, 109, 225, 0.22);
  color: var(--af-sapphire-sky);
  border-radius: 999px;
  transition: background 180ms ease, transform 180ms ease, color 180ms ease;
  align-self: flex-start;
}
.bo-cat-card:hover .bo-cat-arrow {
  background: var(--af-sapphire-sky);
  color: var(--af-white);
  transform: translateX(4px);
}

/* ----- MILLION CUSTOMERS --------------------------------------------- */

.bo-section--million {
  background: var(--af-white);
  padding: 24px 56px 96px;
}
.bo-million-inner {
  max-width: 1240px;
  margin: 0 auto;
  text-align: center;
}
.bo-million-h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(36px, 6vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 48px;
  color: var(--af-ink-black);
  text-wrap: balance;
}
.bo-million-emph {
  position: relative;
  display: inline-block;
  color: var(--af-ink-black);
  white-space: nowrap;
}
.bo-million-emph .lp-h1-paint-img {
  /* re-position the painted stroke under this dark-on-white callout */
  bottom: -0.14em;
}
.bo-million-trustpilot {
  margin-top: 48px;
}

/* ----- PAYMENT ESTIMATOR -------------------------------------------- */

.bo-section--estimator {
  background: var(--af-alice-blue);
  padding: 96px 56px;
  position: relative;
  overflow: hidden;
}
.bo-estimator-inner {
  max-width: 1240px;
  margin: 0 auto;
  text-align: center;
}
.bo-estimator-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 40px;
  color: var(--af-ink-black);
  text-wrap: balance;
}
.bo-estimator-widget {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* ----- FEATURE BLOCKS ------------------------------------------------ */

.bo-section--features {
  background: var(--af-alice-blue);
  padding: 96px 56px;
  position: relative;
  overflow: hidden;
}
.bo-section--features::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 400px at 10% 20%, rgba(1, 109, 225, 0.06), transparent 60%),
    radial-gradient(700px 400px at 90% 80%, rgba(155, 236, 0, 0.06), transparent 60%);
  pointer-events: none;
}
.bo-feat-inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 96px;
}
.bo-feat-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}
.bo-feat-row--left .bo-feat-text { order: 2; }
.bo-feat-row--left .bo-feat-art  { order: 1; }
.bo-feat-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: var(--af-ink-black);
  text-wrap: balance;
}
.bo-feat-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--af-gray-800);
  margin: 0;
  max-width: 480px;
}
.bo-feat-art {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 280px;
}
.bo-feat-img {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  /* Source images already include floating UI cards that extend past the
     photo edge — don't clip them with border-radius. */
}

/* ----- RATE TABLE ---------------------------------------------------- */

.bo-section--rates {
  background: var(--af-white);
  padding: 96px 56px;
}
.bo-rate-inner {
  max-width: 1240px;
  margin: 0 auto;
  text-align: center;
}
.bo-rate-h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--af-ink-black);
  text-wrap: balance;
}
.bo-rate-sub {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  color: var(--af-gray-800);
  margin: 0 auto 36px;
  max-width: 640px;
}
.bo-rate-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 28px;
}
.bo-rate-filter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
}
.bo-rate-filter-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--af-gray-700);
}
.bo-rate-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--af-white);
  border: 1px solid var(--af-gray-300);
  border-radius: 10px;
  padding: 12px 16px;
  min-width: 200px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--af-ink-black);
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.bo-rate-select:hover {
  border-color: var(--af-sapphire-sky);
}
.bo-rate-select svg {
  margin-left: auto;
  color: var(--af-gray-700);
}
.bo-rate-select select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.bo-rate-table {
  text-align: left;
  background: var(--af-white);
  border: 1px solid var(--af-gray-200);
  border-radius: 14px;
  overflow: hidden;
}
.bo-rate-thead {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr auto;
  gap: 16px;
  padding: 14px 24px;
  background: var(--af-gray-100);
  border-bottom: 1px solid var(--af-gray-200);
}
.bo-rate-th {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--af-gray-700);
}
.bo-rate-th--cta { min-width: 110px; }
.bo-rate-row {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr auto;
  gap: 16px;
  padding: 18px 24px;
  align-items: center;
  border-bottom: 1px solid var(--af-gray-200);
  transition: background 140ms ease;
}
.bo-rate-row:last-child { border-bottom: 0; }
.bo-rate-row:hover { background: var(--af-alice-blue); }
.bo-rate-cell { min-width: 0; }
.bo-rate-cell--lender {
  display: flex;
  align-items: center;
  gap: 14px;
}
.bo-rate-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 10px;
  background: var(--af-white);
  border: 1px solid var(--af-gray-200);
  padding: 6px;
  flex-shrink: 0;
}
.bo-rate-cell-name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--af-ink-black);
}
.bo-rate-figure {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--af-ink-black);
  line-height: 1.1;
}
.bo-rate-meta {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--af-gray-700);
  margin-top: 4px;
}
.bo-rate-cell--cta { text-align: right; min-width: 110px; }
.bo-rate-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--af-sapphire-sky);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}
.bo-rate-more:hover {
  background: var(--af-alice-blue);
  color: var(--af-link-blue);
  transform: translateX(2px);
}

/* ----- TABLET ADJUSTMENTS -------------------------------------------- */
@media (max-width: 900px) {
  .bo-section--categories,
  .bo-section--estimator,
  .bo-section--million,
  .bo-section--features,
  .bo-section--rates { padding: 64px 32px; }
  .bo-cat-grid { grid-template-columns: 1fr; gap: 16px; }
  .bo-cat-head { grid-template-columns: 1fr; }
  .bo-cat-seeall { grid-column: 1; align-self: flex-start; }
  .bo-feat-row { grid-template-columns: 1fr; gap: 40px; }
  .bo-feat-row--left .bo-feat-text { order: 1; }
  .bo-feat-row--left .bo-feat-art  { order: 2; }
  .bo-feat-inner { gap: 64px; }
  .bo-feat-body { max-width: 100%; }
  .bo-rate-thead { display: none; }
  .bo-rate-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "lender lender"
      "apr term"
      "amount cta";
    row-gap: 12px;
  }
  .bo-rate-cell--lender { grid-area: lender; }
  .bo-rate-cell:nth-of-type(2) { grid-area: apr; }
  .bo-rate-cell:nth-of-type(3) { grid-area: term; }
  .bo-rate-cell:nth-of-type(4) { grid-area: amount; }
  .bo-rate-cell--cta { grid-area: cta; text-align: right; align-self: end; }
}

/* ----- MOBILE -------------------------------------------------------- */
@media (max-width: 600px) {
  .bo-section--categories,
  .bo-section--estimator,
  .bo-section--million,
  .bo-section--features,
  .bo-section--rates { padding: 56px 20px; }
  .bo-cat-card { min-height: 220px; padding: 26px 22px 24px; }
  .bo-cat-icon { width: 76px; height: 76px; }
  .bo-cat-label { font-size: 19px; }
  .bo-cat-blurb { font-size: 14px; }
  .bo-million-h2 { font-size: clamp(30px, 9vw, 44px); }
  .bo-feat-art { min-height: auto; }
  .bo-rate-h2 { font-size: clamp(30px, 8vw, 44px); }
  .bo-rate-sub { font-size: 15px; }
  .bo-rate-filter { width: 100%; }
  .bo-rate-select { width: 100%; }
  .bo-rate-logo { width: 44px; height: 44px; }
  .bo-rate-cell-name { font-size: 14px; }
  .bo-rate-figure { font-size: 15px; }
  .bo-rate-row { padding: 16px; }
}


/* =====================================================================
   BORROWER HERO — light-bg variant (icy-blue background)
   ===================================================================== */

.lp-section--hero.bo-hero {
  background: var(--af-icy-blue);     /* #B7E7FF */
  color: var(--af-ink-black);         /* #03171A */
}
/* Replace the dark ambient overlay with a soft light wash. */
.lp-section--hero.bo-hero::before {
  background:
    radial-gradient(1100px 600px at 50% -10%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(700px 500px at 90% 30%, rgba(1, 109, 225, 0.06), transparent 60%);
}

/* H1 + sub recolor */
.bo-hero .lp-h1-white { color: var(--af-ink-black); }
.bo-hero .lp-sub      { color: rgba(3, 23, 26, 0.72); }
.bo-hero .lp-sub strong { color: var(--af-ink-black); }

/* Audience tab toggle — dark-on-light treatment */
.bo-hero .lp-tab-toggle {
  background: rgba(3, 23, 26, 0.06);
  border-color: rgba(3, 23, 26, 0.10);
}
.bo-hero .lp-tab-toggle button {
  color: rgba(3, 23, 26, 0.55);
}
.bo-hero .lp-tab-toggle button.is-on {
  color: var(--af-ink-black);
}
.bo-hero .lp-tab-pill {
  background: var(--af-white);
  box-shadow: 0 2px 8px rgba(0, 39, 62, 0.18), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

/* Secondary link CTA — sapphire reads better than bright-blue on icy. */
.bo-hero .lp-cta--link {
  color: var(--af-sapphire-sky);
}
.bo-hero .lp-cta--link:hover {
  color: var(--af-link-blue);
}

/* Trust pills — translucent white capsules with dark ink content. */
.bo-hero .lp-trust-pill {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(3, 23, 26, 0.08);
  color: var(--af-ink-black);
}
.bo-hero .lp-trust-pill .lp-trust-label {
  color: var(--af-ink-black);
}
.bo-hero .lp-trust-src {
  color: rgba(3, 23, 26, 0.7);
  opacity: 1;
}
/* Star ratings — gold-filled portion + ink-tinted unfilled portion.
   LPStar uses a 2-stop linearGradient with the same offset (hard split);
   stop-color is CSS-styleable, so we recolor both stops here. */
.bo-hero .lp-trust-stars svg stop:nth-of-type(1) {
  stop-color: var(--af-warning);   /* #FFAC0A */
  stop-opacity: 1;
}
.bo-hero .lp-trust-stars svg stop:nth-of-type(2) {
  stop-color: rgba(3, 23, 26, 0.18);
  stop-opacity: 1;
}

/* BBB pill — invert so the white wrapper reads as a chip on the lighter
   white-translucent trust pill. */
.bo-hero .lp-trust-pill--bbb {
  background: rgba(255, 255, 255, 0.75);
}
.bo-hero .lp-bbb {
  background: var(--af-deep-space-blue);
  color: var(--af-white);
}

/* Push the lime paint stroke a hair lower on the borrower hero so it
   clears the descenders ("g" in "leading") rather than overlaying them. */
.bo-hero .lp-h1-paint-img {
  bottom: -0.30em;
}

/* On large viewports, keep "the nation's leading lenders." together so
   the H1 breaks cleanly into two lines. Smaller breakpoints allow it to
   wrap naturally — nowrap there would overflow. */
.bo-h1-tail {
  display: inline;
}
@media (min-width: 1100px) {
  .bo-h1-tail { white-space: nowrap; }
}

/* Measured-stroke H1: the .lp-h1-paint-img is positioned by JS based on
   the last line's bounding rect; override the static positioning + the
   sweep clip-path animation that the contractor variant uses. */
.bo-h1-measured {
  position: relative;
}
.bo-h1-paint-dynamic {
  position: absolute;
  bottom: auto;
  height: auto;
  pointer-events: none;
  /* Shift up so the stroke overlaps the bottom of the text slightly,
     matching the look of the static version. */
  transform: translateY(-0.20em);
  /* Sweep-in animation is inherited from .lp-h1-paint-img — clip-path
     reveals the stroke left-to-right on mount, then `forwards` holds
     the revealed state through resize-driven re-measures. */
}


/* =====================================================================
   BORROWER HERO — Lender offer carousel (replaces ArcCarousel here)
   ===================================================================== */

/* Stage layer that sits inside .phone-stage alongside the PhoneFrame.
   Lender cards arc around the phone with the focused card aligned to
   the phone screen stage slot — same motion concept as the contractor
   landing's notification arc. */
.lender-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
/* Faint dashed arc behind the cards reinforces the radial motion. */
.lender-arc-guide {
  position: absolute;
  left: 0; right: 0; top: 56px;
  width: 100%;
  height: 600px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
}
/* Per-card placement shell — every card lives here; transform/opacity
   come from the inline style produced by lenderArcTransform(). Anchored
   so the focused card sits over the phone screen stage slot. */
.lc-card-shell {
  position: absolute;
  top: 286px;
  left: 50%;
  width: 384px;
  opacity: 0; /* initial state — lenderArcTransform() drives opacity from JS */
  transform-origin: top center;
  transition:
    transform 700ms cubic-bezier(0.4, 0.0, 0.2, 1),
    opacity 500ms ease,
    filter 500ms ease;
  pointer-events: auto;
  will-change: transform, opacity, filter;
}
.lc-card-shell.is-focused { z-index: 100; }

/* The card itself — white surface, soft shadow, brand-color top stripe
   only on the focused card so the back stack reads quieter. */
.lc-card {
  position: relative;
  background: var(--af-white);
  border-radius: 18px;
  border: 1px solid rgba(0, 39, 62, 0.06);
  padding: 18px 20px 18px;
  box-shadow:
    0 24px 60px rgba(0, 39, 62, 0.18),
    0 4px 14px rgba(0, 39, 62, 0.05);
  font-family: var(--font-sans);
}
.lc-card.is-focused {
  box-shadow:
    0 30px 70px rgba(0, 39, 62, 0.26),
    0 6px 18px rgba(0, 39, 62, 0.10),
    0 0 0 1px rgba(1, 109, 225, 0.08);
}

/* Header row: circular logo + lender name + offer-count pill. */
.lc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.lc-logo {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--af-white);
  border: 1px solid rgba(0, 39, 62, 0.10);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 39, 62, 0.10);
}
.lc-logo img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}
.lc-logo img.lc-logo-icon {
  width: 56%;
  height: 56%;
}
.lc-logo-initial {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  color: var(--af-sapphire-sky);
  letter-spacing: -0.01em;
}
.lc-id {
  display: flex; flex-direction: column;
  min-width: 0;
}
.lc-name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  color: var(--af-ink-black);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.lc-tag {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--af-gray-700);
  margin-top: 3px;
}
.lc-pill {
  margin-left: auto;
  background: var(--af-alice-blue);
  color: var(--af-sapphire-sky);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}

/* Offer rows */
.lc-offers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lc-offer {
  display: grid;
  grid-template-columns: 1fr 1.2fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  background: var(--af-gray-100);
  border: 1px solid rgba(0, 39, 62, 0.04);
  border-radius: 12px;
}
.lc-offer--best {
  background: var(--af-alice-blue);
  border-color: rgba(1, 109, 225, 0.16);
}
.lc-offer-stat {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lc-offer-figure {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--af-ink-black);
  line-height: 1.05;
}
.lc-offer-suf {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--af-gray-700);
  margin-left: 1px;
}
.lc-offer-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--af-gray-700);
  margin-top: 3px;
}
.lc-offer-btn {
  background: var(--af-sapphire-sky);
  color: var(--af-white);
  border: 0;
  border-radius: 8px;
  padding: 9px 14px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(1, 109, 225, 0.32);
  white-space: nowrap;
}

/* When a card has two offers, the top (best) row pops a touch more. */
.lc-card--multi .lc-offer--best .lc-offer-figure { font-size: 20px; }

/* Reduced motion: snap focus instead of animating through the stack. */
@media (prefers-reduced-motion: reduce) {
  .lc-card-shell {
    transition: opacity 200ms ease;
  }
}

/* Small-screen guard: at the 1440-design baseline the cards sit on the
   right; the .lp-hero-stage already letterboxes the whole composition
   uniformly on smaller viewports, so we don't need media queries here. */




/* ============================================================
   Source: styles/contractors.css
   ============================================================ */

/* =====================================================
   Contractors page — section-specific styles
   Prefix: co-
   Foundations come from tokens.css; layout/nav from landing.css.
   This file adds only the new sections unique to /contractors.
   ===================================================== */

/* ----- shared utilities ---------------------------------------------- */
/* Matches /borrowers' .bo-overline — lime-bright highlighter stripe behind the
   text, not a pill background. The isolate + z-index:-1 keeps the stripe inside
   this element's stacking context without needing a wrapper span. */
.co-eyebrow {
  display: inline-block;
  position: relative;
  isolation: isolate;
  margin-bottom: 0px;
  padding: 0 2px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2em !important;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--af-ink-black);
  background: transparent;
  border-radius: 0;
}
.co-eyebrow::after {
  content: "";
  position: absolute;
  left: -4px; right: -4px;
  bottom: -2px;
  height: 8px;
  /* background: var(--af-lime-bright);*/
  z-index: -1;
}
.co-eyebrow--center { display: inline-block; }
/* When the hero eyebrow is the page's H1, keep it visually identical to the
   span version (kill the UA heading top margin; size/weight come from .co-eyebrow). */
h1.co-eyebrow { margin-top: 0; font-size: 14px; }

.co-h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--af-ink-black);
  margin: 0 0 16px;
}

.co-lede {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--af-gray-800);
  line-height: 1.55;
  max-width: 620px;
  margin: 0;
}

.co-section {
  position: relative;
  width: 100%;
}

.co-section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 56px;
}
@media (max-width: 900px) { .co-section-inner { padding: 0 24px; } }
@media (max-width: 600px) { .co-section-inner { padding: 0 16px; } }

/* ----- breadcrumb ---------------------------------------------------- */
.co-crumb {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 32px;
}
.co-crumb a { color: var(--af-bright-blue); text-decoration: none; }
.co-crumb-sep { margin: 0 6px; color: rgba(255, 255, 255, 0.35); }

/* ===============  SECTION 1 — HERO  =============== */
/* Matches /homepage — deep-space-blue surface, white type, lime eyebrow
   underline still pops against the dark. */
.co-section--hero {
  background: var(--af-deep-space-blue);
  color: var(--af-white);
  padding: 80px 0 96px;
  overflow: hidden;
}
/* The hero eyebrow doubles as the page <h1> on the contractor + trade
   pages. Match the homepage hero eyebrow exactly: icy-blue, no lime bar. */
.co-section--hero .co-eyebrow { color: var(--af-icy-blue); }
.co-section--hero .co-eyebrow::after { display: none; }
.co-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.co-hero-h1 {
  font-family: var(--font-sans);
  font-weight: 600;
  /* Stepped down from H1-72 to H2-56 so "Fast & flexible / home improvement /
     financing" fits on 3 desktop lines instead of 4. */
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--af-white);
  margin: 0 0 24px;
  max-width: 14ch;
}
.co-hero-sub {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 24px;
  max-width: 48ch;
}
.co-hero-sub strong { font-weight: 700; color: var(--af-white); }

.co-hero-bullets { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 12px; }
.co-hero-bullets li {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--af-white);
}
.co-hero-bullets svg { flex: none; color: var(--af-bright-blue); }

.co-hero-ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 28px;
}
.co-hero-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  color: var(--af-white);
  text-decoration: none;
  transition: gap var(--duration-fast, 140ms) ease, opacity var(--duration-fast, 140ms) ease;
}
.co-hero-link svg { flex: none; color: var(--af-bright-blue); }
.co-hero-link:hover { gap: 12px; opacity: 0.85; }

.co-hero-cta {
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--af-sapphire-sky);
  color: var(--af-white);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 17px;
  padding: 16px 36px;
  border-radius: 999px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-fast, 140ms) ease, transform var(--duration-fast, 140ms) ease;
}
.co-hero-cta:hover { background: var(--af-link-blue); transform: translateY(-1px); }

.co-hero-image-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.co-hero-image {
  width: 100%;
  aspect-ratio: 5 / 4;
  border-radius: 24px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: 0 30px 80px rgba(0, 39, 62, 0.18);
}
.co-hero-image-caption {
  position: absolute;
  bottom: -28px;
  right: 8px;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--af-gray-700);
  font-style: italic;
}
.co-hero-badge {
  position: absolute;
  left: -24px; top: 24%;
  background: var(--af-white);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,39,62,0.18);
  padding: 14px 18px;
  display: flex; align-items: center; gap: 10px;
  max-width: 220px;
}
.co-hero-badge-ico {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--af-lime-pale);
  display: flex; align-items: center; justify-content: center;
}
.co-hero-badge-text {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.3;
  color: var(--af-ink-black);
}
.co-hero-badge-text strong { display: block; font-weight: 700; }

@media (max-width: 900px) {
  .co-hero { grid-template-columns: 1fr; gap: 40px; }
  .co-hero-h1 { max-width: none; }
  .co-section--hero { padding: 56px 0; }
}

/* ===============  SECTION 3 — TWO-COLUMN ADVANTAGE  =============== */
.co-section--advantage { padding: 96px 0; background: var(--af-white); }
.co-advantage-head { text-align: center; margin-bottom: 56px; }
.co-advantage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.co-advantage-col {}
.co-advantage-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  margin-bottom: 28px;
  background-color: var(--af-gray-200);
}
.co-advantage-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 20px;
  color: var(--af-ink-black);
  margin: 0 0 16px;
}
.co-advantage-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.co-advantage-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--af-ink-black);
  line-height: 1.4;
}
.co-advantage-list svg { flex: none; color: var(--af-sapphire-sky); margin-top: 3px; }

@media (max-width: 900px) {
  .co-section--advantage { padding: 64px 0; }
  .co-advantage-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* ===============  SECTION 3b — FINANCING BY TRADE (scroller)  =============== */
.co-section--trades { padding: 88px 0 96px; background: var(--af-white); overflow: hidden; }
.co-trades-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; margin-bottom: 36px;
}
.co-trades-h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08;
  letter-spacing: -0.02em; color: var(--af-ink-black);
  margin: 10px 0 0; max-width: 18ch; text-wrap: balance;
}
.co-trades-nav { display: flex; gap: 10px; flex: 0 0 auto; }
.co-trades-arrow {
  width: 48px; height: 48px; border-radius: var(--radius-pill);
  border: 1px solid var(--af-gray-300); background: var(--af-white);
  color: var(--af-ink-black); display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, opacity 140ms ease;
	padding: 12px;
}
.co-trades-arrow:hover {
  background: var(--af-sapphire-sky); border-color: var(--af-sapphire-sky); color: var(--af-white);
}
.co-trades-arrow:disabled { opacity: 0.35; cursor: default; }
.co-trades-arrow:focus-visible { outline: 2px solid var(--af-sapphire-sky); outline-offset: 2px; }

.co-trades-scroller {
  display: flex; gap: 20px;
  overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab; touch-action: pan-x pan-y; user-select: none; -webkit-user-select: none;
  /* bleed to the section edges so cards run wide; gutter via padding */
  margin: 0 calc(50% - 50vw); padding: 8px max(56px, calc(50vw - 600px));
  scroll-padding-left: max(56px, calc(50vw - 600px));
}
.co-trades-scroller::-webkit-scrollbar { display: none; }
.co-trades-scroller.is-dragging { cursor: grabbing; }

.co-trade-card {
  position: relative; flex: 0 0 280px; width: 280px; height: 360px;
  border-radius: var(--radius-xl); overflow: hidden; text-decoration: none;
  background: var(--af-gray-200); scroll-snap-align: start;
  box-shadow: 0 1px 2px rgba(0,39,62,0.06);
  transition: box-shadow 220ms ease, transform 220ms cubic-bezier(0.22,0.61,0.36,1);
  -webkit-tap-highlight-color: transparent;
}
.co-trade-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,39,62,0.18); }
.co-trade-card:focus-visible { outline: 3px solid var(--af-sapphire-sky); outline-offset: 3px; }
.co-trade-card-img {
  position: absolute; inset: 0; display: block;
  background-size: cover; background-position: right center;
  transition: transform 520ms cubic-bezier(0.22,0.61,0.36,1);
}
.co-trade-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,39,62,0.86) 0%, rgba(0,39,62,0.4) 34%, rgba(0,39,62,0) 64%);
}
.co-trade-card:hover .co-trade-card-img { transform: scale(1.06); }
.co-trade-card-foot {
  position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.co-trade-card-title {
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  letter-spacing: -0.01em; color: var(--af-white); line-height: 1.1;
}
.co-trade-card-arrow {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.35);
  color: var(--af-white); display: inline-flex; align-items: center; justify-content: center;
  transition: background 180ms ease, color 180ms ease;
}
.co-trade-card:hover .co-trade-card-arrow { background: var(--af-white); color: var(--af-sapphire-sky); }

@media (prefers-reduced-motion: reduce) {
  .co-trade-card, .co-trade-card-img { transition: none; }
}
@media (max-width: 900px) {
  .co-section--trades { padding: 64px 0 72px; }
  .co-trades-scroller { padding: 8px 24px; scroll-padding-left: 24px; }
}
@media (max-width: 600px) {
  .co-section--trades { padding: 48px 0 56px; }
  .co-trades-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .co-trades-scroller { padding: 8px 16px; gap: 14px; scroll-padding-left: 16px; }
  .co-trade-card { flex-basis: 240px; width: 240px; height: 320px; }
}

/* ===============  SECTION 4 — QUICK GUIDE  =============== */
.co-section--guide {
  background: var(--af-alice-blue);
  padding: 120px 0;
}
.co-guide-head { text-align: center; margin-bottom: 48px; }
.co-guide-sub { color: var(--af-gray-800); font-family: var(--font-sans); font-size: 16px; max-width: 540px; margin: 16px auto 0; line-height: 1.5; }
.co-guide { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: start; }

.co-guide-steps { display: flex; flex-direction: column; gap: 0; }
.co-guide-item {
  border-bottom: 1px solid var(--af-gray-300);
}
.co-guide-item:last-child { border-bottom: none; }
.co-guide-row {
  display: flex; align-items: center; gap: 16px;
  width: 100%;
  background: transparent;
  border: none;
  padding: 22px 4px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  color: var(--af-ink-black);
}
.co-guide-ico {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--af-alice-blue);
  color: var(--af-sapphire-sky);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.co-guide-label {
  font-weight: 700;
  font-size: 18px;
  flex: 1;
}
.co-guide-chev {
  color: var(--af-sapphire-sky);
  transition: transform var(--duration-fast, 140ms) ease;
}
.co-guide-item.is-open .co-guide-chev { transform: rotate(180deg); }
.co-guide-body {
  max-height: 0; overflow: hidden;
  transition: max-height var(--duration-default, 220ms) ease;
}
.co-guide-item.is-open .co-guide-body { max-height: 260px; }
.co-guide-body-inner {
  padding: 0 4px 22px 60px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--af-gray-800);
  line-height: 1.55;
}

/* Mockup card — mimics in-product form state */
.co-guide-mock {
  background: var(--af-white);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 24px 60px rgba(0,39,62,0.10);
  position: relative;
  overflow: hidden;
}
.co-guide-mock::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(1,109,225,0.04) 0 2px, transparent 2px 12px);
  pointer-events: none;
}
.co-guide-mock-stepper { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; position: relative; }
.co-guide-mock-dot {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--af-gray-300); color: var(--af-gray-700);
  font-family: var(--font-sans); font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.co-guide-mock-dot.is-done { background: var(--af-deep-space-blue); color: var(--af-white); }
.co-guide-mock-dot.is-active { background: var(--af-deep-space-blue); color: var(--af-white); }
.co-guide-mock-bar { height: 8px; border-radius: 4px; background: var(--af-gray-200); margin-bottom: 24px; position: relative; overflow: hidden; }
.co-guide-mock-bar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 60%; background: var(--af-deep-space-blue); border-radius: 4px; }

.co-guide-mock-hint {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 14px;
  color: var(--af-gray-800);
  padding: 8px 14px;
  background: var(--af-alice-blue);
  border-radius: 999px;
  margin-bottom: 18px;
  position: relative;
}
.co-guide-mock-field { margin-bottom: 14px; position: relative; }
.co-guide-mock-field label {
  display: block;
  font-family: var(--font-sans); font-size: 11px;
  color: var(--af-gray-700);
  margin-bottom: 4px;
  padding: 0 8px;
}
.co-guide-mock-select {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border: 1px solid var(--af-gray-400);
  border-radius: 6px;
  background: var(--af-white);
  font-family: var(--font-sans); font-size: 14px;
  color: var(--af-ink-black);
}
.co-guide-mock-next {
  width: 100%;
  margin-top: 12px;
  background: var(--af-deep-space-blue);
  color: var(--af-white);
  font-family: var(--font-sans); font-weight: 700; font-size: 14px;
  padding: 14px;
  border: none; border-radius: 4px;
  cursor: pointer;
  position: relative;
}

@media (max-width: 900px) {
  .co-section--guide { padding: 72px 0; }
  .co-guide { grid-template-columns: 1fr; gap: 32px; }
  .co-guide-mock { padding: 24px; }
}

/* ===============  SECTION 4 — JOURNEY  ===============
   Desktop (≥1000px): the section becomes a 620vh scroll container with
   a sticky 100vh inner panel. A donut ring fills clockwise as the user
   scrolls; the center swaps to the active step's icon + title + copy.
   Mobile (<1000px): vertical trail driven by IntersectionObserver.
   Blue theme — sapphire ring/nodes on an alice-blue ground.
*/

.co-section--journey {
  background: linear-gradient(180deg, #FAFCFE 0%, #EBF8FF 100%);
  padding: 96px 0 120px;
  position: relative;
  overflow: hidden;
}

/* Soft blurred background blobs */
.co-journey-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.co-journey-blob {
  position: absolute;
  border-radius: 50%;
  /*filter: blur(70px);*/
  opacity: 0.55;
}/*
.co-journey-blob--1 {
  width: 460px; height: 460px;
  top: 6%; left: -140px;
  background: rgba(183, 231, 255, 0.9);
}
.co-journey-blob--2 {
  width: 360px; height: 360px;
  top: 48%; right: -120px;
  background: rgba(1, 109, 225, 0.16);
}
.co-journey-blob--3 {
  width: 400px; height: 400px;
  bottom: 6%; left: 38%;
  background: rgba(1, 109, 225, 0.10);
}
*/
.co-section--journey .co-section-inner { position: relative; z-index: 1; }
.co-section--journey .co-eyebrow { color: var(--af-ink-black); }
.co-section--journey .co-eyebrow::after { /*background: var(--af-icy-blue);*/ }

/* Shared head */
.co-journey-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 64px;
}
.co-journey-sub {
  color: var(--af-gray-800);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.5;
  margin: 16px auto 0;
  max-width: 600px;
}

/* =============================================================
   DESKTOP — scroll-pinned circle (≥1000px)
   ============================================================= */
.co-journey-desktop { display: none; }
.co-journey-mobile  { display: block; }

@media (min-width: 1000px) {
  .co-section--journey { padding: 0; }
  .co-journey-desktop {
    display: block;
    /* Section is exactly 100vh on desktop. JS captures wheel/touch and
       advances the circle's progress; the user can only leave the
       section once the animation completes (or via Escape). */
    height: 100vh;
    position: relative;
    z-index: 1;
  }
  .co-journey-mobile { display: none; }
}

.co-journey-sticky {
  /* No longer sticky — the JS scroll-lock keeps the user pinned here.
     We keep this as a flex centering container only. */
  position: relative;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.co-journey-pinned {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  width: 100%;
  max-width: 1400px;
  height: 100vh;
  padding: 36px 48px;
  margin: 0 auto;
  box-sizing: border-box;
}

.co-journey-head--inline {
  text-align: center;
  margin: 0;
  max-width: 720px;
  flex: 0 0 auto;
}
.co-journey-head--inline .co-h2 {
  margin: 0 0 10px;
  font-size: clamp(32px, 3.4vw, 44px);
}
.co-journey-head--inline .co-journey-sub {
  margin: 0 auto;
  max-width: 56ch;
  font-size: 16px;
}

/* The circle wrap is a 1:1 box; the SVG fills it and labels are
   positioned absolutely around the outer edge.
   Sized to fill the remaining vertical space inside the pinned panel
   AND the available horizontal space (minus ~300px for surrounding
   labels), capped at 880px on very large displays. */
.co-circle-wrap {
  position: relative;
  width: min(880px, calc(100vh - 220px), calc(100vw - 320px));
  aspect-ratio: 1;
  margin: 0 auto;
  flex: 0 0 auto;
}
.co-circle-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.co-circle-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.co-circle-label {
  position: absolute;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
  max-width: 180px;
  color: var(--af-gray-700);
  transition: color 220ms ease;
}
.co-circle-label.is-reached { color: var(--af-ink-black); }
.co-circle-label.is-active  { color: var(--af-sapphire-sky); }

.co-circle-label--right {
  transform: translate(20px, -50%);
  text-align: left;
}
.co-circle-label--left {
  transform: translate(calc(-100% - 20px), -50%);
  text-align: right;
}
.co-circle-label--top {
  transform: translate(-50%, calc(-100% - 18px));
  text-align: center;
}
.co-circle-label--bottom {
  transform: translate(-50%, 18px);
  text-align: center;
}

/* Center detail — re-keyed on activeIdx so React remounts and the
   keyframe animation re-runs every time the active step changes. */
.co-circle-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64%;
  max-width: 280px;
  text-align: center;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: coCenterFade 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes coCenterFade {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
.co-circle-center-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--af-alice-blue);
  color: var(--af-sapphire-sky);
  margin: 0 auto 16px;
}
.co-circle-center-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--af-ink-black);
  margin: 0 0 10px;
  line-height: 1.2;
}
.co-circle-center-copy {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--af-gray-800);
  line-height: 1.5;
  margin: 0;
}

/* Tighter spacing on shorter desktop viewports */
@media (min-width: 1000px) and (max-height: 820px) {
  .co-journey-pinned { padding: 24px 40px; gap: 18px; }
  .co-journey-head--inline .co-h2 { font-size: 28px; margin-bottom: 6px; }
  .co-journey-head--inline .co-journey-sub { font-size: 14px; }
  .co-circle-center { width: 60%; max-width: 240px; }
  .co-circle-center-title { font-size: 19px; }
  .co-circle-center-copy { font-size: 12.5px; }
  .co-circle-center-icon { width: 48px; height: 48px; margin-bottom: 12px; }
  .co-circle-label { font-size: 14px; max-width: 150px; }
}

/* Narrow desktops — shrink labels and padding so they don't collide with
   the viewport edges. */
@media (min-width: 1000px) and (max-width: 1180px) {
  .co-journey-pinned { padding: 28px 28px; gap: 20px; }
  .co-circle-label { font-size: 13px; max-width: 130px; }
}

/* ---- Celebratory final state (progress ≈ 1) ---- */
.co-circle-celebrate-check {
  position: relative;
  display: inline-flex;
  margin: 0 auto 18px;
  animation: coCheckPop 540ms cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 14px 30px rgba(1, 109, 225, 0.38));
}
.co-circle-celebrate-check::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 3px solid var(--af-sapphire-sky);
  animation: coCheckRing 1.8s ease-out 300ms infinite;
  opacity: 0;
  pointer-events: none;
}
@keyframes coCheckPop {
  0%   { transform: scale(0.2); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
@keyframes coCheckRing {
  0%   { transform: scale(0.65); opacity: 0.55; }
  100% { transform: scale(1.5);  opacity: 0;    }
}
.co-circle-center--celebrate .co-circle-center-title {
  font-size: 26px;
}
.co-circle-center--celebrate .co-circle-center-copy {
  font-size: 14.5px;
}

/* =============================================================
   MOBILE — vertical trail (<1000px)
   ============================================================= */
.co-journey {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
  max-width: 720px;
  margin: 0 auto;
}

/* Sticky pill — shows active step title + a thin progress bar.
   Step-count text removed per the simpler aesthetic. */
.co-journey-progress {
  position: sticky;
  top: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  border-radius: 999px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.94);
  /*backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);*/
  box-shadow: 0 10px 28px rgba(1, 109, 225, 0.18);
  align-self: center;
  justify-self: center;
  font-family: var(--font-sans);
}
.co-journey-progress-bar {
  width: 60px;
  height: 4px;
  background: rgba(1, 109, 225, 0.18);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  flex: none;
}
.co-journey-progress-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 100%;
  background: var(--af-sapphire-sky);
  border-radius: 999px;
  /* STATIC — scroll-driven progress was removed (choppy on mobile). Bar shows
     full by default; no transform animation. */
}
.co-journey-progress-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--af-ink-black);
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.co-journey-trail {
  position: relative;
  padding: 24px 0 40px;
}
.co-journey-trail-line {
  position: absolute;
  left: 28px;
  top: 32px;
  bottom: 32px;
  width: 3px;
  margin-left: -1.5px;
  background: rgba(1, 109, 225, 0.16);
  border-radius: 999px;
  overflow: visible;
}
.co-journey-trail-fill {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0; /* inset:0 — definite height to scale */
  background: linear-gradient(180deg, var(--af-sapphire-sky) 0%, var(--af-bright-blue) 100%);
  border-radius: 999px;
  box-shadow: 0 0 16px rgba(1, 109, 225, 0.4);
  /* STATIC — scroll-driven fill was removed (choppy on mobile). Line shows
     full by default; no transform animation. */
}

.co-journey-step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 0;
  margin-bottom: 36px;
}
.co-journey-step:last-child { margin-bottom: 0; }

.co-journey-node {
  position: absolute;
  left: 28px;
  top: 8px;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  border-radius: 50%;
  background: var(--af-white);
  border: 2px solid rgba(1, 109, 225, 0.24);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 14px;
  color: var(--af-gray-700);
  transition: none; /* STATIC — no reveal animation */
}
.co-journey-node-num { position: relative; z-index: 2; }
.co-journey-node-pulse {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}
.co-journey-step.is-reached .co-journey-node {
  background: var(--af-sapphire-sky);
  border-color: var(--af-sapphire-sky);
  color: var(--af-white);
  transform: scale(1.08);
  box-shadow:
    0 0 0 6px rgba(183, 231, 255, 0.6),
    0 10px 26px rgba(1, 109, 225, 0.30);
}
.co-journey-step.is-reached .co-journey-node-pulse {
  animation: none; /* STATIC — pulse removed */
}
@keyframes coJourneyPulse {
  0%   { box-shadow: 0 0 0 0 rgba(1, 109, 225, 0.55); opacity: 0.9; }
  70%  { box-shadow: 0 0 0 22px rgba(1, 109, 225, 0); opacity: 0; }
  100% { box-shadow: 0 0 0 22px rgba(1, 109, 225, 0); opacity: 0; }
}

.co-journey-card {
  background: var(--af-white);
  border-radius: 18px;
  padding: 24px 24px;
  box-shadow: 0 18px 44px rgba(1, 109, 225, 0.10);
  border: 1px solid rgba(1, 109, 225, 0.10);
  font-family: var(--font-sans);
  grid-column: 2;
  justify-self: start;
  max-width: 100%;
  /* STATIC — cards are visible by default; no reveal animation. */
  opacity: 1;
  transform: none;
  transition: none;
}
.co-journey-step.is-revealed .co-journey-card {
  opacity: 1;
  transform: translateX(0);
}

.co-journey-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--af-alice-blue);
  color: var(--af-sapphire-sky);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.co-journey-card-title {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  color: var(--af-ink-black);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 8px;
}
.co-journey-card-copy {
  font-size: 15px;
  color: var(--af-gray-800);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 600px) {
  .co-section--journey { padding: 72px 0 100px; }
  .co-journey-head { margin-bottom: 40px; }
  .co-journey-card { padding: 20px 20px; }
  .co-journey-card-title { font-size: 18px; }
  .co-journey-progress-title { max-width: 130px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .co-journey-card,
  .co-journey-node,
  .co-journey-trail-fill,
  .co-journey-progress-fill,
  .co-circle-center,
  .co-circle-celebrate-check,
  .co-circle-celebrate-check::before {
    transition: none;
    animation: none;
  }
  .co-journey-step.is-reached .co-journey-node-pulse { animation: none; }
}

/* ===============  SECTION 5 — QUOTE  =============== */
.co-section--quote { padding: 96px 0; background: var(--af-white); }
.co-quote {
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}
.co-quote-logo {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 4px;
  color: var(--af-ink-black);
  margin-bottom: 28px;
}
.co-quote-logo span { color: var(--af-warning); }
.co-quote-body {
  font-family: var(--font-sans);
  font-size: clamp(20px, 2.3vw, 32px);
  font-weight: 300;
  line-height: 1.4;
  color: var(--af-ink-black);
  margin: 0 0 32px;
}
.co-quote-author { font-family: var(--font-sans); font-weight: 700; font-size: 16px; color: var(--af-ink-black); }
.co-quote-co { font-family: var(--font-sans); font-size: 14px; color: var(--af-gray-700); margin-top: 2px; }

/* ===============  SECTION 6 / 7 / 8 — IMAGE-TEXT BLOCKS  =============== */
.co-section--imgtext { padding: 56px 0; background: var(--af-white); }
.co-imgtext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.co-imgtext--reverse .co-imgtext-img { order: 2; }

.co-imgtext-img {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  background-color: var(--af-gray-200);
}
.co-imgtext-img--label {
  position: absolute;
  bottom: 14%; right: -20px;
  background: var(--af-white);
  padding: 10px 16px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,39,62,0.12);
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-weight: 600; font-size: 14px;
  color: var(--af-ink-black);
}
.co-imgtext-img--label svg { color: var(--af-sapphire-sky); flex: none; }

.co-imgtext-img--card {
  position: absolute;
  top: 24px; left: -28px;
  background: var(--af-white);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,39,62,0.12);
  padding: 16px 20px;
  width: 220px;
  font-family: var(--font-sans);
}
.co-imgtext-img--card .lbl { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--af-gray-700); margin-bottom: 6px; }
.co-imgtext-img--card .tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--af-lime-green-deep); margin-right: 8px; }
.co-imgtext-img--card .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.co-imgtext-img--card .row .k { font-size: 10px; color: var(--af-gray-700); }
.co-imgtext-img--card .row .v { font-size: 20px; font-weight: 700; color: var(--af-ink-black); }
.co-imgtext-img--card .v-sub { font-size: 10px; color: var(--af-gray-700); }
.co-imgtext-img--card .pay { margin-top: 12px; padding: 8px 12px; background: var(--af-sapphire-sky); color: var(--af-white); border-radius: 4px; font-size: 12px; font-weight: 700; text-align: center; }

.co-imgtext-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(28px, 3.3vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--af-ink-black);
  margin: 0 0 16px;
}
.co-imgtext-body {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--af-gray-800);
  line-height: 1.55;
  margin: 0;
  max-width: 44ch;
}

@media (max-width: 900px) {
  .co-imgtext { grid-template-columns: 1fr; gap: 32px; }
  .co-imgtext--reverse .co-imgtext-img { order: 0; }
  .co-imgtext-img--card { left: 16px; }
  .co-imgtext-img--label { right: 16px; }
}

/* ===============  SECTION 9 — COMPARISON TABLE  =============== */
.co-section--compare { padding: 96px 0; background: var(--af-white); }
.co-compare-head { text-align: center; margin-bottom: 56px; }
.co-compare-table {
  border: 1px solid var(--af-gray-400);
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 1fr 1fr;
}
.co-compare-cell {
  padding: 24px 20px;
  border-right: 1px solid var(--af-gray-300);
  border-bottom: 1px solid var(--af-gray-300);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--af-ink-black);
  display: flex; align-items: center;
}
.co-compare-cell:nth-child(4n) { border-right: none; }
.co-compare-table > div:nth-last-child(-n+4) { border-bottom: none; }
.co-compare-cell--head { padding: 28px 20px; }
.co-compare-cell--logo { justify-content: center; }
.co-compare-cell--logo img { height: 32px; width: auto; }
.co-compare-cell--logo .fb { font-family: var(--font-sans); font-weight: 700; font-size: 16px; color: var(--af-gray-700); }
.co-compare-cell--acorn { background: rgba(1,109,225,0.06); border-left: 2px solid var(--af-sapphire-sky); border-right: 2px solid var(--af-sapphire-sky); }
.co-compare-cell--acorn.co-compare-cell--head { padding-top: 32px; }
.co-compare-cell--label { background: var(--af-gray-100); }
.co-compare-cell--label .l-up { font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--af-ink-black); }
.co-compare-cell--label .l-sub { font-weight: 400; font-size: 13px; color: var(--af-gray-700); margin-top: 4px; line-height: 1.4; }
.co-compare-cell--center { justify-content: center; }

@media (max-width: 900px) {
  .co-section--compare { padding: 64px 0; }
  .co-compare-table { font-size: 12px; }
  .co-compare-cell { padding: 14px 10px; }
}

/* ===============  SECTION 10 — PORTAL  =============== */
.co-section--portal {
  background: var(--af-alice-blue);
  padding: 96px 0;
}
.co-portal { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.co-portal-img {
  position: relative;
  aspect-ratio: 5 / 4;
  background-size: cover; background-position: center;
  background-color: var(--af-gray-200);
  border-radius: 20px;
}
.co-portal-notif {
  position: absolute;
  right: -10px;
  background: var(--af-white);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 12px 28px rgba(0,39,62,0.14);
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  color: var(--af-ink-black);
}
.co-portal-notif--1 { top: 12%; }
.co-portal-notif--2 { top: 36%; right: -20px; }
.co-portal-notif svg { color: var(--af-bright-blue); flex: none; }

.co-portal-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.co-portal-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-family: var(--font-sans);
  font-size: 17px;
  color: var(--af-ink-black);
  line-height: 1.5;
}
.co-portal-list svg { flex: none; color: var(--af-sapphire-sky); margin-top: 4px; }

@media (max-width: 900px) {
  .co-portal { grid-template-columns: 1fr; gap: 40px; }
  .co-section--portal { padding: 64px 0; }
}

/* ===============  SECTION 11 — STAT CARDS  =============== */
/* Sits flush against the Portal block so the alice-blue surface reads as
   one tinted band rather than two. */
.co-section--stats {
  padding: 0 0 96px;
  background: var(--af-alice-blue);
}
.co-stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.co-stat-card {
  background: var(--af-white);
  border-radius: 12px;
  padding: 40px 48px;
  box-shadow: 0 8px 30px rgba(0,39,62,0.06);
  text-align: center;
}
.co-stat-num {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(48px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--af-ink-black);
  margin-bottom: 8px;
}
.co-stat-label {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--af-gray-800);
}
@media (max-width: 600px) { .co-stat-row { grid-template-columns: 1fr; } .co-stat-card { padding: 28px; } }

/* ===============  SECTION 12 — WHAT MAKES DIFFERENT  =============== */
.co-section--different { padding: 96px 0; background: var(--af-white); }
.co-different { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start; }
.co-different-block { margin-bottom: 32px; }
.co-different-h3 { font-family: var(--font-sans); font-weight: 700; font-size: 17px; color: var(--af-ink-black); margin: 0 0 12px; }
.co-different-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.co-different-list li {
  font-family: var(--font-sans);
  font-size: 15px; color: var(--af-ink-black);
  line-height: 1.5;
  padding-left: 18px;
  position: relative;
}
.co-different-list li::before {
  content: "•"; position: absolute; left: 0; color: var(--af-sapphire-sky); font-weight: 700;
}
.co-different-img {
  aspect-ratio: 5 / 5;
  border-radius: 20px;
  background-size: cover; background-position: center;
  background-color: var(--af-gray-200);
  position: relative;
}
.co-different-floater {
  position: absolute;
  background: var(--af-white);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 12px 28px rgba(0,39,62,0.14);
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
}
.co-different-floater img { width: 48px; height: 48px; object-fit: contain; }
.co-different-floater--1 { top: 10%; left: -28px; }
.co-different-floater--2 { top: 28%; right: -28px; }

@media (max-width: 900px) {
  .co-different { grid-template-columns: 1fr; gap: 40px; }
  .co-section--different { padding: 64px 0; }
}

/* ===============  SECTION 13 — COMPARE RATES  =============== */
.co-section--rates {
  background: var(--af-alice-blue);
  padding: 96px 0;
}
.co-rates-head { text-align: center; margin-bottom: 40px; }
.co-rates-widget {
  background: var(--af-white);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 16px 40px rgba(0,39,62,0.08);
}
.co-rates-controls {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--af-gray-300);
  margin-bottom: 24px;
}
.co-rates-field label {
  display: block;
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 600;
  color: var(--af-ink-black);
  margin-bottom: 8px;
}
.co-rates-field .input {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 12px;
  background: var(--af-gray-100);
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--af-ink-black);
}
.co-rates-field .input .pre { color: var(--af-gray-700); }
.co-rates-field select {
  width: 100%;
  padding: 12px 14px;
  background: var(--af-gray-100);
  border: none;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--af-ink-black);
  cursor: pointer;
}
.co-rates-row-list { display: flex; flex-direction: column; gap: 14px; }
.co-rate-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  align-items: center;
  gap: 24px;
  padding: 20px 24px;
  border: 1px solid var(--af-gray-300);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--af-white) 0%, var(--af-alice-blue) 200%);
}
.co-rate-row-lender { display: flex; flex-direction: column; gap: 6px; }
.co-rate-row-lender img { height: 28px; width: auto; max-width: 140px; object-fit: contain; align-self: flex-start; }
.co-rate-row-lender .fb { font-family: var(--font-sans); font-weight: 700; font-size: 18px; color: var(--af-ink-black); }
.co-rate-row-lender .v {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  color: var(--af-sapphire-sky);
}
.co-rate-row-col { text-align: center; }
.co-rate-row-val { font-family: var(--font-sans); font-weight: 700; font-size: clamp(18px, 1.8vw, 22px); color: var(--af-ink-black); }
.co-rate-row-cap { font-family: var(--font-sans); font-size: 11px; letter-spacing: 1px; color: var(--af-gray-700); text-transform: uppercase; margin-top: 4px; }

@media (max-width: 900px) {
  .co-section--rates { padding: 64px 0; }
  .co-rates-controls { grid-template-columns: 1fr; gap: 16px; }
  .co-rate-row { grid-template-columns: 1fr; gap: 12px; text-align: left; }
  .co-rate-row-col { text-align: left; }
}

/* ===============  SECTION 15 — CONTACT FORM  =============== */
.co-section--contact { padding: 96px 0; background: var(--af-white); }
.co-contact-head { text-align: center; margin-bottom: 48px; }
.co-contact-form {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.co-contact-field {}
.co-contact-field label {
  display: block;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--af-gray-800);
  margin-bottom: 6px;
}
.co-contact-field label .req { color: var(--af-error); }
.co-contact-field input, .co-contact-field textarea {
  width: 100%;
  padding: 10px 0;
  border: none;
  border-bottom: 1px solid var(--af-gray-400);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--af-ink-black);
  outline: none;
  transition: border-color var(--duration-fast, 140ms) ease;
}
.co-contact-field input:focus, .co-contact-field textarea:focus { border-color: var(--af-sapphire-sky); }
.co-contact-field textarea { resize: vertical; min-height: 80px; }
.co-contact-submit {
  /* Visual style now inherited from .lp-cta--primary; this class only
     handles flex-column self-alignment in the contact form. */
  align-self: flex-start;
  margin-top: 8px;
}

/* ===============  SECTION 17 — FINAL CTA  =============== */
/* Matches the homepage/borrower final-CTA: deep-space-blue surface with
   white type and the sapphire CTA button. */
.co-section--final {
  padding: 120px 0;
  background: var(--af-deep-space-blue);
  text-align: center;
}
.co-final-h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(36px, 4.8vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--af-white);
  margin: 0 0 20px;
}
.co-final-sub {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.2vw, 18px);
  color: rgba(255, 255, 255, 0.78);
  margin: 0 auto 40px;
  max-width: 60ch;
  line-height: 1.5;
}
.co-final-sub strong { font-weight: 700; color: var(--af-white); }
.co-final-cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--af-sapphire-sky);
  color: var(--af-white);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 17px;
  padding: 16px 44px;
  border-radius: 8px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-fast, 140ms) ease;
}
.co-final-cta:hover { background: var(--af-link-blue); }

/* ===============  small overrides for shared FAQ + Articles when in this page  =============== */
.lp-section--faqs.co-faqs-override {
  background:
    radial-gradient(ellipse at 80% 0%, #FEF8E9 0%, transparent 40%),
    var(--af-white);
}

/* ============================================================
   Vertical landing-page photo placeholder (.af-photo-slot)
   ============================================================
   A reusable labeled drop-zone for vertical pages (HVAC, roofing,
   windows, etc.) where the trade-specific hero / supporting photos
   aren't in the project yet. Drop it onto any element that would
   otherwise carry a `background-image` (co-hero-image,
   co-advantage-img, etc.) and it renders a tidy dashed slot with a
   camera glyph + caption telling you which asset to swap in.
   Replace by removing this class and setting `background-image`. */
.af-photo-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  background-color: var(--af-icy-blue, #EBF8FF);
  background-image:
    repeating-linear-gradient(45deg, rgba(1,109,225,0.05) 0 14px, transparent 14px 28px);
  border: 2px dashed rgba(1, 109, 225, 0.35);
  color: var(--af-sapphire-sky, #016DE1);
}
.af-photo-slot::before {
  content: "";
  width: 44px;
  height: 36px;
  background: currentColor;
  -webkit-mask: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5A2 2 0 0 1 5 6.5h2.2l1.1-1.8A1.5 1.5 0 0 1 9.6 4h4.8a1.5 1.5 0 0 1 1.3.7l1.1 1.8H19a2 2 0 0 1 2 2V17a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Ccircle cx='12' cy='12.5' r='3.4'/%3E%3C/svg%3E");
          mask: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5A2 2 0 0 1 5 6.5h2.2l1.1-1.8A1.5 1.5 0 0 1 9.6 4h4.8a1.5 1.5 0 0 1 1.3.7l1.1 1.8H19a2 2 0 0 1 2 2V17a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Ccircle cx='12' cy='12.5' r='3.4'/%3E%3C/svg%3E");
  opacity: 0.85;
}
.af-photo-slot-label {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.35;
  max-width: 80%;
}
.af-photo-slot-label span {
  display: block;
  font-weight: 400;
  font-size: 11px;
  margin-top: 4px;
  color: var(--af-gray-700, #5A6B7B);
  word-break: break-word;
}

/* ============================================================
   ROI calculator banner (.co-roi-banner)
   ============================================================
   Slim promo strip used on vertical pages to link to the
   contractor ROI calculator. Sapphire→navy gradient card with
   icon, copy, and a button-style CTA; collapses to a stack on
   mobile. Whole card is the link. */
.co-roi-banner-section { padding: 8px 0 24px; }
.co-roi-banner {
  display: flex;
  align-items: center;
  gap: 24px;
  background: linear-gradient(100deg, var(--af-sapphire-sky) 0%, var(--af-deep-space-blue) 100%);
  border-radius: 18px;
  padding: 22px 28px;
  text-decoration: none;
  box-shadow: 0 16px 40px rgba(1, 109, 225, 0.18);
  transition: transform var(--duration-fast, 140ms) ease, box-shadow var(--duration-fast, 140ms) ease;
}
.co-roi-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 52px rgba(1, 109, 225, 0.26);
}
.co-roi-banner-ico {
  flex: none;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--af-white);
  display: flex; align-items: center; justify-content: center;
}
.co-roi-banner-text { flex: 1 1 auto; min-width: 0; }
.co-roi-banner-eyebrow {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 4px;
}
.co-roi-banner-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--af-white);
}
.co-roi-banner-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--af-white);
  color: var(--af-sapphire-sky);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: 999px;
  transition: gap var(--duration-fast, 140ms) ease;
}
.co-roi-banner:hover .co-roi-banner-cta { gap: 12px; }

@media (max-width: 767px) {
  .co-roi-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 24px;
  }
  .co-roi-banner-cta { width: 100%; justify-content: center; }
}




/* ============================================================
   Source: styles/headings.css
   ============================================================ */

/* ============================================================
   Acorn Finance — Heading typography override
   ============================================================
   Headings stay on Söhne (--font-display); everything else uses
   Open Sans (--font-sans).

   IMPORTANT — load order matters:
   This file MUST be the LAST stylesheet loaded on a page. Several
   heading classes (e.g. .lp-h1, .co-hero-h1) declare their own
   font-family in the page-specific stylesheets; those same-
   specificity rules win whichever is parsed later. Loading this
   sheet last guarantees the override sticks.
   ============================================================ */

h1, h2, h3, h4, h5,
.co-h2,
.co-hero-h1,
.co-final-h2,
.co-imgtext-title,
.lp-h1,
.lp-comp-h2,
.lp-how-h2,
.lp-test-h2,
.lp-final-h2,
.lp-faq-h2,
.lp-art-h2,
.lp-trend-h2,
.lp-seo-h3,
.lp-value-title,
.lp-mock-title,
.lp-placeholder-title,
.bo-cat-h2,
.bo-million-h2,
.bo-feat-h3,
.bo-rate-h2,
.hl {
  font-family: var(--font-display);
}

/* ============================================================
   SECTION — Mobile-app promo banner (homepage)
   Desktop: the whole card is one link to the app-download page
            (transparent .app-banner-cover overlay sits on top).
   Mobile:  the cover is disabled and the App Store / Google Play
            badges become the tappable links to each store.
   ============================================================ */
.app-banner-section {
  background: var(--af-white);
  padding: 24px 56px 96px;
}
.app-banner {
  position: relative;
  max-width: var(--container-desktop);
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 150% at 100% 0%, #0b5f93 0%, rgba(11,95,147,0) 55%),
    linear-gradient(135deg, var(--af-deep-space-blue) 0%, var(--af-ocean) 100%);
  color: var(--fg-on-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding: 60px 64px;
  transition: transform var(--duration-default) var(--ease-standard),
              box-shadow var(--duration-default) var(--ease-standard);
}
/* full-card link — active on desktop only */
.app-banner-cover {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
}
.app-banner-text {
  position: relative;
  z-index: 2;
  max-width: 580px;
}
.app-banner-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--af-icy-blue);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.app-banner-eyebrow svg { width: 15px; height: 15px; display: block; }
.app-banner-eyebrow span { white-space: nowrap; }
.app-banner-eyebrow .dot { width: 4px; height: 4px; border-radius: 999px; background: currentColor; opacity: 0.5; }
.app-banner-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 42px;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 16px;
}
.app-banner-body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255,255,255,0.78);
  margin: 0 0 28px;
  max-width: 480px;
}
/* App store badges */
.app-banner-badges { display: flex; gap: 12px; flex-wrap: wrap; }
.app-store-badge {
  position: relative;
  z-index: 4;                /* above the cover so mobile taps reach the store */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  background: #fff;
  color: var(--af-ink-black);
  border-radius: 12px;
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.app-store-badge:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.28); }
.app-store-badge .badge-icon { width: 26px; height: 26px; flex: none; }
.app-store-badge .badge-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.app-store-badge .badge-cap { font-size: 10px; font-weight: 500; color: var(--af-gray-800); }
.app-store-badge .badge-store { font-size: 16px; font-weight: 700; font-family: var(--font-display); }
/* Desktop "explore" affordance (the card itself is the link) */
.app-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  color: var(--af-icy-blue);
}
.app-banner-cta svg { width: 18px; height: 18px; transition: transform var(--duration-default) var(--ease-standard); }
/* Visual — app icon squircle floating over glow rings */
.app-banner-visual {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-banner-ring {
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(183,231,255,0.18);
}
.app-banner-ring--1 { inset: 0; }
.app-banner-ring--2 { inset: 34px; border-color: rgba(183,231,255,0.26); }
.app-banner-appicon {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 34px;
  background: linear-gradient(160deg, #ffffff 0%, #E4F4FF 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 26px 60px rgba(0,0,0,0.45), inset 0 2px 0 rgba(255,255,255,0.6);
  transform: rotate(-6deg);
}
.app-banner-appicon img { width: 62%; height: 62%; object-fit: contain; }

@media (min-width: 768px) {
  .app-banner { cursor: pointer; }
  .app-banner:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(0,39,62,0.32); }
  .app-banner:hover .app-banner-cta svg { transform: translateX(5px); }
  /* Desktop links to the app-download page, so the store badges are hidden. */
  .app-banner-badges { display: none; }
}
@media (max-width: 767px) {
  .app-banner-section { padding: 16px 16px 64px; }
  .app-banner {
    flex-direction: column;
    text-align: center;
    gap: 28px;
    padding: 40px 26px 44px;
    border-radius: 20px;
  }
  .app-banner-cover { display: none; }   /* badges are the links on mobile */
  .app-banner-cta { display: none; }
  .app-banner-eyebrow { justify-content: center; flex-direction: column; gap: 6px; }
  .app-banner-eyebrow .dot { display: none; }
  .app-banner-text { max-width: none; }
  .app-banner-body { margin-left: auto; margin-right: auto; }
  .app-banner-badges { justify-content: center; }
  .app-banner-visual { order: -1; width: 170px; height: 170px; }
  .app-banner-ring--2 { inset: 26px; }
  .app-banner-appicon { width: 124px; height: 124px; border-radius: 28px; }
  .app-banner-h2 { font-size: 32px; }
}

/* ============================================================
   SECTION — Relocated inline styles
   Everything below used to live as style="…" attributes directly
   on the page HTML. Keep it here so WP fragments stay clean.

   Background photos: one modifier class per image slot. Source
   pages reference assets/… relatively so they preview locally;
   scripts/build-css.js rewrites url('/wp-content/uploads/assets/…') to
   /wp-content/uploads/assets/… when building the WP plugin CSS.
   ============================================================ */

/* -- Section background photos (contractors page) */
.co-hero-image--contractors    { background-image: url('/wp-content/uploads/assets/co-hero-image.webp'); }
.co-advantage-img--customers   { background-image: url('/wp-content/uploads/assets/co-advantage-img.webp'); }
.co-advantage-img--contractors { background-image: url('/wp-content/uploads/assets/co-advantage-img-1.webp'); }
.co-imgtext-img--dont-say        { background-image: url('/wp-content/uploads/assets/co-imgtext-img-1.webp'); }
.co-imgtext-img--stay-updated    { background-image: url('/wp-content/uploads/assets/co-imgtext-img-1-1.webp'); }
.co-imgtext-img--instant-access  { background-image: url('/wp-content/uploads/assets/co-imgtext-img-3.webp'); }
.co-portal-img--contractors    { background-image: url('/wp-content/uploads/assets/co-portal-img.webp'); }
.co-different-img--contractors { background-image: url('/wp-content/uploads/assets/co-different-img.webp'); }

/* -- Section background photos (trade landing pages: hero + advantage cols) */
.co-hero-image--bathroom-remodel-hero { background-image: url('/wp-content/uploads/assets/bathroom-remodel-hero.webp'); }
.co-advantage-img--bathroom-remodel-customer { background-image: url('/wp-content/uploads/assets/bathroom-remodel-customer.webp'); }
.co-advantage-img--bathroom-remodel-tech { background-image: url('/wp-content/uploads/assets/bathroom-remodel-tech.webp'); }
.co-hero-image--electrical-hero { background-image: url('/wp-content/uploads/assets/electrical-hero.webp'); }
.co-advantage-img--electrical-customer { background-image: url('/wp-content/uploads/assets/electrical-customer.webp'); }
.co-advantage-img--electrical-tech { background-image: url('/wp-content/uploads/assets/electrical-tech.webp'); }
.co-hero-image--flooring-hero { background-image: url('/wp-content/uploads/assets/flooring-hero.webp'); }
.co-advantage-img--flooring-customer { background-image: url('/wp-content/uploads/assets/flooring-customer.webp'); }
.co-advantage-img--flooring-tech { background-image: url('/wp-content/uploads/assets/flooring-tech.webp'); }
.co-hero-image--hvac-hero { background-image: url('/wp-content/uploads/assets/hvac-hero.webp'); }
.co-advantage-img--hvac-customer { background-image: url('/wp-content/uploads/assets/hvac-customer.webp'); }
.co-advantage-img--hvac-tech { background-image: url('/wp-content/uploads/2026/06/hvac-tech.webp'); }
.co-hero-image--kitchen-remodel-hero { background-image: url('/wp-content/uploads/assets/kitchen-remodel-hero.webp'); }
.co-advantage-img--kitchen-remodel-customer { background-image: url('/wp-content/uploads/assets/kitchen-remodel-customer.webp'); }
.co-advantage-img--kitchen-remodel-tech { background-image: url('/wp-content/uploads/assets/kitchen-remodel-tech.webp'); }
.co-hero-image--plumbing-hero { background-image: url('/wp-content/uploads/assets/plumbing-hero.webp'); }
.co-advantage-img--plumbing-customer { background-image: url('/wp-content/uploads/2026/06/plumbing-customer.webp'); }
.co-advantage-img--plumbing-tech { background-image: url('/wp-content/uploads/assets/plumbing-tech.webp'); }
.co-hero-image--roofing-hero { background-image: url('/wp-content/uploads/assets/roofing-hero.webp'); }
.co-advantage-img--roofing-customer { background-image: url('/wp-content/uploads/assets/roofing-customer.webp'); }
.co-advantage-img--roofing-tech { background-image: url('/wp-content/uploads/assets/roofing-tech.webp'); }
.co-hero-image--siding-gutters-hero { background-image: url('/wp-content/uploads/2026/06/siding-gutters-hero.webp'); }
.co-advantage-img--siding-gutters-customer { background-image: url('/wp-content/uploads/assets/siding-gutters-customer.webp'); }
.co-advantage-img--siding-gutters-tech { background-image: url('/wp-content/uploads/assets/siding-gutters-tech.webp'); }
.co-hero-image--solar-hero { background-image: url('/wp-content/uploads/2026/06/solar-hero.webp'); }
.co-advantage-img--solar-customer { background-image: url('/wp-content/uploads/assets/solar-customer.webp'); }
.co-advantage-img--solar-tech { background-image: url('/wp-content/uploads/assets/solar-tech.webp'); }
.co-hero-image--windows-doors-hero { background-image: url('/wp-content/uploads/2026/06/windows-doors-hero.webp'); }
.co-advantage-img--windows-doors-customer { background-image: url('/wp-content/uploads/assets/windows-doors-customer.webp'); }
.co-advantage-img--windows-doors-tech { background-image: url('/wp-content/uploads/assets/windows-doors-tech.webp'); }

/* -- Trade-card backgrounds (contractors "Financing by trade" scroller) — tech photos */
.co-trade-img--hvac-tech            { background-image: url('/wp-content/uploads/assets/hvac-tech.webp'); }
.co-trade-img--roofing-tech         { background-image: url('/wp-content/uploads/assets/roofing-tech.webp'); }
.co-trade-img--solar-tech           { background-image: url('/wp-content/uploads/assets/solar-tech.webp'); }
.co-trade-img--windows-doors-tech   { background-image: url('/wp-content/uploads/assets/windows-doors-tech.webp'); }
.co-trade-img--bathroom-remodel-tech { background-image: url('/wp-content/uploads/assets/bathroom-remodel-tech.webp'); }
.co-trade-img--kitchen-remodel-tech { background-image: url('/wp-content/uploads/assets/kitchen-remodel-tech.webp'); }
.co-trade-img--plumbing-tech        { background-image: url('/wp-content/uploads/assets/plumbing-tech.webp'); }
.co-trade-img--electrical-tech      { background-image: url('/wp-content/uploads/assets/electrical-tech.webp'); }
.co-trade-img--siding-gutters-tech  { background-image: url('/wp-content/uploads/assets/siding-gutters-tech.webp'); }
.co-trade-img--flooring-tech        { background-image: url('/wp-content/uploads/assets/flooring-tech.webp'); }

/* -- Section background photos (homepage) — already absolute, untouched by build */
.co-imgtext-img--compare-options { background-image: url('https://www.acornfinance.com/wp-content/uploads/2026/01/couple-looking-at-website.webp'); }

/* -- One-offs (contractors) */
.co-imgtext-img--label .sub { font-size: 11px; color: var(--af-gray-700); font-weight: 400; margin-top: 2px; }
.co-imgtext-img--card .tags { margin-bottom: 8px; }
.co-h2 + .co-different-block { margin-top: 32px; }

/* -- Lender mark brand colors (How-it-works mock offers) */
.lp-mock-offer-mark--bestegg { background: #4F6FB0; }
.lp-mock-offer-mark--upgrade { background: #00C26A; }

/* -- Borrower loan-category icon accent colors */
.bo-cat-icon--home    { color: var(--af-sapphire-sky); }
.bo-cat-icon--debt    { color: var(--af-bright-blue); }
.bo-cat-icon--medical { color: var(--af-link-blue); }

/* -- Phone ghost rows: progressive fade. Values are position-dependent
      AND stack-size-dependent (homepage stacks 3 ghosts, borrowers 6),
      hence the :nth-child/:nth-last-child pairs — they reproduce the
      exact opacities the inline styles used for each stack size. */
.phone-ghost:nth-child(1) { opacity: 0.7; }
/* 3-row stack (homepage) */
.phone-ghost:nth-child(2):nth-last-child(2) { opacity: 0.52; }
.phone-ghost:nth-child(3):nth-last-child(1) { opacity: 0.34; }
/* 6-row stack (borrowers) */
.phone-ghost:nth-child(2):nth-last-child(5) { opacity: 0.58; }
.phone-ghost:nth-child(3):nth-last-child(4) { opacity: 0.46; }
.phone-ghost:nth-child(4):nth-last-child(3) { opacity: 0.34; }
.phone-ghost:nth-child(5):nth-last-child(2) { opacity: 0.24; }
.phone-ghost:nth-child(6):nth-last-child(1) { opacity: 0.16; }

/* -- Credibility stats: count-up stagger delay (consumed by the
      .lp-stat transition via var(--d)) */
.lp-stats-row .lp-stat:nth-child(1) { --d: 0ms; }
.lp-stats-row .lp-stat:nth-child(2) { --d: 140ms; }
.lp-stats-row .lp-stat:nth-child(3) { --d: 280ms; }

/* ============================================================
   SECTION — ROI Calculator (roi-calculator.html)
   Scoped under .af-roi. Moved from inline <style> block.
   ============================================================ */

/* ----------  local tokens on :root so they resolve in standalone section
   fragments (WP Custom HTML blocks) that may not be wrapped in .af-roi  ---------- */
:root {
  --afroi-navy:        var(--af-deep-space-blue, #00273E);
  --afroi-blue:        var(--af-sapphire-sky, #016DE1);
  --afroi-blue-hover:  var(--af-link-blue, #0B81FE);
  --afroi-lime:        var(--af-lime-green, #2FC600);

  --afroi-red:         var(--af-error, #E23636);
  --afroi-red-tint:    #FCEDED;
  --afroi-green:       var(--af-lime-green-deep, #018749);
  --afroi-green-tint:  #EAF7EF;

  --afroi-ink:         var(--af-ink-black, #03171A);
  --afroi-ink-2:       var(--af-gray-800, #485169);
  --afroi-muted:       var(--af-gray-700, #6B7280);

  --afroi-bg:          var(--af-gray-100, #F9FAFB);
  --afroi-bg-2:        var(--af-gray-200, #F3F4F6);
  --afroi-border:      var(--af-gray-400, #E5E7EB);
  --afroi-tint:        var(--af-alice-blue, #EBF8FF);

  --afroi-head: var(--font-display, "Sohne", "Helvetica Neue", Arial, sans-serif);
  --afroi-body: var(--font-sans, "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);

  --afroi-radius: 12px;
  --afroi-radius-sm: 8px;
  --afroi-maxw: 1100px;
}

/* Scoped typography + smoothing for the whole .af-roi block
   (only applies when the wrapper div is present; standalone fragments
   inherit these from the page body instead — that's fine) */
.af-roi {
  font-family: var(--afroi-body);
  color: var(--afroi-ink);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ----------  scoped reset  ---------- */
.af-roi *, .af-roi *::before, .af-roi *::after { box-sizing: border-box; }
.af-roi :where(section, ul, li, p, a, h1, h2, h3, button, input, select, textarea) {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  text-decoration: none;
  text-transform: none;
}
.af-roi :where(p, li) { color: inherit; }
.af-roi button { background: none; font: inherit; cursor: pointer; }
.af-roi input, .af-roi select, .af-roi textarea { font: inherit; }

/* ----------  shared layout helpers  ---------- */
.af-roi-container {
  width: 100%;
  max-width: var(--afroi-maxw);
  margin: 0 auto;
  padding: 0 24px;
}
.af-roi :where(h1, h2, h3) {
  font-family: var(--afroi-head);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--afroi-ink);
}

/* --- 1. Hero --- */
.af-roi-hero {
  background: var(--afroi-navy);
  padding: 28px 0 48px;
  text-align: center;
}
.af-roi-hero-inner { max-width: 640px; margin: 0 auto; }
.af-roi-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 36px;
}
.af-roi-crumb a { color: var(--af-bright-blue, #0092FF); }
.af-roi-crumb a:hover { color: #fff; }
.af-roi-crumb-sep { color: rgba(255, 255, 255, 0.35); }
.af-roi-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--afroi-tint);
  color: var(--afroi-blue);
  font-family: var(--afroi-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 24px;
}
.af-roi-eyebrow svg { display: block; }
.af-roi-hero .af-roi-h1 {
  font-size: clamp(30px, 4.4vw, 46px);
  margin-bottom: 16px;
  color: #fff;
}
.af-roi-hero-sub {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

/* --- 2. Calculator --- */
.af-roi-calc { background: var(--afroi-bg); padding: 16px 0 64px; }
.af-roi-calc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
.af-roi-panel-label {
  font-family: var(--afroi-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--afroi-muted);
  margin-bottom: 12px;
}
.af-roi-card {
  background: #fff;
  border: 1px solid var(--afroi-border);
  border-radius: var(--afroi-radius);
  padding: 28px;
}
.af-roi-field { margin-bottom: 24px; }
.af-roi-field:last-child { margin-bottom: 0; }
.af-roi-label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: var(--afroi-ink);
  margin-bottom: 10px;
}
.af-roi-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.af-roi-label-row .af-roi-label { margin-bottom: 0; }
.af-roi-val {
  font-family: var(--afroi-head);
  font-weight: 700;
  font-size: 17px;
  color: var(--afroi-blue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.af-roi-help {
  font-size: 12px;
  color: var(--afroi-muted);
  line-height: 1.45;
  margin-top: 8px;
}
.af-roi-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.af-roi-pill {
  border: 1px solid var(--afroi-border);
  background: #fff;
  color: var(--afroi-ink-2);
  font-weight: 600;
  font-size: 14px;
  padding: 9px 16px;
  border-radius: 999px;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.af-roi-pill:hover { border-color: var(--afroi-blue); color: var(--afroi-blue); }
.af-roi-pill.is-on {
  background: var(--afroi-blue);
  border-color: var(--afroi-blue);
  color: #fff;
}
.af-roi-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--afroi-bg-2);
  accent-color: var(--afroi-blue);
  outline: none;
}
.af-roi-range:focus-visible { box-shadow: 0 0 0 4px rgba(1,109,225,0.20); }
.af-roi-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--afroi-blue);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,39,62,0.25);
  cursor: pointer;
}
.af-roi-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--afroi-blue);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,39,62,0.25);
  cursor: pointer;
}
.af-roi-select-wrap { position: relative; }
.af-roi-select {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  border: 1px solid var(--afroi-border);
  border-radius: var(--afroi-radius-sm);
  padding: 12px 40px 12px 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--afroi-ink);
  cursor: pointer;
}
.af-roi-select:focus-visible {
  border-color: var(--afroi-blue);
  box-shadow: 0 0 0 4px rgba(1,109,225,0.20);
}
.af-roi-select-wrap::after {
  content: "";
  position: absolute;
  right: 16px; top: 50%;
  width: 11px; height: 7px;
  transform: translateY(-50%);
  background: var(--afroi-ink-2);
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  pointer-events: none;
}
.af-roi-results { display: flex; flex-direction: column; gap: 16px; }
.af-roi-result { border-radius: var(--afroi-radius); padding: 20px 22px; }
.af-roi-result-title {
  font-family: var(--afroi-body);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 10px;
}
.af-roi-result-line { font-size: 14px; line-height: 1.55; color: var(--afroi-ink-2); margin-bottom: 4px; }
.af-roi-result-big {
  font-family: var(--afroi-head);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--afroi-ink);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.af-roi-result-sub { font-size: 12px; font-weight: 600; margin-top: 8px; }
.af-roi-result--fee { background: var(--afroi-red-tint); border-left: 3px solid var(--afroi-red); }
.af-roi-result--fee .af-roi-result-title { color: var(--afroi-red); }
.af-roi-result--fee .af-roi-result-big  { color: var(--afroi-red); }
.af-roi-result--fee .af-roi-result-sub  { color: var(--afroi-red); opacity: 0.85; }
.af-roi-result--rev { background: var(--afroi-green-tint); border-left: 3px solid var(--afroi-green); }
.af-roi-result--rev .af-roi-result-title { color: var(--afroi-green); }
.af-roi-result--rev .af-roi-result-big  { color: var(--afroi-green); }
.af-roi-result--rev .af-roi-result-sub  { color: var(--afroi-green); opacity: 0.85; }
.af-roi-result--total { background: var(--afroi-blue); color: #fff; padding: 26px 24px; }
.af-roi-result--total .af-roi-total-eyebrow {
  font-family: var(--afroi-head);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  margin-bottom: 10px;
}
.af-roi-total-num {
  font-family: var(--afroi-head);
  font-weight: 800;
  font-size: clamp(40px, 7vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.af-roi-total-break { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.85); margin-top: 10px; }
.af-roi-total-cta {
  display: block;
  width: 100%;
  text-align: center;
  background: #fff;
  color: var(--afroi-blue);
  font-weight: 700;
  font-size: 16px;
  padding: 14px 20px;
  border-radius: 999px;
  margin-top: 20px;
  transition: transform 140ms ease, background 140ms ease;
}
.af-roi-total-cta:hover { background: var(--afroi-tint); transform: translateY(-1px); }

/* --- 3. Assumptions --- */
.af-roi-assume { background: var(--afroi-bg-2); padding: 28px 0; }
.af-roi-assume-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.af-roi-assume-item { display: flex; gap: 12px; align-items: flex-start; }
.af-roi-assume-ico {
  flex: none;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--afroi-tint);
  color: var(--afroi-blue);
  display: flex; align-items: center; justify-content: center;
}
.af-roi-assume-label { font-weight: 700; font-size: 14px; color: var(--afroi-ink); margin-bottom: 3px; }
.af-roi-assume-text  { font-size: 13px; line-height: 1.5; color: var(--afroi-ink-2); }

/* --- 4. Competitor fee strip --- */
.af-roi-comp { background: #fff; border-top: 1px solid var(--afroi-border); border-bottom: 1px solid var(--afroi-border); padding: 28px 0; }
.af-roi-comp-label {
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--afroi-muted);
  margin-bottom: 20px;
}
.af-roi-comp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.af-roi-comp-cell { text-align: center; padding: 16px 12px; border-radius: var(--afroi-radius-sm); background: var(--afroi-bg); }
.af-roi-comp-name { font-size: 14px; color: var(--afroi-ink-2); margin-bottom: 6px; }
.af-roi-comp-fee  { font-family: var(--afroi-head); font-weight: 700; font-size: 22px; color: var(--afroi-red); }
.af-roi-comp-note { font-size: 11px; color: var(--afroi-muted); margin-top: 2px; }
.af-roi-comp-vs   { font-size: 13px; font-weight: 700; color: var(--afroi-green); margin-top: 6px; }
.af-roi-comp-foot {
  text-align: center;
  font-size: 12px;
  color: var(--afroi-muted);
  line-height: 1.5;
  max-width: 760px;
  margin: 18px auto 0;
}

/* --- 5. Testimonials --- */
.af-roi-test { background: var(--afroi-bg); padding: 56px 0; }
.af-roi-test-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.af-roi-test-card {
  background: #fff;
  border: 1px solid var(--afroi-border);
  border-left: 3px solid var(--afroi-blue);
  border-radius: var(--afroi-radius);
  padding: 24px;
}
.af-roi-test-quote { font-size: 16px; line-height: 1.6; color: var(--afroi-ink); margin-bottom: 14px; }
.af-roi-test-attr  { font-size: 13px; font-weight: 700; color: var(--afroi-ink-2); }

/* --- 6. FAQ --- */
.af-roi-faq { background: #fff; padding: 56px 0; }
.af-roi-faq-inner { max-width: 760px; margin: 0 auto; }
.af-roi-faq-label {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--afroi-blue);
  margin-bottom: 8px;
}
.af-roi-faq-h2   { font-size: clamp(26px, 3vw, 34px); margin-bottom: 24px; }
.af-roi-faq-item { border-bottom: 1px solid var(--afroi-border); }
.af-roi-faq-item:first-child { border-top: 1px solid var(--afroi-border); }
.af-roi-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  text-align: left;
  padding: 20px 0;
  font-family: var(--afroi-head);
  font-weight: 600;
  font-size: 18px;
  color: var(--afroi-ink);
}
.af-roi-faq-chev { flex: none; color: var(--afroi-blue); transition: transform 220ms ease; }
.af-roi-faq-item.is-open .af-roi-faq-chev { transform: rotate(180deg); }
.af-roi-faq-a { overflow: hidden; max-height: 0; transition: max-height 300ms ease; }
.af-roi-faq-item.is-open .af-roi-faq-a { max-height: 320px; }
.af-roi-faq-a-inner { padding: 0 0 22px; font-size: 15px; line-height: 1.6; color: var(--afroi-ink-2); }

/* Static (always-exposed) FAQ — questions are headings, answers always visible. */
.af-roi-faq-q-static {
  margin: 0;
  padding: 22px 0 8px;
  font-family: var(--afroi-head);
  font-weight: 600;
  font-size: 18px;
  color: var(--afroi-ink);
}

/* --- 7. Bottom CTA --- */
.af-roi-cta-wrap { background: var(--afroi-bg); padding: 16px 0 72px; }
.af-roi-cta { background: var(--afroi-navy); border-radius: var(--afroi-radius); padding: 48px 36px; text-align: center; }
.af-roi-cta-h2  { color: #fff; font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 14px; }
.af-roi-cta-sub {
  color: rgba(255,255,255,0.78);
  font-size: 16px;
  line-height: 1.55;
  max-width: 560px;
  margin: 0 auto 28px;
}
.af-roi-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 24px;
}
.af-roi-cta-primary {
  background: #fff;
  color: var(--afroi-blue);
  font-weight: 700;
  font-size: 16px;
  padding: 15px 32px;
  border-radius: 999px;
  transition: transform 140ms ease, background 140ms ease;
}
.af-roi-cta-primary:hover { background: var(--afroi-tint); transform: translateY(-1px); }
.af-roi-cta-secondary { color: #fff; font-weight: 700; font-size: 15px; border-bottom: 1px solid transparent; }
.af-roi-cta-secondary:hover { border-bottom-color: rgba(255,255,255,0.6); }

/* --- ROI Responsive --- */
@media (min-width: 768px) {
  .af-roi-calc-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .af-roi-hero { padding: 48px 0 48px; }
}
@media (max-width: 767px) {
  .af-roi-assume-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .af-roi-comp-grid   { grid-template-columns: 1fr 1fr; }
  .af-roi-test-grid   { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .af-roi-assume-grid { grid-template-columns: 1fr; }
  .af-roi-container   { padding: 0 18px; }
  .af-roi-card        { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .af-roi * { transition: none !important; }
}



/* ============================================================
   SECTION — App marketing page (.afd)
   Scroll-driven Acorn Finance contractor mobile-app landing.
   Self-contained namespaced module (mirrors the .af-roi block):
   markup pastes into a WP Custom HTML block, these styles ship via
   the plugin CSS, and the page JS lives in an inline <script>.
   Brand palette/fonts reused via --af-* tokens with system fallbacks.
   ============================================================ */
:root {
  --afd-navy:        var(--af-deep-space-blue, #00273E);
  --afd-navy-soft:   #0B3A57;
  --afd-blue:        var(--af-sapphire-sky, #016DE1);
  --afd-blue-hover:  var(--af-link-blue, #0B81FE);
  --afd-lime:        var(--af-lime-green, #2FC600);
  --afd-green:       #1E9E4A;
  --afd-green-tint:  #EAF7EF;
  --afd-ink:         var(--af-ink-black, #03171A);
  --afd-ink-2:       var(--af-gray-800, #485169);
  --afd-muted:       var(--af-gray-700, #6B7280);
  --afd-bg:          var(--af-gray-100, #F9FAFB);
  --afd-bg-2:        var(--af-gray-200, #F3F4F6);
  --afd-border:      var(--af-gray-400, #E5E7EB);
  --afd-tint:        var(--af-alice-blue, #EBF8FF);
  --afd-head: var(--font-display, "Sohne", "Helvetica Neue", Arial, sans-serif);
  --afd-body: var(--font-sans, "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  --afd-radius: 16px;
  --afd-radius-sm: 10px;
  --afd-maxw: 1140px;
}

.afd-svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ----------  reset (scoped)  ---------- */
.afd, .afd * { box-sizing: border-box; }
.afd :where(section, ul, li, p, a, h1, h2, h3, button, input) {
  margin: 0; padding: 0; border: 0;
  list-style: none; text-decoration: none; text-transform: none;
  color: inherit;
}
.afd button { background: none; font: inherit; cursor: pointer; }
.afd input { font: inherit; }

.afd {
  font-family: var(--afd-body);
  color: var(--afd-ink);
  font-size: 16px; line-height: 1.5;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
.afd :where(h1, h2, h3) {
  font-family: var(--afd-head);
  font-weight: 700; line-height: 1.08; letter-spacing: -0.02em;
  color: var(--afd-ink);
  text-wrap: balance;
}
.afd-container { width: 100%; max-width: var(--afd-maxw); margin: 0 auto; padding: 0 24px; }
.afd-eyebrow {
  display: inline-block;
  font-family: var(--afd-head);
  font-weight: 700; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--af-icy-blue);
  margin-bottom: 14px;
}
/* emphasis accent inside the hero headline */
.afd-h1-accent { color: var(--af-bright-blue); }

/* ----------  reveal + stagger animations (gated)  ---------- */
@media (prefers-reduced-motion: no-preference) {
  .afd-reveal { opacity: 0; transform: translateY(20px); transition: opacity 500ms ease, transform 500ms ease; }
  .afd-reveal.is-visible { opacity: 1; transform: none; }
  .afd-stagger-child { opacity: 0; transform: translateY(16px); transition: opacity 460ms ease, transform 460ms ease; transition-delay: calc(var(--afd-i, 0) * 80ms); }
  .afd-stagger-child.is-visible { opacity: 1; transform: none; }
}
/* Safeguard (ungated): a revealed element must always end up visible, even if
   the gated reveal block above is ever dropped by a parser/cache edge case. */
.afd-reveal.is-visible,
.afd-stagger-child.is-visible { opacity: 1; transform: none; }

/* ============================================================
   1. HERO (centered copy, QR tabs, large phone, orbiting customers)
   ============================================================ */
.afd-hero { background: var(--afd-navy); color: #fff; padding: 48px 0 0; overflow: hidden; text-align: center; }
.afd-hero-copy { max-width: 720px; margin: 0 auto; }
.afd-hero h1 { color: #fff; font-size: clamp(34px, 5.4vw, 58px); }
.afd-hero-sub { color: rgba(255,255,255,0.74); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; margin: 18px auto 0; max-width: 52ch; }

/* CTA: tabbed QR (App Store / Google Play) */
.afd-qrtabs { display: inline-flex; align-items: stretch; gap: 14px; margin-top: 28px; background: #fff; border-radius: 18px; padding: 12px 14px; box-shadow: 0 18px 44px rgba(0,0,0,0.22); text-align: left; }
.afd-qrtab-btns { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.afd-qrtab { padding: 10px 24px; border-radius: 10px; font-family: var(--afd-head); font-weight: 700; font-size: 14px; color: var(--afd-ink-2); background: var(--afd-bg-2); white-space: nowrap; text-align: left; transition: background 140ms ease, color 140ms ease; }
.afd-qrtab:hover { color: var(--afd-ink); }
.afd-qrtab.is-on { background: var(--afd-blue); color: #fff; }
.afd-qr-panels { display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--afd-border); padding-left: 14px; }
.afd-qr-panel { display: none; flex-direction: column; align-items: center; gap: 6px; }
.afd-qr-panel.is-on { display: flex; }
.afd-qr-panel .afd-qr { width: 100px; height: 100px; display: block; }
.afd-qr-cap { color: var(--afd-muted); font-weight: 600; font-size: 12px; }

/* Mobile store links (replace the desktop-only tab controller) */
.afd-hero-stores { display: none; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }

/* phone stage — layered parallax: background · depth cards · hand+phone foreground */
.afd-hero-stage { position: relative; margin: 40px auto 0; width: 100%; max-width: 360px; aspect-ratio: 1 / 1; }

.afd-stage-bg, .afd-stage-fg { position: absolute; inset: 0; }

/* BACKGROUND — soft brand glow placeholder (replaceable with a photo) */
.afd-stage-bg { z-index: 1; }
.afd-stage-bg-fill { width: 100%; height: 100%; border-radius: 50%;
  background:
    radial-gradient(58% 58% at 50% 42%, rgba(1,109,225,0.45), rgba(1,109,225,0) 72%),
    radial-gradient(46% 46% at 66% 72%, rgba(47,198,0,0.26), rgba(47,198,0,0) 74%);
  filter: blur(8px); }
.afd-stage-bg.has-img .afd-stage-bg-fill { display: none; }
.afd-stage-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }

/* FOREGROUND — hand + phone; transparent corners let the cards peek through */
.afd-stage-fg { z-index: 3; display: flex; align-items: center; justify-content: center; }
.afd-fg-img { width: 100%; height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 26px 54px rgba(0,12,24,0.42)); }

/* DEPTH CARDS — midground, between bg and fg */
.afd-dcard-wrap { position: absolute; z-index: 2; will-change: transform; }
.afd-dcard { display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 14px; padding: 10px 13px;
  box-shadow: 0 18px 40px rgba(0,16,32,0.24), 0 2px 6px rgba(0,16,32,0.10);
  white-space: nowrap; }
.afd-dcard-ic { flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; }
.afd-dcard-ic svg { width: 16px; height: 16px; }
.afd-dcard-ic--funded { background: rgba(47,198,0,0.14); color: #1E9E4A; }
.afd-dcard-ic--applied { background: rgba(1,109,225,0.12); color: #016DE1; }
.afd-dcard-txt { display: flex; flex-direction: column; line-height: 1.18; }
.afd-dcard-name { font-family: var(--afd-head); font-weight: 700; font-size: 13px; color: var(--afd-ink); }
.afd-dcard-sub { font-size: 11px; color: #5B6B76; }
.afd-dcard-sub strong { color: var(--afd-ink); font-weight: 800; }
.afd-dcard-amt { font-family: var(--afd-head); font-weight: 800; font-size: 13.5px; color: var(--afd-ink); margin-left: 4px; }

/* default (mobile) card anchors — overridden on desktop below */
.afd-dcard-wrap--a { top: 0; left: 2%; }
.afd-dcard-wrap--b { top: 46%; left: -8%; }
.afd-dcard-wrap--c { bottom: 4%; right: 2%; }

/* entrance — gated so reduced-motion users see the final state immediately */
@media (prefers-reduced-motion: no-preference) {
  .afd-stage-bg-fill, .afd-fg-img, .afd-dcard { opacity: 0; transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
  .afd-stage-bg-fill { transform: scale(1.08); }
  .afd-fg-img { transform: translateY(30px) scale(.97); }
  .afd-dcard { transform: translateY(16px); }
  .afd-hero-stage.is-visible .afd-stage-bg-fill { opacity: 1; transform: scale(1); transition-delay: .04s; }
  .afd-hero-stage.is-visible .afd-fg-img { opacity: 1; transform: translateY(0) scale(1); transition-delay: .1s; }
  .afd-hero-stage.is-visible .afd-dcard { opacity: 1; transform: translateY(0); }
  .afd-hero-stage.is-visible .afd-dcard-wrap--a .afd-dcard { transition-delay: .32s; }
  .afd-hero-stage.is-visible .afd-dcard-wrap--b .afd-dcard { transition-delay: .44s; }
  .afd-hero-stage.is-visible .afd-dcard-wrap--c .afd-dcard { transition-delay: .56s; }
}
/* Safeguard (ungated): once the stage is revealed, its layers must be visible
   even if the gated entrance block above is dropped by a parser/cache edge case. */
.afd-hero-stage.is-visible .afd-stage-bg-fill,
.afd-hero-stage.is-visible .afd-fg-img,
.afd-hero-stage.is-visible .afd-dcard { opacity: 1; }

@media (min-width: 768px) {
  /* no bottom padding — the foreground image sits flush against the section's bottom edge (no navy gap) */
  .afd-hero { padding: 84px 0 0; text-align: center; }
  /* single centered column: copy stacked on top, phone + concept directly beneath the CTA */
  .afd-hero .afd-container { display: flex; flex-direction: column; align-items: center; }
  .afd-hero-copy { max-width: 900px; margin: 0 auto; }
  .afd-hero-sub { margin-left: auto; margin-right: auto; max-width: 66ch; }
  /* sit flush under the QR-tabs button — no gap between button and stage */
  .afd-hero-stage { margin: 0 auto; max-width: 560px; }
  .afd-dcard { padding: 12px 16px; gap: 12px; border-radius: 16px; }
  .afd-dcard-ic { width: 38px; height: 38px; }
  .afd-dcard-ic svg { width: 18px; height: 18px; }
  .afd-dcard-name { font-size: 14.5px; }
  .afd-dcard-sub { font-size: 12px; }
  .afd-dcard-amt { font-size: 15px; }
  /* depth-card desktop positions — overlap the phone so the inner edge tucks
     BEHIND the foreground (occluded by the phone, z3) while the rest floats
     over the background circle (in front of bg, z1). */
  .afd-dcard-wrap--a { top: 13%; left: 4%; right: auto; }
  .afd-dcard-wrap--b { top: 48%; left: -11%; right: auto; }
  .afd-dcard-wrap--c { bottom: 16%; right: -12%; left: auto; }
}
@media (max-width: 767px) {
  .afd-hero-stage { max-width: 290px; }
  .afd-dcard-wrap--b { display: none; }
  .afd-dcard-wrap--a { top: 0; left: 0; }
  .afd-dcard-wrap--c { bottom: 6%; right: -3%; left: auto; z-index: 5; }
  .afd-dcard { padding: 8px 11px; gap: 8px; }
  .afd-dcard-ic { width: 28px; height: 28px; }
  .afd-dcard-ic svg { width: 14px; height: 14px; }
  .afd-dcard-name { font-size: 12px; }
  .afd-dcard-sub { font-size: 10.5px; }
  .afd-dcard-amt { font-size: 12px; }
  .afd-qrtabs { display: none; }
  .afd-hero-stores { display: flex; }
}

/* App store buttons (hero mobile badges) */
.afd-store { display: inline-flex; align-items: center; gap: 11px; background: #000; color: #fff; border-radius: 12px; padding: 9px 18px; min-height: 54px; transition: transform 140ms ease, box-shadow 140ms ease; }
.afd-store:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.28); }
.afd-store svg { flex: none; }
.afd-store-top { display: block; font-size: 10px; line-height: 1; opacity: 0.85; letter-spacing: 0.2px; }
.afd-store-big { display: block; font-family: var(--afd-head); font-weight: 600; font-size: 18px; line-height: 1.15; margin-top: 2px; }

/* ============================================================
   Rate Table — <rate-table> component additions
   Extends .bo-rate-* with loading/error states, expandable
   detail rows, tab navigation, pros/cons, and empty state.
   ============================================================ */

/* ---- Loading / error ---------------------------------------- */
.bo-rate-loading,
.bo-rate-error {
  padding: 48px 24px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 15px;
}
.bo-rate-loading { color: var(--af-gray-700); }
.bo-rate-error   { color: var(--af-error); }

/* ---- Rows container ----------------------------------------- */
/* Wraps data rows + inline detail panels; corrects :last-child
   border behavior when a detail panel is the last element.     */
.bo-rate-rows > *:last-child { border-bottom: 0; }
.bo-rate-rows .bo-rate-row:last-child { border-bottom: 1px solid var(--af-gray-200); }

/* ---- Open row ----------------------------------------------- */
.bo-rate-row--open {
  background: var(--af-alice-blue);
  border-bottom-color: transparent;
}

/* ---- Expandable detail panel -------------------------------- */
.bo-rate-detail {
  border-bottom: 1px solid var(--af-gray-200);
  background: var(--af-gray-100);
}
.bo-rate-detail-inner { padding: 0 24px 24px; }

/* ---- Tab navigation ----------------------------------------- */
.bo-rate-tabs {
  display: flex;
  border-bottom: 1px solid var(--af-gray-300);
  margin-bottom: 20px;
}
.bo-rate-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 14px 20px;
  margin-bottom: -1px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--af-gray-700);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
.bo-rate-tab:hover { color: var(--af-ink-black); }
.bo-rate-tab--active {
  color: var(--af-sapphire-sky);
  border-bottom-color: var(--af-sapphire-sky);
}

/* ---- Tab panels --------------------------------------------- */
.bo-rate-tab-pane         { display: none; }
.bo-rate-tab-pane--active { display: block; }

/* ---- Disclaimer panel --------------------------------------- */
.bo-rate-disclaimer {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--af-gray-700);
  max-height: 240px;
  overflow-y: auto;
}
.bo-rate-disclaimer h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--af-ink-black);
  margin: 12px 0 4px;
}
.bo-rate-disclaimer p { margin: 0 0 8px; }
.bo-rate-disclaimer a { color: var(--af-sapphire-sky); }

/* ---- Pros & Cons panel -------------------------------------- */
.bo-rate-pc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.bo-rate-pc-heading {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--af-gray-700);
  margin: 0 0 12px;
}
.bo-rate-pc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bo-rate-pc-list li {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--af-ink-black);
  padding-left: 20px;
  position: relative;
}
.bo-rate-pc-list li::before {
  position: absolute;
  left: 0;
  font-size: 12px;
  line-height: 1.45;
}
.bo-rate-pc-col:first-child .bo-rate-pc-list li::before {
  content: '✓';
  color: var(--af-lime-green-deep);
  font-weight: 700;
}
.bo-rate-pc-col:last-child .bo-rate-pc-list li::before {
  content: '–';
  color: var(--af-gray-600);
}

/* ---- Empty state -------------------------------------------- */
.bo-rate-empty {
  padding: 56px 24px;
  text-align: center;
}
.bo-rate-empty-inner {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.bo-rate-empty p {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--af-gray-700);
  margin: 0;
}
.bo-rate-reset {
  background: var(--af-sapphire-sky);
  color: var(--af-white);
  border: none;
  border-radius: 8px;
  padding: 10px 24px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease;
}
.bo-rate-reset:hover { background: var(--af-link-blue); }

/* ---- More info button — open state ------------------------- */
.bo-rate-more--open {
  background: var(--af-alice-blue);
  color: var(--af-sapphire-sky);
}
.bo-rate-more--open svg { transform: rotate(90deg); }

/* ---- Responsive --------------------------------------------- */
@media (max-width: 767px) {
  .bo-rate-pc-grid      { grid-template-columns: 1fr; }
  .bo-rate-detail-inner { padding: 0 16px 20px; }
  .bo-rate-tab          { padding: 12px 14px; font-size: 13px; }
}