/* Mortgages by Channing — component library.
   Blocks, cards, tiles, video facades, tabs, stats, photos, trust rows.
   Every component is band-agnostic: it reads --fg/--bg and overrides under .light. */

.hero{padding:80px 0 64px}
.hero .lead{font-size:19px;color:var(--muted);max-width:62ch;margin-top:20px}
/* Trust row */
.rating{display:flex;align-items:center;gap:10px;margin-top:26px;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.rating b{color:var(--fg);font-weight:700;font-size:15px}
.light .rating{color:var(--muted-i)}
.light .rating b{color:var(--fg-i)}
.trust{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:16px;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.trust b{color:var(--fg);font-weight:700}
.badge{display:inline-flex;align-items:center;gap:8px;line-height:1.35}
.light .trust{color:var(--muted-i)}
/* Checklists */
.checks{margin-top:24px}
.checks li{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;font-size:17px;line-height:1.5}
.checks svg{flex:0 0 auto;margin-top:3px}
/* Tabs */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.tab{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  padding:13px 24px 11px;background:transparent;color:var(--fg);border:1px solid var(--line);cursor:pointer;transition:background .15s ease-out,color .15s ease-out}
.tab[aria-selected="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.tab:hover{border-color:var(--purple)}
.light .tab{color:var(--fg-i);border-color:var(--line-i)}
.light .tab[aria-selected="true"]{background:var(--fg-i);color:var(--bg-i);border-color:var(--fg-i)}
/* Steps */
.step .n{font-family:'Anton',sans-serif;font-size:40px;line-height:1;color:var(--purple)}
.step h3{margin:8px 0 10px}
/* Stat blocks */
.stats{display:grid;grid-template-columns:repeat(2,1fr);border-top:3px solid var(--purple)}
.stats--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:480px){.stats--3{grid-template-columns:1fr}}
/* Inverse-surface components sit on the opposite ground, so accent text
   inside them takes the opposite ink. */
.stat{--ink:var(--ink-i);background:var(--bg-i);padding:24px;border-right:1px solid var(--line-i);border-bottom:1px solid var(--line-i)}
.stat .n{font-family:'Anton',sans-serif;font-size:40px;line-height:1;color:var(--fg-i)}
.stat .l{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-i);margin-top:6px}
/* Quote */
.quote{border:1px solid var(--line);border-left:3px solid var(--purple);background:var(--card);color:var(--fg);padding:28px}
.light .quote{border-color:var(--line-i);border-left-color:var(--purple);background:var(--card-i);color:var(--fg-i)}
.quote .who{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:18px;letter-spacing:.05em;text-transform:uppercase}
.quote .role{font-family:'Barlow Condensed',sans-serif;font-weight:500;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.light .quote .role{color:var(--muted-i)}
.quote p{font-size:17px;margin:0;max-width:none;color:inherit}
/* Photo placeholders — real images need greyscale + contrast per brand spec 6 */
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:32px}
@media(max-width:760px){.photos{grid-template-columns:repeat(2,1fr)}}
.photos{grid-template-columns:repeat(3,1fr)}
.photos .ph{aspect-ratio:4/3;object-fit:cover}
@media(max-width:760px){.photos{grid-template-columns:repeat(2,1fr)}}
.ph--portrait{aspect-ratio:3/4;object-fit:cover;max-width:440px}
.ph--hero{border:0;width:100%;max-width:520px;margin-left:auto;display:block}
.ph--bio{width:100%;max-width:100%;aspect-ratio:4/5;object-fit:cover;display:block;margin:0 0 16px}
.ph--crop{aspect-ratio:5/4;object-fit:cover;object-position:center 30%}
/* Reviews rendered natively rather than via the third-party widget */
.revgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:32px}
.rev{--ink:var(--ink-i);border:1px solid var(--line-i);background:var(--bg-i);padding:22px}
.rev .rname{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-i)}
.rev .rwhen{font-family:'Barlow Condensed',sans-serif;font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-i)}
.rev .rstars{color:var(--ink);letter-spacing:2px;font-size:14px;margin:8px 0 10px}
.rev p{font-size:15px;line-height:1.55;color:var(--muted-i);margin:0;max-width:none}
/* ---- Application section: device + notification cards, built in CSS ---- */
.split-app{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.device{--ink:var(--ink-i);background:var(--fg);color:var(--bg);max-width:260px;border:1px solid var(--fg)}
.light .device{background:var(--fg-i);color:var(--bg-i);border-color:var(--fg-i)}
.dev-bar{display:flex;justify-content:space-between;font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:12px 16px;border-bottom:1px solid var(--muted-i)}
.dev-body{padding:24px 16px}
.dev-h{font-family:'Anton',sans-serif;font-weight:400;font-size:22px;line-height:1.05;letter-spacing:1px;text-transform:uppercase}
.dev-p{font-size:14px;line-height:1.5;color:var(--muted-i);margin:8px 0 24px;max-width:none}
.light .dev-p{color:var(--muted)}
.light .device h3{color:var(--bg-i)}
.dev-steps li{display:flex;gap:10px;align-items:flex-start;font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:15px;letter-spacing:.04em;text-transform:uppercase;padding:12px 0;border-bottom:1px solid var(--muted-i)}
.dev-btn{display:block;background:var(--purple);color:#fff;text-align:center;font-family:'Barlow Condensed',sans-serif;
  font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;padding:14px 0 12px;margin-top:24px}
.notif{position:absolute;width:210px;background:var(--bg);color:var(--fg);border:1px solid var(--fg);padding:16px}
.light .notif{background:var(--bg-i);color:var(--fg-i);border-color:var(--fg-i)}
.notif .nhead{display:flex;justify-content:space-between;gap:12px;font-family:'Barlow Condensed',sans-serif;
  font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.notif .ntime{color:var(--muted);font-weight:500}
.light .notif .ntime{color:var(--muted-i)}
.notif p{font-size:15px;line-height:1.45;margin:0;max-width:none;color:inherit}
.n1{top:4%;right:0}
.n2{top:56%;right:24px}
.js .notif[data-rv]{transform:translate3d(24px,0,0)}
.js .notif[data-rv].is-in{transform:translate3d(0,0,0)}
@media(max-width:1140px){
  .split-app{grid-template-columns:1fr;gap:40px}
  .device{max-width:100%}
  .notif{position:static;width:auto;margin-top:16px}
  .js .notif[data-rv]{transform:translate3d(0,16px,0)}
}
@media(prefers-reduced-motion:reduce){.js .notif[data-rv]{transform:none}}
/* ---- Video: facade pattern. No YouTube iframe until the user clicks, so the
   player's ~1.2MB of JS never loads on page view. Poster + play button only. ---- */
.vhero{position:relative;width:100%;aspect-ratio:16/9;border:1px solid var(--line);background:var(--card);
  cursor:pointer;overflow:hidden;display:block;padding:0}
.light .vhero{border-color:var(--line-i);background:var(--card-i)}
.vhero img{width:100%;height:100%;object-fit:cover;display:block}
.vhero .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:84px;height:84px;background:var(--purple);display:flex;align-items:center;justify-content:center;
  transition:background .15s ease-out}
.vhero:hover .play{background:var(--pdeep)}
.vhero .vlabel{position:absolute;left:0;bottom:0;right:0;padding:18px 20px;background:rgba(0,0,0,.72);
  color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:17px;
  letter-spacing:.05em;text-transform:uppercase;text-align:left}
.vhero iframe{width:100%;height:100%;border:0;display:block}
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
@media(max-width:760px){.vgrid{grid-template-columns:1fr}}
.vgrid .vhero{aspect-ratio:16/9}
.vgrid .play{width:56px;height:56px}
.vgrid .vlabel{font-size:14px;padding:14px 16px}
/* ---- Mega menu. The legacy header carried 56 program links on every page and
   that internal linking is load bearing, so the structure is preserved and only
   the styling changes. Opens on hover and on keyboard focus, so it needs no JS. ---- */
.nav li.has-mega{position:static}
.nav>ul>li,.nav>ul>li>a,.nav .megatrig{white-space:nowrap}
.nav .megatrig{background:none;border:0;padding:0;margin:0;cursor:pointer;color:inherit;
  font:inherit;letter-spacing:inherit;text-transform:inherit;display:inline-flex;align-items:center;gap:6px}
.nav .megatrig svg{transition:transform .15s ease-out}
/* The mega panel is white in either theme. Re-mapping the tokens on the panel
   means every column, heading and link inside it comes out light without a
   single per-element override. */
.mega{--bg:#fff;--fg:#000;--muted:#6E6E6E;--line:#E5E5E5;--card:#F5F5F5;
  --bg-i:#fff;--fg-i:#000;--muted-i:#6E6E6E;--line-i:#E5E5E5;--card-i:#F5F5F5;
  --blk:#F5F5F5;--blk-i:#F5F5F5;
  --ink:#7549EA;--ink-i:#997BF4;
  position:absolute;left:0;right:0;top:100%;background:var(--bg);color:var(--fg);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  box-shadow:0 18px 40px rgba(0,0,0,.18);padding:28px 0 32px;z-index:50;
  /* Hidden by visibility rather than display so closing can be delayed. The
     panel sits a couple of dozen pixels below the button it belongs to, and on
     display:none it vanished the moment the pointer entered that gap. */
  opacity:0;visibility:hidden;
  transition:opacity .15s ease-out .18s,visibility 0s linear .33s}
/* The gap itself: a transparent strip joining the button to the panel. It is
   part of the panel, so it only exists while the panel is open.

   It has to reach all the way up to the buttons. At 26px it stopped three
   pixels short of them, leaving a band the pointer could land in where it was
   over neither the button nor the panel, and hover died there. A real mouse
   moving down at normal speed reports a position every few pixels and lands in
   a band that thin regularly, which is why the menu closed on the way to a
   link. 40px overshoots into the bar, which costs nothing: the buttons sit on
   top of it. */
.mega::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:40px}
/* .is-open is set by the controller in site.js, which owns pointer opening and
   the grace periods that make the panel reachable. :hover here is the no-JS
   fallback only, and :focus-within keeps the keyboard path working either way. */
html:not(.js) .nav li.has-mega:hover>.mega,
.nav li.has-mega.is-open>.mega,
.nav li.has-mega:focus-within>.mega{
  opacity:1;visibility:visible;transition:opacity .12s ease-out,visibility 0s}
html:not(.js) .nav li.has-mega:hover>.megatrig svg,
.nav li.has-mega.is-open>.megatrig svg,
.nav li.has-mega:focus-within>.megatrig svg{transform:rotate(180deg)}
.megacols{max-width:1180px;margin:0 auto;padding:0 24px;display:grid;gap:28px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.megacol .mh{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding-bottom:10px;
  border-bottom:1px solid var(--line);color:var(--fg);
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase}
.light .megacol .mh,[data-theme="light"] .megacol .mh{border-bottom-color:var(--line-i);color:var(--fg-i)}
.megacol .mh svg{color:var(--purple);flex:0 0 auto}
.megacol a{display:block;padding:6px 0;text-decoration:none;color:var(--muted);
  font-family:'Barlow',sans-serif;font-size:15px;line-height:1.35;
  text-transform:none;letter-spacing:0;font-weight:400;
  border-left:2px solid transparent;padding-left:10px;margin-left:-10px;
  transition:color .15s ease-out,border-color .15s ease-out}
.light .megacol a,[data-theme="light"] .megacol a{color:var(--muted-i)}
.megacol a:hover,.megacol a:focus-visible{color:var(--fg);border-left-color:var(--purple)}
.light .megacol a:hover,[data-theme="light"] .megacol a:hover{color:var(--fg-i)}
@media(max-width:1020px){.mega{display:none !important}}
@media(prefers-reduced-motion:reduce){.mega{transition:visibility 0s linear .33s}}
/* Mobile drawer groups — the same links, stacked under headings */
.mobnav .mgroup{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--purple);
  padding:16px 0 6px;border-bottom:1px solid var(--line)}
.light .mobnav .mgroup,[data-theme="light"] .mobnav .mgroup{border-bottom-color:var(--line-i)}
.mobnav a.sub{font-family:'Barlow',sans-serif;font-weight:400;font-size:15px;
  letter-spacing:0;text-transform:none;color:var(--muted);padding:9px 0 9px 12px}
.light .mobnav a.sub,[data-theme="light"] .mobnav a.sub{color:var(--muted-i)}
/* ---- FAQ accordion. Band-agnostic: reads --card/--line/--fg and overrides
   under .light, so it works in either band position. ---- */
.faq{margin-top:28px}
.faq-item{border:1px solid var(--line);border-left:3px solid var(--purple);
  background:var(--card);margin-bottom:10px}
.light .faq-item{background:var(--card-i);border-color:var(--line-i);border-left-color:var(--purple)}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;
  text-align:left;padding:18px 20px;cursor:pointer;background:none;border:0;color:var(--fg);
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:18px;
  letter-spacing:.03em;text-transform:uppercase;line-height:1.25;transition:color .15s ease-out}
.light .faq-q{color:var(--fg-i)}
.faq-q:hover,.faq-item.open .faq-q{color:var(--ink)}
.faq-a{max-height:0;overflow:hidden;padding:0 20px;color:var(--muted);font-size:16px;line-height:1.7;
  transition:max-height .2s ease-out,padding .2s ease-out}
.light .faq-a{color:var(--muted-i)}
.faq-item.open .faq-a{max-height:1600px;padding:0 20px 18px}
.faq-a p{max-width:none}
.faq-a p:last-child{margin-bottom:0}
.arr{flex:0 0 auto;color:var(--ink);font-family:'Barlow Condensed',sans-serif;
  font-weight:700;transition:transform .15s ease-out}
.faq-item.open .arr{transform:rotate(45deg)}
/* Comparison table used by the city pages */
.loan-table{width:100%;border-collapse:collapse;margin-top:14px;font-family:'Barlow',sans-serif;font-size:15px}
.loan-table th{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;text-align:left;color:var(--muted)}
.light .loan-table th{color:var(--muted-i)}
.loan-table th,.loan-table td{border:1px solid var(--line);padding:11px 13px}
.light .loan-table th,.light .loan-table td{border-color:var(--line-i)}
.loan-table tr.highlight-row td{border-left-color:var(--purple);color:var(--fg)}
.light .loan-table tr.highlight-row td{color:var(--fg-i)}
.table-note{font-family:'Barlow Condensed',sans-serif;font-weight:500;font-size:12px;
  letter-spacing:.06em;color:var(--muted);margin-top:12px}
.light .table-note{color:var(--muted-i)}
/* Spec rows inside a block: label left, value right, hairline between. */
.specrow{display:flex;justify-content:space-between;gap:16px;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:15px}
.light .specrow{border-bottom-color:var(--line-i)}
.specrow:last-child{border-bottom:0}
.specrow .k{color:var(--muted);font-family:'Barlow Condensed',sans-serif;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;font-size:13px}
.light .specrow .k{color:var(--muted-i)}
.specrow .v{font-family:'Barlow Condensed',sans-serif;font-weight:700;color:var(--ink);font-size:15px}
/* Hero trust row on the city pages */
.hero-trust{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:18px;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:14px;letter-spacing:.06em}
.trust-sep{width:1px;height:18px;background:var(--line)}
.light .trust-sep{background:var(--line-i)}
/* Icon that heads a block, and the emoji-replacement icon inline in copy. */
.bicon{color:var(--purple);margin-bottom:12px;display:block}
.bicon svg,.ico{color:var(--purple)}
.ico{vertical-align:-4px}
.blk .n{font-family:'Anton',sans-serif;font-size:34px;line-height:1;color:var(--purple);margin-bottom:8px}
/* ---- Named aliases for markup the generator emits in Python.
   An explicit, enumerated list, not a suffix catch-all: each one is
   band-agnostic and carries its .light override. ---- */
.btn-primary,.step-btn{display:inline-block;transform:skewX(-10deg);background:var(--purple);
  color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;
  letter-spacing:.14em;text-transform:uppercase;padding:16px 32px 14px;text-decoration:none;
  line-height:1;border:0;cursor:pointer;transition:background .15s ease-out}
.btn-primary:hover,.step-btn:hover{background:var(--pdeep)}
.btn-secondary{display:inline-block;transform:skewX(-10deg);background:transparent;color:var(--fg);
  box-shadow:inset 0 0 0 2px var(--fg);font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:16px;letter-spacing:.14em;text-transform:uppercase;padding:16px 32px 14px;
  text-decoration:none;line-height:1}
.light .btn-secondary{color:var(--fg-i);box-shadow:inset 0 0 0 2px var(--fg-i)}
.btn-secondary:hover{background:var(--fg);color:var(--bg)}
.light .btn-secondary:hover{background:var(--fg-i);color:var(--bg-i)}
/* The follow-up card under the comparison table. A card, not a button row:
   it carries a heading, a paragraph and one button. */
.compare-cta{border:1px solid var(--line);border-left:3px solid var(--purple);
  background:var(--card);padding:24px;margin-top:20px}
.light .compare-cta{border-color:var(--line-i);border-left-color:var(--purple);background:var(--card-i)}
.compare-cta h3{margin-bottom:10px}
.compare-cta p{font-size:16px;color:var(--muted);margin:0 0 18px;max-width:none}
.light .compare-cta p{color:var(--muted-i)}
.compare-cta .btn-primary{font-size:14px;padding:13px 24px 11px}
.city.current{border-left:3px solid var(--purple);color:var(--ink)}
.bc-sep{color:var(--ink)}
.bc-current{color:var(--fg)}
.light .bc-current{color:var(--fg-i)}
/* Breadcrumb. Sits directly under the header, above the hero, always. */
.bm-breadcrumb{background:var(--card);border-bottom:1px solid var(--line);padding:11px 0}
.light .bm-breadcrumb{background:var(--card-i);border-bottom-color:var(--line-i)}
.bm-breadcrumb-inner{max-width:1180px;margin:0 auto;padding:0 24px;display:flex;align-items:center;
  flex-wrap:wrap;gap:7px;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bm-breadcrumb a{color:var(--muted);text-decoration:none}
.bm-breadcrumb a:hover{color:var(--purple)}

/* ---- Hero slab: it was crowding the headline underneath it. ---- */
.hero .slab{margin-bottom:22px;padding:11px 24px 9px}
.hero h1{margin-top:4px}
.hero .lead{margin-top:20px}
/* The h1 is the small line above the display headline. It names who this is
   and what he does, which is what a search result needs, while the big line
   below carries the page visually without being the document's heading.
   Matches .eyebrow exactly, so swapping the tag moved nothing on screen. */
.hero h1.h1-eyebrow{font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  line-height:1.3;margin:0}
/* The separator inherits the line's own colour. Dimming it to --line read
   as 1.27:1 against the hero, which is a divider nobody can see. */
.hero h1.h1-eyebrow .bar{margin:0 2px}
.hero .hero-display{font-family:'Anton',sans-serif;font-weight:400;
  font-size:clamp(38px,5.6vw,72px);line-height:.98;letter-spacing:1px;
  text-transform:uppercase;color:var(--fg);margin-top:6px}
.hero .hero-display+.lead{margin-top:20px}

/* ---- FAQ closing CTA. The one purple fill in this band. ---- */
.faqcta{display:grid;grid-template-columns:1.3fr .7fr;gap:32px;align-items:center;
  margin-top:32px;padding:32px;background:var(--purple);color:#fff;
  border-left:3px solid var(--pdeep)}
@media(max-width:860px){.faqcta{grid-template-columns:1fr;gap:20px}}
.faqcta .eyebrow,.faqcta p{color:rgba(255,255,255,.82)}
.faqcta h3{color:#fff;margin:8px 0 10px}
.faqcta p{margin:0;max-width:52ch}
.faqcta .cta-row{margin-top:0}
.faqcta .btn-primary{background:#fff;color:var(--purple)}
.faqcta .btn-primary:hover{background:var(--bg);color:#fff}
.faqcta .btn-secondary{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.75)}
.faqcta .btn-secondary:hover{background:#fff;color:var(--purple)}

/* ---- Hover. Colour and border only: no lift, no shadow, no bounce. ---- */
.blk{transition:border-color .18s ease-out,border-left-color .18s ease-out,background .18s ease-out}
.blk:hover{border-color:var(--purple)}
.light .blk:hover{border-color:var(--purple)}
.blk .more{transition:color .15s ease-out,border-bottom-color .15s ease-out}
.blk:hover .more{color:var(--ink)}
.rev{transition:border-color .18s ease-out}
.rev:hover{border-color:var(--purple)}
.faq-item{transition:border-color .18s ease-out}
.faq-item:hover{border-color:var(--purple)}
.loan-table tbody tr{transition:background .15s ease-out}
.loan-table tbody tr:hover td{background:var(--card)}
.light .loan-table tbody tr:hover td{background:var(--card-i)}
.specrow{transition:border-bottom-color .15s ease-out}
.fgrid a,.megacol a,.inline-link{transition:color .15s ease-out}
.vhero{transition:border-color .18s ease-out}
.vhero:hover{border-color:var(--purple)}
.brandmark{transition:opacity .15s ease-out}
a:hover>.brandmark{opacity:.82}

/* ---- Section motion. One vocabulary: fade plus a 16px rise, 220ms ease-out,
   fired once. Children stagger slightly so a band assembles rather than
   snapping in. Compositor properties only. ---- */
.js section [data-rv]{transition-duration:.24s}
.js .blocks>*[data-rv]{transition-delay:calc(var(--i,0) * 55ms)}
.js .revgrid>*[data-rv]{transition-delay:calc(var(--i,0) * 45ms)}
.js .cities>*[data-rv]{transition-delay:calc(var(--i,0) * 18ms)}
@media(prefers-reduced-motion:reduce){
  .js section [data-rv],.js .blocks>*[data-rv],
  .js .revgrid>*[data-rv],.js .cities>*[data-rv]{transition-delay:0s !important}
}
/* The accordion indicator is drawn in CSS rather than relying on a glyph in
   the markup, so it cannot be lost to a content pass. Plus turns to a cross. */
.arr{width:16px;height:16px;position:relative;display:inline-block;font-size:0}
.arr::before,.arr::after{content:"";position:absolute;background:var(--purple);
  left:50%;top:50%;transform:translate(-50%,-50%)}
.arr::before{width:14px;height:2px}
.arr::after{width:2px;height:14px;transition:opacity .15s ease-out}
.faq-item.open .arr::after{opacity:0}
.faq-item.open .arr{transform:none}
/* The program the page is about is called out in the comparison table, so a
   reader scanning it lands on their own row first. */
.loan-table tr.highlight-row td{background:rgba(117,73,234,.14);color:var(--fg);font-weight:600}
.light .loan-table tr.highlight-row td{background:rgba(117,73,234,.10);color:var(--fg-i)}
.loan-table tr.highlight-row td:first-child{box-shadow:inset 3px 0 0 var(--purple)}
/* The highlighted column already carries a purple wash, so a purple link on
   top of it is all but invisible. */
.loan-table tr.highlight-row a{color:var(--fg);font-weight:700}
.loan-table td.hl a{color:var(--fg);font-weight:700}
.loan-table tr.highlight-row:hover td{background:rgba(117,73,234,.2)}

/* ---- Live rate cards on the statewide program pages ---- */
/* The card takes the opposite surface from the band it sits on, the same way
   the application device panel does. A near-black card on a black band read as
   no card at all. */
.ratecards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}
/* The grid follows the card count. The Louisiana program pages show three
   products and want three across; the rates page and the calculator show four,
   which reads better two and two than three and a stray one. The width is
   capped there or each card would run to nearly 600px. */
.ratecards:has(>:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:780px;margin-left:auto;margin-right:auto}
/* The disclaimer under a centred grid lines up with it rather than running back
   out to the left margin. */
.ratecards:has(>:nth-child(4))+p{max-width:780px;margin-left:auto;margin-right:auto}
@media(max-width:860px){.ratecards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){
  .ratecards,.ratecards:has(>:nth-child(4)){grid-template-columns:minmax(0,1fr)}}
.ratecard{--ink:var(--ink-i);background:var(--fg);color:var(--bg);border:1px solid var(--fg);
  border-left:3px solid var(--purple);padding:22px}
.light .ratecard{background:var(--fg-i);color:var(--bg-i);border-color:var(--fg-i);
  border-left-color:var(--purple)}
.rc-prod{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-i)}
.light .rc-prod{color:var(--muted)}
.rc-num{font-family:'Anton',sans-serif;font-size:42px;line-height:1;margin:10px 0 16px;color:inherit}
.rc-num span{font-size:20px;margin-left:2px;color:var(--ink)}
.rc-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;
  border-bottom:1px solid var(--muted-i)}
.light .rc-row{border-bottom-color:var(--muted)}
.rc-lab{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-i)}
.light .rc-lab{color:var(--muted)}
.rc-chg{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:.04em}
.rc-chg.up{color:#c0392b}.rc-chg.down{color:#1e7a4f}
.light .rc-chg.up{color:#e0564f}.light .rc-chg.down{color:#43b581}
.rc-chg.flat{color:var(--muted-i)}
.light .rc-chg.flat{color:var(--muted)}
.ratecard .more{display:inline-block;margin-top:14px;font-family:'Barlow Condensed',sans-serif;
  font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  color:inherit;border-bottom:2px solid var(--purple);padding-bottom:2px}
.mini-rate-loading{grid-column:1/-1;font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:22px 0}
.light .mini-rate-loading{color:var(--muted-i)}

/* ---- Map embed (GBP landing page) ---- */
.map-wrap{border:1px solid var(--line);margin-top:24px;line-height:0}
.light .map-wrap{border-color:var(--line-i)}
.map-wrap iframe{width:100%;height:420px;border:0;display:block;filter:grayscale(1) contrast(1.05)}
.light .map-wrap iframe{filter:none}
@media(max-width:640px){.map-wrap iframe{height:300px}}
.nap{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:17px;letter-spacing:.04em;
  line-height:1.7;margin-top:18px}
.nap a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--purple)}

/* ── Long-form program pages ───────────────────────────────────────────── */
/* These read like documentation, not like a landing page, so the whole
   article is a white sheet in either site theme: white page, white rail,
   black type. Re-mapping the tokens here rather than restyling each component
   means .blk, .loan-table, .checks, .faq, .compare-cta and the rest all come
   out light without a single override, and the inverse-surface components
   (.stat tiles) still invert correctly against it. */
.doclayout{
  --bg:#fff;--fg:#000;--muted:#6E6E6E;--line:#E5E5E5;--card:#F5F5F5;
  --blk:#F5F5F5;--blk-i:#F5F5F5;
  --ink:#7549EA;--ink-i:#997BF4;
  --bg-i:#000;--fg-i:#fff;--muted-i:#A3A3A3;--line-i:#1F1F1F;--card-i:#111;
  background:var(--bg);color:var(--fg);
  border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:minmax(190px,250px) minmax(0,1fr)}
/* The rail spans the whole run of sections, which is what lets it stay sticky
   across all of them instead of only within one. */
.doclayout>.sidenav{grid-column:1;grid-row:1/span 999;align-self:start;
  position:sticky;top:104px;max-height:calc(100vh - 130px);overflow-y:auto;
  padding:56px 24px 40px 40px;
  /* Hidden until the reader scrolls past the hero. The column keeps its width
     the whole time, so this costs no layout shift when it appears. */
  opacity:0;transform:translate3d(-8px,0,0);pointer-events:none;
  transition:opacity .28s ease-out,transform .28s ease-out}
.doclayout.rail-on>.sidenav{opacity:1;transform:none;pointer-events:auto}
@media(prefers-reduced-motion:reduce){
  .doclayout>.sidenav{transition:none;transform:none}
}
/* The site marks scripting with a `js` class on <html>. Without it there is no
   scroll handler, so show the rail rather than hide it forever. */
html:not(.js) .doclayout>.sidenav{opacity:1;transform:none;pointer-events:auto}
.doclayout>section{grid-column:2;border-left:1px solid var(--line)}
/* The column is already offset, so the measure is left aligned rather than
   centred on the viewport the way .wrap is. */
.docwrap{max-width:820px;padding:0 48px}
.docsec{padding:52px 0}
.docsec+.docsec{border-top:1px solid var(--line)}
.docsec:first-of-type{padding-top:56px}
@media(max-width:1000px){
  .doclayout{grid-template-columns:minmax(0,1fr)}
  .doclayout>.sidenav{grid-column:1;grid-row:auto;position:static;max-height:none;
    overflow:visible;border-bottom:1px solid var(--line);padding:28px 24px;
    opacity:1;transform:none;pointer-events:auto}
  .doclayout>section{grid-column:1;border-left:0}
  .docwrap{padding:0 24px}
  .docsec{padding:40px 0}
}
.sidenav h4{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:24px 0 8px}
.sidenav h4:first-child{margin-top:0}
.sidenav a{display:block;font-family:'Barlow',sans-serif;font-size:14px;line-height:1.35;
  color:var(--fg);text-decoration:none;padding:6px 0 6px 14px;
  border-left:2px solid transparent;margin-left:-14px}
.sidenav a:hover{color:var(--ink)}
.sidenav a.on{color:var(--ink);font-weight:700;border-left-color:var(--purple)}
.docsec>.docwrap>h2{margin-bottom:18px}
.docsec .blk,.docsec .blocks,.docsec .stats,.docsec .loan-table,
.docsec .compare-cta,.docsec .faq,.docsec .checks{margin-top:24px}
.docsec .docwrap>p+p{margin-top:14px}
/* A sub-line under a checklist item: the legacy <small> that explained the row. */
.checks .sub{display:block;font-size:14px;line-height:1.45;color:var(--muted);margin-top:3px}
.light .checks .sub{color:var(--muted-i)}
/* The column the legacy table marked as the recommended one. */
.loan-table td.hl{background:rgba(117,73,234,.12);font-weight:600}
.light .loan-table td.hl{background:rgba(117,73,234,.09)}
/* A checklist row whose marker is a label rather than an icon: numbered steps,
   and the P T I M H of a PITI breakdown. */
.checks .num{flex:0 0 22px;width:22px;height:22px;margin-top:2px;display:flex;
  align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;
  font-weight:700;font-size:13px;line-height:1;color:var(--fg);
  border:1px solid var(--purple)}
/* Purple on the card surface only reaches about 3.5:1 at this size, so the
   glyph takes the body colour and the purple stays on the border. */
.light .checks .num{color:var(--fg-i)}
/* The rail's own call to action, below the nav rows. */
.sidenav-cta{margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.light .sidenav-cta{border-top-color:var(--line-i)}
.sidenav-cta p{font-size:14px;line-height:1.45;color:var(--muted);margin-bottom:12px}
.light .sidenav-cta p{color:var(--muted-i)}
/* The rail's CTA is an <a> inside .sidenav, so `.sidenav a{color:var(--fg)}`
   was beating .btn-primary and painting black text on the purple fill: 3.9:1.
   Restate the button's own colour at matching specificity. */
.sidenav .sidenav-cta .btn-primary{display:inline-block;font-size:13px;
  padding:11px 18px;color:#fff}
.sidenav .sidenav-cta .btn-primary:hover{color:#fff;background:var(--pdeep)}

/* The closings pool is mostly portrait phone photos of people. A 4:3 landscape
   tile crops the top and bottom off those, which is where the faces are, so
   this band uses a square tile and biases the crop upward. */
.photos--pool .ph{aspect-ratio:1/1;object-fit:cover;object-position:center 32%}
@media(max-width:520px){.photos--pool{grid-template-columns:repeat(2,1fr)}}

/* An injected in-body call to action. Same card as .compare-cta, a little more
   air above it because it follows a finished section rather than sitting
   inside one. */
.docsec .compare-cta.cta-inline{margin-top:32px}
.cta-inline .cta-row{margin-top:18px}

/* ── DSCR calculator ──────────────────────────────────────────────────────
   The one interactive component on the state pages. Its markup is kept as
   authored because a script is wired to its ids, so the styling is rebuilt
   here on the design tokens instead of remapping the DOM. */
.calcsec .calc-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:20px;margin-top:28px;align-items:start}
@media(max-width:820px){.calcsec .calc-wrap{grid-template-columns:minmax(0,1fr)}}
/* The calculator's panels are cards, and they follow the same rule as every
   other card: a light surface whatever the band. The verdict green was tuned
   for a light card and only reached 3.5:1 against the dark one. */
/* .calc-cta2 is left out: it has a border and no surface of its own, so it
   sits on the band and should take the band's colours. */
.calc-inputs,.dscr-meter-card,.amort-card,.bd-card{
  --bg:#fff;--fg:#000;--muted:#6E6E6E;--line:#E5E5E5;--card:#F5F5F5;
  --bg-i:#fff;--fg-i:#000;--muted-i:#6E6E6E;--line-i:#E5E5E5;--card-i:#F5F5F5;
  --ink:#7549EA;--ink-i:#997BF4}
.calc-inputs,.dscr-meter-card,.amort-card,.bd-card{border:1px solid var(--line);
  border-left:3px solid var(--purple);background:var(--blk);color:var(--fg);padding:22px}
.calc-inputs h3,.amort-card h4{font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:18px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px}
.calc-inputs h3 svg{vertical-align:-4px;margin-right:6px}
.ci-group{display:flex;flex-direction:column;gap:16px}
.ci-field label{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  margin-bottom:8px;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.light .ci-field label{color:var(--muted-i)}
.ci-val{font-family:'Barlow',sans-serif;font-weight:700;font-size:15px;letter-spacing:0;
  text-transform:none;color:var(--fg)}
.light .ci-val{color:var(--fg-i)}
/* The script paints the filled part of the track, so the element itself is a
   flat bar with no radius and no native chrome. */
.ci-field input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;
  background:var(--line);border:0;outline:none;cursor:pointer}
.light .ci-field input[type=range]{background:var(--line-i)}
.ci-field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:16px;height:16px;background:var(--purple);border:0;border-radius:0;cursor:pointer}
.ci-field input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--purple);
  border:0;border-radius:0;cursor:pointer}
.ci-field input[type=range]:focus-visible{outline:2px solid var(--purple);outline-offset:4px}
.ci-select2{width:100%;background:var(--bg);color:var(--fg);border:1px solid var(--line);
  border-radius:0;padding:11px 13px;font-family:'Barlow',sans-serif;font-size:15px;font-weight:600}
.light .ci-select2{background:var(--bg-i);color:var(--fg-i);border-color:var(--line-i)}
.calc-inputs p{font-size:14px;color:var(--muted);margin:16px 0 0;max-width:none}
.light .calc-inputs p{color:var(--muted-i)}
.calc-results{display:flex;flex-direction:column;gap:16px}
.dscr-meter-label{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.light .dscr-meter-label{color:var(--muted-i)}
.dscr-number{font-family:'Anton',sans-serif;font-size:62px;line-height:1;margin:6px 0 10px}
.dscr-number.pass{color:var(--ok)}.dscr-number.warn{color:var(--warn)}
.dscr-number.fail{color:var(--bad)}
.dscr-verdict{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px 4px;
  border:1px solid currentColor}
.dscr-verdict.pass{color:var(--ok)}.dscr-verdict.warn{color:var(--warn)}
.dscr-verdict.fail{color:var(--bad)}
.dscr-bar-wrap{height:6px;background:var(--line);margin-top:16px}
.light .dscr-bar-wrap{background:var(--line-i)}
.dscr-bar-fill{height:100%;transition:width .3s ease-out}
.dscr-verdict-note{font-size:14px;line-height:1.6;color:var(--muted)}
.light .dscr-verdict-note{color:var(--muted-i)}
.breakdown-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.bd-card{padding:16px}
.bd-card-label{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.light .bd-card-label{color:var(--muted-i)}
.bd-card-value{font-family:'Anton',sans-serif;font-size:26px;line-height:1.1;margin:4px 0 4px}
.bd-card-sub{font-size:13px;line-height:1.45;color:var(--muted)}
.light .bd-card-sub{color:var(--muted-i)}
.amort-row{display:flex;justify-content:space-between;gap:16px;font-size:15px;
  padding:9px 0;border-bottom:1px solid var(--line)}
.light .amort-row{border-bottom-color:var(--line-i)}
.amort-row:last-child{border-bottom:0;font-weight:700;border-top:2px solid var(--purple);
  margin-top:4px;padding-top:12px}
.calc-cta2{border:1px solid var(--line);border-left:3px solid var(--purple);padding:20px}
.light .calc-cta2{border-color:var(--line-i);border-left-color:var(--purple)}
.calc-cta2 p{font-size:16px;color:var(--muted);margin:0 0 14px;max-width:none}
.light .calc-cta2 p{color:var(--muted-i)}
.calc-cta2 a{display:inline-block;background:var(--purple);color:#fff;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;letter-spacing:.14em;
  text-transform:uppercase;padding:13px 24px 11px;text-decoration:none}
.calc-cta2 a:hover{background:var(--pdeep)}
.calcsec .calc-disclaimer2{margin-top:24px;font-size:13px;line-height:1.6}
/* Three stat tiles inside a half-width column leave about 110px each, which
   breaks a number like "20 to 25%" across three lines. In a column they stack. */
.docsec .blocks .stats,.docsec .blocks .stats--3{grid-template-columns:1fr}
/* Prose lists inside a document section. The site reset drops list markers
   because every list elsewhere on the site is a component with its own icon;
   an article's own bullets and numbers are copy and need to read as a list. */
.docwrap ul:not(.checks),.docwrap ol{list-style:revert;padding-left:24px;margin:0 0 16px}
.docwrap ul:not(.checks) li,.docwrap ol li{margin-bottom:9px;max-width:66ch;line-height:1.6}
.docwrap ul:not(.checks) li::marker,.docwrap ol li::marker{color:var(--ink)}
.docwrap .compare-cta ul li,.docwrap .blk ul li{color:var(--muted)}
.light .docwrap .compare-cta ul li,.light .docwrap .blk ul li{color:var(--muted-i)}
/* Related posts: three cards, and inside an 820px measure the shared b3 grid
   drops one to a second row. */
.rel3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:760px){.rel3{grid-template-columns:minmax(0,1fr)}}
.blk h3 a{text-decoration:none}
.blk:hover h3 a{color:var(--ink)}

/* ── Blog index, category and video pages ──────────────────────────────── */
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.pill{display:inline-block;background:none;border:1px solid var(--line);color:var(--fg);
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;padding:9px 16px 7px;cursor:pointer;text-decoration:none;
  transition:border-color .15s ease-out,color .15s ease-out}
.pill:hover{border-color:var(--purple);color:var(--ink)}
.pill.on{background:var(--purple);border-color:var(--purple);color:#fff}
.light .pill{border-color:var(--line-i);color:var(--fg-i)}
.light .pill.on{color:#fff}
/* color:inherit took the band's colour, which beat the card's own re-mapped
   --fg and left white text on the white card. */
a.blk{display:block;text-decoration:none;color:var(--fg)}
.blk .eyebrow{margin-bottom:10px}
.blk .cardfoot{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.light .blk .cardfoot{color:var(--muted-i)}
.featured{display:block;text-decoration:none;color:inherit;margin-top:32px;
  border:1px solid var(--line);border-left:3px solid var(--purple);background:var(--card);
  padding:36px;transition:border-color .18s ease-out}
.featured:hover{border-color:var(--purple)}
.featured h2{margin:18px 0 12px}
.featured .lead{color:var(--muted);max-width:70ch}
.featured .cardfoot{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.featured .more{display:inline-block;margin-top:18px;font-family:'Barlow Condensed',sans-serif;
  font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:2px solid var(--purple);padding-bottom:2px}
.light .featured{background:var(--card-i);border-color:var(--line-i);border-left-color:var(--purple)}
.light .featured .lead,.light .featured .cardfoot{color:var(--muted-i)}
/* Cards in a row are the same height, so the footer and the read link are
   pushed to the bottom rather than floating under uneven copy. */
a.blk.postcard{display:flex;flex-direction:column}
.postcard>p{flex:1 1 auto}
.postcard .cardfoot{padding-top:14px}
.postcard .more{align-self:flex-start}

/* ── Lead form card, on the class opt-in pages ─────────────────────────── */
.wrap.narrow{max-width:900px}
.formcard{border:1px solid var(--line);border-left:3px solid var(--purple);
  background:var(--card);padding:32px}
.light .formcard{background:var(--card-i);border-color:var(--line-i);border-left-color:var(--purple)}
.formcard h2{font-size:clamp(24px,2.6vw,32px);margin:10px 0 10px}
.formcard .formsub{font-size:15px;line-height:1.6;color:var(--muted);margin-bottom:22px;max-width:none}
.light .formcard .formsub{color:var(--muted-i)}
.formcard .field{margin-bottom:16px}
.formcard .field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.formcard label{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.light .formcard label{color:var(--muted-i)}
.formcard input,.formcard select{width:100%;background:var(--bg);color:var(--fg);
  border:1px solid var(--line);border-radius:0;padding:13px 14px;
  font-family:'Barlow',sans-serif;font-size:16px;outline:none;
  transition:border-color .15s ease-out}
.light .formcard input,.light .formcard select{background:var(--bg-i);color:var(--fg-i);
  border-color:var(--line-i)}
.formcard input:focus,.formcard select:focus{border-color:var(--purple)}
.formcard .submit-btn{width:100%;background:var(--purple);color:#fff;border:0;border-radius:0;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;letter-spacing:.14em;
  text-transform:uppercase;padding:17px 24px 15px;margin-top:8px;cursor:pointer;
  transition:background .15s ease-out}
.formcard .submit-btn:hover{background:var(--pdeep)}
.formcard .submit-btn[disabled]{opacity:.6;cursor:default}
.formcard .privacy{font-size:13px;line-height:1.5;color:var(--muted);margin:14px 0 0;text-align:center}
.light .formcard .privacy{color:var(--muted-i)}
@media(max-width:520px){.formcard{padding:24px}.formcard .field-row{grid-template-columns:1fr}}
/* A 16:9 embed that keeps its ratio without a wrapper hack. */
.vframe{position:relative;aspect-ratio:16/9;border:1px solid var(--line);background:#000}
.light .vframe{border-color:var(--line-i)}
.vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* The trust row on a class hero pairs a value with its label, so the pairs
   need to read apart from each other rather than as one run of words. */
.hero-trust strong{color:var(--fg);font-weight:700}
.light .hero-trust strong{color:var(--fg-i)}
.hero-trust>span+span{padding-left:14px;border-left:1px solid var(--line)}
.light .hero-trust>span+span{border-left-color:var(--line-i)}
/* A row of small labelled facts inside a card. */
.facts{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.fact{display:inline-block;border:1px solid var(--line);padding:6px 11px 4px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.light .fact{border-color:var(--line-i);color:var(--muted-i)}
.cardbadge{display:inline-block;background:var(--purple);color:#fff;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;padding:5px 10px 3px;margin-bottom:12px}
.pill.active{background:var(--purple);border-color:var(--purple);color:#fff}

/* ── The calculators ───────────────────────────────────────────────────── */
/* Same trick as .doclayout: redefine the palette on the container so every
   component inside inherits it, rather than overriding them one at a time. */
/* The inverse tokens are flattened to match, unlike .doclayout: none of the
   calculator components take an opposite surface, so a .light band inside here
   should read exactly like the band above it. */
.pinlight,.toolpage{
  --bg:#fff;--fg:#000;--muted:#6E6E6E;--line:#E5E5E5;--card:#F5F5F5;
  --blk:#F5F5F5;--blk-i:#F5F5F5;
  --ink:#7549EA;--ink-i:#997BF4;
  --bg-i:#fff;--fg-i:#000;--muted-i:#6E6E6E;--line-i:#E5E5E5;--card-i:#F5F5F5;
  background:var(--bg);color:var(--fg)}
.pinlight>section,.toolpage>section{background:var(--bg);color:var(--fg);
  border-top:1px solid var(--line)}
.pinlight>section.light,.toolpage>section.light{background:var(--card)}
.toolpage h1,.toolpage h2,.toolpage h3,.toolpage h4{color:var(--fg)}
.toolpage .livewrap{margin:0}
.toolpage label{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:600;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.toolpage input,.toolpage select,.toolpage textarea{width:100%;background:#fff;color:#000;
  border:1px solid var(--line);border-radius:0;padding:12px 13px;
  font-family:'Barlow',sans-serif;font-size:16px;outline:none}
.toolpage input:focus,.toolpage select:focus{border-color:var(--purple)}
.toolpage input[type=range]{-webkit-appearance:none;appearance:none;height:4px;padding:0;
  background:var(--line);border:0;cursor:pointer}
.toolpage input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:16px;height:16px;background:var(--purple);border:0;border-radius:0}
/* The accordion's own button is not a calculator control. */
.toolpage button:not(.faq-q):not(.pill){background:var(--purple);color:#fff;border:0;border-radius:0;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;letter-spacing:.14em;
  text-transform:uppercase;padding:15px 24px 13px;cursor:pointer}
.toolpage button:not(.faq-q):not(.pill):hover{background:var(--pdeep)}
.toolpage button.active{background:var(--pdeep)}
.toolpage .field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.toolpage .field-row>div{min-width:0}
.toolpage .hidden{display:none}
.toolpage .divider{border:0;border-top:1px solid var(--line);margin:20px 0}
.toolpage .main-result,.toolpage .results-panel{border:1px solid var(--line);
  border-left:3px solid var(--purple);background:var(--card);padding:24px;margin-top:20px}
.toolpage .value,.toolpage .num,.toolpage .mtb-value{font-family:'Anton',sans-serif;
  font-size:34px;line-height:1.05;color:var(--fg)}
.toolpage .label,.toolpage .sub,.toolpage .mtb-label,.toolpage .mtb-hint,
.toolpage .hint-mini,.toolpage .optional-label{font-family:'Barlow Condensed',sans-serif;
  font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@media(max-width:560px){.toolpage .field-row{grid-template-columns:1fr}}
/* Label-and-value rows in the calculator results. The class name differs on
   each of the four, so these match the shape rather than the name. */
.toolpage [class*="-row"]:not(.field-row):not(.blocks),
.toolpage [class*="-stat"]{display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px}
.toolpage [class*="-row"]:not(.field-row) strong,
.toolpage [class*="-stat"] .ls-value{font-weight:700;white-space:nowrap}
.toolpage [class*="-total"]{border-bottom:0;border-top:2px solid var(--purple);
  margin-top:4px;padding-top:12px;font-weight:700}
.toolpage [class*="-title"]{font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:16px;letter-spacing:.08em;text-transform:uppercase;margin:22px 0 6px}
.toolpage .monthly-total-box,.toolpage .main-result{border-bottom:1px solid var(--line);
  padding-bottom:18px;margin-bottom:6px}
.toolpage summary{cursor:pointer;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--purple);
  padding:14px 0;list-style:none}
.toolpage table{width:100%;border-collapse:collapse;font-size:14px;margin-top:12px}
.toolpage th,.toolpage td{border:1px solid var(--line);padding:9px 11px;text-align:left}
.toolpage th{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;background:var(--card)}

/* Star rating, on the review page. The glyph is an SVG the script fills, so
   only the two states it toggles need saying here. */
/* Left aligned like everything else in the measure, not centred. */
.stars-row{display:flex;gap:10px;margin:20px 0 14px}
.star-btn{background:none;border:0;padding:4px;cursor:pointer;transition:transform .15s ease-out}
.star-btn:hover{transform:scale(1.15)}
.star-btn svg{width:48px;height:48px;display:block}
.star-btn .star-shape{fill:var(--line);transition:fill .18s ease-out}
.light .star-btn .star-shape{fill:var(--line-i)}
.star-btn.active .star-shape,.star-btn.hovered .star-shape{fill:var(--purple)}

.rating-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:15px;letter-spacing:.12em;text-transform:uppercase;min-height:22px;margin-bottom:24px}

.cta-btn{display:inline-block;width:auto;min-width:280px;background:var(--purple);color:#fff;border:0;
  border-radius:0;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;
  letter-spacing:.14em;text-transform:uppercase;padding:17px 32px 15px;cursor:pointer;
  text-align:center;text-decoration:none}
.cta-btn:hover{background:var(--pdeep)}
.cta-btn[disabled]{opacity:.45;cursor:default}
.cta-btn[disabled]:hover{background:var(--purple)}
/* A form kept as authored still gets the site's field styling. */
.formcard input,.formcard select,.formcard textarea{width:100%;background:var(--bg);
  color:var(--fg);border:1px solid var(--line);border-radius:0;padding:13px 14px;
  font-family:'Barlow',sans-serif;font-size:16px;outline:none;margin-bottom:14px}
.light .formcard input,.light .formcard select,.light .formcard textarea{
  background:var(--bg-i);color:var(--fg-i);border-color:var(--line-i)}
.formcard input:focus,.formcard select:focus,.formcard textarea:focus{border-color:var(--purple)}
.formcard button{width:100%;background:var(--purple);color:#fff;border:0;border-radius:0;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;letter-spacing:.14em;
  text-transform:uppercase;padding:17px 24px 15px;cursor:pointer}
.formcard button:hover{background:var(--pdeep)}
/* A run of value-and-label facts sitting directly in a section, not in a card. */
.wrap>.fact,.docwrap>.fact{margin:0 8px 8px 0}
.wrap>.fact+.fact{margin-left:0}