/* BizyFi site design system -- shared by every page (web/index.html, apply.html, apply/result.html,
   the 4 calculators, and every page under web/learn/). Originally extracted for the calculators
   alongside calc-core.js so 4 pages hand-maintaining identical header/footer/card CSS wouldn't drift
   the same way the math would have; widened site-wide 2026-09-21 when apply.html/result.html turned
   out to be duplicating these same tokens inline instead of sharing them. Each page still owns its
   own page-specific layout rules (e.g. a two-column grid vs a single form, or apply.html's form-field
   styling) in its own local <style> block. */
:root{
  --navy:#122844; --navy-dark:#0b1c30; --accent:#1c8a6e; --accent-dark:#146a54;
  --ink:#1a2430; --muted:#5b6b7c; --border:#d7dee5; --bg:#f5f7f9; --card:#ffffff;
  --notice-bg:#eef5ff; --notice-border:#bcdcff; --error:#b3261e; --error-bg:#fdecea;
  --band-strong:#1c8a6e; --band-ok:#3a7ca8; --band-tight:#b8860b; --band-weak:#b3261e;
}
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);}
header.bz-header{background:var(--navy);color:#fff;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
header.bz-header a.wordmark{font-weight:700;font-size:1.15rem;letter-spacing:.02em;color:#fff;text-decoration:none;}
header.bz-header .wordmark span{color:#8fd9c4;}

/* Site nav: a <nav class="site-nav"> with plain links plus one <details class="nav-dropdown"> for the
   calculators submenu. <details>/<summary> gives a working tap/click dropdown on both desktop and
   mobile with zero JavaScript. */
nav.site-nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
nav.site-nav a.nav-link,nav.site-nav summary.nav-link{color:#e8edf2;text-decoration:none;font-size:.88rem;font-weight:600;padding:8px 10px;border-radius:6px;}
nav.site-nav a.nav-link:hover,nav.site-nav summary.nav-link:hover{background:rgba(255,255,255,.1);}
nav.site-nav summary.nav-link{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:4px;}
nav.site-nav summary.nav-link::-webkit-details-marker{display:none;}
nav.site-nav summary.nav-link::after{content:"▾";font-size:.7em;}
.nav-dropdown{position:relative;}
.nav-dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(10,20,35,.18);padding:6px;min-width:220px;z-index:20;}
.nav-dropdown-menu a{display:block;padding:9px 10px;border-radius:6px;color:var(--ink);text-decoration:none;font-size:.88rem;}
.nav-dropdown-menu a:hover{background:var(--bg);}
nav.site-nav a.nav-cta{background:var(--accent);color:#fff;padding:9px 16px;border-radius:7px;font-weight:700;font-size:.88rem;text-decoration:none;margin-left:4px;}
nav.site-nav a.nav-cta:hover{background:var(--accent-dark);}
@media (max-width:640px){
  header.bz-header{padding:12px 16px;}
  nav.site-nav{width:100%;justify-content:flex-start;}
  .nav-dropdown-menu{left:auto;right:0;}
}

h1{font-size:1.6rem;margin:0 0 6px;}
.intro{color:var(--muted);max-width:640px;margin-bottom:24px;line-height:1.55;}
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:22px;}
.card h2{margin:0 0 14px;font-size:1.1rem;}
.field{margin-bottom:16px;}
.field label{display:block;font-weight:600;font-size:.88rem;margin-bottom:4px;}
.field .help{color:var(--muted);font-size:.78rem;margin-bottom:5px;}
.field input[type=number],.field select{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:7px;font-size:.95rem;background:#fff;color:var(--ink);}
.field input:focus,.field select:focus{outline:2px solid var(--accent);outline-offset:1px;}
.checkbox-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:16px;}
.checkbox-row input{margin-top:3px;}
.checkbox-row label{font-weight:400;font-size:.85rem;}
.result-row{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--border);}
.result-row:last-of-type{border-bottom:none;}
.result-label{font-size:.85rem;color:var(--muted);}
.result-value{font-size:1.3rem;font-weight:700;}
.band-pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.75rem;font-weight:700;color:#fff;margin-top:4px;}
.proxy-note{font-size:.76rem;color:var(--muted);margin-top:2px;}
.disclaimer{background:var(--notice-bg);border:1px solid var(--notice-border);border-radius:8px;padding:12px 14px;font-size:.8rem;line-height:1.5;margin-top:18px;}
.snapshot-notice{background:var(--notice-bg);border:1px solid var(--notice-border);border-radius:8px;padding:10px 14px;font-size:.8rem;line-height:1.4;margin-bottom:18px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.snapshot-notice button{background:none;border:none;color:var(--accent-dark);font-weight:700;font-size:.78rem;cursor:pointer;padding:0;text-decoration:underline;}
.btn-row{margin-top:20px;}
a.btn-primary{display:block;text-align:center;background:var(--accent);color:#fff;font-weight:700;padding:13px 20px;border-radius:8px;text-decoration:none;font-size:1rem;}
a.btn-primary:hover{background:var(--accent-dark);}
.cta-sub{font-size:.78rem;color:var(--muted);text-align:center;margin-top:8px;}
.explainer{margin-top:36px;}
.explainer h2{font-size:1.15rem;}
.explainer p{color:var(--muted);line-height:1.6;font-size:.92rem;}
.other-calcs{margin-top:28px;padding-top:20px;border-top:1px solid var(--border);}
.other-calcs h2{font-size:1rem;margin:0 0 10px;}
.other-calcs ul{margin:0;padding-left:20px;}
.other-calcs a{color:var(--accent-dark);}
footer.bz-footer{max-width:900px;margin:0 auto;padding:0 16px 60px;color:var(--muted);font-size:.78rem;line-height:1.5;}
footer.bz-footer a{color:var(--muted);}