/* GENERATED by ds/build-css.js — tokens + component chunks. Do not edit; edit ds/tokens/*.json or ds/components/*.js */
/* GENERATED by ds/build-tokens.js — do not edit. Source: ds/tokens/*.json */
:root[data-theme="afterimage"] {
  --ux-bg: #0A0611;
  --ux-surface: #171024;
  --ux-raised: #1e1533;
  --ux-overlay: rgba(6,4,10,.92);
  --ux-code-bg: #0d0817;
  --ux-ink: #F4EFFB;
  --ux-ink-soft: #d7cae8;
  --ux-ink-muted: #B39BD8;
  --ux-code-ink: #d7cae8;
  --ux-on-brand: #ffffff;
  --ux-brand: #FF2FB9;
  --ux-brand-hover: #e0219f;
  --ux-brand-ink: #ff6fce;
  --ux-brand-tint: rgba(255,47,185,.13);
  --ux-accent: #7A2BFF;
  --ux-accent-ink: #c4b5fd;
  --ux-accent-tint: rgba(122,43,255,.12);
  --ux-grad: linear-gradient(120deg,#FF2FB9,#7A2BFF);
  --ux-glass: rgba(10,6,17,.82);
  --ux-hairline: linear-gradient(90deg,transparent,rgba(255,47,185,.4),rgba(122,43,255,.4),transparent);
  --ux-line: rgba(179,155,216,.14);
  --ux-line-strong: rgba(179,155,216,.30);
  --ux-focus: #FF2FB9;
  --ux-focus-ring: 0 0 0 3px rgba(255,47,185,.45);
  --ux-ok: #35D69B;
  --ux-ok-tint: rgba(53,214,155,.13);
  --ux-warn: #FFC24B;
  --ux-warn-tint: rgba(255,194,75,.13);
  --ux-danger: #FF5C72;
  --ux-danger-tint: rgba(255,92,114,.13);
  --ux-info: #8AA2FF;
  --ux-info-tint: rgba(138,162,255,.13);
  --ux-cite-1: #C2087F;
  --ux-cite-2: #5B21B6;
  --ux-cite-3: #1D4ED8;
  --ux-cite-4: #0E7490;
  --ux-cite-5: #7A3B69;
  --ux-cite-6: #44546A;
  --ux-radius-xs: 6px;
  --ux-radius-sm: 10px;
  --ux-radius-md: 14px;
  --ux-radius-lg: 18px;
  --ux-radius-pill: 99px;
  --ux-space-1: 4px;
  --ux-space-2: 8px;
  --ux-space-3: 12px;
  --ux-space-4: 16px;
  --ux-space-5: 24px;
  --ux-space-6: 34px;
  --ux-space-7: 48px;
  --ux-space-8: 64px;
  --ux-text-display: clamp(30px,6vw,48px);
  --ux-text-h1: clamp(26px,4.5vw,44px);
  --ux-text-h2: clamp(20px,3vw,27px);
  --ux-text-h3: 18px;
  --ux-text-body: 16px;
  --ux-text-small: 14px;
  --ux-text-caption: 12px;
  --ux-text-micro: 11px;
  --ux-weight-normal: 400;
  --ux-weight-medium: 500;
  --ux-weight-semibold: 600;
  --ux-weight-bold: 700;
  --ux-weight-heavy: 800;
  --ux-leading-solid: 1;
  --ux-leading-tight: 1.15;
  --ux-leading-snug: 1.4;
  --ux-leading-normal: 1.55;
  --ux-leading-loose: 1.7;
  --ux-track-tight: -.02em;
  --ux-track-snug: -.01em;
  --ux-track-normal: 0;
  --ux-track-wide: .04em;
  --ux-track-caps: .12em;
  --ux-track-kicker: .2em;
  --ux-font-sans: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ux-font-mono: ui-monospace,'SF Mono',Menlo,monospace;
  --ux-font-display: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ux-shadow-sm: 0 6px 24px rgba(0,0,0,.28);
  --ux-shadow-md: 0 12px 40px rgba(0,0,0,.36);
  --ux-shadow-lg: 0 24px 80px rgba(0,0,0,.5);
  --ux-glow: 0 0 44px rgba(255,47,185,.35);
  --ux-dur-fast: 120ms;
  --ux-dur-base: 200ms;
  --ux-dur-slow: 320ms;
  --ux-ease-out: cubic-bezier(.2,.7,.2,1);
  --ux-ease-in-out: cubic-bezier(.65,.05,.35,.95);
  --ux-plate-bg: #FF2FB9;
  --ux-plate-ink: #0a0a0a;
  --ux-plate-ink-soft: rgba(10,10,10,.78);
  --ux-press-scale: .93;
  --ux-press-opacity: .72;
  --ux-hover-scale: 1.02;
  --ux-dur-press: 100ms;
  --ux-dur-short: 150ms;
  --ux-dur-med: 250ms;
  --ux-ease-press: cubic-bezier(.4,0,.2,1);
  --ux-control-h: 48px;
  --ux-focus-outline: 1px dashed;
  --ux-focus-offset: .125rem;
  --ux-font-headline: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ux-weight-headline: 800;
  --ux-track-headline: -.035em;
  --ux-leading-headline: .95;
  --ux-z-raised: 10;
  --ux-z-sticky: 100;
  --ux-z-overlay: 1000;
  --ux-z-modal: 1100;
  --ux-z-toast: 1200;
  --ux-maxw: 1120px;
  --ux-maxw-narrow: 720px;
  --ux-maxw-wide: 1360px;
}
:root[data-theme="ink"] {
  --ux-bg: #FFFFFF;
  --ux-surface: #FFFFFF;
  --ux-raised: #FFFFFF;
  --ux-overlay: rgba(17,17,19,.72);
  --ux-code-bg: #E8E8EA;
  --ux-ink: #111113;
  --ux-ink-soft: #414142;
  --ux-ink-muted: #707071;
  --ux-code-ink: #414142;
  --ux-on-brand: #111113;
  --ux-brand: #FF2FB9;
  --ux-brand-hover: #D6149A;
  --ux-brand-ink: #111113;
  --ux-brand-tint: rgba(255,47,185,.10);
  --ux-accent: #111113;
  --ux-accent-ink: #111113;
  --ux-accent-tint: rgba(17,17,19,.06);
  --ux-grad: linear-gradient(120deg,#FF2FB9,#D6149A);
  --ux-glass: rgba(255,255,255,.86);
  --ux-hairline: linear-gradient(90deg,transparent,#E8E8EA,transparent);
  --ux-line: #E8E8EA;
  --ux-line-strong: #E8E8EA;
  --ux-focus: #FF2FB9;
  --ux-focus-ring: 0 2px 0 0 #FF2FB9;
  --ux-ok: #111113;
  --ux-ok-tint: rgba(17,17,19,.06);
  --ux-warn: #111113;
  --ux-warn-tint: rgba(17,17,19,.06);
  --ux-danger: #FF2FB9;
  --ux-danger-tint: rgba(255,47,185,.10);
  --ux-info: #111113;
  --ux-info-tint: rgba(17,17,19,.06);
  --ux-cite-1: #111113;
  --ux-cite-2: #414142;
  --ux-cite-3: #707071;
  --ux-cite-4: #111113;
  --ux-cite-5: #414142;
  --ux-cite-6: #707071;
  --ux-radius-xs: 0;
  --ux-radius-sm: 0;
  --ux-radius-md: 0;
  --ux-radius-lg: 0;
  --ux-radius-pill: 0;
  --ux-space-1: 4px;
  --ux-space-2: 8px;
  --ux-space-3: 12px;
  --ux-space-4: 16px;
  --ux-space-5: 24px;
  --ux-space-6: 32px;
  --ux-space-7: 48px;
  --ux-space-8: 64px;
  --ux-text-display: clamp(32px,5vw,40px);
  --ux-text-h1: clamp(32px,5vw,40px);
  --ux-text-h2: 22px;
  --ux-text-h3: 18px;
  --ux-text-body: 15px;
  --ux-text-small: 14px;
  --ux-text-caption: 13px;
  --ux-text-micro: 11px;
  --ux-weight-normal: 400;
  --ux-weight-medium: 500;
  --ux-weight-semibold: 600;
  --ux-weight-bold: 700;
  --ux-weight-heavy: 900;
  --ux-leading-solid: 1;
  --ux-leading-tight: 1.1;
  --ux-leading-snug: 1.25;
  --ux-leading-normal: 1.5;
  --ux-leading-loose: 1.7;
  --ux-track-tight: -.035em;
  --ux-track-snug: -.02em;
  --ux-track-normal: 0;
  --ux-track-wide: .04em;
  --ux-track-caps: .12em;
  --ux-track-kicker: .2em;
  --ux-font-sans: 'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ux-font-mono: 'Space Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --ux-font-display: 'Anton','Impact','Arial Narrow',sans-serif;
  --ux-shadow-sm: 0 1px 2px rgba(17,17,19,.04);
  --ux-shadow-md: 0 8px 24px -12px rgba(17,17,19,.16);
  --ux-shadow-lg: 0 24px 56px -28px rgba(17,17,19,.28);
  --ux-glow: 0 0 0 1px #E8E8EA;
  --ux-dur-fast: 120ms;
  --ux-dur-base: 200ms;
  --ux-dur-slow: 320ms;
  --ux-ease-out: cubic-bezier(.2,.7,.2,1);
  --ux-ease-in-out: cubic-bezier(.65,.05,.35,.95);
  --ux-plate-bg: #FF2FB9;
  --ux-plate-ink: #111113;
  --ux-plate-ink-soft: rgba(17,17,19,.80);
  --ux-press-scale: .93;
  --ux-press-opacity: .72;
  --ux-hover-scale: 1.02;
  --ux-dur-press: 100ms;
  --ux-dur-short: 150ms;
  --ux-dur-med: 250ms;
  --ux-ease-press: cubic-bezier(.4,0,.2,1);
  --ux-control-h: 48px;
  --ux-focus-outline: 2px solid;
  --ux-focus-offset: 2px;
  --ux-font-headline: 'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ux-weight-headline: 900;
  --ux-track-headline: -.035em;
  --ux-leading-headline: 1.1;
  --ux-z-raised: 10;
  --ux-z-sticky: 100;
  --ux-z-overlay: 1000;
  --ux-z-modal: 1100;
  --ux-z-toast: 1200;
  --ux-maxw: 1080px;
  --ux-maxw-narrow: 720px;
  --ux-maxw-wide: 1360px;
  --ux-signal: #FF2FB9;
  --ux-rebel-eye: #FF2FB9;
  --ux-rebel-ink: #111113;
  --ux-rebel-paper: #FFFFFF;
  --ux-rebel-hairline: #E8E8EA;
  --ux-rebel-ground: #111113;
  --ux-award-platinum-a: #40454E;
  --ux-award-platinum-b: #1E2126;
  --ux-award-platinum-ribbon: #2B2F36;
  --ux-award-platinum-star: #EEF0F4;
  --ux-award-gold-a: #E0B456;
  --ux-award-gold-b: #B8862A;
  --ux-award-gold-ribbon: #8A6420;
  --ux-award-gold-star: #6B4F16;
  --ux-award-silver-a: #F1F3F7;
  --ux-award-silver-b: #BFC6D1;
  --ux-award-silver-ribbon: #7A8493;
  --ux-award-silver-star: #586070;
  --ux-peer: #E8E8EA;
  --ux-signal-ink: #C2087F;
  --ux-halo: #FF2FB9;
  --ux-panel: #FF2FB9;
  --ux-panel-ink: #111113;
  --ux-panel-peer: #FFC1EA;
  --ux-panel-line: rgba(17,17,19,.14);
  --ux-tape: #FFFFFF;
  --ux-tape-ink: #111113;
  --ux-glow-signal: 0 0 0 1px #FF2FB9,0 0 22px 2px rgba(255,47,185,.6),0 0 56px 8px rgba(255,47,185,.28);
  --ux-halo-glow: 0 0 140px 44px rgba(255,47,185,.45);
  --ux-font-stamp: 'Space Mono',ui-monospace,Menlo,monospace;
  --ux-radius-badge: 16px;
  --ux-glow-pink: 0 0 44px rgba(255,47,185,.90);
  --ux-glow-white: 0 0 44px rgba(255,255,255,.90);
  --ux-tape-shadow: 0 3px 5px rgba(0,0,0,.18);
  --ux-dur-snap: 120ms;
  --ux-dur-quick: 240ms;
  --ux-dur-base2: 480ms;
  --ux-dur-slow2: 900ms;
  --ux-dur-scan: 1400ms;
  --ux-dur-count: 1100ms;
  --ux-dur-drift: 18s;
  --ux-dur-stagger: 70ms;
  --ux-ease-slap: cubic-bezier(.34,1.8,.64,1);
  --ux-ease-thump: cubic-bezier(.7,0,.84,0);
  --ux-ease-wipe: cubic-bezier(.77,0,.18,1);
}
:root[data-theme="paper"] {
  --ux-bg: #FBFAF8;
  --ux-surface: #FFFFFF;
  --ux-raised: #FFFFFF;
  --ux-overlay: rgba(22,22,26,.86);
  --ux-code-bg: #F3F1EC;
  --ux-ink: #16161A;
  --ux-ink-soft: #3E3E46;
  --ux-ink-muted: #6B6B76;
  --ux-code-ink: #3E3E46;
  --ux-on-brand: #ffffff;
  --ux-brand: #C2087F;
  --ux-brand-hover: #9c0665;
  --ux-brand-ink: #B40776;
  --ux-brand-tint: rgba(194,8,127,.10);
  --ux-accent: #5b21b6;
  --ux-accent-ink: #5b21b6;
  --ux-accent-tint: rgba(91,33,182,.10);
  --ux-grad: linear-gradient(120deg,#C2087F,#9c0665);
  --ux-glass: rgba(251,250,248,.86);
  --ux-hairline: linear-gradient(90deg,transparent,#C2087F,transparent);
  --ux-line: #E7E4DE;
  --ux-line-strong: #D8D4CC;
  --ux-focus: #C2087F;
  --ux-focus-ring: 0 0 0 3px rgba(194,8,127,.35);
  --ux-ok: #0F7A53;
  --ux-ok-tint: rgba(15,122,83,.10);
  --ux-warn: #8A5A06;
  --ux-warn-tint: rgba(138,90,6,.10);
  --ux-danger: #B3243C;
  --ux-danger-tint: rgba(179,36,60,.09);
  --ux-info: #2563EB;
  --ux-info-tint: rgba(37,99,235,.10);
  --ux-cite-1: #C2087F;
  --ux-cite-2: #5B21B6;
  --ux-cite-3: #1D4ED8;
  --ux-cite-4: #0E7490;
  --ux-cite-5: #7A3B69;
  --ux-cite-6: #44546A;
  --ux-radius-xs: 4px;
  --ux-radius-sm: 6px;
  --ux-radius-md: 10px;
  --ux-radius-lg: 14px;
  --ux-radius-pill: 99px;
  --ux-space-1: 4px;
  --ux-space-2: 8px;
  --ux-space-3: 12px;
  --ux-space-4: 16px;
  --ux-space-5: 24px;
  --ux-space-6: 34px;
  --ux-space-7: 48px;
  --ux-space-8: 64px;
  --ux-text-display: clamp(38px,6vw,68px);
  --ux-text-h1: clamp(30px,4.6vw,46px);
  --ux-text-h2: clamp(22px,3vw,31px);
  --ux-text-h3: 19px;
  --ux-text-body: 17px;
  --ux-text-small: 14.5px;
  --ux-text-caption: 12.5px;
  --ux-text-micro: 11px;
  --ux-weight-normal: 400;
  --ux-weight-medium: 500;
  --ux-weight-semibold: 600;
  --ux-weight-bold: 700;
  --ux-weight-heavy: 800;
  --ux-leading-solid: 1;
  --ux-leading-tight: 1.06;
  --ux-leading-snug: 1.4;
  --ux-leading-normal: 1.6;
  --ux-leading-loose: 1.75;
  --ux-track-tight: -.03em;
  --ux-track-snug: -.01em;
  --ux-track-normal: 0;
  --ux-track-wide: .04em;
  --ux-track-caps: .12em;
  --ux-track-kicker: .2em;
  --ux-font-sans: 'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ux-font-mono: 'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --ux-font-display: 'Fraunces',Georgia,'Times New Roman',serif;
  --ux-shadow-sm: 0 1px 2px rgba(22,22,26,.06);
  --ux-shadow-md: 0 10px 26px -14px rgba(22,22,26,.28);
  --ux-shadow-lg: 0 26px 60px -28px rgba(22,22,26,.40);
  --ux-glow: 0 0 0 1px rgba(194,8,127,.18);
  --ux-dur-fast: 120ms;
  --ux-dur-base: 200ms;
  --ux-dur-slow: 320ms;
  --ux-ease-out: cubic-bezier(.2,.7,.2,1);
  --ux-ease-in-out: cubic-bezier(.65,.05,.35,.95);
  --ux-plate-bg: #C2087F;
  --ux-plate-ink: #ffffff;
  --ux-plate-ink-soft: rgba(255,255,255,.87);
  --ux-press-scale: .93;
  --ux-press-opacity: .72;
  --ux-hover-scale: 1.02;
  --ux-dur-press: 100ms;
  --ux-dur-short: 150ms;
  --ux-dur-med: 250ms;
  --ux-ease-press: cubic-bezier(.4,0,.2,1);
  --ux-control-h: 48px;
  --ux-focus-outline: 1px dashed;
  --ux-focus-offset: .125rem;
  --ux-font-headline: 'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ux-weight-headline: 800;
  --ux-track-headline: -.035em;
  --ux-leading-headline: .95;
  --ux-z-raised: 10;
  --ux-z-sticky: 100;
  --ux-z-overlay: 1000;
  --ux-z-modal: 1100;
  --ux-z-toast: 1200;
  --ux-maxw: 1080px;
  --ux-maxw-narrow: 720px;
  --ux-maxw-wide: 1360px;
}
:root {
  --ux-bg: #0a0a0a;
  --ux-surface: #0a0a0a;
  --ux-raised: #131313;
  --ux-overlay: rgba(6,6,6,.92);
  --ux-code-bg: #131313;
  --ux-ink: #ffffff;
  --ux-ink-soft: #ffffff;
  --ux-ink-muted: rgba(255,255,255,.58);
  --ux-code-ink: #ffffff;
  --ux-on-brand: #0a0a0a;
  --ux-brand: #FF2FB9;
  --ux-brand-hover: #e0219f;
  --ux-brand-ink: #ff54c4;
  --ux-brand-tint: rgba(255,47,185,.16);
  --ux-accent: #FF2FB9;
  --ux-accent-ink: #FF2FB9;
  --ux-accent-tint: rgba(255,47,185,.12);
  --ux-grad: linear-gradient(120deg,#FF2FB9,#ff54c4);
  --ux-glass: rgba(10,10,10,.82);
  --ux-hairline: linear-gradient(90deg,transparent,#FF2FB9,transparent);
  --ux-line: rgba(255,255,255,.14);
  --ux-line-strong: rgba(255,255,255,.32);
  --ux-focus: #FF2FB9;
  --ux-focus-ring: 0 0 0 3px rgba(255,47,185,.5);
  --ux-ok: #35D69B;
  --ux-ok-tint: rgba(53,214,155,.13);
  --ux-warn: #FFC24B;
  --ux-warn-tint: rgba(255,194,75,.13);
  --ux-danger: #FF5C72;
  --ux-danger-tint: rgba(255,92,114,.13);
  --ux-info: #8AA2FF;
  --ux-info-tint: rgba(138,162,255,.13);
  --ux-cite-1: #C2087F;
  --ux-cite-2: #5B21B6;
  --ux-cite-3: #1D4ED8;
  --ux-cite-4: #0E7490;
  --ux-cite-5: #7A3B69;
  --ux-cite-6: #44546A;
  --ux-radius-xs: 6px;
  --ux-radius-sm: 10px;
  --ux-radius-md: 14px;
  --ux-radius-lg: 18px;
  --ux-radius-pill: 99px;
  --ux-space-1: 4px;
  --ux-space-2: 8px;
  --ux-space-3: 12px;
  --ux-space-4: 16px;
  --ux-space-5: 24px;
  --ux-space-6: 34px;
  --ux-space-7: 48px;
  --ux-space-8: 64px;
  --ux-text-display: clamp(34px,6.5vw,58px);
  --ux-text-h1: clamp(28px,5vw,46px);
  --ux-text-h2: clamp(20px,3vw,27px);
  --ux-text-h3: 18px;
  --ux-text-body: 16px;
  --ux-text-small: 14px;
  --ux-text-caption: 12px;
  --ux-text-micro: 11px;
  --ux-weight-normal: 400;
  --ux-weight-medium: 500;
  --ux-weight-semibold: 600;
  --ux-weight-bold: 700;
  --ux-weight-heavy: 800;
  --ux-leading-solid: 1;
  --ux-leading-tight: 1.1;
  --ux-leading-snug: 1.4;
  --ux-leading-normal: 1.55;
  --ux-leading-loose: 1.7;
  --ux-track-tight: -.03em;
  --ux-track-snug: -.01em;
  --ux-track-normal: 0;
  --ux-track-wide: .04em;
  --ux-track-caps: .12em;
  --ux-track-kicker: .2em;
  --ux-font-sans: 'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ux-font-mono: 'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --ux-font-display: 'Unbounded',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ux-shadow-sm: 0 2px 10px rgba(0,0,0,.4);
  --ux-shadow-md: 0 10px 30px rgba(0,0,0,.5);
  --ux-shadow-lg: 0 26px 70px rgba(0,0,0,.6);
  --ux-glow: 0 0 44px rgba(255,47,185,.35);
  --ux-dur-fast: 120ms;
  --ux-dur-base: 200ms;
  --ux-dur-slow: 320ms;
  --ux-ease-out: cubic-bezier(.2,.7,.2,1);
  --ux-ease-in-out: cubic-bezier(.65,.05,.35,.95);
  --ux-plate-bg: #FF2FB9;
  --ux-plate-ink: #0a0a0a;
  --ux-plate-ink-soft: rgba(10,10,10,.78);
  --ux-press-scale: .93;
  --ux-press-opacity: .72;
  --ux-hover-scale: 1.02;
  --ux-dur-press: 100ms;
  --ux-dur-short: 150ms;
  --ux-dur-med: 250ms;
  --ux-ease-press: cubic-bezier(.4,0,.2,1);
  --ux-control-h: 48px;
  --ux-focus-outline: 1px dashed;
  --ux-focus-offset: .125rem;
  --ux-font-headline: 'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ux-weight-headline: 800;
  --ux-track-headline: -.035em;
  --ux-leading-headline: .95;
  --ux-z-raised: 10;
  --ux-z-sticky: 100;
  --ux-z-overlay: 1000;
  --ux-z-modal: 1100;
  --ux-z-toast: 1200;
  --ux-maxw: 1120px;
  --ux-maxw-narrow: 720px;
  --ux-maxw-wide: 1360px;
}
:root[data-theme="signal"], [data-theme="signal"] {
  --ux-bg: #0a0a0a;
  --ux-surface: #0a0a0a;
  --ux-raised: #131313;
  --ux-overlay: rgba(6,6,6,.92);
  --ux-code-bg: #131313;
  --ux-ink: #ffffff;
  --ux-ink-soft: #ffffff;
  --ux-ink-muted: rgba(255,255,255,.58);
  --ux-code-ink: #ffffff;
  --ux-on-brand: #0a0a0a;
  --ux-brand: #FF2FB9;
  --ux-brand-hover: #e0219f;
  --ux-brand-ink: #ff54c4;
  --ux-brand-tint: rgba(255,47,185,.16);
  --ux-accent: #FF2FB9;
  --ux-accent-ink: #FF2FB9;
  --ux-accent-tint: rgba(255,47,185,.12);
  --ux-grad: linear-gradient(120deg,#FF2FB9,#ff54c4);
  --ux-glass: rgba(10,10,10,.82);
  --ux-hairline: linear-gradient(90deg,transparent,#FF2FB9,transparent);
  --ux-line: rgba(255,255,255,.14);
  --ux-line-strong: rgba(255,255,255,.32);
  --ux-focus: #FF2FB9;
  --ux-focus-ring: 0 0 0 3px rgba(255,47,185,.5);
  --ux-ok: #35D69B;
  --ux-ok-tint: rgba(53,214,155,.13);
  --ux-warn: #FFC24B;
  --ux-warn-tint: rgba(255,194,75,.13);
  --ux-danger: #FF5C72;
  --ux-danger-tint: rgba(255,92,114,.13);
  --ux-info: #8AA2FF;
  --ux-info-tint: rgba(138,162,255,.13);
  --ux-cite-1: #C2087F;
  --ux-cite-2: #5B21B6;
  --ux-cite-3: #1D4ED8;
  --ux-cite-4: #0E7490;
  --ux-cite-5: #7A3B69;
  --ux-cite-6: #44546A;
  --ux-radius-xs: 6px;
  --ux-radius-sm: 10px;
  --ux-radius-md: 14px;
  --ux-radius-lg: 18px;
  --ux-radius-pill: 99px;
  --ux-space-1: 4px;
  --ux-space-2: 8px;
  --ux-space-3: 12px;
  --ux-space-4: 16px;
  --ux-space-5: 24px;
  --ux-space-6: 34px;
  --ux-space-7: 48px;
  --ux-space-8: 64px;
  --ux-text-display: clamp(34px,6.5vw,58px);
  --ux-text-h1: clamp(28px,5vw,46px);
  --ux-text-h2: clamp(20px,3vw,27px);
  --ux-text-h3: 18px;
  --ux-text-body: 16px;
  --ux-text-small: 14px;
  --ux-text-caption: 12px;
  --ux-text-micro: 11px;
  --ux-weight-normal: 400;
  --ux-weight-medium: 500;
  --ux-weight-semibold: 600;
  --ux-weight-bold: 700;
  --ux-weight-heavy: 800;
  --ux-leading-solid: 1;
  --ux-leading-tight: 1.1;
  --ux-leading-snug: 1.4;
  --ux-leading-normal: 1.55;
  --ux-leading-loose: 1.7;
  --ux-track-tight: -.03em;
  --ux-track-snug: -.01em;
  --ux-track-normal: 0;
  --ux-track-wide: .04em;
  --ux-track-caps: .12em;
  --ux-track-kicker: .2em;
  --ux-font-sans: 'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ux-font-mono: 'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --ux-font-display: 'Unbounded',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ux-shadow-sm: 0 2px 10px rgba(0,0,0,.4);
  --ux-shadow-md: 0 10px 30px rgba(0,0,0,.5);
  --ux-shadow-lg: 0 26px 70px rgba(0,0,0,.6);
  --ux-glow: 0 0 44px rgba(255,47,185,.35);
  --ux-dur-fast: 120ms;
  --ux-dur-base: 200ms;
  --ux-dur-slow: 320ms;
  --ux-ease-out: cubic-bezier(.2,.7,.2,1);
  --ux-ease-in-out: cubic-bezier(.65,.05,.35,.95);
  --ux-plate-bg: #FF2FB9;
  --ux-plate-ink: #0a0a0a;
  --ux-plate-ink-soft: rgba(10,10,10,.78);
  --ux-press-scale: .93;
  --ux-press-opacity: .72;
  --ux-hover-scale: 1.02;
  --ux-dur-press: 100ms;
  --ux-dur-short: 150ms;
  --ux-dur-med: 250ms;
  --ux-ease-press: cubic-bezier(.4,0,.2,1);
  --ux-control-h: 48px;
  --ux-focus-outline: 1px dashed;
  --ux-focus-offset: .125rem;
  --ux-font-headline: 'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ux-weight-headline: 800;
  --ux-track-headline: -.035em;
  --ux-leading-headline: .95;
  --ux-z-raised: 10;
  --ux-z-sticky: 100;
  --ux-z-overlay: 1000;
  --ux-z-modal: 1100;
  --ux-z-toast: 1200;
  --ux-maxw: 1120px;
  --ux-maxw-narrow: 720px;
  --ux-maxw-wide: 1360px;
}
:root[data-theme="v2"] {
  --ux-bg: #f7f7f8;
  --ux-surface: #ffffff;
  --ux-raised: #ffffff;
  --ux-overlay: rgba(19,19,22,.48);
  --ux-code-bg: #f1f0f4;
  --ux-ink: #131316;
  --ux-ink-soft: #2e2e33;
  --ux-ink-muted: #4b5563;
  --ux-code-ink: #2e2e33;
  --ux-on-brand: #ffffff;
  --ux-brand: #c2087f;
  --ux-brand-hover: #a1066a;
  --ux-brand-ink: #FF2FB9;
  --ux-brand-tint: rgba(194,8,127,.10);
  --ux-accent: #5b21b6;
  --ux-accent-ink: #5b21b6;
  --ux-accent-tint: rgba(91,33,182,.10);
  --ux-grad: linear-gradient(120deg,#FF2FB9,#c2087f);
  --ux-glass: rgba(255,255,255,.86);
  --ux-hairline: linear-gradient(90deg,transparent,rgba(194,8,127,.35),transparent);
  --ux-line: #e4e4e9;
  --ux-line-strong: #cfcfd6;
  --ux-focus: #c2087f;
  --ux-focus-ring: 0 0 0 3px rgba(194,8,127,.35);
  --ux-ok: #157f5a;
  --ux-ok-tint: rgba(21,127,90,.10);
  --ux-warn: #9a6a00;
  --ux-warn-tint: rgba(154,106,0,.10);
  --ux-danger: #c22b45;
  --ux-danger-tint: rgba(194,43,69,.10);
  --ux-info: #3554c9;
  --ux-info-tint: rgba(53,84,201,.10);
  --ux-cite-1: #C2087F;
  --ux-cite-2: #5B21B6;
  --ux-cite-3: #1D4ED8;
  --ux-cite-4: #0E7490;
  --ux-cite-5: #7A3B69;
  --ux-cite-6: #44546A;
  --ux-radius-xs: 4px;
  --ux-radius-sm: 6px;
  --ux-radius-md: 10px;
  --ux-radius-lg: 14px;
  --ux-radius-pill: 99px;
  --ux-space-1: 4px;
  --ux-space-2: 8px;
  --ux-space-3: 12px;
  --ux-space-4: 16px;
  --ux-space-5: 24px;
  --ux-space-6: 34px;
  --ux-space-7: 48px;
  --ux-space-8: 64px;
  --ux-text-display: clamp(32px,5.5vw,48px);
  --ux-text-h1: clamp(26px,4.5vw,40px);
  --ux-text-h2: clamp(20px,3vw,24px);
  --ux-text-h3: 18px;
  --ux-text-body: 16px;
  --ux-text-small: 14px;
  --ux-text-caption: 12px;
  --ux-text-micro: 11px;
  --ux-weight-normal: 400;
  --ux-weight-medium: 500;
  --ux-weight-semibold: 600;
  --ux-weight-bold: 600;
  --ux-weight-heavy: 700;
  --ux-leading-solid: 1;
  --ux-leading-tight: 1.15;
  --ux-leading-snug: 1.4;
  --ux-leading-normal: 1.6;
  --ux-leading-loose: 1.7;
  --ux-track-tight: -.02em;
  --ux-track-snug: -.01em;
  --ux-track-normal: 0;
  --ux-track-wide: .04em;
  --ux-track-caps: .1em;
  --ux-track-kicker: .16em;
  --ux-font-sans: Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ux-font-mono: 'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --ux-font-display: Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ux-shadow-sm: 0 1px 2px rgba(19,19,22,.06), 0 4px 12px rgba(19,19,22,.05);
  --ux-shadow-md: 0 2px 4px rgba(19,19,22,.06), 0 10px 28px rgba(19,19,22,.08);
  --ux-shadow-lg: 0 4px 8px rgba(19,19,22,.07), 0 24px 56px rgba(19,19,22,.12);
  --ux-glow: 0 0 0 rgba(0,0,0,0);
  --ux-dur-fast: 120ms;
  --ux-dur-base: 200ms;
  --ux-dur-slow: 320ms;
  --ux-ease-out: cubic-bezier(.2,.7,.2,1);
  --ux-ease-in-out: cubic-bezier(.65,.05,.35,.95);
  --ux-plate-bg: #c2087f;
  --ux-plate-ink: #ffffff;
  --ux-plate-ink-soft: rgba(255,255,255,.87);
  --ux-press-scale: .93;
  --ux-press-opacity: .72;
  --ux-hover-scale: 1.02;
  --ux-dur-press: 100ms;
  --ux-dur-short: 150ms;
  --ux-dur-med: 250ms;
  --ux-ease-press: cubic-bezier(.4,0,.2,1);
  --ux-control-h: 48px;
  --ux-focus-outline: 1px dashed;
  --ux-focus-offset: .125rem;
  --ux-font-headline: Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ux-weight-headline: 800;
  --ux-track-headline: -.035em;
  --ux-leading-headline: .95;
  --ux-z-raised: 10;
  --ux-z-sticky: 100;
  --ux-z-overlay: 1000;
  --ux-z-modal: 1100;
  --ux-z-toast: 1200;
  --ux-maxw: 1120px;
  --ux-maxw-narrow: 720px;
  --ux-maxw-wide: 1360px;
}
:focus-visible{outline:var(--ux-focus-outline) currentColor;outline-offset:var(--ux-focus-offset)}
.press{transition:transform var(--ux-dur-short) var(--ux-ease-press),opacity var(--ux-dur-short) var(--ux-ease-press),background-color var(--ux-dur-med) var(--ux-ease-press)}
@media (hover:hover){.press:hover{transform:scale(var(--ux-hover-scale))}}
.press:active{transform:scale(var(--ux-press-scale));opacity:var(--ux-press-opacity);transition-duration:var(--ux-dur-press)}
@media (prefers-reduced-motion: reduce){:root,:root[data-theme],[data-theme]{--ux-press-scale:1;--ux-hover-scale:1}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}


/* ── ArtHero ── */
/* art-hero.css — ArtHero (#954, STYLE §4). The art is a full-bleed cover image behind the hero; below the hero the page is white again. */
.ah{width:100%;box-sizing:border-box;position:relative;isolation:isolate;overflow:hidden;background:var(--ux-surface);color:var(--ux-ink)}
.ah__art{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.ah__in{position:relative;box-sizing:border-box;max-width:var(--ux-maxw-wide,1360px);margin:0 auto;padding:var(--ux-space-8) var(--ux-space-5)}
/* text sits on a white panel, never straight on the art */
.ah__panel{display:inline-block;max-width:100%;box-sizing:border-box;padding:var(--ux-space-5);background:var(--ux-surface);border:2px solid var(--ux-ink)}
/* recede: the art becomes a faint edge so a capture can be the subject (Ben: full strength was "too distracting") */
.ah--recede .ah__art{opacity:.22;filter:grayscale(.4)}
/* art drift (STYLE §7): subtle, hero idle, only without a reduced-motion preference */
@media (prefers-reduced-motion:no-preference){
  .ah__art{transform:scale(1.06);animation:ah-drift var(--ux-dur-drift,18s) linear infinite alternate}
}
@keyframes ah-drift{from{transform:scale(1.06) translateX(-1.5%)}to{transform:scale(1.06) translateX(1.5%)}}
@media(max-width:640px){.ah__in{padding:var(--ux-space-7) var(--ux-space-4)}}


/* ── AwardChip ── */
/* award-chip.css — Ink award chip + tier toggles (#867). Roles only; sidecar of ds/components/award-chip.js.
 * Figma "Award on cards": chip 38:1970 (28px tall, 14px radius, Geist 600 12.5px, a soft two-layer shadow
 * 0 4 12 + 0 1 2), toggles 44:471 (the Ink chip with the tier's own rosette). The metals are the
 * --ux-award-* roles, the ground follows the Ink mode through surface/line/ink. */
.award-chip{--aw-shadow:0 4px 12px color-mix(in srgb,var(--ux-scrim) 26%,transparent),0 1px 2px color-mix(in srgb,var(--ux-scrim) 34%,transparent);
  display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:28px;gap:6px;padding:0 11px 0 4px;
  background:var(--ux-surface);border:1px solid var(--ux-line);border-radius:14px;color:var(--ux-ink);box-shadow:var(--aw-shadow);
  font:var(--ux-weight-semibold) 12.5px/1 var(--ux-font-sans);letter-spacing:-.01em;white-space:nowrap;pointer-events:none}
.award-chip--compact{width:28px;padding:0}
.award-chip--on-dark{--aw-shadow:0 4px 12px color-mix(in srgb,var(--ux-scrim) 50%,transparent),0 1px 2px color-mix(in srgb,var(--ux-scrim) 60%,transparent)}
.award-chip__rosette{flex:none;display:block;overflow:visible}
.award-chip__word{min-width:0}
/* the slot: floating top-right in the thumbnail frame, 16px in; 12px at a phone */
.ink-card__img,.ih-card__shot{position:relative}
.ink-card__img>.award-chip,.ih-card__shot>.award-chip{position:absolute;top:var(--ux-space-4);right:var(--ux-space-4);z-index:var(--ux-z-raised)}
@media(max-width:640px){.ink-card__img>.award-chip,.ih-card__shot>.award-chip{top:var(--ux-space-3);right:var(--ux-space-3)}}
/* a card hidden by the award filter must really go: .ink-card sets display:grid */
.ink-card[hidden]{display:none}
/* the filter toggles: the Ink chip, with a 16px rosette in place of an icon (Figma: Geist Medium 14px, 36px tall) */
.award-toggles{flex-wrap:wrap}
.award-toggle .award-chip__rosette{margin-left:-2px}


/* ── Badge ── */

.badge{display:inline-flex;align-items:center;gap:5px;font:var(--ux-weight-semibold) var(--ux-text-caption)/1 var(--ux-font-mono);
  letter-spacing:var(--ux-track-wide);padding:5px 10px;border-radius:var(--ux-radius-pill);border:1px solid transparent;white-space:nowrap}
/* sm = the #753 DATA BADGE: mono 700 11px uppercase .06em, pad 3 9, pill. Brand/accent tints. */
.badge--sm{font:700 11px/1 var(--ux-font-mono);letter-spacing:.06em;text-transform:uppercase;padding:3px 9px}
/* neutral */
.badge--neutral.badge--tint{background:var(--ux-surface);color:var(--ux-ink-muted);border-color:var(--ux-line)}
.badge--neutral.badge--outline{background:transparent;color:var(--ux-ink-muted);border-color:var(--ux-line)}
.badge--neutral.badge--solid{background:var(--ux-ink-muted);color:var(--ux-bg)}
/* brand */
.badge--brand.badge--tint{background:var(--ux-brand-tint);color:var(--ux-brand-ink);border-color:var(--ux-brand-tint)}
.badge--brand.badge--outline{background:transparent;color:var(--ux-brand-ink);border-color:var(--ux-brand)}
.badge--brand.badge--solid{background:var(--ux-brand);color:var(--ux-on-brand)}
/* accent */
.badge--accent.badge--tint{background:var(--ux-accent-tint);color:var(--ux-accent-ink);border-color:var(--ux-accent-tint)}
.badge--accent.badge--outline{background:transparent;color:var(--ux-accent-ink);border-color:var(--ux-accent)}
/* signals */
.badge--ok.badge--tint{background:var(--ux-ok-tint);color:var(--ux-ok);border-color:var(--ux-ok-tint)}
.badge--warn.badge--tint{background:var(--ux-warn-tint);color:var(--ux-warn);border-color:var(--ux-warn-tint)}
.badge--danger.badge--tint{background:var(--ux-danger-tint);color:var(--ux-danger);border-color:var(--ux-danger-tint)}
.badge--ok.badge--solid{background:var(--ux-ok);color:var(--ux-bg)}
.badge--warn.badge--solid{background:var(--ux-warn);color:var(--ux-bg)}
.badge--danger.badge--solid{background:var(--ux-danger);color:var(--ux-bg)}


/* ── Brand ── */

/* ────────────────────────────────────────────────────────────────────────────
   BRAND — the wordmark, in every context that shows it.
   Depends on exactly two custom properties: --ux-ink and --ux-grad. A host without
   the token block declares those two itself (see /factory/).
   ──────────────────────────────────────────────────────────────────────────── */

.brand{flex:0 0 auto;font-family:var(--ux-font-display,var(--ux-font-sans,inherit));font-size:clamp(17px,3vw,28px);font-weight:700;letter-spacing:-.01em;color:var(--ux-ink);text-decoration:none;white-space:nowrap}

/* The gradient half. background-clip:text needs a painted background and a transparent
   foreground; the extra letter-spacing compensates for the optical tightening that clipping
   introduces at display weights. */
.brand-ux{background:var(--ux-grad);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.02em}

/* Standalone header variants. The bar variant has no wrapper at all — Nav owns that layout. */
.brand-bar{position:relative;z-index:1;display:flex}
.brand-bar--center{justify-content:center;padding:30px 24px 0}
.brand-bar--back{max-width:760px;margin:0 auto;padding:22px clamp(20px,5vw,32px) 0}

/* The return label. The arrow is a pseudo-element so it is decoration, not text a screen reader
   reads out as a character.

   THE SPACING LIVES ON THE LABEL, NEVER ON THE ANCHOR. A gap here was a 10px word-space
   INSIDE the wordmark: Brand() emits a brand-ux span holding UX, then a BARE TEXT NODE holding
   XRAY, then the brand-back span. A bare text node in a flex container becomes an anonymous flex
   item, which gap then pushes away from UX. Measured 2026-08-25 on the one page that
   renders this modifier — dist/factory/index.html, the page every other page's banner promotes —
   the logo read UX-space-XRAY at a 10px gap while every other page read the wordmark closed up.

   test/brand-canonical.test.js could not see it: the MARKUP is canonical and the split happens at
   layout time. .agent/verify/_render.mjs brand-gap measures the real distance between the end of
   the UX span and the start of the XRAY text node via a Range, which is the only way to give a
   bare text node a box. Keep the spacing as a margin on .brand-back so nothing can ever land
   between UX and XRAY again. */
.brand--back{display:inline-flex;align-items:baseline;border-radius:6px}
.brand-back{font-weight:500;font-size:13px;letter-spacing:0;margin-inline-start:10px;color:var(--ux-ink-muted,var(--ux-ink))}
.brand-back::before{content:'\2190\00a0'}
.brand--back:hover .brand-back,.brand--back:focus-visible .brand-back{color:var(--ux-ink)}

/* Focus is the global dashed outline (tokens.css); only the corner radius is local. */
.brand:focus-visible{border-radius:var(--ux-radius-xs,6px)}

/* INK (#851, mark #859): under the Ink theme the wordmark is lowercase, one weight, no gradient half,
   and the REBEL face (BrandMark, an inline SVG from rebel.js) stands before it. It REPLACES the 6px signal dot: there
   is no ::before any more. The spacing is a gap on the anchor between the SVG and .brand-word; the
   word itself is one span, so a flex gap can never land between UX and XRAY. */
[data-theme="ink"] .brand{font-family:var(--ux-font-sans);font-size:var(--ux-text-body);font-weight:var(--ux-weight-semibold);letter-spacing:0;text-transform:lowercase}
[data-theme="ink"] .brand-ux{background:none;color:inherit;letter-spacing:inherit}
.brand--logo{display:inline-flex;align-items:center;gap:var(--ux-space-2);text-transform:none}
.brand--logo.brand--back{align-items:center}


/* ── Button ── */

/* THE PLATE (#746): hover and active come from the global .press utility (tokens.css), so there is
   no per-variant translateY or glow here. Control height is a token; sm sits 8px under it. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--ux-font-stamp,var(--ux-font-sans));font-weight:var(--ux-weight-bold);letter-spacing:var(--ux-track-wide);text-transform:uppercase;
  border:1px solid transparent;border-radius:var(--ux-radius-pill);cursor:pointer;text-decoration:none;white-space:nowrap;line-height:1;box-sizing:border-box;
  transition:transform var(--ux-dur-short) var(--ux-ease-press),opacity var(--ux-dur-short) var(--ux-ease-press),background-color var(--ux-dur-med) var(--ux-ease-press),border-color var(--ux-dur-med)}
/* the global focus outline is currentColor, which is white on a brand fill: invisible on paper */
.btn:focus-visible{outline-color:var(--ux-ink)}
.section--plate .btn:focus-visible{outline-color:var(--ux-plate-ink)}
.btn__icon{font-size:.9em}
/* sizes */
.btn--sm{font-size:var(--ux-text-caption);padding:0 14px;height:calc(var(--ux-control-h) - 8px)}
.btn--md{font-size:var(--ux-text-small);padding:0 20px;height:var(--ux-control-h)}
.btn--lg{font-size:var(--ux-text-body);padding:0 26px;height:var(--ux-control-h)}
/* primary — solid brand */
.btn--primary{background:var(--ux-brand);color:var(--ux-on-brand);border-color:var(--ux-brand)}
/* secondary — bordered */
.btn--secondary{background:var(--ux-surface);color:var(--ux-ink);border-color:var(--ux-ink)}
.btn--secondary:hover{border-color:var(--ux-brand)}
/* ghost — quiet */
.btn--ghost{background:transparent;color:var(--ux-ink-muted);border-color:var(--ux-line)}
.btn--ghost:hover{color:var(--ux-ink);border-color:var(--ux-line-strong)}
/* ghost-grad — the brand gradient as a BORDER, not a fill. Two backgrounds in one declaration:
   a flat surface clipped to the padding box, the gradient clipped to the border box, so the 1px
   ring is the gradient and the interior stays readable. border-color:transparent is what lets
   the border-box layer show through — a real colour there would paint over it.
   Measured on the paper theme: ink #16161A on surface #FFFFFF is 18.04:1, and the border's
   lightest stop #C2087F on #FFFFFF is 5.78:1, past the 3:1 WCAG 1.4.11 floor for a non-text UI
   boundary. NO BACKTICKS IN THIS CSS BLOCK — it is a template literal.
   Re-measure if a theme changes --ux-grad; a gradient that fails is invisible here. */
.btn--ghost-grad{color:var(--ux-ink);border-color:transparent;
  background:linear-gradient(var(--ux-surface),var(--ux-surface)) padding-box,var(--ux-grad) border-box}
/* plate — for use on a plate band: plate-ink fill, plate-bg text */
.btn--plate{background:var(--ux-plate-ink);color:var(--ux-plate-bg);border-color:var(--ux-plate-ink)}
.btn--plate-ghost{background:transparent;color:var(--ux-plate-ink);border-color:var(--ux-plate-ink)}
/* link — text only (#954, Figma 30:40): Geist bold, ink, underlined; the one non-mono action */
.btn--link{background:transparent;color:var(--ux-ink);padding-left:0;padding-right:0;border-radius:0;height:auto;font-family:var(--ux-font-sans);letter-spacing:0;text-transform:none;text-decoration:underline;text-underline-offset:3px}
.btn--link:hover{text-decoration-thickness:2px}
/* on a pink section the white button keeps ink text, the pink primary would vanish, so primary turns white (Figma 30:44) */
.section--plate .btn--primary{background:var(--ux-surface);border-color:var(--ux-surface)}
/* responsive label — only rendered when a caller passes short. 560px is where the two nav CTAs
   plus the brand stop fitting a 320px-class phone; below it the shorter string is shown and the
   longer one leaves the accessibility tree with display:none. */
.btn__narrow{display:none}
@media(max-width:560px){
  .btn__wide{display:none}
  .btn__narrow{display:inline}
}


/* ── Callout ── */

.callout{display:block;border:1px solid;border-radius:var(--ux-radius-md);padding:var(--ux-space-4) var(--ux-space-4) var(--ux-space-4) var(--ux-space-5);border-left:3px solid;background-clip:padding-box}
.callout__title{font-family:var(--ux-font-sans);font-size:var(--ux-text-small);font-weight:var(--ux-weight-semibold);margin:0 0 var(--ux-space-2);letter-spacing:var(--ux-track-snug);text-transform:uppercase}
.callout__body{font-size:var(--ux-text-small);line-height:var(--ux-leading-normal)}
.callout__body p{margin:0}

/* tone: info — blue signal */
.callout--info{border-color:var(--ux-info);border-left-color:var(--ux-info);background:var(--ux-info-tint)}
.callout--info .callout__title{color:var(--ux-info)}
.callout--info .callout__body{color:var(--ux-ink-soft)}

/* tone: ok — green signal */
.callout--ok{border-color:var(--ux-ok);border-left-color:var(--ux-ok);background:var(--ux-ok-tint)}
.callout--ok .callout__title{color:var(--ux-ok)}
.callout--ok .callout__body{color:var(--ux-ink-soft)}

/* tone: warn — yellow signal */
.callout--warn{border-color:var(--ux-warn);border-left-color:var(--ux-warn);background:var(--ux-warn-tint)}
.callout--warn .callout__title{color:var(--ux-warn)}
.callout--warn .callout__body{color:var(--ux-ink-soft)}

/* tone: danger — red signal */
.callout--danger{border-color:var(--ux-danger);border-left-color:var(--ux-danger);background:var(--ux-danger-tint)}
.callout--danger .callout__title{color:var(--ux-danger)}
.callout--danger .callout__body{color:var(--ux-ink-soft)}

/* tone: brand — gradient signal */
.callout--brand{border-color:var(--ux-brand);border-left-color:var(--ux-brand);background:var(--ux-brand-tint)}
.callout--brand .callout__title{color:var(--ux-brand-ink)}
.callout--brand .callout__body{color:var(--ux-ink-soft)}


/* ── CaptureWall ── */
/* capture-wall.css — Ink capture wall (#852). Full-bleed; tiles share one height, width follows each capture's aspect ratio. */
.ink-wall{width:100vw;margin-left:calc(50% - 50vw);box-sizing:border-box;background:var(--ux-bg);color:var(--ux-ink)}
.ink-wall__head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--ux-space-4);max-width:var(--ux-maxw);margin:0 auto;padding:var(--ux-space-6) var(--ux-space-5) var(--ux-space-4);box-sizing:border-box}
.ink-wall__title{margin:0;font:var(--ux-weight-medium) var(--ux-text-h2)/1.2 var(--ux-font-sans);letter-spacing:var(--ux-track-tight)}
.ink-wall__sub{margin:var(--ux-space-1) 0 0;font:var(--ux-weight-normal) var(--ux-text-small)/1.4 var(--ux-font-sans);color:var(--ux-ink-muted)}
.ink-wall__more{flex:none;font:var(--ux-weight-normal) var(--ux-text-small)/1 var(--ux-font-sans);color:var(--ux-ink);text-decoration:none;white-space:nowrap}
.ink-wall__more:hover{text-decoration:underline}
.ink-wall__tiles{display:flex;gap:1px;margin:0;padding:0;list-style:none;background:var(--ux-line);border-block:1px solid var(--ux-line)}
.ink-wall__tile{flex:calc(var(--ink-ar) * 1000) 1 0;min-width:0;background:var(--ux-surface)}
.ink-wall__link{display:block}
.ink-wall__img{display:block;width:100%;height:auto}
@media (max-width:640px){
  .ink-wall__head{flex-direction:column;align-items:flex-start;padding:var(--ux-space-5) var(--ux-space-4) var(--ux-space-3)}
  .ink-wall__tile:nth-child(n+4){display:none}
}
.ink-wall__text{min-width:0}


/* ── Card ── */

.card{display:block;background:var(--ux-surface);border:1px solid var(--ux-line);border-radius:var(--ux-radius-md);color:inherit;text-decoration:none;overflow:hidden}
.card--radius-lg{border-radius:var(--ux-radius-lg)}
.card--pad-none{padding:0}
.card--pad-sm{padding:var(--ux-space-3)}
.card--pad-md{padding:var(--ux-space-4) 18px}
.card--pad-lg{padding:var(--ux-space-5)}
.card--link{transition:border-color var(--ux-dur-fast) var(--ux-ease-out)}
.card--link:hover{border-color:var(--ux-brand)}
/* non-link card whose CHILD is the real link/button (figure/article shapes) — same feedback,
   fired on :hover (pointer anywhere over the box) or :focus-within (keyboard on the child). */
.card--interactive{transition:border-color var(--ux-dur-fast) var(--ux-ease-out)}
.card--interactive:hover,.card--interactive:focus-within{border-color:var(--ux-brand)}
.card--lift{transition:transform var(--ux-dur-fast) var(--ux-ease-out),box-shadow var(--ux-dur-fast) var(--ux-ease-out),border-color var(--ux-dur-fast) var(--ux-ease-out)}
.card--lift:hover,.card--lift:focus-within{transform:translateY(-2px)}
.card--lift-shadow:hover,.card--lift-shadow:focus-within{box-shadow:var(--ux-shadow-md)}
.card--raised{background:var(--ux-raised)}
.card--brand{border-left:3px solid var(--ux-brand)}


/* ── CheckList ── */

.ckl{display:grid;gap:var(--ux-space-4)}
.ckl-top{display:grid;gap:var(--ux-space-2)}
.ckl-hl{margin:0;max-width:26em;font-family:var(--ux-font-display);font-size:var(--ux-text-h2);font-weight:var(--ux-weight-semibold);line-height:var(--ux-leading-snug);letter-spacing:var(--ux-track-snug);text-transform:none;color:var(--ux-ink)}
.ckl-hl em{font-style:normal;color:var(--ux-brand-ink)}
.ckl-hl--none{color:var(--ux-ink-muted)}
.ckl-unk{margin:0;font-size:var(--ux-text-small);color:var(--ux-ink-muted)}
.ckl-bar{display:flex;gap:var(--ux-space-1);height:var(--ux-space-2)}
.ckl-bar__seg{flex:var(--ckl-n,1) 1 0;min-width:var(--ux-space-2);border-radius:var(--ux-radius-pill)}
.ckl-bar__seg--bad,.ckl-dot--bad{background:var(--ux-danger)}
.ckl-bar__seg--ok,.ckl-dot--ok{background:var(--ux-ok)}
.ckl-bar__seg--note{background:var(--ux-warn)}
.ckl-bar__seg--unk{background:var(--ux-line-strong)}
.ckl-legend{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:var(--ux-space-1) var(--ux-space-4);font-size:var(--ux-text-small);color:var(--ux-ink-soft)}
.ckl-key{display:inline-flex;align-items:center;gap:var(--ux-space-2)}
.ckl-dot{flex:none;display:inline-block;width:var(--ux-space-2);height:var(--ux-space-2);border-radius:var(--ux-radius-pill)}
.ckl-dot--note{border:1px solid var(--ux-warn)}
.ckl-dot--unk{border:1px dashed var(--ux-ink-muted)}
.ckl-rows{margin:0;padding:0;list-style:none;border-top:1px solid var(--ux-line)}
.ckl-row{display:grid;grid-template-columns:minmax(0,13em) minmax(0,1fr) minmax(0,1fr);gap:var(--ux-space-2) var(--ux-space-4);padding:var(--ux-space-3) 0;border-bottom:1px solid var(--ux-line);font-size:var(--ux-text-small);line-height:var(--ux-leading-normal);scroll-margin-top:var(--ux-space-7)}
.ckl-k{display:flex;align-items:baseline;gap:var(--ux-space-2);font-weight:var(--ux-weight-semibold);color:var(--ux-ink)}
.ckl-v,.ckl-x{display:grid;gap:var(--ux-space-2);align-content:start;min-width:0}
.ckl-v p{margin:0;overflow-wrap:anywhere}
.ckl-fact{color:var(--ux-ink-soft)}
.ckl-ev{font-size:var(--ux-text-caption);line-height:var(--ux-leading-snug);color:var(--ux-ink-muted)}
.ckl-fix{margin:0;display:flex;align-items:flex-start;gap:var(--ux-space-2);color:var(--ux-ink)}
.ckl-fix>span{min-width:0;overflow-wrap:anywhere}
.ckl-fix svg{flex:none;width:var(--ux-space-4);height:var(--ux-space-4);margin-top:var(--ux-space-1);fill:none;stroke:var(--ux-brand-ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ckl-more{justify-self:start;font-size:var(--ux-text-caption);color:var(--ux-ink-muted);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ux-line-strong)}
.ckl-more:hover{color:var(--ux-brand-ink)}
.ckl-more:focus-visible{border-radius:var(--ux-radius-xs)}
.ckl-row--note .ckl-k,.ckl-row--unk .ckl-k{font-weight:var(--ux-weight-normal);color:var(--ux-ink-soft)}
.ckl-rest{border-top:1px solid var(--ux-line);border-bottom:1px solid var(--ux-line)}
.ckl-rest>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--ux-space-3);cursor:pointer;padding:var(--ux-space-3) 0;list-style:none;font-size:var(--ux-text-small);font-weight:var(--ux-weight-semibold);color:var(--ux-ink)}
.ckl-rest>summary::-webkit-details-marker{display:none}
.ckl-rest>summary::after{content:"";flex:none;width:var(--ux-space-2);height:var(--ux-space-2);border:solid var(--ux-ink-muted);border-width:0 1px 1px 0;transform:rotate(45deg)}
.ckl-rest[open]>summary::after{transform:rotate(-135deg)}
.ckl-rest>summary:focus-visible{border-radius:var(--ux-radius-xs)}
.ckl-rest__b{display:grid;gap:var(--ux-space-5);padding:0 0 var(--ux-space-4)}
.ckl-grp{display:grid;gap:var(--ux-space-2)}
.ckl-grp__h{margin:0;display:flex;align-items:baseline;gap:var(--ux-space-2);font:var(--ux-weight-semibold) var(--ux-text-micro)/1 var(--ux-font-mono);letter-spacing:var(--ux-track-caps);text-transform:uppercase;color:var(--ux-ink-muted)}
.ckl-grp__h span{font-weight:var(--ux-weight-normal)}
.ckl-pass__l{margin:0;font-size:var(--ux-text-small);color:var(--ux-ink-muted);line-height:var(--ux-leading-snug)}
.ckl-pass__a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ux-line-strong)}
.ckl-pass__a:hover{color:var(--ux-brand-ink)}
.ckl-pass__a:focus-visible{border-radius:var(--ux-radius-xs)}
.ckl-pod{display:inline-flex;flex-wrap:wrap;align-items:center;justify-self:start;gap:var(--ux-space-2);margin-top:var(--ux-space-2);padding:var(--ux-space-1) var(--ux-space-1) var(--ux-space-1) var(--ux-space-4);border:1px solid var(--ux-line-strong);border-radius:var(--ux-radius-pill);background:var(--ux-surface)}
.ckl-pod__l{margin-right:var(--ux-space-1);font-size:var(--ux-text-small);color:var(--ux-ink)}
@media (max-width:720px){
.ckl-row{grid-template-columns:minmax(0,1fr)}
.ckl-pod{border-radius:var(--ux-radius-lg);padding:var(--ux-space-3)}
}


/* ── CheckRow ── */
/* check-row.css — CheckRow (#954, Figma 30:212). The chip carries the state in a word; ink outline = pass, pink fill = fail, grey = not checked. */
.chk{display:flex;align-items:flex-start;gap:var(--ux-space-4);padding:var(--ux-space-4);background:var(--ux-surface);box-sizing:border-box}
.chk__chip{flex:none;white-space:nowrap;min-width:3.5em;box-sizing:border-box;padding:var(--ux-space-1) var(--ux-space-2);text-align:center;border:1px solid var(--ux-ink);color:var(--ux-ink);
  font:var(--ux-weight-bold) var(--ux-text-micro)/1.3 var(--ux-font-stamp,var(--ux-font-mono));letter-spacing:var(--ux-track-caps);text-transform:uppercase}
.chk--fail .chk__chip{background:var(--ux-brand);border-color:var(--ux-brand)}
.chk--na .chk__chip{border-color:var(--ux-ink-muted);color:var(--ux-ink-muted)}
.chk__body{min-width:0}
.chk__title{margin:0;font:var(--ux-weight-heavy) var(--ux-text-h2)/1.15 var(--ux-font-sans);letter-spacing:var(--ux-track-snug);color:var(--ux-ink)}
.chk__detail{margin:var(--ux-space-1) 0 0;font-size:var(--ux-text-small);line-height:var(--ux-leading-snug);color:var(--ux-ink-soft)}
.chk+.chk{border-top:1px solid var(--ux-line)}


/* ── Chip ── */
/* chip.css — the chip (#852, re-skinned #954 to Figma 30:59). Roles only; sidecar of ds/components/chip.js.
   Default: white, 1px ink outline, Space Mono bold. Selected: a pink fill with ink text and no outline. */
.ink-chiprow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ux-space-2)}
.ink-chip{display:inline-flex;align-items:center;gap:var(--ux-space-2);box-sizing:border-box;min-height:36px;padding:0 14px;
  font:var(--ux-weight-bold) var(--ux-text-small)/1 var(--ux-font-stamp,var(--ux-font-sans));color:var(--ux-ink);background:var(--ux-surface);
  border:1px solid var(--ux-ink);border-radius:var(--ux-radius-pill);text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color var(--ux-dur-short) var(--ux-ease-press)}
.ink-chip__icon{flex:none;color:var(--ux-ink)}
.ink-chip__count{color:var(--ux-ink-soft);font-variant-numeric:tabular-nums}
.ink-chip:hover{background:var(--ux-panel-peer,var(--ux-surface))}
.ink-chip--selected,.ink-chip[aria-pressed=true]{background:var(--ux-brand);border-color:var(--ux-brand)}
.ink-chip--selected .ink-chip__count,.ink-chip[aria-pressed=true] .ink-chip__count{color:var(--ux-ink)}
.ink-chip--shuffle{justify-content:center;width:36px;padding:0}
.ink-chip__label{min-width:0}
/* on a pink section (#954): the outlined chip stays white with its ink outline, so it reads on the pink; the selected one flips to ink on white */
.section--plate .ink-chip--selected,.section--plate .ink-chip[aria-pressed=true]{background:var(--ux-ink);border-color:var(--ux-ink);color:var(--ux-surface)}


/* ── Cite ── */

/* Footnote markers and the source list. Quiet by design: a citation should be findable, not loud.
   NO BACKTICKS IN THIS BLOCK. */
/* A FLOOR ON THE MARKER SIZE. .62em against a 14px parent computes to 8.68px, which is what the
   homepage markers actually measured at 390px — a speck, not a reference, and the whole point of
   the apparatus is that a reader can SEE a figure has provenance (issue 200). max() keeps the relative
   sizing where the parent is large and stops it collapsing where the parent is small.
   The tap target is widened separately below: 11px of glyph is legible but not tappable. */
.cite-ref{font-size:max(11px,.62em);line-height:0;vertical-align:super;margin-left:2px}
.cite-ref a{text-decoration:none;color:var(--ux-brand-ink);padding:2px 4px;border-radius:3px;
  background:var(--ux-brand-tint);font-weight:600}
.cite-ref a:hover,.cite-ref a:focus-visible{background:var(--ux-brand-tint);color:var(--ux-brand-ink)}
.cite-notes{margin:44px 0 0;padding:20px 22px;border-top:1px solid var(--ux-line-strong);background:var(--ux-raised);border-radius:var(--ux-radius-md)}
.cite-notes-h{font:700 11.5px/1 var(--ux-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ux-ink-muted);margin:0 0 12px}
.cite-list{margin:0;padding-left:20px}
.cite-list li{font-size:13.5px;line-height:1.65;color:var(--ux-ink-soft);margin:0 0 8px}
.cite-list li:target{background:var(--ux-brand-tint);border-radius:var(--ux-radius-xs);padding:2px 6px;margin-left:-6px}
.cite-src{color:var(--ux-ink);font-family:var(--ux-font-mono);font-size:12.5px;word-break:break-word}
.cite-back{text-decoration:none;color:var(--ux-ink-muted);margin-left:4px}
.cite-back:hover{color:var(--ux-brand-ink)}
.cite-foot{margin:14px 0 0;font-size:12.5px;color:var(--ux-ink-muted)}
/* #753: footnote links rendered browser-default blue (rgb(0,0,238)). Styled by the cite's own classes. */
.cite-foot a,.cite-list li a:not(.cite-back){color:var(--ux-brand-ink);text-decoration:underline;text-underline-offset:2px}
.cite-foot a:hover,.cite-list li a:not(.cite-back):hover{color:var(--ux-brand-ink)}


/* ── CompareRow ── */
/* compare-row.css — CompareRow (#954, Figma 30:257). Title, then one fixed column per site so both sites line up row to row. */
.cmp{display:grid;grid-template-columns:minmax(0,1fr) minmax(7.5rem,12rem) minmax(7.5rem,12rem);align-items:center;gap:var(--ux-space-4);padding:var(--ux-space-4);background:var(--ux-surface);box-sizing:border-box}
.cmp+.cmp{border-top:1px solid var(--ux-line)}
.cmp__title{margin:0;font:var(--ux-weight-heavy) var(--ux-text-h2)/1.15 var(--ux-font-sans);letter-spacing:var(--ux-track-snug);color:var(--ux-ink)}
.cmp__cell{display:flex}
.cmp__chip{display:inline-block;padding:var(--ux-space-1) var(--ux-space-2);border:1px solid var(--ux-ink);color:var(--ux-ink);white-space:nowrap;
  font:var(--ux-weight-bold) var(--ux-text-micro)/1.3 var(--ux-font-stamp,var(--ux-font-mono));letter-spacing:var(--ux-track-caps);text-transform:uppercase}
.cmp__chip--has{background:var(--ux-brand);border-color:var(--ux-brand)}
.cmp__chip--missing{color:var(--ux-ink-soft)}
.cmp__chip--na{border-color:var(--ux-ink-muted);color:var(--ux-ink-muted)}
@media(max-width:560px){.cmp{grid-template-columns:1fr 1fr}.cmp__title{grid-column:1/-1}}


/* ── CopyCssVars ── */
/* copy-css-vars.css — "Copy CSS vars" button (#907). Roles only; sidecar of ds/components/copy-css-vars.js.
 * The button IS the Ink chip (css/chip.css owns its look); this only hides the screen-reader live region. */
.copy-css-vars{position:relative}
.copy-css-vars__live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}


/* ── CorpusSearch ── */

/* ── CorpusSearch — the name→funnel door (#446). Token-only; no literal colours. ── */
.cs{max-width:640px;margin:0 auto;text-align:left}
.cs-label{display:block;font:700 13px/1.4 var(--ux-font-mono);letter-spacing:var(--ux-track-kicker);text-transform:uppercase;color:var(--ux-ink-muted);margin:0 0 10px}
.cs-row{display:flex;gap:0;flex-direction:row;align-items:stretch;background:var(--ux-surface);border:1px solid var(--ux-ink);padding:var(--ux-space-1);box-sizing:border-box}
.cs-row:focus-within{box-shadow:var(--ux-focus-ring)}
/* #954 (Figma 31:69): ONE white box with a 1px ink outline, the input inside it and a pink FIND button; the focus state is the 2px pink underline */
.cs-input{flex:1;min-width:0;background:transparent;border:0;border-radius:0;color:var(--ux-ink);font:var(--ux-weight-medium) 16px/1 var(--ux-font-sans);padding:0 var(--ux-space-3);height:calc(var(--ux-control-h) - 8px);outline:0}
.cs-input::placeholder{color:var(--ux-ink-muted)}
.cs-go{flex:none;height:calc(var(--ux-control-h) - 8px);border:0;cursor:pointer;font:var(--ux-weight-bold) 15px/1 var(--ux-font-stamp,var(--ux-font-sans));letter-spacing:var(--ux-track-wide);text-transform:uppercase;color:var(--ux-on-brand);background:var(--ux-brand);padding:0 var(--ux-space-5);border-radius:0}
@media(hover:hover){.cs-go:hover{background:var(--ux-brand-hover)}}
.cs-go:active{opacity:var(--ux-press-opacity)}
.cs-hint{font:600 13px/1.5 var(--ux-font-mono);color:var(--ux-ink-muted);margin:10px 0 0}
.cs-hint b{color:var(--ux-ink)}
/* results */
.cs-out{margin:14px 0 0}
.cs-list{list-style:none;margin:0;padding:0;border:1px solid var(--ux-line);border-radius:14px;overflow:hidden;background:var(--ux-surface)}
.cs-item + .cs-item{border-top:1px solid var(--ux-line)}
.cs-link{display:flex;align-items:center;gap:10px;padding:12px 14px;text-decoration:none;color:var(--ux-ink);font-family:var(--ux-font-sans);font-size:15px}
.cs-link:hover{background:var(--ux-code-bg)}
.cs-link:focus-visible{outline:2px solid var(--ux-brand);outline-offset:-2px}
.cs-fav{width:20px;height:20px;flex:none;border-radius:4px;object-fit:contain}
.cs-fav-none{display:inline-flex;align-items:center;justify-content:center;font:800 11px/1 var(--ux-font-mono);background:var(--ux-code-bg);color:var(--ux-ink-muted)}
.cs-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-type{font:600 11px/1 var(--ux-font-mono);text-transform:uppercase;letter-spacing:var(--ux-track-kicker);color:var(--ux-ink-muted);border:1px solid var(--ux-line);border-radius:999px;padding:4px 8px;flex:none}
.cs-when{margin-left:auto;font:600 12px/1 var(--ux-font-mono);color:var(--ux-ink-muted);flex:none;white-space:nowrap}
/* the miss — the common case for a recognisable name, and the one that must not read as "empty" */
.cs-none{margin:0;padding:14px;border:1px dashed var(--ux-line-strong);border-radius:14px;font-family:var(--ux-font-sans);font-size:15px;color:var(--ux-ink);background:var(--ux-surface)}
.cs-none b{font-weight:700}
.cs-scan{color:var(--ux-brand-ink);font-weight:800;text-decoration:none;white-space:nowrap}
.cs-scan:hover{text-decoration:underline}
.cs-none-sub{margin:8px 0 0;font:600 12.5px/1.5 var(--ux-font-mono);color:var(--ux-ink-muted)}
.cs-more{margin:8px 0 0;font:600 12.5px/1.5 var(--ux-font-mono);color:var(--ux-ink-muted)}
@media(max-width:520px){.cs-type{display:none}}


/* ── CrawlerModels ── */
/* crawlers.css — Ink "Our crawlers" (#865). Roles only; sidecar of ds/components/crawlers.js. Figma: v2 / Our crawlers,
   desktop 1440 and mobile 390, light and dark. Neon is the 6px signal dot on a model icon tile and nothing else. */
.cw{padding:clamp(var(--ux-space-7),7.8vw,112px) 0}
.cw__in{max-width:1440px;margin:0 auto;padding:0 clamp(var(--ux-space-4),5.6vw,80px);box-sizing:border-box}
.cw__head{display:flex;align-items:center;justify-content:space-between;gap:var(--ux-space-5);margin-bottom:var(--ux-space-6)}
.cw__headtxt{max-width:780px;flex:1 1 auto}
/* #918: Rebel scanning, the ONE troublemaker moment of the lower half (VOICE.md dosage). Decorative; it says nothing the heading does not. */
.cw__rebel{flex:none;display:block}
.cw__title{margin:0;font-family:var(--ux-font-display);font-weight:400;font-synthesis:none;font-size:clamp(44px,5vw,72px);line-height:.92;letter-spacing:0;color:var(--ux-ink)}
.cw__lede{margin:var(--ux-space-3) 0 0;font:var(--ux-weight-medium) clamp(18px,1.4vw,20px)/1.35 var(--ux-font-sans);color:var(--ux-ink-soft)}
.cw__all{flex:none;font:var(--ux-weight-bold) var(--ux-text-small)/1.3 var(--ux-font-sans);color:var(--ux-ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.cw__all:hover{text-decoration-thickness:2px}

/* the model list: one hairline-ruled card, one row per model */
.cw__models{display:flex;flex-direction:column;gap:2px;background:var(--ux-ink);border:2px solid var(--ux-ink);border-radius:var(--ux-radius-md);overflow:hidden}
.cw__model{background:var(--ux-surface)}
.cw__sum{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;column-gap:var(--ux-space-4);padding:var(--ux-space-5) var(--ux-space-6);list-style:none;cursor:pointer}
.cw__model--reserved .cw__sum{grid-template-columns:auto minmax(0,1fr) auto;cursor:default}
.cw__sum::-webkit-details-marker{display:none}
.cw__sum:focus-visible{outline:2px solid var(--ux-ink);outline-offset:-2px}
.cw__tile{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:48px;height:48px;border:1px solid var(--ux-line);border-radius:var(--ux-radius-md);background:var(--ux-bg);color:var(--ux-ink)}
.cw__tile:not(.cw__tile--locked)::after{content:"";position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--ux-signal)}
.cw__tile--locked{color:var(--ux-ink-muted)}
.cw__ico{display:block}
.cw__id{display:flex;flex-direction:column;gap:var(--ux-space-1);min-width:0}
.cw__namerow{display:flex;align-items:center;gap:var(--ux-space-3);flex-wrap:wrap}
.cw__name{font:var(--ux-weight-semibold) 20px/1.3 var(--ux-font-sans);color:var(--ux-ink)}
.cw__model--reserved .cw__name{color:var(--ux-ink-muted)}
.cw__chip{padding:3px var(--ux-space-2);border:1px solid var(--ux-line);border-radius:var(--ux-radius-pill);font:var(--ux-weight-normal) var(--ux-text-micro)/1.3 var(--ux-font-mono);letter-spacing:var(--ux-track-caps);text-transform:uppercase;color:var(--ux-ink-muted);white-space:nowrap}
.cw__tag{font:var(--ux-weight-normal) var(--ux-text-small)/1.45 var(--ux-font-sans);color:var(--ux-ink-muted)}
.cw__ver{font:var(--ux-weight-normal) var(--ux-text-caption)/1.3 var(--ux-font-mono);color:var(--ux-ink-muted);white-space:nowrap}
.cw__model--reserved .cw__ver{font-size:var(--ux-text-micro)}
.cw__chev{flex:none;color:var(--ux-ink);transform:rotate(180deg);transition:transform var(--ux-dur-short) var(--ux-ease-press)}
.cw__model[open] .cw__chev{transform:none}
.cw__body{display:flex;flex-direction:column;gap:var(--ux-space-5);padding:0 var(--ux-space-6) var(--ux-space-6)}

.cw__named{display:flex;flex-direction:column;gap:var(--ux-space-1)}
.cw__namedt{margin:0;font:var(--ux-weight-normal) var(--ux-text-body)/1.5 var(--ux-font-sans);color:var(--ux-ink)}
.cw__srclink{color:inherit;font-style:normal;text-decoration:none}
.cw__srclink:hover{text-decoration:underline}
cite.cw__src{font-style:normal}
.cw__src,.cw__msrc{margin:0;font:var(--ux-weight-normal) var(--ux-text-micro)/1.45 var(--ux-font-mono);color:var(--ux-ink-muted);overflow-wrap:anywhere}

/* the data-family visual (#918): the signal the model finds most, drawn as a share, beside the model's latest lesson */
.cw__split{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:var(--ux-space-5);align-items:start}
.cw__facts--two .cw__fig{font-size:var(--ux-text-h2)}
.cw__facts.cw__facts--two{grid-template-columns:repeat(2,minmax(0,1fr));align-self:stretch}
.cw__viz{display:flex;flex-direction:column;gap:var(--ux-space-2);min-width:0}

/* the fact grid: hairline-ruled cells, figure above label above its source */
.cw__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--ux-line);border:1px solid var(--ux-line);border-radius:var(--ux-radius-md);overflow:hidden}
.cw__fact{display:flex;flex-direction:column;gap:var(--ux-space-3);min-width:0;padding:var(--ux-space-5);background:var(--ux-surface)}
.cw__fig{margin:0;font:var(--ux-weight-normal) var(--ux-text-h1)/1.15 var(--ux-font-mono);letter-spacing:var(--ux-track-normal);color:var(--ux-ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.cw__lab{margin:0;font:var(--ux-weight-normal) var(--ux-text-small)/1.45 var(--ux-font-sans);color:var(--ux-ink)}
.cw__kick{margin:0;font:var(--ux-weight-normal) var(--ux-text-micro)/1.3 var(--ux-font-mono);letter-spacing:var(--ux-track-caps);text-transform:uppercase;color:var(--ux-ink-muted)}
.cw__lesson{display:flex;flex-direction:column;gap:var(--ux-space-2);margin:0;padding:2px 0 2px var(--ux-space-4);border-left:2px solid var(--ux-line-strong)}
.cw__quote{margin:0;font:var(--ux-weight-normal) 20px/1.4 var(--ux-font-sans);color:var(--ux-ink)}

/* the machine */
.cw__machine{margin-top:var(--ux-space-5);padding:var(--ux-space-5);border:1px solid var(--ux-line);border-radius:var(--ux-radius-md)}
.cw__mitems{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ux-space-6);margin-top:var(--ux-space-4)}
.cw__mitem{display:flex;flex-direction:column;gap:var(--ux-space-1);min-width:0}
.cw__mfig{margin:0;font:var(--ux-weight-normal) 24px/1.25 var(--ux-font-mono);color:var(--ux-ink);font-variant-numeric:tabular-nums}
.cw__mlab{margin:0;font:var(--ux-weight-normal) 13px/1.4 var(--ux-font-sans);color:var(--ux-ink)}
.cw__foot{margin:var(--ux-space-5) 0 0;font:var(--ux-weight-normal) var(--ux-text-micro)/1.45 var(--ux-font-mono);color:var(--ux-ink-muted)}

@media (max-width:1000px){
  .cw__split{grid-template-columns:minmax(0,1fr)}
  .cw__facts,.cw__facts.cw__facts--two{grid-template-columns:minmax(0,1fr)}
  .cw__fact--pad{display:none}
  .cw__mitems{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .cw{padding-top:var(--ux-space-7)}
  .cw__head{align-items:flex-start}
  .cw__rebel svg{width:52px;height:52px}
  .cw__head{flex-wrap:wrap;gap:var(--ux-space-3)}
  .cw__all{flex-basis:100%}
  .cw__sum{grid-template-columns:auto minmax(0,1fr) auto;row-gap:var(--ux-space-3);column-gap:var(--ux-space-3);padding:var(--ux-space-4)}
  .cw__ver{grid-column:1 / -1;grid-row:2;white-space:normal}
  .cw__model--reserved .cw__sum{grid-template-columns:auto minmax(0,1fr)}
  .cw__model--reserved .cw__ver{grid-column:1 / -1}
  .cw__body{padding:0 var(--ux-space-4) var(--ux-space-4)}
  .cw__fact{padding:var(--ux-space-3) var(--ux-space-4);gap:var(--ux-space-2)}
  .cw__quote{font-size:var(--ux-text-body)}
  .cw__machine{padding:var(--ux-space-4);margin-top:var(--ux-space-4)}
  .cw__foot{margin-top:var(--ux-space-4)}
  .cw__mitems{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ux-space-4)}
  /* a phone gets the figure's headline and sentence, not its 10x10 field (the same trade the library hero makes): the open model was 1,711px of a 3,022px band, over the 3-screen ceiling (#654) */
  .cw__viz .rarity-rope__field,.cw__viz .rarity-rope__note,.cw__viz .dfam__cap{display:none}
}


/* ── DataFamily ── */
/* DATA FAMILY (#903). The frame. Surface is two local custom properties sets (paper, ink), so the three
   visuals paint themselves from --dfam-* and never from a theme role directly. Every role carries a
   fallback to one that exists on every theme, so a visual rendered on a non-Ink page still reads. */
.dfam{--dfam-ground:var(--ux-surface);--dfam-ink:var(--ux-ink);--dfam-muted:var(--ux-ink-muted);--dfam-peer:var(--ux-peer,var(--ux-line-strong));
  --dfam-lit:var(--ux-signal,var(--ux-brand));--dfam-kick:var(--ux-ink);--dfam-line:var(--ux-ink);--dfam-glow:var(--ux-glow-pink,var(--ux-glow-signal,none));
  position:relative;overflow:hidden;margin:0;padding:var(--ux-space-5);display:flex;flex-direction:column;gap:var(--ux-space-3);
  background:var(--dfam-ground);color:var(--dfam-ink);border:2px solid var(--dfam-line)}
.dfam--ink{--dfam-ground:var(--ux-panel,var(--ux-brand));--dfam-ink:var(--ux-panel-ink,var(--ux-on-brand));--dfam-muted:var(--ux-panel-ink,var(--ux-on-brand));
  --dfam-peer:var(--ux-panel-peer,var(--ux-on-brand));--dfam-lit:var(--ux-surface);--dfam-glow:var(--ux-glow-white,none);--dfam-kick:var(--ux-panel-ink,var(--ux-on-brand));--dfam-line:var(--ux-panel,var(--ux-brand))}
@media (min-width:720px){.dfam{padding:var(--ux-space-6)}}

.dfam__kicker{margin:0;color:var(--dfam-kick);font:var(--ux-weight-bold) var(--ux-text-micro)/1 var(--ux-font-stamp,var(--ux-font-mono));letter-spacing:var(--ux-track-kicker);text-transform:uppercase}
/* the headline is Anton: one weight only, so synthesis is off or the browser fakes a bold that smears the counters */
.dfam__head{margin:0;margin-block:calc(.28em - var(--ux-space-3));font-family:var(--ux-font-display);font-weight:400;font-synthesis:none;font-size:clamp(52px,13vw,96px);line-height:.95;letter-spacing:0;text-transform:uppercase;color:var(--dfam-ink)}
/* ANTON'S FONT BOX IS ~1.5em TALL AT THIS LEADING, so its text range reaches ~.28em past the line box on both sides. The
   #605 text-on-text rule measures ranges, so the kicker above and the sentence below need that much clearance (the frame
   already supplies --ux-space-3 of it as flex gap). Measured on /ux-report/: kicker x head and head x sub both fired. */
.dfam__lit{color:inherit}
.dfam__sub{margin:0;max-width:34em;color:var(--dfam-ink);font-size:var(--ux-text-body);line-height:var(--ux-leading-snug)}
.dfam--ink .dfam__sub{color:var(--dfam-ink)}
.dfam__visual{margin-top:var(--ux-space-3)}
.dfam__cap{margin:var(--ux-space-3) 0 0;color:var(--dfam-muted);font:var(--ux-weight-normal) var(--ux-text-micro)/var(--ux-leading-normal) var(--ux-font-stamp,var(--ux-font-mono));letter-spacing:var(--ux-track-wide)}


/* ── DeviceToggle ── */
/* DeviceToggle (#555) — the desktop/mobile segmented control.
   Lifted verbatim from report.css:884-887, so the report renders byte-identically.

   IN css/ RATHER THAN A TEMPLATE LITERAL IN THE MODULE, and that is forced rather than stylistic:
   ds/components/device-toggle.js reaches the Worker bundle (worker/api.js imports shotCard from
   factory/library-ui.js, which imports this), so it cannot read a file at module scope — and
   issue-375 refuses NEW CSS inside a JS template literal. css/<basename>.css is the convention
   lint-component-css.mjs resolves for exactly this case: a Worker-bundled module whose CSS lives
   on disk. ds/build-css.js reads it at BUILD time, where fs is available, and compiles it into
   ds/ds.css — which the report bundle and every signalShell page both already load. */
.ed-seg{display:inline-flex;border:1px solid var(--ux-line-strong);border-radius:var(--ux-radius-sm);overflow:hidden;background:var(--ux-surface);border:2px solid var(--ux-ink);border-radius:var(--ux-radius-sm);background:var(--ux-surface)}
.ed-seg button{display:flex;align-items:center;gap:7px;border:0;background:none;color:var(--ux-ink-muted);font:var(--ux-weight-semibold) 13px/1 var(--ux-font-sans);padding:9px 14px;cursor:pointer;border-right:1px solid var(--ux-line)}
.ed-seg button:last-child{border-right:0}
.ed-seg button[aria-pressed=true]{background:var(--ux-ink);color:var(--ux-surface)}

/* ── #954 (Figma 45:93): the toggle is a 2px ink box of mono caps, the pressed one a pink fill; and the device mockup it sits above. ── */
.ed-seg button{color:var(--ux-ink);font:var(--ux-weight-bold) var(--ux-text-caption)/1 var(--ux-font-stamp,var(--ux-font-sans));letter-spacing:var(--ux-track-wide);text-transform:uppercase;border-right:0}
.ed-seg button[aria-pressed=true]{background:var(--ux-brand);color:var(--ux-ink)}
.ed-seg button:hover{background:var(--ux-panel-peer,var(--ux-surface))}
.ed-seg button[aria-pressed=true]:hover{background:var(--ux-brand)}

.dm{width:100%;margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--ux-space-4)}
.dm__stage{width:100%;display:flex;justify-content:center}
/* ONE frame whose width and radius morph (desktop: a browser window; mobile: a phone). The height is fixed so the page does not jump. */
.dm__frame{position:relative;box-sizing:border-box;height:clamp(300px,52vw,540px);width:min(100%,800px);overflow:hidden;background:var(--ux-peer,var(--ux-line));border:5px solid var(--ux-ink);border-radius:0;
  transition:width var(--ux-dur-base2,480ms) var(--ux-ease-out),border-radius var(--ux-dur-base2,480ms) var(--ux-ease-out),border-width var(--ux-dur-base2,480ms) var(--ux-ease-out)}
.dm[data-device=mobile] .dm__frame{width:min(100%,260px);border-width:10px;border-radius:var(--ux-radius-badge,16px)}
.dm__img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.dm__img[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.dm__frame{transition:none}}


/* ── Engagement ── */

.stats{display:inline-flex;align-items:center;gap:14px}
.stats .stat{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;
  color:var(--ux-ink-muted);font:var(--ux-weight-semibold) var(--ux-text-caption)/1 var(--ux-font-mono);
  font-variant-numeric:tabular-nums}
.stats .stat-n{min-width:1.6ch;text-align:left}
.stats .eye{cursor:default}
.stats .heart{cursor:pointer;transition:color var(--ux-dur-fast) var(--ux-ease-out)}
.stats .heart:hover{color:var(--ux-brand-ink)}
.stats .heart[aria-pressed="true"]{color:var(--ux-brand-ink)}
.stats .heart:focus-visible{outline:2px solid var(--ux-brand);outline-offset:3px;border-radius:6px}


/* ── FAQ ── */

.faq{background:var(--ux-bg);padding:var(--ux-space-7) var(--ux-space-4);position:relative}
.faq::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(1180px,90%);height:1px;background:var(--ux-hairline)}
.faq__wrap{max-width:760px;margin:0 auto}
.faq-item{background:var(--ux-surface);border:1px solid var(--ux-line);border-radius:var(--ux-radius-lg);margin-bottom:var(--ux-space-3);transition:border-color var(--ux-dur-base) var(--ux-ease-out),box-shadow var(--ux-dur-base) var(--ux-ease-out)}
.faq-item:hover{border-color:color-mix(in srgb,var(--ux-accent) 35%,transparent)}
.faq-item[open]{border-color:color-mix(in srgb,var(--ux-brand) 35%,transparent);box-shadow:0 8px 32px color-mix(in srgb,var(--ux-accent) 12%,transparent)}
.faq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--ux-space-4);padding:var(--ux-space-5) var(--ux-space-6);font-family:var(--ux-font-sans);font-size:var(--ux-text-h3);font-weight:var(--ux-weight-semibold);color:var(--ux-ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--ux-font-mono);font-size:20px;color:var(--ux-brand-ink);flex:none;transition:transform var(--ux-dur-base) var(--ux-ease-out)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{margin:0;padding:0 var(--ux-space-6) var(--ux-space-5);color:var(--ux-ink-muted);font-size:var(--ux-text-small);line-height:var(--ux-leading-normal)}
@media(max-width:760px){
  .faq{padding:var(--ux-space-7) var(--ux-space-4)}
  .faq-item summary{padding:var(--ux-space-5) var(--ux-space-4);font-size:var(--ux-text-body)}
  .faq-item p{padding:0 var(--ux-space-4) var(--ux-space-4)}
}


/* ── DataFigure ── */

.datafig{margin:var(--ux-space-5) 0;padding:var(--ux-space-4);border:1px solid var(--ux-line);border-radius:var(--ux-radius-md);background:var(--ux-surface)}
/* NOT a coloured left border. Ben, 2026-08-19: "critical rule; no left border color, ever."
   scripts/lint-no-left-border.mjs ratchets these down and refused the 20th, which was this line.
   The lead variant earns its emphasis from a tint and a stronger edge instead — same signal, none
   of the treatment he named. */
.datafig--lead{background:color-mix(in srgb,var(--ux-brand) 4%,var(--ux-surface));border-color:var(--ux-line-strong)}
.datafig__title{font-family:var(--ux-font-sans);font-size:var(--ux-text-small);font-weight:var(--ux-weight-semibold);color:var(--ux-ink);margin:0 0 var(--ux-space-3);letter-spacing:var(--ux-track-snug)}
.datafig__body{margin:0}
.datafig__cap{font-family:var(--ux-font-mono);font-size:var(--ux-text-caption);line-height:var(--ux-leading-normal);color:var(--ux-ink-muted);margin:var(--ux-space-3) 0 0}
.datafig__src{color:var(--ux-ink-muted);text-decoration:underline}
.datafig__big{font-family:var(--ux-font-display);font-weight:var(--ux-weight-heavy);font-size:clamp(44px,11vw,84px);line-height:.95;letter-spacing:var(--ux-track-tight);color:var(--ux-brand-ink)}
.datafig__unit{font-size:.42em;margin-left:.12em;color:var(--ux-ink-muted)}


/* ── FinalCta ── */

/* #753: the closing band IS a Plate (plate-bg / plate-ink), not the old Signal neon + white card.
   h2 in the headline face; the scan form is the standard Input + 48px pill Button (scan-block.js),
   inverted to plate-ink on a plate. .cta-card stays defined ONLY because build-signal-pages.js's
   signup form panel still borrows it (see scripts/primitives-allow.json). */
.finalcta{background:var(--ux-plate-bg);color:var(--ux-plate-ink);width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:clamp(56px,8vw,96px) 0;text-align:center;position:relative;overflow:hidden}
.finalcta-chip{display:block;font:700 12px/1 var(--ux-font-mono);letter-spacing:var(--ux-track-kicker);text-transform:uppercase;color:var(--ux-plate-ink);margin:0 0 16px}
.finalcta h2{font-family:var(--ux-font-headline);color:var(--ux-plate-ink);font-size:var(--ux-text-h2);line-height:1.1;letter-spacing:-.02em;margin:0 0 28px;font-weight:var(--ux-weight-headline);text-wrap:balance;overflow-wrap:break-word}
.finalcta .scanzone{max-width:660px;margin:0 auto}
.cta-card{max-width:660px;margin:0 auto;position:relative;background:#fff;border-radius:22px;padding:clamp(20px,3vw,30px);box-shadow:0 30px 70px rgba(0,0,0,.28)}


/* ── FindingRow ── */

.fr{background:var(--ux-surface);border:1px solid var(--ux-line);border-radius:var(--ux-radius-md);padding:var(--ux-space-4) var(--ux-space-4) var(--ux-space-4);display:grid;gap:var(--ux-space-3)}
/* NO COLOURED LEFT BORDER (Ben, 2026-08-19: "critical rule; no left border color, ever").
   These five were a 3px severity stripe down the side of every FindingRow — the accent-bar card
   that reads as generic AI output, and the specific thing Ben named on the report page. Tone is
   still expressed, just not as a rail: the status pill already carries the word AND its colour,
   which is the accessible signal anyway (a colour-only bar says nothing to a screen reader).
   The tone classes are KEPT as hooks, so callers do not change and a future treatment has
   somewhere to attach — they simply no longer paint an edge. Gated by
   scripts/lint-no-left-border.mjs. */
.fr-tone-ok,.fr-tone-warn,.fr-tone-danger,.fr-tone-neutral,.fr-tone-brand{border-left:0}
.fr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ux-space-3);flex-wrap:wrap}
.fr-headline{margin:0;font-size:var(--ux-text-body);font-weight:var(--ux-weight-semibold);color:var(--ux-ink);line-height:var(--ux-leading-snug);flex:1;min-width:220px}
.fr-status{display:inline-flex;align-items:center;gap:8px;flex:none;padding:4px 10px 4px 4px;border-radius:var(--ux-radius-pill);background:var(--ux-raised);border:1px solid var(--ux-line)}
.fr-status-flat{padding:5px 12px}
.fr-status-meter{width:44px;height:6px;border-radius:var(--ux-radius-pill);background:var(--ux-line);overflow:hidden;flex:none}
.fr-status-meter i{display:block;height:100%;border-radius:var(--ux-radius-pill)}
.fr-status-ok .fr-status-meter i{background:var(--ux-ok)}
.fr-status-warn .fr-status-meter i{background:var(--ux-warn)}
.fr-status-danger .fr-status-meter i{background:var(--ux-danger)}
.fr-status-neutral .fr-status-meter i{background:var(--ux-ink-muted)}
.fr-status-brand .fr-status-meter i{background:var(--ux-brand)}
.fr-status-val{font:var(--ux-weight-bold) var(--ux-text-small)/1 var(--ux-font-mono);color:var(--ux-ink);font-variant-numeric:tabular-nums}
.fr-status-val small{font-weight:var(--ux-weight-medium);color:var(--ux-ink-muted)}
.fr-status-l{font-size:var(--ux-text-caption);font-weight:var(--ux-weight-semibold);letter-spacing:var(--ux-track-wide);text-transform:uppercase;color:var(--ux-ink-muted)}
.fr-status-ok .fr-status-l{color:var(--ux-ok)}
.fr-status-warn .fr-status-l{color:var(--ux-warn)}
.fr-status-danger .fr-status-l{color:var(--ux-danger)}
.fr-status-brand .fr-status-l{color:var(--ux-brand-ink)}
.fr-evidence-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fr-ev{display:grid;gap:5px}
.fr-ev-label{font-size:var(--ux-text-small);font-weight:var(--ux-weight-semibold);color:var(--ux-ink)}
.fr-ev-quotes{display:flex;flex-wrap:wrap;gap:7px}
.fr-ev-quotes q{quotes:none;font-family:var(--ux-font-mono);font-size:var(--ux-text-caption);color:var(--ux-ink);background:var(--ux-brand-tint);border:1px solid var(--ux-line);border-radius:7px;padding:3px 10px}
.fr-ev-quotes q::before,.fr-ev-quotes q::after{content:'"';color:var(--ux-ink-muted)}
.fr-ev-note{font-size:var(--ux-text-caption);color:var(--ux-ink-muted)}
.fr-evidence{margin:0}
.fr-evidence-empty{margin:0;font-size:var(--ux-text-small);color:var(--ux-ink-muted);font-style:italic}
.fr-gaps{border-top:1px dashed var(--ux-line);padding-top:var(--ux-space-3);display:grid;gap:8px}
.fr-gaps-h{margin:0;font-family:var(--ux-font-mono);font-size:var(--ux-text-micro);letter-spacing:var(--ux-track-caps);text-transform:uppercase;color:var(--ux-ink-muted)}
.fr-gaps-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.fr-gap{display:inline-flex;align-items:baseline;gap:7px;padding:5px 12px;border-radius:999px;border:1px dashed var(--ux-line);font-size:var(--ux-text-caption);color:var(--ux-ink-muted)}
.fr-gap-label{color:var(--ux-ink);font-weight:var(--ux-weight-medium)}
.fr-gap-note{font-size:var(--ux-text-caption);color:var(--ux-ink-muted)}
/* actionHtml slot (e.g. CategoryResult's per-tactic dispute button) sits last in the chip. */
.fr-gap > .fr-gap-action{margin-left:2px}
.fr-gaps-empty{margin:0;font-size:var(--ux-text-small);color:var(--ux-ink-muted)}
.fr-measurement{margin:0;font-family:var(--ux-font-mono);font-size:var(--ux-text-micro);color:var(--ux-ink-muted);line-height:var(--ux-leading-normal);border-top:1px solid var(--ux-line);padding-top:var(--ux-space-2)}
.fr-detail{margin:0}
.fr-detail-sum{cursor:pointer;font-size:var(--ux-text-caption);font-weight:var(--ux-weight-semibold);color:var(--ux-accent);list-style:none}
.fr-detail-sum::-webkit-details-marker{display:none}
.fr-detail-body{margin-top:var(--ux-space-3)}


/* ── Footer ── */

/* #255: overflow:clip (not the default visible) is THE FIX, not a container clamp. Nothing about
   .footer's own height changes and no report row is touched — this crops exactly one thing, the
   decorative .footer__wordmark below, at the box that already owns it. Full story on that rule. */
.footer{background:var(--ux-bg);padding:var(--ux-space-7) var(--ux-space-4) var(--ux-space-5);position:relative;overflow:clip}
.footer::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(1180px,90%);height:1px;background:var(--ux-hairline)}
.footer__wrap{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--ux-space-6)}
/* The giant ghost mark. LIVES HERE, not in signal-shell.js, because the component that emits the
   markup must own its rule: while it sat in the shell, every /ux-report/ page rendered a naked,
   full-size "UXXRAY" above the footer columns, since that chain never loads the shell's CSS.
   Colour is theme-derived rather than the old rgba(255,255,255,.035) — a white ghost is invisible
   on the paper ground every surface now uses, and a raw rgba is what the token ratchet exists to
   stop.
   The bottom:-6vw below is DELIBERATE bleed (#217) — the mark is meant to hang off the footer's
   own edge, the same way its right edge already bleeds past the viewport. On the homepage
   (signal-shell.js) that bleed is invisible because its body element carries an inline
   position:relative style that happens to size the document to its own content and leaves the
   tail unreachable; a /ux-report/<slug> page (components.js PageShell, no such body style) has no
   such accident, so the SAME geometry — measured live, #255: the wordmark's own box reaches 86px
   (1440px) / 24px (390px) past .footer's bottom edge — was landing directly in
   document.documentElement.scrollHeight as 119px / 37px of genuine, scrollable,
   nothing-painted-there space below the footer. The overflow:clip added to .footer above crops the
   bleed at the box that already owns it, matching what already (accidentally) happens elsewhere,
   without relying on a body-level accident. It does not touch the html,body overflow-x:clip pair
   (report.css ~line 448) and does not sit anywhere near the sticky docs sidebar's ancestor chain,
   so neither of that rule's two known failure modes applies here. */
.footer__wordmark{position:absolute;right:clamp(-40px,-2vw,0px);bottom:-6vw;font-family:var(--ux-font-display,var(--ux-font-sans));font-weight:var(--ux-weight-bold);font-size:clamp(120px,20vw,320px);line-height:1;color:color-mix(in srgb,var(--ux-ink) 5%,transparent);letter-spacing:-.03em;pointer-events:none;white-space:nowrap;z-index:0;user-select:none}
/* LAYOUT ONLY (#239). The wordmark's font, size, weight and tracking come from .brand in
   ds/components/brand.js — this rule used to restate all four and render a different logo. */
.footer__mark{margin:0 0 10px}
/* The .footer__mark em rule was REMOVED 2026-08-11 (#239). It painted the gradient on an <em> the mark
   has not contained since it became Brand({variant:'plain'}), which emits
   <span class="brand"><span class="brand-ux">UX</span>XRAY</span>. Verified against the live
   page: zero <em> inside any footer__mark. Dead CSS that LOOKED like it owned the wordmark's
   gradient — the real gradient comes from .brand-ux in ds/components/brand.js. Exactly the
   class of never-matching selector #147 exists to find. */
.footer__tag{font-family:var(--ux-font-mono);font-size:var(--ux-text-micro);letter-spacing:var(--ux-track-wide);text-transform:uppercase;color:var(--ux-ink-muted);margin:0}
.footer__col h2{font-family:var(--ux-font-mono);font-size:12px;letter-spacing:var(--ux-track-kicker);text-transform:uppercase;color:var(--ux-ink-muted);margin:0 0 18px;font-weight:700;line-height:1}
.footer__col ul{list-style:none;margin:0;padding:0}
.footer__col li{margin:0}
.footer__col a{color:var(--ux-ink);opacity:.75;text-decoration:none;font-size:var(--ux-text-small);font-family:var(--ux-font-sans);transition:opacity var(--ux-dur-fast) var(--ux-ease-out),color var(--ux-dur-fast) var(--ux-ease-out)}
.footer__col a:hover{opacity:1;color:var(--ux-brand-ink)}
.footer__legal{max-width:1180px;margin:var(--ux-space-6) auto 0;padding-top:var(--ux-space-4);border-top:1px solid var(--ux-line);display:flex;justify-content:space-between;gap:var(--ux-space-4);flex-wrap:wrap}
.footer__legal p{font-family:var(--ux-font-mono);font-size:12px;color:var(--ux-ink-muted);opacity:.6;margin:0}
/* ── INK (#851): .footer--ink only. Same dot wordmark as the bar; sans throughout (no mono caps). ── */
.footer--ink{background:var(--ux-bg);padding:var(--ux-space-7) var(--ux-space-5) var(--ux-space-6);border-top:2px solid var(--ux-ink)}
.footer--ink::before{display:none}
.footer--ink .footer__wrap{max-width:var(--ux-maxw);grid-template-columns:1fr repeat(3,minmax(140px,auto));gap:var(--ux-space-7)}
.footer--ink .footer__tag{font-family:var(--ux-font-stamp,var(--ux-font-mono));font-weight:var(--ux-weight-bold);font-size:var(--ux-text-small);letter-spacing:0;text-transform:none;color:var(--ux-ink)}
.footer--ink .footer__col h2{font-family:var(--ux-font-stamp,var(--ux-font-mono));font-size:var(--ux-text-micro);font-weight:var(--ux-weight-bold);letter-spacing:var(--ux-track-kicker);text-transform:uppercase;color:var(--ux-ink-muted);margin:0 0 var(--ux-space-3)}
.footer--ink .footer__col li{margin:0 0 var(--ux-space-2)}
.footer--ink .footer__col a{color:var(--ux-ink);opacity:1;font-size:var(--ux-text-body)}
.footer--ink .footer__col a:hover{text-decoration:underline;text-underline-offset:4px}
.footer--ink .footer__legal{max-width:var(--ux-maxw);border-top:1px solid var(--ux-line);margin-top:var(--ux-space-7)}
.footer--ink .footer__legal p{font-family:var(--ux-font-sans);font-size:var(--ux-text-caption);color:var(--ux-ink-muted);opacity:1}
@media(max-width:760px){
  .footer--ink{padding:var(--ux-space-7) var(--ux-space-4) var(--ux-space-5)}
  .footer--ink .footer__wrap{grid-template-columns:1fr;gap:var(--ux-space-5)}
  .footer--ink .footer__legal{margin-top:var(--ux-space-5)}
}
@media(max-width:760px){
  .footer{padding:var(--ux-space-7) var(--ux-space-4) var(--ux-space-5)}
  .footer__wrap{grid-template-columns:1fr;gap:var(--ux-space-7)}
  .footer__legal{flex-direction:column}
}


/* ── GapSocket ── */
/* GAP SOCKET (#903). A --cols wide board of sockets (count and filled share computed in gap-socket.js). */
.gap-socket__board{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ux-space-6)}
.gap-socket__grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--ux-space-3);width:min(100%,17rem)}
.gap-socket__cell{display:block;aspect-ratio:1;border-radius:50%;box-sizing:border-box}
.gap-socket__cell--peer{background:var(--dfam-ink)}
.gap-socket__cell--empty{border:2px solid var(--dfam-peer)}
.gap-socket__cell--hole{border:2px dashed var(--dfam-lit);box-shadow:var(--dfam-glow);position:relative}
.gap-socket__cell--hole::after{content:"";position:absolute;inset:28%;border-radius:50%;background:var(--dfam-lit)}
.gap-socket__aside{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ux-space-2)}
.gap-socket__who{margin:var(--ux-space-3) 0 0;color:var(--dfam-kick);font:var(--ux-weight-bold) var(--ux-text-micro)/1 var(--ux-font-stamp,var(--ux-font-mono));letter-spacing:var(--ux-track-caps);text-transform:uppercase}
.gap-socket__legend{margin:0;color:var(--dfam-muted);font-size:var(--ux-text-small);line-height:var(--ux-leading-snug)}


/* ── Link ── */
/* Link — The Plate (#746). Underline draws in on hover only (never on touch). The same rule applies
   to prose scopes below; bare `a` is deliberately NOT included. */
.link,.section__blurb a{text-decoration:none;color:inherit;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat}
@media (hover:hover){.link:hover,.section__blurb a:hover{animation:ux-link-grow var(--ux-dur-med) var(--ux-ease-press) forwards}}
@keyframes ux-link-grow{30%{background-size:15% 1px}40%{background-size:20% 1px}45%{background-size:60% 1px}50%{background-size:70% 1px}100%{background-size:100% 1px}}


/* ── LockedRow ── */
/* locked-row.css — LockedRow (#954, Figma 30:228). White row, 1px ink outline. The lock chip is WHITE with ink text, a 2px ink border and a hard pink offset (#960: the old ink chip with 11px pink text read as a dark blot on the pink section, Ben: "black toast label is invisible"; ink on white is 18.86:1, ink on pink hover 5.71:1). */
.lr{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ux-space-4);padding:var(--ux-space-4);background:var(--ux-surface);border:1px solid var(--ux-ink);box-sizing:border-box}
.lr__main{min-width:0;flex:1;display:flex;flex-direction:column;gap:var(--ux-space-2)}
.lr__title{margin:0;font:var(--ux-weight-heavy) var(--ux-text-h2)/1.15 var(--ux-font-sans);letter-spacing:var(--ux-track-snug);color:var(--ux-ink);overflow-wrap:anywhere}
.lr__detail{margin:0;font-size:var(--ux-text-small);line-height:var(--ux-leading-snug);color:var(--ux-ink-soft)}
/* the stand-in for hidden text: a drawn grey bar with no characters in it */
.lr__bar{display:block;width:min(100%,320px);height:12px;background:var(--ux-peer,var(--ux-line))}
.lr__chip{flex:none;padding:var(--ux-space-2) var(--ux-space-3);font:var(--ux-weight-bold) var(--ux-text-caption)/1 var(--ux-font-stamp,var(--ux-font-mono));letter-spacing:var(--ux-track-caps);text-transform:uppercase;text-decoration:none;white-space:nowrap}
.lr__chip--lock{background:var(--ux-surface);color:var(--ux-ink);border:2px solid var(--ux-ink);box-shadow:3px 3px 0 var(--ux-brand)}
.lr__chip--found{background:var(--ux-brand);color:var(--ux-ink)}
a.lr__chip--lock:hover,a.lr__chip--lock:focus-visible{background:var(--ux-brand);color:var(--ux-ink)}
.lr+.lr{margin-top:var(--ux-space-2)}
.lr--locked,.lr--open{border-color:var(--ux-ink)}


/* ── Logo ── */

/* the Logo stylesheet, a CSS chunk of this module (#954, STYLE §5, Figma 27:2163). Roles only.
   --logo-size is the FONT size of the letters; the face is 1em, so one number scales the whole mark. */
.logo{--logo-size:28px;--logo-x:var(--ux-signal);--logo-text:var(--ux-ink);--logo-teeth:var(--ux-surface);
  display:inline-flex;align-items:center;gap:0;position:relative;box-sizing:border-box;font-family:var(--ux-font-display);font-weight:400;font-synthesis:none;
  font-size:var(--logo-size);line-height:1;letter-spacing:0;color:var(--logo-text);text-transform:uppercase;white-space:nowrap}
.logo--on-pink{--logo-x:var(--ux-surface)}
.logo__u,.logo__ray{display:block;line-height:1}
.logo__face{display:block;flex:none;width:1.02em;height:1.02em;margin:0 -.08em;overflow:visible}
.logo__bowl{fill:var(--logo-text)}
.logo__teeth{stroke:var(--logo-teeth);transform-box:fill-box;transform-origin:center top}
.logo__eye{stroke:var(--logo-x)}

.logo--nav{--logo-size:30px}
.logo--hero{--logo-size:clamp(56px,9vw,104px)}
.logo--404{--logo-size:clamp(48px,8vw,88px)}
.logo--scan{--logo-size:30px;overflow:hidden}
.logo--error{--logo-size:clamp(44px,7vw,72px)}
.logo--badge{--logo-size:44px;padding:var(--ux-space-3) var(--ux-space-4);border:3px solid var(--logo-text);outline:1px solid var(--logo-text);outline-offset:-8px;transform:rotate(-4deg);background:var(--ux-surface)}
.logo--on-pink.logo--badge{background:transparent}

/* favicon: the face alone on a tile. radius-badge is one of the two places a radius is allowed (R8). */
.logo--favicon{--logo-size:64px;width:var(--logo-size);height:var(--logo-size);align-items:center;justify-content:center;background:var(--ux-surface);border:2px solid var(--logo-text);border-radius:var(--ux-radius-badge,16px)}
.logo--favicon .logo__face{width:82%;height:82%;margin:0}
.logo--favicon.logo--on-pink{background:var(--ux-brand);border-color:var(--ux-brand)}

/* THE GRIN. Transforms only, about each part's own box; the outer eye group is animated, the inner one keeps the pose. */
.logo__e{transform-box:fill-box;transform-origin:center}
.logo__jaw{transform-box:fill-box;transform-origin:center top}
@media (prefers-reduced-motion:no-preference){
  .logo__e{transition:transform var(--ux-dur-quick,240ms) var(--ux-ease-slap,cubic-bezier(.34,1.8,.64,1))}
  a.brand:hover .logo__e--l,.logo--hero:hover .logo__e--l,.logo--404:hover .logo__e--l,.logo--scan:hover .logo__e--l,a.brand:focus-visible .logo__e--l{transform:rotate(8deg)}
  a.brand:hover .logo__e--r,.logo--hero:hover .logo__e--r,.logo--404:hover .logo__e--r,.logo--scan:hover .logo__e--r,a.brand:focus-visible .logo__e--r{transform:rotate(-10deg)}
  a.brand:hover .logo__jaw,.logo--hero:hover .logo__jaw,.logo--404:hover .logo__jaw,.logo--scan:hover .logo__jaw,a.brand:focus-visible .logo__jaw{animation:logo-grin-jaw var(--ux-dur-base,480ms) var(--ux-ease-out,ease-out) both}
  a.brand:hover .logo__teeth,.logo--hero:hover .logo__teeth,.logo--404:hover .logo__teeth,.logo--scan:hover .logo__teeth,a.brand:focus-visible .logo__teeth{animation:logo-grin-teeth var(--ux-dur-base,480ms) var(--ux-ease-out,ease-out) both}
  /* wake: the eyes snap in (right, then left), the jaw draws open and the teeth bite twice, then it settles on the resting face */
  .logo--wake .logo__e--r{animation:logo-wake-eye var(--ux-dur-base,480ms) var(--ux-ease-slap,cubic-bezier(.34,1.8,.64,1)) 120ms both}
  .logo--wake .logo__e--l{animation:logo-wake-eye var(--ux-dur-base,480ms) var(--ux-ease-slap,cubic-bezier(.34,1.8,.64,1)) 240ms both}
  .logo--wake .logo__jaw{animation:logo-wake-jaw var(--ux-dur-slow,900ms) var(--ux-ease-out,ease-out) 360ms both}
  .logo--wake .logo__teeth{animation:logo-wake-teeth var(--ux-dur-slow,900ms) var(--ux-ease-out,ease-out) 360ms both}
  /* loop: a quiet bite while a scan runs, the eyes sliding side to side like they are reading */
  .logo--scan .logo__e--l{animation:logo-scan-eye-l 2.8s ease-in-out infinite}
  .logo--scan .logo__e--r{animation:logo-scan-eye-r 2.8s ease-in-out infinite}
  .logo--scan .logo__teeth{animation:logo-scan-teeth 2.8s ease-in-out infinite}
}
@keyframes logo-grin-jaw{0%{transform:scale(1)}30%{transform:scale(1.04,1.2)}60%{transform:scale(1.02,.9)}100%{transform:scale(1.04,1.04)}}
@keyframes logo-grin-teeth{0%{transform:scaleY(1)}30%{transform:scaleY(1.12)}60%{transform:scaleY(.62)}100%{transform:scaleY(1)}}
@keyframes logo-wake-eye{0%{transform:scale(.1) rotate(-60deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes logo-wake-jaw{0%{transform:scale(.4,0)}35%{transform:scale(1.05,1.25)}55%{transform:scale(1,.92)}100%{transform:scale(1)}}
@keyframes logo-wake-teeth{0%,30%{transform:scaleY(0)}45%{transform:scaleY(1.1)}60%{transform:scaleY(.55)}75%{transform:scaleY(1.05)}85%{transform:scaleY(.7)}100%{transform:scaleY(1)}}
@keyframes logo-scan-eye-l{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(3px) rotate(8deg)}}
@keyframes logo-scan-eye-r{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(3px) rotate(-10deg)}}
@keyframes logo-scan-teeth{0%,70%,100%{transform:scaleY(1)}82%{transform:scaleY(.62)}}

/* scan: one line sweeps the mark. Static at rest and under reduced motion. */
.logo__sweep{position:absolute;left:0;right:0;top:50%;height:2px;background:var(--logo-x);opacity:.9}
@media (prefers-reduced-motion:no-preference){
  .logo__sweep{animation:logo-sweep var(--ux-dur-scan,1400ms) var(--ux-ease-wipe,linear) infinite}
}
@keyframes logo-sweep{0%{top:8%}100%{top:92%}}


/* ── Meter ── */

.meter{margin:0 0 var(--ux-space-3)}
.meter__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--ux-space-3);margin:0 0 6px}
.meter__label{font-size:var(--ux-text-small);color:var(--ux-ink);font-weight:var(--ux-weight-semibold)}
.meter__val{font:var(--ux-weight-bold) var(--ux-text-small)/1 var(--ux-font-mono);color:var(--ux-ink);font-variant-numeric:tabular-nums}
.meter__track{height:6px;border-radius:var(--ux-radius-pill);background:var(--ux-raised);overflow:hidden}
.meter__fill{display:block;height:100%;border-radius:var(--ux-radius-pill);transition:width var(--ux-dur-slow) var(--ux-ease-out)}
.meter__fill--brand{background:var(--ux-grad)}
.meter__fill--ok{background:var(--ux-ok)}
.meter__fill--warn{background:var(--ux-warn)}
.meter__fill--danger{background:var(--ux-danger)}
.meter__hint{font-size:var(--ux-text-caption);color:var(--ux-ink-muted);margin-top:4px}


/* ── Motion ── */
/* motion.css — the approved moves (ds/STYLE.md §7, #939, #954). Durations and eases are the Rebel Precision motion tokens.
   EVERY animation sits inside prefers-reduced-motion:no-preference, so reduced motion is the final state, and nothing is
   hidden at rest: an element is only ever put in its START pose by the script (.mo-armed) and released by .mo-in.
   The independent `scale` / `rotate` / `translate` properties are used so a move composes with a tilt that already
   sits on `transform` (tape, stamp). The wipe and the tear are overlays that exist only while they play. */
@media (prefers-reduced-motion:no-preference){

  /* crown rise (BOLD): grey bars rise with stagger, the pink bar LAST, the crown drops with slap, the glow pulses once */
  [data-motion="crown"] .rank-crown__bar{transform-origin:bottom}
  [data-motion="crown"].mo-armed .rank-crown__bar{transform:scaleY(0)}
  [data-motion="crown"].mo-armed .rank-crown__crown{translate:0 -160%}
  [data-motion="crown"].mo-in .rank-crown__bar{animation:mo-rise var(--ux-dur-base2) var(--ux-ease-out) both;animation-delay:calc(var(--i,0) * var(--ux-dur-stagger))}
  [data-motion="crown"].mo-in .rank-crown__col--me .rank-crown__bar{animation-delay:calc(var(--cols,20) * var(--ux-dur-stagger))}
  [data-motion="crown"].mo-in .rank-crown__crown{animation:mo-drop var(--ux-dur-quick) var(--ux-ease-slap) both;animation-delay:calc((var(--cols,20) + 4) * var(--ux-dur-stagger))}
  [data-motion="crown"].mo-in .rank-crown__col--me .rank-crown__bar{animation-name:mo-rise,mo-glow;animation-duration:var(--ux-dur-base2),var(--ux-dur-slow2);animation-timing-function:var(--ux-ease-out),var(--ux-ease-out);
    animation-delay:calc(var(--cols,20) * var(--ux-dur-stagger)),calc((var(--cols,20) + 4) * var(--ux-dur-stagger))}

  /* tape slap (subtle): snap + slap, a small rotation overshoot */
  [data-motion="tape"].mo-armed{translate:0 -14px;scale:1.12;rotate:-5deg}
  [data-motion="tape"].mo-in{animation:mo-slap var(--ux-dur-snap) var(--ux-ease-slap) both}

  /* stamp thump (BOLD, once per page): scale 1.3 to 1 with a 2px shake */
  [data-motion="stamp"].mo-armed{scale:1.3}
  [data-motion="stamp"].mo-in{animation:mo-thump var(--ux-dur-base2) var(--ux-ease-thump) both}

  /* pink wipe (BOLD, once per page): a hard horizontal pink wipe across the section it reveals; the overlay exists only while it plays */
  [data-motion="wipe"]{position:relative}
  [data-motion="wipe"].mo-in::after{content:"";position:absolute;inset:0;z-index:2;background:var(--ux-brand);pointer-events:none;animation:mo-wipe var(--ux-dur-slow2) var(--ux-ease-wipe) both}

  /* photocopy (subtle): halftone resolves into the capture in seven steps, the pink plate snapping into register */
  [data-motion="photocopy"].mo-armed .shotframe__img{filter:grayscale(1) contrast(2.6) blur(3px)}
  [data-motion="photocopy"].mo-in .shotframe__img{animation:mo-copy var(--ux-dur-base2) steps(7,end) both}
  [data-motion="photocopy"].mo-in::before{content:"";position:absolute;inset:0;z-index:2;background:var(--ux-brand);mix-blend-mode:multiply;opacity:.18;pointer-events:none;animation:mo-register var(--ux-dur-base2) steps(7,end) both}

  /* lock-on (BOLD): the reticle snaps onto its element, one after another */
  .ret[data-motion="lockon"].mo-armed{scale:2.4}
  .ret[data-motion="lockon"].mo-in{animation:mo-snap var(--ux-dur-quick) var(--ux-ease-slap) both}
  .ret[data-motion="lockon"].mo-in:nth-of-type(2){animation-delay:calc(var(--ux-dur-quick) * 1.5)}
  .ret[data-motion="lockon"].mo-in:nth-of-type(3){animation-delay:calc(var(--ux-dur-quick) * 3)}

  /* tear (BOLD): the capture rips along a jagged line; the paper overlay exists only while it tears away */
  [data-motion="tear"]{position:relative;overflow:hidden}
  [data-motion="tear"].mo-in::after{content:"";position:absolute;inset:0;z-index:2;background:var(--ux-surface);pointer-events:none;
    clip-path:polygon(0 0,100% 0,100% 92%,94% 97%,88% 91%,80% 98%,71% 92%,62% 99%,52% 93%,43% 98%,33% 92%,24% 99%,14% 93%,6% 98%,0 92%);animation:mo-tear var(--ux-dur-slow2) var(--ux-ease-wipe) both}

  /* locked row (subtle): one shake on click; the chip's own text never changes unless the page passes a price */
  .lr:has(.lr__chip.mo-in){animation:mo-shake var(--ux-dur-quick) var(--ux-ease-out)}
}

@keyframes mo-rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes mo-drop{from{translate:0 -160%}to{translate:0 0}}
@keyframes mo-glow{0%{box-shadow:none}45%{box-shadow:var(--dfam-glow,none)}100%{box-shadow:var(--dfam-glow,none)}}
@keyframes mo-slap{from{translate:0 -14px;scale:1.12;rotate:-5deg}to{translate:0 0;scale:1;rotate:0deg}}
@keyframes mo-thump{0%{scale:1.3}70%{scale:1;translate:0 0}80%{translate:2px -2px}90%{translate:-2px 2px}100%{scale:1;translate:0 0}}
@keyframes mo-wipe{0%{clip-path:inset(0 100% 0 0)}50%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 100%)}}
@keyframes mo-copy{from{filter:grayscale(1) contrast(2.6) blur(3px)}to{filter:none}}
@keyframes mo-register{from{translate:6px 4px;opacity:.5}to{translate:0 0;opacity:.18}}
@keyframes mo-snap{from{scale:2.4}to{scale:1}}
@keyframes mo-tear{from{translate:0 0}to{translate:0 -105%}}
@keyframes mo-shake{0%,100%{translate:0 0}25%{translate:-4px 0}75%{translate:4px 0}}


/* ── Nav ── */

/* ────────────────────────────────────────────────────────────────────────────
   NAV — sticky top bar, main nav + submenu variants. Backdrop blur, bottom border.
   ──────────────────────────────────────────────────────────────────────────── */

.nav{position:sticky;top:0;z-index:var(--ux-z-sticky);border-bottom:1px solid var(--ux-line);background:var(--ux-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}

/* ── top variant ──
   EVERY child of .nav-in states its flex behaviour. The bug this replaces was flex:0 on a
   nowrap row: nothing could shrink, so the bar overran its own box and overflow-x:clip on
   <html> ate the evidence. Keep the row shrinkable and keep the row SHORT. */
.nav--top .nav-in{max-width:var(--ux-maxw);margin:0 auto;padding:var(--ux-space-3) var(--ux-space-4);display:flex;align-items:center;gap:clamp(var(--ux-space-3),3vw,var(--ux-space-6));min-width:0}

/* THE BAR SIZES THE MARK; IT DOES NOT DRAW IT (#150). .nav-brand / .nav-brand-ux are gone — they
   were a second copy of the wordmark's appearance, and the markup they styled is no longer
   emitted (Nav now calls Brand()). Identity — the string, the UX split, the gradient — belongs to
   ds/components/brand.js. Scale is contextual, so it stays here: the bar wants display size,
   /scan wants 19px, /factory/ wants something quieter. */
/* .nav--top .brand REMOVED (#239): the display font and clamp size are now the
   canonical treatment in ds/components/brand.js, inherited everywhere. */

.nav-links{flex:1 1 auto;min-width:0;display:flex}
.nav-list{display:flex;align-items:center;gap:clamp(var(--ux-space-3),2.5vw,var(--ux-space-6));list-style:none;margin:0;padding:0;min-width:0}
.nav-item{position:relative;display:flex;align-items:center}
.nav-links a{color:var(--ux-ink-muted);text-decoration:none;font-size:var(--ux-text-small);letter-spacing:.01em;transition:color var(--ux-dur-fast) var(--ux-ease-out)}
.nav-links a:hover{color:var(--ux-ink)}
.nav-links a.active{color:var(--ux-ink);box-shadow:inset 0 -2px 0 var(--ux-brand)}

/* ── right-hand actions: BOTH are Button() now, so this block owns LAYOUT ONLY ──
   .nav-btn / .nav-cta are gone. They were two hand-written rules whose only real difference was
   horizontal padding (space-4 vs space-5), which is why the two CTAs rendered at visibly
   different widths for the same label length. Styling a button here again would recreate exactly
   that drift: variant and size belong to ds/components/button.js. */
.nav-actions{flex:0 0 auto;margin-left:auto;display:flex;align-items:center;gap:var(--ux-space-3)}
/* THE PLATE (#746): on a plate band (.section--plate) the bar text takes plate-ink and the
   primary CTA flips to the plate treatment. CSS only; no width, padding or size is touched here. */
.section--plate .nav-links a{color:var(--ux-plate-ink)}
.section--plate .nav-links a:hover{color:var(--ux-plate-ink)}
.section--plate .nav-actions .btn--primary{background:var(--ux-plate-ink);color:var(--ux-plate-bg);border-color:var(--ux-plate-ink)}

/* focus must be VISIBLE on every interactive thing in the bar — the old bar shipped with only
   the UA default, which the brand-filled CTA all but swallowed. */
.nav--top .nav-link:focus-visible{border-radius:var(--ux-radius-xs)}
/* the brand's own focus ring travels with Brand's CSS chunk, so it is identical on /scan and
   /factory/ where this bar does not exist */
/* NOT a bare .nav--top a selector — that swept up the CTAs too and forced radius-xs onto them, squaring off a
   pill on focus only. Button owns .btn:focus-visible; the bar must not reach into it. */

/* long labels shrink on a phone rather than pushing the row off screen */
.nav-t-short{display:none}

/* THE TIER GROUP AND ITS STAND-IN ARE MUTUALLY EXCLUSIVE, ALWAYS. Exactly one of them is in the
   layout at any width — never both, never neither. The stand-in is display:none by default so a
   wide bar shows the four real tiers; below the breakpoint they swap. */
.nav-item--collapsed{display:none}

/* 640px is MEASURED. Forcing the tiers visible at every width and stepping the viewport in 10px
   increments, the widest viewport at which the four tier links do not all fit is 620px; 640 leaves
   a small margin. Raising this hides the IA on screens that can show it, which is the mistake the
   dropdown made. Lowering it clips links.
   AND THE METRIC MATTERS: .nav-in overflow is NOT the signal here. .nav-links is
   flex:1 1 auto;min-width:0, so a tight row is absorbed by the shrinkable child — measured
   barOver=0 at every width from 560 to 620 while .nav-links itself overflowed by up to 42px and
   the links were silently clipped INSIDE it. Measure .nav-links scrollWidth vs clientWidth, which
   is what test/nav-fit.test.js now asserts. */
@media(max-width:640px){
  .nav-item--tier{display:none}
  .nav-item--collapsed{display:flex}
}

@media(max-width:760px){
  .nav--top .nav-in{padding:var(--ux-space-2) var(--ux-space-4)}
  .nav-t-full{display:none}
  .nav-t-short{display:inline}
  .nav-actions{gap:var(--ux-space-2)}
}

/* The narrowest supported phone. At 320px the brand + Library + both CTAs overran .nav-links by
   1px with space-4 gutters — measured, and 1px is still a clipped link. Tighten the row's own
   padding rather than dropping a destination: nothing here is optional at this size.

   #299: that 1px was measured in the SETTLED webfont. In the fallback face the same row overran by
   6px, because the fallback is wider and .nav-links is the only shrinkable child — so brand and
   actions grow and starve it. Measured at 320px, fallback vs settled:

       .brand   (Fraunces) 81px -> 76px   +5
       .nav-actions (Hanken) 150 -> 143   +7
       .nav-links            45px <- 58px  -13, then overflows by 6px

   The fix is button padding, and ONLY button padding. Measured at 320px the row is brand 81 +
   links 45 + actions 150 + 2x8px gap in a 320px box, and .nav-actions is two .btn--sm at 14px side
   padding — 56px across the two. Dropping to space-2 frees 24px, covering the gap with room spare.
   SCOPED to .nav-actions on purpose: .btn--sm is a shared primitive and this is a nav-at-320px
   problem, not a button problem. Tap targets are untouched — only side padding moves.

   WHAT WAS TRIED AND REMOVED, so nobody re-adds it: metric-matched fallback @font-face faces
   ('Hanken-fallback' / 'Fraunces-fallback' with size-adjust, added to --g-sans/--g-display). They
   were INERT and the gate proved it — deleting them left it green, and the fallback-vs-settled
   width delta was byte-identical at all eight widths. Two reasons: the brand does not read
   --g-display at all (it computes to 'Fraunces, Georgia, "Times New Roman", serif'), and a face
   whose src is only local() is skipped outright where those families are absent. Tuning size-adjust
   to a fit needed ~89% anyway — an 11% shrink that trades a horizontal reflow for a visible
   type-size jump when the real face lands.

   THE RULE IS "the header fits in the fallback face", not "use padding". font-display:optional, a
   genuinely loaded metric-matched face, or a nav that fits either way are all valid — the gate
   asserts the outcome, so it cannot pin this implementation. */
@media(max-width:400px){
  .nav--top .nav-in{padding:var(--ux-space-2) var(--ux-space-3);gap:var(--ux-space-2)}
  .nav-actions .btn--sm{padding-left:var(--ux-space-2);padding-right:var(--ux-space-2)}
}

/* ── INK (#851): .nav--ink only, so a paper bar can never match. Tokens come from the ink theme.
   The wordmark keeps Brand()'s markup; Ink drops the gradient half, lowercases it and puts the
   6px signal dot before it. The dot is the only neon on the bar (never a fill, never text). The
   space after the dot is a margin, NOT a flex gap: Brand() emits a bare text node after the UX
   span, and a gap would split the wordmark (brand.js documents that trap). ── */
.nav--ink{background:var(--ux-surface);border-bottom:2px solid var(--ux-ink);-webkit-backdrop-filter:none;backdrop-filter:none}
/* !important: signal-shell.css pins .nav--top .nav-in padding with it (css/signal-shell.css:117), and the Ink bar's content edge must line up with the footer's wrap. */
.nav--ink.nav--top .nav-in{max-width:calc(var(--ux-maxw) + 2*var(--ux-space-5));padding:var(--ux-space-4) var(--ux-space-5)!important;gap:var(--ux-space-5)}
.nav--ink .nav-links{flex:0 1 auto;margin-left:auto}
.nav--ink .nav-list{gap:var(--ux-space-5)}
.nav--ink .nav-links a,.nav--ink .nav-menu__list a{color:var(--ux-ink);font-size:var(--ux-text-small);font-weight:var(--ux-weight-bold);letter-spacing:0;white-space:nowrap;text-decoration:none}
.nav--ink .nav-links a:hover,.nav--ink .nav-menu__list a:hover{text-decoration:underline;text-underline-offset:4px}
.nav--ink .nav-links a.active,.nav--ink .nav-menu__list a.active{box-shadow:inset 0 -2px 0 var(--ux-brand);font-weight:var(--ux-weight-heavy)}
.nav--ink .nav-actions{margin-left:0}
/* #857: the Ink nav button takes the screen's existing small/normal style (same as the links and chips) */
.nav--ink .nav-actions .btn{font-size:var(--ux-text-small);font-weight:var(--ux-weight-bold)}
.nav--ink .nav-menu{display:none;position:relative}
.nav--ink .nav-menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--ux-space-2);padding:0 var(--ux-space-3);height:calc(var(--ux-control-h) - 8px);border-radius:var(--ux-radius-sm);color:var(--ux-ink);font:var(--ux-weight-bold) var(--ux-text-caption)/1 var(--ux-font-stamp,var(--ux-font-sans));letter-spacing:var(--ux-track-wide);text-transform:uppercase}
.nav--ink .nav-menu summary::-webkit-details-marker{display:none}
.nav--ink .nav-menu[open] summary{background:var(--ux-surface)}
.nav--ink .nav-menu__list{position:absolute;right:0;top:100%;margin:var(--ux-space-2) 0 0;padding:var(--ux-space-2);list-style:none;min-width:200px;background:var(--ux-surface);border:2px solid var(--ux-ink);border-radius:var(--ux-radius-md)}
.nav--ink .nav-menu__item a{display:block;padding:var(--ux-space-3)}
@media(max-width:760px){
  .nav--ink.nav--top .nav-in{padding:var(--ux-space-3) var(--ux-space-4)!important;gap:var(--ux-space-3)}
  .nav--ink .nav-links{display:none}
  .nav--ink .nav-actions{margin-left:auto}
  .nav--ink .nav-menu{display:block}
}

/* ── sub variant ── */
.nav--sub{background:color-mix(in srgb,var(--ux-overlay) 65%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

.nav--sub .nav-sub-in{max-width:var(--ux-maxw);margin:0 auto;padding:var(--ux-space-2) clamp(var(--ux-space-4),4vw,var(--ux-space-6));display:flex;align-items:center;gap:var(--ux-space-3) var(--ux-space-5);flex-wrap:wrap}

.nav-sub-count{display:inline-flex;align-items:center;gap:var(--ux-space-2);color:var(--ux-ink-muted);text-decoration:none;font-family:var(--ux-font-mono);font-size:var(--ux-text-caption);letter-spacing:.03em;white-space:nowrap}
.nav-sub-count b{color:var(--ux-brand-ink);font-size:var(--ux-text-micro)}
.nav-sub-count:hover{color:var(--ux-ink)}

.nav-sub-seg{display:inline-flex;gap:1px;padding:1px;background:color-mix(in srgb,var(--ux-ink) 4%,transparent);border:1px solid var(--ux-line);border-radius:var(--ux-radius-sm)}

.nav-sub-pill{display:inline-flex;align-items:center;gap:var(--ux-space-2);padding:var(--ux-space-2) var(--ux-space-4);border-radius:var(--ux-radius-sm);font-size:var(--ux-text-small);color:var(--ux-ink-muted);text-decoration:none;white-space:nowrap;transition:background var(--ux-dur-fast) var(--ux-ease-out),color var(--ux-dur-fast)}
.nav-sub-pill:hover{color:var(--ux-ink);background:color-mix(in srgb,var(--ux-ink) 6%,transparent)}
.nav-sub-pill.active{color:var(--ux-on-brand);background:var(--ux-grad);box-shadow:0 2px var(--ux-space-4) var(--ux-brand-tint)}

.nav-sub-all{margin-left:auto;color:var(--ux-brand-ink);text-decoration:none;font-size:var(--ux-text-small);font-weight:var(--ux-weight-semibold);white-space:nowrap}
.nav-sub-all:hover{text-decoration:underline}

@media(max-width:640px){
  .nav--sub .nav-sub-in{padding:var(--ux-space-2) var(--ux-space-4);gap:var(--ux-space-2) var(--ux-space-3)}
  .nav-sub-count{order:1}
  .nav-sub-all{order:2;margin-left:auto}
  .nav-sub-seg{order:3;width:100%}
  .nav-sub-pill{flex:1;justify-content:center;padding:var(--ux-space-2) var(--ux-space-2)}
}


/* ── OgCard ── */

/* NO BACKTICKS IN THIS BLOCK. Absolute px throughout: the render viewport is 1200x630 and is the
   only viewport this markup ever sees, so there is nothing for a relative unit to be relative to. */
.og-card{position:relative;width:1200px;height:630px;background:var(--ux-bg);display:grid;
  grid-template-columns:1fr 440px;gap:56px;padding:72px 72px 64px;box-sizing:border-box;overflow:hidden}
.og-left{display:flex;flex-direction:column;justify-content:center;min-width:0}
.og-eyebrow{margin:0 0 26px;font:700 15px/1 var(--ux-font-mono);letter-spacing:.18em;color:var(--ux-brand-ink)}
.og-title{margin:0;font:800 60px/1.08 var(--ux-font-display);letter-spacing:-.022em;color:var(--ux-ink);
  text-wrap:balance}
.og-statline{display:flex;align-items:baseline;gap:16px;margin:38px 0 0}
.og-stat{font:800 76px/1 var(--ux-font-display);letter-spacing:-.03em;color:var(--ux-brand-ink)}
.og-stat-label{font:600 19px/1.3 var(--ux-font-sans);color:var(--ux-ink-soft);max-width:270px}
.og-source{margin:26px 0 0;font:500 15px/1.4 var(--ux-font-mono);color:var(--ux-ink-muted)}
/* the one accent rule: a full-bleed brand bar along the bottom edge */
.og-rule{position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--ux-brand)}

/* ---- thumbnail: a 1200x420 strip for the /research/ listing, GRAPHIC ONLY -------------------
   One centred column, no text at any size. The diagram is drawn LARGER than in the full card and
   with heavier strokes, because it is about to be scaled to roughly 0.39x on the listing and a 2px
   hairline at that scale is a grey smudge. Height is set on .og-card itself: the screenshot is of
   that node, so its bounding box, not the viewport, decides the PNG's dimensions. */
.og-card--thumb{height:420px;padding:0;grid-template-columns:1fr;gap:0;place-items:center}
.og-card--thumb .og-right{width:100%;height:100%}
.og-card--thumb .og-mock{width:auto;height:300px}
.og-card--thumb .og-pg{border-width:3px;border-radius:14px;padding:22px}
.og-card--thumb .og-chrome i{width:11px;height:11px}
.og-card--thumb .og-bar{height:11px}
.og-card--thumb .og-r{height:18px;margin-bottom:16px;border-radius:4px}

/* depth: the three frames become the whole picture, centred rather than hugging a column edge.
   The offset stays DIAGONAL. Offsetting on x alone (the first attempt) reads as one frame with tabs
   down its side, not as pages stacked behind each other, and the stack IS the finding. */
.og-card--thumb .og-mock-depth{width:400px}
.og-card--thumb .og-mock-depth .og-pg{width:260px;height:260px}
.og-card--thumb .og-mock-depth .og-pg-3{top:0;right:0}
.og-card--thumb .og-mock-depth .og-pg-2{top:20px;right:30px}
.og-card--thumb .og-mock-depth .og-pg-1{top:40px;right:60px}

/* absence: one frame, and the empty slot is the point, so it gets more of the height */
.og-card--thumb .og-mock-absence{width:340px}
.og-card--thumb .og-mock-absence .og-pg-1{top:0;left:0;width:340px;height:300px}
.og-card--thumb .og-slot{height:74px;margin:16px 0;border-width:3px}
/* the slot's "NO PROOF" caption is hidden here, not shrunk. It is 13px in a 1200px image that the
   listing renders at ~470px, so it arrives as a 5px smear — the same unreadable-text problem the
   whole thumb variant exists to remove. A dashed empty box already says empty without words. */
.og-card--thumb .og-slot span{display:none}
.og-card--thumb .og-cta{height:40px}

/* census: a wide population reads better than a tall one in a 1200x420 strip */
.og-card--thumb .og-mock-census{width:620px}
.og-card--thumb .og-grid{inset:0;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(3,1fr);gap:14px}
.og-card--thumb .og-tile{border-width:3px;border-radius:8px}

/* ---- the mockup column ------------------------------------------------------------------ */
.og-right{position:relative;display:flex;align-items:center;justify-content:center}
.og-mock{position:relative;width:100%;height:420px}
.og-pg{position:absolute;background:var(--ux-surface);border:2px solid var(--ux-ink);
  border-radius:10px;padding:16px;box-sizing:border-box}
.og-chrome{display:flex;align-items:center;gap:6px;margin:0 0 16px}
.og-chrome i{width:8px;height:8px;border-radius:50%;background:var(--ux-line-strong)}
.og-bar{flex:1;height:8px;margin-left:8px;border-radius:4px;background:var(--ux-line)}
.og-r{height:13px;border-radius:3px;background:var(--ux-line-strong);margin:0 0 12px}
.og-r-lg{width:100%}
.og-r-md{width:74%}
.og-r-sm{width:46%}
.og-r.is-accent{background:var(--ux-brand)}

/* depth: three frames, the two behind faded and offset — the pages a shallow crawl never opens */
.og-mock-depth .og-pg{width:300px;height:300px}
.og-mock-depth .og-pg-3{top:0;right:0;opacity:.22}
.og-mock-depth .og-pg-2{top:38px;right:38px;opacity:.5}
.og-mock-depth .og-pg-1{top:76px;right:76px}

/* absence: one frame with an empty outlined slot where proof should be */
.og-mock-absence .og-pg-1{top:20px;left:32px;width:340px;height:380px}
.og-slot{height:78px;margin:18px 0;border:2px dashed var(--ux-brand);border-radius:8px;
  display:flex;align-items:center;justify-content:center;background:var(--ux-brand-tint)}
.og-slot span{font:700 13px/1 var(--ux-font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ux-brand-ink)}
.og-cta{height:34px;width:56%;border-radius:6px;background:var(--ux-ink)}

/* census: a population of tiles, one of them accented */
.og-grid{position:absolute;inset:24px 0;display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:1fr;gap:14px}
.og-tile{border:2px solid var(--ux-ink);border-radius:6px;opacity:.28}
.og-tile.is-hit{background:var(--ux-brand);border-color:var(--ux-brand);opacity:1}


/* ── RankCrown ── */
/* RANK CROWN (#903). The skyline. Every column's height is --h, computed in rank-crown.js from the input
   share, and the column count is --cols; this sheet only paints them. The lit column is the ONE thing on the
   view that glows (--ux-glow-signal); Voltage is a halo behind the panel, under 1% of it, never a fill. */
.rank-crown__sky{margin:0;padding:var(--ux-space-7) 0 0;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));align-items:end;gap:var(--ux-space-1);height:clamp(200px,52vw,320px);box-sizing:border-box}
.rank-crown__col{position:relative;height:100%;display:flex;align-items:flex-end}
.rank-crown__bar{display:block;width:100%;height:var(--h);box-sizing:border-box}
.rank-crown__col--peer .rank-crown__bar{background:var(--dfam-peer)}
.rank-crown__col--me .rank-crown__bar{background:var(--dfam-lit);box-shadow:var(--dfam-glow)}
.rank-crown__col--ahead .rank-crown__bar{border:1px dashed var(--dfam-peer)}
/* the crown sits on the lit bar, wider than its column, centred on it */
.rank-crown__crown{position:absolute;left:50%;bottom:calc(var(--h) + var(--ux-space-1));width:calc(100% + var(--ux-space-6));max-width:56px;min-width:36px;transform:translateX(-50%);overflow:visible}
.rank-crown__crown-body{fill:var(--dfam-lit);stroke:var(--dfam-lit);stroke-width:3;stroke-linejoin:round}
.rank-crown__crown-band{fill:var(--dfam-lit)}
.rank-crown__labs{display:flex;justify-content:space-between;gap:var(--ux-space-4);margin-top:var(--ux-space-3);font:var(--ux-weight-bold) var(--ux-text-micro)/1 var(--ux-font-stamp,var(--ux-font-mono));letter-spacing:var(--ux-track-caps);text-transform:uppercase;color:var(--dfam-muted)}
.rank-crown__lab-end{display:flex;gap:var(--ux-space-4)}
.rank-crown__lab--me{color:var(--dfam-kick)}
.rank-crown__lab{white-space:nowrap}


/* ── RarityRope ── */
/* RARITY ROPE (#903). A --cols x --rows field of pips (both computed in rarity-rope.js). The rope is one
   absolutely placed dashed loop whose height is the share of rows that hold filled pips (--rope-rows of
   --rows), so it can never be taller or shorter than the pips it ropes. */
.rarity-rope__field{--pad:var(--ux-space-3);position:relative;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--ux-space-2);padding:var(--pad);max-width:30rem}
.rarity-rope__pip{display:block;aspect-ratio:1;border-radius:50%;box-sizing:border-box;position:relative;z-index:1}
.rarity-rope__pip--have{background:var(--dfam-ink)}
.rarity-rope__pip--rest{border:1.5px solid var(--dfam-peer)}
.rarity-rope__pip--site{background:var(--dfam-lit);box-shadow:var(--dfam-glow)}
.rarity-rope__pip--out{border:2px dashed var(--dfam-lit);box-shadow:var(--dfam-glow)}
.rarity-rope__rope{position:absolute;top:0;left:0;right:0;height:calc((100% - 2 * var(--pad)) * var(--rope-rows) / var(--rows) + 2 * var(--pad));box-sizing:border-box;border:2px dashed var(--dfam-lit);border-radius:var(--ux-radius-xs);pointer-events:none}
/* the two knots where the rope is tied off */
.rarity-rope__rope::before,.rarity-rope__rope::after{content:"";position:absolute;top:50%;width:var(--ux-space-2);height:var(--ux-space-2);margin-top:calc(var(--ux-space-1) * -1);border-radius:50%;background:var(--dfam-ink)}
.rarity-rope__rope::before{left:calc(var(--ux-space-1) * -1)}
.rarity-rope__rope::after{right:calc(var(--ux-space-1) * -1)}
.rarity-rope__note{margin:var(--ux-space-3) 0 0;color:var(--dfam-muted);font-size:var(--ux-text-small);line-height:var(--ux-leading-snug)}


/* ── ReadingPage ── */
/* reading-page.css — the long-form reading template (#945/#913; Figma 64:5827, 64:6370, 64:6510). Roles only.
   Anton is one weight, so synthesis is off. One shared column grid (.rd-cols) serves the head, the body and the
   pull band so the title, the TOC and the band all start on the same left edge. */
.rd-cols{display:grid;grid-template-columns:[full-start] minmax(var(--ux-space-5),1fr) [toc-start] 200px [toc-end] var(--ux-space-6) [body-start] minmax(0,65ch) [body-end] var(--ux-space-6) [note-start] 220px [note-end] minmax(var(--ux-space-5),1fr) [full-end]}

/* ── head ── */
.rd-head{padding:var(--ux-space-8) 0 var(--ux-space-7)}
.rd-head__in{grid-column:toc-start / note-end;display:flex;flex-direction:column;align-items:flex-start;gap:var(--ux-space-4);min-width:0}
.rd-kick{margin:0}
.rd-title{margin:0;max-width:16em;font-family:var(--ux-font-display);font-weight:400;font-synthesis:none;font-size:clamp(40px,5.2vw,76px);line-height:.95;letter-spacing:0;text-transform:uppercase;color:var(--ux-ink);text-wrap:balance;overflow-wrap:anywhere}
.rd-title .neon,.rd-title span{color:inherit}
.rd-dek{margin:0;max-width:44em;font-size:clamp(18px,1.4vw,20px);line-height:var(--ux-leading-snug);color:var(--ux-ink-soft)}
.rd-meta{margin:0;font:var(--ux-weight-normal) var(--ux-text-micro)/1.5 var(--ux-font-stamp);letter-spacing:var(--ux-track-wide);text-transform:uppercase;color:var(--ux-ink-muted)}
.rd-meta .badge{max-width:100%;box-sizing:border-box;white-space:normal;overflow-wrap:anywhere}

/* ── sticky TOC ── */
.rd-tocwrap{grid-column:toc;grid-row:1 / span 4;align-self:stretch}
.rd-toc{position:sticky;top:var(--ux-space-6);padding-top:var(--ux-space-2)}
.rd-toc__h{margin:0 0 var(--ux-space-3);font:var(--ux-weight-bold) var(--ux-text-micro)/1.2 var(--ux-font-stamp);letter-spacing:var(--ux-track-kicker);text-transform:uppercase;color:var(--ux-ink-muted)}
.rd-toc ul{list-style:none;margin:0;padding:0}
.rd-toc li{margin:0}
.rd-toc a{position:relative;display:block;padding:var(--ux-space-1) 0 var(--ux-space-1) var(--ux-space-4);font-size:var(--ux-text-small);line-height:var(--ux-leading-snug);color:var(--ux-ink-soft);text-decoration:none}
.rd-toc a:hover{color:var(--ux-ink)}
.rd-toc a[aria-current="true"]{color:var(--ux-ink);font-weight:var(--ux-weight-bold)}
/* the one pink signal dot marks where you are (STYLE: pink is a signal, a 6px dot) */
.rd-toc a[aria-current="true"]::before{content:"";position:absolute;left:0;top:.8em;width:6px;height:6px;background:var(--ux-signal)}

/* ── the 65ch column ── */
.rd-main{grid-column:body;min-width:0;padding-bottom:var(--ux-space-6);font-size:clamp(16px,1.25vw,18px);font-weight:var(--ux-weight-medium);line-height:var(--ux-leading-loose);color:var(--ux-ink-soft)}
.rd-main :is(h2,h3){scroll-margin-top:var(--ux-space-6);color:var(--ux-ink)}
.rd-main h2{margin:var(--ux-space-7) 0 var(--ux-space-3);font-family:var(--ux-font-sans);font-weight:var(--ux-weight-heavy);font-size:clamp(26px,2.4vw,34px);line-height:1.1;letter-spacing:-.01em;text-transform:none}
.rd-main > h2:first-child{margin-top:0}
.rd-main h3{margin:var(--ux-space-6) 0 var(--ux-space-2);font-family:var(--ux-font-sans);font-weight:var(--ux-weight-heavy);font-size:clamp(20px,1.7vw,24px);line-height:1.2;letter-spacing:-.01em}
.rd-main p{margin:0 0 var(--ux-space-4)}
.rd-main :is(ul,ol){margin:0 0 var(--ux-space-4);padding-left:var(--ux-space-5)}
.rd-main li{margin:0 0 var(--ux-space-2)}
.rd-main strong,.rd-main b{color:var(--ux-ink);font-weight:var(--ux-weight-heavy)}
.rd-main a{color:var(--ux-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.rd-main a:hover{text-decoration-color:var(--ux-signal);text-decoration-thickness:2px}
.rd-main hr{border:0;border-top:1px solid var(--ux-line);margin:var(--ux-space-6) 0}
/* Space Mono tells sources and code: inline code, blocks, the registry, source lines */
.rd-main code{font-family:var(--ux-font-stamp);font-size:.84em;color:var(--ux-code-ink);overflow-wrap:anywhere;word-break:break-word}
.rd-main :not(pre) > code{background:var(--ux-code-bg);padding:0 var(--ux-space-1)}
.rd-main pre{margin:var(--ux-space-4) 0;padding:var(--ux-space-4);background:var(--ux-code-bg);overflow-x:auto;line-height:1.6}
.rd-main pre code{font-size:var(--ux-text-caption);white-space:pre;background:none;padding:0}
/* tables: thin rules, a mono header, numbers tabular */
.rd-main table{width:100%;border-collapse:collapse;margin:var(--ux-space-4) 0 var(--ux-space-5);font-size:var(--ux-text-small)}
.rd-main thead th{padding:var(--ux-space-2) var(--ux-space-3) var(--ux-space-2) 0;text-align:left;font:var(--ux-weight-normal) var(--ux-text-micro)/1.3 var(--ux-font-stamp);letter-spacing:var(--ux-track-wide);text-transform:uppercase;color:var(--ux-ink-muted);border-bottom:1px solid var(--ux-ink)}
.rd-main :is(td,tbody th){padding:var(--ux-space-3) var(--ux-space-3) var(--ux-space-3) 0;vertical-align:baseline;border-bottom:1px solid var(--ux-line);font-variant-numeric:tabular-nums;text-align:left;font-weight:inherit}
.rd-main :is(.cx-tablewrap,.rd-tablewrap){overflow-x:auto}
.rd-main blockquote{margin:var(--ux-space-5) 0;padding:var(--ux-space-3) 0 0;border-top:2px solid var(--ux-ink);color:var(--ux-ink)}
.rd-main details{margin:0 0 var(--ux-space-3);border-bottom:1px solid var(--ux-line);padding-bottom:var(--ux-space-3)}
.rd-main summary{cursor:pointer;font-weight:var(--ux-weight-heavy);color:var(--ux-ink)}

/* source line and margin note: Space Mono, quiet */
.rd-source{margin:calc(-1 * var(--ux-space-2)) 0 var(--ux-space-5);font:var(--ux-weight-normal) var(--ux-text-micro)/1.5 var(--ux-font-stamp);letter-spacing:var(--ux-track-wide);text-transform:uppercase;color:var(--ux-ink-muted);overflow-wrap:anywhere}
.rd-note{margin:0 0 var(--ux-space-4);font:var(--ux-weight-normal) var(--ux-text-micro)/1.5 var(--ux-font-stamp);color:var(--ux-ink-muted);overflow-wrap:anywhere}
@media (min-width:1180px){
  .rd-note{float:right;clear:right;width:220px;margin:0 calc(-220px - var(--ux-space-6)) var(--ux-space-4) var(--ux-space-4)}
}

/* ── the ONE pink band: Anton numeral, tape label, ink type (ink on pink 5.71) ── */
.rd{position:relative}
.rd-main--2{padding-top:0}
.rd-pull{grid-column:full;display:grid;grid-template-columns:subgrid;background:var(--ux-panel);color:var(--ux-panel-ink);padding:var(--ux-space-8) 0;margin:var(--ux-space-4) 0 var(--ux-space-7)}
.rd-pull__in{grid-column:toc-start / note-end;display:flex;flex-direction:column;align-items:flex-start;gap:var(--ux-space-3);min-width:0}
.rd-pull__tape{margin:0 0 var(--ux-space-2)}
.rd-pull__num{margin:0;font-family:var(--ux-font-display);font-weight:400;font-synthesis:none;font-size:clamp(80px,10.4vw,150px);line-height:.9;letter-spacing:0;color:var(--ux-panel-ink)}
.rd-pull__label{margin:0;max-width:30em;font-size:clamp(18px,1.4vw,20px);line-height:var(--ux-leading-snug);color:var(--ux-panel-ink)}
.rd-pull__src{margin:0;font:var(--ux-weight-normal) var(--ux-text-micro)/1.5 var(--ux-font-stamp);letter-spacing:var(--ux-track-wide);text-transform:uppercase;color:var(--ux-panel-ink)}

/* a block of cards or a table that sits under the head on the same edges (the research index, the launch index) */
.rd-block{padding:0 0 var(--ux-space-7)}
.rd-wide{grid-column:toc-start / note-end;min-width:0}
.rd-wide .rs-wrap{max-width:none}

/* ── the one closing action ── */
.rd-ctarow{padding-bottom:var(--ux-space-8)}
.rd-cta{grid-column:body;display:flex;flex-wrap:wrap;align-items:center;gap:var(--ux-space-4) var(--ux-space-5);margin-top:var(--ux-space-5)}
.rd-cta__2{font-family:var(--ux-font-stamp);font-size:var(--ux-text-small);font-weight:var(--ux-weight-bold);color:var(--ux-ink);text-decoration:underline;text-underline-offset:3px}

/* ── under 1180 the notes drop into the flow; under 900 one column and the TOC is a row of tape chips ── */
@media (max-width:1179px){
  .rd-cols{grid-template-columns:[full-start] minmax(var(--ux-space-5),1fr) [toc-start] 180px [toc-end] var(--ux-space-5) [body-start] minmax(0,65ch) [body-end note-start note-end] minmax(var(--ux-space-5),1fr) [full-end]}
}
@media (max-width:899px){
  .rd-cols{grid-template-columns:[full-start] var(--ux-space-4) [toc-start body-start note-start] minmax(0,1fr) [toc-end body-end note-end] var(--ux-space-4) [full-end]}
  .rd-head{padding:var(--ux-space-6) 0 var(--ux-space-5)}
  .rd-tocwrap{grid-row:auto;order:-1;margin-bottom:var(--ux-space-5)}
  .rd-toc{position:static;padding:0}
  .rd-toc__h{display:none}
  .rd-toc ul{display:flex;flex-wrap:wrap;gap:var(--ux-space-2)}
  .rd-toc a{padding:var(--ux-space-1) var(--ux-space-2);border:1px solid var(--ux-ink);font:var(--ux-weight-bold) var(--ux-text-caption)/1.2 var(--ux-font-stamp);color:var(--ux-ink)}
  .rd-toc a[aria-current="true"]{background:var(--ux-signal);color:var(--ux-ink);border-color:var(--ux-signal)}
  .rd-toc a[aria-current="true"]::before{content:none}
  .rd-main h2{margin-top:var(--ux-space-6)}
  .rd-pull{padding:var(--ux-space-7) 0}
}

/* the methodology check glossary: a <dl class="chk">. `.chk` is also the CheckRow card (check-row.css: flex, padded, surface),
   so inside the reading column the glossary must say grid explicitly or its dt/dd sit side by side and run off a 320px phone. */
.rd-main dl.chk{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--ux-space-2) var(--ux-space-4);margin:var(--ux-space-4) 0 0;padding:0;background:none;align-items:baseline}
.rd-main dl.chk dt{margin:0}
.rd-main dl.chk dd{margin:0;color:var(--ux-ink-soft);font-size:var(--ux-text-small);line-height:1.6;min-width:0}
.rd-main dl.chk dt:target code{outline:2px solid var(--ux-signal);outline-offset:2px}
.rd-main .chk-g{font:var(--ux-weight-bold) var(--ux-text-micro)/1 var(--ux-font-stamp);letter-spacing:var(--ux-track-wide);text-transform:uppercase;color:var(--ux-brand-ink);margin-left:var(--ux-space-2)}
@media(max-width:560px){.rd-main dl.chk{grid-template-columns:minmax(0,1fr);gap:2px}.rd-main dl.chk dd{margin:0 0 var(--ux-space-3)}}


/* ── Rebel ── */

/* REBEL (#891). Geometry is in ds/components/rebel.js and nowhere else; this sheet only PAINTS it and
   MOVES it. Colour is four roles (themes/ink.json): eye, ink, paper, hairline, plus the ground that
   the auto tile follows (ink on a light page, clear on a dark one). Every part is drawn around its
   own origin, so one transform-origin (0 0) serves them all. */
.rebel{display:block;flex:none;overflow:visible}
.rebel--tile-dark{--rebel-teeth:var(--ux-rebel-paper)}
.rebel--tile-auto{--rebel-teeth:var(--ux-rebel-paper)}
.rebel--tile-light{--rebel-teeth:var(--ux-rebel-ink)}
.rebel--tile-none{--rebel-teeth:var(--ux-ink)}
.rebel--tile-dark .rebel-tile{fill:var(--ux-rebel-ink)}
.rebel--tile-auto .rebel-tile{fill:var(--ux-rebel-ground)}
.rebel--tile-light .rebel-tile{fill:var(--ux-rebel-paper);stroke:var(--ux-rebel-hairline)}
.rebel-x,.rebel-dash{stroke:var(--ux-rebel-eye)}
.rebel-x-fill,.rebel-bar{fill:var(--ux-rebel-eye)}
.rebel-teeth{fill:var(--rebel-teeth)}
.rebel-part{transform-origin:0 0}
.rebel-scan{pointer-events:none}

/* MOTION. transform and opacity only. Everything is inside no-preference, so reduced motion is the
   static face on load, on hover and for the scan bar, with no override to forget. */
@media (prefers-reduced-motion:no-preference){
  .rebel{--rebel-ease:cubic-bezier(.65,0,.35,1);--rebel-ease-snap:cubic-bezier(.34,1.56,.64,1)}
  /* hover: neutral eases to the smirk. Brand() extends the trigger to its whole link. */
  .rebel--hover .rebel-part{transition:transform .4s var(--rebel-ease)}
  @media (hover:hover){.rebel--hover:hover .rebel-part{transform:var(--rebel-hover,none)}}
  /* wink: NO load animation. REBEL_WINK_SCRIPT adds .is-winking about 3s after load (once per
     browser session) and removes it 600ms later; one X becomes a dash and the mouth takes the wink
     pose, both read from the expression table. */
  .rebel[data-rebel-wink] .rebel-dash{opacity:0}
  .rebel[data-rebel-wink] .rebel-x,.rebel[data-rebel-wink] .rebel-dash{transition:opacity .12s var(--rebel-ease)}
  .rebel.is-winking .rebel-eyeR .rebel-x{opacity:0}
  .rebel.is-winking .rebel-eyeR .rebel-dash{opacity:1}
  .rebel.is-winking .rebel-mouth{transform:var(--rebel-wink,none)}
  /* scanning: the bar sweeps the teeth until the page is ready. */
  .rebel--scan .rebel-bar{animation:rebel-scan 900ms var(--rebel-ease) infinite alternate}
  @keyframes rebel-scan{from{transform:translateX(var(--rebel-scan-from,0px))}to{transform:translateX(var(--rebel-scan-to,0px))}}
}


/* ── Reticle ── */
/* reticle.css — Reticle (#954, Figma 57:363). The box is the crawler's region plus 6px; the corners are pink L marks; the X sits outside the top-left corner. */
.ret{position:absolute;box-sizing:content-box;margin:-6px 0 0 -6px;padding:6px;pointer-events:none}
.ret__c{position:absolute;width:14px;height:14px}
.ret__c--tl{top:0;left:0;background:linear-gradient(var(--ux-brand),var(--ux-brand)) 0 0/100% 3px no-repeat,linear-gradient(var(--ux-brand),var(--ux-brand)) 0 0/3px 100% no-repeat}
.ret__c--tr{top:0;right:0;background:linear-gradient(var(--ux-brand),var(--ux-brand)) 100% 0/100% 3px no-repeat,linear-gradient(var(--ux-brand),var(--ux-brand)) 100% 0/3px 100% no-repeat}
.ret__c--bl{bottom:0;left:0;background:linear-gradient(var(--ux-brand),var(--ux-brand)) 0 100%/100% 3px no-repeat,linear-gradient(var(--ux-brand),var(--ux-brand)) 0 100%/3px 100% no-repeat}
.ret__c--br{bottom:0;right:0;background:linear-gradient(var(--ux-brand),var(--ux-brand)) 100% 100%/100% 3px no-repeat,linear-gradient(var(--ux-brand),var(--ux-brand)) 100% 100%/3px 100% no-repeat}
.ret__x{position:absolute;top:-16px;left:-16px;stroke:var(--ux-brand)}
.ret__tag{position:absolute;left:0;top:100%;margin-top:var(--ux-space-2)}


/* ── ScanBlock ── */

/* ── kicker + headline, only rendered when a caller passes heading/sub (the report's
   standalone CTA); the homepage hero form omits both and gets no extra markup. ── */
.scan-block-kicker{margin:0 0 12px;font:800 12px/1 var(--ux-font-mono);letter-spacing:var(--ux-track-kicker);text-transform:uppercase;color:var(--ux-brand-ink)}
.scan-block-h{margin:0 0 20px;font-family:var(--ux-font-display);font-size:var(--ux-text-h2);font-weight:var(--ux-weight-bold);color:var(--ux-ink);line-height:1.15}
/* ── the scan form itself — moved from signal-shell.js so the Worker-safe report pipeline
   gets the same input/button without importing a file that reads ds.css off disk. ── */
.scanzone{max-width:720px}
/* flex:1 lives HERE, not on .scan-url. .scan-field is the flex CHILD of .scanbar-row; .scan-url
   is its grandchild, so a flex:1 declared there would govern nothing and the field would size to
   content. min-width:0 lets it shrink below the input's intrinsic width instead of overflowing.
   One rule fixes every surface that renders this form — same markup, same fix. */
/* #753 standard Input: mono 400 16px, h48, pad 0 20, pill, surface, 2px line-strong. The surface
   sits on .scan-field so the transparent input can layer over the ghost-typer. Paired button is
   the primary Button geometry (48px pill, brand fill, white, no shadow), 8px gap. */
.scan-field{position:relative;flex:1;min-width:0;background:var(--ux-surface);border-radius:var(--ux-radius-pill)}
.scanbar-row{display:flex;gap:8px;flex-direction:column}
@media(min-width:600px){.scanbar-row{flex-direction:row}}
.scan-url{width:100%;flex:1;min-width:0;background:transparent;border:2px solid var(--ux-line-strong);border-radius:var(--ux-radius-pill);color:var(--ux-ink);font:400 16px/1 var(--ux-font-mono);padding:0 20px;height:var(--ux-control-h);outline:0;transition:border-color .2s;position:relative;z-index:1}
.scan-url::placeholder{color:transparent}
.scan-url:focus{border-color:var(--ux-brand)}
.scan-ghost{position:absolute;left:22px;top:0;bottom:0;display:flex;align-items:center;font:400 16px/1 var(--ux-font-mono);color:var(--ux-ink-muted);pointer-events:none;white-space:nowrap;overflow:hidden;z-index:0}
.scan-caret{margin-left:2px;color:var(--ux-brand-ink);animation:caret-blink 1s steps(1) infinite}
@keyframes caret-blink{50%{opacity:0}}
.scan-url:focus + .scan-ghost,.scan-url:not(:placeholder-shown) + .scan-ghost{display:none}
.scan-go{flex:none;height:var(--ux-control-h);border:1px solid var(--ux-brand);cursor:pointer;font:700 15px/1 var(--ux-font-sans);color:var(--ux-on-brand);background:var(--ux-brand);padding:0 20px;border-radius:var(--ux-radius-pill);box-shadow:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;transition:transform var(--ux-dur-short) var(--ux-ease-press),opacity var(--ux-dur-short) var(--ux-ease-press)}
.scan-go .arw{display:inline-block;transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.scan-go:hover .arw{transform:translateX(5px)}
@media(hover:hover){.scan-go:hover{transform:scale(var(--ux-hover-scale))}}
.scan-go:active{transform:scale(var(--ux-press-scale));opacity:var(--ux-press-opacity)}
/* On the final CTA band the field and button invert to plate-ink (the home hero's rules in
   signal-shell.css say the same thing for .hero--plate). */
.finalcta .scan-field{background:var(--ux-plate-ink)}
.finalcta .scan-url{border-color:var(--ux-plate-ink);color:var(--ux-ink)}
.finalcta .scan-go{background:var(--ux-plate-ink);border-color:var(--ux-plate-ink);color:var(--ux-plate-bg)}
.finalcta .scan-hint{color:var(--ux-plate-ink-soft)}
.finalcta .scan-hint b{color:var(--ux-plate-ink)}
.finalcta :focus-visible{outline-color:var(--ux-plate-ink)}
.scan-hint{font:600 13.5px/1.5 var(--ux-font-mono);color:var(--ux-ink-muted);margin:14px 0 0}
.scan-hint b{color:var(--ux-ink)}
/* ── INK (#857): the same form in the Ink look, scoped so paper is untouched. Mirrors XrayInput
   (css/xray-input.css): a hairline prompt field, a round black arrow submit, neon ONLY as the
   caret and the 2px focus underline. Markup is unchanged (paper byte-identical); the button's
   text label is hidden with font-size:0 and its existing arrow glyph is turned to point up. ── */
[data-theme="ink"] .scan-block-kicker{font:var(--ux-weight-normal) var(--ux-text-small)/1.4 var(--ux-font-sans);letter-spacing:0;text-transform:none;color:var(--ux-ink-muted)}
[data-theme="ink"] .scan-block-h{font-family:var(--ux-font-sans);font-weight:var(--ux-weight-medium)}
[data-theme="ink"] .scanzone{max-width:720px}
/* the approved Search (hero), Figma 31:69: a 3px ink box, square corners, muted placeholder,
   and a pink Space Mono caps button inside it. The ghost typer is hidden here (the real
   placeholder shows instead), so the form is never an empty box when its script is absent. */
[data-theme="ink"] .scanbar-row{position:relative;flex-direction:row;align-items:center;gap:var(--ux-space-2);box-sizing:border-box;padding:var(--ux-space-2);background:var(--ux-surface);border:3px solid var(--ux-ink);border-radius:0;overflow:hidden}
[data-theme="ink"] .scanbar-row:focus-within::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ux-signal)}
[data-theme="ink"] .scan-field{background:transparent;border-radius:0}
[data-theme="ink"] .scan-url{border:0;border-radius:0;padding:var(--ux-space-3) var(--ux-space-2);height:auto;font:var(--ux-weight-medium) var(--ux-text-body)/1.35 var(--ux-font-sans);caret-color:var(--ux-signal)}
[data-theme="ink"] .scan-url::placeholder{color:var(--ux-ink-muted);opacity:1}
[data-theme="ink"] .scan-ghost{display:none}
[data-theme="ink"] .scan-url:focus,[data-theme="ink"] .scan-url:focus-visible{outline:0}
[data-theme="ink"] .scan-go{width:auto;height:auto;padding:var(--ux-space-3) var(--ux-space-5);gap:0;border:0;border-radius:0;background:var(--ux-brand);color:var(--ux-on-brand);font:var(--ux-weight-bold) var(--ux-text-body)/1.2 var(--ux-font-stamp,var(--ux-font-sans));letter-spacing:var(--ux-track-wide);text-transform:uppercase}
[data-theme="ink"] .scan-go .arw{display:none}
[data-theme="ink"] .scan-hint{font:var(--ux-weight-normal) var(--ux-text-small)/1.4 var(--ux-font-sans)}


/* ── Score ── */

.score__n{font-family:var(--ux-font-sans);font-weight:var(--ux-weight-bold);letter-spacing:var(--ux-track-tight);color:var(--ux-brand-ink);font-variant-numeric:tabular-nums;line-height:var(--ux-leading-solid)}
.score__d{font-family:var(--ux-font-mono);color:var(--ux-ink-muted)}
.score__band{font:var(--ux-weight-semibold) var(--ux-text-caption)/1 var(--ux-font-mono);letter-spacing:var(--ux-track-wide);text-transform:uppercase;color:var(--ux-ink-muted)}
/* dial */
.score--dial{position:relative;width:120px;height:120px;display:grid;place-items:center}
.score__ring{position:absolute;inset:0;transform:rotate(-90deg)}
.score__ring circle{fill:none;stroke-width:7}
.score__track{stroke:var(--ux-line)}
.score__fill{stroke:var(--ux-brand);stroke-linecap:round;filter:drop-shadow(0 0 6px var(--ux-brand));transition:stroke-dashoffset var(--ux-dur-slow) var(--ux-ease-out)}
.score--dial .score__center{display:flex;flex-direction:column;align-items:center}
.score--dial .score__n{font-size:var(--ux-text-h1)}
.score--dial .score__d{font-size:var(--ux-text-caption)}
/* badge */
.score--badge{display:inline-flex;align-items:baseline;gap:3px;padding:6px 12px;border:1px solid var(--ux-line-strong);border-radius:var(--ux-radius-pill);background:var(--ux-surface)}
.score--badge .score__n{font-size:var(--ux-text-body)}
.score--badge .score__d{font-size:var(--ux-text-caption)}
/* inline */
.score--inline{display:inline-flex;align-items:baseline;gap:4px}
.score--inline .score__n{font-size:var(--ux-text-body)}
.score--inline .score__d{font-size:var(--ux-text-small)}


/* ── SectionHeader ── */
/* section-header.css — SectionHeader (#954, Figma 30:92). Roles only. Anton is one weight, so synthesis is off. */
.sh{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ux-space-3);margin:0;scroll-margin-top:var(--ux-space-8)}
.sh__kicker{margin:0;padding:var(--ux-space-1) var(--ux-space-2);background:var(--ux-tape,var(--ux-surface));color:var(--ux-tape-ink,var(--ux-ink));
  font:var(--ux-weight-bold) var(--ux-text-micro)/1.2 var(--ux-font-stamp,var(--ux-font-mono));letter-spacing:var(--ux-track-kicker);text-transform:uppercase}
.sh--white .sh__kicker{border:1px solid var(--ux-ink)}
.sh--pink .sh__kicker{box-shadow:var(--ux-tape-shadow,none)}
/* the headline is Anton, tight, at the Display/L scale (72 at 1440, 44 at 390); sentence case */
.sh__title{margin:0;font-family:var(--ux-font-display);font-weight:400;font-synthesis:none;font-size:clamp(44px,5vw,72px);line-height:.95;letter-spacing:0;color:var(--ux-ink);text-wrap:balance}
.sh__blurb{margin:0;max-width:44em;font-size:clamp(18px,1.4vw,20px);line-height:var(--ux-leading-snug);color:var(--ux-ink-soft)}
/* ink-muted on pink fails (3.19), so the line under a pink header is ink */
.sh--pink .sh__blurb{color:var(--ux-ink)}


/* ── Section ── */

.section{margin:var(--ux-space-6) 0}
.kicker{font:var(--ux-weight-semibold) var(--ux-text-caption)/1 var(--ux-font-mono);letter-spacing:var(--ux-track-kicker);text-transform:uppercase;color:var(--ux-brand-ink);margin:0 0 12px}
.section__title{font-size:var(--ux-text-h2);line-height:var(--ux-leading-tight);letter-spacing:var(--ux-track-snug);font-weight:var(--ux-weight-heavy);color:var(--ux-ink);margin:0 0 4px}
.section__blurb{color:var(--ux-ink-muted);font-size:var(--ux-text-small);margin:0 0 18px;line-height:var(--ux-leading-snug)}
/* THE PLATE (#746): a full-bleed band in the plate colours. Headline roles, not the h2 defaults. */
.section--plate{background:var(--ux-plate-bg);color:var(--ux-plate-ink);padding:var(--ux-space-6) var(--ux-space-4)}
.section--plate .kicker{color:var(--ux-plate-ink)}
.section--plate .section__title{color:var(--ux-plate-ink);font-family:var(--ux-font-headline);font-weight:var(--ux-weight-headline);letter-spacing:var(--ux-track-headline);line-height:var(--ux-leading-headline)}
.section--plate .section__blurb{color:var(--ux-plate-ink-soft)}


/* ── ShotFrame ── */
/* shot-frame.css — ShotFrame (#954, Figma 31:55). Roles only. The tint is the pink plate at 22% multiply over a greyscale capture. */
.shotframe{position:relative;margin:0;padding:var(--ux-space-3);background:var(--ux-surface);border:2px solid var(--ux-ink);box-sizing:border-box}
.shotframe__plate{position:relative;overflow:hidden;aspect-ratio:var(--shotframe-ar,16/10);background:var(--ux-peer,var(--ux-line))}
.shotframe__img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.shotframe__cap{margin:var(--ux-space-2) 0 0;font:var(--ux-weight-normal) var(--ux-text-micro)/1.4 var(--ux-font-stamp,var(--ux-font-mono));color:var(--ux-ink-muted)}
/* x-ray: greyscale, then the pink plate multiplied at 22% */
.shotframe--xray .shotframe__img{filter:grayscale(1)}
.shotframe--xray .shotframe__plate::after{content:"";position:absolute;inset:0;background:var(--ux-brand);opacity:.22;mix-blend-mode:multiply;pointer-events:none}
/* crop marks: four pink L corners that sit just outside the frame */
.shotframe__mark{position:absolute;width:20px;height:20px;pointer-events:none}
.shotframe__mark--tl{top:-4px;left:-4px;background:linear-gradient(var(--ux-brand),var(--ux-brand)) 0 0/100% 3px no-repeat,linear-gradient(var(--ux-brand),var(--ux-brand)) 0 0/3px 100% no-repeat}
.shotframe__mark--tr{top:-4px;right:-4px;background:linear-gradient(var(--ux-brand),var(--ux-brand)) 100% 0/100% 3px no-repeat,linear-gradient(var(--ux-brand),var(--ux-brand)) 100% 0/3px 100% no-repeat}
.shotframe__mark--bl{bottom:-4px;left:-4px;background:linear-gradient(var(--ux-brand),var(--ux-brand)) 0 100%/100% 3px no-repeat,linear-gradient(var(--ux-brand),var(--ux-brand)) 0 100%/3px 100% no-repeat}
.shotframe__mark--br{bottom:-4px;right:-4px;background:linear-gradient(var(--ux-brand),var(--ux-brand)) 100% 100%/100% 3px no-repeat,linear-gradient(var(--ux-brand),var(--ux-brand)) 100% 100%/3px 100% no-repeat}


/* ── StatBlock ── */
/* stat-block.css — StatBlock (#954, Figma 30:275). Numeral first, label under it (DOM is label then value, so the dl reads term then figure). */
.statblock{display:flex;flex-wrap:wrap;gap:var(--ux-space-6) var(--ux-space-8);margin:0;padding:0}
.statblock__item{display:flex;flex-direction:column-reverse;gap:var(--ux-space-1);margin:0}
.statblock__value{margin:0;font-family:var(--ux-font-display);font-weight:400;font-synthesis:none;font-size:clamp(64px,7vw,96px);line-height:.95;letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--ux-signal,var(--ux-brand))}
.statblock__label{margin:0;font:var(--ux-weight-bold) var(--ux-text-body)/1.2 var(--ux-font-sans);color:var(--ux-ink)}
/* ink on pink: a pink numeral on a pink section would vanish */
.statblock--pink .statblock__value{color:var(--ux-ink)}


/* ── StatRow ── */
/* stat-row.css — Ink stat row (#852). Value above label (DOM order is label first so the dl reads term then figure). */
.ink-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ux-space-6);margin:0;padding:var(--ux-space-5) 0 0;border-top:2px solid var(--ux-ink)}
.ink-stat{display:flex;flex-direction:column-reverse;gap:var(--ux-space-1);margin:0}
.ink-stat__value{margin:0;font-family:var(--ux-font-display);font-weight:400;font-synthesis:none;font-size:clamp(64px,7vw,96px);line-height:.95;letter-spacing:0;color:var(--ux-signal,var(--ux-brand));font-variant-numeric:tabular-nums}
.ink-stat__label{margin:0;font:var(--ux-weight-bold) var(--ux-text-body)/1.2 var(--ux-font-sans);color:var(--ux-ink)}
@media (max-width:640px){.ink-stats{grid-template-columns:1fr;gap:var(--ux-space-5)}}


/* ── Steps ── */

.steps{display:grid;gap:var(--ux-space-3)}
.steps--marketing{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.step{display:flex;gap:var(--ux-space-3);align-items:flex-start;padding:var(--ux-space-4);border:1px solid var(--ux-line);border-radius:var(--ux-radius-md);background:var(--ux-surface)}
.step__n{font:var(--ux-weight-heavy) var(--ux-text-h3)/1 var(--ux-font-mono);color:var(--ux-brand-ink);flex:none}
.step__title{font-weight:var(--ux-weight-bold);color:var(--ux-ink);font-size:var(--ux-text-body)}
.step__text{color:var(--ux-ink-muted);font-size:var(--ux-text-small);margin-top:4px;line-height:var(--ux-leading-snug)}
.step__bar{align-self:center;margin-left:auto;width:64px;height:5px;border-radius:var(--ux-radius-pill);background:var(--ux-raised);overflow:hidden;flex:none}
.step__bar i{display:block;height:100%;background:var(--ux-grad)}
.steps--funnel{grid-template-columns:1fr}
.steps--funnel .step{border-left:3px solid var(--ux-brand-tint)}


/* ── Table ── */

.table{width:100%;border-collapse:collapse;font-size:var(--ux-text-small)}
.table th,.table td{text-align:left;padding:var(--ux-space-2) var(--ux-space-2);border-bottom:1px solid var(--ux-line)}
.table th{font:700 12px/1 var(--ux-font-mono);letter-spacing:var(--ux-track-kicker);text-transform:uppercase;color:var(--ux-ink-muted)}
.table td{color:var(--ux-ink-muted)}
.table .td--lead{font-weight:var(--ux-weight-bold);color:var(--ux-ink);font-variant-numeric:tabular-nums}
.table--comparison td{text-align:center}
.table--comparison td:first-child{text-align:left;color:var(--ux-ink)}
.table--comparison .col--us{color:var(--ux-brand-ink);font-weight:var(--ux-weight-semibold)}


/* ── Texture ── */
/* TEXTURE (#903). Garnish only: one texture per band. Colour is roles, with a fallback to a role that
   exists on every theme, so a non-Ink page that ever renders one is still legible. */

/* grain: a fine noise laid over the band's own surface. soft-light so it lifts a dark panel and
   warms a light one without changing either colour. */
.tx-grain{position:relative;isolation:isolate}
.tx-grain::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.55;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.2 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* halftone: a dot screen that fades out across the band, anchored to its top right. */
.tx-halftone{position:relative;isolation:isolate}
.tx-halftone::before{content:"";position:absolute;top:0;right:0;width:55%;height:70%;z-index:-1;pointer-events:none;opacity:.5;color:var(--ux-ink);
  background:radial-gradient(circle,currentColor 1.6px,transparent 1.8px) 0 0/9px 9px;
  -webkit-mask-image:linear-gradient(to bottom left,black,transparent 75%);mask-image:linear-gradient(to bottom left,black,transparent 75%)}

/* tape (#954, Figma 30:19): a white strip, Space Mono bold caps in ink, a slight tilt and the tape shadow. On a white ground it
   also takes a 1px ink outline (white on white needs an edge); on pink the shadow alone carries it. No clip-path: the highlight
   is high contrast and easy to read, which is the point. */
.tx-tape{position:relative;z-index:var(--ux-z-raised,10);isolation:isolate;display:inline-block;padding:var(--ux-space-2) var(--ux-space-3);background:var(--ux-tape,var(--ux-surface));color:var(--ux-tape-ink,var(--ux-ink));
  font:var(--ux-weight-bold) var(--ux-text-caption)/1.2 var(--ux-font-stamp,var(--ux-font-mono));letter-spacing:var(--ux-track-caps);text-transform:uppercase;max-width:100%;box-sizing:border-box;box-shadow:var(--ux-tape-shadow,none)}
.tx-tape--white{border:1px solid var(--ux-ink)}
/* STICKERS ALWAYS RENDER ABOVE THEIR NEIGHBOURS (#960, Ben: "stickers like the 'whole pages. no mockups.' looks odd when its behind elements, should always be above"). Tape and stamp are z-raised and isolated HERE, once, so no page re-declares it; a tilt alone makes a stacking context at z 0, which lost to any later positioned sibling. The stamp also gets a white plate: an outline-only box let the capture under it show through the letters, which read as the sticker sitting behind. */
.tx-tape--l{padding:var(--ux-space-3) var(--ux-space-4);font-size:var(--ux-text-body);letter-spacing:var(--ux-track-wide)}
/* a label that is nowrap and wider than a 320px phone's card was amputated by the body's overflow clip: wrap on a narrow phone, never wider than its box */


/* stamp (#954, Figma 30:31): a double-ruled box (3px outer, 1px inner) in Space Mono bold. Pink or ink; never clipped by another element. */
.tx-stamp{--stamp:var(--ux-signal,var(--ux-ink));position:relative;z-index:var(--ux-z-raised,10);isolation:isolate;background:var(--ux-surface);display:inline-block;max-width:100%;box-sizing:border-box;padding:var(--ux-space-3) var(--ux-space-4);border:3px solid var(--stamp);
  color:var(--stamp);font:var(--ux-weight-bold) var(--ux-text-body)/1.2 var(--ux-font-stamp,var(--ux-font-mono));letter-spacing:var(--ux-track-wide);text-transform:uppercase}
.tx-stamp::before{content:"";position:absolute;inset:3px;border:1px solid var(--stamp);pointer-events:none}
.tx-stamp--ink{--stamp:var(--ux-ink)}

.tx-tilt-l{transform:rotate(-2deg)}
.tx-tilt-r{transform:rotate(2.5deg)}


/* ── ViewToggle ── */
/* view-toggle.css — ViewToggle (#954, Figma 30:125). A 2px ink box; the active item is a pink fill (Public: an outlined box). */
.vt{display:inline-flex;align-items:stretch;gap:var(--ux-space-2);padding:var(--ux-space-1);border:2px solid var(--ux-ink);background:var(--ux-surface);box-sizing:border-box;max-width:100%}
.vt__item{display:inline-flex;align-items:center;gap:var(--ux-space-1);padding:var(--ux-space-3) var(--ux-space-4);border:1px solid transparent;color:var(--ux-ink);text-decoration:none;white-space:nowrap;
  font:var(--ux-weight-bold) var(--ux-text-small)/1 var(--ux-font-stamp,var(--ux-font-mono));letter-spacing:var(--ux-track-wide);text-transform:uppercase}
.vt__item:hover{border-color:var(--ux-ink)}
.vt__item--on{background:var(--ux-brand);border-color:var(--ux-brand)}
.vt__item--on:first-child{background:var(--ux-surface);border-color:var(--ux-ink)}
.vt__plus{color:var(--ux-ink);font-weight:var(--ux-weight-bold)}
.vt__item--on .vt__plus{color:var(--ux-ink)}
.vt__price{margin-left:var(--ux-space-1);font-weight:var(--ux-weight-normal);letter-spacing:0;text-transform:none}
@media(max-width:480px){.vt__item{padding:var(--ux-space-3) var(--ux-space-3);font-size:var(--ux-text-caption)}}


/* ── WhatIs ── */
/* what-is.css — Ink "What is UXXRAY?" (#865, direction X). Roles only; sidecar of ds/components/what-is.js.
   Figma: v2 / What is UXXRAY / X steps, desktop 1440 and mobile 390, light and dark. */
.wi{padding:var(--ux-space-8) 0 var(--ux-space-8)}
.wi__in{max-width:var(--ux-maxw);margin:0 auto;padding:0 var(--ux-space-5);box-sizing:border-box;display:flex;flex-direction:column;gap:var(--ux-space-7)}
.wi__head{display:flex;flex-direction:column;gap:var(--ux-space-3);max-width:820px}
.wi__title{margin:0;font-family:var(--ux-font-display);font-weight:400;font-synthesis:none;font-size:clamp(30px,4.4vw,44px);line-height:1;letter-spacing:0;text-transform:uppercase;color:var(--ux-ink)}
.wi__lede{margin:0;font:var(--ux-weight-normal) var(--ux-text-h3)/1.55 var(--ux-font-sans);color:var(--ux-ink-muted)}

/* three steps: a hairline-ruled strip */
.wi__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0;padding:0;list-style:none;background:var(--ux-line);border:1px solid var(--ux-line);border-radius:var(--ux-radius-md);overflow:hidden}
.wi__step{display:flex;flex-direction:column;gap:var(--ux-space-4);min-width:0;margin:0;padding:var(--ux-space-5);background:var(--ux-surface)}
.wi__n{font-family:var(--ux-font-display);font-weight:400;font-synthesis:none;font-size:var(--ux-text-h1);line-height:1;color:var(--ux-signal)}
.wi__stage{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:132px;padding:var(--ux-space-4);background:var(--ux-bg);border:1px solid var(--ux-line);border-radius:var(--ux-radius-sm);overflow:hidden}
.wi__st{margin:0;font:var(--ux-weight-semibold) 20px/1.3 var(--ux-font-sans);color:var(--ux-ink)}
.wi__sb{margin:0;font:var(--ux-weight-normal) var(--ux-text-small)/1.5 var(--ux-font-sans);color:var(--ux-ink-muted)}
/* stage 1: the pill */
.wi__pill{display:inline-flex;align-items:center;gap:var(--ux-space-3);padding:10px 10px 10px 18px;background:var(--ux-surface);border:1px solid var(--ux-line);border-radius:var(--ux-radius-pill)}
.wi__url{font:var(--ux-weight-normal) 13px/1.2 var(--ux-font-mono);color:var(--ux-ink-muted)}
.wi__go{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--ux-ink);color:var(--ux-bg)}
/* stage 2: four screens */
.wi__walk{display:flex;flex-direction:column;align-items:center;gap:10px}
.wi__screens{display:flex;align-items:center;gap:6px}
.wi__screens b{font:var(--ux-weight-normal) var(--ux-text-small)/1 var(--ux-font-mono);color:var(--ux-ink-muted)}
.wi__screen{display:flex;flex-direction:column;gap:5px;box-sizing:border-box;width:40px;height:58px;padding:8px 7px;background:var(--ux-surface);border:1px solid var(--ux-line);border-radius:var(--ux-radius-xs)}
.wi__screen i{display:block;height:4px;border-radius:2px;background:var(--ux-line)}
.wi__screen i:nth-child(1),.wi__screen i:nth-child(3){width:24px}
.wi__screen i:nth-child(2){width:18px}
.wi__cap{font:var(--ux-weight-normal) var(--ux-text-micro)/1.2 var(--ux-font-mono);color:var(--ux-ink-muted)}
/* stage 3: one real finding, quoted */
.wi__found{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ux-space-2);max-width:100%;box-sizing:border-box;padding:12px 14px;background:var(--ux-surface);border:1px solid var(--ux-line);border-radius:var(--ux-radius-sm)}
.wi__row{display:flex;align-items:center;gap:var(--ux-space-2);flex-wrap:wrap}
.wi__tag{padding:3px var(--ux-space-2);border:1px solid var(--ux-line);border-radius:var(--ux-radius-pill);font:var(--ux-weight-normal) var(--ux-text-micro)/1.3 var(--ux-font-mono);letter-spacing:var(--ux-track-caps);text-transform:uppercase;color:var(--ux-ink-muted)}
.wi__pat{font:var(--ux-weight-medium) 13px/1.3 var(--ux-font-sans);color:var(--ux-ink)}
.wi__q{quotes:"\201C" "\201D"}
.wi__ev{font:var(--ux-weight-normal) var(--ux-text-caption)/1.4 var(--ux-font-mono);color:var(--ux-ink);overflow-wrap:anywhere}
.wi__where{font:var(--ux-weight-normal) var(--ux-text-micro)/1.3 var(--ux-font-mono);color:var(--ux-ink-muted)}

/* who it is for */
.wi__whowrap{display:flex;flex-direction:column;gap:var(--ux-space-4)}
.wi__h3{margin:0;font-family:var(--ux-font-display);font-weight:400;font-synthesis:none;font-size:clamp(24px,3vw,30px);line-height:1;letter-spacing:0;text-transform:uppercase;color:var(--ux-ink)}
.wi__whos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:0;padding:0;list-style:none;background:var(--ux-line);border:1px solid var(--ux-line);border-radius:var(--ux-radius-md);overflow:hidden}
.wi__who{display:flex;flex-direction:column;gap:var(--ux-space-2);min-width:0;margin:0;padding:var(--ux-space-5);background:var(--ux-surface)}
.wi__wk{margin:0;font:var(--ux-weight-normal) var(--ux-text-micro)/1.3 var(--ux-font-mono);letter-spacing:var(--ux-track-caps);text-transform:uppercase;color:var(--ux-ink-muted)}
.wi__wt{margin:0;font:var(--ux-weight-medium) var(--ux-text-body)/1.4 var(--ux-font-sans);color:var(--ux-ink)}
.wi__wb{margin:0;font:var(--ux-weight-normal) var(--ux-text-small)/1.5 var(--ux-font-sans);color:var(--ux-ink-muted)}

/* the action: the real field plus the way into the library */
.wi__action{display:flex;align-items:center;gap:var(--ux-space-5)}
.wi__action .ink-input{flex:0 1 680px}
.wi__browse{display:flex;flex-direction:column;gap:2px;min-width:0}
.wi__link{font:var(--ux-weight-medium) var(--ux-text-body)/1.3 var(--ux-font-sans);color:var(--ux-ink);text-decoration:none}
.wi__link:hover{text-decoration:underline}
.wi__src,.wi__foot{margin:0;font:var(--ux-weight-normal) var(--ux-text-micro)/1.45 var(--ux-font-mono);color:var(--ux-ink-muted);overflow-wrap:anywhere}
.wi__foot{margin-top:calc(-1 * var(--ux-space-4))}

@media (max-width:1000px){
  .wi__whos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .wi{padding-top:var(--ux-space-7);padding-bottom:var(--ux-space-7)}
  .wi__in{gap:var(--ux-space-6)}
  .wi__lede{font-size:var(--ux-text-body)}
  .wi__steps{grid-template-columns:minmax(0,1fr)}
  .wi__whos{grid-template-columns:minmax(0,1fr)}
  .wi__action{flex-direction:column;align-items:stretch;gap:var(--ux-space-4)}
  .wi__action .ink-input{flex:none}
}


/* ── XrayInput ── */
/* xray-input.css — Ink x-ray field (#852). Neon = caret + 2px focus underline only. */
.ink-input{position:relative;display:flex;align-items:center;gap:var(--ux-space-3);box-sizing:border-box;width:100%;min-height:64px;padding:0 var(--ux-space-3) 0 var(--ux-space-4);
  background:var(--ux-surface);border:1px solid var(--ux-ink);border-radius:var(--ux-radius-lg);overflow:hidden}
.ink-input--hero{border-width:2px;min-height:72px}
.ink-input:focus-within{border-color:var(--ux-ink)}
/* the 2px underline lives on the form edge so it follows the radius and clips with it */
.ink-input:focus-within::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ux-signal)}
.ink-input__field{flex:1;min-width:0;display:block}
.ink-input__text{display:block;width:100%;box-sizing:border-box;border:0;background:transparent;color:var(--ux-ink);caret-color:var(--ux-signal);
  font:var(--ux-weight-normal) var(--ux-text-small)/1.4 var(--ux-font-sans);padding:var(--ux-space-3) 0}
.ink-input__text::placeholder{color:var(--ux-ink-muted);opacity:1}
/* the form shows the focus; the bare input must not draw a second ring */
.ink-input__text:focus,.ink-input__text:focus-visible{outline:0}
.ink-input__go{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:0;border-radius:var(--ux-radius-sm);
  background:var(--ux-brand);color:var(--ux-on-brand);cursor:pointer}
/* the text button (Figma 31:69): pink, Space Mono bold caps; the arrow variant stays the 36px square */
.ink-input__go:has(.ink-input__go-text){width:auto;height:auto;align-self:stretch;margin:var(--ux-space-1) calc(var(--ux-space-3) * -1) var(--ux-space-1) 0;padding:0 var(--ux-space-5);
  font:var(--ux-weight-bold) var(--ux-text-body)/1 var(--ux-font-stamp,var(--ux-font-sans));letter-spacing:var(--ux-track-wide);text-transform:uppercase;white-space:nowrap}
.ink-input__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}