/* A373.4: approved open prototype layout.
   The photograph, its alpha mask, type sizes and shared buttons are retained. */
body.home-page .hero-copy {
  --home-section-gap: clamp(24px, 4.5svh, 56px);
  justify-content: center;
  gap: var(--home-section-gap);
  min-width: 0;
}

/* Three flex children and one shared gap keep the separator equidistant
   from the bottom of the upper button and the top of the lower heading. */
body.home-page .hero-intro,
body.home-page .prototype-section {
  margin-block: 0;
}
body.home-page .hero-intro > .hero-actions { margin-block: 0; }
body.home-page .hero-section-divider {
  flex: 0 0 1px;
  width: 100%;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(7,93,191,.18) 12%, rgba(7,93,191,.62) 50%, rgba(7,93,191,.18) 88%, transparent 100%);
}
body.home-page .home-copy-line { display: block; }
body.home-page .prototype-section,
body.home-page .prototype-message {
  background: transparent;
  border: 0;
  box-shadow: none;
}
body.home-page .prototype-section > .hero-lead { margin-top: 0; }
body.home-page .product-description { margin-bottom: 0; }
body.home-page .prototype-section > .prototype-message {
  margin-top: clamp(24px, 3.5svh, 42px);
  padding: 0;
}
body.home-page .prototype-actions { margin-top: clamp(24px, 3.5svh, 42px); }

@media (min-width: 960px) {
  /* The first headline line supplies the intrinsic column width. Nothing
     below it can extend farther right; text can still wrap within the column. */
  body.home-page .hero-copy {
    width: min-content;
    max-width: 100%;
    flex: 0 0 auto;
  }
  body.home-page .hero-copy h1 > span:first-child { white-space: nowrap; }
  body.home-page .hero-copy h1,
  body.home-page .hero-description,
  body.home-page .prototype-section > .hero-lead,
  body.home-page .product-description,
  body.home-page .prototype-message {
    max-width: 100%;
  }
  body.home-page .hero-intro,
  body.home-page .prototype-section { padding: 0; }
}

/* Compact spacing on shorter desktops; do not clip content to force a fit. */
@media (min-width: 960px) and (max-height: 980px) {
  body.home-page .hero-copy { --home-section-gap: clamp(18px, 3svh, 28px); }
  body.home-page .prototype-section > .prototype-message,
  body.home-page .prototype-actions { margin-top: 24px; }
}
@media (min-width: 960px) and (max-height: 740px) {
  body.home-page .hero-copy { --home-section-gap: 18px; }
  body.home-page .prototype-section > .prototype-message,
  body.home-page .prototype-actions { margin-top: 18px; }
}

/* On phones/tablets the existing photograph separates problem and product.
   Preserve that stacked order and allow additional line wrapping. */
@media (max-width: 959px) {
  body.home-page .hero-section-divider { display: none; }
  body.home-page .prototype-section > .prototype-message { margin-top: 24px; }
  body.home-page .prototype-actions { margin-top: 24px; }
}