*{box-sizing:border-box}body{margin:0;background:#101012;color:white;font-family:Arial,'Hiragino Sans',sans-serif}header{height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 6vw;border-bottom:1px solid #ffffff18}header img{width:200px}header span{font-size:11px;letter-spacing:2px;color:#aaa}main{min-height:calc(100svh - 80px);overflow:hidden;display:grid;grid-template-columns:46% 54%;align-items:center;padding:25px 6vw;background:radial-gradient(ellipse at 76% 53%,#55421855,transparent 47%)}.copy{z-index:4}.eyebrow{color:#ffce38;font-size:12px;letter-spacing:3px}h1{font-size:clamp(34px,4.3vw,66px);line-height:1.3;letter-spacing:-2px;margin:22px 0}em{font-style:normal;color:#ffd33d}p{color:#bababc;font-size:14px;line-height:1.9}button,a{font:inherit}button{cursor:pointer;border:0;border-radius:30px;padding:16px 23px;font-weight:700}.play{background:#ffd237;color:#17130b}.secondary{background:transparent;color:#aaa;border:1px solid #ffffff30;font-size:12px;padding:11px 17px}.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:25px}.cta{display:none;background:white;color:#171717;border-radius:30px;padding:16px 22px;text-decoration:none;font-size:14px;font-weight:700}.landed .cta{display:block}.landed .play{display:none}.visual{height:630px;position:relative;perspective:1000px;isolation:isolate}.phone{position:absolute;width:275px;height:480px;left:50%;top:48%;transform:translate(-50%,-50%) rotateY(-12deg) rotateZ(5deg);border:6px solid #646466;border-radius:43px;background:linear-gradient(150deg,#202025,#070708);box-shadow:20px 28px 75px #000b;transition:transform 1s,opacity 1s}.phone:before{content:'';position:absolute;width:75px;height:20px;left:calc(50% - 37px);top:12px;border-radius:14px;background:black}.phone:after{content:'Grooveman';position:absolute;bottom:32px;text-align:center;width:100%;font-size:13px;color:#d2ad37}.performer{position:absolute;width:900px;height:700px;left:50%;top:47%;transform:translate(-50%,-50%) scale(.37) rotate(5deg);transition:transform .8s cubic-bezier(.16,.8,.2,1);z-index:2;pointer-events:none}iframe{width:100%;height:100%;border:0;background:transparent}.out .performer{transform:translate(-50%,-46%) scale(.83)}.out .phone{transform:translate(-40%,-56%) rotateY(-28deg) rotateZ(14deg) scale(.86);opacity:.36}.ring{position:absolute;width:300px;height:300px;border:2px solid #ffd339;left:50%;top:48%;border-radius:50%;transform:translate(-50%,-50%) scale(.5);opacity:0}.out .ring{animation:burst .8s ease-out}.floor{position:absolute;left:20%;right:5%;height:35px;bottom:55px;background:#000;filter:blur(20px);opacity:0;transition:.8s}.out .floor{opacity:.8}.badge{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;letter-spacing:2px;color:#8c8982}#notice{min-height:21px;font-size:12px;color:#8c8982}dialog{background:#202023;color:white;border:1px solid #555;border-radius:24px;padding:30px;max-width:90vw}dialog::backdrop{background:#000b}.replay{display:none}.landed .replay{display:block}@keyframes burst{0%{opacity:.7;transform:translate(-50%,-50%) scale(.5)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.6)}}@media(max-width:720px){header{height:60px}header img{width:155px}header span{font-size:9px}main{display:flex;flex-direction:column;padding:24px 6vw}.copy{text-align:center;width:100%}h1{font-size:36px;margin:10px 0;letter-spacing:-1px}p{font-size:12px;margin:10px 0}.actions{justify-content:center;margin-top:16px}.visual{height:420px;width:100%}.phone{width:195px;height:320px;top:50%;border-radius:30px}.performer{top:48%;transform:translate(-50%,-50%) scale(.27) rotate(5deg)}.out .performer{transform:translate(-50%,-45%) scale(.51)}.badge{bottom:0}.floor{bottom:30px}#notice{margin:4px}button,.cta{padding:12px 20px!important;font-size:13px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
.cast{display:flex;gap:8px;margin-top:23px}.cast button{background:#ffffff08;color:#aaa;border:1px solid #ffffff25;padding:11px 17px;font-size:12px}.cast button[aria-pressed=true]{color:#ffd338;border-color:#ffd33880;background:#ffd33810}@media(max-width:720px){.cast{justify-content:center}}iframe{outline:0!important}body.girl .out{} 
html{scroll-behavior:smooth;scroll-padding-top:24px}header nav{display:flex;gap:24px;align-items:center}nav a{color:#bbb;text-decoration:none;font-size:12px}nav .nav-cta{border:1px solid #ffd33860;color:#ffd338;padding:10px 17px;border-radius:30px}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #ffd338;outline-offset:5px}button:disabled{cursor:wait;opacity:.6}.definition{font-size:12px;color:#dedede;margin-top:17px}.content{max-width:1200px;margin:auto;padding:0 6vw}.section{padding:100px 0;border-top:1px solid #ffffff18}.section h2{font-size:clamp(29px,3.6vw,48px);line-height:1.4;letter-spacing:-1px;margin:18px 0 25px}.section h3{font-size:19px;line-height:1.5;margin:12px 0}.section p{font-size:14px;line-height:1.9}.section .small,.small{font-size:11px;color:#969699;line-height:1.9}.lead{text-align:center}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:45px;text-align:left}.feature-grid article{padding-top:22px;border-top:1px solid #ffd33850}.number{font-size:12px;color:#ffd338;letter-spacing:2px}.section-head{display:flex;justify-content:space-between;align-items:center;gap:30px}.cast-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:25px 0}.cast-card{background:#1b1b1e;border:1px solid #ffffff10;border-radius:20px;overflow:hidden}.cast-card img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}.cast-card>div{padding:18px}.cast-card h3{font-size:16px;margin:9px 0 0}.tag{color:#ffd338;font-size:10px;letter-spacing:.5px}.deck{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}.deck-demo{border:1px solid #ffffff25;border-radius:24px;background:linear-gradient(135deg,#33302a,#18181a);padding:26px;box-shadow:0 25px 60px #0007;transform:rotate(-2deg)}.deck-top{font-size:13px;letter-spacing:2px;padding-bottom:24px}.deck-top span{float:right;color:#999;font-size:9px}.track{display:flex;align-items:center;gap:16px;padding:23px 0;border-top:1px solid #ffffff12;color:#aaa}.track.active{color:white}.track>span{color:#ffd338;font-size:11px}.track>div{flex:1;font-size:14px}.track small{display:block;color:#999;font-size:10px;margin-top:7px}.track b{font-size:24px;font-weight:500}.track b small{font-size:9px;display:inline}.deck-foot{color:#ffd338;font-size:12px;border-top:1px solid #ffffff12;padding:23px 0 0}.pricing{display:grid;grid-template-columns:1fr 1.15fr;gap:22px;margin-top:35px}.plan{padding:34px;border:1px solid #ffffff25;border-radius:24px;background:#18181b}.free-plan{background:linear-gradient(145deg,#302a18,#19191b);border-color:#ffd33880}.paid-plan .tag{color:#b9b9bf}.plan .price{font-size:40px;font-weight:700;color:white;line-height:1.2;margin:26px 0}.price small{font-size:12px;font-weight:400;color:#aaa}.price-options{display:flex;flex-wrap:wrap;gap:25px;margin:24px 0}.price-options .price{margin:10px 0}.price-options>div>span{font-size:12px;color:#d4c79f}.plan ul{padding-left:19px;line-height:2;color:#bbb;font-size:13px}.pill{display:inline-block;padding:13px 22px;background:#ffd338;color:#151515;text-decoration:none;border-radius:30px;font-size:13px;font-weight:bold;margin-top:12px}.faq details{border-bottom:1px solid #ffffff20;padding:23px 0}.faq summary{cursor:pointer;font-size:15px;line-height:1.6}.faq details p{max-width:740px;margin:15px 0 0;color:#aaa}.download{text-align:center}.download h2{font-size:clamp(42px,6vw,70px)}.stores{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:35px 0 20px}.stores>div{border:1px solid #ffffff30;border-radius:16px;padding:22px 10px;font-size:15px}.stores span{display:block;font-size:10px;color:#999;margin-top:8px}footer{border-top:1px solid #ffffff20;padding:40px 0;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center}footer a{color:#aaa;text-decoration:none;font-size:11px}footer .footer-brand{font-size:24px;font-weight:bold;color:#ffd338}footer>div{display:flex;gap:20px;flex-wrap:wrap}footer small{color:#777;font-size:10px}#mute[hidden],#stop[hidden]{display:none!important}@media(max-width:720px){header{padding:0 5vw}header nav{gap:12px}header nav>a:not(.nav-cta){display:none}header nav .nav-cta{padding:9px 12px;font-size:10px}.content{padding:0 6vw}.section{padding:62px 0}.feature-grid{grid-template-columns:1fr;gap:14px;margin-top:30px}.section-head{display:block}.cast-grid{grid-template-columns:repeat(2,1fr);gap:12px}.cast-card>div{padding:13px}.cast-card h3{font-size:13px}.tag{font-size:9px}.deck{grid-template-columns:1fr;gap:25px}.deck-demo{padding:22px}.pricing{grid-template-columns:1fr}.plan{padding:25px}.stores{grid-template-columns:repeat(2,1fr)}.section h2{letter-spacing:-.5px}.lead{text-align:left}footer{gap:20px}.definition{font-size:11px}.visual{height:390px}.badge{font-size:9px}.actions{gap:8px}}
.product-shot{margin:0}.product-shot img{display:block;width:100%;height:auto;border-radius:20px;border:1px solid #ffffff28;box-shadow:0 24px 55px #0005}.product-shot figcaption{font-size:10px;color:#999;line-height:1.8;margin-top:14px}.songdeck-shot{max-width:522px;justify-self:center}.mini-feature{display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:36px}.mini-shot img{border-radius:16px}@media(max-width:720px){.mini-feature{grid-template-columns:1fr;gap:25px}.songdeck-shot{width:100%}.product-shot figcaption{font-size:10px}} 
/* Shared responsive layout, including long translations and RTL. */
html,body{max-width:100%;overflow-x:clip}h1,h2,h3,p,a,button{overflow-wrap:anywhere}header{gap:12px;height:auto;min-height:80px;padding-top:14px;padding-bottom:14px}header img{max-width:32vw;height:auto}header nav{gap:16px;flex-wrap:wrap;justify-content:flex-end}.language-picker{background:#1b1b1e;color:#ddd;border:1px solid #ffffff40;border-radius:20px;max-width:145px;padding:9px 10px;font:inherit;font-size:12px}.pricing{grid-template-columns:1fr 1fr}.section,.deck>div,.mini-feature>div,.hero-copy{min-width:0}.trial-note{font-size:11px;color:#aaa}.price-options .price{direction:ltr;unicode-bidi:isolate}.visual,.mini-shot{direction:ltr}html[dir=rtl] .feature-grid{text-align:right}html[dir=rtl] h1,html[dir=rtl] h2{letter-spacing:0}html[dir=rtl] ul{padding-left:0;padding-right:19px}
@media(max-width:720px){header{min-height:62px;padding:10px 5vw}header nav{gap:6px;max-width:64%}.language-picker{max-width:120px;font-size:11px}header nav .nav-cta{font-size:10px;padding:8px 10px}.cast{flex-wrap:wrap}.pricing{grid-template-columns:1fr}.badge{font-size:8px;letter-spacing:1px;white-space:normal;text-align:center;width:95%}.out .performer{transform:translate(-50%,-45%) scale(.45)}.section h2{font-size:clamp(26px,7.2vw,34px)}.plan .price{font-size:34px}}
@media(max-width:360px){header nav .nav-cta{display:none}.out .performer{transform:translate(-50%,-45%) scale(.40)}}

/* Mobile demo: prioritize the performer, not the phone mockup. */
@media(max-width:720px){.visual{height:540px}.performer{transform:translate(-50%,-50%) scale(.40) rotate(5deg)}.out .performer{transform:translate(-50%,-46%) scale(.80)}body[data-demo="rock-drummer"] .visual{height:440px}body[data-demo="rock-drummer"] .performer{transform:translate(-50%,-50%) scale(.35) rotate(5deg)}body.out[data-demo="rock-drummer"] .performer{transform:translate(-50%,-46%) scale(.60)}}
@media(max-width:360px){.visual{height:480px}.out .performer{transform:translate(-50%,-46%) scale(.69)}body.out[data-demo="rock-drummer"] .performer{transform:translate(-50%,-46%) scale(.51)}}