/* The service sequence floats within the space beside the hero copy. */
.hero-art.network-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.hero-art.network-hero::after {
  display: none;
}
.network-hero-scene {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: min(440px, 100%);
  aspect-ratio: 1;
  container-type: inline-size;
}
.network-hero-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 14%, 85% 91%, 15% 91%);
  background: linear-gradient(155deg, #92c17a1c, #0a482a18 60%, #c0e4a50d);
}
.network-hero-triangle, .network-hero-flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.network-hero-triangle {
  filter: drop-shadow(0 5px 14px #0003);
}
.network-hero-flow {
  overflow: visible;
}
.network-hero-packet {
  display: none;
}
.network-hero.is-enhanced .network-hero-packet {
  display: inline;
}
.network-hero-slide {
  position: absolute;
  inset: 43% 17% 12%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  gap: 3.38cqi;
  text-align: center;
  color: #fff;
}
.network-hero-slide[hidden], .network-hero-controls[hidden] {
  display: none;
}
.network-hero-icon {
  display: block;
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  width: 17.465cqi;
  height: 17.465cqi;
  overflow: visible;
}
.network-hero-title {
  display: grid;
  align-content: center;
  flex: 0 0 auto;
  min-height: 46px;
  font-size: 19px;
  min-height: 12.958cqi;
  font-size: 5.352cqi;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.015em;
}
.network-hero-slide.is-entering {
  animation: network-service-enter 320ms ease-out both;
}
.network-hero-controls {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  flex: 0 0 48px;
}
.network-hero-count {
  color: #fff;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  margin-right: 12px;
}
.network-hero-count span {
  opacity: .5;
}
.network-hero-controls button {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid #d1e9c632;
  border-radius: 8px;
  padding: 0;
  background: #e7f7de08;
  color: #fff;
  font: inherit;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.network-hero-controls .network-hero-toggle {
  width: 74px;
  font-size: 13px;
  font-weight: 700;
}
.network-hero-controls button:hover {
  background: #bbdeb51a;
  border-color: #d1e9c66b;
}
.network-hero-controls button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
@keyframes network-service-enter {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 480px) {
  .network-hero-controls { gap: 6px; height: 44px; flex-basis: 44px; }
  .network-hero-count { font-size: 13px; margin-right: 10px; }
  .network-hero-controls button { width: 44px; height: 44px; font-size: 25px; }
  .network-hero-controls .network-hero-toggle { width: 66px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .network-hero-slide.is-entering { animation: none; }
  .network-hero.is-enhanced .network-hero-packet { display: none; }
}
@media print {
  .network-hero-controls, .network-hero-flow { display: none; }
  .network-hero-slide.is-entering { animation: none; }
}