/* styles.css : bright, mobile-first. Tokens first. */
:root{
  --bg:#FFF7F2; --bg2:#F4EEFF; --card:#FFFFFF;
  --ink:#2A1F3D; --ink2:#5B5170; --ink3:#8E86A0; --line:#EEE4EC; --line2:#F5EEF3;
  --pink:#F0527E; --pink2:#D63A68; --pink-soft:#FFE6EE;
  --lilac:#8B6CF6; --lilac2:#6F4FE0; --lilac-soft:#EEE8FF;
  --peach:#FFB48A; --peach-soft:#FFEFE3;
  --mint:#2FBF8A; --mint-soft:#E1F7EE;
  --amber:#FFB020; --amber-soft:#FFF3D6;
  --red:#E5484D; --red-soft:#FDE7E8;
  --grad:linear-gradient(135deg,#F0527E 0%,#8B6CF6 100%);
  --shadow:0 10px 30px rgba(74,44,90,.10), 0 2px 6px rgba(74,44,90,.06);
  --shadow-sm:0 4px 14px rgba(74,44,90,.08);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --maxw:460px; --r:18px; --r-sm:12px;
  box-sizing:border-box;
}
*,*::before,*::after{box-sizing:inherit}
html,body{min-height:100%}
body{background-repeat:no-repeat}
html{-webkit-text-size-adjust:100%; scroll-padding-top:var(--sat)}
body{margin:0; background:var(--bg); background-image:radial-gradient(60% 40% at 100% 0%,var(--bg2) 0%,rgba(244,238,255,0) 70%),radial-gradient(50% 35% at 0% 100%,#FFEDE4 0%,rgba(255,237,228,0) 70%); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; overscroll-behavior-y:none}
button,input,textarea,select{font:inherit; color:inherit}
button{cursor:pointer; -webkit-tap-highlight-color:transparent}
input,textarea,select{font-size:16px}
:focus-visible{outline:3px solid var(--amber); outline-offset:2px}
h1,h2,h3{font-family:var(--serif); font-weight:500; margin:0; letter-spacing:-.01em}
p{margin:0} a{color:var(--lilac2)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
svg{display:block}

/* ---------- background decorations ---------- */
#bgdeco{position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden}
#bgdeco i{position:absolute; width:26px; height:26px; opacity:.16; animation:float 9s ease-in-out infinite}
#bgdeco i svg{width:100%; height:100%}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(8deg)}}

/* ---------- shell ---------- */
#app{position:relative; min-height:100%; display:flex; flex-direction:column; max-width:var(--maxw); margin:0 auto; padding:calc(var(--sat) + 66px) 20px calc(var(--sab) + 24px)}
#app.has-nav{padding-bottom:calc(var(--sab) + 88px)}
.topbar{position:fixed; top:0; left:0; right:0; z-index:20; background:rgba(255,247,242,.85); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); padding-top:var(--sat)}
.topbar .row{max-width:var(--maxw); margin:0 auto; height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 12px 0 18px}
.brand{font-family:var(--serif); font-size:19px; color:var(--ink); display:flex; align-items:center; gap:8px}
.brand b{width:22px; height:22px; border-radius:7px; background:url(logo.svg) center/cover no-repeat; display:inline-block; flex:none}
.iconbtn{background:var(--card); border:1px solid var(--line); border-radius:999px; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; color:var(--ink2); box-shadow:var(--shadow-sm); flex:none}
.exit{background:var(--card); border:1px solid var(--line); border-radius:999px; padding:7px 12px; font-size:13px; color:var(--ink2); min-height:36px; box-shadow:var(--shadow-sm)}
.progress{position:relative; height:10px; margin:0 18px; max-width:calc(var(--maxw) - 36px); left:50%; transform:translateX(-50%); width:calc(100% - 36px)}
.progress .track{position:absolute; left:0; right:0; top:3px; height:4px; border-radius:2px; background:var(--line)}
.progress .fill{position:absolute; left:0; top:3px; height:4px; border-radius:2px; background:var(--grad); width:0; transition:width .5s cubic-bezier(.2,.7,.2,1)}
.progress .dot{position:absolute; top:0; width:10px; height:10px; border-radius:50%; background:#fff; border:2px solid var(--line); transform:translateX(-50%); transition:all .3s}
.progress .dot.on{border-color:var(--pink); background:var(--pink); box-shadow:0 0 0 4px rgba(240,82,126,.18)}
.progress .head{position:absolute; top:-3px; width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--pink); transform:translateX(-50%); transition:left .5s cubic-bezier(.2,.7,.2,1); box-shadow:0 2px 8px rgba(240,82,126,.4)}
.progress.hidden{visibility:hidden}
.screen{display:flex; flex-direction:column; flex:1; animation:fadeUp .38s cubic-bezier(.2,.7,.2,1) both}
@keyframes fadeUp{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
.grow{flex:1}
.pop{animation:pop .45s cubic-bezier(.2,.9,.3,1.4) both}
@keyframes pop{from{transform:scale(.6); opacity:0}to{transform:none; opacity:1}}
.delay1{animation-delay:.08s}.delay2{animation-delay:.16s}.delay3{animation-delay:.24s}.delay4{animation-delay:.32s}

.ic{display:inline-flex; width:16px; height:16px; vertical-align:-3px; flex:none}
.ic svg{width:100%; height:100%}
.kicker .ic{width:14px; height:14px; vertical-align:middle}
.small .ic{width:14px; height:14px; color:var(--lilac)}

/* ---------- type ---------- */
.kicker{font-size:13px; color:var(--lilac2); font-weight:600; margin-bottom:12px; display:inline-flex; align-items:center; gap:6px; background:var(--lilac-soft); padding:6px 12px; border-radius:999px}
.h-xl{font-size:clamp(31px,8.6vw,40px); line-height:1.1}
.h-l{font-size:clamp(24px,6.8vw,29px); line-height:1.2}
.h-m{font-size:22px; line-height:1.25}
.body{color:var(--ink2); font-size:16px}
.small{font-size:13px; color:var(--ink3)}
.count{font-size:13px; color:var(--ink3); margin-bottom:10px; font-weight:600}
.lead{display:flex; gap:10px; align-items:flex-start; background:var(--card); border-left:3px solid var(--lilac); border-radius:0 var(--r-sm) var(--r-sm) 0; padding:10px 12px; color:var(--ink2); font-size:14.5px; margin-bottom:14px; box-shadow:var(--shadow-sm)}
.lead i{width:18px; height:18px; color:var(--lilac); flex:none; margin-top:2px}
.tac{text-align:center}

/* ---------- buttons ---------- */
.btn{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:56px; padding:14px 18px; border-radius:var(--r); border:0; background:var(--grad); color:#fff; font-weight:700; font-size:16.5px; text-decoration:none; box-shadow:0 10px 24px rgba(240,82,126,.28); transition:transform .12s, box-shadow .2s, filter .2s}
.btn:active{transform:scale(.98); filter:brightness(.96)}
.btn[disabled]{opacity:.5; pointer-events:none; box-shadow:none}
.btn.ghost{background:var(--card); color:var(--ink2); border:1px solid var(--line); font-weight:600; box-shadow:var(--shadow-sm)}
.btn.soft{background:var(--lilac-soft); color:var(--lilac2); box-shadow:none}
.btn.danger{background:var(--red); box-shadow:0 8px 20px rgba(229,72,77,.25)}
.btn.sm{min-height:44px; padding:9px 16px; font-size:14px; width:auto; display:inline-flex}
.btn.glow{animation:glow 2.2s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 10px 24px rgba(240,82,126,.28)}50%{box-shadow:0 12px 34px rgba(139,108,246,.45)}}
.stack{display:flex; flex-direction:column; gap:10px}
.mt{margin-top:16px}.mt2{margin-top:24px}.mt3{margin-top:32px}
.footer-cta{position:sticky; bottom:calc(var(--sab) + 8px); padding-top:14px; background:linear-gradient(to top,var(--bg) 70%,rgba(255,247,242,0))}

/* ---------- cards ---------- */
.card{background:var(--card); border-radius:var(--r); padding:18px; box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.7)}
.card.tint{background:linear-gradient(135deg,#FFF 0%,var(--lilac-soft) 100%)}
.illo{width:100%; max-width:320px; margin:8px auto 0}
.illo svg,.illo img{width:100%; height:auto; border-radius:var(--r)}
.trust{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.trust span{display:inline-flex; align-items:center; gap:6px; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:6px 11px; font-size:12.5px; color:var(--ink2); font-weight:600}
.trust span i{width:15px; height:15px; color:var(--mint)}
.stats{display:flex; gap:10px; margin-top:16px}
.stat{flex:1; background:var(--card); border-radius:var(--r-sm); padding:12px; text-align:center; box-shadow:var(--shadow-sm)}
.stat b{display:block; font-family:var(--serif); font-size:24px; color:var(--pink2); font-variant-numeric:tabular-nums}
.stat span{font-size:12px; color:var(--ink3)}

/* ---------- quiz options ---------- */
.opts{display:flex; flex-direction:column; gap:10px; margin-top:20px}
.opt{display:flex; align-items:center; gap:14px; text-align:left; width:100%; min-height:62px; padding:14px 16px; background:var(--card); border:2px solid transparent; border-radius:var(--r); font-size:16.5px; line-height:1.35; color:var(--ink); box-shadow:var(--shadow-sm); transition:transform .12s, border-color .15s, background .15s}
.opt i{flex:none; width:24px; height:24px; border-radius:50%; border:2px solid var(--line); position:relative; transition:all .15s}
.opt:active{transform:scale(.98)}
.opt.sel{border-color:var(--pink); background:var(--pink-soft)}
.opt.sel i{border-color:var(--pink); background:var(--pink)}
.opt.sel i::after{content:""; position:absolute; inset:5px; border-radius:50%; background:#fff}
.opt.sel{animation:selpop .35s cubic-bezier(.2,.9,.3,1.3)}
@keyframes selpop{0%{transform:scale(1)}40%{transform:scale(1.03)}100%{transform:scale(1)}}
.gender{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px}
.gcard{background:var(--card); border:2px solid transparent; border-radius:var(--r); padding:14px 12px 16px; display:flex; flex-direction:column; align-items:center; gap:10px; font-weight:700; font-size:17px; box-shadow:var(--shadow); transition:transform .12s, border-color .15s}
.gcard svg{width:100%; max-width:150px}
.gcard:active{transform:scale(.97)}
.gcard.sel{border-color:var(--pink); background:var(--pink-soft)}
.chips2{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px}
.chips2 .opt{justify-content:center; min-height:58px; font-size:17px; font-weight:600}
.chips2 .opt i{display:none}

/* ---------- interstitials ---------- */
.profile{display:flex; gap:14px; align-items:center}
.profile .av{width:72px; height:72px; flex:none}
.profile .av svg{width:100%; height:100%}
.profile .rows{flex:1; display:flex; flex-direction:column; gap:4px; font-size:14px; color:var(--ink2)}
.profile .rows b{color:var(--ink)}
.build{margin-top:16px}
.build .lbl{display:flex; justify-content:space-between; font-size:13px; color:var(--ink3); margin-bottom:6px}
.build .lbl b{color:var(--lilac2)}
.meter{height:10px; background:var(--line2); border-radius:6px; overflow:hidden}
.meter i{display:block; height:100%; width:0; background:var(--grad); border-radius:6px; transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.signal{display:flex; gap:6px; margin:16px 0 8px}
.signal b{flex:1; height:10px; border-radius:6px; background:var(--line2); transition:background .3s}
.signal b.on{background:var(--amber)}
.note{border-radius:var(--r-sm); padding:12px 14px; color:var(--ink2); font-size:14px; margin-top:16px; background:var(--card); box-shadow:var(--shadow-sm); display:flex; gap:10px; align-items:flex-start}
.note i{width:18px; height:18px; flex:none; margin-top:2px; color:var(--mint)}
.note.warn{background:var(--red-soft); color:var(--ink)}
.note.warn i{color:var(--red)}
.timeline{margin-top:18px; display:flex; flex-direction:column; gap:12px}
.tl{display:flex; gap:12px; background:var(--card); border-radius:var(--r-sm); padding:12px 14px; box-shadow:var(--shadow-sm); align-items:flex-start}
.tl .day{font-family:var(--serif); color:var(--pink2); font-size:17px; min-width:74px}
.tl p{color:var(--ink2); font-size:14.5px}
textarea.ta{width:100%; min-height:110px; border:1.5px solid var(--line); border-radius:var(--r); padding:14px; background:var(--card); resize:vertical; line-height:1.45; box-shadow:var(--shadow-sm)}
.found{margin-top:16px; background:var(--card); border-radius:var(--r); padding:14px; box-shadow:var(--shadow)}
.tag{display:inline-block; background:var(--amber-soft); color:#8A5A00; border-radius:8px; padding:4px 10px; font-size:13px; font-weight:700}
.blur{filter:blur(5px); user-select:none; pointer-events:none; color:var(--ink3)}
.quote{font-family:var(--serif); font-size:19px; line-height:1.4; margin-top:20px; color:var(--ink)}

/* ---------- gauge / analyzing ---------- */
.gauge{position:relative; width:190px; height:190px; margin:20px auto}
.gauge svg{width:100%; height:100%; transform:rotate(-90deg)}
.gauge .bg{fill:none; stroke:var(--line2); stroke-width:14}
.gauge .fg{fill:none; stroke:url(#gaugeGrad); stroke-width:14; stroke-linecap:round; stroke-dasharray:502; stroke-dashoffset:502; transition:stroke-dashoffset 1.7s cubic-bezier(.2,.7,.2,1)}
.gauge .num{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:var(--serif); font-size:54px; line-height:1; color:var(--ink)}
.gauge .num small{font-family:var(--sans); font-size:12px; color:var(--ink3); margin-top:4px}
.gauge.sm{width:120px; height:120px; margin:0}
.gauge.sm .num{font-size:34px}
.ring{width:150px; height:150px; margin:26px auto 8px; border-radius:50%; background:conic-gradient(var(--pink),var(--lilac),var(--peach),var(--pink)); animation:spin 1.4s linear infinite; position:relative; -webkit-mask:radial-gradient(circle,transparent 58%,#000 60%); mask:radial-gradient(circle,transparent 58%,#000 60%)}
@keyframes spin{to{transform:rotate(360deg)}}
.ringwrap{position:relative}
.ringwrap .pct{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:34px; color:var(--ink); pointer-events:none}
.steps{display:flex; flex-direction:column; gap:10px; margin-top:22px}
.step{display:flex; gap:12px; align-items:center; color:var(--ink3); font-size:15px; background:var(--card); border-radius:var(--r-sm); padding:12px 14px; box-shadow:var(--shadow-sm); opacity:.55; transition:opacity .3s}
.step i{width:24px; height:24px; border-radius:50%; border:2px solid var(--line); flex:none; display:flex; align-items:center; justify-content:center; color:#fff}
.step i svg{width:14px; height:14px; opacity:0}
.step.on{color:var(--ink); opacity:1}
.step.on i{border-color:var(--mint); background:var(--mint)}
.step.on i svg{opacity:1}
.bar{height:8px; background:var(--line2); border-radius:6px; margin-top:22px; overflow:hidden}
.bar i{display:block; height:100%; width:0; background:var(--grad); transition:width .35s linear}

/* ---------- forms ---------- */
.field{display:flex; flex-direction:column; gap:6px; margin-top:14px}
.field label{font-size:13px; color:var(--ink2); font-weight:600}
.in{width:100%; min-height:56px; border:1.5px solid var(--line); border-radius:var(--r); padding:14px 16px; background:var(--card); box-shadow:var(--shadow-sm)}
.in:focus{border-color:var(--lilac); outline:none; box-shadow:0 0 0 4px rgba(139,108,246,.15)}
.in.err{border-color:var(--red)}
.errmsg{color:var(--red); font-size:13px; margin-top:6px; min-height:0}
.row2{display:flex; gap:10px}.row2 > *{flex:1}
.check{display:flex; gap:12px; align-items:flex-start; font-size:14px; color:var(--ink2); margin-top:16px}
.check input{width:22px; height:22px; flex:none; margin-top:1px; accent-color:var(--pink)}

/* ---------- wheel ---------- */
.wheelwrap{position:relative; width:min(300px,78vw); margin:20px auto 0}
.wheelwrap .ptr{position:absolute; top:-8px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:14px solid transparent; border-right:14px solid transparent; border-top:26px solid var(--ink); z-index:2; filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.wheelwrap.spinning .ptr{animation:ptr .18s ease-in-out infinite alternate}
@keyframes ptr{from{transform:translateX(-50%) rotate(-8deg)}to{transform:translateX(-50%) rotate(8deg)}}
.wheel{width:100%; aspect-ratio:1; border-radius:50%; transition:transform 5.2s cubic-bezier(.12,.75,.1,1); will-change:transform; box-shadow:0 0 0 8px #fff, 0 14px 40px rgba(74,44,90,.22)}
.wheel text{font-family:var(--sans); font-weight:800; font-size:15px}
.won{font-family:var(--serif); font-size:36px; text-align:center; margin-top:18px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.confetti{position:fixed; inset:0; pointer-events:none; z-index:30; overflow:hidden}
.confetti i{position:absolute; top:-12px; width:10px; height:14px; border-radius:2px; animation:fall 2.4s cubic-bezier(.2,.7,.4,1) forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg); opacity:.2}}

/* ---------- pricing ---------- */
.reserve{display:flex; justify-content:space-between; align-items:center; background:var(--amber-soft); border-radius:var(--r-sm); padding:12px 14px; margin-top:16px; font-size:14px; color:#6A4500}
.reserve b{font-family:var(--serif); font-size:22px; font-variant-numeric:tabular-nums; animation:tick 1s steps(1) infinite}
@keyframes tick{50%{opacity:.75}}
.plans{display:flex; flex-direction:column; gap:12px; margin-top:20px}
.plan{position:relative; text-align:left; width:100%; background:var(--card); border:2px solid transparent; border-radius:var(--r); padding:18px 16px 14px; display:flex; flex-direction:column; gap:6px; box-shadow:var(--shadow); transition:transform .12s, border-color .15s}
.plan:active{transform:scale(.99)}
.plan.sel{border-color:var(--pink); background:linear-gradient(180deg,#fff,var(--pink-soft))}
.plan .top{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.plan .name{font-family:var(--serif); font-size:21px}
.plan .price{font-family:var(--serif); font-size:26px; white-space:nowrap; color:var(--pink2)}
.plan .was{color:var(--ink3); text-decoration:line-through; font-size:14px; margin-right:6px; font-family:var(--sans)}
.plan .per{font-size:13px; color:var(--ink3)}
.plan ul{margin:6px 0 0; padding-left:0; list-style:none; color:var(--ink2); font-size:14px; line-height:1.55}
.plan ul li{display:flex; gap:8px; align-items:flex-start}
.plan ul li i{width:16px; height:16px; color:var(--mint); flex:none; margin-top:3px}
.plan .badge{position:absolute; top:-12px; left:14px; background:var(--grad); color:#fff; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; box-shadow:var(--shadow-sm)}
.plan .badge.alt{background:var(--mint)}
.plan .save{position:absolute; top:-12px; right:14px; background:var(--amber); color:#4A3000; font-size:12px; font-weight:800; padding:4px 10px; border-radius:999px}
.legal{font-size:12px; color:var(--ink3); line-height:1.5; margin-top:12px}
.report-peek{margin-top:14px; background:var(--card); border-radius:var(--r); padding:16px; display:flex; gap:16px; align-items:center; box-shadow:var(--shadow)}
.report-peek .txt{flex:1}
.report-peek .txt b{display:block; font-family:var(--serif); font-weight:500; font-size:18px}
.beforeafter{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px}
.beforeafter .card{padding:10px; text-align:center; font-size:12.5px; color:var(--ink2); font-weight:600}
.beforeafter .card svg{border-radius:12px; margin-bottom:6px}
.summary{background:var(--card); border-radius:var(--r); padding:14px 16px; margin-top:16px; font-size:15px; box-shadow:var(--shadow)}
.summary .li{display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--line2)}
.summary .li:last-child{border:0}
.applepay{background:#000; color:#fff; border-radius:var(--r); min-height:56px; display:flex; align-items:center; justify-content:center; gap:8px; font-weight:600; width:100%; border:0}
.divider{display:flex; align-items:center; gap:12px; color:var(--ink3); font-size:13px; margin:18px 0 4px}
.divider::before,.divider::after{content:""; flex:1; height:1px; background:var(--line)}
.secure{display:flex; gap:8px; align-items:center; font-size:12.5px; color:var(--ink3); margin-top:10px}
.secure i{width:16px; height:16px; color:var(--mint)}

/* ---------- dashboard ---------- */
.nav{position:fixed; left:0; right:0; bottom:0; z-index:20; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-top:1px solid var(--line); padding-bottom:var(--sab)}
.nav .row{max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(6,1fr)}
.nav button{background:none; border:0; padding:10px 2px 8px; font-size:11px; color:var(--ink3); display:flex; flex-direction:column; align-items:center; gap:4px; min-height:58px; font-weight:600}
.nav button svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.nav button.on{color:var(--pink2)}
.panel{background:var(--card); border-radius:var(--r); padding:16px; margin-top:14px; box-shadow:var(--shadow)}
.panel h3{font-size:18px; margin-bottom:8px}
.hello{display:flex; gap:14px; align-items:center; margin-top:6px}
.hello .av{width:56px; height:56px; flex:none}
.hello .av svg{width:100%; height:100%}
.home-top{display:flex; gap:18px; align-items:center; margin-top:12px}
.home-top .meta{flex:1; font-size:14px; color:var(--ink2); display:flex; flex-direction:column; gap:6px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.chip{background:var(--amber-soft); color:#8A5A00; border-radius:999px; padding:6px 12px; font-size:13px; font-weight:700}
.chip.plum{background:var(--lilac-soft); color:var(--lilac2)}
.chip.mint{background:var(--mint-soft); color:#146B4A}
.sos{margin-top:16px; background:var(--red); color:#fff; border:0; border-radius:var(--r); min-height:60px; width:100%; font-weight:700; font-size:16px; box-shadow:0 10px 24px rgba(229,72,77,.28)}
.result{margin-top:16px}
.result .r{padding:14px 0; border-bottom:1px solid var(--line2)}
.result .r b{display:block; font-size:12.5px; color:var(--ink3); font-weight:700; margin-bottom:4px; text-transform:none}
.reply{background:var(--bg2); border-radius:12px; padding:12px; margin-top:8px; font-size:15px; display:flex; gap:10px; align-items:flex-start}
.reply span{flex:1}
.reply button{background:var(--card); border:1px solid var(--line); border-radius:8px; padding:6px 10px; font-size:13px; min-height:34px; font-weight:600}
.entry{padding:12px 0; border-bottom:1px solid var(--line2)}
.entry .d{font-size:12px; color:var(--ink3)}
.entry .t{margin-top:4px; font-size:15px}
.chat{display:flex; flex-direction:column; gap:8px; margin-top:14px; min-height:160px}
.msg{max-width:82%; padding:10px 14px; border-radius:16px; font-size:15px; line-height:1.4; animation:fadeUp .25s both}
.msg.them{align-self:flex-start; background:var(--card); box-shadow:var(--shadow-sm); border-bottom-left-radius:4px}
.msg.me{align-self:flex-end; background:var(--grad); color:#fff; border-bottom-right-radius:4px}
.chatbar{display:flex; gap:8px; margin-top:12px}
.chatbar .in{min-height:50px; padding:12px 14px}
.chatbar .btn{width:auto; min-height:50px; padding:0 18px}
.days{display:flex; flex-direction:column; gap:8px; margin-top:12px}
.dayrow{display:flex; gap:12px; align-items:center; background:var(--card); border-radius:12px; padding:12px; text-align:left; width:100%; border:0; box-shadow:var(--shadow-sm)}
.dayrow.done{opacity:.6}
.dayrow .n{font-family:var(--serif); color:var(--pink2); width:34px; flex:none; font-size:18px}
.dayrow .tx{flex:1; font-size:15px}
.dayrow .ck{width:24px; height:24px; border-radius:8px; border:2px solid var(--line); flex:none; display:flex; align-items:center; justify-content:center; color:#fff}
.dayrow .ck svg{width:14px; height:14px; opacity:0}
.dayrow.done .ck{background:var(--mint); border-color:var(--mint)}
.dayrow.done .ck svg{opacity:1}
.phase{font-family:var(--serif); font-size:17px; margin-top:20px; color:var(--ink2)}
.list .li{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 0; border-bottom:1px solid var(--line2); font-size:15px; text-decoration:none; color:var(--ink)}
.list .li:last-child{border:0}
.list .li .v{color:var(--ink3); font-size:14px; text-align:right}
.list button.li{width:100%; background:none; border:0; border-bottom:1px solid var(--line2); text-align:left; color:var(--lilac2); font-weight:600}
.list a.li{color:var(--lilac2); font-weight:600}
select.in{appearance:none; -webkit-appearance:none}
.section{margin-top:22px}
.section h3{font-size:18px; margin-bottom:8px}
.section p{color:var(--ink2); font-size:15px}

/* ---------- misc ---------- */
.toast{position:fixed; left:50%; bottom:calc(var(--sab) + 96px); transform:translateX(-50%); background:var(--ink); color:#fff; padding:10px 16px; border-radius:999px; font-size:14px; z-index:50; opacity:0; transition:opacity .2s; pointer-events:none; max-width:90vw; text-align:center}
.toast.show{opacity:1}
.overlay{position:fixed; inset:0; background:rgba(42,31,61,.5); z-index:40; display:flex; align-items:flex-end; justify-content:center; animation:fadeIn .2s both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.sheet{background:var(--card); width:100%; max-width:var(--maxw); border-radius:24px 24px 0 0; padding:22px 20px calc(var(--sab) + 22px); animation:fadeUp .3s both}
.sheet ol{padding-left:20px; color:var(--ink2); margin:12px 0 0; display:flex; flex-direction:column; gap:8px}
.centered{text-align:center}

/* ---------- home / legal pages ---------- */
.site{position:relative; z-index:1; max-width:920px; margin:0 auto; padding:calc(var(--sat) + 16px) 20px calc(var(--sab) + 40px)}
.site header{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:28px}
.site header nav{display:flex; gap:14px; font-size:14px; flex-wrap:wrap; justify-content:flex-end}
.site header nav a{color:var(--ink2); text-decoration:none; font-weight:600}
.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:26px; align-items:center}
.hero .btn{width:auto; display:inline-flex; padding:14px 26px; margin-top:22px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:16px}
.grid3 .card{padding:18px}
.grid3 .card i{display:block; width:34px; height:34px; color:var(--pink); background:var(--pink-soft); border-radius:10px; padding:7px; margin-bottom:10px}
.grid3 .card b{display:block; font-family:var(--serif); font-size:18px; margin-bottom:6px; font-weight:500}
.grid3 .card p{font-size:14px; color:var(--ink2)}
.site h2{font-size:clamp(26px,4vw,34px); margin-top:56px}
.site .plans{flex-direction:row}
.site .plans .plan{flex:1}
.faq{margin-top:16px; display:flex; flex-direction:column; gap:8px}
.faq details{background:var(--card); border-radius:var(--r-sm); padding:14px 16px; box-shadow:var(--shadow-sm)}
.faq summary{font-weight:700; cursor:pointer}
.faq p{margin-top:8px; color:var(--ink2); font-size:15px}
.site footer{margin-top:60px; padding-top:20px; border-top:1px solid var(--line); font-size:13px; color:var(--ink3); display:flex; flex-direction:column; gap:6px}
.site footer a{color:var(--ink2)}
.legal-doc{max-width:720px}
.legal-doc h2{margin-top:36px; font-size:26px}
.legal-doc p,.legal-doc li{color:var(--ink2); font-size:15px; line-height:1.6}
.placeholder{background:var(--amber-soft); border-radius:8px; padding:2px 6px; color:#6A4500}
@media (max-width:760px){ .hero{grid-template-columns:1fr} .grid3{grid-template-columns:1fr} .site .plans{flex-direction:column} .site header nav{gap:10px; font-size:13px} }
@media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important} .wheel{transition-duration:1.2s !important} }

/* ---------- v3 additions ---------- */
.backbar{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.overlay.top{align-items:flex-start}
.drawer{background:var(--card); width:100%; max-width:var(--maxw); border-radius:0 0 24px 24px; padding:calc(var(--sat) + 14px) 18px 18px; animation:fadeUp .25s both; box-shadow:var(--shadow)}
.drawhead{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
.drawitem{display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; background:none; border:0; border-bottom:1px solid var(--line2); padding:14px 0; font-size:16px; font-weight:600; text-align:left; color:var(--ink)}
.drawitem .v{color:var(--ink3); font-size:13px; font-weight:500; max-width:55%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.drawitem select.in.sm{width:auto; min-height:38px; padding:6px 10px; font-size:14px; box-shadow:none}
.drawfoot{font-size:12px; color:var(--ink3); margin-top:14px}
.drawfoot a{color:var(--ink3)}
details.danger{margin-top:10px; font-size:12px; color:var(--ink3)}
details.danger summary{cursor:pointer; list-style:none; opacity:.7}
details.danger summary::-webkit-details-marker{display:none}
details.danger .btn{font-size:13px}
.offer{display:flex; flex-direction:column; gap:4px; width:100%; text-align:left; background:var(--bg2); border:2px solid transparent; border-radius:var(--r); padding:14px; margin-top:10px; color:var(--ink)}
.offer b{font-size:16px} .offer span{font-size:13.5px; color:var(--ink2)}
.offer.pause{background:linear-gradient(135deg,var(--pink-soft),var(--lilac-soft)); border-color:var(--pink)}
.offer.pause b{color:var(--pink2); font-size:18px}
.period{display:grid; grid-template-columns:1fr auto; gap:6px 10px; padding:12px 0; border-bottom:1px solid var(--line2); position:relative; align-items:center}
.period .pr{font-family:var(--serif); font-size:18px}
.period .pacts{grid-column:1 / -1; display:flex; gap:8px; align-items:center}
.period .mini{background:var(--card); border:1px solid var(--line); border-radius:8px; padding:6px 10px; font-size:12.5px; font-weight:600; color:var(--ink2)}
.period .pacts .iconbtn{margin-left:auto; width:34px; height:34px}
.pmenu{grid-column:1 / -1; background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); padding:6px; box-shadow:var(--shadow); animation:fadeUp .2s both}
.pmenu button{width:100%; background:none; border:0; text-align:left; padding:10px 12px; font-size:14px; color:var(--ink); border-radius:8px}
.pmenu button:active{background:var(--bg2)}
.pmenu .small{display:block; padding:8px 12px}
.stages{display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
.stage{display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 4px; border-radius:var(--r-sm); background:var(--bg2); font-size:11.5px; text-align:center; color:var(--ink2)}
.stage b{width:26px; height:26px; border-radius:50%; background:var(--card); display:flex; align-items:center; justify-content:center; font-family:var(--serif)}
.stage.on{background:var(--grad); color:#fff}
.stage.on b{background:rgba(255,255,255,.25); color:#fff}
.howlist{padding-left:20px; margin:8px 0 0; color:var(--ink2); font-size:14.5px; display:flex; flex-direction:column; gap:6px}
.example{font-style:italic; color:var(--ink2); font-size:14px; background:var(--card); border-radius:var(--r-sm); padding:10px 12px; margin-top:6px; border-left:3px solid var(--peach)}
.feltrow{display:flex; flex-wrap:wrap; gap:8px}
.feltchip{background:var(--card); border:1.5px solid var(--line); border-radius:999px; padding:8px 14px; font-size:14px; font-weight:600; color:var(--ink2); min-height:40px}
.feltchip.sel{background:var(--lilac-soft); border-color:var(--lilac); color:var(--lilac2)}
.jentry{padding:12px 0; border-bottom:1px solid var(--line2)}
.jentry .d{font-size:12px; color:var(--ink3); display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.jentry .d .chip{font-size:11px; padding:3px 8px}
.jentry .t{margin-top:6px; font-size:15px}
.jentry .q{margin-top:4px; font-style:italic; color:var(--ink2); font-size:14px; border-left:2px solid var(--line); padding-left:8px}
.coach{align-self:flex-end; max-width:82%; font-size:12.5px; padding:6px 10px; border-radius:10px; margin-top:-2px}
.coach.good{background:var(--mint-soft); color:#146B4A}
.coach.warn{background:var(--amber-soft); color:#8A5A00}
.badges{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px}
.badge{display:flex; flex-direction:column; align-items:center; gap:6px; background:var(--card); border-radius:var(--r-sm); padding:12px 6px; text-align:center; box-shadow:var(--shadow-sm); opacity:.55}
.badge i{width:38px; height:38px; border-radius:50%; background:var(--line2); display:flex; align-items:center; justify-content:center; color:var(--ink3); padding:9px}
.badge i svg{width:100%; height:100%}
.badge b{font-size:12px; line-height:1.2} .badge span{font-size:11px; color:var(--ink3)}
.badge.on{opacity:1}
.badge.on i{background:var(--grad); color:#fff}
.todaycard{border:2px solid var(--pink)}
.slider{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:10px 2px 14px; margin:0 -20px; padding-left:20px; padding-right:20px; -webkit-overflow-scrolling:touch}
.slider::-webkit-scrollbar{display:none}
.tcard{flex:0 0 82%; scroll-snap-align:start; background:var(--card); border-radius:var(--r); padding:14px; box-shadow:var(--shadow)}
.tcard p{font-family:var(--serif); font-size:16.5px; line-height:1.4; margin:10px 0 6px; color:var(--ink)}
.thead{display:flex; align-items:center; gap:8px}
.tav{width:32px; height:32px; border-radius:50%; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px}
.tname{font-weight:700; font-size:14px; flex:1}
.vbadge{display:inline-flex; align-items:center; gap:4px; background:var(--mint-soft); color:#146B4A; font-size:11.5px; font-weight:700; padding:4px 8px; border-radius:999px}
.vbadge svg{width:12px; height:12px}

/* ---------- v4: paywall + checkout + auth ---------- */
.offerbar{position:sticky; top:calc(var(--sat) + 56px); z-index:5; display:flex; align-items:center; justify-content:center; gap:8px; background:var(--amber-soft); color:#4A3000; border-radius:var(--r-sm); padding:10px 14px; font-size:14.5px; font-weight:600; box-shadow:var(--shadow-sm)}
.offerbar b{font-variant-numeric:tabular-nums; font-size:16px}
.offerbar .hg{font-size:16px}
.gift{width:150px; margin:18px auto 6px; animation:float 5s ease-in-out infinite}
.headline s{color:var(--red); text-decoration-thickness:3px}
.headline em{font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.grad{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.pcard{position:relative; width:100%; text-align:left; background:var(--card); border:2px solid var(--line2); border-radius:var(--r); padding:0; overflow:hidden; box-shadow:var(--shadow); transition:border-color .15s, transform .12s}
.pcard:active{transform:scale(.99)}
.pcard.sel{border-color:var(--pink)}
.pcard .prow{display:flex; align-items:center; gap:14px; padding:18px 16px}
.pcard .radio{width:26px; height:26px; border-radius:50%; border:2px solid var(--line); background:var(--bg2); flex:none; position:relative}
.pcard.sel .radio{border-color:var(--pink); background:var(--pink-soft)}
.pcard.sel .radio::after{content:""; position:absolute; inset:6px; border-radius:50%; background:var(--pink)}
.pcard .pinfo{flex:1; display:flex; flex-direction:column; gap:4px}
.pcard .pinfo b{font-size:19px; font-family:var(--serif); font-weight:500}
.pcard .pprice{font-size:17px; font-weight:700; color:var(--pink2)}
.pcard .pprice s{color:var(--ink3); font-weight:500; margin-right:2px}
.pcard .offtag{display:inline-block; background:var(--ink); color:#fff; font-size:12px; border-radius:8px; padding:4px 8px; margin-left:4px; vertical-align:middle}
.pcard .pday{display:flex; flex-direction:column; align-items:center; gap:2px; flex:none}
.pcard .pday b{background:var(--amber-soft); color:var(--ink); font-size:19px; font-family:var(--serif); padding:8px 14px; border-radius:12px}
.pcard .pday span{font-size:12px; color:var(--ink3)}
.pcard .bestbar{display:block; background:var(--grad); color:#fff; text-align:center; font-size:13px; font-weight:800; letter-spacing:.04em; padding:6px}
.pcard.best{border-color:var(--pink)}
.guarantee{display:flex; align-items:center; gap:12px; background:var(--amber-soft); border:1px solid #F5DEA8; border-radius:var(--r); padding:14px 16px; margin-top:16px; font-size:16px}
.guarantee.col{flex-direction:column; align-items:flex-start; gap:8px}
.guarantee.col > div{display:flex; align-items:center; gap:12px}
.seal{width:48px; height:48px; border-radius:50%; background:var(--mint); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; flex:none; box-shadow:0 0 0 4px var(--mint-soft)}
.inclist{display:flex; flex-direction:column; gap:12px; margin-top:20px}
.inc{display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--ink)}
.inc i{width:44px; height:44px; flex:none; background:var(--amber-soft); border-radius:12px; padding:11px; color:var(--pink2)}
.inc i svg{width:100%; height:100%}
.result-line{font-family:var(--serif); font-size:22px; color:var(--pink2)}
.press{display:flex; flex-wrap:wrap; gap:18px; justify-content:center; align-items:center; margin-top:14px; filter:grayscale(1); opacity:.75}
.press img{height:34px; width:auto}
.bignum{font-family:var(--serif); font-size:40px}
.stars{margin-top:6px} .star{color:var(--line); font-size:16px} .star.on{color:var(--amber)}
.paybox{background:var(--bg2); border-radius:var(--r); padding:16px; margin-top:18px}
.payhead{display:flex; align-items:center; gap:10px}
.payhead .ok{width:26px; height:26px; border-radius:50%; background:var(--mint); color:#fff; display:inline-flex; align-items:center; justify-content:center; padding:5px}
.payhead .ok svg{width:100%; height:100%}
.payhead b{flex:1; font-size:16px}
.brands{display:flex; gap:4px; align-items:center}
.brands i{display:inline-flex; align-items:center; justify-content:center; height:18px; min-width:30px; border-radius:3px; font-size:9px; font-weight:900; font-style:normal; color:#fff}
.brands .visa{background:#1A1F71} .brands .amex{background:#2E77BC}
.brands .mc{width:30px; background:linear-gradient(90deg,#EB001B 0 50%,#F79E1B 50% 100%); border-radius:9px}
.saved{background:var(--mint); color:#fff; border-radius:var(--r-sm); padding:12px 14px; font-weight:600; margin-top:14px; font-size:15px}
.summary.flat{background:transparent; box-shadow:none; padding:6px 0 0; margin-top:4px}
.summary .li.red{color:var(--red)}
.summary .li.total{border-top:2px solid var(--line); padding-top:12px; font-size:17px}
.paypal{width:100%; min-height:52px; border:0; border-radius:var(--r-sm); background:#FFC439; color:#003087; font-weight:800; font-style:italic; font-size:19px; margin-top:10px; display:flex; align-items:center; justify-content:center}
.paypal .pal{color:#009CDE}
.gp{display:inline-flex; width:20px; height:20px; border-radius:50%; background:#fff; color:#4285F4; align-items:center; justify-content:center; font-weight:800; font-size:13px; margin-right:6px}
.safe{display:flex; align-items:center; gap:12px; margin-top:22px; font-size:15px}
.safe .shield{width:46px; height:46px; color:var(--mint)} .safe .shield svg{width:100%; height:100%}
.safe b{font-size:18px}
.infos{display:flex; flex-direction:column; gap:12px; margin-top:16px}
.info{display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--ink2)}
.info .ic{width:22px; height:22px; color:var(--ink3); margin-top:1px}
.authbox{margin-top:10px}
.authbox .tabs{display:flex; background:var(--line2); border-radius:999px; padding:4px; margin-bottom:18px}
.authbox .tabs a{flex:1; text-align:center; padding:10px; border-radius:999px; text-decoration:none; color:var(--ink2); font-weight:700}
.authbox .tabs a.on{background:var(--card); color:var(--ink); box-shadow:var(--shadow-sm)}

/* ---------- v5: plan tags, upgrade, reactivate ---------- */
.ptag{font-family:var(--sans); font-size:11.5px; font-weight:700; color:var(--ink3); letter-spacing:.01em; white-space:nowrap}
.pcard .pinfo b .ptag{display:block; margin-top:2px}
.upbtn{display:inline-flex; align-items:center; gap:6px; flex:none; border:0; border-radius:999px; padding:9px 14px; background:var(--grad); color:#fff; font-weight:800; font-size:13.5px; box-shadow:0 6px 16px rgba(240,82,126,.3); animation:glow 2.2s ease-in-out infinite}
.reactbar{display:flex; align-items:center; gap:12px; background:var(--amber-soft); border:1px solid #F5DEA8; border-radius:var(--r); padding:12px 14px; margin-bottom:14px; font-size:14px; color:#4A3000; font-weight:600}
.reactbar span{flex:1}
.reactbar .btn{flex:none; min-height:40px}
.upcard{background:var(--card); border:2px solid var(--line2); border-radius:var(--r); margin-top:14px; overflow:hidden; box-shadow:var(--shadow)}
.upcard.best{border-color:var(--pink)}
.upcard .bestbar{display:block; background:var(--grad); color:#fff; text-align:center; font-size:12.5px; font-weight:800; letter-spacing:.04em; padding:5px}
.upin{padding:14px 16px}
.upname{display:block; font-family:var(--serif); font-weight:500; font-size:19px; margin-bottom:6px}
.upname .ptag{margin-left:4px}
.uprow{display:flex; justify-content:space-between; font-size:14px; color:var(--ink2); padding:4px 0}
.uprow.tot{border-top:1px solid var(--line2); margin-top:4px; padding-top:8px; color:var(--ink); font-size:15px}
.uprow.tot b{font-family:var(--serif); font-size:20px; color:var(--pink2)}
.drawitem .v .ptag{font-size:11px}
.plan .name .ptag{display:block}

/* upgrade cards: compact, per-day emphasis */
.upcard{margin-top:10px}
.upcard .bestbar{font-size:11.5px; padding:4px}
.upin{padding:10px 14px 12px}
.uptop{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px}
.uptop .upname{margin:0; font-size:17px}
.upday{display:flex; flex-direction:column; align-items:center; flex:none}
.upday b{background:var(--amber-soft); color:var(--ink); font-family:var(--serif); font-size:24px; line-height:1; padding:8px 12px; border-radius:12px}
.upday span{font-size:11.5px; color:var(--ink3); margin-top:3px}
.uprow{font-size:13px; padding:2px 0}
.uprow.tot{padding-top:6px; font-size:14px}
.uprow.tot b{font-size:17px}
.btn.upgo{min-height:46px; font-size:15px; margin-top:10px; padding:10px 14px}