/* ---------- tokens ---------- */
:root{
  --bg:#EEF1EF;
  --surface:#F8FAF9;
  --surface-2:#DEE5E1;
  --text:#14181A;
  --text-muted:#54615A;
  --accent:#16A34A;
  --accent-ink:#0F7A3D;
  --accent-text:#F8FAF9;
  --line:#D3DBD6;
  --positive:#16A34A;
  --negative:#DC2626;
  --font-display:'JetBrains Mono', 'Consolas', monospace;
  --font-body:'Manrope', -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1210;
    --surface:#161B18;
    --surface-2:#1F2622;
    --text:#E7EEEA;
    --text-muted:#9DB0A5;
    --accent:#34E88A;
    --accent-ink:#5EF0A0;
    --accent-text:#0E1210;
    --line:#2A322D;
    --positive:#34E88A;
    --negative:#F87171;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1210;
  --surface:#161B18;
  --surface-2:#1F2622;
  --text:#E7EEEA;
  --text-muted:#9DB0A5;
  --accent:#34E88A;
  --accent-ink:#5EF0A0;
  --accent-text:#0E1210;
  --line:#2A322D;
  --positive:#34E88A;
  --negative:#F87171;
  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }
img{ max-width:100%; display:block; }

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-0.01em;
  text-wrap:balance;
  margin:0;
}

.eyebrow{
  font-family:var(--font-display);
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--accent-ink);
  margin:0 0 0.8rem;
}

.mono, .num{ font-family:var(--font-display); font-variant-numeric:tabular-nums; }

section{ padding:4.5rem 6vw; }
@media (max-width:640px){ section{ padding:3rem 6vw; } }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.2rem 6vw;
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
  gap:0.8rem;
}
.wordmark{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.05rem;
  text-decoration:none;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:0.4rem;
}
.wordmark__dot{ color:var(--accent); }
.site-nav{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.site-nav a{
  text-decoration:none;
  font-size:0.88rem;
  font-weight:600;
  color:var(--text-muted);
  transition:color 0.15s ease;
}
.site-nav a:hover{ color:var(--text); }
.site-nav a.is-active{ color:var(--accent-ink); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.85rem 1.5rem;
  border-radius:6px;
  text-decoration:none;
  font-family:var(--font-body);
  font-weight:700;
  font-size:0.92rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn-primary{ background:var(--accent); color:var(--accent-text); }
.btn-primary:hover{ box-shadow:0 8px 20px -8px color-mix(in srgb, var(--accent) 60%, transparent); }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--accent-ink); color:var(--accent-ink); }
.btn:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:3px; }

/* ---------- hero ---------- */
.hero{ padding-top:3.5rem; padding-bottom:2.5rem; max-width:760px; }
.hero h1{ font-size:clamp(2rem,5.5vw,3.4rem); margin-bottom:1rem; }
.hero p{ color:var(--text-muted); font-size:1.1rem; max-width:60ch; }

/* ---------- calculator grid (homepage) ---------- */
.calc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:1.1rem;
}
.calc-card{
  display:block;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:8px;
  padding:1.6rem 1.5rem;
  text-decoration:none;
  color:var(--text);
  transition:transform 0.2s ease, border-color 0.2s ease;
}
.calc-card:hover{ transform:translateY(-4px); border-color:var(--accent); }
.calc-card:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:3px; }
.calc-card__cat{
  font-family:var(--font-display);
  font-size:0.7rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--accent-ink);
  display:block;
  margin-bottom:0.6rem;
}
.calc-card h3{ font-size:1.25rem; margin-bottom:0.5rem; }
.calc-card p{ color:var(--text-muted); font-size:0.92rem; margin:0; }
.calc-card.is-soon{ opacity:0.55; pointer-events:none; }
.calc-card.is-soon .calc-card__cat{ color:var(--text-muted); }

/* ---------- calculator form/result layout ---------- */
.calc-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.5rem;
  align-items:start;
}
@media (max-width:820px){ .calc-layout{ grid-template-columns:1fr; } }
@media (max-width:480px){ .field-row{ flex-direction:column; gap:1.1rem; } }

.calc-form{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  padding:1.8rem;
  display:flex;
  flex-direction:column;
  gap:1.3rem;
}
.field{ display:flex; flex-direction:column; gap:0.45rem; }
.field label{ font-size:0.88rem; font-weight:700; }
.field .hint{ font-size:0.8rem; color:var(--text-muted); }
.field input, .field select{
  font-family:var(--font-display);
  font-size:1.05rem;
  padding:0.7rem 0.9rem;
  border-radius:6px;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--text);
  width:100%;
}
.field input:focus, .field select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.field-row{ display:flex; gap:1rem; }
.field-row .field{ flex:1; }

.month-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem 0.8rem; }
.month-grid .field label{ font-weight:600; font-size:0.8rem; color:var(--text-muted); }
@media (max-width:480px){ .month-grid{ grid-template-columns:repeat(2,1fr); } }

.calc-result{
  background:var(--text);
  color:var(--bg);
  border-radius:10px;
  padding:1.8rem;
  position:sticky;
  top:5.5rem;
}
:root:not([data-theme="light"]) .calc-result{ background:var(--surface-2); color:var(--text); border:1px solid var(--line); }
:root[data-theme="dark"] .calc-result{ background:var(--surface-2); color:var(--text); border:1px solid var(--line); }
.calc-result__label{
  font-family:var(--font-display);
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  opacity:0.7;
  margin-bottom:0.4rem;
}
.calc-result__value{
  font-family:var(--font-display);
  font-size:clamp(2.2rem,5vw,3rem);
  font-weight:800;
  color:var(--accent);
  line-height:1;
  margin-bottom:1.4rem;
}
.calc-result__rows{ display:flex; flex-direction:column; gap:0.7rem; }
.calc-result__row{
  display:flex; justify-content:space-between; gap:1rem;
  font-size:0.92rem;
  padding-bottom:0.7rem;
  border-bottom:1px solid color-mix(in srgb, currentColor 15%, transparent);
}
.calc-result__row:last-child{ border-bottom:none; padding-bottom:0; }
.calc-result__row span:last-child{ font-family:var(--font-display); font-weight:700; }

/* ---------- data table ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:10px; margin-top:2rem; }
table.data-table{ width:100%; border-collapse:collapse; min-width:640px; font-size:0.92rem; }
.data-table th, .data-table td{ padding:0.75rem 1rem; text-align:right; white-space:nowrap; }
.data-table th:first-child, .data-table td:first-child{ text-align:left; }
.data-table thead th{
  font-family:var(--font-display); font-size:0.72rem; font-weight:700; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--text-muted); background:var(--surface-2); border-bottom:1px solid var(--line);
}
.data-table tbody td{ font-family:var(--font-display); border-bottom:1px solid var(--line); }
.data-table tbody tr:last-child td{ border-bottom:none; }
.data-table tbody tr.is-flagged td{ background:color-mix(in srgb, var(--accent) 8%, transparent); }
.tag{
  display:inline-block; font-family:var(--font-display); font-size:0.72rem; font-weight:700;
  padding:0.2rem 0.55rem; border-radius:5px; letter-spacing:0.02em;
  background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent-ink);
}
.tag--high{ background:color-mix(in srgb, var(--negative) 16%, transparent); color:var(--negative); }
.tag--exempt{ background:color-mix(in srgb, var(--text-muted) 16%, transparent); color:var(--text-muted); }

/* ---------- content sections (explainer text under calculators) ---------- */
.prose{ max-width:70ch; }
.prose h2{ font-size:1.5rem; margin:2rem 0 0.8rem; }
.prose p{ color:var(--text-muted); margin:0 0 1rem; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity 0.5s ease, transform 0.5s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- footer ---------- */
.site-footer{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  padding:2.2rem 6vw;
  border-top:1px solid var(--line);
  font-family:var(--font-display);
  font-size:0.78rem;
  color:var(--text-muted);
}

/* ---------- disclaimer ---------- */
.disclaimer{
  font-size:0.82rem;
  color:var(--text-muted);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:8px;
  padding:1rem 1.2rem;
  margin-top:1.5rem;
}