/* ============================================================
   Acorn Finance — WordPress Plugin CSS
   tokens.css + claude.css concatenated (no @font-face / @import).

   SCOPING: every selector is prefixed with :where(.claude), which adds
   ZERO specificity — the output keeps the exact cascade weight it had
   before scoping, so ties with GeneratePress / GenerateBlocks / GB Global
   CSS / ts1-ts3 still resolve by source order as they used to.

   The scope is a wrapper <div class="claude"> around each pasted section
   (NOT the <html> element). What used to be html / body / :root now sits
   on the compound selector div:where(.claude) — specificity (0,0,1), the
   same weight html and body carried. The wrapper paints no background:
   a section that needs a white surface must set it itself.

   Generated: 2026-10-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.
*/

div:where(.claude) {
  /* ======================  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  -----------------------------
   The wrapper is listed explicitly in the box-sizing reset: ":where(.claude) *"
   matches descendants only, never the wrapper itself. No margin/padding/
   background reset here — page chrome belongs to GeneratePress, and the
   wrapper is transparent by decision (sections paint their own surface).
   Baseline font-family/color/smoothing for the wrapper live in claude.css. */
div:where(.claude),
:where(.claude) *, :where(.claude) *::before, :where(.claude) *::after { box-sizing: border-box; }
div:where(.claude) {
  font-size: var(--fs-body-1);
  line-height: var(--lh-body);
}

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

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

:where(.claude) .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);
}

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

:where(.claude) a, :where(.claude) .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. */
:where(.claude) a:not([class]):hover,
:where(.claude) .af-link:hover { color: var(--fg-link-hover); }

:where(.claude) 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 -------------------------------------------------------- */

div:where(.claude),
:where(.claude) *,
:where(.claude) *::before,
:where(.claude) *::after {
  box-sizing: border-box;
}

/* Baseline typography for the wrapper. No margin/padding/background:
   the wrapper is transparent and GeneratePress owns page chrome. Any
   section that needs a white surface must paint it itself. */
div:where(.claude) {
  color: var(--af-ink-black);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Inputs/buttons inherit the page font instead of the UA default. */
:where(.claude) button,
:where(.claude) input,
:where(.claude) select,
:where(.claude) 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. */
:where(.claude) :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) {
  div:where(.claude),
  :where(.claude) *,
  :where(.claude) *::before,
  :where(.claude) *::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 */
:where(.claude) global-nav:not(:defined) {
  display: block;
  height: 64px;
}

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

:where(.claude) .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);
}
:where(.claude) .nav-logo { display: inline-flex; align-items: center; height: 100%; text-decoration: none; }
:where(.claude) .nav-logo img { height: 44px; width: auto; display: block; }

:where(.claude) .nav-links {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 6px;
  justify-content: center;
}
:where(.claude) .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;
}
:where(.claude) .nav-link:hover { background: var(--af-alice-blue); color: var(--af-sapphire-sky); }
:where(.claude) .nav-link svg { transition: transform 140ms ease; }
:where(.claude) .nav-link:hover svg { transform: translateY(1px); }

:where(.claude) .nav-actions { display: flex; align-items: center; gap: 20px; }
:where(.claude) .nav-signin {
  color: var(--af-ink-black);
  font-weight: 600; font-size: 16px;
  text-decoration: none;
  padding: 8px 4px;
  transition: color 140ms ease;
}
:where(.claude) .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. */
:where(.claude) .nav-cta { font-size: 15px; padding: 12px 24px; }

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

:where(.claude) .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;
}
:where(.claude) .lp-nav-logo { display: inline-flex; align-items: center; height: 100%; text-decoration: none; }
:where(.claude) .lp-nav-logo img { height: 36px; width: auto; display: block; }
:where(.claude) .lp-nav-links {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 6px; justify-content: center;
}
:where(.claude) .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;
}
:where(.claude) .lp-nav-link:hover { background: var(--af-alice-blue); color: var(--af-sapphire-sky); }
:where(.claude) .lp-nav-actions { display: flex; align-items: center; gap: 20px; }
:where(.claude) .lp-nav-signin {
  color: var(--af-ink-black);
  font-weight: 600; font-size: 15px;
  text-decoration: none;
  transition: color 140ms ease;
}
:where(.claude) .lp-nav-signin:hover { color: var(--af-sapphire-sky); }
:where(.claude) .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);
}
:where(.claude) .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. */
:where(.claude) .lp-nav-burger { display: none; }
:where(.claude) .lp-nav { position: relative; }

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

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

  :where(.claude) .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;
  }
  :where(.claude) .lp-nav-burger span {
    display: block;
    height: 2px;
    background: var(--af-ink-black);
    border-radius: 1px;
    transition: transform 200ms ease, opacity 200ms ease;
  }
  :where(.claude) .lp-nav.is-open .lp-nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  :where(.claude) .lp-nav.is-open .lp-nav-burger span:nth-child(2) { opacity: 0; }
  :where(.claude) .lp-nav.is-open .lp-nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  :where(.claude) .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); }
  }
  :where(.claude) .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;
  }
  :where(.claude) .lp-nav-drawer-link:hover { background: var(--af-alice-blue); }
  :where(.claude) .lp-nav-drawer-link--muted { color: var(--af-gray-800); font-weight: 600; }
  :where(.claude) .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 */
:where(.claude) .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. */
:where(.claude) .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. */
:where(.claude) .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) {
  :where(.claude) .stage-inner {
    aspect-ratio: auto;
    height: 700px;
  }
  :where(.claude) .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 ------------------------------------------------------ */

:where(.claude) .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 ------------------------------------------------------------ */

:where(.claude) .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;
}
:where(.claude) .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);
}
:where(.claude) .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);
}
:where(.claude) .btn-primary:active { transform: translateY(0); }
:where(.claude) .btn-lg { padding: 18px 36px; font-size: 17px; border-radius: 10px; }
:where(.claude) .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;
}
:where(.claude) .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 ---------------------------------------------------------- */

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

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

:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .tab-toggle button.is-on { color: var(--af-ink-black); }
:where(.claude) .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;
}
:where(.claude) .tab-pill[data-pos="contractors"] { transform: translateX(0); left: 4px; }
:where(.claude) .tab-pill[data-pos="borrowers"] { transform: translateX(100%); left: 4px; }

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

:where(.claude) .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 ----------------------------------------------------------- */

:where(.claude) .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;
}
:where(.claude) .hl-row { display: block; }
:where(.claude) .hl-row--1 { margin-bottom: 4px; color: var(--af-bright-blue); }
:where(.claude) .hl-row--2 { color: var(--af-white); }

/* per-word entrance — staggered fade-up */
:where(.claude) .hl-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  animation: hl-rise 720ms cubic-bezier(.2,.7,.2,1) forwards;
}
:where(.claude) .w-the   { animation-delay:  120ms; }
:where(.claude) .w-free  { animation-delay:  220ms; }
:where(.claude) .w-fin   { animation-delay:  320ms; }
:where(.claude) .w-plat  { animation-delay:  420ms; }
:where(.claude) .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 */
:where(.claude) .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 */
:where(.claude) .hl-period {
  color: var(--af-white);
  display: inline-block;
  opacity: 0;
  animation: hl-rise 720ms cubic-bezier(.2,.7,.2,1) 640ms forwards;
}

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

:where(.claude) .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;
}
:where(.claude) .sub strong { color: var(--af-white); font-weight: 700; }

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

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

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

:where(.claude) .trust {
  display: flex; gap: 14px; align-items: stretch;
  animation: hl-fade 900ms ease 980ms both;
}
:where(.claude) .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;
}
:where(.claude) .trust-pill .trust-label { font-weight: 700; color: rgba(255,255,255,0.92); }
:where(.claude) .stars { display: inline-flex; gap: 2px; }
:where(.claude) .trust-src { font-size: 12px; opacity: 0.85; }
:where(.claude) .trust-pill--bbb { padding-left: 6px; }
:where(.claude) .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) ---------------------------------------- */

:where(.claude) .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) ----------------- */

:where(.claude) .phone-stage {
  position: relative;
  width: 100%;
  height: 100%;
  /* Single source of truth for the two absolutes below. .phone and .arc-card are
     both positioned from this containing block, so they must not carry
     independent hand-tuned offsets — move --phone-top and the cards follow. */
  --phone-top: 60px;    /* top of the phone box, from the stage's top edge */
  --card-inset: 171px;  /* focused card top, measured DOWN FROM the phone box top:
                           bezel + status bar + .phone-stage-slot margin */
}

:where(.claude) .phone {
  position: absolute;
  top: var(--phone-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. */
:where(.claude) .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;
}
:where(.claude) .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);
}
:where(.claude) .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 */
:where(.claude) .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;
}
:where(.claude) .phone-status-time { letter-spacing: -0.3px; }
:where(.claude) .phone-status-icons {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--af-ink-black);
}
:where(.claude) .phone-island {
  position: absolute;
  top: 10px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 30px;
  background: #000;
  border-radius: 999px;
}

/* app bar */
:where(.claude) .phone-app-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 18px 12px;
  flex: 0 0 auto;
}
:where(.claude) .phone-app-id { display: flex; align-items: center; gap: 8px; }
:where(.claude) .phone-app-mark {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
}
:where(.claude) .phone-app-name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  color: var(--af-ink-black);
  letter-spacing: -0.01em;
}
:where(.claude) .phone-app-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--af-ink-black);
}
:where(.claude) .phone-app-bell {
  position: relative;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--af-gray-800);
}
:where(.claude) .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 */
:where(.claude) .phone-section {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 22px 0;
  flex: 0 0 auto;
}
:where(.claude) .phone-section-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--af-gray-700);
}
:where(.claude) .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) */
:where(.claude) .phone-stage-slot {
  flex: 0 0 auto;
  height: 312px;
  margin: 14px 18px 0;
}

/* ghost feed rows below the focused card */
:where(.claude) .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%);
}
:where(.claude) .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);
}
:where(.claude) .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;
}
:where(.claude) .phone-ghost-lines { flex: 1; display: flex; flex-direction: column; gap: 5px; }
:where(.claude) .phone-ghost-l1 { display: block; height: 10px; width: 60%; background: var(--af-gray-400); border-radius: 4px; }
:where(.claude) .phone-ghost-l2 { display: block; height: 8px;  width: 40%; background: var(--af-gray-300); border-radius: 4px; }
:where(.claude) .phone-ghost-amt {
  width: 60px; height: 16px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--af-gray-300), var(--af-gray-200));
}

/* tab bar */
:where(.claude) .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;
}
:where(.claude) .phone-tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  flex: 1 1 0;
  color: var(--af-gray-600);
}
:where(.claude) .phone-tab.is-on { color: var(--af-sapphire-sky); }
:where(.claude) .phone-tab-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
}

/* home indicator (sits over the screen's bottom edge) */
:where(.claude) .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 -------------------------------- */

:where(.claude) .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;
}
:where(.claude) .arc-guide {
  position: absolute;
  left: 0; right: 0; top: 8px;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.4;
  z-index: 0;
}
:where(.claude) .arc-stage {
  position: absolute;
  /* Anchored to the PHONE's top edge, not the stage's, so the cards and the
     phone share one reference. .arc-card is then offset by --card-inset alone
     (it positions from this box, not from .phone-stage). */
  top: var(--phone-top, 60px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  /* anchor: center top of the stage; cards translate from here */
}
:where(.claude) .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;
}
:where(.claude) .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) ------------------------- */

:where(.claude) .arc-card {
  position: absolute;
  /* Measured down from the phone box top — .arc-stage is anchored there.
     Aligns the focused card with the phone screen's stage slot. */
  top: var(--card-inset, 171px);
  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;
}
:where(.claude) .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 ------------------------------------ */

:where(.claude) .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 */
:where(.claude) .nc-top {
  display: flex; align-items: center; justify-content: space-between;
}
:where(.claude) .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;
}
:where(.claude) .nc-badge-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  display: inline-block;
}
/* status variants — only Funded (green) and Offered (blue) */
:where(.claude) .nc-badge--funded  { background: rgba(47,198,0,0.12);  border-color: rgba(47,198,0,0.32);  color: #0E8A3E; }
:where(.claude) .nc-badge--funded  .nc-badge-dot { background: #2FC600; }
:where(.claude) .nc-badge--offered { background: rgba(0,146,255,0.12); border-color: rgba(0,146,255,0.32); color: #016DE1; }
:where(.claude) .nc-badge--offered .nc-badge-dot { background: #0092FF; }
:where(.claude) .nc-time {
  font-size: 12px;
  font-weight: 600;
  color: #016DE1;
}

/* head: avatar + name + city */
:where(.claude) .nc-head {
  display: flex; align-items: center; gap: 12px;
}
:where(.claude) .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);
}
:where(.claude) .nc-id { display: flex; flex-direction: column; min-width: 0; }
:where(.claude) .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;
}
:where(.claude) .nc-city {
  font-size: 13px;
  font-weight: 500;
  color: var(--af-gray-700);
  margin-top: 3px;
}

/* project pill */
:where(.claude) .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);
}
:where(.claude) .nc-project-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  color: var(--af-gray-700);
}
:where(.claude) .nc-project-icon svg { stroke: currentColor; }
:where(.claude) .nc-project-label {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--af-gray-800);
  text-transform: none;
}

/* amount */
:where(.claude) .nc-amount {
  display: flex; flex-direction: row;
  align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 2px 0 0;
}
:where(.claude) .nc-amount-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--af-gray-700);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
:where(.claude) .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 */
:where(.claude) .nc-foot {
  display: flex; align-items: center; gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--af-gray-300);
  min-height: 30px;
}
:where(.claude) .nc-foot-icon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--af-gray-700);
}
:where(.claude) .nc-foot-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--af-gray-800);
}
:where(.claude) .nc-foot-text strong { color: var(--af-ink-black); font-weight: 700; }
:where(.claude) .nc-foot-text--right { margin-left: auto; }

/* "offers ready" stacked-bars footer */
:where(.claude) .nc-bars {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
}
:where(.claude) .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. */

:where(.claude) .nc--animated .nc-top,
:where(.claude) .nc--animated .nc-head,
:where(.claude) .nc--animated .nc-project,
:where(.claude) .nc--animated .nc-amount,
:where(.claude) .nc--animated .nc-foot {
  opacity: 0;
  animation: nc-rise 520ms cubic-bezier(.2,.7,.2,1) both;
}
:where(.claude) .nc--animated .nc-top     { animation-delay:  60ms; }
:where(.claude) .nc--animated .nc-head    { animation-delay: 180ms; }
:where(.claude) .nc--animated .nc-project { animation-delay: 320ms; }
:where(.claude) .nc--animated .nc-amount  { animation-delay: 480ms; }
:where(.claude) .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 */
:where(.claude) .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 */
:where(.claude) .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) -------------- */
:where(.claude) .hero .hero-body { padding-bottom: 6px; }
:where(.claude) .hero .hero-photos {
  padding: 0;
  margin-top: -8px;
}

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


/* ---- Borrower phone variant — pre-qualified headline above the rotating
   lender offer cards. */
:where(.claude) .phone-app-bar--borrower {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 18px 24px 24px;
  gap: 8px;
}
:where(.claude) .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); }
}
:where(.claude) .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;
}
:where(.claude) .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. */
:where(.claude) .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. */
:where(.claude) .phone--borrower .phone-stage-slot { height: 148px; }

/* Borrower phone shows more ghost rows (single-offer cards are short, so
   extra rows keep the screen from looking empty) — push the fade deep
   enough that three rows read clearly behind the cards. */
:where(.claude) .phone--borrower .phone-ghost-rows {
  gap: 9px;
  mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
}

/* 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. */
:where(.claude) .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). */
:where(.claude) .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 ------------------------------------------------- */

:where(.claude) .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. */
:where(.claude) .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;
}
:where(.claude) .lp-section--placeholder + .lp-section--placeholder {
  background: var(--af-white);
}
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .lp-placeholder-note {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--af-gray-700);
  max-width: 480px;
  margin: 0;
}

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

:where(.claude) .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;
}
:where(.claude) .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;
}

:where(.claude) .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 */
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .lp-tab-toggle button.is-on { color: var(--af-ink-black); }
:where(.claude) .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;
}
:where(.claude) .lp-tab-pill[data-pos="contractors"] { transform: translateX(0); left: 4px; }
:where(.claude) .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. */
:where(.claude) .lp-hero-overline {
  display: inline-block;
  position: relative;
  margin-bottom: 18px;
}
:where(.claude) .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;
}
:where(.claude) .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;
}

:where(.claude) .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;
}
:where(.claude) .lp-h1-row--1 { display: block; color: var(--af-bright-blue); margin-bottom: 4px; }
:where(.claude) .lp-h1-row--2 { display: block; color: var(--af-white); }
/* New token-aware spans (used by the responsive line-break version) */
:where(.claude) .lp-h1-blue  { color: var(--af-bright-blue); }
:where(.claude) .lp-h1-white { color: var(--af-white); }
:where(.claude) .lp-h1-mob-br  { display: none; }   /* breaks only on mobile */
:where(.claude) .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. */
:where(.claude) .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;
}
:where(.claude) .bo-hero .lp-hero-eyebrow { color: var(--af-sapphire-sky); }  /* dark text on the light borrower hero */

/* Mobile-only line break in the hero eyebrow so it rags as
   "Home Improvement Financing" / "for Contractors". Hidden on desktop. */
:where(.claude) .lp-eyebrow-mob-br { display: none; }
@media (max-width: 767px) {
  :where(.claude) .lp-eyebrow-mob-br { display: inline; }
}

/* Hand-painted lime stroke under "without the costs." — uses a PNG of the
   real brush mark so the texture and frayed ends read polished. */
:where(.claude) .lp-h1-paint {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
:where(.claude) .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. */
:where(.claude) .lp-h1 > .lp-h1-white {
  display: inline-block;
  animation: lp-h1-word-in 460ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}
:where(.claude) .lp-h1 > .lp-h1-paint { animation-delay: 140ms; }
@keyframes lp-h1-word-in {
  /* Transform-only — NO opacity. The headline is the mobile LCP element, so
     it must be painted (visible) at the first frame; an opacity:0 start would
     defer LCP until the fade completes. The subtle rise is purely positional. */
  from { transform: translateY(0.18em); }
  to   { transform: none; }
}

:where(.claude) .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) {
  :where(.claude) .lp-h1-paint-img,
  :where(.claude) .lp-h1 > .lp-h1-white,
  :where(.claude) .lp-sub {
    animation: none;
    clip-path: none;
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 600px) {
  :where(.claude) .lp-h1-mob-br  { display: block; }
  :where(.claude) .lp-h1-desk-br { display: none; }
}
:where(.claude) .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 */
:where(.claude) .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;
}
:where(.claude) .lp-sub strong { color: var(--af-white); font-weight: 700; }

/* CTAs */
:where(.claude) .lp-ctas {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 22px;
  flex-wrap: wrap; justify-content: center;
}
:where(.claude) .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;
}
:where(.claude) .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);
}
:where(.claude) .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);
}
:where(.claude) .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;
}
:where(.claude) .lp-cta--link:hover { color: var(--af-icy-blue); }

/* Trust */
:where(.claude) .lp-trust {
  display: flex; gap: 14px; align-items: stretch;
  flex-wrap: wrap; justify-content: center;
}
:where(.claude) .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;
}
:where(.claude) .lp-trust-pill .lp-trust-label { font-weight: 700; color: rgba(255,255,255,0.92); }
:where(.claude) .lp-trust-stars { display: inline-flex; gap: 2px; }
:where(.claude) .lp-trust-src { font-size: 12px; opacity: 0.85; }
:where(.claude) .lp-trust-pill--bbb { padding-left: 6px; }
:where(.claude) .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. */
:where(.claude) .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;
}
:where(.claude) .lp-trustbar a { text-decoration: none; color: inherit; }

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

/* Trustpilot / Google review items */
:where(.claude) .tb-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #C9D4DA;
  transition: opacity .18s ease;
}
:where(.claude) .tb-item:hover { opacity: 0.7; }
:where(.claude) .tb-copy { white-space: nowrap; }
:where(.claude) .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;
}
:where(.claude) .tb-brand { display: inline-flex; align-items: center; gap: 5px; }
:where(.claude) .tb-tp-star { display: block; color: #C9D4DA; }
:where(.claude) .tb-tp-name {
  font-weight: 700;
  color: #C9D4DA;
  letter-spacing: -0.01em;
}
:where(.claude) .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) {
  :where(.claude) .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. */
:where(.claude) .lp-trustbar--ink,
:where(.claude) .lp-trustbar--ink .tb-item,
:where(.claude) .lp-trustbar--ink .tb-tp-star,
:where(.claude) .lp-trustbar--ink .tb-tp-name,
:where(.claude) .lp-trustbar--ink .tb-google { color: #00273E; }
:where(.claude) .lp-trustbar--ink .tb-u { text-decoration-color: rgba(0,39,62,0.45); }
:where(.claude) .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. */

:where(.claude) .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;
}
:where(.claude) .lp-hero-stage-inner {
  position: absolute;
  top: 0; left: 0;
  width: 1440px;
  height: 960px;
  transform-origin: top left;
  transform: scale(calc(100cqw / 1440px));
}
:where(.claude) .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) {
  :where(.claude) .lp-hero-stage {
    aspect-ratio: auto;
    height: 460px;
  }
  :where(.claude) .lp-hero-stage-inner {
    left: calc(50% - 720px);
    transform-origin: top center;
    transform: scale(0.7);
  }
}

/* Entrance: hero rises into place on load. TRANSFORM-ONLY (no opacity) and
   pure-CSS (no JS gate) on purpose — the phone mockup is the desktop LCP
   candidate, so it must paint at the first frame and never wait on script
   execution or an opacity:0 reveal (both delay LCP; a transform does not).
   This also fixes the old "hero invisible until scroll" bug at its root,
   since visibility no longer depends on JS adding `.is-in`. */
:where(.claude) .lp-hero-stage {
  animation: lp-hero-rise 900ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
@keyframes lp-hero-rise {
  from { transform: translateY(40px); }
  to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  :where(.claude) .lp-hero-stage { animation: none; }
}

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

:where(.claude) .lp-section--lenders {
  background: var(--af-alice-blue);
  padding: 56px 56px;
}
:where(.claude) .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;
}
:where(.claude) .lp-lenders-row {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: nowrap;
}
:where(.claude) .lp-lender-cell {
  display: flex; align-items: center; justify-content: center;
  flex: 0 1 auto;
  min-width: 0;
}
:where(.claude) .lp-lender {
  height: 30px;
  width: auto;
  display: block;
  object-fit: contain;
  max-width: 100%;
}
:where(.claude) .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;
}
:where(.claude) .lp-lenders-more:hover { color: var(--af-link-blue); }

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

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

:where(.claude) .lp-section--trades {
  background: var(--af-white);
  padding: 88px 0 96px;       /* zero side padding — the track bleeds wide */
  overflow: hidden;
}
:where(.claude) .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. */
:where(.claude) .lp-overline--left {
  text-align: left;
  margin: 0 0 12px;
}
:where(.claude) .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;
}
:where(.claude) .trades-controls {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}
:where(.claude) .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;
}
:where(.claude) .trades-arrow:hover {
  background: var(--af-sapphire-sky);
  border-color: var(--af-sapphire-sky);
  color: var(--af-white);
  transform: translateY(-1px);
}
:where(.claude) .trades-arrow:active { transform: translateY(0); }
:where(.claude) .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. */
:where(.claude) .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%);
}
:where(.claude) .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;
}
:where(.claude) .trades-track::-webkit-scrollbar { display: none; }
:where(.claude) .trades-track.is-dragging { cursor: grabbing; }

:where(.claude) .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;
}
:where(.claude) .trade-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,39,62,0.18);
}
:where(.claude) .trade-card:focus-visible {
  outline: 3px solid var(--af-sapphire-sky);
  outline-offset: 3px;
}
:where(.claude) .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;
}
:where(.claude) .trade-card:hover .trade-card-img { transform: scale(1.06); }
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .trade-card:hover .trade-card-arrow {
  background: var(--af-white);
  color: var(--af-sapphire-sky);
  transform: rotate(0deg) scale(1.05);
}
:where(.claude) .trade-card-info {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
:where(.claude) .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;
}
:where(.claude) .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;
}

:where(.claude) .trades-foot {
  max-width: 1240px;
  margin: 36px auto 0;
  padding: 0 56px;
  display: flex;
  align-items: center;
  gap: 10px;
}
:where(.claude) .trades-foot-text {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--af-gray-700);
}
:where(.claude) .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;
}
:where(.claude) .trades-foot-link:hover { color: var(--af-link-blue); transform: translateX(2px); }

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

@media (max-width: 900px) {
  :where(.claude) .lp-section--trades { padding: 64px 0 72px; }
  :where(.claude) .trades-head { padding: 0 24px; margin-bottom: 28px; }
  :where(.claude) .trades-track { padding: 8px 24px; }
  :where(.claude) .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%);
  }
  :where(.claude) .trades-foot { padding: 0 24px; }
}
@media (max-width: 600px) {
  :where(.claude) .lp-section--trades { padding: 48px 0 56px; }
  :where(.claude) .trades-head { flex-direction: column; align-items: flex-start; gap: 18px; padding: 0 16px; }
  :where(.claude) .trades-track { padding: 8px 16px; gap: 14px; }
  :where(.claude) .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%);
  }
  :where(.claude) .trade-card { flex-basis: 240px; width: 240px; height: 320px; }
  :where(.claude) .trade-card-title { font-size: 19px; }
  :where(.claude) .trades-foot { padding: 0 16px; }
}

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

:where(.claude) .lp-section--comparison {
  background: var(--af-white);
  padding: 96px 24px 120px;
}
:where(.claude) .lp-comp-inner {
  max-width: 1240px;
  margin: 0 auto;
  text-align: center;
}
:where(.claude) .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;
}
:where(.claude) .lp-comp-h2 span { display: block; }
:where(.claude) .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;
}

:where(.claude) .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);
}
:where(.claude) .lp-comp-row {
  display: contents;
}
:where(.claude) .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);
}
:where(.claude) .lp-comp-row--head .lp-comp-cell {
  padding: 24px 12px 20px;
  border-bottom: none;
}
:where(.claude) .lp-comp-row:last-child .lp-comp-cell { border-bottom: none; }
:where(.claude) .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;
}
:where(.claude) .lp-comp-cell--acorn {
  background: var(--af-alice-blue);
}
:where(.claude) .lp-comp-row--head .lp-comp-cell--acorn {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}
:where(.claude) .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 */
:where(.claude) .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);
}
:where(.claude) .lp-comp-logo-text { letter-spacing: 1.5px; }
:where(.claude) .lp-comp-logo--type {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 1.5px;
}
:where(.claude) .lp-comp-logo-img {
  height: 28px;
  width: auto;
  display: block;
}
/* competitor name shown as plain bold text in the header row */
:where(.claude) .lp-comp-cell--name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--af-ink-black);
}

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

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

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

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

@media (max-width: 600px) {
  :where(.claude) .lp-comp-table { display: none; }
  :where(.claude) .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;
  }
  :where(.claude) .lp-comp-stack::-webkit-scrollbar { display: none; }
  :where(.claude) .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);
  }
  :where(.claude) .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);
  }
  :where(.claude) .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;
  }
  :where(.claude) .lp-comp-stack-card.is-acorn .lp-comp-stack-head {
    border-bottom-color: rgba(1,109,225,0.18);
  }
  :where(.claude) .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;
  }
  :where(.claude) .lp-comp-stack-list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  :where(.claude) .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);
  }
  :where(.claude) .lp-comp-stack-item.is-no { color: var(--af-gray-600); }
  :where(.claude) .lp-comp-stack-item svg { flex: 0 0 auto; margin-top: 1px; }
  /* matching the in-row icon sizing for the stack */
  :where(.claude) .lp-comp-stack-item svg { width: 18px; height: 18px; }

  /* tighten the section padding around the new stack */
  :where(.claude) .lp-section--comparison { padding: 48px 0 64px; }
  :where(.claude) .lp-comp-inner { padding: 0; }
  :where(.claude) .lp-comp-h2, :where(.claude) .lp-comp-sub { padding: 0 20px; }
  :where(.claude) .lp-comp-h2 { font-size: clamp(22px, 6.4vw, 40px); margin-bottom: 20px; }
  :where(.claude) .lp-comp-sub { font-size: 13px; line-height: 1.5; margin-bottom: 28px; }
  :where(.claude) .lp-comp-stack-head .lp-comp-logo-img { height: 32px; }
  /* competitor name (plain bold text) in the mobile stack header */
  :where(.claude) .lp-comp-stack-name {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: var(--af-ink-black);
  }
}

/* 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) {
  :where(.claude) .lp-comp-h2 { font-size: clamp(19px, 5.4vw, 40px); }
  :where(.claude) .lp-comp-h2 span { white-space: nowrap; }
}

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

:where(.claude) .lp-section--stats {
  background: var(--af-white);
  padding: 24px 56px 96px;
}
:where(.claude) .lp-stats-row {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
:where(.claude) .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;
}
:where(.claude) .lp-stat.is-in {
  opacity: 1;
  transform: translateY(0);
}
:where(.claude) .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;
}
:where(.claude) .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) {
  :where(.claude) .lp-stats-row { grid-template-columns: 1fr; gap: 16px; }
  :where(.claude) .lp-stat { min-height: 220px; padding: 44px 36px 32px; }
  :where(.claude) .lp-stat-label { margin-top: 36px; }
}
@media (max-width: 600px) {
  :where(.claude) .lp-section--stats { padding: 12px 16px 56px; }
}

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

:where(.claude) .lp-section--how {
  background: var(--af-white);
  padding: 96px 56px;
}
:where(.claude) .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 */
:where(.claude) .lp-how-overline {
  display: inline-block;
  position: relative;
  margin-bottom: 28px;
}
:where(.claude) .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;
}
:where(.claude) .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;
}

:where(.claude) .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;
}
:where(.claude) .lp-how-list { display: flex; flex-direction: column; }
:where(.claude) .lp-how-item {
  border-top: 1px solid var(--af-gray-300);
}
:where(.claude) .lp-how-item:last-child { border-bottom: 1px solid var(--af-gray-300); }
:where(.claude) .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);
}
:where(.claude) .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;
}
:where(.claude) .lp-how-label {
  flex: 1;
  font-size: 18px;
  font-weight: 700;
}
:where(.claude) .lp-how-chev {
  color: var(--af-ink-black);
  transition: transform 280ms ease;
  display: inline-flex;
}
:where(.claude) .lp-how-item.is-open .lp-how-chev { transform: rotate(180deg); }
:where(.claude) .lp-how-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 320ms ease;
}
:where(.claude) .lp-how-item.is-open .lp-how-body { max-height: 220px; }
:where(.claude) .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 ------------------------------ */

:where(.claude) .lp-how-right {
  display: flex;
  justify-content: center;
  align-items: stretch;
}
:where(.claude) .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. */
:where(.claude) .lp-how-mockup {
  display: none;
  width: 100%;
}
:where(.claude) .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); }
}
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .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;
}

:where(.claude) .lp-stepper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
:where(.claude) .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);
}
:where(.claude) .lp-step.is-done,
:where(.claude) .lp-step.is-active {
  background: var(--af-deep-space-blue);
  color: var(--af-white);
}

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

:where(.claude) .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);
}
:where(.claude) .lp-tooltip svg { color: var(--af-deep-space-blue); flex: 0 0 auto; }

:where(.claude) .lp-form-controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
:where(.claude) .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;
}

:where(.claude) .lp-field { position: relative; }
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .lp-select svg { color: var(--af-gray-700); }
:where(.claude) .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;
}
:where(.claude) .lp-form-next:hover { background: var(--af-ocean); }

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

:where(.claude) .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;
}
:where(.claude) .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 */
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .lp-mock-share-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
:where(.claude) .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;
}
:where(.claude) .lp-mock-share svg { color: var(--af-sapphire-sky); }

/* Offers */
:where(.claude) .lp-mock-offers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
:where(.claude) .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;
}
:where(.claude) .lp-mock-offer-lender { display: flex; align-items: center; gap: 10px; min-width: 0; }
:where(.claude) .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;
}
:where(.claude) .lp-mock-offer-name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  color: var(--af-ink-black);
}
:where(.claude) .lp-mock-offer-tag {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--af-gray-700);
}
:where(.claude) .lp-mock-offer-meta { text-align: right; }
:where(.claude) .lp-mock-offer-pmt {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  color: var(--af-ink-black);
}
:where(.claude) .lp-mock-offer-apr {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--af-gray-700);
}
:where(.claude) .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 */
:where(.claude) .lp-mock-paid-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  margin-bottom: 16px;
}
:where(.claude) .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;
}
:where(.claude) .lp-mock-paid-value {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  color: var(--af-ink-black);
}
:where(.claude) .lp-mock-paid-value--ok { color: var(--af-success); }
:where(.claude) .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. */
:where(.claude) .lp-how-body-mockup { display: none; }

@media (max-width: 900px) {
  :where(.claude) .lp-how-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  :where(.claude) .lp-section--how { padding: 56px 24px; }
  :where(.claude) .lp-how-h2 { margin-bottom: 32px; }
  :where(.claude) .lp-formcard { padding: 32px 24px; }
  /* hide the right column; show mockup inline within each open accordion */
  :where(.claude) .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. */
  :where(.claude) .lp-how-body-inner { padding: 0 4px 18px 4px; }
  :where(.claude) .lp-how-body-mockup {
    display: block;
    margin-top: 14px;
  }
  /* Override the max-height ceiling so the inline mockup gets full room. */
  :where(.claude) .lp-how-item.is-open .lp-how-body { max-height: 1200px; }
  :where(.claude) .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 */
  :where(.claude) .lp-mock-offer { gap: 8px; padding: 10px; }
  :where(.claude) .lp-mock-offer-mark { width: 28px; height: 28px; font-size: 12px; }
  :where(.claude) .lp-mock-offer-name { font-size: 13px; }
  :where(.claude) .lp-mock-offer-pmt { font-size: 13px; }
  :where(.claude) .lp-mock-offer-cta { padding: 7px 10px; font-size: 11px; }
}

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

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

:where(.claude) .lp-section--video {
  background: var(--af-white);
  padding: 24px 56px 96px;
}
:where(.claude) .lp-video-inner {
  max-width: 1240px;
  margin: 0 auto;
}
:where(.claude) .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);
}
:where(.claude) .lp-video-thumb {
  position: absolute; inset: 0;
  border: 0; padding: 0; margin: 0;
  cursor: pointer;
  background: transparent;
  width: 100%; height: 100%;
}
:where(.claude) .lp-video-thumb img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
:where(.claude) .lp-video-thumb:hover img { transform: scale(1.02); }
/* Centered blue play button overlay (decorative — the whole thumb is the button) */
:where(.claude) .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;
}
:where(.claude) .lp-video-play svg { margin-left: 4px; }
:where(.claude) .lp-video-thumb:hover .lp-video-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--af-link-blue);
}
@media (max-width: 767px) {
  :where(.claude) .lp-video-play { width: 56px; height: 56px; box-shadow: 0 10px 24px rgba(1,109,225,0.45); }
  :where(.claude) .lp-video-play svg { width: 24px; height: 24px; }
}
:where(.claude) .lp-video-iframe {
  width: 100%; height: 100%;
  border: 0;
  display: block;
}

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

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

:where(.claude) .lp-section--value {
  background: var(--af-white);
  padding: 96px 56px 120px;
}
:where(.claude) .lp-value-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 120px;
}
:where(.claude) .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;
}
:where(.claude) .lp-value-row.is-in {
  opacity: 1;
  transform: translateY(0);
}
/* alternate which side the image sits on */
:where(.claude) .lp-value-row--right .lp-value-img-wrap { order: 2; }
:where(.claude) .lp-value-row--right .lp-value-text { order: 1; }

:where(.claude) .lp-value-img-wrap {
  border-radius: 20px;
  overflow: visible;
}
:where(.claude) .lp-value-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
}
:where(.claude) .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;}
:where(.claude) .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) {
  :where(.claude) .lp-section--value { padding: 56px 24px 72px; }
  :where(.claude) .lp-value-inner { gap: 64px; }
  :where(.claude) .lp-value-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  :where(.claude) .lp-value-row--right .lp-value-img-wrap { order: 0; }
  :where(.claude) .lp-value-row--right .lp-value-text { order: 0; }
}

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

:where(.claude) .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) */
:where(.claude) .lp-test-overline {
  display: inline-block;
  position: relative;
  margin-bottom: 12px;
}
:where(.claude) .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;
}
:where(.claude) .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;
}

:where(.claude) .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;
}
:where(.claude) .lp-test-h2 span { color: var(--af-ink-black); }

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

/* slider: a horizontally-overflowing track translated by idx */
:where(.claude) .lp-test-slider {
  width: 100%;
  overflow: hidden;
  margin-bottom: 32px;
  /* allow touch swipe without interfering with vertical page scroll */
  touch-action: pan-y;
}
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .lp-test-card:not(.is-active) {
  opacity: 0.35;
  cursor: pointer;
}
:where(.claude) .lp-test-card:not(.is-active):hover {
  opacity: 0.55;
}
:where(.claude) .lp-test-card:not(.is-active):focus-visible {
  outline: 3px solid var(--af-sapphire-sky);
  outline-offset: 4px;
  opacity: 0.7;
}

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

:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .lp-test-author {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--af-ink-black);
}
:where(.claude) .lp-test-company {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--af-gray-700);
  margin-top: 2px;
}

:where(.claude) .lp-test-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0 24px;
}
:where(.claude) .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;
}
:where(.claude) .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 */
:where(.claude) .lp-test-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
:where(.claude) .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;
}
:where(.claude) .lp-test-arrow:hover,
:where(.claude) .lp-test-arrow:focus-visible {
  background: var(--af-sapphire-sky);
  border-color: var(--af-sapphire-sky);
  color: var(--af-white);
  outline: none;
}
:where(.claude) .lp-test-arrow.is-hidden { visibility: hidden; }

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

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

:where(.claude) .lp-section--final {
  background: var(--af-deep-space-blue);
  color: var(--af-white);
  padding: 120px 24px 120px;
  text-align: center;
}
:where(.claude) .lp-final-inner {
  max-width: 1200px;
  margin: 0 auto;
}
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .lp-final-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 44px;
}
:where(.claude) .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;
}
:where(.claude) .lp-final-ctas {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
/* re-use .lp-cta + .lp-cta--primary for "Sign up now" */

:where(.claude) .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;
}
:where(.claude) .lp-final-secondary:hover {
  background: #0a3f5f;
  transform: translateY(-1px);
}

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

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

:where(.claude) .lp-section--faqs {
  background: var(--af-white);
  padding: 96px 24px 120px;
}
:where(.claude) .lp-faq-inner {
  max-width: 980px;
  margin: 0 auto;
}
:where(.claude) .lp-faq-overline {
  display: inline-block;
  position: relative;
  margin: 0 auto 16px;
  left: 50%;
  transform: translateX(-50%);
}
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .lp-faq-list { display: flex; flex-direction: column; }
:where(.claude) .lp-faq-item {
  border-top: 1px solid var(--af-gray-300);
}
:where(.claude) .lp-faq-item:last-child { border-bottom: 1px solid var(--af-gray-300); }
:where(.claude) .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;
}
:where(.claude) .lp-faq-row:hover, :where(.claude) .lp-faq-row:focus { color: var(--af-sapphire-sky); background-color:transparent !important; }
:where(.claude) .lp-faq-q {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
}
:where(.claude) .lp-faq-chev {
  color: var(--af-ink-black);
  transition: transform 280ms ease;
  display: inline-flex;
}
:where(.claude) .lp-faq-item.is-open .lp-faq-chev { transform: rotate(180deg); }
:where(.claude) .lp-faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 320ms ease;
}
:where(.claude) .lp-faq-item.is-open .lp-faq-body { max-height: 320px; }
:where(.claude) .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) {
  :where(.claude) .lp-section--faqs { padding: 56px 16px 72px; }
  :where(.claude) .lp-faq-h2 { margin-bottom: 36px; }
  :where(.claude) .lp-faq-q { font-size: 15px; }
}

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

:where(.claude) .lp-section--articles {
  background: var(--af-white);
  padding: 96px 56px;
}
:where(.claude) .lp-art-inner {
  max-width: 1280px;
  margin: 0 auto;
}
:where(.claude) .lp-art-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 36px;
  gap: 24px;
}
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .lp-art-seeall:hover { color: var(--af-link-blue); }
:where(.claude) .lp-art-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
:where(.claude) .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;
}
:where(.claude) .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);
}
:where(.claude) .lp-art-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
:where(.claude) .lp-art-illus {
  display: block;
  width: 100%;
  height: 100%;
}
:where(.claude) .lp-art-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
:where(.claude) .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;
}
:where(.claude) .lp-art-date {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--af-gray-700);
}
:where(.claude) .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);
}
:where(.claude) .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;
}
:where(.claude) .lp-art-author {
  color: var(--af-sapphire-sky);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

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

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

:where(.claude) .lp-section--trending {
  background: var(--af-white);
  padding: 24px 56px 96px;
}
:where(.claude) .lp-trend-inner {
  max-width: 1280px;
  margin: 0 auto;
}
:where(.claude) .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;
}
:where(.claude) .lp-trend-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
:where(.claude) .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;
}
:where(.claude) .lp-trend-card:hover {
  background: var(--af-icy-blue);
  color: var(--af-link-blue);
  transform: translateY(-2px);
}

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

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

:where(.claude) .lp-section--seo {
  background: var(--af-white);
  padding: 24px 56px 96px;
}
:where(.claude) .lp-seo-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
:where(.claude) .lp-seo-card {
  background: var(--af-alice-blue);
  border-radius: 24px;
  padding: 36px 40px;
}
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .lp-seo-more {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms ease;
}
:where(.claude) .lp-seo-card.is-open .lp-seo-more {
  max-height: 600px;
}
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .lp-seo-toggle:hover { color: var(--af-link-blue); }
:where(.claude) .lp-seo-toggle svg { transition: transform 280ms ease; }
:where(.claude) .lp-seo-card.is-open .lp-seo-toggle svg { transform: rotate(180deg); }

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

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

:where(.claude) .lp-section--footer {
  background: var(--af-deep-space-blue);
  color: var(--af-white);
  padding: 64px 56px 56px;
  font-family: var(--font-sans);
}
:where(.claude) .lp-foot-inner {
  max-width: 1240px;
  margin: 0 auto;
}
:where(.claude) .lp-foot-logo {
  display: inline-block;
  text-decoration: none;
}
:where(.claude) .lp-foot-logo img {
  height: 40px;
  width: auto;
  display: block;
}
:where(.claude) .lp-foot-tagline {
  font-family: var(--font-sans);
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  margin: 16px 0 28px;
}
:where(.claude) .lp-foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-bottom: 28px;
}
:where(.claude) .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;
}
:where(.claude) .lp-foot-link:hover { color: var(--af-icy-blue); }
:where(.claude) .lp-foot-rule {
  height: 1px;
  background: rgba(255,255,255,0.10);
  margin: 0 0 24px;
}
:where(.claude) .lp-foot-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}
:where(.claude) .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;
}
:where(.claude) .lp-foot-inline-link {
  color: var(--af-bright-blue);
  text-decoration: none;
  font-weight: 600;
}
:where(.claude) .lp-foot-inline-link:hover { color: var(--af-icy-blue); }
:where(.claude) .lp-foot-legal {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .lp-foot-legal sup {
  font-size: 10px;
  vertical-align: super;
  margin-right: 1px;
  color: rgba(255,255,255,0.78);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Very narrow (≤360px): squeeze comparison table a hair more */
@media (max-width: 360px) {
  :where(.claude) .lp-comp-table { grid-template-columns: minmax(100px, 1.2fr) repeat(4, 1fr); }
  :where(.claude) .lp-comp-cell--label { font-size: 11px; }
  :where(.claude) .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. */
:where(.claude) .bo-overline {
  display: inline-block;
  position: relative;
  margin-bottom: 18px;
}
:where(.claude) .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;
}
:where(.claude) .bo-overline::after {
  content: "";
  position: absolute;
  left: -4px; right: -4px;
  bottom: -2px;
  height: 8px;
 /* background: var(--af-lime-bright);*/
  z-index: 0;
}

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

:where(.claude) .bo-section--categories {
  background: var(--af-white);
  padding: 96px 56px 72px;
}
:where(.claude) .bo-cat-inner {
  max-width: 1240px;
  margin: 0 auto;
}
:where(.claude) .bo-cat-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  margin-bottom: 40px;
}
:where(.claude) .bo-cat-head .bo-overline {
  grid-column: 1;
}
:where(.claude) .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);
}
:where(.claude) .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;
}
:where(.claude) .bo-cat-seeall:hover {
  color: var(--af-link-blue);
  transform: translateX(2px);
}
:where(.claude) .bo-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .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);
}
:where(.claude) .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);
}
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .bo-cat-icon-video.is-on {
  opacity: 1;
  transition: opacity 0s;
}
:where(.claude) .bo-cat-card:has(.bo-cat-icon-video.is-on) .bo-cat-icon-img {
  opacity: 0;
  transition: opacity 0s;
}
:where(.claude) .bo-cat-card:hover .bo-cat-icon {
  transform: translateY(-3px) scale(1.04);
}
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .bo-cat-card:hover .bo-cat-arrow {
  background: var(--af-sapphire-sky);
  color: var(--af-white);
  transform: translateX(4px);
}

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

:where(.claude) .bo-section--million {
  background: var(--af-white);
  padding: 24px 56px 96px;
}
:where(.claude) .bo-million-inner {
  max-width: 1240px;
  margin: 0 auto;
  text-align: center;
}
:where(.claude) .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;
}
:where(.claude) .bo-million-emph {
  position: relative;
  display: inline-block;
  color: var(--af-ink-black);
  white-space: nowrap;
}
:where(.claude) .bo-million-emph .lp-h1-paint-img {
  /* re-position the painted stroke under this dark-on-white callout */
  bottom: -0.14em;
}
:where(.claude) .bo-million-trustpilot {
  margin-top: 48px;
}

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

:where(.claude) .bo-section--estimator {
  background: var(--af-alice-blue);
  padding: 96px 56px;
  position: relative;
  overflow: hidden;
}
:where(.claude) .bo-estimator-inner {
  max-width: 1240px;
  margin: 0 auto;
  text-align: center;
}
:where(.claude) .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;
}
:where(.claude) .bo-estimator-widget {
  display: flex;
  justify-content: center;
  width: 100%;
}

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

:where(.claude) .bo-section--features {
  background: var(--af-alice-blue);
  padding: 96px 56px;
  position: relative;
  overflow: hidden;
}
:where(.claude) .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;
}
:where(.claude) .bo-feat-inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 96px;
}
:where(.claude) .bo-feat-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}
:where(.claude) .bo-feat-row--left .bo-feat-text { order: 2; }
:where(.claude) .bo-feat-row--left .bo-feat-art  { order: 1; }
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .bo-feat-art {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 280px;
}
:where(.claude) .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 ---------------------------------------------------- */

:where(.claude) .bo-section--rates {
  background: var(--af-white);
  padding: 96px 56px;
}
:where(.claude) .bo-rate-inner {
  max-width: 1240px;
  margin: 0 auto;
  text-align: center;
}
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .bo-rate-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 28px;
}
:where(.claude) .bo-rate-filter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
}
:where(.claude) .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);
}
:where(.claude) .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;
}
:where(.claude) .bo-rate-select:hover {
  border-color: var(--af-sapphire-sky);
}
:where(.claude) .bo-rate-select svg {
  margin-left: auto;
  color: var(--af-gray-700);
}
:where(.claude) .bo-rate-select select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
:where(.claude) .bo-rate-table {
  text-align: left;
  background: var(--af-white);
  border: 1px solid var(--af-gray-200);
  border-radius: 14px;
  overflow: hidden;
}
:where(.claude) .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);
}
:where(.claude) .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);
}
:where(.claude) .bo-rate-th--cta { min-width: 110px; }
:where(.claude) .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;
}
:where(.claude) .bo-rate-row:last-child { border-bottom: 0; }
:where(.claude) .bo-rate-row:hover { background: var(--af-alice-blue); }
:where(.claude) .bo-rate-cell { min-width: 0; }
:where(.claude) .bo-rate-cell--lender {
  display: flex;
  align-items: center;
  gap: 14px;
}
:where(.claude) .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;
}
:where(.claude) .bo-rate-cell-name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--af-ink-black);
}
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .bo-rate-cell--cta { text-align: right; min-width: 110px; }
:where(.claude) .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;
}
:where(.claude) .bo-rate-more:hover {
  background: var(--af-alice-blue);
  color: var(--af-link-blue);
  transform: translateX(2px);
}

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

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


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

:where(.claude) .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. */
:where(.claude) .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 */
:where(.claude) .bo-hero .lp-h1-white { color: var(--af-ink-black); }
:where(.claude) .bo-hero .lp-sub      { color: rgba(3, 23, 26, 0.72); }
:where(.claude) .bo-hero .lp-sub strong { color: var(--af-ink-black); }

/* Audience tab toggle — dark-on-light treatment */
:where(.claude) .bo-hero .lp-tab-toggle {
  background: rgba(3, 23, 26, 0.06);
  border-color: rgba(3, 23, 26, 0.10);
}
:where(.claude) .bo-hero .lp-tab-toggle button {
  color: rgba(3, 23, 26, 0.55);
}
:where(.claude) .bo-hero .lp-tab-toggle button.is-on {
  color: var(--af-ink-black);
}
:where(.claude) .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. */
:where(.claude) .bo-hero .lp-cta--link {
  color: var(--af-sapphire-sky);
}
:where(.claude) .bo-hero .lp-cta--link:hover {
  color: var(--af-link-blue);
}

/* Trust pills — translucent white capsules with dark ink content. */
:where(.claude) .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);
}
:where(.claude) .bo-hero .lp-trust-pill .lp-trust-label {
  color: var(--af-ink-black);
}
:where(.claude) .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. */
:where(.claude) .bo-hero .lp-trust-stars svg stop:nth-of-type(1) {
  stop-color: var(--af-warning);   /* #FFAC0A */
  stop-opacity: 1;
}
:where(.claude) .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. */
:where(.claude) .bo-hero .lp-trust-pill--bbb {
  background: rgba(255, 255, 255, 0.75);
}
:where(.claude) .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. */
:where(.claude) .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. */
:where(.claude) .bo-h1-tail {
  display: inline;
}
@media (min-width: 1100px) {
  :where(.claude) .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. */
:where(.claude) .bo-h1-measured {
  position: relative;
}
:where(.claude) .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. */
:where(.claude) .lender-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
/* Faint dashed arc behind the cards reinforces the radial motion. */
:where(.claude) .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. */
:where(.claude) .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;
}
:where(.claude) .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. */
:where(.claude) .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);
}
:where(.claude) .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. */
:where(.claude) .lc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
:where(.claude) .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);
}
:where(.claude) .lc-logo img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}
:where(.claude) .lc-logo img.lc-logo-icon {
  width: 56%;
  height: 56%;
}
:where(.claude) .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;
}
/* Full lender wordmark in the card header — one unified header slot: a
   fixed-height row that vertically centers every logo so headers line up
   card-to-card. Single-line wordmarks cap at 26px; denser stacked / two-line
   marks (Universal, Reprise, OneMain) get a taller cap so their text reads at
   a comparable size within the same slot. object-position keeps a shared left edge. */
:where(.claude) .lc-id {
  display: flex; align-items: center;
  height: 38px;
  min-width: 0;
}
:where(.claude) .lc-logo-full {
  max-height: 26px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  object-position: left center;
  display: block;
}
:where(.claude) .lc-logo-full[alt="Reprise Financial"],
:where(.claude) .lc-logo-full[alt="OneMain Financial"] {
  max-height: 34px;
  max-width: 116px;
}
:where(.claude) .lc-logo-full[alt="Universal Credit"] {
  max-height: 38px;
  max-width: 72px;
}
:where(.claude) .lc-logo-full[alt="Aven"] {
  max-height: 24px;
  max-width: 78px;
}
/* Text wordmark fallback when no logo asset exists (matches lc-logo-full sizing). */
:where(.claude) .lc-logo-word {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 26px;
  letter-spacing: -0.01em;
  color: var(--af-ink-black);
}
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .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 */
:where(.claude) .lc-offers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
:where(.claude) .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;
}
:where(.claude) .lc-offer--best {
  background: var(--af-alice-blue);
  border-color: rgba(1, 109, 225, 0.16);
}
:where(.claude) .lc-offer-stat {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
:where(.claude) .lc-offer-figure {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--af-ink-black);
  line-height: 1.05;
  white-space: nowrap;
}
:where(.claude) .lc-offer-suf {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--af-gray-700);
  margin-left: 1px;
}
:where(.claude) .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;
}
:where(.claude) .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. */
:where(.claude) .lc-card--multi .lc-offer--best .lc-offer-figure { font-size: 16px; }

/* Reduced motion: snap focus instead of animating through the stack. */
@media (prefers-reduced-motion: reduce) {
  :where(.claude) .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. */
:where(.claude) .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;
}
:where(.claude) .co-eyebrow::after {
  content: "";
  position: absolute;
  left: -4px; right: -4px;
  bottom: -2px;
  height: 8px;
  /* background: var(--af-lime-bright);*/
  z-index: -1;
}
:where(.claude) .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). */
:where(.claude) h1.co-eyebrow { margin-top: 0; font-size: 14px; }

:where(.claude) .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;
}

:where(.claude) .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;
}

:where(.claude) .co-section {
  position: relative;
  width: 100%;
}

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

/* ----- breadcrumb ---------------------------------------------------- */
:where(.claude) .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;
}
:where(.claude) .co-crumb a { color: var(--af-bright-blue); text-decoration: none; }
:where(.claude) .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. */
:where(.claude) .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. */
:where(.claude) .co-section--hero .co-eyebrow { color: var(--af-icy-blue); }
:where(.claude) .co-section--hero .co-eyebrow::after { display: none; }
:where(.claude) .co-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .co-hero-sub strong { font-weight: 700; color: var(--af-white); }

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

:where(.claude) .co-hero-ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 28px;
}
:where(.claude) .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;
}
:where(.claude) .co-hero-link svg { flex: none; color: var(--af-bright-blue); }
:where(.claude) .co-hero-link:hover { gap: 12px; opacity: 0.85; }

:where(.claude) .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;
}
:where(.claude) .co-hero-cta:hover { background: var(--af-link-blue); transform: translateY(-1px); }

:where(.claude) .co-hero-image-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
:where(.claude) .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);
}
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .co-hero-badge-ico {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--af-lime-pale);
  display: flex; align-items: center; justify-content: center;
}
:where(.claude) .co-hero-badge-text {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.3;
  color: var(--af-ink-black);
}
:where(.claude) .co-hero-badge-text strong { display: block; font-weight: 700; }

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

/* ===============  SECTION 3 — TWO-COLUMN ADVANTAGE  =============== */
:where(.claude) .co-section--advantage { padding: 96px 0; background: var(--af-white); }
:where(.claude) .co-advantage-head { text-align: center; margin-bottom: 56px; }
:where(.claude) .co-advantage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
:where(.claude) .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);
}
:where(.claude) .co-advantage-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 20px;
  color: var(--af-ink-black);
  margin: 0 0 16px;
}
:where(.claude) .co-advantage-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
:where(.claude) .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;
}
:where(.claude) .co-advantage-list svg { flex: none; color: var(--af-sapphire-sky); margin-top: 3px; }

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

/* ===============  SECTION 3b — FINANCING BY TRADE (scroller)  =============== */
:where(.claude) .co-section--trades { padding: 88px 0 96px; background: var(--af-white); overflow: hidden; }
:where(.claude) .co-trades-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; margin-bottom: 36px;
}
:where(.claude) .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;
}
:where(.claude) .co-trades-nav { display: flex; gap: 10px; flex: 0 0 auto; }
:where(.claude) .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;
  padding: 10px;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, opacity 140ms ease;
}
:where(.claude) .co-trades-arrow:hover {
  background: var(--af-sapphire-sky); border-color: var(--af-sapphire-sky); color: var(--af-white);
}
:where(.claude) .co-trades-arrow:disabled { opacity: 0.35; cursor: default; }
:where(.claude) .co-trades-arrow:focus-visible { outline: 2px solid var(--af-sapphire-sky); outline-offset: 2px; }

:where(.claude) .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));
}
:where(.claude) .co-trades-scroller::-webkit-scrollbar { display: none; }
:where(.claude) .co-trades-scroller.is-dragging { cursor: grabbing; }

:where(.claude) .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;
}
:where(.claude) .co-trade-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,39,62,0.18); }
:where(.claude) .co-trade-card:focus-visible { outline: 3px solid var(--af-sapphire-sky); outline-offset: 3px; }
:where(.claude) .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);
}
:where(.claude) .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%);
}
:where(.claude) .co-trade-card:hover .co-trade-card-img { transform: scale(1.06); }
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .co-trade-card:hover .co-trade-card-arrow { background: var(--af-white); color: var(--af-sapphire-sky); }

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

/* ===============  SECTION 4 — QUICK GUIDE  =============== */
:where(.claude) .co-section--guide {
  background: var(--af-alice-blue);
  padding: 120px 0;
}
:where(.claude) .co-guide-head { text-align: center; margin-bottom: 48px; }
:where(.claude) .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; }
:where(.claude) .co-guide { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: start; }

:where(.claude) .co-guide-steps { display: flex; flex-direction: column; gap: 0; }
:where(.claude) .co-guide-item {
  border-bottom: 1px solid var(--af-gray-300);
}
:where(.claude) .co-guide-item:last-child { border-bottom: none; }
:where(.claude) .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);
}
:where(.claude) .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;
}
:where(.claude) .co-guide-label {
  font-weight: 700;
  font-size: 18px;
  flex: 1;
}
:where(.claude) .co-guide-chev {
  color: var(--af-sapphire-sky);
  transition: transform var(--duration-fast, 140ms) ease;
}
:where(.claude) .co-guide-item.is-open .co-guide-chev { transform: rotate(180deg); }
:where(.claude) .co-guide-body {
  max-height: 0; overflow: hidden;
  transition: max-height var(--duration-default, 220ms) ease;
}
:where(.claude) .co-guide-item.is-open .co-guide-body { max-height: 260px; }
:where(.claude) .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 */
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .co-guide-mock-stepper { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; position: relative; }
:where(.claude) .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;
}
:where(.claude) .co-guide-mock-dot.is-done { background: var(--af-deep-space-blue); color: var(--af-white); }
:where(.claude) .co-guide-mock-dot.is-active { background: var(--af-deep-space-blue); color: var(--af-white); }
:where(.claude) .co-guide-mock-bar { height: 8px; border-radius: 4px; background: var(--af-gray-200); margin-bottom: 24px; position: relative; overflow: hidden; }
:where(.claude) .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; }

:where(.claude) .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;
}
:where(.claude) .co-guide-mock-field { margin-bottom: 14px; position: relative; }
:where(.claude) .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;
}
:where(.claude) .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);
}
:where(.claude) .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) {
  :where(.claude) .co-section--guide { padding: 72px 0; }
  :where(.claude) .co-guide { grid-template-columns: 1fr; gap: 32px; }
  :where(.claude) .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.
*/

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

/* Soft blurred background blobs */
:where(.claude) .co-journey-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
:where(.claude) .co-journey-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
}
/* Mobile: a large filter: blur() is an expensive composited layer that mobile
   GPUs re-rasterize and can drop mid-scroll (same root cause as a sticky
   backdrop-filter), contributing to content flashing blank. These blobs are
   purely decorative, so we drop them entirely on phones. */
@media (max-width: 767px) {
  :where(.claude) .co-journey-blob { display: none; }
}
:where(.claude) .co-journey-blob--1 {
  width: 460px; height: 460px;
  top: 6%; left: -140px;
  background: rgba(183, 231, 255, 0.9);
}
:where(.claude) .co-journey-blob--2 {
  width: 360px; height: 360px;
  top: 48%; right: -120px;
  background: rgba(1, 109, 225, 0.16);
}
:where(.claude) .co-journey-blob--3 {
  width: 400px; height: 400px;
  bottom: 6%; left: 38%;
  background: rgba(1, 109, 225, 0.10);
}

:where(.claude) .co-section--journey .co-section-inner { position: relative; z-index: 1; }
:where(.claude) .co-section--journey .co-eyebrow { color: var(--af-ink-black); }
:where(.claude) .co-section--journey .co-eyebrow::after { /*background: var(--af-icy-blue);*/ }

/* Shared head */
:where(.claude) .co-journey-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 64px;
}
:where(.claude) .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)
   ============================================================= */
:where(.claude) .co-journey-desktop { display: none; }
:where(.claude) .co-journey-mobile  { display: block; }

@media (min-width: 1000px) {
  :where(.claude) .co-section--journey { padding: 0; }
  :where(.claude) .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;
  }
  :where(.claude) .co-journey-mobile { display: none; }
}

:where(.claude) .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;
}

:where(.claude) .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;
}

:where(.claude) .co-journey-head--inline {
  text-align: center;
  margin: 0;
  max-width: 720px;
  flex: 0 0 auto;
}
:where(.claude) .co-journey-head--inline .co-h2 {
  margin: 0 0 10px;
  font-size: clamp(32px, 3.4vw, 44px);
}
:where(.claude) .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. */
:where(.claude) .co-circle-wrap {
  position: relative;
  width: min(880px, calc(100vh - 220px), calc(100vw - 320px));
  aspect-ratio: 1;
  margin: 0 auto;
  flex: 0 0 auto;
}
:where(.claude) .co-circle-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

:where(.claude) .co-circle-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
:where(.claude) .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;
}
:where(.claude) .co-circle-label.is-reached { color: var(--af-ink-black); }
:where(.claude) .co-circle-label.is-active  { color: var(--af-sapphire-sky); }

:where(.claude) .co-circle-label--right {
  transform: translate(20px, -50%);
  text-align: left;
}
:where(.claude) .co-circle-label--left {
  transform: translate(calc(-100% - 20px), -50%);
  text-align: right;
}
:where(.claude) .co-circle-label--top {
  transform: translate(-50%, calc(-100% - 18px));
  text-align: center;
}
:where(.claude) .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. */
:where(.claude) .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%); }
}
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .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) {
  :where(.claude) .co-journey-pinned { padding: 24px 40px; gap: 18px; }
  :where(.claude) .co-journey-head--inline .co-h2 { font-size: 28px; margin-bottom: 6px; }
  :where(.claude) .co-journey-head--inline .co-journey-sub { font-size: 14px; }
  :where(.claude) .co-circle-center { width: 60%; max-width: 240px; }
  :where(.claude) .co-circle-center-title { font-size: 19px; }
  :where(.claude) .co-circle-center-copy { font-size: 12.5px; }
  :where(.claude) .co-circle-center-icon { width: 48px; height: 48px; margin-bottom: 12px; }
  :where(.claude) .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) {
  :where(.claude) .co-journey-pinned { padding: 28px 28px; gap: 20px; }
  :where(.claude) .co-circle-label { font-size: 13px; max-width: 130px; }
}

/* ---- Celebratory final state (progress ≈ 1) ---- */
:where(.claude) .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));
}
:where(.claude) .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;    }
}
:where(.claude) .co-circle-center--celebrate .co-circle-center-title {
  font-size: 26px;
}
:where(.claude) .co-circle-center--celebrate .co-circle-center-copy {
  font-size: 14.5px;
}

/* =============================================================
   MOBILE — vertical trail (<1000px)
   ============================================================= */
:where(.claude) .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. */
:where(.claude) .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);
}
/* Mobile: a sticky element with a live backdrop-filter forces the browser to
   re-sample + re-blur everything behind it on every scroll frame. Mobile GPUs
   drop that layer intermittently, which made page content flash blank while
   scrolling. Drop the blur and use a solid background (visually near-identical
   — the base was already 94% opaque) so nothing is re-composited per frame. */
@media (max-width: 767px) {
  :where(.claude) .co-journey-progress {
    background: var(--af-white);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
:where(.claude) .co-journey-progress-bar {
  width: 60px;
  height: 4px;
  background: rgba(1, 109, 225, 0.18);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  flex: none;
}
:where(.claude) .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. */
}
:where(.claude) .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;
}

:where(.claude) .co-journey-trail {
  position: relative;
  padding: 24px 0 40px;
}
:where(.claude) .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;
}
:where(.claude) .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. */
}

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

:where(.claude) .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 */
}
:where(.claude) .co-journey-node-num { position: relative; z-index: 2; }
:where(.claude) .co-journey-node-pulse {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}
:where(.claude) .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);
}
:where(.claude) .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; }
}

:where(.claude) .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;
}
:where(.claude) .co-journey-step.is-revealed .co-journey-card {
  opacity: 1;
  transform: translateX(0);
}

:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .co-journey-card-copy {
  font-size: 15px;
  color: var(--af-gray-800);
  line-height: 1.55;
  margin: 0;
}

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

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

/* ===============  SECTION 5 — QUOTE  =============== */
:where(.claude) .co-section--quote { padding: 96px 0; background: var(--af-white); }
:where(.claude) .co-quote {
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}
:where(.claude) .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;
}
:where(.claude) .co-quote-logo span { color: var(--af-warning); }
:where(.claude) .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;
}
:where(.claude) .co-quote-author { font-family: var(--font-sans); font-weight: 700; font-size: 16px; color: var(--af-ink-black); }
:where(.claude) .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  =============== */
:where(.claude) .co-section--imgtext { padding: 56px 0; background: var(--af-white); }
:where(.claude) .co-imgtext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
:where(.claude) .co-imgtext--reverse .co-imgtext-img { order: 2; }

:where(.claude) .co-imgtext-img {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  background-color: var(--af-gray-200);
}
:where(.claude) .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);
}
:where(.claude) .co-imgtext-img--label svg { color: var(--af-sapphire-sky); flex: none; }

:where(.claude) .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);
}
:where(.claude) .co-imgtext-img--card .lbl { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--af-gray-700); margin-bottom: 6px; }
:where(.claude) .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; }
:where(.claude) .co-imgtext-img--card .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
:where(.claude) .co-imgtext-img--card .row .k { font-size: 10px; color: var(--af-gray-700); }
:where(.claude) .co-imgtext-img--card .row .v { font-size: 20px; font-weight: 700; color: var(--af-ink-black); }
:where(.claude) .co-imgtext-img--card .v-sub { font-size: 10px; color: var(--af-gray-700); }
:where(.claude) .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; }

:where(.claude) .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;
}
:where(.claude) .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) {
  :where(.claude) .co-imgtext { grid-template-columns: 1fr; gap: 32px; }
  :where(.claude) .co-imgtext--reverse .co-imgtext-img { order: 0; }
  :where(.claude) .co-imgtext-img--card { left: 16px; }
  :where(.claude) .co-imgtext-img--label { right: 16px; }
}

/* ===============  SECTION 9 — COMPARISON TABLE  =============== */
:where(.claude) .co-section--compare { padding: 96px 0; background: var(--af-white); }
:where(.claude) .co-compare-head { text-align: center; margin-bottom: 56px; }
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .co-compare-cell:nth-child(4n) { border-right: none; }
:where(.claude) .co-compare-table > div:nth-last-child(-n+4) { border-bottom: none; }
:where(.claude) .co-compare-cell--head { padding: 28px 20px; }
:where(.claude) .co-compare-cell--logo { justify-content: center; }
:where(.claude) .co-compare-cell--logo img { height: 32px; width: auto; }
:where(.claude) .co-compare-cell--logo .fb { font-family: var(--font-sans); font-weight: 700; font-size: 16px; color: var(--af-gray-700); }
:where(.claude) .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); }
:where(.claude) .co-compare-cell--acorn.co-compare-cell--head { padding-top: 32px; }
:where(.claude) .co-compare-cell--label { background: var(--af-gray-100); }
:where(.claude) .co-compare-cell--label .l-up { font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--af-ink-black); }
:where(.claude) .co-compare-cell--label .l-sub { font-weight: 400; font-size: 13px; color: var(--af-gray-700); margin-top: 4px; line-height: 1.4; }
:where(.claude) .co-compare-cell--center { justify-content: center; }

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

/* ===============  SECTION 10 — PORTAL  =============== */
:where(.claude) .co-section--portal {
  background: var(--af-alice-blue);
  padding: 96px 0;
}
:where(.claude) .co-portal { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
:where(.claude) .co-portal-img {
  position: relative;
  aspect-ratio: 5 / 4;
  background-size: cover; background-position: center;
  background-color: var(--af-gray-200);
  border-radius: 20px;
}
:where(.claude) .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);
}
:where(.claude) .co-portal-notif--1 { top: 12%; }
:where(.claude) .co-portal-notif--2 { top: 36%; right: -20px; }
:where(.claude) .co-portal-notif svg { color: var(--af-bright-blue); flex: none; }

:where(.claude) .co-portal-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
:where(.claude) .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;
}
:where(.claude) .co-portal-list svg { flex: none; color: var(--af-sapphire-sky); margin-top: 4px; }

@media (max-width: 900px) {
  :where(.claude) .co-portal { grid-template-columns: 1fr; gap: 40px; }
  :where(.claude) .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. */
:where(.claude) .co-section--stats {
  padding: 0 0 96px;
  background: var(--af-alice-blue);
}
:where(.claude) .co-stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .co-stat-label {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--af-gray-800);
}
@media (max-width: 600px) { :where(.claude) .co-stat-row { grid-template-columns: 1fr; } :where(.claude) .co-stat-card { padding: 28px; } }

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

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

/* ===============  SECTION 13 — COMPARE RATES  =============== */
:where(.claude) .co-section--rates {
  background: var(--af-alice-blue);
  padding: 96px 0;
}
:where(.claude) .co-rates-head { text-align: center; margin-bottom: 40px; }
:where(.claude) .co-rates-widget {
  background: var(--af-white);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 16px 40px rgba(0,39,62,0.08);
}
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .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);
}
:where(.claude) .co-rates-field .input .pre { color: var(--af-gray-700); }
:where(.claude) .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;
}
:where(.claude) .co-rates-row-list { display: flex; flex-direction: column; gap: 14px; }
:where(.claude) .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%);
}
:where(.claude) .co-rate-row-lender { display: flex; flex-direction: column; gap: 6px; }
:where(.claude) .co-rate-row-lender img { height: 28px; width: auto; max-width: 140px; object-fit: contain; align-self: flex-start; }
:where(.claude) .co-rate-row-lender .fb { font-family: var(--font-sans); font-weight: 700; font-size: 18px; color: var(--af-ink-black); }
:where(.claude) .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);
}
:where(.claude) .co-rate-row-col { text-align: center; }
:where(.claude) .co-rate-row-val { font-family: var(--font-sans); font-weight: 700; font-size: clamp(18px, 1.8vw, 22px); color: var(--af-ink-black); }
:where(.claude) .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) {
  :where(.claude) .co-section--rates { padding: 64px 0; }
  :where(.claude) .co-rates-controls { grid-template-columns: 1fr; gap: 16px; }
  :where(.claude) .co-rate-row { grid-template-columns: 1fr; gap: 12px; text-align: left; }
  :where(.claude) .co-rate-row-col { text-align: left; }
}

/* ===============  SECTION 15 — CONTACT FORM  =============== */
:where(.claude) .co-section--contact { padding: 96px 0; background: var(--af-white); }
:where(.claude) .co-contact-head { text-align: center; margin-bottom: 48px; }
:where(.claude) .co-contact-form {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
:where(.claude) .co-contact-field label {
  display: block;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--af-gray-800);
  margin-bottom: 6px;
}
:where(.claude) .co-contact-field label .req { color: var(--af-error); }
:where(.claude) .co-contact-field input, :where(.claude) .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;
}
:where(.claude) .co-contact-field input:focus, :where(.claude) .co-contact-field textarea:focus { border-color: var(--af-sapphire-sky); }
:where(.claude) .co-contact-field textarea { resize: vertical; min-height: 80px; }
:where(.claude) .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. */
:where(.claude) .co-section--final {
  padding: 120px 0;
  background: var(--af-deep-space-blue);
  text-align: center;
}
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .co-final-sub strong { font-weight: 700; color: var(--af-white); }
:where(.claude) .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;
}
:where(.claude) .co-final-cta:hover { background: var(--af-link-blue); }

/* ===============  small overrides for shared FAQ + Articles when in this page  =============== */
:where(.claude) .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`. */
:where(.claude) .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);
}
:where(.claude) .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;
}
:where(.claude) .af-photo-slot-label {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.35;
  max-width: 80%;
}
:where(.claude) .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. */
:where(.claude) .co-roi-banner-section { padding: 8px 0 24px; }
:where(.claude) .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;
}
:where(.claude) .co-roi-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 52px rgba(1, 109, 225, 0.26);
}
:where(.claude) .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;
}
:where(.claude) .co-roi-banner-text { flex: 1 1 auto; min-width: 0; }
:where(.claude) .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;
}
:where(.claude) .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);
}
:where(.claude) .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;
}
:where(.claude) .co-roi-banner:hover .co-roi-banner-cta { gap: 12px; }

@media (max-width: 767px) {
  :where(.claude) .co-roi-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 24px;
  }
  :where(.claude) .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.
   ============================================================ */

:where(.claude) h1, :where(.claude) h2, :where(.claude) h3, :where(.claude) h4, :where(.claude) h5,
:where(.claude) .co-h2,
:where(.claude) .co-hero-h1,
:where(.claude) .co-final-h2,
:where(.claude) .co-imgtext-title,
:where(.claude) .lp-h1,
:where(.claude) .lp-comp-h2,
:where(.claude) .lp-how-h2,
:where(.claude) .lp-test-h2,
:where(.claude) .lp-final-h2,
:where(.claude) .lp-faq-h2,
:where(.claude) .lp-art-h2,
:where(.claude) .lp-trend-h2,
:where(.claude) .lp-seo-h3,
:where(.claude) .lp-value-title,
:where(.claude) .lp-mock-title,
:where(.claude) .lp-placeholder-title,
:where(.claude) .bo-cat-h2,
:where(.claude) .bo-million-h2,
:where(.claude) .bo-feat-h3,
:where(.claude) .bo-rate-h2,
:where(.claude) .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.
   ============================================================ */
:where(.claude) .app-banner-section {
  background: var(--af-white);
  padding: 24px 56px 96px;
}
:where(.claude) .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 */
:where(.claude) .app-banner-cover {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
}
:where(.claude) .app-banner-text {
  position: relative;
  z-index: 2;
  max-width: 580px;
}
:where(.claude) .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;
}
:where(.claude) .app-banner-eyebrow svg { width: 15px; height: 15px; display: block; }
:where(.claude) .app-banner-eyebrow span { white-space: nowrap; }
:where(.claude) .app-banner-eyebrow .dot { width: 4px; height: 4px; border-radius: 999px; background: currentColor; opacity: 0.5; }
:where(.claude) .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;
}
:where(.claude) .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 */
:where(.claude) .app-banner-badges { display: flex; gap: 12px; flex-wrap: wrap; }
:where(.claude) .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);
}
:where(.claude) .app-store-badge:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.28); }
:where(.claude) .app-store-badge .badge-icon { width: 26px; height: 26px; flex: none; }
:where(.claude) .app-store-badge .badge-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
:where(.claude) .app-store-badge .badge-cap { font-size: 10px; font-weight: 500; color: var(--af-gray-800); }
:where(.claude) .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) */
:where(.claude) .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);
}
:where(.claude) .app-banner-cta svg { width: 18px; height: 18px; transition: transform var(--duration-default) var(--ease-standard); }
/* Visual — app icon squircle floating over glow rings */
:where(.claude) .app-banner-visual {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}
:where(.claude) .app-banner-ring {
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(183,231,255,0.18);
}
:where(.claude) .app-banner-ring--1 { inset: 0; }
:where(.claude) .app-banner-ring--2 { inset: 34px; border-color: rgba(183,231,255,0.26); }
:where(.claude) .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);
}
:where(.claude) .app-banner-appicon img { width: 62%; height: 62%; object-fit: contain; }

@media (min-width: 768px) {
  :where(.claude) .app-banner { cursor: pointer; }
  :where(.claude) .app-banner:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(0,39,62,0.32); }
  :where(.claude) .app-banner:hover .app-banner-cta svg { transform: translateX(5px); }
  /* Desktop links to the app-download page, so the store badges are hidden. */
  :where(.claude) .app-banner-badges { display: none; }
}
@media (max-width: 767px) {
  :where(.claude) .app-banner-section { padding: 16px 16px 64px; }
  :where(.claude) .app-banner {
    flex-direction: column;
    text-align: center;
    gap: 28px;
    padding: 40px 26px 44px;
    border-radius: 20px;
  }
  :where(.claude) .app-banner-cover { display: none; }   /* badges are the links on mobile */
  :where(.claude) .app-banner-cta { display: none; }
  :where(.claude) .app-banner-eyebrow { justify-content: center; flex-direction: column; gap: 6px; }
  :where(.claude) .app-banner-eyebrow .dot { display: none; }
  :where(.claude) .app-banner-text { max-width: none; }
  :where(.claude) .app-banner-body { margin-left: auto; margin-right: auto; }
  :where(.claude) .app-banner-badges { justify-content: center; }
  :where(.claude) .app-banner-visual { order: -1; width: 170px; height: 170px; }
  :where(.claude) .app-banner-ring--2 { inset: 26px; }
  :where(.claude) .app-banner-appicon { width: 124px; height: 124px; border-radius: 28px; }
  :where(.claude) .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) */
:where(.claude) .co-hero-image--contractors    { background-image: url('/wp-content/uploads/assets/co-hero-image.webp'); }
:where(.claude) .co-advantage-img--customers   { background-image: url('/wp-content/uploads/assets/co-advantage-img.webp'); }
:where(.claude) .co-advantage-img--contractors { background-image: url('/wp-content/uploads/assets/co-advantage-img-1.webp'); }
:where(.claude) .co-imgtext-img--dont-say        { background-image: url('/wp-content/uploads/assets/co-imgtext-img-1.webp'); }
:where(.claude) .co-imgtext-img--stay-updated    { background-image: url('/wp-content/uploads/assets/co-imgtext-img-1-1.webp'); }
:where(.claude) .co-imgtext-img--instant-access  { background-image: url('/wp-content/uploads/assets/co-imgtext-img-3.webp'); }
:where(.claude) .co-portal-img--contractors    { background-image: url('/wp-content/uploads/assets/co-portal-img.webp'); }
:where(.claude) .co-different-img--contractors { background-image: url('/wp-content/uploads/assets/co-different-img.webp'); }

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

/* -- Section background photos (homepage) — already absolute, untouched by build */
:where(.claude) .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) */
:where(.claude) .co-imgtext-img--label .sub { font-size: 11px; color: var(--af-gray-700); font-weight: 400; margin-top: 2px; }
:where(.claude) .co-imgtext-img--card .tags { margin-bottom: 8px; }
:where(.claude) .co-h2 + .co-different-block { margin-top: 32px; }

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

/* -- Borrower loan-category icon accent colors */
:where(.claude) .bo-cat-icon--home    { color: var(--af-sapphire-sky); }
:where(.claude) .bo-cat-icon--debt    { color: var(--af-bright-blue); }
:where(.claude) .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. */
:where(.claude) .phone-ghost:nth-child(1) { opacity: 0.7; }
/* 3-row stack (homepage) */
:where(.claude) .phone-ghost:nth-child(2):nth-last-child(2) { opacity: 0.52; }
:where(.claude) .phone-ghost:nth-child(3):nth-last-child(1) { opacity: 0.34; }
/* 6-row stack (borrowers) */
:where(.claude) .phone-ghost:nth-child(2):nth-last-child(5) { opacity: 0.58; }
:where(.claude) .phone-ghost:nth-child(3):nth-last-child(4) { opacity: 0.46; }
:where(.claude) .phone-ghost:nth-child(4):nth-last-child(3) { opacity: 0.34; }
:where(.claude) .phone-ghost:nth-child(5):nth-last-child(2) { opacity: 0.24; }
:where(.claude) .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)) */
:where(.claude) .lp-stats-row .lp-stat:nth-child(1) { --d: 0ms; }
:where(.claude) .lp-stats-row .lp-stat:nth-child(2) { --d: 140ms; }
:where(.claude) .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  ---------- */
div:where(.claude) {
  --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) */
:where(.claude) .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  ---------- */
:where(.claude) .af-roi *, :where(.claude) .af-roi *::before, :where(.claude) .af-roi *::after { box-sizing: border-box; }
:where(.claude) .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;
}
:where(.claude) .af-roi :where(p, li) { color: inherit; }
:where(.claude) .af-roi button { background: none; font: inherit; cursor: pointer; }
:where(.claude) .af-roi input, :where(.claude) .af-roi select, :where(.claude) .af-roi textarea { font: inherit; }

/* ----------  shared layout helpers  ---------- */
:where(.claude) .af-roi-container {
  width: 100%;
  max-width: var(--afroi-maxw);
  margin: 0 auto;
  padding: 0 24px;
}
:where(.claude) .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 --- */
:where(.claude) .af-roi-hero {
  background: var(--afroi-navy);
  padding: 28px 0 48px;
  text-align: center;
}
:where(.claude) .af-roi-hero-inner { max-width: 640px; margin: 0 auto; }
:where(.claude) .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;
}
:where(.claude) .af-roi-crumb a { color: var(--af-bright-blue, #0092FF); }
:where(.claude) .af-roi-crumb a:hover { color: #fff; }
:where(.claude) .af-roi-crumb-sep { color: rgba(255, 255, 255, 0.35); }
:where(.claude) .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;
}
:where(.claude) .af-roi-eyebrow svg { display: block; }
:where(.claude) .af-roi-hero .af-roi-h1 {
  font-size: clamp(30px, 4.4vw, 46px);
  margin-bottom: 16px;
  color: #fff;
}
:where(.claude) .af-roi-hero-sub {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

/* --- 2. Calculator --- */
:where(.claude) .af-roi-calc { background: var(--afroi-bg); padding: 16px 0 64px; }
:where(.claude) .af-roi-calc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
:where(.claude) .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;
}
:where(.claude) .af-roi-card {
  background: #fff;
  border: 1px solid var(--afroi-border);
  border-radius: var(--afroi-radius);
  padding: 28px;
}
:where(.claude) .af-roi-field { margin-bottom: 24px; }
:where(.claude) .af-roi-field:last-child { margin-bottom: 0; }
:where(.claude) .af-roi-label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: var(--afroi-ink);
  margin-bottom: 10px;
}
:where(.claude) .af-roi-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
:where(.claude) .af-roi-label-row .af-roi-label { margin-bottom: 0; }
:where(.claude) .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;
}
:where(.claude) .af-roi-help {
  font-size: 12px;
  color: var(--afroi-muted);
  line-height: 1.45;
  margin-top: 8px;
}
:where(.claude) .af-roi-pills { display: flex; flex-wrap: wrap; gap: 8px; }
:where(.claude) .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;
}
:where(.claude) .af-roi-pill:hover { border-color: var(--afroi-blue); color: var(--afroi-blue); }
:where(.claude) .af-roi-pill.is-on {
  background: var(--afroi-blue);
  border-color: var(--afroi-blue);
  color: #fff;
}
:where(.claude) .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;
}
:where(.claude) .af-roi-range:focus-visible { box-shadow: 0 0 0 4px rgba(1,109,225,0.20); }
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .af-roi-select-wrap { position: relative; }
:where(.claude) .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;
}
:where(.claude) .af-roi-select:focus-visible {
  border-color: var(--afroi-blue);
  box-shadow: 0 0 0 4px rgba(1,109,225,0.20);
}
:where(.claude) .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;
}
:where(.claude) .af-roi-results { display: flex; flex-direction: column; gap: 16px; }
:where(.claude) .af-roi-result { border-radius: var(--afroi-radius); padding: 20px 22px; }
:where(.claude) .af-roi-result-title {
  font-family: var(--afroi-body);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 10px;
}
:where(.claude) .af-roi-result-line { font-size: 14px; line-height: 1.55; color: var(--afroi-ink-2); margin-bottom: 4px; }
:where(.claude) .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;
}
:where(.claude) .af-roi-result-sub { font-size: 12px; font-weight: 600; margin-top: 8px; }
:where(.claude) .af-roi-result--fee { background: var(--afroi-red-tint); border-left: 3px solid var(--afroi-red); }
:where(.claude) .af-roi-result--fee .af-roi-result-title { color: var(--afroi-red); }
:where(.claude) .af-roi-result--fee .af-roi-result-big  { color: var(--afroi-red); }
:where(.claude) .af-roi-result--fee .af-roi-result-sub  { color: var(--afroi-red); opacity: 0.85; }
:where(.claude) .af-roi-result--rev { background: var(--afroi-green-tint); border-left: 3px solid var(--afroi-green); }
:where(.claude) .af-roi-result--rev .af-roi-result-title { color: var(--afroi-green); }
:where(.claude) .af-roi-result--rev .af-roi-result-big  { color: var(--afroi-green); }
:where(.claude) .af-roi-result--rev .af-roi-result-sub  { color: var(--afroi-green); opacity: 0.85; }
:where(.claude) .af-roi-result--total { background: var(--afroi-blue); color: #fff; padding: 26px 24px; }
:where(.claude) .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;
}
:where(.claude) .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;
}
:where(.claude) .af-roi-total-break { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.85); margin-top: 10px; }
:where(.claude) .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;
}
:where(.claude) .af-roi-total-cta:hover { background: var(--afroi-tint); transform: translateY(-1px); }

/* --- 3. Assumptions --- */
:where(.claude) .af-roi-assume { background: var(--afroi-bg-2); padding: 28px 0; }
:where(.claude) .af-roi-assume-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
:where(.claude) .af-roi-assume-item { display: flex; gap: 12px; align-items: flex-start; }
:where(.claude) .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;
}
:where(.claude) .af-roi-assume-label { font-weight: 700; font-size: 14px; color: var(--afroi-ink); margin-bottom: 3px; }
:where(.claude) .af-roi-assume-text  { font-size: 13px; line-height: 1.5; color: var(--afroi-ink-2); }

/* --- 4. Competitor fee strip --- */
:where(.claude) .af-roi-comp { background: #fff; border-top: 1px solid var(--afroi-border); border-bottom: 1px solid var(--afroi-border); padding: 28px 0; }
:where(.claude) .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;
}
:where(.claude) .af-roi-comp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
:where(.claude) .af-roi-comp-cell { text-align: center; padding: 16px 12px; border-radius: var(--afroi-radius-sm); background: var(--afroi-bg); }
:where(.claude) .af-roi-comp-name { font-size: 14px; color: var(--afroi-ink-2); margin-bottom: 6px; }
:where(.claude) .af-roi-comp-fee  { font-family: var(--afroi-head); font-weight: 700; font-size: 22px; color: var(--afroi-red); }
:where(.claude) .af-roi-comp-note { font-size: 11px; color: var(--afroi-muted); margin-top: 2px; }
:where(.claude) .af-roi-comp-vs   { font-size: 13px; font-weight: 700; color: var(--afroi-green); margin-top: 6px; }
:where(.claude) .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 --- */
:where(.claude) .af-roi-test { background: var(--afroi-bg); padding: 56px 0; }
:where(.claude) .af-roi-test-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
:where(.claude) .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;
}
:where(.claude) .af-roi-test-quote { font-size: 16px; line-height: 1.6; color: var(--afroi-ink); margin-bottom: 14px; }
:where(.claude) .af-roi-test-attr  { font-size: 13px; font-weight: 700; color: var(--afroi-ink-2); }

/* --- 6. FAQ --- */
:where(.claude) .af-roi-faq { background: #fff; padding: 56px 0; }
:where(.claude) .af-roi-faq-inner { max-width: 760px; margin: 0 auto; }
:where(.claude) .af-roi-faq-label {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--afroi-blue);
  margin-bottom: 8px;
}
:where(.claude) .af-roi-faq-h2   { font-size: clamp(26px, 3vw, 34px); margin-bottom: 24px; }
:where(.claude) .af-roi-faq-item { border-bottom: 1px solid var(--afroi-border); }
:where(.claude) .af-roi-faq-item:first-child { border-top: 1px solid var(--afroi-border); }
:where(.claude) .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);
}
:where(.claude) .af-roi-faq-chev { flex: none; color: var(--afroi-blue); transition: transform 220ms ease; }
:where(.claude) .af-roi-faq-item.is-open .af-roi-faq-chev { transform: rotate(180deg); }
:where(.claude) .af-roi-faq-a { overflow: hidden; max-height: 0; transition: max-height 300ms ease; }
:where(.claude) .af-roi-faq-item.is-open .af-roi-faq-a { max-height: 320px; }
:where(.claude) .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. */
:where(.claude) .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 --- */
:where(.claude) .af-roi-cta-wrap { background: var(--afroi-bg); padding: 16px 0 72px; }
:where(.claude) .af-roi-cta { background: var(--afroi-navy); border-radius: var(--afroi-radius); padding: 48px 36px; text-align: center; }
:where(.claude) .af-roi-cta-h2  { color: #fff; font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 14px; }
:where(.claude) .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;
}
:where(.claude) .af-roi-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 24px;
}
:where(.claude) .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;
}
:where(.claude) .af-roi-cta-primary:hover { background: var(--afroi-tint); transform: translateY(-1px); }
:where(.claude) .af-roi-cta-secondary { color: #fff; font-weight: 700; font-size: 15px; border-bottom: 1px solid transparent; }
:where(.claude) .af-roi-cta-secondary:hover { border-bottom-color: rgba(255,255,255,0.6); }

/* --- ROI Responsive --- */
@media (min-width: 768px) {
  :where(.claude) .af-roi-calc-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  :where(.claude) .af-roi-hero { padding: 48px 0 48px; }
}
@media (max-width: 767px) {
  :where(.claude) .af-roi-assume-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  :where(.claude) .af-roi-comp-grid   { grid-template-columns: 1fr 1fr; }
  :where(.claude) .af-roi-test-grid   { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  :where(.claude) .af-roi-assume-grid { grid-template-columns: 1fr; }
  :where(.claude) .af-roi-container   { padding: 0 18px; }
  :where(.claude) .af-roi-card        { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  :where(.claude) .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.
   ============================================================ */
div:where(.claude) {
  --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;
}

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

/* ----------  reset (scoped)  ---------- */
:where(.claude) .afd, :where(.claude) .afd * { box-sizing: border-box; }
:where(.claude) .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;
}
:where(.claude) .afd button { background: none; font: inherit; cursor: pointer; }
:where(.claude) .afd input { font: inherit; }

:where(.claude) .afd {
  font-family: var(--afd-body);
  color: var(--afd-ink);
  font-size: 16px; line-height: 1.5;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
:where(.claude) .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;
}
:where(.claude) .afd-container { width: 100%; max-width: var(--afd-maxw); margin: 0 auto; padding: 0 24px; }
:where(.claude) .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 */
:where(.claude) .afd-h1-accent { color: var(--af-bright-blue); }

/* ----------  reveal + stagger animations (gated)  ---------- */
@media (prefers-reduced-motion: no-preference) {
  :where(.claude) .afd-reveal { opacity: 0; transform: translateY(20px); transition: opacity 500ms ease, transform 500ms ease; }
  :where(.claude) .afd-reveal.is-visible { opacity: 1; transform: none; }
  :where(.claude) .afd-stagger-child { opacity: 0; transform: translateY(16px); transition: opacity 460ms ease, transform 460ms ease; transition-delay: calc(var(--afd-i, 0) * 80ms); }
  :where(.claude) .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. */
:where(.claude) .afd-reveal.is-visible,
:where(.claude) .afd-stagger-child.is-visible { opacity: 1; transform: none; }

/* ============================================================
   1. HERO (centered copy, QR tabs, large phone, orbiting customers)
   ============================================================ */
:where(.claude) .afd-hero { background: var(--afd-navy); color: #fff; padding: 48px 0 0; overflow: hidden; text-align: center; }
:where(.claude) .afd-hero-copy { max-width: 720px; margin: 0 auto; }
:where(.claude) .afd-hero h1 { color: #fff; font-size: clamp(34px, 5.4vw, 58px); }
:where(.claude) .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) */
:where(.claude) .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; }
:where(.claude) .afd-qrtab-btns { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
:where(.claude) .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; }
:where(.claude) .afd-qrtab:hover { color: var(--afd-ink); }
:where(.claude) .afd-qrtab.is-on { background: var(--afd-blue); color: #fff; }
:where(.claude) .afd-qr-panels { display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--afd-border); padding-left: 14px; }
:where(.claude) .afd-qr-panel { display: none; flex-direction: column; align-items: center; gap: 6px; }
:where(.claude) .afd-qr-panel.is-on { display: flex; }
:where(.claude) .afd-qr-panel .afd-qr { width: 100px; height: 100px; display: block; }
:where(.claude) .afd-qr-cap { color: var(--afd-muted); font-weight: 600; font-size: 12px; }

/* Mobile store links (replace the desktop-only tab controller) */
:where(.claude) .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 */
:where(.claude) .afd-hero-stage { position: relative; margin: 40px auto 0; width: 100%; max-width: 360px; aspect-ratio: 1 / 1; }

:where(.claude) .afd-stage-bg, :where(.claude) .afd-stage-fg { position: absolute; inset: 0; }

/* BACKGROUND — soft brand glow placeholder (replaceable with a photo) */
:where(.claude) .afd-stage-bg { z-index: 1; }
:where(.claude) .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); }
:where(.claude) .afd-stage-bg.has-img .afd-stage-bg-fill { display: none; }
:where(.claude) .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 */
:where(.claude) .afd-stage-fg { z-index: 3; display: flex; align-items: center; justify-content: center; }
:where(.claude) .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 */
:where(.claude) .afd-dcard-wrap { position: absolute; z-index: 2; will-change: transform; }
:where(.claude) .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; }
:where(.claude) .afd-dcard-ic { flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; }
:where(.claude) .afd-dcard-ic svg { width: 16px; height: 16px; }
:where(.claude) .afd-dcard-ic--funded { background: rgba(47,198,0,0.14); color: #1E9E4A; }
:where(.claude) .afd-dcard-ic--applied { background: rgba(1,109,225,0.12); color: #016DE1; }
:where(.claude) .afd-dcard-txt { display: flex; flex-direction: column; line-height: 1.18; }
:where(.claude) .afd-dcard-name { font-family: var(--afd-head); font-weight: 700; font-size: 13px; color: var(--afd-ink); }
:where(.claude) .afd-dcard-sub { font-size: 11px; color: #5B6B76; }
:where(.claude) .afd-dcard-sub strong { color: var(--afd-ink); font-weight: 800; }
:where(.claude) .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 */
:where(.claude) .afd-dcard-wrap--a { top: 0; left: 2%; }
:where(.claude) .afd-dcard-wrap--b { top: 46%; left: -8%; }
:where(.claude) .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) {
  :where(.claude) .afd-stage-bg-fill, :where(.claude) .afd-fg-img, :where(.claude) .afd-dcard { opacity: 0; transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
  :where(.claude) .afd-stage-bg-fill { transform: scale(1.08); }
  :where(.claude) .afd-fg-img { transform: translateY(30px) scale(.97); }
  :where(.claude) .afd-dcard { transform: translateY(16px); }
  :where(.claude) .afd-hero-stage.is-visible .afd-stage-bg-fill { opacity: 1; transform: scale(1); transition-delay: .04s; }
  :where(.claude) .afd-hero-stage.is-visible .afd-fg-img { opacity: 1; transform: translateY(0) scale(1); transition-delay: .1s; }
  :where(.claude) .afd-hero-stage.is-visible .afd-dcard { opacity: 1; transform: translateY(0); }
  :where(.claude) .afd-hero-stage.is-visible .afd-dcard-wrap--a .afd-dcard { transition-delay: .32s; }
  :where(.claude) .afd-hero-stage.is-visible .afd-dcard-wrap--b .afd-dcard { transition-delay: .44s; }
  :where(.claude) .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. */
:where(.claude) .afd-hero-stage.is-visible .afd-stage-bg-fill,
:where(.claude) .afd-hero-stage.is-visible .afd-fg-img,
:where(.claude) .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) */
  :where(.claude) .afd-hero { padding: 84px 0 0; text-align: center; }
  /* single centered column: copy stacked on top, phone + concept directly beneath the CTA */
  :where(.claude) .afd-hero .afd-container { display: flex; flex-direction: column; align-items: center; }
  :where(.claude) .afd-hero-copy { max-width: 900px; margin: 0 auto; }
  :where(.claude) .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 */
  :where(.claude) .afd-hero-stage { margin: 0 auto; max-width: 560px; }
  :where(.claude) .afd-dcard { padding: 12px 16px; gap: 12px; border-radius: 16px; }
  :where(.claude) .afd-dcard-ic { width: 38px; height: 38px; }
  :where(.claude) .afd-dcard-ic svg { width: 18px; height: 18px; }
  :where(.claude) .afd-dcard-name { font-size: 14.5px; }
  :where(.claude) .afd-dcard-sub { font-size: 12px; }
  :where(.claude) .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). */
  :where(.claude) .afd-dcard-wrap--a { top: 13%; left: 4%; right: auto; }
  :where(.claude) .afd-dcard-wrap--b { top: 48%; left: -11%; right: auto; }
  :where(.claude) .afd-dcard-wrap--c { bottom: 16%; right: -12%; left: auto; }
}
@media (max-width: 767px) {
  :where(.claude) .afd-hero-stage { max-width: 290px; }
  :where(.claude) .afd-dcard-wrap--b { display: none; }
  :where(.claude) .afd-dcard-wrap--a { top: 0; left: 0; }
  :where(.claude) .afd-dcard-wrap--c { bottom: 6%; right: -3%; left: auto; z-index: 5; }
  :where(.claude) .afd-dcard { padding: 8px 11px; gap: 8px; }
  :where(.claude) .afd-dcard-ic { width: 28px; height: 28px; }
  :where(.claude) .afd-dcard-ic svg { width: 14px; height: 14px; }
  :where(.claude) .afd-dcard-name { font-size: 12px; }
  :where(.claude) .afd-dcard-sub { font-size: 10.5px; }
  :where(.claude) .afd-dcard-amt { font-size: 12px; }
  :where(.claude) .afd-qrtabs { display: none; }
  :where(.claude) .afd-hero-stores { display: flex; }
}

/* App store buttons (hero mobile badges) */
:where(.claude) .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; }
:where(.claude) .afd-store:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.28); }
:where(.claude) .afd-store svg { flex: none; }
:where(.claude) .afd-store-top { display: block; font-size: 10px; line-height: 1; opacity: 0.85; letter-spacing: 0.2px; }
:where(.claude) .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 ---------------------------------------- */
:where(.claude) .bo-rate-loading,
:where(.claude) .bo-rate-error {
  padding: 48px 24px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 15px;
}
:where(.claude) .bo-rate-loading { color: var(--af-gray-700); }
:where(.claude) .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.     */
:where(.claude) .bo-rate-rows > *:last-child { border-bottom: 0; }
:where(.claude) .bo-rate-rows .bo-rate-row:last-child { border-bottom: 1px solid var(--af-gray-200); }

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

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

/* ---- Tab navigation ----------------------------------------- */
:where(.claude) .bo-rate-tabs {
  display: flex;
  border-bottom: 1px solid var(--af-gray-300);
  margin-bottom: 20px;
}
:where(.claude) .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;
}
:where(.claude) .bo-rate-tab:hover { color: var(--af-ink-black); }
:where(.claude) .bo-rate-tab--active {
  color: var(--af-sapphire-sky);
  border-bottom-color: var(--af-sapphire-sky);
}

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

/* ---- Disclaimer panel --------------------------------------- */
:where(.claude) .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;
}
:where(.claude) .bo-rate-disclaimer h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--af-ink-black);
  margin: 12px 0 4px;
}
:where(.claude) .bo-rate-disclaimer p { margin: 0 0 8px; }
:where(.claude) .bo-rate-disclaimer a { color: var(--af-sapphire-sky); }

/* ---- Pros & Cons panel -------------------------------------- */
:where(.claude) .bo-rate-pc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
:where(.claude) .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;
}
:where(.claude) .bo-rate-pc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
:where(.claude) .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;
}
:where(.claude) .bo-rate-pc-list li::before {
  position: absolute;
  left: 0;
  font-size: 12px;
  line-height: 1.45;
}
:where(.claude) .bo-rate-pc-col:first-child .bo-rate-pc-list li::before {
  content: '✓';
  color: var(--af-lime-green-deep);
  font-weight: 700;
}
:where(.claude) .bo-rate-pc-col:last-child .bo-rate-pc-list li::before {
  content: '–';
  color: var(--af-gray-600);
}

/* ---- Empty state -------------------------------------------- */
:where(.claude) .bo-rate-empty {
  padding: 56px 24px;
  text-align: center;
}
:where(.claude) .bo-rate-empty-inner {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
:where(.claude) .bo-rate-empty p {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--af-gray-700);
  margin: 0;
}
:where(.claude) .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;
}
:where(.claude) .bo-rate-reset:hover { background: var(--af-link-blue); }

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

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


/* ============================================================
   Source: styles/claude.css — BAD-CREDIT LANDING (bc-)
   ============================================================
   Page-specific styles for loans-for-bad-credit.html. Reuses the
   shared lp-/bo-/co- component library; the bc- prefix adds only
   the pieces that library doesn't already cover (lender comparison
   cards, key-takeaways callout, methodology grid, how-it-works
   steps, review cards, loan-use grid, tabbed link directories).
   Breakpoints follow the file's existing 900/600 convention so
   these sections reflow in step with the bo-/lp- sections they sit
   between.
   ============================================================ */

:where(.claude) .bc-section { padding: 72px 56px; }
:where(.claude) .bc-wrap { max-width: 1080px; margin: 0 auto; }
:where(.claude) .bc-wrap--wide { max-width: 1240px; }

/* ---- Generic long-form prose ---- */
:where(.claude) .bc-prose h2 { font-weight: 700; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; letter-spacing: -0.02em; color: var(--af-ink-black); margin: 0 0 20px; }
:where(.claude) .bc-prose h3 { font-weight: 700; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; letter-spacing: -0.01em; color: var(--af-ink-black); margin: 40px 0 16px; }
:where(.claude) .bc-prose h4 { font-weight: 700; font-size: 20px; color: var(--af-ink-black); margin: 28px 0 10px; }
:where(.claude) .bc-prose p { font-size: 17px; line-height: 1.6; color: var(--af-gray-800); margin: 0 0 16px; max-width: 74ch; }
:where(.claude) .bc-prose strong { color: var(--af-ink-black); font-weight: 700; }
:where(.claude) .bc-prose a { color: var(--af-sapphire-sky); text-decoration: underline; text-underline-offset: 3px; }
:where(.claude) .bc-fineprint { font-size: 13px; line-height: 1.55; color: var(--af-gray-700); margin: 18px 0 0; max-width: none; }
:where(.claude) .bc-h3 { font-weight: 700; font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.02em; color: var(--af-ink-black); margin: 0 0 28px; }

/* ---- Breadcrumb + advertising disclosure topbar ---- */
:where(.claude) .bc-topbar { background: var(--af-white); border-top: 1px solid var(--af-gray-300); border-bottom: 1px solid var(--af-gray-300); }
:where(.claude) .bc-topbar-inner { max-width: 1240px; margin: 0 auto; padding: 14px 56px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
:where(.claude) .bc-crumb { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--af-gray-700); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
:where(.claude) .bc-crumb a { color: var(--af-sapphire-sky); text-decoration: none; }
:where(.claude) .bc-crumb a:hover { text-decoration: underline; }
:where(.claude) .bc-crumb-sep { color: var(--af-gray-700); }
/* Advertising disclosure — hover/focus tooltip (replaces the old accordion) */
:where(.claude) .bc-adv-tip { position: relative; display: inline-flex; }
:where(.claude) .bc-adv-trigger { cursor: pointer; font-family: var(--font-sans); font-size: 12px; font-weight: 700; color: var(--af-gray-700); background: none; border: 0; padding: 0; display: inline-flex; align-items: center; gap: 6px; }
:where(.claude) .bc-adv-trigger:hover, :where(.claude) .bc-adv-trigger:focus-visible { color: var(--af-sapphire-sky); }
:where(.claude) .bc-adv-ico { flex: 0 0 auto; }
:where(.claude) .bc-adv-pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 40; width: 320px; max-width: 80vw; background: var(--af-deep-space-blue); color: var(--af-white); font-size: 12px; font-weight: 400; line-height: 1.55; text-align: left; padding: 14px 16px; border-radius: var(--radius-md); box-shadow: 0 16px 40px rgba(0, 39, 62, 0.28); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms; pointer-events: none; }
:where(.claude) .bc-adv-pop::before { content: ""; position: absolute; bottom: 100%; right: 16px; border: 7px solid transparent; border-bottom-color: var(--af-deep-space-blue); }
:where(.claude) .bc-adv-tip:hover .bc-adv-pop, :where(.claude) .bc-adv-tip:focus-within .bc-adv-pop { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; pointer-events: auto; }

/* ---- Loan-type tab nav (above the hero, under the global nav) ---- */
/* GB Container wrapping the [af_loan_tabs] shortcode — kill its default
   top/bottom block margin so the tab bar sits flush. */
:where(.claude) .gb-element-9999f0be { margin-top: 0; margin-bottom: 0; }
:where(.claude) .lt-tabnav { position: relative; background: var(--af-white); }
/* Full-bleed top/bottom borders: viewport-width bars so the rules span the
   whole page even when the nav sits inside a width-constrained WP content column. */
:where(.claude) .lt-tabnav::before, :where(.claude) .lt-tabnav::after { content: ''; position: absolute; left: 50%; margin-left: -50vw; width: 100vw; height: 1px; pointer-events: none; }
:where(.claude) .lt-tabnav::before { top: 0; background: var(--af-gray-200); }
:where(.claude) .lt-tabnav::after { bottom: 0; background: var(--af-gray-300); }
:where(.claude) .lt-tabnav-inner { position: relative; max-width: 1240px; margin: 0 auto; padding: 0 56px; display: flex; gap: 4px; flex-wrap: nowrap; }
:where(.claude) .lt-tab { flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px 16px; font-family: var(--font-sans); font-weight: 700; font-size: 12px; color: var(--af-gray-800); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; transition: color 140ms ease, border-color 140ms ease; }
:where(.claude) .lt-tab-ico { color: var(--af-gray-600); display: flex; transition: color 140ms ease; }
:where(.claude) .lt-tab:hover { color: var(--af-sapphire-sky); }
:where(.claude) .lt-tab:hover .lt-tab-ico { color: var(--af-sapphire-sky); }
:where(.claude) .lt-tab.is-active { color: var(--af-sapphire-sky); border-bottom-color: var(--af-sapphire-sky); }
:where(.claude) .lt-tab.is-active .lt-tab-ico { color: var(--af-sapphire-sky); }
/* "More" overflow tab + dropdown */
:where(.claude) .lt-more { position: relative; display: none; align-items: stretch; }
:where(.claude) .lt-more.lt-more--shown { display: inline-flex; }
:where(.claude) .lt-more-btn { cursor: pointer; background: none; border: 0; border-bottom: 3px solid transparent; }
:where(.claude) .lt-more-btn .lt-tab-label { display: inline-flex; align-items: center; gap: 4px; }
:where(.claude) .lt-more-caret { transition: transform 160ms ease; }
:where(.claude) .lt-more-btn[aria-expanded="true"] .lt-more-caret { transform: rotate(180deg); }
:where(.claude) .lt-more-menu { display: none; position: absolute; top: calc(100% + 1px); right: 0; z-index: 50; min-width: 220px; background: var(--af-white); border: 1px solid var(--af-gray-300); border-radius: var(--radius-md); box-shadow: 0 16px 40px rgba(0, 39, 62, 0.16); padding: 6px; }
:where(.claude) .lt-more-menu.is-open { display: block; }
:where(.claude) .lt-more-item { display: block; padding: 11px 14px; font-family: var(--font-sans); font-weight: 700; font-size: 15px; color: var(--af-gray-800); text-decoration: none; border-radius: var(--radius-sm); white-space: nowrap; }
:where(.claude) .lt-more-item:hover { background: var(--af-alice-blue); color: var(--af-sapphire-sky); }
:where(.claude) .lt-more-item.is-active { color: var(--af-sapphire-sky); }

/* ---- Explore hub (accordion: click a category to surface its subcategories) ---- */
:where(.claude) .hub-section { background: var(--af-alice-blue); }
:where(.claude) .hub-inner { max-width: 1000px; margin: 0 auto; }
:where(.claude) .hub-head { text-align: center; max-width: 640px; margin: 0 auto 36px; }
:where(.claude) .hub-eyebrow { font-family: var(--font-sans); font-weight: 700; font-size: 13px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--af-sapphire-sky); margin: 0 0 12px; }
:where(.claude) .hub-h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -0.02em; color: var(--af-ink-black); margin: 0 0 12px; line-height: 1.1; }
:where(.claude) .hub-sub { font-family: var(--font-sans); font-size: 17px; line-height: 1.5; color: var(--af-gray-800); margin: 0; }
:where(.claude) .hub-acc { display: flex; flex-direction: column; gap: 12px; }
:where(.claude) .hub-acc-item { background: var(--af-white); border: 1px solid var(--af-gray-300); border-radius: var(--radius-lg); overflow: hidden; transition: border-color 140ms ease, box-shadow 140ms ease; }
:where(.claude) .hub-acc-item:hover { border-color: var(--af-gray-500); }
:where(.claude) .hub-acc-item.is-open { border-color: rgba(1, 109, 225, 0.4); box-shadow: 0 8px 22px rgba(0, 39, 62, 0.06); }
:where(.claude) .hub-acc-head { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: none; border: 0; padding: 18px 20px; cursor: pointer; font-family: var(--font-sans); }
:where(.claude) .hub-acc-ico { width: 44px; height: 44px; flex: 0 0 auto; border-radius: var(--radius-md); background: var(--af-alice-blue); color: var(--af-sapphire-sky); display: flex; align-items: center; justify-content: center; transition: background 140ms ease, color 140ms ease; }
:where(.claude) .hub-acc-item.is-open .hub-acc-ico { background: var(--af-sapphire-sky); color: var(--af-white); }
:where(.claude) .hub-acc-titles { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
:where(.claude) .hub-acc-title { font-weight: 700; font-size: 17px; color: var(--af-ink-black); line-height: 1.2; }
:where(.claude) .hub-acc-item.is-open .hub-acc-title { color: var(--af-sapphire-sky); }
:where(.claude) .hub-acc-sub { font-size: 13px; color: var(--af-gray-700); line-height: 1.3; margin-top: 2px; }
:where(.claude) .hub-acc-chev { flex: 0 0 auto; color: var(--af-gray-600); transition: transform 200ms ease; }
:where(.claude) .hub-acc-item.is-open .hub-acc-chev { transform: rotate(180deg); color: var(--af-sapphire-sky); }
:where(.claude) .hub-acc-panel { display: none; }
:where(.claude) .hub-acc-item.is-open .hub-acc-panel { display: block; }
:where(.claude) .hub-acc-panel-inner { padding: 0 20px 14px 78px; }
:where(.claude) .hub-links { list-style: none; margin: 0; padding: 0; }
:where(.claude) .hub-links li a { display: flex; align-items: center; gap: 8px; width: 100%; padding: 14px 0; border-top: 1px solid var(--af-gray-200); color: var(--af-ink-black); text-decoration: none; font-size: 16px; font-weight: 600; transition: color 140ms ease; }
:where(.claude) .hub-links li:first-child a { border-top: 0; }
:where(.claude) .hub-links li a:hover { color: var(--af-sapphire-sky); }
:where(.claude) .hub-links li a svg { flex: 0 0 auto; color: var(--af-sapphire-sky); opacity: 0; transform: translateX(-4px); transition: opacity 140ms ease, transform 140ms ease; }
:where(.claude) .hub-links li a:hover svg { opacity: 1; transform: translateX(0); }
@media (max-width: 600px) { :where(.claude) .hub-acc-panel-inner { padding: 0 16px 12px 16px; } }

/* ---- Explore hub — horizontal icon+title tiles with "More" overflow ---- */
:where(.claude) .hub-section:has(.hub-tiles) .hub-inner { max-width: 1200px; }
:where(.claude) .hub-tiles { position: relative; display: flex; gap: 12px; flex-wrap: nowrap; justify-content: center; }
:where(.claude) .hub-tile { flex: 0 0 auto; width: 150px; display: inline-flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; padding: 18px 14px; background: var(--af-white); border: 1px solid var(--af-gray-300); border-radius: var(--radius-lg); text-decoration: none; cursor: pointer; font-family: var(--font-sans); transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease; }
:where(.claude) .hub-tile:hover { border-color: rgba(1, 109, 225, 0.4); box-shadow: 0 8px 22px rgba(0, 39, 62, 0.08); }
:where(.claude) .hub-tile-ico { width: 38px; height: 38px; flex: 0 0 auto; border-radius: var(--radius-md); background: var(--af-alice-blue); color: var(--af-sapphire-sky); display: flex; align-items: center; justify-content: center; transition: background 140ms ease, color 140ms ease; }
:where(.claude) .hub-tile:hover .hub-tile-ico { background: var(--af-sapphire-sky); color: var(--af-white); }
:where(.claude) .hub-tile-title { font-weight: 700; font-size: 14px; color: var(--af-ink-black); line-height: 1.2; }
:where(.claude) .hub-tile-desc { font-size: 12px; color: var(--af-gray-700); line-height: 1.3; }
/* "More" overflow tile + dropdown (mirrors the top loan-type nav) */
:where(.claude) .hub-more { position: relative; display: none; flex: 0 0 auto; }
:where(.claude) .hub-more.hub-more--shown { display: inline-flex; }
:where(.claude) .hub-more-btn { border: 1px solid var(--af-gray-300); }
:where(.claude) .hub-more-btn:hover { border-color: rgba(1, 109, 225, 0.4); }
:where(.claude) .hub-more-btn .hub-tile-title { display: inline-flex; align-items: center; gap: 5px; }
:where(.claude) .hub-seeall-arrow { color: var(--af-sapphire-sky); transition: transform 160ms ease; }
:where(.claude) .hub-more-btn:hover .hub-seeall-arrow,
:where(.claude) .hub-more-btn[aria-expanded="true"] .hub-seeall-arrow { transform: rotate(180deg); }
:where(.claude) .hub-more-caret { transition: transform 160ms ease; color: var(--af-gray-600); }
:where(.claude) .hub-more-btn[aria-expanded="true"] .hub-more-caret { transform: rotate(180deg); }
:where(.claude) .hub-more-menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; min-width: 240px; background: var(--af-white); border: 1px solid var(--af-gray-300); border-radius: var(--radius-md); box-shadow: 0 16px 40px rgba(0, 39, 62, 0.16); padding: 6px; }
:where(.claude) .hub-more-menu.is-open { display: block; }
:where(.claude) .hub-more-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-family: var(--font-sans); font-weight: 700; font-size: 15px; color: var(--af-ink-black); text-decoration: none; border-radius: var(--radius-sm); white-space: nowrap; }
:where(.claude) .hub-more-item:hover { background: var(--af-alice-blue); color: var(--af-sapphire-sky); }

/* ---- Hero (light) ---- */
:where(.claude) .bc-hero { overflow: hidden; }
/* Solid hero background — no gradient wash. */
:where(.claude) .lp-section--hero.bc-hero { background: var(--af-alice-blue); }
:where(.claude) .lp-section--hero.bc-hero::before { background: none; }
:where(.claude) .bc-amount-col { display: flex; flex-direction: column; gap: 10px; }
:where(.claude) .bc-amount-col .bc-adv-tip { align-self: flex-end; }
:where(.claude) .bc-hero-grid { max-width: 1180px; margin: 0 auto; padding: 56px 56px 64px; display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 56px; align-items: center; }
:where(.claude) .bc-hero-text { text-align: left; }
:where(.claude) .bc-h1 { text-align: left; max-width: none; margin: 0 0 18px; font-weight: 700; font-size: clamp(40px, 5.4vw, 68px); }
:where(.claude) .bc-h1-paint { position: relative; display: inline-block; white-space: nowrap; }
:where(.claude) .bc-byline { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 14px; color: var(--af-gray-800); flex-wrap: wrap; }
:where(.claude) .bc-byline-avatars { display: flex; flex: 0 0 auto; }
:where(.claude) .bc-byline-avatar { width: 36px; height: 36px; border-radius: 999px; border: 2px solid var(--af-white); background: linear-gradient(140deg, var(--af-sapphire-sky), var(--af-deep-space-blue)); color: var(--af-white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }
:where(.claude) .bc-byline-avatar + .bc-byline-avatar { margin-left: -10px; }
:where(.claude) .bc-byline a { color: var(--af-sapphire-sky); text-decoration: none; font-weight: 700; }
:where(.claude) .bc-byline a:hover { text-decoration: underline; }
:where(.claude) .bc-sub { text-align: left; color: var(--af-gray-800); max-width: 46ch; margin: 0 0 22px; }
/* Trustpilot trust band — full-width strip below the hero */
:where(.claude) .bc-trustband { background: var(--af-deep-space-blue); }
:where(.claude) .bc-rating { max-width: 1180px; margin: 0 auto; padding: 16px 56px; display: flex; align-items: center; justify-content: center; gap: 8px 16px; flex-wrap: wrap; font-size: 14px; color: var(--af-white); }
:where(.claude) .bc-rating strong { font-weight: 700; }
:where(.claude) .bc-rating-stars { display: inline-flex; gap: 2px; color: #00B67A; }

:where(.claude) .bc-amount-card { background: var(--af-white); border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(0, 39, 62, 0.12); border: 1px solid rgba(0, 39, 62, 0.06); padding: 28px; }
:where(.claude) .bc-amount-label { font-weight: 700; font-size: 16px; color: var(--af-ink-black); margin: 0 0 14px; display: block; }
:where(.claude) .bc-amount-input { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--af-gray-400); border-radius: var(--radius-md); padding: 7px 7px 7px 16px; font-size: 24px; font-weight: 700; color: var(--af-ink-black); font-variant-numeric: tabular-nums; }
:where(.claude) .bc-amount-input:focus-within { border-color: var(--af-sapphire-sky); box-shadow: var(--shadow-focus-ring); }
:where(.claude) .bc-amount-cur { color: var(--af-gray-700); }
:where(.claude) .bc-amount-input input { border: 0; outline: 0; width: 100%; min-width: 0; font: inherit; color: inherit; background: transparent; }
:where(.claude) .bc-amount-help { font-size: 13px; color: var(--af-gray-700); margin: 8px 0 18px; }
:where(.claude) .bc-amount-cta { flex: 0 0 auto; width: auto; white-space: nowrap; font-size: 16px; padding: 13px 22px; box-shadow: none; }
:where(.claude) .bc-amount-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--af-success); }

/* ---- Key takeaways ---- */
:where(.claude) .bc-section--takeaways { padding-top: 56px; padding-bottom: 8px; }
:where(.claude) .bc-takeaways { background: var(--af-alice-blue); border: 1px solid rgba(1, 109, 225, 0.14); border-radius: var(--radius-lg); padding: 28px 32px; }
:where(.claude) .bc-takeaways-title { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--af-sapphire-sky); margin: 0 0 16px; }
:where(.claude) .bc-takeaways-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
:where(.claude) .bc-takeaways-list li { display: flex; gap: 12px; font-size: 16px; line-height: 1.5; color: var(--af-ink-black); }
:where(.claude) .bc-takeaways-list strong { font-weight: 700; }
:where(.claude) .bc-check { flex: 0 0 auto; color: var(--af-success); margin-top: 2px; }

/* ---- Featured lender comparison cards ---- */
:where(.claude) .bc-lender-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
:where(.claude) .bc-lender-card { position: relative; background: var(--af-white); border: 1px solid var(--af-gray-300); border-radius: var(--radius-lg); padding: 30px 24px 22px; display: flex; flex-direction: column; box-shadow: 0 4px 18px rgba(0, 39, 62, 0.06); }
:where(.claude) .bc-lender-ribbon { position: absolute; top: -13px; left: 24px; background: var(--af-deep-space-blue); color: var(--af-white); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; padding: 6px 12px; border-radius: 999px; }
:where(.claude) .bc-lender-ribbon--best { background: var(--af-sapphire-sky); }
:where(.claude) .bc-lender-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 18px; min-height: 48px; }
:where(.claude) .bc-lender-logo { height: 36px; display: flex; align-items: center; }
:where(.claude) .bc-lender-logo img { height: 100%; width: auto; object-fit: contain; }
:where(.claude) .bc-lender-logo-initial { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; color: var(--af-ink-black); }
:where(.claude) .bc-lender-rating { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
:where(.claude) .bc-stars { display: inline-flex; gap: 2px; color: var(--af-warning); }
:where(.claude) .bc-stars .bc-star--off { color: var(--af-gray-300); }
:where(.claude) .bc-lender-rating-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--af-gray-700); }
:where(.claude) .bc-lender-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--af-gray-300); border: 1px solid var(--af-gray-300); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 18px; }
:where(.claude) .bc-lender-stat { background: var(--af-white); padding: 12px 14px; }
:where(.claude) .bc-lender-stat-figure { font-weight: 700; font-size: 15px; color: var(--af-ink-black); font-variant-numeric: tabular-nums; }
:where(.claude) .bc-lender-stat-label { font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--af-gray-700); margin-top: 3px; }
:where(.claude) .bc-lender-cta { width: 100%; }
:where(.claude) .bc-lender-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 2px; font-size: 13px; font-weight: 600; color: var(--af-success); }
:where(.claude) .bc-disclose { border-top: 1px solid var(--af-gray-300); margin-top: 14px; }
:where(.claude) .bc-disclose summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 2px; font-weight: 700; font-size: 14px; color: var(--af-ink-black); }
:where(.claude) .bc-disclose summary::-webkit-details-marker { display: none; }
:where(.claude) .bc-disclose summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--af-sapphire-sky); border-bottom: 2px solid var(--af-sapphire-sky); transform: rotate(45deg); transition: transform 160ms ease; flex: 0 0 auto; }
:where(.claude) .bc-disclose[open] summary::after { transform: rotate(-135deg); }
:where(.claude) .bc-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 2px 2px 16px; }
:where(.claude) .bc-proscons h5 { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 8px; }
:where(.claude) .bc-pros h5 { color: var(--af-success); }
:where(.claude) .bc-cons h5 { color: var(--af-gray-700); }
:where(.claude) .bc-proscons ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
:where(.claude) .bc-proscons li { font-size: 13px; line-height: 1.4; color: var(--af-gray-800); padding-left: 18px; position: relative; }
:where(.claude) .bc-pros li::before { content: "+"; position: absolute; left: 0; color: var(--af-success); font-weight: 700; }
:where(.claude) .bc-cons li::before { content: "\2013"; position: absolute; left: 0; color: var(--af-gray-600); font-weight: 700; }
:where(.claude) .bc-disclose-body { padding: 2px 2px 16px; }
:where(.claude) .bc-disclose-body p { font-size: 12px; line-height: 1.55; color: var(--af-gray-700); margin: 0 0 10px; }
:where(.claude) .bc-disclose-body p:last-child { margin-bottom: 0; }

/* Rate-table lender initials (OneMain / Avant have no logo asset) */
:where(.claude) .bc-rate-logo-initial { width: 34px; height: 34px; border-radius: 8px; background: var(--af-alice-blue); color: var(--af-sapphire-sky); font-family: var(--font-display); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }

/* ---- Methodology ---- */
:where(.claude) .bc-method-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 28px 0 8px; }
:where(.claude) .bc-method-item { border: 1px solid var(--af-gray-300); border-radius: var(--radius-md); padding: 22px; background: var(--af-gray-100); }
:where(.claude) .bc-method-weight { display: inline-flex; align-items: center; justify-content: center; background: var(--af-sapphire-sky); color: var(--af-white); font-weight: 700; font-size: 14px; padding: 4px 12px; border-radius: 999px; margin-bottom: 12px; font-variant-numeric: tabular-nums; }
:where(.claude) .bc-method-item h4 { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--af-ink-black); }
:where(.claude) .bc-method-item p { font-size: 14px; line-height: 1.5; margin: 0; color: var(--af-gray-800); }

/* ---- Monthly picks ---- */
:where(.claude) .bc-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0 0 32px; }
:where(.claude) .bc-pick { border: 1px solid var(--af-gray-300); border-radius: var(--radius-md); padding: 24px; }
:where(.claude) .bc-pick h4 { margin: 0 0 10px; font-size: 19px; font-weight: 700; color: var(--af-ink-black); }
:where(.claude) .bc-pick p { font-size: 14.5px; line-height: 1.55; color: var(--af-gray-800); margin: 0 0 14px; }
:where(.claude) .bc-readreview { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--af-sapphire-sky); text-decoration: none; }
:where(.claude) .bc-readreview:hover { color: var(--af-link-blue); }
:where(.claude) .bc-picks-cta { text-align: center; }

/* ---- How it works steps ---- */
:where(.claude) .bc-section--steps { background: var(--af-white); }
:where(.claude) .bc-steps-head { text-align: center; margin-bottom: 48px; }
:where(.claude) .bc-steps-eyebrow { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--af-sapphire-sky); margin: 0 0 12px; }
:where(.claude) .bc-steps-h2 { font-weight: 700; font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -0.02em; margin: 0; color: var(--af-ink-black); }
:where(.claude) .bc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 1000px; margin: 0 auto; }
:where(.claude) .bc-step { text-align: left; }
:where(.claude) .bc-step-num { width: 48px; height: 48px; border-radius: 999px; background: var(--af-alice-blue); color: var(--af-sapphire-sky); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 20px; margin-bottom: 18px; }
:where(.claude) .bc-step h4 { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: var(--af-ink-black); }
:where(.claude) .bc-step p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--af-gray-800); }

/* ---- Reviews ---- */
:where(.claude) .bc-section--reviews { background: var(--af-white); }
:where(.claude) .bc-reviews-h2 { text-align: center; margin: 0 0 40px; }
:where(.claude) .bc-reviews { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
:where(.claude) .bc-review { border: 1px solid var(--af-gray-300); border-radius: var(--radius-md); padding: 18px; display: flex; flex-direction: column; gap: 8px; min-height: 150px; }
:where(.claude) .bc-review-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
:where(.claude) .bc-review-stars { display: inline-flex; gap: 2px; color: #00B67A; }
:where(.claude) .bc-review-verified { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--af-success); }
:where(.claude) .bc-review-text { font-size: 14px; line-height: 1.5; color: var(--af-ink-black); font-weight: 600; }
:where(.claude) .bc-review-meta { font-size: 12px; color: var(--af-gray-700); margin-top: auto; }
:where(.claude) .bc-reviews-foot { text-align: center; margin-top: 28px; font-size: 14px; color: var(--af-gray-800); }
:where(.claude) .bc-reviews-foot strong { font-weight: 700; }

/* ---- Loan-use icon grid ---- */
:where(.claude) .bc-section--uses { background: var(--af-alice-blue); }
:where(.claude) .bc-uses-h2 { text-align: center; font-weight: 700; font-size: clamp(28px, 3.2vw, 40px); margin: 0 0 36px; letter-spacing: -0.02em; color: var(--af-ink-black); }
:where(.claude) .bc-uses { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
:where(.claude) .bc-use { background: var(--af-white); border: 1px solid var(--af-gray-300); border-radius: var(--radius-md); padding: 24px 14px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
:where(.claude) .bc-use-ico { width: 48px; height: 48px; color: var(--af-sapphire-sky); display: flex; align-items: center; justify-content: center; }
:where(.claude) .bc-use-label { font-size: 14px; font-weight: 700; color: var(--af-ink-black); line-height: 1.3; }

/* ---- Tabbed link directories ---- */
:where(.claude) .bc-section--links { background: var(--af-white); }
:where(.claude) .bc-section--loaninfo { background: var(--af-gray-100); }
:where(.claude) .bc-links-h2 { font-weight: 700; font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.02em; margin: 0 0 24px; color: var(--af-ink-black); }
:where(.claude) .bc-tabs { display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--af-gray-300); margin-bottom: 28px; }
:where(.claude) .bc-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 12px 16px; font-family: var(--font-sans); font-weight: 700; font-size: 15px; color: var(--af-gray-700); cursor: pointer; margin-bottom: -1px; }
:where(.claude) .bc-tab:hover { color: var(--af-ink-black); }
:where(.claude) .bc-tab.is-on { color: var(--af-sapphire-sky); border-bottom-color: var(--af-sapphire-sky); }
:where(.claude) .bc-tabpanel { display: none; }
:where(.claude) .bc-tabpanel.is-on { display: block; }
:where(.claude) .bc-linklist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; }
:where(.claude) .bc-linklist a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 4px; border-bottom: 1px solid var(--af-gray-200); color: var(--af-ink-black); text-decoration: none; font-size: 14px; font-weight: 600; }
:where(.claude) .bc-linklist a:hover { color: var(--af-sapphire-sky); }
:where(.claude) .bc-linklist a svg { flex: 0 0 auto; color: var(--af-gray-500); }
:where(.claude) .bc-linklist a:hover svg { color: var(--af-sapphire-sky); }

/* ---- See also ---- */
:where(.claude) .bc-section--seealso { padding-top: 8px; }
:where(.claude) .bc-seealso { background: var(--af-gray-100); border-radius: var(--radius-md); padding: 24px 28px; }
:where(.claude) .bc-seealso-title { font-weight: 700; font-size: 16px; margin: 0 0 12px; color: var(--af-ink-black); }
:where(.claude) .bc-seealso ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; }
:where(.claude) .bc-seealso li { padding: 6px 0; break-inside: avoid; }
:where(.claude) .bc-seealso a { color: var(--af-sapphire-sky); text-decoration: none; font-size: 14px; font-weight: 600; }
:where(.claude) .bc-seealso a:hover { text-decoration: underline; }

/* ---- Responsive (matches the 900/600 convention used across this file) ---- */
@media (max-width: 900px) {
  :where(.claude) .bc-section { padding: 56px 24px; }
  :where(.claude) .bc-topbar-inner { padding: 12px 24px; }
  :where(.claude) .bc-hero-grid { grid-template-columns: 1fr; padding: 40px 24px 48px; gap: 32px; }
  :where(.claude) .bc-h1 { font-size: clamp(34px, 8vw, 52px); }
  :where(.claude) .bc-lender-grid, :where(.claude) .bc-picks, :where(.claude) .bc-steps { grid-template-columns: 1fr; }
  :where(.claude) .bc-method-grid { grid-template-columns: 1fr; }
  :where(.claude) .bc-reviews { grid-template-columns: repeat(2, 1fr); }
  :where(.claude) .bc-uses { grid-template-columns: repeat(3, 1fr); }
  :where(.claude) .bc-linklist { grid-template-columns: 1fr 1fr; }
  :where(.claude) .bc-rating { padding: 14px 24px; }
  :where(.claude) .lt-tabnav-inner { padding: 0 24px; }
}
@media (max-width: 600px) {
  :where(.claude) .bc-section { padding: 44px 16px; }
  :where(.claude) .bc-topbar-inner { padding: 12px 16px; }
  :where(.claude) .bc-uses { grid-template-columns: repeat(2, 1fr); }
  :where(.claude) .bc-reviews { grid-template-columns: 1fr; }
  :where(.claude) .bc-linklist { grid-template-columns: 1fr; }
  :where(.claude) .bc-proscons { grid-template-columns: 1fr; }
  :where(.claude) .bc-seealso ul { columns: 1; }
  :where(.claude) .bc-amount-card { padding: 20px; }
  :where(.claude) .bc-amount-input { flex-wrap: wrap; padding: 10px 12px; gap: 8px 10px; }
  :where(.claude) .bc-amount-input input { width: auto; flex: 1 1 60px; }
  :where(.claude) .bc-amount-cta { flex: 1 0 100%; }
  :where(.claude) .lt-tabnav-inner { padding: 0 16px; }
  :where(.claude) .lt-tab { padding: 9px 12px; font-size: 11px; gap: 4px; }
}


/* ============================================================
   Source: styles/claude.css — CONTRACTOR RESOURCES (cr-)
   ============================================================
   The /contractor-resources/ learning hub. Reuses the shared
   article-card component (.lp-art-card and children) for every
   tile; the cr- prefix adds only what the library doesn't have:
   the centered hero, the "Start here / Financing 101" rail, the
   search + tag-chip filter toolbar, the card category badge, the
   photo thumb/avatar (cards here use real images, not the SVG
   .lp-art-illus), and the empty state. Tokens + breakpoints match
   the rest of this file.
   ============================================================ */

/* ---- Breadcrumb (reuses co-crumb look, standalone band) ---- */
:where(.claude) .cr-crumb-band { background: var(--af-white); padding: 18px 56px 0; }
:where(.claude) .cr-crumb-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--af-gray-700); }
:where(.claude) .cr-crumb-inner a { color: var(--af-sapphire-sky); text-decoration: none; }
:where(.claude) .cr-crumb-inner a:hover { text-decoration: underline; }
:where(.claude) .cr-crumb-sep { color: var(--af-gray-400); }
:where(.claude) .cr-crumb-inner--onblue { color: rgba(255, 255, 255, 0.7); max-width: 1280px; margin: 0 auto 24px; }
:where(.claude) .cr-crumb-inner--onblue a { color: var(--af-icy-blue); }
:where(.claude) .cr-crumb-inner--onblue .cr-crumb-sep { color: rgba(255, 255, 255, 0.4); }
:where(.claude) .cr-crumb-inner--onblue [aria-current="page"] { color: var(--af-white); }

/* ---- Featured article (top of page) — deep-blue band for separation ---- */
:where(.claude) .cr-feature { background: var(--af-deep-space-blue); padding: 28px 56px 56px; }
:where(.claude) .cr-feature-card { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 44px; align-items: center; text-decoration: none; color: inherit; }
:where(.claude) .cr-feature-media { position: relative; min-height: 360px; border-radius: var(--radius-xl); overflow: hidden; background: rgba(255, 255, 255, 0.06); }
:where(.claude) .cr-feature-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 300ms ease; }
:where(.claude) .cr-feature-card:hover .cr-feature-media img { transform: scale(1.03); }
:where(.claude) .cr-feature-body { display: flex; flex-direction: column; justify-content: center; gap: 16px; }
:where(.claude) .cr-feature-eyebrow { align-self: flex-start; font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--af-deep-space-blue); background: var(--af-icy-blue); border-radius: var(--radius-pill); padding: 6px 12px; }
:where(.claude) .cr-feature-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.1; letter-spacing: -0.02em; color: var(--af-white); margin: 0; text-wrap: balance; }
:where(.claude) .cr-feature-excerpt { font-family: var(--font-sans); font-size: 18px; line-height: 1.5; color: rgba(255, 255, 255, 0.78); margin: 0; max-width: 54ch; }
:where(.claude) .cr-feature-meta { display: flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-size: 14px; color: rgba(255, 255, 255, 0.82); }
:where(.claude) .cr-feature-meta .lp-art-author { color: var(--af-icy-blue); }
:where(.claude) .cr-feature-dot { color: rgba(255, 255, 255, 0.4); }
:where(.claude) .cr-feature-cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-weight: 700; font-size: 16px; color: var(--af-white); margin-top: 4px; transition: gap 160ms ease, color 160ms ease; }
:where(.claude) .cr-feature-card:hover .cr-feature-cta { gap: 12px; color: var(--af-icy-blue); }

/* ---- "Start here" — Financing 101 rail ---- */
:where(.claude) .cr-start { background: var(--af-white); padding: 48px 56px 8px; }
:where(.claude) .cr-start-inner { max-width: 1280px; margin: 0 auto; }
:where(.claude) .cr-start-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
:where(.claude) .cr-start-eyebrow { font-family: var(--font-sans); font-weight: 700; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--af-lime-green); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
:where(.claude) .cr-start-h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.02em; color: var(--af-ink-black); margin: 0; line-height: 1.1; }
:where(.claude) .cr-start-note { font-family: var(--font-sans); font-size: 15px; color: var(--af-gray-700); max-width: 36ch; margin: 0; }
:where(.claude) .cr-start-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* ---- Filter toolbar (search + tag chips + count) ---- */
:where(.claude) .cr-library { background: var(--af-white); padding: 48px 56px 96px; }
:where(.claude) .cr-library-inner { max-width: 1280px; margin: 0 auto; }
:where(.claude) .cr-toolbar { position: sticky; top: var(--nav-height, 64px); z-index: 20; background: var(--af-white); padding: 16px 0 18px; margin-bottom: 28px; border-bottom: 1px solid var(--af-gray-200); }
:where(.claude) .cr-toolbar-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
:where(.claude) .cr-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 0; }
:where(.claude) .cr-chip { font-family: var(--font-sans); font-weight: 700; font-size: 14px; line-height: 1; color: var(--af-sapphire-sky); background: var(--af-alice-blue); border: 1px solid transparent; border-radius: var(--radius-pill); padding: 10px 16px; cursor: pointer; transition: background 140ms ease, color 140ms ease, border-color 140ms ease; }
:where(.claude) .cr-chip:hover { background: var(--af-icy-blue); color: var(--af-link-blue); }
:where(.claude) .cr-chip.is-on { background: var(--af-sapphire-sky); color: var(--af-white); }
:where(.claude) .cr-chip-count { opacity: 0.6; font-weight: 600; margin-left: 4px; }

/* ---- Grid + cards (reuses .lp-art-card; adds photo thumb, badge, hide) ---- */
:where(.claude) .cr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
:where(.claude) .cr-card[hidden] { display: none; }
:where(.claude) .cr-thumb-img { display: block; width: 100%; height: 100%; object-fit: cover; }
:where(.claude) .cr-art-tag { align-self: flex-start; font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--af-deep-space-blue); background: var(--af-icy-blue); border-radius: var(--radius-pill); padding: 5px 11px; margin-bottom: 2px; }
:where(.claude) .cr-byline-photo { width: 30px; height: 30px; border-radius: 999px; object-fit: cover; flex: 0 0 auto; }

/* ---- Empty state ---- */
:where(.claude) .cr-empty { text-align: center; padding: 72px 24px; color: var(--af-gray-700); font-family: var(--font-sans); }
:where(.claude) .cr-empty[hidden] { display: none; }
:where(.claude) .cr-empty-title { font-family: var(--font-display); font-weight: 600; font-size: 24px; color: var(--af-ink-black); margin: 0 0 8px; }
:where(.claude) .cr-empty-sub { font-size: 16px; margin: 0; }

/* ---- Advisor CTA band ---- */
:where(.claude) .cr-advisor { background: var(--af-alice-blue); padding: 72px 56px; }
:where(.claude) .cr-advisor-inner { max-width: 880px; margin: 0 auto; text-align: center; }
:where(.claude) .cr-advisor-h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -0.02em; color: var(--af-ink-black); margin: 0 0 14px; line-height: 1.1; }
:where(.claude) .cr-advisor-sub { font-family: var(--font-sans); font-size: 18px; line-height: 1.5; color: var(--af-gray-800); margin: 0 auto 28px; max-width: 48ch; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  :where(.claude) .cr-feature { padding: 20px 24px 36px; }
  :where(.claude) .cr-feature-card { grid-template-columns: 1fr; gap: 24px; }
  :where(.claude) .cr-feature-media { min-height: 0; aspect-ratio: 16 / 9; }
  :where(.claude) .cr-feature-body { padding: 0; }
  :where(.claude) .cr-start, :where(.claude) .cr-library { padding-left: 24px; padding-right: 24px; }
  :where(.claude) .cr-grid { grid-template-columns: 1fr 1fr; }
  :where(.claude) .cr-start-grid { display: flex; grid-template-columns: none; gap: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scroll-padding-left: 24px; margin: 0 -24px; padding: 4px 24px 12px; scrollbar-width: none; }
  :where(.claude) .cr-start-grid::-webkit-scrollbar { display: none; }
  :where(.claude) .cr-start-grid > .cr-card { flex: 0 0 78%; scroll-snap-align: start; }
  :where(.claude) .cr-start-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  :where(.claude) .cr-advisor { padding: 56px 24px; }
  :where(.claude) .cr-crumb-band { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 600px) {
  :where(.claude) .cr-grid { grid-template-columns: 1fr; }
  :where(.claude) .cr-start-grid > .cr-card { flex-basis: 84%; }
  :where(.claude) .cr-library { padding-bottom: 64px; }
}

/* ---- Multi-select filter: chips inline on desktop, dropdown panel on mobile ---- */
:where(.claude) .cr-filter { display: contents; }
:where(.claude) .cr-filter-toggle { display: none; }
@media (max-width: 767px) {
  :where(.claude) .cr-filter { display: block; position: relative; }
  :where(.claude) .cr-filter-toggle { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-weight: 700; font-size: 15px; color: var(--af-sapphire-sky); background: var(--af-alice-blue); border: 1px solid transparent; border-radius: var(--radius-pill); padding: 11px 16px; cursor: pointer; }
  :where(.claude) .cr-filter-toggle:focus-visible { box-shadow: var(--shadow-focus-ring); outline: none; }
  :where(.claude) .cr-filter-caret { transition: transform 160ms ease; }
  :where(.claude) .cr-filter.is-open .cr-filter-caret { transform: rotate(180deg); }
  :where(.claude) .cr-filter-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--af-sapphire-sky); color: var(--af-white); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
  :where(.claude) .cr-filter-badge[hidden] { display: none; }
  :where(.claude) .cr-chips { display: none; position: absolute; top: calc(100% + 10px); left: 0; z-index: 30; flex-direction: column; align-items: stretch; gap: 6px; width: min(280px, 86vw); max-height: 60vh; overflow-y: auto; background: var(--af-white); border: 1px solid var(--af-gray-300); border-radius: var(--radius-lg); box-shadow: 0 18px 40px rgba(3,23,26,0.14); padding: 10px; }
  :where(.claude) .cr-filter.is-open .cr-chips { display: flex; }
  :where(.claude) .cr-chip { display: flex; align-items: center; justify-content: space-between; }
}

/* ============================================================
   Source: styles/claude.css — ARTICLE GUIDE (guide-)
   ============================================================
   Two-column long-form layout for trade pages: a sticky table of
   contents on the left and scrolling body on the right (scroll-spy
   in claude.js highlights the active section). On mobile the TOC
   collapses to a sticky bar of horizontally-scrolling pills that
   stays pinned under the global nav. Offsets read --nav-height,
   which global-nav sets on :root.
   ============================================================ */
:where(.claude) .guide-section { background: var(--af-white); padding: 64px 56px 88px; }
:where(.claude) .guide-lead { max-width: 1180px; margin: 0 auto 44px; }
:where(.claude) .guide-lead-eyebrow { font-family: var(--font-sans); font-weight: 700; font-size: 13px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--af-sapphire-sky); margin: 0 0 14px; }
:where(.claude) .guide-lead-h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.02em; color: var(--af-ink-black); margin: 0 0 14px; max-width: 20ch; }
:where(.claude) .guide-lead-sub { font-family: var(--font-sans); font-size: 19px; line-height: 1.55; color: var(--af-gray-800); margin: 0; max-width: 62ch; }
:where(.claude) .guide-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 280px 1fr; gap: 64px; align-items: start; }
:where(.claude) .guide-toc { position: sticky; top: calc(var(--nav-height, 72px) + 24px); }
:where(.claude) .guide-toc-title { font-family: var(--font-sans); font-weight: 700; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--af-gray-700); margin: 0 0 16px; }
:where(.claude) .guide-toc-nav { display: flex; flex-direction: column; border-left: 2px solid var(--af-gray-300); }
:where(.claude) .guide-toc-link { display: block; padding: 11px 0 11px 18px; margin-left: -2px; border-left: 2px solid transparent; font-family: var(--font-sans); font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--af-gray-800); text-decoration: none; transition: color 140ms ease, border-color 140ms ease, background 140ms ease; }
:where(.claude) .guide-toc-link:hover { color: var(--af-sapphire-sky); }
:where(.claude) .guide-toc-link.is-active { color: var(--af-sapphire-sky); border-left-color: var(--af-sapphire-sky); background: var(--af-alice-blue); border-radius: 0 8px 8px 0; }
:where(.claude) .guide-body { min-width: 0; max-width: 760px; }
:where(.claude) .guide-block { scroll-margin-top: calc(var(--nav-height, 72px) + 24px); }
:where(.claude) .guide-block + .guide-block { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--af-gray-200); }
:where(.claude) .guide-h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -0.02em; color: var(--af-ink-black); margin: 0 0 18px; }
:where(.claude) .guide-body p { font-family: var(--font-sans); font-size: 18px; line-height: 1.6; color: var(--af-gray-800); margin: 0 0 16px; }
:where(.claude) .guide-body p:last-child { margin-bottom: 0; }
:where(.claude) .guide-related { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--af-gray-200); }
:where(.claude) .guide-related-title { font-family: var(--font-sans); font-weight: 700; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--af-gray-700); margin: 0 0 16px; }
:where(.claude) .guide-related .lp-trend-grid { margin-bottom: 24px; }
@media (max-width: 900px) {
  :where(.claude) .guide-section { padding: 0 0 56px; }
  :where(.claude) .guide-lead { padding: 32px 24px 0; margin-bottom: 24px; }
  :where(.claude) .guide-inner { display: block; }
  :where(.claude) .guide-toc { position: sticky; top: var(--nav-height, 60px); z-index: 30; background: var(--af-white); margin: 0 0 28px; padding: 12px 0; border-bottom: 1px solid var(--af-gray-300); }
  :where(.claude) .guide-toc-title { display: none; }
  :where(.claude) .guide-toc-nav { flex-direction: row; border-left: 0; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 0 24px; }
  :where(.claude) .guide-toc-nav::-webkit-scrollbar { display: none; }
  :where(.claude) .guide-toc-link { flex: 0 0 auto; white-space: nowrap; padding: 9px 15px; margin-left: 0; border-left: 0; border: 1px solid var(--af-gray-300); border-radius: var(--radius-pill); font-size: 14px; }
  :where(.claude) .guide-toc-link.is-active { background: var(--af-sapphire-sky); color: var(--af-white); border-color: var(--af-sapphire-sky); border-radius: var(--radius-pill); }
  :where(.claude) .guide-body { max-width: none; padding: 0 24px; }
}
@media (max-width: 600px) {
  :where(.claude) .guide-lead { padding: 24px 16px 0; }
  :where(.claude) .guide-toc-nav { padding: 0 16px; }
  :where(.claude) .guide-body { padding: 0 16px; }
  :where(.claude) .guide-body p { font-size: 16px; }
}


/* ---- Hero loan-quote widget (.lq-*) — [af_loan_quote] ----
   The shortcode emits the form only; the white card around it is authored in
   the page (GB container) so other content can share the box.
   The range input is transparent and sits above the painted track/fill/thumb,
   so it keeps native keyboard + touch behaviour while the visuals are ours.
   initLoanQuote() in claude.js positions .lq-fill and .lq-thumb. */
:where(.claude) .lq-form { margin: 0; font-family: var(--font-sans); }
:where(.claude) .lq-label { margin: 0; font-size: 17px; font-weight: 700; color: var(--af-ink-black); }
:where(.claude) .lq-amount { margin: 10px 0 0; font-family: var(--font-display); font-size: clamp(40px, 6vw, 56px); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; color: var(--af-ink-black); }
:where(.claude) .lq-slider { position: relative; height: 28px; margin: 22px 0 0; }
:where(.claude) .lq-track, :where(.claude) .lq-fill { position: absolute; top: 11px; left: 0; height: 6px; border-radius: var(--radius-pill); pointer-events: none; }
:where(.claude) .lq-track { right: 0; background: var(--af-gray-400); }
:where(.claude) .lq-fill { width: 0; background: var(--af-sapphire-sky); }
:where(.claude) .lq-range { position: relative; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 28px; margin: 0; background: transparent; outline: none; cursor: pointer; }
:where(.claude) .lq-range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 28px; background: transparent; }
:where(.claude) .lq-range::-moz-range-thumb { width: 44px; height: 28px; border: 0; background: transparent; }
:where(.claude) .lq-range::-moz-range-track { background: transparent; }
:where(.claude) .lq-thumb { position: absolute; top: 0; left: 0; display: flex; gap: 4px; align-items: center; justify-content: center; width: 44px; height: 28px; margin-left: -22px; border-radius: var(--radius-pill); background: var(--af-white); box-shadow: 0 1px 4px rgba(3,24,27,0.18), 0 0 0 1px var(--af-gray-400); pointer-events: none; }
:where(.claude) .lq-range:focus-visible ~ .lq-thumb { box-shadow: var(--shadow-focus-ring); }
:where(.claude) .lq-grip { display: flex; flex-direction: column; gap: 3px; }
:where(.claude) .lq-grip span { width: 3px; height: 3px; border-radius: 50%; background: var(--af-gray-600); }
:where(.claude) .lq-bounds { display: flex; justify-content: space-between; margin: 10px 0 0; font-size: 14px; color: var(--af-gray-700); }
:where(.claude) .lq-cta { display: block; width: 100%; margin: 24px 0 0; padding: 18px 24px; border: 0; border-radius: var(--radius-md); background: var(--af-sapphire-sky); color: var(--af-white); font: 700 17px/1.1 var(--font-sans); cursor: pointer; }
:where(.claude) .lq-cta:hover { background: var(--af-link-blue); }
:where(.claude) .lq-cta:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
:where(.claude) .lq-note { display: flex; gap: 6px; align-items: center; justify-content: center; margin: 14px 0 0; font-size: 14px; color: var(--af-gray-800); }
:where(.claude) .lq-note svg { flex: none; color: var(--af-success); }