/* 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-2.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:'IBM Plex Mono',monospace;
  /* 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 ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.rv.in{opacity:1;transform:none}
/* If JS never runs, nothing may stay invisible. */
.no-js .rv{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .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:3px;background:var(--line-dark);margin-bottom:26px}
.pq-bar i{display:block;height:3px;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:16px}
.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,.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);background:#2a2e32}
.pq-choice.sel{border-color:var(--spark);background:#2a2e32}
.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 review marquee (#reviews) ----------
   Same instrument as the Ascension Estates homepage review bar: one flex track,
   the card set duplicated, a linear translate that lands exactly one set to the
   left so the loop has no visible seam, and a pause on hover. Two deliberate
   departures from that original:

   1. The duplicate set is cloned at runtime instead of pasted into the HTML a
      second time. One copy of the quotes to maintain, not two that can drift.
   2. The endpoint is corrected by half a gap. A plain translateX(-50%) is half a
      gap short on any flex track that has a gap, because the track measures
      2 sets + 1 gap while the loop needs to travel 1 set + 1 gap. That is why
      the Ascension bar ticks sideways once per lap. Here it does not.

   With no JS, and under prefers-reduced-motion, the strip degrades to a plain
   horizontally scrollable row of the 14 real cards. Nothing here can hand the
   page body a horizontal scrollbar: the long track lives inside its own
   overflow container and never widens the section. */
.revbar{
  background:var(--concrete-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  --revbar-gap:20px;
  --revbar-gap-half:10px;   /* must stay exactly half of --revbar-gap */
  --revbar-card:380px;
  --revbar-dur:160s;
}
.revbar .sec-head{margin-bottom:26px}

/* Pause control. WCAG 2.2.2 wants a real mechanism to stop content that moves
   for more than five seconds, and a :hover rule is not one for anybody on a
   keyboard or a touchscreen. Ships with the hidden attribute and is revealed by
   script, so a page whose JS failed never shows a dead button. */
.revbar-controls{display:flex;justify-content:flex-end}
.revbar-pause{background:none;border:1px solid var(--line);color:var(--ink-soft);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:9px 16px;cursor:pointer;transition:border-color .15s ease,color .15s ease}
.revbar-pause:hover{border-color:var(--ink);color:var(--ink)}
.revbar-pause[hidden]{display:none}

/* Full bleed strip. Cards run to the edge on purpose in both modes: it reads as
   industrial, and in scroll mode a half-visible card at the edge is the standard
   "there is more this way" affordance. */
.revbar-viewport{margin-top:16px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.revbar-viewport.is-marquee{overflow-x:hidden}
.revbar-viewport:focus-visible{outline:3px solid var(--spark);outline-offset:-3px}

.revbar-track{display:flex;align-items:stretch;gap:var(--revbar-gap);width:max-content}
.revbar-set{display:flex;align-items:stretch;gap:var(--revbar-gap)}
.is-marquee .revbar-track{animation:revbar-slide var(--revbar-dur) linear infinite;will-change:transform}
.is-marquee .revbar-track:hover,
.revbar-viewport:focus-within .revbar-track,
.revbar-track.is-paused{animation-play-state:paused}
@keyframes revbar-slide{to{transform:translateX(calc(-50% - var(--revbar-gap-half)))}}

/* Top rule only, matching .pain and .plate. No left accent bar anywhere. */
.revbar-card{flex:none;width:var(--revbar-card);background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--iron);padding:22px 26px 24px;display:flex;flex-direction:column;transition:border-top-color .15s ease}
.revbar-card:hover{border-top-color:var(--spark)}
.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-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:5px}

@media(max-width:760px){
  .revbar{--revbar-gap:14px;--revbar-gap-half:7px;--revbar-card:min(84vw,320px);--revbar-dur:120s}
  .revbar-card{padding:20px 20px 22px}
  .revbar-name{font-size:18px}
}

/* Reduced motion: the animation stops outright and the strip becomes an ordinary
   scrollable row. The cloned set is dropped so a reader scrolling by hand does
   not hit all fourteen quotes a second time. */
@media(prefers-reduced-motion:reduce){
  .revbar-viewport.is-marquee{overflow-x:auto}
  .is-marquee .revbar-track{animation:none;transform:none;will-change:auto}
  .revbar-set.is-dupe{display:none}
  .revbar-controls{display:none}
  .revbar-card,.revbar-pause{transition:none}
}

/* ---- compact review ticker, directly under the header ---- */
.revticker{background:var(--iron);border-bottom:1px solid var(--line-dark);overflow:hidden}
.rt-viewport{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.rt-viewport::-webkit-scrollbar{display:none}
.rt-viewport.is-marquee{overflow-x:hidden}
.rt-track{display:flex;width:max-content}
.rt-viewport.is-marquee .rt-track{animation:rt-slide 70s linear infinite}
.revticker:hover .rt-track{animation-play-state:paused}
.rt-set{display:flex;flex:none}
.rt-item{display:flex;align-items:center;gap:10px;flex:none;padding:11px 0;margin-right:44px;white-space:nowrap}
.rt-stars{color:var(--spark);font-size:12px;letter-spacing:1px;flex:none}
.rt-stars i{color:#5b6067;font-style:normal}
.rt-q{font-family:var(--body);font-size:13.5px;color:#E8E9E6}
.rt-n{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark)}
@keyframes rt-slide{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 22px))}}
@media (prefers-reduced-motion: reduce){
  .rt-viewport.is-marquee{overflow-x:auto}
  .rt-viewport.is-marquee .rt-track{animation:none}
  .rt-track .is-dupe{display:none}
}

/* ---- 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}
}

/* ---- scroll-triggered apply prompt ---- */
.tsf-cta{
  position:fixed;right:24px;bottom:24px;z-index:150;width:340px;max-width:calc(100vw - 32px);
  background:var(--iron);border:1px solid var(--line-dark);border-top:4px solid var(--spark);
  padding:22px 22px 20px;box-shadow:0 24px 60px -20px rgba(0,0,0,.65);
  opacity:0;transform:translateY(16px);transition:opacity .28s ease,transform .28s ease}
.tsf-cta.is-in{opacity:1;transform:translateY(0)}
.tsf-cta-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--spark);margin:0 0 8px}
.tsf-cta-h{font-family:var(--display);text-transform:uppercase;font-size:23px;font-weight:600;
  line-height:1.05;color:#fff;margin:0 0 8px}
.tsf-cta-p{font-size:13.5px;line-height:1.5;color:var(--on-dark);margin:0 0 16px}
.tsf-cta-go{display:block;width:100%;text-align:center}
.tsf-cta-x{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--on-dark);
  font-size:24px;line-height:1;padding:4px 8px;cursor:pointer}
.tsf-cta-x:hover{color:#fff}

/* Bottom bar on phones. A corner card there covers the content someone is
   reading, which is the pattern Google penalises. */
@media(max-width:600px){
  .tsf-cta{right:0;left:0;bottom:0;width:auto;max-width:none;padding:16px 16px 18px;
    border:none;border-top:4px solid var(--spark);transform:translateY(100%)}
  .tsf-cta.is-in{transform:translateY(0)}
  .tsf-cta-h{font-size:20px}
  .tsf-cta-p{display:none}
}
@media (prefers-reduced-motion: reduce){
  .tsf-cta{transition:none}
}

/* ================= 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,.guarantee .seal{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,.guarantee .seal,.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} }