/* ==== Y Soft / SAFEQ Cloud — TechU Virtual deck ==== */

@font-face {
  font-family: "YSoft";
  src: url("fonts/YSoft-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "YSoft";
  src: url("fonts/YSoft-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@import url("https://rsms.me/inter/inter.css");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&display=swap");

:root {
  --orange: #FF6600;
  --orange-ink: #E55A00;
  --orange-wash: #FFF1E6;
  --turq: #236f87;
  --turq-ink: #1a5a70;
  --turq-wash: rgba(35,111,135,0.14);
  --grey-circle: #B2B2B2;
  --off-white: #F2F2F2;
  --grey-11: #53565A;
  --grey-7: #97999B;
  --ink: #000000;
  --border: #E5E5E5;

  --font-display: "YSoft", "Arial Black", Impact, sans-serif;
  --font-sans: "Inter", "Lab Grotesque", Arial, system-ui, sans-serif;

  /* ── Theme tokens (LIGHT default) ───────────────────────────────────
     Used by slides / components for theme-aware colors. Toggle to dark
     by setting data-theme="dark" on <html> or <body>. */
  --t-bg:           #ffffff;        /* slide / page background */
  --t-bg-soft:      #fafafa;        /* secondary surface */
  --t-bg-wash:      #f2f2f2;        /* wash slides */
  --t-card:         #ffffff;        /* card background */
  --t-card-soft:    #fafafa;        /* secondary card */
  --t-text:         #000000;        /* primary text */
  --t-text-soft:    #53565A;        /* secondary text */
  --t-text-mute:    #97999B;        /* tertiary / mute */
  --t-border:       #e5e7eb;        /* card / divider border */
  --t-shadow:       0 10px 40px rgba(15,23,42,0.05);
  --t-shadow-soft:  0 4px 16px rgba(15,23,42,0.04);
  --t-orange:       #FF6600;        /* accent stays brand */
  --t-green:        #16a04a;        /* success */
  --t-yellow:       #E6A93B;        /* caution */
  --t-red:          #E55B5B;        /* danger */
}

/* ── Theme tokens (DARK override) ─────────────────────────────────────
   Triggered when data-theme="dark" is set on <html>. The whole deck
   inherits these tokens. */
html[data-theme="dark"] {
  --t-bg:           #081b23;
  --t-bg-soft:      #0d2e3a;
  --t-bg-wash:      #0d2e3a;
  --t-card:         #0d2e3a;
  --t-card-soft:    #124559;
  --t-text:         #eef3f5;
  --t-text-soft:    #b7c7cd;
  --t-text-mute:    #82989f;
  --t-border:       rgba(255,255,255,0.12);
  --t-shadow:       0 14px 50px rgba(0,0,0,0.6);
  --t-shadow-soft:  0 4px 18px rgba(0,0,0,0.45);
  --t-green:        #3ED57C;
  --t-yellow:       #F0B850;
  --t-red:          #FF6F6F;

  /* Redefine legacy tokens so inline style="color: var(--grey-11)" etc.
     auto-flip in dark mode without needing per-slide overrides */
  --grey-11:        #b7c7cd;
  --grey-7:         #82989f;
  --border:         rgba(255,255,255,0.12);
  --off-white:      #0d2e3a;
  --orange-wash:    rgba(255,102,0,0.16);
}

/* Deck-stage slides are 1920x1080 */
.slide {
  background: var(--t-bg);
  font-family: var(--font-sans);
  color: var(--t-text);
  position: relative;
  overflow: hidden;
}

/* Stage background follows theme so the letterbox area matches the slide */
html[data-theme="dark"] body,
html[data-theme="dark"] deck-stage { background: var(--t-bg) !important; }

html, body { overscroll-behavior-y: none; }

/* ────────────────────────────────────────────────────────────────────
   Dark-mode overrides — broad strokes covering the deck.
   Slide-specific overrides live with each slide's CSS further down.
   ──────────────────────────────────────────────────────────────────── */
/* Apply dark bg to standard slides only — preserve full-bleed orange "moment" slides */
html[data-theme="dark"] .slide:not(.s-intro):not(.s-outro):not(.slide--obs-opener),
html[data-theme="dark"] .slide--wash { background: var(--t-bg); color: var(--t-text); }
/* Orange-bleed slides keep their brand background in BOTH themes */
html[data-theme="dark"] .s-intro,
html[data-theme="dark"] .s-outro { background: linear-gradient(160deg, #124559 0%, #0d2e3a 55%, #081b23 100%); color: #fff; }

/* Why SAFEQ Cloud wheel — satellite labels + headline need light treatment */
html[data-theme="dark"] .s13-why { color: var(--t-text); }
html[data-theme="dark"] .s13-label { color: var(--t-text); }
html[data-theme="dark"] .s13-label small { color: var(--t-text-soft); }

/* Black-ink logos go white in dark mode (logo SVG is a pure-black silhouette) */
html[data-theme="dark"] .logo-tl,
html[data-theme="dark"] .s13-why-logo,
html[data-theme="dark"] .s6-safeq-logo { filter: brightness(0) invert(1); }

/* Feature Parity (slide 7) — secondary cards use inline background:#fff,
   needs !important to flip in dark mode */
html[data-theme="dark"] section[data-label="Feature Parity"] .stagger > .fade-up {
  background: var(--t-card) !important;
  border-color: var(--t-border) !important;
}

/* Unpatched Servers (slide 12) — donut chart has hard-coded #000 / #F2F2F2 strokes
   and a #000 fill text that don't read on dark. Override via attribute selectors. */
html[data-theme="dark"] section[data-label="Unpatched Servers"] svg circle[stroke="#F2F2F2"] { stroke: rgba(255,255,255,0.10); }
html[data-theme="dark"] section[data-label="Unpatched Servers"] svg circle[stroke="#000000"] { stroke: #b6c0cb; }
html[data-theme="dark"] section[data-label="Unpatched Servers"] svg text[fill="#000"] { fill: var(--t-text); }
html[data-theme="dark"] section[data-label="Unpatched Servers"] svg text[fill="#97999B"] { fill: var(--t-text-mute); }
/* Legend swatch for the black segment too */
html[data-theme="dark"] section[data-label="Unpatched Servers"] span[style*="background: #000"] { background: #b6c0cb !important; }

/* Eliminate Complexity (slide 6) — s6-frame hardcodes a light grey bg */
html[data-theme="dark"] .s6-frame { background: var(--t-bg) !important; }

/* Cloud-hosted cost slide — tighten table + cards to fit 1080 canvas */
.slide--cost .data-table th,
.slide--cost .data-table td { padding: 10px 14px; font-size: 20px; }
.slide--cost .data-table th { font-size: 16px; padding: 8px 14px; }
.slide--cost .data-table tr.total td { font-size: 22px; }
.slide--cost .data-table tr td span { font-size: 14px !important; }

/* Security Board-Level (slide 11) — stat-big divs use inline color: var(--ink).
   Override at the slide level. */
html[data-theme="dark"] section[data-label="Security Board-Level"] .stat-big { color: var(--t-text) !important; }
/* The grid separators border-top/bottom inline use var(--ink); flip to muted border */
html[data-theme="dark"] section[data-label="Security Board-Level"] .stagger[style*="border-top"] {
  border-top-color: var(--t-border) !important;
  border-bottom-color: var(--t-border) !important;
}

/* Three Reasons (slide 2) — "03" badge uses inline background: var(--ink),
   which disappears against a dark slide background. Give it real contrast. */
html[data-theme="dark"] section[data-label="Three Reasons"] div[style*="background: var(--ink)"] {
  background: var(--t-card-soft) !important;
  border: 2px solid var(--t-border);
}

/* Scale Baseline (slide 19) — same inline var(--ink) issue as Security Board-Level:
   divider rules and the small "+"/"×" suffixes are invisible on a dark background. */
html[data-theme="dark"] section[data-label="Scale Baseline"] .stagger[style*="border-top"] {
  border-top-color: var(--t-border) !important;
  border-bottom-color: var(--t-border) !important;
}
html[data-theme="dark"] section[data-label="Scale Baseline"] span[style*="color: var(--ink)"] {
  color: var(--t-text) !important;
}

html[data-theme="dark"] .slide .display,
html[data-theme="dark"] .slide h1,
html[data-theme="dark"] .slide h2,
html[data-theme="dark"] .slide h3 { color: var(--t-text); }
html[data-theme="dark"] .slide .perex,
html[data-theme="dark"] .slide .body-text { color: var(--t-text-soft); }
html[data-theme="dark"] .eyebrow { color: var(--orange); }
html[data-theme="dark"] .card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .pillar { background: var(--t-card); border-color: var(--t-border); color: var(--t-text); }
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .pillar-body { color: var(--t-text-soft); }

/* Observability section — re-theme cockpit, tiles, lifecycle, drilldown */
html[data-theme="dark"] .slide--obs-dark { background: linear-gradient(180deg, #0b0f14 0%, #11171f 100%); color: var(--t-text); }
html[data-theme="dark"] .slide--obs-light { background: linear-gradient(180deg, #0b0f14 0%, #11171f 100%); color: var(--t-text); }
html[data-theme="dark"] .slide--obs-light .s-obs-title { color: var(--t-text); }
html[data-theme="dark"] .slide--obs-light .s-obs-sub,
html[data-theme="dark"] .slide--obs-dark .s-obs-sub { color: var(--t-text-soft); }
html[data-theme="dark"] .sa-cockpit { background: var(--t-card); border-color: var(--t-border); box-shadow: var(--t-shadow); }
html[data-theme="dark"] .sa-counter { background: var(--t-card-soft); border-color: var(--t-border); }
html[data-theme="dark"] .sa-counter-lbl,
html[data-theme="dark"] .sa-pulse-label,
html[data-theme="dark"] .sa-avail-label { color: var(--t-text-mute); }
html[data-theme="dark"] .sa-avail-target { color: var(--t-text-mute); }
html[data-theme="dark"] .sa-avail-target strong { color: var(--t-text-soft); }
html[data-theme="dark"] .sa-avail-row { color: var(--t-green); }
html[data-theme="dark"] .sa-map { background: var(--t-card-soft); border-color: var(--t-border); }
html[data-theme="dark"] .sa-map-base { filter: invert(1); opacity: 0.55; }
html[data-theme="dark"] .sa-ping-label { fill: var(--t-text); }
html[data-theme="dark"] .sa-ping-leader { stroke: var(--t-text-mute); }
html[data-theme="dark"] .sa-ping-fill { fill: var(--t-green); }
html[data-theme="dark"] .sa-ping-ring { stroke: var(--t-green); }
html[data-theme="dark"] .sa-pillar { background: var(--t-card); border-color: var(--t-border); box-shadow: var(--t-shadow-soft); }
html[data-theme="dark"] .sa-pillar-title { color: var(--t-text); }
html[data-theme="dark"] .sa-pillar-text { color: var(--t-text-soft); }
html[data-theme="dark"] .s-obs-footer { border-top-color: var(--t-border); }
html[data-theme="dark"] .s-obs-foot-trail { color: var(--t-text-soft); }
html[data-theme="dark"] .sa-map-caption { color: var(--t-text-mute); }

/* Partner slide */
html[data-theme="dark"] .sb-tile { background: var(--t-card); border-color: var(--t-border); }
html[data-theme="dark"] .sb-tile-headline { color: var(--t-text); }
html[data-theme="dark"] .sb-tile-body { color: var(--t-text-soft); }
html[data-theme="dark"] .sb-tile-cue { color: var(--t-text-mute); border-top-color: var(--t-border); }
html[data-theme="dark"] .sb-life-label { color: var(--t-text-mute); }
html[data-theme="dark"] .sb-life-ribbon { background: var(--t-card); border-color: var(--t-border); }
html[data-theme="dark"] .sb-life-name { color: var(--t-text); }
html[data-theme="dark"] .sb-beyond-list li { color: var(--t-text); }
html[data-theme="dark"] .sb-dd-card { background: var(--t-card); border-color: var(--t-border); }
html[data-theme="dark"] .sb-dd-header { border-bottom-color: var(--t-border); }
html[data-theme="dark"] .sb-dd-label { color: var(--t-text); }
html[data-theme="dark"] .sb-dd-region { color: var(--t-text-mute); }
html[data-theme="dark"] .sb-dd-row { color: var(--t-text-soft); }
html[data-theme="dark"] .sb-dd-val { color: var(--t-text); }
html[data-theme="dark"] .sb-dd-good { color: var(--t-green); }
html[data-theme="dark"] .sb-dd-badge { color: var(--t-green); }

/* Customer slide */
html[data-theme="dark"] .sc-hero { background: var(--t-card); border-color: var(--t-border); box-shadow: var(--t-shadow); }
html[data-theme="dark"] .sc-hero-stat { color: var(--t-green); }
html[data-theme="dark"] .sc-hero-label { color: var(--t-text-soft); }
html[data-theme="dark"] .sc-flow { background: var(--t-card); border-color: var(--t-border); box-shadow: var(--t-shadow); }
html[data-theme="dark"] .sc-flow-title { color: var(--t-text); }
html[data-theme="dark"] .sc-flow-sub { color: var(--t-text-mute); }
html[data-theme="dark"] .sc-step-label { color: var(--t-text); }
html[data-theme="dark"] .sc-step-uptime { color: var(--t-green); }
html[data-theme="dark"] .sc-step-check { color: var(--t-green); border-color: var(--t-green); background: rgba(62,213,124,0.12); }
html[data-theme="dark"] .sc-badge { background: var(--t-card); border-color: var(--t-border); }
html[data-theme="dark"] .sc-badge-text { color: var(--t-text-soft); }
html[data-theme="dark"] .sc-badge-text strong { color: var(--t-text); }

/* Standard padded frame */
.frame {
  position: absolute;
  inset: 0;
  padding: 150px 110px 96px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Headlines — YSoft, Bold, UPPERCASE, tight leading */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--t-text);
  margin: 0;
}
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 28px;
}
.perex {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.35;
  color: var(--t-text-soft);
  margin: 0;
  max-width: 1100px;
}
.body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.5;
  color: var(--t-text-soft);
  margin: 0;
}
.body-lg {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.45;
  color: var(--t-text-soft);
}

/* Title sizes */
.h-title    { font-size: 96px; }
.h-section  { font-size: 72px; }
.h-display  { font-size: 168px; }

/* Small caption */
.caption {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t-text-mute);
}

/* Slide chrome: logo TL, footer BL/BR */
.logo-tl {
  position: absolute;
  top: 56px; left: 110px;
  height: 52px;
  z-index: 5;
}
.logo-tl.white { filter: brightness(0) invert(1); opacity: 0.95; }

/* Top-right co-brand logo slot */
.logo-tr {
  position: absolute;
  top: 40px; right: 96px;
  height: 96px;
  z-index: 5;
  pointer-events: none;
}
.logo-tr img { position: absolute; top: 0; right: 0; height: 96px; }
.footer {
  position: absolute;
  left: 110px; right: 110px;
  bottom: 42px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  color: var(--t-text-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 5;
}
.footer.on-dark { color: rgba(255,255,255,0.6); }

/* Brand circle — signature motif */
.circle {
  position: absolute;
  border-radius: 50%;
  background: var(--orange);
}
.circle--turq { background: var(--turq); }
.circle--grey { background: var(--grey-circle); }

/* Number pill (for small stat tiles) */
.pill-num {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.95;
  color: var(--orange);
}

/* Dark slide variant */
.slide--dark { background: var(--ink); color: #fff; }
.slide--dark .display { color: #fff; }
.slide--dark .body { color: rgba(255,255,255,0.85); }
.slide--dark .perex { color: rgba(255,255,255,0.75); }
.slide--dark .eyebrow { color: var(--orange); }

/* Off-white slide */
.slide--wash { background: var(--t-bg-wash); }

/* Stat display (large number + caption) */
.stat-big {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.92;
  color: var(--t-text);
  font-size: 180px;
  letter-spacing: -0.02em;
}
.stat-big .unit { font-size: 0.55em; color: var(--orange); margin-left: 8px; }
.stat-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 26px;
  color: var(--t-text-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 16px;
}

/* Card - minimal, no shadow */
.card {
  background: #fff;
  border: 1px solid var(--border);
  padding: 40px;
  border-radius: 4px;
}
.card--wash { background: var(--off-white); border: 0; }
.card--orange { background: var(--orange); color: #fff; border: 0; }
.card--orange .card-title { color: #fff; }
.card--ink { background: var(--ink); color: #fff; border: 0; }
.card-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 32px;
  line-height: 1;
  color: var(--t-text);
  margin: 0 0 16px;
  letter-spacing: 0.02em;
}
.card-body {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 1.45;
  color: var(--t-text-soft);
  margin: 0;
}
.card--orange .card-body { color: rgba(255,255,255,0.9); }

/* Sentence-case title style (matches slide 6's perex treatment) */
.tr-title {
  font-family: var(--font-sans);
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  font-size: 30px;
  line-height: 1.3;
  color: var(--t-text);
  margin: 0 0 14px;
}

/* Step index (used for numbering) */
.step-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  color: var(--orange);
  letter-spacing: 0;
}

/* Vertical divider */
.vrule { width: 1px; background: var(--border); align-self: stretch; }

/* Full-bleed image helper */
.bleed-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bleed-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0) 75%);
}

/* Agenda row */
.agenda-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: baseline;
  gap: 36px;
  padding: 28px 0;
  border-top: 1px solid var(--border);
}
.agenda-row:last-child { border-bottom: 1px solid var(--border); }
.agenda-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  color: var(--orange);
}
.agenda-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 42px;
  letter-spacing: 0;
  color: var(--t-text);
}
.agenda-meta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 20px;
  color: var(--t-text-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Pillar card (3 across) */
.pillars { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 36px; }
.pillar {
  background: #fff;
  border: 1px solid var(--border);
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pillar-num {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  margin-bottom: 14px;
}
.pillar-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 34px;
  color: var(--t-text);
  letter-spacing: 0;
  line-height: 1;
}
.pillar ul { margin: 4px 0 0; padding-left: 0; list-style: none; }
.pillar ul li {
  font-family: var(--font-sans);
  font-size: 22px;
  color: var(--t-text-soft);
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 16px;
  line-height: 1.35;
}
.pillar ul li::before {
  content: "";
  flex: 0 0 auto;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--orange);
}

/* Bare-inline bullet lists reused across several card slides (Three
   Deployment Options, Windows Protected Print, etc.): a <span> dot
   absolutely-positioned at a fixed "top" px value inside a relatively
   positioned <li>. That fixed offset only lines up with the text by
   coincidence, so it visibly drifts whenever line-height/font metrics
   differ. Force the same dot+text flex centering used for .pillar ul li,
   for any list item built with that pattern, regardless of its exact
   padding/top values. */
li[style*="position: relative"]:has(> span[style*="border-radius:50%"]) {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding-left: 0 !important;
}
li[style*="position: relative"] > span[style*="border-radius:50%"] {
  position: static !important;
  top: auto !important;
  left: auto !important;
  flex: 0 0 auto !important;
}

/* Table */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
}
.data-table th, .data-table td {
  padding: 16px 14px;
  text-align: left;
  font-size: 22px;
  border-bottom: 1px solid var(--border);
}
.data-table th {
  font-weight: 600;
  color: var(--t-text-mute);
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--ink);
}
.data-table tbody tr:last-child td { border-bottom: 2px solid var(--ink); }
.data-table td.num { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--t-text); white-space: nowrap; }
.data-table tr.total td {
  font-weight: 700;
  font-size: 24px;
  background: var(--orange-wash);
}
.data-table tr.total td.num { color: var(--orange); }

/* Page number + section label strip */
.page-no {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  color: var(--t-text-mute);
  letter-spacing: 0.1em;
}



/* =========================================================
   Slide element reveal animations
   Elements start hidden; the active slide animates them in.
   Each time a slide becomes active, the attribute is added,
   so the animation re-runs from the start — no JS required.
   ========================================================= */

@keyframes deck-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@keyframes deck-zoom {
  from { opacity: 0; transform: scale(0.86); }
  to   { opacity: 1; transform: none; }
}

@keyframes deck-drift {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: none; }
}

/* Rest state for every animatable element — invisible until the slide
   it lives in gets [data-deck-active], at which point the rules below
   attach an animation and fill it forwards via `both`. */
[data-deck-slide] .eyebrow,
[data-deck-slide] .display,
[data-deck-slide] .perex,
[data-deck-slide] .body,
[data-deck-slide] .body-lg,
[data-deck-slide] .caption,
[data-deck-slide] .stat-big,
[data-deck-slide] .stat-label,
[data-deck-slide] .card,
[data-deck-slide] .pillar,
[data-deck-slide] .agenda-row,
[data-deck-slide] .data-table,
[data-deck-slide] .circle,
[data-deck-slide] .bleed-img,
[data-deck-slide] svg,
[data-deck-slide] img.logo-tl,
[data-deck-slide] .logo-tr {
  opacity: 0;
}

/* Typography reveal — staggered rise-up */
[data-deck-active] .eyebrow   { animation: deck-rise 520ms cubic-bezier(.22,.9,.25,1)  80ms both; }
[data-deck-active] .display   { animation: deck-rise 640ms cubic-bezier(.22,.9,.25,1) 160ms both; }
[data-deck-active] .perex     { animation: deck-rise 520ms cubic-bezier(.22,.9,.25,1) 280ms both; }
[data-deck-active] .body,
[data-deck-active] .body-lg   { animation: deck-rise 520ms cubic-bezier(.22,.9,.25,1) 340ms both; }
[data-deck-active] .caption   { animation: deck-rise 420ms cubic-bezier(.22,.9,.25,1) 260ms both; }

/* Stat numbers — big zoom for drama */
[data-deck-active] .stat-big     { animation: deck-zoom 640ms cubic-bezier(.22,.9,.25,1) 380ms both; }
[data-deck-active] .stat-label   { animation: deck-rise 420ms cubic-bezier(.22,.9,.25,1) 480ms both; }

/* Chrome — subtle, quick */
[data-deck-active] .logo-tr,
[data-deck-active] img.logo-tl   { animation: deck-rise 420ms ease-out 40ms both; }

/* Background motifs — soft zoom in behind the content */
[data-deck-active] .circle       { animation: deck-zoom 900ms cubic-bezier(.22,.9,.25,1) 0ms both; }
[data-deck-active] .bleed-img    { animation: deck-rise 700ms ease-out 0ms both; transform-origin: center; }

/* SVG charts/diagrams — fade-slide in after title */
[data-deck-active] svg           { animation: deck-rise 700ms cubic-bezier(.22,.9,.25,1) 480ms both; }

/* Pillar grid — stagger across 3 columns */
[data-deck-active] .pillar:nth-child(1) { animation: deck-rise 560ms cubic-bezier(.22,.9,.25,1) 360ms both; }
[data-deck-active] .pillar:nth-child(2) { animation: deck-rise 560ms cubic-bezier(.22,.9,.25,1) 460ms both; }
[data-deck-active] .pillar:nth-child(3) { animation: deck-rise 560ms cubic-bezier(.22,.9,.25,1) 560ms both; }

/* Cards — stagger up to 4 */
[data-deck-active] .card:nth-child(1) { animation: deck-rise 520ms cubic-bezier(.22,.9,.25,1) 340ms both; }
[data-deck-active] .card:nth-child(2) { animation: deck-rise 520ms cubic-bezier(.22,.9,.25,1) 420ms both; }
[data-deck-active] .card:nth-child(3) { animation: deck-rise 520ms cubic-bezier(.22,.9,.25,1) 500ms both; }
[data-deck-active] .card:nth-child(4) { animation: deck-rise 520ms cubic-bezier(.22,.9,.25,1) 580ms both; }

/* Agenda rows — stagger with a horizontal drift */
[data-deck-active] .agenda-row:nth-child(1) { animation: deck-drift 460ms cubic-bezier(.22,.9,.25,1) 260ms both; }
[data-deck-active] .agenda-row:nth-child(2) { animation: deck-drift 460ms cubic-bezier(.22,.9,.25,1) 340ms both; }
[data-deck-active] .agenda-row:nth-child(3) { animation: deck-drift 460ms cubic-bezier(.22,.9,.25,1) 420ms both; }
[data-deck-active] .agenda-row:nth-child(4) { animation: deck-drift 460ms cubic-bezier(.22,.9,.25,1) 500ms both; }
[data-deck-active] .agenda-row:nth-child(5) { animation: deck-drift 460ms cubic-bezier(.22,.9,.25,1) 580ms both; }

/* Data tables — fade in as a unit */
[data-deck-active] .data-table { animation: deck-rise 620ms cubic-bezier(.22,.9,.25,1) 360ms both; }

/* Respect user preference — no animations, no hidden starting state */
@media (prefers-reduced-motion: reduce) {
  [data-deck-slide] .eyebrow,
  [data-deck-slide] .display,
  [data-deck-slide] .perex,
  [data-deck-slide] .body,
  [data-deck-slide] .body-lg,
  [data-deck-slide] .caption,
  [data-deck-slide] .stat-big,
  [data-deck-slide] .stat-label,
  [data-deck-slide] .card,
  [data-deck-slide] .pillar,
  [data-deck-slide] .agenda-row,
  [data-deck-slide] .data-table,
  [data-deck-slide] .circle,
  [data-deck-slide] .bleed-img,
  [data-deck-slide] svg,
  [data-deck-slide] img.logo-tl,
  [data-deck-slide] .logo-tr {
    opacity: 1;
    animation: none !important;
  }
}

/* =========================================================================
   LOOP MODE — exhibition signage additions
   ========================================================================= */

/* Hide all standard deck chrome (page numbers, chapter rail, theme toggle, fullscreen button) */
deck-stage::part(footer),
deck-stage::part(chapter-rail),
deck-stage::part(theme-toggle),
deck-stage::part(fullscreen-button),
deck-stage::part(reset-button),
deck-stage::part(prev-button),
deck-stage::part(next-button) {
  display: none !important;
}

/* In-slide footers (if any) — hide for loop mode */
.slide .footer,
.slide .page-no {
  display: none !important;
}

/* Crossfade transitions between adjacent slides */
.slide {
  transition: opacity 600ms ease-in-out;
}
.slide[aria-hidden="true"] {
  opacity: 0;
  pointer-events: none;
}
.slide[aria-hidden="false"] {
  opacity: 1;
}

/* Floating control buttons — bottom-right pair, fade after 3s pointer idle */
.loop-fs-btn,
.loop-theme-btn {
  position: fixed;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 400ms ease, background 200ms ease;
  opacity: 1;
}
.loop-fs-btn { right: 24px; }
.loop-theme-btn { right: 84px; } /* 24 + 48 + 12 gap */
.loop-lang-btn  { right: 144px; }
.loop-fs-btn.is-idle,
.loop-theme-btn.is-idle,
.loop-lang-btn.is-idle { opacity: 0; pointer-events: none; }
.loop-fs-btn:hover,
.loop-theme-btn:hover,
.loop-lang-btn:hover { background: rgba(0, 0, 0, 0.8); }
.loop-fs-btn svg,
.loop-theme-btn svg,
.loop-lang-btn svg { width: 20px; height: 20px; stroke: #fff; }

/* This deck only needs one language and one (dark) theme, and it's opened
   full-page from the hub rather than presented — hide these controls. */
.loop-fs-btn,
.loop-theme-btn,
.loop-lang-btn,
.loop-lang-menu {
  display: none !important;
}

/* Language picker — round button with current language code under the globe.
   Companion menu pops up to the LEFT of the button (since the button sits
   in the bottom-right of the viewport). */
.loop-lang-btn {
  position: fixed;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  cursor: pointer;
  z-index: 9999;
  transition: opacity 400ms ease, background 200ms ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
}
.loop-lang-btn svg { width: 20px; height: 20px; stroke: #fff; }
.loop-lang-code {
  font-family: var(--font-sans, sans-serif);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  margin-top: -2px;
}
.loop-lang-btn.is-open { background: var(--orange, #FF6600); }

.loop-lang-menu {
  position: fixed;
  bottom: 84px;
  right: 24px;
  min-width: 180px;
  background: rgba(20, 20, 20, 0.95);
  border-radius: 12px;
  padding: 6px;
  z-index: 9999;
  display: none;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.08);
  transition: opacity 400ms ease;
  backdrop-filter: blur(8px);
}
.loop-lang-menu.is-open { display: flex; }
.loop-lang-menu.is-idle { opacity: 0; pointer-events: none; }
.loop-lang-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  color: #fff;
  font-family: var(--font-sans, sans-serif);
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background 160ms ease;
}
.loop-lang-item:hover { background: rgba(255,255,255,0.08); }
.loop-lang-item.is-active { background: rgba(255,102,0,0.18); color: var(--orange, #FF6600); }
.loop-lang-item-code {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
  min-width: 22px;
}
.loop-lang-item.is-active .loop-lang-item-code { color: var(--orange, #FF6600); }
.loop-lang-item-label { font-weight: 500; }

/* ── Typewriter cursor — blinking orange bar at the caret position ── */
.tw-cursor {
  display: inline-block;
  width: 0.08em;                   /* scales with the parent font-size */
  height: 0.95em;
  background: var(--orange, #FF6600);
  margin-left: 0.04em;
  vertical-align: -0.12em;          /* line up with text baseline */
  animation: tw-cursor-blink 900ms steps(1, end) infinite;
}
.tw-cursor--done {
  /* slightly slower blink once typing is complete, so it feels settled */
  animation-duration: 1100ms;
}
@keyframes tw-cursor-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ──────────────────────────────────────────────────────────────────────
   INTRO + OUTRO — full-bleed orange burst slides
   ────────────────────────────────────────────────────────────────────── */
.s-intro, .s-outro {
  background: #081b23;
  overflow: hidden;
}
.s-intro .moment-bg,
.s-outro .moment-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.s-intro .moment-bg video,
.s-outro .moment-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(85%) contrast(1.05) brightness(0.6);
}
.s-intro .moment-bg .scrim,
.s-outro .moment-bg .scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8,27,35,0.62) 0%, rgba(8,27,35,0.78) 45%, rgba(8,27,35,0.92) 100%),
    linear-gradient(90deg, rgba(18,69,89,0.55), rgba(18,69,89,0.2));
}
.s-intro-burst {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%,
      rgba(255, 140, 60, 0.28) 0%,
      rgba(255, 102, 0, 0) 55%);
  pointer-events: none;
}
.s-intro-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
  padding: 110px;
  text-align: center;
  z-index: 2;
}
.s-intro-eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.45em;
  color: #fff;
  opacity: 0.92;
  text-transform: uppercase;
}
.s-intro-taurine-mark {
  position: absolute;
  top: 56px;
  left: 110px;
  width: auto;
  height: 52px;
  opacity: 0.96;
  z-index: 5;
}
.s-intro-logo {
  width: auto;
  height: 220px;
  filter: brightness(0) invert(1);     /* white-on-orange wordmark */
  margin: 8px 0;
}
.s-intro-tag {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.3;
  color: #fff;
  opacity: 0.95;
  max-width: 1100px;
  margin: 0;
}
.s-outro-headline {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 82px;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
  max-width: 1400px;
}
.s-outro-ysoft {
  width: auto;
  height: 48px;
  margin-top: 6px;
  opacity: 0.96;
}
.s-outro-actions {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}
.s-outro-btn {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  color: #fff;
  text-decoration: none;
  padding: 18px 38px;
  border-radius: 100px;
  border: 1.5px solid rgba(255,255,255,0.4);
  transition: border-color 200ms ease, background 200ms ease;
}
.s-outro-btn:hover {
  border-color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.08);
}
.s-outro-btn--solid {
  background: var(--orange);
  border-color: var(--orange);
}
.s-outro-btn--solid:hover {
  background: var(--orange-ink);
  border-color: var(--orange-ink);
}
.s-intro-cloud {
  position: absolute;
  top: 14px;
  right: 110px;
  width: 180px;
  height: auto;
  opacity: 0.92;
  z-index: 1;
}

/* Generic MFD silhouette — replaces the FujiFilm Apeos photo on slides 8/9 */
.s8-mfp-svg {
  width: 100%;
  height: auto;
  max-height: 100%;
  display: block;
}

/* Animation primitives — entrance animations triggered by [data-active] on the parent slide */

.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.slide[data-active] .fade-up {
  opacity: 1;
  transform: translateY(0);
}

.scale-in {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.slide[data-active] .scale-in {
  opacity: 1;
  transform: scale(1);
}

.stagger > * { transition-delay: 0ms; }
.slide[data-active] .stagger > *:nth-child(1) { transition-delay:  80ms; }
.slide[data-active] .stagger > *:nth-child(2) { transition-delay: 200ms; }
.slide[data-active] .stagger > *:nth-child(3) { transition-delay: 320ms; }
.slide[data-active] .stagger > *:nth-child(4) { transition-delay: 440ms; }
.slide[data-active] .stagger > *:nth-child(5) { transition-delay: 560ms; }
.slide[data-active] .stagger > *:nth-child(6) { transition-delay: 680ms; }

/* Count-up handled by deck-stage.js — this is just the starting state */
.count-up { font-variant-numeric: tabular-nums; }

/* Draw-path: animated SVG strokes */
.draw-path {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  transition: stroke-dashoffset 1400ms ease-out 200ms;
}
.slide[data-active] .draw-path {
  stroke-dashoffset: 0;
}

/* Slide 5 — Why IT is moving printing off the server rack — connecting arrows */
.tr-arrow {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  opacity: 0;
  transition: stroke-dashoffset 700ms ease-out, opacity 100ms ease-out;
}
.slide[data-active] .tr-arrow {
  stroke-dashoffset: 0;
  opacity: 1;
}
.slide[data-active] .tr-arrow-1 { transition-delay: 500ms; }
.slide[data-active] .tr-arrow-2 { transition-delay: 900ms; }

/* Slide-specific styling — added per slide in dedicated sections below */

/* ─────────────────────────────────────────────────────────────────────────
   Slide 3 — Cloud Print Now Leads 73.4% — chart animation
   The line draws over ~1400ms (existing .draw-path). Dots + value labels
   pop in synced with line progress. At 73.4% endpoint, a "boom" plays:
   shockwave ring expands, rays burst outward, a cloud icon pops up.
   ───────────────────────────────────────────────────────────────────────── */

.s3-area {
  opacity: 0;
  transition: opacity 600ms ease 1700ms;
}
.slide[data-active] .s3-area { opacity: 1; }

.s3-dot, .s3-val {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.s3-dot { transform: scale(0); }
.slide[data-active] .s3-dot {
  animation: s3-dot-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.slide[data-active] .s3-val {
  animation: s3-val-fade 280ms ease-out both;
}
/* Stagger to match the line draw progress (200ms→1600ms) */
.slide[data-active] .s3-dot-1 { animation-delay: 380ms; }
.slide[data-active] .s3-dot-2 { animation-delay: 540ms; }
.slide[data-active] .s3-dot-3 { animation-delay: 700ms; }
.slide[data-active] .s3-dot-4 { animation-delay: 860ms; }
.slide[data-active] .s3-dot-5 { animation-delay: 1080ms; }
.slide[data-active] .s3-dot-6 { animation-delay: 1300ms; }
.slide[data-active] .s3-dot-7 { animation-delay: 1500ms; }
.slide[data-active] .s3-val-1 { animation-delay: 420ms; }
.slide[data-active] .s3-val-2 { animation-delay: 580ms; }
.slide[data-active] .s3-val-3 { animation-delay: 740ms; }
.slide[data-active] .s3-val-4 { animation-delay: 900ms; }
.slide[data-active] .s3-val-5 { animation-delay: 1120ms; }
.slide[data-active] .s3-val-6 { animation-delay: 1340ms; }
.slide[data-active] .s3-val-7 { animation-delay: 1700ms; }   /* big finale label */

@keyframes s3-dot-pop {
  0%   { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; transform: scale(1.6); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes s3-val-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Endpoint big finale: 73.4% label scales + pulses orange */
.slide[data-active] .s3-val-7 {
  animation: s3-val-finale 800ms cubic-bezier(0.34, 1.56, 0.64, 1) 1700ms both;
  transform-origin: 680px 53px;       /* anchor at the label */
}
@keyframes s3-val-finale {
  0%   { opacity: 0; transform: scale(0.4); }
  60%  { opacity: 1; transform: scale(1.25); }
  100% { opacity: 1; transform: scale(1); }
}

/* Endpoint dot (black) gets a stronger pulse */
.slide[data-active] .s3-dot-7 {
  animation: s3-dot-finale 900ms cubic-bezier(0.34, 1.56, 0.64, 1) 1500ms both;
}
@keyframes s3-dot-finale {
  0%   { opacity: 0; transform: scale(0); }
  50%  { opacity: 1; transform: scale(2); }
  100% { opacity: 1; transform: scale(1); }
}

/* BOOM: shockwave ring + radial rays + cloud icon — fires at 1700ms */
.s3-boom { opacity: 0; pointer-events: none; }
.slide[data-active] .s3-boom { opacity: 1; transition: opacity 100ms ease 1700ms; }

.s3-shockwave {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.4);
}
.slide[data-active] .s3-shockwave {
  animation: s3-shockwave 900ms ease-out 1700ms 1;
}
@keyframes s3-shockwave {
  0%   { opacity: 0.95; transform: scale(0.4); stroke-width: 4; }
  60%  { opacity: 0.5;  stroke-width: 2; }
  100% { opacity: 0;    transform: scale(3.2); stroke-width: 1; }
}

.s3-ray {
  opacity: 0;
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
}
.slide[data-active] .s3-ray {
  animation: s3-ray-burst 700ms cubic-bezier(0.2, 0.8, 0.3, 1) 1750ms 1 forwards;
}
@keyframes s3-ray-burst {
  0%   { opacity: 0;   stroke-dashoffset: 22; }
  30%  { opacity: 1; }
  100% { opacity: 0;   stroke-dashoffset: 0;  }
}

.s3-cloud-icon {
  opacity: 0;
  transform: translate(0, -28px) scale(0.4);
}
.slide[data-active] .s3-cloud-icon {
  animation: s3-cloud-pop 800ms cubic-bezier(0.34, 1.56, 0.64, 1) 2000ms 1 forwards;
}
@keyframes s3-cloud-pop {
  0%   { opacity: 0; transform: translate(0, -28px) scale(0.4); }
  60%  { opacity: 1; transform: translate(0, -56px) scale(1.15); }
  100% { opacity: 1; transform: translate(0, -52px) scale(1); }
}

/* Slide 5 — SAFEQ Cloud SaaS framing */
/* FUJIFILM bottom-right */
/* Headline block — top-left, sits below the top-right FUJIFILM lockup */
.s5-headline {
  position: absolute;
  top: 150px; left: 110px;
  z-index: 10;
}
.s5-h1 {
  font-size: 96px !important;
  color: var(--t-text);
  margin: 0;
}
/* Ambient glow — echoes the orange burst accent used on other slide intros,
   softens the otherwise flat dark field behind the laptop */
.s5-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 900px 700px at 22% 58%, rgba(255,140,60,0.12) 0%, rgba(255,102,0,0) 70%);
  pointer-events: none;
  z-index: 0;
}
/* Full-slide composition layer — clipped to slide bounds */
.s5-stage {
  position: absolute;
  inset: 340px 110px 80px 110px;   /* clears headline (top) + footer space */
  overflow: visible;
}
/* Orange burst — right side, 660px circle */
.s5-burst {
  position: absolute;
  top: 50%; right: 128px;
  width: 594px; height: 594px;
  background: var(--orange);
  border-radius: 50%;
  z-index: 1;
  transform: translateY(-50%) scale(0.9);
  opacity: 0;
  transform-origin: center center;
  transition: transform 700ms cubic-bezier(0.34, 1.4, 0.64, 1) 100ms,
              opacity 600ms ease 100ms;
}
.slide[data-active] .s5-burst {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
/* Teal cloud icon — overlapping top-right of burst, larger illustrated shape */
.s5-teal-cloud {
  position: absolute;
  top: 50%; right: 137px;
  width: 207px; height: 135px;
  margin-top: -320px;        /* lifts to upper-right of the burst */
  z-index: 6;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms ease 800ms, transform 500ms ease 800ms;
}
.slide[data-active] .s5-teal-cloud {
  opacity: 1;
  transform: translateY(0);
}
/* White callout text — large, fills visible right portion of burst.
   The wrapper owns absolute positioning + vertical centering; the inner
   .s5-burst-text owns typography and the fade-up entrance animation.
   (Splitting these avoids the wrapper's centering transform and the
   fade-up class's entrance transform fighting over the one `transform`
   property on a single element.) */
.s5-burst-text-wrap {
  position: absolute;
  top: 50%; right: 254px;
  width: 342px;
  transform: translateY(-50%);
  z-index: 4;
}
.s5-burst-text {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 45px;
  line-height: 1.05;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  transition: opacity 500ms ease 600ms;
}
.slide[data-active] .s5-burst-text { opacity: 1; }
/* SaaS download badge — white circle, bottom-right of burst, below text */
.s5-saas-badge-wrap {
  position: absolute;
  top: 50%; right: 191px;
  margin-top: 145px;
  width: 99px; height: 99px;
  background: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 400ms ease 900ms, transform 400ms ease 900ms;
}
.slide[data-active] .s5-saas-badge-wrap { opacity: 1; transform: scale(1); }
.s5-saas-badge {
  width: 65px; height: 65px;
  filter: invert(42%) sepia(90%) saturate(600%) hue-rotate(1deg) brightness(95%);
}
/* Laptop — large, dominates left + center, sized to fit within stage height */
.s5-laptop {
  position: absolute;
  top: 50%; left: 40px;
  transform: translateY(-50%);
  width: 972px;
  z-index: 3;
  opacity: 0;
  transition: opacity 600ms ease 300ms, transform 600ms ease 300ms;
}
.slide[data-active] .s5-laptop {
  opacity: 1;
  transform: translateY(-50%);
}
.s5-laptop-body {
  background: #d9d9d9;
  border-radius: 14px 14px 4px 4px;
  padding: 14px 14px 0;
  box-shadow: 0 28px 60px rgba(0,0,0,0.25);
  position: relative;
}
.s5-laptop-body::after {
  content: "";
  display: block;
  height: 28px;
  background: #c4c4c4;
  border-radius: 0 0 60px 60px;
  margin: 0 -60px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
.s5-laptop-screen {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

/* =============================================
   Slide 6 — SAFEQ Cloud Eliminates the Complexity
   HIGH-FIDELITY PPTX REBUILD
   ============================================= */

.s6-frame {
  padding: 72px 80px 56px 100px !important;
  background: #f4f5f7;
}

/* Large headline */
.s6-title {
  font-size: 82px !important;
  line-height: 0.92 !important;
  margin: 0 0 22px;
  max-width: 1400px;
}

/* Overall body: 3-column grid with center auto-expanding */
.s6-body {
  display: grid;
  grid-template-columns: 300px 1fr 320px;
  gap: 20px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  position: relative;
}

/* ---- Side cards (shared) ---- */
.s6-card {
  background: #f7f7f7;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,0.09);
  z-index: 2;
  max-height: 620px;
  align-self: center;
}

/* Orange gradient banner header with slight skew illusion via clip-path */
.s6-card-hdr {
  background: linear-gradient(135deg, #FF6600 0%, #E04E00 100%);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 14px 18px 16px;
  line-height: 1.25;
  border-radius: 14px 14px 0 0;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
  margin-bottom: -8px;
}

.s6-card-body {
  padding: 20px 16px 16px;
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}

/* ---- LEFT card: input device diagram ---- */
.s6-card--left .s6-card-body {
  background: #fff;
  align-items: flex-start;
}

.s6-input-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  padding-top: 8px;
}

/* Small OS logo pairs at top */
.s6-os-row {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
}
.s6-os-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f4f5f7;
  border: 1.5px solid #e8e8e8;
  border-radius: 30px;
  padding: 6px 12px;
}
.s6-os-chip img {
  width: 26px; height: 26px;
  object-fit: contain;
}

/* Large illustrated device circles (orange SVG icons) */
.s6-device-row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.s6-device-circle {
  width: 78px; height: 78px;
  border-radius: 50%;
  border: 2.5px solid #FF6600;
  background: #fff8f4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.s6-device-circle img {
  width: 64px; height: 64px;
  object-fit: contain;
}

/* Mobile OS logos at bottom */
.s6-os-row--bottom {
  gap: 20px;
}
.s6-mobile-os {
  height: 30px;
  width: auto;
  object-fit: contain;
  max-width: 90px;
}

/* ---- CENTER: cloud + SVG connectors ---- */
.s6-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  padding: 0 12px;
}

/* Soft radial halo behind IdPs + cloud — one coherent unit */
.s6-halo {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.92) 0%, rgba(230,230,230,0.38) 70%, transparent 100%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%);
  z-index: 0;
  pointer-events: none;
}

/* Full-height SVG overlay for dotted connector lines */
.s6-connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Cloud container — stacks idp-cluster above the SVG cloud */
.s6-cloud-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* IdP logos sit in the top half of the halo, just above the cloud */
.s6-idp-cluster {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: -6px;
  z-index: 3;
  position: relative;
  padding: 12px 16px 0;
}

.s6-cloud-bg {
  width: 100%;
  height: auto;
  display: block;
}

/* SAFEQ Cloud logo centered inside cloud body
   (cloud shape's visual center sits ~58% down the SVG, not 50% — bumps push up top) */
.s6-cloud-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 56px;
  padding-bottom: 24px;
  pointer-events: none;
}

/* IdP logo rows */
.s6-idp-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}
.s6-idp-row--top {
  gap: 14px;
}
.s6-idp-row--bottom {
  gap: 8px;
}
.s6-idp-logo {
  height: 30px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
}
.s6-idp-logo--dark {
  /* Auth0 is black on white */
  height: 24px;
}
.s6-idp-logo--ping {
  /* Ping Identity red square — taller to show branding */
  height: 36px;
  border-radius: 4px;
}

/* SAFEQ Cloud logo prominent inside cloud */
.s6-cloud-logo {
  height: 52px;
  width: auto;
}

/* ---- RIGHT card: output vendor list ---- */
.s6-card--right .s6-card-body {
  background: #fff;
  border-radius: 0 0 14px 14px;
  padding: 6px 10px 6px;
  align-items: flex-start;
}

.s6-vendors-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.s6-vendor-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0;
}
.s6-printer-icon {
  width: 52px; height: 52px;
  flex-shrink: 0;
  opacity: 0.95;
  overflow: visible;
}
/* Print job emit: paper slides out of tray when document delivery completes
   and stays visible to indicate the print job has landed in the output tray. */
.s6-paper-out {
  transform-box: fill-box;
  transform-origin: center top;
}
.s6-printer-icon.s6-printing .s6-paper-out {
  animation: s6-paper-emit 1400ms cubic-bezier(.22,.9,.25,1) forwards;
}
@keyframes s6-paper-emit {
  0%   { opacity: 0; transform: translateY(-4px) scaleY(0.2); }
  20%  { opacity: 1; transform: translateY(0) scaleY(1); }
  100% { opacity: 1; transform: translateY(9px) scaleY(1); }
}
.s6-vendor-row img {
  height: 32px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
}

/* ---- Bottom checkmarks ---- */
.s6-checks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 64px;
  row-gap: 22px;
  margin: 36px 80px 0;
  max-width: 1760px;
  justify-items: start;
}
.s6-check {
  display: grid;
  grid-template-columns: 44px 1fr;     /* fixed tick column → labels start at same x */
  column-gap: 18px;
  align-items: center;
}
.s6-tick {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #00B4D0;
  color: #fff;
  font-weight: 900;
  font-size: 24px;
  line-height: 1;
  display: inline-flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
.s6-check-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  color: var(--t-text);
  line-height: 1.15;
  letter-spacing: 0.005em;
}

/* ── Slide 6 document-flow animation ─────────────────────────────────── */

/* SAFEQ Cloud logo: processing pulse keyframes */
@keyframes s6-cloud-pulse {
  0%   { transform: scale(1);    filter: drop-shadow(0 0 0px rgba(255,102,0,0)); }
  50%  { transform: scale(1.08); filter: drop-shadow(0 0 18px rgba(255,102,0,0.5)); }
  100% { transform: scale(1);    filter: drop-shadow(0 0 0px rgba(255,102,0,0)); }
}

/* Class toggled by JS to replay the animation */
.s6-cloud-logo.s6-cloud-pulse-active {
  animation: s6-cloud-pulse 400ms ease-in-out 1 forwards;
  transform-origin: center center;
}

/* Slide 8 — Pure Cloud Terminals */
/* FUJIFILM bottom-right lockup */
.s8-frame {
  padding: 150px 110px 70px !important;
}
.s8-title {
  font-size: 96px !important;
  line-height: 0.95;
  margin: 0;
}
.s8-title-orange { color: var(--orange); }
.s8-subhead {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: 0.01em;
  color: var(--t-text-soft);
  margin: 18px 0 0;
}
.s8-header { margin-bottom: 24px; }
.s8-body {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 80px;
  align-items: center;
  flex: 1;
}

/* Zoom sequence: MFD body shows first, then touchscreen panel scales up
   to its full zoomed size from the MFD's screen position */
.s8-panel-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.s8-mfp-stage {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 540px;
}
/* The MFD body: present from the start, then drifts to lower-left + dims slightly
   as the zoomed panel takes over */
.s8-mfp-photo {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-10%, -50%) scale(1);
  width: 360px;
  height: auto;
  z-index: 1;
  opacity: 0;
  transition: opacity 500ms ease 200ms,
              transform 900ms cubic-bezier(0.4, 0, 0.2, 1) 1500ms;
}
.slide[data-active] .s8-mfp-photo {
  opacity: 1;
}
/* After ~1.5s the MFD body slides slightly down-left and shrinks a bit
   so the zoomed panel can dominate */
.slide[data-active] .s8-mfp-photo {
  animation: s8-mfp-drift 900ms cubic-bezier(0.4, 0, 0.2, 1) 1500ms forwards;
}
@keyframes s8-mfp-drift {
  0%   { transform: translate(-10%, -50%) scale(1);    opacity: 1; }
  100% { transform: translate(-15%, -50%) scale(0.85); opacity: 0.95; }
}

/* Highlight ring on the MFD's touchscreen — overlays the screen area of the
   MFD photo to anchor the "this is the zoom source" relationship.
   The MFD photo (apeos-c7070.png, 495x400) has its touchscreen roughly at the
   upper-left third. After the photo's drift transform, we approximate that
   in stage-relative coordinates. */
.s8-screen-ring {
  position: absolute;
  left: 22px;
  top: 148px;
  width: 70px;
  height: 53px;
  border: 2.5px solid #009CB6;
  border-radius: 6px;
  box-shadow: 0 0 18px rgba(0, 156, 182, 0.55), 0 0 0 3px rgba(0, 156, 182, 0.15);
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease 600ms;
}
.slide[data-active] .s8-screen-ring {
  opacity: 1;
  animation: s8-screen-ring-pulse 1800ms ease-in-out 800ms infinite;
}
@keyframes s8-screen-ring-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(0, 156, 182, 0.55); border-color: #009CB6; }
  50%      { box-shadow: 0 0 28px rgba(0, 156, 182, 0.85); border-color: #00C8E5; }
}

/* The zoomed touchscreen panel: starts small at the MFD's screen position,
   then expands to its full size with a soft teal glow as if projecting from the MFD */
.s8-panel-frame {
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%) scale(0.12);
  transform-origin: center center;
  background: #1a1d22;
  padding: 22px 24px;
  border-radius: 22px;
  box-shadow:
    0 0 0 1px rgba(0, 156, 182, 0.3),
    0 0 40px rgba(0, 156, 182, 0.25),
    0 30px 70px rgba(0,0,0,0.32),
    0 2px 0 rgba(255,255,255,0.08) inset,
    0 -2px 0 rgba(0,0,0,0.35) inset;
  width: 90%;
  max-width: 880px;
  opacity: 0;
  z-index: 2;
  transition: opacity 100ms ease 800ms;
}
.slide[data-active] .s8-panel-frame {
  opacity: 1;
  animation: s8-panel-zoom 1300ms cubic-bezier(0.4, 0, 0.2, 1) 900ms forwards;
}
@keyframes s8-panel-zoom {
  0%   { transform: translate(-50%, -50%) scale(0.12); opacity: 0.4; }
  40%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
}
.s8-panel-img {
  width: 100%;
  display: block;
  border-radius: 6px;
  background: #fff;
}
/* Masks the embedded "Fuji Mock User" string in the source PNG with a neutral demo label */
.panel-user-mask {
  position: absolute;
  top: 5.2%;
  right: 8%;
  height: 6.2%;
  min-width: 17%;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: #fff;
  color: #3a3f47;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  z-index: 3;
}
.s8-panel-caption {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--t-text-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0;
  transition: opacity 400ms ease 2400ms;
}
.slide[data-active] .s8-panel-caption { opacity: 1; }

.s8-callouts {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.s8-callout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 28px;
}
.s8-callout-label {
  margin: 0 !important;
  font-size: 26px !important;
}
.s8-icon-badge {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: rgba(255,255,255,0.18);
  display: inline-flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Slide 9 — Advanced Scanning Workflows */
.s9-frame {
  padding: 150px 110px 60px !important;
}
.s9-title {
  font-size: 96px !important;
  line-height: 0.95;
  margin: 0;
}
.s9-subhead {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: 0.005em;
  color: var(--t-text-soft);
  margin: 16px 0 0;
}
.s9-header { margin-bottom: 14px; }
.s9-body {
  display: grid;
  grid-template-columns: 880px 1fr;       /* bigger left for the zoomed panel */
  gap: 48px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}
/* Zoomed terminal panel on the left — same source asset as slide 8 */
.s9-terminal-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease 200ms, transform 600ms ease 200ms;
}
.slide[data-active] .s9-terminal-wrap {
  opacity: 1;
  transform: translateY(0);
}
.s9-panel-frame {
  position: relative;
  background: #1a1d22;
  padding: 20px 22px;
  border-radius: 20px;
  box-shadow:
    0 0 0 1px rgba(0, 156, 182, 0.25),
    0 0 40px rgba(0, 156, 182, 0.18),
    0 28px 60px rgba(0,0,0,0.32),
    0 2px 0 rgba(255,255,255,0.08) inset,
    0 -2px 0 rgba(0,0,0,0.35) inset;
  width: 100%;
  max-width: 860px;
}
.s9-panel-img {
  width: 100%;
  display: block;
  border-radius: 6px;
  background: #fff;
}
/* Right: feature cards, aligned with the deck's card style */
.s9-features {
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: center;
}
.s9-box {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px 28px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 500ms ease, transform 500ms ease;
}
.slide[data-active] .s9-box:nth-child(1) { transition-delay: 400ms; }
.slide[data-active] .s9-box:nth-child(2) { transition-delay: 600ms; }
.slide[data-active] .s9-box {
  opacity: 1;
  transform: translateY(0);
}
.s9-box-title {
  margin: 0 !important;
  font-size: 26px !important;
}
.s9-icons-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.s9-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100px;
  font-size: 13.5px;
  color: var(--t-text-soft);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}
.s9-icon-item img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
}
/* Stagger reveal for individual icon items within each box */
.slide[data-active] .s9-icon-item {
  animation: s9-icon-pop 400ms ease-out both;
}
.slide[data-active] .s9-box:nth-child(1) .s9-icon-item { animation-delay: calc(600ms + var(--i, 0) * 80ms); }
.slide[data-active] .s9-box:nth-child(2) .s9-icon-item { animation-delay: calc(800ms + var(--i, 0) * 80ms); }
@keyframes s9-icon-pop {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}
.s9-bullets {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.s9-bullets li {
  position: relative;
  padding-left: 22px !important;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.4;
  color: var(--t-text-soft);
  font-weight: 500;
  margin: 0 !important;
}
.s9-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--orange);
}

/* Slide 10 — Scale Isn't a Question: world-map animations */
/* World map outline is pure black on transparent — flip to white in dark mode so it's visible */
html[data-theme="dark"] .scaling-map-img { filter: brightness(0) invert(1) opacity(0.78); }
html[data-theme="dark"] .scaling-map .map-pin-label { fill: var(--t-text); }
[data-deck-slide] .scaling-map-img { opacity: 0; }
[data-deck-active] .scaling-map-img {
  animation: map-fade-in 900ms ease-out 200ms both;
}
@keyframes map-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

[data-deck-slide] .map-pin-dot,
[data-deck-slide] .map-pin-ping,
[data-deck-slide] .map-pin-label {
  transform-box: fill-box;
  transform-origin: center;
}

[data-deck-slide] .map-pin-dot { opacity: 0; }
[data-deck-active] .map-pin-dot {
  animation: map-pin-pop 580ms cubic-bezier(.34,1.6,.64,1) calc(700ms + var(--i, 0) * 110ms) both;
}
@keyframes map-pin-pop {
  0%   { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; transform: scale(1.55); }
  100% { opacity: 1; transform: scale(1); }
}

[data-deck-slide] .map-pin-label { opacity: 0; }
[data-deck-active] .map-pin-label {
  animation: map-pin-label-in 460ms cubic-bezier(.22,.9,.25,1) calc(880ms + var(--i, 0) * 110ms) both;
}
@keyframes map-pin-label-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 0.92; transform: none; }
}

[data-deck-slide] .map-pin-ping { opacity: 0; }
[data-deck-active] .map-pin-ping {
  animation: map-pin-ping 2.6s ease-out calc(1700ms + var(--i, 0) * 220ms) infinite;
  fill: var(--orange);
}
@keyframes map-pin-ping {
  0%   { opacity: 0.55; transform: scale(0.7); }
  80%  { opacity: 0;    transform: scale(3.6); }
  100% { opacity: 0;    transform: scale(3.6); }
}

@media (prefers-reduced-motion: reduce) {
  [data-deck-slide] .scaling-map-img,
  [data-deck-slide] .map-pin-dot,
  [data-deck-slide] .map-pin-label {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
  [data-deck-slide] .map-pin-ping { display: none; }
}

/* ── Slide 13 — Why SAFEQ Cloud wheel (wow rebuild) ──────────────────── */

/* Keyframes ─────────────────────────────────────────────────────────── */

/* Wheel: scale + rotate in */
@keyframes s13-wheel-in {
  from { transform: scale(0.6) rotate(-90deg); opacity: 0; }
  to   { transform: scale(1)   rotate(0deg);   opacity: 1; }
}

/* Quadrant segments: dim → bright */
@keyframes s13-seg-appear {
  from { opacity: 0.15; filter: brightness(0.6); }
  to   { opacity: 1;    filter: brightness(1); }
}

/* Segment icon pop */
@keyframes s13-icon-pop {
  0%   { transform: scale(0);   opacity: 0; }
  70%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}

/* Center logo: entry glow pulse */
@keyframes s13-logo-glow {
  0%   { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(255,102,0,0)); }
  50%  { transform: scale(1.08); filter: drop-shadow(0 0 24px rgba(255,102,0,0.6)); }
  100% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(255,102,0,0)); }
}

/* Center logo: continuous gentle pulse */
@keyframes s13-logo-pulse {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 6px rgba(255,102,0,0.2)); }
  50%       { transform: scale(1.03); filter: drop-shadow(0 0 16px rgba(255,102,0,0.4)); }
}

/* Gear watermark slow rotation */
@keyframes s13-gear-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Connector line draw-in */
@keyframes s13-draw {
  from { stroke-dashoffset: 500; opacity: 0; }
  to   { stroke-dashoffset: 0;   opacity: 1; }
}

/* Gear background ───────────────────────────────────────────────────── */
.s13-gear-bg {
  position: absolute;
  right: 60px; bottom: 50px;
  width: 340px; height: auto;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.slide[data-active] .s13-gear-bg {
  animation: s13-gear-fade 600ms ease-out 200ms both;
}
@keyframes s13-gear-fade {
  from { opacity: 0; }
  to   { opacity: 0.05; }
}

/* Body layout — feature list (left) + wheel (right), sitting below the
   standard eyebrow/h1 header inside .frame ─────────────────────────────── */
.s13-body {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 80px;
  min-height: 0;
}
.s13-list-card {
  flex: 0 0 700px;
  height: 640px;
  display: flex;
  align-items: center;
  padding: 48px 96px 48px 56px;
  box-sizing: border-box;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 55%, transparent 88%);
          mask-image: linear-gradient(to right, #000 0%, #000 55%, transparent 88%);
}
.s13-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
}
.s13-item {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
  color: var(--t-text);
  letter-spacing: -0.005em;
}
.s13-item .s13-icon { flex-shrink: 0; }
.s13-item small {
  display: block;
  font-weight: 500;
  font-size: 16px;
  color: var(--t-text-soft);
  margin-top: 2px;
}

/* Connector lines SVG — stretched behind everything ─────────────────── */
.s13-connectors {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

/* Connector line base — invisible until activated */
.s13-conn {
  fill: none;
  stroke: #009CB6;
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
  stroke-linecap: round;
  stroke-dashoffset: 500;
  opacity: 0;
}

/* Connector draw-in: staggered per line, starting at 2200ms */
.slide[data-active] .s13-conn-1 { animation: s13-draw 500ms ease-out 2200ms both; }
.slide[data-active] .s13-conn-2 { animation: s13-draw 500ms ease-out 2320ms both; }
.slide[data-active] .s13-conn-9 { animation: s13-draw 500ms ease-out 2440ms both; }
.slide[data-active] .s13-conn-8 { animation: s13-draw 500ms ease-out 2560ms both; }
.slide[data-active] .s13-conn-7 { animation: s13-draw 500ms ease-out 2680ms both; }
.slide[data-active] .s13-conn-3 { animation: s13-draw 500ms ease-out 2200ms both; }
.slide[data-active] .s13-conn-4 { animation: s13-draw 500ms ease-out 2320ms both; }
.slide[data-active] .s13-conn-5 { animation: s13-draw 500ms ease-out 2440ms both; }
.slide[data-active] .s13-conn-6 { animation: s13-draw 500ms ease-out 2560ms both; }

/* Wheel wrapper — sits in the right column, with a soft orange halo behind it */
.s13-wheel-wrap {
  position: relative;
  flex: 0 0 auto;
  margin: 0 auto;
  width: 640px;
  height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.s13-wheel-wrap::before {
  content: "";
  position: absolute;
  inset: -80px;
  background: radial-gradient(circle, rgba(255,102,0,0.10) 0%, rgba(255,102,0,0.04) 45%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}

/* Wheel: hidden until [data-active], then spins in ─────────────────── */
.s13-wheel {
  transform: scale(0.6) rotate(-90deg);
  opacity: 0;
  transition: none;
}
.slide[data-active] .s13-wheel {
  opacity: 1;
  animation: s13-wheel-in 800ms cubic-bezier(0.34, 1.56, 0.64, 1) 400ms both;
}

/* Segment quadrants — start dim, brighten sequentially (clockwise) ─── */
.s13-seg-secure,
.s13-seg-hardware,
.s13-seg-automation,
.s13-seg-future {
  opacity: 0.15;
  filter: brightness(0.6);
}
.slide[data-active] .s13-seg-secure     { animation: s13-seg-appear 400ms ease-out 1000ms both; }
.slide[data-active] .s13-seg-hardware   { animation: s13-seg-appear 400ms ease-out 1200ms both; }
.slide[data-active] .s13-seg-automation { animation: s13-seg-appear 400ms ease-out 1400ms both; }
.slide[data-active] .s13-seg-future     { animation: s13-seg-appear 400ms ease-out 1600ms both; }

/* Segment icon groups — pop in with quadrant ───────────────────────── */
.s13-icon-seg {
  transform-origin: 0 0;
  transform: scale(0);
  opacity: 0;
}
.slide[data-active] .s13-icon-secure     { animation: s13-icon-pop 300ms cubic-bezier(0.34,1.56,0.64,1) 1100ms both; }
.slide[data-active] .s13-icon-hardware   { animation: s13-icon-pop 300ms cubic-bezier(0.34,1.56,0.64,1) 1300ms both; }
.slide[data-active] .s13-icon-automation { animation: s13-icon-pop 300ms cubic-bezier(0.34,1.56,0.64,1) 1500ms both; }
.slide[data-active] .s13-icon-future     { animation: s13-icon-pop 300ms cubic-bezier(0.34,1.56,0.64,1) 1700ms both; }

/* Center orange ring subtle pulse background ─────────────────────────── */
.s13-center-ring {
  transform-origin: 0 0;
}

/* SAFEQ Cloud center logo ────────────────────────────────────────────── */
.s13-center-logo {
  position: absolute;
  width: 172px;
  height: auto;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transform: scale(1);
}
/* Entry glow at 1800ms, then continuous pulse loop */
.slide[data-active] .s13-center-logo {
  opacity: 1;
  animation:
    s13-logo-glow  600ms ease-in-out 1800ms 1 both,
    s13-logo-pulse 3000ms ease-in-out 2400ms infinite;
}

/* Icon dot — small orange bullet in front of each list item ──────────── */
.s13-icon {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
}

/* Satellite label + connector reveal: staggered after 2200ms ─────────── */
.slide[data-active] .s13-l1 { transition-delay: 2200ms; }
.slide[data-active] .s13-l2 { transition-delay: 2320ms; }
.slide[data-active] .s13-l9 { transition-delay: 2440ms; }
.slide[data-active] .s13-l7 { transition-delay: 2560ms; }
.slide[data-active] .s13-l3 { transition-delay: 2200ms; }
.slide[data-active] .s13-l4 { transition-delay: 2320ms; }
.slide[data-active] .s13-l5 { transition-delay: 2440ms; }
.slide[data-active] .s13-l6 { transition-delay: 2560ms; }

/* (white burst rings + radiating sparks removed — they created scattered orange
   dots and a muddy ring around the center disc; cleaner without them) */

/* =========================================================================
   OBSERVABILITY SECTION — shared treatments across Slides A / B / C
   ========================================================================= */

/* Light cockpit base — observability section reads as part of the deck */
.slide--obs-dark {
  background: linear-gradient(180deg, #fafafa 0%, #f1f3f5 100%);
  color: var(--t-text);
}
.slide--obs-dark .display { color: var(--t-text); }

.s-obs-frame {
  padding: 150px 110px 56px;
  display: flex;
  flex-direction: column;
}
.s-obs-eyebrow {
  font-family: var(--font-sans);
  font-size: 20px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 600;
  margin-bottom: 28px;
}
.s-obs-title {
  font-size: 96px;
  line-height: 0.95;
  margin: 0 0 28px 0;
}
.s-obs-title-accent { color: var(--orange); }
.s-obs-sub {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 30px;
  color: var(--t-text-soft);
  margin: 0 0 32px 0;
  max-width: 1400px;
  line-height: 1.35;
}

/* Body grid: cockpit (left) + pillars (right) */
.s-obs-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 32px;
  min-height: 0;
}

/* ── Slide A · Cockpit ──────────────────────────────────────────────── */
.sa-cockpit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto 320px;
  gap: 14px 22px;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(15,23,42,0.06);
  align-self: start;
}

/* Hero availability number */
.sa-avail {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 4px;
}
.sa-avail-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: #16a04a;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.sa-avail-num { font-size: 104px; line-height: 0.9; }
.sa-avail-pct { font-size: 52px; line-height: 0.9; opacity: 0.85; }
.sa-avail-label {
  font-size: 14px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--t-text-soft);
  margin-top: 6px;
}
.sa-avail-target {
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--t-text-mute);
  text-transform: uppercase;
  margin-top: 4px;
}
.sa-avail-target strong { color: var(--t-text-soft); font-weight: 600; }

/* 31-day pulse grid */
.sa-pulse {
  grid-column: 2;
  grid-row: 1;
  padding: 4px 0;
}
.sa-pulse-label {
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--t-text-mute);
  margin-bottom: 10px;
}
.sa-pulse-grid {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 6px;
}
.sa-dot {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: block;
}
.sa-dot--g { background: #16a04a; }
.sa-dot--y { background: #E6A93B; }
.sa-dot--r { background: #E55B5B; }

/* Live counters row */
.sa-counters {
  grid-column: 1 / span 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  padding-top: 6px;
  align-self: end;
}
.sa-counter {
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.sa-counter-val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 0.95;
  color: var(--orange);
  font-feature-settings: "tnum" 1;
}
.sa-counter-lbl {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--t-text-mute);
}

/* World map block: spans full cockpit width below the rest */
.sa-map {
  grid-column: 1 / span 2;
  grid-row: 3;
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  padding: 10px;
  box-sizing: border-box;
  height: 320px;
}
/* Inner wrapper holds the 2:1 map and its overlay aligned to it */
.sa-map-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
/* Layered map: world SVG image as base, pings overlay on top — both fill the inner wrapper, letterbox at 2:1 */
.sa-map-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0.6;
}
.sa-map-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.sa-ping-fill { fill: #16a04a; }
.sa-ping-ring { stroke: #16a04a; }
.sa-ping-label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  fill: var(--ink);
  text-transform: uppercase;
}
.sa-ping-leader { stroke: var(--grey-7); opacity: 0.6; }
.sa-map-caption {
  position: absolute;
  bottom: 10px;
  right: 14px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--t-text-mute);
  z-index: 2;
}

/* Datacenter ping ring animation */
@keyframes sa-ping-out {
  0%   { r: 6; opacity: 0.9; }
  100% { r: 26; opacity: 0; }
}
.sa-ping-ring {
  transform-origin: center;
  animation: sa-ping-out 2.4s ease-out infinite;
  animation-delay: var(--delay, 0s);
}

/* ── Slide A · Pillars ──────────────────────────────────────────────── */
.sa-pillars {
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: space-between;
}
.sa-pillar {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-left: 3px solid var(--orange);
  border-radius: 12px;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 4px;
  align-items: center;
  box-shadow: 0 4px 16px rgba(15,23,42,0.04);
}
.sa-pillar-icon {
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255,102,0,0.10);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sa-pillar-icon svg { width: 24px; height: 24px; display: block; }
.sa-pillar-title {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--t-text);
}
.sa-pillar-text {
  grid-column: 2;
  grid-row: 2;
  font-size: 15px;
  color: var(--t-text-soft);
  line-height: 1.4;
}

/* Footer "Detected. Diagnosed. Solved." */
.s-obs-footer {
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 22px;
}
.s-obs-foot-step {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--orange);
  font-size: 26px;
}
.s-obs-foot-trail {
  color: var(--t-text-soft);
  font-weight: 500;
  font-size: 22px;
}

/* Stagger delays for cockpit + pillars (use stagger class on parents) */
.slide[data-active] .sa-cockpit { transition-delay: 200ms; }
.slide[data-active] .sa-pillars .sa-pillar:nth-child(1) { transition-delay: 600ms; }
.slide[data-active] .sa-pillars .sa-pillar:nth-child(2) { transition-delay: 760ms; }
.slide[data-active] .sa-pillars .sa-pillar:nth-child(3) { transition-delay: 920ms; }
.slide[data-active] .sa-pillars .sa-pillar:nth-child(4) { transition-delay: 1080ms; }
.slide[data-active] .sa-counters .sa-counter:nth-child(1) { transition-delay: 900ms; }
.slide[data-active] .sa-counters .sa-counter:nth-child(2) { transition-delay: 1020ms; }
.slide[data-active] .sa-counters .sa-counter:nth-child(3) { transition-delay: 1140ms; }
/* Day-grid dots: stagger 30ms each across 31 dots */
.slide[data-active] .sa-pulse-grid .sa-dot { transition: opacity 360ms ease, transform 360ms ease; }
.slide[data-active] .sa-pulse-grid .sa-dot:nth-child(1) { transition-delay: 800ms; }
.slide[data-active] .sa-pulse-grid .sa-dot:nth-child(2) { transition-delay: 830ms; }
.slide[data-active] .sa-pulse-grid .sa-dot:nth-child(3) { transition-delay: 860ms; }
.slide[data-active] .sa-pulse-grid .sa-dot:nth-child(4) { transition-delay: 890ms; }
.slide[data-active] .sa-pulse-grid .sa-dot:nth-child(5) { transition-delay: 920ms; }
.slide[data-active] .sa-pulse-grid .sa-dot:nth-child(6) { transition-delay: 950ms; }
.slide[data-active] .sa-pulse-grid .sa-dot:nth-child(7) { transition-delay: 980ms; }
.slide[data-active] .sa-pulse-grid .sa-dot:nth-child(8) { transition-delay: 1010ms; }
.slide[data-active] .sa-pulse-grid .sa-dot:nth-child(9) { transition-delay: 1040ms; }
.slide[data-active] .sa-pulse-grid .sa-dot:nth-child(10) { transition-delay: 1070ms; }
.slide[data-active] .sa-pulse-grid .sa-dot:nth-child(11) { transition-delay: 1100ms; }
.slide[data-active] .sa-pulse-grid .sa-dot:nth-child(12) { transition-delay: 1130ms; }
.slide[data-active] .sa-pulse-grid .sa-dot:nth-child(13) { transition-delay: 1160ms; }
.slide[data-active] .sa-pulse-grid .sa-dot:nth-child(14) { transition-delay: 1190ms; }
.slide[data-active] .sa-pulse-grid .sa-dot:nth-child(15) { transition-delay: 1220ms; }
.slide[data-active] .sa-pulse-grid .sa-dot:nth-child(16) { transition-delay: 1250ms; }
.slide[data-active] .sa-pulse-grid .sa-dot:nth-child(17) { transition-delay: 1280ms; }
.slide[data-active] .sa-pulse-grid .sa-dot:nth-child(18) { transition-delay: 1310ms; }
.slide[data-active] .sa-pulse-grid .sa-dot:nth-child(19) { transition-delay: 1340ms; }
.slide[data-active] .sa-pulse-grid .sa-dot:nth-child(20) { transition-delay: 1370ms; }
.slide[data-active] .sa-pulse-grid .sa-dot:nth-child(21) { transition-delay: 1400ms; }
.slide[data-active] .sa-pulse-grid .sa-dot:nth-child(22) { transition-delay: 1430ms; }
.slide[data-active] .sa-pulse-grid .sa-dot:nth-child(23) { transition-delay: 1460ms; }
.slide[data-active] .sa-pulse-grid .sa-dot:nth-child(24) { transition-delay: 1490ms; }
.slide[data-active] .sa-pulse-grid .sa-dot:nth-child(25) { transition-delay: 1520ms; }
.slide[data-active] .sa-pulse-grid .sa-dot:nth-child(26) { transition-delay: 1550ms; }
.slide[data-active] .sa-pulse-grid .sa-dot:nth-child(27) { transition-delay: 1580ms; }
.slide[data-active] .sa-pulse-grid .sa-dot:nth-child(28) { transition-delay: 1610ms; }
.slide[data-active] .sa-pulse-grid .sa-dot:nth-child(29) { transition-delay: 1640ms; }
.slide[data-active] .sa-pulse-grid .sa-dot:nth-child(30) { transition-delay: 1670ms; }
.slide[data-active] .sa-pulse-grid .sa-dot:nth-child(31) { transition-delay: 1700ms; }

/* =========================================================================
   Slide B · Partner observability
   ========================================================================= */

/* Three priority-action tiles row */
.sb-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 22px;
  margin-bottom: 32px;
}
.sb-tile {
  position: relative;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-left: 3px solid var(--orange);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(15,23,42,0.05);
}
.sb-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255,102,0,0.07), transparent 55%);
  pointer-events: none;
}
.sb-tile-eyebrow {
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 700;
  margin-bottom: 8px;
}
.sb-tile-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.005em;
  color: var(--t-text);
  margin-bottom: 8px;
  line-height: 1.1;
}
.sb-tile-body {
  font-size: 15px;
  color: var(--t-text-soft);
  line-height: 1.4;
  margin-bottom: 14px;
  min-height: 42px;
}
.sb-tile-cue {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-text-mute);
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}
.sb-tile-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a04a;
  box-shadow: 0 0 0 0 rgba(22,160,74,0.5);
  animation: sb-pulse 2s ease-out infinite;
}
@keyframes sb-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22,160,74,0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(22,160,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,160,74,0); }
}

/* Lifecycle ribbon */
.sb-lifecycle {
  margin-bottom: 28px;
}
.sb-life-label {
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--t-text-mute);
  margin-bottom: 14px;
}
.sb-life-ribbon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 14px 28px;
  position: relative;
  box-shadow: 0 4px 16px rgba(15,23,42,0.04);
}
.sb-life-ribbon::before {
  content: "";
  position: absolute;
  left: 60px;
  right: 60px;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--orange) 12%, var(--orange) 88%, transparent 100%);
  opacity: 0.55;
  z-index: 0;
}
.sb-life-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
  flex: 1;
}
.sb-life-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(255,102,0,0.18), 0 0 14px rgba(255,102,0,0.5);
}
.sb-life-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t-text);
}

/* Bottom split */
.sb-bottom {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 28px;
  flex: 1;
  min-height: 0;
}
.sb-section-title {
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 700;
  margin-bottom: 14px;
}
.sb-beyond-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sb-beyond-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 18px;
  color: var(--t-text);
  line-height: 1.35;
}
.sb-bullet {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--orange);
  margin-top: 10px;
  flex-shrink: 0;
}

/* Drilldown card */
.sb-dd-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 6px 24px rgba(15,23,42,0.05);
}
.sb-dd-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
}
.sb-dd-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--t-text);
}
.sb-dd-region {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-text-mute);
  margin-top: 4px;
}
.sb-dd-badge {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(22,160,74,0.10);
  color: #16a04a;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid rgba(22,160,74,0.28);
}
.sb-dd-rows {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.sb-dd-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 15px;
  color: var(--t-text-soft);
}
.sb-dd-val {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--t-text);
  font-feature-settings: "tnum" 1;
}
.sb-dd-good { color: #16a04a; }
.sb-dd-accent { color: var(--orange); }

/* Slide B stagger choreography */
.slide[data-active] .sb-tiles .sb-tile:nth-child(1) { transition-delay: 300ms; }
.slide[data-active] .sb-tiles .sb-tile:nth-child(2) { transition-delay: 460ms; }
.slide[data-active] .sb-tiles .sb-tile:nth-child(3) { transition-delay: 620ms; }
.slide[data-active] .sb-lifecycle { transition-delay: 820ms; }
.slide[data-active] .sb-life-ribbon .sb-life-stage:nth-child(1) { transition-delay: 1000ms; }
.slide[data-active] .sb-life-ribbon .sb-life-stage:nth-child(2) { transition-delay: 1120ms; }
.slide[data-active] .sb-life-ribbon .sb-life-stage:nth-child(3) { transition-delay: 1240ms; }
.slide[data-active] .sb-life-ribbon .sb-life-stage:nth-child(4) { transition-delay: 1360ms; }
.slide[data-active] .sb-life-ribbon .sb-life-stage:nth-child(5) { transition-delay: 1480ms; }
.slide[data-active] .sb-life-ribbon .sb-life-stage:nth-child(6) { transition-delay: 1600ms; }
.slide[data-active] .sb-beyond { transition-delay: 1750ms; }
.slide[data-active] .sb-beyond-list li:nth-child(1) { transition-delay: 1880ms; }
.slide[data-active] .sb-beyond-list li:nth-child(2) { transition-delay: 1990ms; }
.slide[data-active] .sb-beyond-list li:nth-child(3) { transition-delay: 2100ms; }
.slide[data-active] .sb-beyond-list li:nth-child(4) { transition-delay: 2210ms; }
.slide[data-active] .sb-drilldown { transition-delay: 1900ms; }

/* =========================================================================
   Slide C · Customer observability — light treatment
   ========================================================================= */

.slide--obs-light {
  background: linear-gradient(180deg, #fafafa 0%, #f1f3f5 100%);
  color: var(--t-text);
}
.slide--obs-light .s-obs-eyebrow { color: var(--orange); }
.slide--obs-light .s-obs-title { color: var(--t-text); }
.slide--obs-light .s-obs-sub { color: var(--t-text-soft); }

/* Hero stat */
.sc-hero {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 8px 0 32px;
  padding: 24px 32px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  box-shadow: 0 10px 40px rgba(15,23,42,0.05);
}
.sc-hero-stat {
  display: flex;
  align-items: baseline;
  color: #16a04a;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1;
}
.sc-hero-num { font-size: 96px; line-height: 0.9; }
.sc-hero-pct { font-size: 50px; line-height: 0.9; opacity: 0.85; margin-left: 4px; }
.sc-hero-meta { display: flex; flex-direction: column; gap: 10px; }
.sc-hero-label {
  font-size: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-text-soft);
  font-weight: 500;
}
.sc-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(22,160,74,0.10);
  color: #16a04a;
  border: 1px solid rgba(22,160,74,0.28);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  align-self: flex-start;
}
.sc-hero-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a04a;
  box-shadow: 0 0 0 0 rgba(22,160,74,0.5);
  animation: sb-pulse 2.2s ease-out infinite;
}

/* Dual flow chains */
.sc-flows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 28px;
}
.sc-flow {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 22px 26px 26px;
  box-shadow: 0 6px 24px rgba(15,23,42,0.04);
}
.sc-flow-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--t-text);
}
.sc-flow-sub {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--t-text-mute);
  margin: 4px 0 18px;
}
.sc-flow-chain {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  row-gap: 12px;
  align-items: center;
}
.sc-step {
  display: contents;
}
.sc-step-check {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(22,160,74,0.12);
  color: #16a04a;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #16a04a;
  position: relative;
}
.sc-step-check svg { width: 16px; height: 16px; }
.sc-step-check::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 2px;
  height: 12px;
  background: rgba(22,160,74,0.22);
  transform: translateX(-50%);
}
.sc-step:last-child .sc-step-check::before { display: none; }
.sc-step-label {
  font-size: 17px;
  color: var(--t-text);
  font-weight: 500;
  padding-left: 14px;
}
.sc-step-uptime {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: #16a04a;
  letter-spacing: 0.04em;
  font-feature-settings: "tnum" 1;
}

/* Bottom trust badges */
.sc-badges {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
}
.sc-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(15,23,42,0.03);
}
.sc-badge svg {
  width: 32px;
  height: 32px;
  color: var(--orange);
  flex-shrink: 0;
}
.sc-badge-text {
  font-size: 14px;
  color: var(--t-text-soft);
  line-height: 1.4;
}
.sc-badge-text strong {
  color: var(--t-text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  display: block;
  margin-bottom: 2px;
}

/* Slide C stagger choreography */
.slide[data-active] .sc-hero { transition-delay: 300ms; }
.slide[data-active] .sc-flows .sc-flow:nth-child(1) { transition-delay: 600ms; }
.slide[data-active] .sc-flows .sc-flow:nth-child(2) { transition-delay: 760ms; }
.slide[data-active] .sc-flow:nth-child(1) .sc-step:nth-child(1) .sc-step-check { transition-delay: 900ms; }
.slide[data-active] .sc-flow:nth-child(1) .sc-step:nth-child(2) .sc-step-check { transition-delay: 1020ms; }
.slide[data-active] .sc-flow:nth-child(1) .sc-step:nth-child(3) .sc-step-check { transition-delay: 1140ms; }
.slide[data-active] .sc-flow:nth-child(1) .sc-step:nth-child(4) .sc-step-check { transition-delay: 1260ms; }
.slide[data-active] .sc-flow:nth-child(1) .sc-step:nth-child(5) .sc-step-check { transition-delay: 1380ms; }
.slide[data-active] .sc-flow:nth-child(2) .sc-step:nth-child(1) .sc-step-check { transition-delay: 1060ms; }
.slide[data-active] .sc-flow:nth-child(2) .sc-step:nth-child(2) .sc-step-check { transition-delay: 1180ms; }
.slide[data-active] .sc-flow:nth-child(2) .sc-step:nth-child(3) .sc-step-check { transition-delay: 1300ms; }
.slide[data-active] .sc-flow:nth-child(2) .sc-step:nth-child(4) .sc-step-check { transition-delay: 1420ms; }
.slide[data-active] .sc-flow:nth-child(2) .sc-step:nth-child(5) .sc-step-check { transition-delay: 1540ms; }
.slide[data-active] .sc-badges .sc-badge:nth-child(1) { transition-delay: 1700ms; }
.slide[data-active] .sc-badges .sc-badge:nth-child(2) { transition-delay: 1830ms; }
.slide[data-active] .sc-badges .sc-badge:nth-child(3) { transition-delay: 1960ms; }

/* =========================================================================
   Section opener — OBSERVABILITY
   ========================================================================= */

.slide--obs-opener {
  background: radial-gradient(circle at 50% 40%, #FF7B1F 0%, var(--orange) 38%, #C44900 100%);
  color: #fff;
  overflow: hidden;
  position: relative;
}

/* Radar-style expanding rings emanating from upper center */
.so-rings {
  position: absolute;
  top: 38%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.so-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.32);
  transform: translate(-50%, -50%) scale(0.1);
  opacity: 0;
}
.slide[data-active] .so-ring {
  animation: so-ring-expand 4.5s ease-out infinite;
}
.slide[data-active] .so-ring:nth-child(1) { animation-delay: 0s; }
.slide[data-active] .so-ring:nth-child(2) { animation-delay: 1.125s; }
.slide[data-active] .so-ring:nth-child(3) { animation-delay: 2.25s; }
.slide[data-active] .so-ring:nth-child(4) { animation-delay: 3.375s; }
@keyframes so-ring-expand {
  0%   { transform: translate(-50%, -50%) scale(0.1); opacity: 0; }
  15%  { opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(7); opacity: 0; }
}

.so-frame {
  position: absolute;
  inset: 0;
  padding: 110px 110px 88px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 2;
}
.so-eyebrow {
  font-size: 20px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  font-weight: 600;
  margin-bottom: 32px;
}
.so-title {
  font-size: 220px;
  line-height: 0.9;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 24px 0;
  text-shadow: 0 8px 60px rgba(0,0,0,0.18);
}
.so-sub {
  font-size: 38px;
  color: rgba(255,255,255,0.9);
  margin: 0 0 72px 0;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.so-lenses {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  width: 100%;
  max-width: 1500px;
}
.so-lens {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(6px);
  border-radius: 18px;
  padding: 30px 28px 32px;
  text-align: left;
}
.so-lens-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.55);
  margin-bottom: 6px;
}
.so-lens-aud {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0.06em;
  color: #fff;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid rgba(255,255,255,0.4);
}
.so-lens-line {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.005em;
  color: #fff;
  line-height: 1.12;
}

/* Section opener stagger */
.slide[data-active] .so-eyebrow { transition-delay: 100ms; }
.slide[data-active] .so-title { transition-delay: 240ms; }
.slide[data-active] .so-sub { transition-delay: 500ms; }
.slide[data-active] .so-lenses .so-lens:nth-child(1) { transition-delay: 900ms; }
.slide[data-active] .so-lenses .so-lens:nth-child(2) { transition-delay: 1080ms; }
.slide[data-active] .so-lenses .so-lens:nth-child(3) { transition-delay: 1260ms; }

/* =========================================================================
   Containers in motion — animated stage (ported from techu-advanced)
   ========================================================================= */
.ctn-stage { flex: 1; display: flex; flex-direction: column; gap: 22px; min-height: 0; }
.ctn-counters {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  border-top: 2px solid var(--t-text);
  padding-top: 16px;
}
.ctn-counter { display: flex; flex-direction: column; gap: 6px; }
.ctn-counter-label { font-size: 16px; color: var(--t-text-mute); }
.ctn-counter-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 72px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.ctn-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 1fr;
  gap: 10px;
  padding: 22px;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 12px;
  flex: 1;
  min-height: 240px;
  align-content: stretch;
}
.ctn-slot {
  aspect-ratio: 1;
  border-radius: 6px;
  background: #E5E5E5;
  position: relative;
  transition: background-color 220ms ease, transform 220ms ease;
}
/* =========================================================================
   Containers in motion — v2: zone-clustered with failover
   ========================================================================= */
.ctn2-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 22px;
  background: rgba(22,160,74,0.08);
  border: 1px solid rgba(22,160,74,0.30);
  border-left: 4px solid #16a04a;
  border-radius: 12px;
  margin-bottom: 18px;
  transition: background 400ms ease, border-color 400ms ease;
}
.ctn2-status[data-impact="warn"] {
  background: rgba(230,169,59,0.10);
  border-color: rgba(230,169,59,0.40);
  border-left-color: #E6A93B;
}
.ctn2-status-left { display: flex; align-items: center; gap: 16px; }
.ctn2-status-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: #16a04a;
  box-shadow: 0 0 0 0 rgba(22,160,74,0.55);
  animation: ctn2-pulse 1.8s ease-out infinite;
  flex-shrink: 0;
}
.ctn2-status[data-impact="warn"] .ctn2-status-dot { background: #E6A93B; box-shadow: 0 0 0 0 rgba(230,169,59,0.55); }
@keyframes ctn2-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22,160,74,0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(22,160,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,160,74,0); }
}
.ctn2-status-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--t-text);
  text-transform: uppercase;
}
.ctn2-status-state { color: #16a04a; }
.ctn2-status[data-impact="warn"] .ctn2-status-state { color: #E6A93B; }
.ctn2-status-meta {
  font-size: 13px;
  color: var(--t-text-soft);
  margin-top: 2px;
}
.ctn2-uptime { color: #16a04a; font-weight: 700; }
.ctn2-status-right { display: flex; gap: 28px; align-items: center; }
.ctn2-status-stat { text-align: right; }
.ctn2-status-stat-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: var(--t-text);
  font-variant-numeric: tabular-nums;
}
.ctn2-status-stat-lbl {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--t-text-mute);
  margin-top: 4px;
}

/* Zone columns */
.ctn2-zones {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  flex: 1;
  min-height: 0;
}
.ctn2-zone {
  background: var(--t-card);
  border: 1px solid var(--t-border, var(--border));
  border-radius: 14px;
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--t-shadow-soft, 0 4px 16px rgba(15,23,42,0.04));
  transition: opacity 400ms ease, filter 400ms ease;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.ctn2-zone[data-state="offline"] {
  opacity: 0.7;
  filter: saturate(0.4);
  border-color: #DC2626;
  box-shadow: 0 0 0 2px rgba(220,38,38,0.5), 0 0 24px rgba(220,38,38,0.25);
  animation: ctn2-offline-pulse 1.6s ease-in-out infinite;
}
.ctn2-zone[data-state="failing"] {
  border-color: #DC2626;
  box-shadow: 0 0 0 2px rgba(220,38,38,0.6), 0 0 28px rgba(220,38,38,0.35);
  animation: ctn2-offline-pulse 1.1s ease-in-out infinite;
}
@keyframes ctn2-offline-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(220,38,38,0.5), 0 0 24px rgba(220,38,38,0.25); }
  50%      { box-shadow: 0 0 0 3px rgba(220,38,38,0.8), 0 0 36px rgba(220,38,38,0.45); }
}

.ctn2-zone-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ctn2-zone-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.005em;
  color: var(--t-text);
}
.ctn2-zone-tag {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--t-text-mute);
  font-weight: 700;
  margin-right: 4px;
}
.ctn2-zone-region {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t-text-mute);
  margin-top: 4px;
}
.ctn2-zone-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background 300ms ease, color 300ms ease;
}
.ctn2-zone-status[data-state="healthy"]    { background: rgba(22,160,74,0.15);  color: #16a04a; }
.ctn2-zone-status[data-state="scaling"]    { background: rgba(35,111,135,0.18);  color: var(--turq); }
.ctn2-zone-status[data-state="degraded"]   { background: rgba(230,169,59,0.18); color: #E6A93B; }
.ctn2-zone-status[data-state="failing"]    { background: rgba(229,91,91,0.18);  color: #DC2626; }
.ctn2-zone-status[data-state="offline"]    { background: rgba(140,140,140,0.18); color: var(--t-text-mute); }
.ctn2-zone-status[data-state="recovering"] { background: rgba(35,111,135,0.18);  color: var(--turq); }
.ctn2-zone-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  animation: ctn2-mini-pulse 1.4s ease-out infinite;
}
@keyframes ctn2-mini-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.7); opacity: 0.55; }
}

.ctn2-zone-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  background: var(--off-white);
  border-radius: 10px;
  padding: 16px;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}
html[data-theme="dark"] .ctn2-zone-grid { background: rgba(255,255,255,0.04); }
.ctn2-slot {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: rgba(0,0,0,0.10);
  border: 1px solid rgba(0,0,0,0.04);
  transition: background-color 220ms ease, transform 220ms ease, opacity 220ms ease;
}
html[data-theme="dark"] .ctn2-slot { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.05); }
.ctn2-slot[data-state="healthy"]  { background: var(--orange); animation: ctn-pulse 2.4s ease-in-out infinite; }
html[data-theme="dark"] .ctn2-slot[data-state="healthy"] { background: var(--orange); }
.ctn2-slot[data-state="scaling"]  { background: var(--turq); animation: ctn-spawn 360ms cubic-bezier(.34,1.56,.64,1); }
html[data-theme="dark"] .ctn2-slot[data-state="scaling"] { background: var(--turq); }
.ctn2-slot[data-state="failing"]  { background: #DC2626; animation: ctn-fail 480ms ease-out; }
.ctn2-slot[data-state="empty"]    { opacity: 0.85; }

.ctn2-zone-footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  color: var(--t-text-soft);
}
.ctn2-zone-count { font-family: var(--font-sans); font-weight: 600; letter-spacing: 0.04em; }
.ctn2-zone-count strong {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--t-text);
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
}
.ctn2-zone-count span { color: var(--t-text-mute); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.ctn2-zone-loadbar {
  height: 6px;
  background: var(--off-white);
  border-radius: 3px;
  overflow: hidden;
}
html[data-theme="dark"] .ctn2-zone-loadbar { background: rgba(255,255,255,0.06); }
.ctn2-zone-loadfill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--orange), var(--orange-ink));
  border-radius: 3px;
  transition: width 700ms cubic-bezier(.22,.9,.25,1);
}
.ctn2-zone-pct {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--t-text);
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: right;
}

/* Phase narrator strip */
.ctn2-phase {
  margin-top: 12px;
  padding: 12px 20px;
  background: var(--off-white);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 16px;
}
html[data-theme="dark"] .ctn2-phase { background: rgba(255,255,255,0.04); }
.ctn2-phase-label {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--t-text-mute);
}
.ctn2-phase-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--orange);
  letter-spacing: 0.02em;
}

html[data-theme="dark"] .ctn-slot { background: rgba(255,255,255,0.06); }
.ctn-slot[data-state="healthy"] { background: var(--orange); animation: ctn-pulse 2.4s ease-in-out infinite; }
.ctn-slot[data-state="healing"] { background: var(--turq); animation: ctn-spawn 360ms cubic-bezier(.34,1.56,.64,1); }
.ctn-slot[data-state="failed"]  { background: #DC2626; animation: ctn-fail 480ms ease-out; }
/* Re-assert active states under dark mode (specificity climb) */
html[data-theme="dark"] .ctn-slot[data-state="healthy"] { background: var(--orange); }
html[data-theme="dark"] .ctn-slot[data-state="healing"] { background: var(--turq); }
html[data-theme="dark"] .ctn-slot[data-state="failed"]  { background: #DC2626; }
@keyframes ctn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,102,0,0.45); transform: scale(1); }
  50%      { box-shadow: 0 0 0 6px rgba(255,102,0,0);   transform: scale(0.94); }
}
@keyframes ctn-spawn {
  from { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes ctn-fail {
  0%   { transform: scale(1);   box-shadow: 0 0 0 0 rgba(220,38,38,0.6); }
  35%  { transform: scale(0.82); box-shadow: 0 0 0 18px rgba(220,38,38,0); }
  100% { transform: scale(1); }
}
.ctn-az-panel {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.ctn-az-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}
.ctn-az-name {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-text-soft);
  white-space: nowrap;
}
.ctn-az-track {
  height: 8px;
  background: var(--off-white);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.ctn-az-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--orange), var(--orange-ink));
  border-radius: 4px;
  transition: width 480ms cubic-bezier(.22,.9,.25,1);
}
.ctn-az-fill[data-az="B"] { background: linear-gradient(90deg, var(--turq), var(--turq-ink)); }
.ctn-az-fill[data-az="C"] { background: linear-gradient(90deg, var(--t-text), var(--t-text-soft)); }
.ctn-az-pct {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 14px;
  color: var(--t-text);
  min-width: 36px;
  text-align: right;
}


/* ---------- Taurine hub navigation (hamburger, top-right) — present on every deck slide ---------- */
.tn-nav-toggle {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 10000;
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: rgba(8, 27, 35, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  cursor: pointer;
  padding: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.tn-nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: transform 260ms ease, opacity 200ms ease;
}
.tn-nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tn-nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.tn-nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.tn-nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(4, 12, 16, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}
.tn-nav-scrim.is-open { opacity: 1; pointer-events: auto; }

.tn-nav-menu {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(360px, 86vw);
  z-index: 10002;
  background: rgba(8, 27, 35, 0.97);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(.22,.9,.25,1);
  display: flex;
  flex-direction: column;
}
.tn-nav-menu.is-open { transform: translateX(0); }

.tn-nav-close {
  align-self: flex-end;
  margin: 24px 24px 0 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b7c7cd;
  text-decoration: none;
  border-radius: 10px;
  transition: color 200ms ease, background 200ms ease;
}
.tn-nav-close:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); }
.tn-nav-close svg { width: 20px; height: 20px; }

.tn-nav-menu-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 36px 48px;
  margin-top: 90px;
  margin-bottom: 0;
}
.tn-nav-menu-inner a {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 19px;
  color: #eef3f5;
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  transition: color 200ms ease;
  display: block;
}
.tn-nav-menu-inner a:hover { color: #ff8f3d; }
.tn-nav-menu-inner a:last-child { border-bottom: none; }
.tn-nav-menu-inner a.is-current { color: #ff6600; }

body.tn-nav-open { overflow: hidden; }

@media (max-width: 760px) {
  .tn-nav-toggle { top: 18px; right: 18px; width: 40px; height: 40px; }
}


/* "Scroll" cue on the intro slide — mobile-flow only (see the media query
   below); irrelevant and hidden on the fixed, paginated desktop/tablet
   canvas. Fades out once deck-stage.js detects the visitor has started
   scrolling (body.deck-scroll-started). */
.scroll-cue { display: none; }

/* =========================================================================
   MOBILE PORTRAIT — continuous-scroll reflow
   Below this breakpoint deck-stage.js switches the canvas from a fixed,
   scaled, paginated 1920×1080 stage to normal document flow (see its own
   stylesheet). Everything here reflows the per-slide layouts that were
   built assuming that fixed canvas into a single readable column. Desktop
   and tablet (anything outside this query) are completely untouched.

   This deck has ~27 slides with a lot of bespoke, pixel-positioned artwork
   (the Eliminate Complexity device diagram, the Pure Cloud Terminals /
   Scanning Workflows device-panel mockups, the Why SAFEQ Cloud wheel, the
   Containers-in-motion dashboards). Those get a "shrink the whole
   composition to fit" treatment rather than a full rebuild; the more
   conventional text/stat/card slides get a full reflow to a single column,
   matching the DocAI Fabric pass.
   ========================================================================= */
@media (max-width: 700px) and (orientation: portrait) {

  html, body { overflow-x: hidden; }

  .slide {
    width: 100%;
    min-height: 100svh;
    display: flex;
    align-items: stretch;
  }

  /* ---------- standard padded frame ---------- */
  .frame {
    position: static !important;
    inset: auto !important;
    width: 100%;
    padding: 92px 24px 64px !important;
    flex-direction: column !important;
  }
  .frame[style*="flex-direction: row"] {
    flex-direction: column !important;
    gap: 32px !important;
  }

  /* ---------- intro / outro moment ---------- */
  .s-intro-content {
    position: static !important;
    inset: auto !important;
    width: 100%;
    padding: 88px 24px !important;
    gap: 24px !important;
  }
  .s-intro-cloud { width: 100px; top: 32px; right: 24px; }
  .s-intro-logo { height: auto; width: auto; max-width: 78vw; max-height: 110px; }
  .s-intro-taurine-mark { top: 22px; left: 20px; height: 28px; }
  .s-intro-tag { font-size: 22px !important; max-width: 100% !important; }
  .s-outro-headline { font-size: clamp(32px, 9.5vw, 44px) !important; max-width: 100% !important; }
  .s-outro-actions { width: 100%; }
  .s-outro-btn {
    flex: 1 1 auto;
    text-align: center;
    justify-content: center;
    padding: 16px 28px !important;
    font-size: 16px !important;
  }

  /* ---------- typography ---------- */
  .eyebrow { font-size: 14px; margin: 0 0 16px; }
  .h-title { font-size: clamp(32px, 9.5vw, 44px) !important; }
  .h-section { font-size: clamp(28px, 8.5vw, 36px) !important; }
  .h-display { font-size: clamp(40px, 12vw, 64px) !important; }
  /* Per-slide custom headline/subhead classes each hard-code their own
     desktop font-size with !important, so the generic .h-title/.display
     rules above don't reach them — override each by name. */
  .s5-h1 { font-size: clamp(30px, 9vw, 40px) !important; }
  /* .s5-headline is absolutely positioned directly on the slide (like
     .s13-headline below), so it needs its own mobile position. */
  .s5-headline {
    left: 24px !important;
    top: 64px !important;
    right: 24px !important;
    max-width: calc(100vw - 48px) !important;
  }
  /* .s5-stage was a freeform "canvas art" composition (laptop mockup +
     orange burst + callout text) built for a fixed 1700x740 design space.
     Shrinking that whole canvas as one block left the laptop and circle
     side by side but tiny, with a lot of dead space below. Instead: drop
     the fixed canvas, let the laptop sit full-width up top in normal
     flow, and reflow the circle/cloud/text/badge group (wrapped in
     .s5-circle-group) as its own compact, self-centered block right
     underneath it. */
  /* This slide has no .frame wrapper — its children sit directly on the
     section, which defaults to a row flex layout. Force a column so the
     (now static) .s5-stage stacks cleanly below the absolutely-positioned
     headline instead of overlapping it. */
  section[data-label="SAFEQ Cloud SaaS"] {
    flex-direction: column !important;
    align-items: stretch !important;
    /* Content (heading + laptop + circle) is much shorter than a full
       screen now that the composition reflows instead of being shrunk
       onto a fixed 1700x740 canvas — don't force a full-viewport-height
       slide with a dead gap before the next one. */
    min-height: 0 !important;
  }
  .s5-stage {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 168px !important;
    padding-bottom: 56px !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .s5-laptop {
    order: 1;
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 88% !important;
    max-width: 340px;
  }
  .s5-circle-group {
    order: 2;
    position: relative;
    width: 310px;
    height: 310px;
    flex-shrink: 0;
    /* Pull the circle up ~15% of its own footprint so it tucks under the
       laptop's base instead of just touching it. */
    margin-top: -42px;
  }
  .s5-burst {
    top: 0 !important;
    left: 50% !important;
    right: auto !important;
    width: 275px !important;
    height: 275px !important;
    transform: translate(-50%, 0) scale(0.9) !important;
  }
  .slide[data-active] .s5-burst {
    transform: translate(-50%, 0) scale(1) !important;
  }
  /* Cloud icon and SaaS badge: same box size, mirrored at the 7 o'clock and
     5 o'clock positions on the circle's rim, each overlapping the circle by
     about a quarter of the icon's own width. */
  .s5-teal-cloud {
    top: 213px !important;
    left: 35px !important;
    bottom: auto !important;
    right: auto !important;
    margin-top: 0 !important;
    width: 96px !important;
    height: 96px !important;
  }
  .s5-burst-text-wrap {
    top: 0 !important;
    left: 50% !important;
    right: auto !important;
    width: 210px !important;
    transform: translate(-50%, 0) !important;
    margin-top: 107px !important;
  }
  .s5-burst-text {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }
  .s5-saas-badge-wrap {
    display: none !important;
  }
  .s5-saas-badge {
    width: 32px !important;
    height: 32px !important;
  }
  .s6-title { font-size: clamp(28px, 8.5vw, 38px) !important; max-width: 100% !important; }
  .s8-title { font-size: clamp(28px, 8.5vw, 38px) !important; }
  .s9-title { font-size: clamp(26px, 7.5vw, 34px) !important; }
  .s-obs-title { font-size: clamp(30px, 9vw, 42px) !important; }
  .s-obs-sub { font-size: 16px !important; }
  .so-title { font-size: clamp(44px, 15vw, 72px) !important; }
  .so-sub { font-size: 18px !important; margin-bottom: 32px !important; }
  .s8-subhead, .s9-subhead { font-size: 16px !important; }
  /* .s13-headline is absolutely positioned directly on the slide (not
     inside .frame), so the mobile .frame width/padding rules never reach
     it — it needs its own mobile position + a width cap so "WHY [logo]"
     can't run past the viewport edge. */
  .s13-headline {
    left: 24px !important;
    top: 28px !important;
    right: 24px !important;
    gap: 16px !important;
    max-width: calc(100vw - 48px) !important;
    flex-wrap: wrap !important;
  }
  .s13-why { font-size: clamp(26px, 8vw, 36px) !important; }
  .s13-why-logo { height: 32px !important; }
  .perex { font-size: 18px !important; max-width: 100% !important; }
  .body, .body-lg { font-size: 16px !important; }
  .caption { font-size: 12px; }
  .stat-big { font-size: clamp(56px, 18vw, 96px) !important; }
  .stat-label { font-size: 15px; margin-top: 10px; }

  /* ---------- chrome ---------- */
  .logo-tl { top: 20px; left: 20px; height: 24px; }
  .logo-tr { top: 20px; right: 20px; height: 44px; }
  .logo-tr img { height: 44px; }

  /* ---------- generic layout collapse ----------
     The vast majority of per-slide layouts in this deck are authored as
     an inline style="display:grid; grid-template-columns:…" on a wrapper
     div rather than a shared class — this one rule collapses almost all
     of them to a single column. */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* A grid track's implicit minimum size is its content's min-content
     width, not 0 — so a row with non-wrapping content (e.g. a card
     heading) can blow the track out to hundreds of px wider than the
     1fr container, even though grid-template-columns says 1fr. Forcing
     every direct grid item down to min-width:0 lets it actually shrink
     to fit, same fix as the flex min-width:auto issue above. */
  [style*="grid-template-columns"] > * {
    min-width: 0 !important;
  }
  .pillars { grid-template-columns: 1fr !important; gap: 20px !important; }
  .sb-tiles { grid-template-columns: 1fr !important; gap: 16px !important; }
  .sb-bottom { grid-template-columns: 1fr !important; gap: 28px !important; }
  .sc-flows { grid-template-columns: 1fr !important; gap: 20px !important; }
  .sc-badges { grid-template-columns: 1fr !important; gap: 14px !important; }
  .s-obs-body { grid-template-columns: 1fr !important; gap: 24px !important; }
  .sa-cockpit { grid-template-columns: 1fr !important; grid-template-rows: auto !important; }
  .sa-map { grid-column: 1 !important; height: 220px !important; }
  .s6-body { grid-template-columns: 1fr !important; }
  /* Named-class grid, not caught by the generic [style*="grid-template-columns"]
     rule (same pattern as .so-lenses / .sb-bottom). */
  .s6-checks {
    grid-template-columns: 1fr !important;
    margin: 24px 0 0 !important;
    row-gap: 16px !important;
    max-width: 100% !important;
  }
  /* Fixed 520x520 halo behind the cloud logo — shrink it to fit the
     mobile content width; .s6-cloud-wrap itself is already responsive
     (width:100%;max-width:480px) so only the halo needs a cap. */
  .s6-halo {
    width: 280px !important;
    height: 280px !important;
  }
  .s8-body { grid-template-columns: 1fr !important; gap: 24px !important; align-content: start !important; }
  .s9-body { grid-template-columns: 1fr !important; gap: 24px !important; align-content: start !important; }
  .so-lenses { grid-template-columns: 1fr !important; gap: 16px !important; max-width: 100% !important; }
  .so-lens-aud { font-size: 20px !important; margin-bottom: 12px !important; padding-bottom: 10px !important; }
  .so-lens-line { font-size: 22px !important; }

  /* Fixed pixel-width panels (authored for the 1920px canvas) */
  [style*="width: 720px"] { width: 100% !important; }

  /* "Y Soft at a Glance" circular photo collage — scale the whole cluster
     down proportionally (~0.43×) rather than reflowing it. */
  [style*="width: 640px"][style*="height: 840px"] { width: 260px !important; height: 340px !important; margin: 0 auto; }
  [style*="width: 380px"][style*="height: 380px"] { width: 160px !important; height: 160px !important; }
  [style*="width: 300px"][style*="height: 300px"] { width: 120px !important; height: 120px !important; top: 130px !important; }
  [style*="width: 340px"][style*="height: 340px"] { width: 140px !important; height: 140px !important; }

  /* ---------- pill / life-cycle ribbon (Partner slide) ---------- */
  .sb-life-ribbon {
    overflow-x: auto;
    justify-content: flex-start;
    gap: 24px;
    border-radius: 20px;
    -webkit-overflow-scrolling: touch;
  }
  .sb-life-ribbon::before { display: none; }

  /* ---------- data table — let it scroll horizontally rather than
     squeeze columns unreadably ---------- */
  .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .data-table th, .data-table td { font-size: 15px; padding: 10px 12px; }

  /* ---------- cards ----------
     !important is required here: many cards set font-size inline per-slide
     (e.g. style="font-size: 38px"), which otherwise beats a plain class
     rule of equal specificity. */
  .card { padding: 26px 24px !important; }
  .card-title { font-size: 22px !important; }
  .card-body { font-size: 16px !important; }
  .caption { font-size: 12px !important; }
  /* Icon/number roundels sized inline (56px, 96px, 72px) — shrink slightly
     and never let them shrink below their own font-sized numeral. */
  [style*="border-radius: 50%"][style*="width: 96px"] { width: 64px !important; height: 64px !important; font-size: 26px !important; }

  /* Icon-circle + text flex rows (numbered callout cards) — the text
     sibling needs min-width:0 or a flex row refuses to let it wrap and
     pushes it past the container edge instead. */
  .card[style*="align-items: center"] { flex-wrap: wrap; }
  .card[style*="align-items: center"] > div:last-child { min-width: 0; flex: 1 1 200px; }

  /* ---------- "Why SAFEQ Cloud" — feature-list card (left) + wheel
     (right) on desktop; stack vertically on mobile and drop the desktop
     right-edge fade mask (it only makes sense next to the wheel). ---------- */
  .s13-body {
    flex-direction: column !important;
    align-items: center !important;
    gap: 28px !important;
  }
  .s13-list-card {
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    max-width: 420px;
    padding: 24px 22px !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  .s13-item { font-size: 17px !important; gap: 12px !important; }
  .s13-item small { font-size: 13px !important; }
  .s13-wheel-wrap { width: 260px !important; height: 260px !important; }
  .s13-wheel { width: 260px !important; height: 260px !important; }
  .s13-center-logo { width: 84px !important; }

  /* ---------- "SAFEQ Cloud 3 Pillars" cards ---------- */
  .pillar { padding: 24px 22px !important; gap: 10px !important; }
  .pillar-num { width: 44px !important; height: 44px !important; font-size: 16px !important; }
  .pillar-title { font-size: 20px !important; }
  .pillar p { font-size: 15px !important; }
  .pillar ul li { font-size: 14px !important; padding: 5px 0 !important; gap: 10px !important; }

  /* ---------- "Three Reasons" — the connector-arrows SVG is authored for a
     3-column 1700px-wide row and just becomes squashed, meaningless
     squiggles once that row collapses to a single mobile column; the
     per-point icons and headline stay, just resized. ---------- */
  #tr-arrows { display: none !important; }
  #tr-row { padding-top: 8px !important; }
  #tr-icon-1, #tr-icon-2, #tr-icon-3 { width: 56px !important; height: 56px !important; }
  .tr-title { font-size: 20px !important; margin: 14px 0 8px !important; }
  [style*="gap: 80px"] { gap: 36px !important; }

  /* ---------- Bare-inline "slide 6 style" card headers/body used across
     Three Deployment Options, Windows Protected Print, Reporting,
     Containerization, Feature Parity, etc. These are hand-styled h3/div/p
     tags with a per-slide inline font-size rather than a shared class, so
     they must be matched by their inline signature. ---------- */
  h3[style*="text-transform: uppercase"],
  div[style*="text-transform: uppercase"][style*="font-weight: 700"] {
    font-size: 19px !important;
    line-height: 1.15 !important;
    margin-bottom: 6px !important;
  }
  [style*="font-size: 38px"] { font-size: 21px !important; }
  [style*="font-size: 30px"] { font-size: 19px !important; }
  [style*="font-size: 28px"] { font-size: 18px !important; }
  [style*="font-size: 24px"] { font-size: 16px !important; }
  [style*="font-size: 20px"] { font-size: 15px !important; }
  [style*="font-size: 18px"] { font-size: 14px !important; }
  [style*="width: 84px"][style*="height: 84px"] { width: 52px !important; height: 52px !important; }
  [style*="width: 56px"][style*="height: 56px"] { width: 42px !important; height: 42px !important; }
  section[data-label="Feature Parity"] { --rm-fs: 0.6; }
  [style*="padding: 44px 36px"] { padding: 24px 20px !important; }
  [style*="padding: 56px 48px"] { padding: 24px 20px !important; }
  [style*="padding: 40px 38px"] { padding: 22px 20px !important; }
  [style*="padding: 28px 28px"] { padding: 18px 16px !important; }
  [style*="padding: 32px"] { padding: 20px !important; }

  /* ---------- Pure Cloud Terminals / Scanning Workflows — drop the
     photocopier line-art, the touchscreen highlight square, and the
     "Demo User" label overlay on mobile; keep just the terminal UI
     screenshot, which is the actual content. ---------- */
  .s8-mfp-photo,
  .s8-screen-ring,
  .panel-user-mask {
    display: none !important;
  }
  .s8-mfp-stage { min-height: 0 !important; padding: 12px 0; }
  .s8-panel-frame,
  .s9-panel-frame {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto;
    opacity: 1 !important;
    animation: none !important;
  }
  /* Callout cards under the terminal screenshot: match its width, shrink
     down to icon-left / label-right rows instead of stacked full-width
     blocks. */
  .s8-callouts,
  section[data-label="Scanning Workflows"] .s9-features {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .s8-callouts {
    gap: 10px !important;
  }
  /* These two slides' content is much shorter than a full screen once
     everything reflows to a single column — don't force min-height:100svh
     (inherited from the generic .slide rule) and leave a dead gap before
     the next slide starts. Drop the .frame from its normal absolute/
     inset:0 positioning so the section can shrink to fit its content
     instead, and trim its side padding a little so the terminal
     screenshot (and anything else matching its width) has more room to
     be shown ~10% larger than plain 100%-of-frame would allow. */
  section[data-label="Pure Cloud Terminals"],
  section[data-label="Scanning Workflows"] {
    min-height: 0 !important;
  }
  section[data-label="Pure Cloud Terminals"] .frame,
  section[data-label="Scanning Workflows"] .frame {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-bottom: 32px !important;
  }
  .s9-icons-row {
    justify-content: center !important;
  }
  section[data-label="Scanning Workflows"] .s9-box {
    box-sizing: border-box !important;
  }
  .s8-callout {
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 16px !important;
    box-sizing: border-box !important;
  }
  .s8-icon-badge {
    width: 40px !important;
    height: 40px !important;
  }
  .s8-icon-badge svg {
    width: 18px !important;
    height: 18px !important;
  }
  .s8-callout-label {
    font-size: 16px !important;
  }

  /* ---------- Observability hero stat — big number + meta side-by-side on
     desktop; wrap and shrink so the meta text doesn't collide with the
     nav toggle button on narrow phones. ---------- */
  .sc-hero { flex-wrap: wrap; gap: 10px 14px; padding: 20px 22px; }
  .sc-hero-num { font-size: 56px !important; }
  .sc-hero-pct { font-size: 28px !important; }
  .sc-hero-meta { gap: 6px !important; }
  .sc-hero-label { font-size: 12px !important; letter-spacing: 0.1em !important; }

  /* ---------- Scale Baseline — map first, five stats as a compact 2-column
     grid beneath it (DOM order stays stats-then-map; flex `order` swaps
     what's seen without touching the animation/count-up JS hooks, which
     key off the existing structure). ---------- */
  section[data-label="Scale Baseline"] .frame { padding: 92px 24px 48px !important; }
  section[data-label="Scale Baseline"] .scaling-map { order: 1; margin-bottom: 20px; }
  section[data-label="Scale Baseline"] .scaling-map > div { max-width: 320px !important; }
  section[data-label="Scale Baseline"] .stagger { order: 2; }
  section[data-label="Scale Baseline"] .stagger[style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  section[data-label="Scale Baseline"] .stagger [style*="border-right"] {
    border-right: 1px solid var(--border) !important;
  }
  section[data-label="Scale Baseline"] .stagger > div:nth-child(2n) {
    border-right: 0 !important;
  }
  /* 5 stats don't divide evenly into the 2-column mobile grid, leaving the
     "3× Availability zones" tile stranded alone on its own row. Drop it so
     the remaining 4 fill a clean 2x2. */
  section[data-label="Scale Baseline"] .stagger[style*="grid-template-columns"] > div:last-child {
    display: none !important;
  }

  /* Home button: keep it out of the way of thumb-scrolling but still reachable. */

  /* ---------- scroll cue (intro slide only) ---------- */
  .scroll-cue {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: absolute;
    left: 50%;
    bottom: 36px;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.85);
    opacity: 0.75;
    transition: opacity 400ms ease;
    z-index: 3;
  }
  .scroll-cue-label {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .scroll-cue svg {
    width: 18px;
    height: 18px;
    animation: scrollCueBob 1.8s ease-in-out infinite;
  }
  body.deck-scroll-started .scroll-cue {
    opacity: 0;
    pointer-events: none;
  }
  @keyframes scrollCueBob {
    0%, 100% { transform: translateY(0); opacity: 0.55; }
    50% { transform: translateY(6px); opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .scroll-cue svg { animation: none; }
  }
}