:root { color-scheme: light; --navy:#10283b; --ink:#172a37; --muted:#61727b; --teal:#087d71; --teal-soft:#e8f6f3; --line:#dae4e6; --background:#f7f9f8; --white:#fff; --orange:#e9b75d; }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin:0; background:var(--background); color:var(--ink); font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.5; }
    button, input { font: inherit; }
    button { cursor: pointer; }
    button:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible { outline:3px solid #5bcbbb; outline-offset:3px; }
    .wrap { width:min(1110px,calc(100% - 40px)); margin: 0 auto; }
    header { background:var(--navy); color:#fff; }
    .nav { display:flex;align-items:center;justify-content:space-between;min-height:75px; gap:20px; }
    .brand { display:inline-flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-size:21px;font-weight:800;letter-spacing:-.6px; }
    .mark { display:inline-grid;place-items:center;width:35px;height:35px;border-radius:11px;background:#43c6b6;color:var(--navy);font-weight:900;font-size:19px; }
    nav { display:flex;gap:25px; }
    nav a { color:#d3e2e7;text-decoration:none;font-size:14px;font-weight:600; }
    nav a:hover { color:#fff; }
    .hero { background:var(--navy);padding:68px 0 138px;color:#fff;overflow:hidden;position:relative; }
    .hero:after { content:"";width:340px;height:340px;position:absolute;right:-90px;bottom:-240px;border:85px solid rgba(80,209,181,.08);border-radius:50%;pointer-events:none; }
    .eyebrow { color:#8fe6d9;font-weight:750;letter-spacing:1.7px;text-transform:uppercase;font-size:12px; }
    h1 { font-size:clamp(37px,6vw,65px);max-width:830px;line-height:1.07;letter-spacing:-2.8px;margin:16px 0 18px; }
    h1 em { color:#8fe6d9;font-style:normal; }
    .lede { font-size:clamp(16px,2vw,20px);line-height:1.5;max-width:630px;color:#c7dce2;margin:0; }
    main { position:relative;margin-top:-87px; }
    .calc-shell { box-shadow:0 24px 65px rgba(9,38,55,.12);border-radius:25px;background:#fff;border:1px solid #e8eeee;overflow:hidden; }
    .calc-top { padding:30px 38px 25px; }
    .step { font-size:12px;letter-spacing:1.4px;font-weight:800;text-transform:uppercase;color:#67818b;margin:0 0 13px; }
    .kinds { display:flex;gap:9px;flex-wrap:wrap; }
    .kind { display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);background:#fff;padding:11px 17px;border-radius:13px;color:#314753;font-size:14px;font-weight:750;transition:background .18s,border-color .18s; }
    .kind.active { background:var(--teal-soft);color:#006b61;border-color:#7ecfbe; }
    .kind:hover { border-color:#5fac9d; }
    .symbol { font-size:18px; }
    .question { font-size:clamp(24px,3vw,30px);letter-spacing:-.9px;line-height:1.2;margin:30px 0 8px;font-weight:800; }
    .hint { color:var(--muted);margin:0 0 22px;font-size:15px; }
    .input-row { display:flex;align-items:center;border:2px solid #c2d7d6;border-radius:16px;overflow:hidden;min-height:82px;max-width:510px;background:#fff; }
    .r-prefix { padding:0 17px 0 22px;font-size:31px;color:var(--teal);font-weight:800; }
    .money-input { min-width:0;width:100%;font-size:39px;letter-spacing:-1.5px;font-weight:850;border:0;outline:0;color:var(--navy);padding:10px 14px 10px 0;background:transparent;appearance:textfield; }
    .money-input::-webkit-inner-spin-button,.money-input::-webkit-outer-spin-button { -webkit-appearance:none;margin:0; }
    .presets { display:flex;gap:8px;flex-wrap:wrap;margin:15px 0 0; }
    .preset { border:1px solid #e1e8e8;background:#f8faf9;border-radius:999px;padding:7px 14px;font-weight:650;color:#557078;font-size:13px; }
    .preset:hover { background:#eaf5f1;color:var(--teal); }
    .answer { background:linear-gradient(110deg,#e8f6f2 0%,#f6faf8 100%);border-top:1px solid #d6eae4;padding:32px 38px 29px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(230px,.85fr);gap:22px;align-items:center; }
    .answer-eyebrow { color:#216f65;text-transform:uppercase;letter-spacing:1.4px;font-size:12px;font-weight:850; }
    .answer-number { font-size:clamp(38px,5vw,59px);font-weight:900;letter-spacing:-2px;line-height:1.15;color:#0f594f;margin:8px 0 8px;overflow-wrap:anywhere; }
    .answer-sub { font-size:15px;color:#3e6862;max-width:560px;margin:0; }
    .secondary { display:flex;flex-direction:column;gap:8px;border-left:1px solid #bedbd4;padding-left:26px; }
    .secondary-label { font-size:12px;text-transform:uppercase;letter-spacing:1.1px;color:#537e75;font-weight:850; }
    .secondary-number { font-size:clamp(20px,3vw,28px);font-weight:820;letter-spacing:-.7px;color:#234c45;line-height:1.2; }
    .secondary-caption { font-size:13px;color:#54756e; }
    details { border-top:1px solid var(--line);padding:0 38px; }
    summary { padding:19px 0;cursor:pointer;font-weight:750;font-size:14px;list-style:none;display:flex;align-items:center;justify-content:space-between; }
    summary::-webkit-details-marker { display:none; }
    summary:after { content:"+"; font-size:23px;font-weight:400;color:var(--teal); }
    details[open] summary:after { content:"−"; }
    .settings { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding-bottom:25px; }
    .setting { display:flex;flex-direction:column;gap:7px; }
    .setting label { font-size:13px;font-weight:750;color:#4d626b; }
    .setting input { height:45px;border:1px solid #cbdcdd;border-radius:10px;padding:9px 13px;width:100%;background:#fff;color:var(--ink); }
    .footnote { border-top:1px solid #e9eeee;padding:15px 38px;color:#789097;font-size:12px;background:#fff; }
    .band { padding:85px 0 35px; }
    .section-heading { font-size:32px;line-height:1.14;letter-spacing:-1.2px;margin:0 0 10px;font-weight:850; }
    .section-copy { font-size:16px;color:var(--muted);max-width:650px;margin:0 0 27px; }
    .explore { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px; }
    .mini { background:white;border:1px solid #e4eded;border-radius:16px;padding:22px 20px;text-align:left;transition:transform .2s,box-shadow .2s;width:100%; }
    .mini:hover { transform:translateY(-3px);box-shadow:0 14px 20px rgba(16,40,59,.06); }
    .mini-icon { font-size:26px; }
    .mini h3 { font-size:16px;margin:17px 0 7px;letter-spacing:-.4px; }
    .mini p { color:var(--muted);font-size:13px;margin:0;line-height:1.55; }
    .mini-link { display:block;color:var(--teal);font-size:13px;font-weight:750;margin-top:18px; }
    .why { border-top:1px solid var(--line);margin-top:65px;padding:55px 0 75px;display:grid;grid-template-columns:1fr 1fr;gap:50px; }
    .why p { color:var(--muted);font-size:15px; }
    .reliable { background:#ecf2f0;border-radius:15px;padding:27px; }
    .reliable h3 { margin:0 0 12px; }
    .reliable ul { margin:0;padding-left:21px;color:#566e74;font-size:14px;line-height:1.85; }
    footer { background:var(--navy);color:#c9d8df;padding:37px 0; }
    .footer-grid { display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;align-items:center; }
    .footer-grid a { color:#dceeed;text-decoration:none;margin-left:17px;font-size:13px; }
    .footer-small { font-size:12px;color:#94adb9;margin-top:10px; }
    .screen-reader-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
    @media (max-width:780px){
      .hero { padding:44px 0 113px; } h1 { letter-spacing:-1.5px; } .nav { min-height:68px; } nav { gap:14px; }
      .calc-top { padding:25px 23px 23px; } .answer { padding:27px 23px;grid-template-columns:1fr;gap:24px; } .secondary { border-left:0;border-top:1px solid #bedbd4;padding:18px 0 0; }
      details { padding:0 23px; } .footnote { padding:16px 23px; } .explore { grid-template-columns:repeat(2,1fr); } .why { grid-template-columns:1fr;gap:15px; }
    }
    @media (max-width:480px){
      .wrap { width:min(100% - 28px,1110px); } nav a:nth-child(2) { display:none; } .hero { padding-top:37px; } h1 { font-size:39px; }
      .calc-shell { border-radius:19px; } .kinds { display:grid;grid-template-columns:1fr 1fr;gap:8px; } .kind { justify-content:center;padding:11px 5px;font-size:13px; }
      .question { margin-top:28px; } .input-row { min-height:74px; } .money-input { font-size:34px; } .settings { grid-template-columns:1fr; }
      .explore { grid-template-columns:1fr; } .mini { padding:18px 19px; } .mini h3 { margin-top:7px; } .band { padding-top:58px; } .footer-grid a { margin-left:0;margin-right:15px; }
    }
  
/* Detailed calculators and editorial pages */
.page-hero {background:var(--navy); color:white; padding:52px 0 115px;}
.page-hero h1 {max-width:850px;font-size:clamp(34px,5vw,53px);letter-spacing:-1.6px;}
.page-hero .lede {max-width:750px;font-size:17px;}
.breadcrumb {font-size:13px;color:#b5cfd5;margin:0 0 15px;}
.breadcrumb a {color:#a4e9dd;text-decoration:none;}
.page-main {margin-top:-75px;}
.page-section {padding:50px 0 28px;max-width:960px;}
.page-section h2 {font-size:27px;letter-spacing:-.8px;margin:18px 0 12px;}
.page-section h3 {font-size:19px;margin:28px 0 8px;}
.page-section p,.page-section li {font-size:15px;line-height:1.8;color:#516872;}
.page-section ul {padding-left:20px;}
.detail-cta {padding:16px 38px;background:#f5f9f8;border-top:1px solid #e6eeee;font-weight:750;font-size:14px;}
.detail-cta a {color:var(--teal);text-decoration:none;}
.detail-cta a:hover,.other-links a:hover {text-decoration:underline;}
.other-links {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0 30px;}
.other-links a {display:block;color:#176f68;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 16px;font-weight:700;font-size:14px;}
.field-tip {font-size:12px;color:#74878c;padding-top:5px;}
.small-tag {display:inline-block;border-radius:999px;background:#e5f3f0;color:#116d63;font-size:12px;font-weight:750;padding:6px 12px;}
.prose {max-width:780px;background:white;border:1px solid var(--line);border-radius:17px;padding:26px 31px;margin:0 0 30px;}
.prose h2 {font-size:27px;}
.prose h3 {font-size:19px;}
.prose p,.prose li {color:#526b74;line-height:1.8;}
.prose a {color:var(--teal);}
.ad-placeholder {min-height:0;} /* Empty until real AdSense approval and publisher code */
footer a:hover {text-decoration:underline;}
@media(max-width:780px){.other-links{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-cta{padding:16px 23px}}
@media(max-width:480px){.other-links{grid-template-columns:1fr}.prose{padding:20px}.page-hero{padding:38px 0 108px}}


/* HowMuchSA V3 — a distinct, warm, editorial visual language */
:root {--navy:#122522;--ink:#152923;--muted:#60716a;--teal:#24735d;--teal-soft:#e9f6df;--line:#dbe3d6;--background:#f8f7f0;--orange:#e6a45f;--acid:#d9ee8d;}
body{font-family:Inter,"Aptos",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--background)}
header,.hero,.page-hero,footer{background:#142c26}
.nav{min-height:80px}.mark{background:#d9ed8e;border-radius:50%;color:#142c26;font-family:Georgia,serif}
.brand{letter-spacing:-.9px}.hero{padding-top:77px;padding-bottom:150px;background:radial-gradient(circle at 83% 18%,rgba(211,239,134,.12),transparent 28%),#142c26}
.hero .eyebrow,.page-hero .eyebrow{color:#d3ea94}.hero h1{max-width:880px;font-weight:820;letter-spacing:-3px}.hero h1 em{color:#d7ee96}
.calc-shell{box-shadow:0 20px 65px #142c261a;border-radius:23px}
.kind.active{background:#eaf3d2;border-color:#6f977c;color:#245f4a}
.answer{background:linear-gradient(110deg,#e7f1d4,#f5f8ef)}.answer-number{color:#204f3b}.answer-eyebrow{color:#245f4a}
.input-row{border-color:#a5c89e}.r-prefix{color:#225d48}.preset:hover{background:#e8f3d9}
.mini{background:#fffef9}.mini:hover{box-shadow:0 15px 25px #12252211}
.reliable{background:#eff1e5}.page-section p,.page-section li{color:#4b6359}
.page-hero h1{letter-spacing:-1.8px}.prose{max-width:850px;background:#fffef9}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #95c786;outline-offset:3px}
.masthead-side{position:absolute;right:2%;top:20%;width:230px;height:230px;border:1px solid #8eaf7963;border-radius:50%;opacity:.75;pointer-events:none}
.masthead-side:before,.masthead-side:after{content:"";position:absolute;border:1px solid #8eaf7963;border-radius:50%}.masthead-side:before{inset:25px}.masthead-side:after{inset:58px}
.pill-info{display:inline-flex;border:1px solid #bad09d;color:#cde9a2;font-size:12px;border-radius:40px;padding:7px 13px;letter-spacing:.2px;margin-top:19px}
.story-band{padding:62px 0 55px}.story-head{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:20px}.story-head p{max-width:500px;color:var(--muted);margin:0}
.mirror-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mirror-card{border:1px solid #dfdfd0;background:#fffef8;border-radius:17px;text-decoration:none;color:inherit;padding:23px 17px;display:flex;flex-direction:column;gap:8px;min-height:175px;transition:transform .15s,background .15s}
.mirror-card:hover{transform:translateY(-3px);background:#f8fbee}
.mirror-card .mirror-label{font-size:12px;color:#63766b;font-weight:700}.mirror-card strong{font-size:24px;letter-spacing:-.8px;overflow-wrap:anywhere}.mirror-card small{font-size:12px;color:#61746b;line-height:1.5}
.mirror-desc{font-size:12px;color:#60746b;margin:15px 0 0}
.mini-toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:20px}
.share-button{background:#243f31;color:white;border:0;padding:10px 14px;border-radius:9px;font-size:13px;font-weight:700}.share-button:hover{background:#315543}
.dot-row{display:flex;gap:7px;align-items:center;font-size:12px;color:#698177}
.dot{width:7px;height:7px;background:#93b176;border-radius:50%}
.feature-card{background:#142c26;color:#f6fae9;padding:30px;border-radius:19px;display:grid;grid-template-columns:1.3fr 1fr;gap:20px;align-items:center;margin-top:34px}
.feature-card h3{font-size:27px;letter-spacing:-.9px;margin:10px 0 8px}.feature-card p{color:#d3e0c8;max-width:550px;line-height:1.6;font-size:14px}.feature-card a{color:#213e31;background:#dbee99;text-decoration:none;justify-self:end;padding:14px 19px;border-radius:12px;font-weight:800;font-size:14px}
.tool-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.tool-form label{font-size:13px;font-weight:760;color:#35554a;display:flex;flex-direction:column;gap:7px}.tool-form input,.tool-form select{padding:13px 14px;border:1px solid #bfd1c3;border-radius:11px;min-width:0;background:white;font-size:16px;color:var(--ink)}
.tool-pane{padding:30px;border:1px solid #dde9dd;background:#fffef9;border-radius:20px;margin-bottom:26px;box-shadow:0 15px 35px #142c2610}
.tool-pane h2{font-size:25px;margin:0 0 8px;letter-spacing:-.5px}.tool-pane .intro{margin:0 0 24px;color:var(--muted)}
.tool-outcomes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px}
.tool-outcome{background:#e9f2df;padding:20px;border-radius:13px}.tool-outcome strong{display:block;font-size:clamp(19px,2.6vw,31px);letter-spacing:-.8px;color:#1e5b45;overflow-wrap:anywhere}.tool-outcome span{display:block;color:#4c6f59;font-size:12px;line-height:1.5;margin-bottom:8px}
.bar-track{height:18px;border-radius:30px;background:#e8ece6;overflow:hidden;display:flex;margin-top:16px}.bar-track div{height:100%;min-width:0;transition:width .2s}.bar-essentials{background:#345f4a}.bar-flex{background:#b7cb7a}.bar-savings{background:#e3a972}.bar-left{background:#dfe9d6}
.bar-labels{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:#556d60;margin-top:14px}.bar-labels i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}
.method-note{font-size:13px;color:#5a7164;background:#f0f5e9;padding:13px 17px;border-radius:10px;margin-top:20px;line-height:1.65}
.article-index{background:#f3f6e9;border:1px solid #e3e9d7;border-radius:14px;padding:17px 21px;margin:20px 0 25px}.article-index p{margin:4px 0}
.article-example{background:#eef5e6;border-left:4px solid #4e8b60;padding:18px 22px;margin:18px 0;border-radius:3px 12px 12px 3px}
.prose table{border-collapse:collapse;width:100%;margin:18px 0;font-size:13px}.prose th,.prose td{text-align:left;padding:11px;border-bottom:1px solid #e3e9df;vertical-align:top}.prose th{color:#1c4d3c}
.article-meta{font-size:13px;color:#74867e}.article-sources{font-size:13px;background:#f7f8ef;padding:15px;border-radius:10px}
@media(max-width:920px){.mirror-grid{grid-template-columns:repeat(2,1fr)}.masthead-side{right:-70px;opacity:.4}}
@media(max-width:650px){.story-head{display:block}.story-head p{margin-top:10px}.feature-card{grid-template-columns:1fr}.feature-card a{justify-self:start}.tool-form{grid-template-columns:1fr}.tool-outcomes{grid-template-columns:1fr}.mirror-grid{grid-template-columns:1fr 1fr}.mirror-card{padding:17px 13px;min-height:150px}.mirror-card strong{font-size:21px}.tool-pane{padding:22px 19px}.hero h1{letter-spacing:-1.7px}.masthead-side{display:none}}
@media(max-width:380px){.mirror-grid{grid-template-columns:1fr}}