/* The studio belongs only to the opening. The scroll controller fades it out
   before the existing phone chapters, cards and provider handoff begin. */
.opening { background: #080909; }
.masthead { background: transparent; }
.site-header { min-height: 74px; border-bottom: 0; }
.brand { isolation: isolate; background: #080909; }
.story-stage { padding-top: 76px; }
.hero-copy { max-width: 1000px; }
.hero-copy h1 { font-size: clamp(38px, 3.8vw, 62px); line-height: 1.04; }
.hero-copy .eyebrow { font-size: 10px; margin-bottom: 10px; }
.hero-copy .intro { max-width: 800px; margin: 12px auto 0; font-size: clamp(15px, 1.25vw, 20px); line-height: 1.5; }
.hero-availability { display: table; margin: 12px auto 0; padding: 12px 27px; border-radius: 99px; background: #f8f8f8; color: #080909; font-size: 13px; line-height: 1.4; font-weight: 600; }
.hero-copy .beta-note, :is(.has-scroll-story, .story-measuring, .story-booting) .hero-copy .beta-note { position: static; display: block; margin: 10px 0 0; color: #b3b3b3; font-size: 10px; line-height: 1.5; }
.hero-availability, .hero-copy .beta-note { opacity: var(--availability-opacity, 1); }
.hero-art { width: min(620px, 95%); aspect-ratio: 1; margin: 8px auto 40px; }
.hero-art::after { content: ''; position: absolute; z-index: 0; top: calc(var(--phone-ground, 94%) - 7px); left: 42%; width: 40%; height: 22px; transform: translateX(-50%); background: radial-gradient(ellipse, #000a, transparent 70%); filter: blur(4px); opacity: var(--studio-opacity, 1); pointer-events: none; }
.art-glow { opacity: calc(1 - var(--studio-opacity, 1)); }
.landing-light { --studio-horizon: 69%; position: absolute; z-index: 0; pointer-events: none; inset: 0 0 auto; height: max(1000px, 100svh); overflow: hidden; opacity: var(--studio-opacity, 1); background: radial-gradient(ellipse 43% 45% at 50% 73%, #ffffff16, #ffffff06 42%, transparent 78%), #080909; }
.landing-light::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 46% 24% at 50% var(--studio-horizon), #ffffff50, #ffffff0a 66%, transparent 100%); }
.landing-light::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 34% 2% at 50% var(--studio-horizon), #fff, #ffffff00); }
.landing-floor { position: absolute; top: var(--studio-horizon); left: 0; width: 100%; height: calc(100% - var(--studio-horizon)); background: radial-gradient(ellipse 31% 100% at 50% 45%, #e4e4e45c, #77777726 49%, transparent 85%), radial-gradient(ellipse 42% 130% at 50% 0%, #99999978 0%, #4949495c 40%, #10111100 83%), linear-gradient(#090a0a, #161718 40%, #101111); }
.landing-floor::before { content: ''; position: absolute; top: -29px; left: -10%; width: 120%; height: 59px; background: radial-gradient(ellipse at center, #fff 0%, #fffffff0 16%, #ffffff90 37%, #ffffff12 66%, transparent 74%); filter: blur(10px); }
.landing-floor::after { content: ''; position: absolute; inset: 8px 0 0; opacity: .16; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='256'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65 .3' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23grain)' d='M0 0h512v256H0z'/%3E%3C/svg%3E"); mask-image: radial-gradient(ellipse at 50% 0%, #000, transparent 90%); }
.story-stage:not([data-chapter]) .phone-scene, .story-stage[data-studio] .phone-scene { -webkit-box-reflect: below var(--phone-reflection-offset, -64px) linear-gradient(transparent 80%, rgb(255 255 255 / var(--studio-reflection, .22))); }
.phone-fallback { z-index: 1; }
.has-scroll-story .phone-poster[src*='poster-landing'] { transform: none; }
:is(.has-scroll-story, .story-measuring, .story-booting) .landing-light { height: 100%; }
:is(.has-scroll-story, .story-measuring, .story-booting) .hero-copy { top: max(52px, 5.6svh); left: 0; right: 0; width: calc(100% - 40px); max-width: 1000px; margin-inline: auto; text-align: center; transform: translateY(var(--intro-shift, 0px)); }
:is(.has-scroll-story, .story-measuring, .story-booting) .hero-copy h1 { font-size: clamp(38px, 3.8vw, 62px); }
:is(.has-scroll-story, .story-measuring, .story-booting) .hero-copy .intro { max-width: 800px; margin: 12px auto 0; }
.story-chapters { width: min(680px, calc(100% - 40px)); }
.story-chapters a { color: #c6c6c6; }
:is(.has-scroll-story, .story-measuring, .story-booting) .scroll-hint { display: none; }
@media (max-width: 899px) {
  :is(.has-scroll-story, .story-measuring, .story-booting) .hero-copy { top: 88px; }
  .hero-copy h1, :is(.has-scroll-story, .story-measuring, .story-booting) .hero-copy h1 { font-size: clamp(34px, 5.8vw, 48px); }
  .hero-copy .intro, :is(.has-scroll-story, .story-measuring, .story-booting) .hero-copy .intro { max-width: 42ch; font-size: 15px; }
}
@media (max-width: 600px) {
  .site-header { min-height: 96px; }
  .story-stage { padding-top: 112px; }
  .landing-light { --studio-horizon: 73%; height: max(780px, 100svh); }
  :is(.has-scroll-story, .story-measuring, .story-booting) .hero-copy { top: 112px; }
  .hero-copy h1, :is(.has-scroll-story, .story-measuring, .story-booting) .hero-copy h1 { font-size: clamp(30px, 8.2vw, 42px); }
  .hero-copy .intro, :is(.has-scroll-story, .story-measuring, .story-booting) .hero-copy .intro { max-width: 34ch; margin-top: 12px; font-size: 13px; }
  .hero-copy .eyebrow { font-size: 9px; }
  .hero-availability { margin-top: 12px; padding: 10px 22px; font-size: 12px; }
  .hero-copy .beta-note { margin-top: 10px; font-size: 9px; }
}
@media (min-width: 900px) and (max-height: 740px) {
  :is(.has-scroll-story, .story-measuring, .story-booting) .hero-copy { top: 74px; }
  .hero-copy h1, :is(.has-scroll-story, .story-measuring, .story-booting) .hero-copy h1 { font-size: 42px; }
  .hero-copy .eyebrow { margin-bottom: 6px; }
  .hero-copy .intro, :is(.has-scroll-story, .story-measuring, .story-booting) .hero-copy .intro { margin-top: 8px; font-size: 15px; }
  .hero-availability { padding-block: 9px; margin-top: 10px; }
  .hero-copy .beta-note { margin-top: 8px; }
}
@media (max-width: 600px) and (max-height: 700px) {
  .hero-copy .eyebrow { margin-bottom: 6px; }
  .hero-copy h1, :is(.has-scroll-story, .story-measuring, .story-booting) .hero-copy h1 { font-size: 30px; }
  .hero-availability { padding-block: 8px; margin-top: 8px; }
  .hero-copy .beta-note { margin-top: 8px; }
}