/* ============ Design tokens — semantic colour system ============ */
:root{
  color-scheme: light;
  /* ---- Colour system (round 9): white-first, 60-30-10 ----
     60% page ground, 30% white surfaces + neutral ink, 10% ONE accent.
     Depth comes from three surface levels so nothing melts together:
     page #f7f8fa -> surface #ffffff -> sunken #f1f3f5, every edge a
     hairline #e8eaed. Text is never pure black; muted stays AA (4.5:1+).
     The only glass on the site is the sticky header (see .site-header). */
  --bg:#f7f8fa;
  --surface:#ffffff;
  --surface-sunken:#f1f3f5;
  --line:#e8eaed;
  --line2:#eef0f2;
  --line-strong:#c9ced6;
  --ink:#14161a;
  --ink-2:#333a44;
  --muted:#6b7280;
  --accent:#e11d48;
  --accent-deep:#b3123a;
  --accent-soft:#fdf0f3;
  --accent-ink:#9f1239;
  --accent-line:#f0bfd0;
  --accent-grad:#8f1230;
  --shimmer:#f8f9fb;
  --success:#15803d; --success-bg:#e9f7ee;
  --warning:#b45309; --warning-bg:#fdf4e3;
  --danger:#b91c1c;  --danger-bg:#fdecec;
  --info:#1d4ed8;    --info-bg:#e3ecfd;
  --dark:#14161a;
  --dark-2:#23272f;
  --on-dark:#a7adba;
  --on-dark-2:#c6ccd8;
  --star:#e8930c;
  --wa:#128c4b; --wa-deep:#0b6e39; --wa-bright:#25d366;
  --ink-rgb:20,22,26;
  /* aliases: older rules reference these names */
  --card:var(--surface); --brand:var(--accent); --brand-deep:var(--accent-deep);
  --brand-soft:var(--accent-soft); --brand-ink:var(--accent-ink);
  --faint:var(--muted); --gold:var(--star); --green:var(--success); --red:var(--danger);
  --ok:var(--success); --ok-bg:var(--success-bg);
  --warn:var(--warning); --warn-bg:var(--warning-bg);
  --bad:var(--danger); --bad-bg:var(--danger-bg);
  --deal:var(--warning); --deal-bg:var(--warning-bg);
  --r:14px; --r-lg:22px;
  --sh-sm:0 1px 2px rgba(var(--ink-rgb),.06);
  --sh:0 8px 20px -10px rgba(var(--ink-rgb),.14);
  --sh-lg:0 16px 36px -16px rgba(var(--ink-rgb),.2);
  --ease:cubic-bezier(.22,.68,.32,1);
  --fd:"Sora",system-ui,sans-serif; --fb:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --max:78rem;
}
/* ============ Base ============ */
*{box-sizing:border-box}
*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{margin:0;font-family:var(--fb);background:var(--bg);color:var(--ink-2);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;min-width:0}
img{display:block;max-width:100%}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
input,select,textarea{font:inherit;color:var(--ink)}
::selection{background:var(--brand);color:#fff}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
h1,h2,h3,.fd{font-family:var(--fd);letter-spacing:-.015em;line-height:1.2;margin:0;color:var(--ink)}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:.9rem;min-width:0}
@media(min-width:700px){.wrap{padding-inline:1.4rem}}
.muted{color:var(--muted)}
.small{font-size:.8125rem}
.hide{display:none !important}