/* TrueSpark Financial shared base
   Design system extracted from index.html. index.html also links this file.
   Cache busting on Cloudflare Pages is by FILENAME, not ?v= query.
   To change this file after launch, ship tsf-7.css and update the links. */

:root{
  --concrete:#F1F2EE;
  --concrete-2:#E7E9E3;
  --iron:#17191B;
  --iron-2:#222528;
  --spark:#F04A00;
  --spark-dim:#C93E00;
  --hivis:#FFC400;
  --steel:#43505C;
  --line:#D3D6CD;
  --line-dark:#33373B;
  --ink:#1B1D1F;
  --ink-soft:#43484C;
  --paper:#FAFAF7;
  --display:'Archivo',sans-serif;
  --body:'Inter',sans-serif;
  --mono:'Inter',sans-serif;
  /* muted text on dark, lifted to clear WCAG AA at body sizes */
  --on-dark:#B9BEC3;
  --on-dark-soft:#9BA1A7;
  /* spark is only 3.3:1 on concrete, which fails AA for small text.
     Use --spark-ink for any orange text at or under 17px on a light background. */
  --spark-ink:#A83400;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--concrete);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 24px}

/* ---------- utility type ---------- */
/* No leading dash rule on the eyebrow. Owner called those out by name: they read
   vibecoded. Same goes for dashed and dotted hairlines anywhere on the site. */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--spark-ink);display:block;font-weight:600}
h1,h2,h3{font-family:var(--display);text-transform:uppercase;line-height:.96;letter-spacing:.005em}
h1{font-size:clamp(44px,6.4vw,84px);font-weight:700}
h2{font-size:clamp(34px,4.6vw,58px);font-weight:700}
h3{font-size:clamp(22px,2.4vw,28px);font-weight:600;line-height:1.05}
.mark{color:var(--spark)}
.lede{font-size:clamp(17px,1.6vw,20px);color:var(--ink-soft);max-width:58ch}
.mono-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.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}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:19px;padding:16px 32px;border:none;cursor:pointer;text-decoration:none;transition:transform .12s ease,background .15s ease,box-shadow .15s ease}
.btn-primary{background:var(--spark);color:#fff;box-shadow:0 4px 0 var(--spark-dim)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--spark-dim)}
.btn-primary:active{transform:translateY(2px);box-shadow:0 2px 0 var(--spark-dim)}
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--ink);padding:14px 28px}
.btn-ghost:hover{background:var(--ink);color:var(--concrete)}
.btn-ghost.on-dark{color:var(--concrete);border-color:var(--concrete)}
.btn-ghost.on-dark:hover{background:var(--concrete);color:var(--iron)}
.btn:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,button:focus-visible{outline:3px solid var(--spark);outline-offset:2px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--iron);color:#fff;padding:12px 18px;font-family:var(--mono);font-size:13px;z-index:200}
.skip-link:focus{left:0}

/* ---------- top bar / nav ---------- */
.notice{background:var(--iron);color:#cfd2d4;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-align:center;padding:9px 16px}
.notice strong{color:var(--hivis);font-weight:500}
header.nav{position:sticky;top:0;z-index:50;background:rgba(241,242,238,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.logo{font-family:var(--display);font-weight:700;font-size:26px;text-transform:uppercase;letter-spacing:.02em;text-decoration:none;display:flex;align-items:center;gap:8px;white-space:nowrap}
.logo .bolt{width:18px;height:26px;background:var(--spark);clip-path:polygon(58% 0,12% 56%,42% 56%,30% 100%,88% 40%,55% 40%);flex:none}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--ink-soft)}
.nav-links a:hover{color:var(--spark)}
.nav-phone{font-family:var(--display);font-weight:600;font-size:19px;text-decoration:none;color:var(--ink)}
.nav-phone span{color:var(--spark)}
.nav-cta{font-size:16px;padding:11px 20px}
@media(max-width:1040px){.nav-links{gap:20px}.nav-links a:not(.nav-phone){display:none}}
@media(max-width:760px){.nav-cta{display:none}.nav-inner{height:64px}.logo{font-size:22px}.nav-phone{font-size:17px}}
@media(max-width:400px){.logo .tail{display:none}}

/* ---------- sections ---------- */
section{padding:96px 0}
@media(max-width:760px){section{padding:64px 0}}
.sec-head{max-width:760px;margin-bottom:56px}
.sec-head h2{margin:18px 0 16px}

/* ---------- footer ----------
   Collapsed to match the Ascension Estates footer: 38px padding, 14px type,
   one flex row, no four-column grid, no boxed link lists. */
footer{background:var(--iron);color:var(--on-dark);padding:38px 0;font-size:14px;line-height:1.7}
.foot-top{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer .logo{font-size:17px;color:#fff}
footer .foot-brand{max-width:34ch}
footer .foot-nav{max-width:62ch}
footer a{text-decoration:none;color:inherit;border-bottom:1px solid rgba(185,190,195,.28);padding-bottom:1px}
footer a:hover{color:var(--hivis);border-bottom-color:var(--hivis)}
footer .sep{opacity:.5;padding:0 2px}
.foot-legal{margin-top:20px;font-size:12px;line-height:1.7;color:var(--on-dark-soft)}

/* ---------- sticky mobile CTA ---------- */
.sticky-cta{position:fixed;bottom:0;left:0;right:0;z-index:60;display:none;background:var(--iron);padding:10px 14px;gap:10px;border-top:2px solid var(--spark)}
.sticky-cta .btn{flex:1;font-size:16px;padding:13px 10px}
.sticky-cta .btn-ghost{color:#fff;border-color:#fff}
@media(max-width:760px){.sticky-cta{display:flex}footer{padding-bottom:140px}}

/* ---------- reveal motion: removed ----------
   Sections used to start at opacity:0 and fade up on scroll. Removed on
   2026-09-09: the fade read as a template effect rather than a real site, and
   it meant a slow connection showed a blank page. The .rv class is kept as a
   no-op so no page has to be re-marked. */
.rv,.rv.in,.no-js .rv{opacity:1;transform:none;transition:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.plate{transition:none}
}

/* ---------- pre-qualification modal (shared, every page) ----------
   Markup and logic live in /js/prequal-1.js so one file drives the whole site. */
.pq-veil{position:fixed;inset:0;z-index:200;background:rgba(12,13,14,.72);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .18s ease}
.pq-veil.open{opacity:1;pointer-events:auto}
.pq{background:var(--iron);color:#E8E9E6;width:100%;max-width:520px;max-height:92vh;overflow-y:auto;position:relative;border:1px solid var(--line-dark);transform:translateY(10px);transition:transform .18s ease}
.pq-veil.open .pq{transform:none}
.pq-x{position:absolute;top:12px;right:12px;background:none;border:none;color:var(--on-dark);font-size:26px;line-height:1;cursor:pointer;padding:6px 10px}
.pq-x:hover{color:#fff}
.pq-body{padding:34px 32px 28px}
.pq h2{color:#fff;font-size:clamp(26px,3.4vw,34px);margin-bottom:10px}
.pq .pq-sub{color:var(--on-dark);font-size:15.5px;margin-bottom:22px}
.pq-bar{height:1px;background:var(--line-dark);margin-bottom:26px}
.pq-bar i{display:block;height:1px;background:var(--spark);transition:width .25s ease}
.pq-step{display:none}
.pq-step.on{display:block}
.pq label.fl{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark);margin-bottom:7px}
.pq input,.pq select{width:100%;background:var(--iron-2);border:1px solid var(--line-dark);color:#fff;font-family:var(--body);font-size:16px;padding:14px;margin-bottom:20px}
.pq input::placeholder{color:#8d9298}
/* .bad and .err are not scoped to .pq on purpose: the full form page at /qualify/
   runs the same validation and shows the same inline error under the same field. */
.pq input.bad,.pq select.bad,.inp.bad{border-color:var(--spark)}
.err{color:var(--hivis);font-size:13px;margin:-10px 0 14px}
.err a{color:var(--hivis);font-weight:600}
/* big tap choices instead of a dropdown, one tap advances the step */
.pq-choices{display:grid;gap:10px;margin-bottom:18px}
.pq-choice{display:block;width:100%;text-align:left;background:var(--iron-2);border:1px solid var(--line-dark);color:#E8E9E6;font-family:var(--body);font-size:16px;padding:16px 18px;cursor:pointer;transition:background .12s ease,border-color .12s ease}
.pq-choice:hover{border-color:var(--spark)}
.pq-choice.sel{border-color:var(--spark);background:var(--iron-2)}
.pq-choice b{display:block;font-weight:600}
/* muted copy on iron sits at --on-dark or lighter so it clears AA at these sizes */
.pq-choice span{display:block;font-size:13.5px;color:var(--on-dark);margin-top:2px}
.pq-nav{display:flex;gap:12px;align-items:center;margin-top:6px}
.pq-nav .btn{flex:1}
.pq-back{background:none;border:none;color:var(--on-dark);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;padding:10px 4px}
.pq-back:hover{color:#fff}
.pq-safe{font-size:13px;color:var(--on-dark);margin-top:16px;line-height:1.6}
.pq-safe a{color:var(--hivis)}
.pq-safe b{color:var(--hivis);font-weight:600}
.pq-done{text-align:center;padding:8px 0 4px}
.pq-done .tick{width:56px;height:56px;border:2px solid var(--hivis);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;color:var(--hivis);font-size:26px}
@media(max-width:520px){.pq-body{padding:28px 20px 24px}}

/* Closed modal stays out of the tab order and off the screen reader tree.
   Visibility flips after the fade on close, so the transition still reads. */
.pq-veil{visibility:hidden;transition:opacity .18s ease,visibility 0s linear .18s}
.pq-veil.open{visibility:visible;transition:opacity .18s ease,visibility 0s}
/* Top aligned on phones so the modal stays reachable with the keyboard up. */
@media(max-width:560px){.pq-veil{align-items:flex-start;padding:12px}}

/* Each step heading takes focus when the step changes, so the reader lands on the
   new question. Keyboard users still get a ring, and it is a TrueSpark ring. */
.pq-step h2:focus,.pq-done h2:focus{outline:none}
.pq-step h2:focus-visible,.pq-done h2:focus-visible{outline:3px solid var(--spark);outline-offset:4px}
.pq-count{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark);margin-bottom:10px}
.pq-choices.two{grid-template-columns:1fr 1fr}
@media(max-width:560px){.pq-choices.two{grid-template-columns:1fr}}

/* what happens next, on the done screen and on the full form page */
.pq-plan{list-style:none;text-align:left;margin:20px 0 0}
.pq-plan li{padding:14px 0;border-top:1px solid var(--line-dark)}
.pq-plan li:first-child{border-top:none;padding-top:0}
.pq-plan .when{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--hivis);margin-bottom:4px}
.pq-plan b{display:block;color:#fff;font-weight:600;font-size:16px}
.pq-plan .what{display:block;color:var(--on-dark);font-size:15px;margin-top:2px}
.pq-links{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;margin-top:10px;font-size:15px}
.pq-links a{color:var(--hivis);font-weight:600}

/* ---------- the sliding track ----------
   Screens sit side by side and the track moves on X, so the flow slides left
   instead of blinking. Off screen steps are visibility:hidden, which keeps them
   out of the tab order and off the screen reader tree while they stay laid out,
   so their height can be measured before they arrive. The 6px side padding gives
   focus rings room inside the clipped viewport. */
.pq-viewport{overflow:hidden;margin:0 -6px;transition:height .42s cubic-bezier(.22,.61,.36,1)}
.pq-track{display:flex;align-items:flex-start;transition:transform .42s cubic-bezier(.22,.61,.36,1)}
.pq-track .pq-step{display:block;flex:0 0 100%;width:100%;padding:0 6px;visibility:hidden}
.pq-track .pq-step.on,.pq-track .pq-step.leaving{visibility:visible}
@media(prefers-reduced-motion:reduce){.pq-viewport,.pq-track{transition:none}}

/* ---------- stacked fields with a floating label ----------
   The label is a real <label for>, always in the DOM, never a placeholder doing
   a label's job. It just moves up out of the way once the field has something
   in it. Tall boxes on purpose: easy to hit with a thumb. */
.pq-fl{position:relative;margin-bottom:14px}
.pq-fl input,.pq-fl select{width:100%;height:62px;background:var(--iron-2);border:1px solid var(--line-dark);color:#fff;font-family:var(--body);font-size:16px;padding:26px 14px 8px;margin:0;border-radius:0}
.pq-fl select{cursor:pointer}
.pq-fl label{position:absolute;left:15px;top:20px;font-size:16px;color:var(--on-dark);pointer-events:none;transform-origin:left top;transition:transform .14s ease,font-size .14s ease,letter-spacing .14s ease}
.pq-fl.filled label,.pq-fl:focus-within label{transform:translateY(-12px);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.pq-fl .opt{color:var(--on-dark)}
.pq-fl input:focus-visible,.pq-fl select:focus-visible{outline:3px solid var(--spark);outline-offset:2px}
/* city, state and zip read as one address question, not three more questions */
.pq-row3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:0 12px}
@media(max-width:420px){.pq-row3{grid-template-columns:1fr}}

/* the one screen that is a real credit application */
.pq-warn{background:#2b1c14;border:1px solid var(--spark);color:#FFD2BC;font-size:13.5px;line-height:1.6;padding:14px 16px;margin-bottom:18px}
.pq-warn b{color:#fff}
.pq-sign{display:block;width:100%;height:150px;background:#fff;border:1px solid var(--line-dark);touch-action:none;cursor:crosshair}
.pq-sign-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:8px 0 16px}
.pq-sign-row .hint{font-size:12.5px;color:var(--on-dark)}

/* full page version of the same flow, /qualify/ */
.pq-q{margin-bottom:38px}
.pq-q:last-of-type{margin-bottom:24px}
.pq-q h2,.pq-h{color:#fff;font-size:clamp(22px,2.6vw,28px);margin-bottom:6px}
.pq-q .pq-sub,.pq-done .pq-sub{color:var(--on-dark);font-size:15.5px;margin-bottom:16px}
.pq-q .fl,.fl-static{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark);margin-bottom:7px}
.pq-q .inp{margin-bottom:16px}
.pq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media(max-width:600px){.pq-grid{grid-template-columns:1fr}}
textarea.inp{min-height:96px;resize:vertical;font-family:var(--body);font-size:16px}

/* ---------- shared tool-page furniture ---------- */
.tool-hero{padding:64px 0 40px}
.tool-hero h1{font-size:clamp(38px,5.2vw,64px);margin:18px 0 18px}
.panel{background:var(--iron);color:#E8E9E6;padding:34px 32px 30px}
.panel h2,.panel h3{color:#fff}
.panel .mono-label{color:var(--on-dark-soft)}
.field{margin-bottom:20px}
.field label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark);margin-bottom:8px}
.field .hint{font-family:var(--body);letter-spacing:0;text-transform:none;font-size:12.5px;color:var(--on-dark-soft)}
.inp{width:100%;background:var(--iron-2);color:#fff;border:1px solid var(--line-dark);font-family:var(--mono);font-size:16px;padding:13px 14px}
.inp::placeholder{color:#7c8187}
select.inp{font-size:14px}
.readout{background:var(--iron-2);border:1px solid var(--line-dark);padding:22px 20px 18px;text-align:center}
.readout .big{font-family:var(--mono);font-weight:600;font-size:clamp(34px,4vw,46px);color:var(--hivis);letter-spacing:.02em;line-height:1.1;margin:6px 0 2px;font-variant-numeric:tabular-nums}
.note{font-family:var(--mono);font-size:10.5px;color:var(--on-dark-soft);line-height:1.6}
.legal-body{max-width:76ch}
.legal-body h2{font-size:clamp(24px,3vw,34px);margin:44px 0 14px}
.legal-body h3{font-size:20px;margin:26px 0 8px}
.legal-body p,.legal-body li{color:var(--ink-soft);font-size:16px;margin-bottom:12px}
.legal-body ul{margin:0 0 12px 20px}
.legal-body a{color:var(--spark-ink);text-decoration:underline;text-underline-offset:2px}

/* ---- consent boxes + stacked submit (replaces the signature pad) ---- */
.pq-check{display:flex;gap:12px;align-items:flex-start;margin:0 0 14px;cursor:pointer;
  font-size:13.5px;line-height:1.55;color:var(--on-dark,#c9cdd2)}
.pq-check input{flex:none;width:20px;height:20px;margin-top:1px;accent-color:var(--spark,#f26722);cursor:pointer}
.pq-check a{color:var(--hivis,#f5a623);text-decoration:underline}
.pq-nav-stack{display:block}
.pq-nav-stack .pq-wide{width:100%;display:block;margin:4px 0 12px;padding-top:16px;padding-bottom:16px;font-size:17px}
.pq-nav-stack .pq-back{display:block;width:100%;text-align:center}

/* ---------- customer reviews (#reviews) ----------
   Was a sideways-scrolling marquee. Now a plain static grid. A testimonial
   strip that slides on its own is the single loudest "this is a funnel" cue,
   and it made the quotes harder to actually read. Nothing here moves. */
.revbar{background:var(--concrete-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.revbar .sec-head{margin-bottom:26px}
.revbar-controls{display:none}
.revbar-viewport{margin-top:16px}
.revbar-track{display:block}
.revbar-set{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.revbar-set.is-dupe{display:none}
.revbar-card{background:var(--paper);border:1px solid var(--line);padding:22px 26px 24px;display:flex;flex-direction:column}
.revbar-stars{color:var(--spark);font-size:15px;letter-spacing:3px;line-height:1;margin-bottom:14px}
.revbar-stars .off{color:var(--line)}
.revbar-quote{font-size:15.5px;line-height:1.6;color:var(--ink-soft);flex:1;margin-bottom:20px}
.revbar-who{border-top:1px solid var(--line);padding-top:14px}
.revbar-name{display:block;font-family:var(--display);text-transform:uppercase;font-size:19px;font-weight:600;line-height:1.1;color:var(--ink)}
.revbar-role{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-top:5px}
@media(max-width:980px){.revbar-set{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.revbar-set{grid-template-columns:1fr;gap:14px}
  .revbar-card{padding:20px}.revbar-name{font-size:18px}}

/* The compact review ticker that used to sit under the header was removed on
   2026-09-09. A crawling quote strip above the fold is the first thing a
   cautious reader reads as a sales page. The same reviews are still on the
   page, static, further down. */

/* ---- consent box: one box, small type ---- */
.pq-check{font-size:11.5px;line-height:1.5;gap:10px;margin:0 0 12px;color:var(--on-dark)}
.pq-check input{width:17px;height:17px;margin-top:0}
.pq-nav-stack .pq-wide{padding-top:14px;padding-bottom:14px;font-size:16px}

/* ---- show/hide on the masked SSN field ---- */
.pq-fl{position:relative}
.pq-reveal{position:absolute;right:10px;top:50%;transform:translateY(-2px);
  background:none;border:1px solid var(--line-dark);color:var(--on-dark);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 9px;cursor:pointer;line-height:1}
.pq-reveal:hover{color:#fff;border-color:var(--spark)}
/* keep the typed value clear of the button and of Safari's own key glyph */
.pq-fl input[type="password"],
.pq-fl input#pqSsn,
.pq-fl input#qSsn{padding-right:96px}

/* ---- inline mount: same steps, in the page instead of over it ---- */
.pq-veil.is-inline{position:static;inset:auto;z-index:auto;background:none;
  backdrop-filter:none;padding:0;opacity:1;pointer-events:auto;visibility:visible;
  display:block;transition:none}
.pq-veil.is-inline .pq{max-width:760px;margin:0 auto;max-height:none;
  box-shadow:none;border:1px solid var(--line-dark)}
.pq-veil.is-inline .pq-x{display:none}          /* nothing to close, it is the page */
.pq-veil.is-inline .pq-sign{height:150px}
@media(max-width:600px){
  .pq-veil.is-inline .pq{border-left:none;border-right:none}
}

/* The scroll-triggered apply prompt was removed on 2026-09-09 along with
   /js/tsf-cta-1.js. A card that slides into the corner partway down the page
   is a pop-up however politely it is built. The header button, the inline
   calls to action and the sticky mobile bar all still point at the same form. */

/* ================= TYPOGRAPHY NORMALISATION =================
   Loaded after tsf-1.css, so these win on equal specificity.

   What changed and why:
   - Headings were Barlow Condensed in all caps. Condensed + uppercase at every
     level is the single loudest "generated landing page" signal. Now Archivo at
     weight, sentence case, so hierarchy comes from size and weight instead.
   - Nav links, eyebrows and field labels were IBM Plex Mono. Monospace chrome is
     the other big tell. They are Inter now, with tracking dialled back from .1em
     to something a human would set.
   - Mono is kept ONLY where the characters are numeric and want to line up.
   To revert, delete this block and put the two font variables back. ============ */

h1,h2,h3{
  font-family:var(--display);
  text-transform:none;
  line-height:1.08;
  letter-spacing:-.015em;
  font-weight:700;
}
h1{line-height:1.04;letter-spacing:-.022em}

.eyebrow,.mono-label{
  font-family:var(--body);
  font-weight:600;
  letter-spacing:.08em;
  font-size:12px;
}

.nav-links a{
  font-family:var(--body);
  font-size:15px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
}
.nav-phone{font-family:var(--body);font-weight:600;letter-spacing:0}

.logo{font-family:var(--display);font-weight:700;letter-spacing:-.02em;text-transform:none}

.btn{
  font-family:var(--body);
  font-weight:600;
  text-transform:none;
  letter-spacing:0;
  font-size:16.5px;
}

/* Cards and section furniture */
.plate .model,.pain .tag,.tool-card .kind,.revbar-role,.rt-n,
.pq-fl label,.t-field label,.sigline .lbl{
  font-family:var(--body);
  letter-spacing:.06em;
  font-weight:600;
}
.plate .go,.tool-card .go{font-family:var(--body);text-transform:none;letter-spacing:0;font-weight:600}
.stack-total,.offer-card .ribbon{font-family:var(--display);text-transform:none;letter-spacing:-.01em}
table.compare thead th{font-family:var(--display);text-transform:none;letter-spacing:-.01em}
.signame,.revbar-name{font-family:var(--display);text-transform:none;letter-spacing:-.01em}
.pq-count,.tsf-cta-k{font-family:var(--body);font-weight:600;letter-spacing:.08em}
.tsf-cta-h{font-family:var(--display);text-transform:none;letter-spacing:-.015em;font-size:24px}

/* Mono survives only where digits should align. */
.proof-cell .big,.tk-gap,.t-money,#oRate,.pq-plan .when{font-family:var(--mono)}

/* Page-level inline styles load after this file, so these need class-level
   specificity to win. Headline-scale text only. Small labels keep their caps. */
.ticket-h,.stack-total,.offer-card .ribbon,
table.compare thead th,summary,.tk-verdict,.nf-heading,.punch{
  font-family:var(--display);
  text-transform:none;
  letter-spacing:-.012em;
}

/* ---- plain-language tooltips on terms of art ----
   The words themselves stay. A contractor hears "factor rate" from the dealer,
   so stripping it would make us sound like we do not know the business. The
   definition rides along instead. Tap on touch, hover on desktop, focusable
   for keyboard, and it degrades to a plain dotted word if the JS never runs. */
.tt{
  border-bottom:1px dotted currentColor;cursor:help;position:relative;
  background:none;border-left:0;border-right:0;border-top:0;padding:0;
  font:inherit;color:inherit;text-align:left}
.tt::after{
  content:attr(data-tt);
  position:absolute;left:0;bottom:calc(100% + 9px);z-index:60;
  width:max-content;max-width:min(300px,80vw);
  background:var(--iron);color:#E8E9E6;border:1px solid var(--line-dark);
  font-family:var(--body);font-size:13.5px;font-weight:400;line-height:1.45;
  letter-spacing:0;text-transform:none;padding:11px 13px;
  opacity:0;visibility:hidden;transition:opacity .13s ease;pointer-events:none;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.6)}
.tt:hover::after,.tt:focus-visible::after,.tt.is-open::after{opacity:1;visibility:visible}
@media(max-width:600px){ .tt::after{left:auto;right:0} }

/* Divider between the qualifying questions and the contact fields on screen 1.
   The order is deliberate: four easy questions, then the ask. It mirrors the
   Meta form exactly, so a lead sees the same sequence in the ad and on the site. */
.pq-gate{
  margin:1.5rem 0 .75rem;
  padding-top:1.25rem;
  border-top:1px solid rgba(255,255,255,.12);
  font-weight:600;
}

/* ---- native date inputs on the credit application ----
   iOS Safari draws a date input shorter than a text input and centers the
   value, so it looked like a different control beside the text fields. Pin the
   height to what the text inputs compute to (a 16px font at normal line height
   is 20px, plus 12px padding top and bottom, plus 1px border each side = 46px)
   and left-align the value. The attribute selector outranks the page-level
   .fld input rule on specificity, which matters because the page's inline
   styles load after this file. */
.fld input[type="date"]{
  -webkit-appearance:none;appearance:none;display:block;
  height:calc(1.25em + 26px);min-height:0;line-height:1.25;
  text-align:left;color:var(--ink);background:#fff}
.fld input[type="date"]::-webkit-date-and-time-value{
  text-align:left;height:1.25em;line-height:1.25}
.fld input[type="date"]::-webkit-calendar-picker-indicator{opacity:.65;cursor:pointer}

/* Extra owner blocks on the credit application are fieldsets so the group has
   a name for screen readers. Strip the browser's fieldset chrome; the .ap-sec
   card rules on the page do the rest. */
fieldset.ap-sec{border:0;min-width:0}
fieldset.ap-sec[hidden]{display:none}

/* ================= 2026-09-09 SIMPLIFICATION =================
   Kevin's read of the site was that it looked generated and did not feel like
   somewhere you hand over a credit application. These are the specific things
   he named, plus the motion that came with them.

   Fonts. Two Google families now, Archivo and Inter. IBM Plex Mono is gone.
   That font ships a DOTTED ZERO, which is why every 0 in the calculators had a
   speck in the middle of it. Inter with tabular figures lines the digits up
   just as well and the zeros are plain. ============================== */
.proof-cell .big,.tk-gap,.t-money,#oRate,.pq-plan .when,
.t-amount,.tk-rows .v,.tk-total,.tk-verdict,td,th,input,select{
  font-variant-numeric:tabular-nums;
}

/* Buttons were a raised block with a hard drop shadow that lifted on hover.
   That is a toy button. Flat fill, darken on press. */
.btn-primary{box-shadow:none}
.btn-primary:hover{transform:none;box-shadow:none;background:var(--spark-dim)}
.btn-primary:active{transform:none;box-shadow:none;background:var(--spark-dim)}

/* The hero proof line had an orange diamond in front of every item, drawn with
   a clip-path. Diamonds, chevrons and arrow bullets are decoration pretending
   to be information. The lines read fine on their own. */
.hero-proofline div::before{display:none !important}

/* Fake rivet heads. Both calculators and the homepage quote card drew four
   radial-gradient circles in the corners to look like a bolted steel plate.
   It is a sticker, and it is the kind of detail that reads as costume. */
.ticket::before,.ticket::after,
.ticket .rvt::before,.ticket .rvt::after,
.ticket .rivet-b::before,.ticket .rivet-b::after{display:none !important}

/* "+" and "▸" as list markers. A plain bullet is what a real document uses. */
.plate li::before,.hvco li::before,.docs li::before{
  content:"\2022" !important;font-family:var(--body) !important;font-weight:400 !important;
}

/* The top strip was set in all caps with letter-spacing, which reads as a
   marquee even though it does not move. Sentence case, normal tracking, and
   the highlight is plain white instead of hi-vis yellow. */
.notice{letter-spacing:0;font-size:12.5px}
.notice strong{color:#fff;font-weight:600}

/* The headline ran to 84px with half the sentence in orange. At that size it
   shouts, and the audience here is a contractor in his fifties, not somebody
   who enjoys being sold to. Same words, calmer size. */
h1{font-size:clamp(36px,4.4vw,58px)}
h2{font-size:clamp(28px,3.2vw,42px)}

/* Fourteen quotes was a wall. Six is proof; the rest was volume. */
.revbar-card:nth-child(n+7){display:none}

/* Hi-vis yellow was on every readout in the deal ticket at once. It is the
   loudest colour on the page, so it is worth one thing only: the payment. */
/* Set on the page itself: the page's inline <style> loads after this file. */


/* ================= 2026-09-09, second pass =================
   The review strip used to bleed to the window edge because it was a marquee.
   As a static grid it belongs inside the same measure as everything else. */
.revbar-viewport{margin-top:16px;overflow:visible}

/* Cards led with a coloured bar across the top and a fake part number
   ("PROGRAM / EQ-100"). Neither is real information. A hairline box is enough. */
.plate{border-top:1px solid var(--line)}

/* The four process steps sat in a bordered lattice on black. Plain columns with
   space between them read as a sequence without the cage. */
.steps{border:0}
.step{border:0}

/* ================= 2026-09-09: the qualifier goes light =================
   The pre-qualification modal was the site's one dark surface that a visitor
   is asked to type into. Black panel, grey fields, yellow error text. Logan
   read it as heavy and it did not match the page behind it.

   Everything below re-skins that panel onto the same light palette the rest of
   the site uses: paper ground, ink text, hairline rules, orange for the one
   thing that needs attention. It is a self-contained block appended after the
   original rules on purpose. Delete from this comment to the end of the block
   and the dark modal comes back exactly as it was; nothing above was edited.

   Two colour swaps matter beyond taste. Hi-vis yellow was doing the work of
   error text and links; at 3:1 on white that fails AA outright, so errors and
   links move to --spark-ink (#A83400), which is the accessible orange this
   site already uses for small type on light. ============================== */

/* Scrim: lighter than the old .72 black because the panel is no longer dark
   and no longer needs the contrast to separate from the page. */
.pq-veil{background:rgba(23,25,27,.45)}

.pq-veil .pq{background:var(--paper);color:var(--ink);border:1px solid var(--line);
  box-shadow:0 30px 70px -30px rgba(23,25,27,.35)}
.pq-veil .pq-x{color:var(--ink-soft)}
.pq-veil .pq-x:hover{color:var(--ink)}
.pq-veil .pq h2,.pq-veil .pq-q h2,.pq-veil .pq-h{color:var(--ink)}
.pq-veil .pq .pq-sub,.pq-veil .pq-q .pq-sub,.pq-veil .pq-done .pq-sub{color:var(--ink-soft)}
.pq-veil .pq-count{color:var(--ink-soft)}

/* Progress hairline */
.pq-veil .pq-bar{background:var(--line)}

/* Fields: white wells on the paper ground, same as the credit application. */
.pq-veil .pq label.fl,.pq-veil .pq-q .fl,.pq-veil .fl-static,
.pq-veil .pq-fl label,.pq-veil .pq-fl .opt{color:var(--ink-soft)}
.pq-veil .pq input,.pq-veil .pq select,.pq-veil .pq .inp{
  background:#fff;border:1px solid var(--line);color:var(--ink)}
.pq-veil .pq input::placeholder{color:#9aa0a6}
.pq-veil .pq input.bad,.pq-veil .pq select.bad,.pq-veil .inp.bad{border-color:var(--spark)}

/* Errors were hi-vis yellow, which is unreadable on a light ground. */
.pq-veil .err,.pq-veil .err a{color:var(--spark-ink)}

/* Tap choices */
.pq-veil .pq-choice{background:#fff;border:1px solid var(--line);color:var(--ink)}
.pq-veil .pq-choice:hover{border-color:var(--spark)}
.pq-veil .pq-choice.sel{border-color:var(--spark);background:#FFF4EE}
.pq-veil .pq-choice span{color:var(--ink-soft)}

.pq-veil .pq-back{color:var(--ink-soft)}
.pq-veil .pq-back:hover{color:var(--ink)}
.pq-veil .pq-safe{color:var(--ink-soft)}
.pq-veil .pq-safe a,.pq-veil .pq-safe b{color:var(--spark-ink)}
.pq-veil .pq-gate{border-top-color:var(--line);color:var(--ink)}

/* Consent checkboxes and their links */
.pq-veil .pq-check{color:var(--ink-soft)}
.pq-veil .pq-check a{color:var(--spark-ink)}

/* Confirmation screen */
.pq-veil .pq-done .tick{border-color:var(--spark);color:var(--spark)}
.pq-veil .pq-plan li{border-top-color:var(--line)}
.pq-veil .pq-plan .when{color:var(--spark-ink)}
.pq-veil .pq-plan b{color:var(--ink)}
.pq-veil .pq-plan .what{color:var(--ink-soft)}
.pq-veil .pq-links a{color:var(--spark-ink)}

/* Signature pad and the SSN show/hide button on the long form */
.pq-veil .pq-sign{background:#fff;border-color:var(--line)}
.pq-veil .pq-sign-row .hint{color:var(--ink-soft)}
.pq-veil .pq-reveal{color:var(--ink-soft);border-color:var(--line);background:#fff}
.pq-veil .pq-reveal:hover{color:var(--ink);border-color:var(--spark)}

/* The one warning box. Was near-black with pale orange text. */
.pq-veil .pq-warn{background:#FFF4EE;border:1px solid var(--spark);color:var(--ink-soft)}
.pq-veil .pq-warn b{color:var(--ink)}

/* Ghost button inside the modal needs the light-ground treatment. */
.pq-veil .btn-ghost{color:var(--ink);border-color:var(--ink)}
.pq-veil .btn-ghost:hover{background:var(--ink);color:#fff}

/* The same markup renders inline on the full form page, where there is no
   scrim and the panel sits directly on the page ground. */
.pq-veil.is-inline .pq{box-shadow:none;background:var(--paper)}