/*
 * Self-hosted variable fonts (SIL Open Font License 1.1), latin subset — no third-party requests.
 * Source: @fontsource-variable/{unbounded,inter,jetbrains-mono}@5.3.0.
 */
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("/fonts/unbounded-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * 1900.agency design tokens — see DESIGN_SYSTEM.md.
 * Components consume these variables only; no raw colour values in components.
 *
 * Themes: dark is the default (also without JavaScript). `src/client/theme.js` runs before the
 * first paint and sets `data-theme="light" | "dark"` on <html> from the visitor's choice (Auto
 * follows prefers-color-scheme). A section that must stay a dark stage in both themes (video,
 * 3D scene, the split-flap board) sets `data-theme="dark"` on itself: the dark block below
 * re-scopes every colour token inside it.
 */

:root {
  /*
   * Materials — physical objects drawn in CSS (the metal member card, its gold chip, the
   * split-flap board, paper flyers and tickets, video scrims). Identical in both themes: an
   * object keeps its colour, only the room around it changes.
   */
  --material-black: #000000;
  --material-white: #ffffff;
  --material-ink: #0b0b0d;
  --material-paper: #f4f2ec;
  --material-paper-edge: #e2ddd0;
  --material-paper-muted: #5c5a63;
  --material-metal-hi: #34343c;
  --material-metal-mid: #17171c;
  --material-metal-lo: #07070a;
  --material-flap-top: #23232a;
  --material-flap-bottom: #1b1b21;
  --material-gold-hi: #f7dc8a;
  --material-gold-mid: #b8892e;
  --material-gold-lo: #f1d27a;
  --material-holo-blue: #5abeff;
  --material-paper-used: #f6e3c4;
  --material-stamp: #b5452a;
  --material-forest: #0f1a14;
  --material-bronze-hi: #2a2620;
  --material-bronze-lo: #15130f;
  --material-bronze-lit-hi: #3a3226;
  --material-bronze-lit-lo: #1f1a13;
  --material-brass: #e8c58a;
  --material-brass-bright: #f2d39b;
  --material-brass-muted: #c9ae80;
  --material-lid-hi: #2c2c33;
  --material-lid-mid: #141418;
  --material-lid-lo: #070709;
  --material-phone-hi: #26262d;
  --material-phone-lo: #0d0d10;

  /* Brand primitives — the IMPACT shot label; for glows and object accents, never for text. */
  --brand-gold: #f6b81a;
  --brand-orange: #f0a33a;
  --brand-rust: #e0703f;
  --brand-rose: #c8607a;
  --brand-violet: #9b3f96;
  --brand-violet-light: #b45fae;
}

:root,
[data-theme="dark"] {
  color-scheme: dark;

  --color-canvas: #0b0b0d;
  --color-surface: #141418;
  --color-surface-raised: #1c1c22;
  --color-line: #2a2a33;
  --color-text: #f4f2ec;
  --color-text-muted: #a3a1aa;
  --color-text-faint: #8a8892;
  --color-signal: #ff5a1f;
  --color-signal-hover: #ff7340;
  --color-signal-ink: #0b0b0d;
  --color-ultra: #8b5cf6;
  --color-success: #2bd97c;
  --color-warning: #ffb020;
  --color-danger: #ff4d5e;

  /*
   * Signal gradient — sampled from the IMPACT shot label (gold → orange → rust → violet); the
   * violet end is lightened to #b45fae so every stop keeps at least 4.5:1 on the canvas. For
   * accent text only (titles' <em>, big numerals), never body text. --color-gradient-fallback is
   * the solid colour used where background-clip: text is unsupported (and what checkers read).
   */
  --gradient-signal: linear-gradient(100deg, #f6b81a 0%, #f0a33a 24%, #e0703f 52%, #c8607a 74%, #b45fae 100%);
  --color-gradient-fallback: #f0a33a;
  --color-gradient-start: #f6b81a;
  --color-gradient-mid: #e0703f;
  --color-gradient-end: #b45fae;
}

/*
 * Light — designed, not inverted: a warm off-white room, white paper surfaces, near-black ink,
 * the signal deepened to #c2410c and a gradient darkened stop by stop (amber → rust → plum →
 * violet) so every stop keeps 4.5:1 on every surface. Checked by scripts/check-contrast.ts.
 */
[data-theme="light"] {
  color-scheme: light;

  --color-canvas: #f6f4ef;
  --color-surface: #fdfcf9;
  --color-surface-raised: #ffffff;
  --color-line: #e2ddd2;
  --color-text: #141418;
  --color-text-muted: #55535c;
  --color-text-faint: #68666f;
  --color-signal: #c2410c;
  --color-signal-hover: #a8360a;
  --color-signal-ink: #ffffff;
  --color-ultra: #6d3fe0;
  --color-success: #0e7a42;
  --color-warning: #8f5a00;
  --color-danger: #c21f33;

  --gradient-signal: linear-gradient(100deg, #a15c00 0%, #b8410c 40%, #9b2f6e 72%, #7a34a8 100%);
  --color-gradient-fallback: #b8410c;
  --color-gradient-start: #a15c00;
  --color-gradient-mid: #b8410c;
  --color-gradient-end: #7a34a8;
}

/*
 * Elevation belongs to the room, not to the object: these are set on <html> only, so a dark
 * stage inside the light page still casts the light page's soft, warm shadows.
 */
:root {
  --shadow-pop: 0 12px 32px -8px rgb(0 0 0 / 0.55);
  --shadow-panel: 0 40px 90px -40px #000000;
  --shadow-stage: 0 2.5em 5em -2.5em #000000;
  --shadow-soft: 0 6px 16px -4px rgb(0 0 0 / 0.7);
}

:root[data-theme="light"] {
  --shadow-pop: 0 12px 32px -10px rgb(60 44 20 / 0.22);
  --shadow-panel: 0 40px 80px -44px rgb(60 44 20 / 0.34);
  --shadow-stage: 0 2.5em 5em -2.8em rgb(60 44 20 / 0.34);
  --shadow-soft: 0 6px 16px -6px rgb(60 44 20 / 0.28);
}

:root {
  /* Typography */
  --font-display: "Unbounded", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.375rem, 1.3rem + 0.3vw, 1.5rem);
  --text-2xl: clamp(1.75rem, 1.55rem + 0.9vw, 2.125rem);
  --text-3xl: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
  --text-display: clamp(3rem, 2rem + 4.5vw, 6rem);

  --leading-tight: 0.95;
  --leading-snug: 1.15;
  --leading-normal: 1.5;
  --tracking-display: -0.02em;

  /* Space (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Layout */
  --content-max: 1200px;
  --reading-max: 68ch;
  --gutter: 16px;
  --touch-min: 44px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 420ms;

  /* Focus */
  --focus-offset: 2px;
}

/* Resolved in every theme scope, so focus inside a dark stage uses that stage's signal. */
:root,
[data-theme] {
  --focus-ring: 2px solid var(--color-signal);
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}

/*
 * The theme menu (« mode jour / nuit ») and the toggle fade. Shared by the site and the
 * presentation; state comes from `src/client/theme.js` (data-theme, data-theme-choice on <html>).
 */

/* A dark stage inside the light page (data-theme="dark" on a section) re-reads its ink. */
[data-theme] {
  color: var(--color-text);
}

/* The colour fade runs only while the visitor changes the theme, never on load (theme.js skips
   it under reduced motion). */
.theme-fade,
.theme-fade *,
.theme-fade *::before,
.theme-fade *::after {
  transition:
    background-color 200ms var(--ease-out),
    border-color 200ms var(--ease-out),
    color 200ms var(--ease-out),
    fill 200ms var(--ease-out),
    stroke 200ms var(--ease-out) !important;
}

.theme-switch {
  position: relative;
  display: inline-flex;
}

.theme-switch[hidden] {
  display: none;
}

.theme-switch-button {
  display: inline-grid;
  place-items: center;
  width: var(--touch-min);
  height: var(--touch-min);
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.theme-switch-button:hover,
.theme-switch-button[aria-expanded="true"] {
  color: var(--color-text);
}

.theme-switch-button:focus-visible,
.theme-option:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* One glyph for the current choice: half disc (Auto), sun (light), moon (dark). */
.theme-icon {
  grid-area: 1 / 1;
  display: none;
}

:root:not([data-theme-choice]) .theme-icon-auto,
[data-theme-choice="auto"] .theme-icon-auto,
[data-theme-choice="light"] .theme-icon-light,
[data-theme-choice="dark"] .theme-icon-dark {
  display: block;
}

.theme-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 60;
  display: grid;
  min-width: 10rem;
  padding: var(--space-1);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-pop);
}

.theme-menu[hidden] {
  display: none;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch-min);
  padding-inline: var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  text-align: start;
  cursor: pointer;
}

.theme-option:hover {
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
}

.theme-option[aria-checked="true"] {
  color: var(--color-signal);
  font-weight: 600;
}

.theme-option[aria-checked="true"]::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  margin-inline-start: auto;
  border-radius: var(--radius-pill);
  background: currentColor;
}

.theme-option:any-link {
  text-decoration: none;
}

/* The header's language link joins the menu only where the header has no room for it. */
.theme-menu-language {
  display: none;
  border-top: 1px solid var(--color-line);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/*
 * The 1900.agency presentation (/presentation/). Tokens come from tokens.css.
 *
 * Two layouts, one markup:
 * - Flow (base, phones and portrait screens): every slide is one screen of a vertical scroll.
 * - Stage (landscape, ≥ 761×501): a 1600×900 canvas scaled to the window by deck.js; one slide at
 *   a time. Sizes are in em of the stage's font-size, so the same rules serve both layouts.
 * Keep the stage media query in sync with STAGE_QUERY in src/client/deck.js.
 */

:root,
[data-theme] {
  /* Re-mixed in every theme scope, so a dark stage inside the light deck gets dark mixes. */
  --deck-line-strong: color-mix(in srgb, var(--color-text) 22%, transparent);
  --deck-signal-soft: color-mix(in srgb, var(--color-signal) 16%, transparent);
  --deck-ultra-soft: color-mix(in srgb, var(--color-ultra) 18%, transparent);
}

:root {
  --deck-top-height: 56px;
  --deck-nav-height: 72px;
  --deck-notes-height: 0px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--color-canvas);
  scroll-snap-type: y proximity;
}

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

p,
h1,
h2,
ol,
ul,
dl,
dd,
figure {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
}

.icon-flip {
  transform: scaleX(-1);
}

/* Accent text: the signal gradient, solid fallback first. */
.slide-title em,
.text-gradient {
  font-style: normal;
  color: var(--color-gradient-fallback);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .slide-title em,
  .text-gradient {
    background: var(--gradient-signal);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}

/* ── Chrome: top bar, navigation, notes ────────────────────────────────────────────────────── */

.deck-top {
  position: fixed;
  z-index: 20;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  height: calc(var(--deck-top-height) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--gutter) 0;
  background: color-mix(in srgb, var(--color-canvas) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--color-line) 70%, transparent);
}

.deck-home {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  text-decoration: none;
}

.deck-brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.deck-brand-domain {
  color: var(--color-signal);
}

.deck-count {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.deck-count-total {
  color: var(--color-text-faint);
}

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

.deck-icon-button,
.deck-language,
.deck-arrow {
  display: inline-grid;
  place-items: center;
  width: var(--touch-min);
  height: var(--touch-min);
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  color: var(--color-text);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}

.deck-language {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.deck-icon-button:hover,
.deck-language:hover,
.deck-arrow:hover {
  border-color: var(--deck-line-strong);
  background: var(--color-surface-raised);
}

.deck-icon-button[aria-pressed="true"] {
  border-color: var(--color-signal);
  color: var(--color-signal);
}

/* Notes and full screen only make sense on the stage. */
.deck-icon-button {
  display: none;
}

.deck-nav {
  display: none;
}

.deck-notes {
  display: none;
}

/* ── Slides (flow layout) ───────────────────────────────────────────────────────────────────── */

.deck-viewport {
  display: block;
}

.deck-stage {
  font-size: 16px;
}

.slide {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding: calc(var(--deck-top-height) + env(safe-area-inset-top) + var(--space-8)) var(--gutter) var(--space-12);
  overflow: hidden;
  isolation: isolate;
  scroll-snap-align: start;
  border-bottom: 1px solid var(--color-line);
}

.slide::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 100% 0%, color-mix(in srgb, var(--color-signal) 13%, transparent), transparent 70%),
    radial-gradient(55% 45% at 0% 100%, color-mix(in srgb, var(--color-ultra) 12%, transparent), transparent 70%);
}

.slide-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.75em;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.slide-notes {
  display: none;
}

.slide-kicker {
  display: flex;
  align-items: center;
  gap: 0.75em;
  font-family: var(--font-mono);
  font-size: 0.75em;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.slide-kicker::before {
  content: "";
  flex: none;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--color-signal);
  box-shadow: 0 0 0 0.35em var(--deck-signal-soft);
}

.slide-title {
  margin-top: 0.5em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.05em;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.slide-title-hero {
  font-size: 2.6em;
  line-height: 1;
}

.slide-lead {
  max-width: 34em;
  font-size: 1.125em;
  line-height: 1.5;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.slide-note,
.figure-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  font-size: 0.8125em;
  line-height: 1.45;
  color: var(--color-text-faint);
}

.slide-note .icon,
.figure-note .icon {
  width: 1.15em;
  height: 1.15em;
  margin-top: 0.1em;
}

.deck-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.35em 0.8em;
  border: 1px solid color-mix(in srgb, var(--material-white) 30%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--material-ink) 60%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 0.6875em;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
}

.split {
  display: grid;
  gap: 2em;
  align-items: center;
}

.split-copy {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

/* Hook */
.hook {
  position: relative;
  display: grid;
  gap: 1.5em;
}

.hook-numeral {
  display: flex;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 7.5em;
  line-height: 0.85;
  letter-spacing: -0.06em;
}

.hook-numeral span {
  display: inline-block;
  color: transparent;
  -webkit-text-stroke: 2px var(--color-gradient-start);
}

.hook-numeral span:nth-child(2) {
  -webkit-text-stroke-color: var(--brand-orange);
}

.hook-numeral span:nth-child(3) {
  -webkit-text-stroke-color: var(--brand-rose);
}

.hook-numeral span:nth-child(4) {
  -webkit-text-stroke-color: var(--color-gradient-end);
}

.hook-copy {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.hook-lead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25em;
  color: var(--color-text);
}

.hook-hint {
  font-family: var(--font-mono);
  font-size: 0.75em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.hint-keys {
  display: none;
}

/* Club */
.pillars {
  display: grid;
  gap: 0.75em;
}

.pillar {
  display: grid;
  gap: 0.35em;
  padding: 1.1em 1.25em;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface-raised) 90%, transparent), color-mix(in srgb, var(--color-surface) 70%, transparent));
}

.pillar-index,
.bonus-index {
  font-family: var(--font-mono);
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-gradient-fallback);
}

.pillar strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125em;
  letter-spacing: -0.01em;
}

.pillar span:last-child {
  color: var(--color-text-muted);
}

.club-bonuses {
  font-size: 1em;
  color: var(--color-text-muted);
}

.club-bonuses strong {
  color: var(--color-text);
}

/* Feature lists */
.feature-list,
.numbered,
.offer-points {
  display: grid;
  gap: 0.9em;
}

.feature-list li,
.offer-points li {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
}

.feature-list .icon,
.offer-points .icon {
  margin-top: 0.15em;
  color: var(--color-signal);
}

.feature-list strong {
  display: block;
  font-weight: 600;
  font-size: 1.0625em;
}

.feature-list small {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.9375em;
}

/* Studio formats */
.formats {
  position: relative;
  height: 22em;
}

.format {
  position: absolute;
  overflow: hidden;
  border: 1px solid var(--deck-line-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 1.5em 3em -1.5em color-mix(in srgb, var(--material-black) 90%, transparent);
}

.format img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.format b {
  position: absolute;
  left: 0.6em;
  bottom: 0.6em;
  padding: 0.25em 0.6em;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--material-ink) 80%, transparent);
  font-family: var(--font-mono);
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.format-wide {
  left: 0;
  top: 0;
  width: 72%;
  aspect-ratio: 16 / 9;
}

.format-wide img {
  object-position: 50% 30%;
}

.format-tall {
  right: 0;
  top: 8%;
  height: 84%;
  aspect-ratio: 9 / 16;
  z-index: 2;
}

.format-square {
  left: 18%;
  bottom: 0;
  width: 34%;
  aspect-ratio: 1;
  z-index: 1;
}

.edit-bubble {
  position: absolute;
  z-index: 3;
  right: 4%;
  bottom: -0.5em;
  display: grid;
  gap: 0.3em;
  max-width: 17em;
  padding: 0.9em 1.1em;
  border: 1px solid var(--deck-line-strong);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface-raised) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-pop);
  font-size: 0.875em;
}

.edit-bubble small {
  font-family: var(--font-mono);
  font-size: 0.75em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.edit-bubble em {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-style: normal;
  font-weight: 600;
  color: var(--color-success);
}

/* Examples: the reel of real videos */
.reel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 72%;
  gap: 0.75em;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

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

.reel-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--deck-line-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  scroll-snap-align: center;
  box-shadow: 0 2em 4em -2em color-mix(in srgb, var(--material-black) 90%, transparent);
}

.reel-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reel-tag {
  position: absolute;
  top: 0.75em;
  left: 0.75em;
}

.reel-meta {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  gap: 0.15em;
  padding: 2.5em 1em 0.9em;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--material-ink) 92%, transparent));
}

.reel-meta strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625em;
}

.reel-meta small {
  color: color-mix(in srgb, var(--material-paper) 80%, transparent);
}

/* Panels */
.ticket,
.credit-meter {
  display: grid;
  gap: 1em;
  padding: 1.25em;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--color-surface-raised), var(--color-surface));
  box-shadow: 0 2.5em 5em -2.5em color-mix(in srgb, var(--material-black) 95%, transparent), inset 0 1px 0 color-mix(in srgb, var(--material-white) 5%, transparent);
}

/* Prospecting */
.audiences {
  display: grid;
  gap: 0.75em;
}

.audience {
  display: grid;
  gap: 0.25em;
  padding: 1em 1.15em;
  border: 1px solid color-mix(in srgb, var(--color-signal) 40%, var(--color-line));
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--deck-signal-soft), transparent 70%);
}

.audience-ultra {
  border-color: color-mix(in srgb, var(--color-ultra) 45%, var(--color-line));
  background: linear-gradient(135deg, var(--deck-ultra-soft), transparent 70%);
}

.audience strong {
  font-family: var(--font-display);
  font-weight: 600;
}

.audience span {
  color: var(--color-text-muted);
}


/* Real app screenshots in phone frames (Brains, Clients, Prospecting, Page) */
.devices {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 0.9em;
  width: 100%;
  max-width: 26em;
  justify-self: center;
}

.devices-single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 15em;
}

.device {
  display: block;
  padding: 0.4em;
  border: 1px solid var(--deck-line-strong);
  border-radius: 1.9em;
  background: linear-gradient(160deg, var(--material-phone-hi), var(--material-phone-lo));
  box-shadow: 0 2.5em 4em -2em color-mix(in srgb, var(--material-black) 90%, transparent), inset 0 1px 0 color-mix(in srgb, var(--material-white) 12%, transparent);
}

.device img {
  width: 100%;
  aspect-ratio: 540 / 1038;
  border-radius: 1.5em;
  object-fit: cover;
  object-position: top;
}

.device-back {
  margin-top: 2.5em;
}

.devices .figure-note {
  grid-column: 1 / -1;
  justify-content: center;
}

.network {
  position: absolute;
  z-index: 1;
  padding: 0.45em 0.9em;
  border: 1px solid var(--deck-line-strong);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-surface-raised) 92%, transparent);
  box-shadow: var(--shadow-pop);
  font-family: var(--font-mono);
  font-size: 0.8125em;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.network-1 {
  left: 0;
  top: 14%;
}

.network-2 {
  right: 0;
  top: 40%;
}

.network-3 {
  left: 30%;
  bottom: 18%;
}

/* Client finder: the reasons behind the video score */
.reasons {
  display: grid;
  gap: 0.6em;
}

.reasons-label {
  font-family: var(--font-mono);
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.reasons ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.reasons li {
  padding: 0.35em 0.85em;
  border: 1px solid color-mix(in srgb, var(--color-signal) 45%, var(--color-line));
  border-radius: var(--radius-pill);
  background: var(--deck-signal-soft);
  font-size: 0.875em;
  font-weight: 500;
}

/* Your character: the figurine on a soft glow */
.figurine {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1em;
  padding: 1.5em 1em 1em;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: radial-gradient(70% 60% at 50% 40%, color-mix(in srgb, var(--color-ultra) 28%, transparent), transparent 70%), var(--color-canvas);
  color: var(--color-text);
  isolation: isolate;
}

.figurine-glow {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 3.2em;
  width: 60%;
  height: 1.6em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-signal) 45%, transparent);
  filter: blur(1em);
  transform: translateX(-50%);
}

.figurine img {
  width: auto;
  height: 22em;
}

/* Credit top-ups */
.top-ups {
  display: grid;
  gap: 0.75em;
}

.top-up {
  display: grid;
  gap: 0.2em;
  padding: 1.1em 1.4em;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--color-surface-raised), var(--color-surface));
}

.top-up-credits {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3em;
  line-height: 1;
  letter-spacing: -0.04em;
}

.top-up small {
  font-family: var(--font-mono);
  font-size: 0.75em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.top-up strong {
  margin-top: 0.5em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35em;
}

.commission-extra {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  font-size: 1.0625em;
  color: var(--color-text-muted);
}

.commission-extra .icon {
  margin-top: 0.15em;
  color: var(--color-signal);
}

/* The problem: quieter cards */
.bonus-list-problem .bonus-icon {
  color: var(--color-text-faint);
}

/* Credits */
.credit-meter {
  padding: 1.5em;
}

.credit-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 4.5em;
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.credit-total small {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.2em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.credit-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75em;
}

.credit-split > dl {
  display: grid;
  gap: 0.2em;
  padding: 0.8em 1em;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-canvas);
}

.credit-split dt {
  font-size: 0.8125em;
  color: var(--color-text-muted);
}

.credit-split dd {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.75em;
  font-variant-numeric: tabular-nums;
}

.credit-or {
  font-family: var(--font-mono);
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-faint);
}

/* Ambassador */
.commissions {
  display: grid;
  gap: 0.75em;
}

.commission {
  display: grid;
  gap: 0.4em;
  padding: 1.25em 1.5em;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--color-surface-raised), var(--color-surface));
}

.commission-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.5em;
  line-height: 1;
  letter-spacing: -0.04em;
}

.commission p:last-child {
  font-size: 1.0625em;
  color: var(--color-text-muted);
}

/* Bonuses */
.bonus-list {
  display: grid;
  gap: 0.75em;
}

.bonus {
  position: relative;
  display: grid;
  gap: 0.4em;
  padding: 1.25em;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--color-surface-raised), var(--color-surface));
  overflow: hidden;
}

.bonus-icon {
  display: inline-grid;
  place-items: center;
  width: 2.75em;
  height: 2.75em;
  margin-block: 0.25em;
  border-radius: var(--radius-md);
  background: var(--deck-signal-soft);
  color: var(--color-signal);
}

.bonus-icon .icon {
  width: 1.5em;
  height: 1.5em;
}

.bonus strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25em;
}

.bonus span:last-child {
  color: var(--color-text-muted);
}

/* 12 shots, 12 codes: the rack */
.codes-rack-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.75em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.codes-email {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.1em 0.6em;
  border-radius: var(--radius-pill);
  background: var(--color-signal);
  color: var(--color-signal-ink);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.codes-email .icon {
  width: 1.1em;
  height: 1.1em;
}

.codes-rack {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.35em;
  padding: 0.7em 0.5em 0.5em;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--color-canvas), var(--color-surface-raised));
}

.codes-rack li {
  display: grid;
  justify-items: center;
  gap: 0.25em;
}

.codes-rack small {
  font-family: var(--font-mono);
  font-size: 0.55em;
  color: var(--color-text-faint);
}

.codes-vial {
  position: relative;
  display: block;
  width: 100%;
  max-width: 1.5em;
  height: 4em;
  border-radius: 0.4em 0.4em 0.6em 0.6em;
  border: 1px solid color-mix(in srgb, var(--color-gradient-start) 55%, transparent);
  background: color-mix(in srgb, var(--material-white) 3%, transparent);
  overflow: hidden;
}

.codes-vial::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 0.55em;
  background: color-mix(in srgb, var(--color-text) 22%, transparent);
  z-index: 1;
}

.codes-fill {
  position: absolute;
  inset: 0.55em 0 0;
  background: linear-gradient(180deg, var(--color-gradient-start), var(--color-gradient-mid) 60%, var(--color-gradient-end));
  transform-origin: bottom;
}

.codes-rack li:first-child .codes-vial {
  box-shadow: 0 0 0 2px var(--color-signal);
}

.codes-equation {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6em;
  letter-spacing: -0.02em;
}

.codes-equation strong {
  color: var(--color-gradient-fallback);
}

.codes-equation small {
  font-family: var(--font-mono);
  font-size: 0.45em;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* What you really get */
.day-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em 1em;
  padding: 0.9em 1.1em;
  border: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent);
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--deck-signal-soft), transparent 60%), var(--color-surface);
}

.day-path li {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
}

.day-path .day-path-title {
  font-family: var(--font-mono);
  font-size: 0.75em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.day-path b {
  display: inline-grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  border-radius: var(--radius-pill);
  background: var(--color-signal);
  color: var(--color-signal-ink);
  font-family: var(--font-display);
  font-size: 0.85em;
  font-weight: 800;
}

.receive-cols {
  display: grid;
  gap: 0.75em;
  margin-top: 0.75em;
}

.receive-col {
  padding: 1em 1.25em;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--color-surface-raised), var(--color-surface));
}

.receive-col-head {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding-bottom: 0.6em;
  margin-bottom: 0.4em;
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15em;
}

.receive-col-head .icon {
  width: 1.2em;
  height: 1.2em;
  color: var(--color-signal);
}

.receive-col li {
  display: flex;
  gap: 0.5em;
  align-items: flex-start;
  padding-block: 0.3em;
  color: var(--color-text-muted);
}

.receive-col li .icon {
  flex: none;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  color: var(--color-signal);
}

/* Your Pack, paid back how? */
.payback-tag {
  justify-self: start;
  padding: 0.1em 0.6em;
  border: 1px dashed color-mix(in srgb, var(--color-text) 30%, transparent);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.7em;
  color: var(--color-text-muted);
}

.payback-figure {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.6em;
  line-height: 1;
  letter-spacing: -0.04em;
}

.bonus .payback-versus {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.4em;
  padding-top: 0.6em;
  border-top: 1px dashed var(--color-line);
  font-weight: 600;
  color: var(--color-text);
}

.payback-versus .icon {
  width: 1em;
  height: 1em;
  color: var(--color-success);
}

/* Founder box */
.box-visual {
  position: relative;
  padding-bottom: 3em;
}

/* Light theme: the box image's soft floor shadow needs a dark ground — a stage card. */
[data-theme="light"] .box-visual {
  padding: 1.5em 1.5em 3em;
  border-radius: 1.5em;
  background: var(--color-canvas);
  box-shadow: var(--shadow-stage);
}

.box-glow {
  position: absolute;
  inset: 10% 5% 15%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-gradient-start) 30%, transparent), color-mix(in srgb, var(--color-gradient-end) 16%, transparent) 60%, transparent);
  filter: blur(2em);
}

.box-image {
  position: relative;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 2em 2.5em color-mix(in srgb, var(--material-black) 70%, transparent));
}

.deck-card {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: 13em;
  aspect-ratio: 1.586;
  padding: 0.85em 1em 0.8em;
  border: 1px solid color-mix(in srgb, var(--material-white) 16%, transparent);
  border-radius: 0.8em;
  overflow: hidden;
  background:
    repeating-linear-gradient(92deg, color-mix(in srgb, var(--material-white) 2.8%, transparent) 0 1px, transparent 1px 2px, color-mix(in srgb, var(--material-black) 8%, transparent) 2px 3px),
    radial-gradient(120% 100% at 14% 0%, var(--material-metal-hi) 0, var(--material-metal-mid) 44%, var(--material-metal-lo) 100%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--material-white) 24%, transparent), 0 1.2em 2.4em -0.8em color-mix(in srgb, var(--material-black) 95%, transparent);
  transform: rotate(-7deg);
}

.deck-card-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg, transparent 20%, color-mix(in srgb, var(--brand-gold) 12%, transparent) 34%, color-mix(in srgb, var(--brand-rust) 10%, transparent) 42%, color-mix(in srgb, var(--brand-violet-light) 14%, transparent) 52%, transparent 70%);
  mix-blend-mode: screen;
}

.deck-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.deck-card-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6em;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--color-gradient-fallback);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .deck-card-mark {
    background: var(--gradient-signal);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.deck-card-top em {
  padding: 0.15em 0.5em;
  border: 1px solid color-mix(in srgb, var(--material-white) 30%, transparent);
  border-radius: 99em;
  font-family: var(--font-mono);
  font-size: 0.5em;
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--material-white) 75%, transparent);
}

.deck-card-chip {
  align-self: center;
  width: 1.9em;
  height: 1.45em;
  border-radius: 0.3em;
  background:
    linear-gradient(90deg, transparent 32%, color-mix(in srgb, var(--material-black) 28%, transparent) 32% 34%, transparent 34% 66%, color-mix(in srgb, var(--material-black) 28%, transparent) 66% 68%, transparent 68%),
    linear-gradient(0deg, transparent 47%, color-mix(in srgb, var(--material-black) 28%, transparent) 47% 53%, transparent 53%),
    linear-gradient(135deg, var(--material-gold-hi), var(--material-gold-mid) 48%, var(--material-gold-lo));
}

.deck-card-bottom {
  display: grid;
  gap: 0.2em;
}

.deck-card-bottom small {
  font-family: var(--font-mono);
  font-size: 0.5em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--material-white) 60%, transparent);
}

.deck-card-bottom b {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.15em;
  letter-spacing: 0.06em;
  color: var(--material-paper);
}

.numbered li {
  display: flex;
  align-items: flex-start;
  gap: 0.9em;
}

.numbered b {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.875em;
  color: var(--color-gradient-fallback);
  padding-top: 0.2em;
}

.numbered strong {
  display: block;
  font-weight: 600;
  font-size: 1.0625em;
}

.numbered small {
  display: block;
  color: var(--color-text-muted);
}

.ritual {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125em;
  letter-spacing: -0.01em;
}

/* Guest Pass ticket */
.ticket {
  position: relative;
  padding: 1.5em;
}

.ticket-label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.ticket dl {
  display: grid;
}

.ticket dl > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1em;
  padding-block: 0.8em;
  border-bottom: 1px dashed var(--deck-line-strong);
}

.ticket dt {
  color: var(--color-text-muted);
}

.ticket dd {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.25em;
  font-variant-numeric: tabular-nums;
}

.ticket-total {
  border-bottom: 0 !important;
}

.ticket-total dt {
  color: var(--color-text);
  font-weight: 600;
}

.ticket-total dd {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.5em;
  letter-spacing: -0.03em;
}

/* Campus: full-bleed render */
.slide-bleed {
  position: absolute;
  z-index: -1;
  inset: 0;
  display: block;
  overflow: hidden;
}

.slide-bleed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-campus::before {
  z-index: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--material-ink) 92%, transparent) 0%, color-mix(in srgb, var(--material-ink) 55%, transparent) 45%, color-mix(in srgb, var(--material-ink) 92%, transparent) 100%);
}

.slide-campus .slide-inner {
  z-index: 1;
}

.campus-copy {
  display: flex;
  flex-direction: column;
  gap: 1.25em;
  max-width: 36em;
}

.slide-campus .slide-lead {
  color: color-mix(in srgb, var(--material-paper) 86%, transparent);
}

.campus-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
}

.campus-panel > div {
  padding: 0.7em 1em;
  border: 1px solid var(--deck-line-strong);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--material-ink) 70%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.campus-panel dt {
  font-family: var(--font-mono);
  font-size: 0.6875em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.campus-panel dd {
  font-weight: 600;
}

.campus-perks {
  display: flex;
  align-items: center;
  gap: 0.6em;
  color: var(--color-text);
}

.campus-perks .icon {
  color: var(--color-gradient-start);
}

.campus-note {
  max-width: 60em;
  color: color-mix(in srgb, var(--material-paper) 72%, transparent);
}

/* Offer: the split-flap board */
.board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1em 1.25em;
  padding: 1em 1em 1.25em;
  border: 1px solid var(--deck-line-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface-raised) 94%, transparent), color-mix(in srgb, var(--color-canvas) 96%, transparent));
  box-shadow: var(--shadow-stage), inset 0 1px 0 color-mix(in srgb, var(--color-text) 7%, transparent);
}

.board-wide {
  grid-column: 1 / -1;
}

.board dt {
  margin-bottom: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.6875em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  white-space: nowrap;
}

.board dd {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.125em;
  line-height: 1;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.board .is-accent .flap-text {
  color: var(--color-gradient-fallback);
}

.board.has-tiles .flap-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.flap-tiles {
  display: contents;
}

.flap {
  position: relative;
  display: grid;
  place-items: center;
  width: 0.82em;
  height: 1.34em;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--material-flap-top) 0 50%, var(--material-flap-bottom) 50%);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--material-black) 55%, transparent), 0 1px 0 color-mix(in srgb, var(--material-white) 3%, transparent);
}

.flap::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: color-mix(in srgb, var(--material-black) 70%, transparent);
}

.flap-gap {
  background: none;
  box-shadow: none;
}

.flap-gap::after {
  content: none;
}

.board .is-accent .flap {
  color: color-mix(in oklab, var(--color-gradient-start) calc((1 - var(--flap-position, 0)) * 100%), var(--color-gradient-end));
}

.flap.is-flipping {
  animation: flap-flip 0.09s linear;
}

@keyframes flap-flip {
  0% { transform: perspective(200px) rotateX(0deg); }
  50% { transform: perspective(200px) rotateX(-70deg); }
  100% { transform: perspective(200px) rotateX(0deg); }
}

.offer-points {
  gap: 0.6em;
}

/* Order */
.order {
  position: relative;
  display: grid;
  gap: 2em;
  justify-items: start;
}

.order-numeral {
  position: absolute;
  z-index: -1;
  right: -0.1em;
  top: -0.55em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 9em;
  line-height: 1;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--color-text) 14%, transparent);
  pointer-events: none;
}

.order-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25em;
}

.deck-button {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  min-height: 3.5em;
  padding: 0.4em 0.45em 0.4em 1.6em;
  border-radius: var(--radius-pill);
  background: var(--color-signal);
  color: var(--color-signal-ink);
  font-weight: 700;
  font-size: 1.125em;
  text-decoration: none;
  box-shadow: 0 1em 3em -0.8em color-mix(in srgb, var(--color-signal) 70%, transparent);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}

.deck-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 1.4em 3.4em -0.8em color-mix(in srgb, var(--color-signal) 85%, transparent);
}

.deck-button-round {
  display: grid;
  place-items: center;
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--material-ink) 14%, transparent);
}

.order-recap {
  max-width: 36em;
  color: var(--color-text-muted);
  font-size: 0.9375em;
}

.qr {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.75em;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.qr img {
  width: 6.5em;
  height: 6.5em;
  padding: 0.4em;
  border-radius: var(--radius-sm);
  background: var(--material-white);
}

.qr figcaption {
  display: grid;
  gap: 0.3em;
  font-size: 0.875em;
  color: var(--color-text-muted);
}

.qr .deck-brand {
  font-size: 1.25em;
  color: var(--color-text);
}

.order-legal {
  margin-top: 2em;
  font-size: 0.75em;
  color: var(--color-text-faint);
}

.order-legal a {
  color: var(--color-text-muted);
  text-underline-offset: 0.2em;
}

/* ── Motion ─────────────────────────────────────────────────────────────────────────────────── */

/* deck.js marks the deck ready and numbers each .rise (--i); without it everything stays visible. */
.deck.is-ready .rise {
  opacity: 0;
  transform: translateY(1.25em);
}

.deck.is-ready .slide.is-active .rise,
.deck.is-ready .slide.is-seen .rise {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms + 80ms);
}

.deck.is-ready .hook-numeral span {
  opacity: 0;
  transform: translateY(0.3em);
}

.deck.is-ready .slide.is-active .hook-numeral span,
.deck.is-ready .slide.is-seen .hook-numeral span {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out);
}

.deck.is-ready .slide.is-active .hook-numeral span:nth-child(2) { transition-delay: 90ms; }
.deck.is-ready .slide.is-active .hook-numeral span:nth-child(3) { transition-delay: 180ms; }
.deck.is-ready .slide.is-active .hook-numeral span:nth-child(4) { transition-delay: 270ms; }

.slide.is-active .slide-bleed img {
  animation: drift 18s ease-in-out infinite alternate;
}

@keyframes drift {
  from { transform: scale(1.02); }
  to { transform: scale(1.08) translateX(-1.5%); }
}

/* ── Wider phones and tablets in flow ───────────────────────────────────────────────────────── */

@media (min-width: 480px) {
  .pillars,
  .commissions,
  .audiences {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reel {
    grid-auto-columns: 46%;
  }
}

/* ── Stage layout (landscape) ───────────────────────────────────────────────────────────────── */

@media (min-width: 761px) and (min-height: 501px) and (orientation: landscape) {
  html {
    scroll-snap-type: none;
  }

  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .deck-top {
    padding-inline: var(--space-6);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 0;
  }

  .deck-icon-button {
    display: inline-grid;
  }

  .deck-nav {
    position: fixed;
    z-index: 20;
    inset: auto 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    height: var(--deck-nav-height);
    padding: 0 var(--space-6) var(--space-3);
  }

  .deck-progress {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  .deck-progress button {
    display: grid;
    place-items: center;
    width: 36px;
    height: var(--touch-min);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .deck-progress button span {
    width: 100%;
    height: 3px;
    border-radius: var(--radius-pill);
    background: var(--color-line);
    transition: background-color var(--duration-base) var(--ease-out), height var(--duration-fast) var(--ease-out);
  }

  .deck-progress button:hover span {
    height: 5px;
    background: var(--deck-line-strong);
  }

  .deck-progress button.is-done span {
    background: var(--color-text-faint);
  }

  .deck-progress button[aria-current="step"] span {
    height: 5px;
    background: var(--gradient-signal);
  }

  .deck-notes:not([hidden]) {
    position: fixed;
    z-index: 19;
    left: var(--space-6);
    right: var(--space-6);
    bottom: var(--deck-nav-height);
    display: grid;
    gap: var(--space-2);
    height: calc(var(--deck-notes-height) - var(--space-3));
    padding: var(--space-4) var(--space-6);
    overflow-y: auto;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-pop);
  }

  .deck-notes-title {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .deck-notes-body {
    display: grid;
    gap: var(--space-2);
    font-size: var(--text-xl);
    line-height: 1.4;
  }

  .deck-viewport {
    position: fixed;
    inset: var(--deck-top-height) 0 calc(var(--deck-nav-height) + var(--deck-notes-height));
    overflow: hidden;
  }

  .deck-stage {
    position: absolute;
    left: 0;
    top: 0;
    width: 1600px;
    height: 900px;
    font-size: 21px;
    transform-origin: 0 0;
  }

  .slide {
    position: absolute;
    inset: 0;
    min-height: 0;
    padding: 3.4em 4.6em;
    border: 1px solid var(--color-line);
    border-radius: 28px;
    background: var(--color-canvas);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s var(--ease-out), visibility 0s linear 0.5s;
  }

  .slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s var(--ease-out), visibility 0s;
  }

  .slide .slide-inner {
    height: 100%;
    justify-content: center;
    gap: 2em;
    transform: translateX(var(--enter-x, 0));
  }

  .deck.is-ready .slide:not(.is-active) .slide-inner {
    --enter-x: 3em;
  }

  .deck.is-ready .slide.is-before:not(.is-active) .slide-inner {
    --enter-x: -3em;
  }

  .deck.is-ready .slide.is-active .slide-inner {
    transition: transform 0.7s var(--ease-out);
  }

  /* Every slide was "seen" in flow; on the stage only the active one animates. */
  .deck.is-ready .slide.is-seen:not(.is-active) .rise {
    opacity: 0;
    transform: translateY(1.25em);
    transition: none;
  }

  .slide-title {
    font-size: 3.3em;
    max-width: 17em;
  }

  .slide-title-hero {
    font-size: 4.4em;
    max-width: 12em;
  }

  .slide-lead {
    font-size: 1.2em;
  }

  .hint-keys {
    display: inline;
  }

  .hint-scroll {
    display: none;
  }

  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4em;
  }

  .split-wide-copy {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  }

  .split-media-first {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  /* Hook */
  .hook {
    height: 100%;
    align-content: end;
    padding-bottom: 1em;
  }

  .hook-numeral {
    position: absolute;
    right: -0.04em;
    top: -0.12em;
    font-size: 14.5em;
  }

  .hook-numeral span {
    -webkit-text-stroke-width: 3px;
  }

  .hook-lead {
    font-size: 1.6em;
  }

  /* Club */
  .pillars {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1em;
  }

  .pillar {
    align-content: start;
    min-height: 12em;
    padding: 1.4em 1.4em 1.6em;
  }

  .pillar-index {
    font-size: 0.85em;
    margin-bottom: 2.4em;
  }

  .pillar strong {
    font-size: 1.3em;
  }

  .club-bonuses {
    font-size: 1.1em;
  }

  .formats {
    height: 30em;
  }

  /* Examples */
  .slide-examples .slide-inner {
    gap: 1.4em;
  }

  .reel {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 15.4em);
    justify-content: center;
    gap: 2em;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .reel-item:nth-child(2) {
    transform: translateY(-1em);
  }

  .slide-examples .slide-head {
    text-align: center;
  }

  .slide-examples .slide-kicker {
    justify-content: center;
  }

  .slide-examples .slide-title {
    margin-inline: auto;
    font-size: 2.4em;
  }

  .slide-examples .slide-note {
    justify-content: center;
  }

  /* App screenshots */
  .devices {
    max-width: 27em;
    gap: 1.2em;
  }

  .devices-single {
    max-width: 14.5em;
  }

  .network-1 {
    left: -1.5em;
  }

  .network-2 {
    right: -1.5em;
  }

  .slide-brains .slide-title,
  .slide-clients .slide-title,
  .slide-prospecting .slide-title,
  .slide-page .slide-title,
  .slide-character .slide-title {
    font-size: 2.9em;
  }

  .device-back {
    margin-top: 3.5em;
  }

  .slide-clients .split,
  .slide-brains .split,
  .slide-page .split,
  .slide-prospecting .split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }

  .slide-clients .feature-list,
  .slide-brains .feature-list {
    gap: 0.6em;
  }

  .figurine img {
    height: 25em;
  }

  .top-ups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25em;
  }

  .top-up {
    padding: 1.6em 1.8em;
  }

  .top-up-credits {
    font-size: 4.4em;
  }

  .slide-topups .offer-points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .commissions {
    gap: 1.5em;
  }

  .commission {
    padding: 2em 2.2em;
  }

  .commission-value {
    font-size: 6.4em;
  }

  .bonus-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25em;
  }

  .bonus {
    min-height: 15em;
    align-content: start;
    padding: 1.75em;
  }

  .bonus strong {
    margin-top: 1.5em;
    font-size: 1.6em;
  }

  .credit-total {
    font-size: 6em;
  }

  .codes-vial {
    height: 6.5em;
  }

  .receive-cols {
    grid-template-columns: 1fr 1.35fr 1fr;
    gap: 1.25em;
  }

  .slide-payback .bonus strong {
    margin-top: 0.2em;
    font-size: 1.35em;
  }

  .slide-payback .payback-figure {
    font-size: 3em;
  }

  .slide-payback .bonus {
    min-height: 0;
    padding: 1.4em 1.6em;
  }

  /* The rack fills slot by slot when the slide is shown. */
  .deck.is-ready .slide-codes .codes-fill {
    transform: scaleY(0);
  }

  .deck.is-ready .slide-codes.is-active .codes-fill {
    transform: scaleY(1);
    transition: transform 0.45s var(--ease-out);
  }

  .deck.is-ready .slide-codes.is-active .codes-rack li:nth-child(1) .codes-fill { transition-delay: 600ms; }
  .deck.is-ready .slide-codes.is-active .codes-rack li:nth-child(2) .codes-fill { transition-delay: 780ms; }
  .deck.is-ready .slide-codes.is-active .codes-rack li:nth-child(3) .codes-fill { transition-delay: 960ms; }
  .deck.is-ready .slide-codes.is-active .codes-rack li:nth-child(4) .codes-fill { transition-delay: 1140ms; }
  .deck.is-ready .slide-codes.is-active .codes-rack li:nth-child(5) .codes-fill { transition-delay: 1320ms; }
  .deck.is-ready .slide-codes.is-active .codes-rack li:nth-child(6) .codes-fill { transition-delay: 1500ms; }
  .deck.is-ready .slide-codes.is-active .codes-rack li:nth-child(7) .codes-fill { transition-delay: 1680ms; }
  .deck.is-ready .slide-codes.is-active .codes-rack li:nth-child(8) .codes-fill { transition-delay: 1860ms; }
  .deck.is-ready .slide-codes.is-active .codes-rack li:nth-child(9) .codes-fill { transition-delay: 2040ms; }
  .deck.is-ready .slide-codes.is-active .codes-rack li:nth-child(10) .codes-fill { transition-delay: 2220ms; }
  .deck.is-ready .slide-codes.is-active .codes-rack li:nth-child(11) .codes-fill { transition-delay: 2400ms; }
  .deck.is-ready .slide-codes.is-active .codes-rack li:nth-child(12) .codes-fill { transition-delay: 2580ms; }

  .deck-card {
    width: 15em;
    left: 2%;
  }

  .ticket {
    padding: 2em;
  }

  /* Campus */
  .slide-campus::before {
    background: linear-gradient(90deg, color-mix(in srgb, var(--material-ink) 94%, transparent) 0%, color-mix(in srgb, var(--material-ink) 75%, transparent) 38%, color-mix(in srgb, var(--material-ink) 10%, transparent) 70%, color-mix(in srgb, var(--material-ink) 35%, transparent) 100%), linear-gradient(0deg, color-mix(in srgb, var(--material-ink) 85%, transparent), transparent 30%);
  }

  .slide-campus .slide-inner {
    justify-content: space-between;
  }

  .campus-copy {
    margin-top: auto;
    margin-bottom: auto;
  }

  /* Offer */
  .slide-offer .slide-inner {
    gap: 1.5em;
  }

  .board {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.4em 1.6em;
    padding: 1.5em 1.6em 1.7em;
  }

  .board-wide {
    grid-column: span 2;
  }

  .board dd {
    font-size: 1.5em;
  }

  .offer-points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25em;
  }

  /* Order */
  .order {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 3em;
  }

  .order-numeral {
    top: -0.75em;
    font-size: 15em;
  }

  .slide-order .slide-title {
    font-size: 4.2em;
  }

  .deck-button {
    font-size: 1.3em;
  }

  .qr img {
    width: 8.5em;
    height: 8.5em;
  }

  .qr {
    flex-direction: column;
    align-items: flex-start;
  }

  .order-legal {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0;
  }

  .slide-order .slide-inner {
    justify-content: center;
  }
}

/* ── Reduced motion: no movement, content shown at once ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .deck.is-ready .slide.slide-codes .codes-fill {
    transform: none;
    transition: none;
  }

  .deck.is-ready .rise,
  .deck.is-ready .hook-numeral span,
  .deck.is-ready .slide.is-seen:not(.is-active) .rise {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .slide,
  .slide.is-active,
  .deck.is-ready .slide .slide-inner,
  .deck.is-ready .slide.is-active .slide-inner {
    --enter-x: 0;
    transition: none;
  }

  .slide.is-active .slide-bleed img,
  .flap.is-flipping {
    animation: none;
  }

  .deck-button,
  .deck-button:hover {
    transform: none;
    transition: none;
  }
}

/* ── Print: one slide per page, all visible ─────────────────────────────────────────────────── */

@media print {
  .deck-top,
  .deck-nav,
  .deck-notes {
    display: none !important;
  }

  .slide {
    break-after: page;
  }

  .deck.is-ready .rise {
    opacity: 1;
    transform: none;
  }
}

/* A lead under the title (the wave, the problem, the weekly Zoom, why only 1,900, top-ups), and
   shorter cards than the bonuses. */
.slide-wave .slide-head .slide-lead,
.slide-problem .slide-head .slide-lead,
.slide-topups .slide-head .slide-lead,
.slide-zoom .slide-head .slide-lead,
.slide-closed .slide-head .slide-lead {
  margin-top: 0.6em;
}

@media (min-width: 761px) and (min-height: 501px) and (orientation: landscape) {
  .slide-wave .bonus,
  .slide-problem .bonus,
  .slide-zoom .bonus,
  .slide-closed .bonus {
    min-height: 0;
  }

  .slide-wave .bonus strong,
  .slide-problem .bonus strong,
  .slide-zoom .bonus strong,
  .slide-closed .bonus strong {
    margin-top: 0.6em;
  }
}

/* The theme menu wears the deck's round tool buttons. */
.theme-switch-deck .theme-switch-button {
  border: 1px solid var(--color-line);
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  color: var(--color-text);
}


/* ── Chat launcher (Crisp facade, src/client/chat.js) ───────────────────────────────────────── */

/* Room left under the launcher: the sticky order bar here, the stage controls in deck.css. */
body.has-sticky-bar {
  --chat-offset: var(--sticky-bar-height);
}

/* Keep in sync with the stage media query of deck.css. */
@media (min-width: 761px) and (min-height: 501px) and (orientation: landscape) {
  .deck-body {
    --chat-offset: calc(var(--deck-nav-height) + var(--deck-notes-height));
  }
}

.chat-launcher {
  position: fixed;
  right: calc(var(--space-4) + env(safe-area-inset-right));
  bottom: calc(var(--chat-offset, 0px) + var(--space-4) + env(safe-area-inset-bottom));
  z-index: 40;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-signal);
  color: var(--color-signal-ink);
  box-shadow: var(--shadow-pop);
  cursor: pointer;
  transition:
    transform var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.chat-launcher:hover {
  background: var(--color-signal-hover);
  transform: translateY(-2px);
}

.chat-launcher:active {
  transform: translateY(0) scale(0.96);
}

.chat-launcher:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

.chat-launcher[hidden] {
  display: none;
}

.chat-launcher[aria-busy="true"] svg {
  animation: chat-launcher-wait 900ms ease-in-out infinite alternate;
}

@keyframes chat-launcher-wait {
  to {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-launcher,
  .chat-launcher[aria-busy="true"] svg {
    transition: none;
    animation: none;
  }
}

@media print {
  .chat-launcher {
    display: none;
  }
}

/* ── Footer "Cookie settings" (reopens Axeptio, src/client/chat.js) ───────────────────────── */

/* A button styled as the footer's link pills; hidden until a published banner can open. */
button.pill {
  background: none;
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

button.pill[hidden] {
  display: none;
}