

:root{
 --g:#46A92E;--g2:#7AC943;--lime:#B8DF55;--ink:#17201A;--muted:#727B72;
 --paper:#FBFCF7;--line:#E3EADD;--soft:#F0F6E9;--white:#fff;
 --shadow:0 12px 32px rgba(49,92,39,.09);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body,#app{margin:0;min-height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink)}
body{background:#EAF1E4}
button,input{font:inherit}
button{color:inherit}
.phone{
 width:min(100%,430px);min-height:100dvh;margin:0 auto;position:relative;overflow:hidden;
 background:
 radial-gradient(70% 36% at 100% 0%,rgba(203,235,164,.36),transparent 70%),
 linear-gradient(180deg,#FFFDF8 0%,#FAFCF5 52%,#F6FAF1 100%);
}
.page{min-height:100dvh;padding:calc(14px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;animation:enter .25s ease}
@keyframes enter{from{opacity:.25;transform:translateX(10px)}to{opacity:1;transform:none}}
.nav{height:30px;display:flex;align-items:center;gap:11px}
.back{border:0;background:none;font-size:30px;line-height:1;padding:0 4px 3px 0}
.track{height:5px;background:#E5EBDF;border-radius:9px;overflow:hidden;flex:1}
.track>i{height:100%;display:block;background:linear-gradient(90deg,#4BAC31,#80C84B);border-radius:9px}
.step{font-size:11px;color:#818981;min-width:30px;text-align:right}
.main{flex:1;padding-top:21px}
.center{text-align:center}
.logo{font-size:38px;font-weight:900;font-style:italic;letter-spacing:-2px;color:var(--g);margin-top:12px}
.kicker{font-size:13px;color:#566257;margin-top:2px}
h1,h2{letter-spacing:-.75px;margin:0;color:#142018}
h1{font-size:31px;line-height:1.08}
h2{font-size:27px;line-height:1.1}
.sub{font-size:14px;color:var(--muted);line-height:1.45;margin:9px auto 0;max-width:340px}
.hero-title{text-align:left;font-size:34px;margin-top:22px}
.mascot-hero{display:block;width:205px;height:205px;object-fit:contain;margin:8px auto -2px;filter:drop-shadow(0 16px 18px rgba(59,134,42,.13))}
.mascot-md{width:130px;height:130px;object-fit:contain}
.mascot-sm{width:76px;height:76px;object-fit:contain}
.leaf-bg:after,.leaf-bg:before{content:"";position:absolute;border-radius:100% 0 100% 0;background:#D9EDBC;opacity:.45;z-index:0}
.leaf-bg:after{width:150px;height:85px;right:-62px;top:120px;transform:rotate(-28deg)}
.leaf-bg:before{width:130px;height:72px;left:-65px;bottom:150px;transform:rotate(25deg)}
.main,.bottom,.nav{position:relative;z-index:1}
.feature-list{display:grid;gap:10px;margin:13px 0 0}
.feature{font-size:14px;display:flex;gap:9px;align-items:center}.ok{color:var(--g);font-weight:900}
.bottom{margin-top:auto;padding-top:18px}
.primary{height:56px;width:100%;border:0;border-radius:17px;color:#fff;background:linear-gradient(135deg,#55B936,#329A2B);font-weight:800;font-size:16px;box-shadow:0 10px 22px rgba(54,153,42,.22)}
.micro{font-size:11px;color:#8A9288;text-align:center;margin-top:8px}
.cards{display:grid;gap:11px;margin-top:25px}
.choice{border:1.5px solid var(--line);background:rgba(255,255,255,.94);border-radius:18px;min-height:75px;padding:12px 13px;display:flex;align-items:center;gap:13px;text-align:left;box-shadow:0 5px 14px rgba(42,68,36,.035)}
.choice.selected{border-color:#67B64B;background:#F1FAEA;box-shadow:0 0 0 2px rgba(103,182,75,.08)}
.icon{width:46px;height:46px;border-radius:15px;background:#F0F7EA;display:grid;place-items:center;font-size:24px;flex:0 0 auto}
.copy{flex:1}.copy b{display:block;font-size:15px;margin-bottom:4px}.copy small{display:block;font-size:11px;line-height:1.25;color:#7D857D}
.chev{font-size:22px;color:#7EA96D}
.motivate-art{height:300px;margin:20px -20px 0;position:relative;display:grid;place-items:center;background:linear-gradient(180deg,rgba(238,248,221,.2),#EAF5D9);overflow:hidden}
.motivate-art:before{content:"";position:absolute;left:-8%;right:-8%;bottom:-35px;height:160px;background:#D8EDB9;border-radius:50% 50% 0 0/70% 70% 0 0}
.quote{position:absolute;right:23px;top:30px;transform:rotate(-7deg);font-size:14px;color:#4B8F35;font-weight:700}
.pills{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:16px}
.pill{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 5px;text-align:center;font-size:11px;box-shadow:var(--shadow)}
.pill span{display:block;font-size:22px;margin-bottom:5px}
.gender-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
.gender-card{border:1.5px solid var(--line);border-radius:20px;background:#fff;padding:20px 10px 17px;text-align:center}
.gender-card:nth-child(1){background:#FFF4F1}.gender-card:nth-child(2){background:#F1F7FC}
.gender-card .face{font-size:65px;display:block;margin-bottom:8px}.gender-card b{font-size:16px}
.gender-card.selected{border-color:#67B64B;box-shadow:0 0 0 2px rgba(103,182,75,.18)}
.wheel{width:170px;margin:23px auto 12px;text-align:center;line-height:43px;font-size:18px;color:#AEB4AC}
.wheel strong{display:block;color:var(--ink);font-size:30px;background:#EFF5E9;border-radius:15px}
.age-readout{font-size:30px;font-weight:900;letter-spacing:-1px;margin:18px 0 2px}
.age-readout small{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0}
.picker{position:relative;width:230px;margin:24px auto 0;height:220px}
.wheel-years{position:relative;height:220px;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none;-ms-overflow-style:none;text-align:center;padding:88px 0}
.wheel-years.locked{overflow:hidden;touch-action:none;pointer-events:none}
.wheel-years::-webkit-scrollbar{display:none}
.yopt{height:44px;line-height:44px;font-size:23px;font-weight:700;color:#B7BEB4;scroll-snap-align:center;transition:color .15s,transform .15s}
.yopt.on{color:var(--g);font-size:28px;font-weight:900;transform:scale(1.06)}
.picker-sel{position:absolute;left:0;right:0;top:88px;height:44px;border-top:1.5px solid #CFE0B8;border-bottom:1.5px solid #CFE0B8;border-radius:12px;background:rgba(184,223,85,.08);pointer-events:none}
.picker-mask{position:absolute;left:0;right:0;top:0;height:220px;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(250,252,245,.96) 0%,rgba(250,252,245,.5) 32%,rgba(250,252,245,0) 42%,rgba(250,252,245,0) 58%,rgba(250,252,245,.5) 68%,rgba(250,252,245,.96) 100%)}
.range{width:100%;accent-color:var(--g);margin:20px 0}
.segment{width:190px;margin:23px auto 0;padding:3px;display:flex;background:#EDF2E8;border-radius:15px}
.segment button{flex:1;border:0;background:transparent;border-radius:12px;padding:9px;color:#768074}
.segment .on{background:var(--g);color:#fff;font-weight:800}
.number{font-size:58px;font-weight:900;letter-spacing:-2px;margin:25px 0 0}
.number small{font-size:17px;letter-spacing:0}
.height-box{display:flex;justify-content:center;gap:22px;margin-top:25px}
.height-box div{font-size:48px;font-weight:900;background:#F0F5EB;border-radius:18px;padding:15px 20px}.height-box small{font-size:15px}
.status{display:grid;gap:17px;margin-top:31px}
.status-row{display:flex;align-items:center;gap:12px;font-size:14px}
.status-dot{width:24px;height:24px;border:2px solid var(--g);border-radius:50%;display:grid;place-items:center;color:var(--g);font-size:13px;font-weight:900}
.glass{border:1px solid #E3EADD;background:rgba(255,255,255,.84);border-radius:22px;padding:17px;box-shadow:var(--shadow)}
.goalbox{text-align:left;margin-top:18px}.goalbox .label{font-size:11px;color:#7B8579}.goalbox b{display:block;font-size:21px;margin:4px 0}
.journey{height:230px;margin:24px 0 10px;border-radius:28px;position:relative;overflow:hidden;background:linear-gradient(180deg,#FFF7D9,#EAF6E1)}
.journey:before{content:"";position:absolute;left:16%;right:16%;top:115px;border-top:5px dashed #94C96D;transform:rotate(-8deg)}
.journey .start,.journey .finish{position:absolute;background:#fff;border-radius:14px;padding:10px 12px;font-weight:900;box-shadow:var(--shadow)}
.start{left:15px;top:35px}.finish{right:15px;bottom:25px}
.journey img{position:absolute;width:120px;left:37%;top:63px}
.energy-card{margin-top:23px;text-align:center}.energy-big{font-size:38px;font-weight:900;margin:4px 0}.green{color:var(--g)}
.activities{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:18px 0}
.activities div{background:#F2F7ED;border-radius:13px;padding:10px 3px;font-size:10px}.activities span{font-size:20px;display:block;margin-bottom:4px}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:27px}
.compare>div{background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px 12px;min-height:210px}
.linechart{height:80px;position:relative;margin-top:18px}
.linechart svg{width:100%;height:100%}
.food-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:21px}
.food{min-height:82px;border:1.5px solid var(--line);background:#fff;border-radius:15px;padding:9px 5px;text-align:center;font-size:11px}
.food span{font-size:28px;display:block;margin-bottom:6px}.food.selected{border-color:#68B84B;background:#F1FAEA}
.balance-foods{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:30px 0 8px}.balance-foods div{font-size:45px;background:#fff;border-radius:18px;padding:15px 5px;box-shadow:var(--shadow)}
.loader{width:140px;height:140px;border-radius:50%;margin:30px auto 20px;background:conic-gradient(var(--g) 0 84%,#E5EBDF 84%);display:grid;place-items:center;position:relative}
.loader:before{content:"";position:absolute;inset:11px;border-radius:50%;background:#FAFCF5}.loader b{position:relative;font-size:31px}
.link-skip{display:block;margin:18px auto 0;border:0;background:none;color:#8A9288;font-size:13px;text-decoration:underline}
.text-input{width:100%;margin-top:14px;height:50px;border:1.5px solid var(--line);border-radius:15px;padding:0 16px;background:#fff;outline:none;font-size:15px}
.text-input:focus{border-color:#67B64B;box-shadow:0 0 0 2px rgba(103,182,75,.12)}
.result-kcal{font-size:62px;font-weight:900;letter-spacing:-2px;margin-top:20px}.result-kcal small{font-size:14px;display:block;letter-spacing:0}
.macros{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:19px 0}.macro{border-radius:16px;padding:13px 4px;text-align:center;background:#F0F6EB;font-size:11px}.macro b{display:block;font-size:19px;margin-top:4px}
.goal-summary{display:flex;align-items:center;justify-content:center;gap:10px;font-size:20px;font-weight:900}.goal-summary i{font-style:normal;color:var(--g)}
.diff-pill{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;color:#3E8A32;background:#EAF5DD;border-radius:99px;padding:5px 13px}
.eta-row{display:flex;flex-direction:column;align-items:center;margin-top:11px}.eta-row b{font-size:20px;color:var(--g)}.eta-row small{font-size:11px;color:var(--muted)}
.macro small{display:block;font-size:10px;color:#8A9288;margin-top:2px}
.actions-title{font-size:13px;font-weight:800;letter-spacing:.3px;color:#566257;margin:20px 0 4px;text-align:center}
.meals{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.meals div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 4px;text-align:center;font-size:11px;color:#566257}.meals b{display:block;font-size:14px;color:var(--ink);margin-top:4px}
.dailies{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}.dailies div{background:#F0F6EB;border-radius:14px;padding:12px;text-align:center;font-size:12px;color:#566257}.dailies b{color:var(--ink)}
.disclaimer{font-size:10px;color:#9AA298;text-align:center;margin:16px 0 0;line-height:1.4}
@media(min-width:700px){.phone{min-height:900px;margin:24px auto;border-radius:30px;box-shadow:0 28px 80px rgba(31,58,26,.18)}.page{min-height:900px}}

/* ===== Page 01 welcome ===== */
.welcome-phone{padding:0;background:#0B0B0D}
.p01{padding:0;display:flex;flex-direction:column;height:100dvh;min-height:640px;background:#0B0B0D}
.p01-scene{position:relative;flex:0 0 62%;height:62%}
.p01-scene img,.p01-logo{position:absolute;display:block}
/* positioned by center (left/top) + translate; coords are scene-local % */
.p01-logo{z-index:5;left:16%;top:6.5%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;font-size:26px;font-weight:800;color:#F4F5F2;letter-spacing:-.5px;white-space:nowrap}
.p01-logo svg{width:33px;height:33px}
.p01-mascot{z-index:3;left:46.8%;top:67.5%;transform:translate(-50%,-50%);width:62.6%;height:auto;animation:mascot-float 2.6s ease-in-out infinite}
@keyframes mascot-float{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-12px)}}
.p01-ellipse{position:absolute;z-index:2;left:51.8%;top:95%;transform:translate(-50%,-50%);width:44%;aspect-ratio:3.2/1;background:radial-gradient(ellipse at center,rgba(160,210,120,.4),rgba(160,210,120,.12) 62%,transparent 75%);border-radius:50%}
.p01-card{z-index:4;height:auto;transform:translate(-50%,-50%)}
.c-cal{left:25.2%;top:34.5%;width:38.7%}
.c-pro{left:77.4%;top:28.9%;width:33.1%}
.c-fat{left:85.5%;top:78.5%;width:23%}
.c-crb{left:17.6%;top:86.8%;width:27%}
.p01-copy{flex:0 0 auto;text-align:center;padding:0 26px calc(20px + env(safe-area-inset-bottom))}
.p01-title{font-size:33px;line-height:1.1;font-weight:900;letter-spacing:-1px;margin:22px;color:#F4F5F2}
.p01-title span{color:var(--g2)}
.p01-body{font-size:14px;line-height:1.45;color:#AAB0A6;margin:13px 0 0}
.p01-cta{position:relative;margin-top:22px;width:100%;border:0;cursor:pointer;border-radius:99px;background:linear-gradient(180deg,#BFE86A,#A9DD4C);color:#0E140A;font-size:18px;font-weight:800;padding:19px 22px;box-shadow:0 12px 26px rgba(120,180,60,.32);animation:cta-pulse 1.8s ease-in-out infinite}
.p01-cta:active{transform:scale(.96)}
/* expanding filled glow: uniform overall scale on every side */
.p01-cta:before,.p01-cta:after{content:"";position:absolute;inset:0;border-radius:99px;background:rgba(169,221,76,.4);pointer-events:none;z-index:-1;animation:cta-ripple 2.2s ease-out infinite}
.p01-cta:after{animation-delay:1.1s}
@keyframes cta-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes cta-ripple{0%{transform:scale(.7);opacity:.55}100%{transform:scale(1.35);opacity:0}}
@media (prefers-reduced-motion:reduce){.p01-cta,.p01-cta:before,.p01-cta:after,.p01-mascot{animation:none}}
.p01-meta{margin:14px 0 0;font-size:13px;color:#9AA096;display:flex;align-items:center;justify-content:center;gap:7px}
.p01-meta .clock{font-size:15px;color:#8A9288}
@media(min-width:700px){.p01{height:900px}}

/* ===== Page 02 goal selection ===== */
.goal-phone{background:#000}
.p02{position:relative;padding:calc(14px + env(safe-area-inset-top)) 22px calc(20px + env(safe-area-inset-bottom));background:#000;overflow:hidden}
.glow{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.glow-tr{width:340px;height:340px;right:-120px;top:60px;background:radial-gradient(circle,rgba(122,201,67,.18),transparent 68%)}
.glow-bm{width:420px;height:300px;left:50%;transform:translateX(-50%);bottom:-150px;background:radial-gradient(circle,rgba(122,201,67,.14),transparent 70%)}
.p02-nav{position:relative;z-index:2;height:42px;display:flex;align-items:center;gap:12px}
.p02-back{border:0;background:none;color:#fff;font-size:28px;line-height:1;padding:0 2px 4px}
.p02-track{flex:1;height:6px;border-radius:9px;background:#26282C;overflow:hidden}
.p02-track>i{display:block;height:100%;background:linear-gradient(90deg,#8FD14F,#B8DF55);border-radius:9px}
.p02-step{font-size:12px;color:#AEB4AC;min-width:42px;text-align:right}
.p02-head{position:relative;z-index:2;margin-top:18px;min-height:158px;padding-top:6px}
.p02-mascot{position:absolute;right:-20px;top:60px;width:116px;pointer-events:none}
.p02-mascot img{width:100%;display:block;animation:mascot-float 2.6s ease-in-out infinite}
.p02-title{margin:0;padding-right:138px;font-size:32px;line-height:1.08;font-weight:900;letter-spacing:-1px;color:#F5F6F2}
.p02-sub{margin:12px 0 0;padding-right:132px;font-size:14px;line-height:1.4;color:#98A094}
.p02-list{position:relative;z-index:2;margin-top:30px;display:flex;flex-direction:column;gap:13px}
.goal-card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:1px solid #23252A;background:#131416;border-radius:20px;padding:15px 16px;cursor:pointer;transition:border-color .18s,box-shadow .18s,background .18s}
.goal-card.selected{border:2px solid #B8DF55;background:#171A14;box-shadow:0 0 0 1px rgba(184,223,85,.25),0 0 22px rgba(184,223,85,.22)}
.gc-icon{flex:0 0 52px;width:52px;height:52px;border-radius:50%;background:rgba(122,201,67,.14);display:flex;align-items:center;justify-content:center}
.gc-icon img{width:30px;height:30px;object-fit:contain}
.gc-copy{flex:1;min-width:0}
.gc-copy b{display:block;font-size:17px;font-weight:800;color:#F3F5F0;letter-spacing:-.2px}
.gc-copy small{display:block;margin-top:3px;font-size:12.5px;line-height:1.3;color:#8E968A}
.gc-chev{flex:0 0 auto;font-size:24px;line-height:1;color:#7E867C}
.goal-card.selected .gc-chev{color:#fff}
@media(min-width:700px){.p02{height:900px}}

/* ===== Page 03 motivation ===== */
.p03-phone{background:#050706}
.p03{position:relative;background:#050706;padding:0;overflow:hidden;color:#fff}
.p03-nav{position:absolute;z-index:5;top:0;left:0;right:0;height:88px}
.p03-close{position:absolute;left:23px;top:26px;width:28px;height:28px;border:0;background:none;color:#fff;font-size:15px;line-height:28px;text-align:center;cursor:pointer;padding:0}
.p03-track{position:absolute;left:113px;top:40px;width:203px;height:6px;border-radius:3px;background:#434343;overflow:hidden}
.p03-track i{display:block;height:100%;border-radius:3px;background:#B8F34A}
.p03-step{position:absolute;right:20px;top:32px;font-size:12px;line-height:20px;color:#D9D9DC}
.p03-hero{position:absolute;z-index:1;left:35px;top:65px;width:360px;height:auto}
.p03-copy{position:absolute;z-index:2;top:436px;left:0;right:0}
.p03-copy h2,.p03-copy p{margin:0;text-align:center;padding:8 24px}
.p03-title{font-size:48px;line-height:1.2;font-weight:700;letter-spacing:-.5px;color:#FBFBFB}
.p03-title-lime{color:#BFF45D}
.p03-lime{margin-top:22px;font-size:20px;line-height:1.32;font-weight:600;letter-spacing:-.3px;color:#BFF45D}
.p03-gray{margin-top:24px;font-size:16px;line-height:1.42;font-weight:500;color:#A6A9B1}
.p03-note{margin-top:26px;font-size:16px;line-height:1.42;font-weight:600;color:#A6A9B1}
.p03-note span{display:block;margin-top:10px;font-size:16px;line-height:1.42;font-weight:500}
.p03-cta{position:absolute;z-index:3;left:24px;right:24px;bottom:58px}
.p03-btn{width:100%;height:58px;border:0;border-radius:999px;background:#B9F151;color:#14210A;font-weight:700;font-size:17px;cursor:pointer}
.p03-btn:active{background:#A8DF45}

/* ===== Page 04 sex ===== */
.p04-phone{background:#050706}
.p04{position:relative;background:#050706;padding:0;overflow:hidden;color:#fff}
.p04-nav{position:absolute;z-index:6;top:0;left:0;right:0;height:88px}
.p04-back{position:absolute;left:18px;top:40px;width:30px;height:30px;border:0;background:none;color:#fff;font-size:28px;line-height:26px;text-align:center;cursor:pointer;padding:0;font-weight:300}
.p04-track{position:absolute;left:102px;top:47px;width:225px;height:5px;border-radius:3px;background:#3A3A3A;overflow:hidden}
.p04-track i{display:block;height:100%;border-radius:3px;background:#B8F34A}
.p04-step{position:absolute;right:22px;top:39px;font-size:12px;line-height:20px;color:#ACAEBB}
.p04-mascot{position:absolute;z-index:1;left:214px;top:81px;width:143px;height:auto}
.p04-title{position:absolute;z-index:2;top:130px;left:34px;margin:0;font-size:34px;line-height:1.14;font-weight:700;letter-spacing:-.5px;color:#FBFBFB}
.p04-sub{position:absolute;z-index:2;top:240px;left:34px;margin:0;font-size:17px;line-height:1.42;font-weight:500;color:#8E929B}
.p04-list{position:absolute;z-index:2;top:350px;left:22px;right:22px}
.sex-card{position:relative;display:flex;align-items:center;width:100%;height:110px;margin:0 0 14px;padding:0;border:1.5px solid #282C26;border-radius:12px;background:#0B0E0A;text-align:left;cursor:pointer}
.sex-card:last-child{margin-bottom:0}
.sx-icon{flex:0 0 auto;width:66px;height:66px;margin-left:22px;display:flex;align-items:center;justify-content:center}
.sx-icon img{width:66px;height:66px}
.sex-card b{margin-left:24px;font-size:19px;font-weight:600;color:#8A8B8B}
.sx-chev{position:absolute;right:24px;top:50%;transform:translateY(-54%);font-size:30px;line-height:1;font-weight:300;color:#5A5E58}
.sex-card.selected{border-color:#B8F34A;background:#12160F}
.sex-card.selected b{color:#F8F8F8}
.sex-card.selected .sx-chev{color:#B8F34A}
.p04-private{position:absolute;z-index:2;left:0;right:0;bottom:42px;display:flex;align-items:center;justify-content:center;gap:8px}
.p04-private img{width:24px;height:24px}
.p04-private span{font-size:13px;font-weight:500;color:#8A8B8D}

/* ===== Page 05 birth year ===== */
.p05-phone{background:#050706}
.p05{position:relative;background:#050706;padding:0;overflow:hidden;color:#fff}
.p05-nav{position:absolute;z-index:6;top:0;left:0;right:0;height:88px}
.p05-back{position:absolute;left:18px;top:22px;width:30px;height:30px;border:0;background:none;color:#fff;font-size:28px;line-height:26px;text-align:center;cursor:pointer;padding:0;font-weight:300}
.p05-segs{position:absolute;left:106px;top:31px;width:218px;display:flex;gap:4px}
.p05-segs i{flex:1;height:5px;border-radius:3px;background:#343632}
.p05-segs i.on{background:#B8F34A}
.p05-step{position:absolute;right:22px;top:24px;font-size:12px;line-height:20px;color:#ACAEBB}
.p05-title{position:absolute;z-index:2;top:88px;left:0;right:0;margin:0;text-align:center;font-size:26px;line-height:1.18;font-weight:700;letter-spacing:-.4px;color:#FBFBFB}
.p05-sub{position:absolute;z-index:2;top:132px;left:0;right:0;margin:0;text-align:center;font-size:14px;line-height:1.5;font-weight:500;color:#8E929B}
.p05-mascot{position:absolute;z-index:1;left:102px;top:182px;width:225px;height:auto}
.p05-wheelbox{position:absolute;z-index:3;top:428px;left:0;right:0;height:190px}
.p05-wheel{position:absolute;inset:0;overflow-y:scroll;scrollbar-width:none}
.p05-wheel::-webkit-scrollbar{display:none}
.aopt{height:64px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:600;color:#5F635C}
.aopt:first-child{margin-top:63px}
.aopt:last-child{margin-bottom:63px}
.aopt.on{font-size:30px;font-weight:700;color:#CAFA59}
.p05-sel{position:absolute;z-index:2;left:22px;right:22px;top:45px;height:100px;border:1.5px solid #2E332A;border-radius:14px;pointer-events:none}
.p05-sel::after{content:"Birth year";position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:11px;font-weight:500;letter-spacing:.2px;color:#8A8E84}
.p05-fade{position:absolute;z-index:4;left:0;right:0;height:46px;pointer-events:none}
.p05-fade-top{top:0;background:linear-gradient(#050706,transparent)}
.p05-fade-bottom{bottom:0;background:linear-gradient(transparent,#050706)}
.p05-why{position:absolute;z-index:2;top:650px;left:21px;right:21px;padding:16px 18px;border:1px solid #262A24;border-radius:16px;background:#10130E}
.p05-why-head{display:flex;align-items:center;justify-content:space-between}
.p05-why-head b{font-size:14px;font-weight:700;color:#F4F5F4}
.p05-why-head img{width:20px;height:20px}
.p05-why p{margin:10px 0 0;font-size:12px;line-height:1.55;color:#909598}
.p05-cta{position:absolute;z-index:3;left:24px;right:24px;bottom:46px}
.p05-btn{width:100%;height:58px;border:0;border-radius:999px;background:#B9F151;color:#14210A;font-weight:700;font-size:17px;cursor:pointer}
.p05-btn:active{background:#A8DF45}

/* ===== Page 06 height ===== */
.p06-phone{background:#050706}
.p06{position:relative;background:#050706;padding:0;overflow:hidden;color:#fff}
.p06-nav{position:absolute;z-index:6;top:0;left:0;right:0;height:88px}
.p06-back{position:absolute;left:18px;top:22px;width:30px;height:30px;border:0;background:none;color:#fff;font-size:28px;line-height:26px;text-align:center;cursor:pointer;padding:0;font-weight:300}
.p06-segs{position:absolute;left:106px;top:31px;width:218px;display:flex;gap:4px}
.p06-segs i{flex:1;height:5px;border-radius:3px;background:#343632}
.p06-segs i.on{background:#B8F34A}
.p06-step{position:absolute;right:22px;top:24px;font-size:12px;line-height:20px;color:#ACAEBB}
.p06-title{position:absolute;z-index:2;top:88px;left:0;right:0;margin:0;text-align:center;font-size:26px;line-height:1.18;font-weight:700;letter-spacing:-.4px;color:#FBFBFB}
.p06-sub{position:absolute;z-index:2;top:126px;left:0;right:0;margin:0;text-align:center;font-size:14px;line-height:1.5;font-weight:500;color:#8E929B}
.p06-toggle{position:absolute;z-index:3;top:178px;left:50%;transform:translateX(-50%);display:flex;width:215px;height:42px;padding:4px;border-radius:999px;background:#1A1D19}
.p06-toggle button{flex:1;border:0;border-radius:999px;background:none;color:#9CA097;font-size:14px;font-weight:600;cursor:pointer}
.p06-toggle button.on{background:#B8F34A;color:#14210A}
.p06-mascot{position:absolute;z-index:1;left:100px;top:272px;width:230px;height:auto}
.p06-wheelbox{position:absolute;z-index:3;top:526px;left:0;right:0;height:188px}
.p06-selframe{position:absolute;z-index:2;top:57px;left:42px;width:346px;height:71px;border:1.5px solid #C6EE5C;border-radius:15px;background:rgba(198,238,92,.04);pointer-events:none}
.p06-col{position:absolute;top:0;bottom:0;width:150px}
.p06-ftcol{left:55px}
.p06-incol{right:55px}
.p06-col.p06-cmcol{left:50%;transform:translateX(-50%);width:170px}
.p06-wheel{position:absolute;top:0;left:0;right:0;bottom:0;overflow-y:scroll;scrollbar-width:none}
.p06-wheel::-webkit-scrollbar{display:none}
.hopt{height:60px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:600;color:#5A5E57}
.hopt:first-child{margin-top:60px}
.hopt:last-child{margin-bottom:60px}
.hopt.on{font-size:34px;font-weight:700;color:#CAFA59}
.p06-unit{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:13px;font-weight:600;color:#A3A6A9}
.p06-fade{position:absolute;z-index:4;left:0;right:0;height:48px;pointer-events:none}
.p06-fade-top{top:0;background:linear-gradient(#050706,transparent)}
.p06-fade-bottom{bottom:0;background:linear-gradient(transparent,#050706)}
.p06-note{position:absolute;z-index:2;left:0;right:0;bottom:112px;display:flex;align-items:center;justify-content:center;gap:7px}
.p06-note img{width:17px;height:17px}
.p06-note span{font-size:12px;font-weight:500;color:#969999}
.p06-cta{position:absolute;z-index:3;left:24px;right:24px;bottom:46px}
.p06-btn{width:100%;height:58px;border:0;border-radius:999px;background:#B9F151;color:#14210A;font-weight:700;font-size:17px;cursor:pointer}
.p06-btn:active{background:#A8DF45}

/* ===== Page 07 weight ===== */
.p07-phone{background:#050706}
.p07{position:relative;background:#050706;padding:0;overflow:hidden;color:#fff}
.p07-nav{position:absolute;z-index:6;top:0;left:0;right:0;height:88px}
.p07-back{position:absolute;left:18px;top:22px;width:30px;height:30px;border:0;background:none;color:#fff;font-size:28px;line-height:26px;text-align:center;cursor:pointer;padding:0;font-weight:300}
.p07-segs{position:absolute;left:106px;top:31px;width:218px;display:flex;gap:4px}
.p07-segs i{flex:1;height:5px;border-radius:3px;background:#343632}
.p07-segs i.on{background:#B8F34A}
.p07-step{position:absolute;right:22px;top:24px;font-size:12px;line-height:20px;color:#ACAEBB}
.p07-title{position:absolute;z-index:2;top:95px;left:0;right:0;margin:0;text-align:center;font-size:26px;line-height:1.25;font-weight:700;letter-spacing:-.4px;color:#FBFBFB}
.p07-sub{position:absolute;z-index:2;top:184px;left:0;right:0;margin:0;text-align:center;font-size:14px;line-height:1.5;font-weight:500;color:#8E929B}
.p07-toggle{position:absolute;z-index:3;top:228px;left:50%;transform:translateX(-50%);display:flex;width:215px;height:42px;padding:4px;border-radius:999px;background:#1A1D19}
.p07-toggle button{flex:1;border:0;border-radius:999px;background:none;color:#9CA097;font-size:14px;font-weight:600;cursor:pointer}
.p07-toggle button.on{background:#B8F34A;color:#14210A}
.p07-wheelbox{position:absolute;z-index:3;top:286px;left:0;right:0;height:188px}
.p07-selframe{position:absolute;z-index:2;top:57px;left:84px;width:259px;height:71px;border:1.5px solid #C6EE5C;border-radius:15px;background:rgba(198,238,92,.04);pointer-events:none}
.p07-col{position:absolute;top:0;bottom:0;left:140px;width:150px}
.p07-wheel{position:absolute;top:0;left:0;right:0;bottom:0;overflow-y:scroll;scrollbar-width:none}
.p07-wheel::-webkit-scrollbar{display:none}
.p07-col .hopt{height:60px;display:flex;align-items:center;justify-content:center;gap:5px;font-weight:600}
.p07-col .hopt .wn{font-size:24px;color:#5A5E57;transform:translateY(3px)}
.p07-col .hopt .wu{font-size:15px;color:#6E7268;font-weight:600;transform:translateY(3px)}
.p07-col .hopt:first-child{margin-top:60px}
.p07-col .hopt:last-child{margin-bottom:60px}
.p07-col .hopt.on .wn{font-size:34px;font-weight:700;color:#CAFA59}
.p07-col .hopt.on .wu{font-size:19px;font-weight:700;color:#CAFA59}
.p07-fade{position:absolute;z-index:4;left:0;right:0;height:48px;pointer-events:none}
.p07-fade-top{top:0;background:linear-gradient(#050706,transparent)}
.p07-fade-bottom{bottom:0;background:linear-gradient(transparent,#050706)}
.p07-scalewrap{position:absolute;z-index:2;left:40px;top:470px;width:350px}
.p07-scale{display:block;width:100%;height:auto}
.p07-scaleread{position:absolute;left:47.2%;top:20.5%;transform:translate(-50%,-50%);font-size:30px;font-weight:800;color:#14210A;letter-spacing:-.5px}
.p07-buddy{position:absolute;z-index:2;right:26px;top:606px;width:70px;height:auto}
.p07-note{position:absolute;z-index:2;left:0;right:0;bottom:112px;display:flex;align-items:center;justify-content:center;gap:7px}
.p07-note img{width:17px;height:17px}
.p07-note span{font-size:12px;font-weight:500;color:#969999}
.p07-cta{position:absolute;z-index:3;left:24px;right:24px;bottom:46px}
.p07-btn{width:100%;height:58px;border:0;border-radius:999px;background:#B9F151;color:#14210A;font-weight:700;font-size:17px;cursor:pointer}
.p07-btn:active{background:#A8DF45}

/* ===== Page 08 shape ===== */
.p08-phone{background:#050706}
.p08{position:relative;background:#050706;padding:0;overflow:hidden;color:#fff}
.p08-glow{position:absolute;z-index:0;left:0;top:171px;width:430px;height:auto}
.p08-nav{position:absolute;z-index:6;top:0;left:0;right:0;height:88px}
.p08-back{position:absolute;left:22px;top:28px;width:26px;height:34px;border:0;background:none;color:#fff;font-size:32px;line-height:30px;text-align:center;cursor:pointer;padding:0;font-weight:300}
.p08-segs{position:absolute;left:105px;top:41px;width:221px;display:flex;gap:4px}
.p08-segs i{flex:1;height:7px;border-radius:4px;background:#343632}
.p08-segs i.on{background:#B8F34A}
.p08-step{position:absolute;right:24px;top:35px;font-size:13px;line-height:20px;color:#ACAEBB}
.p08-title{position:absolute;z-index:3;top:92px;left:0;right:0;margin:0;text-align:center;font-size:29px;line-height:1.2;font-weight:700;letter-spacing:-.6px;color:#F9F9FA}
.p08-sub{position:absolute;z-index:3;top:140px;left:0;right:0;margin:0;text-align:center;font-size:15px;line-height:1.55;font-weight:500;color:#A4A7AD}
.p08-hero{position:absolute;z-index:2;left:21px;top:199px;width:388px;height:auto}
.p08-panel{position:absolute;z-index:3;left:27px;top:537px;width:377px;height:197px;padding:23px 28px;box-sizing:border-box;border-radius:20px;background:rgba(16,20,14,.8);border:1px solid rgba(190,230,130,.1)}
.p08-row{display:flex;align-items:center;gap:23px;margin-bottom:27px}
.p08-row:last-child{margin-bottom:0}
.p08-ic{width:32px;height:32px;flex:none}
.p08-pending{opacity:.28}
.p08-spinning{animation:p08spin .7s linear infinite}
.p08-checked{animation:p08pop .32s cubic-bezier(.2,1.4,.4,1)}
@keyframes p08pop{from{transform:scale(.4)}to{transform:scale(1)}}
.p08-label{font-size:17px;font-weight:500;color:#F4F4F4;letter-spacing:-.2px}
.p08-hidden{opacity:0;pointer-events:none;transform:translateY(10px)}
.p08-cta{transition:opacity .35s ease,transform .35s ease}
@keyframes p08spin{to{transform:rotate(360deg)}}
.p08-footnote{position:absolute;z-index:3;left:0;right:0;top:756px;margin:0;text-align:center;font-size:14px;line-height:1.5;font-weight:500;color:#9A9EA4}
.p08-cta{position:absolute;z-index:4;left:27px;right:27px;top:824px}
.p08-btn{width:100%;height:58px;border:0;border-radius:999px;background:#B9F151;color:#14210A;font-weight:700;font-size:17px;cursor:pointer}
.p08-btn:active{background:#A8DF45}

/* ===== Page 09 goal weight ===== */
.p09-phone{background:#050706}
.p09{position:relative;background:#050706;padding:0;overflow:hidden;color:#fff}
.p09-glow{position:absolute;z-index:0;left:0;top:0;width:430px;height:auto}
.p09-nav{position:absolute;z-index:6;top:0;left:0;right:0;height:88px}
.p09-back{position:absolute;left:22px;top:28px;width:26px;height:34px;border:0;background:none;color:#fff;font-size:32px;line-height:30px;text-align:center;cursor:pointer;padding:0;font-weight:300}
.p09-prog{position:absolute;left:98px;top:40px;width:234px;height:8px;border-radius:5px;background:#2C2F2B;overflow:hidden}
.p09-prog i{display:block;height:100%;border-radius:5px;background:#B8F34A}
.p09-step{position:absolute;right:24px;top:35px;font-size:13px;line-height:20px;color:#ACAEBB}
.p09-title{position:absolute;z-index:3;top:93px;left:0;right:0;margin:0;text-align:center;font-size:27px;line-height:1.22;font-weight:700;letter-spacing:-.5px;color:#F9F9FA}
.p09-sub{position:absolute;z-index:3;top:138px;left:0;right:0;margin:0;text-align:center;font-size:15px;line-height:1.5;font-weight:500;color:#A4A7AD}
.p09-seg{position:absolute;z-index:3;left:136px;top:181px;width:159px;height:39px;border-radius:999px;background:#1A1D18;display:flex;padding:3px;box-sizing:border-box}
.p09-seg button{flex:1;border:0;border-radius:999px;background:none;color:#9A9DA2;font-size:14px;font-weight:600;cursor:pointer}
.p09-seg button.on{background:#C4F252;color:#101509}
.p09-wheelbox{position:absolute;z-index:3;top:247px;left:0;right:0;height:155px}
.p09-selframe{position:absolute;z-index:2;top:42px;left:102px;width:226px;height:70px;border:1.5px solid #C6EE5C;border-radius:15px;background:rgba(198,238,92,.04);pointer-events:none}
.p09-fade{position:absolute;z-index:2;left:0;right:0;height:42px;pointer-events:none}
.p09-fade-top{top:0;background:linear-gradient(#050706,rgba(5,7,6,0))}
.p09-fade-bottom{bottom:0;background:linear-gradient(rgba(5,7,6,0),#050706)}
.p09-col{position:absolute;left:102px;width:226px;top:0;bottom:0}
.p09-wheel{height:100%;overflow-y:auto;scrollbar-width:none}
.p09-wheel::-webkit-scrollbar{display:none}
.p09-wheel.locked{overflow:hidden}
.p09-col .hopt{height:60px;display:flex;align-items:center;justify-content:center;gap:5px;font-weight:600}
.p09-col .hopt .wn{font-size:24px;color:#5A5E57}
.p09-col .hopt .wu{font-size:15px;color:#6E7268;font-weight:600}
.p09-col .hopt:first-child{margin-top:48px}
.p09-col .hopt:last-child{margin-bottom:48px}
.p09-col .hopt.on .wn{font-size:38px;color:#F6F6F6}
.p09-col .hopt.on .wu{font-size:18px;color:#C6EE5C}
.p09-card{position:absolute;z-index:3;left:23px;top:423px;width:384px;height:113px;border-radius:20px;background:rgba(17,21,16,.82);border:1px solid rgba(190,230,130,.1);padding:18px 22px;box-sizing:border-box}
.p09-cardlabel{display:block;font-size:12px;font-weight:600;color:#9AA0A4;margin-bottom:2px}
.p09-cardbig{display:block;font-size:21px;font-weight:700;color:#F4F4F4;letter-spacing:-.3px;margin-bottom:12px}
.p09-cardrow{display:flex;align-items:center;gap:14px}
.p09-from,.p09-to{font-size:16px;font-weight:600;color:#EDEDED}
.p09-to{color:#C6EE5C}
.p09-arrow{width:20px;height:16px}
.p09-arrow.up{transform:rotate(180deg)}
.p09-hero{position:absolute;z-index:2;left:24px;top:543px;width:383px;height:auto}
.p09-cta{position:absolute;z-index:4;left:24px;right:24px;top:810px}
.p09-btn{width:100%;height:58px;border:0;border-radius:999px;background:#B9F151;color:#14210A;font-weight:700;font-size:17px;cursor:pointer}
.p09-btn:active{background:#A8DF45}

/* ===== Page 10 activity ===== */
.p10-phone{background:#050706}
.p10{position:relative;background:#050706;padding:0;overflow:hidden;color:#fff}
.p10-glow{position:absolute;z-index:0;left:0;top:0;width:430px;height:auto}
.p10-nav{position:absolute;z-index:6;top:0;left:0;right:0;height:88px}
.p10-back{position:absolute;left:22px;top:28px;width:26px;height:34px;border:0;background:none;color:#fff;font-size:32px;line-height:30px;text-align:center;cursor:pointer;padding:0;font-weight:300}
.p10-segs{position:absolute;left:105px;top:41px;width:221px;display:flex;gap:4px}
.p10-segs i{flex:1;height:7px;border-radius:4px;background:#343632}
.p10-segs i.on{background:#B8F34A}
.p10-step{position:absolute;right:24px;top:35px;font-size:13px;line-height:20px;color:#ACAEBB}
.p10-title{position:absolute;z-index:3;top:78px;left:0;right:0;margin:0;text-align:center;font-size:27px;line-height:1.24;font-weight:700;letter-spacing:-.5px;color:#F9F9FA}
.p10-sub{position:absolute;z-index:3;top:158px;left:0;right:0;margin:0;text-align:center;font-size:15px;line-height:1.5;font-weight:500;color:#A4A7AD}
.p10-list{position:absolute;z-index:3;left:26px;top:214px;width:378px;display:flex;flex-direction:column;gap:8px}
.p10-row{position:relative;width:100%;height:66px;border:1px solid rgba(255,255,255,.06);border-radius:18px;background:rgba(14,18,13,.85);display:flex;align-items:center;padding:0 16px;box-sizing:border-box;cursor:pointer;text-align:left}
.p10-row.sel{border:1.5px solid #C6EE5C;background:rgba(18,28,8,.85)}
.p10-rowic{width:36px;height:36px;flex:none;margin-right:16px}
.p10-copy{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.p10-copy b{font-size:16px;font-weight:600;color:#F3F2F2;letter-spacing:-.2px;line-height:1.2}
.p10-copy small{font-size:12.5px;font-weight:500;color:#7F858A;line-height:1.2}
.p10-mark{width:30px;height:30px;flex:none}
.p10-radio{width:24px;height:24px;margin-right:3px}
.p10-hero{position:absolute;z-index:2;left:43px;top:589px;width:343px;height:auto}
.p10-cta{position:absolute;z-index:4;left:26px;right:26px;top:827px}
.p10-btn{width:100%;height:58px;border:0;border-radius:999px;background:#B9F151;color:#14210A;font-weight:700;font-size:17px;cursor:pointer}
.p10-btn:active{background:#A8DF45}

/* ===== Page 11 energy ===== */
.p11-phone{background:#050706}
.p11{position:relative;background:#050706;padding:0;overflow:hidden;color:#fff}
.p11-glow{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none}
.p11-title{position:absolute;z-index:3;top:80px;left:0;right:0;margin:0;text-align:center;font-size:32px;line-height:1.12;font-weight:800;color:#fff;letter-spacing:-.6px}
.p11-sub{position:absolute;z-index:3;top:159px;left:0;right:0;margin:0;text-align:center;font-size:17px;color:#9AA092}
.p11-card1{position:absolute;z-index:2;left:26px;top:285px;width:378px;height:230px;border:1px solid rgba(184,223,85,.55);border-radius:16px;background:#0C1306;box-shadow:0 0 26px rgba(184,223,85,.13);padding-top:24px}
.p11-bmr{text-align:center;font-size:36px;font-weight:900;letter-spacing:-1px;color:#CFF941}
.p11-bmr-sub{margin:6px 0 0;text-align:center;font-size:13px;color:#93A084}
.p11-divider{height:1px;background:#233014;margin:22px 24px 0}
.p11-icons{display:grid;grid-template-columns:repeat(4,1fr);margin-top:14px}
.p11-icons div{display:flex;flex-direction:column;align-items:center;gap:7px}
.p11-icons img{width:36px;height:36px;object-fit:contain}
.p11-icons span{font-size:11px;color:#93A084}
.p11-peek{position:absolute;z-index:4;left:199px;top:166px;width:198px;height:auto;pointer-events:none}
.p11-arrow{position:absolute;z-index:5;left:197px;top:527px;width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(184,223,85,.55))}
.p11-card2{position:absolute;z-index:3;left:25px;top:576px;width:382px;height:129px;border:1px solid rgba(184,223,85,.6);border-radius:16px;background:#0C1306;box-shadow:0 0 30px rgba(184,223,85,.16);display:flex;flex-direction:column;justify-content:center;padding-left:90px}
.p11-flame{position:absolute;left:25px;top:28px;width:48px;height:56px;object-fit:contain}
.p11-tdee{font-size:30px;font-weight:900;letter-spacing:-.6px;color:#CFF941}
.p11-tdee-sub{margin:5px 0 0;font-size:13px;color:#93A084}
.p11-note{position:absolute;z-index:3;top:729px;left:36px;right:36px;margin:0;text-align:center;font-size:13px;line-height:1.4;color:#93A084}
.p11-cta{position:absolute;z-index:4;left:26px;right:26px;top:827px}
.p11-btn{width:100%;height:58px;border:0;border-radius:999px;background:#B9F151;color:#14210A;font-weight:700;font-size:17px;cursor:pointer;box-shadow:0 -6px 22px rgba(184,223,85,.25)}
.p11-btn:active{background:#A8DF45}

/* ===== Page 12 pace ===== */
.p12-phone{background:#050706}
.p12{position:relative;background:#050706;padding:0;overflow:hidden;color:#fff}
.p12-glow{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none}
.p12-title{position:absolute;z-index:3;top:84px;left:35px;margin:0;text-align:left;font-size:32px;line-height:1.12;font-weight:800;color:#fff;letter-spacing:-.6px}
.p12-sub{position:absolute;z-index:3;top:167px;left:38px;margin:0;text-align:left;font-size:17px;color:#B9B6D9}
.p12-hero{position:absolute;z-index:4;left:242px;top:188px;width:176px;height:auto;pointer-events:none}
.p12-list{position:absolute;z-index:3;left:22px;top:296px;width:386px}
.p12-row{position:relative;display:block;width:100%;height:119px;margin-bottom:14px;border:1px solid rgba(184,223,85,.4);border-radius:14px;background:#050F03;text-align:left;cursor:pointer;padding:0;overflow:hidden}
.p12-row.sel{border-color:rgba(184,223,85,.9);box-shadow:0 0 24px rgba(184,223,85,.18)}
.p12-rowic{position:absolute;left:27px;top:35px;width:48px;height:48px;object-fit:contain}
.p12-copy{position:absolute;left:96px;top:34px}
.p12-copy b{display:block;font-size:19px;font-weight:800;color:#fff}
.p12-copy small{display:block;margin-top:6px;font-size:13px;color:#9AA090}
.p12-mark{position:absolute;right:20px;top:43px;width:32px;height:32px;object-fit:contain}
.p12-radio{width:28px;height:28px;right:22px;top:45px}
.p12-note{position:absolute;z-index:3;top:713px;left:40px;right:40px;margin:0;text-align:center;font-size:13px;color:#9AA090}
.p12-cta{position:absolute;z-index:4;left:25px;right:25px;top:808px}
.p12-btn{width:100%;height:58px;border:0;border-radius:999px;background:#B9F151;color:#14210A;font-weight:700;font-size:17px;cursor:pointer;box-shadow:0 -6px 22px rgba(184,223,85,.25)}
.p12-btn:active{background:#A8DF45}

/* ===== Page 13 faster ===== */
.p13-phone{background:#050706}
.p13{position:relative;background:#050706;padding:0;overflow:hidden;color:#fff}
.p13-glow{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none}
.p13-title{position:absolute;z-index:3;top:83px;left:39px;margin:0;text-align:left;font-size:32px;line-height:1.12;font-weight:800;color:#fff;letter-spacing:-.6px}
.p13-sub{position:absolute;z-index:3;top:166px;left:38px;right:38px;margin:0;text-align:left;font-size:15px;line-height:1.45;color:#B9B6D9}
.p13-card{position:absolute;z-index:2;left:22px;top:247px;width:386px;height:265px;border:1px solid rgba(184,223,85,.55);border-radius:16px;background:#061003;box-shadow:0 0 26px rgba(184,223,85,.13);display:flex}
.p13-col{position:relative;width:50%;padding:25px 20px 0}
.p13-col+.p13-col{border-left:1px solid #16230B}
.p13-colhead{display:block;text-align:center;font-size:16px;font-weight:800;color:#fff;margin-bottom:14px}
.p13-bullet{display:flex;align-items:center;gap:7px;margin:0 0 9px;font-size:12px;color:#C9CDB8}
.p13-bullet img{width:12px;height:12px;flex:none}
.p13-chart{position:absolute;left:50%;top:113px;transform:translateX(-50%);width:154px;height:75px;object-fit:contain}
.p13-badge{position:absolute;z-index:6;width:43px;height:43px;object-fit:contain}
.p13-badge-l{left:100px;top:447px}
.p13-badge-r{left:288px;top:447px}
.p13-mascot{position:absolute;z-index:5;left:88px;top:484px;width:240px;height:auto;pointer-events:none}
.p13-note{position:absolute;z-index:4;top:710px;left:54px;right:54px;margin:0;text-align:center;font-size:14px;line-height:1.45;color:#B9B6D9}
.p13-cta{position:absolute;z-index:6;left:25px;right:25px;top:807px}
.p13-btn{width:100%;height:58px;border:0;border-radius:999px;background:#B9F151;color:#14210A;font-weight:700;font-size:17px;cursor:pointer;box-shadow:0 -6px 22px rgba(184,223,85,.25)}
.p13-btn:active{background:#A8DF45}

/* ===== Page 14 food style ===== */
.p14-phone{background:#050706}
.p14{position:relative;background:#050706;padding:0;overflow:hidden;color:#fff}
.p14-glow{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none}
.p14-title{position:absolute;z-index:3;top:93px;left:31px;margin:0;text-align:left;font-size:30px;line-height:1.12;font-weight:800;color:#fff;letter-spacing:-.6px}
.p14-sub{position:absolute;z-index:3;top:164px;left:32px;margin:0;text-align:left;font-size:15px;color:#B9B6D9}
.p14-hero{position:absolute;z-index:4;left:252px;top:56px;width:165px;height:auto;pointer-events:none}
.p14-grid{position:absolute;z-index:3;left:24px;top:218px;width:382px}
.p14-card{position:relative;float:left;width:179px;height:125px;margin:0 8px 8px 0;border:1px solid rgba(184,223,85,.3);border-radius:14px;background:#071004;padding:5px 0 0;cursor:pointer;overflow:hidden}
.p14-card:nth-child(2n){margin-right:0}
.p14-card.sel{border-color:rgba(184,223,85,.9);box-shadow:0 0 20px rgba(184,223,85,.16)}
.p14-food{display:block;width:173px;height:88px;margin:0 auto;object-fit:contain}
.p14-label{display:block;text-align:center;font-size:12px;font-weight:700;color:#ECEFE0;margin-top:1px}
.p14-check{position:absolute;right:-2px;top:-2px;width:30px;height:30px;object-fit:contain;z-index:2}
.p14-help{position:absolute;z-index:3;top:763px;left:0;right:0;margin:0;text-align:center;font-size:13px;color:#9AA090}
.p14-cta{position:absolute;z-index:6;left:25px;right:25px;top:823px}
.p14-btn{width:100%;height:58px;border:0;border-radius:999px;background:#B9F151;color:#14210A;font-weight:700;font-size:17px;cursor:pointer;box-shadow:0 -6px 22px rgba(184,223,85,.25)}
.p14-btn:active{background:#A8DF45}

/* ===== Page 15 avoid ===== */
.p15-phone{background:#050706}
.p15{position:relative;background:#050706;padding:0;overflow:hidden;color:#fff}
.p15-glow{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none}
.p15-title{position:absolute;z-index:3;top:90px;left:31px;margin:0;text-align:left;font-size:30px;line-height:1.12;font-weight:800;color:#fff;letter-spacing:-.6px}
.p15-sub{position:absolute;z-index:3;top:162px;left:32px;margin:0;text-align:left;font-size:15px;color:#B9B6D9}
.p15-grid{position:absolute;z-index:3;left:24px;top:195px;width:382px}
.p15-tile{position:relative;float:left;width:122px;height:99px;margin:0 8px 10px 0;border:1px solid rgba(184,223,85,.3);border-radius:14px;background:#071004;padding:11px 0 0;cursor:pointer;overflow:hidden}
.p15-tile:nth-child(3n){margin-right:0}
.p15-tile.sel{border-color:rgba(184,223,85,.9);box-shadow:0 0 20px rgba(184,223,85,.16)}
.p15-ic{display:block;width:40px;height:40px;margin:0 auto;object-fit:contain}
.p15-lab{display:block;text-align:center;font-size:12px;font-weight:700;color:#ECEFE0;margin-top:6px;padding:0 6px;line-height:1.15}
.p15-check{position:absolute;right:-1px;top:-1px;width:28px;height:28px;object-fit:contain;z-index:2}
.p15-input{position:absolute;z-index:5;left:24px;right:24px;top:625px;height:46px;border:1px solid rgba(184,223,85,.5);border-radius:12px;background:#0A1505;padding:0 14px;color:#fff;font-size:15px;outline:none}
.p15-input::placeholder{color:#7C8570}
.p15-hero{position:absolute;z-index:4;left:106px;top:612px;width:173px;height:auto;pointer-events:none}
.p15-help{position:absolute;z-index:6;left:0;right:0;top:780px;margin:0;text-align:center;font-size:13px;color:#B9B6D9}
.p15-cta{position:absolute;z-index:7;left:25px;right:25px;top:823px}
.p15-btn{width:100%;height:58px;border:0;border-radius:999px;background:#B9F151;color:#14210A;font-weight:700;font-size:17px;cursor:pointer;box-shadow:0 -6px 22px rgba(184,223,85,.25)}
.p15-btn:active{background:#A8DF45}

/* ===== Page 16 balance ===== */
.p16-phone{background:#050706}
.p16{position:relative;background:#050706;padding:0;overflow:hidden;color:#fff}
.p16-glow{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none}
.p16-title{position:absolute;z-index:3;top:74px;left:31px;margin:0;text-align:left;font-size:29px;line-height:1.36;font-weight:800;color:#C9F24F;letter-spacing:-.6px}
.p16-sub{position:absolute;z-index:3;top:163px;left:32px;right:32px;margin:0;text-align:left;font-size:14px;line-height:1.4;color:#ECEFE0}
.p16-hero{position:absolute;z-index:2;left:18px;top:200px;width:394px;height:345px;object-fit:contain;pointer-events:none}
.p16-foods{position:absolute;z-index:4;left:20px;right:20px;top:542px;display:flex;gap:9px;height:123px}
.p16-food{position:relative;flex:1;border:1.5px solid rgba(185,242,79,.7);border-radius:14px;background:#0E1607;display:flex;flex-direction:column;align-items:center;justify-content:center}
.p16-food span{font-size:50px;line-height:1}
.p16-food b{font-size:13px;font-weight:700;color:#fff;margin-top:8px}
.p16-infocard{position:absolute;z-index:4;left:22px;top:670px;width:386px;height:96px;display:flex;align-items:center}
.p16-cardbg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:0}
.p16-cardic{position:relative;z-index:1;width:44px;height:44px;margin:0 12px 0 26px;object-fit:contain;flex:none}
.p16-infocard b{position:relative;z-index:1;font-size:16px;font-weight:700;color:#fff;line-height:1.25;padding-right:14px}
.p16-cta{position:absolute;z-index:6;left:25px;right:25px;top:823px}
.p16-btn{width:100%;height:58px;border:0;border-radius:999px;background:#C9F24F;color:#14210A;font-weight:700;font-size:17px;cursor:pointer;box-shadow:0 -6px 22px rgba(184,223,85,.25)}
.p16-btn:active{background:#A8DF45}

/* ===== Page 17 building plan ===== */
.p17-phone{background:#050706}
.p17{position:relative;background:#050706;padding:0;overflow:hidden;color:#fff}
.p17-waves{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none}
.p17-title{position:absolute;z-index:3;top:88px;left:31px;margin:0;text-align:left;font-size:30px;line-height:1.14;font-weight:800;color:#fff;letter-spacing:-.6px}
.p17-title em{font-style:normal;color:#B9F151}
.p17-sub{position:absolute;z-index:3;top:172px;left:32px;right:32px;margin:0;text-align:left;font-size:14px;line-height:1.4;color:#B9B6D9}
.p17-hero{position:absolute;z-index:2;left:66px;top:190px;width:300px;height:auto;pointer-events:none}
.p17-listcard{position:absolute;z-index:4;left:20px;top:513px;width:391px;height:267px}
.p17-cardbg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:0}
.p17-row{position:relative;z-index:1;display:flex;align-items:center;height:53px;padding:0 21px}
.p17-slot{display:inline-flex;width:29px;height:29px;margin-right:11px;flex:none;align-items:center;justify-content:center}
.p17-ic{width:29px;height:29px;object-fit:contain}
.p17-row b{font-size:14px;font-weight:600;color:#8A937F}
.p17-row.done b{color:#ECEFE0}
.p17-row.active b{color:#ECEFE0}
.p17-spin{animation:p17spin .8s linear infinite}
@keyframes p17spin{to{transform:rotate(360deg)}}
.p17-cta{position:absolute;z-index:6;left:20px;right:20px;top:820px;height:64px}
.p17-viewbtn{position:relative;width:100%;height:100%;border:0;background:transparent;cursor:pointer;font-weight:700;font-size:17px;color:#14210A}
.p17-viewbtn img{width:24px;height:24px;vertical-align:middle;margin-left:2px}
.p17-cta.show::before{content:"";position:absolute;inset:0;background:url("./assets/p17/button-view-plan.png") center/100% 100% no-repeat;z-index:-1}
.p17-cta.show{animation:p17pop .35s ease}
@keyframes p17pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ===== Page 18 plan ready ===== */
.p18-phone{background:#050706}
.p18{position:relative;background:#050706;padding:0;overflow:hidden;color:#fff}
.p18-confetti{position:absolute;inset:0;z-index:8;overflow:hidden;pointer-events:none}
.p18-confetti i{position:absolute;top:-24px;display:block}
@keyframes p18fall{
 0%{transform:translate3d(0,-24px,0) rotate(0deg);opacity:1}
 100%{transform:translate3d(var(--drift),956px,0) rotate(720deg);opacity:.9}
}
.p18-glow{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none}
.p18-hero{position:absolute;z-index:2;left:91px;top:32px;width:240px;height:auto;pointer-events:none}
.p18-title{position:absolute;z-index:3;top:262px;left:28px;right:28px;margin:0;text-align:left;white-space:nowrap;font-size:25px;line-height:1.1;font-weight:800;color:#fff;letter-spacing:-.5px}
.p18-title em{font-style:normal;color:#B9F151}
.p18-sub{position:absolute;z-index:3;top:302px;left:32px;right:32px;margin:0;text-align:left;font-size:14px;color:#B9B6D9}
/* daily target card */
.p18-target{position:absolute;z-index:4;left:15px;top:332px;width:400px;height:184px}
.p18-targetbg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:0}
.p18-ringwrap{position:absolute;z-index:1;left:15px;top:12px;width:159px;height:159px}
.p18-ring{position:absolute;inset:0;width:159px;height:159px;object-fit:contain}
.p18-flame{position:absolute;left:50%;top:30px;transform:translateX(-50%);width:26px;height:26px;object-fit:contain}
.p18-kcal{position:absolute;left:0;right:0;top:58px;text-align:center;font-size:34px;font-weight:800;color:#fff;line-height:1}
.p18-ringwrap small{position:absolute;left:0;right:0;top:104px;text-align:center;font-size:12px;color:#B9B6D9}
.p18-targettxt{position:absolute;z-index:1;left:184px;right:14px;top:30px}
.p18-targettxt b{display:block;font-size:15px;font-weight:700;color:#fff;line-height:1.25}
.p18-targettxt p{margin:8px 0 0;font-size:11.5px;line-height:1.45;color:#9AA08F}
/* macro row */
.p18-macros{position:absolute;z-index:4;left:18px;top:527px;width:394px;height:111px;display:flex;justify-content:space-between}
.p18-macro{position:relative;width:127px;height:111px;text-align:center}
.p18-macrocard{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.p18-macroic{position:relative;width:37px;height:37px;margin:13px auto 0;object-fit:contain}
.p18-macro b{position:relative;display:block;font-size:12px;font-weight:700;color:#ECEFE0;margin-top:3px}
.p18-macro span{position:relative;font-size:18px;font-weight:800;color:#fff}
/* weight journey */
.p18-journey{position:absolute;z-index:4;left:18px;top:649px;width:394px;height:167px}
.p18-journeybg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:0}
.p18-jtitle{position:absolute;z-index:1;left:21px;top:16px;font-size:15px;font-weight:700;color:#fff}
.p18-jline{position:absolute;z-index:1;left:21px;top:43px;font-size:18px;font-weight:700;color:#fff;display:flex;align-items:center}
.p18-jarrow{width:20px;height:20px;margin:0 6px;object-fit:contain}
.p18-jline em{font-style:normal;color:#B9F151}
.p18-jdiff{position:absolute;z-index:1;left:21px;top:74px;font-size:12px;color:#9AA08F}
.p18-bubble{position:absolute;z-index:2;left:201px;top:5px;width:188px;height:94px;object-fit:contain}
.p18-progress{position:absolute;z-index:1;left:19px;top:102px;width:358px;height:40px}
.p18-progline{position:absolute;left:0;top:0;width:358px;height:34px;object-fit:contain}
.p18-pl{position:absolute;left:0;top:30px;font-size:10px;color:#9AA08F}
.p18-pr{position:absolute;right:0;top:30px;font-size:10px;color:#9AA08F}
/* unlock */
.p18-unlock{position:absolute;z-index:6;left:15px;right:15px;top:836px;height:56px}
.p18-unlockbtn{position:relative;width:100%;height:100%;border:0;background:transparent;cursor:pointer;font-weight:700;font-size:17px;color:#14210A}
.p18-unlockbtn img{width:22px;height:22px;vertical-align:middle;margin-left:2px}
.p18-unlock::before{content:"";position:absolute;inset:0;background:url("./assets/p18/button-unlock-plan.png") center/100% 100% no-repeat;z-index:-1}

/* ===== Responsive scaling for fixed-canvas dark pages ===== */
body.stage-mode{background:#050706}
body.stage-mode .phone{
 width:430px;min-width:430px;max-width:430px;
 height:932px;min-height:932px;margin:0;border-radius:0;box-shadow:none;
 position:fixed;left:50%;top:50%;
 transform:translate(-50%,-50%) scale(var(--stage-scale,1));
 transform-origin:center center;
}
body.stage-mode .page{min-height:932px;height:932px}
