/* ==========================================================================
   Franklin Loan Center — shared brand stylesheet
   Colors sampled from the Franklin Loan Center logo (#156BB6).
   Used by: /, /buying-power/, /tax-savings/
   ========================================================================== */

:root{
  --franklin:#156BB6;
  --franklin-deep:#0E4C7E;
  --navy:#0B3255;
  --navy-2:#0F4373;
  --sky:#3F97DE;
  --sky-2:#63B0EC;
  --sky-soft:#9CC4E4;
  --tint:#EEF5FB;
  --tint-2:#F6FAFD;
  --ink:#10222F;
  --muted:#5D6B78;
  --muted-2:#8794A0;
  --line:#DCE6EE;
  --white:#FFFFFF;
  --gold:#C8862B;
  --gold-tint:#FDF6EA;
  --gold-line:#F0DCB8;
  --shadow:0 20px 60px -24px rgba(11,50,85,.30);
  --shadow-sm:0 2px 10px -4px rgba(11,50,85,.18);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  /* Faithful to the system: flat surface, no gradient wash. */
  background:#EEF4FA;
}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}

/* ---------- skip link (a11y) ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;padding:12px 18px;background:var(--franklin);
  color:#fff;font-weight:600;border-radius:0 0 10px 0;text-decoration:none;
}
.skip:focus{left:0}

/* ---------- site header ---------- */
.site-head{
  background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;
}
.head-in{display:flex;align-items:center;gap:18px;padding:13px 22px;max-width:1080px;margin:0 auto}
.brand{display:flex;align-items:center;flex:none;text-decoration:none}
/* Constrained on both axes, not just height. Franklin's mark is nearly square,
   but a team lockup can be an 8:1 wordmark -- at a fixed 42px height that
   renders over 330px wide and shoves the header CTA off a 390px phone.
   max-height plus max-width keeps the aspect ratio and lets whichever limit
   binds first do the work.

   Note for anyone editing this file: it is shared by every partner build, so
   never name a real partner in a comment here. One did ship that way, and a
   competing brokerage's name sat in another agent's stylesheet. */
.brand img{max-height:42px;width:auto;max-width:280px;object-fit:contain;display:block}
@media (max-width:720px){.brand img{max-height:32px;max-width:172px}}
/* ---------- grouped mega-menu (desktop) ----------
   The calculators are grouped into category dropdowns (Buying / Selling /
   Refinance & Equity / Flyers) plus a flat Guides link. Panels reveal on hover,
   on keyboard focus, or when nav.js adds .open (click / touch). Below 980px the
   whole nav collapses into the drawer and the categories become accordions. */
.nav{display:flex;align-items:center;gap:2px;margin-left:10px}
.nav-cat{position:relative;display:flex}
.nav-cat-btn{
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  font-family:inherit;font-size:.88rem;font-weight:500;color:var(--muted);
  background:none;border:none;padding:8px 12px;border-radius:9px;white-space:nowrap;
  transition:background .14s,color .14s;
}
.nav-cat-btn:hover,.nav-cat:hover .nav-cat-btn,.nav-cat.open .nav-cat-btn{color:var(--franklin-deep);background:var(--tint)}
.nav-cat.is-active .nav-cat-btn{color:var(--franklin-deep);font-weight:600}
.nav-caret{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.65;transition:transform .18s ease}
.nav-cat:hover .nav-caret,.nav-cat.open .nav-caret{transform:rotate(180deg)}
.nav-flat{
  font-size:.88rem;font-weight:500;color:var(--muted);text-decoration:none;
  padding:8px 12px;border-radius:9px;white-space:nowrap;transition:background .14s,color .14s;
}
.nav-flat:hover{color:var(--franklin-deep);background:var(--tint)}
.nav-flat.is-active{color:var(--franklin-deep);font-weight:600;background:var(--tint)}
/* dropdown panel */
.nav-panel{
  position:absolute;top:100%;left:0;z-index:60;margin-top:11px;
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 24px 50px -20px rgba(11,50,85,.42);padding:16px 18px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
/* invisible bridge over the gap so moving button->panel doesn't drop the hover */
.nav-panel::before{content:"";position:absolute;left:0;right:0;top:-13px;height:13px}
.nav-panel-in{display:flex;gap:26px}
.nav-col{display:flex;flex-direction:column;min-width:146px}
.nav-col-h{font-family:'Hanken Grotesk',sans-serif;font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;color:var(--franklin);font-weight:800;margin:0 0 7px}
.nav-col a{font-size:.86rem;font-weight:500;color:var(--ink);text-decoration:none;padding:6px 7px;border-radius:7px;white-space:nowrap;transition:background .14s,color .14s}
.nav-col a:hover{color:var(--franklin-deep);background:var(--tint)}
.nav-col a[aria-current="page"]{color:var(--franklin-deep);font-weight:600;background:var(--tint)}
@media (min-width:981px){
  .nav-cat:hover .nav-panel,
  .nav-cat-btn:focus-visible + .nav-panel,
  .nav-cat:focus-within .nav-panel,
  .nav-cat.open .nav-panel{opacity:1;visibility:visible;transform:translateY(0)}
}
.head-cta{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none}
.head-phone{
  font-weight:600;font-size:.88rem;color:var(--franklin-deep);text-decoration:none;
  display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;white-space:nowrap;
}
.head-phone:hover{background:var(--tint)}
.head-phone svg{width:14px;height:14px;stroke:var(--franklin);flex:none}
/* The officer bar directly below already carries a call button, so the header
   phone is redundant — hiding it keeps six nav items on a single row. */
.head-in .head-phone{display:none}
.btn-apply{
  font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:.88rem;color:#fff;text-decoration:none;
  padding:10px 18px;border-radius:999px;white-space:nowrap;
  background:var(--franklin);
  box-shadow:0 6px 16px -6px rgba(21,107,182,.5);transition:transform .14s,box-shadow .14s;
}
.btn-apply:hover{transform:translateY(-1px);box-shadow:0 10px 20px -8px rgba(21,107,182,.75)}
/* ---------- mobile menu button (hidden on desktop) ---------- */
.nav-toggle{
  display:none;align-items:center;gap:8px;cursor:pointer;
  font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:.86rem;
  color:var(--franklin-deep);background:var(--tint);border:1px solid #D5E6F4;
  padding:9px 14px;border-radius:999px;white-space:nowrap;
  transition:background .14s,border-color .14s;
}
.nav-toggle:hover{background:#E3EFF9;border-color:var(--sky)}
.nav-toggle svg{width:16px;height:16px;stroke:var(--franklin);flex:none}
/* Bars morph into an X when the panel is open. */
.nav-toggle .bar{transition:transform .2s ease,opacity .15s ease;transform-origin:center}
.nav-toggle[aria-expanded="true"] .bar-t{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bar-m{opacity:0}
.nav-toggle[aria-expanded="true"] .bar-b{transform:translateY(-6px) rotate(-45deg)}
.nav-label-close{display:none}
.nav-toggle[aria-expanded="true"] .nav-label-open{display:none}
.nav-toggle[aria-expanded="true"] .nav-label-close{display:inline}

/* Grouping labels inside the panel — invisible until the panel exists. */
.nav-group{display:none}

@media (max-width:980px){
  /* One row: brand | menu | Apply. The nav becomes a panel underneath, which
     takes the header from ~136px of wrapped rows down to a single bar. */
  .head-in{flex-wrap:nowrap;gap:10px;padding:11px 16px}
  .nav-toggle{display:inline-flex}
  .head-cta{margin-left:auto;gap:8px}
  .head-phone{display:none}

  .nav{
    position:absolute;top:100%;left:0;right:0;z-index:60;
    display:none;flex-direction:column;align-items:stretch;gap:2px;margin:0;
    padding:10px 12px 14px;
    background:var(--white);border-top:1px solid var(--line);
    box-shadow:0 22px 40px -20px rgba(11,50,85,.45);
    max-height:calc(100vh - 68px);overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .nav.open{display:flex}
  .nav a{
    padding:12px 14px;font-size:.94rem;border-radius:10px;width:100%;
    color:var(--ink);font-weight:500;
  }
  .nav a[aria-current="page"]{background:var(--tint);color:var(--franklin-deep)}
  /* categories become tap-to-expand accordions inside the drawer */
  .nav-cat{display:block;width:100%}
  .nav-cat-btn{
    display:flex;align-items:center;justify-content:space-between;width:100%;
    padding:13px 14px;font-size:.96rem;font-weight:600;color:var(--ink);
    background:none;border:none;border-radius:10px;cursor:pointer;
  }
  .nav-cat-btn:hover{background:var(--tint)}
  .nav-cat .nav-caret{width:16px;height:16px;opacity:.55}
  .nav-cat.open .nav-caret{transform:rotate(180deg)}
  .nav-panel{
    position:static;opacity:1;visibility:visible;transform:none;display:none;
    margin:0;padding:2px 0 6px;border:none;border-radius:0;box-shadow:none;background:none;
  }
  .nav-panel::before{content:none}
  .nav-cat.open .nav-panel{display:block}
  .nav-panel-in{flex-direction:column;gap:12px}
  .nav-col{min-width:0}
  .nav-col-h{padding:2px 14px;margin:0 0 2px}
  .nav-col a{padding:11px 14px 11px 22px;font-size:.92rem;width:100%;color:var(--ink);font-weight:500;border-radius:10px}
  .nav-col a:hover{background:var(--tint)}
  .nav-flat{display:block;padding:13px 14px;font-size:.96rem;font-weight:600;color:var(--ink);width:100%;border-radius:10px}
  .nav-group{
    display:block;font-family:'Hanken Grotesk',sans-serif;font-weight:800;
    font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
    color:var(--muted-2);padding:14px 14px 6px;
  }
  .nav-group:first-child{padding-top:6px}
  /* Scrim behind the open panel so the page reads as inactive. */
  .nav-scrim{
    position:fixed;inset:0;z-index:40;background:rgba(11,50,85,.34);
    opacity:0;pointer-events:none;transition:opacity .18s ease;
  }
  .nav-scrim.open{opacity:1;pointer-events:auto}
}
@media (max-width:400px){
  .brand img{height:34px}
  .btn-apply{padding:9px 14px;font-size:.82rem}
  .nav-toggle{padding:9px 12px}
  /* Below this width the word plus the icon crowds Apply Now. */
  .nav-toggle .nav-label-open,.nav-toggle .nav-label-close{display:none}
  .nav-toggle[aria-expanded="true"] .nav-label-close{display:none}
}

/* ---------- loan officer identity bar ---------- */
.officer{background:var(--white);border-bottom:1px solid var(--line)}
.officer-in{max-width:1080px;margin:0 auto;padding:13px 22px;display:flex;align-items:center;gap:15px;flex-wrap:wrap}
.officer-photo{
  width:54px;height:54px;border-radius:50%;object-fit:cover;flex:none;
  border:2px solid var(--tint);box-shadow:0 2px 8px -3px rgba(11,50,85,.35);background:var(--tint);
}
.officer-id{min-width:0;line-height:1.35}
.officer-id b{
  display:block;font-family:'Hanken Grotesk',sans-serif;font-weight:800;font-size:1.06rem;
  letter-spacing:-.015em;color:var(--ink);
}
.officer-id span{display:block;font-size:.79rem;color:var(--muted-2)}
.officer-contact{margin-left:auto;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.officer-contact a{
  display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;
  font-size:.87rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:all .14s ease;
}
.officer-contact svg{width:15px;height:15px;flex:none}
.oc-call{background:var(--tint);color:var(--franklin-deep);border:1px solid #D5E6F4}
.oc-call svg{stroke:var(--franklin)}
.oc-call:hover{background:#E3EFF9;border-color:var(--sky)}
.oc-mail{background:transparent;color:var(--muted);border:1px solid var(--line)}
.oc-mail svg{stroke:var(--muted-2)}
.oc-mail:hover{color:var(--franklin-deep);border-color:var(--sky)}
@media (max-width:720px){
  /* Contacts stay on the officer's row rather than wrapping to a full-width
     second row — that wrap was costing ~50px of vertical space above the fold. */
  .officer-in{padding:10px 16px;gap:11px;flex-wrap:nowrap}
  .officer-photo{width:44px;height:44px}
  .officer-id{flex:1 1 auto;min-width:0}
  .officer-id b{font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .officer-id span{font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .officer-contact{margin-left:auto;flex:none;gap:7px;flex-wrap:nowrap}
  .officer-contact a{padding:9px 12px;font-size:.82rem}
}
.oc-short{display:none}
@media (max-width:400px){
  .officer-id b{font-size:.93rem}
  .officer-id span{font-size:.71rem;line-height:1.3}
  .officer-photo{width:42px;height:42px}
}
@media (max-width:560px){
  /* Only the phone keeps its label; email becomes an icon so both fit beside
     the officer's name without wrapping. */
  .oc-full{display:none}
  .oc-short{display:none}
  .officer-contact a{font-size:.84rem}
  .oc-mail{padding:9px 11px}
  .oc-mail svg{width:17px;height:17px}
}

/* ---------- typography ---------- */
.eyebrow{
  font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--franklin);margin:0 0 10px;
  display:inline-flex;align-items:center;gap:9px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--franklin);border-radius:2px;display:inline-block}
h1{
  font-family:'Hanken Grotesk',sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.05;
  font-size:clamp(2rem,4.4vw,3rem);margin:0 0 14px;color:var(--ink);
}
h1 em{font-style:normal;color:var(--franklin)}
.lede{max-width:62ch;margin:0;color:var(--muted);font-size:1.02rem}
.lede strong{color:var(--franklin-deep);font-weight:600}

/* ---------- calculator shell ---------- */
.calc{
  margin-top:30px;background:var(--white);border:1px solid var(--line);border-radius:24px;
  box-shadow:var(--shadow);overflow:hidden;
}
.grid{display:grid;grid-template-columns:1.12fr .98fr}
@media (max-width:900px){.grid{grid-template-columns:1fr}}

.controls{padding:34px 34px 30px}
.controls-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
.controls-head h2{font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:1.18rem;margin:0;letter-spacing:-.01em}
.reset{
  background:none;border:none;color:var(--muted);font-family:'Hanken Grotesk',sans-serif;font-size:.82rem;font-weight:500;
  cursor:pointer;padding:4px 6px;border-radius:8px;display:inline-flex;align-items:center;gap:5px;
}
.reset:hover{color:var(--franklin);background:var(--tint)}
.reset svg{width:13px;height:13px;stroke:currentColor}
.intro{margin:0 0 22px;color:var(--muted);font-size:.9rem;max-width:48ch}

.field{padding:19px 0;border-top:1px solid var(--line)}
.field:first-of-type{border-top:none;padding-top:4px}
.field-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:13px}
.field-top label{font-weight:600;font-size:.95rem}
.field-val{
  font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-variant-numeric:tabular-nums;
  font-size:1.12rem;color:var(--franklin-deep);white-space:nowrap;letter-spacing:-.01em;
}
.help{margin:11px 0 0;font-size:.8rem;color:var(--muted-2);line-height:1.45}
/* editable value inputs (slider OR type) */
.field-input{
  font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-variant-numeric:tabular-nums;
  font-size:1.12rem;color:var(--franklin-deep);letter-spacing:-.01em;text-align:right;
  width:8.5em;max-width:52vw;padding:4px 9px;border:1px solid transparent;border-radius:9px;
  background:transparent;transition:border-color .14s,background .14s;
}
.field-input:hover{border-color:var(--line);background:var(--tint-2)}
.field-input:focus{outline:none;border-color:var(--franklin);background:#fff;
  box-shadow:0 0 0 3px rgba(21,107,182,.16)}
.field-input::-webkit-outer-spin-button,.field-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* callout note */
.note{
  margin:12px 0 0;padding:12px 14px;border-radius:12px;background:var(--tint);
  border:1px solid #D5E6F4;border-left:3px solid var(--franklin);
  font-size:.8rem;line-height:1.5;color:var(--muted);
}
.note b{
  display:block;font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--franklin-deep);margin-bottom:4px;
}
.note .ratio{color:var(--franklin-deep);font-weight:600}

/* segmented control */
.seg-label{font-weight:600;font-size:.95rem;margin-bottom:11px;display:block}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:var(--tint);padding:5px;border-radius:13px}
.seg-2{grid-template-columns:repeat(2,1fr)}
.seg-4{grid-template-columns:repeat(4,1fr)}
.seg-4 button{padding:10px 3px;font-size:.8rem}
@media (max-width:360px){.seg-4 button{font-size:.72rem;letter-spacing:-.02em}}
.seg button{
  font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:.83rem;padding:10px 6px;border:none;
  border-radius:9px;background:transparent;color:var(--muted);cursor:pointer;transition:all .15s ease;line-height:1.25;
}
.seg button:hover{color:var(--franklin-deep)}
.seg button[aria-pressed="true"]{background:var(--white);color:var(--franklin-deep);box-shadow:var(--shadow-sm)}
.seg button:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(21,107,182,.28)}

/* sliders */
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:999px;
  outline:none;cursor:pointer;margin:0;--pct:50%;
  background:linear-gradient(90deg,var(--franklin) 0%,var(--sky) var(--pct),var(--line) var(--pct),var(--line) 100%);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--white);
  border:2px solid var(--franklin);cursor:grab;box-shadow:0 3px 8px -2px rgba(11,50,85,.4);transition:transform .12s ease;
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.08)}
input[type=range]:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(.96)}
input[type=range]::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;background:var(--white);border:2px solid var(--franklin);
  cursor:grab;box-shadow:0 3px 8px -2px rgba(11,50,85,.4);
}
input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:transparent}
input[type=range]:focus-visible{box-shadow:0 0 0 4px rgba(21,107,182,.22)}
.scale{display:flex;justify-content:space-between;margin-top:9px;font-size:.72rem;color:var(--muted-2);font-variant-numeric:tabular-nums}

/* collapsible disclosure */
.disc-toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;
  border-radius:12px;cursor:pointer;text-align:left;background:var(--tint-2);border:1px dashed #C5DCEF;
  color:var(--franklin-deep);font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:.9rem;
  transition:background .14s ease,border-color .14s ease;
}
.disc-toggle:hover{background:var(--tint);border-color:var(--franklin)}
.disc-toggle:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(21,107,182,.25)}
.disc-toggle .lead{display:flex;align-items:center;gap:9px;min-width:0}
.disc-toggle .chev{width:15px;height:15px;stroke:var(--franklin);flex:none;transition:transform .2s ease}
.disc-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.disc-toggle[aria-expanded="true"]{background:var(--tint);border-style:solid;border-color:#CFE3F3}
.disc-chip{
  font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:.78rem;font-variant-numeric:tabular-nums;
  background:var(--franklin);color:#fff;padding:2px 9px;border-radius:999px;white-space:nowrap;
}
.disc-chip[hidden]{display:none}
.disc-panel{display:none;padding-top:20px}
.disc-panel.open{display:block}

/* ---------- credit card rows (blended rate) ---------- */
.cardrow{background:var(--tint-2);border:1px solid #DCE9F4;border-radius:13px;padding:13px 14px;margin-bottom:10px}
.cardrow-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.cardrow-type{
  font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:.82rem;color:var(--franklin-deep);
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 9px;cursor:pointer;
}
.cardrow-type:focus{outline:none;border-color:var(--franklin);box-shadow:0 0 0 3px rgba(21,107,182,.16)}
.cardrow-x{background:none;border:none;color:var(--muted-2);font-family:'Hanken Grotesk',sans-serif;font-size:.76rem;
  font-weight:500;cursor:pointer;padding:3px 7px;border-radius:7px}
.cardrow-x:hover{color:#B4453B;background:#FBEDEC}
.cardrow-grid{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:9px}
@media (max-width:520px){.cardrow-grid{grid-template-columns:1fr 1fr;gap:8px}
  .cardrow-grid label:last-child{grid-column:1/-1}}
.cardrow-grid label{display:block;font-size:.71rem;font-weight:600;color:var(--muted-2);
  text-transform:uppercase;letter-spacing:.04em}
.cardrow-grid input{
  display:block;width:100%;margin-top:4px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;
  font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:.92rem;font-variant-numeric:tabular-nums;
  color:var(--ink);background:#fff;transition:border-color .14s,box-shadow .14s;
}
.cardrow-grid input:focus{outline:none;border-color:var(--franklin);box-shadow:0 0 0 3px rgba(21,107,182,.16)}
.cards-empty{margin:0;padding:14px;text-align:center;font-size:.83rem;color:var(--muted-2);
  background:var(--tint-2);border:1px dashed #C5DCEF;border-radius:12px}
.addcard{
  width:100%;margin-top:4px;padding:11px;border-radius:11px;cursor:pointer;
  background:var(--white);border:1px dashed #C5DCEF;color:var(--franklin-deep);
  font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:.86rem;transition:all .14s ease;
}
.addcard:hover{background:var(--tint);border-color:var(--franklin)}
.addcard:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(21,107,182,.25)}

/* ---------- option comparison (blended rate) ---------- */
.opts{position:relative;z-index:1;margin:24px 0 0;display:grid;gap:10px}
.opt{padding:14px 16px;border-radius:13px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.13);transition:all .2s ease}
.opt.win{background:rgba(99,176,236,.15);border-color:rgba(99,176,236,.45)}
.opt-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:7px}
.opt-name{font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:.9rem;color:#fff}
.opt.win .opt-name::after{content:"Lower payment";margin-left:9px;font-size:.66rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#0B3255;background:#63B0EC;padding:2px 7px;border-radius:999px}
.opt-pmt{font-family:'Hanken Grotesk',sans-serif;font-weight:800;font-size:1.24rem;color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.opt-sub{display:flex;justify-content:space-between;gap:10px;font-size:.79rem;color:#9FC0DC}
.opt-sub b{color:#D3E5F5;font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- result panel ---------- */
.result{
  position:relative;color:#EAF3FB;padding:38px 34px 34px;overflow:hidden;
  background:
    radial-gradient(120% 90% at 80% -20%, #17538A 0%, rgba(23,83,138,0) 55%),
    linear-gradient(165deg,var(--navy-2) 0%,var(--navy) 62%,#082741 100%);
}
.peaks{position:absolute;inset:auto 0 0 0;height:120px;opacity:.14;pointer-events:none}
.peaks svg{width:100%;height:100%;display:block}
.result-label{
  font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sky-2);margin:0 0 6px;position:relative;z-index:1;
}
.bignum{
  font-family:'Hanken Grotesk',sans-serif;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.025em;
  font-size:clamp(2.5rem,5.6vw,3.4rem);line-height:1;color:#fff;margin:0;position:relative;z-index:1;
}
.bigsub{position:relative;z-index:1;margin:8px 0 0;font-size:.88rem;color:#B9D4EC;font-weight:500}
.bigsub b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}

.breakdown{position:relative;z-index:1;margin:24px 0 0;border-top:1px solid rgba(255,255,255,.16)}
.row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.11)}
.row span{font-size:.88rem;color:#BCD5EC}
.row b{font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-variant-numeric:tabular-nums;font-size:1rem;color:#fff;letter-spacing:-.01em}
.row.sub{display:none;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.13)}
.row.sub.show{display:flex}
.row.sub span{font-size:.81rem;color:#8FB2D2;padding-left:11px;position:relative}
.row.sub span::before{content:"";position:absolute;left:0;top:8px;width:4px;height:4px;border-radius:50%;background:var(--sky)}
.row.sub b{font-size:.9rem;font-weight:600;color:#D3E5F5}
.row.hi span{color:#FFE3AE;font-weight:600}
.row.hi b{color:#FFD98A}

/* alerts */
.alerts{position:relative;z-index:1;margin-top:18px;display:grid;gap:9px}
.alert{
  display:none;gap:10px;padding:12px 14px;border-radius:11px;font-size:.82rem;line-height:1.5;
  background:rgba(255,217,138,.10);border:1px solid rgba(255,217,138,.30);color:#FFE9C4;
}
.alert.show{display:flex}
.alert svg{width:16px;height:16px;stroke:#FFD98A;flex:none;margin-top:2px}
.alert b{color:#fff;font-weight:700}
/* The palette above is for the dark result panel. On a white panel that same
   cream-on-cream is unreadable, so alerts sitting in .controls get their own —
   same amber signal, inverted for light backgrounds (8.6:1 on the body text). */
.controls .alert{background:#FFF8EC;border-color:#EBD3A4;color:#5E4410}
.controls .alert svg{stroke:#B8860B}
.controls .alert b{color:#3D2C08}

/* in-panel CTA */
.cta{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:9px;margin-top:22px;
  width:100%;padding:16px 20px;border-radius:14px;text-decoration:none;font-family:'Hanken Grotesk',sans-serif;
  font-weight:700;font-size:1rem;color:#08283f;background:linear-gradient(180deg,#fff 0%,#EAF3FB 100%);
  box-shadow:0 12px 26px -12px rgba(0,0,0,.55);transition:transform .14s ease,box-shadow .14s ease;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 18px 30px -12px rgba(0,0,0,.6)}
.cta svg{width:17px;height:17px;stroke:var(--franklin);transition:transform .14s ease}
.cta:hover svg{transform:translateX(3px)}
.cta-sec{
  position:relative;z-index:1;display:block;text-align:center;margin-top:12px;font-size:.84rem;font-weight:600;
  color:#BCD5EC;text-decoration:none;padding:8px;border-radius:10px;
}
.cta-sec:hover{color:#fff;background:rgba(255,255,255,.07)}
.cta-note{position:relative;z-index:1;text-align:center;margin:10px 0 0;font-size:.76rem;color:#93B4D2}

/* ---------- realtor co-branding bar (Prop 19) ---------- */
.cobrand{background:linear-gradient(180deg,#F7FBFE,#EEF5FB);border-bottom:1px solid var(--line)}
.cobrand-in{max-width:1080px;margin:0 auto;padding:11px 22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cobrand-tag{font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--franklin);background:#fff;border:1px solid #D5E6F4;
  padding:4px 10px;border-radius:999px;flex:none}
.cobrand-id{min-width:0;line-height:1.3}
.cobrand-id b{display:block;font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:.98rem;color:var(--ink)}
.cobrand-id span{display:block;font-size:.76rem;color:var(--muted-2)}
.cobrand-call{margin-left:auto;font-weight:600;font-size:.86rem;color:var(--franklin-deep);
  text-decoration:none;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid #D5E6F4;white-space:nowrap}
.cobrand-call:hover{border-color:var(--sky)}
@media (max-width:640px){.cobrand-in{padding:10px 16px;gap:10px}.cobrand-call{margin-left:0;width:100%;text-align:center}}

/* ---------- assessed value comparison bars (Prop 19) ---------- */
.vs{position:relative;z-index:1;margin:24px 0 0}
.vs-row{margin-bottom:13px}
.vs-row:last-child{margin-bottom:0}
.vs-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px}
.vs-top span{font-size:.81rem;color:#9FC0DC}
.vs-top b{font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:.95rem;color:#fff;font-variant-numeric:tabular-nums}
.vs-track{height:18px;border-radius:9px;background:rgba(255,255,255,.09);overflow:hidden}
.vs-fill{height:100%;border-radius:9px;transition:width .4s ease}
.vs-good{background:linear-gradient(90deg,#63B0EC,#3F8FD4)}
.vs-bad{background:linear-gradient(90deg,#8A5A5A,#6E4444)}

/* ---------- date input row (refinance) ---------- */
.daterow{display:grid;grid-template-columns:1.4fr 1fr;gap:9px}
.daterow select,.daterow input{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;
  font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:.95rem;color:var(--ink);
  font-variant-numeric:tabular-nums;transition:border-color .14s,box-shadow .14s;
}
.daterow select:focus,.daterow input:focus{outline:none;border-color:var(--franklin);
  box-shadow:0 0 0 3px rgba(21,107,182,.16)}
.termout{
  margin:12px 0 0;padding:11px 14px;border-radius:11px;background:var(--tint);border:1px solid #D5E6F4;
  font-size:.85rem;color:var(--franklin-deep);font-weight:600;
}
.termout span{color:var(--muted);font-weight:500}

/* ---------- shared gauge extras (refi + DSCR) ---------- */
.vs-mid{background:linear-gradient(90deg,#E0B15E,#C8932F)}
.gauge-wrap{position:relative}
.gmk{position:absolute;top:-5px;bottom:-5px;width:2px;background:rgba(255,255,255,.55);z-index:2}
.gmk::after{content:attr(data-l);position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  font-size:.62rem;font-weight:700;font-family:'Hanken Grotesk',sans-serif;color:#C6DCEF;white-space:nowrap}
.dv{display:inline-block;margin-top:11px;padding:5px 12px;border-radius:999px;
  font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:.76rem;letter-spacing:.04em}
.dv-good{background:rgba(99,176,236,.22);color:#9FD0F5;border:1px solid rgba(99,176,236,.45)}
.dv-mid{background:rgba(224,177,94,.18);color:#F0CF95;border:1px solid rgba(224,177,94,.4)}
.dv-bad{background:rgba(190,120,110,.18);color:#E8B6AE;border:1px solid rgba(190,120,110,.42)}

/* ---------- stepped flow (Prop 19) ---------- */
.step{margin-top:40px}
.step:first-of-type{margin-top:30px}
.step-mark{
  display:inline-flex;align-items:center;gap:8px;font-family:'Hanken Grotesk',sans-serif;font-weight:700;
  font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--franklin);
  background:var(--tint);border:1px solid #D5E6F4;padding:5px 12px;border-radius:999px;margin-bottom:12px;
}
.step-mark em{font-style:normal;color:var(--muted-2);letter-spacing:.04em}
.step-title{
  font-family:'Hanken Grotesk',sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.1;
  font-size:clamp(1.5rem,3vw,2rem);margin:0 0 10px;color:var(--ink);
}
.step-lede{margin:0 0 4px;color:var(--muted);font-size:.99rem;line-height:1.6;max-width:66ch}
.carry{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:8px 14px;border-radius:14px;
  background:var(--tint-2);border:1px dashed #C5DCEF;font-size:.8rem;color:var(--muted);
  flex-wrap:wrap;line-height:1.5;max-width:100%;
}
.carry b{font-family:'Hanken Grotesk',sans-serif;font-weight:700;color:var(--franklin-deep);font-variant-numeric:tabular-nums}

/* summary cards */
.sum-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 22px;position:relative;z-index:1}
@media (max-width:720px){.sum-cards{grid-template-columns:1fr}}
.sum-card{padding:16px 18px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.sum-card span{display:block;font-size:.76rem;color:#9FC0DC;margin-bottom:5px}
.sum-card b{
  display:block;font-family:'Hanken Grotesk',sans-serif;font-weight:800;font-size:1.5rem;color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1;
}
.sum-card em{display:block;font-style:normal;font-size:.73rem;color:#8FB2D2;margin-top:4px}

/* ---------- educational content blocks ---------- */
.edu{margin-top:44px}
.edu h2{font-family:'Hanken Grotesk',sans-serif;font-weight:800;font-size:1.6rem;letter-spacing:-.02em;
  margin:0 0 12px;color:var(--ink)}
.edu h3{font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:1.06rem;margin:0 0 7px;color:var(--ink)}
.edu p{margin:0 0 15px;color:var(--muted);font-size:.97rem;line-height:1.65;max-width:70ch}
.edu p strong{color:var(--franklin-deep);font-weight:600}
.edu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0 8px}
@media (max-width:820px){.edu-grid{grid-template-columns:1fr}}
.edu-card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow-sm)}
.edu-card p{font-size:.88rem;margin:0}
.edu-num{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;
  background:var(--franklin);color:#fff;font-family:'Hanken Grotesk',sans-serif;font-weight:800;font-size:.9rem;margin-bottom:11px}
.edu-note{margin:20px 0 0;padding:16px 18px;border-radius:14px;background:var(--tint);
  border:1px solid #D5E6F4;border-left:3px solid var(--franklin)}
.edu-note b{display:block;font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--franklin-deep);margin-bottom:5px}
.edu-note p{margin:0;font-size:.88rem}
.faq{margin-top:14px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:16px 0;cursor:pointer;font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:.98rem;
  color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.3rem;font-weight:400;color:var(--franklin);flex:none;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--franklin-deep)}
.faq details p{margin:0 0 16px;font-size:.92rem;color:var(--muted);line-height:1.65;max-width:70ch}

/* ---------- notices / footer ---------- */
.cpa{
  margin:22px 4px 0;padding:15px 17px;border-radius:13px;background:var(--gold-tint);
  border:1px solid var(--gold-line);border-left:3px solid var(--gold);
  font-size:.83rem;line-height:1.55;color:#6B5426;
}
.cpa b{
  display:block;font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--gold);margin-bottom:4px;
}
.fineprint{margin:18px 4px 0;font-size:.76rem;line-height:1.6;color:var(--muted-2)}
.fineprint strong{color:var(--muted);font-weight:600}

.site-foot{margin-top:46px;border-top:1px solid var(--line);background:rgba(255,255,255,.6)}
.foot-in{max-width:1080px;margin:0 auto;padding:26px 22px 34px;text-align:center}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;margin:0 0 14px}
.foot-links a{font-size:.86rem;font-weight:500;color:var(--franklin-deep);text-decoration:none}
.foot-alt{margin-top:10px;padding-top:12px;border-top:1px solid var(--line)}
.foot-alt a{font-size:.82rem;color:var(--muted);font-weight:500}
.foot-alt a:hover{color:var(--franklin-deep)}
.foot-links a:hover{text-decoration:underline}
.foot-legal{margin:0;font-size:.74rem;line-height:1.6;color:var(--muted-2)}
.foot-legal a{color:var(--franklin);text-decoration:none}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .controls{padding:26px 22px 22px}
  .result{padding:30px 24px 28px}
}
@media (max-width:430px){
  .eyebrow{font-size:.66rem;letter-spacing:.11em}
  .eyebrow::before{width:18px;margin-right:-2px}
  .seg button{font-size:.76rem;padding:9px 4px}
}
@media (max-width:370px){
  .wrap{padding:0 13px}
  .controls{padding:22px 17px 18px}
  .result{padding:26px 18px 24px}
  .eyebrow{font-size:.6rem;letter-spacing:.07em}
  .eyebrow::before{width:14px}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   Partner "about" plate  —  co-branded builds only
   Rendered by scripts/build.py from the about block in a partner's brand file.
   Nothing here applies to the lender site, where no .about markup exists.
   ========================================================================== */
.about{border-top:1px solid var(--line);background:var(--white)}
.about-in{
  max-width:1080px;margin:0 auto;padding:60px 22px 64px;
  display:grid;grid-template-columns:300px minmax(0,1fr);gap:44px;align-items:start;
}
.about-photo{position:relative;flex:none}
/* height:auto is load-bearing, not tidiness.
   The <img> carries width and height attributes so the browser can reserve
   space before the file arrives. But aspect-ratio only computes a dimension
   when the other one is auto -- with the height attribute supplying a definite
   720px, the ratio was ignored and the photo rendered 300 wide by 720 tall.
   Stating height:auto hands the height back to aspect-ratio.

   4:5 rather than square because these are headshots. A square crop of a
   portrait either cuts the shoulders or pushes the face small; the taller box
   holds a head-and-shoulders frame without cropping into it. */
.about-photo img{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;
  border-radius:18px;display:block;box-shadow:var(--shadow);
}
/* A thin rule under the photo carrying the license number. The number has to
   appear near the name for compliance anyway, so it is used as the structural
   divider rather than adding a decorative one. */
.about-lic{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font-family:'Hanken Grotesk',sans-serif;font-size:.72rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);
}
.about-eyebrow{
  font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:.68rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--franklin);margin:0 0 12px;
  display:flex;align-items:center;gap:10px;
}
.about-eyebrow::before{content:"";width:26px;height:2px;background:var(--franklin);flex:none}
.about h2{
  font-family:'Hanken Grotesk',sans-serif;font-weight:800;font-size:2rem;line-height:1.15;
  letter-spacing:-.025em;color:var(--ink);margin:0 0 6px;
}
.about-role{font-size:.92rem;color:var(--muted);margin:0 0 20px}
.about-body p{font-size:.98rem;line-height:1.68;color:var(--muted);margin:0 0 15px}
.about-body p:last-child{margin-bottom:0}
.about-body b{color:var(--ink);font-weight:600}

.about-areas{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.about-areas span{
  display:block;font-family:'Hanken Grotesk',sans-serif;font-size:.68rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);margin-bottom:11px;
}
.about-areas ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.about-areas li{
  font-size:.82rem;font-weight:500;color:var(--franklin-deep);background:var(--tint);
  border:1px solid var(--line);border-radius:999px;padding:5px 12px;
}
.about-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.about-acts a{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:.86rem;
  padding:11px 20px;border-radius:999px;transition:transform .15s ease,box-shadow .15s ease;
}
.about-acts .aa-1{background:var(--franklin);color:#fff;box-shadow:var(--shadow-sm)}
.about-acts .aa-2{background:var(--white);color:var(--franklin-deep);border:1px solid var(--line)}
.about-acts .aa-3{background:none;color:var(--muted);padding-left:6px}
.about-acts a:hover{transform:translateY(-1px)}
.about-acts .aa-2:hover{border-color:var(--sky)}
.about-acts svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}

@media (max-width:820px){
  .about-in{grid-template-columns:1fr;gap:28px;padding:44px 22px 48px}
  .about-photo{max-width:210px}
  .about h2{font-size:1.6rem}
  .about-acts a{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.about-acts a{transition:none}}

/* ==========================================================================
   Dark header  —  set when a partner's logo is light artwork
   ==========================================================================
   A wordmark supplied as white-on-transparent is drawn for a dark bar and
   disappears entirely on this site's near-white header. Rather than ask for a
   second logo file that many agents do not have, the header inverts to carry
   the artwork it was given. */
.site-head.head-dark{background:var(--navy);border-bottom-color:rgba(255,255,255,.14)}
.site-head.head-dark .nav a{color:rgba(255,255,255,.80)}
.site-head.head-dark .nav a:hover{color:#fff;background:rgba(255,255,255,.10)}
.site-head.head-dark .nav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.15)}
.site-head.head-dark .nav-group{color:rgba(255,255,255,.45)}
.site-head.head-dark .head-phone{color:rgba(255,255,255,.88)}
.site-head.head-dark .head-phone:hover{color:#fff}
.site-head.head-dark .btn-apply{background:#fff;color:var(--navy);border-color:#fff}
.site-head.head-dark .btn-apply:hover{background:rgba(255,255,255,.88)}
.site-head.head-dark .nav-toggle{color:#fff;border-color:rgba(255,255,255,.30)}
.site-head.head-dark .nav-toggle svg .bar{stroke:#fff}
@media (max-width:980px){
  .site-head.head-dark .nav{background:var(--navy);border-top-color:rgba(255,255,255,.14)}
}

/* ==========================================================================
   Hub hero  —  partner builds
   ==========================================================================
   The lender hub runs a single dense lede that names all nine calculators.
   On a partner build that paragraph was both wrong and unreadable: wrong
   because it counted tools the build does not ship and described two that
   were removed, and unreadable because nine lines of unbroken prose on a
   phone is a wall people skip.

   Split into three jobs instead: a short lede, a reassurance row that can be
   scanned without being read, and the call to action on its own line. The
   cards below already describe each calculator, so the lede does not need to. */
.lede-cta{
  margin:14px 0 0;font-size:1.02rem;line-height:1.55;color:var(--ink);
  font-weight:600;max-width:56ch;
}
.hero-assure{
  list-style:none;margin:20px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:7px 8px;
}
.hero-assure li{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Hanken Grotesk',sans-serif;font-size:.76rem;font-weight:600;
  color:var(--franklin-deep);background:var(--white);
  border:1px solid var(--line);border-radius:999px;padding:6px 13px 6px 10px;
}
.hero-assure li::before{
  content:"";width:14px;height:14px;flex:none;border-radius:50%;
  background:var(--tint);
  /* a tick, drawn rather than shipped as an icon font */
  background-image:linear-gradient(45deg,transparent 44%,var(--franklin) 44%,var(--franklin) 56%,transparent 56%),
                   linear-gradient(-45deg,transparent 62%,var(--franklin) 62%,var(--franklin) 74%,transparent 74%);
  background-size:100% 100%;
}
@media (max-width:560px){
  .hero-assure{gap:6px}
  .hero-assure li{font-size:.72rem;padding:5px 11px 5px 9px}
  /* The hero ran oversized on phones — a 32px headline plus lede, CTA line and
     chips took the whole first screen. Tighten the type so the calculators
     aren't pushed off the fold. */
  h1{font-size:1.6rem;letter-spacing:-.015em;line-height:1.1}
  .lede{font-size:.95rem}
  .lede-cta{font-size:.95rem;margin-top:12px}
  .hero-assure{margin-top:16px}
}

/* Wordmark fallback when a partner's logo could not be retrieved. Set in the
   display face at the size the mark would have occupied, so the header still
   reads as theirs rather than showing a broken image. */
.brand-text{
  font-family:'Hanken Grotesk',sans-serif;font-weight:800;font-size:1.02rem;
  letter-spacing:-.02em;color:var(--franklin-deep);white-space:nowrap;
}
@media (max-width:720px){.brand-text{font-size:.9rem}}

/* ==========================================================================
   Learn: brand-adaptive article hero + hub card art (recolours per agent)
   ========================================================================== */
.art-hero{position:relative;overflow:hidden;border-radius:22px;margin:0 0 4px;color:#fff;
  padding:40px 36px 34px;box-shadow:var(--shadow);
  display:flex;align-items:center;min-height:258px;
  /* A per-guide photo sits behind the title (see .art-hero-photo); the navy is
     the fallback if the image is missing or still loading. */
  background:var(--navy);}
.art-hero::after{content:none}
/* editorial photo band behind the guide title */
.art-hero-photo{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center 58%}
.art-hero-shade{position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,rgba(10,22,34,.90) 0%,rgba(10,22,34,.72) 44%,rgba(10,22,34,.34) 70%,rgba(10,22,34,.08) 100%)}
.art-hero-art{position:absolute;right:14px;bottom:-22px;width:250px;height:250px;color:#fff;opacity:.15;pointer-events:none;z-index:0}
.art-hero-art svg{width:100%;height:100%;display:block;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.art-hero-in{position:relative;z-index:1;max-width:600px}
.art-hero .eyebrow{color:#BFE0FA;margin:0 0 12px}
.art-hero h1{color:#fff;font-family:'Hanken Grotesk',sans-serif;font-weight:800;font-size:2.15rem;line-height:1.07;letter-spacing:-.028em;margin:0}
.art-hero .meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0 0;font-size:.82rem;color:#CBE0F2;font-weight:600}
.art-hero .meta i{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.4);font-style:normal}
@media (max-width:640px){.art-hero{padding:30px 22px 26px;border-radius:18px;min-height:220px}.art-hero h1{font-size:1.6rem}.art-hero-art{width:160px;height:160px;opacity:.13;right:6px}}

/* hub card: image-style gradient header with a topic glyph */
.lcard-head{position:relative;overflow:hidden;height:120px;display:flex;align-items:center;justify-content:center;
  background:var(--navy)}
.lcard-head::after{content:none}
.lcard-head svg{position:relative;z-index:1;width:54px;height:54px;color:#fff;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.96}
.lcard-body{padding:24px 26px 22px;display:flex;flex-direction:column;flex:1}
.art-hero .art-lede{color:#DCEBF8;font-family:'Hanken Grotesk',system-ui,sans-serif;font-weight:400;font-size:1.06rem;line-height:1.6;letter-spacing:0;margin:16px 0 0;max-width:none}

/* ===== reskin: Fraunces (serif) display headings + big numbers ===== */
h1,h2,h3,.controls-head h2,.edu h2,.about h2,.art-hero h1{font-family:'Fraunces',Georgia,'Times New Roman',serif;letter-spacing:-.012em}
.bignum{font-family:'Fraunces',Georgia,'Times New Roman',serif;font-weight:600}