/* Hexret static landing: built from the app's own stylesheets (hexret-frontend) by the
   docs build. Class names read <CSS module>__<class>. Edit the app, then rebuild. */

/* space-grotesk-latin-ext-400-normal */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/space-grotesk-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;
}
/* space-grotesk-latin-400-normal */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/space-grotesk-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;
}
/* space-grotesk-latin-ext-500-normal */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/space-grotesk-latin-ext-500-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;
}
/* space-grotesk-latin-500-normal */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/space-grotesk-latin-500-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;
}
/* space-grotesk-latin-ext-700-normal */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/space-grotesk-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;
}
/* space-grotesk-latin-700-normal */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/space-grotesk-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;
}
/* inter-latin-ext-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/inter-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;
}
/* inter-latin-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/inter-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;
}
/* inter-latin-ext-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/inter-latin-ext-500-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;
}
/* inter-latin-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/inter-latin-500-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;
}
/* inter-latin-ext-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/inter-latin-ext-600-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;
}
/* inter-latin-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/inter-latin-600-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;
}
/* jetbrains-mono-latin-ext-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/jetbrains-mono-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;
}
/* jetbrains-mono-latin-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/jetbrains-mono-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;
}
/* jetbrains-mono-latin-ext-500-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/jetbrains-mono-latin-ext-500-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;
}
/* jetbrains-mono-latin-500-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/jetbrains-mono-latin-500-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;
}

/* ==== tokens.css ==== */
:root {
  /* Ink navy. The neutrals carry a blue cast rather than sitting on pure black, so a panel
     lifted off the ground reads as a change of material and not just a change of brightness. */
  --bg: #131b28;
  --bg-1: #182232;
  --bg-2: #1e2939;
  --bg-deep: #0b0d12;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.06);
  --surface-hover: rgba(255, 255, 255, 0.075);
  --panel: rgba(30, 41, 57, 0.92);
  --input: rgba(255, 255, 255, 0.045);
  --card-bg: var(--surface);

  /* How strongly a hue washes its own chip/pill. Percentages, consumed by color-mix. */
  --tint-fill: 9%;
  --tint-fill-2: 12%;
  --tint-border: 20%;

  --line: rgba(255, 255, 255, 0.05);
  --line-2: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.17);

  --fg-0: #ffffff;
  --fg: #edf3fa;
  --fg-2: #9dabbc;
  --fg-3: #6b7a8d;
  --fg-muted: #6b7a8d;
  --fg-faint: #4b5868;

  --green: #4be0b1;
  --green-ink: #04120a;
  --green-fill: rgba(75, 224, 177, 0.06);
  --green-border: rgba(75, 224, 177, 0.25);
  --green-hover: rgba(75, 224, 177, 0.12);
  /* Ink for text sitting ON solid --green. Fixed green is bright here and dark on paper, so the
     contrast flips with the theme — a literal would be unreadable in one of them. */
  --green-contrast: #04120a;
  --blue: #79acff;
  --blue-fill: rgba(121, 172, 255, 0.06);
  --blue-border: rgba(121, 172, 255, 0.25);
  --blue-hover: rgba(121, 172, 255, 0.12);
  --blue-contrast: #041018;
  --purple: #b6a0ff;
  --purple-fill: rgba(182, 160, 255, 0.06);
  --purple-border: rgba(182, 160, 255, 0.25);
  --purple-hover: rgba(182, 160, 255, 0.12);
  /* Red Team's accent. */
  --scarlet: #ff7387;
  --scarlet-fill: rgba(255, 115, 135, 0.07);
  --scarlet-border: rgba(255, 115, 135, 0.26);
  --scarlet-hover: rgba(255, 115, 135, 0.13);

  --danger: #ff7387;
  --danger-contrast: #1a0406;
  --danger-fill: rgba(255, 115, 135, 0.08);
  --danger-soft: rgba(255, 115, 135, 0.1);
  --danger-fill-2: rgba(255, 115, 135, 0.12);
  --danger-border: rgba(255, 115, 135, 0.28);
  --danger-glow: rgba(255, 115, 135, 0.5);
  --warn: #ffce65;
  --warn-bright: #ffc06b;
  --info: #79acff;

  --success: #4be0b1;
  --success-fill: rgba(75, 224, 177, 0.1);
  --success-fill-2: rgba(75, 224, 177, 0.12);
  --success-glow: rgba(75, 224, 177, 0.5);

  --amber: #ffce65;
  --amber-fill: rgba(255, 206, 101, 0.1);
  --amber-border: rgba(255, 206, 101, 0.25);
  --amber-hover: rgba(255, 206, 101, 0.15);
  /* primary submit/advance buttons */
  --gold: #ffce65;
  --gold-ink: #20180a;
  /* The two ends of the gold ramp. Gilded surfaces need a highlight and a shadow to read as
     metal rather than as a flat yellow; --gold on its own cannot do both. */
  --gold-soft: #ffda8f;
  --gold-deep: #ae7709;
  --red: #ff7387;
  --red-fill: rgba(255, 115, 135, 0.1);
  --red-border: rgba(255, 115, 135, 0.25);
  --red-hover: rgba(255, 115, 135, 0.15);
  --fire-edge: #8f0f18;
  --fire-outer-base: #b3141f;
  --fire-outer: #e8322a;
  --fire-outer-tip: #ff5a2b;
  --fire-mid-base: #ff7a12;
  --fire-mid-tip: #ffa21f;
  --fire-core-base: #fff2b0;
  --fire-core-tip: #ffd23f;
  --fire-glow: rgba(255, 90, 43, 0.38);
  --side-offensive: #ff7387;
  --side-defensive: #4be0b1;

  --teal: #4bd0d8;
  /* duel accent — the clash rail renders inside the shared run screen, so this cannot live
     scoped to the duel page's own stage */
  --duel: #ff7387;
  --duel-contrast: #1a0406;
  --campaign: #b6a0ff;
  --workflow: #79acff;
  --cve: #ff7387;
  --time-attack: #4be0b1;
  --custom-session: #6fd0e6;
  --simulation: #7fd3e0;
  /* the opponent's identity across every duel surface. Aliased rather than its own ramp: purple
     stopped being a persona accent when Red Team took scarlet, and it is the one hue far from all
     three accents at once — any persona can duel. */
  --foe: var(--purple);
  --medal-gold: #f0d080;
  --medal-gold-bg: rgba(240, 208, 128, 0.16);
  --medal-silver: #c6cada;
  --medal-silver-bg: rgba(198, 202, 218, 0.16);
  --medal-bronze: #f5b57f;
  --medal-bronze-bg: rgba(245, 181, 127, 0.18);

  /* difficulty ramp, 1–4. Its own scale rather than borrowed semantic tokens: --amber and
     --warn-bright are 9° apart and --red and --danger share a hue, so the old ramp read as
     green / orange / orange / red. Lightness carries the steps that hue cannot. */
  --tier-1: #3fb950;
  --tier-2: #ffc85c;
  --tier-3: #ff9838;
  --tier-4: #f0334a;

  /* The paid plan's own colour — kept clear of --amber (a purchasable name colour),
     --medal-bronze and --tier-3, so a PRO mark can never be mistaken for one of those. */
  --plan-pro: #ffa53d;
  --plan-pro-fill: rgba(255, 165, 61, 0.14);
  --plan-pro-border: rgba(255, 165, 61, 0.4);

  --accent: var(--green);
  --accent-fill: var(--green-fill);
  --accent-border: var(--green-border);
  --accent-hover: var(--green-hover);
  --accent-contrast: #04120a;
  --accent-fixed: var(--green);

  --code-panel: rgba(15, 22, 33, 0.95);
  --code-header: var(--panel);
  --code-fg: #c8d4e2;
  --code-gutter: rgb(66, 78, 96);
  --code-keyword: rgb(0, 200, 255);
  --code-function: var(--green);
  --code-string: var(--amber);
  --code-operator: rgb(138, 151, 168);
  --code-comment: var(--fg-3);
  --code-dot-red: var(--red);
  --code-dot-amber: var(--code-string);
  --code-dot-green: var(--green);

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --store-badge-bg: #000000;
  --store-badge-fg: #ffffff;
  --google-fill: #131314;
  --google-stroke: #8e918f;
  --google-text: #e3e3e3;
  --google-logo-ground: #ffffff;
  --google-font: 'Google Sans', 'Roboto', system-ui, sans-serif;
  --google-fs: 14px;
  --google-lh: 20px;
  --google-logo-gap: 10px;

  /* A step down from the pre-redesign scale, following the dashboard: the app reads denser and
     the figures do the shouting. Long-form lesson prose stays at --fs-sm and up, so it is still
     comfortable to read; the dashboard tightens further on its own page. */
  --fs-hero: 52px;
  --fs-display: 36px;
  --fs-price: 44px;
  --fs-h1: 27px;
  --fs-h2: 21px;
  --fs-h3: 16px;
  --fs-h4: 14px;
  --fs-body: 13px;
  --fs-sm: 13px;
  --fs-xs: 12px;
  --fs-mono: 12px;
  --fs-mono-sm: 11px;
  --fs-2xs: 10px;
  --fs-landing-hero: clamp(46px, 8vw, 112px);
  --fs-landing-display: clamp(30px, 3.8vw, 50px);
  --fs-landing-lead: clamp(15px, 1.35vw, 18px);
  --fs-landing-beat: clamp(26px, 3.6vw, 46px);
  --fs-landing-cta: clamp(28px, 3.4vw, 42px);

  --tracking-display: -0.02em;
  --tracking-mono: 0.12em;
  --tracking-label: 0.08em;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --gutter-mobile: 14px;

  /* Rounder than the old UI: the dashboard's panels sit at 18 and its controls at 12–14, and
     every surface that draws from these follows it. */
  --r-1: 8px;
  --r-2: 12px;
  --r-3: 18px;
  --r-pill: 999px;

  --sidebar-rail: 76px;
  --sidebar-expanded: 248px;

  /* The column every page's content sits in, the dashboard included. The shell reserves exactly
     this much, so a page never changes width from route to route. */
  --content-max: 1240px;
  --landing-max: 1200px;
  --landing-header-h: 74px;
  --landing-section-pad: clamp(72px, 9vw, 128px);
  --landing-head-gap: clamp(36px, 5vw, 64px);
  --landing-col-gap: clamp(28px, 5vw, 72px);
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --page-max: var(--content-max);

  /* ── the slab ────────────────────────────────────────────────────────────
     Sidebar and content travel together as one unit. Below the wide breakpoint the slab is pinned
     to the left edge and these resolve to today's layout; above it, the whole assembly centres, so
     the rail stays against the content it navigates instead of stranding itself at the screen
     edge. Content width never changes — only where the slab sits. */
  --sidebar-w: var(--sidebar-rail);
  --slab-w: calc(var(--sidebar-w) + var(--content-max) + 2 * var(--space-8));
  --slab-left: 0px;


  /* Soft relief. A panel sits a shade ABOVE the ground it rests on, and light only confirms
     what colour has already said: a hairline along the top edge, a single shadow beneath. The
     earlier moulded version lit card and ground identically from the top-left, which left the
     sections of a page indistinguishable from one another — the thing this replaces.

     `raised` for anything you can press, `sunk` for anything already pressed, held or filled. */
  --neu-ground: #131b28;
  --neu-surface: #1e2939;
  --neu-surface-2: #273448;
  --neu-well: #182232;
  --neu-hi: rgba(255, 255, 255, 0.08);
  --neu-lo: rgba(3, 8, 19, 0.9);
  /* Lit along the top edge, shaded along the bottom, then dropped: three parts, so a panel
     reads as moulded out of the ground rather than merely tinted against it. */
  --neu-raised:
    inset 0 1px 0 var(--neu-hi),
    inset 0 -1px 0 rgba(3, 8, 19, 0.45),
    0 16px 32px -16px var(--neu-lo);
  --neu-raised-sm:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(3, 8, 19, 0.35),
    0 8px 16px -10px var(--neu-lo);
  /* Seated: the bevel without the drop. The surface is moulded out of the one behind it rather
     than floating above it — for anything that belongs to its container (a rail's current item)
     rather than sitting on top of it. */
  --neu-seated:
    inset 0 1px 0 var(--neu-hi),
    inset 0 -1px 0 rgba(3, 8, 19, 0.45);
  --neu-sunk: inset 0 2px 7px rgba(3, 8, 19, 0.8), inset 0 -1px 0 var(--neu-hi);
  --neu-sunk-sm: inset 0 1px 4px rgba(3, 8, 19, 0.65), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  --glow-accent: 0 0 24px rgba(75, 224, 177, 0.18);

  /* Height of the offline banner while it is in flow, 0 otherwise. Everything that measures
     itself against the viewport subtracts this, so the banner pushes rather than overlaps. */
  --offline-h: 0px;

  --z-sticky: 100;
  --z-nav: 200;
  --z-overlay: 800;
  --z-modal: 900;
  --z-toast: 1000;
}

/* Wide displays: centre the slab rather than the column. Centring the content alone would leave
   the fixed rail marooned at the screen edge, pointing at something 600px away — so the rail comes
   with it, and opens to its full width since the space is there and navigation is the one element
   that gains from it without spreading content. */
@media (min-width: 1920px) {
  :root {
    --sidebar-w: var(--sidebar-expanded);
    --slab-left: max(0px, calc((100vw - var(--slab-w)) / 2));
  }
}

/* Scale the display type down on phones so large headings never dictate width. */
@media (max-width: 640px) {
  :root {
    --fs-hero: 40px;
    --fs-display: 30px;
    --fs-price: 36px;
    --fs-h1: 20px;
    --fs-h2: 20px;
    --fs-h3: 14px;
    --fs-h4: 14px;
    --fs-body: 13px;
    --fs-sm: 13px;
    --fs-xs: 12px;
  }
}

:root[data-mission='blue'] {
  --accent: var(--blue);
  --accent-fill: var(--blue-fill);
  --accent-border: var(--blue-border);
  --accent-hover: var(--blue-hover);
  --accent-contrast: #041018;
  --glow-accent: 0 0 24px rgba(121, 172, 255, 0.18);
}

:root[data-mission='red'] {
  --accent: var(--scarlet);
  --accent-fill: var(--scarlet-fill);
  --accent-border: var(--scarlet-border);
  --accent-hover: var(--scarlet-hover);
  --accent-contrast: #1a0406;
  --glow-accent: 0 0 24px rgba(255, 115, 135, 0.2);
}

/* ==== globals.css ==== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

/* Media never forces the page wider than its container. */
img,
svg,
video,
canvas {
  max-width: 100%;
}

html {
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
  scrollbar-gutter: stable;
  /* No document rubber-band: the sticky Topbar (level/tokens) rides the overscroll
     bounce otherwise, while the fixed menu button stays put. */
  overscroll-behavior-y: none;
}

body {
  min-height: calc(100vh - var(--offline-h));
  min-height: calc(100dvh - var(--offline-h));
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  overscroll-behavior-y: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: 1.1;
  color: var(--fg);
}
h1 {
  font-size: var(--fs-h1);
}
h2 {
  font-size: var(--fs-h2);
}
h3 {
  font-size: var(--fs-h3);
  line-height: 1.2;
}
h4 {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.3;
}
p {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--fg-2);
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
}

@media (max-width: 640px) {
  h2 {
    font-weight: 500;
  }
}

/* ── Typography utilities ─────────────────────────────────────────────
   Type comes from the element (h1–h4, p) or a typography atom (Eyebrow,
   MonoLabel, MetaLabel). These compose ON TOP for secondary body text:
   size + the one allowed muted colour. Layout (margins, max-width) stays
   in each component's own class. */
.muted {
  color: var(--fg-2);
}
.fs-sm {
  font-size: var(--fs-sm);
}
.fs-xs {
  font-size: var(--fs-xs);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  align-items: stretch;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* iOS Safari zooms the viewport when a focused control's text is under 16px, and the page never
   zooms back out. Body text is 13–14px, so every field would trigger it — pin form controls to
   16px on touch devices instead. Not fixed with maximum-scale on the viewport meta: that would
   also take pinch-zoom away from everyone. */
@media (pointer: coarse) {
  input,
  textarea,
  select {
    font-size: 16px;
  }
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::selection {
  background: var(--accent-hover);
  color: var(--fg);
}

#root {
  min-height: calc(100vh - var(--offline-h));
  min-height: calc(100dvh - var(--offline-h));
  isolation: isolate;
  /* Safety net against stray horizontal overflow. `clip` (not `hidden`) does not
     create a scroll container, so it never breaks the sticky Topbar. */
  overflow-x: clip;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--code-comment);
  font-style: italic;
}
.token.keyword,
.token.boolean,
.token.constant,
.token.atrule,
.token.important {
  color: var(--code-keyword);
}
.token.function,
.token.class-name,
.token.builtin {
  color: var(--code-function);
}
.token.string,
.token.char,
.token.number,
.token.regex,
.token.attr-value {
  color: var(--code-string);
}
.token.operator,
.token.entity,
.token.url {
  color: var(--code-operator);
}
.token.punctuation,
.token.property,
.token.parameter,
.token.variable,
.token.attr-name,
.token.tag {
  color: var(--code-fg);
}
.token.decorator,
.token.annotation {
  color: var(--code-fg);
}

/* ==== Button.module.css ==== */
.Button__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 0;
  border-radius: 14px;
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease,
    filter 0.15s ease,
    opacity 0.15s ease;
}

/* Every button answers the pointer the same way: it presses into the surface. No lift, no glow. */
.Button__btn:not(:disabled):hover,
.Button__btn:not(:disabled):active {
  box-shadow: var(--neu-sunk-sm);
  filter: none;
}

.Button__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* Busy, not unavailable: a loading button keeps its full colour and an ordinary cursor. */
.Button__btn[data-loading] {
  opacity: 1;
  cursor: default;
}

.Button__sm {
  padding: 0 var(--space-3);
  height: 34px;
}
.Button__md {
  padding: 0 var(--space-4);
  height: 42px;
}
.Button__lg {
  padding: 0 var(--space-5);
  height: 50px;
}

.Button__full {
  width: 100%;
}

.Button__icon {
  display: inline-flex;
  align-items: center;
}

.Button__primary {
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
  box-shadow: var(--neu-raised-sm);
}

.Button__accent {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--fg);
  box-shadow: var(--neu-raised-sm);
}

.Button__surface {
  background: rgba(255, 255, 255, 0.04);
  color: var(--fg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.Button__raised {
  border-radius: 12px;
  background: var(--neu-surface);
  box-shadow: var(--neu-raised-sm);
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.04em;
}
.Button__raised:not(:disabled):hover {
  color: var(--fg);
}

.Button__ghost {
  background: var(--neu-surface);
  box-shadow: var(--neu-raised-sm);
  color: var(--fg);
}

/* Something needs attention but nothing is broken or destructive — a card to update, not a
   record to delete. Amber sits between the accent and danger on purpose. */
.Button__warn {
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border-color: color-mix(in srgb, var(--warn) 42%, transparent);
  color: var(--warn);
}

.Button__danger {
  background: var(--danger-fill);
  border-color: var(--danger-border);
  color: var(--danger);
}

/* Drawn in the button's own ink, so it shows on every fill — the accent spinner vanished on primary. */
.Button__btn .Button__spinner {
  border-color: color-mix(in srgb, currentColor 28%, transparent);
  border-top-color: currentColor;
}

/* ==== BackButton.module.css ==== */
.BackButton__back {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  width: fit-content;
  height: 32px;
  flex: 0 0 auto;
  padding: 0 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 0;
  color: var(--fg-2);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.06em;
  transition: background 0.15s ease;
}
.BackButton__back:hover {
  background: var(--surface-hover);
}
.BackButton__arrow {
  display: none;
}

@media (max-width: 768px) {
  .BackButton__compact {
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--r-2);
    background: var(--neu-surface);
    box-shadow: var(--neu-raised-sm);
    color: var(--fg);
  }
  .BackButton__compact:hover {
    background: var(--neu-surface);
  }
  .BackButton__compact:active {
    box-shadow: var(--neu-sunk-sm);
  }
  .BackButton__compact .BackButton__arrow {
    display: block;
  }
  .BackButton__compact .BackButton__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ==== Reveal.module.css ==== */
.Reveal__reveal {
  animation: Reveal__reveal 240ms ease-out backwards;
}

@keyframes Reveal__reveal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .Reveal__reveal {
    animation: none;
  }
}

/* ==== Surface.module.css ==== */
.Surface__surface {
  border: 1px solid var(--line);
  border-radius: var(--r-3);
}

.Surface__card {
  background: var(--card-bg);
}

.Surface__panel {
  background: var(--panel);
  box-shadow: var(--neu-raised);
}

.Surface__inset {
  background: var(--neu-well);
  box-shadow: var(--neu-sunk-sm);
  border-radius: var(--r-2);
}

.Surface__interactive {
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  cursor: pointer;
}
.Surface__interactive:hover {
  background: var(--surface-hover);
  border-color: var(--line-2);
}

.Surface__accent {
  border-color: var(--accent-border);
  background: var(--accent-fill);
}

/* ==== MonoLabel.module.css ==== */
.MonoLabel__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
}

/* Tracking that reads as deliberate at desktop sizes just eats width on a phone, where these
   labels are already at the 10px floor and are the first thing to wrap or overflow. */
@media (max-width: 640px) {
  .MonoLabel__label {
    letter-spacing: normal;
  }
}

.MonoLabel__md {
  font-size: var(--fs-mono);
}
.MonoLabel__sm {
  font-size: var(--fs-mono-sm);
}

.MonoLabel__default {
  color: var(--fg-2);
}
.MonoLabel__accent {
  color: var(--accent);
}
.MonoLabel__muted {
  color: var(--fg-2);
}

/* ==== MonoText.module.css ==== */
.MonoText__mono {
  font-family: var(--font-mono);
}

.MonoText__md {
  font-size: var(--fs-mono);
}
.MonoText__sm {
  font-size: var(--fs-mono-sm);
}

.MonoText__muted {
  color: var(--fg-2);
}
.MonoText__strong {
  color: var(--fg);
}
.MonoText__accent {
  color: var(--accent);
}

/* ==== Eyebrow.module.css ==== */
.Eyebrow__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-2);
}
.Eyebrow__accent {
  color: var(--accent);
}
.Eyebrow__strong {
  color: var(--fg);
}

/* The leading rule. currentColor so it always fades out of whatever tone the eyebrow is wearing. */
.Eyebrow__dash::before {
  content: '';
  width: 18px;
  height: 2px;
  flex-shrink: 0;
  border-radius: 2px;
  background: linear-gradient(to right, currentColor, transparent);
}

/* ==== Tag.module.css ==== */
.Tag__tag {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--space-2);
  border: 0;
  border-radius: var(--r-1);
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-2);
}

.Tag__accent {
  border-color: var(--accent-border);
  background: var(--accent-fill);
  color: var(--accent);
}

.Tag__colored {
  padding: 5px var(--space-3);
  border-radius: 10px;
  background: color-mix(in srgb, var(--tc) 8%, var(--neu-surface));
  box-shadow: var(--neu-raised-sm);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-mono);
  color: var(--tc);
}

/* ==== HexLogo.module.css ==== */
.HexLogo__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.HexLogo__markBox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.HexLogo__mark {
  display: block;
  object-fit: contain;
  filter: var(
    --logo-mark-filter,
    drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 28%, transparent))
  );
}

.HexLogo__markBox .HexLogo__mark {
  width: 100%;
  height: 100%;
}

.HexLogo__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--logo-word-fs, var(--fs-h3));
  letter-spacing: var(--tracking-display);
  color: var(--fg);
  white-space: nowrap;
  opacity: var(--nav-label-opacity, 1);
  transition: opacity 0.18s ease;
}

.HexLogo__word2 {
  color: var(--accent);
}

/* ==== SlideTabs.module.css ==== */
.SlideTabs__bar {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 5px;
  border-radius: var(--r-pill);
  background: var(--neu-well);
  border: 0;
  box-shadow: var(--neu-sunk-sm, none);
}
/* Wrapped onto more than one row: the pill radius belongs to a single line of tabs, and at four
   rows it draws a stadium around the block. The buttons and the thumb keep their pills. */
.SlideTabs__bar[data-wrapped] {
  border-radius: var(--r-3);
}

/* Equal shares of the full container. nowrap so two tabs never stack into two rows, which the
   measured thumb would then have to chase. */
.SlideTabs__bar[data-full] {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
}
.SlideTabs__bar[data-full] .SlideTabs__btn {
  flex: 1;
  min-width: 0;
}
.SlideTabs__thumb {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--seg-c, var(--accent)) 16%, transparent);
  border: 0;
  box-shadow: var(--neu-raised-sm, none);
  pointer-events: none;
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.2s ease,
    border-color 0.2s ease;
}
.SlideTabs__btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.18s ease;
}
.SlideTabs__btn:not([data-active]):hover {
  color: var(--fg);
}
.SlideTabs__bar[data-hover-tint] .SlideTabs__btn {
  transition:
    color 0.18s ease,
    background 0.18s ease;
}
.SlideTabs__bar[data-hover-tint] .SlideTabs__btn:not([data-active]):not(:disabled):hover {
  background: color-mix(in srgb, var(--tab-c, var(--accent)) 14%, transparent);
  color: var(--tab-c, var(--accent));
}
.SlideTabs__btn[data-active] {
  color: var(--seg-c, var(--accent));
}
.SlideTabs__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* No thumb to chase several picks, so each selected tab lifts out of the groove on its own. */
.SlideTabs__bar[data-multi] .SlideTabs__btn[data-active] {
  background: color-mix(in srgb, var(--seg-c, var(--accent)) 16%, transparent);
  border-color: transparent;
  box-shadow: var(--neu-raised-sm, none);
}
@media (prefers-reduced-motion: reduce) {
  .SlideTabs__thumb {
    transition: none;
  }
}
.SlideTabs__bar[data-scroll] {
  display: flex;
  flex-wrap: nowrap;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.SlideTabs__bar[data-scroll]::-webkit-scrollbar {
  display: none;
}
.SlideTabs__bar[data-scroll] .SlideTabs__btn {
  flex: none;
}

/* ==== TerminalPanel.module.css ==== */
.TerminalPanel__panel {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: var(--code-panel);
  border: 1px solid var(--line-2);
  box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 0px 1px;
}

/* A grid, not a flex row. As flex with `flex: 1` (basis 0%) the left side had nothing to grow
   into once the note was long, stayed at zero width, and let the dots overflow it — landing
   under the note, which started at the same x. An `auto` column can only shrink to its own
   min-content, so the dots always have their 48px, and `minmax(0, 1fr)` makes the note the
   only thing that gives way. */
.TerminalPanel__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding: 10px 16px;
  flex-shrink: 0;
  background: var(--code-header);
  border-bottom: 1px solid var(--line);
}

.TerminalPanel__headLeft {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* Never shrinks. As a flex item with the default shrink, a long note squeezed this to nothing
   and the circles spilled out under the text instead of sitting beside it. */
.TerminalPanel__dots {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
}

.TerminalPanel__dot {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  opacity: 0.8;
}
.TerminalPanel__dot[data-c='red'] {
  background: var(--code-dot-red);
}
.TerminalPanel__dot[data-c='amber'] {
  background: var(--code-dot-amber);
}
.TerminalPanel__dot[data-c='green'] {
  background: var(--code-dot-green);
}

.TerminalPanel__file {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--surface-2);
}
.TerminalPanel__file > :not(.TerminalPanel__chevron) {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.TerminalPanel__chevron {
  display: inline-flex;
  color: var(--fg-2);
}


.TerminalPanel__headRight {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
  /* The grid column places it; margin-left:auto was what pulled it back against the left side
     when that column had collapsed. */
  grid-column: 2;
}
/* Its own row beneath the filename, full text, wrapped. Sharing the top row meant either
   truncating it — which needs a reveal, and every reveal either shifted the bar or hid the
   text behind a tap — or letting it crush the traffic lights. A row of its own needs neither. */
.TerminalPanel__note {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  line-height: 1.55;
  color: var(--fg-2);
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Shrinks with its column. Non-shrinking, a long context string ("Python · Flask · PostgreSQL
   (psycopg)") grew past the cell, and `justify-content: flex-end` then spilled the overflow
   LEFTWARDS — straight over the filename chip. */
.TerminalPanel__lang {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.TerminalPanel__statusDot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--code-dot-amber);
  box-shadow: var(--code-dot-amber) 0px 0px 4px;
}

.TerminalPanel__langLabel {
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
  /* Wraps rather than truncates: every word in it names a real part of the stack. */
  white-space: normal;
  overflow-wrap: anywhere;
  color: var(--fg-2);
}

/* Too narrow for two columns: the badge takes a line of its own under the filename instead of
   fighting it for the same row. */
@media (max-width: 640px) {
  .TerminalPanel__header {
    grid-template-columns: minmax(0, 1fr);
  }
  .TerminalPanel__headRight {
    grid-column: 1;
    justify-content: flex-start;
  }
  .TerminalPanel__langLabel {
    text-align: left;
  }
}

/* ==== CodeBlock.module.css ==== */
.CodeBlock__body {
  overflow-x: auto;
  padding-block: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.8;
}
/* collapsed: show --collapse-rows rows (20 desktop / 15 mobile, set by the component) and scroll
   inside the terminal; expanded: no cap, page scrolls */
.CodeBlock__body[data-collapsed='true'] {
  max-height: calc(1.8em * var(--collapse-rows, 20) + var(--space-2) * 2);
  overflow-y: auto;
}
.CodeBlock__status {
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--line);
  background: var(--code-header);
}
.CodeBlock__expand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 7px 12px;
  border: 0;
  border-top: 1px solid var(--line);
  background: var(--surface);
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.CodeBlock__expand:hover {
  background: var(--surface-2);
  color: var(--fg);
}
.CodeBlock__expandIcon {
  transition: transform 0.15s ease;
}
.CodeBlock__expand[aria-expanded='true'] .CodeBlock__expandIcon {
  transform: rotate(180deg);
}

.CodeBlock__row {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 4px solid transparent;
  background: transparent;
  text-align: left;
  line-height: 1.8;
  cursor: default;
  transition: background 0.12s ease;
}
.CodeBlock__row[data-selectable='true'] {
  cursor: pointer;
  border-left-color: var(--line-2);
}
.CodeBlock__row[data-selectable='true']:hover:not(:disabled) {
  background: var(--surface);
}
.CodeBlock__row[data-selectable='true']:disabled {
  cursor: default;
}
/* hintBarOnly (config audit): no idle left bar until a line is revealed as a hint target,
   then it shows the same subtle gray bar. Picked/correct/incorrect states still win. */
.CodeBlock__bodyHintBar .CodeBlock__row[data-selectable='true'][data-state='idle'] {
  border-left-color: transparent;
}
.CodeBlock__bodyHintBar .CodeBlock__row[data-hint][data-state='idle'] {
  border-left-color: var(--line-2);
}
.CodeBlock__row[data-state='picked'] {
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  border-left-color: color-mix(in srgb, var(--fg) 45%, transparent);
}
.CodeBlock__row[data-state='correct'] {
  background: var(--success-fill-2);
  border-left-color: var(--success);
}
.CodeBlock__row[data-state='incorrect'] {
  background: var(--danger-fill-2);
  border-left-color: var(--danger);
}
.CodeBlock__row[data-state='missed'] {
  background: var(--danger-fill-2);
  border-left-color: var(--danger);
}
.CodeBlock__row[data-state='falsepositive'] {
  background: color-mix(in srgb, var(--amber) 10%, transparent);
  border-left-color: var(--amber);
}
.CodeBlock__tag {
  flex-shrink: 0;
  align-self: center;
  padding: 0 16px 0 8px;
}

.CodeBlock__gutter {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 44px;
  padding: 0 12px 0 12px;
  text-align: right;
  font-size: var(--fs-mono-sm);
  color: var(--code-gutter);
  user-select: none;
}

.CodeBlock__src {
  flex: 1;
  min-width: 0;
  padding-right: 24px;
  color: var(--code-fg);
  white-space: pre;
  tab-size: 4;
}

@media (max-width: 768px) {
  .CodeBlock__gutter {
    width: 28px;
    padding: 0 6px 0 4px;
    align-self: flex-start;
  }
  /* Wrap long lines instead of scrolling the terminal sideways. Purely visual — a wrapped
     row is still one line, and clicking it still submits its original line number. */
  .CodeBlock__body {
    overflow-x: hidden;
  }
  .CodeBlock__src {
    padding-right: 12px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .CodeBlock__body[data-scroll-x] {
    overflow-x: auto;
  }
  .CodeBlock__body[data-scroll-x] .CodeBlock__row {
    width: max-content;
    min-width: 100%;
  }
  .CodeBlock__body[data-scroll-x] .CodeBlock__src {
    padding-right: 24px;
    white-space: pre;
    overflow-wrap: normal;
  }
}

/* ==== PlanCards.module.css ==== */
/* The plan wall stays green whatever persona is signed in: it sells one product, and a red or
   blue Pro card would read as a persona feature rather than the plan. */
.PlanCards__cards {
  --plan-accent: var(--green);
  --plan-ink: var(--green-ink);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
}

.PlanCards__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: var(--space-4);
  align-content: start;
  padding: var(--space-5);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--fg) 4%, transparent),
      transparent 55%
    ),
    var(--bg-2);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--fg) 8%, transparent),
    0 14px 34px -22px rgb(0 0 0 / 0.9);
  color: inherit;
  text-align: left;
  font: inherit;
  transition: box-shadow 0.2s ease;
}

button.PlanCards__card {
  cursor: pointer;
}
button.PlanCards__card:focus-visible {
  outline: 2px solid var(--plan-accent);
  outline-offset: 2px;
}
button.PlanCards__card:not(.PlanCards__cardPro):not(:disabled):hover .PlanCards__action {
  background: var(--neu-well);
}
button.PlanCards__card:disabled {
  cursor: progress;
}
.PlanCards__card::before,
.PlanCards__card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  padding: 2px;
  background: radial-gradient(
    200px circle at var(--mx, -200px) var(--my, -200px),
    var(--tc, var(--plan-accent)),
    transparent 68%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.PlanCards__card::after {
  padding: 3px;
  filter: blur(8px);
}
button.PlanCards__card:hover:not(:disabled)::before,
.PlanCards__card[data-lift]:hover::before {
  opacity: 1;
}
button.PlanCards__card:hover:not(:disabled)::after,
.PlanCards__card[data-lift]:hover::after {
  opacity: 0.85;
}
button.PlanCards__card:not(:disabled):hover,
.PlanCards__card[data-lift]:hover {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--fg) 10%, transparent),
    0 20px 44px -20px rgb(0 0 0 / 0.95),
    0 0 40px color-mix(in srgb, var(--tc, var(--plan-accent)) 10%, transparent);
}

.PlanCards__cardPro {
  background:
    radial-gradient(
      130% 100% at 85% 0%,
      color-mix(in srgb, var(--plan-accent) 16%, transparent),
      transparent 62%
    ),
    var(--bg-1);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--plan-accent) 30%, transparent),
    0 22px 54px -24px color-mix(in srgb, var(--plan-accent) 65%, transparent);
}
button.PlanCards__cardPro:not(:disabled):hover,
.PlanCards__cardPro[data-lift]:hover {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--plan-accent) 40%, transparent),
    0 28px 64px -22px color-mix(in srgb, var(--plan-accent) 80%, transparent);
}

.PlanCards__card[data-selected] {
  border-color: var(--plan-accent);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--plan-accent) 55%, transparent),
    0 16px 40px -24px color-mix(in srgb, var(--plan-accent) 70%, transparent);
}
/* The chosen card says so in words as well as colour: two cards that differ only by a ring are
   easy to misread at a glance, and the ring alone cannot be seen by everyone. */
.PlanCards__badgeChosen {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--plan-accent);
  color: var(--plan-ink);
  font-weight: 700;
}
.PlanCards__cardPro[data-selected] {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--plan-accent) 30%, transparent),
    0 0 0 2px color-mix(in srgb, var(--plan-accent) 55%, transparent),
    0 22px 54px -24px color-mix(in srgb, var(--plan-accent) 70%, transparent);
}

.PlanCards__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.PlanCards__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
}
.PlanCards__cardPro .PlanCards__name {
  color: var(--plan-accent);
}

.PlanCards__badgePro {
  color: var(--plan-accent);
}

.PlanCards__badge {
  flex-shrink: 0;
  line-height: 1;
}

.PlanCards__rows {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.PlanCards__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.PlanCards__row:last-child {
  border-bottom: 0;
}

.PlanCards__key {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--fg-2);
}

.PlanCards__value {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
  text-align: right;
}
.PlanCards__cardPro .PlanCards__value {
  color: var(--plan-accent);
  font-weight: 600;
}
.PlanCards__cardPro .PlanCards__key {
  color: var(--fg);
}
.PlanCards__cardPro .PlanCards__row {
  border-bottom-color: color-mix(in srgb, var(--plan-accent) 16%, transparent);
}

/* A row the plan does not get: muted, with the lock doing the work the wording repeats. */
.PlanCards__value[data-denied] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-2);
}

.PlanCards__card .PlanCards__action {
  justify-self: center;
  min-width: 200px;
  max-width: 100%;
  background: var(--neu-surface-2);
  box-shadow: var(--neu-raised-sm);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--fg);
}
span.PlanCards__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 42px;
  padding: 0 var(--space-4);
  border-radius: 14px;
}
button.PlanCards__card:not(:disabled):hover .PlanCards__action {
  box-shadow: var(--neu-sunk-sm);
}
.PlanCards__cardPro .PlanCards__action {
  border-color: transparent;
  background: var(--plan-accent);
  color: var(--plan-ink);
  font-weight: 700;
  box-shadow: 0 10px 28px -14px color-mix(in srgb, var(--plan-accent) 85%, transparent);
}
button.PlanCards__cardPro:not(:disabled):hover .PlanCards__action {
  background: color-mix(in srgb, var(--plan-accent) 88%, #fff);
}
.PlanCards__card[data-selected] .PlanCards__action {
  border-color: color-mix(in srgb, var(--plan-accent) 55%, transparent);
}
.PlanCards__cardPro[data-selected] .PlanCards__action {
  color: var(--plan-ink);
}

.PlanCards__cards[data-count='3'] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1200px;
}

@media (max-width: 960px) {
  .PlanCards__cards[data-count='3'] {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
}

@media (max-width: 640px) {
  .PlanCards__cards {
    grid-template-columns: 1fr;
  }
  .PlanCards__card .PlanCards__action {
    justify-self: stretch;
    min-width: 0;
  }
}


.PlanCards__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.PlanCards__crest {
  display: inline-flex;
  width: 24px;
  height: 27px;
  flex-shrink: 0;
  color: var(--fg-2);
  opacity: 0.55;
}
.PlanCards__crest[data-sealed] {
  color: var(--plan-accent);
  opacity: 1;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--plan-accent) 45%, transparent));
}
.PlanCards__crest svg {
  width: 100%;
  height: 100%;
}
.PlanCards__watermark {
  position: absolute;
  right: -46px;
  bottom: -40px;
  width: 210px;
  z-index: 0;
  color: var(--plan-accent);
  opacity: 0.1;
  pointer-events: none;
}
.PlanCards__watermark svg {
  width: 100%;
  height: auto;
}
.PlanCards__head,
.PlanCards__rows,
.PlanCards__action {
  position: relative;
  z-index: 1;
}

.PlanCards__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-height: var(--fs-price);
  position: relative;
  z-index: 1;
}

.PlanCards__billed {
  position: relative;
  z-index: 1;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--fg-2);
}

.PlanCards__priceSkeleton {
  display: flex;
  align-items: center;
  height: var(--fs-price);
  position: relative;
  z-index: 1;
}

.PlanCards__amount {
  font-family: var(--font-display);
  font-size: var(--fs-price);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}

.PlanCards__period {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--fg-2);
}

/* Sits under the plan's own action, in the card's accent, so "Your plan" is not read as
   open-ended when it has a stop date. */
.PlanCards__endsOn {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--amber);
}

/* ==== CardTypeHead.module.css ==== */
.CardTypeHead__type {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.CardTypeHead__glyph {
  flex-shrink: 0;
  color: var(--card-accent);
  font-size: var(--fs-h3);
  line-height: 1;
}
.CardTypeHead__lines {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}
.CardTypeHead__venue {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--fg-2);
}
.CardTypeHead__name {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 560px) {
  .CardTypeHead__type[data-dense] .CardTypeHead__venue {
    display: none;
  }
  .CardTypeHead__type[data-dense] .CardTypeHead__glyph {
    font-size: var(--fs-body);
  }
}

/* ==== SlideSwap.module.css ==== */
.SlideSwap__swap {
  overflow: hidden;
  transition: height 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.SlideSwap__slide {
  animation: SlideSwap__slideSwapNext 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.SlideSwap__slide[data-dir='prev'] {
  animation-name: SlideSwap__slideSwapPrev;
}
@keyframes SlideSwap__slideSwapNext {
  from {
    opacity: 0;
    transform: translateX(48px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
@keyframes SlideSwap__slideSwapPrev {
  from {
    opacity: 0;
    transform: translateX(-48px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .SlideSwap__swap {
    transition: none;
  }
  .SlideSwap__slide,
  .SlideSwap__slide[data-dir='prev'] {
    animation: SlideSwap__slideSwapFade 0.2s ease both;
  }
}
@keyframes SlideSwap__slideSwapFade {
  from {
    opacity: 0;
  }
}

/* ==== DifficultyDots.module.css ==== */
.DifficultyDots__dots {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  vertical-align: middle;
}
.DifficultyDots__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line-2);
}
.DifficultyDots__on {
  background: var(--c);
}

/* ==== HexInline.module.css ==== */
/* HexInline v2 visuals — same design tokens as the walkthrough-legacy styles
   (lesson.module.css .wtInlineCode / .wtSev), so changing a theme color reflects
   in both profiles. Only the [[link:]] affordance is new. */

.HexInline__code {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--code-string);
}

.HexInline__sev {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
}
.HexInline__sev[data-sev='safe'] {
  color: var(--green);
}
.HexInline__sev[data-sev='danger'] {
  color: var(--red);
}
.HexInline__sev[data-sev='warn'] {
  color: var(--amber);
}
.HexInline__sev[data-sev='info'] {
  color: var(--info);
}

/* Glossary link: the term inherits its surroundings completely (color, size,
   weight — safe inside prose and titles alike); the affordance is ONLY the wide
   spaced dashes underneath ("_ _ _"), muted grey, warming to accent on hover.
   Deliberately not hyperlink language. Drawn with a repeating gradient because
   `text-decoration: dashed` has no dash-size control; box-decoration-break keeps
   the dashes on every line when the term wraps. A button for keyboard + SR access. */
.HexInline__link {
  --dash-color: color-mix(in srgb, var(--fg-muted) 75%, transparent);
  display: inline;
  padding: 0 1px 1px;
  margin: 0;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: help;
  /* Percentage stops keep the dash:gap rhythm constant while `round` flexes the
     ~10px tile so a WHOLE number of dashes always fits the term's width — no
     clipped half-dash at the end, whatever the text length or font size. The
     tile is half-gap|dash|half-gap (not dash|gap) so the row is symmetric:
     both ends finish with the same half-gap and the dashes sit centered. */
  background-image: linear-gradient(
    90deg,
    transparent 0 20%,
    var(--dash-color) 20% 80%,
    transparent 80% 100%
  );
  background-size: 10px 2px;
  background-repeat: round no-repeat;
  background-position: 0 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.HexInline__link:hover {
  --dash-color: var(--accent);
}
.HexInline__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ==== landing.module.css ==== */
.landing__page {
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  overflow-x: clip;
}

.landing__wrap {
  width: min(var(--landing-max), 100% - 2 * var(--space-10));
  margin-inline: auto;
}

.landing__section {
  position: relative;
  padding-block: var(--landing-section-pad);
  scroll-margin-top: var(--landing-header-h);
}

.landing__ground {
  background: var(--neu-ground);
}

.landing__head {
  display: grid;
  gap: var(--space-4);
  max-width: 760px;
  margin-bottom: var(--landing-head-gap);
}

.landing__headCenter {
  margin-inline: auto;
  justify-items: center;
  text-align: center;
}

.landing__display {
  font-size: var(--fs-landing-display);
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.landing__lead {
  max-width: 62ch;
  font-size: var(--fs-landing-lead);
  line-height: 1.6;
  color: var(--fg-2);
  text-wrap: pretty;
}

.landing__accent {
  color: var(--accent);
}

.landing__muted {
  color: var(--fg-2);
}

@media (max-width: 640px) {
  .landing__wrap {
    width: calc(100% - 2 * var(--gutter-mobile));
  }
  .landing__display {
    font-weight: 700;
  }
}

/* ==== LandingHeader.module.css ==== */
.LandingHeader__header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  border-bottom: 1px solid transparent;
  transition:
    background 0.25s,
    border-color 0.25s,
    backdrop-filter 0.25s;
}

.LandingHeader__header[data-scrolled] {
  background: color-mix(in srgb, var(--neu-ground) 70%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--line);
}

.LandingHeader__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--landing-header-h);
}

.LandingHeader__brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  --logo-word-fs: var(--fs-h2);
}

.LandingHeader__pillnav {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.LandingHeader__pillnav a {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--r-pill);
  color: var(--fg-2);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  transition:
    color 0.15s,
    background 0.15s;
}

.LandingHeader__pillnav a:hover,
.LandingHeader__pillnav a:focus-visible {
  color: var(--fg);
  background: var(--surface-2);
}

.LandingHeader__cta {
  justify-self: end;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: center;
  gap: var(--space-2);
}

.LandingHeader__burger {
  display: none;
  justify-self: end;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
}

.LandingHeader__sheet {
  display: none;
}

@media (max-width: 1100px) {
  .LandingHeader__bar {
    grid-template-columns: 1fr auto;
  }
  .LandingHeader__pillnav,
  .LandingHeader__cta {
    display: none;
  }
  .LandingHeader__burger {
    display: grid;
  }
  .LandingHeader__sheet {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-nav) + 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg);
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    visibility: hidden;
    transition:
      clip-path 0.3s var(--ease-out-expo),
      opacity 0.2s ease,
      visibility 0s linear 0.3s;
  }
  .LandingHeader__sheet[data-open] {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    visibility: visible;
    transition:
      clip-path 0.3s var(--ease-out-expo),
      opacity 0.2s ease;
  }
  .LandingHeader__sheetBody {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding-block: var(--space-3)
      max(var(--space-5), env(safe-area-inset-bottom));
  }
  .LandingHeader__sheetIntro {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .LandingHeader__term {
    display: flex;
    flex-direction: column;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--fs-h4);
    line-height: 1.85;
    color: var(--fg-2);
  }
  .LandingHeader__termLine {
    display: block;
  }
  .LandingHeader__termLink {
    display: flex;
    align-items: center;
    gap: 1ch;
    min-height: 44px;
    margin-inline: calc(-1 * var(--space-2));
    padding-inline: var(--space-2);
    border-radius: var(--r-1);
    color: var(--fg);
    text-decoration: none;
    transition:
      color 0.15s,
      background 0.15s;
  }
  .LandingHeader__termLink:hover,
  .LandingHeader__termLink:focus-visible,
  .LandingHeader__termLink:active {
    color: var(--accent);
    background: var(--surface-2);
  }
  .LandingHeader__prompt {
    color: var(--accent);
  }
  .LandingHeader__caret {
    display: inline-block;
    width: 1ch;
    height: 1.25em;
    vertical-align: text-bottom;
    background: var(--accent);
    animation: LandingHeader__blink 1.1s steps(1) infinite;
  }
  .LandingHeader__sheetRow {
    display: flex;
    gap: var(--space-2);
    margin-top: auto;
  }
  .LandingHeader__sheetBtn {
    flex: 1;
  }
}

@keyframes LandingHeader__blink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .LandingHeader__header,
  .LandingHeader__pillnav a,
  .LandingHeader__sheet,
  .LandingHeader__sheet[data-open],
  .LandingHeader__termLink {
    transition: none;
  }
  .LandingHeader__caret {
    animation: none;
  }
}

@media (max-width: 1100px) and (max-height: 760px), (max-width: 400px) {
  .LandingHeader__sheetBody {
    gap: var(--space-3);
    padding-block: 0 max(var(--space-3), env(safe-area-inset-bottom));
  }
  .LandingHeader__sheetIntro {
    gap: var(--space-1);
  }
  .LandingHeader__sheetTitle {
    font-size: var(--fs-h1);
  }
  .LandingHeader__sheetLead {
    font-size: var(--fs-sm);
  }
  .LandingHeader__term {
    padding-block: var(--space-2);
    font-size: var(--fs-body);
    line-height: 1.5;
  }
  .LandingHeader__termLink {
    min-height: 32px;
  }
}

/* ==== HeroDashboard.module.css ==== */
.HeroDashboard__app {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  min-height: 560px;
  background: var(--neu-ground);
  color: var(--fg);
  font-size: var(--fs-xs);
  text-align: left;
  user-select: none;
  pointer-events: none;
}

.HeroDashboard__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  border-right: 1px solid var(--line);
  background: var(--neu-well);
}

.HeroDashboard__railMark {
  display: grid;
  place-items: center;
  margin-bottom: var(--space-3);
}

.HeroDashboard__railItem {
  display: grid;
  place-items: center;
  width: 42px;
  height: 38px;
  border-radius: var(--r-2);
  color: var(--fg-2);
}

.HeroDashboard__railItem[data-on] {
  background: var(--neu-surface);
  box-shadow: var(--neu-seated);
  color: var(--accent);
}

.HeroDashboard__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.HeroDashboard__topbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 52px;
  padding: 0 var(--space-6);
  border-bottom: 1px solid var(--line);
}

.HeroDashboard__level {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.HeroDashboard__levelWord {
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

.HeroDashboard__levelDial,
.HeroDashboard__levelNum,
.HeroDashboard__topMark {
  display: none;
}

.HeroDashboard__levelDial {
  position: relative;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) 74%, var(--line-2) 0);
}

.HeroDashboard__levelDial::before {
  content: '';
  position: absolute;
  inset: 2.5px;
  border-radius: 50%;
  background: var(--bg);
}

.HeroDashboard__levelNum {
  color: var(--fg);
  font-weight: 600;
  font-size: var(--fs-xs);
}

.HeroDashboard__levelChip {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--accent) 12%, var(--neu-surface));
  box-shadow: var(--neu-raised-sm);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 700;
}

.HeroDashboard__xp {
  position: relative;
  width: 180px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--neu-well);
  box-shadow: var(--neu-sunk-sm);
  overflow: hidden;
}

.HeroDashboard__xpFill {
  position: absolute;
  inset: 0 26% 0 0;
  border-radius: inherit;
  background: var(--accent);
}

.HeroDashboard__xpText {
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  white-space: nowrap;
}

.HeroDashboard__topRight {
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
}

.HeroDashboard__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--pc) 8%, var(--neu-surface));
  box-shadow: var(--neu-raised-sm);
  color: var(--pc);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 700;
}

.HeroDashboard__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  grid-template-areas:
    'greeting greeting'
    'main side';
  column-gap: var(--space-6);
  row-gap: var(--space-3);
  padding: var(--space-5) var(--space-6) var(--space-8);
}

.HeroDashboard__greeting {
  grid-area: greeting;
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
}

.HeroDashboard__name {
  color: var(--accent);
}

.HeroDashboard__main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.HeroDashboard__side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.HeroDashboard__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.HeroDashboard__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.HeroDashboard__sectionTitle {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--fg-0);
}

.HeroDashboard__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
  padding: var(--space-4);
  border-radius: var(--r-3);
  background: var(--neu-surface);
  box-shadow: var(--neu-raised);
}

.HeroDashboard__continue {
  background: linear-gradient(
      160deg,
      color-mix(in srgb, var(--blue) 10%, transparent),
      transparent 60%
    ),
    var(--neu-surface);
}

.HeroDashboard__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

.HeroDashboard__cardTitle {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
}

.HeroDashboard__coverageHead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.HeroDashboard__label {
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

.HeroDashboard__mono {
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
}

.HeroDashboard__track {
  position: relative;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--neu-well);
  box-shadow: var(--neu-sunk-sm);
  overflow: hidden;
}

.HeroDashboard__trackFill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: var(--blue);
}

.HeroDashboard__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  align-self: flex-start;
  margin-top: auto;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--r-2);
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.HeroDashboard__btnAmber {
  background: var(--amber);
  color: var(--gold-ink);
}

.HeroDashboard__modes {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--r-2);
  background: var(--neu-well);
  box-shadow: var(--neu-sunk-sm);
}

.HeroDashboard__mode {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-1);
  border-radius: var(--r-1);
  color: var(--fg-2);
  font-size: var(--fs-2xs);
  font-weight: 600;
  white-space: nowrap;
}

.HeroDashboard__mode[data-on] {
  background: color-mix(in srgb, var(--mc) 8%, var(--neu-surface));
  box-shadow: var(--neu-raised-sm);
  color: var(--mc);
}

.HeroDashboard__readout {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.HeroDashboard__big {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1;
  color: var(--amber);
}

.HeroDashboard__unit {
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--fg-2);
}

.HeroDashboard__readoutNote {
  color: var(--fg-2);
  font-size: var(--fs-2xs);
}

.HeroDashboard__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.HeroDashboard__tile {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3);
  border-radius: var(--r-2);
  background: var(--neu-surface);
  box-shadow: var(--neu-raised-sm);
}

.HeroDashboard__tileIcon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--tc) 12%, transparent);
  color: var(--tc);
}

.HeroDashboard__tileBody {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.HeroDashboard__tileBody b {
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.HeroDashboard__tileSub {
  color: var(--fg-2);
  font-size: var(--fs-2xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.HeroDashboard__stats {
  gap: var(--space-4);
}

.HeroDashboard__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.HeroDashboard__rankRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.HeroDashboard__rankTier {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--medal-gold);
}

.HeroDashboard__season {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--gold) 8%, var(--neu-surface));
  box-shadow: var(--neu-raised-sm);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 600;
}

.HeroDashboard__board {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--r-2);
  background: var(--neu-well);
  box-shadow: var(--neu-sunk-sm);
}

.HeroDashboard__boardRow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--r-1);
}

.HeroDashboard__boardRow[data-you] {
  background: color-mix(in srgb, var(--accent) 8%, var(--neu-surface));
  box-shadow: var(--neu-raised-sm);
}

.HeroDashboard__boardRow[data-you] .HeroDashboard__boardName {
  color: var(--accent);
}

.HeroDashboard__boardPos {
  width: 22px;
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
}

.HeroDashboard__boardName {
  flex: 1;
  font-weight: 600;
}

@media (max-width: 900px) {
  .HeroDashboard__content {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'greeting'
      'main';
  }
  .HeroDashboard__side,
  .HeroDashboard__xpText {
    display: none;
  }
}

@media (max-width: 640px) {
  .HeroDashboard__app {
    grid-template-columns: minmax(0, 1fr);
  }
  .HeroDashboard__rail {
    display: none;
  }
  .HeroDashboard__topbar,
  .HeroDashboard__content {
    padding-inline: var(--space-4);
  }
  .HeroDashboard__topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .HeroDashboard__xp,
  .HeroDashboard__xpText,
  .HeroDashboard__levelChip {
    display: none;
  }
  .HeroDashboard__levelDial,
  .HeroDashboard__levelNum {
    display: block;
  }
  .HeroDashboard__topMark {
    display: flex;
  }
  .HeroDashboard__topRight {
    justify-self: end;
  }
  .HeroDashboard__streakPill {
    order: 1;
  }
  .HeroDashboard__row {
    grid-template-columns: minmax(0, 1fr);
  }
  .HeroDashboard__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==== LandingHero.module.css ==== */
.LandingHero__hero {
  position: relative;
  padding-top: var(--landing-header-h);
  --hero-peek: 140px;
  overflow-x: clip;
}

.LandingHero__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      60% 50% at 50% 0%,
      color-mix(in srgb, var(--green) 12%, transparent),
      transparent 70%
    ),
    radial-gradient(
      40% 40% at 90% 30%,
      color-mix(in srgb, var(--blue) 9%, transparent),
      transparent 70%
    );
}

.LandingHero__copy {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: calc(100svh - var(--landing-header-h) - var(--hero-peek));
  padding-block: var(--space-8);
  text-align: center;
  gap: var(--space-6);
}

.LandingHero__title {
  font-size: var(--fs-landing-hero);
  letter-spacing: -0.045em;
  line-height: 0.95;
}

.LandingHero__title span {
  display: inline-block;
}

.LandingHero__w2 {
  color: var(--accent);
}

.LandingHero__w3 {
  color: var(--fg-2);
}

.LandingHero__lead {
  text-align: center;
}

.LandingHero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.LandingHero__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  padding: 0;
  list-style: none;
  color: var(--fg-2);
  font-size: var(--fs-sm);
}

.LandingHero__trust li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.LandingHero__check {
  color: var(--accent);
}

.LandingHero__stage {
  position: relative;
  perspective: 1400px;
  perspective-origin: 50% 0;
  --rx-start: 28deg;
  --sc-start: 1.5;
}

.LandingHero__shot {
  position: relative;
  transform-origin: 50% 0;
  transform: rotateX(calc(var(--rx-start) * var(--t, 0)))
    scale(calc(1 + (var(--sc-start) - 1) * var(--t, 0)));
  transition: transform 80ms linear;
  will-change: transform;
}

.LandingHero__shot::after {
  content: '';
  position: absolute;
  inset: auto 0 -60px 0;
  height: 200px;
  background: linear-gradient(180deg, transparent, var(--bg));
  pointer-events: none;
}

.LandingHero__frame {
  overflow: hidden;
  border-radius: 20px;
  background: var(--neu-surface);
  border: 1px solid var(--line-2);
  box-shadow:
    var(--neu-raised),
    0 60px 140px -50px var(--neu-lo);
}

.LandingHero__winBar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 42px;
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
}

.LandingHero__dots {
  display: flex;
  gap: var(--space-2);
}

.LandingHero__dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.LandingHero__dots i:nth-child(1) {
  background: var(--danger);
}

.LandingHero__dots i:nth-child(2) {
  background: var(--amber);
}

.LandingHero__dots i:nth-child(3) {
  background: var(--green);
}

.LandingHero__url {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 26px;
  min-width: 0;
  margin-inline: var(--space-3);
  padding: 0 var(--space-3);
  border-radius: 7px;
  background: var(--surface);
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  white-space: nowrap;
  overflow: hidden;
}

@media (max-width: 900px) {
  .LandingHero__stage {
    --rx-start: 18deg;
    --sc-start: 1.2;
  }
}

@media (max-width: 640px) {
  .LandingHero__url {
    margin-inline: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .LandingHero__shot {
    transform: none;
    transition: none;
    will-change: auto;
  }
}

/* ==== LandingTape.module.css ==== */
.LandingTape__marquee {
  position: relative;
  z-index: 1;
  padding-block: var(--space-5);
  border-block: 1px solid var(--line);
  background: var(--bg-1);
  overflow: hidden;
}

.LandingTape__inner {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.LandingTape__label {
  flex: none;
  color: var(--fg-2);
}

.LandingTape__track {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, var(--bg) 8%, var(--bg) 92%, transparent);
}

.LandingTape__track ul {
  display: flex;
  gap: var(--space-3);
  width: max-content;
  padding: 0;
  list-style: none;
  animation: LandingTape__slide 48s linear infinite;
}

.LandingTape__track:hover ul {
  animation-play-state: paused;
}

.LandingTape__track li {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-pill);
  background: var(--neu-surface);
  box-shadow: var(--neu-raised-sm);
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  white-space: nowrap;
}

@keyframes LandingTape__slide {
  to {
    transform: translateX(calc(-50% - var(--space-3) / 2));
  }
}

@media (max-width: 720px) {
  .LandingTape__label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .LandingTape__track ul {
    animation: none;
  }
}

/* ==== CardStep.module.css ==== */
.CardStep__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.CardStep__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.CardStep__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--neu-surface-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 700;
  color: var(--fg);
}

.CardStep__rule {
  flex: 1;
  height: 1px;
  background: var(--line-2);
}

/* ==== TaskBrief.module.css ==== */
.TaskBrief__brief {
  padding: var(--space-4);
  border-radius: var(--r-3);
  background: var(--neu-surface-2);
  box-shadow: var(--neu-raised-sm);
}

.TaskBrief__text {
  margin: 0;
  font-size: var(--fs-h4);
  line-height: 1.6;
  color: var(--fg-0);
  mask-image: linear-gradient(to bottom, black 40%, transparent 60%);
  mask-size: 100% 250%;
  mask-repeat: no-repeat;
  animation: TaskBrief__briefReveal 1000ms ease-out 650ms both;
}

@keyframes TaskBrief__briefReveal {
  from {
    mask-position: 0 100%;
  }
  to {
    mask-position: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .TaskBrief__text {
    mask-image: none;
    animation: none;
  }
}

/* ==== ConceptFlash.module.css ==== */
.ConceptFlash__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.ConceptFlash__prose {
  line-height: 1.6;
  max-width: 720px;
}
/* presentation: SAFE vs VULNERABLE comparison */
.ConceptFlash__comparison {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
}
.ConceptFlash__compArrow {
  display: grid;
  place-items: center;
  color: var(--fg-2);
}
.ConceptFlash__snip {
  overflow: hidden;
  border-radius: var(--r-2);
  background: var(--neu-surface);
  box-shadow: var(--neu-raised-sm);
}
.ConceptFlash__snip[data-tone='safe'] {
  --snip-c: var(--success);
}
.ConceptFlash__snip[data-tone='vuln'] {
  --snip-c: var(--danger);
}
.ConceptFlash__snip[data-tone='info'] {
  --snip-c: var(--info);
}
.ConceptFlash__snipLabel {
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--snip-c);
  background: color-mix(in srgb, var(--snip-c) 8%, var(--neu-surface));
}
.ConceptFlash__snipCode {
  margin: 10px;
  padding: 12px 14px;
  border-radius: var(--r-1);
  background: var(--neu-well);
  box-shadow: var(--neu-sunk-sm);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--code-fg);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ConceptFlash__snipCaption {
  padding: 2px 16px 12px;
  font-size: var(--fs-mono-sm);
  line-height: 1.5;
  color: var(--fg-2);
}

.ConceptFlash__quickCheck {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 16px 18px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--green) 1.5%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--green) 18%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--green) 70%, transparent);
}
.ConceptFlash__qcHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.ConceptFlash__qcLabel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
}
.ConceptFlash__qcXp {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  color: var(--fg-2);
  white-space: nowrap;
}
.ConceptFlash__question {
  color: var(--fg);
}

/* quick-check options — A/B/C/D letter badge, column stacked */
.ConceptFlash__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ConceptFlash__option {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  border: 0;
  background: var(--neu-surface);
  box-shadow: var(--neu-raised-sm);
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.12s ease,
    background 0.12s ease;
}
.ConceptFlash__option:disabled {
  cursor: default;
}
.ConceptFlash__option[data-state='picked'] {
  background: var(--neu-well);
  box-shadow: var(--neu-sunk-sm);
}
.ConceptFlash__option[data-state='correct'] {
  border-color: var(--success);
  background: color-mix(in srgb, var(--success) 10%, transparent);
}
.ConceptFlash__option[data-state='incorrect'] {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}
.ConceptFlash__optBadge {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 700;
  background: var(--surface-2);
  color: var(--fg-2);
}
.ConceptFlash__option[data-state='picked'] .ConceptFlash__optBadge {
  background: color-mix(in srgb, var(--fg) 82%, transparent);
  color: var(--bg-1);
}
.ConceptFlash__option[data-state='correct'] .ConceptFlash__optBadge {
  background: var(--success);
  color: var(--bg-1);
}
.ConceptFlash__option[data-state='incorrect'] .ConceptFlash__optBadge {
  background: var(--danger);
  color: #fff;
}
.ConceptFlash__optLabel {
  font-family: var(--font-body);
  line-height: 1.5;
  color: var(--fg);
  overflow-wrap: anywhere;
}

/* ── mobile ──────────────────────────────────────────────────────────────
   This block lives at the end of the file on purpose: it overrides base rules at the same
   specificity, so only its position decides whether it applies at all. */

/* Phones put the pair on one line and swipe between them: stacked, the vulnerable half sat a
   full screen under the safe one, which is the one place the comparison has to be read together.
   Native touch scrolling is the drag; snapping parks each half in the viewport.

   Code does not wrap here and no card scrolls inside itself — each card is as wide as its
   longest line, and the carriage is the one thing that slides. Two nested horizontal scrollers
   would fight over the same swipe. */
@media (max-width: 640px) {
  /* Full bleed: the viewport pulls out by the run stage's own side padding, and the scroller
     puts it back as its own. The cards then run edge to edge while sliding, and the gutter is
     only ever seen at the two ends — before the first card, and after the last. */
  .ConceptFlash__compViewport {
    position: relative;
    --bleed: var(--stage-pad, 0px);
    margin-inline: calc(var(--bleed) * -1);
  }
  /* Edge fades: only on the sides that still have something past them, so they read as "more
     this way" rather than as decoration. Both are off when there is nothing to scroll. */
  .ConceptFlash__compViewport::before,
  .ConceptFlash__compViewport::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 28px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
  }
  .ConceptFlash__compViewport::before {
    left: 0;
    background: linear-gradient(to right, var(--bg), transparent);
  }
  .ConceptFlash__compViewport::after {
    right: 0;
    background: linear-gradient(to left, var(--bg), transparent);
  }
  .ConceptFlash__compViewport[data-edge='start']::after,
  .ConceptFlash__compViewport[data-edge='middle']::before,
  .ConceptFlash__compViewport[data-edge='middle']::after,
  .ConceptFlash__compViewport[data-edge='end']::before {
    opacity: 1;
  }
  .ConceptFlash__comparison {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-inline: var(--bleed);
    scroll-padding-inline: var(--bleed);
  }
  .ConceptFlash__comparison::-webkit-scrollbar {
    display: none;
  }
  .ConceptFlash__comparison > .ConceptFlash__snip {
    flex: 0 0 auto;
    width: max-content;
    /* A short snippet still fills most of the screen, so the pair reads as cards rather than
       as two chips, and the next one peeks in to say it can be swiped. */
    min-width: 88%;
    scroll-snap-align: center;
  }
  .ConceptFlash__comparison .ConceptFlash__snipCode {
    white-space: pre;
    overflow-x: visible;
  }
  /* Zero intrinsic width, full actual width: prose must not decide how wide the card is —
     only the code does — but it still fills the width the code settled on. */
  .ConceptFlash__comparison .ConceptFlash__snipCaption,
  .ConceptFlash__comparison .ConceptFlash__snipLabel {
    width: 0;
    min-width: 100%;
  }
  .ConceptFlash__compArrow {
    flex: 0 0 auto;
    transform: none;
  }
}

/* ==== PickCount.module.css ==== */
.PickCount__count {
  --pc: var(--amber);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}
.PickCount__count[data-done] {
  --pc: var(--green);
}
.PickCount__ring {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
}
.PickCount__svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}
.PickCount__track,
.PickCount__arc {
  fill: none;
  stroke-width: 4;
}
.PickCount__track {
  stroke: var(--neu-well);
}
.PickCount__arc {
  stroke: var(--pc);
  stroke-dasharray: 100 100;
  transition: stroke-dashoffset 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.PickCount__ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 3px solid color-mix(in srgb, var(--green) 55%, transparent);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.PickCount__count[data-done] .PickCount__ring {
  animation: PickCount__ringPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.PickCount__count[data-done] .PickCount__ring::before {
  animation: PickCount__ringBurst 0.6s linear;
}
@keyframes PickCount__ringPop {
  0% {
    transform: scale(1);
  }
  37% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes PickCount__ringBurst {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.7);
  }
}
@media (prefers-reduced-motion: reduce) {
  .PickCount__arc {
    transition: none;
  }
  .PickCount__count[data-done] .PickCount__ring,
  .PickCount__count[data-done] .PickCount__ring::before {
    animation: none;
  }
}
.PickCount__ringNum {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 700;
  color: var(--pc);
}
.PickCount__text {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--fg-2);
}
.PickCount__text b {
  color: var(--pc);
}
.PickCount__go {
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-2);
}
.PickCount__count[data-done] .PickCount__go {
  color: var(--pc);
}

/* ==== CodeSpot.module.css ==== */
.CodeSpot__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.CodeSpot__assume {
  color: var(--fg-2);
}
.CodeSpot__helper {
  margin: 0;
  font-size: var(--fs-xs);
  font-style: italic;
}

/* ==== Config.module.css ==== */
.Config__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
/* per-line severity tag (on reveal) */
.Config__sev {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--sev-c, var(--amber));
  background: color-mix(in srgb, var(--sev-c, var(--amber)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--sev-c, var(--amber)) 45%, transparent);
}
.Config__sev[data-sev='critical'] {
  --sev-c: var(--danger);
}
.Config__sev[data-sev='high'] {
  --sev-c: #ff8a4d;
}
.Config__sev[data-sev='medium'] {
  --sev-c: var(--amber);
}
.Config__sev[data-sev='low'] {
  --sev-c: #5aa9ff;
}

/* findings panel — caught / missed / false-positive cards */
.Config__findings {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}
@media (max-width: 560px) {
  .Config__findings {
    grid-template-columns: minmax(0, 1fr);
  }
}
.Config__finding {
  padding: 10px 12px;
  border-radius: var(--r-2);
  border: 0;
  border-left: 3px solid var(--fnd-c);
  background: color-mix(in srgb, var(--fnd-c) 6%, var(--neu-surface));
  box-shadow: var(--neu-raised-sm);
}
.Config__finding[data-tone='caught'] {
  --fnd-c: var(--success);
}
.Config__finding[data-tone='missed'] {
  --fnd-c: var(--danger);
}
.Config__finding[data-tone='fp'] {
  --fnd-c: var(--amber);
}
.Config__findingHead {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fnd-c);
}
.Config__findingMeta {
  color: var(--fg-2);
  font-weight: 400;
}
.Config__findingBody {
  margin-top: 6px;
  font-size: var(--fs-mono);
  line-height: 1.5;
  color: var(--fg);
}
.Config__findingCode {
  color: var(--code-fg);
}

/* ==== Attack.module.css ==== */
.Attack__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.Attack__meta2 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: baseline;
  color: var(--fg-2);
}
.Attack__metaKey {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.Attack__target {
  color: var(--fg);
}
.Attack__chain {
  margin: 0;
  font-size: var(--fs-xs);
  font-style: italic;
}
.Attack__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.Attack__step {
  position: relative;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 0;
  border-radius: var(--r-2);
  background: var(--neu-surface);
  box-shadow: var(--neu-raised-sm);
  user-select: none;
  transition: transform 180ms ease;
}
.Attack__step[data-draggable='true'] {
  cursor: grab;
  touch-action: pan-y;
  -webkit-touch-callout: none;
}
.Attack__step[data-draggable='true'] .Attack__grip {
  touch-action: none;
}
.Attack__step[data-dragged='true'] {
  cursor: grabbing;
  background: color-mix(in srgb, var(--fg) 5%, var(--bg-2));
}
.Attack__step[data-dragged='true'] .Attack__grip,
.Attack__step[data-dragged='true'] .Attack__num {
  background: color-mix(in srgb, var(--fg) 5%, var(--bg-2));
}
@media (prefers-reduced-motion: reduce) {
  .Attack__step {
    transition: none;
  }
}
.Attack__step[data-state='correct'] {
  border-color: var(--success-glow);
  background: rgba(63, 185, 80, 0.08);
}
.Attack__step[data-state='incorrect'] {
  border-color: var(--danger-glow);
  background: var(--danger-fill);
}
.Attack__grip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  background: var(--surface-2);
  border-left: 1px solid var(--line);
  color: var(--fg-2);
}
.Attack__num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  background: var(--surface-2);
  border-right: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--fg-2);
}
.Attack__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: var(--space-4) var(--space-5);
}
.Attack__stitle {
  color: var(--fg);
}
.Attack__desc {
  color: var(--fg-2);
}
.Attack__payload {
  display: block;
  font-size: var(--fs-mono);
  color: var(--code-fg);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 8px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.Attack__step[data-state='correct'] .Attack__num {
  color: var(--success);
}
.Attack__step[data-state='incorrect'] .Attack__num {
  color: var(--danger);
}
.Attack__status {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
  padding-right: var(--space-4);
}
.Attack__step[data-state='correct'] .Attack__status {
  color: var(--success);
}
.Attack__step[data-state='incorrect'] .Attack__status {
  color: var(--danger);
}

/* ==== LandingTry.module.css ==== */
.LandingTry__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--landing-col-gap);
  align-items: start;
}

.LandingTry__intro {
  display: grid;
  justify-items: start;
  min-width: 0;
}

.LandingTry__head {
  margin-bottom: var(--space-8);
}

.LandingTry__play {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  min-width: 0;
}

.LandingTry__play > :last-child {
  justify-self: stretch;
}

.LandingTry__tierTab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.LandingTry__notes {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  list-style: none;
}

.LandingTry__noteItem {
  display: flex;
  gap: var(--space-3);
  color: var(--fg-2);
  line-height: 1.55;
}

.LandingTry__noteIcon {
  flex: none;
  margin-top: var(--space-1);
  color: var(--accent);
}

.LandingTry__status {
  color: var(--fg-2);
}

.LandingTry__shell {
  width: 100%;
  overflow: hidden;
  padding: var(--space-5);
}

.LandingTry__swap {
  margin: calc(-1 * var(--space-5));
  padding: var(--space-5) var(--space-5) 0;
  box-sizing: content-box;
}

.LandingTry__slide {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.LandingTry__cardHead {
  display: flex;
  align-items: center;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.LandingTry__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  min-height: 76px;
  margin: var(--space-1) calc(-1 * var(--space-5)) 0;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid color-mix(in srgb, var(--fg) 6%, transparent);
  background: color-mix(in srgb, var(--fg) 2%, transparent);
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.LandingTry__foot[data-tone] {
  min-height: 96px;
}

.LandingTry__foot[data-tone='success'] {
  background: color-mix(in srgb, var(--success) 14%, var(--bg));
  border-top-color: color-mix(in srgb, var(--success) 35%, transparent);
}

.LandingTry__foot[data-tone='danger'] {
  background: color-mix(in srgb, var(--danger) 14%, var(--bg));
  border-top-color: color-mix(in srgb, var(--danger) 35%, transparent);
}

.LandingTry__foot[data-tone='warn'] {
  background: color-mix(in srgb, var(--amber) 14%, var(--bg));
  border-top-color: color-mix(in srgb, var(--amber) 35%, transparent);
}

.LandingTry__verdict {
  margin-right: auto;
}

.LandingTry__error {
  margin-right: auto;
  color: var(--danger);
}

.LandingTry__why {
  position: relative;
  flex: 1 0 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  border-radius: var(--r-2);
  background: color-mix(in srgb, var(--bg) 35%, transparent);
  overflow: hidden;
}

.LandingTry__whyText {
  color: var(--fg-2);
  line-height: 1.5;
  text-align: center;
  filter: blur(4px);
  user-select: none;
}

.LandingTry__lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.LandingTry__lock:hover {
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .LandingTry__foot {
    transition: none;
  }
}

@media (max-width: 960px) {
  .LandingTry__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .LandingTry__tiers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    border-radius: var(--r-3);
  }
  .LandingTry__tiers > button {
    justify-content: center;
  }
  .LandingTry__slide {
    gap: var(--space-3);
  }
  .LandingTry__cardHead {
    padding-bottom: var(--space-2);
  }
}

@media (max-width: 480px) {
  .LandingTry__shell {
    padding: var(--space-4);
  }
  .LandingTry__swap {
    margin: calc(-1 * var(--space-4));
    padding: var(--space-4) var(--space-4) 0;
  }
  .LandingTry__foot {
    margin: var(--space-1) calc(-1 * var(--space-4)) 0;
    padding: var(--space-4);
  }
}

/* ==== PhoneFrame.module.css ==== */
.PhoneFrame__phone {
  position: relative;
  width: var(--phone-w, 300px);
  aspect-ratio: var(--phone-aspect, 9 / 19.2);
  flex: none;
  padding: var(--phone-pad, 10px);
  border-radius: var(--phone-r, 44px);
  background: var(--neu-lo);
  box-shadow:
    0 0 0 1px var(--line-strong),
    inset 0 0 0 2px var(--bg-2),
    0 70px 140px -50px var(--neu-lo);
}

.PhoneFrame__island {
  position: absolute;
  top: calc(var(--phone-pad, 10px) + 9px);
  left: 50%;
  z-index: 3;
  width: 30%;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--neu-lo);
  transform: translateX(-50%);
}

.PhoneFrame__screen {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  border-radius: calc(var(--phone-r, 44px) - var(--phone-pad, 10px));
  background: var(--bg);
  overflow: hidden;
}

.PhoneFrame__status {
  display: flex;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5) 0;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--fg-2);
}

.PhoneFrame__content {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

/* The app's bar: a floating pill of five tabs, icon over a tiny mono label, the active one in the
   accent and Season always a little gold. */
.PhoneFrame__dock {
  display: flex;
  justify-content: center;
  padding: var(--space-2) var(--space-3) var(--space-4);
}

.PhoneFrame__nav {
  display: flex;
  align-items: stretch;
  height: 48px;
  padding: 0 5px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--bg-1);
  box-shadow: var(--neu-raised);
}

.PhoneFrame__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 44px;
  color: var(--fg-2);
  transition: color 0.4s ease;
}

.PhoneFrame__tab small {
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: 0.2px;
  line-height: 1;
}

.PhoneFrame__tabOn {
  color: var(--accent);
}

.PhoneFrame__season {
  color: color-mix(in srgb, var(--gold) 55%, var(--fg-2));
}

.PhoneFrame__season.PhoneFrame__tabOn {
  color: var(--gold);
}

.PhoneFrame__ava {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--neu-surface-2);
  font-family: var(--font-mono);
  font-size: 6.5px;
  font-weight: 700;
  color: var(--fg);
}

@media (prefers-reduced-motion: reduce) {
  .PhoneFrame__tab {
    transition: none;
  }
}

/* ==== LandingPhoneStory.module.css ==== */
.LandingPhoneStory__story {
  padding-block: 0;
}

.LandingPhoneStory__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--landing-col-gap);
  align-items: start;
}

.LandingPhoneStory__sticky {
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  height: 100svh;
}

.LandingPhoneStory__drift {
  transform: translateY(calc((0.5 - var(--p, 0.5)) * 32px))
    rotate(calc((var(--p, 0.5) - 0.5) * 4deg));
  will-change: transform;
}

.LandingPhoneStory__phone {
  --phone-w: min(300px, 78vw);
  --phone-r: 46px;
  --phone-pad: 11px;
}

.LandingPhoneStory__scr {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(0.98);
  transition:
    opacity 0.5s ease,
    transform 0.6s var(--ease-out-expo);
  pointer-events: none;
}

.LandingPhoneStory__scrOn {
  opacity: 1;
  transform: none;
}

/* ─── The run screens: the card itself, at the app's sizes, with a three-step pager below ─── */

.LandingPhoneStory__run {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
  background: var(--neu-ground);
}

.LandingPhoneStory__area {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-xs);
  overflow: hidden;
}

.LandingPhoneStory__pager {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: var(--space-3) var(--space-3) var(--space-5);
  border-top: 1px solid var(--line);
  background: var(--bg-1);
}

.LandingPhoneStory__pg {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--surface-2);
}

.LandingPhoneStory__pgOn {
  background: var(--accent);
}

/* Numbered card steps, as the app frames every card. */
.LandingPhoneStory__step {
  display: grid;
  gap: var(--space-2);
}

.LandingPhoneStory__stepHead {
  display: flex;
  align-items: center;
  gap: 6px;
}

.LandingPhoneStory__stepNum {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--neu-surface-2);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--fg);
}

.LandingPhoneStory__stepLabel {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-2);
}

.LandingPhoneStory__rule {
  flex: 1;
  height: 1px;
  background: var(--line-2);
}

.LandingPhoneStory__brief {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--r-2);
  background: var(--neu-surface-2);
  box-shadow: var(--neu-raised-sm);
  line-height: 1.5;
  color: var(--fg);
}

/* The terminal panel: three dots, the file, the language badge, numbered lines, a status bar. */
.LandingPhoneStory__term {
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--code-panel);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.LandingPhoneStory__termHead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 11px;
  border-bottom: 1px solid var(--line);
  background: var(--code-header);
}

.LandingPhoneStory__termDots {
  display: flex;
  gap: 5px;
}

.LandingPhoneStory__termDots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0.8;
}

.LandingPhoneStory__termDots i:nth-child(1) {
  background: var(--code-dot-red);
}

.LandingPhoneStory__termDots i:nth-child(2) {
  background: var(--code-dot-amber);
}

.LandingPhoneStory__termDots i:nth-child(3) {
  background: var(--code-dot-green);
}

.LandingPhoneStory__termFile {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--fg-2);
}

.LandingPhoneStory__termBadge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.4px;
  color: var(--fg-2);
}

.LandingPhoneStory__termBadge i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
}

.LandingPhoneStory__rows {
  padding: 4px 0;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: 1.9;
}

.LandingPhoneStory__row {
  display: flex;
  border-left: 3px solid transparent;
  white-space: pre;
  overflow: hidden;
}

.LandingPhoneStory__gutter {
  flex: none;
  width: 26px;
  padding-right: var(--space-2);
  text-align: right;
  color: var(--code-gutter);
}

.LandingPhoneStory__src {
  color: var(--code-fg);
}

.LandingPhoneStory__picked {
  border-left-color: color-mix(in srgb, var(--fg) 45%, transparent);
  background: color-mix(in srgb, var(--fg) 6%, transparent);
}

.LandingPhoneStory__correct {
  border-left-color: var(--success);
  background: var(--success-fill-2);
}

.LandingPhoneStory__kw {
  color: var(--code-keyword);
}

.LandingPhoneStory__st {
  color: var(--code-string);
}

.LandingPhoneStory__fn {
  color: var(--code-function);
}

.LandingPhoneStory__termStatus {
  display: flex;
  justify-content: space-between;
  padding: 6px 11px;
  border-top: 1px solid var(--line);
  background: var(--code-header);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--fg-2);
}

.LandingPhoneStory__termStatus b {
  color: var(--fg);
}

.LandingPhoneStory__ready {
  letter-spacing: 0.4px;
  color: var(--success);
}

.LandingPhoneStory__helper {
  margin: 0;
  font-size: var(--fs-2xs);
  font-style: italic;
  line-height: 1.45;
  color: var(--fg-2);
}

/* The verdict, then the XP it earns and where it lands. */
.LandingPhoneStory__verdict {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: 14px;
  background: color-mix(in srgb, var(--success) 10%, var(--neu-surface));
  box-shadow: var(--neu-raised-sm);
}

.LandingPhoneStory__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 14%, transparent);
  color: var(--bg-1);
}

.LandingPhoneStory__verdictText {
  flex: 1;
  min-width: 0;
}

.LandingPhoneStory__verdictText b {
  display: block;
  padding-top: 3px;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.3;
  color: var(--success);
}

.LandingPhoneStory__verdictText span {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-2xs);
  line-height: 1.45;
  color: var(--fg-2);
}

.LandingPhoneStory__flagBtn {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 3px;
  color: var(--fg-2);
}

.LandingPhoneStory__xpRow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.LandingPhoneStory__xpChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 11px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: var(--neu-raised-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.LandingPhoneStory__xpChipOn {
  animation: LandingPhoneStory__pop 0.8s var(--ease-out-expo) 0.2s both;
}

.LandingPhoneStory__mastered {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-2);
}

.LandingPhoneStory__lvlRow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--fg-2);
}

.LandingPhoneStory__lvl {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 var(--space-2);
  border-radius: var(--r-1);
  background: var(--neu-well);
  box-shadow: var(--neu-sunk-sm);
  font-weight: 700;
  color: var(--fg);
}

.LandingPhoneStory__xpBar {
  flex: 1;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--neu-well);
  box-shadow: var(--neu-sunk-sm);
  overflow: hidden;
}

.LandingPhoneStory__xpFill {
  display: block;
  width: 66%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.9s var(--ease-out-expo) 0.4s;
}

.LandingPhoneStory__xpFillOn {
  width: 74%;
}

@keyframes LandingPhoneStory__pop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.7);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Duel: the clash rail above the card, two territories meeting at a seam, and the clock. */
.LandingPhoneStory__clash {
  display: grid;
  gap: 7px;
}

.LandingPhoneStory__who {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.LandingPhoneStory__me {
  flex: 1;
  color: var(--accent);
}

.LandingPhoneStory__foe {
  flex: 1;
  text-align: right;
  color: var(--foe);
}

.LandingPhoneStory__who b {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--duel);
  text-shadow: 0 0 14px color-mix(in srgb, var(--duel) 40%, transparent);
}

.LandingPhoneStory__rail {
  position: relative;
  height: 18px;
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}

.LandingPhoneStory__mine,
.LandingPhoneStory__theirs {
  position: absolute;
  top: 0;
  bottom: 0;
}

.LandingPhoneStory__mine {
  left: 0;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 22%, transparent),
    color-mix(in srgb, var(--accent) 80%, transparent)
  );
}

.LandingPhoneStory__theirs {
  right: 0;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--foe) 80%, transparent),
    color-mix(in srgb, var(--foe) 22%, transparent)
  );
}

.LandingPhoneStory__mine::after,
.LandingPhoneStory__theirs::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, rgba(0, 0, 0, 0.2) 0 6px, transparent 6px 12px);
}

.LandingPhoneStory__theirs::after {
  background: repeating-linear-gradient(65deg, rgba(0, 0, 0, 0.2) 0 6px, transparent 6px 12px);
}

.LandingPhoneStory__seam {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 7px rgba(255, 255, 255, 0.8);
}

.LandingPhoneStory__clashFoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.LandingPhoneStory__clashStatus {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.6px;
  color: var(--fg-2);
}

.LandingPhoneStory__clock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: var(--r-1);
  background: var(--neu-surface);
  box-shadow: var(--neu-raised-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}

.LandingPhoneStory__clock svg {
  width: 11px;
  height: 11px;
}

.LandingPhoneStory__chain {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.LandingPhoneStory__chain li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-radius: var(--r-2);
  background: var(--neu-surface);
  box-shadow: var(--neu-raised-sm);
  color: var(--fg);
}

.LandingPhoneStory__grip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: -2px;
  color: var(--fg-3);
}

.LandingPhoneStory__chainNum {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--neu-surface-2);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--fg-2);
}

/* ─── The beats beside the phone ─── */

.LandingPhoneStory__beats {
  display: grid;
}

.LandingPhoneStory__beat {
  display: grid;
  align-content: center;
  gap: var(--space-5);
  min-height: 100svh;
  padding-block: var(--space-16);
  opacity: 0.35;
  transition: opacity 0.5s ease;
}

.LandingPhoneStory__beatOn {
  opacity: 1;
}

.LandingPhoneStory__beatTitle {
  font-size: var(--fs-landing-beat);
  letter-spacing: -0.035em;
  line-height: 1;
  text-wrap: balance;
}

.LandingPhoneStory__beatBody {
  max-width: 46ch;
  font-size: var(--fs-landing-lead);
  line-height: 1.55;
  color: var(--fg-2);
}

.LandingPhoneStory__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
}

.LandingPhoneStory__fact {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-pill);
  background: var(--neu-surface);
  box-shadow: var(--neu-raised-sm);
}

.LandingPhoneStory__beatPhone {
  display: none;
}

@media (max-width: 900px) {
  .LandingPhoneStory__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .LandingPhoneStory__sticky {
    display: none;
  }

  .LandingPhoneStory__beats {
    display: grid;
    gap: var(--space-16);
    padding-block: var(--space-12);
  }

  .LandingPhoneStory__beat,
  .LandingPhoneStory__beatOn {
    min-height: 0;
    padding-block: 0;
    opacity: 1;
  }

  .LandingPhoneStory__beatPhone {
    display: flex;
    justify-content: center;
    margin-top: var(--space-6);
  }

  .LandingPhoneStory__phoneSmall {
    --phone-w: min(240px, 68vw);
    --phone-aspect: 9 / 17.5;
    --phone-r: 34px;
    --phone-pad: 8px;
  }

  /* The small frames are narrower and shorter: scale the card down so the whole screen still fits. */
  .LandingPhoneStory__phoneSmall .LandingPhoneStory__area {
    zoom: 0.84;
  }
}

@media (prefers-reduced-motion: reduce) {
  .LandingPhoneStory__drift {
    transform: none;
    will-change: auto;
  }

  .LandingPhoneStory__scr,
  .LandingPhoneStory__beat,
  .LandingPhoneStory__xpFill {
    transition: none;
  }

  .LandingPhoneStory__scr {
    transform: none;
  }

  .LandingPhoneStory__beat {
    opacity: 1;
  }

  .LandingPhoneStory__xpChipOn {
    animation: none;
  }
}

/* ==== LandingDeck.module.css ==== */
.LandingDeck__head {
  margin-bottom: var(--space-6);
}

.LandingDeck__stage {
  display: grid;
  grid-template-columns: 560px 240px;
  justify-content: center;
  gap: var(--space-8);
  align-items: center;
}

.LandingDeck__fan {
  position: relative;
  height: 450px;
}

.LandingDeck__card {
  --hy: 0px;
  position: absolute;
  left: 50%;
  top: 150px;
  width: 200px;
  height: 290px;
  margin: -145px 0 0 -100px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: 18px;
  border: 1px solid var(--line-2);
  background: var(--neu-surface);
  box-shadow: var(--neu-raised);
  color: var(--fg);
  text-align: left;
  cursor: pointer;
  z-index: var(--z);
  transform: translate(var(--x), calc(var(--y) + var(--hy))) rotate(var(--r))
    scale(var(--s));
  transition: var(--motion, transform 300ms var(--ease-out-expo));
}

.LandingDeck__card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    0 0 0 1px var(--tc),
    0 0 0 4px color-mix(in srgb, var(--tc) 12%, transparent),
    0 0 56px -12px color-mix(in srgb, var(--tc) 65%, transparent);
  opacity: 0;
  transition: opacity 400ms ease;
}

.LandingDeck__card:focus-visible {
  outline: 2px solid var(--tc);
  outline-offset: 3px;
}

.LandingDeck__card:active {
  box-shadow: var(--neu-sunk);
}

.LandingDeck__fan[data-phase='rest'] .LandingDeck__card:hover {
  --hy: -16px;
}

.LandingDeck__card[data-glow]::after {
  opacity: 1;
  animation: LandingDeck__breathe 2.4s ease-in-out 400ms infinite;
}

@keyframes LandingDeck__breathe {
  0%,
  100% {
    box-shadow:
      0 0 0 1px var(--tc),
      0 0 0 4px color-mix(in srgb, var(--tc) 12%, transparent),
      0 0 56px -12px color-mix(in srgb, var(--tc) 65%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 1px var(--tc),
      0 0 0 6px color-mix(in srgb, var(--tc) 20%, transparent),
      0 0 88px -8px color-mix(in srgb, var(--tc) 90%, transparent);
  }
}

.LandingDeck__glyph,
.LandingDeck__panelGlyph {
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--tc) 16%, transparent);
  color: var(--tc);
  font-family: var(--font-mono);
}

.LandingDeck__glyph {
  width: 38px;
  height: 38px;
  font-size: var(--fs-h3);
}

.LandingDeck__name {
  display: grid;
  gap: var(--space-1);
}

.LandingDeck__title {
  font-size: var(--fs-h3);
  font-weight: 600;
}

.LandingDeck__art {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-2);
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--code-panel);
  color: var(--code-fg);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: 1.7;
  overflow: hidden;
}

.LandingDeck__line {
  padding-inline: var(--space-1);
  border-left: 2px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.LandingDeck__ok {
  background: color-mix(in srgb, var(--green) 16%, transparent);
  border-left-color: var(--green);
}

.LandingDeck__bad {
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  border-left-color: var(--danger);
}

.LandingDeck__amb {
  background: color-mix(in srgb, var(--amber) 14%, transparent);
  border-left-color: var(--amber);
}

.LandingDeck__pk {
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  border-left-color: color-mix(in srgb, var(--fg) 40%, transparent);
}

.LandingDeck__opt {
  padding: var(--space-1);
  border-radius: 5px;
  border: 1px solid var(--line-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.LandingDeck__optOk {
  border-color: var(--green);
  color: var(--green);
}

.LandingDeck__inkGreen {
  color: var(--green);
}

.LandingDeck__inkDanger {
  color: var(--danger);
}

.LandingDeck__caption {
  display: grid;
  margin-top: var(--space-16);
  padding: var(--space-5);
  border-radius: 18px;
  border: 1px solid var(--line-2);
  background: var(--neu-surface);
  box-shadow: var(--neu-raised);
}

.LandingDeck__panel {
  grid-area: 1 / 1;
  display: grid;
  align-content: center;
  gap: var(--space-3);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 350ms ease,
    visibility 0s linear 350ms;
}

.LandingDeck__panel[data-on] {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 350ms ease,
    visibility 0s;
}

.LandingDeck__panelGlyph {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: var(--fs-h2);
}

.LandingDeck__panelText {
  display: grid;
  gap: var(--space-2);
}

.LandingDeck__panelText p {
  color: var(--fg-2);
}

@media (max-width: 1100px) {
  .LandingDeck__stage {
    grid-template-columns: minmax(0, 560px);
  }

  .LandingDeck__caption {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
  }
}

@media (max-width: 900px) {
  .LandingDeck__fan {
    display: flex;
    gap: var(--space-3);
    height: auto;
    max-width: none;
    margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-10))
      calc(-1 * var(--space-10));
    padding: var(--space-8) var(--space-10) var(--space-12);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--space-10);
    scrollbar-width: none;
  }

  .LandingDeck__fan::-webkit-scrollbar {
    display: none;
  }

  .LandingDeck__card {
    position: relative;
    top: auto;
    left: auto;
    flex: 0 0 200px;
    height: auto;
    margin: 0;
    z-index: auto;
    transform: none;
    scroll-snap-align: start;
  }

  .LandingDeck__fan .LandingDeck__card[data-target] {
    z-index: auto;
  }

  .LandingDeck__stage {
    gap: var(--space-2);
  }

  .LandingDeck__caption {
    margin-top: 0;
  }
}

@media (max-width: 640px) {
  .LandingDeck__fan {
    margin-inline: calc(-1 * var(--gutter-mobile));
    padding-inline: var(--gutter-mobile);
    scroll-padding-inline: var(--gutter-mobile);
  }

  .LandingDeck__caption {
    padding: var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .LandingDeck__fan .LandingDeck__card,
  .LandingDeck__fan .LandingDeck__card::after,
  .LandingDeck__panel,
  .LandingDeck__panel[data-on] {
    transition: none;
  }

  .LandingDeck__fan .LandingDeck__card:hover {
    --hy: 0px;
  }

  .LandingDeck__card[data-glow]::after {
    animation: none;
  }
}

/* ==== library.module.css ==== */
.library__stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.library__grid {
  display: grid;
  /* Two fifths to the featured card, three to the six tiles — they are the section's
     navigation, and the card is the one thing it is currently showing. */
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-4);
  align-items: stretch;
}

@media (max-width: 1080px) {
  .library__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Fixed so the section does not jump as slides of different lengths come through; the card
   fills it and clamps its own text. */
.library__carousel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 228px;
}

.library__carouselBody {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.library__empty {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--fg-2);
}

/* ── featured ──────────────────────────────────────────────────────────── */

.library__featured {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  overflow: hidden;
  flex: 1;
  padding: var(--space-4);
  border: 0;
  border-radius: 18px;
  background: var(--neu-surface);
  box-shadow: var(--neu-raised);
}

/* The slide's colour rides its own layer so it can fade away and return as the next slide's
   colour, while the frame underneath never moves. */
.library__featured::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-left: 3px solid var(--fc);
  border-radius: inherit;
  /* Flat: the left bar names the slide's type, and a wash behind the text was fighting the
     card's own surface for it. */
  background: none;
  pointer-events: none;
  /* The colour is the slowest thing in the change: it is still arriving after the text has
     settled, which is what keeps the swap feeling like a dissolve rather than a cut. */
  animation: library__featTint 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Only the contents cross-fade — the frame holds still, so a slide change does not make the
   card move under the reader.

   Staggered and slow, the way a streaming shelf changes its billboard: each block drifts up a
   few pixels as it arrives, a beat behind the one above it, on a curve that decelerates almost
   to a stop. Nothing snaps, and the eye is led down the card in reading order. */
.library__featuredHead,
.library__featuredBody,
.library__featuredFoot {
  position: relative;
  z-index: 1;
  animation: library__featIn 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.library__featuredHead {
  animation-delay: 40ms;
}
.library__featuredBody {
  animation-delay: 130ms;
}
.library__featuredFoot {
  animation-delay: 220ms;
}
@keyframes library__featIn {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes library__featTint {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .library__featured::before,
  .library__featuredHead,
  .library__featuredBody,
  .library__featuredFoot {
    animation: none;
  }
}

.library__featuredHead {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-3);
}
.library__featuredBadge {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--r-1);
  border: 1px solid color-mix(in srgb, var(--fc) var(--tint-border), transparent);
  background: color-mix(in srgb, var(--fc) var(--tint-fill), transparent);
  color: var(--fc);
}
.library__featuredType {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.library__featuredType b {
  font-size: var(--fs-sm);
}

.library__featuredBody {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  min-height: 0;
  /* Clipped to whole lines, never through them: each block ellipsises itself, so the box has
     nothing left to cut. */
  overflow: hidden;
}
.library__featuredIdent {
  color: var(--fc);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}
.library__featuredTitle {
  margin: 0;
  font-size: var(--fs-h3);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.library__featuredSub {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--fg-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* The block that gives way when a slide runs long — the title and the identifier both have to
     be read in full, this one can end in an ellipsis. */
  flex-shrink: 1;
}

.library__featured[data-showcase] .library__featuredSub {
  -webkit-line-clamp: 4;
}

.library__featuredFoot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  flex-shrink: 0;
}
.library__featuredMeta {
  padding: 5px var(--space-3);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  background: var(--neu-surface);
  box-shadow: var(--neu-sunk-sm);
  color: var(--fg-2);
}
/* The same button as Continue's Resume — the atom carries the fill, the relief and the hover;
   this only says where it sits in the footer. */
.library__run {
  --accent: var(--fc);
  --accent-contrast: color-mix(in srgb, var(--fc) 12%, var(--bg));
  margin-left: auto;
}

/* ── carousel timer ────────────────────────────────────────────────────── */

/* Rides the card's own bottom edge — the card clips it, so it stops at the border and
   follows the corner radius. Restarted by the card remount on each slide change. */
.library__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 3px;
  transform-origin: left;
  background: var(--line-2);
  animation: library__featProg var(--slide-ms) linear both;
}
@keyframes library__featProg {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .library__progress {
    animation: none;
    opacity: 0;
  }
}

/* ── tiles ─────────────────────────────────────────────────────────────── */

/* One card for all six, with the selection as a pane that travels between them — six separate
   cards would compete with the featured card beside them. */
.library__tiles {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  padding: var(--space-4);
  border: 0;
  border-radius: 18px;
  background: var(--neu-surface);
  box-shadow: var(--neu-raised);
}
.library__tile {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 6px 14px -12px var(--neu-lo);
  color: var(--fg);
  text-align: left;
  cursor: pointer;
  /* Presses and springs back: the overshoot on the way out is what makes it read as a key
     releasing rather than a colour fading. */
  transition:
    background 0.38s ease,
    box-shadow 0.38s ease,
    transform 0.58s cubic-bezier(0.16, 1, 0.3, 1);
}
/* The tile whose view is on the left is held down. */
.library__tile[data-on] {
  background: var(--neu-well);
  box-shadow: var(--neu-sunk);
  transform: translateY(1px);
}
.library__tile:active:not(:disabled) {
  transform: translateY(1px) scale(0.985);
}
@media (prefers-reduced-motion: reduce) {
  .library__tile {
    transition: none;
  }
  .library__tile[data-on] {
    transform: none;
  }
}
.library__tile:hover:not([data-on]):not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
}
.library__tile:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.library__tileIcon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 12px;
  border: 0;
  background: color-mix(in srgb, var(--tc) 12%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  color: var(--tc);
}
.library__tileBody {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.library__tileBody b {
  font-size: var(--fs-sm);
}
/* The count carries the tile's own colour, the way the design pairs them. */
.library__tileSub {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--tc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── mobile ────────────────────────────────────────────────────────────── */

.library__mobileHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.library__swipe {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-inline: calc(var(--gutter-mobile) * -1);
  padding-inline: var(--gutter-mobile);
  scroll-padding-inline: var(--gutter-mobile);
  /* The scroller clips what leaves it, and the cards' drop shadow reaches ~16px past their
     foot — at 12px it came off flat. Padded either side, then pulled back so the row still
     occupies the space it did. */
  padding-block: 12px 24px;
  margin-block: -12px -24px;
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.15) 0,
    #000 20px,
    #000 calc(100% - 20px),
    rgba(0, 0, 0, 0.15) 100%
  );
}
.library__swipe::-webkit-scrollbar {
  display: none;
}
.library__swipeItem {
  display: flex;
  flex: none;
  width: 82%;
  min-width: 250px;
  scroll-snap-align: start;
}
.library__swipeSkeleton {
  min-width: 250px;
}
.library__swipeItem[data-tappable] {
  cursor: pointer;
}
.library__swipeItem > * {
  width: 100%;
}

/* ==== LandingVoices.module.css ==== */
.LandingVoices__track {
  --bleed: calc(50vw - 50%);
  display: flex;
  gap: var(--space-4);
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--bleed));
  padding: var(--space-4) var(--bleed) var(--space-6);
  scroll-padding-inline: var(--bleed);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.LandingVoices__stage {
  position: relative;
}

.LandingVoices__stage::before,
.LandingVoices__stage::after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--space-4));
  bottom: calc(-1 * var(--space-4));
  z-index: 1;
  width: calc(50vw - 50%);
  pointer-events: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.LandingVoices__stage::before {
  right: 100%;
  background: linear-gradient(
    to left,
    transparent,
    color-mix(in srgb, var(--bg) 80%, transparent)
  );
  -webkit-mask-image: linear-gradient(
    to left,
    transparent,
    var(--bg) var(--space-12)
  );
  mask-image: linear-gradient(to left, transparent, var(--bg) var(--space-12));
}

.LandingVoices__stage::after {
  left: 100%;
  background: linear-gradient(
    to right,
    transparent,
    color-mix(in srgb, var(--bg) 80%, transparent)
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    var(--bg) var(--space-12)
  );
  mask-image: linear-gradient(to right, transparent, var(--bg) var(--space-12));
}

.LandingVoices__track::-webkit-scrollbar {
  display: none;
}

.LandingVoices__quote {
  flex: 0 0 min(420px, 86%);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--r-3);
  background: var(--neu-surface);
  box-shadow: var(--neu-raised);
  transition: box-shadow 0.2s ease;
}

.LandingVoices__quoteOn {
  box-shadow:
    var(--neu-raised),
    0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}

.LandingVoices__quote p {
  color: var(--fg);
  font-size: var(--fs-h3);
  line-height: 1.55;
  text-wrap: pretty;
}

.LandingVoices__stars {
  display: flex;
  gap: 3px;
  color: var(--amber);
}

.LandingVoices__stars svg {
  fill: currentColor;
}

.LandingVoices__who {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--fg-2);
}

.LandingVoices__who b {
  display: block;
  color: var(--fg);
  font-weight: 600;
}

.LandingVoices__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-1);
  box-shadow:
    0 0 0 2px var(--c),
    var(--neu-raised-sm);
  color: var(--c);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 700;
}

.LandingVoices__controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.LandingVoices__dots {
  display: flex;
  gap: 6px;
  margin-right: auto;
}

.LandingVoices__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
  transition:
    width 0.2s ease,
    background 0.2s ease;
}

.LandingVoices__dots .LandingVoices__dotOn {
  width: 22px;
  border-radius: var(--r-pill);
  background: var(--accent);
}

.LandingVoices__nav {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--neu-surface);
  box-shadow: var(--neu-raised-sm);
  color: var(--fg);
  cursor: pointer;
}

.LandingVoices__nav:hover,
.LandingVoices__nav:active {
  box-shadow: var(--neu-sunk-sm);
}

.LandingVoices__nav:disabled {
  opacity: 0.4;
  cursor: default;
  box-shadow: var(--neu-raised-sm);
}

.LandingVoices__prev {
  transform: rotate(90deg);
}

.LandingVoices__next {
  transform: rotate(-90deg);
}

@media (prefers-reduced-motion: reduce) {
  .LandingVoices__track {
    scroll-behavior: auto;
  }
  .LandingVoices__quote {
    transition: none;
  }
  .LandingVoices__dots i {
    transition: none;
  }
}

/* ==== LandingPricing.module.css ==== */
.LandingPricing__notes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-8);
  margin-top: var(--space-8);
  padding: 0;
  list-style: none;
}

.LandingPricing__note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--fg-2);
}

.LandingPricing__amber {
  color: var(--amber);
}

.LandingPricing__accent {
  color: var(--accent);
}

/* ==== phoneUi.module.css ==== */
.phoneUi__body {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-xs);
}

.phoneUi__title {
  font-size: var(--fs-h3);
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.phoneUi__title b {
  color: var(--accent);
}

.phoneUi__kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-2);
}

.phoneUi__pc {
  padding: var(--space-3);
  border-radius: 14px;
  background: var(--neu-surface);
  box-shadow: var(--neu-raised-sm);
}

.phoneUi__pc b {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--fg);
}

.phoneUi__bar {
  height: 6px;
  margin-top: var(--space-2);
  border-radius: var(--r-pill);
  background: var(--neu-well);
  box-shadow: var(--neu-sunk-sm);
  overflow: hidden;
}

.phoneUi__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.phoneUi__clock {
  font-family: var(--font-mono);
  font-size: var(--fs-h1);
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.phoneUi__clash {
  display: grid;
  gap: var(--space-3);
  text-align: center;
}

.phoneUi__vs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2);
}

.phoneUi__vs b {
  font-family: var(--font-display);
  color: var(--fg-2);
}

.phoneUi__vs small {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--fg-2);
}

.phoneUi__av {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: auto;
  border-radius: 50%;
  background: var(--neu-surface);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--fg);
}

.phoneUi__me {
  box-shadow:
    0 0 0 2px var(--green),
    var(--neu-raised-sm);
}

.phoneUi__foe {
  box-shadow:
    0 0 0 2px var(--foe),
    var(--neu-raised-sm);
}

.phoneUi__pace {
  justify-self: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--green) 8%, var(--neu-surface));
  box-shadow: var(--neu-raised-sm);
  color: var(--green);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
}

/* ==== LandingMobile.module.css ==== */
.LandingMobile__mobile {
  background:
    radial-gradient(
      50% 60% at 80% 50%,
      color-mix(in srgb, var(--blue) 9%, transparent),
      transparent 70%
    ),
    var(--bg);
  overflow: clip;
}

.LandingMobile__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--landing-col-gap);
  align-items: center;
}

.LandingMobile__head {
  margin-bottom: var(--space-8);
}

.LandingMobile__features {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
}

.LandingMobile__feature {
  display: flex;
  gap: var(--space-4);
}

.LandingMobile__feature strong {
  display: block;
  font-weight: 600;
  color: var(--fg);
}

.LandingMobile__feature p {
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--fg-2);
}

.LandingMobile__ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--r-2);
  background: var(--neu-surface);
  box-shadow: var(--neu-raised-sm);
  color: var(--accent);
}

.LandingMobile__stores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.LandingMobile__store {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  height: 50px;
  padding: 0 var(--space-4) 0 var(--space-3);
  border-radius: var(--r-2);
  background: var(--store-badge-bg);
  box-shadow: 0 0 0 1px var(--line-2);
  color: var(--store-badge-fg);
}

.LandingMobile__store svg {
  width: 22px;
  height: 22px;
}

.LandingMobile__storeText small {
  display: block;
  font-size: var(--fs-2xs);
  line-height: 1;
  opacity: 0.8;
}

.LandingMobile__storeText b {
  display: block;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.15;
}

.LandingMobile__soon {
  margin-left: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: 6px;
  background: color-mix(in srgb, var(--store-badge-fg) 14%, transparent);
  color: var(--store-badge-fg);
  letter-spacing: var(--tracking-label);
}

.LandingMobile__phones {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 580px;
}

.LandingMobile__phone {
  --phone-w: 256px;
  --phone-r: 40px;
  --phone-pad: 10px;
}

.LandingMobile__back {
  z-index: 1;
  opacity: 0.85;
  transform: translateX(40px) translateY(28px) scale(0.9);
}

.LandingMobile__front {
  z-index: 2;
  transform: translateX(-40px);
}

.LandingMobile__plan {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: 0;
  list-style: none;
}

.LandingMobile__plan li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: 10px;
  background: var(--neu-well);
  font-size: var(--fs-2xs);
  color: var(--fg-2);
}

.LandingMobile__plan em {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-style: normal;
  color: var(--fg-2);
}

.LandingMobile__tick {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
}

.LandingMobile__done .LandingMobile__tick {
  border-color: var(--green);
  background: var(--green);
}

.LandingMobile__done .LandingMobile__tick::after {
  content: '';
  width: 7px;
  height: 4px;
  border-left: 2px solid var(--green-contrast);
  border-bottom: 2px solid var(--green-contrast);
  transform: translateY(-1px) rotate(-45deg);
}

.LandingMobile__plan li span {
  min-width: 0;
}

.LandingMobile__cve {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.LandingMobile__sev {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 20px;
  padding: 0 var(--space-2);
  border-radius: 7px;
  background: color-mix(in srgb, var(--scarlet) 18%, transparent);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--scarlet);
}

.LandingMobile__timer {
  font-family: var(--font-mono);
  font-size: var(--fs-h2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}

.LandingMobile__steps {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: 0;
  list-style: none;
}

.LandingMobile__steps li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: 10px;
  background: var(--neu-well);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--fg);
}

.LandingMobile__n {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 7px;
  background: var(--bg-1);
  box-shadow: var(--neu-sunk-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--scarlet);
}

@media (max-width: 980px) {
  .LandingMobile__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .LandingMobile__copy {
    display: contents;
  }

  .LandingMobile__head {
    order: 1;
    margin-bottom: 0;
  }

  .LandingMobile__phones {
    order: 2;
    min-height: 0;
    padding-bottom: var(--space-6);
  }

  .LandingMobile__features {
    order: 3;
  }

  .LandingMobile__stores {
    order: 4;
    margin-top: 0;
  }

  .LandingMobile__phone {
    --phone-w: 236px;
  }
}

@media (max-width: 640px) {
  .LandingMobile__stores {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .LandingMobile__phone {
    --phone-w: 208px;
  }

  .LandingMobile__back {
    transform: translateX(28px) translateY(20px) scale(0.9);
  }

  .LandingMobile__front {
    transform: translateX(-28px);
  }
}

/* ==== LandingFaq.module.css ==== */
.LandingFaq__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--landing-col-gap);
  align-items: start;
}

.LandingFaq__head {
  display: grid;
  gap: var(--space-4);
}

.LandingFaq__item {
  border-top: 1px solid var(--line);
}

.LandingFaq__item:last-child {
  border-bottom: 1px solid var(--line);
}

.LandingFaq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-1);
  cursor: pointer;
  list-style: none;
}

.LandingFaq__summary::-webkit-details-marker {
  display: none;
}

.LandingFaq__summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

.LandingFaq__question {
  font-weight: 600;
  line-height: 1.35;
}

.LandingFaq__icon {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--neu-surface);
  box-shadow: var(--neu-raised-sm);
  transition: transform 0.25s var(--ease-out-expo);
}

.LandingFaq__icon::before,
.LandingFaq__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 1.5px;
  background: var(--fg-2);
  transform: translate(-50%, -50%);
}

.LandingFaq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.LandingFaq__item[open]:not([data-closing]) .LandingFaq__icon {
  transform: rotate(45deg);
}

.LandingFaq__item[open]:not([data-closing]) .LandingFaq__icon::before,
.LandingFaq__item[open]:not([data-closing]) .LandingFaq__icon::after {
  background: var(--accent);
}

.LandingFaq__answer {
  overflow: hidden;
  max-width: 66ch;
  padding: 0 var(--space-1) var(--space-5);
  font-size: var(--fs-h4);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .LandingFaq__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .LandingFaq__icon {
    transition: none;
  }
}

/* ==== LandingCtaBand.module.css ==== */
.LandingCtaBand__band {
  padding-bottom: var(--landing-section-pad);
}

.LandingCtaBand__box {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-8);
  align-items: center;
  padding: clamp(28px, 5vw, 56px);
  border-radius: 28px;
  background: var(--neu-surface);
  border: 1px solid color-mix(in srgb, var(--green) 25%, var(--line));
  box-shadow:
    var(--neu-raised),
    0 0 120px -40px color-mix(in srgb, var(--green) 45%, transparent);
  overflow: hidden;
  isolation: isolate;
}

.LandingCtaBand__watermark {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: var(--space-10);
  opacity: 0.07;
  mask-image: linear-gradient(90deg, transparent 30%, var(--fg));
  pointer-events: none;
}

.LandingCtaBand__watermark img {
  width: auto;
  height: 160%;
  filter: none;
}

.LandingCtaBand__copy {
  display: grid;
  gap: var(--space-3);
}

.LandingCtaBand__title {
  font-size: var(--fs-landing-cta);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.LandingCtaBand__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

@media (max-width: 760px) {
  .LandingCtaBand__box {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    padding: var(--space-8) var(--space-6);
    text-align: center;
    border-radius: var(--r-3);
  }

  .LandingCtaBand__copy {
    justify-items: center;
  }

  .LandingCtaBand__title {
    max-width: 14ch;
  }

  .LandingCtaBand__watermark {
    align-items: flex-start;
    justify-content: center;
    padding: 0;
    opacity: 0.05;
    mask-image: linear-gradient(180deg, var(--fg), transparent 70%);
  }

  .LandingCtaBand__watermark img {
    height: 120%;
    transform: translateY(-30%);
  }

  .LandingCtaBand__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }

  .LandingCtaBand__actions > * {
    width: 100%;
  }
}

/* ==== LandingFooter.module.css ==== */
.LandingFooter__footer {
  padding-block: var(--space-12) var(--space-8);
  border-top: 1px solid var(--line);
  background: var(--bg-1);
}

.LandingFooter__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
}

.LandingFooter__colTitle {
  margin-bottom: var(--space-3);
}

.LandingFooter__links {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
}

.LandingFooter__twoCol {
  grid-template-rows: repeat(var(--rows), auto);
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: start;
  column-gap: var(--space-5);
}

.LandingFooter__link {
  font-size: var(--fs-h4);
  color: var(--fg-2);
  transition: color 0.15s ease;
}

.LandingFooter__link:hover,
.LandingFooter__link:focus-visible {
  color: var(--fg);
}

.LandingFooter__brandTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

@media (min-width: 901px) {
  .LandingFooter__brand {
    align-self: center;
    --logo-mark-size: 44px;
    --logo-word-fs: 28px;
  }
}

.LandingFooter__start,
.LandingFooter__bottomLegal {
  display: none;
}

.LandingFooter__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-10);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
}

@media (max-width: 900px) {
  .LandingFooter__footer {
    padding-block: var(--space-8) var(--space-6);
  }
  .LandingFooter__footer .LandingFooter__inner {
    width: calc(100% - 2 * var(--space-6));
  }
  .LandingFooter__grid {
    grid-template-columns: auto auto;
    justify-content: space-between;
    gap: var(--space-6) var(--space-5);
  }
  .LandingFooter__brand {
    grid-column: 1 / -1;
  }
  .LandingFooter__twoCol {
    column-gap: clamp(var(--space-4), 6vw, var(--space-10));
  }
  .LandingFooter__start {
    display: inline-flex;
  }
  .LandingFooter__links {
    row-gap: var(--space-2);
  }
  .LandingFooter__link {
    font-size: var(--fs-sm);
  }
  .LandingFooter__legalCol {
    display: none;
  }
  .LandingFooter__bottom {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    font-size: var(--fs-xs);
  }
  .LandingFooter__bottomLegal {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .LandingFooter__bottom .LandingFooter__link {
    font-size: var(--fs-xs);
    color: var(--fg-2);
  }
  .LandingFooter__dot {
    color: var(--fg-2);
  }
  .LandingFooter__copy {
    margin-left: auto;
  }
  .LandingFooter__rights {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .LandingFooter__link {
    transition: none;
  }
}

/* ==== AuthHeader.module.css ==== */
.AuthHeader__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-16);
  align-items: center;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}
.AuthHeader__top[data-edge] {
  display: flex;
  justify-content: space-between;
}
.AuthHeader__brand {
  justify-self: start;
  display: inline-flex;
  color: var(--fg);
  text-decoration: none;
}
.AuthHeader__logo {
  --logo-word-fs: var(--fs-h2);
}
.AuthHeader__action {
  max-width: 400px;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 900px) {
  .AuthHeader__top {
    display: flex;
    justify-content: space-between;
  }
}

@media (max-width: 768px) {
  .AuthHeader__logo {
    --logo-mark-size: 24px;
    --logo-mark-filter: none;
    --logo-word-fs: var(--fs-h3);
  }
}

/* ==== legal.module.css ==== */
.legal__page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
}

.legal__head {
  padding: var(--space-6) var(--space-10) 0;
}

.legal__doc {
  flex: 1;
  width: 100%;
  /* Narrower than the app's column on purpose: this is running prose, and prose wants a measure
     of about 70 characters rather than the full content width. */
  max-width: 70ch;
  margin-inline: auto;
  padding: var(--space-10) var(--space-5) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Says plainly that this is not reviewed yet. Warn-toned rather than danger: nothing is broken,
   the words simply are not binding. */
.legal__draft {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--warn-bright) 40%, transparent);
  border-radius: var(--r-2);
  background: color-mix(in srgb, var(--warn-bright) 9%, transparent);
  color: var(--fg-2);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.legal__draft strong {
  color: var(--warn-bright);
}

.legal__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 700;
  color: var(--fg);
  text-wrap: balance;
}
.legal__updated {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--fg-2);
}
.legal__lede {
  margin: 0;
  font-size: var(--fs-h4);
  line-height: 1.6;
  color: var(--fg-0);
}

.legal__clause {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.legal__clauseHead {
  display: flex;
  gap: 10px;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--fg);
}
.legal__clauseNum {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.legal__clause p,
.legal__clause li {
  margin: 0;
  line-height: 1.65;
  color: var(--fg-2);
}
.legal__clause ul,
.legal__clause ol {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding-left: 1.25em;
}
.legal__clause strong {
  color: var(--fg);
  font-weight: 600;
}
.legal__clause h3 {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--fg);
}

/* Links inside the prose. The app resets anchors to plain text, which is right for cards and
   wrong for a policy: a reader must be able to see where the other document is. */
.legal__lede a,
.legal__clause a,
.legal__faqBody a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal__lede a:hover,
.legal__clause a:hover,
.legal__faqBody a:hover {
  color: var(--accent);
}

/* Support page: the contact list and the FAQ. */
.legal__contact {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 16px;
  margin: 0;
}
.legal__contact dt {
  font-weight: 600;
  color: var(--fg);
}
.legal__contact dd {
  margin: 0;
  line-height: 1.6;
  color: var(--fg-2);
}
.legal__faq {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.legal__faqItem {
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface);
}
.legal__faqItem summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--fg);
}
.legal__faqItem summary::-webkit-details-marker {
  display: none;
}
.legal__faqItem summary::after {
  content: '+';
  flex-shrink: 0;
  font-family: var(--font-mono);
  color: var(--accent);
}
.legal__faqItem[open] summary::after {
  content: '\2212';
}
.legal__faqBody {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 14px 14px;
}
.legal__faqBody p {
  margin: 0;
  line-height: 1.65;
  color: var(--fg-2);
}

.legal__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: var(--space-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--fg-2);
}
.legal__footLink {
  color: var(--fg-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal__footLink:hover {
  color: var(--accent);
}

@media (max-width: 640px) {
  .legal__head {
    padding: var(--space-5) var(--gutter-mobile) 0;
  }
  .legal__doc {
    padding: var(--space-6) var(--gutter-mobile) var(--space-8);
  }
  .legal__contact {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px 0;
  }
  .legal__contact dd {
    margin-bottom: 8px;
  }
}


/* ---- static site additions ---------------------------------------------------------------- */
/* Both Library layouts are in the page; the viewport picks one, as the app does with a media
   query in JS: tiles and carousel above 768px, the swipe strip below. */
@media (max-width: 768px) { [data-only='desktop'] { display: none !important; } }
@media (min-width: 769px) { [data-only='phone'] { display: none !important; } }
/* The sample cards are on show, not playable: nothing on this page reaches a server. */
[data-static] { pointer-events: none; }
.PlanCards__action[data-soon], .LandingFooter__link[data-soon] { opacity: 0.5; cursor: default; }