/* Lovefest shared styles. First part = the approved mockup's styles (2026-11-14), second part = real-page layout + checkout. */
:root{
  color-scheme: light;
  --stage:#1a0a11; --stage-2:#27101a; --stage-line:#4a2533; --stage-fg:#f3e3e6; --stage-dim:#b9959f;
  --paper:#fff7f6; --paper-2:#fbe9e8; --ink:#3a0f1f; --ink-dim:#7c5560; --line:#efd3d3;
  --rose:#d2204f; --rose-deep:#a3123a; --wine:#5a0f28; --foil:#b98a3e; --foil-lt:#e6c98a;
  --display:"Bodoni Moda","Didot","Bodoni MT",Georgia,serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--foil-lt);outline-offset:2px}
.screen{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;padding:22px 22px 20px;gap:16px}
.screen.center{justify-content:center;text-align:center}
.screen>*{flex-shrink:0}
.screen .cta.stick{position:sticky;bottom:0;z-index:3}
.bar{display:flex;align-items:center;gap:10px;padding:16px 22px 0}
.bar button{background:none;border:0;font-size:20px;line-height:1;color:var(--ink-dim);padding:4px}
.prog{flex:1;height:5px;border-radius:9px;background:var(--paper-2);overflow:hidden}
.prog i{display:block;height:100%;background:var(--rose);border-radius:9px;transition:width .3s}
.brand{font:700 15px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--wine)}
h1{font:700 29px/1.12 var(--display);margin:0;text-wrap:balance;color:var(--wine)}
h2{font:700 22px/1.18 var(--display);margin:0;text-wrap:balance;color:var(--wine)}
p{margin:0}
.sub{color:var(--ink-dim);font-size:15px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rose)}
.grow{flex:1}
.cta{display:block;width:100%;border:0;border-radius:16px;background:var(--rose);color:#fff;font-weight:700;font-size:17px;padding:16px 18px;box-shadow:0 8px 18px -8px var(--rose-deep)}
.cta:active{transform:translateY(1px)}
.cta[disabled]{opacity:.4;cursor:default}
.ghost{background:none;border:0;color:var(--ink-dim);font-size:14px;text-decoration:underline;padding:8px;align-self:center}
.opts{display:flex;flex-direction:column;gap:10px}
.opts.grid2{display:grid;grid-template-columns:1fr 1fr}
.opts.grid2 .opt{justify-content:center;text-align:center;padding:14px 8px;font-size:15px}
.opts.grid2 .opt.wide{grid-column:1/-1}
.opt{display:flex;align-items:center;gap:12px;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:13px 16px;font-size:16px;font-weight:600;color:var(--ink)}
.opt .em{font-size:20px;width:26px;text-align:center}
.opt.sel{border-color:var(--rose);background:var(--paper-2)}
.fine{font-size:11.5px;color:var(--ink-dim);text-align:center;line-height:1.4}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chip{border:1px solid var(--foil);color:var(--wine);border-radius:99px;padding:5px 12px;font-size:13px;font-weight:600;background:#fff}

/* quiz pictures */
.qimg{aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:var(--paper-2);box-shadow:0 10px 22px -16px var(--wine)}
.qimg img,.pt img{width:100%;height:100%;object-fit:cover;display:block}
.pts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pt{all:unset;cursor:pointer;box-sizing:border-box;position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden;background:var(--paper-2);box-shadow:inset 0 0 0 1.5px var(--line)}
.pt span{position:absolute;inset:auto 0 0 0;padding:26px 10px 9px;background:linear-gradient(transparent,#2a0612d9);color:#fff;font-weight:700;font-size:15px;text-align:center}
.pt.sel{box-shadow:0 0 0 3px var(--rose)}
.pt:focus-visible{outline:3px solid var(--rose);outline-offset:2px}
.pt .tarot{height:100%;width:100%;aspect-ratio:auto;border-radius:0;font-size:22px}
.faces{display:flex;justify-content:center;gap:14px}
.faces figure{margin:0;width:88px;text-align:center;font-size:12.5px;color:var(--ink-dim);font-weight:600}
.faces div{width:88px;height:88px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px var(--foil);margin-bottom:6px}
.faces img{width:100%;height:100%;object-fit:cover;filter:blur(7px) saturate(.8);transform:scale(1.3)}

/* tarot card */
.tarot{aspect-ratio:5/8;border-radius:12px;background:
  radial-gradient(circle at 50% 50%,transparent 0 21%,var(--foil) 21.5% 22.5%,transparent 23%),
  repeating-linear-gradient(45deg,transparent 0 9px,#ffffff12 9px 10px),repeating-linear-gradient(-45deg,transparent 0 9px,#ffffff12 9px 10px),
  linear-gradient(160deg,#6d1431,#3c0a1c);
  box-shadow:inset 0 0 0 2px var(--foil),inset 0 0 0 6px #3c0a1c,inset 0 0 0 7px var(--foil-lt);position:relative;display:grid;place-items:center}
.tarot::after{content:"♥";color:var(--foil-lt);font-size:1.5em;line-height:1}
.fan{display:flex;justify-content:center;align-items:flex-end;height:210px;padding-top:26px}
.fan button{all:unset;cursor:pointer;width:84px;margin:0 -15px;transform-origin:50% 120%;transition:transform .35s,opacity .35s;font-size:15px}
.fan button:nth-child(1){transform:rotate(-20deg)}.fan button:nth-child(2){transform:rotate(-10deg)}
.fan button:nth-child(4){transform:rotate(10deg)}.fan button:nth-child(5){transform:rotate(20deg)}
.fan.picked button{opacity:.28}
.fan.picked button.sel{opacity:1;transform:translateY(-26px) scale(1.12);z-index:2}
.fan button:focus-visible .tarot{outline:2px solid var(--rose);outline-offset:3px}
.face{aspect-ratio:5/8;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 2px var(--foil),inset 0 0 0 6px #fff,inset 0 0 0 7px var(--foil-lt);display:grid;place-items:center;text-align:center;font:700 17px/1.15 var(--display);color:var(--wine);padding:12px}
.face span{font-size:44px;display:block;margin-bottom:6px}

/* photo + blur + flip */
.photo{aspect-ratio:3/4;border-radius:18px;overflow:hidden;position:relative;background:var(--paper-2);box-shadow:0 0 0 2px var(--foil),0 16px 30px -18px var(--wine)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo.blur img{filter:blur(17px) saturate(1.1);transform:scale(1.18)}
.lockchip{position:absolute;inset:auto 0 16px 0;margin:auto;width:max-content;background:#fff;color:var(--wine);font-weight:700;font-size:13px;border-radius:99px;padding:7px 14px;box-shadow:0 6px 16px -6px #000}
.flip{perspective:1100px;width:74%;margin:0 auto}
.flip .in{position:relative;aspect-ratio:3/4;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.flip.on .in{transform:rotateY(180deg)}
.flip .f{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip .f.back{transform:rotateY(180deg)}
.flip .tarot{aspect-ratio:auto;height:100%;font-size:26px;border-radius:18px}
.flip .photo{height:100%;aspect-ratio:auto}

.panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:10px;text-align:left}
.panel.wine{background:var(--wine);border-color:var(--wine);color:#fde9ec}
.panel.wine .eyebrow{color:var(--foil-lt)}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vs div{border-radius:14px;padding:12px;font-size:13.5px;line-height:1.4}
.vs .old{background:var(--paper-2);color:var(--ink-dim)}
.vs .new{background:var(--wine);color:#fde9ec}
.vs b{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
.vs .new b{color:var(--foil-lt)}

/* loader */
.ring{width:150px;height:150px;border-radius:50%;margin:0 auto;display:grid;place-items:center;background:conic-gradient(var(--rose) var(--p,0%),var(--paper-2) 0)}
.ring span{width:132px;height:132px;border-radius:50%;overflow:hidden;background:var(--paper);display:block}
.ring img{width:100%;height:100%;object-fit:cover;filter:blur(var(--b,30px));transform:scale(1.3)}
.pct{font:700 24px var(--display);color:var(--wine)}
.tasks{display:flex;flex-direction:column;gap:8px;text-align:left;width:max-content;margin:0 auto}
.tasks div{color:var(--ink-dim);opacity:.45;transition:opacity .3s}
.tasks div.on{opacity:1;color:var(--ink);font-weight:600}
.tasks div.on::before{content:"✓ ";color:var(--rose)}

/* plans */
.plan{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:13px 14px;text-align:left;width:100%}
.plan.sel{border-color:var(--rose);box-shadow:0 0 0 2px #d2204f26}
.plan .dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:none}
.plan.sel .dot{border-color:var(--rose);background:radial-gradient(var(--rose) 0 45%,#fff 50%)}
.plan b{display:block;font-size:15.5px}.plan small{color:var(--ink-dim);font-size:12.5px}
.plan .pr{margin-left:auto;font-weight:700;white-space:nowrap}
.gets{display:flex;flex-direction:column;gap:7px;font-size:14.5px;text-align:left}
.gets div::before{content:"♥";color:var(--rose);margin-right:9px}


/* app */
.apphead{display:flex;align-items:center;justify-content:space-between;padding:16px 22px 0}
.streak{font-size:13px;font-weight:700;color:var(--wine);background:var(--paper-2);border-radius:99px;padding:5px 11px}
.days{display:flex;gap:6px}
.days i{flex:1;height:30px;border-radius:9px;background:#ffffff1f;display:grid;place-items:center;font:normal 700 11px var(--body);color:#fde9ec}
.days i.done{background:var(--foil-lt);color:var(--wine)}
.days i.now{box-shadow:inset 0 0 0 2px var(--foil-lt)}
.steps{display:flex;flex-direction:column;gap:8px}
.steps div{display:flex;gap:10px;align-items:center;font-size:14.5px}
.steps div::before{content:"";width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;place-items:center;font-size:12px;color:#fff}
.steps div.ok::before{content:"✓";background:var(--rose);border-color:var(--rose)}
.rhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.rhead small{color:var(--ink-dim);font-size:12.5px;white-space:nowrap}
.tl{display:flex;flex-direction:column;gap:10px}
.tl div{display:grid;grid-template-columns:62px 1fr;gap:10px;font-size:14.5px;align-items:start}
.tl time{font-size:12.5px;font-weight:700;color:var(--wine);padding-top:2px}
.tl .wait{color:var(--ink-dim)}
.msg{display:flex;gap:11px;align-items:flex-start}
.msg img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px var(--foil)}
.msg .b{background:#fff;border:1px solid var(--line);border-radius:4px 16px 16px 16px;padding:10px 13px;font-size:15px;text-align:left}
.msg small{display:block;color:var(--ink-dim);font-size:11.5px;margin-top:3px;text-align:left}
.msg.me{flex-direction:row-reverse}
.msg.me .b{background:var(--wine);color:#fde9ec;border-color:var(--wine);border-radius:16px 4px 16px 16px}
.msg.me small{text-align:right}
.daysep{align-self:center;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);background:var(--paper-2);border-radius:99px;padding:3px 12px}
.sbtn{border:0;border-radius:12px;background:var(--rose);color:#fff;font-weight:700;padding:10px 16px;font-size:14.5px;align-self:flex-start}
.sbtn.alt{background:var(--paper-2);color:var(--wine)}
.belief{background:var(--paper-2);border:1px dashed var(--foil);border-radius:12px;padding:12px 14px;text-align:left;font-size:15px;color:var(--ink);width:100%}
.burning{animation:burn 1.5s forwards}
@keyframes burn{35%{color:#e8590c;background:#ffe2c2;text-shadow:0 -4px 14px #ff7a1f,0 0 6px #ffb347;border-color:#ff7a1f}100%{opacity:0;transform:translateY(-16px) scale(.96);filter:blur(4px);color:#222}}
textarea{width:100%;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;font:16px/1.4 var(--body);color:var(--ink);background:#fff;resize:none}
input[type=text]{width:100%;border:1.5px solid var(--line);border-radius:16px;padding:15px 16px;font:600 17px var(--body);color:var(--ink);background:#fff}
.tabs{display:flex;border-top:1px solid var(--line);background:#fff}
.tabs button{flex:1;background:none;border:0;padding:9px 2px 11px;font-size:11.5px;font-weight:600;color:var(--ink-dim)}
.tabs button span{display:block;font-size:19px}
.tabs button.on{color:var(--rose)}
.row{display:flex;align-items:center;gap:12px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:11px 14px;font-size:14.5px}
.row .pr{margin-left:auto;font-weight:700;color:var(--rose);white-space:nowrap}
.row .pr.k{color:var(--ink)}
.seg{display:flex;gap:6px;margin-left:auto}
.seg button{border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:3px 11px;font-weight:700;font-size:13.5px;color:var(--ink-dim)}
.seg button.on{border-color:var(--rose);background:var(--rose);color:#fff}
.caption{font-size:13px;color:var(--ink-dim);text-align:center}
.name{font:italic 500 34px/1 var(--display);color:var(--wine)}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gal figure{margin:0;font-size:11.5px;text-align:center;color:var(--ink-dim);font-weight:600}
.gal .photo{border-radius:12px;margin-bottom:4px;box-shadow:0 0 0 1.5px var(--foil)}
.gal .lk{position:absolute;inset:0;display:grid;place-items:center;font-size:20px}
.mile{display:flex;flex-direction:column;gap:9px}
.mile div{display:grid;grid-template-columns:54px 1fr auto;gap:8px;font-size:14.5px;align-items:center}
.mile b{font-size:12.5px;color:var(--wine)}
.mile .ok{color:var(--rose);font-weight:700}.mile .no{color:var(--ink-dim)}
.jar{display:flex;gap:5px;flex-wrap:wrap;font-size:20px;color:var(--rose)}
.jar i{font-style:normal;opacity:.18}
.fdots{display:flex;gap:6px;justify-content:center;padding:16px 22px 0;align-items:center}
.fdots i{width:26px;height:5px;border-radius:9px;background:var(--paper-2)}
.fdots i.on{background:var(--rose)}
.fdots button{background:none;border:0;color:var(--ink-dim);font-size:18px;position:absolute;right:16px;top:8px;padding:6px}
.big{font:500 23px/1.3 var(--display);color:var(--wine);text-wrap:balance}
.pop{font-size:54px;animation:pop .7s both}
@keyframes pop{from{transform:scale(.3);opacity:0}60%{transform:scale(1.15)}to{transform:none;opacity:1}}

/* ---------- real pages ---------- */
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip;touch-action:manipulation}
#app{max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--paper);position:relative}
@media(min-width:520px){body{background:var(--stage)}#app{box-shadow:0 0 0 1px var(--stage-line)}}
.screen{overflow:visible}
.screen .cta.stick{bottom:14px}
.tabs{position:sticky;bottom:0;z-index:5;padding-bottom:env(safe-area-inset-bottom,0px)}
a{color:var(--rose-deep)}
img{max-width:100%}
input[type=email],input[type=number],select{width:100%;border:1.5px solid var(--line);border-radius:16px;padding:15px 16px;font:600 17px var(--body);color:var(--ink);background:#fff}
.err{color:#b3261e;font-size:14px;min-height:20px;text-align:center}
.spinner{display:inline-block;width:20px;height:20px;border-radius:50%;border:3px solid #ffffff66;border-top-color:#fff;animation:spin .8s linear infinite;vertical-align:middle}
.spinner.dk{border-color:var(--line);border-top-color:var(--rose);width:34px;height:34px}
@keyframes spin{to{transform:rotate(360deg)}}
.muted{color:var(--ink-dim)}.small{font-size:13px}
.toast{position:fixed;left:50%;bottom:86px;transform:translateX(-50%);background:var(--wine);color:#fff;border-radius:99px;padding:9px 18px;font-size:14px;font-weight:600;z-index:20;box-shadow:0 10px 24px -10px #000}
.read h3{font:700 19px/1.2 var(--display);color:var(--wine);margin:6px 0 0}
.read ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.sheet{position:fixed;inset:0;background:#2a0612b3;z-index:30;display:flex;align-items:flex-end;justify-content:center}
.sheet>div{background:var(--paper);border-radius:22px 22px 0 0;padding:22px;width:100%;max-width:480px;display:flex;flex-direction:column;gap:14px;max-height:92vh;overflow-y:auto}

/* ---------- checkout (structure and ids from the Richfest / Fightfest checkout) ---------- */
.pcs{display:flex;flex-direction:column;gap:10px}
.pc{all:unset;cursor:pointer;box-sizing:border-box;display:block;width:100%;background:#fff;border:1.5px solid var(--line);border-radius:16px;overflow:hidden}
.pc.sel{border-color:var(--rose);box-shadow:0 0 0 2px #d2204f26}
.pc .mp{background:var(--rose);color:#fff;font-size:11px;font-weight:700;letter-spacing:.12em;text-align:center;padding:4px}
.pcb{display:flex;align-items:center;gap:12px;padding:13px 14px}
.rd{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:none}
.sel>.pcb .rd,.pm.sel .rd{border-color:var(--rose);background:radial-gradient(var(--rose) 0 45%,#fff 50%)}
.pl{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.pl b{font-size:16px}
.save{align-self:flex-start;background:var(--paper-2);color:var(--rose-deep);font-size:11px;font-weight:700;border-radius:99px;padding:2px 9px;letter-spacing:.04em}
.tot{font-size:13px;color:var(--ink-dim)}.tot s,.pdy s{opacity:.7}
.pdy{display:flex;align-items:flex-start;gap:2px;color:var(--wine);white-space:nowrap}
.pdy s{font-size:12px;color:var(--ink-dim);margin-right:6px;align-self:center}
.pdy .cu{font-weight:700;font-size:14px;margin-top:4px}.pdy .z{font:700 34px/1 var(--display)}
.pdy .ct{display:flex;flex-direction:column;margin-top:3px}.pdy .ct b{font-size:15px;line-height:1}.pdy .ct small{font-size:9px;font-weight:700;letter-spacing:.06em;color:var(--ink-dim)}
.pmt{font:700 20px/1.2 var(--display);color:var(--wine);margin:0;text-align:center}
#pms{display:flex;flex-direction:column;gap:10px}
.pm{background:#fff;border:1.5px solid var(--line);border-radius:16px;overflow:hidden}
.pm.sel{border-color:var(--rose)}
.pmh{all:unset;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;padding:14px}
.pmh .nm{font-weight:700;flex:1}.lg{display:flex;gap:5px;align-items:center}
.bdg{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:23px;padding:0 6px;border:1px solid #d9d9de;border-radius:5px;background:#fff;color:#111;font:700 11px system-ui,sans-serif;white-space:nowrap}
.pmb{display:none;padding:0 14px 14px;flex-direction:column;gap:10px}
.pm.sel .pmb{display:flex}
.chk{list-style:none;margin:0;padding:0;font-size:14px;color:var(--ink-dim);display:flex;flex-direction:column;gap:4px}
.chk li::before{content:"✓ ";color:var(--rose);font-weight:700}
.cf label{font-size:12.5px;font-weight:700;color:var(--ink-dim);margin-bottom:-6px}
.cdh{font-weight:700}
.sf{border:1.5px solid var(--line);border-radius:12px;padding:13px 12px;background:#fff;min-height:48px}
input.sf{font:500 16px var(--body);color:var(--ink);width:100%}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.row2>div{display:flex;flex-direction:column;gap:10px}
.btn{display:block;width:100%;border:0;border-radius:14px;background:var(--rose);color:#fff;font-weight:700;font-size:17px;padding:15px 18px;text-align:center}
.btn[disabled]{opacity:.6}
.ssl{font-size:11.5px;color:var(--ink-dim);text-align:center}
.skl{height:54px;border-radius:16px;background:linear-gradient(90deg,var(--paper-2),#fff,var(--paper-2));background-size:200% 100%;animation:skl 1.2s linear infinite}
@keyframes skl{to{background-position:-200% 0}}
.pfail{background:#fff1f0;border:1.5px solid #f0b4ae;border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:6px;font-size:14.5px}
.pfail[hidden]{display:none}
.alts{display:flex;flex-direction:column;gap:8px}
.alts button{all:unset;cursor:pointer;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;width:100%;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:11px 12px;font-weight:700}
.fine2{font-size:12px;color:var(--ink-dim);line-height:1.45;text-align:center}
.guar{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px}
.guar span{font-size:28px}.guar h3{margin:0;font-size:16px}.guar p{font-size:13.5px;color:var(--ink-dim)}
.logos{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.pwr{text-align:center;font-size:12.5px;color:var(--ink-dim)}
details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px}
summary{font-weight:700;cursor:pointer}details p{margin-top:8px;font-size:14.5px;color:var(--ink-dim)}

.gets div{position:relative;padding-left:26px}.gets div::before{position:absolute;left:0;margin:0}

/* the Lovefest mark (gold heart, picked by Rocco 2026-11-15) in front of every brand line */
.brand{display:inline-flex;align-items:center;gap:8px}
.brand::before{content:"";width:24px;height:24px;border-radius:7px;background:url(/assets/icon-192.png?v=2) center/cover;flex:none}
.brand.plain::before{display:none}
.screen.center>.brand{align-self:center}