.journey-band {
  position: relative;
  z-index: 2;
  padding: 54px 0 64px;
  background:
    linear-gradient(rgba(37, 99, 235, .052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 118, 110, .044) 1px, transparent 1px),
    linear-gradient(180deg, #f8fbff, #eef5ff);
  background-size: 44px 44px, 44px 44px, auto;
  border-top: 1px solid rgba(216, 224, 236, .78);
  border-bottom: 1px solid rgba(216, 224, 236, .78);
  content-visibility: auto;
  contain-intrinsic-size: 900px;
}

.journey-grid {
  display: grid;
  grid-template-columns: minmax(280px, .42fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}

.journey-copy {
  display: grid;
  align-content: start;
  gap: 16px;
}

.journey-copy p:not(.eyebrow) {
  max-width: 560px;
  color: var(--muted);
  font-size: 16px;
}

.journey-steps {
  display: grid;
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.journey-steps li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 2px 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(216, 224, 236, .92);
  border-radius: 8px;
  background: rgba(255, 255, 255, .86);
  box-shadow: var(--soft-shadow);
  transition: border-color .24s ease, transform .24s ease, box-shadow .24s ease;
}

.journey-steps li[aria-current="step"] {
  border-color: rgba(37, 99, 235, .48);
  box-shadow: 0 14px 32px rgba(37, 99, 235, .12);
  transform: translateX(4px);
}

.journey-steps span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #101828;
  color: #5eead4;
  font-weight: 950;
}

.journey-steps strong {
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.15;
}

.journey-steps small {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.journey-stage {
  margin: 0;
  min-width: 0;
}

.journey-screen {
  --focus-x: 17.2%;
  --focus-y: 33.2%;
  --focus-w: 56.4%;
  --focus-h: 56.4%;
  --cursor-x: 45%;
  --cursor-y: 46%;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 40, .16);
  border-radius: 8px;
  background: #f8fbff;
  box-shadow: 0 30px 80px rgba(16, 24, 40, .16);
}

.journey-screen img {
  display: block;
  width: 100%;
  height: auto;
}

.journey-highlight {
  position: absolute;
  left: var(--focus-x);
  top: var(--focus-y);
  width: var(--focus-w);
  height: var(--focus-h);
  border: 3px solid rgba(37, 99, 235, .92);
  border-radius: 8px;
  background: rgba(37, 99, 235, .08);
  box-shadow: 0 0 0 999px rgba(15, 23, 42, .08), 0 16px 34px rgba(37, 99, 235, .18);
  transition: left .52s ease, top .52s ease, width .52s ease, height .52s ease, border-color .52s ease, background .52s ease;
  pointer-events: none;
}

.journey-cursor {
  position: absolute;
  left: var(--cursor-x);
  top: var(--cursor-y);
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #2563eb;
  box-shadow: 0 0 0 8px rgba(37, 99, 235, .18), 0 12px 26px rgba(16, 24, 40, .22);
  transform: translate(-50%, -50%);
  transition: left .52s ease, top .52s ease, background .52s ease;
  pointer-events: none;
}

.journey-caption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  max-width: 430px;
  padding: 12px 14px;
  border: 1px solid rgba(216, 224, 236, .92);
  border-radius: 8px;
  background: rgba(255, 255, 255, .94);
  color: #344054;
  box-shadow: 0 18px 44px rgba(16, 24, 40, .14);
  font-size: 14px;
  font-weight: 760;
  transition: opacity .24s ease, transform .24s ease;
}

.journey-band[data-journey-step="1"] .journey-screen {
  --focus-x: 77.2%;
  --focus-y: 63.9%;
  --focus-w: 20.9%;
  --focus-h: 6%;
  --cursor-x: 88%;
  --cursor-y: 67%;
}

.journey-band[data-journey-step="1"] .journey-highlight {
  border-color: rgba(16, 185, 129, .95);
  background: rgba(16, 185, 129, .11);
}

.journey-band[data-journey-step="1"] .journey-cursor {
  background: #10b981;
}

.journey-band[data-journey-step="2"] .journey-screen {
  --focus-x: 16.3%;
  --focus-y: 94.6%;
  --focus-w: 82.7%;
  --focus-h: 5.3%;
  --cursor-x: 24%;
  --cursor-y: 96.5%;
}

.journey-band[data-journey-step="2"] .journey-highlight {
  border-color: rgba(180, 35, 24, .92);
  background: rgba(180, 35, 24, .08);
}

.journey-band[data-journey-step="2"] .journey-cursor {
  background: #b42318;
}

.journey-band[data-journey-step="3"] .journey-screen {
  --focus-x: .5%;
  --focus-y: 71.3%;
  --focus-w: 13.8%;
  --focus-h: 27.6%;
  --cursor-x: 8%;
  --cursor-y: 91%;
}

.journey-band[data-journey-step="3"] .journey-highlight {
  border-color: rgba(15, 118, 110, .92);
  background: rgba(15, 118, 110, .1);
}

.journey-band[data-journey-step="3"] .journey-cursor {
  background: #0f766e;
}

@media (prefers-reduced-motion: reduce) {
  .journey-highlight,
  .journey-cursor,
  .journey-caption,
  .journey-steps li {
    transition: none;
  }
}

@media (max-width: 920px) {
  .journey-band {
    padding: 38px 0 46px;
    contain-intrinsic-size: 960px;
  }

  .journey-grid {
    grid-template-columns: 1fr;
  }

  .journey-steps li[aria-current="step"] {
    transform: none;
  }

  .journey-caption {
    position: static;
    max-width: none;
    border-width: 1px 0 0;
    border-radius: 0;
    box-shadow: none;
  }

  .journey-highlight,
  .journey-cursor {
    display: none;
  }
}