*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:var(--deck-navy);
  --surface:rgba(255,255,255,0.06);
  --text:#f4f7fc;
  --text-dim:rgba(244,247,252,0.58);
  --accent:#0052F5;
  --accent-soft:#bbbbff;
  --deck-navy:#000d2c;
  --deck-surface:#0a1628;  /* elevated navy surface */
  --blue-bright:#4d9bff;   /* canonical mid blue */
  --blue-soft:#7eb8ff;     /* canonical light blue */
  --lilac-bright:#cfd4ff;  /* canonical light lilac */
  --indigo:#7b61ff;        /* canonical violet/indigo */
  --cyan:#00dff4;          /* canonical cyan */
  --teal:#35e0b8;          /* canonical teal (HiW node 3, Slide 9 CAGR) */
  --gold:#ffd166;            /* gamer gold (market card 4 accent) — was also Family Premium badge gradient (badge removed 2026-06-13) */
  --card-tint-1:#d8e2ee;     /* white-card photo letterbox gradient start */
  --card-tint-2:#c5d4e8;     /* white-card photo letterbox gradient end (photo zone) */
  --card-tint-3:#b8c8dc;     /* white-card placeholder gradient end (roster/thumb) */
  --card-text:#5a6d82;       /* bio text on white cards */
  --card-text-dim:#7a8faa;   /* dim text/fill on white cards */
  --font:'Plus Jakarta Sans',system-ui,sans-serif;
  --c-light:#fff;
  --c-dark:#000;
  --grl:0.24;
  --grd:0.72;

  /* TASK-R01: responsive tokens */
  --bp-sm:640px;
  --bp-md:900px;
  --bp-lg:1200px;
  --pill-reserve:calc(max(env(safe-area-inset-top), clamp(52px,8vh,76px)) + 100px); /* +100px buffer below the pill. max(inset, top-margin) clears the notch/Dynamic Island under viewport-fit=cover without double-counting (0 inset on desktop → clamp wins). */
}

html,body{width:100%;height:100%;overflow:hidden;font-family:var(--font);background:var(--bg);color:var(--text);}

/* ══════════════════════════════
   CURSOR (fine pointer only)
══════════════════════════════ */
@media (pointer:fine){
  /* TASK-060: force native cursor hidden even when child elements declare
     cursor:pointer (nav-items, buttons, founder thumbs, etc.). The custom
     #cursor-dot + #cursor-ring is JS-driven and keeps working. */
  body.deck-cursor-on,
  body.deck-cursor-on *{cursor:none !important;}
  #cursor-dot{
    width:8px;height:8px;
    background:var(--accent-soft);
    border-radius:50%;
    position:fixed;top:0;left:0;
    /* Must stay above any full-screen overlay (e.g. the analytics gate #deck-analytics-gate, z:100000)
       so the custom cursor is visible on every screen — the login gate included. */
    pointer-events:none;z-index:100002;
    transform:translate(-50%,-50%);
    transition:width .2s,height .2s,background .2s;
    mix-blend-mode:exclusion;
  }
  #cursor-ring{
    width:36px;height:36px;
    border:1.5px solid rgba(187,187,255,0.45);
    border-radius:50%;
    position:fixed;top:0;left:0;
    pointer-events:none;z-index:100001; /* above the gate overlay; kept just under #cursor-dot */
    transform:translate(-50%,-50%);
    transition:width .3s,height .3s,border-color .3s;
  }
  body.deck-cursor-on:has(.nav-item:hover) #cursor-dot,
  body.deck-cursor-on:has(.s2-team__roster-item:hover) #cursor-dot,
  body.deck-cursor-on:has(.s2-team__thumb:hover) #cursor-dot{
    width:14px;height:14px;
    background:var(--accent);
  }
  body.deck-cursor-on:has(.nav-item:hover) #cursor-ring,
  body.deck-cursor-on:has(.s2-team__roster-item:hover) #cursor-ring{
    width:56px;height:56px;
    border-color:var(--accent);
  }
}

/* ══════════════════════════════
   FOCUS VISIBILITY (a11y / WCAG 2.4.7)
   The deck suppresses the native cursor on desktop and previously had zero
   :focus styles, leaving keyboard / assistive-tech users with no focus cue.
══════════════════════════════ */
:focus-visible{
  outline:2px solid var(--accent-soft);
  outline-offset:2px;
  border-radius:inherit;
}

/* ══════════════════════════════
   PROGRESS INDICATOR (top edge)
══════════════════════════════ */
#deckProgress{
  position:fixed;
  top:0;left:0;right:0;
  height:3px;
  z-index:300;
  background:rgba(255,255,255,0.06);
  pointer-events:none;
}
#deckProgressFill{
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-soft));
  box-shadow:0 0 10px rgba(0,82,245,0.5);
  transition:width .45s cubic-bezier(0.22,1,0.36,1);
}

/* Visually-hidden, screen-reader-only utility. */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ══════════════════════════════
   AURORA + NOISE
══════════════════════════════ */
.deck-aurora{
  position:fixed;
  left:72px;top:0;right:0;bottom:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.deck-aurora-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  opacity:0.12;
  animation:deckAuroraDrift 16s ease-in-out infinite alternate;
}
.deck-aurora-blob:nth-child(1){
  width:65vw;height:55vh;
  background:radial-gradient(circle,var(--accent-soft) 0%,transparent 70%);
  top:-18%;left:-8%;
  animation-duration:14s;
}
.deck-aurora-blob:nth-child(2){
  width:48vw;height:62vh;
  background:radial-gradient(circle,var(--accent) 0%,transparent 70%);
  top:18%;right:-12%;
  animation-duration:18s;
  animation-delay:-6s;
}
.deck-aurora-blob:nth-child(3){
  width:50vw;height:48vh;
  background:radial-gradient(circle,rgba(255,80,160,0.9) 0%,transparent 70%);
  bottom:-8%;left:28%;
  animation-duration:20s;
  animation-delay:-3s;
}
@keyframes deckAuroraDrift{
  0%{transform:translate(0,0) scale(1);}
  33%{transform:translate(5vw,-3vh) scale(1.06);}
  66%{transform:translate(-3vw,4vh) scale(0.96);}
  100%{transform:translate(2vw,1vh) scale(1.04);}
}
body.dark-mode .deck-aurora-blob{opacity:0.2;}
body:not(.dark-mode) .deck-aurora-blob{opacity:0.14;}

.deck-noise{
  position:fixed;
  left:72px;top:0;right:0;bottom:0;
  z-index:1;
  opacity:0.04;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

/* ══════════════════════════════
   SCAN LINE (all slides)
══════════════════════════════ */
.deck-scan{
  position:fixed;
  left:72px;
  top:0;
  right:0;
  bottom:0;
  pointer-events:none;
  z-index:180;
  overflow:hidden;
}
.deck-scan::before{
  content:'';
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(0,40,120,0.035) 2px,
    rgba(0,40,120,0.035) 4px
  );
  opacity:0.45;
}
.deck-scan__line{
  position:absolute;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(187,187,255,0.12) 20%,
    rgba(0,82,245,0.28) 50%,
    rgba(187,187,255,0.12) 80%,
    transparent 100%
  );
  box-shadow:0 0 12px rgba(187,187,255,0.15);
  animation:deckScanSweep 7s linear infinite;
}
@keyframes deckScanSweep{
  0%{top:-3%;opacity:0;}
  4%{opacity:0.85;}
  96%{opacity:0.85;}
  100%{top:103%;opacity:0;}
}
/* Slide 03 — keep cardbeam / GIF background pure var(--deck-navy) (no aurora tint) */
body.deck-mission-active .deck-aurora,
body.deck-mission-active .deck-noise,
body.deck-mission-active .deck-scan{
  opacity:0 !important;
  visibility:hidden;
  transition:opacity 0.45s ease, visibility 0.45s ease;
}
body.deck-mission-active #wireCanvas{
  opacity:0 !important;
  transition:opacity 0.45s ease;
}

body.dark-mode .deck-scan::before{
  background:repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(187,187,255,0.04) 2px,
    rgba(187,187,255,0.04) 4px
  );
}

/* ══════════════════════════════
   GLITCH TEXT (burst — calm most of the time)
══════════════════════════════ */
.glitch{
  position:relative;
  animation:glitchMain 6s infinite;
}
.glitch--light{color:var(--text);}
.glitch--dark{color:#fff;}
.glitch::before,
.glitch::after{
  content:attr(data-text);
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  font-family:inherit;
  font-size:inherit;
  font-weight:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  pointer-events:none;
  white-space:inherit;
}
.glitch--light::before{color:#ff2a55;}
.glitch--light::after{color:var(--accent-soft);}
.glitch--dark::before{color:#ff6ef7;}
.glitch--dark::after{color:#5eadff;}
.glitch::before{
  clip-path:polygon(0 28%,100% 28%,100% 44%,0 44%);
  animation:glitchBefore 6s infinite;
}
.glitch::after{
  clip-path:polygon(0 62%,100% 62%,100% 78%,0 78%);
  animation:glitchAfter 6s infinite;
}
@keyframes glitchMain{
  0%,94%,100%{transform:none;}
  95%{transform:skewX(-0.4deg);}
  96%{transform:skewX(0.5deg) translateX(-2px);}
  97%{transform:none;}
  98%{transform:translateX(2px);}
  99%{transform:skewX(-0.2deg);}
}
@keyframes glitchBefore{
  0%,94%,100%{transform:none;opacity:0;}
  95%{transform:translateX(-5px);opacity:0.65;}
  96%{transform:translateX(3px) scaleY(1.01);opacity:0.65;}
  97%{transform:none;opacity:0;}
  98%,99%{transform:translateX(-2px);opacity:0.35;}
}
@keyframes glitchAfter{
  0%,95%,100%{transform:none;opacity:0;}
  96%{transform:translateX(5px);opacity:0.65;}
  97%{transform:translateX(-3px);opacity:0.65;}
  98%{transform:none;opacity:0;}
  99%{transform:translateX(2px);opacity:0.3;}
}

@media (prefers-reduced-motion:reduce){
  .deck-scan__line,
  .glitch,
  .glitch::before,
  .glitch::after,
  .deck-aurora-blob,
  .s1-logo-wrap.fx-brand::before,
  .s1-sym-wrap.fx-brand::before{
    animation:none !important;
    opacity:0;
  }
  #gagingLogo,
  #gagingSym{
    animation:logoReveal 1.2s ease forwards, symReveal 1s ease 1.5s forwards;
  }
  .deck-scan::before{opacity:0.25;}
  /* Content that animates into view: show the resolved state instead of moving. */
  .hiw-widget{animation:none !important;opacity:1 !important;transform:translate(-50%,-50%) !important;}
  .hiw-notify-track{animation:none !important;}
  .s2-team-deck .deal-in{animation:none !important;}
  .s11-char-img--jump{animation:none !important;}
  body.deck-cursor-on{cursor:auto;}
  #cursor-dot,#cursor-ring{display:none;}
}

/* ══════════════════════════════
   WIREFRAME CANVAS
══════════════════════════════ */
#wireCanvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:0.6;}

/* ══════════════════════════════
   SIDE NAV
══════════════════════════════ */
.sidenav{
  position:fixed;left:0;top:0;bottom:0;
  width:72px;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:6px;
  z-index:200;
  padding:20px 0;
}

/* TASK-063 — mobile-only dock controls; hidden on desktop sidenav. */
.nav-mobile-prev,
.nav-mobile-counter,
.nav-mobile-next{
  display:none;
}

/* Glass panel for sidenav */
.sidenav::before{
  content:'';
  position:absolute;inset:12px 8px;
  border-radius:20px;
  background:color-mix(in srgb,rgba(187,187,188,1) 14%,transparent);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--c-light) calc(var(--grl)*10%),transparent),
    inset 1.5px 2.5px 0px -2px color-mix(in srgb,var(--c-light) calc(var(--grl)*85%),transparent),
    inset -1px -2px 0px -2px color-mix(in srgb,var(--c-light) calc(var(--grl)*70%),transparent),
    0px 4px 20px 0px color-mix(in srgb,var(--c-dark) calc(var(--grd)*8%),transparent);
}

.nav-item{
  position:relative;z-index:1;
  width:44px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:10px 0;
  cursor:pointer;
  border-radius:12px;
  transition:all .3s ease;
}

.nav-num{
  font-size:10px;font-weight:700;letter-spacing:0.5px;
  color:var(--text-dim);
  transition:color .3s ease;
}

.nav-dot{
  width:4px;height:4px;border-radius:50%;
  background:rgba(0,0,0,0.12);
  transition:all .3s ease;
}

.nav-label{
  font-size:7px;letter-spacing:1.5px;font-weight:600;
  color:transparent;
  white-space:nowrap;
  transition:all .3s ease;
  max-width:0;overflow:hidden;
  position:absolute;left:54px;
  background:color-mix(in srgb,rgba(187,187,188,1) 18%,transparent);
  backdrop-filter:blur(16px);
  padding:0;border-radius:8px;
  pointer-events:none;
}

.nav-item:hover .nav-label,
.nav-item:focus-visible .nav-label{
  color:var(--text);
  max-width:120px;
  padding:5px 10px;
}

.nav-item.active .nav-num{color:var(--accent);}
.nav-item.active .nav-dot{
  background:var(--accent);
  width:16px;border-radius:2px;
  box-shadow:0 0 8px rgba(0,82,245,0.3);
}

.nav-divider{
  position:relative;z-index:1;
  width:20px;height:1px;
  background:rgba(0,0,0,0.08);
  margin:4px 0;
}

/* LOGO in nav */
.nav-logo{
  position:relative;z-index:1;
  font-size:7px;font-weight:800;letter-spacing:3px;
  color:var(--accent);
  writing-mode:vertical-rl;
  margin-bottom:12px;
}

/* ══════════════════════════════
   SLIDES CONTAINER
══════════════════════════════ */
.slides{
  position:fixed;
  left:72px;top:0;right:0;bottom:0;
  height:100dvh; /* TASK-R07 */
  overflow:hidden;
}

.slide{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--deck-navy);
  color:var(--text);
  opacity:0;
  pointer-events:none;
  overflow:hidden; /* TASK-R07: I-4 no internal scroll */
  transition:opacity .7s ease, transform .7s cubic-bezier(0.25,0.46,0.45,0.94);
  transform:translateY(30px);
}
.slide.active{
  opacity:1;pointer-events:all;
  transform:translateY(0);
}
.slide.exit-up{transform:translateY(-30px);opacity:0;}

/* ══════════════════════════════
   GLASS CARD MIXIN
══════════════════════════════ */
.glass{
  background:color-mix(in srgb,rgba(187,187,188,1) 14%,transparent);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border-radius:24px;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--c-light) calc(var(--grl)*10%),transparent),
    inset 1.8px 3px 0px -2px color-mix(in srgb,var(--c-light) calc(var(--grl)*90%),transparent),
    inset -2px -2px 0px -2px color-mix(in srgb,var(--c-light) calc(var(--grl)*80%),transparent),
    inset -3px -8px 1px -6px color-mix(in srgb,var(--c-light) calc(var(--grl)*60%),transparent),
    inset -0.3px -1px 4px 0px color-mix(in srgb,var(--c-dark) calc(var(--grd)*12%),transparent),
    inset -1.5px 2.5px 0px -2px color-mix(in srgb,var(--c-dark) calc(var(--grd)*20%),transparent),
    inset 0px 3px 4px -2px color-mix(in srgb,var(--c-dark) calc(var(--grd)*20%),transparent),
    inset 2px -6.5px 1px -4px color-mix(in srgb,var(--c-dark) calc(var(--grd)*10%),transparent),
    0px 1px 5px 0px color-mix(in srgb,var(--c-dark) calc(var(--grd)*10%),transparent),
    0px 8px 32px 0px color-mix(in srgb,var(--c-dark) calc(var(--grd)*7%),transparent);
}

.glass-accent{
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--c-light) calc(var(--grl)*10%),transparent),
    inset 1.8px 3px 0px -2px color-mix(in srgb,var(--c-light) calc(var(--grl)*90%),transparent),
    inset -2px -2px 0px -2px color-mix(in srgb,var(--c-light) calc(var(--grl)*80%),transparent),
    inset -3px -8px 1px -6px color-mix(in srgb,var(--c-light) calc(var(--grl)*60%),transparent),
    inset -0.3px -1px 4px 0px color-mix(in srgb,var(--c-dark) calc(var(--grd)*12%),transparent),
    inset -1.5px 2.5px 0px -2px color-mix(in srgb,var(--c-dark) calc(var(--grd)*20%),transparent),
    0px 12px 48px 0px color-mix(in srgb,var(--accent) 10%,transparent),
    0px 4px 16px 0px color-mix(in srgb,var(--c-dark) calc(var(--grd)*8%),transparent);
}

/* pill label */
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 35px;
  border-radius:129px;
  font-size:calc(clamp(29px,3.5vw,48px) * 0.6); /* 0.6× the slide title — 2026-06-08 */
  font-weight:700;
  letter-spacing:0.24em;
  color:var(--accent-soft);
  background:rgba(0,82,245,0.28);
  border:1px solid rgba(187,187,255,0.48);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.14),
    inset 0 1px 0 rgba(187,187,255,0.22),
    0 0 22px rgba(0,82,245,0.6),
    0 0 44px rgba(0,82,245,0.32),
    0 4px 18px rgba(0,13,44,0.35);
}

/* Headline after pill — reference: slide 04 (THE PROBLEM) */
.deck-slide-title{
  margin:0;
  color:var(--text);
  white-space:normal;
  line-height:1.14;
  max-width:min(920px,94vw);
  font-size:clamp(29px,3.5vw,48px); /* TASK-039: +10% (was clamp(26px,3.2vw,44px)); unified with .s2-team__title */
  font-weight:600;
  letter-spacing:-0.02em;
  text-align:center;
  display:block;
  overflow:visible;
  text-wrap:balance;
}
.deck-slide-title span{
  color:var(--accent-soft) !important;
  font-weight:600;
  text-shadow:0 0 18px rgba(187,187,255,0.45); /* soft glow so the accent phrase reads as emphasis, not a faded continuation */
}
.s4-problem-head,
.s4-header,
.s6-header,
.s7-header,
.s09-head,
.s10-head,
.s11-head,
.s25-head,
.ph-slide{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:clamp(16px,2.5vh,24px);
}
.s4-header{margin-bottom:4px;}
.s6-header,
.s7-header{grid-column:1/-1;margin-bottom:4px;}
.ph-slide > .deck-slide-title{margin-top:0;}

/* ══════════════════════════════
   SLIDE 1 — COVER
══════════════════════════════ */
.s1-content{
  display:flex;flex-direction:column;
  justify-content:center;
  padding:0 80px;
  width:100%;height:100%;
}
.s1-tag{margin-bottom:32px;}
.s1-title{
  font-size:clamp(52px,7vw,88px);
  font-weight:800;line-height:1;
  color:var(--text);
  margin-bottom:28px;
}
.s1-title span{color:var(--accent);}
.s1-sub{
  font-size:18px;font-weight:400;color:var(--text-dim);
  max-width:480px;line-height:1.6;margin-bottom:48px;
}
.s1-cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 28px;border-radius:99px;
  font-size:13px;font-weight:700;letter-spacing:1px;
  color:white;background:var(--accent);
  cursor:pointer;border:none;
  box-shadow:0 8px 24px rgba(0,82,245,0.25);
  transition:transform .2s ease,box-shadow .2s ease;
}
.s1-cta:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,82,245,0.35);}
.s1-cta svg{width:16px;height:16px;}

/* Right avatar */
.s1-avatar{
  position:absolute;right:0;bottom:0;
  width:50%;height:90%;
  display:flex;align-items:flex-end;justify-content:center;
  pointer-events:none;
}
.s1-avatar img{
  height:100%;object-fit:contain;
  filter:drop-shadow(0 20px 60px rgba(0,82,245,0.1));
}

/* Stats row */
.s1-stats{
  display:flex;gap:20px;
  margin-top:8px;
}
.stat-card{
  padding:16px 22px;border-radius:16px;
}
.stat-num{font-size:26px;font-weight:800;color:var(--text);}
.stat-num span{font-size:14px;color:var(--accent);}
.stat-lbl{font-size:10px;font-weight:500;letter-spacing:1px;color:var(--text-dim);margin-top:2px;}

/* ══════════════════════════════
   SLIDE 04 — PROBLEM  (now display #3 · data-index 2 after the 2026-06-09 reorder)
══════════════════════════════ */
.slide[data-index="2"]{
  background:var(--deck-navy);
}
.s4-problem-head{
  text-align:center;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(16px,2.5vh,24px);
  max-width:min(820px,100%);
  flex-shrink:0;
  z-index:10;
}
/* Slide 4 — widen the header so the long "Avg. user spends $700/YEAR on health"
   line stays a single line on desktop (mobile still wraps, which is fine). */
.slide[data-index="2"] .s4-problem-head,
.slide[data-index="2"] .deck-slide-title{
  max-width:min(1100px,96vw);
}
/* ══════════════════════════════
   SLIDE 2 — PROBLEM (legacy stats grid)
══════════════════════════════ */
.s2-grid{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  gap:20px;padding:0 60px;width:100%;
}
.s2-big{
  padding:40px 36px;border-radius:28px;
}
.s2-big-num{
  font-size:80px;font-weight:800;line-height:1;
  color:var(--text);margin-bottom:8px;
}
.s2-big-num span{color:var(--accent);}
.s2-big-label{font-size:13px;color:var(--text-dim);line-height:1.5;margin-top:12px;}
.s2-big-title{font-size:18px;font-weight:700;color:var(--text);margin-top:20px;}
.s2-section-title{
  grid-column:1/-1;
  padding:0 0 8px;
}
.s2-section-title h2{font-size:42px;font-weight:800;color:var(--text);}
.s2-section-title h2 span{color:var(--accent);}

/* ══════════════════════════════
   SLIDE 3 — SOLUTION
══════════════════════════════ */
.s3-layout{
  display:grid;grid-template-columns:1fr 1.1fr;
  gap:24px;padding:0 60px;width:100%;align-items:start;
}
.s3-header{grid-column:1/-1;margin-bottom:4px;}
.s3-header h2{font-size:42px;font-weight:800;color:var(--text);}
.s3-header h2 span{color:var(--accent);}
.s3-points{display:flex;flex-direction:column;gap:16px;}
.s3-point{
  padding:22px 24px;border-radius:20px;
  display:flex;gap:18px;align-items:flex-start;
}
.s3-icon{
  width:36px;height:36px;border-radius:10px;
  background:rgba(0,82,245,0.1);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0;margin-top:2px;
}
.s3-pt-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:4px;}
.s3-pt-body{font-size:12px;color:var(--text-dim);line-height:1.5;}
.s3-right{
  padding:32px;border-radius:28px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:340px;text-align:center;
}
.s3-right-big{font-size:62px;font-weight:800;color:var(--text);line-height:1;}
.s3-right-big span{color:var(--accent);}
.s3-right-sub{font-size:13px;color:var(--text-dim);margin-top:12px;line-height:1.5;}

/* ══════════════════════════════
   SLIDE 05 — SOLUTION (simple triptych)  (display #5 · data-index 4 after the 2026-06-12 swap)
══════════════════════════════ */
.slide[data-index="4"]{
  background:var(--deck-navy);
  --s5-accent:var(--accent);
  --s5-lilac:var(--accent-soft);
  --s5-dim:rgba(244,247,252,0.45);
  --s5-navy:var(--accent-soft);
  --s5-ink:var(--text);
}
.s5-layout{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:clamp(2px,0.5vh,8px);
  width:100%;
  height:100%;
  padding:var(--pill-reserve) 56px 0 80px; /* TASK-R06: was clamp(24px,3.5vh,40px) — enforce I-1 */
  box-sizing:border-box;
}
.slide[data-index="4"] .s4-problem-head{
  margin-bottom:0;
  gap:clamp(6px,0.9vh,10px);
  flex:0 1 auto;
  min-height:0;
  overflow:visible;
}
.slide[data-index="4"] .s5-solution-title.deck-slide-title{
  display:block;
  -webkit-line-clamp:unset;
  line-clamp:unset;
  overflow:visible;
}
.s5-solution-title{
  max-width:min(880px,92vw);
}
.s5-solution-title__line{
  display:block;
  width:100%;
  overflow:visible;
}
.slide[data-index="4"] .s5-solution-title__line + .s5-solution-title__line{
  margin-top:0; /* TASK-077a: was 0.35em — match slide 3/4 natural line spacing (line-height 1.14 only) */
}
/* TASK-077b: subtitle (white) sits 50% further below the title than before (0.525em vs original 0.35em). */
.slide[data-index="4"] .s5-solution-title__line + .s5-solution-title__line.s5-solution-title__sub{
  margin-top:0.9em; /* more breathing room above "We harness…" */
}
.slide[data-index="4"] .s5-solution-title__line--accent{
  max-width:min(980px,90vw);
  margin-inline:auto;
}
.slide[data-index="4"] .s5-solution-title br{
  display:none;
}
.slide[data-index="4"] .s5-solution-title__line{
  color:#fff !important; /* must beat .deck-slide-title span{var(--accent-soft) !important} (0,1,1) — this is (0,2,0) */
  font-weight:600;
  font-size:clamp(29px,3.5vw,48px); /* unified with .deck-slide-title for cross-slide title consistency */
}
.slide[data-index="4"] .s5-solution-title__accent{
  color:var(--accent-soft) !important;
  font-weight:600;
}
.s5-mech-word{ font-size:1.2em; } /* emphasize the mechanism word (Dopamine / Social) — 20% larger than the caption line */
.slide[data-index="4"] .s5-solution-title__sub{
  font-size:clamp(21px,2.17vw,28px); /* match the "Dopamine…" line size (was clamp(15px,1.55vw,20px)) */
  font-weight:500;
  line-height:1.45;
  color:rgba(255,255,255,0.88) !important;
  max-width:min(820px,92vw);
  margin-inline:auto;
  text-align:center;
}
.slide[data-index="4"] .s5-solution-title__sub--below{
  margin-top:clamp(14px,2.6vh,30px); /* more breathing room above the "Dopamine…" line */
  font-size:clamp(21px,2.17vw,28px); /* same size as "We harness…" now */
}
.slide[data-index="4"] .s5-solution-title__sub--below + .s5-solution-title__sub--below{
  margin-top:clamp(4px,0.8vh,10px); /* the two mechanism lines sit as one list */
}
.s5-split{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:0;
  padding:clamp(4px,1vh,12px) clamp(12px,3vw,32px) clamp(8px,2vh,20px);
}
.slide[data-index="4"] .s5-split{
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-height:0;
  padding:clamp(14px,2.6vh,30px) clamp(16px,4vw,40px); /* vertical breathing room around the joystick */
}
.s5-joystick-stage{
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(64vw,640px);
  max-width:100%;
  max-height:min(33vh,330px); /* −25% (was 44vh/420px) — room for the two mechanism lines */
  margin:0 auto;
  position:relative;
  min-height:0;
  flex-shrink:1;
}
.s5-joystick-img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:min(33vh,330px); /* −25% (was 44vh/420px) */
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  filter:
    drop-shadow(0 0 12px rgba(0,82,245,0.65))
    drop-shadow(0 0 24px rgba(77,155,255,0.45))
    drop-shadow(0 0 40px rgba(0,82,245,0.32))
    drop-shadow(0 0 64px rgba(0,82,245,0.18));
}
@media (max-width:960px){
  .deck-slide-title{
    max-width:96vw;
  }
  .s5-joystick-stage{
    width:min(88vw,440px);
    max-height:min(36vh,330px);
  }
  .s5-joystick-img{
    max-height:min(36vh,330px);
  }
}

/* ══════════════════════════════
   SLIDE 06 — HOW IT WORKS (3 columns)
══════════════════════════════ */
.slide[data-index="5"]{
  background:var(--deck-navy);
}
.hiw-layout{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  height:100%;
  padding:var(--pill-reserve) clamp(24px,3vw,48px) clamp(20px,3vh,32px) 80px; /* TASK-R06: was clamp(48px,6vh,64px) — enforce I-1 */
  box-sizing:border-box;
  gap:clamp(12px,2vh,20px);
  min-height:0;
}
.hiw-stage{
  flex:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(200px,300px) minmax(0,1fr);
  gap:clamp(14px,2vw,28px);
  align-items:center;
  width:100%;
  max-width:min(1280px,100%);
  min-height:0;
}
.hiw-col{
  display:flex;
  flex-direction:column;
  gap:clamp(10px,1.4vh,14px);
  min-height:0;
  min-width:0;
}
.hiw-col--center{
  align-items:center;
  justify-content:center;
}
.hiw-screen{
  display:block;
  width:100%;
  max-width:min(300px,22vw);
  height:auto;
  max-height:min(68vh,620px);
  object-fit:contain;
  border-radius:20px;
  box-shadow:0 24px 56px rgba(0,13,44,0.35);
  background:transparent;
  border:none;
}
.slide[data-index="5"] .s4-header{
  flex-shrink:0;
  margin-bottom:0;
}
.slide[data-index="5"] .s4-header--pill-only{
  margin-bottom:clamp(4px,0.8vh,10px);
}
.slide[data-index="5"] .hiw-layout{
  gap:clamp(8px,1.4vh,16px);
}
.slide[data-index="5"] .hiw-title.deck-slide-title{
  display:block;
  -webkit-line-clamp:unset;
  line-clamp:unset;
  overflow:visible;
}
.hiw-title__line{
  display:block;
}
.slide[data-index="5"] .hiw-title__lead{
  color:#fff !important;
  font-weight:600;
}
.slide[data-index="5"] .hiw-title__accent{
  color:var(--accent-soft) !important;
  font-weight:600;
}
.slide[data-index="5"] .hiw-title__sub{
  display:block;
  margin-top:0.4em;
  font-size:clamp(15px,1.55vw,20px);
  font-weight:500;
  line-height:1.45;
  color:rgba(255,255,255,0.88) !important;
  max-width:min(720px,90vw);
  margin-inline:auto;
}
.slide[data-index="5"] .step-card{
  padding:clamp(14px,1.8vh,20px) clamp(14px,1.4vw,18px);
  border-radius:18px;
}
.slide[data-index="5"] .step-num{
  font-size:clamp(24px,2.8vw,32px);
  margin-bottom:10px;
}
.slide[data-index="5"] .step-divider{margin-bottom:10px;}
.slide[data-index="5"] .step-title{
  font-size:clamp(15px,1.35vw,17px);
  line-height:1.32;
  margin-bottom:10px;
}
.slide[data-index="5"] .step-body{
  font-size:clamp(13px,1.1vw,15px);
  line-height:1.45;
}
.slide[data-index="5"] .hiw-col--right .step-card{
  flex:1 1 0;
}
@media (max-width:1100px){
  .hiw-stage{
    grid-template-columns:minmax(0,1fr) minmax(160px,220px) minmax(0,1fr);
    gap:12px;
  }
  .hiw-screen{max-width:min(220px,28vw);}
}
@media (max-width:860px){
  .hiw-stage{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
    align-items:start;
  }
  .hiw-col--center{
    grid-column:1/-1;
    order:-1;
  }
  .hiw-screen{max-width:min(280px,70vw);max-height:min(40vh,360px);}
}

/* ── HOW IT WORKS — arc redesign ───────────────────────────── */
.slide[data-index="5"] .hiw-layout{
  padding:var(--pill-reserve) clamp(24px,3vw,48px) clamp(16px,2.5vh,28px); /* TASK-R06: was clamp(40px,5vh,56px) — enforce I-1 */
  gap:clamp(8px,1.2vh,14px);
  justify-content:flex-start; /* TASK-R06: was center — flex-start so pill-reserve padding-top takes effect */
}
.hiw-body{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(10px,1.6vw,20px);
  width:100%;
  max-width:min(1320px,100%);
  flex:1 1 auto;
  min-height:0;
}
.hiw-notify{
  flex:0 0 clamp(128px,13vw,188px);
  align-self:center; /* center the rail on the stage's vertical midline so it lines up with the side arrows (stretch + max-height was top-aligning it) */
  max-height:min(420px, calc(100dvh - var(--pill-reserve) - 220px));
  overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
  pointer-events:none;
}
.hiw-notify-track{
  display:flex;
  flex-direction:column;
  animation:hiw-notify-scroll 52s linear infinite;
  animation-play-state:paused;
}
.slide.active .hiw-notify-track{
  animation-play-state:running;
}
.hiw-notify--right .hiw-notify-track{
  animation-direction:reverse;
  animation-duration:48s;
}
@keyframes hiw-notify-scroll{
  from{ transform:translateY(0); }
  to{ transform:translateY(-50%); }
}
.hiw-notify-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:4px 0;
}
.hiw-notify-item{
  margin:0;
  padding:10px 11px;
  border-radius:14px;
  background:rgba(12,24,48,0.72);
  border:1px solid rgba(187,187,255,0.28);
  box-shadow:0 8px 24px rgba(0,13,44,0.35);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.hiw-notify-item__title{
  margin:0;
  font-size:clamp(10px,0.85vw,12px);
  font-weight:700;
  line-height:1.25;
  color:#fff;
  letter-spacing:-0.01em;
}
@media (max-width:1080px){
  .hiw-notify{ display:none; }
  .hiw-body{
    display:block;
    max-width:min(1200px,100%);
  }
}
.hiw-body .hiw-stage{
  flex:1 1 auto;
  min-width:0;
  max-width:min(1200px, calc((100dvh - var(--pill-reserve) - 180px) * 1200 / 800));
}
.hiw-stage{
  position:relative;
  width:100%;
  max-width:min(1200px, calc((100dvh - var(--pill-reserve) - 180px) * 1200 / 800));
  aspect-ratio:1200/800;
  margin-block:auto;
  flex:0 0 auto;
}
.hiw-hero{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  height:86%;            /* trimmed hero fills the box, so it's centered → symmetric top/bottom margins; 86% of the taller stage */
  aspect-ratio:3436 / 7125; /* day-fit.png crop → the hiw-frame.webp bezel — phone content (was 7617/10722 with ~27% transparent padding) */
  max-width:62%;
  pointer-events:none;
}
.hiw-hero-frame{
  position:relative;     /* positioning context for the video/backplate overlay */
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  pointer-events:none;
}
/* "Screen off" backplate at the screen rect — shows through while a video
   buffers or if one fails to load. Same geometry as the videos, painted below. */
.hiw-hero-frame::before{
  content:"";
  position:absolute;
  left:2.998%; top:1.207%; width:94.005%; height:97.600%;
  border-radius:14.86% / 6.90%;
  background:#0a0f1e;
  z-index:0;
}
/* Raw app capture positioned into day-fit's screen rect (constants derived from
   the bake: x103 y86 w3230 h6954 r480 at 3436x7125). The slash radius keeps the
   corners circular (CSS % radii are per-axis). cover/top crops the bottom ~2.5%
   (video 384/848 vs screen-rect aspect), matching the old still-bake. */
.hiw-hero-video{
  position:absolute;
  left:2.998%; top:1.207%; width:94.005%; height:97.600%;
  border-radius:14.86% / 6.90%;
  object-fit:cover;
  object-position:top;
  z-index:1;
  opacity:0;
  transition:opacity 0.65s cubic-bezier(0.4,0,0.2,1);
  will-change:opacity;
  pointer-events:none;   /* taps/clicks pass through; no native long-press video UI */
}
.hiw-hero-video.is-visible{
  opacity:1;
}
/* Punched-out bezel paints ABOVE the videos; its lip overhangs their edges.
   Carries the silhouette styles the old baked stills had. */
.hiw-hero-bezel{
  position:relative;     /* positioned + z-index:2 so the bezel paints ABOVE the absolute videos (z-index:1) */
  z-index:2;
  grid-area:1 / 1;       /* sole in-flow grid child — pin the cell so future children stack here too */
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:20px;
  box-shadow:0 28px 64px rgba(0,13,44,0.42);
  pointer-events:none;
}
/* Option C (mobile) hooks: .hiw-steps wraps the 4 step labels, .hiw-dots is the indicator.
   Desktop keeps the ellipse layout — the wrapper is transparent (widgets stay absolutely
   positioned relative to .hiw-stage) and the dots are hidden. */
.hiw-steps{ display:contents; }
.hiw-dots{ display:none; }
.hiw-widget{
  --hiw-accent:var(--blue-bright);
  --hiw-glow:rgba(75,139,255,0.55);
  --hiw-bg:rgba(75,139,255,0.22);
  position:absolute;
  width:clamp(128px,12%,168px);
  min-height:clamp(108px,22%,138px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(8px,1.4vh,12px);
  padding:clamp(14px,2.2vh,20px) clamp(12px,1.2vw,16px);
  border-radius:18px;
  background:linear-gradient(145deg, var(--hiw-bg), rgba(8,18,40,0.55));
  border:1px solid color-mix(in srgb, var(--hiw-accent) 62%, transparent);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:
    0 0 28px var(--hiw-glow),
    0 10px 28px rgba(0,13,44,0.38),
    inset 0 1px 0 rgba(255,255,255,0.14);
  text-align:center;
  box-sizing:border-box;
  z-index:2;
  opacity:0;
  /* translate(-50%,-50%) centres the card on its ellipse point; the entrance offset rides on top. */
  transform:translate(-50%,-50%) translateY(-18px) scale(0.94);
  animation:hiw-widget-in 0.6s cubic-bezier(0.22,1,0.36,1) forwards;
  animation-play-state:paused;
}
.slide.active .hiw-widget{ animation-play-state:running; }
@keyframes hiw-widget-in{
  to{ opacity:1; transform:translate(-50%,-50%) translateY(0) scale(1); }
}
/* Node glow: JS-driven via .is-active class — opacity transitions on/off in lockstep
   with the hero crossfade. No CSS keyframe; hiw-06.js sets .is-active on the current node. */
.hiw-widget::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  transition:opacity .55s cubic-bezier(0.76,0,0.24,1);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--hiw-accent) 90%, transparent),
    0 0 30px 4px color-mix(in srgb, var(--hiw-accent) 62%, transparent),
    0 0 72px 12px var(--hiw-glow);
}
.hiw-widget.is-active::after{ opacity:1; }
/* Node centres sit on the dashed guide ellipse (cx600 cy310 rx560 ry300) at its 4 corner angles:
   x = 600 ± 560·cos45 = 204 / 996  (17% / 83%);  y = 310 ± 300·sin45 = 98 / 522  (15.8% / 84.2%). */
.hiw-widget--1{
  --hiw-accent:var(--blue-bright);
  --hiw-glow:rgba(75,139,255,0.58);
  --hiw-bg:rgba(0,82,245,0.28);
  left:17%;
  top:15.8%;
}
.hiw-widget--2{
  --hiw-accent:#b794ff;
  --hiw-glow:rgba(183,148,255,0.58);
  --hiw-bg:rgba(148,120,255,0.26);
  left:83%;
  top:15.8%;
}
.hiw-widget--3{
  --hiw-accent:var(--teal);
  --hiw-glow:rgba(53,224,184,0.52);
  --hiw-bg:rgba(32,196,160,0.22);
  left:83%;
  top:84.2%;
}
.hiw-widget--4{
  --hiw-accent:#ffb347;
  --hiw-glow:rgba(255,179,71,0.55);
  --hiw-bg:rgba(255,160,64,0.24);
  left:17%;
  top:84.2%;
}
.hiw-widget__title{
  margin:0;
  font-size:clamp(11px,0.92vw,13px);
  font-weight:700;
  line-height:1.35;
  color:#fff;
  text-shadow:0 0 18px color-mix(in srgb, var(--hiw-accent) 45%, transparent);
}
.hiw-notify-item__glyph{
  display:block;
  text-align:center;
  font-size:clamp(26px,2.4vw,34px);
  line-height:1;
  margin-bottom:11px;
}
.hiw-notify-item__title{ text-align:center; }
/* Cycle arrows linking the 4 widgets (W1→W2→W3→W4→W1) around the hero. */
.hiw-cycle-arrows{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1; /* above the hero, below the widgets (z-index:2) */
  overflow:visible;
}
.hiw-cycle-guide{
  fill:none;
  stroke:rgba(187,187,255,0.38);
  stroke-width:2.5;
  stroke-dasharray:4 10;
  stroke-linecap:round;
}
.hiw-cycle-arrow{
  fill:none;
  stroke:rgba(187,187,255,0.85);
  stroke-width:7;
  stroke-linecap:round;
}
@media (max-width:1180px){
  .hiw-stage{
    max-width:min(1000px, calc((100dvh - var(--pill-reserve) - 180px) * 1000 / 800));
  }
  .hiw-body .hiw-stage{
    max-width:min(1000px, calc((100dvh - var(--pill-reserve) - 180px) * 1000 / 800));
  }
  .hiw-hero{
    width:clamp(260px,62%,640px);
  }
  .hiw-widget{
    width:clamp(118px,13vw,150px);
  }
}

/* Legacy step card tokens (other slides) */
.s4-steps{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:14px;padding:0 50px;width:100%;
}
.s4-header{grid-column:1/-1;}
.step-card{padding:28px 22px;border-radius:24px;}
.step-num{font-size:36px;font-weight:800;color:var(--accent);line-height:1;margin-bottom:16px;}
.step-divider{width:100%;height:1px;background:rgba(0,82,245,0.1);margin-bottom:14px;}
.step-title{font-size:14px;font-weight:700;color:var(--text);line-height:1.3;margin-bottom:10px;}
.step-body{font-size:11px;color:var(--text-dim);line-height:1.5;}

/* ══════════════════════════════
   SLIDE 02 — TEAM  (display #4 · data-index 3 after the 2026-06-12 swap)
══════════════════════════════ */
.slide[data-index="3"]{
  background:var(--deck-navy);
}

.s2-team{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  justify-items:center;
  align-content:start;
  padding:var(--pill-reserve) 48px clamp(16px,2vh,24px) 80px; /* TASK-R06: was clamp(48px,6vh,64px) — enforce I-1 */
  box-sizing:border-box;
  font-family:var(--font);
  overflow:hidden;
}
.slide[data-index="3"] .s2-team{
  grid-template-rows:auto minmax(0,1fr);
  row-gap:clamp(28px,4vh,48px);
}
.slide[data-index="3"] .s2-team__head{
  grid-row:1;
  padding-bottom:2px;
}
.slide[data-index="3"] .s2-team__stage{
  grid-row:2;
  padding-top:0;
  overflow:hidden;
}
/* TASK-072: was display:none — kept the slot hidden when the team pill stayed
   inline in .s2-team__pill. Now initDeckPillSlots reliably lifts the pill into
   the slot (function bug fixed), so the slot SHOULD show at top:64 like every
   other slide. Override removed. */

/* TASK-072: after the pill-dark span is lifted out of .s2-team__pill, the
   empty wrapper div would still take a flex slot and add the parent's gap
   above the title (~20px) — pushing title 156px instead of 136px. Collapse
   empty pill containers so the title sits at the baseline padding-top. */
.s2-team__pill:empty{
  display:none;
}
.s2-team__head{
  text-align:center;
  margin:0;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(8px,1.4vh,14px);
  width:100%;
  max-width:min(920px,100%);
  position:relative;
  z-index:30;
}
.s2-team__pill{
  display:flex;
  justify-content:center;
  margin:0;
}
.s2-team__pill .pill-dark{
  position:relative;
  z-index:1;
}
.s2-team__tag{
  margin:0;
}
.slide[data-index="3"] .pill-dark{
  color:var(--text);
  background:rgba(0,82,245,0.34);
  border:1px solid rgba(187,187,255,0.55);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.16),
    inset 0 1px 0 rgba(187,187,255,0.28),
    0 0 28px rgba(0,82,245,0.7),
    0 0 56px rgba(77,155,255,0.38),
    0 6px 22px rgba(0,13,44,0.42);
}
.s2-team__title{
  margin:0;
  font-size:clamp(29px,3.5vw,48px); /* TASK-039: unified with .deck-slide-title (+10% from original baseline) */
  font-weight:600;
  line-height:1.05;
  letter-spacing:-0.02em;
  color:var(--text);
  font-family:var(--font);
  text-wrap:balance; /* was white-space:nowrap — wrap like every other slide title (clip-risk + consistency) */
}
.s2-team__title span{
  color:var(--accent-soft) !important;
  font-weight:600;
}

.s2-team__layout{
  position:relative;
  width:min(1200px,100%);
  margin:0 auto;
}
.s2-team__layout:has(#founder-daniel:checked),
.s2-team__layout:has(#founder-uri:checked),
.s2-team__layout:has(#founder-afik:checked),
.s2-team__layout:has(#founder-team:checked){
  width:min(1280px,calc(100% - 24px));
}
.s2-team__input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

/* —— Default: all four —— */
.s2-team__roster{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,3vw,36px);
  align-items:end;
  justify-items:center;
  width:fit-content;
  max-width:100%;
  margin-inline:auto;
  transform:translateX(16px);
  transition:opacity 0.35s ease,transform 0.35s ease;
}
.s2-team__roster-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  cursor:pointer;
  width:100%;
  max-width:200px;
}
.s2-team__roster-item img,
.s2-team__roster-icon{
  width:100%;
  aspect-ratio:3/4;
  max-height:min(46vh,420px);
  object-fit:cover;
  object-position:center top;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(165deg,var(--card-tint-1),var(--card-tint-3));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--c-light) 70%,transparent),
    0 12px 32px color-mix(in srgb,var(--c-dark) 10%,transparent);
  transition:transform 0.3s ease,box-shadow 0.3s ease;
}
.s2-team__roster-icon{
  font-size:clamp(48px,6vw,72px);
  font-weight:800;
  color:rgba(0,82,245,0.2);
}
.s2-team__roster-item:hover img,
.s2-team__roster-item:hover .s2-team__roster-icon{
  transform:translateY(-6px);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--c-light) 85%,transparent),
    0 20px 40px color-mix(in srgb,var(--accent) 18%,transparent);
}
.s2-team__roster-name{
  font-size:14px;
  font-weight:700;
  color:var(--text);
}
.s2-team__roster-role{
  font-size:10px;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
}

/* —— Focus: card | page-centered hero | thumbs —— */
.s2-team__focus{
  display:none;
  position:relative;
  grid-template-columns:minmax(220px,280px) 1fr;
  gap:clamp(16px,2.5vw,32px);
  align-items:center;
  width:100%;
  min-height:min(54vh,520px);
  animation:s2FocusIn 0.4s ease;
}
@keyframes s2FocusIn{
  from{opacity:0;transform:translateY(12px);}
  to{opacity:1;transform:translateY(0);}
}
.s2-team__layout:has(#founder-daniel:checked) .s2-team__focus,
.s2-team__layout:has(#founder-uri:checked) .s2-team__focus,
.s2-team__layout:has(#founder-afik:checked) .s2-team__focus,
.s2-team__layout:has(#founder-team:checked) .s2-team__focus{
  display:grid;
}
.s2-team__layout:has(#founder-daniel:checked) .s2-team__roster,
.s2-team__layout:has(#founder-uri:checked) .s2-team__roster,
.s2-team__layout:has(#founder-afik:checked) .s2-team__roster,
.s2-team__layout:has(#founder-team:checked) .s2-team__roster{
  display:none;
}

.s2-team__panel-slot{
  position:relative;
  z-index:2;
  grid-column:1;
  min-height:min(440px,54vh);
}
.s2-team__card{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  padding:0;
  overflow:hidden;
  border-radius:24px;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px) scale(0.98);
  transition:opacity 0.35s ease,transform 0.35s ease,visibility 0.35s;
  pointer-events:none;
}
.s2-team__layout:has(#founder-daniel:checked) .s2-team__card--daniel,
.s2-team__layout:has(#founder-uri:checked) .s2-team__card--uri,
.s2-team__layout:has(#founder-afik:checked) .s2-team__card--afik,
.s2-team__layout:has(#founder-team:checked) .s2-team__card--team{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.s2-team__card-body{
  flex:1;
  padding:22px 22px 18px;
  overflow:auto;
}
.s2-team__card h2{
  margin:0 0 4px;
  font-size:20px;
  font-weight:800;
  color:var(--text);
  letter-spacing:-0.02em;
}
.s2-team__role{
  margin:0 0 16px;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--accent);
}
.s2-team__stat{margin-bottom:11px;}
.s2-team__stat span{
  display:block;
  margin-bottom:5px;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-dim);
}
.s2-team__stat i{
  display:block;
  height:8px;
  border-radius:99px;
  background:rgba(0,82,245,0.08);
  border:1px solid rgba(0,82,245,0.15);
  overflow:hidden;
}
.s2-team__stat i::before{
  content:"";
  display:block;
  height:100%;
  width:var(--w);
  background:linear-gradient(90deg,#003bb8,var(--accent),#6ba3ff);
  animation:s2StatFill 0.8s ease-out forwards;
}
.s2-team__skill{
  margin-top:12px;
  padding:10px 12px;
  border-radius:12px;
  font-size:11px;
  font-weight:700;
  text-align:center;
  color:var(--text);
  background:rgba(0,82,245,0.08);
  border:1px solid rgba(0,82,245,0.12);
}
.s2-team__blurb{
  margin:0;
  font-size:13px;
  line-height:1.55;
  color:var(--text-dim);
}
.s2-team__card-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  align-items:center;
  padding:14px 16px;
  min-height:76px;
  background:#fff;
  border-top:1px solid rgba(0,0,0,0.06);
}
.s2-team__badge-slot{
  width:52px;
  height:52px;
  border-radius:12px;
  background:#f4f6f9;
  border:1px dashed rgba(0,0,0,0.1);
  flex-shrink:0;
}
@keyframes s2StatFill{
  from{width:0;}
  to{width:var(--w);}
}

.s2-team__hero-col{
  position:absolute;
  left:calc(50% + 16px);
  top:50%;
  transform:translate(-50%,-50%);
  z-index:1;
  display:flex;
  justify-content:center;
  align-items:center;
  min-width:0;
  pointer-events:none;
}
.s2-team__hero-col .s2-team__hero{
  pointer-events:auto;
}
.s2-team__hero{
  position:relative;
  width:min(100%,420px);
  height:min(54vh,520px);
  margin:0 auto;
  padding:0;
  border-radius:24px;
  overflow:hidden;
  flex-shrink:0;
}
.s2-team__hero-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  opacity:0;
  transition:opacity 0.4s ease;
}
.s2-team__hero-img--team{
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(165deg,var(--card-tint-1),var(--card-tint-3));
}
.s2-team__hero-mark{
  font-size:clamp(72px,10vw,100px);
  font-weight:800;
  color:rgba(0,82,245,0.18);
}
.s2-team__layout:has(#founder-daniel:checked) .s2-team__hero-img--daniel,
.s2-team__layout:has(#founder-uri:checked) .s2-team__hero-img--uri,
.s2-team__layout:has(#founder-afik:checked) .s2-team__hero-img--afik,
.s2-team__layout:has(#founder-team:checked) .s2-team__hero-img--team{
  opacity:1;
}

/* —— Right thumbnails —— */
.s2-team__thumbs{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  justify-content:center;
  padding:4px 0;
  grid-column:2;
  justify-self:end;
  position:relative;
  z-index:2;
}
.s2-team__thumb{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  cursor:pointer;
  width:72px;
  opacity:0.55;
  transition:opacity 0.25s ease,transform 0.25s ease;
}
.s2-team__thumb:hover{opacity:0.85;transform:translateX(-2px);}
.s2-team__thumb img,
.s2-team__thumb-icon{
  width:64px;
  height:64px;
  border-radius:14px;
  object-fit:cover;
  object-position:center top;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(165deg,var(--card-tint-1),var(--card-tint-3));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--c-light) 70%,transparent),
    0 6px 16px color-mix(in srgb,var(--c-dark) 8%,transparent);
  transition:box-shadow 0.25s ease,transform 0.25s ease;
}
.s2-team__thumb-icon{
  font-size:22px;
  font-weight:800;
  color:rgba(0,82,245,0.25);
}
.s2-team__thumb-name{
  font-size:10px;
  font-weight:700;
  color:var(--text);
  line-height:1.2;
  text-align:center;
}
.s2-team__thumb-role{
  font-size:8px;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--accent);
}
.s2-team__layout:has(#founder-daniel:checked) .s2-team__thumb[for="founder-daniel"],
.s2-team__layout:has(#founder-uri:checked) .s2-team__thumb[for="founder-uri"],
.s2-team__layout:has(#founder-afik:checked) .s2-team__thumb[for="founder-afik"],
.s2-team__layout:has(#founder-team:checked) .s2-team__thumb[for="founder-team"]{
  opacity:1;
}
.s2-team__layout:has(#founder-daniel:checked) .s2-team__thumb[for="founder-daniel"] img,
.s2-team__layout:has(#founder-daniel:checked) .s2-team__thumb[for="founder-daniel"] .s2-team__thumb-icon,
.s2-team__layout:has(#founder-uri:checked) .s2-team__thumb[for="founder-uri"] img,
.s2-team__layout:has(#founder-uri:checked) .s2-team__thumb[for="founder-uri"] .s2-team__thumb-icon,
.s2-team__layout:has(#founder-afik:checked) .s2-team__thumb[for="founder-afik"] img,
.s2-team__layout:has(#founder-afik:checked) .s2-team__thumb[for="founder-afik"] .s2-team__thumb-icon,
.s2-team__layout:has(#founder-team:checked) .s2-team__thumb[for="founder-team"] img,
.s2-team__layout:has(#founder-team:checked) .s2-team__thumb[for="founder-team"] .s2-team__thumb-icon{
  box-shadow:
    inset 0 0 0 2px var(--accent),
    0 8px 24px color-mix(in srgb,var(--accent) 22%,transparent);
  transform:scale(1.04);
}

@media (max-width:960px){
  .s2-team__roster{
    grid-template-columns:repeat(2,1fr);
    transform:translateX(0);
  }
  .s2-team__title{
    font-size:clamp(32px,8vw,52px);
    white-space:normal;
  }
  .s2-team__focus{
    grid-template-columns:1fr;
    justify-items:center;
    min-height:min(48vh,480px);
  }
  .s2-team__panel-slot{
    width:100%;
    max-width:320px;
    min-height:300px;
    grid-column:1;
  }
  .s2-team__hero-col{
    left:50%;
    transform:translate(-50%,-50%);
  }
  .s2-team__thumbs{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
    width:100%;
    grid-column:1;
    justify-self:center;
  }
  .s2-team__thumb{width:auto;flex-direction:column;}
  .s2-team__hero{height:min(38vh,360px);width:min(100%,320px);}
}
@media (max-width:600px){
  .s2-team{padding:var(--pill-reserve) 20px 0 72px;} /* TASK-R06: was 0 top — enforce I-1 */
  .s2-team__roster-name,.s2-team__roster-role{font-size:10px;}
}

/* —— Slide 02: card carousel (founders) —— */
.s2-team__stage{
  grid-row:3;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  width:min(920px,100%);
  min-height:0;
  position:relative;
  z-index:10;
  padding-top:clamp(4px,0.8vh,10px);
  padding-bottom:clamp(10px,1.5vh,18px);
}
.slide[data-index="3"] .s2-team__stage{
  margin-top:0;
}
.s2-team-carousel{
  position:relative;
  flex:1;
  display:flex;
  align-items:center; /* was flex-end — bottom-anchoring left a dead band between the title and the card; center lifts it toward optical center (slides 2 & 11) */
  justify-content:center;
  width:100%;
  min-height:0;
  perspective:1200px;
  perspective-origin:50% 50%;
  padding:0 52px 22px;
}
.s2-team-carousel::after{
  content:"Swipe • ← / →";
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  font-size:11px;
  letter-spacing:0.1em;
  color:rgba(244,247,252,0.82); /* raised from --text-dim×0.75 (~0.43 alpha) so the swipe affordance is legible */
  opacity:1;
}
.s2-team-deck{
  position:relative;
  width:min(272px,74vw);
  height:100%;
  min-height:clamp(380px,calc(100dvh - 300px),640px);
  max-height:100%;
  transform-style:preserve-3d;
}
.slide[data-index="3"] .s2-team-deck{
  min-height:0;
}
.s2-team-deck > .s2-member-card{
  position:absolute;
  top:0;
  left:0;
  right:0;
  width:100%;
  margin:0;
  transform-origin:50% 42%;
  will-change:transform,opacity,filter;
  transition:
    transform 420ms cubic-bezier(0.22,0.61,0.36,1),
    opacity 300ms ease,
    filter 300ms ease,
    box-shadow 200ms ease;
}
.s2-team-deck .card-pos-0{
  transform:translate3d(0,0,0) rotateZ(0deg) scale(1);
  z-index:4;
  opacity:1;
  filter:none;
}
.s2-team-deck .card-pos-1{
  transform:translate3d(-58px,10px,-100px) rotateZ(-4deg) scale(0.93);
  z-index:3;
  opacity:0.94;
  filter:saturate(0.97) brightness(0.98);
  pointer-events:none;
}
.s2-team-deck .card-pos-2{
  transform:translate3d(58px,12px,-100px) rotateZ(4deg) scale(0.93);
  z-index:2;
  opacity:0.9;
  filter:saturate(0.95) brightness(0.96);
  pointer-events:none;
}
.s2-team-deck .card-pos-3{
  transform:translate3d(0,18px,-160px) rotateZ(0deg) scale(0.9);
  z-index:1;
  opacity:0.86;
  filter:saturate(0.92) brightness(0.94);
  pointer-events:none;
}
.s2-team-deck .deal-in{
  animation:dealIn 380ms cubic-bezier(0.22,0.61,0.36,1) both;
}
@keyframes dealIn{
  from{
    transform:translate3d(0,48px,-200px) rotateZ(6deg) scale(0.88);
    opacity:0;
    filter:blur(2px) brightness(0.92);
  }
  to{
    transform:translate3d(0,0,0) rotateZ(0deg) scale(1);
    opacity:1;
    filter:none;
  }
}
.s2-team-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border-radius:10px;
  border:1px solid rgba(0,82,245,0.2);
  background:linear-gradient(180deg,rgba(255,255,255,0.95),rgba(255,255,255,0.82));
  color:var(--text);
  box-shadow:0 6px 18px rgba(0,13,44,0.1);
  cursor:pointer;
  font-size:22px;
  line-height:1;
  display:grid;
  place-items:center;
  z-index:10;
}
.s2-team-nav--prev{left:0;}
.s2-team-nav--next{right:0;}
.s2-team-nav:hover{
  border-color:rgba(0,82,245,0.35);
  box-shadow:0 8px 22px rgba(0,82,245,0.12);
}

/* —— Slide 02 (display #4) DESKTOP: static 4-across founder grid (2026-06-12).
   The stacked carousel + swipe survive on MOBILE ONLY (mobile.css shows one
   card at a time); on desktop all four founders sit side by side, no cycling. —— */
body:not(.deck-mobile) .s2-team__stage{
  width:min(1240px,100%);
}
body:not(.deck-mobile) .s2-team-carousel{
  perspective:none;
  padding:0 0 10px;
}
body:not(.deck-mobile) .s2-team-carousel::after{
  display:none; /* swipe hint is meaningless without the carousel */
}
body:not(.deck-mobile) .s2-team-deck{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.2vw,20px);
  width:100%;
  transform-style:flat;
}
body:not(.deck-mobile) .s2-team-deck > .s2-member-card{
  position:static;
  transform:none !important;
  opacity:1 !important;
  filter:none !important;
  /* No pointer-events here: inherit from .slide — `none` when this slide is
     inactive (so it can't intercept hover on slides it paints above, e.g. #6/#9)
     and `all` when active. An explicit `pointer-events:auto` let the Advisory
     overlay steal #6/#9 hover once it shipped to all viewers. */
  animation:none !important; /* no deal-in */
}
body:not(.deck-mobile) .s2-member-card__bio{
  overflow-y:auto;
  min-height:0;
}
body:not(.deck-mobile) .s2-team-nav{
  display:none;
}
/* 2026-06-12: bio zone reads as one clean white block — solid white card
   (the old blue-gray gradient tinted the bio area; mobile went solid white
   2026-06-11), bio block top-aligned, no divider line under the bio. */
body:not(.deck-mobile) .s2-member-card{
  background:#fff;
}
body:not(.deck-mobile) .s2-member-card__body{
  justify-content:flex-start;
}
body:not(.deck-mobile) .s2-member-card__logos{
  border-top:none;
}

/* ══════════════════════════════
   ADVISORY BOARD  (display #13 · data-index 12 — shifted by the 2026-08-16 factory insert at #9)
   Reuses slide 02's .s2-* team styling — dark deck, white cards, pill glow,
   and title accent are all inherited via the shared classes + deck-dark.css.
   Scoped by the .s2-team--advisory modifier so it survives future renumbers.
   Differences vs the founder slide: 3-across grid (not 4), narrower centered
   stage, a navy photo backdrop behind background-removed still portraits, and a
   centered accent tagline below. (Logos footer is shared with slide 02.)
══════════════════════════════ */
.s2-team--advisory{
  grid-template-rows:auto minmax(0,1fr); /* tagline removed 2026-06-18 → 2 rows: head / stage */
  row-gap:clamp(20px,3vh,40px);
}
.s2-team--advisory .s2-team__head{ grid-row:1; }
.s2-team--advisory .s2-team__stage{ grid-row:2; margin-top:0; }

/* 3-row card: photo / body / logos footer (re-enabled 2026-06-18). DESKTOP: the photo track FLEXES so
   the bio never clips on short screens (2026-06-20). It's capped at 300px (near-square ~306×300 — the
   edges-touching framing) on tall screens and shrinks on short ones, because `calc(100% - 258px)`
   reserves the rest of the card for the body+footer: 258 ≈ 76px logos footer + ~182px body (name +
   blue role + longest bio + padding). So the body (1fr) always keeps ≥~182px and the full bio shows
   with NO scroll; `object-fit:contain` (below) just scales the person down on short cards (the single
   navy glow fills around it — never cropped). Was `auto` + a fixed aspect-ratio box, which was ~315px
   tall at EVERY desktop width and starved the body (bio cut on laptop 1280×800, etc.). (Mobile keeps
   its own 42% row — see mobile.css.) */
body:not(.deck-mobile) .s2-team--advisory .s2-member-card{
  grid-template-rows:minmax(0, min(300px, calc(100% - 258px))) minmax(0,1fr) auto;
}
/* Single studio dark-blue glow behind the advisors (BOTH desktop + mobile). The .webp assets are
   transparent ALPHA cut-outs (person only, no baked background), so this is the ONLY navy and shows
   continuously around every head — one glow, no seam. (Baking navy into the assets too created a
   visible "background cut" where the two blues met; that bake was dropped.) */
.s2-team--advisory .s2-member-card__photo{
  background:radial-gradient(95% 95% at 50% 30%, #1c3f6e, #0a1f42 55%, #03102b);
}
/* DESKTOP framing: the photo FILLS its flexible grid track (see grid-template-rows above) — no
   aspect-ratio, so the track height drives the box. On tall screens the track caps at 300px → a
   ~306×300 near-square box and `contain` width-fills each cut-out (touch L/R/bottom), the locked
   edges-touching look. On short screens the track shrinks → the box gets shorter and `contain` scales
   the WHOLE person down (never cropped); it touches the bottom (object-position below) with the single
   navy glow filling the sides/top. Scoped to desktop — mobile keeps its wide box + cover. */
body:not(.deck-mobile) .s2-team--advisory .s2-member-card__photo{
  height:100%;
  max-height:none;
  min-height:0;
}
body:not(.deck-mobile) .s2-team--advisory .s2-member-card__photo img{
  object-fit:contain;
  object-position:center bottom;
}
/* Blue role line under the name (sentence-case override of the team's uppercase chip). */
.s2-team--advisory .s2-member-card__role{
  margin:0 0 6px;
  font-size:13.5px;
  font-weight:600;
  letter-spacing:0.01em;
  text-transform:none;
  color:var(--accent);
}

/* Centered, accent-tinted closing tagline (below the cards). */
.s2-team__tagline{
  margin:0 auto;
  max-width:min(1080px,92%);
  text-align:center;
  font-size:clamp(15px,1.5vw,21px);
  line-height:1.5;
  font-weight:500;
  color:var(--accent-soft);
  text-wrap:balance;
  letter-spacing:0.01em;
}

/* Desktop: static 3-across grid (vs the founders' 4), team-sized + centered. */
body:not(.deck-mobile) .s2-team--advisory .s2-team__stage{
  width:min(960px,100%);
}
body:not(.deck-mobile) .s2-team--advisory .s2-team-deck{
  grid-template-columns:repeat(3,minmax(0,1fr));
  min-height: 360px; /* floor: card stage can't collapse to 0 on an early paint (ENG-355). Plain px, NOT
     min(360px,100%): a percentage term resolves against the SAME containing block that collapses on an
     early paint, so min(360px,100%) becomes min(360px,0)=0 exactly when the floor is needed (verified via
     computed-style probe) — it cannot cap overflow AND hold a floor at once. Verified no overlap into the
     title at 1512x720 / 1280x800 (deck naturally renders >=410px there; the 360px floor never binds). */
  height:100% !important;
  max-height:100% !important;
}
body:not(.deck-mobile) .slide[data-index="3"] .s2-team-deck{
  min-height: 360px; /* same floor for the founders' carousel (shares .s2-team-deck); see comment above */
}
/* Title: force exactly 2 lines on desktop (break after "gamification,"); widen the head +
   ease the size so line 2 ("data…mission.") fits one line. NOT glitched (see advisory-13.js). */
body:not(.deck-mobile) .s2-team--advisory .s2-team__head{
  max-width:min(1160px,95%);
}
body:not(.deck-mobile) .s2-team--advisory .s2-team__title{
  font-size:clamp(25px,3.05vw,42px);
  text-wrap:wrap;
}
/* The forced 2-line break is desktop-only; mobile wraps the title naturally. */
body.deck-mobile .s2-adv-br{ display:none; }

.s2-member-card{
  display:grid;
  grid-template-rows:minmax(0,50%) minmax(0,1fr) auto;
  min-height:100%;
  height:100%;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,0.98),rgba(248,250,255,0.94));
  border:1px solid rgba(0,82,245,0.14);
  box-shadow:
    0 20px 48px rgba(0,13,44,0.14),
    inset 0 1px 0 rgba(255,255,255,0.9);
}
.s2-member-card__photo{
  position:relative;
  min-height:0;
  height:100%;
  max-height:100%;
  overflow:hidden;
  background:linear-gradient(165deg,var(--card-tint-1),var(--card-tint-2));
}
.s2-member-card__photo img,
.s2-member-card__photo video{
  width:100%;
  height:100%;
  object-fit:cover; /* TASK-067: reverted from TASK-042's 'contain' — fill the box */
  object-position:center top; /* TASK-078: was 'center 50%' — anchor top so the image's top is always fully visible; crop happens only at the bottom */
  display:block;
}
.s2-member-card__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* TASK-078: top anchored, bottom-only crop */
  display: block;
}
.s2-member-card__photo img.is-logo{
  object-fit:contain;
  padding:22px 28px;
  background:linear-gradient(165deg,#e8eef8,#d4e0f0);
}
.s2-member-card__photo img.is-gif{
  object-fit:cover;
  object-position:center top;
}
.slide[data-index="3"].active .s2-member-card__photo img.is-gif{
  animation:none;
}
.s2-member-card__body{
  min-height:0;
  padding:8px 12px 6px;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center; /* center the role/name/bio block so leftover height splits evenly instead of leaving a white band above the logos */
  overflow:hidden;
}
.s2-member-card__role{
  margin:0 0 4px;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--accent);
}
.s2-member-card__name{
  margin:0 0 2px;
  font-size:21px;
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--text);
}
.s2-member-card__role-long{
  margin:0 0 6px;
  font-size:13px;
  color:var(--text-dim);
}
.s2-member-card__bio{
  margin:6px 0 0;
  padding:0 10px;
  flex:0 1 auto; /* was flex:1 (stretched, topping the text out and leaving a gap); natural height + cap so the body can center it */
  max-height:100%;
  min-height:0;
  font-size:13.5px; /* TASK-045: was 15px, -10% */
  line-height:1.55;
  color:var(--card-text);
  text-align:center;
  text-wrap:balance;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.s2-member-card__bio strong{
  font-weight:700;
  color:var(--deck-surface);
}
.s2-member-card__bio .s2-bio-accent{
  font-weight:600;
  color:var(--accent);
}
.s2-member-card__bio .s2-bio-lilac{
  font-weight:600;
  color:#5a5af0; /* darkened from #7b7bff for AA contrast on the white card */
}
.s2-member-card__logos{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  align-items:center;
  width:100%;
  padding:12px 16px;
  min-height:73px; /* TASK-046: was 56px, +30% to fit larger logo slots */
  background:#fff;
  border-top:1px solid rgba(0,0,0,0.06);
  box-sizing:border-box;
}
.s2-member-card__logo-slot{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  border:none;
  background:transparent;
  padding:0;
  outline:none;
  box-shadow:none;
}
.s2-member-card__logo-slot img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  margin:0 auto;
  object-fit:contain;
  object-position:center center;
  border:none;
  outline:none;
}
.s2-member-card__logos--count-1{
  justify-content:center;
  align-items:center;
}
.s2-member-card__logos--count-1 .s2-member-card__logo-slot{
  width:min(192px,80%); /* TASK-046: 148→192, 62%→80% (+30%) */
  height:52px; /* TASK-046: 40→52 */
  margin-inline:auto;
}
.s2-member-card__logos--count-1 .s2-member-card__logo-slot img{
  max-height:47px; /* TASK-046: 36→47 */
}
.s2-member-card__logos--count-2 .s2-member-card__logo-slot{
  width:73px; /* TASK-046: 56→73 */
  height:57px; /* TASK-046: 44→57 */
}
.s2-member-card__logos--count-3 .s2-member-card__logo-slot{
  width:62px; /* TASK-046: 48→62 */
  height:52px; /* TASK-046: 40→52 */
}
.s2-member-card__logos--count-4{
  gap:8px;
  padding:10px 12px;
}
.s2-member-card__logos--count-4 .s2-member-card__logo-slot{
  width:52px; /* TASK-046: 40→52 */
  height:47px; /* TASK-046: 36→47 */
}
.s2-member-card__logos--count-5{
  gap:6px;
  padding:10px 10px;
}
.s2-member-card__logos--count-5 .s2-member-card__logo-slot{
  width:47px; /* TASK-046: 36→47 */
  height:42px; /* TASK-046: 32→42 */
}

@media (max-width:720px){
  .s2-team__title{font-size:clamp(26px,7vw,40px);white-space:normal;}
  .s2-team-carousel{padding:0 40px 20px;}
  .s2-team-nav{width:32px;height:32px;font-size:18px;}
  .s2-team-deck{width:min(252px,78vw);min-height:clamp(340px,calc(100dvh - 280px),560px);}
  .s2-member-card{grid-template-rows:minmax(0,44%) minmax(0,1fr) auto;}
  .s2-member-card__photo{min-height:0;}
}

/* ══════════════════════════════
   SLIDE 6 — BUSINESS MODEL
══════════════════════════════ */
.s6-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:0 60px;width:100%;align-items:start;}
.s6-header{grid-column:1/-1;}
.s6-tiers{display:flex;gap:16px;}
.tier-card{flex:1;padding:28px 24px;border-radius:22px;}
.tier-label{font-size:9px;letter-spacing:2.5px;font-weight:700;color:var(--text-dim);margin-bottom:8px;}
.tier-price{font-size:58px;font-weight:800;line-height:1;color:var(--text);}
.tier-price span{font-size:18px;font-weight:400;color:var(--text-dim);}
.tier-tag{font-size:9px;letter-spacing:2px;font-weight:700;margin-bottom:8px;}
.tier-divider{width:100%;height:1px;background:rgba(0,82,245,0.1);margin:14px 0;}
.tier-ltv{font-size:11px;color:var(--text-dim);line-height:1.6;}
.s6-b2b{padding:28px 24px;border-radius:22px;}
.s6-b2b-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:14px;}
.s6-b2b-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 0;border-bottom:1px solid rgba(0,82,245,0.07);
  font-size:13px;color:var(--text);
}
.s6-b2b-item:last-child{border-bottom:none;}
.s6-b2b-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0;}
.s6-callout{grid-column:1/-1;padding:22px 28px;border-radius:20px;text-align:center;}
.s6-callout p{font-size:17px;font-weight:700;color:var(--text);}

/* ══════════════════════════════
   SLIDE 7 — ROADMAP
══════════════════════════════ */
.s7-layout{padding:0 60px;width:100%;}
.s7-header{margin-bottom:24px;width:100%;}
.s7-rows{display:flex;flex-direction:column;gap:10px;}
.s7-row{
  display:grid;grid-template-columns:110px 1fr;
  align-items:center;gap:20px;
  padding:14px 22px;border-radius:16px;
}
.s7-q{font-size:9px;font-weight:700;letter-spacing:2px;color:var(--accent);}
.s7-desc{font-size:13px;font-weight:500;color:var(--text);}

/* ══════════════════════════════
   SLIDE 8 — THE ASK
══════════════════════════════ */
/* REMOVED 2026-06-03 — old "raise/funds" Ask design (.s8-layout/.s8-header/.s8-hero/.s8-raise/.s8-sub/.s8-funds + .fund-item/.fund-cat/.fund-detail) is dead. The live Ask slide uses .s11-* (ask-11.css); no slide HTML referenced these. */

/* ══════════════════════════════
   SLIDE 9 — THANK YOU
══════════════════════════════ */
.s9-content{
  display:flex;flex-direction:column;align-items:center;justify-content:center; /* center vertically; pill clearance kept via the top pill-reserve padding below */
  width:100%;height:100%;text-align:center;
  padding:var(--pill-reserve) 80px clamp(24px,4vh,48px); /* TASK-R06: top pill-reserve enforces I-1 */
}
.s9-big{font-size:clamp(64px,9vw,110px);font-weight:800;color:var(--text);line-height:1;margin:24px 0 12px;}
.s9-tagline{font-size:clamp(16px,2vw,22px);font-weight:500;color:var(--accent-soft);letter-spacing:0.01em;margin-bottom:8px;}
.s9-line{width:80px;height:2px;background:var(--accent);border-radius:2px;margin:24px auto;}
.s9-contact a{
  font-size:18px;color:var(--accent-soft);text-decoration:none;font-weight:600;
  display:block;margin-bottom:8px;
}
.s9-contact a:hover{text-decoration:underline;}
.s9-contact p{font-size:13px;color:var(--text-dim);}
.s9-logo{font-size:12px;letter-spacing:6px;font-weight:800;color:rgba(244,247,252,0.72);margin-top:28px;}

/* Closing-slide brand mark above "Thank you." — symbol.png inside slide-1's
   rotating conic aura (reuses the brandAuraSpin keyframe). Replaces the removed
   GAGING.AI pill / tagline / GAGING™ wordmark. — 2026-06-02 */
.s9-brand{
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:clamp(12px,2.4vh,26px);
}
.s9-brand::before{
  content:'';
  position:absolute;
  inset:-45%;
  z-index:0;
  border-radius:50%;
  background:conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(187,187,255,0.22) 70deg,
    rgba(255,60,130,0.16) 140deg,
    transparent 210deg,
    rgba(0,82,245,0.2) 280deg,
    transparent 360deg
  );
  filter:blur(18px);
  opacity:0.8;
  animation:brandAuraSpin 9s linear infinite;
  pointer-events:none;
}
.s9-sym{
  position:relative;
  z-index:1;
  display:block;
  width:clamp(84px,12vw,120px);
  height:auto;
  filter:drop-shadow(0 0 18px rgba(187,187,255,0.5));
}
@media (prefers-reduced-motion:reduce){
  .s9-brand::before{ animation:none; }
}

/* ══════════════════════════════
   SLIDE HEADER (shared)
══════════════════════════════ */
.slide-header{
  position:absolute;top:28px;right:36px;
  display:flex;align-items:center;gap:8px;
}
.slide-counter{font-size:11px;font-weight:600;color:rgba(255,255,255,0.6);letter-spacing:1px;}

/* Team-preview marker — a teamOnly slide (e.g. Advisory) is shown only to @gaging.ai
   viewers; app.js injects this badge + tags the nav item so it's clear the slide is an
   internal preview not shown to investors. Amber so it reads as "internal", distinct from
   the blue deck accent. teamOnly slides are filtered out for non-team, so this only ever
   renders for the team. Top-left, clear of the nav rail (far left), pill (centre), and
   counter (top-right). */
.team-only-badge{
  position:absolute;top:24px;left:80px;z-index:41;
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px;border-radius:999px;
  font-size:10px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:#ffd591;
  background:color-mix(in srgb,#ffb020 12%,transparent);
  border:1px solid color-mix(in srgb,#ffb020 45%,transparent);
  box-shadow:0 0 16px rgba(255,176,32,0.18);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  pointer-events:none;white-space:nowrap;
}
.team-only-badge .tob-dot{
  width:6px;height:6px;border-radius:50%;flex:none;
  background:#ffb020;box-shadow:0 0 8px rgba(255,176,32,0.85);
}
.team-only-badge .tob-sub{opacity:0.72;font-weight:600;}

/* Nav-rail tag: an amber dot on the team-only slide's nav item (coexists with the
   centred active-state dot). */
.nav-item--team-only::after{
  content:'';position:absolute;top:6px;right:8px;
  width:5px;height:5px;border-radius:50%;
  background:#ffb020;box-shadow:0 0 6px rgba(255,176,32,0.75);
}

/* Pill badge — same position on every slide */
.deck-pill-slot{
  position:absolute;
  /* max(): keep the pill clear of the notch / Dynamic Island under viewport-fit=cover
     without double-counting — use the larger of the inset or the design top-margin
     (0 inset on non-notched screens/desktop → falls back to the clamp). */
  top:max(env(safe-area-inset-top), clamp(52px,8vh,76px));
  left:80px;
  right:80px;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  z-index:40;
  pointer-events:none;
}

/* Center pill + headline blocks — gap/sizing via .deck-slide-title above */
.ph-slide{
  margin-left:auto;
  margin-right:auto;
}
.s4-header .pill,
.s6-header .pill,
.s7-header .pill,
.ph-slide > .pill{
  align-self:center;
}

/* ══════════════════════════════
   DARK THEME (slide 1)
══════════════════════════════ */
body{transition:background 1.2s cubic-bezier(1,0,0.4,1);}
body.dark-mode{background:var(--deck-navy) !important;}
.slide[data-theme="dark"]{
  display:block;
  position:absolute;
  inset:0;
  background:var(--deck-navy);
  overflow:hidden;
}
.slide[data-theme="dark"] .slide-header{
  z-index:40;
  mix-blend-mode:normal;
}
.slide[data-theme="dark"] .slide-counter{color:rgba(255,255,255,0.6);}
body.dark-mode #wireCanvas{opacity:0.06;}
body.dark-mode .sidenav::before{
  background:color-mix(in srgb,rgba(0,50,120,1) 14%,transparent);
}
body.dark-mode .nav-num{color:rgba(255,255,255,0.5);}
body.dark-mode .nav-item.active .nav-num{color:var(--accent);}

/* ── Slide 01 — hands (no split columns = no center seam) ── */
.hands-wrap{
  position:absolute;
  inset:0;
  z-index:1;
  background:var(--deck-navy);
  overflow:hidden;
}
.hand-img{
  position:absolute;
  top:-4%;
  height:112%;
  width:auto;
  max-width:min(46vw,820px); /* TASK-R05: I-2 hand constraint */
  object-fit:contain;
  display:block;
  will-change:transform;
  pointer-events:none;
}
.hand-img-left{
  left:0;
  z-index:2;
  transform:translateX(-115%);
  animation:handSlideLeft 2.1s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}
.hand-img-right{
  right:0;
  z-index:1;
  transform:translateX(115%);
  animation:handSlideRight 2.1s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}
@keyframes handSlideLeft{
  to{transform:translateX(0);}
}
@keyframes handSlideRight{
  to{transform:translateX(0);}
}

/* ── Text overlay on dark ── */
.s1-overlay{
  position:absolute;
  bottom:clamp(48px,8vh,88px);
  left:0;
  right:0;
  z-index:25;
  padding:var(--pill-reserve) 48px 0 80px; /* TASK-R06: enforce I-1 (bottom-anchored so top reserve is precautionary) */
  pointer-events:none;
}
.pill-dark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 40px;
  border-radius:129px;
  font-size:calc(clamp(29px,3.5vw,48px) * 0.6); /* 0.6× the slide title — 2026-06-08 */
  font-weight:700;
  letter-spacing:0.24em;
  color:var(--text);
  background:rgba(0,82,245,0.34);
  border:1px solid rgba(187,187,255,0.55);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  font-family:var(--font);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.16),
    inset 0 1px 0 rgba(187,187,255,0.28),
    0 0 28px rgba(0,82,245,0.7),
    0 0 56px rgba(77,155,255,0.38),
    0 6px 22px rgba(0,13,44,0.42);
  animation:fadeUp .8s ease 1.4s both;
}
.s1-title-dark{
  font-size:clamp(52px,7vw,82px);font-weight:600;line-height:1.0;
  color:#fff;margin:16px 0 12px;
  font-family:var(--font);
  text-shadow:0 2px 40px rgba(0,0,0,0.5);
  animation:fadeUp .8s ease 1.6s both;
}
.s1-title-dark span{color:var(--accent-soft) !important;font-weight:600;}
.s1-title-play{font-size:1.17em;line-height:1.05;display:block;margin-bottom:0.12em;} /* "Play" — lilac (via the span rule above), ~17% bigger than the body line, on its own line with a small gap below */
.s1-sub-dark{
  font-size:16px;font-weight:400;
  color:rgba(255,255,255,0.5);
  font-family:var(--font);
  animation:fadeUp .8s ease 1.8s both;
}
.s1-logo-dark{
  position:absolute;bottom:32px;right:52px;
  font-size:11px;font-weight:800;letter-spacing:5px;
  color:rgba(255,255,255,0.2);
  font-family:var(--font);
  animation:fadeUp .6s ease 2s both;
}

@keyframes fadeUp{
  0%{opacity:0;transform:translateY(16px);}
  100%{opacity:1;transform:translateY(0);}
}

/* ── Background transition overlay ── */
#bgTransition{
  position:fixed;inset:0;
  pointer-events:none;z-index:300;
  background:var(--deck-navy);
  opacity:0;
  transition:opacity 0s;
}


/* ── Logo / symbol: holographic aura (not glitch) ── */
.s1-logo-wrap.fx-brand,
.s1-sym-wrap.fx-brand{
  isolation:isolate;
}
/* Shared base — both auras start HIDDEN and only fade in once their mark has
   finished its reveal (2026-06-03). Wordmark then pulses in place; symbol rotates. */
.s1-logo-wrap.fx-brand::before,
.s1-sym-wrap.fx-brand::before{
  content:'';
  position:absolute;
  inset:-18%;
  z-index:0;
  border-radius:50%;
  opacity:0;
  pointer-events:none;
}
/* GAGING wordmark — symmetric radial glow; fades in after logoReveal (~1.65s)
   then PULSES IN PLACE (no rotation — the wide ellipse no longer sweeps). */
.s1-logo-wrap.fx-brand::before{
  background:radial-gradient(
    ellipse at center,
    rgba(187,187,255,0.9) 0%,
    rgba(0,82,245,0.5) 45%,
    transparent 72%
  );
  filter:blur(32px);
  animation:
    s1GlowIn 0.45s ease-out 1.65s forwards,
    s1WordPulse 3.4s ease-in-out 2.1s infinite;
}
/* Symbol — rotating conic aura (motion unchanged); fades in after symReveal (~2.5s). */
.s1-sym-wrap.fx-brand::before{
  inset:-35%;
  background:conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(187,187,255,0.22) 70deg,
    rgba(255,60,130,0.16) 140deg,
    transparent 210deg,
    rgba(0,82,245,0.2) 280deg,
    transparent 360deg
  );
  filter:blur(14px);
  animation:
    s1GlowIn 0.45s ease-out 2.5s forwards,
    brandAuraSpin 9s linear 2.5s infinite;
}
.s1-logo-wrap.fx-brand > img,
.s1-sym-wrap.fx-brand > img{
  position:relative;
  z-index:1;
}
@keyframes brandAuraSpin{
  to{transform:rotate(360deg);}
}
/* Quick fade-in for either aura once its mark has revealed. */
@keyframes s1GlowIn{
  from{opacity:0;}
  to{opacity:0.85;}
}
/* GAGING wordmark glow — breathe in place (opacity + subtle scale), no rotation.
   0% matches s1GlowIn's end opacity so the fade-in hands off seamlessly. */
@keyframes s1WordPulse{
  0%,100%{opacity:1;transform:scale(1.03);}
  50%{opacity:1;transform:scale(0.98);}
}

/* ── Logo top ── */
.s1-logo-wrap{
  position:absolute;
  top:clamp(88px,14vh,148px);
  left:50%;
  transform:translateX(-50%);
  z-index:30;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  pointer-events:none;
  padding:8px 24px 0;
  box-sizing:border-box;
}
.s1-logo-wrap .deck-pill-slot.s1-pill-below-logo{
  position:relative;
  top:auto;
  left:auto;
  right:auto;
  margin-top:clamp(14px,2.4vh,24px);
  width:100%;
}
#gagingLogo{
  width:min(520px,88vw);
  max-width:min(520px,40vw); /* TASK-R05: I-2 logo cap inside centre safe-zone */
  height:auto;
  display:block;
  opacity:0;
  filter:drop-shadow(0 0 36px rgba(187,187,255,0.84));
  animation:
    logoReveal 1.35s cubic-bezier(0.25,0.46,0.45,0.94) 0.45s forwards,
    brandShimmer 4.2s ease-in-out 2.2s infinite;
}
@keyframes brandShimmer{
  0%,100%{
    filter:drop-shadow(0 0 36px rgba(187,187,255,0.84));
  }
  50%{
    filter:
      drop-shadow(-3px 0 20px rgba(255,70,140,0.42))
      drop-shadow(3px 0 26px rgba(0,200,255,0.62))
      drop-shadow(0 0 46px rgba(0,82,245,0.72));
  }
}
@keyframes logoReveal{
  0%{
    opacity:0;
    transform:scale(0.8) translateY(-16px);
    filter:drop-shadow(0 0 0 rgba(187,187,255,0)) blur(7px);
  }
  62%{
    opacity:1;
    transform:scale(1.06) translateY(0);
    filter:drop-shadow(0 0 64px rgba(187,187,255,1)) blur(0);
  }
  100%{
    opacity:1;
    transform:scale(1) translateY(0);
    filter:drop-shadow(0 0 36px rgba(187,187,255,0.81)) blur(0);
  }
}
@keyframes logoPulse{
  0%,100%{filter:drop-shadow(0 0 18px rgba(187,187,255,0.35));}
  50%{filter:drop-shadow(0 0 32px rgba(187,187,255,0.55));}
}

/* ── Symbol between fingertips ── */
.s1-sym-wrap{
  position:absolute;
  left:50%;
  top:46%;
  transform:translate(-50%,-50%);
  z-index:15;
  pointer-events:none;
}
#gagingSym{
  width:min(120px,13vw);
  height:auto;
  display:block;
  opacity:0;
  filter:drop-shadow(0 0 18px rgba(187,187,255,0.5));
  animation:
    symReveal 1s cubic-bezier(0.25,0.46,0.45,0.94) 1.5s forwards,
    symFloat 3.8s ease-in-out 2.6s infinite,
    symShimmer 4s ease-in-out 2.4s infinite;
}
@keyframes symReveal{
  0%{opacity:0;transform:scale(0.75);}
  100%{opacity:1;transform:scale(1);}
}
@keyframes symFloat{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-5px) scale(1.03);}
}
@keyframes symShimmer{
  0%,100%{
    filter:drop-shadow(0 0 16px rgba(187,187,255,0.45));
  }
  50%{
    filter:
      drop-shadow(0 0 22px rgba(0,220,255,0.65))
      drop-shadow(0 0 36px rgba(0,82,245,0.35));
  }
}


/* ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•
   SLIDE 03 - HEALTHSPAN + card beam  (now display #2 · data-index 1 after the 2026-06-09 reorder)
ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג•ג• */
.slide[data-index="1"]{
  background:var(--deck-navy);
  isolation:isolate;
}
.slide[data-index="1"] .slide-counter{
  color:rgba(255,255,255,0.4);
}
.s25-layout{
  display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start; /* top-anchor so the title hugs the pill (was center → title floated to mid-slide, pill→title ~175px); content sits clearly below. 2026-06-09 */
  gap:clamp(24px,4vh,40px);
  padding:var(--pill-reserve) 56px clamp(16px,3vh,40px) 80px;
  width:100%;height:100%;
  box-sizing:border-box;
}
.s25-head{
  text-align:center;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(16px,2.5vh,24px);
  max-width:min(820px,100%);
}
.s25-tag{margin:0;}
.slide[data-index="1"] .deck-slide-title{
  color:#fff;
}
.cardbeam-embed-wrap{
  --cardbeam-crop-w:min(600px,72vw);
  --cardbeam-src-w:980px;
  width:var(--cardbeam-crop-w);
  max-width:var(--cardbeam-crop-w);
  margin-inline:auto;
  height:clamp(260px,46vh,440px);
  border-radius:0;
  overflow:hidden;
  background:var(--deck-navy);
  isolation:isolate;
  position:relative;
  z-index:2;
  /* Decorative code-rain: lower its weight + fade the hard crop edges so the
     headline leads and the rectangle doesn't read as a pasted-in box. */
  opacity:0.6;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.cardbeam-embed{
  position:relative;
  left:50%;
  width:var(--cardbeam-src-w);
  max-width:none;
  height:100%;
  transform:translateX(-50%);
  border:0;
  display:block;
  background:var(--deck-navy);
  color-scheme:dark;
}
.ph-slide{margin:0 auto;padding:48px 40px;border-radius:28px;max-width:900px;}
.ph-slide h2{color:var(--text);}
.ph-slide h2 span{color:var(--accent-soft);}
.ph-note{font-size:14px;color:var(--text-dim);margin-top:20px;line-height:1.5;}