@keyframes connectFlowDiagramArrowsLinear{to{clip-path:path("M -21 0 -15 4 -21 8 M -10 0 -4 4 -10 8 M 1 0 7 4 1 8 M 12 0 18 4 12 8 M 23 0 29 4 23 8 M 34 0 40 4 34 8 M 45 0 51 4 45 8 M 56 0 62 4 56 8 M 67 0 73 4 67 8 M 78 0 84 4 78 8 M 89 0 95 4 89 8 M 100 0 106 4 100 8")}}@keyframes connectFlowDiagramArrowsBounce{50%,to{clip-path:path("M -10 0 -4 4 -10 8 M 1 0 7 4 1 8 M 12 0 18 4 12 8 M 23 0 29 4 23 8 M 34 0 40 4 34 8 M 45 0 51 4 45 8 M 56 0 62 4 56 8 M 67 0 73 4 67 8 M 78 0 84 4 78 8 M 89 0 95 4 89 8 M 100 0 106 4 100 8 M 111 0 117 4 111 8")}}@keyframes connectFlowDiagramSpin{50%,to{transform:rotate(1turn)}}@keyframes connectFlowDiagramInstant{25%,to{transform:translateY(16px)}}.ConnectFlowDiagram{--easingBounceWeak:cubic-bezier(0.68,-0.25,0.27,1.25);--easingBounceStrong:cubic-bezier(0.68,-0.55,0.27,1.55);--cardBackground:0 0/8px 8px #fff radial-gradient(rgba(203,214,224,0.35) 18.75%,transparent 0);--arrowWidthHalf:calc(var(--nodeDistance)/2 - var(--nodeRadius) - var(--nodeSpacing));--arrowWidthFull:calc(var(--nodeDistance) - var(--nodeRadius)*2 - var(--nodeSpacing));--arrowLeft:translate(calc(var(--nodeSpacing) + var(--nodeRadius) - var(--nodeDistance)));--arrowRight:translate(calc(var(--nodeSpacing) + var(--nodeRadius)));--arrowTopRight:rotate(-45deg) translate(calc(var(--nodeSpacing) + var(--nodeRadius)));--arrowBottomRight:rotate(45deg) translate(calc(var(--nodeSpacing) + var(--nodeRadius)));--arrowFlip:scaleX(-1) translate(var(--nodeSpacing));--arrowRightIn:var(--arrowRight) scaleX(-1) translate(var(--nodeSpacing));--arrowRightOut:translate(calc(var(--nodeDistance)/2 + var(--nodeSpacing)));--nodeRadius:25px;--nodeSpacing:5px;--nodeDistance:100px;--nodeContainerThreeColumn:translate(0);--nodeContainerTwoColumn:translate(calc(var(--nodeDistance)/-2));--nodeTransformLeft:translate(calc(var(--nodeDistance)*-1));--nodeTransformCenter:translate(0);--nodeTransformRight:translate(var(--nodeDistance));--nodeTransformTopRight:rotate(-45deg) translate(var(--nodeDistance)) rotate(45deg);--nodeTransformBottomRight:rotate(45deg) translate(var(--nodeDistance)) rotate(-45deg);--movementTransition:750ms var(--easingBounceWeak);--arrowFadeOut:300ms 150ms;--arrowFadeIn:550ms 300ms;--iconFadeOut:300ms 150ms;--iconFadeIn:450ms var(--easingBounceStrong) 300ms;--iconAnimationTiming:2000ms var(--easingBounceStrong) infinite}@media (min-width:375px){.ConnectFlowDiagram{--nodeDistance:120px}}@media (prefers-reduced-motion:reduce){.ConnectFlowDiagram{--movementTransition:none;--iconFadeOut:none;--iconFadeIn:none}}.ConnectFlowDiagram--isActive{--arrowAnimationLinear:connectFlowDiagramArrowsLinear 500ms linear infinite;--arrowAnimationBounce:connectFlowDiagramArrowsBounce var(--iconAnimationTiming);--iconInstantAnimation:connectFlowDiagramInstant var(--iconAnimationTiming);--iconSpinAnimation:connectFlowDiagramSpin var(--iconAnimationTiming)}@media (prefers-reduced-motion:reduce){.ConnectFlowDiagram--isActive{--arrowAnimationLinear:none;--arrowAnimationBounce:none;--iconInstantAnimation:none;--iconSpinAnimation:none}}.ConnectFlowDiagram__card{display:flex;justify-content:center;align-items:center;min-height:360px;height:100%}.ConnectFlowDiagram__state{display:none}.ConnectFlowDiagram__nodeContainer{position:relative;transform:var(--nodeContainerThreeColumn);transition:var(--movementTransition);transition-property:transform}.ConnectFlowDiagram__node{--nodeTransform:scale(1);position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:calc(var(--nodeRadius)*2);height:calc(var(--nodeRadius)*2);transform:translate(-50%,-50%) var(--nodeTransform);border-radius:50%;background-color:#fff;box-shadow:var(--cardShadowXSmall);opacity:0;transition:var(--movementTransition);transition-property:opacity,transform}.ConnectFlowDiagram__arrow{--arrowTransform:translate(0);position:absolute;top:calc(50% - 4px);left:50%;opacity:0;transition:opacity var(--arrowFadeTransition,var(--arrowFadeOut)),transform var(--movementTransition)}.ConnectFlowDiagram__arrowAnimation{display:block;width:var(--arrowWidth,var(--arrowWidthFull));height:8px;background:var(--arrowGradient);clip-path:path("M -32 0 -26 4 -32 8 M -21 0 -15 4 -21 8 M -10 0 -4 4 -10 8 M 1 0 7 4 1 8 M 12 0 18 4 12 8 M 23 0 29 4 23 8 M 34 0 40 4 34 8 M 45 0 51 4 45 8 M 56 0 62 4 56 8 M 67 0 73 4 67 8 M 78 0 84 4 78 8 M 89 0 95 4 89 8");animation:var(--arrowAnimation,var(--arrowAnimationLinear))}.ConnectFlowDiagram__arrow--bankToPlatform{--arrowGradient:linear-gradient(90deg,var(--colorGold),var(--colorTeal));transform:var(--arrowRight)}.ConnectFlowDiagram__arrow--buyerToSeller,.ConnectFlowDiagram__arrow--subscriberToSeller{--arrowGradient:linear-gradient(90deg,var(--colorBlue),var(--colorCyan));transform:var(--arrowLeft)}.ConnectFlowDiagram__arrow--subscriberToSeller{--arrowAnimation:var(--arrowAnimationBounce)}.ConnectFlowDiagram__arrow--buyerToPlatform{--arrowGradient:linear-gradient(90deg,var(--colorBlue),var(--colorTeal));transform:var(--arrowLeft)}.ConnectFlowDiagram__arrow--rightToSeller{--arrowWidth:var(--arrowWidthHalf);--arrowGradient:linear-gradient(270deg,var(--colorCyan),var(--colorTeal) 200%);transform:var(--arrowRightIn)}.ConnectFlowDiagram__arrow--leftToPlatform{--arrowWidth:var(--arrowWidthHalf);--arrowGradient:linear-gradient(90deg,var(--colorCyan) -100%,var(--colorTeal));transform:var(--arrowRightOut)}.ConnectFlowDiagram__arrow--platformToSeller{--arrowGradient:linear-gradient(90deg,var(--colorTeal),var(--colorCyan));transform:var(--arrowRight)}.ConnectFlowDiagram__arrow--platformToSellerTopRight{--arrowGradient:linear-gradient(90deg,var(--colorTeal),var(--colorCyan));transform:var(--arrowTopRight);transform-origin:center left}.ConnectFlowDiagram__arrow--platformToSellerBottomRight{--arrowGradient:linear-gradient(90deg,var(--colorTeal),var(--colorCyan));transform-origin:center left;transform:var(--arrowBottomRight)}.ConnectFlowDiagram__arrow--sellerToPlatform{--arrowGradient:linear-gradient(90deg,var(--colorCyan),var(--colorTeal));transform:var(--arrowRight) var(--arrowTransform)}.ConnectFlowDiagram__icon{position:absolute;top:0;left:0;overflow:hidden;border-radius:50%;box-shadow:0 0 0 3px #fff;transform:translate(-50%,-50%) var(--iconTransform,scale(.5));opacity:0;transition:var(--iconTransition,var(--iconFadeOut));transition-property:opacity,transform}.ConnectFlowDiagram__icon svg{display:block}.ConnectFlowDiagram__icon--instant{left:calc(var(--nodeDistance)/2)}.ConnectFlowDiagram__icon--instant .ConnectFlowDiagram__iconPath{animation:var(--iconInstantAnimation)}.ConnectFlowDiagram__icon--subscription{left:calc(var(--nodeDistance)/-2)}.ConnectFlowDiagram__icon--subscription .ConnectFlowDiagram__iconPath{animation:var(--iconSpinAnimation);transform-origin:center}.ConnectFlowDiagram--directCharges .ConnectFlowDiagram__arrow--buyerToSeller,.ConnectFlowDiagram--directCharges .ConnectFlowDiagram__arrow--sellerToPlatform{--arrowFadeTransition:var(--arrowFadeIn);opacity:1}.ConnectFlowDiagram--directCharges .ConnectFlowDiagram__node--buyer{--nodeTransform:var(--nodeTransformLeft);opacity:1}.ConnectFlowDiagram--directCharges .ConnectFlowDiagram__node--seller{--nodeTransform:var(--nodeTransformCenter);opacity:1}.ConnectFlowDiagram--directCharges .ConnectFlowDiagram__node--platform{--nodeTransform:var(--nodeTransformRight);opacity:1}.ConnectFlowDiagram--destinationCharges .ConnectFlowDiagram__arrow--buyerToPlatform,.ConnectFlowDiagram--destinationCharges .ConnectFlowDiagram__arrow--platformToSeller{--arrowFadeTransition:var(--arrowFadeIn);opacity:1}.ConnectFlowDiagram--destinationCharges .ConnectFlowDiagram__node--buyer{--nodeTransform:var(--nodeTransformLeft);opacity:1}.ConnectFlowDiagram--destinationCharges .ConnectFlowDiagram__node--platform{--nodeTransform:var(--nodeTransformCenter);opacity:1}.ConnectFlowDiagram--destinationCharges .ConnectFlowDiagram__node--seller{--nodeTransform:var(--nodeTransformRight);opacity:1}.ConnectFlowDiagram--separateCharges .ConnectFlowDiagram__arrow--buyerToPlatform,.ConnectFlowDiagram--separateCharges .ConnectFlowDiagram__arrow--platformToSeller,.ConnectFlowDiagram--separateCharges .ConnectFlowDiagram__arrow--platformToSellerBottomRight,.ConnectFlowDiagram--separateCharges .ConnectFlowDiagram__arrow--platformToSellerTopRight{--arrowFadeTransition:var(--arrowFadeIn);opacity:1}.ConnectFlowDiagram--separateCharges .ConnectFlowDiagram__node--buyer{--nodeTransform:var(--nodeTransformLeft);opacity:1}.ConnectFlowDiagram--separateCharges .ConnectFlowDiagram__node--platform{--nodeTransform:var(--nodeTransformCenter);opacity:1}.ConnectFlowDiagram--separateCharges .ConnectFlowDiagram__node--sellerTop{--nodeTransform:var(--nodeTransformTopRight);opacity:1}.ConnectFlowDiagram--separateCharges .ConnectFlowDiagram__node--seller{--nodeTransform:var(--nodeTransformRight);opacity:1}.ConnectFlowDiagram--separateCharges .ConnectFlowDiagram__node--sellerBottom{--nodeTransform:var(--nodeTransformBottomRight);opacity:1}.ConnectFlowDiagram--payouts .ConnectFlowDiagram__arrow--platformToSeller,.ConnectFlowDiagram--payouts .ConnectFlowDiagram__arrow--platformToSellerBottomRight,.ConnectFlowDiagram--payouts .ConnectFlowDiagram__arrow--platformToSellerTopRight{--arrowFadeTransition:var(--arrowFadeIn);opacity:1}.ConnectFlowDiagram--payouts .ConnectFlowDiagram__nodeContainer{transform:var(--nodeContainerTwoColumn)}.ConnectFlowDiagram--payouts .ConnectFlowDiagram__node--platform{--nodeTransform:var(--nodeTransformCenter);opacity:1}.ConnectFlowDiagram--payouts .ConnectFlowDiagram__node--sellerTop{--nodeTransform:var(--nodeTransformTopRight);opacity:1}.ConnectFlowDiagram--payouts .ConnectFlowDiagram__node--seller{--nodeTransform:var(--nodeTransformRight);opacity:1}.ConnectFlowDiagram--payouts .ConnectFlowDiagram__node--sellerBottom{--nodeTransform:var(--nodeTransformBottomRight);opacity:1}.ConnectFlowDiagram--instantPayouts .ConnectFlowDiagram__arrow--platformToSeller{--arrowFadeTransition:var(--arrowFadeIn);opacity:1}.ConnectFlowDiagram--instantPayouts .ConnectFlowDiagram__icon--instant{--iconTransition:var(--iconFadeIn);--iconTransform:scale(1);opacity:1}.ConnectFlowDiagram--instantPayouts .ConnectFlowDiagram__nodeContainer{transform:var(--nodeContainerTwoColumn)}.ConnectFlowDiagram--instantPayouts .ConnectFlowDiagram__node--platform{--nodeTransform:var(--nodeTransformCenter);opacity:1}.ConnectFlowDiagram--instantPayouts .ConnectFlowDiagram__node--seller{--nodeTransform:var(--nodeTransformRight);opacity:1}.ConnectFlowDiagram--topUps .ConnectFlowDiagram__arrow--bankToPlatform{--arrowFadeTransition:var(--arrowFadeIn);opacity:1}.ConnectFlowDiagram--topUps .ConnectFlowDiagram__nodeContainer{transform:var(--nodeContainerTwoColumn)}.ConnectFlowDiagram--topUps .ConnectFlowDiagram__node--bank{--nodeTransform:var(--nodeTransformCenter);opacity:1}.ConnectFlowDiagram--topUps .ConnectFlowDiagram__node--platform{--nodeTransform:var(--nodeTransformRight);opacity:1}.ConnectFlowDiagram--subscriptions .ConnectFlowDiagram__arrow--sellerToPlatform,.ConnectFlowDiagram--subscriptions .ConnectFlowDiagram__arrow--subscriberToSeller{--arrowFadeTransition:var(--arrowFadeIn);opacity:1}.ConnectFlowDiagram--subscriptions .ConnectFlowDiagram__icon--subscription{--iconTransition:var(--iconFadeIn);--iconTransform:scale(1);opacity:1}.ConnectFlowDiagram--subscriptions .ConnectFlowDiagram__node--buyer{--nodeTransform:var(--nodeTransformLeft);opacity:1}.ConnectFlowDiagram--subscriptions .ConnectFlowDiagram__node--seller{--nodeTransform:var(--nodeTransformCenter);opacity:1}.ConnectFlowDiagram--subscriptions .ConnectFlowDiagram__node--platform{--nodeTransform:var(--nodeTransformRight);opacity:1}.ConnectFlowDiagram--accountDebits .ConnectFlowDiagram__arrow--sellerToPlatform{--arrowFadeTransition:var(--arrowFadeIn);--arrowTransform:var(--arrowFlip);opacity:1}.ConnectFlowDiagram--accountDebits .ConnectFlowDiagram__nodeContainer{transform:var(--nodeContainerTwoColumn)}.ConnectFlowDiagram--accountDebits .ConnectFlowDiagram__node--platform{--nodeTransform:var(--nodeTransformCenter);opacity:1}.ConnectFlowDiagram--accountDebits .ConnectFlowDiagram__node--seller{--nodeTransform:var(--nodeTransformRight);opacity:1}