/* ============================================================
   Deck composition styles — v2
   New 8-slide deck. Variety-first: different header treatment,
   layout silhouette, and signature device per slide.
   ============================================================ */

.slide * { box-sizing: border-box; }

/* ============================================================
   FOOTER — minimal, every slide
   ============================================================ */
.slide-footer {
  position: absolute;
  inset: auto var(--margin) 36px var(--margin);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  z-index: 5;
}
.slide-footer .ts-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.slide-footer .ts-lockup img.ts-logo {
  height: 22px;
  width: auto;
  display: block;
}
.slide.dark .ts-lockup img.ts-logo {
  filter: invert(1) brightness(1.05);
}
.slide-footer .meta {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--fg-soft);
}
.slide-year {
  position: absolute;
  top: 36px;
  right: var(--margin);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--fg-soft);
  z-index: 5;
}

/* ============================================================
   AMBIENT MOTION — soft drifting blobs (dark slides only)
   ============================================================ */
.ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.ambient .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .ambient .blob.a { animation: drift-a 40s ease-in-out infinite; }
  .ambient .blob.b { animation: drift-b 52s ease-in-out infinite; }
}
@keyframes drift-a {
  0%,100% { transform: translate(-12%, -8%) scale(1); }
  50%     { transform: translate(20%,  12%) scale(1.25); }
}
@keyframes drift-b {
  0%,100% { transform: translate(60%, 70%) scale(1); }
  50%     { transform: translate(40%, 50%) scale(1.15); }
}

/* ============================================================
   SLIDE ENTRANCE REVEAL — disabled (caused capture issues).
   Keep .rv classes in markup; they're no-ops now.
   Real animation lives on slide 4 workflow + ambient blobs.
   ============================================================ */
.rv { opacity: 1; transform: none; }

/* ============================================================
   CONTENT FRAME — overrides per slide
   ============================================================ */
.slide-frame {
  position: absolute;
  inset: var(--s-10) var(--margin) 110px var(--margin);
  display: flex;
  flex-direction: column;
  z-index: 2;
}

/* ============================================================
   HEADER TREATMENTS — each slide gets a DIFFERENT one.
   ============================================================ */

/* H-A: large stamp number, vertical rule */
.h-stamp {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: start;
  margin-bottom: var(--s-6);
}
.h-stamp .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 140px;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.h-stamp .num .of {
  font-size: 28px;
  color: var(--fg-soft);
  font-weight: 500;
  letter-spacing: 0;
  margin-left: 10px;
}
.h-stamp .lhs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 14px;
  border-left: 1.5px solid var(--hairline);
  padding-left: 28px;
}
.h-stamp .lhs .eb {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.h-stamp .lhs .ttl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 56px;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--fg);
  max-width: 1000px;
  text-wrap: balance;
}

/* H-B: side-mounted vertical eyebrow (rotated) */
.h-side {
  position: relative;
  padding-left: 68px;
}
.h-side .eb-vert {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  transform: rotate(90deg) translate(0, -100%);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--violet);
  white-space: nowrap;
  padding-bottom: 12px;
  border-bottom: 1.5px solid var(--violet);
}

/* H-C: marker bracket */
.h-bracket {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-soft);
  margin-bottom: var(--s-5);
}
.h-bracket::before {
  content: '';
  width: 36px;
  height: 1.5px;
  background: var(--fg-muted);
}
.h-bracket::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
}

/* H-D: quote-mark mark */
.h-quote {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 96px;
  line-height: 0.6;
  color: var(--lime);
  margin-bottom: 10px;
}

/* ============================================================
   SLIDE 01 — Cover (dark, ambient)
   ============================================================ */
.s01 .title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 132px;
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--paper);
  text-wrap: balance;
  max-width: 1500px;
}
.s01 .title em { font-style: normal; color: var(--lime); position: relative; }
.s01 .title em::after {
  content: '';
  position: absolute;
  right: -22px;
  top: 60%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--lime);
}
.s01 .sub {
  margin-top: 36px;
  font-family: var(--font-body);
  font-size: 26px;
  line-height: 1.4;
  color: #BFBFBF;
  max-width: 980px;
}
.s01 .stamp {
  position: absolute;
  right: var(--margin);
  bottom: 140px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 380px;
  line-height: 1;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255,255,255,0.06);
  pointer-events: none;
  z-index: 1;
}
.s01 .eye {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: var(--s-6);
}
.s01 .eye::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(198, 242, 78, 0.15);
}

/* ============================================================
   SLIDE 02 — Problem (light, fragmentation diagram right)
   ============================================================ */
.s02 .frame {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 80px;
  align-items: start;
  height: 100%;
}
.s02 .lhs .ttl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 60px;
  line-height: 1.05;
  letter-spacing: -0.022em;
  margin-top: 24px;
  text-wrap: balance;
}
.s02 .lhs .closing {
  margin-top: auto;
  padding-top: 48px;
  border-top: 1.5px solid var(--hairline);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.s02 .lhs .closing .a { color: var(--n-700); }
.s02 .lhs .closing .b { color: var(--violet); }

.s02 .lhs {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.frag {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 640px;
}
.frag svg.lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.frag .node {
  position: absolute;
  background: var(--bg-elev);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 8px 22px -8px rgba(20,20,20,0.18), 0 1px 3px rgba(20,20,20,0.04);
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  white-space: nowrap;
}
.frag .node svg, .frag .node i {
  width: 22px; height: 22px; color: var(--violet);
}
.frag .node .x {
  width: 18px; height: 18px;
  color: var(--coral);
  margin-left: 4px;
}

/* ============================================================
   SLIDE 03 — Why It Matters (3 stacked impact strips)
   ============================================================ */
.s03 .strips {
  display: grid;
  grid-template-rows: repeat(3, auto);
  gap: 14px;
  margin-top: var(--s-5);
  flex: 0 0 auto;
}
.strip {
  display: grid;
  grid-template-columns: 180px 1fr 220px;
  align-items: center;
  gap: 24px;
  padding: 20px 28px;
  border-radius: var(--r-lg);
  background: var(--bg-elev);
  box-shadow: var(--shadow-card);
}
.strip .index {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 68px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.strip .body .lbl {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-soft);
  margin-bottom: 8px;
}
.strip .body .ttl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 8px;
}
.strip .body .body-text {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--n-700);
  max-width: 720px;
}
.strip .visual {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.strip.s-a { background: rgba(124, 92, 252, 0.06); box-shadow: none; }
.strip.s-a .index { color: var(--violet); }
.strip.s-b { background: var(--bg-elev); }
.strip.s-c { background: var(--ink); color: var(--paper); }
.strip.s-c .index { color: var(--lime); }
.strip.s-c .body .ttl { color: var(--paper); }
.strip.s-c .body .body-text { color: #BFBFBF; }
.strip.s-c .body .lbl { color: var(--n-500); }

.s03 .punch {
  margin-top: 24px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.s03 .punch em { font-style: normal; color: var(--violet); }

/* ============================================================
   SLIDE 04 — Animated workflow diagram (light)
   ============================================================ */
.s04 .intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: var(--s-5);
}
.s04 .intro .ttl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.s04 .intro .lead {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.5;
  color: var(--n-700);
  max-width: 520px;
  padding-bottom: 8px;
}
.s04 .flow-wrap {
  flex: 1;
  background: linear-gradient(180deg, var(--bg-muted) 0%, var(--paper) 100%);
  border-radius: var(--r-xl);
  padding: 40px 36px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 32px;
  align-items: center;
  min-height: 580px;
}
.flow-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 2;
  position: relative;
}
.flow-col .ttl {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-soft);
  margin-bottom: 4px;
}
.f-node {
  background: var(--bg-elev);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  box-shadow: 0 4px 14px -4px rgba(20,20,20,0.10);
  white-space: nowrap;
  position: relative;
  z-index: 2;
}
.f-node i, .f-node svg { width: 18px; height: 18px; color: var(--violet); }

.flow-hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.flow-hub .ring {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--violet) 0%, #5b3fe6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 30px 80px -20px rgba(124, 92, 252, 0.55);
}
.flow-hub .ring::before,
.flow-hub .ring::after {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 2px solid rgba(124, 92, 252, 0.35);
}
.flow-hub .ring::after { inset: -38px; border-color: rgba(124, 92, 252, 0.18); }
@media (prefers-reduced-motion: no-preference) {
  .flow-hub .ring::before { animation: pulse-ring 3s ease-out infinite; }
  .flow-hub .ring::after  { animation: pulse-ring 3s 0.6s ease-out infinite; }
}
@keyframes pulse-ring {
  0%   { transform: scale(0.95); opacity: 0.8; }
  100% { transform: scale(1.25); opacity: 0; }
}
.flow-hub .mark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 76px;
  color: var(--paper);
  letter-spacing: -0.04em;
  line-height: 0.9;
}
.flow-hub .mark .dot { display:inline-block; width:14px;height:14px;border-radius:50%;background:var(--lime);margin-left:-2px;vertical-align:0.18em; }
.flow-hub .tagline {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet);
}

.flow-svg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.s04 .closing {
  margin-top: var(--s-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  text-align: center;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.s04 .closing em { font-style: normal; color: var(--violet); }

/* ============================================================
   SLIDE 05 — Inventory module (split, list + UI mock)
   ============================================================ */
.s05 .split, .s06 .split {
  display: grid;
  gap: 56px;
  flex: 1;
  align-items: stretch;
  margin-top: 8px;
}
.s05 .split { grid-template-columns: 0.85fr 1.15fr; }
.s06 .split { grid-template-columns: 1.15fr 0.85fr; }

.module-h {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--violet);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.module-h::before {
  content: '';
  width: 3px;
  height: 24px;
  background: var(--violet);
}
.module-ttl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 16px;
  text-wrap: balance;
}
.check-list {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.check-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: start;
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.45;
  color: var(--ink);
}
.check-row .ck {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--violet);
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.check-row .ck svg { width: 14px; height: 14px; stroke-width: 2.5; }
.outcome-strip {
  margin-top: auto;
  background: var(--ink);
  color: var(--paper);
  border-radius: 14px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.outcome-strip .o-lbl {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
  white-space: nowrap;
  padding-right: 14px;
  border-right: 1px solid #2e2e2e;
}

/* UI mock for slide 5 */
.ui-mock {
  background: var(--bg-elev);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-float);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: start;
  position: relative;
}
.ui-mock .ui-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}
.ui-mock .ui-head .crumb {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--n-700);
  letter-spacing: 0.06em;
}
.ui-mock .ui-head .pill-sm {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(31, 199, 154, 0.12);
  color: var(--teal);
  border: 1px solid rgba(31, 199, 154, 0.3);
  white-space: nowrap;
}
.ui-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 0.8fr 0.8fr;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  padding: 10px 4px;
  border-bottom: 1px solid var(--hairline);
  align-items: center;
}
.ui-row.head {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--n-700);
  padding: 4px;
}
.ui-row .name { font-family: var(--font-body); font-weight: 500; font-size: 14px; }
.tag-sm {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--n-200);
  white-space: nowrap;
}
.tag-sm.ok { background: rgba(31,199,154,0.12); color: var(--teal); }
.tag-sm.warn { background: rgba(245,183,61,0.15); color: #b8821e; }
.tag-sm.alert { background: rgba(255,107,61,0.12); color: var(--coral); }
.ui-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.ui-stat {
  background: var(--bg-muted);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ui-stat .lbl {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--n-700);
}
.ui-stat .val {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ui-stat .delta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--teal);
}
.ui-stat .delta.down { color: var(--coral); }
.fefo-badge {
  position: absolute;
  top: -12px;
  right: 24px;
  background: var(--lime);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
}

/* ============================================================
   SLIDE 06 — Payments / Receivables (UI mock left, list right)
   ============================================================ */
.aging-mock {
  background: var(--bg-elev);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-float);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.aging-mock .h {
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}
.aging-mock .h .ttl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.aging-mock .h .sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--n-700);
  letter-spacing: 0.04em;
}
.aging-row {
  display: grid;
  grid-template-columns: 100px 1fr 120px;
  gap: 16px;
  align-items: center;
}
.aging-row .bucket {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
}
.aging-row .bar {
  height: 18px;
  background: var(--n-200);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.aging-row .bar .fill {
  height: 100%;
  border-radius: 4px;
}
.aging-row .bar .fill.ok    { background: var(--teal); }
.aging-row .bar .fill.warn  { background: var(--amber); }
.aging-row .bar .fill.alert { background: var(--coral); }
.aging-row .amt {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.aging-mock .summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.aging-mock .summary .blk { display: flex; flex-direction: column; gap: 2px; }
.aging-mock .summary .lbl {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--n-700); letter-spacing: 0.08em; text-transform: uppercase;
}
.aging-mock .summary .val {
  font-family: var(--font-display); font-weight: 800;
  font-size: 28px; line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   SLIDE 07 — Pharma Proof (dark, ambient)
   ============================================================ */
.s07 .frame {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.s07 .quote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 56px;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--paper);
  max-width: 1500px;
  text-wrap: balance;
}
.s07 .quote em { font-style: normal; color: var(--lime); }
.s07 .attrib {
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--n-500);
}
.s07 .proof-row {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.proof-tile {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-lg);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 220px;
}
.proof-tile .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 88px;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.proof-tile .num.sm {
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.proof-tile.lime .num { color: var(--lime); }
.proof-tile .lbl {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--n-500);
}
.proof-tile .body-text {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: #BFBFBF;
  margin-top: auto;
}

/* ============================================================
   SLIDE 08 — Pilot CTA (light)
   ============================================================ */
.s08 .ttl {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 84px;
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 1500px;
  text-wrap: balance;
}
.s08 .ttl em { font-style: normal; color: var(--violet); }
.s08 .sub {
  margin-top: 24px;
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1.45;
  color: var(--n-700);
  max-width: 980px;
}
.s08 .body {
  margin-top: var(--s-7);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 80px;
  align-items: start;
}
.numlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.numlist li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}
.numlist .n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--violet);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.numlist .t {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.4;
  color: var(--ink);
}
.numlist .t strong { font-weight: 600; }

.cta-block {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-xl);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cta-block .lbl {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
}
.cta-block .cta-h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.cta-block .cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
}
.cta-block .btn-lime {
  background: var(--lime);
  color: var(--ink);
  border: none;
  border-radius: 999px;
  padding: 20px 28px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.cta-block .cta-note {
  font-family: var(--font-body);
  font-size: 14px;
  color: #BFBFBF;
}
.signoff {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-family: var(--font-display);
  font-size: 18px;
  font-style: italic;
  color: #BFBFBF;
  font-weight: 400;
}

/* ============================================================
   SLIDE 05 (was 06) — Payments / Receivables — additions
   Add a second mini-card stack on the right column under the list.
   ============================================================ */
.payment-flow {
  margin-top: 18px;
  background: var(--bg-elev);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 20px 22px;
}
.payment-flow .pf-h {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--n-700);
  margin-bottom: 14px;
}
.payment-flow .pf-rail {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  align-items: stretch;
}
.payment-flow .pf-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  position: relative;
  padding: 0 6px;
}
.payment-flow .pf-step .ico {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(124, 92, 252, 0.10);
  color: var(--violet);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.payment-flow .pf-step .ico svg { width: 22px; height: 22px; stroke-width: 2; }
.payment-flow .pf-step.is-final .ico {
  background: var(--lime);
  color: var(--ink);
}
.payment-flow .pf-step .stp {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--n-500);
}
.payment-flow .pf-step .ttl {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.2;
}
.payment-flow .pf-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 22px;
  right: -10px;
  width: 20px;
  height: 2px;
  background: var(--hairline);
}
.payment-flow .pf-step:not(:last-child) .ico {
  z-index: 1;
}
.cash-pulse {
  margin-top: var(--s-4);
  background: var(--bg-elev);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: center;
}
.cash-pulse .cp-h {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--n-700);
  margin-bottom: 6px;
}
.cash-pulse .cp-val {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cash-pulse .cp-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--teal);
  margin-top: 4px;
}
.cash-pulse svg.sparkline { width: 100%; height: 70px; }
.cash-pulse .donut {
  width: 96px;
  height: 96px;
  margin-left: auto;
}
.cash-pulse .donut-legend {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--n-700);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cash-pulse .donut-legend .row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cash-pulse .donut-legend .sw {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* ============================================================
   CASE STUDY — Meri Pharmacy (light, metric grid)
   ============================================================ */
.s-case .head {
  margin-top: 4px;
}
.s-case .ttl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--ink);
  max-width: 1500px;
  text-wrap: balance;
}
.s-case .ttl em { font-style: normal; color: var(--violet); }
.s-case .sub {
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.4;
  color: var(--n-700);
  max-width: 1100px;
}
.metric-grid {
  margin-top: var(--s-6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  flex: 1;
}
.metric-card {
  background: var(--bg-elev);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 16px;
  align-items: start;
}
.metric-card .badge {
  grid-row: 1 / 4;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--n-200);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--n-700);
  margin-top: 4px;
}
.metric-card .badge svg { width: 24px; height: 24px; stroke-width: 2; }
.metric-card.up   .badge { background: rgba(31, 199, 154, 0.14); color: var(--teal); }
.metric-card.down .badge { background: rgba(255, 107, 61, 0.14); color: var(--coral); }
.metric-card.ok   .badge { background: rgba(124, 92, 252, 0.14); color: var(--violet); }
.metric-card .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--violet);
  font-variant-numeric: tabular-nums;
}
.metric-card .lbl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: 6px;
  line-height: 1.2;
}
.metric-card .desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--n-700);
  margin-top: 8px;
}
.case-quote {
  margin-top: var(--s-5);
  padding: 20px 28px;
  border-left: 3px solid var(--violet);
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--ink);
  text-wrap: balance;
  max-width: 1700px;
}

/* ============================================================
   HOW WE DID IT — phased rollout timeline (light)
   ============================================================ */
.s-rollout .ttl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 56px;
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
}
.s-rollout .ttl em { font-style: normal; color: var(--violet); }
.s-rollout .sub {
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.45;
  color: var(--n-700);
  max-width: 1100px;
}
.phase-rail {
  margin-top: var(--s-7);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.phase-rail::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 32px;
  height: 2px;
  background: var(--hairline);
  z-index: 0;
}
.phase {
  position: relative;
  padding: 0 24px 0 0;
  z-index: 1;
}
.phase .dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--violet);
  border: 4px solid var(--paper);
  margin-top: 23px;
  box-shadow: 0 0 0 2px var(--violet);
  position: relative;
  z-index: 2;
}
.phase.is-final .dot { background: var(--lime); box-shadow: 0 0 0 2px var(--lime); }
.phase .pwk {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--n-700);
}
.phase .ptl {
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.phase ul {
  list-style: none;
  padding: 0;
  margin: 14px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.phase ul li {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
  color: var(--n-700);
  padding-left: 18px;
  position: relative;
}
.phase ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  background: var(--violet);
  border-radius: 50%;
}
.rollout-outcome {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-lg);
  padding: 24px 32px;
}
.rollout-outcome .ro-lbl {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
}
.rollout-outcome .ro-line {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-top: 4px;
}
.rollout-outcome .ro-stats {
  display: flex;
  gap: 28px;
}
.rollout-outcome .ro-stats .st .v {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 36px;
  line-height: 1;
  color: var(--lime);
  letter-spacing: -0.02em;
}
.rollout-outcome .ro-stats .st .k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #BFBFBF;
  margin-top: 4px;
}

/* ============================================================
   LET'S CONNECT — dark, ambient, contact slide
   ============================================================ */
.s-connect .frame {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 80px;
  height: 100%;
  align-items: stretch;
}
.s-connect .lhs {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 40px;
  padding-bottom: 40px;
}
.s-connect .eb {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: var(--s-5);
}
.s-connect .eb::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(198, 242, 78, 0.15);
}
.s-connect .ttl {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 144px;
  line-height: 0.94;
  letter-spacing: -0.04em;
  color: var(--paper);
  text-wrap: balance;
}
.s-connect .ttl em { font-style: normal; color: var(--lime); }
.s-connect .sub {
  margin-top: 28px;
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1.5;
  color: #BFBFBF;
  max-width: 760px;
}
.s-connect .signoff-line {
  margin-top: 32px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  color: var(--n-500);
}

.contact-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-self: center;
}
.contact-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  display: flex;
  gap: 18px;
  align-items: center;
  transition: background 200ms ease, border-color 200ms ease;
}
.contact-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(198, 242, 78, 0.30);
}
.contact-card .ci {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(198, 242, 78, 0.10);
  color: var(--lime);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-card .ci svg { width: 22px; height: 22px; stroke-width: 2; }
.contact-card .cb {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.contact-card .cb .k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--n-500);
}
.contact-card .cb .v {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--paper);
}

/* ============================================================
   WHERE ONE HELPS UDL — mapping table (light)
   ============================================================ */
.s-map .ttl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 56px;
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
  max-width: 1500px;
}
.s-map .ttl em { font-style: normal; color: var(--violet); }
.s-map .sub {
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.45;
  color: var(--n-700);
  max-width: 1100px;
}
.map-grid {
  margin-top: var(--s-6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  flex: 1;
}
.map-card {
  background: var(--bg-elev);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.map-card .mh {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}
.map-card .mh .mi {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(124, 92, 252, 0.10);
  color: var(--violet);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.map-card .mh .mi svg { width: 22px; height: 22px; stroke-width: 2; }
.map-card .mh .mk {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.15;
}
.map-card .mv {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--n-700);
}
.map-card .mv strong {
  font-weight: 600;
  color: var(--ink);
}

/* ============================================================
   WHERE ONE HELPS UDL — mapping table (light) — END
   ============================================================ */

/* ============================================================
   QA — defensive layout fixes (v5 cleanup)
   ============================================================ */

/* Pharma Proof — 5-column grid needs smaller hero number font */
.s07 .proof-row .proof-tile .num {
  font-size: 64px;
}
.s07 .proof-row .proof-tile .num.sm {
  font-size: 32px;
}
.s07 .proof-row .proof-tile .body-text {
  font-size: 13px;
  line-height: 1.45;
}

/* Case Study — slightly tighten descriptions so 6 cards never overflow */
.s-case .metric-card .num { font-size: 56px; }
.s-case .metric-card .lbl { font-size: 18px; }
.s-case .metric-card .desc {
  font-size: 13px;
  line-height: 1.4;
}

/* Where ONE helps UDL — tighten mapping descriptions */
.s-map .map-card .mv { font-size: 15px; line-height: 1.45; }
.s-map .map-card .mh .mk { font-size: 20px; }

/* Rollout phases — keep concise */
.s-rollout .phase .ptl { font-size: 22px; }
.s-rollout .phase ul li { font-size: 14px; line-height: 1.4; }

/* Slide 6 module title — smaller to leave room for checklist */
.s06 .module-ttl { font-size: 42px; line-height: 1.05; }

/* small icon helper */
i[data-lucide] { display: inline-flex; }

deck-stage:not(:defined) { visibility: hidden; }