/* =========================================================================
   Reeplayer Sponsor Deck — styles.
   Layout is a 1:1 translation of Figma MCP output. Do NOT change values
   without re-querying mcp__figma-desktop__get_design_context. See SKILL.md.
   ========================================================================= */

/* Figma variables (from file): --color-1 black, --color-3 #d6d2bb */
:root {
  --color-1: #000000;           /* Figma --color-1 */
  --color-3: #d6d2bb;           /* Figma --color-3 (canvas bg) */
  --color-4: #ff5c26;           /* Reeplayer orange (Slide 3 label bar + Mux Player chrome) */
  --accent:  #E31837;        /* sponsor brand color, injected at build */
}

/* Track B B2 — Mux Player theme. Hook into the player's exposed
   --media-accent-color custom property so the play button, scrubber, and
   volume highlight render in deck-orange instead of Mux's default purple.
   Centralized via --color-4 so any future deck-orange tweak propagates. */
mux-player {
  --media-accent-color: var(--color-4);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--color-3);
  color: var(--color-1);
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  /* make-interfaces-feel-better: crisper text rendering on macOS. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================ Reveal.js override layer ============================
   Keep tight; diff against reveal core on every reveal.js upgrade. */
.reveal { background: var(--color-3); font-family: inherit; color: var(--color-1); }
.reveal .slides { text-align: left; }
.reveal .slides section,
.reveal .slides section > section {
  padding: 0; width: 1920px; height: 1080px;
  font-weight: inherit; line-height: inherit; letter-spacing: inherit;
  background: var(--color-3); top: 0 !important;
}
.reveal .slides section[hidden] { display: none !important; }
/* No generic `.reveal .slides p { margin: 0 }` — that selector (0,2,1) silently beats
   every per-slide `.sX-list p { margin-bottom: 12px }` rule (0,1,1). The universal
   `* { margin: 0 }` at the top of this file already zeroes browser default margins,
   so we don't need it here. */
/* Do NOT restyle `.reveal a` here — the compound selector has specificity 0,1,1 and will
   silently beat per-element rules like `.s2-cite { color: #737373 }` (0,1,0). Leave reveal
   core's anchor defaults alone; colorize links via their own per-element class. */
/* ================================ end override layer ============================= */

/* Slide 6 has a black canvas (`var(--color-1)`); when it's the active slide,
   extend that black to the letterbox region so the slide reads edge-to-edge
   on non-16:9 viewports. init.js sets body[data-active-slide="N"] on every
   slide change, so this rule swaps the deck wrapper bg in lockstep. */
body[data-active-slide="6"],
body[data-active-slide="6"] .reveal {
  background: var(--color-1);
}

/* Deck accent text is hardcoded BLACK as of 2026-04-24 (per-brand picker output
   was producing low-contrast results vs the tan canvas — see rp-brain checkpoint
   `brand-curator-rotorooter-test-2026-04-24.md` for the trade-off discussion).
   To re-enable per-brand picker accent for deck headlines, swap back to:
       .accent { color: var(--accent); }
   The picker still computes + writes `accent` to sponsors/<slug>/config.json
   and the build still injects `--accent` into :root above; only this rule was
   changed. Future v1.5 design pass may revisit. */
.accent { color: var(--color-1); }

/* =====================================================================
   SLIDE 1 — 1:1 from Figma node 265:125 (operator design pass 2026-05-05).
   Geometry verified against mcp__figma-desktop__get_design_context +
   get_metadata for nodes 265:126–265:142.
   ===================================================================== */

/* 265:127 Decorative (rays image). left:50%=960 top:49.5 w:912 h:981.244.
   The element box (right edge 1872) sits inside the border (right edge 1872),
   so no clip is needed — `background: cover` already constrains painting. */
.s1-decor {
  position: absolute;
  left: 50%; top: 49.5px;
  width: 912px; height: 981.244px;
  background: url("./assets/slide1-sunburst.png") left top / cover no-repeat;
  overflow: hidden; /* matches Figma's explicit clip on the Decorative frame */
  z-index: 1;
  pointer-events: none;
}

/* 265:141 2_Both_White_Transparent_Background 1 (camera composite). */
.s1-camera {
  position: absolute;
  left: calc(33.333333% + 13.67px); top: 120px;
  width: 1621.333px; height: 912px;
  background: url("./assets/slide1-camera.png") left top / cover no-repeat;
  z-index: 2;
  pointer-events: none;
}

/* 265:126 Border. 2px solid black, left:48 top:48 w:1824 h:984 */
.s1-border {
  position: absolute;
  left: 48px; top: 48px;
  width: 1824px; height: 984px;
  border: 2px solid var(--color-1);
  pointer-events: none;
  z-index: 5;
}

/* 265:128 Line — vertical 2px line at x=960 from y=49.06 to y=1032. */
.s1-line {
  position: absolute;
  left: 960px; top: 49.06px;
  width: 2px; height: 982.945px;
  background: var(--color-1);
  z-index: 4;
  pointer-events: none;
}

/* 265:140 Subheadline head-box. left:112 top:96 w:784 h:320.
   Fixed-height container (Rule 1 opt-in). Height grown from Figma's 162px
   to 320px to hold up to 4 lines at 84px target (4 × 84 × 0.9 = 302.4 +
   descender buffer). Operator override of Figma's 162 frame — short-brand
   decks render in 1-2 lines and leave whitespace at the bottom of the box;
   long-brand decks (e.g. Phoenix Children's Hospital) render at the 84px
   target across up to 4 lines. The fixed height keeps the content block
   below anchored at top:572 regardless of how the headline wraps.
   Auto-fit bounds (data-fit on .s1-head): target 84, floor 60, maxLines 4,
   maxHeight 320. Recalibrated 2026-05-05 v2 from "60,40,2,162". */
.s1-head-box {
  position: absolute;
  left: 112px; top: 96px;
  width: 784px;
  height: 320px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  z-index: 3;
}

/* 265:140 Subheadline. 84 / 800 / line 0.9 / tracking -1.68 / uppercase / wdth 75 / opsz 14
   (tracking scales linearly: Figma's -0.02em × 84 = -1.68px). */
.s1-head {
  font-size: 84px;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -1.68px;
  text-transform: uppercase;
  font-variation-settings: "opsz" 14, "wdth" 75;
  width: 100%;
  color: var(--color-1);
}

/* 265:129 Frame 6 (content). left:112 top:572 w:784 h:396.
   Three groups separated by 36px gaps. Each group: 12px gap between
   label (Bold 28px) and body (Regular 28px). Static — no per-brand vars. */
.s1-content {
  position: absolute;
  left: 112px; top: 572px;
  width: 784px; height: 396px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;
  color: var(--color-1);
  z-index: 3;
}
.s1-content__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}
.s1-content__label,
.s1-content__body {
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: -0.56px;
  font-variation-settings: "opsz" 14, "wdth" 100;
  width: 100%;
}
.s1-content__label { font-weight: 700; }
.s1-content__body  { font-weight: 400; text-wrap: pretty; }

/* 265:142 Top-right header. left:1563 top:66 w:293 h:40.175
   (right-edge 1856 = 64px from slide edge — matches existing convention).
   Three children with 16px gap (per Figma). The deck only loads Bricolage
   Grotesque from Google Fonts; CocoSharp (commercial) is requested first
   and falls back to Bricolage Bold automatically. */
.s1-header {
  position: absolute;
  left: 1563px; top: 66px;
  width: 293px; height: 40.175px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  z-index: 6;
  pointer-events: none;
}
.s1-header__ig {
  display: inline-flex;
  width: 28px; height: 28px;
  flex-shrink: 0;
}
.s1-header__text {
  font-family: "CocoSharp", "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.18px;
  color: #ffffff;
  white-space: nowrap;
  flex-shrink: 0;
}
.s1-header__logo {
  display: inline-flex;
  width: 100px; height: 40.175px;
  flex-shrink: 0;
}
/* =====================================================================
   Shared deck-table component (Rule 13). Currently used by slide 2 only;
   slide 1's table was removed in the 2026-05-05 design pass. Instance-
   specific details (position, size, column widths, font size, row height,
   accent column placement) live in .s2-table overrides.
   ===================================================================== */
.deck-table {
  position: absolute;
  z-index: 3;
  border-collapse: collapse;
  table-layout: fixed;
  background: rgba(0, 0, 0, 0.098);
  border-radius: 12px;
  overflow: hidden;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
}
.deck-table td {
  padding: 20px;
  vertical-align: middle;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--color-1);
  background: #ffffff;
  border: 1px solid #737373;
  font-variant-numeric: tabular-nums;
}
/* Header row (first row) is bold. Outer borders cleared since overflow:hidden
   + border-radius already clips the container's inner edges. */
.deck-table tr:first-child td { font-weight: 700; border-top: none; }
.deck-table tr:last-child td  { border-bottom: none; }
.deck-table td:first-child    { border-left: none; }
.deck-table td:last-child     { border-right: none; }

/* =====================================================================
   SLIDE 2 — 1:1 from Figma node 265:148 (operator design pass 02-B,
   2026-05-05). Geometry verified against mcp__figma-desktop__get_metadata
   + get_design_context for nodes 265:149–265:159.
   ===================================================================== */

/* 265:150 Decorative (sunburst pill). Figma frame is left:1099 top:48
   w:773 h:787 — but the divider line (265:151) sits at x:1101, so the
   raw Figma frame would bleed 2px of orange to the LEFT of the line
   (the line is only 2px wide and z-orders above the decor, so it covers
   1101–1102 but leaves 1099–1100 exposed). Operator's visual intent is
   that the pill's left edge meets the line. Fix: anchor the decor at
   x:1101 (matching the line) and shrink width to 771 (= 773 − 2), so
   the right edge stays at 1872 (border edge). The 0.26% horizontal
   compression of the PNG (background-size:cover scales the 1546×1574
   asset; aspect ratio change is sub-pixel) is imperceptible.
   overflow:hidden mirrors Slide 1's preventive clip. */
.s2-decor {
  position: absolute;
  left: 1101px; top: 48px;
  width: 771px; height: 787px;
  background: url("./assets/slide2-decorative.png") left top / cover no-repeat;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

/* 265:149 Border. Same as slide 1 border. */
.s2-border {
  position: absolute;
  left: 48px; top: 48px;
  width: 1824px; height: 984px;
  border: 2px solid var(--color-1);
  pointer-events: none;
  z-index: 5;
}

/* 265:151 Line. Vertical 2px line at x=1101, y=51 → 1032 */
.s2-line {
  position: absolute;
  left: 1101px; top: 51px;
  width: 2px; height: 981px;
  background: var(--color-1);
  z-index: 4;
  pointer-events: none;
}

/* 265:155 Headline. Frame left:113, top:96, w:893, h:324.
   60px ExtraBold wdth=75 opsz=14 line=1.0 tracking=-1.2 uppercase
   (-0.02em × 60 = -1.2). Width locked to 893px (matches bullets block
   underneath). Font-size fixed at 60px, line-height 100%. No auto-fit. */
.s2-headline {
  position: absolute;
  left: 113px; top: 96px;
  width: 893px;
  z-index: 3;
  color: var(--color-1);
  font-size: 60px;
  display: flex; flex-direction: column; align-items: flex-start;
}
.s2-headline__line {
  font-size: inherit;
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -1.2px;
  text-transform: uppercase;
  font-variation-settings: "opsz" 14, "wdth" 75;
}
/* Variable paragraphs get browser-native balance. Each marked element's lines are
   equalized in width within the chosen font-size. Loop C's balance QA gates this. */
.variable-balanced {
  text-wrap: balance;
}

/* 265:156 Stats table — flex-centered inside the sunburst pill.
   Wrapper occupies the pill bounds (1099, 48) w:773 h:787 with 20px
   horizontal padding (= 40px total), so the table is:
     B1 — vertically + horizontally centered regardless of row count
          (3 rows: 204px tall → centers; 7 rows: 476px tall → centers
          within the same 787px pill)
     B2 — column auto-expand: table-layout:auto + min-width per column
          + white-space:nowrap on cells. Columns start at Figma defaults
          (260, 215) and grow to fit any single-line content.
     B3 — container clamp: padding 0 20px on the wrapper limits maximum
          table width to 733px (= 773 − 40). Beyond that, the cell's
          nowrap will overflow visually — surface to operator if a
          preset trips this in the wild.
     B4 — variable row count: rows come from preset.rows[] (3..7 rows
          per the existing path). Same data path as the prior fixed
          design; only the rendering centers + auto-sizes now. */
.s2-table-wrap {
  position: absolute;
  left: 1099px; top: 48px;
  width: 773px; height: 787px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  z-index: 3;
  pointer-events: none;
}

/* Slide 2 instance (Figma node 265:156): 2 cols, 20px font, 68px rows,
   NO left-column bold (only header row is bold), accent column = col 2.
   Shared baseline from .deck-table — the position/size declarations on
   .deck-table are overridden here since this instance is now flex-laid-
   out inside .s2-table-wrap rather than absolute-positioned. */
.s2-table {
  position: static;
  table-layout: auto;
  width: max-content;
  max-width: 733px;
  pointer-events: auto;
}
.s2-table td {
  font-size: 20px;
  height: 68px;
  white-space: nowrap;
}
.s2-table td:nth-child(1) { min-width: 260px; }
.s2-table td:nth-child(2) { min-width: 215px; background: #E4FF4A; }

/* 265:153 Bullets. top-left (113, 584), w:893, h:312. Text 32px regular. */
.s2-bullets {
  position: absolute;
  left: 113px; top: 584px;
  width: 893px;
  z-index: 3;
  color: #1e1e1e;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.64px;
  font-variation-settings: "opsz" 14, "wdth" 100;
}
.s2-bullets p { white-space: pre-wrap; }
.s2-bullets p { margin-bottom: 12px !important; }
.s2-bullets p:last-child { margin-bottom: 0 !important; }
.s2-bullets__label {
  font-weight: 700;
  font-variation-settings: "opsz" 14, "wdth" 100, "wght" 700;
  text-decoration: underline;
  text-decoration-skip-ink: none;
}
/* Footnote-marker superscript on the "parity¹" bullet. 20.64px (=
   32 × 0.645) matches the same ratio Figma applies to the footnote's
   leading "1" (13.545 / 21 = 0.645). vertical-align:super lifts it
   above the baseline; line-height:0 keeps the line's vertical metrics
   from being inflated by the superscript box. */
.s2-bullets__sup {
  font-size: 20.64px;
  vertical-align: super;
  line-height: 0;
}

/* 265:152 Cite link. (1172, 916) w:627 h:35 — Figma frame contents are
   centered both axes (justify-center + text-align:center). Horizontally
   centered: text-align:center inside the 627px width. Centered with the
   pill: pill center x = 1099 + 773/2 = 1485.5; cite center x = 1172 +
   627/2 = 1485.5 ✓. Vertical: explicit height 35 + flex centering so
   the 28px text sits in the middle of the 35px box (line-height 1.25
   would happen to land on the same pixels but flex makes the intent
   declarative). */
.s2-cite {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 1172px; top: 916px;
  width: 627px; height: 35px;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  color: #737373;
  text-align: center;
  text-decoration: underline;
  z-index: 3;
  font-variation-settings: "opsz" 14, "wdth" 100;
}

/* 265:154 YouGov footnote. (60, 993) w:400 h:27. 21px Regular #1e1e1e
   line:1.3 tracking:-0.42 wdth:100 opsz:14 nowrap. Static across
   presets — YouGov source is generic. */
.s2-footnote {
  position: absolute;
  left: 60px; top: 993px;
  width: 400px;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.42px;
  font-variation-settings: "opsz" 14, "wdth" 100;
  color: #1e1e1e;
  white-space: nowrap;
  z-index: 3;
}
.s2-footnote__sup {
  font-size: 13.545px;
  vertical-align: super;
  line-height: 0;
}

/* 265:157 Top-right header. Frame (1554, 66) w:302 h:40.175. Same
   structure + SVG as Slide 1's .s1-header (265:142); position differs
   slightly (1554 vs 1563, 302 vs 293). CocoSharp Bold falls back to
   Bricolage Grotesque Bold — the deck only loads Bricolage from
   Google Fonts. */
.s2-header {
  position: absolute;
  left: 1554px; top: 66px;
  width: 302px; height: 40.175px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  z-index: 6;
  pointer-events: none;
}
.s2-header__ig {
  display: inline-flex;
  width: 28px; height: 28px;
  flex-shrink: 0;
}
.s2-header__text {
  font-family: "CocoSharp", "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.18px;
  color: #ffffff;
  white-space: nowrap;
  flex-shrink: 0;
}
.s2-header__logo {
  display: inline-flex;
  width: 100px; height: 40.175px;
  flex-shrink: 0;
}

/* =====================================================================
   SLIDE 3 — 1:1 from Figma node 265:192 (operator design pass 2026-05-05).
   Geometry verified against mcp__figma-desktop__get_metadata + get_design_context
   for nodes 265:193–265:216. Two operator-confirmed overrides vs Figma:
     • Headline at 60px (Figma still shows 156px; operator stated 60).
     • Single variant only (operator decision B).
   Rule 12 / 12a CSS rules below remain untouched — they are slide-3-targeted
   in selector but only fire when .variant-branded markers + [data-max-lines]
   probes are present in the DOM. The new Slide 3 markup ships neither, so the
   rules are no-ops on this slide. Left in place so other slides could opt in.
   ===================================================================== */

/* 265:193 Decorative (rays). Same position + asset as slide 1. */
.s3-decor {
  position: absolute;
  left: 50%; top: 49.5px;
  width: 912px; height: 981.244px;
  background: url("./assets/slide1-sunburst.png") left top / cover no-repeat;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

/* 265:200 Video. Frame (960, 327) w:910 h:512 — shifted +43px down + 2px
   narrower vs prior (284 / 912 / 513). Black placeholder when no video URL
   is wired. Right edge sits 2px shy of the border (1872) so the box stays
   inside the inner frame. */
.s3-video {
  position: absolute;
  left: 960px; top: 327px;
  width: 910px; height: 512px;
  background: #000000;
  z-index: 2;
}

/* 265:194 Border */
.s3-border {
  position: absolute;
  left: 48px; top: 48px;
  width: 1824px; height: 984px;
  border: 2px solid var(--color-1);
  pointer-events: none;
  z-index: 5;
}

/* 265:195 Line. Vertical 2px at x=960, y=49.06 → 1032 */
.s3-line {
  position: absolute;
  left: 960px; top: 49.06px;
  width: 2px; height: 982.945px;
  background: var(--color-1);
  z-index: 4;
  pointer-events: none;
}

/* 265:196 Orange video label bar. Frame (1035, 240) w:761 h:87 (Figma fixes
   height; 16px padding + 42px text × line-height 1.3 ≈ 86.6 ≈ 87). Top:240
   anchors it directly above the video (which starts at top:327, 87px gap
   below this bar's top:240+h:87 = 327 — flush). Background fixed Reeplayer
   orange (#ff5c26) — operator-confirmed NOT wallpaperColor-driven (resolves
   audit Q4 with option b). Hardcoded so brand builds can't override it. */
.s3-label-bar {
  position: absolute;
  left: 1035px; top: 240px;
  width: 761px; height: 87px;
  padding: 16px;
  background: var(--color-4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.s3-label-bar__text {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.84px;
  text-align: center;
  color: #ffffff;
  font-variation-settings: "opsz" 14, "wdth" 100;
  white-space: nowrap;
}

/* 265:198 Headline frame. left:112 top:96 w:784 h:280. Frame height is
   exactly 2 lines at 156 × 0.9 = 280.8 ≈ 280 — sized for the BIG headline
   treatment to wrap up to 2 lines. */
.s3-head {
  position: absolute;
  left: 112px; top: 96px;
  width: 784px;
  z-index: 3;
}
/* 265:198 Headline title. 156 / 800 / 0.9 / -3.12 / uppercase / wdth 75.
   Tracking scales linearly: -0.02em × 156 = -3.12px. The BIG headline
   treatment (matches Slide 5 in the new design pass), distinct from the
   60/84px subheadline treatment on Slides 1+2.
   Auto-fit data-fit="156,95,2,280": max 156, floor 95, max 2 lines, height
   budget 280px. With "YOU GET EXCLUSIVITY." (19 chars) at wdth=75 the
   line wraps near ~155-156px to 2 lines; binary search settles within
   1-2px of 156 to clear the 280px height budget cleanly. Floor 95 stays
   wired as insurance for any future longer copy. */
.s3-head__title {
  font-size: 156px;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -3.12px;
  text-transform: uppercase;
  font-variation-settings: "opsz" 14, "wdth" 75;
  color: var(--color-1);
  width: 100%;
  margin: 0;
}

/* 265:201 Body container. Frame (left:112, bottom:184) w:784, flex-col
   gap:28 items-start justify-end. Bottom-anchored: bullets sit pinned to
   bottom:184, label sits 28px above the bullet list. Footnotes (265:214)
   live in their own separate frame at bottom:60 — they used to be a child
   of .s3-body but the new design pulls them out to a slide-edge anchor. */
.s3-body {
  position: absolute;
  left: 112px; bottom: 184px;
  width: 784px;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 28px;
  z-index: 3;
  color: var(--color-1);
  font-variation-settings: "opsz" 14, "wdth" 100;
}

/* 265:203 Intro label. 28 / 700 / 1.3 / -0.56 wdth=100. Standalone
   paragraph (no leading-whitespace + underline trick like S2/S4 use for
   inline labels — this label IS its own line in Figma 265:202). */
.s3-body__label {
  width: 100%;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.56px;
  font-variation-settings: "opsz" 14, "wdth" 100, "wght" 700;
  color: var(--color-1);
}

/* 265:204 Bullet list. 28 / 400 / 1.3 / -0.56. 8px gap between bullets
   (was 12px on the prior 24px design — tightened per Figma gap-[8px]). */
.s3-body__list {
  width: 100%;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.56px;
  color: var(--color-1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.s3-body__list p {
  /* !important: reveal.js core CSS forces `.reveal p { margin: 0 }` at 0,2,2
     which beats this rule's 0,1,1. Margins zeroed; spacing handled by flex
     gap above. */
  margin: 0 !important;
  white-space: pre-wrap;
}
.s3-body__list b {
  font-weight: 700;
}
/* Footnote-marker superscript on bullets that reference ²/³. 18.06px =
   28 × 0.645, matching the same ratio S2 uses on its parity¹ sup. */
.s3-body__sup {
  font-size: 18.06px;
  vertical-align: super;
  line-height: 0;
}
/* 265:443 Divider line between bullet 3 and bullet 4. Figma renders a
   thin horizontal line inside a 20px-tall frame; <hr> default styling is
   browser-dependent so we lock it down explicitly. */
.s3-body__divider {
  width: 100%;
  height: 0;
  border: 0;
  border-top: 1px solid var(--color-1);
  margin: 6px 0;
  /* 6+1+6 = 13px → close to the 20px Figma frame (which had ~10px
     padding around the line vector); Flex gap:8 contributes another 8px
     above + below, so total visual gap label-line-bullet ≈ 14px each
     side. Adjust if Loop C flags it. */
}

/* Rule 12 — Copy fallback variants. Slide-3-scoped CSS retained as inert
   infrastructure (no .variant-branded / .variant-fallback markers in the
   current Slide 3 markup, so these selectors never match). Left in place
   so future slides can opt in. */
.variant-fallback { display: none; }
.use-fallback .variant-branded,
.head-fallback .s3-head__title.variant-branded,
.bullets-fallback .s3-body__list.variant-branded { display: none; }
.use-fallback .variant-fallback,
.head-fallback .s3-head__title.variant-fallback,
.bullets-fallback .s3-body__list.variant-fallback { display: block; }

/* Rule 12a — bullets-28 grow path, also inert on the new design (bullets
   are 28px by default now). Retained for slide infrastructure parity. */
.bullets-28 .s3-body__list { font-size: 28px; }

/* 265:214 Footnotes. NEW separate frame at (60, bottom:60) w:781,
   flex-col gap:8 items-start justify-end. 21px Regular wdth=100 tracking
   -0.42 line 1.3 color #1e1e1e. Each line begins with a sup at 13.545px
   (= 21 × 0.645) — same ratio + treatment as the S2 YouGov footnote sup. */
.s3-footnotes {
  position: absolute;
  left: 60px; bottom: 60px;
  width: 781px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.42px;
  font-variation-settings: "opsz" 14, "wdth" 100;
  color: #1e1e1e;
  z-index: 3;
}
.s3-footnotes p {
  margin: 0 !important;
  width: 100%;
}
.s3-footnotes__sup {
  font-size: 13.545px;
  vertical-align: super;
  line-height: 0;
}

/* 265:211 Top-right header. Frame (1554, 66) w:302 h:40.175. Same
   structure + SVG as Slide 2's .s2-header (265:157); markup duplicated
   per the existing per-slide pattern. CocoSharp Bold falls back to
   Bricolage Grotesque Bold — the deck only loads Bricolage from Google
   Fonts. */
.s3-header {
  position: absolute;
  left: 1554px; top: 66px;
  width: 302px; height: 40.175px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  z-index: 6;
  pointer-events: none;
}
.s3-header__ig {
  display: inline-flex;
  width: 28px; height: 28px;
  flex-shrink: 0;
}
.s3-header__text {
  font-family: "CocoSharp", "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.18px;
  color: #ffffff;
  white-space: nowrap;
  flex-shrink: 0;
}
.s3-header__logo {
  display: inline-flex;
  width: 100px; height: 40.175px;
  flex-shrink: 0;
}

/* =====================================================================
   SLIDE 4 — 1:1 from Figma node 265:222 ("04-B", operator design pass
   2026-05-05). Fully static. No variables.
   All descendant positions are RELATIVE to .s4-border (Figma's Border frame
   is the coord root for this slide). See index.html comments for per-node
   cross-references (265:223 Border, 265:270 bg, 265:331/332 vignettes,
   265:305 OTHER SPORTS, 265:333 headline, 265:334 stats, 265:350-354
   connectors, 265:355 footnotes, 265:358 body).
   ===================================================================== */

/* 265:223 Border. 2px solid black, inset (48, 48) w:1824 h:984.
   overflow:clip is what lets the bg PNG bleed outside the 1824×984 window
   and get cropped to the border rectangle (same pattern Figma used). */
.s4-border {
  position: absolute;
  left: 48px; top: 48px;
  width: 1824px; height: 984px;
  border: 2px solid var(--color-1);
  overflow: hidden;
  z-index: 1;
}

/* 265:270 bg. Figma frame is w:1920 h:1037 at (-48, -27) relative to Border.
   PNG is a 2×-resolution export (3840×2074) of that frame; render at 1× by
   locking width + height so the crop lands in the same place as Figma. */
.s4-bg {
  position: absolute;
  left: -48px; top: -27px;
  width: 1920px; height: 1037px;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* 265:331 / 265:332 Vignette. Figma layer 265:331 is 1920×1080 centered on
   Border (so in Border-relative coords: left:-48, top:-48). slide4-vignette.svg
   is Orhan's flattened export containing both gradient layers (opacity:1 and
   fill-opacity:0.5) stacked in one file. */
.s4-vignette {
  position: absolute;
  left: -48px; top: -48px;
  width: 1920px; height: 1080px;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}

/* 265:305 OTHER SPORTS badge. Group at Border-relative (1506, 944) w:305.62
   h:27.65. Inter Black 26.378px white uppercase, line-height 1, nowrap.
   z:3 puts it above the bg PNG (z:1) and vignette (z:2) — operator's
   "moved this layer up" intent. The label was previously baked into the
   bg PNG; now lives as four absolutely-positioned children matching
   Figma's `-translate-x-1/2 -translate-y-1/2` pattern. Group-local
   positions derived from get_metadata children of 265:305 (top-left of
   each text bbox in Border coords, then offset by (1506, 944)). */
.s4-other-sports {
  position: absolute;
  left: 1506px; top: 944px;
  width: 305.62158203125px; height: 27.6484375px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 900;
  font-size: 26.378px;
  line-height: 1;
  color: #ffffff;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}
.s4-other-sports > * {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s4-other-sports__label {
  /* 265:309 "Other sports": Border (1506, 945.65) w:207 h:26 → group-local (0, 1.65). */
  left: 0; top: 1.65px;
  width: 207px; height: 26px;
  text-align: center;
}
.s4-other-sports__emoji {
  /* All emoji boxes are 27×26, top:0 within the group. */
  width: 27px; height: 26px;
  font-family: system-ui, sans-serif; /* color emoji never come from Inter */
  font-weight: 400;
}
/* 265:306 🏀: Border (1723.95, 944) → group-local (217.95, 0). */
.s4-other-sports__emoji--1 { left: 217.951px; top: 0; }
/* 265:307 🏐: Border (1754.29, 944) → group-local (248.29, 0). */
.s4-other-sports__emoji--2 { left: 248.286px; top: 0; }
/* 265:308 🏈: Border (1784.62, 944) → group-local (278.62, 0). */
.s4-other-sports__emoji--3 { left: 278.622px; top: 0; }

/* 265:333 Headline. 146 / 800 / 0.9 / -2.92 / uppercase / wdth 75 / opsz 14.
   Figma: left:calc(50%+0.5px), -translate-x-1/2, top:56, whitespace-nowrap.
   0.5px offset is a Figma rendering artifact — not perceptually meaningful
   at 1× render; keeping exact math here so Loop C diffs stay numerically
   faithful to design_context. (Was top:54 in prior pass; Figma now 56.) */
.s4-headline {
  position: absolute;
  top: 56px;
  left: calc(50% + 0.5px);
  transform: translateX(-50%);
  font-size: 146px;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -2.92px;
  text-transform: uppercase;
  font-variation-settings: "opsz" 14, "wdth" 75;
  color: var(--color-1);
  text-align: center;
  white-space: nowrap;
  z-index: 3;
}

/* 265:350..265:354 Connectors. SVG viewBox 0 0 1343 75. The paths' bounding
   box (excluding round linecap overhang of 3px) is (3, 3) → (1340, 72),
   which corresponds to Figma connector bbox (189.5, 192.5) → (1529.5, 261.5)
   in Border-relative coords. So SVG origin at Border (186.5, 189.5). */
.s4-connectors {
  position: absolute;
  left: 186.5px;
  top: 189.5px;
  width: 1343px;
  height: 75px;
  pointer-events: none;
  user-select: none;
  z-index: 3;
}

/* 265:334 Stats row frame. Figma: w:1594 h:117, top:267 relative to Border,
   left-1/2 -translate-x-1/2 (centered). flex row, items-center,
   justify-between, content-stretch (= align-items:stretch is default).
   (Was top:265 in prior pass; Figma now 267.) */
.s4-stats {
  position: absolute;
  top: 267px;
  left: 50%;
  transform: translateX(-50%);
  width: 1594px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color-1);
  text-align: center;
  z-index: 3;
}

/* 265:335/338/341/344/347 Stat cells. flex-col gap:8 items-center,
   whitespace-nowrap (except the "36 hrs / exposure per user" cell whose
   label is Figma-locked to w:365, which matches the natural 1-line width
   of the copy — keeping it explicit via .s4-stat--wide). */
.s4-stat {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  white-space: nowrap;
}
.s4-stat__num {
  font-size: 60px;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -1.2px;
  text-transform: uppercase;
  font-variation-settings: "opsz" 14, "wdth" 75;
}
.s4-stat__label {
  font-size: 42px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.84px;
  font-variation-settings: "opsz" 14, "wdth" 100;
}
.s4-stat--wide .s4-stat__label { width: 365px; }

/* 265:355 Footnotes. 21 / 400 / 1.3 / -0.42 / rgba(0,0,0,0.8). Frame at
   (40, 416) w:446, 8px gap between lines. (Was (38, 414) w:422 in prior
   pass; Figma now (40, 416) w:446. Line-2 copy updated per operator —
   see index.html for the new string at 265:357.) */
.s4-footnotes {
  position: absolute;
  left: 40px; top: 416px;
  width: 446px;
  display: flex; flex-direction: column;
  gap: 8px;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.42px;
  font-variation-settings: "opsz" 14, "wdth" 100;
  color: rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  z-index: 3;
}

/* 265:358 Body. Figma Frame at (40, 610) w:765 h:342 (was w:720; widened
   45px per operator's design pass). Contains ONE bullet block (265:359) +
   a sibling 21px footnote (265:360) with 32px gap. Bullets: 36 / 400 / 1.3
   / -0.72 color #1e1e1e. Bullet 2 ends with a footnote-marker superscript
   (⁴ at 23.22px = 36 × 0.645). */
.s4-body {
  position: absolute;
  left: 40px; top: 610px;
  width: 765px;
  display: flex; flex-direction: column;
  gap: 32px;
  color: #1e1e1e;
  font-variation-settings: "opsz" 14, "wdth" 100;
  z-index: 3;
}
.s4-body__block {
  display: flex; flex-direction: column;
  width: 100%;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.72px;
}
/* Bullet rows: 12px gap between. !important beats reveal.js core's
   `.reveal p { margin: 0 }` (0,2,2). Same pattern used on s2/s3 body. */
.s4-body__block p {
  margin-bottom: 12px !important;
  white-space: pre-wrap;
}
.s4-body__block p:last-child { margin-bottom: 0 !important; }
/* Label: bold + underline; Figma leads the line with 5 literal spaces (inside
   a non-bold span) so the underline starts at the word, not at the margin. */
.s4-body__label {
  font-weight: 700;
  font-variation-settings: "opsz" 14, "wdth" 100, "wght" 700;
  text-decoration: underline solid;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
}
/* Footnote-marker superscript on bullet 2's "area⁴". 23.22px (= 36 ×
   0.645) matches the same ratio S2/S3 use on their footnote sups. */
.s4-body__sup {
  font-size: 23.22px;
  vertical-align: super;
  line-height: 0;
}
/* 265:360 Body footnote. 21 / 400 / 1.3 / -0.42 rgba(0,0,0,0.8). Figma's
   parent Frame has whitespace-nowrap; the footnote stays single-line.
   Leading "⁴" sup at 13.545px (= 21 × 0.645) — same ratio + treatment
   as the S2 YouGov footnote sup and S3 footnote sups. */
.s4-body__footnote {
  font-size: 21px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.42px;
  color: rgba(0, 0, 0, 0.8);
  white-space: nowrap;
}
.s4-body__footnote-sup {
  font-size: 13.545px;
  vertical-align: super;
  line-height: 0;
}

/* =====================================================================
   SLIDE 5 — 1:1 from Figma node 271:4457 ("05-B-1", operator redesign
   2026-05-05). Geometry verified against mcp__figma-desktop__get_metadata
   + get_design_context for nodes 271:4458–271:4486. Fully static — no
   per-brand variables.
   The pricing line "$5K | $30K | $100K+" was removed in this pass; the
   body is now a 6-line bulleted footprint ladder bottom-anchored under
   the headline (Frame 23 → 271:4461 at left:112 bottom:184 w:784).
   The right half remains a full-height field photo (slide5-field.png,
   exported from Figma asset 03696a0e07e8a4c3a57790e75a3694274bf6481c.png
   at 1504×1046). The sunburst decor sits at the same (960, 49.5) anchor
   as Slides 1+3 but is fully covered by the field photo at z:2 — kept
   for 1:1 Figma fidelity.
   Defensive auto-fit on .s5-head__title (`data-fit="156,95,2,280"` —
   mirrors Slide 3). The 6-line body is static at 28px per Figma spec.
   ===================================================================== */

/* 271:4458 Decorative (rays). Same position + asset as Slides 1 + 3. The
   sunburst sits BEHIND the field photo (z:1 < z:2) and is therefore
   invisible at runtime — kept for 1:1 Figma fidelity. overflow:hidden
   matches the explicit clip Figma applies on the Decorative frame. */
.s5-decor {
  position: absolute;
  left: 50%; top: 49.5px;
  width: 912px; height: 981.244px;
  background: url("./assets/slide1-sunburst.png") left top / cover no-repeat;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

/* 271:4464 IMAGE FROM FIELD 1. Frame (960, 50) w:910 h:980. Source asset
   1504×1046. background-size:cover scales source by 0.937 → 1409×980,
   leaving 499px of horizontal pan range. background-position:82% center
   matches Figma's -45% (= -409.5px on the 910 container) shift, panning
   the visible window ~200px right of center to land on the camera +
   spectators rather than the empty field. (Math: 0.82 × 499 ≈ 409.) */
.s5-field {
  position: absolute;
  left: 960px; top: 50px;
  width: 910px; height: 980px;
  background: url("./assets/slide5-field.png") 82% center / cover no-repeat;
  z-index: 2;
  pointer-events: none;
}

/* 271:4459 Border. 2px solid black, inset (48, 48) w:1824 h:984. Same as S1/S3. */
.s5-border {
  position: absolute;
  left: 48px; top: 48px;
  width: 1824px; height: 984px;
  border: 2px solid var(--color-1);
  pointer-events: none;
  z-index: 5;
}

/* 271:4460 Line. Vertical 2px line at x=960 from y=49.06 to y=1032.
   Same metrics as S1+S3 — sits ON the divider crossing the field photo. */
.s5-line {
  position: absolute;
  left: 960px; top: 49.06px;
  width: 2px; height: 982.945px;
  background: var(--color-1);
  z-index: 4;
  pointer-events: none;
}

/* 271:4465 Headline frame. left:112 top:112 w:784 h:280. Frame height is
   exactly 2 lines at 156 × 0.9 = 280.8 ≈ 280 — sized for the BIG headline
   to wrap up to 2 lines. Same dimensions as Slide 3's .s3-head. */
.s5-head {
  position: absolute;
  left: 112px; top: 112px;
  width: 784px;
  z-index: 3;
}
/* 271:4465 Headline title. 156 / 800 / 0.9 / -3.12 / uppercase / wdth 75.
   Tracking scales linearly: -0.02em × 156 = -3.12px. The BIG headline
   treatment matches Slide 3 (and Slide 5 in the design pass).
   Auto-fit data-fit="156,95,2,280": max 156, floor 95, max 2 lines, height
   budget 280px. With "PICK YOUR FOOTPRINT." (19 chars) at wdth=75 the
   line wraps near ~155-156px to 2 lines; binary search settles within
   1-2px of 156 to clear the 280px height budget cleanly. Floor 95 +
   maxLines 2 are insurance for any future operator edit that lengthens
   the line. */
.s5-head__title {
  font-size: 156px;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -3.12px;
  text-transform: uppercase;
  font-variation-settings: "opsz" 14, "wdth" 75;
  color: var(--color-1);
  width: 100%;
  margin: 0;
}

/* 271:4461 Frame 23 content block. Bottom-anchored frame at left:112
   bottom:128 w:784, flex-col gap:16, items-start. Six body lines, each
   28/400/1.3/-0.56 (Bricolage Grotesque, wdth 100, opsz 14) — a footprint
   ladder. Block height ~296px: 6 × 36.4 line-height + 5 × 16 gaps = 298,
   matching Figma's 296. Bottom-anchored so the block grows upward into
   the empty space below the headline (top:112+280 = bottom:392) without
   crowding. */
.s5-content {
  position: absolute;
  left: 112px; bottom: 128px;
  width: 784px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  color: var(--color-1);
  font-variation-settings: "opsz" 14, "wdth" 100;
  z-index: 3;
}

/* 271:4463 / 4476 / 4477 / 4478 / 4484 / 4486 — six body lines.
   Each line: 28 / 400 / 1.3 / -0.56 / wdth 100 / opsz 14. Inline <strong>
   spans render the bold label segments (700 weight) per Figma's mixed-
   weight runs. text-wrap:pretty mirrors the body copy treatment used on
   Slides 1+3. */
.s5-content__line {
  width: 100%;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.56px;
  text-wrap: pretty;
  margin: 0;
}
.s5-content__line strong {
  font-weight: 700;
}

/* 271:4466 Top-right header. Frame (1554, 66) w:302 h:40.175. Mirrors
   Slide 2/3 .s2-header / .s3-header — same SVG, same fonts, same
   CocoSharp→Bricolage Bold fallback. Markup duplicated rather than
   partial-extracted to match the existing per-slide pattern. */
.s5-header {
  position: absolute;
  left: 1554px; top: 66px;
  width: 302px; height: 40.175px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  z-index: 6;
  pointer-events: none;
}
.s5-header__ig {
  display: inline-flex;
  width: 28px; height: 28px;
  flex-shrink: 0;
}
.s5-header__text {
  font-family: "CocoSharp", "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.18px;
  color: #ffffff;
  white-space: nowrap;
  flex-shrink: 0;
}
.s5-header__logo {
  display: inline-flex;
  width: 100px; height: 40.175px;
  flex-shrink: 0;
}

/* =====================================================================
   SLIDE 6 — 1:1 from Figma node 265:414 ("06-B", operator design pass
   2026-05-05). Geometry verified against mcp__figma-desktop__get_metadata
   + get_design_context for nodes 265:415–265:568. Fully static — no
   per-brand variables (audit-confirmed in
   projects/sponsor-deck-v2-audit-2026-05-05.md §"Slide 6 (NEW)").

   Layout differences from S1-5:
     • Black canvas (`var(--color-1)`) — only slide with a dark background.
       The reveal-core override at the top of this file sets every section
       to `background: var(--color-3)` (tan); the [data-slide="6"] rule
       below uses higher specificity (0,1,1 vs 0,3,1 with !important to be
       safe) to override.
     • No outer border + no vertical divider.
     • Reeplayer logo sits TOP-LEFT (not top-right).
     • Top-right is Instagram + reeplayer.com only (no logo duplicate).

   Defensive auto-fit on .s6-head (`data-fit="146,80,2,262"`) per the
   saved-memory rule — current copy fits at the design size, but bounds
   are insurance for future operator edits that lengthen the phrase.
   ===================================================================== */

/* Black canvas. Specificity 0,2,0 (compared to .reveal .slides section
   at 0,3,0); !important is needed to beat the reveal override layer.
   No border-color override needed — there is no .s6-border element on
   this slide, so the global border styling is moot. */
.reveal .slides section[data-slide="6"] {
  background: var(--color-1) !important;
}

/* 265:423 reeplayer-logo_white_topBottomPadding 1. Frame at (226, 48)
   w:157.79 h:80. The Figma frame name encodes vertical padding — the
   visible wordmark is 157.854 × 33.789 (per imgGroup1's viewBox), and
   it sits at top:23.13 (= (80-33.79)/2 ≈ 23.1, vertically centered)
   inside the 80px-tall frame. Render the SVG at its native viewBox
   ratio (~4.67:1) inside a 157.79 × 33.79 box, vertically nudged by
   23.13px to match Figma's padding. */
.s6-logo {
  position: absolute;
  left: 226px; top: calc(48px + 23.13px);
  width: 157.79px; height: 33.79px;
  z-index: 3;
  pointer-events: none;
}

/* 265:437 Top-right header. Frame (1508, 70.175) w:188 h:28. right:224
   from slide right edge (= 1920 - 1508 - 188). Three visible parts in
   order: Instagram icon → bullet · → "reeplayer.com" link.
   The Figma frame is 28px tall (icon-row), with the IG container at
   28×28 and a sibling <ul><li class="list-disc"> rendering the bullet
   beside the text. We reproduce the bullet via an explicit <span>
   character — easier to align than browser's list-marker. */
.s6-header {
  position: absolute;
  right: 224px; top: 70.175px;
  height: 28px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  z-index: 6;
}
/* IG icon. Figma 265:563 frame is 28×28 with the actual icon content
   inset 12.5%/12.81% from the edges (effective icon ≈ 21×21 inside a
   28-tall row). We render the SVG at 21×21 so the visible icon matches
   Figma's rendered size; the surrounding 28×28 box behavior is preserved
   by the parent flex row's vertical centering. */
.s6-header__ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  flex-shrink: 0;
}
.s6-header__ig svg {
  width: 21px;
  height: 21px;
  display: block;
}
/* Bullet between IG and text — replaces Figma's <ul><li class="list-disc">
   marker. Middle-dot character (·, U+00B7) sized to match the 18px text
   line height; tuned margins reproduce the Figma list-disc + ms-[calc()]
   spacing visually. */
.s6-header__bullet {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 8px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  user-select: none;
}
/* "reeplayer.com" link. 18px CocoSharp Bold (Bricolage Bold fallback —
   CocoSharp not loaded; per audit Q1 the fallback is acceptable),
   underlined, white, nowrap. Same visual treatment as the bullet's
   text color (both white), distinct from S1-5's same-named class which
   the IG/text/logo header uses. */
.s6-header__text {
  font-family: "CocoSharp", "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.18px;
  color: #ffffff;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  font-variation-settings: "opsz" 14, "wdth" 100;
}

/* 265:415 Frame 13. Bottom-anchored content block at left:225 bottom:351
   w:1442 h:391. flex-col gap:56 between headline and CTA. Self-contained
   on black bg — children inherit white/tan colors from their own rules. */
.s6-block {
  position: absolute;
  left: 225px; bottom: 351px;
  width: 1442px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 56px;
  z-index: 3;
}

/* 265:416 / 265:417 Headline. 146 / 800 / 0.9 / -2.92 / uppercase / wdth
   75 / opsz 14, white. Width 100% of parent (1442px); two <p> children
   render as separate lines, each at line-height 0.9 (= 131.4px), giving
   a total block height of ~262px (matches Figma's 262 frame height).
   Auto-fit data-fit="146,80,2,262" wired on the headline element itself;
   auto-fit walks block-level children and sums per-child line counts, so
   it will see the two <p>s as 2 lines. */
.s6-head {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 146px;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -2.92px;
  text-transform: uppercase;
  font-variation-settings: "opsz" 14, "wdth" 75;
  color: #ffffff;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.s6-head p {
  margin: 0;
  line-height: 0.9;
}

/* 265:418 CTA wrapper. h:73 (= 1 × 56 × 1.3 ≈ 73). Figma uses
   `justify-center` on this row, BUT the inner <a> has `flex-[1_0_0]`
   (flex-grow:1, basis:0) which makes the link fill the entire 1442px
   row — and `justify-center` becomes a no-op. The <a>'s text inside
   defaults to text-align:start, so the visible text begins at the
   parent's left edge (= 225px absolute). Matching that here:
   align the link itself to the start (its text-align:start does the
   rest). Earlier centered version misread the Figma layout. */
.s6-cta-wrap {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

/* 265:419 CTA link. 56 / 400 / 1.3 / -1.12 / wdth 100 / opsz 14,
   underlined, color var(--color-3) (tan/cream) on the black canvas. */
.s6-cta {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 56px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -1.12px;
  font-variation-settings: "opsz" 14, "wdth" 100;
  color: var(--color-3);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* 265:420 Decorative bar. left:225 top:881 w:1647 h:151. Source PNG
   3294×302 (= 2× the rendered size). object-fit:cover preserves the
   aspect ratio while filling the box; the source asset is already at
   the right ratio so no cropping occurs. */
.s6-decor {
  position: absolute;
  left: 225px; top: 881px;
  width: 1647px; height: 151px;
  object-fit: cover;
  pointer-events: none;
  z-index: 2;
}

/* 265:421 Page-counter Label. Box at left:48 top:881 w:178 h:151,
   1px solid tan border. Centers the "6 / 6" text via flex. */
.s6-page-label {
  position: absolute;
  left: 48px; top: 881px;
  width: 178px; height: 151px;
  border: 1px solid var(--color-3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
/* 265:422 "6 / 6" text. 28 / 700 / 1.25 / 0 / wdth 100 / opsz 14,
   color tan, centered. Hardcoded string (audit Q7) — must be updated
   manually if the deck slide count changes. */
.s6-page-label__text {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  font-variation-settings: "opsz" 14, "wdth" 100;
  color: var(--color-3);
  text-align: center;
  white-space: nowrap;
  margin: 0;
}

/* =====================================================================
   Custom nav overlay (outside Figma — app chrome).
   - .nav-bar    → bottom-center container with chevrons and dots.
   - .nav-arrow  → visible <button> chevrons either side of the dots.
   - .nav-dots   → unchanged dot-row markup; kept as a child of .nav-bar
                   so the existing init.js dot wiring still works.
   - .nav-edge   → invisible full-height left/right click zones (kept
                   for users who prefer side-clicks for navigation).

   Per-slide variants: init.js writes `body[data-active-slide="N"]` on
   slide change. The "white nav chrome on Slide 6" rule below targets
   `body[data-active-slide="6"]` to switch dot/arrow color from black
   (default) to white (visible against Slide 6's black canvas).
   ===================================================================== */
/* Anchored to the active slide via init.js reparentNav (appendChild on
   slidechanged + ready). position:absolute places the bar in the slide's
   own 1920×1080 coordinate space, so it scales with reveal.js's
   transform at any viewport size — no viewport math needed.
   bottom:8px sits just above the slide's bottom border (slide ends at
   y=1080; border is at y=1032 with 48px inset). Chrome dimensions are
   84% of the original (was 80%, bumped 5% on operator request): arrows
   32→27.3, font 22→18.9, dots 10→8.4, gaps 12→10.5 / 16→13.65. */
.nav-bar {
  position: absolute; left: 50%;
  /* Anchor TOP just below the black border line (border bottom edge sits
     at slide y=1032 = 48px from slide bottom). Putting the bar top at
     `bottom: 40px` places it ~8px below that line, inside the 48px gutter.
     transform-origin: 50% 0% pivots the counter-scale at the bar's TOP, so
     the bar grows DOWNWARD into the gutter (and slightly past the slide
     edge at very high counter) instead of upward into the bordered area. */
  bottom: 40px;
  transform: translate(-50%, 100%) scale(var(--nav-counter-scale, 1));
  transform-origin: 50% 0%;
  display: flex; align-items: center; gap: 13.65px;
  z-index: 100;
}
.nav-dots {
  display: flex; gap: 10.5px;
  align-items: center;
}
.nav-dots button {
  width: 8.4px; height: 8.4px; border-radius: 50%;
  border: 1.5px solid var(--color-1);
  background: transparent; cursor: pointer; padding: 0;
  transition: background 150ms, border-color 150ms;
}
.nav-dots button[aria-current="true"] { background: var(--color-1); }

/* Visible L/R chevron buttons — one each side of the dot row. Sized so
   they read as a navigation control without overpowering the dots.
   Chevron glyphs (‹ ›) are kept text rather than SVG so they inherit
   the dot color via `color`, which the Slide-6 white variant flips. */
.nav-arrow {
  width: 27.3px; height: 27.3px;
  border-radius: 50%;
  border: 1.5px solid var(--color-1);
  background: transparent;
  color: var(--color-1);
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  font-size: 18.9px;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 150ms, color 150ms, border-color 150ms;
}
.nav-arrow:hover { background: var(--color-1); color: var(--color-3); }
.nav-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Slide-6 white nav variant — flip every nav-chrome element from black
   to white when Slide 6 is the active section. Targets the body data
   attribute set by init.js on `slidechanged` + `ready`. */
body[data-active-slide="6"] .nav-dots button,
body[data-active-slide="6"] .nav-arrow {
  border-color: #ffffff;
  color: #ffffff;
}
body[data-active-slide="6"] .nav-dots button[aria-current="true"] {
  background: #ffffff;
}
body[data-active-slide="6"] .nav-arrow:hover {
  background: #ffffff;
  color: var(--color-1);
}

.nav-edge {
  position: fixed; top: 0; bottom: 0; width: 12%;
  z-index: 90; cursor: pointer; background: transparent; border: 0;
}
.nav-edge.left  { left: 0; }
.nav-edge.right { right: 0; }
.nav-edge:focus-visible { outline: 2px solid var(--accent); outline-offset: -8px; }

/* Slide 3: the right nav-edge (z:90, position:fixed) sits above the video
   player (z:2 inside reveal.js's transform stacking context), blocking the
   seek bar, volume, and fullscreen button in the right 12% of the viewport.
   Disable pointer-events on Slide 3 only; the visible .nav-arrow buttons in
   .nav-bar remain fully functional for slide navigation. */
body[data-active-slide="3"] .nav-edge.right {
  pointer-events: none;
}

/* =====================================================================
   Print — reveal's ?print-pdf path.
   ===================================================================== */
@media print {
  @page { size: 1920px 1080px; margin: 0; }
  html, body { overflow: visible; background: var(--color-3); }
  .nav-bar, .nav-dots, .nav-arrow, .nav-edge { display: none !important; }
}