/* Local-only type comparison. Enable with ?font-preview=cooper; the public
   deck continues to use DM Sans unless that explicit query parameter is set. */
@font-face {
  font-family: "Cooper Preview";
  src: url("assets/fonts/cooper/Cooper-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Cooper Preview";
  src: url("assets/fonts/cooper/Cooper-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  /* HDS core tokens */
  --hds-color-core-brand-25: #f5f5ff;
  --hds-color-core-brand-50: #e8e9ff;
  --hds-color-core-brand-100: #d6d9fc;
  --hds-color-core-brand-300: #9a9afe;
  --hds-color-core-brand-400: #7f7dfc;
  --hds-color-core-brand-500: #665efd;
  --hds-color-core-brand-600: #533afd;
  --hds-color-core-brand-900: #1c1e54;
  --hds-color-core-neutral-0: #fff;
  --hds-color-core-neutral-25: #f8fafd;
  --hds-color-core-neutral-50: #e5edf5;
  --hds-color-core-neutral-100: #d4dee9;
  --hds-color-core-neutral-200: #bac8da;
  --hds-color-core-neutral-500: #64748d;
  --hds-color-core-neutral-600: #50617a;
  --hds-color-core-neutral-700: #3c4f69;
  --hds-color-core-neutral-800: #273951;
  --hds-color-core-neutral-900: #1a2c44;
  --hds-color-core-neutral-975: #0d253d;
  --hds-space-core-100: 8px;
  --hds-space-core-200: 16px;
  --hds-space-core-300: 24px;
  --hds-space-core-400: 32px;
  --hds-space-core-1200: 96px;
  --hds-space-core-1600: 128px;
  --hds-space-core-radius-xs: 2px;
  --hds-space-core-radius-sm: 4px;
  --hds-space-core-radius-md: 6px;
  --hds-space-core-radius-lg: 16px;
  --surface-dot-color: rgba(6, 27, 49, 0.09);
  --surface-dot-width: 0.7px;
  --surface-dot-height: 2.2px;
  --surface-column-count: 6;
  --surface-line-dot-gap: 12px;

  /* surfaces */
  --bg: var(--hds-color-core-neutral-0);
  --paper: var(--hds-color-core-neutral-0);
  --panel: var(--hds-color-core-neutral-0);
  --well: var(--hds-color-core-neutral-25);
  --mock-chrome: var(--hds-color-core-neutral-50);

  /* text */
  --ink: var(--hds-color-core-neutral-975);
  --text-body: var(--hds-color-core-neutral-800);
  --text-secondary: var(--hds-color-core-neutral-700);
  --muted: var(--hds-color-core-neutral-500);

  /* structure */
  --hairline: var(--hds-color-core-neutral-100);
  --panel-border: var(--hds-color-core-neutral-200);
  --active: var(--hds-color-core-brand-100);
  --near-black: #0b0f16;

  /* accent */
  --accent: var(--hds-color-core-brand-500);
  --blue: var(--hds-color-core-brand-600);

  /* deck-native accents */
  --pill-bg: var(--hds-color-core-brand-25);
  --badge: var(--hds-color-core-brand-100);

  /* elevation */
  --shadow-strong: 0 24px 64px rgba(13, 37, 61, 0.12);

  /* font family */
  --font-sans: "DM Sans", sans-serif;
  --font-display: "DM Sans", sans-serif;
  --font-heading: "DM Sans", sans-serif;
  --font-label: "DM Sans", sans-serif;
  --font-eyebrow: var(--font-label);
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* type scale */
  --type-cover-size: 60px;
  --type-cover-line: 68px;
  --type-divider-size: 44px;
  --type-divider-line: 52px;
  --type-case-size: 40px;
  --type-case-line: 48px;
  --type-lead-size: 20px;
  --type-lead-line: 28px;
  --type-body-floor-size: 14px;
  --type-body-floor-line: 20px;
  --type-hero-size: var(--type-divider-size);
  --type-h1-size: var(--type-cover-size);
  --type-h1-weight: 400;
  --type-h1-line: var(--type-cover-line);
  --type-h1-color: var(--ink);
  --type-h2-size: var(--type-header-size);
  --type-h2-weight: 400;
  --type-h2-line: var(--type-header-line);
  --type-h2-tracking-tight: -0.0225em;
  --type-h3-size: var(--type-lead-size);
  --type-h3-weight: 400;
  --type-h3-line: var(--type-lead-line);
  --type-h4-size: var(--type-body-floor-size);
  --type-h4-weight: 400;
  --type-h4-line: var(--type-body-floor-line);
  --type-quote-size: var(--type-lead-size);
  --type-quote-line: var(--type-lead-line);
  --type-hero-caption-size: var(--type-body-floor-size);
  --type-hero-caption-line: var(--type-body-floor-line);
  --type-hero-caption-weight: 400;
  --type-hero-caption-color: var(--ink);
  --type-small-size: var(--type-body-floor-size);
  --type-ui-size: 12px;
  --type-label-size: 14px;
  --type-label-mono-size: var(--type-label-size);
  --type-label-mono-tracking: 0;
  --type-eyebrow-size: 14px;
  --type-eyebrow-line: 20px;
  --type-eyebrow-color: var(--muted);

  /* Stripe-inspired gradation system */
  --grad-brand: var(--accent);
  --grad-blue: var(--blue);
  --grad-orchid: #a86ff5;
  --grad-sky: #6ec3f0;
  --grad-rose: #f2a9c4;
  --grad-aurora:
    radial-gradient(65% 90% at 8% 12%, rgba(102, 94, 253, 0.3), transparent 62%),
    radial-gradient(55% 75% at 92% 8%, rgba(110, 195, 240, 0.42), transparent 62%),
    radial-gradient(60% 80% at 82% 92%, rgba(242, 169, 196, 0.38), transparent 64%),
    radial-gradient(50% 65% at 25% 100%, rgba(168, 111, 245, 0.28), transparent 62%),
    var(--paper);
  --grad-divider:
    linear-gradient(68deg, transparent 62%, rgba(83, 58, 253, 0.35) 74%, rgba(102, 94, 253, 0.55) 85%, rgba(168, 111, 245, 0.45) 94%, rgba(110, 195, 240, 0.3) 100%);
  --grad-wash:
    radial-gradient(70% 55% at 85% 108%, rgba(214, 217, 252, 0.85), transparent 70%),
    radial-gradient(45% 40% at 108% 85%, rgba(110, 195, 240, 0.22), transparent 65%),
    var(--paper);
  --grad-dusk:
    radial-gradient(70% 95% at 82% 5%, rgba(102, 94, 253, 0.55), transparent 68%),
    radial-gradient(50% 60% at 10% 90%, rgba(110, 195, 240, 0.3), transparent 62%),
    radial-gradient(45% 55% at 60% 108%, rgba(242, 169, 196, 0.22), transparent 62%),
    var(--ink);
  /* Duplicate of gradation-tokens.css's definition, which loads later and wins.
     Kept in sync so the two never disagree — see the note there for why the last
     two stops are darkened. */
  --grad-cover:
    radial-gradient(45% 55% at 103% 62%, rgba(255, 255, 255, 0.9), transparent 60%),
    linear-gradient(68deg, transparent 44%, rgba(83, 58, 253, 0.5) 56%, rgba(102, 94, 253, 0.95) 66%, rgba(168, 111, 245, 0.9) 76%, rgba(206, 214, 246, 0.95) 88%, rgba(184, 195, 240, 0.95) 100%);
  --grad-diffusion:
    radial-gradient(50% 65% at 102% 68%, rgba(255, 255, 255, 0.95), transparent 62%),
    linear-gradient(112deg, transparent 42%, rgba(83, 58, 253, 0.55) 56%, rgba(102, 94, 253, 0.95) 65%, rgba(168, 111, 245, 0.9) 73%, rgba(230, 233, 252, 0.95) 88%, #f8fafd 100%);
  --grad-airbrush:
    radial-gradient(38% 52% at 88% 18%, rgba(242, 169, 196, 0.75), transparent 68%),
    radial-gradient(42% 55% at 105% 75%, rgba(168, 111, 245, 0.6), transparent 70%),
    radial-gradient(35% 50% at 55% 108%, rgba(110, 195, 240, 0.5), transparent 70%);
  --grad-pigment: linear-gradient(120deg, var(--grad-blue), var(--grad-brand) 32%, var(--grad-orchid) 62%, var(--grad-rose) 100%);
  --grad-haze-field:
    radial-gradient(45% 65% at 78% 22%, rgba(242, 169, 196, 0.85), transparent 65%),
    radial-gradient(50% 70% at 95% 80%, rgba(102, 94, 253, 0.75), transparent 68%),
    radial-gradient(40% 55% at 58% 95%, rgba(110, 195, 240, 0.7), transparent 66%),
    radial-gradient(35% 50% at 70% 55%, rgba(168, 111, 245, 0.65), transparent 65%);
  --grad-type: linear-gradient(95deg, var(--grad-blue) 5%, var(--grad-orchid) 50%, var(--grad-sky) 95%);
  --grad-hairline: linear-gradient(90deg, var(--grad-blue), var(--grad-orchid) 55%, var(--grad-sky));
  --grad-hairline-alt: linear-gradient(90deg, var(--grad-brand), var(--grad-sky), var(--grad-rose));
  --grad-hover: linear-gradient(120deg, var(--grad-blue), var(--grad-orchid) 40%, var(--grad-sky) 75%, var(--grad-rose));
  --grad-rest: linear-gradient(120deg, var(--hairline), var(--hairline));
  --texture-grain: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22200%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22/%3E%3C/filter%3E%3Crect width=%22200%22 height=%22200%22 filter=%22url(%23n)%22 opacity=%220.6%22/%3E%3C/svg%3E');

  --slide-x: var(--hds-space-core-1600);
  --slide-y: var(--hds-space-core-1200);
  /* The one left edge every slide's first text starts on. Components are free to
     run their media wider than this — the axis governs type, not pictures. Same
     128px as --slide-x, named separately so a component can adopt the axis
     without inheriting the symmetric horizontal padding. */
  --slide-inset-left: var(--hds-space-core-1600);
  /* Two-column slides: the copy column ends at 460 and the media starts at 492,
     leaving a 32px gutter. Named because the previous values were literals tuned
     to an older, smaller inset — when the axis moved to 128 the copy boxes grew
     straight under the media and clipped their own last words. Change these two
     together and re-run scripts/check-text-media-overlap.mjs. */
  --slide-copy-width: 332px;
  --slide-media-left: 492px;
  --sidebar-width: 250px;
  /* The drag handle's column. It used to be an 8px literal in three places —
     the .deck-shell grid and both --deck-stage-* formulas — so collapsing the
     sidebar to 0 still leaked 8px off the stage. One name, set to 0 with the
     width in the collapsed state. */
  --sidebar-gutter: 8px;

  font-family: var(--font-sans);
}

/* Collapsed sidebar. An explicit state, not a smaller minimum: clampSidebarWidth()
   floors the expanded width at 200px, so a 0 that had to survive that clamp would
   be clobbered by the next resize. app.js skips the clamp entirely while collapsed. */
:root[data-sidebar="collapsed"] {
  --sidebar-width: 0px;
  --sidebar-gutter: 0px;
}

:root[data-sidebar="collapsed"] .sidebar,
:root[data-sidebar="collapsed"] .sidebar-resizer {
  display: none;
}

/* Explicit columns. display:none removes the sidebar and the resizer from grid
   flow, and auto-placement then slides .workspace back into column 1 — which is
   the 0px column while collapsed, so the stage measured 0 wide and the scale came
   out 0. Pinning each child to its own column makes the collapse a pure width
   change instead of a re-flow. */
.sidebar {
  grid-column: 1;
}

.sidebar-resizer {
  grid-column: 2;
}

.workspace {
  grid-column: 3;
}

/* Preview only: change display hierarchy (h1–h4) while preserving body,
   labels, captions, layout and the production DM Sans token values. */
.font-preview-cooper .slide :is(h1, h2, h3, h4) {
  font-family: "Cooper Preview", var(--font-display) !important;
  font-weight: 400;
  letter-spacing: 0 !important;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
}

button {
  font: inherit;
}

.deck-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) var(--sidebar-gutter) minmax(0, 1fr);
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

.sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
  border-right: 1px solid var(--hairline);
  background: var(--panel);
  box-shadow: 8px 0 24px rgba(13, 37, 61, 0.05);
}

.sidebar-resizer {
  position: relative;
  z-index: 3;
  cursor: col-resize;
}

.sidebar-resizer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 2px;
  background: transparent;
  transition: background 160ms ease;
}

.sidebar-resizer:hover::after,
body.is-resizing-sidebar .sidebar-resizer::after {
  background: var(--accent);
}

body.is-resizing-sidebar {
  cursor: col-resize;
  user-select: none;
}

.sidebar-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 12px 14px;
  border-bottom: 1px solid var(--panel-border);
}

.sidebar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.sidebar-design-system-link {
  display: none;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  line-height: 16px;
  text-decoration: none;
}

.sidebar-design-system-link span {
  color: var(--muted);
}

.brand {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.brand-title {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-size: var(--type-body-size);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-regular);
  line-height: var(--type-body-line);
  letter-spacing: normal;
}

.brand-logo {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.brand-subtitle {
  color: var(--muted);
  font-size: var(--type-label-size);
  font-family: var(--font-label);
  font-weight: var(--font-weight-regular);
  line-height: var(--type-body-line);
  letter-spacing: normal;
  text-transform: none;
}

.icon-button {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.54);
  color: var(--ink);
  cursor: pointer;
}

.icon-button:hover {
  background: rgba(255, 250, 240, 0.82);
}

.font-switch-row {
  padding: 10px 12px;
  border-bottom: 1px solid var(--panel-border);
}

.font-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--well);
}

.font-toggle button {
  padding: 5px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.font-toggle button.active {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(13, 37, 61, 0.12);
}

.slide-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 12px 20px;
}

.slide-list-scroller {
  display: contents;
}

.slide-list-nav {
  display: none;
}

.sidebar-footer {
  display: grid;
  gap: 6px;
  flex: 0 0 auto;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--panel-border);
  background: var(--panel);
}

.sidebar-footer a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.sidebar-footer a:hover,
.sidebar-footer a:focus-visible {
  border-color: var(--grad-brand);
  box-shadow: 0 8px 20px rgba(83, 58, 253, 0.1);
  outline: none;
}

.sidebar-footer a span {
  color: var(--muted);
  font-family: var(--font-label);
  font-weight: 400;
}

.slide-item {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  box-sizing: border-box;
  gap: 9px;
  width: 100%;
  margin: 0 0 12px;
  padding: 8px;
  border: var(--border-accent) solid transparent;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, outline-color 160ms ease;
}

.slide-item:focus-visible {
  outline: var(--border-accent) solid var(--blue);
  outline-offset: 2px;
}

.slide-item:hover {
  border-color: var(--panel-border);
  background: var(--well);
}

.slide-item.active,
.slide-item[aria-current="page"] {
  border: var(--border-accent) solid transparent;
  outline: none;
  background-image: linear-gradient(var(--paper), var(--paper)), var(--grad-hairline);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.slide-number {
  color: var(--muted);
  font-size: var(--type-label-size);
  font-family: var(--font-label);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}

.thumb-wrap {
  position: relative;
  min-width: 0;
}

.thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--bg);
  box-shadow: 0 2px 10px rgba(13, 37, 61, 0.08);
}

.thumb-preview-base {
  position: absolute;
  left: var(--thumb-offset-x, 0px);
  top: var(--thumb-offset-y, 0px);
  width: 1040px;
  height: 585px;
  overflow: hidden;
  transform: scale(var(--thumb-scale, 0.151));
  transform-origin: top left;
  background: var(--bg);
  pointer-events: none;
}

.thumb-preview-base .slide {
  width: 1040px;
  height: 585px;
}

.thumb-preview-base .step-controls {
  display: none;
}

.thumb-iframe-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 1px;
  background: var(--paper);
}

.thumb-iframe-poster {
  object-fit: cover;
}

.step-dots {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}

.step-dot {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--active);
}

.step-dot.active {
  background: var(--ink);
}

.workspace {
  /* The slide and the counter row below it are sized from one pair of values so
     the counter's right edge can never drift off the slide's right edge. The
     strip is the counter's own height plus the gap; the slide gives that back
     out of its height so nothing gets letterboxed. */
  --deck-nav-strip: 41px;
  --deck-stage-w: min(calc(100vw - var(--sidebar-width) - var(--sidebar-gutter)), calc((100vh - var(--deck-nav-strip)) * 16 / 9));
  --deck-stage-h: min(calc(100vh - var(--deck-nav-strip)), calc((100vw - var(--sidebar-width) - var(--sidebar-gutter)) * 9 / 16));
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  background: var(--bg);
}

/* Reopen affordance for the collapsed state. It cannot live in .sidebar-actions
   like its counterpart, because the whole sidebar is display:none while collapsed —
   so it sits in the workspace instead. 44x44 so it is a real touch target. */
.sidebar-reopen {
  position: absolute;
  z-index: 4;
  top: 8px;
  left: 8px;
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.54);
  color: var(--ink);
  cursor: pointer;
}

.sidebar-reopen:hover {
  background: rgba(255, 250, 240, 0.82);
}

:root[data-sidebar="collapsed"] .sidebar-reopen {
  display: grid;
}

/* Fullscreen is taken on the workspace so the counter comes along; there is no
   sidebar to subtract once it is. */
.workspace:fullscreen {
  --deck-stage-w: min(100vw, calc((100vh - var(--deck-nav-strip)) * 16 / 9));
  --deck-stage-h: min(calc(100vh - var(--deck-nav-strip)), calc(100vw * 9 / 16));
}

.stage-shell {
  position: relative;
  width: var(--deck-stage-w);
  height: var(--deck-stage-h);
  max-width: 100%;
  overflow: hidden;
  background: var(--bg);
}

.deck-nav-overlay {
  width: var(--deck-stage-w);
  max-width: 100%;
  flex: none;
  display: flex;
  justify-content: flex-end;
  /* The overlay is exactly stage-wide, so flex-end put the pager flush against
     the slide's right edge. Inset it instead of narrowing the overlay, which
     would drag the counter off the stage's own right axis. */
  padding-right: 16px;
  z-index: 6;
  user-select: none;
  font-size: 12px;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.01em;
}

.nav1c {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 3px 10px rgba(13, 37, 61, 0.07);
}

.nav1c-btn {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  width: 27px;
  height: 27px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #4a5a6e;
  transition: background 160ms ease, color 160ms ease;
}

.nav1c-btn:hover {
  background: linear-gradient(135deg, #533afd, #875bf7);
  color: #fff;
}

.nav1c-btn:focus {
  outline: none;
}

.nav1c-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.nav1c-btn svg {
  width: 15px;
  height: 15px;
  display: block;
}

.nav1c-count {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  font-weight: 500;
  color: #0d253d;
  padding: 0 5px;
  min-width: 38px;
  text-align: center;
  letter-spacing: 0.02em;
}

.nav1c-sep {
  color: rgba(13, 37, 61, 0.35);
  margin: 0 2px;
}

.nav1c-total {
  color: rgba(13, 37, 61, 0.45);
}

.stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1040px;
  height: 585px;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  transform: scale(var(--stage-scale, 1));
  transform-origin: top left;
}

/* Prototype iframes need a second or two to boot. Painting a shimmer on the
   frame's own background (visible while its document is still blank) means the
   panel reads as "loading" instead of "empty". The class is applied on mount
   and removed on load, so the frame's normal background takes over.
   Frames that already have a poster (option demos, lineage demo) are skipped. */
.stage iframe.is-frame-loading {
  border-radius: inherit;
  background-color: var(--hds-color-core-brand-50) !important;
  background-image: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 32%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0) 68%
  ) !important;
  background-repeat: no-repeat !important;
  background-size: 300% 100% !important;
  animation: sp-frame-shimmer 1.4s ease-in-out infinite;
}

@keyframes sp-frame-shimmer {
  from {
    background-position: 130% 0;
  }
  to {
    background-position: -30% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage iframe.is-frame-loading {
    background-image: none !important;
    animation: none;
  }
}

.slide {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse var(--surface-dot-width) var(--surface-dot-height) at 0 3px, var(--surface-dot-color) 0 100%, transparent 100%),
    linear-gradient(140deg, rgba(255, 255, 255, 0.56), transparent 58%);
  background-size: calc(100% / var(--surface-column-count)) var(--surface-line-dot-gap), 100% 100%;
}

/* Per-slide page number retired — the deck nav overlay's N/M counter is
   now the single source of pagination. */

.slide-kicker {
  display: inline-block;
  justify-self: start;
  width: fit-content;
  margin: 0 0 20px;
  color: var(--type-eyebrow-color);
  font-size: var(--type-eyebrow-size);
  font-family: var(--font-eyebrow);
  font-weight: 400;
  line-height: var(--type-eyebrow-line);
  letter-spacing: 0;
  text-transform: none;
}

.slide-title {
  margin: 0;
  max-width: 700px;
  font-family: var(--font-display);
  font-size: var(--type-h2-size);
  font-style: normal;
  font-stretch: normal;
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-line);
  letter-spacing: -0.02em;
  color: var(--ink);
}

.slide-copy {
  max-width: 700px;
  margin: 20px 0 0;
  color: var(--text-body);
  font-size: var(--type-body-size);
  font-style: normal;
  font-weight: 300;
  line-height: var(--type-body-line);
  letter-spacing: 0;
}

.intro-lockup {
  position: absolute;
  left: var(--slide-x);
  top: var(--slide-y);
}

.praform-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 80px;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--type-label-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
}

.praform-mark {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background:
    linear-gradient(135deg, var(--accent) 0 50%, transparent 50%),
    var(--ink);
}

.intro-prompt {
  position: absolute;
  left: var(--slide-x);
  right: var(--slide-x);
  bottom: 116px;
  max-width: 760px;
}

.intro-prompt p {
  margin: 0 0 26px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--type-hero-size);
  font-weight: var(--font-weight-medium);
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.intro-prompt p:last-child {
  margin-bottom: 0;
}

.cover-title {
  margin: 0 0 80px;
  font-family: var(--font-display);
  font-size: var(--type-h1-size);
  font-stretch: 78%;
  font-weight: var(--type-h1-weight);
  line-height: var(--type-h1-line);
  letter-spacing: -0.02em;
  color: var(--ink);
}

.cover-card,
.scenario-card,
.quote-card,
.principle,
.agenda-item,
.model-layer,
.system-node {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.82);
}

.cover-card {
  display: grid;
  gap: 0;
  padding: 8px 18px;
}

.detail-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}

.detail-row:last-child {
  border-bottom: 0;
}

.detail-row span {
  color: var(--muted);
  font-size: var(--type-label-size);
  font-family: var(--font-label);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.detail-row strong {
  font-size: var(--type-small-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
}

.split-slide,
.thesis-slide,
.scenario-slide {
  display: grid;
  grid-template-columns: 0.44fr 0.56fr;
  gap: 46px;
  align-items: center;
  padding: var(--slide-y) var(--slide-x);
}

.agenda-slide,
.evidence-slide,
.system-slide {
  display: grid;
  padding: var(--slide-y) var(--slide-x);
}

.stack {
  display: grid;
  gap: 14px;
}

.principle {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 16px;
  padding: 17px;
}

.principle.principle-no-number {
  grid-template-columns: minmax(0, 1fr);
}

.principle-number {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 99px;
  background: var(--ink);
  color: white;
  font-size: var(--type-label-size);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
}

.principle h3,
.agenda-item h3,
.model-layer h3,
.system-node h3,
.scenario-card h3 {
  margin: 0 0 6px;
  font-size: var(--type-h3-size);
  font-style: normal;
  font-weight: var(--type-h3-weight);
  line-height: var(--type-h3-line);
}

.principle p,
.agenda-item p,
.model-layer p,
.system-node p,
.scenario-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--type-small-size);
  font-style: normal;
  font-weight: 300;
  line-height: var(--type-body-line);
}

.agenda-slide {
  align-content: center;
}

.agenda-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 40px;
}

.agenda-item {
  min-height: 260px;
  padding: 20px;
}

.agenda-item span,
.quote-card span,
.model-layer span,
.small-label,
.panel-label {
  display: block;
  margin-bottom: 24px;
  color: var(--muted);
  font-size: var(--type-label-size);
  font-family: var(--font-label);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.evidence-slide {
  grid-template-rows: auto 1fr;
  gap: 22px;
}

.evidence-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.quote-card {
  display: grid;
  align-content: space-between;
  min-height: 198px;
  padding: 22px;
}

.quote-card p {
  color: var(--muted);
  font-family: var(--font-display);
  font-size: var(--type-quote-size);
  font-style: normal;
  font-stretch: normal;
  font-weight: 300;
  line-height: var(--type-quote-line);
}

.model {
  position: relative;
  display: grid;
  gap: 14px;
}

.model::before {
  content: "";
  position: absolute;
  left: 25px;
  top: 22px;
  bottom: 22px;
  width: 2px;
  background: var(--hairline);
}

.model-layer {
  position: relative;
  padding: 18px 20px 18px 64px;
}

.model-layer::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 24px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--ink);
  border-radius: 99px;
  background: var(--accent);
}

.scenario-card {
  padding: 24px;
}

.avatar {
  width: 52px;
  height: 52px;
  margin-bottom: 22px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, #fff, transparent 28%),
    linear-gradient(135deg, #e9a36f, #5c78ff);
}

.timeline {
  display: grid;
  gap: var(--timeline-gap, 10px);
  margin-top: var(--timeline-margin-top, 26px);
}

.timeline-point {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 14px;
  padding: var(--timeline-row-padding, 12px 0);
  border-top: 1px solid var(--hairline);
}

.timeline-point strong {
  font-size: var(--type-ui-size);
}

.timeline-point span {
  color: var(--text-secondary);
  font-size: var(--type-small-size);
}

.wire-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 120px 120px 120px;
  gap: 14px;
}

.wire-card {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(23, 22, 21, 0.06) 12px, transparent 12px) 18px 22px / 84px 8px no-repeat,
    linear-gradient(90deg, rgba(53, 92, 255, 0.18), rgba(233, 127, 127, 0.1)),
    rgba(255, 250, 240, 0.8);
}

.wire-card.tall {
  grid-row: span 2;
}

.wire-card.wide {
  grid-column: span 2;
}

.demo-slide {
  display: block;
  padding: 0;
}

.demo-note {
  position: absolute;
  left: var(--slide-x);
  top: 132px;
  z-index: 2;
  width: 330px;
}

.demo-slide.reverse .demo-note {
  left: auto;
  right: var(--slide-x);
  top: 154px;
  width: 310px;
}

.product-stage {
  position: absolute;
  right: 64px;
  top: 64px;
  width: 500px;
  height: 430px;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--well);
  box-shadow: var(--shadow-strong);
}

.demo-slide.reverse .product-stage {
  left: 88px;
  right: auto;
  top: 76px;
  width: 500px;
  height: 430px;
}

.mock-product {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.mock-sidebar {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 18px;
  border-right: 1px solid var(--hairline);
  background: var(--mock-chrome);
}

.mock-logo {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 20px;
  border-radius: 9px;
  background: var(--ink);
  color: white;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
}

.mock-nav-item {
  height: 30px;
  padding: 8px 9px;
  border-radius: 7px;
  color: var(--text-secondary);
  font-size: var(--type-ui-size);
  font-family: var(--font-sans);
}

.mock-nav-item.active {
  background: var(--paper);
  color: var(--ink);
  font-weight: var(--font-weight-semibold);
}

.mock-content {
  padding: 24px;
}

.mock-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.mock-header h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-h1-size);
  font-stretch: 82%;
  font-weight: var(--font-weight-semibold);
}

.status-pill {
  display: inline-grid;
  place-items: center;
  min-width: 74px;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--paper);
  color: var(--text-secondary);
  font-size: var(--type-label-size);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
}

.mock-board {
  display: grid;
  gap: 0;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--paper);
}

.task-row {
  display: grid;
  grid-template-columns: 1fr 86px 82px;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 0 16px;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--type-ui-size);
}

.task-row:last-child {
  border-bottom: 0;
}

.task-row em {
  color: var(--text-secondary);
  font-style: normal;
  text-align: right;
}

.task-meter {
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--hairline);
}

.task-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
}

.attention-ring {
  position: absolute;
  right: 46px;
  top: 145px;
  width: 270px;
  height: 78px;
  border: 3px solid var(--accent);
  border-radius: 12px;
  box-shadow: 0 0 0 999px rgba(23, 22, 21, 0.08);
  opacity: 0;
  transition: 180ms ease;
  pointer-events: none;
}

.attention-ring.visible,
.floating-panel.visible,
.source-drawer.visible,
.inline-toast.visible,
.action-sheet.visible,
.success-pulse.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.floating-panel,
.source-drawer,
.action-sheet {
  position: absolute;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 18px 55px rgba(13, 37, 61, 0.18);
  opacity: 0;
  transform: translateY(10px);
  transition: 180ms ease;
  pointer-events: none;
}

.floating-panel {
  right: 34px;
  top: 106px;
  width: 248px;
  padding: 16px;
}

.floating-panel h4,
.source-drawer h4,
.action-sheet h4 {
  margin: 0 0 8px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--type-h4-size);
  font-style: normal;
  font-weight: var(--type-h4-weight);
  line-height: var(--type-h4-line);
}

.floating-panel p,
.action-sheet p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--type-ui-size);
  line-height: 1.42;
}

.source-drawer {
  right: 24px;
  top: 24px;
  bottom: 24px;
  width: 230px;
  padding: 16px;
}

.mini-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
  font-size: var(--type-ui-size);
}

.mini-row span {
  color: var(--muted);
}

.inline-toast {
  position: absolute;
  left: 50%;
  bottom: 30px;
  padding: 11px 15px;
  border-radius: 999px;
  background: var(--ink);
  color: white;
  font-size: var(--type-ui-size);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: 180ms ease;
}

.inline-toast.visible {
  transform: translate(-50%, 0);
}

.demo-slide.reverse .inline-toast {
  left: 20px;
  transform: translateY(10px);
}

.demo-slide.reverse .inline-toast.visible {
  transform: translateY(0);
}

.product-stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.image-tag {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 2;
  min-width: 0;
  padding: 0 12px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--paper);
  color: var(--text-secondary);
  font-size: var(--type-label-size);
  font-family: var(--font-label);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.action-sheet {
  right: 34px;
  bottom: 34px;
  width: 270px;
  padding: 16px;
}

.sheet-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.sheet-actions span {
  display: grid;
  place-items: center;
  flex: 1;
  height: 34px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--type-ui-size);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
}

.sheet-actions span.primary {
  border-color: var(--ink);
  background: var(--ink);
  color: white;
}

.success-pulse {
  position: absolute;
  right: 44px;
  bottom: 46px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 16px rgba(217, 255, 63, 0.22);
  opacity: 0;
  transform: scale(0.7);
  transition: 180ms ease;
}

.system-slide {
  grid-template-rows: auto 1fr;
  gap: 40px;
}

.system-map {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: center;
}

.system-node {
  min-height: 230px;
  padding: 20px;
}

.system-node:nth-child(2) {
  transform: translateY(-26px);
}

.system-node:nth-child(3) {
  transform: translateY(26px);
}

.end-slide {
  text-align: center;
  background:
    radial-gradient(circle at 25% 30%, rgba(233, 127, 127, 0.32), transparent 32%),
    radial-gradient(circle at 76% 68%, rgba(53, 92, 255, 0.24), transparent 34%),
    var(--near-black);
  color: var(--paper);
}

.end-slide > div {
  position: absolute;
  left: 128px;
  right: 128px;
  top: 50%;
  transform: translateY(-50%);
}

.end-slide .slide-copy,
.end-slide .slide-kicker {
  color: rgba(255, 250, 240, 0.72);
  margin-left: auto;
  margin-right: auto;
}

.end-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-h1-size);
  font-stretch: 78%;
  font-weight: var(--type-h1-weight);
  line-height: var(--type-h1-line);
  letter-spacing: -0.02em;
}

.step-controls {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: 28px;
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: rgba(255, 250, 240, 0.92);
  transform: translateX(-50%);
  box-shadow: 0 8px 24px rgba(13, 37, 61, 0.08);
  pointer-events: auto;
}

.step-controls-over-media {
  bottom: var(--space-600);
}

.step-button {
  width: 34px;
  height: 22px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: var(--type-label-size);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.step-button.active {
  background: var(--ink);
  color: white;
}

@media (max-width: 860px) {
  body {
    overflow: auto;
  }

  .deck-shell {
    display: block;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 3;
    height: 188px;
    border-right: 0;
    border-bottom: 1px solid var(--panel-border);
  }

  .sidebar-resizer {
    display: none;
  }

  .sidebar-design-system-link {
    display: inline-flex;
  }

  .slide-list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--space-150);
  }

  .slide-list-scroller {
    position: relative;
    display: flex;
    flex: 1;
    min-width: 0;
    min-height: 0;
  }

  .slide-list-scroller .slide-list {
    flex: 1;
  }

  .slide-list-nav {
    display: grid;
    place-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    flex: none;
    width: 32px;
    border: 0;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    color: var(--ink);
    z-index: 4;
  }

  .slide-list-nav-prev {
    left: 0;
    background: linear-gradient(90deg, var(--panel) 55%, transparent);
    justify-content: flex-start;
  }

  .slide-list-nav-next {
    right: 0;
    background: linear-gradient(270deg, var(--panel) 55%, transparent);
    justify-content: flex-end;
  }

  .sidebar-footer {
    display: none;
  }

  .slide-item {
    grid-template-columns: 24px minmax(0, 1fr);
    flex: 0 0 clamp(156px, 45vw, 190px);
    margin: 0;
  }

  .workspace {
    min-height: calc(100vh - 188px);
    padding: 16px;
    place-items: center;
  }

  .stage-shell {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  /* The shell drops the shared width here in favour of aspect-ratio, so the
     counter has to follow it rather than the now-unused --deck-stage-w. */
  .deck-nav-overlay {
    width: 100%;
  }
}

@media (min-width: 561px) and (max-width: 860px) {
  .sidebar {
    height: 208px;
  }

  .slide-list {
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .slide-list::-webkit-scrollbar {
    display: none;
  }

  .slide-item {
    flex-basis: calc((100% - 30px) / 4);
    min-width: 0;
    scroll-snap-align: center;
  }

  .workspace {
    min-height: calc(100vh - 208px);
  }
}

@media (max-width: 560px) {
  .sidebar {
    height: 154px;
  }

  .sidebar-header {
    min-height: 50px;
    padding: 10px 12px;
  }

  .brand {
    gap: 1px;
  }

  .brand-title {
    font-size: 14px;
    line-height: 20px;
  }

  .slide-list {
    gap: 8px;
    padding: var(--space-100) var(--space-150);
  }

  .slide-item {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 6px;
    flex-basis: clamp(136px, 42vw, 164px);
    padding: 6px;
  }

  .slide-number {
    font-size: 11px;
  }

  .step-dots {
    margin-top: 4px;
  }

  .workspace {
    min-height: calc(100vh - 154px);
    padding: 8px;
  }
}

/* STAT HERO */
.stat-hero-number {
  display: block;
  margin: 20px 0 10px;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 104px;
  font-weight: var(--font-weight-medium);
  font-stretch: 80%;
  line-height: 1;
  letter-spacing: -0.02em;
}

.stat-hero-label {
  display: block;
  margin: 0 0 10px;
  color: var(--type-hero-caption-color);
  font-family: var(--font-heading);
  font-size: var(--type-hero-caption-size);
  font-style: normal;
  font-weight: var(--type-hero-caption-weight);
  line-height: var(--type-hero-caption-line);
}

.stat-hero-sub {
  display: block;
  color: var(--accent);
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-medium);
}

/* STAT BAR (dark overlay on product-stage) */
.stat-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 18px 22px;
  background: var(--near-black);
  opacity: 0;
  transform: translateY(10px);
  transition: 180ms ease;
}

.stat-bar.visible {
  opacity: 1;
  transform: translateY(0);
}

.stat-bar .stat-block strong {
  display: block;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 22px;
  font-stretch: 82%;
  font-weight: var(--font-weight-semibold);
}

.stat-bar .stat-block span {
  display: block;
  margin-top: 3px;
  color: #fff;
  font-size: 10.5px;
  line-height: 1.3;
}

/* CONSTRAINT CARDS */
.constraint-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.constraint-card {
  padding: 20px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--paper);
}

.constraint-card h3 {
  margin: 0 0 16px;
  font-size: var(--type-h4-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
}

.constraint-row {
  margin: 0 0 10px;
  color: var(--text-secondary);
  font-size: var(--type-small-size);
  line-height: 1.4;
}

.constraint-row:last-child {
  margin-bottom: 0;
}

.constraint-row strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
  font-size: var(--type-ui-size);
  font-weight: var(--font-weight-semibold);
}

/* GRADIENT COVER (matches the original deck's project-intro panel) */
.title-slide {
  padding: var(--slide-y) var(--slide-x);
}

.title-slide-content {
  position: absolute;
  left: var(--slide-x);
  bottom: var(--slide-y);
}

.title-slide-role {
  margin: 0 0 8px;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  line-height: 1.3;
}

.title-slide-logo {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 0 16px;
}

.title-slide-name {
  margin: 0;
  color: var(--type-h1-color);
  font-family: var(--font-heading);
  font-size: var(--type-h1-size);
  font-style: normal;
  font-weight: var(--type-h1-weight);
  line-height: var(--type-h1-line);
  letter-spacing: -0.03em;
}

.project-context-slide {
  padding: var(--slide-y) var(--slide-x);
  background-color: var(--bg);
  background-image: radial-gradient(ellipse var(--surface-dot-width) var(--surface-dot-height) at 0 3px, var(--surface-dot-color) 0 100%, transparent 100%);
  background-size: calc(100% / var(--surface-column-count)) var(--surface-line-dot-gap);
}

.project-context-title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-line);
  letter-spacing: var(--type-h2-tracking-tight);
}

.portfolio-overview-slide {
  padding: 18px;
}

.portfolio-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  height: 100%;
}

.portfolio-overview-card {
  display: grid;
  place-items: center;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--hds-space-core-radius-lg);
  background: var(--well);
}

.portfolio-overview-card.featured {
  background-color: var(--hds-color-core-neutral-0);
  background-image:
    radial-gradient(circle at 82% 8%, var(--hds-color-core-brand-100) 0%, transparent 42%),
    linear-gradient(145deg, var(--hds-color-core-brand-25) 0%, var(--hds-color-core-neutral-0) 68%);
}

.portfolio-overview-card h2 {
  margin: 0;
  color: var(--type-h1-color);
  font-family: var(--font-heading);
  font-size: var(--type-h4-size);
  font-style: normal;
  font-weight: 500;
  line-height: var(--type-h4-line);
  text-align: center;
}

.wire-reveal-slide {
  padding: 0;
  overflow: hidden;
}

.wire-reveal-trigger,
.wire-overlay {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.wire-reveal-trigger img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wire-reveal-trigger span,
.wire-overlay span {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--type-ui-size);
  font-weight: var(--font-weight-semibold);
}

.wire-overlay {
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
}

.wire-overlay img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cover-shot-slide {
  padding: 0;
}

.cover-shot-slide .cover-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #ccd2dc 0%, #e6c6b4 58%, #f0b294 100%);
}

.cover-shot-slide .cover-content {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 64px 72px;
}

.cover-shot-slide .cover-kicker {
  margin: 0 0 22px;
  color: #fff;
  font-family: var(--font-label);
  font-size: var(--type-label-size);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.cover-shot-slide .cover-heading {
  max-width: 560px;
  margin: 0 0 32px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: var(--font-weight-medium);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.cover-shot-slide .cover-shot {
  max-width: 520px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-strong);
}

.cover-shot-slide .cover-shot img {
  display: block;
  width: 100%;
}

/* STATEMENT SLIDE (single left-aligned column, big statement + copy) */
.statement-slide {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  padding: var(--slide-y) var(--slide-x);
}

.statement-slide .statement-line {
  margin: 0;
  max-width: 820px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: var(--font-weight-medium);
  font-stretch: 84%;
  line-height: 1.14;
  letter-spacing: -0.02em;
}

.statement-slide .statement-line .accent {
  color: var(--accent);
}

.statement-slide .statement-copy {
  max-width: 640px;
  margin: 24px 0 0;
  color: var(--text-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
}

/* STAT CENTERED SLIDE (everything centered, matches the big-number slide) */
.stat-centered-slide {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--slide-y) var(--slide-x);
  text-align: center;
}

.stat-centered-slide .stat-centered-title {
  max-width: 760px;
  margin: 0 0 44px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: var(--font-weight-medium);
  line-height: 1.32;
}

.stat-centered-slide .stat-centered-title .accent {
  color: var(--accent);
}

.stat-centered-slide .stat-hero-number,
.stat-centered-slide .stat-hero-label,
.stat-centered-slide .stat-hero-sub {
  text-align: center;
}

/* IMAGE PANEL (plain screenshot card, no device bezel) */
.image-panel {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(13, 37, 61, 0.1);
}

.image-panel img {
  display: block;
  width: 100%;
}

/* SPLIT SLIDE WITH IMAGE (list left / screenshot right, or reverse) */
.split-image-slide {
  display: grid;
  grid-template-columns: 0.5fr 0.5fr;
  gap: 40px;
  height: 100%;
  align-items: center;
  padding: var(--slide-y) var(--slide-x);
}

.split-image-slide.reverse {
  grid-template-columns: 0.5fr 0.5fr;
}

.split-image-slide .discovery-copy {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
}

.split-image-slide .image-panel {
  height: 100%;
  max-height: 430px;
}

.split-image-slide .image-panel img {
  height: 100%;
  object-fit: cover;
}

/* STACK ROWS (vertical list divided by hairlines — constraints, Q&A) */
.stack-rows {
  display: grid;
}

.stack-row {
  padding: 18px 0;
  border-top: 1px solid var(--hairline);
}

.stack-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.stack-row h3 {
  margin: 0 0 8px;
  font-size: var(--type-h4-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
}

.stack-row .constraint-row {
  margin: 0 0 6px;
}

.stack-row .constraint-row:last-child {
  margin-bottom: 0;
}

/* STAGE ANNOTATION (floating card overlaid directly on a screenshot) */
.stage-annotation {
  position: absolute;
  z-index: 2;
  max-width: 210px;
  padding: 16px 18px;
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 14px 34px rgba(13, 37, 61, 0.16);
}

.stage-annotation h4 {
  margin: 0 0 8px;
  font-size: var(--type-ui-size);
  font-weight: var(--font-weight-semibold);
}

.stage-annotation p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.4;
}

/* BOTTOM STATEMENT (reflection-style slide, no kicker, bottom aligned) */
.bottom-statement-slide {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--slide-y) var(--slide-x);
}

.bottom-statement-slide .statement-line {
  margin: 0;
  max-width: 780px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
}

.bottom-statement-slide .statement-copy {
  max-width: 700px;
  margin: 20px 0 0;
  color: var(--text-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
}

/* DUAL COVER (plain text column + gradient image column) */
.dual-cover-slide {
  display: grid;
  grid-template-columns: 0.54fr 0.46fr;
  height: 100%;
}

.dual-cover-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--slide-y) 56px var(--slide-y) var(--slide-x);
}

.dual-cover-rule {
  width: 44px;
  height: 3px;
  margin-bottom: 24px;
  background: var(--accent);
}

.dual-cover-title {
  margin: 0 0 32px;
  max-width: 460px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 29px;
  font-weight: var(--font-weight-medium);
  line-height: 1.16;
  letter-spacing: -0.02em;
}

.dual-cover-right {
  position: relative;
  background: linear-gradient(135deg, #f3c9a8 0%, #eda57e 100%);
}

.dual-cover-right img {
  position: absolute;
  inset: 40px;
  width: calc(100% - 80px);
  height: calc(100% - 80px);
  object-fit: cover;
  border-radius: 10px;
  box-shadow: var(--shadow-strong);
}

/* DARK AGENT LIST (stacked dark cards with gradient orb) */
.dark-list {
  display: grid;
  gap: 12px;
}

.dark-list-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  border-radius: 10px;
  background: var(--near-black);
}

.dark-list-orb {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.dark-list-item span {
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--type-small-size);
  font-weight: 600;
}

/* DARK BAR (single-item highlight bar) */
.dark-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  margin-bottom: 28px;
  border-radius: 10px;
  background: var(--near-black);
}

.dark-bar-orb {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.dark-bar span {
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--type-h4-size);
  font-weight: 600;
}

/* NUMBERED COLUMNS (plain 3-col list, hairline above each) */
.numbered-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.numbered-column {
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}

.numbered-column .col-number {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--font-weight-medium);
}

.numbered-column h3 {
  margin: 0 0 6px;
  font-size: var(--type-small-size);
  font-weight: var(--font-weight-semibold);
}

.numbered-column p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 1.4;
}

/* PROS/CONS LIST */
.pros-cons-list {
  display: grid;
  gap: 7px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.pros-cons-list li {
  position: relative;
  padding-left: 18px;
  color: var(--text-body);
  font-size: 12.5px;
  line-height: 1.4;
}

.pros-cons-list li.pro::before {
  content: "+";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.pros-cons-list li.con {
  color: var(--muted);
}

.pros-cons-list li.con::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--muted);
  font-weight: 700;
}

.verdict-tag {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.verdict-tag.rejected {
  background: #fbdcd6;
  color: #a33a2a;
}

.verdict-tag.chosen {
  background: #d9ecd7;
  color: #2f6b2a;
}

.image-panel.state-rejected {
  outline: 3px solid #d9634f;
  outline-offset: 2px;
}

.image-panel.state-chosen {
  outline: 3px solid #4b9c53;
  outline-offset: 2px;
}

/* IMPACT COLUMNS */
.impact-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  margin-bottom: 24px;
}

.impact-columns h4 {
  margin: 0 0 14px;
  color: var(--accent);
  font-family: var(--font-label);
  font-size: var(--type-label-size);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.impact-columns ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.impact-columns li {
  position: relative;
  padding-left: 15px;
  color: var(--text-body);
  font-size: var(--type-small-size);
  line-height: 1.4;
}

.impact-columns li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--muted);
}

/* GUARDRAIL TRIPTYCH */
.guardrail-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.guardrail-column .image-panel {
  margin-bottom: 12px;
  height: 130px;
}

.guardrail-column .image-panel img {
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.guardrail-column h3 {
  margin: 0 0 4px;
  font-size: var(--type-small-size);
  font-weight: var(--font-weight-semibold);
}

.guardrail-column p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
}

/* CAREER TIMELINE */
.career-slide {
  padding: 0;
}

.career-slide .slide-kicker {
  position: absolute;
  left: 64px;
  top: 48px;
}

.career-line {
  position: absolute;
  left: 64px;
  right: 0;
  top: 330px;
  height: 1px;
  background: var(--hairline);
}

.career-dot {
  position: absolute;
  top: 326px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--hairline);
}

.career-stem {
  position: absolute;
  width: 1px;
  background: var(--hairline);
}

.career-stem.up {
  top: 268px;
  height: 62px;
}

.career-stem.down {
  top: 331px;
  height: 62px;
}

.career-phase {
  position: absolute;
}

.career-phase.up {
  bottom: 333px;
}

.career-phase.down {
  top: 409px;
}

.career-brand {
  margin: 0 0 16px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
}

.career-brand .sep {
  margin: 0 6px;
  color: var(--muted);
  font-weight: 400;
}

.career-chip {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #e8f6fc;
  color: #1e9cd7;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  vertical-align: 2px;
}

.career-phase-kicker {
  margin: 0 0 8px;
  color: var(--muted);
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.career-phase-title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.32;
}

/* CHOOSER */
.chooser-body {
  overflow: auto;
}

.chooser {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 96px 24px;
}

.chooser-lockup {
  margin-bottom: 64px;
  text-align: center;
}

.chooser-lockup .praform-wordmark {
  justify-content: center;
  margin-bottom: 12px;
}

.chooser-subtitle {
  color: var(--muted);
  font-size: var(--type-body-size);
}

.chooser-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 720px;
}

.chooser-card {
  position: relative;
  display: block;
  padding: 28px 24px 32px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--paper);
  color: inherit;
  text-decoration: none;
  transition: 180ms ease;
}

.chooser-card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(13, 37, 61, 0.1);
}

.chooser-card-kicker {
  display: block;
  margin-bottom: 20px;
  color: var(--muted);
  font-size: var(--type-label-size);
  font-family: var(--font-label);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.chooser-card-title {
  margin: 0 0 10px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--type-h2-size);
  font-stretch: 80%;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
}

.chooser-card-copy {
  margin: 0;
  color: var(--text-body);
  font-size: var(--type-small-size);
  line-height: 1.5;
}

.chooser-card-arrow {
  position: absolute;
  right: 20px;
  bottom: 20px;
  color: var(--muted);
  font-size: var(--type-label-size);
  transition: 180ms ease;
}

.chooser-card:hover .chooser-card-arrow {
  color: var(--ink);
  transform: translateX(4px);
}

/* MODULAR CARD MOTION */
.modular-solutions-bento-card {
  --card-ease: cubic-bezier(0.165, 0.84, 0.44, 1);
  --card-duration: 800ms;
  --card-scale: 1;
  --card-shift-x: 0px;
  --card-shift-y: 0px;
  --card-grow-x: 0px;
  --card-grow-y: 0px;
  position: relative;
  z-index: 0;
  cursor: pointer;
  background-color: rgb(255, 255, 255);
  contain: layout style;
  transform: translate3d(var(--card-shift-x), var(--card-shift-y), 0) scale(var(--card-scale));
  transform-origin: center;
  transition:
    z-index 0.1s step-end,
    transform var(--card-duration) var(--card-ease),
    box-shadow var(--card-duration) var(--card-ease),
    border-color var(--card-duration) var(--card-ease);
  will-change: transform;
}

.modular-solutions-bento-card:hover,
.modular-solutions-bento-card:focus-visible {
  --card-scale: 1.018;
  z-index: 1;
  border-color: color-mix(in srgb, var(--ink) 22%, var(--hairline));
  box-shadow: 0 18px 40px rgba(13, 37, 61, 0.12);
  outline: none;
}

@media (max-width: 640px) {
  .chooser-grid {
    grid-template-columns: 1fr;
  }
}

/* DESIGN SYSTEM DOC */
.ds-body {
  overflow: auto;
}

.ds-page {
  max-width: 980px;
  margin: 0 auto;
  padding: 96px 24px 160px;
}

.ds-header {
  margin-bottom: 96px;
}

.ds-header .praform-wordmark {
  margin-bottom: 20px;
}

.ds-header p {
  max-width: 560px;
  color: var(--muted);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
}

.ds-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 28px;
}

.ds-nav a {
  color: var(--text-secondary);
  font-size: var(--type-small-size);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
}

.ds-nav a:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.ds-section {
  margin-bottom: 88px;
  padding-top: 8px;
}

.ds-section-kicker {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: var(--type-label-size);
  font-family: var(--font-label);
  letter-spacing: 0;
  text-transform: none;
}

.ds-section-title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: var(--type-h2-size);
  font-stretch: 80%;
  font-weight: var(--type-h2-weight);
  letter-spacing: -0.02em;
  color: var(--ink);
}

.ds-section-copy {
  max-width: 620px;
  margin: 0 0 36px;
  color: var(--text-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
}

.ds-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}

.ds-swatch {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper);
}

.ds-swatch-fill {
  height: 64px;
  border-bottom: 1px solid var(--hairline);
}

.ds-swatch-meta {
  padding: 10px 12px 12px;
}

.ds-swatch-name {
  display: block;
  font-family: var(--font-label);
  font-size: 11px;
  color: var(--ink);
}

.ds-swatch-value {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}

.ds-type-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--hairline);
}

.ds-type-row:last-child {
  padding-bottom: 0;
}

.ds-type-meta {
  color: var(--muted);
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

.ds-type-sample {
  color: var(--ink);
  font-family: var(--font-display);
}

.ds-weight-row {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  padding: 20px 0;
  border-top: 1px solid var(--hairline);
}

.ds-weight-sample {
  font-family: var(--font-sans);
  font-size: 20px;
  color: var(--ink);
}

.ds-weight-sample span {
  display: block;
  margin-top: 6px;
  font-family: var(--font-label);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0;
}

.ds-component-block {
  margin-bottom: 40px;
}

.ds-component-label {
  display: block;
  margin-bottom: 14px;
  color: var(--muted);
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

.ds-frame {
  position: relative;
  padding: 32px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.56), transparent 58%),
    var(--bg);
}

.ds-frame .stack,
.ds-frame .model {
  max-width: 420px;
}

.ds-frame .evidence-board,
.ds-frame .agenda-grid {
  grid-template-columns: repeat(3, minmax(0, 220px));
}

.ds-frame .wire-grid {
  max-width: 420px;
}

.ds-frame-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.ds-frame-row .cover-card {
  min-width: 200px;
}

.ds-mini-stage {
  position: relative;
  width: 100%;
  max-width: 460px;
  height: 260px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--well);
  box-shadow: var(--shadow-strong);
}

/* Design-system typography normalization for slide content */
.slide h1 {
  color: var(--type-h1-color);
  font-family: var(--font-heading);
  font-size: var(--type-h1-size);
  font-style: normal;
  font-stretch: normal;
  font-weight: var(--type-h1-weight);
  line-height: var(--type-h1-line);
}

.slide h2 {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--type-h2-size);
  font-style: normal;
  font-stretch: normal;
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-line);
  letter-spacing: var(--type-h2-tracking-tight);
}

.slide h3 {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--type-h3-size);
  font-style: normal;
  font-stretch: normal;
  font-weight: var(--type-h3-weight);
  line-height: var(--type-h3-line);
}

.slide h4 {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--type-h4-size);
  font-style: normal;
  font-weight: var(--type-h4-weight);
  line-height: var(--type-h4-line);
}

.slide .slide-copy,
.slide .statement-copy {
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  font-style: normal;
  font-weight: var(--font-weight-light);
  line-height: var(--type-body-line);
}

.stat-centered-slide .stat-centered-title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--type-h2-size);
  font-style: normal;
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-line);
  letter-spacing: var(--type-h2-tracking-tight);
}

.portfolio-overview-card h2 {
  color: var(--type-h1-color);
  font-family: var(--font-heading);
  font-size: var(--type-h4-size);
  font-style: normal;
  font-weight: var(--type-h4-weight);
  line-height: var(--type-h4-line);
  letter-spacing: 0;
}

/* Gradation system mapped to the case-study deck */
.title-slide {
  isolation: isolate;
  overflow: hidden;
  background: var(--near-black);
}

.title-slide::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -12%;
  background: var(--grad-cover);
  filter: blur(30px);
  pointer-events: none;
}

.title-slide-content {
  z-index: 1;
}

.title-slide .title-slide-name,
.title-slide .title-slide-role {
  color: #fff;
}

.title-slide .title-slide-role {
  color: rgba(255, 255, 255, 0.72);
}

.title-slide-logo {
  filter: brightness(0) invert(1);
}

.title-slide::after,
.project-context-slide::after,
.end-slide::after {
  color: rgba(255, 255, 255, 0.58);
}

.project-context-slide {
  isolation: isolate;
  overflow: hidden;
  background: var(--near-black);
}

.project-context-slide::before {
  content: "";
  position: absolute;
  inset: -8%;
  background: var(--grad-divider);
  filter: blur(18px);
  pointer-events: none;
}

.project-context-slide .project-context-title {
  position: relative;
  color: #fff;
}

.statement-slide,
.bottom-statement-slide {
  background: var(--grad-wash);
}

.end-slide {
  background: var(--grad-dusk);
}

.dual-cover-right {
  background: var(--grad-aurora);
}

.dual-cover-rule,
.career-line {
  background: var(--grad-hairline);
}

.portfolio-overview-card.featured {
  background: var(--grad-aurora);
}

.slide .accent,
.stat-centered-slide .stat-hero-number {
  width: fit-content;
  background: var(--grad-type);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat-centered-slide .stat-hero-number {
  align-self: center;
}

.principle-number,
.dark-list-orb,
.dark-bar-orb {
  background-image: var(--grad-pigment);
}

.image-panel,
.product-stage {
  border: 1px solid var(--hairline);
}

.modular-solutions-bento-card {
  border: 1.5px solid var(--hairline);
  background-color: var(--paper);
}

.modular-solutions-bento-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--grad-rest);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--card-duration) var(--card-ease);
}

.modular-solutions-bento-card:hover,
.modular-solutions-bento-card:focus-visible {
  border-color: transparent;
}

.modular-solutions-bento-card:hover::after,
.modular-solutions-bento-card:focus-visible::after {
  background: var(--grad-hover);
  opacity: 1;
}

.ds-gradient-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.ds-gradient-card {
  min-height: 160px;
  padding: 18px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.ds-gradient-card span {
  padding: 5px 8px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  font-family: var(--font-eyebrow);
  font-size: 12px;
  line-height: 18px;
  text-transform: none;
}

.ds-gradient-card.dark span {
  background: rgba(13, 37, 61, 0.72);
  color: #fff;
}

/* Slide-primitives typography mapping */
.slide .title-slide-name {
  font-size: var(--type-cover-size);
  font-weight: 400;
  line-height: var(--type-cover-line);
}

.slide .project-context-title,
.slide .end-title {
  font-size: var(--type-divider-size);
  font-weight: 400;
  line-height: var(--type-divider-line);
}

.slide .dual-cover-title,
.slide.statement-slide .statement-line,
.slide.bottom-statement-slide .statement-line {
  font-size: var(--type-case-size);
  font-weight: 400;
  line-height: var(--type-case-line);
}

.slide .title-slide-role,
.slide .chooser-card-title {
  font-size: var(--type-lead-size);
  font-weight: 400;
  line-height: var(--type-lead-line);
}

.slide .slide-copy,
.slide .statement-copy,
.slide .principle p,
.slide .agenda-item p,
.slide .model-layer p,
.slide .system-node p,
.slide .scenario-card p,
.slide .quote-card p,
.slide .timeline-point span,
.slide .stack-row p,
.slide .constraint-row,
.slide .guardrail-column p,
.slide .numbered-column p {
  font-size: var(--type-body-floor-size);
  font-weight: 400;
  line-height: var(--type-body-floor-line);
}

.slide .slide-kicker,
.slide .small-label,
.slide .panel-label,
.slide .image-tag,
.slide .detail-row span,
.slide .quote-card span,
.slide .agenda-item span,
.slide .model-layer span {
  font-family: var(--font-label);
  font-weight: 400;
}

.slide .discovery-copy .slide-title {
  margin-bottom: 14px !important;
}

.slide .discovery-copy .stack {
  gap: 8px;
}

.slide .discovery-copy .principle {
  gap: 12px;
  padding: 8px 12px;
}

/* Design System (standalone) — integrated deck enforcement */
.slide {
  color: var(--text-body);
  font-family: var(--font-sans);
  font-weight: 400;
}

.slide::after {
  color: var(--muted);
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
}

.slide .slide-kicker,
.slide .small-label,
.slide .panel-label,
.slide .image-tag,
.slide .detail-row span,
.slide .quote-card > span,
.slide .agenda-item > span,
.slide .model-layer > span,
.slide .impact-columns h4,
.slide .career-phase-kicker,
.slide .cover-shot-slide .cover-kicker {
  color: var(--muted);
  font-family: var(--font-label);
  font-size: var(--type-label-size);
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
}

.slide .slide-title,
.slide .project-context-title {
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: var(--type-header-size);
  font-weight: 400;
  line-height: var(--type-header-line);
  letter-spacing: var(--type-h2-tracking-tight);
}

.slide .title-slide-name {
  font-family: var(--font-heading);
  font-size: var(--type-cover-size);
  font-weight: 400;
  line-height: var(--type-cover-line);
  letter-spacing: -0.002em;
}

.slide .project-context-title,
.slide .end-title {
  font-size: var(--type-divider-size);
  font-weight: 400;
  line-height: var(--type-divider-line);
}

.slide .dual-cover-title,
.slide .cover-shot-slide .cover-heading,
.slide.statement-slide .statement-line,
.slide.bottom-statement-slide .statement-line {
  font-family: var(--font-heading);
  font-size: var(--type-case-size);
  font-weight: 400;
  line-height: var(--type-case-line);
  letter-spacing: -0.002em;
}

.slide .slide-copy,
.slide .statement-copy,
.slide .principle p,
.slide .agenda-item p,
.slide .model-layer p,
.slide .system-node p,
.slide .scenario-card p,
.slide .timeline-point span,
.slide .stack-row p,
.slide .constraint-row,
.slide .constraint-row strong,
.slide .guardrail-column p,
.slide .numbered-column p,
.slide .pros-cons-list li,
.slide .impact-columns li,
.slide .stage-annotation p,
.slide .floating-panel p,
.slide .action-sheet p,
.slide .mini-row,
.slide .stat-bar .stat-block span,
.slide .dark-list-item > span:last-child,
.slide .dark-bar > span:last-child,
.slide .career-phase-title {
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  font-weight: 400;
  line-height: var(--type-body-line);
}

.slide .quote-card p,
.slide .stat-centered-title,
.slide .title-slide-role,
.slide .end-slide .slide-copy {
  font-family: var(--font-sans);
  font-size: var(--type-lead-size);
  font-weight: 400;
  line-height: var(--type-lead-line);
}

.slide .principle h3,
.slide .agenda-item h3,
.slide .model-layer h3,
.slide .system-node h3,
.slide .scenario-card h3 {
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: var(--type-lead-size);
  font-weight: 400;
  line-height: var(--type-lead-line);
}

.slide .floating-panel h4,
.slide .source-drawer h4,
.slide .action-sheet h4,
.slide .stage-annotation h4,
.slide .stack-row h3,
.slide .guardrail-column h3,
.slide .numbered-column h3,
.slide .constraint-card h3 {
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: var(--type-body-size);
  font-weight: 400;
  line-height: var(--type-body-line);
}

.slide .stat-hero-number,
.slide .stat-bar .stat-block strong,
.slide .numbered-column .col-number {
  font-weight: 400;
}

.cover-card,
.scenario-card,
.quote-card,
.principle,
.agenda-item,
.model-layer,
.system-node,
.constraint-card {
  border-color: var(--hairline);
  background: var(--paper);
  box-shadow: none;
}

.quote-card {
  position: relative;
}

.quote-card::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  height: 2px;
  border-radius: 8px 8px 0 0;
  background: var(--grad-hairline);
  pointer-events: none;
}

.agenda-item > span {
  width: fit-content;
  background: var(--grad-type);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.principle-number {
  border: 1.5px solid transparent;
  border-radius: 50%;
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    var(--grad-hairline) border-box;
  color: var(--blue);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
}

.portfolio-overview-card {
  position: relative;
  overflow: hidden;
  border: 1.5px solid var(--hairline);
  background: var(--paper);
  transition: border-color 240ms ease;
}

.portfolio-overview-card::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--grad-hover);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}

.portfolio-overview-card:hover,
.portfolio-overview-card:focus-within {
  border-color: transparent;
}

.portfolio-overview-card:hover::after,
.portfolio-overview-card:focus-within::after {
  opacity: 1;
}

.portfolio-overview-card.featured {
  background: var(--grad-aurora);
}

.title-slide {
  background-color: var(--near-black);
  background-image: var(--texture-grain);
  background-size: 180px 180px;
  background-blend-mode: soft-light;
}

.cover-shot-slide .cover-gradient {
  background: var(--grad-cover);
}

.slide.project-context-slide .project-context-title,
.slide.end-slide .end-title {
  color: #fff;
}

.slide.end-slide .slide-copy {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-line);
}

.slide.title-slide::after,
.slide.project-context-slide::after,
.slide.end-slide::after {
  color: rgba(255, 255, 255, 0.6);
}

.slide .stat-bar .stat-block span,
.slide .dark-list-item > span:last-child,
.slide .dark-bar > span:last-child {
  color: #fff;
}

.slide .career-brand {
  font-size: var(--type-label-size);
  line-height: var(--type-body-line);
}

.slide .career-chip,
.slide .verdict-tag {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 400;
}

.slide .timeline-point strong,
.slide .mini-row strong,
.slide .mini-row span {
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  font-weight: 400;
  line-height: var(--type-body-line);
}

.slide .timeline-point strong,
.slide .mini-row strong {
  color: var(--ink);
}

.slide .mini-row span {
  color: var(--muted);
}

/* Integrated portfolio deck and SlideFrame compositions. */
.workspace {
  position: relative;
}

.sp-media-slide .sp-header {
  margin-bottom: var(--space-300);
}

.sp-media-frame {
  display: grid;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  place-items: center;
  padding: var(--space-100);
  border: var(--border-thin) solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--paper);
}

.sp-media-frame > .ds-image-placeholder {
  min-height: 0;
  height: 100%;
}

.sp-media-caption {
  margin: var(--space-150) 0 0;
  color: var(--text-secondary);
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--type-body-line);
  letter-spacing: var(--tracking-body);
}

.sp-statement-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-250);
  max-width: var(--content-case);
  margin: auto 0;
}

.sp-statement-copy > i {
  width: var(--space-600);
  height: var(--border-rule);
  background: var(--grad-hairline);
}

.sp-statement-copy h2 {
  margin: 0;
  color: var(--ink);
  font-size: var(--type-statement-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--type-statement-line);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.sp-statement-copy.is-wide {
  max-width: var(--content-wide);
}

.sp-statement-copy.is-wide h2 {
  /* Both wide statements (lineage-main-use-case, ai-principle) read as
     scenarios rather than proclamations; at statement size they overpowered
     their slides. */
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: var(--tracking-case);
}

.sp-statement-copy.is-compact h2 {
  font-size: var(--type-statement-size);
  line-height: var(--type-statement-line);
  letter-spacing: var(--tracking-case);
}

.sp-agent-flow {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: var(--space-200);
  align-items: center;
}

.sp-agent-flow article {
  display: flex;
  min-height: 160px;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-100);
  padding: var(--component-card-padding);
  border: var(--border-accent) solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--well);
}

.sp-agent-flow article > span {
  width: fit-content;
  background: var(--grad-type);
  background-clip: text;
  color: transparent;
  font-family: var(--font-label);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
}

.sp-agent-flow h3,
.sp-agent-flow p {
  margin: 0;
  font-weight: var(--font-weight-regular);
}

.sp-agent-flow h3 {
  color: var(--ink);
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-line);
  letter-spacing: var(--tracking-body);
}

.sp-agent-flow p,
.sp-agent-flow > i {
  color: var(--text-secondary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  letter-spacing: var(--tracking-body);
}

.sp-agent-flow > i {
  font-style: normal;
}

/* ============================================================
   Mobile cover — the screen a phone viewer sees instead of the deck.

   The deck is a fixed 1040x585 stage scaled as one unit; below ~860px it lands
   around 0.37x and 16px copy renders at ~6px. So below that gate portfolio/app.js
   does not render the deck at all and renders this instead. Native mobile type —
   nothing transformed.

   Lifted verbatim from the approved handoff (deck-mobile-cover.html, 2026-07-30),
   with two changes, both recorded at the rules themselves: the meta line now keeps
   "Select Star (acquired by Snowflake)" together, and the webfont link is dropped
   because the deck already loads DM Sans.

   Deliberately NOT nested inside @media (max-width: 860px): every rule is scoped
   to .deck-mobile-cover and the element only exists when the guard renders it, so
   the gate is the JS. Nesting would also bury the cover's own max-height tight
   case one level deeper for no benefit.
   ============================================================ */

.deck-mobile-cover {
  --dmc-ink: #0d253d;
  --dmc-body: #273951;
  --dmc-muted: #64748d;
  --dmc-brand: #533afd;
  --dmc-hairline: #d4dee9;
  --dmc-well: #f8fafd;
  --dmc-night: #0b0f16;
  --dmc-grad: linear-gradient(95deg, #533afd 5%, #a86ff5 50%, #6ec3f0 95%);

  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--dmc-body);
  background: var(--dmc-well);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
.deck-mobile-cover *,
.deck-mobile-cover *::before,
.deck-mobile-cover *::after { box-sizing: border-box; }
.deck-mobile-cover p,
.deck-mobile-cover h1,
.deck-mobile-cover h2,
.deck-mobile-cover ul,
.deck-mobile-cover li { margin: 0; }
.deck-mobile-cover ul { padding: 0; }
.deck-mobile-cover ul { list-style: none; }
.deck-mobile-cover a { text-decoration: none; color: var(--dmc-brand); }

/* Hero — echoes the deck's near-black cover slide */
.deck-mobile-cover__hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  flex: 1;
  padding: 44px 24px 28px;
  background: var(--dmc-night);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* --grad-cover verbatim from the deck's title slide, cropped to portrait: the
   diagonal band is rotated 78deg so its bright end lands in the empty
   top-right of the hero, leaving the text ground near-black. */
.deck-mobile-cover__bloom {
  position: absolute;
  inset: -14% -12% -20%;
  z-index: -3;
  filter: blur(44px);
  background:
    radial-gradient(46% 42% at 104% 28%, rgba(255,255,255,0.90), transparent 60%),
    linear-gradient(78deg, transparent 44%, rgba(83,58,253,0.50) 56%, rgba(102,94,253,0.95) 66%, rgba(168,111,245,0.90) 76%, rgba(230,233,252,0.95) 90%, #f8fafd 100%);
  pointer-events: none;
}
/* grain overlay — the deck's cover surface is never a clean gradient */
.deck-mobile-cover__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22200%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22/%3E%3C/filter%3E%3Crect width=%22200%22 height=%22200%22 filter=%22url(%23n)%22 opacity=%220.6%22/%3E%3C/svg%3E");
  pointer-events: none;
}
/* Same grid as the deck's cover and thank-you slide, from the same token. Lives
   inside __hero, which is overflow: hidden — so it cannot bleed into the light
   "what's inside" body below. Shares z-index -1 with the grain and follows it in
   the DOM, which puts it just above, matching the desktop cover's order. */
.deck-mobile-cover__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--texture-grid);
  background-size: var(--texture-grid-size);
  pointer-events: none;
}

/* auto margin, not justify-content: flex-end — with no slack it collapses to 0
   instead of overflowing past the top padding and clipping the name */
.deck-mobile-cover__id { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.deck-mobile-cover__name {
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: #fff;
}
.deck-mobile-cover__role {
  margin-top: -8px;
  font-size: 16px;
  font-weight: 400;
  color: rgba(255,255,255,0.72);
}
/* gradient text only at 24px+ — below that it muddies to flat purple */
.deck-mobile-cover__statement {
  font-size: 26px;
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.015em;
  text-wrap: pretty;
  background-image: var(--dmc-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.deck-mobile-cover__rule {
  width: 32px;
  height: 1px;
  background: rgba(255,255,255,0.4);
}
.deck-mobile-cover__handoff {
  font-size: 16px;
  line-height: 1.45;
  color: rgba(255,255,255,0.72);
  text-wrap: pretty;
}

/* Links — one label + two icon actions. 48px targets, primary first.
   All three are the same 48px box so the row shares one baseline. */
.deck-mobile-cover__links { display: flex; align-items: center; gap: 10px; }
.deck-mobile-cover__link {
  flex: 1 1 auto;
  min-height: 48px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: opacity 0.15s ease;
}
.deck-mobile-cover a.deck-mobile-cover__link--primary {
  background: #fff;
  color: var(--dmc-ink);
}
/* icon-only actions: 48 x 48 tap target, 22px glyph, rest is padding.
   The dark scrim keeps the glyph off the bloom's bright corner — white on the
   scrimmed composite measures 4.4:1 at the worst point (bloom highlight) and
   9:1 over the plain near-black, both clear of the 3:1 floor. */
.deck-mobile-cover a.deck-mobile-cover__link--icon {
  flex: 0 0 48px;
  width: 48px;
  padding: 0;
  color: #fff;
  background: rgba(11,15,22,0.35);
  border: 1px solid rgba(255,255,255,0.32);
}
.deck-mobile-cover__link--icon svg {
  width: 22px;
  height: 22px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.deck-mobile-cover__link:active { opacity: 0.75; }

/* What's inside */
.deck-mobile-cover__body {
  flex: none;
  padding: 28px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.deck-mobile-cover__label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dmc-muted);
}
.deck-mobile-cover__list { display: flex; flex-direction: column; flex: none; }
.deck-mobile-cover__hatch-wrap { margin-top: 10px; }
.deck-mobile-cover__item {
  /* never shrink: shrinking collapses the air around the rule in the tight case */
  flex: none;
  border-top: 1px solid var(--dmc-hairline);
}
.deck-mobile-cover__item:first-child { border-top: 0; }
/* whole row is the tap target — a two-line row is already well past 44px, so this
   costs no layout height. The chevron is the only added mark. */
.deck-mobile-cover a.deck-mobile-cover__item-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  color: inherit;
  -webkit-tap-highlight-color: rgba(83,58,253,0.08);
}
.deck-mobile-cover__item:first-child a.deck-mobile-cover__item-link { padding-top: 0; }
.deck-mobile-cover__item-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.deck-mobile-cover__chev {
  flex: none;
  width: 20px;
  height: 20px;
  /* affordance mark — must clear the 3:1 non-text floor; muted is 4.54:1 here */
  stroke: var(--dmc-muted);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.deck-mobile-cover a.deck-mobile-cover__item-link:active .deck-mobile-cover__item-title { color: var(--dmc-brand); }
.deck-mobile-cover a.deck-mobile-cover__item-link:active .deck-mobile-cover__chev { stroke: var(--dmc-brand); }
.deck-mobile-cover__item-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--dmc-ink);
}
.deck-mobile-cover__item-desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--dmc-body);
  text-wrap: pretty;
}
/* meta tier — one step under the case descriptions, separated by space not a rule */
.deck-mobile-cover__scope {
  margin-top: 6px;
  font-size: 14px;
  color: var(--dmc-muted);
}
/* CHANGED from the handoff. The design broke the line BEFORE the parenthesis
   ("Both at Select Star" / "(acquired by Snowflake) - 45 slides"); the integration
   brief asked for "Select Star (acquired by Snowflake)" to stay together instead.
   Both halves are inline-block, so the only place the line can break is the space
   between them. Making only the first half unbreakable moved the break into
   "45 slides" and orphaned the word "slides" onto its own line. */
.deck-mobile-cover__scope > span { display: inline-block; }

/* Escape hatch — quiet, deliberate, last */
/* inline-flex so the box hugs its text — a block-level flex anchor would stretch
   the full column and put an invisible tap target across the whole bottom band.
   border-box + min-height 44 makes the target exactly 44px, not 44 + padding. */
.deck-mobile-cover a.deck-mobile-cover__hatch {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--dmc-muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: #b6c2d1;
}

/* tight case — iPhone SE (375 x 667). Top and bottom padding are floors: the
   name and the last link always keep their margin. Compression comes out of
   the gaps between blocks, never out of the frame padding. */
@media (max-height: 700px) {
  .deck-mobile-cover__hero { padding-top: 32px; padding-bottom: 24px; gap: 12px; }
  .deck-mobile-cover__name { font-size: 32px; }
  .deck-mobile-cover__statement { font-size: 24px; }
  .deck-mobile-cover__id { gap: 4px; }
  .deck-mobile-cover__hatch-wrap { margin-top: 0; }
  .deck-mobile-cover__handoff { line-height: 1.4; }
}

/* Belt-and-braces only. The JS guard in portfolio/app.js is what actually stops
   the deck rendering — this just guarantees the two can never both be on screen
   if a future change lets the deck build at a phone width. */
@media (max-width: 860px) {
  .deck-mobile-cover ~ .deck-shell,
  body:has(.deck-mobile-cover) .deck-shell { display: none; }
}