.section-connections {
  background: var(--white, #fff);
  padding-block: clamp(54px, 6.2vw, 88px);
}
.connections-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.connections-copy { min-width: 0; }
.connections-copy .section-heading h2 { max-width: 18ch; }
.connections-copy .section-copy { max-width: 540px; margin-top: 24px; }
.connections-figure {
  min-width: 0;
  width: 100%;
  max-width: 560px;
  margin: 0;
  justify-self: end;
}
.connections-diagram { display: block; width: 100%; height: auto; overflow: visible; }
.connection-line,
.connection-signal {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.connection-line { stroke: #a5afd0; stroke-width: 1.2; }
.connection-node { fill: var(--blue, #3046f3); }
.connection-labels {
  fill: var(--ink, #111638);
  font-family: var(--font, Manrope, Arial, sans-serif);
  font-size: 20px;
  font-weight: 550;
  letter-spacing: -.025em;
}
.connection-signal {
  stroke: var(--blue, #3046f3);
  stroke-width: 2;
  stroke-dasharray: 18 100;
  stroke-dashoffset: 18;
  opacity: 0;
}
.connections-figure.is-connected .connection-signal {
  animation: connections-highlight 1.35s ease-out 1 both;
}
.connections-figure.is-connected .connection-signal-2 { animation-delay: .1s; }
.connections-figure.is-connected .connection-signal-3 { animation-delay: .2s; }
.connections-figure.is-connected .connection-signal-4 { animation-delay: .3s; }
.connections-figure.is-connected .connection-signal-5 { animation-delay: .4s; }
.connections-figure figcaption {
  color: var(--muted, #555c78);
  font-size: 12px;
  line-height: 1.75;
  max-width: 48ch;
  margin-top: 16px;
}
.connections-link { margin-top: 14px; }
@keyframes connections-highlight {
  0% { opacity: 0; stroke-dashoffset: 18; }
  12% { opacity: 1; }
  82% { opacity: 1; }
  100% { opacity: 0; stroke-dashoffset: -100; }
}
@media (max-width: 900px) {
  .connections-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .connections-copy .section-heading h2 { max-width: 22ch; }
  .connections-figure { max-width: 520px; justify-self: center; }
}
@media (max-width: 760px) {
  .section-connections { padding-block: 46px 48px; }
  .connections-layout { gap: 26px; }
  .connections-copy .section-heading h2 { max-width: 19ch; }
  .connections-figure figcaption { margin-top: 12px; font-size: 12px; }
  .connections-link { margin-top: 10px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .connections-figure.is-connected .connection-signal { animation: none; opacity: 0; }
}
@media print {
  .section-connections { padding-block: 24px; }
  .connections-layout { break-inside: avoid; }
  .connection-signal { display: none; }
}