/* =========================================================================
   DocAI Fabric — Taurine Software edition
   Built on the <deck-stage> engine (fixed 1920×1080 canvas, auto-scaled).
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@700;800&display=swap");

:root {
  /* Teal-navy, matching the hub landing page's own palette */
  --navy-950: #081b23;
  --navy-900: #0d2e3a;
  --navy-800: #124559;
  --navy-700: #1a5a70;
  --navy-600: #236f87;

  --orange: #ff6600;
  --orange-light: #ff8f3d;
  --orange-wash: rgba(255, 102, 0, 0.14);

  --white: #ffffff;
  --text: #eef3f5;
  --text-soft: #b7c7cd;
  --text-mute: #82989f;

  --green: #35c98f;
  --red: #ef5b5b;

  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.22);

  --font-display: "Poppins", sans-serif;
  --font-sans: "Inter", sans-serif;
}

* { box-sizing: border-box; }

html {
  background: var(--navy-950);
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  background: var(--navy-950);
  font-family: var(--font-sans);
  overscroll-behavior-y: none;
}

.slide {
  position: relative;
  background: var(--navy-900);
  color: var(--text);
  overflow: hidden;
}

.slide--wash { background: var(--navy-950); }

/* ---------- layout frame ---------- */

.frame {
  position: absolute;
  inset: 0;
  padding: 150px 130px 110px;
  display: flex;
  flex-direction: column;
}

.frame--center {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 160px;
}

.frame--row {
  flex-direction: row;
  align-items: center;
  gap: 90px;
}

/* ---------- typography ---------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-light);
  margin: 0 0 30px;
}

.eyebrow::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 4px;
  background: var(--orange);
  flex-shrink: 0;
}

.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--white);
  margin: 0;
}

.h-hero { font-size: 132px; font-family: "Manrope", var(--font-display); font-weight: 800; letter-spacing: -0.01em; }
.h-title { font-size: 82px; }
.h-section { font-size: 62px; }

.perex {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.42;
  color: var(--text-soft);
  max-width: 1080px;
  margin: 26px 0 0;
}

.perex--center { margin-left: auto; margin-right: auto; }

.body-sm {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-soft);
}

.kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
  border: 1px solid var(--border-strong);
  padding: 8px 18px;
  border-radius: 100px;
}

/* ---------- chrome ---------- */

.logo-tl {
  position: absolute;
  top: 54px;
  left: 130px;
  height: 42px;
  z-index: 5;
}

.tag-tr {
  position: absolute;
  top: 62px;
  right: 130px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
  border: 1px solid var(--border-strong);
  padding: 8px 16px;
  border-radius: 100px;
  z-index: 5;
}

/* ---------- glows / motifs ---------- */

.glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
}

.glow--orange { background: radial-gradient(circle at center, rgba(255,102,0,0.30), transparent 68%); }
.glow--blue   { background: radial-gradient(circle at center, rgba(35,111,135,0.55), transparent 68%); }

.dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1.6px, transparent 1.6px);
  background-size: 34px 34px;
  pointer-events: none;
}

/* ---------- grids ---------- */

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }

/* ---------- cards / pillars ---------- */

.card {
  background: var(--navy-800);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 38px 36px;
}

.card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  color: var(--white);
  margin: 0 0 16px;
}

.card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card-list li {
  position: relative;
  padding-left: 26px;
  font-size: 19px;
  line-height: 1.45;
  color: var(--text-soft);
}

.card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: var(--orange);
}

.pillar {
  text-align: left;
  background: rgba(13, 46, 58, 0.62);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 30px 26px;
}

.pillar .pillar-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.pillar .pillar-icon svg { width: 26px; height: 26px; stroke: var(--white); }

.pillar h4 {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--white);
  margin: 0 0 10px;
}

.pillar p {
  font-size: 17px;
  color: var(--text-soft);
  margin: 0;
  line-height: 1.45;
}

/* ---------- stats ---------- */

.stat-row { display: flex; gap: 28px; margin-top: 20px; }

.stat-big {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 97px;
  color: var(--orange);
  line-height: 1;
}

.stat-label {
  font-size: 18px;
  color: var(--text-soft);
  margin-top: 10px;
  max-width: 220px;
}

.stat-block { flex: 1; }

.stat-card {
  flex: 1;
  background: var(--navy-800);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 32px 30px;
}
.stat-card .stat-big { font-size: 64px; }
.stat-card .stat-label { max-width: none; }

/* ---------- process steps ---------- */

.steps { display: flex; gap: 22px; position: relative; }

.step {
  flex: 1;
  background: rgba(13, 46, 58, 0.62);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 34px 28px;
  position: relative;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #236f87;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  margin-bottom: 20px;
}

.step h4 { font-family: var(--font-display); font-size: 21px; color: var(--white); margin: 0 0 10px; }
.step p { font-size: 16.5px; color: var(--text-soft); margin: 0; line-height: 1.45; }

.step-arrow {
  position: absolute;
  top: 50%;
  right: -22px;
  transform: translateY(-50%);
  color: var(--orange);
  font-size: 22px;
  z-index: 2;
}

/* ---------- compare table ---------- */

.compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.compare-col {
  border-radius: 20px;
  padding: 40px 32px;
  border: 1px solid var(--border);
  background: rgba(13, 46, 58, 0.62);
}

.compare-col.is-winner {
  background: rgba(13, 46, 58, 0.62);
  border-color: rgba(242,106,33,0.55);
}

.compare-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--navy-800);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.compare-icon--accent { background: var(--orange); }

.compare-col h4 {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0 0 22px;
}
.compare-col.is-winner h4 { color: var(--orange-light); }

.compare-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 19px;
  line-height: 1.45;
  color: var(--text-soft);
  padding: 13px 0;
  border-top: 1px solid var(--border);
}
.compare-item:first-of-type { border-top: none; padding-top: 0; }
.compare-item.is-strong { color: var(--text); }

.mark {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  margin-top: 1px;
}
.mark--x { background: rgba(239,91,91,0.16); color: var(--red); }
.mark--check { background: rgba(53,201,143,0.2); color: var(--green); }

/* ---------- badges ---------- */

.badge-row { display: flex; gap: 20px; margin-top: 10px; }

.badge {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--border);
  background: var(--navy-800);
  border-radius: 20px;
  padding: 22px 24px;
}

.badge .badge-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--orange-light);
  flex-shrink: 0;
}

.badge strong { display: block; font-family: var(--font-display); font-size: 18px; color: var(--white); }
.badge span { font-size: 14px; color: var(--text-mute); }

/* ---------- timeline ---------- */

.timeline { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }

.timeline-col {
  background: rgba(13, 46, 58, 0.62);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 34px 28px;
}

.week-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--orange);
  margin-bottom: 10px;
}

.timeline-col h4 { font-family: var(--font-display); font-size: 22px; color: var(--white); margin: 0 0 18px; }

/* ---------- architecture diagram ---------- */

.diagram {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  position: relative;
  padding: 20px 0;
}

.diagram-node {
  background: var(--navy-800);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  padding: 22px 20px;
  width: 190px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.diagram-node .dn-icon {
  width: 42px;
  height: 42px;
  margin: 0 auto 12px;
  border-radius: 12px;
  background: var(--orange-wash);
  display: flex;
  align-items: center;
  justify-content: center;
}
.diagram-node .dn-icon svg { width: 22px; height: 22px; stroke: var(--orange-light); }
.diagram-node strong { display: block; font-family: var(--font-display); font-size: 15px; color: var(--white); margin-bottom: 4px; }
.diagram-node span { font-size: 12.5px; color: var(--text-mute); line-height: 1.35; }

.diagram-line {
  flex: 1;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--orange) 0 8px, transparent 8px 16px);
  position: relative;
  top: -22px;
}

/* ---------- perimeter (security) diagram ---------- */

.perimeter {
  position: relative;
  border: 2px dashed rgba(242,106,33,0.5);
  border-radius: 32px;
  padding: 48px;
  display: flex;
  gap: 22px;
  justify-content: space-around;
}
.perimeter-label {
  position: absolute;
  top: -18px;
  left: 40px;
  background: var(--navy-900);
  padding: 0 14px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange-light);
}
.perimeter-item {
  text-align: center;
  flex: 1;
}
.perimeter-item .pi-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 16px;
  background: var(--navy-800);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.perimeter-item .pi-icon svg { width: 26px; height: 26px; stroke: var(--white); }
.perimeter-item strong { display: block; font-size: 14.5px; color: var(--text); font-weight: 600; }

/* ---------- quote ---------- */

.quote {
  border-left: 3px solid var(--orange);
  padding-left: 26px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  color: var(--white);
  max-width: 820px;
  line-height: 1.4;
}

/* ---------- buttons ---------- */

.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--border-strong);
  border-radius: 100px;
  padding: 18px 38px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--white);
  background: transparent;
  text-decoration: none;
}
.pill-btn--solid { background: var(--orange); border-color: var(--orange); }

/* ---------- intro / outro moments ---------- */

.moment {
  background: var(--navy-950);
}

.moment-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.moment-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(85%) contrast(1.05) brightness(0.6);
}

.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));
}
.moment-bg .moment-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;
}

.moment-mark {
  width: 84px;
  margin-bottom: 40px;
}

.moment .kicker { margin-bottom: 30px; }

/* ---------- entrance animations (mirrors deck-stage active-slide pattern) ---------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.86); }
  to   { opacity: 1; transform: none; }
}
@keyframes drift {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: none; }
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.9; }
}

[data-deck-slide] .eyebrow,
[data-deck-slide] .display,
[data-deck-slide] .perex,
[data-deck-slide] .kicker,
[data-deck-slide] .stat-big,
[data-deck-slide] .stat-label,
[data-deck-slide] .card,
[data-deck-slide] .pillar,
[data-deck-slide] .step,
[data-deck-slide] .compare-col,
[data-deck-slide] .badge,
[data-deck-slide] .timeline-col,
[data-deck-slide] .diagram-node,
[data-deck-slide] .perimeter-item,
[data-deck-slide] .quote,
[data-deck-slide] .pill-btn,
[data-deck-slide] img.logo-tl,
[data-deck-slide] .moment-mark {
  opacity: 0;
}

[data-deck-active] .eyebrow    { animation: rise 520ms cubic-bezier(.22,.9,.25,1) 80ms both; }
[data-deck-active] .kicker     { animation: rise 480ms cubic-bezier(.22,.9,.25,1) 60ms both; }
[data-deck-active] .display    { animation: rise 640ms cubic-bezier(.22,.9,.25,1) 160ms both; }
[data-deck-active] .perex      { animation: rise 520ms cubic-bezier(.22,.9,.25,1) 300ms both; }
[data-deck-active] .quote      { animation: rise 560ms cubic-bezier(.22,.9,.25,1) 260ms both; }
[data-deck-active] .pill-btn   { animation: rise 480ms cubic-bezier(.22,.9,.25,1) 420ms both; }
[data-deck-active] img.logo-tl { animation: rise 420ms ease-out 40ms both; }
[data-deck-active] .moment-mark{ animation: zoomIn 700ms cubic-bezier(.22,.9,.25,1) 0ms both; }

[data-deck-active] .stat-big   { animation: zoomIn 640ms cubic-bezier(.22,.9,.25,1) 380ms both; }
[data-deck-active] .stat-label { animation: rise 420ms cubic-bezier(.22,.9,.25,1) 480ms both; }

[data-deck-active] .card:nth-child(1),
[data-deck-active] .pillar:nth-child(1),
[data-deck-active] .step:nth-child(1),
[data-deck-active] .compare-col:nth-child(1),
[data-deck-active] .badge:nth-child(1),
[data-deck-active] .timeline-col:nth-child(1),
[data-deck-active] .diagram-node:nth-child(1) { animation: rise 540ms cubic-bezier(.22,.9,.25,1) 340ms both; }

[data-deck-active] .card:nth-child(2),
[data-deck-active] .pillar:nth-child(2),
[data-deck-active] .step:nth-child(2),
[data-deck-active] .compare-col:nth-child(2),
[data-deck-active] .badge:nth-child(2),
[data-deck-active] .timeline-col:nth-child(2),
[data-deck-active] .diagram-node:nth-child(2) { animation: rise 540ms cubic-bezier(.22,.9,.25,1) 420ms both; }

[data-deck-active] .card:nth-child(3),
[data-deck-active] .pillar:nth-child(3),
[data-deck-active] .step:nth-child(3),
[data-deck-active] .compare-col:nth-child(3),
[data-deck-active] .badge:nth-child(3),
[data-deck-active] .diagram-node:nth-child(3) { animation: rise 540ms cubic-bezier(.22,.9,.25,1) 500ms both; }

[data-deck-active] .step:nth-child(4),
[data-deck-active] .diagram-node:nth-child(4) { animation: rise 540ms cubic-bezier(.22,.9,.25,1) 580ms both; }

[data-deck-active] .step:nth-child(5),
[data-deck-active] .diagram-node:nth-child(5) { animation: rise 540ms cubic-bezier(.22,.9,.25,1) 660ms both; }

[data-deck-active] .step:nth-child(6),
[data-deck-active] .diagram-node:nth-child(6) { animation: rise 540ms cubic-bezier(.22,.9,.25,1) 740ms both; }

[data-deck-active] .perimeter-item:nth-child(1) { animation: rise 500ms ease-out 380ms both; }
[data-deck-active] .perimeter-item:nth-child(2) { animation: rise 500ms ease-out 460ms both; }
[data-deck-active] .perimeter-item:nth-child(3) { animation: rise 500ms ease-out 540ms both; }
[data-deck-active] .perimeter-item:nth-child(4) { animation: rise 500ms ease-out 620ms both; }

.glow--pulse { animation: glowPulse 5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  [data-deck-slide] * { animation: none !important; opacity: 1 !important; }
}

/* Fullscreen/theme toggle buttons from the shared deck-stage engine were
   never styled or positioned in this deck (invisible, harmless clutter
   behind the fixed desktop canvas) — hidden outright, matching SafeQ. */
.loop-fs-btn, .loop-theme-btn { display: none !important; }

/* "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; }

/* ---------- 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; }
}


/* =========================================================================
   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.
   ========================================================================= */
@media (max-width: 700px) and (orientation: portrait) {

  html, body { overflow-x: hidden; }

  .slide {
    width: 100%;
    min-height: 100svh;
    display: flex;
    align-items: stretch;
    /* Keep the original clipping (overflow: hidden, set at the top of this
       file) rather than opening it up — real content grows the box via
       flex/auto-height, so clipping only ever trims decorative bleed
       (glows, the dashed diagram line) rather than readable content. */
  }

  /* Decorative glow blobs are positioned in 1920×1080 pixel offsets — keep
     them from forcing horizontal scroll in a narrow flow column. */
  .glow { max-width: 100vw; }

  /* The frame was position:absolute+inset:0 for the fixed canvas; in flow
     it must become a normal block so the slide's height reflects its
     content, with padding scaled down for phone width. */
  .frame {
    position: static !important;
    inset: auto !important;
    width: 100%;
    padding: 96px 24px 64px !important;
    flex-direction: column !important;
  }
  .frame--row { flex-direction: column !important; gap: 36px !important; }
  .frame--center { padding: 96px 24px !important; }

  /* ---------- chrome ---------- */
  .logo-tl { position: absolute; top: 22px; left: 20px; height: 24px; }
  .tag-tr { top: 22px; right: 20px; font-size: 10px; padding: 6px 12px; }

  /* ---------- typography ---------- */
  .eyebrow { font-size: 14px; margin: 0 0 18px; }
  .h-hero { font-size: clamp(38px, 11vw, 56px) !important; }
  .h-title { font-size: clamp(32px, 9.5vw, 44px) !important; }
  .h-section { font-size: clamp(28px, 8.5vw, 36px) !important; }
  .perex, .perex--center {
    font-size: 18px !important;
    max-width: 100% !important;
    margin-top: 18px;
  }
  .body-sm { font-size: 15px; max-width: 100% !important; }
  .quote { font-size: 20px; padding-left: 18px; max-width: 100%; }
  .kicker { font-size: 11px; padding: 6px 14px; }

  /* ---------- grids → single column ---------- */
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .frame--row > div { flex: none !important; width: 100%; }

  /* ---------- stats ---------- */
  .stat-row { flex-direction: column !important; gap: 20px !important; }
  .stat-big { font-size: clamp(48px, 15vw, 72px) !important; }
  .stat-card { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
  .stat-card .stat-big { font-size: clamp(40px, 13vw, 56px) !important; }
  .stat-label { max-width: 100% !important; }

  /* ---------- process steps ---------- */
  .steps { flex-direction: column !important; gap: 18px !important; }
  .step-arrow { display: none !important; }

  /* ---------- compare table ---------- */
  .compare { grid-template-columns: 1fr !important; gap: 20px !important; }

  /* ---------- badges / timeline ---------- */
  .badge-row { flex-direction: column !important; gap: 14px !important; }
  .timeline { grid-template-columns: 1fr !important; gap: 20px !important; }

  /* ---------- architecture diagram ---------- */
  .diagram { flex-direction: column !important; gap: 28px !important; }
  .diagram-line { display: none !important; }
  .diagram-node { width: 100% !important; }

  /* ---------- perimeter (security) diagram ---------- */
  .perimeter {
    flex-direction: column !important;
    gap: 24px !important;
    padding: 40px 22px 28px !important;
  }
  .perimeter-label { left: 22px; }
  .perimeter-item { text-align: left; display: flex; align-items: center; gap: 16px; }
  .perimeter-item .pi-icon { margin: 0; flex-shrink: 0; }

  /* ---------- cards / pillars ---------- */
  .card, .pillar { padding: 28px 24px; }
  .pillar .pillar-icon { width: 50px; height: 50px; margin-bottom: 16px; }

  /* ---------- buttons ---------- */
  .pill-btn {
    width: 100%;
    justify-content: center;
    padding: 16px 28px;
    font-size: 16px;
  }

  /* ---------- intro / outro moments ---------- */
  .moment-mark { width: 64px; margin-bottom: 24px; }

  /* 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: var(--text-soft);
    opacity: 0.75;
    transition: opacity 400ms ease;
    z-index: 3;
  }
  .scroll-cue-label {
    font-family: var(--font-display);
    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; }
  }
}

/* ---------- "The Problem" stat row — refined mobile formatting ---------- */
@media (max-width: 700px) and (orientation: portrait) {
  section[data-label="The Problem"] .stat-row,
  section[data-label="Pilot in 2 Weeks"] .stat-row {
    padding: 0 !important;
    gap: 0 !important;
    margin-top: 36px !important;
    margin-left: 28px !important;
  }
  section[data-label="The Problem"] .stat-block,
  section[data-label="Pilot in 2 Weeks"] .stat-block {
    padding: 26px 0;
    border-top: 1px solid var(--border);
  }
  section[data-label="The Problem"] .stat-block:first-child,
  section[data-label="Pilot in 2 Weeks"] .stat-block:first-child {
    padding-top: 0;
    border-top: none;
  }
  section[data-label="The Problem"] .stat-big,
  section[data-label="Pilot in 2 Weeks"] .stat-big {
    font-size: clamp(40px, 13vw, 56px) !important;
  }
  section[data-label="The Problem"] .stat-label,
  section[data-label="Pilot in 2 Weeks"] .stat-label {
    margin-top: 6px !important;
  }
}