/* HeyFable design tokens, generated from tokens.json. Fonts: https://fonts.googleapis.com/css2?family=Sora:wght@500;600&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap */
:root {
  --surface-000: #ffffff;
  --surface-100: #f6f7f9;
  --surface-200: #eceff3;
  --line-100: #e1e4ea;
  --line-200: #7f8799;
  --ink-900: #0a0c12;
  --ink-600: #434a58;
  --ink-500: #5f6778;
  --brand-500: #2438ff;
  --brand-600: #1a2ad6;
  --brand-100: #e9ecff;
  --on-brand: #ffffff;
  --volt-400: #d6ff3d;
  --on-volt: #0a0c12;
  --ember-500: #ff5b1a;
  --on-ember: #0a0c12;
  --success-600: #067a4f;
  --warning-600: #9a5200;
  --danger-600: #c8261c;
  --focus-ring: var(--brand-500);
  --chart-1: var(--brand-500);
  --chart-2: #ff5b1a;
  --chart-3: #0a0c12;
  --chart-4: #0b7f7a;
  --chart-5: #7f8799;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(10,12,18,0.06);
  --shadow-2: 0 4px 12px -2px rgba(10,12,18,0.08), 0 2px 4px rgba(10,12,18,0.04);
  --shadow-3: 0 24px 48px -12px rgba(10,12,18,0.18);
  --shadow-glow: 0 0 0 1px rgba(36,56,255,0.2), 0 12px 32px -8px rgba(36,56,255,0.45);
  --container-max: 1200px;
  --container-text: 680px;
  --grid-columns: 12;
  --grid-gutter: 24px;
  --slide-width: 1920px;
  --slide-height: 1080px;
  --slide-margin: 120px;
  --font-display: "Sora", "Geist", system-ui, sans-serif;
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
[data-theme="dark"] {
  --surface-000: #12151c;
  --surface-100: #0a0c11;
  --surface-200: #1b1f28;
  --line-100: #262b36;
  --line-200: #6a7386;
  --ink-900: #f3f5f9;
  --ink-600: #b7bdc9;
  --ink-500: #9199a8;
  --brand-500: #6f7dff;
  --brand-600: #8e99ff;
  --brand-100: #1a1f45;
  --on-brand: #0a0c12;
  --ember-500: #ff7a42;
  --success-600: #3ccf8e;
  --warning-600: #f2a33a;
  --danger-600: #ff6b5e;
  --chart-2: #ff7a42;
  --chart-3: #f3f5f9;
  --chart-4: #35c9c0;
  --chart-5: #6a7386;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-2: 0 4px 12px -2px rgba(0,0,0,0.6);
  --shadow-3: 0 24px 48px -12px rgba(0,0,0,0.7);
  --shadow-glow: 0 0 0 1px rgba(111,125,255,0.35), 0 12px 40px -6px rgba(111,125,255,0.5);
}

.display-2xl { font-family: var(--font-display); font-size: 96px; line-height: 0.96; font-weight: 600; letter-spacing: -0.045em; }
.display-xl { font-family: var(--font-display); font-size: 72px; line-height: 1; font-weight: 600; letter-spacing: -0.04em; }
.display-lg { font-family: var(--font-display); font-size: 56px; line-height: 1.04; font-weight: 600; letter-spacing: -0.035em; }
.heading-1 { font-family: var(--font-display); font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; }
.heading-2 { font-family: var(--font-display); font-size: 32px; line-height: 1.15; font-weight: 600; letter-spacing: -0.025em; }
.heading-3 { font-family: var(--font-display); font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; }
.heading-4 { font-family: var(--font-sans); font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; }
.body-lg { font-family: var(--font-sans); font-size: 18px; line-height: 1.6; font-weight: 400; letter-spacing: -0.005em; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 1.55; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 14px; line-height: 1.3; font-weight: 500; }
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 1.4; font-weight: 400; }
.eyebrow { font-family: var(--font-mono); font-size: 12px; line-height: 1.3; font-weight: 500; letter-spacing: 0.12em; }
.code { font-family: var(--font-mono); font-size: 14px; line-height: 1.6; font-weight: 400; }
.data { font-family: var(--font-mono); font-size: 14px; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; }
.slide-hero { font-family: var(--font-display); font-size: 144px; line-height: 0.94; font-weight: 600; letter-spacing: -0.05em; }
.slide-stat { font-family: var(--font-display); font-size: 200px; line-height: 0.9; font-weight: 500; letter-spacing: -0.06em; }
.slide-title { font-family: var(--font-display); font-size: 72px; line-height: 1.02; font-weight: 600; letter-spacing: -0.035em; }
.slide-subtitle { font-family: var(--font-sans); font-size: 36px; line-height: 1.25; font-weight: 400; letter-spacing: -0.015em; }
.slide-body { font-family: var(--font-sans); font-size: 28px; line-height: 1.4; font-weight: 400; }
.slide-label { font-family: var(--font-mono); font-size: 20px; line-height: 1.3; font-weight: 500; letter-spacing: 0.12em; }

/* ------------------------------------------------------------------
   Site-only tokens (not in the design system). Add new ones here,
   never inline. Everything above this line is a copy of
   content/design-system/tokens.css; regenerate it, don't hand-edit.
   ------------------------------------------------------------------ */
:root {
  /* Motion: brand durations and easing */
  --duration-hover: 160ms;
  --duration-panel: 240ms;
  --duration-reveal: 480ms;
  --stagger: 90ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --press-offset: 1px;

  /* Layout */
  --nav-height: 64px;
  --section-space: var(--space-9);
  --hero-copy-max: 560px;

  /* Texture: the working-surface dot grid behind the Account Point of View card, and a fine grain */
  --dot-size: 1.5px;
  --dot-gap: 16px;
  --dot-color: rgba(36, 56, 255, 0.18);
  --dot-grid: radial-gradient(circle, var(--dot-color) var(--dot-size), transparent calc(var(--dot-size) + 0.5px));
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.04 0 0 0 0 0.05 0 0 0 0 0.07 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Source chip: the citation that pins every POV sentence to its source */
  --chip-height: 28px;
  --chip-tag-bg: var(--brand-100);
  --chip-tag-ink: var(--brand-500);

  /* Hairline width for connectors and borders */
  --hairline: 1px;
  --focus-width: 2px;
  --focus-offset: 2px;
}
[data-theme="dark"] {
  --dot-color: rgba(111, 125, 255, 0.22);
}
@media (max-width: 767px) {
  :root { --section-space: var(--space-8); }
}

/* Hero: Account Point of View build sequence (site-only) */
:root {
  --load-offset: 400ms;      /* hero copy settles before the card starts */
  --stage-gap: 1100ms;       /* time between the four stages */
  --stage-start: 700ms;      /* when stage 1 begins */
  --rail-width: 2px;
  --fact-id-size: 24px;
}

/* Proof strip calendar (site-only) */
:root {
  --cal-min: 760px;
  --cal-row: 48px;
  --cal-label: 200px;
  --mark-size: 10px;
  --cal-step: 220ms;   /* proof calendar: the scan line crosses one quarter column per step */
  --cal-beam-glow: 0 0 16px 2px rgba(36, 56, 255, 0.5), -48px 0 64px -16px rgba(36, 56, 255, 0.2);
  --cal-ring: rgba(36, 56, 255, 0.5);
  /* The rule band showpiece: sources gather into one citation, guesses are struck out */
  --swarm-step: 40ms;     /* gap between fragments arriving */
  --swarm-hold: 900ms;    /* how long the pile sits before it resolves */
  --swarm-fly: 700ms;     /* sourced fragment flies into the citation */
  --swarm-land: 2300ms;   /* when the sentence and its citation land */
}

/* Hero film (site-only) */
:root {
  --film-min-h: 720px;     /* the hero stage: the film plays here, then the sign-up takes it over */
  --film-max-h: 860px;
  --film-card-w: 800px;
  --film-card-h: 600px;
  --film-label: 132px;     /* label column in the knowledge base rows */
  --film-dial: 56px;       /* "areas covered" ring */
  --film-icon: 24px;       /* stage status ring */
  --film-bar: 10px;        /* compare bars */
}
@media (max-width: 767px) {
  :root { --film-min-h: 0px; --film-card-h: 540px; --film-label: 96px; --film-dial: 44px; }
}
:root {
  /* The film's cards float over the light hero: a deep drop shadow and a faint Cobalt edge, as in the design piece */
  --film-shadow: 0 40px 100px -40px rgba(10, 12, 18, 0.22), 0 0 0 1px var(--line-100);
  --film-beam: 900ms;      /* the scan line that crosses each knowledge base panel as it drafts */
  --glow-shine: #8e99ff;   /* the light band that crosses the Cobalt headline words */
  --glow-halo: 0 0 18px rgba(36, 56, 255, 0.35);     /* Cobalt glow on large blue text and the logo */
  --glow-halo-sm: 0 0 8px rgba(36, 56, 255, 0.35);   /* the same glow, tighter, for small blue labels */
  --glow-sweep: 1600ms;
  --volt-edge: rgba(10, 12, 18, 0.08);                /* hairline that keeps Volt buttons crisp on light surfaces */
  --glow-volt: 0 0 0 4px rgba(214, 255, 61, 0.35), 0 0 28px 6px rgba(214, 255, 61, 0.7), 0 10px 28px -8px rgba(120, 150, 0, 0.45);  /* Volt glow on hover */
}