/* XYZ opening stage. One fluid unit keeps the composition tied to both viewport axes. */
:root{--u:min(1vw,1.55svh);--stage-ink:#0b0a0f;--stage-bone:#f4f2ed;--stage-muted:#a29fae;--stage-lavender:#b79ae8;--stage-light:#cdb8f4;--stage-violet:#6a45d6}
.masthead,.xyz-hero,.listening-bar{font-family:'Figtree',sans-serif;color:var(--stage-bone);background:var(--stage-ink);box-sizing:border-box}
.masthead{position:relative;z-index:30;min-height:calc(8.2 * var(--u));padding:calc(2 * var(--u)) max(calc(4.6 * var(--u)),calc((100% - 91 * var(--u))/2));display:flex;align-items:center;justify-content:space-between;gap:calc(3 * var(--u))}
.masthead .logo{flex-shrink:0}.masthead .logo img{width:calc(7.5 * var(--u));height:auto;display:block}
.masthead nav{display:flex;align-items:center;gap:calc(2.35 * var(--u));font-size:calc(1.15 * var(--u));font-weight:600}
.masthead nav a{white-space:nowrap}.masthead nav a:hover{color:var(--stage-light)}
.masthead .nav-cta{border:1px solid #77737e;border-radius:999px;padding:calc(.8 * var(--u)) calc(1.6 * var(--u));font-size:inherit}
.masthead .menu-toggle{display:none}
.xyz-hero{isolation:isolate;position:relative;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);align-items:center;column-gap:calc(2 * var(--u));padding:calc(3 * var(--u)) max(calc(4.6 * var(--u)),calc((100% - 91 * var(--u))/2)) calc(4.5 * var(--u));overflow:clip}
.xyz-hero::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 79% 51%,#6a45d62f 0%,#6a45d61c 24%,transparent 60%)}
.xyz-hero-copy{min-width:0;position:relative;z-index:1}
.xyz-kicker{display:flex;align-items:center;gap:calc(1 * var(--u));font-size:calc(1 * var(--u));font-weight:700;line-height:1.3;letter-spacing:calc(.095 * var(--u));text-transform:uppercase;margin:0 0 calc(2.1 * var(--u))}
.xyz-kicker>span{width:calc(3.5 * var(--u));height:calc(.14 * var(--u));flex-shrink:0;background:var(--stage-lavender)}
#hero-title{font-family:'Big Shoulders Display',Impact,sans-serif;font-size:calc(8.1 * var(--u));line-height:.91;font-weight:900;letter-spacing:calc(-.22 * var(--u));text-transform:uppercase;margin:0 0 calc(2.4 * var(--u))}
.headline-line{display:block;overflow:clip;padding-bottom:calc(.17 * var(--u));margin-bottom:calc(-.17 * var(--u));white-space:nowrap}
.headline-line>span{display:block;color:var(--stage-bone);animation:xyz-rise .75s cubic-bezier(.2,.7,.2,1) both}
.headline-line:nth-child(2)>span{animation-delay:.13s}.headline-line:nth-child(3)>span{color:var(--stage-lavender);animation-delay:.26s}
.xyz-intro{font-size:calc(1.5 * var(--u));line-height:1.6;font-weight:400;color:#d1ced8;margin:0 0 calc(2.2 * var(--u));animation:xyz-appear .7s .5s both}
.xyz-intro>span{display:block}
.xyz-actions{display:flex;align-items:center;gap:calc(1.7 * var(--u));animation:xyz-appear .7s .62s both}
.xyz-watch{display:inline-flex;align-items:center;justify-content:center;gap:calc(.8 * var(--u));padding:calc(1.12 * var(--u)) calc(2 * var(--u));border-radius:999px;background:var(--stage-lavender);color:var(--stage-ink);font-size:calc(1.3 * var(--u));font-weight:700;line-height:1.3;box-shadow:0 calc(.8 * var(--u)) calc(2 * var(--u)) #b79ae824}
.xyz-watch:hover{background:var(--stage-light)}.xyz-watch svg{width:calc(1.25 * var(--u));height:calc(1.25 * var(--u));flex-shrink:0}
.xyz-find{font-size:calc(1.15 * var(--u));font-weight:600;text-decoration:underline;text-decoration-color:#77737e;text-underline-offset:calc(.45 * var(--u))}
.xyz-find:hover{color:var(--stage-light)}
.xyz-onair{display:flex;align-items:center;gap:calc(.8 * var(--u));margin:calc(2 * var(--u)) 0 0;color:var(--stage-muted);font-size:calc(.95 * var(--u));font-weight:600;line-height:1.4;letter-spacing:calc(.065 * var(--u));text-transform:uppercase;animation:xyz-appear .7s .74s both}
.xyz-wave{display:flex;align-items:center;gap:calc(.18 * var(--u));height:calc(1.4 * var(--u));flex-shrink:0}.xyz-wave i{width:calc(.2 * var(--u));height:35%;border-radius:999px;background:var(--stage-lavender);transform-origin:center;animation:xyz-wave 1s ease-in-out infinite alternate}.xyz-wave i:nth-child(2){height:50%;animation-delay:-.4s}.xyz-wave i:nth-child(3){height:90%;animation-delay:-.7s}.xyz-wave i:nth-child(4){height:100%;animation-delay:-.2s}.xyz-wave i:nth-child(5){height:65%;animation-delay:-.55s}
.xyz-cast{min-width:0;width:100%;margin:calc(5.5 * var(--u)) 0 0;align-self:center}
.xyz-cast img{display:block;width:100%;height:auto;max-width:100%;aspect-ratio:auto;mask-image:linear-gradient(to right,transparent 0%,#000 3%,#000 97%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 5%,#000 94%,transparent 100%);mask-composite:intersect;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 3%,#000 97%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 5%,#000 94%,transparent 100%);-webkit-mask-composite:source-in}
.xyz-cast figcaption{display:flex;justify-content:space-between;gap:calc(1 * var(--u));padding:calc(.55 * var(--u)) calc(1.8 * var(--u)) 0;color:var(--stage-muted);text-transform:uppercase;font-size:calc(.78 * var(--u));font-weight:600;line-height:1.4;letter-spacing:calc(.09 * var(--u))}
.listening-bar{display:flex;justify-content:space-between;align-items:center;gap:calc(2 * var(--u));padding:calc(1.8 * var(--u)) max(calc(4.6 * var(--u)),calc((100% - 91 * var(--u))/2));border-block:1px solid #ffffff1c;background:linear-gradient(115deg,#0b0a0ff5,#15121bdc);backdrop-filter:blur(20px)}
.listening-bar>span{color:var(--stage-muted);text-transform:uppercase;letter-spacing:calc(.12 * var(--u));font-size:calc(.94 * var(--u));font-weight:700;white-space:nowrap}
.listening-bar>a{display:flex;align-items:center;gap:calc(.7 * var(--u));font-size:calc(1.25 * var(--u));font-weight:600;white-space:nowrap}
.listening-bar>a::before{content:'';width:calc(.48 * var(--u));height:calc(.48 * var(--u));border-radius:50%;background:var(--stage-violet);flex-shrink:0;transition:background .2s}
.listening-bar>a:hover::before{background:var(--stage-lavender)}
.masthead a:focus-visible,.masthead button:focus-visible,.xyz-hero a:focus-visible,.listening-bar a:focus-visible{outline:3px solid var(--stage-light);outline-offset:5px}
@keyframes xyz-rise{from{transform:translateY(110%)}to{transform:translateY(0)}}
@keyframes xyz-appear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes xyz-wave{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
@media(max-width:800px),(max-aspect-ratio:1/1){
 .masthead{min-height:calc(20 * var(--u));padding:calc(4.2 * var(--u)) calc(5.1 * var(--u));gap:calc(4 * var(--u))}.masthead .logo img{width:calc(17.2 * var(--u))}
 .masthead .menu-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(.85 * var(--u));width:calc(11 * var(--u));height:calc(11 * var(--u));padding:0;border:1px solid #ffffff26;border-radius:50%;background:transparent;flex-shrink:0}
 .menu-toggle span{display:block;width:calc(4 * var(--u));height:calc(.45 * var(--u));background:var(--stage-bone);transition:transform .2s,opacity .2s}.menu-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(calc(1.3 * var(--u))) rotate(45deg)}.menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}.menu-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(calc(-1.3 * var(--u))) rotate(-45deg)}
 .masthead nav{display:none;position:absolute;top:100%;left:0;right:0;padding:calc(5 * var(--u));background:#0b0a0ffa;border-bottom:1px solid #ffffff26;font-size:calc(4.2 * var(--u));gap:calc(3 * var(--u));align-items:stretch}.masthead nav.open{display:flex;flex-direction:column}.masthead nav a{padding:calc(2 * var(--u)) 0}.masthead .nav-cta{padding:calc(2.5 * var(--u)) calc(4 * var(--u));text-align:center}
 .xyz-hero{display:flex;flex-direction:column;padding:0 0 calc(12 * var(--u));gap:0;overflow:clip}.xyz-hero::before{background:radial-gradient(ellipse at 78% 67%,#6a45d630,transparent 65%)}
 .xyz-cast{order:0;width:100%;margin:0}.xyz-cast img{width:100%;height:auto}.xyz-cast figcaption{display:none}
 .xyz-hero-copy{order:1;width:100%;padding:0 calc(5.1 * var(--u));margin-top:calc(-8.7 * var(--u))}
 .xyz-kicker{font-size:calc(3.05 * var(--u));letter-spacing:calc(.23 * var(--u));gap:calc(3 * var(--u));line-height:1.2;margin:0 0 calc(2.5 * var(--u));max-width:calc(83 * var(--u))}.xyz-kicker>span{width:calc(10.5 * var(--u));height:calc(.45 * var(--u))}
 #hero-title{font-size:calc(15 * var(--u));line-height:.9;letter-spacing:calc(-.34 * var(--u));margin:0 0 calc(3.2 * var(--u))}
 .xyz-intro{font-size:calc(4 * var(--u));line-height:1.55;margin-bottom:calc(3.2 * var(--u))}
 .xyz-actions{gap:calc(6 * var(--u));flex-wrap:wrap}.xyz-watch{font-size:calc(4 * var(--u));padding:calc(3.1 * var(--u)) calc(5.5 * var(--u));gap:calc(2.4 * var(--u))}.xyz-watch svg{width:calc(3.5 * var(--u));height:calc(3.5 * var(--u))}.xyz-find{font-size:calc(3.7 * var(--u));text-underline-offset:calc(1.1 * var(--u))}
 .xyz-onair{font-size:calc(2.8 * var(--u));line-height:1.4;letter-spacing:calc(.17 * var(--u));gap:calc(3 * var(--u));margin-top:calc(3 * var(--u))}.xyz-wave{height:calc(4.5 * var(--u));gap:calc(.6 * var(--u))}.xyz-wave i{width:calc(.7 * var(--u))}
 .listening-bar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(6 * var(--u)) calc(5 * var(--u));padding:calc(4 * var(--u)) calc(5.1 * var(--u)) calc(5 * var(--u))}.listening-bar>span{grid-column:1/-1;font-size:calc(2.9 * var(--u));letter-spacing:calc(.3 * var(--u))}.listening-bar>a{font-size:calc(3.7 * var(--u));gap:calc(2.5 * var(--u))}.listening-bar>a::before{width:calc(1.7 * var(--u));height:calc(1.7 * var(--u))}
}
@media(prefers-reduced-motion:reduce){.headline-line>span,.xyz-intro,.xyz-actions,.xyz-onair,.xyz-wave i{animation:none!important;opacity:1;transform:none}.masthead *,.xyz-hero *,.listening-bar *{transition:none!important}}

/* Platform marks share an optical size and evenly spaced link columns. */
.listening-bar{display:grid;grid-template-columns:1.2fr repeat(5,minmax(0,1fr));gap:calc(1.5 * var(--u))}
.listening-bar>a{justify-content:center;min-width:0;gap:calc(.7 * var(--u));font-size:calc(1.15 * var(--u));min-height:44px}
.listening-bar>a::before{content:none}
.listening-bar .platform-logo{display:block;width:calc(1.5 * var(--u));height:calc(1.5 * var(--u));object-fit:contain;flex-shrink:0;color:#fff}
.listening-bar>a:hover{color:var(--stage-light)}
/* Expand into the available outer gutter without moving toward the headline. */
@media(min-width:801px) and (min-aspect-ratio:1001/1000){.xyz-cast{width:110%;margin-top:calc(2.5 * var(--u))}}
@media(max-width:800px),(max-aspect-ratio:1/1){
 .listening-bar{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:calc(4 * var(--u));row-gap:calc(2 * var(--u));padding:calc(5 * var(--u)) calc(5.1 * var(--u))}
 .listening-bar>span{grid-column:1/-1;white-space:normal;margin-bottom:calc(1.5 * var(--u));font-size:calc(2.9 * var(--u))}
 .listening-bar>a{justify-content:flex-start;font-size:calc(3.7 * var(--u));gap:calc(2.5 * var(--u));padding:calc(1.5 * var(--u)) 0;min-height:44px;white-space:normal;line-height:1.3}
 .listening-bar .platform-logo{width:calc(5.5 * var(--u));height:calc(5.5 * var(--u))}
 .listening-bar>a:last-child{grid-column:1/-1;justify-content:center}
}

/* Compact, balanced platform navigation and the transition into the demo. */
@media(max-width:800px),(max-aspect-ratio:1/1){
 .xyz-hero{padding-bottom:calc(7 * var(--u))}
 .xyz-actions{justify-content:center;gap:calc(5 * var(--u))}
 .xyz-onair{justify-content:center;text-align:center}
 .listening-bar{padding-block:calc(4 * var(--u));row-gap:calc(1.5 * var(--u));column-gap:calc(3 * var(--u))}
 .listening-bar>span{text-align:center;margin-bottom:calc(1 * var(--u))}
 .listening-bar>a{justify-content:center;min-height:44px;padding:calc(1 * var(--u)) 0;font-size:calc(3.6 * var(--u));gap:calc(2 * var(--u))}
 .listening-bar .platform-logo{width:calc(5.2 * var(--u));height:calc(5.2 * var(--u))}
}