.hero.hero-connected {
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(0, .9fr) minmax(670px, 1.1fr);
  width: min(100%, 1510px);
  min-height: 730px;
  gap: clamp(34px, 4vw, 68px);
  overflow: hidden;
  padding-top: clamp(72px, 7vw, 104px);
  background:
    radial-gradient(circle at 78% 48%, rgba(0, 129, 136, .07), transparent 31%),
    linear-gradient(112deg, #fff 0%, #fff 43%, #f5f8f7 100%);
}

.hero-connected::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 5% 10% auto;
  width: 42%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 129, 136, .28), transparent);
}

.hero-connected .hero-copy { position: relative; z-index: 2; max-width: 690px; }
.hero-connected h1 { max-width: 760px; font-size: clamp(57px, 5.8vw, 88px); }
.hero-connected .hero-lede { max-width: 675px; margin-bottom: 22px; }
.hero-service-note { max-width: 655px; margin: 0 0 31px; padding-left: 19px; border-left: 2px solid var(--teal-accessible); color: #536076; font-size: 13px; line-height: 1.62; }
.hero-service-note strong { color: var(--midnight); }

.hero-interface { position: relative; z-index: 1; width: min(100%, 780px); margin: 0; }
.hero-interface::before { content: ""; position: absolute; z-index: -1; inset: 18% 16%; border-radius: 50%; background: rgba(84, 212, 198, .07); filter: blur(34px); }

.hero-interface-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(170px, .9fr) minmax(225px, 1.15fr) minmax(176px, .95fr);
  gap: clamp(38px, 4vw, 66px);
  align-items: center;
  min-height: 512px;
}

.hero-interface-lines { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hero-interface-sources,
.hero-interface-engine,
.hero-interface-outcomes { position: relative; z-index: 1; min-width: 0; }

.hero-interface-heading { margin: 0 0 15px; color: #73817f; font-size: 9px; font-weight: 780; letter-spacing: .13em; text-transform: uppercase; }
.hero-interface-row,
.hero-interface-output { display: flex; align-items: center; min-height: 70px; border-bottom: 1px solid rgba(15, 23, 40, .12); background: rgba(255, 255, 255, .76); }
.hero-interface-row { gap: 12px; padding: 9px 8px 9px 2px; }
.hero-interface-output { gap: 12px; padding: 9px 2px 9px 8px; }
.hero-interface-row:first-of-type,
.hero-interface-output:first-of-type { border-top: 1px solid rgba(15, 23, 40, .12); }

.hero-interface-row strong,
.hero-interface-output strong { display: block; color: #0f1728; font-size: 12px; font-weight: 760; line-height: 1.25; }
.hero-interface-row small,
.hero-interface-output small { display: block; margin-top: 4px; color: #677287; font-size: 9px; line-height: 1.35; }
.hero-interface-dot { width: 7px; height: 7px; flex: 0 0 7px; background: var(--interface-color, #008188); }
.hero-interface-output > span { width: 7px; height: 7px; flex: 0 0 7px; background: #008188; }
.hero-interface-output:first-of-type > span { background: #f25543; }

.hero-interface-core { position: relative; padding: 29px 13px 26px; background: #000; color: #f8f8f6; text-align: center; box-shadow: 0 26px 70px rgba(5, 20, 25, .12); }
.hero-interface-core::before,
.hero-interface-core::after { content: ""; position: absolute; top: 46px; bottom: 30px; width: 17px; border-color: rgba(0, 129, 136, .4); border-style: solid; }
.hero-interface-core::before { left: -18px; border-width: 1px 0 1px 1px; }
.hero-interface-core::after { right: -18px; border-width: 1px 1px 1px 0; }
.hero-interface-kicker { color: #86b5b0; font-size: 8px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.hero-interface-logo { position: relative; width: 168px; margin: 24px auto 20px; }
.hero-interface-logo img { display: block; width: 100%; height: auto; }
.hero-interface-logo svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero-interface-core h2 { max-width: 225px; margin: 0 auto; color: #f8f8f6; font-size: clamp(19px, 1.7vw, 25px); font-weight: 710; letter-spacing: -.035em; line-height: 1.15; }
.hero-interface-core > p { max-width: 195px; margin: 12px auto 0; color: #92a4a1; font-size: 9px; line-height: 1.5; }

.hero-interface-path { fill: none; stroke-width: 1.15; opacity: .42; }
.hero-interface-particle { pointer-events: none; filter: drop-shadow(0 0 3px rgba(84, 212, 198, .38)); }
.hero-interface-logo-route { fill: none; stroke-width: 2.2; stroke-linecap: round; opacity: .82; }
.hero-interface-logo-particle { filter: drop-shadow(0 0 3px currentColor); }
.hero-interface-junction { transition: opacity .12s linear; }
.hero-interface figcaption { max-width: 500px; margin: 4px 0 0 auto; color: #657187; font-size: 9px; font-weight: 700; letter-spacing: .07em; line-height: 1.55; text-align: right; text-transform: uppercase; }
.hero-interface.is-paused .hero-interface-particle,
.hero-interface.is-paused .hero-interface-logo-particle { display: none; }

@media (max-width: 1260px) {
  .hero.hero-connected { grid-template-columns: minmax(0, .9fr) minmax(600px, 1.1fr); gap: 32px; }
  .hero-interface-stage { gap: 38px; }
}

@media (max-width: 1080px) {
  .hero.hero-connected { grid-template-columns: 1fr; gap: 44px; min-height: 0; }
  .hero-connected .hero-copy { max-width: 850px; }
  .hero-interface { width: min(100%, 900px); justify-self: center; }
  .hero-interface-stage { grid-template-columns: minmax(185px, .9fr) minmax(255px, 1.15fr) minmax(190px, .95fr); gap: 62px; }
  .hero-interface figcaption { max-width: 570px; }
}

@media (max-width: 720px) {
  .hero.hero-connected { padding: 62px 22px 48px; background: radial-gradient(circle at 50% 80%, rgba(0, 129, 136, .08), transparent 35%), #fff; }
  .hero-connected h1 { font-size: clamp(50px, 14vw, 68px); }
  .hero-service-note { font-size: 12px; }
  .hero-interface { width: 100%; }
  .hero-interface-stage { grid-template-columns: 1fr; gap: 46px; min-height: 0; }
  .hero-interface-sources,
  .hero-interface-outcomes { width: calc(100% - 22px); }
  .hero-interface-outcomes { margin-left: 22px; }
  .hero-interface-engine { width: min(78%, 285px); justify-self: center; }
  .hero-interface-row,
  .hero-interface-output { min-height: 62px; }
  .hero-interface-row strong,
  .hero-interface-output strong { font-size: 13px; }
  .hero-interface-row small,
  .hero-interface-output small { font-size: 10px; }
  .hero-interface-core { padding: 26px 12px 24px; }
  .hero-interface-logo { width: 142px; margin: 20px auto 16px; }
  .hero-interface-core h2 { font-size: 23px; }
  .hero-interface figcaption { max-width: 310px; margin-top: 22px; font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-interface-particle,
  .hero-interface-logo-particle { display: none !important; }
  .hero-interface-junction { opacity: .68 !important; }
}

@media (forced-colors: active) {
  .hero-interface-path,
  .hero-interface-logo-route { stroke: CanvasText; }
  .hero-interface-core { border: 1px solid CanvasText; }
  .hero-interface-row,
  .hero-interface-output { border-color: CanvasText; background: Canvas; }
}