/* sdloanexpert.com shared stylesheet
   Editorial private-advisory direction, _intel/design-direction-2026-08-11.md
   Built 2026-08-11 by phase2_system_2026_08_11.py. Do not hand-edit. */
:root{
  --navy:#172357; --navy-700:#101a44; --accent:#0077cc; --accent-700:#005c99;
  --ink:#16213d; --muted:#5b6478; --bg:#ffffff; --line:#e2e8f3;
  --gold:#c9a227; --good:#17805a;
  --sand:#faf7f2; --sand-2:#f3ece1;
  --radius:10px;
  --shadow-sm:0 1px 2px rgba(16,26,68,.05);
  --shadow-md:0 10px 30px rgba(16,26,68,.10);
  --shadow-lg:0 28px 70px rgba(16,26,68,.20);
  --maxw:1200px; --readw:68ch;
  --gut:22px; --sec:64px;
}
@media(min-width:1024px){:root{--gut:40px; --sec:104px}}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"IBM Plex Sans",system-ui,sans-serif;color:var(--ink);
  background:var(--bg);line-height:1.7;font-size:17px;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:"Source Serif 4",Georgia,serif;color:var(--navy);
  line-height:1.08;letter-spacing:-.018em;font-weight:600}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block;height:auto}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.read{max-width:var(--readw)}
[class*=" num"],.num{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;
  padding:12px 18px;z-index:200}
.skip:focus{left:0}

/* eyebrow with the gold signature rule */
.eyebrow{display:flex;align-items:center;gap:12px;font-family:"IBM Plex Sans";
  font-weight:700;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent)}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--gold);flex:0 0 28px}
.eyebrow.on-dark{color:#e8c86a}
.eyebrow.on-dark::before{background:var(--gold)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:"IBM Plex Sans";font-weight:700;font-size:1rem;padding:16px 30px;
  border-radius:999px;min-height:52px;border:2px solid transparent;cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn--gold{background:var(--gold);color:#1b1400}
.btn--gold:hover{background:#dbb43a}
.btn--ghost-light{border-color:rgba(255,255,255,.5);color:#fff}
.btn--ghost-light:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{background:var(--accent-700)}
.btn--outline{border-color:var(--navy);color:var(--navy)}
.btn--outline:hover{background:var(--navy);color:#fff}

/* ============ header + nav ============ */
.site-head{background:#fff;border-bottom:1px solid var(--line);position:sticky;
  top:0;z-index:60}
.site-head .bar{display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:70px}
.brand{display:flex;flex-direction:column;line-height:1.15;color:var(--navy);
  font-family:"Source Serif 4",Georgia,serif;font-weight:700;font-size:1.08rem;
  padding:8px 0;min-height:44px;justify-content:center}
.brand span{font-family:"IBM Plex Sans";font-weight:500;font-size:.7rem;
  color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
.brand i{font-style:normal}
/* At 390 the brand block and the phone pill fight for the same row. Below
   520 the brand drops to one line and the employer name is trimmed off the
   sub-label so neither wraps. Measured at 390, not assumed. */
@media(max-width:519px){
  .brand{font-size:.96rem}
  .brand i{display:none}
  .brand span{font-size:.64rem}
  .head-cta{font-size:.88rem;padding:11px 15px}
  .hero-actions .btn{width:100%}
}
.head-cta{display:inline-flex;align-items:center;gap:.45em;font-weight:700;
  font-size:.95rem;padding:11px 20px;border-radius:999px;background:var(--navy);
  color:#fff;min-height:44px;white-space:nowrap}
.head-cta:hover{background:var(--navy-700);text-decoration:none}
.site-nav{border-top:1px solid var(--line)}
.site-nav ul{list-style:none;display:flex;gap:2px;overflow-x:auto;
  scrollbar-width:none}
.site-nav ul::-webkit-scrollbar{display:none}
.site-nav a{display:flex;align-items:center;min-height:46px;padding:0 16px;
  font-weight:600;font-size:.95rem;color:var(--ink);white-space:nowrap;
  border-bottom:3px solid transparent}
.site-nav a:hover{color:var(--accent);text-decoration:none}
.site-nav a[aria-current=page]{color:var(--navy);border-bottom-color:var(--gold)}
@media(min-width:1024px){
  .site-head .bar{min-height:78px}
  .site-nav ul{gap:6px}
  .site-nav a{font-size:1rem;padding:0 20px;min-height:52px}
}
/* Five nav items plus the phone pill do not fit a 390 row. The row scrolls
   horizontally, which is the existing behavior, and the padding tightens so
   four items sit in view at rest. Measured at 390.
   The fade on the right edge is the fix for a real defect caught by LOOKING
   at the 390 screenshot: without it the last item is simply sliced in half
   and reads as a rendering bug rather than as "there is more, keep going". */
@media(max-width:900px){
  .site-nav{position:relative}
  .site-nav::after{content:"";position:absolute;top:0;right:0;bottom:0;
    width:44px;pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,0) 0%,#fff 78%)}
}
@media(max-width:639px){
  .site-nav a{padding:0 12px;font-size:.9rem}
}

/* ============ HERO: full-bleed image + OFFSET CARD ============
   The one memorable thing. The photograph runs full bleed; a solid navy card
   overlaps its bottom-left corner and hangs below the image onto the ground
   color, and on desktop the card's background breaks left out of the text
   grid. Text sits on solid navy rather than on the photograph, so contrast is
   fixed by construction (#fff on #172357 measures 13.0:1) instead of depending
   on how bright a particular render happens to be. Mobile is the same idea
   read as a genuine single column: image first, card under it. */
.hero{position:relative;background:var(--sand);padding:0}
.hero-media{position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--navy)}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(196deg,rgba(16,26,68,.10) 0%,rgba(16,26,68,.22) 46%,
    rgba(16,26,68,.72) 100%)}
.hero-inner{position:relative;z-index:2;margin-top:-46px}
.hero-card{background:var(--navy);color:#fff;border-top:3px solid var(--gold);
  padding:26px 22px 30px;box-shadow:var(--shadow-lg)}
/* Mobile display size is set so the eyebrow, headline, lede and BOTH CTAs
   clear an 844px-tall 390 viewport. Measured, not guessed. */
.hero h1{color:#fff;font-size:clamp(1.95rem,8.2vw,2.55rem);margin:14px 0 0;
  letter-spacing:-.024em;line-height:1.05}
.hero .lede{color:#c8d4f0;font-size:1.02rem;margin:16px 0 0;max-width:36em}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0}
.hero-trust{display:flex;flex-wrap:wrap;gap:14px 26px;margin:26px 0 0;
  padding-top:18px;border-top:1px solid rgba(255,255,255,.22)}
.hero-trust div{color:#a9b8db;font-size:.86rem;letter-spacing:.01em}
.hero-trust b{display:block;color:#fff;font-family:"Source Serif 4",Georgia,serif;
  font-size:1.32rem;font-weight:600;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}
.hero-trust .gold{color:var(--gold);letter-spacing:2px;font-size:1.05rem}
@media(min-width:768px){
  .hero-media{aspect-ratio:auto;height:50vh;min-height:380px}
  .hero-inner{margin-top:-120px}
  .hero-card{padding:36px 40px 40px;max-width:660px}
  .hero h1{font-size:clamp(2.2rem,5.4vw,3rem);margin:16px 0 0}
  .hero .lede{font-size:1.1rem;margin:18px 0 0}
}
@media(min-width:1024px){
  /* The three hero scales are 78 / 56 / 46 vh, measured across the whole hero
     block (photograph plus the part of the card that hangs below it), not
     across the photograph alone. The card is pulled up hard so the eyebrow,
     the h1, the lede and both CTAs all sit above the fold at 1440x900. An
     earlier pass sized the PHOTOGRAPH at 78vh and pushed the headline off the
     first screen, which is the exact failure the direction warns about. */
  .hero-media{height:58vh;min-height:420px}
  .hero--mid .hero-media{height:56vh;min-height:400px}
  .hero--slim .hero-media{height:46vh;min-height:340px}
  .hero-inner{margin-top:-314px}
  .hero--mid .hero-inner{margin-top:-260px}
  .hero--slim .hero-inner{margin-top:-230px}
  /* break the grid: the card's ground runs left past the container gutter
     while its text stays on the 12-column measure. */
  .hero-card{margin-left:calc(var(--gut) * -1);
    padding:40px 52px 42px calc(var(--gut) + 52px);max-width:780px}
  .hero--mid .hero-card,.hero--slim .hero-card{padding:34px 46px 38px calc(var(--gut) + 46px);
    max-width:680px}
  .hero h1{font-size:clamp(2.4rem,4.2vw,3.3rem)}
}
.hero--mid h1{font-size:clamp(2.1rem,5vw,3.4rem)}
.hero--slim h1{font-size:clamp(1.9rem,4.2vw,3rem)}
@media(min-width:1024px){
  .hero--mid h1{font-size:clamp(2.1rem,3.8vw,3rem)}
  .hero--slim h1{font-size:clamp(1.9rem,3.4vw,2.7rem)}
}

/* ============ trust strip - sits immediately after the hero ============ */
.trustband{background:#fff;padding:0;border-bottom:1px solid var(--line)}
.trustband .grid{display:grid;grid-template-columns:1fr;gap:0}
.trustband .t{padding:24px 0;border-top:1px solid var(--line)}
.trustband .t:first-child{border-top:0}
.trustband .t::before{content:"";display:block;width:28px;height:2px;
  background:var(--gold);margin-bottom:12px}
.trustband b{display:block;font-family:"Source Serif 4",Georgia,serif;
  color:var(--navy);font-size:1.1rem;line-height:1.25;margin-bottom:5px}
.trustband span{color:var(--muted);font-size:.93rem;display:block}
@media(min-width:768px){
  .trustband .grid{grid-template-columns:1fr 1fr;column-gap:40px}
  .trustband .t:nth-child(2){border-top:0}
}
@media(min-width:1024px){
  .trustband .grid{grid-template-columns:repeat(4,1fr);column-gap:44px}
  .trustband .t{padding:34px 0 36px;border-top:0}
}

/* ============ sections ============ */
section{padding:var(--sec) 0}
/* The direct answer on a guide or state page sits directly under the hero
   card. At full section padding it fell a long way down an empty screen and
   read as orphaned, so this pulls it up without touching the rhythm of the
   rest of the page. */
.sec--tight{padding-top:44px}
@media(min-width:1024px){.sec--tight{padding-top:60px}}
.band-sand{background:var(--sand)}
.band-navy{background:var(--navy);color:#dfe6f6}
.band-navy h2,.band-navy h3{color:#fff}
.sec-head{max-width:60ch}
.sec-head h2{font-size:clamp(1.75rem,3.4vw,2.6rem);margin:14px 0 0}
.sec-head p{margin:16px 0 0;color:var(--muted);font-size:1.08rem}
.band-navy .sec-head p{color:#b9c6e4}

/* editorial split 7/5 */
.split{display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
@media(min-width:1024px){
  .split{grid-template-columns:7fr 5fr;gap:64px}
  .split--flip>*:first-child{order:2}
}
/* Paragraph rhythm inside editorial splits. Without this, consecutive <p>
   inherit the global margin:0 reset and butt together with no gap. Caught in
   a rendered screenshot of the About section at both 1440 and 390. */
.split p{margin:0 0 16px}
.split p:last-child{margin-bottom:0}
.split-figure{position:relative}
.split-figure img{border-radius:var(--radius);width:100%}
.split-figure figcaption{margin-top:12px;font-size:.86rem;color:var(--muted)}

/* portrait */
.portrait{max-width:300px}
@media(min-width:1024px){.split .portrait{margin-left:auto}}
.portrait img{border-radius:var(--radius);width:100%}
.portrait .rule{width:56px;height:3px;background:var(--gold);margin:16px 0 12px}
.portrait b{display:block;font-family:"Source Serif 4",Georgia,serif;
  color:var(--navy);font-size:1.15rem}
.portrait span{font-size:.88rem;color:var(--muted)}

/* imagery cards */
.cards{display:grid;grid-template-columns:1fr;gap:22px;margin-top:36px}
@media(min-width:640px){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.cards--3{grid-template-columns:repeat(3,1fr)}}
.icard{display:block;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:#fff;transition:box-shadow .2s ease,transform .2s ease}
.icard:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);
  text-decoration:none}
.icard figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--sand-2)}
.icard img{width:100%;height:100%;object-fit:cover}
.icard .body{padding:20px 22px 24px}
.icard b{display:block;font-family:"Source Serif 4",Georgia,serif;
  color:var(--navy);font-size:1.16rem;line-height:1.25;margin-bottom:8px}
.icard span{color:var(--muted);font-size:.95rem}

/* plain link cards (no image) */
.lcards{display:grid;grid-template-columns:1fr;gap:16px;margin-top:32px}
@media(min-width:768px){.lcards{grid-template-columns:1fr 1fr}}
.lcard{border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:0 var(--radius) var(--radius) 0;padding:20px 22px;background:#fff}
a.lcard:hover{box-shadow:var(--shadow-sm);text-decoration:none;
  border-left-color:var(--accent)}
.lcard b{display:block;font-family:"Source Serif 4",Georgia,serif;
  color:var(--navy);font-size:1.08rem;margin-bottom:5px}
.lcard span{color:var(--muted);font-size:.94rem}

/* numbered steps */
.steps{list-style:none;counter-reset:s;margin-top:34px}
.steps li{counter-increment:s;display:grid;grid-template-columns:auto 1fr;
  gap:20px;padding:22px 0;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.band-navy .steps li{border-color:rgba(255,255,255,.18)}
.steps li::before{content:counter(s,decimal-leading-zero);
  font-family:"Source Serif 4",Georgia,serif;font-size:1.5rem;color:var(--gold);
  font-weight:600;line-height:1}
.steps b{display:block;font-family:"Source Serif 4",Georgia,serif;
  font-size:1.15rem;color:var(--navy);margin-bottom:5px}
.band-navy .steps b{color:#fff}
.steps p{color:var(--muted);margin:0}
.band-navy .steps p{color:#b9c6e4}

/* quotes */
.quotes{display:grid;grid-template-columns:1fr;gap:22px;margin-top:36px}
@media(min-width:900px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;display:flex;flex-direction:column}
.quote .stars{color:var(--gold);letter-spacing:3px;font-size:.95rem}
.quote p{font-family:"Source Serif 4",Georgia,serif;font-size:1.05rem;
  line-height:1.55;color:var(--ink);margin:14px 0 18px;flex:1}
.quote cite{font-style:normal;font-size:.88rem;color:var(--muted);font-weight:600}

/* map panel */
.mappanel{display:grid;grid-template-columns:1fr;gap:34px;align-items:center}
@media(min-width:1024px){.mappanel{grid-template-columns:5fr 7fr;gap:60px}}
.usmap{width:100%;height:auto;display:block}
.usmap path{fill:#e3dccf;stroke:var(--sand);stroke-width:1;
  vector-effect:non-scaling-stroke}
.usmap path.lit{fill:var(--navy)}
.statelist{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.statelist span,.statelist a{font-family:"IBM Plex Sans";font-weight:600;
  font-size:.82rem;letter-spacing:.06em;color:var(--navy);background:#fff;
  border:1px solid var(--line);border-radius:4px;padding:5px 9px;
  display:inline-block}
.statelist a:hover{border-color:var(--accent);color:var(--accent);
  text-decoration:none}

/* calculators band */
.tools{display:grid;grid-template-columns:1fr;gap:20px;margin-top:36px}
@media(min-width:768px){.tools{grid-template-columns:repeat(3,1fr)}}
.tool{display:block;padding:26px 24px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.18);border-radius:var(--radius)}
.tool:hover{background:rgba(255,255,255,.10);text-decoration:none}
.tool .n{color:var(--gold);font-family:"Source Serif 4",Georgia,serif;
  font-size:1.4rem;line-height:1}
.tool b{display:block;color:#fff;font-family:"Source Serif 4",Georgia,serif;
  font-size:1.15rem;margin:12px 0 6px}
.tool span{color:#b9c6e4;font-size:.94rem}

/* lead form */
.leadwrap{display:grid;grid-template-columns:1fr;gap:34px;align-items:start}
@media(min-width:1024px){.leadwrap{grid-template-columns:6fr 5fr;gap:60px}}
/* Sand well, per the direction. The fields stay white so they read as the
   only things on the card you are meant to touch. */
.lead{background:var(--sand);border:1px solid var(--sand-2);border-radius:14px;
  padding:30px 28px;box-shadow:var(--shadow-md)}
.lead h2{font-size:1.5rem;margin:12px 0 6px}
.lead .sub{color:var(--muted);font-size:.98rem;margin:0 0 20px}
.lead .field{margin:0 0 16px}
.lead label{display:block;font-weight:600;font-size:.9rem;margin-bottom:7px;
  color:var(--navy)}
.lead input[type=text],.lead input[type=tel]{width:100%;padding:15px 15px;
  font-size:1rem;font-family:"IBM Plex Sans";border:1px solid var(--line);
  border-radius:var(--radius);min-height:52px;background:#fff}
.lead input:focus{outline:2px solid var(--accent);outline-offset:1px}
.lead button{width:100%}
.lead .reassure{font-size:.93rem;color:var(--muted);margin:14px 0 0}
.lead .consent{font-size:.81rem;color:var(--muted);margin:12px 0 0}
.lead-success{display:none;text-align:center;padding:24px 0}
.lead-success.show{display:block}
.lead-success .tick{width:54px;height:54px;border-radius:50%;background:var(--good);
  color:#fff;font-size:1.7rem;display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px}
.assure{list-style:none;margin-top:26px}
.assure li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:14px 0;
  border-bottom:1px solid var(--line)}
.assure .m{color:var(--gold);font-size:1.05rem;line-height:1.4}
.assure b{display:block;color:var(--navy);font-family:"Source Serif 4",Georgia,serif;
  font-size:1.05rem}
.assure span{color:var(--muted);font-size:.94rem}

/* article */
.article{max-width:var(--readw);margin:0 auto}
.article h2{font-size:clamp(1.5rem,3vw,2.05rem);margin:44px 0 14px}
.article h3{font-size:1.2rem;margin:28px 0 8px}
.article p{margin:0 0 16px}
.article ul,.article ol{margin:0 0 18px;padding-left:22px}
.article li{margin:0 0 9px}
.answer{background:var(--sand);border-left:3px solid var(--gold);
  border-radius:0 var(--radius) var(--radius) 0;padding:24px 26px;
  margin:0 0 36px;font-size:1.09rem;line-height:1.65}
.src{font-size:.9rem;color:var(--muted);border-top:1px solid var(--line);
  margin-top:14px;padding-top:12px}
.note{background:var(--sand-2);border-radius:var(--radius);padding:18px 20px;
  margin:22px 0;font-size:.98rem}
.crumbs{font-size:.86rem;color:#b9c6e4;padding:0 0 6px}
.crumbs a{color:#dfe6f6;text-decoration:underline}

/* faq */
.faq details{border:1px solid var(--line);border-radius:var(--radius);
  margin:0 0 12px;background:#fff}
.faq summary{cursor:pointer;padding:18px 20px;font-weight:600;color:var(--navy);
  font-family:"Source Serif 4",Georgia,serif;font-size:1.06rem;list-style:none;
  min-height:48px;display:flex;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"";width:14px;height:2px;background:var(--gold);
  flex:0 0 14px}
.faq summary::after{content:"+";margin-left:auto;color:var(--accent);
  font-family:"IBM Plex Sans";font-weight:700;font-size:1.25rem}
.faq details[open] summary::after{content:"\2013"}
.faq p{padding:0 20px 18px 48px;margin:0}

/* cta band */
.ctaband{background:var(--navy);color:#fff;text-align:center}
.ctaband h2{color:#fff;font-size:clamp(1.6rem,3vw,2.3rem)}
.ctaband p{color:#b9c6e4;margin:14px auto 26px;max-width:44ch}
.ctaband .row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* related */
.related{border-top:1px solid var(--line);padding-top:34px;margin-top:48px}

/* ======================================================================
   PHASE 2 COMPONENTS
   ====================================================================== */

/* ---- calculators. Markup and JS lifted from the live /second-home.html
   landing page unchanged; only the skin is new. The landing page's --soft /
   --soft-2 wells map onto --sand / --sand-2 here. ---- */
.calc{border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  padding:26px 24px 28px;margin:0 0 26px;box-shadow:var(--shadow-sm)}
.calc-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.calc-head h3{margin:0;font-size:1.3rem}
.calc-tag{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--accent);display:inline-flex;align-items:center;gap:10px}
.calc-tag::before{content:"";width:20px;height:2px;background:var(--gold)}
.calc-lede{color:var(--muted);font-size:.97rem;margin:10px 0 18px;max-width:62ch}
.calc-fields{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:620px){.calc-fields{grid-template-columns:1fr 1fr}}
.calc-f label{display:block;font-size:.88rem;font-weight:600;color:var(--navy);
  margin-bottom:7px}
.calc-f input,.calc-f select{width:100%;box-sizing:border-box;
  font-family:"IBM Plex Sans";font-size:1rem;padding:14px 14px;min-height:52px;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  color:var(--ink)}
.calc-f input:focus,.calc-f select:focus{outline:2px solid var(--accent);
  outline-offset:1px}
.calc-out{margin-top:20px;border-top:1px solid var(--line);padding-top:18px}
.calc-rows{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:620px){.calc-rows{grid-template-columns:1fr 1fr}}
.calc-row{background:var(--sand);border-radius:8px;padding:14px 16px}
.calc-row .k{display:block;font-size:.8rem;color:var(--muted);margin-bottom:3px}
.calc-row .v{display:block;font-size:1.5rem;font-weight:600;color:var(--navy);
  font-family:"Source Serif 4",Georgia,serif;font-variant-numeric:tabular-nums}
.calc-row.lead{background:var(--sand-2);border:1px solid var(--sand-2);
  box-shadow:none;padding:14px 16px;border-radius:8px}
.calc-row.lead .v{color:var(--navy)}
.calc-note{font-size:.85rem;color:var(--muted);margin:16px 0 0;line-height:1.55}
.calc-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.calc-cta a{display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:12px 22px;border-radius:999px;font-weight:700;
  font-size:.95rem;border:2px solid transparent}
.calc-cta a:hover{text-decoration:none}
.calc-cta .c-call{background:var(--navy);color:#fff}
.calc-cta .c-call:hover{background:var(--navy-700)}
.calc-cta .c-form{background:#fff;color:var(--navy);border-color:var(--navy)}
.calc-cta .c-form:hover{background:var(--navy);color:#fff}

/* ---- states hub ---- */
.state-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:36px}
@media(min-width:560px){.state-grid{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.state-grid{grid-template-columns:repeat(3,1fr)}}
.state-card{display:flex;align-items:center;gap:16px;border:1px solid var(--line);
  border-radius:var(--radius);background:#fff;padding:16px 18px;
  transition:box-shadow .2s ease,transform .2s ease}
.state-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);
  text-decoration:none}
.state-card .ab{font-family:"Source Serif 4",Georgia,serif;font-weight:700;
  font-size:1.05rem;color:var(--gold);letter-spacing:.04em;flex:0 0 auto;
  border-right:1px solid var(--line);padding-right:16px;min-width:52px}
.state-card b{display:block;font-family:"Source Serif 4",Georgia,serif;
  color:var(--navy);font-size:1.08rem;line-height:1.25}
.state-card span{display:block;color:var(--muted);font-size:.9rem;margin-top:2px}

/* ---- licensing table ---- */
.lic-table{width:100%;border-collapse:collapse;margin:22px 0 8px;font-size:.97rem}
.lic-table th,.lic-table td{text-align:left;padding:13px 14px;
  border-bottom:1px solid var(--line);vertical-align:top}
.lic-table th{font-family:"IBM Plex Sans";font-weight:700;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  border-bottom:2px solid var(--gold)}
.lic-table td b{color:var(--navy);font-variant-numeric:tabular-nums}
.lic-wrap{overflow-x:auto}

/* ---- contact panel ---- */
.contact-grid{display:grid;grid-template-columns:1fr;gap:34px;align-items:start}
@media(min-width:1024px){.contact-grid{grid-template-columns:6fr 5fr;gap:60px}}
.contact-block{border-left:3px solid var(--gold);padding:4px 0 4px 20px;
  margin:0 0 26px}
.contact-block b{display:block;font-family:"Source Serif 4",Georgia,serif;
  color:var(--navy);font-size:1.12rem;margin-bottom:5px}
.contact-block span,.contact-block p{color:var(--muted);font-size:.97rem;margin:0}
.contact-block a{font-weight:600}

/* ---- footer, rebuilt for the full site ---- */
footer.site{background:var(--navy-700);color:#c8d2ea;padding:56px 0 34px;
  font-size:.93rem}
footer.site .cols{display:grid;grid-template-columns:1fr;gap:30px;
  padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.14)}
@media(min-width:640px){footer.site .cols{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){footer.site .cols{grid-template-columns:1.4fr 1.2fr 1fr 1fr}}
footer.site h4{color:#fff;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;font-family:"IBM Plex Sans";font-weight:700;
  margin:0 0 12px;padding-bottom:10px;border-bottom:2px solid var(--gold);
  display:inline-block}
footer.site b{color:#fff}
footer.site a{color:#dfe6f6;text-decoration:none}
footer.site a:hover{color:#fff;text-decoration:underline}
footer.site .flist{list-style:none;margin:0}
footer.site .flist li{margin:0 0 7px;line-height:1.45}
footer.site .flist a{font-size:.9rem}
.fstates{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.fstates a{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:4px;padding:4px 8px;font-size:.78rem;font-weight:600;
  letter-spacing:.05em}
.fstates a:hover{background:rgba(255,255,255,.16);text-decoration:none}
.ehl{display:inline-flex;align-items:center;gap:.5em;margin-top:14px;color:#fff}
.disclaimer{font-size:.78rem;color:#9fb0d4;margin:18px 0 0;line-height:1.6}
.foot-legal{font-size:.82rem;color:#9fb0d4;margin:14px 0 0}
.foot-legal a{text-decoration:underline}
.foot-nav a{margin-right:16px}

/* anchor landings clear the 118px sticky header (sitelink fragments) */
[id]{scroll-margin-top:130px}