.workflow-demo{margin:0 0 40px;border:1px solid #dbe7f6;border-radius:20px;overflow:hidden;background:#f6faff;box-shadow:0 20px 55px #173e7410}.demo-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 24px;border-bottom:1px solid #e0eaf5;background:#fff;color:#718098;font:10px 'DM Mono',monospace;letter-spacing:1px}.demo-brand{color:#1763d0}.demo-stage{position:relative;height:300px;overflow:hidden;background:radial-gradient(ellipse at 75% 50%,#ddecff,transparent 65%);isolation:isolate}.demo-stage:before{content:'';position:absolute;inset:0;background-image:radial-gradient(#b7cde5 1px,transparent 1px);background-size:22px 22px;opacity:.35;z-index:-1}.demo-scene{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:35px;padding:30px 64px;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .5s,transform .5s,visibility .5s}.demo-scene.is-active{opacity:1;visibility:visible;transform:translateY(0)}.demo-copy small{font:10px 'DM Mono',monospace;letter-spacing:1.4px;color:#1763d0}.demo-copy h3{font-size:27px;line-height:1.25;letter-spacing:-1px;margin:12px 0}.demo-copy p{font-size:12px;color:#66758b;max-width:290px;margin:0}.demo-card{width:100%;max-width:370px;justify-self:center;padding:20px;background:#fff;border:1px solid #dbe7f6;border-radius:14px;box-shadow:0 15px 40px #193d7912}.demo-card-label{font-size:10px;color:#70829b;margin-bottom:12px}.demo-number{padding:10px 12px;margin-top:7px;border:1px solid #e6edf5;border-radius:7px;display:flex;align-items:center;justify-content:space-between;font-size:13px}.demo-number.selected{border-color:#669ef3;background:#f0f6ff;color:#1763d0}.demo-number small{font-size:9px}.demo-check{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#1967e5;color:#fff}.demo-flow{text-align:center}.demo-node{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #d4e3f6;border-radius:8px;background:#f5f9ff;font-size:11px}.demo-node i{color:#1967e5}.demo-wire{width:2px;height:23px;margin:auto;background:#a7c9fa;position:relative;overflow:hidden}.demo-wire:after{content:'';position:absolute;inset:0;background:#1967e5;animation:demo-route 1.5s infinite}.demo-branches{display:flex;justify-content:center;gap:12px}.demo-call{text-align:center}.demo-avatar{display:grid;place-items:center;width:57px;height:57px;margin:0 auto 12px;border-radius:50%;background:#eaf3ff;color:#1967e5;font-size:22px;box-shadow:0 0 0 9px #f5f9ff}.demo-call strong{display:block;font-size:14px}.demo-call small{color:#17a673;font-size:10px}.demo-wave{display:flex;align-items:center;justify-content:center;height:35px;gap:4px;margin:12px 0}.demo-wave span{height:8px;width:4px;border-radius:4px;background:#1967e5;animation:demo-wave .85s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.13s)}.demo-call-footer{display:flex;align-items:center;justify-content:center;gap:18px;font-size:12px;color:#718098}.demo-call-footer i:last-child{background:#fff0f0;color:#e66565;padding:10px;border-radius:50%}.demo-controls{display:flex;align-items:center;gap:18px;padding:14px 24px;border-top:1px solid #e0eaf5;background:#fff}.demo-toggle{border:1px solid #dbe7f6;border-radius:50%;width:33px;height:33px;background:#f5f9ff;color:#1967e5;cursor:pointer;flex-shrink:0}.demo-chapters{display:flex;gap:10px;flex:1}.demo-chapter{position:relative;flex:1;text-align:left;padding:8px 0;border:0;background:none;color:#7a899c;font:10px 'DM Mono',monospace;cursor:pointer}.demo-chapter:after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:#e7eef7}.demo-chapter[aria-pressed=true]{color:#1967e5}.demo-chapter[aria-pressed=true]:after{background:#1967e5}.demo-duration{font:10px 'DM Mono',monospace;color:#7a899c}.workflow-demo.is-paused *{animation-play-state:paused!important}#how-it-works .step.is-active .step-number{background:#1967e5;color:#fff;box-shadow:0 0 0 1px #1967e5}#how-it-works .step-number{transition:background .4s,color .4s}@keyframes demo-route{from{transform:translateY(-100%)}to{transform:translateY(100%)}}@keyframes demo-wave{to{height:29px}}@media(max-width:760px){.demo-bar{padding:14px 18px;font-size:8px}.demo-scene{grid-template-columns:1fr;gap:20px;padding:25px 22px;align-content:center}.demo-stage{height:425px}.demo-copy h3{font-size:23px;margin:8px 0}.demo-copy p{max-width:none}.demo-card{max-width:330px;padding:16px}.demo-controls{padding:12px 16px;gap:12px}.demo-duration{display:none}.demo-chapter{font-size:9px}.demo-branches{gap:8px}#how-it-works .step p{margin-top:0}}@media(prefers-reduced-motion:reduce){.workflow-demo *{animation:none!important;transition:none!important}}

/* Connect each marker to the next so the line follows the actual grid spacing. */
#how-it-works .steps::before{display:none}
#how-it-works .step:not(:last-child)::before{content:'';position:absolute;z-index:-1;top:29px;left:29px;width:calc(100% + 28px);border-top:1px dashed #b8c9dc}
#how-it-works .step-number{position:relative}
@media(max-width:760px){
    #how-it-works .step:not(:last-child)::before{top:29px;left:29px;width:0;height:calc(100% + 25px);border-top:0;border-left:1px dashed #b8c9dc}
    #how-it-works .step>div:last-child{min-width:0}
}