/* Loan Ranger — the public site.
   Lifted out of index.html so the sector pages and the article library
   wear the same thing rather than each carrying a copy that drifts.
   Page-specific rules are at the bottom, under their own headings. */

:root{
  --red:#D6186B; --red-deep:#A8104F; --red-wash:#FDECF3; --charcoal:#1C2433;
  --paper:#FFFFFF; --ground:#F7F9FB; --surface-2:#EEF1F5; --surface-3:#E2E7EE;
  --ink:#0E131C; --ink-2:#3C4556; --ink-muted:#565d7e; --ink-faint:#8A92A6;
  --rule:#E4E8EE; --rule-2:#CBD1DA; --ok:#1F7A4C; --ok-wash:#EAF5EF;
  /* ONE FACE, EVERYWHERE. The site and the app shared a stylesheet's worth
     of variables and still read as two products: headlines here were set in
     Archivo Black and in the app they were not, and every percentage and
     tracked label on both was JetBrains Mono. Inter carries all of it now —
     a 42px headline and a column of rands equally well, which is most of
     what this page is. Mono is kept for codes only, and this page has none. */
  --head:"Inter","Helvetica Neue",Arial,sans-serif;
  /* The wordmark. Its own token because a mark may one day stop being
     type, but the same face as everything else: the app set LOANRANGER
     in Inter on its sign-in page and in Archivo Black in its rail, so the
     name was drawn two ways depending on where you were standing. */
  --display:"Inter","Helvetica Neue",Arial,sans-serif;
  --body:"Inter","Helvetica Neue",Arial,sans-serif;
  --sh:0 1px 2px rgba(14,19,28,.04),0 2px 8px rgba(14,19,28,.04);
  --lift:0 6px 16px rgba(14,19,28,.07),0 20px 48px rgba(14,19,28,.08);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --red:#F472A6; --red-deep:#D6186B; --red-wash:#2E1320; --charcoal:#11151C;
  --paper:#171B22; --ground:#0D1016; --surface-2:#1E232C; --surface-3:#272D38;
  --ink:#F2F5F9; --ink-2:#C3CAD6; --ink-muted:#A3ABBF; --ink-faint:#79819A;
  --rule:#272D38; --rule-2:#3C4450; --ok:#5FC08C; --ok-wash:#132419;
  --sh:0 1px 2px rgba(0,0,0,.35); --lift:0 10px 34px rgba(0,0,0,.5);
}}
:root[data-theme="dark"]{--red:#F472A6;--red-deep:#D6186B;--red-wash:#2E1320;--charcoal:#11151C;
  --paper:#171B22;--ground:#0D1016;--surface-2:#1E232C;--surface-3:#272D38;
  --ink:#F2F5F9;--ink-2:#C3CAD6;--ink-muted:#A3ABBF;--ink-faint:#79819A;
  --rule:#272D38;--rule-2:#3C4450;--ok:#5FC08C;--ok-wash:#132419;
  --sh:0 1px 2px rgba(0,0,0,.35);--lift:0 10px 34px rgba(0,0,0,.5);}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-variant-numeric:tabular-nums;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-family:var(--head);font-weight:800;line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
p{margin:0} a{color:inherit} button{font-family:var(--body)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:5px}
.wrap{max-width:1540px;margin:0 auto;padding:0 clamp(22px,3.4vw,56px)}
.wrap.narrow{max-width:1100px}
.lab{font-family:var(--body);font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.lrm{width:38px;height:38px;flex:none;display:block;line-height:0}
.lrm svg{width:100%;height:100%;display:block;overflow:visible}
/* Slow enough to read as alive rather than as a loading spinner. */
.lrm-star{transform-box:view-box;transform-origin:50px 47.06px;
  animation:lrmTurn 20s linear infinite}
.brand:hover .lrm-star{animation-duration:3s}
@keyframes lrmTurn{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.lrm-star{animation:none}}

/* ── nav ─────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;background:var(--charcoal);
  border-bottom:1px solid color-mix(in srgb,#fff 9%,transparent)}
.nav .brand b{color:#fff}
.nav .brand b em{color:var(--red)}
.nav .pill{background:color-mix(in srgb,#fff 11%,transparent);
  color:color-mix(in srgb,#fff 66%,transparent)}
.nav .navr a{color:color-mix(in srgb,#fff 72%,transparent)}
.nav .navr a:hover{color:#fff;background:color-mix(in srgb,#fff 10%,transparent)}
.nav .navr a.btn{color:#fff;background:var(--red)}
.nav .navr a.btn:hover{background:var(--red-deep)}
.nav .wrap{display:flex;align-items:center;gap:14px;padding-block:15px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand b{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.03em}
.brand b em{font-style:normal;color:var(--red)}
.navr{margin-left:auto;display:flex;align-items:center;gap:4px}
.navr a{padding:9px 14px;font-size:14.5px;font-weight:600;color:var(--ink-muted);text-decoration:none;border-radius:7px}
.navr a:hover{color:var(--ink);background:var(--surface-2)}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--red);color:#fff;border:none;
  border-radius:8px;font-weight:700;font-size:15.5px;padding:14px 24px;text-decoration:none;letter-spacing:-.01em;
  box-shadow:0 1px 2px rgba(14,19,28,.1);transition:background .15s,transform .07s,box-shadow .15s}
.btn:hover{background:var(--red-deep);box-shadow:var(--lift)}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn-o{background:var(--paper);color:var(--ink);border:1px solid var(--rule-2);box-shadow:var(--sh)}
.btn-o:hover{background:var(--surface-2);box-shadow:var(--sh)}
.navr a.btn{color:#fff;padding:10px 18px;font-size:14.5px}
.navr a.btn:hover{color:#fff;background:var(--red-deep)}
/* The outline button in the nav was white text on a white background, so the
   secondary action up here has always rendered as an empty box. The rule
   above sets every .btn in the nav to white without exempting the outline
   one; this puts it back. */
.navr a.btn-o{color:var(--ink);background:var(--paper)}
.navr a.btn-o:hover{color:var(--ink);background:var(--surface-2)}
@media (max-width:720px){.navr a.q{display:none}}
@media (max-width:560px){
  .nav .wrap{gap:8px}
  .brand .pill{display:none}
  .brand b{font-size:14.5px}
  .lrm{width:30px;height:30px}
  .navr{gap:2px}
  .navr a{padding:8px 9px;font-size:13.5px}
  .navr a.btn{padding:9px 15px;font-size:13.5px}
}
@media (max-width:380px){
  .navr a:not(.btn){display:none}
}

/* ── hero ────────────────────────────── */
.hero{position:relative;overflow:hidden;padding:clamp(60px,8vw,118px) 0 clamp(56px,7vw,100px)}
.hero::before{content:"";position:absolute;inset:-40% 0 auto 50%;translate:-50% 0;width:1100px;height:660px;
  background:radial-gradient(45% 50% at 50% 50%,var(--red-wash) 0%,transparent 70%);pointer-events:none;z-index:0}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr 1fr;gap:clamp(40px,5vw,88px);align-items:center}
@media (max-width:900px){.hero{padding:62px 0 56px}.hero .wrap{grid-template-columns:1fr;gap:40px}}
/* Was clamp(2.7rem,5.6vw,5.4rem), which broke four words across four lines
   and made the page feel like a poster rather than something to use. */
.hero h1{font-size:clamp(2.2rem,4.3vw,3.7rem);line-height:1.04;max-width:14ch}
.hero .sub{font-size:clamp(1.02rem,1.25vw,1.2rem);color:var(--ink-muted);margin-top:18px;max-width:40ch;line-height:1.55}
.hero .cta{display:flex;gap:11px;margin-top:30px;flex-wrap:wrap}
.hero .fine{margin-top:16px;font-size:13.5px;color:var(--ink-faint)}

/* fan visual */
/* ── what comes back ───────────────────────────────────────────────
   The old hero graphic drew an application fanning out to five banks,
   which is the plumbing. This shows the thing somebody actually wants:
   offers, side by side, and a button. */
/* ── the five things somebody can apply for ───────────────────────
   One colour and one mark each, the same five the product uses, so a
   home loan is the same blue on the front page as it is inside. */
:root{
  --t-blue:#1F6FEB;   --t-blue-wash:#EAF1FD;
  --t-amber:#B9691A;  --t-amber-wash:#FDF1E4;
  --t-indigo:#4F3DD0; --t-indigo-wash:#ECEAFB;
  --t-cyan:#0B7FA8;   --t-cyan-wash:#E4F3F9;
  --t-green:#2A7D33;  --t-green-wash:#EBF5EC;
}
@media (prefers-color-scheme: dark){
  :root{
    --t-blue:#7FB0F5;   --t-blue-wash:#131E2E;
    --t-amber:#E0A15F;  --t-amber-wash:#2A2015;
    --t-indigo:#9D8FF5; --t-indigo-wash:#171533;
    --t-cyan:#5BC2E0;   --t-cyan-wash:#0D2129;
    --t-green:#6FCB7C;  --t-green-wash:#14250F;
  }
}
.tint-blue  {--tint:var(--t-blue);  --tint-wash:var(--t-blue-wash)}
.tint-amber {--tint:var(--t-amber); --tint-wash:var(--t-amber-wash)}
.tint-indigo{--tint:var(--t-indigo);--tint-wash:var(--t-indigo-wash)}
.tint-cyan  {--tint:var(--t-cyan);  --tint-wash:var(--t-cyan-wash)}
.tint-green {--tint:var(--t-green); --tint-wash:var(--t-green-wash)}

.picks{padding:clamp(44px,5vw,78px) 0;background:var(--paper);border-top:1px solid var(--rule)}
.picks h2{font-size:clamp(26px,3.1vw,40px);margin-bottom:8px}
.picks .h2sub{color:var(--ink-muted);font-size:clamp(15px,1.2vw,17px);margin-bottom:clamp(26px,3vw,38px)}

.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  align-items:stretch;grid-auto-rows:1fr}
@media (max-width:900px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pgrid{grid-template-columns:1fr}}
.pcard{display:flex;flex-direction:column;gap:11px;text-decoration:none;color:inherit;
  background:var(--ground);border:1px solid var(--rule);border-radius:14px;
  padding:20px 21px;height:100%;position:relative;overflow:hidden;
  transition:border-color .16s ease,box-shadow .24s ease,background .2s ease,
    transform .26s cubic-bezier(.22,1,.3,1)}
.pcard::after{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--tint);
  opacity:1}
.pcard:hover,.pcard:focus-visible{border-color:var(--tint);z-index:2;
  transform:scale(1.05);background:var(--paper);
  box-shadow:0 3px 8px rgba(14,19,28,.06),0 22px 46px color-mix(in srgb,var(--tint) 24%,transparent)}
.pcard:hover::after,.pcard:focus-visible::after{opacity:1}
.pcard:hover .pmark,.pcard:focus-visible .pmark{transform:scale(1.08) rotate(-3deg)}
.pmark{display:grid;place-items:center;width:48px;height:48px;border-radius:13px;flex:none;
  color:#fff;background:var(--tint);transition:transform .2s ease;
  box-shadow:0 1px 2px rgba(14,19,28,.10),
             0 5px 12px color-mix(in srgb,var(--tint) 34%,transparent)}
.pmark svg{stroke-width:1.9}
.pmark svg{width:25px;height:25px;display:block}
.pcard b{font-family:var(--head);font-size:1.1rem;font-weight:750;letter-spacing:-.02em;
  color:var(--ink);line-height:1.2}
.pcard .pb{flex:1;font-size:14px;line-height:1.55;color:var(--ink-muted)}
.pgo{display:inline-flex;align-items:center;gap:6px;margin-top:2px;
  font-size:12.6px;font-weight:700;letter-spacing:.01em;color:var(--tint);
  opacity:.55;transition:opacity .2s ease,gap .2s ease}
.pgo i{font-style:normal;transition:transform .22s cubic-bezier(.22,.8,.3,1)}
.pcard:hover .pgo,.pcard:focus-visible .pgo{opacity:1;gap:9px}
.pcard:hover .pgo i,.pcard:focus-visible .pgo i{transform:translateX(3px)}
.pcard-q .pgo{color:var(--ink-faint)}
.pcard .pw{display:flex;align-items:center;gap:7px;font-size:12.3px;font-weight:650;
  color:var(--tint);margin-top:auto}
.pcard .pw::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tint);flex:none}
.pcard-q{--tint:var(--ink-faint);--tint-wash:var(--surface-3);
  background:var(--surface-2);border-style:dashed}
.pcard-q .pmark{background:var(--surface-3);color:var(--ink-muted);box-shadow:none}

.steps3{list-style:none;display:flex;gap:9px;margin:26px 0 0;padding:0;flex-wrap:wrap}
.steps3 li{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;
  color:var(--ink-2);background:var(--surface-2);border:1px solid var(--rule);
  border-radius:999px;padding:7px 14px 7px 8px}
.steps3 span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--red);color:#fff;font-size:11px;font-weight:800;flex:none}

.offers{background:var(--paper);border:1px solid var(--rule);border-radius:16px;
  padding:20px 20px 18px;box-shadow:var(--lift)}
.offers-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:14px}
.offers-h b{font-size:15px;font-weight:750;color:var(--ink);letter-spacing:-.01em}
.offers-h span{font-size:12.5px;color:var(--ink-muted)}

.o{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px;
  padding:14px 16px;border:1px solid var(--rule);border-radius:11px;margin-bottom:9px;
  background:var(--ground)}
.o-b{font-size:14.5px;font-weight:700;color:var(--ink);display:flex;align-items:center;
  gap:8px;flex-wrap:wrap}
.o-b i{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ok);background:var(--ok-wash);
  border-radius:999px;padding:3px 8px}
.o-r{font-family:var(--body);font-weight:500;font-size:13px;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.o-m{font-family:var(--head);font-size:1.05rem;font-weight:800;letter-spacing:-.03em;
  color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.o-m small{display:block;font-family:var(--body);font-size:11px;font-weight:500;
  letter-spacing:0;color:var(--ink-muted);margin-top:1px}

/* The best row carries a badge and a button the others do not, so its name
   column was being squeezed into two cramped lines. It stacks instead, and
   standing a little taller than the rows around it is the point. */
.o-best{background:var(--paper);border-color:var(--ok);
  box-shadow:0 0 0 3px var(--ok-wash);grid-template-columns:1fr auto auto auto;
  padding-block:16px}
.o-best .o-b{flex-direction:column;align-items:flex-start;gap:5px}
.o-b i{white-space:nowrap}
.o-pick{background:var(--red);color:#fff;font-size:12.5px;font-weight:700;
  border-radius:8px;padding:8px 15px;white-space:nowrap}

.offers-f{margin:13px 0 0;padding-top:13px;border-top:1px solid var(--rule);
  font-size:12.5px;line-height:1.55;color:var(--ink-muted)}

@media (max-width:560px){
  .o,.o-best{grid-template-columns:1fr auto;gap:5px 12px}
  .o-r{grid-column:1;font-size:12px}
  .o-pick{grid-column:1 / -1;text-align:center;margin-top:6px}
}

.fan{background:var(--paper);border:1px solid var(--rule);border-radius:16px;padding:26px 24px;box-shadow:var(--lift)}
.fan svg{width:100%;height:auto;display:block}
.fan .cap{margin-top:16px;padding-top:14px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:14px;font-size:13px;color:var(--ink-muted)}
.fan .cap b{color:var(--ink);font-weight:700}

/* ── metrics ─────────────────────────── */
.metrics{border-block:1px solid var(--rule);background:var(--paper)}
.metrics .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
@media (max-width:820px){.metrics .wrap{grid-template-columns:repeat(2,1fr)}}
.m{padding:clamp(28px,3vw,44px) clamp(18px,2vw,30px) clamp(28px,3vw,44px) 0}
.m+.m{padding-left:28px;border-left:1px solid var(--rule)}
@media (max-width:820px){.m{padding:26px 18px}.m+.m{padding-left:18px;border-left:none}
  .m:nth-child(even){border-left:1px solid var(--rule)}.m:nth-child(n+3){border-top:1px solid var(--rule)}}
.m .v{font-family:var(--head);font-size:clamp(1.9rem,3.2vw,3.1rem);font-weight:800;letter-spacing:-.05em;margin-bottom:8px}
.m .d{font-size:clamp(14px,.95vw,15.5px);color:var(--ink-muted);line-height:1.4}

/* ── sections ────────────────────────── */
section{padding:clamp(62px,7.5vw,112px) 0}
@media (max-width:820px){section{padding:64px 0}}
h2{font-size:clamp(1.9rem,3.8vw,3.5rem)}
.h2sub{color:var(--ink-muted);margin-top:15px;font-size:clamp(1.02rem,1.2vw,1.18rem);max-width:52ch}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:clamp(36px,4vw,58px);
  border:1px solid var(--rule);border-radius:14px;overflow:hidden;background:var(--paper);box-shadow:var(--sh)}
@media (max-width:820px){.steps{grid-template-columns:1fr}}
.st{padding:clamp(26px,2.6vw,40px) clamp(22px,2vw,32px);position:relative}
.st+.st{border-left:1px solid var(--rule)}
@media (max-width:820px){.st+.st{border-left:none;border-top:1px solid var(--rule)}}
.st .n{font-family:var(--body);font-size:11px;color:var(--red);letter-spacing:.14em;font-weight:600}
.st h3{font-size:clamp(18px,1.35vw,22px);margin:13px 0 9px;letter-spacing:-.025em}
.st p{font-size:clamp(14.5px,1vw,16px);color:var(--ink-muted);line-height:1.5}

/* proof */
.proof{background:var(--paper);border-block:1px solid var(--rule)}
.two{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(20px,3vw,48px);align-items:center;margin-top:clamp(34px,4vw,56px)}
@media (max-width:820px){.two{grid-template-columns:1fr;gap:18px}}
.pn{text-align:center;padding:clamp(32px,4vw,58px) clamp(24px,2.4vw,40px);border-radius:14px;border:1px solid var(--rule)}
.pn.no{background:var(--surface-2)}
.pn.yes{background:var(--ok-wash);border-color:var(--ok)}
.pn .v{font-family:var(--head);font-size:clamp(2.4rem,5vw,4.6rem);font-weight:800;letter-spacing:-.05em;line-height:1}
.pn.no .v{color:var(--ink-faint)} .pn.yes .v{color:var(--ok)}
.pn .t{margin-top:12px;font-size:15px;font-weight:700}
.pn .s{margin-top:5px;font-size:14px;color:var(--ink-muted)}
.arrow{font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.14em;color:var(--ink-faint);text-align:center}
.proofcap{margin-top:26px;font-size:15px;color:var(--ink-muted);max-width:60ch}

/* compliance */
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.3vw,20px);margin-top:clamp(36px,4vw,58px)}
@media (max-width:900px){.chips{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.chips{grid-template-columns:1fr}}
.chip{background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:clamp(20px,2.1vw,32px) clamp(18px,1.7vw,26px);box-shadow:var(--sh);
  transition:box-shadow .16s,transform .16s}
.chip:hover{box-shadow:var(--lift);transform:translateY(-2px)}
.chip .k{font-family:var(--body);font-weight:700;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.chip b{display:block;font-family:var(--head);font-size:16px;margin:10px 0 7px;letter-spacing:-.02em}
.chip p{font-size:14px;color:var(--ink-muted);line-height:1.5}

/* pricing */
.pricing{background:var(--charcoal);color:#F2F5F9}
.pricing h2{color:#fff} .pricing .h2sub{color:rgba(242,245,249,.72);margin-inline:auto;text-align:center}
.pricing .wrap{text-align:center}
.pricing .cta{margin-top:32px;display:flex;gap:11px;justify-content:center;flex-wrap:wrap}
.pricing .btn-o{background:transparent;color:#fff;border-color:rgba(255,255,255,.3);box-shadow:none}
.pricing .btn-o:hover{background:rgba(255,255,255,.1)}


/* ── motion layer ───────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  html.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,.8,.3,1),transform .7s cubic-bezier(.22,.8,.3,1)}
  html.js .rv.in{opacity:1;transform:none}
  .rv[data-d="1"]{transition-delay:.08s} .rv[data-d="2"]{transition-delay:.16s}
  .rv[data-d="3"]{transition-delay:.24s} .rv[data-d="4"]{transition-delay:.32s}
  .hero h1{animation:rise .8s cubic-bezier(.22,.8,.3,1) both}
  .hero .lab{animation:rise .7s cubic-bezier(.22,.8,.3,1) both}
  .hero .sub{animation:rise .8s cubic-bezier(.22,.8,.3,1) .1s both}
  .hero .cta{animation:rise .8s cubic-bezier(.22,.8,.3,1) .18s both}
  .hero .fine{animation:rise .8s cubic-bezier(.22,.8,.3,1) .26s both}
  .fan{animation:scaleIn .9s cubic-bezier(.22,.8,.3,1) .12s both}
  .hero::before{animation:glow 9s ease-in-out infinite alternate}
  .ln{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);animation:draw 1.1s cubic-bezier(.4,0,.2,1) forwards}
  .ln:nth-of-type(1){animation-delay:.35s} .ln:nth-of-type(2){animation-delay:.45s}
  .ln:nth-of-type(3){animation-delay:.55s} .ln:nth-of-type(4){animation-delay:.65s}
  .ln:nth-of-type(5){animation-delay:.75s}
  .bank{opacity:0;animation:pop .5s cubic-bezier(.22,1.2,.4,1) forwards}
  .bank:nth-of-type(1){animation-delay:1.05s} .bank:nth-of-type(2){animation-delay:1.15s}
  .bank:nth-of-type(3){animation-delay:1.25s} .bank:nth-of-type(4){animation-delay:1.35s}
  .bank:nth-of-type(5){animation-delay:1.45s}
  .tick{opacity:0;animation:rise .7s cubic-bezier(.22,.8,.3,1) forwards}
  .tick-b{animation-delay:.12s}
  .pn.yes{animation:none}
  .pn.yes.in{animation:pulse 1.4s ease-out .3s}
}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes scaleIn{from{opacity:0;transform:translateY(16px) scale(.975)}to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes glow{from{opacity:.75;transform:translate(-50%,0) scale(1)}to{opacity:1;transform:translate(-50%,2%) scale(1.07)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 42%,transparent)}
                 100%{box-shadow:0 0 0 26px transparent}}


/* under-construction notice */
.uc{background:#141A25;color:rgba(255,255,255,.62);border-bottom:1px solid rgba(255,255,255,.07)}


.uc .wrap{display:flex;align-items:center;gap:11px;padding-block:8px;flex-wrap:wrap;
  font-size:12.5px;
  font-size:13.5px;line-height:1.45}
.uc .tag{font-family:var(--body);font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--red);border:1px solid color-mix(in srgb,var(--red) 45%,transparent);border-radius:999px;padding:3px 9px;flex:none}
.uc b{color:#fff;font-weight:700}
@media (max-width:620px){.uc-more{display:none}}
.pill{font-family:var(--body);font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  background:var(--surface-3);color:var(--ink-muted);border-radius:999px;padding:3px 7px;margin-left:9px;
  vertical-align:2px;flex:none}

/* lender rail */
.rail-wrap{border-block:1px solid var(--rule);background:var(--paper)}
.rail-wrap .wrap{padding-block:clamp(26px,3vw,40px)}
.rail-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:clamp(16px,1.8vw,22px)}
.rail-lab{font-family:var(--body);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
.rail-note{font-size:13px;color:var(--ink-faint)}
/* Two rows crossing each other, which reads as a list too long to show
   rather than a list being shown off. Each track holds the names twice, so
   the second copy is already in place when the first runs out and the loop
   has no seam. The mask fades them in and out at the edges instead of
   clipping them against a hard line. */
.tick{overflow:hidden;margin:0 calc(var(--gutter) * -1);padding:4px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.tick + .tick{margin-top:clamp(10px,1.1vw,15px)}
.tick-t{list-style:none;margin:0;padding:0;display:flex;width:max-content;
  gap:clamp(10px,1.1vw,16px);animation:ticker 64s linear infinite;will-change:transform}
.tick-b .tick-t{animation-duration:78s;animation-direction:reverse}
.rail-wrap:hover .tick-t,.tick-t:focus-within{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .pcard:hover,.pcard:focus-visible{transform:none}
}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Somebody who has asked for less movement gets a list they push themselves. */
@media (prefers-reduced-motion:reduce){
  .tick{overflow-x:auto;scroll-snap-type:x proximity;-webkit-mask-image:none;mask-image:none;
    margin:0;padding-bottom:8px}
  .tick-t{animation:none;width:auto}
  .tick-t li{scroll-snap-align:start}
  .tick-t li:nth-child(n+1){}
}

.rail li,.tick-t li{display:flex;align-items:center;justify-content:center;gap:11px;
  border:1px solid var(--rule);border-radius:12px;background:var(--ground);
  padding:clamp(16px,1.7vw,24px) clamp(10px,1.2vw,18px);cursor:default;
  transition:border-color .22s ease,background .22s ease,transform .22s ease,box-shadow .22s ease}
.tick-t li{flex:none;padding-inline:clamp(16px,1.6vw,26px)}
.rail li:hover,.tick-t li:hover{border-color:var(--rule-2);background:var(--paper);transform:translateY(-3px);box-shadow:var(--lift)}
.rail .mono[data-w],.tick-t .mono[data-w]{font-size:10px}
.rail .mono,.tick-t .mono{width:30px;height:30px;flex:none;border-radius:8px;display:grid;place-items:center;
  background:var(--surface-3);color:var(--ink-faint);font-family:var(--head);font-weight:800;
  font-size:13px;letter-spacing:-.02em;transition:background .22s ease,color .22s ease}
.rail li:hover .mono,.tick-t li:hover .mono{background:var(--red);color:#fff}
.rail .nm,.tick-t .nm{font-family:var(--head);font-weight:800;font-size:clamp(13.5px,1.05vw,17px);letter-spacing:-.025em;
  color:var(--ink-2);transition:color .22s ease;white-space:nowrap}
.rail li:hover .nm,.tick-t li:hover .nm{color:var(--ink)}

/* travelling packets */
.pkt{fill:var(--red)}
.m .v{font-variant-numeric:tabular-nums}

footer{border-top:1px solid var(--rule);padding:clamp(40px,5vw,62px) 0 44px}
.fgridx{display:grid;grid-template-columns:1.5fr 1.15fr 1.25fr .85fr 1.1fr;gap:clamp(22px,2.4vw,42px);
  align-items:start}
@media (max-width:1180px){.fgridx{grid-template-columns:1.4fr 1fr 1fr}}
@media (max-width:860px){.fgridx{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fgridx{grid-template-columns:1fr;gap:28px}}
.fgridx h4{margin:0 0 12px;font-family:var(--head);font-size:12px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint)}
.fgridx > div > a{display:block;padding:5px 0;font-size:14.5px;color:var(--ink-2);
  text-decoration:none;width:fit-content;transition:color .15s ease}
.fgridx > div > a:hover{color:var(--red)}
.fbrand .brand{display:inline-flex}
.ftag{margin:0 0 4px;font-family:var(--head);font-size:15px;font-weight:700;
  letter-spacing:-.015em;color:var(--ink-2)}
.fnote{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-faint);max-width:30ch}
.fgridx .fnote{margin-bottom:10px}
footer .disc{margin:clamp(30px,3.4vw,44px) 0 0;padding-top:22px;
  border-top:1px solid var(--rule);font-size:12px;line-height:1.7;color:var(--ink-faint);
  max-width:92ch}
footer .wrap{display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between;align-items:center;
  font-size:13.5px;color:var(--ink-faint)}
footer a{color:var(--ink-muted);text-decoration:none}
footer a:hover{color:var(--ink)}
.disc{margin-top:14px;font-size:12.5px;color:var(--ink-faint);max-width:72ch;line-height:1.6}

/* ── accredited banks ──────────────────────────────────────────────
   A row of marks, not a wall of logos: a bank is recognised by its
   colour and shape before its name is read, and each one carries what
   it takes from us underneath so the strip says something rather than
   decorating. */
.banks{padding:clamp(54px,7vw,96px) 0;background:var(--ground);border-top:1px solid var(--rule)}
.banks h2{text-align:center}
.banks .h2sub{text-align:center;margin:0 auto 34px;max-width:620px}
.banklist{list-style:none;margin:0;padding:0;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));max-width:1120px;margin-inline:auto}
.banklist li{background:var(--paper);border:1px solid var(--rule);border-radius:16px;
  padding:22px 18px;display:flex;flex-direction:column;align-items:center;gap:12px;
  text-align:center;transition:border-color .18s ease,transform .26s cubic-bezier(.22,1,.3,1)}
.banklist li:hover{border-color:#cfd6e0;transform:translateY(-2px)}
.banklist img{max-height:40px;max-width:142px;width:auto;height:auto;display:block}
.banklist b{font-family:var(--head);font-size:14.5px;font-weight:700;color:var(--ink)}
.banklist span{font-size:12px;line-height:1.5;color:var(--ink-muted)}

/* ══ THE PLATFORM'S OWN MATERIAL ═════════════════════════════════════
   The app sets every figure in a foil balloon and every mark on a foil
   tile. The front page was flat squares and plain type beside them, so
   somebody arriving from the site met a different product.

   Same four things that make the app read as mylar: a saturated tint,
   the room reflected in ALTERNATING bands rather than one smooth ramp,
   a hard specular streak instead of a soft bloom, the crinkle, and a
   seam welded a few pixels inside the edge. */

.pmark{position:relative;overflow:hidden;
  background:
    radial-gradient(54% 36% at 26% 18%, rgba(255,255,255,.95) 0%,
                    rgba(255,255,255,.34) 44%, rgba(255,255,255,0) 72%),
    radial-gradient(22% 18% at 80% 27%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 76%),
    repeating-linear-gradient(103deg, rgba(255,255,255,.085) 0 1px, rgba(255,255,255,0) 1px 7px),
    repeating-linear-gradient(64deg,  rgba(0,0,0,.055) 0 1px,       rgba(0,0,0,0) 1px 11px),
    repeating-linear-gradient(16deg,  rgba(255,255,255,.05) 0 1px,  rgba(255,255,255,0) 1px 5px),
    linear-gradient(172deg,
      color-mix(in srgb,var(--tint) 52%,#fff) 0%,
      color-mix(in srgb,var(--tint) 24%,#fff) 13%,
      var(--tint) 38%, var(--tint) 62%,
      color-mix(in srgb,var(--tint) 76%,#000) 80%,
      color-mix(in srgb,var(--tint) 62%,#fff) 100%) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--tint) 84%,#000),
    inset 0 1.5px 1px rgba(255,255,255,.55),
    inset 0 -4px 7px color-mix(in srgb,var(--tint) 76%,#000),
    0 6px 13px color-mix(in srgb,var(--tint) 32%,transparent),
    0 2px 4px rgba(14,19,28,.13) !important}

/* The weld. Two skins joined a few millimetres inside the edge is most
   of why a thing reads as inflated rather than printed. */
/* The question mark is not a product, so it wears the neutral rather
   than whatever a missing --tint resolves to. */
.pcard-q{--tint:var(--ink-faint)}

.pmark::before{content:"";position:absolute;inset:3px;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);pointer-events:none}

/* The glyph sits ON the skin, lit from the same side, with the shadow it
   would cast into the dark band below it. */
.pmark svg{position:relative;z-index:1;color:#fff;
  filter:drop-shadow(0 1px 1.5px color-mix(in srgb,var(--tint) 62%,#000))}

/* ── the balloons, EXACTLY as the platform draws them ───────────────
   Lifted from the app's own stylesheet rather than approximated. The
   first attempt let these share the icon tile's rule, whose !important
   overrode the skin — so the site's figures came out with the tile's
   banding and a tighter shadow, and read as a different product.

   Light mode only: the marketing site has no dark theme. */
.lrb{position:relative;display:inline-flex;flex-direction:column;align-items:center;
  gap:0;padding:9px 18px 10px;border-radius:999px;flex:none;overflow:hidden;
  background:
    /* the hard specular — on the TOP LIP, not across the figure. Sitting
       over the first digits it put white on white and the number went
       soft, which is the one thing on this pill that must stay legible. */
    radial-gradient(58% 20% at 27% 11%, rgba(255,255,255,.95) 0%,
                    rgba(255,255,255,.30) 52%, rgba(255,255,255,0) 100%),
    radial-gradient(18% 12% at 82% 18%, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 78%),
    /* the crinkle: three repeating gradients at unrelated angles and
       spacings — one alone is corduroy, and shared factors beat into moire */
    repeating-linear-gradient(103deg, rgba(255,255,255,.085) 0 1px,
                              rgba(255,255,255,0) 1px 7px),
    repeating-linear-gradient(64deg, rgba(0,0,0,.055) 0 1px,
                              rgba(0,0,0,0) 1px 11px),
    repeating-linear-gradient(16deg, rgba(255,255,255,.05) 0 1px,
                              rgba(255,255,255,0) 1px 5px),
    /* the room, in bands */
    linear-gradient(172deg,
      color-mix(in srgb,var(--tint) 58%,#fff) 0%,
      color-mix(in srgb,var(--tint) 26%,#fff) 15%,
      var(--tint) 40%,
      color-mix(in srgb,var(--tint) 74%,#000) 63%,
      var(--tint) 82%,
      color-mix(in srgb,var(--tint) 52%,#fff) 100%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--tint) 82%,#000),
    inset 0 2px 1px rgba(255,255,255,.5),
    inset 0 -8px 13px color-mix(in srgb,var(--tint) 80%,#000),
    0 10px 20px color-mix(in srgb,var(--tint) 38%,transparent),
    0 3px 6px rgba(14,19,28,.16);
  will-change:transform;
  animation:lrBalloonIn .55s cubic-bezier(.22,1.45,.36,1) both,
            lrBalloonDrift 5.4s ease-in-out .55s infinite}

/* The weld, a few pixels inside the edge. */
.offers{--tint:var(--red)}
.lrb::before{content:"";position:absolute;inset:3.5px;border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);pointer-events:none}

.lrb b{position:relative;z-index:1;font-family:var(--head);font-size:20px;font-weight:800;
  letter-spacing:-.025em;line-height:1.15;font-variant-numeric:tabular-nums;
  white-space:nowrap;color:#fff;
  text-shadow:0 1px 0 color-mix(in srgb,var(--tint) 52%,#000),
              0 0 1px color-mix(in srgb,var(--tint) 72%,#000),
              0 2px 8px color-mix(in srgb,var(--tint) 82%,#000)}

.lrb em{position:relative;z-index:1;font-style:normal;font-size:8.5px;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;line-height:1.3;margin-top:1px;
  color:rgba(255,255,255,.95);
  text-shadow:0 1px 2px color-mix(in srgb,var(--tint) 80%,#000)}

@keyframes lrBalloonIn{
  from{transform:translateY(12px) scale(.8);opacity:0}
  to{transform:none;opacity:1}}

@keyframes lrBalloonDrift{
  0%  {transform:translate(0,0) rotate(-1.2deg)}
  25% {transform:translate(3px,-7px) rotate(.6deg)}
  50% {transform:translate(0,-11px) rotate(1.4deg)}
  75% {transform:translate(-3px,-6px) rotate(.2deg)}
  100%{transform:translate(0,0) rotate(-1.2deg)}}

/* Out of step with each other: three in unison reads as a loading state. */
.o:nth-child(3) .lrb{animation-delay:.05s,.9s;  animation-duration:.55s,6.2s}
.o:nth-child(4) .lrb{animation-delay:.10s,.35s; animation-duration:.55s,4.9s;
                     animation-direction:normal,reverse}
.offers:hover .lrb{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){.lrb{animation:none}}

/* ── the offers, as the applicant actually sees them ────────────────
   Four columns: whose it is, the rate against prime, the instalment
   inflated in that bank's colour, and the verdict. It was a rate and a
   plain number, which undersold the one screen the product exists to
   produce. */
.o{grid-template-columns:1fr auto auto;row-gap:10px}
.o-r{display:flex;flex-direction:column;align-items:flex-end;line-height:1.35}
.o-r small{font-family:var(--head);font-size:10.5px;color:var(--ink-faint);letter-spacing:0}
.o-m{display:flex;justify-content:flex-end}
.o-v{grid-column:1/-1;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:12.3px;color:var(--ink-muted);border-top:1px solid var(--rule);padding-top:10px}
.o-best{border-color:color-mix(in srgb,var(--ok) 48%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 26%,transparent)}

.ochip{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;padding:3px 9px;border-radius:999px;white-space:nowrap;
  background:var(--paper);border:1px solid currentColor}
.ochip.ok{color:var(--ok)}
.ochip.mid{color:var(--ink-faint)}
.ochip.best{color:var(--ok);background:var(--ok-wash);border-color:transparent}

@media (max-width:620px){
  .o{grid-template-columns:1fr auto}
  .o-r{grid-column:1;align-items:flex-start}
  .o-m{grid-row:1/3;grid-column:2;align-items:center}
}

/* ══ THE SECTOR PAGES AND THE ARTICLE LIBRARY ════════════════════════
   One page per kind of finance, and the questions people type into a
   search box before they are ready to apply. Everything above is shared
   with the front page; only what follows is theirs. */

/* ── a page that opens on one product ──────────────────────────────
   The front page offers five things at once. These open on one, so the
   mark is the size it is on a pack rather than the size it is in a
   grid, and it wears the product's own tint. */
.ph{padding:clamp(40px,5.2vw,78px) 0 clamp(28px,3.4vw,46px);
  background:linear-gradient(180deg,var(--tint-wash,var(--surface-2)) 0%,var(--ground) 100%);
  border-bottom:1px solid var(--rule)}
.ph-in{display:flex;gap:clamp(18px,2.4vw,34px);align-items:flex-start;flex-wrap:wrap}
.ph-mark{width:clamp(54px,6vw,74px);height:clamp(54px,6vw,74px);border-radius:18px;
  display:grid;place-items:center;flex:none}
.ph-mark svg{width:56%;height:56%}
.ph-t{flex:1 1 420px;min-width:0}
.ph h1{font-size:clamp(2.05rem,4.4vw,3.5rem);line-height:1.03;letter-spacing:-.04em}
.ph .sub{margin-top:14px;max-width:46ch}
.ph .cta{margin-top:26px}

/* the breadcrumb, which is also how somebody gets back up */
.crumb{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:12.5px;font-weight:600;color:var(--ink-faint);margin-bottom:16px}
.crumb a{text-decoration:none;color:var(--ink-muted)}
.crumb a:hover{color:var(--red);text-decoration:underline}
.crumb i{font-style:normal;opacity:.5}

/* ── the facts strip ───────────────────────────────────────────────
   Term, security, deposit. Three things every one of these pages has
   to answer and a visitor should not have to read a paragraph for. */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:14px;
  overflow:hidden;margin-top:clamp(26px,3vw,38px)}
.facts div{background:var(--paper);padding:18px 20px}
.facts dt{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin:0}
.facts dd{margin:7px 0 0;font-size:17px;font-weight:700;letter-spacing:-.015em;
  color:var(--ink);font-variant-numeric:tabular-nums}
.facts dd small{display:block;font-size:12.5px;font-weight:500;letter-spacing:0;
  color:var(--ink-muted);margin-top:3px}

/* ── running prose ─────────────────────────────────────────────────
   Measured at about 68 characters, which is where a line stops being
   something the eye tracks and starts being something it hunts. */
.prose{max-width:68ch;font-size:clamp(16.5px,1.05vw,17.5px);line-height:1.68;
  color:var(--ink-2)}
.prose>*+*{margin-top:1.15em}
.prose h2{font-size:clamp(1.42rem,2.3vw,1.95rem);letter-spacing:-.03em;line-height:1.12;
  color:var(--ink);margin-top:1.9em}
.prose h3{font-size:clamp(1.1rem,1.5vw,1.26rem);letter-spacing:-.02em;color:var(--ink);
  margin-top:1.7em;font-weight:800}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose b,.prose strong{color:var(--ink);font-weight:700}
.prose a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
.prose ul,.prose ol{margin-left:0;padding-left:1.25em}
.prose li+li{margin-top:.5em}
.prose li::marker{color:var(--ink-faint)}

/* a number pulled out of the prose, because a rand belongs in a balloon
   on this platform and nowhere reads it faster than beside the sentence
   that explains it */
.pull{display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  background:var(--surface-2);border:1px solid var(--rule);border-radius:14px;
  padding:18px 20px}
.pull .pull-t{flex:1 1 220px;min-width:0;font-size:14.5px;line-height:1.5;
  color:var(--ink-muted)}
.pull .pull-t b{display:block;color:var(--ink);font-size:15.5px;margin-bottom:3px}

/* the thing a reader must not skim past: a cost, a cap, a lump sum due */
.warnx{border-left:3px solid var(--t-amber);background:var(--t-amber-wash);
  border-radius:0 12px 12px 0;padding:16px 20px;font-size:15px;line-height:1.6;
  color:var(--ink-2)}
.warnx b{color:var(--ink)}

/* ── what you will need ────────────────────────────────────────────
   Straight off the application's own checklist, so the page cannot
   promise a document set the form then disagrees with. */
.need{list-style:none;margin:0;padding:0;display:grid;gap:9px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.need li{display:flex;gap:11px;align-items:flex-start;background:var(--paper);
  border:1px solid var(--rule);border-radius:12px;padding:14px 16px;
  font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.need li b{display:block;color:var(--ink);font-size:15px;margin-bottom:2px}
.need .needtick{flex:none;width:20px;height:20px;border-radius:50%;display:grid;
  place-items:center;background:var(--tint,var(--red));color:#fff;
  font-size:11px;font-weight:800;margin-top:1px}
.need .opt .needtick{background:var(--surface-3);color:var(--ink-faint)}

/* ── questions ─────────────────────────────────────────────────────
   Open by default. A page that hides its answers behind a click is a
   page a search engine reads as having no answers. */
.qa{border-top:1px solid var(--rule);margin-top:clamp(30px,3.4vw,44px)}
.qa details{border-bottom:1px solid var(--rule)}
.qa summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;position:relative;
  font-size:16.5px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--ink-faint);border-bottom:2px solid var(--ink-faint);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.qa details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.qa summary:hover{color:var(--red)}
.qa summary:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:6px}
.qa .ans{padding:0 0 20px;font-size:15.5px;line-height:1.65;color:var(--ink-2);
  max-width:68ch}
.qa .ans>*+*{margin-top:.9em}
.qa .ans a{color:var(--red);text-decoration:underline;text-underline-offset:2px}

/* ── the article library ───────────────────────────────────────────── */
.alist{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.acard{display:flex;flex-direction:column;gap:9px;height:100%;text-decoration:none;
  color:inherit;background:var(--paper);border:1px solid var(--rule);border-radius:14px;
  padding:22px 22px 20px;box-shadow:var(--sh);
  transition:border-color .18s ease,box-shadow .22s ease,transform .26s cubic-bezier(.22,1,.3,1)}
.acard:hover{border-color:#cfd6e0;box-shadow:var(--lift);transform:translateY(-2px)}
.acard .akind{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red)}
.acard b{font-size:17.5px;font-weight:800;letter-spacing:-.025em;line-height:1.2;
  color:var(--ink)}
.acard span{font-size:14px;line-height:1.55;color:var(--ink-muted)}
.acard .agv{margin-top:auto;padding-top:10px;font-size:13px;font-weight:700;color:var(--red)}

/* ── the band at the bottom of every one of these ──────────────────── */
.endcta{background:var(--charcoal);color:#E7EBF2;
  padding-block:clamp(40px,5vw,72px);border-top:1px solid var(--rule)}
.endcta h2{color:#fff;font-size:clamp(1.65rem,3vw,2.5rem)}
.endcta p{margin-top:13px;color:#A9B3C4;font-size:16px;line-height:1.6;max-width:52ch}
.endcta .cta{margin-top:24px;display:flex;gap:11px;flex-wrap:wrap}
.endcta .btn-o{background:transparent;color:#fff;border-color:rgba(255,255,255,.26);
  box-shadow:none}
.endcta .btn-o:hover{background:rgba(255,255,255,.09)}

/* the other four, so nobody leaves because this was the wrong page */
.others{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  margin-top:clamp(28px,3vw,40px)}
.oth{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;
  background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:13px 15px;
  font-size:14px;font-weight:700;letter-spacing:-.01em;
  transition:border-color .18s ease,transform .26s cubic-bezier(.22,1,.3,1)}
.oth:hover{border-color:#cfd6e0;transform:translateY(-2px)}
.oth .pmark{width:30px;height:30px;border-radius:9px;flex:none}
.oth .pmark svg{width:60%;height:60%}

.sect{padding-block:clamp(38px,4.6vw,70px)}
.sect+.sect{border-top:1px solid var(--rule)}
.sect>.wrap>h2{font-size:clamp(1.6rem,2.9vw,2.4rem);letter-spacing:-.035em}
.sect-lead{margin-top:14px}

@media (max-width:620px){
  .ph-mark{width:48px;height:48px;border-radius:14px}
  .facts dd{font-size:16px}
}

/* ── the calculators ───────────────────────────────────────────────────
   /what-can-i-afford and /what-will-it-cost, which used to live on the
   app and could not be found by anybody because that host is noindex.

   Two columns: what you tell it on the left, what it says on the right.
   The left column sticks on a wide screen, because somebody dragging a
   slider is watching the right one and should not have to scroll back to
   the handle. One column below 960px, inputs first — on a phone the thing
   you touch belongs above the thing it changes. */
.ctool{display:grid;gap:clamp(18px,2vw,30px);align-items:start;
  grid-template-columns:minmax(0,370px) minmax(0,1fr);
  margin-top:clamp(26px,3vw,40px)}
@media (max-width:960px){.ctool{grid-template-columns:minmax(0,1fr)}}

.cin{background:var(--paper);border:1px solid var(--rule);border-radius:16px;
  padding:clamp(20px,2vw,26px);box-shadow:var(--sh);position:sticky;top:18px}
@media (max-width:960px){.cin{position:static}}

.ch{font-family:var(--head);font-size:19px;font-weight:800;letter-spacing:-.025em;
  margin:0;color:var(--ink)}
.chs{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--ink-muted)}

.cf{margin-top:20px}
.cf label{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.01em;
  color:var(--ink);margin-bottom:7px}
.cf small{display:block;margin-top:7px;font-size:12.5px;line-height:1.45;
  color:var(--ink-faint)}

/* A rand sign that is part of the box rather than typed into it: people type
   "42 000" and they type "R42 000", and the box should not care. */
.cmoney{display:flex;align-items:stretch;background:var(--ground);
  border:1px solid var(--rule-2);border-radius:11px;overflow:hidden;
  transition:border-color .16s ease,box-shadow .16s ease}
.cmoney:focus-within{border-color:var(--red);box-shadow:0 0 0 3px var(--red-wash)}
.cmoney span{display:grid;place-items:center;padding:0 2px 0 13px;font-weight:700;
  font-size:17px;color:var(--ink-faint)}
.cmoney input{flex:1 1 auto;min-width:0;border:0;background:transparent;
  font-family:var(--head);font-size:21px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--ink);padding:11px 13px 11px 6px;width:100%}
.cmoney input:focus{outline:none}

.crange{-webkit-appearance:none;appearance:none;width:100%;margin:13px 0 0;
  height:4px;border-radius:999px;background:var(--surface-3);cursor:pointer}
.crange::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;
  height:20px;border-radius:50%;background:var(--red);border:3px solid var(--paper);
  box-shadow:0 1px 4px rgba(14,19,28,.3);cursor:grab}
.crange::-webkit-slider-thumb:active{cursor:grabbing;background:var(--red-deep)}
.crange::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--red);
  border:3px solid var(--paper);box-shadow:0 1px 4px rgba(14,19,28,.3);cursor:grab}
.crange:focus-visible{outline:2px solid var(--red);outline-offset:4px}

.cnote{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--rule);
  font-size:12.5px;line-height:1.5;color:var(--ink-faint)}

.cnew{display:flex;gap:11px;align-items:flex-start;margin-top:20px;cursor:pointer;
  background:var(--ground);border:1px solid var(--rule);border-radius:12px;
  padding:14px 15px}
.cnew input{margin:2px 0 0;flex:none;width:17px;height:17px;accent-color:var(--red)}
.cnew span{font-size:12.5px;line-height:1.5;color:var(--ink-muted)}
.cnew b{display:block;font-size:14px;color:var(--ink);margin-bottom:3px}

/* ── the answer ─────────────────────────────────────────────────────── */
.cout{min-width:0;display:grid;gap:clamp(16px,1.8vw,22px)}

.cans{background:var(--paper);border:1px solid var(--rule);border-radius:16px;
  padding:clamp(22px,2.4vw,30px);box-shadow:var(--sh);text-align:center}
.canst{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:16px}
.lrb.cbig{padding:14px 30px 15px}
.lrb.cbig b{font-size:clamp(27px,3.6vw,38px)}
.lrb.cbig em{font-size:9.5px}
.cwhy{margin-top:16px;font-size:14.5px;line-height:1.55;color:var(--ink-muted);
  max-width:46ch;margin-left:auto;margin-right:auto}

/* The two tests, side by side, because the point of the page is that a bank
   does both and believes the smaller one. */
.ctests{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.ctests div{background:var(--surface-2);border:1px solid var(--rule);border-radius:12px;
  padding:14px 16px}
.ctests span{display:block;font-size:12.5px;color:var(--ink-muted);line-height:1.4}
.ctests b{display:block;margin-top:5px;font-family:var(--head);font-size:19px;
  font-weight:800;letter-spacing:-.025em;color:var(--ink)}

.cwhat{margin:clamp(8px,1vw,14px) 0 0;font-family:var(--head);
  font-size:clamp(1.15rem,1.8vw,1.4rem);font-weight:800;letter-spacing:-.03em;
  color:var(--ink)}

.cgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(252px,1fr))}
.ccard{display:flex;flex-direction:column;gap:13px;background:var(--paper);
  border:1px solid var(--rule);border-radius:15px;padding:18px 18px 16px;
  box-shadow:var(--sh);min-width:0}
.ccard-h{display:flex;align-items:center;gap:11px;min-width:0}
.ccard .pmark{width:38px;height:38px;border-radius:11px}
.ccard .pmark svg{width:21px;height:21px}
.ccard-n{min-width:0}
.ccard-n b{display:block;font-family:var(--head);font-size:15px;font-weight:800;
  letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.ccard-n i{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint)}
.ccard-v{align-self:flex-start}
.lrb.ccard-v b{font-size:21px}

.ccard-r{display:grid;gap:7px;padding-top:12px;border-top:1px solid var(--rule)}
.ccard-r div{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.ccard-r span{font-size:13px;color:var(--ink-muted);line-height:1.35}
.ccard-r b{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap}
.cbad{color:var(--red-deep)}

.ccard-b{margin:0;font-size:13px;line-height:1.5;color:var(--ink-muted)}
.ccard-b a{color:var(--tint);font-weight:700;text-decoration:none;white-space:nowrap}
.ccard-b a:hover{text-decoration:underline}
.ccard-a{margin:auto 0 0;font-size:11.5px;line-height:1.45;color:var(--ink-faint)}

.cassume{margin:0;background:var(--surface-2);border:1px solid var(--rule);
  border-radius:13px;padding:16px 18px;font-size:13.5px;line-height:1.6;
  color:var(--ink-muted)}
.cassume b{color:var(--ink)}

/* ── the cost sheet ────────────────────────────────────────────────────
   Two panels because there are two attorneys and two deeds office levies,
   which is the part that surprises people most. */
.cpanel{background:var(--paper);border:1px solid var(--rule);border-radius:16px;
  box-shadow:var(--sh);overflow:hidden}
.cpanel[hidden]{display:none}
.cpanel-h{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;
  padding:18px 20px;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.cpanel-h h3{margin:0;font-family:var(--head);font-size:16.5px;font-weight:800;
  letter-spacing:-.025em;color:var(--ink)}
.cpanel-h p{margin:5px 0 0;font-size:13px;line-height:1.45;color:var(--ink-muted);
  max-width:44ch}
.cpanel-h b{font-family:var(--head);font-size:21px;font-weight:800;letter-spacing:-.03em;
  color:var(--ink);white-space:nowrap}

.ctab{width:100%;border-collapse:collapse}
.ctab td{padding:13px 20px;border-bottom:1px solid var(--rule);font-size:14.5px;
  color:var(--ink-2);vertical-align:top}
.ctab tr:last-child td{border-bottom:0}
.ctab td small{display:block;margin-top:3px;font-size:12px;line-height:1.45;
  color:var(--ink-faint)}
.ctab td:last-child{text-align:right;white-space:nowrap;font-weight:700;color:var(--ink);
  width:1%}

.cexcl{background:var(--surface-2);border:1px solid var(--rule);border-radius:13px;
  padding:16px 18px;font-size:13.5px;line-height:1.6;color:var(--ink-muted)}
.cexcl b{display:block;color:var(--ink);font-size:14.5px;margin-bottom:5px}

/* The other calculator, at the foot of each. Somebody who has just learned
   what they can borrow has not yet learned what the day itself costs. */
.cgo{display:flex;gap:16px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;background:var(--red-wash);border:1px solid var(--red);
  border-radius:15px;padding:20px 22px;margin-top:clamp(28px,3vw,40px)}
.cgo b{display:block;font-family:var(--head);font-size:16.5px;font-weight:800;
  letter-spacing:-.025em;color:var(--ink)}
.cgo small{display:block;margin-top:4px;font-size:13.5px;line-height:1.5;
  color:var(--ink-2);max-width:52ch}

@media (max-width:620px){
  .cmoney input{font-size:19px}
  .lrb.cbig{padding:12px 22px 13px}
  .ctab td{padding:12px 15px}
  .cpanel-h{padding:16px 15px}
}