.network-feature {
  margin: 0;
  overflow: hidden;
  border: 1px solid #26323e;
  border-radius: 20px;
  background: #111923;
  color: #e7edf2;
}
.network-feature__media { margin: 0; }
.network-feature__media svg { display: block; width: 100%; height: auto; }
.network-feature__copy { padding: 0 30px 28px; }
.network-feature__eyebrow {
  margin: 0 0 12px;
  color: #8fcfc0;
  font-size: 11px;
  letter-spacing: .16em;
  line-height: 1.5;
}
.network-feature h3 {
  margin: 0 0 14px;
  font-size: clamp(23px, 3vw, 28px);
  line-height: 1.18;
  letter-spacing: -.035em;
  font-weight: 400;
}
.network-feature__description {
  max-width: 61ch;
  margin: 0;
  color: #aeb8c2;
  font-size: 14px;
  line-height: 1.75;
}
@media (max-width: 600px) {
  .network-feature__copy { padding: 0 22px 24px; }
  .network-feature__eyebrow { font-size: 10px; letter-spacing: .12em; }
}


    .network-feature .packet { opacity: 0; }
    .network-feature .to-right { animation: network100g-send-right 4.8s ease-in-out 1 both; }
    .network-feature .to-left { animation: network100g-send-left 4.8s ease-in-out 1 both; }
    @keyframes network100g-send-right {
      0%, 8% { stroke-dashoffset: 22; opacity: 0; }
      12% { opacity: .85; }
      64% { opacity: .85; }
      70%, 100% { stroke-dashoffset: -550; opacity: 0; }
    }
    @keyframes network100g-send-left {
      0%, 30% { stroke-dashoffset: 22; opacity: 0; }
      35% { opacity: .7; }
      90% { opacity: .7; }
      96%, 100% { stroke-dashoffset: -550; opacity: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .network-feature .packet { animation: none !important; opacity: 0 !important; }
    }
    @media (max-width: 600px) {
      .network-feature .detail-label { display: none; }
    }

.network-feature .packet { animation-play-state: paused; }
.network-feature[data-visible] .packet { animation-play-state: running; }