:root{
  --bg:#F7F6F2; --white:#FFFFFF; --ink:#0F1A14; --green:#1E4D35; --green-d:#163B28;
  --sage:#E3EBE1; --sage-2:#C9D8C6; --grey:#4F5B55; --line:#DCDDD8; --box:#4A563E;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--green)}
a:hover{color:var(--green-d)}
strong{font-weight:700}
.wrap{max-width:1280px;margin:0 auto;padding:0 40px}
.eyebrow{font-size:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin:0 0 18px}
.h1{margin:0;font-size:72px;line-height:1.02;letter-spacing:-.04em;font-weight:700}
.h2{margin:0;font-size:48px;line-height:1.06;letter-spacing:-.035em;font-weight:700}
.h3{margin:0;font-size:24px;line-height:1.2;letter-spacing:-.02em;font-weight:700}
.lead{font-size:20px;line-height:1.55;color:var(--grey);margin:0}
.muted{color:var(--grey)}
.small{font-size:16px}
section{position:relative}
.band{padding:112px 0;border-top:1px solid var(--line)}
.band-white{background:var(--white)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;font:600 17px/1 'Plus Jakarta Sans',sans-serif;text-decoration:none;border:0;cursor:pointer;transition:background .2s,color .2s,transform .2s var(--ease),box-shadow .2s}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn:active{transform:scale(.98)}
.btn-p{background:var(--green);color:#fff}
.btn-p:hover{background:var(--green-d);color:#fff;box-shadow:0 10px 24px -12px rgba(30,77,53,.6)}
.btn-s{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn-s:hover{background:var(--ink);color:#fff}
.link{font-weight:600;text-decoration:none;display:inline-flex;gap:8px;align-items:center;border-bottom:1px solid currentColor;padding-bottom:2px}
.link .arr{transition:transform .25s var(--ease)}
.link:hover .arr{transform:translateX(4px)}

/* bar + header */
.bar{background:var(--sage);font-size:16px;font-weight:500}
.bar .wrap{display:flex;justify-content:center;align-items:center;gap:14px;min-height:44px;text-align:center;flex-wrap:wrap}
.bar a{font-weight:700}
header.site{position:sticky;top:0;z-index:50;background:rgba(247,246,242,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
header.site.scrolled{border-color:var(--line);box-shadow:0 6px 20px -16px rgba(15,26,20,.35)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:80px;transition:min-height .3s}
header.site.scrolled .wrap{min-height:66px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo img{height:34px;width:auto}
.nav{display:flex;gap:30px;font-size:16px;font-weight:500}
.nav a{color:var(--ink);text-decoration:none;position:relative;padding:6px 0}
.nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover::after{transform:scaleX(1)}
.head-r{display:flex;align-items:center;gap:20px}
.head-r .login{color:var(--ink);text-decoration:none;font-size:16px;font-weight:500}
.head-r .btn{min-height:46px;padding:0 20px;font-size:16px}
.menu-btn{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;padding:10px}
.menu-btn span{display:block;height:2px;background:var(--ink);margin:6px 0;transition:transform .3s,opacity .3s}
.mnav{display:none}

/* hero shared */
.hero{padding:64px 0 96px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:26px}
.hero-copy .lead{max-width:30ch}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.ticks{display:flex;flex-wrap:wrap;gap:10px 28px;font-size:16px;font-weight:500;color:var(--grey);padding:20px 0 0;border-top:1px solid var(--line);margin:0;list-style:none}
.ticks li{display:flex;align-items:center;gap:10px}
.ticks li::before{content:'';width:8px;height:8px;background:var(--green);flex:none}
.photo{position:relative;overflow:hidden;background:#d9d8d4}
.photo img{width:100%;height:100%;object-fit:cover}
.kb img{animation:kb 18s var(--ease) both}
@keyframes kb{from{transform:scale(1.08)}to{transform:scale(1)}}
.chip{position:absolute;background:#fff;border:1px solid var(--line);padding:16px 20px;box-shadow:0 18px 40px -24px rgba(15,26,20,.45)}
.chip .k{font-size:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.chip .v{font-size:24px;font-weight:700;letter-spacing:-.02em;margin-top:4px}
.chip .v.g{color:var(--green)}
.float{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* hero A */
.heroA .photo{height:640px}
.heroA .photo img{object-position:50% 25%}
/* hero B: full-bleed world */
.heroB{padding:0;position:relative;min-height:760px;display:flex;align-items:center;overflow:hidden}
.heroB .bg{position:absolute;inset:0}
.heroB .bg img{width:100%;height:100%;object-fit:cover;object-position:62% 30%}

.heroB .wrap{position:relative;width:100%}
.heroB .hero-copy{max-width:600px;padding:80px 0}
.heroB .chip{right:40px;bottom:48px}
/* hero C: her world */
.heroC .collage{position:relative;height:660px}
.heroC .c-main{position:absolute;left:12%;top:0;width:62%;height:86%}
.heroC .c-main img{object-position:50% 22%}
.heroC .c-t{position:absolute;overflow:hidden;box-shadow:0 20px 40px -24px rgba(15,26,20,.5);border:6px solid #fff}
.heroC .c-t img{width:100%;height:100%;object-fit:cover}
.heroC .t1{left:0;top:52%;width:30%;height:40%}
.heroC .t2{right:0;top:6%;width:30%;height:36%}
.heroC .t3{right:4%;bottom:0;width:34%;height:34%}
.heroC .chip{left:40%;bottom:6%}

.hero-switch{position:fixed;left:16px;bottom:16px;z-index:80;background:var(--ink);color:#fff;display:flex;align-items:center;gap:4px;padding:6px 6px 6px 14px;font-size:16px;font-weight:600;box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.hero-switch button{all:unset;cursor:pointer;min-width:40px;min-height:36px;display:grid;place-items:center;font-weight:700;font-size:16px;color:#cfd8d0}
.hero-switch button[aria-pressed=true]{background:#fff;color:var(--ink)}

/* proof strip (the one white band) */
.proof{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.proof .cell{padding:44px 28px;border-right:1px solid var(--line)}
.proof .cell:first-child{padding-left:0}
.proof .cell:last-child{border-right:0}
.proof .num{font-size:56px;font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;color:var(--green)}
.proof .cap{margin-top:14px;font-size:16px;color:var(--grey);line-height:1.5}
.proof .src{display:block;margin-top:6px;font-size:16px;color:#6b756f}

/* goal tool */
.goal{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);gap:56px;align-items:start}
.card{background:var(--white);border:1px solid var(--line)}
.goal-card{padding:36px}
.inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:28px}
.field label{display:block;font-size:16px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-bottom:8px}
.stepper{display:flex;align-items:stretch;border:1px solid var(--ink);background:#fff;transition:box-shadow .2s}
.stepper:focus-within{box-shadow:0 0 0 3px var(--sage-2)}
.stepper button{all:unset;cursor:pointer;width:48px;display:grid;place-items:center;font-size:22px;font-weight:500;color:var(--green);user-select:none}
.stepper button:hover{background:var(--sage)}
.stepper input{all:unset;flex:1;min-width:0;text-align:center;font-size:30px;font-weight:700;letter-spacing:-.02em;padding:10px 0;font-variant-numeric:tabular-nums}
.stepper .u{align-self:center;font-size:16px;color:var(--grey);padding-right:4px}
.goal-out{font-size:30px;line-height:1.25;letter-spacing:-.02em;font-weight:500;margin:0 0 6px}
.goal-out strong{color:var(--green)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:22px 0}
.stats>div{padding:16px 0}
.stats>div+div{padding-left:18px;border-left:1px solid var(--line)}
.stats .k{font-size:16px;color:var(--grey)}
.stats .v{font-size:24px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.chartbox{position:relative;height:300px}
.chartbox canvas{width:100%;height:100%;display:block}
.legend{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:16px;color:var(--grey);margin-top:12px}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend i{display:inline-block;width:22px;height:3px;background:var(--green)}
.legend i.d{background:repeating-linear-gradient(90deg,#8a968e 0 5px,transparent 5px 10px)}
.note{font-size:16px;color:var(--grey);margin:14px 0 0;line-height:1.55}
.bmi{margin-top:18px}
.bmi .field{max-width:220px}
.bmi-msg{font-size:16px;margin-top:10px;color:var(--grey)}
.bmi-msg.ok{color:var(--green)}
.bmi-msg.warn{color:#8a4b12}

/* why */
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.why-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .35s var(--ease),box-shadow .35s}
.why-card:hover{transform:translateY(-6px);box-shadow:0 30px 50px -36px rgba(15,26,20,.55);color:inherit}
.why-card .photo{height:300px}
.why-card .photo img{transition:transform .8s var(--ease)}
.why-card:hover .photo img{transform:scale(1.05)}
.why-card .body{padding:28px 28px 32px;display:flex;flex-direction:column;gap:10px}
.why-card .n{font-size:16px;font-weight:700;color:var(--green)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:40px;flex-wrap:wrap;margin-bottom:52px}
.sec-head .lead{max-width:44ch}

/* who */
.who{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.mosaic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:300px 300px;gap:12px;padding-bottom:48px}
.mosaic .photo{height:auto}
.mosaic .photo:nth-child(3n+2){transform:translateY(48px)}
.mosaic .photo img{transition:transform .8s var(--ease)}
.mosaic .photo:hover img{transform:scale(1.06)}
.lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:30px 0}
.lists .card{padding:24px}
.lists ul{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:16px}
.lists li{display:flex;gap:12px}
.lists li::before{content:'';flex:none;width:8px;height:8px;margin-top:9px;background:var(--green)}
.lists .no li::before{background:var(--ink)}
.lists .yes{background:var(--sage);border-color:var(--sage)}

/* box scene */
.box-sec{padding:0;border-top:1px solid var(--line);overflow-x:clip}
.box-pin{min-height:100vh;display:flex;align-items:center;padding:80px 0}
.box-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:40px;align-items:center;width:100%}
.manifest{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--ink)}
.manifest li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:16px 0;border-bottom:1px solid var(--line);opacity:.35;transform:translateX(-6px);transition:opacity .4s,transform .4s var(--ease)}
.manifest li.on{opacity:1;transform:none}
.manifest .q{font-weight:700;color:var(--green);font-variant-numeric:tabular-nums}
.manifest .t{font-weight:700}
.manifest .d{font-size:16px;color:var(--grey)}
.scene{position:relative;height:640px;perspective:1700px;perspective-origin:50% 30%}
.floor-glow{position:absolute;left:0;right:0;top:62%;height:300px;margin-top:-150px;background:radial-gradient(closest-side,var(--sage) 0%,rgba(227,235,225,0) 100%)}
.world{position:absolute;left:50%;top:62%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-32deg)}
.p3{position:absolute;transform-style:preserve-3d}
.face{position:absolute;left:0;top:0;backface-visibility:visible}
.shadow{position:absolute;left:-230px;top:-170px;width:460px;height:340px;background:radial-gradient(closest-side,rgba(15,26,20,.35),rgba(15,26,20,0));transform:translateZ(0)}
.box{left:-170px;top:-124px;width:340px;height:248px}
.box .floor{width:340px;height:248px;background:#3A4630 url(../img/v5/box-tray.jpg) center/cover;transform:translateZ(1px)}
.box .w-front,.box .w-back{width:340px;height:110px;transform-origin:top center}
.box .w-front{top:248px;transform:rotateX(90deg);background:linear-gradient(#55654a,#4A563E)}
.box .w-back{top:0;transform:rotateX(90deg);background:#3f4a36}
.box .w-left,.box .w-right{width:110px;height:248px;transform-origin:left center}
.box .w-left{left:0;transform:rotateY(-90deg);background:#435039}
.box .w-right{left:340px;transform:rotateY(-90deg);background:linear-gradient(90deg,#3a4531,#4A563E)}
.box .lid{left:0;top:0;width:340px;height:248px;transform-origin:top center;transform:translateZ(110px) rotateX(0deg)}
.lid .top,.lid .under{width:340px;height:248px;backface-visibility:hidden}
.lid .top{background:url(../img/v5/box-top.jpg) center/100% 100%}
.lid .under{background:url(../img/v5/box-lid-inner.jpg) center/100% 100%;transform:rotateX(180deg)}
.lid .lip{width:340px;height:22px;top:248px;transform-origin:top center;transform:rotateX(-90deg);background:#55654a}
.item{left:0;top:0}
.cuboid .f{position:absolute;left:0;top:0;background:#f4f4f1;backface-visibility:visible}
.plane{background-size:100% 100%;box-shadow:0 0 0 1px rgba(0,0,0,.04)}
.scene-note{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:16px;color:var(--grey)}

/* how */
.how{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.how .photo{height:620px}
.steps{list-style:none;margin:28px 0 0;padding:0;position:relative}
.steps::before{content:'';position:absolute;left:21px;top:10px;bottom:10px;width:2px;background:var(--line)}
.steps .rail{position:absolute;left:21px;top:10px;width:2px;height:0;background:var(--green);transition:height .2s linear}
.steps li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:20px;padding:0 0 30px}
.steps .dot{width:44px;height:44px;display:grid;place-items:center;background:var(--bg);border:2px solid var(--line);font-weight:700;font-size:16px;color:var(--grey);position:relative;z-index:1;transition:background .3s,border-color .3s,color .3s}
.steps li.on .dot{background:var(--green);border-color:var(--green);color:#fff}
.steps .t{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.25;padding-top:8px}
.steps .d{color:var(--grey);font-size:17px;margin-top:4px}

/* pricing */
.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.pcard{padding:36px;display:flex;flex-direction:column;gap:16px;position:relative;transition:transform .35s var(--ease),box-shadow .35s}
.pcard:hover{transform:translateY(-4px);box-shadow:0 30px 50px -36px rgba(15,26,20,.5)}
.pcard.rec{border:2px solid var(--green)}
.pcard .badge{position:absolute;top:-15px;left:34px;background:var(--green);color:#fff;font-size:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px}
.pcard .k{font-size:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.pcard .amt{font-size:48px;font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.pcard .save{font-weight:700;color:var(--green)}
.pcard ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:16px;color:var(--grey);flex-grow:1}
.pcard li{display:flex;gap:10px}
.pcard li::before{content:'';flex:none;width:6px;height:6px;margin-top:10px;background:var(--green)}
.price-foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:32px;padding-top:24px;border-top:1px solid var(--line);font-size:16px;color:var(--grey)}

/* faq */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px}
.qa{border-top:1px solid var(--ink)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;min-height:76px;padding:20px 0;display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:20px;font-weight:600;letter-spacing:-.01em}
.qa summary::-webkit-details-marker{display:none}
.qa .pm{position:relative;width:20px;height:20px;flex:none}
.qa .pm::before,.qa .pm::after{content:'';position:absolute;left:0;right:0;top:9px;height:2px;background:var(--green);transition:transform .35s var(--ease)}
.qa .pm::after{transform:rotate(90deg)}
.qa details[open] .pm::after{transform:rotate(0)}
.qa .ans{overflow:hidden;transition:height .35s var(--ease)}
.qa .ans p{margin:0 0 24px;color:var(--grey);max-width:60ch}

/* final cta */
.final{background:var(--sage);padding:0}
.final-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:stretch}
.final-copy{padding:96px 64px 96px 0;display:flex;flex-direction:column;justify-content:center;gap:22px}
.final .photo{min-height:520px}

footer{padding:72px 0 48px;border-top:1px solid var(--line)}
.foot{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:36px}
.foot h4{margin:0 0 12px;font-size:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.foot a{display:block;color:var(--ink);text-decoration:none;font-size:16px;padding:5px 0}
.foot a:hover{color:var(--green)}
.legal{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:16px;color:var(--grey)}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}

.sticky-cta{display:none}

@media (max-width:1080px){
  .nav{gap:20px}
  .h1{font-size:60px}
}
@media (max-width:960px){
  .wrap{padding:0 20px}
  .nav,.head-r .login{display:none}
  .menu-btn{display:block}
  .mnav{position:fixed;inset:66px 0 auto 0;background:var(--bg);border-bottom:1px solid var(--line);padding:12px 20px 24px;z-index:49;flex-direction:column}
  .mnav.open{display:flex}
  .mnav a{color:var(--ink);text-decoration:none;font-size:20px;font-weight:600;padding:14px 0;border-bottom:1px solid var(--line)}
  .head-r .btn{display:none}
  .h1{font-size:44px}
  .h2{font-size:34px}
  .lead{font-size:18px}
  .band{padding:72px 0}
  .hero{padding:32px 0 64px}
  .hero-grid,.goal,.who,.how,.faq,.final-grid,.box-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .heroA .photo{height:460px}
  .heroB{min-height:auto;display:block}
  .heroB .bg{position:relative;height:380px}
  .heroB .bg img{object-position:74% 30%}
  .heroB .hero-copy{padding:8px 0 56px}
  .heroB .chip{display:none}
  .heroC .collage{height:480px}
  .proof .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof .cell{padding:28px 16px 28px 0;border-right:0;border-bottom:1px solid var(--line)}
  .proof .cell:nth-child(2n){padding-left:16px;border-left:1px solid var(--line)}
  .proof .num{font-size:40px}
  .three,.price-grid{grid-template-columns:minmax(0,1fr)}
  .goal-card{padding:22px}
  .inputs{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
  .stepper input{font-size:24px}
  .stepper button{width:40px}
  .goal-out{font-size:24px}
  .stats .v{font-size:20px}
  .chartbox{height:240px}
  .mosaic{grid-template-rows:200px 200px;padding-bottom:32px}
  .mosaic .photo:nth-child(3n+2){transform:translateY(32px)}
  .lists{grid-template-columns:minmax(0,1fr)}
  .box-pin{min-height:auto;padding:72px 0}
  .scene{height:470px;margin:0 -20px}
  .world{top:58%;left:46%}
  .how .photo{height:380px}
  .final-copy{padding:64px 0 40px}
  .final .photo{min-height:340px;margin:0 -20px}
  .foot{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot > div:first-child{grid-column:1/-1}
  .sticky-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--bg);border-top:1px solid var(--line);padding:10px 16px;gap:12px;align-items:center;justify-content:space-between;transform:translateY(110%);transition:transform .35s var(--ease)}
  .sticky-cta.show{transform:none}
  .sticky-cta .p{font-size:16px;font-weight:600;white-space:nowrap}
  .sticky-cta .btn{min-height:48px;padding:0 16px;font-size:16px;white-space:nowrap}
  .hero-switch{bottom:76px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}

/* compact price strip */
.price-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--white);border:1px solid var(--line)}
.price-strip>div{padding:28px;display:flex;flex-direction:column;gap:4px;border-right:1px solid var(--line)}
.price-strip>div:last-child{border-right:0}
.price-strip .k{font-size:16px;color:var(--grey)}
.price-strip .v{font-size:34px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.price-strip .s{font-size:16px;color:var(--green);font-weight:600}
/* spotlight */
.spot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.spot{background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s}
.spot:hover{transform:translateY(-4px);box-shadow:0 30px 50px -36px rgba(15,26,20,.5)}
.spot .pic{aspect-ratio:4/5;background:var(--sage);position:relative;overflow:hidden;display:grid;place-items:center;color:var(--grey);font-weight:600}
.spot .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.spot .stat{position:absolute;left:16px;bottom:16px;background:var(--white);padding:10px 14px;border:1px solid var(--line)}
.spot .stat b{display:block;font-size:28px;letter-spacing:-.03em;color:var(--green);line-height:1.05}
.spot .stat span{font-size:16px;color:var(--grey)}
.spot .b{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px}
.spot .who{font-weight:700;font-size:18px}
.spot .q{margin:0;color:var(--grey);font-size:17px}
.spot.example{border-style:dashed}
.spot .ex{position:absolute;top:14px;left:14px;background:var(--ink);color:#fff;font-size:16px;font-weight:600;padding:4px 10px}
.spot-note{font-size:16px;color:var(--grey);margin:18px 0 0}
@media (max-width:960px){
  .price-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .price-strip>div:nth-child(2){border-right:0}
  .price-strip>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .spot-grid{grid-template-columns:minmax(0,1fr)}
}

/* ── Softer system + accent colours (Oct 2026) ───────────────────────── */
:root{
  --r:20px; --r-sm:14px; --r-xs:10px;
  --lilac:#B8A6D9; --lilac-t:#EEE9F7; --teal:#2F8F7A; --teal-t:#E2F1EC; --action:#34C85A; --sun:#F2C14E; --sun-t:#FBF1D6;
}
.btn{border-radius:999px}
.card,.chip,.stepper,.price-strip,.spot,.goal-card,.pcard,.why-card,.lists .card,.fact,.timeline,.bars,.ev,.extra,.item-card,.s5,.qa details summary{border-radius:var(--r)}
.photo,.why-card .photo,.mosaic .photo,.spot .pic{border-radius:var(--r);overflow:hidden}
.why-card .photo,.spot .pic{border-radius:var(--r) var(--r) 0 0}
.chip{border-radius:var(--r-sm)}
.stepper{border-radius:var(--r-sm);overflow:hidden;border-color:var(--line)}
.stepper button{border-radius:0}
.price-strip{overflow:hidden}
.spot .stat{border-radius:var(--r-xs)}
.pcard .badge,.spot .ex{border-radius:999px}
.qa details summary{border-radius:0}
.ticks li::before{border-radius:50%;background:var(--action)}
.lists li::before{border-radius:50%}
.lists .yes{background:var(--teal-t);border-color:var(--teal-t)}
.manifest .q{color:var(--teal)}
.eyebrow{color:var(--teal)}
.chip .v.g{color:var(--teal)}
.stats .v{color:var(--ink)}
.proof .cell:nth-child(1) .num{color:var(--green)}
.proof .cell:nth-child(2) .num{color:var(--teal)}
.proof .cell:nth-child(3) .num{color:#7A63B0}
.proof .cell:nth-child(4) .num{color:#B07D12}
.price-strip .s{color:var(--teal)}
.price-strip>div:nth-child(2){background:var(--lilac-t)}
.why-card .n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--teal-t);color:var(--teal)}
.why-card:nth-child(2) .n{background:var(--lilac-t);color:#6E57A6}
.why-card:nth-child(3) .n{background:var(--sun-t);color:#9A6A0A}
.steps .dot{border-radius:50%}
.steps li.on .dot{background:var(--teal);border-color:var(--teal)}
.steps .rail{background:var(--teal)}
.legend i{background:var(--green)}
.final{background:linear-gradient(120deg,var(--sage) 0%,var(--teal-t) 55%,var(--lilac-t) 100%)}
.final .photo{border-radius:var(--r) var(--r) 0 0}
.bar{background:linear-gradient(90deg,var(--teal-t),var(--lilac-t))}
.link{border-bottom-color:var(--teal)}
.nav a::after{background:var(--teal)}
.sticky-cta .btn{border-radius:999px}
.box-sec .scene .floor-glow{background:radial-gradient(closest-side,rgba(184,166,217,.35) 0%,rgba(226,241,236,.5) 45%,rgba(247,246,242,0) 100%)}
@media (max-width:960px){
  .final .photo{margin:0 -20px;border-radius:0}
}

/* ── Photographic unboxing (js/unbox.js) ── */
.scene{height:auto}
.ub-stage{position:relative;width:100%;aspect-ratio:100/78;container-type:inline-size;perspective:1400px;perspective-origin:50% 35%}
.ub-table{position:absolute;inset:-6% -8%;-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent 100%);mask-image:radial-gradient(closest-side,#000 55%,transparent 100%);background:
  radial-gradient(60% 55% at 50% 52%,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 70%),
  radial-gradient(70% 60% at 30% 70%,rgba(226,241,236,.85) 0%,rgba(226,241,236,0) 70%),
  radial-gradient(60% 60% at 78% 30%,rgba(238,233,247,.9) 0%,rgba(238,233,247,0) 70%)}
.ub-plane{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 55%}
.ub-box{position:absolute;transform-style:preserve-3d}
.ub-bshadow{position:absolute;inset:6% 3% -4% 3%;border-radius:8px;background:rgba(24,32,26,.42);filter:blur(9px)}
.ub-tray{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.ub-lid{position:absolute;inset:0;transform-origin:50% 0;transform-style:preserve-3d}
.ub-face{position:absolute;left:0;top:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.ub-face img{display:block;width:100%;height:100%;object-fit:fill}
.ub-back{transform:rotateX(180deg)}
.ub-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,30,22,.15),rgba(20,30,22,.75));opacity:0;pointer-events:none}
.ub-item{position:absolute;left:0;top:0;opacity:0;will-change:transform,filter}
.ub-item img{display:block;width:100%;height:auto;user-select:none}
.ub-card img{border-radius:6px}
.scene.ub-done .ub-item{transition:opacity .3s}
.ub-item.ub-dim{opacity:.4!important}
.box-sec .scene .floor-glow{display:none}
@media (max-width:960px){ .scene{margin:8px -8px 0} .ub-table{inset:-4% -2%} }

/* ══ Image cards: the card clips the photo (no hairline at rounded corners) ══ */
.photo{isolation:isolate}
.why-card,.spot{overflow:hidden}
.why-card .photo,.spot .pic{border-radius:0}
.spot .pic img,.why-card .photo img{display:block}
.why6 .card,.why6 .card:hover{border:0}

/* ══ Stories: honest empty state (preview hosts) ══ */
.spot-grid.is-empty{grid-template-columns:minmax(0,1fr)}
.spot-soon{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr);align-items:stretch;background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.spot-soon .copy{padding:48px 48px 48px;display:flex;flex-direction:column;justify-content:center;gap:16px;align-items:flex-start}
.spot-soon h3{margin:0;font-size:32px;line-height:1.1;letter-spacing:-.03em;font-weight:700}
.spot-soon p{margin:0;color:var(--grey);font-size:18px;max-width:46ch}
.spot-soon .link{margin-top:8px}
.spot-soon .pic{position:relative;aspect-ratio:1/1;background:#fff}
.spot-soon .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 100%)}
@media (max-width:960px){
  .spot-soon{grid-template-columns:minmax(0,1fr)}
  .spot-soon .copy{padding:28px 24px 32px}
  .spot-soon h3{font-size:26px}
  .spot-soon .pic{aspect-ratio:16/10;order:-1}
  .spot-soon .pic img{object-position:50% 62%;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 100%)}
}

/* ══ Micrographs: one system ═══════════════════════════════════════════════
   Rule: the micrograph bleeds from the edge of its section or panel and
   dissolves into the ground with a mask gradient (a fade, never a blur). It is
   toned to the green palette with filter + blend, and always carries the same
   small "Fig. n" label on plain ground.
   Dark ground: screen blend (the dark of the image disappears into the green).
   Light ground: multiply blend.                                              */
:root{--mg-tone:grayscale(1) sepia(.55) hue-rotate(118deg) saturate(1.5) brightness(1.08) contrast(1.08)}
.micro-fig{position:relative;margin:0;overflow:hidden}
.micro-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:var(--mg-tone);mix-blend-mode:screen}
.fig{position:absolute;z-index:2;left:24px;bottom:20px;right:24px;display:flex;align-items:center;gap:12px;margin:0;font-size:16px;line-height:1.3;font-weight:500;color:#CFE6DA}
.fig::before{content:"";flex:none;width:24px;height:1px;background:currentColor;opacity:.7}
.fig b{font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8FDCC0;white-space:nowrap}
.fig i{font-style:normal;opacity:.75}
/* panel (science chapters): art bleeds from the top, fades downwards */
.micro-panel{position:relative;margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:5/6;background:linear-gradient(180deg,#1E4D35 0%,#173E2B 100%)}
.micro-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:var(--mg-tone);mix-blend-mode:screen;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 52%,transparent 92%);mask-image:linear-gradient(180deg,#000 0,#000 52%,transparent 92%)}
.micro-panel--light{background:linear-gradient(180deg,#E3EBE1 0%,#EEF3EC 100%)}
.micro-panel--light img{mix-blend-mode:multiply;filter:grayscale(1) sepia(.5) hue-rotate(118deg) saturate(1.1) contrast(1.05)}
.micro-panel--light .fig{color:#3C4A42}
.micro-panel--light .fig b{color:var(--teal)}
@media (max-width:960px){.micro-panel{aspect-ratio:4/3.2}.fig{left:20px;right:20px;bottom:16px}}

/* price strip: values never clip in two columns on phones */
@media (max-width:960px){.price-strip>div{padding:22px 20px}.price-strip .v{font-size:28px}}
@media (max-width:480px){.price-strip>div{padding:18px 14px}.price-strip .v{font-size:22px;overflow-wrap:anywhere}.price-strip .k{font-size:16px}}

/* items sit straight on the page, no backdrop panel */
.ub-table{display:none}