/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root{
  --bg:#f5f7fa;
  --bg-grad-1:#eef4f6;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --surface-3:#f1f5f9;
  --text:#0f172a;
  --text-2:#334155;
  --muted:#64748b;
  --faint:#94a3b8;
  --border:#e2e8f0;
  --border-strong:#cbd5e1;

  --primary:#0f766e;
  --primary-600:#0d9488;
  --primary-300:#5eead4;
  --primary-50:#f0fdfa;
  --primary-100:#ccfbf1;

  --accent:#2563eb;
  --accent-50:#eff6ff;

  --ok:#15803d;
  --ok-bg:#f0fdf4;
  --warn:#b45309;
  --warn-bg:#fffbeb;
  --danger:#b91c1c;
  --danger-bg:#fef2f2;

  --radius-sm:8px;
  --radius:14px;
  --radius-lg:20px;
  --radius-full:999px;

  --shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --shadow:0 1px 2px rgba(15,23,42,.04), 0 10px 28px -14px rgba(15,23,42,.18);
  --shadow-lg:0 2px 4px rgba(15,23,42,.04), 0 24px 48px -24px rgba(15,23,42,.28);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --wrap:1120px;
  --gap:clamp(1rem, 2.2vw, 1.75rem);
  --transition:180ms cubic-bezier(.2,.7,.3,1);
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  color:var(--text);
  background:
    radial-gradient(1200px 500px at 10% -10%, var(--bg-grad-1), transparent 60%),
    radial-gradient(900px 500px at 95% 0%, #f0f7f6, transparent 55%),
    var(--bg);
  
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; display:block}
h1,h2,h3,h4{line-height:1.22; margin:0 0 .5em; font-weight:700; letter-spacing:-.015em; color:var(--text)}
h1{font-size:clamp(1.75rem, 4.2vw, 2.9rem)}
h2{font-size:clamp(1.35rem, 2.6vw, 1.85rem)}
h3{font-size:clamp(1.08rem, 1.9vw, 1.3rem)}
h4{font-size:1rem}
p{margin:0 0 1em}
a{color:var(--primary); text-underline-offset:3px}
a:hover{color:var(--primary-600)}
ul,ol{margin:0 0 1em; padding-left:1.25em}
li{margin-bottom:.35em}
small{font-size:.82rem}
hr{border:0; border-top:1px solid var(--border); margin:2rem 0}

:focus-visible{
  outline:3px solid var(--primary-600);
  outline-offset:2px;
  border-radius:6px;
}

.wrap{width:min(100% - 2rem, var(--wrap)); margin-inline:auto}
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
[hidden]{display:none!important}

/* ============================================================
   3. HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; min-height:62px;
}
.brand{
  display:inline-flex; align-items:center; gap:.55rem;
  text-decoration:none; color:var(--text); font-weight:800; letter-spacing:-.02em;
}
.brand-mark{
  width:30px; height:30px; display:grid; place-items:center;
  border-radius:9px;
  background:linear-gradient(140deg, var(--primary-600), var(--primary));
  color:#fff; font-size:15px; box-shadow:var(--shadow-sm);
}
.brand-text span{color:var(--primary)}
.site-nav{display:flex; gap:.25rem; flex-wrap:wrap}
.site-nav a{
  text-decoration:none; color:var(--text-2); font-weight:600; font-size:.9rem;
  padding:.45rem .7rem; border-radius:var(--radius-full);
  transition:background var(--transition), color var(--transition);
}
.site-nav a:hover{background:var(--surface-3); color:var(--text)}
@media (max-width:640px){ .site-nav{display:none} }

/* ============================================================
   4. HERO
   ============================================================ */
.hero{padding:clamp(2rem,5vw,3.5rem) 0 clamp(1.25rem,3vw,2rem)}
.hero-inner{max-width:780px}
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--primary); background:var(--primary-50);
  border:1px solid var(--primary-100);
  padding:.35rem .75rem; border-radius:var(--radius-full); margin-bottom:1rem;
}
.hero p.lead{font-size:clamp(1rem,1.6vw,1.16rem); color:var(--text-2); max-width:64ch}
.hero-meta{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.25rem}
.pill{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--surface); border:1px solid var(--border);
  padding:.35rem .75rem; border-radius:var(--radius-full);
  font-size:.8rem; font-weight:600; color:var(--text-2); box-shadow:var(--shadow-sm);
}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--primary-600)}
.pill.local .dot{background:var(--accent)}

/* ============================================================
   5. CARDS & LAYOUT
   ============================================================ */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:clamp(1.1rem,2.4vw,1.75rem);
  margin-bottom:var(--gap);
}
.section{padding:clamp(1.25rem,3vw,2.25rem) 0}
.section-head{max-width:70ch; margin-bottom:1.25rem}
.section-head p{color:var(--muted); margin:0}

.grid{display:grid; gap:var(--gap)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

/* ============================================================
   6. FORM
   ============================================================ */
fieldset{border:0; padding:0; margin:0 0 1.5rem}
fieldset:last-of-type{margin-bottom:.5rem}
legend{
  font-weight:700; font-size:1.02rem; padding:0; margin:0 0 .15rem;
  display:flex; align-items:center; gap:.55rem;
}
.legend-num{
  display:inline-grid; place-items:center; width:24px; height:24px; flex:0 0 24px;
  border-radius:7px; background:var(--primary-50); color:var(--primary);
  font-size:.78rem; font-weight:800; border:1px solid var(--primary-100);
}
.field-hint{color:var(--muted); font-size:.85rem; margin:.15rem 0 1rem; max-width:70ch}

.field{margin-bottom:1rem; min-width:0}
.field > label, .label{
  display:block; font-weight:600; font-size:.88rem;
  margin-bottom:.35rem; color:var(--text-2);
}
.input, select, textarea{
  width:100%; font:inherit; font-size:.95rem; color:var(--text);
  background:var(--surface);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  padding:.62rem .75rem;
  transition:border-color var(--transition), box-shadow var(--transition), background var(--transition);
  appearance:none;
}
select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right .7rem center;
  padding-right:2.1rem;
}
.input:hover, select:hover{border-color:var(--faint)}
.input:focus, select:focus{
  outline:none; border-color:var(--primary-600);
  box-shadow:0 0 0 3px rgba(13,148,136,.16);
}
.input[readonly]{background:var(--surface-3); color:var(--text-2); cursor:default}
.input.is-invalid, select.is-invalid{border-color:var(--danger); box-shadow:0 0 0 3px rgba(185,28,28,.12)}

.error-msg{
  display:none; color:var(--danger); font-size:.82rem; margin-top:.3rem; font-weight:600;
}
.error-msg.show{display:block}

/* Radio / choice chips */
.choices{display:flex; flex-wrap:wrap; gap:.5rem}
.choice{position:relative}
.choice input{position:absolute; opacity:0; width:1px; height:1px}
.choice label{
  display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
  padding:.5rem .9rem; border-radius:var(--radius-full);
  border:1px solid var(--border-strong); background:var(--surface);
  font-size:.88rem; font-weight:600; color:var(--text-2);
  transition:all var(--transition); user-select:none; margin:0;
}
.choice label:hover{border-color:var(--primary-300); background:var(--primary-50)}
.choice input:checked + label{
  background:var(--primary); border-color:var(--primary); color:#fff;
  box-shadow:0 4px 12px -4px rgba(15,118,110,.5);
}
.choice input:focus-visible + label{outline:3px solid var(--primary-600); outline-offset:2px}

/* Unit toggle */
.unit-row{display:flex; align-items:flex-start; gap:.5rem}
.unit-row > .field{flex:1 1 auto}
.unit-toggle{
  display:inline-flex; background:var(--surface-3); border:1px solid var(--border);
  border-radius:var(--radius-full); padding:3px; gap:2px; flex:0 0 auto;
}
.unit-toggle button{
  font:inherit; font-size:.78rem; font-weight:700; cursor:pointer;
  border:0; background:transparent; color:var(--muted);
  padding:.35rem .7rem; border-radius:var(--radius-full);
  transition:all var(--transition);
}
.unit-toggle button[aria-pressed="true"]{background:var(--surface); color:var(--primary); box-shadow:var(--shadow-sm)}

/* BMI readout */
.readout{
  display:flex; flex-wrap:wrap; align-items:center; gap:.75rem;
  background:var(--surface-2); border:1px dashed var(--border-strong);
  border-radius:var(--radius); padding:.75rem 1rem; margin-top:.35rem;
}
.readout .big{font-size:1.5rem; font-weight:800; letter-spacing:-.02em; color:var(--text)}
.readout .cat{
  font-size:.78rem; font-weight:700; padding:.22rem .6rem; border-radius:var(--radius-full);
  background:var(--surface-3); color:var(--text-2);
}
.readout .cat.ok{background:var(--ok-bg); color:var(--ok)}
.readout .cat.warn{background:var(--warn-bg); color:var(--warn)}
.readout .cat.alert{background:var(--danger-bg); color:var(--danger)}

/* Combobox */
.combo{position:relative}
.combo input[type="text"]{padding-right:2.2rem}
.combo-list{
  position:absolute; z-index:40; top:calc(100% + 4px); left:0; right:0;
  max-height:264px; overflow-y:auto; margin:0; padding:.3rem;
  list-style:none; background:var(--surface);
  border:1px solid var(--border-strong); border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
}
.combo-list li{
  margin:0; padding:.5rem .65rem; border-radius:var(--radius-sm);
  cursor:pointer; font-size:.9rem; display:flex; justify-content:space-between; gap:.5rem;
}
.combo-list li:hover, .combo-list li[aria-selected="true"]{background:var(--primary-50); color:var(--primary)}
.combo-list li .le{color:var(--muted); font-size:.78rem; font-variant-numeric:tabular-nums}
.combo-empty{padding:.7rem; color:var(--muted); font-size:.88rem; text-align:center}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font:inherit; font-size:.95rem; font-weight:700; cursor:pointer;
  border-radius:var(--radius-full); border:1px solid transparent;
  padding:.8rem 1.4rem; min-height:48px;
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  text-decoration:none; white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:linear-gradient(140deg, var(--primary-600), var(--primary));
  color:#fff; box-shadow:0 10px 24px -12px rgba(15,118,110,.85);
}
.btn-primary:hover{box-shadow:0 14px 30px -12px rgba(15,118,110,.95); color:#fff}
.btn-secondary{background:var(--surface); border-color:var(--border-strong); color:var(--text-2)}
.btn-secondary:hover{border-color:var(--primary-300); color:var(--primary); background:var(--primary-50)}
.btn-ghost{background:transparent; color:var(--muted); padding:.6rem 1rem; min-height:auto}
.btn-ghost:hover{color:var(--primary); background:var(--primary-50)}
.btn-lg{font-size:1.05rem; padding:1rem 2rem; min-height:56px}
.btn-block{width:100%}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.actions{display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; margin-top:1.25rem}

/* ============================================================
   7. DISCLAIMER BANNERS
   ============================================================ */
.disclaimer{
  display:flex; gap:.85rem; align-items:flex-start;
  background:var(--warn-bg); border:1px solid #fde68a;
  border-left:4px solid var(--warn);
  border-radius:var(--radius); padding:1rem 1.1rem; margin-bottom:var(--gap);
}
.disclaimer .ico{flex:0 0 auto; width:22px; height:22px; color:var(--warn); margin-top:2px}
.disclaimer p{margin:0; font-size:.87rem; color:#78350f; line-height:1.55}
.disclaimer strong{color:#7c2d12}
.disclaimer.compact{padding:.7rem .9rem; font-size:.8rem; background:var(--surface-3); border-color:var(--border); border-left-color:var(--faint)}
.disclaimer.compact p{font-size:.78rem; color:var(--muted)}

/* ============================================================
   8. RESULTS
   ============================================================ */
#results{margin-top:var(--gap)}
.result-hero{
  background:
    radial-gradient(700px 260px at 90% -30%, rgba(94,234,212,.22), transparent 60%),
    linear-gradient(150deg, #0b3b39 0%, #0f766e 55%, #0d9488 100%);
  color:#fff; border:0;
  box-shadow:var(--shadow-lg);
}
.result-hero h2{color:#fff; margin-bottom:.15rem}
.result-hero .sub{color:rgba(255,255,255,.78); font-size:.9rem; margin-bottom:1.5rem}
.result-main{
  display:grid; gap:var(--gap);
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  align-items:start;
}
@media (max-width:760px){ .result-main{grid-template-columns:1fr} }

.big-number{
  font-size:clamp(3rem, 10vw, 4.6rem);
  font-weight:800; line-height:1; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
.big-number .unit{font-size:.34em; font-weight:700; opacity:.75; margin-left:.15em; letter-spacing:0}
.big-label{font-size:.82rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.72); margin-bottom:.5rem}
.range-chip{
  display:inline-flex; align-items:center; gap:.45rem; margin-top:.85rem;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24);
  padding:.35rem .8rem; border-radius:var(--radius-full);
  font-size:.83rem; font-weight:600; font-variant-numeric:tabular-nums;
}
.range-note{font-size:.75rem; color:rgba(255,255,255,.62); margin-top:.5rem; max-width:44ch}

.mini-grid{
  display:grid; gap:.6rem;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
}
.mini{
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius); padding:.8rem .9rem;
}
.mini .k{font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; color:rgba(255,255,255,.68); font-weight:700; margin-bottom:.2rem}
.mini .v{font-size:1.24rem; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.15}
.mini .v small{font-size:.62em; font-weight:700; opacity:.75; margin-left:.15em}
.mini .n{font-size:.72rem; color:rgba(255,255,255,.62); margin-top:.15rem}

/* Stat cards (light) */
.stat{
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius); padding:1rem;
}
.stat .k{font-size:.76rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; margin-bottom:.25rem}
.stat .v{font-size:1.5rem; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.stat .v small{font-size:.6em; font-weight:700; color:var(--muted); margin-left:.15em}
.stat .n{font-size:.78rem; color:var(--muted); margin-top:.2rem}

/* Score */
.score-wrap{display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap}
.score-dial{flex:0 0 auto; position:relative; width:132px; height:132px}
.score-dial svg{transform:rotate(-90deg)}
.score-dial .val{
  position:absolute; inset:0; display:grid; place-content:center; text-align:center;
}
.score-dial .val b{font-size:1.7rem; font-weight:800; letter-spacing:-.03em; display:block; line-height:1}
.score-dial .val span{font-size:.72rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.06em}
.score-text{flex:1 1 220px; min-width:0}
.score-badge{
  display:inline-block; font-size:.78rem; font-weight:800; padding:.25rem .7rem;
  border-radius:var(--radius-full); margin-bottom:.5rem;
}

/* Progress bars */
.bar-row{display:grid; grid-template-columns:110px 1fr 52px; gap:.65rem; align-items:center; margin-bottom:.6rem; font-size:.85rem}
.bar-row .lbl{font-weight:600; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bar-track{height:9px; background:var(--surface-3); border-radius:var(--radius-full); overflow:hidden}
.bar-fill{height:100%; border-radius:var(--radius-full); background:linear-gradient(90deg,var(--primary-300),var(--primary)); transition:width 700ms cubic-bezier(.2,.7,.3,1)}
.bar-row .num{text-align:right; font-variant-numeric:tabular-nums; font-weight:700; color:var(--text-2); font-size:.82rem}
@media (max-width:520px){ .bar-row{grid-template-columns:88px 1fr 46px; font-size:.8rem} }

/* Tables */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:var(--radius)}
table{width:100%; border-collapse:collapse; font-size:.88rem; min-width:420px}
caption{text-align:left; padding:.75rem 1rem; color:var(--muted); font-size:.82rem}
th,td{padding:.6rem .9rem; text-align:left; border-bottom:1px solid var(--border)}
th{background:var(--surface-2); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); position:sticky; top:0}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
td.num, th.num{text-align:right; font-variant-numeric:tabular-nums}

/* Charts */
.chart-figure{margin:0}
.chart-figure svg{width:100%; height:auto; display:block; overflow:visible}
.chart-figure figcaption{font-size:.8rem; color:var(--muted); margin-top:.6rem}

/* Accordion */
details.acc{
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface); margin-bottom:.7rem; overflow:hidden;
}
details.acc > summary{
  cursor:pointer; list-style:none; padding:.9rem 1.1rem;
  font-weight:700; font-size:.95rem; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  transition:background var(--transition);
}
details.acc > summary::-webkit-details-marker{display:none}
details.acc > summary:hover{background:var(--surface-2)}
details.acc > summary::after{
  content:""; flex:0 0 auto; width:11px; height:11px;
  border-right:2.4px solid var(--muted); border-bottom:2.4px solid var(--muted);
  transform:rotate(45deg); transition:transform var(--transition); margin-top:-4px;
}
details.acc[open] > summary::after{transform:rotate(-135deg); margin-top:4px}
details.acc .acc-body{padding:0 1.1rem 1.2rem; font-size:.92rem; color:var(--text-2)}
details.acc .acc-body > *:first-child{margin-top:0}

/* Calculation details list */
.calc-list{list-style:none; padding:0; margin:0}
.calc-list li{
  display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0;
  border-bottom:1px dashed var(--border); font-variant-numeric:tabular-nums; margin:0;
}
.calc-list li:last-child{border-bottom:0; font-weight:800; color:var(--text); font-size:1.02rem; padding-top:.75rem}
.calc-list .k{color:var(--text-2); font-weight:600}
.calc-list .v{font-weight:700; white-space:nowrap}

/* Tag chips */
.tag{
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.7rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  padding:.2rem .55rem; border-radius:var(--radius-full);
}
.tag.fav{background:var(--ok-bg); color:var(--ok)}
.tag.unfav{background:var(--danger-bg); color:var(--danger)}
.tag.neutral{background:var(--surface-3); color:var(--muted)}
.tag.assumption{background:var(--accent-50); color:var(--accent)}

/* Sliders */
.slider-row{margin-bottom:1.05rem}
.slider-head{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.3rem}
.slider-head .name{font-weight:600; font-size:.88rem; color:var(--text-2)}
.slider-head .val{font-weight:800; font-size:.92rem; color:var(--primary); font-variant-numeric:tabular-nums}
input[type="range"]{
  -webkit-appearance:none; appearance:none; width:100%; height:22px;
  background:transparent; cursor:pointer; margin:0;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:6px; border-radius:var(--radius-full); background:var(--surface-3); border:1px solid var(--border);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%;
  background:#fff; border:3px solid var(--primary-600); margin-top:-9px;
  box-shadow:0 2px 6px rgba(15,23,42,.22); transition:transform var(--transition);
}
input[type="range"]::-webkit-slider-thumb:active{transform:scale(1.12)}
input[type="range"]::-moz-range-track{height:6px; border-radius:var(--radius-full); background:var(--surface-3); border:1px solid var(--border)}
input[type="range"]::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--primary-600); box-shadow:0 2px 6px rgba(15,23,42,.22)}
input[type="range"]:disabled{opacity:.45; cursor:not-allowed}

/* Tooltip */
.tip{
  display:inline-grid; place-items:center; width:16px; height:16px; border-radius:50%;
  background:var(--surface-3); color:var(--muted); font-size:.66rem; font-weight:800;
  cursor:help; vertical-align:middle; margin-left:.25rem; border:1px solid var(--border);
}
.tip:hover{background:var(--primary-50); color:var(--primary); border-color:var(--primary-300)}

/* Callouts */
.callout{
  border-radius:var(--radius); padding:1rem 1.15rem;
  background:var(--accent-50); border:1px solid #dbeafe; color:#1e3a8a;
  font-size:.88rem;
}
.callout.warn{background:var(--warn-bg); border-color:#fde68a; color:#78350f}
.callout.ok{background:var(--ok-bg); border-color:#bbf7d0; color:#14532d}
.callout p:last-child{margin-bottom:0}

/* SEO content */
.prose{max-width:78ch}
.prose h2{margin-top:2.25rem}
.prose h3{margin-top:1.75rem}
.prose p, .prose li{color:var(--text-2)}
.prose ul{padding-left:1.3rem}

/* FAQ */
.faq-list details{
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface); margin-bottom:.6rem; overflow:hidden;
}
.faq-list summary{
  cursor:pointer; list-style:none; padding:.95rem 1.1rem; font-weight:700; font-size:.95rem;
  display:flex; justify-content:space-between; gap:1rem; align-items:flex-start;
  transition:background var(--transition);
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{background:var(--surface-2)}
.faq-list summary::after{
  content:"+"; flex:0 0 auto; font-size:1.35rem; line-height:1; color:var(--primary); font-weight:400;
  transition:transform var(--transition);
}
.faq-list details[open] summary::after{content:"–"}
.faq-list .ans{padding:0 1.1rem 1.1rem; font-size:.9rem; color:var(--text-2)}
.faq-list .ans p:last-child{margin-bottom:0}

/* Footer */
.site-footer{
  border-top:1px solid var(--border); background:var(--surface);
  padding:2.25rem 0 2.5rem; margin-top:2rem;
}
.footer-grid{display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.site-footer h4{font-size:.82rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:.6rem}
.site-footer ul{list-style:none; padding:0; margin:0}
.site-footer li{margin-bottom:.35rem}
.site-footer a{color:var(--text-2); text-decoration:none; font-size:.88rem}
.site-footer a:hover{color:var(--primary); text-decoration:underline}
.footer-bottom{
  margin-top:1.75rem; padding-top:1.25rem; border-top:1px solid var(--border);
  font-size:.8rem; color:var(--muted); display:flex; flex-wrap:wrap; gap:.75rem; justify-content:space-between;
}

/* Toasts */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%, 140%);
  background:#0f172a; color:#fff; padding:.75rem 1.15rem; border-radius:var(--radius-full);
  font-size:.88rem; font-weight:600; z-index:200; box-shadow:var(--shadow-lg);
  transition:transform 320ms cubic-bezier(.2,.7,.3,1); max-width:90vw; text-align:center;
}
.toast.show{transform:translate(-50%, 0)}

/* Fade-in animation for results */
@keyframes fadeUp{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.animate-in{animation:fadeUp 420ms cubic-bezier(.2,.7,.3,1) both}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important}
}

/* ============================================================
   9. PRINT
   ============================================================ */
@media print{
  body{background:#fff; font-size:11pt}
  .site-header, .site-nav, .hero, #calculator, .no-print, .site-footer, .toast{display:none!important}
  .card{box-shadow:none; border:1px solid #ccc; break-inside:avoid; page-break-inside:avoid; margin-bottom:12pt}
  .result-hero{background:#0f766e!important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  #results{display:block!important}
  a[href]::after{content:""}
  details.acc{break-inside:avoid}
  details.acc[open] .acc-body{display:block}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr 1fr}
}

/* ===== DARK THEME (opt-in via header toggle; site defaults to light) ===== */
.theme-toggle{flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font-size:17px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background var(--transition),border-color var(--transition)}
.theme-toggle:hover{border-color:var(--primary-300);background:var(--primary-50)}
.header-actions{display:flex;align-items:center;gap:.5rem}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0b1216;--bg-grad-1:#0f1c20;--surface:#131d22;--surface-2:#182329;--surface-3:#1e2b32;
  --text:#e6edf2;--text-2:#c3cfd8;--muted:#93a4b0;--faint:#6f8290;--border:#25343c;--border-strong:#33454f;
  --primary:#2dd4bf;--primary-600:#14b8a6;--primary-300:#14b8a6;--primary-50:#0f2a2a;--primary-100:#134e4a;
  --accent:#60a5fa;--accent-50:#12233f;--ok:#4ade80;--ok-bg:#0f2a1a;--warn:#fbbf24;--warn-bg:#2a2210;--danger:#f87171;--danger-bg:#2d1518;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);--shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px -14px rgba(0,0,0,.6);--shadow-lg:0 2px 4px rgba(0,0,0,.3),0 24px 48px -24px rgba(0,0,0,.7);
}
:root[data-theme="dark"] body{background:radial-gradient(1200px 500px at 10% -10%,#102227,transparent 60%),radial-gradient(900px 500px at 95% 0%,#0e1c1f,transparent 55%),var(--bg)}
:root[data-theme="dark"] .site-header{background:rgba(19,29,34,.86)}
:root[data-theme="dark"] .btn-primary,:root[data-theme="dark"] .choice input:checked + label{background:linear-gradient(140deg,#0d9488,#0f766e);border-color:#0d9488;color:#fff}
:root[data-theme="dark"] .disclaimer{border-color:#5b4a1a;border-left-color:var(--warn)}
:root[data-theme="dark"] .disclaimer p,:root[data-theme="dark"] .callout.warn{color:#fde68a}
:root[data-theme="dark"] .disclaimer strong{color:#fef3c7}
:root[data-theme="dark"] .disclaimer.compact p{color:var(--muted)}
:root[data-theme="dark"] .callout{border-color:#1e3a5f;color:#bfdbfe}
:root[data-theme="dark"] .callout.warn{border-color:#5b4a1a}
:root[data-theme="dark"] .callout.ok{border-color:#14532d;color:#bbf7d0}
:root[data-theme="dark"] .toast{background:#e6edf2;color:#0f172a}
:root[data-theme="dark"] .input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{color-scheme:dark}
:root[data-theme="dark"] svg [fill="#0f172a"]{fill:#e6edf2}
:root[data-theme="dark"] svg [fill="#334155"]{fill:#c3cfd8}
:root[data-theme="dark"] svg [fill="#f1f5f9"]{fill:#1e2b32}
:root[data-theme="dark"] svg [fill="#fff"]{fill:#131d22}
:root[data-theme="dark"] svg [stroke="#e2e8f0"]{stroke:#25343c}
:root[data-theme="dark"] svg [stroke="#cbd5e1"]{stroke:#33454f}