/* Source UI previews are isolated from the marketing theme. */
.system-example{min-width:0;background:white;border:1px solid #dce2e6;border-radius:8px;overflow:hidden}
.preview-viewport{position:relative;width:100%;aspect-ratio:var(--preview-width)/var(--preview-height);overflow:hidden;background:white}
.preview-viewport iframe{position:absolute;left:0;top:0;width:calc(var(--preview-width)*1px);height:calc(var(--preview-height)*1px);max-width:none;border:0;transform:scale(var(--preview-scale,1));transform-origin:top left;pointer-events:none}
.preview-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 15px;background:#fff;border-top:1px solid #e8ebed;font-size:10px;color:#69747e;line-height:1.5}
.preview-footer button{padding:3px 0;border:0;background:none;color:#173f61;font-size:10px;white-space:nowrap}
.preview-footer button:hover{text-decoration:underline;text-underline-offset:3px}
.product-stage{padding-bottom:20px;margin-bottom:25px;border:1px solid #dce4ea;border-radius:12px}
.product-stage .system-example{box-shadow:0 16px 45px #173f6110}
.stage-caption .motion-toggle{border:0;background:transparent;padding:3px 0;display:flex;align-items:center;gap:10px;color:#526c7e;font:inherit;letter-spacing:inherit}
.motion-toggle:disabled{opacity:.7;cursor:default}
.workflow-panel{grid-template-columns:.7fr 1.3fr;gap:38px;align-items:start;min-height:460px}
.step-visual{padding:0;border:0;background:none;display:block;min-height:0}
.workflow-playback{display:flex;align-items:center;gap:15px;padding:20px 0 0;border-top:1px solid var(--line);margin-top:28px;color:var(--muted);font-size:11px}
#play-workflow{display:inline-flex;gap:8px;align-items:center;white-space:nowrap;background:#fff;border:1px solid #d5dfe6;padding:9px 13px;border-radius:5px;font-size:11px;color:var(--blue)}
#play-workflow:hover{background:#edf2f5}
.playback-track{height:2px;background:#e1e7ec;flex:1;min-width:40px;overflow:hidden}
.playback-track span{display:block;height:100%;width:0;background:#bb994f}
.playback-track.is-playing span{animation:workflow-timer 6s linear forwards}
.feature-card{padding-bottom:20px}
.feature-card .system-example{margin-top:auto;border-radius:5px}
.feature-card .preview-footer{padding:9px;flex-wrap:wrap;gap:4px;font-size:8px}
.feature-card .preview-footer button{font-size:9px}

.feature-card .preview-viewport iframe{pointer-events:none}
#preview-dialog{width:min(1480px,96vw);max-width:96vw;padding:18px;max-height:94vh;overflow:auto}
#preview-dialog .dialog-header{position:sticky;top:-18px;background:white;z-index:1;padding:12px 0;margin-bottom:12px}
#preview-dialog .dialog-header p{font-size:11px;color:var(--muted);margin:7px 0 0}
#preview-dialog .preview-footer{display:none}
.expanded-preview{overflow:auto;max-height:78vh;border:1px solid #e2e7eb;border-radius:6px}
.expanded-preview .system-example{min-width:1050px;border:0}
.expanded-preview .preview-viewport{aspect-ratio:1440/1080}
/* Entrance and scroll motion. Content stays visible without JavaScript. */
.motion-ready .hero-copy .eyebrow{animation:soft-rise .65s both}
.motion-ready .hero-copy h1{animation:soft-rise .85s .08s both}
.motion-ready .hero-description{animation:soft-rise .85s .18s both}
.motion-ready .hero-actions{animation:soft-rise .8s .28s both}
.motion-ready .hero-note{animation:soft-rise .8s .34s both}
.motion-ready .product-stage{animation:product-arrive 1.1s .3s both}
.will-reveal{opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1);transition-delay:var(--reveal-delay,0ms)}
.will-reveal.is-visible{opacity:1;transform:none}
.button span,.text-link span{display:inline-block;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.button:hover span,.text-link:hover span{transform:translate(3px,-2px)}
.workflow-tabs button{position:relative;transition:color .25s,background .25s}
.workflow-tabs button:hover{background:#f1f4f6}
.workflow-tabs button[aria-selected=true]::after{content:'';position:absolute;height:2px;background:#173f61;bottom:-1px;left:0;right:0;transform-origin:left;animation:tab-line .35s ease-out}
.feature-icon{transition:transform .3s,background .3s,box-shadow .3s}
.feature-card:hover .feature-icon{transform:translateY(-4px) rotate(-4deg);background:#e9f0f5;box-shadow:0 6px 15px #173f6112}
.real-screenshot img{transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s}
.real-screenshot:hover img{transform:translateY(-5px);box-shadow:0 16px 32px #173f6115}
.site-header::after{content:'';position:absolute;left:0;bottom:-1px;width:var(--scroll-progress,0%);height:2px;background:#bc9948;transition:width .08s linear}
summary::after{transition:transform .25s}details[open] summary::after{transform:rotate(180deg)}
details[open] p{animation:soft-rise .35s both}
dialog[open]{animation:dialog-in .3s cubic-bezier(.2,.7,.2,1)}
@keyframes soft-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes product-arrive{from{opacity:0;transform:translateY(36px) scale(.985)}to{opacity:1;transform:none}}
@keyframes tab-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes workflow-timer{to{width:100%}}
@keyframes dialog-in{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.motion-paused *, .motion-paused *::before,.motion-paused *::after{animation:none!important;transition:none!important}
.motion-paused .will-reveal{opacity:1;transform:none}
@media(max-width:1050px){.workflow-panel{grid-template-columns:1fr;gap:27px}.step-copy{max-width:650px}.step-copy h3{max-width:600px}.feature-grid{grid-template-columns:1fr}.feature-card{display:grid;grid-template-columns:1fr 1fr;gap:0 25px;padding:26px;border-right:0;border-bottom:1px solid var(--line)}.feature-card:last-child{border-bottom:0}.feature-card .system-example{grid-column:2;grid-row:1/4;align-self:center;margin:0}.feature-card>p{margin:0}.feature-card .preview-footer{font-size:9px}.feature-icon{margin-bottom:15px}.feature-card h3{font-size:21px}}
@media(max-width:650px){.product-stage{padding:12px 8px 8px}.stage-caption{font-size:8px}.preview-footer{font-size:8px;padding:10px;gap:6px;flex-wrap:wrap}.preview-footer button{font-size:9px}.product-stage .preview-viewport iframe{width:1440px}.feature-card{display:flex;gap:0;padding:24px 20px}.feature-card>p{margin:0 0 25px}.feature-card .system-example{width:100%;margin-top:0}.workflow-playback{flex-wrap:wrap;gap:10px}.workflow-playback>span{font-size:10px;flex:1;min-width:150px}.playback-track{flex-basis:100%}.workflow-panel{min-height:0}.expanded-preview .system-example{min-width:1000px}#preview-dialog{padding:12px}.dialog-header h2{font-size:16px}.preview-footer span{color:#687780}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.will-reveal{opacity:1;transform:none}}