@font-face{font-family:Inter;src:url(fonts/inter-var.woff2) format('woff2');font-weight:100 900;font-display:swap}
:root{
  --ink:#2b2122;--ink2:#5f5551;--grey:#8a807b;--sheet:#fcf8f1;--cream:#f6ede3;--sel:#f0eae2;--line:#e3dfd8;
  --btn:#2b2122;--btn-off:#c8c5c0;--red:#e0605c;--green:#29ac76;--mint:#edeeda;
  --font:-apple-system,"SF Pro Text","SF Pro Display",Inter,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#2a1d18;overflow:hidden}
body{font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;color:inherit;border:0;outline:0;background:none}
#wrap{position:fixed;inset:0;display:flex;justify-content:center;align-items:flex-start}
#stage{position:relative;flex:none;width:440px;height:956px;transform-origin:top center;overflow:hidden;background:var(--sheet)}
.scr{position:absolute;inset:0;overflow:hidden}
.abs{position:absolute}
.fadein{animation:fin .28s ease-out both}
.fadeout{animation:fout .16s ease-in both}
@keyframes fin{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:none}}
@keyframes fout{from{opacity:1}to{opacity:0;filter:blur(3px)}}

/* ---------- quiz chrome ---------- */
.quiz{background:linear-gradient(180deg,#a79e8f 0%,#a6988a 10%,#958374 31%,#86705f 52%,#765d4d 73%,#6a4b3b 94%,#664736 100%)}
.sheet{position:absolute;left:16px;right:16px;top:70px;bottom:16px;background:var(--sheet);border-radius:12px 12px 38px 38px;overflow:hidden}
.hdr{position:absolute;left:0;right:0;top:0;height:63px;border-bottom:1px solid #f1ece5;background:var(--sheet);z-index:3}
.back{position:absolute;left:8px;top:15px;width:40px;height:34px;display:flex;align-items:center;justify-content:center}
.back svg{width:16px;height:13px}
.sect{position:absolute;left:0;right:0;top:18px;text-align:center;font-size:15.5px;letter-spacing:-.1px;line-height:20px}
.prog{position:absolute;left:156px;top:44.3px;width:96px;height:2px;display:flex;gap:2px}
.prog i{flex:1;background:#c8c4bd;position:relative;overflow:hidden}
.prog i b{position:absolute;left:0;top:0;bottom:0;background:#100806;transition:width .3s}
.skip{position:absolute;right:5px;top:3px;font-size:17px;padding:14px 10px;min-height:48px}
.qbody{position:absolute;left:0;right:0;top:63px;bottom:0;overflow-y:auto;overscroll-behavior:contain;padding:0 16px 120px;scrollbar-width:none}
.qbody::-webkit-scrollbar{display:none}
.qt{font-size:27.5px;line-height:31.67px;letter-spacing:-.45px;text-align:center;font-weight:400;padding:0 8px;margin-top:33px;text-wrap:balance}
.qs{font-size:15.5px;line-height:19.33px;color:#4c4740;text-align:center;margin-top:6px;padding:0 10px;text-wrap:balance}
.opts{margin-top:32px;display:flex;flex-direction:column;gap:8.33px}
.opt{position:relative;flex-shrink:0;display:flex;align-items:center;min-height:55.67px;padding:9px 52px 9px 14.8px;border:1px solid var(--line);border-radius:10px;background:var(--sheet);text-align:left;width:100%;transition:background .08s}
.opt.two{min-height:70px}
.opt.three{min-height:86px}
.opt .t{display:block;font-size:15.8px;line-height:21px;letter-spacing:-.15px}
.opt .s{display:block;max-width:292px;font-size:13.6px;line-height:16px;color:#5c564e;font-weight:370;margin-top:2px;letter-spacing:-.1px}
.opt.on{background:var(--sel);border-color:var(--sel)}
.mark{position:absolute;right:17px;top:50%;width:20px;height:20px;margin-top:-10px;border:1px solid #cbc5bf;border-radius:50%}
.multi .mark{border-radius:3px}
.opt.on .mark{background:#1d1517;border-color:#1d1517}
.opt.on .mark:after{content:"";position:absolute;left:6.5px;top:3.5px;width:4px;height:8px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.grid{margin-top:31.67px;display:grid;grid-template-columns:1fr 1fr;gap:8px 8px}
.gopt{position:relative;height:200px;border-radius:10px;overflow:hidden;background:#ddd6ce;text-align:left;box-shadow:inset 0 0 0 1px #e3ddd5}
.gopt .ph{position:absolute;left:0;right:0;top:0;height:134px;background:#e3ddd5 center/cover no-repeat}
.gopt:before{content:"";position:absolute;left:3px;right:3px;top:138px;bottom:4px;border-radius:7px;background:var(--sheet)}
.gopt .t{position:absolute;left:15px;top:147.3px;min-height:40px;display:flex;align-items:center;font-size:16.5px;line-height:19px;max-width:122px;font-size:15.5px}
.gopt .mark{top:157.3px;margin-top:0}
.gopt.on:before{background:var(--sel)}
.gopt.on .mark{background:#1d1517;border-color:#1d1517}
.gopt.on .mark:after{content:"";position:absolute;left:6.5px;top:3.5px;width:4px;height:8px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.fade{position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(rgba(252,248,241,0),var(--sheet) 34%);pointer-events:none;z-index:2}
.next{position:absolute;left:16px;right:16px;bottom:calc(20px + var(--kb, 0px));height:48px;border-radius:8px;background:var(--btn);color:#fff;font-size:15px;letter-spacing:1.6px;font-weight:500;z-index:4;transition:background .12s}
.next[disabled]{background:var(--btn-off);color:#8a837e;cursor:default}
.next:active:not([disabled]){background:#4a3f3d}
.field{margin-top:32px;height:56px;border:1.3px solid #453b3c;border-radius:10px;display:flex;align-items:center;padding:0 15px;font-size:17px}
.field input{width:100%;font-size:17px;height:100%}
.field input::placeholder,.field .ph{color:#7a706b}
.info{margin-top:12px;background:var(--sel);border-radius:10px;padding:16px 15px 15px;font-size:14.5px;line-height:19px}
.info b{display:block;font-weight:400;color:var(--ink);margin-bottom:3px}
.info span{color:var(--ink2)}
.info.mint{background:var(--mint)}
/* wheel */
.wheel{position:absolute;left:16px;right:16px;bottom:110px;height:193px;display:flex;justify-content:center;z-index:3} /* bottom-anchored: on short phones it stays above NESTE (was top:575 = off-screen) */
.wheel .band{position:absolute;left:0;right:0;top:79px;height:35px;border-radius:17.5px;background:#f0ece7}
.wcol{position:relative;height:177px;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none;-webkit-mask:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.wcol::-webkit-scrollbar{display:none}
.wcol div{height:31.5px;line-height:31.5px;scroll-snap-align:center;text-align:center;font-size:20px;color:#3a302e;white-space:nowrap}
.wpad{height:72.5px!important}
.wunit{position:relative;display:flex;flex-direction:column;justify-content:center;font-size:22px;color:#3a302e}
.wunit span{height:40px;line-height:40px;text-align:center}
.wunit span.off{color:#9a908b}

/* ---------- photo screens ---------- */
.photo{background:#5b3f35;color:#fff}
.bgimg{position:absolute;background:#7b5a4c center/cover no-repeat}
.pback{position:absolute;left:21px;top:79px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;opacity:.75}

.pt{font-size:27.5px;line-height:32px;letter-spacing:-.4px;font-weight:400}
h1,h2,h3{font-weight:400}
.pbtn{position:absolute;left:16px;right:16px;height:48px;border-radius:8px;font-size:15px;letter-spacing:2.1px;background:var(--sheet);color:var(--ink)}
.pbtn.ghost{background:#574b44;color:#fff}
.rule{position:absolute;left:16px;right:16px;height:1px;background:rgba(255,255,255,.22)}

/* ---------- loader ---------- */
.loader{background:linear-gradient(180deg,#795546 0%,#714e40 10%,#684436 31%,#5a372e 52%,#4d2d27 63%,#3e241e 94%)}
.lrow{position:absolute;left:24px;right:24px;font-size:16px}
.lrow .p{position:absolute;right:0;top:2px;font-size:15.5px}
.lbar{position:absolute;left:24px;right:24px;height:3px;border-radius:2px;background:rgba(255,255,255,.18);overflow:hidden}
.lbar b{display:block;height:100%;width:0;background:#fffffa;border-radius:2px}
.rcard{position:absolute;left:16px;right:16px;top:712px;height:174px;border-radius:12px;background:rgba(84,58,50,.72)}

/* ---------- paywall & upsells ---------- */
.pw{background:var(--sheet);overflow-y:auto;scrollbar-width:none}
.pw::-webkit-scrollbar{display:none}
.plan{position:absolute;left:16px;right:16px;height:69px;border:1px solid var(--line);border-radius:12px;padding:15px 16px;text-align:left}
.plan.on{background:var(--sel);border-color:var(--sel)}
.plan .t{font-size:16.5px;line-height:20px;display:block}
.plan .s{font-size:13.6px;line-height:18px;color:var(--ink2);display:block;margin-top:2px}
.plan .mark{right:18px}
.plan.on .mark{background:#1d1517;border-color:#1d1517}
.plan.on .mark:after{content:"";position:absolute;left:6.5px;top:3.5px;width:4px;height:8px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.dark{position:absolute;height:48px;border-radius:8px;background:var(--btn);color:#fff;font-size:14px;letter-spacing:1.8px;font-weight:500}
.fine{position:absolute;left:16px;right:16px;text-align:center;font-size:12px;line-height:17px;color:#5f5551}
.fine a,.u{color:inherit;text-decoration:underline;text-underline-offset:2px}
.x{position:absolute;left:9px;top:63px;width:44px;height:44px;z-index:6}
.x:before,.x:after{content:"";position:absolute;left:12px;top:21px;width:20px;height:1.5px;background:#9a918c;transform:rotate(45deg)}
.x:after{transform:rotate(-45deg)}
.red{color:var(--red)}
.sticky{position:absolute;left:20px;right:20px;bottom:61px;height:47px;border-radius:8px;background:var(--btn);color:#fff;font-size:16px;z-index:5}
.long{position:absolute;inset:0;overflow-y:auto;scrollbar-width:none;padding-bottom:140px}
.long::-webkit-scrollbar{display:none}
.blk{margin:0 20px}
.hcard{background:var(--cream);border-radius:16px}
.bul li{list-style:none;position:relative;padding-left:14px;font-size:15.5px;line-height:24px;color:#6a605c}
.bul li:before{content:"·";position:absolute;left:2px}
.pbox{border:1px solid var(--line);border-radius:12px;text-align:center;padding:18px 24px 30px;background:var(--sheet)}
.toast{position:absolute;left:30px;right:30px;bottom:130px;background:#2b2122;color:#fff;border-radius:10px;padding:12px 14px;font-size:14px;z-index:20;text-align:center}
/* splash → wordmark intro (WoodPlans pattern: letters rise in a wave, hold, collapse) */
.wm{position:absolute;left:0;right:0;top:420px;text-align:center;font-size:52px;line-height:60px;letter-spacing:-1.4px;font-weight:450;color:var(--ink);white-space:nowrap;transition:transform .16s ease-in,opacity .16s ease-in}
.wm span{display:inline-block;opacity:0;transform:translateY(34px) rotate(8deg)}
.wm.go span{animation:wmIn .42s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes wmIn{0%{opacity:0;transform:translateY(34px) rotate(8deg)}35%{opacity:1}100%{opacity:1;transform:none}}
.wm.out{transform:scale(.2);opacity:0}
.wm-tag{position:absolute;left:0;right:0;top:486px;text-align:center;font-size:18px;color:var(--ink2);opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.wm-tag.go{opacity:1;transform:none}.wm-tag.out{opacity:0;transition:opacity .16s}
@media (prefers-reduced-motion:reduce){.wm span{opacity:1;transform:none}.wm.go span{animation:none}}

.wcol{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none}.wcol:active{cursor:grabbing}.wcol:focus-visible{box-shadow:inset 0 0 0 2px #c9b8a8;border-radius:8px}
.opt,.gopt{-webkit-tap-highlight-color:transparent}
/* short phones: photo screens scroll, buttons pinned (fitShort in app.js) */
.shortbox{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}.shortbox::-webkit-scrollbar{display:none}
.shortin{position:relative;height:956px}
.shortfade{position:absolute;left:0;right:0;bottom:0;pointer-events:none;background:linear-gradient(rgba(60,42,36,0),rgba(60,42,36,.92) 40%);z-index:2}
.scr.photo > .pbtn{z-index:3}
/* tap targets: the centred section label and the motivation quote never sit on top of the back arrow */
.sect{pointer-events:none}.back{z-index:2}
[data-mq]{pointer-events:none}.pback{z-index:5}

/* picker (site/picker.js): cylinder rows, transform only */
.pk-col{position:absolute;top:0;height:193px;perspective:520px;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;outline:none;-webkit-mask:linear-gradient(transparent,#000 24%,#000 76%,transparent);mask:linear-gradient(transparent,#000 24%,#000 76%,transparent);-webkit-tap-highlight-color:transparent}
.pk-col:active{cursor:grabbing}.pk-col.pk-static{cursor:default;pointer-events:none}
.pk-col:focus-visible{box-shadow:inset 0 0 0 2px #c9b8a8;border-radius:10px}
.pk-row{position:absolute;left:0;right:0;top:0;height:32px;line-height:32px;text-align:center;font-size:22px;color:#8d8480;white-space:nowrap;font-variant-numeric:tabular-nums;transform-origin:50% 50%}
/* pressed state (iOS feel): options, plans and buttons dip to 0.98 */
.opt,.gopt,.plan,.pbtn,.dark,.next,.sticky{transition:transform .12s cubic-bezier(.2,.8,.2,1),background .12s}
.opt:active,.gopt:active,.plan:active,.pbtn:active,.dark:active:not([disabled]),.next:active:not([disabled]),.sticky:active{transform:scale(.98)}
@media (prefers-reduced-motion:reduce){.opt,.gopt,.plan,.pbtn,.dark,.next,.sticky{transition:none}.opt:active,.gopt:active,.plan:active,.pbtn:active,.dark:active,.next:active,.sticky:active{transform:none}}
.pback svg{width:18px;height:15px;stroke-width:1.5}
.long{padding-bottom:180px}
.sheet.nonext .fade{height:28px}

/* short / scaled phones (R-SE): absolute screens scroll instead of clipping; controls >= 44 pt after scaling */
.scr.pw,.scr.loader{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}.scr.pw::-webkit-scrollbar{display:none}
.scr.pw:has(> .long){overflow:hidden}
#stage.small .next,#stage.small .dark,#stage.small .pbtn,#stage.small .sticky{height:54px}
#stage.small .back,#stage.small .pback,#stage.small .x{width:54px;height:54px}
#stage.small .back{left:2px;top:6px}
#stage.small .skip{padding:16px 10px;min-height:54px;top:0;right:4px}
#stage.small .fine a,#stage.small a.u,#stage.small .u{display:inline-block;padding:14px 2px;margin:-14px 0}
.info.tight{padding:9px 14px;margin-top:8px}.info.tight b{margin:0}.info.tight span{display:none}.info.gone{display:none}
.wheel{bottom:115px}.pk-row{letter-spacing:-.02em}