:root{
  --ink:#16133d;
  --ink-2:#211d55;
  --ink-3:#2d2870;
  --rosa:#e4007c;
  --marigold:#f6a821;
  --paper:#fff4e6;
  --muted:#c4bfe3;
  --line:rgba(255,244,230,.16);
  --display:"Shrikhand",Georgia,serif;
  --body:"Instrument Sans",system-ui,sans-serif;
  --r-sm:.5rem;
  --r-lg:1.25rem;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink);color:var(--paper);font:400 1.0625rem/1.6 var(--body);-webkit-font-smoothing:antialiased}
img,canvas{display:block;max-width:100%}
a{color:var(--marigold)}
:focus-visible{outline:3px solid var(--marigold);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--marigold);color:var(--ink);padding:.6rem 1rem;z-index:50}
.skip:focus{left:1rem;top:1rem}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}
.narrow{max-width:44rem}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(22,19,61,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:1.5rem;min-height:64px}
.brand{font:400 1.45rem/1 var(--display);color:var(--paper);text-decoration:none}
.top nav{display:flex;gap:1.25rem;margin-left:auto;align-items:center}
.top nav a{color:var(--paper);text-decoration:none;font-weight:500;font-size:.975rem}
.top nav a:hover{color:var(--marigold)}
.top nav .lang{border:1px solid var(--line);padding:.3rem .65rem;border-radius:999px}
@media (max-width:720px){.top nav .hide-sm{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:600 1rem/1 var(--body);padding:.95rem 1.4rem;border-radius:999px;border:0;cursor:pointer;text-decoration:none;transition:transform .12s ease,background .15s ease}
.btn:active{transform:scale(.97)}
.btn-gold{background:var(--marigold);color:var(--ink)}
.btn-gold:hover{background:#ffbb45}
.btn-ghost{background:transparent;color:var(--paper);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--paper)}
.btn[disabled]{opacity:.55;cursor:wait}

/* hero */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-10%;top:5%;width:70%;aspect-ratio:1;background:radial-gradient(circle,rgba(228,0,124,.28),transparent 62%);pointer-events:none}
.hero .wrap{position:relative}
.hero .wrap{display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:2rem;min-height:calc(100svh - 64px);padding-block:2.5rem}
.hero h1{font:400 clamp(2.6rem,6.2vw,5rem)/1.02 var(--display);margin:0 0 1.25rem;letter-spacing:-.01em}
.hero .lede{font-size:1.2rem;color:var(--muted);max-width:34rem;margin:0 0 .9rem}
.hero .gift{margin:0 0 1.75rem;font-weight:500}
.namebox{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.1rem;max-width:30rem}
.namebox label{display:block;font-weight:600;margin-bottom:.55rem}
.namebox .row{display:flex;gap:.6rem;flex-wrap:wrap}
.namebox input{flex:1 1 12rem;min-width:0}
.namebox .hint{margin:.6rem 0 0;font-size:.875rem;color:var(--muted)}
.stage{position:relative;aspect-ratio:1/1;width:100%;max-width:640px;justify-self:center}
.stage canvas{width:100%!important;height:100%!important;touch-action:pan-y}
.stage .fallback{position:absolute;inset:8%;border-radius:50%;background:repeating-radial-gradient(circle,#111 0 2px,#1d1d1d 2px 4px);display:grid;place-items:center}
.stage .fallback span{width:36%;aspect-ratio:1;border-radius:50%;background:var(--rosa);display:grid;place-items:center;font:400 1.1rem/1.1 var(--display);text-align:center;padding:1rem;color:var(--paper)}
.stage.gl .fallback{display:none}
@media (max-width:880px){
  .hero .wrap{grid-template-columns:1fr;min-height:0;padding-block:1.5rem 3rem}
  .stage{order:-1;max-width:460px;aspect-ratio:5/2.8;margin-top:-.5rem}
}

/* inputs */
input[type=text],input[type=email],input[type=tel],input[type=date],select,textarea{
  font:inherit;color:var(--paper);background:var(--ink);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:.8rem .9rem;width:100%}
input::placeholder,textarea::placeholder{color:#8f89bd}
input:focus,select:focus,textarea:focus{border-color:var(--marigold);outline:none;box-shadow:0 0 0 3px rgba(246,168,33,.25)}
textarea{min-height:7.5rem;resize:vertical}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--paper) 50%),linear-gradient(135deg,var(--paper) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.5rem}
[aria-invalid=true]{border-color:#ff6b9d}

/* sections */
section{padding-block:clamp(4rem,9vw,7rem)}
h2{font:400 clamp(2rem,4.4vw,3.2rem)/1.05 var(--display);margin:0 0 1rem}
.sub{color:var(--muted);font-size:1.15rem;margin:0 0 2.5rem;max-width:40rem}
.band{background:var(--ink-2)}

/* tracklist */
.side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.5rem;align-items:start}
@media (max-width:880px){.side{grid-template-columns:1fr}}
.tracks{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.tracks li{border-bottom:1px solid var(--line)}
.track{all:unset;box-sizing:border-box;display:grid;grid-template-columns:2.25rem 1fr auto;gap:1rem;align-items:center;width:100%;padding:1rem .25rem;cursor:pointer}
.track:focus-visible{outline:3px solid var(--marigold)}
.track .n{font:400 1.2rem/1 var(--display);color:var(--muted)}
.track .t{font-weight:600;font-size:1.08rem}
.track .m{display:block;font-weight:400;font-size:.9rem;color:var(--muted)}
.track .d{font-size:.9rem;color:var(--muted);font-variant-numeric:tabular-nums}
.track:hover .t{color:var(--marigold)}
.track[aria-pressed=true] .n,.track[aria-pressed=true] .t{color:var(--marigold)}
.track.soon{cursor:default;opacity:.6}
.track.soon:hover .t{color:inherit}
.player{position:sticky;top:84px;background:var(--ink);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem}
.player .now{font-size:.9rem;color:var(--muted);margin:0}
.player .title{font:400 1.6rem/1.15 var(--display);margin:.3rem 0 1rem}
.player .ctrl{display:flex;align-items:center;gap:1rem}
.player .play{width:56px;height:56px;border-radius:50%;padding:0;flex:none}
.player .bar{flex:1;height:6px;border-radius:3px;background:var(--ink-3);position:relative;cursor:pointer}
.player .bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--rosa);border-radius:3px}
.player .time{font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums;min-width:5.5rem;text-align:right}
.player .note{margin:1rem 0 0;font-size:.9rem;color:var(--muted)}

/* lyric examples */
.lyrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1.25rem}
.lyric{background:var(--ink);border-left:4px solid var(--rosa);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:1.4rem 1.4rem 1.2rem}
.lyric:nth-child(even){border-left-color:var(--marigold)}
.lyric h3{margin:0 0 .25rem;font-size:1.1rem}
.lyric .style{margin:0 0 1rem;color:var(--muted);font-size:.9rem}
.lyric blockquote{margin:0;font:italic 500 1.12rem/1.55 var(--body);white-space:pre-line}
.fine{font-size:.9rem;color:var(--muted);margin-top:1.5rem}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:2rem;counter-reset:s}
.steps li{counter-increment:s}
.steps li::before{content:counter(s);display:block;font:400 2.8rem/1 var(--display);color:var(--rosa);margin-bottom:.5rem}
.steps h3{margin:0 0 .4rem;font-size:1.15rem}
.steps p{margin:0;color:var(--muted)}

/* wizard */
.wizard{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.25rem,4vw,2.5rem);max-width:46rem}
.progress{display:flex;gap:.5rem;margin:0 0 1.75rem;padding:0;list-style:none}
.progress li{flex:1;height:5px;border-radius:3px;background:var(--ink-3)}
.progress li.on{background:var(--marigold)}
.stepname{font-size:.95rem;color:var(--muted);margin:0 0 .25rem}
.wizard h3{font:400 1.75rem/1.15 var(--display);margin:0 0 1.5rem}
.field{margin-bottom:1.3rem}
.field>label,.field>.lbl{display:block;font-weight:600;margin-bottom:.45rem}
.field .help{display:block;font-weight:400;font-size:.9rem;color:var(--muted);margin-top:.15rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){.two{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;border:0;margin:0 0 1.3rem;padding:0}
.chips legend{padding:0;margin-bottom:.45rem;float:left;width:100%}
.chips label{position:relative}
.chips input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chips label>span{display:inline-block;padding:.55rem .95rem;border:1.5px solid var(--line);border-radius:999px;font-weight:500;font-size:.95rem;cursor:pointer;user-select:none}
.chips label>input:checked+span{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.chips label>input:focus-visible+span{outline:3px solid var(--marigold);outline-offset:2px}
.check{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.9rem;cursor:pointer}
.check input{width:1.2rem;height:1.2rem;margin-top:.2rem;accent-color:var(--marigold);flex:none}
.nav{display:flex;justify-content:space-between;gap:1rem;margin-top:2rem;flex-wrap:wrap}
.nav [data-go=next],.nav [type=submit]{margin-left:auto}
.err{color:#ff8db5;font-size:.95rem;margin:.75rem 0 0;min-height:1.2em}
.review{border-top:1px solid var(--line);margin:0}
.review div{display:grid;grid-template-columns:10rem 1fr;gap:1rem;padding:.65rem 0;border-bottom:1px solid var(--line)}
.review dt{color:var(--muted);font-size:.95rem}
.review dd{margin:0;white-space:pre-wrap;word-break:break-word}
@media (max-width:560px){.review div{grid-template-columns:1fr;gap:.15rem}}
.done{text-align:left}
.done h3{color:var(--marigold)}

/* email capture */
.signup{display:grid;grid-template-columns:1fr auto;gap:.6rem;max-width:34rem}
@media (max-width:480px){.signup{grid-template-columns:1fr}}
.signup-msg{margin:.75rem 0 0;min-height:1.4em;color:var(--muted)}

/* faq */
.faq details{border-bottom:1px solid var(--line);padding:1.1rem 0}
.faq summary{cursor:pointer;font-weight:600;font-size:1.1rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::after{content:"+";font:400 1.5rem/1 var(--display);color:var(--marigold)}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted);margin:.75rem 0 0}

footer{border-top:1px solid var(--line);padding:2.5rem 0;color:var(--muted);font-size:.95rem}
footer .wrap{display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:space-between}
.hp{position:absolute;left:-9999px}

/* lead capture in the hero */
.namebox label{margin-top:.9rem}
.namebox label:first-of-type{margin-top:0}
.namebox #hero-name{width:100%}
.lead-msg{margin:.6rem 0 0}
.lead-msg:empty{display:none}

/* standalone pages */
.pagetitle{font:400 clamp(2.4rem,5.5vw,4rem)/1.03 var(--display);margin:0 0 1rem}
.startpage,.pricepage{padding-top:clamp(2.5rem,6vw,4.5rem)}
.song-count{margin:0 0 .75rem;font-weight:600;color:var(--marigold)}
#w-next{margin-top:1rem}
.top nav a[aria-current=page]{color:var(--marigold)}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:1.25rem;margin-bottom:1.25rem}
.tier{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.75rem;display:flex;flex-direction:column;gap:.25rem}
.tier h2{font:600 1.15rem/1.3 var(--body);margin:0}
.tier .price{font:400 2.8rem/1.1 var(--display);margin:.5rem 0;color:var(--marigold)}
.tier .price.soon{font:600 1.1rem/1.4 var(--body);color:var(--muted);margin:1rem 0 1.1rem}
.tier p{margin:0 0 1.25rem;color:var(--muted)}
.tier .btn{margin-top:auto;align-self:flex-start}
.tier:nth-child(2){border-color:var(--rosa)}
.more{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;border:1.5px dashed var(--line);border-radius:var(--r-lg);padding:1.5rem 1.75rem}
.more h2{font:600 1.15rem/1.3 var(--body);margin:0 0 .3rem}
.more p{margin:0;color:var(--muted);max-width:36rem}
.incl-h{font-size:clamp(1.6rem,3vw,2.2rem);margin-top:3.5rem}
.incl{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:.6rem 2rem}
.incl li{padding-left:1.6rem;position:relative}
.incl li::before{content:"";position:absolute;left:0;top:.55em;width:.65rem;height:.65rem;border-radius:50%;background:var(--rosa)}

.namebox .about{margin-bottom:.4rem}
.namebox .about legend{font-weight:600;margin-bottom:.55rem}
.wizard .about{margin-bottom:1.5rem}
.namebox .about label{display:inline-block;margin:0}

.byemail{max-width:46rem;border:1.5px dashed var(--line);border-radius:var(--r-lg);padding:1.1rem 1.25rem;margin:0 0 1.5rem}
.byemail p{margin:0 0 .8rem}
.byemail .eq-msg{margin:.6rem 0 0;color:var(--muted)}
.byemail .eq-msg:empty{display:none}
.byemail form[hidden]+.eq-msg{margin-top:0}
.chips legend{font-weight:600}
fieldset[aria-invalid=true] legend{color:#ff8db5}
fieldset[aria-invalid=true] label>span{border-color:#ff8db5}
.sub.small{font-size:1rem;margin-top:-1.5rem}
.tier .save{margin:-.5rem 0 .9rem;font-weight:600;color:var(--rosa);filter:brightness(1.35)}
.tier .price .was{font:500 1.25rem/1 var(--body);color:var(--muted);text-decoration-thickness:2px;vertical-align:middle}
.launch-note{display:inline-block;background:var(--marigold);color:var(--ink);font-weight:600;padding:.45rem .9rem;border-radius:999px;margin:0 0 1.5rem}
.hero .from{margin:-1rem 0 1.5rem;color:var(--muted)}
.hero .from b{color:var(--marigold)}

/* comfortable finger-size tap areas in the top bar (about 44px tall) */
.brand,.top nav a{display:inline-flex;align-items:center;min-height:44px}
.top nav{gap:.35rem 1rem}
.top nav a{padding:0 .35rem}
.top nav .lang{min-height:38px;padding:0 .8rem}
@media (max-width:360px){.brand{font-size:1.25rem}.top .wrap{gap:.75rem}}

/* tablets: bigger record, three price cards in one row */
@media (min-width:600px) and (max-width:880px){
  .stage{max-width:640px;aspect-ratio:16/8}
  .hero .namebox{max-width:36rem}
}
@media (min-width:700px){
  .tiers{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tier{padding:1.5rem}
  .tier .price{font-size:clamp(2.1rem,3.6vw,2.8rem)}
}

/* phones held sideways: text and record side by side so the headline and email box stay on screen */
@media (orientation:landscape) and (max-height:520px){
  .hero .wrap{grid-template-columns:1.1fr .9fr;min-height:0;padding-block:1.25rem 2.5rem;align-items:start}
  .stage{order:0;aspect-ratio:1/1;max-width:340px;margin-top:0;position:sticky;top:76px}
  .hero h1{font-size:clamp(2.2rem,5vw,3rem)}
}
/* smallest phones: keep the brand on one line */
.brand{white-space:nowrap}
@media (max-width:360px){.top nav .lang{padding:0 .6rem}.top nav{gap:.2rem .6rem}}

/* ================= motion layer (motion.js) ================= */
/* sections swing up into place; uses translate/rotate so it never fights the tilt transform */
.moving .wrap,.moving .lyrics,.moving .tiers,.moving .steps,.moving .tracks,.moving .incl,.moving .faq{perspective:1100px}
.moving .reveal{opacity:0;translate:0 34px;rotate:x 16deg;transform-origin:50% 100%;
  transition:opacity .7s ease var(--d,0ms),translate .9s cubic-bezier(.2,.8,.2,1) var(--d,0ms),rotate .9s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
.moving .reveal.in{opacity:1;translate:0 0;rotate:none}

/* 3D tilt toward the mouse + moving light sheen */
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.tilt:not(.player){position:relative}
.tilt.tilting{transition:transform .08s linear}
.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,244,230,.10),transparent 45%)}
.tilt.tilting::after{opacity:1}

/* rotating 3D ring of music styles */
.styles-band{padding-block:clamp(2.5rem,6vw,4rem);overflow:hidden;background:linear-gradient(180deg,var(--ink),var(--ink-2))}
.styles-band .cap{text-align:center;color:var(--muted);margin:0 0 1.5rem;font-weight:500}
.styles-ring{--r:min(420px,44vw);height:5.5rem;perspective:1200px;display:grid;place-items:center}
.styles-ring ul{list-style:none;margin:0;padding:0;position:relative;width:1px;height:1px;transform-style:preserve-3d;animation:ring 36s linear infinite}
.styles-ring li{position:absolute;left:0;top:0;translate:-50% -50%;white-space:nowrap;
  transform:rotateY(calc(var(--i) * 30deg)) translateZ(var(--r));backface-visibility:hidden;
  font:400 clamp(1.5rem,4.2vw,2.6rem)/1 var(--display);color:var(--paper)}
.styles-ring li:nth-child(3n+1){color:var(--marigold)}
.styles-ring li:nth-child(3n+2){color:#ff5fb0}
@keyframes ring{to{transform:rotateY(-360deg)}}
.styles-band:hover .styles-ring ul{animation-play-state:paused}
.calm .styles-ring{height:auto;perspective:none}
.calm .styles-ring ul{animation:none;width:auto;height:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.25rem;transform:none}
.calm .styles-ring li{position:static;translate:none;transform:none;font-size:1.4rem}

/* mini spinning record (questions + pricing pages) */
.startpage .wrap,.pricepage .wrap{position:relative}
.mini-rec{position:absolute;right:0;top:-.5rem;width:clamp(84px,14vw,150px);aspect-ratio:1;perspective:600px;pointer-events:none}
.mini-disc{width:100%;height:100%;border-radius:50%;transform:rotateX(58deg) rotateZ(0);
  background:conic-gradient(from 20deg,rgba(255,236,250,.16) 0 4%,transparent 9% 50%,rgba(255,236,250,.1) 54%,transparent 60%),
    repeating-radial-gradient(circle,#101014 0 2px,#1d1d24 2px 4px);
  box-shadow:0 30px 40px -18px rgba(0,0,0,.7),0 0 60px rgba(228,0,124,.35);display:grid;place-items:center;
  animation:mini 3.2s linear infinite}
.mini-label{width:36%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#16133d 0 6%,var(--rosa) 7% 78%,var(--marigold) 79% 84%,var(--rosa) 85%)}
@keyframes mini{to{transform:rotateX(58deg) rotateZ(360deg)}}
.mini-rec.boost .mini-disc{animation:mini .45s linear 4}
.calm .mini-disc{animation:none}
.startpage .pagetitle,.pricepage .pagetitle,.startpage>.wrap>.sub,.pricepage>.wrap>.sub{padding-right:clamp(90px,15vw,160px)}
@media (max-width:560px){.mini-rec{top:-1.25rem;width:72px}.startpage .pagetitle,.pricepage .pagetitle{padding-right:76px}.startpage>.wrap>.sub,.pricepage>.wrap>.sub{padding-right:0}}

/* equalizer bars next to "Now playing" */
.eq{display:inline-flex;gap:3px;align-items:flex-end;height:14px;vertical-align:-2px}
.eq i{width:3px;height:4px;background:var(--marigold);border-radius:2px}
.eq.on i{animation:eq .9s ease-in-out infinite}
.eq.on i:nth-child(2){animation-delay:-.3s}.eq.on i:nth-child(3){animation-delay:-.6s}.eq.on i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%,100%{height:3px}50%{height:14px}}
@media (max-width:600px){
  .styles-ring{--r:46vw;height:4rem}
  .styles-ring li{font-size:1.15rem}
}
/* 3D pieces (mini record, style ring) must never cause sideways scrolling; clip keeps sticky elements working */
main{overflow-x:clip}
.hero h1{font-size:clamp(2.3rem,5vw,4.1rem);line-height:1.04;text-wrap:balance}
.nw{white-space:nowrap}

/* FAQ: every answer always visible (no dropdowns) */
.faq .qa{border-bottom:1px solid var(--line);padding:1.4rem 0}
.faq .qa:first-of-type{padding-top:.5rem}
.faq .qa h3{margin:0 0 .5rem;font-size:1.15rem;line-height:1.35}
.faq .qa p{margin:0;color:var(--muted)}
.songs-help{margin:-.6rem 0 1.3rem;font-size:.9rem;color:var(--muted)}

/* "hear demos first" + style buttons on the demo list + play button inside the questions */
.hear-first{display:inline-flex;align-items:center;min-height:44px;margin-top:.25rem;font-weight:600}
.demo-filter{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem}
.demo-filter button{font:500 .95rem/1 var(--body);color:var(--paper);background:transparent;border:1.5px solid var(--line);border-radius:999px;padding:.7rem 1rem;min-height:44px;cursor:pointer}
.demo-filter button[aria-pressed=true]{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.style-demo{margin:-.4rem 0 1.4rem}
.style-demo .btn{padding:.7rem 1.1rem;font-size:.95rem}
.done .pay{margin:1rem 0 1.25rem}
.done .pay p{margin:0 0 .8rem}

/* ================= NEON: purple on the left, blue on the right, meeting in the middle ================= */
:root{
  --neon-purple:#b026ff; --neon-blue:#00b3ff;      /* bright edge glow */
  --deep-purple:#5a00c8; --deep-blue:#0036d6;      /* behind text: white 8.5:1 / 7.7:1 */
  --marigold:#ffc94d;                              /* brighter gold: 5.5:1+ on both sides */
  --muted:#d9d4f5;
  --glass:rgba(12,6,48,.58); --glass-2:rgba(12,6,48,.42);
  --line:rgba(255,244,230,.2);
}
body{background:var(--deep-purple)}
/* fixed backdrop (a fixed layer instead of background-attachment, which iPhones ignore) */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    /* bright neon glow on the outer edges */
    radial-gradient(90% 120% at -15% 50%,rgba(176,38,255,.6),transparent 70%),
    radial-gradient(90% 120% at 115% 50%,rgba(0,179,255,.5),transparent 70%),
    /* one smooth blend from purple to blue across the whole page */
    linear-gradient(90deg,var(--deep-purple),var(--deep-blue))}
/* sections let the neon show through */
.band,.styles-band{background:rgba(8,4,36,.22)}
.hero::before{display:none}
.top{background:rgba(14,8,52,.5)}
footer{background:rgba(8,4,36,.35)}
/* cards and forms: dark glass so text stays crisp */
.namebox,.wizard,.tier,.player,.lyric,.byemail,.more{background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.lyric{background:var(--glass-2)}
.tier:nth-child(2){border-color:var(--neon-purple);box-shadow:0 0 0 1px rgba(176,38,255,.35),0 0 40px rgba(176,38,255,.25)}
input[type=text],input[type=email],input[type=tel],input[type=date],select,textarea{background:rgba(8,4,36,.6)}
.launch-note{box-shadow:0 0 24px rgba(255,201,77,.35)}
.btn-gold{box-shadow:0 0 22px rgba(255,201,77,.28)}
.btn-gold:hover{background:#ffd76e}

/* style picker: group headings inside the chip list */
.chips .chip-group{flex-basis:100%;margin:.7rem 0 .1rem;font-size:.85rem;font-weight:600;color:var(--muted)}
.chips .chip-group:first-of-type{margin-top:.2rem}
.field.car textarea{min-height:6rem}

/* brand lockup: name + tagline, always together */
.brand{flex-direction:column;align-items:flex-start;justify-content:center;line-height:1;gap:.22rem}
.brand-tag{font:500 .72rem/1 var(--body);color:var(--muted);letter-spacing:.01em;white-space:nowrap}
@media (max-width:360px){.brand-tag{font-size:.62rem}}

/* privacy page */
.legal h2{font:600 1.25rem/1.3 var(--body);margin:2.2rem 0 .6rem}
.legal ul{margin:0;padding-left:1.2rem}
.legal li{margin:.45rem 0}
.legal p,.legal li{color:var(--paper)}
.legal .updated{color:var(--muted);font-size:.9rem;margin:-1.5rem 0 1rem}