/* =====================================================================
   AnchorWorks — Category King Strategy Deck
   Internal war-room doctrine deck · Keynote-style slide mode
   Brand: 70/15/10/5 · DM Serif Display + Inter · gold earned, never loud
   Tokens copied from the live site (Three/css/styles-kk.css) so the deck is
   self-contained but pixel-consistent with myanchorworks.com.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  --ocean:      #1F2326;
  --ocean-2:    #23282b;
  --panel:      #181C1E;
  --charcoal:   #0F1214;
  --charcoal-2: #0a0c0d;
  --bone:       #EAE6DF;
  --gold:       #C6A66A;
  --gold-deep:  #a8884f;
  --gold-bright:#e3c98c;
  --steel:      #9AA1A6;

  --bone-dim:   rgba(234, 230, 223, 0.66);
  --bone-faint: rgba(234, 230, 223, 0.40);
  --hairline:   rgba(234, 230, 223, 0.10);
  --hairline-2: rgba(234, 230, 223, 0.06);
  --gold-glow:  rgba(198, 166, 106, 0.22);
  --gold-tint:  rgba(198, 166, 106, 0.08);
  --gold-line:  rgba(198, 166, 106, 0.30);
  --alarm:      #c0563f; /* warning lights only — used very sparingly */

  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Slide type scale — sized against the 16:9 stage (cqi units), so text
     scales with the stage rather than the viewport. */
  --fs-kicker:   clamp(0.62rem, 0.9cqi, 0.95rem);
  --fs-display:  clamp(2.2rem, 7.2cqi, 6.2rem);
  --fs-h1:       clamp(1.9rem, 5.4cqi, 4.6rem);
  --fs-h2:       clamp(1.5rem, 4.0cqi, 3.3rem);
  --fs-h3:       clamp(1.15rem, 2.2cqi, 1.95rem);
  --fs-lead:     clamp(1rem, 1.85cqi, 1.55rem);
  --fs-body:     clamp(0.9rem, 1.45cqi, 1.18rem);
  --fs-sm:       clamp(0.75rem, 1.15cqi, 0.95rem);
  --fs-label:    clamp(0.6rem, 0.95cqi, 0.82rem);

  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;

  --radius:     14px;
  --radius-lg:  22px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-soft: 0 30px 80px -30px rgba(0, 0, 0, 0.75);
  --shadow-card: 0 24px 60px -28px rgba(0, 0, 0, 0.85);
  --grain: url("../assets/grain-tile.webp");

  --stage-pad: clamp(2.5rem, 6cqi, 6rem);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--bone);
  background: var(--charcoal-2); /* matte letterbox bars */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--gold); color: var(--charcoal); }

h1, h2, h3, h4 {
  font-family: var(--serif); font-weight: 400; line-height: 1.04;
  letter-spacing: -0.012em; color: var(--bone);
}
em { font-style: italic; color: var(--gold-bright); }
strong { font-weight: 600; color: var(--bone); }

/* =====================================================================
   Deck shell — 16:9 letterboxed stage, one slide visible at a time
   ===================================================================== */
.deck {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: var(--charcoal-2);
}

/* The stage holds the 16:9 frame and is the fullscreen target. */
.stage {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  background: var(--ocean);
  overflow: hidden;
  container-type: inline-size; /* enables cqi units for fluid slide type */
}

/* Each slide fills the stage; only .is-active is shown. */
.slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--stage-pad);
  background: var(--ocean);
  opacity: 0; visibility: hidden;
  transform: translateY(14px) scale(0.992);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease), visibility 0s linear 0.55s;
  overflow: hidden;
}
.slide.is-active {
  opacity: 1; visibility: visible;
  transform: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  z-index: 2;
}
/* Outgoing slide drifts the opposite way when moving backward */
.slide.is-prev { transform: translateY(-14px) scale(0.992); }

/* Section background variants */
.slide--deep { background: var(--charcoal); }
.slide--panel { background: var(--panel); }

/* Grain plate — never flat black */
.grain-plate::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--grain); background-size: cover; background-position: center;
  opacity: 0.5; mix-blend-mode: overlay; pointer-events: none; z-index: 0;
}
.grain-plate > * { position: relative; z-index: 1; }

/* Vignette overlay for cinematic depth on photo/hero slides */
.slide__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(10,12,13,0.55) 100%),
    linear-gradient(180deg, rgba(15,18,20,0.30), rgba(15,18,20,0.65));
}
.slide__bg { position: absolute; inset: 0; z-index: 0; }
.slide__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.slide__inner { position: relative; z-index: 2; width: 100%; }

/* --- Full-bleed photographic slide (cinematic hero, text reads over it) --- */
.slide--photo { padding: var(--stage-pad); }
.slide--photo .slide__bg img { opacity: 1; }
/* Left-weighted scrim so left-aligned text stays legible over the image */
.slide--photo .slide__veil {
  background:
    linear-gradient(90deg, rgba(13,16,18,0.94) 0%, rgba(13,16,18,0.80) 32%, rgba(13,16,18,0.40) 62%, rgba(13,16,18,0.08) 100%),
    linear-gradient(0deg, rgba(13,16,18,0.65), transparent 45%);
}
.slide--photo .slide__inner { max-width: 60%; }
/* Center-weighted scrim variant (for quotes / centered statements over photos) */
.slide--photo-center .slide__veil {
  background:
    radial-gradient(120% 100% at 50% 50%, rgba(13,16,18,0.55) 0%, rgba(13,16,18,0.86) 100%),
    linear-gradient(0deg, rgba(13,16,18,0.5), transparent 60%);
}
.slide--photo-center .slide__inner { max-width: 70%; margin-inline: auto; }

/* --- Full "art" slide: a composed brand graphic shown nearly full-bleed --- */
.slide--art { padding: clamp(1.2rem, 3cqi, 2.4rem); background: var(--charcoal-2); }
.slide--art .art-frame {
  position: relative; z-index: 2; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.slide--art .art-frame img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; border-radius: var(--radius); box-shadow: var(--shadow-card);
}
.slide__caption {
  position: absolute; left: 0; right: 0; bottom: clamp(1rem, 2.4cqi, 2rem); z-index: 3;
  text-align: center; font-size: var(--fs-sm); color: var(--bone-dim);
}
.slide__caption .eyebrow { margin-bottom: 0.5rem; }

/* Big pull-quote (over photo) */
.pullquote {
  font-family: var(--serif); font-size: var(--fs-display); line-height: 1.02;
  color: var(--bone); max-width: 18ch;
}
.pullquote--center { text-align: center; margin-inline: auto; }
.pullquote .q { color: var(--gold); }

/* Blueprint grid backdrop (subtle infrastructure texture) */
.slide--grid::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--hairline-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline-2) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 100% at 50% 50%, #000 30%, transparent 85%);
}

/* =====================================================================
   Typographic components
   ===================================================================== */
.eyebrow {
  font-family: var(--sans); font-size: var(--fs-kicker);
  letter-spacing: 0.32em; text-transform: uppercase; font-weight: 600;
  color: var(--gold); display: inline-flex; align-items: center; gap: 0.7rem;
  margin-bottom: 1.4rem;
}
.eyebrow::before {
  content: ""; width: 30px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: ""; width: 30px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.headline { font-family: var(--serif); font-size: var(--fs-h1); line-height: 1.04; max-width: 18ch; }
.headline--display { font-size: var(--fs-display); }
.headline--h2 { font-size: var(--fs-h2); }
.headline--wide { max-width: 24ch; }

.subheadline {
  font-family: var(--sans); font-size: var(--fs-lead); line-height: 1.5;
  color: var(--bone-dim); max-width: 60ch; margin-top: 1.3rem; font-weight: 400;
}

.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--bone-dim); max-width: 62ch; }
.body { font-size: var(--fs-body); color: var(--bone-dim); max-width: 60ch; line-height: 1.6; }
.text-gold { color: var(--gold); }
.text-steel { color: var(--steel); }
.text-center { text-align: center; }
.measure-center { margin-inline: auto; }

/* Thin gold divider line */
.gold-line { height: 1px; width: 120px; border: 0; margin: 1.6rem 0;
  background: linear-gradient(90deg, var(--gold), transparent); }
.gold-line--center { margin-inline: auto; background: linear-gradient(90deg, transparent, var(--gold), transparent); }

/* The recurring doctrine statement */
.doctrine-line {
  font-family: var(--serif); font-size: var(--fs-h3); line-height: 1.2;
  color: var(--bone); position: relative; padding-left: 1.4rem; max-width: 34ch;
}
.doctrine-line::before {
  content: ""; position: absolute; left: 0; top: 0.15em; bottom: 0.15em; width: 3px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  border-radius: 2px;
}
.doctrine-line em { color: var(--gold); font-style: italic; }
.doctrine-line--center { padding-left: 0; max-width: 30ch; margin-inline: auto; text-align: center; }
.doctrine-line--center::before { display: none; }

/* =====================================================================
   Layout helpers
   ===================================================================== */
.stack > * + * { margin-top: var(--space-md); }
.stack-sm > * + * { margin-top: var(--space-sm); }

.split-panel {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(1rem, 3cqi, 2.6rem);
  align-items: stretch; width: 100%;
}
.split-panel__divider { width: 1px; background: linear-gradient(180deg, transparent, var(--gold-line), transparent); }
.panel-col { display: flex; flex-direction: column; }
.panel-col__label {
  font-size: var(--fs-label); letter-spacing: 0.28em; text-transform: uppercase;
  font-weight: 600; color: var(--steel); margin-bottom: 1rem;
}
.panel-col--old .panel-col__label { color: var(--steel); }
.panel-col--new .panel-col__label { color: var(--gold); }

/* Generic card / diagram surface */
.diagram-card {
  background: var(--charcoal); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: clamp(1rem, 2.6cqi, 2rem);
  box-shadow: var(--shadow-card);
}

/* Bullet / point lists */
.points { list-style: none; display: flex; flex-direction: column; gap: 0.85rem; }
.points li {
  position: relative; padding-left: 1.6rem; color: var(--bone-dim); font-size: var(--fs-body); line-height: 1.5;
}
.points li::before {
  content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px;
  border: 1px solid var(--gold); transform: rotate(45deg);
}
.points--leak li::before { border-color: var(--alarm); background: rgba(192,86,63,0.18); }

/* Progression row: A → B → C → D */
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; }
.flow__node {
  font-family: var(--serif); font-size: var(--fs-h3); color: var(--bone);
  padding: 0.45em 0.8em; border: 1px solid var(--hairline); border-radius: 10px;
  background: var(--charcoal);
}
.flow__node--gold { border-color: var(--gold-line); color: var(--gold); }
.flow__arrow { color: var(--gold); font-size: var(--fs-h3); line-height: 1; }

/* =====================================================================
   Diagram 1 — Funnel vs Engine
   ===================================================================== */
.funnel {
  --w: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 0; margin-top: 1rem;
}
.funnel__stage {
  width: var(--w); text-align: center; padding: 0.7em 1em;
  background: linear-gradient(180deg, rgba(154,161,166,0.10), transparent);
  border: 1px solid var(--hairline); border-bottom: none;
  color: var(--bone-dim); font-size: var(--fs-sm); position: relative;
  clip-path: polygon(6% 0, 94% 0, 86% 100%, 14% 100%);
}
.funnel__stage:nth-child(1) { --w: 100%; }
.funnel__stage:nth-child(2) { --w: 80%; }
.funnel__stage:nth-child(3) { --w: 60%; }
.funnel__stage:nth-child(4) { --w: 40%; }
.funnel__leak {
  position: absolute; right: -1.6rem; top: 50%; transform: translateY(-50%);
  color: var(--alarm); font-size: var(--fs-sm); white-space: nowrap;
}

.engine-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem;
}
.engine-chip {
  border: 1px solid var(--gold-line); border-radius: 10px;
  background: var(--gold-tint); color: var(--bone);
  padding: 0.6em 0.7em; font-size: var(--fs-sm); text-align: center;
  display: flex; align-items: center; justify-content: center; min-height: 3.2em;
}

/* =====================================================================
   Diagram 2 — Authority Flywheel (SVG-driven, with HTML labels)
   ===================================================================== */
.flywheel { position: relative; width: min(64cqi, 520px); aspect-ratio: 1; margin: 0 auto; }
.flywheel svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flywheel__ring { fill: none; stroke: var(--gold-line); stroke-width: 1.5; }
.flywheel__arc {
  fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
  transition: stroke-dashoffset 1.6s var(--ease);
}
.slide.is-active .flywheel__arc { stroke-dashoffset: 0; }
.flywheel__hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; width: 44%;
}
.flywheel__hub-title { font-family: var(--serif); font-size: var(--fs-h3); color: var(--gold); line-height: 1.05; }
.flywheel__node {
  position: absolute; transform: translate(-50%, -50%);
  font-size: var(--fs-sm); color: var(--bone); text-align: center; width: 8.5em;
  opacity: 0; transition: opacity 0.5s var(--ease);
  text-shadow: 0 1px 6px rgba(10,12,13,0.9), 0 0 2px rgba(10,12,13,0.9);
}
.slide.is-active .flywheel__node { opacity: 1; }
.flywheel__node b { display: block; font-weight: 600; }
.flywheel__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold);
  margin: 0 auto 0.4em; box-shadow: 0 0 0 4px var(--gold-tint); }

/* =====================================================================
   Stat / proof figures
   ===================================================================== */
.stat-num { font-family: var(--serif); font-size: var(--fs-display); color: var(--bone); line-height: 1; }
.stat-num--gold { color: var(--gold); }
.stat-label { font-size: var(--fs-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel); }

/* =====================================================================
   Logo / brand marks
   ===================================================================== */
.brand-mark { height: clamp(28px, 4cqi, 54px); width: auto; }
.brand-mark--lg { height: clamp(42px, 7cqi, 92px); }

/* =====================================================================
   Shared diagram components (Acts II–VIII)
   ===================================================================== */

/* Warning lights (S8) */
.warn-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; }
.warn { text-align: center; padding: 1.2rem 0.6rem; border: 1px solid var(--hairline);
  border-radius: var(--radius); background: var(--charcoal); }
.warn__light { width: 16px; height: 16px; border-radius: 50%; margin: 0 auto 0.7rem;
  background: var(--alarm); box-shadow: 0 0 0 5px rgba(192,86,63,0.16), 0 0 18px rgba(192,86,63,0.6); }
.warn__name { font-family: var(--serif); font-size: var(--fs-h3); color: var(--bone); }
.warn__note { font-size: var(--fs-sm); color: var(--bone-dim); margin-top: 0.3rem; }

/* Authority meter — stacking assets (S9) */
.meter { display: flex; flex-direction: column; gap: 0.55rem; }
.meter__row { display: flex; align-items: center; gap: 0.8rem; }
.meter__bar { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  box-shadow: 0 0 12px var(--gold-glow); }
.meter__label { font-size: var(--fs-sm); color: var(--bone-dim); white-space: nowrap; min-width: 7em; }

/* Four-engine schematic (Diagram 3, S16) */
.engines4 { display: grid; grid-template-columns: 1fr 1.1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 0.9rem; align-items: stretch; }
.engines4 .core { grid-row: 1 / 3; grid-column: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  border: 1.5px solid var(--gold-line); border-radius: 50%; aspect-ratio: 1; align-self: center; margin: auto;
  background: radial-gradient(circle at 50% 40%, var(--gold-tint), transparent 70%); }
.engines4 .core b { font-family: var(--serif); font-size: var(--fs-h3); color: var(--gold); display: block; }
.engines4 .core span { font-size: var(--fs-sm); color: var(--bone-dim); }
.emod { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1rem;
  background: var(--charcoal); display: flex; flex-direction: column; gap: 0.3rem; }
.emod b { font-family: var(--serif); font-size: var(--fs-h3); color: var(--bone); }
.emod span { font-size: var(--fs-sm); color: var(--bone-dim); }
.emod .tag { font-size: var(--fs-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }

/* Generic card grid (S18 category kings, S37 roles) */
.cardgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
.cardgrid--4 { grid-template-columns: repeat(4, 1fr); }
.cardgrid--3 { grid-template-columns: repeat(3, 1fr); }
.card { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.1rem;
  background: var(--charcoal); }
.card__title { font-family: var(--serif); font-size: var(--fs-h3); color: var(--bone); margin-bottom: 0.3rem; }
.card__title--gold { color: var(--gold); }
.card__sub { font-size: var(--fs-sm); color: var(--bone-dim); }
.card__list { list-style: none; display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.5rem; }
.card__list li { font-size: var(--fs-sm); color: var(--bone-dim); padding-left: 1rem; position: relative; }
.card__list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 5px; height: 5px;
  background: var(--gold); transform: rotate(45deg); }

/* Vertical ladder (S19 category ladder) */
.ladder { display: flex; flex-direction: column; gap: 0; }
.ladder__rung { padding: 0.7em 1.1em; border-left: 2px solid var(--hairline);
  color: var(--bone-dim); font-family: var(--serif); font-size: var(--fs-h3); }
.ladder__rung--top { border-left-color: var(--gold); color: var(--gold);
  background: linear-gradient(90deg, var(--gold-tint), transparent); }

/* Word wall (S21 doctrine board) */
.word-wall { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.word-wall .word { font-family: var(--serif); font-size: var(--fs-h3); color: var(--bone);
  padding: 0.4em 0.8em; border: 1px solid var(--hairline); border-radius: 10px; background: var(--charcoal); }
.word-wall .word--gold { color: var(--gold); border-color: var(--gold-line); background: var(--gold-tint); }

/* Layered stack (Diagram 4 ServiceTitan/AnchorWorks, S22/S24) */
.layers { display: flex; flex-direction: column; gap: 0.7rem; }
.layer { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1rem 1.3rem;
  background: var(--charcoal); }
.layer--record { border-color: var(--hairline); }
.layer--intel { border-color: var(--gold-line); background: var(--gold-tint); }
.layer--growth { border-color: var(--gold-line);
  background: linear-gradient(90deg, var(--gold-tint), transparent); }
.layer__role { font-size: var(--fs-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--steel); }
.layer__name { font-family: var(--serif); font-size: var(--fs-h3); color: var(--bone); }
.layer--intel .layer__name, .layer--growth .layer__name { color: var(--gold); }

/* Ecosystem vertical stack (Diagram 5, S26) */
.eco { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.eco__node { font-family: var(--serif); font-size: var(--fs-body); color: var(--bone);
  letter-spacing: 0.01em; }
.eco__node--head { font-size: var(--fs-h3); color: var(--gold); }
.eco__arr { color: var(--gold); font-size: 0.8rem; line-height: 1; opacity: 0.7; }

/* Seal / badge (S28) */
.seal { width: clamp(120px, 22cqi, 200px); aspect-ratio: 1; border-radius: 50%; margin: 0 auto;
  display: grid; place-items: center; text-align: center;
  border: 2px solid var(--gold); background: radial-gradient(circle, var(--gold-tint), transparent 72%);
  box-shadow: 0 0 0 6px rgba(198,166,106,0.08), inset 0 0 30px rgba(198,166,106,0.12); }
.seal__inner { font-family: var(--serif); color: var(--gold); font-size: var(--fs-h3); line-height: 1.05; padding: 0 1rem; }
.seal__star { color: var(--gold); font-size: 1.2rem; }

/* Timeline (S29 events ladder, S35 four-month sprint) */
.timeline { display: grid; gap: 0.7rem; }
.timeline__row { display: grid; grid-template-columns: 8.5em 1fr; gap: 1rem; align-items: baseline;
  padding-bottom: 0.7rem; border-bottom: 1px solid var(--hairline-2); }
.timeline__when { font-size: var(--fs-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.timeline__what { font-family: var(--serif); font-size: var(--fs-h3); color: var(--bone); }
.timeline__what span { display: block; font-family: var(--sans); font-size: var(--fs-sm); color: var(--bone-dim); margin-top: 0.2rem; }

/* Horizontal 4-phase sprint (Diagram 7, S35) */
.sprint { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.sprint::before { content: ""; position: absolute; top: 26px; left: 6%; right: 6%; height: 2px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); }
.sprint__col { text-align: center; padding: 0 0.6rem; position: relative; }
.sprint__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--gold);
  margin: 20px auto 1rem; box-shadow: 0 0 0 5px var(--ocean), 0 0 14px var(--gold-glow); position: relative; z-index: 1; }
.sprint__when { font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.sprint__title { font-family: var(--serif); font-size: var(--fs-h3); color: var(--bone); margin: 0.3rem 0 0.6rem; }
.sprint__list { list-style: none; display: flex; flex-direction: column; gap: 0.3rem; }
.sprint__list li { font-size: var(--fs-sm); color: var(--bone-dim); }

/* Lightning strike (S32) */
.lightning { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
.warmap-card { text-align: center; padding: 1.4rem 1rem; border: 1px solid var(--hairline);
  border-radius: var(--radius); background: var(--charcoal); }
.warmap-card--strike { border-color: var(--gold-line); background: var(--gold-tint);
  box-shadow: 0 0 30px -8px var(--gold-glow); }
.warmap-card .ico { font-size: 1.6rem; color: var(--gold); margin-bottom: 0.5rem; }
.warmap-card b { font-family: var(--serif); font-size: var(--fs-h3); color: var(--bone); display: block; }
.warmap-card span { font-size: var(--fs-sm); color: var(--bone-dim); display: block; margin-top: 0.3rem; }
@keyframes strikePulse {
  0%, 100% { box-shadow: 0 0 30px -8px var(--gold-glow); }
  50% { box-shadow: 0 0 46px -2px var(--gold-glow); }
}
.slide.is-active .warmap-card--strike { animation: strikePulse 2.4s var(--ease) infinite; }

/* Kill list / build list (S38 / S39) */
.doc-list { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.doc-list li { position: relative; padding-left: 2rem; font-size: var(--fs-body); color: var(--bone-dim); line-height: 1.4; }
.doc-list li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.kill-list li::before { content: "✕"; color: var(--alarm); }
.build-list li::before { content: "✓"; color: var(--gold); }

/* Production board checklist (S36) */
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
.board__item { display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem 1rem;
  border: 1px solid var(--hairline); border-radius: 10px; background: var(--charcoal);
  font-size: var(--fs-sm); color: var(--bone-dim); }
.board__item .chk { width: 16px; height: 16px; border: 1px solid var(--gold); border-radius: 4px; flex: 0 0 auto; }

/* Gauges — Revenue Engine Dashboard instrumentation (S: Revenue Engine Dashboard) */
.gauge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
.gauge { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 0.9rem 1.1rem;
  background: var(--charcoal); display: flex; flex-direction: column; gap: 0.2rem; }
.gauge__label { font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); }
.gauge__val { font-family: var(--serif); font-size: var(--fs-h3); color: var(--bone); line-height: 1; }
.gauge--hero .gauge__val { color: var(--gold); }
.gauge__bar { height: 5px; border-radius: 3px; margin-top: 0.4rem; background: var(--hairline); overflow: hidden; }
.gauge__bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); }

@media (max-width: 720px) {
  .warn-grid, .cardgrid, .cardgrid--4, .cardgrid--3, .engines4, .lightning, .board, .sprint, .gauge-grid { grid-template-columns: 1fr; }
  .engines4 .core { grid-row: auto; grid-column: auto; aspect-ratio: auto; border-radius: var(--radius); }
}

/* =====================================================================
   Reveal-on-slide-enter (staggered)
   ===================================================================== */
.reveal { opacity: 0; transform: translateY(18px); }
.slide.is-active .reveal { opacity: 1; transform: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.slide.is-active .reveal[data-delay="1"] { transition-delay: 0.10s; }
.slide.is-active .reveal[data-delay="2"] { transition-delay: 0.22s; }
.slide.is-active .reveal[data-delay="3"] { transition-delay: 0.34s; }
.slide.is-active .reveal[data-delay="4"] { transition-delay: 0.46s; }
.slide.is-active .reveal[data-delay="5"] { transition-delay: 0.58s; }
.slide.is-active .reveal[data-delay="6"] { transition-delay: 0.70s; }

/* =====================================================================
   Chrome — progress bar, counter, nav hints, act tag
   ===================================================================== */
.deck-progress {
  position: fixed; left: 0; top: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  z-index: 50; transition: width 0.5s var(--ease);
}
.deck-counter {
  position: fixed; right: 1.4rem; bottom: 1.1rem; z-index: 50;
  font-size: var(--fs-label); letter-spacing: 0.2em; color: var(--steel);
  font-variant-numeric: tabular-nums;
}
.deck-counter b { color: var(--bone); font-weight: 600; }
.deck-act {
  position: fixed; left: 1.4rem; bottom: 1.1rem; z-index: 50;
  font-size: var(--fs-label); letter-spacing: 0.24em; text-transform: uppercase; color: var(--steel);
}
.deck-nav {
  position: fixed; right: 1.4rem; top: 1.1rem; z-index: 50; display: flex; gap: 0.5rem;
  opacity: 0.55; transition: opacity 0.3s var(--ease);
}
.deck:hover .deck-nav { opacity: 1; }
.deck-nav button {
  width: 34px; height: 34px; border: 1px solid var(--hairline); border-radius: 8px;
  display: grid; place-items: center; color: var(--bone-dim);
  background: rgba(15,18,20,0.5); backdrop-filter: blur(6px);
}
.deck-nav button:hover { border-color: var(--gold-line); color: var(--gold); }
.deck-nav svg { width: 16px; height: 16px; }

.deck-hint {
  position: fixed; left: 50%; bottom: 1.1rem; transform: translateX(-50%); z-index: 50;
  font-size: var(--fs-label); letter-spacing: 0.12em; color: var(--bone-faint);
  opacity: 1; transition: opacity 0.6s var(--ease);
}
.deck-hint.is-hidden { opacity: 0; }
.deck-hint kbd {
  font-family: var(--sans); border: 1px solid var(--hairline); border-radius: 5px;
  padding: 0.1em 0.45em; font-size: 0.9em; color: var(--bone-dim); margin: 0 0.1em;
}

/* =====================================================================
   Responsive — very small screens / portrait
   ===================================================================== */
@media (max-width: 720px) {
  .split-panel { grid-template-columns: 1fr; }
  .split-panel__divider { display: none; }
  .engine-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   Print / PDF — each slide on its own landscape page, no letterbox
   ===================================================================== */
@media print {
  @page { size: 1280px 720px; margin: 0; }
  body { overflow: visible; background: var(--ocean); }
  .deck { position: static; display: block; }
  .stage { position: static; width: 1280px; height: auto; overflow: visible; }
  .slide {
    position: relative; inset: auto; width: 1280px; height: 720px;
    opacity: 1 !important; visibility: visible !important; transform: none !important;
    page-break-after: always; break-after: page;
  }
  .slide .reveal { opacity: 1 !important; transform: none !important; }
  .flywheel__arc { stroke-dashoffset: 0 !important; }
  .flywheel__node { opacity: 1 !important; }
  .deck-progress, .deck-counter, .deck-act, .deck-nav, .deck-hint { display: none !important; }
}