/* ==========================================================================
   Lendmax Capital — design system
   Brand: institutional navy #0B1A30 · maple crimson #E02B20 · signal sky #38BDF8
   ==========================================================================

   ONE PLACE. Every colour on every page of this site resolves through the
   custom properties below, which is why re-tinting the site is this block and
   not forty templates. A component that hard-codes a hex is a component that
   will still be the old brand after the next change — there are none, and new
   ones should not add any.
   ========================================================================== */

:root{
  /* --- navy: structure, headers, hero, high-contrast type --- */
  --navy:#0B1A30;
  --navy-700:#132747;
  --navy-500:#1E3A5F;
  --navy-deep:#050F1C;

  /* --- sky: the IntelliRate signal. Data, algorithmic features, live values.
         Deliberately NOT a call to action — that is the crimson below. --- */
  --sky:#38BDF8;
  --sky-300:#7DD3FC;
  --sky-050:#E0F2FE;
  --blue:#0369A1;          /* sky darkened until it passes AA on white */
  --blue-700:#075985;
  --blue-050:#E0F2FE;

  /* --- crimson: conversion only. Apply, Get my rate, Start.
         Isolated from informational UI on purpose: the moment it appears on a
         badge or a heading it stops meaning "press this". --- */
  --maple:#E02B20;
  --maple-700:#B91C1C;
  --maple-050:#FEF2F2;

  /* --- neutrals, biased a few degrees toward the navy --- */
  --paper:#FFFFFF;
  --mist:#F8FAFC;
  --mist-2:#F1F5F9;
  --line:#E2E8F0;
  --line-2:#CBD5E1;
  --text:#0F172A;
  --muted:#64748B;
  /* Not the #94A3B8 the palette suggests. That is 2.6:1 on white, and the
     places it is used — the rate footnote, the lender-mark notice, the LTV
     disclaimer — are the fine print, which is the last text on a mortgage site
     that should be the hardest to read. This clears AA on white and on mist. */
  --muted-2:#61708A;

  /* --- semantic, separate from the brand accents ---
     Two greens, and the split matters: #10B981 is bright enough to read as a
     tick at 16px and too light to read as text on white (2.5:1). The darker one
     is the only one allowed to carry words. */
  --pos:#047857;
  --pos-bright:#10B981;
  --pos-050:#ECFDF5;
  --warn:#8A5A00;
  --warn-050:#FDF3E0;

  --display:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --r-sm:4px; --r:8px; --r-lg:12px; --r-xl:16px; --r-2xl:24px; --r-full:999px;
  --sh-1:0 1px 3px 0 rgba(11,26,48,.05), 0 1px 2px -1px rgba(11,26,48,.05);
  --sh-2:0 4px 12px -2px rgba(11,26,48,.07), 0 2px 6px -2px rgba(11,26,48,.04);
  --sh-3:0 10px 25px -5px rgba(11,26,48,.08), 0 8px 10px -6px rgba(11,26,48,.04);
  --sh-4:0 20px 30px -10px rgba(11,26,48,.16);

  --wrap:1200px;
  --pad:clamp(16px,4.5vw,24px);
  --sec:clamp(48px,7vw,72px);

  /* Height of the fixed chrome, so scroll-padding and sticky offsets are one
     number rather than three that drift apart. */
  --chrome:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--chrome) + 16px)}
body{
  margin:0;font-family:var(--body);color:var(--text);background:var(--paper);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  font-variant-numeric:tabular-nums;
}
@media(max-width:640px){body{font-size:16px;line-height:1.6}}

img{max-width:100%;display:block;height:auto}
svg{max-width:100%;display:block;width:18px;height:18px;flex:0 0 auto}
a{color:var(--blue);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}

h1,h2,h3,h4,h5{font-family:var(--display);color:var(--navy);margin:0 0 .5em;letter-spacing:-.02em;line-height:1.2;font-weight:700}
h1{font-size:clamp(2rem,5.2vw,3rem);font-weight:800;letter-spacing:-.03em;line-height:1.12;text-wrap:balance}
h2{font-size:clamp(1.62rem,3.2vw,2.25rem);letter-spacing:-.025em;text-wrap:balance}
h3{font-size:clamp(1.1rem,1.7vw,1.35rem);letter-spacing:-.02em;font-weight:700}
h4{font-size:1.04rem;font-weight:600;letter-spacing:-.01em}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.15em;padding-left:1.2em}
li{margin-bottom:.45em}
strong{font-weight:600;color:var(--navy)}
.dark strong,.hero strong,.phero strong,.topbar strong,.ai-band strong,.calc-out strong,
.ctaband strong,.ftr strong,.case-bl strong,.mega-promo strong{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 18px;z-index:999}
.skip:focus{left:8px;top:8px}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.wrap-narrow{max-width:800px}
.sec{padding-block:var(--sec)}
.sec-sm{padding-block:clamp(38px,5vw,60px)}
.mist{background:var(--mist)}
.dark{background:var(--navy);color:#D5DFEC}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.dark a{color:var(--sky)}
.grid{display:grid;gap:clamp(16px,2.2vw,24px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--display);
  font-size:.73rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--blue);margin-bottom:14px
}
.eyebrow::before{content:"";width:20px;height:3px;background:var(--sky);border-radius:2px}
.dark .eyebrow{color:var(--sky)}
.lede{font-size:clamp(1.05rem,1.4vw,1.19rem);color:var(--muted);max-width:60ch;line-height:1.65}
.dark .lede{color:#AFC1D8}
.sec-head{max-width:720px;margin-bottom:clamp(28px,3.6vw,46px)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}

/* ---------- buttons ---------- */
/* RED IS APPLY. Nothing else on this site is red. */
.btn svg{width:17px;height:17px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:-.005em;
  padding:15px 26px;min-height:52px;border-radius:var(--r);border:2px solid transparent;
  cursor:pointer;transition:background .15s,color .15s,border-color .15s,box-shadow .15s,transform .15s;
  text-decoration:none!important;line-height:1.1;white-space:nowrap;text-align:center
}
.btn:hover{transform:translateY(-1px)}
.btn em{font-style:normal}
.btn-primary,.btn-accent{background:var(--maple);color:#fff;box-shadow:0 4px 14px rgba(216,30,39,.24)}
.btn-primary:hover,.btn-accent:hover{background:var(--maple-700);box-shadow:0 8px 22px rgba(216,30,39,.32)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-700)}
.btn-ghost{background:#fff;color:var(--navy);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--navy);background:var(--mist)}
.btn-onDark{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.btn-onDark:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn-lg{padding:17px 32px;min-height:58px;font-size:1.06rem}
.btn-sm{padding:10px 16px;min-height:42px;font-size:.9rem}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.btn-row.center{justify-content:center}
@media(max-width:640px){.btn-row .btn{width:100%}}

/* ---------- top bar ---------- */
.topbar{background:var(--navy-deep);color:#94A9C4;font-size:.78rem}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px;flex-wrap:wrap}
.topbar a{color:#E2E8F0;font-weight:600}
.topbar a:hover{color:#fff}
.tb-lic{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.tb-lic strong{color:#fff;font-weight:700}
.tb-lic svg{width:14px;height:14px;color:var(--sky);flex:0 0 14px}
.tb-sep{color:#475569}
.tb-phone{display:inline-flex;align-items:center;gap:7px}
.tb-phone svg{width:13px;height:13px;flex:0 0 13px}
.tb-hours{color:#7C90AB}
.tb-dot{width:6px;height:6px;border-radius:50%;background:var(--sky);box-shadow:0 0 0 0 rgba(56,189,248,.7);animation:pulse 2.6s infinite;flex:0 0 6px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(56,189,248,.5)}70%{box-shadow:0 0 0 8px rgba(56,189,248,0)}100%{box-shadow:0 0 0 0 rgba(56,189,248,0)}}
.tb-left{display:inline-flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.tb-enc{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;color:#B8C7DB}
.tb-enc svg{width:13px;height:13px;flex:0 0 13px;color:var(--sky)}
.tb-links{display:flex;gap:20px;align-items:center}
/* The licence numbers are the half that earns the bar its space, so on a phone
   the hours and the second link go and the licence stays. */
@media(max-width:900px){.tb-hours,.tb-enc,.tb-sep-wide{display:none}}
@media(max-width:560px){
  .topbar{font-size:.72rem}
  .topbar .wrap{justify-content:center;gap:10px;min-height:32px}
  .tb-lic{font-size:.72rem}
}
@media(prefers-reduced-motion:reduce){.tb-dot{animation:none}}

/* ---------- header / nav ---------- */
.hdr{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:clamp(12px,1.8vw,28px);min-height:var(--chrome)}
.logo{display:flex;align-items:center;text-decoration:none!important;flex:0 0 auto}
.logo img{height:38px;width:auto}
@media(max-width:640px){.logo img{height:32px}}
.logo-mark{width:34px;height:34px;flex:0 0 34px}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
@media(max-width:1100px){.nav{display:none}}
.nav-item{position:relative}
.nav-link{
  display:inline-flex;align-items:center;gap:6px;padding:10px 13px;border-radius:8px;
  font-family:var(--display);font-weight:500;font-size:.95rem;color:var(--navy);text-decoration:none!important;
  transition:background .14s,color .14s;background:none;border:0;cursor:pointer
}
.nav-link:hover,.nav-item:hover>.nav-link{background:var(--blue-050);color:var(--blue-700)}
.nav-link .chev{width:11px;height:11px;transition:transform .2s;opacity:.6}
.nav-item:hover .chev{transform:rotate(180deg)}
.nav-cta{margin-left:14px;gap:8px}
.nav-cta svg{width:15px;height:15px}
/* The round account button: the door back into an application already started.
   Same height as the CTA so the two read as one control group. */
.nav-account{
  width:42px;height:42px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;
  margin-left:8px;flex:0 0 42px;text-decoration:none!important;transition:background .15s,transform .15s
}
.nav-account svg{width:18px;height:18px}
.nav-account:hover{background:var(--navy-500);transform:translateY(-1px)}
.nav-phone{font-family:var(--display);font-weight:600;color:var(--navy);white-space:nowrap}

.mega{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(6px);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-4);
  padding:24px;opacity:0;visibility:hidden;transition:opacity .16s,transform .16s,visibility .16s
}
/* Hover is unchanged. `:focus-within` is added alongside it, not instead of
   it: without it the thirty-one links in these menus were reachable with a
   mouse and by nobody using a keyboard, because a hidden element cannot be
   tabbed into. Same menu, same trigger, one more way to open it. */
.nav-item:hover .mega,.mega:hover,.nav-item:focus-within .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega-wide{width:min(1080px,94vw);display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 230px;gap:24px}
.mega-narrow{width:320px}
.mega .menu-h,.mega h5{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-family:var(--display);font-weight:600;padding-bottom:9px;border-bottom:2px solid var(--sky-050)}
.mega ul{list-style:none;margin:0;padding:0}
.mega li{margin:0}
.mega li a{display:block;padding:8px 10px;border-radius:7px;color:var(--text);font-size:.92rem;text-decoration:none!important;transition:background .12s,color .12s}
.mega li a:hover{background:var(--blue-050);color:var(--blue-700)}
.mega li a.sub{padding-left:22px;font-size:.87rem;color:var(--muted)}
.mega-promo{background:var(--navy);border-radius:var(--r);padding:22px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.mega-promo p{font-size:.87rem;color:#AFC1D8;margin:0}
@media(max-width:1260px){.mega-wide{grid-template-columns:repeat(3,minmax(0,1fr));width:min(800px,94vw)}.mega-promo{display:none}}

/* burger + drawer */
.burger{display:none;margin-left:auto;background:none;border:2px solid var(--line-2);border-radius:9px;padding:11px 12px;cursor:pointer;min-height:46px}
.burger span{display:block;width:20px;height:2px;background:var(--navy);border-radius:2px;margin:4px 0}
@media(max-width:1100px){.burger{display:block}}
.drawer{position:fixed;inset:0;z-index:300;background:rgba(13,22,38,.55);opacity:0;visibility:hidden;transition:.2s}
.drawer.open{opacity:1;visibility:visible}
.drawer-panel{position:absolute;right:0;top:0;bottom:0;width:min(420px,92vw);background:#fff;overflow-y:auto;padding:20px 20px 40px;transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1)}
.drawer.open .drawer-panel{transform:none}
.drawer-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.drawer-close{background:none;border:0;font-size:1.9rem;line-height:1;cursor:pointer;color:var(--muted);padding:6px 10px;min-height:46px}
.acc-btn{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:0;border-top:1px solid var(--line);padding:17px 2px;font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--navy);cursor:pointer;text-align:left;min-height:56px}
.acc-btn .chev{width:13px;height:13px;transition:transform .2s;flex:0 0 13px;opacity:.6}
.acc-btn[aria-expanded=true] .chev{transform:rotate(180deg)}
.acc-panel{display:none;padding:0 0 14px}
.acc-panel.open{display:block}
.acc-panel a{display:block;padding:12px;border-radius:8px;color:var(--text);font-size:.97rem;text-decoration:none!important;min-height:46px}
.acc-panel a:active,.acc-panel a:hover{background:var(--mist)}
.acc-panel a.sub{padding-left:26px;font-size:.9rem;color:var(--muted)}
.acc-panel .menu-h,.acc-panel h5{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);margin:14px 0 4px;padding-left:12px;font-family:var(--display);font-weight:600}
.drawer-cta{margin-top:24px;display:grid;gap:10px}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;color:var(--text);
  padding-block:clamp(28px,4.5vw,64px);
  background:
    radial-gradient(900px 480px at 88% 0%, rgba(56,189,248,.16), transparent 62%),
    linear-gradient(180deg, #F3F6FA 0%, #F8FAFC 100%);
}
/* A single faint grid, fixed to the panel rather than the viewport, so the
   pale ground reads as a surface instead of a flat fill. Nothing animates: the
   hero has a working control in it and a moving background behind a slider is
   noise. */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(11,26,48,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(11,26,48,.045) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(80% 70% at 30% 20%,#000,transparent);
  mask-image:radial-gradient(80% 70% at 30% 20%,#000,transparent);
}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(24px,3.6vw,52px);align-items:start}
@media(max-width:1000px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:28px}}

.hero-pill{
  display:inline-flex;align-items:center;gap:9px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-full);box-shadow:var(--sh-1);
  padding:8px 15px;margin-bottom:22px;
  font-family:var(--display);font-size:.68rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--navy);line-height:1.35
}
.hero-pill svg{width:14px;height:14px;color:var(--maple);flex:0 0 14px}
.hero-pill-dot{width:5px;height:5px;border-radius:50%;background:var(--line-2);flex:0 0 5px}
.hero h1{color:var(--navy);max-width:14ch;font-size:clamp(2.15rem,5.6vw,3.4rem);margin-bottom:.42em}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero-sub{font-size:clamp(1rem,1.35vw,1.14rem);color:var(--muted);max-width:50ch;margin-bottom:26px;line-height:1.6}
.hero-sub em{font-style:normal;font-weight:600;color:var(--blue)}

/* The four promises. Two up on desktop and on a phone: at one-up they push the
   estimator below three screenfuls of scroll, which is where it stops being the
   thing the page is about. */
.hcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:20px}
.hcard{
  display:flex;gap:11px;align-items:flex-start;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 15px;box-shadow:var(--sh-1)
}
.hcard-ico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:0 0 30px;
  background:var(--sky-050);color:var(--blue)}
.hcard-ico.red{background:var(--maple-050);color:var(--maple)}
.hcard-ico.green{background:var(--pos-050);color:var(--pos)}
.hcard-ico svg{width:16px;height:16px}
.hcard b{display:block;font-family:var(--display);font-size:.86rem;font-weight:700;color:var(--navy);letter-spacing:-.012em;line-height:1.3}
.hcard b em{font-style:normal;color:var(--blue)}
.hcard span{display:block;font-size:.76rem;color:var(--muted);line-height:1.45;margin-top:3px}
@media(max-width:400px){.hcards{grid-template-columns:minmax(0,1fr)}}

/* The volume band. Navy on the pale hero so it is the one dark object in the
   left column — the eye lands on it after the cards, which is the order the
   argument runs in. */
.hero-vol{
  display:flex;align-items:center;gap:14px;background:var(--navy);color:#C8D6E8;
  border-radius:var(--r-lg);padding:14px 18px;box-shadow:var(--sh-2)
}
.hero-vol p{margin:0;font-size:.86rem;line-height:1.5;color:#C8D6E8}
.hero-vol strong{color:var(--sky);font-weight:700}
.hv-avs{display:inline-flex;flex:0 0 auto}
.hv-av{
  width:34px;height:34px;border-radius:50%;background:var(--navy-500);border:2px solid var(--navy);
  display:grid;place-items:center;font-family:var(--display);font-size:.66rem;font-weight:800;
  letter-spacing:.02em;color:#fff;margin-left:-9px
}
.hv-av:first-child{margin-left:0}
@media(max-width:400px){.hero-vol{flex-direction:column;align-items:flex-start;gap:10px}}

/* ---------- IntelliRate estimator ---------- */
.estimator{
  background:#fff;color:var(--text);border-radius:var(--r-xl);box-shadow:var(--sh-4);
  padding:clamp(18px,2.2vw,26px);border:1px solid var(--line)
}
.est-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:20px}
.est-title{display:flex;gap:11px;align-items:center;min-width:0}
.est-mark{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;flex:0 0 34px}
.est-mark svg{width:18px;height:18px}
.est-title b{display:block;font-family:var(--display);font-size:1.06rem;font-weight:800;
  color:var(--navy);letter-spacing:-.025em;line-height:1.25}
.est-title b em{font-style:normal;color:var(--blue)}
.est-title span{display:block;font-size:.78rem;color:var(--muted);margin-top:2px;line-height:1.4}
.est-live{display:inline-flex;align-items:center;gap:6px;background:var(--sky-050);color:var(--blue-700);
  border-radius:var(--r-full);padding:5px 11px;font-size:.66rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;flex:0 0 auto}

.est-field{margin-bottom:18px}
.est-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}
.est-row label{font-family:var(--display);font-size:.88rem;font-weight:700;color:var(--navy);letter-spacing:-.01em}
/* The amount is typed into, not just read. It is drawn as the bare figure it
   was before — the box only appears on hover and focus — so the card still
   reads as an instrument rather than a form, and a person who never notices it
   is editable loses nothing. */
.est-amt{display:inline-flex;align-items:baseline;gap:1px;font-family:var(--display);font-size:1.3rem;
  font-weight:800;color:var(--navy);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.est-cur{font-size:.92em}
.est-amt input{
  font:inherit;color:inherit;letter-spacing:inherit;font-variant-numeric:inherit;
  width:7.2ch;min-width:0;text-align:left;background:transparent;border:0;border-bottom:2px solid transparent;
  border-radius:4px 4px 0 0;padding:0 2px;margin:0;min-height:0;outline:none;
  transition:border-color .15s,background .15s
}
.est-amt input:hover{border-bottom-color:var(--line-2)}
.est-amt input:focus{border-bottom-color:var(--blue);background:var(--sky-050)}
.est-amt input:focus-visible{outline:none}
.est-amt input::selection{background:var(--sky-300)}
@media(pointer:coarse){.est-amt input{min-height:44px;padding-block:4px}}
.est-scale{display:flex;justify-content:space-between;font-size:.68rem;color:var(--muted-2);margin-top:7px;
  font-variant-numeric:tabular-nums}

/* One track, styled in both engines. The thumb is 24px because a slider you
   cannot catch with a thumb on a phone is a slider nobody moves. */
.est-field input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--sky-300) var(--fill,40%),var(--sky-050) var(--fill,40%));
  outline:none;cursor:pointer;margin:0
}
.est-field input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;
  background:var(--navy);border:3px solid #fff;box-shadow:var(--sh-2);cursor:grab
}
.est-field input[type=range]::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;background:var(--navy);border:3px solid #fff;
  box-shadow:var(--sh-2);cursor:grab;border-color:#fff
}
.est-field input[type=range]:focus-visible{outline:3px solid var(--blue);outline-offset:4px}

.est-out{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;background:var(--mist);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:13px 16px;margin-bottom:14px}
@media(max-width:520px){.est-out{grid-template-columns:minmax(0,1fr)}}
.est-out .k{display:block;font-family:var(--display);font-size:.63rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2);margin-bottom:4px}
.est-ltv b{font-family:var(--display);font-size:1.8rem;font-weight:800;color:var(--navy);
  letter-spacing:-.035em;line-height:1;display:block;font-variant-numeric:tabular-nums}
.est-band{display:block;font-size:.7rem;color:var(--muted);margin-top:5px;line-height:1.3;white-space:nowrap}
.tierset{display:flex;gap:5px;flex-wrap:wrap}
.tier{
  font-family:var(--display);font-size:.76rem;font-weight:700;padding:7px 11px;min-height:34px;
  border:1px solid var(--line-2);background:#fff;color:var(--muted);border-radius:var(--r-sm);cursor:pointer;
  transition:background .15s,color .15s,border-color .15s
}
.tier:hover{border-color:var(--blue);color:var(--blue)}
.tier.is-on{background:var(--navy);border-color:var(--navy);color:#fff}
.est-route{display:block;font-size:.7rem;color:var(--muted);margin-top:6px;line-height:1.35}

.est-foot{background:var(--navy);border-radius:var(--r-lg);padding:14px}
/* The exemption note sits in its own lighter panel inside the dark one, the
   way the mockup draws it, so it reads as a fact beside the button and not as
   the button's caption. */
.est-osfi{display:flex;gap:9px;align-items:flex-start;font-size:.74rem;color:#B6C8DE;line-height:1.5;margin:0 0 12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-radius:var(--r);padding:10px 12px}
.est-osfi span{min-width:0}
.est-osfi b{color:#fff}
.est-osfi svg{width:16px;height:16px;color:var(--sky);flex:0 0 16px;margin-top:1px}
.est-badges{display:flex;justify-content:space-between;gap:8px;margin-top:12px;flex-wrap:wrap}
.est-badges span{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;color:#93A9C4;font-weight:500}
.est-badges svg{width:13px;height:13px;color:var(--pos-bright);flex:0 0 13px}
.est-fine{font-size:.68rem;color:var(--muted-2);margin:12px 0 0;line-height:1.5}

/* ---------- benchmark band ---------- */
.bench{background:var(--navy);color:#C3D2E6;padding-block:clamp(24px,3vw,34px)}
.bench-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:16px}
.bench-head h2{color:#fff;font-size:.82rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  margin:0;display:inline-flex;align-items:center;gap:9px}
.bench-head h2 svg{width:16px;height:16px;color:var(--sky);flex:0 0 16px}
.bench-head p{font-size:.75rem;color:#7C90AB;margin:0;max-width:62ch}
.bench-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.bench-cell{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-lg);padding:13px 15px}
.bench-k{display:block;font-size:.71rem;color:#93A9C4;margin-bottom:5px;font-weight:500}
.bench-v{font-family:var(--display);font-size:1.68rem;font-weight:800;color:#fff;letter-spacing:-.035em;
  line-height:1;display:flex;align-items:baseline;gap:2px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.bench-pct{font-size:.62em;font-weight:700}
.bench-tag{font-family:var(--body);font-size:.63rem;font-weight:700;letter-spacing:.02em;margin-left:5px;
  white-space:nowrap}
.bench-tag.pos{color:var(--pos-bright)}
.bench-tag.sky{color:var(--sky)}
.bench-note{display:block;font-size:.7rem;color:#7C90AB;margin-top:6px}
@media(max-width:1000px){.bench-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:380px){.bench-grid{grid-template-columns:minmax(0,1fr)}}

.pillar{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(20px,2.2vw,26px);transition:border-color .18s,box-shadow .18s,transform .18s;
  display:flex;flex-direction:column;height:100%;text-decoration:none!important;color:inherit;overflow:hidden
}
.pillar::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--sky);transform:scaleX(0);transform-origin:left;transition:transform .22s}
.pillar:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--line-2)}
.pillar:hover::before{transform:scaleX(1)}
.pillar-num{font-family:var(--display);font-size:.75rem;font-weight:700;letter-spacing:.1em;color:var(--blue);margin-bottom:12px}
.pillar-ico{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;margin-bottom:16px;background:var(--sky-050);color:var(--blue-700)}
.pillar-ico svg{width:23px;height:23px}
.pillar.a .pillar-ico{background:var(--blue-050);color:var(--blue-700)}
.pillar.b .pillar-ico{background:var(--navy);color:var(--sky)}
.pillar.c .pillar-ico{background:var(--sky);color:var(--navy)}
.pillar-tag{display:block;font-family:var(--display);font-size:.63rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--maple);margin-bottom:8px}
.pillar.a .pillar-tag{color:var(--pos)}
.pillar.b .pillar-tag{color:var(--blue-700)}
.pillar.c .pillar-tag{color:var(--navy-500)}
.pillar h3{margin-bottom:.4em}
.pillar p{color:var(--muted);font-size:.95rem;margin-bottom:16px;flex:1}
.pillar-stat{display:flex;flex-direction:column;gap:2px;padding:13px 15px;background:var(--mist);border-left:3px solid var(--sky);border-radius:0 var(--r-sm) var(--r-sm) 0;margin-bottom:16px}
.pillar-stat b{font-family:var(--display);font-size:1.28rem;font-weight:700;color:var(--navy);letter-spacing:-.025em}
.pillar-stat span{font-size:.79rem;color:var(--muted);line-height:1.4}
.pillar-link{font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--blue);display:inline-flex;align-items:center;gap:7px;margin-top:auto}
.pillar:hover .pillar-link{gap:11px}
.pillar-link svg{width:15px;height:15px;transition:transform .2s}

/* ---------- steps ---------- */
.steps{display:grid;gap:0}
.step{position:relative;display:grid;grid-template-columns:76px 1fr;gap:clamp(14px,2.2vw,28px);padding:clamp(22px,2.8vw,32px) 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step-n{font-family:var(--display);font-size:clamp(2.4rem,4.6vw,3.2rem);font-weight:700;letter-spacing:-.05em;line-height:1;color:var(--sky)}
.step-b h3{margin-bottom:.3em}
.step-b p{color:var(--muted);margin-bottom:0;max-width:66ch}
@media(max-width:640px){.step{grid-template-columns:minmax(0,1fr);gap:4px}.step-n{font-size:2.1rem}}

/* ---------- feature grid ---------- */
.feat{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,2.2vw,26px);height:100%;transition:border-color .18s,box-shadow .18s}
.feat:hover{border-color:var(--sky);box-shadow:var(--sh-2)}
.feat-ico{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;background:var(--sky-050);color:var(--blue-700);margin-bottom:15px}
.feat-ico svg{width:22px;height:22px}
.feat h3{font-size:1.08rem;margin-bottom:.35em}
.feat p{color:var(--muted);font-size:.93rem;margin:0}
.dark .feat{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.11)}
.dark .feat p{color:#AFC1D8}
.dark .feat-ico{background:rgba(115,194,251,.14);color:var(--sky)}

/* ---------- AI band ---------- */
.ai-band{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.ai-band::before{content:"";position:absolute;left:-10%;top:-30%;width:min(560px,60vw);aspect-ratio:1;background:var(--sky);opacity:.05;clip-path:polygon(50% 0%,100% 31%,100% 100%,50% 69%,0% 100%,0% 31%)}
.ai-band .wrap{position:relative;z-index:2}
.ai-band h1,.ai-band h2,.ai-band h3,.ai-band h4,.ai-band h5{color:#fff}
.ai-band .lede,.ai-band p{color:#AFC1D8}
.ai-band .eyebrow{color:var(--sky)}
.ai-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,3.6vw,52px);align-items:center}
@media(max-width:900px){.ai-grid{grid-template-columns:minmax(0,1fr)}}
.ai-list{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.ai-list li{display:grid;grid-template-columns:32px 1fr;gap:14px;align-items:start;margin:0}
.ai-chk{width:28px;height:28px;border-radius:8px;background:rgba(115,194,251,.15);border:1px solid rgba(115,194,251,.35);display:grid;place-items:center;color:var(--sky)}
.ai-chk svg{width:15px;height:15px}
.ai-list b{display:block;font-family:var(--display);font-weight:600;color:#fff;margin-bottom:3px}
.ai-list span{color:#AFC1D8;font-size:.93rem}
.ai-panel{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);padding:clamp(20px,2.6vw,30px)}
.ai-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.ai-row:last-child{border-bottom:0}
.ai-row .lab{font-size:.9rem;color:#B6C8DE}
.ai-row .val{font-family:var(--display);font-weight:600;font-size:1rem;color:#fff}
.ai-row .val.good{color:var(--sky)}
.ai-meter{height:6px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:8px}
.ai-meter i{display:block;height:100%;border-radius:99px;background:var(--sky)}

/* ---------- lender strip ---------- */
.lenders{background:var(--mist);border-block:1px solid var(--line);padding-block:clamp(40px,5.5vw,64px)}
.lenders-head{text-align:center;margin-bottom:26px;max-width:720px;margin-inline:auto}
.lenders-head .eyebrow{justify-content:center}
.lenders-head h2{margin-bottom:.5em}
.lenders-head p{font-size:.95rem;color:var(--muted);margin:0}
.lenders-foot{text-align:center;margin-top:22px}
.lenders-foot p{font-size:.72rem;color:var(--muted-2);margin:0;max-width:76ch;margin-inline:auto;line-height:1.55}
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
/* site.js clones the track, so translating -50% lands exactly on the copy and
   the loop has no seam. */
.marquee-track{display:flex;gap:12px;width:max-content;animation:slide 64s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.lender-chip{
  display:grid;place-items:center;min-width:158px;height:74px;padding:0 20px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);flex:0 0 auto;box-shadow:var(--sh-1)
}
/* Real artwork now, at wildly different aspect ratios — a square MIC crest next
   to a 7:1 bank wordmark. The tile sets the box and the image fits inside it.
   Held back to 80% opacity so forty logos support the page rather than compete
   with it; full strength on hover, and full strength for anyone who has asked
   for reduced motion, since they get a static grid rather than a marquee. */
.lender-chip img{
  max-width:100%;max-height:38px;width:auto;height:auto;object-fit:contain;
  opacity:.8;transition:opacity .2s,transform .2s
}
.lender-chip:hover img{opacity:1;transform:scale(1.04)}
@media(max-width:640px){
  .lender-chip{min-width:126px;height:62px;padding:0 14px}
  .lender-chip img{max-height:30px}
}
@media(prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .lender-chip img{opacity:1}
  /* Without the animation the second pass is a duplicate on screen, not a loop. */
  .marquee-track .lender-chip[aria-hidden="true"]{display:none}
}

/* ---------- lead form ---------- */
.leadform{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:clamp(20px,2.4vw,28px);border-top:5px solid var(--maple)}
.lf-head{margin-bottom:18px}
.lf-head h2,.lf-head h3{font-size:1.28rem;margin-bottom:.3em;letter-spacing:-.025em}
.lf-head p{font-size:.9rem;color:var(--muted);margin:0}
.lf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:640px){.lf-grid{grid-template-columns:minmax(0,1fr)}}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--display);font-size:.79rem;font-weight:600;color:var(--navy)}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:1rem;color:var(--text);padding:13px 14px;min-height:50px;
  border:1.5px solid var(--line-2);border-radius:var(--r-sm);background:#fff;transition:border-color .14s,box-shadow .14s;width:100%
}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(20,88,159,.14)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5L6 8.5L10 4.5' stroke='%2354617A' stroke-width='1.7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:12px;padding-right:36px}
.lf-submit{margin-top:16px}
.lf-fine{font-size:.75rem;color:var(--muted-2);margin:12px 0 0;line-height:1.5}
.lf-trust{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:15px;padding-top:15px;border-top:1px solid var(--line)}
.lf-trust span{display:inline-flex;align-items:center;gap:6px;font-size:.79rem;color:var(--muted);font-weight:600}
.lf-trust svg{width:14px;height:14px;color:var(--pos)}

/* ---------- sub-page hero ---------- */
.phero{background:var(--navy);color:#fff;padding-block:clamp(28px,4vw,48px) clamp(40px,5.4vw,72px);position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;inset:0;background:linear-gradient(170deg,rgba(20,88,159,.42),rgba(22,34,56,0) 62%)}
.phero::after{content:"";position:absolute;right:-4%;bottom:-40%;width:min(500px,60vw);aspect-ratio:1;background:var(--sky);opacity:.05;clip-path:polygon(50% 0%,100% 31%,100% 100%,50% 69%,0% 100%,0% 31%)}
.phero .wrap{position:relative;z-index:2}
.phero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(26px,3.6vw,52px);align-items:start}
@media(max-width:900px){.phero-grid{grid-template-columns:minmax(0,1fr);gap:30px}}
.phero h1{color:#fff;margin-bottom:.35em}
.phero-sub{font-size:clamp(1.02rem,1.4vw,1.14rem);color:#B6C8DE;max-width:54ch;margin-bottom:22px}
.phero-ul{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:11px}
.phero-ul li{display:grid;grid-template-columns:23px 1fr;gap:11px;align-items:start;color:#D5DFEC;font-size:.97rem;margin:0}
.phero-ul svg{width:19px;height:19px;color:var(--sky);margin-top:2px}
.crumbs{font-size:.83rem;color:#8FA4BF;margin-bottom:16px}
.crumbs a{color:#B6C8DE;text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs span{margin:0 7px;opacity:.5}

/* ---------- prose ---------- */
.prose{max-width:none;font-size:1.04rem}
.prose h2{margin-top:0;padding-top:.15em}
.prose h3{margin-top:1.7em}
.prose p,.prose li{color:#2C3A50}
.prose p{max-width:70ch}
.prose>section{padding-block:clamp(28px,3.4vw,44px);border-top:1px solid var(--line)}
.prose>section:first-child{border-top:0;padding-top:0}
.callout{background:var(--sky-050);border:1px solid #CBE5FA;border-left:4px solid var(--sky);border-radius:0 var(--r) var(--r) 0;padding:18px 22px;margin:24px 0}
.callout p:last-child{margin-bottom:0}
.callout.warn{background:var(--warn-050);border-color:#F0DDB5;border-left-color:#D79B22}
.callout.good{background:var(--pos-050);border-color:#BCE3D4;border-left-color:var(--pos)}
.callout b{font-family:var(--display);font-weight:600}
.tbl-wrap{overflow-x:auto;margin:22px 0;border:1px solid var(--line);border-radius:var(--r);-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.94rem;min-width:520px}
th,td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--line)}
th{background:var(--mist);font-family:var(--display);font-weight:600;color:var(--navy);font-size:.8rem;letter-spacing:.04em;text-transform:uppercase}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:#FAFCFE}
.ticks{list-style:none;padding:0;display:grid;gap:11px}
.ticks li{display:grid;grid-template-columns:23px 1fr;gap:12px;align-items:start;margin:0}
.ticks li svg{width:19px;height:19px;color:var(--pos);margin-top:3px}

/* ---------- symptom cards ---------- */
.sym{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:19px 21px;height:100%;border-left:3px solid var(--sky)}
.sym h3{margin-bottom:.3em;font-size:1rem}
.sym p{margin:0;font-size:.92rem;color:var(--muted)}

/* ---------- case scenarios ---------- */
.case{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;height:100%;display:flex;flex-direction:column}
.case-top{padding:20px 22px 16px;border-bottom:1px solid var(--line)}
.case-who{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.case-av{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:1rem;color:#fff;background:var(--navy);flex:0 0 42px}
.case-name{font-family:var(--display);font-weight:600;color:var(--navy);line-height:1.2}
.case-city{font-size:.8rem;color:var(--muted)}
.case-top h3{font-size:1.03rem;margin-bottom:.35em}
.case-top p{font-size:.91rem;color:var(--muted);margin:0}
.case-ba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line)}
.case-col{background:#fff;padding:17px 20px}
.case-col.after{background:var(--sky-050)}
.case-col .col-h,.case-col h5{font-family:var(--display);font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);margin:0 0 12px}
.case-col.after .col-h,.case-col.after h5{color:var(--blue-700)}
.case-col dl{margin:0;display:grid;gap:9px}
.case-col .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1px 10px;align-items:baseline;font-size:.86rem}
.case-col .row dt{color:var(--muted);flex:1 1 46%;min-width:0}
.case-col .row dd{margin:0;font-family:var(--display);font-weight:600;color:var(--navy);text-align:right;flex:0 1 auto;max-width:100%;overflow-wrap:anywhere}
.case-col.after .row dd{color:var(--blue-700)}
.case-out{padding:17px 22px;flex:1}
.case-out p{font-size:.91rem;color:var(--muted);margin:0}
.case-bl{margin:0;padding:15px 22px;background:var(--navy);color:#fff;font-family:var(--display);font-weight:600;font-size:.94rem;display:flex;align-items:center;gap:10px}
.case-bl svg{width:17px;height:17px;color:var(--sky);flex:0 0 17px}
@media(max-width:640px){.case-ba{grid-template-columns:minmax(0,1fr)}}
.case-note{font-size:.78rem;color:var(--muted-2);margin-top:18px;max-width:80ch}

/* ---------- pros ---------- */
.pro{display:grid;grid-template-columns:50px 1fr;gap:16px;align-items:start}
.pro-ico{width:50px;height:50px;border-radius:12px;background:var(--sky-050);color:var(--blue-700);display:grid;place-items:center}
.pro-ico svg{width:24px;height:24px}
.pro h3{font-size:1.05rem;margin-bottom:.28em}
.pro p{margin:0;color:var(--muted);font-size:.94rem}

/* ---------- 4-step process ---------- */
.proc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
@media(max-width:900px){.proc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.proc{grid-template-columns:minmax(0,1fr)}}
.proc-item{position:relative;padding:clamp(22px,2.6vw,30px);background:#fff}
.proc-n{width:40px;height:40px;border-radius:10px;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:.95rem;margin-bottom:16px}
.proc-item:nth-child(2) .proc-n{background:var(--blue)}
.proc-item:nth-child(3) .proc-n{background:var(--sky);color:var(--navy)}
.proc-item:nth-child(4) .proc-n{background:var(--maple)}
.proc-item h3{font-size:1.06rem;margin-bottom:.35em}
.proc-item p{margin:0;font-size:.92rem;color:var(--muted)}

/* ---------- reviews ---------- */
.revw{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;min-width:min(360px,86vw);max-width:360px;flex:0 0 auto;scroll-snap-align:start}
.revw h3{font-size:1.05rem}
.revw-top{display:flex;align-items:center;gap:12px;margin-bottom:13px}
.revw-av{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;font-family:var(--display);font-weight:600;color:#fff;background:var(--navy-500);flex:0 0 42px}
.revw-name{font-family:var(--display);font-weight:600;color:var(--navy);line-height:1.2}
.revw-meta{font-size:.78rem;color:var(--muted)}
.stars{display:flex;gap:2px;margin-bottom:10px}
.stars svg{width:16px;height:16px;color:#F5A623}
.revw p{font-size:.93rem;color:#33445C;margin:0}
.revw-g{display:flex;align-items:center;gap:6px;margin-top:15px;padding-top:14px;border-top:1px solid var(--line);font-size:.77rem;color:var(--muted-2)}
.revw-g svg{width:15px;height:15px}
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 18px;scrollbar-width:thin}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
.rail-nav{display:flex;gap:9px;justify-content:flex-end;margin-bottom:12px}
.rail-btn{width:46px;height:46px;border-radius:10px;border:1.5px solid var(--line-2);background:#fff;cursor:pointer;display:grid;place-items:center;color:var(--navy);transition:.14s}
.rail-btn:hover{border-color:var(--blue);color:var(--blue)}
.rail-btn svg{width:17px;height:17px}
.gsum{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.gsum-score{font-family:var(--display);font-size:2.5rem;font-weight:700;letter-spacing:-.04em;color:var(--navy);line-height:1}

/* ---------- calculator buttons ---------- */
.calcbtn{
  display:flex;flex-direction:column;gap:9px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px;text-decoration:none!important;color:inherit;transition:border-color .18s,box-shadow .18s,transform .18s;height:100%
}
.calcbtn:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--sky)}
.calcbtn-ico{width:44px;height:44px;border-radius:11px;background:var(--sky-050);color:var(--blue-700);display:grid;place-items:center}
.calcbtn-ico svg{width:22px;height:22px}
.calcbtn b{font-family:var(--display);font-size:1.02rem;font-weight:600;color:var(--navy);letter-spacing:-.015em}
.calcbtn span{font-size:.87rem;color:var(--muted)}

/* ---------- calculator UI ---------- */
.calc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.6vw,32px);align-items:start}
@media(max-width:900px){.calc{grid-template-columns:minmax(0,1fr)}}
.calc-in{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,2.4vw,28px);box-shadow:var(--sh-1)}
.calc-in h2{font-size:1.22rem}
.calc-out{background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:clamp(20px,2.6vw,30px);position:sticky;top:92px;border-top:5px solid var(--sky)}
@media(max-width:900px){.calc-out{position:static}}
.calc-out h2,.calc-out h3{color:#fff}
.calc-hero{font-family:var(--display);font-size:clamp(2.2rem,4.8vw,3rem);font-weight:700;letter-spacing:-.04em;line-height:1;margin:6px 0 4px;color:var(--sky)}
.calc-hero-sub{color:#AFC1D8;font-size:.9rem;margin-bottom:20px}
.calc-rows{display:grid;gap:0;margin-bottom:20px}
.calc-row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.09);font-size:.92rem}
.calc-row:last-child{border-bottom:0}
.calc-row .k{color:#B6C8DE}
.calc-row .v{font-family:var(--display);font-weight:600;color:#fff}
.calc-row.hl .v{color:var(--sky)}
.calc-note{font-size:.76rem;color:#8FA4BF;margin-top:16px;line-height:1.55}
.range-wrap{display:flex;align-items:center;gap:12px}
/* Range sliders. The track is drawn on the pseudo-element, not the input, so
   the control keeps a 44px touch area without the field styling above turning
   it into a thick grey pill. */
input[type=range]{
  width:100%;-webkit-appearance:none;appearance:none;background:transparent;
  outline:0;margin:0;padding:0;height:44px;min-height:44px;cursor:pointer
}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:var(--line-2)}
input[type=range]::-moz-range-track{height:6px;border-radius:99px;background:var(--line-2)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:26px;height:26px;margin-top:-10px;border-radius:50%;
  background:var(--blue);border:4px solid #fff;box-shadow:var(--sh-2);cursor:pointer
}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--blue);border:4px solid #fff;box-shadow:var(--sh-2);cursor:pointer}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(20,88,159,.28)}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{flex:1;min-width:80px;min-height:46px;padding:10px 8px;border:1.5px solid var(--line-2);background:#fff;border-radius:var(--r-sm);font-family:var(--display);font-weight:600;font-size:.85rem;color:var(--navy-500);cursor:pointer;transition:.14s}
.seg button[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.seg-label{font-family:var(--display);font-size:.79rem;font-weight:600;color:var(--navy);display:block;margin-bottom:6px}
.calc-bars{display:grid;gap:12px;margin:18px 0 0}
.cbar{display:grid;gap:6px}
.cbar-top{display:flex;justify-content:space-between;font-size:.84rem;color:#B6C8DE}
.cbar-top b{color:#fff;font-family:var(--display);font-weight:600}
.cbar-track{height:9px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.cbar-track i{display:block;height:100%;border-radius:99px;background:var(--sky);transition:width .4s cubic-bezier(.4,0,.2,1)}
.cbar-track.warn i{background:#F0A33C}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq:last-of-type{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;background:none;border:0;padding:20px 2px;min-height:60px;text-align:left;cursor:pointer;font-family:var(--display);font-weight:600;font-size:1.04rem;color:var(--navy);letter-spacing:-.015em}
.faq-q:hover{color:var(--blue)}
.faq-ico{width:28px;height:28px;flex:0 0 28px;border-radius:8px;background:var(--mist);display:grid;place-items:center;transition:.2s;color:var(--navy)}
.faq-ico svg{width:13px;height:13px}
.faq-q[aria-expanded=true] .faq-ico{background:var(--blue);color:#fff;transform:rotate(45deg)}
.faq-a{display:none;padding:0 42px 22px 2px}
.faq-a.open{display:block}
.faq-a p:last-child{margin-bottom:0}
.faq-a p{color:var(--muted)}

/* ---------- CTA band ---------- */
.ctaband{background:var(--navy);color:#fff;border-radius:var(--r-xl);padding:clamp(26px,3.6vw,48px);position:relative;overflow:hidden}
.ctaband::after{content:"";position:absolute;right:-6%;bottom:-56%;width:min(420px,52vw);aspect-ratio:1;background:var(--sky);opacity:.07;clip-path:polygon(50% 0%,100% 31%,100% 100%,50% 69%,0% 100%,0% 31%)}
.ctaband>*{position:relative;z-index:2}
.ctaband h2{color:#fff}
.ctaband p{color:#B6C8DE;max-width:56ch}
.ctaband-grid{display:grid;grid-template-columns:1.2fr auto;gap:28px;align-items:center}
@media(max-width:900px){.ctaband-grid{grid-template-columns:minmax(0,1fr)}}
.phone-xl{display:inline-flex;align-items:center;gap:12px;font-family:var(--display);font-size:clamp(1.45rem,2.8vw,1.9rem);font-weight:700;letter-spacing:-.03em;color:#fff;text-decoration:none!important}
.phone-xl:hover{opacity:.85;text-decoration:none}
.phone-xl svg{width:26px;height:26px;color:var(--sky)}

/* ---------- page body + sidebar ---------- */
.pagebody{display:grid;grid-template-columns:minmax(0,1fr) 324px;gap:clamp(26px,3.6vw,56px);align-items:start}
@media(max-width:1100px){.pagebody{grid-template-columns:minmax(0,1fr)}}
.side{position:sticky;top:92px;display:grid;gap:14px}
@media(max-width:1100px){.side{position:static}}
.side-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.side-card h2,.side-card h4{font-size:1.02rem;margin-bottom:.5em}
.side-card p{font-size:.9rem;color:var(--muted)}
.side-card .btn{width:100%}
.side-list{list-style:none;padding:0;margin:0;display:grid;gap:1px}
.side-list a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;min-height:46px;border-radius:8px;color:var(--text);font-size:.91rem;font-weight:500;text-decoration:none!important}
.side-list a:hover{background:var(--blue-050);color:var(--blue-700)}
.side-list svg{width:14px;height:14px;flex:0 0 14px;opacity:.55}
.side-phone{display:flex;align-items:center;gap:11px;padding:15px 18px;min-height:56px;background:var(--navy);color:#fff;border-radius:var(--r);text-decoration:none!important;font-family:var(--display);font-weight:600;font-size:1.06rem;letter-spacing:-.02em}
.side-phone:hover{background:var(--navy-700);text-decoration:none}
.side-phone svg{width:19px;height:19px;color:var(--sky)}
.toc{background:var(--mist);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin-bottom:28px}
.toc .menu-h,.toc h4{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:12px;font-family:var(--display);font-weight:600}
.toc ol{margin:0;padding-left:1.15em;columns:2;column-gap:26px}
@media(max-width:640px){.toc ol{columns:1}}
.toc li{margin-bottom:6px;font-size:.9rem}
.toc a{color:var(--navy-500);text-decoration:none}
.toc a:hover{color:var(--blue);text-decoration:underline}
.kw-strip{font-size:.78rem;color:var(--muted-2);margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}

/* ---------- related ---------- */
.rel{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;min-height:60px;background:#fff;border:1px solid var(--line);border-radius:var(--r);text-decoration:none!important;color:var(--navy);font-family:var(--display);font-weight:600;font-size:.95rem;transition:.16s}
.rel:hover{border-color:var(--sky);color:var(--blue-700);transform:translateX(3px)}
.rel svg{width:16px;height:16px;flex:0 0 16px}

/* ---------- footer ---------- */
.ftr{background:var(--navy);color:#9BAFC9;padding-block:clamp(42px,5vw,68px) 26px;font-size:.9rem}
.ftr a{color:#C3D2E6;text-decoration:none}
.ftr a:hover{color:#fff;text-decoration:underline}
.ftr-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(22px,3vw,40px);padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.11)}
@media(max-width:900px){.ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.ftr-grid{grid-template-columns:minmax(0,1fr)}}
.ftr .menu-h,.ftr h5{color:#fff;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px;font-family:var(--display);font-weight:600}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:9px}
.ftr-logo{display:inline-flex;align-items:center;margin-bottom:16px;text-decoration:none!important}
.ftr-logo img{height:38px;width:auto}
.ftr-bot{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;padding-top:22px;font-size:.81rem;color:#7B8FAB}
.ftr-cta{display:grid;gap:10px;margin-top:20px}
.ftr-legal{font-size:.79rem;color:#7B8FAB;line-height:1.6;margin-top:18px}

/* ---------- sticky mobile bar ---------- */
.mobar{position:fixed;bottom:0;left:0;right:0;z-index:180;display:none;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.98);backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -4px 18px rgba(22,34,56,.09)}
.mobar .btn{flex:1;padding:14px 10px;min-height:54px;font-size:1rem}
@media(max-width:900px){.mobar{display:flex}body{padding-bottom:80px}}

/* ---------- utility ---------- */
.center{text-align:center}
.mb0{margin-bottom:0}
.mt-lg{margin-top:clamp(26px,3.4vw,42px)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.menu-h{margin:0 0 10px}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-sm);padding:6px 12px;font-size:.78rem;font-weight:600;font-family:var(--display)}
.pill.blue,.pill.green{background:var(--sky-050);color:var(--blue-700)}
.pill.amber{background:var(--warn-050);color:var(--warn)}
.stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
@media(max-width:900px){.stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{background:#fff;padding:22px 18px;text-align:center}
.stat b{display:block;font-family:var(--display);font-size:clamp(1.55rem,3vw,2.1rem);font-weight:700;letter-spacing:-.035em;color:var(--navy);line-height:1}
.stat span{font-size:.82rem;color:var(--muted);display:block;margin-top:6px}
.freedom{background:var(--mist)}
.freedom-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(26px,3.6vw,56px);align-items:start}
@media(max-width:900px){.freedom-grid{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   Application intake — /application-intake/
   ========================================================================== */
.intake-hero{padding-bottom:clamp(30px,4vw,50px)}
.ihero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,4vw,54px);align-items:start}
@media(max-width:900px){.ihero-grid{grid-template-columns:minmax(0,1fr)}}
.ihero-side{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);padding:24px}
.ihero-side h2{color:#fff;font-size:1.05rem;margin-bottom:14px}
.ihero-side .ticks li{color:#D5DFEC;font-size:.92rem}
.ihero-side .ticks li svg{color:var(--sky)}
.ihero-help{font-size:.85rem;color:#8FA4BF;margin:16px 0 18px}

.intake-shell{padding-top:clamp(20px,3vw,32px)}
.pnav-wrap{position:sticky;top:76px;z-index:60;background:var(--paper);padding:14px 0 10px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.pnav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.pnav::-webkit-scrollbar{display:none}
.pnav-item{display:inline-flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer;
  padding:9px 14px;border-radius:var(--r-sm);font-family:var(--display);font-weight:600;font-size:.87rem;
  color:var(--muted);white-space:nowrap;min-height:44px;transition:.14s}
.pnav-item:hover{background:var(--mist);color:var(--navy)}
.pnav-n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--mist-2);
  color:var(--muted);font-size:.76rem;flex:0 0 24px}
.pnav-item.active{background:var(--navy);color:#fff}
.pnav-item.active .pnav-n{background:var(--sky);color:var(--navy)}
.pnav-item.done .pnav-n{background:var(--pos);color:#fff}
.pnav-item.done{color:var(--navy)}
@media(max-width:640px){.pnav-l{display:none}.pnav-item{padding:9px 11px}}
.pbar{height:4px;border-radius:99px;background:var(--mist-2);overflow:hidden;margin-top:8px}
.pbar i{display:block;height:100%;background:var(--sky);border-radius:99px;transition:width .35s cubic-bezier(.4,0,.2,1)}

.livecalc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:0 0 4px}
.livecalc .lc{background:var(--mist);padding:10px 14px;text-align:center}
.livecalc .lc span{display:block;font-family:var(--display);font-size:.68rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-2)}
.livecalc .lc b{font-family:var(--display);font-size:1.12rem;font-weight:700;color:var(--navy);letter-spacing:-.02em}
.livecalc .lc b.over{color:var(--maple)}
.livecalc .lc b.under{color:var(--pos)}
/* Why an LTV is higher than the amount requested would suggest: the balance
   ranking ahead of it. Sits under the figure so the figure stays the figure. */
.livecalc .lc .lc-sub{display:block;font-style:normal;font-size:.66rem;line-height:1.3;
  margin-top:2px;color:var(--muted);min-height:1em}
.lc-note{grid-column:1/-1;background:var(--mist);margin:0;padding:7px 14px;font-size:.74rem;color:var(--muted-2);text-align:center;border-top:1px solid var(--line)}
@media(max-width:640px){.livecalc{grid-template-columns:repeat(2,minmax(0,1fr))}}

.intake-form{margin-top:clamp(20px,3vw,34px)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fstep-head{margin-bottom:clamp(20px,2.6vw,32px)}
.fstep-count{font-family:var(--display);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:8px}
.fstep-head h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:.3em}

.fgroup{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,2.4vw,28px);margin-bottom:16px}
.fgroup h3{font-size:1.1rem;margin-bottom:.5em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fgroup .gnote{font-size:.9rem;color:var(--muted);margin:-.2em 0 18px;max-width:70ch}
.fgroup[data-internal]{background:var(--mist);border-style:dashed}

.fgrid{display:grid;gap:14px}
.fgrid.c2{grid-template-columns:1fr 1fr}
@media(max-width:640px){.fgrid.c2{grid-template-columns:minmax(0,1fr)}}
.fgrid .field.full{grid-column:1/-1}
.field .req{color:var(--maple);font-weight:700}
.fhint{font-size:.8rem;color:var(--muted-2);line-height:1.45;margin-top:-2px}
.ferr{font-size:.8rem;color:var(--maple);font-weight:600;min-height:0}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--maple);box-shadow:0 0 0 3px rgba(216,30,39,.12)}
fieldset.chipset{border:0;padding:0;margin:0;min-width:0}
fieldset.chipset legend{font-family:var(--display);font-size:.79rem;font-weight:600;color:var(--navy);padding:0;margin-bottom:8px}
fieldset.chipset.invalid .chips{outline:2px solid var(--maple);outline-offset:4px;border-radius:var(--r-sm)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:46px;padding:11px 18px;border:1.5px solid var(--line-2);
  border-radius:var(--r-sm);background:#fff;font-family:var(--display);font-weight:600;font-size:.9rem;
  color:var(--navy-500);cursor:pointer;transition:.14s;user-select:none}
.chip input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.chip input:focus-visible+span{outline:3px solid var(--blue);outline-offset:2px}
.chip span:hover{border-color:var(--navy)}
.checkrow{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;cursor:pointer;
  padding:14px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);background:#fff;min-height:52px}
.checkrow:hover{border-color:var(--navy)}
.checkrow input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--maple);cursor:pointer}
.checkrow span{font-size:.93rem;line-height:1.55;color:var(--text)}
.inwrap{position:relative;display:flex;align-items:center}
.inwrap.has-affix input{padding-left:30px}
.affix{position:absolute;font-size:.92rem;color:var(--muted-2);font-weight:600;pointer-events:none}
.affix.pre{left:13px}
.affix.post{right:13px;font-size:.82rem}
.inwrap:has(.affix.post) input{padding-right:64px}

.repeater{margin-top:4px}
.rep-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.rep-table{width:100%;min-width:440px;border-collapse:collapse;font-size:.92rem;margin:0}
.rep-table th{background:var(--mist);font-size:.7rem;padding:10px 12px}
.rep-table td{padding:6px;border-bottom:1px solid var(--line)}
.rep-table input{width:100%;min-height:46px;padding:10px 12px;border:1.5px solid transparent;border-radius:7px;
  background:#fff;font-family:var(--body);font-size:.94rem;color:var(--text)}
.rep-table input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(20,88,159,.12)}
.rep-x{width:52px;text-align:center}
.rep-del{width:36px;height:36px;border-radius:8px;border:1.5px solid var(--line-2);background:#fff;color:var(--muted);
  font-size:1.2rem;line-height:1;cursor:pointer}
.rep-del:hover{border-color:var(--maple);color:var(--maple)}
.rep-add{margin-top:12px}
.rtotals{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.rtotal{flex:1;min-width:150px;background:var(--mist);border-left:3px solid var(--sky);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:11px 14px}
.rtotal span{display:block;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);font-family:var(--display)}
.rtotal b{font-family:var(--display);font-size:1.16rem;font-weight:700;color:var(--navy)}

.dropzone{border:2px dashed var(--line-2);border-radius:var(--r-lg);padding:clamp(28px,4vw,46px) 22px;text-align:center;
  cursor:pointer;transition:.16s;background:var(--mist)}
.dropzone:hover,.dropzone.over,.dropzone:focus-visible{border-color:var(--blue);background:var(--blue-050)}
.dz-ico{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:14px;background:#fff;
  border:1px solid var(--line);color:var(--blue-700);margin-bottom:14px}
.dz-ico svg{width:24px;height:24px}
.dz-main{font-family:var(--display);font-weight:600;font-size:1.04rem;color:var(--navy);margin:0 0 6px}
.dz-link{color:var(--blue);text-decoration:underline}
.dz-sub{font-size:.86rem;color:var(--muted);margin:0}
.filelist{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:8px}
.filelist li{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;min-height:52px}
.fl-name{font-size:.92rem;color:var(--navy);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-size{font-size:.82rem;color:var(--muted-2);white-space:nowrap}
.fl-del{width:34px;height:34px;border-radius:8px;border:1.5px solid var(--line-2);background:#fff;color:var(--muted);font-size:1.2rem;line-height:1;cursor:pointer}
.fl-del:hover{border-color:var(--maple);color:var(--maple)}

.fstep-nav{display:flex;gap:12px;justify-content:space-between;margin-top:26px;flex-wrap:wrap}
.fstep-nav .btn{flex:1;min-width:180px}
@media(max-width:640px){.fstep-nav{flex-direction:column-reverse}.fstep-nav .btn{width:100%}}

.intake-status{position:sticky;bottom:96px;z-index:70;margin-top:18px;padding:14px 18px;border-radius:var(--r);
  font-family:var(--display);font-weight:600;font-size:.93rem;box-shadow:var(--sh-3)}
.intake-status.info{background:var(--sky-050);color:var(--blue-700);border:1px solid #CBE5FA}
.intake-status.error{background:var(--maple-050);color:var(--maple-700);border:1px solid #F5C9CB}

.done{text-align:center;background:#fff;border:1px solid var(--line);border-top:5px solid var(--pos);
  border-radius:var(--r-lg);padding:clamp(30px,4vw,54px) clamp(22px,3vw,40px);box-shadow:var(--sh-2)}
.done-ico{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--pos-050);
  color:var(--pos);margin-bottom:18px}
.done-ico svg{width:32px;height:32px}
.done .lede{margin-inline:auto}
.done .btn-row{justify-content:center}

/* Sticky header + step nav must never sit over a field the visitor is trying to
   reach. Now that the ratio panel scrolls with the page, the sticky stack is
   just the header (77px) plus the step tabs, so the offsets are far smaller —
   and, more to the point, they are correct rather than optimistic. */
html:has(.intake-form){scroll-padding-top:170px}
.intake-form .fgroup,.intake-form .field,.intake-form fieldset.chipset,.intake-form .fstep{scroll-margin-top:170px}
@media(max-width:900px){
  html:has(.intake-form){scroll-padding-top:160px}
  .intake-form .fgroup,.intake-form .field,.intake-form fieldset.chipset,.intake-form .fstep{scroll-margin-top:160px}
}

/* ==========================================================================
   MOBILE SYSTEM
   --------------------------------------------------------------------------
   Everything above is written desktop-first and collapses at three widths and
   three only: 640 (phone), 900 (tablet), 1100 (where the desktop nav gives way
   to the burger). Anything that needs to change on a phone changes here, in one
   place, so the whole site moves together instead of each component picking its
   own moment to reflow.

   Two rules hold the layout together:
     · every collapsed grid track is minmax(0,1fr), never a bare 1fr — a bare
       track takes its min-width from its widest child, so one wide table sets
       the width of the entire page;
     · anything that genuinely cannot shrink (tables, the lender marquee, the
       step nav) scrolls inside its own container, never the page.
   ========================================================================== */

/* ---- one vertical rhythm for every band ---------------------------------- */
@media(max-width:900px){
  :root{
    --pad:22px;          /* page gutter, identical on every section          */
    --sec:56px;          /* space above and below a full section             */
  }
  .sec-sm{padding-block:38px}
  .hero{padding-block:44px 48px}
  .phero{padding-block:30px 44px}
  .lenders{padding-block:30px}
  .ftr{padding-block:48px 24px}
  .sec-head{margin-bottom:26px}
  .mt-lg{margin-top:32px}
  .prose>section{padding-block:34px}
}

@media(max-width:640px){
  :root{--pad:20px;--sec:48px}
  .sec-sm{padding-block:34px}
  .hero{padding-block:36px 42px}
  .phero{padding-block:24px 38px}
  .ftr{padding-block:40px 22px}
  .sec-head{margin-bottom:22px}
  .mt-lg{margin-top:28px}
  .prose>section{padding-block:30px}
  .ctaband{padding:28px 22px;border-radius:var(--r-lg)}

  /* Type: one step down so headings and body keep their relationship. The
     body was previously set *larger* on phones than on desktop, which flattened
     the hierarchy — an h1 was barely twice the size of a paragraph. */
  body{font-size:16.5px;line-height:1.62}
  h1{font-size:2rem;line-height:1.12}
  h2{font-size:1.5rem}
  h3{font-size:1.12rem}
  .lede,.hero-sub,.phero-sub{font-size:1.04rem}
}

/* ---- nothing may push the page sideways --------------------------------- */
@media(max-width:900px){
  .tbl-wrap{
    /* the scroll cue: a soft fade on the right while there is more table */
    background:linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)),
               linear-gradient(90deg,rgba(255,255,255,0),#fff 70%) 100% 0,
               radial-gradient(farthest-side at 0 50%,rgba(22,34,56,.12),transparent),
               radial-gradient(farthest-side at 100% 50%,rgba(22,34,56,.12),transparent) 100% 0;
    background-repeat:no-repeat;background-size:36px 100%,36px 100%,14px 100%,14px 100%;
    background-attachment:local,local,scroll,scroll;
  }
  table{font-size:.88rem}
  th,td{padding:11px 13px}
  pre,code{overflow-wrap:anywhere}
}

/* ---- touch targets: 44px minimum, everywhere -----------------------------
   Capped at 1100px, not 900 — that is the width at which the burger appears,
   so everything below it is a device someone is touching, tablets included. */
@media(max-width:1100px){
  .logo{padding-block:6px}                       /* 38px image → 50px target */
  .ftr-logo{padding-block:5px}
  .ftr li{margin-bottom:0}
  .ftr li a,.ftr-bot a{display:inline-flex;align-items:center;min-height:44px;padding-block:2px}
  .toc li{margin-bottom:0}
  .toc a{display:flex;align-items:center;min-height:44px}
  .crumbs a{display:inline-flex;align-items:center;min-height:44px}
  .tb-links a{display:inline-flex;align-items:center;min-height:44px}
  .phone-xl{min-height:48px;padding-block:5px}
  .rail-btn{width:48px;height:48px}
  .faq-q{padding-block:18px}
}

/* ---- buttons wrap rather than overflow on a narrow phone ----------------- */
@media(max-width:640px){
  /* .btn is nowrap by default so labels stay on one line in a row of buttons.
     At 360px a label like "Get my personalized quote" is wider than the card
     it sits in, so full-width buttons are allowed a second line instead. */
  .btn{padding-inline:18px}
  .btn-lg{padding:16px 20px;font-size:1rem}
  .btn-block,.btn-row .btn,.rate-ctas .btn,.ftr-cta .btn,.side-card .btn,.mobar .btn{
    white-space:normal;text-wrap:balance
  }
}

/* ---- components that need a different shape on a phone ------------------- */
@media(max-width:640px){
  /* Hero proof badges: equal full-width rows rather than a ragged wrap. */
  .hero-badges{display:grid;gap:8px;margin-top:22px}
  .hbadge{width:100%;padding:11px 14px}

  /* Rate card: the asterisk was floating clear of the number. */
  .rate-big{font-size:3rem}
  .rate-big sup{top:-1.05em;font-size:.3em}
  .ratecard{padding:22px 20px}

  /* Footer: two columns of links instead of one very long ladder — the same
     footer, roughly half the scroll. The brand block and the last link group
     both span the full width so the grid never ends on a ragged half-row. */
  .ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}
  .ftr-brand,.ftr-grid>div:last-child{grid-column:1/-1}
  .ftr-grid>div:last-child ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
  .ftr-bot{gap:10px 18px}

  /* Case scenarios: before/after stack, so give the second half a top edge. */
  .case-col.after{border-top:1px solid var(--line)}
  .case-top,.case-out{padding-inline:20px}

  /* Every figure reads the same way — label above, value below — instead of
     short values sitting right-aligned on the label's line while long ones
     drop to their own. Mixed alignment down a column looks like a mistake. */
  .case-col .row{display:grid;gap:1px;font-size:.88rem}
  .case-col .row dt{flex:none}
  .case-col .row dd{text-align:left;font-size:.98rem}
  .case-col dl{gap:13px}

  .case-bl{padding:15px 20px;align-items:flex-start;text-align:left}
  .case-bl svg{margin-top:3px}

  /* Choice controls — calculator segments and intake chips — lay out as an
     even two-column grid rather than a ragged wrap where each option is a
     different width and the last one sits alone. */
  .seg,.chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .seg button{min-width:0}
  .chip{display:flex}
  .chip span{width:100%;justify-content:center;text-align:center;padding-inline:12px}

  /* Result rows: let the label wrap and keep the figure on one line, rather
     than breaking "Not required" across two. */
  .calc-row{gap:14px}
  .calc-row .k{min-width:0}
  .calc-row .v{white-space:nowrap}

  /* Reviews rail: one card per screen, snapped. */
  .revw{min-width:calc(100vw - (var(--pad) * 2) - 4px);max-width:none}
  .rail-nav{justify-content:space-between}

  /* Process: numbered rows read better than four stacked cards. */
  .proc-item{padding:20px}
  .proc-n{width:34px;height:34px;margin-bottom:12px;font-size:.88rem}
}

/* ---- the floating Call / Apply bar --------------------------------------
   It exists because the header's Apply button is gone below 1100px, so it
   appears at exactly that width and behaves identically on every page. On a
   wide tablet the buttons are capped and centred rather than stretched across
   the whole screen.

   It steps out of the way while a form is actually on screen — that is the one
   place it would cover something more important than itself — and comes back
   afterwards. site.js sets `.mobar-hide`; without JS the bar simply stays put,
   which is the safe failure.
   ------------------------------------------------------------------------- */
@media(max-width:1100px){
  .mobar{display:flex;justify-content:center}
  .mobar .btn{flex:1 1 0;max-width:280px}
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
}
.mobar{transition:transform .22s cubic-bezier(.4,0,.2,1),opacity .22s}
.mobar-hide .mobar{transform:translateY(115%);opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.mobar{transition:none}}


/* ---------- quote band ---------- */
.quote-sec{background:var(--mist)}
.quote-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(20px,2.6vw,34px);align-items:start}
@media(max-width:900px){.quote-grid{grid-template-columns:minmax(0,1fr)}}
.quote-panel{
  background:linear-gradient(165deg,#0B1A30 0%,#132747 100%);
  color:#B6C8DE;border-radius:var(--r-xl);padding:clamp(22px,2.8vw,36px);box-shadow:var(--sh-3)
}
.quote-panel h2{color:#fff;font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:.5em}
.quote-panel > p{font-size:.98rem;line-height:1.62;color:#A8BDD6;margin-bottom:26px;max-width:52ch}
.quote-panel .eyebrow{color:var(--sky)}
.qsteps{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:16px}
.qsteps li{display:flex;gap:13px;align-items:flex-start}
.qn{width:26px;height:26px;border-radius:var(--r-sm);background:var(--maple);color:#fff;
  display:grid;place-items:center;font-family:var(--display);font-size:.8rem;font-weight:800;flex:0 0 26px}
.qsteps b{display:block;font-family:var(--display);font-size:.95rem;font-weight:700;color:#fff;
  letter-spacing:-.01em}
.qsteps span{display:block;font-size:.85rem;color:#93A9C4;line-height:1.55;margin-top:3px}
.quote-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg);overflow:hidden;margin-bottom:20px}
.quote-stats .stat{background:rgba(11,26,48,.55);padding:13px 12px;text-align:center}
.quote-stats .stat b{display:block;font-family:var(--display);font-size:1.3rem;font-weight:800;
  color:#fff;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.quote-stats .stat span{display:block;font-size:.7rem;color:#8DA3BE;margin-top:3px;line-height:1.35}
@media(max-width:620px){.quote-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.quote-call{display:flex;align-items:center;gap:9px;font-size:.86rem;color:#93A9C4;margin:0}
.quote-call a{color:#fff;font-weight:700;border-bottom:1px solid rgba(255,255,255,.35)}
.quote-call svg{width:15px;height:15px;color:var(--sky);flex:0 0 15px}


/* ==========================================================================
   Mobile
   ==========================================================================
   The phone is the majority of this traffic and the estimator is the thing the
   page is about, so the rule below the hero is: get to it fast. The four
   promise cards stay two-up rather than stacking, the CTA row comes before it,
   and nothing between the top of the page and the sliders is decorative.
   ========================================================================== */
@media(max-width:1000px){
  .hero{padding-block:clamp(22px,5vw,34px)}
  .hero h1{max-width:none;font-size:clamp(1.95rem,8.2vw,2.6rem)}
  .hero-sub{font-size:1rem;max-width:none;margin-bottom:22px}
  .hero-pill{font-size:.62rem;padding:6px 12px;margin-bottom:16px}
  /* The estimator is the point of the hero, so on a narrow screen it comes
     straight after the headline rather than after four cards and two buttons. */
  .hero-grid{display:flex;flex-direction:column}
  .hero-copy{display:contents}
  .hero-copy > .hero-pill{order:1}
  .hero-copy > h1{order:2}
  .hero-copy > .hero-sub{order:3}
  .estimator{order:4;margin-bottom:22px}
  .hero-copy > .hcards{order:5}
  .hero-copy > .hero-vol{order:6}
}
@media(max-width:640px){
  .hcards{gap:8px;margin-bottom:20px}
  .hcard{padding:12px 13px;gap:9px}
  .hcard-ico{width:26px;height:26px;flex:0 0 26px;border-radius:7px}
  .hcard-ico svg{width:14px;height:14px}
  .hcard b{font-size:.83rem}
  .hcard span{font-size:.73rem}

  .estimator{padding:16px;border-radius:var(--r-lg)}
  .est-title b{font-size:.98rem}
  .est-title span{display:none}      /* the sliders explain themselves */
  .est-live{font-size:.6rem;padding:4px 9px}
  .est-amt{font-size:1.15rem}
  .est-ltv b{font-size:1.55rem}
  /* 44px, because a 34px pill is a pill people miss. */
  .tier{min-height:44px;padding:10px 14px;font-size:.8rem;flex:1 1 0;min-width:0}
  .est-badges{gap:6px}
  .est-badges span{font-size:.66rem}

  .bench{padding-block:24px}
  .bench-head{margin-bottom:12px}
  .bench-head p{font-size:.7rem}
  .bench-cell{padding:11px 12px}
  .bench-v{font-size:1.42rem}

  .quote-panel{padding:20px}
  .quote-panel > p{font-size:.92rem;margin-bottom:20px}
  .qsteps{gap:13px;margin-bottom:20px}

  /* The sticky dock and the footer both want the bottom of the screen. The
     dock wins, so the page reserves room for it rather than hiding the last
     line of the footer behind it. */
  body{padding-bottom:72px}
  .mobar{box-shadow:var(--sh-4)}
}
@media(max-width:380px){
  .hero h1{font-size:1.85rem}
  .est-out{padding:12px}
  .tierset{gap:4px}
}

/* A pointer that cannot hover is a finger: give every control a real target. */
@media(hover:none){
  .btn{min-height:46px}
  .tier{min-height:44px}
  .nav-link,.acc-btn,.faq-q{min-height:44px}
}

/* Careers sits in the drawer as a plain link styled like the accordion rows. */
a.acc-btn{text-decoration:none}