/* THE DESIGN SYSTEM of the Zero site (V92, 6 Oct 2026). ONE place for what every page is made of.
   "even these pages should be optimised for the same size and font and all ... we have to build a consistent Design
   System": the home page and the legal pages (and any page added later) load THIS sheet, last, and take their type,
   colour, measure, shape and motion from it. nothing here styles a component; it only names the values.
   to change a size or a colour for the whole site, change it here and nowhere else.

   type: THREE sizes do the work on every page. heading, body, tag. two more exist for two single moments of the
   home page (the hero line and the big number), and two for the names on cards and steps. no bold, no italics.
   a phone has its own, slightly larger, sizes; from 861px up every size is about an eighth smaller (V90) */
@font-face { font-family: "Zero Sans"; src: url("../assets/fonts/GoogleSansFlex-wght-ROND.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
:root {
  /* the face: one sans, regular weight only */
  --sans: "Zero Sans", "Google Sans Flex", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* colour: paper and ink. text for long reading, mute for the second voice, line for a hairline, ok for the one green tick */
  --bg: #f4f3ee;
  --ink: #1b1d1c;
  --text: #3f4240;
  --mute: #6f716e;
  --line: rgba(27, 29, 28, 0.08);
  --white: #ffffff;
  --ok: #35a95c;

  /* type: the three sizes */
  --t-heading: clamp(2.125rem, 1.1rem + 2.8vw, 3.62rem);
  --t-body: clamp(1rem, 0.86rem + 0.3vw, 1.13rem);
  --t-tab: clamp(0.75rem, 0.68rem + 0.14vw, 0.806rem);
  --lh-heading: 1.06;
  --ls-heading: -0.045em;
  /* type: the two single moments, and the names on cards and steps */
  --t-display: clamp(2.75rem, 1.4rem + 4.4vw, 5.36rem);
  --t-mega: clamp(5rem, 9.2vw, 8.28rem);
  --t-title: clamp(1.625rem, 2.4vw, 2.16rem);
  --t-card: clamp(1.25rem, 1.6vw, 1.44rem);
  /* older names still in use in the sheets: each is one of the three */
  --t-h2: var(--t-heading); --t-hero: var(--t-heading);
  --t-h3: var(--t-body); --t-list: var(--t-body);
  --t-label: var(--t-tab); --t-small: var(--t-tab);

  /* measure: the page's width, its side gutter, and the column for long reading */
  --max: clamp(1200px, 82vw, 1560px);
  --gut: clamp(20px, 4vw, 56px);
  --col: calc(var(--t-body) * 38);

  /* V126, space: ONE scale for the room between things. a title and what stands under it: --sp-2. one of the two big
     lines and what stands by it (the letter, the price, the start of the path): --sp-3. a row of controls and what
     it controls: --sp-4. one block and the next: --sp-6. nothing between things is a number of its own */
  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 48px; --sp-6: 64px;
  /* V126: the two lines the page stops for on a phone ("Learn the job by doing it." and "Built to get you hired."):
     "should both be really big". one size for both, as wide as a phone lets two lines be */
  --t-statement: clamp(2.75rem, 14vw, 4rem);
  /* V126 ("I wanted to define a different mobile font and a different desktop font"): the Ask Zero panel's three sizes,
     its name, its messages and its small keys. these are a phone's; a desktop's are a step smaller (below) */
  --t-chat-h: 0.9375rem; --t-chat: 0.875rem; --t-chat-s: 0.8125rem;
  /* V126: a step's title on a phone, one line ("let's try to put it in one line") */
  --t-step: clamp(0.875rem, 4.5vw, 1.5rem);   /* V127: a little smaller, so the longest title and the larger bubble still share one line */

  /* shape: corners, and the house frame (the soft white outline every window, card and chip of the site stands in) */
  --r-card: 20px;
  --r-frame: clamp(14px, 0.7rem + 0.5vw, 20px);
  --pill: 999px;
  --halo: 0 0 0 clamp(7px, 0.7vw, 11px) rgba(255, 255, 255, 0.78), 0 0 0 calc(clamp(7px, 0.7vw, 11px) + 1px) rgba(0, 0, 0, 0.035), 0 0 46px 14px rgba(255, 255, 255, 0.85), 0 60px 100px -60px rgba(0, 0, 0, 0.28);

  /* the wordmark, wherever a page shows it */
  --logo-h: 18px;

  /* the voice dot at the end of a title: the dot, and the picture it grows into. V120 ("the circle should be of the
     same size everywhere, even if it's a font that's bigger or smaller"): two plain sizes, the same on every title */
  /* V127 ("use this parameter for the Navid bubble ... big bubble for the people to see"): he set a desktop's in the
     panel, 50 / 80 / 12 (below). a phone's follow them as far as a phone's width lets a title and its bubble stand on
     one line: 32 and 48 at 412 wide, less on a narrower screen */
  --nv-dot: clamp(24px, 7.8vw, 32px);
  --nv-pic: clamp(36px, 11.7vw, 48px);
  /* V126 ("the circle is just an external thing ... if there is any spacing, it has to be consistent throughout the
     whole website"): ONE room between a title's last letter and the dot, on every title, phone and desktop. it is
     wide enough that the pulse's ring never lies on the letters */
  --nv-sp: 12px;
  --nv-glow: 61, 220, 132;   /* the green its pulse is made of (the Start key's own). V121 took the colour out; V122 put it back on his word */

  /* motion: two curves and three lengths. things arrive by moving, never by fading */
  --ease: cubic-bezier(0.625, 0.05, 0, 1);
  --ease-out: cubic-bezier(0.2, 0.715, 0.205, 0.99);
  --d-1: 0.18s; --d-2: 0.36s; --d-3: 0.7s;
}
@media (min-width: 861px) {
  :root {
    --t-heading: clamp(1.85rem, 0.957rem + 2.436vw, 3.15rem);
    --t-body: clamp(0.875rem, 0.748rem + 0.261vw, 0.984rem);
    --t-tab: 0.75rem;
    --t-display: clamp(2.39rem, 1.218rem + 3.828vw, 4.66rem);
    --t-mega: clamp(4.35rem, 8vw, 7.2rem);
    --t-title: clamp(1.41rem, 2.09vw, 1.88rem);
    --t-card: clamp(1.09rem, 1.39vw, 1.25rem);
    --max: 1056px;
    --t-chat-h: 0.875rem; --t-chat: 0.8125rem; --t-chat-s: 0.75rem;   /* V126: Ask Zero on a desktop */
    --nv-dot: 50px;   /* V127: his values from the panel: dot 50, grown 80, space before it 12 */
    --nv-pic: 80px;
  }
}