/* Admitted AI-demo showcase island only (v3 presentation, rev4 theme).
   Real customer/private-only sections keep their existing presentation.
   Company color: the shared runtime applies the release's immutable
   resolved palette verdict as section-local --wss-beta-theme-accent after
   the carrier join; that bound variable plus ONE honest neutral fallback
   (#0E6B52, the family's established default) are the ONLY sources —
   inherited --client-accent / --wss-rail-accent can never recolor this
   island when a palette is rejected, absent or cleared. Verified client
   TYPOGRAPHY tokens remain in the font chain only. Every rule is scoped to
   this one island id so nothing else on the release page is affected. */
#wss-beta-demo-videos.wss-beta-videos{
  --beta-accent:var(--wss-beta-theme-accent,#0E6B52);
  --beta-ink:#182420;
  --beta-muted:#435248;
  --beta-paper:var(--client-canvas,#fbfcfa);
  /* Feeds the shared approved company-color glow law on these figures. */
  --cv-accent:var(--beta-accent);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 16px;
  align-items:start;justify-items:center;
  max-width:1080px;margin:16px auto;width:calc(100% - 32px);
  padding:clamp(18px,2.4vw,28px) clamp(14px,2vw,24px);
  background:linear-gradient(180deg,color-mix(in srgb,var(--beta-accent) 4%,#ffffff),var(--beta-paper));
  color:var(--beta-ink);
  border:1px solid color-mix(in srgb,var(--beta-accent) 30%,#dfe5df);
  border-top:3px solid color-mix(in srgb,var(--beta-accent) 78%,#ffffff);
  border-radius:18px;isolation:isolate;
  font-family:var(--client-body,var(--wss-rail-font,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif));
}
/* The island stays hidden until the shared runtime's carrier join reveals
   it; this must out-rank the grid declaration above for [hidden]. */
#wss-beta-demo-videos.wss-beta-videos[hidden]{display:none}
#wss-beta-demo-videos .wss-beta-head{grid-column:1/-1;min-width:0;justify-self:start;max-width:66ch}
/* ONE readable AI-generated-demo label for the whole section. */
#wss-beta-demo-videos .wss-beta-label{
  display:inline-block;font-size:12.5px;font-weight:650;line-height:1.2;
  letter-spacing:.02em;margin:0 0 10px;padding:6px 12px;
  color:var(--beta-ink);
  background:color-mix(in srgb,var(--beta-accent) 14%,#ffffff);
  border:1px solid color-mix(in srgb,var(--beta-accent) 45%,#ffffff);
  border-radius:999px;
}
#wss-beta-demo-videos .wss-beta-head h2{
  font-family:var(--client-display,var(--wss-rail-font,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif));
  font-size:clamp(22px,2.6vw,30px);line-height:1.16;letter-spacing:-.01em;
  font-weight:800;margin:0 0 10px;color:var(--beta-ink);
}
/* Header detail: a short company-color rule under the heading. */
#wss-beta-demo-videos .wss-beta-head h2:after{
  content:"";display:block;width:58px;height:3px;margin-top:9px;border-radius:2px;
  background:linear-gradient(90deg,var(--beta-accent),color-mix(in srgb,var(--beta-accent) 25%,transparent));
}
#wss-beta-demo-videos .wss-customer-videos-intro{
  font-size:14.5px;line-height:1.55;color:var(--beta-muted);margin:0;max-width:62ch;
}
/* Clip card. Restrained company-color edge: accent-mixed border, a
   corner-emphasized keyline on the card top, and a subtle accent shadow —
   all on the card, well OUTSIDE the footage (never a frame overlapping
   the video). */
#wss-beta-demo-videos .wss-beta-clip{
  position:relative;min-width:0;width:100%;margin:0;display:grid;gap:10px;justify-items:center;
  background:#fff;color:var(--beta-ink);
  border:1px solid color-mix(in srgb,var(--beta-accent) 38%,#e4e9e4);
  border-radius:16px;padding:14px 14px 12px;isolation:isolate;
  box-shadow:0 8px 22px rgba(16,26,20,.12),0 3px 10px color-mix(in srgb,var(--beta-accent) 20%,transparent);
}
#wss-beta-demo-videos .wss-beta-clip:before{
  content:"";position:absolute;top:0;left:14px;right:14px;height:3px;
  border-radius:0 0 4px 4px;pointer-events:none;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--beta-accent) 85%,transparent),
    color-mix(in srgb,var(--beta-accent) 30%,transparent) 26% 74%,
    color-mix(in srgb,var(--beta-accent) 85%,transparent));
}
/* Registered demos are 1080x1890 portrait clips. Natural aspect ratio with
   object-fit:contain — never cover/crop/stretch — inside an intentional
   bounded portrait stage so full faces and bodies stay in frame. */
#wss-beta-demo-videos .wss-beta-stage{width:100%;max-width:300px;margin-inline:auto}
#wss-beta-demo-videos .wss-cv-media{
  display:block;position:relative;width:100%;height:auto;
  aspect-ratio:1080/1890;max-height:none;
  background:#101a15;border-radius:12px;overflow:hidden;
  box-shadow:0 8px 22px rgba(16,26,20,.14);
}
#wss-beta-demo-videos .wss-cv-media video{
  display:block;width:100%;height:100%;object-fit:contain;
}
/* Caption plate: a reserved, accent-tinted strip under the footage holding
   the EXISTING per-trade stroke motif at a recognizable frame-detail size
   (30px, inside the 28–36px band) beside the honest scene name. The motif
   stays outside the media and never competes with faces. */
#wss-beta-demo-videos figcaption{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:7px 12px;border-radius:10px;
  background:color-mix(in srgb,var(--beta-accent) 7%,#ffffff);
  border:1px solid color-mix(in srgb,var(--beta-accent) 24%,#ffffff);
}
#wss-beta-demo-videos .wss-beta-motif{
  width:30px;height:30px;flex:0 0 auto;display:inline-block;
  color:color-mix(in srgb,var(--beta-accent) 85%,var(--beta-ink));
}
#wss-beta-demo-videos figcaption strong{font-size:14px;line-height:1.35;font-weight:650;color:var(--beta-ink)}
#wss-beta-demo-videos video:focus-visible{
  outline:3px solid color-mix(in srgb,var(--beta-accent) 70%,#182420);
  outline-offset:2px;
}
/* Element fullscreen keeps natural contain sizing on the dark stage; the
   burned-in AI label inside the clip pixels remains visible. */
#wss-beta-demo-videos .wss-beta-stage:fullscreen{
  display:flex;align-items:center;justify-content:center;
  width:100%;max-width:none;height:100%;margin:0;background:#000;border-radius:0;
}
#wss-beta-demo-videos .wss-beta-stage:fullscreen .wss-cv-media{
  flex:1;min-height:0;width:100%;aspect-ratio:auto;max-height:none;
  border-radius:0;box-shadow:none;background:#000;
}
#wss-beta-demo-videos .wss-beta-stage:fullscreen video{width:100%;height:100%;object-fit:contain}
/* Balanced responsive placement: 3 up on wide screens, 2 on tablets, 1 on
   phones with the portrait stage kept intentional, never edge-to-edge. */
@media(max-width:820px){
  #wss-beta-demo-videos.wss-beta-videos{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px}
}
@media(max-width:560px){
  #wss-beta-demo-videos.wss-beta-videos{
    grid-template-columns:minmax(0,1fr);
    width:calc(100% - 20px);margin:12px 10px;padding:16px 14px;
  }
  #wss-beta-demo-videos .wss-beta-stage{max-width:min(300px,76vw)}
}
@media(prefers-reduced-motion:reduce){
  #wss-beta-demo-videos *,#wss-beta-demo-videos *::before,#wss-beta-demo-videos *::after{
    animation:none!important;transition:none!important;scroll-behavior:auto!important;
  }
}