/* ═══════════════════════════════════════════════════════════════
   SeniorFinance.com — design system

   Built for an audience whose median age is 70+. Three decisions
   follow from that and they are not negotiable in later edits:

     1. Base font is 17px, not the 15-16px a marketing site would
        normally use. Presbyopia is near-universal past 50; every
        point of size here is measurable conversion.
     2. Body text holds a 7:1 contrast ratio (WCAG AAA), not the
        4.5:1 AA floor. Lens yellowing and reduced pupil size cut
        effective contrast with age — AA on paper reads as AA-minus
        to this audience.
     3. Every interactive target is >=48px tall. Tremor, arthritis
        and stylus-free touch are the norm, not the exception.

   Palette is deliberately NOT the blue every mortgage site uses.
   Pine green reads as stability and permanence rather than
   transaction, and the warm cream ground is easier on older eyes
   than the pure #FFF that dominates fintech.
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* ═══ PALETTE ═══
     Adopted from roberterathmortgages.com so both properties read as one
     brand: same navy, same gold, same blue, same neutrals. Robert's name and
     NMLS are the trust anchor on both sites, and a client who sees one and
     then the other should not have to wonder.

     What did NOT come across is the implementation. This audience is 62+,
     so the 17px body, the AAA contrast target, the 48px minimum targets and
     the bordered button all stay — those were built for the readers, not for
     the palette.

     Two values are deliberately not Erath's, both for measured reasons:

     --cta-line, which does not exist on the other site. Gold #F1B401 sits at
     1.86:1 against white, so on a light section the button's EDGE is nearly
     invisible even though its label is fine — a reader with reduced contrast
     sensitivity can read the words but not see where the control is. The
     dark border carries the boundary on light grounds (5.27:1) while the
     fill carries it on navy (6.22:1). One button, legible on both.

     --muted, darkened from #69727D to #616973. The original measures 4.31:1
     on the deepest light ground here and fails AA outright. */
  --navy:#1C3867; --navy-dk:#15294B; --navy-lt:#2A4C82;
  --blue:#225DAB; --blue-tint:#EDF3FA;
  --gold:#F1B401; --gold-dk:#D9A101; --gold-tint:#FEF6E0;
  /* Same value as --gold, kept as its own token so a future change to the
     decorative gold cannot silently break the contrast guarantee on the one
     that carries text against navy (6.22:1). */
  --gold-lt:#F1B401;
  --cta:#F1B401; --cta-hover:#D9A101; --cta-line:#8A6600;
  --ink:#181921; --body:#4B4F58; --muted:#616973;
  --line:#E1E4E8; --line-dk:#C9CFD6;
  --white:#FFFFFF; --cream:#F7F8FA; --sand:#EFF1F4; --grey:#F7F8FA;
  --red:#C0392B; --red-tint:#FBEDEA;
  --wrap:1180px; --r:6px; --r-lg:12px;
  --shadow:0 1px 3px rgba(13,50,41,.08), 0 8px 28px rgba(13,50,41,.07);
  /* Source Serif for headlines, Source Sans for everything else. A designed
     superfamily rather than two faces that happen to sit together: the serif
     carries institutional weight without the coldness of a Times, and both
     were drawn for extended reading at small optical sizes, which is exactly
     the failure mode of a display face on a page an 80-year-old is squinting
     at. */
  --display:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3","Segoe UI",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--white);color:var(--body);
  font-family:var(--sans);
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;color:var(--ink);
  line-height:1.2;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(32px,4.6vw,50px);line-height:1.13}
h2{font-size:clamp(26px,3.2vw,36px)}
h3{font-size:21px}
h4{font-size:18px}
p{margin:0}
a{color:var(--blue)}
a:hover{color:var(--navy)}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
ul{list-style:none;margin:0;padding:0}
strong,b{font-weight:700;color:var(--ink)}
/* Gold on cream is the one focus ring that stays visible against every
   surface here, including the navy hero and the gold buttons themselves. */
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:2px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:200;background:var(--white);padding:14px 22px;
  border-radius:var(--r);min-height:48px;display:inline-flex;align-items:center;
  border:2px solid var(--navy)}
.center{text-align:center}
.lede{font-size:20px;line-height:1.6;color:var(--body)}
/* Not gold. Uppercase 13px is small text by every metric that matters, so
   it needs 4.5:1 against a light ground, and gold does not reach it there.
   The gold rule above the eyebrow already carries the warm accent. */
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--navy-lt);margin-bottom:14px;font-family:var(--sans)}
/* 6.22:1 on navy. Kept as its own token so a change to the decorative
   gold cannot silently break the contrast of the one carrying text. */
.eyebrow-w{color:var(--gold-lt)}

/* ═══ BUTTONS ═══
   min-height 52px throughout. See the header note on tap targets. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:52px;padding:13px 28px;border-radius:var(--r);border:2px solid transparent;
  font-family:var(--sans);font-weight:700;font-size:17px;text-decoration:none;
  cursor:pointer;line-height:1.25;text-align:center;
  transition:background .15s,border-color .15s,color .15s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn-gold{background:var(--cta);color:var(--ink);border-color:var(--cta-line)}
.btn-gold:hover{background:var(--cta-hover);border-color:var(--cta-line);color:var(--ink)}
.btn-navy{background:var(--navy);color:var(--white);border-color:var(--navy)}
.btn-navy:hover{background:var(--navy-dk);border-color:var(--navy-dk);color:var(--white)}
.btn-out{background:transparent;color:var(--navy);border-color:var(--line-dk)}
.btn-out:hover{border-color:var(--navy);background:var(--blue-tint);color:var(--navy)}
.btn-out-w{background:transparent;color:var(--white);border-color:rgba(255,255,255,.5)}
.btn-out-w:hover{border-color:var(--white);background:rgba(255,255,255,.12);color:var(--white)}
.btn-lg{min-height:60px;padding:17px 36px;font-size:18px}
.btn-block{width:100%}
.btn[aria-busy="true"]{opacity:.6;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}

/* ═══ UTILITY BAR ═══ */
.util{background:var(--navy-dk);color:rgba(255,255,255,.88);font-size:14px}
.util-in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;flex-wrap:wrap}
.util span{white-space:nowrap}
.util .sep{color:rgba(255,255,255,.28);margin:0 10px}
.util a{color:rgba(255,255,255,.88);text-decoration:none;display:inline-flex;
  align-items:center;min-height:44px}
.util a:hover{color:var(--gold-lt)}
.util-r{display:flex;align-items:center;gap:14px}

/* ═══ HEADER ═══ */
.hdr{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
/* The header carries a logo, seven nav items, a phone number and a button —
   about 1340px of content that will not fit the 1180px measure the prose
   column wants. Reading width and chrome width are different problems, so
   the bars get their own, wider wrap rather than the nav being trimmed to
   suit a constraint that only exists for body copy. */
.hdr .wrap,.util .wrap{max-width:1320px}
.hdr-in{display:flex;align-items:center;gap:22px;min-height:82px}
.logo{display:flex;flex-direction:column;justify-content:center;text-decoration:none;
  line-height:1.1;flex-shrink:0;min-height:48px}
.logo b{font-family:var(--display);font-size:25px;font-weight:600;color:var(--navy);letter-spacing:-.02em;white-space:nowrap}
.logo i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.mainnav{display:flex;gap:19px;margin-left:auto;align-items:center}
.mainnav>a,.drop>button{
  display:flex;align-items:center;line-height:1.2;white-space:nowrap;min-height:48px;
  color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;
  padding:14px 0;border-bottom:2px solid transparent;
  background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;font-family:var(--sans)}
.mainnav>a:hover,.drop>button:hover,.mainnav>a[aria-current="page"]{color:var(--navy);border-bottom-color:var(--gold)}
.hdr-cta{display:flex;align-items:center;gap:13px;flex-shrink:0}
.hdr-tel{text-decoration:none;color:var(--ink);font-weight:700;font-size:18px;white-space:nowrap;font-family:var(--sans)}
.hdr-tel:hover{color:var(--navy)}
.hdr-tel small{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);line-height:1.4}

.navtoggle{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:52px;height:52px;padding:0 10px;background:none;cursor:pointer;
  border:1px solid var(--line-dk);border-radius:var(--r)}
.navtoggle span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .18s,opacity .18s}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.drop{position:relative;display:flex;align-items:center}
.drop>button::after{content:"";flex-shrink:0;margin-left:6px;margin-top:2px;
  border:5px solid transparent;border-top-color:currentColor}
.drop-m{position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:270px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:8px;display:none;z-index:70}
.drop:hover .drop-m,.drop-m.open{display:block}
.drop-m a{display:flex;align-items:center;min-height:48px;padding:11px 14px;
  border-radius:var(--r);text-decoration:none;color:var(--ink);font-size:16px;font-weight:600}
.drop-m a:hover{background:var(--blue-tint);color:var(--navy)}

/* ═══ HERO ═══ */
.hero{background:var(--navy);color:var(--white);padding:66px 0 72px;position:relative;overflow:hidden}
/* A single soft radial rather than an image. It gives the flat navy some
   depth at any viewport without a network request, and it never competes
   with the headline for attention the way a stock photo of a smiling
   retiree does. */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 520px at 78% 12%,rgba(200,147,47,.16),transparent 62%)}
.hero .wrap{position:relative;z-index:1}
.hero-g{display:grid;grid-template-columns:1.05fr .95fr;gap:20px 56px;
  align-items:start;grid-template-areas:"head quiz" "proof quiz";
  /* The quiz spans both rows and is taller than head+proof combined. Without
     an explicit 1fr on row two, the surplus height is split between the rows
     and opens a gap under the lede. Pinning row one to auto sends all of it
     below the proof block, where it reads as intended margin. */
  grid-template-rows:auto 1fr}
.hero-head{grid-area:head}
.hero-quiz{grid-area:quiz}
.hero-proof{grid-area:proof}
.hero h1{color:var(--white);margin-bottom:20px}
.hero .lede{color:rgba(255,255,255,.9);font-size:21px;margin-bottom:28px;max-width:37ch}
.hero-pts{display:grid;gap:13px;margin:28px 0 0}
.hero-pts li{display:flex;gap:12px;align-items:flex-start;color:rgba(255,255,255,.92);font-size:17px}
.hero-pts svg{flex-shrink:0;margin-top:6px;color:var(--gold-lt)}
.hero-tel{display:inline-flex;flex-direction:column;text-decoration:none;color:var(--white);margin-top:26px}
/* color is restated because the global `strong,b` rule sets --ink, and a
   bare element selector beats the inherited colour from .hero-tel. Same
   trap applies to any <b> placed on a dark ground. */
.hero-tel b{font-size:27px;font-family:var(--sans);font-weight:700;
  letter-spacing:-.01em;color:var(--white)}
.hero-tel span{font-size:14px;color:rgba(255,255,255,.72)}
.hero-tel:hover b{color:var(--gold-lt)}

/* ═══ TRUST STRIP ═══ */
.trust{background:var(--sand);border-bottom:1px solid var(--line);padding:22px 0}
.trust-in{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 40px}
.trust-i{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--ink)}
.trust-i svg{flex-shrink:0;color:var(--navy)}

/* ═══ SECTIONS ═══ */
.sec{padding:74px 0}
.sec-cream{background:var(--cream)}
.sec-grey{background:var(--grey)}
.sec-navy{background:var(--navy);color:rgba(255,255,255,.9)}
.sec-navy h2,.sec-navy h3,.sec-navy h4{color:var(--white)}
.sec-tight{padding:52px 0}
.shead{max-width:66ch;margin-bottom:44px}
.shead.center{margin-inline:auto}
.shead h2{margin-bottom:16px}
.shead p{font-size:19px;color:var(--body)}
.sec-navy .shead p{color:rgba(255,255,255,.82)}

/* ═══ CARD GRIDS ═══ */
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px;transition:border-color .15s,box-shadow .15s}
.card h2,.card h3{margin-bottom:12px;font-size:21px}
.card p{color:var(--body)}
a.card{text-decoration:none;display:block;color:var(--body)}
a.card:hover{border-color:var(--navy-lt);box-shadow:var(--shadow);color:var(--body)}
a.card .more{display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-weight:700;color:var(--navy-lt);font-size:16px}
a.card:hover .more{gap:11px}
.card-ic{width:48px;height:48px;border-radius:var(--r);background:var(--blue-tint);
  color:var(--navy);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.card-ic.gold{background:var(--gold-tint);color:var(--gold-dk)}

/* ═══ NUMBERED STEPS ═══ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;counter-reset:s}
.step{position:relative;padding-top:16px}
.step::before{counter-increment:s;content:counter(s);
  font-family:var(--display);font-size:52px;font-weight:600;color:var(--gold);
  line-height:1;display:block;margin-bottom:14px;opacity:.9}
.step h3{margin-bottom:10px;font-size:20px}
.step p{font-size:16px}
.sec-navy .step::before{color:var(--gold-lt)}

/* ═══ QUIZ — the primary conversion path ═══
   Lives in a white card on the navy hero so it reads as the page's
   single object of attention. Steps are siblings; only .on is shown,
   which keeps every field in the DOM and lets one submit collect the
   lot without any state marshalling. */
.quiz{background:var(--white);border-radius:var(--r-lg);box-shadow:0 20px 50px rgba(13,50,41,.22);
  overflow:hidden;color:var(--body)}
.quiz-hd{background:var(--sand);padding:20px 30px;border-bottom:1px solid var(--line)}
.quiz-hd h2{font-size:22px;margin-bottom:4px}
.quiz-hd p{font-size:15px;color:var(--muted)}
.quiz-bar{height:6px;background:var(--line);position:relative;overflow:hidden}
.quiz-bar i{position:absolute;inset:0 auto 0 0;background:var(--gold);width:0;transition:width .3s ease}
.quiz-bd{padding:30px}
.qstep{display:none}
.qstep.on{display:block;animation:qin .22s ease}
@keyframes qin{from{opacity:0;transform:translateX(9px)}to{opacity:1;transform:none}}
.qstep>h3{font-size:22px;margin-bottom:6px}
.qstep>p.q-help{font-size:15px;color:var(--muted);margin-bottom:20px}
.qnum{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-dk);margin-bottom:10px}

/* Big radio cards. A 62-year-old on a phone should never have to hit a
   14px radio dot, so the whole block is the target. */
.opts{display:grid;gap:11px}
.opts.two{grid-template-columns:1fr 1fr}
.opt{position:relative;display:flex;align-items:center;gap:13px;min-height:56px;
  padding:14px 18px;border:2px solid var(--line-dk);border-radius:var(--r);
  cursor:pointer;font-weight:600;font-size:17px;color:var(--ink);background:var(--white);
  transition:border-color .13s,background .13s}
.opt:hover{border-color:var(--navy-lt);background:var(--blue-tint)}
/* The input covers the whole card rather than being zero-sized. A
   0x0 input is still technically focusable but several screen readers
   and switch-access tools skip it, and on an audience over 62 that is
   not an acceptable trade for a styling shortcut. This way the native
   control IS the target: full keyboard focus, full hit area, and the
   custom dot below is still driven by :has(input:checked). */
.opt input{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  margin:0;cursor:pointer}
.opt>span{position:relative;z-index:1}
.opt .dot{flex-shrink:0;width:24px;height:24px;border-radius:50%;border:2px solid var(--line-dk);
  display:grid;place-items:center;transition:border-color .13s}
/* ═══ SELECTED STATE ═══
   Measured, and then rebuilt. The original signalled "chosen" with a pale
   mint fill: #EAF2EF against a white card is 1.14:1. No pale tint on white
   can reach the 3:1 a boundary needs — that is arithmetic, not taste — and
   pale blue-greens are precisely the region an aging lens collapses first.
   Roughly half of people in their mid-70s confuse pale colours in that band.
   For a quiz whose entire job is telling someone which answer they picked,
   that was a defect, not a nuance.

   Three independent signals now, so no single failing channel loses it:
     1. the border goes 3px and dark    (6.45:1 against the unselected grey)
     2. the dot fills solid and grows a white CHECKMARK — a shape, not a
        colour, which is also what WCAG 1.4.1 asks for
     3. the fill tints, kept last because it is the weakest of the three   */
.opt .dot::after{content:"";width:11px;height:6px;border-left:2.5px solid #fff;
  border-bottom:2.5px solid #fff;transform:rotate(-45deg) scale(0);
  margin-top:-3px;transition:transform .14s;transform-origin:center}
.opt:has(input:checked){border-color:var(--navy);border-width:3px;
  background:var(--blue-tint);padding:12px 17px}
.opt:has(input:checked) .dot{border-color:var(--navy);background:var(--navy)}
.opt:has(input:checked) .dot::after{transform:rotate(-45deg) scale(1)}
.opt:has(input:checked)>span{color:var(--navy-dk)}
.opt:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:2px}
.opt small{display:block;font-weight:400;font-size:14px;color:var(--muted);line-height:1.45}

.qnav{display:flex;gap:12px;margin-top:24px;align-items:center}
.qnav .btn{flex:1}
.qback{background:none;border:0;color:var(--muted);font-weight:600;font-size:16px;
  cursor:pointer;padding:12px 6px;text-decoration:underline;flex:0 0 auto;min-height:48px}
.qback:hover{color:var(--navy)}
.qerr{color:var(--red);font-size:15px;font-weight:600;margin-top:12px;display:none}
.qerr.on{display:block}

/* The running estimate. Appears once there is enough to compute one and
   is the reason the last step converts: they are no longer filling in a
   form, they are protecting a number they already have. */
.qest{background:var(--navy);color:var(--white);border-radius:var(--r);
  padding:20px 24px;margin-bottom:22px;display:none}
.qest.on{display:block}
.qest .lab{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-bottom:4px}
.qest .num{font-family:var(--display);font-size:38px;font-weight:600;line-height:1.05;color:var(--white)}
.qest .sub{font-size:14px;color:rgba(255,255,255,.75);margin-top:7px;line-height:1.5}

/* ═══ FORM FIELDS ═══ */
.fld{margin-bottom:18px}
.fld label{display:block;font-weight:700;font-size:16px;color:var(--ink);margin-bottom:7px}
.fld label i{font-style:normal;font-weight:400;color:var(--muted);font-size:15px}
.fld input,.fld select,.fld textarea{
  width:100%;min-height:54px;padding:13px 16px;border:2px solid var(--line-dk);
  border-radius:var(--r);background:var(--white);font-size:17px;
  transition:border-color .13s,box-shadow .13s}
.fld textarea{min-height:104px;resize:vertical;line-height:1.6}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(29,99,80,.16)}
.fld input[aria-invalid="true"],.fld select[aria-invalid="true"]{border-color:var(--red);background:var(--red-tint)}
.fld .hint{font-size:14px;color:var(--muted);margin-top:6px}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.prefix{position:relative}
.prefix span{position:absolute;left:16px;top:50%;transform:translateY(-50%);
  font-size:17px;font-weight:700;color:var(--muted);pointer-events:none}
.prefix input{padding-left:34px}
/* Percent reads after the number, not before it. */
.prefix.suffix span{left:auto;right:16px}
.prefix.suffix input{padding-left:16px;padding-right:38px}

.consent{display:flex;gap:12px;align-items:flex-start;margin:18px 0;
  font-size:14px;line-height:1.55;color:var(--muted);cursor:pointer}
.consent input{flex-shrink:0;width:24px;height:24px;margin:2px 0 0;accent-color:var(--navy);cursor:pointer}
.legal{font-size:14px;color:var(--muted);margin-top:14px;line-height:1.55}
.orx{text-align:center;font-size:14px;color:var(--muted);margin:18px 0 12px;
  display:flex;align-items:center;gap:14px}
.orx::before,.orx::after{content:"";flex:1;height:1px;background:var(--line)}

/* ═══ FORM STATES ═══ */
.fm.off{display:none}
.done{display:none;text-align:center;padding:34px 30px}
.done.on{display:block}
.done .ic{width:62px;height:62px;border-radius:50%;background:var(--blue-tint);color:var(--navy);
  display:grid;place-items:center;margin:0 auto 20px}
.done.bad .ic{background:var(--red-tint);color:var(--red)}
.done h3{font-size:25px;margin-bottom:12px}
.done p{margin-bottom:22px;color:var(--body)}
.done .alt{display:block;margin-top:14px;font-size:15px;color:var(--muted)}

/* ═══ LEAD SECTION ═══ */
.lead{background:var(--navy);color:rgba(255,255,255,.9);padding:74px 0}
.lead-in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.lead h2{color:var(--white);margin-bottom:16px}
.lead .ld{font-size:19px;color:rgba(255,255,255,.85);margin-bottom:30px}
.prom{display:grid;gap:16px}
.prom li{display:flex;gap:13px;align-items:flex-start;font-size:17px;color:rgba(255,255,255,.88)}
.prom svg{flex-shrink:0;margin-top:6px;color:var(--gold-lt)}
.prom b{color:var(--white)}
.fcard{background:var(--white);border-radius:var(--r-lg);padding:32px;box-shadow:0 20px 50px rgba(13,50,41,.22)}
/* colour restated: .fcard sits inside .lead, whose `.lead h2{color:white}`
   rule would otherwise paint this heading white on a white card — literally
   invisible. Promoting this from h3 to h2 for heading order is what exposed
   it, and an h3 here would inherit correctly, which is exactly why it went
   unnoticed. */
.fcard h2,.fcard h3{font-size:22px;margin-bottom:6px;color:var(--ink)}
.fcard>p.fsub{font-size:15px;color:var(--muted);margin-bottom:22px}

/* ═══ CALCULATOR ═══ */
.calc{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);overflow:hidden}
.calc-g{display:grid;grid-template-columns:1fr 1fr}
.calc-in{padding:32px}
.calc-out{background:var(--navy);color:var(--white);padding:32px;display:flex;flex-direction:column}
.calc-out h2,.calc-out h3{color:var(--white);font-size:19px;margin-bottom:22px}
.tot{margin-bottom:22px}
.tot-l{font-size:14px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.tot-n{font-family:var(--display);font-size:clamp(38px,5vw,50px);font-weight:600;line-height:1.05;color:var(--white)}
.tot-s{font-size:15px;color:rgba(255,255,255,.75);margin-top:6px}
.brk{border-top:1px solid rgba(255,255,255,.18);padding-top:18px;display:grid;gap:12px;margin-bottom:22px}
.brk div{display:flex;justify-content:space-between;gap:16px;font-size:16px;color:rgba(255,255,255,.85)}
.brk b{color:var(--white);font-weight:700;white-space:nowrap}
.calc-note{font-size:14px;color:rgba(255,255,255,.7);line-height:1.55;margin-top:auto;padding-top:18px}

/* ═══ PROSE (content pages) ═══ */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start}
.prose{max-width:72ch}
.prose h2{margin:44px 0 16px}
.prose h2:first-child{margin-top:0}
.prose h3{margin:32px 0 12px;font-size:22px}
.prose p{margin-bottom:18px;font-size:18px}
.prose ul,.prose ol{margin:0 0 22px;padding-left:0}
.prose ul li{position:relative;padding-left:30px;margin-bottom:12px;font-size:18px}
.prose ul li::before{content:"";position:absolute;left:6px;top:12px;width:8px;height:8px;
  border-radius:50%;background:var(--gold)}
.prose ol{counter-reset:o;list-style:none}
.prose ol li{position:relative;padding-left:38px;margin-bottom:14px;font-size:18px}
.prose ol li::before{counter-increment:o;content:counter(o);position:absolute;left:0;top:2px;
  width:26px;height:26px;border-radius:50%;background:var(--blue-tint);color:var(--navy);
  font-size:14px;font-weight:700;display:grid;place-items:center;font-family:var(--sans)}
/* Underlined, not just coloured. axe flags this as link-in-text-block and
   it is not a technicality here: the same lens yellowing that collapses
   ageing lens also flattens the link-vs-body colour difference these links
   relied on, so to an 80-year-old they were not visibly links at all.
   Underline is the one cue that survives. Offset so descenders stay
   readable at the sizes this site sets. */
.prose a,.crumb a,.ft p a,.disc a,.faq .ans a,.myth-a a,.callout a,.consent a,.legal a,
.acta p a,.done a:not(.btn),.hint a{
  text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
.prose a{font-weight:600}
.prose a:hover,.crumb a:hover{text-decoration-thickness:2px}
/* Navigation, buttons and card links are unambiguous from position and
   shape, so they keep their clean look. */
.mainnav a,.drop-m a,.btn,.ft ul a,.abox ul a,a.card,.logo,.hdr-tel,.hero-tel,.util a{
  text-decoration:none}
.prose table{width:100%;border-collapse:collapse;margin:0 0 26px;font-size:16px}
.prose th,.prose td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line)}
.prose th{background:var(--sand);font-weight:700;color:var(--ink);font-size:15px}
.prose tbody tr:hover{background:var(--cream)}
/* tabindex="0" in the markup makes these scrollable by keyboard — an
   overflow container without it is simply unreachable without a mouse or
   trackpad, and on this site that would put whole comparison tables out of
   reach. The focus ring and the shadow hint are the two things that tell a
   visitor the panel moves. */
.tblwrap{overflow-x:auto;margin-bottom:26px;
  background:linear-gradient(90deg,var(--white) 30%,rgba(255,255,255,0)),
             linear-gradient(90deg,rgba(255,255,255,0),var(--white) 70%) 100% 0,
             radial-gradient(farthest-side at 0 50%,rgba(13,50,41,.16),transparent),
             radial-gradient(farthest-side at 100% 50%,rgba(13,50,41,.16),transparent) 100% 0;
  background-repeat:no-repeat;background-size:44px 100%,44px 100%,16px 100%,16px 100%;
  background-attachment:local,local,scroll,scroll}
.tblwrap:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.tblwrap table{margin-bottom:0}

.callout{background:var(--gold-tint);border-left:4px solid var(--gold);
  border-radius:0 var(--r) var(--r) 0;padding:22px 26px;margin:0 0 26px}
.callout p:last-child{margin-bottom:0}
.callout h2,.callout h3,.callout h4{margin-bottom:8px;font-size:18px}
.callout.navy{background:var(--blue-tint);border-left-color:var(--navy)}
.callout.warn{background:var(--red-tint);border-left-color:var(--red)}

/* ═══ ASIDE ═══ */
.aside{position:sticky;top:104px;display:grid;gap:22px}
.acta{background:var(--navy);color:rgba(255,255,255,.88);border-radius:var(--r-lg);padding:28px}
.acta h3{color:var(--white);font-size:21px;margin-bottom:10px}
.acta p{font-size:16px;margin-bottom:20px}
.acta .btn{width:100%}
.acta .atel{display:flex;align-items:center;justify-content:center;min-height:48px;
  margin-top:10px;color:var(--white);font-weight:700;font-size:20px;text-decoration:none}
.acta .atel:hover{color:var(--gold-lt)}
.abox{background:var(--cream);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px}
.abox h3,.abox h4{margin-bottom:14px;font-size:18px}
.abox ul{display:grid;gap:10px}
.abox ul a{font-size:16px;font-weight:600;text-decoration:none}
.abox ul a:hover{text-decoration:underline}

/* ═══ PAGE HEAD ═══ */
.phd{background:var(--navy);color:rgba(255,255,255,.86);padding:52px 0 56px}
.phd h1{color:var(--white);max-width:22ch;margin-bottom:16px}
.phd p{font-size:20px;color:rgba(255,255,255,.85);max-width:62ch}
.crumb{font-size:14px;color:rgba(255,255,255,.62);margin-bottom:18px}
/* Underlined. This rule sits after the link-underline block above and was
   silently overriding it on equal specificity — the breadcrumb was the one
   in-text link on the site still relying on colour alone. */
.crumb a{color:rgba(255,255,255,.82);text-decoration:underline;
  text-underline-offset:.18em;text-decoration-thickness:1px}
.crumb a:hover{color:var(--gold-lt)}
.crumb span{margin:0 9px;color:rgba(255,255,255,.4)}

/* ═══ FAQ ═══ */
.faq{display:grid;gap:0;max-width:860px;margin-inline:auto;
  border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:24px 46px 24px 0;position:relative;
  font-family:var(--display);font-size:20px;font-weight:600;color:var(--ink);line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:33px;width:12px;height:12px;
  border-right:2.5px solid var(--navy);border-bottom:2.5px solid var(--navy);
  transform:rotate(45deg);transition:transform .18s}
.faq details[open] summary::after{transform:rotate(-135deg);top:38px}
.faq summary:hover{color:var(--navy)}
.faq .ans{padding:0 46px 26px 0}
.faq .ans p{margin-bottom:14px;font-size:17px}
.faq .ans p:last-child{margin-bottom:0}
.faq .ans ul li{position:relative;padding-left:26px;margin-bottom:9px}
.faq .ans ul li::before{content:"";position:absolute;left:4px;top:11px;width:7px;height:7px;
  border-radius:50%;background:var(--gold)}

/* ═══ MYTH / FACT ═══ */
.myth{display:grid;gap:22px}
.myth-i{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.myth-q{background:var(--red-tint);padding:20px 26px;border-bottom:1px solid var(--line);
  display:flex;gap:13px;align-items:flex-start}
.myth-q svg{flex-shrink:0;margin-top:4px;color:var(--red)}
.myth-q b{font-family:var(--display);font-size:19px;font-weight:600;color:var(--ink);line-height:1.4}
.myth-a{padding:22px 26px;display:flex;gap:13px;align-items:flex-start}
.myth-a svg{flex-shrink:0;margin-top:5px;color:var(--navy)}
.myth-a p{font-size:17px}
.myth-a p+p{margin-top:12px}

/* ═══ STAT BAND ═══ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;text-align:center}
.stat b{display:block;font-family:var(--display);font-size:44px;font-weight:600;
  color:var(--gold-lt);line-height:1.05;margin-bottom:8px}
.stat span{font-size:16px;color:rgba(255,255,255,.82)}
.sec-cream .stat b{color:var(--navy)}
.sec-cream .stat span{color:var(--body)}

/* ═══ COMPARISON ═══ */
.cmp{width:100%;border-collapse:collapse;font-size:16px;background:var(--white)}
.cmp th,.cmp td{padding:16px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cmp thead th{background:var(--navy);color:var(--white);font-weight:700;font-size:15px;
  letter-spacing:.02em;border-bottom:0}
.cmp thead th:first-child{background:var(--navy-dk)}
.cmp tbody th{background:var(--sand);font-weight:700;color:var(--ink);width:22%}
.cmp .yes{color:var(--navy);font-weight:700}
.cmp .no{color:var(--red);font-weight:700}

/* ═══ FOOTER ═══ */
.ft{background:var(--navy-dk);color:rgba(255,255,255,.72);padding:60px 0 34px;font-size:16px}
.ft-g{display:grid;grid-template-columns:1.4fr repeat(4,minmax(0,1fr));gap:36px;padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.14)}
.ft h3,.ft h4{color:var(--white);font-size:17px;margin-bottom:16px;font-family:var(--sans);font-weight:700;
  letter-spacing:.02em}
.ft p{margin-bottom:16px;line-height:1.7}
.ft a{color:rgba(255,255,255,.78);text-decoration:none}
.ft a:hover{color:var(--gold-lt)}
.ft ul{display:grid;gap:10px}
.ft .tel{color:var(--white);font-weight:700;font-size:19px}
.eho{display:inline-flex;align-items:center;gap:9px;margin-top:8px;font-size:14px;
  color:rgba(255,255,255,.66)}
.eho svg{flex-shrink:0}
.disc{padding-top:28px;font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.58)}
.disc p{margin-bottom:14px}
.disc b{color:rgba(255,255,255,.82)}
.disc a{color:rgba(255,255,255,.7);text-decoration:underline}

/* ═══ MOBILE CALL BAR ═══ */
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;gap:10px;padding:10px 14px;
  background:var(--white);border-top:1px solid var(--line);
  box-shadow:0 -4px 20px rgba(13,50,41,.12);
  padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.mbar .btn{flex:1;min-height:54px;font-size:17px}

/* ═══ POPUP ═══ */
.pop-bd{position:fixed;inset:0;background:rgba(13,50,41,.6);z-index:100;display:none}
.pop-bd.on{display:block}
.pop{position:fixed;z-index:101;background:var(--white);border-radius:var(--r-lg);
  width:min(520px,calc(100vw - 32px));left:50%;top:50%;transform:translate(-50%,-50%);
  box-shadow:0 30px 70px rgba(13,50,41,.35);overflow:hidden;display:none}
.pop.on{display:block}
.pop-hd{background:var(--navy);color:var(--white);padding:26px 30px;position:relative}
.pop-hd h3{color:var(--white);font-size:24px;margin-bottom:8px;max-width:24ch}
.pop-hd p{font-size:16px;color:rgba(255,255,255,.85)}
.pop-x{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.14);border:0;color:var(--white);cursor:pointer;
  display:grid;place-items:center;font-size:22px;line-height:1}
.pop-x:hover{background:rgba(255,255,255,.26)}
.pop-bd2{padding:28px 30px 30px}

/* ═══ RESPONSIVE ═══ */
@media (max-width:1180px){
  /* An off-canvas panel is parked outside the viewport by definition, and a
     fixed element sitting to the right of the viewport still counts toward
     the document's scroll width in Chromium — visibility:hidden and a
     transform do not change that. `clip` rather than `hidden` because clip
     does NOT create a scroll container, so the sticky header keeps working;
     `hidden` here would break it.
     This is scoped to the breakpoint where the panel exists, deliberately:
     applied globally it would also silence genuine overflow bugs on desktop,
     which is exactly the class of defect this audit was looking for. */
  html{overflow-x:clip}
  /* Parked with a transform and visibility:hidden, NOT right:-100%.
     An element positioned off the right edge still counts toward the
     document's scroll width in Chromium, so the closed panel was quietly
     adding ~300px of horizontal scroll to every page below 1180px — which
     is every phone. visibility:hidden also takes it out of the tab order
     and the accessibility tree while closed, which right:-100% never did:
     keyboard users were tabbing through an invisible menu. */
  .mainnav{position:fixed;top:0;right:0;width:min(340px,86vw);height:100dvh;
    background:var(--white);flex-direction:column;align-items:stretch;gap:0;
    padding:88px 22px 32px;overflow-y:auto;
    transform:translateX(100%);visibility:hidden;
    transition:transform .24s ease,visibility 0s linear .24s;
    box-shadow:-8px 0 34px rgba(13,50,41,.18);z-index:65;margin-left:0}
  .mainnav.open{transform:none;visibility:visible;transition:transform .24s ease,visibility 0s}
  .mainnav>a,.drop>button{padding:16px 4px;border-bottom:1px solid var(--line);width:100%;font-size:18px}
  .drop{display:block;width:100%}
  .drop>button{justify-content:space-between}
  .drop-m{position:static;transform:none;box-shadow:none;border:0;padding:0 0 10px 14px;min-width:0}
  .drop:hover .drop-m{display:none}
  .drop-m.open{display:block}
  .navtoggle{display:flex}
  .hdr-tel{display:none}
  .hdr-cta .btn{display:none}
}
@media (max-width:980px){
  /* minmax(0,1fr), not 1fr. A grid track defaults to minmax(auto,1fr), so it
     refuses to shrink below its widest child's min-content width — a wide
     table inside .prose was therefore forcing the whole column past the
     viewport on a 320px phone, pushing body copy out of reach. The desktop
     rule already used minmax(0,1fr); the mobile override did not. */
  .hero-g,.lead-in,.layout,.calc-g{grid-template-columns:minmax(0,1fr)}
  /* Same reasoning one level down: a flex/grid child needs min-width:0
     before its overflow container can actually do its job. */
  .prose,.aside,.tblwrap{min-width:0}
  /* Quiz between the headline and the proof points — see the note in the
     homepage markup. */
  .hero-g{gap:34px;grid-template-areas:"head" "quiz" "proof";grid-template-rows:auto}
  .lead-in{gap:38px}
  .layout{gap:44px}
  .aside{position:static}
  .g3,.g4,.steps,.stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .util-l{display:none}
  .util-in{justify-content:center}
}
@media (max-width:760px){
  body{font-size:17px}
  .sec{padding:52px 0}
  .lead,.hero{padding:48px 0 54px}
  .g3,.g2,.g4,.steps,.stats,.opts.two,.r2{grid-template-columns:minmax(0,1fr)}
  .steps{gap:30px}
  .mbar{display:flex}
  .ft-g{grid-template-columns:1fr 1fr;gap:32px}
  body{padding-bottom:78px}
  .quiz-bd,.fcard,.calc-in,.calc-out{padding:24px 20px}
  .quiz-hd{padding:18px 20px}
  .cmp thead th,.cmp tbody th,.cmp td{padding:12px 13px;font-size:15px}
  .prose p,.prose ul li,.prose ol li{font-size:17px}
  .pop{top:auto;bottom:0;left:0;right:0;transform:none;width:100%;
    border-radius:var(--r-lg) var(--r-lg) 0 0}
}
@media (max-width:480px){
  .ft-g{grid-template-columns:1fr}
  .wrap{padding-inline:18px}
  .qest .num{font-size:32px}
}

/* ═══ PRINT ═══
   Seniors print things. Adult children print things to show a parent.
   The nav, popup and call bar are noise on paper; the disclosures are not. */
@media print{
  .util,.hdr,.mbar,.pop,.pop-bd,.acta,.quiz,.lead,.mainnav{display:none!important}
  body{font-size:12pt;color:#000;padding-bottom:0}
  .phd{background:none;color:#000;padding:0 0 18pt}
  .phd h1,.phd p,.crumb{color:#000}
  .layout{grid-template-columns:1fr}
  a[href^="/"]::after{content:" (seniorfinance.com" attr(href) ")";font-size:9pt;color:#555}
}

/* ═══════════════════════════════════════════════════════════════
   PHOTOGRAPHY

   For an audience over 62, a face is the highest-trust element on the
   page — higher than any badge, testimonial or statistic. It is also
   the element most often faked, so what appears here is Robert's own
   photograph and the lifestyle slots stay EMPTY until real, licensed
   images exist. build.sh hides every .photo-slot when its file is
   absent rather than shipping broken-image icons, so an unfilled slot
   costs nothing and a filled one needs no code change.
   See PHOTO-BRIEF.md for what to shoot or buy.
   ═══════════════════════════════════════════════════════════════ */

/* Small round headshot beside the hero phone number. Puts a face on the
   number people are being asked to call, which is most of the reason
   anyone calls a stranger about their house. */
.tel-block{display:flex;align-items:center;gap:16px;margin-top:26px}
.tel-face{width:64px;height:64px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:2px solid rgba(255,255,255,.35)}
.hero-tel{margin-top:0}

/* Meet section — portrait beside the copy. */
.meet{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:center}
.meet-photo{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);
  background:var(--sand)}
.meet-photo img{width:100%;aspect-ratio:2/3;object-fit:cover;object-position:center top}
.meet h2{margin-bottom:16px}
.meet p{font-size:18px;margin-bottom:16px}
.meet .sig{display:flex;align-items:center;gap:14px;margin-top:24px;
  padding-top:20px;border-top:1px solid var(--line)}
.meet .sig b{display:block;font-size:17px;color:var(--ink)}
.meet .sig span{font-size:15px;color:var(--muted)}

/* Wide lifestyle band. Aspect ratio is reserved up front so the page does
   not reflow when the image decodes — layout shift is disorienting for
   anyone, and worse for someone reading slowly. */
.photoband{position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--navy);aspect-ratio:21/9;display:grid;place-items:end start}
.photoband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photoband::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(13,50,41,.88) 0%,rgba(13,50,41,.62) 48%,rgba(13,50,41,.12) 100%)}
.photoband .cap{position:relative;z-index:2;padding:40px;max-width:56ch}
.photoband .cap h3{color:var(--white);font-size:clamp(22px,2.6vw,31px);margin-bottom:10px}
.photoband .cap p{color:rgba(255,255,255,.9);font-size:18px}

@media (max-width:980px){
  .meet{grid-template-columns:1fr;gap:28px}
  .meet-photo{max-width:260px}
  .photoband{aspect-ratio:4/3}
  .photoband::after{background:linear-gradient(0deg,rgba(13,50,41,.92) 12%,rgba(13,50,41,.45) 62%,rgba(13,50,41,.2) 100%)}
  .photoband .cap{padding:26px}
}


/* Screen-reader-only. Used for the empty top-left cell of comparison
   tables, which axe correctly flags as an empty <th>: sighted readers get
   a blank corner, screen readers get the column's actual meaning. */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}


/* ═══ RANGE SLIDER ═══
   The default control renders about 16px tall. This one exists so a
   visitor can feel how much the expected rate moves their proceeds, and
   an unusable control teaches them nothing. Track and thumb are both
   sized for a hand that is not steady. */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;
  background:transparent;cursor:pointer;padding:0;border:0}
input[type=range]:focus{outline:none}
input[type=range]:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}
input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:5px;
  background:var(--line-dk)}
input[type=range]::-moz-range-track{height:10px;border-radius:5px;background:var(--line-dk)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:32px;height:32px;margin-top:-11px;border-radius:50%;background:var(--navy);
  border:3px solid var(--white);box-shadow:0 1px 4px rgba(13,50,41,.4)}
input[type=range]::-moz-range-thumb{width:32px;height:32px;border-radius:50%;
  background:var(--navy);border:3px solid var(--white);box-shadow:0 1px 4px rgba(13,50,41,.4)}

/* ═══ BYLINE ═══
   Sits directly under the page head on every editorial page. Two jobs at
   once: the E-E-A-T signal a YMYL page needs, and the plain human answer to
   "who is telling me this" — which for this audience is worth more than any
   trust badge. */
.byline{background:var(--sand);border-bottom:1px solid var(--line);padding:16px 0}
.byline-in{display:flex;align-items:center;gap:14px}
.byline-face{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0}
.byline p{font-size:15px;color:var(--muted);line-height:1.5}
.byline b{color:var(--ink)}
.byline a{color:var(--blue)}
.byline-date{white-space:nowrap}
@media (max-width:560px){
  .byline-date{display:block;white-space:normal}
}

/* Verdict lines on the decision-scenarios page. Colour is a reinforcement,
   never the signal — the words "Usually yes" and "No" carry it, so this
   still reads correctly in greyscale and to anyone whose colour
   discrimination has narrowed. */
.prose .verdict-yes,.prose .verdict-maybe,.prose .verdict-no{
  font-size:19px;margin:-6px 0 14px;padding-left:14px;border-left:4px solid var(--line-dk)}
.prose .verdict-yes{border-left-color:var(--navy);color:var(--navy-dk)}
.prose .verdict-maybe{border-left-color:var(--gold);color:var(--gold-dk)}
.prose .verdict-no{border-left-color:var(--red);color:var(--red)}

/* ═══ LANDING PAGES ═══
   Paid traffic gets a deliberately narrower page: no nav, no dropdowns, no
   footer link farm. Every link that is not the CTA is a way out of a click
   you paid for. What stays is the phone number, the quiz, and the full
   disclosure block — the last of which is not negotiable on a page quoting
   dollar figures. */
.lp-hdr .hdr-in{justify-content:space-between}
.lp-hdr .hdr-cta{margin-left:auto}
.lp-hdr .hdr-tel{display:flex}
.lp-ft{padding:40px 0 30px}
.lp-ft .disc{padding-top:0}
/* A single band of proof under the hero, rather than the long homepage. */
.lp-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;
  padding:38px 0;border-bottom:1px solid var(--line)}
.lp-proof div{display:flex;gap:12px;align-items:flex-start}
.lp-proof svg{flex-shrink:0;margin-top:4px;color:var(--navy)}
.lp-proof b{display:block;color:var(--ink);font-size:17px;margin-bottom:3px}
.lp-proof span{font-size:16px;color:var(--body)}
@media (max-width:860px){.lp-proof{grid-template-columns:1fr;gap:18px;padding:26px 0}}