/* Preserve the existing equipment artwork and animate its connection points. */
.network-hero-visual{position:relative;aspect-ratio:2048/1837;isolation:isolate}
.network-animation{position:absolute;inset:0 0 8%;overflow:hidden}
.network-montage{position:absolute;inset:0}
.network-montage img{display:block;width:100%;height:100%;object-fit:contain;padding:3%;box-sizing:border-box}
.network-beacon{position:absolute;width:8%;aspect-ratio:1;border:2px solid #f04c23;border-radius:50%;box-sizing:border-box;opacity:0;pointer-events:none}
.network-beacon.cabinet{left:24%;top:40%}
.network-beacon.ceiling{left:24%;top:73%}
.network-beacon.wall{left:44%;top:77%}
.network-beacon.outdoor{left:62%;top:77%}
.network-status{position:absolute;top:7%;right:5%;display:flex;gap:7px;align-items:center;padding:8px 12px;background:#ffffffed;border:1px solid #e0e5e6;border-radius:24px;box-shadow:0 4px 18px #2637480a;color:#485156;font-size:clamp(10px,1vw,13px);font-weight:500}
.network-status i{width:6px;height:6px;background:#34a853;border-radius:50%}
.network-caption{position:absolute;bottom:0;left:0;right:0;padding:0 3%;font-size:14px;font-weight:500;color:#485156}
.network-hero-visual.running .network-montage{animation:network-reveal 4.8s ease-in-out 2 both}
.network-hero-visual.running .network-beacon.cabinet{animation:network-cabinet 4.8s ease-out 2 both}
.network-hero-visual.running .network-beacon.ceiling{animation:network-ceiling 4.8s ease-out 2 both}
.network-hero-visual.running .network-beacon.wall{animation:network-wall 4.8s ease-out 2 both}
.network-hero-visual.running .network-beacon.outdoor{animation:network-outdoor 4.8s ease-out 2 both}
.network-hero-visual.running .network-status{animation:network-status 4.8s ease-in-out 2 both}
@keyframes network-reveal{0%{opacity:.2;transform:translateY(12px) scale(.97)}28%,100%{opacity:1;transform:none}}
@keyframes network-cabinet{0%,12%{opacity:0;transform:scale(.4)}22%{opacity:.65}50%,100%{opacity:0;transform:scale(1.9)}}
@keyframes network-ceiling{0%,28%{opacity:0;transform:scale(.4)}38%{opacity:.65}68%,100%{opacity:0;transform:scale(1.9)}}
@keyframes network-wall{0%,36%{opacity:0;transform:scale(.4)}46%{opacity:.65}76%,100%{opacity:0;transform:scale(1.9)}}
@keyframes network-outdoor{0%,44%{opacity:0;transform:scale(.4)}54%{opacity:.65}84%,100%{opacity:0;transform:scale(1.9)}}
@keyframes network-status{0%,55%{opacity:0;transform:translateY(6px)}72%,100%{opacity:1;transform:none}}
.homepage-refresh .solutions :is(.family-network,.family-camera,.family-phone){width:100%;max-width:460px;justify-self:center}
@media(max-width:650px){.network-hero-visual{max-width:520px;width:100%;margin-inline:auto}.network-caption{font-size:12px}.homepage-refresh .solutions :is(.family-network,.family-camera,.family-phone){max-width:360px}}
@media(prefers-reduced-motion:reduce){.network-animation *{animation:none!important}}

/* Homepage: match Productivity's floating-elements-to-workspace sequence. */
.network-assembly{container-type:inline-size}
.network-assembly-card,.network-assembly-halo,.network-orbit{display:none}
.network-assembly.running .network-assembly-halo{display:block;position:absolute;left:15%;top:15%;width:70%;aspect-ratio:1;border:4.5cqw solid #f04c23;box-sizing:border-box;border-radius:50%;animation:network-assembly-halo 10s ease-in-out 1 both}
.network-assembly.running .network-assembly-card{display:block;position:absolute;z-index:3;left:16%;top:31%;width:68%;padding:5%;box-sizing:border-box;border-radius:20px;background:white;box-shadow:0 12px 40px #26374815;animation:network-assembly-card 10s ease-in-out 1 both}
.network-assembly-card strong{display:block;color:#202427;font-family:Manrope,Arial,sans-serif;font-size:clamp(13px,3cqw,19px);text-align:center}
.network-diagram{position:relative;display:flex;justify-content:space-between;margin:12% 3% 0;padding-top:9%;border-top:1px solid #dce3e5}
.network-diagram::before{content:"";position:absolute;top:-16px;left:50%;height:16px;border-left:1px solid #dce3e5}
.network-diagram img{display:block;width:27%;height:auto;aspect-ratio:1;object-fit:contain;padding:0}
.network-assembly.running .network-orbit{display:grid;place-items:center;position:absolute;z-index:4;width:23%;aspect-ratio:1;border-radius:50%;background:white;box-shadow:0 6px 25px #26374815;animation:network-orbit 10s ease-in-out 1 both}
.network-orbit img{display:block;width:80%;height:80%;object-fit:contain;padding:0}
.phone-assembly .network-orbit{overflow:hidden}
.phone-assembly .network-orbit.mobile img{width:80%;height:80%}
.network-orbit.enterprise{left:5%;top:12%;--dx:135%;--dy:200%}
.network-orbit.ceiling{right:4%;top:15%;--dx:-200%;--dy:235%}
.network-orbit.outdoor{right:5%;bottom:9%;--dx:-40%;--dy:-25%}
.network-assembly.running .network-montage{animation:network-assembled-montage 10s ease-in-out 1 both}
.network-assembly .network-beacon{display:none}
.network-assembly.running .network-status{animation:network-assembled-status 10s ease-in-out 1 both}
@keyframes network-assembly-halo{0%,7%{opacity:0;transform:scale(.65)}13%,28%{opacity:.9;transform:scale(.75)}38%{opacity:.9;transform:none}58%,100%{opacity:0;transform:scale(.9)}}
@keyframes network-assembly-card{0%,5%{opacity:0;transform:translateY(12px) scale(.92)}10%,27%{opacity:1;transform:none}40%,100%{opacity:0;transform:scale(.3)}}
@keyframes network-orbit{0%,20%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.35)}32%,42%{opacity:1;transform:none}62%,100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.5)}}
@keyframes network-assembled-montage{0%,40%{opacity:0;transform:translateY(15px) scale(.5)}66%,100%{opacity:1;transform:none}}
@keyframes network-assembled-status{0%,67%{opacity:0;transform:translateY(6px)}84%,100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.network-assembly.running .network-assembly-card,.network-assembly.running .network-assembly-halo,.network-assembly.running .network-orbit{display:none}}