/* Captia Demo — cinematic vortex layer
   Local to /demo so the voice and outbound contracts stay untouched. */

body.captia-editorial-demo {
  --demo-blue: #89aacc;
  --demo-blue-deep: #4e85bf;
  --demo-violet: #8b6bd6;
  --demo-white: #f5f5f5;
  --demo-panel: rgba(13,13,13,.82);
  --ink: #07090d;
  --ink-2: #0b1017;
  --ink-3: #111925;
  --ink-4: #172333;
  --paper: #f5f5f5;
  --paper-2: #dbe6f1;
  --accent: #89aacc;
  --accent-2: #4e85bf;
  --accent-ink: #050608;
  --fog: #8c98a7;
  --fog-2: #5d6877;
  --line: rgba(137,170,204,.14);
  --line-strong: rgba(137,170,204,.3);
  --glass: rgba(255,255,255,.018);
  --glass-2: rgba(255,255,255,.045);
  --glow: rgba(78,133,191,.42);
  background:
    radial-gradient(980px 720px at 28% 14%,rgba(78,133,191,.16),transparent 66%),
    radial-gradient(760px 620px at 92% 68%,rgba(139,107,214,.1),transparent 70%),
    linear-gradient(145deg,#050608 0%,#080b10 46%,#050506 100%);
}

body.captia-editorial-demo .aurora { opacity: .12; }
body.captia-editorial-demo .aurora i { animation-play-state: paused; }

body.captia-editorial-demo .wrap::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background-image:
    linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(circle at 50% 24%,#000,transparent 68%);
  mask-image: radial-gradient(circle at 50% 24%,#000,transparent 68%);
}

body.captia-editorial-demo .topbar {
  width: min(1180px,calc(100% - 28px));
  background: rgba(16,16,16,.78);
}

body.captia-editorial-demo .logo .captia-brand-mark {
  display: block;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(78,133,191,.38));
  transition: transform 280ms ease,filter 280ms ease;
}

body.captia-editorial-demo .logo:is(:hover,:focus-visible) .captia-brand-mark {
  transform: scale(1.075) rotate(-4deg);
  filter: drop-shadow(0 0 15px rgba(137,170,204,.62));
}

body.captia-editorial-demo .hero {
  max-width: 1020px;
  padding: clamp(58px,7vw,92px) 24px 26px;
}

body.captia-editorial-demo .title {
  max-width: 900px;
  margin-inline: auto;
  font-size: clamp(58px,8.2vw,108px);
  line-height: .9;
}

body.captia-editorial-demo .title em {
  background: linear-gradient(92deg,#fff 8%,#a8c0d8 52%,#a98edc 94%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body.captia-editorial-demo .sub { max-width: 680px; }

body.captia-editorial-demo .badges {
  margin-top: 22px;
  gap: 8px;
}

body.captia-editorial-demo .badge {
  min-height: 38px;
  color: rgba(245,245,245,.68);
}

body.captia-editorial-demo .badge svg { color: var(--demo-blue); }

body.captia-editorial-demo .console {
  width: min(1240px,100%);
  max-width: 1240px;
  display: grid;
  grid-template-columns: minmax(0,1.22fr) minmax(360px,.78fr);
  grid-template-areas:
    "stage config"
    "transcript transcript"
    "lead lead"
    "sortant sortant";
  gap: 22px;
  padding: 0 clamp(14px,2.4vw,28px) 60px;
}

body.captia-editorial-demo .config {
  grid-area: config;
  align-self: stretch;
  border-radius: 32px;
  background:
    linear-gradient(155deg,rgba(255,255,255,.045),transparent 32%),
    rgba(9,13,19,.9);
  border-color: rgba(137,170,204,.13);
}

body.captia-editorial-demo .config .scenario-grid { grid-template-columns: 1fr; }
body.captia-editorial-demo .config .scenario-btn { min-height: 64px; }
body.captia-editorial-demo .scenario-btn,
body.captia-editorial-demo .voice-option { width: 100%; font-family: var(--font-body); }

body.captia-editorial-demo .stage {
  grid-area: stage;
  position: relative;
  min-height: 650px;
  margin: 0;
  padding: 24px clamp(16px,3vw,34px) 28px;
  justify-content: space-between;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.095);
  border-radius: 32px;
  background:
    radial-gradient(circle at 50% 48%,rgba(78,133,191,.12),transparent 31%),
    radial-gradient(circle at 50% 48%,rgba(139,107,214,.07),transparent 52%),
    linear-gradient(145deg,rgba(255,255,255,.025),transparent 38%),
    #06080c;
  box-shadow: inset 0 1px rgba(255,255,255,.055),0 38px 100px -70px #000;
  isolation: isolate;
}

body.captia-editorial-demo .stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .44;
  background:
    linear-gradient(90deg,transparent 49.86%,rgba(137,170,204,.11) 50%,transparent 50.14%),
    linear-gradient(transparent 49.86%,rgba(137,170,204,.08) 50%,transparent 50.14%);
  -webkit-mask-image: radial-gradient(circle at 50% 48%,#000,transparent 58%);
  mask-image: radial-gradient(circle at 50% 48%,#000,transparent 58%);
}

body.captia-editorial-demo .stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 7% 8% 7%;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(137,170,204,.26),transparent);
}

.demo-stage-head {
  position: relative;
  z-index: 5;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.demo-stage-kicker,
.vortex-mode {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.demo-stage-kicker { color: rgba(245,245,245,.5); }

.vortex-mode {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(245,245,245,.34);
}

.vortex-mode::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--demo-blue);
  box-shadow: 0 0 12px rgba(137,170,204,.78);
}

.demo-motion-toggle {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  color: rgba(245,245,245,.62);
  background: rgba(255,255,255,.025);
  cursor: pointer;
  transition: color 180ms ease,border-color 180ms ease,background 180ms ease,transform 180ms ease;
}

.demo-motion-toggle:is(:hover,:focus-visible) {
  color: #fff;
  border-color: rgba(137,170,204,.42);
  background: rgba(137,170,204,.08);
  transform: scale(1.06);
}

.demo-motion-toggle .motion-play { display: none; }
body.motion-paused .demo-motion-toggle .motion-pause { display: none; }
body.motion-paused .demo-motion-toggle .motion-play { display: inline; }
.demo-motion-toggle svg { width: 17px; height: 17px; }

.vortex-shell {
  position: relative;
  width: min(100%,500px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-block: -2px -8px;
  isolation: isolate;
  perspective: 1300px;
  transform-style: preserve-3d;
  transform: perspective(1300px) translate3d(var(--vortex-x,0),var(--vortex-y,0),0) rotateX(var(--vortex-rx,0deg)) rotateY(var(--vortex-ry,0deg));
  transition: transform 800ms cubic-bezier(.16,.8,.2,1);
}

.vortex-canvas {
  position: absolute;
  z-index: -3;
  inset: -20%;
  width: 140%;
  height: 140%;
  pointer-events: none;
  opacity: .9;
  filter: saturate(1.02) contrast(1.06);
  transform: translateZ(18px);
  transition: opacity 800ms ease,filter 800ms ease;
}

.vortex-shell.is-vortex-active .vortex-canvas,
.vortex-shell.is-functional-active .vortex-canvas {
  opacity: 1;
  filter: saturate(1.12) contrast(1.08);
}

body.captia-editorial-demo .vortex-shell .halo {
  z-index: -2;
  inset: 12%;
  opacity: .38;
  background: conic-gradient(from 12deg,transparent 0 12%,rgba(137,170,204,.76),transparent 27%,rgba(78,133,191,.42),transparent 54%,rgba(139,107,214,.48),transparent 78%,rgba(137,170,204,.68),transparent);
  filter: blur(22px);
  -webkit-mask-image: radial-gradient(circle,transparent 0 35%,#000 47%,transparent 66%);
  mask-image: radial-gradient(circle,transparent 0 35%,#000 47%,transparent 66%);
  animation: demo-accretion 18s linear infinite;
  animation-play-state: running;
}

body.captia-editorial-demo .vortex-shell .ring {
  z-index: -1;
  border: 0;
  background: conic-gradient(from 24deg,rgba(137,170,204,.08),rgba(137,170,204,.62),rgba(139,107,214,.22),rgba(78,133,191,.58),rgba(137,170,204,.08));
  -webkit-mask: radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 0);
  mask: radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 0);
  opacity: .8;
  animation: demo-lens 9.6s cubic-bezier(.45,.05,.55,.95) infinite;
  animation-play-state: running;
}

body.captia-editorial-demo .vortex-shell .ring.r1 { inset: 19%; }
body.captia-editorial-demo .vortex-shell .ring.r2 { inset: 28%; animation-delay: -.8s; opacity: .48; }
body.captia-editorial-demo .vortex-shell .ring.r3 { inset: 36%; animation-delay: -1.6s; opacity: .32; }

.vortex-cardinals {
  position: absolute;
  z-index: 3;
  inset: 8%;
  color: rgba(245,245,245,.3);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .2em;
  text-transform: uppercase;
  pointer-events: none;
  transition: color 400ms ease;
}

.vortex-cardinals span { position: absolute; }
.vortex-cardinals span:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); }
.vortex-cardinals span:nth-child(2) { top: 50%; right: -24px; transform: translateY(-50%) rotate(90deg); }
.vortex-cardinals span:nth-child(3) { bottom: 0; left: 50%; transform: translateX(-50%); }
.vortex-cardinals span:nth-child(4) { top: 50%; left: -28px; transform: translateY(-50%) rotate(-90deg); }

.vortex-shell.is-vortex-active .vortex-cardinals,
.vortex-shell.is-functional-active .vortex-cardinals { color: rgba(245,245,245,.56); }

body.captia-editorial-demo .vortex-shell .mic-btn {
  width: clamp(126px,15vw,158px);
  height: clamp(126px,15vw,158px);
  display: grid;
  place-items: center;
  overflow: visible;
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  background:
    radial-gradient(circle at 43% 34%,rgba(78,133,191,.18),transparent 24%),
    radial-gradient(circle,#080808 0 54%,#020202 76%,#000 100%);
  box-shadow:
    inset 0 1px rgba(255,255,255,.09),
    inset 0 0 46px rgba(78,133,191,.06),
    0 0 0 9px rgba(0,0,0,.84),
    0 0 58px 6px rgba(78,133,191,.16),
    0 34px 80px -34px #000;
  animation: none;
  transform: translateZ(92px);
  transition: transform 800ms cubic-bezier(.16,.8,.2,1),border-color 280ms ease,box-shadow 800ms ease,background 280ms ease;
}

body.captia-editorial-demo .vortex-shell .mic-btn::before {
  content: "";
  position: absolute;
  inset: -13px;
  border: 1px solid rgba(137,170,204,.22);
  border-radius: inherit;
  opacity: .7;
  transition: inset 800ms cubic-bezier(.16,.8,.2,1),opacity 280ms ease,border-color 280ms ease;
}

body.captia-editorial-demo .vortex-shell .mic-btn:is(:hover,:focus-visible),
body.captia-editorial-demo .vortex-shell.is-functional-active .mic-btn {
  transform: translateZ(108px) scale(1.045);
  border-color: rgba(137,170,204,.48);
  box-shadow:
    inset 0 1px rgba(255,255,255,.12),
    inset 0 0 52px rgba(78,133,191,.1),
    0 0 0 9px rgba(0,0,0,.86),
    0 0 78px 12px rgba(78,133,191,.22),
    0 38px 90px -36px #000;
}

body.captia-editorial-demo .vortex-shell .mic-btn:is(:hover,:focus-visible)::before,
body.captia-editorial-demo .vortex-shell.is-functional-active .mic-btn::before {
  inset: -18px;
  opacity: 1;
  border-color: rgba(137,170,204,.44);
}

.mic-monogram {
  display: block;
  width: 78%;
  height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(137,170,204,.34));
  animation: demo-mark-breathe 5.8s ease-in-out infinite alternate;
}

.mic-action-icon {
  position: absolute;
  right: -4px;
  bottom: 5px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 5px solid #080808;
  border-radius: 50%;
  color: #080808;
  background: #f5f5f5;
  box-shadow: 0 10px 28px -12px #000;
  transition: transform 280ms ease,background 280ms ease,color 280ms ease;
}

body.captia-editorial-demo .mic-action-icon svg {
  width: 17px;
  height: 17px;
  color: currentColor;
}

body.captia-editorial-demo .mic-btn:is(:hover,:focus-visible) .mic-action-icon { transform: scale(1.1) rotate(-6deg); }
body.captia-editorial-demo .mic-btn.live .mic-action-icon,
body.captia-editorial-demo .mic-btn.assistant-speaking .mic-action-icon { color: #fff; background: var(--demo-blue-deep); }
body.captia-editorial-demo .mic-btn.error .mic-action-icon { color: #fff; background: #bd4e3d; }

.vortex-shell.is-vortex-active .halo,
.vortex-shell.is-vortex-active .ring,
.vortex-shell.is-functional-active .halo,
.vortex-shell.is-functional-active .ring { animation-duration: 4.8s !important; }

body.captia-editorial-demo .viz {
  position: relative;
  z-index: 4;
  height: 44px;
  margin-top: -18px;
  opacity: .78;
}

body.captia-editorial-demo .mic-status {
  position: relative;
  z-index: 4;
  margin-top: 6px;
  color: rgba(245,245,245,.55);
  letter-spacing: .12em;
}

body.captia-editorial-demo .demo-runtime-note[hidden] { display: none !important; }

body.captia-editorial-demo .demo-runtime-note {
  position: relative;
  z-index: 6;
  width: min(620px,calc(100% - 32px));
  margin: 20px auto 4px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  border: 1px solid rgba(137,170,204,.28);
  border-radius: 18px;
  background:
    radial-gradient(circle at 8% 0%,rgba(137,170,204,.16),transparent 46%),
    rgba(8,12,18,.9);
  box-shadow: inset 0 1px rgba(255,255,255,.05),0 22px 50px -32px rgba(78,133,191,.8);
}

body.captia-editorial-demo .demo-runtime-note strong {
  display: block;
  margin-top: 4px;
  color: #f5f5f5;
  font-size: 14px;
  line-height: 1.35;
}

body.captia-editorial-demo .demo-runtime-note p {
  margin: 5px 0 0;
  color: rgba(245,245,245,.5);
  font-size: 12px;
  line-height: 1.5;
}

body.captia-editorial-demo .demo-runtime-kicker {
  color: var(--demo-blue);
  font: 600 9px/1 var(--font-mono);
  letter-spacing: .18em;
}

body.captia-editorial-demo .demo-runtime-note a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(245,245,245,.16);
  border-radius: 999px;
  color: #080a0e;
  background: #f5f5f5;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 180ms ease,box-shadow 180ms ease;
}

body.captia-editorial-demo .demo-runtime-note a:is(:hover,:focus-visible) {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -16px rgba(255,255,255,.7);
}

body.captia-editorial-demo .mic-btn.local-preview {
  cursor: not-allowed;
  filter: saturate(.68);
}

@media (max-width: 640px) {
  body.captia-editorial-demo .demo-runtime-note { align-items: flex-start; flex-direction: column; }
}

body.captia-editorial-demo .hint { position: relative; z-index: 4; color: rgba(245,245,245,.3); }
body.captia-editorial-demo .learn-note { position: relative; z-index: 4; color: rgba(245,245,245,.44); }

body.captia-editorial-demo .console > .transcript-wrap:not(#leadCardWrap):not(#sortant) { grid-area: transcript; }
body.captia-editorial-demo #leadCardWrap { grid-area: lead; }

body.captia-editorial-demo .transcript-wrap {
  border-radius: 28px;
  border-color: rgba(137,170,204,.12);
  background: linear-gradient(145deg,rgba(18,27,40,.7),rgba(8,10,15,.88));
}

body.captia-editorial-demo #sortant {
  grid-area: sortant;
  padding: clamp(24px,4vw,44px);
  border-radius: 32px;
  background:
    radial-gradient(circle at 82% 50%,rgba(78,133,191,.15),transparent 31%),
    linear-gradient(145deg,rgba(255,255,255,.03),transparent 34%),
    rgba(7,10,15,.92);
}

body.captia-editorial-demo #sortant::before {
  opacity: .32;
  background-image:
    linear-gradient(rgba(137,170,204,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(137,170,204,.045) 1px,transparent 1px);
  background-size: 40px 40px;
}

body.captia-editorial-demo .sortant-inner {
  grid-template-columns: minmax(0,1.12fr) minmax(320px,.88fr);
  gap: clamp(32px,6vw,82px);
  align-items: center;
}

body.captia-editorial-demo .sortant-tag {
  color: rgba(245,245,245,.72);
  border: 1px solid rgba(137,170,204,.26);
  background: rgba(137,170,204,.075);
}

body.captia-editorial-demo #sortant h2 {
  max-width: 650px;
  font-size: clamp(34px,4.6vw,62px) !important;
  line-height: .98;
  letter-spacing: -.035em;
}

body.captia-editorial-demo #sortant h2 em { color: #f5f5f5 !important; }

body.captia-editorial-demo .sortant-visual {
  min-height: 390px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 50%;
  background:
    radial-gradient(circle,transparent 0 22%,rgba(78,133,191,.08) 22.4%,transparent 23%),
    radial-gradient(circle,rgba(78,133,191,.095),transparent 59%),
    rgba(4,4,4,.56);
  cursor: default;
  isolation: isolate;
  transition: border-color 800ms ease,box-shadow 800ms ease,transform 800ms cubic-bezier(.16,.8,.2,1);
}

body.captia-editorial-demo .sortant-visual::before,
body.captia-editorial-demo .sortant-visual::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

body.captia-editorial-demo .sortant-visual::before {
  inset: 8%;
  border: 1px solid rgba(137,170,204,.14);
  background: conic-gradient(from 90deg,transparent 0 22%,rgba(137,170,204,.5) 28%,transparent 34% 68%,rgba(139,107,214,.38) 74%,transparent 80%);
  -webkit-mask-image: radial-gradient(circle,transparent 64%,#000 65% 67%,transparent 68%);
  mask-image: radial-gradient(circle,transparent 64%,#000 65% 67%,transparent 68%);
  animation: outbound-orbit 7s linear infinite;
  animation-play-state: paused;
}

body.captia-editorial-demo .sortant-visual::after {
  inset: 20%;
  border: 1px dashed rgba(137,170,204,.17);
  animation: outbound-orbit 12s linear infinite reverse;
  animation-play-state: paused;
}

body.captia-editorial-demo .ob-scene { position: relative; z-index: 2; }

body.captia-editorial-demo .ob-orb {
  width: 120px;
  height: 120px;
  color: #fff;
  border: 1px solid rgba(137,170,204,.28);
  background: radial-gradient(circle at 40% 35%,rgba(78,133,191,.2),transparent 24%),#050505;
  box-shadow: inset 0 1px rgba(255,255,255,.08),0 0 46px rgba(78,133,191,.16);
}

.ob-monogram {
  width: 76%;
  height: 76%;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(137,170,204,.3));
  animation: demo-mark-breathe 6.4s ease-in-out infinite alternate-reverse;
}

body.captia-editorial-demo .ob-orb > svg {
  position: absolute;
  right: 4px;
  bottom: 7px;
  width: 28px;
  height: 28px;
  padding: 7px;
  border-radius: 50%;
  color: #080808;
  background: #f5f5f5;
}

body.captia-editorial-demo .ob-line {
  width: clamp(58px,7vw,96px);
  height: 1px;
  background-image: linear-gradient(90deg,var(--demo-blue) 48%,transparent 48%);
  box-shadow: 0 0 16px rgba(78,133,191,.38);
}

body.captia-editorial-demo .ob-phone .ph {
  width: 78px;
  height: 78px;
  border-color: rgba(255,255,255,.14);
  border-radius: 50%;
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 1px rgba(255,255,255,.06);
}

body.captia-editorial-demo .ob-caption { bottom: 38px; color: rgba(245,245,245,.36); }

body.captia-editorial-demo #sortant:hover .ob-orb::after,
body.captia-editorial-demo #sortant:hover .ob-line,
body.captia-editorial-demo #sortant:hover .ob-phone .ph { animation-play-state: paused; }

body.captia-editorial-demo #sortant.is-visual-active .sortant-visual,
body.captia-editorial-demo #sortant.is-dialing .sortant-visual {
  transform: scale(1.015);
  border-color: rgba(137,170,204,.22);
  box-shadow: 0 0 80px -42px rgba(78,133,191,.68);
}

body.captia-editorial-demo #sortant.is-visual-active .sortant-visual::before,
body.captia-editorial-demo #sortant.is-visual-active .sortant-visual::after,
body.captia-editorial-demo #sortant.is-visual-active .ob-orb::after,
body.captia-editorial-demo #sortant.is-visual-active .ob-line,
body.captia-editorial-demo #sortant.is-visual-active .ob-phone .ph,
body.captia-editorial-demo #sortant.is-dialing .sortant-visual::before,
body.captia-editorial-demo #sortant.is-dialing .sortant-visual::after,
body.captia-editorial-demo #sortant.is-dialing .ob-orb::after,
body.captia-editorial-demo #sortant.is-dialing .ob-line,
body.captia-editorial-demo #sortant.is-dialing .ob-phone .ph { animation-play-state: running !important; }

body.captia-editorial-demo .scenario-btn.active,
body.captia-editorial-demo .voice-option.active,
body.captia-editorial-demo .role-chip[aria-pressed="true"] {
  color: #050608;
  border-color: rgba(137,170,204,.82);
  background: linear-gradient(135deg,#b8cadc 0%,#89aacc 52%,#a78cdb 118%);
  box-shadow: 0 14px 34px -22px rgba(78,133,191,.9);
}

@keyframes demo-accretion { to { transform: rotate(1turn); } }
@keyframes demo-lens {
  0%,100% { transform: scale(1); opacity: .38; }
  50% { transform: scale(1.035); opacity: .88; }
}
@keyframes outbound-orbit { to { transform: rotate(1turn); } }

body.motion-paused .vortex-shell *,
body.motion-paused .vortex-shell *::before,
body.motion-paused .vortex-shell *::after,
body.motion-paused #sortant .sortant-visual::before,
body.motion-paused #sortant .sortant-visual::after,
body.motion-paused #sortant .ob-orb::after,
body.motion-paused #sortant .ob-line,
body.motion-paused #sortant .ob-phone .ph { animation-play-state: paused !important; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 980px) {
  body.captia-editorial-demo .console {
    grid-template-columns: 1fr;
    grid-template-areas:
      "stage"
      "config"
      "transcript"
      "lead"
      "sortant";
    max-width: 780px;
  }

  body.captia-editorial-demo .stage { min-height: 620px; }
  body.captia-editorial-demo .config .scenario-grid { grid-template-columns: repeat(3,1fr); }
  body.captia-editorial-demo .sortant-inner { grid-template-columns: 1fr; }
  body.captia-editorial-demo .sortant-visual { order: -1; width: min(100%,470px); min-height: auto; aspect-ratio: 1; justify-self: center; }
}

@media (max-width: 640px) {
  body.captia-editorial-demo .topbar { padding-left: 10px; }
  body.captia-editorial-demo .logo > span:not(.captia-brand-mark),
  body.captia-editorial-demo .logo em { display: none; }
  body.captia-editorial-demo .status { padding-inline: 10px; }
  body.captia-editorial-demo .hero { padding-top: 44px; }
  body.captia-editorial-demo .title { font-size: clamp(52px,16vw,76px); }
  body.captia-editorial-demo .badges { display: grid; grid-template-columns: 1fr; width: min(100%,330px); margin-inline: auto; }
  body.captia-editorial-demo .badge { justify-content: center; }
  body.captia-editorial-demo .console { gap: 14px; }
  body.captia-editorial-demo .stage { min-height: 540px; padding-inline: 14px; }
  .vortex-mode { display: none; }
  body.captia-editorial-demo .config .scenario-grid { grid-template-columns: 1fr; }
  .vortex-shell { width: min(112%,430px); }
  .vortex-cardinals { inset: 11%; }
  .vortex-cardinals span:nth-child(2) { right: -17px; }
  .vortex-cardinals span:nth-child(4) { left: -21px; }
  body.captia-editorial-demo .hint { max-width: 290px; }
  body.captia-editorial-demo #sortant { padding: 22px 16px; }
  body.captia-editorial-demo #sortant h2 { font-size: clamp(36px,12vw,52px) !important; }
  body.captia-editorial-demo .sortant-visual { width: min(100%,390px); }
  body.captia-editorial-demo .ob-orb { width: 96px; height: 96px; }
  .ob-monogram { font-size: 48px; }
  body.captia-editorial-demo .ob-phone .ph { width: 64px; height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  body.captia-editorial-demo .vortex-shell,
  body.captia-editorial-demo .vortex-shell *,
  body.captia-editorial-demo .vortex-shell *::before,
  body.captia-editorial-demo .vortex-shell *::after,
  body.captia-editorial-demo #sortant .sortant-visual,
  body.captia-editorial-demo #sortant .sortant-visual::before,
  body.captia-editorial-demo #sortant .sortant-visual::after,
  body.captia-editorial-demo #sortant .ob-orb::after,
  body.captia-editorial-demo #sortant .ob-line,
  body.captia-editorial-demo #sortant .ob-phone .ph,
  body.captia-editorial-demo .demo-motion-toggle { animation: none !important; transition: none !important; }
}

/* Neural black-hole stage — revision 22 */
.vortex-neural-art {
  position: absolute;
  z-index: -4;
  inset: 3%;
  width: 94%;
  height: 94%;
  object-fit: contain;
  opacity: .54;
  mix-blend-mode: screen;
  filter: saturate(.76) contrast(1.12) brightness(.72) drop-shadow(0 24px 56px rgba(78,133,191,.18));
  -webkit-mask-image: radial-gradient(circle,#000 0 58%,rgba(0,0,0,.86) 72%,transparent 88%);
  mask-image: radial-gradient(circle,#000 0 58%,rgba(0,0,0,.86) 72%,transparent 88%);
  transform: translateZ(-34px) scale(.98) rotateZ(-1.5deg);
  animation: demo-neural-breathe 11s ease-in-out infinite alternate;
  transition: opacity 700ms ease,filter 700ms ease;
  pointer-events: none;
}

.vortex-shell:is(.is-vortex-active,.is-functional-active) .vortex-neural-art {
  opacity: .76;
  filter: saturate(1.04) contrast(1.15) brightness(.83) drop-shadow(0 30px 72px rgba(78,133,191,.3));
  animation-duration: 5.2s;
}

.vortex-depth-plane {
  position: absolute;
  z-index: -1;
  inset: 16%;
  border: 1px solid rgba(137,170,204,.15);
  border-radius: 50%;
  pointer-events: none;
  transform-style: preserve-3d;
}

.vortex-depth-plane::before,
.vortex-depth-plane::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #dcecff;
  box-shadow: 0 0 8px #fff,0 0 20px rgba(78,133,191,.9);
}

.vortex-depth-plane::before { left: 12%; top: 18%; }
.vortex-depth-plane::after { right: 7%; bottom: 29%; background: var(--demo-violet); }
.vortex-depth-plane-a { transform: translateZ(44px) rotateX(67deg) rotateZ(11deg); animation: demo-depth-orbit-a 13s linear infinite; }
.vortex-depth-plane-b { inset: 23%; border-color: rgba(139,107,214,.18); transform: translateZ(64px) rotateY(64deg) rotateZ(-18deg); animation: demo-depth-orbit-b 9s linear infinite reverse; }
.vortex-cardinals { transform: translateZ(118px); }
body.captia-editorial-demo .vortex-shell .halo { transform: translateZ(-8px); }
body.captia-editorial-demo .vortex-shell .ring.r1 { transform: translateZ(28px); }
body.captia-editorial-demo .vortex-shell .ring.r2 { transform: translateZ(46px); }
body.captia-editorial-demo .vortex-shell .ring.r3 { transform: translateZ(66px); }

.demo-outbound-portrait {
  position: absolute;
  z-index: 0;
  inset: 5% 16%;
  width: 68%;
  height: 88%;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 46%;
  opacity: .22;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse,#000 34%,rgba(0,0,0,.8) 57%,transparent 78%);
  mask-image: radial-gradient(ellipse,#000 34%,rgba(0,0,0,.8) 57%,transparent 78%);
  filter: saturate(.78) contrast(1.14) brightness(.58);
  transform: scale(.92) rotate(-8deg);
  animation: demo-outbound-portrait 14s ease-in-out infinite alternate;
  transition: opacity 600ms ease,filter 600ms ease,transform 900ms cubic-bezier(.16,.8,.2,1);
  pointer-events: none;
}

body.captia-editorial-demo #sortant:is(.is-visual-active,.is-dialing) .demo-outbound-portrait {
  opacity: .46;
  filter: saturate(1.05) contrast(1.18) brightness(.74);
  transform: scale(1.01) rotate(3deg);
  animation-duration: 5.4s;
}

body.captia-editorial-demo .sortant-visual { perspective: 1000px; transform-style: preserve-3d; }
body.captia-editorial-demo .sortant-visual .ob-scene { transform: translateZ(68px); }

@keyframes demo-neural-breathe {
  0% { transform: translateZ(-34px) scale(.98) rotateZ(-1.5deg); }
  48% { transform: translateZ(-18px) scale(1.055) rotateZ(.7deg); }
  100% { transform: translateZ(-27px) scale(1.018) rotateZ(2.2deg); }
}
@keyframes demo-mark-breathe { to { transform: scale(1.055) rotate(1.5deg); filter: brightness(1.15) drop-shadow(0 0 24px rgba(137,170,204,.48)); } }
@keyframes demo-depth-orbit-a { to { transform: translateZ(44px) rotateX(67deg) rotateZ(371deg); } }
@keyframes demo-depth-orbit-b { to { transform: translateZ(64px) rotateY(64deg) rotateZ(342deg); } }
@keyframes demo-outbound-portrait { to { transform: scale(1.02) rotate(5deg); opacity: .34; } }

@media (prefers-reduced-motion: reduce) {
  .vortex-neural-art,.vortex-depth-plane,.demo-outbound-portrait,.mic-monogram,.ob-monogram { animation: none !important; transition: none !important; }
  .vortex-shell { transform: none !important; }
  body.captia-editorial-demo .vortex-shell .mic-btn { transform: none !important; }
}