.player audio{width:100%;display:block}
.player .ui{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"btn wave" "btn times";align-items:center;column-gap:14px;row-gap:2px}
.player .pp{grid-area:btn;width:50px;height:50px;border-radius:50%;border:0;background:var(--coral-deep);color:var(--cream);display:grid;place-items:center;cursor:pointer;transition:transform .15s,background .15s}
.player .pp:hover{background:#B7311F;transform:scale(1.05)}
.player .pp svg{width:18px;height:18px}.player .pp .i-play{margin-left:3px}.player .pp .i-pause{display:none}.player.playing .pp .i-play{display:none}.player.playing .pp .i-pause{display:block}
.wave{grid-area:wave;position:relative;height:38px;min-width:0}
.wave .bars{position:absolute;inset:0;width:100%;height:100%;display:block;color:var(--lav2)}
.wave .bars.on{color:var(--plum);clip-path:inset(0 calc(100% - var(--p,0%)) 0 0)}
.wave input{position:absolute;inset:-6px 0;width:100%;height:calc(100% + 12px);margin:0;opacity:0;cursor:pointer}
.wave:focus-within{outline:3px solid var(--plum);outline-offset:4px;border-radius:6px}
.times{grid-area:times;display:flex;justify-content:space-between;font:400 13px/1 var(--sans);color:var(--muted)}
.hint{margin:6px 0 0;font:400 13px/1.4 var(--sans);color:var(--muted)}
h1,h2{font-family:var(--serif)}
.hero{padding:clamp(18px,3vw,34px) 0 clamp(30px,4.5vw,56px);overflow-x:hidden;overflow-x:clip}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,4vw,56px);align-items:center}
.eyebrow{font:600 13px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.crumbs{font:400 14px/1.4 var(--sans);color:var(--muted);margin:0 0 16px}.crumbs a{color:var(--plum)}
h1{font:700 clamp(36px,4.8vw,60px)/1.02 var(--serif);letter-spacing:-.015em;margin:0 0 16px}
h1 em{font-style:normal;font-weight:700;color:var(--coral)}
h2{font:700 clamp(26px,3.2vw,38px)/1.1 var(--serif);letter-spacing:-.015em;margin:0 0 12px}
.lead{font:400 18px/1.6 var(--sans);color:var(--muted);max-width:34em;margin:0 0 18px}
.price-badge{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"price lead" "price note";column-gap:16px;align-items:center;width:fit-content;max-width:100%;background:var(--butter);border-radius:16px;padding:12px 20px 12px 18px;margin:0 0 20px}
.price-badge strong{grid-area:price;font:700 clamp(34px,3.6vw,44px)/1 var(--serif);white-space:nowrap}
.price-badge small{font:600 14px var(--sans);letter-spacing:.04em}
.price-badge b{grid-area:lead;font:600 17px/1.25 var(--sans)}
.price-badge span{grid-area:note;font:400 14.5px/1.4 var(--sans)}
.hint{font:400 14px/1.45 var(--sans);color:var(--muted);margin:10px 0 0}
.assure{font:400 15px/1.5 var(--sans);color:var(--muted);margin:16px 0 0;max-width:34em}.assure a,.assure strong{color:var(--plum)}
.art{position:relative;width:100%;max-width:380px;margin-left:auto;aspect-ratio:1/1.08}
.art .lav{position:absolute;left:22%;right:-3%;top:-2%;bottom:16%;background:linear-gradient(135deg,#F9917E,#F55943);border-radius:26px;transform:rotate(-4deg)}
.art .photo{position:absolute;left:6%;right:0;top:5%;bottom:8%;border-radius:26px;overflow:hidden;transform:rotate(2.6deg);box-shadow:var(--shadow)}
.art .photo svg,.art .photo img{width:100%;height:100%;display:block}.art .photo img{object-fit:cover}
.block{padding:clamp(30px,4.5vw,52px) 0}
.block .wrap{max-width:900px}
.block .wrap.wide{max-width:var(--wrap)}
.block.alt{background:var(--butter)}
.block p{margin:0 0 14px}
.block p.muted,.muted{color:var(--muted)}
.block ul,.block ol{margin:12px 0 16px}
.prompts{padding-left:22px}.prompts li{margin:8px 0}.prompts li::marker{color:var(--coral-deep)}
.player{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px 20px;max-width:640px;margin-top:8px;box-shadow:0 8px 22px rgba(36,8,34,.07)}
.player strong{display:block;font:600 24px/1.2 var(--serif)}
.player .sub{display:block;color:var(--muted);font-size:14px;margin:4px 0 12px}
.steps{list-style:none;counter-reset:st;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 0}
.steps li{counter-increment:st;position:relative;margin:0;padding:2px clamp(12px,2vw,24px) 2px calc(clamp(12px,2vw,24px) + 58px)}
.steps li+li{border-left:1px solid rgba(36,8,34,.3)}
.steps li::before{content:"0" counter(st);position:absolute;left:clamp(12px,2vw,24px);top:2px;font:600 54px/.8 var(--serif);letter-spacing:-.04em;color:var(--coral)}
.steps li:first-child{padding-left:58px}.steps li:first-child::before{left:0}
.steps b{display:block;font:600 21px/1.2 var(--serif);margin-bottom:4px}
.block details{background:var(--card);border:1px solid var(--line);border-radius:16px;margin:0 0 12px;padding:0 22px}
.block summary{list-style:none;cursor:pointer;font:600 19px/1.3 var(--serif);padding:18px 30px 18px 0;position:relative}
.block summary::-webkit-details-marker{display:none}
.block summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font:400 28px/1 var(--sans);color:var(--coral-deep)}
.block details[open] summary::after{content:"\2212"}
.block details p{font:400 16px/1.65 var(--sans);color:var(--muted);margin:0 0 14px}
.block details p:first-of-type{margin-top:0}.block details p:last-child{margin-bottom:20px}
.block details a,.block a{color:var(--plum)}
.also{font-size:16px}.also a{margin-right:6px;font-weight:600}
.fields{margin:14px 0 0}.fields dt{font:600 19px/1.3 var(--serif);margin-top:20px}.fields dd{margin:4px 0 0;color:var(--muted);font-size:16px;max-width:760px}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;margin:16px 0 18px;max-width:760px}
.compare div{padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line);font-size:15px;line-height:1.5}
.compare .gen{background:#fff3d9}
.compare b,.example .tag{display:block;font:600 12px/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--coral-deep);margin-bottom:4px}
.example{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px 22px;max-width:700px;margin:14px 0 0}
.example .tag{margin-top:16px}.example .tag:first-child{margin-top:0}
.example p{margin:0 0 10px;font-size:16px}.example p:last-child{margin-bottom:0}
.cta{margin:clamp(40px,6vw,70px) auto 0;max-width:calc(var(--wrap) - 40px);width:calc(100% - 2*var(--pad));background:var(--coral);color:var(--plum);border-radius:22px;padding:clamp(30px,5vw,52px) var(--pad)}
.cta .wrap{max-width:none;padding:0;display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between}
.cta h2{color:#fff;margin:0 0 8px;font-size:clamp(28px,4vw,44px)}
.cta p{margin:0;font-size:17px;max-width:34em}
.cta .hint{color:var(--plum);font-size:14px;margin-top:8px}
.cta .btn{background:var(--coral-deep);color:#fff;box-shadow:none;white-space:nowrap}.cta .btn:hover{background:#B7311F}
@media(max-width:860px){.hero .wrap{grid-template-columns:1fr}.art{margin:8px auto 0;max-width:260px}.steps{grid-template-columns:1fr}.steps li+li{border-left:0;border-top:1px solid rgba(36,8,34,.25);padding-top:16px}.steps li,.steps li:first-child{padding-left:58px}.steps li::before{left:0}.compare{grid-template-columns:1fr}}
@media(max-width:600px){.price-badge{grid-template-columns:1fr;grid-template-areas:"lead" "price" "note";row-gap:2px;width:auto}.cta .btn{white-space:normal;width:100%}.cta .wrap{display:block}.cta .btn{margin-top:18px}.example{padding:16px}}
.tips-menu{background:var(--butter);padding:16px 0 18px}
.tips-menu.inline{background:none;padding:16px 0 0;margin:24px 0 0;border-top:1px solid var(--line)}
.tips-menu .tm-title{margin:0 0 8px;font:600 clamp(12px,calc((100vw - 40px)/26.2),22px)/1.3 var(--serif);color:var(--plum);letter-spacing:-.01em;white-space:nowrap}
.tips-menu ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:0 8px;max-width:560px}
.tips-menu a{display:flex;align-items:baseline;gap:7px;padding:5px 0;color:var(--coral-deep);font:500 15.5px/1.3 var(--sans);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.tips-menu a::before{content:"›";flex:none;display:inline-block;font:700 22px/.8 var(--sans);color:var(--coral-deep);text-decoration:none}
.tips-menu .tm-big a{font:600 16.5px/1.3 var(--serif)}
.tips-menu a:hover{color:var(--plum)}
.tips-menu a[aria-current=page]{color:var(--plum);text-decoration:none;font-weight:700}.tips-menu a[aria-current=page]::before{content:"•";font-size:18px;color:var(--plum)}
.tips-menu a:focus-visible{outline:3px solid var(--plum);outline-offset:2px;border-radius:4px}
@media(max-width:380px){.tips-menu ul{gap:0 6px}.tips-menu a{gap:5px;font-size:14.5px}.tips-menu .tm-big a{font-size:15.5px}}.art{aspect-ratio:1/1.3}
.art .photo img{object-position:50% 28%}
.art .player{position:absolute;right:-4%;bottom:-3%;width:min(108%,350px);max-width:none;margin:0;padding:14px 16px 12px;z-index:2;box-shadow:var(--shadow)}
.art .player strong{font-size:20px}
.art .player .sub{margin:2px 0 8px;font-size:13px}
.art .player .hint{margin-top:4px;font-size:12.5px}
.hc-kicker{font:600 11.5px/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--coral-deep);margin:0 0 6px}
.hc-note{font:400 12px/1.4 var(--sans);color:var(--muted);margin:8px 0 0}
@media(max-width:860px){.art{max-width:380px;aspect-ratio:auto}.art .lav{bottom:30%}.art .photo{position:relative;inset:auto;margin:5% 0 0 6%;width:94%;aspect-ratio:340/300}.art .player{position:relative;right:auto;bottom:auto;width:92%;margin:-46px 0 0 auto}}
@media(max-width:340px){.tips-menu ul{display:flex;flex-wrap:wrap;gap:0 14px}.tips-menu a{font-size:14.5px;gap:4px}.tips-menu .tm-big a{font-size:15px}}
.art.solo{aspect-ratio:1/1.08}
@media(max-width:860px){.art.solo{max-width:260px;aspect-ratio:1/1.08}.art.solo .lav{bottom:16%}.art.solo .photo{position:absolute;inset:auto;left:6%;right:0;top:5%;bottom:8%;width:auto;margin:0;aspect-ratio:auto}}

.ready{margin:clamp(28px,4vw,44px) auto;max-width:calc(var(--wrap) - 40px);width:calc(100% - 2*var(--pad));background:var(--plum);color:var(--cream);border-radius:22px;padding:clamp(26px,4vw,40px) var(--pad);box-shadow:var(--shadow)}
.ready .wrap{max-width:none;padding:0;display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between}
.ready .rk{margin:0 0 8px;font:600 13px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--butter)}
.ready h2{margin:0 0 8px;color:#fff;font-size:clamp(26px,3.6vw,40px)}
.ready p{margin:0;color:var(--cream);font-size:17px;max-width:36em}
.ready .btn{background:var(--coral-deep);color:#fff;box-shadow:none;white-space:nowrap}
.ready .btn:hover{background:#B7311F}
.ready :focus-visible{outline-color:var(--butter)}
@media(max-width:600px){.ready .wrap{display:block}.ready .btn{white-space:normal;width:100%;margin-top:18px}}
.tips-menu .tm-title{white-space:normal;text-wrap:balance;font:700 clamp(19px,5.2vw,24px)/1.2 var(--serif);letter-spacing:-.01em;margin:0 0 8px}
.hero.tips-hero .wrap{max-width:900px;grid-template-columns:1fr}

/* "Example song coming soon" box: same look as .player, but no audio */
.soon{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px 20px;max-width:640px;margin-top:8px;box-shadow:0 8px 22px rgba(36,8,34,.07)}
.soon strong{display:block;font:600 24px/1.2 var(--serif)}
.soon .sub{display:block;color:var(--muted);font-size:14px;margin:4px 0 12px}
.soon .ui{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"btn wave" "btn times";align-items:center;column-gap:14px;row-gap:2px}
.soon .pp{grid-area:btn;width:50px;height:50px;border-radius:50%;background:var(--lav2);color:var(--cream);display:grid;place-items:center}
.soon .pp svg{width:18px;height:18px;margin-left:3px}
.soon .wave{grid-area:wave;position:relative;height:38px;min-width:0;color:var(--lav2)}
.soon .wave svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.soon .times{grid-area:times;display:flex;justify-content:space-between;font:400 13px/1 var(--sans);color:var(--muted)}
.art .soon{position:absolute;right:-4%;bottom:-3%;width:min(108%,350px);max-width:none;margin:0;padding:14px 16px 12px;z-index:2;box-shadow:var(--shadow)}
.art .soon strong{font-size:20px}
.art .soon .sub{margin:2px 0 8px;font-size:13px}
@media(max-width:860px){.art .soon{position:relative;right:auto;bottom:auto;width:92%;margin:-46px 0 0 auto}}