/* ============================================================
   AeFin design system — refined editorial advisory.
   Sibling of HWI (navy+gold): AeFin = warm near-black + emerald
   green lead + olive-gold secondary. Cardo serif display + Inter body.
   ============================================================ */
:root{
  /* palette */
  --ink:#0f1a12;            /* near-black with a fresh-green undertone */
  --ink-2:#18261b;          /* raised dark panels */
  --paper:#ffffff;
  --paper-2:#f7fcf5;        /* fresh soft-mint white section (green-50) */
  --paper-3:#e5f5e0;        /* pale green mist (green-100) */
  /* fresh green scale — coordinated (ColorBrewer Greens) */
  --green-50:#f7fcf5; --green-100:#e5f5e0; --green-200:#c7e9c0; --green-300:#a1d99b;
  --green-400:#74c476; --green-500:#41ab5d; --green-600:#238b45; --green-700:#005a32;
  --green:#238b45;          /* lead accent — fresh, grounded (green-600) */
  --green-deep:#005a32;     /* links / hover / deep text (green-700) */
  --green-soft:#74c476;     /* fresh accent/text on dark (green-400) */
  --gold:#b08d3e;           /* warm secondary — used sparingly (eyebrow tick, quote rule) */
  --gold-soft:#d8bd79;
  --text:#2b2d25;           /* body ink */
  --muted:#5e6155;
  --line:#e4e5dc;
  --line-dark:#34362b;
  --accent:var(--green);
  --accent-hero:var(--green-soft);
  /* type */
  --serif:"Cardo",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* layout */
  --maxw:1180px; --measure:68ch; --gut:clamp(1.1rem,4vw,3rem);
  --r:14px;
  --shadow:0 1px 2px rgba(20,22,15,.04),0 12px 32px -12px rgba(20,22,15,.14);
  --shadow-lg:0 2px 6px rgba(20,22,15,.05),0 28px 60px -24px rgba(20,22,15,.22);
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--text);background:var(--paper);
  line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:780px;margin:0 auto;padding-inline:var(--gut)}
img{max-width:100%;height:auto}

/* typography */
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.12;letter-spacing:-.01em;color:var(--ink)}
h1{font-size:clamp(2.3rem,5.2vw,3.7rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
h3{font-size:clamp(1.25rem,2vw,1.5rem)}
p{margin:0 0 1.15rem}
a{color:var(--green-deep);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
.eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.16em;
  font-size:.74rem;font-weight:700;color:var(--green-deep);margin:0 0 .9rem}
.eyebrow::before{content:"";display:inline-block;width:1.6rem;height:2px;background:var(--gold);
  vertical-align:middle;margin-right:.6rem;transform:translateY(-3px)}
.lead{font-size:clamp(1.1rem,1.7vw,1.32rem);line-height:1.6;color:var(--muted)}

/* buttons */
/* Button system — ALL variants share identical text size, weight, line-height,
   padding and shape. Variants change ONLY colour. Text is always high-contrast
   against its own background. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--sans);font-size:1rem;font-weight:600;line-height:1;letter-spacing:.005em;
  padding:.95rem 1.6rem;border-radius:999px;border:1.5px solid transparent;
  text-align:center;white-space:nowrap;transition:.18s;cursor:pointer;text-decoration:none}
.btn:hover{text-decoration:none;transform:translateY(-1px);box-shadow:var(--shadow)}
/* primary: white text on royal green */
.btn{background:var(--green);color:#fff;border-color:var(--green)}
.btn:hover{background:var(--green-deep);border-color:var(--green-deep);color:#fff}
/* ghost (on LIGHT backgrounds): ink text, hairline border */
.btn-ghost{background:transparent;color:var(--ink);border-color:#c3c5ba}
.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
/* light (on DARK backgrounds): solid white pill, green text — max contrast */
.btn-light{background:#fff;color:var(--green-deep);border-color:#fff}
.btn-light:hover{background:#eef2ec;color:var(--green-deep);border-color:#eef2ec}
/* dark-context ghost: light text + translucent border (fixes invisible ink-on-dark) */
.hero .btn-ghost,.pillar-hero .btn-ghost,.section-dark .btn-ghost,.cta-band .btn-ghost{
  color:#fff;border-color:rgba(255,255,255,.55)}
.hero .btn-ghost:hover,.pillar-hero .btn-ghost:hover,.section-dark .btn-ghost:hover,
.cta-band .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
/* primary button on ANY dark background → white pill (green is too dark to separate from near-black) */
.hero .btn:not(.btn-ghost):not(.btn-light),.pillar-hero .btn:not(.btn-ghost):not(.btn-light),
.section-dark .btn:not(.btn-ghost):not(.btn-light),.cta-band .btn:not(.btn-ghost):not(.btn-light),
.article-aside .btn:not(.btn-ghost):not(.btn-light){
  background:#fff;color:var(--green-deep);border-color:#fff}
.hero .btn:not(.btn-ghost):not(.btn-light):hover,.pillar-hero .btn:not(.btn-ghost):not(.btn-light):hover,
.section-dark .btn:not(.btn-ghost):not(.btn-light):hover,.cta-band .btn:not(.btn-ghost):not(.btn-light):hover,
.article-aside .btn:not(.btn-ghost):not(.btn-light):hover{
  background:#eef2ec;color:var(--green-deep);border-color:#eef2ec}

/* header */
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:78px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand img{height:42px;width:auto;display:block}
.brand span{font-family:var(--serif);font-weight:700;font-size:1.6rem;letter-spacing:-.01em;color:var(--ink)}
.brand:hover{text-decoration:none}
.nav{display:flex;gap:.5rem 1.3rem;align-items:center;flex-wrap:wrap;row-gap:.4rem}
.nav>a,.nav .has-children>a{color:var(--ink);font-weight:500;font-size:.96rem;padding:.4rem 0;position:relative}
.nav>a:hover,.nav .has-children>a:hover{color:var(--green-deep);text-decoration:none}
.nav .has-children{position:relative}
.nav .submenu{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);
  z-index:60;background:#fff;border:1px solid var(--line);border-radius:12px;padding:.5rem;min-width:248px;
  box-shadow:var(--shadow-lg)}
.nav .submenu::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.nav .has-children:hover .submenu,.nav .has-children:focus-within .submenu{display:block}
.nav .submenu a{display:block;padding:.6rem .8rem;border-radius:8px;font-weight:500;font-size:.94rem;color:var(--text)}
.nav .submenu a:hover{background:var(--paper-2);color:var(--green-deep);text-decoration:none}
.nav a[aria-current="page"]{color:var(--green-deep)}
.nav .btn{color:#fff;font-weight:600}
/* hamburger + submenu carets: hidden on desktop (hover drives submenus) */
.nav-toggle{display:none}
.submenu-toggle{display:none}
/* tablet: hide the nav CTA so it can't wrap across the header border (hero + footer carry the CTA) */
@media(max-width:1040px){.nav .btn{display:none}}

/* hero */
.hero,.pillar-hero{position:relative;overflow:hidden;background:var(--ink);color:#f3f4ec;
  padding:clamp(4rem,9vw,7rem) 0 clamp(3.5rem,7vw,5.5rem)}
.hero::before,.pillar-hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 90% at 88% 8%,rgba(65,171,93,.36),transparent 55%),
    radial-gradient(80% 70% at 6% 100%,rgba(176,141,62,.14),transparent 60%);}
.hero::after,.pillar-hero::after{content:"";position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:4px 4px}
.hero .wrap,.pillar-hero .wrap{position:relative;z-index:1}
.hero h1,.pillar-hero h1{color:#fff;max-width:17ch;font-size:clamp(2.4rem,5.4vw,4rem)}
.hero .lead,.pillar-hero .lead{font-size:clamp(1.12rem,1.9vw,1.4rem);max-width:52ch;
  color:#cdd0c4;margin:1.4rem 0 2.2rem}
.hero .accent,.pillar-hero .accent{color:var(--accent-hero);font-style:italic}
.hero .cta,.pillar-hero .cta{display:flex;gap:.9rem;flex-wrap:wrap}
.pillar-hero .eyebrow{color:var(--green-soft)}
.pillar-hero .eyebrow::before{background:var(--gold-soft)}

/* sections */
.section{padding-block:clamp(3.5rem,7vw,6rem)}
.section-tint{background:var(--paper-2)}
.section-dark{background:var(--ink);color:#e9eae0}
.section-head{max-width:60ch;margin-bottom:2.6rem}
.section-head.center{margin-inline:auto;text-align:center}
.section-dark h2{color:#fff}

/* feature / fork cards */
.cards{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.card,.fork{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:1.9rem 1.7rem;transition:.2s;overflow:hidden}
.card::before,.fork::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--green),var(--gold))}
.card:hover,.fork:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.card h3,.fork h3{font-size:1.3rem;margin:.2rem 0 .6rem;color:var(--ink)}
.card p,.fork p{color:var(--muted);margin-bottom:1rem}
.card .more,.fork a{font-weight:600;font-size:.93rem;color:var(--green-deep)}
.forks{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}

/* stat strip */
.stats{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.stat{text-align:center;padding:1.2rem .6rem}
.stat .num{font-family:var(--serif);font-size:clamp(1.55rem,2.6vw,2.2rem);font-weight:700;
  color:var(--green);line-height:1.08;hyphens:none;overflow-wrap:break-word;text-wrap:balance}
.section-dark .stat .num{color:var(--green-soft)}
.stat .label{display:block;margin-top:.5rem;font-size:.92rem;color:var(--muted);letter-spacing:.01em}
.section-dark .stat .label{color:#b9bbac}

/* process steps */
.steps{counter-reset:step;display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.step{position:relative;padding-top:.4rem}
.step .n{font-family:var(--serif);font-size:1.05rem;font-weight:700;color:#fff;background:var(--green);
  width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;margin-bottom:.9rem}
.step h3{font-size:1.12rem;margin:0 0 .4rem}
.step p{color:var(--muted);font-size:.97rem;margin:0}

/* pull quote */
.pullquote{font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.35;
  color:var(--ink);max-width:24ch;border-left:3px solid var(--gold);padding-left:1.4rem}

/* CTA band */
.cta-band{position:relative;overflow:hidden;background:var(--ink);color:#fff;
  padding:clamp(3rem,6vw,4.5rem) 0;text-align:center}
.cta-band::before{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 120% at 50% 0%,rgba(65,171,93,.4),transparent 60%)}
.cta-band .wrap{position:relative}
.cta-band h2{color:#fff;margin:0 auto 1.4rem;max-width:20ch}

/* lender / trust strip */
.trust{display:flex;flex-wrap:wrap;gap:.7rem 1.8rem;align-items:center;justify-content:center;
  color:var(--muted);font-size:.88rem}
.trust .pill{border:1px solid var(--line);border-radius:999px;padding:.45rem 1rem;background:#fff}

/* footer */
.site-footer{background:var(--ink);color:#b9bbac;padding:clamp(3rem,6vw,4.5rem) 0 2rem;font-size:.93rem}
.site-footer h4{font-family:var(--sans);font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;
  color:#fff;margin:0 0 .9rem}
.site-footer a{color:#cdd0c4}.site-footer a:hover{color:#fff}
.site-footer a.btn-light,.site-footer a.btn-light:hover{color:var(--green-deep)}
.foot-grid{display:grid;gap:2rem;grid-template-columns:1.4fr repeat(3,1fr)}
.foot-grid ul{list-style:none;margin:0;padding:0}.foot-grid li{margin:.45rem 0}
.legal{border-top:1px solid var(--line-dark);margin-top:2.4rem;padding-top:1.4rem;color:#8a8c7e;font-size:.82rem}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}

/* ===== pillar pages ===== */
.pillar-body{display:grid;grid-template-columns:minmax(0,1fr) 19rem;gap:3.2rem;
  padding-block:clamp(3rem,6vw,4.5rem);align-items:start}
.pillar-prose{max-width:var(--measure)}
.pillar-prose h2{margin:2.6rem 0 .8rem}
.pillar-prose p{margin-bottom:1.2rem}
.pillar-section{scroll-margin-top:6rem}
.pillar-related{position:sticky;top:6rem;border:1px solid var(--line);border-radius:var(--r);
  padding:1.5rem;background:var(--paper-2)}
.pillar-related h2{margin:0 0 .7rem;font-size:1.1rem}
.pillar-related ul{list-style:none;margin:0 0 1.3rem;padding:0}
.pillar-related li{margin:.5rem 0}
.pillar-related li a{font-weight:500}
@media(max-width:860px){.pillar-body{grid-template-columns:1fr}.pillar-related{position:static}}

/* ===== article / content pages ===== */
.article-head{background:var(--paper-2);border-bottom:1px solid var(--line);
  padding:clamp(2.6rem,5vw,3.6rem) 0 clamp(2.2rem,4vw,2.8rem)}
.article-head h1{max-width:22ch;font-size:clamp(2rem,4vw,3rem)}
.article-body{padding-block:clamp(2.6rem,5vw,3.6rem)}
.prose{max-width:var(--measure)}
.prose>p:first-of-type{font-size:1.18rem;color:var(--ink);line-height:1.6}
.prose h2{font-size:1.6rem;margin:2.8rem 0 .8rem}
.prose h3{font-size:1.24rem;margin:2rem 0 .6rem;color:var(--green-deep)}
.prose h4{font-size:1.06rem;margin:1.7rem 0 .5rem;font-family:var(--sans);font-weight:700;color:var(--ink)}
.prose ul,.prose ol{margin:0 0 1.3rem;padding-left:1.3rem}
.prose li{margin:.45rem 0}.prose li::marker{color:var(--green)}
.prose a{color:var(--green-deep);text-decoration:underline;text-underline-offset:2px}
.prose a.btn{color:#fff;text-decoration:none}
.prose a.btn:hover{color:#fff}
.prose a.btn-light{color:var(--green-deep)}
.prose a.btn-ghost{color:var(--ink)}.prose a.btn-ghost:hover{color:#fff}
.prose blockquote{margin:1.7rem 0;padding:.7rem 1.3rem;border-left:3px solid var(--gold);
  background:var(--paper-2);color:var(--ink);font-family:var(--serif);font-style:italic;font-size:1.1rem}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.6rem 0}
.prose table{border-collapse:collapse;width:100%;font-size:.95rem;margin:1.7rem 0;display:block;overflow-x:auto}
.prose thead th{background:var(--ink);color:#fff;text-align:left;font-weight:600;white-space:nowrap}
.prose th,.prose td{border:1px solid var(--line);padding:.65rem .85rem;vertical-align:top}
.prose tbody tr:nth-child(even){background:var(--paper-2)}
.article-aside{margin-top:2.8rem;padding:1.6rem 1.8rem;border-radius:var(--r);
  background:var(--ink);color:#e9eae0}
.article-aside strong{color:#fff;font-size:1.05rem}
.article-aside .btn{margin-top:.9rem}

/* related guides (shared FAQ index, injected via template) */
.related-guides{margin-top:3rem;border-top:1px solid var(--line);padding-top:2rem}
.related-guides h2{font-size:1.4rem;margin:0 0 1.2rem}
.guide-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.guide-card{display:flex;flex-direction:column;gap:.4rem;padding:1.1rem 1.2rem;border:1px solid var(--line);
  border-radius:var(--r);background:var(--paper-2);text-decoration:none;transition:.18s}
.guide-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent;text-decoration:none}
.guide-card .q{font-family:var(--serif);font-weight:700;color:var(--ink);font-size:1.04rem;line-height:1.25}
.guide-card .ex{color:var(--muted);font-size:.9rem;line-height:1.45}
.guide-card .more{color:var(--green-deep);font-weight:600;font-size:.85rem;margin-top:.2rem}

/* coming-soon / static-SEO notices */
.calculator-soon,.widget-soon{margin:2rem 0;padding:1.2rem 1.4rem;border-left:3px solid var(--gold);
  background:var(--paper-2);border-radius:0 var(--r) var(--r) 0}

/* ===== contact ===== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.contact-prose{max-width:50ch}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
.lead-form{display:grid;gap:1rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.8rem}
.lead-form label{display:grid;gap:.35rem;font-weight:600;font-size:.93rem}
.lead-form input,.lead-form textarea{font:inherit;padding:.75rem .85rem;border:1px solid #cccdc2;
  border-radius:9px;background:#fff;color:var(--text);width:100%}
.lead-form input:focus,.lead-form textarea:focus{outline:2px solid var(--green);border-color:var(--green)}
.form-note{font-size:.82rem;color:var(--muted);margin:.2rem 0 0}
.book-alt{margin-top:1rem;font-size:.95rem}

@media(max-width:760px){
  /* Mobile: collapsible hamburger menu. CLOSED by default so it never covers
     the page; opens as a height-capped scroll panel under the brand row.
     (Replaces the old always-open full nav tree that obscured the viewport.) */
  .site-header .wrap{flex-wrap:wrap;padding-block:.7rem;min-height:0;gap:.6rem}
  .site-header .brand span{font-size:1.4rem}

  /* hamburger button */
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;
    margin-left:auto;width:44px;height:44px;padding:0;cursor:pointer;
    border:1px solid var(--line);border-radius:10px;background:var(--paper)}
  .nav-toggle-bars{position:relative;display:block;width:22px;height:2px;
    background:var(--ink);border-radius:2px;transition:background .15s ease}
  .nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;
    left:0;width:22px;height:2px;background:var(--ink);border-radius:2px;
    transition:transform .2s ease}
  .nav-toggle-bars::before{top:-7px}
  .nav-toggle-bars::after{top:7px}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translateY(-7px) rotate(-45deg)}

  /* nav panel — hidden until toggled open */
  .nav{display:none;order:3;width:100%;flex-direction:column;align-items:stretch;
    gap:0;font-size:1rem;flex-wrap:nowrap;margin-top:.5rem;border-top:1px solid var(--line);
    max-height:calc(100vh - 86px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .nav.is-open{display:flex}
  .nav>a{display:block;padding:.85rem .2rem;font-size:1rem;border-bottom:1px solid var(--line)}

  /* parent row: link + caret on one line, submenu on the next */
  .nav .has-children{position:static;display:grid;grid-template-columns:1fr auto;align-items:center}
  .nav .has-children>a{display:block;padding:.85rem .2rem;font-size:1rem;border-bottom:1px solid var(--line)}
  .submenu-toggle{display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;padding:0;cursor:pointer;background:transparent;border:0;
    border-bottom:1px solid var(--line)}
  .submenu-toggle span{display:block;width:9px;height:9px;margin-top:-3px;
    border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
    transform:rotate(45deg);transition:transform .2s ease}
  .submenu-toggle[aria-expanded="true"] span{margin-top:3px;transform:rotate(-135deg)}

  /* submenu collapsed until its parent is opened */
  .nav .submenu{grid-column:1 / -1;display:none;position:static;transform:none;
    box-shadow:none;border:0;min-width:0;padding:.2rem 0 .5rem .9rem;background:transparent}
  .nav .has-children.is-open .submenu{display:block}
  .nav .submenu a{padding:.6rem 0}
  .nav .btn{display:none}
}

/* ============================================================
   Calculator widget — interactive vanilla-JS tools (Phase 2)
   ============================================================ */
.calc{margin:2rem 0;border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper-2);box-shadow:var(--shadow);overflow:hidden}
.calc-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.1rem 1.4rem;padding:1.6rem 1.6rem 1.4rem}
.calc-field{display:grid;gap:.4rem;align-content:start}
.calc-field label{font-weight:600;font-size:.9rem;color:var(--ink)}
.calc-inputwrap{display:flex;align-items:stretch;border:1px solid #cccdc2;
  border-radius:9px;background:#fff;overflow:hidden}
.calc-inputwrap:focus-within{outline:2px solid var(--green);border-color:var(--green)}
.calc-affix{display:flex;align-items:center;padding:0 .7rem;background:var(--paper-3);
  color:var(--muted);font-size:.9rem;font-weight:600}
.calc-affix-r{border-left:1px solid var(--line)}
.calc-input{font:inherit;padding:.7rem .8rem;border:0;background:transparent;
  color:var(--text);width:100%;min-width:0}
.calc-inputwrap .calc-input{border:0}
select.calc-input{border:1px solid #cccdc2;border-radius:9px;background:#fff;
  padding:.7rem .8rem;appearance:auto}
.calc-input:focus{outline:none}
select.calc-input:focus{outline:2px solid var(--green);border-color:var(--green)}
.calc-hint{font-size:.8rem;color:var(--muted);margin:0}
.calc-results{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1rem;padding:0 1.6rem 1.6rem}
.calc-result{background:#fff;border:1px solid var(--line);border-radius:11px;padding:1rem 1.1rem}
.calc-result-primary{background:var(--green-700);border-color:var(--green-700)}
.calc-result-label{font-size:.82rem;font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;color:var(--muted)}
.calc-result-primary .calc-result-label{color:var(--green-soft)}
.calc-result-value{font-family:var(--serif);font-size:1.7rem;line-height:1.1;
  color:var(--ink);margin-top:.25rem}
.calc-result-primary .calc-result-value{color:#fff}
.calc-result-hint{font-size:.82rem;color:var(--muted);margin-top:.3rem}
.calc-result-primary .calc-result-hint{color:var(--green-200)}
.calc-note{grid-column:1/-1;font-size:.86rem;color:var(--muted);margin:.2rem 0 0}
.calc-disclaimer{grid-column:1/-1;font-size:.76rem;line-height:1.5;color:var(--muted);
  margin:.4rem 0 0;padding-top:.7rem;border-top:1px solid var(--line)}
@media(max-width:560px){.calc-form,.calc-results{grid-template-columns:1fr}}
/* Honeypot anti-spam field — kept in the DOM but removed from view and a11y tree */
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}

/* SBP opt-in form */
.optin{display:flex;flex-direction:column;gap:.7rem;max-width:34rem}
.optin input[type=email]{padding:.7rem .9rem;border:1px solid #c3c5ba;border-radius:.5rem;font:inherit}
.optin .sr-label{display:flex;flex-direction:column;gap:.3rem;font-size:.9rem}

/* SBP opt-in: guarantee note (on dark hero) + page compliance line */
.guarantee{margin-top:1rem;font-size:.92rem;color:var(--green-soft);max-width:46ch}
.compliance{max-width:var(--measure);margin-top:2rem;font-size:.82rem;color:var(--muted)}