/* calculator.css — "The Value of a Match" interactive research pages.
   Loaded by head.html only for pages with `calculator: true` in front matter:
   the landing page, The State Math, and Your Household Math.

   WHY EVERY SELECTOR IS PREFIXED WITH .article-body
   -------------------------------------------------
   These pages render inside <article class="article-body">, where blog.css already
   styles p, h2, h3 and the callout/tldr blocks at specificity (0,1,1). A bare
   .hsc-verdict is only (0,1,0), so the site rule would win and silently flatten the
   calculator typography. That is the same class of bug the calculator HANDOFF logs
   three separate times (invisible plum-on-plum CTA text, shrunken stat tiles,
   wrong-colored fork-card eyebrows) back when everything shared one <style> block
   and source order was enough. Prefixing lifts every rule to (0,2,0), which beats
   the site element rules for good.

   RULE FOR FUTURE EDITS: any new typographic element on these pages needs an
   .article-body-scoped selector. Never add a bare .hsc-* rule to this file.

   Site-owned selectors are deliberately NOT redefined here, so the calculator pages
   match the other research pages exactly: :root and .btn* from main.css; the
   .article-body base type, .callout, and .lead from blog.css; .paper-hero*, .tldr,
   .appendix, .appendix-table, .action-bar, and .cite-line from head-research.html.

   Assembled from the three preview files' <style> blocks. Where a selector was
   defined more than once the first definition wins (landing, then state, then
   household). One real difference was collapsed: .hsc-state-hint had margin-top 6px
   on the landing and state pages and 2px on the household page; 6px everywhere now.
*/

/* The only unscoped rule in this file. The landing page's Cite This Research button
   is an in-page #cite anchor and needs smooth scrolling; the site CSS does not set
   it globally, and it cannot be scoped to .article-body because scroll-behavior is
   read off the scrolling element. */
html{scroll-behavior:smooth}

/* Sage tints used by the household calculator. main.css carries --sage but not
   these two derivatives. */
.article-body{--soft-sage:#eef2e7;--sage-dark:#5f7549}

/* Article links, matching the other research pages. The a.hsc-btn override further
   down is what keeps CTA button text white against this. */
.article-body a{color:var(--plum);font-weight:700}

/* Sage callout variant. The site callout bar reads var(--accent), which
   research/single.html sets to coral via body[data-accent], so the variant has to
   re-point --accent rather than restyle the bar. */
.article-body .callout--sage{--accent:var(--sage);background-color:var(--soft-sage)}
.article-body .callout--sage p{color:var(--sage-dark)}


/* ── SHARED + LANDING PAGE ─────────────────────────── */
.article-body .hso-breakout{width:min(1060px,calc(100vw - 40px));position:relative;left:50%;transform:translateX(-50%);margin:40px 0}
.article-body .hso-lead{font-size:19px;line-height:1.7}
.article-body .hso-lead strong{color:var(--plum)}
.article-body .hso-em{color:var(--coral);font-weight:800}
.article-body .hsc-panel{position:relative;background:#fff;border-top:5px solid var(--coral);border-radius:14px;box-shadow:0 4px 24px rgba(0,0,0,.07);padding:36px 28px 30px}
.article-body .hsc-panel--plum{border-top-color:var(--plum)}
.article-body .hsc-panel--sage{border-top-color:var(--sage)}
.article-body .hsc-panel--magenta{border-top-color:var(--magenta)}
.article-body .hsc-panel--peach{background:var(--warm-peach);box-shadow:none;padding:30px 40px}
.article-body .hsc-tag{position:absolute;top:-14px;left:32px;background:var(--coral);color:#fff;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 14px;border-radius:99px}
.article-body .hsc-tag--plum{background:var(--plum)}
.article-body .hsc-tag--sage{background:var(--sage)}
.article-body .hsc-tag--magenta{background:var(--magenta)}
.article-body .hsc-controls{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:20px}
.article-body .hsc-state-wrap{display:flex;align-items:center;gap:8px}
.article-body .hsc-state-label{font-size:13px;font-weight:800;color:var(--plum);text-transform:uppercase;letter-spacing:.06em}
.article-body select.hsc-state{font-family:inherit;font-size:16px;font-weight:800;color:var(--coral);border:2px solid var(--plum);border-radius:10px;padding:9px 44px 9px 16px;cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23713357' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 14px center;background-size:15px}
.article-body .hsc-state-hint{flex-basis:100%;font-size:12px;color:#8a7a6d;margin:6px 0 0;line-height:1.5}
.article-body select.hsc-state:focus-visible{outline:2px solid #9c3d12;outline-offset:2px}
.article-body .hsc-toggles{display:flex;flex-wrap:wrap;gap:8px}
.article-body .hsc-toggle{font-family:inherit;font-size:13px;font-weight:700;color:var(--plum);background:#fff;border:2px solid var(--plum);border-radius:9999px;padding:8px 16px;cursor:pointer;transition:all .15s}
.article-body .hsc-toggle:hover{background:var(--warm-peach)}
.article-body .hsc-toggle.is-active{background:var(--plum);color:#fff}
.article-body .hsc-toggle:focus-visible{outline:2px solid #9c3d12;outline-offset:2px}
.article-body .hsc-toggle--sage{color:var(--sage-dark);border-color:var(--sage)}
.article-body .hsc-toggle--sage:hover{background:var(--soft-sage)}
.article-body .hsc-toggle--sage.is-active{background:var(--sage);color:#fff}
.article-body .hsc-grid{display:grid;grid-template-columns:320px 1fr;gap:28px;align-items:start}
.article-body .hsc-sliders{background:var(--warm-peach);border-radius:10px;padding:20px 20px 8px}
.article-body .hsc-sliders--sage{background:var(--soft-sage)}
.article-body .hsc-sliders--white{background:#fff}
.article-body .hsc-slider-group{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font-size:11px;font-weight:800;color:var(--plum);text-transform:uppercase;letter-spacing:1.2px;margin:14px 0 8px}
.article-body .hsc-slider-group:first-child{margin-top:0}
.article-body .hsc-slider-block{margin-bottom:16px}
.article-body .hsc-slider-label{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;font-weight:700;color:var(--dark-gray);margin-bottom:5px}
.article-body .hsc-slider-val{font-weight:800;color:var(--plum);white-space:nowrap;font-variant-numeric:tabular-nums}
.article-body .hsc-slider-note{font-size:11.5px;color:#8a7a6d;margin:3px 0 0;line-height:1.45}
.article-body input[type=range].hsc-range{width:100%;accent-color:var(--coral);cursor:pointer}
.article-body input[type=range].hsc-range--sage{accent-color:var(--sage)}
.article-body input[type=range].hsc-range:focus-visible{outline:2px solid #9c3d12;outline-offset:2px}
.article-body .hsc-out{min-width:0}
.article-body .hsc-stats{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:22px}
/* Each tile is its own query container so the big number sizes off the TILE, not the viewport.
   Sizing off vw was the bug: three tiles inside a panel inside the article column stay narrow
   even on a wide screen, so a long figure like +$10,800 or $842,688 ran past the card edge.
   The cqi factors below are measured, not guessed: the widest strings the calculators can
   produce need 17.5cqi (plain) and 17.8cqi (big) to fit, so 16.5cqi carries a safety margin. */
.article-body .hsc-stat{flex:1;min-width:150px;background:#fff;border-top:6px solid var(--coral);border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.09);padding:20px 18px 16px;text-align:center;container-type:inline-size}
.article-body .hsc-stat-eyebrow{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--coral);margin:0 0 8px;line-height:1.35}
.article-body .hsc-stat-num{display:block;font-size:clamp(20px,16.5cqi,38px);font-weight:800;color:var(--coral);line-height:1.05}
.article-body .hsc-stat-num--text{font-size:clamp(17px,13cqi,29px);padding-top:5px}
.article-body .hsc-stats--big .hsc-stat-num{font-size:clamp(22px,16.5cqi,44px)}
.article-body .hsc-stat-cap{display:block;font-size:12px;font-weight:700;color:#77685c;text-transform:none;letter-spacing:0;margin-top:8px;line-height:1.45}
.article-body .hsc-stat-sub{display:block;font-size:11.5px;font-weight:600;color:#8a7a6d;margin-top:7px;line-height:1.45;border-top:1px solid var(--border);padding-top:7px}
.article-body .hsc-stat--plum{border-top-color:var(--plum)}
.article-body .hsc-stat--plum .hsc-stat-eyebrow,.article-body .hsc-stat--plum .hsc-stat-num{color:var(--plum)}
.article-body .hsc-stat--magenta{border-top-color:var(--magenta)}
.article-body .hsc-stat--magenta .hsc-stat-eyebrow,.article-body .hsc-stat--magenta .hsc-stat-num{color:var(--magenta)}
.article-body .hsc-stat--sage{border-top-color:var(--sage)}
.article-body .hsc-stat--sage .hsc-stat-eyebrow,.article-body .hsc-stat--sage .hsc-stat-num{color:var(--sage-dark)}
.article-body .hsc-stat--ep .hsc-stat-eyebrow{color:var(--plum)}
.article-body .hsc-block-label{font-size:11px;font-weight:800;color:var(--coral);text-transform:uppercase;letter-spacing:1.5px;margin:22px 0 8px}
.article-body .hsc-block-label--sage{color:var(--sage-dark)}
.article-body .hsc-bars{margin:0 0 6px}
.article-body .hsc-bar-row{margin-bottom:12px}
.article-body .hsc-bar-head{display:flex;justify-content:space-between;font-size:13px;font-weight:700;color:var(--dark-gray);margin-bottom:4px}
.article-body .hsc-bar-head .hsc-bar-num{font-weight:800;color:var(--plum);font-variant-numeric:tabular-nums}
.article-body .hsc-track{position:relative;height:16px;background:#f1e7dc;border-radius:9999px;overflow:hidden}
.article-body .hsc-fill{position:absolute;left:0;top:0;bottom:0;border-radius:9999px;background:#c9a9bb;transition:width .2s}
.article-body .hsc-fill--after{background:var(--sage)}
.article-body .hsc-ei-line{position:absolute;top:-4px;bottom:-4px;width:0;border-left:3px dashed var(--plum)}
.article-body .hsc-ei-caption{font-size:12px;color:#777;margin:2px 0 0}
.article-body .hsc-verdict{font-size:15px;line-height:1.65;margin:10px 0 0;color:var(--dark-gray)}
.article-body .hsc-verdict strong{color:var(--plum)}
.article-body .hsc-verdict .up{color:var(--sage-dark);font-weight:800}
.article-body .hsc-verdict .up--coral{color:var(--coral);font-weight:800}
.article-body .hsc-rows{border-top:1px solid var(--border);margin-top:8px}
.article-body .hsc-row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--border);font-size:14.5px;color:var(--dark-gray);line-height:1.55}
.article-body .hsc-row-val{font-weight:800;color:var(--plum);white-space:nowrap;font-variant-numeric:tabular-nums}
.article-body .hsc-chips{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 4px}
.article-body .hsc-chip{background:var(--soft-sage);color:var(--sage-dark);font-size:14px;font-weight:800;border-radius:9999px;padding:9px 17px}
.article-body .hsc-chip--peach{background:var(--warm-peach);color:var(--plum)}
.article-body .hsc-chips-cap{font-size:12px;color:#777;margin:0 0 4px}
.article-body .hsc-note{font-size:12.5px;color:#777;line-height:1.55;margin:16px 0 0;padding-top:12px;border-top:1px solid var(--border)}
.article-body .hsc-cta{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between}
.article-body .hsc-cta a{text-decoration:none;font-weight:800;font-size:15px}
.article-body .hsc-cta a:hover{text-decoration:underline}
.article-body .hsc-cta .cta-plum{color:var(--plum)}
.article-body .hsc-cta .cta-coral{color:var(--coral)}
.article-body .hsc-cta .cta-sage{color:var(--sage-dark)}
.article-body .hsc-programs{background:#fff;border-radius:10px;padding:18px 22px 14px;margin:20px 0 0}
.article-body .hsc-programs h3{font-size:16px;font-weight:800;color:var(--plum);margin:0 0 10px}
.article-body .hsc-programs ul{list-style:none;margin:0;padding:0}
.article-body .hsc-programs li{font-size:14px;line-height:1.6;color:var(--dark-gray);margin-bottom:9px;padding-left:18px;position:relative}
.article-body .hsc-programs li::before{content:'';position:absolute;left:0;top:10px;width:10px;height:2px;border-radius:99px;background:var(--plum)}
.article-body .hsc-programs li strong{color:var(--plum)}
.article-body .hsc-programs .hsc-programs-note{font-size:12.5px;color:#777;margin:10px 0 0;line-height:1.5}
.article-body .hso-tiles{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
.article-body .hso-tile{background:#fff;border-top:5px solid var(--coral);border-radius:14px;box-shadow:0 4px 24px rgba(0,0,0,.07);padding:32px 30px}
.article-body .hso-tile--plum{border-top-color:var(--plum)}
.article-body .hso-tile--sage{border-top-color:var(--sage)}
.article-body .hso-tiles .hso-tile h2{font-size:24px;font-weight:800;color:var(--plum);margin:0 0 14px;line-height:1.2}
.article-body .hso-tile p{font-size:15px;line-height:1.7;color:var(--dark-gray);margin:0 0 14px}
.article-body .hso-tile ul{list-style:none;margin:0;padding:0}
.article-body .hso-tile ul li{font-size:15px;line-height:1.7;color:var(--dark-gray);margin-bottom:12px;padding-left:18px;position:relative}
.article-body .hso-tile ul li:last-child{margin-bottom:0}
.article-body .hso-tile ul li::before{content:'';position:absolute;left:0;top:11px;width:10px;height:2px;border-radius:99px;background:var(--plum)}
.article-body .hso-tile ul li strong{color:var(--plum)}
.article-body .hso-tile--coral ul li::before{background:var(--coral)}
.article-body .hso-tile--coral ul li strong{color:var(--coral)}
.article-body .hso-tile--sage ul li::before{background:var(--sage)}
.article-body .hso-tile--sage ul li strong{color:var(--sage-dark)}
.article-body .hsc-ripple-title{font-size:30px;font-weight:800;color:var(--plum);margin:0 0 6px;line-height:1.15}
.article-body .hsc-ripple-title .accent-coral{color:var(--coral);display:block}
.article-body .hsc-ripple-desc{font-size:15px;line-height:1.7;color:var(--dark-gray);max-width:860px;margin:0 0 18px}
.article-body .hsc-fork{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.article-body .hsc-fork-card{position:relative;background:#fff;border-top:5px solid var(--plum);border-radius:14px;box-shadow:0 4px 24px rgba(0,0,0,.07);padding:36px 30px 28px;display:flex;flex-direction:column}
.article-body .hsc-fork-card--sage{border-top-color:var(--sage)}
.article-body .hsc-fork-card h2{font-size:26px;font-weight:800;color:var(--plum);margin:0 0 10px;line-height:1.2}
.article-body .hsc-fork-card p{font-size:15px;line-height:1.7;color:var(--dark-gray);margin:0 0 16px;flex:1}
.article-body .hsc-fork-eyebrow{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--coral);margin:0 0 8px}
.article-body .hsc-fork-eyebrow--sage{color:var(--sage-dark)}
.article-body .hsc-btn{display:inline-block;text-decoration:none;font-weight:800;font-size:15px;border-radius:9999px;padding:12px 26px;text-align:center}
.article-body .hsc-btn--plum{background:var(--plum);color:#fff}
.article-body .hsc-btn--sage{background:var(--sage);color:#fff}
.article-body .hsc-btn:hover{opacity:.92}
@media (max-width:860px){.article-body .hsc-grid{grid-template-columns:1fr}.article-body .hsc-fork{grid-template-columns:1fr}}
@media (max-width:768px){.article-body .hso-tiles{grid-template-columns:1fr}}
@media (max-width:640px){.article-body .hsc-panel{padding:30px 14px 22px}.article-body .hsc-panel--peach{padding:26px 18px 24px}.article-body .hsc-tag{left:20px}.article-body .hsc-ripple-title{font-size:24px}}
.article-body .hsc-focus-eyebrow{text-align:center;font-size:13px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--magenta);margin:52px 0 20px}
.article-body .hsc-focus-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.article-body .hsc-focus-card{background:#fff;border-radius:14px;box-shadow:0 4px 22px rgba(0,0,0,.07);padding:28px 24px 22px;text-align:center}
.article-body .hsc-focus-icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;margin-bottom:14px}
.article-body .hsc-focus-icon svg{width:26px;height:26px}
.article-body .hsc-focus-icon.i-coral{background:var(--warm-peach);color:var(--coral)}
.article-body .hsc-focus-icon.i-plum{background:#f2e8ee;color:var(--plum)}
.article-body .hsc-focus-icon.i-magenta{background:#fbe6f3;color:var(--magenta)}
.article-body .hsc-focus-icon.i-sage{background:var(--soft-sage);color:var(--sage-dark)}
.article-body p.hsc-focus-title{font-size:16px;font-weight:800;color:var(--plum);margin:0 0 8px;line-height:1.3}
.article-body p.hsc-focus-desc{font-size:13.5px;line-height:1.65;color:var(--dark-gray);margin:0}
@media (max-width:960px){.article-body .hsc-focus-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.article-body .hsc-focus-grid{grid-template-columns:1fr}}
.article-body .hsc-band{background:var(--plum);border-radius:14px;padding:30px 40px;text-align:center}
.article-body .hsc-band p{color:#fff;font-size:17px;line-height:1.75;margin:0 auto;max-width:900px}
.article-body .hsc-band strong{color:var(--coral)}
.article-body .hsc-numbers-title{text-align:center;font-size:34px;font-weight:800;line-height:1.2;color:var(--plum);margin:44px 0 10px}
.article-body .hsc-numbers-title .accent{color:var(--coral)}
.article-body .hsc-numbers-kicker{text-align:center;font-size:15px;color:var(--dark-gray);max-width:640px;margin:0 auto 6px}
.article-body .hsc-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.article-body .hsc-why-card{background:#fff;border-top:6px solid var(--coral);border-radius:14px;box-shadow:0 4px 22px rgba(0,0,0,.07);padding:26px 26px 20px;display:flex;flex-direction:column}
.article-body .hsc-why-eyebrow{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--plum);margin:0 0 12px}
.article-body .hsc-why-stat{font-size:clamp(38px,4.5vw,54px);font-weight:800;color:var(--coral);line-height:1;margin:0 0 14px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.article-body .hsc-why-stat .hsc-why-per{font-size:.42em;letter-spacing:0}
.article-body .hsc-why-desc{font-size:15px;line-height:1.7;font-weight:400;color:var(--dark-gray);flex:1;margin:0 0 14px}
.article-body .hsc-why-source{font-size:11px;color:#888;font-style:italic;line-height:1.5;margin:0}
.article-body .hsc-why-card.t-plum{border-top-color:var(--plum)}
.article-body .hsc-why-card.t-plum .hsc-why-stat{color:var(--plum)}
.article-body .hsc-why-card.t-magenta{border-top-color:var(--magenta)}
.article-body .hsc-why-card.t-magenta .hsc-why-stat{color:var(--magenta)}
.article-body .hsc-why-card.t-sage{border-top-color:var(--sage)}
.article-body .hsc-why-card.t-sage .hsc-why-stat{color:var(--sage-dark)}
@media (max-width:960px){.article-body .hsc-why-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.article-body .hsc-why-grid{grid-template-columns:1fr}}
.article-body .hsc-h2-stack{text-align:center;font-size:34px;font-weight:800;line-height:1.2;color:var(--plum);margin:52px 0 18px}
.article-body .hsc-h2-stack .line2{display:block;color:var(--coral)}
.article-body .hsc-fork-card p.hsc-fork-eyebrow{color:var(--coral);flex:0 0 auto;font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;margin:0 0 8px}
.article-body .hsc-fork-body{flex:1}
.article-body .hsc-fork-card .hsc-fork-body p{flex:none;margin:0 0 16px}
.article-body .hsc-who{margin:0 0 16px;min-height:88px}
.article-body .hsc-who-label{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--coral);margin:0 0 5px}
.article-body .hsc-who p{font-size:13.5px;line-height:1.6;color:var(--dark-gray);margin:0}
.article-body .hsc-fork-thumb{display:block;width:100%;border:2px solid #e0d8d2;border-radius:10px;margin:18px 0 0;overflow:hidden}
.article-body .hsc-fork-thumb img{display:block;width:100%;height:auto}
.article-body a.hsc-btn{color:#fff}
.article-body a.hsc-btn:hover{opacity:.92;text-decoration:none}
.article-body details.tldr summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px}
.article-body details.tldr summary::-webkit-details-marker{display:none}
.article-body details.tldr summary .tldr-label{margin:0}
.article-body details.tldr summary .tldr-hint{font-size:12px;color:#8a7a6d;font-weight:700}
.article-body details.tldr[open] summary{margin-bottom:8px}
.article-body details.tldr[open] summary .tldr-hint .closed{display:none}
.article-body details.tldr:not([open]) summary .tldr-hint .opened{display:none}
.article-body .hsc-cites{font-size:13px;color:#666;line-height:1.7;margin:0 0 18px;padding-left:20px}
.article-body .hsc-cites li{margin-bottom:4px}
.article-body p.hsc-why-eyebrow{font-size:11px;line-height:1.4;margin:0 0 12px}
.article-body p.hsc-why-stat{font-size:clamp(38px,4.5vw,54px);line-height:1;margin:0 0 14px}
.article-body p.hsc-why-desc{font-size:15px;line-height:1.7;margin:0 0 14px}
.article-body p.hsc-why-source{font-size:11px;line-height:1.5;margin:0}
.article-body p.hsc-fork-eyebrow{font-size:11px;line-height:1.4;margin:0 0 8px}
.article-body p.hsc-who-label{font-size:11px;line-height:1.4;margin:0 0 5px}
.article-body p.hsc-numbers-kicker{font-size:15px;line-height:1.6}
.article-body details.hsc-appendix{background:#fafafa;border-radius:8px;margin-top:48px}
.article-body details.hsc-appendix summary{cursor:pointer;list-style:none;padding:22px 32px}
.article-body .hsc-appendix-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap}
.article-body .hsc-appendix-intro{display:block;font-size:15px;line-height:1.7;color:var(--dark-gray);margin-top:10px;font-weight:400}
.article-body details.hsc-appendix summary::-webkit-details-marker{display:none}
.article-body .hsc-appendix-title{font-size:19px;font-weight:800;color:var(--plum)}
.article-body .hsc-appendix-hint{font-size:13px;font-weight:800;color:var(--coral);text-transform:uppercase;letter-spacing:.06em}
.article-body .hsc-appendix-hint .close-hint{display:none}
.article-body details.hsc-appendix[open] .hsc-appendix-hint .open-hint{display:none}
.article-body details.hsc-appendix[open] .hsc-appendix-hint .close-hint{display:inline}
.article-body .hsc-appendix-body{padding:0 32px 28px}

/* ── THE STATE MATH — page-specific additions ─────────────────────────── */
.article-body .hsc-toolkit-head{font-size:18px;font-weight:800;color:var(--plum);margin:28px 0 2px}
.article-body .hsc-toolkit-sub{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--coral);margin:18px 0 4px}
.article-body .hsc-src{font-size:12px;font-weight:600;color:#9a9a9a}
.article-body .hsc-cost-callout{background:var(--warm-peach);border-left:4px solid var(--coral);border-radius:0 8px 8px 0;padding:16px 20px;margin:20px 0 0;font-size:15.5px;line-height:1.65;font-weight:700;color:var(--plum)}
.article-body .hsc-ripple-desc strong{color:var(--plum);font-weight:800}
.article-body .hsc-row--sage span{color:var(--sage-dark)}
.article-body .hsc-row--sage .hsc-row-val{color:var(--sage-dark)}
.article-body .hsc-toolkit-note{font-size:14.5px;line-height:1.65;color:var(--dark-gray);margin:0 0 6px}
.article-body .hsc-ei-beds{font-size:19px;line-height:1.55;font-weight:700;text-align:center;color:var(--sage-dark);background:var(--soft-sage);border-radius:10px;padding:16px 20px;margin:18px 0 0}
.article-body p.hsc-ei-beds{font-size:19px;line-height:1.55;margin:18px 0 0}
.article-body .hsc-roi{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;background:#fff;border:3px solid var(--magenta);border-radius:14px;padding:24px 30px;margin:6px 0 16px;text-align:center}
.article-body .hsc-roi-num{display:block;font-size:clamp(24px,3vw,34px);font-weight:800;color:var(--dark-gray);line-height:1}
.article-body .hsc-roi-num--big{font-size:clamp(36px,5vw,58px);color:var(--magenta)}
.article-body .hsc-roi-label{display:block;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#77685c;margin-top:8px}
.article-body .hsc-roi-arrow{font-size:34px;font-weight:800;color:var(--magenta)}
.article-body .hsc-ripple-title .accent-magenta{color:var(--magenta);display:block}
.article-body .hsc-btn--outline-plum{background:#fff;color:var(--plum);border:2px solid var(--plum)}
.article-body a.hsc-btn.hsc-btn--outline-plum{color:var(--plum);background:#fff}
.article-body a.hsc-btn--outline-plum:hover{background:var(--plum);color:#fff;opacity:1}

/* ── YOUR HOUSEHOLD MATH — page-specific additions ─────────────────────────── */
.article-body .hsc-any-age{display:block;margin-top:10px;font-size:17.5px;color:var(--sage-dark)}
.article-body input[type=range].hsc-range--plum{accent-color:var(--plum)}
.article-body input[type=range].hsc-range--coral{accent-color:var(--coral)}
.article-body .hsc-slider-group--coral{color:var(--coral)}
.article-body p.hsc-block-label.hsc-block-label--magenta{color:var(--magenta)}
.article-body .hsc-em-magenta{color:var(--magenta);font-weight:800}
/* The could-do block now sits in its own magenta panel, so it needs no rule above it; the panel's
   own border and tag give the section its definition. */
.article-body .hsc-could{margin-top:4px}
.article-body .hsc-stat-cap .hsc-src,.article-body .hsc-sell-top-cap .hsc-src{display:block;margin-top:5px}
.article-body .hsc-btn--coral{background:var(--coral);color:#fff}
.article-body .hsc-stats--glow .hsc-stat{background:linear-gradient(180deg,#fff 0%,#f7faf3 100%)}
.article-body .hsc-year{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;background:var(--soft-sage);border-radius:12px;padding:18px 26px;margin:16px 0;text-align:center}
.article-body .hsc-year-num{font-size:40px;font-weight:800;color:var(--sage-dark);line-height:1}
.article-body .hsc-year-label{font-size:13.5px;font-weight:700;color:var(--dark-gray);max-width:430px;text-align:left;line-height:1.5}
.article-body .hsc-fun-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0 4px}
@media (max-width:860px){.article-body .hsc-fun-grid{grid-template-columns:repeat(2,1fr)}}
.article-body .hsc-fun{background:#fff;border-radius:12px;box-shadow:0 3px 14px rgba(0,0,0,.08);padding:16px 12px 14px;text-align:center}
.article-body .hsc-fun-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;margin-bottom:8px}
.article-body .hsc-fun-icon svg{width:22px;height:22px}
.article-body .hsc-fun-icon.i-sage{background:var(--soft-sage);color:var(--sage-dark)}
.article-body .hsc-fun-icon.i-plum{background:#f2e8ee;color:var(--plum)}
.article-body .hsc-fun-icon.i-coral{background:var(--warm-peach);color:var(--coral)}
.article-body .hsc-fun-icon.i-magenta{background:#fbe6f3;color:var(--magenta)}
.article-body .hsc-fun-num{display:block;font-size:clamp(24px,3vw,30px);font-weight:800;line-height:1.05}
.article-body .hsc-fun .i-sage ~ .hsc-fun-num,.article-body .hsc-fun-num--sage{color:var(--sage-dark)}
.article-body .hsc-fun-num--plum{color:var(--plum)}
.article-body .hsc-fun-num--coral{color:var(--coral)}
.article-body .hsc-fun-num--magenta{color:var(--magenta)}
.article-body .hsc-fun-label{display:block;font-size:11.5px;font-weight:700;color:#77685c;line-height:1.4;margin-top:5px}
.article-body .hsc-fine{font-size:12px;color:#999;line-height:1.6;margin:16px auto 28px;max-width:660px;text-align:center}
.article-body .hsc-sell-top{text-align:center;margin:4px 0 20px}
.article-body .hsc-sell-top .hsc-stat-eyebrow{color:var(--plum)}
.article-body .hsc-sell-top-num{display:block;font-size:clamp(34px,5vw,52px);font-weight:800;color:var(--plum);line-height:1.05}
.article-body .hsc-sell-top-cap{display:block;font-size:13px;font-weight:700;color:#77685c;margin-top:8px}
.article-body .hsc-programs-band{background:#fff;border-top:5px solid var(--plum);border-radius:14px;box-shadow:0 4px 24px rgba(0,0,0,.07);padding:30px 34px 26px}
.article-body .hsc-programs-band h3{font-size:22px;font-weight:800;color:var(--plum);margin:0 0 10px}
.article-body .hsc-programs-band p{font-size:17px;line-height:1.75;color:var(--dark-gray);margin:0}