/* HomeDen Connect — product-specific presentation */

.connect-hero {
  background:
    radial-gradient(circle at 82% 28%, rgba(49, 132, 246, .12), transparent 34%),
    linear-gradient(180deg, #fbfdff 0%, var(--ds-surface-soft) 100%);
}

.connect-hero-media {
  min-height: 520px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.connect-hero-media img {
  width: 116%;
  max-width: none;
  height: auto;
  margin-left: -8%;
}

.connect-checkup-media {
  padding: 0;
  background: transparent;
}

.connect-checkup-media img {
  width: 116%;
  max-width: none;
  margin-left: -8%;
  aspect-ratio: 1800 / 1496;
  object-fit: cover;
  object-position: center;
}

.connect-automation-media {
  display: block;
}

.connect-automation-media img {
  width: 116%;
  max-width: none;
  height: auto;
  margin-left: -8%;
}

.connect-phone-stage {
  min-height: 680px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.connect-phone-image {
  width: min(320px, 82%);
  padding: 0;
  overflow: visible;
}

.connect-phone-image img {
  width: 100%;
  height: auto;
  border-radius: 0;
}

.connect-phone-image .ios-mockup { width: 160%; margin-inline: -30%; }
.connect-phone-image .ios-mockup__screen img { width: 100%; height: 100%; object-fit: cover; }
.connect-phone-image .ios-mockup__frame { width: 100%; height: 100%; object-fit: fill; }

.connect-page .detail-contact .detail-button--secondary {
  color: var(--ds-white);
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .5);
}

.connect-page .detail-contact .detail-button--secondary:hover {
  color: var(--ds-white);
  background: rgba(255, 255, 255, .16);
  border-color: var(--ds-white);
}

@media (max-width: 1040px) {
  .connect-hero-media { min-height: 560px; }
  .connect-hero-media img { width: min(760px, 112%); margin-left: -4%; }
  .connect-checkup-media img { max-height: 660px; object-fit: contain; }
  .connect-automation-media img { width: 108%; margin-left: -4%; }
  .connect-phone-stage { min-height: 640px; }
}

@media (max-width: 640px) {
  .connect-hero-media {
    min-height: 340px;
    padding: 0;
  }
  .connect-hero-media img { width: 124%; margin-left: -12%; }
  .connect-checkup-media { padding: 0; }
  .connect-checkup-media img { width: 108%; margin-left: -4%; }
  .connect-automation-media img { width: 108%; margin-left: -4%; }
  .connect-phone-stage { min-height: 560px; padding: 0; }
  .connect-phone-image { width: min(280px, 82%); }
  .connect-phone-image img { border-radius: 0; }
}