/* ============================================================
   DECK KIT — shared presentation chrome.
   The stage is a fixed 1920×1080 design plane scaled to the
   window; every size inside is px (viewport units would
   double-scale under the stage transform). A deck adds its own
   per-slide styles on top; this file never mentions a concrete
   slide. Load order: site css → deck.css → the deck's <style>.
   ============================================================ */

html, body { height: 100%; margin: 0; overflow: hidden; }
/* The engine repaints these with the active slide's own colour, so the
   letterbox around the fixed 16:9 plane stops reading as a black frame. */
body { background: #05070d; transition: background-color .4s ease; }
body.is-capture { cursor: none; }

.deck { position: fixed; inset: 0; }
.deck__stage {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(1);
  background: #05070d;
  font-family: 'Inter Variable', Inter, system-ui, sans-serif;
  opacity: 0; transition: opacity .25s ease, background-color .4s ease;
  overflow: hidden;
}
body.is-ready .deck__stage { opacity: 1; }

/* ---- slides ------------------------------------------------ */
.slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden; /* shown via GSAP autoAlpha */
  background: var(--pax-bg-canvas, #fff);
  color: var(--pax-text-primary, #111827);
  overflow: hidden;
}
.slide.is-active { z-index: 2; }

.accent { color: var(--pax-brand-500, #ff5119); }

/* ---- slide canon: header + claims + stage ------------------ */
/* gap doubles as the minimum air under the title. At 26px a cluster that fills
   its stage came within 37px of the headline and read as if it were touching
   it; 48px keeps every slide clear of the head. */
.sl { position: relative; height: 100%; padding: 56px 120px 48px; box-sizing: border-box; display: flex; flex-direction: column; gap: 48px; }
/* The head is ONE left block. Claims used to sit opposite the title, which put
   two headlines on the same optical line and made the eye jump 800px right and
   back before it ever reached the demo — they now live beside what they
   describe (see .claims--lede / .claims--rail). A title-only head is also a
   constant height, so the stage no longer resizes slide to slide. */
.sl__head { flex: none; }
.sl__head > div { min-width: 0; }
.sl__kicker {
  margin: 0 0 12px;
  font-family: 'JetBrains Mono Variable', 'JetBrains Mono', monospace;
  font-size: 16px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pax-brand-500, #ff5119);
}
.sl__title {
  margin: 0;
  font-size: 68px; line-height: 1.05; font-weight: 650; letter-spacing: -0.025em;
}
/* Claims are a panel in the right-hand column, never a second headline beside
   the title. Each slide frees that column by narrowing whatever it CAN narrow —
   usually the whole replica (via --sw), on the journey slide only its prompt
   card. Narrowing costs nothing: --sw is a design width, so a tighter cluster
   just wins a bigger fit scale — the interface reads LARGER, not smaller.
   The panel sits outside .stage-cap, so the fit scale never touches its type
   and the claims are the same size on every slide. */
.claims {
  list-style: none; margin: 0; flex: none;
  display: flex; flex-direction: column; gap: 14px;
  width: 400px; padding: 32px;
  background-color: var(--pax-bg-rail, #f4f5f7);
  border-radius: 20px;
}
.claims__item {
  display: flex; align-items: baseline; gap: 13px;
  font-size: 22px; line-height: 1.32; font-weight: 500;
  color: var(--pax-text-secondary, #4b5563);
}
.claims__item b, .claims__item strong { color: var(--pax-text-primary, #111827); font-weight: 650; }
.claims__tick {
  font-family: 'JetBrains Mono Variable', 'JetBrains Mono', monospace;
  font-weight: 600; color: var(--pax-brand-500, #ff5119); flex: none;
}

/* align-items must stay `stretch`: the stage sizes itself off its own box, so
   centring the row here would collapse its height and the fit scale with it.
   The panel aligns itself (align-self below). */
.sl__body { display: flex; flex: 1; gap: 56px; min-height: 0; min-width: 0; }
/* Centred, always. The cluster is centred inside its stage, so the stage's
   middle IS the visual's middle whatever its height or scale — the panel and
   the visual share one centre line on every slide, with no per-slide rule. */
.sl__body > .claims,
.sl__body > .sl__aside { align-self: center; }
/* A slide can stack more than the claims in the right column (helpdesk puts its
   KPI pair under them). Everything in it shares the panel's width and edges. */
.sl__aside { width: 400px; flex: none; display: flex; flex-direction: column; gap: 20px; }
.sl__aside > .claims { width: auto; }
/* Left-aligned, and scaled FROM the left edge. Centring put the cluster's left
   edge at (stage - cluster)/2, so the moment a slide became height-bound the
   interface drifted right by a different amount on every slide — 18 to 69px off
   the headline. Anchoring left makes one vertical line for kicker, title,
   prompt card and interface; the right edge is the one that floats. */
.sl__stage { flex: 1; display: flex; justify-content: flex-start; align-items: center; min-height: 0; min-width: 0; }
/* The engine wraps every stage's content in .stage-cap and scales it to fill
   the free space (see fitStages) — so a replica is always as large as the
   slide allows, instead of the site's arm's-length 13px product type. */
.stage-cap { width: var(--sw, 1400px); flex: none; transform-origin: left center; }

/* ---- site replicas inside a deck --------------------------- */
.sl__stage .pax-frame-wrap { width: 100%; }
.sl__stage .pax-frame-caption { margin-top: 14px; font-size: 13px; }
/* The site caps each replica for a 1200px page column (860–920px). In a deck
   the slide IS the frame, so the deck's --sw governs — release the caps. */
.sl__stage .pax-frame-wrap,
.sl__stage .hd-kpis,
.sl__stage .rs__beat1-stage { max-width: none !important; }

/* ---- dark-slide glow (site blobs are light-tuned) ---------- */
.deck-glow { position: absolute; inset: 0; pointer-events: none; }
.deck-glow::before {
  content: ''; position: absolute; width: 1400px; height: 1400px;
  left: 46%; top: -46%;
  background: radial-gradient(circle, rgba(255, 81, 25, .17) 0%, rgba(255, 81, 25, 0) 62%);
}
.deck-glow::after {
  content: ''; position: absolute; width: 1100px; height: 1100px;
  left: 62%; top: 34%;
  background: radial-gradient(circle, rgba(255, 179, 71, .10) 0%, rgba(255, 179, 71, 0) 60%);
}
.deck-glow--soft::before { opacity: .55; }
.deck-glow--soft::after { opacity: .55; }
.deck-watermark {
  position: absolute; right: -120px; top: 50%; transform: translateY(-50%);
  width: 760px; height: 844px; opacity: .07; pointer-events: none;
}

/* ---- deck chrome (progress / hud / notes / splash) --------- */
.deck__progress {
  position: absolute; left: 24px; right: 24px; top: 18px;
  display: flex; gap: 8px; z-index: 50;
}
.deck__seg {
  flex: 1; height: 3px; padding: 0; border: 0; border-radius: 2px;
  background: rgba(127, 127, 140, .28); overflow: hidden;
}
.deck__seg-fill { display: block; width: 100%; height: 100%; background: var(--pax-brand-500, #ff5119); transform: scaleX(0); transform-origin: left center; }
.deck__hud {
  position: absolute; right: 28px; bottom: 20px; z-index: 50;
  font-family: 'JetBrains Mono Variable', 'JetBrains Mono', monospace;
  font-size: 13px; letter-spacing: .06em;
  color: rgba(127, 127, 140, .75);
  user-select: none;
}

/* ---- player bar -------------------------------------------
   Viewport-anchored (legible at any window size), auto-hiding, and never
   present under ?capture. Owns the progress segments and the slide counter,
   which the engine moves in here at boot. */
.deck__bar {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(14px);
  z-index: 80; opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 18px;
  width: min(1120px, calc(100vw - 48px)); box-sizing: border-box;
  padding: 10px 16px; border-radius: 999px;
  background: rgba(10, 12, 20, .82); backdrop-filter: blur(10px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .32);
  font-family: 'Inter Variable', Inter, system-ui, sans-serif;
  transition: opacity .28s ease, transform .28s ease;
}
.deck__bar.is-shown { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.deck__group { display: flex; align-items: center; gap: 4px; flex: none; }
.deck__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 34px; height: 34px; padding: 0 9px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: rgba(245, 240, 238, .82);
  font: inherit; font-size: 15px; line-height: 1;
  transition: background-color .15s ease, color .15s ease;
}
.deck__btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.deck__btn--play { background: rgba(255, 255, 255, .14); }
.deck__btn.is-off { color: rgba(245, 240, 238, .45); }
.deck__chip { font-size: 13px; font-weight: 550; padding: 0 12px; color: rgba(245, 240, 238, .6); }
.deck__chip.is-on { background: var(--pax-brand-500, #ff5119); color: #fff; }
.deck__chip.is-on:hover { background: var(--pax-brand-600, #e8410a); }
.deck__seg-group { display: flex; align-items: center; gap: 4px; padding-left: 6px; }
.deck__bar-label {
  margin-right: 4px;
  font-family: 'JetBrains Mono Variable', 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(190, 195, 210, .5);
}
/* progress + counter, relocated into the bar */
.deck__progress--inbar { position: static; flex: 1; min-width: 0; gap: 5px; }
.deck__progress--inbar .deck__seg { height: 5px; cursor: pointer; transition: background-color .15s ease; }
.deck__progress--inbar .deck__seg:hover { background: rgba(200, 205, 220, .5); }
.deck__count { position: static; flex: none; font-size: 12px; color: rgba(190, 195, 210, .6); }
body.is-capture .deck__bar { display: none; }
.deck__notes {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
  max-width: 1420px; z-index: 60;
  padding: 16px 26px; border-radius: 12px;
  background: rgba(8, 10, 18, .82); color: #e8e6e3;
  font-size: 19px; line-height: 1.5;
  display: none;
}
body.has-notes .deck__notes { display: block; }
body.is-capture .deck__progress, body.is-capture .deck__hud, body.is-capture .deck__notes { display: none; }

.deck__splash {
  position: absolute; inset: 0; z-index: 100;
  background: #05070d; display: none;
  align-items: center; justify-content: center;
  cursor: pointer;
}
/* Shown for recording AND whenever narration will play — browsers require a
   user gesture before audio, and a clean recording needs a clean start. */
body.is-capture .deck__splash { display: flex; cursor: default; }
body.has-voice .deck__splash { display: flex; }
.deck__splash-hint {
  font-family: 'JetBrains Mono Variable', 'JetBrains Mono', monospace;
  font-size: 15px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(190, 195, 210, .5);
}

/* ---- poster (a shared link opens here) --------------------- */
/* Sized in vmin, not px: the poster is the one surface that is NOT inside the
   1920×1080 stage, so it must read on a phone as well as a projector. */
.deck__poster {
  text-align: center; padding: 0 6vw;
  font-family: 'Inter Variable', Inter, system-ui, sans-serif;
  color: #f5f0ee;
}
.deck__poster-logo { width: min(230px, 34vw); height: min(61px, 9vw); margin-bottom: min(56px, 8vh); }
.deck__poster-kicker {
  margin: 0 0 14px;
  font-family: 'JetBrains Mono Variable', 'JetBrains Mono', monospace;
  font-size: clamp(11px, 1.5vmin, 16px); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--pax-brand-500, #ff5119);
}
.deck__poster-title {
  margin: 0 0 min(44px, 6vh);
  font-size: clamp(28px, 6vmin, 68px); line-height: 1.08; font-weight: 650; letter-spacing: -0.025em;
}
.deck__play {
  display: inline-flex; align-items: center; gap: 12px;
  padding: clamp(12px, 1.8vmin, 18px) clamp(26px, 4vmin, 40px);
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--pax-brand-500, #ff5119); color: #fff;
  font: inherit; font-size: clamp(15px, 2.2vmin, 21px); font-weight: 600;
  box-shadow: 0 10px 34px rgba(255, 81, 25, .34);
  transition: transform .18s ease, box-shadow .18s ease;
}
.deck__play:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(255, 81, 25, .44); }
.deck__poster-meta {
  margin: min(26px, 3.5vh) 0 0;
  font-family: 'JetBrains Mono Variable', 'JetBrains Mono', monospace;
  font-size: clamp(11px, 1.5vmin, 15px); letter-spacing: .14em; text-transform: uppercase;
  color: rgba(190, 195, 210, .55);
}
.deck__poster-rotate { display: none; margin: 18px 0 0; font-size: 13px; color: rgba(190, 195, 210, .5); }
@media (orientation: portrait) and (max-width: 820px) { .deck__poster-rotate { display: block; } }

/* ---- replay (offered when a shared link reaches the end) --- */
.deck__replay {
  position: absolute; left: 50%; bottom: 6vh; transform: translateX(-50%) translateY(8px);
  z-index: 70; opacity: 0; pointer-events: none;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 24px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(8, 10, 18, .78); color: #f5f0ee;
  font-family: 'Inter Variable', Inter, system-ui, sans-serif; font-size: 16px; font-weight: 550;
  backdrop-filter: blur(6px);
  transition: opacity .35s ease, transform .35s ease;
}
.deck__replay.is-shown { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.deck__replay:hover { background: rgba(8, 10, 18, .92); }