/* ==========================================================================
   Last Day — premium dark theme
   One visual language: true black, antique gold, ember red. Serif display,
   quiet sans body, slow cinematic motion.
   ========================================================================== */
:root{
  --bg:#060709; --panel:#101318;
  --card:rgba(255,255,255,.032); --card2:rgba(255,255,255,.055);
  --line:rgba(255,255,255,.085); --line2:rgba(255,255,255,.15);
  --text:#f3eee5; --dim:#aab0bc; --mute:#6c7381;
  --gold:#c9a55c; --gold2:#e9cf91; --gold3:#fff1cf; --gold-ink:#16110a; --gold-soft:rgba(201,165,92,.11);
  --red:#cc3f35; --red2:#ff6255; --red-soft:rgba(204,63,53,.13);
  --blue:#93a9c8;
  --r:18px;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --col:480px;
  --ease:cubic-bezier(.22,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{
  font-family:var(--sans);font-size:16px;line-height:1.55;color:var(--text);
  background:radial-gradient(110% 60% at 50% -8%,rgba(201,165,92,.09),transparent 62%),var(--bg);
  min-height:100vh;min-height:100dvh;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-variant-numeric:lining-nums;
}
body::after{ /* film grain */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:40;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::before{ /* vignette */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:39;
  background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.55) 100%);
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
img,video{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--gold2);outline-offset:3px;border-radius:8px}
::selection{background:rgba(201,165,92,.35)}

/* ambient particles */
#amb{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:30;mix-blend-mode:screen}

/* ---------- shell ---------- */
#app{max-width:var(--col);margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;position:relative;z-index:2}
.top{position:sticky;top:0;z-index:20;height:58px;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;padding:0 10px;
  background:linear-gradient(180deg,rgba(6,7,9,.94),rgba(6,7,9,.78));backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2)}
.top.clear{background:linear-gradient(180deg,rgba(6,7,9,.7),rgba(6,7,9,0));backdrop-filter:none;-webkit-backdrop-filter:none;position:absolute;left:0;right:0}
.iconbtn{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;color:var(--dim);transition:color .25s,background .25s,transform .15s}
@media (hover:hover){.iconbtn:hover{color:var(--text);background:var(--card)}}
.iconbtn:active{transform:scale(.92)}
.iconbtn svg{width:22px;height:22px}
.iconbtn[hidden]{visibility:hidden;display:grid}
.brand{justify-self:center;display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:600;font-size:16px;letter-spacing:.38em;text-transform:uppercase;color:var(--text);padding-left:.38em}
.brand svg{width:15px;height:15px;color:var(--gold);animation:flipglass 6s var(--ease) infinite}
@keyframes flipglass{0%,82%{transform:rotate(0)}92%,100%{transform:rotate(180deg)}}
.progress{height:2px;background:rgba(255,255,255,.05);position:sticky;top:58px;z-index:19}
.progress i{position:relative;display:block;height:100%;width:0;background:linear-gradient(90deg,rgba(201,165,92,.4),var(--gold2));transition:width .7s var(--ease-out)}
.progress i::after{content:"";position:absolute;right:-2px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--gold3);box-shadow:0 0 12px 3px rgba(233,207,145,.75)}
.progress[hidden]{display:none}

.screen{flex:1;display:flex;flex-direction:column;padding:26px 22px 28px;position:relative}
.screen.flush{padding:0 0 28px}
.screen.out{animation:out .24s ease forwards}
.screen.out-back{animation:outb .24s ease forwards}
@keyframes out{to{opacity:0;transform:translateY(-10px);filter:blur(3px)}}
@keyframes outb{to{opacity:0;transform:translateY(10px);filter:blur(3px)}}
.pad{padding:0 22px;position:relative;z-index:2}
.spacer{flex:1;min-height:20px}

/* staggered reveal */
.rv{animation:rise .8s var(--ease-out) both!important;animation-delay:var(--d,0ms)!important}
.rv-wait{opacity:0}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.split .w > span{display:inline-block;transform:translateY(105%);animation:wordup .9s var(--ease-out) forwards;animation-delay:var(--d,0ms)}
@keyframes wordup{to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- type ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.eyebrow::before{content:"";width:18px;height:1px;background:currentColor;opacity:.7}
.center .eyebrow::after{content:"";width:18px;height:1px;background:currentColor;opacity:.7}
.eyebrow.red{color:var(--red2)} .eyebrow.blue{color:var(--blue)}
h1,.h1{font-family:var(--serif);font-weight:600;font-size:41px;line-height:1.05;letter-spacing:-.012em}
h2,.h2{font-family:var(--serif);font-weight:600;font-size:32px;line-height:1.1;letter-spacing:-.006em}
h3{font-family:var(--serif);font-weight:600;font-size:22px;line-height:1.2}
.lead{color:var(--dim);font-size:16.5px;line-height:1.62;margin-top:14px}
.small{font-size:13px;color:var(--mute);line-height:1.5}
.gold{color:var(--gold2)} .red{color:var(--red2)}
.hl{color:var(--gold2)} .hr{color:var(--red2)}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}.mt24{margin-top:24px}.mt32{margin-top:32px}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;width:100%;height:58px;border-radius:15px;font-weight:600;font-size:16.5px;letter-spacing:.01em;display:flex;align-items:center;justify-content:center;gap:10px;
  transition:transform .15s var(--ease),opacity .25s,box-shadow .3s,background .3s}
.btn:active{transform:scale(.982)}
.btn-gold{color:var(--gold-ink);background:linear-gradient(135deg,#f0d9a0 0%,#d1ae66 45%,#b28a3e 100%);
  box-shadow:0 14px 36px -12px rgba(201,165,92,.6),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.18)}
.btn-gold::after{content:"";position:absolute;top:0;bottom:0;width:60%;left:-80%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:shine 4.8s var(--ease) infinite 1.2s}
@keyframes shine{0%{left:-80%}28%,100%{left:130%}}
@media (hover:hover){.btn-gold:hover{box-shadow:0 18px 44px -12px rgba(201,165,92,.75),inset 0 1px 0 rgba(255,255,255,.45)}}
.btn-line{border:1px solid var(--line2);color:var(--text);background:rgba(255,255,255,.03)}
@media (hover:hover){.btn-line:hover{border-color:rgba(201,165,92,.5);background:rgba(201,165,92,.06)}}
.btn-red{color:#fff;background:linear-gradient(135deg,#e55a4e,#b12d27);box-shadow:0 14px 36px -12px rgba(204,63,53,.7),inset 0 1px 0 rgba(255,255,255,.25)}
.btn[disabled]{opacity:.28;pointer-events:none;box-shadow:none}
.btn[disabled]::after{display:none}
.btn svg{width:18px;height:18px}
.link{display:block;margin:16px auto 0;font-size:13.5px;color:var(--mute);text-decoration:underline;text-underline-offset:3px;transition:color .2s}
@media (hover:hover){.link:hover{color:var(--dim)}}
.foot{position:sticky;bottom:0;z-index:5;padding:20px 22px calc(18px + env(safe-area-inset-bottom));margin:auto -22px -28px;
  background:linear-gradient(180deg,rgba(6,7,9,0),rgba(6,7,9,.9) 34%,var(--bg))}
.screen.flush .foot{margin:auto 0 -28px}
.ripple{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(233,207,145,.35),transparent 70%);transform:scale(0);animation:rip .7s var(--ease-out) forwards}
@keyframes rip{to{transform:scale(1);opacity:0}}

/* ---------- options ---------- */
.q{margin-bottom:22px}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:17px 18px;border-radius:15px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));font-size:16px;font-weight:500;
  transition:border-color .3s,background .3s,transform .15s var(--ease),box-shadow .3s,opacity .3s}
@media (hover:hover){.opt:hover{border-color:rgba(201,165,92,.4)}}
.opt:active{transform:scale(.988)}
.opt .k{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:11.5px;font-weight:600;color:var(--mute);border:1px solid var(--line2);transition:all .3s}
.opt .t{flex:1}
.opt .sub{display:block;font-size:13px;color:var(--mute);font-weight:400;margin-top:2px}
.opt .dot{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line2);display:grid;place-items:center;transition:all .3s var(--ease)}
.opt .dot svg{width:12px;height:12px;color:var(--gold-ink);opacity:0;transform:scale(.4);transition:all .3s var(--ease)}
.opt.sel{border-color:var(--gold);background:linear-gradient(180deg,rgba(201,165,92,.16),rgba(201,165,92,.06));box-shadow:0 0 0 1px rgba(201,165,92,.35),0 10px 30px -14px rgba(201,165,92,.5)}
.opt.sel .k{color:var(--gold-ink);background:var(--gold);border-color:var(--gold)}
.opt.sel .dot{border-color:var(--gold);background:var(--gold)}
.opt.sel .dot svg{opacity:1;transform:none}
.opts.picked .opt:not(.sel){opacity:.4}

.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:13px 16px;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);text-align:left;transition:all .3s var(--ease);flex:1 1 calc(50% - 5px);min-width:0}
.chip b{font-size:15px;font-weight:600}
.chip span{font-size:12px;color:var(--mute);transition:color .3s}
.chip.sel{border-color:var(--red2);background:linear-gradient(180deg,rgba(204,63,53,.2),rgba(204,63,53,.06));box-shadow:0 0 0 1px rgba(255,98,85,.3)}
.chip.sel span{color:#ffb3ab}
.chip.none{flex-basis:100%;align-items:center}
.chip.none.sel{border-color:var(--gold);background:var(--gold-soft);box-shadow:none}
.chip.none.sel span{color:var(--gold2)}
.counter{margin-top:14px;font-size:13px;color:var(--mute);text-align:center;min-height:20px}
.counter b{color:var(--red2)}

.faiths{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.faith{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:106px;padding:16px 10px;border-radius:15px;
  border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));font-weight:500;font-size:15px;transition:all .3s var(--ease)}
@media (hover:hover){.faith:hover{border-color:rgba(201,165,92,.45);transform:translateY(-1px)}}
.faith svg{width:34px;height:34px;color:var(--gold);transition:transform .4s var(--ease),filter .4s}
@media (hover:hover){.faith:hover svg{transform:scale(1.08);filter:drop-shadow(0 0 10px rgba(201,165,92,.55))}}
.faith.sel svg{transform:scale(1.08);filter:drop-shadow(0 0 10px rgba(201,165,92,.55))}
.faith.wide{grid-column:1/-1;flex-direction:row;min-height:62px}
.faith.wide svg{width:26px;height:26px}
.faith.sel{border-color:var(--gold);background:linear-gradient(180deg,rgba(201,165,92,.18),rgba(201,165,92,.05));box-shadow:0 0 0 1px rgba(201,165,92,.35)}
.faiths.picked .faith:not(.sel){opacity:.4}

.field{width:100%;height:62px;border-radius:15px;border:1px solid var(--line2);background:rgba(255,255,255,.04);padding:0 20px;
  font:500 19px var(--sans);color:var(--text);outline:none;transition:border-color .3s,background .3s,box-shadow .3s}
.field::placeholder{color:var(--mute);font-weight:400}
.field:focus{border-color:var(--gold);background:rgba(255,255,255,.055);box-shadow:0 0 0 4px rgba(201,165,92,.12)}
.field.err{border-color:var(--red);box-shadow:0 0 0 4px rgba(204,63,53,.12)}
.field.year{text-align:center;letter-spacing:.32em;font-size:30px;font-family:var(--serif);font-weight:600;padding-left:.32em}
textarea.field{display:block;height:150px;padding:18px 20px;resize:none;font:400 17px/1.55 var(--sans)}
.ferr{color:var(--red2);font-size:13px;margin-top:8px;min-height:18px}
.privacy{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:10px 13px;border-radius:13px;background:rgba(255,255,255,.03);border:1px solid var(--line);font-size:12.5px;line-height:1.45;color:var(--dim)}
.privacy svg{flex:none;width:16px;height:16px;color:var(--gold);margin-top:2px}

/* ---------- media bands ---------- */
.hero{position:relative;margin:0;overflow:hidden}
.hero .media{width:100%;height:56vh;height:56dvh;min-height:360px;max-height:600px;object-fit:cover;object-position:center 42%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,7,9,.55) 0%,rgba(6,7,9,0) 22%,rgba(6,7,9,0) 48%,var(--bg) 97%)}
.hero-body{position:relative;margin-top:-126px;padding:0 22px;z-index:3;text-align:center}
.hero-body h1{font-size:45px}
.ecg{width:190px;height:34px;margin:12px auto 0;color:var(--red2);display:block}
.ecg .base{opacity:.16}
.ecg .pulse{stroke-dasharray:70 146;animation:ecg 1.8s linear infinite;filter:drop-shadow(0 0 5px rgba(255,98,85,.85))}
@keyframes ecg{from{stroke-dashoffset:216}to{stroke-dashoffset:0}}
.trust{display:flex;justify-content:center;gap:16px;margin-top:14px;color:var(--mute);font-size:12.5px}
.trust span{display:flex;align-items:center;gap:6px}
.trust svg{width:14px;height:14px;color:var(--gold)}

.imgband{position:relative;margin:0;overflow:hidden}
.imgband .media{width:100%;height:44vh;height:44dvh;min-height:300px;max-height:500px;object-fit:cover;animation:kb 16s var(--ease-out) both}
@keyframes kb{from{transform:scale(1.12) translateY(8px)}to{transform:scale(1) translateY(0)}}
.imgband::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,7,9,.55) 0%,rgba(6,7,9,0) 26%,rgba(6,7,9,.15) 58%,var(--bg) 98%)}
.imgband.tall .media{height:56vh;height:56dvh;max-height:600px}
.imgband.short .media{height:32vh;height:32dvh;min-height:230px}
.imgband + .pad{margin-top:-96px}
.imgband.short + .pad{margin-top:-70px}

/* ---------- life clock ---------- */
.clock{display:flex;justify-content:center;align-items:flex-start;gap:6px;margin-top:22px}
.clock .u{display:flex;flex-direction:column;align-items:center;gap:7px}
.clock .d{min-width:58px;padding:12px 6px;border-radius:14px;border:1px solid var(--line2);background:linear-gradient(180deg,#16191f,#0b0d11);
  font-family:var(--serif);font-size:32px;font-weight:600;line-height:1;text-align:center;font-variant-numeric:lining-nums tabular-nums;box-shadow:inset 0 -18px 24px -18px rgba(0,0,0,.8)}
.clock .d.big{min-width:112px;color:var(--gold2)}
.clock .l{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.clock .sep{font-family:var(--serif);font-size:28px;color:var(--mute);padding-top:9px}
.bignum{font-family:var(--serif);font-weight:600;font-size:84px;line-height:1;letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums;color:var(--gold2);text-shadow:0 0 40px rgba(233,207,145,.25)}
.bignum.red{color:var(--red2);text-shadow:0 0 40px rgba(255,98,85,.3)}
.weeks{display:grid;grid-template-columns:repeat(30,1fr);gap:3px;margin-top:20px}
.weeks i{aspect-ratio:1;border-radius:1.5px;background:rgba(255,255,255,.09);opacity:0;animation:fade .3s ease forwards;animation-delay:var(--d)}
.weeks i.gone{background:rgba(201,165,92,.6)}
.weeks i.now{background:var(--red2);box-shadow:0 0 8px var(--red2);animation:fade .3s ease forwards,blink 1.2s ease-in-out infinite;animation-delay:var(--d),calc(var(--d) + .3s)}
@keyframes blink{50%{opacity:.3}}
.legend2{display:flex;justify-content:center;gap:16px;margin-top:10px;font-size:11.5px;color:var(--mute)}
.legend2 i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:-1px}

/* ---------- stat ---------- */
.stat-card{margin-top:22px;padding:6px 20px;border-radius:var(--r);border:1px solid var(--line);background:rgba(255,255,255,.03);text-align:left}
.stat-card .row{display:flex;justify-content:space-between;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line)}
.stat-card .row:last-child{border-bottom:0}
.stat-card .row b{font-family:var(--serif);font-size:25px;font-weight:600}

/* ---------- quote ---------- */
.sym{width:56px;height:56px;margin:0 auto 18px;color:var(--gold);filter:drop-shadow(0 0 20px rgba(201,165,92,.5));animation:float 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-5px)}}
.quote{font-family:var(--serif);font-style:italic;font-weight:500;font-size:29px;line-height:1.28;text-align:center}
.quote::before{content:"“"}.quote::after{content:"”"}
.ref{display:block;text-align:center;margin-top:16px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.ornament{width:120px;height:12px;margin:22px auto;color:rgba(201,165,92,.6)}

/* ---------- confession ---------- */
.burnwrap{position:relative}
.ashes{position:absolute;inset:0;pointer-events:none;overflow:visible;padding:18px 20px;font:400 17px/1.55 var(--sans);white-space:pre-wrap;word-break:break-word;color:transparent}
.ashes span{display:inline;will-change:transform,opacity;color:var(--text)}
.ashes span.burn{display:inline-block;animation:burn 1.8s var(--ease) forwards;animation-delay:var(--d)}
@keyframes burn{0%{color:var(--text)}30%{color:#ffb070;text-shadow:0 0 10px #ff7a3c}100%{color:#ff5a2a;opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.3);filter:blur(2px)}}
.released{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:150px;text-align:center;animation:rise .8s var(--ease-out) both}
.released svg{width:42px;height:42px;color:var(--gold2);animation:float 4s ease-in-out infinite}

/* ---------- palm ---------- */
.frame{position:relative;width:100%;height:min(36vh,340px);height:min(36dvh,340px);border-radius:22px;overflow:hidden;border:1px solid var(--line2);background:#0a0c10}
.frame.empty{border:1.5px dashed rgba(201,165,92,.45);display:grid;place-items:center;text-align:center;color:var(--dim)}
.frame.empty svg{width:84px;height:84px;color:rgba(201,165,92,.8);margin:0 auto 12px;animation:float 4s ease-in-out infinite}
.frame img.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.8) contrast(1.06)}
.frame .corner{position:absolute;width:26px;height:26px;border-color:var(--gold);border-style:solid;opacity:.9}
.frame .c1{top:14px;left:14px;border-width:2px 0 0 2px;border-radius:7px 0 0 0}
.frame .c2{top:14px;right:14px;border-width:2px 2px 0 0;border-radius:0 7px 0 0}
.frame .c3{bottom:14px;left:14px;border-width:0 0 2px 2px;border-radius:0 0 0 7px}
.frame .c4{bottom:14px;right:14px;border-width:0 2px 2px 0;border-radius:0 0 7px 0}
.frame .tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,7,9,.2),rgba(6,7,9,.45))}
.frame svg.lines{position:absolute;inset:0;width:100%;height:100%}
.frame svg.lines path{fill:none;stroke-linecap:round;stroke-width:2.6;filter:drop-shadow(0 0 6px currentColor)}
.frame svg.lines .draw{stroke-dasharray:600;stroke-dashoffset:600;animation:draw 1.6s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.beam{position:absolute;left:0;right:0;height:90px;top:-90px;background:linear-gradient(180deg,rgba(233,207,145,0),rgba(233,207,145,.24) 70%,rgba(233,207,145,.95) 98%,rgba(233,207,145,0));animation:beam 1.9s cubic-bezier(.45,0,.55,1) infinite}
@keyframes beam{0%{top:-90px}100%{top:100%}}
.grid-ov{position:absolute;inset:0;background-image:linear-gradient(rgba(233,207,145,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(233,207,145,.07) 1px,transparent 1px);background-size:26px 26px}
.hud{position:absolute;inset:0;pointer-events:none}
.hud .ring{position:absolute;left:50%;top:50%;width:190px;height:190px;margin:-95px 0 0 -95px;border-radius:50%;border:1px dashed rgba(233,207,145,.45);animation:spin 12s linear infinite}
.hud .ring2{position:absolute;left:50%;top:50%;width:140px;height:140px;margin:-70px 0 0 -70px;border-radius:50%;border:1.5px solid transparent;border-top-color:var(--gold2);border-bottom-color:rgba(233,207,145,.3);animation:spin 2.4s linear infinite reverse}
.hud .read{position:absolute;left:16px;bottom:14px;font:600 10.5px/1.5 ui-monospace,Menlo,monospace;letter-spacing:.08em;color:var(--gold2);text-shadow:0 0 6px rgba(0,0,0,.8)}
.hud .pc{position:absolute;right:18px;top:16px;font:600 13px ui-monospace,Menlo,monospace;color:var(--gold2);text-shadow:0 0 6px rgba(0,0,0,.8)}
@keyframes spin{to{transform:rotate(360deg)}}
.mark{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:2px solid var(--red2);font-style:normal;opacity:0;transform:scale(2);
  animation:markin .6s var(--ease-out) forwards,ping 1.6s ease-out infinite;animation-delay:var(--d),calc(var(--d) + .6s)}
.mark::after{content:"";position:absolute;inset:14px;border-radius:50%;background:var(--red2)}
@keyframes markin{to{opacity:1;transform:none}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,98,85,.55),0 0 22px rgba(255,98,85,.6)}100%{box-shadow:0 0 0 22px rgba(255,98,85,0),0 0 22px rgba(255,98,85,.6)}}
.mark .lbl{position:absolute;left:52px;top:10px;white-space:nowrap;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(204,63,53,.92);padding:3px 8px;border-radius:6px}
.mark.left .lbl{left:auto;right:52px}
.upbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.upbtns .btn{height:52px;font-size:15px}
.ok-pill{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:6px 12px;border-radius:999px;background:rgba(127,179,138,.12);color:#9fd0a9;font-size:13px;font-weight:600}
.ok-pill svg{width:14px;height:14px}
.checks{margin-top:18px;display:flex;flex-direction:column;gap:12px}
.check{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--mute);transition:color .4s}
.check i{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line2);display:grid;place-items:center;transition:all .4s}
.check i svg{width:12px;height:12px;opacity:0;transition:opacity .3s}
.check.on{color:var(--text)}
.check.on i{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.check.on i svg{opacity:1}
.check.run i{border-color:var(--gold);border-top-color:transparent;animation:spin .8s linear infinite}
.reading{margin-top:16px;padding:14px 18px;border-radius:var(--r);border:1px solid rgba(204,63,53,.32);background:linear-gradient(180deg,rgba(204,63,53,.1),rgba(204,63,53,.03))}
.reading .row{display:flex;gap:12px;padding:7px 0;font-size:15px}
.reading .row svg{flex:none;width:18px;height:18px;color:var(--red2);margin-top:3px}

/* ---------- calculating ---------- */
.calc{margin-top:24px;display:flex;flex-direction:column;gap:20px}
.bar{display:flex;flex-direction:column;gap:9px}
.bar .lab{display:flex;justify-content:space-between;font-size:14px;color:var(--dim);transition:color .3s}
.bar .lab b{color:var(--text);font-weight:600;font-variant-numeric:lining-nums tabular-nums}
.bar .track{height:5px;border-radius:9px;background:rgba(255,255,255,.07);overflow:hidden}
.bar .fill{height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,var(--gold),var(--gold3));box-shadow:0 0 12px rgba(233,207,145,.6)}
.bar.done .lab{color:var(--text)}
.orb{width:128px;height:128px;margin:0 auto 8px;position:relative}
.orb::before,.orb::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(201,165,92,.2);border-top-color:var(--gold2);animation:spin 1.6s linear infinite}
.orb::after{inset:16px;border-top-color:transparent;border-bottom-color:var(--gold);animation-duration:2.6s;animation-direction:reverse}
.orb svg{position:absolute;inset:40px;width:48px;height:48px;color:var(--gold);filter:drop-shadow(0 0 12px rgba(201,165,92,.6))}
.ticker{height:22px;margin-top:14px;font-size:14px;color:var(--mute);text-align:center;transition:opacity .3s}

/* ---------- scale ---------- */
.scale{width:100%;max-width:340px;margin:10px auto 0;display:block;overflow:visible}
.result-tag{margin:18px auto 0;display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:0;transform:translateY(8px);transition:all .7s var(--ease-out)}
.result-tag.show{opacity:1;transform:none}
.result-tag.devil{background:var(--red-soft);color:var(--red2);border:1px solid rgba(204,63,53,.4)}
.result-tag.warning{background:rgba(147,169,200,.12);color:var(--blue);border:1px solid rgba(147,169,200,.35)}
.result-tag.angel{background:var(--gold-soft);color:var(--gold2);border:1px solid rgba(201,165,92,.4)}

/* ---------- verdict ---------- */
.verdict,.ending,.stackf{display:flex;flex-direction:column;flex:1}
.verdict .imgband .media{height:50vh;height:50dvh;min-height:340px;max-height:560px;object-position:center 32%}
.verdict h1{font-size:41px}
.verdict.devil .imgband::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(90% 60% at 50% 40%,rgba(204,63,53,.25),transparent 70%);animation:redglow 3s ease-in-out infinite}
@keyframes redglow{50%{opacity:.4}}
.veil{position:fixed;inset:0;z-index:35;background:#000;display:grid;place-items:center;text-align:center;transition:opacity .9s ease}
.veil p{font-family:var(--serif);font-size:30px;color:var(--dim);letter-spacing:.02em;animation:fade 1s ease both}
.veil.flash{background:#fff}
.veil.flash.red{background:#8e1d16}
.veil.gone{opacity:0;pointer-events:none}
.shake{animation:shake .7s cubic-bezier(.36,.07,.19,.97) both}
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}
.score-row{display:flex;align-items:center;gap:16px;margin-top:20px;padding:16px 18px;border-radius:var(--r);border:1px solid var(--line);background:rgba(255,255,255,.03)}
.ring{flex:none;width:68px;height:68px;position:relative}
.ring svg{width:68px;height:68px;transform:rotate(-90deg)}
.ring circle.v{transition:stroke-dashoffset 1.8s var(--ease-out)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-size:25px;font-weight:600}
.score-row .t{font-size:14px;color:var(--dim)}
.score-row .t strong{display:block;color:var(--text);font-size:16px;margin-bottom:2px}
.pulse-red{animation:redpulse 2.2s ease-in-out infinite}
@keyframes redpulse{0%,100%{text-shadow:0 0 0 rgba(255,98,85,0)}50%{text-shadow:0 0 26px rgba(255,98,85,.6)}}

/* ---------- kept vs given ---------- */
.kg{margin-top:4px;display:flex;flex-direction:column;gap:20px}
.kg .lab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.kg .lab span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.kg .lab b{font-family:var(--serif);font-size:30px;font-weight:600;font-variant-numeric:lining-nums tabular-nums}
.kg .track{height:16px;border-radius:6px;background:rgba(255,255,255,.05);overflow:hidden}
.kg .fill{height:100%;width:0;border-radius:6px;transition:width 1.8s var(--ease-out)}
.kg .fill.kept{background:linear-gradient(90deg,#7e241e,var(--red2));box-shadow:0 0 18px rgba(255,98,85,.45)}
.kg .fill.given{background:linear-gradient(90deg,var(--gold),var(--gold3));min-width:3px;box-shadow:0 0 12px rgba(233,207,145,.5)}
.pct{margin-top:22px;padding:18px;border-radius:var(--r);background:var(--red-soft);border:1px solid rgba(204,63,53,.3);text-align:center}
.pct b{display:block;font-family:var(--serif);font-size:46px;line-height:1;color:var(--red2)}
.pct.ok{background:var(--gold-soft);border-color:rgba(201,165,92,.35)} .pct.ok b{color:var(--gold2)}

/* ---------- epitaph ---------- */
.stone{position:relative;overflow:hidden}
.stone .inner{position:relative;width:100%;aspect-ratio:4/5;max-height:640px;margin:0 auto;animation:kb 18s var(--ease-out) both}
.stone .inner .media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stone .media.warm{filter:sepia(.32) saturate(1.3) brightness(1.12) contrast(1.02)}
.stone::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(6,7,9,.6) 0%,rgba(6,7,9,0) 16%,rgba(6,7,9,0) 80%,var(--bg) 100%)}
.stone + .pad{margin-top:-44px}
.engrave{font-variant-numeric:oldstyle-nums;position:absolute;z-index:2;left:23%;width:54%;top:31%;height:39%;container-type:inline-size;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;font-family:var(--serif);color:#2b241a;opacity:.9;text-shadow:0 1px 0 rgba(255,236,196,.42),0 -1px 0 rgba(0,0,0,.4)}
.engrave .rip{font-size:10px;font-size:5.2cqw;letter-spacing:.34em;font-weight:700;padding-left:.34em}
.engrave .nm{font-size:24px;font-weight:700;letter-spacing:.14em;padding-left:.14em;text-transform:uppercase;margin-top:.25em;line-height:1.05;white-space:nowrap}
.engrave .yr{font-size:12px;font-size:6.3cqw;letter-spacing:.2em;font-weight:600;margin-top:.3em}
.engrave .ep{font-size:15px;font-size:8.3cqw;font-style:italic;font-weight:700;line-height:1.22;margin-top:.55em;min-height:3.66em}
.engrave .ep .c{opacity:0;transition:opacity .12s}
.engrave .ep .c.on{opacity:1}
.engrave.gold{color:#fff4d6;opacity:1;text-shadow:0 0 10px rgba(255,214,130,.95),0 0 26px rgba(233,207,145,.6),0 1px 1px rgba(60,40,10,.6)}

/* ---------- plan / app mock ---------- */
.phone{margin:20px auto 0;width:100%;max-width:330px;border-radius:36px;padding:10px;background:linear-gradient(145deg,#2c2f36,#0f1115);
  box-shadow:0 34px 70px -24px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.07),0 0 60px -20px rgba(201,165,92,.25)}
.phone .scr{border-radius:28px;overflow:hidden;background:#0b0d11;border:1px solid rgba(255,255,255,.05);padding:18px 16px 16px}
.phone .notch{width:90px;height:22px;border-radius:0 0 14px 14px;background:#0f1115;margin:-18px auto 12px}
.app-h{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--mute);letter-spacing:.14em;text-transform:uppercase}
.app-h b{color:var(--gold2)}
.app-t{font-family:var(--serif);font-size:24px;font-weight:600;margin:6px 0 12px}
.meter{height:8px;border-radius:9px;background:linear-gradient(90deg,var(--red) 0%,#8c6a3a 50%,var(--gold2) 100%);position:relative;margin:6px 0 16px}
.meter i{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--bg);transform:translate(-50%,-50%);box-shadow:0 0 0 1px rgba(255,255,255,.3),0 0 12px rgba(255,255,255,.5);transition:left 2.2s var(--ease-out)}
.task{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);margin-top:8px;font-size:13.5px}
.task i{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold2)}
.task i svg{width:16px;height:16px}
.task span{flex:1}
.task small{display:block;color:var(--mute);font-size:12px}
.task .tick{flex:none;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line2);display:grid;place-items:center;transition:all .4s var(--ease)}
.task .tick svg{width:12px;height:12px;color:var(--gold-ink);opacity:0;transition:opacity .3s}
.task.done .tick{background:var(--gold);border-color:var(--gold);box-shadow:0 0 12px rgba(201,165,92,.6)}
.task.done .tick svg{opacity:1}
.feats{margin-top:20px;display:flex;flex-direction:column;gap:14px}
.feat{display:flex;gap:14px;align-items:flex-start}
.feat i{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold2);border:1px solid rgba(201,165,92,.25)}
.feat i svg{width:20px;height:20px}
.feat b{display:block;font-weight:600;font-size:15.5px}
.feat span{font-size:14px;color:var(--dim)}

/* ---------- before / after ---------- */
.ba{display:grid;grid-template-columns:1fr 32px 1fr;align-items:center;gap:6px;margin-top:22px}
.ba .card{padding:18px 12px;border-radius:var(--r);text-align:center;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.ba .card.now{border-color:rgba(204,63,53,.35);background:var(--red-soft)}
.ba .card.then{border-color:rgba(201,165,92,.4);background:var(--gold-soft)}
.ba .card small{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.ba .card b{display:block;font-family:var(--serif);font-size:54px;line-height:1.05;margin:6px 0 2px;font-variant-numeric:lining-nums tabular-nums}
.ba .card.now b{color:var(--red2)} .ba .card.then b{color:var(--gold2)}
.ba .card span{font-size:13px;color:var(--dim)}
.ba .arrow{color:var(--gold);display:grid;place-items:center}
.ba .arrow svg{width:26px;height:26px}
.chart{margin-top:18px;padding:16px 14px 10px;border-radius:var(--r);border:1px solid var(--line);background:rgba(255,255,255,.03)}
.chart svg{width:100%;height:auto;display:block}
.chart .legend{display:flex;justify-content:space-between;font-size:10.5px;color:var(--mute);margin-top:6px;letter-spacing:.1em;text-transform:uppercase}

/* ---------- pledge ---------- */
.pledge-text{font-family:var(--serif);font-size:25px;line-height:1.35;text-align:center;font-style:italic}
.pledge-text b{font-style:normal;color:var(--gold2)}
.hold{position:relative;width:136px;height:136px;margin:22px auto 0;display:grid;place-items:center;border-radius:50%;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;cursor:pointer}
.hold svg.rg{position:absolute;inset:0;width:136px;height:136px;transform:rotate(-90deg);pointer-events:none}
.hold .core{width:106px;height:106px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);
  background:radial-gradient(circle at 35% 30%,#f7e2ae,#c9a55c 60%,#9c7735);box-shadow:0 0 0 6px rgba(201,165,92,.12),0 18px 40px -12px rgba(201,165,92,.7);transition:transform .25s var(--ease),box-shadow .4s;pointer-events:none}
.hold .core svg{width:26px;height:26px;margin-bottom:4px}
.hold.pressing .core{transform:scale(.93)}
.hold.done .core{background:radial-gradient(circle at 35% 30%,#fff5d6,#e9cf91 60%,#c9a55c);box-shadow:0 0 0 10px rgba(233,207,145,.25),0 0 80px rgba(233,207,145,.8)}
.hold-hint{text-align:center;font-size:13px;color:var(--mute);margin-top:14px}
.burst{position:fixed;width:6px;height:6px;border-radius:50%;background:var(--gold3);pointer-events:none;z-index:36;box-shadow:0 0 10px var(--gold2);animation:burst 1.1s var(--ease-out) forwards}
@keyframes burst{to{transform:translate(var(--x),var(--y)) scale(.2);opacity:0}}

/* ---------- paywall ---------- */
.pw-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:15px;border:1px solid rgba(204,63,53,.35);background:var(--red-soft);font-size:13.5px}
.pw-top.angel{border-color:rgba(201,165,92,.35);background:var(--gold-soft)}
.pw-top b{font-family:var(--serif);font-size:23px}
.timer{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;padding:11px;border-radius:13px;background:rgba(255,255,255,.03);border:1px solid var(--line);font-size:13.5px;color:var(--dim)}
.timer b{font-variant-numeric:lining-nums tabular-nums;color:var(--gold2);font-size:16px;font-weight:600;letter-spacing:.05em}
.lc-banner{margin-top:14px;padding:12px 14px;border-radius:13px;background:linear-gradient(135deg,rgba(204,63,53,.25),rgba(204,63,53,.08));border:1px solid rgba(255,98,85,.45);text-align:center;font-weight:600;font-size:14px;color:#ffd9d5}
.plans{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.plan{position:relative;display:flex;align-items:center;gap:14px;padding:18px;border-radius:17px;border:1.5px solid var(--line);background:rgba(255,255,255,.03);text-align:left;width:100%;transition:all .3s var(--ease)}
@media (hover:hover){.plan:hover{border-color:rgba(201,165,92,.45)}}
.plan .dot{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line2);transition:all .3s}
.plan .nm{flex:1}
.plan .nm b{display:block;font-size:16.5px;font-weight:600}
.plan .nm span{font-size:13px;color:var(--mute)}
.plan .nm s{color:var(--mute);margin-right:6px}
.plan .pd{text-align:right}
.plan .pd b{display:block;font-family:var(--serif);font-size:27px;font-weight:600;line-height:1}
.plan .pd span{font-size:12px;color:var(--mute)}
.plan .tag{position:absolute;top:-10px;right:14px;padding:3px 10px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:var(--line2);color:var(--text)}
.plan.featured .tag{background:linear-gradient(135deg,#f0d9a0,#c9a55c);color:var(--gold-ink)}
.plan.sel{border-color:var(--gold);background:linear-gradient(180deg,rgba(201,165,92,.15),rgba(201,165,92,.04));box-shadow:0 0 0 1px rgba(201,165,92,.3),0 14px 34px -18px rgba(201,165,92,.6)}
.plan.sel .dot{border-color:var(--gold);background:var(--gold);box-shadow:inset 0 0 0 5px var(--bg)}
.pledge-line{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-size:13.5px;color:var(--dim)}
.pledge-line svg{width:16px;height:16px;color:var(--red2)}
.terms{margin-top:12px;font-size:11.5px;color:var(--mute);text-align:center;line-height:1.5}
.guarantee{display:flex;gap:14px;align-items:center;margin-top:24px;padding:16px;border-radius:var(--r);border:1px solid var(--line);background:rgba(255,255,255,.03)}
.guarantee svg{flex:none;width:40px;height:40px;color:var(--gold)}
.guarantee b{display:block;font-size:15px}
.guarantee span{font-size:13px;color:var(--dim)}
.sec{margin-top:36px}
.sec > .eyebrow{display:flex;justify-content:center}
.sec > .eyebrow::after{content:"";width:18px;height:1px;background:currentColor;opacity:.7}
.sec > h2{text-align:center}
.stories{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.story{padding:18px;border-radius:var(--r);border:1px solid var(--line);background:rgba(255,255,255,.03)}
.story .who{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.story .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:14px;background:linear-gradient(135deg,#3a3122,#1d1a14);color:var(--gold2);border:1px solid rgba(201,165,92,.3)}
.story .who b{display:block;font-size:14.5px}
.story .who span{font-size:12.5px;color:var(--mute)}
.story .stars{margin-left:auto;color:var(--gold2);letter-spacing:2px;font-size:13px}
.story p{font-size:14.5px;color:var(--dim);line-height:1.55}
.faq{margin-top:16px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:17px 2px;font-weight:600;font-size:15px;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:20px;line-height:1;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 2px 17px;color:var(--dim);font-size:14.5px}
.pay-icons{display:flex;justify-content:center;gap:8px;margin-top:12px;opacity:.75}
.pay-icons span{font-size:10.5px;font-weight:600;letter-spacing:.06em;padding:5px 9px;border-radius:6px;border:1px solid var(--line2);color:var(--dim)}
.stickybuy{position:fixed;left:50%;bottom:0;transform:translate(-50%,110%);width:100%;max-width:var(--col);z-index:25;padding:14px 22px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(6,7,9,0),rgba(6,7,9,.94) 30%,var(--bg));transition:transform .45s var(--ease-out)}
.stickybuy.show{transform:translate(-50%,0)}

/* ---------- ending ---------- */
.ending .imgband .media{height:54vh;height:54dvh}
.ending h1{font-size:46px}

/* ---------- sheet (checkout) ---------- */
.sheet-bg{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.62);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);animation:fade .25s both;display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:var(--col);background:var(--panel);border-radius:24px 24px 0 0;border:1px solid var(--line2);border-bottom:0;padding:22px 22px calc(22px + env(safe-area-inset-bottom));animation:up .45s var(--ease-out) both}
.sheet.full{height:92vh;height:92dvh;padding:0;overflow:hidden;display:flex;flex-direction:column}
.sheet.full iframe{flex:1;width:100%;border:0;background:#fff}
.sheet .grab{width:40px;height:4px;border-radius:4px;background:var(--line2);margin:0 auto 16px}
.sheet .sum{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.sheet .sum b{font-weight:600}
@keyframes up{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:80;background:#1b1f27;border:1px solid var(--line2);padding:12px 16px;border-radius:12px;font-size:14px;animation:up .3s both}

@media (min-width:520px){
  #app{box-shadow:0 0 0 1px rgba(255,255,255,.04),0 40px 120px rgba(0,0,0,.6)}
}
@media (max-width:360px){
  h1,.h1{font-size:35px}.hero-body h1{font-size:39px}h2,.h2{font-size:28px}.bignum{font-size:66px}.clock .d{min-width:50px;font-size:27px}.clock .d.big{min-width:94px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  #amb{display:none}
}

/* ==========================================================================
   v2.1 — motion + new pages
   ========================================================================== */
img.media{transition:opacity 1s ease}
img.media:not(.ld){opacity:0}
.hero .media{animation:fade 1.4s ease both}
.progress.over{position:absolute;top:58px;left:0;right:0}
.top.clear .brand{text-shadow:0 1px 12px rgba(0,0,0,.6)}
/* life clock */
.lc-sub{margin-top:8px;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.clock.live{margin-top:18px}
.clock.live .d{min-width:64px;font-size:30px;padding:11px 6px}
.months-wrap{position:relative;margin-top:22px}
.months-wrap canvas{display:block;width:100%}
.months-wrap .now{position:absolute;border-radius:50%;background:var(--red2);box-shadow:0 0 0 3px rgba(255,98,85,.18),0 0 12px 2px rgba(255,98,85,.85);animation:fade .4s ease both,blink 1.2s ease-in-out .4s infinite}
/* confession */
textarea.field.burning{color:transparent;caret-color:transparent;border-color:rgba(255,122,60,.45);box-shadow:0 0 0 4px rgba(255,98,85,.1),0 0 40px -10px rgba(255,122,60,.6);transition:border-color .6s,box-shadow .6s}
.released h3{font-size:26px;color:var(--gold2)}
.released .quote{margin-top:4px}
/* option rows: the check pops in */
.opt.sel .dot{animation:pop .42s var(--ease-out)}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.18)}100%{transform:none}}
.chip{transition:all .3s var(--ease),transform .15s var(--ease)}
.chip:active{transform:scale(.97)}
.faith:active{transform:scale(.97)}
/* stat + misc */
.stat-card .row b.red{color:var(--red2)}
.btn-red svg{width:18px;height:18px}
.hold:focus-visible{outline:2px solid var(--gold2);outline-offset:6px}
@media (max-width:360px){
  .clock.live .d{min-width:54px;font-size:26px}
}
@media (prefers-reduced-motion:reduce){
  .rv,.rv-wait{animation:none!important;opacity:1!important}
  img.media:not(.ld){opacity:1}
}

/* landing live counter */
.livebar{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:14px;font-size:12.5px;color:var(--dim);letter-spacing:.01em}
.livebar i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--red2);box-shadow:0 0 0 0 rgba(255,98,85,.6);animation:live 1.6s ease-out infinite}
.livebar b{color:var(--red2);font-weight:600;font-variant-numeric:lining-nums tabular-nums}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(255,98,85,.6)}100%{box-shadow:0 0 0 9px rgba(255,98,85,0)}}

/* checkout sheet */
.paysheet h3{font-size:26px;margin-top:6px}
.paysheet .eyebrow{margin-bottom:4px}
.fl{display:block;margin-top:12px;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--dim)}
.field.sm{height:52px;margin-top:6px;font-size:16px;padding:0 16px;border-radius:13px}
.fl2{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
.fl2[hidden]{display:none}
.zcity{padding-bottom:16px;font-size:14px;color:var(--gold2);font-weight:600}
.paysheet .terms{margin-top:10px}
.sheet{max-height:92vh;max-height:92dvh;overflow:auto}

/* paywall refinements */
.pchips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
.pchips span{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;border:1px solid rgba(201,165,92,.3);background:var(--gold-soft);font-size:12.5px;color:var(--gold2)}
.pchips svg{width:15px;height:15px;color:var(--gold2)}
.proofline{margin-top:10px;text-align:center;font-size:12.5px;color:var(--dim)}
.proofline .stars{color:var(--gold2);letter-spacing:1px}
.plan .pd b{font-size:30px}
.plan.featured{border-color:rgba(201,165,92,.35)}