/* Project Flow's floating paper and blue ports: horizontal on desktop, vertical on mobile. */
.ui-pf-deployment{--flow-gap:40px;position:relative;isolation:isolate;margin-top:32px;border:6px solid var(--surface);border-radius:22px;background:radial-gradient(100% 160% at 100% 100%,#a7cfff 0%,#c9defd80 40%,transparent 72%),radial-gradient(90% 140% at 0 0,#c4d0ff 0%,#e6eaff 44%,transparent 76%),#f9fbff;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#91b3ee transparent;scroll-snap-type:x proximity;scroll-padding-inline:24px}
.ui-pf-deployment:focus-visible{outline:2px solid var(--classic-blue);outline-offset:5px}
.deployment-flow-steps{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--flow-gap);list-style:none;margin:0;padding:36px 24px}
.deployment-flow-steps::before{content:'';position:absolute;z-index:-1;inset:0;background-image:radial-gradient(circle,#cad4e8 .7px,transparent .9px);background-size:16px 16px;opacity:.5;mask-image:linear-gradient(transparent,#000 28%,#000 72%,transparent);pointer-events:none}
.deployment-flow-steps>li{position:relative;min-width:0;scroll-snap-align:start}
.deployment-flow-card{position:relative;z-index:1;min-height:148px;height:100%;padding:24px 20px;border:1px solid var(--rule);border-radius:16px;background:#fff;box-shadow:var(--classic-contact),0 6px 12px -8px #00000014;transform-origin:50% 75%}
.home-content .deployment-flow-card h3{display:flex;align-items:center;gap:9px;font-family:var(--classic-ui);font-size:18px;font-weight:550;line-height:1.25;letter-spacing:-.03em}
.deployment-step-number{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border:1px solid #d6e2ff;border-radius:8px;background:var(--classic-blue-soft);color:var(--classic-blue);font-size:13px;font-weight:600;letter-spacing:-.02em}
.home-content .deployment-flow-card p{font-size:13px;line-height:1.55;margin-top:16px;max-width:210px;color:var(--body)}
.deployment-flow-link{position:absolute;left:calc(100% - 1px);top:50%;width:calc(var(--flow-gap) + 2px);height:24px;transform:translateY(-50%);overflow:visible;fill:none;stroke:#91b3ff;stroke-width:1.4}
.deployment-flow-link circle{fill:#fff;stroke:var(--classic-blue);stroke-width:1.3}
@media(prefers-reduced-motion:no-preference){
 .ui-pf-deployment[data-flow-ready]:not([data-flow-revealed]) .deployment-flow-card{opacity:0;transform:translate(-18px,-8px) rotate(-1.5deg);filter:blur(3px)}
 .ui-pf-deployment[data-flow-ready] .deployment-flow-link path{stroke-dasharray:1;stroke-dashoffset:1}
 .ui-pf-deployment[data-flow-ready] .deployment-flow-link circle{opacity:0}
 .ui-pf-deployment[data-flow-revealed] .deployment-flow-card{animation:deployment-card-in 850ms var(--classic-ease) both;animation-delay:calc(var(--step)*700ms)}
 .ui-pf-deployment[data-flow-revealed] .deployment-flow-link path{animation:deployment-line-in 460ms ease-in-out both;animation-delay:calc(var(--step)*700ms + 420ms)}
 .ui-pf-deployment[data-flow-revealed] .deployment-flow-link circle{animation:deployment-port-in 300ms ease both;animation-delay:calc(var(--step)*700ms + 420ms)}
}
@keyframes deployment-card-in{0%{opacity:0;transform:translate(-18px,-8px) rotate(-1.5deg);filter:blur(3px)}65%{opacity:1;transform:translate(1px,2px) rotate(.25deg);filter:none}100%{opacity:1;transform:none;filter:none}}
@keyframes deployment-line-in{to{stroke-dashoffset:0}}
@keyframes deployment-port-in{from{opacity:0;stroke-width:2.5}to{opacity:1;stroke-width:1.3}}
@media(max-width:1100px){.ui-pf-deployment{--flow-gap:30px}.deployment-flow-steps{grid-template-columns:repeat(4,220px);width:max-content}.deployment-flow-card{padding:24px 18px}}
@media(max-width:740px){
 .ui-pf-deployment{--flow-gap:32px;margin-top:24px;border-width:4px;border-radius:20px;overflow:clip;overscroll-behavior-x:auto;scroll-snap-type:none;scroll-padding-inline:0}
 .deployment-flow-steps{grid-template-columns:minmax(0,1fr);width:auto;padding:24px 18px}
 .deployment-flow-steps>li{scroll-snap-align:none}
 .deployment-flow-card{min-height:132px;height:auto;padding:22px 20px}
 .deployment-flow-link{left:50%;top:calc(100% + var(--flow-gap)/2);transform:translate(-50%,-50%) rotate(90deg)}
 .home-content .deployment-flow-card h3{font-size:19px}
 .home-content .deployment-flow-card p{font-size:14px;margin-top:12px;max-width:none}
}
@media(prefers-reduced-motion:reduce){.ui-pf-deployment *{animation:none!important;transition:none!important}.deployment-flow-link path{stroke-dashoffset:0}.deployment-flow-link circle{opacity:1}}