/* ClearLoan shared stylesheet */
:root{
  --bg:#f4f6fa;
  --card:#ffffff;
  --ink:#16233b;
  --ink-soft:#4c5a72;
  --line:#dde3ee;
  --accent:#155eef;
  --accent-ink:#0f4ac0;
  --accent-soft:#e8efff;
  --good:#067a57;
  --good-soft:#e2f5ee;
  --series-1:#2a78d6;   /* validated chart slot 1 (blue)   */
  --series-2:#eb6834;   /* validated chart slot 2 (orange) */
  --viz-grid:#e1e0d9;
  --viz-muted:#898781;
  --radius:14px;
  --shadow:0 1px 2px rgba(22,35,59,.06),0 8px 24px rgba(22,35,59,.07);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.6;font-size:16px;
}
a{color:var(--accent-ink)}
.wrap{max-width:960px;margin:0 auto;padding:0 16px}

/* ---------- Site navigation ---------- */
.sitenav{background:#0b2f7a;color:#fff}
.sitenav .bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 0;
}
.sitenav .brand{
  display:flex;align-items:center;gap:8px;font-weight:700;font-size:1rem;
  color:#fff;text-decoration:none;margin-right:auto;letter-spacing:.2px;padding:6px 0;
}
.sitenav .links{display:flex;gap:2px;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.sitenav .links a{
  color:#cfe0ff;text-decoration:none;font-size:.9rem;font-weight:600;
  padding:8px 11px;border-radius:8px;white-space:nowrap;
}
.sitenav .links a:hover{background:#ffffff1c;color:#fff}
.sitenav .links a[aria-current="page"]{background:#ffffff2b;color:#fff}
.sitenav .links a:focus-visible{outline:3px solid #fff;outline-offset:-3px}

/* ---------- Headers ---------- */
header.hero{
  background:linear-gradient(135deg,#0b2f7a 0%,#155eef 100%);
  color:#fff;padding:36px 0 44px;
}
header.hero h1{font-size:clamp(1.6rem,4.5vw,2.3rem);line-height:1.2;font-weight:800;max-width:36ch}
header.hero p.tagline{margin-top:10px;max-width:62ch;color:#dbe6ff;font-size:1.02rem}
.breadcrumb{font-size:.83rem;color:#b9ccf7;margin-bottom:14px}
.breadcrumb a{color:#dbe6ff;text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}

main{margin-top:-22px;padding-bottom:48px}
header.hero.compact{padding:26px 0 40px}

/* ---------- Cards & layout ---------- */
.card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;
}
.card h2{font-size:1.05rem;font-weight:700;margin-bottom:16px;color:var(--ink)}
.calc{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:760px){
  .calc{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}
}

/* ---------- Form ---------- */
.field{margin-bottom:16px}
.field:last-child{margin-bottom:0}
.field label{display:block;font-weight:600;font-size:.92rem;margin-bottom:6px;color:var(--ink)}
.field .hint{font-weight:400;color:var(--ink-soft);font-size:.82rem;margin-left:4px}
.inputbox{position:relative;display:flex;align-items:center}
.inputbox .affix{position:absolute;color:var(--ink-soft);font-weight:600;font-size:1rem;pointer-events:none}
.inputbox .prefix{left:14px}
.inputbox .suffix{right:14px}
.inputbox input,.inputbox select{
  width:100%;font-size:1.15rem;font-weight:600;color:var(--ink);
  padding:13px 14px;border:1.5px solid var(--line);border-radius:10px;
  background:#fbfcfe;outline:none;min-height:52px;
  transition:border-color .15s,box-shadow .15s;font-family:inherit;
}
.inputbox input.has-prefix{padding-left:32px}
.inputbox input.has-suffix{padding-right:48px}
.inputbox input:focus,.inputbox select:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(21,94,239,.18);background:#fff;
}
.inputbox input[aria-invalid="true"]{border-color:#c22a2a}
.err{display:none;color:#a52020;font-size:.82rem;margin-top:5px;font-weight:500}
.err.show{display:block}
.fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:420px){.fieldrow{grid-template-columns:1fr}}

/* ---------- Results ---------- */
.results .status{color:var(--ink-soft);font-size:.95rem;padding:8px 0}
.headline{background:var(--accent-soft);border-radius:12px;padding:18px;margin-bottom:14px}
.headline .lbl{font-size:.85rem;font-weight:600;color:var(--accent-ink);text-transform:uppercase;letter-spacing:.4px}
.headline .num{font-size:clamp(1.9rem,6vw,2.6rem);font-weight:800;color:var(--accent-ink);line-height:1.15;font-variant-numeric:tabular-nums}
.headline .sub{font-size:.88rem;color:var(--ink-soft);margin-top:2px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:420px){.grid2{grid-template-columns:1fr}}
.stat{border:1px solid var(--line);border-radius:12px;padding:13px 15px}
.stat .lbl{font-size:.8rem;font-weight:600;color:var(--ink-soft)}
.stat .num{font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums}
.savings{
  display:none;margin-top:14px;background:var(--good-soft);border-radius:12px;
  padding:13px 15px;color:var(--good);font-size:.93rem;font-weight:600;
}
.savings.show{display:block}
.savings strong{font-weight:800}

/* Payment breakdown rows (mortgage) */
.breakdown{margin-top:14px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.breakdown .row{
  display:flex;justify-content:space-between;gap:12px;padding:9px 15px;
  font-size:.92rem;border-top:1px solid var(--line);
}
.breakdown .row:first-child{border-top:0}
.breakdown .row .k{color:var(--ink-soft);font-weight:600}
.breakdown .row .v{font-weight:700;font-variant-numeric:tabular-nums}
.breakdown .row.total{background:#f0f3f9}

/* ---------- Buttons ---------- */
.btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.btn{
  font:inherit;font-size:.88rem;font-weight:600;padding:9px 15px;min-height:40px;
  border:1.5px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);
  cursor:pointer;display:inline-flex;align-items:center;gap:7px;text-decoration:none;
}
.btn:hover{border-color:var(--accent);color:var(--accent-ink)}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.btn svg{flex:none}

/* ---------- Chart ---------- */
.chart-card{margin-top:20px}
.chart-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.chart-head h2{margin-bottom:0}
.chart-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.84rem;color:var(--ink-soft);font-weight:600}
.chart-legend .chip{display:inline-flex;align-items:center;gap:7px}
.chart-legend .swatch{width:14px;height:4px;border-radius:2px;display:inline-block}
.chart-box{position:relative}
.chart-box svg{display:block;width:100%;height:auto}
.chart-tip{
  position:absolute;pointer-events:none;background:#16233b;color:#fff;
  border-radius:8px;padding:8px 11px;font-size:.8rem;line-height:1.45;
  box-shadow:0 4px 14px rgba(22,35,59,.3);opacity:0;transition:opacity .1s;
  white-space:nowrap;z-index:2;font-variant-numeric:tabular-nums;
}
.chart-tip .t{font-weight:700;margin-bottom:2px}
.chart-tip .r{display:flex;align-items:center;gap:6px}
.chart-tip .dot{width:8px;height:8px;border-radius:50%;display:inline-block}

/* ---------- Schedule ---------- */
.schedule{margin-top:20px}
details.sched{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
}
details.sched summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
  padding:16px 22px;font-weight:700;font-size:1rem;user-select:none;
}
details.sched summary::-webkit-details-marker{display:none}
details.sched summary:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;border-radius:var(--radius)}
details.sched summary .chev{transition:transform .2s;color:var(--ink-soft);flex:none}
details.sched[open] summary .chev{transform:rotate(180deg)}
.sched-body{padding:0 22px 20px}
.sched-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.viewtoggle{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.viewtoggle button{
  font:inherit;font-size:.88rem;font-weight:600;padding:7px 16px;border:0;cursor:pointer;
  background:#fff;color:var(--ink-soft);min-height:38px;
}
.viewtoggle button[aria-pressed="true"]{background:var(--accent);color:#fff}
.viewtoggle button:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;max-height:420px;overflow-y:auto}
table.amort{border-collapse:collapse;width:100%;font-size:.9rem;min-width:520px}
table.amort caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
table.amort th,table.amort td{padding:9px 14px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.amort th:first-child,table.amort td:first-child{text-align:left}
table.amort thead th{
  position:sticky;top:0;background:#f0f3f9;color:var(--ink-soft);
  font-size:.8rem;text-transform:uppercase;letter-spacing:.4px;z-index:1;
}
table.amort tbody tr{border-top:1px solid var(--line)}
table.amort tbody tr:nth-child(even){background:#fafbfe}

/* ---------- Hub (tool cards) ---------- */
.toolgrid{display:grid;gap:16px;grid-template-columns:1fr;margin-top:0}
@media(min-width:640px){.toolgrid{grid-template-columns:1fr 1fr}}
.toolcard{
  display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px;text-decoration:none;color:var(--ink);
  transition:border-color .15s,transform .15s;
}
.toolcard:hover{border-color:var(--accent);transform:translateY(-2px)}
.toolcard:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.toolcard .ico{
  width:42px;height:42px;border-radius:10px;background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--accent-ink);
}
.toolcard h2,.toolcard h3{font-size:1.08rem;font-weight:750;margin-bottom:6px}
.toolcard p{color:var(--ink-soft);font-size:.92rem;line-height:1.55}
.toolcard .go{display:inline-block;margin-top:10px;font-weight:700;font-size:.88rem;color:var(--accent-ink)}

/* ---------- Related tools ---------- */
.related{margin-top:26px}
.related h2{font-size:1.05rem;margin-bottom:12px}
.related ul{list-style:none;display:flex;gap:10px;flex-wrap:wrap}
.related a{
  display:inline-block;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:8px 16px;font-size:.88rem;font-weight:600;text-decoration:none;color:var(--accent-ink);
}
.related a:hover{border-color:var(--accent);background:var(--accent-soft)}

/* ---------- Ad slots ---------- */
.ad-slot{margin:22px auto;text-align:center}

/* ---------- Article ---------- */
article{margin-top:40px}
article .card{padding:28px 24px}
@media(min-width:760px){article .card{padding:36px 40px}}
article h2{font-size:1.35rem;margin:26px 0 10px;font-weight:750}
article h2:first-child{margin-top:0}
article h3{font-size:1.05rem;margin:18px 0 6px;font-weight:700}
article p{margin:10px 0;color:var(--ink-soft);max-width:72ch}
article li{color:var(--ink-soft);margin:6px 0 6px 22px;max-width:70ch}
article .formula{
  background:#f0f3f9;border-radius:10px;padding:14px 18px;margin:14px 0;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.95rem;color:var(--ink);
  overflow-x:auto;
}
.faq dt{font-weight:700;margin-top:18px;color:var(--ink)}
.faq dd{margin:6px 0 0;color:var(--ink-soft);max-width:72ch}

/* ---------- Prose pages (about/privacy/contact) ---------- */
.prose{margin-top:36px}
.prose h2{font-size:1.25rem;margin:24px 0 8px}
.prose p,.prose li{color:var(--ink-soft)}
.prose li{margin:6px 0 6px 22px}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);padding:26px 0 34px;margin-top:20px;color:var(--ink-soft);font-size:.85rem}
footer .fnav{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:14px}
footer .fnav a{color:var(--ink);font-weight:600;text-decoration:none}
footer .fnav a:hover{color:var(--accent-ink);text-decoration:underline}
footer p{max-width:80ch}
footer .byline{margin-bottom:10px;color:var(--ink);font-weight:500}
footer .byline a{color:var(--accent-ink)}

@media(max-width:420px){
  .card{padding:18px}
  .sched-body{padding:0 16px 16px}
  details.sched summary{padding:14px 16px}
}

/* ---------- Print ---------- */
@media print{
  body{background:#fff}
  .sitenav,.ad-slot,.btnrow,.sched-tools,.related,footer .fnav,.chart-card{display:none!important}
  header.hero{background:none;color:#000;padding:10px 0}
  header.hero p.tagline,.breadcrumb{display:none}
  main{margin-top:0}
  .card,details.sched{box-shadow:none;border-color:#bbb}
  .tablewrap{max-height:none;overflow:visible;border:0}
  details.sched summary .chev{display:none}
  article{display:none}
  .headline{border:1px solid #bbb;background:#fff}
  .headline .num,.headline .lbl{color:#000}
}