/* Apple Health is a single, clear product moment: copy at left, iPhone and Watch at right. */
.health-showcase {
  min-height: 720px;
  overflow: hidden;
  background: #f7f8fa;
}

.health-showcase .feature-copy { max-width: 570px; }

.health-showcase .feature-copy h2 {
  margin: 0 0 28px;
  color: #090d14;
  font-size: clamp(62px, 6.8vw, 100px);
  line-height: .91;
}

.health-showcase .feature-copy h2 span {
  display: block;
  color: #147bf4;
}

.health-showcase .feature-copy > p {
  max-width: 560px;
  color: #26303b;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.52;
  letter-spacing: -.025em;
}

.health-showcase .health-pair {
  width: min(440px, 100%);
  min-height: 595px;
  display: block;
  justify-self: center;
}

.health-showcase .health-pair::before {
  width: 590px;
  height: 520px;
  background: radial-gradient(ellipse, rgba(27, 93, 168, .12), transparent 66%);
}

.health-showcase .health-phone {
  position: absolute;
  z-index: 1;
  top: 4px;
  left: 66px;
  width: 264px;
  box-shadow: 0 31px 55px rgba(15, 37, 67, .22), 0 5px 11px rgba(0, 0, 0, .16);
}

.health-showcase .watch-stage-render {
  position: absolute;
  z-index: 3;
  right: -8px;
  bottom: 8px;
  width: 270px;
  height: 420px;
  transform: scale(.76);
  transform-origin: bottom right;
}

/* Keep all paired media within the viewport on compact screens. */
@media (max-width: 800px) {
  .health-showcase { padding-top: 94px; padding-bottom: 74px; gap: 32px; }
  .health-showcase .health-pair { width: 440px; max-width: 100%; margin: 0 auto; }
  .health-showcase .health-phone { left: 72px; }
}

@media (max-width: 480px) {
  .health-showcase { padding: 78px 22px 58px; }
  .health-showcase .feature-copy { text-align: center; }
  .health-showcase .feature-copy h2 { margin-bottom: 20px; font-size: clamp(50px, 15vw, 61px); }
  .health-showcase .feature-copy > p { margin-right: auto; margin-left: auto; font-size: 18px; }
  .health-showcase .health-pair { width: min(340px, 100%); min-height: 510px; }
  .health-showcase .health-pair::before { width: 390px; height: 440px; }
  .health-showcase .health-phone { top: 2px; left: 16px; width: 202px; }
  .health-showcase .watch-stage-render { right: -20px; bottom: 5px; transform: scale(.62); transform-origin: bottom right; }
  .widget-gallery { width: min(330px, 100%); }
  .progress-devices { width: min(320px, 100%); }
  .device-ecosystem { width: min(340px, 100%); }
}