/* TrialPro hero: a returning glass ribbon frames one launch composition.
   Native CSS + existing GSAP. DESIGN_VARIANCE 9 / MOTION_INTENSITY 6 / VISUAL_DENSITY 3.
   The established light palette, Newsreader, Tabler symbols, and commercial copy stay intact.
   Layers are local: sculpture 0, content 1. All rules are scoped to the hero. */
.hero-sculptural {
  position: relative;
  isolation: isolate;
  padding-block: 48px 44px;
  text-align: left;
}
.hero-sculptural .hero-sculpture-frame {
  position: absolute;
  inset: 0 calc((100% - 100vw) / 2);
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.hero-sculptural .hero-sculpture {
  position: absolute;
  z-index: 0;
  top: 5px;
  left: -8%;
  width: 116%;
  height: 600px;
  max-width: none;
  pointer-events: none;
  background: url('assets/hero-return-loop.webp') center / 100% 100% no-repeat;
  opacity: .055;
}
.hero-sculptural .hero-intro,
.hero-sculptural .hero-action { position: relative; z-index: 1; }
.hero-sculptural .hero-audience {
  margin: 0 0 22px 7%;
  max-width: none;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-muted);
}
.hero-sculptural h1 {
  margin: 0;
  max-width: none;
  font-size: clamp(56px, 7.2vw, 104px);
  font-weight: 430;
  line-height: 1.04;
  letter-spacing: -.04em;
}
.hero-sculptural h1 > span { display: block; white-space: nowrap; }
.hero-sculptural h1 > span:first-child { margin-left: 2%; }
.hero-sculptural h1 > .hero-outcome { margin-left: 12%; }
.hero-sculptural .hero-description {
  max-width: 590px;
  margin: 28px 0 0 31%;
  font-size: 18px;
  line-height: 1.55;
  color: var(--color-muted);
}
.hero-sculptural .hero-description strong {
  display: block;
  margin-bottom: 8px;
  font-size: 23px;
  font-weight: 550;
  letter-spacing: -.025em;
  color: var(--color-ink);
}
.hero-sculptural .hero-description > span { display: block; max-width: 460px; }
.hero-sculptural .hero-phrase { display: inline-block; }
.hero-sculptural .hero-art-frame {
  position: absolute;
  z-index: 1;
  left: 5%;
  top: 342px;
  width: 242px;
  height: 112px;
  pointer-events: none;
  rotate: -9deg;
}
.hero-sculptural .hero-art {
  width: 242px;
  height: 112px;
  margin: 0;
  scale: 1;
  transform-origin: center;
}
.hero-sculptural .hero-action {
  display: block;
  width: 700px;
  max-width: 100%;
  margin: 36px auto 0;
  padding: 26px 28px 18px;
  text-align: left;
  background: rgb(255 255 255 / 76%);
  border: 1px solid rgb(210 217 229 / 58%);
  border-radius: 22px;
  box-shadow: 0 18px 44px -34px rgb(32 48 89 / 25%);
}
.hero-sculptural .hero-purchase,
.hero-sculptural .hero-confidence {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: center;
  gap: 24px;
}
.hero-sculptural .hero-offer { margin: 0; text-align: left; font-size: 30px; line-height: 1.2; letter-spacing: -.025em; }
.hero-sculptural .hero-offer > span { display: block; margin-top: 6px; font-size: 14px; letter-spacing: 0; color: var(--color-muted); }
.hero-sculptural .hero-cta {
  min-width: 0;
  width: 100%;
  min-height: 60px;
  white-space: nowrap;
  gap: 20px;
  padding-inline: 24px;
  border-radius: 12px;
  box-shadow: 0 8px 20px -14px rgb(36 84 235 / 48%);
}
.hero-sculptural .hero-cta:hover { transform: translateY(-2px); }
.hero-sculptural .hero-cta:active { transform: translateY(0) scale(.985); }
.hero-sculptural .hero-confidence { margin-top: 22px; }
.hero-sculptural .hero-lifetime { align-items: flex-start; justify-content: flex-start; margin: 0; font-size: 13px; line-height: 1.5; }
.hero-sculptural .hero-lifetime .icon { flex-shrink: 0; margin-top: 2px; }
.hero-sculptural .hero-lifetime small { display: block; margin-top: 2px; font-size: 12px; color: var(--color-muted); }
.hero-sculptural .money-back-note { justify-content: center; margin: 0; font-size: 12px; }
.hero-sculptural .hero-availability { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid rgb(210 217 229 / 58%); font-size: 11px; line-height: 1.6; }

@media (min-width: 801px) and (max-height: 800px) {
  .hero-sculptural { padding-block: 24px 28px; }
  .hero-sculptural .hero-audience { margin-bottom: 16px; }
  .hero-sculptural h1 { font-size: clamp(54px, min(7.2vw, 11.5svh), 92px); }
  .hero-sculptural .hero-description { margin-top: 22px; font-size: 17px; }
  .hero-sculptural .hero-description strong { font-size: 21px; }
  .hero-sculptural .hero-action { margin-top: 28px; }
  .hero-sculptural .hero-sculpture { top: -50px; height: 580px; }
  .hero-sculptural .hero-art-frame { top: 294px; scale: .86; }
}
@media (min-width: 801px) and (max-width: 1100px) {
  .hero-sculptural h1 { font-size: 7vw; }
  .hero-sculptural .hero-description { margin-left: 32%; }
  .hero-sculptural .hero-description strong { max-width: 23ch; }
  .hero-sculptural .hero-art-frame { left: 1%; scale: .8; }
}
@media (max-width: 800px) {
  .hero-sculptural { padding-block: 32px 36px; text-align: center; }
  .hero-sculptural .hero-audience { margin: 0 auto 24px; font-size: 14px; }
  .hero-sculptural h1 { max-width: 15ch; margin-inline: auto; font-size: clamp(44px, 8.5vw, 65px); line-height: 1.03; }
  .hero-sculptural h1 > span { white-space: normal; }
  .hero-sculptural h1 > span:first-child,
  .hero-sculptural h1 > .hero-outcome { margin-left: 0; }
  .hero-sculptural .hero-description { max-width: 480px; margin: 24px auto 0; font-size: 17px; text-wrap: balance; }
  .hero-sculptural .hero-description strong { max-width: 30ch; margin: 0 auto 8px; font-size: 20px; }
  .hero-sculptural .hero-description > span { margin-inline: auto; }
  .hero-sculptural .hero-sculpture { width: 144%; left: -22%; top: -12px; height: 550px; opacity: .04; background-image: url('assets/hero-return-loop-mobile.webp'); }
  .hero-sculptural .hero-art-frame { position: relative; left: auto; top: auto; width: 158px; height: 74px; margin: 20px auto 0; rotate: 0deg; scale: 1; }
  .hero-sculptural .hero-art { scale: .65; transform-origin: top left; }
  .hero-sculptural .hero-action { width: 440px; margin: 18px auto 0; padding: 22px 20px 16px; }
  .hero-sculptural .hero-purchase,
  .hero-sculptural .hero-confidence { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .hero-sculptural .hero-offer { font-size: 28px; text-align: center; }
  .hero-sculptural .hero-offer > span { display: inline; font-size: 14px; margin-left: 6px; }
  .hero-sculptural .hero-cta { min-height: 56px; }
  .hero-sculptural .hero-confidence { margin-top: 16px; gap: 12px; }
  .hero-sculptural .hero-lifetime { margin: 0 auto; font-size: 12px; text-align: center; }
  .hero-sculptural .hero-lifetime small { display: inline; font-size: inherit; }
  .hero-sculptural .hero-availability { justify-content: center; text-align: center; margin-top: 16px; padding-top: 12px; }
}
@media (max-width: 600px) {
  .hero-sculptural { padding-top: 28px; }
  .hero-sculptural h1 { font-size: clamp(40px, 11.6vw, 62px); }
  .hero-sculptural .hero-description strong { max-width: 26ch; font-size: 19px; }
  .hero-sculptural .hero-description { font-size: 16px; }
  .hero-sculptural .hero-sculpture { width: 170%; left: -35%; top: 35px; height: 435px; opacity: .035; }
  .hero-sculptural .hero-art-frame { margin-top: 16px; height: 60px; width: 132px; }
  .hero-sculptural .hero-art { scale: .55; }
  .hero-sculptural .hero-action { padding-inline: 16px; }
  .hero-sculptural .hero-offer { font-size: 24px; }
  .hero-sculptural .hero-offer > span { font-size: 13px; }
  .hero-sculptural .hero-cta { padding-inline: 12px; gap: 12px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-sculptural *, .hero-sculptural *::before, .hero-sculptural *::after { animation: none !important; transition: none !important; }
  .hero-sculptural .hero-cta:hover,
  .hero-sculptural .hero-cta:active { transform: none; }
}