/* Layout: one column, generous air, a single repeated action. Tokens, type and
   8px radii are lendmaxcapital.ca's own, so the page reads as the same company.
   Prime blue is the action colour; the maple red is reserved for the mark. */
:root{
  --ground:#F8FAFC; --surface:#FFFFFF; --surface-2:#F1F5F9; --surface-3:#E2E8F0;
  --hair:#E2E8F0; --hair-soft:#EEF2F7; --hair-strong:#CBD5E1;
  --navy:#0B192C; --slate:#1E293B; --body:#334155; --muted:#5A6B81;
  --prime:#0369A1; --prime-hover:#0284C7; --prime-soft:#F0F9FF; --prime-line:#BAE6FD;
  --sky:#38BDF8; --leaf:#DC2626; --good:#15803D;
  --btn-fg:#FFFFFF;
  /* Formerly the on-navy ink. The panels are light now, so these read as
     body, secondary and hairline against a pale surface. */
  --on-dark:var(--body); --on-dark-muted:var(--muted); --on-dark-line:var(--hair);
  --f-display:'Plus Jakarta Sans','Inter','Helvetica Neue',Arial,sans-serif;
  --f-body:'Inter','Helvetica Neue',Arial,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --r-card:8px; --r-ctl:6px; --r-pill:999px;
  --sh-1:0 1px 3px rgba(11,25,44,.04),0 1px 2px rgba(11,25,44,.02);
  --sh-2:0 10px 25px -5px rgba(11,25,44,.08),0 8px 10px -6px rgba(11,25,44,.04);
  --maxw:1120px;
  color-scheme:light;
}
/* One theme. An ad landing page has to look the same to everyone who scans the
   code, so the page does not follow the operating system into dark mode. */

*{box-sizing:border-box}
body{background:var(--ground);color:var(--body);font-family:var(--f-body);font-size:17px;line-height:1.65;margin:0;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--surface)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.col{max-width:660px}
.sec{padding-block:clamp(60px,9vw,124px)}
h1,h2,h3{font-family:var(--f-display);color:var(--navy);text-wrap:balance;margin:0;letter-spacing:-.025em;line-height:1.1}
h1{font-size:clamp(36px,6.2vw,60px);font-weight:800}
h2{font-size:clamp(28px,4vw,42px);font-weight:700}
h3{font-size:20px;font-weight:700;letter-spacing:-.015em;line-height:1.3}
p{margin:0}
.lede{font-size:clamp(18px,2.1vw,21px);line-height:1.6;color:var(--body)}
.eyebrow{font-family:var(--f-mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--prime);display:block;margin-bottom:16px}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
a{color:var(--prime)}
:focus-visible{outline:3px solid var(--prime);outline-offset:2px;border-radius:4px}
/* The old inverted band, now a pale blue one. It still separates the step
   sequence from the sections either side of it without going dark. */
.dark{background:var(--prime-soft);color:var(--body);border-top:1px solid var(--prime-line);border-bottom:1px solid var(--prime-line)}
.dark h2,.dark h3{color:var(--navy)}
.dark .eyebrow{color:var(--prime)}

/* ---------- buttons: one action, one look ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:54px;padding:0 30px;border-radius:var(--r-ctl);border:0;font-family:var(--f-display);font-weight:700;font-size:17px;letter-spacing:-.01em;text-decoration:none;cursor:pointer;background:var(--prime);color:var(--btn-fg);transition:background .14s ease}
.btn:hover{background:var(--prime-hover)}
.btn.sm{min-height:42px;padding:0 17px;font-size:15px}
.btn.outline{background:transparent;color:var(--prime);box-shadow:inset 0 0 0 1.5px var(--prime-line)}
.btn.outline:hover{background:var(--prime-soft)}
.btn.full{width:100%}

/* ---------- header ---------- */
.head{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--surface);border-bottom:1px solid var(--hair);box-shadow:var(--sh-1)}
.head .wrap{display:flex;align-items:center;gap:16px;padding-block:13px}
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand img{height:30px;width:auto}
@media (max-width:620px){.brand img{height:25px}}
.head .sp{flex:1}
.head .tel{color:var(--muted);text-decoration:none;font-family:var(--f-mono);font-size:14px;white-space:nowrap}
.head .tel:hover{color:var(--navy)}
.head .apr-link{color:var(--prime)}
@media (max-width:760px){.head .apr-link{display:none}}
@media (max-width:560px){.head .tel{display:none}}

/* ---------- hero: promise on the left, product tile on the right ---------- */
.hero{background:linear-gradient(180deg,var(--prime-soft) 0%,var(--ground) 70%)}
.hero .wrap{padding-block:clamp(48px,7.5vw,100px) clamp(44px,6.5vw,84px);display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(34px,5vw,64px);align-items:center}
@media (max-width:880px){.hero .wrap{grid-template-columns:1fr;gap:38px}}
.heroleft{min-width:0}
.hero h1{max-width:17ch}
.hero .lede{margin-top:24px;max-width:48ch;color:var(--body)}
.hero .act{margin-top:34px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.under{font-size:14.5px;color:var(--muted)}
.under b{color:var(--slate);font-weight:600}

/* product tile — the 40% column */
/* On a pale page the tile earns its weight from a white face, a blue hairline
   and the deeper shadow rather than from an inverted block. */
.tile{background:var(--surface);color:var(--body);border:1px solid var(--prime-line);border-top:3px solid var(--prime);border-radius:var(--r-card);padding:clamp(24px,3vw,32px);min-width:0;box-shadow:var(--sh-2)}
.tile .tname{font-family:var(--f-display);font-weight:800;font-size:clamp(23px,2.6vw,28px);color:var(--navy);letter-spacing:-.025em;line-height:1.15;margin-bottom:24px}
.tile ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:17px}
.tile li{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;font-size:16.5px;line-height:1.45;color:var(--body)}
.tile li svg{width:18px;height:18px;flex:none;color:var(--prime);margin-top:4px}
.tile li b{color:var(--navy);font-weight:700}
.tile .btn{margin-top:26px;width:100%}
.tile .fn{font-size:12px;color:var(--muted);margin-top:14px;text-align:center;line-height:1.5}
sup a{color:inherit;text-decoration:none;font-size:.7em;font-weight:600;padding-left:1px}
sup a:hover{text-decoration:underline}
.tile .tm{font-size:.42em;font-weight:700;letter-spacing:0;top:-.9em;color:var(--muted)}
.tile sup a{color:var(--prime)}

/* ---------- quiet proof strip ---------- */
.strip{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:var(--surface)}
.strip .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,4vw,48px);padding-block:clamp(30px,4vw,44px);text-align:center}
.strip .n{font-family:var(--f-display);font-weight:800;font-size:clamp(28px,4.4vw,40px);color:var(--navy);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.strip .k{font-size:14.5px;color:var(--muted);margin-top:10px;line-height:1.45}
@media (max-width:600px){.strip .wrap{grid-template-columns:1fr;gap:26px}}

/* ---------- benefits: four, airy, no boxes ---------- */
.bens{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,64px) clamp(34px,6vw,80px);margin-top:clamp(40px,5vw,60px)}
@media (max-width:720px){.bens{grid-template-columns:1fr}}
.ben{min-width:0}
.ic{width:42px;height:42px;border-radius:var(--r-card);background:var(--prime-soft);color:var(--prime);display:grid;place-items:center;margin-bottom:20px;box-shadow:inset 0 0 0 1px var(--prime-line)}
.ic svg{width:21px;height:21px}
.ben h3{margin-bottom:11px}
.ben p{color:var(--muted);font-size:16.5px}

/* ---------- estimator ---------- */
.est{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-card);box-shadow:var(--sh-2);overflow:hidden;margin-top:clamp(34px,4vw,50px)}
.estgrid{display:grid;grid-template-columns:1fr 320px}
@media (max-width:820px){.estgrid{grid-template-columns:1fr}}
.estin{padding:clamp(24px,3.4vw,40px);display:flex;flex-direction:column;gap:clamp(26px,3vw,36px);min-width:0}
.field label{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:16px;font-weight:600;color:var(--slate);margin-bottom:10px}
.field .val{font-family:var(--f-mono);font-size:17px;font-weight:500;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
.hint{font-size:14px;color:var(--muted);margin-top:9px;line-height:1.5}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:0;display:block;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:var(--r-pill);background:var(--surface-3)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:var(--prime);border:4px solid var(--surface);box-shadow:0 1px 5px rgba(11,25,44,.28),0 0 0 1px var(--prime-line);margin-top:-11px}
input[type=range]::-moz-range-track{height:6px;border-radius:var(--r-pill);background:var(--surface-3)}
input[type=range]::-moz-range-thumb{width:21px;height:21px;border-radius:50%;background:var(--prime);border:4px solid var(--surface)}
.estout{background:var(--prime-soft);color:var(--body);border-left:1px solid var(--prime-line);padding:clamp(24px,3.4vw,36px);display:flex;flex-direction:column;gap:22px;min-width:0}
.estout .lbl{font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--prime)}
.big{font-family:var(--f-display);font-weight:800;font-size:clamp(42px,8vw,56px);letter-spacing:-.035em;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums;margin-top:10px}
.big.txt{font-size:clamp(25px,4.6vw,32px);letter-spacing:-.025em;line-height:1.1}
.rows{display:flex;flex-direction:column;border-top:1px solid var(--prime-line)}
.rows div{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--prime-line);font-size:15px}
.rows span:first-child{color:var(--muted)}
.rows span:last-child{font-family:var(--f-mono);font-variant-numeric:tabular-nums;color:var(--navy);font-weight:500;text-align:right}
.note{background:var(--surface);border:1px solid var(--prime-line);border-radius:var(--r-ctl);padding:13px 15px;font-size:14px;color:var(--body);line-height:1.5}
.fine{font-size:12px;color:var(--muted);margin-top:16px;line-height:1.65;max-width:84ch}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(26px,3.5vw,44px);margin-top:clamp(40px,5vw,60px)}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.steps{grid-template-columns:1fr}}
.step{min-width:0}
.step .num{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--prime-line)}
.step .badge{width:36px;height:36px;flex:none;border-radius:50%;background:var(--prime);color:#fff;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:800;font-size:17px;line-height:1;box-shadow:0 4px 10px -2px rgba(3,105,161,.45)}
.step .numtxt{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--prime)}
.step h3{margin-bottom:10px;font-size:22px;font-weight:800;letter-spacing:-.025em;color:var(--navy)}
.step p{color:var(--muted);font-size:16px}

/* ---------- bank comparison table ---------- */
.cmpwrap{overflow-x:auto;border:1px solid var(--hair);border-radius:var(--r-card);background:var(--surface);margin-top:clamp(32px,4vw,48px)}
table.cmp{border-collapse:collapse;width:100%;min-width:560px;font-size:16px}
table.cmp th,table.cmp td{text-align:left;padding:16px 20px;border-bottom:1px solid var(--hair-soft);vertical-align:top}
table.cmp thead th{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--hair-strong);white-space:nowrap}
table.cmp thead th.us{color:var(--prime);background:var(--prime-soft)}
table.cmp tbody tr:last-child th,table.cmp tbody tr:last-child td{border-bottom:0}
table.cmp tbody th{font-family:var(--f-display);font-weight:700;color:var(--navy);letter-spacing:-.015em;width:26%}
table.cmp td.bank{color:var(--muted);width:37%}
table.cmp td.bank.neg{color:var(--leaf)}
table.cmp td.us{color:var(--slate);background:var(--prime-soft);width:37%;font-weight:500}
.ck{display:flex;align-items:flex-start;gap:10px}
.ck svg{width:18px;height:18px;flex:none;color:var(--good);margin-top:3px}
.ck.even svg{color:var(--muted)}
@media (max-width:620px){
  /* No side-scrolling on a phone: every row becomes its own card, each cell
     labelled by the column it came from. */
  .cmpwrap{overflow-x:visible;border:0;background:transparent;border-radius:0}
  table.cmp{display:block;min-width:0;font-size:15.5px}
  table.cmp thead{display:none}
  table.cmp tbody{display:block}
  table.cmp tbody tr{display:block;border:1px solid var(--hair);border-radius:var(--r-card);background:var(--surface);padding:16px 17px;margin-bottom:11px}
  table.cmp tbody tr:last-child{margin-bottom:0}
  table.cmp tbody th,table.cmp tbody td{display:block;width:auto;padding:0;border:0;background:none}
  table.cmp tbody th{font-size:17.5px;margin-bottom:13px}
  table.cmp tbody td{padding:11px 13px;border-radius:var(--r-ctl);background:var(--surface-2);line-height:1.45}
  table.cmp tbody td.us{background:var(--prime-soft);box-shadow:inset 0 0 0 1px var(--prime-line);margin-top:8px}
  /* .bank/.us carry a percentage width in the desktop rule; beat it by specificity */
  table.cmp tbody td.bank,table.cmp tbody td.us{width:auto;padding:11px 13px}
  table.cmp tbody td::before{content:attr(data-l);display:block;font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
  table.cmp tbody td.us::before{color:var(--prime)}
}

/* ---------- reviews ---------- */
.slot{border:1px dashed var(--hair-strong);border-radius:var(--r-card);padding:clamp(24px,3.4vw,38px);background:var(--surface);margin-top:clamp(30px,4vw,44px)}
.slot h3{margin:0 0 12px}
.slot p{color:var(--muted);font-size:16.5px;max-width:62ch}
.slot ul{margin:16px 0 0;padding-left:22px;color:var(--muted);font-size:16.5px;line-height:1.8}
.slot ul strong{color:var(--slate)}
.gline{display:flex;align-items:center;gap:11px;margin-bottom:22px;font-size:15px;color:var(--muted)}

/* ---------- faq ---------- */
details{border-bottom:1px solid var(--hair)}
details:first-of-type{border-top:1px solid var(--hair)}
summary{cursor:pointer;list-style:none;padding:24px 0;font-family:var(--f-display);font-weight:700;font-size:18.5px;color:var(--navy);display:flex;justify-content:space-between;gap:20px;align-items:center;min-height:48px;letter-spacing:-.015em}
summary::-webkit-details-marker{display:none}
summary::after{content:"";width:11px;height:11px;flex:none;border-right:2px solid var(--prime);border-bottom:2px solid var(--prime);transform:rotate(45deg) translateY(-3px);transition:transform .18s ease}
details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
details .ans{padding:0 0 26px;color:var(--muted);font-size:16.5px;max-width:64ch}
details .ans p+p{margin-top:13px}
.faqs{margin-top:clamp(28px,3.5vw,44px)}
h3.faqgrp{font-family:var(--f-mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--prime);margin:clamp(34px,4vw,48px) 0 0;padding-bottom:4px}
h3.faqgrp:first-child{margin-top:0}
.faqgrp+details{border-top:1px solid var(--hair)}
details:first-of-type{border-top:1px solid var(--hair)}
@media (max-width:620px){
  summary{font-size:17px;padding:20px 0;gap:14px}
  details .ans{padding-bottom:22px;font-size:16px}
}

/* ---------- close + footer ---------- */
/* A pale wash bookends the page against the hero's. */
.close{background:linear-gradient(180deg,var(--surface) 0%,var(--prime-soft) 100%);border-top:1px solid var(--hair)}
.close .wrap{padding-block:clamp(60px,9vw,120px);text-align:center}
.close h2{max-width:21ch;margin:0 auto}
.close .lede{color:var(--body);margin:22px auto 0;max-width:44ch}
.close .act{margin-top:38px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
footer{background:var(--surface-2);border-top:1px solid var(--hair-strong);color:var(--muted)}
footer .wrap{padding-block:44px}
footer .legal,footer .addr,footer ol.notes{color:var(--muted)}
footer .legal.key{color:var(--slate)}
footer .addr b{color:var(--navy)}
footer ol.notes li::marker{color:var(--slate)}
footer a{color:var(--prime)}
.frow{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--hair-strong)}
.frow img{height:28px;width:auto}
.frow a{color:var(--muted);text-decoration:none;font-size:15px}
.frow a:hover{color:var(--navy)}
.legal{font-size:12px;line-height:1.65;color:var(--muted);max-width:86ch}
.legal.key{font-size:12.5px;color:var(--slate);font-weight:500;margin-bottom:14px}
.addr{font-size:12px;line-height:1.65;color:var(--muted);margin-bottom:14px}
.addr b{color:var(--slate);font-weight:600}
ol.notes{font-size:12px;line-height:1.65;color:var(--muted);max-width:86ch;margin:14px 0 0;padding-left:20px;scroll-margin-top:90px}
ol.notes li{margin-bottom:9px}
ol.notes li::marker{color:var(--slate);font-weight:600}

/* ---------- product spec table ---------- */
.tscroll{overflow-x:auto;border:1px solid var(--hair);border-radius:var(--r-card);background:var(--surface);margin-top:clamp(32px,4vw,48px)}
table.spec{border-collapse:collapse;width:100%;min-width:480px;font-size:15.5px;line-height:1.45}
table.spec th,table.spec td{text-align:left;padding:12px 18px;border-bottom:1px solid var(--hair-soft);vertical-align:top;transition:color .12s ease}
table.spec tr:last-child th,table.spec tr:last-child td{border-bottom:0}
table.spec th{font-family:var(--f-body);font-weight:500;color:var(--muted);width:44%;white-space:nowrap}
table.spec td{font-family:var(--f-display);font-weight:700;color:var(--navy);letter-spacing:-.015em}
table.spec td .sub{display:block;font-family:var(--f-body);font-weight:400;font-size:13.5px;color:var(--muted);letter-spacing:0;margin-top:2px}
/* The whole row lights up on hover so the eye can track across a wide table. */
table.spec tbody tr{transition:background .12s ease}
table.spec tbody tr:hover{background:var(--navy)}
table.spec tbody tr:hover th,table.spec tbody tr:hover td,table.spec tbody tr:hover .sub{color:#fff}
table.spec tbody tr:hover .sub{color:rgba(255,255,255,.72)}
@media (max-width:560px){table.spec{min-width:0}table.spec th,table.spec td{padding:14px 16px;white-space:normal}table.spec th{width:46%}}

/* small grey disclosure text */
.disc{font-size:12px;line-height:1.65;color:var(--muted);margin-top:14px;max-width:84ch}

/* ---------- pricing callout (links to the scenarios page) ---------- */
.price-cta{margin-top:clamp(28px,3.5vw,40px);border:1px solid var(--prime-line);background:var(--prime-soft);border-radius:var(--r-card);padding:clamp(20px,3vw,28px);display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.price-cta div{flex:1 1 320px;min-width:0}
.price-cta h3{font-size:18px;margin-bottom:8px}
.price-cta p{font-size:15.5px;color:var(--muted)}

/* ---------- account access row ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,68px);align-items:center;margin-top:clamp(36px,4.5vw,54px)}
.split.reverse{margin-top:0}
@media (max-width:820px){
  .split{grid-template-columns:1fr;gap:34px}
  /* keep the photo under the copy when it stacks, whichever side it sits on */
  .split.reverse figure{order:2}
}
ul.uses{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
ul.uses li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:16.5px;color:var(--slate)}
ul.uses li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--prime);margin-top:9px}
.caution{display:flex;gap:12px;align-items:flex-start;margin-top:24px;padding:15px 17px;border-left:3px solid var(--hair-strong);background:var(--surface-2);border-radius:0 var(--r-ctl) var(--r-ctl) 0;font-size:14.5px;color:var(--muted);line-height:1.55}
.caution .cico{width:21px;height:21px;flex:none;color:var(--prime);margin-top:1px}
.shotcol{display:flex;flex-direction:column;gap:18px;min-width:0}
.shotcol .btn{width:100%}
.shot{margin:0;border-radius:var(--r-card);overflow:hidden;background:var(--surface-2);max-width:100%;min-width:0;box-shadow:var(--sh-2)}
.shot img{width:100%;height:auto}
.feats{display:flex;flex-direction:column;gap:clamp(24px,3vw,32px);min-width:0}
.feat{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.feat .fi{width:38px;height:38px;border-radius:var(--r-card);background:var(--prime-soft);color:var(--prime);display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--prime-line)}
.feat .fi svg{width:19px;height:19px}
.feat h3{font-size:18.5px;margin-bottom:7px}
.feat p{color:var(--muted);font-size:16px}
/* ---------- phone pass ---------- */
@media (max-width:620px){
  .sec{padding-block:clamp(48px,11vw,70px)}
  h1{letter-spacing:-.03em}
  .hero .wrap{padding-block:34px 40px}
  .hero .act{margin-top:28px;align-self:stretch}
  .hero .act .btn{width:100%}
  .tile{padding:24px 22px}
  .tile ul{gap:15px}
  /* In a column flex container `flex:1 1 320px` grows down the page, which
     left a tall gap between the copy and the button. */
  .price-cta{flex-direction:column;align-items:stretch;gap:16px}
  .price-cta div{flex:0 1 auto}
  .price-cta .btn{width:100%}
  .feat{grid-template-columns:1fr;gap:12px}
  .slot{padding:22px 20px}
  footer .frow{gap:12px 20px}
  .frow img{height:24px}
}
/* The estimate panel is the conversion point, so on a phone the number sits
   directly under the sliders rather than below a fold of fine print. */
@media (max-width:820px){
  .estout{gap:18px}
  .big{font-size:clamp(38px,11vw,48px)}
}

/* ---------- sticky action bar (phones only) ---------- */
.mcta{display:none}
@media (max-width:760px){
  .mcta{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:60;
        padding:10px max(12px,env(safe-area-inset-left,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-right,0px));
        background:var(--surface);border-top:1px solid var(--hair);box-shadow:0 -8px 24px rgba(11,25,44,.10);
        transform:translateY(130%);transition:transform .22s ease;will-change:transform}
  .mcta[data-on]{transform:none}
  .mcta .btn{flex:1 1 auto;min-height:50px;font-size:16px;padding:0 16px}
  .mcta .btn.outline{flex:0 0 auto;padding:0 20px;box-shadow:inset 0 0 0 1.5px var(--prime-line)}
  footer .wrap{padding-bottom:86px}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- APR worked-example table (shares .cmp's skeleton) ---------- */
table.apr{min-width:660px}
table.apr thead th{white-space:normal}
table.apr tbody th{width:auto;white-space:nowrap}
table.apr tbody td{font-family:var(--f-mono);font-variant-numeric:tabular-nums;color:var(--slate);width:auto}
table.apr tbody td.us{font-weight:600;color:var(--navy)}
@media (max-width:620px){
  table.apr{min-width:0}
  table.apr tbody th{font-size:19px}
  table.apr tbody td{display:flex;justify-content:space-between;gap:14px;align-items:baseline;margin-bottom:6px}
  table.apr tbody td:last-child{margin-bottom:0}
  table.apr tbody td::before{margin-bottom:0;font-family:var(--f-mono)}
}

/* ---------- what the line gets used for ---------- */
.usegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.2vw,26px);margin-top:clamp(38px,4.5vw,56px)}
.use{min-width:0;padding:clamp(18px,2vw,24px);border:1px solid var(--hair);border-radius:var(--r-card);background:var(--surface);
     transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.use:hover{border-color:var(--prime-line);box-shadow:var(--sh-2);transform:translateY(-2px)}
.uico{width:42px;height:42px;border-radius:var(--r-card);background:var(--prime-soft);color:var(--prime);
      display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--prime-line);margin-bottom:16px}
.uico svg{width:22px;height:22px}
.use h3{font-size:17px;font-weight:700;margin-bottom:7px;letter-spacing:-.015em}
.use p{font-size:14.5px;color:var(--muted);line-height:1.55}
@media (max-width:1040px){.usegrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:780px){.usegrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:430px){
  .usegrid{grid-template-columns:1fr;gap:12px}
  .use{display:grid;grid-template-columns:auto 1fr;gap:0 15px;align-items:start;padding:16px}
  .uico{width:38px;height:38px;margin-bottom:0;grid-row:span 2}
  .use h3{align-self:center;margin-bottom:4px}
}

/* ---------- request a callback ---------- */
.cbsec{background:linear-gradient(180deg,var(--prime-soft) 0%,var(--ground) 68%);border-top:1px solid var(--prime-line)}
.cbgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,4.5vw,60px);align-items:center}
.cbleft{min-width:0}
.cbshot{margin:clamp(30px,3.6vw,42px) 0 0;min-width:0}
.cbshot img{display:block;width:100%;height:auto;border-radius:var(--r-card);box-shadow:var(--sh-2)}
.cbshot figcaption{margin-top:16px;font-size:14.5px;line-height:1.6;color:var(--muted)}
.cbform{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-card);box-shadow:var(--sh-2);
        padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:16px;min-width:0}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.f2{grid-template-columns:1fr}}
.fld{display:block;min-width:0;border:0;padding:0;margin:0}
.fld>span,.fld legend{display:block;font-size:14.5px;font-weight:600;color:var(--slate);margin-bottom:7px;padding:0}
.fld>span em{font-style:normal;font-weight:400;color:var(--muted)}
.cbform input[type=text],.cbform input[type=tel],.cbform input[type=email]{
  width:100%;min-height:50px;padding:0 14px;font-family:var(--f-body);font-size:16px;color:var(--navy);
  background:var(--surface);border:1px solid var(--hair-strong);border-radius:var(--r-ctl);transition:border-color .12s ease,box-shadow .12s ease}
.cbform input::placeholder{color:#94A3B8}
.cbform input:focus{outline:none;border-color:var(--prime);box-shadow:0 0 0 3px var(--prime-soft)}
.cbform input[aria-invalid="true"]{border-color:var(--leaf);box-shadow:0 0 0 3px rgba(220,38,38,.1)}
.times{margin:0}
.trow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:430px){.trow{grid-template-columns:1fr}}
.t{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border:1px solid var(--hair-strong);
   border-radius:var(--r-ctl);font-size:15px;color:var(--slate);cursor:pointer;transition:border-color .12s ease,background .12s ease}
.t:has(input:checked){border-color:var(--prime);background:var(--prime-soft);color:var(--navy);font-weight:600}
.t input{accent-color:var(--prime);width:18px;height:18px;flex:none;margin:0}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--body);line-height:1.5;cursor:pointer}
.consent input{accent-color:var(--prime);width:19px;height:19px;flex:none;margin:2px 0 0}
.cbmsg{font-size:15px;line-height:1.5;padding:13px 15px;border-radius:var(--r-ctl);margin-top:-4px}
.cbmsg.ok{background:var(--prime-soft);border:1px solid var(--prime-line);color:var(--navy)}
.cbmsg.bad{background:#FEF2F2;border:1px solid #FECACA;color:#991B1B}
.cbfine{font-size:12px;line-height:1.6;color:var(--muted)}
@media (max-width:860px){
  .cbgrid{grid-template-columns:1fr;gap:28px}
  .cbshot{max-width:560px}
}

/* ---------- mobile polish: touch targets, label legibility ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* A footnote marker is a 2-line-tall superscript. Give it a real hit area with a
   pseudo-element so the baseline and the line box stay exactly where they were. */
sup a{position:relative}
sup a::after{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;transform:translate(-50%,-50%)}

@media (max-width:1023px){
  .btn.sm{min-height:44px}
  .brand{min-height:44px}
  /* Inline padding grows the hit area without moving any text: padding on an
     inline box does not change the line height. */
  footer a,p a:not(.btn),.ans a,.fine a,.cbfine a,figcaption a{padding-block:6px}
  /* Same trick vertically — the negative margin keeps the spacing it had. */
  .consent{padding-block:11px;margin-block:-11px}
  .eyebrow,h3.faqgrp{font-size:12px}
  table.cmp thead th{font-size:12px}
}

/* The header's phone and APR links are hidden on small phones (560/760px), so the
   touch-target rule has to start above each of those breakpoints or it would
   switch them back on and push the header wider than the screen. */
@media (min-width:561px) and (max-width:1023px){
  .head .tel{display:inline-flex;align-items:center;min-height:44px}
}
@media (min-width:761px) and (max-width:1023px){
  .head .apr-link{display:inline-flex;align-items:center;min-height:44px}
}

/* ================= motion ==================================================
   The page is read top to bottom, so each block arrives as the reader reaches
   it and the eye is handed on to the next thing to do. Only opacity and
   transform are animated, so nothing reflows and no layout shifts.

   Nothing here is load-bearing. The .pre class that hides an element before it
   animates is added by landing.js, and only to elements that start below the
   fold — so a reader with no JavaScript, or one who lands mid-page, never has
   anything hidden from them, and the hero can never flash. */

@keyframes riseIn{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
@keyframes riseInRight{from{opacity:0;transform:translate3d(30px,0,0)}to{opacity:1;transform:none}}
@keyframes ctaSweep{to{transform:translateX(130%)}}
@keyframes ctaGlow{0%,100%{box-shadow:0 0 0 0 rgba(3,105,161,0)}50%{box-shadow:0 0 0 7px rgba(3,105,161,.14)}}

/* The hero animates from CSS on load rather than on scroll: it is already on
   screen when the stylesheet lands, so there is no moment where it is hidden. */
.hero .heroleft>*{animation:riseIn .7s cubic-bezier(.22,.61,.24,1) both}
.hero .heroleft>*:nth-child(1){animation-delay:.04s}
.hero .heroleft>*:nth-child(2){animation-delay:.12s}
.hero .heroleft>*:nth-child(3){animation-delay:.2s}
.hero .heroleft>*:nth-child(4){animation-delay:.28s}
.hero .heroleft>*:nth-child(5){animation-delay:.36s}
.hero .tile{animation:riseInRight .75s cubic-bezier(.22,.61,.24,1) .2s both}

/* Everything below the fold slides up into place as it is scrolled to. */
.reveal.pre{opacity:0;transform:translate3d(0,26px,0)}
.reveal.in{opacity:1;transform:none;
  transition:opacity .62s cubic-bezier(.22,.61,.24,1),transform .62s cubic-bezier(.22,.61,.24,1);
  transition-delay:calc(var(--i,0) * 70ms)}
.reveal.r-right.pre{transform:translate3d(34px,0,0)}
.reveal.r-left.pre{transform:translate3d(-34px,0,0)}
.reveal.r-pop.pre{transform:scale(.9)}
.reveal.r-pop.in{transition:opacity .5s cubic-bezier(.34,1.28,.46,1),transform .5s cubic-bezier(.34,1.28,.46,1);
  transition-delay:calc(var(--i,0) * 70ms)}

/* A photograph settles into its frame instead of appearing inside it. Both
   frames already clip, so the oversized start is never visible. */
.reveal.r-pan.pre img{transform:scale(1.07)}
.reveal.r-pan.in img{transform:none;transition:transform 1.3s cubic-bezier(.22,.61,.24,1) 60ms}

/* The line icons draw themselves. landing.js measures each shape and writes
   --len, because a path length is not knowable from CSS. */
.uico svg [data-draw],.ic svg [data-draw]{transition:stroke-dashoffset .9s cubic-bezier(.33,.72,.3,1)}
.pre .uico svg [data-draw],.pre .ic svg [data-draw],
.use.pre .uico svg [data-draw],.ben.pre .ic svg [data-draw]{stroke-dashoffset:var(--len)}
.in .uico svg [data-draw],.in .ic svg [data-draw],
.use.in .uico svg [data-draw],.ben.in .ic svg [data-draw]{
  stroke-dashoffset:0;transition-delay:calc(var(--i,0) * 70ms + 130ms)}

/* The step numbers land one after another. */
.step.pre .badge{transform:scale(.4);opacity:0}
.step.in .badge{transform:none;opacity:1;
  transition:transform .5s cubic-bezier(.34,1.5,.5,1),opacity .3s ease;
  transition-delay:calc(var(--i,0) * 70ms + 170ms)}

/* The action catches the light once when it arrives, and again under the
   cursor. Neither sweep repeats: a button that pulses forever reads as an
   advertisement, which is the wrong note for a lender. */
.btn{position:relative;overflow:hidden;isolation:isolate;
     transition:background .14s ease,transform .16s ease,box-shadow .2s ease}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent 36%,rgba(255,255,255,.34) 50%,transparent 64%);
  transform:translateX(-130%)}
.btn.outline::after{background:linear-gradient(100deg,transparent 36%,rgba(3,105,161,.18) 50%,transparent 64%)}
.btn.lit::after,.btn:hover::after{animation:ctaSweep .9s cubic-bezier(.3,.7,.4,1) both}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 22px -10px rgba(3,105,161,.55)}
.btn.outline:hover{box-shadow:inset 0 0 0 1.5px var(--prime),0 10px 18px -12px rgba(3,105,161,.45)}
.btn:active{transform:translateY(0)}

/* The sticky bar's own button breathes three times as it arrives, then stops. */
.mcta[data-on] .btn:not(.outline){animation:ctaGlow 2.4s ease-in-out 3}

/* Icons answer the cursor, so the grids feel like things rather than pictures. */
.uico,.ic{transition:transform .22s cubic-bezier(.34,1.3,.5,1),color .18s ease}
.use:hover .uico,.ben:hover .ic{transform:translateY(-3px) scale(1.06)}
.ben:hover .ic{color:var(--prime-hover)}
details.faq summary{transition:color .16s ease}
details.faq summary:hover{color:var(--prime)}

@media (prefers-reduced-motion:reduce){
  .hero .heroleft>*,.hero .tile{animation:none!important}
  .reveal.pre,.reveal.r-pop.pre,.reveal.r-right.pre,.reveal.r-left.pre,
  .use.pre,.ben.pre,.step.pre,.step.pre .badge,.reveal.r-pan.pre img{
    opacity:1!important;transform:none!important}
  .uico svg [data-draw],.ic svg [data-draw]{stroke-dashoffset:0!important}
  .btn.lit::after,.btn:hover::after,.mcta[data-on] .btn:not(.outline){animation:none!important}
}

/* ---------- hero tile, reversed -------------------------------------------
   The tile carries the four facts that sell the product, so on a pale hero it
   now reads as a dark panel rather than a white card: the weight goes to the
   product, not to the page. Colours are written out rather than taken from
   --on-dark*, because in this light theme those tokens are aliased to the
   dark-on-light body colours and would come out grey on navy. */
.tile{background:var(--navy);color:#E2E8F0;
      border:1px solid rgba(255,255,255,.14);border-top:3px solid var(--sky);
      box-shadow:0 20px 44px -18px rgba(11,25,44,.5)}
.tile .tname{color:#FFFFFF}
.tile .tm{color:#94A3B8}
.tile li{color:#E2E8F0}
.tile li svg{color:var(--sky)}
.tile li b{color:#FFFFFF}
.tile sup a{color:var(--sky)}
.tile .fn{color:#94A3B8}
.tile .btn{background:var(--sky);color:var(--navy)}
.tile .btn:hover{background:#FFFFFF;color:var(--navy)}
.tile a:focus-visible{outline:3px solid #FFFFFF;outline-offset:3px}

/* ---------- hero photograph -----------------------------------------------
   A kitchen behind the promise, at half strength, so the headline still reads
   as type on a page rather than text over a picture. The picture lives in a
   pseudo element rather than on .hero itself, because .hero's own background
   is the gradient that carries this section into the next one — the two have
   to layer, not replace one another.

   ::after is a scrim, at full strength, over the half-strength picture. It is
   not decoration: measured against the rendered pixels, the bare photograph at
   50% drops the eyebrow to 2.3:1 and parts of the lede to 2.6:1, both well
   under the 4.5:1 that small text needs. The scrim is heaviest where the words
   are and clears before it reaches the product tile, so the picture is still a
   picture on the side of the hero the eye travels to last. */
.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:url(/img/flexline/flexline-hero.webp) 50% 38% / cover no-repeat;
  opacity:.5}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(248,250,252,.97) 0%,
    rgba(248,250,252,.93) 34%,
    rgba(248,250,252,.70) 54%,
    rgba(248,250,252,.20) 74%,
    rgba(248,250,252,0) 88%)}

/* A 2.1:1 photograph cannot both span the width of a hero that is taller than
   it is wide and still show the room, so on a phone the frame is anchored low,
   on the marble and the white cabinet fronts: the full-width wash stays bright
   and even behind the headline instead of enlarging the window and the
   foliage, which are the two busiest parts of the picture. The copy runs the
   full width there, so the scrim turns with it. */
@media (max-width:880px){
  .hero::before{background-position:50% 72%}
  .hero::after{background:linear-gradient(180deg,
    rgba(248,250,252,.90) 0%,
    rgba(248,250,252,.80) 44%,
    rgba(248,250,252,.52) 76%,
    rgba(248,250,252,.18) 100%)}
}