/* ============================================================
   Mzansi One — Design System v2
   Rebuilt on the Anthropic / Claude design language:
   warm parchment, serif headlines, earthy terracotta.
   Human, trustworthy, editorial — not generic SaaS.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Warm palette — every neutral has a yellow-brown undertone */
  --paper: #f5f4ed;        /* parchment — the canvas */
  --surface: #faf9f5;      /* ivory — cards */
  --surface-2: #e8e6dc;    /* warm sand — secondary surfaces */
  --ink: #141413;          /* near-black (warm) */
  --ink-soft: #5e5d59;     /* olive gray — secondary text */
  --ink-mute: #87867f;     /* stone gray — tertiary text */
  --dark-warm: #3d3d3a;
  --line: #f0eee6;         /* border cream */
  --line-strong: #e8e6dc;  /* border warm */

  /* Brand — terracotta (earthy, un-tech, trustworthy) */
  --terracotta: #c96442;
  --terracotta-deep: #b5533a;
  --terracotta-soft: #f3e6e0;
  --coral: #d97757;
  --gold: #d9a441;
  --gold-soft: #f6edd9;

  /* Status (kept warm-leaning, muted) */
  --ok: #5a8f5a;   --ok-soft: #e9efe6;
  --warn: #b9841f; --warn-soft: #f7efe0;
  --danger: #b53333; --danger-soft: #f5e5e3;
  --info: #4a7b94; --info-soft: #e7eef1;
  --focus: #3898ec; /* the ONLY cool color — reserved for a11y focus rings */

  /* Dark theme tokens */
  --d-paper: #141413;   --d-surface: #30302e;  --d-surface-2: #232322;
  --d-ink: #faf9f5;     --d-ink-soft: #b0aea5; --d-ink-mute: #87867f;
  --d-line: #30302e;    --d-line-strong: #3d3d3a;
  --d-terracotta: #d97757; --d-terracotta-soft: #3a2820;
  --d-ok: #8dbd8d;   --d-warn: #e0b163;  --d-danger: #e0756b; --d-info: #7fa8c0;

  /* Type — serif for headlines, sans for UI */
  --font-display: "Lora", "Georgia", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Space (8pt base) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* Radius — generous & soft */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px; --r-pill: 999px;

  /* Elevation — ring-based, not heavy drop shadows */
  --ring: 0 0 0 1px var(--line-strong);
  --ring-brand: 0 0 0 1px var(--terracotta);
  --whisper: 0 4px 24px rgba(20,20,19,0.05);
  --shadow-1: 0 1px 2px rgba(20,20,19,0.05);
  --shadow-2: 0 4px 14px rgba(20,20,19,0.06), var(--ring);

  /* Layout */
  --container: 1180px;
  --header-h: 72px;
  --transition: cubic-bezier(0.22, 1, 0.36, 1);
  --header-bg: rgba(245,244,237,0.85);
}

/* Dark theme — explicit [data-theme=dark], warm charcoal, light default */
[data-theme="dark"] {
  --paper: var(--d-paper); --surface: var(--d-surface); --surface-2: var(--d-surface-2);
  --ink: var(--d-ink); --ink-soft: var(--d-ink-soft); --ink-mute: var(--d-ink-mute);
  --line: var(--d-line); --line-strong: var(--d-line-strong);
  --terracotta: var(--d-terracotta); --terracotta-deep: #c05a42; --coral: #e08a6e;
  --terracotta-soft: var(--d-terracotta-soft);
  --ok: var(--d-ok);   --warn: var(--d-warn);  --danger: var(--d-danger); --info: var(--d-info);
  --ok-soft: #233025; --warn-soft: #2e2a1a; --danger-soft: #34221f; --info-soft: #1e2a31;
  --ring: 0 0 0 1px rgba(255,255,255,0.08);
  --ring-brand: 0 0 0 1px var(--terracotta);
  --whisper: 0 4px 24px rgba(0,0,0,0.3);
  --shadow-1: 0 1px 2px rgba(0,0,0,0.25);
  --shadow-2: 0 4px 14px rgba(0,0,0,0.35), var(--ring);
  --header-bg: rgba(20,20,19,0.85);
}

/* NOTE: Light is the hard default. The in-app toggle sets [data-theme=dark].
   No prefers-color-scheme fallback — the OS can never override. */

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--terracotta); text-decoration: none; transition: color .18s; }
a:hover { color: var(--terracotta-deep); }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: 1rem; }
h1,h2,h3,h4 {
  font-family: var(--font-display);
  font-weight: 500; /* Anthropic: single weight 500 for serif headlines */
  line-height: 1.22;
  margin: 0;
  color: var(--ink);
}
p { margin: 0; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* focus — the only cool color in the system */
:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus); border-radius: 4px; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner { height: var(--header-h); display: flex; align-items: center; gap: var(--sp-3); }
.brand { display:flex; align-items:center; gap: var(--sp-3); margin-right:auto; min-width:0; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 13px; flex: none;
  background: var(--ink); color: var(--paper);
  display:grid; place-items:center; font-family: var(--font-display); font-weight:500; font-size:1.15rem;
  box-shadow: var(--ring);
}
.brand-name { font-family: var(--font-display); font-weight:500; font-size:1.25rem; letter-spacing:-0.01em; line-height:1.1; }
.brand-tag { font-size:.74rem; color:var(--ink-mute); margin-top:2px; letter-spacing:.02em; }
.nav { display:flex; gap: var(--sp-1); }
.nav-link {
  padding: 9px 14px; border-radius: var(--r-pill); font-weight:500; font-size:.9rem;
  color: var(--ink-soft); transition: background .18s, color .18s; white-space:nowrap;
}
.nav-link:hover { background: var(--surface); color: var(--ink); }
.nav-link.active { background: var(--terracotta-soft); color: var(--terracotta-deep); font-weight:500; }
.header-actions { display:flex; align-items:center; gap: var(--sp-2); flex:none; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap: var(--sp-2);
  padding: 14px 24px; border-radius: var(--r-md); font-weight:500; font-size:.97rem;
  transition: transform .16s var(--transition), box-shadow .2s, background .18s, color .18s;
  line-height:1; white-space:nowrap; min-height: 46px;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--terracotta-deep); color: #faf9f5; box-shadow: var(--ring-brand); }
.btn-primary:hover { background: var(--terracotta); color: #fff; transform: translateY(-1px); }
.btn-dark { background: var(--ink); color: var(--paper); box-shadow: var(--ring); }
.btn-dark:hover { background: var(--dark-warm); color: var(--paper); }
.btn-sand { background: var(--surface-2); color: var(--dark-warm); box-shadow: var(--ring); }
.btn-sand:hover { background: var(--line-strong); }
.btn-white { background: #fff; color: var(--ink); box-shadow: var(--ring); }
.btn-white:hover { background: var(--surface-2); }
.btn-ghost { background: transparent; color: var(--ink); border:1px solid var(--line-strong); }
.btn-ghost:hover { border-color: var(--terracotta); color: var(--terracotta-deep); background: var(--surface); }
.btn-sm { padding: 10px 16px; font-size:.86rem; border-radius: 10px; min-height:40px; }
.btn-lg { padding: 17px 30px; font-size:1.08rem; min-height:52px; }
.btn-block { width:100%; }
.btn .ic { font-size:1.1em; }

/* ---------- Hero ---------- */
.hero { position:relative; overflow:hidden; padding: var(--sp-8) 0 var(--sp-7); }
.hero-bg { position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: radial-gradient(55% 70% at 82% 8%, rgba(201,100,66,0.08), transparent 70%),
              radial-gradient(45% 55% at 8% 92%, rgba(217,164,65,0.07), transparent 70%);
}
.hero-eyebrow {
  display:inline-flex; align-items:center; gap: var(--sp-2);
  background: var(--surface); border:1px solid var(--line); border-radius: var(--r-pill);
  padding: 8px 18px; font-size:.8rem; font-weight:500; color: var(--ink-soft); box-shadow: var(--ring);
  margin-bottom: var(--sp-5);
}
.hero-eyebrow .dot { width:8px; height:8px; border-radius:50%; background: var(--ok); }
.hero h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); max-width: 16ch; letter-spacing:-0.015em; line-height:1.08; color:var(--ink); }
.hero h1 .em { color: var(--terracotta); position: relative; }
.hero-sub { margin-top: var(--sp-5); font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--ink-soft); max-width: 50ch; line-height:1.6; }
.hero-cta { display:flex; flex-wrap:wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero-proof { display:flex; flex-wrap:wrap; gap: var(--sp-6); margin-top: var(--sp-7); color:var(--ink-mute); font-size:.92rem; }
.hero-proof .pl { display:flex; align-items:center; gap: var(--sp-2); }
.hero-proof .pl b { color: var(--ink); font-family: var(--font-display); font-weight:500; }

/* ---------- Section ---------- */
.section { padding: var(--sp-8) 0; }
.section-head { max-width: 60ch; margin-bottom: var(--sp-7); }
.kicker { font-size:.76rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color: var(--terracotta-deep); margin-bottom: var(--sp-3); }
.section-head h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); line-height:1.18; }
.section-head p { margin-top: var(--sp-3); color: var(--ink-soft); font-size:1.1rem; }

/* ---------- Tool cards (home) ---------- */
.tools-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.tool-card {
  position:relative; padding: var(--sp-6); background: var(--surface);
  border:1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--whisper);
  display:flex; flex-direction:column; gap: var(--sp-4); overflow:hidden;
  cursor:pointer; text-align:left; min-height: 240px;
  transition: transform .22s var(--transition), box-shadow .28s, border-color .22s;
}
.tool-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.tool-card:active { transform: translateY(-1px); }
.tool-ico {
  width: 56px; height: 56px; border-radius: 18px; display:grid; place-items:center; font-size:1.6rem;
  background: var(--tc-soft, var(--terracotta-soft)); color: var(--tc, var(--terracotta));
  transition: transform .3s var(--transition);
}
.tool-card:hover .tool-ico { transform: scale(1.06) rotate(-3deg); }
.tool-card h3 { font-size:1.3rem; line-height:1.2; }
.tool-card p { color: var(--ink-soft); font-size:.95rem; flex:1; line-height:1.55; }
.tool-card .go { display:flex; align-items:center; gap: var(--sp-1); color: var(--tc, var(--terracotta)); font-weight:500; font-size:.9rem; }
.tool-card .go .arr { transition: transform .18s; }
.tool-card:hover .go .arr { transform: translateX(5px); }
.badge-wrap { font-size: .74rem; letter-spacing:.04em; }

/* ---------- Tool detail ---------- */
.tool-hero { padding: var(--sp-7) 0 var(--sp-6); border-bottom:1px solid var(--line); background: var(--surface); }
.crumbs { font-size:.86rem; color:var(--ink-mute); margin-bottom: var(--sp-4); }
.crumbs a:hover { text-decoration:underline; }
.tool-hero-grid { display:grid; grid-template-columns: 1.6fr 1fr; gap: var(--sp-6); align-items:center; }
.tool-hero h1 { font-size: clamp(2rem, 4vw, 3rem); line-height:1.12; }
.tool-hero .lead { color:var(--ink-soft); margin-top: var(--sp-4); max-width: 55ch; font-size:1.12rem; }
.tool-hero-actions { display:flex; flex-wrap:wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.hero-visual {
  background: var(--paper); border:1px solid var(--line); border-radius: var(--r-2xl);
  min-height: 220px; display:grid; place-items:center; padding: var(--sp-6); box-shadow: var(--whisper);
}
.hero-visual-inner { text-align:center; }
.hero-emoji { font-size: 4rem; }
.quick-facts { list-style:none; margin: var(--sp-5) 0 0; padding:0; display:grid; gap: var(--sp-2); }
.quick-facts li { display:flex; gap: var(--sp-2); font-size:.92rem; color:var(--ink-soft); align-items:baseline; }
.quick-facts li b { color:var(--ink); font-family: var(--font-mono); font-weight:600; font-size:.9rem; }

.tool-body { display:grid; grid-template-columns: 270px 1fr; gap: var(--sp-6); }
.rail { position:sticky; top: calc(var(--header-h) + 24px); align-self:start; }
.rail-items { display:flex; flex-direction:column; gap: 2px; }
.rail-btn {
  text-align:left; padding: 13px 16px; border-radius: 12px; font-weight:500; font-size:.94rem;
  color: var(--ink-soft); border:1px solid transparent; transition: all .15s;
}
.rail-btn:hover { background: var(--surface); color: var(--ink); border-color: var(--line); }
.rail-btn.active { background: var(--surface); color: var(--terracotta-deep); border-color: var(--line); box-shadow: var(--ring-brand); font-weight:500; }
.content { min-width:0; }
.content-block { margin-bottom: var(--sp-7); }
.content-block h2 { font-size:1.6rem; line-height:1.2; margin-bottom: var(--sp-3); }
.content-block h3 { font-size:1.2rem; margin: var(--sp-5) 0 var(--sp-2); }

/* ---------- Cards ---------- */
.card { background: var(--surface); border:1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-5); box-shadow: var(--whisper); }
.card + .card { margin-top: var(--sp-4); }

/* ---------- Badges ---------- */
.badge { display:inline-flex; align-items:center; gap: var(--sp-1); padding: 6px 14px; border-radius: var(--r-pill); font-size:.78rem; font-weight:500; line-height:1; }
.badge-b { background:var(--info-soft); color:var(--info); }
.badge-g { background:var(--ok-soft); color:var(--ok); }
.badge-w { background:var(--warn-soft); color:var(--warn); }
.badge-r { background:var(--danger-soft); color:var(--danger); }
.badge-n { background:var(--surface-2); color:var(--ink-mute); border:1px solid var(--line); }
.badge-t { background:var(--terracotta-soft); color:var(--terracotta-deep); }
.fact-chip {
  display:inline-flex; align-items:center; gap: var(--sp-1); padding: 7px 16px; border-radius: var(--r-pill);
  background: var(--terracotta-soft); color: var(--terracotta-deep); font-size:.82rem; font-weight:500;
}
.fact-chip .ck { font-size:1.05rem; }

/* ---------- Table ---------- */
.tbl-wrap { overflow-x:auto; border:1px solid var(--line); border-radius: var(--r-md); background: var(--surface); max-width:100%; }
table { width:100%; border-collapse:collapse; font-size:.93rem; min-width: 480px; }
.tbl-wrap table { min-width: 0; width:100%; }
th, td { text-align:left; padding: 15px 18px; border-bottom:1px solid var(--line); vertical-align:top; }
thead th { background: var(--surface-2); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-mute); font-family:var(--font-body); font-weight:500; }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover { background: var(--surface-2); }

/* ---------- Steps ---------- */
.steps { counter-reset: step; display:grid; gap: var(--sp-2); }
.step { display:flex; gap: var(--sp-4); padding: var(--sp-4); background:var(--surface); border:1px solid var(--line); border-radius: var(--r-md); }
.step .num {
  counter-increment: step; flex:none; width: 34px; height:34px; border-radius:50%;
  background: var(--terracotta); color:#faf9f5; display:grid; place-items:center; font-weight:500; font-size:.95rem;
  font-family: var(--font-display);
}
.step .st-t { font-weight:600; color:var(--ink); }
.step .st-d { color:var(--ink-soft); font-size:.93rem; margin-top:2px; line-height:1.55; }

/* ---------- Copy row ---------- */
.copy-row {
  display:flex; align-items:center; gap: var(--sp-2); padding: 13px 16px;
  background: var(--surface); border:1px solid var(--line); border-radius: 12px; margin-bottom: var(--sp-2);
  flex-wrap: wrap;
}
.copy-row .val { font-family: var(--font-mono); font-weight:600; font-size:1.02rem; flex:1 1 auto; min-width: 0; overflow-wrap:anywhere; color:var(--ink); }
.copy-row .btn, .copy-row .copy-btn { flex:0 0 auto; }
.copy-btn { flex:none; padding:9px 16px; border-radius:10px; background:var(--terracotta-soft); color:var(--terracotta-deep); font-weight:500; font-size:.85rem; min-height:38px; }
.copy-btn:hover { background: var(--terracotta); color:#fff; }
.copy-btn.copied { background: var(--ok); color:#fff; }

/* ---------- Calculator ---------- */
.calc { background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--whisper); }
.calc label { display:block; font-weight:500; font-size:.9rem; margin-bottom:8px; color:var(--ink); }
.calc .fld { margin-bottom: var(--sp-5); }
.calc input[type=text], .calc input[type=number], .calc select {
  width:100%; padding: 14px 16px; border:1.5px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--paper); color: var(--ink); font-weight:500; transition: border-color .15s, box-shadow .15s;
}
.calc input:focus, .calc select:focus { outline:none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(56,152,236,0.18); }
.calc-result { margin-top: var(--sp-5); padding: var(--sp-5); background: var(--terracotta-soft); border-radius: var(--r-md); border:1px solid var(--terracotta); }
.calc-result .big { font-family: var(--font-display); font-size:2.4rem; font-weight:500; color: var(--terracotta-deep); }
.calc-result .row { display:flex; justify-content:space-between; gap:var(--sp-2); padding:6px 0; font-size:.95rem; }
.calc-result .row b { font-family:var(--font-mono); font-weight:600; font-variant-numeric:tabular-nums; }
.calc-note { font-size:.8rem; color:var(--ink-mute); margin-top: var(--sp-2); }
.range-wrap { display:flex; gap: var(--sp-3); align-items:center; }
.range-wrap input[type=range] { flex:1; accent-color: var(--terracotta); height: 34px; }
.range-val { font-family:var(--font-mono); font-weight:600; min-width:5rem; text-align:right; color:var(--ink); }

/* ---------- Quiz (K53) ---------- */
.quiz-arena { background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--whisper); }
.quiz-top { display:flex; justify-content:space-between; align-items:center; padding: var(--sp-3) var(--sp-5); background: var(--surface-2); border-bottom:1px solid var(--line); flex-wrap:wrap; gap:var(--sp-2); }
.quiz-dots { display:flex; gap:6px; flex-wrap:wrap; padding: var(--sp-3) var(--sp-5); }
.qdot { width:13px; height:13px; border-radius:50%; background: var(--line-strong); }
.qdot.on { background: var(--terracotta); }
.qdot.wrong { background: var(--danger); }
.qcard { padding: var(--sp-6); text-align:center; }
.qcard .qkind { font-size:.76rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--terracotta-deep); margin-bottom: var(--sp-3); }
.qcard .sign-img { margin: 0 auto var(--sp-4); width: min(160px, 60vw); }
.qcard h3 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); max-width: 30ch; margin-inline:auto; font-weight:500; }
.qopts { display:grid; gap: var(--sp-2); margin-top: var(--sp-5); text-align:left; }
.qopt {
  padding: 15px 18px; border:1.5px solid var(--line-strong); border-radius: var(--r-md); font-weight:500; font-size:.98rem;
  background: var(--surface); transition: all .15s; text-align:left; display:flex; gap: var(--sp-2); align-items:center;
}
.qopt:hover:not(:disabled) { border-color: var(--terracotta); background: var(--terracotta-soft); }
.qopt:disabled { cursor:default; opacity:.72; }
.qopt.correct { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); font-weight:600; }
.qopt.wrongpick { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.qopt .lbl { width:26px; height:26px; flex:none; border-radius:50%; border:1.5px solid currentColor; display:grid; place-items:center; font-size:.76rem; font-weight:600; font-family:var(--font-body); }
.q-explain { margin-top: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-md); font-size:.95rem; display:none; border:1px solid currentColor; }
.q-explain.show { display:block; }
.q-explain.good { background: var(--ok-soft); color: var(--ok); }
.q-explain.bad { background: var(--danger-soft); color: var(--danger); }
.quiz-ctrl { display:flex; justify-content:space-between; gap:var(--sp-2); padding: var(--sp-4) var(--sp-5); border-top:1px solid var(--line); flex-wrap:wrap; }
.quiz-score { font-weight:500; }
.result-card { padding: var(--sp-7); }
.result-pct { font-family: var(--font-display); font-size:4rem; font-weight:500; line-height:1; color:var(--terracotta-deep); }
.result-actions { display:flex; gap: var(--sp-2); justify-content:center; margin-top: var(--sp-5); flex-wrap:wrap; }

/* ---------- Filter chips ---------- */
.chips { display:flex; flex-wrap:wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.chip { padding: 9px 18px; border-radius: var(--r-pill); border:1.5px solid var(--line-strong); background: var(--surface); font-weight:500; font-size:.88rem; color: var(--ink-soft); transition: all .15s; }
.chip:hover { border-color: var(--terracotta); color: var(--terracotta-deep); }
.chip.active { background: var(--terracotta); border-color: var(--terracotta); color:#fff; }

/* ---------- Sign grid (K53) ---------- */
.sign-grid { display:grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-3); }
.sign-card { background: var(--surface); border:1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4); text-align:center; transition: all .18s; }
.sign-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color:var(--line-strong); }
.sign-card .sg { margin:0 auto var(--sp-2); width:60px; }
.sign-card .sn { font-weight:600; font-size:.86rem; color:var(--ink); }
.sign-card .sm { font-size:.75rem; color:var(--ink-mute); margin-top:2px; line-height:1.4; }
.fam-cat { font-size:.68rem; font-weight:500; text-transform:uppercase; letter-spacing:.06em; margin-top:5px; display:block; }
.cat-red { color:var(--danger); } .cat-amber { color:var(--warn); } .cat-blue { color:var(--info); } .cat-green { color:var(--ok); }

/* ---------- Page hero ---------- */
.page-hero { padding: var(--sp-8) 0 var(--sp-7); text-align:center; border-bottom:1px solid var(--line); background: var(--surface); }
.page-hero h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight:500; }
.page-hero p { color: var(--ink-soft); max-width:54ch; margin: var(--sp-3) auto 0; font-size:1.12rem; line-height:1.6; }

/* ---------- Footer ---------- */
.site-footer { border-top:1px solid var(--line); background: var(--surface); padding: var(--sp-7) 0 var(--sp-5); margin-top: var(--sp-8); }
.footer-grid { display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-6); }
.footer-brand p { color: var(--ink-mute); font-size:.92rem; margin-top: var(--sp-3); max-width:34ch; line-height:1.6; }
.footer h4 { font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-mute); margin-bottom: var(--sp-3); font-family:var(--font-body); font-weight:500; }
.footer-links { list-style:none; margin:0; padding:0; display:grid; gap: var(--sp-2); }
.footer-links a { color: var(--ink-soft); font-size:.94rem; }
.footer-links a:hover { color: var(--terracotta); }
.footer-bottom { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top:1px solid var(--line); display:flex; justify-content:space-between; gap: var(--sp-3); flex-wrap:wrap; color:var(--ink-mute); font-size:.86rem; }

/* ---------- Controls ---------- */
.icon-btn { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--line); font-size:1.1rem; transition:all .15s; }
.icon-btn:hover { border-color: var(--terracotta); background: var(--terracotta-soft); }
.lang-btn { padding: 10px 16px; border-radius: var(--r-pill); border:1px solid var(--line-strong); background:var(--surface); font-weight:500; font-size:.84rem; display:flex; align-items:center; gap:6px; min-height:44px; }
.lang-menu { position:absolute; top: calc(var(--header-h) - 8px); right: var(--sp-4); background:var(--surface); border:1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: var(--sp-2); min-width:180px; z-index:60; }
.lang-menu button { display:flex; width:100%; padding: 12px 14px; border-radius:10px; font-weight:500; font-size:.9rem; justify-content:space-between; min-height:44px; }
.lang-menu button:hover { background: var(--surface-2); }
.lang-menu .active-lang { color:var(--terracotta); }
.menu-trigger { position:relative; }

/* ---------- Mobile menu ---------- */
.menu-btn { display:none; width:46px; height:46px; border-radius:14px; background:var(--surface); border:1px solid var(--line); place-items:center; font-size:1.2rem; }
.mobile-nav {
  display:none; position:fixed; inset: var(--header-h) 0 0 0; z-index:40;
  background: var(--surface); padding: var(--sp-4);
  overflow-y:auto; transform: translateY(-8px); opacity:0;
  transition: opacity .25s, transform .25s;
}
.mobile-nav.open { transform:none; opacity:1; }
.mobile-nav-link { display:flex; align-items:center; gap: var(--sp-3); width:100%; padding: 16px; border-radius:14px; font-weight:500; font-size:1.05rem; color: var(--ink); border:1px solid transparent; margin-bottom:2px; }
.mobile-nav-link:hover { background: var(--surface-2); border-color: var(--line); }
.mobile-nav .menu-footer { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top:1px solid var(--line); font-size:.84rem; color: var(--ink-mute); }

/* ---------- Toasts ---------- */
.toast-wrap { position:fixed; bottom: var(--sp-5); left:50%; transform:translateX(-50%); z-index:100; display:flex; flex-direction:column; gap: var(--sp-2); align-items:center; }
.toast { background: var(--ink); color: var(--paper); padding: 13px 24px; border-radius: var(--r-pill); font-weight:500; font-size:.9rem; box-shadow: var(--shadow-2); animation: toastIn .3s var(--transition); }
@keyframes toastIn { from { opacity:0; transform: translateY(10px);} to { opacity:1; transform:none; } }

/* ---------- Compare ---------- */
.compare { display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items:center; }

/* ---------- Why band / trust ---------- */
.why-band { background: var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.why-title { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.why-sub { max-width: 46ch; }
.trust-title { margin-bottom: var(--sp-4); }
.trust-list { margin:0; padding:0; list-style:none; display:grid; gap: var(--sp-3); }
.trust-check { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background: var(--terracotta-soft); color: var(--terracotta-deep); font-weight:600; flex:none; }

/* ---------- Callout ---------- */
.callout { display:flex; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); margin: var(--sp-4) 0; border:1px solid currentColor; }
.callout .ci { font-size:1.3rem; line-height:1.2; }
.callout .ct { font-weight:600; margin-bottom:2px; }
.callout .cb { font-size:.93rem; line-height:1.55; opacity:.92; }
.callout-warn { background: var(--warn-soft); color: var(--warn); }
.callout-info { background: var(--info-soft); color: var(--info); }
.callout-green { background: var(--ok-soft); color: var(--ok); }
.callout-red { background: var(--danger-soft); color: var(--danger); }

/* ---------- Utility ---------- */
.mt-1{margin-top:var(--sp-1)} .mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)} .mt-4{margin-top:var(--sp-4)} .mt-5{margin-top:var(--sp-5)} .mt-6{margin-top:var(--sp-6)}
.mb-2{margin-bottom:var(--sp-2)} .mb-3{margin-bottom:var(--sp-3)} .mb-4{margin-bottom:var(--sp-4)} .mb-5{margin-bottom:var(--sp-5)}
.flex{display:flex} .wrap{flex-wrap:wrap} .gap-2{gap:var(--sp-2)} .gap-3{gap:var(--sp-3)} .between{justify-content:space-between} .center{align-items:center}
.muted{color:var(--ink-mute)} .soft{color:var(--ink-soft)} .mono{font-family:var(--font-mono)}
.text-tiny{font-size:.8rem} .text-sm{font-size:.9rem} .text-lg{font-size:1.15rem}
.text-center{text-align:center} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}

/* ---------- Animations ---------- */
.tool-card, .btn, .qopt, .icon-btn { -webkit-tap-highlight-color: transparent; }
.reveal { opacity:0; transform: translateY(22px); transition: opacity .65s var(--transition), transform .65s var(--transition); }
.reveal.in { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay: .07s; }
.reveal-delay-2 { transition-delay: .14s; }
.reveal-delay-3 { transition-delay: .21s; }
.fade-swap { animation: fadeSwap .45s var(--transition); }
@keyframes fadeSwap { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform:none; } }
.qopt.correct { animation: pop .35s ease; }
.qopt.wrongpick { animation: shake .4s ease; }
@keyframes pop { 0%{ transform: scale(1);} 50%{ transform: scale(1.04);} 100%{ transform: scale(1);} }
@keyframes shake { 0%,100%{ transform: translateX(0);} 20%{ transform: translateX(-6px);} 40%{ transform: translateX(6px);} 60%{ transform: translateX(-4px);} 80%{ transform: translateX(4px);} }
.q-explain { animation: fadeSwap .4s var(--transition); }

/* theme transition */
body, .site-header, .tool-card, .card, .calc, .rail-btn, .sign-card, .quiz-arena,
.callout, .step, .page-hero, .site-footer, .hero-visual, table {
  transition: background-color .32s ease, border-color .32s ease, color .2s;
}

/* range slider */
input[type=range] { appearance:none; -webkit-appearance:none; height:6px; border-radius:6px; background:var(--line-strong); outline:none; width:100%; }
input[type=range]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:24px; height:24px; border-radius:50%; background:var(--terracotta); border:3px solid var(--surface); box-shadow:var(--ring); cursor:pointer; transition:transform .15s; }
input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.1); }
input[type=range]::-moz-range-thumb { width:24px; height:24px; border-radius:50%; background:var(--terracotta); border:3px solid var(--surface); cursor:pointer; }
input[type=range]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(56,152,236,0.25); }

/* aria-pressed */
.chip[aria-pressed="true"], .rail-btn[aria-pressed="true"] { background: var(--terracotta); color:#fff; border-color: var(--terracotta); }

/* responsive */
@media (max-width: 1020px) {
  .tools-grid { grid-template-columns: repeat(2, 1fr); }
  .sign-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .tool-hero-grid { grid-template-columns: 1fr; }
  .hero-visual { min-height: 160px; }
  .tool-body { grid-template-columns: 1fr; }
  .rail { position: static; }
  .rail-items { flex-direction:row; flex-wrap:wrap; gap: var(--sp-2); border-bottom:1px solid var(--line); padding-bottom: var(--sp-3); margin-bottom: var(--sp-4); }
  .rail-btn { border:1px solid var(--line); }
}
@media (max-width: 900px) {
  .tools-grid { grid-template-columns: 1fr; }
  .sign-grid { grid-template-columns: repeat(3, 1fr); }
  .compare { grid-template-columns: 1fr; gap: var(--sp-5); }
  .grid-2 { grid-template-columns: 1fr; }
  .nav { display:none !important; }
  .menu-btn { display:grid; }
  .mobile-nav { display:block; visibility:hidden; }
  .mobile-nav.open { visibility:visible; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .hero { padding: var(--sp-6) 0; }
  .hero-proof { gap: var(--sp-3); }
}
@media (min-width: 901px) { .mobile-nav { display:none; } }
@media (max-width: 480px) {
  .sign-grid { grid-template-columns: repeat(2, 1fr); }
  .header-inner { gap: var(--sp-2); }
  .brand-tag { display:none; }
  .icon-btn { width:42px; height:42px; }
  .menu-btn { width:42px; height:42px; }
  .lang-btn { padding: 8px 12px; font-size:.78rem; min-height:42px; }
  .brand-name { font-size:1.1rem; }
  .brand-mark { width:40px; height:40px; font-size:1.05rem; }
  .result-pct { font-size:3rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal { opacity:1; transform:none; }
}
/* ---------- Payment-date calendar (SASSA) ---------- */
.paydate-list { display: grid; gap: var(--sp-2); }
.paydate-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); }
.paydate-rank { width: 34px; height: 34px; border-radius: 50%; background: var(--terracotta); color: #faf9f5; display: grid; place-items: center; font-weight: 500; flex: none; font-family: var(--font-display); }
.paydate-info { display: flex; flex-direction: column; }
.paydate-window { color: var(--ink-soft); font-size: .9rem; }
@media (max-width: 480px){ .paydate-row { flex-direction: column; align-items: flex-start; gap: var(--sp-2); } }

/* ---------- Status decoder (SASSA / UIF) ---------- */
.decoder-list { display: grid; gap: var(--sp-2); }
.decoder-row { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.decoder-code { flex: none; font-family: var(--font-display); font-size: 1.02rem; font-weight: 500; color: var(--ink); min-width: 11rem; }
.decoder-body { flex: 1; }
.decoder-meaning { color: var(--ink-soft); line-height: 1.5; }
.decoder-next { margin-top: 4px; color: var(--ink); font-size: .92rem; line-height: 1.5; }
.decoder-row .badge { flex: none; align-self: center; }
@media (max-width: 600px){
  .decoder-row { flex-direction: column; gap: var(--sp-2); }
  .decoder-code { min-width: 0; }
  .decoder-row .badge { align-self: flex-start; }
}

/* ---------- Tax decision tree ---------- */
.decision-q { font-family: var(--font-display); font-size: 1.1rem; font-weight: 500; line-height: 1.35; }

/* ---------- Tax key-dates calendar ---------- */
.taxdate-list { display: grid; gap: var(--sp-2); }
.taxdate-evt { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); flex-wrap: wrap; }
.taxdate-date { flex: none; font-family: var(--font-mono); }
.taxdate-info { display: flex; flex-direction: column; }
.taxdate-desc { color: var(--ink-soft); font-size: .88rem; }

/* ---------- UIF benefit-type selector ---------- */
.benefit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.benefit-card { display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left; cursor: pointer; transition: all .18s; }
.benefit-card:hover { border-color: var(--terracotta); box-shadow: var(--ring-brand); }
.benefit-card.active { border-color: var(--terracotta); box-shadow: var(--ring-brand); background: var(--terracotta-soft); }
.benefit-ico { font-size: 1.6rem; flex: none; }
@media (max-width: 600px){ .benefit-grid { grid-template-columns: 1fr; } }

/* ---------- Grant finder ---------- */
.grant-finder .gf-q { margin-bottom: var(--sp-3); }
.gf-q .qopts { margin-top: var(--sp-3); }
.gf-opt.correct { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); font-weight: 600; }

/* ---------- Scam check ---------- */
.scam-red { color: var(--danger); line-height: 1.5; }
.scam-red span { flex: none; }