/* The light lives on the device. Everything around it is true black. */
.hero-copy { position: absolute; z-index: 4; left: max(8vw,calc(50% - 580px)); top: 43%; width: 450px; transform: translateY(-50%); }
.hero-copy h2 { margin: 0; color: #f1f0ed; font-size: clamp(96px,10.6vw,152px); line-height: .96; font-weight: 400; letter-spacing: -.075em; white-space: nowrap; }
@media (min-width:761px) { .hero-copy h2 { transform: translateX(-8px); } }
.hero-copy .hero-tagline { max-width: 370px; margin: 25px 0 14px; color: #e0e1de; font-size: clamp(25px,2.25vw,31px); line-height: 1.2; letter-spacing: -.045em; text-wrap: balance; }
.hero-copy .hero-support { margin: 0 0 30px; color: #a5a6a8; font-size: 16px; line-height: 1.5; letter-spacing: -.02em; }
.preorder-button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 27px; border: 1px solid #eeede8; border-radius: 999px; background: linear-gradient(180deg,#f7f6f2 0%,#eeede9 50%,#e5e4df 100%); color: #101010; box-shadow: inset 0 1px 0 #ffffffd9,inset 0 -1px 0 #b7b6b033,0 2px 5px #00000024; cursor: pointer; font: inherit; font-size: 14px; transition: box-shadow 160ms,border-color 160ms,color 160ms; }
.preorder-button:hover { border-color: #faf9f5; box-shadow: inset 0 1px 0 #fff,inset 0 -1px 0 #b7b6b026,0 3px 8px #0000002e; }
.preorder-button:active { border-color: #deddd8; box-shadow: inset 0 1px 2px #0000001a,inset 0 -1px 0 #ffffff66,0 1px 2px #0000001f; }
.preorder-button:focus-visible { outline-color: #fff; }
.hero-cue { position: absolute; z-index: 4; left: 50%; bottom: max(75px,9svh); transform: translateX(-50%); display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid #ffffff18; border-radius: 50%; background: #ffffff03; color: #bfc2c4; transition: border-color 160ms,color 160ms,background 160ms; }
.hero-cue:hover { border-color: #ffffff38; background: #ffffff08; color: #eceeed; }
.hero-cue svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; animation: hero-arrow 2.8s ease-in-out infinite; animation-play-state: paused; }
.hero-cue.is-moving svg { animation-play-state: running; }
@keyframes hero-arrow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
.hero-hand { position: absolute; z-index: 2; top: 0; left: 0; width: 920px; height: 942px; transform-origin: 0 0; pointer-events: none; }
.hero-hand-pose { position: absolute; inset: 0; }
.hero-hand-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-front-art { position: absolute; left: 93px; top: 9px; width: 374px; height: auto; opacity: 0; }
.hand-screen { position: absolute; top: 0; left: 0; width: 420px; height: 680px; transform-origin: 0 0; border-radius: 62px; overflow: hidden; isolation: isolate; }
.hand-screen .scene--intro { opacity: 1; visibility: visible; }
.hand-screen .mountain-position { top: 44%; }
.hand-screen .pixel-mountains { width: 132px; height: auto; }
.phone { aspect-ratio: 408 / 624; }
.phone .device-art { object-fit: contain; }
.phone .device-art, .hero-front-art { mask-image: linear-gradient(#000 0%,#000 48%,#0009 69%,#0002 86%,transparent 96%); }
.phone .phone-screen { inset: 3.6859% 5.8824% 3.6859% 5.6373%; border-radius: 16% / 9%; mask-image: linear-gradient(transparent 0%,#000 8%,#000 91%,transparent 100%); }
.reader-hero-art { display: block; width: min(100%,430px); max-height: 580px; object-fit: contain; margin: 30px auto 0; }
.reader-hero h2 { font-size: clamp(64px,11vw,104px); line-height: 1; letter-spacing: -.075em; }
.reader-hero .hero-tagline { max-width: 430px; margin: 22px 0 14px; color: #e0e1de; font-size: 25px; line-height: 1.25; letter-spacing: -.04em; text-wrap: balance; }
.reader-hero .hero-support { margin: 0 0 26px; color: #a5a6a8; font-size: 16px; line-height: 1.5; }
.reader-hero .preorder-button { margin-top: 0; }
@media (max-width:1100px) and (min-width:761px) {
  .hero-copy { left: 6vw; width: 320px; }
  .hero-copy h2 { font-size: clamp(80px,10.6vw,116px); }
  .hero-copy .hero-tagline { max-width: 290px; margin-top: 22px; font-size: 25px; }
  .hero-copy .hero-support { font-size: 14px; }
}
@media (max-width:760px) {
  .hero-copy { top: max(88px,12svh); left: 26px; right: 26px; width: auto; transform: none; text-align: center; }
  .hero-copy h2 { font-size: clamp(68px,18.5vw,96px); }
  .hero-copy .hero-tagline { max-width: 280px; margin: 18px auto 11px; font-size: 22px; line-height: 1.2; }
  .hero-copy .hero-support { margin: 0 0 22px; font-size: 14px; line-height: 1.45; }
  .hero-copy .preorder-button { min-height: 46px; padding-inline: 25px; font-size: 13px; }
  .hero-cue { bottom: 67px; }
}
@media (max-width:760px) {
  .is-compact .hero-copy { top: 74px; }
  .is-compact .hero-copy h2 { font-size: clamp(56px,15.4vw,68px); }
  .is-compact .hero-copy .hero-tagline { max-width: 260px; margin: 13px auto 9px; font-size: 19px; }
  .is-compact .hero-copy .hero-support { margin-bottom: 18px; font-size: 13px; }
  .is-compact .hero-copy .preorder-button { min-height: 44px; }
  .is-compact .hero-cue { bottom: 57px; }
}
/* Keep the short portrait opening steady if its module arrives after the fade. */
@media (max-width:760px) and (max-height:800px) {
  html.is-story-loading .hero-copy { top: 74px; }
  html.is-story-loading .hero-copy h2 { font-size: clamp(56px,15.4vw,68px); }
  html.is-story-loading .hero-copy .hero-tagline { max-width: 260px; margin: 13px auto 9px; font-size: 19px; }
  html.is-story-loading .hero-copy .hero-support { margin-bottom: 18px; font-size: 13px; }
  html.is-story-loading .hero-copy .preorder-button { min-height: 44px; }
  html.is-story-loading .hero-cue { bottom: 57px; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-cue svg { animation: none; }
  .preorder-button, .hero-cue { transition: none; }
  .hero-hand { will-change: auto; }
}