/* A single scrollport owns the home page, header and viewport-sized opening. */
html:has(body.home){height:100%;overflow:hidden;background:#100624}
body.home{--nav-height:64px;position:fixed;inset:0;margin:0;padding:0;overflow:hidden;background:#100624}
.site-scroll{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:none;scroll-padding-top:var(--nav-height);background:var(--paper);isolation:isolate;-webkit-overflow-scrolling:touch}
.home .header{position:sticky;top:0;z-index:50;height:var(--nav-height);min-height:var(--nav-height);margin-bottom:calc(-1 * var(--nav-height));padding:0 32px;background:transparent;color:#fff;border:0;box-shadow:none;transition:background-color .2s,color .2s}
.home .header:before{content:none}
.home .header.is-scrolled,.home .header:has(.menu-toggle[aria-expanded="true"]){color:var(--ink);background:#f4f4f4;box-shadow:0 1px 0 #24005212}
.home .mobile-nav{position:sticky;top:var(--nav-height);z-index:51;color:var(--ink);background:var(--paper);max-height:calc(100dvh - var(--nav-height));overflow-y:auto;margin:0 6px}
.home .mobile-nav:not([hidden]){position:fixed;left:0;right:0}
.home main{margin:0;padding:0 0 64px;background:var(--paper);overflow:clip}
.home .hero-v2{height:var(--opening-height,100dvh);min-height:var(--opening-height,100dvh);max-height:none;margin:0;border:0;border-radius:0;display:flex;flex-direction:column;overflow:hidden;background:#1e0645}
.home .hero-v2 .hero-top{padding-top:112px}
.home .hero-v2 .motion-toggle{top:98px}
.home .hero-v2 .hero-bottom{padding-bottom:40px}
.home .footer{margin:0;background:#100624;min-height:0;padding-bottom:max(36px,env(safe-area-inset-bottom,0px))}
@media(max-width:760px){
 body.home{--nav-height:56px}
 .home .header{padding:0 27px}
 .home .hero-v2 .hero-top{padding-top:98px}
 .home .hero-v2 .motion-toggle{top:85px}
 .home .hero-v2 .hero-bottom{padding-bottom:32px}
 .home main{padding-bottom:48px}
 .home .footer{padding-bottom:max(36px,env(safe-area-inset-bottom,0px))}
}
@media(max-height:650px){
 .home .hero-v2 .hero-top{padding-top:82px}
 .home .hero-brand-label{margin-bottom:20px}
 .home .hero-v2 .hero-bottom{padding-top:16px}
 .home .hero-v2 .hero-bottom>p{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.home .header{transition:none}}

@media(min-width:761px){.home .header{padding-left:var(--page-gutter);padding-right:var(--page-gutter)}}
