/* Compact pinned scenes; normal document flow remains the default. */
.scene-controls{display:none}
.magic-intro.magic-intro-centred{display:block;text-align:center;margin:0 auto}
.magic-intro-centred .accent{color:var(--color-accent)}
.magic-portrait-row{display:grid;grid-template-columns:1fr;justify-items:center;align-items:center;gap:1.5rem;max-width:58rem;margin:0 auto}
.magic-portrait-row .magic-quote{margin:0;text-align:center}
.magic-portrait-row .magic-quote blockquote{font-size:clamp(1.6rem,3vw,2.6rem)}
.magic-portrait{display:block;width:100%;max-width:20rem;max-height:25rem;height:auto;object-fit:contain;justify-self:center}
.magic-brand-note{max-width:70ch;margin:1.75rem auto 2rem;text-align:center;font-size:1rem;line-height:1.65;color:var(--color-muted)}
@media(max-width:539px){
  .magic-portrait-row{grid-template-columns:1fr;gap:1.25rem}
  .magic-portrait{grid-row:1;max-width:15rem;max-height:18.75rem}
  .magic-portrait-row .magic-quote{text-align:center}
  .magic-brand-note{margin-block:1.5rem;font-size:.95rem}
}
[data-scroll-active]{height:calc(var(--scene-height) + var(--scene-distance));padding-block:0!important;position:relative}
[data-scroll-active]>.scene-sticky{position:sticky;top:var(--scene-top);padding-block:.5rem}
[data-scroll-active] .scene-controls{display:flex;align-items:center;gap:1rem;padding-top:.8rem;font-size:.75rem;color:var(--color-muted)}
.scene-controls [data-scene-hint]{min-width:9.5rem;font-variant-numeric:tabular-nums}
.scene-controls button{border:0;background:transparent;color:var(--color-muted);font:inherit;cursor:pointer;padding:.5rem;min-height:36px;text-decoration:underline;text-underline-offset:.2em;white-space:nowrap}
.scene-controls a{display:inline-flex;align-items:center;gap:.4rem;min-height:36px;white-space:nowrap}
.scene-progress{height:2px;background:var(--color-rule);flex:1}
.scene-progress>span{display:block;height:100%;background:var(--color-accent);transform-origin:left;transform:scaleX(var(--scene-progress,0))}
[data-scroll-active] .magic-intro{margin-bottom:1rem;align-items:center}
[data-scroll-active] .magic-intro h2{font-size:clamp(1.75rem,2.5vw,2.3rem);line-height:1.12}
[data-scroll-active] .magic-intro p{font-size:.94rem;max-width:38ch}
[data-scroll-active] .workflow-canvas{min-height:0;padding:1.5rem 2rem;gap:1.25rem}
[data-scroll-active] .workflow-canvas h3{margin-bottom:1rem}
[data-scroll-active] .document-stack{height:200px}
[data-scroll-active] .demo-toolbar{padding:.75rem 1.25rem}
[data-scroll-active] .demo-bottom{min-height:65px;padding:.9rem 1.25rem}
[data-scroll-active] .demo-status{max-width:none}
[data-scroll-driven] [data-play]{display:none}
[data-scroll-driven] .document,[data-scroll-driven] .engine img,[data-scroll-driven] .connector-signal,[data-scroll-driven] .output-list li{transition:none!important;animation:none!important}
[data-scroll-driven] .doc-a{transform:translate(calc(-75% + 25% * var(--gather,0)),calc(15px - 5px * var(--gather,0))) rotate(calc(-12deg + 12deg * var(--gather,0)))}
[data-scroll-driven] .doc-b{transform:translate(calc(-15% - 35% * var(--gather,0)),calc(40px - 11px * var(--gather,0))) rotate(calc(11deg - 11deg * var(--gather,0)))}
[data-scroll-driven] .doc-c{transform:translate(calc(-55% + 5% * var(--gather,0)),calc(74px - 26px * var(--gather,0))) rotate(calc(-3deg + 3deg * var(--gather,0)))}
[data-scroll-driven] .connector-signal{stroke-dashoffset:calc(260 - 260 * var(--signal,0))}
[data-scroll-driven] .engine img{transform:rotate(var(--engine-turn,0deg))}
[data-scroll-driven] .output-list li{opacity:calc(.25 + .75 * var(--outputs,0));transform:translateX(calc(18px - 18px * var(--outputs,0)))}
[data-scroll-active].process-walkthrough .section-head{margin-bottom:1rem;gap:1rem}
[data-scroll-active].process-walkthrough .section-head h2{font-size:2rem;line-height:1.12}
[data-scroll-active].process-walkthrough .section-head .lede{font-size:.92rem;line-height:1.5}
[data-scroll-active].process-walkthrough .process-tabs{position:static;margin-bottom:1rem}
[data-scroll-active] .process-tabs button{padding:.65rem .8rem}
[data-scroll-active] .process-stages{display:grid}
[data-scroll-active] .process-stage{grid-area:1/1;gap:2rem}
[data-scroll-active] .process-stage[hidden]{display:grid!important;visibility:hidden;pointer-events:none}
[data-scroll-active] .process-stage-image img{max-height:300px}
[data-scroll-active] .process-stage-image figcaption{margin-top:.4rem;padding-top:.5rem}
[data-scroll-active] .process-stage-copy{gap:.65rem}
[data-scroll-active] .process-stage-copy h3{font-size:1.8rem;line-height:1.12;max-width:24ch}
[data-scroll-active] .process-stage-copy>p{font-size:.92rem;line-height:1.5;max-width:52ch}
[data-scroll-active] .process-stage-copy ul{gap:.25rem}
[data-scroll-active] .process-stage-copy li{font-size:.85rem;line-height:1.45}
[data-scroll-active] .process-outcome{padding:.7rem 1rem}
[data-scroll-active] .process-outcome p{font-size:.85rem;line-height:1.45;margin-top:.2rem}
[data-scroll-active] .process-example{padding-top:.45rem}
[data-scroll-active] .process-example summary{font-size:.8rem}
[data-scroll-active].process-walkthrough .process-navigation{margin-top:.75rem;padding-top:.65rem}
[data-scroll-active] .process-navigation .btn{padding:.7rem 1rem;min-height:38px;font-size:.8rem}
@media(prefers-reduced-motion:reduce){[data-scroll-active]{height:auto!important}[data-scroll-active]>.scene-sticky{position:static}.scene-controls{display:none!important}}
[data-scroll-active].process-walkthrough .process-navigation{display:none}
/* Keep the workflow scroll-driven in narrow desktop panels and portrait phones. */
@media(max-width:959px){
  [data-scroll-active] .magic-intro{display:grid;gap:.5rem;margin-bottom:.75rem}
  [data-scroll-active] .magic-intro h2{font-size:1.55rem;line-height:1.12}
  [data-scroll-active] .magic-intro p{font-size:.85rem;line-height:1.4;max-width:60ch}
  [data-scroll-active] .demo-toolbar{display:block;padding:.4rem .65rem}
  [data-scroll-active] .demo-caption{display:none}
  [data-scroll-active] .workflow-choices{display:flex;justify-content:space-between;gap:.25rem}
  [data-scroll-active] .workflow-choices button{font-size:.78rem;padding:.65rem .5rem}
  [data-scroll-active] .workflow-canvas{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.5rem;padding:.75rem}
  [data-scroll-active] .workflow-canvas h3{font-size:.8rem;margin-bottom:.6rem}
  [data-scroll-active] .document-stack{width:100%;height:135px}
  [data-scroll-driven] .doc-b{transform:translate(calc(-15% - 35% * var(--gather,0)),calc(20px - 4px * var(--gather,0))) rotate(calc(11deg - 11deg * var(--gather,0)))}
  [data-scroll-driven] .doc-c{transform:translate(calc(-55% + 5% * var(--gather,0)),calc(35px - 3px * var(--gather,0))) rotate(calc(-3deg + 3deg * var(--gather,0)))}
  [data-scroll-active] .document{width:110px;height:96px;padding:.6rem;gap:.35rem}
  [data-scroll-active] .document svg{width:18px;height:18px}
  [data-scroll-active] .document span{font-size:.68rem}
  [data-scroll-active] .engine-zone{gap:.45rem;padding:0}
  [data-scroll-active] .engine{display:grid;grid-template-columns:1fr;min-width:0;width:100%;padding:.5rem;gap:.35rem}
  [data-scroll-active] .engine img{grid-row:auto;width:34px;height:34px}
  [data-scroll-active] .engine strong{font-size:1.05rem}
  [data-scroll-active] .engine>span{font-size:.68rem}
  [data-scroll-active] .review-gate{font-size:.63rem;padding:.4rem;gap:.25rem}
  [data-scroll-active] .flow-connector{left:-55%;top:30%;width:130%;height:60px;transform:none}
  [data-scroll-active] .output-zone{grid-column:1/-1}
  [data-scroll-active] .output-list{gap:.35rem}
  [data-scroll-active] .output-list li{min-height:32px;padding:.4rem .65rem;font-size:.78rem}
  [data-scroll-active] .demo-case{margin-top:.5rem;font-size:.72rem}
  [data-scroll-active] .demo-bottom{padding:.4rem .8rem;min-height:50px;gap:0;text-align:left}
  [data-scroll-active] .demo-status{font-size:.76rem;line-height:1.4;min-height:2.8em}
  [data-scroll-active] .scene-controls{gap:.4rem;flex-wrap:wrap;padding-top:.25rem;font-size:.7rem}
  [data-scroll-active] [data-scene-hint]{min-width:0;margin-right:auto}
  [data-scroll-active] .scene-progress{order:2;flex-basis:100%}
}