/* Partner of home-stage.js: with the page scaled by --gx-z, anything sized to the window height (100vh) would shrink
   with it, so those parts are divided by the same factor to fill the window again. */
html.gx-scaled .video-background,
html.gx-scaled .video-background .video-overlay,
html.gx-scaled #bg-video,
html.gx-scaled .gx-site-background-overlay,
html.gx-scaled .mobile-menu {height:calc(100vh / var(--gx-z))!important;}
html.gx-scaled .full-height-section,
html.gx-scaled #home .hero-content {min-height:calc(100vh / var(--gx-z))!important;}
html.gx-scaled #home:has(.home-registration) {min-height:max(calc(100vh / var(--gx-z)),980px,calc(var(--gx-reg-h,750px) + 230px))!important;} /* same as home-registration.js does at >=1400px */

/* The 1920px reference itself uses the >=1200 / >=1500 / >=1900 home rules; under the scaling those media queries still
   see the real (smaller) window, so the same rules are repeated here, with window-based units divided by --gx-z. */
html.gx-scaled #home .hero-content {position:relative;transform:none!important;}
html.gx-scaled #home .hero-content > .hero-logo {max-width:min(380px,80%);height:auto;}
html.gx-scaled #home .hero-content > .gx-caravan {position:absolute;right:calc(100% - 110px);top:150px;width:clamp(400px,calc(21vw / var(--gx-z) + 116px),580px);margin:0;}
html.gx-scaled #home .home-registration {position:absolute;right:3.5%;top:155px;width:clamp(365px,calc(23vw / var(--gx-z)),470px);margin:0;}
html.gx-scaled #home .prelaunch-box {position:absolute!important;bottom:auto;right:auto;left:clamp(20px,calc(2vw / var(--gx-z)),42px);top:max(calc(100vh / var(--gx-z) - 270px),620px);}
/* the Explore systems list is as tall as the window (style.css: max-height:calc(100vh - 125px)); under the scaling
   that window height is the smaller real one, so the list came out short - same height as on the 1920 screen */
html.gx-scaled #features .features-sidebar {max-height:calc(100vh / var(--gx-z) - 125px)!important;}/* the other window-sized values that differ from the 1920 screen (measured 1366 vs 1920); the rest reach their caps
   on both screens. :where() keeps the original specificity where the original rule is a plain stylesheet rule. */
:where(html.gx-scaled) .full-height-section {padding-left:calc(4vw / var(--gx-z));padding-right:calc(4vw / var(--gx-z));}
:where(html.gx-scaled) .feature-panel h2 {font-size:clamp(1.45rem,calc(2.2vw / var(--gx-z)),2rem);}
:where(html.gx-scaled) #features::before, :where(html.gx-scaled) #downloads::before, :where(html.gx-scaled) #community::before {width:calc(42vw / var(--gx-z));height:calc(42vw / var(--gx-z));}
:where(html.gx-scaled) #features::before, :where(html.gx-scaled) #community::before {right:calc(-18vw / var(--gx-z));}
:where(html.gx-scaled) #downloads::before {left:calc(-20vw / var(--gx-z));}
/* these two come from <style> blocks later in the page, so they need a higher priority to apply */
html.gx-scaled .gx-help {max-height:calc(100vh / var(--gx-z) - 28px);}
html.gx-scaled .gx-community-wait-box {top:calc(40vh / var(--gx-z));}
html.gx-scaled #quick-login-dialog {max-height:calc(100dvh / var(--gx-z) - 32px);max-width:calc(100vw / var(--gx-z) - 28px);}