/* Slide 10 — Roadmap (journey timeline) */
.slide[data-index="10"]{
  --s10-blue:var(--accent);
  --s10-cyan:var(--cyan);
  --s10-lilac:var(--accent-soft);
  overflow:hidden;
  background:var(--deck-navy);
}

.s10-layout{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  max-width:min(1320px,98vw);
  margin:0 auto;
  min-height:100%; /* TASK-072: was calc(100dvh - 52px); fill the slide so vertical centering doesn't push the title 26px down */
  padding:var(--pill-reserve) clamp(18px,2.5vw,36px) clamp(14px,2vh,22px); /* TASK-R06: was clamp(60px,8vh,76px) — enforce I-1 */
  box-sizing:border-box;
  gap:clamp(10px,1.8vh,18px);
}

.s10-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:clamp(8px,1.2vh,14px);
  width:100%;
}
.s10-head .deck-slide-title{margin:0;}
.s10-head .deck-slide-title span{color:var(--accent-soft);} /* lilac title accent to match every other slide; cyan stays on the roadmap data viz */

.s10-panel{
  position:relative;
  flex:1;
  width:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:clamp(14px,2vh,22px);
  padding:clamp(22px,2.8vw,32px) clamp(16px,2vw,24px) clamp(20px,2.5vw,28px);
  /* Outer container removed per request (2026-05-31) — content sits directly on
     the slide; no bordered/blurred panel box. */
  background:none;
  border:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  overflow:visible;
}
.s10-panel::before,
.s10-panel::after{ display:none; } /* decorative container overlays removed with the panel box */
.s10-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 18% 0%,rgba(0,82,245,0.2),transparent 55%),
    radial-gradient(ellipse 60% 45% at 88% 100%,rgba(0,223,244,0.14),transparent 50%),
    repeating-linear-gradient(
      -12deg,
      transparent,
      transparent 40px,
      rgba(255,255,255,0.015) 40px,
      rgba(255,255,255,0.015) 41px
    );
}
.s10-panel::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(187,187,255,0.45),transparent);
}

/* Spine — Build → Scale */
.s10-spine{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(10px,1.5vw,18px);
  padding:0; /* match .s10-journey width so the full-width dots overlay aligns to the columns */
}
.s10-spine__origin{
  font-size:9px;
  font-weight:800;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:rgba(187,187,255,0.7);
  white-space:nowrap;
}
.s10-spine__main{
  position:relative;
  flex:1;
  min-width:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(8px,1.1vw,14px);
  align-items:center;
  min-height:22px;
}
.s10-spine__beam{
  position:absolute;
  left:0;
  right:0;
  top:50%;
  z-index:1;
  height:4px;
  margin-top:-2px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--s10-blue) 0%,var(--s10-cyan) 55%,var(--s10-lilac) 100%);
  box-shadow:0 0 16px rgba(0,82,245,0.55);
  transform:scaleX(0);
  transform-origin:left center;
}
.s10-spine__glow{
  position:absolute;
  left:0;
  top:50%;
  z-index:2;
  width:24%;
  height:14px;
  margin-top:-7px;
  border-radius:99px;
  background:linear-gradient(90deg,rgba(0,223,244,0.7),transparent);
  filter:blur(8px);
  opacity:0;
  pointer-events:none;
  animation:s10GlowSweep 2.8s ease-in-out infinite;
  animation-play-state:paused;
}
/* Full-width overlay spanning the whole spine (= .s10-journey width), so the four
   dots land on the column centres / connector lines instead of on the inset beam. */
.s10-spine__dots{
  position:absolute;
  left:0;
  right:0;
  top:50%;
  transform:translateY(-50%);
  z-index:4;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(8px,1.1vw,14px);
  align-items:center;
  pointer-events:none;
}
.s10-spine__dot{
  justify-self:center;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--s10-blue);
  border:2px solid rgba(255,255,255,0.95);
  box-shadow:0 0 16px rgba(0,82,245,0.65);
}
.s10-spine__dot--launch{
  width:15px;
  height:15px;
  background:var(--indigo);
  box-shadow:0 0 18px rgba(124,92,255,0.7);
}
.s10-spine__dot--goal{
  width:16px;
  height:16px;
  background:linear-gradient(145deg,var(--s10-cyan),var(--s10-blue));
  box-shadow:0 0 20px rgba(0,223,244,0.65);
}
.slide[data-index="10"].active .s10-spine__dot{
  animation:s10DotPop 0.5s cubic-bezier(0.22,1,0.36,1) backwards;
}
.slide[data-index="10"].active .s10-spine__dot:nth-child(1){animation-delay:0.35s;}
.slide[data-index="10"].active .s10-spine__dot:nth-child(2){animation-delay:0.45s;}
.slide[data-index="10"].active .s10-spine__dot:nth-child(3){animation-delay:0.55s;}
.slide[data-index="10"].active .s10-spine__dot:nth-child(4){animation-delay:0.65s;}
.slide[data-index="10"].active .s10-spine__beam{
  animation:s10BeamGrow 1.6s cubic-bezier(0.22,1,0.36,1) forwards;
}
.slide[data-index="10"].active .s10-spine__glow{
  animation-play-state:running;
}
.s10-spine__goal{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.s10-spine__goal img{
  width:clamp(28px,3.2vw,36px);
  height:auto;
  filter:drop-shadow(0 0 14px rgba(0,223,244,0.55));
}
.s10-spine__goal span{
  font-size:9px;
  font-weight:800;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--s10-lilac);
}

/* Quarter columns */
.s10-journey{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(8px,1.1vw,14px);
  align-items:start;
  margin-top:2px;
}
.s10-col{
  --s10-accent:var(--s10-blue);
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  opacity:0;
  transform:translateY(18px);
}
.slide[data-index="10"].active .s10-col{
  animation:s10ColIn 0.65s cubic-bezier(0.22,1,0.36,1) forwards;
  animation-delay:calc(0.12s + var(--s10-i, 0) * 0.1s);
}
.s10-col--launch{--s10-accent:var(--indigo);}
.s10-col--automate{--s10-accent:var(--blue-bright);}
.s10-col--scale{--s10-accent:var(--s10-cyan);}

.s10-col{
  position:relative;
}
.s10-col::before{
  content:"";
  position:absolute;
  top:-14px;
  left:50%;
  width:2px;
  height:12px;
  margin-left:-1px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--s10-accent) 55%,transparent),transparent);
  opacity:0.65;
  pointer-events:none;
}

.s10-col__head{
  text-align:center;
  padding:10px 8px;
  border-radius:14px;
  background:rgba(0,0,0,0.22);
  border:1px solid color-mix(in srgb,var(--s10-accent) 35%,rgba(255,255,255,0.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
}
.s10-col__phase{
  display:block;
  margin-bottom:8px;
  font-size:16px; /* 100% bigger (was 8px) — 2026-05-31 */
  font-weight:800;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--s10-accent) 80%,#fff);
}
.s10-col__q{
  margin:0;
  font-size:clamp(15px,1.5vw,19px);
  font-weight:900;
  letter-spacing:-0.02em;
  color:#fff;
  line-height:1.1;
}
.s10-col__q em{
  font-style:normal;
  font-size:0.72em;
  font-weight:700;
  color:rgba(244,247,252,0.55);
  letter-spacing:0.02em;
}

.s10-col__cards{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.s10-card{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:11px 12px 11px 10px;
  border-radius:14px;
  background:linear-gradient(
    135deg,
    color-mix(in srgb,var(--s10-accent) 22%,rgba(0,13,44,0.6)) 0%,
    rgba(0,13,44,0.45) 100%
  );
  border:1px solid color-mix(in srgb,var(--s10-accent) 30%,rgba(255,255,255,0.1));
  box-shadow:
    0 10px 24px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.06);
  overflow:hidden;
}
.s10-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:linear-gradient(180deg,var(--s10-accent),transparent);
  border-radius:14px 0 0 14px;
}
.s10-card__n{
  flex-shrink:0;
  width:22px;
  font-size:10px;
  font-weight:900;
  line-height:1.3;
  color:color-mix(in srgb,var(--s10-accent) 70%,#fff);
  opacity:0.85;
}
.s10-card__text{
  font-size:clamp(13px,1.1vw,15px); /* match the hero card text size (was clamp(10px,0.9vw,12px)) so all four cards read equally — 2026-05-31 */
  font-weight:600;
  line-height:1.45;
  color:rgba(244,247,252,0.92);
}
/* Icon cards (Automate, Expand): icon stacked above the text */
.s10-card--icon{
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:8px;
}
.s10-card__icon{
  width:clamp(26px,2.6vw,32px);
  height:clamp(26px,2.6vw,32px);
  color:rgba(187,187,255,0.95);
  flex-shrink:0;
}
.s10-card__icon svg{ width:100%; height:100%; }
/* Uniform fixed-height top zone: badge OR icon, centred — so all four labels start at the same y (desktop). */
body:not(.deck-mobile) .s10-card__top{
  height:clamp(30px,3vw,38px);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
/* Mobile cards are horizontal rows — collapse the wrapper so the badge/icon flows
   as a direct flex child (as before the wrap), avoiding extra height/overflow. */
body.deck-mobile .s10-card__top{ display:contents; }
/* Uniform centred text zone for ALL four cards (was icon-only). */
body:not(.deck-mobile) .s10-card__text{
  min-height:2.9em;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.s10-card--hero{
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:14px 12px;
  background:linear-gradient(
    155deg,
    rgba(124,92,255,0.45) 0%,
    rgba(0,82,245,0.35) 50%,
    rgba(0,223,244,0.15) 100%
  );
  border-color:rgba(187,187,255,0.5);
  box-shadow:
    0 0 32px rgba(124,92,255,0.35),
    0 12px 28px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.15);
}
.s10-card--hero::before{
  width:100%;
  height:3px;
  top:0;
  left:0;
  right:0;
  bottom:auto;
  background:linear-gradient(90deg,var(--s10-cyan),var(--s10-lilac),var(--s10-blue));
  border-radius:14px 14px 0 0;
}
.s10-card--hero .s10-card__text{
  font-size:clamp(13px,1.1vw,15px);
  font-weight:800;
  color:#fff;
}
.s10-card__badge{
  display:inline-block;
  padding:3px 10px;
  border-radius:99px;
  font-size:8px;
  font-weight:800;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--deck-surface);
  background:linear-gradient(180deg,#fff4a8,#ffd84a 55%,#f0b820);
  border:1px solid rgba(10,22,40,0.15);
  box-shadow:0 2px 0 rgba(10,22,40,0.12);
}
.s10-card__badge--mvp{ font-size:12px; padding:5px 14px; } /* "MVP Launch" — 50% bigger than the 8px base */

/* Equal-height bottom cards (desktop only): stretch the four journey columns
   to the tallest, then let each single card fill its column so all four card
   boxes share one height with their content vertically centred. Mobile is a
   vertical stack (mobile.css) and keeps its own sizing. — 2026-06-02 */
body:not(.deck-mobile) .s10-journey{ align-items:stretch; }
body:not(.deck-mobile) .s10-col__cards{ flex:1; }
body:not(.deck-mobile) .s10-card{ flex:1; justify-content:center; }

@keyframes s10BeamGrow{
  to{transform:scaleX(1);}
}
@keyframes s10DotPop{
  from{
    opacity:0;
    transform:scale(0.4);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}
@keyframes s10GlowSweep{
  0%{left:0;opacity:0;}
  15%{opacity:1;}
  50%{left:76%;opacity:0.85;}
  100%{left:100%;opacity:0;}
}
@keyframes s10ColIn{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@media (max-width:1100px){
  .s10-panel{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .s10-spine__main,
  .s10-spine__dots,
  .s10-journey{
    min-width:920px;
  }
}
@media (max-width:960px){
  .s10-spine{
    grid-template-columns:1fr;
    text-align:center;
    gap:8px;
  }
  .s10-spine__origin,
  .s10-spine__goal{
    justify-self:center;
  }
  .s10-spine__dots{ display:none; } /* stacked narrow-desktop spine: the full-width dot overlay no longer maps to a beam row */
}

@media (prefers-reduced-motion:reduce){
  .s10-spine__beam,
  .s10-spine__glow,
  .s10-col{
    animation:none !important;
    opacity:1;
    transform:none;
  }
  .s10-spine__beam{transform:scaleX(1);}
  .s10-spine__dot{opacity:1;transform:none;}
}