/* GENERATED by scripts/ui.ts from data/brand/ba-tokens.css, src/ui/tokens.css, three parts of src/ui/components.css, src/ui/pages/front.css and src/ui/pages/topic-tiles.css: edit those, then run it. */

/**
 * BoardingArea Design Tokens CSS
 * Source: Rebecca (BoardingArea UI/UX), delivered by Sean 2026-09-29. Brand source of truth: do not edit values here;
 * map them in src/ui/tokens.css. See data/brand/README.md for the showcase page's differences.
 */

:root {
  --ba-color-background: var(--ba-color-slate-100);
  --ba-color-border: var(--ba-color-slate-100);
  --ba-color-border-strong: var(--ba-color-slate-300);
  --ba-color-danger: var(--ba-color-danger-600);
  --ba-color-danger-muted: var(--ba-color-danger-400);
  --ba-color-danger-subtle: var(--ba-color-danger-200);
  --ba-color-info: var(--ba-color-info-500);
  --ba-color-info-muted: var(--ba-color-info-300);
  --ba-color-info-subtle: var(--ba-color-info-200);
  --ba-color-primary: var(--ba-color-primary-green);
  --ba-color-primary-strong: var(--ba-color-primary-green-dark);
  --ba-color-ring: var(--ba-color-primary-green);
  --ba-color-success: var(--ba-color-green-600);
  --ba-color-success-muted: var(--ba-color-green-500);
  --ba-color-success-subtle: var(--ba-color-green-400);
  --ba-color-surface: var(--ba-color-primary-white);
  --ba-color-surface-muted: var(--ba-color-slate-50);
  --ba-color-text: var(--ba-color-primary-black);
  --ba-color-text-muted: var(--ba-color-slate-500);
  --ba-color-text-subtle: var(--ba-color-slate-400);
  --ba-color-warning: var(--ba-color-warning-400);
  --ba-color-warning-muted: var(--ba-color-warning-300);
  --ba-color-warning-subtle: var(--ba-color-warning-100);

  --ba-border-radius-default: var(--ba-border-radius-none);
  --ba-border-radius-sm: var(--ba-border-radius-md);
  --ba-border-radius-md: var(--ba-border-radius-lg);
  --ba-border-radius-lg: var(--ba-border-radius-2xl);
  --ba-border-radius-full: var(--ba-border-radius-full);
  --ba-text-xs: var(--ba-size-xs);
  --ba-text-sm: var(--ba-size-sm);
  --ba-text-base: var(--ba-size-md);
  --ba-text-lg: var(--ba-size-lg);
  --ba-text-xl: var(--ba-size-xl);
  --ba-text-2xl: var(--ba-size-2xl);
  --ba-text-3xl: var(--ba-size-3xl);
  --ba-text-4xl: var(--ba-size-4xl);
  --ba-text-5xl: var(--ba-size-5xl);
  --ba-text-6xl: var(--ba-size-6xl);
  --ba-text-7xl: var(--ba-size-7xl);
  --ba-text-8xl: var(--ba-size-8xl);
  --ba-text-9xl: var(--ba-size-9xl);

  --ba-font-family-body: var(--ba-family-serif);
  --ba-font-family-headings: var(--ba-family-sans);
  --ba-font-family-mono: var(--ba-family-mono);

  --ba-color-primary-black: #000000;
  --ba-color-primary-white: #ffffff;
  --ba-color-primary-grey-light: #d5dadb;
  --ba-color-primary-grey: #5c7074;
  --ba-color-primary-grey-dark: #2c3638;
  --ba-color-primary-green: #47991e;
  --ba-color-primary-green-dark: #336e16;

  --ba-color-green-50: #ecfae5;
  --ba-color-green-100: #dcf0d1;
  --ba-color-green-200: #cbe7bd;
  --ba-color-green-300: #bbdda9;
  --ba-color-green-400: #aad395;
  --ba-color-green-500: #89c06e;
  --ba-color-green-600: #68ac46;
  --ba-color-green-700: var(--ba-color-primary-green);
  --ba-color-green-800: var(--ba-color-primary-green-dark);
  --ba-color-green-900: #2b5c12;
  --ba-color-green-950: #1c3d0c;

  --ba-color-neutral-50: #fafafa;
  --ba-color-neutral-100: #f5f5f5;
  --ba-color-neutral-200: #e5e5e5;
  --ba-color-neutral-300: #d4d4d4;
  --ba-color-neutral-400: #a3a3a3;
  --ba-color-neutral-500: #737373;
  --ba-color-neutral-600: #525252;
  --ba-color-neutral-700: #404040;
  --ba-color-neutral-800: #262626;
  --ba-color-neutral-900: #111111;
  --ba-color-neutral-950: #0a0a0a;

  --ba-color-slate-50: #eff1f1;
  --ba-color-slate-100: var(--ba-color-primary-grey-light);
  --ba-color-slate-200: #bec6c7;
  --ba-color-slate-300: #9da9ac;
  --ba-color-slate-400: #7d8d90;
  --ba-color-slate-500: var(--ba-color-primary-grey);
  --ba-color-slate-600: #4a5a5d;
  --ba-color-slate-700: var(--ba-color-primary-grey-dark);
  --ba-color-slate-800: #1c2223;
  --ba-color-slate-900: #121617;
  --ba-color-slate-950: #090b0c;

  --ba-color-danger-50: #fef2f2;
  --ba-color-danger-100: #fee2e2;
  --ba-color-danger-200: #fecaca;
  --ba-color-danger-300: #fca5a5;
  --ba-color-danger-400: #f87171;
  --ba-color-danger-500: #ef4444;
  --ba-color-danger-600: #dc2626;
  --ba-color-danger-700: #b91c1c;
  --ba-color-danger-800: #991b1b;
  --ba-color-danger-900: #7f1d1d;
  --ba-color-danger-950: #450a0a;

  --ba-color-warning-50: #fffbeb;
  --ba-color-warning-100: #fef3c7;
  --ba-color-warning-200: #fde68a;
  --ba-color-warning-300: #fcd34d;
  --ba-color-warning-400: #fbbf24;
  --ba-color-warning-500: #f59e0b;
  --ba-color-warning-600: #d97706;
  --ba-color-warning-700: #b45309;
  --ba-color-warning-800: #92400e;
  --ba-color-warning-900: #78350f;
  --ba-color-warning-950: #451a03;

  --ba-color-info-50: #f6fbff;
  --ba-color-info-100: #e8f4ff;
  --ba-color-info-200: #cbe6ff;
  --ba-color-info-300: #9ad0ff;
  --ba-color-info-400: #4ab0ff;
  --ba-color-info-500: #008cdd;
  --ba-color-info-600: #006fb1;
  --ba-color-info-700: #00578c;
  --ba-color-info-800: #003d64;
  --ba-color-info-900: #002743;
  --ba-color-info-950: #001324;

  --ba-border-radius-none: 0px;
  --ba-border-radius-xs: 2px;
  --ba-border-radius-sm: 4px;
  --ba-border-radius-md: 6px;
  --ba-border-radius-lg: 8px;
  --ba-border-radius-xl: 12px;
  --ba-border-radius-2xl: 16px;
  --ba-border-radius-3xl: 24px;
  --ba-border-radius-full: 999px;

  --ba-breakpoint-sm: 500px;
  --ba-breakpoint-md: 768px;
  --ba-breakpoint-lg: 1150px;
  --ba-breakpoint-xl: 1350px;
  --ba-breakpoint-2xl: 1536px;

  --ba-container-xs: 320px;
  --ba-container-sm: 384px;
  --ba-container-md: 448px;
  --ba-container-lg: 512px;
  --ba-container-xl: 576px;
  --ba-container-2xl: 672px;
  --ba-container-3xl: 768px;
  --ba-container-4xl: 896px;
  --ba-container-5xl: 1024px;
  --ba-container-6xl: 1152px;
  --ba-container-7xl: 1280px;

  --ba-family-sans: "Source Sans Pro";
  --ba-family-serif: "Source Serif Pro";
  --ba-family-mono: "SF Pro";

  --ba-weight-thin: 100;
  --ba-weight-extralight: 200;
  --ba-weight-light: 300;
  --ba-weight-normal: 400;
  --ba-weight-medium: 500;
  --ba-weight-semibold: 600;
  --ba-weight-bold: 700;
  --ba-weight-extrabold: 800;
  --ba-weight-black: 900;

  --ba-size-xs: 12px;
  --ba-size-sm: 14px;
  --ba-size-md: 16px;
  --ba-size-lg: 18px;
  --ba-size-xl: 20px;
  --ba-size-2xl: 24px;
  --ba-size-3xl: 30px;
  --ba-size-4xl: 36px;
  --ba-size-5xl: 48px;
  --ba-size-6xl: 60px;
  --ba-size-7xl: 72px;
  --ba-size-8xl: 96px;
  --ba-size-9xl: 128px;

  --ba-leading-1: 16px;
  --ba-leading-2: 20px;
  --ba-leading-3: 24px;
  --ba-leading-4: 28px;
  --ba-leading-5: 32px;
  --ba-leading-6: 36px;
  --ba-leading-7: 40px;
  --ba-leading-8: 48px;
  --ba-leading-9: 48px;
  --ba-leading-10: 60px;
  --ba-leading-11: 72px;
  --ba-leading-12: 96px;
  --ba-leading-13: 128px;

  --ba-tracking-tighter: -0.800000011920929px;
  --ba-tracking-tight: -0.4000000059604645px;
  --ba-tracking-normal: 0px;
  --ba-tracking-wide: 0.4000000059604645px;
  --ba-tracking-wider: 0.800000011920929px;
  --ba-tracking-widest: 1.600000023841858px;

  --ba-box-shadow-default: 0 0 3px rgba(92,112,116,.2);
  --ba-box-shadow-glow: 0 0px 6px 0 rgba(71 153 30 / 50%);

  --ba-opacity-0: 0;
  --ba-opacity-5: 5;
  --ba-opacity-10: 10;
  --ba-opacity-20: 20;
  --ba-opacity-25: 25;
  --ba-opacity-30: 30;
  --ba-opacity-40: 40;
  --ba-opacity-50: 50;
  --ba-opacity-60: 60;
  --ba-opacity-70: 70;
  --ba-opacity-75: 75;
  --ba-opacity-80: 80;
  --ba-opacity-90: 90;
  --ba-opacity-95: 95;
  --ba-opacity-100: 100;

  --ba-blur-none: 0px;
  --ba-blur-xs: 4px;
  --ba-blur-sm: 8px;
  --ba-blur-md: 12px;
  --ba-blur-lg: 16px;
  --ba-blur-xl: 24px;
  --ba-blur-2xl: 40px;
  --ba-blur-3xl: 64px;

  --ba-border-width-0: 0px;
  --ba-border-width-1: 1px;
  --ba-border-width-2: 2px;
  --ba-border-width-4: 4px;
  --ba-border-width-8: 8px;
}

[data-theme="dark"],
.dark-mode {
  --ba-color-background : var(--ba-color-slate-950);
  --ba-color-surface : var(--ba-color-slate-900);
  --ba-color-surface-muted : var(--ba-color-slate-800);
  --ba-color-text : var(--ba-color-primary-white);
  --ba-color-text-muted : var(--ba-color-slate-100);
  --ba-color-text-subtle : var(--ba-color-slate-200);
  --ba-color-border : var(--ba-color-slate-900);
  --ba-color-border-strong : var(--ba-color-slate-800);
}

/* BoardingArea Tools design tokens (docs/36). Rebecca's BoardingArea tokens (data/brand/ba-tokens.css, F1.1) are the only
   source of colours, fonts, radii, shadows and the type scale: scripts/ui.ts builds public/tools/hub.css from that file,
   this one and src/ui/components.css, and writes the light values into the WordPress plugin's --ba-* defaults. This
   file maps our semantic names onto hers and holds no colour of its own. Where her named token fails WCAG AA on a
   surface we put it on, the nearest step of the same scale that passes is used, and docs/44 §7 lists it for Rebecca.
   Light by default; dark with prefers-color-scheme (unless the reader chose light) or data-theme="dark" on <html>,
   which the theme toggle sets (her file's own dark block answers the attribute; the media query repeats it). Every
   pair tests/ui-tokens.test.ts names passes AA (4.5:1 for text, 3:1 for marks) in both themes. */
:root {
  /* Surfaces and lines: her semantic tokens. */
  --color-bg: var(--ba-color-background);
  --color-surface: var(--ba-color-surface);
  --color-surface-2: var(--ba-color-surface-muted);
  --color-surface-raised: var(--ba-color-surface);
  --color-border: var(--ba-color-border);
  --color-border-strong: var(--ba-color-border-strong);
  /* Text. Her text-muted (slate-500) is 3.7:1 on her slate-100 background, so secondary text is slate-700 (her
     primary grey-dark) and tertiary slate-600, which pass on the background and on every surface. */
  --color-text: var(--ba-color-text);
  --color-text-2: var(--ba-color-slate-700);
  --color-text-3: var(--ba-color-slate-600);
  /* The one accent, her primary green, is 3.6:1 on white: it colours marks, rings and fills. Green text and links use
     green-900 (primary-strong is 6.2:1 on white but 4.4:1 on the background); buttons are primary-strong with white. */
  --color-accent: var(--ba-color-primary);
  --color-accent-hover: var(--ba-color-primary-strong);
  --color-accent-strong: var(--ba-color-green-900);
  /* R1.1: "Insider" in the wordmark, her primary green; in light her darker primary green (the primary is 2.5:1 on the
     background, primary-strong 4.4:1). */
  --color-wordmark: var(--ba-color-primary-strong);
  --color-accent-subtle: var(--ba-color-green-50);
  --color-accent-line: var(--ba-color-green-200);
  --color-button: var(--ba-color-primary-strong);
  --color-button-hover: var(--ba-color-green-900);
  --color-on-accent: var(--ba-color-primary-white);
  /* Status: her subtle backgrounds; the text a step darker in the same scale, so a chip passes AA. */
  --color-positive: var(--ba-color-green-900);   --color-positive-subtle: var(--ba-color-success-subtle);
  --color-negative: var(--ba-color-danger-800);  --color-negative-subtle: var(--ba-color-danger-subtle);
  --color-warning: var(--ba-color-warning-800);  --color-warning-subtle: var(--ba-color-warning-subtle);
  --color-info: var(--ba-color-info-700);        --color-info-subtle: var(--ba-color-info-subtle);
  --color-muted: var(--ba-color-slate-600);      --color-muted-subtle: var(--ba-color-surface-muted);
  /* Chart marks: her green and slate scales, each 3:1 against the surfaces charts sit on. */
  --color-chart: var(--ba-color-primary);
  --color-chart-2: var(--ba-color-slate-500);
  --color-chart-grid: var(--ba-color-slate-100);
  --color-series-1: var(--ba-color-green-800); --color-series-2: var(--ba-color-green-700); --color-series-3: var(--ba-color-slate-700);
  --color-series-4: var(--ba-color-slate-500); --color-series-5: var(--ba-color-slate-400);
  --color-mark: var(--ba-color-slate-500);
  /* Her ring is the primary green; on the slate-100 background that is 2.5:1, so the focus ring is primary-strong. */
  --color-focus: var(--ba-color-primary-strong);
  --color-brand: var(--ba-color-primary-grey-dark);
  --color-on-brand: var(--ba-color-primary-white);
  --color-overlay: color-mix(in srgb, var(--ba-color-slate-950) 45%, transparent);

  /* Spacing: 4-point scale. */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  /* Radii: hers (the file's primitives, declared after its semantic aliases, win: sm 4, md 6, lg 8). */
  --radius-sm: var(--ba-border-radius-md); --radius: var(--ba-border-radius-lg); --radius-lg: var(--ba-border-radius-2xl);
  --radius-full: var(--ba-border-radius-full);
  /* Shadows: her one resting shadow; raised (popovers, the drawer) is the same shadow over a border. */
  --shadow-1: var(--ba-box-shadow-default);
  --shadow-2: var(--ba-box-shadow-default);
  --shadow-glow: var(--ba-box-shadow-glow);
  /* Type: headings Source Sans, body Source Serif, figures and code mono (her file names "SF Pro" for mono, which is
     not a monospace; the showcase uses JetBrains Mono). The Adobe kit's family names come first. */
  --font: "source-serif-pro", var(--ba-font-family-body), "Source Serif 4", Georgia, serif;
  --font-headings: "source-sans-pro", var(--ba-font-family-headings), "Source Sans 3", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-xs: var(--ba-text-xs); --text-sm: var(--ba-text-sm); --text-base: var(--ba-text-sm); --text-md: var(--ba-text-base);
  --text-lg: var(--ba-text-xl); --text-xl: var(--ba-text-2xl); --text-2xl: var(--ba-text-3xl);
  --text-3xl: var(--ba-text-4xl); --text-4xl: var(--ba-text-5xl); --text-5xl: var(--ba-text-6xl);
  /* Her leading is in px per size; the body's is a ratio (her leading-3 over size-md, 24/16) so headings inherit it right. */
  --leading: 1.5; --leading-tight: 1.25;
  --tracking-tight: var(--ba-tracking-tight); --tracking-wide: var(--ba-tracking-wide); --tracking-wider: var(--ba-tracking-wider);
  --tracking-widest: var(--ba-tracking-widest);
  --weight-medium: var(--ba-weight-medium); --weight-semibold: var(--ba-weight-semibold); --weight-bold: var(--ba-weight-bold);
  --weight-black: var(--ba-weight-black);
  /* Layout: her containers. */
  --sidebar-width: 232px; --content-max: var(--ba-container-7xl); --front-max: var(--ba-container-6xl);
  color-scheme: light;
}

/* Dark: the reader's system setting, unless they chose light; or their choice of dark. Her file's dark values are
   repeated for the media query (her block answers only the attribute); ours follow. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ba-color-background: var(--ba-color-slate-950); --ba-color-surface: var(--ba-color-slate-900); --ba-color-surface-muted: var(--ba-color-slate-800);
    --ba-color-text: var(--ba-color-primary-white); --ba-color-text-muted: var(--ba-color-slate-100); --ba-color-text-subtle: var(--ba-color-slate-200);
    --ba-color-border: var(--ba-color-slate-900); --ba-color-border-strong: var(--ba-color-slate-800);
    --color-surface-raised: var(--ba-color-surface-muted);
    --color-text-2: var(--ba-color-text-muted); --color-text-3: var(--ba-color-text-subtle);
    --color-accent-strong: var(--ba-color-green-500); --color-accent-subtle: var(--ba-color-green-950); --color-accent-line: var(--ba-color-green-900);
    --color-wordmark: var(--ba-color-primary);
    --color-positive: var(--ba-color-green-500); --color-positive-subtle: var(--ba-color-green-950);
    --color-negative: var(--ba-color-danger-400); --color-negative-subtle: var(--ba-color-danger-950);
    --color-warning: var(--ba-color-warning-300); --color-warning-subtle: var(--ba-color-warning-950);
    --color-info: var(--ba-color-info-300); --color-info-subtle: var(--ba-color-info-950);
    --color-muted: var(--ba-color-text-muted); --color-muted-subtle: var(--ba-color-surface-muted);
    --color-mark: var(--ba-color-slate-400); --color-focus: var(--ba-color-green-500); --color-chart: var(--ba-color-green-500);
    --color-chart-2: var(--ba-color-slate-300); --color-chart-grid: var(--ba-color-slate-800);
    --color-series-1: var(--ba-color-green-300); --color-series-2: var(--ba-color-green-700); --color-series-3: var(--ba-color-slate-100);
    --color-series-4: var(--ba-color-slate-300); --color-series-5: var(--ba-color-slate-400);
    --color-brand: var(--ba-color-slate-950); --color-on-brand: var(--ba-color-primary-white);
    --color-overlay: color-mix(in srgb, var(--ba-color-primary-black) 60%, transparent);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-surface-raised: var(--ba-color-surface-muted);
  --color-text-2: var(--ba-color-text-muted); --color-text-3: var(--ba-color-text-subtle);
  --color-accent-strong: var(--ba-color-green-500); --color-accent-subtle: var(--ba-color-green-950); --color-accent-line: var(--ba-color-green-900);
  --color-wordmark: var(--ba-color-primary);
  --color-positive: var(--ba-color-green-500); --color-positive-subtle: var(--ba-color-green-950);
  --color-negative: var(--ba-color-danger-400); --color-negative-subtle: var(--ba-color-danger-950);
  --color-warning: var(--ba-color-warning-300); --color-warning-subtle: var(--ba-color-warning-950);
  --color-info: var(--ba-color-info-300); --color-info-subtle: var(--ba-color-info-950);
  --color-muted: var(--ba-color-text-muted); --color-muted-subtle: var(--ba-color-surface-muted);
  --color-mark: var(--ba-color-slate-400); --color-focus: var(--ba-color-green-500); --color-chart: var(--ba-color-green-500);
  --color-chart-2: var(--ba-color-slate-300); --color-chart-grid: var(--ba-color-slate-800);
  --color-series-1: var(--ba-color-green-300); --color-series-2: var(--ba-color-green-700); --color-series-3: var(--ba-color-slate-100);
  --color-series-4: var(--ba-color-slate-300); --color-series-5: var(--ba-color-slate-400);
  --color-brand: var(--ba-color-slate-950); --color-on-brand: var(--ba-color-primary-white);
  --color-overlay: color-mix(in srgb, var(--ba-color-primary-black) 60%, transparent);
  color-scheme: dark;
}

/* The theme hooks (docs/30): the --ba-* names the pages and the WordPress plugin have always used, mapped onto the
   tokens. An embed's ?accent= and friends set the tokens themselves (embed.js), so both follow. */
:root {
  --ba-font: var(--font); --ba-font-headings: var(--font-headings); --ba-mono: var(--font-mono);
  --ba-brand: var(--color-brand); --ba-brand-2: var(--ba-color-slate-600); --ba-brand-ink: var(--color-on-brand);
  --ba-accent: var(--color-accent); --ba-accent-strong: var(--color-accent-strong); --ba-accent-soft: var(--color-accent-subtle);
  --ba-accent-line: var(--color-accent-line); --ba-accent-hover: var(--color-accent-hover);
  --ba-ink: var(--color-text); --ba-ink-2: var(--color-text-2); --ba-muted: var(--color-text-3); --ba-quiet-mark: var(--color-mark);
  --ba-line: var(--color-border); --ba-input-line: var(--color-border-strong); --ba-bg: var(--color-bg);
  --ba-surface: var(--color-surface); --ba-subtle: var(--color-surface-2);
  --ba-good-bg: var(--color-positive-subtle); --ba-good-ink: var(--color-positive);
  --ba-warn-bg: var(--color-warning-subtle); --ba-warn-line: var(--color-warning); --ba-warn-ink: var(--color-warning); --ba-warn-soft: var(--color-warning-subtle);
  --ba-bad-bg: var(--color-negative-subtle); --ba-bad-ink: var(--color-negative); --ba-alert: var(--color-negative); --ba-late: var(--color-warning);
  --ba-quiet-bg: var(--color-muted-subtle); --ba-quiet-ink: var(--color-muted);
  --ba-info-bg: var(--color-info-subtle); --ba-info-ink: var(--color-info);
  --ba-reported-ink: var(--color-warning); --ba-reported-line: var(--color-warning);
  --ba-range: var(--color-accent-line);
  --ba-radius: var(--radius); --ba-shadow: var(--shadow-1);
}

/* ---- Base ------------------------------------------------------------------------------------------------ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: var(--text-base)/var(--leading) var(--ba-font); color: var(--color-text); background: var(--color-bg);
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
a { color: var(--color-accent-strong); text-underline-offset: 2px; }
a:hover { color: var(--color-text); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.wrap { max-width: var(--content-max); margin: 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--space-2); top: -40px; z-index: 50; background: var(--color-surface); color: var(--color-text); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); }
.skip:focus { top: var(--space-2); box-shadow: var(--shadow-2); }

/* ---- Type roles (Rebecca's brand, F1.1): headings and UI labels in Source Sans, body in Source Serif, figures and
   code in the mono. Chips are pills at 12/600; tables' headers xs uppercase with wide tracking; blockquotes a green rule. */
h1, h2, h3, h4, h5, h6, .brand, nav.tools, .nav-label, .seg span, .tabs, label, legend, th, .badge, .chip, .pill, .st, .seed, .flag,
.kpi-label, .section-title, .section-bar, .page-controls, .globalbar, .prov, .legend, .eyebrow { font-family: var(--font-headings); }
.kpi-value, .fig, .mono, code, kbd, samp, pre { font-family: var(--font-mono); }
.badge, .chip, .st, .seed, .flag { border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
blockquote { margin: var(--space-4) 0; padding: var(--space-2) var(--space-4); border-left: 4px solid var(--color-accent); background: var(--color-surface-2);
  font-style: italic; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
pre.code { background: var(--ba-color-slate-900); color: var(--ba-color-slate-50); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); overflow-x: auto;
  font-size: var(--text-sm); }

/* ---- "How we know" (T2.1) and a spike's line (T2.2) ------------------------------------------------------------- */
.know-btn { width: auto; height: 20px; padding: 0 var(--space-2); border-radius: var(--radius-full); font: var(--weight-semibold) var(--text-xs)/1 var(--font-headings);
  letter-spacing: 0; white-space: nowrap; }
.info.know { margin-left: var(--space-1); }
.know-pop { width: min(420px, 90vw); }
.know-panel { display: grid; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-2); }
.know-status { margin: 0; }
.know-chip { font-size: var(--text-xs); }
.know-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3); margin: 0; }
.know-dl dt { font: var(--weight-semibold) var(--text-xs)/1.5 var(--font-headings); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--color-text-3); }
.know-dl dd { margin: 0; color: var(--color-text); }
.know-dl ul { margin: 0; padding-left: var(--space-4); }
.know-method { margin: 0; font-size: var(--text-xs); color: var(--color-text-3); }
.know-trace pre { max-height: 260px; overflow: auto; font-size: var(--text-xs); }
.fd-know { margin-top: var(--space-3); font-size: var(--text-sm); }
.fd-know summary { cursor: pointer; font: var(--weight-semibold) var(--text-xs)/1.4 var(--font-headings); color: var(--color-accent-strong); }
.fd-know .know-panel { margin-top: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius); background: var(--color-surface-2); }
.live-spike { margin: var(--space-2) 0 var(--space-3); padding: var(--space-2) var(--space-3); border-left: 3px solid var(--color-accent); background: var(--color-accent-subtle);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: var(--text-sm); color: var(--color-text); }
.live-spike-check { color: var(--color-text-2); }

/* The front door (F1.2–F1.6, D3): /, /ask/<topic>, /connect, /briefing, /publishers. Rebecca's tokens only
   (data/brand/README.md): one background for the whole page, content in white surface boxes (1 px border, radius-lg,
   the default shadow), figures and code mono. D3: every UI text and lead line in Source Sans (her headings face, which
   her own conventions use for buttons, labels and forms); Source Serif for the paragraphs you read (FAQ answers, the
   cited answer, the publishers page). Gondola's craft: one canvas split by hairlines, her green as a soft glow behind the
   chats and the numbers, tight big type, a frosted header, motion that only ever replays a finished page. */
/* L1.0: the console's base rules for controls and disclosures (components.css), which the front door's buttons, inputs
   and summaries have always used; here too, as / loads only its own sheet. The same values, so hub.css pages are unchanged. */
input, select, textarea, button { font: inherit; }
input, select, textarea { padding: 8px 10px; border: 1px solid var(--ba-input-line); border-radius: var(--radius-sm); background: var(--ba-surface); color: var(--ba-ink); width: 100%; }
button { background: var(--color-button); color: var(--color-on-accent); border: 0; border-radius: var(--radius-sm); padding: 10px 20px; cursor: pointer;
  font: var(--weight-semibold) var(--text-sm)/1.25 var(--font-headings); }
button:hover { background: var(--color-button-hover); }
button[disabled] { opacity: .6; cursor: wait; }
details summary { cursor: pointer; color: var(--ba-accent-strong); font-size: .88rem; margin-top: 4px; }
details ul { margin: 6px 0 0; padding-left: 18px; }
/* D3.8: while her fonts load (they no longer block the first paint), the sans is a local Arial sized to Source Sans
   (measured in Chromium: 0.920 of its width at 400, 0.881 at 600; ascent 97 and 99, descent 29 and 31, of 100), so the
   swap doesn't move a line. */
@font-face { font-family: "BA Sans Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); font-weight: 400;
  size-adjust: 92%; ascent-override: 105.4%; descent-override: 31.5%; line-gap-override: 0%; }
@font-face { font-family: "BA Sans Fallback"; src: local("Arial Bold"), local("Arial"), local("Helvetica Neue"), local("Helvetica"); font-weight: 500 800;
  size-adjust: 88.1%; ascent-override: 112.4%; descent-override: 35.2%; line-gap-override: 0%; }
body.front { --font-headings: "source-sans-pro", var(--ba-font-family-headings), "BA Sans Fallback", "Source Sans 3", system-ui, sans-serif; }
/* Her kit's faces block (font-display:auto), so with script the page uses the fallback until they're fetched (.fonts-in,
   src/front/layout.ts); without script the kit loads as a plain stylesheet and is used from the start. */
.js:not(.fonts-in) body.front { --font-headings: "BA Sans Fallback", system-ui, sans-serif; --font: Georgia, "Times New Roman", serif; }
body.front { display: block; background: var(--color-bg); font: var(--text-md)/1.5 var(--font-headings);
  --fd-bar-h: 64px;
  --fd-hair: color-mix(in srgb, var(--color-border-strong) 80%, transparent);
  --fd-glow: .06;
  --fd-ease: cubic-bezier(.4, 0, .2, 1);
  --fd-ease-out: cubic-bezier(.22, 1, .36, 1);
  --fd-glass: color-mix(in srgb, var(--color-surface) 72%, transparent); }
:root[data-theme="dark"] body.front { --fd-hair: color-mix(in srgb, var(--ba-color-slate-50) 8%, transparent); --fd-glow: .12; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.front { --fd-hair: color-mix(in srgb, var(--ba-color-slate-50) 8%, transparent); --fd-glow: .12; } }
.fd-read, .fd-faq-a p, .fd-engine-text { font-family: var(--font); }
body.front main { padding: 0; overflow-x: clip; } /* the glow may bleed past a chat, never past the screen */
.fd-wrap { max-width: var(--front-max); margin: 0 auto; padding: 0 var(--space-5); }
.fd-narrow { max-width: var(--ba-container-4xl); }
.eyebrow { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase;
  color: var(--color-text-2); }
body.front h1, body.front h2, body.front h3 { font-family: var(--font-headings); color: var(--color-text); }
/* D3.1: Gondola's scale in her sizes: h1 60/60 (72/72 from 1350), h2 48/48, h3 36/40, all 600 and tight. */
body.front h1, body.front h2, body.front h3 { font-weight: var(--weight-semibold); letter-spacing: -0.02em; }
body.front h1 { font-size: var(--ba-size-6xl); line-height: var(--ba-leading-10); }
body.front h2 { font-size: var(--ba-size-5xl); line-height: var(--ba-leading-9); margin: 0 0 var(--space-6); }
body.front h3 { font-size: var(--ba-size-4xl); line-height: var(--ba-leading-7); margin: 0 0 var(--space-4); }
@media (min-width: 1350px) { body.front h1 { font-size: var(--ba-size-7xl); line-height: var(--ba-leading-11); } }
.fd-lede { max-width: 640px; color: var(--color-text-2); font: var(--ba-size-xl)/30px var(--font-headings); margin: 0 0 var(--space-6); }
.fd-note { color: var(--color-text-3); font-size: var(--text-sm); margin: var(--space-2) 0; }
.fd-sub { margin: var(--space-6) 0 var(--space-2); font: var(--weight-semibold) var(--text-sm)/1.3 var(--font-headings); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-2); }

/* ---- Buttons: Rebecca's primary (primary-strong at rest for AA, docs/44 §7a) and outline ---------------------- */
.fd-btn { display: inline-block; padding: 10px 20px; border-radius: var(--radius-sm); font: var(--weight-semibold) var(--text-sm)/1.25 var(--font-headings); text-decoration: none;
  cursor: pointer; white-space: nowrap; }
.fd-btn-primary, a.fd-btn-primary { background: var(--color-button); color: var(--color-on-accent); }
.fd-btn-primary:hover { background: var(--color-button-hover); color: var(--color-on-accent); }
.fd-btn-outline { background: transparent; color: var(--color-text); border: 1px solid var(--color-border-strong); }
.fd-btn-outline:hover { background: var(--color-surface); color: var(--color-text); }
.fd-btn-lg { padding: 14px 28px; font-size: var(--text-md); box-shadow: var(--shadow-glow); }

/* ---- Top bar (D3.1): sticky and frosted, her surface at 72% under a blur; transparent over the hero's top ------ */
.fd-bar { position: sticky; top: 0; z-index: 30; background: var(--fd-glass); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--fd-hair); transition: background-color .25s var(--fd-ease), border-color .25s var(--fd-ease); }
.fd-bar[data-top] { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.fd-bar-in { display: flex; align-items: center; gap: var(--space-4); height: var(--fd-bar-h); }
.fd-bar-cta { border-radius: var(--radius-full); padding: 7px 16px; }
.fd-brand { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text); text-decoration: none; font: var(--weight-bold) var(--ba-text-lg)/1 var(--font-headings); }
.fd-brand:hover { color: var(--color-text); }
.fd-brand-insider { font-weight: inherit; color: var(--color-wordmark); }
.fd-pill-tag b { font-weight: var(--weight-bold); color: var(--color-wordmark); }
.fd-footer-name { font-weight: var(--weight-semibold); color: var(--color-text); }
.fd-nav { display: flex; gap: var(--space-5); margin-left: auto; font-family: var(--font-headings); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.fd-nav a { color: var(--color-text-2); text-decoration: none; }
.fd-nav a:hover { color: var(--color-accent-strong); }
.fd-bar .theme-toggle { flex: none; }

/* ---- Hero ----------------------------------------------------------------------------------------------------- */
.fd-hero { padding: calc(var(--space-16) + var(--space-8)) 0 calc(var(--space-10) * 2); }
.fd-hero h1 { margin: 0 0 var(--space-5); }
.fd-hero-topic { padding: var(--space-16) 0 var(--space-10); }
.fd-scope { color: var(--color-text-3); font-size: var(--text-sm); margin: calc(-1 * var(--space-3)) 0 var(--space-5); }
.fd-ask { display: flex; gap: var(--space-2); max-width: var(--ba-container-3xl); padding: var(--space-2); margin: 0 0 var(--space-5); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.fd-ask input { flex: 1; min-width: 0; border: 0; font: var(--text-md)/1.4 var(--font-headings); padding: 10px 12px; background: transparent; }
.fd-ask input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; }

/* ---- Sections ------------------------------------------------------------------------------------------------ */
.fd-section { padding: calc(var(--space-10) * 2) 0; }
/* D3.1: no bands; one canvas, each section split from the last by a hairline. */
.fd-section-alt { background: none; }
body.front main > section + section { border-top: 1px solid var(--fd-hair); }
.fd-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.fd-topic { display: flex; flex-direction: column; gap: var(--space-2); height: 100%; padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-1); color: var(--color-text-2); text-decoration: none; }
.fd-topic b { font: var(--weight-semibold) var(--ba-text-lg)/1.3 var(--font-headings); color: var(--color-text); }
.fd-topic:hover { border-color: var(--color-accent); box-shadow: var(--shadow-glow); color: var(--color-text-2); }
.fd-topic-cta { margin-top: auto; font: var(--weight-semibold) var(--text-xs)/1 var(--font-mono); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-accent-strong); }

/* ---- Feature rows and the example chats ----------------------------------------------------------------------- */

.fd-chat { margin: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); overflow: hidden; }
.fd-chat-bar { display: flex; align-items: center; gap: 6px; padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-border); background: var(--color-surface-2); }
.fd-chat-bar span { width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--color-border-strong); }
.fd-chat-bar b { margin: 0 auto; font: var(--weight-medium) var(--text-xs)/1 var(--font-mono); color: var(--color-text-3); }
.fd-chat-working { margin: 0 var(--space-4); font: var(--text-xs)/1.4 var(--font-mono); color: var(--color-text-3); }
.fd-chat-answer { padding: var(--space-4); }
.fd-chat-date { padding: 0 var(--space-4) var(--space-4); font-size: var(--text-xs); color: var(--color-text-3); }
@media (prefers-reduced-motion: reduce) { .fd-chat [data-step] { opacity: 1 !important; transform: none !important; transition: none !important; } }
.fd-chat-empty { padding: var(--space-6); }

/* ---- A result card: subject, three stat boxes, the verdict ---------------------------------------------------- */
.fd-result-subject { margin: 0 0 var(--space-3); font: var(--weight-semibold) var(--ba-text-lg)/1.3 var(--font-headings); }
.fd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-2); }
.fd-stat { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius); }
.fd-stat-accent { border: 2px solid var(--color-accent); }
.fd-stat-label { font: var(--weight-semibold) var(--text-xs)/1.2 var(--font-headings); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-3); }
.fd-stat-value { font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: 1.2; color: var(--color-text); overflow-wrap: anywhere; }
.fd-stat-note { font-size: var(--text-xs); color: var(--color-text-3); }
.fd-result-verdict { margin: var(--space-3) 0 var(--space-1); font-size: var(--text-sm); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.fd-result-sentence, .fd-result-links { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-text-2); }
.fd-result-asof { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--color-text-3); }
.fd-result blockquote { font-size: var(--text-sm); }
.fd-result blockquote p { margin: 0 0 var(--space-1); }
.fd-result blockquote footer { font-style: normal; font-size: var(--text-xs); color: var(--color-text-3); }
.fd-chip { display: inline-block; padding: 1px 9px; font-family: var(--font-headings); line-height: 1.6; white-space: nowrap; }
.fd-chip-ok { background: var(--color-positive-subtle); color: var(--color-positive); }
.fd-chip-warn { background: var(--color-warning-subtle); color: var(--color-warning); }
.fd-chip-bad { background: var(--color-negative-subtle); color: var(--color-negative); }
.fd-chip-info { background: var(--color-info-subtle); color: var(--color-info); }
.fd-chip-quiet { background: var(--color-muted-subtle); color: var(--color-muted); }

/* ---- Lists of posts and rows --------------------------------------------------------------------------------- */
.fd-posts { margin: 0; padding: 0 0 0 var(--space-5); display: grid; gap: var(--space-3); }
.fd-post a { font-weight: var(--weight-medium); }
.fd-post-meta { display: block; font-size: var(--text-xs); color: var(--color-text-3); font-family: var(--font-headings); }
.fd-posts-sub { margin-top: var(--space-2); }
.fd-rows { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; background: var(--color-border); }
.fd-rows > li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-3); align-items: baseline; padding: var(--space-3) var(--space-4); background: var(--color-surface); }
.fd-rows .fd-posts-sub { grid-column: 1 / -1; }
.fd-row-fig { font-weight: var(--weight-semibold); }
.fd-row-meta { font-size: var(--text-xs); color: var(--color-text-3); white-space: nowrap; }
.fd-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5); }

/* ---- Connect ---------------------------------------------------------------------------------------------------- */
/* P1.2: a step's screenshot from the operator's recordings, small, under its words. */
.fd-step-shot { display: block; width: 100%; max-width: 420px; height: auto; margin: var(--space-2) 0 var(--space-1); border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--fd-hair); }
.fd-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin: 0 0 var(--space-8); padding: 0; list-style: none; }
.fd-steps li { display: flex; flex-direction: column; gap: var(--space-1); color: var(--color-text-2); font-size: var(--text-sm); }
.fd-steps b { font: var(--weight-semibold) var(--text-md)/1.3 var(--font-headings); color: var(--color-text); }
.fd-step-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-full); border: 2px solid var(--color-accent); font: var(--weight-bold) var(--text-sm)/1 var(--font-headings); color: var(--color-text); }
.fd-address { margin: 0 0 var(--space-5); }
.fd-address label { display: block; margin-bottom: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.fd-address-row { display: flex; gap: var(--space-2); }
.fd-address-row input { flex: 1; min-width: 0; font-size: var(--text-sm); }
.fd-tabs { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: var(--space-6); }
.fd-tablist { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0 0 var(--space-5); padding: 0 0 var(--space-3); border-bottom: 1px solid var(--color-border); }
.fd-tablist [role="tab"], .fd-filter, .fd-copy { background: transparent; color: var(--color-text-2); border: 1px solid transparent; border-radius: var(--radius-full); padding: 6px 14px;
  font: var(--weight-semibold) var(--text-sm)/1.2 var(--font-headings); }
.fd-tablist [role="tab"]:hover, .fd-filter:hover { background: var(--color-surface-2); color: var(--color-text); }
.fd-tablist [role="tab"][aria-selected="true"], .fd-filter[aria-pressed="true"] { background: var(--color-accent-subtle); color: var(--color-accent-strong); border-color: var(--color-accent-line); }
.fd-copy { border-color: var(--color-border-strong); color: var(--color-text); border-radius: var(--radius-sm); }
.fd-copy:hover { background: var(--color-surface-2); }
.fd-client-steps { margin: 0 0 var(--space-4); padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.fd-snippet { position: relative; }
.fd-snippet pre { margin: 0; padding-right: 88px; white-space: pre-wrap; overflow-wrap: anywhere; }
.fd-snippet .fd-copy { position: absolute; top: var(--space-2); right: var(--space-2); background: var(--ba-color-slate-800); color: var(--ba-color-slate-50); border-color: var(--ba-color-slate-600); }

/* ---- The catalog ----------------------------------------------------------------------------------------------- */
.fd-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-2); }
.fd-filter { border-color: var(--color-border-strong); background: var(--color-surface); }
.fd-filter .fig { margin-left: 4px; color: var(--color-text-3); }
.fd-catalog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; padding: 0; list-style: none; }
.fd-tool { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.fd-tool[hidden] { display: none; }
.fd-tool-head { display: flex; justify-content: space-between; gap: var(--space-2); align-items: center; }
.fd-tool-head code { background: none; padding: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.fd-tool p { margin: 0; font-size: var(--text-sm); color: var(--color-text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fd-tool-group { margin-top: auto; font-size: var(--text-xs); color: var(--color-text-3); font-family: var(--font-headings); }

/* ---- Recent posts, pills, FAQ, footer ------------------------------------------------------------------------ */
.fd-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.fd-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.fd-card a { font: var(--weight-semibold) var(--text-md)/1.35 var(--font-headings); color: var(--color-text); text-decoration: none; }
.fd-card a:hover { color: var(--color-accent-strong); text-decoration: underline; }
.fd-card-meta, .fd-card-blog { margin: 0; font-size: var(--text-xs); color: var(--color-text-3); font-family: var(--font-headings); }
.fd-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.fd-pill { display: inline-block; padding: 6px 14px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text);
  font: var(--weight-medium) var(--text-sm)/1.3 var(--font-headings); text-decoration: none; }
.fd-pill:hover { border-color: var(--color-accent); color: var(--color-accent-strong); }
body.front .fd-answer h2 { font-size: var(--text-xl); line-height: var(--ba-leading-5); }
.fd-verified { margin: 0 0 var(--space-4); padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.fd-engine-text { padding: var(--space-5) var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); margin: 0 0 var(--space-4); }
.skel-block { display: block; height: 160px; border-radius: var(--radius); background: var(--color-surface-2); }
.fd-more { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-family: var(--font-headings); }
.fd-faq { padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.fd-faq summary { cursor: pointer; font: var(--weight-semibold) var(--text-md)/1.4 var(--font-headings); }
.fd-faq p { margin: var(--space-3) 0 0; color: var(--color-text-2); }
.fd-footer { padding: var(--space-10) 0; border-top: 1px solid var(--color-border-strong); background: var(--color-surface); font-size: var(--text-sm); color: var(--color-text-3); }
.fd-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-family: var(--font-headings); }

/* ---- Phones and small laptops ------------------------------------------------------------------------------- */
@media (max-width: 1150px) {
  .fd-catalog, .fd-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .fd-wrap { padding: 0 var(--space-4); }
  .fd-nav { display: none; }
  .fd-bar-cta { margin-left: auto; padding: 8px 12px; font-size: var(--text-xs); }
  .fd-hero { padding: var(--space-12) 0 var(--space-16); }
  body.front h1 { font-size: 40px; line-height: 44px; }
  body.front h2 { font-size: var(--ba-size-3xl); line-height: var(--ba-leading-6); }
  body.front h3 { font-size: var(--ba-size-2xl); line-height: var(--ba-leading-4); }
  .fd-lede { font-size: var(--ba-size-lg); line-height: var(--ba-leading-4); }
  .fd-section { padding: var(--space-16) 0; }
  .fd-topics, .fd-catalog, .fd-cards, .fd-steps { grid-template-columns: minmax(0, 1fr); }
  .fd-tabs { padding: var(--space-4); }
  .fd-rows > li { grid-template-columns: minmax(0, 1fr) auto; }
  .fd-rows .fd-row-meta { grid-column: 1 / -1; white-space: normal; }
}
@media (max-width: 500px) {
  .fd-brand span { display: none; }
  .fd-ask button { padding: 10px 14px; }
}

/* ---- G2.2: the front door in Gondola's structure (docs/44 §7b), Rebecca's tokens ------------------------------ */
.fd-center { text-align: center; margin-left: auto; margin-right: auto; }
body.front h2.fd-center { max-width: var(--ba-container-3xl); margin-left: auto; margin-right: auto; }
.fd-hero { display: flex; align-items: center; position: relative; overflow: hidden; }
.fd-hero-in { text-align: center; position: relative; z-index: 1; }
.fd-hero .fd-lede { max-width: 62ch; }
.fd-hero h1 { margin: var(--space-5) auto; max-width: 18ch; }
.fd-hero .fd-lede { margin: 0 auto var(--space-8); }
.fd-pill-tag { display: inline-block; margin: 0; padding: 4px 14px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); background: var(--color-surface);
  font: var(--weight-semibold) var(--text-xs)/1.6 var(--font-headings); letter-spacing: var(--tracking-wide); color: var(--color-text-2); }
.fd-hero-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-5); margin: 0; }
.fd-quiet { font: var(--weight-semibold) var(--text-sm)/1 var(--font-headings); color: var(--color-text-2); text-decoration: none; }
.fd-quiet:hover { color: var(--color-accent-strong); text-decoration: underline; }
.fd-connect-w { max-width: 900px; }
#connect .fd-steps, #connect-again .fd-steps { text-align: center; }
#connect .fd-steps li, #connect-again .fd-steps li { align-items: center; }
/* Feature rows: the text top-aligned with its chat, the chat as tall as its answer, 80 px between rows. */

.fd-chat { min-height: 0; }
.fd-stat-accent { border: 2px solid var(--color-accent); }
/* Three big figures (Gondola's numbers): mono, her primary-strong on light and primary on dark (large text: 3:1). */

.fd-ask-center { margin: 0 auto var(--space-8); }
.fd-filter-groups { display: grid; gap: var(--space-3); justify-content: center; margin: 0 0 var(--space-2); }
.fd-filter-groups .fd-filters { justify-content: center; align-items: center; margin: 0; }
.fd-filter-groups .eyebrow { margin: 0 var(--space-2) 0 0; }
.fd-theme { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-full);
  background: var(--color-surface); color: var(--color-text-2); font: var(--weight-semibold) var(--text-xs)/1 var(--font-headings); }
.fd-theme:hover { background: var(--color-surface-2); color: var(--color-text); }
.fd-theme .i-moon { display: none; }
:root[data-theme="dark"] .fd-theme .i-sun { display: none; }
:root[data-theme="dark"] .fd-theme .i-moon { display: inline; }
@media (max-width: 768px) {
  .fd-theme-label { display: none; }
}
/* G2.3: a topic page's hero is the front door's pattern, not a full viewport; its verified block is result cards. */
.fd-hero.fd-hero-topic { display: block; min-height: 0; padding: calc(var(--fd-bar-h) + var(--space-16)) 0 var(--space-10); }
.fd-verified-grid { display: grid; gap: var(--space-4); }
.fd-verified-grid .fd-verified { margin: 0; }
@media (min-width: 1150px) { .fd-verified-grid:has(> :nth-child(2)) { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }
#example .fd-chat { max-width: 760px; }
.fd-hero-topic .fd-lede { margin: 0 0 var(--space-5); max-width: 62ch; }
.fd-hero.fd-hero-topic h1 { margin: var(--space-3) 0 var(--space-5); max-width: none; }

/* ---- D3.1: the glow. Two or three soft blobs of her primary green behind a chat or the numbers, blurred 64 px (her
   blur-3xl); 12% in dark, 6% in light. Decoration only: no pointer events, nothing a screen reader meets. ---------- */
.fd-stage { position: relative; isolation: isolate; }

/* ---- D3.2: the hero, a full viewport with depth ------------------------------------------------------------------
   It starts under the clear header. Behind it, our route map (src/front/hero.ts): a faint graticule, the arcs the
   network writes about in her greens, the airports; a vignette of the background keeps the h1 legible. With motion the
   arcs draw in one after another, the words rise in, and as the hero leaves the map drifts at 0.4× while the words
   shrink to 0.96 and fade (scroll-driven where the browser has it, front.js otherwise). */
.fd-hero { min-height: 100vh; min-height: 100svh; margin-top: calc(-1 * var(--fd-bar-h)); padding: calc(var(--fd-bar-h) + var(--space-12)) 0 var(--space-12); }
/* Light: the same map at low contrast. */

.js-motion .fd-hero-in > * { animation: fd-rise .7s var(--fd-ease) both; }
.js-motion .fd-hero-in > :nth-child(2) { animation-delay: 80ms; }
.js-motion .fd-hero-in > :nth-child(3) { animation-delay: 160ms; }
.js-motion .fd-hero-in > :nth-child(4) { animation-delay: 240ms; }
.js-motion .fd-hero-in > :nth-child(5) { animation-delay: 420ms; }
@keyframes fd-draw { to { stroke-dashoffset: 0; } }
@keyframes fd-fade { to { opacity: 1; } }
@keyframes fd-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: scroll()) {
  .js-motion .fd-hero-in { animation: fd-leave linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
}
@keyframes fd-parallax { to { transform: translateY(60vh); } }
@keyframes fd-leave { to { transform: scale(.96); opacity: 0; } }

/* The glass card under the button (Gondola's testimonial): four real answers, one at a time. Without script the first
   one shows and the controls don't; with script all four share one cell, so the card never changes height. */

@media (max-width: 768px) {
  /* Phones: the whole map as a band across the top of the hero, its strokes kept at their width, no labels. */
  
  .fd-hero { min-height: 100svh; padding: calc(var(--fd-bar-h) + var(--space-10)) 0 var(--space-10); }
}

/* ---- D3.3: the motion system (public/tools/front.js). Every hidden starting state is under .js-motion, which reduced
   motion, ?still=1 and no script never get. Only transform, opacity and filter move. ------------------------------ */
.js-motion [data-reveal], .js-motion [data-reveal-stagger] > * { opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--fd-ease), transform .5s var(--fd-ease), filter .5s var(--fd-ease); transition-delay: var(--d, 0ms); }
.js-motion h2[data-reveal], .js-motion h3[data-reveal] { filter: blur(6px); }
.js-motion [data-reveal].is-in, .js-motion [data-reveal-stagger].is-in > * { opacity: 1; transform: none; filter: none; }
/* Hovers ease out in 180 ms; cards lift 2 px and their border brightens. */
.fd-topic, .fd-tool, .fd-card, .fd-faq, .fd-verified, .fd-pill, .fd-btn, .fd-filter, .fd-tablist [role="tab"] {
  transition: transform .18s var(--fd-ease-out), border-color .18s var(--fd-ease-out), box-shadow .18s var(--fd-ease-out), background-color .18s var(--fd-ease-out), color .18s var(--fd-ease-out); }
@media (hover: hover) {
  .fd-topic:hover, .fd-tool:hover, .fd-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-border-strong)); }
  .fd-faq:hover { border-color: var(--color-border-strong); }
}
@media (prefers-reduced-motion: reduce) { .fd-topic:hover, .fd-tool:hover, .fd-card:hover { transform: none; } }
/* The FAQ: an accordion whose answer's height animates (grid rows 0fr to 1fr) and whose chevron turns. */
body.front .fd-faq { padding: 0; }
body.front .fd-faq-q { margin: 0; font: var(--weight-semibold) var(--ba-size-lg)/1.4 var(--font-headings); letter-spacing: normal; }
.fd-faq-q button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5);
  background: none; border: 0; color: var(--color-text); font: inherit; text-align: left; cursor: pointer; }
.fd-chev { flex: none; color: var(--color-text-3); transition: transform .3s var(--fd-ease); }
.fd-faq[data-open="true"] .fd-chev { transform: rotate(180deg); }
.fd-faq-a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s var(--fd-ease); }
.fd-faq-a > div { min-height: 0; overflow: hidden; }
.fd-faq-a p { margin: 0; padding: 0 var(--space-5) var(--space-4); color: var(--color-text-2); }
.fd-faq[data-open="false"] .fd-faq-a { grid-template-rows: 0fr; }
.fd-faq[data-open="false"] .fd-faq-a > div { visibility: hidden; transition: visibility 0s .3s; }
.fd-faqs { display: grid; gap: var(--space-2); }
.fd-faqs .fd-faq { margin: 0; }
/* The catalog collapsed: its last row fades under a mask, "Show all" below. */
.fd-catalog.is-collapsed { -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 150px), transparent); mask-image: linear-gradient(to bottom, black calc(100% - 150px), transparent); }

/* ---- D3.4: the chats, played like Gondola's. All text Source Sans; the window bar and the working line mono. ------ */
.fd-chat { max-width: 640px; margin: 0 auto; border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--fd-hair);
  box-shadow: 0 24px 48px -24px color-mix(in srgb, var(--ba-color-slate-950) 45%, transparent); }
.fd-chat-bar { border-bottom-color: var(--fd-hair); }
.fd-chat-input { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  background: var(--color-surface-2); border: 1px solid var(--fd-hair); border-radius: var(--radius); }
.fd-chat-field { flex: 1; min-width: 0; min-height: 1.5em; font-size: var(--text-md); line-height: 1.5; color: var(--color-text); }
.fd-chat-ph { color: var(--color-text-3); }
.fd-chat.is-typing .fd-chat-ph { display: none; }
.fd-chat.is-typing .fd-chat-typed::after { content: ''; display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -0.15em; background: var(--ba-color-primary);
  animation: fd-caret 1s steps(1) infinite; }
@keyframes fd-caret { 50% { opacity: 0; } }
.fd-chat-send { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--color-button); color: var(--color-on-accent); }
.fd-chat-send.is-sent { animation: fd-pulse .45s var(--fd-ease-out); }
@keyframes fd-pulse { 40% { transform: scale(.86); box-shadow: var(--ba-box-shadow-glow); } 100% { transform: none; box-shadow: 0 0 0 10px transparent; } }
.fd-chat-thread { display: grid; gap: var(--space-3); padding: 0 var(--space-4) var(--space-4); }
.fd-chat-bubble { justify-self: end; max-width: 85%; margin: 0; padding: var(--space-2) var(--space-4); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg);
  background: var(--color-accent-subtle); border: 1px solid var(--color-accent-line); color: var(--color-text); font-size: var(--text-md); }
body.front .fd-chat-working { margin: 0; font: var(--text-xs)/1.5 var(--font-mono); color: var(--color-text-3); }
.fd-chat-answer { padding: 0; }
/* The working line's shimmer: a band of light moving across the text while the tool is "working". */
.fd-chat-working.is-working .fd-shimmer { background: linear-gradient(90deg, var(--color-text-3) 0%, var(--color-text-3) 40%, var(--color-text) 50%, var(--color-text-3) 60%, var(--color-text-3) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: fd-shimmer 1.2s linear infinite; }
@keyframes fd-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.fd-chat.is-playing [data-bubble]:not(.is-shown), .fd-chat.is-playing [data-step]:not(.is-shown) { opacity: 0; }
.fd-chat.is-playing [data-step] { transition: opacity .45s var(--fd-ease), transform .45s var(--fd-ease); }
.fd-chat.is-playing .fd-chat-answer:not(.is-shown) { transform: translateY(12px); }
/* The result card (the chats and the topic pages): the decisive stat outlined in her success colour with its figure in
   primary, the verdict in primary, the one sentence behind a 2 px rule. */
.fd-stat { border-color: var(--fd-hair); background: var(--color-surface); }
.fd-stat-accent { border: 1.5px solid var(--ba-color-success); }
.fd-stat-value { font-family: var(--font-mono); }
.fd-stat-accent .fd-stat-value { color: var(--ba-color-primary); }
.fd-result-verdict { font-weight: var(--weight-semibold); color: var(--color-accent-strong); }
.fd-result-sentence { padding-left: var(--space-3); border-left: 2px solid var(--ba-color-primary); }
/* Feature rows: text 5/12 and chat 7/12, centred against each other, 128 px apart (96 on phones, text first). */

@media (max-width: 768px) { .fd-chat-input { margin: var(--space-3); } .fd-chat-thread { padding: 0 var(--space-3) var(--space-3); } }

/* ---- D3.5: "How an answer is checked" ------------------------------------------------------------------------------
   Stacked (phones, reduced motion, no script): four steps, each its words beside its picture. Pinned (from 900 px, with
   motion): the section is 300vh, its panel sticks under the header, the words form a list on a rail at the left and the
   pictures share one cell at the right; data-step (front.js) says which is lit. */
.fd-how h2 { margin-bottom: var(--space-12); }
.fd-how-steps { position: relative; display: grid; gap: var(--space-16); }
.fd-how-step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12); align-items: center; }
.fd-how-copy { position: relative; padding-left: var(--space-12); }
.fd-how-num { position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-full);
  border: 1.5px solid var(--ba-color-primary); font: var(--weight-semibold) var(--text-sm)/1 var(--font-mono); color: var(--color-text); background: var(--color-bg); }
body.front .fd-how-copy h3 { font-size: var(--ba-size-2xl); line-height: var(--ba-leading-4); margin: 0 0 var(--space-2); }
.fd-how-copy p { margin: 0; color: var(--color-text-2); }
.fd-how-vis { position: relative; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--fd-hair); min-height: 220px;
  display: flex; flex-direction: column; justify-content: center; }
.fd-how-q { align-self: flex-end; max-width: 85%; margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-4); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg);
  background: var(--color-accent-subtle); border: 1px solid var(--color-accent-line); font-size: var(--ba-size-lg); }
.fd-how-call { margin: 0; font: var(--text-xs)/1.5 var(--font-mono); color: var(--color-text-3); }
.fd-how-join { position: relative; display: grid; place-items: center; }
.fd-how-badge { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--space-3); margin: 0; padding: var(--space-3) var(--space-5); border-radius: var(--radius-full);
  background: var(--color-surface); border: 1.5px solid var(--ba-color-success); box-shadow: var(--ba-box-shadow-glow); }
.fd-how-badge { flex-wrap: wrap; justify-content: center; }
.fd-how-badge b { font-size: var(--ba-size-xl); color: var(--ba-color-primary); white-space: nowrap; }
.fd-how-badge span:last-child { font-size: var(--text-sm); color: var(--color-text-2); }
.fd-how-rail, .fd-how-marks { display: none; }
@media (max-width: 899px) { .fd-how-step { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } .fd-how-steps { gap: var(--space-12); } }

@media (min-width: 900px) {
  .js-motion .fd-how { padding: 0; }
  .js-motion .fd-how-track { position: relative; height: 300vh; view-timeline: --fd-how block; }
  .js-motion .fd-how-pin { position: sticky; top: var(--fd-bar-h); min-height: calc(100vh - var(--fd-bar-h)); display: flex; align-items: center; padding: var(--space-10) 0; }
  .js-motion .fd-how-pin > .fd-wrap { width: 100%; }
  .js-motion .fd-how-marks { display: block; position: absolute; inset: 0; pointer-events: none; }
  .js-motion .fd-how-marks i { position: absolute; left: 0; right: 0; height: 25%; }
  .js-motion .fd-how-marks i:nth-child(2) { top: 25%; } .js-motion .fd-how-marks i:nth-child(3) { top: 50%; } .js-motion .fd-how-marks i:nth-child(4) { top: 75%; }
  .js-motion .fd-how-join { min-height: 150px; }
  .js-motion .fd-how-steps { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: repeat(4, auto) 1fr; column-gap: var(--space-12); row-gap: var(--space-6); }
  .js-motion .fd-how-step { display: contents; }
  .js-motion .fd-how-copy { grid-column: 1; grid-row: var(--n); }
  .js-motion .fd-how-copy :is(h3, p) { opacity: .38; transition: opacity .4s var(--fd-ease); }
  .js-motion .fd-how-copy .fd-how-num { border-color: var(--color-border-strong); color: var(--color-text-3); }
  .js-motion .fd-how-vis { grid-column: 2; grid-row: 1 / 6; align-self: center; min-height: 380px; opacity: 0; transform: translateY(16px) scale(.98);
    transition: opacity .5s var(--fd-ease), transform .5s var(--fd-ease); pointer-events: none; }
  .js-motion .fd-how-rail { display: block; grid-column: 1; grid-row: 1 / 5; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 2px; background: var(--fd-hair); }
  .js-motion .fd-how-rail i { position: absolute; inset: 0; background: var(--ba-color-primary); transform-origin: top; transform: scaleY(var(--how-p, .25)); transition: transform .5s var(--fd-ease); }
  .js-motion .fd-how[data-step="1"] [data-n="1"] :is(.fd-how-vis, .fd-how-copy :is(h3, p)), .js-motion .fd-how[data-step="2"] [data-n="2"] :is(.fd-how-vis, .fd-how-copy :is(h3, p)),
  .js-motion .fd-how[data-step="3"] [data-n="3"] :is(.fd-how-vis, .fd-how-copy :is(h3, p)), .js-motion .fd-how[data-step="4"] [data-n="4"] :is(.fd-how-vis, .fd-how-copy :is(h3, p)) { opacity: 1; transform: none; pointer-events: auto; }
  .js-motion .fd-how[data-step="1"] [data-n="1"] .fd-how-num, .js-motion .fd-how[data-step="2"] :is([data-n="1"], [data-n="2"]) .fd-how-num,
  .js-motion .fd-how[data-step="3"] :is([data-n="1"], [data-n="2"], [data-n="3"]) .fd-how-num, .js-motion .fd-how[data-step="4"] .fd-how-num { border-color: var(--ba-color-primary); color: var(--color-text); }
  /* Step 2: the sources light up one by one. Step 3: they close in on one verified badge. Step 4: the blogger's links glow. */
  .js-motion .fd-how[data-step="3"] [data-n="3"] .fd-how-badge { animation: fd-pop .5s var(--fd-ease-out) both; animation-delay: 650ms; }
  .js-motion .fd-how [data-n="4"] .fd-result-links a::after { transform: scaleX(0); }
  .js-motion .fd-how[data-step="4"] [data-n="4"] .fd-result-links a::after { animation: fd-underline .7s var(--fd-ease) both; animation-delay: 350ms; }
}
@supports (animation-timeline: view()) {
  @media (min-width: 900px) { .js-motion .fd-how-rail i { transition: none; animation: fd-fill linear both; animation-timeline: --fd-how; animation-range: contain 0% contain 100%; } }
}
@keyframes fd-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes fd-underline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Step 4's blogger links, marked: a tint and a 2 px underline in primary (which draws in with motion). */
.fd-how [data-n="4"] .fd-result-links a { position: relative; padding: 0 2px; border-radius: var(--radius-sm); background: var(--color-accent-subtle); text-decoration: none; }
.fd-how [data-n="4"] .fd-result-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--ba-color-primary); transform-origin: left; }
@keyframes fd-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---- D3.6: the daily briefing (front door and /briefing) and /publishers ------------------------------------------- */
.fd-brief { display: grid; gap: 0; margin: 0 0 var(--space-6); padding: 0; list-style: none; }
.fd-brief-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5) 0; border-top: 1px solid var(--fd-hair); }
.fd-brief-item:last-child { border-bottom: 1px solid var(--fd-hair); }
.fd-brief-rank { font-size: var(--ba-size-4xl); line-height: 1; font-weight: var(--weight-semibold); color: var(--ba-color-primary); }
.fd-brief-meta { margin: 0 0 var(--space-1); font-size: var(--text-xs); color: var(--color-text-3); }
.fd-brief-title { font: var(--weight-semibold) var(--ba-size-xl)/1.3 var(--font-headings); color: var(--color-text); text-decoration: none; }
.fd-brief-title:hover { color: var(--color-accent-strong); text-decoration: underline; }
.fd-brief-why { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-2); }
.fd-pubs { display: grid; gap: var(--space-10); }
body.front .fd-pub h3 { font-size: var(--ba-size-3xl); line-height: var(--ba-leading-5); margin: 0 0 var(--space-3); }
.fd-pub p { margin: 0 0 var(--space-2); }
.fd-pub-so { color: var(--color-text-2); padding-left: var(--space-3); border-left: 2px solid var(--ba-color-primary); }
body.front .fd-section h2:not(.fd-center) { font-size: var(--ba-size-4xl); line-height: var(--ba-leading-7); margin-top: var(--space-6); }
@media (max-width: 768px) { .fd-brief-item { grid-template-columns: 40px minmax(0, 1fr); } .fd-brief-rank { font-size: var(--ba-size-3xl); } }

/* ---- D4.1: light first, a calm canvas (docs/48) ------------------------------------------------------------------
   Apple's product pages are white with a pale grey for alternate sections and tiles; here that is Rebecca's surface
   (white) as the canvas and her surface-muted (slate-50) for tiles, in the light theme. Dark, which every page opens in
   (E1.0, src/front/layout.ts): her slate-950 canvas and slate-900 tiles. Two sections are dark "cinematic" bands in
   either theme (.fd-dark: the sentence and "How an answer is checked"). One accent, her greens. No glow but the hero's;
   no mono chips; caps eyebrows on two sections only (.eyebrow-caps), the rest sentence case, as Apple's are. */
:root[data-theme="light"] body.front { --color-bg: var(--ba-color-primary-white); --fd-tile: var(--ba-color-slate-50);
  --fd-hair: color-mix(in srgb, var(--ba-color-slate-300) 45%, transparent); }
:root[data-theme="dark"] body.front { --fd-tile: var(--ba-color-slate-900); }
body.front { --fd-tile: var(--ba-color-slate-50); }
/* The cinematic band: her dark values, set on the section, in either theme (on the dark theme it goes to black). */
.fd-dark { --color-bg: var(--ba-color-slate-950); --color-surface: var(--ba-color-slate-900); --color-surface-2: var(--ba-color-slate-800);
  --color-border: var(--ba-color-slate-900); --color-border-strong: var(--ba-color-slate-800); --fd-tile: var(--ba-color-slate-900);
  --color-text: var(--ba-color-primary-white); --color-text-2: var(--ba-color-slate-100); --color-text-3: var(--ba-color-slate-200);
  --color-accent-strong: var(--ba-color-green-500); --color-accent-subtle: var(--ba-color-green-950); --color-accent-line: var(--ba-color-green-900);
  --color-positive: var(--ba-color-green-500); --color-positive-subtle: var(--ba-color-green-950); --color-focus: var(--ba-color-green-500);
  --fd-hair: color-mix(in srgb, var(--ba-color-slate-50) 10%, transparent);
  color-scheme: dark; background: var(--color-bg); color: var(--color-text); }
:root[data-theme="dark"] .fd-dark { --color-bg: var(--ba-color-primary-black); }
body.front main > section.fd-dark, body.front main > section.fd-dark + section { border-top: 0; }

/* Type (Apple's scale in her faces and sizes): the hero 96/96 from 1350, 80/80 from 769, 48/50 on phones, 600, −0.03em,
   filled with a gradient across her greens; section headlines 56/60; gallery captions 28/32; body 19/28 Source Sans,
   short paragraphs that open on a bold phrase. */
body.front h1, body.front h2 { letter-spacing: -0.03em; }
body.front h2 { font-size: 56px; line-height: 60px; margin: 0 0 var(--space-6); }
body.front .fd-display { font-size: 80px; line-height: 80px; font-weight: var(--weight-semibold); letter-spacing: -0.03em; }
@media (min-width: 1350px) { body.front .fd-display { font-size: var(--ba-size-8xl); line-height: var(--ba-leading-12); } }
.fd-grad { background: linear-gradient(100deg, var(--ba-color-green-900) 0%, var(--ba-color-primary-strong) 38%, var(--ba-color-primary) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:root[data-theme="dark"] .fd-grad, .fd-dark .fd-grad { background-image: linear-gradient(100deg, var(--ba-color-green-200) 0%, var(--ba-color-green-500) 50%, var(--ba-color-primary) 100%); }
.fd-caption { font: var(--weight-semibold) 28px/32px var(--font-headings); letter-spacing: -0.01em; }
.fd-body, .fd-lede { font: var(--weight-normal, 400) 19px/28px var(--font-headings); color: var(--color-text-2); }
.fd-body b, .fd-lede b { font-weight: var(--weight-semibold); color: var(--color-text); }
body.front .eyebrow { font: var(--weight-semibold) 21px/21px var(--font-headings); letter-spacing: normal; text-transform: none; color: var(--color-text-2); }
body.front .eyebrow-caps { font-size: var(--text-xs); line-height: 1.4; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent-strong); }
.fd-btn-lg { box-shadow: none; border-radius: var(--radius-full); padding: 14px 30px; font-size: 17px; }
.fd-btn-primary { border-radius: var(--radius-full); }
/* Tiles on the white canvas: the pale grey, no border, no shadow (Apple's tiles). */
:root[data-theme="light"] body.front :is(.fd-faq, .fd-tabs, .fd-topic, .fd-tool, .fd-card, .fd-verified, .fd-how-vis, .fd-engine-text) {
  background: var(--fd-tile); border-color: transparent; box-shadow: none; }
@media (max-width: 768px) {
  body.front .fd-display { font-size: var(--ba-size-5xl); line-height: 50px; }
  body.front h2 { font-size: 36px; line-height: 40px; }
  .fd-caption { font-size: 24px; line-height: 28px; }
  .fd-body, .fd-lede { font-size: 17px; line-height: 26px; }
}

/* ---- D4.2: the hero, the network as a living globe (src/front/globe.ts, public/tools/front/globe.js) ---------------
   Stacked (phones, reduced motion, no script): the words, then the globe as a still picture, then its caption. Pinned
   (from 769 px, with motion): the hero is 250vh and its panel sticks for 150vh of scroll; the globe grows and rises
   while globe.js tilts it, and the words lift away. CSS scroll timelines where the browser has them, front.js else.
   The hero's glow is the only one on the page: her primary, soft, behind the globe. */
.fd-hero { display: block; min-height: 0; overflow: clip; padding: calc(var(--fd-bar-h) + var(--space-16)) 0 var(--space-10); text-align: center; }
.fd-hero-pin { position: relative; }
.fd-hero .fd-hero-in { position: relative; z-index: 2; }
.fd-hero h1 { max-width: 1100px; margin: var(--space-6) auto var(--space-6); text-wrap: balance; }
.fd-hero .fd-lede { max-width: 36em; margin: 0 auto var(--space-8); }
.fd-hero-globe { position: relative; z-index: 1; width: min(640px, 100%); margin: var(--space-12) auto 0; }
.fd-globe { position: relative; margin: 0; }
.fd-globe svg { display: block; width: 100%; height: auto; aspect-ratio: 1; overflow: visible; }
/* G3.1: the still (src/front/globe-still.ts) is the canvas's first frame, in the same --globe-* colours; its opacities
   and widths are on its elements. The atmosphere is part of it, so there is no CSS glow. On phones and without motion it
   is the globe, and its arcs are drawn brighter, as the old still frame had them (globe-frame.js STILL_ARC). */
.fd-globe-still :is(path, circle) { stroke-linecap: round; stroke-linejoin: round; }
.fd-globe-still path, .fd-gs-ring, .fd-gs-pulse { fill: none; }
.fd-gs-sphere { stroke: var(--globe-rim); }
.fd-gs-grid { stroke: var(--globe-grid); }
.fd-gs-dots { opacity: var(--globe-land-a); } /* no dot overlaps another, so the group's opacity is each dot's */
.fd-gs-dots path { stroke: var(--globe-land); }
.fd-gs-net, .fd-gs-arcs path { stroke: var(--globe-arc); }
.fd-gs-ring { stroke: var(--globe-city); }
.fd-gs-city { fill: var(--globe-city); }
.fd-gs-pulse { stroke: var(--globe-core); }
.fd-gs-node { fill: var(--globe-core); }
.fd-gs-heart { fill: var(--globe-head); }
:root:not(.js-motion) .fd-gs-arcs { stroke-opacity: .55; stroke-width: 1.2; }
@media (max-width: 768px) { .fd-gs-arcs { stroke-opacity: .55; stroke-width: 1.2; } }
/* The caption shows once: under the still globe, or (pinned, from 769 px with motion) at the foot of the hero. */
.fd-hero-note { display: none; }
.fd-globe-cap { max-width: 44em; margin: var(--space-4) auto 0; font: var(--text-sm)/1.5 var(--font-headings); color: var(--color-text-3); }
/* The canvas's colours, her greens and slates only, read by globe.js from the run (it redraws when the theme changes):
   the land, the network's countries and the one shown, the arcs and their lights, the cities, the core, the atmosphere's
   rim, the sphere lit from the upper left, and the graticule. */
.fd-run, .fd-globe { --globe-land: var(--ba-color-green-800); --globe-land-a: .6; --globe-country: var(--ba-color-green-600); --globe-active: var(--ba-color-primary-strong);
  --globe-arc: var(--ba-color-primary); --globe-head: var(--ba-color-green-900); --globe-city: var(--ba-color-primary); --globe-core: var(--ba-color-green-700);
  --globe-rim: var(--ba-color-green-400); --globe-ocean-hi: var(--ba-color-primary-white); --globe-ocean-lo: var(--ba-color-slate-50); --globe-grid: var(--ba-color-slate-400); }
:root[data-theme="dark"] :is(.fd-run, .fd-globe) { --globe-land: var(--ba-color-green-500); --globe-land-a: .5; --globe-country: var(--ba-color-green-300); --globe-active: var(--ba-color-green-50);
  --globe-arc: var(--ba-color-green-300); --globe-head: var(--ba-color-green-50); --globe-city: var(--ba-color-green-400); --globe-core: var(--ba-color-green-200);
  --globe-rim: var(--ba-color-green-600); --globe-ocean-hi: var(--ba-color-slate-900); --globe-ocean-lo: var(--ba-color-slate-950); --globe-grid: var(--ba-color-slate-500); }
/* E1.2: the network's core (BoardingArea, Colorado Springs), its calm layer of arcs to the home countries, and the
   caption's (i). */
.fd-globe-corename { white-space: nowrap; color: var(--color-text-2); }
.fd-globe-corename i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: 1px;
  background: var(--ba-color-green-600); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ba-color-primary) 30%, transparent); }
:root[data-theme="dark"] .fd-globe-corename i { background: var(--ba-color-green-200); }
.fd-info { display: inline; position: relative; }
.fd-info summary { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid currentColor; border-radius: 50%;
  font: italic 600 11px/1 var(--font-headings); cursor: pointer; list-style: none; vertical-align: 1px; }
.fd-info summary::-webkit-details-marker { display: none; }
.fd-info summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.fd-info > span { position: absolute; bottom: calc(100% + 8px); right: -8px; z-index: 5; width: max-content; max-width: min(22em, 80vw); padding: 10px 14px;
  border-radius: var(--ba-border-radius-md); background: var(--color-surface); box-shadow: var(--ba-box-shadow-default); color: var(--color-text); text-align: left; }
@media (min-width: 769px) {
  .js-motion .fd-hero { height: 250vh; padding: 0; }
  .js-motion .fd-hero-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }
  .js-motion .fd-hero .fd-hero-in { padding-top: calc(var(--fd-bar-h) + 7vh); }
  /* G3.1: the globe sits in the flow under the words, its sphere 24 px below the button row (the still's sphere starts
     4% of its box down), so no dot is ever behind a word; globe.js grows it only once the words have lifted away. */
  .js-motion .fd-hero-globe { width: min(900px, 74vw); margin: calc(var(--space-6) - 0.04 * min(900px, 74vw)) auto 0; }
  .js-motion .fd-globe-cap { position: absolute; left: 0; right: 0; top: calc(100% + var(--space-2)); }
  .js-motion .fd-hero-globe .fd-globe-cap { display: none; }
  .js-motion .fd-hero-note { display: block; position: absolute; left: 0; right: 0; bottom: var(--space-6); z-index: 3; margin: 0; font: var(--text-sm)/1.5 var(--font-headings); color: var(--color-text-3); }
}
@supports (animation-timeline: scroll()) {
  @media (min-width: 769px) {
    .js-motion .fd-hero .fd-hero-in { animation: fd-hero-lift linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
    .js-motion .fd-hero-note { animation: fd-fade-out linear both; animation-timeline: scroll(root); animation-range: 0 30vh; }
  }
}
@keyframes fd-hero-lift { to { transform: translateY(-18vh); opacity: 0; } }
/* ---- E1.3: the stage. With motion from 769 px the globe is drawn on a sticky, full-screen canvas behind the hero and
   "Who the experts are" (the run), at its size on screen × devicePixelRatio: it grows through the hero and glides to the
   left half as the experts arrive, with no bitmap ever scaled by CSS. The hero's still picture holds its place until
   the stage has drawn. The sections above it let the pointer through except where there is something to use. */
.fd-stage { display: none; }
.fd-core-hot { position: absolute; left: 0; top: 0; z-index: 3; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; pointer-events: auto; }
.fd-core-hot:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.fd-core-tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 6px 10px; border-radius: var(--ba-border-radius-md);
  background: var(--color-surface); box-shadow: var(--ba-box-shadow-default); font: var(--weight-semibold) 13px/1.2 var(--font-headings); color: var(--color-text);
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s var(--fd-ease-out); }
.fd-core-hot:is(:hover, :focus-visible) .fd-core-tip { opacity: 1; }
@media (min-width: 769px) {
  /* The track covers the run and holds the stage, so the stage sticks for exactly the run and leaves with it. */
  .js-motion .fd-run { position: relative; }
  .js-motion .fd-stage-track { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .js-motion .fd-stage { display: block; position: sticky; top: 0; height: 100vh; }
  .js-motion .fd-stage canvas { display: block; width: 100%; height: 100%; }
  .js-motion .fd-run > section { position: relative; z-index: 1; pointer-events: none; }
  .js-motion .fd-run :is(.fd-hero-in > *, .fd-hero-note, .fd-ex-side) { pointer-events: auto; }
  /* The hand-off (G3.1): the canvas fades in over the still once its first frame is drawn; then the still is hidden. */
  .js-motion .fd-stage canvas { opacity: 0; transition: opacity .2s linear; }
  .js-motion .fd-run[data-drawn] .fd-stage canvas { opacity: 1; }
  .js-motion .fd-run[data-live] .fd-hero-globe { visibility: hidden; }
}
.fd-stage-label { position: absolute; left: 0; top: 0; margin: 0; padding: 6px 14px; border-radius: var(--radius-full); opacity: 0; white-space: nowrap;
  background: color-mix(in srgb, var(--color-surface) 78%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: var(--ba-box-shadow-default); font: var(--weight-semibold) 15px/1.2 var(--font-headings); color: var(--color-text); will-change: transform, opacity; }
@keyframes fd-fade-out { to { opacity: 0; } }

/* ---- D4.3: one sentence, revealed (the first dark band, src/front/sentence.ts) -----------------------------------
   The track is 220vh with motion; its panel sticks for the length of it and the words light in turn: word i goes from
   0.15 to 1 over its own slice of the track's scroll (a view timeline; front.js sets each word's opacity where there
   isn't one). Only opacity moves. */
.fd-sentence { padding: calc(var(--space-16) * 2) 0; }
.fd-statement { max-width: 22ch; margin: 0 auto; text-align: left; font: var(--weight-semibold) 64px/72px var(--font-headings); letter-spacing: -0.025em; color: var(--color-text); text-wrap: pretty; }
.fd-word-accent { color: var(--ba-color-green-500); }
@media (min-width: 1350px) { .fd-statement { font-size: 72px; line-height: 80px; } }
@media (max-width: 768px) { .fd-statement { font-size: 36px; line-height: 42px; } .fd-sentence { padding: var(--space-16) 0; } }
.js-motion .fd-sentence { padding: 0; }
.js-motion .fd-sentence-track { height: 220vh; view-timeline: --fd-sentence block; }
.js-motion .fd-sentence-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; }
.js-motion .fd-sentence-pin > .fd-wrap { width: 100%; }
.js-motion .fd-word { opacity: .15; }
@supports (animation-timeline: view()) {
  /* Word i lights over its slice of the track's middle 60% (from 10% to 70% of its scroll): opacity only. */
  .js-motion .fd-word { animation: fd-word-in linear both; animation-timeline: --fd-sentence;
    animation-range: contain calc(10% + 60% * var(--i) / var(--n)) contain calc(10% + 60% * (var(--i) + 1) / var(--n)); }
}
@keyframes fd-word-in { from { opacity: .15; } to { opacity: 1; } }
/* L1.1, made quieter in L2.2: the day's titles are texture behind the sentence, not text beside it. Four rows at about
   45% of the sentence's size (30 px, 32 from 1350, 16 on phones), 4.5% of the band's text colour (5% on phones), a 1 px
   blur, faded out towards every edge. The sentence's own block is kept clear by a soft patch of the band's background
   behind it (.fd-statement::before). Each row holds its titles twice and moves half its width, alternate rows the other
   way, 270 to 390 s a loop: only transform moves. They move only with motion and only while the band is on screen
   (front.js adds .is-live); served still. scripts/sentence_contrast.ts checks the words against it at five points. */
.fd-sentence-pin { position: relative; }
.fd-drift { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; justify-content: space-evenly; overflow: hidden; pointer-events: none;
  opacity: .045; filter: blur(1px); --fd-drift-mask: radial-gradient(ellipse 70% 65% at 50% 50%, black 45%, transparent 100%);
  -webkit-mask-image: var(--fd-drift-mask); mask-image: var(--fd-drift-mask); }
.fd-drift-row { display: flex; width: max-content; margin: 0; white-space: nowrap; font: var(--weight-semibold) 30px/1.1 var(--font-headings); letter-spacing: -0.01em; color: var(--color-text); }
@media (min-width: 1350px) { .fd-drift-row { font-size: 32px; } }
.fd-statement { position: relative; }
.fd-sentence-pin .fd-drift ~ .fd-wrap .fd-statement::before { content: ''; position: absolute; inset: -.3em -.5em; z-index: -1; border-radius: 48px; background: var(--color-bg);
  box-shadow: 0 0 56px 40px var(--color-bg); }
.fd-drift-set { display: flex; flex: none; }
.fd-drift-set > span { padding-right: 1.4em; }
.fd-sentence-pin > .fd-wrap { position: relative; z-index: 1; }
@media (max-width: 768px) { .fd-drift-row { font-size: 16px; } .fd-drift { opacity: .05; } }
.js-motion .fd-drift-row { animation: fd-titles var(--dur, 180s) linear infinite; animation-play-state: paused; }
.js-motion .fd-drift-row:nth-child(even) { animation-direction: reverse; }
.js-motion .fd-sentence.is-live .fd-drift-row { animation-play-state: running; }
@keyframes fd-titles { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- L1.2: the product in a device (src/front/device.ts) ---------------------------------------------------------
   Our own drawings, true to a phone's and a laptop's proportions: a metal band and a black bezel, rounded screens, a
   camera pill, side buttons, a reflection across the glass and a soft shadow on the page; no maker's logo. The metal
   and glass are her slates in either theme, as real devices are; only the screens follow the theme (--fd-screen-bg: her
   slate-900 dark, white light, the same as the stills' background, src/front/assistants.ts). From 1100 px: a pinned
   progress rail, the four steps in a left column, and the laptop (ChatGPT) with the phone (Claude) in front of it pinned
   on the right. Below 1100 px the stage is display: contents, so the two devices stack between the steps. */
.fd-device-sec h2 { margin-bottom: var(--space-4); }
.fd-dv { --fd-screen-bg: var(--ba-color-slate-900); --fd-screen-tile: var(--ba-color-slate-800);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); margin-top: var(--space-12); }
:root[data-theme="light"] .fd-dv { --fd-screen-bg: var(--ba-color-primary-white); --fd-screen-tile: var(--ba-color-slate-100); }
/* One image per theme: only the reader's is shown (and so fetched: a lazy image that isn't displayed isn't loaded). */
.fd-dv .fd-th-light, :root[data-theme="light"] .fd-dv .fd-th-dark, .fd-dv [hidden] { display: none; }
:root[data-theme="light"] .fd-dv .fd-th-light { display: block; }
.fd-story { order: 1; max-width: 34em; }
.fd-story[data-story="3"], .fd-story[data-story="4"] { order: 4; }
.fd-story-n { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-bottom: var(--space-3); border-radius: 50%;
  border: 1px solid var(--color-border-strong); font: var(--weight-semibold) 13px/1 var(--font-headings); color: var(--color-text-2); }
body.front .fd-story h3 { font-size: 32px; line-height: 36px; letter-spacing: -0.02em; margin: 0 0 var(--space-3); }
.fd-story .fd-body { margin: 0; }
.fd-dv-stage { display: contents; }
.fd-phone { order: 2; justify-self: center; }
.fd-try { order: 3; }
.fd-laptop { order: 5; justify-self: center; width: min(640px, 100%); }
.fd-dv-rail { display: none; }
.fd-dv-cap { margin-top: var(--space-4); text-align: center; font: 13px/1.4 var(--font-headings); color: var(--color-text-3); }
.fd-dv-cap b { color: var(--color-text); font-weight: var(--weight-semibold); }

/* The phone: 9 : 19.5; a 1.3% metal band, a 3% black bezel, the screen's corners 13% of its width. */
.fd-phone { --pw: min(300px, 78vw); position: relative; width: var(--pw); margin: 0; transform-style: preserve-3d; }
.fd-phone-body { position: relative; aspect-ratio: 9 / 19.5; padding: calc(var(--pw) * .013); border-radius: calc(var(--pw) * .165);
  background: linear-gradient(135deg, var(--ba-color-slate-300), var(--ba-color-slate-600) 18%, var(--ba-color-slate-400) 42%, var(--ba-color-slate-700) 70%, var(--ba-color-slate-400));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ba-color-primary-white) 35%, transparent), 0 60px 90px -45px color-mix(in srgb, var(--ba-color-primary-black) 70%, transparent),
    0 24px 40px -22px color-mix(in srgb, var(--ba-color-primary-black) 55%, transparent); }
/* Side buttons: the action button and two volume keys on the left (one shape and its shadows), the side key on the right. */
.fd-phone-body::before, .fd-phone-body::after { content: ''; position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--ba-color-slate-700), var(--ba-color-slate-400)); }
.fd-phone-body::before { left: -3px; top: 17%; height: 5%; box-shadow: 0 calc(var(--pw) * .14) 0 0 var(--ba-color-slate-500), 0 calc(var(--pw) * .27) 0 0 var(--ba-color-slate-500); }
.fd-phone-body::after { right: -3px; top: 26%; height: 12%; background: linear-gradient(270deg, var(--ba-color-slate-700), var(--ba-color-slate-400)); }
.fd-phone-bezel { position: relative; height: 100%; padding: calc(var(--pw) * .03); border-radius: calc(var(--pw) * .152); background: var(--ba-color-primary-black); }
/* The glass: a soft highlight from the upper left, over everything on the screen. */
.fd-phone-bezel::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, color-mix(in srgb, var(--ba-color-primary-white) 14%, transparent) 0%, transparent 28%, transparent 64%, color-mix(in srgb, var(--ba-color-primary-white) 5%, transparent) 82%, transparent 100%); }
.fd-screen { position: relative; overflow: hidden; background: var(--fd-screen-bg); color: var(--color-text); color-scheme: dark; }
:root[data-theme="light"] .fd-screen { color: var(--ba-color-slate-950); color-scheme: light; }
.fd-phone-screen { height: 100%; display: flex; flex-direction: column; border-radius: calc(var(--pw) * .125); }
.fd-island { position: absolute; z-index: 3; top: calc(var(--pw) * .032); left: 50%; width: 31%; height: calc(var(--pw) * .09); transform: translateX(-50%); border-radius: 999px; background: var(--ba-color-primary-black); }
.fd-status { display: flex; align-items: center; justify-content: space-between; height: calc(var(--pw) * .15); flex: none; padding: 0 calc(var(--pw) * .085) 0 calc(var(--pw) * .1);
  font: var(--weight-semibold) 13px/1 var(--font-headings); }
.fd-status-i { display: block; }
.fd-scroll { flex: 1; min-height: 0; overflow: hidden; }
.fd-compose { display: flex; align-items: center; justify-content: space-between; flex: none; margin: 6px 10px 14px; padding: 6px 6px 6px 16px; border-radius: 999px;
  background: var(--fd-screen-tile); font: 13px/1 var(--font-headings); color: color-mix(in srgb, currentColor 55%, transparent); }
/* The send key: its arrow drawn on a 18 px grid and centred in a 30 px circle (the old Ask's arrow sat off centre). */
.fd-compose i, .fd-try-box button { display: grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0; border-radius: 50%; background: var(--color-button); color: var(--color-on-accent); }
.fd-compose i svg, .fd-try-box button svg { display: block; width: 16px; height: 16px; }

/* The chat inside: the question, blank lines for the assistant's own words, today's card. */
.fd-chat { display: grid; gap: 12px; padding: 6px 12px 18px; font: 13px/1.45 var(--font-headings); }
.fd-chat-q { justify-self: end; max-width: 86%; margin: 0; padding: 9px 13px; border-radius: 18px; background: var(--fd-screen-tile); font-size: 14px; line-height: 1.35; }
.fd-lines { display: grid; gap: 7px; padding: 2px 0; }
.fd-lines i { display: block; height: 8px; border-radius: 4px; background: color-mix(in srgb, currentColor 13%, transparent); }
.fd-lines i:nth-child(2) { width: 94%; } .fd-lines i:nth-child(3) { width: 68%; } .fd-lines i:nth-child(4) { width: 81%; }
.fd-card-img { display: block; width: 100%; height: auto; }

/* The laptop: a 16 : 10 screen in a black bezel with an aluminium edge and a camera, on a wider base with its lip. */
.fd-laptop { --lw: min(640px, 100%); position: relative; margin: 0; transform-style: preserve-3d; }
.fd-laptop-lid { position: relative; padding: 2.2% 2.2% 3%; border-radius: 18px 18px 4px 4px; background: var(--ba-color-primary-black);
  box-shadow: inset 0 0 0 1.5px var(--ba-color-slate-400), inset 0 0 0 3px var(--ba-color-slate-800), 0 40px 70px -40px color-mix(in srgb, var(--ba-color-primary-black) 70%, transparent); }
.fd-laptop-lid::before { content: ''; position: absolute; top: .9%; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--ba-color-slate-800); box-shadow: inset 0 0 0 1.5px var(--ba-color-slate-700); }
.fd-laptop-lid::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(120deg, color-mix(in srgb, var(--ba-color-primary-white) 9%, transparent) 0%, transparent 30%, transparent 100%); }
.fd-laptop-screen { display: flex; aspect-ratio: 16 / 10; border-radius: 4px; }
.fd-laptop-base { position: relative; height: 13px; margin: 0 -6.5%; border-radius: 1px 1px 12px 12px / 1px 1px 10px 10px;
  background: linear-gradient(to bottom, var(--ba-color-slate-200), var(--ba-color-slate-300) 30%, var(--ba-color-slate-500) 80%, var(--ba-color-slate-600));
  box-shadow: 0 18px 30px -12px color-mix(in srgb, var(--ba-color-primary-black) 60%, transparent); }
.fd-laptop-base::before { content: ''; position: absolute; top: 0; left: 50%; width: 15%; height: 5px; transform: translateX(-50%); border-radius: 0 0 6px 6px; background: var(--ba-color-slate-400);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ba-color-primary-black) 35%, transparent); }
.fd-side { flex: none; display: grid; align-content: start; gap: 10px; width: 22%; padding: 16px 12px; background: color-mix(in srgb, var(--fd-screen-tile) 55%, var(--fd-screen-bg)); }
.fd-side i { display: block; height: 7px; border-radius: 4px; background: color-mix(in srgb, currentColor 11%, transparent); }
.fd-side i:first-child { width: 60%; height: 9px; margin-bottom: 8px; background: color-mix(in srgb, currentColor 20%, transparent); }
.fd-side i:nth-child(3) { width: 80%; } .fd-side i:nth-child(5) { width: 70%; }
.fd-win { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fd-win .fd-chat { max-width: 440px; margin: 0 auto; padding-top: 18px; }
.fd-win .fd-compose { width: min(440px, 90%); margin: 6px auto 12px; }
/* L2.0: a screen that plays a recording is dark in either theme (there are no light takes yet), in the app's own
   background: her neutral-900 for Claude's (the nearest of her greys to the recording's), black for ChatGPT's. The clip fills the laptop's
   16:10 screen; on the phone it sits under the status bar at its own shape, the chat's room below it. */
.fd-screen.has-clip { --fd-screen-bg: var(--ba-color-neutral-900); --fd-screen-tile: var(--ba-color-slate-800); color: var(--ba-color-slate-50); color-scheme: dark; }
.fd-laptop-screen.has-clip { --fd-screen-bg: var(--ba-color-primary-black); }
.fd-clip-box { position: relative; flex: none; }
.fd-clip-poster, .fd-clip { display: block; width: 100%; height: auto; }
.fd-clip { position: absolute; inset: 0; height: 100%; opacity: 0; transition: opacity .3s var(--fd-ease); }
.fd-clip.is-on { opacity: 1; }
.fd-laptop-screen .fd-clip-box { flex: 1; }
.fd-laptop-screen :is(.fd-clip-poster, .fd-clip) { height: 100%; object-fit: cover; }
.fd-live-box { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.fd-phone-screen > .fd-compose { margin-top: auto; }
.fd-lback { margin: 0; }
.fd-lback button { padding: 6px 12px; border-radius: 999px; background: var(--fd-screen-tile); color: inherit; font: var(--weight-semibold) 12px/1 var(--font-headings); }

/* "Try your own question": a large field with a centred send key, three questions to tap, and the speed. */
.fd-try { max-width: 34em; }
.fd-try-h { margin: 0 0 var(--space-4); font: 19px/28px var(--font-headings); color: var(--color-text-2); }
.fd-try-h b { color: var(--color-text); font-weight: var(--weight-semibold); }
.fd-try-box { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 20px; border: 1px solid var(--color-border-strong); border-radius: 999px; background: var(--color-surface);
  transition: border-color .2s, box-shadow .2s; }
.fd-try-box:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ba-color-primary) 30%, transparent); }
.fd-try-box input { flex: 1; min-width: 0; padding: 10px 0; border: 0; background: transparent; font: 17px/1.3 var(--font-headings); color: var(--color-text); outline: none; }
.fd-try-box button { width: 40px; height: 40px; }
.fd-try-box button svg { width: 18px; height: 18px; }
.fd-try-pills { margin-top: var(--space-4); }
.fd-try-fast { margin: var(--space-5) 0 0; font: 15px/1.4 var(--font-headings); color: var(--color-text-2); }
.fd-try-fast b { font-size: 17px; color: var(--color-accent-strong); }
.fd-try-fast span { color: var(--color-text-3); }

/* The live answer in the phone (front.js): the question, a reading line, the verdict, the card, the experts. */
.fd-phone.is-live .fd-scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.fd-phone.is-live .fd-scroll-in { animation: none !important; transform: none !important; }
.fd-live-verdict { margin: 0; font: var(--weight-semibold) 15px/1.4 var(--font-headings); }
.fd-live-reading { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; color: color-mix(in srgb, currentColor 60%, transparent); }
.fd-live-reading::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ba-color-primary); animation: fd-pulse 1.1s ease-in-out infinite; }
@keyframes fd-pulse { 50% { opacity: .25; transform: scale(.7); } }
.fd-lcard { display: grid; gap: 8px; padding: 12px; border: 1px solid color-mix(in srgb, currentColor 14%, transparent); border-radius: 14px; }
.fd-lcard-t { margin: 0; font: var(--weight-semibold) 13px/1.3 var(--font-headings); }
.fd-lstats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fd-lstat { padding: 8px 9px; border-radius: 10px; background: var(--fd-screen-tile); }
.fd-lstat.is-accent { box-shadow: inset 0 0 0 1px var(--ba-color-primary); }
.fd-lstat small { display: block; font: var(--weight-semibold) 9.5px/1.2 var(--font-headings); letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, currentColor 60%, transparent); }
.fd-lstat b { display: block; margin-top: 2px; font: var(--weight-semibold) 17px/1.15 var(--font-mono); }
.fd-lstat span { display: block; font-size: 11px; color: color-mix(in srgb, currentColor 65%, transparent); }
.fd-lcard-text { margin: 0; font-size: 12.5px; }
.fd-lbadge { margin: 0; font-size: 11.5px; color: color-mix(in srgb, currentColor 65%, transparent); }
.fd-lbadge i { font-style: normal; font-weight: var(--weight-semibold); color: var(--ba-color-green-500); }
:root[data-theme="light"] .fd-lbadge i { color: var(--ba-color-primary-strong); }
.fd-llinks { margin: 0; font-size: 11.5px; }
.fd-llinks a, .fd-lexperts a b { color: var(--ba-color-green-500); }
:root[data-theme="light"] .fd-llinks a, :root[data-theme="light"] .fd-lexperts a b { color: var(--ba-color-primary-strong); }
.fd-lsub { margin: 4px 0 0; font: var(--weight-semibold) 10px/1.2 var(--font-headings); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, currentColor 60%, transparent); }
.fd-lexperts { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fd-lexperts a { display: grid; gap: 1px; padding: 8px 10px; border-radius: 10px; background: var(--fd-screen-tile); color: inherit; text-decoration: none; font-size: 12px; line-height: 1.3; }
.fd-lexperts small { font-size: 10.5px; color: color-mix(in srgb, currentColor 60%, transparent); }
.fd-lmore { margin: 2px 0 0; font-size: 12px; }
.fd-live > * { animation: fd-land .45s var(--fd-ease-out) both; }
@keyframes fd-land { from { opacity: 0; transform: translateY(8px); } }

/* From 1100 px: rail | steps | the pinned stage. L2.1: one composition, larger: the laptop (ChatGPT) about 60% of the
   content width and the phone (Claude) about 22%, the phone in front of the laptop's lower-right corner, over its bezel
   and base only, never its screen (the lid's screen ends at 72.4% of the stage; the phone starts at 73%). The stage runs
   into the page's right margin where there is one, so the steps keep their column. */
@media (min-width: 1100px) {
  .fd-dv { grid-template-columns: 28px minmax(300px, 320px) minmax(0, 1fr); column-gap: var(--space-8); row-gap: 0; }
  .fd-story, .fd-try { grid-column: 2; order: 0; }
  .fd-story { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; }
  .fd-story:first-of-type { min-height: 60vh; justify-content: flex-start; padding-top: 12vh; }
  .fd-try { padding: 8vh 0 18vh; }
  .fd-dv-rail { display: block; grid-column: 1; grid-row: 1 / span 5; }
  .fd-dv-rail-in { position: sticky; top: calc(50vh - 18vh); height: 36vh; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
  .fd-dv-rail-in::before, .fd-dv-fill { content: ''; position: absolute; top: 6px; bottom: 6px; left: 50%; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--fd-hair); }
  .fd-dv-fill { background: var(--ba-color-primary); transform-origin: top; transform: scaleY(var(--dv-p, 0)); transition: transform .5s var(--fd-ease); }
  .fd-dv-rail-in b { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--color-bg); box-shadow: inset 0 0 0 2px var(--color-border-strong); transition: box-shadow .3s, background .3s; }
  .fd-dv[data-at="1"] .fd-dv-rail-in b:nth-of-type(-n+1), .fd-dv[data-at="2"] .fd-dv-rail-in b:nth-of-type(-n+2), .fd-dv[data-at="3"] .fd-dv-rail-in b:nth-of-type(-n+3), .fd-dv[data-at="4"] .fd-dv-rail-in b {
    background: var(--ba-color-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ba-color-primary) 22%, transparent); }
  .fd-dv[data-at="1"] { --dv-p: 0; } .fd-dv[data-at="2"] { --dv-p: .333; } .fd-dv[data-at="3"] { --dv-p: .667; } .fd-dv[data-at="4"] { --dv-p: 1; }
  .fd-dv-stage { display: block; grid-column: 3; grid-row: 1 / span 5; position: sticky; top: calc(var(--fd-bar-h) + 3vh); height: calc(100vh - var(--fd-bar-h) - 6vh); min-height: 620px; max-height: 860px;
    margin-right: calc(-1 * max(0px, (100vw - var(--front-max)) / 2 - var(--space-6))); perspective: 1800px; container-type: inline-size;
    --fd-phone-w: clamp(220px, 40cqi, 330px); --fd-lap-in: max(44px, 5cqi); }
  /* P1.1: the phone is sized first (326 px at 1440, so the card's figures in its recording read at 11 px), the laptop takes
     the rest. The laptop starts 44 px in, or 5% of the stage (its base overhangs its lid by 6.5% and its turn brings its
     left edge forward), so it never reaches the steps; its lid ends 4 px under the phone's edge, over the bezel, never the
     screen. From 1100 to
     1350 both scale down with the stage rather than cover the text. */
  .fd-laptop { position: absolute; left: var(--fd-lap-in); bottom: 14%; width: calc(100cqi - var(--fd-phone-w) - var(--fd-lap-in) + 4px); transform-origin: 100% 60%; }
  .fd-phone { --pw: var(--fd-phone-w); position: absolute; right: 0; bottom: calc(14% - 36px); z-index: 2; transform-origin: 0% 60%; }
  .fd-dv-stage .fd-dv-cap { position: absolute; left: 0; right: 0; }
  .fd-laptop .fd-dv-cap { top: 100%; margin-top: calc(var(--space-4) + 13px); }
}
@media (max-width: 768px) {
  body.front .fd-story h3 { font-size: 26px; line-height: 30px; }
  .fd-dv { gap: var(--space-8); }
}
/* Motion, from 1100 px: the steps dim until they're the one in view; the devices turn and their screens scroll with the
   section (a view timeline on the grid; front.js where there isn't one). Below 1100 px each screen scrolls as its own
   device passes. Only transform moves. */
@media (min-width: 1100px) {
  .js-motion .fd-story { opacity: .28; transition: opacity .45s var(--fd-ease); }
  .js-motion .fd-story.is-current { opacity: 1; }
  .js-motion .fd-phone { transform: rotateY(-8deg) rotateX(2deg); }
  .js-motion .fd-laptop { transform: rotateY(6deg) rotateX(2deg); }
}
@supports (animation-timeline: view()) {
  .js-motion .fd-dv { view-timeline: --fd-device block; }
  .js-motion .fd-phone, .js-motion .fd-laptop { view-timeline: --fd-own block; }
  .js-motion .fd-scroll-in { animation: fd-read linear both; animation-timeline: --fd-own; animation-range: cover 30% cover 80%; }
  @media (min-width: 1100px) {
    .js-motion .fd-phone { animation: fd-phone-turn linear both; animation-timeline: --fd-device; animation-range: contain 0% contain 100%; }
    .js-motion .fd-laptop { animation: fd-laptop-turn linear both; animation-timeline: --fd-device; animation-range: contain 0% contain 100%; }
    .js-motion .fd-scroll-in { animation-timeline: --fd-device; animation-range: contain 8% contain 70%; }
  }
}
/* L2.1: each turns about the edge where they meet (the laptop its right, the phone its left), so the overlap holds. */
@keyframes fd-phone-turn { from { transform: rotateY(-8deg) rotateX(2deg); } to { transform: rotateY(3deg) rotateX(-1deg); } }
@keyframes fd-laptop-turn { from { transform: rotateY(6deg) rotateX(2deg); } to { transform: rotateY(-2deg) rotateX(-1deg); } }
@keyframes fd-read { from { transform: none; } to { transform: translateY(calc(-1 * var(--fd-read, 0px))); } }

/* ---- L1.3: the highlights as five vertical scenes (src/front/highlights.ts) -------------------------------------------
   Each scene is edge to edge (L2.3: its content's height plus even padding, no empty band above), on its own deep tint of her palette with a soft glow and a fine dot texture
   (green for offers, slate for points, a warm neutral for promotions, green into slate for coverage, slate for readers;
   pale tints of the same on the light theme). The words sit on one side and the visual on the other, alternating, from
   1100 px; stacked below. Each scene's motion starts when it arrives (.is-active, front.js) and ends on the served
   state, which no script, reduced motion and ?still=1 see. Only transform, opacity and stroke offsets move. */
.fd-hl-sec { padding-bottom: 0; }
.fd-hl-sec > .fd-wrap h2 { margin-bottom: var(--space-10); }
.fd-scene { --sc-a: color-mix(in srgb, var(--ba-color-green-900) 55%, var(--ba-color-green-950)); --sc-b: var(--ba-color-slate-950); --sc-glow: var(--ba-color-primary); --sc-text: var(--ba-color-primary-white);
  --sc-text-2: var(--ba-color-slate-100); --sc-text-3: var(--ba-color-slate-300); --sc-tile: color-mix(in srgb, var(--ba-color-primary-white) 7%, transparent);
  --sc-line: color-mix(in srgb, var(--ba-color-primary-white) 12%, transparent);
  position: relative; display: flex; align-items: center; padding: clamp(72px, 11vh, 120px) 0; overflow: hidden; color: var(--sc-text); color-scheme: dark;
  background: radial-gradient(60% 70% at 78% 30%, color-mix(in srgb, var(--sc-glow) 18%, transparent), transparent 70%),
    radial-gradient(color-mix(in srgb, var(--ba-color-primary-white) 5%, transparent) 1px, transparent 1.4px) 0 0 / 22px 22px,
    linear-gradient(160deg, var(--sc-a), var(--sc-b)); }
.fd-scene-points { --sc-a: var(--ba-color-slate-800); --sc-b: var(--ba-color-slate-950); --sc-glow: var(--ba-color-info-500); }
.fd-scene-promos { --sc-a: var(--ba-color-neutral-800); --sc-b: var(--ba-color-neutral-950); --sc-glow: var(--ba-color-warning-500); }
.fd-scene-cover { --sc-a: var(--ba-color-green-950); --sc-b: var(--ba-color-slate-950); --sc-glow: var(--ba-color-green-500); }
.fd-scene-readers { --sc-a: var(--ba-color-slate-900); --sc-b: var(--ba-color-primary-black); --sc-glow: var(--ba-color-primary); }
:root[data-theme="light"] .fd-scene { --sc-text: var(--ba-color-slate-950); --sc-text-2: var(--ba-color-slate-800); --sc-text-3: var(--ba-color-slate-600);
  --sc-tile: color-mix(in srgb, var(--ba-color-primary-white) 70%, transparent); --sc-line: color-mix(in srgb, var(--ba-color-slate-900) 12%, transparent); color-scheme: light;
  background: radial-gradient(60% 70% at 78% 30%, color-mix(in srgb, var(--sc-glow) 14%, transparent), transparent 70%),
    radial-gradient(color-mix(in srgb, var(--ba-color-slate-900) 6%, transparent) 1px, transparent 1.4px) 0 0 / 22px 22px,
    linear-gradient(160deg, var(--sc-a), var(--sc-b)); }
:root[data-theme="light"] .fd-scene-cards { --sc-a: var(--ba-color-green-50); --sc-b: var(--ba-color-green-100); }
:root[data-theme="light"] .fd-scene-points { --sc-a: var(--ba-color-slate-50); --sc-b: var(--ba-color-slate-100); }
:root[data-theme="light"] .fd-scene-promos { --sc-a: var(--ba-color-neutral-50); --sc-b: var(--ba-color-warning-50); }
:root[data-theme="light"] .fd-scene-cover { --sc-a: var(--ba-color-green-50); --sc-b: var(--ba-color-slate-50); }
:root[data-theme="light"] .fd-scene-readers { --sc-a: var(--ba-color-primary-white); --sc-b: var(--ba-color-slate-100); }
.fd-scene-in { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); align-items: center; }
.fd-scene-n { display: block; margin-bottom: var(--space-4); font: var(--weight-semibold) 14px/1 var(--font-mono); letter-spacing: .1em; color: var(--sc-glow); }
:root[data-theme="light"] .fd-scene-n { color: var(--ba-color-primary-strong); }
body.front .fd-scene h3 { margin: 0 0 var(--space-4); font-size: 48px; line-height: 52px; letter-spacing: -0.03em; color: var(--sc-text); }
.fd-scene-line { max-width: 26em; margin: 0; font: 21px/30px var(--font-headings); color: var(--sc-text-2); }
.fd-scene-note { margin: var(--space-6) 0 0; font: 13px/1.5 var(--font-headings); color: var(--sc-text-3); }
.fd-scene-note a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); }
.fd-scene-vis { display: grid; place-items: center; min-width: 0; }
.fd-scene .fd-hl-missing { color: var(--sc-text-3); font-size: var(--text-md); }
@media (min-width: 1100px) {
  .fd-scene-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); }
  .fd-scene:nth-of-type(even) .fd-scene-copy { order: 2; }
}
@media (max-width: 768px) {
  .fd-scene { min-height: 0; padding: var(--space-12) 0; }
  body.front .fd-scene h3 { font-size: 32px; line-height: 36px; }
  .fd-scene-line { font-size: 18px; line-height: 26px; }
}
/* Arrival: the words rise in; each visual has its own entrance below. */
.js-motion .fd-scene .fd-scene-copy > * { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--fd-ease-out), transform .7s var(--fd-ease-out); }
.js-motion .fd-scene.is-active .fd-scene-copy > * { opacity: 1; transform: none; }
.js-motion .fd-scene.is-active .fd-scene-copy > :nth-child(2) { transition-delay: .08s; } .js-motion .fd-scene.is-active .fd-scene-copy > :nth-child(3) { transition-delay: .16s; }
.js-motion .fd-scene.is-active .fd-scene-copy > :nth-child(4) { transition-delay: .24s; }

/* 1. Offers: credit-card faces dealt in from a stack in depth, then each turns on its hinge to show its check. */
.fd-ocards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); width: 100%; max-width: 640px; margin: 0; padding: 0; list-style: none; perspective: 1100px; }
.fd-ocard { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; aspect-ratio: 1.586; padding: var(--space-5); border-radius: 16px; overflow: hidden;
  color: var(--ba-color-primary-white); background: linear-gradient(135deg, var(--ba-color-green-700), var(--ba-color-green-900) 60%, var(--ba-color-green-950));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ba-color-primary-white) 14%, transparent), 0 24px 40px -22px color-mix(in srgb, var(--ba-color-primary-black) 70%, transparent); transform-style: preserve-3d; }
.fd-ocard:nth-child(2) { background: linear-gradient(135deg, var(--ba-color-slate-600), var(--ba-color-slate-800) 60%, var(--ba-color-slate-950)); }
.fd-ocard:nth-child(3) { background: linear-gradient(135deg, var(--ba-color-neutral-500), var(--ba-color-neutral-700) 60%, var(--ba-color-neutral-900)); }
.fd-ocard:nth-child(4) { background: linear-gradient(135deg, var(--ba-color-green-500), var(--ba-color-green-800) 65%, var(--ba-color-green-950)); }
.fd-ocard::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, color-mix(in srgb, var(--ba-color-primary-white) 16%, transparent), transparent 40%); }
.fd-ocard-chip { position: absolute; top: 18%; left: var(--space-5); width: 34px; height: 26px; border-radius: 5px; background: linear-gradient(135deg, var(--ba-color-warning-200), var(--ba-color-warning-500));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ba-color-primary-black) 25%, transparent); }
.fd-ocard-name { font: var(--weight-semibold) 13px/1.25 var(--font-headings); color: color-mix(in srgb, var(--ba-color-primary-white) 80%, transparent); }
.fd-ocard b { font: var(--weight-semibold) 24px/1.1 var(--font-headings); letter-spacing: -0.01em; }
.fd-ocard-check { font: var(--weight-semibold) 12px/1.4 var(--font-headings); color: var(--ba-color-green-200); }
.fd-ocard-check i { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 4px; border-radius: 50%; background: var(--ba-color-primary); color: var(--ba-color-primary-white); font-style: normal; font-size: 10px; }
/* L2.3: one motion per card, so nothing overrides it: dealt in from the stack, turned 50° on its hinge (with the 30° tilt it
   starts at, 56° from face-on at most, so never edge-on), then swinging face-on, where every card ends. */
.js-motion .fd-scene.is-active .fd-ocard { animation: fd-deal 1.5s var(--fd-ease-out) both; animation-delay: calc(var(--i) * 160ms); }
.js-motion .fd-scene:not(.is-active) .fd-ocard { opacity: 0; }
.js-motion .fd-scene.is-active .fd-ocard-check { animation: fd-pop .4s var(--fd-ease-out) both; animation-delay: calc(1.5s + var(--i) * 160ms); }
@keyframes fd-deal { 0% { opacity: 0; transform: translate3d(var(--dx, 0), var(--dy, 0), -320px) rotateX(30deg) rotateY(50deg) rotateZ(calc((var(--i) - 1.5) * 7deg)); }
  55% { opacity: 1; transform: translate3d(0, 0, 0) rotateX(0) rotateY(50deg) rotateZ(0); } 100% { opacity: 1; transform: none; } }
@keyframes fd-in { from { opacity: 0; } }

/* 2. The gauge, large: it sweeps to the value, the floor drops in, the figure counts up (front.js), and every 7 s the
   next program takes its place (the three are stacked; only .is-on shows). */
.fd-gauges { position: relative; display: grid; width: min(560px, 100%); }
.fd-gauge-one { grid-area: 1 / 1; margin: 0; transition: opacity .6s var(--fd-ease); }
.fd-gauge-one:not(.is-on) { opacity: 0; visibility: hidden; }
.fd-gauge { width: 100%; overflow: visible; }
.fd-gauge-track, .fd-gauge-range, .fd-gauge-val { fill: none; stroke-width: 22; }
.fd-gauge-track { stroke: var(--sc-line, color-mix(in srgb, var(--color-text) 8%, transparent)); stroke-linecap: round; }
.fd-gauge-range { stroke: color-mix(in srgb, var(--ba-color-primary) 30%, transparent); stroke-width: 36; }
.fd-gauge-val { stroke: var(--ba-color-primary); stroke-linecap: round; }
.fd-gauge-needle { transform-origin: 200px 200px; transform: rotate(var(--deg)); }
.fd-gauge-needle line { stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.fd-gauge-needle circle { fill: currentColor; }
.fd-gauge-floor line { stroke: var(--ba-color-warning-400); stroke-width: 4; stroke-linecap: round; }
.fd-gauge-floor text { font: var(--weight-semibold) 14px var(--font-headings); fill: currentColor; text-anchor: middle; }
.fd-gauge-fig { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: calc(-1 * var(--space-12)); text-align: center; }
.fd-gauge-fig b { font: var(--weight-semibold) 72px/1 var(--font-headings); letter-spacing: -0.03em; }
.fd-gauge-fig span { font: 16px/1.4 var(--font-headings); color: var(--sc-text-2, var(--color-text-2)); }
.fd-gauge-fig small { font: 13px/1.4 var(--font-headings); color: var(--sc-text-3, var(--color-text-3)); }
.fd-gauge-dots { display: flex; justify-content: center; gap: 8px; margin-top: var(--space-5); }
.fd-gauge-dots i { width: 7px; height: 7px; border-radius: 4px; background: currentColor; opacity: .3; transition: width .4s var(--fd-ease-out), opacity .4s; }
.fd-gauge-dots i.is-on { width: 22px; opacity: .9; }
.js-motion .fd-scene.is-active .fd-gauge-one.is-on .fd-gauge-val { stroke-dasharray: 1 1; animation: fd-gauge-draw 1.5s var(--fd-ease) both .15s; }
.js-motion .fd-scene.is-active .fd-gauge-one.is-on .fd-gauge-needle { animation: fd-needle 1.5s var(--fd-ease) both .15s; }
.js-motion .fd-scene.is-active .fd-gauge-one.is-on .fd-gauge-range { animation: fd-in .8s var(--fd-ease) backwards .5s; }
.js-motion .fd-scene.is-active .fd-gauge-one.is-on .fd-gauge-floor { animation: fd-drop .7s cubic-bezier(.34, 1.56, .64, 1) both 1.1s; }
.js-motion .fd-scene:not(.is-active) .fd-gauge-val { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
@keyframes fd-gauge-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fd-needle { from { transform: rotate(0deg); } to { transform: rotate(var(--deg)); } }
@keyframes fd-drop { from { opacity: 0; transform: translateY(-28px); } }

/* 3. The countdown: the ring fills as the scene is scrolled (a view timeline; on arrival where there isn't one), the days
   tick down to today's count (front.js), and a strip shows the next promotions' end dates, today at its left. */
.fd-scene-promos .fd-scene-vis { display: flex; flex-direction: column; align-items: center; }
.fd-count { position: relative; width: 260px; aspect-ratio: 1; }
.fd-count svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fd-count-track, .fd-count-ring { fill: none; stroke-width: 12; }
.fd-count-track { stroke: var(--sc-line, color-mix(in srgb, var(--color-text) 8%, transparent)); }
.fd-count-ring { stroke: var(--ba-color-warning-400); stroke-linecap: round; stroke-dasharray: var(--k) 1; }
:root[data-theme="light"] .fd-count-ring { stroke: var(--ba-color-warning-600); }
.fd-count-n { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; }
.fd-count-n b { font: var(--weight-semibold) 88px/1 var(--font-headings); letter-spacing: -0.03em; }
.fd-count-n span { font: 15px/1.4 var(--font-headings); color: var(--sc-text-3, var(--color-text-3)); }
.fd-count-what { max-width: 30em; margin: var(--space-5) auto 0; text-align: center; font: 17px/1.5 var(--font-headings); color: var(--sc-text-2, var(--color-text-2)); }
.fd-count-what b { color: var(--sc-text, var(--color-text)); }
.fd-cal { width: min(620px, 100%); margin-top: var(--space-10); }
.fd-cal-h { margin: 0 0 var(--space-3); font: var(--weight-semibold) 12px/1 var(--font-headings); letter-spacing: .08em; text-transform: uppercase; color: var(--sc-text-3); }
.fd-cal-strip { position: relative; height: 56px; margin: 44px 56px 0 0; padding: 0; list-style: none; border-top: 2px solid var(--sc-line); }
.fd-cal-strip > li { position: absolute; top: -7px; left: calc(var(--x, 0) * 100%); display: grid; justify-items: start; gap: 2px; font: 12px/1.25 var(--font-headings); white-space: nowrap; }
.fd-cal-strip > li i { width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--sc-b, var(--color-bg)); box-shadow: inset 0 0 0 2px var(--ba-color-warning-400); }
.fd-cal-strip > li:nth-child(odd):not(.fd-cal-today) { top: auto; bottom: 100%; margin-bottom: -7px; align-content: end; }
.fd-cal-strip > li:nth-child(odd):not(.fd-cal-today) i { order: 3; }
.fd-cal-strip b { margin: 4px 0 0 -6px; font-weight: var(--weight-semibold); color: var(--sc-text); }
.fd-cal-strip span { margin-left: -6px; color: var(--sc-text-3); }
.fd-cal-mark.is-first i { background: var(--ba-color-warning-400); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ba-color-warning-400) 25%, transparent); }
.fd-cal-today span { margin: 8px 0 0 -14px; font-weight: var(--weight-semibold); color: var(--sc-text-2); }
.fd-cal-strip > li.is-late { translate: -100% 0; justify-items: end; text-align: right; }
.fd-cal-strip > li.is-late :is(i, b, span) { margin-left: 0; margin-right: -6px; }
@media (max-width: 768px) {
  /* Phones: the strip becomes a short list, each end date on its own line. */
  .fd-cal-strip { height: auto; margin: 0; border-top: 0; display: grid; gap: 10px; }
  .fd-cal-strip > li, .fd-cal-strip > li.is-late, .fd-cal-strip > li:nth-child(odd):not(.fd-cal-today) { position: static; translate: none; display: grid; grid-template-columns: 12px auto 1fr; align-items: center;
    column-gap: 10px; margin: 0; text-align: left; }
  .fd-cal-strip > li :is(i, b, span), .fd-cal-strip > li.is-late :is(i, b, span), .fd-cal-strip > li:nth-child(odd):not(.fd-cal-today) i { order: 0; margin: 0; }
  .fd-cal-strip span { justify-self: end; }
  .fd-cal-today { display: none !important; }
}
.js-motion .fd-scene.is-active .fd-cal-mark { animation: fd-pop .45s var(--fd-ease-out) both; animation-delay: calc(.5s + var(--i) * 140ms); }
.js-motion .fd-scene:not(.is-active) .fd-cal-mark { opacity: 0; }
@supports (animation-timeline: view()) {
  .js-motion .fd-count-ring { animation: fd-ring linear both; animation-timeline: view(); animation-range: cover 15% cover 55%; }
}
@supports not (animation-timeline: view()) {
  .js-motion .fd-scene.is-active .fd-count-ring { animation: fd-ring 1.8s var(--fd-ease) both .2s; }
}
@keyframes fd-ring { from { stroke-dasharray: 0 1; } }
/* 4. The constellation (shared with D4.9: its picture, legend and details). */
.fd-bubbles { width: 100%; height: auto; overflow: visible; }
.fd-bub circle { fill: var(--bub); fill-opacity: .82; stroke: var(--color-bg); stroke-width: 2; transition: fill-opacity .2s var(--fd-ease-out), transform .2s var(--fd-ease-out); transform-box: fill-box; transform-origin: center; }
.fd-bub text { font: var(--weight-semibold) 15px var(--font-headings); fill: var(--ba-color-primary-white); text-anchor: middle; pointer-events: none; }
.fd-bub { cursor: pointer; outline: none; }
.fd-bub:hover circle, .fd-bub:focus-visible circle, .fd-bub.is-on circle { fill-opacity: 1; transform: scale(1.06); }
.fd-bub:focus-visible circle { stroke: var(--color-focus); stroke-width: 3; }
.fd-t-cards { --bub: var(--ba-color-primary); } .fd-t-deals { --bub: var(--ba-color-green-500); } .fd-t-hotels { --bub: var(--ba-color-green-800); }
.fd-t-flights { --bub: var(--ba-color-slate-500); } .fd-t-trips { --bub: var(--ba-color-green-300); } .fd-t-news { --bub: var(--ba-color-slate-700); }
:root[data-theme="dark"] .fd-t-news { --bub: var(--ba-color-slate-400); } :root[data-theme="dark"] .fd-t-hotels { --bub: var(--ba-color-green-700); }
.fd-constellation-compact .fd-bub-list, .fd-constellation-compact .fd-lone { display: none; }
/* 4. Who covered what: the week's bubbles, large. They settle in from scattered, newest last, with a spring, then drift
   a few pixels each on their own slow loop; a tap says who had the story first (front.js fills the line under them). */
.fd-scene-cover .fd-constellation { width: 100%; }
.fd-scene-cover .fd-bub circle { stroke: var(--sc-b); }
.fd-bub-say { min-height: 3em; margin: var(--space-3) 0 0; text-align: center; font: 15px/1.45 var(--font-headings); color: var(--sc-text-2); }
.fd-bub-say b { color: var(--sc-text); }
.fd-bub-say a { color: inherit; }
.js-motion :is(.fd-scene-cover, .fd-cov-live) .fd-bub { animation: fd-bub-float var(--fd, 7s) ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.9s); }
/* L2.5: a bubble's count settles with its circle; before, the counts stood alone in the empty picture until the circles came. */
.fd-bub text { transform-box: fill-box; transform-origin: center; }
.js-motion :is(.fd-scene-cover, .fd-cov-live):not(.is-active) .fd-bub :is(circle, text) { opacity: 0; transform: translate(var(--sx, 0), var(--sy, -40px)) scale(.3); }
.js-motion :is(.fd-scene-cover, .fd-cov-live).is-active .fd-bub :is(circle, text) { animation: fd-settle .9s cubic-bezier(.34, 1.4, .64, 1) backwards; animation-delay: calc(var(--o, var(--i)) * 70ms); }
/* L1.6: a story that arrived since the reader's last visit pulses once, after the settle (front.js marks it .is-new). */
.js-motion .fd-cov-live.is-active .fd-bub.is-new circle { animation: fd-settle .9s cubic-bezier(.34, 1.4, .64, 1) backwards, fd-new 1.2s var(--fd-ease-out) calc(var(--o, var(--i)) * 70ms + 1.1s) 1; }
@keyframes fd-new { 0% { stroke: var(--ba-color-primary); stroke-width: 2; } 40% { stroke: var(--ba-color-green-300); stroke-width: 10; } 100% { stroke-width: 2; } }
.fd-cov-tick { display: inline-flex; align-items: center; gap: 8px; margin: calc(-1 * var(--space-2)) 0 var(--space-6); font: var(--weight-semibold) 13px/1 var(--font-headings); color: var(--color-text-3); }
.fd-cov-tick i { width: 8px; height: 8px; border-radius: 50%; background: var(--ba-color-primary); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ba-color-primary) 50%, transparent); }
.js-motion .fd-cov-tick i { animation: fd-tick-pulse 2.4s var(--fd-ease-out) infinite; }
@keyframes fd-tick-pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.fd-lone-h span { margin-left: var(--space-2); font-size: 15px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--color-text-3); }
.fd-bub-meta b { font-weight: var(--weight-semibold); color: var(--color-accent-strong); }
@keyframes fd-settle { from { opacity: 0; transform: translate(var(--sx, 0), var(--sy, -40px)) scale(.3); } }
@keyframes fd-bub-float { from { transform: translate(0, 0); } to { transform: translate(var(--fx, 4px), var(--fy, -5px)); } }

/* 5. Readers, hour by hour: the ratio line draws itself as the scene arrives, then the peak and its label. */
.fd-readers { width: 100%; height: auto; overflow: visible; }
.fd-readers-base { stroke: var(--sc-text-3, var(--color-text-3)); stroke-dasharray: 4 5; stroke-width: 1; }
.fd-readers-line { fill: none; stroke: var(--ba-color-primary); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.fd-readers-area { fill: color-mix(in srgb, var(--ba-color-primary) 14%, transparent); }
.fd-readers-peak { fill: var(--ba-color-primary); stroke: var(--sc-b, var(--color-bg)); stroke-width: 3; }
.fd-readers-t { font: var(--weight-semibold) 14px var(--font-headings); fill: var(--sc-text-2, var(--color-text-2)); text-anchor: end; }
.fd-readers-pk { text-anchor: start; fill: var(--sc-text, var(--color-text)); }
.fd-readers-pk.is-left { text-anchor: end; }
.fd-readers-axis { stroke: var(--sc-line, var(--fd-hair)); stroke-width: 1; }
.fd-readers-tick { stroke: var(--sc-text-3, var(--color-text-3)); stroke-width: 1; }
.fd-readers-ax { font: 13px var(--font-headings); fill: var(--sc-text-3, var(--color-text-3)); text-anchor: middle; }
.js-motion .fd-scene.is-active .fd-readers-line { stroke-dasharray: 1 1; animation: fd-gauge-draw 2.4s var(--fd-ease) both .2s; }
.js-motion .fd-scene:not(.is-active) .fd-readers-line { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.js-motion .fd-scene:not(.is-active) :is(.fd-readers-area, .fd-readers-peak, .fd-readers-pk) { opacity: 0; }
.js-motion .fd-scene.is-active :is(.fd-readers-area, .fd-readers-peak, .fd-readers-pk) { animation: fd-in .6s var(--fd-ease) backwards 2.2s; }
@media (max-width: 768px) {
  .fd-ocards { gap: var(--space-3); }
  .fd-ocard { aspect-ratio: auto; min-height: 118px; padding: 34px var(--space-3) var(--space-3); border-radius: 12px; }
  .fd-ocard-chip { top: 10px; left: auto; right: 10px; width: 22px; height: 16px; border-radius: 4px; }
  .fd-ocard b { font-size: 17px; } .fd-ocard-name { font-size: 11px; } .fd-ocard-check { font-size: 10.5px; }
  .fd-gauge-fig b { font-size: 52px; }
  .fd-count { width: 200px; } .fd-count-n b { font-size: 68px; }
}

/* ---- Sean's pitch (D4), E1.4: "Who the experts are": the countries the network's experts write from, then every blog
   by name. Beside the countries (west to east from the United States, G3.2; each opening to its blogs) sits the globe, on the stage, with motion from
   769 px; otherwise a 2D map of the same countries, filled in her green, with their counts (on phones the one-blog
   countries' counts are left to the list, where Europe's would overlap). The strip below drifts: two rows of name chips,
   each sideways forever (a duplicate list makes the loop seamless; transform only), the second the other way, paused
   while pointed at or focused. Without motion, one wrapped list. */
.fd-ex-grid { display: grid; gap: var(--space-10); align-items: start; }
@media (min-width: 769px) { .fd-ex-grid { grid-template-columns: 1fr 1fr; gap: var(--space-12); } }
.fd-experts h2 { margin-bottom: var(--space-4); }
.fd-experts .fd-lede { max-width: 40em; }
.fd-map { display: block; width: 100%; height: auto; }
.fd-map-land { fill: var(--color-text-3); opacity: .16; }
.fd-map-countries path { fill: var(--ba-color-green-600); stroke: var(--color-bg); stroke-width: .8; }
:root[data-theme="dark"] .fd-map-countries path { fill: var(--ba-color-green-500); }
.fd-map-lead { stroke: var(--color-text-3); stroke-width: 1; opacity: .7; }
.fd-map-count circle { r: 20px; fill: var(--color-surface); stroke: var(--ba-color-primary); stroke-width: 1.5; }
.fd-map-count text { font: var(--weight-semibold) 21px var(--font-headings); fill: var(--color-text); text-anchor: middle; dominant-baseline: central; }
@media (max-width: 768px) {
  .fd-map-count circle { r: 25px; stroke-width: 2.5; } .fd-map-count text { font-size: 28px; } .fd-map-lead { stroke-width: 2; }
  .fd-map-one { display: none; }
}
.fd-cn-list { margin: var(--space-8) 0 var(--space-4); padding: 0; list-style: none; border-top: 1px solid var(--fd-hair, var(--color-border)); }
.fd-cn { border-bottom: 1px solid var(--fd-hair, var(--color-border)); }
.fd-cn summary { display: flex; align-items: baseline; gap: var(--space-3); padding: 16px 4px; cursor: pointer; list-style: none; color: var(--color-text-2);
  transition: color .2s var(--fd-ease-out); }
.fd-cn summary::-webkit-details-marker { display: none; }
.fd-cn summary b { font: var(--weight-semibold) 21px/1.25 var(--font-headings); letter-spacing: -0.01em; }
.fd-cn summary span { margin-left: auto; font: 15px/1.2 var(--font-headings); color: var(--color-text-3); }
.fd-cn summary::after { content: '+'; width: 1em; font: 20px/1 var(--font-headings); color: var(--color-text-3); text-align: center; }
.fd-cn details[open] summary::after { content: '−'; }
.fd-cn summary:hover, .fd-cn details[open] summary, .fd-cn.is-active summary { color: var(--color-text); }
.fd-cn.is-active summary b { color: var(--color-accent-strong); }
.fd-cn summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--ba-border-radius-md); }
.fd-cn-blogs { columns: 2 12em; gap: var(--space-6); margin: 0; padding: 0 4px var(--space-5); list-style: none; }
.fd-cn-blogs li { break-inside: avoid; padding: 3px 0; }
.fd-cn-blogs a { font: 15px/1.4 var(--font-headings); color: var(--color-text-2); text-decoration: none; }
.fd-cn-blogs a:hover { color: var(--color-accent-strong); text-decoration: underline; }
@media (min-width: 769px) {
  :root:not(.js-motion) .fd-ex-map { position: sticky; top: calc(var(--fd-bar-h) + var(--space-8)); }
  /* With motion the globe is drawn in the left half (the stage); the map keeps its box, which globe.js measures. The
     section ends 40vh after the list, so its last country can reach the middle of the screen. */
  .js-motion .fd-ex-map { position: sticky; top: 10vh; height: 80vh; }
  .js-motion .fd-ex-map .fd-map { visibility: hidden; }
  .js-motion .fd-experts { padding-bottom: 40vh; }
}
.fd-experts-strip { padding: 0 0 calc(var(--space-10) * 2); }
.fd-ex-rows { display: grid; gap: var(--space-3); margin: var(--space-10) 0 var(--space-6); }
.fd-ex-row { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }
.fd-ex-list { display: flex; flex: none; gap: var(--space-3); margin: 0; padding: 0 var(--space-3) 0 0; list-style: none; }
.fd-ex-list a { display: flex; align-items: baseline; gap: var(--space-2); padding: 12px 20px; border-radius: var(--radius-full); background: var(--fd-tile); color: var(--color-text); text-decoration: none; white-space: nowrap;
  transition: background-color .18s var(--fd-ease-out); }
.fd-ex-list a:hover { background: var(--color-accent-subtle); }
.fd-ex-list b { font: var(--weight-semibold) 17px/1.2 var(--font-headings); }
.fd-ex-list span { font: 14px/1.2 var(--font-headings); color: var(--color-text-3); }
.fd-ex-note { margin: 0; font: var(--text-sm)/1.5 var(--font-headings); color: var(--color-text-3); }
.fd-ex-copy { display: none; }
:root:not(.js-motion) .fd-ex-rows { max-width: var(--front-max); margin-left: auto; margin-right: auto; padding: 0 var(--space-5); }
:root:not(.js-motion) .fd-ex-row { -webkit-mask-image: none; mask-image: none; }
:root:not(.js-motion) .fd-ex-list { flex-wrap: wrap; flex: 1; }
.js-motion .fd-ex-copy { display: flex; }
.js-motion .fd-ex-list { animation: fd-drift 90s linear infinite; }
.js-motion .fd-ex-right .fd-ex-list { animation-direction: reverse; animation-duration: 110s; }
.js-motion .fd-ex-row:is(:hover, :focus-within) .fd-ex-list { animation-play-state: paused; }
@keyframes fd-drift { to { transform: translateX(-100%); } }
@media (max-width: 768px) { .fd-ex-list a { padding: 10px 16px; } .fd-ex-list b { font-size: 15px; } }
/* Without motion the strip is a wrapped list of the 30 most active blogs (the note links every blog). */
:root:not(.js-motion) .fd-ex-right { display: none; }
:root:not(.js-motion) .fd-ex-left .fd-ex-list li:nth-child(n+31) { display: none; }
@media (max-width: 768px) { :root:not(.js-motion) .fd-ex-left .fd-ex-list li:nth-child(n+13) { display: none; } }

/* ---- D4.7: how an answer is checked, the second dark band, in Apple's language -----------------------------------
   One line per step, larger pictures: the network as a field of dots (L1.5), the verified badge and the catch, then the
   answer. The pinned sequence and its rail are D3.5's. */
.fd-how { padding: calc(var(--space-16) * 2) 0; }
body.front .fd-how h2 { margin-bottom: var(--space-16); }
body.front .fd-how-copy h3 { font-size: 32px; line-height: 36px; letter-spacing: -0.02em; }
.fd-how-copy p { font: 19px/28px var(--font-headings); color: var(--color-text-2); }
.fd-how-num { background: var(--color-bg); }
.fd-how-vis { border: 0; border-radius: 28px; background: var(--ba-color-slate-900); min-height: 300px; padding: var(--space-10); }
:root[data-theme="dark"] .fd-how-vis { background: var(--ba-color-slate-900); }
:root[data-theme="light"] body.front .fd-how .fd-how-vis { background: var(--ba-color-slate-900); }
.fd-how-q { font-size: 24px; line-height: 1.35; padding: var(--space-4) var(--space-6); background: var(--color-button); color: var(--color-on-accent); border: 0; border-radius: 24px 24px 6px 24px; }
.fd-how-badge { padding: var(--space-4) var(--space-6); background: var(--ba-color-slate-950); box-shadow: 0 0 0 1px var(--ba-color-primary), 0 0 40px -6px color-mix(in srgb, var(--ba-color-primary) 55%, transparent); }
.fd-how-badge b { font-size: 28px; color: var(--ba-color-green-400); }
.fd-how .fd-result { color: var(--color-text); }
.fd-how .fd-stat { background: var(--ba-color-slate-950); }
@media (min-width: 900px) {
  .js-motion .fd-how { padding: 0; }
  .js-motion .fd-how-copy :is(h3, p) { opacity: .3; }
}
@media (max-width: 768px) { .fd-how-vis { padding: var(--space-6); border-radius: 22px; } }

/* L1.5: step 2, the whole network as a field of dots, one per blog, its name on hover; the blogs that wrote about the
   card light up in turn (in the pinned version, as step 2 arrives; stacked, lit). Step 3: the catch, the stated figure
   turning over to the verified one. */
.fd-net { width: 100%; }
.fd-net-field { display: grid; grid-template-columns: repeat(auto-fill, minmax(18px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.fd-net-dot { position: relative; justify-self: center; width: 12px; height: 12px; border-radius: 50%; background: color-mix(in srgb, var(--ba-color-slate-50) 16%, transparent); }
.fd-net-dot.is-cov { background: var(--ba-color-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ba-color-primary) 22%, transparent), 0 0 18px color-mix(in srgb, var(--ba-color-primary) 55%, transparent); }
.fd-net-dot:hover { z-index: 2; transform: scale(1.5); }
.fd-net-dot:hover::after { content: attr(data-name); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) scale(.667); transform-origin: bottom center;
  padding: 5px 10px; border-radius: 8px; background: var(--ba-color-primary-white); color: var(--ba-color-slate-950); font: var(--weight-semibold) 18px/1.2 var(--font-headings); white-space: nowrap; pointer-events: none; }
.fd-net-key { display: flex; align-items: center; gap: 8px; margin: var(--space-5) 0 0; font: 14px/1.4 var(--font-headings); color: var(--color-text-2); }
.fd-net-key i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ba-color-primary); }
.fd-how-join { gap: var(--space-6); }
.fd-catch { width: 100%; padding: var(--space-5); border-radius: 18px; background: var(--ba-color-slate-950); box-shadow: inset 0 0 0 1px var(--fd-hair); text-align: center; }
.fd-catch-h { margin: 0; font: var(--weight-semibold) 11px/1.3 var(--font-headings); letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-3); }
.fd-catch-what { margin: var(--space-2) 0 var(--space-3); font: 16px/1.3 var(--font-headings); color: var(--color-text-2); }
.fd-flip { perspective: 600px; }
.fd-flip-card { display: inline-grid; }
.fd-flip-card b { grid-area: 1 / 1; font: var(--weight-semibold) 60px/1 var(--font-headings); letter-spacing: -0.03em; backface-visibility: hidden; }
.fd-flip-from { color: var(--ba-color-danger-400); text-decoration: line-through; text-decoration-thickness: 4px; transform: rotateX(180deg); }
.fd-flip-to { color: var(--ba-color-green-400); }
.fd-catch-was { margin: var(--space-3) 0 0; font: 14px/1.4 var(--font-headings); color: var(--color-text-2); }
@media (min-width: 900px) {
  .js-motion .fd-how .fd-net-dot.is-cov { background: color-mix(in srgb, var(--ba-color-slate-50) 16%, transparent); box-shadow: none; }
  .js-motion .fd-how[data-step="2"] .fd-net-dot.is-cov { animation: fd-dot-on .6s var(--fd-ease-out) both; animation-delay: calc(250ms + var(--k) * 180ms); }
  .js-motion .fd-how:is([data-step="3"], [data-step="4"]) .fd-net-dot.is-cov { background: var(--ba-color-primary); }
  .js-motion .fd-how[data-step="3"] .fd-flip-from { animation: fd-flip-out 1s var(--fd-ease) both .5s; }
  .js-motion .fd-how[data-step="3"] .fd-flip-to { animation: fd-flip-in 1s var(--fd-ease) both .5s; }
}
@keyframes fd-dot-on { from { background: color-mix(in srgb, var(--ba-color-slate-50) 16%, transparent); box-shadow: none; transform: scale(1); }
  45% { transform: scale(1.6); } to { background: var(--ba-color-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ba-color-primary) 22%, transparent), 0 0 18px color-mix(in srgb, var(--ba-color-primary) 55%, transparent); transform: none; } }
@keyframes fd-flip-out { from { transform: rotateX(0); } to { transform: rotateX(180deg); } }
@keyframes fd-flip-in { from { transform: rotateX(-180deg); } to { transform: rotateX(0); } }
@media (max-width: 768px) { .fd-net-field { gap: 8px; grid-template-columns: repeat(auto-fill, minmax(14px, 1fr)); } .fd-net-dot { width: 10px; height: 10px; } .fd-flip-card b { font-size: 48px; } }

/* ---- D4.8: Ask, live (src/front/ask-live.ts, front.js) --------------------------------------------------------------
   The field: 64 px tall, fully round, a soft shadow (Apple's search). The answer below it in the order it streams. */
.fd-askl { display: flex; align-items: center; gap: var(--space-3); max-width: 760px; height: 64px; margin: var(--space-8) auto var(--space-5); padding: 0 8px 0 24px;
  border-radius: var(--radius-full); background: var(--color-surface); border: 1px solid var(--fd-hair);
  box-shadow: 0 18px 50px -24px color-mix(in srgb, var(--ba-color-slate-950) 40%, transparent), 0 2px 6px -2px color-mix(in srgb, var(--ba-color-slate-950) 12%, transparent); }
.fd-askl:focus-within { border-color: var(--ba-color-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ba-color-primary) 22%, transparent), 0 18px 50px -24px color-mix(in srgb, var(--ba-color-slate-950) 40%, transparent); }
.fd-askl-icon { display: grid; color: var(--color-text-3); }
.fd-askl input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: 19px/1 var(--font-headings); color: var(--color-text); outline: none; }
.fd-askl button { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--color-button); color: var(--color-on-accent); cursor: pointer; }
.fd-askl button:hover { background: var(--color-button-hover); }
.fd-askl-pills { justify-content: center; }
.fd-askl-out { max-width: 760px; margin: var(--space-10) auto 0; }
.fd-askl-card { padding: var(--space-8); border-radius: 28px; background: var(--fd-tile); display: grid; gap: var(--space-5); }
:root[data-theme="dark"] .fd-askl-card { background: var(--ba-color-slate-900); }
.fd-askl-q { margin: 0; font: var(--weight-semibold) 15px/1.4 var(--font-headings); color: var(--color-text-3); }
.fd-askl-verdict { margin: 0; font: var(--weight-semibold) 24px/32px var(--font-headings); letter-spacing: -0.01em; color: var(--color-text); }
.fd-askl-h { margin: 0 0 var(--space-2); font: var(--weight-semibold) 13px/1.3 var(--font-headings); letter-spacing: var(--tracking-wide); color: var(--color-accent-strong); }
.fd-askl-verified { display: grid; gap: var(--space-2); }
.fd-askl-verified p { margin: 0; padding: var(--space-3) var(--space-4); border-radius: 14px; background: var(--color-accent-subtle); font: 16px/1.5 var(--font-headings); color: var(--color-text); }
.fd-askl-verified a { font-size: 14px; }
.fd-askl-text { font: 17px/1.6 var(--font); color: var(--color-text-2); }
.fd-askl-text p, .fd-askl-text ul { margin: 0 0 var(--space-3); }
.fd-askl-text .fd-a-head { font-family: var(--font-headings); }
.fd-askl-sources { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.fd-askl-sources a { display: grid; gap: 4px; height: 100%; padding: var(--space-4); border-radius: 16px; background: var(--color-surface); text-decoration: none; color: var(--color-text-3); font: 13px/1.35 var(--font-headings);
  transition: transform .18s var(--fd-ease-out); }
.fd-askl-sources a:hover { transform: translateY(-2px); }
.fd-askl-sources b { color: var(--color-text); }
.fd-askl-sources span { color: var(--color-accent-strong); font-size: 15px; line-height: 1.35; }
.fd-askl-note { margin: 0; font: var(--text-sm)/1.5 var(--font-headings); color: var(--color-text-3); }
.fd-askl-part { animation: fd-rise .45s var(--fd-ease) both; }
/* The shimmer while it starts. */
.fd-skel { display: grid; gap: 10px; }
.fd-skel i { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, color-mix(in srgb, var(--color-text) 6%, transparent) 30%, color-mix(in srgb, var(--color-text) 14%, transparent) 50%, color-mix(in srgb, var(--color-text) 6%, transparent) 70%);
  background-size: 300% 100%; animation: fd-shimmer 1.3s linear infinite; }
.fd-skel i:nth-child(1) { width: 70%; height: 22px; } .fd-skel i:nth-child(3) { width: 85%; } .fd-skel i:nth-child(4) { width: 60%; }
@media (prefers-reduced-motion: reduce) { .fd-skel i, .fd-askl-part { animation: none; } }
@media (max-width: 768px) { .fd-askl { height: 56px; padding-left: 18px; } .fd-askl input { font-size: 17px; } .fd-askl button { width: 42px; height: 42px; } .fd-askl-card { padding: var(--space-5); border-radius: 22px; } }
body.front .fd-askl-h { font: var(--weight-semibold) 13px/1.3 var(--font-headings); letter-spacing: var(--tracking-wide); color: var(--color-accent-strong); margin: 0 0 var(--space-2); }
.fd-askl-sources small { font-size: 12px; }

/* ---- D4.9: coverage, as a picture (src/front/constellation.ts) ------------------------------------------------------
   From 900 px the bubbles on the left and the chosen story's details on the right; the stories only one blog covered sit
   apart below. With script only the chosen story's details show (the biggest to start; hover, focus or tap another);
   without it every story's details are listed. */
.fd-constellation:not(.fd-constellation-compact) { display: grid; gap: var(--space-6); margin-top: var(--space-8); }
@media (min-width: 900px) { .fd-constellation:not(.fd-constellation-compact) { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: center; }
  .fd-constellation .fd-bub-legend, .fd-constellation .fd-lone { grid-column: 1 / -1; } }
.fd-bub-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; font: var(--text-sm)/1.4 var(--font-headings); color: var(--color-text-2); }
.fd-bub-legend i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 50%; background: var(--bub); vertical-align: -1px; }
.fd-bub-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.fd-bub-detail { display: grid; gap: var(--space-2); padding: var(--space-5); border-radius: 20px; background: var(--fd-tile); }
.js .fd-constellation:not(.fd-constellation-compact) .fd-bub-list > :not(.is-on) { display: none; }
.js .fd-bub-detail.is-on { animation: fd-rise .35s var(--fd-ease) both; }
.fd-bub-title { font: var(--weight-semibold) 21px/1.3 var(--font-headings); color: var(--color-text); text-decoration: none; }
.fd-bub-title:hover { color: var(--color-accent-strong); text-decoration: underline; }
.fd-bub-meta { font: var(--text-sm)/1.4 var(--font-headings); color: var(--color-text-3); }
.fd-bub-blogs { font: var(--text-sm)/1.6 var(--font-headings); }
.fd-lone { padding-top: var(--space-6); border-top: 1px solid var(--fd-hair); }
.fd-lone-h { margin: 0 0 var(--space-4); font: var(--weight-semibold) 21px/1.3 var(--font-headings); color: var(--color-text); }
.fd-lone-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.fd-lone-list .fd-bub-detail { padding: var(--space-4); border-radius: 16px; }
.fd-lone-list .fd-bub-title { font-size: 16px; }
.js-motion .fd-cov-sec .fd-bubbles.is-in .fd-bub, .js-motion .fd-cov-sec .fd-bub { transition: opacity .5s var(--fd-ease); }
@media (min-width: 900px) {
  .fd-constellation:not(.fd-constellation-compact) .fd-bubbles { grid-column: 1; grid-row: 1; }
  .fd-constellation:not(.fd-constellation-compact) .fd-bub-list { grid-column: 2; grid-row: 1; }
  .fd-constellation:not(.fd-constellation-compact) .fd-bub-legend { grid-row: 2; }
  .fd-constellation:not(.fd-constellation-compact) .fd-lone { grid-row: 3; }
  :root:not(.js) .fd-constellation:not(.fd-constellation-compact) .fd-bub-list { max-height: 460px; overflow-y: auto; }
}

/* ---- D4.10: topics, connect, FAQ -----------------------------------------------------------------------------------
   Topics: ten large tiles, each a line-drawn icon of ours, the name and one line; a grid of five from 1100 px, snap-
   scrolling sideways on phones. Connect: the tabs as a segmented control. */
.fd-ttiles-scroll { max-width: var(--front-max); margin: var(--space-8) auto 0; padding: 0 var(--space-5); }
.fd-ttiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.fd-ttile { display: flex; flex-direction: column; gap: var(--space-2); height: 100%; min-height: 230px; padding: var(--space-6); border-radius: 24px; background: var(--fd-tile);
  color: var(--color-text-2); text-decoration: none; transition: transform .2s var(--fd-ease-out), background-color .2s var(--fd-ease-out); }
:root[data-theme="dark"] .fd-ttile { background: var(--ba-color-slate-900); }
.fd-ttile svg { fill: none; stroke: var(--ba-color-primary); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: var(--space-4); }
.fd-ttile b { font: var(--weight-semibold) 21px/1.2 var(--font-headings); color: var(--color-text); }
.fd-ttile span { font: 15px/1.45 var(--font-headings); }
@media (hover: hover) { .fd-ttile:hover { transform: translateY(-3px); color: var(--color-text-2); } }
@media (max-width: 1100px) { .fd-ttiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .fd-ttiles-scroll { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--space-4); scroll-padding: 0 var(--space-4); }
  .fd-ttiles-scroll::-webkit-scrollbar { display: none; }
  .fd-ttiles { display: flex; width: max-content; gap: var(--space-3); }
  .fd-ttiles > li { width: 64vw; scroll-snap-align: start; }
  .fd-ttile { min-height: 200px; }
}
/* The segmented control. */
body.front .fd-segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; margin: 0 0 var(--space-5); border: 0; border-radius: var(--radius-full); background: var(--fd-tile); }
:root[data-theme="dark"] body.front .fd-segmented { background: var(--ba-color-slate-800); }
body.front .fd-segmented [role="tab"] { padding: 8px 20px; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--color-text-2); font-size: 15px; }
body.front .fd-segmented [role="tab"][aria-selected="true"] { background: var(--color-surface); color: var(--color-text);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--ba-color-slate-950) 18%, transparent); border: 0; }
:root[data-theme="dark"] body.front .fd-segmented [role="tab"][aria-selected="true"] { background: var(--ba-color-slate-600); }
body.front .fd-tabs { padding: var(--space-8); border-radius: 28px; }
.fd-dev-intro { margin: 0 auto; }
body.front .fd-dev-tools { margin-top: var(--space-16); }
#developers { border-top: 1px solid var(--fd-hair); }

/* R1.2: Go Insider, the waitlist (src/insider/page.ts): on / after "How an answer is checked", and at /insider. Three
   perks as her cards, each marked coming soon; one email row; the optional ticks in a wrapping grid. */
.fd-ins .fd-lede.fd-center { margin-left: auto; margin-right: auto; }
.fd-ins-perks { list-style: none; margin: var(--space-8) 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.fd-ins-perks li { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-1); }
body.front .fd-ins-perks h3 { font-size: var(--ba-size-2xl); line-height: var(--ba-leading-7); margin: 0; }
.fd-ins-perks p { margin: 0; color: var(--color-text-2); }
.fd-ins-soon { align-self: flex-start; padding: 2px 10px; border-radius: var(--radius-full); background: var(--color-accent-subtle); color: var(--color-accent-strong);
  font: var(--weight-semibold) var(--text-xs)/1.6 var(--font-headings); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
.fd-ins-form { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-4); }
.fd-ins-price { margin: 0; font: var(--weight-semibold) var(--ba-size-lg)/1.4 var(--font-headings); color: var(--color-text); }
.fd-ins-short .fd-ins-price, .fd-ins-short .fd-ins-more { text-align: center; }
.fd-ins-row { display: flex; gap: var(--space-3); align-items: flex-end; }
.fd-ins-email { flex: 1; display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-text-2); }
.fd-ins-email input { font-size: var(--text-md); padding: 10px 12px; }
.fd-ins-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.fd-ins-set { margin: 0; padding: 0; border: 0; }
.fd-ins-set legend { padding: 0; margin-bottom: var(--space-2); font: var(--weight-semibold) var(--text-md)/1.4 var(--font-headings); color: var(--color-text); }
.fd-ins-set legend span { font-weight: var(--ba-weight-normal); color: var(--color-text-3); }
.fd-ins-boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-2) var(--space-4); }
.fd-ins-boxes label { display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-sm); color: var(--color-text-2); }
.fd-ins-boxes input { width: auto; accent-color: var(--color-button); }
.fd-ins-full { max-width: none; margin: 0; }
.fd-ins-form > .fd-btn { align-self: flex-start; }
.fd-ins-note { margin: 0; }
.fd-ins-more { margin: 0; }
.fd-ins-status { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius); border: 1px solid var(--color-border); }
.fd-ins-ok { background: var(--color-surface); border-color: var(--color-accent-line); border-left: 4px solid var(--color-accent); color: var(--color-text); }
.fd-ins-bad { background: var(--color-surface); border-color: var(--color-border); border-left: 4px solid var(--color-negative); color: var(--color-text); }
@media (max-width: 899px) { .fd-ins-perks { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .fd-ins-row { flex-direction: column; align-items: stretch; } }

/* ---- Topic tiles' live previews (T1.2): beside each tile's icon, a figure, a few words and a mini chart from its
   page's data (public/tools/topic-tiles.js fills them). The box has a fixed height, so a tile is the same size with a
   preview or without one, and the front door's layout doesn't move when they arrive. */
.fd-ttile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); min-height: 60px; }
.fd-ttile-top svg { flex: none; }
.fd-ttile-live { display: grid; grid-template-columns: auto; justify-items: end; align-content: start; gap: 3px; min-width: 0; height: 60px; overflow: hidden; text-align: right; }
.fd-ttile-live .tt-fig { font: 600 15px/1.2 var(--font-mono); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fd-ttile-live .tt-sub { font: 11px/1.25 var(--font-headings); color: var(--color-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fd-ttile-live .tt-bars { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.fd-ttile-live .tt-bars i { display: block; width: 5px; height: var(--h); border-radius: 2px; background: var(--ba-color-primary); opacity: .75; transform-origin: bottom; }
.fd-ttile-live .tt-fig, .fd-ttile-live .tt-sub { transition: opacity .5s ease, transform .5s ease; }
.fd-ttile-live:not(.is-live) .tt-fig, .fd-ttile-live:not(.is-live) .tt-sub { opacity: 0; transform: translateY(4px); }
.fd-ttile-live .tt-bars i { transition: transform .7s cubic-bezier(.2, .8, .2, 1) calc(var(--j, 0) * 60ms + 200ms); }
.fd-ttile-live:not(.is-live) .tt-bars i { transform: scaleY(0); }
@media (prefers-reduced-motion: reduce) { .fd-ttile-live .tt-fig, .fd-ttile-live .tt-sub, .fd-ttile-live .tt-bars i { transition: none; } }