/*
 * V88 homepage hero depth calibration.
 * Desktop and tablet only: the accepted mobile carousel remains untouched.
 */
@media (min-width: 769px) {
  /* Reserve space in normal flow instead of translating the entire viewport-
     height copy box above the hero. Short browser windows must retain a safe
     top inset at 100% zoom, including when the audience headline changes. */
  .hero-product-sticky .hero-section {
    height:auto;
    min-height:calc(100svh - 72px);
  }
  .hero-copy {
    min-height:calc(100svh - 72px);
    justify-content:flex-start;
    padding-top:clamp(32px,calc(50svh - 316px),180px);
    padding-bottom:32px;
    transform:none !important;
  }

  .hero-ring {
    margin-top: clamp(42px, 4vw, 58px);
  }

  /* Keep contrast behind the message without laying a dark veil over the foreground. */
  .hero-section::after {
    background: radial-gradient(
      ellipse 44% 34% at 50% 33%,
      rgba(0, 0, 0, .74) 0%,
      rgba(0, 0, 0, .48) 42%,
      rgba(0, 0, 0, .14) 70%,
      rgba(0, 0, 0, 0) 100%
    );
  }

  /* A restrained lift keeps the expanded card readable without covering the copy. */
  .hero-ring-card:hover .hero-ring-visual,.hero-ring-card:focus .hero-ring-visual {
    transform: translateZ(6px) scale(1.04);
    filter: none;
    box-shadow: none;
  }

  .hero-ring-card:hover .hero-ring-face,.hero-ring-card:focus .hero-ring-face,.hero-ring-card:hover .hero-ring-copy,.hero-ring-card:focus .hero-ring-copy {
    filter: none;
    text-shadow: none;
  }

  /* Preserve copy legibility after replacing the former 1.5x zoom. */
  .hero-ring-copy small {
    font-size: 7px;
  }

  .hero-ring-copy strong {
    font-size: 10px;
  }

  .hero-ring-copy span {
    font-size: 7px;
  }
}

/* The homepage anchor must stop below the sticky header as well. */
#top { scroll-margin-top:73px; }
@media (max-width:620px) { #top { scroll-margin-top:65px; } }
@media (max-width:768px) {
  .hero-copy .personal-title {
    max-width:100%;
    min-width:0;
    font-size:clamp(20px,6.5vw,34px);
  }
  .hero-copy .personal-title span {
    word-break:normal;
    overflow-wrap:anywhere;
  }
}

/* Keep the rear arc in the accepted position on shorter laptop screens. */
@media (min-width: 769px) and (max-height: 820px) {
  .hero-ring {
    margin-top: 12px;
  }
}

@media (min-width: 769px) and (max-height: 620px) {
  .hero-copy .personal-title {
    font-size:clamp(30px,min(3.5vw,7svh),44px);
  }
  .hero-audience-switch { margin-top:18px; }
  .hero-copy .personal-tags { margin-top:14px; }
  .hero-copy .personal-tags .personal-tag { font-size:22px; }
}