.workflow{padding:90px 42px 25px;border-bottom:1px solid var(--line)}.workflow-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:38px}.workflow-heading h2{margin-top:24px}.workflow-heading>p{font-size:16px;line-height:1.7;color:var(--muted);margin:0 0 5px}.workflow-console{background:#202521;color:#f6f7f3;border:1px solid #353c35;box-shadow:0 24px 50px #19221a10}.workflow-toolbar{padding:22px 28px;display:flex;align-items:center;gap:25px;border-bottom:1px solid #ffffff15}.workflow-toolbar img{width:130px;height:25px}.workflow-toolbar>span{font:10px monospace;letter-spacing:1.5px;color:#bdc5ba}.workflow-toolbar>span:last-child{margin-left:auto;color:#ff9a6c}.workflow-layout{display:grid;grid-template-columns:270px 1fr}.workflow-steps{padding:22px 0;border-right:1px solid #ffffff15}.workflow-steps button{display:flex;align-items:center;gap:16px;width:100%;padding:20px 24px;text-align:left;color:#b2bcb0;background:transparent;border:0;border-left:3px solid transparent;cursor:pointer}.workflow-steps button>span{font:12px monospace;color:#879180}.workflow-steps button div{font-size:15px}.workflow-steps small{display:block;font-size:11px;color:#a5ada1;margin-top:7px}.workflow-steps b{font-weight:400;margin-left:auto;opacity:0}.workflow-steps button:hover{background:#ffffff06}.workflow-steps button[aria-current]{border-left-color:var(--orange);background:#ffffff08;color:white}.workflow-steps button[aria-current]>span,.workflow-steps button[aria-current] b{color:#ff9a6c;opacity:1}.workflow-steps .flow-done>span{color:#dbe0d4}.workflow-stage{padding:30px 38px;min-width:0}.flow-network{display:flex;align-items:center;justify-content:center;gap:13px;margin-bottom:34px;color:#cad0c6;font:10px monospace;letter-spacing:1px}.flow-network>span:not(.flow-hub){min-width:64px;text-align:center}.flow-hub{background:var(--orange);width:47px;height:47px;display:grid;place-items:center;font:bold 27px Arial;color:white;border-radius:10px;flex-shrink:0}.flow-wire{height:1px;background:#ffffff25;flex:1;max-width:90px;position:relative;overflow:hidden}.flow-wire:after{content:"";height:2px;width:25px;background:#ff9a6c;position:absolute;left:-25px;top:0}.flow-running .flow-wire:after{animation:flow-packet 1.5s linear infinite}.flow-kicker{font:10px monospace;letter-spacing:1.2px;color:#ff9a6c}.workflow-stage h3{font-size:27px;line-height:1.2;letter-spacing:-.8px;font-weight:400;margin:14px 0}.workflow-stage p{font-size:14px;line-height:1.8;color:#bec7b9;min-height:76px;margin:0}.flow-record{margin-top:24px;border:1px solid #ffffff1f;padding:21px 23px;background:#ffffff04}.flow-record-head{display:flex;justify-content:space-between;gap:12px;font:10px monospace;letter-spacing:.5px;color:#bdc5ba}.flow-record-head>span:last-child{color:#ffaf8a}.flow-record>strong{display:block;font-size:19px;font-weight:400;margin:22px 0}.flow-record strong>span{color:#a2ad9b;font-size:13px}.flow-data{display:flex;justify-content:space-between;gap:12px;font-size:12px;padding:11px 0;border-top:1px solid #ffffff10;color:#a9b4a3}.flow-data b{font-weight:400;color:#ecf1e8}.flow-caption{display:flex;gap:9px;align-items:flex-start;font-size:11px;line-height:1.6;color:#bdc5ba;margin-top:18px}.flow-pulse{width:5px;height:5px;flex-shrink:0;border-radius:50%;background:var(--orange);margin-top:6px}.flow-controls{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:18px 27px;border-top:1px solid #ffffff15}.flow-controls>span{font:11px monospace;color:#bbc4b5}.flow-controls>div{display:flex;gap:12px}.flow-controls button{padding:12px 17px;font-size:12px;cursor:pointer;border:1px solid #ffffff30;color:white;background:transparent}.flow-controls #flow-play{background:var(--orange);border-color:var(--orange);min-width:132px}.flow-controls button:hover{filter:brightness(1.15)}.flow-disclaimer{font-size:12px;color:var(--muted);line-height:1.7;max-width:840px;margin:20px 0 35px}@keyframes flow-packet{to{left:100%}}@media(max-width:1050px){.workflow{padding:65px 28px 20px}.workflow-layout{grid-template-columns:230px 1fr}.workflow-stage{padding:28px 24px}.workflow-steps button{padding:20px 15px;gap:11px}.workflow-heading>p{font-size:14px}}@media(max-width:740px){.workflow{padding:48px 13px 15px}.workflow-heading{display:block}.workflow-heading>p{margin-top:23px}.workflow-layout{display:block}.workflow-toolbar{padding:20px 16px;gap:10px}.workflow-toolbar img{width:105px}.workflow-toolbar>span{font-size:8px;letter-spacing:.5px}.workflow-steps{display:grid;grid-template-columns:repeat(3,1fr);padding:0;border-right:0;border-bottom:1px solid #ffffff15}.workflow-steps button{display:block;padding:15px 9px;border-left:0;border-bottom:2px solid transparent;text-align:center}.workflow-steps button[aria-current]{border-left:0;border-bottom-color:var(--orange)}.workflow-steps button>span{font-size:10px}.workflow-steps button div{font-size:11px;margin-top:7px}.workflow-steps small,.workflow-steps b{display:none}.workflow-stage{padding:24px 18px}.workflow-stage h3{font-size:24px}.workflow-stage p{min-height:100px;font-size:13px}.flow-network{gap:8px;font-size:8px;letter-spacing:0}.flow-network>span:not(.flow-hub){min-width:51px}.flow-hub{width:38px;height:38px;font-size:23px}.flow-record{padding:17px}.flow-record-head{font-size:8px}.flow-controls{padding:16px 12px}.flow-controls>span{font-size:9px}.flow-controls>div{gap:7px}.flow-controls button{padding:11px 10px;font-size:11px}.flow-controls #flow-play{min-width:104px}.flow-disclaimer{font-size:11px}}

/* Contemporary product surface */
.workflow{padding:95px 26px 10px;border:0}.workflow-heading{margin-bottom:38px}.workflow-heading h2{margin-top:18px}.workflow-console{background:#fff;color:var(--ink);border:1px solid #e6e9ef;border-radius:24px;overflow:hidden;box-shadow:0 26px 75px #2839520c,0 3px 10px #28395204}.workflow-toolbar{padding:24px 30px;border-color:#edf0f4;background:linear-gradient(100deg,#fff,#fafbfe)}.workflow-toolbar>span{font-family:inherit;font-weight:600;font-size:10px;color:#8b92a0;letter-spacing:1px}.workflow-toolbar>span:last-child{color:#cd5525;background:#fff1e9;border:1px solid #ffe1d0;border-radius:20px;padding:7px 12px;letter-spacing:.5px}.workflow-layout{grid-template-columns:260px 1fr}.workflow-steps{background:#fafbfe;border-color:#edf0f4;padding:22px 14px}.workflow-steps button{padding:17px 14px;margin-bottom:5px;border:1px solid transparent;border-radius:13px;color:#72798b;gap:12px;transition:background .2s,box-shadow .2s,transform .2s}.workflow-steps button>span{display:grid;place-items:center;width:28px;height:28px;border:1px solid #e4e8ef;background:#fff;border-radius:9px;font:11px "Segoe UI",sans-serif;color:#8a91a0;flex-shrink:0}.workflow-steps button div{font-size:13px;font-weight:600}.workflow-steps small{font-size:10px;font-weight:400;color:#9096a3}.workflow-steps button:hover{background:#f0f3f9}.workflow-steps button[aria-current]{background:#fff;border:1px solid #ffe2d0;color:#202735;box-shadow:0 4px 14px #ad5d2010}.workflow-steps button[aria-current]>span{background:linear-gradient(135deg,#ff8a46,#f45a28);color:white;border-color:transparent;box-shadow:0 4px 9px #f45a2829}.workflow-steps .flow-done>span{color:#b44a20;background:#fff4ee;border-color:#f7ded1}.workflow-steps button[aria-current] b{color:var(--orange)}.workflow-stage{position:relative;padding:32px 38px;background:radial-gradient(ellipse at 100% 0,#fff4ed,transparent 58%)}.flow-network{border:1px solid #edf0f4;border-radius:17px;padding:20px;margin-bottom:28px;background:#ffffffc9;color:#858b98;font-family:inherit;font-size:10px;font-weight:600;letter-spacing:.5px;box-shadow:0 6px 25px #26344904}.flow-hub{background:white;border:1px solid #ffe5d5;border-radius:14px;width:54px;height:54px;box-shadow:0 5px 14px #e88a4220;position:relative}.flow-hub img{width:35px;height:35px}.flow-wire{height:2px;background:#eee5df;max-width:120px}.flow-wire:after{top:0;background:var(--orange);box-shadow:0 0 7px #ff9a6c}.flow-kicker{color:#dd632f;font-family:inherit;font-weight:650;font-size:10px}.workflow-stage h3{font-size:29px;letter-spacing:-1px;font-weight:600;margin-top:13px;color:#242b3a}.workflow-stage p{color:#818795;font-size:14px;line-height:1.8;min-height:77px}.flow-record{position:relative;border-radius:17px;border:1px solid #e8ebf1;box-shadow:0 8px 30px #26344905;background:#fff;padding:22px 25px;margin-top:24px}.flow-record-head{font-family:inherit;font-size:10px;font-weight:550;color:#949baa;letter-spacing:1px;align-items:center}.flow-record-head>span:last-child{color:#c45222;letter-spacing:0;background:#fff2ea;border:1px solid #ffe6d7;border-radius:20px;padding:6px 10px}.flow-record>strong{color:#303748;font-weight:600;font-size:20px;margin:21px 0}.flow-record strong>span{color:#9a9fac;font-weight:400}.flow-data{border-color:#f0f2f6;color:#959baa;padding:12px 0}.flow-data b{color:#596172;font-weight:500}.flow-caption{color:#8a91a0;font-size:11px;margin-top:20px}.flow-controls{border-color:#edf0f4;padding:20px 28px;background:#fcfdff}.flow-controls>span{color:#8a91a0;font-family:inherit;font-size:12px}.flow-controls button{border:1px solid #e7eaf0;color:#7b8290;background:white;border-radius:10px;padding:12px 18px;transition:transform .2s,box-shadow .2s}.flow-controls #flow-play{background:linear-gradient(120deg,#ff7b36,#f15a29);color:white;border-color:transparent;box-shadow:0 5px 15px #ed63242b}.flow-controls button:hover{transform:translateY(-2px)}.flow-disclaimer{color:#969ca9;font-size:11px;max-width:820px;line-height:1.8;margin-left:12px}.flow-running .flow-hub{box-shadow:0 0 0 7px #ffede475,0 5px 18px #f45a2824}.flow-running #flow-content{animation:content-in .4s ease-out}.flow-progress{height:3px;display:flex;background:#f3f5f8;gap:3px}.flow-progress span{flex:1;background:#e9edf3;transition:background .3s}.flow-progress span.passed{background:linear-gradient(90deg,#ff9c61,#f65d26)}@keyframes content-in{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1050px){.workflow{padding:70px 8px 10px}.workflow-layout{grid-template-columns:228px 1fr}.workflow-steps{padding:18px 10px}.workflow-steps button{padding:16px 10px;gap:9px}.workflow-stage{padding:26px 24px}.workflow-stage h3{font-size:25px}}@media(max-width:740px){.workflow{padding:55px 0 5px}.workflow-heading{padding:0 10px;margin-bottom:28px}.workflow-console{border-radius:20px}.workflow-toolbar{padding:19px 17px;gap:10px}.workflow-toolbar>span{font-size:8px;letter-spacing:.4px}.workflow-toolbar>span:last-child{padding:6px 9px}.workflow-layout{display:block}.workflow-steps{padding:12px;gap:6px;border-bottom:1px solid #edf0f4}.workflow-steps button{padding:12px 5px;margin:0;border:1px solid transparent}.workflow-steps button>span{margin:auto;width:24px;height:24px;font-size:10px;border-radius:8px}.workflow-steps button div{font-size:10px;margin-top:8px}.workflow-steps button[aria-current]{border:1px solid #ffe2d0}.workflow-stage{padding:22px 18px}.flow-network{padding:16px 10px;gap:8px;margin-bottom:25px;font-size:8px}.flow-hub{width:43px;height:43px;border-radius:12px}.flow-hub img{width:29px;height:29px}.workflow-stage h3{font-size:23px;letter-spacing:-.65px}.workflow-stage p{font-size:13px;min-height:96px}.flow-record{padding:18px 16px;border-radius:14px}.flow-record-head{font-size:8px;letter-spacing:.4px;gap:8px}.flow-record-head>span:last-child{font-size:8px;padding:6px 8px}.flow-record>strong{font-size:18px}.flow-data{font-size:11px}.flow-controls{padding:16px 14px;gap:10px}.flow-controls>span{font-size:10px}.flow-controls button{padding:11px 12px;font-size:11px}.flow-disclaimer{font-size:10px;margin:17px 9px 10px}}@media(prefers-reduced-motion:reduce){.flow-running .flow-wire:after,.flow-running #flow-content{animation:none}.workflow-console *{transition:none}}
