/* A372: approved V7 reveal, distinct problem/product copy, unchanged typography.
   The photograph is untouched. Alpha masking affects only the picture layer.
   The white overlay is used only when CSS masking is unavailable. */
body.home-page .home-hero {
  min-height: 0;
  align-items: stretch;
}
body.home-page .home-hero-inner { display: flex; }
body.home-page .hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(28px, 4svh, 64px);
  padding-block: clamp(24px, calc(8svh - 40px), 64px);
}
/* Reallocate spare height on tall desktops to the outer padding, matching
   the owner's Chrome adjustment. At 1280px tall this is 102.4px per side.
   At 1080px it meets the prior padding; shorter-screen rules stay intact. */
@media (min-width: 960px) and (min-height: 1080px) {
  body.home-page .hero-copy {
    padding-block: min(clamp(64px, 8svh, 112px), calc(28svh - 256px));
  }
}
body.home-page .hero-actions { margin: 0; }
body.home-page .prototype-section { min-width: 0; }
body.home-page .prototype-section > .hero-lead {
  max-width: 100%;
  margin: 0 0 10px;
  font-weight: 400;
}
body.home-page .product-description {
  margin: 0 0 20px;
  color: #4d627c;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.65;
}
body.home-page .prototype-reveal {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  width: min(100%, 666px);
  min-height: clamp(150px, calc(32svh - 140px), 260px);
  padding: 38px 24% 38px 24px;
  text-align: left;
}
body.home-page .prototype-peel {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
body.home-page .prototype-status {
  position: absolute;
  top: 20px;
  left: 24px;
  margin: 0;
  color: #426589;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
}
body.home-page .prototype-message { min-width: 0; }
body.home-page .prototype-message h3 {
  margin: 0 0 3px;
  color: #27466c;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: normal;
}
body.home-page .prototype-message p {
  margin: 0;
  color: #4d627c;
  font-size: 14px;
  line-height: 1.5;
}
body.home-page .prototype-actions { margin-top: clamp(20px, 2.5svh, 32px); }
body.home-page .hero-photo { background: #fff; }
body.home-page .hero-photo::after {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.98000) 0%,
    rgba(255,255,255,0.98000) 2%,
    rgba(255,255,255,0.98000) 4%,
    rgba(255,255,255,0.98000) 6%,
    rgba(255,255,255,0.98000) 8%,
    rgba(255,255,255,0.98000) 10%,
    rgba(255,255,255,0.98000) 12%,
    rgba(255,255,255,0.98000) 14%,
    rgba(255,255,255,0.98000) 16%,
    rgba(255,255,255,0.98000) 18%,
    rgba(255,255,255,0.98000) 20%,
    rgba(255,255,255,0.98000) 22%,
    rgba(255,255,255,0.97643) 24%,
    rgba(255,255,255,0.96576) 26%,
    rgba(255,255,255,0.94816) 28%,
    rgba(255,255,255,0.92387) 30%,
    rgba(255,255,255,0.89326) 32%,
    rgba(255,255,255,0.85677) 34%,
    rgba(255,255,255,0.81493) 36%,
    rgba(255,255,255,0.76835) 38%,
    rgba(255,255,255,0.71771) 40%,
    rgba(255,255,255,0.66376) 42%,
    rgba(255,255,255,0.60726) 44%,
    rgba(255,255,255,0.54906) 46%,
    rgba(255,255,255,0.49000) 48%,
    rgba(255,255,255,0.43094) 50%,
    rgba(255,255,255,0.37274) 52%,
    rgba(255,255,255,0.31624) 54%,
    rgba(255,255,255,0.26229) 56%,
    rgba(255,255,255,0.21165) 58%,
    rgba(255,255,255,0.16507) 60%,
    rgba(255,255,255,0.12323) 62%,
    rgba(255,255,255,0.08674) 64%,
    rgba(255,255,255,0.05613) 66%,
    rgba(255,255,255,0.03184) 68%,
    rgba(255,255,255,0.01424) 70%,
    rgba(255,255,255,0.00357) 72%,
    rgba(255,255,255,0.00000) 74%,
    rgba(255,255,255,0.00000) 76%,
    rgba(255,255,255,0.00000) 78%,
    rgba(255,255,255,0.00000) 80%,
    rgba(255,255,255,0.00000) 82%,
    rgba(255,255,255,0.00000) 84%,
    rgba(255,255,255,0.00000) 86%,
    rgba(255,255,255,0.00000) 88%,
    rgba(255,255,255,0.00000) 90%,
    rgba(255,255,255,0.00000) 92%,
    rgba(255,255,255,0.00000) 94%,
    rgba(255,255,255,0.00000) 96%,
    rgba(255,255,255,0.00000) 98%,
    rgba(255,255,255,0.00000) 100%
  );
}
@supports (mask-image: linear-gradient(to right, transparent, black)) or (-webkit-mask-image: linear-gradient(to right, transparent, black)) {
  body.home-page .hero-photo > picture {
    --photo-alpha: linear-gradient(90deg,
    rgba(0,0,0,0.02000) 0%,
    rgba(0,0,0,0.02000) 2%,
    rgba(0,0,0,0.02000) 4%,
    rgba(0,0,0,0.02000) 6%,
    rgba(0,0,0,0.02000) 8%,
    rgba(0,0,0,0.02000) 10%,
    rgba(0,0,0,0.02000) 12%,
    rgba(0,0,0,0.02000) 14%,
    rgba(0,0,0,0.02000) 16%,
    rgba(0,0,0,0.02000) 18%,
    rgba(0,0,0,0.02000) 20%,
    rgba(0,0,0,0.02000) 22%,
    rgba(0,0,0,0.02357) 24%,
    rgba(0,0,0,0.03424) 26%,
    rgba(0,0,0,0.05184) 28%,
    rgba(0,0,0,0.07613) 30%,
    rgba(0,0,0,0.10674) 32%,
    rgba(0,0,0,0.14323) 34%,
    rgba(0,0,0,0.18507) 36%,
    rgba(0,0,0,0.23165) 38%,
    rgba(0,0,0,0.28229) 40%,
    rgba(0,0,0,0.33624) 42%,
    rgba(0,0,0,0.39274) 44%,
    rgba(0,0,0,0.45094) 46%,
    rgba(0,0,0,0.51000) 48%,
    rgba(0,0,0,0.56906) 50%,
    rgba(0,0,0,0.62726) 52%,
    rgba(0,0,0,0.68376) 54%,
    rgba(0,0,0,0.73771) 56%,
    rgba(0,0,0,0.78835) 58%,
    rgba(0,0,0,0.83493) 60%,
    rgba(0,0,0,0.87677) 62%,
    rgba(0,0,0,0.91326) 64%,
    rgba(0,0,0,0.94387) 66%,
    rgba(0,0,0,0.96816) 68%,
    rgba(0,0,0,0.98576) 70%,
    rgba(0,0,0,0.99643) 72%,
    rgba(0,0,0,1.00000) 74%,
    rgba(0,0,0,1.00000) 76%,
    rgba(0,0,0,1.00000) 78%,
    rgba(0,0,0,1.00000) 80%,
    rgba(0,0,0,1.00000) 82%,
    rgba(0,0,0,1.00000) 84%,
    rgba(0,0,0,1.00000) 86%,
    rgba(0,0,0,1.00000) 88%,
    rgba(0,0,0,1.00000) 90%,
    rgba(0,0,0,1.00000) 92%,
    rgba(0,0,0,1.00000) 94%,
    rgba(0,0,0,1.00000) 96%,
    rgba(0,0,0,1.00000) 98%,
    rgba(0,0,0,1.00000) 100%
    );
    -webkit-mask-image: var(--photo-alpha);
    mask-image: var(--photo-alpha);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    mask-mode: alpha;
  }
  body.home-page .hero-photo::after { display: none; }
}
/* Use spacing, not enlarged controls or clipped content, to fit shorter desktops. */
@media (min-width: 960px) and (max-height: 980px) {
  body.home-page .hero-copy { gap: 24px; padding-block: 16px; }
  body.home-page .hero-copy h1 { margin-bottom: 16px; }
  body.home-page .hero-description { margin-bottom: 18px; }
  body.home-page .prototype-section > .hero-lead { margin-bottom: 6px; }
  body.home-page .product-description { margin-bottom: 14px; }
  body.home-page .prototype-reveal { min-height: 112px; padding-block: 34px 18px; }
  body.home-page .prototype-status { top: 12px; }
  body.home-page .prototype-actions { margin-top: 16px; }
}
@media (min-width: 960px) and (max-height: 740px) {
  body.home-page .hero-copy { gap: 20px; padding-block: 12px; }
  body.home-page .hero-copy h1 { margin-bottom: 12px; }
  body.home-page .hero-description { margin-bottom: 14px; }
  body.home-page .product-description { margin-bottom: 12px; }
  body.home-page .prototype-actions { margin-top: 14px; }
}
/* Keep the problem, photograph, and product in that order on smaller screens. */
@media (max-width: 959px) {
  body.home-page .home-hero-inner { flex-direction: column; }
  body.home-page .hero-copy { display: contents; }
  body.home-page .hero-intro .hero-actions { margin: 0; }
  body.home-page .hero-photo > picture { -webkit-mask-image: none; mask-image: none; }
  body.home-page .hero-photo::after { display: none; }
  body.home-page .prototype-section { padding-top: 32px; padding-bottom: 38px; }
  body.home-page .prototype-section > .hero-lead { font-size: clamp(20px, 2.8vw, 24px); line-height: 1.45; margin-bottom: 10px; }
  body.home-page .product-description { font-size: 17px; margin-bottom: 20px; }
  body.home-page .prototype-reveal { min-height: 200px; }
  body.home-page .prototype-actions { margin-top: 24px; }
}
@media (max-width: 600px) {
  body.home-page .prototype-section { padding: 28px 20px 32px; }
  body.home-page .prototype-section > .hero-lead { font-size: 19px; line-height: 1.5; }
  body.home-page .product-description { font-size: 16px; }
  body.home-page .prototype-reveal { min-height: 190px; padding-left: 16px; padding-right: 23%; }
  body.home-page .prototype-status { top: 16px; left: 16px; }
}

/* A372.1: emphasize the intended audiences without changing text size. */
body.home-page .product-description strong { font-weight: 600; }

/* A372.2: use the same readable text width as the problem paragraph above.
   Normal wrapping stays responsive; the photo and reveal retain their size. */
body.home-page .product-description { max-width: 35em; }
@media (min-width: 960px) and (max-width: 1199px) {
  body.home-page .product-description { max-width: 31em; }
}
@media (max-width: 959px) {
  body.home-page .product-description { max-width: 750px; }
}