/* Public landing only: use its existing Orbit palette and spacing tokens. */
.demo-scene { max-width: 720px; margin-block: var(--space-10); }
.demo-heading { max-width: 760px; margin-bottom: var(--space-6); }
.demo-number { color: var(--l-accent); font-size: .72rem; font-weight: 600; letter-spacing: .12em; }
.demo-heading h3 { margin: var(--space-3) 0; font-size: clamp(1.55rem, 3vw, 2.15rem); line-height: 1.2; letter-spacing: -.035em; }
.demo-heading p { color: var(--l-secondary); max-width: 64ch; }
/* The stage never changes size because of Astaren — the mascot is an absolutely
   positioned overlay anchored to it, so it can only ever float in the page's
   own gutter beside the (unchanged) 720px content column, never push it. */
.demo-stage { position: relative; }
.astaren-companion {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  margin-left: var(--space-6);
  width: 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.astaren-companion-label { font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; color: var(--l-ink); }
.astaren-mark-lg { width: 128px; height: auto; }
.demo-player { position: relative; overflow: hidden; border: 1px solid var(--l-border-strong); border-radius: var(--radius-lg); background: var(--l-surface); box-shadow: 0 14px 40px #1c253010; }
.demo-screen { position: relative; aspect-ratio: 16 / 9; background: var(--l-canvas); }
.demo-screen video { display: block; width: 100%; height: 100%; object-fit: contain; }
.demo-start { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-4) var(--space-6); border: 1px solid var(--l-accent); border-radius: 999px; background: var(--l-accent); color: white; cursor: pointer; box-shadow: 0 4px 24px #1c253033; white-space: nowrap; font-weight: 600; }
.demo-actions { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; opacity: 0; transition: opacity .15s ease; }
.demo-player:hover .demo-actions, .demo-player:focus-within .demo-actions { opacity: 1; }
.demo-actions button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--l-border); border-radius: 50%; background: #fffffff2; color: var(--l-ink); cursor: pointer; box-shadow: 0 2px 8px #1c253012; }
.demo-actions button:hover { background: var(--l-accent-soft); color: var(--l-accent); }
.demo-actions svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.demo-play-icon { display: none; }
.demo-player[data-paused="true"] .demo-pause-icon { display: none; }
.demo-player[data-paused="true"] .demo-play-icon { display: initial; }
@media (hover: none) { .demo-actions { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .demo-actions { transition: none; } }
.demo-caption { margin-top: var(--space-3); color: var(--l-secondary); font-size: .8rem; }
.demo-transcript { margin-top: var(--space-3); max-width: 760px; font-size: .9rem; color: var(--l-secondary); }
.demo-transcript summary { width: fit-content; min-height: 44px; display: list-item; padding-block: var(--space-3); cursor: pointer; color: var(--l-accent); font-weight: 500; }
.demo-transcript ol { padding-left: var(--space-6); margin: var(--space-2) 0; }
.demo-transcript li { margin-bottom: var(--space-3); }
.demo-disclosure { color: var(--l-muted); font-size: .8rem; padding-bottom: var(--space-8); }
.demo-error { padding: var(--space-4); color: var(--l-body); font-size: .9rem; }
.demo-error a { text-decoration: underline; }
.demo-player:fullscreen { display: flex; flex-direction: column; border: 0; border-radius: 0; background: var(--l-canvas); padding: var(--space-3); }
.demo-player:fullscreen .demo-screen { flex: 1; min-height: 0; aspect-ratio: auto; }

/* Below this, the page has no gutter wide enough to float Astaren beside the
   720px content column without overflowing — drop back into normal flow,
   stacked above the video, instead of overlapping or forcing a scrollbar. */
@media (max-width: 1024px) {
  .astaren-companion {
    position: static;
    transform: none;
    margin-left: 0;
    margin-bottom: var(--space-4);
    flex-direction: row;
    width: auto;
  }
  .astaren-mark-lg { width: 72px; }
}

@media (max-width: 600px) {
  .demo-scene { margin-block: var(--space-10); }
  .demo-heading { margin-bottom: var(--space-4); }
  .demo-start { padding: var(--space-3) var(--space-4); font-size: .85rem; }
}