.adaptive-story {
  max-width: 1172px;
  margin: 18px auto 54px;
  padding: 52px 48px 48px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(204 225 233 / 78%);
  border-radius: 34px;
  background:
    radial-gradient(circle at 92% 8%, rgb(40 199 206 / 14%), transparent 27%),
    linear-gradient(145deg, #fafdfe, #edf7fa);
  box-shadow: 0 26px 70px rgb(23 106 167 / 10%);
}

.adaptive-story::before {
  content: '';
  width: 180px;
  height: 180px;
  position: absolute;
  right: -78px;
  top: -90px;
  border: 1px solid rgb(40 199 206 / 24%);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgb(40 199 206 / 5%), 0 0 0 58px rgb(22 143 199 / 4%);
}

.story-heading {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  align-items: end;
  gap: 64px;
  margin-bottom: 38px;
}

.story-heading small,
.story-steps article > small {
  color: #168fc7;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: 9px;
  font-weight: 800;
}

.story-heading h2 {
  margin: 12px 0 0;
  color: #2c3e49;
  font-size: clamp(34px, 4vw, 50px);
  line-height: .98;
  letter-spacing: -.055em;
}

.story-heading h2 em {
  color: #168fc7;
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
}

.story-heading > p {
  margin: 0 0 3px;
  color: #71858f;
  font-size: 14px;
  line-height: 1.7;
}

.story-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.story-steps article {
  min-height: 215px;
  position: relative;
  padding: 24px;
  border: 1px solid #d7e8ed;
  border-radius: 22px;
  background: rgb(255 255 255 / 76%);
  transition: transform 250ms ease, box-shadow 250ms ease;
}

.story-steps .primary-step {
  border-color: rgb(89 216 224 / 32%);
  background:
    radial-gradient(circle at 88% 18%, rgb(68 225 229 / 25%), transparent 25%),
    linear-gradient(135deg, #2c3e49 0%, #176aa7 58%, #168fc7 100%);
  box-shadow: 0 22px 48px rgb(23 106 167 / 24%);
}

.primary-step .step-number,
.primary-step p { color: #c0e0e7; }
.primary-step .step-icon { background: rgb(255 255 255 / 12%); color: #72e3e7; }
.primary-step > small { color: #72e3e7; }
.primary-step h3 { color: #fff; font-size: 21px; }

.story-steps article:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 38px rgb(23 106 167 / 13%);
}

.step-number {
  position: absolute;
  right: 20px;
  top: 19px;
  color: #adc0c7;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 12px;
}

.step-icon {
  width: 45px;
  height: 45px;
  margin-bottom: 28px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #e2f5f7;
  color: #168fc7;
  font-size: 20px;
}

.story-steps h3 {
  margin: 9px 0 10px;
  color: #304651;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -.025em;
}

.story-steps p {
  margin: 0;
  color: #788b94;
  font-size: 11px;
  line-height: 1.65;
}

@media (max-width: 900px) {
  .adaptive-story { margin-inline: 24px; padding: 42px 30px 34px; }
  .story-heading { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 650px) {
  .adaptive-story { margin: 28px 18px 36px; padding: 34px 18px 20px; border-radius: 27px; }
  .story-heading { margin-bottom: 28px; }
  .story-heading h2 { font-size: 37px; }
  .story-heading > p { font-size: 13px; }
  .story-steps { grid-template-columns: 1fr; }
  .story-steps article { min-height: 0; padding: 21px; }
  .step-icon { margin-bottom: 20px; }
}