/* Four distinct chapter crossings. The playable demo stays in normal flow. */
:root{--ease-in-out:cubic-bezier(.77,0,.175,1);--amber:#ffbb69;--lime:#b5d98e;--paper:#f5f8fb;--pearl:#eceaf3;--ink:#192b3a;--slate:#536575;--plum:#322641}
body{background:#081018}
main{position:relative;isolation:isolate;display:flow-root}
.scene-stack{position:relative;isolation:isolate}
.scene-surface{position:relative;background:#081018;overflow:clip}
.scene-surface>section{position:relative}
.scene-0 .scene-surface{background:#07121e}
.scene-1 .scene-surface{background:linear-gradient(180deg,#0b1b2b00,#0b1b2b 110px,#123b50 42%,#112330 82%,#101a2b)}
.scene-stack.scene-difference .scene-surface{background:linear-gradient(150deg,var(--paper),#f8f9fc 48%,var(--pearl));color:var(--ink)}
.scene-2 .scene-surface{background:linear-gradient(var(--pearl),#080f18 110px);color:var(--white)}
.scene-3 .scene-surface{background:linear-gradient(120deg,#fff,var(--paper) 62%,#ebe5f3);color:var(--ink)}
.scene-3 .eyebrow,.scene-3 .steps p{color:#536575}
.scene-3 .steps article{border-color:#14334a30}
.scene-3 .step-number{color:#087eab}
.scene-4 .scene-surface{background:radial-gradient(ellipse at 90% 26%,#685084 0,transparent 68%),linear-gradient(140deg,#252236,var(--plum) 65%,#292638);border-radius:48px 48px 0 0;box-shadow:0 -22px 60px -28px #0008}
.scene-4{background:var(--pearl)}
.scene-5 .scene-surface{background:#081522}
.scene-6 .scene-surface{background:var(--paper);color:var(--ink)}
.scene-7 .scene-surface{background:linear-gradient(var(--paper),var(--pearl));color:var(--ink)}
.scene-8 .scene-surface{background:radial-gradient(ellipse at 80% 0,#534165,transparent 65%),linear-gradient(125deg,#171c2a,#30263d);border-top:1px solid #bdacc944}
@media(min-width:701px){
  .motion-enabled .scene-hold::after{content:"";display:block;height:var(--scene-tail)}
  .motion-enabled .scene-hold>.scene-surface{position:sticky;top:var(--sticky-top,0px)}
  .motion-enabled .scene-follow{margin-top:calc(-1 * var(--scene-pull))}
}
.hero h1{font-size:clamp(68px,7.8vw,120px)}
.hero .stage{animation:none}
.hero-copy{z-index:3}
.hero .chapter-light{inset:-25% -10%;background:linear-gradient(112deg,transparent 52%,#21b8f30d 57%,#21b8f31c 60%,transparent 70%);z-index:1}
.chapter-light{position:absolute;pointer-events:none;inset:0}
.hero .hero-shade{z-index:1}
.motion-enabled .hero-copy>.eyebrow{animation:hero-entry 700ms var(--ease-out) both}
.motion-enabled .hero-copy>h1{animation:hero-entry 1000ms var(--ease-out) 60ms both}
.motion-enabled .hero-copy>p{animation:hero-entry 1000ms var(--ease-out) 120ms both}
.motion-enabled .hero-copy>.actions,.motion-enabled .hero-copy>.hero-foot{animation:hero-entry 1000ms var(--ease-out) 180ms both}
@keyframes hero-entry{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:none}}

/* Each image arrives once. Its outer shell carries the lighter scroll parallax. */
.media-depth{min-width:0;position:relative}
.media-depth-console{perspective:1400px}
.media-depth-console:before{content:'';position:absolute;inset:5% 8% -7%;background:radial-gradient(ellipse,#21b8f320,transparent 67%);pointer-events:none}
.motion-enabled .app-frame{opacity:0;transform:perspective(1400px) translate3d(0,85px,0) rotateX(10deg) rotateZ(-1.5deg) scale(.94);clip-path:inset(5% 2% 0 round 20px);transform-origin:center bottom;transition:transform 1500ms var(--ease-out),opacity 1000ms var(--ease-out),clip-path 1500ms var(--ease-out)}
.motion-enabled .app-frame.image-arrived{opacity:1;transform:perspective(1400px) translate3d(0,0,0) rotateX(0) rotateZ(0) scale(1);clip-path:inset(0 round 12px)}
.motion-enabled .pad-art{opacity:0;transform:perspective(1200px) translate3d(65px,45px,0) rotateY(-10deg) rotateZ(3deg) scale(.95);transition:transform 1400ms var(--ease-out),opacity 1000ms var(--ease-out)}
.motion-enabled .pad-art.image-arrived{opacity:1;transform:none}
.motion-enabled .pad-caption{opacity:0;transform:translate3d(-14px,28px,0);transition:opacity 700ms var(--ease-out) 350ms,transform 900ms var(--ease-out) 350ms}
.motion-enabled .image-arrived .pad-caption{opacity:1;transform:none}
.product{padding-top:130px;padding-bottom:100px}
.workflow{border:0;padding-block:130px}
.pads{padding-block:140px}
.pads>.pads-copy,.pads>.media-depth{z-index:1}
.pads .chapter-light{inset:35% -5% -12%;background:radial-gradient(ellipse at 24% 92%,#ffbb692b,transparent 60%);z-index:0}
.pad-caption{border-color:#b496ef66;background:#29243fed}
.pad-glow{background:radial-gradient(ellipse,#b496ef26,transparent 65%)}

/* The diagrams explain a real workflow rather than implying a live analyser. */
.motion-enabled .guide-diagram .voice-wave i{transform:scaleY(.25);transform-origin:center}
.motion-enabled .guide-diagram.visible .voice-wave i{transform:scaleY(1);transition:transform 700ms var(--ease-out)}
.motion-enabled .guide-diagram.visible .voice-wave i:nth-child(3n+1){transition-delay:60ms}
.motion-enabled .guide-diagram.visible .voice-wave i:nth-child(3n+2){transition-delay:120ms}
.motion-enabled .guide-diagram .guide-connector{opacity:0;transform:translateY(-8px);transition:opacity 700ms var(--ease-out) 180ms,transform 700ms var(--ease-out) 180ms}
.motion-enabled .guide-diagram .proposal-timeline{clip-path:inset(0 100% 0 0);transition:clip-path 900ms var(--ease-in-out) 300ms}
.motion-enabled .guide-diagram.visible .guide-connector{opacity:1;transform:none}
.motion-enabled .guide-diagram.visible .proposal-timeline{clip-path:inset(0)}
.level-column i{background:#1a2f3f!important}
.level-column .level-fill{position:absolute;left:0;top:0;height:100%;background:#7793a9;border-radius:2px;transform-origin:left center}
.level-after .level-fill{background:#a6d974}
.motion-enabled .level-after .level-fill{transform:scaleX(var(--initial-scale,1));transition:transform 1000ms var(--ease-in-out) 240ms}
.motion-enabled .level-diagram.visible .level-after .level-fill{transform:scaleX(1)}
.motion-enabled .steps article:nth-child(2){transition-delay:60ms}
.motion-enabled .steps article:nth-child(3){transition-delay:120ms}
.motion-enabled .plans .plan:nth-child(2){transition-delay:80ms}
.motion-enabled .choice-strip>div{opacity:0;transform:translateY(16px);transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out)}
.motion-enabled .choice-strip>div:nth-child(2){transition-delay:60ms}
.motion-enabled .choice-strip>div:nth-child(3){transition-delay:120ms}
.motion-enabled .choice-strip.visible>div{opacity:1;transform:none}

.stage-statement{position:relative;isolation:isolate;overflow:hidden;background:none;border:0;min-height:90svh;display:grid;place-items:center}
.statement-photo{position:absolute;inset:-15% 0;width:100%;height:130%;object-fit:cover;z-index:-2;opacity:.65}
.stage-statement:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#071422df,#09192666),linear-gradient(0deg,#081522c9,transparent 55%);z-index:-1}
.stage-statement .chapter-light{background:radial-gradient(ellipse at 95% 36%,#ffbb6929,transparent 58%);z-index:-1}
.stage-statement>.reveal{position:relative;z-index:1}
.stage-statement h2{max-width:1100px;margin-inline:auto}
.demo-section{padding-top:170px}
#demo .console{opacity:1!important;transform:none!important;transition:none!important}

/* White chapters give the dark instruments room to stand out. */
.pricing .pricing-head>.eyebrow,.pricing .pricing-head>p:not(.eyebrow),.pricing-foot,.faq .eyebrow,.faq details p{color:var(--slate)}
.pricing .billing{background:#e3e8ee;border-color:#c6ced8}
.pricing .billing button{color:#415466}
.pricing .billing button[aria-pressed=true]{background:var(--ink);color:#fff}
.pricing .billing button span{color:#38617a}
.pricing .billing button[aria-pressed=true] span{color:#bee4f5}
.pricing .plan:not(.plus){background:#fff;border-color:#ced6df;box-shadow:0 18px 45px #192b3a0b}
.pricing .plan:not(.plus) .eyebrow,.pricing .plan:not(.plus) .plan-description,.pricing .plan:not(.plus) .billing-note,.pricing .plan:not(.plus) .price>span{color:var(--slate)}
.pricing .plan:not(.plus) ul{color:#3e5364;border-color:#192b3a20}
.pricing .plan:not(.plus) li:before{color:#087c9d}
.pricing .plan:not(.plus) .button.outline{color:var(--ink);border-color:#7a8e9f;background:#f4f7fa}
.pricing .plan.plus{color:#f4f1fa;background:linear-gradient(140deg,#443353,#242335);border-color:#8f79a9;box-shadow:0 22px 50px #32264124}
.pricing .plan.plus .plan-tag{background:#e6daf5;color:#47305f;border-color:#b99bd7}
.pricing .plan.plus .eyebrow,.pricing .plan.plus .plan-description,.pricing .plan.plus .billing-note,.pricing .plan.plus .price>span{color:#cfc2df}
.pricing .plan.plus ul{color:#ddd3e7}
.pricing .plan.plus li:before{color:#c4a8e8}
.pricing .plan.plus .button{background:#cdb5ee;border-color:#cdb5ee;color:#261c32}
.faq{border-color:#263b5020}
.faq details{border-color:#263b5028}
.faq summary span{color:#755292}
.access h2 .blue{color:#c7b2e5}
.access p:not(.eyebrow){color:#c2b8d0}
.pricing button:focus-visible,.pricing a:focus-visible,.faq summary:focus-visible{outline-color:#6c4891}
@media(hover:hover) and (pointer:fine){
  .pricing .plan:not(.plus) .button.outline:hover{background:#e4edf3}
  .pricing .plan.plus .button:hover{background:#ddccf4}
}

/* Open masthead and stable controls: no scroll hijacking or movement under the pointer. */
header{position:fixed;top:0;left:0;width:100%;height:88px;padding:0 5%;border:0;border-bottom:1px solid #a6cde51c;border-radius:0;background:linear-gradient(#081018f2,#081018cf);box-shadow:none;backdrop-filter:blur(18px)}
header nav{margin-left:auto;margin-right:45px;gap:32px}
header>.button.small{background:transparent;border:0;border-left:1px solid #8ca8bb50;border-radius:0;color:#58cdf7;padding:6px 0 6px 28px;gap:22px}
@media(hover:hover) and (pointer:fine){header>.button.small:hover{background:transparent;color:#b9ecff;transform:none}}
.back-to-top{position:fixed;right:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:center;justify-content:center;gap:10px;min-width:52px;min-height:52px;padding:0 20px;border:1px solid #8ce4ff;border-radius:30px;background:var(--blue);color:#07121b;box-shadow:0 6px 22px #04121b40;font-size:12px;font-weight:700;transition:background 160ms ease,border-color 160ms ease}
.back-to-top svg{flex-shrink:0}
.back-to-top:focus-visible{outline:3px solid #fff;outline-offset:4px;box-shadow:0 0 0 7px #07121b}
.back-to-top:active{background:#8edffb}
@media(hover:hover) and (pointer:fine){.back-to-top:hover{background:#70d8fa;border-color:#b1efff}}
@media(max-width:700px){.back-to-top{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));padding-inline:17px;min-height:50px}}
.hero:focus:not(:focus-visible){outline:none}
.scroll-progress{position:fixed;left:0;top:0;width:100%;height:3px;z-index:50;background:linear-gradient(90deg,var(--blue),var(--violet),var(--amber));transform:scaleX(0);transform-origin:left;pointer-events:none}
.reveal:focus-within{opacity:1!important;transform:none!important}
section[tabindex="-1"]:focus,main[tabindex="-1"]:focus{outline:none}

@media(max-width:700px){
  .hero h1{font-size:61px}
  .product,.workflow{padding-block:85px}
  .pads{padding-block:100px}
  .scene-4 .scene-surface{border-radius:28px 28px 0 0}
  .scene-1 .scene-surface{background:linear-gradient(#0a1928,#15374a 45%,#101a2b)}
  .motion-enabled .app-frame{transform:translate3d(0,38px,0) scale(.96)}
  .motion-enabled .pad-art{transform:translate3d(0,38px,0) rotate(2deg) scale(.96)}
  .motion-enabled .app-frame.image-arrived,.motion-enabled .pad-art.image-arrived{transform:none}
  .stage-statement{min-height:70svh}
  .demo-section{padding-top:140px}
  .pricing{padding-top:100px}
  header{height:70px;padding:0 5%}
  header nav{margin-right:0;gap:20px}
  header>.button.small{display:none}
}
.motion-paused .scene-hold::after{display:none}
.motion-paused .scene-follow{margin-top:0}
.motion-paused .scene-surface{position:relative;top:auto;transform:none!important;opacity:1!important;clip-path:none!important}
.motion-paused .reveal,.motion-paused .app-frame,.motion-paused .pad-art,.motion-paused .pad-caption,.motion-paused .media-depth,.motion-paused .hero-copy>*{opacity:1!important;transform:none!important;clip-path:none!important;animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){
  .scene-hold::after{display:none!important}
  .scene-follow{margin-top:0!important}
  .scene-surface{position:relative!important;top:auto!important;transform:none!important;opacity:1!important;clip-path:none!important}
  .hero-copy>*,.stage,.statement-photo,.app-frame,.pad-art,.pad-caption,.media-depth,.chapter-light,.reveal{animation:none!important;transform:none!important;clip-path:none!important;opacity:1;transition:none!important}
  .guide-diagram .guide-connector,.guide-diagram .proposal-timeline,.choice-strip>div{opacity:1!important;transform:none!important;clip-path:none!important}
  .level-fill{transform:scaleX(1)!important;transition:none!important}
}

.demo-challenges{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border-top:1px solid #ffffff20;margin-top:22px;padding-top:20px}.demo-challenges>span{font-size:9px;letter-spacing:1.5px;color:#91a9ba;margin-right:auto}.demo-challenges button,.demo-reset{border:1px solid #506e83;background:#1c3446;color:#d8eaf7;border-radius:6px;padding:9px 12px;font-size:11px}.demo-reset{padding:4px 10px;margin-top:-6px}.demo-note{font-size:11px;color:#9bb2c2;margin:18px 0 0}.demo-play:disabled{opacity:.5;cursor:wait}.console{scroll-margin-top:24px}.wave>i{max-height:65px}

.demo-guide{display:flex;gap:30px;align-items:center;justify-content:space-between;background:linear-gradient(110deg,#173f55,#182a3d);border:1px solid #48c7fa70;border-radius:12px;padding:24px 28px;margin-bottom:20px;position:sticky;top:88px;z-index:12;box-shadow:0 12px 30px #0005}.guide-kicker{font-size:9px;letter-spacing:1.4px;color:#70dcff}.demo-guide h3{margin:8px 0;font-size:24px}.demo-guide p{margin:0;font-size:13px;color:#c0d4e2;max-width:650px}.guide-actions{display:flex;gap:12px;flex-shrink:0}.guide-actions button{background:#23baf3;color:#07121b;border:0;border-radius:5px;padding:12px 18px;font-size:12px;font-weight:700}.guide-actions #tour-skip{background:transparent;color:#c3e6f5;border:1px solid #75b5cf70}#tour-progress{font-size:11px;color:#8edaff;white-space:nowrap}.tour-target{outline:3px solid #7de2ff!important;outline-offset:6px;box-shadow:0 0 28px #21b8f340!important}.demo-note a{text-decoration:underline;color:#acdff1}[hidden]{display:none!important}
@media(max-width:700px){.demo-guide{top:70px;padding:15px;gap:10px;flex-wrap:wrap}.demo-guide h3{font-size:19px}.demo-guide p{font-size:11px}.guide-kicker{font-size:8px}.guide-actions button{padding:9px;font-size:11px}}