/* One opening scene, sized to the usable viewport including browser chrome. */
:root{--opening-header:76px}
body>header{height:var(--opening-header)}
.opening-world{height:calc(100svh - var(--opening-header));min-height:540px;max-height:1050px}
.hero-copy{padding-top:clamp(20px,4svh,48px);max-width:65%;}
.hero-copy h1{font-size:clamp(42px,5.7vw,84px);margin:18px 0;line-height:1.02}
.hero-copy p{font-size:clamp(13px,1.15vw,17px);line-height:1.5;margin:12px 0}
.hero-copy .lilac-button{margin-top:12px;padding:14px 24px}
.hero-copy .explore-link{margin-top:16px}
.city-art{top:auto;bottom:0;height:72%;object-position:center 65%;opacity:1;mask-image:linear-gradient(transparent,#000 30%,#000 87%,transparent)}
.phone-frame{top:12%;right:8%;width:clamp(225px,35svh,340px)}
.city-caption{bottom:38px;left:6vw;max-width:40%}
.city-caption strong{font-size:clamp(30px,3.6vw,48px);margin:12px 0}
.motion-toggle{bottom:22px;right:6vw}
@media(max-width:900px) and (min-width:651px){.hero-copy{max-width:65%}.hero-copy h1{font-size:5.8vw}.phone-frame{right:5%;top:22%;width:clamp(225px,32svh,290px)}.city-caption strong{font-size:34px}}
@media(max-width:650px){
 :root{--opening-header:62px}
 body>header{padding:0 5vw}.brand{font-size:20px}header nav{gap:14px}header nav a[href="#discover"],header nav a[href="#the-app"]{display:none}header nav a[href="/listen/"]{display:inline;font-size:10px}header .get{font-size:10px;padding:11px 15px}
 .opening-world{height:calc(100svh - var(--opening-header));min-height:520px;max-height:850px}
 .hero-copy{padding:22px 5vw 0;max-width:none}.signature{font-size:10px}
 .hero-copy h1{font-size:clamp(33px,9vw,50px);margin:14px 0 11px;max-width:95%;line-height:1.04}
 .hero-copy p{font-size:12px;line-height:1.5;max-width:285px;margin:9px 0}
 .hero-copy .lilac-button{padding:12px 20px;margin-top:8px;font-size:11px;gap:24px}.hero-copy .explore-link{display:inline-block;margin:0 0 0 12px;font-size:8px;max-width:100px;vertical-align:middle}
 .city-art{bottom:0;top:auto;height:65%;object-position:58% 75%;opacity:.9}
 .phone-frame{top:auto;bottom:58px;right:7%;width:180px;padding:5px;border-radius:29px;transform:rotate(5deg);animation:phoneFloat 8s ease-in-out infinite alternate}
 .phone-frame .app-scene{padding:20px 9px 10px;border-radius:23px}.phone-island{height:10px;width:48px;top:10px}.app-toolbar{padding-top:0}.brand-mini{font-size:11px}.app-toolbar>span{width:18px;height:18px;font-size:14px}.app-greeting h2{font-size:15px;margin-top:10px}.app-greeting p{font-size:7px}.app-mood-card{padding:10px;border-radius:15px}.app-mood-card h3{font-size:16px}.app-mood-card p{font-size:7px}.app-kicker{font-size:5px}.app-station{margin-top:10px;gap:5px}.app-station strong{font-size:8px}.app-station span{font-size:5px}.station-badge{width:25px;height:25px;font-size:8px}.app-play{padding:8px 4px;font-size:6px}.app-scene .moods{gap:4px;margin:8px 0}.app-scene .moods button{font-size:6px;padding:8px 2px}.app-together{padding:8px 5px;gap:5px}.app-together strong{font-size:7px}.app-together small{font-size:5px}.phone-label{font-size:4px;bottom:-18px;letter-spacing:.6px}
 .city-caption{left:5vw;bottom:42px;max-width:43%;padding-right:4px}.city-caption>span{font-size:5px;letter-spacing:1px}.city-caption strong{font-size:clamp(22px,6vw,29px);line-height:1.08;letter-spacing:-1px;margin:9px 0}.city-caption a{font-size:8px}.motion-toggle{bottom:10px;font-size:7px;padding:7px 10px}
}
@media(max-width:650px) and (min-height:820px){.phone-frame{width:215px;bottom:75px}.city-caption{bottom:70px}.hero-copy{padding-top:32px}}
@media(min-width:651px) and (max-height:720px){:root{--opening-header:64px}.hero-copy{padding-top:16px}.hero-copy h1{font-size:clamp(40px,5.3vw,67px);margin:12px 0}.signature{font-size:12px}.hero-copy p{font-size:13px}.phone-frame{top:9%;width:235px}.city-caption{bottom:26px}.city-caption strong{font-size:32px}}
@media(max-width:650px){
 .phone-frame .app-greeting p{margin-bottom:10px}.phone-frame .app-mood-card{min-height:0}.phone-frame .app-mood-card h3{margin:8px 0 5px}.phone-frame .app-play{margin-top:10px}.phone-frame .app-play>span{font-size:10px}.phone-frame .app-station{margin-top:8px}.phone-frame .app-station>div:first-child{width:25px;height:25px;min-width:25px}.phone-frame .moods button{min-height:26px}.phone-frame .app-together{margin-top:7px}.phone-frame .app-together>span{font-size:12px}.phone-frame .app-together small{line-height:1.2}
}
@media(max-width:650px){.phone-frame{--phone-fit:.88;transform-origin:bottom right;transform:rotate(4deg) scale(var(--phone-fit));animation:mobilePhoneFloat 8s ease-in-out infinite alternate}.hero-copy .explore-link{display:none}}
@media(max-width:650px) and (max-height:700px){.phone-frame{--phone-fit:.78}}
@media(max-width:650px) and (max-height:630px){.phone-frame{--phone-fit:.65;bottom:42px}.hero-copy{padding-top:16px}}
@keyframes mobilePhoneFloat{to{transform:rotate(2deg) translateY(-7px) scale(var(--phone-fit))}}
@media(min-width:651px) and (max-height:720px){.phone-frame{transform-origin:top right;transform:rotate(4deg) scale(.8);animation:compactPhoneFloat 8s ease-in-out infinite alternate}}
@keyframes compactPhoneFloat{to{transform:rotate(2deg) translateY(-7px) scale(.8)}}