/* =====================================================================
   Elora Funding — light institutional theme
   Navy = structure & authority · Green = action
   Design values derived from research/bank-light-theme.md
   ===================================================================== */

:root{
  /* surfaces */
  --paper:#FFFFFF;
  --paper-2:#F5F7F9;
  --paper-3:#EDF1F5;

  /* navy — structure, headings, trust */
  --navy:#0A2A5E;
  --navy-d:#061B3E;
  --navy-dd:#04122A;
  --navy-l:#1B4B96;
  --navy-050:#EEF3FA;
  --navy-100:#DCE6F4;

  /* green — action only */
  --green:#0D6E3D;
  --green-d:#0A5730;
  --green-l:#12874C;
  --green-050:#E9F4EE;
  --green-100:#CFE7DA;

  /* ink */
  --ink:#101820;
  --ink-2:#565E66;
  --ink-3:#656D75;

  /* lines */
  --line:#D9DEE3;
  --line-2:#EAEDF1;
  --line-3:#F1F4F7;

  --font-body:'Satoshi','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-display:var(--font-body);

  --shell:1280px;

  /* ── Geometry ────────────────────────────────────────────────────────────
     Measured off current fintech (2026): button radius runs 4px (Stripe),
     8px (Column, Increase), 10px (Brex), 12px (Plaid) — 32px pills are the
     Mercury outlier, not the norm. Cards converge hard on 12px. A 4px-based
     scale is what all six sample sites actually ship. */
  --r-xs:4px; --r-sm:8px; --r-btn:10px; --r-md:12px; --r-lg:16px; --r-xl:20px;
  --r-pill:999px;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-quad:cubic-bezier(.25,.46,.45,.94);
  --ease-ui:cubic-bezier(.4,0,.2,1);       /* the fintech standard easing */
  --ti:150ms cubic-bezier(.25,.46,.45,.94);
  --ti-ui:180ms cubic-bezier(.4,0,.2,1);

  /* ── Depth ───────────────────────────────────────────────────────────────
     Three rules, taken from measurement, that separate 2026 from 2010:
       1. Shadows are never black. Stripe tints with rgba(50,50,93) — a navy
          violet. Ours derive from --navy rgb(10,42,94).
       2. Shadows are layered, not single. Column ships a hairline ring + a
          short contact shadow + a long ambient one, together.
       3. Opacities stay under .10 on surfaces. Depth is felt, not seen. */
  --ring:0 0 0 1px rgba(10,42,94,.07);
  --sh-sm:0 1px 2px rgba(10,42,94,.05),0 0 0 1px rgba(10,42,94,.06);
  --sh-md:0 2px 4px rgba(10,42,94,.04),0 8px 16px rgba(10,42,94,.06),
          0 0 0 1px rgba(10,42,94,.06);
  --sh-lg:0 4px 8px rgba(10,42,94,.04),0 16px 32px rgba(10,42,94,.07),
          0 32px 64px rgba(10,42,94,.05),0 0 0 1px rgba(10,42,94,.06);
  /* The action button is the one place depth is allowed to read. Inset top
     highlight is Plaid's move — it makes a filled button feel lit, not glossy. */
  --sh-cta:0 1px 2px rgba(4,18,42,.16),0 4px 12px rgba(6,27,62,.18),
           inset 0 1px 0 rgba(255,255,255,.13);
  --sh-cta-h:0 2px 4px rgba(4,18,42,.20),0 10px 24px rgba(6,27,62,.24),
             inset 0 1px 0 rgba(255,255,255,.16);
  --sh-nav:0 1px 0 rgba(16,24,32,.06),0 6px 24px -10px rgba(10,42,94,.22);

  /* Focus: a 3px tinted ring, not a hard outline. */
  --focus-green:0 0 0 3px rgba(18,135,76,.30);
  --focus-navy:0 0 0 3px rgba(27,75,150,.26);

  --pad-sec:104px;   /* major editorial sections */
  --pad-band:72px;   /* denser bands */
}

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

/* The UA rule for [hidden] is a bare attribute selector, so ANY class that
   sets display silently beats it. `.field{display:flex}` did exactly that, so
   the conditional construction / ARV fields the form JS hides with the hidden
   attribute stayed on screen for every applicant regardless of loan type.
   Keep this rule; it is load-bearing for the form logic. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
/* Display type is weight 500, not 700. The sampled Fortune 500 sites run their
   large headlines at 300-500 (JPM 64px/300, GS 80px/300, BlackRock 56px/400);
   700 at large sizes is the tell of a template. 700 is kept for small text. */
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:500;
  letter-spacing:-.019em;line-height:1.1;color:var(--navy);text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit;text-decoration:none}
strong,b{font-weight:700;color:var(--ink)}
::selection{background:var(--navy-100);color:var(--navy-d)}

.stat__n,.pcard__meta,.step__n,.scen__meta li,.promo__inner,.tkr__v{
  font-variant-numeric:lining-nums tabular-nums slashed-zero;
  font-feature-settings:"tnum" 1,"zero" 1;
}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.section{position:relative;padding-block:var(--pad-sec)}
.section--tint{background:var(--paper-2);border-block:1px solid var(--line-2)}

.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--green);color:#fff;
  padding:10px 16px;border-radius:var(--r-sm);font-weight:600}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- eyebrow ----------
   Goldman pairs a 16px/1px-tracked category label with its display line. The
   accent here is a thin green rule, not a dot: green stays a precision accent. */
.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy-l);margin:0 0 20px;
}
.eyebrow .dot{
  width:28px;height:2px;border-radius:var(--r-pill);background:var(--green);flex:0 0 28px;
}
.eyebrow--onnavy{color:rgba(255,255,255,.72)}
.eyebrow--onnavy .dot{background:var(--green-l)}

/* ---------- buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-size:15px;font-weight:700;letter-spacing:-.003em;
  padding:15px 26px;border:1px solid transparent;border-radius:var(--r-btn);cursor:pointer;
  background:var(--green);color:#fff;line-height:1.2;text-align:center;
  box-shadow:var(--sh-cta);
  transition:background var(--ti-ui),border-color var(--ti-ui),
             box-shadow var(--ti-ui),transform var(--ti-ui);
}
.btn:hover{background:var(--green-d);box-shadow:var(--sh-cta-h);transform:translateY(-1px)}
.btn:active{background:var(--green-d);box-shadow:var(--sh-cta);transform:translateY(0)}
.btn:focus-visible{outline:none;box-shadow:var(--sh-cta),var(--focus-green)}
.btn--sm{padding:11px 18px;font-size:14px}
.btn--lg{padding:17px 34px;font-size:16px}
.btn--full{width:100%}
.btn--primary{background:var(--green)}
.btn--primary:hover{background:var(--green-d)}

/* secondary: navy outline on white — the bank pattern */
.btn--ghost{
  background:transparent;color:var(--navy);border-color:var(--navy);
  box-shadow:var(--ring);font-weight:700;
}
.btn--ghost:hover{
  background:var(--navy);color:#fff;border-color:var(--navy);
  box-shadow:var(--sh-md);transform:translateY(-1px);
}
.btn--ghost:active{background:var(--navy-d);transform:translateY(0)}
.btn--ghost:focus-visible{outline:none;box-shadow:var(--ring),var(--focus-navy)}
/* ghost reversed out on a dark band — navy-tinted depth is invisible here,
   so elevation comes from the border brightening instead. */
.btn--onnavy{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);box-shadow:none}
.btn--onnavy:hover{background:#fff;color:var(--navy);border-color:#fff;transform:translateY(-1px)}
.btn--onnavy:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.34)}
.btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}

@media (prefers-reduced-motion:reduce){
  .btn,.btn--ghost,.btn--onnavy,.pcard,.scen{transition:none}
  .btn:hover,.btn--ghost:hover,.btn--onnavy:hover,.pcard:hover,.scen:hover{transform:none}
}
.btn svg{flex:0 0 auto}

.btn .spinner{
  display:none;width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:spin .7s linear infinite;
}
.btn.is-loading .btn__label{opacity:0}
.btn.is-loading .spinner{display:block;position:absolute;left:50%;top:50%;margin:-7.5px 0 0 -7.5px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- utility promo strip (bank "utility header") ---------- */
.promo{background:var(--navy-d);color:#fff;font-size:13px}
.promo__inner{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:38px;padding-block:8px;flex-wrap:wrap;
  color:rgba(255,255,255,.86);
}
.promo__inner b{color:#fff;font-weight:700}
.promo__sep{color:rgba(255,255,255,.34)}
.promo__sm-only{display:none}
.promo__link{
  color:#fff;font-weight:700;text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.45);text-underline-offset:3px;
}
.promo__link:hover{text-decoration-color:#fff}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:90;background:var(--paper);
  border-bottom:1px solid var(--line-2);
  transition:box-shadow var(--ti),border-color var(--ti);
}
.nav.is-stuck{box-shadow:var(--sh-nav);border-bottom-color:var(--line)}
.nav__prog{
  position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:var(--green);opacity:0;transition:opacity var(--ti);
}
.nav.is-stuck .nav__prog{opacity:1}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:68px}
.nav__logo{display:flex;align-items:center}
.nav__logo img{height:34px;width:auto}
.nav__right{display:flex;align-items:center;gap:16px}
.nav__tel{
  display:inline-flex;align-items:center;gap:8px;
  font-size:15px;font-weight:700;color:var(--navy);
  padding:8px 4px;transition:color var(--ti);
}
.nav__tel:hover{color:var(--navy-l)}
.nav__tel svg{color:var(--green)}

/* =====================================================================
   HERO — white, two columns, no text over photography
   ===================================================================== */
.hero{
  position:relative;background:var(--paper);
  padding-top:clamp(44px,5.4vw,84px);
  padding-bottom:clamp(44px,5.4vw,84px);
  border-bottom:1px solid var(--line-2);
  isolation:isolate;overflow:hidden;
}
/* Atmosphere, not decoration. A navy dot-grid at 3.5% plus a soft radial wash
   behind the card — Column runs a dotted-grid field behind its hero for the
   same reason: it keeps a white page from reading as an empty template.
   Both layers sit behind content via z-index and are pointer-transparent. */
.hero::before{
  content:"";position:absolute;inset:-1px 0 auto;height:74%;z-index:-2;
  background-image:radial-gradient(rgba(10,42,94,.13) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 48%,transparent 92%);
          mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 48%,transparent 92%);
  opacity:.28;pointer-events:none;
}
.hero::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  right:-14%;top:-30%;width:70%;height:130%;
  background:radial-gradient(46% 44% at 62% 42%,rgba(27,75,150,.10) 0%,
             rgba(27,75,150,.05) 42%,transparent 72%);
}
@media (max-width:900px){
  .hero::before{height:52%;opacity:.22}
  .hero::after{right:-40%;top:-16%;width:120%;height:60%}
}
/* Three areas, not two columns. The disclosure block is its own grid area so
   that on mobile the single-column stack orders copy -> ACTION -> fine print.
   Every sampled lender keeps licensing/exclusion copy out of the first
   viewport; stacking it inside .hero__copy promoted it above the CTA. */
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1fr) 436px;
  grid-template-areas:"copy card" "disc card";
  grid-template-rows:auto 1fr;
  column-gap:clamp(32px,4.6vw,76px);row-gap:0;align-items:start;
}
.hero__copy{padding-top:2px;grid-area:copy}

/* Program chips — fills the copy column now that the card carries a form,
   and pre-qualifies cold paid traffic before it reaches the dropdown. */
.hero__progs{margin-top:30px}
.hero__progs-h{
  font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 13px;
}
.hero__progs-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;max-width:520px;
}
.hero__progs-list li{
  font-size:13.5px;font-weight:500;color:var(--navy-d);
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:9px 12px;
  box-shadow:var(--sh-sm);
}
.card-wrap{grid-area:card}
/* align-self:end keeps the two hero columns terminating together. */
.hero__disclose{grid-area:disc;align-self:end;width:100%;max-width:620px}
.hero__disclose>.hero__where{margin-top:26px}
.hero__assure{
  list-style:none;margin:0;padding:20px 0 0;width:100%;
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 26px;
}
.hero__assure li{
  position:relative;font-size:12px;font-weight:700;letter-spacing:.075em;
  text-transform:uppercase;color:var(--ink-3);
}
.hero__assure li::before{
  content:'';display:inline-block;vertical-align:2px;
  width:12px;height:1px;margin-right:9px;background:var(--green);
}

/* 64px/500. Copy column held to ~620px inside a 1280px rail — the
   wide-shell / narrow-measure ratio every sampled institution uses. */
.hero__h1{
  font-size:clamp(36px,5vw,64px);font-weight:500;
  /* Tracking tightened to match current fintech display type: Column -.03em,
     Brex -.02em, Stripe -.02em, Plaid -.045em. */
  line-height:1.05;letter-spacing:-.032em;color:var(--navy);
  margin-bottom:22px;max-width:16.5em;
}
.hero__h1 .line{display:block;overflow:hidden}
.hero__h1 .line>span{display:block;text-wrap:balance}
.hero__h1 em{font-style:normal;color:var(--navy-l)}

.hero__sub{
  font-size:19px;line-height:1.6;color:var(--ink-2);
  max-width:44ch;margin-bottom:32px;
}
.hero__sub strong{color:var(--ink);font-weight:700}

/* Eligibility panel: a ruled editorial block, not a tinted rounded callout. */
.hero__where{
  margin:0 0 4px;padding:24px 0 0;max-width:52ch;
  border:0;border-top:1px solid var(--navy);background:none;
}
.hero__where-h{
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy);margin:0 0 12px;
}
.hero__where-p{font-size:15.5px;line-height:1.62;color:var(--ink-2);margin:0}
.hero__where-p strong{color:var(--navy);font-weight:700}
.hero__where-p--sm{
  margin-top:10px;padding-top:10px;border-top:1px solid var(--line-2);
  font-size:12.5px;color:var(--ink-2);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- quote card (hero right column) ---------- */
/* ── Calculator-first hero ───────────────────────────────────────────────
   The hero is now a single narrow column of copy; the calculator immediately
   below it is the fold. Padding is pulled in at both joins so the tool sits as
   high as possible without the copy feeling cramped. */
.hero--calc{padding-top:clamp(24px,2.5vw,36px);padding-bottom:clamp(14px,1.5vw,20px)}
.hero__intro{max-width:768px}
.hero--calc .hero__sub{margin-bottom:0;max-width:52ch}
.calc--lead{padding-top:clamp(12px,1.3vw,17px)}

/* On anything wider than the stack breakpoint the headline and the supporting
   line sit side by side, so the hero costs one text block of height instead of
   two and the calculator clears the fold. */
@media (min-width:901px){
  .hero--calc .hero__intro{
    max-width:none;display:grid;
    grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
    column-gap:clamp(28px,3.4vw,54px);align-items:end;
  }
  .hero--calc .eyebrow{grid-column:1/-1;margin-bottom:14px}
  /* Sized so each of the two sentences holds ONE line at every desktop width.
     At the shared 64px hero size they broke to four lines and opened a dead
     quadrant to the right of the headline. */
  .hero--calc .hero__h1{
    margin-bottom:0;max-width:none;
    font-size:clamp(32px,3.45vw,46px);letter-spacing:-.028em;line-height:1.08;
  }
  /* Two short text blocks of near-equal height, bottom-aligned, so the row
     closes cleanly instead of leaving a hole above the supporting line. */
  .hero--calc .hero__sub{padding-bottom:4px;font-size:17.5px;max-width:46ch}
}

/* ── Request section ─────────────────────────────────────────────────────
   Reuses the hero's two-column grid areas verbatim so the form card renders
   exactly as it did in the hero, including its responsive collapse. */
.formsec{background:var(--paper);border-top:1px solid var(--line-2)}
.formsec__grid{
  display:grid;grid-template-columns:minmax(0,1fr) 436px;
  grid-template-areas:"copy card" "disc card";
  grid-template-rows:auto 1fr;
  column-gap:clamp(32px,4.6vw,76px);row-gap:0;align-items:start;
}
.formsec__copy{grid-area:copy}
.formsec__copy .shead__h{margin-bottom:14px}
.formsec__copy .shead__p{max-width:52ch}
.formsec .hero__progs{margin-top:28px}
.formsec .hero__disclose{align-self:start;margin-top:30px;max-width:620px}

.card-wrap{position:relative}
.formcard{
  position:relative;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-lg);overflow:hidden;
}
.formcard__head{
  background:var(--navy);color:#fff;padding:26px 28px 24px;
}
.formcard__head h2{
  font-size:24px;font-weight:500;color:#fff;letter-spacing:-.018em;margin-bottom:9px;
}
.formcard__head p{font-size:14px;line-height:1.5;color:rgba(255,255,255,.8)}

.ctacard__list{list-style:none;margin:0;padding:22px 26px 6px;display:grid;gap:13px}
.ctacard__list li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:14.5px;line-height:1.48;color:var(--ink-2);
}
.ctacard__list li strong{color:var(--ink)}
.ctacard__list svg{
  flex:0 0 17px;width:17px;height:17px;margin-top:2px;
  fill:none;stroke:var(--green);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
}
.ctacard__cta{margin:18px 26px 10px;width:calc(100% - 52px)}
.ctacard__alt{margin:0 26px 20px;width:calc(100% - 52px)}

/* ---------- hero card carrying the request ---------- */

/* The promise, stated on the card itself so it is never more than one glance from
   the field the visitor is filling in. */
.formcard__head .herocard__promise{
  margin:0 0 13px;font-size:13px;font-weight:700;letter-spacing:-.005em;
  color:#fff;display:flex;align-items:center;gap:8px;line-height:1.4;
}
.herocard__promise::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--green-l);flex:0 0 6px;
}

/* ---------- 3-step progress ----------
   A filling track plus named steps. The names matter more than the bar: the third
   label reads "Your options", so the reward is visible from step 1 onward. */
.prog{margin:0 0 16px}
.prog__track{
  height:3px;border-radius:var(--r-pill);overflow:hidden;
  background:rgba(255,255,255,.2);
}
.prog__fill{
  display:block;height:100%;border-radius:var(--r-pill);
  background:var(--green-l);
  transition:width .45s var(--ease-out);
}
@media (prefers-reduced-motion:reduce){.prog__fill{transition:none}}

.prog__labels{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  list-style:none;margin:9px 0 0;padding:0;
}
.prog__labels li{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.42);transition:color .25s var(--ease-out);
}
.prog__labels li:nth-child(2){text-align:center}
.prog__labels li:last-child{text-align:right}
.prog__labels li.is-now{color:#fff}
.prog__labels li.is-done{color:var(--green-l)}

.formcard__head .prog__count{
  margin:9px 0 0;font-size:11.5px;font-weight:500;line-height:1.4;
  color:rgba(255,255,255,.6);letter-spacing:0;text-transform:none;
}

.herocard__form{padding:22px 26px 0}
.herocard__form .field:last-of-type{margin-bottom:20px}
.field__opt{font-weight:500;color:var(--ink-3);letter-spacing:0}
.herocard__cta{width:100%}
.herocard__next{
  font-size:12.5px;color:var(--ink-3);text-align:center;
  margin:10px 0 0;line-height:1.45;
}
/* The closing reassurance sits directly under the submit button, where the
   hesitation actually happens. */
.herocard__next--final{color:var(--green);font-weight:700}

.field__help{
  margin:7px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink-3);
}
/* The list is reinforcement under the action, never a barrier in front of it. */
.herocard__list{padding-top:20px}

.formcard__foot{
  display:flex;align-items:flex-start;gap:9px;
  padding:16px 26px;background:var(--paper-2);border-top:1px solid var(--line-2);
  font-size:12px;line-height:1.5;color:var(--ink-3);
}
.formcard__foot svg{
  flex:0 0 15px;width:15px;height:15px;margin-top:1px;
  fill:none;stroke:var(--ink-3);stroke-width:1.7;stroke-linecap:round;
}
.formcard__foot a{color:var(--navy-l);text-decoration:underline;text-underline-offset:2px}

/* =====================================================================
   PROOF STRIP — navy quantitative band directly under the hero.
   Research: 5/5 sampled bank/lender sites lead with large quantitative
   proof immediately after the hero, before any prose.
   ===================================================================== */
.stats{background:var(--navy);color:#fff;border-block:1px solid var(--navy-d)}
.stats__grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1px;padding-block:0;
}
.stat{
  display:flex;flex-direction:column;gap:12px;position:relative;
  padding:clamp(26px,3.2vw,42px) clamp(12px,1.8vw,26px);
}
.stat+.stat::before{
  content:'';position:absolute;left:0;top:24%;bottom:24%;width:1px;
  background:rgba(255,255,255,.17);
}
/* Sober proof band: 46px/500 numerals over 12px tracked labels, separated by
   1px rules. Not floating KPI bubbles — none of the sampled sites use those. */
.stat__n{
  font-size:clamp(27px,3.4vw,46px);font-weight:500;
  color:#fff;letter-spacing:-.026em;line-height:1.02;
  font-variant-numeric:tabular-nums;
}
.stat__u{font-size:.42em;font-weight:600;color:rgba(255,255,255,.62);letter-spacing:0}
.stat__l{
  font-size:12px;font-weight:600;letter-spacing:.085em;text-transform:uppercase;
  line-height:1.42;color:rgba(255,255,255,.66);
}
.statsnote{background:var(--paper-2);border-bottom:1px solid var(--line-2);
  padding-block:clamp(16px,2vw,22px)}
.stats__disc{
  margin:0;font-size:11.5px;line-height:1.55;
  color:var(--ink-3);max-width:none;
}

/* =====================================================================
   SECTION HEADS
   ===================================================================== */
/* Section heads at 46px/500 — deliberately larger than a SaaS section head and
   smaller than the H1, giving the ~1.4x ladder the sampled sites use. */
.shead{max-width:780px;margin-bottom:clamp(34px,4.4vw,60px)}
.shead__h{font-size:clamp(28px,3.7vw,46px);font-weight:500;letter-spacing:-.022em;
  line-height:1.1;margin-bottom:18px;max-width:19em}
.shead__p{font-size:18px;line-height:1.62;color:var(--ink-2);max-width:60ch}

/* =====================================================================
   PRODUCTS
   ===================================================================== */
.products{background:var(--paper)}
.cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,22px);
}
.pcard{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-sm);
  padding:30px 30px 28px;display:flex;flex-direction:column;
  transition:border-color var(--ti-ui),background var(--ti-ui),
             box-shadow var(--ti-ui),transform var(--ti-ui);
}
.pcard:hover{
  border-color:var(--navy-100);background:var(--paper);
  box-shadow:var(--sh-md);transform:translateY(-2px);
}
/* Icon sits in a quiet tinted chip — the fintech tell, kept to 8px and a
   050-tint so it reads as a system component, not decoration. */
.pcard__icon{
  width:40px;height:40px;border-radius:var(--r-sm);
  background:var(--navy-050);border:1px solid var(--navy-100);
  display:grid;place-items:center;margin-bottom:22px;
}
.pcard__icon svg{
  width:26px;height:26px;fill:none;stroke:var(--navy);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.pcard h3{font-size:21px;font-weight:500;margin-bottom:11px;letter-spacing:-.018em}
.pcard p{font-size:15.5px;line-height:1.6;color:var(--ink-2);margin-bottom:22px;flex:1}
.pcard__meta{
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--green);padding-top:16px;border-top:1px solid var(--line);
}
.products__disc{
  margin-top:clamp(22px,2.6vw,30px);font-size:11.5px;line-height:1.55;color:var(--ink-3);
}

/* =====================================================================
   FEES / COSTS  (moved up: pricing before process)
   ===================================================================== */
.fees{background:var(--paper-2);border-block:1px solid var(--line-2)}
.fees__grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(32px,4vw,64px);align-items:start;
}
/* Editorial figure with caption — fills the short left column beside the long
   fee list and gives the page a second, contained photograph. */
.fees__media{margin:40px 0 0;max-width:440px}
.fees__media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border:1px solid var(--line)}
.fees__media figcaption{
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.5;color:var(--ink-3);
}
.fees__list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.fees__list li{
  padding:24px 0;border-top:1px solid var(--line);
}
.fees__list li:last-child{border-bottom:1px solid var(--line)}
.fees__list h3{font-size:19px;font-weight:500;margin-bottom:9px;letter-spacing:-.016em}
.fees__list p{font-size:15.5px;line-height:1.62;color:var(--ink-2);max-width:62ch}

/* =====================================================================
   PROCESS
   ===================================================================== */
.process{background:var(--paper)}
.process__grid{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(32px,4vw,64px);align-items:start;
}
.process__sticky{position:sticky;top:96px}
.process__sticky .btn{margin-top:22px}

.steps{list-style:none;margin:0;padding:0;counter-reset:step}
/* Scoped to .steps: the apply form uses <fieldset class="step"> for its wizard
   panes, and unscoped .step rules were leaking a 56px indent onto the form. */
.steps .step{
  position:relative;padding:0 0 26px 56px;
}
.steps .step::before{
  content:'';position:absolute;left:17px;top:38px;bottom:0;width:1px;background:var(--line);
}
.steps .step:last-child{padding-bottom:0}
.steps .step:last-child::before{display:none}
.step__n{
  position:absolute;left:0;top:0;
  width:38px;height:38px;border-radius:var(--r-btn);
  box-shadow:var(--sh-sm);
  background:var(--navy);color:#fff;
  display:grid;place-items:center;
  font-size:14px;font-weight:500;letter-spacing:.01em;
}
.steps .step h3{font-size:20px;font-weight:500;margin-bottom:9px;letter-spacing:-.017em;padding-top:7px}
.steps .step p{font-size:15.5px;line-height:1.62;color:var(--ink-2);max-width:60ch}
.steps .step p a{color:var(--navy-l);text-decoration:underline;text-underline-offset:2px}
/* Form wizard panes — reset UA fieldset chrome. */
form fieldset.step{border:0;margin:0;padding:0;min-width:0}

/* =====================================================================
   ADVISOR — human help (research: 5/5 bank sites have this)
   ===================================================================== */
/* Full-bleed photographic band. Research finding #4/#5: photography is used as
   a STRUCTURAL PLANE (Wells 1400x548/651, Morgan 1127x632) and visual mass is
   alternated, not just background hex values. This is the page's anchor. */
.advisor{
  position:relative;isolation:isolate;
  background:var(--navy-d);color:#fff;
  padding-block:clamp(72px,8vw,132px);border-block:0;
}
.advisor__bg{
  position:absolute;inset:0;z-index:-2;overflow:hidden;
}
.advisor__bg img{
  width:100%;height:100%;object-fit:cover;object-position:center 62%;
}
/* Scrim: keeps the copy at AA contrast while the building stays legible right. */
.advisor::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(96deg,rgba(4,18,42,.96) 0%,rgba(4,18,42,.95) 40%,rgba(4,18,42,.92) 52%,
      rgba(4,18,42,.6) 72%,rgba(4,18,42,.44) 100%),
    linear-gradient(rgba(4,18,42,.3),rgba(4,18,42,.3));
}
.advisor__grid{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(28px,4vw,60px);align-items:center;
}
.advisor__copy{max-width:620px}
.advisor .eyebrow{color:rgba(255,255,255,.74)}
.advisor .eyebrow .dot{background:var(--green-l)}
.advisor h2{color:#fff;font-size:clamp(28px,3.7vw,46px);font-weight:500;
  letter-spacing:-.022em;line-height:1.1;margin-bottom:20px;max-width:17em}
.advisor__p{font-size:18px;line-height:1.62;color:rgba(255,255,255,.8);
  margin-bottom:30px;max-width:54ch}
.advisor__list{list-style:none;margin:0 0 34px;padding:0;display:block;width:100%}
.advisor__list li{
  display:flex;align-items:flex-start;gap:13px;width:100%;
  font-size:16px;line-height:1.5;color:rgba(255,255,255,.94);
  padding:14px 0;border-top:1px solid rgba(255,255,255,.24);
}
.advisor__list li:last-child{border-bottom:1px solid rgba(255,255,255,.24)}
.advisor__list svg{
  flex:0 0 17px;width:17px;height:17px;margin-top:3px;
  fill:none;stroke:var(--green-l);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
}
.advisor__cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.advisor__hours{
  font-size:13.5px;color:rgba(255,255,255,.66);margin-top:20px;line-height:1.55;max-width:56ch;
}
.advisor__hours a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.advisor__media{display:none}

/* =====================================================================
   PROOF / SCENARIOS
   ===================================================================== */
.proof{background:var(--paper-2);border-block:1px solid var(--line-2)}
.scens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,22px)}
.scen{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-sm);
  transition:box-shadow var(--ti-ui),transform var(--ti-ui),border-color var(--ti-ui);
  padding:28px 28px 26px;display:flex;flex-direction:column;
  border-top:2px solid var(--navy);
}
.scen__tag{
  display:inline-block;align-self:flex-start;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy-l);background:var(--navy-050);border:1px solid var(--navy-100);
  padding:5px 10px;border-radius:var(--r-pill);margin-bottom:16px;
}
/* Only the shadow and lift change on hover — border-color would clobber the
   2px navy accent on the top edge. */
.scen:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.scen h3{font-size:20px;font-weight:500;margin-bottom:12px;letter-spacing:-.018em;line-height:1.2}
.scen p{font-size:15.5px;line-height:1.6;color:var(--ink-2);margin-bottom:20px;flex:1}
.scen__meta{
  list-style:none;margin:0;padding-top:16px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:6px 16px;
}
.scen__meta li{
  font-size:12px;font-weight:600;color:var(--ink-2);letter-spacing:.03em;
  background:none;border:0;
  padding:0;border-radius:0;
}
.scen__meta li+li{position:relative;padding-left:16px}
.scen__meta li+li::before{content:'';position:absolute;left:0;top:50%;
  width:1px;height:11px;margin-top:-5.5px;background:var(--line)}

/* =====================================================================
   FAQ
   ===================================================================== */
.faq{background:var(--paper)}
.faq__list{max-width:none;border-top:1px solid var(--line)}
.faq__item summary>span{max-width:66ch}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:24px 2px;cursor:pointer;list-style:none;
  font-size:19px;font-weight:500;color:var(--navy);letter-spacing:-.016em;
  transition:color var(--ti);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--navy-l)}
.faq__item summary svg{
  flex:0 0 19px;width:19px;height:19px;fill:none;stroke:var(--ink-3);
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;
  transition:transform 200ms var(--ease-quad);
}
.faq__item[open] summary svg{transform:rotate(180deg)}
.faq__a{padding:0 2px 26px;max-width:70ch}
.faq__a p{font-size:16px;line-height:1.68;color:var(--ink-2)}
.faq__a a{color:var(--navy-l);text-decoration:underline;text-underline-offset:2px}
.faq__a code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:var(--paper-3);padding:1px 5px;border-radius:var(--r-xs);color:var(--ink)
}

/* =====================================================================
   TRUST BAND
   ===================================================================== */
.trust{background:var(--paper-2);border-block:1px solid var(--line-2);
  padding-block:clamp(30px,3.8vw,52px)}
.trust__row{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1px;
}
.trust__item{
  display:flex;align-items:flex-start;gap:11px;position:relative;
  padding:0 clamp(12px,1.8vw,26px);
}
.trust__item:first-child{padding-left:0}
.trust__item:last-child{padding-right:0}
.trust__item+.trust__item::before{
  content:'';position:absolute;left:0;top:2px;bottom:2px;width:1px;background:var(--line);
}
.trust__item svg{
  flex:0 0 19px;width:19px;height:19px;margin-top:1px;
  fill:none;stroke:var(--navy);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.trust__item span{font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.trust__item strong{display:block;color:var(--navy);font-weight:700;font-size:13px;margin-bottom:3px}

/* =====================================================================
   CLOSING CTA
   ===================================================================== */
/* Closing band is navy, not white — the third and final mass on the page,
   so the scroll ends on an institutional note instead of trailing off. */
.cta{background:var(--navy);color:#fff;text-align:center}
.cta__inner{max-width:760px;margin-inline:auto}
.cta .eyebrow{color:rgba(255,255,255,.7);justify-content:center}
.cta .eyebrow .dot{background:var(--green-l)}
.cta h2{font-size:clamp(30px,4.2vw,52px);font-weight:500;color:#fff;
  letter-spacing:-.024em;line-height:1.06;margin-bottom:20px}
.cta p{font-size:18px;line-height:1.62;color:rgba(255,255,255,.78);margin-bottom:36px;
  max-width:52ch;margin-inline:auto}
.cta__btns{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}

/* =====================================================================
   FOOTER
   ===================================================================== */
.foot{background:var(--navy-dd);color:rgba(255,255,255,.62);padding-block:clamp(40px,5vw,60px) 34px}
.foot__logo{height:30px;width:auto;margin-bottom:22px;opacity:.95}
.foot__disc{font-size:11.8px;line-height:1.62;color:rgba(255,255,255,.5);max-width:none}
.foot__disc strong{color:rgba(255,255,255,.8);font-weight:700}
.foot__disc a{color:rgba(255,255,255,.78);text-decoration:underline;text-underline-offset:2px}
.foot__row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);
  font-size:12.5px;
}
.foot__links{display:flex;gap:20px;flex-wrap:wrap}
.foot__links a{transition:color var(--ti)}
.foot__links a:hover{color:#fff}
.foot__contact{border-top-color:rgba(255,255,255,.07);margin-top:14px;padding-top:14px;
  font-size:12px;color:rgba(255,255,255,.45)}

/* =====================================================================
   MOBILE STICKY BAR
   ===================================================================== */
.mobar{
  position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;
  gap:10px;padding:10px 14px;
  background:rgba(255,255,255,.97);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform 260ms var(--ease-out);
}
.mobar.is-on{transform:translateY(0)}
.mobar__tel{
  display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  padding:14px 18px;border:1px solid var(--navy);border-radius:var(--r-sm);
  font-size:14.5px;font-weight:700;color:var(--navy);background:var(--paper);
}
.mobar__tel svg{color:var(--green)}

/* =====================================================================
   FORM  (apply page + shared)
   ===================================================================== */
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:17px;display:flex;flex-direction:column}
.field>label,.field__label{
  font-size:13.5px;font-weight:700;color:var(--navy);margin-bottom:7px;letter-spacing:-.004em;
}
.field input,.field select{
  font-family:var(--font-body);font-size:15.5px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:13px 14px;width:100%;
  transition:border-color var(--ti),box-shadow var(--ti);
  -webkit-appearance:none;appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23767E86' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:40px;
}
.field input::placeholder{color:#A3AAB1}
.field input,.field select{box-shadow:inset 0 1px 2px rgba(10,42,94,.05)}
.field input:focus,.field select:focus{
  outline:none;border-color:var(--navy-l);box-shadow:var(--focus-navy);
}
.field__hint{font-size:12px;line-height:1.45;color:var(--ink-3);margin-top:6px}

/* Answers carried over from the hero form on the landing page. */
.prefill-note{
  display:flex;align-items:flex-start;gap:9px;
  background:var(--green-050);border:1px solid var(--green-100);
  border-radius:var(--r-sm);padding:11px 13px;margin:0 0 18px;
  font-size:13px;line-height:1.45;color:var(--green-d);font-weight:500;
}
.prefill-note svg{flex:0 0 15px;margin-top:1px;color:var(--green-l)}
.field.is-prefilled>label::after{
  content:"✓";margin-left:7px;color:var(--green-l);font-weight:700;
}

.input-money{position:relative;display:flex;align-items:center}
.input-money__prefix{
  position:absolute;left:14px;font-size:15.5px;font-weight:600;color:var(--ink-3);pointer-events:none;
}
.input-money input{padding-left:30px}

.field.has-err input,.field.has-err select{border-color:#C2361F;box-shadow:0 0 0 3px rgba(194,54,31,.1)}
.err{
  display:none;font-size:12.5px;font-weight:600;color:#C2361F;margin-top:6px;
}
.field.has-err .err,.err.show{display:block}
.req{color:#C2361F;font-weight:700}

/* consent checkboxes */
.consent{
  display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  margin:4px 0 6px;
}
.consent input{position:absolute;opacity:0;width:1px;height:1px}
.consent .box{
  flex:0 0 20px;width:20px;height:20px;margin-top:1px;
  border:1.5px solid var(--line);border-radius:var(--r-xs);background:var(--paper);
  display:grid;place-items:center;transition:all var(--ti);
}
.consent .box svg{
  width:13px;height:13px;fill:none;stroke:#fff;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity var(--ti);
}
.consent input:checked+.box{background:var(--green);border-color:var(--green)}
.consent input:checked+.box svg{opacity:1}
.consent input:focus-visible+.box{outline:2px solid var(--navy-l);outline-offset:2px}
.consent__text{font-size:13.2px;line-height:1.55;color:var(--ink-2)}
.consent__text strong{color:var(--ink)}
.consent--bp{
  background:var(--paper-2);border:1px solid var(--line-2);
  border-radius:var(--r-md);padding:14px 15px;margin:16px 0 6px;
}
.consent-block{
  background:var(--paper-2);border:1px solid var(--line-2);
  border-radius:var(--r-md);padding:15px 15px 14px;margin:18px 0 4px;
}
.consent--tcpa{margin:0 0 10px}

/* scrollable terms window */
.terms-box{
  max-height:150px;overflow-y:auto;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:14px 15px;font-size:12.2px;line-height:1.62;color:var(--ink-2);
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.terms-box::-webkit-scrollbar{width:9px}
.terms-box::-webkit-scrollbar-track{background:var(--paper-2);border-radius:9px}
.terms-box::-webkit-scrollbar-thumb{background:#C2C9D0;border-radius:9px;border:2px solid var(--paper-2)}
.terms-box::-webkit-scrollbar-thumb:hover{background:#A8B0B8}
.terms-box p+p{margin-top:9px}
.terms-box strong{color:var(--ink)}
.terms-box a{color:var(--navy-l);text-decoration:underline;text-underline-offset:2px}
.terms-box:focus{outline:2px solid var(--navy-l);outline-offset:2px}
.terms-hint{font-size:11.5px;color:var(--ink-3);margin-top:7px;text-align:center}

/* stepper */
.stepper{
  list-style:none;margin:0 0 22px;padding:0 0 18px;
  display:flex;gap:10px;border-bottom:1px solid var(--line-2);
}
.stepper__step{display:flex;align-items:center;gap:9px;flex:1;opacity:.5;transition:opacity var(--ti)}
.stepper__step.is-active{opacity:1}
.stepper__num{
  flex:0 0 26px;width:26px;height:26px;border-radius:50%;
  background:var(--paper-3);color:var(--ink-3);
  display:grid;place-items:center;font-size:12.5px;font-weight:700;
  transition:all var(--ti);
}
.stepper__step.is-active .stepper__num{background:var(--navy);color:#fff}
.stepper__label{font-size:13.5px;font-weight:700;color:var(--navy)}

.step-nav{display:grid;grid-template-columns:auto 1fr;gap:12px;margin-top:20px}
.formcard__notice{
  display:flex;align-items:flex-start;gap:10px;
  background:var(--navy-050);border-bottom:1px solid var(--navy-100);
  padding:14px 26px;font-size:13px;line-height:1.5;color:var(--navy);
}
.formcard__notice svg{
  flex:0 0 17px;width:17px;height:17px;margin-top:1px;
  fill:none;stroke:var(--navy-l);stroke-width:1.8;stroke-linecap:round;
}
.formerr{
  margin-top:14px;padding:12px 14px;background:#FDF2F0;border:1px solid #F0C4BC;
  border-radius:var(--r-sm);font-size:13.5px;font-weight:600;color:#A32B17;
}

/* success */
.success{padding:44px 26px 40px;text-align:center}
.success__mark{width:62px;height:62px;margin:0 auto 20px}
.success__mark svg{width:100%;height:100%;fill:none;stroke:var(--green);
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.success h2{font-size:23px;margin-bottom:11px}
.success p{font-size:15px;line-height:1.6;color:var(--ink-2);margin-bottom:24px;max-width:44ch;
  margin-inline:auto}

/* =====================================================================
   APPLY + UTILITY PAGE SHELLS
   ===================================================================== */
.page-apply .nav,.page-utility .nav{border-bottom:1px solid var(--line)}
.page-apply .formcard,.page-utility .formcard{opacity:1;transform:none}

/* =====================================================================
   MOTION — reveals kept subtle and short (institutional restraint)
   ===================================================================== */
.reveal{opacity:0;transform:translateY(12px);
  transition:opacity 480ms var(--ease-out),transform 480ms var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.hfade{opacity:0;transform:translateY(9px);
  animation:hfade 620ms var(--ease-out) forwards}
.hfade--1{animation-delay:60ms}
.hfade--2{animation-delay:140ms}
.hfade--3{animation-delay:220ms}
@keyframes hfade{to{opacity:1;transform:none}}
html:not(.js) .reveal,html:not(.js) .hfade{opacity:1;transform:none;animation:none}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1080px){
  :root{--pad-sec:76px;--pad-band:56px}
  .hero__grid,.formsec__grid{grid-template-columns:minmax(0,1fr) 380px;gap:36px}
  .cards,.scens{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust__row{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  .trust__item{padding:0}
  .trust__item+.trust__item::before{display:none}
}

@media (max-width:900px){
  /* copy -> action -> fine print */
  .hero__grid,.formsec__grid{grid-template-columns:1fr;grid-template-areas:"copy" "card" "disc";
    grid-template-rows:auto auto auto;row-gap:22px}
  .hero__disclose{max-width:520px}
  .card-wrap{max-width:520px}
  .fees__grid,.process__grid,.advisor__grid{grid-template-columns:1fr;gap:30px}
  .process__sticky{position:static}
  .fees__media{max-width:520px;margin-top:30px}
  /* single-column band: darken the scrim evenly so copy stays legible */
  .advisor::after{background:linear-gradient(rgba(4,18,42,.9),rgba(4,18,42,.86))}
  .advisor__copy{max-width:none}
  .stats__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stat:nth-child(4)::before{display:none}
  .stat:nth-child(n+4){border-top:1px solid rgba(255,255,255,.15)}
  .stat:nth-child(5){grid-column:span 2}
}

@media (max-width:720px){
  :root{--pad-sec:48px}
  body{font-size:15.5px}
  .promo__inner{font-size:12px;justify-content:flex-start}
  .promo__hide-sm,.hide-sm{display:none}
  .nav__inner{min-height:60px}
  .nav__logo img{height:29px}
  .nav__tel span{display:none}
  .nav__tel{padding:9px;border:1px solid var(--line);border-radius:var(--r-sm)}

  .hero{padding-top:26px;padding-bottom:38px}
  .hero--calc{padding-bottom:16px}
  .hero--calc .hero__h1{margin-bottom:12px}
  .hero--calc .hero__sub{font-size:16.5px;line-height:1.55}
  /* Hidden on phones: the calculator is the fold now, and the same eight
     programs are the first thing the visitor reads inside the dropdown. */
  .hero__progs{display:none}
  .hero__h1{font-size:clamp(30px,8.6vw,38px);margin-bottom:16px;max-width:none}
  .hero__sub{font-size:17px;margin-bottom:0}   /* grid row-gap owns this space now */
  .hero__where{padding:20px 0 0}
  .hero__where-p{font-size:14.5px}
  .hero__assure{gap:8px 18px;padding-top:18px;margin-top:0}
  .hero__assure li{font-size:11px;letter-spacing:.06em}
  .promo__link{display:none}          /* one primary action above the fold, not three */
  .promo__sm-only{display:inline}     /* proof replaces the duplicate CTA */

  /* The card's DOM order is already head -> fields -> action, so no flex
     reordering is needed now that step 1 lives here. */
  /* Tuned so the whole of step 1 — all three fields AND the Continue button
     — clears a 390×844 fold. Every value here is paying for that. */
  .herocard__form{padding:14px 20px 0}
  .herocard__form .field{margin-bottom:11px}
  .herocard__form .field:last-of-type{margin-bottom:13px}
  .herocard__form .field input,.herocard__form .field select{padding:12px 13px}
  /* Restore the inset the "$" prefix sits in — the shorthand above wipes it. */
  .herocard__form .input-money input{padding-left:29px}
  .formcard__head .herocard__promise{font-size:12.5px;margin-bottom:11px}
  .prog{margin-bottom:14px}
  .prog__labels li{font-size:10px;letter-spacing:.04em}
  .formcard__head .prog__count{font-size:11px}
  .herocard__list{padding-top:16px}
  .herocard__next{font-size:12px}
  .eyebrow{margin-bottom:16px;font-size:11.5px}
  .eyebrow .dot{width:20px;flex:0 0 20px}

  .formcard__head{padding:18px 20px 16px}
  .formcard__head h2{font-size:19px}
  .ctacard__list{padding:18px 20px 4px;gap:11px}
  .ctacard__list li{font-size:14px}
  .ctacard__cta{margin:18px 20px 4px;width:calc(100% - 40px)}
  .ctacard__alt{margin:6px 20px 18px;width:calc(100% - 40px)}
  .ctacard__list{padding-bottom:2px}
  .formcard__foot{padding:14px 20px}

  .cards,.scens,.trust__row{grid-template-columns:1fr}
  .advisor__cta{display:grid;grid-template-columns:1fr;gap:10px}
  .advisor__cta .btn{width:100%}
  .cta__btns .btn{width:100%}
  .stats__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{padding:18px 16px}
  .stat:nth-child(odd)::before{display:none}
  .stat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.15)}
  .stat:nth-child(5){grid-column:span 2}
  .stat__n{font-size:27px}
  .stat__l{font-size:10.5px;letter-spacing:.06em}
  .stat{gap:8px}
  .shead__h{font-size:clamp(25px,7vw,32px);max-width:none}
  .shead__p{font-size:16.5px}
  .advisor h2,.cta h2{font-size:clamp(25px,7vw,32px);max-width:none}
  .advisor__p,.cta p{font-size:16.5px}
  .advisor__list li{font-size:15px}
  .faq__item summary{font-size:17px;padding:20px 2px}
  .pcard{padding:24px 22px 22px}
  .pcard h3{font-size:19px}
  .scen{padding:24px 22px}
  .steps .step{padding-left:48px;padding-bottom:22px}
  .steps .step__n{width:32px;height:32px;font-size:12px}
  .steps .step::before{left:15px;top:34px}
  .row{grid-template-columns:1fr;gap:0}
  .step-nav{grid-template-columns:1fr;gap:10px}
  .step-nav .btn--ghost{order:2}
  .mobar{display:flex}
  body{padding-bottom:0}
  .foot__row{flex-direction:column;align-items:flex-start;gap:12px}
  .foot__links{gap:14px}
}

@media (max-width:420px){
  .hero__h1{font-size:27px}
  .trust__item span{font-size:12px}
  .stepper__label{font-size:12.5px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .reveal,.hfade{opacity:1;transform:none}
}

/* =====================================================================
   Instant program match — the result panel that makes the hero's
   "Matched instantly." claim real. Occupies the same slot the step-1
   form vacates, so the card height barely changes and the CTA stays in
   the mobile fold. Green is reserved for the tick + button, per the
   navy-structure / green-action rule.
   ===================================================================== */
.imatch{padding:22px 26px 0;animation:imatchIn .28s var(--ease-ui) both}
@keyframes imatchIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.imatch__label{
  display:flex;align-items:center;gap:8px;margin:0 0 10px;
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--green);
}
.imatch__tick{
  flex:0 0 auto;width:16px;height:16px;border-radius:var(--r-pill);
  background:var(--green);position:relative;
}
.imatch__tick::after{
  content:"";position:absolute;left:4.5px;top:4.5px;width:7px;height:3.5px;
  border-left:1.75px solid #fff;border-bottom:1.75px solid #fff;
  transform:rotate(-45deg);
}

.imatch__prog{
  margin:0 0 8px;font-size:19px;line-height:1.25;font-weight:650;
  letter-spacing:-.01em;color:var(--navy);
}
.imatch__desc{margin:0 0 10px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.imatch__state{
  margin:0 0 16px;font-size:13px;font-weight:600;color:var(--ink-2);
  padding:8px 12px;background:var(--navy-050);
  border:1px solid var(--navy-100);border-radius:var(--r-sm);
}
.imatch__state:empty{display:none}

.imatch__cta{width:100%}
.imatch__disc{
  margin:12px 0 0;font-size:11.5px;line-height:1.5;color:var(--ink-3);
}

@media (max-width:520px){
  .imatch{padding:18px 20px 0}
  .imatch__prog{font-size:17.5px}
  .imatch__desc{font-size:13.5px}
}

/* ── Homepage lead form: in-page step 2 (2026-09-13) ──────────────────────
   The hero form now reveals contact fields under the program match instead of
   handing off to /apply/. Two spacing consequences:
   1. #heroStep2 butts directly against .imatch (which has padding-bottom:0),
      so the "First name" label collided with the routing disclaimer.
   2. The header is position:sticky, so scrolling the card into view after the
      step change hid its own heading behind the header. */
#lead-form{scroll-margin-top:84px}
/* General sibling, not adjacent: the match panel now stays visible through steps 2
   AND 3, so the separator has to apply to whichever step is currently showing. */
.imatch ~ .step{padding-top:18px;border-top:1px solid var(--line-2);margin-top:20px}
@media (max-width:720px){
  #lead-form{scroll-margin-top:72px}
  .imatch ~ .step{padding-top:16px;margin-top:18px}
}

/* Deal-size confirmation, appended to the match panel at step 3. */
.imatch__size{
  margin:0 0 10px;font-size:13.5px;font-weight:700;color:var(--green);
  display:flex;align-items:flex-start;gap:7px;line-height:1.45;
}
.imatch__size::before{
  content:"";flex:0 0 6px;width:6px;height:6px;border-radius:50%;
  background:var(--green);margin-top:6px;
}
.imatch__size[hidden]{display:none}