/* Home v2 and Beta Teaser: the handoff's viewport values, expressed as CSS. */
.home-v2{min-height:100dvh}
[data-beta-root]{min-height:100dvh!important}
.home-v2-header [data-fullscreen-slot],.beta-header [data-fullscreen-slot]{display:contents}
.beta-header-actions{display:flex;align-items:center;gap:8px}
/* These wrappers are layout-neutral on desktop and form columns on phones. */
.beta-intro,.beta-actions{display:contents}
/* Essential content is visible immediately; only later interactions may reveal. */
.home-v2-eyebrow,.home-v2-wordmark,.home-v2-story,.home-v2-status,.home-v2-cta-row{animation:none}

@media (max-width:600px) and (orientation:portrait), (max-height:500px) and (orientation:landscape) {
  .home-v2-header{grid-template-columns:minmax(0,1fr) auto;gap:10px}
  .home-v2-badge,.home-v2-vertical{display:none}
  .home-v2-header .brand-word{font-size:22px}
  .home-v2-discord{padding:11px 16px}
  .home-v2-enter{padding:12px 16px}
  .home-v2-hero{flex-direction:row;align-items:flex-end;gap:16px}
  .home-v2-intro{flex:1 1 520px;width:auto}
  .home-v2-wordmark,.home-v2-wordmark-echo{font-size:min(18.5cqw,30dvh)}
  .home-v2-eyebrow{margin-bottom:clamp(8px,1.4dvh,16px)}
  .home-v2-story{margin-top:clamp(14px,2.4dvh,28px);padding-top:clamp(14px,2dvh,22px)}
  .home-v2-tagline{font-size:clamp(26px,min(3.4vw,5.4dvh),54px)}
  .home-v2-cta-row{margin-top:clamp(14px,2.4dvh,26px)}
  .home-v2-cta{height:clamp(56px,7.4dvh,68px)}
  .home-v2-status-name{padding:12px 18px}
  .home-v2-region{font-size:30px}
  /* The rendered handoff anchors both decorative claws to the top left. */
  .home-v2-claw{left:0;right:auto;top:0;height:128dvh}
  .beta-claw{left:0!important;right:auto!important;top:0!important;height:130dvh!important}
  .home-v2-scan{height:18dvh}
  .beta-content{container-type:normal!important}
  .beta-intro,.beta-actions{display:flex;flex-direction:column;width:100%;min-width:0;align-items:center}
  .beta-intro{container-type:inline-size}
  .beta-title{font-size:min(9cqw,13dvh)!important}
  [data-beta-date]{font-size:min(21cqw,30dvh)!important}
  .beta-footer{padding:10px 16px!important}
  .beta-disclaimer{display:none}
}

/* width <= height and width <= 600: portrait phones. */
@media (max-width:600px) and (orientation:portrait) {
  .home-v2-header{padding:14px 16px}
  .home-v2-enter{display:none}
  .home-v2-hero{padding:0 16px 16px}
  .home-v2-status{flex:1 1 100%;min-width:0;width:100%}
  .home-v2-description{min-width:0}
  .beta-header{padding:14px 16px!important}
  .beta-chip{display:none!important}
  .beta-content{gap:20px!important;padding:16px!important}
  .beta-intro,.beta-actions{gap:20px}
  .beta-countdown [data-beta-unit]{font-size:40px!important}
  .beta-countdown>div{padding:clamp(14px,2.2dvh,22px) 8px!important}
}

/* Keep both header links visible on the narrowest portrait phones. */
@media (max-width:360px) and (orientation:portrait) {
  .home-v2-header{padding-right:12px;padding-left:12px;gap:6px}
  .home-v2-header .brand{gap:6px;min-width:0}
  .home-v2-header .brand-word{font-size:20px}
  .home-v2-header nav{gap:6px}
  .home-v2-discord{padding-right:10px;padding-left:10px}
}

/* width > height and height <= 500: landscape phones. */
@media (max-height:500px) and (orientation:landscape) {
    .home-v2-header{padding:8px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left))}
    .home-v2-hero{padding:0 max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left))}
    .home-v2-intro{flex:1 1 380px}
    .home-v2-status{flex:0 1 300px;min-width:260px;width:300px}
    .home-v2-pop,.home-v2-copy,.home-v2-description{display:none}
    .beta-header{padding:8px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left))!important}
    .beta-content{flex-direction:row!important;gap:12px!important;padding:6px max(20px,env(safe-area-inset-right)) 6px max(20px,env(safe-area-inset-left))!important;text-align:left!important}
    .beta-intro,.beta-actions{flex:1 1 0;gap:12px}
    .beta-intro,.beta-headline{align-items:flex-start!important}
    [data-beta-date]{font-size:min(21cqw,120px)!important}
    .beta-countdown>div{padding:10px 6px!important}
    .beta-countdown [data-beta-unit]{font-size:38px!important}
    .beta-footer{padding-right:max(16px,env(safe-area-inset-right))!important;padding-left:max(16px,env(safe-area-inset-left))!important}
}