/* Premium homepage connected-operations proof. */
.vp-connections .co-visual {
  position: relative;
  overflow: hidden;
  border: 1px solid #d4daea;
  border-radius: 24px 24px 0 0;
  background: #e8f0ff;
  min-height: 420px;
}

.co-visual picture,
.co-visual picture img {
  display: block;
  width: 100%;
  height: 100%;
}

.co-visual picture img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.co-trace-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.co-trace-overlay path {
  fill: none;
  stroke: rgba(255,255,255,.92);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: .055 .035;
  opacity: 0;
}

.vp-connections:has(.fin-running) .co-trace-overlay path {
  animation: co-trace 1.75s cubic-bezier(.22,.7,.2,1) both;
}

.co-stage-labels {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.1rem;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: .65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.co-stage-labels li {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  padding: .7rem .85rem;
  color: #321962;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(50,25,98,.15);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(50,25,98,.1);
  backdrop-filter: blur(8px);
}

.co-stage-labels span {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  height: 30px;
  color: #fff;
  background: #4361ee;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
}

.co-stage-labels b {font-size: clamp(.82rem,1.25vw,1rem)}
.vp-connections > .fin-diagram {border-radius: 0 0 24px 24px;border-top: 0}

@keyframes co-trace {
  0% {stroke-dashoffset: 1;opacity:0}
  12% {opacity:.95}
  75% {stroke-dashoffset:0;opacity:.95}
  100% {stroke-dashoffset:0;opacity:0}
}

@media(max-width:760px){
  .vp-connections .co-visual{min-height:0;border-radius:14px 14px 0 0}
  .co-stage-labels{position:relative;left:auto;right:auto;bottom:auto;grid-template-columns:repeat(2,minmax(0,1fr));padding:.8rem;background:#fff;gap:.55rem}
  .co-stage-labels li{padding:.6rem .7rem;box-shadow:none;background:#f5f8ff}
  .co-trace-overlay{height:auto;aspect-ratio:3/2}
  .vp-connections > .fin-diagram{border-radius:0 0 14px 14px}
}

@media(max-width:390px){.co-stage-labels{grid-template-columns:1fr}.co-stage-labels b{font-size:.92rem}}

@media(prefers-reduced-motion:reduce){.co-trace-overlay{display:none}}
html.motion-off .co-trace-overlay{display:none}

@media(forced-colors:active){
  .vp-connections .co-visual,.co-stage-labels,.co-stage-labels li{background:Canvas;color:CanvasText;border-color:CanvasText;box-shadow:none;backdrop-filter:none}
  .co-stage-labels span{background:Highlight;color:HighlightText}
  .co-trace-overlay{display:none}
}