/* Content pages (guides, privacy, feedback). The calculator has its own inline styles. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --green:#1F6FEB;--green-light:#E8F1FE;--green-dark:#1447A6;--green-mid:#A9C8F8;
  --amber:#BA7517;--amber-light:#FAEEDA;--coral:#D85A30;--coral-light:#FAECE7;
  --bg:#F7F9FC;--surface:#FFFFFF;--surface2:#F1F4F9;
  --border:rgba(0,0,0,0.09);--border-med:rgba(0,0,0,0.14);
  --text:#1a1a18;--text2:#4f4f4b;--text3:#8a8a84;
  --radius:14px;--radius-sm:8px;
  --font:'DM Sans',system-ui,sans-serif;--font-display:'DM Serif Display',Georgia,serif;
  --shadow:0 1px 4px rgba(0,0,0,0.06),0 4px 16px rgba(0,0,0,0.04);
}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--green-dark)}
.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem 1rem;z-index:200}

/* header (matches calculator) */
.site-header{background:var(--surface);border-bottom:1px solid var(--border);padding:0 2rem;position:sticky;top:0;z-index:100;display:flex;align-items:center;height:60px}
.logo-wrap{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-wrap svg{display:block}
.logo-text{font-family:var(--font-display);font-size:1.25rem;color:var(--text)}
.hdr-cta{background:var(--green);color:#fff;text-decoration:none;font:600 13px var(--font);padding:8px 16px;border-radius:99px;white-space:nowrap}
.hdr-cta:hover{background:var(--green-dark)}
@media(max-width:560px){.hdr-cta{padding:7px 12px;font-size:12px}}

/* page hero */
.page-hero{background:linear-gradient(180deg,#E6EEFD 0%,var(--bg) 100%);border-bottom:1px solid var(--border);padding:2.5rem 1.25rem 2.25rem}
.page-hero-inner{max-width:720px;margin:0 auto}
.page-hero.wide .page-hero-inner{max-width:1060px}
.crumbs{font-size:13px;color:var(--text3);margin-bottom:.9rem}
.crumbs a{color:var(--text2);text-decoration:none}.crumbs a:hover{color:var(--green)}
.crumbs span{margin:0 6px}
.page-hero h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,5.5vw,3rem);line-height:1.08;color:var(--text);letter-spacing:-.01em}
.page-hero .dek{font-size:clamp(1.05rem,2.4vw,1.2rem);color:var(--text2);margin-top:.8rem;line-height:1.55}
.meta{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--text3);margin-top:1.1rem}

/* article body */
.article{max-width:calc(720px + 2.5rem);margin:0 auto;padding:2.25rem 1.25rem 0}
.article p{margin-bottom:1.15rem}
.article h2{font-family:var(--font-display);font-weight:400;font-size:1.75rem;line-height:1.2;margin:2.4rem 0 .8rem;color:var(--text)}
.article h3{font-size:1.1rem;font-weight:600;margin:1.6rem 0 .5rem}
.article ul,.article ol{margin:0 0 1.2rem 1.3rem}
.article li{margin-bottom:.45rem}
.article strong{font-weight:600}
.article .key{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--green);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:1rem 1.2rem;margin:1.5rem 0;font-size:16px;box-shadow:var(--shadow)}
.article .key p:last-child{margin-bottom:0}
.formula{font-family:var(--font-display);font-size:1.45rem;text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1rem;margin:1.4rem 0;color:var(--green-dark);line-height:1.35}
.formula small{display:block;font-family:var(--font);font-size:13px;color:var(--text3);margin-top:.35rem}
.table-wrap{overflow-x:auto;margin:1.4rem 0 1.6rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:15px;font-variant-numeric:tabular-nums}
th,td{padding:10px 14px;text-align:right;border-bottom:1px solid var(--border);white-space:nowrap}
th:first-child,td:first-child{text-align:left}
thead th{background:var(--surface2);font-size:13px;font-weight:600;color:var(--text2)}
tbody tr:last-child td{border-bottom:none}
.table-note{font-size:13px;color:var(--text3);margin:-1rem 0 1.4rem}

/* calculator call-to-action */
.cta{display:flex;gap:1.25rem;align-items:center;justify-content:space-between;flex-wrap:wrap;background:linear-gradient(120deg,#0B1B3F,#12306E);color:#E6EEFD;border-radius:var(--radius);padding:1.4rem 1.5rem;margin:2.2rem 0;position:relative;overflow:hidden}
.cta::after{content:'';position:absolute;right:-60px;top:-60px;width:220px;height:220px;background:radial-gradient(circle,rgba(56,189,248,.35),transparent 70%)}
.cta strong{display:block;font-family:var(--font-display);font-weight:400;font-size:1.35rem;color:#fff;line-height:1.2}
.cta span{font-size:14.5px;color:#B9CBEA}
.cta a{position:relative;z-index:1;background:#fff;color:#0B1B3F;text-decoration:none;font:600 14px var(--font);padding:10px 18px;border-radius:99px;white-space:nowrap}
.cta a:hover{background:#E0F2FE}

/* FAQ */
.faq{margin-top:2.6rem}
.faq details{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:10px;padding:0 1.1rem}
.faq summary{cursor:pointer;font-weight:600;padding:.9rem 0;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--green);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:'–'}
.faq details p{padding-bottom:1rem;margin:0;color:var(--text2);font-size:16px}

/* related + notes */
.related{max-width:calc(720px + 2.5rem);margin:3rem auto 0;padding:0 1.25rem}
.related h2{font-family:var(--font-display);font-weight:400;font-size:1.5rem;margin-bottom:1rem}
.note{font-size:13.5px;color:var(--text3);border-top:1px solid var(--border);margin-top:2.5rem;padding-top:1rem;line-height:1.6}

/* hub + simple pages */
.hub{max-width:calc(1060px + 2.5rem);margin:0 auto;padding:2rem 1.25rem 0}
.hub .guide-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.hub .guide-card{padding:1.4rem 1.5rem}
.hub .guide-card strong{font-size:1.35rem}
.hub .guide-card span{font-size:14.5px}
.narrow{max-width:calc(720px + 2.5rem);margin:0 auto;padding:2rem 1.25rem 0}
.narrow .fb-card{padding:0;margin-top:0}
.narrow .fb-card-inner{grid-template-columns:1fr}
.center{text-align:center}
.big-btn{display:inline-block;background:var(--green);color:#fff;text-decoration:none;font:600 15px var(--font);padding:12px 24px;border-radius:99px;margin:.5rem .3rem}
.big-btn.alt{background:var(--surface);color:var(--text2);border:1.5px solid var(--border-med)}

/* single-purpose calculators */
.tool-wrap{max-width:calc(1060px + 2.5rem);margin:0 auto;padding:1.75rem 1.25rem 0}
.tool-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:0;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
@media(max-width:820px){.tool-card{grid-template-columns:1fr}}
.tool-in{padding:1.5rem 1.6rem;border-right:1px solid var(--border)}
@media(max-width:820px){.tool-in{border-right:none;border-bottom:1px solid var(--border)}}
.tool-out{padding:1.5rem 1.6rem;background:linear-gradient(180deg,#FAFCFF,#F2F6FD)}
.tool-in h2,.tool-out h2{font:600 15px var(--font);color:var(--text);margin-bottom:1rem}
.fld{margin-bottom:.95rem}
.fld label{display:block;font:500 13.5px var(--font);color:var(--text2);margin-bottom:.35rem;line-height:1.35}
.fld label small{font-weight:400;color:var(--text3)}
.fld input,.fld select{width:100%;font:15px var(--font);color:var(--text);background:var(--surface);border:1px solid var(--border-med);border-radius:var(--radius-sm);padding:9px 11px}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-light)}
.fld .pre{position:relative}.fld .pre::before{content:'$';position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:15px}
.fld .pre input{padding-left:22px}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:0 .9rem;align-items:end}
@media(max-width:420px){.fld-row{grid-template-columns:1fr}}
.big-out{font-family:var(--font-display);font-size:clamp(2.4rem,6vw,3.2rem);line-height:1;color:var(--green-dark)}
.big-lbl{font-size:14px;color:var(--text2);margin:.35rem 0 1.1rem}
.out-row{display:flex;justify-content:space-between;gap:1rem;font-size:14.5px;padding:8px 0;border-bottom:1px solid var(--border)}
.out-row span:first-child{color:var(--text2)}
.out-row span:last-child{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.out-row.total{border-bottom:none;font-size:16px}
.out-note{font-size:13px;color:var(--text2);line-height:1.55;margin-top:.9rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.75rem .9rem}
.out-note.good{background:var(--green-light);border-color:var(--green-mid);color:var(--green-dark)}
.out-note.warn{background:var(--coral-light);border-color:#F2C4B2;color:#8A3413}
.cmp{margin-top:1rem}
.cmp-row{display:grid;grid-template-columns:96px 1fr 84px;align-items:center;gap:10px;font-size:13px;margin-bottom:7px}
.cmp-bar{height:14px;border-radius:99px;background:var(--surface2);overflow:hidden}
.cmp-bar i{display:block;height:100%;border-radius:99px;background:var(--green)}
.cmp-bar i.alt{background:#94A3B8}
.cmp-row b{text-align:right;font-variant-numeric:tabular-nums}
.progress{height:12px;border-radius:99px;background:#DCE6F5;overflow:hidden;margin:.6rem 0 .3rem}
.progress i{display:block;height:100%;background:linear-gradient(90deg,#1F6FEB,#38BDF8);border-radius:99px}
.tool-more{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1rem;font-size:14px;color:var(--text2)}
.tool-more a{font-weight:600;color:var(--green)}
.ladder-table{font-size:13.5px}
.ladder-table td,.ladder-table th{padding:7px 10px}
.ladder-table tr.short td{background:var(--coral-light)}
.ladder-table tr.rung td:nth-child(4){color:var(--green-dark);font-weight:600}
.tools-hub .guide-card em{color:var(--green)}
.code-box{background:#0B1B3F;border-radius:var(--radius);padding:1.1rem;margin:1rem 0 1.5rem}
.code-box pre{color:#DCE7FA;font:13px/1.55 ui-monospace,Menlo,monospace;white-space:pre-wrap;word-break:break-all;margin-bottom:.8rem}
.code-box .big-btn{margin:0;border:none;cursor:pointer}
.state-table{font-size:14px}.state-table th,.state-table td{padding:8px 10px}.state-table td:first-child{white-space:normal;color:var(--text)}

.nt{display:inline-block;font-size:10.5px;font-weight:600;color:var(--green-dark);background:var(--green-light);border-radius:99px;padding:1px 7px;margin-left:6px;vertical-align:1px;white-space:nowrap}
.hub .guide-card.featured{grid-column:1/-1;background:linear-gradient(120deg,#0B1B3F,#12306E);border-color:transparent;padding:1.8rem 2rem}
.hub .guide-card.featured strong{color:#fff;font-size:1.7rem}
.hub .guide-card.featured span{color:#C9DAF5;font-size:15.5px;max-width:60ch}
.hub .guide-card.featured:hover{border-color:transparent}
.formula{font-size:1.25rem}