/* Fixed-size visual stories beneath the three How it works steps. */
.flow-grid>div{min-width:0;display:flex;flex-direction:column}
.flow-grid>div>p{min-height:44px;margin-bottom:24px}
.flow-demo{height:258px;width:100%;min-width:0;margin-top:auto;border:1px solid #e8e7e4;border-radius:12px;overflow:clip;background:radial-gradient(ellipse at 50% 42%,#fff1e6 0,transparent 66%),#f8f8f6;position:relative;isolation:isolate}
.flow-art{position:absolute;inset:0;pointer-events:none;user-select:none}
.flow-loop{animation-duration:8s;animation-timing-function:cubic-bezier(.22,.7,.25,1);animation-iteration-count:infinite;animation-fill-mode:both}
.flow-demo[data-visible=false] .flow-loop,[data-flow-paused=true] .flow-loop{animation-play-state:paused}
.flow-bottom-note{position:absolute;bottom:11px;left:8px;right:8px;height:16px;text-align:center;font-size:9px;color:#777;white-space:nowrap}
.flow-flying-logo{position:absolute;z-index:3;left:30px;top:22px;padding:7px 12px;background:white;border:1px solid #d8d8d6;border-radius:8px;font:700 24px/1 'Space Grotesk',sans-serif;letter-spacing:-1.3px;box-shadow:0 8px 18px #1111;transform-origin:left center;animation-name:flow-link-drop}
.flow-flying-logo>span,.flow-attached strong>span{color:var(--orange)}
.flow-flying-logo i{font:400 15px Inter,sans-serif;margin-left:7px;color:#aaa}
.flow-drop-guide{position:absolute;left:71px;top:70px;height:42px;border-left:1px dashed #d3c7bc}
.flow-prompt{position:absolute;top:83px;left:17px;right:17px;height:134px;background:white;border:1px solid #d9d9d5;border-radius:10px;padding:13px;box-shadow:0 7px 20px #17171706;animation-name:flow-prompt-glow}
.flow-prompt-top{display:flex;justify-content:space-between;font-size:9px;gap:8px}.flow-prompt-top b{font-weight:550}.flow-prompt-top>span{color:#aaa;font-size:8px}
.flow-prompt-line{margin-top:13px;font-size:10px;height:20px;color:#666}
.flow-type{display:block;width:100%;white-space:nowrap;overflow:hidden;animation-name:flow-type;animation-timing-function:steps(28,end)}
.flow-prompt-bottom{position:absolute;left:13px;right:13px;bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:5px}
.flow-attached{height:29px;display:flex;align-items:center;gap:8px;padding:3px 9px;border:1px solid #ddd;border-radius:5px;background:#fafafa;font-size:12px;color:#666;animation-name:flow-attachment}
.flow-attached strong{font:700 17px/1 'Space Grotesk',sans-serif;letter-spacing:-.8px;color:#171717}
.flow-send{height:28px;width:28px;display:grid;place-items:center;background:#171717;color:white;border-radius:6px;font-size:16px;animation-name:flow-send}
.flow-ready{display:block;animation-name:flow-attachment}
.flow-plan{position:absolute;top:22px;left:17px;right:17px;height:195px;padding:13px;background:#fff;border:1px solid #d9d9d5;border-radius:10px;box-shadow:0 7px 20px #17171706}
.flow-plan-heading{display:flex;justify-content:space-between;gap:8px;font-size:10px;margin-bottom:12px}.flow-plan-heading b{font-weight:550}.flow-plan-heading>span{color:#999}
.flow-check-row{display:flex;align-items:center;gap:9px;height:30px;font-size:10px}
.flow-check{width:15px;height:15px;flex-shrink:0;display:grid;place-items:center;background:#171717;border:1px solid #171717;color:white;font-size:9px;border-radius:50%;animation-name:flow-check}
.flow-check-row:nth-child(3) .flow-check{animation-name:flow-check-second}.flow-check-row:nth-child(4) .flow-check{animation-name:flow-check-third}
.flow-row-detail{margin-left:auto;font-size:8px;color:#999}.flow-brand-dots{display:flex;margin-left:auto;gap:3px}.flow-brand-dots i{width:9px;height:9px;background:#202020;border-radius:50%;border:1px solid #0001}.flow-brand-dots i:nth-child(2){background:#ffceaa}.flow-brand-dots i:nth-child(3){background:#eee}
.flow-approve{position:absolute;bottom:12px;left:13px;right:13px;height:32px;border-radius:5px;background:#171717;color:white;display:grid;place-items:center;font-size:10px;animation-name:flow-approve}
.flow-before-approve,.flow-after-approve{grid-area:1/1}.flow-before-approve{animation-name:flow-before-approve}.flow-before-approve i{font-style:normal;margin-left:35px}.flow-after-approve{animation-name:flow-after-approve}.flow-approved-note{display:block;animation-name:flow-after-approve}
.flow-cursor{position:absolute;width:21px;height:27px;filter:drop-shadow(0 2px 2px #0002);z-index:4}
.flow-decisions .flow-cursor{bottom:8px;right:30px;animation-name:flow-decision-cursor}
.flow-website{position:absolute;top:22px;left:21px;right:21px;height:168px;background:#fff;border:1px solid #d7d7d2;border-radius:7px;overflow:clip;box-shadow:0 8px 25px #1717170a;animation-name:flow-site-in}
.flow-website-bar{height:22px;padding:0 8px;background:#fafafa;border-bottom:1px solid #e8e8e6;display:flex;align-items:center;justify-content:space-between;font:6px 'JetBrains Mono',monospace;color:#aaa}.flow-website-bar>span:first-child{font-size:5px;letter-spacing:1px}.flow-website-bar>span:nth-child(2){color:#666}
.flow-website-body{padding:10px 11px}.flow-website-nav{display:flex;align-items:center;justify-content:space-between;font-size:5px;letter-spacing:.07em;color:#999}.flow-website-nav b{color:#444;font-weight:600}
.flow-website-content{display:grid;grid-template-columns:1.2fr 1fr;gap:10px;margin-top:12px}.flow-site-copy{animation-name:flow-site-copy}.flow-site-copy>strong{font:550 clamp(15px,1.8vw,20px)/1.02 'Space Grotesk',sans-serif;letter-spacing:-.6px;display:block}.flow-site-line{display:block;width:65%;height:2px;background:#ddd;margin:9px 0 8px}.flow-site-cta{font-size:5px;background:#222;color:white;border-radius:2px;padding:4px 6px;display:inline-block}
.flow-site-art{height:97px;position:relative;background:#f4eee6;border-radius:50px 50px 3px 3px;overflow:hidden;animation-name:flow-site-art}.flow-site-art i{position:absolute}.flow-site-art i:first-child{width:58px;height:58px;border-radius:50%;background:#fbcba8;top:14px;left:18%}.flow-site-art i:nth-child(2){width:40%;height:58px;background:#292928;bottom:-8px;left:13%;transform:rotate(-14deg);border-radius:2px}.flow-site-art i:last-child{width:42%;height:42px;background:#d4cfc6;bottom:-5px;right:3%;transform:rotate(18deg);border-radius:3px}
.flow-publish-action{position:absolute;right:18px;bottom:51px;padding:8px 14px;border-radius:6px;background:#171717;color:#fff;font-size:10px;box-shadow:0 0 0 4px #ffeadb;animation-name:flow-share}
.flow-publish>.flow-art>.flow-cursor{right:15px;bottom:34px;animation-name:flow-share-cursor}
.flow-live-link{position:absolute;left:50%;bottom:38px;display:flex;align-items:center;gap:11px;height:38px;padding:0 12px;background:white;border:1px solid #d7d7d3;border-radius:7px;box-shadow:0 6px 15px #1717170a;white-space:nowrap;transform:translateX(-50%);animation-name:flow-live-link}
.flow-live-link code{font-size:10px;color:#333}.flow-live-link>span:last-child{font-size:14px;color:#777}.flow-link-check{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#171717;color:white;font-size:9px}.flow-live-note{display:block;animation-name:flow-live-note}
.flow-demo-controls{display:flex;justify-content:flex-end;margin-top:12px}.flow-motion-control{padding:0 3px;min-height:36px;border:0;background:transparent;color:#777;font-size:10px}.flow-motion-control:hover{color:#171717}.flow-motion-control:disabled{color:#999}
@keyframes flow-link-drop{0%,5%{opacity:0;transform:translate(26px,-13px) rotate(-9deg)}12%,22%{opacity:1;transform:translate(20px,0) rotate(-6deg)}40%{opacity:1;transform:translate(0,148px) scale(.75)}47%,90%{opacity:0;transform:translate(0,148px) scale(.65)}100%{opacity:0;transform:translate(26px,-13px) rotate(-9deg)}}
@keyframes flow-type{0%,10%{max-width:0}30%,92%{max-width:28ch}100%{max-width:0}}
@keyframes flow-prompt-glow{0%,30%,60%,100%{box-shadow:0 7px 20px #17171706}42%,52%{box-shadow:0 0 0 4px #ffeadb,0 7px 20px #17171706}}
@keyframes flow-attachment{0%,43%{opacity:0;transform:translateY(4px)}50%,91%{opacity:1;transform:none}100%{opacity:0;transform:translateY(4px)}}
@keyframes flow-send{0%,43%{background:#e9e9e7;color:#aaa}50%,92%{background:#171717;color:white}100%{background:#e9e9e7;color:#aaa}}
@keyframes flow-check{0%,14%{background:white;border-color:#ddd;color:transparent;transform:scale(1)}23%{background:#171717;border-color:#171717;color:white;transform:scale(1.16)}29%,91%{background:#171717;border-color:#171717;color:white;transform:scale(1)}100%{background:white;border-color:#ddd;color:transparent}}
@keyframes flow-check-second{0%,24%{background:white;border-color:#ddd;color:transparent;transform:scale(1)}33%{background:#171717;border-color:#171717;color:white;transform:scale(1.16)}39%,91%{background:#171717;border-color:#171717;color:white;transform:scale(1)}100%{background:white;border-color:#ddd;color:transparent}}
@keyframes flow-check-third{0%,34%{background:white;border-color:#ddd;color:transparent;transform:scale(1)}43%{background:#171717;border-color:#171717;color:white;transform:scale(1.16)}49%,91%{background:#171717;border-color:#171717;color:white;transform:scale(1)}100%{background:white;border-color:#ddd;color:transparent}}
@keyframes flow-decision-cursor{0%,38%{opacity:0;transform:translate(20px,15px)}48%,52%{opacity:1;transform:translate(-23px,-10px)}55%{opacity:1;transform:translate(-23px,-10px) scale(.83)}59%{opacity:1;transform:translate(-23px,-10px)}67%,100%{opacity:0;transform:translate(-15px,5px)}}
@keyframes flow-approve{0%,52%,63%,100%{transform:scale(1);box-shadow:0 0 0 0 #ffeadb}55%{transform:scale(.97);box-shadow:0 0 0 4px #ffeadb}59%{transform:scale(1);box-shadow:0 0 0 4px #ffeadb}}
@keyframes flow-before-approve{0%,53%{opacity:1}57%,91%{opacity:0}100%{opacity:1}}
@keyframes flow-after-approve{0%,53%{opacity:0}59%,91%{opacity:1}100%{opacity:0}}
@keyframes flow-site-in{0%{opacity:0;transform:translateY(15px) scale(.96)}17%,91%{opacity:1;transform:none}100%{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes flow-site-copy{0%,12%{opacity:0;transform:translateY(7px)}27%,100%{opacity:1;transform:none}}
@keyframes flow-site-art{0%,20%{opacity:0;transform:translateY(10px)}36%,100%{opacity:1;transform:none}}
@keyframes flow-share{0%,31%{opacity:0;transform:translateY(7px)}40%,54%{opacity:1;transform:none}58%{opacity:1;transform:scale(.94)}65%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes flow-share-cursor{0%,39%{opacity:0;transform:translate(12px,12px)}50%,55%{opacity:1;transform:translate(-13px,-11px)}58%{opacity:1;transform:translate(-13px,-11px) scale(.85)}64%,100%{opacity:0;transform:translate(-13px,-11px)}}
@keyframes flow-live-link{0%,62%{opacity:0;transform:translate(-50%,10px) scale(.96)}72%,91%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,5px)}}
@keyframes flow-live-note{0%,66%{opacity:0}75%,91%{opacity:1}100%{opacity:0}}
@media(min-width:601px) and (max-width:850px){.flow-grid{gap:18px}.flow-grid h3{font-size:20px;min-height:42px}.flow-grid>div>p{min-height:65px}.flow-plan,.flow-prompt{left:9px;right:9px;padding:10px}.flow-plan-heading{font-size:8px}.flow-check-row{font-size:9px;gap:6px}.flow-row-detail{font-size:6px}.flow-brand-dots i{width:7px;height:7px}.flow-website{left:10px;right:10px}.flow-live-link{gap:7px;padding:0 8px}.flow-live-link code{font-size:8px}.flow-prompt-line{font-size:8px}.flow-prompt-top{font-size:8px}.flow-prompt-top>span{font-size:7px}.flow-bottom-note{font-size:8px}.flow-website-content{gap:5px}.flow-site-art{height:87px}.flow-site-copy>strong{font-size:16px}.flow-flying-logo{left:22px}}
@media(max-width:600px){.flow-grid{gap:30px}.flow-grid>div{display:grid;grid-template-columns:26px minmax(0,1fr);gap:5px 15px}.flow-grid>div>p{min-height:0;margin-bottom:0}.flow-demo{grid-column:1/-1;margin-top:15px;max-width:380px;justify-self:center;height:258px}.flow-site-copy>strong{font-size:22px}.flow-website{left:25px;right:25px}.flow-website-content{grid-template-columns:1.15fr 1fr}.flow-demo-controls{justify-content:center}}
@media(prefers-reduced-motion:reduce){.flow-flying-logo,.flow-drop-guide,.flow-cursor,.flow-before-approve,.flow-publish-action{display:none}.flow-type{max-width:none}.flow-attached,.flow-ready,.flow-after-approve,.flow-approved-note,.flow-website,.flow-site-copy,.flow-site-art,.flow-live-link,.flow-live-note{opacity:1}.flow-live-link{transform:translateX(-50%)}.flow-check{color:white;background:#171717}.flow-send{background:#171717;color:white}}