/* ============================================================
   Per-slide composition.
   Populated slide-by-slide during Phase B.

   Convention:
     /* === Slide NN — Short Name === *\/
     #slide-NN .slide__canvas { ... }
     #slide-NN .slide__canvas h1 { ... }

   Use tokens.css and type.css variables — avoid hard-coding
   hex values or font sizes here.
   ============================================================ */


/* ============================================================
   Section cover pattern (Slide 01, Slide 04, and any future
   section-intro covers). Full-bleed brand gradient panel with
   a rounded rect, Vista Data logo top-left, big white title
   at bottom-left. Optional V Motion clipped inside the panel.
   Figma nodes: 1120:625 (cover), 1187:3 (logo design cover)
   ============================================================ */

.slide--cover .slide-cover__bg {
  position: absolute;
  left: var(--slide-inset);
  top: var(--slide-inset);
  width: calc(1920px - var(--slide-inset) * 2);
  height: calc(1080px - var(--slide-inset) * 2);
  border-radius: var(--radius-slide-panel);
  background: var(--gradient-brand-cover);
  overflow: hidden;
}

.slide--cover .slide-cover__logo {
  position: absolute;
  left: 142px;
  top: 140.07px;
  width: 280px;
  height: 96.89px;
  z-index: 2;
}

.slide--cover .slide-cover__title {
  position: absolute;
  left: 140px;
  top: 675px;
  margin: 0;
  font-family: var(--ff-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-display-1);
  line-height: var(--lh-none);
  color: var(--color-text-on-brand);
  white-space: nowrap;
  z-index: 2;
}

/* Single-line cover titles (e.g. "Typography") sit ~100px lower
   so the baseline matches where the two-line covers bottom-out.
   Matches Figma's top: 775.93px. */
.slide--cover .slide-cover__title--single {
  top: 775.93px;
}

/* V Motion inside a cover. Positioned relative to the gradient
   panel (its offsetParent), so the panel's overflow:hidden and
   40px border-radius clip the graphic to the rounded panel. */
.slide--cover .slide-cover__bg-motion {
  position: absolute;
  left: 750px;  /* 822 − 16 slide-inset */
  top: 45px;    /* 105 − 16 slide-inset */
  width: 1050px;
  height: auto;
  opacity: 1;
  pointer-events: none;
}

.slide--cover .slide-cover__bg-motion-img {
  width: 100%;
  height: auto;
  display: block;
}


/* ============================================================
   Shared slide elements
   Injected automatically by main.js based on slide attributes:
     data-v-motion  → .slide-bg-motion   (background V graphic)
     data-footer    → .slide-footer      (repeating footer)
   The .slide-label is authored directly in slide markup when
   a frame has a small top-left label (e.g. "Summary", "Logo").
   ============================================================ */

/* V Motion background graphic.
   SVG ships with rotation baked in. Scaled down from the Figma bounds to
   a 1050px width and re-centered so the visible portion sits roughly where
   it appears in the comp. Opacity 0.25 matches Figma. */
.slide-bg-motion {
  position: absolute;
  left: 750px;
  top: 45px;
  width: 1050px;
  height: auto;
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
}

.slide-bg-motion__img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Repeating footer.
   Figma: row at (140.21, 991.5), 1640×37, top divider neutral/300,
   three text pieces in Regular 20px / text-secondary. */
.slide-footer {
  position: absolute;
  left: 140.21px;
  top: 991.5px;
  width: 1640px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 17px;
  border-top: 1px solid var(--color-neutral-300);
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-footer);
  line-height: var(--lh-none);
  color: var(--color-text-secondary);
  z-index: 2;
}

.slide-footer__cell {
  white-space: nowrap;
}

/* Small top-left slide label (e.g. "Summary").
   Figma: (140, 140), Regular 31px, line-height 1.1, text-primary. */
.slide-label {
  position: absolute;
  left: 140px;
  top: 140px;
  margin: 0;
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-slide-label);
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
  z-index: 2;
}


/* ============================================================
   Slide 02 — Summary
   Figma node: 1121:704
   ============================================================ */

#slide-2 .slide__canvas {
  background: var(--color-neutral-100);
}

#slide-2 .summary-list {
  position: absolute;
  left: 140px;
  top: 532px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px; /* 98px row height − 87px font ≈ 11px gap to match Figma y-steps */
  z-index: 2;
}

#slide-2 .summary-list li {
  display: flex;
  align-items: baseline;
  gap: 40px;
  font-family: var(--ff-display);
  font-size: var(--fs-summary-item);
  line-height: var(--lh-none);
  color: var(--color-prism-900);
}

#slide-2 .summary-list__num {
  font-weight: var(--fw-light);
  /* Fixed width so all labels line up vertically regardless of digit width. */
  display: inline-block;
  width: 110px;
}

#slide-2 .summary-list__label {
  font-weight: var(--fw-semibold);
}


/* ============================================================
   Slide 03 — Intro
   Figma node: 1121:851
   ============================================================ */

#slide-3 .slide__canvas {
  background: var(--color-neutral-100);
}

/* Big section headline — reusable for later section-intro slides too. */
#slide-3 .section-headline {
  position: absolute;
  left: 141.35px;
  top: 348.95px;
  margin: 0;
  font-family: var(--ff-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-section-head);
  line-height: var(--lh-none);
  color: var(--color-prism-900);
  white-space: nowrap;
  z-index: 2;
}

/* Justified body paragraph under the section headline. */
#slide-3 .section-body {
  position: absolute;
  left: 316.01px;
  top: 587.95px;
  width: 850px;
  margin: 0;
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-primary);
  text-align: justify;
  z-index: 2;
}


/* ============================================================
   Shared content-slide typography
   Used by content slides that have a 70px heading + a
   justified body block. Positioning is per-slide — only the
   type/rhythm is shared here.
   ============================================================ */

.slide-heading {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-slide-head);
  line-height: var(--lh-none);
  color: var(--color-prism-900);
  z-index: 2;
}

/* Inline gradient-text word (e.g. "Spectrum" on Slide 09). */
.spectrum-word {
  background-image: var(--gradient-spectrum);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.slide-body {
  margin: 0;
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-primary);
  text-align: justify;
  z-index: 2;
}

.slide-body p {
  margin: 0 0 16px 0;
}

.slide-body p:last-child {
  margin-bottom: 0;
}


/* ============================================================
   Slide 05 — Logo Mark (A symbol of progress and innovation)
   Figma node: 1144:290
   ============================================================ */

#slide-5 .slide__canvas {
  background: var(--color-neutral-100);
}

#slide-5 .slide-heading {
  position: absolute;
  left: 140px;
  top: 203.08px;
}

#slide-5 .slide-body {
  position: absolute;
  left: 930px;
  top: 203.08px;
  width: 850px;
}

/* Letter → Logomark construction panel. The SVG is self-contained
   (gradient bg + 4 shapes + labels all baked in). */
#slide-5 .logo-shapes {
  position: absolute;
  left: 140px;
  top: 531.72px;
  width: 1640px;
  height: 408.283px;
  z-index: 1;
}


/* ============================================================
   Slide 06 — Horizontal Logo Construction and Safe Space
   Figma node: 1160:299
   ============================================================ */

#slide-6 .slide__canvas {
  background: var(--color-neutral-100);
}

#slide-6 .slide-body {
  position: absolute;
  left: 522.01px;
  top: 140px;
  width: 1257.99px;
}

/* Horizontal logo construction graphic. The SVG bundles the grid,
   logo mark, wordmark and 2x/1x safe-space annotations. */
#slide-6 .logo-construction {
  position: absolute;
  left: 522.01px;
  top: 441.88px;
  width: 979.528px;
  height: 509.125px;
  z-index: 1;
}


/* ============================================================
   Slide 07 — Horizontal Logo color variations
   Figma node: 1166:363
   ============================================================ */

#slide-7 .slide__canvas {
  background: var(--color-neutral-100);
}

/* 2×2 grid of horizontal logo variants (black, white-on-black,
   white-on-gradient, color-on-light). Whole composition lives in
   a single exported SVG. */
#slide-7 .logo-variations {
  position: absolute;
  left: 151.68px;  /* 7.9% of 1920 */
  top: 253.37px;   /* 23.46% of 1080 */
  width: 1616.64px;
  height: 621.32px;
  z-index: 1;
}


/* ============================================================
   Slide 09 — Spectrum Color System intro
   Figma node: 1166:435
   ============================================================ */

#slide-9 .slide__canvas {
  background: var(--color-neutral-100);
}

#slide-9 .slide-heading {
  position: absolute;
  left: 141.35px;
  top: 344.5px;
  width: 1406.64px;
}

#slide-9 .slide-body {
  position: absolute;
  left: 316.01px;
  top: 608.5px;
  width: 850px;
}


/* ============================================================
   Slide 10 — Primary Colors (60-30-10 Rule)
   Figma node: 1167:1580
   Three brand-color panels sized roughly 60/30/10 by width
   (Prism / Refract / Clarity), each labeled with name, hex,
   and tagline in white.
   ============================================================ */

#slide-10 .slide__canvas {
  background: var(--color-white);
}

#slide-10 .color-block {
  position: absolute;
  top: 235.61px;
  height: 634.433px;
  border-radius: 16px;
  color: var(--color-text-on-brand);
  z-index: 1;
}

#slide-10 .color-block--prism {
  left: 140px;
  width: 984.307px;
  background: var(--color-brand-prism);
}

#slide-10 .color-block--refract {
  left: 1124.31px;
  width: 492.077px;
  background: var(--color-brand-refract);
}

#slide-10 .color-block--clarity {
  left: 1616.39px;
  width: 163.614px;
  background: var(--color-brand-clarity);
}

/* Labels sit near the bottom-left of each block. Coordinates
   are within-block (Figma top − block top). */
#slide-10 .color-block__name,
#slide-10 .color-block__hex,
#slide-10 .color-block__tagline {
  position: absolute;
  left: 40px;
  margin: 0;
  font-family: var(--ff-display);
  white-space: nowrap;
}

#slide-10 .color-block__name {
  top: 504.52px;  /* 740.13 − 235.61 */
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  line-height: var(--lh-none);
}

#slide-10 .color-block__hex {
  top: 543.52px;  /* 779.13 − 235.61 */
  font-weight: var(--fw-medium);
  font-size: var(--fs-caption);
  line-height: normal;
}

#slide-10 .color-block__tagline {
  top: 569.52px;  /* 805.13 − 235.61 */
  font-weight: var(--fw-medium);
  font-size: var(--fs-caption);
  line-height: normal;
}

/* Clarity block is narrow (~164px) — labels inset 16px instead of 40px. */
#slide-10 .color-block--clarity .color-block__name,
#slide-10 .color-block--clarity .color-block__hex,
#slide-10 .color-block--clarity .color-block__tagline {
  left: 16.3px;
}


/* ============================================================
   Slide 11 — Extended Color Palette / The Spectrum
   Figma node: 4002:436
   Seven solid-color swatches across the top, a single
   full-width gradient strip below (same 7-stop Spectrum
   gradient used on Slide 09), and a "Spectrum" label at the
   bottom-left of the strip.
   ============================================================ */

#slide-11 .slide__canvas {
  background: var(--color-white);
}

/* Top-right intro note — 2 lines, forced break. */
#slide-11 .palette-intro {
  position: absolute;
  left: 813.27px;
  top: 140px;
  width: 966.73px;
  margin: 0;
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-primary);
  z-index: 2;
}

/* Palette container: swatches row (228.924 tall) + gradient strip
   (457.662 tall). Total height 686.586, rounded 16px at all four
   corners via the outer swatches + strip radii. */
#slide-11 .palette {
  position: absolute;
  left: 140px;
  top: 245.26px;
  width: 1640px;
  height: 686.586px;
  z-index: 1;
}

#slide-11 .palette__swatch {
  position: absolute;
  top: 0;
  width: 234.286px;
  height: 228.924px;
  color: var(--color-text-on-brand);
}

#slide-11 .palette__swatch--prism {
  left: 0;
  background: var(--color-brand-prism);
  border-top-left-radius: 16px;
}
#slide-11 .palette__swatch--refract {
  left: 234.29px;
  background: var(--color-brand-refract);
}
#slide-11 .palette__swatch--clarity {
  left: 468.57px;
  background: var(--color-brand-clarity);
}
#slide-11 .palette__swatch--signal {
  left: 702.86px;
  background: var(--color-spectrum-signal);
}
#slide-11 .palette__swatch--lumen {
  left: 937.14px;
  background: var(--color-spectrum-lumen);
}
#slide-11 .palette__swatch--flux {
  left: 1171.43px;
  background: var(--color-spectrum-flux);
}
#slide-11 .palette__swatch--radiant {
  left: 1405.71px;
  background: var(--color-spectrum-radiant);
  border-top-right-radius: 16px;
}

/* Swatch label trio — category (uppercase), name (semibold), hex (uppercase).
   left:21.03 = 161.03 − 140 (palette left). */
#slide-11 .palette__swatch-category,
#slide-11 .palette__swatch-name,
#slide-11 .palette__swatch-hex {
  position: absolute;
  left: 21.03px;
  margin: 0;
  font-family: var(--ff-display);
  line-height: var(--lh-none);
  white-space: nowrap;
}

#slide-11 .palette__swatch-category {
  top: 143.33px;  /* 388.59 − 245.26 */
  font-weight: var(--fw-medium);
  font-size: var(--fs-swatch-meta);
  text-transform: uppercase;
}

#slide-11 .palette__swatch-name {
  top: 169.33px;  /* 414.59 − 245.26 */
  font-weight: var(--fw-semibold);
  font-size: var(--fs-swatch-name);
}

#slide-11 .palette__swatch-hex {
  top: 197.33px;  /* 442.59 − 245.26 */
  font-weight: var(--fw-medium);
  font-size: var(--fs-swatch-meta);
  text-transform: uppercase;
}

/* Full-width gradient strip below the swatches. Rounded only on the
   bottom corners so the top edge meets the swatches flush. */
#slide-11 .palette__gradient-strip {
  position: absolute;
  left: 0;
  top: 228.924px;
  width: 1640px;
  height: 457.662px;
  background-image: var(--gradient-spectrum);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

/* "Spectrum" label near the bottom-left of the gradient strip. */
#slide-11 .palette__gradient-label {
  position: absolute;
  left: 40px;       /* 180 − 140 */
  top: 405.67px;    /* 879.85 − (245.26 + 228.924) */
  margin: 0;
  font-family: var(--ff-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-swatch-name);
  line-height: var(--lh-none);
  color: var(--color-text-on-brand);
  white-space: nowrap;
}


/* ============================================================
   Slide 12 — Color Roles (2×2 card grid)
   Figma node: 4068:77
   Four role cards, each with a color badge (1–2 dots), a
   title, and a short description. Cards have soft gradient
   fills and tinted 1px borders in the brand-color family.
   ============================================================ */

#slide-12 .slide__canvas {
  background: var(--color-white);
}

/* Centered 2×2 grid. (1920 − 1638)/2 ≈ 141 left,
   (1080 − 534)/2 = 273 top. */
#slide-12 .role-grid {
  position: absolute;
  left: 142px;
  top: 273px;
  width: 1638px;
  height: 534px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  column-gap: 24px;
  row-gap: 22px;
  z-index: 1;
}

#slide-12 .role-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 56px 40px;
  border: 1px solid transparent;
  border-radius: 8px;
  box-sizing: border-box;
}

/* Per-card background gradient + border tint. Gradient hex values
   are one-off pastel stops not in the Figma variable set. */
#slide-12 .role-card--anchors {
  border-color: var(--color-prism-200);
  background-image: linear-gradient(118.26deg, #e0d1fc 0%, #d1e3ff 100%);
}
#slide-12 .role-card--growth {
  border-color: var(--color-clarity-200);
  background-image: linear-gradient(118.23deg, #c8fae2 0%, #dafbd9 100%);
}
#slide-12 .role-card--attention {
  border-color: var(--color-lumen-200);
  background-image: linear-gradient(113.40deg, #fef0a2 0%, #fef8d0 100%);
}
#slide-12 .role-card--alert {
  border-color: var(--color-flux-200);
  background-image: linear-gradient(113.40deg, #feefd4 0%, #fde2d7 100%);
}

#slide-12 .role-card__head {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Dot badge — 1 or 2 circles side-by-side with a 16px gap. */
#slide-12 .role-card__dots {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

#slide-12 .role-dot {
  display: block;
  width: 46.116px;
  height: 46.116px;
  border-radius: 50%;
}

#slide-12 .role-dot--prism   { background: var(--color-brand-prism); }
#slide-12 .role-dot--refract { background: var(--color-brand-refract); }
#slide-12 .role-dot--clarity { background: var(--color-brand-clarity); }
#slide-12 .role-dot--signal  { background: var(--color-spectrum-signal); }
#slide-12 .role-dot--lumen   { background: var(--color-spectrum-lumen); }
#slide-12 .role-dot--flux    { background: var(--color-spectrum-flux); }
#slide-12 .role-dot--radiant { background: var(--color-spectrum-radiant); }

#slide-12 .role-card__title {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-card-head);
  line-height: var(--lh-tight);
  color: var(--color-prism-900);
  white-space: nowrap;
}

#slide-12 .role-card__body {
  margin: 0;
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-primary);
}


/* ============================================================
   Slide 13 — Shades (7 scales × 9 steps)
   Figma node: 4065:392
   Each brand color's full 900 → 100 ramp laid out horizontally.
   The /500 step pops out (taller, fully rounded) and is labeled
   with the color's name. An x-axis below mirrors the same
   flex layout so tick numbers line up under their columns.
   ============================================================ */

#slide-13 .slide__canvas {
  background: var(--color-white);
}

#slide-13 .shades {
  position: absolute;
  left: 140px;
  top: 245.26px;
  width: 1640px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 1;
}

/* Each row: 4 flanking cells + 500 card + 4 flanking cells,
   all vertically centered so the taller 500 card overhangs. */
#slide-13 .shade-row {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

#slide-13 .shade {
  flex: 1;
  min-width: 0;
  height: 62.52px;
}

#slide-13 .shade:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
#slide-13 .shade:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* The 500 step: taller card, full 4px rounding, with the color-name
   label horizontally centered and anchored 16px up from the bottom
   (matches Figma). */
#slide-13 .shade--base {
  flex: 0 0 auto;
  width: 187.489px;
  height: 69.773px;
  box-sizing: border-box;
  padding-bottom: 16px;
  border-radius: 4px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-family: var(--ff-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-swatch-meta);
  line-height: var(--lh-none);
  color: var(--color-text-on-brand);
  z-index: 2;
}

/* Each row provides a mini --shade-NNN map; cells pick their
   color from it by position. Keeps markup blank-span-simple. */
#slide-13 .shade:nth-child(1) { background: var(--shade-900); }
#slide-13 .shade:nth-child(2) { background: var(--shade-800); }
#slide-13 .shade:nth-child(3) { background: var(--shade-700); }
#slide-13 .shade:nth-child(4) { background: var(--shade-600); }
#slide-13 .shade:nth-child(5) { background: var(--shade-500); }
#slide-13 .shade:nth-child(6) { background: var(--shade-400); }
#slide-13 .shade:nth-child(7) { background: var(--shade-300); }
#slide-13 .shade:nth-child(8) { background: var(--shade-200); }
#slide-13 .shade:nth-child(9) { background: var(--shade-100); }

#slide-13 .shade-row--prism {
  --shade-900: var(--color-prism-900);
  --shade-800: var(--color-prism-800);
  --shade-700: var(--color-prism-700);
  --shade-600: var(--color-prism-600);
  --shade-500: var(--color-prism-500);
  --shade-400: var(--color-prism-400);
  --shade-300: var(--color-prism-300);
  --shade-200: var(--color-prism-200);
  --shade-100: var(--color-prism-100);
}
#slide-13 .shade-row--refract {
  --shade-900: var(--color-refract-900);
  --shade-800: var(--color-refract-800);
  --shade-700: var(--color-refract-700);
  --shade-600: var(--color-refract-600);
  --shade-500: var(--color-refract-500);
  --shade-400: var(--color-refract-400);
  --shade-300: var(--color-refract-300);
  --shade-200: var(--color-refract-200);
  --shade-100: var(--color-refract-100);
}
#slide-13 .shade-row--clarity {
  --shade-900: var(--color-clarity-900);
  --shade-800: var(--color-clarity-800);
  --shade-700: var(--color-clarity-700);
  --shade-600: var(--color-clarity-600);
  --shade-500: var(--color-clarity-500);
  --shade-400: var(--color-clarity-400);
  --shade-300: var(--color-clarity-300);
  --shade-200: var(--color-clarity-200);
  --shade-100: var(--color-clarity-100);
}
#slide-13 .shade-row--signal {
  --shade-900: var(--color-signal-900);
  --shade-800: var(--color-signal-800);
  --shade-700: var(--color-signal-700);
  --shade-600: var(--color-signal-600);
  --shade-500: var(--color-signal-500);
  --shade-400: var(--color-signal-400);
  --shade-300: var(--color-signal-300);
  --shade-200: var(--color-signal-200);
  --shade-100: var(--color-signal-100);
}
#slide-13 .shade-row--lumen {
  --shade-900: var(--color-lumen-900);
  --shade-800: var(--color-lumen-800);
  --shade-700: var(--color-lumen-700);
  --shade-600: var(--color-lumen-600);
  --shade-500: var(--color-lumen-500);
  --shade-400: var(--color-lumen-400);
  --shade-300: var(--color-lumen-300);
  --shade-200: var(--color-lumen-200);
  --shade-100: var(--color-lumen-100);
}
#slide-13 .shade-row--flux {
  --shade-900: var(--color-flux-900);
  --shade-800: var(--color-flux-800);
  --shade-700: var(--color-flux-700);
  --shade-600: var(--color-flux-600);
  --shade-500: var(--color-flux-500);
  --shade-400: var(--color-flux-400);
  --shade-300: var(--color-flux-300);
  --shade-200: var(--color-flux-200);
  --shade-100: var(--color-flux-100);
}
#slide-13 .shade-row--radiant {
  --shade-900: var(--color-radiant-900);
  --shade-800: var(--color-radiant-800);
  --shade-700: var(--color-radiant-700);
  --shade-600: var(--color-radiant-600);
  --shade-500: var(--color-radiant-500);
  --shade-400: var(--color-radiant-400);
  --shade-300: var(--color-radiant-300);
  --shade-200: var(--color-radiant-200);
  --shade-100: var(--color-radiant-100);
}

/* Brightness x-axis — mirrors the shade-row flex layout so each
   tick lines up under its column. */
#slide-13 .shade-axis {
  position: absolute;
  left: 140px;
  top: 861.67px;
  width: 1640px;
  display: flex;
  align-items: center;
  height: 12px;
  z-index: 1;
}

#slide-13 .shade-axis__tick {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--ff-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-tick);
  line-height: var(--lh-none);
  color: var(--color-text-muted);
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

#slide-13 .shade-axis__tick--base {
  flex: 0 0 auto;
  width: 187.489px;
}


/* ============================================================
   Slide 14 — Neutral + Semantic Colors
   Figma node: 4065:523
   Two stacked ramps on the same page:
   1) Neutrals 900 → 100 (mirrors the Slide 13 layout at taller
      cell heights), with the /500 step popping as a labelled card.
   2) A 4-swatch semantic row — Success / Info / Warning / Error —
      mapped to Signal-400 / Refract-400 / Lumen-400 / Radiant-400.
   Each ramp gets its own axis label row underneath.
   ============================================================ */

#slide-14 .slide__canvas {
  background: var(--color-white);
}

/* Large section heading used twice on this slide
   ("Neutral Colors …", "Semantic Colors"). 31px Regular per Figma. */
#slide-14 .section-head {
  position: absolute;
  left: 140px;
  top: 140px;
  margin: 0;
  font-family: var(--ff-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-slide-label);
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
  white-space: nowrap;
}

#slide-14 .section-head--semantic {
  top: 485.38px;
}

/* --- Neutrals ramp ---------------------------------------- */

#slide-14 .shades--neutral {
  position: absolute;
  left: 140px;
  top: 220.38px;
  width: 1640px;
  z-index: 1;
}

#slide-14 .shade-row--neutral {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  /* Row-local map — same pattern as Slide 13 so .shade cells can
     pick their colour by nth-child position. */
  --shade-900: var(--color-neutral-900);
  --shade-800: var(--color-neutral-800);
  --shade-700: var(--color-neutral-700);
  --shade-600: var(--color-neutral-600);
  --shade-500: var(--color-neutral-500);
  --shade-400: var(--color-neutral-400);
  --shade-300: var(--color-neutral-300);
  --shade-200: var(--color-neutral-200);
  --shade-100: var(--color-neutral-100);
}

#slide-14 .shade-row--neutral .shade {
  flex: 1;
  min-width: 0;
  height: 137.092px;
}

#slide-14 .shade-row--neutral .shade:nth-child(1) { background: var(--shade-900); }
#slide-14 .shade-row--neutral .shade:nth-child(2) { background: var(--shade-800); }
#slide-14 .shade-row--neutral .shade:nth-child(3) { background: var(--shade-700); }
#slide-14 .shade-row--neutral .shade:nth-child(4) { background: var(--shade-600); }
#slide-14 .shade-row--neutral .shade:nth-child(5) { background: var(--shade-500); }
#slide-14 .shade-row--neutral .shade:nth-child(6) { background: var(--shade-400); }
#slide-14 .shade-row--neutral .shade:nth-child(7) { background: var(--shade-300); }
#slide-14 .shade-row--neutral .shade:nth-child(8) { background: var(--shade-200); }
#slide-14 .shade-row--neutral .shade:nth-child(9) { background: var(--shade-100); }

#slide-14 .shade-row--neutral .shade:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

/* The /100 step is nearly indistinguishable from the white slide
   background, so pick up a faint neutral-200 hairline on the
   exposed edges (top / right / bottom) — matches Figma. */
#slide-14 .shade-row--neutral .shade:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top: 1px solid var(--color-neutral-200);
  border-right: 1px solid var(--color-neutral-200);
  border-bottom: 1px solid var(--color-neutral-200);
}

/* Neutrals /500 base card — taller, full 4px radius, white label. */
#slide-14 .shade-row--neutral .shade--base {
  flex: 0 0 auto;
  width: 187.489px;
  height: 152.995px;
  box-sizing: border-box;
  padding-bottom: 16px;
  border-radius: 4px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-family: var(--ff-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-swatch-meta);
  line-height: var(--lh-none);
  color: var(--color-text-on-brand);
  z-index: 2;
}

/* Numeric axis underneath the neutrals row — mirrors the row's
   flex layout so each tick lines up with its column. */
#slide-14 .shade-axis--neutral {
  position: absolute;
  left: 140px;
  top: 405.38px;
  width: 1640px;
  display: flex;
  align-items: center;
  height: 12px;
  z-index: 1;
}

#slide-14 .shade-axis__tick {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--ff-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-tick);
  line-height: var(--lh-none);
  color: var(--color-text-muted);
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

#slide-14 .shade-axis__tick--base {
  flex: 0 0 auto;
  width: 187.489px;
}

/* --- Semantic row ----------------------------------------- */

#slide-14 .semantic-row {
  position: absolute;
  left: 140px;
  top: 555.22px;
  width: 1640px;
  display: flex;
  align-items: center;
  z-index: 1;
}

#slide-14 .semantic-cell {
  flex: 1;
  min-width: 0;
  height: 137.099px;
}

#slide-14 .semantic-cell:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
#slide-14 .semantic-cell:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

#slide-14 .semantic-cell--success { background: var(--color-signal-400); }
#slide-14 .semantic-cell--info    { background: var(--color-refract-400); }
#slide-14 .semantic-cell--warning { background: var(--color-lumen-400); }
#slide-14 .semantic-cell--error   { background: var(--color-radiant-400); }

/* Labels under the semantic row — 17px Medium text-muted,
   centred within each quarter. */
#slide-14 .semantic-axis {
  position: absolute;
  left: 140px;
  top: 724.31px;
  width: 1640px;
  display: flex;
  align-items: center;
  z-index: 1;
}

#slide-14 .semantic-axis__tick {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--ff-display);
  font-weight: var(--fw-medium);
  font-size: 17px;
  line-height: var(--lh-none);
  color: var(--color-text-muted);
  text-align: center;
  white-space: nowrap;
}


/* ============================================================
   Slide 16 — Clash Grotesk intro
   Figma node: 1171:321
   Two columns on a neutral-100 background:
   - Left: "Clash Grotesk" heading, two-paragraph intro, and a
     large "Aa" glyph sitting on a white 16px-rounded card.
   - Right: the five Clash Grotesk weights (Light → Bold) at
     100px each, stacked vertically, with numeric weight ticks
     (300–700) right-aligned to the slide's right margin.
   All copy uses prism-900 for the deep-violet brand display tone.
   ============================================================ */

#slide-16 .slide__canvas {
  background: var(--color-neutral-100);
}

/* --- Left column: heading, body copy, Aa sample ---------- */

#slide-16 .type-intro__title {
  position: absolute;
  left: 140.8px;
  top: 235.61px;
  margin: 0;
  font-family: var(--ff-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-slide-head);       /* 70px */
  line-height: var(--lh-none);
  color: var(--color-prism-900);
  white-space: nowrap;
}

#slide-16 .type-intro__body {
  position: absolute;
  left: 222.5px;
  top: 331.61px;
  width: 832.308px;
  margin: 0;
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);             /* 23px */
  line-height: var(--lh-body);
  color: var(--color-text-primary);
  text-align: justify;
}

#slide-16 .type-intro__body p {
  margin: 0;
}

/* White card that hosts the "Aa" sample. The glyph is nested
   inside and flex-centred like an image — the card clips any
   line-box overflow so only the visible glyph shows. */
#slide-16 .type-intro__sample {
  position: absolute;
  left: 222.5px;
  top: 584.88px;
  width: 832.308px;
  height: 309.958px;
  border-radius: 16px;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 1;
}

#slide-16 .type-intro__glyph {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-aa-glyph);         /* 360px */
  line-height: var(--lh-none);
  color: var(--color-prism-900);
  white-space: nowrap;
}

/* --- Right column: five weight rows --------------------- */

/* Each row spans from the weight-column left margin to the
   right-axis margin. Flex + align-items: baseline puts the
   big weight label and its small numeric tick on a shared
   baseline, so "Light"/"300", "Regular"/"400" etc. sit flush
   along their visible bottom edges. */
#slide-16 .type-weight-row {
  position: absolute;
  left: 1211.9px;
  right: 140.06px;          /* 1920 − 1779.94 */
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

#slide-16 .type-weight-row--light    { top: 235.61px; }
#slide-16 .type-weight-row--regular  { top: 381.24px; }
#slide-16 .type-weight-row--medium   { top: 526.88px; }
#slide-16 .type-weight-row--semibold { top: 672.51px; }
#slide-16 .type-weight-row--bold     { top: 818.14px; }

#slide-16 .type-weight {
  margin: 0;
  font-family: var(--ff-display);
  font-size: var(--fs-section-head);     /* 100px */
  line-height: var(--lh-none);
  color: var(--color-prism-900);
  white-space: nowrap;
}

#slide-16 .type-weight--light    { font-weight: var(--fw-light); }
#slide-16 .type-weight--regular  { font-weight: var(--fw-regular); }
#slide-16 .type-weight--medium   { font-weight: var(--fw-medium); }
#slide-16 .type-weight--semibold { font-weight: var(--fw-semibold); }
#slide-16 .type-weight--bold     { font-weight: var(--fw-bold); }

#slide-16 .type-weight-tick {
  margin: 0;
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-weight-tick);      /* 13px */
  line-height: var(--lh-none);
  color: var(--color-text-secondary);
  text-align: right;
  white-space: nowrap;
}


/* ============================================================
   Slide 17 — Web type scale reference card
   Figma node: 1175:2
   Left column: "Type Scale - Web" label + small scale-info block
   (ratio, base size, intended use).
   Right card: white 16px-rounded panel containing 11 sample
   labels (Title / H1–H6 / Paragraph Large/Base/Small/Micro) on
   the left and their matching rem+px specs right-aligned.
   Samples + specs are nested inside the card so their absolute
   positions are card-relative, keeping the math simple.
   ============================================================ */

#slide-17 .slide__canvas {
  background: var(--color-neutral-100);
}

/* Small info block under the slide label: ratio / base / usage. */
#slide-17 .type-scale-info {
  position: absolute;
  left: 140px;
  top: 195.61px;
  margin: 0;
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  font-size: 22px;
  color: var(--color-text-primary);
}

#slide-17 .type-scale-info p {
  margin: 0;
  line-height: 28px;
  white-space: nowrap;
}

/* White reference card — the type scale frame. Acts as the
   positioning context for its samples and specs. */
#slide-17 .type-scale-card {
  position: absolute;
  left: 699.06px;
  top: 81.61px;
  width: 1080px;
  height: 850.688px;
  border-radius: 16px;
  background: var(--color-white);
}

/* --- Sample labels (left column inside card) ------------- */

#slide-17 .type-scale-sample {
  position: absolute;
  left: 87.34px;               /* card-relative = 786.4 − 699.06 */
  margin: 0;
  font-family: var(--ff-display);
  font-weight: var(--fw-semibold);
  color: var(--color-prism-900);
  white-space: nowrap;
}

/* Paragraph variants flip family/weight/colour to body style. */
#slide-17 .type-scale-sample--p-lg,
#slide-17 .type-scale-sample--p-base,
#slide-17 .type-scale-sample--p-sm,
#slide-17 .type-scale-sample--p-micro {
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  color: var(--color-text-primary);
}

/* Each sample: its own size + matching leading + Figma top
   (all rows given as card-relative tops = figma_top − 81.61). */
#slide-17 .type-scale-sample--title   { top: 65.60px;  font-size: 65px; line-height: 65px; }
#slide-17 .type-scale-sample--h1      { top: 157.36px; font-size: 54px; line-height: 54px; }
#slide-17 .type-scale-sample--h2      { top: 241.42px; font-size: 45px; line-height: 45px; }
#slide-17 .type-scale-sample--h3      { top: 319.72px; font-size: 37px; line-height: 37px; }
#slide-17 .type-scale-sample--h4      { top: 393.20px; font-size: 31px; line-height: 31px; }
#slide-17 .type-scale-sample--h5      { top: 463.32px; font-size: 26px; line-height: 26px; }
#slide-17 .type-scale-sample--h6      { top: 528.64px; font-size: 22px; line-height: 22px; }
#slide-17 .type-scale-sample--p-lg    { top: 592.51px; font-size: 22px; line-height: normal; }
#slide-17 .type-scale-sample--p-base  { top: 656.38px; font-size: 18px; line-height: normal; }
#slide-17 .type-scale-sample--p-sm    { top: 717.36px; font-size: 15px; line-height: normal; }
#slide-17 .type-scale-sample--p-micro { top: 776.42px; font-size: 13px; line-height: normal; }

/* --- Spec ticks (right column inside card) --------------- */

#slide-17 .type-scale-spec {
  position: absolute;
  right: 87.03px;              /* card-right − Figma spec-right */
  margin: 0;
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-weight-tick);  /* 13px */
  line-height: normal;
  color: var(--color-text-secondary);
  text-align: right;
  white-space: nowrap;
}

#slide-17 .type-scale-spec--title   { top: 99.26px;  }
#slide-17 .type-scale-spec--h1      { top: 183.32px; }
#slide-17 .type-scale-spec--h2      { top: 261.62px; }
#slide-17 .type-scale-spec--h3      { top: 335.10px; }
#slide-17 .type-scale-spec--h4      { top: 404.74px; }
#slide-17 .type-scale-spec--h5      { top: 471.02px; }
#slide-17 .type-scale-spec--h6      { top: 534.41px; }
#slide-17 .type-scale-spec--p-lg    { top: 598.28px; }
#slide-17 .type-scale-spec--p-base  { top: 659.26px; }
#slide-17 .type-scale-spec--p-sm    { top: 718.33px; }
#slide-17 .type-scale-spec--p-micro { top: 776.42px; }


/* ============================================================
   Slide 18 — Web/SEO Simplified + Print type scales
   Figma node: 4069:577
   Two stacked reference cards on the same slide:
   - Top (Web/SEO Simplified): 5-row abridged version of the
     Slide 17 Minor Third scale, intended for landing pages.
   - Bottom (Print): a custom 8-row scale sized for Letter / A4
     print — smaller font sizes, mixed weights (Title Large and
     H1–H3 are Semibold; Subtitle is Light; Paragraph, Paragraph
     - Small, and List are Regular body copy).
   Shares the same "samples + specs nested inside a white card"
   structure as Slide 17.
   ============================================================ */

#slide-18 .slide__canvas {
  background: var(--color-neutral-100);
}

/* Print section's top-left label — same style as .slide-label
   but anchored at the start of the second section. */
#slide-18 .type-scale-print-label {
  position: absolute;
  left: 140px;
  top: 591.35px;
  margin: 0;
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-slide-label);      /* 31px */
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
  white-space: nowrap;
}

/* Shared info block (ratio / base / usage). Positioned per
   section via a modifier. */
#slide-18 .type-scale-info {
  position: absolute;
  left: 142.27px;
  margin: 0;
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  font-size: 22px;
  color: var(--color-text-primary);
}

#slide-18 .type-scale-info--web   { top: 195.61px; }
#slide-18 .type-scale-info--print { top: 644.35px; }

#slide-18 .type-scale-info p {
  margin: 0;
  line-height: 28px;
  white-space: nowrap;
}

/* --- Reference cards ------------------------------------- */

#slide-18 .type-scale-card {
  position: absolute;
  left: 699.06px;
  border-radius: 16px;
  background: var(--color-white);
}

#slide-18 .type-scale-card--web {
  top: 79.02px;
  width: 1080.944px;
  height: 421.299px;
}

#slide-18 .type-scale-card--print {
  top: 527.35px;
  width: 1080px;
  height: 429.221px;
}

/* --- Sample labels (left column inside each card) -------- */

#slide-18 .type-scale-sample {
  position: absolute;
  left: 87.78px;                         /* 786.84 − 699.06 */
  margin: 0;
  font-family: var(--ff-display);
  font-weight: var(--fw-semibold);
  color: var(--color-prism-900);
  white-space: nowrap;
}

/* Web card: 5 Semibold prism-900 rows, leading == font-size. */
#slide-18 .type-scale-sample--w-title { top: 64.00px;  font-size: 65px; line-height: 65px; }
#slide-18 .type-scale-sample--w-h1    { top: 145.93px; font-size: 54px; line-height: 54px; }
#slide-18 .type-scale-sample--w-h2    { top: 220.74px; font-size: 37px; line-height: 37px; }
#slide-18 .type-scale-sample--w-h3    { top: 285.75px; font-size: 26px; line-height: 26px; }
#slide-18 .type-scale-sample--w-sub   { top: 343.64px; font-size: 22px; line-height: 22px; }

/* Print card: headings stay Semibold/prism, Subtitle is Light,
   and Paragraph / Paragraph - Small / List flip to body style
   (Regular + text-primary). */
#slide-18 .type-scale-sample--p-para,
#slide-18 .type-scale-sample--p-small,
#slide-18 .type-scale-sample--p-list {
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  color: var(--color-text-primary);
}

#slide-18 .type-scale-sample--p-title { top: 64.00px;  font-size: 54px; line-height: 54px; }
#slide-18 .type-scale-sample--p-sub   { top: 125.50px; font-size: 30px; line-height: 30px; font-weight: var(--fw-light); }
#slide-18 .type-scale-sample--p-h1    { top: 172.74px; font-size: 19px; line-height: 21px; }
#slide-18 .type-scale-sample--p-h2    { top: 213.74px; font-size: 15px; line-height: 17px; }
#slide-18 .type-scale-sample--p-h3    { top: 252.07px; font-size: 12px; line-height: 14px; }
#slide-18 .type-scale-sample--p-para  { top: 288.61px; font-size: 10px; line-height: 15px; }
#slide-18 .type-scale-sample--p-small { top: 324.27px; font-size: 9px;  line-height: 13px; }
#slide-18 .type-scale-sample--p-list  { top: 359.03px; font-size: 11px; line-height: 16px; }

/* --- Spec ticks (right column inside each card) ---------- */

#slide-18 .type-scale-spec {
  position: absolute;
  right: 87px;                           /* card_right − Figma spec_right */
  margin: 0;
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-weight-tick);      /* 13px */
  line-height: normal;
  color: var(--color-text-secondary);
  text-align: right;
  white-space: nowrap;
}

/* Web card specs. */
#slide-18 .type-scale-spec--w-title { top: 99.00px;  }
#slide-18 .type-scale-spec--w-h1    { top: 172.93px; }
#slide-18 .type-scale-spec--w-h2    { top: 236.74px; }
#slide-18 .type-scale-spec--w-h3    { top: 293.75px; }
#slide-18 .type-scale-spec--w-sub   { top: 349.64px; }

/* Print card specs. */
#slide-18 .type-scale-spec--p-title { top: 88.07px;  }
#slide-18 .type-scale-spec--p-sub   { top: 135.31px; }
#slide-18 .type-scale-spec--p-h1    { top: 172.74px; }
#slide-18 .type-scale-spec--p-h2    { top: 210.18px; }
#slide-18 .type-scale-spec--p-h3    { top: 247.61px; }
#slide-18 .type-scale-spec--p-para  { top: 285.05px; }
#slide-18 .type-scale-spec--p-small { top: 322.48px; }
#slide-18 .type-scale-spec--p-list  { top: 357.24px; }


/* ============================================================
   Slide 19 — TV / Large Screens type scale reference card
   Figma node: 4069:669
   Major Third (1.250) scale built on a 23px base — the larger
   base makes the same H1–H6 cadence read from across a room on
   TVs/large-format displays. Single reference card with 10 rows
   (H1–H6 as Semibold prism-900 display, then Paragraph Large /
   Base / Small / Micro as Regular body copy).
   Same "samples + specs nested inside a white card" structure
   as Slides 17–18.
   ============================================================ */

#slide-19 .slide__canvas {
  background: var(--color-neutral-100);
}

/* Small info block under the slide label: ratio + base size. */
#slide-19 .type-scale-info {
  position: absolute;
  left: 140px;
  top: 195.61px;
  margin: 0;
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  font-size: 22px;
  color: var(--color-text-primary);
}

#slide-19 .type-scale-info p {
  margin: 0;
  line-height: 28px;
  white-space: nowrap;
}

/* White reference card — acts as the positioning context for
   its samples and specs. */
#slide-19 .type-scale-card {
  position: absolute;
  left: 697.09px;
  top: 81.61px;
  width: 1080px;
  height: 850.688px;
  border-radius: 16px;
  background: var(--color-white);
}

/* --- Sample labels (left column inside card) ------------- */

#slide-19 .type-scale-sample {
  position: absolute;
  left: 87.27px;               /* card-relative = 784.36 − 697.09 */
  margin: 0;
  font-family: var(--ff-display);
  font-weight: var(--fw-semibold);
  color: var(--color-prism-900);
  white-space: nowrap;
}

/* Paragraph variants flip family/weight/colour to body style. */
#slide-19 .type-scale-sample--p-lg,
#slide-19 .type-scale-sample--p-base,
#slide-19 .type-scale-sample--p-sm,
#slide-19 .type-scale-sample--p-micro {
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  color: var(--color-text-primary);
}

/* Each sample: own size + matching leading + Figma top
   (card-relative = figma_top − 81.61). */
#slide-19 .type-scale-sample--h1      { top: 65.60px;  font-size: 87px; line-height: 87px; }
#slide-19 .type-scale-sample--h2      { top: 173.69px; font-size: 70px; line-height: 70px; }
#slide-19 .type-scale-sample--h3      { top: 270.78px; font-size: 56px; line-height: 56px; }
#slide-19 .type-scale-sample--h4      { top: 358.87px; font-size: 45px; line-height: 45px; }
#slide-19 .type-scale-sample--h5      { top: 438.96px; font-size: 36px; line-height: 36px; }
#slide-19 .type-scale-sample--h6      { top: 513.05px; font-size: 29px; line-height: 29px; }
#slide-19 .type-scale-sample--p-lg    { top: 582.14px; font-size: 29px; line-height: normal; }
#slide-19 .type-scale-sample--p-base  { top: 651.23px; font-size: 23px; line-height: normal; }
#slide-19 .type-scale-sample--p-sm    { top: 716.32px; font-size: 18px; line-height: normal; }
#slide-19 .type-scale-sample--p-micro { top: 778.41px; font-size: 15px; line-height: normal; }

/* --- Spec ticks (right column inside card) --------------- */

#slide-19 .type-scale-spec {
  position: absolute;
  right: 87.97px;              /* card_right − Figma spec_right (1777.09 − 1689.12) */
  margin: 0;
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-weight-tick);  /* 13px */
  line-height: normal;
  color: var(--color-text-secondary);
  text-align: right;
  white-space: nowrap;
}

#slide-19 .type-scale-spec--h1      { top: 114.60px; }
#slide-19 .type-scale-spec--h2      { top: 211.69px; }
#slide-19 .type-scale-spec--h3      { top: 299.78px; }
#slide-19 .type-scale-spec--h4      { top: 379.87px; }
#slide-19 .type-scale-spec--h5      { top: 453.96px; }
#slide-19 .type-scale-spec--h6      { top: 523.05px; }
#slide-19 .type-scale-spec--p-lg    { top: 592.14px; }
#slide-19 .type-scale-spec--p-base  { top: 657.23px; }
#slide-19 .type-scale-spec--p-sm    { top: 719.32px; }
#slide-19 .type-scale-spec--p-micro { top: 779.41px; }


/* ============================================================
   Slide 21 — Brand in Use gallery
   Figma node: 1179:101
   Three rounded image cards (stationery / course cover / T-shirt)
   sit in one row. Cards sized per Figma; each <img> fills its
   card via object-fit: cover, so the rounded container provides
   the crop without needing absolute offsets.
   ============================================================ */

#slide-21 .slide__canvas {
  background: var(--color-neutral-100);
}

#slide-21 .gallery-card {
  position: absolute;
  top: 224.89px;
  height: 630.228px;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-neutral-200);  /* placeholder tint while images load */
}

#slide-21 .gallery-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Card sizes + positions, verbatim from Figma. */
#slide-21 .gallery-card--stationery { left: 16px;      width: 832.115px; }
#slide-21 .gallery-card--wobo       { left: 864.12px;  width: 486.994px; }
#slide-21 .gallery-card--tshirt     { left: 1367.11px; width: 536.891px; }


/* ============================================================
   Slide 22 — Brand in Use, second gallery (composite asset)
   Figma node: 1179:257
   The frame has five separate elements (iPad mockup, AIDA badge,
   mail signature, "AI & Data" card, "AI-Powered Schools" card)
   that Oliver exported pre-composited as a single PNG. We place
   it as one image at the bounding-box origin of the group.
   Bounding box: left 107.26 / top 224.89 / 1672.74 × 630.23,
   image is 2510×946 — same aspect, no distortion.
   ============================================================ */

#slide-22 .slide__canvas {
  background: var(--color-neutral-100);
}

#slide-22 .slide-22-images {
  position: absolute;
  left: 107.26px;
  top: 224.89px;
  width: 1672.74px;
  height: auto;            /* aspect-correct from natural 2510×946 */
  display: block;
}


/* ============================================================
   Slide 23 — Closing brand mark
   Figma node: 1187:171
   Outro slide: same gradient panel as the section covers,
   with the white horizontal Vista Data logo centered ~865×300.
   Reuses .slide-cover__bg for the rounded gradient panel and
   the existing white-logo SVG. No V Motion, no title.
   ============================================================ */

#slide-23 .slide-outro__logo {
  position: absolute;
  left: 526.53px;
  top: 390px;
  width: 866.932px;
  height: 300px;
  z-index: 2;
}


/* ============================================================
   Click-to-copy interactivity (Slides 10, 11, 13, 14)
   Wired by js/copy.js. The .is-copyable class is added at boot
   to anything clickable; .is-copied flashes briefly on copy.
   - Slide 10/11: copy hex from inline text element; the text
     itself is swapped to "Copied!" briefly, then restored.
   - Slide 13/14: copy hex computed from the swatch's bg, with
     a centered tooltip ::after that fades in on hover.
   - Slide 11 also lets the Spectrum gradient strip copy a CSS
     linear-gradient string.
   ============================================================ */

.is-copyable {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

/* --- Slide 10 — Primary color blocks ---------------------- */

#slide-10 .color-block.is-copyable {
  transition: transform 220ms ease, filter 220ms ease;
}
#slide-10 .color-block.is-copyable:hover {
  filter: brightness(1.04);
}
#slide-10 .color-block__hex {
  /* Smooth the text-swap on copy. */
  transition: opacity 160ms ease;
}
#slide-10 .color-block.is-copied .color-block__hex {
  opacity: 0.85;
}

/* --- Slide 11 — Extended palette swatches ----------------- */

#slide-11 .palette__swatch.is-copyable {
  transition: transform 220ms ease, filter 220ms ease;
}
#slide-11 .palette__swatch.is-copyable:hover {
  transform: translateY(-4px);
  filter: brightness(1.05);
}
#slide-11 .palette__swatch-hex {
  transition: opacity 160ms ease;
}
#slide-11 .palette__swatch.is-copied .palette__swatch-hex {
  opacity: 0.85;
}

/* The "Spectrum" gradient strip — same lift cue, but only when
   hovering the strip itself. */
#slide-11 .palette__gradient-strip.is-copyable {
  transition: filter 220ms ease;
}
#slide-11 .palette__gradient-strip.is-copyable:hover {
  filter: brightness(1.04);
}
#slide-11 .palette__gradient-label {
  transition: opacity 160ms ease;
}
#slide-11 .palette__gradient-strip.is-copied .palette__gradient-label {
  opacity: 0.85;
}

/* --- Slide 13 / 14 — shade tiles + semantic cells + hover tooltip ---- */

/* The cell becomes the positioning anchor for its hex tooltip. */
#slide-13 .shade,
#slide-14 .shade,
#slide-14 .semantic-cell {
  position: relative;
}

/* Centered hex tooltip — dark pill that reads on any shade,
   so we don't have to compute per-cell text contrast. The hex
   itself is read from the [data-hex] attribute set by copy.js. */
#slide-13 .shade::after,
#slide-14 .shade::after,
#slide-14 .semantic-cell::after {
  content: attr(data-hex);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.2);
  color: #ffffff;
  font-family: var(--ff-body);
  font-weight: var(--fw-medium);
  font-size: 12px;
  letter-spacing: 0.04em;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
  white-space: nowrap;
  z-index: 3;
}

#slide-13 .shade:hover::after,
#slide-14 .shade:hover::after,
#slide-14 .semantic-cell:hover::after,
#slide-13 .shade.is-copied::after,
#slide-14 .shade.is-copied::after,
#slide-14 .semantic-cell.is-copied::after {
  opacity: 1;
}

/* On the labelled "500" cell the existing color name (Prism,
   Refract, …) and the hex tooltip would overlap. Fade the
   label out on hover so the tooltip reads cleanly, then snap
   back when the cursor leaves. */
#slide-13 .shade--base,
#slide-14 .shade--base {
  transition: color 200ms ease;
}
#slide-13 .shade--base:hover,
#slide-14 .shade--base:hover,
#slide-13 .shade--base.is-copied,
#slide-14 .shade--base.is-copied {
  color: transparent;
}