html,body{margin:0;padding:0}img{max-width:100%}[hidden]{display:none!important}
/* Layout: MANTRA green-and-white brand, single light look by choice. Whole page renders from the state JSON; owner edits in a side panel and publishes a new version. */
:root{
  --bg:#FFFFFF; --tint:#EEF5F0; --pale:#C2D7C9; --mint:#6FA080; --ink:#203528; --muted:#4D6656; --line:#D3E3D8;
  --green:#203528; --green-deep:#203528; --on-green:#FFFFFF; --danger:#B42318; --photo:#FAFAFA;
  --display:"Poppins","Arial Black",system-ui,sans-serif;
  --sub:"Syne","Poppins",system-ui,sans-serif;
  --body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:14px; color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-weight:700;font-size:16px;line-height:1.55}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--green-deep)}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);text-wrap:balance;line-height:1.1;margin:0}
h1{font-size:clamp(2rem,6vw,3.5rem);font-weight:700}
h2{font-family:var(--sub);font-size:clamp(1.4rem,3.5vw,2rem);font-weight:700}
h3{font-family:var(--sub);font-size:1.02rem;font-weight:700}
p{margin:0;max-width:62ch}
a{color:inherit}
.eyebrow{font-family:var(--sub);font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.muted{color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;border:0;border-radius:999px;padding:.85em 1.6em;font:inherit;font-weight:700;text-decoration:none;background:var(--green);color:var(--on-green);cursor:pointer;transition:background .15s,transform .15s}
.btn:hover{background:var(--mint);color:var(--ink);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--green);box-shadow:inset 0 0 0 2px var(--green)}
.btn.ghost:hover{background:var(--tint)}
.btn.white{background:var(--on-green);color:var(--green)}
.btn.sm{padding:.5em 1em;font-size:.85rem}
.btn:disabled{opacity:.55;cursor:default;transform:none}
:focus-visible{outline:3px solid var(--green);outline-offset:2px}

header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:linear-gradient(90deg,var(--green-deep),var(--green));color:var(--on-green)}
.nav{display:flex;align-items:center;gap:20px;padding-block:14px;position:relative}
.logo{font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:.12em;text-decoration:none;display:inline-flex;align-items:center}
.logo img{height:38px;width:auto;display:block}
footer .logo img{height:46px}
.links{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.links a{text-decoration:none;font-weight:600;font-size:.92rem;padding:.45em .85em;border-radius:999px;opacity:.85}
.links a:hover{opacity:1}
.links a[aria-current="page"]{background:var(--on-green);color:var(--green-deep);opacity:1}
.menu{display:none;border:0;background:none;color:var(--on-green);font:inherit;font-weight:700;margin-left:auto;cursor:pointer}
@media (max-width:760px){
  .links{display:none;position:absolute;left:0;right:0;top:100%;background:var(--green-deep);flex-direction:column;padding:10px max(16px,env(safe-area-inset-right,0px)) 14px max(16px,env(safe-area-inset-left,0px))}
  .links.open{display:flex}
  .menu{display:block}
}
main{padding-bottom:72px}
.block{padding-block:56px}
.stack{display:grid;gap:14px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* product art: photo when uploaded, drawn can otherwise */
.ph{width:100%;height:100%;object-fit:contain;display:block;min-width:0}
.card .art:has(img.ph),.product .art:has(img.ph),.cat .art:has(img.ph){background:var(--photo)}
.cat .art .ph{width:auto;max-width:100%;height:100%;flex:0 1 auto}
.card .art,.product .art,.mini .thumb{position:relative}
.card .art>.ph,.product .art>.ph,.mini .thumb>.ph{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px)}
.product .art>.ph{inset:32px;width:calc(100% - 64px);height:calc(100% - 64px)}
.mini .thumb>.ph{inset:2px;width:calc(100% - 4px);height:calc(100% - 4px)}
.can{--c1:#7FBF95;--c2:#D5EEDD;position:relative;width:86px;aspect-ratio:1/1.95;max-width:100%;border-radius:12px/9px;
  background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(255,255,255,.22) 30%,rgba(0,0,0,0) 55%,rgba(0,0,0,.22)),linear-gradient(170deg,var(--c1) 0 55%,var(--c2) 55%);
  box-shadow:0 14px 28px -14px rgba(0,0,0,.45)}
.can::before{content:"";position:absolute;inset:-5px 6px auto;height:10px;border-radius:50%;background:linear-gradient(#e6e6ea,#9a9aa3)}
.can span{position:absolute;inset:0;display:grid;place-items:center;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--display);font-weight:700;letter-spacing:.2em;font-size:.82rem;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.tub{width:110px;aspect-ratio:1/1.05;max-width:100%;border-radius:12px;background:linear-gradient(90deg,#0F3D24,#1E6B42 40%,#0F3D24);position:relative;box-shadow:0 14px 28px -14px rgba(0,0,0,.5)}
.tub::before{content:"";position:absolute;inset:-8px -4px auto;height:22px;border-radius:8px;background:#FFFFFF;box-shadow:inset 0 0 0 2px #CFE3D6}
.tub span{position:absolute;inset:auto 0 32%;text-align:center;font-family:var(--display);font-weight:700;color:#fff;font-size:.7rem;letter-spacing:.2em}
.box{--b:#1E8B4C;position:relative;width:118px;aspect-ratio:1/1.3;max-width:100%;border-radius:6px;background:linear-gradient(100deg,rgba(255,255,255,.18),rgba(0,0,0,0) 40%,rgba(0,0,0,.18)),var(--b);box-shadow:0 14px 28px -14px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.08);overflow:hidden}
.box::before{content:"";position:absolute;inset:0 0 auto;height:16%;background:rgba(255,255,255,.92)}
.box::after{content:"12 STICKS";position:absolute;inset:3.5% 0 auto;text-align:center;font-size:.55rem;font-weight:700;letter-spacing:.15em;color:#12301E}
.box span{position:absolute;inset:30% 0 auto;text-align:center;font-family:var(--display);font-weight:700;color:#fff;font-size:.78rem;letter-spacing:.18em}
.box small{position:absolute;inset:auto 8% 12%;text-align:center;background:#fff;color:#12301E;border-radius:999px;font-size:.58rem;font-weight:700;letter-spacing:.12em;padding:.35em 0}
.b-focus{--b:#D9921A}.b-hydrate{--b:#2B83C8}.b-calm{--b:#7457B0}.b-digestion{--b:#3F8F2C}.b-immunity{--b:#D9532A}
.b-variety{--b:linear-gradient(90deg,#D9921A 0 20%,#2B83C8 20% 40%,#7457B0 40% 60%,#3F8F2C 60% 80%,#D9532A 80%)}
.product .art .box{width:200px}
.cat .art .box{width:64px}
.mini .box{width:30px}.mini .box::before,.mini .box::after,.mini .box span,.mini .box small{display:none}
.sdf{--c1:#E8366B;--c2:#F79AB8}.bbl{--c1:#5B3A8C;--c2:#B9A2E0}.tco{--c1:#E3962A;--c2:#F7E3B0}.cul{--c1:#4E9A2E;--c2:#E3EC74}.chl{--c1:#C4162A;--c2:#86C93D}
.mix{display:flex;gap:6px;align-items:flex-end}
.mix .can{width:30px}

.herob{background:var(--tint)}
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;padding-block:56px}
.hero .cans{display:flex;align-items:flex-end;justify-content:center;gap:12px}
.hero .cans .can:nth-child(odd){transform:translateY(-14px)}
.hero .heroimg{display:grid;place-items:center}
.hero .heroimg img{width:100%;height:auto;max-height:440px;object-fit:contain;display:block;filter:drop-shadow(0 24px 30px rgba(32,53,40,.22))}
@media (max-width:760px){.hero{grid-template-columns:1fr}.hero .cans .can{width:56px}}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{padding:.35em .85em;border-radius:999px;background:var(--bg);border:1px solid var(--pale);font-weight:600;font-size:.85rem;color:var(--green-deep)}

.cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:760px){.cats{grid-template-columns:1fr}}
.cat{display:grid;gap:12px;text-decoration:none;background:var(--bg);border:1.5px solid var(--line);border-radius:var(--r);padding:20px;transition:transform .15s,border-color .15s}
.cat:hover,.card:hover{transform:translateY(-3px);border-color:var(--green)}
.cat .art{height:170px;display:flex;align-items:flex-end;justify-content:center;gap:8px;background:var(--tint);border-radius:10px;padding:12px;overflow:hidden}
.cat .art .can{width:46px}
.go{font-weight:700;color:var(--green)}
.benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
@media (max-width:860px){.benefits{grid-template-columns:repeat(2,minmax(0,1fr))}}
.benefit{border-top:3px solid var(--green);padding-top:14px}
.benefit h3{font-size:.95rem;margin-bottom:6px}

.pagehead{background:var(--tint);padding-block:44px 32px}
.pagehead .wrap{display:grid;gap:12px}
.crumbs{font-size:.85rem;color:var(--muted)}
.crumbs a{text-decoration:none;color:var(--green);font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px;padding-block:36px}
.card{display:grid;grid-template-rows:auto 1fr auto;gap:12px;text-decoration:none;background:var(--bg);border:1.5px solid var(--line);border-radius:var(--r);padding:18px;transition:transform .15s,border-color .15s}
.card .art{height:220px;display:grid;place-items:center;background:var(--tint);border-radius:10px;overflow:hidden;padding:10px}
.card .foot{display:flex;justify-content:space-between;align-items:center}
.price{font-weight:700;font-variant-numeric:tabular-nums}
.empty{padding:28px;border:1.5px dashed var(--line);border-radius:var(--r);color:var(--muted);margin-block:36px}

.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;padding-block:36px 56px}
.product .art{display:grid;place-items:center;background:var(--tint);border-radius:20px;height:460px;overflow:hidden;padding:20px}
.product .art .can{width:140px}
.product .art .tub{width:180px}
.bigprice{font-family:var(--display);font-size:1.8rem;font-weight:700;color:var(--green);font-variant-numeric:tabular-nums}
.unit{font-size:.95rem;font-weight:500;color:var(--muted);font-family:var(--body)}
@media (max-width:760px){.product{grid-template-columns:1fr;gap:28px}.product .art{height:300px}.product .art .can{width:100px}}
.more{border-top:1px solid var(--line);padding-block:36px}
.minis{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-top:16px}
.mini{display:flex;gap:12px;align-items:center;text-decoration:none;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;font-weight:600;font-size:.9rem;min-width:0}
.mini:hover{border-color:var(--green)}
.mini .thumb{width:34px;height:44px;flex:none;display:grid;place-items:center;overflow:hidden}
.mini .can{width:20px}.mini .can::before{display:none}
.mini .tub{width:32px}.mini .tub::before,.mini .tub span{display:none}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.step{background:var(--tint);border-radius:var(--r);padding:20px;display:grid;gap:8px}
.step b{font-family:var(--display);color:var(--green);font-size:1.4rem}

form{display:grid;gap:14px;max-width:560px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){.two{grid-template-columns:1fr}}
label{display:grid;gap:6px;font-weight:600;font-size:.9rem}
input,select,textarea{font:inherit;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:10px;padding:.65em .8em;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--green);outline:none}
.ok{font-weight:600;color:var(--green)}
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:40px;padding-block:40px}
@media (max-width:760px){.contact{grid-template-columns:1fr}}

footer{background:linear-gradient(120deg,var(--green-deep) 35%,var(--mint));color:var(--on-green);padding-block:40px;font-size:.9rem}
.footg{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between}
footer .stack{gap:6px;align-content:start}
footer a{text-decoration:none;opacity:.9}
footer input{border-color:transparent}
footer .ok{color:var(--on-green)}
.disclaimer{margin-top:28px;padding-top:16px;border-top:1px solid rgba(255,255,255,.25);text-align:center;font-size:.8rem;opacity:.85}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:#fff;padding:.7em 1.2em;border-radius:999px;font-weight:600;z-index:60;max-width:calc(100% - 32px);text-align:center}

/* ---------- motion & pop ---------- */
@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-14px) rotate(var(--r,0deg))}}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7) rotate(0deg)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
@keyframes rise{from{opacity:.35;translate:0 22px}to{opacity:1;translate:0 0}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes popin{from{opacity:.3;transform:translateY(30px) scale(.94)}to{opacity:1;transform:none}}
@keyframes shine{from{left:-60%}to{left:130%}}
@keyframes spin{to{transform:rotate(360deg)}}
.pagein>*{animation:rise .5s cubic-bezier(.2,.8,.2,1) both}
header{transition:box-shadow .25s}
header.scrolled{box-shadow:0 10px 30px -12px rgba(32,53,40,.55)}
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);pointer-events:none;opacity:0}
.btn:hover::after{opacity:1;animation:shine .7s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(32,53,40,.6)}
.star{position:absolute;width:var(--s,22px);aspect-ratio:1;color:var(--c,#fff);animation:twinkle var(--d,3.2s) ease-in-out infinite;animation-delay:var(--dl,0s);pointer-events:none}
.star svg{width:100%;height:100%;display:block;fill:currentColor}

.hero2{position:relative;overflow:hidden;color:#fff;background:radial-gradient(120% 90% at 85% 10%,#6FA080 0%,rgba(111,160,128,0) 55%),linear-gradient(135deg,#203528 0%,#203528 55%,#6FA080 100%)}
.hero2 .hero{grid-template-columns:1fr 1.05fr;padding-block:64px 40px;position:relative;z-index:1}
.hero2 h1{font-size:clamp(2.4rem,7vw,4.6rem);line-height:1.02;letter-spacing:-.02em}
.hero2 h1 .hl{display:inline-block;background:linear-gradient(90deg,#F8D3DE,#E3D8F5,#D3E5F5,#DCE8D6,#F9D1C9);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero2 .eyebrow{color:#C2D7C9}
.hero2 .lead{color:#C2D7C9;font-size:1.1rem}
.hero2 .pill{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff;transition:transform .2s,background .2s}
.hero2 .pill:hover{transform:translateY(-2px);background:rgba(255,255,255,.22)}
.hero2 .btn{background:#fff;color:var(--green-deep)}
.hero2 .btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.hero-copy>*{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
.hero-copy>*:nth-child(2){animation-delay:.08s}.hero-copy>*:nth-child(3){animation-delay:.16s}.hero-copy>*:nth-child(4){animation-delay:.24s}.hero-copy>*:nth-child(5){animation-delay:.32s}
.canfan{position:relative;height:clamp(300px,42vw,470px);display:flex;align-items:flex-end;justify-content:center}
.canfan a{position:relative;display:block;width:19%;max-width:118px;margin-inline:-1.2%;animation:popin .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*.09s + .15s)}
.canfan a .inner{animation:bob 5s ease-in-out infinite;animation-delay:calc(var(--i)*-1s)}
.canfan a img{width:100%;display:block;filter:drop-shadow(0 26px 22px rgba(0,0,0,.35));transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.canfan a:hover img{transform:translateY(-22px) scale(1.08)}
.canfan a:nth-child(1){--r:-9deg;margin-bottom:18px}.canfan a:nth-child(2){--r:-4deg;margin-bottom:44px}.canfan a:nth-child(3){--r:0deg;margin-bottom:62px;z-index:2}.canfan a:nth-child(4){--r:4deg;margin-bottom:44px}.canfan a:nth-child(5){--r:9deg;margin-bottom:18px}
.canfan .cans{display:flex;gap:10px;align-items:flex-end}
@media (max-width:760px){.hero2 .hero{grid-template-columns:1fr;padding-block:40px 20px}.canfan{height:300px}}

.marquee{background:#fff;border-block:1px solid var(--line);overflow:hidden;padding-block:16px;position:relative;z-index:1}
.marquee .track{display:flex;width:max-content;animation:marquee 26s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee span{font-family:var(--display);font-weight:700;font-size:clamp(1.1rem,2.4vw,1.6rem);letter-spacing:.06em;padding-inline:22px;display:inline-flex;align-items:center;gap:22px;white-space:nowrap}
.marquee span i{display:inline-block;width:18px;height:18px;color:var(--mint)}
.marquee span i svg{width:100%;height:100%;fill:currentColor;display:block}

.lineup{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
@media (max-width:900px){.lineup{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.lineup{grid-template-columns:repeat(2,minmax(0,1fr))}}
.flav{position:relative;overflow:hidden;display:grid;gap:4px;align-content:end;min-height:340px;padding:18px;border-radius:20px;background:var(--fb);color:var(--fd);text-decoration:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.flav::before{content:"";position:absolute;width:160%;aspect-ratio:1;left:-30%;top:-75%;border-radius:50%;background:rgba(255,255,255,.45);transition:transform .5s}
.flav img{position:absolute;left:50%;top:20px;height:62%;width:auto;max-width:none;transform:translateX(-50%) rotate(-6deg);filter:drop-shadow(0 18px 16px rgba(0,0,0,.18));transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.flav:hover{transform:translateY(-8px);box-shadow:0 26px 40px -22px var(--fd)}
.flav:hover img{transform:translateX(-50%) translateY(-10px) rotate(4deg) scale(1.06)}
.flav:hover::before{transform:scale(1.1) translateY(10px)}
.flav b{font-family:var(--display);font-size:1.25rem;position:relative}
.flav small{font-family:var(--sub);font-weight:700;letter-spacing:.04em;position:relative;opacity:.85}
.flav .go2{position:relative;font-weight:700;font-size:.85rem;margin-top:6px}

.cat{position:relative;overflow:hidden}
.cat .art{transition:transform .4s}
.cat:hover .art{transform:scale(1.03)}
.cat .art .ph{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.cat:hover .art .ph{transform:translateY(-8px)}
.cat:hover .art .ph:nth-child(2){transform:translateY(-14px) rotate(3deg)}
.cat:hover .art .ph:nth-child(1){transform:translateY(-6px) rotate(-3deg)}

.badges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:860px){.badges{grid-template-columns:repeat(2,minmax(0,1fr))}}
.badge{display:grid;justify-items:center;text-align:center;gap:12px;padding:26px 16px;border-radius:20px;background:var(--tint);transition:transform .3s,background .3s}
.badge:hover{transform:translateY(-6px);background:var(--pale)}
.badge .ic{width:84px;height:84px;border-radius:50%;border:2.5px solid var(--green);display:grid;place-items:center;color:var(--green);position:relative}
.badge .ic::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px dashed var(--mint);opacity:0;transition:opacity .3s}
.badge:hover .ic::after{opacity:1;animation:spin 6s linear infinite}
.badge .ic svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.badge h3{font-size:1rem}

.stash{position:relative;overflow:hidden;border-radius:28px;background:linear-gradient(135deg,#203528 30%,#6FA080);color:#fff;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:28px;padding:40px}
.stash .eyebrow{color:#C2D7C9}
.stash p{color:#C2D7C9}
.stash img{width:100%;display:block;filter:drop-shadow(0 30px 30px rgba(0,0,0,.45));transform:rotate(1.5deg);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.stash:hover img{transform:rotate(0deg) scale(1.02)}
.stash .btn{background:#fff;color:var(--green-deep)}
.stash .price-tag{font-family:var(--display);font-size:2rem;font-weight:700}
@media (max-width:760px){.stash{grid-template-columns:1fr;padding:24px}}

.card{position:relative;overflow:hidden}
.card .art{background:var(--fb,var(--tint))!important;transition:background .3s}
.card .art>.ph{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.card:hover{box-shadow:0 24px 40px -24px var(--fd,rgba(32,53,40,.5));border-color:var(--fd,var(--green))}
.card:hover .art>.ph{transform:translateY(-8px) scale(1.05) rotate(-2deg)}
.card .go{transition:transform .25s}
.card:hover .go{transform:translateX(4px)}
.product .art{background:var(--fb,var(--tint))!important;position:relative}
.product .art::before{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.55);left:15%;top:15%}
.product .art>.ph{animation:popin .7s cubic-bezier(.2,.8,.2,1) both;filter:drop-shadow(0 26px 24px rgba(0,0,0,.18))}
.product .art .star{z-index:1}
.product .eyebrow{color:var(--fd,var(--green))}
.mini{transition:transform .2s,border-color .2s}
.mini:hover{transform:translateY(-3px)}
.pagehead{position:relative;overflow:hidden;background:linear-gradient(135deg,#203528 35%,#6FA080);color:#fff}
.pagehead .muted,.pagehead .crumbs{color:#C2D7C9}
.pagehead .crumbs a{color:#fff}
.pagehead .wrap{position:relative;z-index:1}
.reveal{animation:rise linear both}
@supports (animation-timeline:view()){.reveal{animation-timeline:view();animation-range:entry 0% entry 60%}}
@supports not (animation-timeline:view()){.reveal{animation:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}}

/* editor */
.editfab{position:fixed;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:40;box-shadow:0 10px 24px -8px rgba(32,53,40,.6)}
.panel{position:fixed;inset:0 0 0 auto;width:min(460px,100%);background:var(--bg);border-left:1px solid var(--line);z-index:50;display:flex;flex-direction:column;box-shadow:-20px 0 40px -20px rgba(0,0,0,.25)}
.panel .top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:calc(16px + env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px)) 14px 18px;border-bottom:1px solid var(--line);background:var(--tint)}
.panel .top h2{font-size:1.05rem}
.panel .body{flex:1;overflow:auto;padding:16px max(18px,env(safe-area-inset-right,0px)) 16px 18px;display:grid;gap:12px;align-content:start}
.panel .bottom{padding:14px max(18px,env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) 18px;border-top:1px solid var(--line);display:grid;gap:8px}
.x{border:0;background:none;color:var(--ink);font-size:1.6rem;line-height:1;cursor:pointer}
details.ed{border:1.5px solid var(--line);border-radius:12px}
details.ed[open]{border-color:var(--green)}
details.ed summary{cursor:pointer;padding:12px 14px;font-weight:700;display:flex;justify-content:space-between;gap:10px;list-style:none}
details.ed summary::-webkit-details-marker{display:none}
details.ed summary small{font-weight:500;color:var(--muted)}
.edbody{padding:0 14px 14px;display:grid;gap:12px}
.edbody label{font-size:.82rem}
.photo{display:flex;gap:12px;align-items:center}
.photo .pv{width:64px;height:64px;border-radius:10px;background:var(--tint);display:grid;place-items:center;overflow:hidden;flex:none;font-size:.7rem;color:var(--muted);text-align:center}
.photo .pv img{width:100%;height:100%;object-fit:cover}
.linkbtn{border:0;background:none;color:var(--green);font:inherit;font-weight:600;font-size:.85rem;cursor:pointer;padding:0;text-decoration:underline}
.linkbtn.danger{color:var(--danger)}
.hint{font-size:.8rem;color:var(--muted);font-weight:500}
.status{font-size:.85rem;font-weight:600;min-height:1.2em}
.status.err{color:var(--danger)}
.sec{font-family:var(--display);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin-top:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Our Team */
.team{display:grid;gap:18px}
.team img{width:100%;height:auto;display:block;border-radius:var(--r);box-shadow:0 24px 40px -24px rgba(32,53,40,.5)}