/* Use perspective for the opening pose only; product text is native, unscaled 2D. */
.phone-hero-stage.is-demo-ready,.hero-flow.is-ready{perspective:none}
.flow-phone{transform-style:flat}
.flow-screen{transform:none}
@media(min-width:1050px){
 .hero-flow.is-ready>.flow-phone{transform:none!important;left:var(--demo-phone-left)!important;top:var(--demo-phone-top)!important}
 .hero-flow.is-ready>.flow-controls{top:var(--demo-controls-top)}
 .hero-flow.is-ready>.flow-disclosure{top:calc(var(--demo-controls-top) + 42px)}
}
@media(min-width:1700px) and (min-height:851px) and (max-height:969px){.hero-flow{--phone-width:350px;--phone-height:716px}}
.flow-body{overflow-anchor:none}
/* Keep animated result layers within the scroll viewport and below its top inset. */
.flow-body{contain:paint;isolation:isolate}
.flow-thread{padding-top:24px}
.flow-screen:after{content:'';position:absolute;top:80px;left:0;right:0;height:16px;background:#f3f5fa;z-index:4;pointer-events:none}
.flow-phone.is-workspace .flow-screen:after{display:none}
/* Give the process rail room and make every phase readable, including inactive phases. */
.flow-steps{padding-left:18px}
.flow-steps li{min-height:86px;color:#627995}
.flow-steps b{font-size:16px;font-weight:600;line-height:1.7}
.flow-steps span{font-size:14px;line-height:1.7;color:#62738a;margin-top:4px}
.flow-steps i{font-size:12px}
.flow-detail>small{font-size:12px;color:#7587a0}
.flow-native{--phone-body:14px;--phone-label:13px;--phone-note:12px}
.hero-flow .flow-native{--phone-body:15px;--phone-label:14px;--phone-note:12px}
.hero-flow .flow-question,.hero-flow .flow-reply{font-size:15px}
.flow-native .native-approval>button{flex-wrap:wrap;gap:6px 8px;font-size:13px}
.flow-native .native-approval>button>b{font-size:14px;flex:1;min-width:0;color:#283d59}
.flow-native .native-approval>button>.native-chip{font-size:11px;line-height:1.6}
.flow-native .native-approval>button>span:not(.native-chip){order:4;flex-basis:100%;font-size:13px;line-height:1.85;color:#61748e}
.flow-native .native-approval .ai-ui-warning{font-size:12px!important}
.flow-native .native-approval-detail .ai-ui-rows dd{font-size:13px!important}
.flow-native .native-approval-detail .ai-ui-actions>button,.flow-native .native-distance-tabs button,.flow-native .native-candidates small,.flow-native .native-receipt small{font-size:12px}
.flow-native .native-approval-detail .ai-ui-rows>div{grid-template-columns:58px minmax(0,1fr)}
.flow-reply{margin:16px 0 0;padding:13px 14px;border:1px solid #e8edf5;border-radius:16px;background:white;color:#425b7a;font-size:14px;line-height:1.85}
.flow-wave i{animation:none;transform-origin:center center}
.flow-voice,.flow-push,.flow-toast{transition:none}
.flow-thinking-dots{display:inline-flex;gap:3px;margin-left:8px;vertical-align:middle}
.flow-thinking-dots i{display:block;width:3px;height:3px;background:currentColor;border-radius:50%}
.hero-assurance{margin-top:27px;padding:17px 0 0;border-top:1px solid #dce6f3;color:#7185a2}
.hero-assurance>strong{font-size:14px;font-weight:600;color:#45678f;display:flex;align-items:center;gap:7px}
.hero-assurance>strong:before{content:'';width:6px;height:6px;border-radius:50%;background:#63a6e6;flex:none}
.hero-assurance>p{font-size:12px;line-height:1.85;margin:8px 0 0}
.hero-assurance[data-state="done"]>strong:before{background:#3ca68b}
/* A workbench is the app screen itself, without a surrounding result card. */
.flow-phone.is-workspace .flow-thread{padding:0;height:100%;min-height:0}
.flow-phone.is-workspace .flow-frame.native-frame{margin:0;height:100%!important}
.flow-phone.is-workspace .native-workspace{height:100%;min-height:0;padding:0}
.flow-phone.is-workspace .ai-workbench{height:100%;min-height:0;background:#f3f5f9}
.flow-phone.is-workspace .flow-body{scrollbar-width:none}
.flow-phone.is-workspace .native-workspace.is-focused{border:0;box-shadow:none}
.flow-phone.is-workspace .ai-workbench-nav{min-height:48px}
.native-voice-example .flow-wave i{background:#69a1ee}
.flow-zoom .flow-question{margin:0;font-size:13px}
@media(max-width:1049px){.hero-assurance{max-width:440px;margin:22px auto 0;text-align:left}.phone-hero-stage{perspective:none}}
@media(max-width:650px){.flow-steps{padding-left:0}.flow-steps li{min-height:0}.flow-steps b{font-size:13px;line-height:25px}.flow-steps i{font-size:10px}}
@media(prefers-reduced-motion:reduce){.flow-thinking-dots{display:none}}