/* A quiet opening: audience choice in the header, one action in the hero. */
.home-header .audience{display:flex;flex-shrink:0;gap:0;margin:0;padding:3px;border:1px solid #ffffff70;background:#05133738;border-radius:3px}
.home-header .audience :is(button,a){min-height:42px;padding:8px 17px;border:0;border-radius:1px;color:#fff;font-size:14px;line-height:1.3;letter-spacing:0;transition:background .2s,color .2s}
.home-header .audience :is(button,a):is([aria-selected=true],[aria-current=page]){background:var(--paper);color:var(--navy)}
.home-header .audience :is(button,a):hover:not(:is([aria-selected=true],[aria-current=page])){background:#ffffff16}
.home-header .audience :is(button,a):focus-visible,.hero a:focus-visible,.hero button:focus-visible,#hero-panel:focus-visible{outline:2px solid var(--paper);outline-offset:5px}
.hero,.hero[data-audience=guest]{height:auto;min-height:0;max-height:none}
.hero .hero-body{position:relative;inset:auto;display:flex;align-items:center;min-height:clamp(660px,100svh,1000px);padding:155px 8% 115px}
.hero .hero-main,.hero[data-audience=guest] .hero-main{max-width:850px;width:100%;min-width:0}
/* Center the headline in the hero, with the description and action beneath it. */
.hero[data-audience=owner] .hero-body{padding-top:calc(100px + clamp(100px,18svh,180px));padding-bottom:100px}
.hero[data-audience=owner] #hero-panel{min-height:0}
.hero .hero-main h1{font-size:clamp(64px,7.6vw,112px);line-height:1.04;letter-spacing:-2.5px}
.hero .hero-main #hero-description{font-size:18px;line-height:1.65;max-width:470px;color:#ffffffe8;margin-top:25px}
.hero .hero-main #hero-link{font-size:14px;margin-top:32px;padding:17px 24px;gap:35px}
.hero[data-audience=owner] .hero-media img{object-position:50% 50%;animation:none}
@media(max-width:1150px){
  .home-header{gap:20px}
  .home-header .main-nav{gap:19px}
  .home-header .main-nav a{font-size:13px}
  .home-header .audience :is(button,a){padding:8px 14px}
  .hero .hero-body{padding-left:6%;padding-right:6%}
}
@media(max-width:950px){
  .home-header .audience{margin-left:auto}
  .home-header .main-nav{gap:22px}
  .home-header .main-nav a{font-size:16px}
  .hero .hero-body{padding:145px 7% 115px}
  .hero .hero-main h1{font-size:clamp(60px,9vw,80px)}
}
@media(max-width:650px){
  .home-header{height:84px;padding:0 6%;gap:12px}
  .home-header .logo{width:120px}
  .home-header .audience{padding:2px}
  .home-header .audience :is(button,a){padding:8px 11px;min-height:40px;font-size:14px}
  .home-header #menu{padding:8px 0 8px 4px}
  .home-header .main-nav{top:84px}
  .hero .hero-body{min-height:max(630px,100svh);padding:135px 7% 125px}
  .hero .hero-main h1{font-size:clamp(54px,14vw,78px);letter-spacing:-1.6px}
  .hero .hero-main #hero-description{font-size:16px;max-width:320px;margin-top:22px}
  .hero .hero-main #hero-link{margin-top:28px}
}
@media(max-width:360px){
  .home-header{padding-left:5%;padding-right:5%;gap:9px}
  .home-header .logo{width:100px}
  .home-header .audience :is(button,a){padding-left:9px;padding-right:9px}
  .hero[data-audience=guest] .hero-main h1{font-size:46px}
}
@media(prefers-reduced-motion:reduce){.home-header .audience :is(button,a){transition:none}}

.home-header .audience a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}

.hero-media video.has-frame{opacity:1}