/* Option 3 pins the existing hero and replaces only its screen contents. */
.hero-session-host, .hero-session-copy { display: none; }
html[data-below-fold="hero"] #just-press-play { display: none; }
.hero-session-track[data-active="true"] { position: relative; height: var(--hero-track-height, auto); }
.hero-session-track[data-active="true"] > .hero { position: sticky; top: var(--hero-pin-top, 62px); }
/* Keep the hero's shared desktop/mobile size variables. Fitting the pinned
   phone to the viewport here silently caps the studio sliders. */
.hero-session-track[data-active="true"] .hero-session-host { display: block; position: absolute; inset: 0; z-index: 1; visibility: var(--session-screen-visible, hidden); pointer-events: none; }
.hero-session-host .session-phone { position: absolute; inset: 0; filter: none; }
.hero-session-host .sp-screen { border-radius: 13% / 6%; }
.hero-session-track[data-active="true"] .hero > .hero-copy { transform: translateY(var(--session-hero-copy-y, 0px)); }
.hero-session-track[data-active="true"] .hero-stage > .cover-flow { transform: translateY(var(--session-wings-y, 0px)); }
.hero[data-session-frozen="true"] .cover-flow [data-session-focus="true"] { visibility: hidden; }
.hero[data-session-frozen="true"] .hero-stage { pointer-events: none; }
.hero-session-track[data-active="true"] .hero-session-copy {
  display: block; position: absolute; z-index: 12;
  left: max(2rem, calc((100% - 1180px) / 2 + 40px));
  top: var(--session-caption-top); transform: translateY(calc(-50% + var(--session-enter-y, 100vh)));
  width: max(180px, calc(50% - var(--session-phone-width) / 2 - max(2rem, (100% - 1180px) / 2 + 40px) - 3rem));
  max-width: 330px; text-align: left;
}
.hero-session-copy h2 { font-size: clamp(2.1rem, 4vw, 3.75rem); line-height: 1.04; max-width: 8ch; }
.hero-session-copy > p { color: var(--ink-2); font-size: 1rem; line-height: 1.55; margin-top: 1rem; }
.hero-session-steps { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 1.75rem; }
.hero-session-steps button { border: 0; border-bottom: 1px solid #333; border-radius: 0; background: none; color: var(--ink-3); font: inherit; font-size: .75rem; padding: .5rem 0; cursor: pointer; }
.hero-session-steps button[aria-current="step"] { color: var(--ink); border-color: #bdd7cb; }
.hero-session-copy .hero-session-help { font-size: .75rem; }
.hero-session-reset, .hero-session-skip { color: var(--ink-3); font: inherit; font-size: .7rem; cursor: pointer; border: 0; background: none; padding: 0; text-decoration: underline; text-underline-offset: 4px; }
.hero-session-reset { display: block; margin-top: 1.2rem; }
.hero-session-skip { display: inline-block; margin-top: .9rem; }
@media (max-width: 850px) {
  .hero-session-track[data-active="true"] > .hero { padding-bottom: 112px; }
  .hero-session-track[data-active="true"] .hero-stage { z-index: 2; }
  .hero-session-track[data-active="true"] .hero-session-copy {
    top: var(--session-mobile-caption-top); left: 20px; right: 20px; width: auto;
    max-width: none; text-align: center; z-index: 1; transform: translateY(var(--session-enter-y, 100vh));
  }
  .hero-session-copy h2 { max-width: none; font-size: 2rem; }
  .hero-session-copy > p:not(.hero-session-help) { display: none; }
  .hero-session-steps { justify-content: center; margin-top: .5rem; }
  .hero-session-copy .hero-session-help { position: absolute; top: calc(98px + var(--session-phone-width) * 2760 / 1350 + 4px); width: 100%; margin: 0; }
  .hero-session-reset { position: absolute; top: calc(98px + var(--session-phone-width) * 2760 / 1350 + 32px); width: 100%; margin: 0; }
  .hero-session-skip { position: absolute; top: calc(98px + var(--session-phone-width) * 2760 / 1350 + 62px); left: 50%; transform: translateX(-50%); margin: 0; }
}
.hero-session-track[data-active="true"][data-static="true"] { height: auto; }
.hero-session-track[data-active="true"][data-static="true"] > .hero { position: relative; top: 0; }
.hero-session-track[data-active="true"][data-static="true"] .hero-session-copy { position: relative; inset: auto; transform: none; width: min(400px, 90%); margin: 2rem auto; opacity: 1; text-align: center; }
.hero-session-track[data-static="true"] .hero-session-copy h2 { max-width: none; }
.hero-session-track[data-static="true"] .hero-session-steps { justify-content: center; }
.hero-session-track[data-static="true"] .hero-session-copy .hero-session-help,
.hero-session-track[data-static="true"] .hero-session-reset,
.hero-session-track[data-static="true"] .hero-session-skip { position: static; transform: none; margin-top: 1rem; }

/* The finished session stays below a fully restored, animated hero. */
.hero-session-finished { display: none; }
.hero-session-track[data-active="true"][data-completed="true"] { height: auto; overflow-anchor: none; }
.hero-session-track[data-active="true"][data-completed="true"] > .hero { position: relative; top: 0; }
.hero-session-track[data-active="true"][data-completed="true"] .hero-session-finished {
  display: block; position: relative; padding: 64px 0; background: #000;
  --session-screen-visible: visible;
}
.hero-session-finished-phone {
  position: relative; width: var(--session-phone-width); margin: 0 auto;
  aspect-ratio: 1350 / 2760; filter: drop-shadow(0 20px 35px rgb(0 0 0 / .55));
}
.hero-session-finished-phone > .phone-frame { z-index: 2; }
.hero-session-finished .hero-session-steps,
.hero-session-finished .hero-session-help,
.hero-session-finished .hero-session-reset { display: none; }
.hero-session-track[data-active="true"] .hero-session-finished .hero-session-copy {
  top: 50%; transform: translateY(-50%);
}
@media (max-width: 850px) {
  .hero-session-track[data-active="true"][data-completed="true"] .hero-session-finished { padding: 32px 0; }
  .hero-session-track[data-active="true"] .hero-session-finished .hero-session-copy {
    position: relative; inset: auto; transform: none; width: auto;
    margin: 0 20px 24px;
  }
  .hero-session-finished .hero-session-skip {
    position: static; transform: none; margin-top: 12px;
  }
}