/* ==========================================================================
   css/slides.css — the Cue slide system.

   Twelve archetypes in templates/slides/ share this one file. It exists to
   fix a specific bug: the five slide layouts this replaces each hard-coded
   their own watermark as an inline style attribute and each pointed at its
   own logo file, so `height:40px` rendered the Fountain mark at 40px on
   three slides and ~15.6px on the other two.

   So there is exactly ONE watermark rule here, it carries the geometry, and
   the two colour variants are the only thing an archetype chooses. Never
   write an inline style for it. Never add a per-slide override.

   Everything else — colour, type steps, space, radius, gradient — resolves
   from css/tokens.css. The deck canvas is 1280 wide against the library's
   1440 artboard, so the page type scale is 1.125× too big for it: the slide
   ramp below is the page ramp multiplied by --slide-scale (1280/1440),
   not a second set of hand-picked numbers.
   ========================================================================== */

/* ---- The canvas ---------------------------------------------------------- */

.slide {
  /* Geometry ---------------------------------------------------------- */
  position: relative;
  overflow: hidden;
  width: 1280px;
  height: 720px;
  margin: 0;
  background: var(--neutral-white);
  color: var(--neutral-900);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;

  /* The one ratio the whole file is built on: 1280 canvas / 1440 artboard */
  --slide-scale: calc(1280 / 1440);

  /* Watermark geometry, in tokens. Used by .slide__watermark below and by
     --slide-safe, so a layout can never be authored into the mark. */
  --slide-mark-h: var(--space-10);   /* 40px */
  --slide-mark-x: var(--space-14);   /* 56px */
  --slide-mark-y: var(--space-12);   /* 48px */

  /* Stage padding. The bottom is the mark's own box plus one space step of
     air — this is what stops a full-height figure from sitting on the logo,
     which is exactly what the old Origin slide did. */
  --slide-pad-x: var(--margin-lr);   /* 80px */
  --slide-pad-t: var(--space-16);    /* 64px */
  --slide-safe: calc(var(--slide-mark-y) + var(--slide-mark-h) + var(--space-6)); /* 112px */

  /* Type ramp — every step is a page step × --slide-scale ---------------- */
  --slide-display:  calc(var(--h1) * 2 * var(--slide-scale));  /* 128px  */
  --slide-hero:     calc(var(--h1) * var(--slide-scale));      /*  64px  */
  --slide-title:    calc(var(--h2) * var(--slide-scale));      /*  49.8  */
  --slide-subtitle: calc(var(--h4) * var(--slide-scale));      /*  35.6  */
  --slide-lead-lg:  calc(var(--h5) * var(--slide-scale));      /*  23.1  */
  --slide-lead:     calc(var(--h6) * var(--slide-scale));      /*  19.6  */
  --slide-body:     calc(var(--text-l) * var(--slide-scale));  /*  16px  */
  --slide-eyebrow:  calc(var(--text-m) * var(--slide-scale));  /*  14.2  */
  --slide-caption:  calc(var(--text-s) * var(--slide-scale));  /*  12.4  */

  /* Surface-dependent ink. Overridden wholesale by the dark variants so a
     component never has to ask which ground it is standing on. */
  --slide-ink: var(--neutral-900);
  --slide-ink-muted: var(--neutral-600);
  --slide-ink-quiet: var(--neutral-400);
  --slide-hair: var(--neutral-200);
  --slide-panel: var(--neutral-white);
  --slide-panel-ring: var(--neutral-200);
}

/* ---- Surfaces ------------------------------------------------------------ */

.slide--light { background: var(--neutral-white); }

.slide--sky { background: var(--gradient-sky); }

.slide--dark,
.slide--immersive {
  color: var(--neutral-white);
  --slide-ink: var(--neutral-white);
  --slide-ink-muted: rgba(255, 255, 255, 0.78);
  --slide-ink-quiet: rgba(255, 255, 255, 0.55);
  --slide-hair: rgba(255, 255, 255, 0.18);
  --slide-panel: var(--glass-quiet);
  --slide-panel-ring: rgba(255, 255, 255, 0.22);
}
.slide--dark { background: var(--gradient-panel-deep); }
.slide--immersive { background: var(--gradient-immersive); }

/* An optional soft bloom over a dark ground. Decorative, never carries
   content, always the first child so it sits under the stage. */
.slide__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 60% at 50% 22%, rgba(89, 175, 248, 0.38) 0%, rgba(89, 175, 248, 0) 62%),
    radial-gradient(50% 45% at 88% 96%, rgba(41, 34, 170, 0.55) 0%, rgba(41, 34, 170, 0) 70%);
}
.slide__glow--corner {
  background: radial-gradient(60% 70% at 100% 0%, rgba(89, 175, 248, 0.35) 0%, rgba(89, 175, 248, 0) 65%);
}

/* ==========================================================================
   THE WATERMARK — one rule, twelve archetypes.

   Both source files are trimmed to their ink and normalised to 200px tall at
   6.24:1, so `height` alone fixes the rendered mark identically on every
   ground. The element is a span with a CSS-supplied image so an archetype
   cannot point at a different (padded) file: the variant class is the only
   choice on offer.
   ========================================================================== */

.slide__watermark {
  position: absolute;
  left: var(--slide-mark-x);
  bottom: var(--slide-mark-y);
  display: block;
  height: var(--slide-mark-h);
  width: auto;
  z-index: 9;
}
.slide__watermark--light { content: url('../assets/brand/fountain-wordmark-white.png'); }
.slide__watermark--dark  { content: url('../assets/brand/fountain-wordmark-dark.png'); }

/* ---- Stage --------------------------------------------------------------- */

.slide__stage {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  height: 100%;
  padding: var(--slide-pad-t) var(--slide-pad-x) var(--slide-safe);
  display: flex;
  flex-direction: column;
}
.slide__stage--center {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-inline: calc(var(--slide-pad-x) * 2);
}
/* A full-bleed stage: the watermark still owns its corner, so only the
   bottom-left inset is reserved rather than the whole footer band. */
.slide__stage--split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

/* Top-left product lockup, used on covers and section breaks. */
.slide__lockup {
  position: absolute;
  top: var(--space-10);
  left: var(--slide-mark-x);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--slide-body);
}
.slide__lockup-name { font-weight: 700; letter-spacing: var(--track-tight); }
.slide__lockup-by { font-size: var(--slide-caption); color: var(--slide-ink-quiet); }

/* ---- Type ---------------------------------------------------------------- */

.slide__display {
  margin: 0;
  font-size: var(--slide-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  font-weight: 800;
  color: var(--slide-ink);
}
.slide__display em { font-style: normal; color: var(--blue-500); }

.slide__title {
  margin: 0;
  font-size: var(--slide-title);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  font-weight: 700;
  color: var(--slide-ink);
}
.slide__subtitle {
  margin: 0;
  font-size: var(--slide-subtitle);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  font-weight: 700;
  color: var(--slide-ink);
}
.slide__eyebrow {
  margin: 0;
  font-size: var(--slide-eyebrow);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slide-ink-quiet);
}
.slide__lead {
  margin: 0;
  font-size: var(--slide-lead);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  color: var(--slide-ink-muted);
}
.slide__body {
  margin: 0;
  font-size: var(--slide-body);
  line-height: var(--lh-body);
  color: var(--slide-ink-muted);
}
.slide__caption {
  margin: 0;
  font-size: var(--slide-caption);
  line-height: var(--lh-snug);
  color: var(--slide-ink-quiet);
}
.slide__body b, .slide__caption b { color: var(--slide-ink); font-weight: 600; }

/* ---- Grids --------------------------------------------------------------- */

.slide__grid { display: grid; gap: var(--space-6); }
.slide__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.slide__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.slide__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.slide__grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* ---- Card ---------------------------------------------------------------- */

.slide__card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border-radius: var(--radius-2xl);
  background: var(--slide-panel);
  box-shadow: inset 0 0 0 1px var(--slide-panel-ring);
}
.slide--dark .slide__card,
.slide--immersive .slide__card { backdrop-filter: var(--glass-blur); }
.slide__card--flush { padding: 0; overflow: hidden; }

/* ---- Numerals ------------------------------------------------------------ */

/* Every figure on a slide is tabular so columns of numbers line up and a
   stat does not jitter between builds. */
.slide__stat { display: flex; flex-direction: column; gap: var(--space-2); }
.slide__stat-value {
  font-size: var(--slide-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--slide-ink);
}
.slide__stat-label {
  font-size: var(--slide-body);
  line-height: var(--lh-snug);
  color: var(--slide-ink-muted);
  max-width: 15em;
}
.slide__stat--accent .slide__stat-value { color: var(--brand-600); }

/* The index numeral on section breaks and the agenda. */
.slide__ordinal {
  font-size: var(--slide-lead);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-none);
  color: var(--blue-500);
}

/* ---- Quote --------------------------------------------------------------- */

.slide__quote {
  margin: 0;
  font-size: var(--slide-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  font-weight: 600;
  color: var(--slide-ink);
  text-wrap: balance;
}
.slide__quote--sm { font-size: var(--slide-subtitle); font-weight: 600; }
/* The oversized typographic mark the deck uses instead of a grey quote card. */
.slide__quote-mark {
  display: block;
  font-size: var(--slide-hero);
  line-height: .75;
  font-weight: 800;
  color: var(--blue-500);
  opacity: .5;
}
.slide__byline { display: flex; align-items: center; gap: var(--space-4); }
.slide__byline-name { font-size: var(--slide-body); font-weight: 700; color: var(--slide-ink); }
.slide__byline-role { font-size: var(--slide-caption); color: var(--slide-ink-quiet); }
.slide__byline-logo { height: 22px; width: auto; }

/* ---- Chips --------------------------------------------------------------- */

.slide__chips { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.slide__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--slide-panel);
  box-shadow: inset 0 0 0 1px var(--slide-panel-ring);
  font-size: var(--slide-caption);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--slide-ink);
  white-space: nowrap;
}
.slide__chip--brand {
  background: var(--brand-50);
  box-shadow: none;
  color: var(--brand-800);
}
.slide__chip--lg {
  padding: var(--space-4) var(--space-6);
  font-size: var(--slide-body);
  letter-spacing: var(--track-none);
  text-transform: none;
}

/* ---- Rules --------------------------------------------------------------- */

.slide__rule { height: 1px; border: 0; margin: 0; background: var(--slide-hair); }
.slide__rule--dashed { height: 0; border-top: 1px dashed var(--slide-hair); background: none; }

/* ---- Figures ------------------------------------------------------------- */

.slide__figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: var(--neutral-100);
}
.slide__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide__figure figcaption {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.92);
  color: var(--neutral-900);
  font-size: var(--slide-caption);
  font-weight: 600;
}
.slide__figure figcaption.is-inverse {
  background: rgba(15, 23, 42, 0.92);
  color: var(--neutral-white);
}

/* ---- App icon ------------------------------------------------------------ */

.slide__appicon { width: 40px; height: 40px; flex: none; display: block; }
.slide__appicon--sm { width: 28px; height: 28px; }

/* A glyph tile drawn from the app-icon gradient token, for the benefit
   blocks that have no shipped icon of their own. */
.slide__glyph {
  width: 40px;
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--gradient-app-icon);
  color: var(--neutral-white);
}
.slide__glyph svg { width: 22px; height: 22px; display: block; }

/* ---- Ticks --------------------------------------------------------------- */

.slide__tick {
  width: 22px;
  height: 22px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--green-600);
  color: var(--neutral-white);
  font-size: var(--slide-caption);
  font-weight: 700;
}

/* ==========================================================================
   ARCHETYPE LAYOUTS

   One block per file in templates/slides/. Nothing below sets a colour, a
   size or a space that is not already a token or a slide step — and nothing
   below touches .slide__watermark.
   ========================================================================== */

/* ---- 01 · Title ---------------------------------------------------------- */

.slide-title .slide__display { margin-top: var(--space-5); }
.slide-title__orb { margin-top: var(--space-8); }

/* ---- 02 · Big quote ------------------------------------------------------ */

.slide-quote__line { margin-top: var(--space-10); }
.slide-quote__answer { margin-top: var(--space-5); font-size: var(--slide-lead-lg); }

/* ---- 03 · Customer story ------------------------------------------------- */

.slide-story .slide__stage--split { grid-template-columns: 1.2fr 1fr; }
.slide-story__lede { justify-content: center; }
.slide-story__lede { display: flex; flex-direction: column; }
.slide-story__lede .slide__quote { margin-top: var(--space-5); }
.slide-story__lede .slide__byline { margin-top: var(--space-10); }
.slide-story__byline-tick { width: 1px; height: 34px; background: var(--slide-hair); }

.slide-story__statline { gap: var(--space-6); padding: var(--space-8); }
.slide-story__replaced { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-2); }
.slide-story__replaced li {
  display: flex; gap: var(--space-3);
  font-size: var(--slide-body); line-height: var(--lh-snug); color: var(--slide-ink-muted);
}
.slide-story__replaced li::before { content: "—"; color: var(--slide-ink-quiet); }
.slide-story__stats {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}
.slide-story__stats > div { display: flex; flex-direction: column-reverse; gap: var(--space-1); }
.slide-story__stats dt { font-size: var(--slide-caption); color: var(--slide-ink-quiet); }
.slide-story__stats dd {
  margin: 0;
  font-size: var(--slide-subtitle);
  line-height: var(--lh-display);
  letter-spacing: var(--track-tight);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--slide-ink);
}

/* ---- 04 · Three prompts -------------------------------------------------- */

.slide-prompts .slide__stage { justify-content: center; }
.slide-prompts__head { display: flex; flex-direction: column; gap: var(--space-3); }
.slide-prompts__grid { margin-top: var(--space-12); align-items: stretch; }
.slide-prompts__card { gap: var(--space-5); padding: var(--space-8); }
.slide-prompts__role {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--slide-caption);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--slide-ink-quiet);
}
.slide-prompts__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-600); }
.slide-prompts__dot--violet { background: var(--purple-600); }
.slide-prompts__dot--blue { background: var(--blue-600); }
.slide-prompts__ask {
  margin: 0;
  flex: 1;
  font-size: var(--slide-lead-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  font-weight: 600;
  color: var(--slide-ink);
}
.slide-prompts__result {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* Two body lines whether the result needs them or not, so the dashed rule
     lands at the same height in all three cards. */
  min-height: calc(var(--slide-body) * var(--lh-body) * 2);
  font-size: var(--slide-body);
  font-weight: 500;
  color: var(--slide-ink);
}

/* ---- 05 · Origin --------------------------------------------------------- */
/* The pair stretches to the stage floor, and the stage floor is --slide-safe,
   so the 1987 photograph can no longer run under the watermark. */

.slide-origin__head { display: flex; flex-direction: column; gap: var(--space-3); max-width: 1000px; }
.slide-origin__pair { margin-top: var(--space-10); flex: 1; min-height: 0; gap: var(--space-5); }
.slide-origin__past img { filter: grayscale(.15); }

/* ---- 06 · Section divider ------------------------------------------------ */

.slide-divider__stage { justify-content: center; }
.slide-divider__num {
  margin: 0;
  font-size: var(--slide-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--blue-500);
}
.slide-divider__rule { width: 120px; margin: var(--space-6) 0; }
.slide-divider__title { max-width: 880px; }

/* ---- 07 · Agenda --------------------------------------------------------- */

.slide-agenda__stage { justify-content: center; }
.slide-agenda__head { display: flex; flex-direction: column; gap: var(--space-3); }
.slide-agenda__list { list-style: none; margin: var(--space-10) 0 0; padding: 0; }
.slide-agenda__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--slide-hair);
}
.slide-agenda__num {
  width: 2ch;
  font-size: var(--slide-subtitle);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--brand-600);
}
.slide-agenda__label {
  font-size: var(--slide-subtitle);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  font-weight: 700;
  color: var(--slide-ink);
}

/* ---- 08 · Product module ------------------------------------------------- */

.slide-module__stage {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-16);
  align-items: center;
}
.slide-module__copy { display: flex; flex-direction: column; gap: var(--space-6); }
.slide-module__eyebrow { display: flex; align-items: center; gap: var(--space-3); }
.slide-module__benefits { display: flex; flex-direction: column; gap: var(--space-6); }
.slide-module__benefit { display: flex; gap: var(--space-4); }
.slide-module__lead {
  margin: 0 0 var(--space-1);
  font-size: var(--slide-lead);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  font-weight: 700;
  color: var(--slide-ink);
}

/* The product visual is the Cue thread itself, rebuilt live rather than
   pasted in as a screenshot, so it restyles with the rest of the system. */
.slide-module__thread {
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
  border-radius: var(--radius-2xl);
  background: var(--gradient-panel-blue);
  box-shadow: var(--shadow-card);
  color: var(--neutral-white);
}
.slide-module__prompt {
  margin: 0;
  align-self: flex-end;
  max-width: 80%;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-2xl);
  background: var(--glass-fill);
  box-shadow: var(--shadow-glass);
  font-size: var(--slide-lead);
  font-weight: 600;
}
.slide-module__meta {
  margin: var(--space-2) 0 0;
  font-size: var(--slide-caption);
  color: rgba(255, 255, 255, 0.6);
}
.slide-module__meta--right { align-self: flex-end; }
.slide-module__reply {
  margin: var(--space-6) 0 0;
  font-size: var(--slide-lead);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  font-weight: 600;
}
.slide-module__channels {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.slide-module__channels li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--glass-quiet);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.slide-module__channel { font-size: var(--slide-body); font-weight: 600; }
.slide-module__state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--green-50);
  color: var(--green-800);
  font-size: var(--slide-caption);
  font-weight: 600;
}
.slide-module__state::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-600);
}

/* ---- 09 · Agent roster --------------------------------------------------- */

.slide-roster__stage { justify-content: center; }
.slide-roster__head { display: flex; flex-direction: column; gap: var(--space-2); }
.slide-roster__grid { margin-top: var(--space-8); align-items: stretch; }
.slide-roster__card { overflow: hidden; }
.slide-roster__portrait { width: 100%; height: 156px; object-fit: cover; object-position: 50% 20%; }
.slide-roster__body {
  padding: var(--space-5) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.slide-roster__name {
  margin: 0;
  font-size: var(--slide-lead);
  letter-spacing: var(--track-tight);
  font-weight: 800;
  color: var(--slide-ink);
}
.slide-roster__role {
  margin: 0 0 var(--space-2);
  font-size: var(--slide-caption);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue-500);
}
.slide-roster__quote {
  margin: var(--space-6) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ---- 10 · Metric wall ---------------------------------------------------- */

.slide-metrics__stage { justify-content: center; }
.slide-metrics__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.slide-metrics__logo { height: 28px; width: auto; }
.slide-metrics__title { margin-top: var(--space-8); max-width: 1000px; }
/* Quote left, numbers right. Stacking them meant the attribution line ended up
   level with the watermark; side by side, the lower-left corner stays clear. */
.slide-metrics__body {
  margin-top: var(--space-10);
  padding-top: var(--space-10);
  border-top: 1px solid var(--slide-hair);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-16);
  align-items: start;
}
.slide-metrics__wall { display: flex; flex-direction: column; gap: var(--space-6); }
.slide-metrics__wall .slide__stat { flex-direction: row; align-items: baseline; gap: var(--space-5); }
.slide-metrics__wall .slide__stat-value { min-width: 3.2ch; }
.slide-metrics__quote {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ---- 11 · Credentials ---------------------------------------------------- */

.slide-trust__stage { justify-content: center; }
.slide-trust__head { display: flex; flex-direction: column; gap: var(--space-3); }
.slide-trust__marks { list-style: none; margin: var(--space-12) 0 0; padding: 0; }
.slide-trust__marks .slide__chip { width: 100%; justify-content: center; }
.slide-trust__links {
  margin: var(--space-12) 0 0;
  display: flex;
  gap: var(--space-10);
  font-size: var(--slide-body);
  color: var(--slide-ink-muted);
}
.slide-trust__links span::before {
  content: "↗";
  margin-right: var(--space-2);
  color: var(--blue-500);
}

/* ---- 12 · Before / after ------------------------------------------------- */
/* A real table: six stage columns, two comparison rows. Never an image — the
   times are the argument, so they have to be selectable, tabular and live. */

.slide-flow__stage { justify-content: center; }
.slide-flow__head { display: flex; flex-direction: column; gap: var(--space-3); }
.slide-flow__table {
  width: calc(100% + var(--space-4));
  margin: var(--space-10) calc(var(--space-2) * -1) 0;
  border-collapse: separate;
  border-spacing: var(--space-2);
  table-layout: fixed;
}
.slide-flow__corner { width: 168px; }
.slide-flow__table thead th {
  padding: 0 var(--space-3) var(--space-2);
  text-align: left;
  font-size: var(--slide-caption);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slide-ink-quiet);
}
.slide-flow__row th[scope="row"] {
  padding: var(--space-5) var(--space-4);
  text-align: left;
  vertical-align: middle;
  border-radius: var(--radius-2xl);
}
.slide-flow__row td {
  padding: var(--space-4);
  vertical-align: top;
  border-radius: var(--radius-2xl);
}
.slide-flow__who {
  display: block;
  font-size: var(--slide-lead);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  font-weight: 800;
}
.slide-flow__band {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--slide-caption);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.slide-flow__time {
  display: block;
  font-size: var(--slide-lead);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.slide-flow__note {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--slide-caption);
  line-height: var(--lh-snug);
}

.slide-flow__row--before td { background: var(--neutral-100); color: var(--neutral-600); }
.slide-flow__row--before th[scope="row"] { background: var(--neutral-200); color: var(--neutral-600); }
.slide-flow__row--before .slide-flow__who { color: var(--neutral-900); }
.slide-flow__row--before .slide-flow__band { color: var(--rose-600); }
.slide-flow__row--before .slide-flow__time { color: var(--neutral-600); }

.slide-flow__row--after td { background: var(--brand-50); color: var(--brand-800); }
.slide-flow__row--after th[scope="row"] { background: var(--gradient-panel-blue); color: var(--neutral-white); }
.slide-flow__row--after .slide-flow__band { color: var(--blue-500); }
.slide-flow__row--after .slide-flow__time { color: var(--brand-600); }