/* Shared spacing and readable controls, desktop and mobile. */
.brand{font-weight:800;letter-spacing:-1.2px;gap:9px}
.brand svg{width:39px;height:39px}
.brand-description{font-size:14px;color:#a9c1c9;margin:0 0 20px;font-weight:500;letter-spacing:0}
.section-heading h2,.faq h2{margin-top:0}
.story-float p{margin-top:0}
.step-top>span:only-child{font-size:15px;letter-spacing:0;color:#092521}
.closing{padding-top:50px;padding-bottom:50px}
.closing h2{margin-top:0}
@media(max-width:700px){.brand svg{width:34px;height:34px}.brand-description{font-size:13px;margin-bottom:18px}.closing{padding:32px 20px}.step-top>span:only-child{font-size:14px}}
body{overflow-x:clip}
.header{display:grid;grid-template-columns:1fr auto 1fr}.header-cta{justify-self:end}
.header nav{justify-content:center}
.primary,.secondary{font-size:14px;font-weight:800;gap:9px}
.buttons .arrow{margin-left:2px;width:18px;height:18px}
.buttons>button{min-width:170px}
.eyebrow{font-size:11px;letter-spacing:1.4px}
.visual-caption,.visual-bottom{display:none}
.hero-note{font-size:12px;flex-wrap:wrap;line-height:1.6}
.lead{font-size:17px}
.story-float{transform:none}
.tiny-label{font-size:10px;letter-spacing:.9px}
.story-author{font-size:11px}
.hero-listen b{font-size:14px}.hero-listen small{font-size:12px}
.section-heading>p{font-size:15px}
.song h3{font-size:18px;line-height:1.4}
.song .genre{font-size:12px;line-height:1.6;min-height:38px}
.song-content{padding:14px 8px 5px}
.cover-tag{font-size:11px}
.player{gap:10px;margin-top:12px}
.play{width:44px;height:44px}.play svg{width:21px;height:21px;display:block}
.play svg:has(use[href="#play"]),.round-play svg:has(use[href="#play"]){transform:translateX(1px)}
.progress{appearance:none;-webkit-appearance:none;background:transparent;height:44px;margin:0}
.progress::-webkit-slider-runnable-track{height:4px;border-radius:5px;background:#42616b}
.progress::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--mint);margin-top:-5px;border:0}
.progress::-moz-range-track{height:4px;border-radius:5px;background:#42616b}
.progress::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--mint);border:0}
.progress:focus-visible{outline:2px solid var(--mint);outline-offset:1px}
.time{font-size:11px;min-width:28px}
.song summary{font-size:12px;min-height:38px;align-items:center}
.song details{padding-top:6px;margin-top:8px}
.song details p{font-size:13px}
.sample-note{font-size:12px;line-height:1.7;color:#8dabb6}
.step{border:1px solid var(--line);border-radius:18px;padding:22px;background:#0c202a99}
.step-top>span:first-child{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#85efcf;color:#092521;font-size:15px;font-weight:800}
.step-top>span:last-child{font-size:10px;letter-spacing:1px}
.step-scene{background:#132d36;border:1px solid #8fbac81c;height:156px;margin:20px 0 22px}
.step h3{font-size:20px}.step p{font-size:14px;line-height:1.8}
.genres>span,.genres strong{font-size:14px;padding:12px}
.chat{font-size:12px;padding:12px}
.mini-art{overflow:hidden;flex-shrink:0}.mini-art img{width:100%;height:100%;object-fit:cover}
.mini-song b{font-size:14px}.mini-song small{font-size:11px}
.questions summary{font-size:16px}.questions details p{font-size:14px}
summary::-webkit-details-marker{display:none}
footer span,footer small{font-size:12px}
.ticker-track>span{min-width:100vw;text-align:center}
.sticky-cta{pointer-events:none;visibility:hidden}
.sticky-cta.visible{pointer-events:auto;visibility:visible}
@media(max-width:1000px) and (min-width:701px){
 .header{grid-template-columns:auto 1fr auto;gap:14px}.header nav{gap:14px}
 .songs{grid-template-columns:repeat(2,minmax(0,1fr))}
 .steps{gap:12px}.step{padding:15px}.step-scene{height:165px}.genres{gap:5px}.genres>span,.genres strong{padding:8px;font-size:12px}
}
@media(max-width:700px){
 .header{display:flex}.header-cta{font-size:12px;min-height:44px}.header-cta svg{display:none}
 .eyebrow{font-size:10px;letter-spacing:1px}
 h1{font-size:clamp(44px,11.8vw,78px);letter-spacing:-2.4px}
 .lead{font-size:15px}
 .buttons>button{min-width:0;flex:1;padding:0 10px;font-size:13px;min-height:52px}
 .hero-note{font-size:11px;gap:8px}.hero-note i{display:none}
 .hero-note span{display:block}
 .hero-visual{height:360px}
 .story-float{top:22px;padding:13px;max-width:62%;transform:none}
 .story-float p{font-size:12px}.tiny-label{font-size:8px}.story-author{font-size:10px}
 .hero-mascot{bottom:54px;right:-6px;max-width:79%}
 .hero-listen{min-height:60px}.hero-listen b{font-size:13px}.hero-listen small{font-size:11px}
 .section-heading>p{font-size:14px;margin-top:13px}
 .filters button{font-size:12px;min-height:44px}
 .song{grid-template-columns:80px minmax(0,1fr);gap:12px;padding:12px}
 .cover{width:80px}.song-content{padding:0}
 .song h3{font-size:15px}.song .genre{font-size:11px;min-height:0;line-height:1.5}
 .player{margin-top:7px;gap:7px}.play{width:40px;height:40px}
 .song summary{font-size:11px;min-height:36px}.song details p{font-size:12px}
 .sample-note{font-size:11px}
 .step{padding:18px}.step-scene{height:124px;margin:14px 0 16px}
 .step h3{font-size:19px}.step p{font-size:14px}.step-top>span:last-child{font-size:9px}
 .closing .eyebrow{font-size:9px;line-height:1.8}
 .closing h2{font-size:30px}.closing p{font-size:14px}
 .closing .buttons{flex-direction:row;max-width:none}
 .questions summary{font-size:14px}.questions details p{font-size:14px}
 footer{padding-bottom:110px}footer small{font-size:11px}
 .sticky-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 18px max(12px,env(safe-area-inset-bottom));background:#07151ef2;border-top:1px solid #aacdd326;backdrop-filter:blur(16px)}
 .sticky-cta button{min-width:0;width:100%;min-height:50px;font-size:14px;padding:0 10px;border-radius:10px}
 .sticky-cta svg{width:21px;height:21px}
}
@media(max-width:360px){.hero-note{font-size:10px}.song{grid-template-columns:65px minmax(0,1fr);gap:10px}.cover{width:65px}.song h3{font-size:14px}.story-float{max-width:65%}.step-top>span:last-child{font-size:8px}}