@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/archivo-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/archivo-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/archivo-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/archivo-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* ══════════════════════════════════════════════════════════════════════════
   Sixty — design tokens
   Single source of colour, type, space and motion. Nothing may declare a
   raw colour or size outside this file.

   AUDIENCE CONSTRAINT: older adults are a primary segment. Every text pair
   here is verified AAA (>= 7:1) by tests/a11y/contrast.test.js, which reads
   THIS FILE and fails the build on regression. The type floor is 15px.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── LIGHT — the bare :root fallback ───────────────────────────────────────
   NOT the shipped default any more: the app opens dark (docs/12 § Direction,
   "Electric lime on ink"), and Light is one tap away in Profile.

   Light remains the complete bare-:root palette for two reasons, both hard:
   the contrast test's "lime rule" measures --lime against the bare --paper
   and requires it to be ILLEGIBLE, which is only true on a light ground; and
   docs/12 § Theming requires every colour to have its base definition here
   rather than only inside a media query.

   Light is also not a fallback in the dismissive sense. Dark grounds cause
   halation for readers with astigmatism, common after 50 and squarely inside
   this audience — which is why the switch is one tap away, why dark --ink is
   #F2F4EF rather than pure white, and why Maximum contrast exists as a third
   mode rather than a slider.                                               */
:root {
  --paper:      #FBFAF7;   /* app ground — warm, not a defaulted grey       */
  --card:       #FFFFFF;
  --raised:     #FFFFFF;   /* controls. In light nothing is lighter than a
                              card, so elevation is carried by shadow alone
                              — which is what actually happens physically.  */
  --sunken:     #F2F1EB;   /* wells, track backgrounds                      */
  --ink:        #0E0E0C;   /* body text            18.51:1 on paper   AAA   */
  --ink-2:      #4A4A45;   /* secondary text        8.54:1 on paper   AAA   */
  --line:       #8E8B80;   /* borders               3.27:1  WCAG 1.4.11 ok  */
  --line-heavy: #4A4A45;   /* structural dividers                           */

  --lime:       #C6FF3D;   /* FIELD ONLY. Never text — 1.13:1 on paper.     */
  --on-lime:    #0E0E0C;   /* text on a lime field 16.35:1            AAA   */
  --lime-deep:  #3D4A00;   /* the accent when it must be text 9.24:1  AAA   */

  /* DATA INK. --lime is the one thing to tap (docs/12 § One action colour);
     a ring or a bar drawn in it would be a second lime element competing
     with the start path. --lime-dim is the same family at data weight:
     5.10:1 on paper, so it reads as a graphical object, and unmistakably
     not as a button.                                                       */
  --lime-dim:   #5A741A;
  --lime-tint:  rgba(90, 116, 26, .12);   /* engaged-detent wash            */

  --warn:       #6B4A00;   /* safety notes only     7.72:1 on paper   AAA   */
  --warn-field: #FFF3D6;
  --on-warn:    #3D2A00;

  --absent:     #8E8B80;   /* the missed-day dot. Never red.  3.27:1        */

  --focus:      #1741C8;   /* focus ring            7.66:1 on paper   AAA   */

  color-scheme: light;
}

/* ── DARK — the shipped identity, and first-class, not an inversion ───────
   ⚠ WRITTEN TWICE ON PURPOSE, AND UNGUARDED IN ONE OF THEM.
   tests/a11y/contrast.test.js matches block selectors literally, so it reads
   `:root[data-theme="dark"]` and NEVER this media query. The two blocks must
   be kept identical BY HAND — an edit here that isn't mirrored below ships
   unmeasured. The explicit block is the one under test; treat it as the
   source of truth and copy it up.

   Surfaces sit at four levels so elevation has somewhere to go: a well, the
   ground, a card, and a raised control. --ink-2 on --raised is the binding
   constraint at 7.56:1 — that is why --raised stops at #232725 and does not
   climb further, and why there is no fifth, lighter surface for sheets. A
   sheet is lifted by its scrim and its shadow, which is the honest answer.  */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #0E100F;   /* charcoal, deliberately not #000            */
    --card:       #171A18;
    --raised:     #232725;   /* controls, tab bar, engaged detents          */
    --sunken:     #090B0A;
    --ink:        #F2F4EF;   /* 17.24:1 AAA — not pure white, see above    */
    --ink-2:      #B4B9AE;   /*  9.54:1 AAA                                */
    --line:       #747B70;   /*  3.46:1 on --raised, WCAG 1.4.11 ok        */
    --line-heavy: #B4B9AE;

    --lime:       #C6FF3D;
    --on-lime:    #0E0E0C;
    --lime-deep:  #C6FF3D;   /* in dark, lime IS legible as text 16.16:1    */
    --lime-dim:   #8FB82C;   /* data ink — 8.24:1 on paper                  */
    --lime-tint:  rgba(198, 255, 61, .10);

    --warn:       #FFC95C;   /* 11.34:1 AAA */
    --warn-field: #2A2109;
    --on-warn:    #FFC95C;

    --absent:     #747B70;
    --focus:      #9DB8FF;   /* 9.76:1 AAA */

    color-scheme: dark;
  }
}

/* ⚠ build.js reads --paper out of the FIRST `:root[data-theme="dark"]`
   block by splitting on the selector and taking everything to the first
   `}`. Keep --paper in this block, or the dark theme-color meta and the
   manifest silently fall back to white.                                   */
:root[data-theme="dark"] {
  --paper:      #0E100F;
  --card:       #171A18;
  --raised:     #232725;
  --sunken:     #090B0A;
  --ink:        #F2F4EF;
  --ink-2:      #B4B9AE;
  --line:       #747B70;
  --line-heavy: #B4B9AE;
  --lime:       #C6FF3D;
  --on-lime:    #0E0E0C;
  --lime-deep:  #C6FF3D;
  --lime-dim:   #8FB82C;
  --lime-tint:  rgba(198, 255, 61, .10);
  --warn:       #FFC95C;
  --warn-field: #2A2109;
  --on-warn:    #FFC95C;
  --absent:     #747B70;
  --focus:      #9DB8FF;
  color-scheme: dark;
}

/* ── MAXIMUM CONTRAST — a third, deliberate mode ──────────────────────────
   Not a gimmick: for low-vision users the AAA palette above can still be
   insufficient. This drives every pair to near-maximum separation.        */
:root[data-contrast="max"] {
  --paper:      #FFFFFF;
  --card:       #FFFFFF;
  --raised:     #FFFFFF;
  --lime-dim:   #1F2600;
  --lime-tint:  transparent;
  --sunken:     #EBEBEB;
  --ink:        #000000;   /* 21:1 */
  --ink-2:      #1A1A1A;   /* 17.4:1 */
  --line:       #000000;
  --line-heavy: #000000;
  --lime:       #D4FF4A;
  --on-lime:    #000000;
  --lime-deep:  #1F2600;
  --warn:       #4A1D00;
  --warn-field: #FFE8B0;
  --on-warn:    #2B1100;
  --absent:     #4A4A4A;
  --focus:      #0000CC;
}
/* ⚠ Also unguarded: the parser needs `{` straight after the selector, so
   neither selector in this list is matched. Verified by hand.            */
:root[data-contrast="max"][data-theme="dark"],
:root[data-contrast="max"]:not([data-theme="light"]) {
  --paper:      #000000;
  --card:       #000000;
  --raised:     #000000;
  --lime-dim:   #D4FF4A;
  --lime-tint:  transparent;
  --sunken:     #141414;
  --ink:        #FFFFFF;
  --ink-2:      #E8E8E8;
  --line:       #FFFFFF;
  --line-heavy: #FFFFFF;
  --lime:       #D4FF4A;
  --on-lime:    #000000;
  --lime-deep:  #D4FF4A;
  --warn:       #FFD980;
  --warn-field: #1F1600;
  --on-warn:    #FFD980;
  --absent:     #9A9A9A;
  --focus:      #99BBFF;
}

/* ══════════════════════════════════════════════════════════════════════════
   ELEVATION — the depth system
   Four levels, so every object on screen belongs to a stated physical layer:

     --elev-0   ground      the view itself, rows at rest
     --elev-1   surface     cards, safety notes, the stop card
     --elev-2   control     chips, options, tiles, icon buttons, the hero
     --elev-3   important   the primary action, sheets

   plus --elev-in (pressed), --well (recessed track), --rim (top edge
   highlight) and --elev-bar (a bar casting upward).

   THE MATERIAL IS CLAY, AND CLAY HAS A BODY. Earlier rounds drew the edge of
   a control — a hard 2px inset line, a shallow bottom shade. At phone scale
   that reads as an OUTLINE: a flat panel with a border, however many layers
   it had. Volume is not drawn at the edge, it is drawn across the face.

   So a control is now a cushion, and four things make it one:
     1. a soft contact seam       2-4px, barely blurred — where it meets the
                                  ground. Thickness, not a machined arris.
     2. layered ambient shadow    two wide, negatively-spread layers — the
                                  form standing off the surface.
     3. wide inner shading        a broad top light and a deep bottom
                                  roll-under, both large-blur with negative
                                  spread so they stay INSIDE the silhouette
                                  and die well before the middle of the face.
                                  This is the layer that makes it inflated.
     4. a radial dome             --grad-raise pools light near the crown
                                  instead of washing top-to-bottom. A linear
                                  wash reads as a lit panel; a dome reads as
                                  a curved surface.
   Layers 1-2 live in --elev-N, 3 in --rim / --rim-2, 4 in --grad-raise, so
   every control already composing `var(--elev-N), var(--rim)` became a
   cushion without its own rule changing — cards included.

   WHERE THE LIGHT MAY SIT. In dark, the strong inner light lives only in the
   rim's top band, where centred text cannot reach; the dome on the face is
   capped at .04, far below the ~.025-per-step threshold that would move
   --ink-2 on --raised (7.56:1) off AAA. Measured, not argued: a tile hint and
   a hero secondary line both sample the flat surface colour exactly, and a
   chip label sits at 10.9:1 against a 7:1 floor. In light the cushion is
   carried by SHADE rather than light — there is nothing brighter than white
   to light a white control with, so the roll-under and the dark peripheral
   foot do the work.

   Press needs no new rule: a pressed control swaps --elev-N for --elev-in,
   so the seam and the ambient layers vanish together and the cushion
   compresses into the surface.

   Every value is rgba(). That is not incidental: the no-red test scans this
   file for 6-digit hex, and a shadow expressed as hex would be scanned for a
   rule it has nothing to do with.

   Two hard limits.
   1. Blur is capped at 26px. `.view` sets overflow-x: hidden with a 20px
      gutter, so a wider shadow clips visibly against the screen edge.
      Corollary for the glow layers below: keep blur + spread net reach
      under about 18px, or an aura bands against the screen edge.
   2. Depth is ADDITIVE ONLY. Nothing gives up its border to gain a shadow,
      because shadows do not exist in forced-colours mode and this audience
      cannot be asked to infer structure from light alone.                   */
:root {
  --elev-0:       none;
  /* Warm near-black, not pure black: pure black over a warm ground reads
     as a grey smudge rather than a shadow.                                 */
  --elev-1:        0 2px 2px rgba(28,26,20,.10),
                   0 4px 10px -2px rgba(28,26,20,.08),
                   0 10px 20px -4px rgba(28,26,20,.08);
  --elev-2:        0 3px 2px rgba(28,26,20,.12),
                   0 6px 14px -3px rgba(28,26,20,.09),
                   0 14px 26px -6px rgba(28,26,20,.11);
  --elev-3:        0 4px 3px rgba(28,26,20,.14),
                   0 8px 18px -4px rgba(28,26,20,.11),
                   0 18px 26px -6px rgba(28,26,20,.15);
  --elev-in:       inset 0 4px 10px -2px rgba(28,26,20,.18),
                   inset 0 1px 3px rgba(28,26,20,.12),
                   inset 0 -1px 0 rgba(255,255,255,.60);
  --elev-in-lime:  inset 0 4px 12px -2px rgba(14,14,12,.34),
                   inset 0 -8px 14px -8px rgba(255,255,255,.18);
  --elev-bar:     0 -1px 2px rgba(28,26,20,.05), 0 -6px 16px rgba(28,26,20,.08);
  --rim:           inset 0 1.5px 0 rgba(255,255,255,.90),
                   inset 0 9px 14px -6px rgba(255,255,255,.55),
                   inset 0 -12px 18px -8px rgba(28,26,20,.13);
  --rim-2:         inset 0 1.5px 0 rgba(255,255,255,1),
                   inset 0 11px 18px -7px rgba(255,255,255,.65),
                   inset 0 -14px 20px -9px rgba(28,26,20,.16);
  --well:          inset 0 3px 8px -2px rgba(28,26,20,.12),
                   inset 0 8px 12px -8px rgba(28,26,20,.06),
                   inset 0 -1px 0 rgba(255,255,255,.75);
  --grad-raise:    radial-gradient(140% 120% at 50% 8%,,
                   rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 42%,,
                   rgba(28,26,20,.035) 72%, rgba(28,26,20,.07) 100%);
  --grad-lime:     radial-gradient(140% 130% at 50% 8%,,
                   rgba(255,255,255,.30) 0%, rgba(255,255,255,.06) 40%,,
                   rgba(255,255,255,0) 60%, rgba(14,14,12,.12) 100%);
    /* The primary action is the most inflated object on any screen, and it is
     the one raised control with no --rim (its field is lime, not --raised).
     This is its cushion: crown light, a wide inner top light, and a deep
     roll-under in ink. Defined ONCE, on bare :root — lime is the same colour
     in both themes, so mirroring it into the dark blocks by hand would create
     a second value to keep in sync for no gain. */
  --rim-lime:     inset 0 1.5px 0 rgba(255,255,255,.60),
                  inset 0 12px 18px -6px rgba(255,255,255,.38),
                  inset 0 -14px 22px -8px rgba(14,14,12,.30);
  --grad-screen:  none;
  --scrim:        rgba(0,0,0,.5);

  /* ── THE GLOW — a faded neon aura behind a control ──────────────────────
     Decoration, and only decoration: it is a box-shadow layer, so
     [data-contrast="max"] nulls it with everything else and forced-colours
     discards it at the UA level. Nothing is ever identified by its glow.

     THREE TIERS, and hue is rank:
       --glow-lime      the one primary action on a screen (.cta)
       --glow-cat       a category surface you can tap (.tile);
                        --glow-cat-soft for one you cannot (.card--hero)
       --glow-soft      every other raised pressable — a NEUTRAL halo,
                        never a colour, so the coloured tiers keep their
                        rank and lime keeps meaning "this is the thing to
                        tap" (§ One action colour) while every button
                        still sits on its own pool of light.

     Two layers each: a tight core at the base of the form, and a wide faded
     halo. Both offset downward, so the light appears to come from behind
     and under the control rather than surrounding it like an outline.
     --glow-hue is set per element by applyDynamicStyles(); it stays
     transparent here so a stray consumer glows with nothing.               */
  --glow-hue:  transparent;
  --glow-mix:   20%;   /* core strength on a light ground  */
  --glow-mix-2: 12%;   /* halo strength                    */
  /* Lime itself is invisible on near-white, so the light theme glows in the
     same hue driven down to where it can actually be seen. */
  --glow-lime:       0 3px 16px -2px rgba(104,140,10,.30),
                     0 8px 26px -8px rgba(104,140,10,.16);
  --glow-lime-press: 0 2px 10px -2px rgba(104,140,10,.14);
  /* The third glow tier: every raised pressable that is neither the primary
     nor a category surface. Hue stays rank — lime > category > neutral — so
     glowing everything never gives the start path a competitor. In light
     there is no light to emit, so the halo is a deeper ambient shadow and
     the button floats; in dark it is a warm-white backlight bloom. */
  --glow-soft:       0 5px 16px -4px rgba(28,26,20,.18),
                     0 10px 26px -10px rgba(28,26,20,.13);
  --glow-soft-press: 0 2px 8px -4px rgba(28,26,20,.10);
}

/* ⚠ THE CATEGORY AURA IS DECLARED ON THE ELEMENT, NOT ON :root.
   A custom property substitutes its var() references at computed-value time
   ON THE ELEMENT THAT DECLARES IT, and what descendants inherit is the
   already-substituted result. Declared up on :root, --glow-cat would bake in
   the :root value of --glow-hue — transparent — and every tile would inherit
   a shadow of nothing, no matter what applyDynamicStyles() set further down.
   Declaring it here, on the same element that carries the hue, is what makes
   the indirection work at all. Verified: a tile computes its own category
   colour, not `color(srgb 0 0 0 / 0)`.                                     */
[data-glow] {
  --glow-cat:      0 3px 16px -2px color-mix(in srgb, var(--glow-hue) var(--glow-mix), transparent),
                   0 8px 26px -8px color-mix(in srgb, var(--glow-hue) var(--glow-mix-2), transparent);
  --glow-cat-soft: 0 8px 26px -8px color-mix(in srgb, var(--glow-hue) var(--glow-mix-2), transparent);
}

/* ⚠ Mirror of the dark block below — keep the two identical by hand.      */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --elev-0:       none;
    --elev-1:        0 2px 2px rgba(0,0,0,.55),
                     0 4px 10px -2px rgba(0,0,0,.48),
                     0 10px 20px -4px rgba(0,0,0,.42);
    --elev-2:        0 3px 3px rgba(0,0,0,.60),
                     0 6px 14px -3px rgba(0,0,0,.55),
                     0 14px 26px -6px rgba(0,0,0,.48);
    --elev-3:        0 4px 3px rgba(0,0,0,.65),
                     0 8px 18px -4px rgba(0,0,0,.60),
                     0 18px 26px -6px rgba(0,0,0,.54);
    --elev-in:       inset 0 4px 12px -2px rgba(0,0,0,.75),
                     inset 0 1px 3px rgba(0,0,0,.55),
                     inset 0 -1px 0 rgba(255,255,255,.05);
    --elev-in-lime:  inset 0 4px 14px -2px rgba(14,14,12,.44),
                     inset 0 -8px 14px -8px rgba(255,255,255,.14);
    --elev-bar:     0 -1px 2px rgba(0,0,0,.6), 0 -8px 20px rgba(0,0,0,.5);
    --rim:           inset 0 1.5px 0 rgba(255,255,255,.14),
                     inset 0 10px 16px -4px rgba(255,255,255,.18),
                     inset 0 -12px 18px -8px rgba(0,0,0,.56);
    --rim-2:         inset 0 1.5px 0 rgba(255,255,255,.20),
                     inset 0 12px 18px -5px rgba(255,255,255,.21),
                     inset 0 -14px 20px -9px rgba(0,0,0,.62);
    --well:          inset 0 3px 9px -2px rgba(0,0,0,.66),
                     inset 0 8px 14px -8px rgba(0,0,0,.30),
                     inset 0 -1px 0 rgba(255,255,255,.05);
    --grad-raise:    radial-gradient(140% 120% at 50% 8%,,
                     rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 45%,,
                     rgba(0,0,0,0) 62%, rgba(0,0,0,.20) 100%);
    --grad-lime:     radial-gradient(140% 130% at 50% 8%,,
                     rgba(255,255,255,.24) 0%, rgba(255,255,255,.05) 40%,,
                     rgba(255,255,255,0) 58%, rgba(14,14,12,.16) 100%);
    --grad-screen:  radial-gradient(130% 70% at 50% -8%, rgba(255,255,255,.045), transparent 62%);
    --scrim:        rgba(0,0,0,.68);

    /* Neon carries further on an ink ground than on paper, so the mixes run
       stronger here and the lime glow is the real lime rather than the
       darkened stand-in the light theme needs. */
    --glow-mix:   30%;
    --glow-mix-2: 18%;
    --glow-lime:       0 3px 16px -2px rgba(198,255,61,.30),
                       0 8px 26px -8px rgba(198,255,61,.18);
    --glow-lime-press: 0 2px 10px -2px rgba(198,255,61,.14);
    --glow-soft:       0 4px 16px -4px rgba(242,244,239,.15),
                       0 10px 26px -10px rgba(242,244,239,.09);
    --glow-soft-press: 0 2px 8px -4px rgba(242,244,239,.07);
  }
}

:root[data-theme="dark"] {
  --elev-0:       none;
  --elev-1:        0 2px 2px rgba(0,0,0,.55),
                   0 4px 10px -2px rgba(0,0,0,.48),
                   0 10px 20px -4px rgba(0,0,0,.42);
  --elev-2:        0 3px 3px rgba(0,0,0,.60),
                   0 6px 14px -3px rgba(0,0,0,.55),
                   0 14px 26px -6px rgba(0,0,0,.48);
  --elev-3:        0 4px 3px rgba(0,0,0,.65),
                   0 8px 18px -4px rgba(0,0,0,.60),
                   0 18px 26px -6px rgba(0,0,0,.54);
  --elev-in:       inset 0 4px 12px -2px rgba(0,0,0,.75),
                   inset 0 1px 3px rgba(0,0,0,.55),
                   inset 0 -1px 0 rgba(255,255,255,.05);
  --elev-in-lime:  inset 0 4px 14px -2px rgba(14,14,12,.44),
                   inset 0 -8px 14px -8px rgba(255,255,255,.14);
  --elev-bar:     0 -1px 2px rgba(0,0,0,.6), 0 -8px 20px rgba(0,0,0,.5);
  --rim:           inset 0 1.5px 0 rgba(255,255,255,.14),
                   inset 0 10px 16px -4px rgba(255,255,255,.18),
                   inset 0 -12px 18px -8px rgba(0,0,0,.56);
  --rim-2:         inset 0 1.5px 0 rgba(255,255,255,.20),
                   inset 0 12px 18px -5px rgba(255,255,255,.21),
                   inset 0 -14px 20px -9px rgba(0,0,0,.62);
  --well:          inset 0 3px 9px -2px rgba(0,0,0,.66),
                   inset 0 8px 14px -8px rgba(0,0,0,.30),
                   inset 0 -1px 0 rgba(255,255,255,.05);
  --grad-raise:    radial-gradient(140% 120% at 50% 8%,,
                   rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 45%,,
                   rgba(0,0,0,0) 62%, rgba(0,0,0,.20) 100%);
  --grad-lime:     radial-gradient(140% 130% at 50% 8%,,
                   rgba(255,255,255,.24) 0%, rgba(255,255,255,.05) 40%,,
                   rgba(255,255,255,0) 58%, rgba(14,14,12,.16) 100%);
  --grad-screen:  radial-gradient(130% 70% at 50% -8%, rgba(255,255,255,.045), transparent 62%);
  --scrim:        rgba(0,0,0,.68);
  --glow-mix:   30%;
  --glow-mix-2: 18%;
  --glow-lime:       0 3px 16px -2px rgba(198,255,61,.30),
                     0 8px 26px -8px rgba(198,255,61,.18);
  --glow-lime-press: 0 2px 10px -2px rgba(198,255,61,.14);
  --glow-soft:       0 4px 16px -4px rgba(242,244,239,.15),
                     0 10px 26px -10px rgba(242,244,239,.09);
  --glow-soft-press: 0 2px 8px -4px rgba(242,244,239,.07);
}

/* MAXIMUM CONTRAST — depth is decoration, and decoration goes first. Every
   shadow, rim, gradient and tint is nulled; structure falls back entirely to
   the borders that were never removed to make room for them.               */
:root[data-contrast="max"] {
  --elev-0: none; --elev-1: none; --elev-2: none; --elev-3: none;
  --elev-in: none; --elev-in-lime: none; --elev-bar: none;
  --rim: none; --rim-2: none; --rim-lime: none; --well: none;
  --grad-raise: none; --grad-lime: none; --grad-screen: none;
  --scrim: rgba(0,0,0,.86);
  /* The glow is the most decorative thing in the set, so it goes first and
     completely. The mixes are zeroed as well as the shadows nulled: either
     alone would be enough, and neither is worth relying on by itself. */
  --glow-lime: none; --glow-lime-press: none;
  --glow-cat: none; --glow-cat-soft: none;
  --glow-soft: none; --glow-soft-press: none;
  --glow-mix: 0%; --glow-mix-2: 0%;
}
/* The aura is declared on the element, so it has to be nulled there as well:
   an element-level declaration outranks the inherited :root one above. The
   zeroed mixes would already make it transparent; this makes it none.     */
:root[data-contrast="max"] [data-glow] {
  --glow-cat: none; --glow-cat-soft: none;
}

/* ── TYPE ─────────────────────────────────────────────────────────────────
   Atkinson Hyperlegible: designed by the Braille Institute for low vision.
   Its I / l / 1 and O / 0 are deliberately differentiated. Chosen for the
   reason, not the look.
   Archivo carries display and the timer — tabular figures, heavy weights. */
:root {
  --font-ui:   "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, system-ui, sans-serif;
  --font-disp: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, system-ui, sans-serif;

  /* In-app text-size control. Older users often don't know how to change
     OS text size, so the app offers it: A = 1, A+ = 1.15, A++ = 1.3        */
  --text-scale: 1;

  /* rem-based so BOTH the OS root size and --text-scale apply.            */
  --f-timer: calc(6rem      * var(--text-scale));   /*  96px */
  --f-title: calc(2.125rem  * var(--text-scale));   /*  34px */
  --f-card:  calc(1.625rem  * var(--text-scale));   /*  26px */
  --f-head:  calc(1.375rem  * var(--text-scale));   /*  22px */
  --f-body:  calc(1.1875rem * var(--text-scale));   /*  19px  <- was 14.5 */
  --f-sec:   calc(1.0625rem * var(--text-scale));   /*  17px  <- was 13   */
  --f-label: calc(0.9375rem * var(--text-scale));   /*  15px  <- was 10.5 */
  /* FLOOR IS 15px. Nothing smaller exists. Enforced by tests/a11y.        */
  /* The Progress hero numeral. 56, not the 72 this was specified at: it sits
     inside a ring, and 72 overflowed that ring at two digits — which is why
     the screen had quietly been rendering its headline metric at --f-card,
     a third of the specified size. 56 fits three digits at A++.            */
  --f-metric: calc(3.5rem * var(--text-scale));     /*  56px  Progress hero */

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-body:  1.55;   /* generous — read standing up, mid-movement */

  --w-reg:  400;
  --w-bold: 700;
  --track-title: -0.02em;
  --track-label:  0.01em;   /* sentence case, not uppercase — caps hurt legibility */
}

/* ── SPACE — 4px base, a real rhythm ─────────────────────────────────────── */
:root {
  --s1:  4px;  --s2:  8px;  --s3: 12px; --s4: 16px;
  --s5: 20px;  --s6: 24px;  --s7: 32px; --s8: 40px;
  --s9: 48px;  --s10: 64px;
  --gutter: 20px;
}

/* ── TARGETS — WCAG min 44, AAA 48. This audience gets more. ────────────── */
:root {
  --t-cta:   64px;
  --t-row:   60px;
  --t-tab:   56px;
  --t-chip:  52px;
  --t-icon:  52px;
  --t-min:   52px;   /* nothing interactive is smaller */
}

/* ── SHAPE — a considered set, not one radius everywhere ─────────────────
   Concentric: a nested radius is its parent's minus the inset between them,
   so corners stay parallel instead of drifting apart.

   Softer than a machined panel, because the material changed: a form pressed
   out of clay has no sharp arrises. Two to four pixels per step, which keeps
   the concentric relationships and the ordering of the old scale — a bubble
   is a different mistake from a bevel, and this stays short of it.         */
:root {
  --r-ctl:   20px;   /* chips, tiles, icon wells, calendar chips           */
  --r-chip:  20px;   /* tracks --r-ctl so a mixed row reads as one set     */
  --r-card:  28px;
  --r-inner: 16px;   /* nested inside --r-card at --s4 padding             */
  --r-slab:  28px;   /* the primary CTA */
  --r-sheet: 36px;
  --r-pill:  999px;
  --border:       1.5px;  /* visible at 3.27:1 — legible to older eyes     */
  --border-hair:  1px;    /* rim strokes on data visualisation             */
  --border-thick: 3px;    /* hero card, engaged detents                    */
}

/* ── PRESS PHYSICS ────────────────────────────────────────────────────────
   How far a control travels under a finger. One pixel more than before,
   because clay compresses and a soft form that does not visibly give under a
   finger reads as a picture of a button. Still small numbers: the shadow
   collapse does most of the work, and a control that moves further than this
   reads as a toy rather than a mechanism.                                  */
:root {
  --press-y:        2px;
  --press-y-lg:     3px;   /* the primary slab, which sits highest         */
  --press-scale:    .97;
  --press-scale-sm: .96;
  --press-dim:      .96;   /* brightness() on the lime field               */
}

/* ── MOTION ──────────────────────────────────────────────────────────────
   Press uses --ease-in (accelerating into the surface — a finger pushing);
   release uses --ease-spring, which overshoots by ~4% and settles. That
   asymmetry is what makes a control feel sprung rather than animated.      */
:root {
  --ease:        cubic-bezier(.32,.72,0,1);
  --ease-out:    cubic-bezier(.2,.8,.2,1);
  --ease-in:     cubic-bezier(.4,0,1,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --d-press:   100ms;
  --d-release: 260ms;
  --d-tick:    140ms;
  --d-nav:     260ms;   /* paired with a 280ms setTimeout in app.js render */
  --d-sheet:   300ms;
  --d-viz:     340ms;   /* Progress animate-in */
  --d-count:   340ms;   /* count-up */
  --d-stagger:  30ms;
}

/* ── FIXED DIMENSIONS ─────────────────────────────────────────────────────
   Non-interactive sizes that would otherwise be raw numbers in app.css.
   Deliberately NOT prefixed --t-: that namespace is asserted to be ≥48px
   touch targets, and a 14px rail declared as --t-rail would fail the suite. */
:root {
  --h-tag:  32px;    /* the static category pill */
  --h-rail: 14px;    /* .meter and horizontal track height */
  --h-bar: 132px;    /* vertical bar track */
  --col-w:  62px;    /* vertical bar column */
}

/* ── CATEGORY IDENTITY ────────────────────────────────────────────────────
   Used ONLY as a solid bar or a named chip, never as a chart encoding and
   never as the sole carrier of meaning. Each clears 4.5:1 as text on paper.

   Strength and Cardio were originally #A3341C and #94430A. Both tripped the
   no-red test, so both moved to sienna and amber. The rule that red is absent
   from the token set is not weakened to let a colour through — the colour
   changes instead.

   Known: strength/cardio sit 17 deg apart and focus/balance 13 deg apart.
   Acceptable because a category hue is ALWAYS rendered beside its name and is
   never the sole encoding. If that ever stops being true, re-space these.   */
:root {
  --c-strength:    #7A3B1F;
  --c-balance:     #5B3FBF;
  --c-mobility:    #0A5F70;
  --c-cardio:      #9A5A00;
  --c-flexibility: #98216B;
  --c-desk:        #14508C;
  --c-posture:     #0B5F45;
  --c-focus:       #3F3FA8;
  --c-fun:         #4F5F0A;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-strength:    #FF9A80;
    --c-balance:     #C3AEFF;
    --c-mobility:    #7FD8E8;
    --c-cardio:      #FFB273;
    --c-flexibility: #FF9CD6;
    --c-desk:        #96C4FF;
    --c-posture:     #78E0BA;
    --c-focus:       #AFAFFF;
    --c-fun:         #CDE06A;
  }
}
:root[data-theme="dark"] {
  --c-strength:    #FF9A80;
  --c-balance:     #C3AEFF;
  --c-mobility:    #7FD8E8;
  --c-cardio:      #FFB273;
  --c-flexibility: #FF9CD6;
  --c-desk:        #96C4FF;
  --c-posture:     #78E0BA;
  --c-focus:       #AFAFFF;
  --c-fun:         #CDE06A;
}

/* Ankay marketing site. Layout only: every colour, radius, shadow and type
   size comes from tokens.css, the app's own design tokens, copied verbatim.
   Rule carried over from the app: no raw colours in this file (a unit test
   enforces it), and lime appears on exactly one thing — the primary CTA.   */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  background-image: var(--grad-screen);
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--f-body);
  line-height: var(--lh-body);
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--r-inner); }

h1, h2, h3 {
  font-family: var(--font-disp);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-title);
  margin: 0;
}
h2 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); }
h3 { font-size: var(--f-head); }
p { margin: 0; }

.wrap { width: min(72rem, 100% - 2 * var(--gutter)); margin-inline: auto; }
.lede { color: var(--ink-2); font-size: var(--f-body); max-width: 38rem; }
.label {
  font-size: var(--f-label);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ink-2);
}

.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 10;
  background: var(--raised); padding: var(--s3) var(--s4); border-radius: var(--r-ctl);
}
.skip:focus { top: var(--s4); }

/* ── Header ─────────────────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 5;
  background: var(--paper);
  border-bottom: var(--border) solid var(--raised);
}
.top__in {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  min-height: 4.25rem;
}
.wordmark {
  font-family: var(--font-disp); font-weight: var(--w-bold);
  font-size: 1.625rem; letter-spacing: var(--track-title); text-decoration: none;
}
.top nav { display: flex; align-items: center; gap: var(--s2); }
.top nav a {
  display: inline-flex; align-items: center; min-height: var(--t-min);
  padding: 0 var(--s3); border-radius: var(--r-pill);
  color: var(--ink-2); text-decoration: none; font-size: var(--f-sec);
}
.top nav a:hover { color: var(--ink); background: var(--card); }
.top nav .lang { color: var(--ink); border: var(--border) solid var(--line); }
@media (max-width: 52rem) { .top nav .sec { display: none; } }

/* ── Buttons ────────────────────────────────────────────────────────── */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--t-cta);
  padding: var(--s4) var(--s7);
  font-family: var(--font-disp); font-size: var(--f-head); font-weight: var(--w-bold);
  letter-spacing: -.01em; text-decoration: none;
  border-radius: var(--r-slab);
  transition: transform var(--d-release) var(--ease-spring), box-shadow var(--d-release) var(--ease-spring);
}
.cta--primary {
  background-color: var(--lime); background-image: var(--grad-lime);
  color: var(--on-lime);
  border: var(--border) solid var(--on-lime);
  box-shadow: var(--glow-lime), var(--elev-3), var(--rim-lime);
}
.cta--primary:hover { box-shadow: var(--glow-lime-press), var(--elev-3), var(--rim-lime); }
.cta--primary:active { transform: translateY(var(--press-y)) scale(var(--press-scale)); }
.cta--ghost {
  background: transparent; cursor: pointer;
  color: var(--ink); font-size: var(--f-sec);
  border: var(--border) solid var(--line);
  padding-inline: var(--s5);
}
.cta--ghost:hover { border-color: var(--line-heavy); background: var(--card); }

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero { padding-block: var(--s9) var(--s10); }
.hero__grid {
  display: grid; gap: var(--s8); align-items: center;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}
@media (max-width: 52rem) { .hero__grid { grid-template-columns: minmax(0, 1fr); } }
.badge {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: var(--h-tag); padding: 0 var(--s3);
  border: var(--border) solid var(--line); border-radius: var(--r-pill);
  font-size: var(--f-label); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-2);
}
.badge::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ink);
}
.hero h1 {
  font-size: clamp(2.75rem, 1.6rem + 5.2vw, 5.25rem);
  line-height: 1.02;
  margin: var(--s5) 0 var(--s5);
}
.hero .lede { font-size: 1.25rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s7); }
.facts {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  list-style: none; padding: 0; margin: var(--s6) 0 0;
  color: var(--ink-2); font-size: var(--f-label);
}
.facts li::before { content: "✓ "; color: var(--ink); }

.phone {
  justify-self: center;
  width: min(20rem, 100%);
  padding: var(--s3);
  background: var(--raised);
  background-image: var(--grad-raise);
  border: var(--border) solid var(--line);
  border-radius: 3rem;
  box-shadow: var(--elev-3), var(--rim);
}
.phone img { border-radius: 2.4rem; width: 100%; height: auto; }

/* ── Numbers ────────────────────────────────────────────────────────── */
.numbers {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4);
  padding-block: var(--s7);
  border-block: var(--border) solid var(--raised);
}
@media (max-width: 40rem) { .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.numbers b {
  display: block; font-family: var(--font-disp); font-size: var(--f-metric);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.numbers span { color: var(--ink-2); font-size: var(--f-sec); }

/* ── Sections ───────────────────────────────────────────────────────── */
.section { padding-block: var(--s10); scroll-margin-top: 4.5rem; }
.section__head { display: grid; gap: var(--s4); margin-bottom: var(--s8); max-width: 44rem; }

.card {
  background: var(--card);
  border: var(--border) solid var(--raised);
  border-radius: var(--r-card);
  padding: var(--s6);
  box-shadow: var(--elev-1), var(--rim);
}
.card p { color: var(--ink-2); margin-top: var(--s2); }
.grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.grid, .numbers { list-style: none; margin: 0; padding-left: 0; }

.steps { counter-reset: step; }
.steps .card { position: relative; padding-top: calc(var(--s5) + 2.75rem + var(--s4)); }
.steps .card::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: var(--s5); left: var(--s6);
  font-family: var(--font-disp); font-weight: var(--w-bold); font-size: var(--f-card);
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  border-radius: 50%; border: var(--border) solid var(--line-heavy);
}

/* Category tiles carry their hue the way the app does: a hue bar and a
   hue-tinted glow, never lime. */
.cat { --glow-hue: var(--hue); border-color: var(--raised); box-shadow: var(--glow-cat-soft), var(--elev-1), var(--rim); }
.cat h3 { display: flex; align-items: center; gap: var(--s3); font-size: var(--f-card); }
.cat h3::before { content: ""; width: 1.5rem; height: .4rem; border-radius: var(--r-pill); background: var(--hue); flex: none; }
.pill {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: var(--h-tag); padding: 0 var(--s3);
  border: var(--border) solid var(--line); border-radius: var(--r-pill);
  font-size: var(--f-label); font-weight: var(--w-bold);
}
.pill::before { content: ""; width: 1rem; height: .3rem; border-radius: var(--r-pill); background: var(--hue); }
[data-category="strength"] { --hue: var(--c-strength); }
[data-category="balance"] { --hue: var(--c-balance); }
[data-category="mobility"] { --hue: var(--c-mobility); }
[data-category="cardio"] { --hue: var(--c-cardio); }
[data-category="flexibility"] { --hue: var(--c-flexibility); }
[data-category="desk"] { --hue: var(--c-desk); }
[data-category="posture"] { --hue: var(--c-posture); }
[data-category="focus"] { --hue: var(--c-focus); }
[data-category="fun"] { --hue: var(--c-fun); }

/* ── Demo clips ─────────────────────────────────────────────────────── */
.clips { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.clip { margin: 0; display: grid; gap: var(--s3); }
.clip__media {
  position: relative; overflow: hidden;
  border-radius: var(--r-card);
  border: var(--border) solid var(--hue);
  background: var(--sunken);
  aspect-ratio: 16 / 10;
}
.clip video { width: 100%; height: 100%; object-fit: cover; }
.clip__toggle {
  position: absolute; right: var(--s3); bottom: var(--s3);
  width: var(--t-min); height: var(--t-min); border-radius: 50%;
  display: grid; place-items: center;
  background: var(--raised); color: var(--ink);
  border: var(--border) solid var(--line-heavy); cursor: pointer;
  font: inherit; font-size: var(--f-label);
}
.clip figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); }
.clip figcaption span { font-family: var(--font-disp); font-weight: var(--w-bold); }

/* ── Kind by design: a week of dots ─────────────────────────────────── */
.week { display: flex; gap: var(--s2); margin-top: var(--s4); }
.week i { width: 1rem; height: 1rem; border-radius: 50%; background: var(--ink); }
.week i.off { background: var(--absent); }

/* ── Safety ─────────────────────────────────────────────────────────── */
.safety { display: grid; gap: var(--s6); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 52rem) { .safety { grid-template-columns: minmax(0, 1fr); } }
.pain {
  font-family: var(--font-disp); font-weight: var(--w-bold);
  font-size: var(--f-card); line-height: var(--lh-snug);
  padding: var(--s5) var(--s6);
  background: var(--warn-field); color: var(--warn);
  border: var(--border) solid var(--warn); border-radius: var(--r-card);
}
.signals { margin: var(--s3) 0 0; padding-left: 1.25em; display: grid; gap: var(--s1); }
.signals li { color: var(--ink); }

/* ── FAQ ────────────────────────────────────────────────────────────── */
.faq { display: grid; gap: var(--s3); max-width: 50rem; }
.faq details {
  background: var(--card); border: var(--border) solid var(--raised);
  border-radius: var(--r-card); box-shadow: var(--elev-1), var(--rim);
}
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  min-height: var(--t-row); padding: var(--s4) var(--s6);
  font-family: var(--font-disp); font-weight: var(--w-bold); font-size: var(--f-head);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: var(--f-card); color: var(--ink-2); flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 var(--s6) var(--s5); color: var(--ink-2); }

/* ── Closing + footer ───────────────────────────────────────────────── */
.closing { text-align: center; display: grid; justify-items: center; gap: var(--s4); }
.closing h2 { max-width: 40rem; }
.notes {
  display: grid; gap: var(--s3); padding: var(--s6);
  border: var(--border) solid var(--line); border-radius: var(--r-card);
  color: var(--ink-2); font-size: var(--f-sec);
}
.notes strong { color: var(--ink); }
.foot { padding-block: var(--s8); border-top: var(--border) solid var(--raised); margin-top: var(--s10); }
.foot__in { display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between; align-items: center; color: var(--ink-2); font-size: var(--f-sec); }
.foot nav { display: flex; gap: var(--s2); }
.foot nav a { display: inline-flex; align-items: center; min-height: var(--t-min); padding: 0 var(--s3); text-decoration: none; }
.foot nav a:hover { color: var(--ink); text-decoration: underline; }

/* ── Safety report ──────────────────────────────────────────────────── */
.urgent {
  margin-top: var(--s7); padding: var(--s5) var(--s6);
  background: var(--warn-field); color: var(--warn);
  border: var(--border) solid var(--warn); border-radius: var(--r-card);
}
.doc .urgent h2 { margin-top: 0; color: var(--warn); }
.doc .urgent p { color: var(--warn); }
.urgent .cta { color: var(--warn); border-color: var(--warn); }

.report-form { display: grid; gap: var(--s6); margin-top: var(--s8); scroll-margin-top: 5rem; }
.field { display: grid; gap: var(--s2); }
.field label, .check label { font-family: var(--font-disp); font-weight: var(--w-bold); font-size: var(--f-head); color: var(--ink); }
.report-form .hint { color: var(--ink-2); font-size: var(--f-sec); margin: 0; }
.report-form input[type="text"], .report-form select, .report-form textarea {
  width: 100%; min-height: var(--t-min);
  padding: var(--s3) var(--s4);
  font: inherit; color: var(--ink);
  background: var(--sunken);
  border: var(--border) solid var(--line); border-radius: var(--r-ctl);
}
.report-form textarea { resize: vertical; line-height: var(--lh-body); }
.report-form input::placeholder { color: var(--ink-2); }
.report-form input:focus-visible, .report-form select:focus-visible, .report-form textarea:focus-visible { border-color: var(--focus); }
.check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); align-items: start; }
.check input { width: 1.5rem; height: 1.5rem; margin: .2rem 0 0; accent-color: var(--lime); }
.check label { font-family: var(--font-ui); font-weight: var(--w-reg); font-size: var(--f-body); }
.report-form .cta--primary { justify-self: start; }
.doc .form-error {
  padding: var(--s4) var(--s5); margin: 0;
  background: var(--warn-field); color: var(--warn);
  border: var(--border) solid var(--warn); border-radius: var(--r-ctl);
}
.form-error[hidden] { display: none; }
/* The honeypot: off-screen for people, ignored by screen readers. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ── Admin (owner only) ─────────────────────────────────────────────── */
.report-list { list-style: none; padding: 0; margin: var(--s6) 0 0; display: grid; gap: var(--s4); }
.report-item h2 { margin-top: var(--s2); }
.report-item__details { white-space: pre-wrap; color: var(--ink); }
.report-item form { margin-top: var(--s4); }

/* ── Legal pages ────────────────────────────────────────────────────── */
.doc { max-width: 44rem; padding-block: var(--s9); }
.doc h1 { font-size: var(--f-title); margin-bottom: var(--s2); }
.doc h2 { font-size: var(--f-head); margin-top: var(--s7); margin-bottom: var(--s3); }
.doc p { color: var(--ink-2); margin-top: var(--s3); }
.doc .summary { color: var(--ink); font-size: 1.25rem; margin-top: var(--s5); }
.doc .back { display: inline-flex; min-height: var(--t-min); align-items: center; color: var(--ink-2); }

/* ── Motion ─────────────────────────────────────────────────────────────
   Everything below is decoration layered on a page that already works.
   site.js adds .motion to <html> only when the visitor has not asked for
   reduced motion, so without it (or without JS) nothing moves or hides.  */

/* Scroll progress: a hairline under the header, ink not lime. */
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--ink-2); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.top { transition: box-shadow var(--d-sheet) var(--ease); }
.top.is-scrolled { box-shadow: var(--elev-2); }

/* Hero sky: three slow category-hue lights behind the headline. */
.hero { position: relative; isolation: isolate; overflow: clip; }
.hero__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__sky i {
  position: absolute; width: 38rem; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--hue) 22%, transparent), transparent);
  filter: blur(20px);
}
.hero__sky i:nth-child(1) { left: -12rem; top: -10rem; }
.hero__sky i:nth-child(2) { right: -14rem; top: 4rem; }
.hero__sky i:nth-child(3) { left: 30%; bottom: -22rem; opacity: .6; }
.motion .hero__sky i { animation: drift 22s var(--ease-out) infinite alternate; }
.motion .hero__sky i:nth-child(2) { animation-duration: 28s; animation-delay: -9s; }
.motion .hero__sky i:nth-child(3) { animation-duration: 34s; animation-delay: -17s; }
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(4rem, 2rem, 0) scale(1.12); }
  100% { transform: translate3d(-3rem, 4rem, 0) scale(.94); }
}

/* Headline: words rise one after another. */
.motion .hero h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; }
.motion .hero h1 .w > span {
  display: inline-block; transform: translateY(105%);
  animation: rise 900ms var(--ease) forwards; animation-delay: calc(120ms + var(--i) * 70ms);
}
@keyframes rise { to { transform: none; } }
.motion .hero .badge, .motion .hero .lede, .motion .hero__actions, .motion .hero .facts {
  opacity: 0; animation: fade-up 800ms var(--ease) forwards;
}
.motion .hero .lede { animation-delay: 520ms; }
.motion .hero__actions { animation-delay: 660ms; }
.motion .hero .facts { animation-delay: 800ms; }
@keyframes fade-up { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } }

/* Phone: enters, floats, and leans toward the pointer on laptops. */
.motion .phone { opacity: 0; animation: phone-in 1100ms var(--ease) 300ms forwards; }
@keyframes phone-in { from { opacity: 0; transform: translateY(3rem) rotate(4deg) scale(.94); } to { opacity: 1; transform: none; } }
.phone { transition: rotate 600ms var(--ease-out); }
.phone[data-tilt] { transform-style: preserve-3d; }
.motion .phone img { animation: float 7s ease-in-out 1.4s infinite; }
@keyframes float { 50% { transform: translateY(-.75rem); } }
.motion .badge::before { animation: ping 2.4s var(--ease-out) infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ink) 60%, transparent); } 100% { box-shadow: 0 0 0 .6rem transparent; } }

/* Category ticker between the numbers and the first section. */
.ticker {
  overflow: hidden; padding-block: var(--s5);
  mask-image: linear-gradient(90deg, transparent, var(--ink) 12%, var(--ink) 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--ink) 12%, var(--ink) 88%, transparent);
}
.ticker__run { display: flex; gap: var(--s3); width: max-content; }
.ticker .pill { font-size: var(--f-sec); padding-inline: var(--s4); color: var(--ink-2); }
.motion .ticker__run { animation: run 48s linear infinite; }
.ticker:hover .ticker__run { animation-play-state: paused; }
@keyframes run { to { transform: translateX(calc(-50% - var(--s3) / 2)); } }

/* Scroll reveal: anything tagged by site.js slides in once, staggered. */
.motion [data-reveal] {
  opacity: 0; transform: translateY(2.5rem) scale(.985);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.motion [data-reveal="left"] { transform: translateX(-2.5rem); }
.motion [data-reveal="right"] { transform: translateX(2.5rem); }
.motion [data-reveal="zoom"] { transform: scale(.92); }
.motion [data-reveal].is-in { opacity: 1; transform: none; }
.motion .section__head h2 {
  background: linear-gradient(90deg, var(--ink) 50%, var(--ink-2) 50%) 100% 0 / 200% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: background-position 1400ms var(--ease) 200ms;
}
.motion .section__head.is-in h2 { background-position: 0 0; }

/* Cards: lift, and a soft light that follows the pointer. */
.card { position: relative; overflow: hidden; }
.card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, -30%), color-mix(in srgb, var(--hue, var(--ink)) 12%, transparent), transparent 60%);
  opacity: 0; transition: opacity var(--d-sheet) var(--ease);
}
.motion .card.is-done { transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out), border-color 500ms var(--ease-out); }
@media (hover: hover) {
  .card:hover::after { opacity: 1; }
  .motion .card.is-done:hover { transform: translateY(-.35rem); border-color: var(--line-heavy); box-shadow: var(--elev-3), var(--rim); }
  .motion .cat.is-done:hover { --glow-mix: 45%; border-color: var(--hue); box-shadow: var(--glow-cat), var(--elev-3), var(--rim); }
}
.cat h3::before { transition: width 600ms var(--ease) 300ms; }
.cat:hover h3::before, .motion .cat.is-in h3::before { width: 2.25rem; }

/* Steps: the number ring fills when the card arrives. */
.steps .card::before { transition: background 700ms var(--ease) 400ms, color 700ms var(--ease) 400ms; }
.motion .steps .card.is-in::before { background: var(--ink); color: var(--paper); }

/* Demo clips: video eases in from a slight zoom. */
.clip__media video { transition: transform 1600ms var(--ease); }
.motion .clip:not(.is-in) video { transform: scale(1.12); }
@media (hover: hover) { .clip:hover video { transform: scale(1.04); } }

/* Week dots light up in order. */
.motion .week i { transform: scale(0); transition: transform 500ms var(--ease-spring); transition-delay: calc(500ms + var(--d, 0) * 90ms); }
.motion .is-in .week i { transform: none; }

/* Safety: the pain line breathes twice to draw the eye, then stays still. */
.motion .pain.is-in { animation: breathe 1600ms var(--ease) 600ms 2; }
@keyframes breathe { 50% { box-shadow: 0 0 0 .5rem color-mix(in srgb, var(--warn) 18%, transparent); } }

/* FAQ: the answer slides open. */
.motion .faq details[open] p { animation: open 450ms var(--ease); }
@keyframes open { from { opacity: 0; transform: translateY(-.5rem); } }
.faq summary::after { transition: transform var(--d-release) var(--ease); }
.faq details[open] summary::after { transform: rotate(180deg); }

/* Primary CTA: a slow sheen across the lime. */
.cta--primary { position: relative; overflow: hidden; }
.motion .cta--primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--paper) 18%, transparent) 50%, transparent 65%);
  transform: translateX(-120%); animation: sheen 5s var(--ease) 2s infinite;
}
@keyframes sheen { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@media (hover: hover) { .cta--primary:hover { transform: translateY(-2px); } }

/* Laptops get a full-height hero; phones stay one column with a smaller sky. */
@media (min-width: 64rem) {
  .hero { padding-block: var(--s9); min-height: min(54rem, calc(100vh - 4.25rem)); display: grid; align-items: center; }
  .phone { width: min(22rem, 100%); }
}
@media (max-width: 40rem) {
  .hero__sky i { width: 24rem; }
  .hero__actions .cta { flex: 1 1 100%; }
  .motion [data-reveal="left"], .motion [data-reveal="right"] { transform: translateY(2rem); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__run { flex-wrap: wrap; width: auto; justify-content: center; }
  .ticker__run > :nth-child(n + 10) { display: none; }
}