.workflow-demo{padding:18px;overflow:hidden}.workflow-stage{position:relative;width:100%;height:100%;min-height:320px;border:1px solid var(--line);border-radius:var(--radius);background:#faf9f5;overflow:hidden}
.workflow-network{position:absolute;inset:0;z-index:1}.workflow-network-links{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}.workflow-you-node{opacity:.42;transform:translate(-50%,-50%) scale(.9);box-shadow:none}.workflow-network .workflow-system{opacity:.48;pointer-events:none;transition:opacity .25s ease,transform .25s ease,background .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease}.workflow-network .workflow-system.is-active{opacity:1;transform:scale(1.08);background:#fff;color:var(--accentDark);border-color:var(--accent);box-shadow:0 0 0 8px rgba(15,107,104,.08),0 10px 26px rgba(15,107,104,.10)}.workflow-network .workflow-system.is-complete{opacity:.72;color:var(--accentDark);background:#f7fbf9;border-color:rgba(15,107,104,.35)}.workflow-network .workflow-system.is-money{opacity:1;transform:scale(1.13);background:#fff;border-color:var(--accent);box-shadow:0 0 0 12px rgba(15,107,104,.11),0 16px 34px rgba(15,107,104,.16)}
.workflow-network-link{fill:none;stroke:rgba(15,107,104,.18);stroke-width:1.7;vector-effect:non-scaling-stroke;transition:stroke .22s ease,stroke-width .22s ease,opacity .22s ease}.workflow-network-link.is-active{stroke:rgba(15,107,104,.92);stroke-width:3}.workflow-network-link.is-complete{stroke:rgba(15,107,104,.42)}.workflow-network-pulse{fill:var(--accent);opacity:.34;filter:drop-shadow(0 0 2px rgba(15,107,104,.28));transition:opacity .2s ease}.workflow-network-pulse.is-active{opacity:1;filter:drop-shadow(0 0 5px rgba(15,107,104,.6))}
.workflow-customer{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);width:min(620px,62%);padding:20px 22px;border:1px solid var(--ink);border-radius:var(--radius);background:rgba(255,255,255,.965);box-shadow:0 18px 46px rgba(21,26,30,.13);transition:border-color .25s ease,box-shadow .25s ease}.workflow-customer.is-processing{border-color:var(--accentDark);box-shadow:0 18px 46px rgba(15,107,104,.12)}.workflow-customer:has(.customer-state.is-complete){pointer-events:none;animation:customerDismiss .48s cubic-bezier(.4,0,.25,1) 2.5s forwards}.customer-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.customer-heading .meta{margin-bottom:3px}.customer-heading h3{font-size:24px;margin:0}.customer-state{flex:0 0 auto;margin-top:2px;padding:5px 8px;border:1px solid var(--line);border-radius:999px;background:#faf9f5;color:var(--muted);font-size:10px;font-weight:800}.customer-state.is-processing{color:var(--accentDark);border-color:rgba(15,107,104,.35);background:#f5fbf8}.customer-state.is-complete{color:#fff;border-color:var(--accentDark);background:var(--accentDark)}
.customer-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:13px}.customer-summary div{padding:8px 10px;border:1px solid #e5dfd4;border-radius:6px;background:#faf9f5}.customer-summary span{display:block;color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase}.customer-summary strong{display:block;margin-top:2px;font-size:12px}
.workflow-progress{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:5px}.workflow-progress li{position:relative;min-width:0;padding-top:15px;color:#8b918f;text-align:center;font-size:9px;font-weight:750}.workflow-progress li:before{content:"";position:absolute;left:50%;top:4px;width:calc(100% + 5px);height:1px;background:#ddd7cb}.workflow-progress li:first-child:before{left:50%;width:50%}.workflow-progress li:last-child:before{width:50%}.workflow-progress li span{position:absolute;z-index:2;left:50%;top:0;width:9px;height:9px;transform:translateX(-50%);border:2px solid #c8c0b2;border-radius:50%;background:#fff}.workflow-progress li.is-active{color:var(--accentDark)}.workflow-progress li.is-active span{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 5px rgba(15,107,104,.10)}.workflow-progress li.is-complete{color:var(--ink)}.workflow-progress li.is-complete span{border-color:var(--accentDark);background:var(--accentDark)}.workflow-progress li.is-complete:before{background:rgba(15,107,104,.45)}
.workflow-confirm{width:100%;margin-top:14px;min-height:40px}.workflow-confirm.is-attention{animation:workflowAttention 1.45s ease-in-out infinite}.workflow-confirm:disabled{cursor:default;opacity:.58}.workflow-next:disabled{opacity:.22;cursor:default;filter:saturate(.4);box-shadow:none}.workflow-next.is-ready{opacity:1;filter:none;animation:workflowNext 1.45s ease-in-out .52s infinite}.panel-note{margin:10px 0 0;color:var(--muted);font-size:12px;text-align:center}
.payment-toast{position:absolute;z-index:9;left:50%;top:17%;min-width:310px;display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;padding:14px 16px;border:1px solid var(--accent);border-radius:10px;background:rgba(255,255,255,.98);box-shadow:0 22px 60px rgba(15,107,104,.25),0 0 0 10px rgba(15,107,104,.06);transform:translate(-50%,18px) scale(.72);opacity:0}.payment-toast.is-reward{animation:paymentReward 2.5s cubic-bezier(.2,.9,.25,1) both}.payment-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--accentDark);color:#fff;font-size:13px;font-weight:900}.payment-toast small{display:block;color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.payment-toast strong{display:block;margin-top:1px;font-size:26px;line-height:1;color:var(--accentDark)}.payment-source{color:var(--muted);font-size:11px;font-weight:800}
@keyframes workflowAttention{0%,100%{transform:translateY(0);box-shadow:0 0 0 0 rgba(15,107,104,0)}50%{transform:translateY(-1px);box-shadow:0 0 0 6px rgba(15,107,104,.09)}}@keyframes workflowNext{0%,100%{transform:translateY(0);box-shadow:0 0 0 0 rgba(15,107,104,0)}50%{transform:translateY(-2px);box-shadow:0 0 0 8px rgba(15,107,104,.10)}}@keyframes paymentReward{0%{opacity:0;transform:translate(-50%,22px) scale(.55) rotate(-2deg)}10%{opacity:1;transform:translate(-50%,0) scale(1.14) rotate(1deg)}17%{transform:translate(-50%,0) scale(.97) rotate(0)}23%{transform:translate(-50%,0) scale(1)}72%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-28px) scale(1.04)}}@keyframes customerDismiss{0%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}100%{opacity:0;transform:translate(-50%,-54%) scale(.94);filter:blur(3px);visibility:hidden}}
@media(prefers-reduced-motion:reduce){.workflow-confirm.is-attention,.workflow-next.is-ready,.payment-toast.is-reward{animation:none}.workflow-network-pulse{display:none}.payment-toast{opacity:1;transform:translate(-50%,0)}.workflow-customer:has(.customer-state.is-complete){animation:customerDismiss .01s linear .46s forwards}}
@media(max-width:1199px){.workflow-customer{width:min(620px,68%)}.payment-toast{top:14%}}
@media(max-width:767px){.workflow-demo{padding:10px}.workflow-stage{min-height:440px}.workflow-customer{width:86%;top:48%;padding:16px}.customer-heading{display:block}.customer-state{display:inline-block;margin-top:8px}.customer-summary{grid-template-columns:1fr 1fr}.customer-summary div:last-child{grid-column:1/-1}.workflow-progress{grid-template-columns:repeat(3,1fr);row-gap:10px}.workflow-progress li:before{display:none}.workflow-network .complexity-node{width:88px;font-size:10px}.workflow-network .slot-3,.workflow-network .slot-8{display:none}.payment-toast{left:50%;top:8%;min-width:min(310px,88%);grid-template-columns:38px 1fr}.payment-source{display:none}}