/* Hero proof: selfie card → ready reel in the tilted phone. Loaded after the other landing CSS. */
.scene {
  --selfie-w: calc(var(--phone-height, 530px) * 0.37);
  --phone-half: calc(var(--phone-height, 530px) * 0.2713);
}
.scene .hero-selfie {
  position: absolute;
  z-index: 5;
  margin: 0;
  width: var(--selfie-w);
  left: calc(var(--phone-x, 50%) - var(--phone-half) - var(--selfie-w) * 0.8);
  top: calc(var(--phone-center, 50%) - var(--phone-height, 530px) * 0.42);
  padding: 7px 7px 26px;
  background: #fffefb;
  border-radius: 16px;
  box-shadow:
    0 1px 0 #ffffff inset,
    0 18px 40px #25222b2e,
    0 3px 10px #25222b1a;
  transform: rotate(-7deg);
  opacity: var(--intro-opacity, 1);
  pointer-events: none;
  animation: hero-selfie-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.scene .hero-selfie::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 46%;
  height: 20px;
  transform: translateX(-50%) rotate(3deg);
  background: #dfff6acc;
  border-radius: 3px;
  box-shadow: 0 2px 6px #25222b14;
}
.scene .hero-selfie img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 10px;
}
.scene .hero-arrow {
  position: absolute;
  z-index: 5;
  width: calc(var(--selfie-w) * 0.62);
  left: calc(var(--phone-x, 50%) - var(--phone-half) - var(--selfie-w) * 0.62);
  top: calc(var(--phone-center, 50%) - var(--phone-height, 530px) * 0.42 + var(--selfie-w) * 1.33);
  overflow: visible;
  fill: none;
  stroke: #7851ff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: var(--intro-opacity, 1);
  pointer-events: none;
}
.scene .hero-arrow path {
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  animation: hero-arrow-draw 0.8s 0.45s ease-out forwards;
}
.scene .hero-arrow path + path {
  animation-delay: 1.1s;
  animation-duration: 0.3s;
}
.scene[data-phase="detail"] .hero-selfie,
.scene[data-phase="detail"] .hero-arrow,
.scene .selfie-note,
.scene .example-caption,
.scene[data-phase="intro"] .phone-caption,
.scene[data-phase="intro"] .reel-stats,
.scene[data-phase="intro"] .intro-note {
  visibility: hidden;
}
@keyframes hero-selfie-in {
  from {
    opacity: 0;
    transform: translate(-18px, 14px) rotate(-12deg);
  }
}
@keyframes hero-arrow-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Offer lines are full phrases (A/B variants): let them wrap instead of the old one-word lines. */
.hero-copy h1 .h1-line,
.hero-copy h1 em.h1-line,
.mobile-intro h1 .h1-line,
.mobile-intro h1 em.h1-line {
  white-space: normal !important;
  text-wrap: balance;
}

/* Desktop: the selfie overlaps the phone over the lime orb; copy keeps its column. */
@media (min-width: 761px) {
  .scene {
    --selfie-w: calc(var(--phone-height, 530px) * 0.33);
  }
  .scene .hero-selfie {
    left: calc(var(--phone-x, 50%) - var(--phone-half) - var(--selfie-w) * 0.6);
  }
  .scene .hero-arrow {
    left: calc(var(--phone-x, 50%) - var(--phone-half) - var(--selfie-w) * 0.45);
  }
  .scene .hero-copy h1 em {
    display: block;
  }
}
@media (min-width: 761px) and (max-width: 1279px) {
  .scene[data-phase="intro"] .intro-home,
  .scene .intro-home {
    width: 44%;
  }
}

/* Phone: compact copy on top, selfie left and the reel right underneath. */
@media (max-width: 760px) {
  .scene {
    --selfie-w: calc(var(--phone-height, 300px) * 0.38);
  }
  .scene .hero-selfie {
    padding: 5px 5px 18px;
    border-radius: 12px;
  }
  .scene .hero-selfie img {
    border-radius: 8px;
  }
  .scene .hero-selfie::before {
    top: -8px;
    height: 15px;
  }
  .scene .hero-arrow {
    stroke-width: 5;
  }
  .mobile-intro .eyebrow,
  .mobile-intro .example-caption {
    display: none;
  }
  .mobile-intro h1 {
    font-size: clamp(30px, 8.4vw, 40px) !important;
    line-height: 1.05;
  }
  .mobile-intro h1 em {
    display: block;
  }
  .mobile-intro .lead {
    margin-top: 12px;
  }
  .mobile-intro .hero-free {
    margin-top: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene .hero-selfie {
    animation: none;
  }
  .scene .hero-arrow path {
    animation: none;
    stroke-dashoffset: 0;
  }
}