.flow-page-hero { padding-top: 56px; }
.flow-page-hero > .flow-hero-layout { max-width: 1136px; display: flex; flex-direction: column; gap: 32px; align-items: center; }
.flow-page-hero .flow-hero-copy { min-width: 0; text-align: center; width: 100%; }
.flow-page-hero h1 { font-size: 72px; }
.flow-page-hero .flow-page-lead { font-size: 26px; max-width: none; margin: 20px auto 0; }
.flow-page-hero .flow-hero-summary { width: 100%; max-width: 720px; text-align: center; }
.flow-page-hero .flow-hero-summary > p { max-width: none; font-size: 17px; line-height: 1.65; }
.flow-page-hero .flow-page-actions { justify-content: center; }
.flow-product { padding: 0; min-width: 0; width: 100%; max-width: 900px; }
.flow-product-inner { position: relative; margin: 0; }
.flow-demo-controls { position: absolute; top: 12px; right: 12px; z-index: 2; }
.flow-demo-controls button { font: 500 14px var(--font-sans); color: var(--ink); border: 0; cursor: pointer; }
.flow-demo-pause { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.flow-demo-pause:focus { position: static; display: inline-flex; gap: 8px; align-items: center; width: auto; height: auto; margin: 0; padding: 10px 16px; overflow: visible; clip-path: none; border-radius: 999px; background: #fff; }
.flow-demo-controls button:focus-visible { outline: 2px solid #3e645b; outline-offset: 4px; }
.flow-demo-frame { position: relative; isolation: isolate; padding: 10px; border: 1px solid rgba(255,255,255,.7); border-radius: 12px; background: rgba(255,255,255,.17); backdrop-filter: blur(20px) saturate(115%); -webkit-backdrop-filter: blur(20px) saturate(115%); box-shadow: 0 24px 65px -30px rgba(41,65,82,.4), inset 0 1px 0 rgba(255,255,255,.65); }
/* Match the reference video's proportions; crop the wide source without stretching it. */
.flow-demo-stage { position: relative; aspect-ratio: 1774 / 1080; overflow: hidden; border-radius: 6px; background: rgba(255,255,255,.65); container-type: inline-size; }
.flow-demo-shell { position: absolute; width: 127.3526%; height: auto; max-width: none; top: -6.8913%; left: 0; pointer-events: none; }
.flow-demo-window { position: absolute; top: 8.4227%; left: 19.8115%; right: -25.721%; bottom: .6891%; overflow: hidden; background: #faf9f7; }
.flow-demo-shell, .flow-demo-sheet > img { mix-blend-mode: multiply; }
.flow-demo-panel { position: absolute; inset: 0; overflow: hidden; }
.flow-demo-sheet { position: relative; width: 100%; will-change: transform; }
.flow-demo-sheet > img { display: block; width: 100%; height: auto; }
.flow-demo-library { aspect-ratio: 2254 / 4132; }
.flow-demo-library > img { position: absolute; inset: 0; }
.flow-demo-library .flow-demo-asset { position: absolute; display: block; object-fit: cover; border-radius: 6% 6% 0 0; mix-blend-mode: normal; }
.flow-demo-pulse-sheet > img { margin-top: -4.5253%; }
.flow-demo-pulse-nav { display: none; position: absolute; left: 1.5282%; top: 24.65%; width: 15.7153%; height: 4.9%; align-items: center; padding-left: 3.0565%; background: #e9e5f0; border-radius: 4px; font: 500 1.299cqw var(--font-sans); color: #493378; }
.flow-demo-frame[data-scene="pulse"] .flow-demo-pulse-nav { display: flex; }
@media (max-width: 720px) {
 .flow-page-hero h1 { font-size: 48px; }
 .flow-page-hero .flow-page-lead { font-size: 24px; }
 .flow-page-hero > .flow-hero-layout { gap: 24px; }
 .flow-page-hero .flow-hero-summary { text-align: left; }
 .flow-demo-frame { padding: 4px; border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) { .flow-demo-sheet { will-change: auto; } }