/* Clarity — generated from tokens.json */
:root, [data-theme="light"] {
  --surface: #ffffff; /* Page and slide background. Ground for ink, ink-secondary, link and every signal color. */
  --surface-alt: #f5f6f8; /* Alternate sections, section-divider slides and the ground under surface-raised cards. ink, ink-secondary and link all hold 4.5:1 on it. */
  --surface-raised: #ffffff; /* Cards and tiles sitting on surface-alt. Same text pairs as surface. */
  --stage: #0e1a33; /* Deep navy for title, statement and closing slides in both themes. Text on it is on-stage, on-stage-secondary or ochre. */
  --on-stage: #f3f4f6; /* Text on stage, gradient-meridian, gradient-midnight and scrimmed photos (15.7:1 on stage). */
  --on-stage-secondary: #a9b3c7; /* Supporting text on stage (8.2:1) in both themes. */
  --ink: #111827; /* Primary text and headlines, on surface, surface-alt, surface-raised, every soft tint and any glass. */
  --ink-secondary: #5b6270; /* Supporting copy, captions and axis labels, on surface, surface-alt, surface-raised and every soft tint (5.3:1 at worst). On glass use on-glass-secondary. */
  --hairline: #dfe2e8; /* Dividers, table rules and the edge of tiles in the dark theme. Decorative only. */
  --action: #2453c7; /* Primary button fill, one per view or slide. Label is on-action. */
  --on-action: #ffffff; /* Label and icon on an action fill (6.7:1 light, 5.4:1 dark). */
  --link: #2453c7; /* Inline links and the chevron text link, on surface, surface-alt, surface-raised and every soft tint. */
  --focus-ring: #2f5fd6; /* Keyboard focus: 2px gap in the ground color, then a solid 2px ring. 5.2:1 or better on every surface. */
  --highlight: #2453c7; /* The eyebrow and slide-eyebrow label ("Recommendation", "Chapter 2"). Text on surface, surface-alt and surface-raised. */
  --positive: #1f7a4d; /* Improvement text. Always paired with a + sign or an arrow, since color alone is ambiguous. */
  --negative: #b4372e; /* Decline and risk text. Always paired with a minus sign or an arrow. */
  --navy: #1b2a4a; /* Anchor hue: hero tiles, stage accents, chart context fills. Text on it: on-deep at any size. In the dark theme, edge navy tiles with hairline. */
  --cobalt: #2453c7; /* Signature hue: the one accent per slide, chart highlight, key tile. Text on it: on-deep at any size in light, 24px+ in dark. */
  --steel: #556a8a; /* Quiet blue-gray for secondary tiles, diagrams and slide-eyebrow text. Text on it: on-deep at any size in light, 24px+ in dark. */
  --teal: #1d6a73; /* Second accent for a contrasting workstream or series. Text on it: on-deep at any size in light, 24px+ in dark. */
  --sage: #8fa89a; /* Soft green-gray for calm tiles and diagram zones. Text on it: on-pale at any size. */
  --ochre: #c9a24a; /* Gold accent for the single most important number or word, especially on stage. Text on it: on-pale at any size. As text, on stage only. */
  --clay: #b0614a; /* Warm accent for risk or contrast, used sparingly. Text on it: on-deep at any size in light; on-pale at any size in dark. */
  --plum: #5b3a5a; /* Deep accent for a third workstream or premium moments. Text on it: on-deep at any size. */
  --on-deep: #ffffff; /* White text and glyphs on navy, cobalt, steel, teal, clay and plum fills, at the sizes each hue's note allows. */
  --on-pale: #111827; /* Near-black text and glyphs on sage, ochre and clay (dark theme) fills. */
  --cobalt-soft: #e9eefb; /* Tinted tile or tag ground in the cobalt family. ink, ink-secondary and link all hold 5:1 on it in both themes. */
  --teal-soft: #e5f0f1; /* Tinted tile or tag ground in the teal family. ink, ink-secondary and link all hold 5:1 on it in both themes. */
  --sage-soft: #edf2ef; /* Tinted tile or tag ground in the sage family. ink, ink-secondary and link all hold 5:1 on it in both themes. */
  --ochre-soft: #f8f1e2; /* Tinted tile or tag ground in the ochre family. ink, ink-secondary and link all hold 5:1 on it in both themes. */
  --plum-soft: #f3ecf3; /* Tinted tile or tag ground in the plum family. ink, ink-secondary and link all hold 5:1 on it in both themes. */
  --glass-clear: rgba(255,255,255,0.12); /* Clearest glass for icon buttons over stage, navy gradients or photos. Glyphs and 24px+ text in on-stage. */
  --glass-thin: rgba(255,255,255,0.5); /* Thin frosted glass for toolbars and chips. ink holds 4.8:1 (light) and 7.4:1 (dark) over any brand hue or gradient. */
  --glass-regular: rgba(255,255,255,0.72); /* Default frosted panel. ink holds 9.2:1 (light) and 10.1:1 (dark) over any brand hue or gradient; secondary text is on-glass-secondary. */
  --glass-thick: rgba(255,255,255,0.86); /* Dense glass for long text, sheets and dialogs over photos or busy diagrams. */
  --glass-stroke: rgba(255,255,255,0.6); /* 1px edge on every glass surface. */
  --glass-sheen: rgba(255,255,255,0.8); /* Specular highlight along a glass surface's top edge (used inside shadow-glass). */
  --on-glass: var(--ink); /* Primary text on any glass. Alias of ink. */
  --on-glass-secondary: #3f4655; /* Secondary text on glass-regular and thicker: 4.9:1 (light) and 7.1:1 (dark) at worst over any brand hue or gradient. */
  --scrim: rgba(8,14,28,0.5); /* Navy-tinted darkening layer between a photo and on-stage text. */
  --chart-1: var(--cobalt); /* The series the slide is about. 4.5:1 or better on surface and surface-alt. */
  --chart-2: #9a7419; /* Benchmark or target line, or a second highlighted series. */
  --chart-3: var(--teal); /* Third series. */
  --chart-4: var(--plum); /* Fourth series. */
  --chart-neutral: #868d99; /* Every context series, baselines and ticks. 3:1 or better on surface and surface-alt. */
  --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 12px 32px rgba(0,0,0,0.06); /* Cards and tiles that lift off surface. Most tiles need none. */
  --shadow-glass: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(255,255,255,0.3), 0 8px 32px rgba(14,26,51,0.14); /* Every glass surface: specular top edge, soft bottom rim, ambient lift. */
  --shadow-float: 0 24px 64px rgba(14,26,51,0.18); /* Floating toolbars, menus and the hero glass card on a title slide. */
  --shadow-glow: 0 0 64px rgba(36,83,199,0.28); /* Soft cobalt halo around one featured element per slide or page, typically the glass card on a stat slide. */
}
[data-theme="dark"] {
  --surface: #0b0d12;
  --surface-alt: #12151c;
  --surface-raised: #181c25;
  --stage: #0e1a33;
  --on-stage: #f3f4f6;
  --on-stage-secondary: #a9b3c7;
  --ink: #f3f4f6;
  --ink-secondary: #a3a9b5;
  --hairline: #2a2f3a;
  --action: #3563d8;
  --on-action: #ffffff;
  --link: #8aa8ff;
  --focus-ring: #8aa8ff;
  --highlight: #8aa8ff;
  --positive: #5cc08a;
  --negative: #f07a6e;
  --navy: #2a3d66;
  --cobalt: #4a78e8;
  --steel: #7088ab;
  --teal: #2f8f99;
  --sage: #8fae9d;
  --ochre: #d6b25c;
  --clay: #c97a60;
  --plum: #8a5c88;
  --on-deep: #ffffff;
  --on-pale: #111827;
  --cobalt-soft: #16223f;
  --teal-soft: #0f2a2d;
  --sage-soft: #18231d;
  --ochre-soft: #2e2412;
  --plum-soft: #2a1b2a;
  --glass-clear: rgba(255,255,255,0.08);
  --glass-thin: rgba(14,22,40,0.45);
  --glass-regular: rgba(14,22,40,0.64);
  --glass-thick: rgba(14,22,40,0.8);
  --glass-stroke: rgba(255,255,255,0.12);
  --glass-sheen: rgba(255,255,255,0.2);
  --on-glass: var(--ink);
  --on-glass-secondary: #c9cfdb;
  --scrim: rgba(8,14,28,0.6);
  --chart-1: var(--cobalt);
  --chart-2: var(--ochre);
  --chart-3: var(--teal);
  --chart-4: var(--plum);
  --chart-neutral: #8a919c;
  --shadow-card: 0 12px 32px rgba(0,0,0,0.5);
  --shadow-glass: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 0 rgba(255,255,255,0.06), 0 12px 40px rgba(0,0,0,0.5);
  --shadow-float: 0 24px 64px rgba(0,0,0,0.6);
}
:root {
  --space-1: 4px; /* Icon-to-label gap, hairline offsets. */
  --space-2: 8px; /* Tag padding, tight stacks. */
  --space-3: 12px; /* Bento gutter at UI scale; button icon gap. */
  --space-4: 16px; /* Card inner gaps, list rows. */
  --space-5: 24px; /* Card padding at UI scale; bento gutter on slides. */
  --space-6: 32px; /* Glass panel padding; between headline and body. */
  --space-7: 48px; /* Between content groups; slide tile padding. */
  --space-8: 64px; /* Section padding at UI scale; slide stack gap. */
  --space-9: 96px; /* Slide top and bottom margin. */
  --space-10: 128px; /* Slide left and right margin. */
  --space-11: 160px; /* Page section padding on wide screens; breathing room above a hero. */
  --radius-xs: 4px; /* Tags and small chips. */
  --radius-sm: 6px; /* Inputs, small tiles, chart tooltips. */
  --radius-md: 10px; /* Cards and glass panels at UI scale. */
  --radius-lg: 16px; /* Bento tiles and large glass at UI scale; images on slides. */
  --radius-xl: 24px; /* Bento tiles and glass cards on 1920x1080 slides. */
  --radius-pill: 999px; /* Buttons, segmented controls, glass toolbars, tags that hold one word. */
  --gradient-meridian: linear-gradient(135deg, #0e1a33 0%, #1b2a4a 50%, #2453c7 100%); /* Signature gradient: title slides, hero tiles, the color behind glass. */
  --gradient-tide: linear-gradient(135deg, #0e1a33 0%, #1b2a4a 40%, #1d6a73 100%); /* A second deep gradient for a contrasting chapter or workstream. */
  --gradient-dusk: linear-gradient(135deg, #0e1a33 0%, #5b3a5a 65%, #b0614a 100%); /* Warm deep gradient for closing or vision slides. One per deck. */
  --gradient-midnight: linear-gradient(160deg, #070b14 0%, #0e1a33 60%, #1b2a4a 100%); /* Near-black navy depth for statement slides. */
  --gradient-halo: radial-gradient(circle at 50% 50%, #4a78e8 0%, #2453c7 30%, #1b2a4a 65%, #0e1a33 100%); /* A single soft light source on stage and navy gradients, behind one glass card. */
  --gradient-mist: linear-gradient(160deg, #ffffff 0%, #f5f6f8 55%, #e9eefb 100%); /* Barely-there light gradient for section slides and page heroes. Light theme only; the dark theme uses surface-alt. */
  --gradient-glow: radial-gradient(circle at 50% 50%, rgba(74,120,232,0.55) 0%, rgba(36,83,199,0.22) 45%, rgba(36,83,199,0) 70%); /* Soft cobalt light that fades to nothing: behind glass on surface or surface-alt, in either theme. */
  --gradient-sheen: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 60%); /* Overlay inside a glass surface's top half: the reflection. Full strength in light, 30% opacity in dark. */
  --backdrop-clear: blur(8px) saturate(180%); /* backdrop-filter for glass-clear. */
  --backdrop-thin: blur(16px) saturate(170%); /* backdrop-filter for glass-thin. */
  --backdrop-regular: blur(28px) saturate(180%); /* backdrop-filter for glass-regular, the default. */
  --backdrop-thick: blur(44px) saturate(200%); /* backdrop-filter for glass-thick. */
  --opacity-disabled: 0.35; /* Disabled controls and unavailable options. */
  --opacity-muted: 0.6; /* Secondary icons and inactive tabs. */
  --opacity-image-dim: 0.72; /* Photo under on-stage text when no scrim is used. */
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-serif: Newsreader, "New York", Georgia, "Times New Roman", serif;
  --text-slide-hero: 600 136px/132px var(--font-sans); /* Title-slide headline, two lines at most. */
  --text-slide-title: 600 80px/88px var(--font-sans); /* Headline on every content slide. Eight words or fewer. */
  --text-slide-subtitle: 500 44px/54px var(--font-sans); /* One supporting line under slide-title or slide-hero. */
  --text-slide-body: 400 32px/44px var(--font-sans); /* Body copy on slides. Thirty words per slide, tops. */
  --text-slide-stat: 600 220px/208px var(--font-sans); /* The one number a stat slide exists for. */
  --text-slide-eyebrow: 600 28px/32px var(--font-sans); /* Kicker above slide-title, in highlight, or in steel, teal or plum. */
  --text-slide-caption: 400 24px/32px var(--font-sans); /* Sources, footnotes, chart labels on slides. */
  --text-display: 600 64px/68px var(--font-sans); /* Page hero headline. */
  --text-title-1: 600 48px/52px var(--font-sans); /* Section headline. */
  --text-title-2: 600 32px/38px var(--font-sans); /* Card and tile headline. */
  --text-headline: 600 21px/28px var(--font-sans); /* Lead-ins, list titles, emphasized first lines. */
  --text-body: 400 17px/26px var(--font-sans); /* Default reading text. */
  --text-callout: 400 15px/22px var(--font-sans); /* Secondary copy in cards, table cells. */
  --text-eyebrow: 600 14px/18px var(--font-sans); /* Kicker above a headline, in highlight. */
  --text-caption: 500 12px/16px var(--font-sans); /* Legal, footnotes, image credits. */
  --text-slide-quote: italic 400 72px/84px var(--font-serif); /* Customer or founder quote on a slide. */
  --text-quote: italic 400 32px/42px var(--font-serif); /* Pull quote on pages and in tiles. */
}
.slide-hero {
  font-family: var(--font-sans);
  font-size: 136px;
  line-height: 132px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variation-settings: 'opsz' 32;
}
.slide-title {
  font-family: var(--font-sans);
  font-size: 80px;
  line-height: 88px;
  font-weight: 600;
  letter-spacing: -0.025em;
  font-variation-settings: 'opsz' 32;
}
.slide-subtitle {
  font-family: var(--font-sans);
  font-size: 44px;
  line-height: 54px;
  font-weight: 500;
  letter-spacing: -0.015em;
  font-variation-settings: 'opsz' 32;
}
.slide-body {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 44px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.slide-stat {
  font-family: var(--font-sans);
  font-size: 220px;
  line-height: 208px;
  font-weight: 600;
  letter-spacing: -0.04em;
  font-variation-settings: 'opsz' 32;
}
.slide-eyebrow {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.slide-caption {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: 0;
}
.display {
  font-family: var(--font-sans);
  font-size: 64px;
  line-height: 68px;
  font-weight: 600;
  letter-spacing: -0.025em;
  font-variation-settings: 'opsz' 32;
}
.title-1 {
  font-family: var(--font-sans);
  font-size: 48px;
  line-height: 52px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 32;
}
.title-2 {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 38px;
  font-weight: 600;
  letter-spacing: -0.015em;
  font-variation-settings: 'opsz' 28;
}
.headline {
  font-family: var(--font-sans);
  font-size: 21px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.callout {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: 0;
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0;
}
.caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.slide-quote {
  font-family: var(--font-serif);
  font-size: 72px;
  line-height: 84px;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-style: italic;
  font-variation-settings: 'opsz' 72;
}
.quote {
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 42px;
  font-weight: 400;
  letter-spacing: 0;
  font-style: italic;
  font-variation-settings: 'opsz' 36;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/Newsreader-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/Newsreader-Variable-Italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}