/* ═══ 1 · TOKENS — copied from index.html; qa/audit.mjs "token-sync" fails if they drift ════════════════════════════════════════════════════
       Mirrors the app's Teal Light theme (lib/app/common/ui/color/color_teal_light.dart).
       Raw hex lives only in :root. Contrast measured (WCAG 2.x):
       ink 13.25 · text 11.36 · muted 6.01 · accent 5.70 on --bg;
       white on --accent 6.33 · --cta-bg on --accent 4.36 (large text only). */
    :root {
      --bg:        #E8F6F1;  /* primaryBackground */
      --surface:   #FFFFFF;
      --container: #DEECE7;  /* containerBackground */
      --fg:        #1C2B28;  /* headline ink · device bezel */
      --text:      #333333;  /* textColor */
      --muted:     #5C5C5C;  /* subTextColor */
      --border:    #CFE0DA;
      --accent:    #006B6B;  /* accentColor */
      --on-accent: #FFFFFF;
      --cta-bg:    #B2DFDB;  /* ctaButtonBackground — the app's pill */
      --cta-fg:    #1C2B28;
      --bezel:     #1C2B28;
      --shadow:    #142D28;
      --band-sub:  #D1E4E4;
      --glow:      #B2DFDB;  /* device aura */

      /* in-app modules floating round the hero phone: always Teal Light, like the screens */
      --app-card:    #FFFFFF;
      --app-err:     #8B0000;  /* errorTextColor */
      --app-ok:      #3B743C;  /* successTextColor */
      --prio-med:    #7A5C00;  /* --prio-medium (baseline.css) */
      --prio-med-bg: #EDEBDA;

      /* the seven themes, from lib/app/common/ui/color/*.dart (ARGB → RGBA) */
      --th-light-bg:#FCFCFC; --th-light-ct:#F5F5F5; --th-light-tx:#212121; --th-light-sub:#5E5E5E; --th-light-ac:#4285F4; --th-light-cta:#BBDEFB;
      --th-teal-bg:#E8F6F1;  --th-teal-ct:#DEECE7;  --th-teal-tx:#333333;  --th-teal-sub:#5C5C5C;  --th-teal-ac:#006B6B;  --th-teal-cta:#B2DFDB;
      --th-forest-bg:#F1F8E9;--th-forest-ct:#DCEDC8;--th-forest-tx:#33691E;--th-forest-sub:#446724;--th-forest-ac:#558B2F;--th-forest-cta:#C5E1A5;
      --th-dark-bg:#121212;  --th-dark-ct:#1E1E1E;  --th-dark-tx:#FFFFFF;  --th-dark-sub:#FFFFFFB3; --th-dark-ac:#BB86FC;  --th-dark-cta:#2D2D2D;
      --th-night-bg:#0A1929; --th-night-ct:#132F4C; --th-night-tx:#FFFFFF; --th-night-sub:#AAC7E3; --th-night-ac:#3EDBF0; --th-night-cta:#1F4B78;
      --th-amber-bg:#1A1A1A; --th-amber-ct:#2D2D2D; --th-amber-tx:#FFFFFF; --th-amber-sub:#FFFFFFB3; --th-amber-ac:#FFB300; --th-amber-cta:#2D2D2D;
      --th-mono-bg:#000000;  --th-mono-ct:#1A1A1A;  --th-mono-tx:#FFFFFF;  --th-mono-sub:#AAAAAA;  --th-mono-ac:#FFFFFF;  --th-mono-cta:#333333;

      /* type — SF Pro is the app's font; Geist stands in off-Apple */
      --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Geist', system-ui, sans-serif;
      --font-body:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Geist', system-ui, sans-serif;
      --font-mono:    ui-monospace, 'SF Mono', 'Geist Mono', Menlo, monospace;
      --fs-h1:   clamp(48px, 7.4vw, 100px);
      --fs-h2:   clamp(36px, 4.8vw, 64px);
      --fs-h3:   clamp(28px, 3vw, 42px);
      --fs-lead: clamp(17px, 1.4vw, 20px);

      /* the app's one curve + durations (assets/baseline.css) */
      --ease: cubic-bezier(.2, 0, 0, 1);
      --dur-fast: 120ms;   /* press, colour */
      --dur-base: 200ms;   /* state change */
      --dur-slow: 320ms;   /* open / rotate */
      --enter:    480ms;   /* screen swap (ad-kit enter_ms) */
      --dur-reveal: 640ms; /* scroll reveal */
      --dur-hero: 720ms;   /* hero entrance */
      --stagger:  90ms;
      --delay-hero:  80ms;   /* first hero line */
      --delay-phone: 260ms;  /* hero device follows the copy */
      --delay-wipe:  820ms;  /* highlight bar after the headline lands */
      --delay-strike: 300ms; /* manifesto strikes start */
      --dur-blink: 1.1s;     /* caret, like the app's typewriter */
      --dur-parallax: 600ms; /* hero depth follows the pointer */
      --tilt-max: 6deg;      /* device turn toward the pointer */
      --glare: 16%;          /* white sheen on the screen glass */
      --lamp: 260px;         /* radius of the light on the band's N */
      --dur-drift: 6.5s;     /* idle float of the hero modules */
      --ease-drift: cubic-bezier(.45, 0, .55, 1);

      --nav-h: 64px;
      --container-w: 1200px;
      --gutter: clamp(20px, 4vw, 40px);
      --r-chip:  12px;   /* app --r-2 */
      --r-panel: 20px;   /* app --r-4 */
      --r-card:  28px;
      --r-band:  40px;
      --r-tile:  56px;
      --r-pill:  999px;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --bg:        #101A18;
        --surface:   #1C2B28;
        --container: #22332F;
        --fg:        #E8F6F1;
        --text:      #D5E2DE;
        --muted:     #A7BCB6;
        --border:    #2C403B;
        --accent:    #B2DFDB;
        --on-accent: #1C2B28;
        --cta-bg:    #B2DFDB;
        --cta-fg:    #1C2B28;
        --bezel:     #0A1110;
        --glow:      #006B6B;
        --shadow:    #000000;
      }
    }

    /* ═══ 2 · BASE ═══════════════════════════════════════════════════ */
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
    body {
      margin: 0; background: var(--bg); color: var(--text);
      font-family: var(--font-body); font-size: 16px; line-height: 1.55;
      -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
      overflow-x: clip;
    }
    img, svg { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; color: inherit; cursor: pointer; }
    p { text-wrap: pretty; margin: 0; }
    h1, h2, h3 { font-family: var(--font-display); color: var(--fg); margin: 0; text-wrap: balance; }
    :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .skip { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: var(--r-pill); }
    .skip:focus { top: 12px; }

    .container { max-width: var(--container-w); margin-inline: auto; padding-inline: var(--gutter); }
    .section { padding-block: clamp(72px, 10vw, 140px); }
    .eyebrow {
      font-family: var(--font-mono); font-size: 12px; font-weight: 500;
      letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 20px;
    }
    .h2 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.02; letter-spacing: -.032em; }
    .lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); max-width: 46ch; }
    .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
    .dots { display: flex; flex-wrap: wrap; column-gap: .55em; row-gap: .2em; }
    .dots > span { white-space: nowrap; }
    .dots > span:not(:last-child)::after { content: "·" / ""; margin-left: .55em; }

    /* highlight word — the brand rule: accent colour + a bar that wipes in under it */
    .hl {
      color: var(--accent);
      background: linear-gradient(currentColor, currentColor) no-repeat 0 94% / 100% .075em;
      padding-bottom: .02em;
    }

    /* ═══ 3 · NAV ════════════════════════════════════════════════════ */
    .topnav {
      position: sticky; top: 0; z-index: 20; height: var(--nav-h);
      background: color-mix(in srgb, var(--bg) 84%, transparent);
      backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
      border-bottom: 1px solid transparent; transition: border-color var(--dur-slow) var(--ease);
    }
    .topnav.is-scrolled { border-bottom-color: var(--border); }
    .topnav-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .brand { display: inline-flex; align-items: center; gap: 12px; color: var(--fg); min-height: 44px; }
    .brand svg { width: 18px; height: 21px; }
    .wordmark { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .3em; }
    .topnav nav { display: flex; align-items: center; gap: 4px; }
    .topnav nav a.link {
      font-size: 14px; color: var(--muted); padding: 12px 14px; border-radius: var(--r-pill);
      transition: color var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease);
    }
    .topnav nav a.link:hover { color: var(--fg); background: var(--container); }

    /* ═══ 4 · BUTTONS ════════════════════════════════════════════════ */
    .pill {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      min-height: 44px; padding: 0 20px; border-radius: var(--r-pill);
      background: var(--cta-bg); color: var(--cta-fg); font-weight: 600; font-size: 15px;
      transition: transform var(--dur-fast) var(--ease), background-color var(--dur-base) var(--ease);
    }
    .pill:hover { background: color-mix(in srgb, var(--cta-bg) 86%, var(--fg)); }
    .pill:active { transform: scale(.97); }

    .stores { display: flex; flex-wrap: wrap; gap: 12px; }
    .store {
      --s-bg: var(--fg); --s-fg: var(--bg); --s-line: var(--fg);
      display: inline-flex; align-items: center; gap: 12px;
      min-height: 56px; padding: 0 24px 0 20px; border-radius: var(--r-pill);
      background: var(--s-bg); color: var(--s-fg); border: 1.5px solid var(--s-line);
      transition: transform var(--dur-fast) var(--ease), background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
    }
    .store > * { pointer-events: none; } /* GTM click target is always the element with the id */
    .store svg { width: 22px; height: 22px; flex: none; }
    .store span { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
    .store small { font-size: 11px; font-weight: 500; letter-spacing: .01em; }
    .store b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
    .store:hover { background: color-mix(in srgb, var(--s-bg) 88%, var(--s-fg)); }
    .store:active { transform: scale(.97); }
    .stores > .store + .store { --s-bg: transparent; --s-fg: var(--fg); --s-line: color-mix(in srgb, var(--fg) 28%, transparent); }
    .stores > .store + .store:hover { --s-line: var(--fg); background: var(--surface); }
    .fine { font-size: 13px; color: var(--muted); margin-top: 16px; }

    /* ═══ 12 · FOOTER ════════════════════════════════════════════════ */
    .foot { padding-block: 72px 48px; font-size: 14px; }
    .foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; }
    .foot .foot-h { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
    .foot ul { list-style: none; margin: 0; padding: 0; }
    .foot li a { display: inline-flex; min-height: 44px; min-width: 44px; align-items: center; color: var(--text); overflow-wrap: anywhere; transition: color var(--dur-base) var(--ease); }
    .foot li a:hover { color: var(--accent); }
    .foot .tag { color: var(--muted); margin-top: 16px; max-width: 30ch; }
    .foot-base { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 13px; }

    
    /* ═══ L1 · LEGAL LAYOUT ══════════════════════════════════════════ */
    .legal { padding-block: clamp(40px, 6vw, 80px) clamp(72px, 9vw, 120px); }
    .legal-grid { display: grid; grid-template-columns: 240px minmax(0, 720px); justify-content: space-between; gap: clamp(40px, 6vw, 96px); align-items: start; }
    .legal-body { min-width: 0; font-size: 17px; line-height: 1.7; color: var(--text); }
    .legal-body h1 { font-size: clamp(40px, 6vw, 72px); font-weight: 800; line-height: 1; letter-spacing: -.04em; }
    .legal-body .updated { font-family: var(--font-mono); font-size: 13px; color: var(--muted); margin: 20px 0 48px; }
    .legal-body h2 { font-size: clamp(24px, 2.4vw, 30px); font-weight: 800; line-height: 1.15; letter-spacing: -.025em; margin: 64px 0 16px; scroll-margin-top: calc(var(--nav-h) + 24px); }
    .legal-body h3 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin: 32px 0 8px; }
    .legal-body p { margin: 0 0 16px; }
    .legal-body ul { margin: 0 0 20px; padding-left: 1.25em; }
    .legal-body li + li { margin-top: 8px; }
    .legal-body li::marker { color: var(--muted); }
    .legal-body strong { color: var(--fg); font-weight: 600; }
    .legal-body a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--dur-base) var(--ease), text-decoration-color var(--dur-base) var(--ease); }
    .legal-body a:hover { color: var(--accent); }
    .note { background: var(--container); border-radius: var(--r-panel); padding: 20px 24px; margin: 0 0 24px; }
    .note p:last-child { margin: 0; }

    /* table of contents: the tour rail's dash, reused */
    .toc { position: sticky; top: calc(var(--nav-h) + 32px); max-height: calc(100svh - var(--nav-h) - 64px); overflow: auto; overscroll-behavior: contain; }
    .toc summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer;
      font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
    .toc summary::-webkit-details-marker { display: none; }
    .toc ol { list-style: none; margin: 4px 0 0; padding: 0; }
    .toc a { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; line-height: 1.3; color: var(--muted); transition: color var(--dur-base) var(--ease); }
    .toc a::before { content: ""; flex: none; width: 12px; height: 2px; border-radius: 2px; background: currentColor; opacity: .4; transition: width var(--enter) var(--ease), opacity var(--dur-base) var(--ease); }
    .toc a:hover { color: var(--fg); }
    .toc a:hover::before { width: 20px; opacity: .8; }
    .toc a[aria-current="true"] { color: var(--fg); font-weight: 600; }
    .toc a[aria-current="true"]::before { width: 28px; opacity: 1; }

    /* ═══ L2 · RESPONSIVE ════════════════════════════════════════════ */
    @media (min-width: 1025px) { .toc summary { cursor: default; } }
    @media (max-width: 1024px) {
      .legal-grid { grid-template-columns: minmax(0, 1fr); }
      .toc { position: static; max-height: none; background: var(--container); border-radius: var(--r-panel); padding: 4px 20px; }
      .toc summary::after { content: "+" / ""; font-size: 18px; letter-spacing: 0; transition: rotate var(--dur-slow) var(--ease); }
      .toc[open] summary::after { rotate: 45deg; }
      .toc ol { padding-bottom: 8px; }
    }
    @media (max-width: 768px) {
      .topnav nav a.link { display: none; }
      .foot-grid { grid-template-columns: 1fr 1fr; }
      .foot-grid > :first-child, .foot-grid > :last-child { grid-column: 1 / -1; }
    }