/* WOFF2 first (≈48 KB per weight), TTF kept only as a fallback for very old
   browsers. A browser downloads the first format it understands, so modern
   clients never fetch the 148 KB TTF files. */
@font-face{font-family:Poppins;src:url("../fonts/Poppins-400.woff2") format("woff2"),url("../fonts/Poppins-400.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url("../fonts/Poppins-500.woff2") format("woff2"),url("../fonts/Poppins-500.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url("../fonts/Poppins-600.woff2") format("woff2"),url("../fonts/Poppins-600.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url("../fonts/Poppins-700.woff2") format("woff2"),url("../fonts/Poppins-700.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
/* 800 also answers requests for 900: the stylesheet asks for 900 in places and
   there is no 900 file, so this maps them onto the real 800 cut instead of
   letting the browser fake it with synthetic emboldening. */
@font-face{font-family:Poppins;src:url("../fonts/Poppins-800.woff2") format("woff2"),url("../fonts/Poppins-800.ttf") format("truetype");font-weight:800 900;font-style:normal;font-display:swap}
:root{
  /* --primary is the brand colour and stays as-is for fills, borders, icons and
     large display type. White text on it is only 3.91:1, so solid buttons use
     --primary-dark (5.15:1 with white) and reserve --primary-deep for hover so
     the interaction still reads as a state change. */
  --primary:#ff004f;--primary-dark:#d90043;--primary-deep:#b8003a;--yellow:#ffbb32;
  --background:#f7f5f0;--surface:#fff;--text:#1d1720;--soft:#625d63;
  --border:#dedbd6;--dark:#211b22;--success:#178c55;--danger:#e33a49;
  --stars:#ffb02e;--shadow:0 10px 26px rgba(33,27,34,.07);
  --container:1180px;--reading:790px;--radius:10px;
  --font:Poppins,"Segoe UI",Arial,sans-serif;
  --fs-body:16px;--fs-small:13px;
  /* Fluid type scale: interpolates smoothly between a 360px and a 1440px viewport,
     so every heading resizes with the screen instead of jumping at a breakpoint. */
  --fs-h1:clamp(32px,24.67px + 2.04vw,54px);
  --fs-h1-inner:clamp(30px,24px + 1.67vw,48px);
  --fs-h1-tool:clamp(32px,25.33px + 1.85vw,52px);
  --fs-h2:clamp(26px,22.67px + 0.93vw,36px);
  --fs-h2-lg:clamp(25px,22px + 0.83vw,34px);
  --fs-h2-sm:clamp(22px,19.33px + 0.74vw,30px);
  --fs-h2-card:clamp(21px,19.67px + 0.37vw,25px);
  --fs-h3:clamp(19px,17.33px + 0.46vw,24px);
  --fs-h4:clamp(18.5px,17.67px + 0.23vw,21px);

  /* ── Readable small-text scale ───────────────────────────────────────────
     Replaces the old hard-coded 10-13px sizes. Nothing that carries meaning
     drops below 13px, and running body copy never below 15px. */
  --fs-lead:17px;      /* intro / lead paragraphs            */
  --fs-copy:15.5px;    /* secondary running copy, card text  */
  --fs-meta:13.5px;    /* labels, captions, table cells      */
  --fs-micro:12.5px;   /* uppercase eyebrows, pills, badges  */

  /* Accessible ink colours. --primary on white is only 3.9:1, which fails
     WCAG AA for text, so small/plain text uses --ink-accent (5.1:1) instead
     and --primary stays for fills, borders and large display type. */
  --ink:#1d1720;          /* 14.9:1 on white */
  --ink-body:#4a444b;     /*  8.6:1 on white */
  --ink-muted:#5c565d;    /*  6.6:1 on white */
  --ink-accent:#d90043;   /*  5.1:1 on white */

  /* Spacing rhythm used for section padding and stack gaps. */
  --sp-1:6px;--sp-2:10px;--sp-3:16px;--sp-4:22px;--sp-5:30px;
  --sp-6:40px;--sp-7:54px;--sp-8:72px;
  --lh-tight:1.28;--lh-snug:1.5;--lh-copy:1.72;
}