/* Homepage hero viewport correction.
   Keep the existing scroll-story logic; only normalize viewport sizing so the
   sticky hero/canvas cannot collapse on wide or short desktop displays. */

:root{
  --ptp-home-vh:100dvh;
  --ptp-home-story-h:350dvh;
  --ptp-home-field-h:150dvh;
}

#home[data-hero-container]{
  margin-top:0!important;
  height:var(--ptp-home-story-h)!important;
  width:100%;
  max-width:100vw;
  overflow:visible;
}

/* Start the next opaque stage below the first viewport. The captured -272lvh
   overlap exposed it inside the intro, covering the bottom of the particles. */
#home[data-hero-container] + [data-xor-section]{
  margin-top:calc(var(--ptp-home-vh) - var(--ptp-home-story-h))!important;
}

#home[data-hero-container] .min-h-svh{
  box-sizing:border-box;
  padding:calc(var(--navbar-height,80px) + 24px) clamp(16px,4vw,80px) 32px;
}

#home[data-hero-container] .min-h-svh > div{
  width:100%;
  min-width:0;
}

#home[data-hero-container] .arcadia-display-3{
  font-size:clamp(32px,4vw,82px)!important;
  line-height:1.4!important;
  overflow-wrap:anywhere;
}

#home[data-hero-container] .arcadia-body-1{
  max-width:960px;
  margin-inline:auto;
  white-space:normal!important;
  line-height:1.9!important;
}

#home[data-hero-container] .mt-gap-xl{
  width:100%;
  max-width:760px!important;
  margin-inline:auto;
}

#home[data-hero-container] .ptp-problem-cta{
  width:100%!important;
  max-width:760px;
  margin-inline:auto;
}

#home[data-hero-container] > .sticky{
  height:var(--ptp-home-vh)!important;
  min-height:var(--ptp-home-vh)!important;
  width:100%;
  max-width:100vw;
  overflow:hidden!important;
}

/* The saved Mercury markup uses lvh utilities. On some desktop viewport /
   zoom combinations those units can leave part of the sticky stage uncovered.
   Normalize the visual layer and its 150% particle field to dynamic viewport units. */
#home[data-hero-container] > .sticky > [aria-hidden="true"].absolute.inset-0{
  height:var(--ptp-home-vh)!important;
  min-height:var(--ptp-home-vh)!important;
}

#home[data-hero-container] .h-\[150lvh\]{
  height:var(--ptp-home-field-h)!important;
  min-height:var(--ptp-home-field-h)!important;
}

#home[data-hero-container] .min-h-svh{
  min-height:var(--ptp-home-vh)!important;
}

#home[data-hero-container] canvas[data-engine="three.js r174"]{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
}

/* Keep the intro centered and comfortably sized on large desktop displays
   without changing the existing mobile/tablet design. */
@media (min-width:1440px){
  #home[data-hero-container] .arcadia-display-3{
    font-size:clamp(52px,3.55vw,72px)!important;
    line-height:1.12!important;
  }

  #home[data-hero-container] .arcadia-body-1{
    font-size:clamp(16px,1.05vw,20px)!important;
    line-height:1.8!important;
  }

  #home[data-hero-container] .ptp-problem-cta{
    width:min(700px,calc(100vw - 64px));
    margin-inline:auto;
  }
}

@media (min-width:1920px){
  #home[data-hero-container] .arcadia-display-3{
    font-size:clamp(64px,3.35vw,82px)!important;
  }

  #home[data-hero-container] .ptp-problem-cta{
    width:min(760px,calc(100vw - 96px));
  }

  #home[data-hero-container] .ptp-problem-cta__label{font-size:15px}
  #home[data-hero-container] .ptp-problem-cta__field input{height:54px;font-size:14px}
  #home[data-hero-container] .ptp-problem-cta__field button{height:50px;padding-inline:22px;font-size:14px}
  #home[data-hero-container] .ptp-problem-cta__help{font-size:12px}
}

/* Short desktop screens should still use the whole viewport instead of
   compressing the hero into a shallow strip. */
@media (min-width:821px) and (max-height:720px){
  #home[data-hero-container] > .sticky,
  #home[data-hero-container] > .sticky > [aria-hidden="true"].absolute.inset-0{
    height:var(--ptp-home-vh)!important;
    min-height:var(--ptp-home-vh)!important;
  }

  #home[data-hero-container] .min-h-svh{
    min-height:var(--ptp-home-vh)!important;
  }

  #home[data-hero-container] .arcadia-display-3{
    font-size:clamp(42px,4.2vw,58px)!important;
  }

  #home[data-hero-container] .mt-gap-xl{margin-top:22px!important}
}

@media (max-height:540px){
  #home[data-hero-container] .min-h-svh{padding-top:calc(var(--navbar-height,80px) + 12px);padding-bottom:12px}
  #home[data-hero-container] .arcadia-display-3{font-size:clamp(26px,3.4vw,40px)!important;line-height:1.35!important}
  #home[data-hero-container] .arcadia-body-1{font-size:14px!important;line-height:1.6!important;margin-top:8px}
  #home[data-hero-container] .mt-gap-xl{margin-top:14px!important}
}