/* Studio by Maggie · site stylesheet · clean rebuild (Oct 31 2026, night)
   Design system, modelled on the site Maggie loves (dominikazak.pl):
   - ONE type family (Commissioner, Greek + Latin). Strict ladder: 78 / 60 / 24 / 20 / 18 / 14 / 13.
   - White page, deep aubergine ink, one pale pink tint, one fresh pink accent, rose only for "order".
   - 8-pt spacing. Rounded 24 px cards. No ornaments, no frames around photos, no serif mixing.
   - Motion: smooth scroll, soft fade-up reveals, a sliding testimonial strip, a playful hero player. */

:root{
  --bg:#FFFFFF; --cream:#FFF3F6; --ink:#1F1023; --ink-2:#3B3038; --muted:#6E6169; --line:#EEE3E6;
  --hot:#A65F60; --hot-dark:#8E4B4D; --band:#FFDDE5; /* Maggie, Nov 1: back to the soft palette */
  --display:var(--font);
  --tint:#FFF3F6; --tint-2:#FDE6EE; --pink:#EE8FAD; --pink-soft:#F8C9D7;
  --rose:var(--hot); --rose-dark:var(--hot-dark);
  --font:"Commissioner", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif:"Noto Serif Display", Georgia, serif;           /* only used inside the drawn wish card */
  --r:24px; --r-lg:32px; --ease:cubic-bezier(.16,1,.3,1);
  --gutter:24px; --max:1200px;
  --plum:var(--ink); --white:#fff; --paper:var(--bg); --gold:var(--pink); --gold-ink:var(--rose); --green:var(--ink);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--font);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
[hidden]{display:none!important}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:10px 14px;z-index:99}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.no-js-only{display:block}.js .no-js-only{display:none}
.js-only{display:none}.js .js-only{display:block}

/* ---------- type ladder ---------- */
h1,h2,h3{font-family:var(--font);color:var(--ink);margin:0;text-wrap:balance}
h1{font-size:clamp(39px,9.6vw,61px);font-weight:700;line-height:1.02;letter-spacing:-.025em}
h2{font-size:clamp(31px,7.4vw,49px);font-weight:700;line-height:1.05;letter-spacing:-.02em;margin-bottom:16px}
h3{font-size:20px;font-weight:650;line-height:1.25;letter-spacing:-.01em}
h1 em,h2 em{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.01em;color:var(--hot)}
.lead{font-size:20px;line-height:1.6;color:var(--muted);margin:0 0 8px;text-wrap:pretty}
.kicker,.eyebrow{display:inline-flex;margin:0 0 8px;font:italic 400 20px/1.3 var(--serif);letter-spacing:0;text-transform:none;color:var(--hot)}
.kicker::before,.eyebrow::before{content:none}
p{text-wrap:pretty}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:58px;padding:16px 32px;border-radius:999px;border:0;cursor:pointer;
  font:700 13px/1.2 var(--font);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;text-align:center;transition:transform .35s var(--ease),background .25s,box-shadow .35s var(--ease)}
.btn .arr{display:inline-block;transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.btn-buy{background:var(--rose);color:#fff}
.btn-buy:hover{background:var(--rose-dark);transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(194,27,107,.6)}
.btn-line{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-plum{background:var(--ink);color:#fff}
.btn small{font-weight:400;opacity:.9}
.risk{font-size:13px;color:var(--muted);margin:14px 0 0}
.risk.deadline{color:var(--rose);margin-top:4px}

/* ---------- top strip ---------- */
.strip{background:var(--ink);color:#fff;font:500 13px/1.3 var(--font);position:relative;z-index:5}
.strip .wrap{display:flex;justify-content:space-between;align-items:center;min-height:42px;gap:12px}
.strip b{color:var(--pink-soft);font-weight:600}
.strip .back{text-decoration:none;color:#fff}
.lang{font-weight:600;letter-spacing:.08em;text-decoration:none;border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:5px 12px}

/* ---------- sections ---------- */
section{padding:64px 0}
.tex-paper{background:var(--bg)}
.tex-green{background:var(--cream)}

/* ---------- HERO: full-screen film (graded warm, grain, vignette so it feels shot, not generated) ---------- */
.hero{position:relative;min-height:88svh;display:flex;align-items:flex-end;overflow:hidden;background:#1F1023;color:#fff;isolation:isolate}
.film{position:absolute;inset:0;z-index:-2;background:url(../img/hero_cinematic.jpg) 66% 50%/cover no-repeat}
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:66% 50%;filter:saturate(.82) contrast(1.06) sepia(.1) brightness(.96)}
.film::before{content:"";position:absolute;inset:-50%;z-index:2;opacity:.16;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.film::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(120% 90% at 70% 40%,rgba(31,16,35,0) 40%,rgba(31,16,35,.55) 100%),linear-gradient(180deg,rgba(31,16,35,.25) 0%,rgba(31,16,35,0) 30%,rgba(31,16,35,.2) 55%,rgba(31,16,35,.85) 100%)}
.hero-copy{position:relative;width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter) 48px;box-sizing:content-box}
.hero .eyebrow{color:#F6D3D6}
.hero h1{color:#fff;margin:0 0 16px;max-width:14ch}
.hero h1 em{color:#F6D3D6}
.hero .sub{font-size:16px;line-height:1.6;color:rgba(255,255,255,.86);margin:0 0 24px;max-width:38ch}
.hero .btn-buy{background:#fff;color:var(--ink)}
.hero .btn-buy:hover{background:var(--tint);box-shadow:none}
.trust{font-size:13px;color:rgba(255,255,255,.75);margin:16px 0 0}
.trust b{color:#fff}

/* ---------- quiz question 1, right after the film ---------- */
.pick{background:var(--tint)}
.pick-head{margin-bottom:32px}
.hq-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hq-tiles button{min-height:64px;padding:16px;border:1.5px solid transparent;border-radius:16px;background:#fff;font:600 16px/1.25 var(--font);color:var(--ink);text-align:left;cursor:pointer;box-shadow:0 8px 24px -16px rgba(31,16,35,.25);transition:border-color .2s,transform .35s var(--ease),box-shadow .35s var(--ease)}
.hq-tiles button:hover{border-color:var(--hot);transform:translateY(-3px);box-shadow:0 16px 32px -16px rgba(31,16,35,.3)}
.hq-tiles button:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.hq-other{margin-top:16px;border:0;background:none;padding:0;font:600 16px/1.3 var(--font);color:var(--hot);cursor:pointer}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}

/* single offer + video add-on switch */
.offer.one{max-width:520px;margin-left:auto;margin-right:auto}
.addon{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:center;margin-top:24px;padding:16px;border-radius:16px;background:var(--tint);cursor:pointer}
.addon input{position:absolute;opacity:0;width:1px;height:1px}
.addon .sw{position:relative;width:48px;height:28px;border-radius:999px;background:var(--line);transition:background .25s}
.addon .sw::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(31,16,35,.25);transition:transform .3s var(--ease)}
.addon input:checked+.sw{background:var(--rose)}
.addon input:checked+.sw::after{transform:translateX(20px)}
.addon input:focus-visible+.sw{outline:3px solid var(--pink);outline-offset:2px}
.addon b{display:block;font:600 16px/1.3 var(--font);color:var(--ink)}
.addon small{display:block;font-size:13px;color:var(--muted);margin-top:4px}
.price.bump{animation:pop .45s var(--ease)}

/* occasions strip (quiet, moving) */
.ticker{overflow:hidden;padding:18px 0;border-bottom:1px solid var(--line);margin-top:0}
.ticker-track{display:flex;gap:32px;width:max-content;white-space:nowrap;font:600 16px/1 var(--font);color:var(--ink-2);animation:tick 40s linear infinite}
.ticker-track i{font-style:normal;color:var(--pink)}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- samples ---------- */
.songs{display:flex;gap:16px;margin:32px calc(var(--gutter) * -1) 0;padding:4px var(--gutter) 12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.songs::-webkit-scrollbar{display:none}
.song{flex:0 0 84%;scroll-snap-align:start;background:var(--tint);border-radius:var(--r);padding:24px 24px 24px;display:flex;flex-direction:column;gap:4px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.song .play{width:60px;height:60px;border-radius:50%;border:0;background:var(--ink);color:#fff;display:grid;place-items:center;cursor:pointer;margin-bottom:18px;transition:transform .35s var(--ease),background .2s}
.song .play:hover{transform:scale(1.07);background:var(--rose)}
.song .play svg{width:24px;height:24px}.song .play .i-play{margin-left:3px}
.song .play .i-pause,.song.is-playing .play .i-play{display:none}
.song.is-playing .play .i-pause{display:block}
.song .tag{font:600 13px/1.3 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--rose)}
.song .title{font:700 20px/1.2 var(--font);letter-spacing:-.015em;color:var(--ink)}
.song .note{font-size:16px;line-height:1.5;color:var(--muted)}
.song .bar{display:none;height:4px;background:rgba(31,16,35,.1);border-radius:4px;overflow:hidden;margin-top:14px}
.song .bar i{display:block;height:100%;width:0;background:var(--rose)}
.song .time{display:none;font-size:13px;color:var(--muted)}
.js .song .bar,.js .song .time{display:block}
.js .song audio{display:none}
.song audio{width:100%;margin-top:10px}
.song .eq{display:none;gap:3px;align-items:flex-end;height:12px;margin-left:8px}
.song .eq i{width:3px;height:4px;background:var(--rose);border-radius:2px;animation:eq .9s ease-in-out infinite}
.song .eq i:nth-child(2){animation-delay:.2s}.song .eq i:nth-child(3){animation-delay:.45s}
.song.is-playing .eq{display:inline-flex}
@keyframes eq{0%,100%{height:4px}50%{height:12px}}
.slide-dots{display:flex;justify-content:center;gap:8px;margin-top:6px}
.slide-dots i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .3s,width .3s var(--ease)}
.slide-dots i.on{background:var(--ink);width:22px;border-radius:8px}

/* ---------- steps ---------- */
.steps{list-style:none;margin:32px 0 32px;padding:0;display:grid;gap:16px;counter-reset:s}
.steps li{background:#fff;border-radius:var(--r);padding:32px 24px;counter-increment:s}
.steps li::before{content:"0" counter(s);display:block;font:700 31px/1 var(--font);letter-spacing:-.03em;color:var(--pink);margin-bottom:18px}
.steps h3{margin-bottom:8px}
.steps p{margin:0;color:var(--muted);font-size:16px}
.how-note{font-size:16px;color:var(--muted);margin:0 0 32px;max-width:62ch}

/* ---------- proof: sliding strip ---------- */
.proof-note{font-size:16px;color:var(--muted);margin:0 0 8px}
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px 24px;margin:24px 0 0}
.quote blockquote{margin:0;font:600 20px/1.5 var(--font);letter-spacing:-.01em;color:var(--ink)}
.quote .orig{font-size:13px;color:var(--muted);margin:12px 0 0;font-style:italic}
.quote figcaption{margin-top:18px;font-size:13px;line-height:1.5;color:var(--muted)}
.quote figcaption b{color:var(--ink);font-weight:600}
.marquee{margin:32px calc(50% - 50vw) 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:24px;width:max-content;animation:tick 55s linear infinite;padding:6px 0}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee .quote{flex:0 0 min(380px,82vw);margin:0;display:flex;flex-direction:column}
.marquee .quote figcaption{margin-top:auto;padding-top:18px}
.marquee .quote .orig{display:none}
.facts{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:12px}
.facts li{position:relative;padding:0 0 0 32px;font-size:16px;color:var(--ink-2)}
.facts li::before{content:"✓";position:absolute;left:0;top:0;color:var(--rose);font-weight:700}
.facts a{color:var(--ink)}

section:has(#h-proof){background:#FFDDE5}
section:has(#h-proof) .kicker{color:var(--rose-dark)}
section:has(#h-proof) .kicker::before{background:#fff}
section:has(#h-proof) .proof-note{color:var(--ink-2)}
section:has(#h-proof) .quote{border:0;box-shadow:0 18px 40px -26px rgba(142,75,77,.45)}
section:has(#h-proof) .facts{display:none}

/* ---------- why ---------- */
.why{text-align:center}
.why h2{max-width:18ch;margin-left:auto;margin-right:auto}
.why .lead{max-width:52ch;margin-left:auto;margin-right:auto}
.contrast{font:700 clamp(20px,4.6vw,31px)/1.3 var(--font);letter-spacing:-.02em;color:var(--ink);margin:32px auto;max-width:24ch}
.contrast em{font-style:normal;color:var(--rose)}

/* ---------- honest ---------- */
.honest .card{background:var(--tint);border-radius:var(--r-lg);padding:32px 24px;margin-top:24px}
.honest .ai{font:600 20px/1.45 var(--font);letter-spacing:-.01em;color:var(--ink);margin:0 0 16px}
.honest .card p{color:var(--ink-2)}
.sig-row{display:flex;align-items:center;gap:14px;margin-top:24px}
.sig-row img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 30%}
.sig{font:700 20px/1 var(--font);color:var(--rose);margin:0}

/* ---------- offer ---------- */
.offer{display:grid;gap:16px;margin:32px 0 24px}
.offer .box{background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:32px 24px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.offer .box:hover{transform:translateY(-4px);box-shadow:0 30px 60px -36px rgba(31,16,35,.4)}
.offer .box.featured{border-color:var(--ink)}
.offer .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.offer .price{font:700 31px/1 var(--font);letter-spacing:-.03em;color:var(--ink)}
.offer ul{list-style:none;margin:18px 0 0;padding:0;color:var(--ink-2);font-size:16px}
.offer li{position:relative;padding-left:24px;margin:8px 0}
.offer li::before{content:"✓";position:absolute;left:0;color:var(--rose);font-weight:700}
/* ---------- promise: big photo + Maggie's words ---------- */
.promise-card{display:grid;gap:24px;margin:64px 0 0;text-align:left}
.promise-card img{width:100%;max-width:416px;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;border-radius:var(--r)}
.promise-card>div{min-width:0}
.promise-card .p-title{font:700 31px/1.15 var(--font);letter-spacing:-.02em;color:var(--ink);margin:0 0 16px}
.promise-card p{font-size:16px;line-height:1.7;color:var(--ink-2);margin:0 0 8px;max-width:46ch}
.promise-card .sig{font:700 20px/1 var(--font);color:var(--rose);margin-top:24px}
.promise-card .sig::before{content:"— "}

/* ---------- christmas: live countdown + how it gets there in time ---------- */
.xmas{background:var(--tint);text-align:center}
.xmas .panel{max-width:1000px;margin:0 auto}
.xmas .panel .lead{max-width:56ch;margin:0 auto 8px}
.countdown{display:inline-flex;align-items:baseline;gap:10px;margin:4px 0 24px;padding:12px 24px;border-radius:999px;background:#fff;font:600 16px/1.2 var(--font);color:var(--ink-2);box-shadow:0 14px 30px -18px rgba(31,16,35,.3)}
.countdown b{font:700 31px/1 var(--font);letter-spacing:-.02em;color:var(--rose)}
.xm-steps{list-style:none;margin:48px 0 48px;padding:0;display:grid;gap:14px;text-align:left;counter-reset:x}
.xm-steps li{position:relative;background:#fff;border-radius:20px;padding:24px 24px 24px 64px;counter-increment:x}
.xm-steps li::before{content:counter(x);position:absolute;left:18px;top:18px;width:32px;height:32px;border-radius:50%;background:var(--pink);color:#fff;font:700 16px/32px var(--font);text-align:center}
.xm-steps b{display:block;font:650 16px/1.3 var(--font);color:var(--ink)}
.xm-steps span{font-size:13px;color:var(--rose);font-weight:600}

/* ---------- faq ---------- */
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line);margin-top:24px}
.faq summary{list-style:none;cursor:pointer;position:relative;padding:24px 48px 24px 0;font:600 20px/1.35 var(--font);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;background:var(--tint);font:400 20px/32px var(--font);text-align:center;color:var(--ink);transition:transform .35s var(--ease),background .2s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg);background:var(--pink-soft)}
.faq details p{margin:0 0 24px;color:var(--muted);max-width:62ch}

/* ---------- final ---------- */
.final{text-align:center;background:var(--tint)}
.final .wrap{display:flex;flex-direction:column;align-items:center}
.final .lead{max-width:46ch}
.final .btn{margin-top:16px;width:100%;max-width:440px}

/* ---------- free card band (dark, stands out) ---------- */
.card-free{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.card-free::before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(238,143,173,.28),rgba(238,143,173,0) 65%);top:-260px;right:-200px;pointer-events:none}
.card-free .wrap{position:relative}
.card-free h2{color:#fff}.card-free h2 em{color:var(--pink)}
.card-free .lead{color:rgba(255,255,255,.75)}
.card-free .kicker{color:var(--pink-soft)}
.card-fan{position:relative;height:230px;margin:12px 0 32px}
.card-fan img{position:absolute;top:10px;left:50%;width:140px;height:175px;object-fit:cover;border-radius:16px;border:5px solid #fff;box-shadow:0 20px 40px rgba(0,0,0,.35);background:#fff}
.card-fan img:nth-child(1){transform:translateX(-120%) rotate(-12deg);animation:floatL 6s ease-in-out infinite}
.card-fan img:nth-child(2){transform:translateX(-50%) translateY(-8px);z-index:2;animation:floatC 6s ease-in-out infinite .6s}
.card-fan img:nth-child(3){transform:translateX(20%) rotate(12deg);animation:floatR 6s ease-in-out infinite 1.2s}
@keyframes floatL{0%,100%{transform:translateX(-120%) rotate(-12deg)}50%{transform:translateX(-122%) translateY(-8px) rotate(-14deg)}}
@keyframes floatC{0%,100%{transform:translateX(-50%) translateY(-8px)}50%{transform:translateX(-50%) translateY(-18px)}}
@keyframes floatR{0%,100%{transform:translateX(20%) rotate(12deg)}50%{transform:translateX(22%) translateY(-8px) rotate(14deg)}}
.card-fan .stamp{position:absolute;z-index:3;right:6%;top:-4px;width:88px;height:88px;border-radius:50%;background:var(--pink);color:var(--ink);display:grid;place-content:center;text-align:center;font:700 13px/1.1 var(--font);letter-spacing:.08em;transform:rotate(12deg)}
.card-fan .stamp b{display:block;font:700 20px/1 var(--font);letter-spacing:-.01em;text-transform:none}
.card-free form{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);padding:24px 24px}
.card-free .field label,.designs-label{color:#fff;font-weight:600;font-size:16px}
.card-free .opt-l,.card-free .consent-line{color:rgba(255,255,255,.65)}
.card-free .consent-line a{color:var(--pink-soft)}
.card-free .field input{background:#fff}
.card-free .seg{flex-wrap:wrap}
.card-free .seg label{flex:1 1 calc(50% - 4px)}
.card-free .seg span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.card-free .seg input:checked+span{background:#fff;color:var(--ink);border-color:#fff}
.designs-label{margin:4px 0 10px}
.designs{display:flex;gap:12px;margin:0 0 18px}
.designs label{position:relative;flex:0 0 120px;cursor:pointer;text-align:center}
.designs input{position:absolute;opacity:0;inset:0;margin:0}
.designs img{width:120px;height:150px;object-fit:cover;border-radius:14px;border:3px solid transparent;background:#fff}
.designs input:checked+img{border-color:var(--pink)}
.designs input:focus-visible+img{outline:3px solid var(--pink);outline-offset:2px}
.designs span{display:block;margin-top:6px;font:600 13px/1.2 var(--font);color:rgba(255,255,255,.75)}
.designs input:checked~span{color:var(--pink)}
.card-preview{margin:6px 0 18px}
.card-preview canvas,.card-done img{display:block;width:100%;max-width:420px;height:auto;margin:0 auto;border-radius:20px;box-shadow:0 30px 60px rgba(0,0,0,.4)}
.card-free .btn-plum{background:var(--pink);color:var(--ink);width:100%}
.card-free .btn-plum:hover{background:#fff}
.card-free .err{color:#FFC2CF}
.card-done{text-align:center}
.card-done .btn{margin-top:12px;width:100%;max-width:420px}
.done-title{font:700 25px/1.2 var(--font);color:#fff;margin:0 0 14px}
.done-next,.save-hint{color:rgba(255,255,255,.7)}
.save-hint{font-size:13px;margin:8px 0 0}
.done-next{margin:24px 0 0}

/* ---------- footer, sticky, nudge, cookies ---------- */
.foot{border-top:1px solid var(--line);padding:48px 0 128px;text-align:center;font-size:13px;color:var(--muted)}
.foot .logo{width:220px;height:auto;margin:0 auto 18px}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-bottom:12px}
.foot a{color:var(--ink)}
.sticky{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:20;display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-radius:999px;box-shadow:0 16px 40px -16px rgba(31,16,35,.35);padding:8px 8px 8px 24px;transition:transform .45s var(--ease)}
.sticky p{margin:0;font-size:13px;line-height:1.3;flex:1}
.sticky p b{font-size:16px}
.sticky .dl{color:var(--rose);font-weight:600}
.sticky .btn{min-height:46px;padding:12px 24px;flex:none}
.sticky.is-hidden{transform:translateY(150%)}
.nudge{position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:19;display:flex;align-items:center;gap:8px;background:var(--ink);color:#fff;border-radius:18px;padding:12px 10px 12px 16px;box-shadow:0 14px 30px -12px rgba(31,16,35,.45);animation:fade .4s var(--ease)}
.nudge a{flex:1;color:#fff;text-decoration:none;font:500 16px/1.3 var(--font)}
.nudge b{color:var(--pink-soft)}
.nudge button{flex:none;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font:400 20px/1 var(--font);cursor:pointer}
.cookie-bar{position:fixed;left:10px;right:10px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:60;display:flex;align-items:center;gap:10px;background:#fff;color:var(--ink);border-radius:20px;box-shadow:0 14px 36px -12px rgba(31,16,35,.3);padding:10px 10px 10px 14px;font-size:13px;line-height:1.35}
.cookie-bar p{margin:0;flex:1}
.cookie-bar a{color:var(--rose)}
.cookie-bar div{display:flex;gap:8px;flex:none}
.cookie-bar button{border:0;border-radius:999px;padding:9px 14px;font:600 13px/1 var(--font);cursor:pointer}
.cookie-bar .ck-yes{background:var(--ink);color:#fff}
.cookie-bar .ck-no{background:var(--tint);color:var(--ink)}

/* ---------- forms (quiz + card) ---------- */
.field{margin:0 0 16px}
.field label{display:block;font-weight:600;font-size:16px;margin-bottom:8px}
.field .opt-l{font-weight:400;color:var(--muted)}
.field input[type=text],.field input[type=tel],.field input[type=email],.field textarea{width:100%;font:400 16px/1.4 var(--font);padding:14px 16px;border:1.5px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .3s}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 5px rgba(238,143,173,.18)}
.check{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start;margin:0 0 14px;font-size:16px;cursor:pointer}
.check input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--rose)}
.err{color:#B4233F;font-size:13px;margin:6px 0 0;font-weight:500}
.err:empty{display:none}
.seg{display:flex;gap:8px;margin:0 0 12px}
.seg label{flex:1;position:relative}
.seg input{position:absolute;opacity:0;inset:0;margin:0}
.seg span{display:block;text-align:center;padding:11px 6px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font:600 13px/1.2 var(--font);cursor:pointer;transition:all .2s}
.seg input:checked+span{border-color:var(--ink);background:var(--ink);color:#fff}
.seg input:focus-visible+span{outline:3px solid var(--pink);outline-offset:2px}
.consent-line{font-size:13px;color:var(--muted);text-align:center;margin:10px 0 0}
.consent-line a{color:var(--rose)}

/* ---------- quiz (full-screen steps) ---------- */
.quiz{background:#fff;padding:64px 0}
.quiz fieldset{border:0;margin:0 0 32px;padding:0;min-width:0}
.quiz legend,.quiz .q-title{font:700 31px/1.12 var(--font);letter-spacing:-.02em;color:var(--ink);margin:0 0 8px;padding:0;outline:none}
.q-hint{color:var(--muted);margin:0 0 24px;font-size:16px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{position:relative;display:flex}
.opt input{position:absolute;opacity:0;inset:0;margin:0}
.opt span{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:68px;padding:14px 16px;border:1.5px solid var(--line);border-radius:18px;background:#fff;font:600 16px/1.25 var(--font);cursor:pointer;transition:border-color .2s,background .2s,transform .3s var(--ease)}
.opt span:hover{border-color:var(--pink);transform:translateY(-2px)}
.opt span small{font-weight:400;color:var(--muted);font-size:13px}
.opt input:checked+span{border-color:var(--ink);background:var(--tint);animation:pop2 .35s var(--ease)}
.opt input:focus-visible+span{outline:3px solid var(--pink);outline-offset:2px}
@keyframes pop2{40%{transform:scale(1.04)}}
.contact-grp{background:var(--tint);border-radius:20px;padding:16px 16px 4px;margin:0 0 16px}
.contact-grp>p{margin:0 0 12px;font-weight:600;font-size:16px}
.contact-grp .via-note{font-size:13px;color:var(--muted);margin:-4px 0 12px;font-weight:400}
.result-card{background:var(--tint);border-radius:var(--r);padding:24px;margin:0 0 18px}
.result-card .q-title em{font-style:normal;color:var(--rose)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.chips li{font-size:13px;font-weight:600;background:#fff;border-radius:999px;padding:6px 12px}
.result-card .song{margin-top:16px;background:#fff;flex:none}
.no-sample{margin:14px 0 0;font-size:16px;color:var(--muted)}
.no-pay{font-size:13px;color:var(--muted);text-align:center;margin:10px 0 0}
.other-field{margin-top:14px}
.other-field .q-next{margin-top:12px}
.q-next{margin-top:18px}
.btn-line.q-next{background:var(--ink);color:#fff;border-color:var(--ink)}
.js .quiz{position:fixed;inset:0;z-index:50;overflow-y:auto;padding:0;display:none;-webkit-overflow-scrolling:touch}
.js .quiz.is-open{display:block}
.js body.quiz-open{overflow:hidden}
.q-head{display:none}
.js .q-head{display:flex;position:sticky;top:0;z-index:2;background:#fff;align-items:center;gap:10px;padding:10px var(--gutter);border-bottom:1px solid var(--line)}
.q-head button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;font:500 20px/1 var(--font);color:var(--ink);cursor:pointer;flex:none}
.progress{flex:1;height:6px;background:var(--line);border-radius:6px;overflow:hidden}
.progress i{display:block;height:100%;width:16%;background:var(--pink);transition:width .5s var(--ease)}
.q-count{font-size:13px;color:var(--muted);min-width:34px;text-align:right}
.js .quiz .wrap{padding-top:32px;padding-bottom:48px;max-width:760px}
.js .q-step{display:none}
.js .q-step.is-active{display:block;animation:slideIn .5s var(--ease)}
.js .quiz-intro{display:none}
@keyframes slideIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.q-live{display:none}
.js .q-live{display:flex;align-items:center;gap:14px;padding:12px var(--gutter);background:var(--ink);color:#fff;position:sticky;top:65px;z-index:1}
.vinyl{flex:none;width:56px;height:56px;border-radius:50%;position:relative;display:grid;place-items:center;background:repeating-radial-gradient(circle at 50% 50%,#1a0e1d 0 2px,#2a1b2e 2px 4px);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.quiz.is-open .vinyl{animation:spin 4.5s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.v-label{width:42%;height:42%;border-radius:50%;background:var(--pink);display:grid;place-items:center;overflow:hidden;transition:background .6s}
.v-name{font:700 9px/1 var(--font);color:var(--ink);max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-live[data-feel="smile"] .v-label{background:#FFD9C2}
.q-live[data-feel="dance"] .v-label{background:#FF8FAE}
.q-live[data-feel="proud"] .v-label{background:#D9CCFF}
.q-live[data-feel="other"] .v-label{background:#CFEBDD}
.live-txt{min-width:0;flex:1}
.live-k{display:none}
.live-title{margin:0;font:700 16px/1.2 var(--font)}
.live-line{margin:2px 0 0;font-size:13px;color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-line:empty{display:none}
.live-list,.live-note{display:none}

/* ---------- legal + thank-you ---------- */
.legal{padding:64px 0 64px}
.legal h1{font-size:clamp(31px,7vw,39px);margin-bottom:12px}
.legal .updated{font-size:13px;color:var(--muted);margin:0 0 24px}
.legal h2{font-size:20px;line-height:1.25;margin:32px 0 10px}
.legal ol,.legal ul{padding-left:24px;margin:0 0 12px}
.legal li{margin-bottom:8px}
.legal .promise{background:var(--tint);border-radius:var(--r);padding:24px 24px;margin:24px 0 4px}
.legal .promise p{margin:0}
.legal a{color:var(--rose)}
.legal + .foot{padding-bottom:48px}

/* ---------- motion: soft reveal (JS adds .rv; .in when on screen) ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.js .hero-copy>*{animation:fade 1s var(--ease) both}
.js .hero-copy>:nth-child(2){animation-delay:.08s}.js .hero-copy>:nth-child(3){animation-delay:.16s}.js .hero-copy>:nth-child(n+4){animation-delay:.24s}

@keyframes stageIn{from{opacity:0;transform:translateY(30px) scale(.98)}to{opacity:1;transform:none}}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* ================= TABLET 760+ ================= */
@media (min-width:760px){
  :root{--gutter:40px}
  .song{flex-basis:46%}
  .card-fan{height:280px}
  .card-fan img{width:170px;height:212px}
  .nudge{left:24px;right:auto;width:380px;bottom:24px}
  .cookie-bar{left:auto;right:20px;bottom:20px;width:400px}
  .sticky{left:50%;right:auto;transform:translateX(-50%);width:min(620px,calc(100% - 20px))}
  .sticky.is-hidden{transform:translate(-50%,150%)}
}

/* ================= DESKTOP 1024+ ================= */
@media (min-width:1024px){
  :root{--gutter:48px}
  body{font-size:20px}
  section{padding:128px 0}
  h3{font-size:25px}
  .lead{font-size:20px}
  .wrap>.kicker,.wrap>h2,.wrap>.lead,.wrap>.proof-note{text-align:center;margin-left:auto;margin-right:auto}
  .wrap>.kicker{display:flex;justify-content:center;width:max-content}
  .wrap>h2{max-width:18ch}
  .wrap>.lead,.wrap>.proof-note{max-width:58ch}
  .wrap>.btn{display:flex;width:max-content;margin:48px auto 0}
  .wrap>.risk{text-align:center}

  .hero{min-height:calc(100vh - 42px);align-items:center}
  .film::after{background:linear-gradient(90deg,rgba(31,16,35,.78) 0%,rgba(31,16,35,.45) 38%,rgba(31,16,35,0) 64%),radial-gradient(120% 90% at 70% 40%,rgba(31,16,35,0) 50%,rgba(31,16,35,.45) 100%)}
  .hero-copy{padding:0 var(--gutter)}
  .hero h1{font-size:61px;max-width:12ch}
  .hero .sub{font-size:20px}
  .pick-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
  .pick-head{grid-column:1/span 4;margin:0}
  .pick-head h2{text-align:left;margin:0}
  .pick-head .kicker{display:flex;justify-content:flex-start}
  .pick-body{grid-column:6/span 7}
  .hq-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ticker{margin-top:0}

  .songs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:64px 0 0;padding:0;overflow:visible}
  .song{padding:32px 32px 32px}
  .song .play{width:72px;height:72px}
  .song .play svg{width:28px;height:28px}
  .song:hover{transform:translateY(-6px);box-shadow:0 30px 60px -34px rgba(31,16,35,.35)}
  .slide-dots{display:none}

  .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:64px 0 32px}
  .steps li{padding:48px 32px}
  .steps li::before{font-size:39px;margin-bottom:24px}
  .how-note{text-align:center;margin:0 auto 0}

  .why{padding:128px 0}
  .why h2{font-size:39px}

  .honest .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:96px;align-items:start}
  .honest .wrap>.kicker{grid-column:1;grid-row:1;margin:0;justify-content:flex-start}
  .honest .wrap>h2{grid-column:1;grid-row:1;margin:48px 0 0;text-align:left;max-width:10ch}
  .honest .card{grid-column:2;grid-row:1;margin:0;padding:48px}
  .honest .ai{font-size:25px}

  /* prices: two equal cards spanning 4 + 4 of 12 columns, centred */
  .offer{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:808px;margin:48px auto 0;align-items:stretch}
  .offer .box{padding:40px}

  .xm-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .xm-steps li{padding:64px 24px 24px}
  .xm-steps li::before{left:22px;top:20px}
  .offer .price{font-size:39px}

  .faq .wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:96px;align-items:start}
  .faq .wrap>.kicker{grid-column:1;grid-row:1;margin:0;justify-content:flex-start}
  .faq .wrap>h2{grid-column:1;grid-row:1/span 3;margin:48px 0 0;text-align:left}
  .faq details{grid-column:2}
  .faq details:first-of-type{margin-top:0}
  .faq summary{font-size:20px;padding:24px 48px 24px 0}

  .final{padding:128px 0}
  .final .btn{width:auto;min-width:440px}

  .card-free{padding:128px 0}
  .card-fan{height:330px;max-width:720px;margin:24px auto 48px}
  .card-fan img{width:210px;height:262px;border-width:7px;border-radius:20px}
  .card-fan .stamp{right:12%;width:112px;height:112px;font-size:13px}
  .card-fan .stamp b{font-size:25px}
  .card-free form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px;align-items:start;padding:48px;max-width:1060px;margin:0 auto}
  .card-free form>*{grid-column:1}
  .card-free form>.card-preview{grid-column:2;grid-row:1/span 12;position:sticky;top:30px;margin:0}
  .card-done{max-width:520px;margin:0 auto}

  .js .quiz.is-open{display:grid;grid-template-columns:minmax(400px,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;align-items:start}
  .js .q-head{grid-column:2;grid-row:1}
  .js .quiz .wrap{grid-column:2;grid-row:2;width:100%;max-width:720px;padding:9vh 64px 96px}
  .js .q-live{grid-column:1;grid-row:1/3;position:sticky;top:0;height:100vh;flex-direction:column;justify-content:center;align-items:flex-start;gap:32px;padding:64px clamp(48px,5vw,96px);background:radial-gradient(120% 90% at 20% 0%,#4A2A50 0%,var(--ink) 60%)}
  .vinyl{width:min(300px,30vh);height:min(300px,30vh)}
  .v-name{font-size:20px}
  .live-k{display:inline-block;margin:0 0 10px;font:600 13px/1.2 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--pink-soft)}
  .live-title{font-size:31px;line-height:1.08;letter-spacing:-.02em}
  .live-line{display:none}
  .live-list{display:grid;list-style:none;margin:24px 0 0;padding:0;max-width:420px}
  .live-list li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:16px}
  .live-list span{color:rgba(255,255,255,.65)}
  .live-list b{font-weight:600;color:rgba(255,255,255,.4);text-align:right}
  .live-list li.set b{color:#fff;animation:fade .5s var(--ease)}
  .live-note{display:block;margin:24px 0 0;color:rgba(255,255,255,.7);font-size:16px}
  .quiz legend,.quiz .q-title{font-size:39px}
  .opt span{min-height:76px;font-size:16px;padding:16px 24px}

  .foot{padding:64px 0 128px}
}

.offer.one{grid-template-columns:1fr!important;max-width:560px}

/* ===== Price + promise: one composed block, two equal cards side by side (Maggie, Nov 1) ===== */
.deal{display:grid;gap:16px;margin:32px auto 0;max-width:1008px}
.deal .offer.one{margin:0;max-width:none}
.deal .box{height:100%;display:flex;flex-direction:column;padding:32px 24px}
.deal .box ul{margin-bottom:0}
.deal .box .btn{width:100%;margin-top:24px}
.deal .box .risk{text-align:center;margin:16px 0 0}
.deal .promise-card{margin:0;display:flex;flex-direction:column;gap:0;background:var(--tint);border-radius:var(--r);overflow:hidden}
.deal .promise-card img{width:100%;max-width:none;aspect-ratio:3/2;object-position:50% 28%;border-radius:0}
.deal .promise-card>div{padding:32px 24px}
.deal .promise-card .p-title{font:700 25px/1.2 var(--font);text-transform:none;letter-spacing:-.01em;margin:0 0 16px}
.deal .promise-card p{font-size:16px;line-height:1.7;max-width:none}
.deal .promise-card .sig{font:italic 400 25px/1 var(--serif);color:var(--hot);margin-top:24px}
.deal+.risk.deadline{text-align:center;margin-top:32px}

/* ===== Christmas: full-width Christmas scene behind the text ===== */
.xmas{position:relative;overflow:hidden;background:#1F1023;color:#fff;text-align:left;padding:96px 0;min-height:72svh;display:flex;align-items:flex-end;isolation:isolate}
.xm-bg{position:absolute;inset:0;z-index:-1;background:url(../img/christmas_cinematic.jpg) 70% 50%/cover no-repeat;filter:saturate(.9) sepia(.06)}
.xm-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,16,35,.15) 0%,rgba(31,16,35,.35) 45%,rgba(31,16,35,.9) 100%)}
.xmas .wrap{width:100%}
.xmas .panel{max-width:560px;margin:0;text-align:left;background:transparent!important;padding:0}
.xmas .panel h2{color:#fff;text-align:left}
.xmas .panel h2 em{color:#F6D3D6}
.xmas .panel .kicker{color:#F6D3D6}
.xmas .panel .lead{color:rgba(255,255,255,.86);margin:0 0 32px;max-width:46ch}
.xmas .panel .btn-buy{background:#fff;color:var(--ink)}
.countdown{background:rgba(255,255,255,.14);color:#fff;box-shadow:none;backdrop-filter:blur(8px)}
.countdown b{color:#fff}

@media (min-width:1024px){
  .deal{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:48px;align-items:stretch}
  .deal .box{padding:48px 40px}
  .deal .promise-card>div{padding:40px}
  .xmas{min-height:80vh;align-items:center;padding:128px 0}
  .xm-bg::after{background:linear-gradient(90deg,rgba(31,16,35,.85) 0%,rgba(31,16,35,.55) 40%,rgba(31,16,35,0) 72%)}
  .xmas .panel h2{font-size:49px}
}

/* testimonials: no pink band (Maggie, Nov 1) */
section:has(#h-proof){background:var(--bg)}
section:has(#h-proof) .quote{border:1px solid var(--line);box-shadow:none}

/* price on one half of the page, Maggie's photo + promise on the other half (edge to edge) */
.deal .promise-card{position:relative;background:none;border-radius:var(--r);overflow:hidden}
.deal .promise-card img{aspect-ratio:4/5;object-position:50% 25%}
.deal .promise-card>div{position:relative;margin:-64px 16px 0;background:#fff;border-radius:var(--r);padding:24px;box-shadow:0 24px 48px -24px rgba(31,16,35,.3)}
@media (min-width:1024px){
  .deal{grid-template-columns:1fr 1fr;gap:0;max-width:none;margin:64px calc(50% - 50vw) 0;align-items:stretch}
  .deal .offer.one{display:flex;align-items:center;justify-content:flex-end;padding:64px 64px 64px var(--gutter)}
  .deal .offer.one .box{max-width:520px;width:100%;height:auto}
  .deal .promise-card{border-radius:0;min-height:680px}
  .deal .promise-card img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-position:50% 30%}
  .deal .promise-card>div{position:absolute;left:48px;bottom:48px;margin:0;max-width:440px;padding:40px}
}

/* price + promise side by side from tablet width up (Maggie saw them stacked on her screen) */
@media (min-width:760px){
  .deal{grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
  .deal .offer.one,.deal .offer.one .box{height:100%}
  .deal .promise-card{min-height:560px}
  .deal .promise-card img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-position:50% 30%}
  .deal .promise-card>div{position:absolute;left:16px;right:16px;bottom:16px;margin:0;padding:24px}
}
@media (min-width:1024px){
  .deal{gap:0}
  .deal .promise-card>div{left:48px;right:auto;bottom:48px;padding:40px}
}
/* Christmas: darker veil behind the text so every word reads */
.xm-bg::after{background:linear-gradient(180deg,rgba(31,16,35,.35) 0%,rgba(31,16,35,.7) 45%,rgba(31,16,35,.92) 100%)}
.xmas .panel h2,.xmas .panel .lead,.xmas .panel .kicker{text-shadow:0 2px 16px rgba(20,10,16,.6)}
.xmas .panel .lead{color:#fff}
@media (min-width:1024px){.xm-bg::after{background:linear-gradient(90deg,rgba(31,16,35,.92) 0%,rgba(31,16,35,.8) 35%,rgba(31,16,35,.35) 60%,rgba(31,16,35,.1) 80%)}}

/* ---------- SANTA (Nov 2 2026, seasonal): one pastel tile, photo player, 3 steps, one DM button ---------- */
.santa{background:var(--bg);padding-top:16px}
.santa-tile{background:var(--tint-2);border-radius:var(--r-lg);padding:40px 20px 32px;display:grid;grid-template-columns:minmax(0,1fr);gap:28px;position:relative;overflow:hidden}
.santa-copy h2{max-width:16ch}
.santa-copy .lead{font-size:18px;margin:0}
.santa-player{position:relative;padding:0;gap:0;background:var(--ink);border-radius:var(--r);overflow:hidden;box-shadow:0 26px 50px -28px rgba(31,16,35,.55)}
.santa-player img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%}
.santa-bar{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:14px;padding:14px;border-radius:20px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.santa-player .play{flex:0 0 auto;margin:0;background:var(--rose);box-shadow:0 0 0 0 rgba(166,95,96,.5);animation:santaPulse 2.2s ease-out infinite}
.santa-player .play:hover{background:var(--rose-dark)}
.santa-player.is-playing .play{animation:none}
@keyframes santaPulse{0%{box-shadow:0 0 0 0 rgba(166,95,96,.45)}70%{box-shadow:0 0 0 14px rgba(166,95,96,0)}100%{box-shadow:0 0 0 0 rgba(166,95,96,0)}}
.santa-meta{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.santa-player .tag{font-size:11px}
.santa-player .title{font-size:16px;line-height:1.25}
.santa-player .bar{margin-top:8px}
.santa-player .time{font-size:12px;margin-top:2px}
.santa-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:sx}
.santa-steps li{position:relative;background:#fff;border-radius:18px;padding:16px 18px 16px 60px;font-size:16px;line-height:1.45;color:var(--ink-2);counter-increment:sx}
.santa-steps li::before{content:counter(sx);position:absolute;left:16px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:var(--pink);color:#fff;font:700 15px/30px var(--font);text-align:center}
.santa-steps b{color:var(--ink);font-weight:650}
.santa-cta .btn{width:100%;padding:16px 22px;letter-spacing:.08em;white-space:normal;text-align:center}
.santa-offer{margin:14px 0 0;font:600 14px/1.45 var(--font);color:var(--rose-dark);text-align:center}
.santa-offer b{font-size:17px;color:var(--ink)}
.santa-cta .risk{text-align:center;margin-top:8px}
@media (prefers-reduced-motion:reduce){.santa-player .play{animation:none}}
@media (min-width:760px){.santa-tile{padding:56px 48px 48px}.santa-cta .btn{width:auto}.santa-offer,.santa-cta .risk{text-align:left}}
@media (min-width:1024px){
  .santa-tile{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"copy player" "steps player" "cta player";column-gap:64px;row-gap:28px;padding:64px}
  .santa-copy{grid-area:copy}.santa-steps{grid-area:steps}.santa-cta{grid-area:cta}
  .santa-player{grid-area:player;align-self:center}
}