/* Advanced AI training — Board and Trust
   "Newsroom dataroom" design system, second edition.
   One source of truth: tokens, materiality, chrome, motion and every
   slide component live here. index.html carries markup only;
   motion.js drives the choreography. */

/* ============================================================
   1 · Fonts — the real Guardian cuts, including true italics.
   (The first edition synthesised its italics; these are the
   drawn ones from the Guardian CDN.)
   ============================================================ */
@font-face {
  font-family: 'GH Guardian Headline';
  src: url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'GH Guardian Headline';
  src: url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-MediumItalic.woff2') format('woff2');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'GH Guardian Headline';
  src: url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'GH Guardian Headline';
  src: url('https://assets.guim.co.uk/static/frontend/fonts/guardian-headline/noalts-not-hinted/GHGuardianHeadline-Black.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'GuardianTextEgyptian';
  src: url('https://assets.guim.co.uk/static/frontend/fonts/guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'GuardianTextEgyptian';
  src: url('https://assets.guim.co.uk/static/frontend/fonts/guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-RegularItalic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'GuardianTextEgyptian';
  src: url('https://assets.guim.co.uk/static/frontend/fonts/guardian-textegyptian/noalts-not-hinted/GuardianTextEgyptian-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'GuardianTextSans';
  src: url('https://assets.guim.co.uk/static/frontend/fonts/guardian-textsans/noalts-not-hinted/GuardianTextSans-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'GuardianTextSans';
  src: url('https://assets.guim.co.uk/static/frontend/fonts/guardian-textsans/noalts-not-hinted/GuardianTextSans-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ============================================================
   2 · Tokens
   ============================================================ */
:root {
  --paper: #F4EFE6;
  --paper-deep: #E8DFD0;
  --paper-bright: #FBF8F1;
  --paper-rule: #D0C4AE;
  --ink: #121212;
  --ink-soft: #3d3a35;
  --ink-mute: #7a766e;
  --guardian-blue: #052962;
  --guardian-blue-soft: #4a6fa5;
  --guardian-yellow: #FFE500;
  --news-red: #C70000;
  --eco-green: #22874d;
  --display: 'GH Guardian Headline', Georgia, 'Times New Roman', serif;
  --body: 'GuardianTextEgyptian', Georgia, 'Times New Roman', serif;
  --ui: 'GuardianTextSans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'Menlo', 'SF Mono', 'Courier New', monospace;

  /* Müller-Brockmann grid — one source of truth for the 1920×1080
     canvas. The chrome margins, the card gutters and the grid-overlay
     instrument all read these, so content and grid can never drift.
     12 columns inside 120px margins on a 12px baseline; a 24px gutter
     lands a 3-up row exactly on 4 + 4 + 4 columns. */
  --grid-margin: 120px;
  --grid-top: 100px;
  --grid-bottom: 80px;
  --grid-cols: 12;
  --grid-gutter: 24px;
  --grid-baseline: 12px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);          /* expo-out: lands softly */
  --ease-in-out: cubic-bezier(0.77, 0, 0.18, 1);      /* bars and draws */
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);         /* fallback spring */

  /* Light */
  --shadow-card: 0 1px 0 rgba(255,255,255,0.55) inset,
                 0 1px 2px rgba(18,18,18,0.05),
                 0 22px 44px -28px rgba(18,18,18,0.38);
  --shadow-frame: 0 2px 6px rgba(18,18,18,0.08),
                  0 36px 80px -36px rgba(18,18,18,0.45);
  --hairline: rgba(18,18,18,0.08);

  /* Paper-fibre grain (SVG turbulence, tiled) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* A real spring where the browser supports linear() easing */
@supports (animation-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(
      0, 0.062 2.5%, 0.226 5.4%, 0.431 8.4%, 0.642 11.5%, 0.811 14.4%,
      0.937 17.3%, 1.027 20.3%, 1.077 23%, 1.1 25.8%, 1.104 28.9%,
      1.084 33.8%, 1.041 41%, 1.011 48.3%, 0.997 55.6%, 0.994 63.5%,
      1 81.1%, 1
    );
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: #000; }
body {
  font-family: var(--body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

deck-stage { background: #000; }

/* ============================================================
   3 · Slide frame and materiality
   ============================================================ */
.slide {
  width: 1920px; height: 1080px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  padding: var(--grid-top) var(--grid-margin) var(--grid-bottom);
  display: flex;
  flex-direction: column;
  position: relative;
  /* Soft cross-fade between slides; the stage flips visibility */
  transition: opacity 360ms var(--ease-out), visibility 0s linear 360ms;
}
.slide[data-deck-active] {
  transition: opacity 420ms var(--ease-out), visibility 0s linear 0s;
}

/* Press vignette — barely-there depth at the slide edges */
.slide::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(140% 110% at 50% 38%,
              transparent 58%, rgba(18,18,18,0.055) 100%);
  pointer-events: none;
  z-index: 60;
}
/* Paper-fibre grain over everything, including images */
.slide::after {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--grain);
  background-size: 280px 280px;
  opacity: 0.05;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 61;
}

.slide.ink {
  background: radial-gradient(120% 95% at 28% 18%,
              #1c1c1a 0%, var(--ink) 52%, #0b0b0a 100%);
  color: var(--paper);
}
.slide.ink::before {
  background: radial-gradient(140% 110% at 50% 40%,
              transparent 55%, rgba(0,0,0,0.5) 100%);
}
.slide.ink::after {
  mix-blend-mode: screen;
  opacity: 0.045;
}

/* ============================================================
   4 · Chrome — rule band, kicker, footer, progress
   ============================================================ */
.rule-band {
  position: absolute;
  top: 0; left: var(--grid-margin); right: var(--grid-margin);
  display: grid;
  grid-template-columns: 2fr 1fr;
  height: 8px;
  z-index: 2;
}
.rule-band::before { content: ''; background: var(--guardian-blue); }
.rule-band::after  { content: ''; background: var(--guardian-yellow); }
.slide.ink .rule-band::before { background: var(--paper); }

.kicker {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--news-red);
  margin: 0 0 24px;
}
.slide.ink .kicker { color: var(--guardian-yellow); }

.slide-foot {
  position: absolute;
  bottom: 36px; left: var(--grid-margin); right: var(--grid-margin);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--ui);
  font-size: 22px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-top: 1px solid var(--paper-rule);
  padding-top: 18px;
  z-index: 3;
}
.slide.ink .slide-foot {
  color: rgba(244,239,230,0.55);
  border-top-color: rgba(244,239,230,0.18);
}
.slide-foot .wm { font-weight: 700; letter-spacing: 0.2em; }
.slide-foot .num { font-family: var(--mono); letter-spacing: 0; font-variant-numeric: tabular-nums; }
/* Watermark shows only on the section openers; folio everywhere */
.slide:not(.section-opener) .slide-foot .wm { display: none; }

/* Progress — a quiet red seam along the foot of every slide,
   filled to the deck position by motion.js via --prog */
.deck-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5px;
  z-index: 62;
  pointer-events: none;
}
.deck-progress i {
  display: block;
  height: 100%;
  width: calc(var(--prog, 0) * 100%);
  background: var(--news-red);
  transition: width 800ms var(--ease-in-out);
}
.slide.ink .deck-progress i { background: var(--guardian-yellow); }

/* ============================================================
   5 · Motion system
   The engine adds .fx-armed to <deck-stage> (so nothing hides if
   JS never runs) and toggles .fx-play on the active slide.
   Each element opts in with data-fx and an inline --d delay.
   ============================================================ */
.fx-armed [data-fx] { opacity: 0; }

.fx-play [data-fx] {
  animation-delay: var(--d, 0ms);
  animation-fill-mode: both;
}
.fx-play [data-fx="rise"]      { animation-name: fxRise;     animation-duration: 680ms; animation-timing-function: var(--ease-out); }
.fx-play [data-fx="fade"]      { animation-name: fxFade;     animation-duration: 620ms; animation-timing-function: ease; }
.fx-play [data-fx="pop"]       { animation-name: fxPop;      animation-duration: 620ms; animation-timing-function: var(--spring); }
.fx-play [data-fx="spring-up"] { animation-name: fxSpringUp; animation-duration: 760ms; animation-timing-function: var(--spring); }
.fx-play [data-fx="photo"]     { animation-name: fxFade;     animation-duration: 1100ms; animation-timing-function: ease; }
.fx-play [data-fx="ghost"]     { animation-name: fxGhost;    animation-duration: 1300ms; animation-timing-function: var(--ease-out); }
.fx-play [data-fx="bar"]       { animation-name: fxBar;      animation-duration: 640ms; animation-timing-function: var(--ease-in-out); transform-origin: left center; }
.fx-play [data-fx="bar-v"]     { animation-name: fxBarV;     animation-duration: 700ms; animation-timing-function: var(--ease-in-out); transform-origin: center top; }

/* Photographic dissolve — the frame fades in while the image
   settles from a barely-there over-zoom, like a print developing */
[data-fx="photo"] { overflow: hidden; }
[data-fx="photo"] img { display: block; }
.fx-play [data-fx="photo"] img {
  animation: fxSettle 1600ms var(--ease-out) var(--d, 0ms) both;
}

@keyframes fxRise     { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes fxFade     { from { opacity: 0; } to { opacity: 1; } }
@keyframes fxPop      { from { opacity: 0; transform: scale(0.55); } to { opacity: 1; transform: scale(1); } }
@keyframes fxSpringUp { from { opacity: 0; transform: translateY(26px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes fxGhost    { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }
@keyframes fxBar      { from { opacity: 1; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes fxBarV     { from { opacity: 1; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } }
@keyframes fxSettle   { from { transform: scale(1.04); } to { transform: scale(1); } }

/* Masked word reveal — motion.js wraps each word of a [data-split]
   element in .w/.wi and staggers --wd across them. The padding /
   negative-margin pairs widen each mask window so ascenders,
   descenders and italic overhangs never clip at rest. */
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.18em 0.11em 0.24em 0.03em;
  margin: -0.18em -0.11em -0.24em -0.03em;
}
.w .wi { display: inline-block; }
.fx-armed .w .wi { transform: translateY(135%); }
.fx-play .w .wi {
  animation: fxWordUp 820ms var(--ease-out) var(--wd, 0ms) both;
}
@keyframes fxWordUp { from { transform: translateY(135%); } to { transform: none; } }

/* The cover's red full stop lands on a spring, a beat late */
.fx-play .q-mark .wi {
  animation-timing-function: var(--spring);
  animation-duration: 900ms;
  animation-delay: calc(var(--wd, 0ms) + 240ms);
}

/* Rule band draws across on the cover and section openers only */
.cover.fx-play .rule-band,
.section-opener.fx-play .rule-band {
  animation: fxBar 600ms var(--ease-in-out) both;
  transform-origin: left center;
}

/* ============================================================
   6 · Typography
   ============================================================ */
.slide-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 84px;
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0 0 52px;
  color: var(--ink);
  max-width: 26ch;
  text-wrap: balance;
}
.slide.ink .slide-title { color: var(--paper); }
.slide-title em {
  color: var(--news-red);
  font-style: italic;
  font-weight: 500;
}

.slide-subtitle {
  font-family: var(--body);
  font-size: 34px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0 0 52px;
  max-width: 60ch;
}
.slide.ink .slide-subtitle { color: rgba(244,239,230,0.82); }

/* ============================================================
   7 · Cover
   ============================================================ */
.cover {
  padding: 120px 120px 80px;
  justify-content: space-between;
}
.cover .wordmark {
  font-family: var(--display);
  font-weight: 500;
  font-size: 188px;
  line-height: 0.94;
  letter-spacing: -0.03em;
  color: var(--guardian-blue);
  margin: 0;
}
.cover .wordmark em {
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
}
.cover .wordmark .q-mark { color: var(--news-red); font-style: normal; font-weight: 700; }
.cover .kicker .group-tag {
  display: inline-block;
  background: var(--news-red);
  color: var(--paper);
  padding: 4px 12px 6px;
  margin-right: 14px;
  letter-spacing: 0.16em;
}
.cover-meta-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 80px;
  align-items: end;
}
.cover-framing {
  font-family: var(--body);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.5;
  color: var(--ink-soft);
  letter-spacing: 0;
  max-width: 880px;
  margin: 0;
}
.cover-stat-block { text-align: right; }
.cover-stat-block .stat-line {
  font-family: var(--mono);
  font-size: 24px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0;
}
.cover-stat-block .stat-line strong {
  display: block;
  font-family: var(--body);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  margin-top: 4px;
}
.cover .slide-foot { border-top: none; padding-top: 0; }

/* ============================================================
   8 · Section openers — ink, ghost numeral, yellow underline
   ============================================================ */
.section-opener {
  justify-content: center;
  padding: 0 120px;
}
.section-opener .chapter-num,
.section-opener .section-kicker,
.section-opener h1,
.section-opener .section-dek { position: relative; z-index: 1; }
.section-opener .chapter-ghost {
  position: absolute;
  right: 48px; bottom: -36px;
  z-index: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: 640px;
  line-height: 1;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(244,239,230,0.085);
  pointer-events: none;
  user-select: none;
}
.section-opener .chapter-num {
  font-family: var(--mono);
  font-size: 26px;
  letter-spacing: 0.2em;
  color: var(--guardian-yellow);
  margin-bottom: 40px;
  text-transform: uppercase;
}
.section-opener .section-kicker {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.24em;
  color: rgba(244,239,230,0.55);
  margin: 0 0 28px;
  text-transform: uppercase;
}
.section-opener h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 180px;
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--paper);
  margin: 0 0 40px;
  max-width: 18ch;
}
.section-opener h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--guardian-yellow);
  position: relative;
}
/* Yellow stroke draws under the italic word once it has landed */
.section-opener h1 em::after {
  content: '';
  position: absolute;
  left: 0.04em; right: 0.12em; bottom: -0.02em;
  height: 0.042em;
  background: var(--guardian-yellow);
  transform: scaleX(0);
  transform-origin: left center;
}
.section-opener.fx-play h1 em::after {
  animation: fxBar 700ms var(--ease-in-out) 1050ms both;
}
.section-opener .section-dek {
  font-family: var(--body);
  font-size: 34px;
  line-height: 1.4;
  color: rgba(244,239,230,0.82);
  max-width: 48ch;
}

/* ============================================================
   9 · Generic body + aims card system
   ============================================================ */
.slide-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.aims {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gutter);   /* 3 cards land exactly on 4 + 4 + 4 columns */
}
.aim {
  padding: 40px 36px;
  background: var(--paper-deep);
  border: 1px solid var(--hairline);
  border-top: 6px solid var(--guardian-blue);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 300px;
}
.aim:nth-child(2) { border-top-color: var(--news-red); }
.aim:nth-child(3) { border-top-color: var(--eco-green); }
.aim:nth-child(4) { border-top-color: var(--ink); }
.aim .aim-num {
  font-family: var(--mono);
  font-size: 24px;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.aim h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.aim p {
  font-family: var(--body);
  font-size: 26px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0;
}
.aim p strong { color: var(--ink); font-weight: 700; }

/* In-card image — sits at the bottom of an .aim (Beyond chat) */
.aim-image { margin-top: auto; display: block; }
.aim-image img { display: block; width: 100%; height: auto; object-fit: contain; }

/* Numbered point — shared by the open text blocks on the quantum
   leap and magpie slides: top rule, mono index, serif heading */
.point-num {
  display: block;
  font-family: var(--mono);
  font-size: 22px;
  letter-spacing: 0.12em;
  color: var(--guardian-blue);
  margin: 0 0 12px;
}

/* The mentor & the manager — a diptych split by a drawn hairline */
.duo {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  column-gap: 84px;
  align-items: start;
}
.duo-divider { width: 1px; align-self: stretch; background: var(--paper-rule); }
.duo-tag {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--guardian-blue);
  margin: 0 0 24px;
}
.duo-side:last-child .duo-tag { color: var(--news-red); }
.duo-side h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 64px;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 26px;
}
.duo-body {
  font-family: var(--body);
  font-size: 28px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* Irreplaceable expertise — the conversation rail: each component
   of a good prompt on the left, answered by the example you'd
   actually type as a speech bubble on the right */
.slide--framework .slide-title { font-size: 52px; margin-bottom: 18px; }
.framework { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.fw-row {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  column-gap: 84px;
  align-items: center;
  padding: 21px 0;
  border-top: 1px solid var(--paper-rule);
}
.fw-row:first-child { border-top: 2px solid var(--ink); }
.fw-what h3 {
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 8px;
}
.fw-num {
  font-family: var(--mono);
  font-size: 20px;
  letter-spacing: 0.08em;
  color: var(--guardian-blue);
}
.fw-row:nth-child(2) .fw-num { color: var(--news-red); }
.fw-row:nth-child(3) .fw-num { color: var(--eco-green); }
.fw-row:nth-child(4) .fw-num { color: var(--ink); }
.fw-what p {
  font-family: var(--body);
  font-size: 20px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0;
}

.example-bubble {
  position: relative;
  background: var(--paper-bright);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 16px 24px 17px;
  box-shadow: 0 8px 22px -10px rgba(18,18,18,0.18);
}
/* Tail points left, back at the component it answers */
.example-bubble::after {
  content: '';
  position: absolute;
  left: -15px;
  top: calc(50% - 9px);
  width: 0; height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-right: 15px solid var(--paper-bright);
}
.example-bubble p {
  font-family: var(--body);
  font-style: italic;
  font-size: 20px;
  line-height: 1.38;
  color: var(--ink-soft);
  margin: 0;
}

/* The magpie habit — picture-led triptych: framed photograph,
   then an open numbered text block beneath */
.magpie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gutter);   /* same 4 + 4 + 4 column rhythm as .aims */
}
.magpie-photo { box-shadow: var(--shadow-frame); }
.magpie-photo img {
  width: 100%;
  height: 296px;
  object-fit: cover;
  object-position: center;
}
.magpie-text {
  margin-top: 30px;
  border-top: 2px solid var(--ink);
  padding-top: 16px;
}
.magpie-col:nth-child(2) .point-num { color: var(--news-red); }
.magpie-col:nth-child(3) .point-num { color: var(--eco-green); }
.magpie-text h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 12px;
}
.magpie-text p {
  font-family: var(--body);
  font-size: 22px;
  line-height: 1.42;
  color: var(--ink-soft);
  margin: 0;
}

/* ============================================================
   10 · Agenda — editorial contents page
   ============================================================ */
.slide--agenda .slide-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 36px 80px;
}
.agenda-item { border-top: 2px solid var(--ink); padding-top: 22px; min-height: 0; }
.agenda-num {
  display: block;
  font-family: var(--mono);
  font-size: 22px;
  letter-spacing: 0.08em;
  color: var(--news-red);
  margin: 0 0 14px;
}
.agenda-item h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 12px;
}
.agenda-item p {
  font-family: var(--body);
  font-size: 23px;
  line-height: 1.42;
  color: var(--ink-soft);
  max-width: 44ch;
  margin: 0;
}

/* ============================================================
   11 · Four key rules — the rulebook ledger. Full-width rows
   under hairlines, like the editorial code these quote.
   ============================================================ */
.slide--rules .slide-title { margin-bottom: 28px; }
.rules-list {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rule-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  column-gap: 48px;
  padding: 24px 0;
  border-top: 1px solid var(--paper-rule);
}
.rule-row:first-child { border-top: 2px solid var(--ink); }
.rule-tag {
  font-family: var(--mono);
  font-size: 21px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--news-red);
  padding-top: 8px;
}
.rule-row h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 31px;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 8px;
}
.rule-row p {
  font-family: var(--body);
  font-size: 20px;
  line-height: 1.42;
  color: var(--ink-soft);
  margin: 0;
}

/* ============================================================
   12 · AI choice — three step cards + practice panel
   ============================================================ */
.slide--choice .slide-title { font-size: 56px; margin-bottom: 18px; max-width: none; }
.slide--choice .slide-subtitle { font-size: 26px; margin-bottom: 36px; max-width: 80ch; }
.slide--choice .slide-body { display: flex; flex-direction: column; justify-content: center; gap: 40px; }
.ai-choice { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 64px; }
.choice-card {
  background: var(--paper-deep);
  border: 1px solid var(--hairline);
  border-top: 6px solid var(--guardian-blue);
  box-shadow: var(--shadow-card);
  padding: 32px 36px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  position: relative;
  min-width: 0;
}
.choice-card:nth-child(2) { border-top-color: var(--news-red); }
.choice-card:nth-child(3) { border-top-color: var(--eco-green); }
.choice-card:not(:last-child)::after {
  content: '\2192';
  position: absolute;
  right: -48px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--display);
  font-weight: 700;
  font-size: 48px;
  color: var(--ink-mute);
  line-height: 1;
}
.fx-armed .choice-card:not(:last-child)::after { opacity: 0; }
.fx-play .choice-card:not(:last-child)::after { animation: fxFade 500ms ease 920ms both; }
.choice-num {
  font-family: var(--display);
  font-weight: 900;
  font-size: 88px;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--guardian-blue);
  margin-bottom: 4px;
}
.choice-card:nth-child(2) .choice-num { color: var(--news-red); }
.choice-card:nth-child(3) .choice-num { color: var(--eco-green); }
.choice-card h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.choice-card p {
  font-family: var(--body);
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0;
}
.ai-meta {
  background: var(--paper-deep);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--guardian-blue);
  box-shadow: var(--shadow-card);
  padding: 24px 36px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ai-meta-eyebrow {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--guardian-blue);
  margin: 0;
}
.ai-meta-body {
  font-family: var(--body);
  font-size: 21px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0;
}
.ai-meta-body em { color: var(--news-red); font-style: italic; }

/* ============================================================
   13 · The state of AI — stat kit and adoption chart
   ============================================================ */
.slide--appendix .slide-title { font-size: 60px; margin-bottom: 18px; max-width: none; }
.slide--appendix .slide-subtitle { font-size: 26px; margin-bottom: 28px; max-width: 70ch; }
.slide--appendix .slide-body { display: flex; flex-direction: column; justify-content: flex-start; gap: 18px; }

.ax-card {
  background: var(--paper-deep);
  border: 1px solid var(--hairline);
  border-top: 6px solid var(--guardian-blue);
  box-shadow: var(--shadow-card);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ax-card:nth-child(2) { border-top-color: var(--news-red); }
.ax-card-figure {
  font-family: var(--display);
  font-weight: 900;
  font-size: 64px;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--guardian-blue);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.ax-card:nth-child(2) .ax-card-figure { color: var(--news-red); }
.ax-card-body {
  font-family: var(--body);
  font-size: 20px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0;
}
.ax-card-eyebrow {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 4px;
}
.ax-source {
  font-family: var(--ui);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  font-style: italic;
  margin: 8px 0 0;
}
.ax-source strong { font-weight: 700; }
.ax-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ax-pair .ax-card { padding: 18px 28px; }
.ax-pair .ax-card-figure { font-size: 52px; }
.ax-frictions-head {
  font-family: var(--display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 6px 0 0;
}
.ax-frictions-head em { color: var(--news-red); font-style: italic; }
.ax-frictions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ax-frictions li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 18px;
  padding: 10px 0;
  border-top: 1px solid var(--paper-rule);
  align-items: baseline;
}
.ax-frictions li:first-child { border-top: 2px solid var(--ink); padding-top: 12px; }
.ax-frictions li::before {
  content: '';
  width: 12px; height: 12px;
  background: var(--news-red);
  align-self: start;
  margin-top: 10px;
}
.ax-frictions strong {
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
  display: block;
  margin-bottom: 2px;
}
.ax-frictions span {
  font-family: var(--body);
  font-size: 19px;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* Adoption-speed chart */
.slide--ax-speed .slide-title { font-size: 54px; margin-bottom: 12px; }
.slide--ax-speed .slide-subtitle { font-size: 24px; margin-bottom: 18px; max-width: 70ch; color: var(--ink-mute); }
.ax-chart-big { flex: 1; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.ax-chart-big svg { display: block; width: 100%; height: 100%; min-height: 0; flex: 1; }
.ax-chart-legend { display: flex; gap: 32px; justify-content: flex-start; }
.ax-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
}
.ax-chart-legend-item::before { content: ''; width: 28px; height: 4px; background: var(--ink-mute); }
.ax-chart-legend-item.is-internet::before { background: var(--guardian-blue-soft); }
.ax-chart-legend-item.is-phone::before { background: var(--ink-mute); }
.ax-chart-legend-item.is-ai::before { background: var(--news-red); }
.ax-axis { font-family: var(--mono); font-size: 15px; fill: var(--ink-mute); }
.ax-axis-y { text-anchor: end; }
.ax-grid { stroke: var(--paper-rule); stroke-width: 1; }
.ax-axis-base { stroke: var(--ink-mute); stroke-width: 1.5; }
.ax-line { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.ax-line--internet { stroke: var(--guardian-blue-soft); }
.ax-line--phone { stroke: var(--ink-mute); }
.ax-line--ai { stroke: var(--news-red); stroke-width: 4; }
.ax-endpoint { font-family: var(--ui); font-weight: 700; font-size: 15px; fill: var(--ink); }
.ax-endpoint--big {
  font-family: var(--display);
  font-size: 44px !important;
  fill: var(--news-red);
  font-weight: 900;
}
.fx-armed .ax-dot { opacity: 0; }
.fx-play .ax-dot { animation: fxFade 300ms ease both; }
.ax-dot--internet { fill: var(--guardian-blue-soft); }
.ax-dot--phone { fill: var(--ink-mute); }
.ax-dot--ai { fill: var(--news-red); }
.fx-play .ax-track--internet .ax-dot:nth-of-type(1) { animation-delay: 300ms; }
.fx-play .ax-track--internet .ax-dot:nth-of-type(2) { animation-delay: 1030ms; }
.fx-play .ax-track--internet .ax-dot:nth-of-type(3) { animation-delay: 1760ms; }
.fx-play .ax-track--internet .ax-dot:nth-of-type(4) { animation-delay: 2500ms; }
.fx-play .ax-track--phone .ax-dot:nth-of-type(1) { animation-delay: 300ms; }
.fx-play .ax-track--phone .ax-dot:nth-of-type(2) { animation-delay: 1030ms; }
.fx-play .ax-track--phone .ax-dot:nth-of-type(3) { animation-delay: 1760ms; }
.fx-play .ax-track--phone .ax-dot:nth-of-type(4) { animation-delay: 2500ms; }
.fx-play .ax-track--ai .ax-dot:nth-of-type(1) { animation-delay: 3200ms; }
.fx-play .ax-track--ai .ax-dot:nth-of-type(2) { animation-delay: 3730ms; }
.fx-play .ax-track--ai .ax-dot:nth-of-type(3) { animation-delay: 4260ms; }
.fx-play .ax-track--ai .ax-dot:nth-of-type(4) { animation-delay: 4800ms; }

/* ============================================================
   14 · Fable — split image / text
   ============================================================ */
.slide--fable .slide-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.fable-frame { box-shadow: var(--shadow-frame); }
.fable-img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.fable-text .kicker { margin-bottom: 18px; }
.fable-text .slide-title { font-size: 60px; margin-bottom: 28px; max-width: none; }
.fable-body {
  font-family: var(--body);
  font-size: 27px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

/* ============================================================
   15 · Quantum Leap — image left, stacked cards right
   ============================================================ */
.slide--ql .slide-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.ql-frame { box-shadow: var(--shadow-frame); }
.ql-img { display: block; width: 100%; height: auto; }
.ql-points { display: flex; flex-direction: column; gap: 44px; }
.ql-point { border-top: 2px solid var(--ink); padding-top: 18px; }
.ql-point:nth-child(2) .point-num { color: var(--news-red); }
.ql-point h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 12px;
}
.ql-point p {
  font-family: var(--body);
  font-size: 24px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0;
}

/* ============================================================
   16 · The Strategic Expedition — descending curve timeline
   ============================================================ */
.flow { width: 100%; }
.flow-track { position: relative; height: 240px; }
.flow-curve { display: block; width: 100%; height: 240px; }
.flow-curve .line {
  fill: none;
  stroke: var(--guardian-blue);
  stroke-width: 4;
  stroke-linecap: round;
}
.flow-curve .fill { fill: rgba(5,41,98,0.06); stroke: none; }
.fx-armed .flow-curve .line { stroke-dasharray: 2000; stroke-dashoffset: 2000; }
.fx-play .flow-curve .line { animation: drawCurve 1150ms var(--ease-in-out) 200ms both; }
@keyframes drawCurve { to { stroke-dashoffset: 0; } }
.fx-armed .flow-curve .fill { opacity: 0; }
.fx-play .flow-curve .fill { animation: fxFade 900ms ease 900ms both; }

.flow-node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 5px solid var(--guardian-blue);
  background: var(--paper);
  box-shadow: 0 10px 24px -12px rgba(18,18,18,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 700;
  color: var(--guardian-blue);
}
.flow-node.n1 { left: 12.5%; top: 50px;  }
.flow-node.n2 { left: 37.5%; top: 90px;  border-color: var(--news-red);  color: var(--news-red); }
.flow-node.n3 { left: 62.5%; top: 135px; border-color: var(--eco-green); color: var(--eco-green); }
.flow-node.n4 { left: 87.5%; top: 170px; }
/* Nodes pop in place — the pop keyframes compose with the centring */
.fx-play .flow-node[data-fx="pop"] { animation-name: fxNodePop; }
@keyframes fxNodePop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.flow-labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 30px;
}
.flow-label { text-align: center; padding: 0 28px; }
.flow-label h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 14px;
}
.flow-label p {
  font-family: var(--body);
  font-size: 27px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0;
}

/* ============================================================
   17 · Worked-example (case) slides — ledes and tables
   ============================================================ */
.slide.case .slide-title {
  font-size: 50px;
  line-height: 1.04;
  margin-bottom: 22px;
  max-width: 42ch;
}
.slide.case .slide-body {
  justify-content: flex-start;
  padding-top: 2px;
}
.case-lede {
  font-family: var(--body);
  font-size: 24px;
  line-height: 1.4;
  color: var(--ink-soft);
  max-width: 104ch;
  margin: 0 0 14px;
}
.case-lede strong { color: var(--ink); font-weight: 700; }
.case-emph {
  font-family: var(--body);
  font-style: italic;
  font-size: 25px;
  line-height: 1.35;
  color: var(--ink);
  margin: 8px 0 18px;
}

/* "Material fed in → what it triggered" table */
.feed-table { width: 100%; border-collapse: collapse; margin-top: 72px; }
.feed-table thead th {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: left;
  padding: 0 26px 14px;
  border-bottom: 2px solid var(--ink);
}
.feed-table thead th:first-child { width: 46%; }
.feed-table tbody td {
  padding: 24px 26px;
  border-bottom: 1px solid var(--paper-rule);
  font-family: var(--body);
  font-size: 23px;
  line-height: 1.34;
  vertical-align: top;
}
.feed-table tbody td:first-child { color: var(--ink-soft); }
.feed-table tbody td:last-child {
  color: var(--ink);
  position: relative;
  padding-left: 54px;
}
.feed-table tbody td:last-child::before {
  content: '→';
  position: absolute;
  left: 22px;
  top: 24px;
  color: var(--news-red);
  font-family: var(--ui);
  font-weight: 700;
}

/* Asked / suggested exchange rows */
.exchanges { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; gap: 0; margin-top: 4px; }
.exchange {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  background: var(--paper-deep);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-card);
}
.exchange .ask, .exchange .suggest { padding: 16px 26px 18px; }
.exchange .ask { border-left: 4px solid var(--ink-mute); }
.exchange .suggest { background: var(--paper-bright); border-left: 4px solid var(--guardian-blue); }
.exchange .speaker {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 7px;
}
.exchange .ask .speaker { color: var(--ink-mute); }
.exchange .suggest .speaker { color: var(--guardian-blue); }
.exchange p.line {
  font-family: var(--body);
  font-size: 20px;
  line-height: 1.34;
  color: var(--ink);
  margin: 0;
}

/* Benchmark comparison table */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}
.compare-table thead th {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--ui);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: left;
  font-size: 21px;
  padding: 14px 24px;
}
.compare-table thead th:first-child { width: 24%; }
.compare-table tbody td {
  padding: 27px 24px;
  border-bottom: 1px solid var(--paper-rule);
  font-family: var(--body);
  font-size: 22px;
  line-height: 1.32;
  color: var(--ink-soft);
  vertical-align: top;
}
.compare-table tbody tr:nth-child(odd) { background: var(--paper-deep); }
.compare-table tbody td:first-child {
  font-family: var(--display);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--guardian-blue);
  white-space: nowrap;
}

/* ============================================================
   18 · Research pull-quote (ink)
   ============================================================ */
.slide--research { justify-content: center; }
.research-eyebrow {
  font-family: var(--mono);
  font-size: 26px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244,239,230,0.5);
  margin: 0 0 52px;
}
.research-quote {
  position: relative;
  font-family: var(--display);
  font-weight: 500;
  font-size: 100px;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin: 0;
  max-width: 24ch;
}
.research-quote em { color: var(--guardian-yellow); font-style: italic; font-weight: 500; }
.research-mark {
  font-size: 1.25em;
  line-height: 0;
  color: rgba(244,239,230,0.32);
  margin-right: 0.04em;
  vertical-align: -0.12em;
  display: inline-block;
}
.research-sub {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244,239,230,0.5);
  margin: 58px 0 0;
  max-width: 64ch;
}

/* ============================================================
   19 · Worked-example prompt slides — framed screenshot beside
   a console card whose prompt types in live
   ============================================================ */
.slide--prompt .slide-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.isw-frame {
  background: #fff;
  border: 1px solid var(--paper-rule);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-frame);
}
.frame-chrome {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: var(--paper-bright);
  border-bottom: 1px solid var(--hairline);
}
.frame-chrome i {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: rgba(18,18,18,0.14);
}
.isw-img { display: block; width: 100%; height: auto; }
.prompt-col .kicker { margin-bottom: 16px; }
.prompt-col .slide-title { font-size: 56px; margin-bottom: 28px; max-width: none; }
.prompt-box {
  background: var(--paper-bright);
  border: 1px solid var(--paper-rule);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.prompt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 30px 12px;
  border-bottom: 1px solid var(--hairline);
  background: rgba(232,223,208,0.45);
}
.prompt-label {
  font-family: var(--mono);
  font-size: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0;
}
.prompt-head .frame-chrome { padding: 0; background: none; border: none; }
.prompt-body { padding: 22px 30px 26px; }
.prompt-text {
  font-family: var(--body);
  font-size: 23px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.caret {
  display: inline-block;
  width: 3px;
  height: 1.05em;
  background: var(--news-red);
  margin-left: 3px;
  vertical-align: -0.18em;
  animation: caretBlink 1.05s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }

/* ============================================================
   20 · Getting started — the argument + the genie on-ramp
   ============================================================ */
.slide--start .slide-title { font-size: 60px; margin-bottom: 30px; max-width: none; }
.slide--start .slide-body {
  display: grid;
  grid-template-columns: 1fr 1.08fr;   /* right a touch wider — the prompt is the hero */
  gap: 88px;
  align-items: center;
}
.start-lede {
  font-family: var(--body);
  font-size: 35px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 52px;
}
.start-lede strong { color: var(--ink); font-weight: 700; }
.start-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.start-points li {
  position: relative;
  padding-left: 24px;
  font-family: var(--body);
  font-size: 20px;
  line-height: 1.45;
  color: var(--ink-mute);
}
.start-points li::before {
  content: '';
  position: absolute;
  left: 0; top: 11px;
  width: 7px; height: 7px;
  background: var(--ink-mute);
}
.start-points strong { color: var(--ink-soft); font-weight: 600; }
.start-genie-intro {
  font-family: var(--body);
  font-size: 28px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0 0 32px;
}
.start-genie-intro strong { color: var(--ink); font-weight: 700; }
.slide--start .prompt-body { padding: 36px 46px 42px; }
.slide--start .prompt-text { font-size: 28px; line-height: 1.6; }
.start-buy {
  font-family: var(--body);
  font-size: 22px;
  line-height: 1.4;
  color: var(--ink);
  margin: 32px 0 0;
}
.start-buy strong { font-weight: 700; }
.buy-arrow { color: var(--news-red); font-weight: 700; margin-right: 9px; }

/* ============================================================
   21 · Pick a first project — typographic numbered list
   ============================================================ */
.slide--ways .slide-title { font-size: 52px; margin-bottom: 14px; }
.slide--ways .slide-subtitle { font-family: var(--body); font-size: 24px; line-height: 1.4; color: var(--ink-mute); margin: 0 0 22px; max-width: 90ch; }
.slide--ways .slide-body { justify-content: center; }
.ways-list { list-style: none; margin: 0; padding: 0; }
.way {
  display: grid;
  grid-template-columns: 108px 1fr 1.3fr;
  column-gap: 46px;
  align-items: baseline;
  padding: 32px 0;
  border-top: 1px solid var(--paper-rule);
}
.way:last-child { border-bottom: 1px solid var(--paper-rule); }
.way-num {
  font-family: var(--display);
  font-weight: 900;
  font-size: 58px;
  line-height: 0.85;
  color: var(--guardian-blue);
  letter-spacing: -0.01em;
}
.way:nth-child(2) .way-num { color: var(--news-red); }
.way:nth-child(3) .way-num { color: var(--eco-green); }
.way-main h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.08;
  color: var(--ink);
  margin: 0 0 12px;
}
.way-why {
  font-family: var(--body);
  font-size: 20px;
  line-height: 1.42;
  color: var(--ink-soft);
  margin: 0;
}
.way-ask {
  font-family: var(--body);
  font-style: italic;
  font-size: 21px;
  line-height: 1.46;
  color: var(--ink);
  margin: 0;
  padding-left: 24px;
  border-left: 3px solid var(--guardian-blue);
}
.way:nth-child(2) .way-ask { border-left-color: var(--news-red); }
.way:nth-child(3) .way-ask { border-left-color: var(--eco-green); }

/* ============================================================
   22 · Chat stream — prompts that became projects
   ============================================================ */
.chat-stream {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-end;
  max-width: 1280px;
  margin: 40px 0 0 auto;
}
.chat-bubble {
  background: var(--paper-deep);
  border: 1px solid var(--hairline);
  border-radius: 28px;
  box-shadow: var(--shadow-card);
  padding: 28px 40px;
  font-family: var(--body);
  font-size: 36px;
  line-height: 1.32;
  color: var(--ink);
  max-width: 100%;
  text-decoration: none;
  display: block;
  transform-origin: bottom right;
  transition: background 200ms ease, color 200ms ease;
}
a.chat-bubble:hover { background: var(--guardian-blue); color: var(--paper); }

/* ============================================================
   23 · Accessibility + print
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .slide, .slide[data-deck-active] { transition: none; }
  .fx-armed [data-fx],
  .fx-play [data-fx] { opacity: 1 !important; animation: none !important; transform: none !important; clip-path: none !important; }
  .fx-armed .w .wi, .fx-play .w .wi { transform: none !important; animation: none !important; }
  .fx-play [data-fx="photo"] img { animation: none !important; transform: none !important; }
  .fx-armed .flow-curve .line { stroke-dasharray: none; stroke-dashoffset: 0; }
  .fx-armed .flow-curve .fill, .fx-armed .ax-dot,
  .fx-armed .choice-card:not(:last-child)::after { opacity: 1; }
  .section-opener h1 em::after { transform: none; }
  .deck-progress i { transition: none; }
  .caret { display: none; }
}

@media print {
  .slide, .slide[data-deck-active] { transition: none; }
  .fx-armed [data-fx],
  .fx-play [data-fx] { opacity: 1 !important; animation: none !important; transform: none !important; clip-path: none !important; }
  .fx-armed .w .wi, .fx-play .w .wi { transform: none !important; animation: none !important; }
  .fx-play [data-fx="photo"] img { animation: none !important; transform: none !important; }
  .fx-armed .flow-curve .line { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; }
  .fx-armed .flow-curve .fill, .fx-armed .ax-dot,
  .fx-armed .choice-card:not(:last-child)::after { opacity: 1 !important; animation: none !important; }
  .section-opener h1 em::after { transform: none !important; animation: none !important; }
  .ax-line { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .deck-progress { display: none; }
  .caret { display: none !important; }
  .slide::after { display: none; }  /* grain muddies print */
}

/* ================================================================
   VIBECODING WORKSHOP — deck-specific components.
   Appended per CLAUDE.md: new components go at the bottom of this
   file, never forked into the HTML. Everything below stays inside
   the existing motion grammar (data-fx + --d), so reduced-motion
   and no-JS fallbacks come for free.
   ================================================================ */

/* ----------------------------------------------------------------
   1 · Activity — the two-panel build brief. Setup steps across the
   top, two starter activities side by side, then the shared "do"
   loop. Adapted from the Board and Trust deck's slide 25.
   ---------------------------------------------------------------- */
.slide--activity .slide-title { font-size: 54px; margin-bottom: 18px; max-width: none; }
.slide--activity .slide-body { justify-content: center; gap: 26px; }

.act-setup,
.act-do {
  display: flex;
  align-items: center;
  gap: 44px;
  padding: 18px 34px;
  background: var(--paper-deep);
  border: 1px solid var(--hairline);
}
.act-setup { border-left: 6px solid var(--guardian-blue); }
.act-do    { border-left: 6px solid var(--news-red); }

.act-setup-lead,
.act-do-lead {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--news-red);
  white-space: nowrap;
}
.act-setup-lead { color: var(--guardian-blue); }

.act-steps,
.act-do-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  list-style: none;
  margin: 0; padding: 0;
  flex: 1;
}
.act-steps li,
.act-do-steps li {
  display: flex;
  align-items: center;
  gap: 13px;
  font-family: var(--body);
  font-size: 23px;
  line-height: 1.25;
  color: var(--ink);
}
.act-step-n,
.act-do-n {
  flex: none;
  width: 33px; height: 33px;
  border-radius: 50%;
  color: var(--paper);
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.act-step-n { background: var(--guardian-blue); }
.act-do-n   { background: var(--news-red); }

.act-panels { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gutter); }
.act-panel {
  background: var(--paper-bright);
  border: 1px solid var(--hairline);
  border-top: 6px solid var(--guardian-blue);
  box-shadow: var(--shadow-card);
  padding: 26px 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.act-panel.a2 { border-top-color: var(--eco-green); }
.act-eyebrow {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--guardian-blue);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.act-panel.a2 .act-eyebrow { color: var(--eco-green); }
.act-optional {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: var(--paper);
  border: 1px solid var(--paper-rule);
  padding: 3px 9px;
}
.act-panel h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 33px;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.act-panel .prompt-box { flex: 1; display: flex; flex-direction: column; }
.act-panel .prompt-body { flex: 1; display: flex; align-items: center; padding: 20px 26px 22px; }
.act-panel .prompt-text { font-size: 25px; line-height: 1.4; }

.act-note {
  padding: 16px 28px;
  background: var(--paper-deep);
  border-left: 4px solid var(--guardian-yellow);
  font-family: var(--body);
  font-size: 21px;
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
}
.act-note strong { font-weight: 700; }

/* ----------------------------------------------------------------
   2 · Options ledger — a compact two-column numbered menu. Built for
   the ten self-contained tools; reused for the closing takeaways.
   Denser than .rules-list, which tops out around five rows.
   ---------------------------------------------------------------- */
.opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
  row-gap: 0;
  list-style: none;
  margin: 0; padding: 0;
}
.opt-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--hairline);
}
.opts > .opt-row:first-child,
.opts > .opt-row:nth-child(2) { border-top: 2px solid var(--ink); }
.opt-n {
  flex: none;
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 700;
  color: var(--guardian-blue);
  min-width: 26px;
  font-variant-numeric: tabular-nums;
}
.opt-row:nth-child(3n+2) .opt-n { color: var(--news-red); }
.opt-row:nth-child(3n)   .opt-n { color: var(--eco-green); }
.opt-main { min-width: 0; }
.opt-main strong {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 25px;
  line-height: 1.12;
  color: var(--ink);
}
.opt-main span {
  display: block;
  font-family: var(--body);
  font-size: 19px;
  line-height: 1.34;
  color: var(--ink-soft);
  margin-top: 3px;
}
.opts.wide { grid-template-columns: 1fr; column-gap: 0; }
.opts.wide > .opt-row:nth-child(2) { border-top: 1px solid var(--hairline); }
.opts.wide .opt-main strong { font-size: 27px; }
.opts.wide .opt-main span { font-size: 21px; }

/* ----------------------------------------------------------------
   3 · API ledger — the workshop matrix. Endpoint, what it returns,
   and the LLM move it sets up. Three columns; six rows a slide.
   ---------------------------------------------------------------- */
.api-ledger { width: 100%; border-collapse: collapse; }
.api-ledger thead th {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: left;
  padding: 0 20px 11px 0;
  border-bottom: 2px solid var(--ink);
}
.api-ledger tbody td {
  padding: 15px 20px 15px 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
  font-family: var(--body);
  font-size: 20px;
  line-height: 1.34;
  color: var(--ink-soft);
}
.api-ledger tbody td:first-child { width: 30%; }
.api-ledger tbody td:last-child  { width: 32%; padding-right: 0; }
/* The name is the link now: the endpoint itself was noise, and the
   deck's own prompts name APIs rather than quoting URLs at them. Each
   one opens a real example query in a new tab. */
.api-name {
  display: inline-block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 25px;
  line-height: 1.1;
  color: var(--ink);
  text-decoration: none;
}
.api-name:hover { color: var(--guardian-blue); text-decoration: underline; text-underline-offset: 4px; }
.api-name:focus-visible { outline: 3px solid var(--guardian-blue); outline-offset: 3px; }
.api-go {
  font-family: var(--ui);
  font-size: 16px;
  color: var(--ink-mute);
  margin-left: 8px;
  vertical-align: 3px;
}
.api-name:hover .api-go { color: var(--guardian-blue); }
.api-ask { color: var(--ink); font-style: italic; }
.api-ledger tbody tr:last-child td { border-bottom: none; }

/* ----------------------------------------------------------------
   4 · JSON specimen — real response text, shown as the artefact it
   is. Used once, to make "data, not a webpage" concrete.
   ---------------------------------------------------------------- */
.json-spec {
  background: var(--ink);
  border-radius: 10px;
  padding: 28px 34px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.json-spec pre {
  margin: 0;
  font-family: var(--mono);
  font-size: 22px;
  line-height: 1.6;
  color: rgba(244,239,230,0.92);
  white-space: pre-wrap;
  word-break: break-word;
}
.json-spec .k { color: var(--guardian-yellow); }
.json-spec .s { color: #8fd3a5; }
.json-spec .n { color: #9ec4ff; }
.json-url {
  font-family: var(--mono);
  font-size: 19px;
  color: var(--guardian-blue);
  margin: 0 0 14px;
  word-break: break-all;
}

/* ----------------------------------------------------------------
   6 · Solo prompt — the typing-prompt card without the screenshot
   beside it, for the prompts that are the whole point of the slide.
   ---------------------------------------------------------------- */
.slide--prompt-solo .slide-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.slide--prompt-solo .prompt-box { max-width: none; }
.slide--prompt-solo .prompt-text { font-size: 30px; line-height: 1.5; }
.slide--prompt-solo .prompt-body { padding: 30px 38px 34px; }

/* Click-to-copy affordance on any card opted in with data-copy */
[data-copy] { cursor: pointer; position: relative; }
.prompt-box[data-copy]:hover { border-color: var(--guardian-blue-soft); }
.tweak[data-copy]:hover { background: var(--paper); }
[data-copy]:focus-visible { outline: 3px solid var(--guardian-blue); outline-offset: 3px; }
.copy-badge {
  position: absolute;
  top: 12px; right: 16px;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--eco-green);
  padding: 4px 10px;
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
  pointer-events: none;
}
[data-copied] .copy-badge { opacity: 1; }

@media print {
  .slide--activity .act-panel,
  .slide--activity .act-do,
  .slide--activity .act-note { opacity: 1 !important; transform: none !important; }
  .copy-badge { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .copy-badge { transition: none; }
}

/* ----------------------------------------------------------------
   7 · Fit corrections, measured at 1920×1080 rather than guessed.
   The appendix stacks three and four prompt cards on one slide and
   the API ledger runs six rows; both need a tighter setting than
   the single-prompt slides they inherit from.
   ---------------------------------------------------------------- */
.slide--prompt-solo .slide-body { gap: 20px; }

.slide--appendix-prompts .slide-body { gap: 16px; }
.slide--appendix-prompts .prompt-head { padding: 9px 30px 8px; }
.slide--appendix-prompts .prompt-label { font-size: 15px; letter-spacing: 0.09em; }
.slide--appendix-prompts .prompt-body { padding: 16px 30px 18px; }
.slide--appendix-prompts .prompt-text { font-size: 21px; line-height: 1.42; }

.api-ledger tbody td { padding-top: 20px; padding-bottom: 20px; }

/* ----------------------------------------------------------------
   8 · Cover note — the one-line audience promise, marked with a
   Guardian-yellow highlighter that draws in behind the words after
   the cover has settled. The text is never hidden: only the mark
   animates, so no-JS and reduced-motion both read fine.
   ---------------------------------------------------------------- */
.cover-note-wrap { margin: 0; }
.cover-note {
  font-family: var(--display);
  font-weight: 500;
  font-size: 31px;
  line-height: 1.24;
  letter-spacing: -0.005em;
  color: var(--ink);
  padding: 0 4px;
  background-image: linear-gradient(var(--guardian-yellow), var(--guardian-yellow));
  background-repeat: no-repeat;
  background-position: 0 84%;
  background-size: 0% 44%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Re-applied each time the cover becomes active, so the mark redraws
   on a return visit without needing to be a [data-fx] element. */
[data-deck-active] .cover-note {
  animation: coverNoteMark 780ms var(--ease-out) 1500ms both;
}
@keyframes coverNoteMark { to { background-size: 100% 44%; } }

@media (prefers-reduced-motion: reduce) {
  .cover-note,
  [data-deck-active] .cover-note { background-size: 100% 44%; animation: none !important; }
}
@media print {
  .cover-note { background-size: 100% 44% !important; animation: none !important; }
}

/* ----------------------------------------------------------------
   9 · Tweaks grid — a menu of things to say next, for the slide
   after a deliberately vague prompt. Six cards, three up, each an
   eyebrow naming the kind of change and the sentence to actually
   type. Eyebrows and top rules cycle blue / red / green.
   ---------------------------------------------------------------- */
.tweaks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gutter);
}
.tweak {
  background: var(--paper-bright);
  border: 1px solid var(--hairline);
  border-top: 5px solid var(--guardian-blue);
  box-shadow: var(--shadow-card);
  padding: 24px 28px 27px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.tweak:nth-child(3n+2) { border-top-color: var(--news-red); }
.tweak:nth-child(3n)   { border-top-color: var(--eco-green); }
.tweak-kind {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--guardian-blue);
  margin: 0;
}
.tweak:nth-child(3n+2) .tweak-kind { color: var(--news-red); }
.tweak:nth-child(3n)   .tweak-kind { color: var(--eco-green); }
.tweak-say {
  font-family: var(--body);
  font-size: 23px;
  line-height: 1.42;
  color: var(--ink);
  margin: 0;
}

/* A single short prompt is the hero of its slide; give it the size to
   match, rather than leaving it rattling around in a wide card. */
.slide--prompt-hero .prompt-body { padding: 38px 44px 42px; }
.slide--prompt-hero .prompt-text { font-size: 44px; line-height: 1.28; }

/* ----------------------------------------------------------------
   10 · Spread — distribute a slide's components through the whole
   body height instead of centring them as one clump. Without this,
   a slide with three short blocks leaves a large void above and
   below while the blocks themselves sit 20px apart, which reads as
   a mistake rather than as breathing room.

   space-evenly (with gap zeroed, since gap would stack on top of
   the distributed space and make the edges tighter than the middle)
   gives an equal rhythm above, between and below.
   ---------------------------------------------------------------- */
.slide.slide--spread .slide-body {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 0;
}
/* Default paragraph margins on the child blocks skew the distribution,
   so the rhythm comes out uneven. Zero them and let space-evenly do it. */
.slide.slide--spread .slide-body > * { margin: 0; }

/* ----------------------------------------------------------------
   11 · JSON explained — the specimen beside a plain-English reading
   of it. The raw response on its own proves the point that APIs
   return data, but it doesn't teach anyone what the data is for.
   ---------------------------------------------------------------- */
.json-explain {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 44px;
  align-items: start;
}
.json-explain .json-spec { padding: 24px 28px; }
.json-explain .json-spec pre { font-size: 19px; line-height: 1.62; }

.json-read-lead {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--news-red);
  margin: 0 0 14px;
}
.json-read { list-style: none; margin: 0; padding: 0; }
.json-read li {
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
  font-family: var(--body);
  font-size: 20px;
  line-height: 1.36;
  color: var(--ink-soft);
}
.json-read li:first-child { border-top: 2px solid var(--ink); }
.json-read b {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 18px;
  color: var(--guardian-blue);
  display: block;
  margin-bottom: 3px;
}

/* ----------------------------------------------------------------
   12 · Rule pair — the "never do this / do this instead" couplet
   that sits inside a rules-list row when a rule needs an action
   rather than just an explanation.
   ---------------------------------------------------------------- */
.rule-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 12px;
}
.rule-pair > div {
  padding: 12px 18px;
  background: var(--paper-deep);
  border-left: 4px solid var(--news-red);
}
.rule-pair > div.do { border-left-color: var(--eco-green); }
.rule-pair-lead {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--news-red);
  margin: 0 0 4px;
}
.rule-pair > div.do .rule-pair-lead { color: var(--eco-green); }
.rule-pair p:last-child {
  font-family: var(--body);
  font-size: 19px;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
}

/* Rule 01 now carries a never/instead couplet as well as its body, so
   this ledger runs taller than the three-short-rows the base pattern
   assumes. Tighten the rhythm rather than cut the explanation. */
.slide--rules-dense .rule-row { padding: 18px 0; }
.slide--rules-dense .rule-row h3 { font-size: 29px; margin-bottom: 6px; }
.slide--rules-dense .rule-row p { font-size: 19px; line-height: 1.4; }
.slide--rules-dense .rule-pair { margin-top: 10px; gap: 16px; }
.slide--rules-dense .rule-pair > div { padding: 10px 16px; }
.slide--rules-dense .rule-pair p:last-child { font-size: 18px; line-height: 1.34; }

/* ----------------------------------------------------------------
   13 · Question and answer — the web address is the question, and
   it should look like one. A blue-ruled panel carries the address
   at reading size with the part that actually asks the question
   marked in yellow, then the plain-English version of it. The
   response below is labelled as the answer so the pairing is
   unmistakable from the back of a room.
   ---------------------------------------------------------------- */
.qa-lead {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--guardian-blue);
  margin: 0 0 10px;
}
.qa-ask {
  background: var(--paper-deep);
  border-left: 6px solid var(--guardian-blue);
  padding: 20px 30px 22px;
}
.qa-url {
  font-family: var(--mono);
  font-size: 25px;
  line-height: 1.34;
  color: var(--ink-soft);
  margin: 0 0 12px;
  word-break: break-all;
}
.qa-url mark {
  background: var(--guardian-yellow);
  color: var(--ink);
  font-weight: 700;
  padding: 1px 4px;
}
.qa-gloss {
  font-family: var(--display);
  font-weight: 500;
  font-style: italic;
  font-size: 27px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}
.qa-answer { display: block; }
.qa-answer .qa-lead {
  color: var(--news-red);
  border-top: 2px solid var(--ink);
  padding-top: 12px;
  margin-bottom: 14px;
}

/* ----------------------------------------------------------------
   14 · Build steps — a vertical "here's where we are / here's how we
   make it better" stack. Label on the left, prose on the right, so
   two stages read as a progression down the slide rather than as a
   comparison across it.
   ---------------------------------------------------------------- */
.build-step {
  display: grid;
  grid-template-columns: 270px 1fr;
  column-gap: 40px;
  align-items: center;
  background: var(--paper-deep);
  border-left: 6px solid var(--guardian-blue);
  padding: 22px 32px;
}
.build-step.richer { border-left-color: var(--eco-green); }
.build-lead {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--guardian-blue);
  margin: 0;
}
.build-step.richer .build-lead { color: var(--eco-green); }
.build-body {
  font-family: var(--body);
  font-size: 22px;
  line-height: 1.42;
  color: var(--ink);
  margin: 0;
}
.build-body strong { font-weight: 700; }

/* ----------------------------------------------------------------
   15 · Challenge — an over-to-you question, thrown to the room. Same
   blue slab as the holding slide's definition of done, so the deck
   has one consistent signal for "this one's yours to answer".
   ---------------------------------------------------------------- */
.challenge {
  background: var(--guardian-blue);
  color: var(--paper);
  padding: 26px 36px 28px;
  display: grid;
  grid-template-columns: 190px 1fr;
  column-gap: 34px;
  align-items: center;
}
.challenge-lead {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--guardian-yellow);
  margin: 0;
}
.challenge-body {
  font-family: var(--display);
  font-weight: 500;
  font-size: 34px;
  line-height: 1.14;
  color: var(--paper);
  margin: 0;
}
.challenge-body em { color: var(--guardian-yellow); font-style: italic; }

/* ----------------------------------------------------------------
   16 · Also try — a yellow-ruled block of alternative asks, for when
   the point is that the example is only one of many things you could
   have asked for.
   ---------------------------------------------------------------- */
.alsotry {
  background: var(--paper-deep);
  border-left: 6px solid var(--guardian-yellow);
  padding: 20px 30px 22px;
}
.alsotry-lead {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--guardian-blue);
  margin: 0 0 14px;
}
.alsotry-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 48px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.alsotry-list li {
  position: relative;
  padding-left: 26px;
  font-family: var(--body);
  font-size: 21px;
  line-height: 1.36;
  color: var(--ink);
}
.alsotry-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--news-red);
  font-weight: 700;
}

/* ----------------------------------------------------------------
   17 · Run sheet — the session at a glance. An ordered list rather
   than a table, because that's what it is: part, how long, what
   happens. No headers; the columns explain themselves.
   ---------------------------------------------------------------- */
.runsheet { list-style: none; margin: 0; padding: 0; }
.runsheet li {
  display: grid;
  grid-template-columns: 220px 190px 1fr;
  column-gap: 44px;
  align-items: baseline;
  padding: 34px 0;
  border-top: 1px solid var(--hairline);
}
.runsheet li:first-child { border-top: 2px solid var(--ink); }
.rs-part {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--guardian-blue);
}
.rs-time {
  font-family: var(--mono);
  font-size: 22px;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.rs-time mark {
  background: var(--guardian-yellow);
  color: var(--ink);
  font-weight: 700;
  padding: 1px 5px;
}
.rs-what {
  font-family: var(--body);
  font-size: 26px;
  line-height: 1.34;
  color: var(--ink);
}

/* The run sheet is the only thing on its slide, so let it sit centred
   rather than hard against the top with a third of the slide empty. */
.slide.case:has(.runsheet) .slide-body { justify-content: center; }

/* ----------------------------------------------------------------
   19 · Annotated prompt — underline the phrases that are doing the
   work, then explain each one underneath. The underline colour ties
   a phrase to its note, so the eye can pair them without arrows or
   numbers cluttering the prompt itself.
   ---------------------------------------------------------------- */
.pin { box-shadow: inset 0 -4px 0 var(--guardian-blue-soft); }
.pin-2 { box-shadow: inset 0 -4px 0 #7fbf9a; }

.annot { list-style: none; margin: 0; padding: 0; }
.annot li {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  column-gap: 44px;
  align-items: start;
  padding: 18px 0;
  border-top: 1px solid var(--hairline);
}
.annot li:first-child { border-top: 2px solid var(--ink); }
.annot-bit {
  font-family: var(--body);
  font-style: italic;
  font-size: 21px;
  line-height: 1.36;
  color: var(--ink);
  margin: 0;
  padding-left: 20px;
  border-left: 4px solid var(--guardian-blue);
}
.annot li:nth-child(2) .annot-bit { border-left-color: var(--eco-green); }
.annot-why {
  font-family: var(--body);
  font-size: 21px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0;
}
.annot-why strong { color: var(--ink); font-weight: 700; }

/* ----------------------------------------------------------------
   20 · Probes — a grid of "type this / here's what might go wrong"
   cards. Two up, so four fit without the type getting small. The
   query is set in mono on a tinted chip so it reads as something
   you'd type rather than something you'd read.
   ---------------------------------------------------------------- */
.probes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gutter);
}
.probe {
  background: var(--paper-bright);
  border: 1px solid var(--hairline);
  border-top: 5px solid var(--guardian-blue);
  box-shadow: var(--shadow-card);
  padding: 16px 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.probe:nth-child(2) { border-top-color: var(--news-red); }
.probe:nth-child(3) { border-top-color: var(--eco-green); }
.probe:nth-child(4) { border-top-color: var(--guardian-blue-soft); }
.probe-q {
  font-family: var(--display);
  font-weight: 500;
  font-size: 27px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--guardian-blue);
  margin: 0;
}
.probe:nth-child(2) .probe-q { color: var(--news-red); }
.probe:nth-child(3) .probe-q { color: var(--eco-green); }
.probe:nth-child(4) .probe-q { color: var(--guardian-blue-soft); }
.probe-a {
  font-family: var(--body);
  font-size: 20px;
  line-height: 1.38;
  color: var(--ink-soft);
  margin: 0;
}
.probe-a strong { color: var(--ink); font-weight: 700; }

/* A note that carries a warning rather than an aside. */
.act-note.warn { border-left-color: var(--news-red); }

/* The never/instead pair standing alone on a slide, rather than nested
   inside a rules ledger row. */
.slide-body > .rule-pair { margin-top: 0; gap: var(--grid-gutter); }
.slide-body > .rule-pair > div { padding: 22px 28px; }
.slide-body > .rule-pair p:last-child { font-size: 21px; line-height: 1.4; }

/* ----------------------------------------------------------------
   21 · Brief — the orientation slide. A hero statement carrying the
   deck's yellow marker, then three open columns rather than cards,
   because this early in the deck the page should feel airy. The
   rules do the dividing; no boxes needed.
   ---------------------------------------------------------------- */
.brief-lede {
  font-family: var(--display);
  font-weight: 500;
  font-size: 62px;
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
  max-width: 26ch;
}
.brief-lede mark {
  background-color: transparent;
  background-image: linear-gradient(var(--guardian-yellow), var(--guardian-yellow));
  background-repeat: no-repeat;
  background-position: 0 86%;
  background-size: 0% 44%;
  color: var(--ink);
  padding: 0 5px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
[data-deck-active] .brief-lede mark {
  animation: coverNoteMark 820ms var(--ease-out) 1000ms both;
}

.brief-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gutter);
}
.brief-col { border-top: 3px solid var(--guardian-blue); padding-top: 18px; }
.brief-col:nth-child(2) { border-top-color: var(--news-red); }
.brief-col:nth-child(3) { border-top-color: var(--eco-green); }
.brief-eyebrow {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--guardian-blue);
  margin: 0 0 10px;
}
.brief-col:nth-child(2) .brief-eyebrow { color: var(--news-red); }
.brief-col:nth-child(3) .brief-eyebrow { color: var(--eco-green); }
.brief-body {
  font-family: var(--body);
  font-size: 21px;
  line-height: 1.42;
  color: var(--ink-soft);
  margin: 0;
}
.brief-body strong { color: var(--ink); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .brief-lede mark,
  [data-deck-active] .brief-lede mark { background-size: 100% 44%; animation: none !important; }
}
@media print {
  .brief-lede mark { background-size: 100% 44% !important; animation: none !important; }
}

/* ----------------------------------------------------------------
   22 · Epigraph — a full-yellow slide carrying one borrowed line.
   The deck already uses yellow as its "this is the bit that matters"
   marker; this is that gesture at full scale, used exactly once.
   Ink on Guardian yellow, and the chrome inverts to match.
   ---------------------------------------------------------------- */
.slide.yellow {
  background: var(--guardian-yellow);
  color: var(--ink);
}
.slide.yellow .rule-band::before { background: var(--ink); }
.slide.yellow .rule-band::after  { background: var(--news-red); }
.slide.yellow .slide-foot {
  color: rgba(18,18,18,0.5);
  border-top-color: rgba(18,18,18,0.18);
}
.slide.yellow .deck-progress i { background: var(--ink); }

.slide--epigraph .slide-body { justify-content: center; }
.epigraph {
  font-family: var(--display);
  font-weight: 500;
  font-style: italic;
  font-size: 104px;
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin: 0;
  max-width: 21ch;
}
.epigraph-attr {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(18,18,18,0.72);
  margin: 46px 0 0;
}

/* ----------------------------------------------------------------
   23 · Pre-share checklist — two questions to answer before an app
   built in twenty minutes goes anywhere near a colleague.
   ---------------------------------------------------------------- */
.preshare-lead {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--news-red);
  margin: 0 0 14px;
}
.preshare-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gutter);
  list-style: none;
  margin: 0;
  padding: 0;
}
.preshare-list li {
  background: var(--paper-deep);
  border-left: 6px solid var(--news-red);
  padding: 18px 28px 20px;
}
.preshare-list li:nth-child(2) { border-left-color: var(--guardian-blue); }
.preshare-list h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 27px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 10px;
}
.preshare-list p {
  font-family: var(--body);
  font-size: 20px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0;
}
.preshare-list strong { color: var(--ink); font-weight: 700; }

/* ----------------------------------------------------------------
   24 · The sharing slide weights its two questions above everything
   else on the page. The four steps are mechanics and recede; the
   checks are the reason the slide exists. Scoped, because .act-setup
   is shared with the activity brief.
   ---------------------------------------------------------------- */
.slide--share .act-setup { padding: 14px 30px; }
.slide--share .act-setup-lead { font-size: 17px; }
.slide--share .act-steps li { font-size: 21px; }
.slide--share .act-step-n { width: 29px; height: 29px; font-size: 15px; }

.slide--share .preshare-lead {
  font-size: 23px;
  letter-spacing: 0.18em;
  margin-bottom: 20px;
}
.slide--share .preshare-list li {
  border-left-width: 8px;
  padding: 32px 40px 36px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 28px;
  align-items: start;
}
.preshare-num {
  font-family: var(--display);
  font-weight: 900;
  font-size: 56px;
  line-height: 0.86;
  letter-spacing: -0.02em;
  color: var(--news-red);
}
.preshare-list li:nth-child(2) .preshare-num { color: var(--guardian-blue); }
.slide--share .preshare-list h3 { font-size: 38px; line-height: 1.04; margin-bottom: 14px; }
.slide--share .preshare-list p { font-size: 25px; line-height: 1.42; color: var(--ink); }

/* A miniature of the click-to-copy badge, for referring to it in prose. */
.chip-copied {
  display: inline-block;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--eco-green);
  padding: 3px 9px;
  vertical-align: 2px;
}

/* The dense rules ledger uses bare numerals rather than "Rule 01", so
   the tag column no longer needs to be 200px wide. */
.slide--rules-dense .rule-row { grid-template-columns: 96px 1fr; column-gap: 36px; }

/* ----------------------------------------------------------------
   25 · Copy affordance for the small cards — the tweak grid and the
   options ledger. The full-size badge is out of scale on a 70px row,
   and neither showed you they were clickable until you clicked. A
   muted COPY hint appears on hover, and is replaced by the green
   COPIED once you have.
   ---------------------------------------------------------------- */
.tweak .copy-badge,
.opt-row .copy-badge {
  top: 9px;
  right: 12px;
  font-size: 12px;
  letter-spacing: 0.1em;
  padding: 3px 8px;
}
.tweak[data-copy]::after,
.opt-row[data-copy]::after {
  content: 'Copy';
  position: absolute;
  top: 9px;
  right: 12px;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: var(--paper);
  border: 1px solid var(--paper-rule);
  padding: 2px 7px;
  opacity: 0;
  transition: opacity 150ms var(--ease-out);
  pointer-events: none;
}
.tweak[data-copy]:hover::after,
.opt-row[data-copy]:hover::after,
.tweak[data-copy]:focus-visible::after,
.opt-row[data-copy]:focus-visible::after { opacity: 1; }
/* Once copied, the green badge takes over the same spot. */
.tweak[data-copy][data-copied]::after,
.opt-row[data-copy][data-copied]::after { opacity: 0; }

.opt-row[data-copy]:hover .opt-main strong { color: var(--guardian-blue); }

@media (prefers-reduced-motion: reduce) {
  .tweak[data-copy]::after, .opt-row[data-copy]::after { transition: none; }
}
@media print {
  .tweak[data-copy]::after, .opt-row[data-copy]::after { display: none !important; }
}

/* ----------------------------------------------------------------
   26 · Mobile survival.
   The deck is built for a 1920×1080 projector and doesn't pretend
   otherwise on a phone, but it has to at least open and advance.

   Every browser on iOS is WebKit, and WebKit is strict about memory.
   Thirty-four slides each carrying an feTurbulence noise layer under
   mix-blend-mode, plus a vignette and a pile of shadows, is enough to
   get the tab killed outright ("Can't open this page"). All of that
   is decoration, so on small screens it goes, and the inactive slides
   are told to do no rendering work at all.

   content-visibility is safe here: motion.js splits [data-split]
   titles by wrapping DOM nodes, never by measuring them, so a slide
   that has never been rendered still splits correctly.
   ---------------------------------------------------------------- */
@media (max-width: 1024px) {
  .slide::before,
  .slide::after { display: none !important; }

  .slide:not([data-deck-active]) { content-visibility: hidden; }

  .prompt-box, .tweak, .probe, .act-panel, .json-spec, .isw-frame,
  .preshare-list li, .hold-panel, .brief-col { box-shadow: none !important; }

  /* Hover affordances mean nothing on a touchscreen and the hint chip
     would sit there permanently after a tap. */
  .tweak[data-copy]::after,
  .opt-row[data-copy]::after { display: none; }
}

/* ================================================================
   AI WORKING GROUP — deck-specific components.
   Appended per CLAUDE.md. Everything stays inside the motion grammar
   (data-fx + --d), so reduced motion and no-JS get a static deck.

   One colour code runs through the landscape: the four layers built
   around a language model always wear the same colour.
     1 the model   blue     2 reasoning   red
     3 the loop    green    4 the harness ink
   Type scale for the room: display 84 / 56 / 44 / 36, body 30 / 26,
   labels 18–20 in the sans, figures in the display face.
   ================================================================ */
:root {
  --l1: var(--guardian-blue);
  --l2: var(--news-red);
  --l3: var(--eco-green);
  --l4: #1d1c1a;
}

/* ---------- shared bits ---------- */
.wg-label {
  font-family: var(--ui); font-weight: 700; font-size: 19px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-mute); margin: 0 0 14px;
}
.wg-body { font-family: var(--body); font-size: 28px; line-height: 1.42; color: var(--ink-soft); margin: 0; }
.wg-body strong { color: var(--ink); font-weight: 700; }
.wg-source { font-family: var(--ui); font-size: 17px; line-height: 1.45; color: var(--ink-mute); margin: 0; }
.slide.ink .wg-source { color: rgba(244,239,230,0.5); }
.slide.ink .slide-title em { color: var(--guardian-yellow); }
.slide-body.top { justify-content: flex-start; }

/* Elements centred with translate must not lose it to fxRise/fxPop,
   which animate transform. These use their own keyframes. */
@keyframes fxPopC  { from { opacity: 0; transform: translate(-50%,-50%) scale(0.55); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }

/* ---------- rings: the four layers, model at the core ---------- */
.rings { display: block; overflow: visible; }
.rings .disc { transform-box: fill-box; transform-origin: center; }
.rings .d1 { fill: var(--l1); }
.rings .d2 { fill: var(--l2); }
.rings .d3 { fill: var(--l3); }
.rings .d4 { fill: var(--l4); }
.rings .ring-label {
  font-family: var(--ui); font-weight: 700; font-size: 23px; letter-spacing: 0.2em;
  text-transform: uppercase; fill: rgba(251,248,241,0.94);
}
.rings .d4-label { fill: var(--guardian-yellow); }
.rings .core-label { font-family: var(--display); font-weight: 500; font-size: 40px; fill: var(--paper-bright); }

/* Stroked rings on the cover, bleeding off the right edge */
.cover { overflow: hidden; }
.cover-rings {
  position: absolute; right: -300px; top: 50%;
  width: 1120px; height: 1120px; margin-top: -560px;
  z-index: 0; pointer-events: none;
}
.cover-rings circle { fill: none; stroke-width: 20; transform-box: fill-box; transform-origin: center; }
.cover-rings .c1 { stroke: var(--l1); fill: var(--l1); }
.cover-rings .c2 { stroke: var(--l2); }
.cover-rings .c3 { stroke: var(--l3); }
.cover-rings .c4 { stroke: var(--l4); }
.cover > div:not(.slide-foot):not(.deck-progress) { position: relative; z-index: 1; }
.cover .slide-foot { z-index: 1; }
.cover .cover-framing { max-width: 820px; font-size: 30px; }

/* "You are here" badge on each layer slide */
.rings-badge {
  position: absolute; top: 84px; right: var(--grid-margin);
  display: flex; align-items: center; gap: 22px; z-index: 4;
}
.rings-badge .rings { width: 112px; height: 112px; }
.rings-badge .disc { opacity: 0.14; }
.rings-badge[data-on="1"] .d1,
.rings-badge[data-on="2"] .d2,
.rings-badge[data-on="3"] .d3,
.rings-badge[data-on="4"] .d4 { opacity: 1; }
.rings-badge[data-on="2"] .d1,
.rings-badge[data-on="3"] .d1, .rings-badge[data-on="3"] .d2,
.rings-badge[data-on="4"] .d1, .rings-badge[data-on="4"] .d2, .rings-badge[data-on="4"] .d3 { opacity: 0.5; }
.rings-badge .badge-text {
  font-family: var(--ui); font-weight: 700; font-size: 19px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-mute); text-align: right; line-height: 1.35;
}
.rings-badge .badge-text b { display: block; font-size: 28px; letter-spacing: 0.06em; color: var(--ink); }
.rings-badge[data-on="1"] .badge-text b { color: var(--l1); }
.rings-badge[data-on="2"] .badge-text b { color: var(--l2); }
.rings-badge[data-on="3"] .badge-text b { color: var(--l3); }

/* ---------- 02 today: the hour drawn to scale ---------- */
.hour { display: grid; grid-template-columns: 1fr 2fr; column-gap: 0; }
.hour-bar { height: 14px; background: var(--guardian-blue); transform-origin: left center; }
.hour-bar.p2 { background: var(--news-red); }
.hour-cell { padding: 30px 40px 0 0; }
.hour-cell + .hour-cell, .hour-bar + .hour-bar { margin-left: 8px; }
.hour-cell .pn { font-family: var(--mono); font-size: 24px; letter-spacing: 0.08em; color: var(--guardian-blue); margin: 0 0 18px; text-transform: uppercase; }
.hour-cell.p2 .pn { color: var(--news-red); }
.hour-cell h3 { font-family: var(--display); font-weight: 500; font-size: 58px; line-height: 1; letter-spacing: -0.015em; margin: 0 0 20px; }
.hour-cell p { font-family: var(--body); font-size: 29px; line-height: 1.42; color: var(--ink-soft); margin: 0; max-width: 30ch; }
.hour-cell.p2 p { max-width: 36ch; }
.destination {
  margin-top: 96px; padding: 34px 40px;
  display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: baseline;
  background: var(--paper-deep); border-left: 8px solid var(--guardian-yellow);
}
.destination b { font-family: var(--ui); font-size: 20px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.destination p { margin: 0; font-family: var(--display); font-weight: 500; font-size: 36px; line-height: 1.22; color: var(--ink); }

/* ---------- 04 scale ---------- */
.slide--scale .slide-title { margin-bottom: 20px; }
.scale-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px 120px; }
.scale-cell { border-top: 2px solid rgba(244,239,230,0.22); padding-top: 26px; }
.scale-fig {
  font-family: var(--display); font-weight: 700; font-size: 150px; line-height: 0.9;
  letter-spacing: -0.035em; color: var(--guardian-yellow); margin: 0 0 18px;
  font-variant-numeric: tabular-nums;
}
.scale-fig .unit { font-size: 0.5em; letter-spacing: -0.01em; margin-left: 0.06em; }
.scale-what { font-family: var(--body); font-size: 31px; line-height: 1.34; color: rgba(244,239,230,0.88); margin: 0; max-width: 30ch; }
.scale-what strong { color: var(--paper-bright); }
.scale-src { font-family: var(--ui); font-size: 17px; color: rgba(244,239,230,0.5); margin: 12px 0 0; }

/* ---------- 05 map ---------- */
.slide--map .slide-title { margin-bottom: 0; }
.slide--map .slide-body { display: grid; grid-template-columns: 660px 1fr; gap: 110px; align-items: center; }
.slide--map .rings { width: 660px; height: 660px; }
.layer-list { list-style: none; margin: 0; padding: 0; }
.layer-list li {
  display: grid; grid-template-columns: 76px 1fr; column-gap: 24px;
  padding: 22px 0; border-top: 1px solid var(--paper-rule);
}
.layer-list li:first-child { border-top: 0; padding-top: 0; }
.layer-list .ln { font-family: var(--display); font-weight: 700; font-size: 64px; line-height: 0.95; color: var(--l1); }
.layer-list li:nth-child(2) .ln { color: var(--l2); }
.layer-list li:nth-child(3) .ln { color: var(--l3); }
.layer-list li:nth-child(4) .ln { color: var(--l4); }
.layer-list h3 { font-family: var(--display); font-weight: 500; font-size: 48px; line-height: 1.05; margin: 0 0 6px; display: flex; align-items: baseline; gap: 18px; }
.layer-list h3 small { font-family: var(--mono); font-weight: 400; font-size: 20px; color: var(--ink-mute); letter-spacing: 0; }
.layer-list p { font-family: var(--body); font-size: 28px; line-height: 1.38; color: var(--ink-soft); margin: 0; }
.layer-sum {
  margin: 30px 0 0; padding-top: 26px; border-top: 3px solid var(--ink);
  font-family: var(--display); font-weight: 500; font-size: 40px; line-height: 1.15; color: var(--ink);
}
.layer-sum b { font-weight: 500; font-style: italic; color: var(--news-red); }

/* ---------- 06 layer 1: next-word odds as a waterfall ---------- */
.slide--layer .slide-title { max-width: 20ch; }
.l1-top { display: grid; grid-template-columns: 1fr 560px; gap: 90px; align-items: center; }
.guess { display: grid; grid-template-columns: auto auto; column-gap: 26px; justify-content: start; align-items: baseline; }
.guess-stem { font-family: var(--display); font-weight: 500; font-size: 84px; line-height: 1; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.guess-words { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.guess-words li { display: flex; align-items: baseline; gap: 18px; font-family: var(--display); font-weight: 500; line-height: 1.12; letter-spacing: -0.015em; }
.guess-words .pc { font-family: var(--mono); font-size: 22px; font-weight: 400; letter-spacing: 0; color: var(--ink-mute); }
.guess-words li:nth-child(1) { font-size: 84px; color: var(--l1); }
.guess-words li:nth-child(1) .pc { color: var(--l1); font-size: 26px; }
.guess-words li:nth-child(2) { font-size: 60px; color: rgba(18,18,18,0.62); }
.guess-words li:nth-child(3) { font-size: 46px; color: rgba(18,18,18,0.44); }
.guess-words li:nth-child(4) { font-size: 36px; color: rgba(18,18,18,0.3); }
.guess-note p { font-family: var(--body); font-size: 30px; line-height: 1.42; color: var(--ink-soft); margin: 0 0 20px; }
.guess-note p strong { color: var(--ink); }
.guess-note .wg-source { font-size: 18px; }

.grown { margin-top: 64px; padding-top: 28px; border-top: 3px solid var(--ink); }
.grown-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; counter-reset: gs; }
.grown-steps li { counter-increment: gs; position: relative; }
.grown-steps h4 {
  font-family: var(--display); font-weight: 500; font-size: 38px; line-height: 1.05; margin: 0 0 10px;
  display: flex; align-items: center; gap: 16px;
}
.grown-steps h4::before {
  content: counter(gs); flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--l1); color: var(--l1);
  font-family: var(--mono); font-size: 21px; display: grid; place-items: center;
}
.grown-steps li:not(:last-child)::after {
  content: '→'; position: absolute; right: -44px; top: 4px;
  font-family: var(--ui); font-size: 30px; color: var(--paper-rule);
}
.grown-steps p { font-family: var(--body); font-size: 25px; line-height: 1.42; color: var(--ink-soft); margin: 0; }
.grown-steps li.hot h4 { color: var(--l2); }
.grown-steps li.hot h4::before { background: var(--l2); border-color: var(--l2); color: var(--paper); }

/* ---------- 07 layer 2: the same question, two ways ---------- */
.l2-grid { display: grid; grid-template-columns: 1fr 420px; gap: 80px; align-items: stretch; }
.same-q {
  margin: 0 0 26px; padding: 22px 30px;
  background: var(--paper-deep); border-radius: 22px 22px 22px 6px;
  font-family: var(--body); font-size: 29px; line-height: 1.36; color: var(--ink);
}
.same-q b { font-family: var(--ui); font-size: 17px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); display: block; margin-bottom: 6px; }
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.way {
  background: var(--paper-bright); border: 1px solid var(--hairline); box-shadow: var(--shadow-card);
  border-radius: 12px; padding: 26px 30px 28px; display: flex; flex-direction: column;
}
.way-head { font-family: var(--ui); font-weight: 700; font-size: 18px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 16px; display: flex; align-items: center; gap: 10px; }
.way.slow .way-head { color: var(--l2); }
.way.slow .way-head::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--l2); }
.fx-play .way.slow .way-head::before { animation: thinkPulse 1.1s ease-in-out 3; }
@keyframes thinkPulse { 50% { opacity: 0.25; transform: scale(0.7); } }
.way-steps { list-style: none; margin: 0 0 18px; padding: 0 0 0 20px; border-left: 3px solid rgba(199,0,0,0.25); display: flex; flex-direction: column; gap: 8px; }
.way-steps li { font-family: var(--body); font-style: italic; font-size: 22px; line-height: 1.36; color: var(--ink-mute); }
.way-a { font-family: var(--body); font-size: 25px; line-height: 1.4; color: var(--ink); margin: 0; }
.verdict { margin-top: auto; padding-top: 16px; font-family: var(--ui); font-weight: 700; font-size: 18px; letter-spacing: 0.14em; text-transform: uppercase; }
.way.fast .verdict { color: var(--ink-mute); }
.way.fast .verdict::before { content: '✕  '; color: var(--news-red); }
.way.slow .verdict { color: var(--l3); }
.way.slow .verdict::before { content: '✓  '; }
.l2-note { margin: 16px 0 0; }

.duel { display: flex; flex-direction: column; border-left: 1px solid var(--paper-rule); padding-left: 56px; }
.duel-bars { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: end; min-height: 360px; border-bottom: 3px solid var(--ink); }
.duel-bars .col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.duel-bars .v { font-family: var(--display); font-weight: 700; font-size: 76px; line-height: 1; margin-bottom: 12px; color: var(--ink-mute); }
.duel-bars .col.hi .v { color: var(--l2); }
.duel-bars .bar { width: 120px; height: var(--h); background: rgba(18,18,18,0.18); transform-origin: center bottom; }
.duel-bars .col.hi .bar { background: var(--l2); }
.duel-names { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin: 14px 0 18px; text-align: center; font-family: var(--ui); font-size: 19px; line-height: 1.3; color: var(--ink-soft); }
.duel-names b { display: block; font-size: 22px; color: var(--ink); }
.duel .wg-source { font-size: 18px; color: var(--ink-soft); }

/* ---------- 08 layer 3: the loop ---------- */
.layer-cols--loop { display: grid; grid-template-columns: 600px 1fr; gap: 100px; align-items: center; }
.loop-wrap { position: relative; width: 600px; height: 600px; }
.loop-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.loop-svg .orbit { fill: none; stroke: var(--l3); stroke-width: 3; stroke-dasharray: 10 12; opacity: 0.55; }
.fx-play .loop-svg .orbit { animation: orbitSpin 22s linear infinite; transform-origin: 300px 300px; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
.loop-svg .arrow { fill: var(--l3); }
.loop-node {
  position: absolute; width: 180px; height: 180px; border-radius: 50%;
  background: var(--l3); color: var(--paper-bright);
  display: grid; place-content: center; text-align: center;
  font-family: var(--display); font-weight: 500; font-size: 44px; line-height: 1;
  box-shadow: var(--shadow-card); transform: translate(-50%, -50%);
}
.loop-node small { display: block; font-family: var(--body); font-size: 19px; line-height: 1.25; opacity: 0.92; margin-top: 8px; padding: 0 18px; }
.fx-play .loop-node[data-fx="pop"] { animation-name: fxPopC; }
.loop-goal { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); width: 230px; text-align: center; font-family: var(--body); font-size: 22px; line-height: 1.35; color: var(--ink-soft); }
.loop-goal b { display: block; font-family: var(--ui); font-size: 18px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--l3); margin-bottom: 6px; }
.run-goal { font-family: var(--display); font-weight: 500; font-size: 36px; line-height: 1.15; margin: 0 0 20px; }
.run-goal::before { content: '“'; color: var(--l3); }
.run-goal::after { content: '”'; color: var(--l3); }
.run { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.run li { display: grid; grid-template-columns: 92px 1fr; gap: 20px; align-items: baseline; font-family: var(--body); font-size: 24px; line-height: 1.34; color: var(--ink-soft); }
.run .k { font-family: var(--ui); font-weight: 700; font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--l3); text-align: right; }
.run li.done, .run li.done .k { color: var(--ink); font-weight: 700; }

/* How long an agent can keep going: METR's measure, to scale */
.stamina { margin-top: 34px; padding-top: 22px; border-top: 3px solid var(--l3); }
.stamina-rows { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.stamina-rows li { display: grid; grid-template-columns: 130px 1fr 150px; gap: 18px; align-items: center; font-family: var(--ui); font-size: 19px; color: var(--ink-soft); }
.stamina-rows .yr { font-family: var(--mono); font-size: 19px; color: var(--ink-mute); }
.stamina-rows .track { height: 22px; position: relative; }
.stamina-rows .fill { position: absolute; inset: 0 auto 0 0; width: var(--w); min-width: 4px; background: var(--l3); opacity: 0.45; transform-origin: left center; }
.stamina-rows li:last-child .fill { opacity: 1; }
.stamina-rows .val { font-family: var(--display); font-weight: 700; font-size: 30px; color: var(--ink); text-align: right; }
.stamina-rows li:last-child .val { color: var(--l3); }
.stamina .wg-source { font-size: 17px; }

/* ---------- 09 layer 4: the harness ---------- */
.layer-cols--hub { display: grid; grid-template-columns: 740px 1fr; gap: 80px; align-items: center; }
.hub { position: relative; width: 700px; height: 700px; margin-left: 40px; }
.hub-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hub-svg line { stroke: var(--ink); stroke-width: 2; opacity: 0.22; }
.hub-svg .rim { fill: none; stroke: var(--ink); stroke-width: 2; opacity: 0.14; }
.hub-core {
  position: absolute; left: 50%; top: 50%; width: 230px; height: 230px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--l1) 0 34%, var(--l2) 34% 58%, var(--l3) 58% 80%, var(--l4) 80%);
  box-shadow: var(--shadow-frame);
}
.hub-core span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--ui); font-weight: 700; font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-bright); }
.tool {
  position: absolute; transform: translate(-50%, -50%);
  background: var(--paper-bright); border: 1px solid var(--hairline); box-shadow: var(--shadow-card);
  padding: 14px 22px; border-radius: 999px;
  font-family: var(--ui); font-weight: 700; font-size: 23px; letter-spacing: 0.04em; white-space: nowrap;
  display: flex; align-items: center; gap: 12px;
}
.tool i { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); display: inline-block; }
.tool.risky i { background: var(--news-red); }
.fx-play .tool[data-fx="pop"] { animation-name: fxPopC; }
.harness-names { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 0; padding: 0; list-style: none; }
.harness-names li { font-family: var(--ui); font-weight: 700; font-size: 20px; letter-spacing: 0.04em; padding: 8px 16px; border: 1.5px solid var(--ink); border-radius: 999px; }

/* ---------- 10 acting for you ---------- */
.slide--proxy .slide-subtitle { margin-bottom: 40px; }
.proxy { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.proxy-card {
  background: var(--paper-bright); border: 1px solid var(--hairline); box-shadow: var(--shadow-card);
  border-top: 8px solid var(--l4); display: flex; flex-direction: column;
}
.proxy-main { padding: 36px 44px 30px; flex: 1; }
.proxy-card .who { font-family: var(--ui); font-weight: 700; font-size: 19px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--news-red); margin: 0 0 12px; }
.proxy-card h3 { font-family: var(--display); font-weight: 500; font-size: 64px; line-height: 1; margin: 0 0 16px; }
.proxy-card .what { font-family: var(--body); font-size: 27px; line-height: 1.4; color: var(--ink-soft); margin: 0 0 22px; }
.proxy-card .does { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.proxy-card .does li { font-family: var(--body); font-size: 26px; line-height: 1.36; padding-left: 36px; position: relative; color: var(--ink); }
.proxy-card .does li::before { content: '→'; position: absolute; left: 0; color: var(--news-red); font-family: var(--ui); font-weight: 700; }
.proxy-guard { padding: 22px 44px 26px; background: var(--paper-deep); border-top: 1px solid var(--hairline); }
.proxy-guard b { display: block; font-family: var(--ui); font-size: 17px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; }
.proxy-guard p { margin: 0; font-family: var(--body); font-size: 24px; line-height: 1.4; color: var(--ink); }

/* ---------- 11 timeline ---------- */
.slide--timeline .slide-subtitle { margin-bottom: 0; }
.tl { position: relative; height: 580px; }
.tl-axis { position: absolute; left: 0; right: 0; top: 290px; height: 4px; background: var(--ink); transform-origin: left center; }
.tl-ev { position: absolute; width: 260px; margin-left: -130px; }
.tl-ev .dot { position: absolute; left: 50%; width: 32px; height: 32px; margin-left: -16px; border-radius: 50%; background: var(--paper); border: 6px solid var(--c, var(--ink)); }
.tl-ev.up { bottom: 290px; padding-bottom: 48px; }
.tl-ev.up .dot { bottom: -16px; }
.tl-ev.down { top: 294px; padding-top: 66px; }
.tl-ev.down .dot { top: -18px; }
.tl-ev .stem { position: absolute; left: 50%; width: 2px; background: var(--c, var(--ink)); opacity: 0.45; }
.tl-ev.up .stem { bottom: 16px; height: 32px; }
.tl-ev.down .stem { top: 14px; height: 50px; }
.tl-ev .d { font-family: var(--mono); font-size: 22px; color: var(--c, var(--ink)); margin: 0 0 6px; text-align: center; }
.tl-ev .t { font-family: var(--display); font-weight: 500; font-size: 33px; line-height: 1.08; margin: 0; text-align: center; color: var(--ink); }
.tl-ev .s { font-family: var(--body); font-size: 22px; line-height: 1.3; margin: 6px 0 0; text-align: center; color: var(--ink-mute); }
.tl-ev.l1 { --c: var(--l1); } .tl-ev.l2 { --c: var(--l2); } .tl-ev.l3 { --c: var(--l3); } .tl-ev.l4 { --c: var(--l4); }
.tl-ev.tl-risk { --c: var(--news-red); }
.tl-ev.tl-risk .dot { background: var(--news-red); }
.tl-ev.now .dot { background: var(--news-red); border-color: var(--news-red); box-shadow: 0 0 0 10px rgba(199,0,0,0.14); }
.tl-key { display: flex; gap: 36px; font-family: var(--ui); font-weight: 700; font-size: 18px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin: 0; }
.tl-key span { display: inline-flex; align-items: center; gap: 10px; }
.tl-key i { width: 16px; height: 16px; border-radius: 50%; display: inline-block; }

/* ---------- 12 risks: a hero contrast, then a ledger ---------- */
.slide--risks { flex-direction: row; gap: 110px; }
.risks-lead { width: 620px; flex: none; display: flex; flex-direction: column; }
.risks-lead .slide-title { margin-bottom: 0; }
.contrast { margin-top: auto; margin-bottom: 40px; }
.contrast p { font-family: var(--display); font-weight: 500; line-height: 1.1; letter-spacing: -0.015em; margin: 0; }
.contrast .a { font-size: 40px; color: var(--ink-mute); margin-bottom: 26px; }
.contrast .b { font-size: 54px; color: var(--ink); }
.contrast .b em { font-style: italic; color: var(--news-red); }
.risk-rows { flex: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; }
.risk-rows li { display: grid; grid-template-columns: 60px 1fr; column-gap: 18px; padding: 18px 0; border-top: 1px solid var(--paper-rule); }
.risk-rows li:first-child { border-top: 4px solid var(--news-red); }
.risk-rows .rn { font-family: var(--mono); font-size: 22px; color: var(--news-red); padding-top: 8px; }
.risk-rows h3 { font-family: var(--display); font-weight: 500; font-size: 38px; line-height: 1.05; margin: 0 0 6px; }
.risk-rows p { font-family: var(--body); font-size: 24px; line-height: 1.4; color: var(--ink-soft); margin: 0; }
.risk-rows .case { margin-top: 10px; padding: 8px 14px; background: var(--paper-deep); font-size: 20px; line-height: 1.4; color: var(--ink-soft); }
.risk-rows .case b { font-family: var(--ui); font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin-right: 8px; }

/* ---------- 13 this summer (ink) ---------- */
.incident-line { font-family: var(--display); font-weight: 500; font-size: 66px; line-height: 1.04; letter-spacing: -0.02em; color: var(--paper); margin: 0 0 44px; max-width: 32ch; }
.incident-line em { font-style: italic; color: var(--guardian-yellow); }
.incident-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; margin-bottom: 36px; }
.incident-figs .f { border-top: 2px solid rgba(244,239,230,0.22); padding-top: 18px; }
.incident-figs .n { font-family: var(--display); font-weight: 700; font-size: 92px; line-height: 0.95; color: var(--guardian-yellow); font-variant-numeric: tabular-nums; }
.incident-figs .l { font-family: var(--body); font-size: 24px; line-height: 1.36; color: rgba(244,239,230,0.85); margin-top: 10px; }
.incident-after { font-family: var(--body); font-size: 26px; line-height: 1.42; color: rgba(244,239,230,0.85); margin: 0 0 20px; max-width: 70ch; }
.incident-after strong { color: var(--paper-bright); }
.slide--incident .slide-body { padding-bottom: 40px; }

/* ---------- 14 jagged: why nobody agrees ---------- */
.slide--jagged .slide-title { margin-bottom: 30px; }
.jag { display: grid; grid-template-columns: 1fr 600px; gap: 90px; align-items: start; }
.jag-chart { display: block; width: 100%; height: auto; overflow: visible; }
.jag-chart .human { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 8 8; opacity: 0.55; }
.jag-chart .human-label { font-family: var(--ui); font-weight: 700; font-size: 17px; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--ink-mute); }
.jag-chart .edge { fill: none; stroke: var(--news-red); stroke-width: 5; stroke-linejoin: round; }
.jag-chart .area { fill: rgba(199,0,0,0.07); }
.jag-chart .pt { fill: var(--paper); stroke: var(--news-red); stroke-width: 4; }
.jag-chart .tag { font-family: var(--body); font-size: 22px; fill: var(--ink); }
.jag-chart .tag.lo { fill: var(--ink-soft); font-style: italic; }
.jag-chart .axis { stroke: var(--ink); stroke-width: 2; }
.fx-armed .jag-chart .edge { stroke-dasharray: 2200; stroke-dashoffset: 2200; }
.fx-play .jag-chart .edge { animation: jagDraw 1600ms var(--ease-in-out) 400ms both; }
@keyframes jagDraw { to { stroke-dashoffset: 0; } }
.jag-study { margin-top: 18px; display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; }
.jag-study .big { font-family: var(--display); font-weight: 700; font-size: 84px; line-height: 0.9; color: var(--news-red); }
.jag-study p { margin: 0; font-family: var(--body); font-size: 23px; line-height: 1.4; color: var(--ink-soft); }
.jag-study p small { display: block; margin-top: 4px; font-family: var(--ui); font-size: 16px; color: var(--ink-mute); }

.machines { list-style: none; margin: 0; padding: 0; }
.machines li { display: grid; grid-template-columns: 1fr 120px; gap: 20px; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--paper-rule); }
.machines li:first-child { border-top: 3px solid var(--ink); }
.machines h4 { font-family: var(--display); font-weight: 500; font-size: 34px; line-height: 1.05; margin: 0 0 6px; }
.machines p { margin: 0; font-family: var(--body); font-size: 22px; line-height: 1.38; color: var(--ink-soft); }
.machines .time { font-family: var(--mono); font-size: 22px; text-align: right; color: var(--ink-mute); }
.machines li:nth-child(3) .time { color: var(--l2); }
.machines li:nth-child(4) .time { color: var(--l3); font-weight: 700; }
.jag-close {
  margin: 34px 0 0; padding: 26px 0 0; border-top: 3px solid var(--ink);
  font-family: var(--display); font-weight: 500; font-size: 38px; line-height: 1.16; color: var(--ink);
}
.jag-close mark { background: linear-gradient(transparent 60%, var(--guardian-yellow) 60%); color: inherit; padding: 0 4px; }

/* ---------- motion fallbacks ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-play .loop-svg .orbit, .fx-play .fx-play .way.slow .way-head:not(.is-thinking)::before { animation: none; }
  .fx-play .loop-node[data-fx], .fx-play .tool[data-fx] { transform: translate(-50%, -50%) !important; }
  .fx-armed .jag-chart .edge { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
}
@media print {
  .fx-play .loop-svg .orbit, .fx-play .way.slow .way-head::before { animation: none !important; }
  .fx-armed .loop-node[data-fx], .fx-play .loop-node[data-fx],
  .fx-armed .tool[data-fx], .fx-play .tool[data-fx] { transform: translate(-50%, -50%) !important; }
  .fx-armed .jag-chart .edge { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; }
}

/* ---------- fit pass, measured at 1920×1080 ---------- */
.slide--proxy .slide-subtitle { margin-bottom: 30px; }
.proxy-main { padding: 30px 40px 24px; }
.proxy-card h3 { font-size: 58px; margin-bottom: 12px; }
.proxy-card .what { margin-bottom: 16px; }
.proxy-card .does { gap: 6px; }
.proxy-guard { padding: 18px 40px 20px; }

.slide--timeline .tl { height: 540px; }
.slide--timeline .tl-axis { top: 270px; }
.slide--timeline .tl-ev.up { bottom: 270px; }
.slide--timeline .tl-ev.down { top: 274px; }

.risk-rows li { padding: 15px 0; }
.risk-rows h3 { font-size: 36px; }
.risk-rows p { font-size: 23px; }
.risk-rows .case { font-size: 19px; }

.machines li { padding: 14px 0; }
.machines h4 { font-size: 32px; }
.machines p { font-size: 21px; }
.jag-close { margin-top: 26px; padding-top: 20px; font-size: 34px; }
.slide--layer[data-layer="3"] .run { gap: 6px; }
.slide--layer[data-layer="3"] .run-goal { font-size: 34px; margin-bottom: 16px; }
.slide--layer[data-layer="3"] .stamina { margin-top: 24px; padding-top: 18px; }
.machines li { padding: 12px 0; }
.jag-close { font-size: 32px; margin-top: 22px; }
/* Layer 1: waterfall at the top, the three stages anchored to the foot */
.slide--layer[data-layer="1"] .slide-body { justify-content: space-between; padding: 36px 0 10px; }
.slide--layer[data-layer="1"] .l1-top { align-items: start; }
.slide--layer[data-layer="1"] .guess-stem,
.guess-words li:nth-child(1) { font-size: 96px; }
.guess-words li:nth-child(2) { font-size: 68px; }
.guess-words li:nth-child(3) { font-size: 52px; }
.guess-words li:nth-child(4) { font-size: 40px; }
.guess-words .pc { font-size: 24px; }
.guess-note { padding-top: 18px; border-top: 3px solid var(--l1); }
.slide--layer[data-layer="1"] .grown { margin-top: 0; }
.slide--layer[data-layer="1"] .l1-top { grid-template-columns: 1fr 460px; gap: 70px; }
.slide--layer[data-layer="1"] .guess-stem,
.guess-words li:nth-child(1) { font-size: 88px; white-space: nowrap; }
.slide--layer[data-layer="1"] .slide-body { padding: 30px 0 28px; }
/* Reasoning slide: the one-line explanation under the two answers */
.l2-how { margin: 22px 0 6px; font-family: var(--body); font-size: 25px; line-height: 1.4; color: var(--ink-soft); padding-left: 18px; border-left: 4px solid var(--l2); }
.l2-how strong { color: var(--ink); }

/* ---------- second polish pass ---------- */
/* Timeline key: hollow rings for the layers, a filled dot for risk,
   matching the dots on the line */
.tl-key i { width: 20px; height: 20px; border-radius: 50%; background: var(--paper) !important; border: 5px solid var(--c); box-sizing: border-box; }
.tl-key i.fill { background: var(--c) !important; }

/* Layer 1: likely words and their odds in two aligned columns */
.guess { column-gap: 30px; }
.guess-words { display: grid; grid-template-columns: auto auto; column-gap: 20px; row-gap: 2px; align-items: baseline; }
.guess-words li { display: contents; }
.guess-words .gw { font-family: var(--display); font-weight: 500; line-height: 1.02; letter-spacing: -0.015em; }
.guess-words .pc { font-family: var(--mono); font-size: 24px; color: var(--ink-mute); }
.guess-words li:nth-child(1) .gw { font-size: 88px; color: var(--l1); }
.guess-words li:nth-child(1) .pc { color: var(--l1); font-weight: 700; }
.guess-words li:nth-child(2) .gw { font-size: 66px; color: rgba(18,18,18,0.58); }
.guess-words li:nth-child(3) .gw { font-size: 52px; color: rgba(18,18,18,0.42); }
.guess-words li:nth-child(4) .gw { font-size: 42px; color: rgba(18,18,18,0.3); }
.guess-words li:nth-child(n+2) .pc { color: rgba(18,18,18,0.45); }

/* Risks: the lead becomes an ink panel, so the space in it reads as
   deliberate and the two voices get real contrast */
.slide--risks .risks-lead {
  width: 640px; padding: 52px 56px 56px; margin-bottom: 6px;
  background: radial-gradient(120% 95% at 28% 18%, #1c1c1a 0%, var(--ink) 55%, #0b0b0a 100%);
  color: var(--paper); box-shadow: var(--shadow-frame);
}
.slide--risks .risks-lead .kicker { color: var(--guardian-yellow); }
.slide--risks .risks-lead .slide-title { color: var(--paper); }
.slide--risks .risks-lead .slide-title em { color: var(--guardian-yellow); }
.slide--risks .contrast { margin-bottom: 0; }
.slide--risks .contrast .a { color: rgba(244,239,230,0.6); }
.slide--risks .contrast .b { color: var(--paper); }
.slide--risks .contrast .b em { color: var(--guardian-yellow); }
.slide--risks { gap: 90px; }

/* Final slide: what changes from tool to tool, one row per layer */
.slide--jagged .jag { grid-template-columns: 1fr 680px; gap: 80px; }
.dials { list-style: none; margin: 0; padding: 0; }
.dials li { position: relative; padding: 14px 0 14px 40px; border-top: 1px solid var(--paper-rule); }
.dials li:first-child { border-top: 3px solid var(--ink); }
.dials li::before {
  content: ''; position: absolute; left: 0; top: 22px;
  width: 22px; height: 22px; border-radius: 50%; border: 5px solid var(--c); box-sizing: border-box; background: var(--paper);
}
.dials h4 { font-family: var(--display); font-weight: 500; font-size: 32px; line-height: 1.08; margin: 0 0 4px; }
.dials p { margin: 0; font-family: var(--body); font-size: 21px; line-height: 1.38; color: var(--ink-soft); }

/* Layer 1: the chosen word, then one bar split by the odds */
.guess-line { font-family: var(--display); font-weight: 500; font-size: 92px; line-height: 1; letter-spacing: -0.02em; margin: 0 0 56px; color: var(--ink); white-space: nowrap; }
.guess-line .pick { color: var(--l1); background: linear-gradient(transparent 88%, rgba(5,41,98,0.25) 88%); padding: 0 4px; }
.odds-bar { display: flex; width: 100%; gap: 4px; }
.odds-bar .seg { width: var(--w); flex: none; }
.odds-bar .seg .bar { display: block; height: 64px; transform-origin: left center; }
.odds-bar .s1 .bar { background: var(--l1); }
.odds-bar .s2 .bar { background: var(--guardian-blue-soft); }
.odds-bar .s3 .bar { background: rgba(74,111,165,0.62); }
.odds-bar .s4 .bar { background: rgba(74,111,165,0.4); }
.odds-bar .s5 .bar { background: var(--paper-rule); }
.odds-bar .lab { display: block; padding-top: 12px; white-space: nowrap; }
.odds-bar .sw { display: block; font-family: var(--display); font-weight: 500; font-size: 32px; line-height: 1.1; color: var(--ink); }
.odds-bar .s1 .sw { color: var(--l1); font-size: 40px; }
.odds-bar .sp { display: block; font-family: var(--mono); font-size: 20px; color: var(--ink-mute); margin-top: 2px; }
.odds-bar .s1 .sp { color: var(--l1); font-weight: 700; }
.slide--layer[data-layer="1"] .l1-top { align-items: start; grid-template-columns: 1fr 460px; gap: 90px; }
.odds-bar .s5 .lab { display: none; }
.odds-bar .s3 .sw, .odds-bar .s4 .sw { font-size: 24px; }
.odds-bar .s4 .lab { padding-left: 6px; }
.guess-line .pick { background: none; border-bottom: 6px solid var(--l1); padding: 0 2px; }
.slide--risks .risks-lead { margin-bottom: 26px; }
.slide--jagged .dials li { padding: 12px 0 12px 40px; }
.slide--jagged .jag-close { margin-top: 18px; }
.guess-line { margin-bottom: 40px; }
.odds-bar .seg .bar { height: 54px; }
.slide--layer[data-layer="1"] .slide-body { padding: 20px 0 30px; }
.slide--layer[data-layer="1"] .guess-note p { font-size: 28px; margin-bottom: 16px; }
/* The earlier squeeze was chasing a false reading; restore the air */
.guess-line { margin-bottom: 52px; }
.odds-bar .seg .bar { height: 64px; }
.slide--layer[data-layer="1"] .slide-body { padding: 40px 0 28px; }


/* ---------- layer 1: the next-word toy, from the risk field guide ---------- */
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pred { display: grid; grid-template-columns: 1fr 820px; gap: 80px; align-items: start; }
.pred-sentence {
  font-family: var(--display); font-weight: 500; font-size: 64px; line-height: 1.12; letter-spacing: -0.015em;
  color: var(--ink); margin: 0 0 34px; min-height: 2.24em;
}
.pred-sentence .pw { background: linear-gradient(transparent 62%, rgba(255,229,0,0.85) 62%); padding: 0 2px; animation: pwIn 420ms var(--ease-out) both; }
.pred-sentence .pw--model { background: linear-gradient(transparent 62%, rgba(74,111,165,0.35) 62%); }
.pred-caret { display: inline-block; width: 0.42em; height: 0.9em; vertical-align: -0.08em; margin-left: 0.08em; background: var(--l1); animation: caretBlink 1s steps(2) infinite; }
@keyframes caretBlink { 50% { opacity: 0; } }
@keyframes pwIn { from { opacity: 0; transform: translateY(0.2em); } }
.pred-controls { display: flex; gap: 14px; margin-bottom: 24px; }
.pred-controls button, .pred-temp button {
  font-family: var(--ui); font-weight: 700; font-size: 21px; letter-spacing: 0.04em;
  border-radius: 999px; cursor: pointer; transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.pred-pick { background: var(--l1); color: var(--paper-bright); border: 2px solid var(--l1); padding: 14px 28px; }
.pred-pick:hover { background: #0a3a86; }
.pred-pick:disabled { opacity: 0.35; cursor: default; }
.pred-reset { background: transparent; color: var(--ink); border: 2px solid var(--ink); padding: 14px 26px; }
.pred-reset:hover { background: var(--paper-deep); }
.pred-temp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pred-temp-label { font-family: var(--ui); font-weight: 700; font-size: 17px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-right: 10px; }
.pred-temp button { background: transparent; color: var(--ink-soft); border: 1.5px solid var(--paper-rule); padding: 9px 18px; font-size: 19px; }
.pred-temp button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pred button:focus-visible { outline: 3px solid var(--news-red); outline-offset: 3px; }

.pred-q { font-family: var(--ui); font-weight: 700; font-size: 18px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin: 8px 0 14px; }
.pred-bars { display: grid; gap: 8px; min-height: 318px; align-content: start; }
.pbar {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
  width: 100%; text-align: left; cursor: pointer; overflow: hidden;
  border: 1px solid var(--paper-rule); background: var(--paper-bright); border-radius: 6px;
  padding: 10px 18px; min-height: 56px;
  font-family: var(--display); font-weight: 500; font-size: 30px; color: var(--ink);
}
.pbar::before { content: ''; position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); background: rgba(74,111,165,0.22); transition: width 500ms var(--ease-out); }
.pbar:first-child::before { background: rgba(5,41,98,0.28); }
.pbar > * { position: relative; }
.pbar:hover { border-color: var(--ink); }
.pbar-pct { font-family: var(--mono); font-size: 22px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.pbar--rest { cursor: default; font-family: var(--body); font-style: italic; font-size: 22px; color: var(--ink-mute); min-height: 44px; }
.pbar--rest:hover { border-color: var(--paper-rule); }
.pbar--rest::before { background: rgba(18,18,18,0.06); }
.pred-outro { margin: 0; font-family: var(--body); font-size: 26px; line-height: 1.42; color: var(--ink-soft); }
.pred-static { margin: 0; font-family: var(--body); font-size: 26px; color: var(--ink-soft); }
.pred.is-live .pred-static { display: none; }
.pred:not(.is-live) .pred-controls, .pred:not(.is-live) .pred-temp { display: none; }
.pred-note { margin-top: 14px; }

.slide--layer[data-layer="1"] .slide-body { padding: 20px 0 28px; }

@media (prefers-reduced-motion: reduce) {
  .pred-caret { animation: none; }
  .pred-sentence .pw { animation: none; }
  .pbar::before { transition: none; }
}
@media print {
  .pred-caret { animation: none; }
  .pred-controls, .pred-temp { display: none !important; }
}

/* Risks lead, second go: a paper panel in the deck's own palette, not ink */
.slide--risks .risks-lead {
  background: var(--paper-deep); color: var(--ink); box-shadow: none;
  border-top: 8px solid var(--news-red); padding: 48px 52px 52px;
}
.slide--risks .risks-lead .kicker { color: var(--news-red); }
.slide--risks .risks-lead .slide-title { color: var(--ink); }
.slide--risks .risks-lead .slide-title em { color: var(--news-red); }
.slide--risks .contrast .a { color: var(--ink-mute); font-size: 42px; padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--paper-rule); }
.slide--risks .contrast .b { color: var(--ink); font-size: 58px; }
.slide--risks .contrast .b em { color: var(--news-red); }

/* ---------- reasoning slide: the race, driven by stream.js ---------- */
.stream-armed [data-stream].is-waiting { visibility: hidden; }
.stream-armed .way-steps li.is-waiting { display: none; }
.is-streaming::after {
  content: ''; display: inline-block; width: 0.5em; height: 1em; margin-left: 0.12em;
  vertical-align: -0.12em; background: currentColor; opacity: 0.6;
  animation: caretBlink 0.9s steps(2) infinite;
}
.way-head.is-thinking span { font-variant-numeric: tabular-nums; }
.fx-play .way.slow .way-head:not(.is-thinking)::before { animation: none; }
.fx-play .way.slow .way-head.is-thinking::before { animation: thinkPulse 1.1s ease-in-out infinite; }

/* The payoff waits for the race: the chart and the explanation */
.stream-armed:not(.stream-done) [data-after-stream] { opacity: 0 !important; animation: none !important; }
.stream-armed.stream-done [data-after-stream] { animation: fxRise 680ms var(--ease-out) var(--da, 0ms) both; }
.stream-armed .l2-how[data-after-stream] { --da: 700ms; }
.stream-armed .wg-source[data-after-stream] { --da: 800ms; }
.duel .bar { transform-origin: center bottom; }
.stream-armed .duel .bar { transform: scaleY(0); }
.stream-armed.stream-done .duel .bar { animation: fxBarV 800ms var(--ease-in-out) var(--d2, 0ms) both; }

@media print {
  .stream-armed [data-after-stream] { opacity: 1 !important; animation: none !important; }
  .stream-armed .duel .bar { transform: none !important; animation: none !important; }
  .stream-armed [data-stream].is-waiting { visibility: visible; }
  .is-streaming::after { display: none; }
}

/* ================================================================
   PART 2 — one story, four tools
   ================================================================ */

/* "You are here" on each tool slide: a thumbnail of the reach map */
.map-badge { position: absolute; top: 80px; right: var(--grid-margin); display: flex; align-items: center; gap: 22px; z-index: 4; }
.map-badge svg { width: 104px; height: 104px; overflow: visible; }
.map-badge .mb-ax { stroke: var(--ink-mute); stroke-width: 2; opacity: 0.5; }
.map-badge .mb-dot { fill: rgba(18,18,18,0.18); }
.map-badge .mb-dot.on { fill: var(--news-red); }
.map-badge .badge-text { font-family: var(--ui); font-weight: 700; font-size: 19px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); text-align: right; line-height: 1.35; }
.map-badge .badge-text b { display: block; font-size: 26px; letter-spacing: 0.04em; color: var(--news-red); }

/* Tool slides: prompt and follow-ups left, the ledger right */
.slide--tool .slide-title { max-width: 18ch; margin-bottom: 34px; }
.tool-grid { display: grid; grid-template-columns: 1fr 660px; gap: 90px; align-items: start; }
.tool-setup { margin: 0 0 14px; font-family: var(--ui); font-weight: 700; font-size: 19px; letter-spacing: 0.04em; color: var(--ink-soft); }
.slide--tool .prompt-text { font-size: 28px; line-height: 1.42; }
.tries-label { margin: 30px 0 12px; }
.tries { display: grid; grid-template-columns: 1fr; gap: 12px; }
.slide--tool .tweak { padding: 16px 22px 18px; gap: 6px; border-top-width: 4px; }
.slide--tool .tweak-say { font-size: 22px; line-height: 1.38; }
.tool-rows { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--ink); }
.tool-rows li { padding: 16px 0 17px; border-bottom: 1px solid var(--paper-rule); }
.tool-rows .tr-k { display: block; font-family: var(--ui); font-weight: 700; font-size: 17px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--news-red); margin-bottom: 5px; }
.tool-rows p { margin: 0; font-family: var(--body); font-size: 24px; line-height: 1.4; color: var(--ink); }
.tool-rows li:last-child p { font-family: var(--display); font-weight: 500; font-size: 30px; }

/* The story */
.story-title { font-size: 150px; line-height: 0.95; max-width: 14ch; margin-bottom: 40px; }
.story-cols { display: grid; grid-template-columns: 1fr 760px; gap: 100px; align-items: start; }
.story-dek { margin: 0; font-family: var(--display); font-weight: 500; font-size: 44px; line-height: 1.2; color: var(--ink-soft); }
.story-why { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--ink); }
.story-why li { padding: 16px 0; border-bottom: 1px solid var(--paper-rule); font-family: var(--body); font-size: 27px; line-height: 1.4; color: var(--ink-soft); }
.story-why b { color: var(--ink); font-weight: 700; }

/* What to look for: six checks, 3 x 2 */
.checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px var(--grid-gutter); column-gap: 60px; }
.check { border-top: 4px solid var(--ink); padding-top: 20px; }
.check:nth-child(4) { border-top-color: var(--news-red); }
.check-n { font-family: var(--mono); font-size: 22px; color: var(--ink-mute); }
.check:nth-child(4) .check-n { color: var(--news-red); }
.check h3 { font-family: var(--display); font-weight: 500; font-size: 44px; line-height: 1.05; margin: 8px 0 10px; }
.check p { margin: 0; font-family: var(--body); font-size: 26px; line-height: 1.42; color: var(--ink-soft); }

/* The reach map */
.reach-grid { display: grid; grid-template-columns: 900px 1fr; gap: 80px; align-items: center; }
.reach-map { width: 900px; height: auto; overflow: visible; }
.reach-map .ax { stroke: var(--ink); stroke-width: 3; }
.reach-map .ax-t { font-family: var(--ui); font-weight: 700; font-size: 19px; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--ink-mute); }
.reach-map .mp circle { fill: var(--news-red); transform-box: fill-box; transform-origin: center; }
.reach-map .mp-label { font-family: var(--display); font-weight: 500; font-size: 34px; fill: var(--ink); }
.reach-text > div + div { margin-top: 30px; }
.reach-text .wg-body { font-size: 27px; }
.reach-text .wg-source { margin-top: 30px; }

/* Claude */
.claude-grid { display: grid; grid-template-columns: 1fr 660px; gap: 90px; align-items: start; }
.slide--claude .prompt-text { font-size: 30px; line-height: 1.42; }

/* Close */
.asks { list-style: none; margin: 0; padding: 0; }
.asks li { display: grid; grid-template-columns: 90px 1fr; gap: 24px; padding: 26px 0; border-top: 1px solid var(--paper-rule); }
.asks li:first-child { border-top: 3px solid var(--ink); }
.ask-n { font-family: var(--display); font-weight: 700; font-size: 72px; line-height: 0.9; color: var(--news-red); }
.asks h3 { font-family: var(--display); font-weight: 500; font-size: 50px; line-height: 1.05; margin: 0 0 8px; }
.asks p { margin: 0; font-family: var(--body); font-size: 28px; line-height: 1.42; color: var(--ink-soft); max-width: 60ch; }
.asks-foot { margin: 34px 0 0; font-family: var(--display); font-weight: 500; font-size: 36px; color: var(--ink); }
/* Slide 15 side list with its own label; slide 16 as bare questions */
.story-side .wg-label { margin-bottom: 12px; }
.checks .check h3 { font-size: 52px; margin-top: 12px; }
.slide--spread .checks { row-gap: 70px; }
.checks .check h3 { font-size: 62px; line-height: 1.02; }
.checks .check-n { font-size: 24px; }
.slide--spread .checks { row-gap: 90px; }

/* Tool slides, second pass: product name as title, open-in-new-tab link */
.slide--tool .slide-title { margin-bottom: 12px; max-width: none; }
.slide--tool .tool-sub { margin-bottom: 30px; font-size: 32px; }
.open-tool {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font-family: var(--ui); font-weight: 700; font-size: 21px; letter-spacing: 0.04em;
  color: var(--paper-bright); background: var(--guardian-blue); text-decoration: none;
  padding: 12px 24px; border-radius: 999px;
}
.open-tool:hover { background: #0a3a86; }
.open-tool:focus-visible { outline: 3px solid var(--news-red); outline-offset: 3px; }
.map-badge .badge-text b { font-size: 22px; color: var(--ink); }
@media print { .open-tool { background: none; color: var(--guardian-blue); padding: 0; } }
.slide--tool .tool-sub { margin-bottom: 24px; font-size: 30px; }
.slide--tool .open-tool { margin-bottom: 14px; padding: 10px 22px; }
.slide--tool[data-tool="gem"] .prompt-text,
.slide--tool[data-tool="gpt"] .prompt-text { font-size: 25px; line-height: 1.38; }
.slide--tool .prompt-body { padding: 18px 28px 20px; }
.slide--tool .tries-label { margin: 20px 0 10px; }
.slide--tool .tries { gap: 9px; }
.slide--tool .tweak { padding: 12px 20px 14px; gap: 4px; }
.slide--tool .tweak-say { font-size: 21px; line-height: 1.34; }
.slide--tool .tool-rows li { padding: 13px 0 14px; }
/* Tool slides without the one-line dek */
.slide--tool .slide-title { margin-bottom: 34px; }
.slide--tool .open-tool { margin-bottom: 18px; padding: 12px 24px; }

/* AI Overviews: the evidence */
.slide--aio-ev .slide-title { margin-bottom: 12px; }
.slide--aio-ev .slide-subtitle { font-size: 30px; margin-bottom: 30px; }
.ev-grid { display: grid; grid-template-columns: 1fr 700px; gap: 90px; align-items: start; }
.ev-figs { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--ink); }
.ev-figs li { display: grid; grid-template-columns: 200px 1fr; gap: 26px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--paper-rule); }
.ev-n { font-family: var(--display); font-weight: 700; font-size: 92px; line-height: 0.9; letter-spacing: -0.03em; color: var(--guardian-blue); }
.ev-figs li:nth-child(2) .ev-n { color: var(--news-red); }
.ev-figs p { margin: 0; font-family: var(--body); font-size: 26px; line-height: 1.38; color: var(--ink); }
.ev-figs .ev-src { margin-top: 6px; font-family: var(--ui); font-size: 17px; line-height: 1.4; color: var(--ink-mute); }
.ev-fails { background: var(--paper-deep); border-top: 6px solid var(--news-red); padding: 26px 32px 28px; }
.ev-fails ul { list-style: none; margin: 0; padding: 0; }
.ev-fails li { padding: 12px 0; border-top: 1px solid var(--paper-rule); font-family: var(--body); font-size: 23px; line-height: 1.4; color: var(--ink-soft); }
.ev-fails li:first-child { border-top: 0; padding-top: 4px; }
.ev-fails b { color: var(--ink); }
.ev-fails li span { display: block; font-family: var(--ui); font-size: 16px; color: var(--ink-mute); margin-top: 3px; }
.ev-note { margin: 24px 0 0; font-family: var(--display); font-weight: 500; font-size: 28px; line-height: 1.25; color: var(--ink); max-width: 70ch; }
.slide--aio-ev .slide-subtitle { margin-bottom: 26px; }
.ev-figs li { padding: 16px 0; }
.ev-n { font-size: 84px; }
.ev-fails .ev-note { margin: 14px 0 0; padding-top: 16px; border-top: 2px solid var(--ink); font-size: 24px; line-height: 1.3; }

/* Read it like an editor: three groups of questions, then prompts */
.slide--reflect .slide-title { margin-bottom: 36px; }
.reflect { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 60px; }
.reflect-col { border-top: 4px solid var(--ink); padding-top: 18px; }
.reflect-col:nth-child(2) { border-top-color: var(--news-red); }
.reflect-col:nth-child(3) { border-top-color: var(--guardian-blue); }
.reflect-col h3 { font-family: var(--display); font-weight: 500; font-size: 42px; line-height: 1.05; margin: 0 0 14px; }
.reflect-col:nth-child(2) h3 { color: var(--news-red); }
.reflect-col:nth-child(3) h3 { color: var(--guardian-blue); }
.reflect-col ul { list-style: none; margin: 0; padding: 0; }
.reflect-col li { font-family: var(--body); font-size: 25px; line-height: 1.38; color: var(--ink-soft); padding: 7px 0 7px 22px; position: relative; }
.reflect-col li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 8px; height: 8px; background: currentColor; opacity: 0.5; }
.reflect-asks { margin-top: 44px; }
.asks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px var(--grid-gutter); }
.slide--reflect .tweak { padding: 14px 22px 16px; gap: 5px; border-top-width: 4px; }
.slide--reflect .tweak-say { font-size: 22px; line-height: 1.36; }
.reflect-col h3 { font-size: 38px; white-space: nowrap; }

/* Things to consider: the four tools side by side */
.slide--consider .slide-title { margin-bottom: 26px; }
.consider { width: 100%; border-collapse: collapse; table-layout: fixed; }
.consider col:first-child, .consider thead td:first-child { width: 250px; }
.consider thead th {
  text-align: left; vertical-align: bottom; padding: 0 16px 12px;
  font-family: var(--display); font-weight: 500; font-size: 30px; line-height: 1.05; color: var(--ink);
  border-bottom: 3px solid var(--ink);
}
.consider thead th .cn { display: block; font-family: var(--mono); font-size: 18px; color: var(--news-red); margin-bottom: 6px; }
.consider tbody th {
  text-align: left; vertical-align: top; padding: 11px 16px 11px 0;
  font-family: var(--ui); font-weight: 700; font-size: 17px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--news-red);
  border-bottom: 1px solid var(--paper-rule);
}
.consider td { vertical-align: top; padding: 10px 16px 11px; font-family: var(--body); font-size: 21px; line-height: 1.3; color: var(--ink); border-bottom: 1px solid var(--paper-rule); }
.consider tbody td:nth-child(odd) { background: rgba(232,223,208,0.35); }
.consider-note { margin-top: 14px; }

/* The badge is now a mini version of that table */
.map-badge svg { width: 100px; height: 94px; }
.map-badge .mt { fill: rgba(18,18,18,0.12); }
.map-badge .mt.on { fill: var(--news-red); }
.map-badge .badge-text b { color: var(--ink-mute); font-size: 19px; letter-spacing: 0.16em; }
.map-badge .badge-text { color: var(--news-red); font-size: 26px; letter-spacing: 0.04em; }
.tool-rows li:last-child p { font-family: var(--body); font-weight: 400; font-size: 24px; }
.slide--tool .tool-rows li { padding: 16px 0 17px; }
.slide--tool .tool-rows p { font-size: 25px; }
.consider td { font-size: 23px; padding: 13px 16px 14px; }
.consider tbody th { padding: 15px 16px 14px 0; font-size: 18px; }
.consider thead th { font-size: 32px; }
.consider thead th { font-size: 28px; white-space: nowrap; }
.consider td { padding: 12px 16px 12px; }
.consider tbody th { padding: 14px 16px 12px 0; }
.ev-fails { padding: 22px 30px 22px; } .ev-fails li { padding: 10px 0; }

/* ---------- "Built for a job", second design: four standing cards ---------- */
.slide--consider .slide-title { margin-bottom: 22px; }
.cmp {
  position: relative;
  display: grid;
  grid-template-columns: 230px repeat(4, 1fr);
  grid-template-rows: repeat(var(--rows), auto);
  column-gap: 20px;
}
.cmp-card {
  grid-row: 1 / -1;
  background: var(--paper-bright);
  border: 1px solid var(--hairline);
  border-top: 6px solid var(--ink);
  box-shadow: var(--shadow-card);
  border-radius: 4px;
  z-index: 0;
}
.cmp-card:nth-of-type(4) { border-top-color: var(--news-red); }
.cmp > :not(.cmp-card) { position: relative; z-index: 1; }
.cmp-h {
  grid-row: 1; padding: 20px 22px 16px;
  font-family: var(--display); font-weight: 500; font-size: 29px; line-height: 1.08; color: var(--ink);
}
.cmp-h .cn { display: block; font-family: var(--mono); font-size: 17px; color: var(--news-red); margin-bottom: 6px; }
.cmp-corner { grid-row: 1; grid-column: 1; }
.cmp-g {
  grid-column: 1 / -1;
  padding: 14px 0 4px;
  font-family: var(--ui); font-weight: 700; font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--news-red);
}
.cmp-g::after { content: ''; display: block; height: 1px; margin-top: 6px; background: var(--news-red); opacity: 0.35; width: 210px; }
.cmp-k {
  grid-column: 1; padding: 9px 12px 9px 0;
  font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 1.15; color: var(--ink-soft);
}
.cmp-c {
  padding: 9px 22px 9px;
  font-family: var(--body); font-size: 21px; line-height: 1.3; color: var(--ink);
  border-top: 1px solid var(--hairline);
}
.pips { display: flex; gap: 4px; margin-bottom: 6px; }
.pips i { width: 22px; height: 6px; border-radius: 3px; background: rgba(18,18,18,0.1); }
.pips i.on { background: var(--news-red); }
.consider-note { margin-top: 14px; }
@media print { .cmp-card { box-shadow: none; } }
.slide--consider .slide-title { margin-bottom: 30px; }
.cmp-h { padding: 16px 20px 12px; font-size: 26px; white-space: nowrap; }
.cmp-h .cn { margin-bottom: 4px; }
.cmp-g { padding: 10px 0 0; font-size: 14px; }
.cmp-g::after { margin-top: 4px; }
.cmp-k { padding: 8px 12px 8px 0; font-size: 21px; }
.cmp-c { padding: 8px 20px; font-size: 20px; line-height: 1.28; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cmp-c .pips { order: 2; flex: none; margin: 0; align-self: center; gap: 3px; }
.pips i { width: 16px; height: 6px; }
.consider-note { margin-top: 12px; }

/* ---------- "Built for a job", third go: an at-a-glance chart ---------- */
.cmp2 { grid-template-columns: 220px repeat(4, 1fr); column-gap: 24px; }
.cmp2 .cmp-h { padding: 20px 24px 16px; font-size: 28px; white-space: nowrap; }
.cmp2 .cmp-h .cn { font-size: 18px; }
.cmp2 .cmp-k {
  align-self: center; padding: 0 12px 0 0;
  font-family: var(--ui); font-weight: 700; font-size: 17px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute);
}
.cmp2 .cmp-c {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px;
  padding: 13px 24px 14px; border-top: 1px solid var(--hairline);
  font-family: var(--display); font-weight: 500; font-size: 25px; line-height: 1.12; color: var(--ink);
}
.cmp2 .cmp-c .pips { order: 0; align-self: flex-start; gap: 5px; margin: 0; }
.cmp2 .pips i { width: 30px; height: 8px; border-radius: 4px; }
.cmp2 .cmp-c:nth-child(n) span:not(.pips) { display: block; }
.cmp2 .cmp-c { padding: 16px 24px 17px; font-size: 26px; }
.cmp2 .cmp-h { padding: 22px 24px 18px; }
.cmp2 .cmp-c { font-size: 25px; } .cmp2 .cmp-c span { white-space: nowrap; }

/* Choose a topic */
.topic-cols { display: grid; grid-template-columns: 1fr 720px; gap: 100px; align-items: start; }
.topics { list-style: none; margin: 0; padding: 0; counter-reset: tp; }
.topics li { counter-increment: tp; position: relative; padding: 20px 0 20px 76px; border-top: 1px solid var(--paper-rule); }
.topics li:first-child { border-top: 3px solid var(--ink); }
.topics li::before { content: counter(tp); position: absolute; left: 0; top: 18px; font-family: var(--display); font-weight: 700; font-size: 56px; line-height: 1; color: var(--news-red); }
.topics h3 { font-family: var(--display); font-weight: 500; font-size: 48px; line-height: 1.05; margin: 0 0 8px; }
.topics p { margin: 0; font-family: var(--body); font-size: 25px; line-height: 1.4; color: var(--ink-soft); }
.topic-side { background: var(--paper-deep); border-top: 6px solid var(--news-red); padding: 28px 36px 32px; }
.topic-tests { list-style: none; margin: 0; padding: 0; }
.topic-tests li { padding: 12px 0; border-bottom: 1px solid var(--paper-rule); font-family: var(--body); font-size: 25px; line-height: 1.4; color: var(--ink-soft); }
.topic-tests b { color: var(--ink); }
.topic-best { margin: 20px 0 0; font-family: var(--display); font-weight: 500; font-size: 32px; line-height: 1.2; color: var(--ink); }
.topic-best b { font-weight: 500; color: var(--news-red); }

/* True enough? */
.slide--truth .slide-title { margin-bottom: 30px; }
.slide--truth .ev-grid { grid-template-columns: 1fr 760px; gap: 80px; }
.slide--truth .ev-figs li { grid-template-columns: 170px 1fr; gap: 22px; padding: 13px 0; }
.slide--truth .ev-n { font-size: 74px; }
.slide--truth .ev-figs li:nth-child(4) .ev-n { color: var(--news-red); }
.slide--truth .ev-figs li:nth-child(2) .ev-n { color: var(--guardian-blue); opacity: 0.7; }
.ev-tool {
  display: inline-block; margin-bottom: 6px; padding: 3px 10px;
  font-family: var(--ui); font-weight: 700; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper-bright); background: var(--ink); border-radius: 3px;
}
.slide--truth .ev-figs p { font-size: 22px; line-height: 1.34; }
.slide--truth .ev-figs .ev-src { font-size: 16px; margin-top: 4px; }
.ev-side { background: var(--paper-deep); border-top: 6px solid var(--news-red); padding: 22px 32px 24px; }
.ev-why, .ev-slips { list-style: none; margin: 0; padding: 0; }
.ev-why li { padding: 9px 0; border-bottom: 1px solid var(--paper-rule); font-family: var(--body); font-size: 23px; line-height: 1.36; color: var(--ink-soft); }
.ev-why b { color: var(--ink); }
.ev-slips-label { margin-top: 20px; }
.ev-slips li { padding: 7px 0; font-family: var(--body); font-style: italic; font-size: 20px; line-height: 1.34; color: var(--ink-soft); }
.ev-slips li span { display: block; font-style: normal; font-family: var(--ui); font-size: 15px; color: var(--ink-mute); margin-top: 2px; }
.slide--truth .ev-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; border-top: 0; }
.slide--truth .ev-figs li { display: block; padding: 18px 0 20px; border-top: 3px solid var(--ink); border-bottom: 0; }
.slide--truth .ev-figs li:nth-child(n+3) { border-top-width: 1px; border-top-color: var(--paper-rule); margin-top: 8px; }
.slide--truth .ev-n { display: block; font-size: 80px; margin-bottom: 8px; }
.slide--truth .ev-tool { font-size: 14px; }
.slide--truth .ev-figs p { font-size: 22px; }
.slide--truth .ev-grid { grid-template-columns: 1fr 700px; gap: 70px; } .slide--truth .ev-figs { column-gap: 50px; }
.slide--reflect .slide-title { max-width: none; }

/* Five tools: tighter columns on the "built for a job" chart */
.cmp5 { grid-template-columns: 190px repeat(5, 1fr); column-gap: 18px; }
.cmp5 .cmp-h { padding: 18px 18px 14px; font-size: 25px; white-space: normal; }
.cmp5 .cmp-h .cn { font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; }
.cmp5 .cmp-c { padding: 14px 18px 15px; font-size: 21px; }
.cmp5 .cmp-k { font-size: 15px; }
.cmp5 .pips i { width: 24px; }
.map-badge svg { width: 101px; }
.tool-docs { margin: 0 0 14px; font-family: var(--body); font-style: italic; font-size: 21px; color: var(--ink-soft); }
.cmp5 .cmp-card:nth-of-type(4) { border-top-color: var(--ink); }
.cmp5 .cmp-card:nth-of-type(5) { border-top-color: var(--news-red); }
.slide--tool .tool-docs { margin: 0 0 14px; }
.ev-side { padding: 20px 30px 18px; } .ev-why li { padding: 8px 0; } .ev-slips li { padding: 5px 0; }

/* The course: four sessions and the brief, as one line of stops */
.slide--course .slide-body { position: relative; justify-content: center; }
.c-line { position: absolute; left: 0; right: 0; top: calc(50% - 222px); height: 3px; background: var(--ink); transform-origin: left center; }
.c-stops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; }
.c-stop { position: relative; padding-top: 44px; }
.c-dot { position: absolute; top: -13px; left: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--paper); border: 5px solid var(--ink); }
.c-stop.is-now .c-dot { background: var(--news-red); border-color: var(--news-red); box-shadow: 0 0 0 9px rgba(199,0,0,0.14); }
.c-wk { margin: 0 0 12px; font-family: var(--mono); font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); display: flex; align-items: center; gap: 10px; }
.c-now { font-family: var(--ui); font-weight: 700; font-size: 14px; letter-spacing: 0.14em; color: var(--paper); background: var(--news-red); padding: 3px 8px; }
.c-stop h3 { font-family: var(--display); font-weight: 500; font-size: 38px; line-height: 1.06; margin: 0 0 14px; color: var(--ink); }
.c-stop.is-now h3 { color: var(--news-red); }
.c-d { margin: 0; font-family: var(--body); font-size: 22px; line-height: 1.42; color: var(--ink-soft); }
.c-brief { background: var(--paper-deep); border-top: 8px solid var(--guardian-yellow); padding: 40px 24px 26px; margin-top: -14px; }
.c-brief .c-dot { left: 24px; top: -27px; border-color: var(--guardian-yellow); background: var(--guardian-yellow); }
.c-brief h3 { font-size: 42px; }
.c-brief .c-d { color: var(--ink); }
.c-wrap { position: relative; padding-top: 13px; }
.slide--course .c-line { top: 13px; }
.c-brief { margin-top: 0; } .c-brief .c-dot { top: -17px; left: 22px; z-index: 2; }
.cmp5 .cmp-c { padding: 19px 18px 20px; font-size: 22px; } .cmp5 .cmp-h { padding: 22px 18px 18px; font-size: 27px; }
.cmp5 .cmp-h { font-size: 25px; white-space: nowrap; }

/* The model itself got better: three then-and-nows, then discoveries */
.slide--better .slide-title { margin-bottom: 30px; }
.then-now { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.tn { background: var(--paper-bright); border: 1px solid var(--hairline); border-top: 6px solid var(--l1); box-shadow: var(--shadow-card); padding: 24px 28px 22px; display: flex; flex-direction: column; }
.tn:nth-child(2) { border-top-color: var(--l2); }
.tn:nth-child(3) { border-top-color: var(--l3); }
.tn-q { margin: 0 0 14px; font-family: var(--display); font-weight: 500; font-size: 34px; line-height: 1.1; color: var(--ink); }
.tokens { margin: 0 0 16px; display: flex; gap: 6px; }
.tokens span { font-family: var(--mono); font-size: 26px; padding: 6px 12px; background: rgba(5,41,98,0.08); border: 1.5px solid var(--l1); border-radius: 6px; color: var(--l1); }
.tn-big { margin: 0 0 16px; font-family: var(--display); font-weight: 700; font-size: 52px; line-height: 1; color: var(--l2); }
.tn-row { display: grid; grid-template-columns: 70px 1fr; align-items: baseline; gap: 12px; padding: 6px 0; border-top: 1px solid var(--paper-rule); }
.tn-when { font-family: var(--mono); font-size: 18px; color: var(--ink-mute); }
.tn-then { font-family: var(--body); font-size: 24px; color: var(--ink-mute); text-decoration: line-through; text-decoration-color: var(--news-red); text-decoration-thickness: 2px; }
.tn-now { font-family: var(--display); font-weight: 500; font-size: 28px; color: var(--ink); }
.tn-note { margin: auto 0 0; padding-top: 12px; font-family: var(--body); font-style: italic; font-size: 20px; line-height: 1.36; color: var(--ink-soft); }
.gpqa { display: flex; flex-direction: column; gap: 10px; margin: 2px 0 6px; }
.gq { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; height: 40px; padding: 0 12px; }
.gq-bar { position: absolute; inset: 0 auto 0 0; width: var(--w); background: rgba(34,135,77,0.18); border-radius: 3px; }
.gq.ex .gq-bar { background: rgba(18,18,18,0.1); }
.gq.now .gq-bar { background: var(--l3); }
.gq-l, .gq-v { position: relative; font-family: var(--ui); font-weight: 700; font-size: 18px; color: var(--ink); }
.gq.now .gq-l, .gq.now .gq-v { color: var(--paper-bright); }
.gq-v { font-family: var(--mono); font-weight: 400; }
.finds { margin-top: 30px; padding-top: 18px; border-top: 3px solid var(--ink); }
.finds ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.finds li { font-family: var(--body); font-size: 23px; line-height: 1.4; color: var(--ink); }
.f-when { display: block; font-family: var(--mono); font-size: 18px; color: var(--news-red); margin-bottom: 4px; }
.gq.now .gq-v { color: var(--l3); font-weight: 700; }
.gq { height: 46px; }
.gq-l, .gq-v { font-size: 20px; }
.tn { padding: 30px 32px 28px; }
.tn-q { font-size: 38px; margin-bottom: 18px; }
.tn-row { padding: 9px 0; }
.tn-note { font-size: 21px; }
.then-now { gap: 40px; }
.tn-q { font-size: 33px; white-space: nowrap; }

/* The hard tests are falling: dumbbell chart */
.slide--better .slide-title { margin-bottom: 26px; }
.db { position: relative; }
.db-row { display: grid; grid-template-columns: 430px 1fr; gap: 50px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--paper-rule); }
.db-row:first-child { border-top: 3px solid var(--ink); }
.db-name h3 { margin: 0 0 4px; font-family: var(--display); font-weight: 500; font-size: 36px; line-height: 1.05; }
.db-name p { margin: 0; font-family: var(--ui); font-size: 17px; line-height: 1.35; color: var(--ink-mute); }
.db-track { position: relative; height: 84px; margin: 0 60px 0 20px; }
.db-grid { position: absolute; top: 14px; bottom: 14px; width: 1px; background: var(--paper-rule); }
.db-span { position: absolute; top: 38px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(18,18,18,0.18), var(--news-red)); transform-origin: left center; }
.db-dot { position: absolute; top: 42px; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; }
.db-dot.then { background: var(--paper); border: 4px solid var(--ink-mute); }
.db-dot.now { background: var(--news-red); box-shadow: 0 0 0 7px rgba(199,0,0,0.14); transform-box: fill-box; }
.fx-play .db-dot.now[data-fx="pop"] { animation-name: fxPop; }
.db-lab { position: absolute; transform: translateX(-50%); white-space: nowrap; text-align: center; font-family: var(--mono); font-size: 19px; color: var(--ink-mute); }
.db-lab.then { top: 58px; }
.db-lab.then small { margin-left: 8px; font-family: var(--ui); font-size: 15px; }
.db-lab.now { top: 0; font-family: var(--display); font-weight: 700; font-size: 26px; color: var(--news-red); }
.db-exp { position: absolute; top: 12px; bottom: 12px; }
.db-exp i { position: absolute; top: 0; bottom: 0; left: 0; border-left: 2px dashed var(--ink); opacity: 0.45; }
.db-exp b { position: absolute; bottom: -8px; left: 8px; white-space: nowrap; font-family: var(--ui); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.db-axis { position: relative; height: 22px; margin: 6px 60px 0 500px; }
.db-axis span { position: absolute; transform: translateX(-50%); font-family: var(--mono); font-size: 15px; color: var(--ink-mute); }
.better-foot { display: grid; grid-template-columns: 560px 1fr; gap: 60px; margin-top: 24px; align-items: start; }
.pace { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; padding: 18px 24px; background: var(--paper-deep); border-left: 6px solid var(--l2); }
.pace-n { font-family: var(--display); font-weight: 700; font-size: 78px; line-height: 0.9; color: var(--l2); }
.pace p { margin: 0; font-family: var(--body); font-size: 21px; line-height: 1.38; color: var(--ink); }
.slide--better .finds { margin-top: 0; padding-top: 0; border-top: 0; }
.slide--better .finds ul { grid-template-columns: 1fr 1fr; gap: 36px; }
.slide--better .finds li { font-size: 21px; }
.better-note { margin-top: 16px; }
@media (prefers-reduced-motion: reduce) { .db-span { transform: none !important; } }
.db-lab.then.edge { transform: translateX(-14px); text-align: left; }
/* Slide 11: quieter bullets, so the name and description lead */
.proxy-card .does li { font-size: 21px; line-height: 1.36; color: var(--ink-soft); padding-left: 30px; }
.proxy-card .does { gap: 8px; }
.proxy-card .what { font-size: 28px; color: var(--ink); }
.slide--timeline .tl-ev .t { font-size: 30px; }
.slide--timeline .tl-ev .s { font-size: 20px; }
.slide--tool .tries + .tool-docs { margin: 16px 0 0; }

/* Close: take them to work */
.slide--ask .slide-title { margin-bottom: 16px; }
.ask-lede { margin: 0 0 38px; font-family: var(--display); font-weight: 500; font-size: 36px; line-height: 1.22; color: var(--ink-soft); max-width: 52ch; }
.ask-cols { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 56px; }
.ask-col { border-top: 4px solid var(--ink); padding-top: 18px; }
.ask-col:nth-child(2) { border-top-color: var(--news-red); }
.ask-col:nth-child(3) { border-top-color: var(--guardian-blue); }
.ask-col .ask-n { display: block; font-family: var(--display); font-weight: 700; font-size: 56px; line-height: 1; color: var(--news-red); margin-bottom: 8px; }
.ask-col:nth-child(1) .ask-n { color: var(--ink); }
.ask-col:nth-child(3) .ask-n { color: var(--guardian-blue); }
.ask-col h3 { font-family: var(--display); font-weight: 500; font-size: 36px; line-height: 1.1; margin: 0 0 12px; }
.ask-col p { margin: 0; font-family: var(--body); font-size: 24px; line-height: 1.42; color: var(--ink-soft); }
.try-ways { margin-top: 38px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.try-ways-l { font-family: var(--ui); font-weight: 700; font-size: 17px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-mute); margin-right: 8px; }
.way-chip { font-family: var(--ui); font-weight: 700; font-size: 20px; padding: 9px 18px; border: 1.5px solid var(--ink); border-radius: 999px; color: var(--ink); background: var(--paper-bright); }
.slide--ask .asks-foot { margin: 30px 0 0; font-family: var(--display); font-weight: 500; font-size: 34px; color: var(--ink); }
.slide--topic .slide-title { margin-bottom: 12px; } .topic-dek { margin-bottom: 30px; }

/* Examples: three Claude builds over two Gemini Canvas outputs */
.slide--examples .slide-title { margin-bottom: 14px; }
.ex-lede { margin: 0 0 30px; font-family: var(--display); font-weight: 500; font-size: 30px; line-height: 1.24; color: var(--ink-soft); max-width: 62ch; }
.ex-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; }
.ex-card { grid-column: span 2; background: var(--paper-bright); border: 1px solid var(--hairline); border-top: 6px solid var(--ink); box-shadow: var(--shadow-card); padding: 18px 24px 20px; display: flex; flex-direction: column; }
.ex-card.ex-gemini { grid-column: span 3; border-top-color: var(--guardian-blue); }
.ex-tool { margin: 0 0 6px; font-family: var(--ui); font-weight: 700; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--news-red); }
.ex-gemini .ex-tool { color: var(--guardian-blue); }
.ex-card h3 { margin: 0 0 10px; font-family: var(--display); font-weight: 500; font-size: 30px; line-height: 1.08; }
.ex-card h3 a { color: var(--ink); text-decoration: none; border-bottom: 2px solid rgba(199,0,0,0.35); }
.ex-card h3 a:hover { color: var(--news-red); border-bottom-color: var(--news-red); }
.ex-card h3 a:focus-visible { outline: 3px solid var(--news-red); outline-offset: 3px; }
.ex-prompt { margin: 0 0 10px; font-family: var(--body); font-style: italic; font-size: 18px; line-height: 1.4; color: var(--ink-soft); }
.ex-tests { margin: auto 0 0; padding-top: 10px; border-top: 1px solid var(--paper-rule); font-family: var(--body); font-size: 18px; line-height: 1.38; color: var(--ink); }
.ex-tests b { font-family: var(--ui); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-right: 4px; }
.ex-lede { font-size: 28px; margin-bottom: 24px; } .ex-grid { gap: 20px; }

/* Things to try: five columns, each idea tagged use or test */
.slide--try .slide-title { margin-bottom: 12px; }
.try-lede { margin: 0 0 30px; font-family: var(--display); font-weight: 500; font-size: 28px; line-height: 1.25; color: var(--ink-soft); max-width: 70ch; }
.try-lede b { font-weight: 500; padding: 0 6px; border-radius: 3px; color: var(--paper-bright); }
.try-lede b.u { background: var(--guardian-blue); }
.try-lede b.t { background: var(--news-red); }
.try-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.try-col { border-top: 4px solid var(--ink); padding-top: 14px; }
.try-h { margin: 0 0 12px; font-family: var(--display); font-weight: 500; font-size: 27px; line-height: 1.1; color: var(--ink); white-space: nowrap; }
.try-h .cn { display: block; font-family: var(--mono); font-size: 15px; color: var(--news-red); margin-bottom: 4px; }
.try-col ul { list-style: none; margin: 0; padding: 0; }
.try-col li { padding: 11px 0 12px; border-bottom: 1px solid var(--paper-rule); font-family: var(--body); font-size: 19px; line-height: 1.38; color: var(--ink); }
.tt { display: inline-block; margin-right: 8px; padding: 1px 7px 2px; border-radius: 3px; font-family: var(--ui); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-bright); vertical-align: 2px; }
.tt-use { background: var(--guardian-blue); }
.tt-test { background: var(--news-red); }
.try-col li { font-size: 20px; padding: 12px 0 13px; }
.ex-lede { max-width: none; }
.ex-card { padding: 16px 22px 16px; } .ex-prompt { margin-bottom: 8px; } .ex-tests { padding-top: 8px; } .ex-lede { margin-bottom: 20px; }