:root{
  --bg:#f5f6f7;--panel:#fff;--text:#141414;--muted:#616771;--border:#d9dde2;
  --soft:#eef1f4;--soft2:#f9fafb;--accent:#1746a2;--accent-soft:#edf3ff;
  --good:#166534;--bad:#991b1b;--warn:#8a5a00;--max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text);line-height:1.55}
a{color:var(--accent)}
img,svg{max-width:100%}
.site-header{background:#fff;border-bottom:1px solid var(--border)}
.header-inner{max-width:var(--max);margin:auto;padding:15px 22px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.brand{font-size:19px;font-weight:800;text-decoration:none;color:var(--text);white-space:nowrap}
.nav{display:flex;gap:18px;flex-wrap:wrap;font-size:14px}
.nav a{color:#4f5660;text-decoration:none}.nav a:hover{text-decoration:underline}
.wrap{max-width:var(--max);margin:auto;padding:0 22px 54px}
.breadcrumb{padding:18px 0 4px;color:var(--muted);font-size:13px}
.hero{max-width:920px;padding:22px 0 14px}
h1{font-size:clamp(32px,4.6vw,50px);line-height:1.05;letter-spacing:-1.3px;margin:0 0 13px}
h2{line-height:1.18}.lead{font-size:18px;color:var(--muted);margin:0;max-width:850px}
.small{font-size:13px;color:var(--muted)}
.badge{display:inline-block;padding:5px 9px;border-radius:999px;background:var(--accent-soft);font-size:12px;font-weight:700;color:#173a77}
.grid{display:grid;gap:18px}.two{grid-template-columns:repeat(2,minmax(0,1fr))}.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:20px}
.card h2,.card h3{margin:0 0 10px}.card p{margin:7px 0;color:#454a51}
.tool-card{text-decoration:none;color:var(--text);display:block}.tool-card:hover{border-color:#9ca7b6}
.ad-slot{display:none}
.ad-slot.large{min-height:150px}.ad-slot.lower{min-height:92px}
.calc-shell{background:#fff;border:1px solid var(--border);border-radius:18px;padding:22px}
.calc-head{display:flex;justify-content:space-between;gap:18px;align-items:start;margin-bottom:18px}
.calc-head h2{margin:0 0 5px;font-size:25px}.calc-head p{margin:0;color:var(--muted);font-size:14px}
.section-card{border:1px solid var(--border);border-radius:15px;padding:18px;background:#fff}
.section-card h3{font-size:18px;margin:0 0 12px}
.help{font-size:12px;color:var(--muted);margin:-5px 0 13px}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
label{display:block;font-size:13px;font-weight:700}
input,select,button{font:inherit}
input,select{width:100%;margin-top:6px;padding:11px 12px;font-size:16px;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--text)}
input:focus,select:focus,button:focus{outline:2px solid var(--accent);outline-offset:2px}
button{cursor:pointer;border:0;border-radius:9px;padding:10px 14px;font-weight:700}
.btn{background:var(--accent);color:#fff}.btn.secondary{background:#e7ebf0;color:#20242a}.btn:disabled{opacity:.55;cursor:not-allowed}
.location-panel{border:1px solid #cbd6ea;background:#f7faff;border-radius:15px;padding:18px;margin-bottom:18px}
.location-grid{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end}
.location-output{margin-top:13px;padding:13px;background:#fff;border:1px solid #dfe6f1;border-radius:11px}
.location-output strong{display:block}.location-meta{font-size:12px;color:var(--muted);margin-top:4px}
.results{margin-top:18px;background:var(--soft);border:1px solid var(--border);border-radius:16px;padding:22px}
.results-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}
.hero-label{font-size:12px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.hero-value{font-size:clamp(42px,6vw,60px);font-weight:800;letter-spacing:-1.5px;margin:2px 0}
.rate{color:var(--muted);margin-bottom:18px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.stat{background:#fff;border:1px solid var(--border);border-radius:11px;padding:12px}
.stat small{display:block;font-size:11px;color:var(--muted);margin-bottom:3px}.stat strong{font-size:17px}
.breakdown{background:#fff;border:1px solid var(--border);border-radius:13px;padding:16px;align-self:start}
.breakdown h3{font-size:17px;margin:0 0 8px}
.row{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--border);font-size:14px}
.row:last-child{border-bottom:0;font-weight:800}
.whatif{margin-top:18px;border:1px solid var(--border);border-radius:15px;padding:18px}
.whatif h3{margin:0 0 13px}.whatif-layout{display:grid;grid-template-columns:.75fr 2.25fr;gap:16px;align-items:end}
.what-results{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.status-good{color:var(--good)}.status-bad{color:var(--bad)}.status-warn{color:var(--warn)}
.source-box{margin-top:15px;font-size:12px;color:var(--muted);border-top:1px solid var(--border);padding-top:12px}
.content-section{background:#fff;border:1px solid var(--border);border-radius:16px;padding:23px;margin-top:22px}
.content-section h2{font-size:24px;margin:0 0 10px}.content-section h3{margin-top:22px}
.content-section p,.content-section li{color:#3f444b}
.related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.related .coming{border:1px solid var(--border);border-radius:12px;padding:14px;background:#fbfbfc}
.related strong{display:block}.related small{display:block;color:var(--muted);margin-top:4px}
.formula{background:#f7f8fa;border-left:4px solid #8998ad;padding:12px 14px;margin:14px 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px}
.footer{background:#fff;border-top:1px solid var(--border)}.footer-inner{max-width:var(--max);margin:auto;padding:24px 22px;color:var(--muted);font-size:12px}
.footer-links{display:flex;gap:15px;flex-wrap:wrap;margin-bottom:8px}.footer a{color:#505760}
.notice{padding:12px 14px;border-radius:10px;background:#fff7e8;border:1px solid #edd8a6;font-size:13px;color:#654b14}
@media(max-width:900px){
  .two,.three,.results-layout,.whatif-layout{grid-template-columns:1fr}
  .what-results{grid-template-columns:repeat(2,minmax(0,1fr))}
  .related{grid-template-columns:1fr}
}
@media(max-width:680px){
  .header-inner{align-items:flex-start;flex-direction:column}.wrap{padding-left:14px;padding-right:14px}
  .fields,.stats,.what-results{grid-template-columns:1fr}.calc-shell{padding:14px}.calc-head{flex-direction:column}
  .location-grid{grid-template-columns:1fr}.hero-value{font-size:42px}.ad-slot{min-height:84px}
}

/* Manual ad slots are intentionally hidden until live AdSense code is installed.
   Add class="ads-live" to <body> only when real manual ad units are present. */
.ads-live .ad-slot{
  display:flex;min-height:110px;background:#fff;border-radius:14px;margin:27px 0;
  align-items:center;justify-content:center;color:#92979e;font-size:11px;
  letter-spacing:.05em;text-transform:uppercase
}
.ads-live .ad-slot.large{min-height:150px}
.ads-live .ad-slot.lower{min-height:92px}

.roadmap-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.roadmap-card{border:1px solid var(--border);border-radius:13px;padding:16px;background:#fff;display:flex;gap:13px;align-items:flex-start}
.roadmap-num{width:32px;height:32px;flex:0 0 32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--soft);font-weight:800;font-size:13px}
.roadmap-copy{min-width:0}.roadmap-copy strong{display:block;margin-bottom:3px}.roadmap-copy small{display:block;color:var(--muted);line-height:1.4}
.status-pill{display:inline-block;margin-top:7px;padding:3px 7px;border-radius:999px;background:var(--soft);font-size:11px;font-weight:800;color:#4f5660}.status-pill.live{background:#e9f7ee;color:var(--good)}
@media(max-width:760px){.roadmap-grid{grid-template-columns:1fr}}

.input-error,[aria-invalid="true"]{border-color:#991b1b!important;background:#fff8f8}.validation-error{color:#991b1b;font-weight:700}

/* Primary calculator card CTA */
.tool-card-primary{
  position:relative;
  padding-bottom:22px;
  transition:border-color .15s ease, transform .15s ease, background-color .15s ease;
}
.tool-card-primary .tool-card-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
  padding:12px 16px;
  border-radius:9px;
  background:var(--accent);
  color:#fff;
  font-size:15px;
  font-weight:800;
  text-decoration:none;
}
.tool-card-primary:hover,
.tool-card-primary:focus-visible{
  border-color:var(--accent);
  background:#fbfdff;
  transform:translateY(-1px);
}
.tool-card-primary:hover .tool-card-cta,
.tool-card-primary:focus-visible .tool-card-cta{
  text-decoration:underline;
}
.tool-card-primary:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
}