/* OrbitoCore marketing site.
   Built only from the design-system tokens in tokens.css (generated from
   design-system/tokens.json; layer "tokens"). Layers, lowest to highest:
   tokens < base < components < sections < utilities.
   Motion rules (docs/landing/motion.md): transform and opacity only; the hero
   H1, sub and forms are never animated; reduced motion = opacity fades only. */

@layer base, components, sections, utilities;

/* ── Self-hosted fonts (no visitor IPs to Google) ─────────────────────────── */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-800.5beb2f653e74.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-700.48e4b00b03b4.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-var.202cfb54d4e6.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("../fonts/caveat-600.018947f2ec96.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched Arial fallbacks, measured from the woff2 files (weighted
   average advance width + hhea ascent/descent), so the swap does not shift. */
@font-face {
  font-family: "Bricolage Grotesque Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial");
  font-weight: 700 800;
  size-adjust: 104.1%;
  ascent-override: 89.3%;
  descent-override: 25.9%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Figtree Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 300 500;
  size-adjust: 100.3%;
  ascent-override: 94.7%;
  descent-override: 24.9%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Figtree Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 600 900;
  size-adjust: 100.3%;
  ascent-override: 94.7%;
  descent-override: 24.9%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Caveat Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 600;
  size-adjust: 77.2%;
  ascent-override: 124.4%;
  descent-override: 38.9%;
  line-gap-override: 0%;
}

/* ══ base ═════════════════════════════════════════════════════════════════ */
@layer base {
  :root {
    /* The token stacks, with the metric-matched fallback slotted in right
       after each web font (CLS guard). Order and faces are tokens.json's. */
    --font-display: "Bricolage Grotesque", "Bricolage Grotesque Fallback", "Helvetica Neue", Arial, sans-serif;
    --font-sans: "Figtree", "Figtree Fallback", "Helvetica Neue", Arial, sans-serif;
    --font-hand: "Caveat", "Caveat Fallback", "Comic Sans MS", cursive;
    --header-h: 56px;
    --wave-h: 32px;
    --gutter: var(--space-4);
    --section-pad: var(--space-16);
    --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
    --ease-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --rail-h: 0px; /* the module rail under the header (desktop only) */
    color-scheme: light;
  }
  @media (min-width: 600px) {
    :root {
      --gutter: var(--space-6);
      --section-pad: var(--space-24);
    }
  }
  @media (min-width: 900px) {
    :root { --rail-h: 64px; }
  }

  *, *::before, *::after { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + var(--space-4));
  }
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  body {
    margin: 0;
    min-height: 100svh;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--t-body-size);
    line-height: var(--t-body-line);
    font-weight: var(--t-body-weight);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
  }

  h1, h2, h3, h4, p, ul, ol, figure, blockquote, fieldset { margin: 0; }
  img, svg { display: block; max-width: 100%; }
  img { height: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 2px; }
  strong, b { font-weight: var(--t-body-strong-weight); }

  :focus-visible {
    outline: var(--border-focus) solid var(--focus);
    outline-offset: 2px;
  }
  :focus:not(:focus-visible) { outline: none; }

  ::selection { background: var(--sun); color: var(--ink-fixed); }

  [hidden] { display: none !important; }

  main:focus { outline: none; }
}

/* ══ components ═══════════════════════════════════════════════════════════ */
@layer components {

  /* ── utilities that behave like components ──────────────────────────── */
  .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
  .sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap; border: 0;
  }
  .hp {
    position: absolute !important;
    left: -10000px; top: auto;
    width: 1px; height: 1px;
    overflow: hidden;
  }
  .skip-link {
    position: absolute; z-index: 100;
    left: var(--space-4); top: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--surface-raised); color: var(--ink);
    border: var(--border-ink) solid var(--ink);
    border-radius: var(--radius-pill);
    box-shadow: var(--sticker-sm);
    font-family: var(--t-button-family); font-size: var(--t-button-size);
    line-height: var(--t-button-line); font-weight: var(--t-button-weight);
    text-decoration: none;
    translate: 0 -200%;
  }
  .skip-link:focus { translate: 0 0; }

  .icon {
    width: 24px; height: 24px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* ── layout ─────────────────────────────────────────────────────────── */
  .container {
    width: 100%;
    max-width: calc(1120px + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .narrow { max-width: calc(560px + 2 * var(--gutter)); }

  .section {
    position: relative;
    padding-block: var(--section-pad);
  }
  .section > .container { position: relative; }

  /* Grounds. On a full-strength block colour every text, border and kit
     line is ink-fixed; ink-muted never appears there. */
  .ground-cream  { background: var(--surface); color: var(--ink); --edge: var(--ink); --muted: var(--ink-muted); }
  .ground-sun    { background: var(--sun); color: var(--ink-fixed); --edge: var(--ink-fixed); --muted: var(--ink-fixed); }
  .ground-pink   { background: var(--pink); color: var(--ink-fixed); --edge: var(--ink-fixed); --muted: var(--ink-fixed); }
  .ground-mint   { background: var(--mint); color: var(--ink-fixed); --edge: var(--ink-fixed); --muted: var(--ink-fixed); }
  .ground-tangerine { background: var(--tangerine); color: var(--ink-fixed); --edge: var(--ink-fixed); --muted: var(--ink-fixed); }

  /* The DS wave divider: the colour of the block above, over the top of the block below. */
  .wave {
    position: absolute;
    left: 0; top: -1px;
    width: 100%;
    height: var(--wave-h);
    pointer-events: none;
  }
  .wave--surface path   { fill: var(--surface); }
  .wave--sun path       { fill: var(--sun); }
  .wave--pink path      { fill: var(--pink); }
  .wave--mint path      { fill: var(--mint); }
  .wave--tangerine path { fill: var(--tangerine); }

  /* ── type ───────────────────────────────────────────────────────────── */
  /* H1: display-lg under 600px, display-xl from 600px (tokens only). */
  .h1 {
    font-family: var(--t-display-lg-family);
    font-size: var(--t-display-lg-size);
    line-height: var(--t-display-lg-line);
    font-weight: var(--t-display-lg-weight);
    letter-spacing: var(--t-display-lg-tracking);
    text-wrap: balance;
  }
  /* H2 and page titles: display-md under 600px, display-lg from 600px. */
  .h2, .h1-page {
    font-family: var(--t-display-md-family);
    font-size: var(--t-display-md-size);
    line-height: var(--t-display-md-line);
    font-weight: var(--t-display-md-weight);
    letter-spacing: var(--t-display-md-tracking);
    text-wrap: balance;
  }
  @media (min-width: 600px) {
    .h1 {
      font-family: var(--t-display-xl-family);
      font-size: var(--t-display-xl-size);
      line-height: var(--t-display-xl-line);
      font-weight: var(--t-display-xl-weight);
      letter-spacing: var(--t-display-xl-tracking);
    }
    .h2, .h1-page {
      font-family: var(--t-display-lg-family);
      font-size: var(--t-display-lg-size);
      line-height: var(--t-display-lg-line);
      font-weight: var(--t-display-lg-weight);
      letter-spacing: var(--t-display-lg-tracking);
    }
  }
  .card-title, .state-title, .brand-word, .success-title {
    font-family: var(--t-display-sm-family);
    font-size: var(--t-display-sm-size);
    line-height: var(--t-display-sm-line);
    font-weight: var(--t-display-sm-weight);
    letter-spacing: var(--t-display-sm-tracking);
  }
  .state-title {
    font-family: var(--t-display-md-family);
    font-size: var(--t-display-md-size);
    line-height: var(--t-display-md-line);
    font-weight: var(--t-display-md-weight);
    letter-spacing: var(--t-display-md-tracking);
    text-wrap: balance;
  }
  .lead {
    font-family: var(--t-body-lg-family);
    font-size: var(--t-body-lg-size);
    line-height: var(--t-body-lg-line);
    font-weight: var(--t-body-lg-weight);
    color: var(--muted, var(--ink-muted));
    max-width: 60ch;
  }
  .ground-sun .lead, .ground-pink .lead, .ground-mint .lead, .ground-tangerine .lead { color: var(--ink-fixed); }
  .caption {
    font-family: var(--t-caption-family);
    font-size: var(--t-caption-size);
    line-height: var(--t-caption-line);
    font-weight: var(--t-caption-weight);
    color: var(--muted, var(--ink-muted));
  }
  .num {
    font-weight: var(--t-body-strong-weight);
    font-variant-numeric: tabular-nums;
  }
  .optional { color: var(--muted, var(--ink-muted)); font-weight: var(--t-caption-weight); }

  /* Handwritten asides: Caveat, `hand` style. Two on the whole page. */
  .aside {
    font-family: var(--t-hand-family);
    font-size: var(--t-hand-size);
    line-height: var(--t-hand-line);
    font-weight: var(--t-hand-weight);
    letter-spacing: var(--t-hand-tracking);
    color: var(--ink-fixed);
  }

  /* The squiggle mark under one or two words of a display headline. */
  .squiggled, .circled { position: relative; display: inline-block; white-space: nowrap; }
  .squiggle-line {
    max-width: none;
    position: absolute;
    left: 0; right: 0;
    bottom: -0.08em;
    width: 100%;
    height: 14px;
    color: var(--ink-fixed);
    pointer-events: none;
  }
  .circled-line {
    max-width: none;
    position: absolute;
    left: -0.35em; top: -0.2em;
    width: calc(100% + 0.7em);
    height: calc(100% + 0.4em);
    color: var(--tangerine);
    pointer-events: none;
  }
  .circled { padding-inline: 0.05em; }

  /* ── the sticker recipe ─────────────────────────────────────────────── */
  .card {
    background: var(--surface-raised);
    color: var(--ink);
    --muted: var(--ink-muted);
    border: var(--border-ink) solid var(--edge, var(--ink));
    border-radius: var(--radius-lg);
    box-shadow: var(--sticker);
    padding: var(--space-6);
  }
  @media (max-width: 599.98px) {
    .card { padding: var(--space-4); }
  }
  .card--mint { background: var(--mint); color: var(--ink-fixed); --edge: var(--ink-fixed); --muted: var(--ink-fixed); }
  .card--sun  { background: var(--sun); color: var(--ink-fixed); --edge: var(--ink-fixed); --muted: var(--ink-fixed); }
  .card--pink { background: var(--pink); color: var(--ink-fixed); --edge: var(--ink-fixed); --muted: var(--ink-fixed); }
  .card--tangerine { background: var(--tangerine); color: var(--ink-fixed); --edge: var(--ink-fixed); --muted: var(--ink-fixed); }

  /* ── buttons (Button component) ─────────────────────────────────────── */
  .btn {
    --btn-bg: var(--surface-raised);
    --btn-fg: var(--ink);
    --btn-edge: var(--ink);
    --btn-shadow: var(--sticker);
    --btn-shadow-hover: 5px 5px 0 0 var(--shadow-ink);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-5);
    border: var(--border-ink) solid var(--btn-edge);
    border-radius: var(--radius-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    box-shadow: var(--btn-shadow);
    font-family: var(--t-button-family);
    font-size: var(--t-button-size);
    line-height: var(--t-button-line);
    font-weight: var(--t-button-weight);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out), background-color 120ms var(--ease-out);
  }
  .btn .icon { width: 18px; height: 18px; }
  .btn-label { display: inline-flex; align-items: center; gap: var(--space-2); }
  @media (pointer: coarse) {
    .btn { min-height: 48px; }
  }
  @media (hover: hover) {
    .btn:hover { transform: translate(-1px, -1px); box-shadow: var(--btn-shadow-hover); }
  }
  .btn:active {
    transform: translate(2px, 2px);
    box-shadow: var(--sticker-sm);
    transition-duration: 80ms;
  }
  .btn-primary { --btn-bg: var(--brand); --btn-fg: var(--on-brand); }
  @media (hover: hover) {
    .btn-primary:hover { --btn-bg: var(--brand-deep); }
  }
  .btn-primary:active { --btn-bg: var(--brand-deep); }
  .btn-secondary { --btn-bg: var(--surface-raised); --btn-fg: var(--ink); }
  .btn-tangerine { --btn-bg: var(--tangerine); --btn-fg: var(--ink-fixed); --btn-edge: var(--ink-fixed); }
  .btn-sun { --btn-bg: var(--sun); --btn-fg: var(--ink-fixed); --btn-edge: var(--ink-fixed); }
  .btn-mint { --btn-bg: var(--mint); --btn-fg: var(--ink-fixed); --btn-edge: var(--ink-fixed); }
  .btn-danger { --btn-bg: var(--danger); --btn-fg: var(--on-status); }

  .btn-sm {
    --btn-shadow: var(--sticker-sm);
    --btn-shadow-hover: 3px 3px 0 0 var(--shadow-ink);
    min-height: 32px;
    padding: 0 var(--space-4);
    font-family: var(--t-button-sm-family);
    font-size: var(--t-button-sm-size);
    line-height: var(--t-button-sm-line);
    font-weight: var(--t-button-sm-weight);
  }
  .btn-sm .icon { width: 16px; height: 16px; }
  /* 32px tall, 44px target */
  .btn-sm::after { content: ""; position: absolute; inset: -8px -4px; }
  @media (pointer: coarse) {
    .btn-sm { min-height: 32px; }
  }
  .btn-lg {
    min-height: 52px;
    padding: 0 var(--space-6);
    font-size: 17px; /* Button component: lg = 17px / 52px */
  }
  @media (pointer: coarse) {
    .btn-lg { min-height: 52px; }
  }
  .btn-block { display: flex; width: 100%; }

  .btn:disabled, .btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: var(--btn-shadow);
  }

  /* busy: width kept, label invisible, spinner centred in the label's colour */
  .btn[aria-busy="true"] { pointer-events: none; }
  .btn[aria-busy="true"] > .btn-label,
  .btn[aria-busy="true"] > .icon { visibility: hidden; }
  .btn .spin { display: none; }
  .btn[aria-busy="true"] > .spin {
    display: block;
    position: absolute;
    left: 50%; top: 50%;
    width: 16px; height: 16px;
    margin: -8px 0 0 -8px;
    border-width: 2.5px;
  }
  /* saved flash: a check replaces the label for 600ms, width kept */
  .btn-saved { display: none; position: absolute; inset: 0; place-items: center; }
  .btn.is-saved > .btn-label, .btn.is-saved > .icon { visibility: hidden; }
  .btn.is-saved > .btn-saved { display: grid; }

  /* the DS spinner: a chunky ink ring with a tangerine arc, one turn per 0.8s */
  .spin {
    display: inline-block;
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 3px solid var(--ink);
    border-top-color: var(--tangerine);
    animation: spin 0.8s linear infinite;
    flex: none;
  }
  .spin--inverse { border-color: var(--on-brand); border-top-color: var(--sun); }
  .btn-tangerine .spin { border-color: var(--ink-fixed); border-top-color: var(--surface-raised); }

  /* ── fields ─────────────────────────────────────────────────────────── */
  .field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
  .field-label {
    font-family: var(--t-label-family);
    font-size: var(--t-label-size);
    line-height: var(--t-label-line);
    font-weight: var(--t-label-weight);
    letter-spacing: var(--t-label-tracking);
    color: inherit;
  }
  .ctl {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 48px;
    padding: 0 var(--space-3);
    border: var(--border-ink) solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    color: var(--ink);
    transition: box-shadow 120ms, border-color 120ms;
  }
  .ctl input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    /* body-lg keeps iOS from zooming into the field (needs 16px or more) */
    font-family: var(--t-body-lg-family);
    font-size: var(--t-body-lg-size);
    line-height: var(--t-body-lg-line);
    font-weight: var(--t-body-lg-weight);
    outline: none;
  }
  .ctl input::placeholder { color: var(--ink-subtle); opacity: 1; }
  .ctl:focus-within {
    border-color: var(--ink);
    box-shadow: var(--sticker-sm);
    outline: var(--border-focus) solid var(--focus);
    outline-offset: 2px;
  }
  .ctl.is-invalid { border-color: var(--danger); box-shadow: var(--sticker-sm); }
  .ctl--readonly { border-style: dashed; background: var(--surface); }
  .card--mint .ctl, .card--sun .ctl { border-color: var(--ink-fixed); }

  /* checkboxes */
  .check-field { display: flex; flex-direction: column; gap: var(--space-2); }
  .check { display: flex; align-items: flex-start; gap: var(--space-3); min-height: 44px; }
  .check-control { position: relative; flex: none; width: 24px; height: 24px; margin-top: 1px; }
  .check-input {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 24px; height: 24px;
    margin: 0;
    border: var(--border-ink) solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    cursor: pointer;
    transition: background-color 120ms, border-color 120ms;
  }
  .check-input:checked { background: var(--brand); border-color: var(--ink); }
  .check.is-invalid .check-input { border-color: var(--danger); box-shadow: var(--sticker-sm); }
  .check-mark {
    position: absolute;
    left: 3px; top: 3px;
    width: 18px; height: 18px;
    color: var(--on-brand);
    stroke-width: 3;
    opacity: 0;
    pointer-events: none;
  }
  .check-input:checked + .check-mark { opacity: 1; }
  .check-label {
    font-family: var(--t-body-family);
    font-size: var(--t-body-size);
    line-height: var(--t-body-line);
    font-weight: var(--t-body-weight);
    cursor: pointer;
  }
  .check-label a { color: var(--brand-text); }

  /* field messages: a danger-tint pill at −1° with its icon in a disc */
  .field-msgs { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .field-msgs:not(:has(*)) { display: none; }
  .msg {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    align-self: flex-start;
    max-width: 100%;
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
    border: var(--border-ink) solid var(--ink);
    border-radius: var(--radius-pill);
    box-shadow: var(--sticker-sm);
    font-family: var(--t-caption-family);
    font-size: var(--t-caption-size);
    line-height: var(--t-caption-line);
    font-weight: var(--t-body-strong-weight);
    rotate: -1deg;
  }
  .msg--error { background: var(--danger-tint); color: var(--danger-text); }
  .msg--warning { background: var(--sun); color: var(--ink-fixed); border-color: var(--ink-fixed); }
  .typo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

  /* ── icon discs ─────────────────────────────────────────────────────── */
  .disc {
    --disc-bg: var(--sun);
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 36px; height: 36px;
    border-radius: var(--radius-pill);
    background: var(--disc-bg);
    border: var(--border-ink) solid var(--ink-fixed);
    box-shadow: var(--sticker-sm);
    color: var(--ink-fixed);
    rotate: -6deg;
  }
  .disc .icon { width: 18px; height: 18px; stroke-width: 2.5; }
  .disc--white { --disc-bg: var(--on-brand); }
  .disc--mint { --disc-bg: var(--mint); }
  .disc--pink { --disc-bg: var(--pink); }

  /* ── DrawnIcon tiles ────────────────────────────────────────────────── */
  .drawn {
    --drawn-size: 40px;
    --tile-bg: var(--sun-tint);
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    align-self: flex-start;
    padding: var(--space-1);
    background: var(--tile-bg);
    border: var(--border-ink) solid var(--ink-fixed);
    border-radius: var(--radius-md);
    box-shadow: var(--sticker-sm);
    transition: background-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out), transform 160ms var(--ease-out);
  }
  .drawn img { width: var(--drawn-size); height: var(--drawn-size); transition: opacity 160ms var(--ease-out); }
  .drawn--sm { --drawn-size: 32px; }
  .drawn--md { --drawn-size: 40px; }
  .drawn--lg { --drawn-size: 48px; }
  .drawn--xl { --drawn-size: 64px; padding: var(--space-2); }
  .tint-pink { --tile-bg: var(--pink-tint); }
  .tint-mint { --tile-bg: var(--mint-tint); }
  .tint-sun { --tile-bg: var(--sun-tint); }
  .tint-tangerine { --tile-bg: var(--tangerine-tint); }

  /* ── number chip: a sun disc holding one digit (display-sm) ─────────── */
  .num-chip {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 44px; height: 44px;
    border-radius: var(--radius-pill);
    background: var(--sun);
    border: var(--border-ink) solid var(--ink-fixed);
    box-shadow: var(--sticker-sm);
    color: var(--ink-fixed);
    font-family: var(--t-display-sm-family);
    font-size: var(--t-display-sm-size);
    line-height: 1;
    font-weight: var(--t-display-sm-weight);
    font-variant-numeric: tabular-nums;
    rotate: -6deg;
  }

  /* ── feature rows: a mint check disc, then name + one-liner ─────────── */
  .feature-rows { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
  .feature-rows li { display: flex; align-items: flex-start; gap: var(--space-3); }
  .feature-rows p {
    min-width: 0;
    padding-top: 7px; /* centres the first line on the 36px disc */
    font-family: var(--t-body-family);
    font-size: var(--t-body-size);
    line-height: var(--t-body-line);
    font-weight: var(--t-body-weight);
  }
  .feature-rows strong { font-weight: var(--t-body-strong-weight); }

  /* ── "Vaak elders" note: a quiet sunken card, never red ─────────────── */
  .elders {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--surface-sunken);
    color: var(--ink);
    border-radius: var(--radius-md);
    font-family: var(--t-body-family);
    font-size: var(--t-body-size);
    line-height: var(--t-body-line);
    font-weight: var(--t-body-weight);
  }
  .elders strong { font-weight: var(--t-body-strong-weight); }

  /* ── chips ──────────────────────────────────────────────────────────── */
  .chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); list-style: none; padding: 0; }
  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 32px;
    padding: var(--space-1) var(--space-3);
    border: var(--border-ink) solid var(--edge, var(--ink));
    border-radius: var(--radius-pill);
    background: var(--surface-raised);
    color: var(--ink);
    box-shadow: var(--sticker-sm);
    font-family: var(--t-label-family);
    font-size: var(--t-label-size);
    line-height: var(--t-label-line);
    font-weight: var(--t-label-weight);
    letter-spacing: var(--t-label-tracking);
  }
  .chip--pink-tint { background: var(--pink-tint); }

  /* ── banners, inline states, toast ─────────────────────────────────── */
  .banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
    border: var(--border-ink) solid var(--ink-fixed);
    border-radius: var(--radius-md);
    box-shadow: var(--sticker-sm);
    color: var(--ink-fixed);
    --muted: var(--ink-fixed);
  }
  .banner--sun { background: var(--sun); }
  .banner--pink { background: var(--pink); }
  .banner--mint { background: var(--mint); }
  .banner-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-width: 0; }
  .banner-text {
    font-family: var(--t-body-strong-family);
    font-size: var(--t-body-strong-size);
    line-height: var(--t-body-strong-line);
    font-weight: var(--t-body-strong-weight);
    padding-top: var(--space-1);
  }
  .banner-caption {
    font-family: var(--t-caption-family);
    font-size: var(--t-caption-size);
    line-height: var(--t-caption-line);
    font-weight: var(--t-caption-weight);
  }
  .banner:focus { outline: none; }

  .inline-state {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    color: var(--ink);
  }
  .inline-state:focus { outline: none; }
  .inline-state-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .inline-state-title {
    font-family: var(--t-body-strong-family);
    font-size: var(--t-body-strong-size);
    line-height: var(--t-body-strong-line);
    font-weight: var(--t-body-strong-weight);
  }
  .inline-state-text { font-size: var(--t-body-size); line-height: var(--t-body-line); }
  .form-state:not(:has(*)) { display: none; }

  .toast {
    position: fixed;
    z-index: 70;
    left: 50%;
    bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
    translate: -50% 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-5) var(--space-2) var(--space-2);
    background: var(--mint);
    color: var(--ink-fixed);
    border: var(--border-ink) solid var(--ink-fixed);
    border-radius: var(--radius-lg);
    box-shadow: var(--sticker-sm);
    font-family: var(--t-body-strong-family);
    font-size: var(--t-body-strong-size);
    line-height: var(--t-body-strong-line);
    font-weight: var(--t-body-strong-weight);
    animation: toast-in 200ms var(--ease-out) both;
  }
  .toast.is-leaving { animation: fade-out 200ms var(--ease-out) both; }
  @media (max-width: 899.98px) {
    .page-landing .toast { bottom: calc(112px + env(safe-area-inset-bottom)); }
  }

  /* ── speech-bubble sticker ──────────────────────────────────────────── */
  .bubble {
    --tilt: 4deg;
    position: relative;
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    background: var(--pink);
    color: var(--ink-fixed);
    border: var(--border-ink) solid var(--ink-fixed);
    border-radius: var(--radius-lg);
    box-shadow: var(--sticker-sm);
    font-family: var(--t-hand-family);
    font-size: var(--t-hand-size);
    line-height: var(--t-hand-line);
    font-weight: var(--t-hand-weight);
    white-space: nowrap;
    rotate: var(--tilt);
  }
  .bubble--sun { background: var(--sun); }
  .bubble::after {
    content: "";
    position: absolute;
    left: 18px; bottom: -8px;
    width: 14px; height: 14px;
    background: inherit;
    border-right: var(--border-ink) solid var(--ink-fixed);
    border-bottom: var(--border-ink) solid var(--ink-fixed);
    box-shadow: 2px 2px 0 0 var(--shadow-ink);
    transform: rotate(45deg);
  }

  /* ── word stickers: the word is set in `hand` on the shape ──────────── */
  .word {
    --tilt: 3deg;
    position: relative;
    display: inline-grid;
    place-items: center;
    rotate: var(--tilt);
    pointer-events: none;
  }
  .word img { display: block; width: 100%; height: auto; }
  .word span {
    position: absolute;
    font-family: var(--t-hand-family);
    font-size: var(--t-hand-size);
    line-height: 1;
    font-weight: var(--t-hand-weight);
    color: var(--ink-fixed);
    white-space: nowrap;
  }
  .word--ticket { --tilt: 6deg; }
  .word--ticket span { left: 34%; right: 6%; top: 50%; transform: translateY(-58%); text-align: center; }
  .word--stamp { --tilt: 6deg; }
  .word--stamp span { inset: 0; display: grid; place-items: center; }
  .word--notif { --tilt: -4deg; }
  .word--notif span { left: 34%; right: 6%; top: 50%; transform: translateY(-58%); text-align: center; white-space: normal; }

  /* doodles rest at their tilt; --tilt drives the one-time wiggle too */
  .doodle, [data-doodle] { rotate: var(--tilt, 0deg); }

  /* ── phone mock (HTML/CSS; never scaled with a transform) ───────────── */
  .phone {
    position: relative;
    flex: none;
    width: 300px;
    max-width: 100%;
    height: 620px;
    padding: var(--space-2);
    background: var(--surface-raised);
    border: var(--border-ink) solid var(--ink-fixed);
    border-radius: var(--radius-xl);
    box-shadow: var(--sticker);
    color: var(--ink);
  }
  .phone-screen {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--surface);
    border: var(--border-hair) solid var(--line);
    border-radius: var(--radius-lg);
  }
  .phone-island {
    position: absolute;
    z-index: 3;
    left: 50%; top: var(--space-2);
    translate: -50% 0;
    width: 76px; height: 20px;
    border-radius: var(--radius-pill);
    background: var(--ink-fixed);
  }
  .phone-stack { position: relative; flex: 1; min-height: 0; }
  .screen {
    position: absolute;
    inset: 0;
    padding: calc(var(--space-8) + var(--space-2)) var(--space-3) var(--space-3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 240ms var(--ease-out), translate 240ms var(--ease-out), visibility 0s linear 240ms;
  }
  .screen.is-current {
    opacity: 1;
    visibility: visible;
    transition: opacity 240ms var(--ease-out), translate 240ms var(--ease-out), visibility 0s;
  }

  /* screen content: the app's dense UI (hairline rows, sticker-sm chips) */
  .scr { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; }
  .scr-head { display: flex; flex-direction: column; gap: var(--space-1); }
  .scr-title {
    font-family: var(--t-title-family);
    font-size: var(--t-title-size);
    line-height: var(--t-title-line);
    font-weight: var(--t-title-weight);
  }
  .scr-meta, .appt-what {
    font-family: var(--t-caption-family);
    font-size: var(--t-caption-size);
    line-height: var(--t-caption-line);
    font-weight: var(--t-caption-weight);
    color: var(--ink-muted);
  }
  .scr-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
  .appt {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-top: var(--border-hair) solid var(--line);
  }
  .appt-time, .appt-name {
    font-family: var(--t-body-strong-family);
    font-size: var(--t-body-strong-size);
    line-height: var(--t-body-strong-line);
    font-weight: var(--t-body-strong-weight);
  }
  .appt-time { min-width: 44px; font-variant-numeric: tabular-nums; }
  .appt-body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
  .scr-chip, .scr-block, .scr-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    align-self: flex-start;
    padding: 0 var(--space-2);
    min-height: 24px;
    font-family: var(--t-caption-family);
    font-size: var(--t-caption-size);
    line-height: var(--t-caption-line);
    font-weight: var(--t-body-strong-weight);
  }
  .scr-chip .icon, .scr-block .icon { width: 12px; height: 12px; stroke-width: 3; }
  .scr-chip {
    border: var(--border-ink) solid var(--ink-fixed);
    border-radius: var(--radius-pill);
    box-shadow: var(--sticker-sm);
    color: var(--ink-fixed);
  }
  .scr-chip--mint { background: var(--mint); }
  .scr-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--surface-raised);
    border: var(--border-ink) solid var(--ink);
    border-radius: var(--radius-md);
    box-shadow: var(--sticker-sm);
  }
  .scr-card--stock { justify-content: space-between; }
  .scr-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px; height: 44px;
    border-radius: var(--radius-pill);
    background: var(--pink);
    border: var(--border-ink) solid var(--ink-fixed);
    color: var(--ink-fixed);
    font-weight: var(--t-body-strong-weight);
  }
  .scr-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-top: var(--border-hair) solid var(--line);
  }
  .scr-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .scr-total { border-top: var(--border-ink) solid var(--ink); font-weight: var(--t-body-strong-weight); }
  .scr-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1) var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: var(--border-ink) solid var(--ink-fixed);
    border-radius: var(--radius-md);
    box-shadow: var(--sticker-sm);
    color: var(--ink-fixed);
  }
  .scr-banner--mint { background: var(--mint); justify-content: flex-start; }
  .scr-banner--pink { background: var(--pink); }
  .scr-badge {
    border: var(--border-ink) solid var(--ink-fixed);
    border-radius: var(--radius-sm);
    color: var(--ink-fixed);
    flex: none;
  }
  .scr-badge--sun { background: var(--sun); }
  .scr-scan {
    position: relative;
    display: grid;
    place-items: center;
    height: 104px;
    border-radius: var(--radius-md);
    background: var(--ink-fixed);
    overflow: hidden;
  }
  .scr-scan::before, .scr-scan::after {
    content: "";
    position: absolute;
    inset: var(--space-3);
    border: var(--border-ink) dashed var(--surface-raised);
    border-radius: var(--radius-sm);
  }
  .scr-scan::after { inset: 50% var(--space-2) auto; height: 0; border: 0; border-top: var(--border-ink) solid var(--mint); }
  .scr-scan-bars {
    width: 58%;
    height: 44px;
    background: repeating-linear-gradient(90deg, var(--surface-raised) 0 3px, transparent 3px 6px, var(--surface-raised) 6px 7px, transparent 7px 11px);
  }
  .rota-row { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2) 0; border-top: var(--border-hair) solid var(--line); }
  .scr-block { border-radius: var(--radius-sm); }
  .scr-block--pink { background: var(--pink-tint); color: var(--ink); }
  .scr-block--sun { background: var(--sun); color: var(--ink-fixed); border: var(--border-ink) solid var(--ink-fixed); }
  .scr-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    margin-top: auto;
    border-radius: var(--radius-pill);
    background: var(--mint);
    border: var(--border-ink) solid var(--ink-fixed);
    box-shadow: var(--sticker-sm);
    color: var(--ink-fixed);
    font-family: var(--t-button-family);
    font-size: var(--t-button-size);
    line-height: var(--t-button-line);
    font-weight: var(--t-button-weight);
  }
  .scr-button .icon { width: 18px; height: 18px; }
  .scr--center { align-items: center; justify-content: center; text-align: center; gap: var(--space-4); }
  .scr-amount {
    font-family: var(--t-display-md-family);
    font-size: var(--t-display-md-size);
    line-height: var(--t-display-md-line);
    font-weight: var(--t-display-md-weight);
    letter-spacing: var(--t-display-md-tracking);
  }
  .scr-hint { max-width: 22ch; }
  .scr-disc {
    display: grid;
    place-items: center;
    width: 72px; height: 72px;
    border-radius: var(--radius-pill);
    background: var(--sun);
    border: var(--border-ink) solid var(--ink-fixed);
    box-shadow: var(--sticker-sm);
    color: var(--ink-fixed);
    rotate: -6deg;
  }
  .scr-disc .icon { width: 32px; height: 32px; stroke-width: 2.5; }
  .scr-disc--white { background: var(--on-brand); }
  .screen--paid { background: var(--mint); color: var(--ink-fixed); }

  /* the chapters' short phone fragment: 260 wide, as tall as its one screen */
  .phone--mini { width: 260px; height: auto; }
  .phone--mini .phone-stack { flex: none; }
  .phone--mini .screen {
    position: relative;
    inset: auto;
    opacity: 1;
    visibility: visible;
    padding-bottom: var(--space-4);
  }
  /* a mini screen drawn as a card instead of a phone (the client card) */
  .mini-card {
    width: 260px;
    max-width: 100%;
    padding: var(--space-4);
    background: var(--surface-raised);
    color: var(--ink);
    border: var(--border-ink) solid var(--ink-fixed);
    border-radius: var(--radius-lg);
    box-shadow: var(--sticker);
  }
  .scr--card { height: auto; }

  /* the salon's booking page, the client card, the stock scan and the rota */
  .scr-day {
    font-family: var(--t-body-strong-family);
    font-size: var(--t-body-strong-size);
    line-height: var(--t-body-strong-line);
    font-weight: var(--t-body-strong-weight);
  }
  .scr-slots { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .scr-slot {
    display: inline-grid;
    place-items: center;
    min-height: 32px;
    padding: 0 var(--space-3);
    border: var(--border-ink) solid var(--ink);
    border-radius: var(--radius-pill);
    background: var(--surface-raised);
    font-family: var(--t-label-family);
    font-size: var(--t-label-size);
    line-height: var(--t-label-line);
    font-weight: var(--t-label-weight);
    font-variant-numeric: tabular-nums;
  }
  .scr-slot.is-picked { background: var(--brand); color: var(--on-brand); box-shadow: var(--sticker-sm); }
  .scr-button--brand { background: var(--brand); color: var(--on-brand); margin-top: 0; }
  .scr-person { display: flex; align-items: center; gap: var(--space-3); }
  .scr-block--shift { background: var(--mint-tint); color: var(--ink); }
  .scr-banner--sun { background: var(--sun); justify-content: flex-start; flex-wrap: nowrap; }
  .scr-banner--mint { flex-wrap: nowrap; }

  /* ── forms: join card ───────────────────────────────────────────────── */
  .form-slot { width: 100%; max-width: 480px; }
  .join-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .form-caption {
    margin-top: calc(-1 * var(--space-2));
    text-align: center;
    font-family: var(--t-caption-family);
    font-size: var(--t-caption-size);
    line-height: var(--t-caption-line);
    font-weight: var(--t-caption-weight);
    color: var(--ink-muted);
  }

  /* ── success card (M3) ──────────────────────────────────────────────── */
  .success { display: flex; flex-direction: column; gap: var(--space-5); }
  .success-head { display: flex; align-items: center; gap: var(--space-4); }
  .success-title:focus { outline: none; }
  .success-title:focus-visible { outline: var(--border-focus) solid var(--focus); outline-offset: 2px; }
  .success-place { display: flex; flex-direction: column; gap: var(--space-1); }
  .success-place-label {
    font-family: var(--t-label-family);
    font-size: var(--t-label-size);
    line-height: var(--t-label-line);
    font-weight: var(--t-label-weight);
    letter-spacing: var(--t-label-tracking);
  }
  .success-place-number {
    display: inline-flex;
    align-items: baseline;
    align-self: flex-start;
    font-family: var(--t-display-lg-family);
    font-size: var(--t-display-lg-size);
    line-height: var(--t-display-lg-line);
    font-weight: var(--t-display-lg-weight);
    letter-spacing: var(--t-display-lg-tracking);
    font-variant-numeric: tabular-nums;
  }
  .success-note { font-size: var(--t-body-size); line-height: var(--t-body-line); }
  .banner-action { display: contents; }

  .share {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-5);
    border-top: var(--border-hair) solid var(--ink-fixed);
  }
  .share-title {
    font-family: var(--t-title-family);
    font-size: var(--t-title-size);
    line-height: var(--t-title-line);
    font-weight: var(--t-title-weight);
  }
  .share-link { display: flex; flex-direction: column; gap: var(--space-2); }
  .share-row { display: flex; align-items: center; gap: var(--space-3); }
  .share-row .ctl { flex: 1; min-width: 0; }
  .share-row .ctl input { font-size: var(--t-body-size); }
  @supports (-webkit-touch-callout: none) {
    .share-row .ctl input { font-size: var(--t-body-lg-size); }
  }
  .share-count strong { font-variant-numeric: tabular-nums; }

  /* step 2 */
  .qualify-wrap { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-5); border-top: var(--border-hair) solid var(--ink-fixed); }
  .qualify-saved { display: flex; align-items: center; gap: var(--space-3); }
  .qualify-saved-text, .qualify-title, .prefs-title {
    font-family: var(--t-title-family);
    font-size: var(--t-title-size);
    line-height: var(--t-title-line);
    font-weight: var(--t-title-weight);
  }
  .qualify-summary, .danger-summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    list-style: none;
    cursor: pointer;
    color: var(--brand-text);
    font-family: var(--t-body-strong-family);
    font-size: var(--t-body-strong-size);
    line-height: var(--t-body-strong-line);
    font-weight: var(--t-body-strong-weight);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }
  .qualify-summary::-webkit-details-marker, .danger-summary::-webkit-details-marker { display: none; }
  .qualify-chevron { width: 18px; height: 18px; transition: rotate 160ms var(--ease-out); }
  details[open] > summary .qualify-chevron { rotate: 180deg; }
  .qualify-form { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-3); }
  .qualify-intro { font-size: var(--t-body-size); line-height: var(--t-body-line); }
  .qualify-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
  .choices { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
  .choices legend { padding: 0; margin-bottom: var(--space-2); }
  .choice-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .choice { position: relative; display: inline-flex; }
  .choice-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
  .choice-face {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 44px;
    padding: 0 var(--space-4);
    border: var(--border-ink) solid var(--ink-fixed);
    border-radius: var(--radius-pill);
    background: var(--surface-raised);
    color: var(--ink);
    box-shadow: var(--sticker-sm);
    font-family: var(--t-label-family);
    font-size: var(--t-label-size);
    line-height: var(--t-label-line);
    font-weight: var(--t-label-weight);
    letter-spacing: var(--t-label-tracking);
    cursor: pointer;
    transition: background-color 120ms;
  }
  .choice-check { display: none; width: 16px; height: 16px; stroke-width: 3; }
  .choice-input:checked + .choice-face { background: var(--brand-tint); color: var(--ink); }
  .choice-input:checked + .choice-face .choice-check { display: block; }
  .choice-input:focus-visible + .choice-face { outline: var(--border-focus) solid var(--focus); outline-offset: 2px; }
  .qualify-note {
    display: none;
    align-self: flex-start;
    padding: var(--space-1) var(--space-3);
    border: var(--border-ink) solid var(--ink-fixed);
    border-radius: var(--radius-md);
    background: var(--pink);
    color: var(--ink-fixed);
    box-shadow: var(--sticker-sm);
    font-family: var(--t-body-strong-family);
    font-size: var(--t-body-strong-size);
    line-height: var(--t-body-strong-line);
    font-weight: var(--t-body-strong-weight);
  }
  .choices:has(input[value="multiple"]:checked) .qualify-note { display: block; }

  /* ── header ─────────────────────────────────────────────────────────── */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--header-h);
    background: var(--surface);
    border-bottom: var(--border-hair) solid transparent;
    transition: border-color 200ms var(--ease-out);
  }
  .site-header.is-scrolled { border-bottom-color: var(--line); }
  .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: 100%; }
  .brand { flex: none; display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); text-decoration: none; min-height: 44px; }
  .brand-tile { width: 32px; height: 32px; }
  .header-actions { display: flex; align-items: center; gap: var(--space-3); }
  /* narrow: logo tile + the always-visible CTA + NL/EN; the wordmark stays for screen readers */
  @media (max-width: 599.98px) {
    .brand-word--wide {
      position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
      overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
    }
  }
  @media (min-width: 600px) {
    .header-actions { gap: var(--space-4); }
  }
  @media (max-width: 369.98px) {
    .header-inner, .header-actions, .lang-switch { gap: var(--space-2); }
    .lang-pill { min-width: 40px; padding: 0 var(--space-2); }
  }

  /* desktop anchor nav (landing only): Figtree 15/600, ink; active = brand-text + 2px underline */
  .site-nav { display: none; }
  @media (min-width: 900px) {
    .site-nav { display: block; margin-inline: auto; }
  }
  .site-nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--space-1); }
  .site-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-3);
    color: var(--ink);
    font-family: var(--t-body-strong-family);
    font-size: var(--t-body-strong-size);
    line-height: var(--t-body-strong-line);
    font-weight: var(--t-body-strong-weight);
    text-decoration: none;
    white-space: nowrap;
    transition: color 120ms var(--ease-out);
  }
  .site-nav-link::after {
    content: "";
    position: absolute;
    left: var(--space-3); right: var(--space-3);
    bottom: 8px;
    height: 2px;
    border-radius: var(--radius-pill);
    background: currentColor;
    opacity: 0;
    transition: opacity 120ms var(--ease-out);
  }
  @media (hover: hover) {
    .site-nav-link:hover { color: var(--brand-text); }
  }
  .site-nav-link.is-active { color: var(--brand-text); }
  .site-nav-link.is-active::after { opacity: 1; }
  /* five links + CTA + language pills: tighter between 900 and 1080px so the header never overflows */
  @media (min-width: 900px) and (max-width: 1079.98px) {
    .site-nav-list { gap: 0; }
    .site-nav-link { padding: 0 var(--space-2); }
    .site-nav-link::after { left: var(--space-2); right: var(--space-2); }
  }
  .lang-switch { display: flex; gap: var(--space-2); }
  .lang-pill {
    position: relative;
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    height: 32px;
    padding: 0 var(--space-3);
    border: var(--border-ink) solid var(--ink);
    border-radius: var(--radius-pill);
    background: var(--surface-raised);
    color: var(--ink);
    box-shadow: var(--sticker-sm);
    font-family: var(--t-label-family);
    font-size: var(--t-label-size);
    line-height: var(--t-label-line);
    font-weight: var(--t-label-weight);
    letter-spacing: var(--t-label-tracking);
    text-decoration: none;
    transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
  }
  .lang-pill::after { content: ""; position: absolute; inset: -6px -2px; }
  @media (hover: hover) {
    .lang-pill:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 0 var(--shadow-ink); }
  }
  .lang-pill:active { transform: translate(2px, 2px); box-shadow: none; transition-duration: 80ms; }
  .lang-pill.is-active { background: var(--brand); color: var(--on-brand); }

  /* ── mobile sticky bar ──────────────────────────────────────────────── */
  .stickybar { display: none; }
  @media (max-width: 899.98px) {
    html.js .stickybar {
      display: block;
      position: fixed;
      z-index: 60;
      left: 0; right: 0; bottom: 0;
      padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
      background: var(--surface-raised);
      border-top: var(--border-ink) solid var(--ink);
      translate: 0 110%;
      visibility: hidden;
      transition: translate 200ms var(--ease-out), visibility 0s linear 200ms;
    }
    html.js .stickybar.is-shown {
      translate: 0 0;
      visibility: visible;
      transition: translate 200ms var(--ease-out), visibility 0s;
    }
    html.js body.page-landing { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
    /* focus/scroll targets stop above the ~100px sticky bar (WCAG 2.4.11, C43) */
    html.js:has(body.page-landing) { scroll-padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  }
  .stickybar-caption {
    margin-top: var(--space-1);
    text-align: center;
    font-family: var(--t-caption-family);
    font-size: var(--t-caption-size);
    line-height: var(--t-caption-line);
    font-weight: var(--t-caption-weight);
    color: var(--ink-muted);
  }

  /* ── footer ─────────────────────────────────────────────────────────── */
  .site-footer {
    position: relative;
    padding: calc(var(--wave-h) + var(--space-12)) 0 var(--space-12);
    background: var(--surface-sunken);
    color: var(--ink);
  }
  .footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); }
  .footer-moon { display: flex; align-items: center; gap: var(--space-4); max-width: 440px; }
  .footer-moon img { width: 120px; height: 120px; flex: none; }
  .footer-moon p { font-size: var(--t-body-lg-size); line-height: var(--t-body-lg-line); }
  .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: var(--border-hair) solid var(--line);
  }
  .footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); }
  .footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
  .footer-lang { display: inline-flex; gap: var(--space-4); }
  .footer-lang a[aria-current] { font-weight: var(--t-body-strong-weight); text-decoration: none; }
  .footer-legal { color: var(--ink-muted); }
  .footer-legal span + span::before { content: "·"; margin-inline: var(--space-2); }

  /* ── simple pages (privacy, status, confirm, errors) ────────────────── */
  .page-section { min-height: calc(100svh - var(--header-h)); }
  .page-section--full { min-height: 100svh; }
  .state-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  @media (min-width: 600px) {
    .state-card { padding: var(--space-8); }
  }
  /* confirm page (change-05): the button plus two optional questions; the rocket waits on the card's corner */
  .confirm-card { position: relative; }
  .confirm-doodle { position: absolute; right: -4px; top: -44px; width: 88px; height: 88px; --tilt: 8deg; rotate: var(--tilt); pointer-events: none; }
  .confirm-form { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); width: 100%; }
  .confirm-questions {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    width: 100%;
    padding: var(--space-4);
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
  }
  .confirm-intro { color: var(--ink-muted); }
  @media (min-width: 600px) {
    .confirm-doodle { right: -48px; top: -56px; width: 120px; height: 120px; }
  }
  .prose { max-width: calc(720px + 2 * var(--gutter)); display: flex; flex-direction: column; gap: var(--space-4); }
  .prose h2 {
    margin-top: var(--space-6);
    font-family: var(--t-display-sm-family);
    font-size: var(--t-display-sm-size);
    line-height: var(--t-display-sm-line);
    font-weight: var(--t-display-sm-weight);
    letter-spacing: var(--t-display-sm-tracking);
  }
  .prose p, .prose li { font-size: var(--t-body-lg-size); line-height: var(--t-body-lg-line); }
  .prose ul { padding-left: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
  .prose a { color: var(--brand-text); }
  .status-grid { display: flex; flex-direction: column; gap: var(--space-8); max-width: calc(560px + 2 * var(--gutter)); }
  .status-head { display: flex; flex-direction: column; gap: var(--space-4); }
  .prefs { display: flex; flex-direction: column; gap: var(--space-4); }
  .prefs-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .danger-zone form { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding-top: var(--space-2); }
  /* invitation page (beta): two numbered step cards, then the small print on the ground */
  .invite-grid { display: flex; flex-direction: column; gap: var(--space-8); }
  .invite-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .invite-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-6); }
  .invite-step { display: flex; align-items: flex-start; gap: var(--space-4); }
  .invite-step-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-width: 0; padding-top: var(--space-2); }
  .invite-step-title {
    font-family: var(--t-display-sm-family);
    font-size: var(--t-display-sm-size);
    line-height: var(--t-display-sm-line);
    font-weight: var(--t-display-sm-weight);
    letter-spacing: var(--t-display-sm-tracking);
  }
  .invite-stores { display: flex; flex-wrap: wrap; gap: var(--space-3); }
  .invite-choices { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-self: stretch; }
  .invite-choice { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-width: 0; }
  .invite-choice-title { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; }
  @media (min-width: 900px) {
    .invite-choices { grid-template-columns: 1fr 1fr; }
  }
  .invite-notes { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
  .invite-notes li { display: flex; align-items: flex-start; gap: var(--space-3); }
  .invite-notes p { min-width: 0; padding-top: 7px; /* centres the first line on the 36px disc */ }
  @media (max-width: 599.98px) {
    .invite-open { align-self: stretch; }
  }
  .danger-summary { color: var(--danger-text); }
}

/* ══ sections ═════════════════════════════════════════════════════════════ */
@layer sections {
  .section-head { display: flex; flex-direction: column; gap: var(--space-4); max-width: 760px; margin-bottom: var(--space-8); }
  .section-cta { align-self: flex-start; }

  /* ── S1 hero (change-02 + change-03) ───────────────────────────────── */
  .hero-grid { display: grid; gap: var(--space-12); }
  .hero-copy { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
  .hero-copy .h1 { max-width: 12ch; }
  .hero-banner { align-self: flex-start; }
  .hero-ref { align-self: flex-start; }
  .hero-chips { max-width: 560px; }
  .hero-actions { display: flex; flex-direction: column; gap: var(--space-3); }
  .hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); }
  /* aside #1 points at the primary button (≥600px only) */
  .hero-aside { display: none; }
  @media (max-width: 599.98px) {
    .hero-cta .btn { flex: 1 1 100%; }
  }
  @media (min-width: 600px) {
    .hero-aside {
      display: flex;
      align-items: flex-end;
      gap: var(--space-1);
      align-self: flex-start;
      margin-left: 5.5rem;
    }
    /* the DS arrow points right; turned -90deg it points up at the primary button, its tail ends at the text */
    .aside-arrow { width: 56px; height: 42px; rotate: -90deg; margin: 7px -7px 0 -7px; }
    .aside-text { rotate: -4deg; padding-bottom: var(--space-1); }
  }

  /* the device pair on the pink blob: drawn at one design size (620 × 570) on
     .devices-stage and scaled per breakpoint with a transform. .devices is the
     layout box at the scaled size. Never CSS zoom: iOS 26 WebKit mishandles
     text sizes and line boxes inside a zoomed subtree (overlapping mock text) */
  .hero-art { position: relative; display: flex; justify-content: center; min-width: 0; }
  .devices { --zoom: 0.54; position: relative; flex: none; width: calc(620px * var(--zoom)); height: calc(570px * var(--zoom)); }
  .devices-stage { position: absolute; left: 0; top: 0; width: 620px; height: 570px; transform: scale(var(--zoom)); transform-origin: 0 0; }
  @media (max-width: 369.98px) { .devices { --zoom: 0.46; } }
  @media (min-width: 600px) { .devices { --zoom: 0.85; } }
  @media (min-width: 900px) { .devices { --zoom: 0.72; } }
  @media (min-width: 1040px) { .devices { --zoom: 0.8; } }
  @media (min-width: 1200px) { .devices { --zoom: 0.88; } }
  .hero-blob {
    position: absolute;
    left: 52%; top: 58%;
    width: 560px; height: 560px;
    max-width: none;
    translate: -50% -50%;
    pointer-events: none;
  }
  .device-slot { position: absolute; }
  .device-slot--laptop { right: 0; top: 0; width: 560px; }
  /* the phone is the same 300 × 620 mock as elsewhere, drawn at 0.76 (≈ 230 × 470), anchored bottom-left */
  .device-slot--phone { left: 0; bottom: 0; width: 300px; height: 620px; }
  .device-scale { position: relative; width: 300px; height: 620px; transform: scale(0.76); transform-origin: 0 100%; }

  .laptop { position: relative; width: 100%; color: var(--ink); }
  .laptop-screen {
    position: relative;
    width: 520px;
    height: 330px;
    margin-inline: auto;
    padding: var(--space-3) var(--space-4) var(--space-4);
    overflow: hidden;
    background: var(--surface-raised);
    border: var(--border-ink) solid var(--ink-fixed);
    border-radius: var(--radius-lg);
    box-shadow: var(--sticker);
  }
  .laptop-dots { position: absolute; top: 17px; right: var(--space-4); display: flex; gap: 6px; }
  .laptop-dots i { width: 10px; height: 10px; border-radius: var(--radius-pill); border: var(--border-ink) solid var(--ink-fixed); }
  .laptop-base {
    position: relative;
    height: 18px;
    margin-top: -2px;
    background: var(--surface-raised);
    border: var(--border-ink) solid var(--ink-fixed);
    border-radius: var(--radius-pill);
    box-shadow: var(--sticker);
  }
  /* the web app's week view */
  .scr--week { gap: var(--space-2); }
  .wk {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: auto repeat(9, minmax(0, 1fr));
    gap: 4px 6px;
    min-height: 0;
  }
  .wk-day {
    grid-row: 1;
    padding-bottom: var(--space-1);
    border-bottom: var(--border-hair) solid var(--line);
    font-family: var(--t-label-family);
    font-size: var(--t-label-size);
    line-height: var(--t-label-line);
    font-weight: var(--t-label-weight);
    letter-spacing: var(--t-label-tracking);
    color: var(--ink-muted);
  }
  .wk-b {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-height: 0;
    padding: 4px 6px;
    overflow: hidden;
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-family: var(--t-caption-family);
    font-size: var(--t-caption-size);
    line-height: var(--t-caption-line);
    font-weight: var(--t-caption-weight);
  }
  .wk-b b { font-weight: var(--t-body-strong-weight); font-variant-numeric: tabular-nums; }
  .wk-b--sun { background: var(--sun-tint); }
  .wk-b--pink { background: var(--pink-tint); }
  .wk-b--mint { background: var(--mint-tint); }
  /* a day column is too narrow for the word: a round ✓ badge ("Betaald" stays for screen readers and as a tooltip) */
  .wk-paid { justify-content: center; width: 22px; min-height: 22px; margin-top: 2px; padding: 0; }
  .wk-c1 { grid-column: 1; } .wk-c2 { grid-column: 2; } .wk-c3 { grid-column: 3; }
  .wk-c4 { grid-column: 4; } .wk-c5 { grid-column: 5; } .wk-c6 { grid-column: 6; }
  .wk-r1 { grid-row-start: 2; } .wk-r2 { grid-row-start: 3; } .wk-r4 { grid-row-start: 5; }
  .wk-r5 { grid-row-start: 6; } .wk-r6 { grid-row-start: 7; } .wk-r8 { grid-row-start: 9; }
  .wk-s2 { grid-row-end: span 2; } .wk-s3 { grid-row-end: span 3; }
  .wk-s4 { grid-row-end: span 4; } .wk-s5 { grid-row-end: span 5; }

  .phone--hero { position: relative; z-index: 1; }
  /* on the phone's top-left bezel, clear of the screen's text */
  .hero-ticket {
    position: absolute;
    z-index: 2;
    top: -58px; left: -44px;
    width: 190px;
  }
  @media (min-width: 900px) {
    .hero-grid { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-8); }
  }

  /* ── ticker (top of #winst, just below the wave) ─────────────────────── */
  .section--ticker { padding-top: calc(var(--wave-h) + var(--space-6)); }
  .ticker-wrap { margin-bottom: var(--space-16); }
  .ticker {
    overflow: hidden;
    background: var(--surface-raised);
    color: var(--ink);
    border: var(--border-ink) solid var(--ink);
    border-radius: var(--radius-md);
    box-shadow: var(--sticker-sm);
  }
  .ticker-track { display: flex; width: max-content; animation: ticker 40s linear infinite; }
  /* only paused off-screen (reveal.js); visitors can't stop it (founder's call). Reduced motion shows a still list. */
  .ticker.is-paused .ticker-track { animation-play-state: paused; }
  .ticker-set {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4) var(--space-3) 0;
    white-space: nowrap;
    font-family: var(--t-display-sm-family);
    font-size: var(--t-display-sm-size);
    line-height: var(--t-display-sm-line);
    font-weight: var(--t-display-sm-weight);
    letter-spacing: var(--t-display-sm-tracking);
  }
  .ticker-set:first-child { padding-left: var(--space-4); }
  .ticker-dot { color: var(--brand-text); }

  /* ── S2 #winst: win cards ────────────────────────────────────────────── */
  .win-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-6); }
  .win-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .win-card .card-title { text-wrap: balance; }
  @media (min-width: 600px) {
    .win-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 1040px) {
    .win-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  /* ── S2 #winst: the calculator ───────────────────────────────────────── */
  .calc {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin-top: var(--space-12);
    border-radius: var(--radius-xl);
  }
  @media (min-width: 600px) {
    .calc { padding: var(--space-8); margin-top: var(--space-16); }
  }
  .calc-head { display: flex; align-items: center; gap: var(--space-4); }
  .calc-disc { width: 56px; height: 56px; }
  .calc-disc .icon { width: 26px; height: 26px; }
  .calc-head-text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
  .calc-title {
    font-family: var(--t-display-md-family);
    font-size: var(--t-display-md-size);
    line-height: var(--t-display-md-line);
    font-weight: var(--t-display-md-weight);
    letter-spacing: var(--t-display-md-tracking);
  }
  .calc-intro { color: var(--ink-muted); }
  .calc-body { display: grid; gap: var(--space-8); }
  @media (min-width: 900px) {
    .calc-body { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: start; gap: var(--space-12); }
    .calc-results { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
  }
  .calc-inputs { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
  .calc-group { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
  .calc-legend, .calc-results-title {
    padding: 0;
    margin-bottom: var(--space-1);
    font-family: var(--t-title-family);
    font-size: var(--t-title-size);
    line-height: var(--t-title-line);
    font-weight: var(--t-title-weight);
  }
  .calc-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
  .calc-field-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
  .calc-field-top .field-label { font-size: var(--t-body-strong-size); line-height: var(--t-body-strong-line); letter-spacing: normal; }
  .calc-tag {
    flex: none;
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    color: var(--ink);
    font-family: var(--t-caption-family);
    font-size: var(--t-caption-size);
    line-height: 20px;
    font-weight: var(--t-body-strong-weight);
    white-space: nowrap;
  }
  .calc-tag--mine { background: var(--mint-tint); }
  .calc-tag--assumption { background: var(--sun-tint); }
  .calc-ctl { display: flex; align-items: center; gap: var(--space-4); }
  .calc-number { flex: none; width: 112px; min-height: 48px; padding-inline: var(--space-3); gap: var(--space-1); }
  .calc-number input { min-height: 44px; font-variant-numeric: tabular-nums; }
  .calc-unit {
    flex: none;
    color: var(--ink-muted);
    font-family: var(--t-body-strong-family);
    font-size: var(--t-body-strong-size);
    font-weight: var(--t-body-strong-weight);
  }

  /* the range: a sunken pill track (filled up to the thumb by calculator.js)
     and a purple sticker thumb; the input box keeps a 44px target */
  .calc-range {
    --fill: 0%;
    flex: 1;
    min-width: 0;
    height: 44px;
    margin: 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }
  .calc-range::-webkit-slider-runnable-track {
    height: 10px;
    border: var(--border-ink) solid var(--ink);
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--mint) var(--fill), var(--surface-sunken) var(--fill));
  }
  .calc-range::-moz-range-track {
    height: 6px;
    border: var(--border-ink) solid var(--ink);
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--mint) var(--fill), var(--surface-sunken) var(--fill));
  }
  .calc-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px; height: 26px;
    margin-top: -10px;
    border: var(--border-ink) solid var(--ink);
    border-radius: var(--radius-pill);
    background: var(--brand);
    box-shadow: var(--sticker-sm);
  }
  .calc-range::-moz-range-thumb {
    width: 22px; height: 22px;
    border: var(--border-ink) solid var(--ink);
    border-radius: var(--radius-pill);
    background: var(--brand);
    box-shadow: var(--sticker-sm);
  }
  .calc-range:focus { outline: none; }
  .calc-range:focus-visible::-webkit-slider-thumb { outline: var(--border-focus) solid var(--focus); outline-offset: 2px; }
  .calc-range:focus-visible::-moz-range-thumb { outline: var(--border-focus) solid var(--focus); outline-offset: 2px; }

  /* sources and the assumptions drawer */
  .calc-src { align-self: flex-start; }
  .calc-src-toggle, .calc-more-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    list-style: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
  }
  .calc-src-toggle::-webkit-details-marker, .calc-more-toggle::-webkit-details-marker { display: none; }
  .calc-src-toggle {
    position: relative;
    min-height: 32px;
    color: var(--ink-muted);
    font-family: var(--t-caption-family);
    font-size: var(--t-caption-size);
    line-height: var(--t-caption-line);
    font-weight: var(--t-body-strong-weight);
  }
  .calc-src-toggle::after { content: ""; position: absolute; inset: -6px -8px; } /* 44px target */
  .calc-src-toggle .icon { width: 16px; height: 16px; }
  @media (hover: hover) {
    .calc-src-toggle:hover { color: var(--ink); }
  }
  .calc-src[open] .calc-src-toggle { color: var(--ink); }
  .calc-src-text {
    max-width: 60ch;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    color: var(--ink);
    font-family: var(--t-caption-family);
    font-size: var(--t-caption-size);
    line-height: var(--t-caption-line);
    font-weight: var(--t-caption-weight);
  }
  .calc-more { border-top: var(--border-hair) solid var(--line); padding-top: var(--space-4); }
  .calc-more-toggle {
    min-height: 44px;
    color: var(--brand-text);
    font-family: var(--t-body-strong-family);
    font-size: var(--t-body-strong-size);
    line-height: var(--t-body-strong-line);
    font-weight: var(--t-body-strong-weight);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    gap: var(--space-2);
  }
  .calc-more-toggle .icon { width: 20px; height: 20px; }
  .calc-more-chevron { transition: rotate 160ms var(--ease-out); }
  .calc-more[open] .calc-more-chevron { rotate: 180deg; }
  .calc-more > .calc-group { padding-top: var(--space-4); }
  .calc-submit { align-self: flex-start; }

  /* results: a sunken well, four module rows, then the two totals */
  .calc-results {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--surface-sunken);
  }
  .calc-rows { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
  .calc-row { display: flex; align-items: flex-start; gap: var(--space-3); }
  .calc-row-body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
  .calc-row-name { font-weight: var(--t-body-strong-weight); }
  .calc-num { font-weight: var(--t-body-strong-weight); font-variant-numeric: tabular-nums; }
  .calc-totals { display: grid; gap: var(--space-3); }
  .calc-total {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    border: var(--border-ink) solid var(--ink-fixed);
    border-radius: var(--radius-lg);
    box-shadow: var(--sticker);
    color: var(--ink-fixed);
  }
  .calc-total--mint { background: var(--mint); }
  .calc-total--sun { background: var(--sun); }
  .calc-total-label {
    font-family: var(--t-label-family);
    font-size: var(--t-label-size);
    line-height: var(--t-label-line);
    font-weight: var(--t-label-weight);
    letter-spacing: var(--t-label-tracking);
  }
  .calc-total-value {
    font-family: var(--t-display-md-family);
    font-size: var(--t-display-md-size);
    line-height: var(--t-display-md-line);
    font-weight: var(--t-display-md-weight);
    letter-spacing: var(--t-display-md-tracking);
    font-variant-numeric: tabular-nums;
  }
  .calc-total-value .calc-num { font-weight: inherit; }
  @media (max-width: 599.98px) {
    .calc-total-value {
      font-family: var(--t-display-sm-family);
      font-size: var(--t-display-sm-size);
      line-height: var(--t-display-sm-line);
      font-weight: var(--t-display-sm-weight);
      letter-spacing: var(--t-display-sm-tracking);
    }
  }
  .calc-note {
    font-family: var(--t-caption-family);
    font-size: var(--t-caption-size);
    line-height: var(--t-caption-line);
    font-weight: var(--t-caption-weight);
    color: var(--ink-muted);
  }
  .calc-note strong { color: var(--ink); font-weight: var(--t-body-strong-weight); }

  /* ── S3 #vergelijk: two receipts ─────────────────────────────────────── */
  .receipts { display: grid; gap: var(--space-12); align-items: start; }
  @media (min-width: 900px) {
    .receipts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
  }
  .receipt-col { position: relative; min-width: 0; padding-inline: var(--space-2); }
  /* the printer lip each receipt comes out of */
  .receipt-slot {
    position: relative;
    z-index: 2;
    display: block;
    height: 14px;
    margin-inline: calc(-1 * var(--space-2));
    border-radius: var(--radius-pill);
    background: var(--ink-fixed);
  }
  /* the paper: an ink layer and a white layer, both cut to a zigzag bottom
     edge by the same mask (the white one 3px shorter, so a 2px ink line runs
     along the teeth), under one drop-shadow = the sticker shadow */
  .receipt {
    --zig: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% 100% / 20px 10px repeat-x, linear-gradient(#000, #000) 0 0 / 100% calc(100% - 9px) no-repeat;
    position: relative;
    margin-top: -7px;
    padding: 0 2px 3px;
    filter: drop-shadow(4px 4px 0 var(--shadow-ink));
  }
  .receipt::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ink-fixed);
    -webkit-mask: var(--zig);
    mask: var(--zig);
  }
  .receipt-paper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-5) calc(var(--space-8) + 10px);
    background: var(--surface-raised);
    color: var(--ink);
    -webkit-mask: var(--zig);
    mask: var(--zig);
  }
  @media (min-width: 600px) {
    .receipt-paper { padding-inline: var(--space-8); }
  }
  .receipt-head { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: var(--border-ink) dashed var(--ink); }
  .receipt-head .disc { border-color: var(--ink); }
  .receipt-logo { width: 36px; height: 36px; flex: none; }
  .receipt-title {
    font-family: var(--t-display-sm-family);
    font-size: var(--t-display-sm-size);
    line-height: var(--t-display-sm-line);
    font-weight: var(--t-display-sm-weight);
    letter-spacing: var(--t-display-sm-tracking);
  }
  .receipt-lines { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
  .receipt-line { display: flex; align-items: baseline; gap: var(--space-2); }
  .receipt-line dt { display: flex; align-items: baseline; flex: 1 1 auto; min-width: 0; gap: var(--space-2); }
  /* dotted leaders between the item and its amount */
  .receipt-line dt::after {
    content: "";
    flex: 1 1 var(--space-4);
    min-width: var(--space-4);
    border-bottom: var(--border-ink) dotted var(--line-strong);
    translate: 0 -4px;
  }
  .receipt-line dd {
    flex: 0 1 auto;
    max-width: 58%;
    margin: 0;
    text-align: right;
    font-weight: var(--t-body-strong-weight);
    font-variant-numeric: tabular-nums;
  }
  /* narrow: the amount drops under its item, the leader runs to the edge */
  @media (max-width: 479.98px) {
    .receipt-line { flex-wrap: wrap; row-gap: 0; }
    .receipt-line dt { flex-basis: 100%; }
    .receipt-line dd { max-width: none; margin-left: auto; }
  }
  .receipt-small {
    display: block;
    font-family: var(--t-caption-family);
    font-size: var(--t-caption-size);
    line-height: var(--t-caption-line);
    font-weight: var(--t-caption-weight);
    color: var(--ink-muted);
  }
  .receipt-total {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    padding-top: var(--space-4);
    border-top: var(--border-ink) dashed var(--ink);
  }
  .receipt-total-label {
    font-family: var(--t-title-family);
    font-size: var(--t-title-size);
    line-height: var(--t-title-line);
    font-weight: var(--t-title-weight);
  }
  .receipt-hand {
    padding: var(--space-2) var(--space-3);
    font-family: var(--t-hand-family);
    font-size: var(--t-hand-size);
    line-height: var(--t-hand-line);
    font-weight: var(--t-hand-weight);
    color: var(--ink);
  }
  .receipt-hand .circled { padding-inline: 0.25em; }
  .receipt-hand .circled-line { left: -0.45em; top: -0.3em; width: calc(100% + 0.9em); height: calc(100% + 0.6em); }
  .receipt-after {
    padding-top: var(--space-4);
    border-top: var(--border-ink) dashed var(--ink);
    font-weight: var(--t-body-strong-weight);
  }
  /* the "Eerlijk" stamp lands on the bottom corner, below the words; the shine at the top */
  .receipt-stamp { position: absolute; z-index: 3; right: -12px; bottom: -44px; width: 150px; --tilt: 6deg; }
  .receipt-shine { position: absolute; z-index: 3; right: -4px; top: -30px; width: 48px; height: 48px; --tilt: 10deg; }
  .receipt-col--us { margin-bottom: var(--space-8); }
  .receipts-note { max-width: 80ch; margin-top: var(--space-8); color: var(--ink-fixed); }
  @media (min-width: 900px) {
    .receipt-col--us { margin-bottom: 0; }
    .receipt-stamp { right: -8px; }
    .receipt-shine { right: -18px; }
  }

  /* ── S3 #vergelijk: "Herken je dit?" ─────────────────────────────────── */
  .pains { margin-top: var(--space-16); }
  .pains-title {
    margin-bottom: var(--space-8);
    font-family: var(--t-display-md-family);
    font-size: var(--t-display-md-size);
    line-height: var(--t-display-md-line);
    font-weight: var(--t-display-md-weight);
    letter-spacing: var(--t-display-md-tracking);
  }
  .pain-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-8) var(--space-6); }
  @media (min-width: 600px) {
    .pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 1040px) {
    .pain-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  .pain { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
  /* the pain: the DS speech sticker (sun, ink edge, sticker-sm, tail) in Figtree */
  .pain-quote {
    --tilt: 2deg;
    position: relative;
    align-self: flex-start;
    padding: var(--space-3) var(--space-4);
    background: var(--sun);
    color: var(--ink-fixed);
    border: var(--border-ink) solid var(--ink-fixed);
    border-radius: var(--radius-lg);
    box-shadow: var(--sticker-sm);
    font-family: var(--t-body-strong-family);
    font-size: var(--t-body-strong-size);
    line-height: var(--t-body-strong-line);
    font-weight: var(--t-body-strong-weight);
    rotate: var(--tilt);
  }
  .pain:nth-child(3n + 2) .pain-quote { --tilt: 3deg; }
  .pain:nth-child(3n + 3) .pain-quote { --tilt: 4deg; }
  .pain-quote::after {
    content: "";
    position: absolute;
    left: 22px; bottom: -8px;
    width: 14px; height: 14px;
    background: inherit;
    border-right: var(--border-ink) solid var(--ink-fixed);
    border-bottom: var(--border-ink) solid var(--ink-fixed);
    box-shadow: 2px 2px 0 0 var(--shadow-ink);
    transform: rotate(45deg);
  }
  .pain-answer {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--surface-raised);
    color: var(--ink);
    border: var(--border-ink) solid var(--ink-fixed);
    border-radius: var(--radius-lg);
    box-shadow: var(--sticker);
  }
  .pain-answer > span:last-child { padding-top: 6px; }

  /* ── module rail (≥900px): sticky under the header across #apps + #betalen ── */
  .rail { display: none; }
  @media (min-width: 900px) {
    .rail {
      display: block;
      position: sticky;
      top: var(--header-h);
      z-index: 40;
      height: var(--rail-h);
      margin-bottom: calc(-1 * var(--rail-h)); /* takes no room in the flow */
      background: var(--surface);
      border-bottom: var(--border-hair) solid var(--line);
      transition: opacity 200ms var(--ease-out), translate 200ms var(--ease-out), visibility 0s;
    }
    /* with JS it shows once the index has scrolled away (and tucks away while a
       short viewport needs the room for the M1 pin) */
    html.rail-live .rail:not(.is-shown),
    html.rail-live .rail.is-tucked {
      opacity: 0;
      translate: 0 -8px;
      visibility: hidden;
      transition: opacity 200ms var(--ease-out), translate 200ms var(--ease-out), visibility 0s linear 200ms;
    }
    .chapter, #betalen { scroll-margin-top: var(--rail-h); }
  }
  .rail-inner { display: flex; align-items: center; height: 100%; }
  .rail-list { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: var(--space-3); width: 100%; }
  .rail-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 2px var(--space-4) 2px var(--space-3);
    border: var(--border-ink) solid var(--ink);
    border-radius: var(--radius-pill);
    background: var(--surface-raised);
    color: var(--ink);
    box-shadow: var(--sticker-sm);
    font-family: var(--t-body-strong-family);
    font-size: var(--t-body-strong-size);
    line-height: var(--t-body-strong-line);
    font-weight: var(--t-body-strong-weight);
    text-decoration: none;
    white-space: nowrap;
    transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out), background-color 120ms var(--ease-out), color 120ms var(--ease-out);
  }
  /* In the rail the drawing sits bare in the pill: a tile would touch the pill's border. */
  .rail-pill .drawn { align-self: center; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
  @media (hover: hover) {
    .rail-pill:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 0 var(--shadow-ink); }
  }
  .rail-pill:active { transform: translate(2px, 2px); box-shadow: none; transition-duration: 80ms; }
  .rail-pill.is-active { background: var(--brand); color: var(--on-brand); }

  /* ── #apps part A: the intro, an index of the five apps ─────────────── */
  .index-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-6); }
  .index-grid > li { display: flex; min-width: 0; }
  .index-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    width: 100%;
    color: var(--ink);
    text-decoration: none;
    transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
  }
  @media (hover: hover) {
    .index-card:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 0 var(--shadow-ink); }
  }
  .index-card:active { transform: translate(2px, 2px); box-shadow: var(--sticker-sm); transition-duration: 80ms; }
  .index-num { position: absolute; top: -14px; right: -10px; }
  .index-name {
    font-family: var(--t-display-sm-family);
    font-size: var(--t-display-sm-size);
    line-height: var(--t-display-sm-line);
    font-weight: var(--t-display-sm-weight);
    letter-spacing: var(--t-display-sm-tracking);
  }
  .index-line { color: var(--ink-muted); }
  .index-zoom {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: auto;
    padding-top: var(--space-1);
    color: var(--brand-text);
    font-family: var(--t-body-strong-family);
    font-size: var(--t-body-strong-size);
    line-height: var(--t-body-strong-line);
    font-weight: var(--t-body-strong-weight);
  }
  .index-zoom .icon { width: 18px; height: 18px; }
  /* narrow: the drawing beside the words, so the five cards stay short */
  @media (max-width: 599.98px) {
    .index-grid { gap: var(--space-4); }
    .index-card {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-content: start;
      gap: var(--space-1) var(--space-4);
    }
    .index-card .drawn { grid-row: 1 / span 3; }
    .index-zoom { margin-top: 0; }
  }
  @media (min-width: 600px) {
    .index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 900px) {
    .index-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); }
    .index-card { padding: var(--space-4); }
  }

  /* ── #apps part B: chapters 1–4 (5 is S3) ───────────────────────────── */
  .chapters { display: flex; flex-direction: column; gap: var(--space-16); margin-top: var(--space-16); }
  /* narrow: the poster, then the words; the mini screen hangs 40px below the poster */
  .chapter { display: grid; gap: calc(var(--space-12) + var(--space-4)); }
  .chapter-poster { min-width: 0; }
  .chapter-text { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
  .chapter-head { display: flex; flex-direction: column; gap: var(--space-4); }
  .chapter-kicker {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: var(--space-3);
    font-family: var(--t-body-strong-family);
    font-size: var(--t-body-strong-size);
    line-height: var(--t-body-strong-line);
    font-weight: var(--t-body-strong-weight);
  }
  .chapter-title {
    font-family: var(--t-display-md-family);
    font-size: var(--t-display-md-size);
    line-height: var(--t-display-md-line);
    font-weight: var(--t-display-md-weight);
    letter-spacing: var(--t-display-md-tracking);
    text-wrap: balance;
  }

  /* the poster: a big block-colour sticker card, never tilted */
  .poster {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-4) 0;
    background: var(--sun);
    color: var(--ink-fixed);
    border: var(--border-ink) solid var(--ink-fixed);
    border-radius: var(--radius-xl);
    box-shadow: var(--sticker);
  }
  .poster--sun { background: var(--sun); }
  .poster--pink { background: var(--pink); }
  .poster--tangerine { background: var(--tangerine); }
  .poster-num { position: absolute; z-index: 3; top: -14px; left: -10px; }
  .poster-art { display: flex; padding-left: var(--space-6); }
  .poster-drift { position: relative; display: block; width: 160px; }
  .poster-drawing { width: 100%; height: auto; }
  .poster-shine { display: none; position: absolute; top: -12px; right: -36px; width: 44px; height: 44px; --tilt: 8deg; }
  .poster-screen { position: relative; z-index: 2; display: flex; justify-content: center; margin-bottom: -40px; }
  /* the word sticker sits on a corner of the card, never over the screen's text */
  .poster-word { position: absolute; z-index: 3; top: -20px; right: -12px; width: 150px; }
  .poster-word.word--notif { width: 184px; --tilt: -5deg; }
  .poster-word.word--notif span { font-size: 20px; }
  .poster-word.word--stamp { width: 140px; }

  @media (min-width: 600px) {
    .poster { display: block; max-width: 560px; min-height: 520px; padding: 0; }
    .poster-art {
      position: absolute;
      top: 0; bottom: 0; left: var(--space-8);
      width: min(240px, calc(100% - 300px));
      padding: 0;
      align-items: center;
    }
    .poster-drift { width: 100%; }
    .poster-shine { display: block; }
    .poster-screen {
      position: absolute;
      top: 0; bottom: 0; right: calc(-1 * var(--space-6)); /* overlaps the card's edge */
      margin: 0;
      align-items: center;
    }
    .poster-word { top: auto; right: auto; bottom: -24px; left: -16px; width: 180px; }
    .poster-word.word--notif { width: 210px; }
    .poster-word.word--stamp { width: 160px; }
  }
  @media (min-width: 900px) {
    .chapters { gap: var(--space-24); margin-top: var(--space-24); }
    .chapter { grid-template-columns: minmax(0, 560px) minmax(340px, 1fr); align-items: center; gap: var(--space-16); }
    .chapter--flip { grid-template-columns: minmax(340px, 1fr) minmax(0, 560px); }
    .chapter--flip .chapter-poster { order: 2; }
    /* even chapters mirror the poster: the screen overlaps the edge facing the words */
    .chapter--flip .poster-art { left: auto; right: var(--space-8); }
    .chapter--flip .poster-screen { right: auto; left: calc(-1 * var(--space-6)); }
    .chapter--flip .poster-word { left: auto; right: -16px; }
    .chapter--flip .poster-shine { right: auto; left: -36px; --tilt: -8deg; }
    .poster-num { display: none; } /* the rail carries the numbers here */
  }

  /* ── S3 tap to pay (M1) ─────────────────────────────────────────────── */
  .pay-stage { display: grid; gap: var(--space-12); }
  .pay-copy { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
  .pay-copy .section-head { margin-bottom: 0; }
  .disc-rows { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
  .disc-rows li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--t-body-strong-family);
    font-size: var(--t-body-strong-size);
    line-height: var(--t-body-strong-line);
    font-weight: var(--t-body-strong-weight);
  }
  .money-path { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-6); }
  .money-step {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-2);
    padding: var(--space-3) var(--space-4);
    font-size: var(--t-body-size);
    line-height: var(--t-body-line);
  }
  .money-arrow {
    position: absolute;
    left: 50%;
    top: calc(-1 * var(--space-6));
    display: grid;
    place-items: center;
    width: 24px; height: 24px;
    translate: -50% 0;
    rotate: 90deg;
    color: var(--ink-fixed);
  }
  .money-arrow .icon { width: 20px; height: 20px; stroke-width: 2.5; }
  .money-caption { color: var(--ink-fixed); }
  .disc-row-line { font-weight: var(--t-body-weight); }
  .pay-foot { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-8); max-width: 560px; }
  @media (min-width: 600px) {
    .money-path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .money-step { align-content: center; }
    .money-arrow { left: calc(-1 * var(--space-6)); top: 50%; translate: 0 -50%; rotate: 0deg; }
  }

  .pay-art { position: relative; display: flex; justify-content: center; min-width: 0; padding-block: var(--space-6); }
  .pay-device { position: relative; width: 300px; max-width: 100%; }
  .pay-trail { display: none; }
  /* Final frame: the card rests over the phone's top-left corner (the paid
     screen is empty there), the stamp over the right bezel; neither covers
     screen text. */
  .bank-card {
    position: absolute;
    z-index: 4;
    left: -16px; top: 0;
    width: 200px; height: 126px;
    background: var(--sun);
    border: var(--border-ink) solid var(--ink-fixed);
    border-radius: var(--radius-lg);
    box-shadow: var(--sticker);
  }
  .bank-card-chip {
    position: absolute;
    left: var(--space-4); top: calc(var(--space-8) + var(--space-2));
    width: 34px; height: 26px;
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    border: var(--border-ink) solid var(--ink-fixed);
  }
  /* the logo is plain CSS: a little orbit, never a card brand */
  .bank-card-logo {
    position: absolute;
    right: var(--space-4); top: var(--space-4);
    width: 30px; height: 30px;
    border-radius: var(--radius-pill);
    border: 3px solid var(--ink-fixed);
  }
  .bank-card-logo::after {
    content: "";
    position: absolute;
    right: -6px; top: -6px;
    width: 10px; height: 10px;
    border-radius: var(--radius-pill);
    background: var(--brand);
    border: var(--border-ink) solid var(--ink-fixed);
  }
  .bank-card-line {
    position: absolute;
    left: var(--space-4); right: calc(var(--space-16) + var(--space-4));
    bottom: var(--space-4);
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--ink-fixed);
  }
  /* three 2px ink rings around the tap point (the card's centre) */
  .pay-ring {
    position: absolute;
    z-index: 3;
    left: 4px; top: -17px;
    width: 160px; height: 160px;
    border-radius: var(--radius-pill);
    border: var(--border-ink) solid var(--ink-fixed);
    opacity: 0;
    pointer-events: none;
  }
  .pay-stamp { position: absolute; z-index: 4; right: -16px; bottom: 96px; width: 150px; --tilt: 6deg; }
  @media (max-width: 369.98px) { .pay-stamp { right: -8px; } }
  .phone--pay .screen--paid { z-index: 1; }
  @media (min-width: 900px) {
    .pay-stage { grid-template-columns: minmax(0, 1fr) 600px; align-items: center; gap: var(--space-8); }
    .pay-art { justify-content: flex-end; padding-block: calc(var(--space-24) + var(--space-2)) var(--space-4); }
    .pay-device { margin-right: var(--space-12); }
    .bank-card { left: -60px; }
    .pay-ring { left: -40px; }
    .pay-stamp { right: -48px; }
    /* the trail runs from where the card starts to the phone's left edge */
    .pay-trail {
      display: block;
      position: absolute;
      z-index: 2;
      left: -160px; top: -40px;
      width: 150px; height: 110px;
      color: var(--ink-fixed);
    }
    .pay-trail svg { width: 100%; height: 100%; overflow: visible; }
    .pay-trail-mask {
      position: absolute;
      inset: -8px;
      background: var(--mint);
      transform-origin: 100% 50%;
      opacity: 0; /* motion.js shows it and scales it away */
    }
  }

  /* ── S6 FAQ (#vragen) ───────────────────────────────────────────────── */
  .faq-grid { display: grid; gap: var(--space-8); }
  .faq-side { display: contents; }
  .faq-help { order: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .faq-help-title {
    font-family: var(--t-title-family);
    font-size: var(--t-title-size);
    line-height: var(--t-title-line);
    font-weight: var(--t-title-weight);
  }
  .faq-help a:not(.btn) { color: inherit; font-weight: var(--t-body-strong-weight); overflow-wrap: anywhere; }
  .faq-grid .section-head { margin-bottom: 0; }
  .faq-coffee { width: 120px; height: 120px; --tilt: 0deg; }
  .faq { display: flex; flex-direction: column; gap: var(--space-3); }
  .faq-item {
    background: var(--surface);
    border: var(--border-ink) solid transparent;
    border-bottom: var(--border-hair) solid var(--line);
    border-radius: var(--radius-lg);
    transition: box-shadow 200ms var(--ease-out), background-color 200ms var(--ease-out);
  }
  .faq-item[open] {
    background: var(--surface-raised);
    border: var(--border-ink) solid var(--ink);
    box-shadow: var(--sticker);
  }
  .faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 56px;
    padding: var(--space-4) var(--space-5);
    list-style: none;
    cursor: pointer;
    font-family: var(--t-title-family);
    font-size: var(--t-title-size);
    line-height: var(--t-title-line);
    font-weight: var(--t-title-weight);
    border-radius: var(--radius-lg);
  }
  .faq-q::-webkit-details-marker { display: none; }
  .faq-chevron { transition: rotate 160ms var(--ease-out); }
  .faq-item[open] .faq-chevron { rotate: 180deg; }
  .faq-a {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0 var(--space-5) var(--space-5);
    font-size: var(--t-body-lg-size);
    line-height: var(--t-body-lg-line);
    max-width: 68ch;
  }
  .faq-a .caption { font-size: var(--t-body-size); line-height: var(--t-body-line); }
  @supports (interpolate-size: allow-keywords) {
    .faq-item { interpolate-size: allow-keywords; }
    .faq-item::details-content {
      block-size: 0;
      overflow: clip;
      transition: block-size 200ms var(--ease-out), content-visibility 200ms allow-discrete;
    }
    .faq-item[open]::details-content { block-size: auto; }
  }
  @media (min-width: 900px) {
    .faq-grid { grid-template-columns: 320px minmax(0, 1fr); align-items: start; }
    .faq-side {
      display: flex;
      flex-direction: column;
      gap: var(--space-8);
      position: sticky;
      top: calc(var(--header-h) + var(--space-8));
    }
    .faq-help { order: 0; }
  }

  /* ── S6b #roadmap (change-04): four planet stops on one track ─────────── */
  /* Under 900px the track runs down the left edge; from 900px it runs across.
     The link after each planet reaches the next one: solid ink once travelled
     (Klaar → Nu), dotted ahead. The rocket rests just before "Nu". */
  .road {
    --planet: 72px;
    --road-gap: var(--space-8);
    --road-drop: calc(var(--road-gap) + var(--space-12)); /* stop bottom → top of the next planet ("Nu" leaves room for its bubble) */
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--road-gap);
  }
  .road-stop {
    position: relative;
    display: grid;
    grid-template-columns: var(--planet) minmax(0, 1fr);
    column-gap: var(--space-4);
    align-items: start;
  }
  .road-marker {
    position: relative;
    align-self: stretch;
    display: flex;
    justify-content: center;
  }
  .road-planet { position: relative; z-index: 1; width: var(--planet); height: var(--planet); }
  .road-link {
    position: absolute;
    left: calc(50% - 1.5px);
    top: calc(var(--planet) + var(--space-1));
    bottom: calc(-1 * var(--road-gap) + var(--space-1));
    border-left: 3px dotted var(--edge);
    transform-origin: 50% 0;
  }
  /* the travelled link stops at the rocket's tail: the drawing is see-through, so a line under it would show through */
  .road-link--done { left: calc(50% - 2px); bottom: calc(-1 * var(--road-drop) + var(--space-2) + 48px); border-left: 4px solid var(--edge); }
  .road-rocket {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: calc(-1 * var(--road-drop) + var(--space-2));
    width: 52px; height: 52px;
    translate: -50% 0;
    rotate: 135deg; /* the drawing points up-right: turn it to fly down the track */
  }
  .road-orbit {
    position: absolute;
    left: 50%; top: calc(var(--planet) / 2);
    width: calc(var(--planet) * 1.9);
    height: auto;
    translate: -50% -50%;
    rotate: -14deg;
    pointer-events: none;
  }
  .road-stop--now { padding-top: var(--space-12); }
  /* on a phone the bubble sits over the card column, clear of the track */
  .road-here { position: absolute; z-index: 2; left: calc(var(--planet) + var(--space-4)); top: calc(-1 * var(--space-12) + var(--space-1)); --tilt: -4deg; }
  .road-card { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
  .road-card--now { rotate: -1deg; }
  .road-status {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 var(--space-3);
    border: var(--border-ink) solid var(--ink-fixed);
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    color: var(--ink);
    font-family: var(--t-label-family);
    font-size: var(--t-label-size);
    line-height: var(--t-label-line);
    font-weight: var(--t-label-weight);
    letter-spacing: var(--t-label-tracking);
    text-transform: uppercase;
  }
  .road-status--done { background: var(--mint); color: var(--ink-fixed); }
  .road-status--now { background: var(--tangerine); color: var(--ink-fixed); box-shadow: var(--sticker-sm); }
  .road-title {
    font-family: var(--t-title-family);
    font-size: var(--t-title-size);
    line-height: var(--t-title-line);
    font-weight: var(--t-title-weight);
  }
  .road-chips .chip { min-height: 28px; }
  .road-text { color: var(--muted); }
  .road-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
  .road-item { display: flex; align-items: flex-start; gap: var(--space-3); }
  .road-item p { min-width: 0; padding-top: 2px; }
  .road-item strong { font-weight: var(--t-body-strong-weight); }
  .road-note {
    margin-top: var(--space-8);
    font-family: var(--t-hand-family);
    font-size: var(--t-hand-size);
    line-height: var(--t-hand-line);
    font-weight: var(--t-hand-weight);
  }
  @media (min-width: 900px) {
    .road {
      --planet: 88px;
      --road-pad: var(--space-3);
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0;
      padding-top: var(--space-12); /* room for "Je bent hier" */
    }
    .road-stop { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; row-gap: var(--space-6); padding-inline: var(--road-pad); }
    .road-card { align-self: stretch; } /* the four cards end on one line */
    .road-stop--now { padding-top: 0; }
    .road-marker { height: var(--planet); }
    /* across: from this planet's edge to the next planet's edge (one column on) */
    .road-link,
    .road-link--done {
      left: calc(50% + var(--planet) / 2 + var(--space-2));
      top: calc(50% - 1.5px);
      bottom: auto;
      width: calc(100% + 2 * var(--road-pad) - var(--planet) - 2 * var(--space-2));
      border-left: 0;
      border-top: 3px dotted var(--edge);
      transform-origin: 0 50%;
    }
    .road-link--done {
      top: calc(50% - 2px);
      width: calc(100% + 2 * var(--road-pad) - var(--planet) - 2 * var(--space-2) - 52px); /* ends 4px into the rocket's tail */
      border-top: 4px solid var(--edge);
    }
    .road-rocket {
      left: calc(150% + 2 * var(--road-pad) - var(--planet) / 2 - var(--space-2) - 56px);
      top: 50%;
      bottom: auto;
      width: 52px; height: 52px;
      translate: 0 -50%;
      rotate: 45deg;
    }
    .road-here { left: calc(50% + var(--space-4)); top: calc(-1 * var(--space-12)); }
  }

  /* ── S7 #aanmelden (M3): the swappable signup block ──────────────────── */
  .signup-grid { display: grid; gap: var(--space-8); grid-template-areas: "head" "steps" "form" "art"; }
  .signup-head { grid-area: head; display: flex; flex-direction: column; gap: var(--space-4); max-width: 640px; }
  .signup-steps { grid-area: steps; display: flex; flex-direction: column; gap: var(--space-5); }
  .signup-form { grid-area: form; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
  .signup-form .form-slot { max-width: none; }
  .signup-art { grid-area: art; position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
  .signup-steps-title, .signup-step-title {
    font-family: var(--t-title-family);
    font-size: var(--t-title-size);
    line-height: var(--t-title-line);
    font-weight: var(--t-title-weight);
  }
  .signup-steps-title {
    font-family: var(--t-display-sm-family);
    font-size: var(--t-display-sm-size);
    line-height: var(--t-display-sm-line);
    font-weight: var(--t-display-sm-weight);
    letter-spacing: var(--t-display-sm-tracking);
  }
  .signup-step-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-5); }
  .signup-step { position: relative; display: flex; align-items: flex-start; gap: var(--space-4); }
  /* a dotted rule joins the three tiles (a plain line, not a doodle) */
  .signup-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 25px; top: 56px; bottom: calc(-1 * var(--space-5) + 4px);
    border-left: 3px dotted var(--ink);
  }
  .signup-step-body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; padding-top: var(--space-1); }
  .signup-step-body p { color: var(--ink-muted); }
  .signup-step-body .signup-when { color: var(--ink); font-weight: var(--t-body-strong-weight); }
  .count-line { font-size: var(--t-body-size); }
  .signup-bubble { align-self: center; }
  /* the tail points down at the rocket below it */
  .signup-bubble::after { left: calc(50% - 7px); }
  .signup-say-after { display: none; }
  .signup.is-joined .signup-say-before { display: none; }
  .signup.is-joined .signup-say-after { display: inline; }
  .signup-rocket img { width: 180px; height: 180px; }
  .signup-confetti { position: absolute; inset: 0; pointer-events: none; }
  .signup-confetti img { position: absolute; width: 120px; height: auto; opacity: 0; }
  .signup-confetti img:nth-child(1) { left: 0; top: 20%; }
  .signup-confetti img:nth-child(2) { right: 0; top: 0; }
  .signup-confetti img:nth-child(3) { left: 30%; bottom: 0; }
  @media (min-width: 900px) {
    .signup-grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
      grid-template-areas: "head art" "steps form";
      column-gap: var(--space-12);
      row-gap: var(--space-8);
      align-items: start;
    }
    .signup-head { align-self: end; }
    .signup-art { flex-direction: row; align-items: flex-end; justify-content: center; }
    .signup-bubble { align-self: flex-start; }
    /* beside the rocket: the tail comes out of the bubble's right side and points at it.
       Borders on the square's top and right, turned 45deg, make a point to the right; the
       clip keeps only that outer half (with its sticker shadow). */
    .signup-bubble::after {
      left: auto;
      right: -7px; /* 2px into the bubble, so the tail covers its border */
      top: calc(50% - 9px);
      width: 18px; height: 18px;
      bottom: auto;
      border-bottom: 0;
      border-top: var(--border-ink) solid var(--ink-fixed);
      clip-path: polygon(-50% -50%, 150% -50%, 150% 150%);
    }
  }
}

/* ══ utilities: motion ════════════════════════════════════════════════════ */
@layer utilities {
  /* Lenis (motion.js smoothScroll, desktop motion-full only): it owns the
     easing, so the browser's own smooth scroll must stay off while it runs. */
  html.lenis, html.lenis body { height: auto; }
  html.lenis.lenis-smooth { scroll-behavior: auto !important; }
  html.lenis.lenis-stopped { overflow: clip; }
  .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes ticker { to { transform: translateX(-50%); } }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
  @keyframes reveal-up { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
  @keyframes rise { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
  @keyframes doodle-in { from { opacity: 0; scale: 0.9; } to { opacity: 1; scale: 1; } }
  @keyframes pop-in { from { scale: 0.9; } to { scale: 1; } }
  @keyframes wiggle {
    0%, 100% { rotate: var(--tilt, 0deg); }
    25% { rotate: calc(var(--tilt, 0deg) + 3deg); }
    75% { rotate: calc(var(--tilt, 0deg) - 3deg); }
  }
  @keyframes toast-in { from { opacity: 0; translate: -50% 12px; } to { opacity: 1; translate: -50% 0; } }
  @keyframes popper { 0% { scale: 0.8; } 60% { scale: 1.06; } 100% { scale: 1; } }
  @keyframes stamp-in { from { scale: 1.2; } to { scale: 1; } }
  /* up and out of the screen, a beat in space, then back down to land on its cloud */
  @keyframes liftoff {
    0% { translate: 0 0; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
    40% { translate: 0 -110svh; }
    55% { translate: 0 -110svh; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
    100% { translate: 0 0; }
  }
  @keyframes confetti { 0% { opacity: 0; scale: 0.6; } 25% { opacity: 1; scale: 1; } 75% { opacity: 1; } 100% { opacity: 0; scale: 1; } }
  @keyframes road-orbit { from { rotate: -14deg; } to { rotate: 10deg; } }
  @keyframes m1-card { from { opacity: 0; translate: 0 -48px; } to { opacity: 1; translate: 0 0; } }
  @keyframes m1-ring { 0% { opacity: 1; scale: 0.6; } 100% { opacity: 0; scale: 1.8; } }
  @keyframes m1-out { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
  @keyframes m1-in { from { opacity: 0; visibility: visible; } to { opacity: 1; visibility: visible; } }

  .is-leaving { opacity: 0; transition: opacity 240ms var(--ease-out); }
  .is-entering { animation: fade-in 240ms var(--ease-out) both; }

  /* ── no preference: the full micro-interaction layer ────────────────── */
  @media (prefers-reduced-motion: no-preference) {
    /* hero on load (change-02): the laptop, then the phone 80ms later, rise in
       (fade under 900px); the ticket settles, then wiggles once. The H1, sub
       and CTA row are never animated. */
    .hero .laptop, .hero .phone--hero { animation: fade-in 240ms var(--ease-out) both; }
    .hero .phone--hero { animation-delay: 80ms; }
    .hero-ticket { animation: doodle-in 240ms var(--ease-out) 320ms both, wiggle 400ms ease-in-out 560ms; }
    .hero-aside { animation: fade-in 240ms var(--ease-out) 360ms both; }
    @media (min-width: 900px) {
      .hero .laptop, .hero .phone--hero { animation-name: rise; }
    }

    /* reveals without GSAP: IntersectionObserver, or the view() timeline */
    @supports not (animation-timeline: view()) {
      html.js.motion-lite [data-reveal] { transition: opacity 240ms var(--ease-out), translate 240ms var(--ease-out); }
      html.js.motion-lite [data-reveal]:not(.is-in) { opacity: 0; translate: 0 16px; }
    }
    @supports (animation-timeline: view()) {
      html.js.motion-lite [data-reveal] {
        animation: reveal-up linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 160px;
      }
    }

    /* doodles: scale/fade in at their resting tilt, then wiggle once */
    html.js.motion-lite [data-doodle]:not(.is-in) { opacity: 0; scale: 0.9; }
    html.js.motion-lite [data-doodle].is-in { animation: doodle-in 240ms var(--ease-out) both, wiggle 400ms ease-in-out 240ms; }

    /* M1 on mobile / without GSAP: a 1.8s one-shot when the stage is half in view */
    html.js.motion-lite .pay-stage:not(.is-playing) .bank-card { opacity: 0; translate: 0 -48px; }
    html.js.motion-lite .pay-stage:not(.is-playing) .pay-stamp { opacity: 0; }
    html.js.motion-lite .pay-stage:not(.is-playing) .phone--pay .screen--paid { opacity: 0; visibility: hidden; }
    html.js.motion-lite .pay-stage:not(.is-playing) .phone--pay .screen--cart { opacity: 1; visibility: visible; }
    html.js.motion-lite .pay-stage.is-playing .bank-card { animation: m1-card 600ms var(--ease-out) both; }
    html.js.motion-lite .pay-stage.is-playing .pay-ring { animation: m1-ring 600ms var(--ease-out) 600ms both; }
    html.js.motion-lite .pay-stage.is-playing .pay-ring:nth-of-type(2) { animation-delay: 750ms; }
    html.js.motion-lite .pay-stage.is-playing .pay-ring:nth-of-type(3) { animation-delay: 900ms; }
    html.js.motion-lite .pay-stage.is-playing .phone--pay .screen--cart { animation: m1-out 240ms var(--ease-out) 1100ms both; }
    html.js.motion-lite .pay-stage.is-playing .phone--pay .screen--paid { animation: m1-in 240ms var(--ease-out) 1100ms both; }
    html.js.motion-lite .pay-stage.is-playing .pay-stamp { animation: doodle-in 240ms var(--ease-out) 1300ms both, wiggle 400ms ease-in-out 1540ms; }

    /* S3 receipts without GSAP: IntersectionObserver fades each line in (reveal.js) */
    html.js.motion-lite [data-receipts] [data-line] { transition: opacity 240ms var(--ease-out); }
    html.js.motion-lite [data-receipts] [data-line]:not(.is-in) { opacity: 0; }

    /* M3 liftoff without GSAP (all widths): rocket off and back to land, confetti once */
    html:not(.gsap-ready) .signup.is-liftoff .signup-rocket { animation: liftoff 1.8s both; }
    html:not(.gsap-ready) .signup.is-liftoff .signup-confetti img { animation: confetti 1.2s var(--ease-out) both; }
    html:not(.gsap-ready) .signup.is-liftoff .signup-confetti img:nth-child(2) { animation-delay: 80ms; }
    html:not(.gsap-ready) .signup.is-liftoff .signup-confetti img:nth-child(3) { animation-delay: 160ms; }
    @media (min-width: 900px) {
      html:not(.gsap-ready) .signup.is-liftoff .signup-rocket { animation-duration: 2.4s; }
    }
    /* #roadmap: the orbit ring round "Nu" rocks slowly */
    .road-orbit { animation: road-orbit 6s ease-in-out infinite alternate; }
    .success.is-entering [data-popper] { animation: popper 240ms var(--ease-out) 240ms both; }
    .success-place-number.is-stamped { animation: stamp-in 240ms var(--ease-back) both; }
  }

  /* ── reduced motion: opacity only, everywhere ───────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; }
    .btn, .btn:hover, .btn:active,
    .lang-pill, .lang-pill:hover, .lang-pill:active { transform: none; transition: opacity 120ms, background-color 120ms; }
    .btn:hover { box-shadow: var(--btn-shadow); }
    .btn:active { box-shadow: var(--btn-shadow); opacity: 0.85; }
    .spin { animation: none; }
    .ticker-track { animation: none; width: auto; }
    .ticker-set { flex-wrap: wrap; white-space: normal; row-gap: var(--space-1); padding-inline: var(--space-4); }
    .ticker-set[aria-hidden="true"] { display: none; }
    html.js .stickybar,
    html.js .stickybar.is-shown { translate: none; opacity: 0; transition: opacity 200ms, visibility 0s linear 200ms; }
    html.js .stickybar.is-shown { opacity: 1; transition: opacity 200ms, visibility 0s; }
    .faq-chevron, .qualify-chevron { transition: none; }
    .faq-item::details-content { transition: none; }
    .screen, .screen.is-current { transition: opacity 240ms, visibility 0s; translate: none !important; }
    .toast { animation: fade-in 200ms both; }
    .hero .laptop, .hero .phone--hero, .hero-ticket, .hero-aside { animation: fade-in 240ms both; }
    .site-nav-link, .site-nav-link::after { transition: none; }
    .calc-more-chevron { transition: none; }
    /* S3 receipts: every line shown, faded in only */
    html.js.motion-lite [data-receipts] [data-line] { transition: opacity 240ms; }
    html.js.motion-lite [data-receipts] [data-line]:not(.is-in) { opacity: 0; }
    .rail, html.rail-live .rail:not(.is-shown), html.rail-live .rail.is-tucked { translate: none; }
    .rail-pill, .rail-pill:hover, .rail-pill:active, .index-card, .index-card:hover, .index-card:active { transform: none; }
    .drawn, .drawn img { transition: opacity 160ms, background-color 160ms; }
    @supports not (animation-timeline: view()) {
      html.js.motion-lite [data-reveal] { transition: opacity 240ms; }
      html.js.motion-lite [data-reveal]:not(.is-in) { opacity: 0; }
    }
    @supports (animation-timeline: view()) {
      html.js.motion-lite [data-reveal] { animation: fade-in linear both; animation-timeline: view(); animation-range: entry 0% entry 160px; }
    }
    html.js.motion-lite [data-doodle]:not(.is-in) { opacity: 0; }
    html.js.motion-lite [data-doodle].is-in { animation: fade-in 240ms both; }
    /* M1: the final frame, faded in */
    html.js.motion-lite .pay-stage:not(.is-playing) .pay-art { opacity: 0; }
    html.js.motion-lite .pay-stage.is-playing .pay-art { animation: fade-in 240ms both; }
  }
}