/* The public product tour becomes a spatial narrative; app UI is unaffected. */
.spatial-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-6); }
.spatial-scroll-hint, .spatial-motion { font-size: var(--text-sm); }
.spatial-motion { min-height: 44px; padding: var(--sp-2) var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); color: var(--text); font-family: inherit; cursor: pointer; }
.spatial-motion:hover { border-color: var(--primary-text, var(--primary)); }
.spatial-progress { display: none; }

@media (min-width: 1100px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  html.spatial-enabled { overflow-x: clip; }
  .spatial-enabled body { overflow-x: clip; }
  .spatial-enabled .revenue-hero-grid { perspective: 1800px; }
  .spatial-enabled .revenue-story { transform: rotateY(-7deg) rotateX(3deg); transform-origin: center; box-shadow: 24px 32px 64px color-mix(in srgb, var(--text) 16%, transparent); }
  .spatial-enabled .revenue-story::before { transform: translateZ(-20px); }
  .spatial-enabled .revenue-story-roles > div:nth-child(2) { transform: translateX(var(--sp-2)); }
  .spatial-enabled .revenue-story-roles > div:nth-child(3) { transform: translateX(var(--sp-4)); }
  .spatial-enabled #see-it-run { background: var(--revenue-ink, var(--text)); color: var(--revenue-paper, var(--bg)); }
  .spatial-enabled #see-it-run .section-sub { color: var(--revenue-paper, var(--bg)); }
  .spatial-enabled #see-it-run .hl { color: var(--accent); }
  .spatial-enabled .spatial-track { height: 280vh; position: relative; }
  .spatial-enabled .revenue-tour { position: sticky; top: 84px; height: calc(100svh - 108px); max-height: 900px; min-height: 580px; overflow: visible; border: 0; border-radius: 0; background: transparent; perspective: 1700px; }
  .spatial-enabled .spatial-toolbar { padding: 0 0 var(--sp-4); }
  .spatial-enabled .spatial-motion { background: transparent; border-color: color-mix(in srgb, var(--revenue-paper, var(--bg)) 45%, transparent); color: var(--revenue-paper, var(--bg)); }
  .spatial-enabled .spatial-motion:hover { border-color: var(--revenue-paper, var(--bg)); }
  .spatial-enabled .revenue-tour-tabs { position: relative; z-index: 5; background: transparent; border-bottom: 1px solid color-mix(in srgb, var(--revenue-paper, var(--bg)) 25%, transparent); }
  .spatial-enabled .revenue-tour-tabs button { color: var(--revenue-paper, var(--bg)); background: transparent; padding: var(--sp-4) var(--sp-3); }
  .spatial-enabled .revenue-tour-tabs button[aria-selected="true"] { color: var(--accent); background: transparent; box-shadow: inset 0 -2px var(--accent); }
  .spatial-enabled .revenue-tour-panel { position: absolute; inset: 135px 0 40px; display: grid; grid-template-columns: .75fr 1.65fr; gap: var(--sp-10); align-items: center; padding: 0; transform-style: preserve-3d; pointer-events: none; }
  .spatial-enabled .revenue-tour-copy { display: block; margin: 0; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity 300ms ease-out, transform 500ms cubic-bezier(.16,1,.3,1); }
  .spatial-enabled .revenue-tour-copy h3 { font-size: var(--revenue-heading, var(--text-3xl)); max-width: 15ch; color: var(--revenue-paper, var(--bg)); margin-bottom: var(--sp-6); }
  .spatial-enabled .revenue-tour-copy p { color: var(--revenue-paper, var(--bg)); max-width: 32ch; font-size: var(--text-lg); line-height: 1.6; }
  .spatial-enabled .revenue-tour-panel figure { min-width: 0; margin: 0; transform-origin: 50% 50%; transform: translate3d(calc(var(--depth, 0) * 30px), calc(var(--depth, 0) * -28px), calc(var(--depth, 0) * -110px)) rotateY(calc(-18deg + var(--scene-progress, 0) * 10deg)) rotateX(calc(8deg - var(--scene-progress, 0) * 5deg)); opacity: .3; transition: transform 650ms cubic-bezier(.16,1,.3,1), opacity 400ms ease-out; }
  .spatial-enabled .revenue-tour-screen { border: 0; border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: 12px 32px 60px color-mix(in srgb, var(--revenue-ink, var(--text)) 55%, transparent); }
  .spatial-enabled .revenue-tour-panel figcaption { color: var(--revenue-paper, var(--bg)); opacity: 0; font-size: var(--text-sm); padding-top: var(--sp-4); }
  .spatial-enabled .revenue-tour-panel.is-current { pointer-events: auto; }
  .spatial-enabled .revenue-tour-panel.is-current .revenue-tour-copy { opacity: 1; visibility: visible; transform: none; }
  .spatial-enabled .revenue-tour-panel.is-current figure, .spatial-enabled .revenue-tour-panel.is-current figcaption { opacity: 1; }
  .spatial-enabled .revenue-tour-panel.is-past figure { transform: translate3d(130px, -65px, -450px) rotateY(-32deg); opacity: 0; }
  .spatial-enabled .spatial-progress { display: block; position: absolute; bottom: var(--sp-3); width: 100%; height: 2px; background: color-mix(in srgb, var(--revenue-paper, var(--bg)) 25%, transparent); }
  .spatial-enabled .spatial-progress span { display: block; height: 100%; background: var(--accent); transform: scaleX(var(--scroll-progress, 0)); transform-origin: left; }
  .spatial-enabled .revenue-watch { padding-top: var(--sp-12); }
  .spatial-enabled .revenue-watch p { color: var(--revenue-paper, var(--bg)); }
  .spatial-enabled #see-it-run :focus-visible { outline-color: var(--accent); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@media (max-width: 600px) {
  .spatial-toolbar { padding: var(--sp-3); }
  .spatial-scroll-hint { max-width: 20ch; }
}