/* DriveTime Music: neon disco theme on top of style.css */
body.music{
  --night:#0b0614; --asphalt:#140b22; --panel:#1a1030; --line:#2e2148; --muted:#a597c4; --text:#f3eefe;
  --amber:#ff3fb4; --amber-2:#ff8fd6; --pink:#ff3fb4; --violet:#9b5cff; --cyan:#23e6ff; --lime:#c6ff3d;
  --sans: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--night);color:var(--text)
}
.music .hdr{background:rgba(11,6,20,.86)}
.music .logo{font:700 20px/1 var(--sans);letter-spacing:-.3px}
.music .logo b{font-weight:800}
.music .grad{background:linear-gradient(90deg,var(--pink),var(--violet) 45%,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.music .btn{background:linear-gradient(90deg,var(--pink),#ff6fa0);color:#140713;box-shadow:0 6px 24px rgba(255,63,180,.35)}
.music .btn:hover{background:linear-gradient(90deg,#ff6fc8,#ff9ab8);color:#140713}
.music .btn.ghost{background:transparent;color:var(--text);border:1px solid #4a3770;box-shadow:none}
.music .btn.ghost:hover{border-color:var(--cyan)}
.music h1,.music h2,.music h3,.music .sec h2,.music .shelf-head h1{font-family:var(--sans);letter-spacing:-.5px}
.music .sec h2{font-weight:800;font-size:clamp(28px,3.4vw,40px)}
.music .card h3{font-family:var(--sans);font-weight:700}
.music .tag{color:var(--cyan);border-color:#21506a}
.music .tag.neon{color:#fff;border:0;background:linear-gradient(90deg,rgba(255,63,180,.25),rgba(35,230,255,.25));box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.music .bal{color:var(--cyan)}
.music .note a,.music a{color:var(--amber-2)}
.music .price .per{color:var(--cyan)}
.music .price.best{border-color:var(--pink);box-shadow:0 0 0 1px var(--pink),0 0 40px rgba(255,63,180,.18)}
.music .price .flag{background:var(--pink);color:#140713}
.music .soon{color:var(--cyan);border-color:#21506a}
.music .step .n{background:linear-gradient(135deg,var(--pink),var(--violet));color:#fff}
.music input:focus,.music select:focus,.music textarea:focus{outline-color:var(--pink)}
.music .check input{accent-color:var(--pink)}

/* animated stripe under the header */
.disco-strip{height:4px;opacity:1;background:linear-gradient(90deg,#ff3fb4,#ffb13d,#c6ff3d,#23e6ff,#9b5cff,#ff3fb4);background-size:200% 100%;animation:strip 6s linear infinite}
@keyframes strip{to{background-position:200% 0}}

/* hero */
.hero.disco{position:relative;overflow:hidden;isolation:isolate;padding:0;min-height:min(90vh,800px);display:flex;align-items:center}
.hero.disco canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block}
.hero.disco:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,6,20,.9) 0%,rgba(11,6,20,.55) 42%,rgba(11,6,20,0) 75%)}
.hero.disco .wrap{width:100%;padding-top:80px;padding-bottom:140px}
.hero.disco h1{font:800 clamp(42px,7vw,88px)/.98 var(--sans);letter-spacing:-2px;max-width:12ch;margin:14px 0 20px}
.hero.disco p.lead{color:#d9d0ee;max-width:52ch}
.hero.disco .hero-facts span:before{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
/* mirror ball */
.ball{position:absolute;top:-6px;right:24%;width:130px;height:230px;z-index:-1;pointer-events:none}
.ball:before{content:"";position:absolute;left:50%;top:0;width:2px;height:100px;background:linear-gradient(#000,#888);transform:translateX(-50%)}
.ball i{position:absolute;left:0;top:100px;width:130px;height:130px;border-radius:50%;overflow:hidden;
  background:
    radial-gradient(circle at 32% 30%,rgba(255,255,255,.95) 0 6%,rgba(255,255,255,0) 22%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.35) 0 1px,transparent 1px 12px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 12px),
    conic-gradient(from 0deg,#bfc4d6,#6f7488,#e9ecf6,#7d8296,#c9cee0,#5f6478,#dfe3ef,#bfc4d6);
  background-size:auto,24px 100%,100% 12px,100% 100%;
  box-shadow:0 0 50px rgba(255,255,255,.25),0 0 120px rgba(155,92,255,.35);animation:ball 8s linear infinite}
@keyframes ball{to{background-position:0 0,240px 0,0 0,0 0}}
@media(max-width:760px){.ball{right:6%;transform:scale(.7);transform-origin:top right}}
/* equaliser */
.eq{position:absolute;left:0;right:0;bottom:0;height:110px;display:flex;align-items:flex-end;gap:4px;padding:0 4px;z-index:-1;opacity:.75;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.eq i{flex:1;height:20%;border-radius:3px 3px 0 0;background:linear-gradient(to top,var(--pink),var(--violet),var(--cyan));animation:eq 1.1s ease-in-out infinite alternate;animation-delay:calc(var(--d) * -0.11s)}
.eq i:nth-child(3n){animation-duration:.8s}.eq i:nth-child(4n){animation-duration:1.4s}.eq i:nth-child(5n){animation-duration:.95s}
@keyframes eq{0%{height:12%}50%{height:70%}100%{height:30%}}
.eq.small{position:static;height:60px;opacity:1;margin-bottom:18px;-webkit-mask-image:none;mask-image:none}
@media(max-width:760px){
  .hero.disco{min-height:auto;align-items:flex-end}
  .hero.disco canvas{height:min(56vh,440px);bottom:auto}
  .hero.disco:after{background:linear-gradient(180deg,rgba(11,6,20,0) 0%,rgba(11,6,20,0) min(28vh,220px),rgba(11,6,20,.88) min(50vh,400px),#0b0614 min(58vh,460px))}
  .hero.disco .wrap{padding-top:min(42vh,330px);padding-bottom:120px}
  .eq{height:70px}
}
@media(prefers-reduced-motion:reduce){.eq i,.ball i,.disco-strip{animation:none}}

/* sections */
.make .mk{position:relative;overflow:hidden;padding:26px}
.make .mk:before{content:"";position:absolute;inset:auto -40px -60px auto;width:180px;height:180px;border-radius:50%;filter:blur(10px);opacity:.35}
.mk1:before{background:var(--pink)}.mk2:before{background:var(--cyan)}.mk3:before{background:var(--lime)}
.mk h3{margin-top:10px!important}
.mk-price{margin-top:16px;font-weight:700;color:#fff}
.steps3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.chips.styles{margin:12px 0 0}
.chips.styles span{border:1px solid #4a3770;border-radius:999px;padding:4px 11px;font-size:13px;color:#d9d0ee}
.ideas{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.make{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.show-m{display:none}
@media(max-width:700px){.show-m{display:inline}.music .logo{font-size:17px}}
.idea h3{margin:14px 0 4px;font:700 18px/1.3 var(--sans)}
.idea p{margin:0;color:#c9bfe2;font-size:15px}
.cover{aspect-ratio:1;border-radius:16px;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:18px;
  background:radial-gradient(circle at 70% 25%,rgba(255,255,255,.35),transparent 30%),linear-gradient(145deg,var(--a),var(--b));box-shadow:0 18px 40px rgba(0,0,0,.45)}
.cover:before{content:"";position:absolute;right:-30%;top:-30%;width:90%;height:90%;border-radius:50%;
  background:repeating-radial-gradient(circle,rgba(0,0,0,.28) 0 2px,transparent 2px 7px);opacity:.6}
.cover span{position:relative;font:800 22px/1.05 var(--sans);color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35);max-width:9ch;letter-spacing:-.5px}
.early{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;border-radius:24px;padding:40px;
  background:radial-gradient(120% 120% at 0% 0%,rgba(255,63,180,.22),transparent 55%),radial-gradient(120% 120% at 100% 100%,rgba(35,230,255,.18),transparent 55%),#140b22;border:1px solid #3a2a5c}
.early h2{margin-top:0}
.early p{color:#d9d0ee}
.ticks{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:8px}
.ticks li{padding-left:24px;position:relative}
.ticks li:before{content:"\2713";position:absolute;left:0;color:var(--lime)}
@media(max-width:860px){.early{grid-template-columns:1fr;padding:24px}}
.xsell{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;text-decoration:none;color:var(--text);
  background:linear-gradient(120deg,#231a10,#1a1030);border-color:#4b3d24}
.xsell:hover{color:var(--text);border-color:#f2a93b}
.xsell .tag{color:#ffcf7a;border-color:#4b3d24}
.studio-soon{text-align:center;padding:40px 24px}
.studio-soon p{max-width:54ch;margin-left:auto;margin-right:auto}
.music .installbar{border-color:#5a3a7a}
.music footer{border-top-color:#2e2148}
.music .logo,.music .logo:hover{color:var(--text)}
.music .nav a{color:var(--muted)}
.music .nav a:hover,.music .nav a.on{color:var(--text)}
.music .nav a.btn,.music .nav a.btn:hover{color:#140713}
.music .nav a.bal{color:var(--cyan)}
.music footer a{color:var(--muted)}
.music .pwr b{color:#a3afff}