/* deck.css — pitch decks at /deck/{slug}.
 *
 * One slide per page, server-rendered and fully no-JS (RFC 006):
 * navigation is plain prev/next links plus wide first-party <a> click
 * zones on the left/right margins, and the PDF affordance links to
 * the print-all view (?print=1) that the browser's own print exports.
 * Loaded after app.css alongside css/fonts.css. Binds the redesign
 * webfonts scoped to the deck roots, and lays out a full-viewport
 * slide stage with fixed chrome.
 */

.deck,
.deck-index,
.deck-print {
  --font-sans: 'Geist', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
  --font-serif: 'DM Serif Display', Georgia, serif;
  --font-body: var(--font-sans);
  --font-display: var(--font-sans);
  --fg: #11141b;
  --fg-soft: #3f4653;
  --fg-muted: #788191;
  --bg: #f7f8fa;
  --bg-elev: #ffffff;
  --bg-code: #10131b;
  --rule: rgba(17, 20, 27, 0.18);
  --rule-soft: rgba(17, 20, 27, 0.09);
  --accent: #3154d4;
  --accent-soft: #e8edff;
  --danger: #b84852;
  --warn: #8a650f;
  --ok: #1f7a47;
  --deck-rail-h: 52px;
  --deck-footer-h: 52px;
  font-family: var(--font-body);
  color: var(--fg);
  background:
    linear-gradient(180deg, rgba(49, 84, 212, 0.035), transparent 34%),
    #f7f8fa;
}

.deck *,
.deck-index *,
.deck-print * {
  letter-spacing: 0;
}

html:has(.deck),
body:has(.deck) {
  overflow: hidden;
  background: #f7f8fa;
}

/* Scale the whole deck to the viewport height. The slides are laid out in
 * rem against a fixed canvas; on a short window (a normal laptop browser at
 * 100%) the content-dense slides overflow. Scaling the root font by height
 * shrinks every rem-based size uniformly — the same effect as zooming the
 * browser out — so a slide that fits at ~720px+ also fits shorter windows
 * without clipping or overlap.
 *
 * The floor is 13px (not 11px): presenting in a windowed, non-fullscreen
 * browser leaves a short viewport, and the old 11px floor rendered body copy
 * too small to read across a room. A 13px floor keeps it legible; the /42
 * divisor lets a mid-size window reach the 17px ceiling sooner. Fullscreen /
 * tall monitors are unaffected (capped at 17px). */
html:has(.deck) {
  font-size: clamp(13px, calc(100vh / 42), 17px);
}

/* ── Slide stage ─────────────────────────────────────────────── */

.deck {
  display: grid;
  grid-template-rows: var(--deck-rail-h) minmax(0, 1fr) var(--deck-footer-h);
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  isolation: isolate;
  --deck-pad-x: clamp(var(--size-5), 6vw, var(--size-9));
  --deck-pad-y: clamp(var(--size-4), 4vh, var(--size-7));
}

.deck::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(17, 20, 27, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 20, 27, 0.035) 1px, transparent 1px);
  background-size: 44px 44px, 44px 44px, 100% 100%;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.12));
}

.deck::after {
  content: attr(data-slide);
  position: fixed;
  right: clamp(2rem, 8vw, 7rem);
  bottom: clamp(4rem, 10vw, 8rem);
  z-index: -1;
  font-family: var(--font-sans);
  font-size: 18rem;
  font-weight: 680;
  line-height: 0.8;
  color: rgba(17, 20, 27, 0.035);
  pointer-events: none;
}

.deck-topbar {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: auto minmax(7rem, 1fr) auto;
  align-items: center;
  gap: var(--size-4);
  padding: var(--size-3) clamp(var(--size-4), 4vw, var(--size-7));
  border-bottom: 1px solid rgba(17, 20, 27, 0.12);
  background: rgba(247, 248, 250, 0.86);
  backdrop-filter: blur(18px);
}

.deck-brand {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--fg);
  text-decoration: none;
  padding: 0.35rem 0;
}

.deck-progress {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: 3px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: color-mix(in oklab, var(--fg-muted) 20%, transparent);
}

.deck-progress::-webkit-progress-bar {
  background: color-mix(in oklab, var(--fg-muted) 20%, transparent);
  border-radius: inherit;
}

.deck-progress::-webkit-progress-value {
  border-radius: inherit;
  background: var(--accent);
}

.deck-progress::-moz-progress-bar {
  border-radius: inherit;
  background: var(--accent);
}

.deck-download {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--size-4);
  border: 1px solid rgba(17, 20, 27, 0.16);
  border-radius: 8px;
  background: #ffffff;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(17, 20, 27, 0.04);
}

.deck-download:hover,
.deck-download:focus-visible {
  background: var(--accent-soft);
  outline: none;
}

.deck-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--deck-pad-y) var(--deck-pad-x);
  box-sizing: border-box;
  min-height: 0;
  overflow: hidden;
}

.deck-slide-inner {
  width: 100%;
}

.deck-slide-inner > *:first-child {
  margin-top: 0;
}

.deck-slide-inner > *:last-child {
  margin-bottom: 0;
}

/* Display heading leads each slide; serif, fluid, tight. */
.deck-slide h1 {
  font-family: var(--font-display);
  font-size: 5.25rem;
  line-height: 0.9;
  margin: 0 0 var(--size-5);
  color: var(--fg);
  font-weight: 660;
  max-width: 10ch;
}

.deck-slide h2 {
  font-family: var(--font-display);
  font-size: 3.35rem;
  line-height: 0.94;
  margin: 0 0 var(--size-4);
  color: var(--fg);
  font-weight: 640;
  max-width: 11ch;
}

.deck-slide p,
.deck-slide li {
  font-size: 1.24rem;
  line-height: 1.42;
  color: var(--fg-soft);
  max-width: 46ch;
}

.deck-slide ul,
.deck-slide ol {
  margin: 0 0 var(--size-4);
  padding-left: var(--size-5);
  display: grid;
  gap: var(--size-2);
}

.deck-slide strong { color: var(--fg); }

.deck-slide a {
  color: var(--accent);
  text-decoration: none;
}

.deck-slide a:hover { text-decoration: underline; }

.deck-slide code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--accent-soft);
  padding: 0.1em 0.35em;
  border-radius: 4px;
  color: var(--fg);
}

/* ── Slide compositions ────────────────────────────────────────
 *
 * The deck is intentionally laid out like a presentation canvas, not
 * an article. Rich slides get their own frame so the eye scans
 * top-to-bottom, and no slide depends on scrolling.
 */
.deck-slide:has(.ds-cards) .deck-slide-inner,
.deck-slide:has(.ds-receipt) .deck-slide-inner,
.deck-slide:has(.ds-fit) .deck-slide-inner,
.deck-slide:has(.ds-offer) .deck-slide-inner,
.deck-slide:has(.iv-wall) .deck-slide-inner,
.deck-slide:has(.iv-flow) .deck-slide-inner,
.deck-slide:has(.iv-terminal) .deck-slide-inner,
.deck-slide:has(.iv-harness) .deck-slide-inner,
.deck-slide:has(.iv-alerts) .deck-slide-inner,
.deck-slide:has(.iv-mechanics) .deck-slide-inner,
.deck-slide:has(.iv-moat) .deck-slide-inner,
.deck-slide:has(.iv-status) .deck-slide-inner {
  display: grid;
  align-content: center;
  gap: clamp(var(--size-3), 2.4vh, var(--size-5));
  min-height: 100%;
}

.deck-slide:has(.ds-cards) .deck-slide-inner,
.deck-slide:has(.ds-offer) .deck-slide-inner,
.deck-slide:has(.iv-status) .deck-slide-inner {
  /* h2, intro copy, the card/tier grid (flex), then a closing line —
   * four children. Reserve the 4th row so the closing paragraph can't
   * spill into an implicit row and overlap the cards. */
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

/* Base (non-media) compaction for the content-dense card/tier slides.
 * These slides (3: proof cards, 6: pricing tiers) are the tallest in the
 * deck; keeping their heading and intro copy modest lets the whole slide
 * fit a 100%-zoom laptop viewport without the closing line overlapping. */
.deck-slide:has(.ds-cards) h2,
.deck-slide:has(.ds-offer) h2 {
  font-size: clamp(2.2rem, 4vw, 2.9rem);
  line-height: 1.05;
}

.deck-slide:has(.ds-cards) > .deck-slide-inner > p,
.deck-slide:has(.ds-offer) > .deck-slide-inner > p {
  font-size: 1.02rem;
  line-height: 1.34;
}

.deck-slide:has(.iv-persona) .deck-slide-inner {
  display: grid;
  grid-template-columns: minmax(14rem, 0.72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: clamp(var(--size-5), 5vw, var(--size-8));
  min-height: 100%;
}

.deck-slide:has(.iv-persona) .iv-persona {
  grid-column: 2;
  grid-row: 1 / span 3;
}

.deck-slide:has(.iv-persona) h1,
.deck-slide:has(.iv-persona) p {
  grid-column: 1;
}

.deck-slide:has(.ds-cards) h2,
.deck-slide:has(.ds-offer) h2,
.deck-slide:has(.iv-status) h2,
.deck-slide:has(.iv-mechanics) h2,
.deck-slide:has(.iv-terminal) h2 {
  max-width: 18ch;
}

.deck-slide:has(.ds-cards) > .deck-slide-inner > p,
.deck-slide:has(.ds-offer) > .deck-slide-inner > p,
.deck-slide:has(.iv-status) > .deck-slide-inner > p,
.deck-slide:has(.iv-mechanics) > .deck-slide-inner > p,
.deck-slide:has(.iv-terminal) > .deck-slide-inner > p {
  max-width: 64ch;
}

.deck-slide:has(.ds-cards) .ds-cards,
.deck-slide:has(.ds-offer) .ds-offer,
.deck-slide:has(.iv-status) .iv-status {
  align-self: stretch;
}

.deck-slide:has(.ds-receipt) .deck-slide-inner,
.deck-slide:has(.ds-fit) .deck-slide-inner,
.deck-slide:has(.iv-wall) .deck-slide-inner,
.deck-slide:has(.iv-flow) .deck-slide-inner,
.deck-slide:has(.iv-harness) .deck-slide-inner,
.deck-slide:has(.iv-alerts) .deck-slide-inner,
.deck-slide:has(.iv-moat) .deck-slide-inner {
  grid-template-rows: auto auto minmax(0, auto) auto;
}

.deck-slide:has(.ds-receipt) h2,
.deck-slide:has(.ds-fit) h2,
.deck-slide:has(.iv-wall) h2,
.deck-slide:has(.iv-flow) h2,
.deck-slide:has(.iv-harness) h2,
.deck-slide:has(.iv-alerts) h2,
.deck-slide:has(.iv-moat) h2 {
  max-width: 17ch;
}

.deck-slide:has(.ds-receipt) > .deck-slide-inner > p,
.deck-slide:has(.ds-fit) > .deck-slide-inner > p,
.deck-slide:has(.iv-wall) > .deck-slide-inner > p,
.deck-slide:has(.iv-flow) > .deck-slide-inner > p,
.deck-slide:has(.iv-harness) > .deck-slide-inner > p,
.deck-slide:has(.iv-alerts) > .deck-slide-inner > p,
.deck-slide:has(.iv-moat) > .deck-slide-inner > p {
  max-width: 62ch;
}

.deck-slide:has(.iv-terminal) .deck-slide-inner {
  grid-template-columns: minmax(0, 0.82fr) minmax(22rem, 1.18fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(var(--size-5), 5vw, var(--size-8));
}

.deck-slide:has(.iv-terminal) h2 {
  grid-column: 1;
  grid-row: 1;
}

.deck-slide:has(.iv-terminal) > .deck-slide-inner > p:not(.iv-source) {
  grid-column: 1;
}

.deck-slide:has(.iv-terminal) .iv-terminal {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

.deck-slide:has(.iv-terminal) .iv-source {
  grid-column: 2;
  grid-row: 3;
}

.deck-slide:has(.iv-mechanics) .deck-slide-inner {
  grid-template-rows: auto auto minmax(0, auto) auto;
}

/* Tables (the "five more risk shapes" slide). Scrolls horizontally
 * on narrow viewports rather than crushing columns. */
.deck-slide table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin: 0 0 var(--size-4);
}

.deck-slide th,
.deck-slide td {
  text-align: left;
  padding: var(--size-2) var(--size-3);
  border-bottom: 1px solid var(--rule-soft);
}

.deck-slide th {
  font-family: var(--font-mono);
  font-size: 0.78em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Keep tables inside the slide frame; print/export can still reveal
 * the full table if a user chooses paper output. */
.deck-slide :is(table) {
  display: block;
  overflow: hidden;
}

.deck-hit {
  position: fixed;
  top: var(--deck-rail-h);
  bottom: var(--deck-footer-h);
  z-index: 1;
  width: 50vw;
  cursor: pointer;
}

.deck-hit-prev { left: 0; }
.deck-hit-next { right: 0; }
.deck[data-has-prev="false"] .deck-hit-prev,
.deck[data-has-next="false"] .deck-hit-next {
  display: none;
}

.deck-slide,
.deck-topbar,
.deck-footer {
  position: relative;
  z-index: 2;
}

.deck-slide a,
.deck-footer a,
.deck-topbar a,
.deck-topbar button {
  position: relative;
  z-index: 6;
}

/* ── Footer (meta + nav) ─────────────────────────────────────── */

.deck-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-3);
  min-height: var(--deck-footer-h);
  padding: 0 clamp(var(--size-4), 4vw, var(--size-7));
  border-top: 1px solid color-mix(in oklab, var(--fg-muted) 18%, transparent);
  background: rgba(247, 248, 250, 0.92);
  backdrop-filter: blur(16px);
}

.deck-footer-meta {
  font-family: var(--font-mono);
  font-size: var(--font-size-0);
  color: var(--fg-muted);
}

.deck-nav {
  display: flex;
  align-items: center;
  gap: var(--size-3);
}

.deck-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  font-size: var(--font-size-3, 1.25rem);
  color: var(--accent);
  text-decoration: none;
  border: 1px solid rgba(49, 84, 212, 0.28);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(17, 20, 27, 0.04);
}

.deck-nav-link:hover { background: var(--accent-soft); }

.deck-nav-disabled {
  color: var(--fg-muted);
  opacity: 0.4;
  border-color: var(--rule-soft);
}

.deck-nav-count {
  font-family: var(--font-mono);
  font-size: var(--font-size-0);
  color: var(--fg-soft);
  min-width: 4ch;
  text-align: center;
}

/* ── Deck index ──────────────────────────────────────────────── */

.deck-index {
  max-width: 48rem;
  margin: 0 auto;
  padding: var(--size-8) var(--size-6);
  min-height: 100vh;
  min-height: 100dvh;
}

.deck-index h1 {
  font-family: var(--font-display);
  font-size: 2.6rem;
  margin: 0 0 var(--size-2);
}

.deck-index-lede {
  color: var(--fg-soft);
  font-size: var(--font-size-2);
  margin: 0 0 var(--size-6);
}

.deck-index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--size-4);
}

.deck-index-card {
  display: grid;
  gap: var(--size-1);
  padding: var(--size-4) var(--size-5);
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  background: var(--bg-elev);
  text-decoration: none;
  transition: border-color 120ms ease;
}

.deck-index-card:hover { border-color: var(--accent); }

.deck-index-audience {
  font-family: var(--font-mono);
  font-size: var(--font-size-0);
  text-transform: uppercase;
  color: var(--accent);
}

.deck-index-title {
  font-size: var(--font-size-2);
  color: var(--fg);
}

.deck-index-blurb {
  font-size: var(--font-size-1);
  color: var(--fg-soft);
}

.deck-index-stamp {
  font-family: var(--font-mono);
  font-size: var(--font-size-0);
  color: var(--fg-muted);
  margin-top: var(--size-1);
}

/* ── Mobile ──────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .deck-slide {
    justify-content: flex-start;
    padding: var(--size-4) var(--size-5);
  }
  .deck-slide:has(.ds-cards) .deck-slide-inner,
  .deck-slide:has(.ds-receipt) .deck-slide-inner,
  .deck-slide:has(.ds-fit) .deck-slide-inner,
  .deck-slide:has(.ds-offer) .deck-slide-inner,
  .deck-slide:has(.iv-persona) .deck-slide-inner,
  .deck-slide:has(.iv-wall) .deck-slide-inner,
  .deck-slide:has(.iv-flow) .deck-slide-inner,
  .deck-slide:has(.iv-terminal) .deck-slide-inner,
  .deck-slide:has(.iv-harness) .deck-slide-inner,
  .deck-slide:has(.iv-alerts) .deck-slide-inner,
  .deck-slide:has(.iv-mechanics) .deck-slide-inner,
  .deck-slide:has(.iv-moat) .deck-slide-inner,
  .deck-slide:has(.iv-status) .deck-slide-inner {
    display: block;
  }
  .deck-slide h1,
  .deck-slide h2 {
    max-width: 16ch;
  }
  .deck-slide:has(.ds-cards) h2,
  .deck-slide:has(.ds-offer) h2,
  .deck-slide:has(.ds-receipt) h2,
  .deck-slide:has(.ds-fit) h2,
  .deck-slide:has(.iv-wall) h2,
  .deck-slide:has(.iv-harness) h2,
  .deck-slide:has(.iv-alerts) h2,
  .deck-slide:has(.iv-moat) h2,
  .deck-slide:has(.iv-status) h2,
  .deck-slide:has(.iv-terminal) h2,
  .deck-slide:has(.iv-persona) h2,
  .deck-slide:has(.iv-flow) h2 {
    font-size: 2rem;
    line-height: 1;
    max-width: 17ch;
  }
  .deck-slide:has(.ds-cards) p,
  .deck-slide:has(.ds-offer) p,
  .deck-slide:has(.ds-receipt) p,
  .deck-slide:has(.ds-fit) p,
  .deck-slide:has(.iv-wall) p,
  .deck-slide:has(.iv-harness) p,
  .deck-slide:has(.iv-alerts) p,
  .deck-slide:has(.iv-moat) p,
  .deck-slide:has(.iv-status) p,
  .deck-slide:has(.iv-terminal) p,
  .deck-slide:has(.iv-persona) p,
  .deck-slide:has(.iv-flow) p {
    font-size: 0.9rem;
    line-height: 1.35;
    max-width: 46ch;
  }
  .ds-cards,
  .ds-receipt,
  .ds-fit,
  .ds-offer,
  .iv-persona,
  .iv-wall,
  .iv-flow,
  .iv-terminal,
  .iv-harness,
  .iv-alerts,
  .iv-mechanics,
  .iv-moat,
  .iv-status {
    margin-top: var(--size-4);
  }
  .deck-slide:has(.ds-cards) .deck-slide-inner {
    max-width: 56rem;
    margin: 0 auto;
  }
  .deck-slide:has(.ds-cards) h2 {
    max-width: 18ch;
  }
  .deck-slide:has(.ds-cards) p {
    max-width: 54ch;
  }
  .ds-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--size-1);
  }
  .ds-card {
    min-height: 7.2rem;
    padding: var(--size-2);
    gap: var(--size-1);
  }
  .ds-card-risk {
    font-size: 0.84rem;
  }
  .ds-without {
    font-size: 0.72rem;
  }
  .ds-with {
    font-size: 0.96rem;
  }
  .ds-card-tag {
    font-size: 0.68rem;
    line-height: 1.3;
  }
  .ds-card-fw {
    font-size: 0.54rem;
  }
  .deck-slide:has(.iv-terminal) .deck-slide-inner {
    gap: var(--size-2);
  }
  .deck-slide:has(.iv-terminal) h2 {
    font-size: 1.75rem;
    max-width: 20ch;
  }
  .deck-slide:has(.iv-terminal) p {
    font-size: 0.79rem;
    line-height: 1.3;
  }
  .iv-terminal-body {
    padding: var(--size-4);
    font-size: 0.78rem;
    line-height: 1.48;
  }
  .iv-terminal-bar {
    padding: var(--size-1) var(--size-3);
  }
  .iv-source {
    font-size: 0.66rem;
    line-height: 1.25;
  }
  .deck-footer {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: var(--size-2);
  }
  .deck-nav { justify-content: space-between; }
  .deck-footer-meta { text-align: center; }
}

/* ── Rich slide blocks (sales deck: cards, receipt, fit, offer) ──
 *
 * These slides embed raw HTML in the markdown (the deck renderer
 * passes HTML through). Classes are prefixed ds- (deck slide) to
 * stay clear of the .deck chrome above. All dark-theme token-driven.
 */

/* Slide 3 — six proof cards, each links to /proof/{slug}. */
.ds-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--size-3);
  margin: 0;
}

.ds-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  min-height: clamp(4.4rem, 12vh, 8rem);
  padding: clamp(var(--size-3), 2vh, var(--size-4));
  border: 1px solid rgba(17, 20, 27, 0.12);
  border-radius: 8px;
  background: #ffffff;
  text-decoration: none !important;
  color: var(--fg);
  transition: border-color 120ms ease, transform 120ms ease;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.88) inset,
    0 14px 28px rgba(17, 20, 27, 0.08);
}

.ds-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--accent);
  opacity: 1;
}

.ds-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  text-decoration: none;
}

.ds-card-risk {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.4vw, 1.16rem);
  line-height: 1.08;
  font-weight: 640;
  color: var(--fg);
}

.ds-card-nums {
  display: flex;
  align-items: baseline;
  gap: var(--size-2);
  font-family: var(--font-mono);
  margin-top: var(--size-1);
}

.ds-without {
  font-size: var(--font-size-1);
  color: var(--danger);
  text-decoration: line-through;
  text-decoration-color: rgba(184, 72, 82, 0.4);
}

.ds-card-count .ds-without { color: var(--warn); }

.ds-arrow { color: var(--fg-muted); }

.ds-with {
  font-size: clamp(1.12rem, 1.8vw, 1.38rem);
  color: var(--ok);
}

.ds-card-tag {
  font-size: 0.82rem;
  line-height: 1.32;
  color: var(--fg-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ds-card-fw {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Slide 4 — receipt mini-view in a faux browser window. */
.ds-receipt {
  display: flex;
  flex-direction: column;
  gap: var(--size-3);
  margin: 0;
}

.ds-browser {
  margin: 0;
  border: 1px solid rgba(17, 20, 27, 0.14);
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(17, 20, 27, 0.10);
}

.ds-browser-bar {
  display: flex;
  align-items: center;
  gap: var(--size-2);
  padding: var(--size-2) var(--size-3);
  background: #f1f3f6;
  border-bottom: 1px solid var(--rule-soft);
}

.ds-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--rule);
  flex: none;
}

.ds-url {
  margin-left: var(--size-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-browser-body {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  padding: var(--size-6);
}

.ds-rcpt-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--accent);
}

.ds-rcpt-title {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 580;
  color: var(--fg);
  margin-bottom: var(--size-2);
}

.ds-rcpt-grid {
  display: grid;
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-1, 6px);
  overflow: hidden;
}

.ds-rcpt-row {
  display: grid;
  grid-template-columns: 12ch 1fr;
  gap: var(--size-3);
  padding: var(--size-2) var(--size-3);
  background: #ffffff;
}

.ds-rcpt-k {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.ds-rcpt-v {
  font-size: var(--font-size-0);
  color: var(--fg-soft);
}

.ds-rcpt-v code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--fg);
  background: transparent;
  padding: 0;
}

.ds-allow {
  color: var(--ok);
  font-weight: 600;
}

.ds-receipt-link {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--font-size-0);
  color: var(--accent);
}

/* Slide 5 — the "where KIFF is worth it" convergence diagram. */
.ds-fit {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--size-2);
  margin: 0;
}

.ds-fit-conds {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
}

.ds-fit-cond {
  display: flex;
  align-items: flex-start;
  gap: var(--size-3);
  padding: var(--size-4) var(--size-5);
  border: 1px solid rgba(17, 20, 27, 0.12);
  border-radius: 8px;
  background: #ffffff;
}

.ds-fit-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--font-size-0);
  color: var(--accent);
  border: 1px solid rgba(49, 84, 212, 0.28);
  background: var(--accent-soft);
}

.ds-fit-body {
  font-size: var(--font-size-1);
  line-height: 1.45;
  color: var(--fg-soft);
}

.ds-fit-body strong { color: var(--fg); }

.ds-fit-and {
  align-self: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.ds-fit-join {
  align-self: center;
  font-family: var(--font-mono);
  font-size: var(--font-size-0);
  color: var(--fg-muted);
  margin-top: var(--size-1);
}

.ds-fit-payoff {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--size-5) var(--size-6);
  border: 1px solid rgba(49, 84, 212, 0.20);
  border-radius: 8px;
  background: var(--accent-soft);
}

.ds-fit-payoff-lead {
  font-family: var(--font-sans);
  font-size: 1.6rem;
  font-weight: 580;
  color: var(--fg);
}

.ds-fit-payoff-sub {
  font-size: var(--font-size-1);
  color: var(--fg-soft);
}

/* Slide 6 — the five-tier offer (Framework → Cloud Developer →
 * Cloud Growth → Cloud Scale → Enterprise), anchored on the
 * middle Cloud Growth tier. Growth is the 3rd of 5 cards, so the
 * center column carries the wider "featured" track and the
 * good-better-best emphasis lands on the "start here" tier. */
.ds-offer {
  display: grid;
  grid-template-columns: 1fr 1fr 1.15fr 1fr 1fr;
  align-items: stretch;
  gap: var(--size-3);
  margin: 0;
}

.ds-tier {
  display: flex;
  flex-direction: column;
  gap: var(--size-1);
  padding: clamp(var(--size-2), 1.6vh, var(--size-4));
  border: 1px solid rgba(17, 20, 27, 0.12);
  border-radius: 8px;
  background: #ffffff;
}

/* The two flanking tiers are deliberately muted so the middle
 * pilot reads as the obvious choice (good-better-best anchoring). */
.ds-tier-low,
.ds-tier-high {
  opacity: 0.78;
}

.ds-tier-target {
  border-color: rgba(49, 84, 212, 0.32);
  background: var(--accent-soft);
  box-shadow: 0 1px 0 rgba(49, 84, 212, 0.16);
  position: relative;
}

.ds-tier-flag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--accent);
  padding: 0.15em 0.6em;
  border-radius: 999px;
  margin-bottom: var(--size-1);
}

.ds-tier-name {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 580;
  color: var(--fg);
}

.ds-tier-price {
  font-family: var(--font-mono);
  font-size: var(--font-size-4);
  color: var(--fg);
  line-height: 1.05;
}

.ds-tier-target .ds-tier-price { color: var(--accent); }

.ds-tier-period {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.ds-tier-note {
  font-size: var(--font-size-0);
  line-height: 1.34;
  color: var(--fg-soft);
  margin-top: var(--size-1);
}

.ds-tier-foot {
  margin-top: auto;
  padding-top: var(--size-2);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--fg-muted);
}

.ds-tier-target .ds-tier-foot { color: var(--accent); }

/* Sales rich slides also own their internal rhythm; keep the outer
 * frame centered so sparse decks do not collapse into the top band. */
.deck-slide:has(.ds-cards),
.deck-slide:has(.ds-offer),
.deck-slide:has(.ds-receipt) {
  justify-content: center;
}

@media (max-width: 520px) {
  .ds-cards { grid-template-columns: 1fr 1fr; }
  .ds-offer { grid-template-columns: 1fr; }
  .ds-tier-low,
  .ds-tier-high { opacity: 1; }
}

/* Five tiers need more room than three: stack the offer below the
 * desktop breakpoint so the cards never crush at tablet widths. */
@media (min-width: 521px) and (max-width: 900px) {
  .ds-offer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 460px) {
  .ds-cards { grid-template-columns: 1fr; }
  .ds-rcpt-row { grid-template-columns: 1fr; gap: 2px; }
}

@media (min-width: 521px) and (max-width: 760px) {
  .ds-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--size-2);
  }
  .ds-card {
    min-height: 9rem;
    padding: var(--size-3);
    gap: var(--size-2);
  }
  .ds-card-risk { font-size: 1rem; }
  .ds-card-nums {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    gap: 0 var(--size-1);
  }
  .ds-without { font-size: 0.86rem; }
  .ds-with {
    grid-column: 1 / -1;
    font-size: 1.18rem;
  }
  .ds-card-tag { font-size: 0.78rem; }
}

/* ── Investor deck — the Pete narrative (iv-) ────────────────── *
 *
 * The investor deck tells one story across its slides, so it leans
 * on a few bespoke visuals on top of the shared ds- blocks (it
 * reuses .ds-receipt / .ds-browser for the anchored-receipt slide).
 * Prefix iv- (investor) to stay clear of both .deck chrome and the
 * sales ds- blocks. All dark-theme token-driven, no JS.
 */

/* Slide 1 — the persona card. */
.iv-persona {
  display: flex;
  gap: var(--size-4);
  align-items: flex-start;
  margin: 0;
  padding: var(--size-6);
  border: 1px solid rgba(17, 20, 27, 0.12);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 28px rgba(17, 20, 27, 0.08);
}

.iv-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: var(--font-size-4);
  font-weight: 580;
  color: var(--accent);
  border: 1px solid rgba(49, 84, 212, 0.28);
  background: var(--accent-soft);
}

.iv-persona-body { display: flex; flex-direction: column; gap: var(--size-1); }

.iv-persona-name {
  font-family: var(--font-sans);
  font-size: var(--font-size-4);
  font-weight: 580;
  color: var(--fg);
  line-height: 1.1;
}

.iv-persona-role {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.iv-persona-bio {
  font-size: var(--font-size-0);
  line-height: 1.5;
  color: var(--fg-soft);
  margin: var(--size-2) 0 var(--size-2);
}

.iv-persona-chips { display: flex; flex-wrap: wrap; gap: var(--size-1); }

.iv-chip {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--fg-muted);
  padding: 0.15em 0.6em;
  border: 1px solid rgba(17, 20, 27, 0.12);
  border-radius: 999px;
}

/* Slide 2 — the "money line" wall: free on the left, forbidden on
 * the right, a hard bar between them. */
.iv-wall {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  margin: 0;
  border: 1px solid rgba(17, 20, 27, 0.12);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 14px 28px rgba(17, 20, 27, 0.08);
}

.iv-wall-col {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  padding: var(--size-6);
}

.iv-wall-ok { background: #ffffff; }
.iv-wall-no { background: #ffffff; }

.iv-wall-head {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
}
.iv-wall-ok .iv-wall-head { color: var(--ok); }
.iv-wall-no .iv-wall-head { color: var(--danger); }

.iv-wall-item { font-size: var(--font-size-0); color: var(--fg-soft); }
.iv-wall-no .iv-wall-item { text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--danger) 50%, transparent); }

.iv-wall-bar {
  width: 3px;
  background: var(--danger);
  position: relative;
}
.iv-wall-bar-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  color: var(--danger);
  background: var(--bg);
  padding: 0.2em 0.5em;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--danger) 40%, var(--rule));
}

.iv-quote {
  margin: var(--size-4) 0 0;
  padding: var(--size-3) var(--size-4);
  border-left: 3px solid var(--accent);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--font-size-3);
  line-height: 1.3;
  color: var(--fg);
}
.iv-quote-cite {
  display: block;
  margin-top: var(--size-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-style: normal;
  color: var(--fg-muted);
}

/* Slides 3 & 4 — horizontal flow diagrams. */
.iv-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--size-2);
  margin: 0;
}
.iv-flow-tight { margin: var(--size-4) 0 var(--size-3); }

.iv-flow-node {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  flex: 1 1 0;
  min-width: 8rem;
  padding: var(--size-5);
  border: 1px solid rgba(17, 20, 27, 0.12);
  border-radius: 8px;
  background: #ffffff;
  font-size: var(--font-size-0);
  color: var(--fg-soft);
  text-align: center;
}

.iv-flow-sub {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--fg-muted);
}

.iv-flow-block {
  border-color: rgba(138, 101, 15, 0.28);
  background: #fff9e8;
  color: var(--fg);
}
.iv-flow-block .iv-flow-sub { color: var(--warn); }

.iv-flow-go {
  border-color: rgba(31, 122, 71, 0.26);
  background: #e8f3ed;
  color: var(--fg);
}
.iv-flow-go .iv-flow-sub { color: var(--accent); }

.iv-flow-arrow {
  align-self: center;
  font-family: var(--font-mono);
  font-size: var(--font-size-3);
  color: var(--fg-muted);
}

.iv-source {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--fg-muted);
  margin-top: var(--size-3);
}
.iv-source a { color: var(--accent); }
.iv-source strong { color: var(--fg); }

/* Slide 5 — the mutable-log terminal: an UPDATE that rewrites an
 * audit row, to make "anyone can edit it" concrete. */
.iv-terminal {
  margin: 0;
  border: 1px solid rgba(17, 20, 27, 0.14);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-code);
}
.iv-terminal-bar {
  display: flex;
  align-items: center;
  gap: var(--size-2);
  padding: var(--size-2) var(--size-3);
  background: #f1f3f6;
  border-bottom: 1px solid var(--rule-soft);
}
.iv-terminal-title {
  margin-left: var(--size-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--fg-muted);
}
.iv-terminal-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--size-6);
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1.7;
}
.iv-sql { color: var(--fg-soft); }
.iv-sql-kw { color: var(--accent); }
.iv-sql-str { color: var(--ok); }
.iv-sql-out { color: var(--warn); margin-top: var(--size-2); }

.iv-warn-line {
  font-size: var(--font-size-1);
  color: var(--danger);
  margin-top: var(--size-2);
}

/* Slide 6 — the harness diagram: agent (opaque) → KIFF gate →
 * action. The point is KIFF wraps the boundary, not the agent. */
.iv-harness {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--size-2);
  margin: 0;
}

.iv-harness-agent,
.iv-harness-action {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--size-1);
  flex: 1 1 0;
  min-width: 9rem;
  padding: var(--size-6);
  border: 1px dashed rgba(17, 20, 27, 0.22);
  border-radius: 8px;
  background: #ffffff;
  text-align: center;
  font-size: var(--font-size-0);
  color: var(--fg-soft);
}
.iv-harness-action { border-style: solid; }

.iv-harness-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.iv-harness-sub {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--fg-muted);
}

.iv-harness-gate {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  flex: 1 1 0;
  min-width: 9rem;
  padding: var(--size-6);
  border: 1px solid rgba(49, 84, 212, 0.32);
  border-radius: 8px;
  background: var(--accent-soft);
  text-align: center;
}
.iv-harness-gate-name {
  font-family: var(--font-sans);
  font-size: var(--font-size-4);
  font-weight: 580;
  color: var(--fg);
  line-height: 1;
}
.iv-harness-gate-sub {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  color: var(--accent);
}
.iv-harness-arrow {
  align-self: center;
  font-family: var(--font-mono);
  font-size: var(--font-size-3);
  color: var(--fg-muted);
}

/* Slide 7 reuses .ds-receipt/.ds-browser; add the "refused" tint to
 * mirror .ds-allow from the sales deck. */
.ds-refused {
  color: var(--danger);
  font-weight: 600;
}

/* Slide 8 — the alerts feed. */
.iv-alerts {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  margin: 0;
}
.iv-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--size-3);
  padding: var(--size-4) var(--size-5);
  border: 1px solid rgba(17, 20, 27, 0.12);
  border-left: 3px solid var(--danger);
  border-radius: 8px;
  background: #ffffff;
}
.iv-alert-dot {
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 0.45em;
  border-radius: 999px;
  background: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 22%, transparent);
}
.iv-alert-body { display: flex; flex-direction: column; gap: 2px; }
.iv-alert-title { font-size: var(--font-size-0); color: var(--fg); }
.iv-alert-reason {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--fg-muted);
}
.iv-alert-reason code {
  font-family: var(--font-mono);
  font-size: 0.95em;
  color: var(--fg-soft);
  background: transparent;
  padding: 0;
}

/* Slide 9 — the propose→decide→execute→record mechanics strip. */
.iv-mechanics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--size-2);
  margin: 0;
}
.iv-mech-step {
  padding: var(--size-3) var(--size-5);
  border: 1px solid rgba(17, 20, 27, 0.14);
  border-radius: 999px;
  background: #ffffff;
  font-family: var(--font-mono);
  font-size: var(--font-size-0);
  color: var(--fg);
}
.iv-mech-arrow {
  font-family: var(--font-mono);
  font-size: var(--font-size-2);
  color: var(--fg-muted);
}

/* Slide 10 — the moat contrast: commodity vs. defensible. */
.iv-moat {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--size-3);
  margin: 0;
}
.iv-moat-card {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  padding: var(--size-6);
  border-radius: 8px;
}
.iv-moat-out {
  border: 1px solid rgba(17, 20, 27, 0.10);
  background: #ffffff;
  opacity: 0.82;
}
.iv-moat-in {
  border: 1px solid rgba(49, 84, 212, 0.26);
  background: var(--accent-soft);
  box-shadow: 0 1px 0 rgba(49, 84, 212, 0.14);
}
.iv-moat-k {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.iv-moat-in .iv-moat-k { color: var(--accent); }
.iv-moat-v { font-size: var(--font-size-1); line-height: 1.4; color: var(--fg); }

/* Slide 11 — the status rows. */
.iv-status {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  margin: 0;
}
.iv-status-row {
  display: flex;
  align-items: flex-start;
  gap: var(--size-3);
  padding: var(--size-4) var(--size-5);
  border: 1px solid rgba(17, 20, 27, 0.12);
  border-radius: 8px;
  background: #ffffff;
}
.iv-status-badge {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  margin-top: 0.1em;
}
.iv-status-live {
  color: var(--ok);
  border: 1px solid color-mix(in oklab, var(--ok) 45%, var(--rule));
  background: color-mix(in oklab, var(--ok) 12%, transparent);
}
.iv-status-prog {
  color: var(--warn);
  border: 1px solid color-mix(in oklab, var(--warn) 50%, var(--rule));
  background: color-mix(in oklab, var(--warn) 12%, transparent);
}
.iv-status-text { font-size: var(--font-size-0); line-height: 1.45; color: var(--fg-soft); }

/* Closing slide — the merged defensibility + traction + ask + live-demo
 * pointer (one slide, replacing the old moat/status/ask trio). Sits below
 * the .iv-status strip on the same slide; the .iv-status :has() rules already
 * center the slide and compact the heading, so this only needs its own
 * internal rhythm and the highlighted "see it live" pointer. */
.iv-close {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  margin: 0;
}
.iv-close p {
  margin: 0;
  line-height: 1.42;
  color: var(--fg-soft);
}
/* Selector carries a p to out-specify `.iv-close p` (which sets --fg-soft),
 * so the focal CTA gets full-strength --fg without !important. */
.iv-close p.iv-close-demo {
  padding: var(--size-3) var(--size-4);
  border: 1px solid rgba(49, 84, 212, 0.26);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--accent-soft);
  box-shadow: 0 1px 0 rgba(49, 84, 212, 0.14);
  color: var(--fg);
}
.iv-close-links {
  font-family: var(--font-mono);
  font-size: var(--font-size-0);
}
.iv-close-links a { color: var(--accent); }

/* The close slide packs four blocks (h2, intro p, .iv-status, .iv-close). In
 * one column that's too tall for a windowed viewport — the .iv-status 1fr row
 * (inherited from the rule above) collapses and its rows overlap .iv-close, or
 * the heading clips off the top. Lay it as two columns instead: the narrative
 * (heading, moat intro, the ask + links) on the left, the status rows on the
 * right, spanning and vertically centred. Halving the stack lets it fit
 * without clipping. The max-width:900px media block below drops all these
 * slides back to display:block, so this collapses to a single column on
 * narrow screens. */
.deck-slide:has(.iv-close) .deck-slide-inner {
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  grid-template-rows: auto auto 1fr;
  align-items: start;
  column-gap: clamp(var(--size-5), 4vw, var(--size-8));
}
.deck-slide:has(.iv-close) > .deck-slide-inner > h2,
.deck-slide:has(.iv-close) > .deck-slide-inner > p,
.deck-slide:has(.iv-close) > .deck-slide-inner > .iv-close {
  grid-column: 1;
}
.deck-slide:has(.iv-close) .iv-status {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: start;
}

/* Rich slides use their own internal composition; keep the slide
 * canvas centered and let each composition distribute its content. */
.deck-slide:has(.iv-wall),
.deck-slide:has(.iv-harness),
.deck-slide:has(.iv-alerts),
.deck-slide:has(.iv-moat),
.deck-slide:has(.iv-status),
.deck-slide:has(.iv-terminal),
.deck-slide:has(.iv-persona) {
  justify-content: center;
}

/* Dense slides (rich blocks on either deck) pull the heading and body
 * type down a notch so the block content fits without scrolling on a
 * typical laptop viewport. Prose-only slides are untouched. */
.deck-slide:has(.ds-cards) h1,
.deck-slide:has(.ds-offer) h1,
.deck-slide:has(.ds-receipt) h1,
.deck-slide:has(.ds-fit) h1,
.deck-slide:has(.iv-wall) h1,
.deck-slide:has(.iv-harness) h1,
.deck-slide:has(.iv-alerts) h1,
.deck-slide:has(.iv-moat) h1,
.deck-slide:has(.iv-status) h1,
.deck-slide:has(.iv-terminal) h1,
.deck-slide:has(.iv-persona) h1,
.deck-slide:has(.iv-flow) h1 {
  font-size: 3rem;
  margin-bottom: var(--size-3);
  max-width: 14ch;
}

.deck-slide:has(.ds-cards) h2,
.deck-slide:has(.ds-offer) h2,
.deck-slide:has(.ds-receipt) h2,
.deck-slide:has(.ds-fit) h2,
.deck-slide:has(.iv-wall) h2,
.deck-slide:has(.iv-harness) h2,
.deck-slide:has(.iv-alerts) h2,
.deck-slide:has(.iv-moat) h2,
.deck-slide:has(.iv-status) h2,
.deck-slide:has(.iv-terminal) h2,
.deck-slide:has(.iv-persona) h2,
.deck-slide:has(.iv-flow) h2 {
  font-size: clamp(2.05rem, 3.2vw, 2.75rem);
  line-height: 0.98;
  margin-bottom: var(--size-3);
  max-width: 18ch;
}

.deck-slide:has(.ds-cards) p,
.deck-slide:has(.ds-offer) p,
.deck-slide:has(.ds-receipt) p,
.deck-slide:has(.ds-fit) p,
.deck-slide:has(.iv-wall) p,
.deck-slide:has(.iv-harness) p,
.deck-slide:has(.iv-alerts) p,
.deck-slide:has(.iv-moat) p,
.deck-slide:has(.iv-status) p,
.deck-slide:has(.iv-terminal) p,
.deck-slide:has(.iv-persona) p,
.deck-slide:has(.iv-flow) p {
  font-size: clamp(0.95rem, 1.25vw, 1.08rem);
  line-height: 1.45;
}

@media (max-height: 760px) {
  /* The uniform root-font scale (html:has(.deck)) already shrinks every
   * rem size on short viewports; here we only tighten the chrome padding
   * so the slide body gets a little more room. Font sizes are intentionally
   * NOT overridden — that would double-shrink against the root scale. */
  .deck {
    --deck-pad-y: var(--size-4);
    --deck-pad-x: clamp(var(--size-5), 5vw, var(--size-8));
  }
}

@media (max-height: 660px) {
  .deck {
    --deck-rail-h: 48px;
    --deck-footer-h: 48px;
    --deck-pad-y: var(--size-3);
  }
}

@media (max-width: 520px) {
  .iv-wall { grid-template-columns: 1fr; }
  .iv-wall-bar { width: auto; height: 3px; }
  .iv-wall-bar-label { transform: translate(-50%, -50%); }
  .iv-flow, .iv-harness { flex-direction: column; }
  .iv-flow-arrow, .iv-harness-arrow { transform: rotate(90deg); }
  .iv-moat { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .deck-slide:has(.iv-terminal) .deck-slide-inner {
    gap: var(--size-1);
  }
  .deck-slide:has(.iv-terminal) h2 {
    font-size: 1.62rem;
    line-height: 0.98;
    max-width: 20ch;
    margin-bottom: var(--size-1);
  }
  .deck-slide:has(.iv-terminal) p {
    font-size: 0.74rem;
    line-height: 1.25;
  }
  .iv-terminal {
    margin-top: var(--size-1);
  }
  .iv-terminal-bar {
    padding: 0.25rem var(--size-3);
  }
  .iv-terminal-body {
    padding: var(--size-3);
    font-size: 0.68rem;
    line-height: 1.32;
  }
  .iv-source {
    font-size: 0.56rem;
    line-height: 1.2;
    margin-top: var(--size-1);
  }
  .ds-cards {
    gap: 0.35rem;
  }
  .ds-card {
    min-height: 6.2rem;
    padding: 0.45rem;
    gap: 0.25rem;
  }
  .ds-card-risk {
    font-size: 0.76rem;
  }
  .ds-card-nums {
    gap: 0.15rem;
  }
  .ds-without {
    font-size: 0.62rem;
  }
  .ds-with {
    font-size: 0.82rem;
  }
  .ds-card-tag {
    font-size: 0.58rem;
    line-height: 1.2;
  }
  .ds-card-fw {
    font-size: 0.48rem;
  }
}

/* ── Print-all view (/deck/{slug}?print=1) ───────────────────── *
 *
 * Replaces the old JS window.print() button. Every slide is rendered
 * stacked on one scrollable page; the browser's own print dialog
 * (⌘P / Ctrl+P) exports the whole deck to PDF. No JS, no toolchain.
 */

.deck-print {
  max-width: 60rem;
  margin: 0 auto;
  padding: clamp(var(--size-5), 5vw, var(--size-8));
  display: flex;
  flex-direction: column;
  gap: var(--size-6);
}

.deck-print-hint {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: var(--size-3) var(--size-4);
  border: 1px solid rgba(49, 84, 212, 0.24);
  border-radius: 8px;
  background: var(--accent-soft);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--fg);
  text-align: center;
}

.deck-print-slide {
  padding: clamp(var(--size-5), 4vw, var(--size-7));
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  background: var(--bg-elev);
  box-shadow: 0 8px 24px rgba(17, 20, 27, 0.06);
}

@media print {
  /* The single-slide stage prints just its own content: drop the
   * fixed chrome and the click zones so a one-slide ⌘P is clean. */
  .deck-topbar,
  .deck-footer,
  .deck-hit,
  .deck::before,
  .deck::after {
    display: none !important;
  }
  html:has(.deck),
  body:has(.deck) {
    overflow: visible;
  }
  .deck {
    display: block;
    height: auto;
  }
  .deck-slide {
    overflow: visible;
    max-width: none;
  }

  /* The print-all view: one slide per page, no screen banner. */
  .deck-print-hint {
    display: none;
  }
  .deck-print {
    max-width: none;
    padding: 0;
    gap: 0;
  }
  .deck-print-slide {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #ffffff;
    padding: 0;
    break-after: page;
    page-break-after: always;
  }
  .deck-print-slide:last-child {
    break-after: auto;
    page-break-after: auto;
  }
}