/* ═══════════ TOKENS ═══════════ */
:root{
  --ink:#132330;
  --ink-2:#3A4A57;
  --muted:#6B7A87;
  --muted-2:#93A0AB;
  --teal:#1795A6;
  --teal-dark:#127A89;
  --teal-tint:#E4F4F6;
  --line:#E6EDF1;
  --bg:#FFFFFF;
  --bg-soft:#F5F9FB;
  --bg-grad-top:#EAF3F6;
  --shadow-card:0 12px 34px rgba(19,35,48,.07);
  --shadow-float:0 26px 60px rgba(19,35,48,.14);
  --head:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --wrap:1200px;
  --r:16px;
  --r-sm:12px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);font-size:15px;line-height:1.65;color:var(--ink-2);
  background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;border:none;background:none;cursor:pointer}
ul{list-style:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}

h1,h2,h3,h4{font-family:var(--head);color:var(--ink);letter-spacing:-.02em;line-height:1.15}

.eyebrow{
  font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal);margin-bottom:16px;display:block;
}
.two-tone .a{color:var(--ink)}
.two-tone .b{color:var(--teal)}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 26px;border-radius:10px;
  font-family:var(--head);font-size:14px;font-weight:600;
  transition:.22s cubic-bezier(.4,0,.2,1);white-space:nowrap;
}
.btn-teal{background:var(--teal);color:#fff;box-shadow:0 8px 20px rgba(23,149,166,.26)}
.btn-teal:hover{background:var(--teal-dark);transform:translateY(-2px);box-shadow:0 12px 26px rgba(23,149,166,.34)}
.btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal-dark)}
.btn .play{width:22px;height:22px;border-radius:50%;background:var(--teal-tint);
  display:grid;place-items:center;color:var(--teal-dark)}
.link-arrow{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--head);font-size:13.5px;font-weight:600;color:var(--teal);
  transition:gap .22s;
}
.link-arrow:hover{gap:11px;color:var(--teal-dark)}

/* ═══════════ HEADER ═══════════ */
.head{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid rgba(230,237,241,.7)}
.head-row{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
/* header CTA sits in a 74px bar, so it is shorter than a page button */
.head-row > .btn{padding:11px 22px}
.brand{display:inline-flex;align-items:center;color:var(--ink)}
.brand img{height:26px;width:auto;display:block}
.drawer-top .brand img{height:24px}
footer .brand img{height:28px;filter:brightness(0) invert(1)}
/* an <img>-loaded SVG is its own document, so CSS colour cannot reach inside it —
   brightness(0) flattens the mark to black, invert(1) lifts it to pure white */
.nav{display:flex;align-items:center;gap:2px}
.navitem{position:relative}
.navtrig{display:flex;align-items:center;gap:6px;padding:12px 14px;border-radius:8px;
  font-family:var(--head);font-size:14px;font-weight:500;color:var(--ink-2);transition:.18s}
.navtrig svg{width:11px;height:11px;color:var(--muted-2);transition:transform .22s}
.navitem:hover .navtrig,.navitem:focus-within .navtrig{color:var(--teal-dark);background:var(--bg-soft)}
.navitem:hover .navtrig svg,.navitem:focus-within .navtrig svg{transform:rotate(180deg);color:var(--teal)}
/* padding-top is the hover bridge — no dead zone between trigger and panel */
.navpanel{position:absolute;top:100%;left:-8px;min-width:334px;padding-top:11px;z-index:70;
  opacity:0;visibility:hidden;transform:translateY(-7px);
  transition:opacity .2s,transform .2s,visibility .2s}
.navitem:hover .navpanel,.navitem:focus-within .navpanel{opacity:1;visibility:visible;transform:none}
.navitem:last-child .navpanel{left:auto;right:-8px}
.navpanel-in{background:#fff;border:1px solid var(--line);border-radius:14px;padding:9px;
  box-shadow:0 22px 54px rgba(19,35,48,.15)}
.navpanel-in > a{display:block;padding:11px 14px;border-radius:10px;transition:.16s}
.navpanel-in > a:hover{background:var(--bg-soft)}
.navpanel-in > a b{display:block;font-family:var(--head);font-size:14px;font-weight:600;
  color:var(--ink);margin-bottom:2px;letter-spacing:-.01em}
.navpanel-in > a span{display:block;font-size:12.2px;line-height:1.45;color:var(--muted)}
.navpanel-in > a:hover b{color:var(--teal-dark)}
.npfoot{display:flex;gap:7px;margin-top:8px;padding-top:9px;border-top:1px solid var(--line)}
.npfoot a{flex:1;text-align:center;padding:9px 8px;border-radius:9px;background:var(--bg-soft);
  font-family:var(--head);font-size:12.5px;font-weight:600;color:var(--teal-dark);transition:.16s}
.npfoot a:hover{background:var(--teal-tint)}

/* ── mobile drawer ── */
.drawer{position:fixed;inset:0;z-index:200;background:#fff;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);overflow-y:auto}
.drawer.open{transform:none}
.drawer-top{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2}
.drawer-x{width:44px;height:44px;border-radius:10px;background:var(--bg-soft);
  display:grid;place-items:center;color:var(--ink)}
.drawer-body{padding:6px 22px 40px}
.dgroup{border-bottom:1px solid var(--line)}
.dtrig{width:100%;display:flex;align-items:center;justify-content:space-between;padding:17px 0;
  font-family:var(--head);font-size:16px;font-weight:600;color:var(--ink);text-align:left}
.dtrig svg{width:14px;height:14px;color:var(--muted-2);transition:transform .25s}
.dgroup.open .dtrig svg{transform:rotate(180deg);color:var(--teal)}
.dpanel{max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1)}
.dgroup.open .dpanel{max-height:460px}
.dpanel a{display:block;padding:11px 0 11px 17px;margin-left:2px;
  border-left:2px solid var(--line);font-size:14px;color:var(--ink-2)}
.dpanel a:hover{border-left-color:var(--teal);color:var(--teal-dark)}
.dpanel a:last-child{margin-bottom:14px}
.drawer-cta{margin-top:26px;display:block;text-align:center}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0;align-items:center}
.burger i{width:22px;height:2px;background:var(--ink);border-radius:2px}

/* ═══════════ HERO ═══════════ */
/* Full-bleed photograph across the whole section. Copy sits on a dark scrim and
   inverts to white — the reversed contrast was measured, not eyeballed. */
/* Light hero: the photograph is a cream field with the subject on the right, so the
   scrim is a cream-to-transparent wash and every element flips to ink. */
.hero{position:relative;padding:126px 0 0;background:#FEF9F6}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;
  background:rgba(19,35,48,.055);border:1px solid rgba(19,35,48,.16);border-radius:100px;
  font-size:12.5px;font-weight:600;font-family:var(--head);color:var(--ink);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);margin-bottom:26px}
.hero-badge .stars{color:#F5A623;letter-spacing:1px}
.hero h1{font-size:clamp(36px,4.6vw,56px);font-weight:800;margin-bottom:22px;color:var(--ink);
  }
.hero h1 .b{color:#6FE3F0;display:block}
.hero h1 .amt{display:block;margin-top:12px;font-size:.5em;font-weight:600;
  color:var(--muted);letter-spacing:-.01em}
.hero p{font-size:16.5px;line-height:1.75;color:var(--ink-2);max-width:520px;margin-bottom:32px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

/* hero image bleeds to the right edge of the viewport */
.hero-photo{position:absolute;inset:0;z-index:1;overflow:hidden}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:right center}
.hero-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,#FEF9F6 0%,#FEF9F6 38%,rgba(253,250,247,.72) 52%,rgba(253,250,247,0) 68%)}


/* ── floating stats bar ── */
/* The bar, the copy and the disclosure are all children of .hero, so the section's
   padding-bottom sits below all three — it can never separate copy from card.
   The gap is this margin. A negative value here is what caused the overlap. */
/* The card straddles the bottom edge of the hero: the section ends at its midpoint
   and the lower half sits on the next section, which removes ~276px of dead
   photograph below it. */
.statsbar{position:relative;z-index:5;margin-top:54px;margin-bottom:-48px}
/* Cells sized to their content, not four equal quarters: "$200–$5,000" needs
   187px of the 168px an equal split allows, so the number wrapped to two lines. */
.statsbar-inner{background:#fff;border:1px solid #EAE3DC;border-radius:var(--r);box-shadow:var(--shadow-float);
  display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;padding:6px}
.stat{display:flex;align-items:center;gap:15px;padding:26px 28px;position:relative}
.stat:not(:last-child)::after{content:"";position:absolute;right:0;top:22px;bottom:22px;
  width:1px;background:var(--line)}
.stat-ic{width:44px;height:44px;border-radius:11px;background:var(--teal-tint);
  display:grid;place-items:center;color:var(--teal-dark);flex-shrink:0}
.stat-ic svg{width:22px;height:22px}
.stat b{font-family:var(--head);font-size:26px;font-weight:800;color:var(--ink);
  line-height:1.05;display:block;letter-spacing:-.02em;white-space:nowrap}
.stat span{font-size:12.5px;color:var(--muted);font-weight:450;white-space:nowrap}

/* ═══════════ SECTION SHELL ═══════════ */
.sec{padding:96px 0}
.sec-soft{background:var(--bg-soft)}
.sec-head-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:52px}
.sec-head h2{font-size:clamp(28px,3.6vw,40px);font-weight:800;line-height:1.14}
.sec-head-right{padding-bottom:6px}
.sec-head-right p{font-size:15px;color:var(--muted);margin-bottom:14px;max-width:400px}
.sec-head.center{text-align:center;max-width:660px;margin:0 auto 52px}
.sec-head.center p{font-size:16px;color:var(--muted);margin-top:16px}

/* ═══════════ SERVICE CARDS ═══════════ */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:30px 26px 26px;display:flex;flex-direction:column;transition:.26s cubic-bezier(.4,0,.2,1)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card);border-color:transparent}
.card-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:22px}
.card-ic svg{width:24px;height:24px}
.ic-teal{background:var(--teal-tint);color:var(--teal-dark)}
.ic-green{background:#E4F6EC;color:#1E8E52}
.ic-purple{background:#EEEAFB;color:#6A4FB8}
.ic-amber{background:#FCF1DF;color:#C98A1E}
.card h3{font-size:18px;font-weight:700;margin-bottom:11px}
.card p{font-size:13.5px;line-height:1.65;color:var(--muted);flex:1;margin-bottom:20px}
.card .link-arrow{font-size:13px}

/* ═══════════ ABOUT SPLIT ═══════════ */
.about{display:grid;grid-template-columns:1fr 1.08fr;gap:72px;align-items:center}
.about h2{font-size:clamp(28px,3.6vw,40px);font-weight:800;line-height:1.14;margin-bottom:20px}
.about > div:first-child > p{font-size:15px;color:var(--muted);line-height:1.75;margin-bottom:26px;max-width:440px}
.abchecks{display:flex;flex-direction:column;gap:15px;margin-bottom:34px}
.abchecks li{display:flex;align-items:center;gap:13px;font-family:var(--head);
  font-size:15px;font-weight:600;color:var(--ink)}
.abchecks .ck{width:24px;height:24px;border-radius:50%;background:var(--teal-tint);
  color:var(--teal-dark);display:grid;place-items:center;flex-shrink:0}
.abchecks .ck svg{width:13px;height:13px}
.about-photo{position:relative}
.about-photo > img{width:100%;height:480px;object-fit:cover;object-position:center 20%;border-radius:var(--r)}
.float-card{position:absolute;right:-18px;bottom:-24px;background:#fff;
  border-radius:var(--r-sm);padding:24px 26px;box-shadow:var(--shadow-float);max-width:236px}
.float-card b{font-family:var(--head);font-size:38px;font-weight:800;color:var(--teal);
  line-height:1;display:block;letter-spacing:-.02em}
.float-card .t{font-family:var(--head);font-size:14px;font-weight:700;color:var(--ink);
  margin:6px 0 7px}
.float-card p{font-size:12.5px;line-height:1.55;color:var(--muted)}

/* ═══════════ CALCULATOR ═══════════ */
/* Dark section: the card inverts so it reads as one object. Previously the card was
   half-dark, which would have merged with a dark section on the right-hand side. */
.calc{display:grid;grid-template-columns:1.02fr .98fr;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-card)}
.calc-l{padding:48px 44px}
.calc-r{padding:48px 44px;background:linear-gradient(155deg,#E4F4F6,#F2FAFB);color:var(--ink-2)}
.calc-lbl{font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.calc-amt{font-family:var(--head);font-size:clamp(46px,6vw,68px);font-weight:800;
  color:var(--ink);line-height:1;letter-spacing:-.03em;margin-bottom:32px}
.rng{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:100px;
  background:var(--line);outline:none}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;
  background:#fff;border:5px solid var(--teal);cursor:pointer;box-shadow:0 4px 12px rgba(23,149,166,.4)}
.rng::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;
  border:5px solid var(--teal);cursor:pointer}
.rng-marks{display:flex;justify-content:space-between;margin-top:14px;
  font-size:12px;color:var(--muted);font-weight:500}
.calc-l .btn{margin-top:34px}
.crow{display:flex;justify-content:space-between;align-items:center;padding:15px 0;
  border-bottom:1px solid #BADEE6;font-size:13.5px;color:#4A5A66}
.crow b{font-family:var(--head);font-size:17px;font-weight:700;color:var(--ink)}
.crow-total{border-bottom:none;padding-top:24px;margin-top:8px;border-top:1.5px solid var(--teal)}
.crow-total b{font-size:34px;color:var(--teal-dark)}
.calc-fine{margin-top:20px;font-size:11.5px;line-height:1.7;color:#5C6E78}

/* ═══════════ STEPS ═══════════ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:34px 30px;position:relative}
.step-n{font-family:var(--head);font-size:14px;font-weight:800;color:#fff;
  width:38px;height:38px;border-radius:10px;background:var(--teal);
  display:grid;place-items:center;margin-bottom:22px}
.step h3{font-size:19px;font-weight:700;margin-bottom:11px}
.step p{font-size:14px;color:var(--muted);line-height:1.65}

/* ═══════════ TRACKER ═══════════ */
.track{display:grid;grid-template-columns:1.05fr 1fr;gap:66px;align-items:center}
.track-photo{position:relative}
.track-photo > img{width:100%;height:540px;object-fit:cover;object-position:center 22%;border-radius:var(--r)}
.score-card{position:absolute;right:-20px;bottom:34px;background:#fff;border-radius:var(--r-sm);
  padding:24px 26px;box-shadow:var(--shadow-float);min-width:230px}
.score-card .l{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-family:var(--head)}
.score-card .n{font-family:var(--head);font-size:52px;font-weight:800;color:var(--ink);
  line-height:1.05;letter-spacing:-.03em;margin:6px 0 3px}
.score-card .d{font-size:12px;font-weight:600;color:#1E8E52;font-family:var(--head)}
.score-bar{height:6px;border-radius:100px;margin-top:16px;
  background:linear-gradient(90deg,#E15C4F,#E8A33B,#E8C93B,#3FB56B,#1E8E52);position:relative}
.score-bar i{position:absolute;left:68%;top:-3px;width:12px;height:12px;border-radius:50%;
  background:#fff;border:3px solid var(--ink);transform:translateX(-50%)}
.score-scale{display:flex;justify-content:space-between;margin-top:8px;font-size:10px;color:var(--muted)}
.tlist{margin-top:30px}
.tlist li{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.tlist li:last-child{border-bottom:none}
.tlist .ti{width:44px;height:44px;border-radius:12px;background:var(--teal-tint);color:var(--teal-dark);
  display:grid;place-items:center;flex-shrink:0}
.tlist .ti svg{width:21px;height:21px}
.tlist h3{font-size:16px;font-weight:700;margin-bottom:5px}
.tlist p{font-size:13.5px;color:var(--muted);line-height:1.6}

/* ═══════════ REVIEWS / TRUSTPILOT ═══════════ */
.tp-star{width:26px;height:26px;background:#00B67A;display:grid;place-items:center;border-radius:2px}
.tp-star.off{background:#DCE3E7}
.tp-star svg{width:17px;height:17px;fill:#fff}
.tp-stars{display:inline-flex;gap:3px}
.tp-stars.sm .tp-star{width:20px;height:20px}
.tp-stars.sm .tp-star svg{width:13px;height:13px}

.tp-bar{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-card);padding:30px 34px;display:grid;
  grid-template-columns:auto 1fr auto;gap:40px;align-items:center;margin-bottom:30px}
.tp-brand{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.tp-brand svg{width:22px;height:22px;fill:#00B67A}
.tp-brand span{font-family:var(--head);font-weight:700;font-size:19px;color:var(--ink);letter-spacing:-.03em}
.tp-score{display:flex;align-items:baseline;gap:10px;margin-top:12px}
.tp-score b{font-family:var(--head);font-size:30px;font-weight:800;color:var(--ink);letter-spacing:-.03em}
.tp-score em{font-style:normal;font-family:var(--head);font-size:15px;font-weight:700;color:#00B67A}
.tp-score span{font-size:13px;color:var(--muted)}
.tp-dist{display:flex;flex-direction:column;gap:7px;min-width:210px}
.tp-row{display:flex;align-items:center;gap:11px;font-size:12px;color:var(--muted)}
.tp-row .lab{width:44px;font-weight:500;color:var(--ink-2);flex-shrink:0}
.tp-row .bar{flex:1;height:8px;border-radius:100px;background:#EEF2F5;overflow:hidden}
.tp-row .bar i{display:block;height:100%;background:#00B67A;border-radius:100px}
.tp-row .pct{width:34px;text-align:right;flex-shrink:0}
.tp-cta{text-align:center}
.tp-cta .btn{margin-bottom:8px}
.tp-cta small{display:block;font-size:11.5px;color:var(--muted-2)}

.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:26px 26px 24px;display:flex;flex-direction:column;transition:.24s}
.rcard:hover{box-shadow:var(--shadow-card);transform:translateY(-4px)}
.rcard-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.rdate{font-size:11.5px;color:var(--muted-2)}
.rcard h3{font-size:16px;font-weight:800;line-height:1.35;margin-bottom:11px;letter-spacing:-.015em}
.rcard blockquote{font-size:13.8px;line-height:1.68;color:var(--muted);flex:1;margin-bottom:20px}
.rmeta{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--line)}
.rav{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;
  font-family:var(--head);font-weight:700;font-size:14px;flex-shrink:0}
.rwho{flex:1;min-width:0}
.rwho b{font-family:var(--head);font-size:13.5px;font-weight:700;color:var(--ink);display:block}
.rwho span{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:5px}
.rwho span svg{width:11px;height:11px;color:#00B67A;flex-shrink:0}
.rjump{font-family:var(--head);font-size:12px;font-weight:700;color:var(--teal-dark);
  background:var(--teal-tint);padding:5px 10px;border-radius:7px;white-space:nowrap}
.rnote{margin-top:26px;text-align:center;font-size:12px;color:var(--muted-2);
  max-width:660px;margin-left:auto;margin-right:auto;line-height:1.7}

/* ═══════════ PROS & CONS ═══════════ */
.pc{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}
.pc-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:32px 30px;position:relative;overflow:hidden}
.pc-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px}
.pc-pro::before{background:linear-gradient(90deg,#1E8E52,#4BC47D)}
.pc-con::before{background:linear-gradient(90deg,#C98A1E,#E4B45C)}
.pc-head{display:flex;align-items:center;gap:14px;padding-bottom:20px;
  border-bottom:1px solid var(--line)}
.pc-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex-shrink:0}
.pc-ic svg{width:23px;height:23px}
.pc-pro .pc-ic{background:#E4F6EC;color:#1E8E52}
.pc-con .pc-ic{background:#FCF1DF;color:#C98A1E}
.pc-head h3{font-size:20px;font-weight:800;line-height:1.2}
.pc-head em{font-style:normal;font-size:12.5px;color:var(--muted);
  font-family:var(--body);font-weight:400;display:block;margin-top:3px}
.pc-list li{display:flex;gap:13px;padding:17px 0;border-bottom:1px solid var(--line)}
.pc-list li:last-child{border-bottom:none;padding-bottom:0}
.pc-mark{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  flex-shrink:0;margin-top:3px}
.pc-mark svg{width:11px;height:11px}
.pc-pro .pc-mark{background:#E4F6EC;color:#1E8E52}
.pc-con .pc-mark{background:#FCF1DF;color:#C98A1E}
.pc-list b{display:block;font-family:var(--head);font-size:14.5px;font-weight:700;
  color:var(--ink);margin-bottom:4px;letter-spacing:-.01em}
.pc-list p{font-size:13.5px;line-height:1.62;color:var(--muted)}
.verdict{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.vbox{border-radius:var(--r);padding:28px 30px}
.v-fit{background:var(--teal-tint);border:1px solid #C6E6EB}
.v-not{background:var(--bg-soft);border:1px solid var(--line)}
.vbox h4{font-family:var(--head);font-size:16px;font-weight:800;margin-bottom:15px;
  display:flex;align-items:center;gap:9px;letter-spacing:-.01em}
.vbox h4 svg{width:18px;height:18px;flex-shrink:0}
.v-fit h4{color:var(--teal-dark)}
.v-not h4{color:var(--ink)}
.vbox li{position:relative;padding-left:17px;font-size:13.5px;line-height:1.62;
  color:var(--ink-2);margin-bottom:10px}
.vbox li:last-child{margin-bottom:0}
.vbox li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%}
.v-fit li::before{background:var(--teal)}
.v-not li::before{background:var(--muted-2)}
.pc-note{margin-top:24px;text-align:center;font-size:12.5px;color:var(--muted-2);
  max-width:640px;margin-left:auto;margin-right:auto;line-height:1.7}

/* ═══════════ ELIGIBILITY (interactive checker) ═══════════ */
.elig-panel{display:grid;grid-template-columns:.84fr 1.16fr;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-card)}
.elig-side{background:linear-gradient(155deg,#153847,#0E2A36);color:#fff;
  padding:40px 36px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.elig-side::before{content:"";position:absolute;top:-90px;right:-70px;width:250px;height:250px;
  border-radius:50%;background:radial-gradient(circle,rgba(79,211,228,.22),transparent 65%)}
.elig-side > *{position:relative;z-index:1}
.elig-side h3{color:#fff;font-size:21px;font-weight:800;margin-bottom:9px}
/* 78%, not 58%: the ::before glow lifts the panel to #225A6A behind this line,
   where 58% white only reaches 3.25:1. */
.elig-side > p{font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.78);margin-bottom:28px}
.el-meter{display:flex;align-items:baseline;gap:9px}
.el-meter b{font-family:var(--head);font-size:46px;font-weight:800;color:#4FD3E4;
  line-height:1;letter-spacing:-.03em}
.el-meter span{font-size:13px;color:rgba(255,255,255,.78)}
.el-track{height:6px;border-radius:100px;background:rgba(255,255,255,.13);
  overflow:hidden;margin:18px 0 16px}
.el-track i{display:block;height:100%;width:0;border-radius:100px;
  background:linear-gradient(90deg,#1795A6,#4FD3E4);transition:width .4s cubic-bezier(.4,0,.2,1)}
.el-status{font-family:var(--head);font-size:13.5px;font-weight:600;line-height:1.6;
  color:rgba(255,255,255,.82);min-height:44px}
.el-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.el-foot-note{font-size:12.3px;line-height:1.5;color:var(--muted);flex:1;min-width:170px}
.el-btn{display:inline-flex;align-items:center;gap:9px;padding:13px 26px;border-radius:10px;
  font-family:var(--head);font-size:13.5px;font-weight:600;
  background:var(--bg-soft);color:var(--muted-2);border:1px solid var(--line);transition:.26s}
.el-btn svg{transition:transform .26s}
.el-btn:hover{border-color:var(--teal);color:var(--teal-dark)}
.el-btn.ready{background:var(--teal);color:#fff;border-color:var(--teal);
  box-shadow:0 8px 20px rgba(23,149,166,.28)}
.el-btn.ready:hover{background:var(--teal-dark);transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(23,149,166,.34)}
.el-btn.ready:hover svg{transform:translateX(3px)}
.el-facts{margin-top:auto;padding-top:26px;border-top:1px solid rgba(255,255,255,.13)}
.el-facts div{display:flex;align-items:center;gap:11px;padding:7px 0;
  font-size:12.5px;color:rgba(255,255,255,.76)}
.el-facts svg{width:16px;height:16px;color:#4FD3E4;flex-shrink:0}
.el-facts b{color:#fff;font-family:var(--head);font-weight:600}

.elig-checks{padding:32px 36px}
.elig-checks > h3{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px}
.el-row{display:flex;align-items:flex-start;gap:15px;padding:15px 0;min-height:44px;
  border-bottom:1px solid var(--line);cursor:pointer;position:relative}
.el-row:last-of-type{border-bottom:none;padding-bottom:4px}
.el-row input{position:absolute;opacity:0;width:0;height:0}
.el-box{width:26px;height:26px;border-radius:7px;border:2px solid #D3DDE4;background:#fff;
  flex-shrink:0;margin-top:2px;display:grid;place-items:center;transition:.2s}
.el-box svg{width:13px;height:13px;color:#fff;opacity:0;transform:scale(.6);transition:.2s}
.el-row:hover .el-box{border-color:var(--teal)}
.el-row input:checked ~ .el-box{background:var(--teal);border-color:var(--teal)}
.el-row input:checked ~ .el-box svg{opacity:1;transform:scale(1)}
.el-row input:focus-visible ~ .el-box{outline:2px solid var(--teal);outline-offset:3px}
.el-row b{font-family:var(--head);font-size:15px;font-weight:700;color:var(--ink);
  display:block;margin-bottom:3px;letter-spacing:-.01em}
.el-row p{font-size:12.8px;line-height:1.6;color:var(--muted)}
.el-row input:checked ~ .el-txt b{color:var(--teal-dark)}

.el-none{margin-top:22px;background:var(--teal-tint);border:1px solid #C6E6EB;
  border-radius:var(--r);padding:22px 26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.el-none > b{font-family:var(--head);font-size:13px;font-weight:800;color:var(--teal-dark);
  flex-shrink:0}
.el-pills{display:flex;gap:9px;flex-wrap:wrap}
.el-pill{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid #C6E6EB;
  border-radius:100px;padding:8px 15px;font-family:var(--head);font-size:12.5px;
  font-weight:500;color:var(--ink-2)}
.el-pill svg{width:13px;height:13px;color:var(--teal);flex-shrink:0}

/* ═══════════ INLINE LINKS ═══════════ */
.ilink{color:var(--teal-dark);font-weight:500;text-decoration:underline;
  text-decoration-color:rgba(23,149,166,.42);text-underline-offset:3px;
  text-decoration-thickness:1.5px;transition:.18s}
.ilink:hover{color:var(--teal);text-decoration-color:var(--teal)}
.ilink-d{color:#0F6E7B;font-weight:500;text-decoration:underline;
  text-decoration-color:rgba(15,110,123,.4);text-underline-offset:3px;
  text-decoration-thickness:1.5px;transition:.18s}
.ilink-d:hover{color:#B7EFF6;text-decoration-color:#B7EFF6}
.stat span .ilink{font-weight:500}
/* flex, not grid: a grid put every chip on its own row and flex-wrap did nothing.
   Same fault as .ap-rail — introduced by a sweep that swapped display on any rule
   holding align-items + justify-content. */
.cmp-strip{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:10px 12px;margin-top:28px;padding:22px 26px;background:var(--bg-soft);
  border:1px solid var(--line);border-radius:var(--r)}
.cmp-strip b{width:100%;text-align:center;font-family:var(--head);font-size:14px;
  font-weight:700;color:var(--ink);margin-bottom:4px}
.cmp-strip > b{font-family:var(--head);font-size:13.5px;font-weight:700;color:var(--ink)}
.cmp-link{display:inline-flex;align-items:center;gap:8px;padding:9px 17px;background:#fff;
  border:1px solid var(--line);border-radius:100px;font-family:var(--head);
  font-size:13px;font-weight:600;color:var(--ink-2);transition:.22s}
.cmp-link:hover{border-color:var(--teal);color:var(--teal-dark);transform:translateY(-2px)}
.cmp-link svg{width:12px;height:12px;color:var(--muted-2);transition:.22s}
.cmp-link:hover svg{color:var(--teal)}

/* ═══════════ EEAT ═══════════ */
.eeat{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.eeat h2{font-size:clamp(28px,3.6vw,40px);font-weight:800;line-height:1.14;margin-bottom:20px}
.eeat > div:first-child > p{font-size:15px;color:var(--muted);line-height:1.75;margin-bottom:26px;max-width:440px}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border:1px solid var(--line);
  border-radius:10px;font-family:var(--head);font-size:12.5px;font-weight:600;color:var(--ink-2);background:#fff}
.badge svg{width:14px;height:14px;color:var(--teal)}
.team{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:36px 32px}
.team-h{font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:6px}
.team li{display:flex;gap:16px;padding:22px 0;border-bottom:1px solid var(--line)}
.team li:last-child{border-bottom:none;padding-bottom:0}
.tm-av{width:48px;height:48px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;
  color:#fff;font-family:var(--head);font-weight:700;font-size:14px}
.tm-n{font-family:var(--head);font-size:16px;font-weight:700;color:var(--ink);margin-bottom:2px}
.tm-c{display:inline-block;margin-left:7px;font-size:10px;font-weight:700;letter-spacing:.06em;
  padding:2px 7px;background:var(--teal-tint);color:var(--teal-dark);border-radius:5px;vertical-align:1px}
.tm-r{font-size:13px;line-height:1.6;color:var(--muted)}

/* ═══════════ ARTICLES ═══════════ */
.agrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.acard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:.26s}
.acard:hover{box-shadow:var(--shadow-card);transform:translateY(-5px)}
.acard-img{aspect-ratio:16/9;overflow:hidden}
.acard-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.acard:hover .acard-img img{transform:scale(1.06)}
.acard-b{padding:24px 24px 22px;flex:1;display:flex;flex-direction:column}
.acat{font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--teal);margin-bottom:12px}
.acard h3{font-size:17px;font-weight:700;line-height:1.35;margin-bottom:18px;flex:1}
.aby{padding-top:16px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;
  font-size:12px;color:var(--muted)}
.aby .av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;
  font-family:var(--head);font-size:10px;font-weight:700}
.aby b{color:var(--ink);font-family:var(--head);font-weight:600}

/* ═══════════ FAQ ═══════════ */
.faqs{max-width:800px;margin:0 auto}
.faq{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:12px;
  overflow:hidden;transition:box-shadow .2s}
.faq.on{box-shadow:var(--shadow-card)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:22px 26px;text-align:left;font-family:var(--head);font-size:16px;font-weight:600;color:var(--ink)}
.faq-t{width:28px;height:28px;flex-shrink:0;border-radius:8px;background:var(--bg-soft);
  display:grid;place-items:center;font-size:16px;color:var(--muted);transition:.28s}
.faq.on .faq-t{transform:rotate(45deg);background:var(--teal);color:#fff}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1)}
.faq.on .faq-a{max-height:340px}
.faq-a div{padding:0 26px 24px;font-size:14px;line-height:1.75;color:var(--muted)}

/* ═══════════ CTA ═══════════ */
.cta{position:relative;border-radius:24px;overflow:hidden;
  background:linear-gradient(140deg,#153847 0%,#0E2A36 60%,#124450 100%);
  padding:78px 40px;text-align:center;color:#fff}
.cta::before{content:"";position:absolute;top:-120px;right:-80px;width:360px;height:360px;
  border-radius:50%;background:radial-gradient(circle,rgba(79,211,228,.25),transparent 65%)}
.cta > *{position:relative;z-index:1}
.cta .eyebrow{color:#4FD3E4}
.cta h2{color:#fff;font-size:clamp(28px,4vw,44px);font-weight:800;margin-bottom:18px}
.cta p{max-width:500px;margin:0 auto 32px;font-size:16px;color:rgba(255,255,255,.72);line-height:1.7}
.cta .btn-white{background:#fff;color:var(--ink)}
.cta .btn-white:hover{background:var(--teal-tint);transform:translateY(-2px)}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.cta .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.42)}
.cta .btn-ghost:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.7);color:#fff}
.cta .fine{margin-top:22px;font-size:12px;color:rgba(255,255,255,.5)}

/* ═══════════ BRANDS ═══════════ */
.brands{padding:66px 0;border-top:1px solid var(--line)}
.brands-h{text-align:center;font-family:var(--head);font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:34px}
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.brand-logo{font-family:var(--head);font-weight:700;font-size:22px;color:#AEBAC4;
  letter-spacing:-.02em;transition:color .2s;flex:1;text-align:center;min-width:110px}
.brand-logo:hover{color:var(--ink-2)}

/* ═══════════ FOOTER ═══════════ */
footer{background:#0E2027;color:rgba(255,255,255,.6);padding:76px 0 30px;font-size:13.5px}
.f-top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:48px;padding-bottom:52px;
  border-bottom:1px solid rgba(255,255,255,.09)}
.f-brand .brand{color:#fff}
.f-brand p{margin:20px 0 24px;font-size:13.5px;line-height:1.8;color:rgba(255,255,255,.5);max-width:300px}
.f-apps{display:flex;gap:10px;flex-wrap:wrap}
.f-app{display:inline-flex;align-items:center;gap:9px;padding:10px 14px;border-radius:10px;
  border:1px solid rgba(255,255,255,.13);font-family:var(--head);font-size:9px;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.85);transition:.2s}
.f-app:hover{background:rgba(255,255,255,.06)}
.f-app b{display:block;font-size:12px;letter-spacing:0;text-transform:none;margin-top:2px}
.f-col h3{font-family:var(--head);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;margin-bottom:18px;font-weight:700}
.f-col li{margin-bottom:11px}
.f-col a{font-size:13.5px;color:rgba(255,255,255,.55);transition:.18s}
.f-col a:hover{color:#fff}
.f-cert{display:flex;gap:12px;flex-wrap:wrap;padding:30px 0}
.f-cert span{padding:7px 14px;border:1px solid rgba(255,255,255,.12);border-radius:8px;
  font-family:var(--head);font-size:10px;font-weight:600;letter-spacing:.06em;color:rgba(255,255,255,.55)}
.f-legal{font-size:11px;line-height:1.8;color:rgba(255,255,255,.34)}
.f-legal p{margin-bottom:13px}
.f-legal b{color:rgba(255,255,255,.55);font-weight:600}
.f-more{color:rgba(255,255,255,.7);font-family:var(--head);font-weight:600;font-size:11.5px;text-decoration:underline;text-underline-offset:3px;transition:.18s}
.f-more:hover{color:#fff}
.f-bot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:24px;
  margin-top:22px;border-top:1px solid rgba(255,255,255,.09);font-size:12px;color:rgba(255,255,255,.4)}
.f-bot nav{display:flex;gap:20px}

/* ═══════════ STICKY CTA (mobile) + BACK TO TOP (tablet/desktop) ═══════════ */
/* 520px is where the header's Get started button disappears — exactly when a
   persistent CTA stops being visible, so that is where the sticky bar takes over. */
.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  align-items:center;gap:14px;
  padding:12px 18px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(19,35,48,.09);
  transform:translateY(115%);pointer-events:none;
  transition:transform .32s cubic-bezier(.4,0,.2,1);
}
.sb-txt{flex:1;min-width:0}
.sb-txt b{display:block;font-family:var(--head);font-size:14px;font-weight:700;
  color:var(--ink);line-height:1.25;letter-spacing:-.01em}
.sb-txt span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.stickybar .btn{padding:12px 20px;font-size:13.5px;flex-shrink:0}

.totop{
  position:fixed;right:24px;bottom:24px;z-index:90;display:none;place-items:center;
  width:48px;height:48px;border-radius:50%;color:#fff;
  background:linear-gradient(155deg,#153847,#0E2A36);
  box-shadow:0 10px 26px rgba(19,35,48,.26);
  opacity:0;transform:translateY(12px) scale(.92);pointer-events:none;
  transition:opacity .28s,transform .28s,background .2s;
}
.totop svg{width:19px;height:19px}
.totop:hover{background:var(--teal);box-shadow:0 14px 30px rgba(23,149,166,.34)}

/* both stay hidden until the hero has fully scrolled past */
body.past-hero .stickybar{transform:none;pointer-events:auto}
body.past-hero .totop{opacity:1;transform:none;pointer-events:auto}
body.past-hero .totop:hover{transform:translateY(-3px)}
/* and the bar steps aside at the final CTA so two Get started buttons never stack */
body.at-cta .stickybar{transform:translateY(115%);pointer-events:none}

@media(max-width:520px){
  .stickybar{display:flex}
  body{padding-bottom:74px}
}
@media(min-width:521px){.totop{display:grid}}

/* skip link: first focusable element on every page, visible only when focused */
.skip{position:absolute;left:-9999px;top:0;z-index:300;padding:13px 22px;
  background:var(--teal);color:#fff;font-family:var(--head);font-weight:600;font-size:14px;
  border-radius:0 0 10px 0;box-shadow:0 6px 18px rgba(23,149,166,.35)}
.skip:focus{left:0}

/* ═══════════ REVEAL ═══════════ */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* ═══════════ RESPONSIVE ═══════════ */
/* Four stat cells need ~1260px for "$200–$5,000" to stay on one line. Declared
   before the narrower breakpoints so 820px and 520px still override it. */
@media(max-width:1220px){
  .statsbar{margin-bottom:-96px}
  .hero + .sec{padding-top:144px}
}

@media(max-width:1220px){
  .statsbar-inner{grid-template-columns:repeat(2,1fr);justify-content:stretch}
  .stat b,.stat span{white-space:normal}
}
@media(max-width:1080px){
  .nav{display:none}.burger{display:flex}
  /* pinned right, not centred, once the nav is hidden — selector is colour-agnostic
     so changing the button style cannot silently disable this again */
  .head-row > .btn{margin-left:auto}
  .cards{grid-template-columns:repeat(2,1fr)}
  .rgrid{grid-template-columns:repeat(2,1fr)}
  .tp-bar{grid-template-columns:1fr;gap:26px;text-align:center;justify-items:center}
  .tp-dist{width:100%;max-width:300px}
  .about,.track,.eeat{grid-template-columns:1fr;gap:52px}
  .about-photo,.track-photo{max-width:560px;margin-left:auto;margin-right:auto}
  .track-photo{order:-1}

}
@media(max-width:820px){
  .sec{padding:70px 0}
  .hero + .sec{padding-top:166px}
  .statsbar{margin-top:0;margin-bottom:-96px}
  .statsbar-inner{grid-template-columns:1fr 1fr;justify-content:stretch}
  /* the bar is no longer one row, so the number may wrap again */
  .stat b,.stat span{white-space:normal}
  .stat{padding:22px 20px}
  .stat:nth-child(2)::after,.stat:nth-child(4)::after{display:none}
  .sec-head-split{grid-template-columns:1fr;gap:20px;align-items:start}
  .steps,.agrid{grid-template-columns:1fr}
  .rgrid{grid-template-columns:1fr}
  .pc,.verdict{grid-template-columns:1fr}
  .elig-panel{grid-template-columns:1fr}
  .el-none{align-items:flex-start;flex-direction:column;gap:14px}
  .elig-side,.elig-checks{padding:32px 26px}
  .calc{grid-template-columns:1fr}
  .calc-l,.calc-r{padding:36px 28px}
  .f-top{grid-template-columns:repeat(3,1fr);gap:36px 28px}
  .f-brand{grid-column:1/-1}
  .brand-row{gap:18px 30px}
}
@media(max-width:520px){
  .statsbar{margin-bottom:0}
  .hero{padding-bottom:44px}
  .hero + .sec{padding-top:64px}
}

@media(max-width:520px){
  .wrap{padding:0 20px}
  /* stacked buttons of different widths read as misaligned — make both full width */
  .hero-actions{flex-direction:column;gap:10px;width:100%}
  .hero-actions .btn{width:100%;justify-content:center;padding:15px 20px}
  .head-row > .btn{display:none}
  .cards{grid-template-columns:1fr}
  .statsbar-inner{grid-template-columns:1fr;justify-content:stretch}
  .stat b,.stat span{white-space:normal}
  .stat::after{display:none!important}
  .stat{border-bottom:1px solid var(--line)}
  .statsbar-inner .stat:last-child{border-bottom:none}
  .f-top{grid-template-columns:1fr}
  .about-photo > img{height:380px}
  .track-photo > img{height:420px}
  /* same as .score-card: stack instead of overlapping at phone width */
  .float-card{position:static;margin:14px 0 0;max-width:none;padding:18px 20px}
  /* No overlap on a phone: photo and card are the same width, so overlapping adds
     nothing and risks covering the label whenever padding changes. */
  .score-card{position:static;margin:14px 0 0;width:100%;min-width:0}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}

/* One line under the H1 saying which product a page is about — cheaper and far more
   readable than stuffing "Credit Builder" into every individual claim. */
.scope-note{display:flex;align-items:flex-start;gap:10px;margin-top:22px;padding:13px 16px;
  background:var(--bg-soft);border-left:3px solid var(--teal);border-radius:0 8px 8px 0;
  font-size:13px;line-height:1.65;color:var(--muted)}
.scope-note svg{width:15px;height:15px;flex-shrink:0;margin-top:2px;color:var(--teal)}
.scope-note b{font-family:var(--head);font-weight:600;color:var(--ink)}

/* ═══════════ COMPARISON PAGE ═══════════ */
.page-hero{background:linear-gradient(180deg,var(--bg-grad-top),#fff 82%);padding:52px 0 60px}
.crumb{display:flex;gap:9px;align-items:center;font-size:12.5px;color:var(--muted);margin-bottom:22px}
.crumb a{color:var(--muted);transition:.16s}
.crumb a:hover{color:var(--teal-dark)}
.crumb svg{width:12px;height:12px;color:var(--muted-2)}
.page-hero h1{font-size:clamp(30px,4.2vw,46px);font-weight:800;max-width:840px;margin-bottom:18px}
.page-hero h1 .b{color:var(--teal)}
.page-lede{font-size:17px;line-height:1.7;color:var(--muted);max-width:740px}
.page-meta{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:26px;
  padding-top:22px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.page-meta .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-family:var(--head);font-weight:700;font-size:11px;background:#2F5A8A}
.page-meta b{font-family:var(--head);color:var(--ink);font-weight:600}

/* verdict pair */
.vd{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.vd-card{border-radius:var(--r);padding:30px 28px;border:1px solid var(--line);background:#fff;position:relative}
.vd-card.win{background:var(--teal-tint);border-color:#C6E6EB}
.vd-tag{display:inline-block;font-family:var(--head);font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:6px;margin-bottom:16px}
.vd-card.win .vd-tag{background:var(--teal);color:#fff}
.vd-card:not(.win) .vd-tag{background:var(--bg-soft);color:var(--muted)}
.vd-card h3{font-size:21px;font-weight:800;margin-bottom:12px}
.vd-card > p{font-size:14.5px;line-height:1.7;color:var(--muted);margin-bottom:18px}
.vd-card li{position:relative;padding-left:20px;font-size:13.8px;line-height:1.6;
  color:var(--ink-2);margin-bottom:9px}
.vd-card li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%}
.vd-card.win li::before{background:var(--teal)}
.vd-card:not(.win) li::before{background:var(--muted-2)}

/* spec table */
.ctable{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.ctable table{width:100%;border-collapse:collapse}
.ctable th,.ctable td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line);
  font-size:14px;vertical-align:top}
.ctable thead th{background:var(--bg-soft);font-family:var(--head);font-size:13px;font-weight:800;
  color:var(--ink);letter-spacing:-.01em;border-bottom:2px solid var(--line)}
.ctable thead th:first-child{width:26%}
.ctable thead th.kovo{color:var(--teal-dark)}
.ctable tbody th{font-family:var(--head);font-weight:600;color:var(--ink);font-size:13.5px;width:26%}
.ctable td{color:var(--ink-2)}
.ctable td.k{background:rgba(228,244,246,.42);font-weight:500}
.ctable tr:last-child th,.ctable tr:last-child td{border-bottom:none}
.ctable .flag{display:inline-block;font-family:var(--head);font-size:10.5px;font-weight:700;
  padding:2px 8px;border-radius:5px;margin-left:7px;vertical-align:1px}
.flag-w{background:#E4F6EC;color:#1E8E52}
.ctable-note{margin-top:14px;font-size:12px;color:var(--muted-2);line-height:1.65}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* cost callout */
.cost{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cost-box{border:1px solid var(--line);border-radius:var(--r);padding:28px;background:#fff}
.cost-box h3{font-family:var(--head);font-size:15px;font-weight:800;margin-bottom:16px}
.cost-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dashed var(--line);
  font-size:13.5px;color:var(--muted)}
.cost-row b{color:var(--ink);font-family:var(--head);font-weight:600}
.cost-row.tot{border-bottom:none;border-top:1.5px solid var(--ink);margin-top:8px;padding-top:14px}
.cost-row.tot b{font-size:19px;font-weight:800}

/* prose */

@media(max-width:820px){
  .cards-3{grid-template-columns:1fr}
  .vd,.cost{grid-template-columns:1fr}
  .ctable th,.ctable td{padding:13px 14px;font-size:13px}
  .ctable{min-width:0}
  .tscroll table{min-width:560px}
}
/* visually hidden but read by screen readers */
.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}

/* three-across variant of the existing .card grid */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cost-box.lead{background:linear-gradient(155deg,#153847,#0E2A36);border-color:transparent;color:#fff}
.cost-box.lead h3{color:#fff}
.cost-box.lead p{font-size:13.5px;line-height:1.72;color:rgba(255,255,255,.72);margin:0}
.cost-box.lead p+p{margin-top:12px}
.cost-box.lead b{color:#4FD3E4}

/* ═══════════ GUIDE PAGES (Tier 2) ═══════════ */
/* Answer box — direct answer up top, targeted at the featured snippet */
.answer{background:var(--teal-tint);border:1px solid #C6E6EB;border-radius:var(--r);
  padding:34px 36px;display:grid;grid-template-columns:56px 1.45fr 1fr;gap:26px;align-items:start}
.answer-ic{width:56px;height:56px;border-radius:15px;background:var(--teal);color:#fff;
  display:grid;place-items:center}
.answer-ic svg{width:28px;height:28px}
.answer h2{font-size:clamp(20px,2.5vw,25px);font-weight:800;line-height:1.32;margin-bottom:12px}
.answer p{font-size:15px;line-height:1.75;color:var(--ink-2);margin:0}
.answer-facts{border-left:1px solid #B7DFE5;padding-left:26px}
.answer-facts li{position:relative;padding-left:20px;font-size:13.5px;line-height:1.6;
  color:var(--ink-2);margin-bottom:12px}
.answer-facts li:last-child{margin-bottom:0}
.answer-facts li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;
  border-radius:50%;background:var(--teal)}

/* Myth / fact pairs */
.myths{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.myth{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 28px}
.myth-q{display:flex;gap:13px;align-items:flex-start;padding-bottom:16px;margin-bottom:16px;
  border-bottom:1px solid var(--line)}
.myth-x{width:24px;height:24px;border-radius:50%;background:#FBE9E7;color:#C0392B;flex-shrink:0;
  display:grid;place-items:center;margin-top:1px}
.myth-x svg{width:12px;height:12px}
.myth-q span{font-family:var(--head);font-size:15px;font-weight:700;color:var(--muted-2);
  text-decoration:line-through;text-decoration-thickness:1.5px;line-height:1.45}
.myth p{font-size:14px;line-height:1.72;color:var(--ink-2);margin:0}
.myth p b{color:var(--teal-dark);font-family:var(--head);font-weight:700}

/* Numbered path — the spine of a guide page */
.path{border-top:1px solid var(--line)}
.path-step{display:grid;grid-template-columns:52px minmax(190px,270px) 1fr;gap:26px;
  padding:26px 0;border-bottom:1px solid var(--line);align-items:start;position:relative}
.path-n{width:40px;height:40px;border-radius:12px;background:var(--teal);color:#fff;
  display:grid;place-items:center;font-family:var(--head);font-weight:800;font-size:15px;
  position:relative;z-index:1}
.path-step::before{content:"";position:absolute;left:19px;top:0;bottom:0;width:2px;
  background:var(--line)}
.path-step:first-child::before{top:26px}
.path-step:last-child::before{bottom:calc(100% - 26px)}
.path-step h3{font-size:17.5px;font-weight:700;margin-bottom:6px;letter-spacing:-.01em}
.path-step .lbl{font-size:12.5px;color:var(--teal-dark);font-family:var(--head);font-weight:600}
.path-step p{font-size:14.5px;line-height:1.72;color:var(--muted);margin:0}
.path-step p+p{margin-top:10px}

/* Horizontal expectation timeline.
   The dot is a marker only — the period is a pill label beneath it, because text
   never fits inside a 40px circle. Line segments are drawn per item rather than as
   one bar behind the row, so no background-matching ring is needed. */
.tl{display:grid;grid-template-columns:repeat(4,1fr);margin-top:8px}
.tl-item{text-align:center;padding:0 18px;position:relative}
.tl-item::before{content:"";position:absolute;top:7px;left:-50%;right:50%;
  height:2px;background:var(--line)}
.tl-item:first-child::before{display:none}
.tl-dot{display:block;width:16px;height:16px;border-radius:50%;background:var(--teal);
  margin:0 auto 20px;position:relative;z-index:1}
.tl-when{display:inline-block;font-family:var(--head);font-size:11.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--teal-dark);
  background:var(--teal-tint);padding:5px 13px;border-radius:100px;margin-bottom:12px}
.tl-item h3{font-size:16px;font-weight:700;margin-bottom:8px;letter-spacing:-.01em}
.tl-item p{font-size:13px;line-height:1.65;color:var(--muted)}

.efacts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.efact{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:20px 22px}
.efact .ei{width:42px;height:42px;border-radius:12px;background:var(--teal-tint);
  color:var(--teal-dark);display:grid;place-items:center;flex-shrink:0}
.efact .ei svg{width:20px;height:20px}
.efact b{font-family:var(--head);font-size:14.5px;font-weight:700;color:var(--ink);
  display:block;letter-spacing:-.01em;line-height:1.3}
.efact span{font-size:12.5px;color:var(--muted)}
.efacts.four{grid-template-columns:repeat(4,1fr)}

@media(max-width:820px){
  .answer{grid-template-columns:1fr;gap:20px;padding:28px 24px}
  .answer-facts{border-left:none;border-top:1px solid #B7DFE5;padding-left:0;padding-top:20px}
  .myths{grid-template-columns:1fr}
  .path-step{grid-template-columns:52px 1fr;gap:18px 20px}
  .path-step > div:last-child{grid-column:2}
  .tl{grid-template-columns:1fr 1fr;gap:34px 0}
  .tl-item::before{display:none}
  .tl-item{padding:0 10px}
  .efacts.four{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .tl{grid-template-columns:1fr;gap:28px}
  .efacts.four{grid-template-columns:1fr}
}

/* ═══════════ PRODUCT PAGES (Tier 4) ═══════════ */
.prod-hero{background:linear-gradient(180deg,var(--bg-grad-top),#fff 90%);padding:52px 0 0}
.prod-head{max-width:880px;margin-top:26px}
.prod-head h1{font-size:clamp(30px,4.2vw,46px);font-weight:800;margin-bottom:18px}
.prod-head h1 .b{color:var(--teal)}
.prod-head > p{font-size:17px;line-height:1.7;color:var(--muted);max-width:660px}

/* Full-width summary bar. A two-column hero with no image can never balance —
   specs plus a CTA will always out-measure a headline — so the specs run
   horizontally instead and the bar floats over the section boundary. */
.prod-bar{margin:46px 0 -44px;position:relative;z-index:2;background:#fff;
  border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 48px rgba(19,35,48,.11);
  display:grid;grid-template-columns:repeat(4,1fr) minmax(258px,auto);align-items:stretch;
  overflow:hidden}
.prod-cell{padding:26px 26px;border-right:1px solid var(--line)}
.prod-cell .k{font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.prod-cell .v{font-family:var(--head);font-size:18px;font-weight:800;color:var(--ink);
  letter-spacing:-.02em;line-height:1.3}
.prod-buy{padding:24px 28px;background:var(--bg-soft);display:flex;flex-direction:column;
  justify-content:center;gap:12px}
.prod-buy .price{display:flex;align-items:baseline;gap:7px}
.prod-buy .price b{font-family:var(--head);font-size:30px;font-weight:800;color:var(--ink);
  line-height:1;letter-spacing:-.03em}
.prod-buy .price span{font-size:12.5px;color:var(--muted)}
.prod-buy .btn{width:100%;justify-content:center;padding:13px 20px;font-size:14px}
.prod-buy small{display:block;text-align:center;font-size:11px;color:var(--muted-2);line-height:1.5}

/* plan picker */
.picker-tabs{display:inline-flex;gap:6px;padding:6px;background:var(--bg-soft);
  border:1px solid var(--line);border-radius:100px;margin-bottom:28px}
.picker-tab{padding:13px 24px;border-radius:100px;font-family:var(--head);font-size:14px;
  font-weight:600;color:var(--muted);transition:.2s}
.picker-tab:hover{color:var(--ink)}
.picker-tab.on{background:var(--teal);color:#fff;box-shadow:0 6px 16px rgba(23,149,166,.26)}
.picker-panel{display:none}
.picker-panel.on{display:block}
.picker-body{display:grid;grid-template-columns:1fr 1fr 1fr 1.2fr;gap:0;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.picker-cell{padding:26px 28px;border-right:1px solid var(--line)}
.picker-cell:last-child{border-right:none;background:linear-gradient(155deg,#153847,#0E2A36);color:#fff}
.picker-cell .k{font-family:var(--head);font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.picker-cell:last-child .k{color:rgba(255,255,255,.55)}
.picker-cell .v{font-family:var(--head);font-size:26px;font-weight:800;color:var(--ink);
  letter-spacing:-.02em;line-height:1.1}
.picker-cell:last-child .v{color:#4FD3E4}
.picker-cell p{font-size:13px;line-height:1.65;color:var(--muted);margin-top:10px}
.picker-cell:last-child p{color:rgba(255,255,255,.7)}

/* what's included / excluded */
.incl{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
.incl li{display:flex;align-items:flex-start;gap:14px;padding:17px 0;border-bottom:1px solid var(--line)}
.incl .ck{width:24px;height:24px;border-radius:7px;background:var(--teal-tint);color:var(--teal-dark);
  display:grid;place-items:center;flex-shrink:0;margin-top:1px}
.incl .ck svg{width:12px;height:12px}
.incl b{display:block;font-family:var(--head);font-size:15px;font-weight:700;color:var(--ink);
  margin-bottom:4px;letter-spacing:-.01em}
.incl p{font-size:13.5px;line-height:1.65;color:var(--muted);margin:0}
.excl{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.excl-item{border:1px dashed var(--line);border-radius:var(--r);padding:24px 26px;background:var(--bg-soft)}
.excl-item b{display:block;font-family:var(--head);font-size:15px;font-weight:700;
  color:var(--ink);margin-bottom:8px}
.excl-item p{font-size:13.5px;line-height:1.68;color:var(--muted);margin:0}

/* plain-English fine print */
.spec{border-top:1px solid var(--line)}
.spec-row{display:grid;grid-template-columns:minmax(180px,250px) 1fr;gap:32px;
  padding:22px 0;border-bottom:1px solid var(--line);align-items:start}
.spec-row dt{font-family:var(--head);font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.spec-row dd{font-size:14.5px;line-height:1.72;color:var(--muted);margin:0}
.spec-row dd b{color:var(--ink-2);font-family:var(--head);font-weight:600}

@media(max-width:1080px){
  .prod-bar{grid-template-columns:repeat(2,1fr)}
  .prod-cell:nth-child(2){border-right:none}
  .prod-cell:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .prod-buy{grid-column:1/-1;border-top:1px solid var(--line);flex-direction:row;
    align-items:center;justify-content:space-between;gap:20px}
  .prod-buy .btn{width:auto;flex-shrink:0}
  .prod-buy small{display:none}
  .picker-body{grid-template-columns:1fr 1fr}
  .picker-cell:nth-child(2){border-right:none}
  .picker-cell:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:820px){
  .incl{grid-template-columns:1fr;gap:0}
  .excl{grid-template-columns:1fr}
  .spec-row{grid-template-columns:1fr;gap:8px}
  .picker-tabs{width:100%;justify-content:center;flex-wrap:wrap}
  .prod-bar{margin-bottom:-36px}
}
@media(max-width:520px){
  .picker-body{grid-template-columns:1fr}
  .picker-cell{border-right:none;border-bottom:1px solid var(--line)}
  .picker-cell:last-child{border-bottom:none}
  .picker-tab{padding:10px 16px;font-size:13px}
  .prod-bar{grid-template-columns:1fr}
  .prod-cell{border-right:none;border-bottom:1px solid var(--line)}
  .prod-buy{flex-direction:column;align-items:stretch}
  .prod-buy .btn{width:100%}
}

/* ═══════════ PRODUCT HUB ═══════════ */
.hub{display:grid;grid-template-columns:1fr;gap:20px}
.hub-card{display:grid;grid-template-columns:64px 1fr minmax(200px,240px);gap:28px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:30px 32px;align-items:center;transition:.24s}
.hub-card:hover{border-color:var(--teal);box-shadow:var(--shadow-card);transform:translateY(-3px)}
.hub-ic{width:64px;height:64px;border-radius:16px;display:grid;place-items:center}
.hub-ic svg{width:28px;height:28px}
.hub-card h3{font-size:21px;font-weight:800;margin-bottom:7px;letter-spacing:-.015em}
.hub-tag{display:inline-block;font-family:var(--head);font-size:10.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;padding:4px 10px;border-radius:5px;
  background:var(--teal-tint);color:var(--teal-dark);margin-left:10px;vertical-align:3px}
.hub-card p{font-size:14.5px;line-height:1.68;color:var(--muted);margin:0}
.hub-side{text-align:right}
.hub-price{font-family:var(--head);font-size:24px;font-weight:800;color:var(--ink);
  letter-spacing:-.02em;line-height:1.2}
.hub-price small{display:block;font-size:12px;font-weight:500;color:var(--muted);
  letter-spacing:0;margin-top:4px}
.hub-side .link-arrow{margin-top:12px}

/* how the four fit together */
.stack{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;background:#fff}
.stack-step{padding:28px 26px;border-right:1px solid var(--line);position:relative}
.stack-step:last-child{border-right:none}
.stack-n{font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--teal-dark);margin-bottom:12px}
.stack-step h3{font-size:16.5px;font-weight:700;margin-bottom:8px;letter-spacing:-.01em}
.stack-step p{font-size:13.5px;line-height:1.65;color:var(--muted);margin:0}

@media(max-width:900px){
  .hub-card{grid-template-columns:56px 1fr;gap:20px}
  .hub-ic{width:56px;height:56px}
  .hub-side{grid-column:2;text-align:left;display:flex;align-items:center;gap:20px;
    padding-top:6px;border-top:1px solid var(--line);margin-top:4px}
  .hub-side .link-arrow{margin-top:0}
  .stack{grid-template-columns:1fr 1fr}
  .stack-step:nth-child(2){border-right:none}
  .stack-step:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:560px){
  .stack{grid-template-columns:1fr}
  .stack-step{border-right:none;border-bottom:1px solid var(--line)}
  .stack-step:last-child{border-bottom:none}
}

/* ═══════════ REFERENCE PAGE (Tier 3) ═══════════ */
/* Flowing prose beside a discrete infobox. Unlike two loose columns, a bordered
   panel next to running text reads correctly even at different heights. */
.ref{display:grid;grid-template-columns:1fr minmax(300px,340px);gap:56px;align-items:start}
.ref-prose p{font-size:16.5px;line-height:1.8;color:var(--ink-2);margin-bottom:18px}
.ref-prose p:last-child{margin-bottom:0}
.ref-prose p b{font-family:var(--head);font-weight:700;color:var(--ink)}
.infobox{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
.infobox-cap{margin:0;font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);padding:20px 24px 16px;
  border-bottom:1px solid var(--line);background:var(--bg-soft)}
.infobox dl{padding:6px 24px 14px}
.infobox .row{display:grid;grid-template-columns:1fr auto;gap:16px;padding:13px 0;
  border-bottom:1px solid var(--line);align-items:baseline}
.infobox .row:last-child{border-bottom:none}
.infobox dt{font-size:13px;color:var(--muted)}
.infobox dd{margin:0;font-family:var(--head);font-size:13.5px;font-weight:700;
  color:var(--ink);text-align:right}

/* coverage matrix: providers down the side, bureaus across the top */
.cov{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.cov table{width:100%;border-collapse:collapse}
.cov th,.cov td{padding:15px 14px;border-bottom:1px solid var(--line);
  font-size:13.5px;text-align:center}
.cov th:first-child,.cov td:first-child{text-align:left;padding-left:24px;width:30%}
.cov thead th{background:var(--bg-soft);font-family:var(--head);font-weight:700;font-size:12.5px;
  color:var(--ink);letter-spacing:-.01em;border-bottom:2px solid var(--line)}
.cov thead th.hi{color:var(--teal-dark);background:var(--teal-tint)}
.cov tbody th{font-family:var(--head);font-weight:600;color:var(--ink);font-size:14px}
.cov tr:last-child th,.cov tr:last-child td{border-bottom:none}
.cov tr.me{background:rgba(228,244,246,.55)}
.cov tr.me th{color:var(--teal-dark);font-weight:800}
.cov .mk{display:inline-grid;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%}
.cov .yes{background:#E4F6EC;color:#1E8E52}
.cov .no{background:#FBE9E7;color:#C0392B}
.cov .maybe{background:var(--bg-soft);color:var(--muted-2)}
.cov .mk svg{width:12px;height:12px}

/* action cards carrying real reference data */
.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.action{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 28px 24px;
  display:flex;flex-direction:column}
.action-n{width:34px;height:34px;border-radius:10px;background:var(--teal);color:#fff;
  display:grid;place-items:center;font-family:var(--head);font-weight:800;font-size:14px;
  margin-bottom:18px}
.action h3{font-size:18px;font-weight:700;margin-bottom:9px;letter-spacing:-.01em}
.action > p{font-size:13.8px;line-height:1.68;color:var(--muted);margin:0 0 18px;flex:1}
.action-ref{margin-top:auto;padding-top:16px;border-top:1px dashed var(--line)}
.action-ref b{display:block;font-family:var(--head);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:8px}
.action-ref span{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;line-height:1.75;color:var(--ink-2);word-break:break-word}

@media(max-width:900px){
  .ref{grid-template-columns:1fr;gap:32px}
  .actions{grid-template-columns:1fr}
  .cov th,.cov td{padding:12px 8px;font-size:12.5px}
  .cov th:first-child,.cov td:first-child{padding-left:14px;width:34%}
}

/* ═══════════ DOCUMENT PAGES (Tier 5) ═══════════ */
/* A legal page is a document, not a landing page: one consistent narrow column
   from top to bottom. The earlier dead-space problem came from mixing a capped
   prose block with full-width neighbours — here there are no full-width sections
   to misalign against, so the measure reads as intentional. */
.doc{max-width:880px;margin:0 auto;padding:0 32px}
.doc-hero{background:linear-gradient(180deg,var(--bg-grad-top),#fff 88%);padding:48px 0 44px}
.doc-kind{font-family:var(--head);font-size:11.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--teal-dark);margin-bottom:14px;display:block}
.doc-hero h1{font-size:clamp(28px,3.6vw,40px);font-weight:800;margin-bottom:16px;letter-spacing:-.02em}
.doc-lede{font-size:16.5px;line-height:1.75;color:var(--muted)}
.doc-meta{display:flex;gap:26px;flex-wrap:wrap;margin-top:26px;padding-top:22px;
  border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.doc-meta b{font-family:var(--head);font-weight:600;color:var(--ink)}

.doc-toc{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 28px;margin-bottom:44px}
.doc-toc h2{font-family:var(--head);font-size:11.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.doc-toc ol{display:grid;grid-template-columns:1fr 1fr;gap:2px 32px;list-style:none;counter-reset:toc}
.doc-toc li{counter-increment:toc}
.doc-toc a{display:flex;gap:11px;padding:8px 0;font-size:14px;color:var(--ink-2);transition:.16s}
.doc-toc a::before{content:counter(toc) ".";font-family:var(--head);font-weight:700;
  color:var(--muted-2);min-width:20px}
.doc-toc a:hover{color:var(--teal-dark)}
.doc-toc a:hover::before{color:var(--teal)}

.doc-sec{padding:34px 0;border-top:1px solid var(--line);counter-increment:sec}
.doc-sec:first-of-type{border-top:none;padding-top:0}
.doc-sec h2{font-size:22px;font-weight:800;margin-bottom:16px;letter-spacing:-.015em;
  scroll-margin-top:96px}
.doc-sec h2::before{content:counter(sec) ". ";color:var(--muted-2)}
.doc-sec h3{font-size:16.5px;font-weight:700;margin:24px 0 10px}
.doc-sec p{font-size:15.5px;line-height:1.8;color:var(--ink-2);margin-bottom:15px}
.doc-sec p:last-child{margin-bottom:0}
.doc-sec ul{margin:0 0 16px}
.doc-sec li{position:relative;padding-left:22px;font-size:15px;line-height:1.75;
  color:var(--ink-2);margin-bottom:9px}
.doc-sec li::before{content:"";position:absolute;left:2px;top:10px;width:6px;height:6px;
  border-radius:50%;background:var(--teal)}
.doc-body{counter-reset:sec}
.doc-note{background:var(--teal-tint);border:1px solid #C6E6EB;border-radius:var(--r-sm);
  padding:20px 24px;margin:20px 0}
.doc-note p{font-size:14.5px;line-height:1.75;color:var(--ink-2);margin:0}
.doc-note b{font-family:var(--head);font-weight:700;color:var(--teal-dark)}
.doc-warn{background:#FFF8E9;border:1px solid #F0DCAE}
.doc-warn b{color:#8A6A2F}
.doc-tbl{width:100%;border-collapse:collapse;margin:6px 0 18px;border:1px solid var(--line);
  border-radius:var(--r-sm);overflow:hidden}
.doc-tbl th,.doc-tbl td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);
  font-size:14px;vertical-align:top}
.doc-tbl thead th{background:var(--bg-soft);font-family:var(--head);font-weight:700;font-size:13px;color:var(--ink)}
.doc-tbl tbody th{font-family:var(--head);font-weight:600;color:var(--ink);width:38%}
.doc-tbl td{color:var(--ink-2)}
.doc-tbl tr:last-child th,.doc-tbl tr:last-child td{border-bottom:none}

.doc-foot{margin-top:44px;padding:30px 32px;background:var(--bg-soft);
  border:1px solid var(--line);border-radius:var(--r)}
.doc-foot h2{font-size:18px;font-weight:800;margin-bottom:10px}
.doc-foot p{font-size:14.5px;line-height:1.75;color:var(--muted);margin:0}
.doc-foot p+p{margin-top:10px}

@media(max-width:820px){
  .doc{padding:0 20px}
  .doc-toc ol{grid-template-columns:1fr}
  .doc-sec h2{font-size:20px}
}

/* ═══════════ TWO-PATH HERO ═══════════ */
/* Headline centred and full width; the two service cards sit side by side beneath it
   rather than crammed into one column, so each gets ~596px instead of 350px and the
   photograph is never covered by an opaque card. */
.hero-copy{position:relative;z-index:3;max-width:660px}
.hero-trust{display:flex;align-items:center;gap:8px;margin-top:16px;
  font-size:12.5px;font-weight:500;color:#5C6B78}
.hero-trust svg{width:13px;height:13px;flex-shrink:0;color:#7E8C97}
.hero-sub{margin-top:20px;padding-top:20px;border-top:1px solid rgba(19,35,48,.16);
  font-size:13px;line-height:1.65;color:#5C6B78;max-width:520px}
.hero-sub .ilink{color:#8CE7F2;text-decoration-color:rgba(140,231,242,.45)}
.hero-sub .ilink:hover{color:#B7F1F8;text-decoration-color:#B7F1F8}
.paths{display:grid;grid-template-columns:1fr 1fr;gap:24px}
/* Now sits on a light section rather than over the hero photograph, so the frosted
   translucent treatment is replaced with a solid card and a lighter shadow. */
.path-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:34px 36px 32px;display:flex;flex-direction:column;text-align:left;
  box-shadow:0 10px 30px rgba(19,35,48,.07);transition:.26s cubic-bezier(.4,0,.2,1)}
.path-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(19,35,48,.13);border-color:#C6E6EB}
.path-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  border-radius:20px 20px 0 0;background:var(--teal)}
.path-card.loans::before{background:#5B60C4}
.path-card.loans:hover{border-color:#C3C7EE}
.path-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.path-tag{font-family:var(--head);font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;padding:6px 12px;border-radius:6px;white-space:nowrap}
.path-card .path-tag{background:var(--teal-tint);color:var(--teal-dark)}
.path-card.loans .path-tag{background:#E7E9FB;color:#4A4FA8}
.path-card h2{font-size:25px;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin-bottom:7px}
.path-amt{font-size:14.5px;line-height:1.55;color:var(--muted)}
.path-amt b{font-family:var(--head);font-weight:700;color:var(--ink)}
.path-facts{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;
  padding:20px 0;margin-bottom:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.path-facts div{font-size:13px;line-height:1.45;color:var(--muted)}
.path-facts b{display:block;font-family:var(--head);font-size:14px;font-weight:700;
  color:var(--ink);margin-bottom:2px;letter-spacing:-.01em}
.path-card .btn{width:100%;justify-content:center;padding:15px 24px;font-size:14.5px}
.path-warn{margin-top:14px;font-size:12px;line-height:1.55;color:var(--muted-2);text-align:center}
.btn-indigo{background:#4A4FA8;color:#fff;box-shadow:0 8px 20px rgba(74,79,168,.28)}
.btn-indigo:hover{background:#3C4092;transform:translateY(-2px);box-shadow:0 12px 26px rgba(74,79,168,.34)}

@media(max-width:900px){
  .paths{grid-template-columns:1fr;gap:16px}
  .path-card{padding:28px 26px 26px}
  .path-card h2{font-size:22px}
}
@media(max-width:520px){
  .path-facts{grid-template-columns:1fr;gap:12px}
}

.hero-disclosure{max-width:900px;margin:26px auto 0;text-align:center;font-size:12.5px;
  line-height:1.7;color:var(--muted-2)}

/* On the scrim a solid indigo button only reaches 2.98:1, and lightening it far
   enough breaks the white label. A white button with indigo text clears both. */
.hero .btn-indigo{background:#4A4FA8;color:#fff;box-shadow:0 10px 26px rgba(74,79,168,.26)}
.hero .btn-indigo:hover{background:#3C4092;color:#fff;transform:translateY(-2px)}
.hero .btn-ghost{background:rgba(255,255,255,.72);color:var(--ink);border-color:#7E8C97;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.7);color:#fff}

/* Restored: these six grids lost their collapse rules when media blocks were
   rewritten, leaving 2–3 columns at phone width. */
@media(max-width:1080px){
  .about{grid-template-columns:1fr;gap:44px}
  .about-photo{order:-1}
  .track{grid-template-columns:1fr;gap:40px}
}
@media(max-width:820px){
  .steps{grid-template-columns:1fr;gap:16px}
  .pc{grid-template-columns:1fr;gap:18px}
  .about{gap:36px}
  .track{gap:32px}
}
@media(max-width:520px){
  .steps{gap:14px}
  .about{gap:30px}
  .track{gap:26px}
}

/* Calculator sits on the hero's navy so the page gains a third tone instead of
   alternating between only white and bg-soft. */
.sec-dark{background:#0E2430}
.sec-dark .eyebrow{color:#6FE3F0}
.sec-dark .sec-head h2 .a{color:#fff}
.sec-dark .sec-head h2 .b{color:#6FE3F0}
.sec-dark .sec-head > p{color:rgba(255,255,255,.72)}

/* ═══════════ LOAN CROSS-REFERENCE (Tier 2) ═══════════ */
/* Indigo marks the borrowing side throughout the site. On a guide page the block
   is deliberately restrained — it answers "can I just borrow instead?" honestly
   rather than functioning as an advertisement. */
.xloan{display:grid;grid-template-columns:1fr minmax(280px,340px);gap:44px;
  background:linear-gradient(160deg,#F4F5FE,#FBFBFF);border:1px solid #DCDFF7;
  border-radius:var(--r);padding:34px 36px;align-items:start}
.xloan-tag{display:inline-block;font-family:var(--head);font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:6px;
  background:#E7E9FB;color:#4A4FA8;margin-bottom:14px}
.xloan h3{font-size:20px;font-weight:800;margin-bottom:11px;letter-spacing:-.015em}
.xloan p{font-size:14.5px;line-height:1.72;color:var(--ink-2);margin-bottom:12px}
.xloan p:last-child{margin-bottom:0}
.xloan-side{background:#fff;border:1px solid #DCDFF7;border-radius:var(--r-sm);padding:24px 26px}
.xloan-side b{display:block;font-family:var(--head);font-size:13px;font-weight:700;
  color:var(--ink);margin-bottom:12px}
.xloan-side li{position:relative;padding-left:19px;font-size:13px;line-height:1.6;
  color:var(--muted);margin-bottom:9px}
.xloan-side li:last-child{margin-bottom:0}
.xloan-side li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;
  border-radius:50%;background:#8A8FEA}
.xloan-side .btn{margin-top:18px;width:100%;justify-content:center;padding:12px 20px;font-size:13.5px}

@media(max-width:820px){
  .xloan{grid-template-columns:1fr;gap:24px;padding:28px 26px}
}

/* ═══════════ EXPLAINER PAGES (Tier 6) ═══════════ */
/* Key figures as a strip, not a card: an explainer's job is to hand over numbers
   the reader can carry away, so they lead rather than sit inside prose. */
.kf{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;background:#fff;margin-top:30px}
.kf-cell{padding:24px 26px;border-right:1px solid var(--line)}
.kf-cell:last-child{border-right:none}
.kf-cell b{display:block;font-family:var(--head);font-size:30px;font-weight:800;color:var(--ink);
  letter-spacing:-.03em;line-height:1.05;margin-bottom:7px}
.kf-cell span{display:block;font-size:12.5px;line-height:1.55;color:var(--muted)}

/* proportion bars — for anything weighted, e.g. the five FICO factors */
.bars{display:flex;flex-direction:column;gap:2px}
.bar-row{display:grid;grid-template-columns:minmax(150px,220px) 1fr 56px;gap:20px;
  align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}
.bar-row:last-child{border-bottom:none}
.bar-row .lbl{font-family:var(--head);font-size:15px;font-weight:700;color:var(--ink);
  letter-spacing:-.01em;line-height:1.3}
.bar-row .lbl small{display:block;font-family:var(--body);font-size:12.5px;font-weight:400;
  color:var(--muted);margin-top:3px;letter-spacing:0}
.bar-track{height:14px;border-radius:100px;background:var(--bg-soft);overflow:hidden}
.bar-fill{height:100%;border-radius:100px;background:var(--teal)}
.bar-fill.f2{background:#2F8FA8}.bar-fill.f3{background:#4E8AA8}
.bar-fill.f4{background:#7A9BB0}.bar-fill.f5{background:#A3B4C0}
.bar-row .pct{font-family:var(--head);font-size:17px;font-weight:800;color:var(--ink);text-align:right}

/* situation -> verdict rows */
.scen{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.scen-row{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;
  padding:17px 24px;border-bottom:1px solid var(--line)}
.scen-row:last-child{border-bottom:none}
.scen-row p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0}
.scen-row p small{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.pill{font-family:var(--head);font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:6px 13px;border-radius:100px;white-space:nowrap}
.pill.soft{background:#E4F6EC;color:#186B3F}
.pill.hard{background:#FBE9E7;color:#A8321F}
.pill.dep{background:#FFF4DE;color:#8A6A2F}

/* numbered takeaway at the end of an explainer */
.takeaway{border:1px solid var(--line);border-radius:var(--r);background:var(--bg-soft);
  padding:32px 36px}
.takeaway h2{font-size:19px;font-weight:800;margin-bottom:18px;letter-spacing:-.015em}
.takeaway ol{list-style:none;counter-reset:tk;display:flex;flex-direction:column;gap:13px}
.takeaway li{counter-increment:tk;position:relative;padding-left:36px;font-size:15px;
  line-height:1.72;color:var(--ink-2)}
.takeaway li::before{content:counter(tk);position:absolute;left:0;top:1px;width:24px;height:24px;
  border-radius:7px;background:var(--teal);color:#fff;display:grid;place-items:center;
  font-family:var(--head);font-size:12px;font-weight:800}

/* learn hub cards */
.lgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.lcard{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:28px 30px;transition:.22s}
.lcard:hover{border-color:var(--teal);box-shadow:var(--shadow-card);transform:translateY(-3px)}
.lcard .meta{display:flex;gap:10px;align-items:center;font-family:var(--head);font-size:11px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:13px}
.lcard .meta i{width:3px;height:3px;border-radius:50%;background:var(--muted-2)}
.lcard h3{font-size:19px;font-weight:800;margin-bottom:9px;letter-spacing:-.015em;line-height:1.3}
.lcard p{font-size:14px;line-height:1.68;color:var(--muted);margin:0}

@media(max-width:900px){
  .kf{grid-template-columns:1fr 1fr}
  .kf-cell:nth-child(2){border-right:none}
  .kf-cell:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .lgrid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .bar-row{grid-template-columns:1fr 48px;gap:8px 14px}
  .bar-track{grid-column:1/-1;order:3}
  .scen-row{grid-template-columns:1fr;gap:10px}
  .pill{justify-self:start}
}
@media(max-width:520px){
  .kf{grid-template-columns:1fr}
  .kf-cell{border-right:none;border-bottom:1px solid var(--line)}
  .kf-cell:last-child{border-bottom:none}
  .takeaway{padding:26px 24px}
}

/* ═══════════ PAYMENT MATRIX ═══════════ */
/* Every amount and term in one grid, so nobody has to operate a slider to find
   out what they would actually pay. */
.pmx{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.pmx table{width:100%;border-collapse:collapse}
.pmx th,.pmx td{padding:14px 16px;border-bottom:1px solid var(--line);font-size:14px;text-align:center}
.pmx thead th{background:var(--bg-soft);font-family:var(--head);font-weight:700;font-size:12.5px;
  color:var(--ink);letter-spacing:-.01em;border-bottom:2px solid var(--line)}
.pmx tbody th{text-align:left;font-family:var(--head);font-weight:700;color:var(--ink);font-size:14.5px}
.pmx td{color:var(--muted)}
.pmx td b{display:block;font-family:var(--head);font-size:17px;font-weight:800;color:var(--ink);
  letter-spacing:-.01em}
.pmx td small{display:block;font-size:11.5px;color:var(--muted-2);margin-top:2px}
.pmx tr.tier-head th{background:var(--teal-tint);color:var(--teal-dark);font-size:12px;
  letter-spacing:.09em;text-transform:uppercase;padding:11px 16px}
.pmx tr:last-child th,.pmx tr:last-child td{border-bottom:none}

/* ═══════════ BILLING CYCLE ═══════════ */
.cyc{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;background:#fff}
.cyc-step{padding:26px 24px;border-right:1px solid var(--line);position:relative}
.cyc-step:last-child{border-right:none}
.cyc-day{display:inline-block;font-family:var(--head);font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:100px;
  background:var(--teal-tint);color:var(--teal-dark);margin-bottom:13px}
.cyc-step.warn .cyc-day{background:#FBE9E7;color:#A8321F}
.cyc-step h3{font-size:16px;font-weight:700;margin-bottom:8px;letter-spacing:-.01em}
.cyc-step p{font-size:13.5px;line-height:1.65;color:var(--muted);margin:0}

@media(max-width:900px){
  .cyc{grid-template-columns:1fr 1fr}
  .cyc-step:nth-child(2){border-right:none}
  .cyc-step:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .pmx th,.pmx td{padding:12px 10px;font-size:13px}
}
@media(max-width:560px){
  .cyc{grid-template-columns:1fr}
  .cyc-step{border-right:none;border-bottom:1px solid var(--line)}
  .cyc-step:last-child{border-bottom:none}
}

/* The checker was designed for the 1200px container and looks wrong squeezed into
   the 816px document column — stacking it turns the dark side into an empty band.
   So it breaks out of the column instead, up to the width the page uses elsewhere.
   The clamp stops it bleeding past the viewport on narrower screens. */
.doc .elig-panel{
  width:auto;
  margin-left:calc(-1 * clamp(0px, (100vw - 880px) / 2, 168px));
  margin-right:calc(-1 * clamp(0px, (100vw - 880px) / 2, 168px));
}
/* Below ~1040px the two columns are too tight even with the bleed, so it stacks —
   and once stacked the dark side becomes a header strip rather than a tall void. */
@media(max-width:1040px){
  .doc .elig-panel{grid-template-columns:1fr}
  .doc .elig-side{padding:28px 32px}
  .doc .el-facts{margin-top:22px;padding-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:11px 20px}
  .doc .el-meter{margin-bottom:4px}
  .doc .el-meter b{font-size:38px}
}
@media(max-width:900px){
  .doc .elig-panel{margin-left:0;margin-right:0}
}
@media(max-width:560px){
  .doc .el-facts{grid-template-columns:1fr}
}

/* The document page sets .doc-sec p{color:var(--ink-2)} much later in the file. Same
   specificity as .elig-side > p, so it wins on order and paints dark text on the dark
   panel at 1.36:1. Scope the panel's own colours above it. */
.doc-sec .elig-side h3{color:#fff}
.doc-sec .elig-side > p{color:rgba(255,255,255,.78)}
.doc-sec .elig-side .el-meter span{color:rgba(255,255,255,.78)}
.doc-sec .elig-side .el-status{color:rgba(255,255,255,.82)}
.doc-sec .elig-side .el-facts div{color:rgba(255,255,255,.76)}
.doc-sec .elig-side .el-facts b{color:#fff}
.doc-sec .elig-side .el-meter b{color:#4FD3E4}

/* ═══════════ TWO-SERVICE COMPARISON (T4 hub) ═══════════ */
/* The site sells two things with different counterparties. This is the one place
   they are set against each other line by line, so the columns are colour-coded to
   the zones used elsewhere: teal for the builder, indigo for the loan side. */
.svc{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.svc-head{display:grid;grid-template-columns:minmax(160px,1.05fr) 1fr 1fr;
  border-bottom:2px solid var(--line)}
.svc-head > div{padding:22px 22px 20px}
.svc-head > div + div{border-left:1px solid var(--line)}
.svc-head .c1{background:var(--teal-tint)}
.svc-head .c2{background:#EDEEFB}
.svc-head h3{font-size:17px;font-weight:800;letter-spacing:-.015em;margin-bottom:5px}
.svc-head .c1 h3{color:#0F6E7B}
.svc-head .c2 h3{color:#3C4092}
.svc-head p{font-size:12.5px;line-height:1.55;color:#5C6B78;margin:0}
.svc-row{display:grid;grid-template-columns:minmax(160px,1.05fr) 1fr 1fr;
  border-bottom:1px solid var(--line)}
.svc-row:last-child{border-bottom:none}
.svc-row > div{padding:14px 22px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.svc-row > div + div{border-left:1px solid var(--line)}
.svc-row .lbl{font-family:var(--head);font-weight:700;font-size:14px;color:var(--ink)}
.svc-row b{font-weight:700;color:var(--ink)}
.svc-row small{display:block;font-size:12px;color:#5C6B78;margin-top:2px}

/* ═══════════ ROUTE CHOOSER ═══════════ */
.route{display:flex;flex-direction:column;gap:12px}
.route-row{display:grid;grid-template-columns:1fr auto minmax(190px,240px);gap:20px;
  align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:19px 24px;transition:.2s}
.route-row:hover{border-color:var(--teal);box-shadow:var(--shadow-card)}
.route-row.loan:hover{border-color:#8A8FEA}
.route-if{font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.route-if b{color:var(--ink)}
.route-arw{width:20px;height:20px;color:var(--muted-2);flex-shrink:0}
.route-to{display:flex;flex-direction:column;gap:3px}
.route-to b{font-family:var(--head);font-size:14.5px;font-weight:700;color:#0F6E7B}
.route-row.loan .route-to b{color:#3C4092}
.route-to span{font-size:12.5px;color:#5C6B78;line-height:1.5}

@media(max-width:820px){
  .svc-head,.svc-row{grid-template-columns:1fr}
  .svc-head > div + div,.svc-row > div + div{border-left:none;border-top:1px solid var(--line)}
  .svc-row .lbl{background:var(--bg-soft)}
  .route-row{grid-template-columns:1fr;gap:12px}
  .route-arw{transform:rotate(90deg)}
}

/* ═══════════ REVENUE SPLIT (about) ═══════════ */
/* Where the money comes from, drawn rather than described. Deliberately not the
   Tier 6 .bars component — this stacks into a single bar so the proportions read
   as one whole rather than five independent measures. */
.rev-bar{display:flex;height:44px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.rev-seg{display:grid;place-items:center;box-shadow:inset -1px 0 0 rgba(255,255,255,.55);font-family:var(--head);font-size:12.5px;font-weight:700;
  color:#fff;letter-spacing:.01em}
.rev-seg.s1{background:#127A89}
.rev-seg.s2{background:#4A4FA8}
.rev-seg.s3{background:#5C6B78;box-shadow:none}
.rev-key{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px}
.rev-item{padding-top:14px;border-top:3px solid var(--line)}
.rev-item.k1{border-top-color:#127A89}
.rev-item.k2{border-top-color:#4A4FA8}
.rev-item.k3{border-top-color:#5C6B78}
.rev-item b{display:block;font-family:var(--head);font-size:15px;font-weight:800;
  color:var(--ink);margin-bottom:6px;letter-spacing:-.01em}
.rev-item span{display:block;font-size:13.5px;line-height:1.65;color:#5C6B78}
@media(max-width:760px){
  .rev-key{grid-template-columns:1fr;gap:16px}
  .rev-seg{font-size:11px}
}

/* ═══════════ FEE LEDGER (T5 document) ═══════════ */
/* A cost page's job is to answer "what will this take from me" without the reader
   assembling it from prose. Deliberately not the Tier 6 .kf strip — this is a
   ledger of charges, with the zero cases stated as loudly as the non-zero ones. */
.ledger{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
/* Each row is its own grid, so an `auto` column would size to that row's own caption
   and the figures would start at a different x on every line. Fixed width instead,
   right-aligned: money reads right-aligned so the digits line up by place value. */
.ledger-row{display:grid;grid-template-columns:1fr 200px;gap:22px;align-items:center;
  padding:16px 24px;border-bottom:1px solid var(--line)}
.ledger-row:last-child{border-bottom:none}
.ledger-row .what{font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.ledger-row .what b{font-family:var(--head);font-weight:700;color:var(--ink);display:block;
  margin-bottom:2px;font-size:14.5px}
.ledger-row .amt{font-family:var(--head);font-size:17px;font-weight:800;letter-spacing:-.01em;
  white-space:nowrap;text-align:right}
.ledger-row .amt.zero{color:#186B3F}
.ledger-row .amt.cost{color:var(--ink)}
.ledger-row .amt.warn{color:#A8321F}
.ledger-row .amt small{display:block;font-family:var(--body);font-size:11.5px;font-weight:400;
  color:#5C6B78;margin-top:3px;text-align:right}
.ledger-total{background:var(--bg-soft);border-top:2px solid var(--line)}
.ledger-total .amt{font-size:21px}

/* consequence steps — what a missed payment costs over time */
.conseq{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;background:#fff}
.conseq-col{padding:24px 22px;border-right:1px solid var(--line)}
.conseq-col:last-child{border-right:none}
.conseq-col.bad{background:#FDF4F2}
.conseq-when{display:inline-block;font-family:var(--head);font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:100px;
  background:#E4F6EC;color:#186B3F;margin-bottom:13px}
.conseq-col.bad .conseq-when{background:#FBE9E7;color:#A8321F}
.conseq-col h3{font-size:16px;font-weight:700;margin-bottom:8px;letter-spacing:-.01em}
.conseq-col p{font-size:13.5px;line-height:1.65;color:#5C6B78;margin:0}

@media(max-width:760px){
  .conseq{grid-template-columns:1fr}
  .conseq-col{border-right:none;border-bottom:1px solid var(--line)}
  .conseq-col:last-child{border-bottom:none}
  .ledger-row{grid-template-columns:1fr;gap:8px}
  .ledger-row .amt{text-align:left}
  .ledger-row .amt small{text-align:left}
}

/* ═══════════ APPLY PAGE ═══════════ */
/* Split hero: argument on the left, the third-party form on the right. The form
   injects its own markup into #_lg_form_, so the wrapper only supplies the frame,
   the header strip and the trust rail around it. */
.ap{position:relative;background:#0E2430;overflow:hidden;padding:64px 0 78px}
.ap::before{content:"";position:absolute;top:-180px;right:-140px;width:620px;height:620px;
  border-radius:50%;background:radial-gradient(circle,rgba(74,79,168,.34),transparent 62%)}
.ap::after{content:"";position:absolute;bottom:-220px;left:-160px;width:560px;height:560px;
  border-radius:50%;background:radial-gradient(circle,rgba(23,149,166,.16),transparent 64%)}
.ap > .wrap{position:relative;z-index:1}
/* The complaint was that the copy leaned on the form, so the gutter grows — the
   columns themselves keep their width. Left 562px matches the wider reference; the
   gutter goes from 71px to 120px, and the card shrinks from 520 to 470 to pay for it. */
/* The card ring is drawn with box-shadow, which takes no layout space — the column
   is inset by the ring width so it does not run off the edge of the wrap. */
.ap-grid{display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:110px;align-items:center;
  padding-right:12px}

.ap-eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--head);font-size:11.5px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8A8FEA;margin-bottom:22px}
.ap-eyebrow i{flex:1;height:1px;background:rgba(255,255,255,.18);max-width:90px}
.ap h1{font-size:clamp(32px,3.5vw,46px);font-weight:800;line-height:1.12;letter-spacing:-.032em;
  color:#fff;margin-bottom:22px}
.ap h1 em{font-style:normal;color:#9BA0F5}
.ap-lede{font-size:16px;line-height:1.75;color:rgba(255,255,255,.82);margin-bottom:34px}

.ap-pts{border-top:1px solid rgba(255,255,255,.14)}
.ap-pt{display:grid;grid-template-columns:22px 1fr;gap:15px;padding:21px 0;
  border-bottom:1px solid rgba(255,255,255,.14)}
.ap-pt svg{width:20px;height:20px;color:#6FE3F0;margin-top:2px}
.ap-pt p{font-size:14.5px;line-height:1.68;color:rgba(255,255,255,.78);margin:0}
.ap-pt p b{color:#fff;font-weight:700}

.ap-stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0;
  margin-top:34px}
.ap-stat{padding-right:34px;margin-right:34px;border-right:1px solid rgba(255,255,255,.16)}
.ap-stat:last-child{border-right:none;padding-right:0;margin-right:0}
/* "$200–$5,000" is 13 characters; at 26px it needs ~187px and wraps in a three-up grid.
   clamp lets it shrink to fit rather than break across two lines. */
.ap-stat b{display:block;font-family:var(--head);font-size:clamp(19px,1.55vw,24px);font-weight:800;
  color:#fff;letter-spacing:-.03em;line-height:1.15;white-space:nowrap}
.ap-stat span{display:block;font-family:var(--head);font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-top:7px}

.ap-micro{display:flex;align-items:flex-start;gap:9px;margin-top:22px;font-size:12.5px;
  line-height:1.65;color:rgba(255,255,255,.66)}
.ap-micro svg{width:14px;height:14px;flex-shrink:0;margin-top:3px;color:rgba(255,255,255,.5)}

/* form card */
/* Three layers rather than one border: a hairline against the white card, a soft
   band standing the card off the navy, then the drop shadow. */
.ap-card{background:#fff;border-radius:18px;overflow:hidden;border:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.16),
             0 0 0 9px rgba(255,255,255,.045),
             0 0 0 10px rgba(255,255,255,.08),
             0 30px 72px rgba(4,14,22,.5)}
.ap-card-top{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 22px;border-bottom:1px solid var(--line);background:#fff}
.ap-card-top .lft{display:flex;align-items:center;gap:9px;font-family:var(--head);font-size:11.5px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.ap-card-top .lft svg{width:16px;height:16px;color:#186B3F}
.ap-card-top .rgt{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:#5C6B78}
.ap-card-top .rgt svg{width:13px;height:13px}
.ap-form{padding:8px 20px 20px;min-height:360px}
.ap-form-fallback{padding:40px 24px;text-align:center;font-size:14px;line-height:1.7;color:#5C6B78}

/* One line, always. It is flex (a grid put each item on its own row), the label is
   dropped a step and the letter-spacing tightened so the three fit inside 430px. */
.ap-rail{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;
  gap:18px;padding:13px 16px;background:var(--bg-soft);border-top:1px solid var(--line);
  font-family:var(--head);font-size:9.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#5C6B78;white-space:nowrap}
.ap-rail span{display:flex;align-items:center;gap:5px;flex-shrink:0}
.ap-rail svg{width:11px;height:11px;flex-shrink:0}
.ap-rail .ok{color:#186B3F}
.ap-note{margin-top:16px;font-size:12px;line-height:1.7;color:rgba(255,255,255,.62);text-align:center}
.ap-note a{color:#9BA0F5;text-decoration:underline;text-underline-offset:2px}

/* requirement strip below the hero */

@media(max-width:1100px){
  .ap-grid{grid-template-columns:1fr;gap:44px;padding-right:0}
  .ap-card{max-width:560px}
}
@media(max-width:560px){
  .ap{padding:36px 0 44px}
  .ap-grid{gap:32px}
  .ap-stats{grid-template-columns:1fr;gap:16px}
  .ap-stat{padding-right:0;margin-right:0;border-right:none;padding-bottom:14px;
    border-bottom:1px solid rgba(255,255,255,.14)}
  .ap-stat:last-child{border-bottom:none;padding-bottom:0}
    .ap-form{padding:8px 14px 16px}
  }

/* Requirement strip sits inside the dark hero rather than in its own light section —
   an apply page should not hand the reader a second screen to scroll through. Cards
   stack the icon above the label so each one gets room to breathe instead of being
   squeezed into a 72px bar. */
.ap-reqwrap{margin-top:70px;padding-top:56px;border-top:1px solid rgba(255,255,255,.14)}
/* Dark variants of the centred section head, so the block keeps the shape it had as
   its own light section — only the colour changes. */
.ap-reqwrap .eyebrow{color:#6FE3F0}
.ap-reqwrap .sec-head h2 .a{color:#fff}
.ap-reqwrap .sec-head h2 .b{color:#6FE3F0}
/* One connected row with hairline dividers, icon beside the label */
.ap-req{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid rgba(255,255,255,.16);border-radius:14px;overflow:hidden;
  background:rgba(255,255,255,.05)}
.ap-req-c{display:flex;align-items:center;gap:14px;padding:22px 24px;
  border-right:1px solid rgba(255,255,255,.16)}
.ap-req-c:last-child{border-right:none}
.ap-req-ic{width:42px;height:42px;border-radius:11px;background:rgba(111,227,240,.13);
  border:1px solid rgba(111,227,240,.22);flex-shrink:0}
.ap-req-ic svg{display:block;width:100%;height:100%;color:#6FE3F0}
.ap-req-c b{display:block;font-family:var(--head);font-size:14.5px;font-weight:700;color:#fff;
  letter-spacing:-.015em;margin-bottom:3px}
.ap-req-c span{display:block;font-size:13px;line-height:1.55;color:rgba(255,255,255,.68)}
.ap-req-n{max-width:720px;margin:26px auto 0;text-align:center;font-size:13px;line-height:1.75;
  color:rgba(255,255,255,.62)}
.ap-micro a{color:#9BA0F5;text-decoration:underline;text-underline-offset:2px}
.ap-note a{color:#9BA0F5;text-decoration:underline;text-underline-offset:2px}

/* Breadcrumb belongs on the dark hero. On white it reads as a second nav bar. */
.ap .crumb{color:rgba(255,255,255,.6);margin-bottom:26px}
.ap .crumb a{color:rgba(255,255,255,.7)}
.ap .crumb a:hover{color:#fff}
.ap .crumb span{color:rgba(255,255,255,.92)}
.ap .crumb svg{width:13px;height:13px;color:rgba(255,255,255,.38)}

@media(max-width:1080px){
  .ap-req{grid-template-columns:1fr 1fr}
  .ap-req-c:nth-child(2){border-right:none}
  .ap-req-c:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.16)}
}
@media(max-width:560px){
  /* the rail must stay on one line at any width, so it steps down rather than wrapping */
  .ap-rail{font-size:8.5px;gap:11px;padding:12px 10px;letter-spacing:.04em}
  .ap-rail span{gap:4px}
  .ap-rail svg{width:10px;height:10px}
  .ap-reqwrap{margin-top:44px;padding-top:36px}
  .ap-req{grid-template-columns:1fr}
  .ap-req-c{border-right:none;border-bottom:1px solid rgba(255,255,255,.16)}
  .ap-req-c:last-child{border-bottom:none}
}

/* Below ~380px even the stepped-down rail runs out of room, so the labels shorten.
   The full wording stays in the markup for screen readers. */
@media(max-width:380px){
  .ap-rail{font-size:8px;gap:6px;padding:11px 6px;letter-spacing:.01em}
  .ap-rail svg{width:9px;height:9px}
  .ap-rail .lbl-long{display:none}
  .ap-rail .lbl-short{display:inline}
}
.ap-rail .lbl-short{display:none}

/* room for the stats card overhanging into this section */
/* Room for the half of the stats card that hangs into this section. The card is one
   row on desktop, two at 1220 and four at 520, so the overhang is stepped to match. */
.hero + .sec{padding-top:144px}