/* Local, vector-based collaboration animation; no external video or embeds. */
.productivity-hero-visual{position:relative;aspect-ratio:2048/1837;container-type:inline-size;isolation:isolate;color:#485156}
.workspace-animation{position:absolute;inset:0 0 9%;overflow:hidden}
.workspace-halo{position:absolute;left:15%;top:16%;width:70%;aspect-ratio:1;border:22px solid #f04c23;border-width:4.5cqw;border-radius:50%;opacity:.9;box-sizing:border-box}
.workspace-dot{position:absolute;aspect-ratio:1;border-radius:50%;opacity:.3}
.workspace-dot-blue{width:28%;left:3%;top:52%;background:#4285f4}.workspace-dot-yellow{width:24%;right:4%;top:16%;background:#fbbc04}.workspace-dot-green{width:20%;right:9%;bottom:8%;background:#34a853}
.workspace-chat{display:none;position:absolute;z-index:3;left:16%;top:32%;width:68%;padding:5%;border-radius:20px;background:white;box-shadow:0 12px 40px #26374815;box-sizing:border-box}
.workspace-chat-row{display:flex;gap:4%;align-items:center;font-size:clamp(12px,2.9cqw,18px);line-height:1.4}.workspace-chat-row+.workspace-chat-row{margin-top:7%}.workspace-chat-row strong{display:block;font-size:.78em;margin-bottom:3px}.workspace-avatar{display:grid;place-items:center;flex:none;width:13%;aspect-ratio:1;border-radius:50%;background:#e5edfb;color:#255baf;font-weight:600}.workspace-avatar.orange{background:#ffe8df;color:#b44223}
.workspace-app{position:absolute;z-index:4;display:grid;place-items:center;width:13%;aspect-ratio:1;border-radius:50%;background:white;box-shadow:0 6px 25px #26374815}
.workspace-app img{display:block;width:54%;height:54%;object-fit:contain}
.workspace-app.gmail{left:5%;top:28%;--dx:105%;--dy:130%}.workspace-app.meet{right:7%;top:10%;--dx:-110%;--dy:160%}.workspace-app.docs{right:2%;top:49%;--dx:-130%;--dy:-40%}.workspace-app.drive{right:18%;bottom:2%;--dx:-40%;--dy:-130%}.workspace-app.chat{left:21%;top:7%;--dx:65%;--dy:160%}.workspace-app.calendar{left:4%;bottom:10%;--dx:110%;--dy:-70%}
.workspace-board{position:absolute;z-index:2;left:15%;top:27%;width:70%;height:56%;border-radius:13px;background:white;box-shadow:0 15px 45px #2637481c;overflow:hidden}
.workspace-board-top{height:15%;padding:0 5%;border-bottom:1px solid #edf0f1;display:flex;align-items:center;gap:3%;font-size:clamp(10px,2.2cqw,15px);font-weight:600}.workspace-board-top img{width:7%;height:60%;object-fit:contain}.workspace-board-status{margin-left:auto;width:7px;height:7px;background:#34a853;border-radius:50%}
.workspace-board-body{height:85%;display:grid;grid-template-columns:18% 1fr}.workspace-sidebar{background:#fafbfc;border-right:1px solid #edf0f1;padding:20% 24%;display:flex;flex-direction:column;gap:15%}.workspace-sidebar img{display:block;width:100%;height:13%;object-fit:contain}
.workspace-document{padding:7%;font-size:clamp(10px,2cqw,14px)}.workspace-document strong{font-family:Manrope,Arial,sans-serif;font-size:1.35em;color:#202427}.workspace-document p{margin:6% 0;font-size:1em;color:#657077}.workspace-line{display:block;width:94%;height:5px;background:#edf0f1;margin:7% 0;border-radius:3px}.workspace-line.short{width:65%}.workspace-document-footer{display:flex;gap:7%;align-items:center;margin-top:10%;font-size:.85em}.workspace-document-footer img{width:11%;height:auto}.workspace-document-footer span{background:#e8f3eb;padding:4% 7%;border-radius:20px;color:#317343}
.workspace-meeting{position:absolute;z-index:5;left:3%;bottom:8%;width:26%;padding:3%;background:#485156;border:4px solid white;border-radius:12px;box-shadow:0 8px 24px #26374817;box-sizing:border-box}.workspace-meeting-people{display:flex;gap:8%;justify-content:center}.workspace-meeting-people span{display:grid;place-items:center;width:44%;aspect-ratio:1;background:#dae7fb;border-radius:8px;color:#255baf;font-size:clamp(12px,3.5cqw,22px)}.workspace-meeting-people span+span{background:#ffe8df;color:#b44223}.workspace-meeting p{margin:8% 0 0;color:white;text-align:center;font-size:clamp(9px,1.7cqw,12px)}
 .workspace-caption{position:absolute;left:0;bottom:0;right:0;padding:0 3%;font-size:14px;font-weight:500}
@keyframes workspace-chat{0%,5%{opacity:0;transform:translateY(12px) scale(.92)}10%,27%{opacity:1;transform:none}37%,100%{opacity:0;transform:scale(.3)}}
@keyframes workspace-reply{0%,14%{opacity:0;transform:translateY(8px)}21%,100%{opacity:1;transform:none}}
@keyframes workspace-halo{0%,7%{opacity:0;transform:scale(.65)}13%,28%{opacity:.9;transform:scale(.75)}45%,100%{opacity:.9;transform:none}}
@keyframes workspace-app{0%,22%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.35)}38%,100%{opacity:1;transform:none}}
@keyframes workspace-board{0%,35%{opacity:0;transform:translateY(15px) scale(.5)}48%,100%{opacity:1;transform:none}}
@keyframes workspace-meeting{0%,48%{opacity:0;transform:translateY(15px) scale(.7)}58%,100%{opacity:1;transform:none}}
/* One slower ten-second sequence, then the static composition. No-JS is static. */
.productivity-hero-visual.running .workspace-chat{display:block;animation:workspace-chat 10s ease-in-out 1 both}
.productivity-hero-visual.running .workspace-chat-row+.workspace-chat-row{animation:workspace-reply 10s ease-in-out 1 both}
.productivity-hero-visual.running .workspace-halo{animation:workspace-halo 10s ease-in-out 1 both}
.productivity-hero-visual.running .workspace-app{animation:workspace-app 10s ease-in-out 1 both}
.productivity-hero-visual.running .workspace-board{animation:workspace-board 10s ease-in-out 1 both}
.productivity-hero-visual.running .workspace-meeting{animation:workspace-meeting 10s ease-in-out 1 both}
.homepage-refresh .solutions .family-workspace{width:100%;max-width:460px;justify-self:center}
@media(max-width:650px){.productivity-hero-visual{max-width:520px;width:100%;margin-inline:auto}.workspace-caption{font-size:12px}.homepage-refresh .solutions .family-workspace{max-width:360px}}
@media(prefers-reduced-motion:reduce){.workspace-animation *{animation:none!important}.productivity-hero-visual.running .workspace-chat{display:none}.workspace-halo{opacity:.9}}

/* The artwork itself is the pause control while moving; no separate button. */
.productivity-hero-visual.running,.network-hero-visual.running{cursor:pointer}
.productivity-hero-visual:focus-visible,.network-hero-visual:focus-visible{outline:2px solid #f04c23;outline-offset:6px;border-radius:12px}
.productivity-hero-visual.paused *,.network-hero-visual.paused *{animation-play-state:paused!important}