/* Loaded only for the home, product and AI landing pages.
   The fixed header is inside the viewport budget, not added above it.
   A minimum height lets long copy, translations and zoom grow naturally. */
body.j3-page[data-j3-page] #hero.j3-hero {
  --hero-header-height:85px;
  --hero-air:clamp(28px,4svh,64px);
  box-sizing:border-box;
  min-height:calc(100vh - var(--hero-strip-height,0px) - var(--hero-toolbar-height,0px));
  min-height:calc(100svh - var(--hero-strip-height,0px) - var(--hero-toolbar-height,0px));
  height:auto;
  padding-top:calc(var(--hero-header-height) + var(--hero-air));
  padding-bottom:var(--hero-air);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
body.j3-page[data-j3-page] #hero.j3-hero > :is(.w,.container) {
  width:100%;
  flex:none;
}
/* Replace the old width-based 600–700px stage with natural content height.
   The section itself distributes the remaining vertical space. */
body.j3-page[data-j3-page="home-page"] #hero.j3-hero .j3-hero-frame {
  min-height:0;
}
body.j3-page[data-j3-page="home-page"] #hero.j3-hero .j3-hero-support {
  margin-top:clamp(32px,5svh,64px);
}
@media(max-width:760px) {
  body.j3-page[data-j3-page] #hero.j3-hero {
    --hero-header-height:75px;
    --hero-air:clamp(28px,4svh,44px);
  }
}
/* Keep breathing room on landscape phones and short laptop windows. */
@media(max-height:600px) {
  body.j3-page[data-j3-page] #hero.j3-hero {--hero-air:24px;}
}