/* Product-led motion, scoped to the public landing page. */
.public-flow-story { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr); gap:clamp(32px,5vw,80px); align-items:center; background:#f5f4fb; }
.flow-story-copy h2 { font-size:clamp(32px,3.6vw,55px); line-height:1.08; margin:20px 0; letter-spacing:-.055em; }
.flow-story-copy h2 em { color:#5942c8; }
.flow-story-copy p { color:#59617b; max-width:390px; font-size:15px; line-height:1.8; }
.flow-motion-toggle { border:1px solid #c9c5dd; background:transparent; border-radius:30px; padding:11px 17px; min-height:44px; margin-top:16px; color:#41375d; font-size:12px; cursor:pointer; }
.flow-story-stage { border:1px solid #ded9ee; border-radius:24px; padding:clamp(20px,3vw,35px); background:linear-gradient(140deg,#fff,#f6f4ff); box-shadow:0 24px 70px #30226710; min-width:0; }
.flow-story-caption { display:flex; justify-content:space-between; gap:16px; color:#655b81; font-size:9px; letter-spacing:.08em; font-weight:700; margin-bottom:26px; }
.flow-story-controls { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.flow-story-controls button { display:flex; flex-direction:column; align-items:flex-start; gap:10px; border:0; background:transparent; padding:12px 7px; min-height:66px; color:#6b667d; cursor:pointer; font-size:11px; font-weight:650; text-align:left; }
.flow-story-controls button span { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#ece9f4; color:#51476f; font-size:10px; }
.flow-story-controls button[aria-pressed="true"] { color:#4a31aa; }
.flow-story-controls button[aria-pressed="true"] span { background:#5942c8; color:#fff; box-shadow:0 0 0 5px #eae5fa; }
.flow-story-rail { background:#e7e3f0; height:2px; margin:10px 0 28px; overflow:hidden; }
.flow-story-rail span { display:block; height:100%; width:25%; background:#8c75e6; transform-origin:left; transform:scaleX(var(--flow-fill,1)); }
.flow-story-panel { display:flex; align-items:flex-start; gap:18px; min-height:230px; padding:26px 23px; border:1px solid #292e53; border-radius:15px; background:radial-gradient(ellipse at 100% 0,#333263,#151d38 65%); color:#fff; }
.flow-story-symbol { font-size:32px; line-height:1; color:#c9bcff; }
.flow-story-label { color:#c5b7ff; font-size:10px; letter-spacing:.1em; }
.flow-story-panel h3 { font-size:24px; line-height:1.2; letter-spacing:-.035em; margin:14px 0 12px; color:#fff; }
.flow-story-panel p { color:#ccd0e1; font-size:13px; line-height:1.7; margin:0 0 20px; }
.flow-story-status { display:block; color:#dfd6ff; font-size:11px; line-height:1.6; padding-top:14px; border-top:1px solid #ffffff20; }
.flow-story-link { display:flex; justify-content:space-between; gap:18px; margin-top:22px; color:#5942c8; font-size:12px; font-weight:650; text-decoration:none; }
.flow-story-controls button:focus-visible,.flow-motion-toggle:focus-visible,.flow-story-link:focus-visible { outline:2px solid #795cd4; outline-offset:4px; }
@media(prefers-reduced-motion:no-preference) {
  .motion-enhanced .flow-story-copy,.motion-enhanced .flow-story-stage { opacity:0; transform:translateY(22px); transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1); }
  .motion-enhanced .flow-story-copy.is-visible,.motion-enhanced .flow-story-stage.is-visible { opacity:1; transform:none; }
  .flow-story-controls button,.flow-story-controls button span { transition:background .2s,color .2s,box-shadow .2s; }
  .flow-story-rail span { transition:transform .35s cubic-bezier(.2,.7,.2,1); }
  .flow-story-panel.is-changing { animation:flow-panel-enter .32s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes flow-panel-enter { from { opacity:.45; transform:translateY(8px); } to { opacity:1; transform:none; } }
}
.public-site.motion-paused *,.public-site.motion-paused *::before,.public-site.motion-paused *::after { animation:none!important; transition:none!important; }
.public-site.motion-paused .public-hero-copy,.public-site.motion-paused .public-hero-visual,.public-site.motion-paused .hero-signal-field,.public-site.motion-paused .public-floating-card { transform:none!important; }
.public-site.motion-paused .public-section-intro,.public-site.motion-paused .public-feature-card,.public-site.motion-paused .public-steps li,.public-site.motion-paused .public-vision>div,.public-site.motion-paused .pricing-card,.public-site.motion-paused .public-final-cta,.public-site.motion-paused .flow-story-copy,.public-site.motion-paused .flow-story-stage { opacity:1!important; transform:none!important; }
@media(max-width:900px) { .public-flow-story { grid-template-columns:1fr; } .flow-story-copy p { max-width:570px; } }
@media(max-width:520px) { .flow-story-caption { flex-direction:column; gap:7px; } .flow-story-controls { gap:3px; } .flow-story-controls button { padding:10px 2px; font-size:10px; } .flow-story-panel { padding:20px 16px; gap:12px; min-height:270px; } .flow-story-panel h3 { font-size:21px; } .flow-story-symbol { font-size:25px; } }