/* One fixed canvas carries the particles across sections 02–04, so they can
   travel between figures instead of being trapped in three separate ones.
   It sits above the ambient world field but below page content. */
.capability-flow{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* The frames now only reserve space and hold their captions — the art is
   drawn on the shared canvas. */
#cap-software .visual-frame,#cap-web .visual-frame,#cap-it .visual-frame{
  border:0;background:none!important;box-shadow:none;padding:0;position:relative}
#cap-software .visual-frame:before,#cap-software .visual-frame:after,
#cap-web .visual-frame:before,#cap-web .visual-frame:after,
#cap-it .visual-frame:before,#cap-it .visual-frame:after{display:none}
#cap-software .visual-head,#cap-web .visual-head,#cap-it .visual-head{padding:0 2px 14px;border-bottom:1px solid var(--line)}
#cap-software .visual-foot,#cap-web .visual-foot,#cap-it .visual-foot{padding:14px 2px 0;border-top:0;margin-top:0}
#cap-software .visual-foot span,#cap-web .visual-foot span,#cap-it .visual-foot span{padding-left:0}

/* Captions and data sit above the travelling particles. */
.capability-flow-on .visual-head,
.capability-flow-on .visual-foot,
.capability-flow-on .status-list{position:relative;z-index:1}

/* Every capability reserves its own art space, clear of the captions. */
.capability-flow-on #cap-software .stackmap{visibility:hidden}
.capability-flow-on #cap-web .flow-slot{display:block;width:100%;height:clamp(300px,30vw,430px)}
.flow-slot{display:none}
.managed-slot{display:none}
.capability-flow-on .managed-slot{display:block;width:100%;height:clamp(360px,34vw,500px)}
.capability-flow-on #cap-it .managed-fallback{display:none}
@media(max-width:960px){
  .capability-flow-on #cap-web .flow-slot{height:clamp(240px,62vw,320px)}
  .capability-flow-on .managed-slot{height:clamp(300px,92vw,420px)}
}