#devia-flow,#devia-flow *{box-sizing:border-box}#devia-flow{--cycle:4s;--surface:#f7faf8;--ink:#12634f;--muted:#73817d;--track:#bdded4;--red:#f04f5e;--green:#20bf87;--lime:#99e52d;--circle:clamp(50px, 7.4vw, 88px);--center:clamp(70px, 11.2vw, 134px);--plane:clamp(115px, 16.3vw, 196px);isolation:isolate;background:var(--surface);width:100%;max-width:1600px;color:var(--ink);-webkit-font-smoothing:antialiased;margin-inline:auto;padding:clamp(19px,3vw,46px) clamp(19px,3vw,45px) 48px;font-family:inherit;position:relative;overflow:hidden}#devia-flow .diagram{position:relative}#devia-flow .steps{grid-template-columns:20% 60% 20%;margin:0;padding:0;list-style:none;display:grid;position:relative}#devia-flow .step{text-align:center;flex-direction:column;align-items:center;min-width:0;display:flex}#devia-flow .node-space{width:100%;height:var(--plane);place-items:center;display:grid}#devia-flow .node{width:var(--circle);height:var(--circle);will-change:transform;background:#fff;border-radius:50%;flex-shrink:0;place-items:center;display:grid;position:relative}#devia-flow .node-fill{border-radius:inherit;opacity:0;position:absolute;inset:0}#devia-flow .node--caller .node-fill{background:linear-gradient(115deg, #f18579, var(--red))}#devia-flow .node--you .node-fill{background:linear-gradient(105deg, var(--green), var(--lime))}#devia-flow .node--devia{width:var(--center);height:var(--center);background:linear-gradient(105deg, #2dbda6 0%, #58d162 55%, var(--lime) 100%)}#devia-flow .icon{fill:none;stroke:currentColor;stroke-width:1.55px;stroke-linecap:round;stroke-linejoin:round;width:38%;height:38%;display:block;position:relative}#devia-flow .shield-tile{background:#fff;border-radius:29%;place-items:center;width:51%;height:51%;display:grid}#devia-flow .shield-tile .icon{width:58%;height:58%}#devia-flow .shield-icon{transform-origin:50% 55%}#devia-flow .arrival-halo{color:var(--red);opacity:0;pointer-events:none;border:3px solid;border-radius:50%;position:absolute;inset:-7px}#devia-flow .step-label{color:var(--muted);letter-spacing:.14em;white-space:nowrap;margin:5px 0 0;font-size:clamp(10px,1.36vw,17px);font-weight:400;line-height:1.36}#devia-flow .step-label--brand{color:var(--ink);letter-spacing:-.025em;font-size:clamp(18px,2vw,24px);font-weight:600;line-height:1.1}#devia-flow .connections{height:var(--plane);pointer-events:none;position:absolute;inset:0 0 auto}#devia-flow .connection{width:calc(40% - (var(--circle) + var(--center)) / 2);background:var(--track);border-radius:10px;height:3px;position:absolute;top:50%;transform:translateY(-50%)}#devia-flow .connection--in{left:calc(10% + var(--circle) / 2)}#devia-flow .connection--out{left:calc(50% + var(--center) / 2)}#devia-flow .flow-trail{width:0;height:6px;color:var(--green);box-shadow:0 0 13px color-mix(in srgb, currentColor 32%, transparent);opacity:0;background:currentColor;border-radius:10px;position:absolute;top:50%;left:0;transform:translateY(-50%)}#devia-flow .arrow{background:var(--surface);color:#7fbdac;place-items:center;width:clamp(20px,2.3vw,34px);height:30px;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#devia-flow .arrow:after{content:"";border-top:4px solid;border-right:4px solid;border-radius:1px;width:clamp(7px,.7vw,11px);height:clamp(7px,.7vw,11px);transform:translate(-2px)rotate(45deg)}#devia-flow .signal{width:min(75%,clamp(34px,10vw,150px));height:8px;color:var(--green);opacity:0;background:linear-gradient(90deg,#0000 0%,currentColor 55%);border-radius:10px;position:absolute;top:50%;left:0;transform:translate(-100%,-50%)}#devia-flow .signal:after{content:"";width:13px;height:13px;box-shadow:0 0 0 5px color-mix(in srgb, currentColor 14%, transparent), 0 0 19px 5px color-mix(in srgb, currentColor 40%, transparent);background:currentColor;border-radius:50%;position:absolute;top:50%;right:-6px;transform:translateY(-50%)}#devia-flow .motion{animation-duration:var(--cycle);animation-timing-function:cubic-bezier(.45,0,.2,1);animation-iteration-count:infinite}#devia-flow .node--caller{animation-name:devia-caller-pulse}#devia-flow .node--caller .node-fill{animation-name:devia-caller-fill}#devia-flow .node--caller .icon{animation-name:devia-caller-icon}#devia-flow .node--devia{animation-name:devia-center-pulse}#devia-flow .shield-icon{animation-name:devia-shield-jiggle}#devia-flow .arrival-halo{animation-name:devia-arrival}#devia-flow .node--you{animation-name:devia-you-pulse}#devia-flow .node--you .node-fill{animation-name:devia-you-fill}#devia-flow .node--you .icon{animation-name:devia-you-icon}#devia-flow .connection--in .signal{animation-name:devia-signal-in;animation-timing-function:linear}#devia-flow .connection--out .signal{animation-name:devia-signal-out;animation-timing-function:linear}#devia-flow .connection--in .flow-trail{animation-name:devia-trail-in;animation-timing-function:linear}#devia-flow .connection--out .flow-trail{animation-name:devia-trail-out;animation-timing-function:linear}#devia-flow .connection--in .arrow{animation-name:devia-arrow-in}#devia-flow .connection--out .arrow{animation-name:devia-arrow-out}@keyframes devia-caller-pulse{0%,2%,32%,to{transform:scale(1)}12%,17%{transform:scale(1.24)}}@keyframes devia-caller-fill{0%,3%,32%,to{opacity:0}12%,20%{opacity:1}}@keyframes devia-caller-icon{0%,3%,32%,to{color:var(--ink)}12%,20%{color:#fff}}@keyframes devia-center-pulse{0%,38%,65%,to{transform:scale(1)}48%,53%{transform:scale(1.16)}}@keyframes devia-shield-jiggle{0%,38%,50%,to{transform:translate(0)rotate(0)}39.5%{transform:translate(-4px)rotate(-12deg)}41%{transform:translate(4px)rotate(11deg)}42.5%{transform:translate(-3px)rotate(-9deg)}44%{transform:translate(3px)rotate(7deg)}45.5%{transform:translate(-2px)rotate(-5deg)}47%{transform:translate(1px)rotate(3deg)}48.5%{transform:translate(-1px)rotate(-1deg)}}@keyframes devia-arrival{0%,38%{opacity:0;color:var(--red);transform:scale(.98)}39%{opacity:.8;color:var(--red);transform:scale(1.01)}42%{opacity:.65;color:var(--green);transform:scale(1.07)}49%,to{opacity:0;color:var(--green);transform:scale(1.22)}}@keyframes devia-you-pulse{0%,77%,to{transform:scale(1)}85%,89%{transform:scale(1.24)}}@keyframes devia-you-fill{0%,77%,to{opacity:0}84%,90%{opacity:1}}@keyframes devia-you-icon{0%,77%,to{color:var(--ink)}84%,90%{color:#fff}}@keyframes devia-signal-in{0%,17%{opacity:0;color:var(--red);left:0}18%{opacity:1;color:var(--red)}38%{opacity:1;color:var(--red);left:100%}41%{opacity:1;color:var(--green);left:100%}45%,to{opacity:0;color:var(--green);left:100%}}@keyframes devia-signal-out{0%,53%{opacity:0;left:0}55%{opacity:1}77%{opacity:1;left:100%}82%,to{opacity:0;left:100%}}@keyframes devia-trail-in{0%,17%{opacity:0;width:0;color:var(--red)}18%{opacity:.8;color:var(--red)}38%{opacity:.8;width:100%;color:var(--red)}41%{opacity:.85;width:100%;color:var(--green)}49%,to{opacity:0;width:100%;color:var(--green)}}@keyframes devia-trail-out{0%,53%{opacity:0;width:0}55%{opacity:.8}77%{opacity:.8;width:100%}87%,to{opacity:0;width:100%}}@keyframes devia-arrow-in{0%,23%,49%,to{color:#7fbdac}27%,38%{color:var(--red)}41%,44%{color:var(--green)}}@keyframes devia-arrow-out{0%,60%,87%,to{color:#7fbdac}65%,79%{color:var(--green)}}#devia-flow[data-paused=true] .motion{animation-play-state:paused}#devia-flow .sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){#devia-flow:not([data-paused]) .motion{animation-play-state:paused}}@media (width<=420px){#devia-flow{--circle:46px;--center:69px}#devia-flow .step-label{letter-spacing:.08em;font-size:11px}#devia-flow .step-label--brand{letter-spacing:-.025em;font-size:23px}}