:root{--bg:#f4f7fb;--ink:#14213d;--muted:#5b6b82;--card:#fff;--line:#e2e8f0;--brand:#0b6e99;--brand2:#0f9b8e;--accent:#e85d3f;--radius:14px}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55}
.wrap{max-width:1080px;margin:0 auto;padding:0 18px}
.demo-banner{background:#fff4d6;color:#7a5a00;text-align:center;font-size:.8rem;padding:6px}
.site-header{background:var(--ink);color:#fff}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-size:1.25rem}
.logo b{color:#7fd6ff}
.logo-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--brand),var(--brand2));font-weight:800}
.tagline{color:#b8c4d6;font-size:.9rem}
.hero{padding:34px 0 18px}
.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:var(--brand);font-weight:700;margin:0}
h1{font-size:clamp(1.8rem,4vw,2.6rem);margin:.2em 0;line-height:1.15}
.lede{color:var(--muted);max-width:720px;font-size:1.05rem;margin:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin:18px 0;box-shadow:0 1px 3px rgba(20,33,61,.05)}
h2{margin-top:0;font-size:1.35rem}
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px}
.inputs{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:5px}
label{font-weight:600;font-size:.92rem}
input[type=number],select{font:inherit;padding:10px 12px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:var(--ink);width:100%}
input:focus,select:focus{outline:2px solid #7fd6ff;border-color:var(--brand)}
input[type=range]{width:100%;accent-color:var(--brand)}
input:disabled{background:#f1f5f9;color:#94a3b8}
.check{display:flex;align-items:center;gap:8px;font-weight:500}
.hint{color:var(--muted);font-size:.8rem}
.advanced{border:1px dashed #cbd5e1;border-radius:10px;padding:10px 14px}
.advanced summary{cursor:pointer;font-weight:600;color:var(--brand)}
.adv-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.results{display:flex;flex-direction:column;gap:14px}
.total-box{background:linear-gradient(135deg,var(--ink),#1f3a68);color:#fff;border-radius:12px;padding:18px 20px;display:flex;flex-direction:column}
.total-label{font-size:.85rem;color:#b8c4d6}
.total{font-size:2.6rem;font-weight:800;line-height:1.1}
.total-sub{font-size:.88rem;color:#d6e2f2}
.chart svg{display:block}
.bar-val{font-size:12px;fill:var(--ink);font-weight:700}
.bar-lbl{font-size:12px;fill:var(--muted)}
.month-table{width:100%;border-collapse:collapse;font-size:.92rem}
.month-table th,.month-table td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:right}
.month-table th:first-child,.month-table td:first-child{text-align:left}
.month-table th{color:var(--muted);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
.month-table tr.tot td{font-weight:800;border-bottom:none}
.tip-grid,.aff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tip{border:1px solid var(--line);border-radius:12px;padding:16px;background:#f8fffd}
.tip h3,.aff h3{margin:.3em 0;font-size:1.05rem}
.tip p,.aff p{margin:0;color:var(--muted);font-size:.9rem}
.tip-save{display:inline-block;background:var(--brand2);color:#fff;font-weight:700;border-radius:999px;padding:3px 10px;font-size:.85rem}
.prose p,.prose li{max-width:780px}
.formula{background:#0f172a;color:#d6f5ff;border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;overflow-x:auto}
.formula code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem;white-space:pre}
.aff{border:2px dashed #f0b8a8;border-radius:12px;padding:16px;background:#fffaf8;display:flex;flex-direction:column;gap:6px}
.aff-tag{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);font-weight:700}
.btn{display:inline-block;margin-top:auto;padding:9px 14px;border-radius:10px;text-decoration:none;font-weight:600;font-size:.9rem}
.btn.ghost{border:1px solid var(--brand);color:var(--brand)}
.sources ol{padding-left:20px;font-size:.88rem}
.sources li{margin-bottom:6px}
.sources a{color:var(--brand)}
.acc{color:var(--muted);font-size:.8rem}
.disclaimer{font-size:.85rem;color:var(--muted);max-width:860px;margin:10px 0 30px}
.site-footer{background:var(--ink);color:#b8c4d6;font-size:.85rem;padding:18px 0}
@media (max-width:820px){
  .calc{grid-template-columns:1fr}
  .tip-grid,.aff-grid{grid-template-columns:1fr}
  .adv-grid{grid-template-columns:1fr}
  .card{padding:18px}
  .total{font-size:2.2rem}
}
/* ---- shared nav ---- */
.nav{display:flex;gap:6px;flex-wrap:wrap}
.nav a{color:#cfe3f7;text-decoration:none;font-size:.9rem;padding:7px 12px;border-radius:999px}
.nav a:hover{background:rgba(255,255,255,.08)}
.nav a.active{background:#7fd6ff;color:var(--ink);font-weight:700}
.legend{display:flex;flex-wrap:wrap;gap:10px;font-size:.82rem;color:var(--muted)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.breakdown{width:100%;border-collapse:collapse;font-size:.9rem}
.breakdown td{padding:6px 8px;border-bottom:1px solid var(--line)}
.breakdown td:last-child,.breakdown td:nth-child(2){text-align:right}
.bar-inline{height:8px;border-radius:4px;background:var(--brand2);display:block}
.note{background:#eef8ff;border:1px solid #cfe7f7;border-radius:10px;padding:10px 14px;font-size:.88rem;color:#21456b}
.split{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.split .mini{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.mini b{display:block;font-size:1.4rem}
.mini span{color:var(--muted);font-size:.82rem}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cards3 a.card{text-decoration:none;color:inherit;margin:0}
.cards3 a.card:hover{border-color:var(--brand)}
@media (max-width:820px){.checks,.row2,.split,.cards3{grid-template-columns:1fr}.nav{width:100%}.tagline{display:none}}
/* ---- Compare providers ---- */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.tabs button{font:inherit;font-weight:700;border:1px solid var(--line);background:#fff;color:var(--ink);padding:9px 16px;border-radius:999px;cursor:pointer}
.tabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.cmp-inputs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:end}
.cmp-inputs .field{margin:0}
.cmp-opts{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:12px}
.cmp-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}
.cmp-summary .mini{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.cmp-summary .mini b{display:block;font-size:1.15rem}
.cmp-summary .mini span{color:var(--muted);font-size:.82rem}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.cmp{width:100%;border-collapse:collapse;font-size:.88rem;min-width:860px}
table.cmp th,table.cmp td{padding:8px 7px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.cmp th{color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;position:sticky;top:0;background:#fff}
table.cmp td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
table.cmp tr.default td{background:#fff8e6}
table.cmp .plan{color:var(--muted);font-size:.8rem;display:block}
.tag{display:inline-block;font-size:.7rem;font-weight:700;border-radius:6px;padding:1px 6px;margin:2px 3px 0 0;background:#eef2f7;color:#334155;white-space:nowrap}
.tag.warn{background:#fff1e6;color:#9a3412}
.tag.ok{background:#e7f8f2;color:#065f46}
.lower{color:#047857;font-weight:700}.higher{color:#b45309;font-weight:700}
.disclosure{border:1px dashed #94a3b8;background:#f8fafc;border-radius:12px;padding:12px 14px;font-size:.88rem;color:var(--muted)}
.cmp-cta{display:inline-block;margin-top:8px;font-weight:700;color:var(--brand)}
details.more{margin-top:14px}details.more summary{cursor:pointer;font-weight:700;color:var(--brand)}
@media (max-width:820px){.cmp-inputs{grid-template-columns:1fr 1fr}.cmp-summary{grid-template-columns:1fr}}
/* money tools */
.row3{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:8px;margin:6px 0}
.row4{display:grid;grid-template-columns:1.3fr 1fr .8fr 1fr;gap:8px;margin:6px 0}
.row3 input,.row4 input{font:inherit;padding:8px 10px;border:1px solid #cbd5e1;border-radius:10px;width:100%;min-width:0}
.comp-head b,.debt-head b{font-size:.78rem;color:var(--muted)}
.cards3 a.card small{display:block;color:var(--muted)}
.tool-group{margin-top:26px}
.tool-group h2.eyebrow{margin:0 0 10px}
@media (max-width:520px){.row4{grid-template-columns:1fr 1fr}.row3{grid-template-columns:1.2fr .9fr 1fr}}
/* ---------- PWA / app mode ---------- */
.install-box{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;background:linear-gradient(135deg,#0b6e99,#0f9b8e);color:#fff;border-radius:var(--radius);padding:16px 20px;margin:4px 0 18px}
.install-box[hidden],.install-btn[hidden],.ios-hint[hidden]{display:none}
.install-text{display:flex;flex-direction:column;flex:1 1 260px}.install-text span{font-size:.88rem;opacity:.9}
.install-btn{margin:0;background:#fff;color:var(--ink);border:0;cursor:pointer;font:inherit;font-weight:700;padding:10px 18px}
.ios-hint{margin:0;flex-basis:100%;font-size:.9rem;background:rgba(255,255,255,.14);border-radius:10px;padding:8px 12px}
.share-ico{display:inline-block;border:1.5px solid #fff;border-radius:4px;padding:0 4px;font-size:.8rem;line-height:1.3}
.quick{display:none}
.tabbar{display:none}
@media (max-width:820px){
  .quick{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:6px 0 10px}
  .quick a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 4px;background:#fff;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink);font-size:.74rem;font-weight:600;text-align:center;line-height:1.2}
  .quick a span{font-size:1.5rem;line-height:1}
  .quick a:active{transform:scale(.96);background:#eef6fb}
}
/* Installed (standalone) */
html.standalone body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
html.standalone .site-header{position:sticky;top:0;z-index:20;padding-top:env(safe-area-inset-top);box-shadow:0 2px 10px rgba(0,0,0,.18)}
html.standalone .site-footer{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
@media (max-width:820px){
  html.standalone .site-header .nav{display:none}
  html.standalone .header-inner{padding:10px 16px}
  html.standalone .hero{padding:18px 0 8px}
  html.standalone .hero .lede{font-size:.95rem}
  html.standalone body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  html.standalone .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(20,33,61,.97);backdrop-filter:blur(8px);padding:6px env(safe-area-inset-right) calc(6px + env(safe-area-inset-bottom)) env(safe-area-inset-left);box-shadow:0 -2px 12px rgba(0,0,0,.2)}
  html.standalone .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;color:#b8c4d6;text-decoration:none;font-size:.68rem;font-weight:600;padding:4px 0}
  html.standalone .tabbar a span{font-size:1.25rem;line-height:1.1}
  html.standalone .tabbar a[aria-current=page]{color:#7fd6ff}
}
.offline-pill{display:none;font-size:.72rem;font-weight:700;background:#f6c445;color:#14213d;border-radius:999px;padding:3px 10px}
html.is-offline .offline-pill{display:inline-block}
/* mobile overflow guard */
*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
.row2>*,.row3>*,.row4>*,.field,.calc>*,.inputs>*{min-width:0}
input,select,textarea{max-width:100%;min-width:0}