/* One scene at a time, with independently replaceable participant photos/videos. */
.experience-demo .demo-context { display:block; margin-bottom:26px; }
.experience-demo .scenario-tabs {
  display:flex; flex-wrap:nowrap; justify-content:center; gap:2px;
  width:fit-content; max-width:100%; margin-inline:auto; padding:6px;
  border-radius:100px; background:var(--sp-gray-50);
}
.experience-demo .scenario-tabs button {
  flex:0 0 auto; min-width:0; padding:11px 14px; border-radius:100px; line-height:1.45;
  white-space:nowrap; font-size:var(--small); transition:background .2s,color .2s,box-shadow .2s;
}
.experience-demo .scenario-tabs button[aria-selected=true] {
  background:var(--navy); color:#fff; box-shadow:0 3px 10px #281d721c;
}
.experience-demo .scenario-tabs button:focus-visible { outline-offset:-3px; }
.experience-demo .conversation-demo { transition:opacity .18s; }
.experience-demo .conversation-demo.is-loading { opacity:.58; }
.experience-demo .participant-tile { height:auto; aspect-ratio:3/2; }
.participant-media, .participant-media>img, .participant-media>noscript>img {
  width:100%; height:100%; object-fit:cover; object-position:50% 42%;
}
.participant-media>video {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 42%; opacity:0; transition:opacity .25s;
}
.participant-media>video.has-frame { opacity:1; }
.participant-placeholder {
  width:100%; height:100%; display:grid; place-items:center;
  background:var(--brand-gradient); color:var(--sp-purple-100);
  font-family:var(--font-display); font-size:clamp(3rem,8vw,6rem);
}
.participant-role {
  position:absolute; top:14px; left:14px; right:14px; width:fit-content;
  max-width:calc(100% - 28px); padding:5px 11px; border-radius:9px;
  background:color-mix(in srgb,var(--sp-ink-885) 67%,transparent); backdrop-filter:blur(12px); color:#fff;
  font-size:var(--tiny); line-height:1.5; overflow-wrap:anywhere;
}
.experience-demo .tile-name b, .experience-demo .caption-label b { font-weight:600; }
.experience-demo .demo-captions { min-height:120px; display:flex; flex-direction:column; justify-content:center; }
.experience-demo .demo-captions>p { min-height:1.6em; }
.scenario-description {
  margin:32px auto 0; padding:29px 30px; max-width:100%; border-radius:20px;
  background:var(--brand-gradient-soft); border:1px solid var(--sp-gray-200);
  color:var(--navy); font-family:var(--font-display); font-size:clamp(1.3rem,2.05vw,1.75rem);
  font-weight:700; letter-spacing:-.035em; line-height:1.5; text-align:center; min-height:100px;
  display:flex; align-items:center; justify-content:center;
}
.scene-video-toggle {
  display:flex; align-items:center; justify-content:center; gap:7px; min-height:40px;
  background:#ffffff12; border:1px solid #ffffff32; border-radius:100px;
  color:var(--sp-purple-100); padding:8px 12px; font-size:var(--tiny);
}
.scene-video-toggle .icon { width:15px; height:15px; }
.experience-demo .demo-bottom:has(.scene-video-toggle:not([hidden])) .demo-dock { display:none; }
@media(max-width:760px) {
  .experience-demo .demo-context { margin:0 -5px 20px; }
  .experience-demo .participant-tile { aspect-ratio:3/4; }
  .participant-role { top:9px; left:8px; right:8px; max-width:calc(100% - 16px); padding:4px 7px; font-size:.6875rem; }
  .experience-demo .tile-name { bottom:9px; }
  .experience-demo .tile-name>span { padding:5px 7px; min-width:0; }
  .experience-demo .tile-name>span>span { display:block; font-size:.625rem; line-height:1.5; }
  .experience-demo .tile-name>.icon { display:none; }
  .experience-demo .demo-captions { min-height:142px; }
  .scenario-description { font-size:1.3rem; padding:23px 21px; margin-top:22px; min-height:118px; border-radius:16px; }
  .scene-video-toggle>span { display:none; }
}

/* A compact native selector replaces the row on small screens. */
.scenario-picker { display:none; }
.scenario-picker-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:14px; background:var(--sp-gray-200); color:var(--navy); flex-shrink:0; }
.scenario-picker-icon .icon { width:24px; height:24px; stroke-width:1.6; }
.scenario-picker-field { flex:1; min-width:0; }
.scenario-picker-field label { display:block; color:var(--muted); font-size:.6875rem; font-weight:500; line-height:1.5; padding-left:3px; }
.scenario-picker-field select { display:block; width:100%; min-height:32px; appearance:none; -webkit-appearance:none; background:transparent; border:0; border-radius:5px; color:var(--navy); font:700 1.0625rem/1.5 var(--font-ui); padding:2px 21px 2px 3px; cursor:pointer; }
.scenario-picker-chevron { position:absolute; right:23px; bottom:26px; width:8px; height:8px; border-right:2px solid var(--navy); border-bottom:2px solid var(--navy); transform:rotate(45deg); pointer-events:none; }
.experience-heading { align-items:center; gap:48px; }
.experience-heading h2 { font-size:clamp(2rem,3.6vw,3rem); color:var(--sp-gray-555); font-weight:600; line-height:1.25; letter-spacing:-.045em; }
.experience-heading h2 .copy-emphasis { color:var(--sp-purple-400); font-weight:800; }
.experience-intro { display:flex; gap:18px; align-items:flex-start; max-width:410px; padding:24px 26px; background:var(--brand-gradient-soft); border:0; border-radius:24px; box-shadow:0 10px 32px #281d7204; }
.experience-intro-mark { display:grid; place-items:center; flex:0 0 44px; height:44px; background:var(--sp-gray-200); border-radius:15px; color:var(--sp-purple-500); }
.experience-intro-mark .icon { width:27px; height:27px; stroke-width:1.5; }
.experience-intro p { color:var(--sp-gray-525); font-size:var(--body); line-height:1.65; }
.experience-intro strong { display:block; margin-top:8px; color:var(--navy); font-size:1.125rem; font-weight:650; line-height:1.6; }
.product-features { gap:40px; padding-top:58px; }
.product-features .feature { flex-direction:column; align-items:center; text-align:center; gap:23px; padding:0 16px; }
.product-features .feature>.icon { width:64px; height:64px; margin:0; color:var(--navy); stroke-width:1.3; }
.product-features .feature h3 { font-family:var(--font-display); font-size:1.1875rem; font-weight:700; line-height:1.5; }
.product-features .feature p { margin:10px auto 0; max-width:290px; font-size:var(--body); line-height:1.7; }
@media(max-width:1100px) {
  .experience-demo .scenario-tabs { display:none; }
  .scenario-picker { position:relative; display:flex; align-items:center; gap:14px; padding:14px 18px; background:var(--sp-gray-50); border:1px solid var(--sp-purple-100); border-radius:20px; box-shadow:0 4px 18px color-mix(in srgb,var(--sp-purple-800) 2%,transparent); }
  .scenario-picker:focus-within { outline:2px solid var(--sp-purple-300); outline-offset:3px; }
  .scenario-picker-field select:focus-visible { outline:none; }
  .experience-heading { gap:30px; }
  .experience-intro { max-width:360px; padding:21px; gap:12px; }
}
@media(max-width:760px) {
  .experience-heading h2 { font-size:clamp(1.9rem,7.5vw,2.5rem); }
  .experience-intro { max-width:none; margin-top:30px; padding:20px; }
  .experience-intro p { font-size:var(--small); }
  .experience-intro strong { font-size:var(--body); }
  .product-features { gap:42px; padding-top:44px; }
  .product-features .feature { gap:17px; padding:0 20px; }
  .product-features .feature>.icon { width:58px; height:58px; }
  .product-features .feature p { margin-top:7px; font-size:var(--small); max-width:320px; }
}