/* CustomSongNow, site styles */
:root{
  --bg:#fbf8f6; --cream:#fff8f3; --card:#fff; --ink:#1d1424; --ink-2:#3a2d42; --muted:#6f6475; --line:#eee5e8; --line-2:#e2d6db;
  --rose:#e11d58; --rose-2:#ff4d7d; --rose-d:#b0123f; --blush:#fff0f4; --blush-2:#ffe1ea;
  --plum:#1f0f2a; --plum-2:#3b1846; --gold:#d6a65c; --gold-2:#f3d9a4;
  --ok:#0f8a4b; --ok-bg:#e8f7ee; --err:#c2203b; --err-bg:#fdecef;
  --r:18px; --r-sm:12px;
  --shadow:0 1px 2px rgba(29,20,36,.04),0 8px 28px -12px rgba(29,20,36,.16);
  --shadow-lg:0 2px 6px rgba(29,20,36,.05),0 24px 60px -24px rgba(59,24,70,.35);
  --grad:linear-gradient(135deg,#ff4d7d 0%,#e11d58 55%,#b0123f 100%);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:Fraunces,Georgia,serif;line-height:1.12;margin:0 0 .5em;font-weight:600;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5.4vw,3.6rem)} h2{font-size:clamp(1.65rem,3.6vw,2.5rem)} h3{font-size:1.18rem}
h1 em,h2 em{font-style:italic;color:var(--rose)}
a{color:var(--rose-d)}
img{max-width:100%}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}
.narrow{max-width:760px}
.muted{color:var(--muted)} .small{font-size:.92rem} .tiny{font-size:.8rem} .center{text-align:center}
.h3d{display:inline-block;width:1.15em;height:auto;vertical-align:-.2em;filter:drop-shadow(0 2px 3px rgba(176,18,63,.25))}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--grad);color:#fff;text-decoration:none;font-weight:600;border:0;border-radius:999px;padding:14px 26px;font-size:1rem;cursor:pointer;font-family:inherit;white-space:nowrap;
  box-shadow:0 10px 24px -10px rgba(225,29,88,.7),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .15s,box-shadow .15s,filter .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 14px 30px -10px rgba(225,29,88,.75),inset 0 1px 0 rgba(255,255,255,.25);filter:saturate(1.08)}
.btn:active{transform:translateY(0)}
.btn-lg{padding:17px 32px;font-size:1.08rem}
.btn-sm{padding:9px 17px;font-size:.9rem}
.btn-block{display:flex;width:100%}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line-2);box-shadow:0 1px 2px rgba(29,20,36,.05)}
.btn-ghost:hover{background:var(--blush);border-color:#f5b8c9;box-shadow:0 1px 2px rgba(29,20,36,.05)}
.btn-dark{background:var(--ink);box-shadow:0 10px 24px -12px rgba(29,20,36,.6)}
.btn-light{background:#fff;color:var(--ink);box-shadow:0 10px 30px -12px rgba(0,0,0,.45)}
.btn[disabled]{opacity:.6;cursor:not-allowed;transform:none}
.locked{border-style:dashed}

/* top + nav */
.topbar{background:var(--plum);color:#f6dbe5;text-align:center;font-size:.84rem;padding:8px 14px;letter-spacing:.01em}
.topbar strong{color:#fff}
.nav{position:sticky;top:0;z-index:40;background:rgba(251,248,246,.82);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid rgba(226,214,219,.7)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:68px;gap:12px}
.logo{display:inline-flex;align-items:center;gap:10px;font-family:Fraunces,serif;font-weight:700;font-size:1.22rem;color:var(--ink);text-decoration:none;white-space:nowrap;letter-spacing:-.01em}
.logo-mark{height:36px;width:auto;display:block}
.logo-full{height:92px;width:auto;display:block;margin-bottom:10px}
.nav-links{display:flex;gap:22px;align-items:center}
.nav-links a:not(.btn){color:var(--ink-2);text-decoration:none;font-size:.94rem;font-weight:500}
.nav-links a:not(.btn):hover{color:var(--rose)}
.acct{white-space:nowrap}
@media(max-width:980px){.nav-links a:not(.btn):not(.acct){display:none}}
@media(max-width:480px){.nav .wrap{padding:0 14px}.nav-in{height:60px}.logo{font-size:1.05rem;gap:8px}.logo-mark{height:30px}.nav-links{gap:12px}.acct{font-size:.86rem}.nav-links .btn-sm{padding:8px 13px;font-size:.84rem}}
@media(max-width:440px){.nav .logo-text{display:none}}

/* hero */
.hero{position:relative;overflow:hidden;background:radial-gradient(1200px 600px at 85% -10%,#5b1f63 0%,transparent 60%),radial-gradient(900px 500px at -10% 110%,#7a1238 0%,transparent 55%),linear-gradient(160deg,#1f0f2a 0%,#2a1236 55%,#1a0c22 100%);color:#fff;padding:84px 0 92px}
.hero:before{content:"";position:absolute;width:520px;height:520px;right:-120px;top:40px;background:radial-gradient(circle,rgba(255,77,125,.35),transparent 65%);filter:blur(10px);pointer-events:none}
.hero .wrap{position:relative}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero h1{color:#fff}
.hero h1 em{color:#ff8fb1}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);color:#ffd3e0;font-weight:600;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;padding:7px 14px;border-radius:999px;margin-bottom:20px;border:1px solid rgba(255,255,255,.12)}
.eyebrow.light{background:var(--blush);color:var(--rose-d);border-color:#ffd0dd}
.lead{font-size:1.18rem;color:var(--muted);max-width:33em}
.hero .lead{color:#e9dbe8}
.hero-cta{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:30px 0 22px}
.hero-cta .muted{color:#cdbccd}
.ticks{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.93rem;color:var(--muted)}
.ticks li{display:inline-flex;align-items:center;gap:7px}
.ticks li:before{content:"";width:16px;height:16px;border-radius:50%;background:var(--ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230f8a4b' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/11px no-repeat;flex:none}
.hero .ticks{color:#e3d3e2}
.hero .ticks li:before{background-color:rgba(255,255,255,.12);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff8fb1' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E")}
.hero-card{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.16);border-radius:26px;padding:26px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff}
.hero-card .muted{color:#d2c2d1}
.player-fake{display:flex;gap:16px;align-items:center}
.cover{width:76px;height:76px;border-radius:16px;flex:none;background:linear-gradient(135deg,#ff8fb1,#e11d58 50%,#5b1f63);display:grid;place-items:center;box-shadow:0 12px 30px -10px rgba(225,29,88,.7)}
.cover img{width:44px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}
.pf-bar{height:4px;border-radius:9px;background:rgba(255,255,255,.18);margin-top:12px;overflow:hidden}
.pf-bar span{display:block;height:100%;width:38%;background:linear-gradient(90deg,#ff8fb1,#fff);border-radius:9px}
.pf-time{display:flex;justify-content:space-between;font-size:.72rem;color:#cdbccd;margin-top:5px}
.vinyl{width:64px;height:64px;border-radius:50%;flex:none;background:radial-gradient(circle,#e11d58 0 17%,#1d1424 18% 21%,#2b2230 22% 100%);box-shadow:inset 0 0 0 6px #3a2d42,0 10px 30px -10px rgba(0,0,0,.4)}
.vinyl.spin{animation:spin 2.4s linear infinite;margin:0 auto 18px;width:96px;height:96px}
.vinyl.small{width:44px;height:44px}
@keyframes spin{to{transform:rotate(360deg)}}
.bars{display:flex;gap:3px;align-items:flex-end;height:22px;margin-top:6px}
.bars span{width:4px;background:#ff8fb1;border-radius:2px;animation:bar 1s ease-in-out infinite}
.bars span:nth-child(2n){animation-delay:.2s}.bars span:nth-child(3n){animation-delay:.4s}
@keyframes bar{0%,100%{height:5px}50%{height:22px}}
.lyric{font-family:Fraunces,serif;font-size:1.15rem;font-style:italic;border-left:3px solid #ff8fb1;padding-left:16px;margin:20px 0 14px;line-height:1.55}
.float-note{position:absolute;right:-14px;bottom:-18px;background:#fff;color:var(--ink);border-radius:16px;padding:10px 14px;box-shadow:var(--shadow-lg);display:flex;gap:10px;align-items:center;font-size:.86rem}
.float-note .h3d{width:28px}
.hero-card-wrap{position:relative}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:36px}.hero{padding:52px 0 64px}.float-note{right:8px}}

/* sections */
section{padding:84px 0}
.sec-head{text-align:center;max-width:640px;margin:0 auto 40px}
.sec-head p{color:var(--muted);font-size:1.06rem;margin:0}
.kicker{display:block;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rose);margin-bottom:10px}
.alt{background:#fff}
.soft{background:linear-gradient(180deg,var(--cream),#fff)}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.center-v{align-items:center;gap:48px}
@media(max-width:900px){.grid4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.grid2,.grid3,.grid4{grid-template-columns:1fr}section{padding:60px 0}.sec-head{margin-bottom:28px}.center-v{gap:28px}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow)}
.step{position:relative;padding-top:30px}
.step-n{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--blush);color:var(--rose-d);font-weight:700;font-family:Fraunces,serif;font-size:1.2rem;margin-bottom:14px}
.step h3{margin-bottom:.35em}
.step p{margin:0}
.occasions{padding:30px 0 0;background:var(--bg)}
.occ-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.occ{border:1px solid var(--line-2);background:#fff;border-radius:999px;padding:9px 18px;text-decoration:none;color:var(--ink-2);font-size:.93rem;font-weight:500;transition:all .15s}
.occ:hover{border-color:var(--rose);color:var(--rose-d);background:var(--blush);transform:translateY(-1px)}
.sample{display:flex;flex-direction:column;gap:8px}
.sample audio{width:100%;margin-top:6px}
.sample .cover{width:56px;height:56px;border-radius:14px}
.sample .cover img{width:30px}
.placeholder{border:1.5px dashed var(--line-2);background:#fffdfc;box-shadow:none}

/* pricing */
.pricing{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:stretch}
@media(max-width:820px){.pricing{grid-template-columns:1fr}}
.price-card{position:relative;border:0;background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;border:2px solid transparent}
.badge-top{position:absolute;top:-13px;left:26px;background:var(--grad);color:#fff;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.price{font-family:Fraunces,serif;font-size:3.2rem;font-weight:700;line-height:1;margin:10px 0 4px}
.price small{font-size:1rem;color:var(--muted);font-family:Inter,sans-serif;font-weight:500}
.list{list-style:none;padding:0;margin:18px 0 22px}
.list li{padding:9px 0 9px 32px;position:relative;border-bottom:1px solid var(--line)}
.list li:last-child{border-bottom:0}
.list li:before{content:"";position:absolute;left:2px;top:12px;width:20px;height:20px;border-radius:50%;background:var(--blush) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e11d58' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat}
.addon-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.addon-row .ar-name{display:flex;gap:12px;align-items:center}
.ar-ico{width:38px;height:38px;border-radius:11px;background:var(--blush);color:var(--rose);display:grid;place-items:center;flex:none;font-size:1.1rem}
.coupon-tease{background:linear-gradient(135deg,#fff4ea,#ffe8f0);border:1px solid #f9cfdc;border-radius:14px;padding:14px 18px;margin-top:16px;font-size:.94rem;color:var(--ink-2)}
.coupon-tease.big{font-size:1rem;margin-bottom:24px}

/* hearts */
.hearts-sec{background:radial-gradient(700px 400px at 90% 10%,#ffe1ea,transparent 60%),linear-gradient(180deg,#fff,#fff6f8)}
.hearts-hero{display:flex;align-items:center;gap:18px;margin-bottom:14px}
.hearts-hero img{width:84px;height:auto;filter:drop-shadow(0 14px 22px rgba(176,18,63,.35));animation:beat 2.6s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}10%{transform:scale(1.08)}20%{transform:scale(1)}30%{transform:scale(1.05)}40%{transform:scale(1)}}
.tier-ladder{display:grid;gap:10px}
.tier{display:grid;grid-template-columns:42px 1fr auto;gap:14px;align-items:center;padding:12px 16px;border-radius:14px;background:#fff;border:1px solid var(--line);font-size:.94rem;box-shadow:0 1px 2px rgba(29,20,36,.04)}
.tier .t-lvl{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--blush);color:var(--rose-d);font-weight:700;font-family:Fraunces,serif}
.tier .t-name{font-weight:600}
.tier .t-name small{display:block;font-weight:400;color:var(--muted);font-size:.8rem}
.tier .t-val{font-weight:700;color:var(--rose-d);white-space:nowrap}
.tier:nth-child(n+4) .t-lvl{background:linear-gradient(135deg,#fde9c4,#f3d9a4);color:#7a5517}
.tier:last-child .t-lvl{background:linear-gradient(135deg,#ff8fb1,#b0123f);color:#fff}
.tier.on{border-color:var(--rose);box-shadow:0 0 0 3px var(--blush)}

/* photo card teaser */
.mini-card{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:#fde6ee;padding:16px;border-radius:16px;box-shadow:var(--shadow-lg);transform:rotate(-2.5deg);max-width:420px;margin:0 auto}
.mc-ph{background:linear-gradient(135deg,#f7c9d9,#f2b2c8);border:4px solid #fff;height:78px;border-radius:3px;box-shadow:0 4px 10px -4px rgba(0,0,0,.2)}
.mc-title{grid-column:span 3;background:#fff5f8;text-align:center;font-family:Fraunces,serif;font-style:italic;font-size:1.5rem;color:#b0124f;padding:12px;line-height:1.1;border-radius:3px}

/* reviews + faq */
.review .stars{color:#f5a524;font-size:1.05rem;letter-spacing:2px}
.review p{font-family:Fraunces,serif;font-size:1.08rem;font-style:italic;color:var(--ink-2)}
details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin-bottom:10px;transition:box-shadow .15s}
details[open]{box-shadow:var(--shadow)}
summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";font-size:1.3rem;font-weight:400;color:var(--rose);line-height:1;transition:transform .2s}
details[open] summary:after{transform:rotate(45deg)}
details p{margin:.7em 0 0;color:var(--muted)}
.guarantee{display:flex;gap:16px;align-items:center;background:var(--blush);border-radius:var(--r);padding:18px 22px}
.cta-band{background:linear-gradient(135deg,#2a1236,#4a1a4f 60%,#7a1238);color:#fff;border-radius:28px;padding:56px 32px;text-align:center;position:relative;overflow:hidden}
.cta-band h2{color:#fff}
.cta-band p{color:#e7d6e5}
.cta-band:after{content:"";position:absolute;inset:auto -80px -120px auto;width:340px;height:340px;background:radial-gradient(circle,rgba(255,77,125,.45),transparent 65%)}

/* pages, forms */
.page{padding:44px 0 80px}
.page-head{margin-bottom:22px}
.page-head h1{font-size:clamp(1.9rem,4.4vw,2.8rem)}
.steps-head{display:flex;gap:0;margin-bottom:26px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px;box-shadow:var(--shadow)}
.steps-head span{flex:1;text-align:center;font-size:.84rem;font-weight:600;padding:8px 10px;border-radius:999px;color:var(--muted);white-space:nowrap}
.steps-head span.on{background:var(--grad);color:#fff;box-shadow:0 6px 14px -8px rgba(225,29,88,.8)}
.steps-head span.done{color:var(--ok)}
@media(max-width:520px){.steps-head span{font-size:.74rem;padding:7px 4px}}
.form-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:var(--shadow)}
.form-card + .form-card{margin-top:20px}
.form-card h3{margin-top:28px} .form-card h3:first-child{margin-top:0}
.sec-label{display:flex;align-items:center;gap:10px;font-family:Fraunces,serif;font-size:1.2rem;font-weight:600;margin:30px 0 14px}
.sec-label:first-of-type{margin-top:0}
.sec-label b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--blush);color:var(--rose-d);font-size:.95rem;font-family:Inter,sans-serif}
.field{margin-bottom:18px}
label{display:block;font-weight:600;margin-bottom:7px;font-size:.94rem}
.hint{font-weight:400;color:var(--muted);font-size:.84rem}
input[type=text],input[type=email],input[type=number],select,textarea{width:100%;padding:13px 15px;border:1.5px solid var(--line-2);border-radius:13px;font:inherit;font-size:16px;background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236f6475' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") right 12px center/20px no-repeat;padding-right:40px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--rose);box-shadow:0 0 0 4px rgba(225,29,88,.12)}
textarea{min-height:120px;resize:vertical}
#story{min-height:170px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.row2{grid-template-columns:1fr;gap:0}.form-card{padding:20px;border-radius:18px}.page{padding:26px 0 60px}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{font-weight:500;border:1.5px solid var(--line-2);border-radius:999px;padding:9px 16px;cursor:pointer;margin:0;background:#fff;font-size:.92rem;transition:all .12s}
.chips label:hover{border-color:#f5a3bb}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips label:has(input:checked){border-color:var(--rose);background:var(--blush);color:var(--rose-d);font-weight:600;box-shadow:0 0 0 3px rgba(225,29,88,.08)}
.chips label:has(input:focus-visible){box-shadow:0 0 0 3px rgba(225,29,88,.25)}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.92rem}
.check input{margin-top:4px;accent-color:var(--rose);width:18px;height:18px;flex:none}
.hp{position:absolute;left:-9999px;opacity:0}
.alert{padding:13px 17px;border-radius:13px;margin:12px 0;font-size:.95rem}
.alert ul{margin:.4em 0 0;padding-left:20px}
.alert-err{background:var(--err-bg);color:var(--err)}
.alert-ok{background:var(--ok-bg);color:var(--ok)}
.alert-info{background:var(--blush);color:var(--rose-d)}
.summary-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.summary-row.total{font-size:1.2rem;border-bottom:0;padding-top:14px}
.summary-row.total strong:last-child{font-family:Fraunces,serif;font-size:1.5rem}
.status{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-weight:600;font-size:.8rem;background:var(--blush);color:var(--rose-d)}
.status:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.status.delivered{background:var(--ok-bg);color:var(--ok)}
.making h2{font-size:1.5rem}
.progress{height:8px;background:#f3eaee;border-radius:99px;overflow:hidden;margin:18px 0}
.progress div{height:100%;background:var(--grad);transition:width .8s;border-radius:99px}
.facts{font-style:italic;color:var(--muted);font-size:.92rem;min-height:1.4em}
.lyrics-peek{font-family:Fraunces,serif;font-style:italic;color:var(--ink)}
.code-input{font-size:1.6rem!important;letter-spacing:.4em;text-align:center}
.legal h2{font-size:1.3rem;margin-top:1.6em}
.trust-row{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;font-size:.82rem;color:var(--muted);margin-top:14px}
.trust-row span{display:inline-flex;align-items:center;gap:6px}

/* song page */
.song-hero{background:linear-gradient(160deg,#2a1236,#1f0f2a);color:#fff;border-radius:24px;padding:26px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.song-hero:after{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;background:radial-gradient(circle,rgba(255,77,125,.4),transparent 65%);pointer-events:none}
.song-hero .muted{color:#cdbccd}
.song-hero .status{background:rgba(255,255,255,.12);color:#ffd3e0}
.song-hero .status.delivered{background:rgba(52,211,153,.18);color:#86efac}
.sh-top{display:flex;gap:18px;align-items:center;margin-bottom:18px;position:relative;z-index:1}
.sh-top h2{color:#fff;margin:6px 0 2px;font-size:1.5rem}
.song-hero audio{width:100%;position:relative;z-index:1;border-radius:99px}
.song-hero details{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#fff;margin-top:16px}
.song-hero details p,.song-hero .lyrics-peek{color:#eadbe8}
.addons{display:grid;gap:10px;margin-top:14px}
.addon{display:grid;grid-template-columns:auto auto 1fr auto;gap:14px;align-items:center;border:1.5px solid var(--line-2);border-radius:16px;padding:14px 16px;cursor:pointer;margin:0;font-weight:400;transition:all .15s;background:#fff}
.addon:hover{border-color:#f5a3bb}
.addon input{accent-color:var(--rose);width:20px;height:20px;margin:0}
.addon:has(input:checked){border-color:var(--rose);background:#fff7fa;box-shadow:0 0 0 3px rgba(225,29,88,.08)}
.addon .ar-ico{width:42px;height:42px}
.addon-price{text-align:right;white-space:nowrap}
.addon-txt strong{font-size:.98rem}
@media(max-width:480px){.addon{grid-template-columns:auto 1fr auto;gap:10px;padding:12px}.addon .ar-ico{display:none}}
.inline{display:flex;gap:8px}
.inline input{min-width:0}
.quote{margin-top:18px;background:var(--cream);border:1px solid #f3e6dc;border-radius:16px;padding:6px 18px 8px}
.quote:empty{display:none}
.earn{display:flex;gap:12px;align-items:center;background:linear-gradient(135deg,#fff0f4,#fff7ef);border:1px solid #fbd5e0;border-radius:14px;padding:12px 16px;margin-top:14px;font-size:.92rem}
.earn img{width:34px;flex:none}
.use-hearts{display:flex;gap:14px;align-items:center;border:1.5px solid #f9c4d3;background:linear-gradient(135deg,#fff5f8,#fff);border-radius:16px;padding:14px 16px;margin-top:14px;cursor:pointer;font-weight:400}
.use-hearts img{width:40px;flex:none}
.use-hearts .uh-txt{flex:1}
.use-hearts .uh-txt strong{display:block}
.switch{position:relative;width:48px;height:28px;flex:none}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch i{position:absolute;inset:0;background:#e5dbe0;border-radius:99px;transition:background .2s}
.switch i:before{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:transform .2s}
.switch input:checked + i{background:var(--rose)}
.switch input:checked + i:before{transform:translateX(20px)}
.use-hearts:has(input:checked){border-color:var(--rose);box-shadow:0 0 0 3px rgba(225,29,88,.08)}
.promo-toggle{background:none;border:0;color:var(--rose-d);font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;padding:0;margin-top:14px;text-decoration:underline;text-underline-offset:3px}
.pay-box{margin-top:18px}
.song-card audio{margin-top:6px}
.ver{display:grid;grid-template-columns:90px 1fr auto;gap:10px;align-items:center;padding:6px 0}
.ver audio{width:100%;height:36px}
@media(max-width:480px){.ver{grid-template-columns:1fr}.ver audio{height:40px}}
.stars-input button{background:none;border:0;font-size:2.1rem;color:#e2d6db;cursor:pointer;padding:0 2px}
.stars-input button.on{color:#f5a524}
.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;position:relative;z-index:1}
.action-grid .btn-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.2);box-shadow:none}
.action-grid .btn-ghost:hover{background:rgba(255,255,255,.16)}
.action-grid .full{grid-column:span 2}
@media(max-width:420px){.action-grid{grid-template-columns:1fr}.action-grid .full{grid-column:auto}}

/* card setup inside checkout */
.card-setup{margin-top:12px;border:1.5px dashed #f5a3bb;border-radius:16px;padding:16px;background:#fffafb}
.card-setup[hidden]{display:none}
.card-setup h4{margin:0 0 4px;font-family:Fraunces,serif;font-size:1.05rem}
.cs-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;margin-top:8px}
.cs-photos .ph{aspect-ratio:1;border-radius:10px;background:#f6eef1 center/cover;position:relative;border:1px solid var(--line)}
.cs-photos .ph button{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;border:0;background:var(--ink);color:#fff;font-size:.8rem;cursor:pointer;line-height:22px;padding:0}
.cs-add{aspect-ratio:1;border-radius:10px;border:1.5px dashed var(--line-2);background:#fff;color:var(--muted);font:inherit;font-size:.78rem;cursor:pointer;display:grid;place-items:center;text-align:center;padding:4px}

/* account */
.acct-hero{background:radial-gradient(600px 300px at 100% 0,#5b1f63,transparent 60%),linear-gradient(160deg,#2a1236,#1f0f2a);color:#fff;padding:44px 0 90px}
.acct-hero h1{color:#fff;font-size:clamp(1.9rem,4.4vw,2.7rem);margin-bottom:6px}
.acct-hero .muted{color:#cdbccd}
.acct-hero a{color:#ffc2d4}
.dash-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.acct-body{margin-top:-60px;padding-bottom:80px}
.dash-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;align-items:start}
@media(max-width:900px){.dash-grid{grid-template-columns:1fr}.acct-hero{padding:30px 0 80px}}
.dash-title{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 14px}
.dash-title h2{font-size:1.35rem;margin:0}
.song-item{background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px;margin-bottom:16px;box-shadow:var(--shadow)}
.si-top{display:flex;gap:16px;align-items:center;margin-bottom:12px}
.si-art{width:72px;height:72px;border-radius:16px;background:linear-gradient(135deg,#ff8fb1,#e11d58 55%,#5b1f63) center/cover;display:grid;place-items:center;color:#fff;font-size:1.5rem;flex:none;box-shadow:0 10px 20px -10px rgba(225,29,88,.6)}
.si-art.has-img .i{display:none}
.si-meta{min-width:0}
.si-meta strong{font-family:Fraunces,serif;font-size:1.15rem;display:block;margin-bottom:2px}
.song-item audio{width:100%}
.si-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
@media(max-width:480px){.si-actions .btn{flex:1}}
.si-locks{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:420px){.si-locks{grid-template-columns:1fr}}
.lock-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:11px 14px;text-decoration:none;color:var(--muted);font-size:.9rem;border:1px solid var(--line);border-radius:12px;background:#fdfbfc}
.lock-row span{color:var(--rose-d);font-weight:600;white-space:nowrap}
.lock-row.open{color:var(--ink);background:#fff}
.lock-row:hover{border-color:#f5a3bb}
.wallet{background:linear-gradient(150deg,#fff,#fff3f6);border:1px solid #f9d3de;border-radius:22px;padding:22px;box-shadow:var(--shadow)}
.hb-top{display:flex;gap:16px;align-items:center}
.hb-top img{width:66px;filter:drop-shadow(0 10px 16px rgba(176,18,63,.3));animation:beat 2.6s ease-in-out infinite}
.hb-num{font-size:2.6rem;font-weight:700;font-family:Fraunces,serif;line-height:1}
.tier-now{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:18px 0 6px;font-size:.92rem}
.tier-pill{background:linear-gradient(135deg,#fde9c4,#f3d9a4);color:#6b4a12;padding:4px 12px;border-radius:999px;font-weight:700;font-size:.8rem}
.wallet details{background:transparent;border:0;border-top:1px solid #f6dbe3;border-radius:0;padding:12px 0 0;margin:12px 0 0}
.wallet details[open]{box-shadow:none}
.ledger{display:flex;justify-content:space-between;padding:4px 0}
.help-card{margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:var(--shadow)}
.help-card .btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.empty{text-align:center;padding:44px 20px}
.empty img{width:70px;margin-bottom:10px}
.tour{position:fixed;inset:auto 0 24px 0;display:flex;justify-content:center;z-index:9990;pointer-events:none}
.tour-box{pointer-events:auto;background:var(--plum);color:#fff;border-radius:18px;padding:18px 22px;max-width:420px;margin:0 16px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.tour-box .muted{color:#cdbccd}
.tour-nav{display:flex;justify-content:flex-end;gap:8px}
.tour-hl{outline:3px solid #ff8fb1;outline-offset:4px;border-radius:16px;position:relative;z-index:5}

/* card designer */
.card-designer{display:grid;grid-template-columns:400px 1fr;gap:26px;align-items:start}
@media(max-width:960px){.card-designer{grid-template-columns:1fr}.cd-preview{order:-1;position:static!important}}
.cd-preview{position:sticky;top:90px}
.cd-preview canvas{width:100%;height:auto;border-radius:10px;box-shadow:0 30px 60px -24px rgba(59,24,70,.45);background:#fff}
.ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.ph-slot{aspect-ratio:1;border:1.5px dashed var(--line-2);border-radius:12px;background:#fff center/cover;cursor:pointer;color:var(--muted);font:inherit;font-size:.8rem;position:relative}
.ph-slot.has{border:1px solid var(--line)}
.ph-slot .x{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;font-size:.75rem;line-height:22px;text-align:center}
.theme-dots{display:flex;gap:10px;flex-wrap:wrap}
.theme-dots label{margin:0;cursor:pointer}
.theme-dots input{position:absolute;opacity:0}
.theme-dots span{display:block;width:34px;height:34px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1.5px var(--line-2)}
.theme-dots input:checked + span{box-shadow:0 0 0 2.5px var(--rose)}
.lyrics-sheet{margin-top:22px;background:#fffaf0;border:1px solid #eedcb6;border-radius:10px;padding:34px;text-align:center;box-shadow:var(--shadow)}
.ls-title{font-family:Fraunces,serif;font-size:1.9rem}
.ls-sub{font-style:italic;color:var(--muted);margin-bottom:16px}
.lyrics-sheet pre{white-space:pre-wrap;font-family:Fraunces,serif;font-size:1.05rem;line-height:1.75}

.modal{position:fixed;inset:0;background:rgba(29,20,36,.55);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:9995;padding:16px}
.modal[hidden]{display:none}
.modal-box{background:#fff;border-radius:22px;padding:26px;max-width:440px;width:100%;position:relative;max-height:92vh;overflow:auto;box-shadow:var(--shadow-lg)}
.modal-box .chat-x{position:absolute;right:16px;top:12px}

/* footer */
.foot{background:var(--plum);color:#d9c8d8;padding:56px 0 100px;margin-top:0}
.foot .muted{color:#a993a8}
.foot-in{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px}
.foot h4{color:#fff;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin:6px 0 14px}
.foot-links{display:grid;gap:9px}
.foot-links a{color:#efe2ee;text-decoration:none;font-size:.94rem}
.foot-links a:hover{color:#ff8fb1}
.foot-bottom{margin-top:36px;border-top:1px solid rgba(255,255,255,.1);padding-top:18px;display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between}
@media(max-width:760px){.foot-in{grid-template-columns:1fr 1fr}.foot-in > div:first-child{grid-column:span 2}.logo-full{height:76px}}

/* chat */
.chat{position:fixed;right:18px;bottom:18px;z-index:2147483000}
.chat-btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;border:0;border-radius:999px;padding:13px 20px;font:inherit;font-weight:600;cursor:pointer;box-shadow:0 12px 30px -8px rgba(29,20,36,.55)}
.chat-btn:hover{background:#2e2238}
.chat-panel{position:absolute;right:0;bottom:62px;width:380px;max-width:calc(100vw - 24px);height:580px;max-height:calc(100vh - 110px);background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 70px -20px rgba(29,20,36,.45);display:flex;flex-direction:column;overflow:hidden}
.chat-panel[hidden]{display:none}
.chat-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:linear-gradient(135deg,#2a1236,#1f0f2a);color:#fff}
.chat-head .tiny{color:#cdbccd}
.chat-x{background:none;border:0;font-size:1.6rem;cursor:pointer;line-height:1;color:inherit}
.chat-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px;background:#fbf8f9}
.msg{max-width:85%;padding:10px 14px;border-radius:16px;font-size:.93rem;line-height:1.45;word-wrap:break-word}
.msg .who{font-size:.72rem;color:var(--muted);margin-bottom:2px;font-weight:600}
.msg img{max-width:100%;border-radius:10px;margin-top:4px;display:block}
.msg audio{width:220px;margin-top:4px}
.msg-customer{align-self:flex-end;background:var(--grad);color:#fff;border-bottom-right-radius:5px}
.msg-customer .who{color:#ffd3e0}
.msg-customer a{color:#fff}
.msg-ai,.msg-agent{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px}
.msg-agent{border-color:#a7dcbc;background:#f2fbf5}
.msg-system{align-self:center;background:transparent;color:var(--muted);font-size:.8rem;text-align:center;max-width:95%}
.typing span{display:inline-block;width:7px;height:7px;margin:0 2px;background:#bbb;border-radius:50%;animation:blink 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}
.chat-quick{display:flex;gap:6px;flex-wrap:wrap;padding:10px 12px;border-top:1px solid var(--line)}
.chat-quick button{border:1px solid var(--line-2);background:#fff;border-radius:999px;padding:6px 11px;font:inherit;font-size:.8rem;cursor:pointer}
.chat-quick button:hover{border-color:var(--rose);color:var(--rose-d)}
.chat-form{display:flex;gap:6px;padding:10px 12px;border-top:1px solid var(--line);align-items:center}
.chat-form input{flex:1;padding:11px 14px;border-radius:999px}
.chat-attach{cursor:pointer;font-size:1.2rem;margin:0;color:var(--muted)}
.chat-foot{padding:0 14px 8px}
@media(max-width:480px){.chat{right:12px;bottom:12px}.chat-btn{padding:12px 16px}.chat-panel{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;border-radius:0}}
/* checkout page: help button chhota, payment buttons ke upar na aaye */
body.checkout .chat-btn .lbl{display:none}
body.checkout .chat-btn{padding:13px}
body.checkout .foot{padding-bottom:110px}

/* reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.hearts-hero img,.hb-top img{animation:none}}

/* icons (SVG masks, colour = currentColor) */
.i{display:inline-block;width:1em;height:1em;vertical-align:-.14em;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;flex:none}
.i-heart{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E")}
.i-lock{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6z'/%3E%3C/svg%3E")}
.i-chat{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E")}
.i-clip{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z'/%3E%3C/svg%3E")}
.i-music{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z'/%3E%3C/svg%3E")}
.i-shield{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/%3E%3C/svg%3E")}
.i-doc{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E")}
.i-image{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E")}
.i-bolt{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2v11h3v9l7-12h-4l4-8z'/%3E%3C/svg%3E")}
.i-download{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E")}
.i-refresh{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E")}
.i-gift{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6h-2.18c.11-.31.18-.65.18-1a2.996 2.996 0 0 0-5.5-1.65l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 12 7.4l3.38 4.6L17 10.83 14.92 8H20v6z'/%3E%3C/svg%3E")}
.i-star{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E")}
.i-check{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E")}
.i-play{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E")}
.i-heart{color:#e11d58}

/* ---- QA fixes (2026-11-07) ---- */
/* grid items ko content se chauda na hone do (card page iPhone par side me khisakta tha) */
.card-designer > *, .grid2 > *, .grid3 > *, .grid4 > *, .pricing > *, .dash-grid > *, .hero-grid > * { min-width: 0 }
.card-designer { grid-template-columns: minmax(0, 400px) minmax(0, 1fr) }
@media (max-width: 960px) { .card-designer { grid-template-columns: minmax(0, 1fr) } }
.sample audio { max-width: 100% }
/* menu bar hamesha PayPal buttons ke upar */
.nav { z-index: 1000 }
/* mobile menu */
.menu-btn { display: none; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px }
.menu-btn span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .2s, opacity .2s }
.menu-btn[aria-expanded=true] span:nth-child(1) { transform: translateY(6px) rotate(45deg) }
.menu-btn[aria-expanded=true] span:nth-child(2) { opacity: 0 }
.menu-btn[aria-expanded=true] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg) }
.m-menu { border-top: 1px solid var(--line); background: #fff; padding: 6px 22px 14px; box-shadow: 0 20px 30px -20px rgba(29,20,36,.3) }
.m-menu[hidden] { display: none }
.m-menu a { display: block; padding: 14px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 500; font-size: 1.02rem }
.m-menu a:last-child { border-bottom: 0 }
@media (max-width: 980px) { .menu-btn { display: inline-flex } .nav-links .acct { display: none } }
@media (min-width: 981px) { .m-menu { display: none !important } }
@media (max-width: 480px) { .nav-links { gap: 8px } .menu-btn { width: 42px; height: 42px } }
/* tap targets 44px */
.nav-links a.acct { padding: 10px 4px }
.foot-links { gap: 0 }
.foot-links a { display: block; padding: 11px 0 }
.foot p a { display: inline-block; padding: 10px 0 }
details { padding: 0 }
summary { padding: 16px 20px; min-height: 52px }
details > p, details > div { padding: 0 20px 16px; margin-top: 0 }
.song-hero details > p { padding: 0 20px 16px }
.check a { display: inline-block; padding: 4px 0 }
p.small a, p.tiny a, .muted a { padding: 6px 0; display: inline-block }
/* step chips padhne layak */
@media (max-width: 520px) { .steps-head span { font-size: 13px; padding: 8px 2px; letter-spacing: -.01em } }
/* help button: phone par chhota gol icon, aur type karte waqt chhup jaaye */
@media (max-width: 760px) {
  .chat-btn .lbl { display: none }
  .chat-btn { width: 50px; height: 50px; padding: 0; justify-content: center }
  .chat { right: 10px; bottom: 10px }
  main { padding-bottom: 24px }
}
body.typing .chat { display: none }
body.menu-open .chat { display: none }
/* form galtiyan */
.invalid, input.invalid, textarea.invalid { border-color: var(--err) !important; box-shadow: 0 0 0 4px rgba(194,32,59,.1) !important }
.field.invalid { border: 0 !important; box-shadow: none !important }
.field.invalid > label, .field.invalid .check { color: var(--err) }
.field.invalid .chips label { border-color: #f1a3b2 }
.no-fees { display: flex; gap: 8px; align-items: center; font-size: .88rem; color: var(--ok); font-weight: 600; margin: -6px 0 6px }

.wallet summary { padding: 12px 0; min-height: 0 }
.wallet details > p, .wallet details > div { padding-left: 0; padding-right: 0 }
.foot-bottom > span { min-width: 0; overflow-wrap: anywhere }
@media (max-width: 760px) { .foot-bottom > span { flex: 1 1 100% } }
.foot p a { padding: 12px 0 }
.summary-row a { display: inline-block; padding: 10px 0 }
.pf-time { font-size: .8rem }
.kicker { font-size: .82rem }
/* phone par Help button tab dikhe jab user thoda scroll kar le (pehli screen ka bada button na dhake) */
@media (max-width: 760px) { body:not(.scrolled) .chat { opacity: 0; pointer-events: none; transform: translateY(20px) } .chat { transition: opacity .25s, transform .25s } }
/* chhote phone: pehli screen par hi "Hear your free preview" button dikhe */
@media (max-width: 400px) {
  .hero { padding: 26px 0 48px }
  .eyebrow { margin-bottom: 12px; font-size: .72rem; padding: 6px 11px }
  .hero h1 { font-size: 2rem; margin-bottom: .35em }
  .hero .lead { font-size: 1rem }
  .hero-cta { margin: 18px 0 16px }
  .topbar { font-size: .76rem; padding: 6px 10px }
}
/* checkout card preview modal + embedded designer */
.cpv{position:fixed;inset:0;z-index:95;background:rgba(20,10,24,.6);display:flex;align-items:center;justify-content:center;padding:14px}
.cpv[hidden]{display:none}
.cpv-box{position:relative;width:min(1000px,100%);height:min(88vh,860px);background:#fff;border-radius:18px;overflow:hidden}
.cpv-box iframe{width:100%;height:100%;border:0}
.cpv-x{position:absolute;top:10px;right:10px;z-index:2;width:38px;height:38px;border-radius:50%;border:0;background:var(--ink);color:#fff;font-size:1.3rem;cursor:pointer}
body.embed .topbar,body.embed .nav,body.embed header,body.embed footer,body.embed .chat,body.embed .gd-fab{display:none!important}
body.embed .page{padding-top:16px}

/* moments (photo tiles) */
.moments{padding:56px 0}
.mo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mo{position:relative;display:block;border-radius:20px;overflow:hidden;aspect-ratio:4/5;background:#2a1d2e;text-decoration:none;color:#fff;box-shadow:0 18px 40px -22px rgba(29,20,36,.55)}
.mo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.mo:hover img{transform:scale(1.04)}
.mo span{position:absolute;left:0;right:0;bottom:0;padding:40px 14px 14px;background:linear-gradient(transparent,rgba(15,8,18,.82));font-size:.8rem}
.mo span b{display:block;font-size:1.05rem;margin-bottom:2px}
@media(max-width:760px){.mo-grid{grid-template-columns:1fr 1fr}}