/** Shopify CDN: Minification failed

Line 3207:0 Unexpected "}"

**/
/* Muby Art v2 · homepage + shared styles (generated by build_theme.py) */

:root{--ink:#0E0F0E;--bone:#F4F3EF;--mist:#E6E5E0;--green:#00D652;--pink:#F58BD6;--lime:#C9F24A;--mute:#6b6b66;
 --disp:"Archivo",Impact,sans-serif;--serif:"Instrument Serif",Georgia,serif;--font:"Instrument Sans","Helvetica Neue",Arial,sans-serif;--mono:"DM Mono",Menlo,monospace;--pill:999px;--gut:clamp(16px,3vw,40px)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bone);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.4}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
.disp{font-family:var(--disp);font-weight:900;font-variation-settings:"wdth" 70;text-transform:uppercase;letter-spacing:-.02em;line-height:.88}
.ser{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 24px;border-radius:var(--pill);background:var(--ink);color:#fff;font-weight:600;font-size:15px;white-space:nowrap;text-decoration:none;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn.g{background:var(--green);color:var(--ink)}
.btn.w{background:#fff;color:var(--ink)}
.btn.o{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.wrap{padding-inline:var(--gut)}
.sec{padding-block:clamp(64px,9vw,120px)}
.dark{background:var(--ink);color:var(--bone)}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* nav */
.nav{position:fixed;left:0;right:0;top:0;z-index:50;height:64px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--gut);color:#fff;mix-blend-mode:difference;transition:background .3s}
.nav .menu{display:flex;gap:2px;font-weight:600;font-size:14px}
.nav .menu a{padding:8px 12px;border-radius:var(--pill);text-decoration:none}
.nav .brand{justify-self:center;display:flex}
.nav .brand svg{height:22px;width:auto}
.nav .r{justify-self:end;display:flex;gap:8px}
.nav .pill{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:var(--pill);border:1.5px solid currentColor;font-weight:600;font-size:14px}
.nav .pill b{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--pill);background:currentColor;font-size:12px}
.nav .pill b span{mix-blend-mode:difference;color:#fff}
@media(max-width:900px){.nav .menu{display:none}.nav{grid-template-columns:auto 1fr}.nav .brand{justify-self:start}}

/* hero */
.hero{position:relative;height:100svh;min-height:600px;max-height:1100px;overflow:hidden;background:var(--ink);color:#fff}
.hero picture,.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.hero img{animation:heroZoom 1.6s cubic-bezier(.2,.8,.2,1) both}
@keyframes heroZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%)}
.hero .c{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 var(--gut) clamp(28px,5vh,56px);display:grid;gap:18px;align-items:end;grid-template-columns:1fr auto}
.hero h1{font-size:clamp(64px,13vw,190px);color:#fff}
.hero h1 em{display:block;font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.02em;font-size:.5em;line-height:1;margin-top:.08em;padding-left:.06em}
.hero .sub{max-width:44ch;font-size:16px;opacity:.9}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hero .stars{display:flex;align-items:center;gap:8px;font-size:13px;opacity:.9}
.hero .stars b{letter-spacing:.06em;color:var(--green)}
.hero .stack{display:grid;gap:14px}
.hero .word{animation:up .9s cubic-bezier(.2,.8,.2,1) .3s both}
.hero .sub,.hero .cta,.hero .stars{animation:up .9s cubic-bezier(.2,.8,.2,1) .55s both}
@keyframes up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media(max-width:900px){.hero .c{grid-template-columns:1fr}.hero img{object-position:50% 20%}.hero h1{font-size:min(17.5vw,110px)}}
@supports(animation-timeline:view()){.hero img{animation:heroPar linear both;animation-timeline:view();animation-range:exit 0% exit 100%}@keyframes heroPar{to{transform:translateY(18%) scale(1.06)}}}

/* marquee */
.mq{overflow:hidden;background:var(--green);color:var(--ink);padding:12px 0;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.mq div{display:inline-block;animation:mq 34s linear infinite;padding-left:0}
.mq span{padding:0 22px}
@keyframes mq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.mq div{animation:none}}

/* stage: pinned product chapters */
.stage{background:var(--mist);color:var(--ink)}
.stage .grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.stage .media{position:sticky;top:0;height:100svh;overflow:hidden;background:#E5E8EB}
.stage .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease,transform 1.2s cubic-bezier(.2,.8,.2,1);transform:scale(1.04)}
.stage .media img.on{opacity:1;transform:none}
.stage .media .tag{position:absolute;left:var(--gut);top:calc(72px + env(safe-area-inset-top,0px));z-index:2;display:flex;gap:8px}
.stage .media .tag span{background:rgba(255,255,255,.7);backdrop-filter:blur(8px);padding:8px 12px;border-radius:var(--pill)}
.stage .steps{padding:12vh var(--gut) 12vh clamp(24px,5vw,80px)}
.stage .ch{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:28px;padding-block:8vh}
.stage .ch h2{font-size:clamp(48px,6.5vw,110px)}
.stage .ch h2 small{display:block;font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.01em;font-size:.42em;line-height:1.1;margin-top:.14em;color:var(--mute)}
.stage .st{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:18px 0;border-top:1px solid rgba(0,0,0,.14);opacity:.42;transition:opacity .4s,transform .4s}
.stage .st.on{opacity:1}
.stage .st .n{font-family:var(--mono);font-size:13px;padding-top:4px}
.stage .st h3{font-weight:700;font-size:20px;letter-spacing:-.02em;margin-bottom:6px}
.stage .st p{font-size:15px;color:#3B3E43;max-width:44ch}
.stage .buy{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:10px}
.stage .buy .pr{font-weight:700;font-size:22px;letter-spacing:-.03em}
.stage .buy .pr s{font-weight:400;font-size:14px;color:var(--mute);margin-left:8px}
@media(max-width:900px){
 .stage .grid{grid-template-columns:1fr}
 .stage .media{height:52svh;top:0;z-index:2}
 .stage .steps{padding:28px var(--gut) 40px}
 .stage .ch{min-height:auto;padding-block:36px;gap:18px}
 .stage .ch h2{font-size:clamp(52px,17vw,90px)}
 .stage .st{padding:14px 0;opacity:1}
}

/* chooser */
.shop{background:var(--bone)}
.shop .head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.shop h2{font-size:clamp(40px,6vw,88px)}
.shop .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{background:#fff;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;position:relative;box-shadow:0 1px 0 rgba(0,0,0,.06);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.08)}
.card .ph{aspect-ratio:4/5;background:#E5E8EB;overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.card:hover .ph img{transform:scale(1.04)}
.card .b{padding:18px 18px 20px;display:grid;gap:8px}
.card .b h3{font-weight:700;font-size:20px;letter-spacing:-.02em}
.card .b p{font-size:14px;color:var(--mute);min-height:2.8em}
.card .row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px}
.card .row .pr{font-weight:700;font-size:18px;white-space:nowrap}
.card .row .pr s{font-weight:400;font-size:13px;color:var(--mute);margin-left:6px}
.card .stk{position:absolute;left:14px;top:14px;background:var(--green);color:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:7px 10px;border-radius:var(--pill)}
.card .stk.p{background:var(--pink)}
@media(max-width:900px){.shop .cards{grid-template-columns:1fr;gap:12px}.card{flex-direction:row}.card .ph{width:36%;aspect-ratio:auto}.card .b{flex:1;padding:14px;min-width:0}.card .b p{min-height:0;display:none}.card .row{flex-wrap:wrap}.card .row .pr{font-size:16px}.card .row .pr s{font-size:12px}.card .btn{height:44px;padding:0 16px;font-size:14px}}

/* full-bleed story with circle reveal */
.story{position:relative;color:#fff;background:var(--ink)}
.story .bg{position:absolute;inset:0;overflow:hidden}
.story .bg img{width:100%;height:100%;object-fit:cover}
.story .in{position:relative;z-index:2;min-height:100svh;display:grid;align-content:end;gap:22px;padding:24vh var(--gut) clamp(40px,8vh,80px);background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.6) 100%)}
.story h2{font-size:clamp(56px,10vw,160px)}
@media(max-width:900px){.story h2{font-size:min(17.5vw,110px)}}
.story h2 em{display:block;font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.02em;font-size:.5em;line-height:1;margin-top:.06em}
.story .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1100px}
.story .f{border-top:1px solid rgba(255,255,255,.35);padding-top:12px}
.story .f b{display:block;font-size:17px;margin-bottom:4px}
.story .f p{font-size:14px;opacity:.85;max-width:34ch}
@media(max-width:900px){.story .facts{grid-template-columns:1fr;gap:10px}.story .in{padding-top:40vh}}
@supports(animation-timeline:view()){
 .story .bg{clip-path:circle(140% at 50% 50%);animation:iris linear both;animation-timeline:view();animation-range:entry 0% entry 75%}
 @keyframes iris{from{clip-path:circle(16% at 50% 55%)}to{clip-path:circle(140% at 50% 50%)}}
}

/* split: Seoul | Stockholm */
.split{display:grid;grid-template-columns:1fr 1fr;background:var(--ink);color:#fff}
.split figure{position:relative;aspect-ratio:4/5;overflow:hidden}
.split figure img{width:100%;height:100%;object-fit:cover}
.split figcaption{position:absolute;left:var(--gut);bottom:24px;right:var(--gut);display:grid;gap:6px}
.split figcaption b{font-size:clamp(28px,4vw,56px)}
.split figcaption p{font-size:14px;max-width:38ch;opacity:.9}
@media(max-width:700px){.split{grid-template-columns:1fr}.split figure{aspect-ratio:4/5}}

/* proof */
.proof{background:var(--bone)}
.proof .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,4vw,60px);align-items:center}
.proof h2{font-size:clamp(40px,6vw,88px);margin-bottom:18px}
.proof .lede{font-size:17px;max-width:44ch;color:#3B3E43;margin-bottom:26px}
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.nums div{border-top:1.5px solid var(--ink);padding-top:12px}
.nums b{display:block;font-family:var(--disp);font-weight:900;font-variation-settings:"wdth" 75;font-size:clamp(36px,4.5vw,64px);line-height:.9;letter-spacing:-.02em}
.nums span{display:block;font-size:13px;color:var(--mute);margin-top:8px;max-width:20ch}
.bas{position:relative;aspect-ratio:3/4;border-radius:22px;overflow:hidden;background:#ddd;user-select:none;touch-action:pan-y}
.bas img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bas .after{clip-path:inset(0 0 0 var(--x,50%))}
.bas .h{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:#fff;transform:translateX(-1px)}
.bas .h::after{content:"↔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;font-size:16px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.bas .lab{position:absolute;top:14px;background:rgba(0,0,0,.55);color:#fff;padding:6px 10px;border-radius:var(--pill);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.bas .lab.l{left:14px}.bas .lab.r{right:14px}
.bas input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
@media(max-width:900px){.proof .grid{grid-template-columns:1fr}.nums{gap:8px}}

/* reviews wall */
.wall{background:var(--ink);color:var(--bone)}
.wall .head{display:flex;justify-content:space-between;align-items:end;margin-bottom:24px;gap:16px;flex-wrap:wrap}
.wall h2{font-size:clamp(40px,6vw,88px)}
.wall .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.wall .r{position:relative;aspect-ratio:3/4;border-radius:18px;overflow:hidden;background:#222}
.wall .r img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.wall .r:hover img{transform:scale(1.04)}
.wall .r .q{position:absolute;inset:auto 0 0 0;padding:70px 18px 18px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.75));display:grid;gap:8px}
.wall .r .q p{font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.6vw,24px);line-height:1.15;letter-spacing:-.01em}
.wall .r .q span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.wall .r .v{position:absolute;left:14px;top:14px;background:var(--green);color:var(--ink);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:6px 9px;border-radius:var(--pill)}
@media(max-width:900px){.wall .grid{grid-template-columns:1fr 1fr;gap:8px}.wall .r .q{padding:50px 12px 12px}.wall .r .q p{font-size:15px}}

/* feed strip */
.feed{background:var(--bone);overflow:hidden}
.feed .track{display:flex;gap:10px;padding:0 var(--gut);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.feed .track::-webkit-scrollbar{display:none}
.feed .track figure{flex:0 0 auto;width:min(76vw,360px);aspect-ratio:3/4;border-radius:18px;overflow:hidden;scroll-snap-align:start;position:relative;background:#ddd}
.feed .track figure.w{width:min(90vw,560px);aspect-ratio:16/10}
.feed .track img{width:100%;height:100%;object-fit:cover}
.feed figcaption{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.85);padding:6px 10px;border-radius:var(--pill);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.feed .head{display:flex;justify-content:space-between;align-items:end;padding:0 var(--gut);margin-bottom:18px}
.feed h2{font-size:clamp(34px,5vw,72px)}

/* group break */
.brk{position:relative;color:#fff;background:var(--ink);overflow:hidden}
.brk img{width:100%;height:min(90svh,900px);object-fit:cover;object-position:50% 40%}
.brk .t{position:absolute;left:0;right:0;bottom:0;padding:0 var(--gut) clamp(28px,6vh,64px);display:grid;gap:12px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.6))}
.brk h2{font-size:clamp(44px,8vw,140px)}
.brk h2 em{display:block;font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.02em;font-size:.5em;margin-top:.06em}

/* myth cards */
.myth{background:var(--bone)}
.myth .head{padding:0 var(--gut);margin-bottom:18px;display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.myth h2{font-size:clamp(40px,6vw,88px)}
.myth .track{display:flex;gap:12px;padding:0 var(--gut) 8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.myth .track::-webkit-scrollbar{display:none}
.mc{flex:0 0 auto;width:min(82vw,420px);aspect-ratio:3/4;border-radius:22px;overflow:hidden;position:relative;scroll-snap-align:start;background:#222;color:#fff;cursor:pointer;text-align:left}
.mc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .5s}
.mc .stamp{position:absolute;left:14px;right:14px;top:16px;font-family:var(--disp);font-weight:900;font-variation-settings:"wdth" 70;text-transform:uppercase;font-size:clamp(34px,5vw,58px);line-height:.9;letter-spacing:-.02em;text-shadow:0 2px 20px rgba(0,0,0,.4);transition:opacity .4s}
.mc .stamp small{display:block;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.14em;margin-bottom:8px;text-transform:uppercase;opacity:.9}
.mc .ans{position:absolute;inset:0;padding:22px;display:grid;align-content:end;gap:10px;background:rgba(14,15,14,.86);opacity:0;transition:opacity .4s}
.mc .ans b{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.mc .ans p{font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.4vw,34px);line-height:1.05}
.mc .ans span{font-size:14px;opacity:.85}
.mc .tap{position:absolute;left:14px;bottom:14px;background:rgba(255,255,255,.85);color:var(--ink);padding:7px 11px;border-radius:var(--pill);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;transition:opacity .3s}
.mc.open img{transform:scale(1.06);filter:blur(4px)}
.mc.open .ans{opacity:1}
.mc.open .tap,.mc.open .stamp{opacity:0}

/* offer */
.offer{position:relative;color:#fff;background:var(--ink);overflow:hidden}
.offer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.offer::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.35) 60%,rgba(0,0,0,.1) 100%)}
.offer .in{position:relative;z-index:2;min-height:80svh;display:grid;align-content:center;gap:18px;padding:clamp(60px,12vh,140px) var(--gut);max-width:720px}
.offer h2{font-size:clamp(48px,8vw,130px)}
.offer h2 em{display:block;font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.02em;font-size:.5em;margin-top:.06em}
.offer .code{display:inline-flex;align-items:center;gap:12px;border:1.5px dashed rgba(255,255,255,.7);padding:12px 16px;border-radius:14px;width:max-content}
.offer .code b{font-family:var(--mono);font-size:22px;letter-spacing:.14em}
.offer .code button{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:8px 10px;border-radius:var(--pill);background:#fff;color:var(--ink)}
.offer .cd{font-family:var(--mono);font-size:13px;letter-spacing:.08em;opacity:.9}
.offer ul{list-style:none;display:grid;gap:6px;font-size:15px}
.offer li::before{content:"✓";color:var(--green);margin-right:10px}

/* faq */
.faq{background:var(--bone)}
.faq .grid{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(20px,5vw,80px)}
.faq h2{font-size:clamp(40px,6vw,88px)}
.faq details{border-top:1px solid rgba(0,0,0,.15)}
.faq details:last-child{border-bottom:1px solid rgba(0,0,0,.15)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:14px;padding:18px 0;font-weight:700;font-size:18px;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:22px;line-height:1;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 18px;font-size:16px;color:#3B3E43;max-width:60ch}
.faq .zr{margin-top:22px;background:var(--lime);border-radius:18px;padding:18px 20px;display:grid;gap:6px}
.faq .zr b{font-size:18px;letter-spacing:-.02em}
.faq .zr p{font-size:14px}
@media(max-width:900px){.faq .grid{grid-template-columns:1fr}}

/* footer */
footer{background:var(--ink);color:var(--bone);padding:48px var(--gut) calc(110px + env(safe-area-inset-bottom,0px))}
footer .g{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}
footer .g h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin-bottom:12px}
footer a{display:block;text-decoration:none;font-size:14px;padding:4px 0;opacity:.9}
footer .big{font-size:clamp(48px,8vw,120px)}
footer .fine{margin-top:36px;font-size:12px;opacity:.6;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media(max-width:900px){footer .g{grid-template-columns:1fr 1fr}footer .g>div:first-child{grid-column:1/-1}}

/* sticky buy bar + toast */
.bar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:60;display:none;align-items:center;gap:10px;padding:8px 8px 8px 12px;border-radius:var(--pill);background:rgba(14,15,14,.92);color:#fff;backdrop-filter:blur(12px);transform:translateY(120%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.bar.on{transform:none}
.bar .t{flex:1;display:grid;line-height:1.15}
.bar .t b{font-size:14px}.bar .t span{font-size:12px;opacity:.75}
.bar .btn{height:44px;padding:0 18px;font-size:14px}
@media(max-width:900px){.bar{display:flex}}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--green);color:var(--ink);padding:12px 18px;border-radius:var(--pill);font-size:14px;font-weight:600;opacity:0;transition:.25s;z-index:95;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}


/* ===== v2 additions ===== */

/* trust row under hero CTA */
.hero .trust{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.hero .trust span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:8px;vertical-align:middle}
.hero .trust{animation:up .9s cubic-bezier(.2,.8,.2,1) .7s both}
.hero .vid{position:absolute;right:var(--gut);top:calc(80px + env(safe-area-inset-top,0px));z-index:3;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;border:1px solid rgba(255,255,255,.5);padding:6px 10px;border-radius:var(--pill);opacity:.8}

/* slot placeholders (heroes + worlds) */
.slot{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.slot img{width:100%;height:min(100svh,900px);object-fit:cover;object-position:50% 40%}
.slot .t{position:absolute;inset:0;display:grid;align-content:end;gap:14px;padding:0 var(--gut) clamp(28px,6vh,64px);background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.65))}
.slot h2{font-size:clamp(48px,9vw,150px)}
.slot h2 em{display:block;font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.02em;font-size:.5em;margin-top:.06em}
.slot .note{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;border:1px dashed rgba(255,255,255,.5);padding:7px 11px;border-radius:var(--pill);width:max-content;opacity:.85}
.slot .worldnav{display:flex;gap:8px;flex-wrap:wrap}
.slot .worldnav button{height:44px;padding:0 16px;border-radius:var(--pill);border:1.5px solid rgba(255,255,255,.6);color:#fff;font-weight:600;font-size:14px}
.slot .worldnav button.on{background:var(--green);color:var(--ink);border-color:var(--green)}
.slot .worldbuy{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
@media(max-width:900px){.slot img{height:92svh}}

/* heroes mini (placeholder until the molecules chat delivers) */
.heroes{background:var(--ink);color:var(--bone)}
.heroes .head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.heroes h2{font-size:clamp(40px,6vw,88px)}
.heroes .tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:6px;margin-bottom:18px}
.heroes .tabs::-webkit-scrollbar{display:none}
.heroes .tabs button{flex:0 0 auto;height:40px;padding:0 14px;border-radius:var(--pill);border:1.5px solid rgba(255,255,255,.35);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#fff;transition:.2s}
.heroes .tabs button.on{background:var(--green);color:var(--ink);border-color:var(--green)}
.heroes .panel{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,4vw,60px);align-items:center}
.heroes .panel img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;background:#222}
.heroes .panel .n{font-family:var(--disp);font-weight:900;font-variation-settings:"wdth" 72;font-size:clamp(56px,8vw,120px);line-height:.88;letter-spacing:-.02em;color:var(--green)}
.heroes .panel .n small{display:block;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.14em;color:var(--bone);opacity:.7;margin-top:8px;text-transform:uppercase}
.heroes .panel h3{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(26px,3vw,40px);line-height:1.05;margin:16px 0 10px}
.heroes .panel p{font-size:15px;opacity:.85;max-width:46ch}
.heroes .panel .in{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.heroes .panel .in span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;border:1px solid rgba(255,255,255,.35);padding:6px 10px;border-radius:var(--pill)}
.heroes .hp{display:none}.heroes .hp.on{display:contents}
@media(max-width:900px){.heroes .panel{grid-template-columns:1fr}}

/* before/after numbers next to slider + caption */
.proof .cap{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin-top:10px}
.proof .wk{margin-top:18px;font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.4vw,30px);line-height:1.1;max-width:24ch}

/* ===== comparison A: the shelf ===== */
.cmpA{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.cmpA .pic{position:relative;height:min(100svh,880px)}
.cmpA .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.cmpA .pic .dim{position:absolute;inset:0;background:rgba(14,15,14,0);transition:background 1.2s cubic-bezier(.2,.8,.2,1)}
.cmpA .pic .spot{position:absolute;inset:0;background:radial-gradient(ellipse 15% 42% at 50% 62%,rgba(14,15,14,0) 55%,rgba(14,15,14,.86) 100%);opacity:0;transition:opacity 1.2s cubic-bezier(.2,.8,.2,1)}
.cmpA.in .pic .spot{opacity:1}
.cmpA .pic .t{position:absolute;left:0;right:0;top:0;padding:clamp(80px,12vh,120px) var(--gut) 0;display:grid;gap:8px;z-index:2}
.cmpA h2{font-size:clamp(46px,8vw,130px)}
.cmpA h2 em{display:block;font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.02em;font-size:.5em;margin-top:.06em;opacity:0;transform:translateY(10px);transition:.8s .5s}
.cmpA.in h2 em{opacity:1;transform:none}
.cmpA .pic .tag{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);z-index:2;background:var(--green);color:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:8px 12px;border-radius:var(--pill);opacity:0;transition:.6s .9s}
.cmpA.in .pic .tag{opacity:1}
.cmpA .rows{padding:clamp(28px,5vw,60px) var(--gut) clamp(48px,7vw,90px)}
.cmpA .rows .hd{display:grid;grid-template-columns:1fr 1fr;gap:14px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.25)}
.cmpA .rows .hd b{color:var(--green)}
.cmpA .rows .hd span:last-child{opacity:.5}
.cmpA .rw{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.12);align-items:start}
.cmpA .rw .m b{display:block;font-size:17px;letter-spacing:-.01em;margin-bottom:4px}
.cmpA .rw .m p{font-size:14px;opacity:.85;max-width:38ch}
.cmpA .rw .o{font-family:var(--serif);font-style:italic;font-size:18px;opacity:.5;text-decoration:line-through;text-decoration-color:var(--pink);text-decoration-thickness:1.5px;padding-top:2px}
.cmpA .bar{height:6px;border-radius:6px;background:rgba(255,255,255,.14);margin-top:12px;overflow:hidden}
.cmpA .bar i{display:block;height:100%;width:0;background:var(--green);border-radius:4px;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.cmpA .rw .o .bar i{background:rgba(255,255,255,.35)}
.cmpA.in .bar i{width:var(--w)}
.sw{display:inline-flex;border:1.5px solid rgba(255,255,255,.35);border-radius:var(--pill);padding:3px;gap:2px}
.sw button{height:36px;padding:0 14px;border-radius:var(--pill);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.sw button.on{background:#fff;color:var(--ink)}
.cmp-set{display:none}.cmp-set.on{display:block}
@media(max-width:900px){.cmpA .pic{height:70svh}.cmpA .rows .hd,.cmpA .rw{grid-template-columns:1.2fr .8fr}.cmpA .rw .o{font-size:15px}}

/* ===== comparison B: the swipe ===== */
.cmpB{background:var(--bone);color:var(--ink)}
.cmpB .head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.cmpB h2{font-size:clamp(40px,6vw,88px)}
.cmpB .swipe{position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#222;user-select:none;touch-action:pan-y;color:#fff}
.cmpB .swipe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmpB .swipe .r{clip-path:inset(0 0 0 var(--x,50%))}
.cmpB .swipe .h{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:var(--green);transform:translateX(-1px);z-index:2}
.cmpB .swipe .h::after{content:"↔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:var(--green);color:var(--ink);display:grid;place-items:center;font-size:18px;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.cmpB .swipe .lab{position:absolute;top:16px;font-family:var(--disp);font-weight:900;font-variation-settings:"wdth" 70;text-transform:uppercase;font-size:clamp(28px,5vw,64px);line-height:.9;letter-spacing:-.02em;text-shadow:0 2px 20px rgba(0,0,0,.5);z-index:1}
.cmpB .swipe .lab.l{left:16px}.cmpB .swipe .lab.r2{right:16px;color:var(--green)}
.cmpB .swipe .lab small{display:block;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-top:6px;text-shadow:none;opacity:.9}
.cmpB .swipe input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:3}
.cmpB .track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-top:14px;padding-bottom:6px}
.cmpB .track::-webkit-scrollbar{display:none}
.cmpB .cc{flex:0 0 auto;width:min(78vw,300px);scroll-snap-align:start;background:#fff;border-radius:18px;padding:16px;display:grid;gap:10px;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.cmpB .cc .k{opacity:.6}
.cmpB .cc .m{font-size:16px;font-weight:700;letter-spacing:-.01em}
.cmpB .cc .m::before{content:"Muby";display:block;font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:2px}
.cmpB .cc .o{font-family:var(--serif);font-style:italic;font-size:17px;opacity:.55;border-top:1px solid rgba(0,0,0,.1);padding-top:10px}
.cmpB .cc .o::before{content:"The rest";display:block;font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin-bottom:2px}
.sw.dk{border-color:rgba(0,0,0,.25)}.sw.dk button{color:var(--ink)}.sw.dk button.on{background:var(--ink);color:#fff}
@media(max-width:900px){.cmpB .swipe{aspect-ratio:4/5}}

/* ===== comparison C: the dose ===== */
.cmpC{background:var(--mist);color:var(--ink)}
.cmpC .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(20px,5vw,80px);align-items:start}
.cmpC h2{font-size:clamp(40px,6vw,88px);margin-bottom:12px}
.cmpC .lede{font-size:16px;color:#3B3E43;max-width:40ch;margin-bottom:18px}
.cmpC .ph{border-radius:18px;overflow:hidden;aspect-ratio:4/5;background:#ddd;margin-top:18px}
.cmpC .ph img{width:100%;height:100%;object-fit:cover}
.cmpC .dose{display:grid;gap:6px}
.cmpC .d{padding:16px 0;border-top:1px solid rgba(0,0,0,.14)}
.cmpC .d b{display:block;font-size:17px;letter-spacing:-.01em}
.cmpC .d .l{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;margin-top:10px}
.cmpC .d .l .k{opacity:.65}
.cmpC .d .l .b{height:10px;border-radius:10px;background:rgba(0,0,0,.08);overflow:hidden}
.cmpC .d .l .b i{display:block;height:100%;width:0;border-radius:10px;background:var(--green);transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.cmpC .d .l.o .b i{background:rgba(14,15,14,.28);transition-delay:.2s}
.cmpC .d .l span{font-size:13px;white-space:nowrap}
.cmpC .d .l.o span{opacity:.55;font-family:var(--serif);font-style:italic;font-size:15px}
.cmpC.in .d .l .b i{width:var(--w)}
.cmpC .fine{margin-top:14px;font-size:12px;opacity:.55}
@media(max-width:900px){.cmpC .grid{grid-template-columns:1fr}.cmpC .ph{display:none}}

/* variant picker (review only) */
.vpick{position:relative;z-index:40;padding-top:84px!important;background:var(--pink);color:var(--ink);padding:10px var(--gut);display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.vpick b{margin-right:auto}
.vpick button{height:32px;padding:0 12px;border-radius:var(--pill);border:1.5px solid var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.vpick button.on{background:var(--ink);color:#fff}
.cmpv{display:none}.cmpv.on{display:block}

/* which one is you + chooser */
.shop .you{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.shop .you button{height:44px;padding:0 16px;border-radius:var(--pill);border:1.5px solid rgba(0,0,0,.2);font-size:14px;font-weight:600;transition:.2s}
.shop .you button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.card{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,outline-color .25s;outline:3px solid transparent;outline-offset:2px}
.card.hi{outline-color:var(--green);transform:translateY(-4px)}
.card .b .sp{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--mute)}

/* routine film + 40 s strip */
.film{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.film img{width:100%;height:min(100svh,900px);object-fit:cover;object-position:50% 50%}
.film .t{position:absolute;inset:0;display:grid;align-content:end;gap:16px;padding:0 var(--gut) clamp(28px,6vh,64px);background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.65))}
.film h2{font-size:clamp(48px,9vw,150px)}
.film h2 em{display:block;font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.02em;font-size:.5em;margin-top:.06em}
.strip{background:var(--green);color:var(--ink);padding:18px var(--gut) 22px}
.strip .row{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center}
.strip .n{font-family:var(--disp);font-weight:900;font-variation-settings:"wdth" 72;font-size:clamp(40px,6vw,80px);line-height:.9;letter-spacing:-.02em}
.strip .n small{display:block;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-top:6px}
.strip .tl{position:relative;height:6px;border-radius:6px;background:rgba(14,15,14,.18)}
.strip .tl i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ink);border-radius:6px}
.strip.in .tl i{animation:tl 40s linear forwards}
@keyframes tl{to{width:100%}}
.strip .tl span{position:absolute;top:14px;transform:translateX(-50%);font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.strip .tl span::before{content:"";position:absolute;left:50%;top:-14px;width:10px;height:10px;border-radius:50%;background:var(--ink);transform:translateX(-50%)}
.strip .tl span:nth-child(2){left:8%}.strip .tl span:nth-child(3){left:50%}.strip .tl span:nth-child(4){left:92%}
.strip .cta .btn{background:var(--ink);color:#fff}
@media(max-width:900px){.strip .row{grid-template-columns:auto 1fr}.strip .cta{grid-column:1/-1}.strip .tl span{font-size:9.5px}}

/* ===== Myth or Muby v2: flip cards ===== */
.myth .head p.k{max-width:none}
.myth .prog{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.myth .prog .dots{display:flex;gap:5px}
.myth .prog .dots i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--ink);transition:.3s}
.myth .prog .dots i.myth{background:var(--pink);border-color:var(--pink)}
.myth .prog .dots i.muby{background:var(--green);border-color:var(--green)}
.fc{flex:0 0 auto;width:min(82vw,400px);aspect-ratio:3/4;scroll-snap-align:start;perspective:1400px;cursor:pointer;background:none;text-align:left;color:var(--ink)}
.fc .card3{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.8,.2,1);border-radius:22px}
.fc.open .card3{transform:rotateY(180deg)}
.fc .f,.fc .b{position:absolute;inset:0;border-radius:22px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;padding:20px}
.fc .f{background:#fff;color:var(--ink);align-content:space-between;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.fc .f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
.fc .f .top,.fc .f .bot{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:8px}
.fc .f .q{position:relative;z-index:1;font-family:var(--serif);font-style:italic;font-size:clamp(28px,3vw,40px);line-height:1.02;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.6);align-self:end}
.fc .f .pill{background:var(--green);color:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:8px 12px;border-radius:var(--pill);font-weight:500}
.fc .f .qm{width:40px;height:40px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;font-family:var(--disp);font-weight:900;font-size:22px}
.fc .f .num{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.fc .b{transform:rotateY(180deg);align-content:space-between;color:#fff}
.fc .b.myth{background:var(--ink)}
.fc .b.muby{background:var(--green);color:var(--ink)}
.fc .b .stamp{font-family:var(--disp);font-weight:900;font-variation-settings:"wdth" 70;text-transform:uppercase;font-size:clamp(56px,7vw,96px);line-height:.85;letter-spacing:-.03em;transform:rotate(-8deg) scale(.6);opacity:0;transition:.5s .35s cubic-bezier(.2,1.4,.3,1);transform-origin:left top;display:inline-block;border:5px solid currentColor;padding:6px 12px;border-radius:10px}
.fc .b.myth .stamp{color:var(--pink)}
.fc.open .b .stamp{transform:rotate(-8deg) scale(1);opacity:1}
.fc .b p{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.3vw,30px);line-height:1.05}
.fc .b span{font-size:14px;opacity:.85;display:block;margin-top:8px}
.fc .b .flip{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.fc.nudge .card3{animation:wob 4s ease-in-out infinite}
@keyframes wob{0%,80%,100%{transform:rotateY(0)}86%{transform:rotateY(-10deg)}92%{transform:rotateY(6deg)}}
.myth .done{margin:18px var(--gut) 0;background:var(--ink);color:#fff;border-radius:22px;padding:22px;display:none;grid-template-columns:1fr auto;gap:14px;align-items:center}
.myth .done.on{display:grid;animation:up .6s cubic-bezier(.2,.8,.2,1) both}
.myth .done b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(22px,2.6vw,34px);line-height:1.05;display:block}
.myth .done p{font-size:14px;opacity:.8;margin-top:6px}
@media(max-width:700px){.myth .done{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.fc.nudge .card3{animation:none}.fc .card3{transition:none}}

/* offer: complete the routine */
.offer .in .k{color:var(--green)}

/* footer v2 */
footer .tr{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.8;margin-top:14px}
footer .spf{font-family:var(--serif);font-style:italic;font-size:18px;opacity:.85;margin-top:16px;max-width:30ch}

/* ===== cart drawer ===== */
.cdim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:80;opacity:0;pointer-events:none;transition:opacity .3s}
.cdim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--bone);color:var(--ink);z-index:90;transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.8,.2,1);display:grid;grid-template-rows:auto 1fr auto;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
.drawer.on{transform:none}
.drawer .hd{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid rgba(0,0,0,.1)}
.drawer .hd b{font-size:18px;letter-spacing:-.02em}
.drawer .hd button{width:40px;height:40px;border-radius:50%;background:#fff;font-size:20px}
.drawer .items{overflow:auto;padding:12px 20px;display:grid;gap:10px;align-content:start}
.drawer .it{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;background:#fff;border-radius:14px;padding:10px}
.drawer .it img{width:64px;height:80px;object-fit:cover;border-radius:8px;background:#E5E8EB}
.drawer .it b{display:block;font-size:15px}.drawer .it span{font-size:13px;color:var(--mute)}
.drawer .it .qty{display:flex;align-items:center;gap:8px;font-weight:600}
.drawer .it .qty button{width:28px;height:28px;border-radius:50%;border:1.5px solid rgba(0,0,0,.2);font-size:15px}
.drawer .empty{padding:40px 0;text-align:center;color:var(--mute);font-family:var(--serif);font-style:italic;font-size:22px}
.drawer .nudge{margin:4px 0;background:var(--lime);border-radius:14px;padding:14px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.drawer .nudge b{display:block;font-size:15px;letter-spacing:-.01em}.drawer .nudge span{font-size:13px}
.drawer .nudge .btn{height:40px;padding:0 14px;font-size:13px}
.drawer .ft{padding:14px 20px 18px;border-top:1px solid rgba(0,0,0,.1);display:grid;gap:10px}
.drawer .ft .tot{display:flex;justify-content:space-between;font-size:16px}
.drawer .ft .tot b{font-size:20px;letter-spacing:-.02em}
.drawer .ft .code{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.drawer .ft .code b{color:var(--ink)}
.drawer .ft .btn{width:100%}
.drawer .ft .perks{display:flex;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.65}

/* ===== v2.1 additions ===== */
.nav .brand img{filter:none}
/* section 2 variants */
.stv{display:none}.stv.on{display:block}
.trio{background:var(--ink);color:#fff;padding-block:clamp(48px,7vw,96px) 0}
.trio .head{margin-bottom:26px}
.trio h2,.ledger h2,.stripes h2{font-size:clamp(44px,7vw,120px)}
.trio h2 em,.ledger h2 em,.stripes h2 em{display:block;font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.02em;font-size:.5em;margin-top:.06em}
.trio .panels{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.trio figure{position:relative;aspect-ratio:3/4;overflow:hidden;background:#222}
.trio figure img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.trio figure:hover img{transform:scale(1.04)}
.trio figcaption{position:absolute;inset:auto 0 0 0;padding:90px 20px 22px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.75));display:grid;gap:6px}
.trio figcaption .k{color:var(--green)}
.trio figcaption b{font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em}
.trio figcaption p{font-size:14px;opacity:.85;max-width:36ch}
@media(max-width:900px){.trio .panels{grid-template-columns:1fr;gap:3px}.trio figure{aspect-ratio:4/5}.trio figcaption{padding:70px 16px 18px}}
.ledger{background:var(--ink);color:#fff}
.ledger .grid{display:grid;grid-template-columns:1fr 1fr}
.ledger .pic{position:sticky;top:0;height:100svh;overflow:hidden}
.ledger .pic img{width:100%;height:100%;object-fit:cover}
.ledger .txt{padding:clamp(60px,10vh,120px) var(--gut);display:grid;gap:28px;align-content:center;min-height:100svh}
.ledger .row{display:grid;grid-template-columns:48px 1fr;gap:14px;padding:22px 0;border-top:1px solid rgba(255,255,255,.2)}
.ledger .row:last-child{border-bottom:1px solid rgba(255,255,255,.2)}
.ledger .row .n{font-family:var(--mono);font-size:13px;color:var(--green);padding-top:4px}
.ledger .row b{display:block;font-size:20px;letter-spacing:-.02em;margin-bottom:6px}
.ledger .row p{font-size:15px;opacity:.85;max-width:44ch}
.ledger .btn{background:#fff;color:var(--ink)}
@media(max-width:900px){.ledger .grid{grid-template-columns:1fr}.ledger .pic{position:relative;height:60svh}.ledger .txt{min-height:auto;padding:40px var(--gut) 56px}}
.stripes{background:var(--ink);color:#fff;padding-top:clamp(48px,7vw,96px)}
.stripes .head{margin-bottom:22px}
.stripes .band{position:relative;height:min(62svh,560px);overflow:hidden;border-top:2px solid var(--ink)}
.stripes .band img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.stripes .band .t{position:absolute;inset:0;display:grid;align-content:end;gap:8px;padding:0 var(--gut) 28px;background:linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,.05))}
.stripes .band .k{color:var(--green)}
.stripes .band b{font-size:clamp(34px,5vw,80px)}
.stripes .band p{font-size:15px;opacity:.9;max-width:40ch}
@media(max-width:900px){.stripes .band{height:56svh}}

/* proof v2 */
.proof2{position:relative;background:var(--ink);color:var(--bone);overflow:hidden;padding-block:clamp(72px,10vw,140px)}
.proof2 .big{position:absolute;inset:0;pointer-events:none;display:grid;align-content:start;overflow:hidden}
.proof2 .big .bg{font-size:clamp(160px,32vw,520px);line-height:.8;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.12);white-space:nowrap;transform:translate(-2%,-12%);animation:drift 30s linear infinite alternate}
@keyframes drift{to{transform:translate(-8%,-12%)}}
@media(prefers-reduced-motion:reduce){.proof2 .big .bg{animation:none}}
.proof2 .in{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,80px);align-items:center}
.proof2 h2{font-size:clamp(44px,6.5vw,100px);margin:10px 0 16px}
.proof2 .lede{font-size:16px;opacity:.85;max-width:44ch;margin-bottom:28px}
.nums2{display:grid;grid-template-columns:1fr 1fr;gap:0}
.nums2>div{padding:18px 18px 18px 0;border-top:1px solid rgba(255,255,255,.2);display:grid;gap:4px}
.nums2>div:nth-child(even){padding-left:18px;border-left:1px solid rgba(255,255,255,.2)}
.nums2 b{font-family:var(--disp);font-weight:900;font-variation-settings:"wdth" 75;font-size:clamp(44px,5.5vw,88px);line-height:.9;letter-spacing:-.02em;color:var(--green)}
.nums2 span{font-size:14px;opacity:.9;max-width:22ch}
.nums2 em{font-family:var(--mono);font-style:normal;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.55}
.proof2 .wk{margin-top:22px;font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.4vw,30px);line-height:1.1;max-width:24ch}
.proof2 .bas{box-shadow:0 30px 80px rgba(0,0,0,.5)}
.proof2 .bas::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent calc(var(--x) - 40px),rgba(0,214,82,.25) var(--x),transparent calc(var(--x) + 40px));mix-blend-mode:screen}
.proof2 .bas .h{background:var(--green)}
.proof2 .bas .h::after{background:var(--green)}
.proof2.in .bas{animation:sweep 2.4s cubic-bezier(.4,0,.2,1) .3s both}
@keyframes sweep{0%{--x:50%}40%{--x:14%}80%{--x:86%}100%{--x:50%}}
@property --x{syntax:"<percentage>";inherits:true;initial-value:50%}
.proof2 .cap{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.55;margin-top:12px}
@media(max-width:900px){.proof2 .in{grid-template-columns:1fr}.nums2 b{font-size:44px}}

/* your words v2: horizontal wall of real photos */
.wall2{background:var(--bone);color:var(--ink);overflow:hidden}
.wall2 .head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.wall2 h2{font-size:clamp(40px,6vw,88px)}
.wall2 h2 em{display:block;font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.02em;font-size:.5em;margin-top:.06em;color:var(--mute)}
.wall2 .track{display:flex;gap:10px;padding:0 var(--gut) 8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.wall2 .track::-webkit-scrollbar{display:none}
.wall2 .r{flex:0 0 auto;width:min(72vw,320px);aspect-ratio:3/4;border-radius:18px;overflow:hidden;position:relative;background:#ddd;scroll-snap-align:start;transform:rotate(var(--rot,0deg));transition:transform .4s}
.wall2 .r:nth-child(3n+1){--rot:-1.2deg}.wall2 .r:nth-child(3n+2){--rot:.8deg}.wall2 .r:nth-child(3n){--rot:-.4deg}
.wall2 .r:hover{transform:rotate(0) scale(1.02)}
.wall2 .r img{width:100%;height:100%;object-fit:cover}
.wall2 .r .v{position:absolute;left:12px;top:12px;background:var(--green);color:var(--ink);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:6px 9px;border-radius:var(--pill)}
.wall2 .r figcaption{position:absolute;inset:auto 0 0 0;padding:80px 14px 14px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.8));color:#fff;display:grid;gap:6px}
.wall2 .r figcaption p{font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.4vw,19px);line-height:1.15}
.wall2 .r figcaption span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.85}

/* swipe v2 tally */
.cmpB .lede{font-size:16px;color:#3B3E43;max-width:40ch;margin-top:10px}
.tally{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}
.tally div{border-top:1.5px solid var(--ink);padding-top:10px}
.tally b{display:block;font-family:var(--disp);font-weight:900;font-variation-settings:"wdth" 75;font-size:clamp(36px,4.5vw,64px);line-height:.9;letter-spacing:-.02em}
.tally span{display:block;font-size:13px;color:var(--mute);margin-top:6px;max-width:16ch}
@media(max-width:900px){.tally{grid-template-columns:1fr 1fr}}
.cmpB .swipe .lab.l{color:#fff;opacity:.9}

/* dose v2: dark */
.cmpC{background:var(--ink);color:var(--bone);padding-block:clamp(64px,9vw,120px)}
.cmpC .lede{color:var(--bone);opacity:.8}
.cmpC .sw{border-color:rgba(255,255,255,.35)}.cmpC .sw button{color:#fff}.cmpC .sw button.on{background:#fff;color:var(--ink)}
.cmpC .ph{background:#222}
.cmpC .hd{display:grid;grid-template-columns:1fr auto auto;gap:18px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.7;padding-bottom:8px}
.cmpC .hd .mu{color:var(--green);opacity:1}
.cmpC .d{border-top:1px solid rgba(255,255,255,.16)}
.cmpC .d .l .b{background:rgba(255,255,255,.1)}
.cmpC .d .l.o .b i{background:rgba(255,255,255,.3)}
.cmpC .d .l .k{opacity:.6}
.cmpC .fine{opacity:.45}

/* chooser fix for row layout */
@media(max-width:900px){.card .ph{aspect-ratio:4/5}.card .b p.sp{display:block;min-height:0}.card .b{align-content:start}}

/* myth stamp: keep inside card */
.fc .b .stamp{font-size:clamp(44px,5.6vw,72px);transform:rotate(-6deg) scale(.6);margin:10px 0 0 6px;padding:4px 10px;border-width:4px}
.fc.open .b .stamp{transform:rotate(-6deg) scale(1)}
.fc .b{padding:24px 20px 20px}

/* faq zero-risk green */
.faq .zr{background:var(--green)}

@media(max-width:900px){.hero h1{font-size:min(14.6vw,110px)}.cmpB .swipe .lab.r2{top:auto;bottom:16px;text-align:right}}

/* ===== v2.2 ===== */
.ledger{display:block}
.proof .nums.four{grid-template-columns:repeat(2,1fr);gap:0}
.proof .nums.four>div{padding:16px 16px 16px 0;border-top:1.5px solid var(--ink)}
.proof .nums.four>div:nth-child(even){padding-left:16px;border-left:1px solid rgba(0,0,0,.15)}
.proof .nums.four b{font-size:clamp(40px,4.8vw,72px);color:var(--ink)}
.proof .nums.four em{display:block;font-family:var(--mono);font-style:normal;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.55;margin-top:4px}
.proof .wk{margin-top:22px;font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.4vw,30px);line-height:1.1;max-width:24ch}
.proof .cap{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.55;margin-top:12px}
.proof .grid{align-items:center}
/* wall dark */
.wall2.dk{background:var(--ink);color:var(--bone)}
.wall2.dk h2 em{color:rgba(245,246,248,.6)}
.wall2.dk .r{background:#222}
/* dose: align both sides */
.cmpC .grid{align-items:stretch}
.cmpC .grid>div:first-child{display:grid;grid-template-rows:auto auto auto auto 1fr;gap:0}
.cmpC .grid>div:first-child .sw{margin:18px 0}
.cmpC .ph{aspect-ratio:auto;height:100%;min-height:360px;margin-top:0}
.cmpC .grid>div:last-child{display:grid;grid-template-rows:auto 1fr auto auto;align-content:start}
.cmpC .dose{gap:0}
@media(max-width:900px){.cmpC .grid>div:first-child{grid-template-rows:auto}.cmpC .ph{display:none}}
/* chooser row layout robust */
@media(max-width:900px){.card{flex-direction:row;align-items:stretch}.card .ph{position:relative;width:38%;aspect-ratio:auto;height:auto;min-height:150px}.card .ph img{position:absolute;inset:0;width:100%;height:100%}.card .b{display:grid;align-content:center;gap:6px;padding:14px}.card .b p{display:block;min-height:0;font-size:13px}.card .b p.sp{font-size:14px}}
/* myth front: dark text at the top */
.fc .f{align-content:start;gap:14px}
.fc .f::before{content:"";position:absolute;inset:0 0 auto 0;height:52%;background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.75) 45%,rgba(255,255,255,0) 100%);z-index:0}
.fc .f .q{color:var(--ink);text-shadow:none;align-self:start;max-width:11ch}
.fc .f .num{color:var(--ink);text-shadow:none;opacity:.7}
.fc .f .qm{background:var(--ink);color:#fff}
.fc .f .bot{margin-top:auto}

/* ===== v2.3 ===== */
/* ledger: light text side */
.ledger .grid{background:var(--bone)}
.ledger .txt{background:var(--bone);color:var(--ink)}
.ledger .row{border-top-color:rgba(0,0,0,.15)}
.ledger .row:last-child{border-bottom-color:rgba(0,0,0,.15)}
.ledger .row .n{color:var(--ink);opacity:.5}
.ledger .row p{opacity:.75}
.ledger .btn{background:var(--ink);color:#fff}
/* dose: right column defines height, image fills it */
.cmpC .grid>div:last-child{grid-template-rows:auto auto auto auto;align-content:start}
.cmpC .grid>div:first-child{grid-template-rows:auto auto auto auto 1fr}
.cmpC .ph{height:100%;min-height:0}
.cmpC .fine{margin-top:16px}

.hero picture[hidden]{display:none}
#hpick{gap:6px;padding-bottom:10px!important}
#hpick button{height:28px;padding:0 10px;font-size:10px}
@media(max-width:900px){#hpick{bottom:calc(72px + env(safe-area-inset-bottom,0px))}}
.cmpB .swipe .lab.l{color:var(--ink);text-shadow:none}
.cmpB .swipe .lab.l small{color:var(--ink)}

/* ===== v2.4 ===== */
/* swipe: clipped sides */
.cmpB .swipe .side{position:absolute;inset:0}
.cmpB .swipe .side img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmpB .swipe .side.r{clip-path:inset(0 0 0 var(--x,50%))}
.cmpB .swipe .lab{font-size:clamp(34px,6vw,84px);top:20px}
.cmpB .swipe .lab.l{left:20px;color:var(--ink);background:rgba(255,255,255,.82);padding:10px 14px;border-radius:14px;text-shadow:none;backdrop-filter:blur(6px)}
.cmpB .swipe .lab.l small{color:var(--ink)}
.cmpB .swipe .lab.r2{right:20px;top:20px;bottom:auto;text-align:right;color:var(--green);background:rgba(14,15,14,.75);padding:10px 14px;border-radius:14px;backdrop-filter:blur(6px)}
.cmpB .swipe .lab.r2 small{color:#fff}
@media(max-width:900px){.cmpB .swipe .lab{font-size:clamp(28px,8vw,44px);padding:8px 10px}.cmpB .swipe .lab.r2{top:auto;bottom:16px}}
/* dose v3 */
.cmpC .top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,5vw,80px);align-items:end;margin-bottom:clamp(24px,4vw,48px)}
.cmpC .top .lede{margin-bottom:16px}
.sw2{display:flex;gap:8px}
.sw2 button{height:44px;padding:0 20px;border-radius:var(--pill);border:1.5px solid rgba(255,255,255,.4);font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#fff;transition:.2s}
.sw2 button.on{background:var(--green);color:var(--ink);border-color:var(--green)}
.cmpC .grid2{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(20px,5vw,80px);align-items:stretch}
.cmpC .grid2 .ph{aspect-ratio:auto;height:100%;min-height:0;border-radius:18px;overflow:hidden;background:#222;margin:0}
.cmpC .grid2 .ph img{width:100%;height:100%;object-fit:cover}
.cmpC .grid2 .rows{display:grid;grid-template-rows:auto auto auto auto;align-content:start}
.cmpC .ctas{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:900px){.cmpC .top{grid-template-columns:1fr;align-items:start}.cmpC .grid2{grid-template-columns:1fr}.cmpC .grid2 .ph{display:none}}
/* your words variants */
.wv{display:none}.wv.on{display:block}
.wall2 .r .v{white-space:nowrap}
.feedg .head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.feedg h2{font-size:clamp(40px,6vw,88px)}
.feedg h2 em{display:block;font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.02em;font-size:.5em;margin-top:.06em;color:rgba(245,246,248,.6)}
.feedg .grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;grid-auto-flow:dense;gap:8px}
.feedg .g{position:relative;border-radius:14px;overflow:hidden;background:#222}
.feedg .g.tall{grid-row:span 2}
.feedg .g img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.feedg .g:hover img{transform:scale(1.04)}
.feedg .g .v{position:absolute;left:10px;top:10px;background:var(--green);color:var(--ink);font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;border-radius:var(--pill);white-space:nowrap}
.feedg .g figcaption{position:absolute;inset:auto 0 0 0;padding:60px 12px 12px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.85));color:#fff;display:grid;gap:4px;opacity:0;transition:opacity .3s}
.feedg .g:hover figcaption,.feedg .g.tall figcaption{opacity:1}
.feedg .g figcaption p{font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.15}
.feedg .g figcaption span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
@media(max-width:900px){.feedg .grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}.feedg .g figcaption{opacity:1;padding:40px 10px 10px}.feedg .g figcaption p{font-size:12px}}
.voice .grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,80px);align-items:center}
.voice .ph{position:relative;aspect-ratio:3/4;border-radius:22px;overflow:hidden;background:#222}
.voice .ph img{width:100%;height:100%;object-fit:cover;transition:opacity .4s}
.voice .ph .v{position:absolute;left:14px;top:14px;background:var(--green);color:var(--ink);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:6px 9px;border-radius:var(--pill)}
.voice .q{display:grid;gap:18px}
.voice .big{font-family:var(--serif);font-style:italic;font-size:clamp(26px,3.2vw,52px);line-height:1.05;letter-spacing:-.01em;min-height:4.2em}
.voice .who{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.voice .thumbs{display:flex;gap:8px;flex-wrap:wrap}
.voice .thumbs button{width:56px;height:70px;border-radius:10px;overflow:hidden;opacity:.45;transition:.25s;outline:2px solid transparent;outline-offset:2px}
.voice .thumbs button img{width:100%;height:100%;object-fit:cover}
.voice .thumbs button.on{opacity:1;outline-color:var(--green)}
@media(max-width:900px){.voice .grid{grid-template-columns:1fr}.voice .ph{aspect-ratio:4/5}.voice .big{min-height:0}}

.wv.dk{background:var(--ink);color:var(--bone)}
.feedg.dk .btn.o{color:var(--bone)}

.ledger .lede{font-size:17px;max-width:44ch;color:#3B3E43}
.ledger .btn.o{color:var(--ink)}

/* hero video */
.hero video.hv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:42% 40%}
.hero .hp-m{display:none}
@media(max-width:700px){.hero video.hv{display:none}.hero .hp-m{display:block}}
/* v2.11 */
.heroes .panel .dyk{margin-top:14px;padding:14px 16px;border-left:3px solid var(--green);background:rgba(255,255,255,.06);border-radius:0 12px 12px 0;font-size:14px;opacity:1;max-width:48ch}
.heroes .panel .dyk b{display:block;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:4px}
.film img{object-position:50% 45%}
.offer img{object-position:50% 45%}
/* v2.12: ledger outline button + slider hints */
.ledger .btn.o{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.bas .hint,.swipe .hint{position:absolute;left:var(--x,50%);top:calc(50% + 38px);transform:translateX(-50%);z-index:4;pointer-events:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border-radius:var(--pill);background:rgba(14,15,14,.8);color:#fff;white-space:nowrap;transition:opacity .4s}
.swipe .hint{background:var(--green);color:var(--ink)}
.bas.used .hint,.swipe.used .hint{opacity:0}
.bas .h::after,.swipe .h::after{transition:transform .2s}
.bas.hinting .h::after,.swipe.hinting .h::after{animation:knob 1.2s ease-in-out infinite}
@keyframes knob{0%,100%{box-shadow:0 0 0 0 rgba(0,214,82,.55),0 6px 20px rgba(0,0,0,.3)}50%{box-shadow:0 0 0 12px rgba(0,214,82,0),0 6px 20px rgba(0,0,0,.3)}}
@media(prefers-reduced-motion:reduce){.bas.hinting .h::after,.swipe.hinting .h::after{animation:none}}
/* v2.13: nav scrolls away, logo left */
.nav{position:absolute;grid-template-columns:auto 1fr auto;gap:28px}
.nav .brand{justify-self:start}
.nav .menu{justify-self:start}
@media(max-width:900px){.nav{grid-template-columns:auto 1fr}.nav .r{justify-self:end}}
/* thin divider between proof and products */
.divider{background:var(--ink);color:var(--bone);overflow:hidden;white-space:nowrap;padding:14px 0;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.divider div{display:inline-flex;align-items:center;gap:22px;animation:mq 40s linear infinite;padding-left:22px}
.divider i{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block}
@media(prefers-reduced-motion:reduce){.divider div{animation:none}}
.film h2{font-size:clamp(44px,7.5vw,128px)}
/* ===== v2.14: every section fits one laptop screen (desktop only) ===== */
@media (min-width:901px){
  .sec{padding-block:clamp(40px,6.5vh,88px)}
  /* ledger */
  .ledger .grid{height:100svh;min-height:620px}
  .ledger .pic{height:100%}
  .ledger .txt{min-height:0;height:100%;padding:clamp(28px,5vh,64px) var(--gut);gap:clamp(12px,2.2vh,24px);overflow:hidden}
  .ledger h2{font-size:clamp(40px,5.2vw,88px)}
  .ledger .lede{font-size:clamp(14px,1.8vh,17px)}
  .ledger .row{padding:clamp(10px,1.8vh,20px) 0}
  .ledger .row b{font-size:clamp(16px,2.1vh,20px);margin-bottom:4px}
  .ledger .row p{font-size:clamp(13px,1.65vh,15px)}
  /* heroes */
  .heroes h2{font-size:clamp(36px,5vw,80px)}
  .heroes .head{margin-bottom:clamp(10px,2vh,22px)}
  .heroes .tabs{margin-bottom:clamp(10px,2vh,18px)}
  .heroes .panel img{aspect-ratio:auto;height:min(56svh,520px)}
  .heroes .panel .n{font-size:clamp(48px,7vh,110px)}
  .heroes .panel h3{margin:10px 0 8px;font-size:clamp(22px,3.2vh,36px)}
  .heroes .panel p{font-size:clamp(13px,1.7vh,15px)}
  .heroes .panel .dyk{margin-top:10px;padding:10px 14px}
  /* proof */
  .proof h2{font-size:clamp(40px,5.4vw,88px);margin-bottom:12px}
  .proof .lede{margin-bottom:16px}
  .proof .nums.four>div{padding-block:clamp(8px,1.6vh,16px)}
  .proof .nums.four b{font-size:clamp(36px,6vh,72px)}
  .proof .wk{margin-top:14px}
  .bas{aspect-ratio:auto;height:min(76svh,720px);max-width:min(100%,calc(76svh*.75))}
  .proof .grid>div:last-child{display:flex;justify-content:center}
  /* products */
  .shop h2{font-size:clamp(36px,5vw,80px)}
  .shop .head{margin-bottom:16px}
  .shop .you{margin-bottom:14px}
  .card .ph{aspect-ratio:auto;height:min(40svh,420px)}
  .card .b{padding:14px 16px 16px;gap:6px}
  /* reviews */
  .wall2 h2{font-size:clamp(36px,5vw,80px)}
  .wall2 .head{margin-bottom:16px}
  .wall2 .r{aspect-ratio:auto;height:min(58svh,480px);width:calc(min(58svh,480px)*.75)}
  /* swipe */
  .cmpB h2{font-size:clamp(36px,5vw,80px)}
  .cmpB .head{margin-bottom:14px}
  .cmpB .swipe{aspect-ratio:auto;height:min(56svh,620px)}
  .tally{margin-top:14px}
  .tally b{font-size:clamp(30px,5vh,56px)}
  /* dose */
  .cmpC{padding-block:clamp(40px,6.5vh,88px)}
  .cmpC h2{font-size:clamp(36px,5vw,80px)}
  .cmpC .top{margin-bottom:clamp(14px,2.6vh,32px)}
  .cmpC .top .lede{margin-bottom:10px;font-size:15px}
  .cmpC .d{padding:clamp(6px,1.1vh,12px) 0}
  .cmpC .d b{font-size:15px}
  .cmpC .d .l{margin-top:4px}
  .cmpC .grid2 .ph{max-height:62svh}
  .cmpC .fine{margin-top:10px}
  .cmpC .ctas{margin-top:12px}
  /* myth */
  .myth h2{font-size:clamp(36px,5vw,80px)}
  .myth .head{margin-bottom:14px}
  .fc{aspect-ratio:auto;height:min(60svh,540px);width:calc(min(60svh,540px)*.75)}
  .myth .done{margin-top:12px}
  /* full-bleed image sections */
  .film img{height:100svh;max-height:none}
  .slot img{height:100svh}
  .offer .in{min-height:100svh;padding-block:clamp(40px,8vh,100px)}
}
@media (min-width:901px){
  .cmpB .swipe{height:min(50svh,580px)}
  .cmpB .lede{margin-top:6px;font-size:15px}
  .cmpB .head p.k{margin-bottom:4px}
  .tally{margin-top:10px}.tally div{padding-top:6px}.tally span{margin-top:2px}
  .card .ph{height:min(34svh,380px)}
  .shop .card .b p{font-size:13px}
  .cmpC .d{padding:clamp(4px,.8vh,10px) 0}
  .cmpC .d .l{margin-top:3px}
  .cmpC .grid2 .ph{max-height:56svh}
  .cmpC .hd{padding-bottom:4px}
}
@media (min-width:901px) and (max-height:800px){
  .sec,.cmpC{padding-block:32px}
  .cmpB .swipe{height:46svh}
  .card .ph{height:30svh}
  .cmpC .grid2 .ph{max-height:52svh}
  .cmpC .d b{font-size:14px}
  .cmpC .d .l span{font-size:12px}
  .cmpC .top{margin-bottom:12px}
  .cmpB h2,.cmpC h2,.shop h2{font-size:clamp(34px,4.4vw,64px)}
}
@media (min-width:901px){.proof .grid>div:last-child{display:block}.bas{width:100%;max-width:calc(min(76svh,720px)*.75);margin-inline:auto}}
@media (min-width:901px){.cmpB .swipe .lab{font-size:clamp(26px,3.6vw,56px);top:16px}.cmpB .swipe .lab.l{left:16px}.cmpB .swipe .lab.r2{right:16px}.cmpB .swipe .side img{object-position:50% 55%}}
@media (min-width:901px){.card .ph img{object-position:50% 68%}}
/* v2.16: product photos never cropped */
.card .ph{position:relative;overflow:hidden;background:#E5E8EB}
.card .ph img.bg{position:absolute;inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);object-fit:cover;filter:blur(18px) saturate(.9);transform:scale(1.05);opacity:.9}
.card .ph img.fg{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;object-position:50% 50%}
.card:hover .ph img.fg{transform:scale(1.03)}
.card:hover .ph img.bg{transform:scale(1.05)}
.card .stk{z-index:2}
.card .stk.k{background:var(--ink);color:#fff}
@media (min-width:901px){.card .ph img.fg{object-position:50% 50%}}
@media(max-width:900px){.card .ph img.fg{position:absolute;inset:0}}
/* v2.17: edge-matched fill instead of blur */
.card .ph{display:flex;justify-content:center;align-items:stretch}
.card .ph img.fg{position:relative;inset:auto;width:auto;max-width:100%;height:100%;object-fit:contain;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
@media(max-width:900px){.card .ph{position:relative}.card .ph img.fg{position:absolute;left:50%;top:0;transform:translateX(-50%);height:100%}}
/* v2.18: cover crop framed on the whole product */
.card .ph{display:block;background:#E5E8EB}
.card .ph img.pc{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-mask-image:none;mask-image:none;transform:none}
.card .ph img.p03{object-position:50% 64%}
.card .ph img.p06{object-position:50% 52%}
.card .ph img.p09{object-position:50% 66%}
@media (min-width:901px){
  .card .ph{height:min(46svh,440px)}
  .shop h2{font-size:clamp(34px,4.4vw,68px)}
  .shop .head{margin-bottom:10px}
  .shop .you{margin-bottom:12px}
  .shop .you button{height:38px}
  .card .b{padding:12px 16px 14px;gap:4px}
  .card .b p{min-height:0}
  .card .row{margin-top:2px}
}
@media (min-width:901px) and (max-height:800px){.card .ph{height:44svh}.shop h2{font-size:clamp(30px,3.8vw,56px)}}
/* v2.19: swipe keeps the photos' portrait shape */
.cmpB .cta2{margin-top:22px}
.cmpB .swipe{aspect-ratio:4/5}
.cmpB .swipe .lab.r2{top:auto;bottom:16px}
@media (min-width:901px){
  .cmpB{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,5vw,80px);align-items:center}
  .cmpB .head{margin:0}
  .cmpB h2{font-size:clamp(44px,6.4vw,120px)}
  .cmpB .swipe{aspect-ratio:4/5;height:min(84svh,820px);width:auto;max-width:56vw}
  .cmpB .swipe .lab{font-size:clamp(22px,2.4vw,40px)}
}
@media (min-width:901px) and (max-height:800px){.cmpB .swipe{height:82svh}}
.cmpB .swipe .side{z-index:0}
.cmpB .swipe .side.r{z-index:1}
.cmpB .swipe .h{z-index:2}
@media(max-width:900px){.cmpB .swipe .lab{font-size:clamp(20px,6.4vw,34px)}.cmpB .swipe .lab small{font-size:9.5px}}
/* v2.20: reviews louder */
.hero .stars.rv{display:inline-flex;align-items:center;gap:12px;width:max-content;max-width:100%;font-size:16px;opacity:1;background:rgba(14,15,14,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.22);padding:9px 16px 9px 14px;border-radius:var(--pill)}
.hero .stars.rv b{font-size:20px;letter-spacing:.08em;line-height:1}
.hero .stars.rv strong{font-family:var(--disp);font-weight:900;font-variation-settings:"wdth" 80;font-size:22px;letter-spacing:-.01em;margin-right:3px}
.rvbig{display:flex;align-items:center;gap:18px}
.rvbig>b{color:var(--green);font-size:clamp(22px,2.4vw,34px);letter-spacing:.06em;line-height:1}
.rvbig>div{display:grid;gap:4px}
.rvbig strong{font-family:var(--disp);font-weight:900;font-variation-settings:"wdth" 75;font-size:clamp(52px,6vw,96px);line-height:.85;letter-spacing:-.02em;color:#fff}
.rvbig span{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.wall2 .r .v{font-size:11px;padding:7px 11px;font-weight:500;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.wall2 .r .v::before{content:"✓ ";font-weight:700}
.card .rvs{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink);margin:0}
.card .rvs b{color:var(--green);font-size:14px;letter-spacing:.06em;-webkit-text-stroke:.4px #0a9e3e}
@media(max-width:900px){.hero .stars.rv{font-size:14px;padding:8px 13px}.hero .stars.rv b{font-size:17px}.hero .stars.rv strong{font-size:19px}.rvbig{gap:12px}.rvbig strong{font-size:56px}}

/* v2.20: ten products, or two */
.cmpB{background:#EAECEF}
.cmpB .why{font-size:16px;line-height:1.5;color:#3B3E43;max-width:44ch;margin-top:14px}
.cmpB .why:first-of-type{margin-top:22px}
.cmpB .why b{color:var(--ink)}
.cmpB .swipe{box-shadow:0 30px 80px -20px rgba(14,15,14,.35),0 0 0 1px rgba(14,15,14,.12);background:var(--ink)}
.cmpB .swipe .side.l img{filter:saturate(.9) contrast(1.04)}
@media (min-width:901px) and (max-height:800px){.cmpB .why{font-size:15px;margin-top:10px}.cmpB .why:first-of-type{margin-top:14px}.cmpB .cta2{margin-top:16px}}

/* v2.20: myth statements readable on every photo */
.fc .f::before{display:none}
.fc .f .q{color:var(--ink);text-shadow:none;background:rgba(245,246,248,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:14px 16px 16px;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.18);font-size:clamp(26px,2.6vw,36px);align-self:end}
.fc .f .num{color:var(--ink);text-shadow:none;background:rgba(245,246,248,.94);padding:7px 11px;border-radius:var(--pill)}
.fc .f{grid-template-rows:auto 1fr auto;gap:10px}

/* v2.20: Muby Worlds carousel (scoped port) */
.wz{position:relative;width:100%;background:var(--ink);color:var(--bone);display:flex;flex-direction:column;align-items:center}
.wz-stage{position:relative;container-type:inline-size;overflow:hidden;background:#17191B;width:min(100%,calc(100svh * 16 / 9));aspect-ratio:16/9;max-width:100%;touch-action:pan-y}
.wz-slide{position:absolute;inset:0;visibility:hidden;opacity:0;transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.1,1),filter .9s ease,visibility 0s linear .9s}
.wz-slide.on{visibility:visible;opacity:1;transition:opacity .5s ease,transform 1.1s cubic-bezier(.16,.8,.2,1),filter 1s ease,visibility 0s}
.wz-slide.enter{transform:scale(1.14);filter:blur(10px)}
.wz-slide.leave{visibility:visible;opacity:0;transform:scale(1.04) translateY(-2%);filter:blur(4px)}
.wz-slide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.wz-slide::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 70%,rgba(0,0,0,.35) 100%)}
.wz-word{position:absolute;left:var(--wx);top:var(--wy);transform:translateX(-50%);margin:0;font-family:var(--disp);font-weight:900;font-stretch:66%;font-variation-settings:"wdth" 66;font-size:var(--ws);line-height:.8;letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap;color:var(--green);text-shadow:0 .02em .12em rgba(0,0,0,.18);pointer-events:none;z-index:3}
.wz-word span{display:inline-block;transform:translateY(0);opacity:1;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .5s ease;transition-delay:calc(var(--i) * 55ms + 280ms)}
.wz-slide.enter .wz-word span,.wz-slide:not(.on) .wz-word span{transform:translateY(.35em);opacity:0;transition-delay:0s}
.wz-tag{position:absolute;left:2.2cqw;bottom:2.4cqw;z-index:4;font-family:var(--mono);font-size:max(11px,.86cqw);letter-spacing:.08em;text-transform:uppercase;color:var(--bone);opacity:.85;display:flex;gap:.9em;align-items:center}
.wz-tag i{width:.55em;height:.55em;border-radius:50%;background:var(--green);display:inline-block}
.wz-card{position:absolute;z-index:5;bottom:6.5cqw;width:clamp(280px,24cqw,360px);background:var(--bone);color:var(--ink);border-radius:4px;padding:22px 22px 20px;border-top:4px solid var(--green);display:flex;flex-direction:column;gap:10px;box-shadow:0 18px 50px rgba(0,0,0,.35);text-align:left}
.wz-card.right{right:3.2cqw}.wz-card.left{left:3.2cqw}
.wz-eb{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#4d524f}
.wz-card h2{margin:0;font-family:var(--disp);font-weight:900;font-stretch:66%;font-variation-settings:"wdth" 66;font-size:40px;line-height:.9;text-transform:uppercase;letter-spacing:0}
.wz-tl{margin:0;font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.1}
.wz-body{margin:0;font-size:14.5px;line-height:1.5;color:#2c302e;max-width:40ch}
.wz-chips{display:flex;flex-wrap:wrap;gap:6px}
.wz-chips b{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.08em;padding:4px 7px;border:1px solid #c9ccc5;border-radius:2px}
.wz-buy{display:flex;align-items:center;gap:12px;margin-top:4px;flex-wrap:wrap}
.wz-btn{appearance:none;border:0;cursor:pointer;background:var(--ink);color:var(--bone);font:600 14.5px/1 var(--font);padding:14px 18px;border-radius:999px;font-variant-numeric:tabular-nums}
.wz-btn:hover{background:#000}
.wz-btn:focus-visible,.wz-arrow:focus-visible,.wz-dot:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.wz-was{font-family:var(--mono);font-size:12.5px;color:#6c716e;text-decoration:line-through}
.wz-arrow{position:absolute;top:50%;z-index:6;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(11,12,13,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--bone);cursor:pointer;display:grid;place-items:center;padding:0}
.wz-arrow:hover{background:rgba(11,12,13,.6)}
.wz-arrow svg{width:18px;height:18px}
.wz-arrow.prev{left:1.6cqw}.wz-arrow.next{right:1.6cqw}
.wz-dots{position:absolute;z-index:6;left:50%;bottom:2.1cqw;transform:translateX(-50%);display:flex;gap:6px}
.wz-dot{appearance:none;border:0;background:rgba(255,255,255,.14);color:var(--bone);font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:8px 11px;border-radius:999px;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);white-space:nowrap}
.wz-dot[aria-current="true"]{background:var(--bone);color:var(--ink)}
.wz-below{display:none;width:100%}
@media (max-aspect-ratio:1/1){
  .wz-stage{aspect-ratio:auto;width:100%;height:min(177.78vw,calc(100svh - 110px));min-height:120vw}
  .wz-slot{display:none}
  .wz-below{display:block}
  .wz-below .wz-card{position:static;width:100%;max-width:none;margin:0;box-shadow:none;border-radius:0;padding:22px 16px 26px}
  .wz-word{top:var(--py);font-size:var(--ps);left:var(--px)}
  .wz-arrow{width:40px;height:40px;top:auto;bottom:4cqw;transform:none}
  .wz-arrow.prev{left:4cqw}.wz-arrow.next{right:4cqw}
  .wz-dots{bottom:5.2cqw}
  .wz-dot{padding:7px 9px;font-size:10px}
  .wz-tag{left:4cqw;top:4cqw;bottom:auto;font-size:11px}
}
@media (prefers-reduced-motion:reduce){.wz-slide,.wz-slide.on,.wz-slide.enter,.wz-slide.leave,.wz-word span{transition:none!important;transform:none!important;filter:none!important}}
.fc .f .q{max-width:92%;width:fit-content;margin:0}
.fc .f .num{opacity:1}
.fc .f .bot{margin-top:0}
@media (min-width:901px){.card .ph{height:min(44svh,420px)}.card .rvs{font-size:12px}}
@media (min-width:901px) and (max-height:800px){.card .ph{height:41svh}}
/* v2.21: four ledger rows */
@media (min-width:901px){.ledger .row{padding:14px 0}.ledger .row b{margin-bottom:4px}}
@media (min-width:901px) and (max-height:800px){.ledger .row{padding:10px 0}.ledger .row p{font-size:14px;line-height:1.4}.ledger h2{font-size:clamp(40px,5.4vw,80px)}}
@media (min-width:901px) and (max-height:760px){.ledger .txt{padding-block:32px;gap:18px}}
@media (min-width:901px) and (max-height:760px){.ledger .txt{padding-block:24px;gap:12px}.ledger .row{padding:8px 0}.ledger .lede{font-size:14px}}
/* v2.22: routine headline swap */
.film h2 em{font-size:.42em;margin-top:.14em}
@media(max-width:900px){.film h2{font-size:clamp(34px,10.5vw,56px)}.film h2 em{font-size:.62em}.film .t{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px));gap:12px}}
/* v2.23: laundromat cinemagraph */
.film video.cine{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;opacity:0;transition:opacity .6s ease;z-index:0;pointer-events:none}
.film video.cine.on{opacity:1}
.film .t{z-index:1}
@media (max-aspect-ratio:1/1){.film video.cine{object-position:50% 50%}}
.film img{object-position:50% 50%}
.film video.cine{object-position:50% 50%}
/* v2.25: hero headline a bit smaller */
.hero h1{font-size:clamp(52px,10.4vw,152px)}
@media(max-width:900px){.hero h1{font-size:min(12.4vw,92px)}}


/* ================= MUBY ART (30 Sep 2026) =================
   Layer on top of the Seoul v2.25 CSS. Same markup and mechanics,
   new voice: Roman capitals (Cinzel), Hanken Grotesk, Space Mono,
   paper grey + bone, Muby green, acid lime tiles, porthole reveals. */
:root{
  --ink:#151515;--bone:#F4F5F7;--mist:#ECEEF1;--paper:#ECEEF1;--paper2:#D9DDE2;
  --green:#00D652;--lime:#41F23A;--pink:#FF7AD8;--brown:#2F2823;--sky:#3E8FD0;
  --mute:#686B71;
  --disp:"Cinzel","Trajan Pro",Georgia,serif;
  --serif:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --font:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --mono:"Space Mono",Menlo,monospace;
  --pill:3px;
}
html{font-synthesis:none}
body{background:var(--bone);color:var(--ink);font-family:var(--font)}
/* display type: Roman capitals, tight, no condensed axis */
.disp{font-family:var(--disp);font-weight:500;font-variation-settings:normal;letter-spacing:-.005em;line-height:.98;text-transform:uppercase}
.disp em,h1 em,h2 em{font-family:var(--disp)!important;font-style:normal!important;font-weight:500!important;text-transform:uppercase!important;letter-spacing:.02em!important;font-size:.42em!important;line-height:1.1!important;margin-top:.35em!important;display:block}
/* the old italic serif lines become clean grotesk */
.heroes .panel h3,.proof .wk,.card .b .sp,.wall2 .r figcaption p,.fc .b p,.myth .done b,.cmpC .d .l.o span,footer .spf{font-family:var(--font);font-style:normal;letter-spacing:-.01em}
.heroes .panel h3{font-weight:600;font-size:clamp(22px,2.2vw,30px);line-height:1.12}
.proof .wk{font-weight:500;font-size:clamp(18px,1.7vw,22px);line-height:1.25}
.myth .done b{font-weight:600}
/* buttons: square, grotesk, confident */
.btn{border-radius:2px!important;font-family:var(--font);font-weight:700;letter-spacing:.01em;text-transform:none;height:50px;padding:0 22px;font-size:15px}
.btn.g{background:var(--green);color:var(--ink)}
.btn.o{box-shadow:inset 0 0 0 1.5px currentColor;background:transparent}
.pill,.stk,.chips b,.in span,.tabs button,.sw button,.sw2 button,.you button,.wz-btn{border-radius:2px!important}
/* square corners everywhere the Seoul look had soft cards */
.heroes .panel img,.card,.card .ph,.cmpC .grid2 .ph,.cmpC .ph,.wall2 .r,.bas,.swipe,.fc .f,.fc .b,.fc .f .q,.faq .zr,.myth .done,.drawer .nudge,.toast,.code{border-radius:2px!important}
/* nav */
.nav{color:var(--ink);mix-blend-mode:normal!important}
.nav .brand img{filter:invert(1)!important;mix-blend-mode:normal!important}
.nav .menu a{font-family:var(--font);font-weight:600;font-size:13px;letter-spacing:.02em;color:var(--ink)}
.nav .pill{background:var(--ink);color:#fff;border:0}
/* marquee green strip, mono */
.mq{background:var(--green);color:var(--ink);font-family:var(--mono)}

/* ---------- 0 HERO: grey paper, porthole, ink type ---------- */
.hero{background:var(--paper);color:var(--ink)}
.hero img{animation:none;object-position:50% 50%}
.hero picture{clip-path:circle(22% at 67% 46%);animation:portOpen 1.5s cubic-bezier(.7,0,.2,1) .15s forwards}
@keyframes portOpen{to{clip-path:circle(150% at 67% 46%)}}
.hero .c{top:0;bottom:0;align-items:center;padding-top:70px}
.hero h1{color:var(--ink);font-size:clamp(46px,6.2vw,104px)!important;line-height:.95}
.hero h1 em{font-size:.36em!important;letter-spacing:.06em!important}
.hero .sub{opacity:1;color:#2A2C30;font-size:17px;max-width:38ch}
.hero .stack{max-width:min(46vw,640px);gap:18px}
.hero .stars.rv{background:#fff;color:var(--ink);border:0;box-shadow:0 1px 0 rgba(0,0,0,.06);backdrop-filter:none;border-radius:2px}
.hero .stars.rv strong{font-family:var(--font);font-weight:800;font-variation-settings:normal}
.hero .stars.rv b{color:var(--green);-webkit-text-stroke:.4px #0a9e3e}
.hero .trust{opacity:1;color:#2A2C30;font-size:11px}
.hero .btn.o{color:var(--ink)}
@supports(animation-timeline:view()){.hero img{animation:heroPar linear both;animation-timeline:view();animation-range:exit 0% exit 100%}}

/* ---------- porthole reveal for section photos ---------- */
.ph-o{clip-path:circle(0% at 50% 50%);transition:clip-path 1.3s cubic-bezier(.7,0,.2,1)}
.ph-o.open{clip-path:circle(75% at 50% 50%)}
.heroes .panel img{clip-path:circle(75% at 50% 50%)}
.heroes .hp.on img{animation:hpOpen 1s cubic-bezier(.7,0,.2,1) both}
@keyframes hpOpen{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(75% at 50% 50%)}}

/* ---------- 1 LEDGER: bone, ink ---------- */
.ledger,.ledger .grid,.ledger .txt{background:var(--bone);color:var(--ink)}
.ledger .pic{background:var(--paper)}
.ledger .pic img{object-position:50% 40%}
.ledger h2{font-size:clamp(34px,4.2vw,64px)!important}
.ledger .row .n{font-family:var(--mono);color:var(--ink);opacity:1;background:var(--lime);width:max-content;height:max-content;padding:2px 6px;font-size:12px}
.ledger .row b{font-weight:700}

/* ---------- 2 HEROES: paper grey instead of ink ---------- */
.heroes{background:var(--paper);color:var(--ink)}
.heroes h2{font-size:clamp(34px,4.6vw,72px)!important}
.heroes .head .k{font-family:var(--mono);color:var(--ink)}
.heroes .tabs button{border:1.5px solid rgba(21,21,21,.25);color:var(--ink);font-family:var(--mono);background:transparent}
.heroes .tabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.heroes .panel img{background:#D3D7DC}
.heroes .panel .n{font-family:var(--disp);font-weight:500;font-variation-settings:normal;color:var(--ink);font-size:clamp(52px,6.6vw,104px);letter-spacing:-.01em}
.heroes .panel .n small{color:var(--ink);opacity:.65;font-family:var(--mono)}
.heroes .panel p{opacity:.85}
.heroes .panel .in span{border-color:rgba(21,21,21,.3);font-family:var(--mono)}
.heroes .panel .dyk{background:var(--lime);border-left:0;border-radius:2px;color:var(--ink)}
.heroes .panel .dyk b{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- 3 SHOP ---------- */
.shop{background:var(--bone)}
.shop h2{font-size:clamp(34px,4.6vw,72px)!important}
.shop .head .k{font-family:var(--mono)}
.card{background:#fff}
.card .ph{background:var(--paper)}
.card .ph img.pc{object-position:50% 50%!important}
.card h3{font-family:var(--disp);font-weight:600;letter-spacing:.01em;text-transform:uppercase;font-size:20px}
.card .stk{background:var(--green);color:var(--ink);font-family:var(--mono);transform:rotate(-3deg);box-shadow:0 2px 0 rgba(0,0,0,.08)}
.card .stk.k{background:var(--ink);color:#fff;transform:none}
.card.hi{outline-color:var(--green)}
.you button{font-family:var(--mono)}

/* ---------- 3b MEET THE DUO (new, product first) ---------- */
.duo{background:var(--paper);color:var(--ink);padding:clamp(24px,4vh,44px) 0 0}
.duo .dh{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:clamp(14px,2.4vh,24px)}
.duo h2{font-size:clamp(34px,4.6vw,72px)}
.duo .dbuy{display:flex;align-items:center;gap:14px}
.duo .pr{font-family:var(--font);font-weight:800;font-size:22px}
.duo .pr s{font-weight:500;font-size:15px;opacity:.5;margin-left:8px}
.duo .dp{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--paper)}
.duo .dc{position:relative;height:calc(min(100svh,900px) - clamp(120px,17vh,170px));min-height:470px;overflow:hidden;background:#D7DBE0}
.duo .im,.duo .im img{position:absolute;inset:0;width:100%;height:100%}
.duo .im img{object-fit:cover;object-position:50% 40%;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.duo .dc:hover .im img{transform:scale(1.03)}
.duo .dt{position:absolute;left:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);width:min(380px,calc(100% - 28px));background:rgba(244,245,247,.96);padding:18px 20px 18px;display:grid;gap:8px;box-shadow:0 14px 40px rgba(0,0,0,.14)}
.duo .eb{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.duo h3{font-family:var(--disp);font-weight:500;font-size:clamp(40px,4.2vw,64px);line-height:.9;text-transform:uppercase;letter-spacing:-.005em}
.duo .tl{font-weight:700;font-size:16px}
.duo .bd{font-size:14.5px;line-height:1.45;opacity:.85}
.duo .chips{display:flex;gap:6px;flex-wrap:wrap}
.duo .chips b{font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;background:var(--lime);padding:4px 8px}
.duo .row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:4px;flex-wrap:wrap}
.duo .rvs{font-size:12.5px;font-weight:600}
.duo .rvs b{color:var(--green);letter-spacing:.06em;-webkit-text-stroke:.4px #0a9e3e}
.duo .btn{background:var(--ink);color:#fff}
@media(max-width:800px){
  .duo .dp{grid-template-columns:1fr;gap:0}
  .duo .dc{height:auto;min-height:0;display:grid}
  .duo .im{position:relative;aspect-ratio:4/5;height:auto}
  .duo .im img{position:absolute}
  .duo .dt{position:relative;left:auto;bottom:auto;width:auto;box-shadow:none;background:var(--bone);padding:18px var(--gut) 26px}
  .duo .dbuy{width:100%;justify-content:space-between}
}

/* ---------- 4 PROOF ---------- */
.proof{background:var(--bone)}
.proof h2{font-size:clamp(34px,4.6vw,72px)!important}
.proof .nums b{font-family:var(--disp);font-weight:500;font-variation-settings:normal;letter-spacing:-.01em}
.proof .nums em{font-family:var(--mono);font-style:normal}
.bas .lab,.swipe .hint,.bas .hint{font-family:var(--mono);border-radius:2px}

/* ---------- 5 WALL: brown tile from the feed ---------- */
.wall2.dk{background:var(--brown);color:var(--bone)}
.wall2 h2{font-size:clamp(34px,4.6vw,72px)!important}
.wall2.dk h2 em{color:rgba(244,245,247,.7)}
.rvbig strong{font-family:var(--disp)!important;font-weight:500!important;font-variation-settings:normal!important}
.wall2 .r .v{font-family:var(--mono);border-radius:2px}
.wall2 .r figcaption p{font-weight:500}

/* ---------- 6 TEN OR TWO ---------- */
.cmpB{background:var(--paper)}
.cmpB h2{font-size:clamp(34px,4.6vw,72px)!important}
.cmpB .k{font-family:var(--mono)}
.cmpB .swipe .lab{font-family:var(--disp);font-weight:600;font-variation-settings:normal;letter-spacing:0}
.cmpB .swipe{box-shadow:0 24px 60px rgba(0,0,0,.18)}

/* ---------- 7 DOSE: bone, ink table, green bars ---------- */
.cmpC{background:var(--bone);color:var(--ink)}
.cmpC h2{font-size:clamp(34px,4.6vw,72px)!important}
.cmpC .k{font-family:var(--mono)}
.cmpC .lede{color:#3B3D42;opacity:1}
.cmpC .sw2{border-color:rgba(21,21,21,.3)}
.cmpC .sw2 button{color:var(--ink);font-family:var(--mono)}
.cmpC .sw2 button.on{background:var(--ink);color:#fff}
.cmpC .grid2 .ph{background:var(--paper)}
.cmpC .hd{opacity:.8}
.cmpC .hd .mu{color:#0a9e3e}
.cmpC .d{border-top:1px solid rgba(21,21,21,.14)}
.cmpC .d .l .b{background:rgba(21,21,21,.08);border-radius:0}
.cmpC .d .l .b i{border-radius:0}
.cmpC .d .l.o .b i{background:rgba(21,21,21,.28)}
.cmpC .d .l.o span{font-size:13px}
.cmpC .btn.o{color:var(--ink)}

/* ---------- 8 ROUTINE: daylight laundromat, ink text on a paper band ---------- */
.film{background:var(--paper)}
.film .t{background:linear-gradient(90deg,rgba(244,245,247,.94) 0%,rgba(244,245,247,.86) 38%,rgba(244,245,247,0) 62%);color:var(--ink);align-content:center}
.film h2{font-size:clamp(38px,5vw,84px)!important;color:var(--ink)}
.film h2 em{font-size:.36em!important}
.film p{opacity:1!important;color:#2A2C30}
.strip .n{font-family:var(--disp);font-weight:500;font-variation-settings:normal}
.strip .tl span{font-family:var(--mono)}

/* ---------- 9 MYTH: statements as feed tiles (lime, mono, underlined) ---------- */
.myth{background:var(--bone)}
.myth h2{font-size:clamp(34px,4.6vw,72px)!important}
.fc .f .q{font-family:var(--mono)!important;font-style:normal!important;font-weight:400;font-size:clamp(17px,1.5vw,21px)!important;line-height:1.3!important;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;background:var(--lime)!important;backdrop-filter:none!important;color:var(--ink)!important;box-shadow:none!important;padding:14px 16px!important;border-radius:0!important;max-width:88%!important}
.fc .f .num{font-family:var(--mono);background:#fff!important;border-radius:0!important}
.fc .f .qm{font-family:var(--disp);font-weight:600;background:var(--ink)}
.fc .f .pill{font-family:var(--mono);border-radius:0}
.fc .b .stamp{font-family:var(--disp);font-weight:600;font-variation-settings:normal;letter-spacing:0}
.fc .b p{font-weight:600;font-size:clamp(20px,1.9vw,26px)!important}
.myth .prog{font-family:var(--mono)}

/* ---------- 10 OFFER ---------- */
.offer h2{font-family:var(--disp)}
.offer .in{border-radius:2px}
.offer .code b{font-family:var(--mono)}

/* ---------- FAQ + footer ---------- */
.faq{background:var(--paper)}
.faq h2{font-size:clamp(34px,4.6vw,72px)!important}
.faq summary{font-weight:600}
footer{background:var(--ink);color:var(--bone)}
footer h4{font-family:var(--mono);font-weight:400}
footer .brand-logo,footer img{filter:none}
.bar{border-radius:0}
.bar .btn{height:44px}
.drawer{font-family:var(--font)}
.hero::after{display:none}
.hero .trust{gap:8px 18px}
/* offer: light paper card on the hills, no dark wash */
.offer{background:var(--paper);color:var(--ink);min-height:min(100svh,900px);display:flex;align-items:center}
.offer::after{display:none}
.offer img{object-position:60% 50%}
.offer .in{min-height:0;margin-left:var(--gut);padding:clamp(24px,3.4vw,44px);background:rgba(244,245,247,.95);max-width:520px;gap:14px;box-shadow:0 20px 60px rgba(0,0,0,.14)}
.offer h2{font-size:clamp(46px,5.6vw,92px)}
.offer h2 em{font-size:.38em!important}
.offer .in .k{color:var(--ink);background:var(--lime);width:max-content;padding:3px 8px;font-family:var(--mono)}
.offer .code{border:1.5px dashed rgba(21,21,21,.6);border-radius:2px}
.offer .code button{background:var(--ink);color:#fff;border-radius:2px}
.offer li::before{color:#0a9e3e}
.you button{font-weight:400}
.duo .dc{height:calc(min(100svh,900px) - clamp(150px,21vh,190px));min-height:430px}
.disp{line-height:.93}
.shop h2{font-size:clamp(30px,4.1vw,64px)!important}
@media(max-height:880px) and (min-width:901px){.shop .card .ph{aspect-ratio:auto}}
@media(max-width:700px){
  .hero{background:var(--paper)}
  .hero picture{top:0;bottom:auto;height:54%}
  .hero picture img{height:100%;object-position:50% 18%}
  .hero picture{clip-path:circle(24% at 50% 42%);animation-name:portOpenM}
  @keyframes portOpenM{to{clip-path:circle(150% at 50% 42%)}}
  .hero .c{top:auto;bottom:0;align-items:end;padding-top:0;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
  .hero .stack{max-width:none;gap:12px}
  .hero h1{font-size:min(11.2vw,52px)!important}
  .hero .sub{font-size:15px}
  .hero .stars.rv{position:absolute;top:-56px}
  .hero .stack{position:relative}
  .film .t{background:linear-gradient(180deg,rgba(244,245,247,0) 30%,rgba(244,245,247,.92) 58%,rgba(244,245,247,.98) 100%);align-content:end}
  .film h2{font-size:min(10.4vw,46px)!important}
  .offer{display:block}
  .offer img{object-position:78% 50%}
  .film img{object-position:74% 50%}
  .offer .in{margin:40vh var(--gut) 24px}
}
.card .ph img.pc{transform:scale(1.16)}.card:hover .ph img.pc{transform:scale(1.2)}

/* ================= MUBY ART v2 (1 Oct 2026) ================= */
.eyb{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:var(--lime);color:var(--ink);width:max-content;max-width:100%;padding:3px 8px}

/* ---- hero options + motion ---- */
.hero picture{clip-path:none;animation:none}
.hero img{object-position:var(--pos,50% 50%)}
.hero[data-v="a"]{--px:67%;--py:46%}
.hero[data-v="b"]{--px:84%;--py:40%}
.hero.play[data-v="a"] picture,.hero.play[data-v="b"] picture{clip-path:circle(18% at var(--px) var(--py));animation:portOpen2 1.5s cubic-bezier(.7,0,.2,1) .15s forwards}
@keyframes portOpen2{to{clip-path:circle(150% at var(--px) var(--py))}}
.hero.play:not([data-v="a"]):not([data-v="b"]) img{animation:kb 2.8s cubic-bezier(.2,.8,.2,1) both}
@keyframes kb{from{transform:scale(1.14)}to{transform:none}}
.hero.play .stars.rv{animation:stamp .7s cubic-bezier(.2,1.6,.4,1) 1s both}
@keyframes stamp{from{opacity:0;transform:scale(1.7) rotate(-8deg)}to{opacity:1;transform:none}}
.hero.play h1{animation:rise .9s cubic-bezier(.2,.8,.2,1) .35s both}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@supports(animation-timeline:view()){
  .hero[data-v="a"] img,.hero[data-v="b"] img{animation:through linear both;animation-timeline:view();animation-range:exit 0% exit 100%;transform-origin:var(--px) var(--py)}
  @keyframes through{to{transform:scale(1.7)}}
}
.hero:not([data-v="a"]):not([data-v="b"]):not([data-v="g"])::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(244,245,247,.92) 0%,rgba(244,245,247,.78) 30%,rgba(244,245,247,0) 58%)}
@media(max-width:700px){
  .hero picture img{object-position:var(--mpos,50% 18%)!important}
  .hero::before{display:none}
  .hero.play[data-v="a"] picture{clip-path:circle(24% at 50% 42%);animation:portOpenM 1.5s cubic-bezier(.7,0,.2,1) .15s forwards}
  .hero.play[data-v="b"] picture{clip-path:none;animation:none}
}
@media(prefers-reduced-motion:reduce){.hero picture,.hero img,.hero h1,.hero .stars.rv{animation:none!important;clip-path:none!important}}

/* ---- routine: back to the night laundromat ---- */
.film.dkf{background:var(--ink)}
.film.dkf img{object-position:50% 50%}
.film.dkf .t{background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.66));color:#fff;align-content:end}
.film.dkf h2{color:#fff;font-size:clamp(46px,7.4vw,124px)!important}
.film.dkf p{color:#fff!important;opacity:.9!important}
@media(max-width:700px){.film.dkf .t{background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.72));align-content:end}.film.dkf img{object-position:50% 50%}.film.dkf h2{font-size:min(12vw,56px)!important}}

/* ---- experts: R&D dept. ID badges ---- */
.xp{background:var(--paper);overflow:hidden}
.xp-g{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,64px);align-items:center}
.xp-t{display:grid;gap:18px;min-width:0}
.xp h2{font-size:clamp(34px,4.6vw,72px)!important}
.xp .lede{max-width:40ch;font-size:17px;color:#3B3D42}
.xp-cta{display:flex;gap:10px;flex-wrap:wrap}
.xp .btn.o{color:var(--ink)}
.xp-badges{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2.4vw,32px);align-items:start;padding-top:64px;max-width:640px;justify-self:center;width:100%}
.bdg{position:relative;margin:0;transform-origin:50% -64px;animation:swing 6s ease-in-out infinite}
.bdg.b2{animation-delay:-3s;margin-top:36px}
@keyframes swing{0%,100%{transform:rotate(-1.8deg)}50%{transform:rotate(1.8deg)}}
.bdg:hover{animation-play-state:paused}
.bdg .strap{position:absolute;left:50%;top:-64px;width:20px;height:70px;transform:translateX(-50%);background:repeating-linear-gradient(180deg,var(--green) 0 14px,#00b947 14px 15px)}
.bdg .strap::after{content:"";position:absolute;left:50%;bottom:-8px;width:30px;height:14px;transform:translateX(-50%);background:linear-gradient(#cfd0cf,#9a9b9a);border-radius:2px}
.bdg .bcard{position:relative;background:#fff;box-shadow:0 22px 50px rgba(0,0,0,.16);overflow:hidden}
.bdg .bh{display:flex;justify-content:space-between;gap:8px;background:var(--lime);padding:8px 12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.bdg .bp{aspect-ratio:5/4;overflow:hidden;background:#eee}
.bdg .bp img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.bdg:hover .bp img{transform:scale(1.04)}
.bdg .bb{padding:14px 16px 8px;display:grid;gap:4px}
.bdg .bb b{font-family:var(--disp);font-weight:600;font-size:clamp(19px,1.7vw,25px);text-transform:uppercase;line-height:1}
.bdg .role{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.bdg blockquote{margin:10px 0 0;font-weight:600;font-size:clamp(14.5px,1.2vw,17px);line-height:1.32;display:inline;background-image:linear-gradient(transparent 62%,rgba(65,242,58,.6) 62%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.bdg .bc{height:26px;margin:12px 16px 14px;background:repeating-linear-gradient(90deg,#151515 0 2px,transparent 2px 4px,#151515 4px 7px,transparent 7px 9px,#151515 9px 10px,transparent 10px 14px)}
@media(max-width:800px){.xp-g{grid-template-columns:1fr}.xp-badges{padding-top:58px}}
@media(max-width:480px){.xp-badges{grid-template-columns:1fr 1fr;gap:12px}.bdg .bh span:last-child{display:none}.bdg blockquote{font-size:13.5px}.bdg .bb{padding:10px 10px 6px}.bdg .bc{margin:10px}}
@media(prefers-reduced-motion:reduce){.bdg{animation:none}}

/* ---- everyday muby: reels ---- */
.ev{background:var(--bone);padding:clamp(40px,7vh,72px) 0;overflow:hidden}
.ev-h{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:clamp(16px,3vh,26px)}
.ev-h>div{display:grid;gap:12px}
.ev h2{font-size:clamp(34px,4.6vw,72px)!important}
.ev-note{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.ev-a,.ev-b,.ev-c{display:none}
.ev[data-v="a"] .ev-a,.ev[data-v="b"] .ev-b,.ev[data-v="c"] .ev-c{display:block}
.ev-t{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:8px;flex:0 0 auto;width:clamp(160px,15.5vw,230px);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.ev-t:hover{transform:translateY(-4px)}
.ev-t .ph{position:relative;aspect-ratio:9/16;overflow:hidden;background:#D6DADF;max-width:100%}
.ev-t .ph img,.ev-t .ph video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ev-t .ph video{opacity:0;transition:opacity .4s}
.ev-t.on .ph video{opacity:1}
.ev-t .pl{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;background:rgba(244,245,247,.92);color:var(--ink);display:grid;place-items:center;font-size:12px;padding-left:2px;box-sizing:border-box}
.ev-t .hd{position:absolute;left:10px;top:10px;font-family:var(--mono);font-size:11px;background:var(--lime);color:var(--ink);padding:3px 7px;max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-t .chip{display:grid;grid-template-columns:34px 1fr 32px;align-items:center;gap:8px;background:#fff;padding:6px;box-shadow:0 1px 0 rgba(0,0,0,.06);min-width:0}
.ev-t .chip>img{width:34px;height:34px;object-fit:cover}
.ev-t .chip b{display:block;font-size:12.5px;font-weight:700;line-height:1.2}
.ev-t .chip small{font-size:12px;opacity:.65}
.ev-t .add{width:32px;height:32px;background:var(--ink);color:#fff;display:grid;place-items:center;font-style:normal;font-size:18px}
.ev-t .add:hover{background:var(--green);color:var(--ink)}
.ev-t:focus-visible .ph{outline:3px solid var(--green);outline-offset:2px}
.ev-row{display:flex;gap:12px;overflow-x:auto;padding:4px var(--gut) 10px;scroll-snap-type:x mandatory;scrollbar-width:none}
.ev-row::-webkit-scrollbar{display:none}
.ev-row .ev-t{scroll-snap-align:start}
.ev-bub{display:flex;gap:18px;justify-content:center;padding:0 var(--gut) 16px;overflow-x:auto;scrollbar-width:none}
.ev-bub .bb{all:unset;cursor:pointer;display:grid;justify-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;flex:0 0 auto}
.ev-bub .bb img{width:60px;height:60px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--bone),0 0 0 5px rgba(21,21,21,.18)}
.ev-bub .bb.on img{box-shadow:0 0 0 3px var(--bone),0 0 0 6px var(--green)}
.ev-stage{display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,24px);padding:0 var(--gut)}
.ev-main{display:flex;align-items:center;gap:clamp(8px,2vw,24px)}
.ev-main .side{width:clamp(110px,12vw,170px);opacity:.5;filter:saturate(.7)}
.ev-main .side .chip{display:none}
.ev-main .mid{width:clamp(190px,17.5vw,260px)}
.ev-ar{all:unset;cursor:pointer;width:46px;height:46px;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:18px;flex:0 0 auto}
.ev-c{background:var(--lime);padding:26px 0 30px}
.ev-tick{overflow:hidden}
.ev-belt{display:flex;gap:22px;width:max-content;padding:6px 11px;animation:belt 46s linear infinite}
.ev-belt:hover{animation-play-state:paused}
.ev-belt .ev-t:nth-child(odd){transform:rotate(-2.4deg)}
.ev-belt .ev-t:nth-child(even){transform:rotate(2deg) translateY(10px)}
.ev-belt .ev-t:hover{transform:none}
@keyframes belt{to{transform:translateX(-50%)}}
@media(max-width:700px){.ev-main .side{display:none}.ev-main .mid{width:min(64vw,280px)}.ev-t{width:min(44vw,200px)}}
@media(prefers-reduced-motion:reduce){.ev-belt{animation:none}.ev-tick{overflow-x:auto}}
/* lightbox */
.evx{position:fixed;inset:0;z-index:90;background:rgba(21,21,21,.88);display:grid;place-items:center;padding:16px}
.evx[hidden]{display:none!important}
.evx-in{display:grid;grid-template-columns:auto auto auto;align-items:center;gap:16px;justify-items:center}
.evx-ph{position:relative;height:min(78svh,740px);aspect-ratio:9/16;max-width:calc(100vw - 32px);background:#000}
.evx-ph video{width:100%;height:100%;object-fit:cover;display:block}
.evx-bar{position:absolute;left:10px;right:10px;top:10px;height:3px;background:rgba(255,255,255,.35);z-index:2}
.evx-bar i{display:block;height:100%;width:0;background:#fff}
.evx-h{position:absolute;left:10px;top:22px;font-family:var(--mono);font-size:12px;background:var(--lime);color:var(--ink);padding:3px 8px}
.evx-x{all:unset;cursor:pointer;position:fixed;right:16px;top:calc(16px + env(safe-area-inset-top,0px));width:44px;height:44px;display:grid;place-items:center;background:var(--bone);color:var(--ink);font-size:26px}
.evx-ar{all:unset;cursor:pointer;width:46px;height:46px;display:grid;place-items:center;background:var(--bone);color:var(--ink);font-size:18px}
.evx-p{grid-column:1/-1;display:flex;align-items:center;gap:12px;background:var(--bone);padding:8px;max-width:100%}
.evx-p img{width:44px;height:44px;object-fit:cover}
.evx-p b{display:block;font-size:14px}
.evx-p span{font-size:13px}
.evx-p .btn{height:42px}
@media(max-width:700px){.evx-in{grid-template-columns:1fr;position:relative}.evx-ar{position:absolute;top:40%;z-index:3}.evx-ar.l{left:4px}.evx-ar.r{right:4px}.evx-ph{height:min(70svh,640px)}}

/* ---- offer: three options ---- */
.offer2{background:var(--paper);color:var(--ink);overflow:hidden}
.offer2 .ov{display:none}
.offer2[data-v="a"] .ov-a,.offer2[data-v="b"] .ov-b,.offer2[data-v="c"] .ov-c{display:grid}
.offer2 h2{font-size:clamp(44px,5.2vw,86px)}
.offer2 h2 em{font-size:.38em!important}
.offer2 .code{display:inline-flex;gap:12px;align-items:center;border:1.5px dashed rgba(21,21,21,.6);padding:10px 14px;width:max-content}
.offer2 .code b{font-family:var(--mono);font-size:22px;letter-spacing:.14em}
.offer2 .copyb{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:8px 10px;background:var(--ink);color:#fff;border-radius:2px}
.offer2 .cd{font-family:var(--mono);font-size:13px;letter-spacing:.06em}
.offer2 ul{list-style:none;display:grid;gap:6px;font-size:15px;padding:0;margin:0}
.offer2 li::before{content:"✓";color:#0a9e3e;margin-right:10px}
/* A ticket */
.ov-a{grid-template-columns:1.05fr .95fr;gap:clamp(20px,4vw,64px);align-items:center;padding:clamp(36px,6vh,72px) var(--gut);min-height:min(100svh,880px);box-sizing:border-box}
.tk{display:grid;grid-template-columns:1fr 88px;background:var(--bone);box-shadow:0 24px 60px rgba(0,0,0,.14);transform:rotate(-1.2deg);position:relative;max-width:640px}
.tk::before,.tk::after{content:"";position:absolute;right:76px;width:24px;height:24px;border-radius:50%;background:var(--paper)}
.tk::before{top:-12px}.tk::after{bottom:-12px}
.tk-main{padding:clamp(22px,3vw,38px);display:grid;gap:14px;min-width:0}
.tk-stub{background:var(--lime);display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:12px;padding:20px 0;border-left:2px dashed rgba(21,21,21,.45)}
.tk-stub span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);font-weight:700;font-size:22px;letter-spacing:.14em}
.tk-stub i{width:40px;flex:1;max-height:150px;background:repeating-linear-gradient(0deg,#151515 0 2px,transparent 2px 5px,#151515 5px 6px,transparent 6px 9px,#151515 9px 12px,transparent 12px 14px)}
.tk-stub small{writing-mode:vertical-rl;font-family:var(--mono);font-size:10px;letter-spacing:.08em}
.tk-pic{width:min(100%,560px);aspect-ratio:1;border-radius:50%;overflow:hidden;justify-self:center;box-shadow:inset 0 0 0 12px #D6DADF}
.tk-pic img{width:100%;height:100%;object-fit:cover}
/* B lime tile */
.ov-b{background:var(--lime);grid-template-columns:1.1fr .9fr;gap:clamp(20px,4vw,60px);align-items:center;padding:clamp(36px,7vh,84px) var(--gut);min-height:min(100svh,880px);box-sizing:border-box}
.lb-txt{display:grid;gap:16px;min-width:0}
.lb-l{font-family:var(--mono);font-size:clamp(26px,3.3vw,52px);line-height:1.22;letter-spacing:-.01em;margin:0}
.lb-l span{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.lb-code{display:flex;align-items:stretch;border:2px solid var(--ink);width:max-content;max-width:100%}
.lb-code b{font-family:var(--disp);font-weight:600;font-size:clamp(38px,4.8vw,78px);padding:4px 18px;letter-spacing:.04em;line-height:1.1}
.lb-code .copyb{background:var(--ink);color:var(--lime);padding:0 16px}
.ov-b ul li::before{color:var(--ink)}
.ov-b .btn{background:var(--ink);color:#fff}
.lb-pic{position:relative;margin:0;background:#fff;padding:12px 12px 46px;transform:rotate(3deg);box-shadow:0 20px 50px rgba(0,0,0,.2);max-width:520px;width:100%;justify-self:center;box-sizing:border-box}
.lb-pic img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.lb-pic figcaption{position:absolute;left:14px;bottom:15px;font-family:var(--mono);font-size:12px}
.lb-pic .tape{position:absolute;width:110px;height:30px;background:rgba(255,255,255,.6);box-shadow:0 1px 2px rgba(0,0,0,.08);z-index:2}
.lb-pic .t1{top:-12px;left:-26px;transform:rotate(-24deg)}
.lb-pic .t2{top:-12px;right:-26px;transform:rotate(24deg)}
/* C porthole stamp */
.ov-c{grid-template-columns:1fr 1fr;align-items:center;gap:clamp(20px,4vw,60px);padding:clamp(36px,6vh,72px) var(--gut);min-height:min(100svh,880px);box-sizing:border-box}
.pc-txt{display:grid;gap:14px;min-width:0}
.pc-port{position:relative;justify-self:center;width:min(600px,42vw);aspect-ratio:1}
.pc-circle{position:absolute;inset:0;border-radius:50%;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.12)}
.pc-circle::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 14px #D3D7DC}
.pc-circle img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.pc-stamp{position:absolute;width:36%;left:-8%;bottom:0}
.pc-stamp circle{fill:var(--lime)}
.pc-stamp text{font-family:var(--mono);font-size:12.5px;letter-spacing:1.6px;fill:var(--ink)}
.pc-stamp .big{font-family:var(--disp);font-size:48px;font-weight:600;letter-spacing:0}
.pc-stamp .rot{transform-origin:100px 100px;animation:spin 16s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.pc-stamp .rot{animation:none}}
@media(max-width:800px){
  .ov-a,.ov-b,.ov-c{grid-template-columns:1fr;min-height:0}
  .tk{transform:none;grid-template-columns:1fr 64px}.tk::before,.tk::after{right:52px}
  .tk-stub span{font-size:16px}.tk-pic{width:min(80vw,380px)}
  .pc-port{width:min(84vw,420px);order:-1}.lb-pic{max-width:380px}
}

/* ---- review panel ---- */
.rv-p{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:70;font-family:var(--mono);font-size:12px}
.rv-t{all:unset;cursor:pointer;background:var(--ink);color:var(--lime);padding:9px 12px;box-shadow:0 6px 20px rgba(0,0,0,.2)}
.rv-b{margin-top:8px;background:var(--bone);color:var(--ink);padding:12px;box-shadow:0 10px 30px rgba(0,0,0,.2);display:grid;gap:10px;width:min(340px,calc(100vw - 24px));box-sizing:border-box}
.rv-b[hidden]{display:none}
.rv-b p{margin:0;opacity:.7}
.rv-g{display:grid;gap:6px}
.rv-g span{display:flex;flex-wrap:wrap;gap:4px}
.rv-g button{all:unset;cursor:pointer;border:1px solid rgba(21,21,21,.3);padding:5px 9px}
.rv-g button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
@media(max-width:700px){.rv-p{bottom:auto;top:calc(64px + env(safe-area-inset-top,0px));left:8px}.rv-p .rv-b{position:absolute;top:100%}}
.bdg .bb{display:block}
.bdg .bb b,.bdg .bb .role{display:block}
.bdg .bb .role{margin:4px 0 10px}
.bdg blockquote{margin:0}
@media(max-width:700px){.rv-p{top:auto;left:auto;right:8px;bottom:calc(84px + env(safe-area-inset-bottom,0px))}.rv-p .rv-b{position:absolute;top:auto;bottom:100%;right:0;margin:0 0 8px}}
@media(max-width:480px){.xp-badges{padding-inline:6px;box-sizing:border-box}.bdg .bb b{font-size:17px}}

/* ---- experts v2.2: three calmer options ---- */
.xp2{background:var(--paper);color:var(--ink);padding-block:clamp(48px,9vh,96px)}
.xp2>div{display:none}
.xp2[data-v="a"] .xa,.xp2[data-v="b"] .xb,.xp2[data-v="c"] .xc{display:grid}
.xp2 h2{font-size:clamp(34px,4.4vw,68px)!important}
.xp2 .xp-t{display:grid;gap:18px;align-content:center;min-width:0}
.xp2 .lede{max-width:38ch;font-size:16.5px;color:#3B3D42}
.xp2 .xp-cta{display:flex;gap:10px;flex-wrap:wrap}
.xp2 .btn.o{color:var(--ink)}
.xp2 .role{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.xp2 blockquote{margin:0}
/* A: editorial portraits */
.xa{grid-template-columns:1.05fr 1fr 1fr;gap:clamp(18px,2.6vw,40px);align-items:start}
.xa-p{margin:0;display:grid;gap:14px}
.xa-p .im{aspect-ratio:4/5;overflow:hidden;background:#D6DADF}
.xa-p .im img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:saturate(.9)}
.xa-p figcaption{display:grid;gap:4px;border-top:1px solid rgba(21,21,21,.18);padding-top:12px}
.xa-p b{font-family:var(--disp);font-weight:600;font-size:clamp(18px,1.6vw,23px);text-transform:uppercase;line-height:1.05}
.xa-p blockquote{font-size:15.5px;line-height:1.45;margin-top:6px;max-width:34ch}
.xa .xp-t{align-self:center}
/* B: quote-led */
.xb{grid-template-columns:.9fr 1.1fr;gap:clamp(24px,5vw,80px);align-items:center}
.xb-r{display:grid}
.xb-q{margin:0;display:grid;gap:18px;padding:clamp(20px,3.4vh,34px) 0;border-top:1px solid rgba(21,21,21,.18)}
.xb-q:last-child{border-bottom:1px solid rgba(21,21,21,.18)}
.xb-q blockquote{font-family:var(--disp);font-weight:500;font-size:clamp(22px,2.3vw,36px);line-height:1.12;text-wrap:balance;position:relative;padding-left:.9em}
.xb-q blockquote::before{content:"\201C";position:absolute;left:0;top:-.08em;color:var(--green);font-size:1.5em;line-height:1}
.xb-q figcaption{display:flex;align-items:center;gap:14px;padding-left:clamp(20px,2vw,32px)}
.xb-q figcaption img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 20%}
.xb-q figcaption>span{display:grid;gap:2px}
.xb-q figcaption b{font-weight:700;font-size:15px}
/* C: porthole portraits */
.xc{justify-items:center;text-align:center;gap:clamp(24px,4vh,40px)}
.xc-h{display:grid;justify-items:center;gap:14px}
.xc-g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,110px);max-width:900px;width:100%}
.xc-p{margin:0;display:grid;justify-items:center;gap:6px}
.xc-p .ring{width:clamp(150px,15vw,210px);aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 0 10px var(--bone),0 0 0 11px rgba(21,21,21,.15),0 20px 40px rgba(0,0,0,.12);margin-bottom:18px}
.xc-p .ring img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.xc-p b{font-family:var(--disp);font-weight:600;font-size:clamp(19px,1.7vw,24px);text-transform:uppercase}
.xc-p blockquote{margin-top:10px;font-size:16.5px;line-height:1.45;max-width:32ch}
.xc-cta{justify-content:center}
@media(max-width:860px){
  .xa{grid-template-columns:1fr 1fr}.xa .xp-t{grid-column:1/-1}
  .xb{grid-template-columns:1fr}
  .xa-p blockquote{font-size:14px}
}
@media(max-width:520px){.xc-g{grid-template-columns:1fr}.xa{gap:14px}.xa-p b{font-size:16px}}
.xa h2{font-size:clamp(28px,3vw,50px)!important}.xa-p .im{aspect-ratio:5/6}

/* ================= v3 (1 Oct) ================= */
/* mobile stories on top of the hero (open the Everyday Muby player) */
.hstories{display:none}
@media(max-width:700px){
  .hstories{display:flex;gap:12px;position:absolute;z-index:4;left:0;right:0;top:calc(62px + env(safe-area-inset-top,0px));padding:0 16px 4px;overflow-x:auto;scrollbar-width:none}
  .hstories::-webkit-scrollbar{display:none}
  .hs{all:unset;cursor:pointer;flex:0 0 auto;display:grid;justify-items:center;gap:4px;width:62px}
  .hs img{width:54px;height:54px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--bone),0 0 0 4.5px var(--green)}
  .hs span{font-family:var(--mono);font-size:9.5px;max-width:62px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:rgba(244,245,247,.9);padding:1px 4px}
  .hero picture{top:96px!important;height:calc(54% - 40px)!important}
}
/* offer: pick a face */
.offer3{background:var(--paper);color:var(--ink);padding-block:clamp(48px,9vh,96px)}
.of3{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,4vw,64px);align-items:center}
.of3-t{display:grid;gap:14px;min-width:0}
.offer3 h2{font-size:clamp(44px,5.2vw,86px)}
.offer3 h2 em{font-size:.36em!important}
.of3-hint{font-family:var(--mono);font-size:13px;letter-spacing:.04em;margin:0}
.of3-win{display:grid;gap:8px;animation:stamp .6s cubic-bezier(.2,1.6,.4,1) both}
.of3-win[hidden]{display:none}
.offer3 .code{display:inline-flex;gap:12px;align-items:center;background:var(--lime);border:2px solid var(--ink);padding:10px 14px;width:max-content}
.offer3 .code b{font-family:var(--mono);font-size:24px;letter-spacing:.14em}
.offer3 .copyb{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:8px 10px;background:var(--ink);color:#fff;border-radius:2px}
.offer3 .cd{font-family:var(--mono);font-size:12.5px;margin:0}
.offer3 ul{list-style:none;display:grid;gap:6px;font-size:15px;padding:0;margin:0}
.offer3 li::before{content:"✓";color:#0a9e3e;margin-right:10px}
.pfs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.8vw,24px);align-items:center}
.pf{all:unset;cursor:pointer;perspective:1100px;display:block;min-width:0}
.pf:nth-child(1){transform:rotate(-3deg)}.pf:nth-child(2){transform:rotate(1.5deg) translateY(-14px)}.pf:nth-child(3){transform:rotate(-1deg)}
.pf-in{display:grid;aspect-ratio:3/4;transition:transform .75s cubic-bezier(.3,1.3,.5,1);transform-style:preserve-3d;animation:bob 3.4s ease-in-out infinite}
.pf:nth-child(2) .pf-in{animation-delay:-1.1s}.pf:nth-child(3) .pf-in{animation-delay:-2.2s}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -6px}}
.pf:hover:not(.open) .pf-in{transform:rotateY(14deg)}
.pf.open .pf-in{transform:rotateY(180deg);animation:none}
.pf-f,.pf-b{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 18px 40px rgba(0,0,0,.14);overflow:hidden}
.pf-f{background:var(--bone)}
.pf-f img{width:100%;height:100%;object-fit:cover}
.pf-b{transform:rotateY(180deg);background:var(--bone);display:grid;align-content:center;justify-items:center;text-align:center;gap:10px;padding:12px}
.pf-b b{font-family:var(--disp);font-weight:600;font-size:clamp(26px,3vw,48px);line-height:1;text-transform:uppercase}
.pf-b small{font-family:var(--mono);font-size:clamp(10px,.9vw,12px);letter-spacing:.06em}
.pf.w .pf-b{background:var(--lime)}
.pf:focus-visible .pf-f{outline:3px solid var(--green);outline-offset:3px}
@media(max-width:800px){.of3{grid-template-columns:1fr}.pfs{order:-1}.pf-b b{font-size:24px}}
@media(prefers-reduced-motion:reduce){.pf-in{animation:none;transition:none}}
.hero .hs img{position:static!important;inset:auto;width:54px;height:54px;animation:none!important;transform:none!important;clip-path:none!important}

/* ================= MUBY ART v4 (1 Oct 2026) ================= */
/* ---- hero motion: B scroll seal / D type ---- */
.hpin{position:relative}
.hpin[data-m="b"]{height:185vh;height:185svh}
.hpin[data-m="b"] .hero{position:sticky;top:0}
.hero[data-v="a"] img{animation:none!important;transform:none!important}
.hx{position:absolute;z-index:1;pointer-events:none}
.hero .c{z-index:2}
.hx-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hx-l{font-family:var(--disp);font-weight:500;fill:#fff;letter-spacing:.02em;transform-box:fill-box;transform-origin:center}
.hx-seal{opacity:0;transform:scale(0)}
.hx-mark{opacity:0}
.hx-mu{font-family:var(--disp);font-weight:500;fill:#D2D5D9;letter-spacing:.04em}
.hx-mu.hi{fill:#fff;opacity:.85}.hx-mu.lo{fill:#000;opacity:.2}
.hx-ring{font-family:var(--mono);font-weight:700;fill:#000;opacity:.22;letter-spacing:.1em}
.hx-bot{opacity:0}
.hx-rim text{font-family:var(--mono);font-weight:700;fill:var(--ink);letter-spacing:.12em}
.hx-rim,.hx-stamp,.hx-lines{display:none}
.hpin[data-m="b"] .hx-lines{display:inline}
.hpin[data-m="d"] .hx-rim{display:inline;opacity:0}
.hpin[data-m="d"] .hx.go .hx-rim{animation:hxIn 1s ease 1.3s forwards,hxSpin 48s linear 1.3s infinite}
@keyframes hxIn{to{opacity:.85}}
@keyframes hxSpin{to{transform:rotate(360deg)}}
.hx-stamp{position:absolute;transform:translate(-50%,-50%) rotate(-7deg);background:var(--lime);color:var(--ink);font-family:var(--mono);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(14px,1.35vw,22px);padding:.45em .7em;box-shadow:0 6px 18px rgba(0,0,0,.18);white-space:nowrap}
.hpin[data-m="d"] .hx-stamp{display:block;opacity:0}
.hpin[data-m="d"] .hx.go .hx-stamp{animation:hxStamp .7s cubic-bezier(.2,1.6,.4,1) 2s forwards}
@keyframes hxStamp{from{opacity:0;transform:translate(-50%,-50%) scale(1.8) rotate(-16deg)}to{opacity:1;transform:translate(-50%,-50%) rotate(-7deg)}}
.hxm{position:fixed;z-index:60;left:16px;bottom:16px;display:flex;gap:6px;align-items:center;background:var(--ink);color:#fff;padding:6px 6px 6px 12px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.hxm button{all:unset;cursor:pointer;padding:6px 10px;border:1px solid rgba(255,255,255,.3)}
.hxm button.on{background:var(--lime);color:var(--ink);border-color:var(--lime)}
@media(max-width:700px){.hx-stamp{font-size:13px}.hxm{left:8px;right:auto;bottom:8px;font-size:10px}.hxm span{display:none}}
@media(prefers-reduced-motion:reduce){.hpin[data-m="b"]{height:auto}.hpin[data-m="b"] .hero{position:relative}.hpin .hx-rim,.hpin .hx-stamp{animation:none!important;opacity:1!important}.hx-l{opacity:1}}

/* ---- phone stories: rings no longer clipped ---- */
@media(max-width:700px){.hstories{padding-top:6px;top:calc(56px + env(safe-area-inset-top,0px))}}

/* ---- Your words: light, on-theme ---- */
.wall2.dk{background:var(--bone);color:var(--ink)}
.wall2.dk h2,.wall2.dk .rvbig strong{color:var(--ink)}
.wall2.dk h2 em{color:var(--ink);opacity:.6}
.wall2.dk .rvbig b{color:var(--green)}
.wall2.dk .rvbig span,.wall2.dk .k{color:var(--ink)}
.wall2.dk .r .v{background:var(--lime);color:var(--ink)}

/* ================= MUBY ART v5 (1 Oct 2026) ================= */
/* ---- heroes: portrait 4:5 frame ---- */
@media(min-width:701px){
  .heroes .panel{grid-template-columns:auto 1fr;align-items:center}
  .heroes .panel img{height:min(62svh,580px);width:auto;aspect-ratio:4/5}
}
@media(max-width:700px){.heroes .panel img{aspect-ratio:4/5;height:auto}}
.heroes .panel img.h-ade{object-position:72% 50%}
.heroes .panel img.h-fer{object-position:46% 50%}
.heroes .panel img.h-pdrn{background:#0b1430}

/* ---- film grain (Protector look) ---- */
:root{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.grainy{position:relative}
.grainy::after,.hero[data-v="p"] picture::after{content:"";position:absolute;inset:0;background:var(--grain);mix-blend-mode:overlay;opacity:.55;pointer-events:none}

/* ---- Protector hero ---- */
.pkick{display:none}
.hero[data-v="p"] .pkick{display:block;width:max-content;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:var(--lime);color:var(--ink);padding:4px 9px;margin-bottom:-4px}
.hero[data-v="p"]{background:#d6dadd}
.hero[data-v="p"] picture{clip-path:none!important;animation:none!important}
.hero[data-v="p"] img{object-position:70% 30%}
.hero.play[data-v="p"] img{animation:kb 2.6s cubic-bezier(.2,.8,.2,1) both!important}
.hpin[data-m="p"] .hx{display:none}
@media(max-width:700px){.hero[data-v="p"] picture img{object-position:50% 12%!important}.hero[data-v="p"] .pkick{position:absolute;top:-92px;right:0}}

/* ---- Barrier nerds ---- */
.nerds{background:var(--bone);color:var(--ink);padding:clamp(40px,7vh,80px) 0}
.nerds .nw{width:min(1320px,calc(100% - 2*var(--gut,24px)));margin:0 auto;display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,80px);align-items:center}
.nerds .npo{margin:0;height:min(76svh,720px);aspect-ratio:4/5;overflow:hidden;background:#cfcfcd}
.nerds .npo img{width:100%;height:100%;object-fit:cover;display:block}
.nerds h2{font-size:clamp(30px,3.4vw,54px)!important;line-height:1.02;margin:14px 0 22px;max-width:16ch}
.nerds h2 em{display:block;font-size:.62em;opacity:.65;margin-top:8px;font-style:normal}
.nerds .nl{list-style:none;margin:0 0 26px;padding:0;border-top:1px solid rgba(21,21,21,.18)}
.nerds .nl li{display:flex;gap:14px;align-items:baseline;padding:13px 0;border-bottom:1px solid rgba(21,21,21,.18);font-family:var(--disp);font-weight:500;text-transform:uppercase;font-size:clamp(17px,1.6vw,24px);letter-spacing:.01em;transition:transform .3s}
.nerds .nl li:hover{transform:translateX(6px)}
.nerds .nl span{font-family:var(--mono);font-size:11px;background:var(--lime);padding:2px 6px;letter-spacing:.06em}
@media(max-width:700px){.nerds .nw{grid-template-columns:1fr}.nerds .npo{height:auto;width:100%}}

/* ---- Meet the Duo: look options ---- */
.dvt{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:14px;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.dvt span{opacity:.6;margin-right:4px}
.dvt button{all:unset;cursor:pointer;padding:6px 10px;border:1px solid rgba(21,21,21,.3)}
.dvt button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.duo .dvA,.duo .dvB,.duo .dvC,.duo .dvz{display:none}
.duo[data-dv="a"] .dvA,.duo[data-dv="b"] .dvB,.duo[data-dv="c"] .dvC{display:grid}
.duo[data-dv="z"] .dvz{display:grid}
.duo[data-dv="a"],.duo[data-dv="b"],.duo[data-dv="c"]{padding-bottom:clamp(30px,5vh,60px)}
.duo[data-dv="a"]{background:#d6dadd}
/* A protectors */
.dvA{grid-template-columns:1fr auto 1fr;gap:clamp(12px,2vw,28px);align-items:start;justify-content:center}
.dvA .pa{display:grid;gap:12px;justify-items:stretch;max-width:520px;justify-self:center;width:100%}
.dvA .pim{position:relative;aspect-ratio:4/5;max-height:min(60svh,600px);overflow:hidden;background:#cfd3d6}
.dvA .pim img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
.dvA .pim::after{content:"";position:absolute;inset:0;background:var(--grain);mix-blend-mode:overlay;opacity:.55;pointer-events:none}
.dvA .pt{position:absolute;z-index:1;left:0;right:0;top:4%;text-align:center;font-family:var(--disp);font-weight:500;text-transform:uppercase;color:#fff;font-size:clamp(46px,5.4vw,88px);line-height:.9;text-shadow:0 2px 24px rgba(0,0,0,.18)}
.dvA .pt small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;margin-top:10px;text-shadow:none;color:var(--ink);background:var(--lime);width:max-content;margin-inline:auto;padding:3px 8px}
.dvA .pin p{font-size:14.5px;line-height:1.45;margin:0 0 10px}
.dvA .pplus{align-self:center;font-family:var(--disp);font-size:clamp(40px,4vw,64px);opacity:.5}
/* B ledger */
.dvB{grid-template-columns:minmax(0,.9fr) 1.1fr;gap:clamp(20px,4vw,60px);align-items:center}
.dvB .bpic{aspect-ratio:4/5;max-height:min(66svh,640px);overflow:hidden;justify-self:end;width:100%}
.dvB .bpic img{width:100%;height:100%;object-fit:cover;display:block}
.dvB .btx{border-top:1px solid rgba(21,21,21,.2)}
.dvB .brow{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:clamp(14px,2.4vh,24px) 0;border-bottom:1px solid rgba(21,21,21,.2)}
.dvB .brow .n{font-family:var(--mono);font-size:12px;background:var(--lime);padding:2px 6px;align-self:start;margin-top:8px}
.dvB .brow b{display:block;font-family:var(--disp);font-weight:500;text-transform:uppercase;font-size:clamp(30px,3vw,46px);line-height:1}
.dvB .brow small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.65;margin:6px 0}
.dvB .brow p{margin:0;font-size:14.5px;max-width:44ch;opacity:.85}
.dvB .btn{background:var(--ink);color:#fff}.dvB .btn.g{background:var(--green);color:var(--ink)}
/* C stickers */
.dvC{grid-template-columns:1fr auto 1fr auto minmax(220px,.8fr);gap:clamp(10px,1.6vw,24px);align-items:center;background:var(--bone);padding:clamp(18px,3vw,36px)!important}
.dvC .sk{margin:0;position:relative;display:grid;gap:10px;justify-items:center;text-align:center}
.dvC .sk img{width:100%;max-height:min(46svh,440px);aspect-ratio:3/4;object-fit:cover;object-position:50% 50%;display:block;transition:transform .4s cubic-bezier(.2,1.6,.4,1)}
.dvC .sk:hover img{transform:rotate(-3deg) scale(1.03)}
.dvC .st{position:absolute;z-index:1;top:10px;left:10px;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;background:var(--lime);padding:3px 8px;transform:rotate(-4deg)}
.dvC figcaption{display:grid;gap:6px;justify-items:center}
.dvC figcaption b{font-family:var(--disp);font-weight:500;text-transform:uppercase;font-size:clamp(28px,2.6vw,40px);line-height:1}
.dvC figcaption span{font-size:14px;opacity:.8;max-width:30ch}
.dvC .sop{font-family:var(--disp);font-size:clamp(40px,4vw,64px);opacity:.45}
.dvC .ssum{display:grid;gap:10px;justify-items:start}
.dvC .ssum b{font-family:var(--disp);font-weight:500;text-transform:uppercase;font-size:clamp(26px,2.4vw,38px);line-height:1}
.dvC .btn{background:var(--ink);color:#fff}.dvC .btn.g{background:var(--green);color:var(--ink)}
@media(max-width:700px){
  .dvA{grid-template-columns:1fr}.dvA .pplus{justify-self:center;margin:-6px 0}
  .dvA .pim{max-height:none}
  .dvB{grid-template-columns:1fr}.dvB .bpic{max-height:none}
  .dvB .brow{grid-template-columns:auto 1fr}.dvB .brow .btn{grid-column:2;justify-self:start}
  .dvC{grid-template-columns:1fr 1fr}.dvC .sop{display:none}.dvC .ssum{grid-column:1/-1}
  .dvC .sk img{max-height:none}
}
.dvC{align-items:start}.dvC .sop,.dvC .ssum{align-self:center}
.dvA .pim{max-height:min(55svh,560px)}
.dvA .pim{max-height:min(51svh,560px)}

/* ================= MUBY ART v6 ================= */
/* ---- Everyday Muby: bigger tiles, side scroll ---- */
.ev-t{width:clamp(220px,21vw,330px)}
.ev-row{gap:16px;scroll-snap-type:x proximity;scroll-padding-left:var(--gut)}
.ev-nav{display:flex;align-items:center;gap:8px}
.ev-nav .ev-note{margin-right:8px}
.ev-ar{all:unset;cursor:pointer;width:46px;height:46px;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:18px}
.ev-ar:hover{background:var(--green);color:var(--ink)}
.ev-ar:disabled{opacity:.25;cursor:default;background:var(--ink);color:#fff}
.ev-row{cursor:grab}
@media(max-width:700px){.ev-t{width:62vw}.ev-ar{width:38px;height:38px}}
/* ---- section rhythm: neighbours never share a background ---- */
:root{--mist:#E9ECEF}
.ev{background:var(--mist)}
.duo,.duo[data-dv="c"]{background:var(--mist)}
.nerds{background:var(--mist)}
.faq{background:var(--bone)}
.heroes .panel img.h-ade,.heroes .panel img.h-fer{object-position:50% 50%}
.heroes .panel img{background:#d6dadd}
/* ---- hero options (Protector set) ---- */
.hero[data-v="p"] img{object-position:72% 30%}
.hero[data-h="hp4"] img{object-position:80% 40%}
@media(max-width:700px){
  .hero[data-h="hp1"] picture img{object-position:80% 10%!important}
  .hero[data-h="hp2"] picture img{object-position:66% 8%!important}
  .hero[data-h="hp3"] picture img{object-position:64% 14%!important}
  .hero[data-h="hp4"] picture img{object-position:84% 40%!important}
  .hero[data-h="hp5"] picture img{object-position:70% 12%!important}
  .hero[data-h="hp6"] picture img{object-position:70% 10%!important}
}
.hxm{flex-wrap:wrap;max-width:calc(100vw - 32px)}
.ev-h>.ev-nav{display:flex;flex-direction:row;align-items:center}
.hero[data-h="hp3"] img{object-position:100% 30%}
.hero[data-h="hp4"] img{object-position:100% 40%}
@media(min-width:701px){.ev-t{width:clamp(200px,min(21vw,calc((100svh - 390px) * .5625)),330px)}}
/* ---- pick a face: free-floating heads ---- */
.pf-f,.pf-b{box-shadow:none;overflow:visible}
.pf-f{background:transparent;display:grid;place-items:end center}
.pf-f img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 16px 22px rgba(0,0,0,.18))}
.pf-b{background:transparent}
.pf-b::before{content:"";position:absolute;inset:8% 4% 4%;background:var(--bone);border-radius:48% 48% 40% 40%/52% 52% 34% 34%;box-shadow:0 16px 30px rgba(0,0,0,.14);z-index:-1}
.pf.w .pf-b{background:transparent}.pf.w .pf-b::before{background:var(--lime)}
.pf-b{position:relative;isolation:isolate}
/* ---- Barrier nerds: text left, poster right ---- */
@media(min-width:701px){.nerds .nw{grid-template-columns:1fr auto}.nerds .npo{order:2}}
/* ---- full-bleed divider ---- */
.fbd{position:relative;height:min(88svh,820px);min-height:460px;overflow:hidden;background:#9aa7a8;color:#fff}
.fbd img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
@supports(animation-timeline:view()){.fbd img{animation:fbdZ linear both;animation-timeline:view();animation-range:entry 0% exit 100%}@keyframes fbdZ{from{transform:scale(1.12)}to{transform:scale(1)}}}
.fbd-t{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;text-align:center;gap:14px;padding:0 var(--gut)}
.fbd-k{font-family:var(--disp);font-size:clamp(18px,1.6vw,24px);letter-spacing:.04em}
.fbd h2{color:#fff;font-size:clamp(44px,8.6vw,150px)!important;line-height:.92;text-shadow:0 2px 40px rgba(0,0,0,.12)}
.fbd-s{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
/* ---- Muby rules colour tiles ---- */
.rules{display:grid;grid-template-columns:repeat(4,1fr)}
.rt{position:relative;aspect-ratio:4/5;max-height:min(70svh,560px);width:100%;padding:clamp(18px,2.2vw,34px);display:grid;align-content:center;justify-items:center;text-align:center;overflow:hidden;transition:transform .5s cubic-bezier(.2,1.4,.4,1)}
.rt:hover{transform:rotate(-1.2deg) scale(1.02);z-index:1}
.rt i{position:absolute;left:clamp(18px,2.2vw,34px);top:clamp(18px,2.2vw,34px);width:34%;height:10px;background:rgba(0,0,0,.55)}
.rt b{position:absolute;right:clamp(16px,2vw,28px);bottom:clamp(14px,1.8vw,24px);font-family:var(--font);font-weight:500;font-size:14px}
.rt p{font-family:var(--mono);font-size:clamp(17px,1.7vw,26px);line-height:1.35;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;max-width:13ch;margin:0}
.rt h3{font-family:var(--disp);font-weight:500;text-transform:uppercase;font-size:clamp(30px,3.2vw,54px);line-height:.95;margin:0}
.rt small{position:absolute;top:clamp(16px,2vw,28px);left:0;right:0;font-family:var(--disp);font-size:14px;letter-spacing:.04em}
.rt span{display:block;margin-top:16px;font-family:var(--disp);text-transform:uppercase;font-size:clamp(13px,1.1vw,17px);letter-spacing:.03em;line-height:1.25}
.rt-lime{background:var(--lime);color:var(--ink)}
.rt-chart{background:#D4F23A;color:var(--ink)}
.rt-pink{background:#FF76D0;color:var(--ink)}
.rt-brown{background:var(--brown);color:var(--bone)}
@media(max-width:700px){.rules{grid-template-columns:1fr 1fr}.rt{aspect-ratio:1}.rt p{font-size:15px}.rt h3{font-size:26px}}
/* ---- hero round 3 options ---- */
.hero:not([data-h="hp6"]) .pkick{display:none!important}
.hero[data-h^="hn"] img{object-position:70% 50%}
.hero[data-h="hn3"] h1,.hero[data-h="hn3"] h1 em,.hero[data-h="hn3"] .sub,.hero[data-h="hn3"] .trust{color:#fff!important}
.hero[data-h="hn3"] .btn.o{color:#fff;border-color:#fff}
.hero[data-h="hn4"] .btn.g{background:var(--ink);color:#fff}
.hero[data-h="hn2"] img{object-position:80% 40%}
@media(max-width:700px){
  .hero[data-h="hn0"] picture img{object-position:62% 50%!important}
  .hero[data-h="hn1"] picture img{object-position:84% 60%!important}
  .hero[data-h="hn2"] picture img{object-position:68% 40%!important}
  .hero[data-h="hn3"] picture img{object-position:84% 40%!important}
  .hero[data-h="hn4"] picture img{object-position:76% 30%!important}
  .hero[data-h="hn5"] picture img{object-position:82% 40%!important}
  .hero[data-h="hn7"] picture img{object-position:82% 30%!important}
  .hero[data-h="hn3"] h1,.hero[data-h="hn3"] h1 em,.hero[data-h="hn3"] .sub,.hero[data-h="hn3"] .trust{color:var(--ink)!important}
  .hero[data-h="hn3"] .btn.o{color:var(--ink);border-color:var(--ink)}
}
.hero[data-h="hn3"]::before,.hero[data-h="hn4"]::before{display:none}
.hero[data-h="hn3"]::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,0) 55%)}
@media(max-width:700px){.hero[data-h="hn3"]::after{display:none}}
.hxm{position:absolute;z-index:6}

/* ================= MUBY ART v8 ================= */
/* ---- Meet your heroes: balanced desktop layout (vertical index | image | copy) ---- */
@media(min-width:1100px){
  .heroes{display:grid;grid-template-columns:minmax(220px,19vw) 1fr;grid-template-areas:"head head" "tabs panel";column-gap:clamp(28px,3vw,56px);align-items:start}
  .heroes .head{grid-area:head}
  .heroes .tabs{grid-area:tabs;display:flex;flex-direction:column;gap:0;counter-reset:hx;border-top:1px solid rgba(21,21,21,.18);margin:0;align-self:stretch}
  .heroes .tabs button{all:unset;cursor:pointer;counter-increment:hx;display:flex;align-items:baseline;gap:14px;padding:clamp(10px,1.6vh,16px) 6px;border-bottom:1px solid rgba(21,21,21,.18);font-family:var(--disp);font-weight:500;text-transform:uppercase;font-size:clamp(17px,1.5vw,24px);letter-spacing:.01em;color:rgba(21,21,21,.45);transition:color .25s,padding .25s,background .25s}
  .heroes .tabs button::before{content:counter(hx,decimal-leading-zero);font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:inherit}
  .heroes .tabs button:hover{color:var(--ink);padding-left:12px}
  .heroes .tabs button.on{color:var(--ink);background:var(--lime);padding-left:12px}
  .heroes .panel{grid-area:panel;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,3.4vw,64px);align-items:center}
  .heroes .panel img{height:min(64svh,620px)}
  .heroes .panel h3{font-size:clamp(24px,2.3vw,38px)}
  .heroes .panel p{font-size:clamp(14px,1.05vw,17px);max-width:52ch}
  .heroes .panel .dyk{max-width:52ch}
  .heroes .panel .n{font-size:clamp(64px,7vw,124px)}
}
.hnext{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.hnext .btn.o{color:var(--ink);border-color:rgba(21,21,21,.35)}
/* ---- divider v8: Korean nature, low band ---- */
.fbd{height:clamp(260px,44svh,440px);min-height:0}
.fbd h2{font-size:clamp(36px,6vw,104px)!important}
.fbd img{object-position:50% 55%}
.fbd::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.18));pointer-events:none}
.fbd-t{z-index:1}
/* ---- Barrier Invaders ---- */
.bi{background:var(--ink);color:var(--bone);padding:clamp(40px,7vh,80px) 0}
.bi-wrap{width:min(1320px,calc(100% - 2*var(--gut,24px)));margin:0 auto;display:grid;grid-template-columns:minmax(260px,.8fr) 1.4fr;gap:clamp(24px,4vw,64px);align-items:center}
.bi h2{color:var(--bone);font-size:clamp(34px,4.2vw,66px)!important;margin:14px 0 18px}
.bi h2 em{display:block;font-size:.42em;opacity:.7;font-style:normal;margin-top:10px}
.bi-leg{list-style:none;padding:0;margin:0 0 16px;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.bi-leg li{display:flex;align-items:center;gap:8px}.bi-leg i{width:12px;height:12px;display:block}
.bi-leg .m1{background:#e8c48a}.bi-leg .m2{background:#ff5a6e}.bi-leg .m3{background:#a3a9ae}.bi-leg .m4{background:#7cc8ff}
.bi-help{font-family:var(--mono);font-size:12px;opacity:.7;margin:0}.bi-help .tc{display:none}
@media(hover:none){.bi-help .kb{display:none}.bi-help .tc{display:inline}}
.bi-stage{position:relative;aspect-ratio:4/3;max-height:min(70svh,640px);width:100%;justify-self:center;border:2px solid var(--lime);box-shadow:0 0 0 6px rgba(65,242,58,.08),0 30px 60px rgba(0,0,0,.4);background:#0d0f0e}
.bi-stage canvas{width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none;outline:none}
.bi-ov{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:12px;text-align:center;background:rgba(13,15,14,.82);padding:20px}
.bi-ov[hidden]{display:none}
.bi-t{font-family:var(--mono);font-weight:700;color:var(--lime);font-size:clamp(20px,3vw,40px);letter-spacing:.08em;margin:0;text-shadow:0 0 18px rgba(65,242,58,.45)}
.bi-s{font-family:var(--mono);font-size:13px;margin:0;max-width:34ch}
.bi-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.bi .btn.o{color:var(--bone);border-color:rgba(244,245,247,.5)}
@media(max-width:800px){.bi-wrap{grid-template-columns:1fr}.bi-stage{max-height:none}}
.hero[data-h="hg2"] img{object-position:78% 50%}
.hero[data-h="hsw"] img{object-position:75% 30%}
@media(max-width:700px){.hero[data-h="hg2"] picture img{object-position:74% 40%!important}.hero[data-h="hsw"] picture img{object-position:74% 12%!important}}
.bi-btns [hidden]{display:none!important}

/* ================= MUBY ART v9 ================= */
.offer3{background:var(--mist)}
/* Barrier Land band: 20% lower, bigger place line */
.fbd{height:clamp(208px,35svh,352px)}
.fbd-s{font-size:clamp(14px,1.25vw,19px);letter-spacing:.16em}
/* Barrier Invaders v2 */
.bi-stage canvas{image-rendering:auto}
.bi-deal{font-size:16px;line-height:1.45;max-width:40ch;margin:0 0 18px}
.bi-deal b{background:var(--lime);color:var(--ink);padding:1px 6px;font-weight:700}
.bi-code{display:flex;gap:10px;align-items:center}
.bi-code[hidden]{display:none}
.bi-code span{font-family:var(--mono);font-weight:700;font-size:clamp(22px,2.6vw,34px);letter-spacing:.12em;color:var(--ink);background:var(--lime);padding:6px 14px}
.bi-code .btn{background:var(--bone);color:var(--ink)}
/* v9 heroes image set toggle */
.hset{display:inline-flex;gap:0;margin:0 0 18px;border:1px solid var(--ink);border-radius:999px;padding:3px}
.hset button{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;border:0;border-radius:999px;background:transparent;color:var(--ink);cursor:pointer}
.hset button.on{background:var(--ink);color:var(--bone)}
.heroes[data-set=i] .panel img{object-position:50% 50%!important;background:#e3e4e6}
@media(min-width:1100px){.heroes{grid-template-areas:"head head" "set set" "tabs panel"}.heroes .hset{grid-area:set;justify-self:start;margin:0 0 22px}}
/* v11: scroll cover back to the plain disc (no text); type mode = two lime stickers, no spinning rim */
.hpin[data-m="d"] .hx-rim{display:none!important}
.hpin[data-m="d"] .hx.go .hx-stamp.s2{animation-delay:2.5s}
.hx-stamp.s2{transform:translate(-50%,-50%) rotate(5deg)}
@keyframes hxStamp2{from{opacity:0;transform:translate(-50%,-50%) scale(1.8) rotate(14deg)}to{opacity:1;transform:translate(-50%,-50%) rotate(5deg)}}
.hpin[data-m="d"] .hx.go .hx-stamp.s2{animation-name:hxStamp2}
/* v12: MUBY emboss back on the scroll cover (still no ring text); Photos image set */
.heroes[data-set=f] .panel img{object-position:50% 50%!important;background:#e3e4e6}
.hset button[hidden]{display:none}
.heroes[data-set=pp] .panel img{object-position:50% 30%!important;background:#e3e4e6}
.heroes[data-set=pp] .panel img.h-pep{object-position:70% 30%!important}
.hero[data-h="hz1"] img{object-position:68% 30%}
.hero[data-h="hz2"] img{object-position:74% 30%}
@media(max-width:700px){.hero[data-h="hz1"] picture img{object-position:66% 20%!important}.hero[data-h="hz2"] picture img{object-position:76% 20%!important}}
/* v14: Meet your heroes images appear without the reveal animation */
.heroes .hp.on img,.heroes .panel img{animation:none!important;clip-path:none!important}
/* v16: Meet your heroes moved below Proof; re-balance backgrounds so neighbours differ */
.shop{background:var(--paper,#ECEEF1)}
.heroes{background:#ECEEF1}
.xp2{background:var(--mist)}
/* v18: Pick a face moved between Your words and Meet the Duo */
.offer3{background:#ECEEF1}
/* v19: Meet the Duo is one section: body shares the header's mist */
.duo .dvC{background:var(--mist)}
/* v21: gymnast heroes show instantly (no porthole opening, no headline/stars entrance) */
.hero.play[data-v="a"] picture,.hero.play[data-v="b"] picture{animation:none!important;clip-path:none!important}
.hero.play[data-v="a"] h1,.hero.play[data-v="a"] .stars.rv{animation:none!important}
/* v22: Meet the Duo removed (saved in saved-duo.html); Pick a face back to mist so it differs from Ten or two */
.offer3{background:var(--mist)}
#duo-card{scroll-margin-top:90px}
/* ================= MUBY ART v2 (3 Oct 2026) ================= */
/* Real K-beauty: Korean nature image with the headline on it */
.ledger .pic.kb{position:relative;overflow:hidden}
.ledger .pic.kb img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.ledger .pic.kb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.42));pointer-events:none}
.kb-t{position:absolute;left:clamp(20px,3vw,48px);right:clamp(20px,3vw,48px);bottom:clamp(22px,4vh,48px);z-index:1;margin:0;color:#fff!important;font-size:clamp(38px,4.6vw,78px)!important;line-height:.95;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.ledger .txt .lede{font-size:clamp(16px,1.2vw,19px);max-width:46ch}
@media(max-width:700px){.ledger .pic.kb{aspect-ratio:4/5;height:auto}.kb-t{font-size:40px!important}}
/* Proof: what the percentages mean */
.proof .pnote{font-family:var(--mono);font-size:12px;letter-spacing:.04em;line-height:1.5;opacity:.75;max-width:52ch;margin:14px 0 6px}
/* Ten or two: headline + image only */
.cmpB .head{margin-bottom:clamp(16px,3vh,28px)}
/* backgrounds after removing chores + barrier nerds: dose (bone) -> myth must differ */
.myth{background:var(--mist)}
@media(min-width:701px){#vs.cmpB{display:block!important}#vs .swipe{width:min(100%,calc(100svh - 230px),760px);aspect-ratio:1/1!important;max-height:none;margin:0}}

/* ================= MUBY ART v2: diorama hero, full-screen on mobile ================= */
.hero[data-h="hd"] img{object-position:50% 50%}
@media(max-width:700px){
  .hero[data-h="hd"]{height:100svh;min-height:620px;max-height:none;background:#F1F3F5}
  .hero[data-h="hd"] picture{inset:0!important;top:0!important;height:100%!important;width:100%}
  .hero[data-h="hd"] picture img{height:100%;object-fit:cover;object-position:82% 100%!important;animation:none!important}
  .hero[data-h="hd"] picture::after{content:"";position:absolute;inset:0;mix-blend-mode:normal;opacity:1;background:linear-gradient(180deg,rgba(241,243,245,.6) 0%,rgba(241,243,245,0) 14%)}
  .hero[data-h="hd"] .hs span{background:rgba(241,243,245,.92)}
  .hero[data-h="hd"] .c{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
  .hero[data-h="hd"] .stack{gap:10px}
  .hero[data-h="hd"] .stars.rv{position:static;top:auto;width:max-content;padding:5px 9px;font-size:12px}
  .hero[data-h="hd"] h1{font-size:min(10.4vw,46px)!important}
  .hero[data-h="hd"] .sub,.hero[data-h="hd"] .trust{display:none}
  .hero[data-h="hd"] .cta{flex-wrap:nowrap}
  .hero[data-h="hd"] .cta .btn{padding-left:16px;padding-right:16px;white-space:nowrap}
}
@media(max-width:700px) and (min-aspect-ratio:1/2){
  .hero[data-h="hd"] picture img{object-position:82% 30%!important}
  .hero[data-h="hd"] .stars.rv{display:none}
  .hero[data-h="hd"] h1{font-size:min(9.6vw,42px)!important}
  .hero[data-h="hd"] .c{background:linear-gradient(180deg,rgba(241,243,245,0),rgba(241,243,245,.92) 28%);padding-top:40px}
}
/* ---- v2: Korean, beyond the label as a Barrier Land style band ---- */
.ledger .kbband{color:#fff}
.ledger .kbband h2{color:#fff!important;line-height:.95}
.ledger .grid{grid-template-columns:1fr}
.ledger .txt{min-height:0;padding:clamp(36px,7vh,80px) var(--gut);max-width:1280px;margin:0 auto;width:100%;box-sizing:border-box}
@media(min-width:901px){
  .ledger .txt{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);column-gap:clamp(32px,5vw,96px);align-items:start}
  .ledger .txt .lede{grid-column:1;grid-row:1;font-size:clamp(20px,1.7vw,28px);line-height:1.3;max-width:24ch}
  .ledger .txt .rowz{grid-column:2;grid-row:1/span 2}
  .ledger .txt>div:last-child{grid-column:1;grid-row:2;align-self:start}
}
.ledger .grid{min-height:0!important;height:auto!important}
.ledger .txt{height:auto!important;align-content:start}
@media(min-width:901px){.ledger .txt{grid-template-rows:auto 1fr;row-gap:32px}}
/* ---- v2 r5: section order backgrounds (wall moved under proof) ---- */
.wall2.dk{background:var(--mist)}
.offer3{background:var(--bone)!important}
/* ---- v2 r5: mobile, stories on top, logo + bag under them ---- */
@media(max-width:700px){
  .hstories,.hero[data-h="hd"] .hstories{top:calc(10px + env(safe-area-inset-top,0px))!important;padding-top:0}
  .nav{top:calc(96px + env(safe-area-inset-top,0px))!important}
}
/* ---- v2 r5: Why Muby over the rest (replaces Full dose) ---- */
.why{background:var(--bone);color:var(--ink);padding-block:clamp(56px,10vh,110px)}
.why .wrap{max-width:1120px;margin:0 auto}
.why h2{text-align:center;font-size:clamp(36px,5vw,76px)!important;line-height:.95;margin:0 0 clamp(24px,4vh,44px)}
.why-h{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,6vw,120px);margin:0 auto clamp(22px,4vh,40px);max-width:860px}
.why-h figure{margin:0;display:grid;justify-items:center;gap:clamp(12px,2vh,20px)}
.why-h img{width:clamp(130px,22vw,260px);aspect-ratio:1;object-fit:cover;border-radius:50%!important;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.why-h figcaption{font-family:var(--disp);text-transform:uppercase;font-size:clamp(20px,2.6vw,38px);line-height:1;text-align:center;letter-spacing:.01em}
.why-h .mu figcaption{color:var(--ink)}
.why-t{list-style:none;margin:0;padding:0;display:grid;gap:clamp(10px,1.6vh,16px)}
.why-t li{position:relative;display:grid;grid-template-columns:1fr minmax(0,1.3fr) 1fr;align-items:center;min-height:clamp(64px,8.4vh,92px);border-radius:999px;background:linear-gradient(90deg,#ECEEF1 0 50%,#E3F1E0 50% 100%);overflow:hidden}
.why-t .t{background:#fff;border-radius:999px;align-self:stretch;display:grid;place-items:center;text-align:center;padding:10px clamp(12px,2vw,28px);font-weight:600;font-size:clamp(14px,1.3vw,19px);line-height:1.2;box-shadow:0 2px 14px rgba(0,0,0,.05)}
.why-t .x,.why-t .v{justify-self:center;width:clamp(34px,3.6vw,52px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:clamp(14px,1.4vw,20px)}
.why-t .x{background:#fff;color:#B4564A}
.why-t .v{background:var(--green);color:var(--ink)}
.why .ctas{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:clamp(24px,4vh,40px)}
@media(max-width:700px){
  .why-t li{grid-template-columns:52px minmax(0,1fr) 52px;min-height:62px}
  .why-t .t{font-size:14px;padding:10px 12px}
  .why-t .x,.why-t .v{width:32px;font-size:14px}
  .why-h img{width:clamp(120px,36vw,170px)}
}
.why-t li,.why-t .t{border-radius:999px!important}
.why-t .x,.why-t .v{border-radius:50%!important}
/* ---- v2 r6: stories band on top (mobile), ring draws on load ---- */
@property --hsa{syntax:'<angle>';inherits:false;initial-value:0deg}
@media(max-width:700px){
  .hstories,.hero[data-h="hd"] .hstories{top:0!important;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px!important;background:#F7F8FA;gap:14px;z-index:5}
  .hs{position:relative;width:60px;height:60px;display:grid;place-items:center}
  .hero .hs img{width:52px!important;height:52px!important;border-radius:50%;box-shadow:none!important}
  .hs::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,var(--green) var(--hsa),rgba(0,214,82,.18) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));animation:hsRing 1.1s cubic-bezier(.6,0,.2,1) var(--d,.3s) forwards}
  .hs span{display:none}
  .nav{top:calc(84px + env(safe-area-inset-top,0px))!important}
}
@keyframes hsRing{to{--hsa:360deg}}
@media(prefers-reduced-motion:reduce){.hs::before{animation:none;--hsa:360deg;background:var(--green)}}
/* ---- v2 r6: Your words rating on one line ---- */
.wall2 .rvbig{align-items:center;gap:16px}
.wall2 .rvbig>b{line-height:1;display:block;transform:translateY(-.06em)}
.wall2 .rvbig strong{line-height:1;display:block}
.ledger .kbband img{object-position:50% 52%}
.ledger .kbband::after{background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.28))}
.ledger .kbband img{object-position:50% 38%}
/* ---- v2 r7: desktop hero image to the right of the text ---- */
@media(min-width:701px){
  .hero[data-h="hd"]{background:var(--bone)}
  .hero[data-h="hd"]::before{display:none!important}
  .hero[data-h="hd"] picture{left:36%!important;right:0!important;width:auto!important}
  .hero[data-h="hd"] picture img{object-position:50% 60%!important}
  .hero[data-h="hd"] picture::after{mix-blend-mode:normal!important;opacity:1!important;background:linear-gradient(90deg,var(--bone) 0%,rgba(244,245,247,0) 18%)}
  .hero[data-h="hd"] h1{font-size:clamp(44px,5.4vw,96px)!important}
  .hero[data-h="hd"] .stack{max-width:min(40vw,600px)}
}
/* ---- v2 r7: Meet your heroes ---- */
.heroes .panel .dyk{background:rgba(0,214,82,.08)!important;border:1.5px solid var(--green)!important;border-radius:4px!important;padding:14px 16px!important;color:var(--ink)}
.heroes .panel .dyk b{display:block;text-decoration:none!important;font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#0a9e3e!important;margin-bottom:6px}
@media(max-width:700px){
  .heroes .panel img{display:none!important}
  .heroes .tabs{flex-wrap:wrap!important;overflow:visible!important;gap:8px!important}
  .heroes .tabs button{flex:0 0 auto}
}
@media(min-width:701px){.hero[data-h="hd"] picture::after{background:linear-gradient(90deg,var(--bone) 0%,rgba(244,245,247,.85) 14%,rgba(244,245,247,0) 32%)}}
/* ---- v2 r8 ---- */
.hero .stars.rv,.hero[data-h="hd"] .stars.rv{background:none!important;box-shadow:none!important;padding:0!important;border:0!important}
.proof .nums.four{grid-template-columns:repeat(3,1fr)!important}
.proof .nums.four>div{border-left:0!important;padding-left:0!important;padding-right:14px!important}
.proof .nums.four>div+div{border-left:1px solid rgba(21,21,21,.18)!important;padding-left:14px!important}
@media(max-width:700px){.proof .nums.four b{font-size:clamp(28px,8.6vw,40px)!important}.proof .nums.four span{font-size:12.5px}}
/* ================= v2 r9 (5 Oct) ================= */
/* 1. no opening animation on the hero image */
.hero[data-h="hd"] img,.hero.play[data-h="hd"] img,.hero[data-h="hd"] picture{animation:none!important;transform:none!important;clip-path:none!important}
/* 2. green notes in the did-you-know style */
.ledger .row .n{background:rgba(0,214,82,.08)!important;border:1.5px solid var(--green);border-radius:4px!important;color:#0a7a33!important;font-weight:700;padding:3px 7px!important}
.faq .zr{background:rgba(0,214,82,.08)!important;border:1.5px solid var(--green)!important;border-radius:4px!important;color:var(--ink)!important}
.faq .zr b{color:#0a7a33!important;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.faq .zr p{color:var(--ink)!important}
/* 3. smaller 4.99 next to the stars */
.wall2 .rvbig strong{font-size:clamp(26px,2.4vw,36px)!important;line-height:1!important}
.wall2 .rvbig>b{font-size:clamp(20px,2vw,28px)!important;transform:none}
.wall2 .rvbig{gap:12px}
/* 4. Muby left, typical routine right */
.why-t li{background:linear-gradient(90deg,#E3F1E0 0 50%,#ECEEF1 50% 100%)}
/* game (ink) now sits right above the footer: footer goes paper */
footer{background:var(--paper)!important;color:var(--ink)!important}
footer a,footer h4,footer p,footer span{color:var(--ink)}
footer .brand-logo,footer .brand img,footer img[src*="logo"]{filter:invert(1)!important}
footer .g>div:first-child>img{filter:invert(1)!important}
/* ---- v3 r11: heroes chooser, quieter index ---- */
.heroes .tabs .tr{display:none}
@media(min-width:1100px){
  .heroes .tabs{border-top:0;gap:4px;align-self:start;padding-top:2px}
  .heroes .tabs button{position:relative;display:grid!important;grid-template-columns:28px 1fr auto;align-items:center;gap:0 12px;padding:15px 16px 15px 14px!important;border:0!important;border-radius:3px;background:transparent!important;color:rgba(21,21,21,.42);font-size:clamp(17px,1.35vw,22px);letter-spacing:.02em;transition:color .25s,background .25s}
  .heroes .tabs button::before{font-size:10.5px;letter-spacing:.08em;color:rgba(21,21,21,.38);transition:color .25s}
  .heroes .tabs button::after{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;background:var(--green);transform:scaleY(0);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .heroes .tabs button + button{box-shadow:0 -1px 0 rgba(21,21,21,.1)}
  .heroes .tabs button.on + button,.heroes .tabs button + button.on{box-shadow:none}
  .heroes .tabs .tr{display:block;font:400 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(21,21,21,.38);opacity:0;transform:translateX(-4px);transition:opacity .25s,transform .25s,color .25s}
  .heroes .tabs button:hover{color:var(--ink);padding-left:14px!important}
  .heroes .tabs button:hover .tr{opacity:1;transform:none}
  .heroes .tabs button.on{color:var(--ink);background:var(--bone)!important;box-shadow:0 1px 2px rgba(21,21,21,.06),0 8px 22px -14px rgba(21,21,21,.35)}
  .heroes .tabs button.on::after{transform:scaleY(1)}
  .heroes .tabs button.on::before{color:var(--ink)}
  .heroes .tabs button.on .tr{opacity:1;transform:none;color:#0a9e3e}
  .heroes .tabs button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
}
/* ---- v3 r11: gymnast hero (hg) with two lime stickers ---- */
.hero.hg{background:#E6E8EB!important}
.hero.hg picture::after{display:none!important}
.gst{position:absolute;inset:0;z-index:2;pointer-events:none}
.gst span{position:absolute;transform:translate(-50%,-50%) rotate(-7deg);background:var(--lime);color:var(--ink);font:700 clamp(14px,1.3vw,21px)/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;padding:.55em .8em;white-space:nowrap;box-shadow:0 10px 24px -12px rgba(0,0,0,.45),0 1px 0 rgba(0,0,0,.08);opacity:0}
.gst .gs2{transform:translate(-50%,-50%) rotate(5deg)}
.gst.go .gs1{animation:gStamp1 .6s cubic-bezier(.2,1.5,.4,1) .5s forwards}
.gst.go .gs2{animation:gStamp2 .6s cubic-bezier(.2,1.5,.4,1) .9s forwards}
@keyframes gStamp1{from{opacity:0;transform:translate(-50%,-50%) scale(1.7) rotate(-16deg)}to{opacity:1;transform:translate(-50%,-50%) rotate(-7deg)}}
@keyframes gStamp2{from{opacity:0;transform:translate(-50%,-50%) scale(1.7) rotate(14deg)}to{opacity:1;transform:translate(-50%,-50%) rotate(5deg)}}
@media(prefers-reduced-motion:reduce){.gst span{animation:none!important;opacity:1}}
@media(min-width:701px){
  .hero.hg picture{left:0!important;right:0!important;width:100%!important}
  .hero.hg picture img{object-position:70% 50%!important}
}
@media(max-width:700px){
  .hero.hg{background:#D9DCE0!important}
  .hero.hg picture img{object-position:50% 100%!important}
  .hero.hg .c{background:none!important}
  .gst span{font-size:12px}
}
/* ---- v3 r12: body font Albert Sans (Viktor, 6 Oct) ---- */
:root{--font:"Albert Sans","Helvetica Neue",Arial,sans-serif;--serif:"Albert Sans","Helvetica Neue",Arial,sans-serif}
html .mp{--sans:"Albert Sans",system-ui,-apple-system,sans-serif}
/* ---- v3 r13: hero = G2 two cut-outs (hc) ---- */
.hero.hc{background:#F1F3F5!important}
.hero.hc picture::after{display:none!important}
@media(min-width:701px){
  .hero.hc picture{left:0!important;right:0!important;width:100%!important}
  .hero.hc picture img{object-position:78% 50%!important}
}
@media(max-width:700px){
  .hero.hc{background:#F1F3F5!important}
  .hero.hc picture img{object-position:50% 100%!important}
  .hero.hc .c{background:none!important}
}
/* ---- v3 r15: email sign-up (10% first-order code by email) ---- */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mfc{display:grid;gap:8px;max-width:460px}
.mfc-row{display:flex;gap:8px}
.mfc input{flex:1;min-width:0;font:400 16px/1.2 var(--font);color:var(--ink);background:#fff;border:1.5px solid rgba(21,21,21,.3);border-radius:2px;padding:13px 14px}
.mfc input:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.mfc .btn{white-space:nowrap}
.mfc .btn:disabled{opacity:.55;cursor:default}
.mfc-msg{margin:0;font:600 14px/1.35 var(--font);min-height:0}
.mfc-msg:empty{display:none}
.mfc.err .mfc-msg{color:#b3261e}.mfc.err input{border-color:#b3261e}
.mfc.ok .mfc-msg{color:#0a7d34}
.mfc-fine{margin:0;font:400 12px/1.45 var(--font);opacity:.7;max-width:46ch}
.of3-wt{margin:0;font:600 clamp(20px,1.8vw,26px)/1.15 var(--font)}
.of3-ws{margin:0 0 4px;font-size:15px;opacity:.85}
/* myth: dark panel */
.myth .done .mfc input{border-color:transparent}
.myth .done .mfc-fine{color:#fff;opacity:.65}
.myth .done .mfc.ok .mfc-msg{color:var(--lime)}.myth .done .mfc.err .mfc-msg{color:#ff9b8f}
.myth .done{grid-template-columns:1fr minmax(280px,440px)}
@media(max-width:700px){.myth .done{grid-template-columns:1fr}}
/* footer */
footer .g{grid-template-columns:1.6fr 1fr 1fr 1fr 1.7fr}
footer .fnl p{margin:0 0 12px;font-size:14px}
footer .fnl .mfc-fine{font-size:11.5px}
@media(max-width:1100px){footer .g{grid-template-columns:1fr 1fr 1fr}footer .g>div:first-child,footer .g>.fnl{grid-column:1/-1}}
@media(max-width:700px){footer .g{grid-template-columns:1fr 1fr}}
/* compact (footer, product pages) */
.mfc-s input{padding:11px 12px;font-size:16px}
.mfc-s .btn{padding:11px 16px}
/* product pages */
.mp-sign{display:grid!important;gap:10px;justify-content:stretch}
.mp-sign p{margin:0}
.mp-sign .mfc{max-width:none}
.mfc,.mfc-row{min-width:0}
.mfc-row{flex-wrap:wrap}
.mfc input{width:0;flex:1 1 190px}
.mfc .btn{flex:1 0 auto;justify-content:center}
.of3-t,.myth .done>div{min-width:0}
.mfc .btn{display:flex;justify-content:center;text-align:center;box-sizing:border-box;max-width:100%;margin:0}
/* ---- v3 r16: Proof without the before/after slider (class nobas) ---- */
.proof.nobas .grid{grid-template-columns:1fr!important}
@media(min-width:901px){
  .proof.nobas .grid>div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);column-gap:clamp(32px,5vw,96px);align-items:end}
  .proof.nobas .grid>div>h2{grid-row:1/span 2;align-self:center}
  .proof.nobas .nums.four{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .proof.nobas .wk{grid-column:2}
}
/* ---- r17: app blocks (Judge.me review widget) in the product reviews area ---- */
.mp-apps{margin-top:clamp(20px,3vw,36px)}
/* ---- r18: Myth or Muby flip, iOS Safari fix: the hidden face is switched off at mid-turn ---- */
.fc .card3{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.fc .f{-webkit-transform:rotateY(0deg) translateZ(1px);transform:rotateY(0deg) translateZ(1px);visibility:visible;transition:visibility 0s linear .3s}
.fc .b{-webkit-transform:rotateY(180deg) translateZ(1px);transform:rotateY(180deg) translateZ(1px);visibility:hidden;transition:visibility 0s linear .3s}
.fc.open .f{visibility:hidden}
.fc.open .b{visibility:visible}
@media(prefers-reduced-motion:reduce){.fc .f,.fc .b{transition:none}}

/* r19 footer sign-up: the 10% line as a green sticker */
footer .fnl h4{display:inline-block;background:var(--green);color:var(--ink);font-weight:700;letter-spacing:.08em;padding:7px 11px 6px;margin:0 0 14px;transform:rotate(-2deg);transform-origin:left center;box-shadow:0 2px 0 rgba(0,0,0,.08);opacity:1}
/* r20 homepage photo reviews from Judge.me (muby-wall.js) */
.wall2 .rvbig .rvn{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.7;align-self:center}
.wall2 .rvbig .rvn:empty{display:none}
.wall2 .r.jm figcaption p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.wall2 .r .v.nv::before{content:none}
/* r21 homepage review cards: stars + full review on tap */
.wall2 .r.jm{cursor:pointer}
.wall2 .r.jm:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.wall2 .r .rst{color:var(--green);font-size:14px;letter-spacing:.08em;line-height:1;font-weight:400}
.wall2 .r .rst i,.mrev-st i{font-style:normal;opacity:.3}
.mrev{border:0;padding:0;margin:auto;width:min(880px,calc(100vw - 32px));max-height:calc(100svh - 48px);background:var(--bone);color:var(--ink);border-radius:2px;overflow:auto;box-shadow:0 24px 80px rgba(0,0,0,.35)}
.mrev::backdrop{background:rgba(21,21,21,.6)}
.mrev-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);position:relative}
.mrev-in:not(:has(.mrev-ph)){grid-template-columns:1fr}
.mrev-ph{display:grid;gap:4px;background:#222}
.mrev-ph img{width:100%;height:100%;max-height:72svh;object-fit:cover;display:block}
.mrev-ph.n img{max-height:36svh}
.mrev-tx{padding:clamp(22px,3vw,40px);display:grid;gap:12px;align-content:start}
.mrev-v{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gdk,#0a7a33)}
.mrev-st{color:var(--green);font-size:18px;letter-spacing:.08em;font-weight:400}
.mrev h3{font-family:var(--font);font-weight:700;font-size:20px;line-height:1.25;letter-spacing:-.01em;margin:0}
.mrev p{font-family:var(--font);font-size:16px;line-height:1.55;margin:0;white-space:pre-line}
.mrev-n{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.mrev-x{position:absolute;right:10px;top:10px;z-index:2;width:40px;height:40px;border:0;border-radius:50%;background:rgba(244,245,247,.92);color:var(--ink);font-size:24px;line-height:1;cursor:pointer}
@media(max-width:700px){.mrev-in{grid-template-columns:1fr}.mrev-ph img{max-height:50svh}.mrev-ph.n{grid-template-columns:1fr 1fr}.mrev-ph.n img{max-height:36svh}}

/* r22 Proof, not promises: same cards as the product pages' "What the actives do" */
.proof.pv{display:block}
.pv-head{display:grid;gap:12px;margin-bottom:clamp(24px,4vh,44px);max-width:760px}
.pv-k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#5B5E64;margin:0}
.proof.pv h2{font-size:clamp(34px,4.1vw,66px)!important;line-height:.93;margin:0}
.pv-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pv-n{background:var(--paper,#ECEEF1);border-radius:6px;padding:30px 28px 26px;display:flex;flex-direction:column}
.pv-n strong{font-family:var(--disp);font-weight:500;font-size:clamp(52px,5vw,76px);line-height:.95;letter-spacing:-.01em;color:var(--ink);display:flex;align-items:baseline;gap:.04em}
.pv-n strong b{font-weight:inherit;font-family:inherit;font-variation-settings:normal}
.pv-n strong small{font-size:.46em;font-weight:500;letter-spacing:0}
.pv-n span{margin-top:14px;font-family:var(--font);font-size:15.5px;line-height:1.4;color:var(--ink);max-width:26ch}
.pv-n em{margin-top:auto;padding-top:18px;font-family:var(--font);font-style:normal;font-size:13px;line-height:1.4;color:#5B5E64}
.pv-n em::before{content:"";display:block;width:28px;height:1px;background:rgba(21,21,21,.18);margin-bottom:12px}
.pv-foot{margin:28px 0 0;font-family:var(--font);font-size:13px;line-height:1.5;color:#5B5E64}
@media(max-width:700px){
  .pv-nums{grid-template-columns:1fr;gap:10px}
  .pv-n{padding:24px 22px 22px;display:grid;grid-template-columns:104px 1fr;column-gap:18px;align-items:center}
  .pv-n strong{font-size:46px;grid-row:1/3;white-space:nowrap}
  .pv-n span{margin-top:0;font-size:15px;align-self:end}
  .pv-n em{padding-top:6px;font-size:12.5px;align-self:start}
  .pv-n em::before{display:none}
  .pv-foot{margin-top:22px;text-align:center}
}
/* r23 Why Muby: original layout, Muby colours (green tint vs cool mist instead of green vs beige) + fits one phone screen */
.why-t li{background:linear-gradient(90deg,#D3F2DE 0 50%,var(--mist,#E9ECEF) 50% 100%)}
.why-t .t{box-shadow:none}
.why-t .x{background:#fff;color:rgba(21,21,21,.45)}
.why-h img{box-shadow:none}
@media(max-width:700px){
  .why{padding-block:40px}
  .why h2{font-size:clamp(32px,9vw,42px)!important;margin-bottom:16px!important}
  .why-h{gap:12px;margin-bottom:14px}
  .why-h figure{gap:8px}
  .why-h img{width:96px}
  .why .why-h figcaption{font-size:16px}
  .why .why-t{gap:8px}
  .why .why-t li{min-height:48px;grid-template-columns:44px minmax(0,1fr) 44px}
  .why .why-t .t{font-size:13.5px;padding:8px 10px}
  .why .why-t .v,.why .why-t .x{width:28px;font-size:13px}
  .why .ctas{margin-top:18px}
}

/* r24 poster hero drafts (A Poster, B Split, C Masthead), review switcher */
.hp{display:none;position:relative;color:var(--ink);background:var(--bone)}
html[data-hp="a"] .hp-a,html[data-hp="b"] .hp-b,html[data-hp="c"] .hp-c{display:block}
html[data-hp="a"] #hpin,html[data-hp="b"] #hpin,html[data-hp="c"] #hpin{display:none}
.hp-pick{position:fixed;left:12px;bottom:12px;z-index:95;display:flex;gap:4px;align-items:center;background:var(--ink);color:var(--bone);padding:5px;border-radius:2px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.hp-pick span{padding:0 6px;opacity:.7}
.hp-pick button{font:inherit;color:inherit;background:none;border:1px solid rgba(244,245,247,.35);padding:6px 9px;border-radius:2px;cursor:pointer}
.hp-pick button[aria-pressed="true"]{background:var(--green);color:var(--ink);border-color:var(--green)}
@media(max-width:700px){.hp-pick{bottom:auto;top:calc(env(safe-area-inset-top,0px) + 64px)}}
.hp-word{margin:0;font-family:var(--disp);font-weight:500;line-height:.8;letter-spacing:-.01em;display:flex;align-items:flex-end;gap:.06em;white-space:nowrap}
.hp-word span{font-family:var(--font);font-weight:400;font-size:.13em;letter-spacing:0;line-height:1;margin-bottom:.12em}
.hp-stage{position:relative;overflow:hidden}
.hp-img{display:block;width:100%;height:100%;object-fit:cover}
.hp-pk{position:absolute;display:flex;align-items:flex-end;gap:clamp(4px,1vw,14px);pointer-events:none}
.hp-pk img{display:block;height:auto;filter:drop-shadow(0 14px 22px rgba(0,0,0,.28))}
.hp-t{display:grid;gap:14px;align-content:start}
.hp-t .stars{margin:0}
.hp h1{margin:0;font-size:clamp(36px,4.6vw,72px)!important;line-height:.95}
.hp h1 em{margin-top:.4em!important}
.hp .sub{margin:0;max-width:44ch;font-size:clamp(15px,1.2vw,18px);line-height:1.45}
.hp .cta{display:flex;gap:10px;flex-wrap:wrap}
/* A Poster: the ad as the hero, headline in a band below */
.hp-a .hp-stage{height:min(100svh,980px);min-height:560px;background:#2a211c}
.hp-a .hp-img{object-position:50% 40%}
.hp-a .hp-stage::before{content:"";position:absolute;inset:0 0 auto 0;height:42%;background:linear-gradient(180deg,rgba(0,0,0,.32),rgba(0,0,0,0));z-index:1;pointer-events:none}
.hp-a .hp-word{position:absolute;z-index:2;left:50%;top:clamp(64px,9vh,110px);transform:translateX(-50%);color:#fff;font-size:clamp(110px,22vw,380px)}
.hp-a .hp-pk{z-index:2;right:clamp(16px,6vw,96px);bottom:clamp(16px,5vh,56px)}
.hp-a .hp-pk .b{width:clamp(56px,6.4vw,110px)}.hp-a .hp-pk .m{width:clamp(74px,8.4vw,146px)}
.hp-a .hp-band{padding-block:clamp(32px,6vh,64px)}
.hp-a .hp-t{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:clamp(24px,5vw,80px);align-items:end}
.hp-a .hp-t .stars,.hp-a .hp-t h1{grid-column:1}.hp-a .hp-t .sub,.hp-a .hp-t .cta{grid-column:2}
.hp-a .hp-t .sub{grid-row:2;align-self:end}
/* B Split: wordmark and copy on bone, photo on the right */
.hp-b{display:none}
html[data-hp="b"] .hp-b{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:min(100svh,940px)}
.hp-b .hp-l{display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding:clamp(88px,12vh,130px) clamp(16px,4vw,64px) clamp(32px,6vh,64px)}
.hp-b .hp-word{font-size:clamp(96px,15vw,260px);color:var(--ink)}
.hp-b .hp-stage{min-height:100%}
.hp-b .hp-img{position:absolute;inset:0;object-position:50% 35%}
.hp-b .hp-pk{left:clamp(16px,3vw,40px);bottom:clamp(16px,4vh,40px)}
.hp-b .hp-pk .b{width:clamp(56px,5.6vw,96px)}.hp-b .hp-pk .m{width:clamp(74px,7.4vw,128px)}
/* C Masthead: the wordmark as a magazine masthead over a wide photo band */
.hp-c{padding-top:clamp(70px,9vh,96px)}
.hp-c .hp-word{justify-content:center;color:var(--ink);font-size:clamp(100px,24vw,420px);padding:0 16px clamp(10px,1.6vh,18px)}
.hp-c .hp-stage{height:clamp(320px,52vh,620px);margin:0 clamp(16px,3vw,40px)}
.hp-c .hp-img{object-position:50% 38%}
.hp-c .hp-pk{right:clamp(20px,5vw,80px);bottom:-1px;transform:translateY(22%)}
.hp-c .hp-stage{overflow:visible}.hp-c .hp-stage picture{display:block;height:100%;overflow:hidden}
.hp-c .hp-pk .b{width:clamp(56px,6vw,104px)}.hp-c .hp-pk .m{width:clamp(74px,8vw,138px)}
.hp-c .hp-band{padding:clamp(40px,7vh,72px) 16px clamp(36px,6vh,64px);display:grid;justify-items:center;text-align:center}
.hp-c .hp-t{justify-items:center}.hp-c .cta{justify-content:center}
@media(max-width:700px){
  .hp-a .hp-stage{height:72svh;min-height:480px}
  .hp-a .hp-word{font-size:25vw;top:76px}
  .hp-a .hp-t{grid-template-columns:1fr}.hp-a .hp-t>*{grid-column:1!important;grid-row:auto!important}
  .hp-a .hp-pk{right:16px;bottom:16px}.hp-a .hp-pk .b{width:52px}.hp-a .hp-pk .m{width:70px}
  html[data-hp="b"] .hp-b{grid-template-columns:1fr;min-height:0}
  .hp-b .hp-stage{order:-1;height:66svh;min-height:440px}
  .hp-b .hp-l{padding:28px 16px 36px}
  .hp-b .hp-word{position:absolute;z-index:2;top:76px;left:50%;transform:translateX(-50%);color:#fff;font-size:25vw}
  .hp-b .hp-pk{left:auto;right:16px;bottom:16px}.hp-b .hp-pk .b{width:52px}.hp-b .hp-pk .m{width:70px}
  .hp-c{padding-top:72px}.hp-c .hp-word{font-size:27vw}
  .hp-c .hp-stage{height:auto;aspect-ratio:4/5;margin:0 16px}
  .hp-c .hp-pk{right:22px}.hp-c .hp-pk .b{width:50px}.hp-c .hp-pk .m{width:66px}
  .hp h1{font-size:clamp(32px,9vw,42px)!important}
}

/* r24b: A is the poster itself; B and C use the traced Muby logo */
.hp-word{display:block}
.hp-logo{display:block;width:100%;height:auto}
.hp-a .hp-stage{height:auto;min-height:0;aspect-ratio:1214/1300;overflow:visible;background:none}
.hp-a .hp-stage::before{display:none}
.hp-a .hp-img{position:absolute;inset:0;object-position:50% 0}
.hp-a .hp-pk{left:67.5%;right:auto;bottom:-12%;width:24.5%;gap:4%;align-items:flex-end}
.hp-a .hp-pk .b{width:41%!important}.hp-a .hp-pk .m{width:55%!important}
.hp-a .hp-band{padding-top:calc(12vw + 24px)}
.hp-b .hp-word{width:min(100%,620px);color:var(--ink);font-size:inherit}
.hp-b .hp-img{object-position:50% 30%}
.hp-c .hp-word{width:min(88vw,1240px);margin:0 auto;font-size:inherit;padding:0 0 clamp(14px,2vh,24px)}
.hp-c .hp-img{object-position:50% 12%}
@media(max-width:700px){
  .hp-a .hp-band{padding-top:calc(14vw + 20px)}
  .hp-b .hp-word{position:absolute;z-index:2;top:80px;left:16px;right:16px;transform:none;width:auto;color:#fff}
  .hp-c .hp-word{width:calc(100% - 32px)}
}
/* r24c: nav over the drafts */
html[data-hp="a"] .nav,html[data-hp="a"] .nav a{color:#fff}
html[data-hp="a"] .nav .brand img{filter:brightness(0) invert(1)}
@media(max-width:700px){
  html[data-hp="a"] .nav,html[data-hp="b"] .nav,html[data-hp="c"] .nav{top:calc(10px + env(safe-area-inset-top,0px))!important}
  html[data-hp="a"] .nav,html[data-hp="a"] .nav a{color:var(--ink)}
  html[data-hp="a"] .nav .brand img{filter:none}
  .hp-a{padding-top:64px}
  .hp-b .hp-word{top:72px}
  .hp-pick{top:auto;bottom:86px}
}
/* r24d A: poster down to the lips (more face); desktop = text left, poster right half */
.hp-a .hp-stage{aspect-ratio:1214/1400}
.hp-a .hp-pk{bottom:-5.2%}
.hp-a .hp-band{padding-top:calc(7vw + 24px)}
@media(min-width:901px){
  html[data-hp="a"] .hp-a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:min(100svh,980px)}
  .hp-a .hp-stage{aspect-ratio:auto;height:100%;min-height:min(100svh,980px);overflow:hidden}
  .hp-a .hp-img{object-fit:cover;object-position:50% 0}
  .hp-a .hp-pk{left:auto;right:7%;bottom:4%;width:30%;transform:none}
  .hp-a .hp-band{order:-1;display:flex;align-items:center;padding:clamp(96px,12vh,140px) clamp(16px,4vw,72px) clamp(40px,6vh,72px)}
  .hp-a .hp-t{grid-template-columns:1fr;gap:18px}
  .hp-a .hp-t>*{grid-column:1!important;grid-row:auto!important}
  .hp-a h1{font-size:clamp(44px,4.8vw,84px)!important}
  html[data-hp="a"] .nav,html[data-hp="a"] .nav a{color:var(--ink)}
  html[data-hp="a"] .nav .brand img{filter:none}
  html[data-hp="a"] .nav .r .pill{position:relative;z-index:3}
}
@media(max-width:900px){.hp-a .hp-band{padding-top:calc(7vw + 20px)}}
/* r24e desktop A: photo column keeps the photo's own proportions so the packshots sit exactly over the printed ones */
@media(min-width:901px){
  html[data-hp="a"] .hp-a{min-height:0;align-items:stretch}
  .hp-a .hp-stage{aspect-ratio:1214/1400;height:auto;min-height:0;overflow:hidden}
  .hp-a .hp-img{object-fit:cover;object-position:50% 0}
  .hp-a .hp-pk{left:67.5%;right:auto;width:24.5%;bottom:0}
}
.hp-a .hp-pk{left:66%!important;width:28%!important}
.hp-a .hp-pk{gap:0!important}.hp-a .hp-pk .b{width:42%!important}.hp-a .hp-pk .m{width:58%!important}
.hp-a .hp-pk{gap:3%!important}.hp-a .hp-pk .b{width:40%!important}.hp-a .hp-pk .m{width:57%!important}

/* r27 · full product under How to get started (section muby-feature), Kind Patches layout:
   thumbs | big image panel | buy panel, full width. The How to get started cards are the chooser. */
.mf{background:var(--paper,#ECEEF1);padding:0 clamp(12px,2vw,28px) clamp(40px,7vh,80px)}
.mf .mp{background:transparent;font-family:var(--font,"Albert Sans",sans-serif)}
.mf-grid{display:grid;grid-template-columns:clamp(110px,11vw,190px) minmax(0,1.15fr) minmax(0,1fr);gap:clamp(10px,1.2vw,18px);align-items:stretch}
.mf .mf-thumbs{display:flex;flex-direction:column;gap:clamp(10px,1.2vw,16px)}
.mf .mf-thumbs button{display:block;padding:0;border:0;border-radius:18px;overflow:hidden;background:var(--bone,#F4F5F7);aspect-ratio:1/1;cursor:pointer;outline:2px solid transparent;outline-offset:-2px;transition:outline-color .15s}
.mf .mf-thumbs button[aria-current="true"]{outline-color:#151515}
.mf .mf-thumbs button img{width:100%;height:100%;object-fit:cover}
.mf .mf-stage{position:relative;background:var(--bone,#F4F5F7);border-radius:24px;overflow:hidden;min-height:min(78vh,760px);display:flex;flex-direction:column}
.mf .mf-stage .mp-track{flex:1;background:transparent;aspect-ratio:auto;border-radius:0}
.mf .mf-stage .mp-slide{display:flex;align-items:center;justify-content:center}
.mf .mf-stage .mp-slide img{width:100%;height:100%;max-height:min(78vh,760px);object-fit:contain}
.mf .mf-stage .mp-dots{position:absolute;left:0;right:0;bottom:14px;display:none}
.mf-tags{position:absolute;left:clamp(14px,1.6vw,24px);top:clamp(14px,1.6vw,24px);z-index:2;display:flex;flex-wrap:wrap;gap:8px}
.mf-tags span{background:#151515;color:#fff;font:700 13px/1 var(--font,"Albert Sans",sans-serif);letter-spacing:.02em;padding:9px 14px;border-radius:999px}
.mf-tags span:first-child{background:var(--green,#00D652);color:#0b0b0b}
.mf-buy{background:var(--mist,#E9ECEF);border-radius:24px;padding:clamp(24px,3.2vw,52px);display:flex;flex-direction:column;gap:18px;min-width:0}
.mf-rate{display:flex;align-items:center;gap:10px;color:#151515;text-decoration:none;font-size:16px}
.mf-stars{color:var(--green,#00D652);letter-spacing:.08em;font-size:18px}
.mf-rate b{font-weight:700}
.mf-rate span[data-jm-count]{text-decoration:underline;text-underline-offset:3px}
.mf-k{margin:0;font-family:var(--mono,"Space Mono",monospace);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#4A4D52}
.mf .mf-title{margin:0;font-family:var(--disp,"Cinzel",serif);font-weight:500;font-size:clamp(36px,3.5vw,60px);line-height:1;letter-spacing:-.01em;text-transform:none}
.mf-title a{color:#151515;text-decoration:none}
.mf-intro{margin:0;font-size:clamp(17px,1.35vw,21px);line-height:1.45;color:#1f1e1c;max-width:46ch}
.mf-form{display:grid;gap:14px;margin-top:4px}
.mf-box{border:1.5px solid rgba(21,21,21,.28);border-radius:18px;background:rgba(255,255,255,.55);padding:18px 20px;display:grid;gap:12px}
.mf-box-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mf-box-t{font-weight:700;font-size:18px}
.mf .mp-price{display:flex;align-items:baseline;gap:10px;margin:0}
.mf .mp-price strong{font-size:22px;font-weight:700}
.mf .mp-price s{font-size:17px;opacity:.55}
.mf .mp-price .mp-save{font:700 12px/1 var(--font,"Albert Sans",sans-serif);background:var(--green,#00D652);color:#0b0b0b;padding:6px 8px;border-radius:999px;letter-spacing:.02em;text-transform:none;border:0}
.mf .mp-unit{margin:-6px 0 0;font:500 14px/1.3 var(--font,"Albert Sans",sans-serif);letter-spacing:0;text-transform:none;color:#4A4D52}
.mf .mp-unit:empty{display:none}
.mf-checks{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:16px}
.mf-checks li{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:start}
.mf-checks li::before{content:"✓";font-weight:700;color:#0a7a33}
.mf-row{display:grid;grid-template-columns:auto 1fr;gap:12px}
.mf-qty{display:grid;grid-template-columns:44px 44px 44px;align-items:center;border:1.5px solid rgba(21,21,21,.28);border-radius:16px;background:#fff;height:64px;overflow:hidden}
.mf-qty button{height:100%;border:0;background:transparent;font-size:24px;cursor:pointer;color:#151515}
.mf-qty input{width:100%;height:100%;border:0;text-align:center;font:600 18px/1 var(--font,"Albert Sans",sans-serif);background:transparent;-moz-appearance:textfield;appearance:textfield}
.mf-qty input::-webkit-inner-spin-button,.mf-qty input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.mf .mf-atc{height:64px;border:0;border-radius:16px;background:var(--green,#00D652);color:#0b0b0b;font:700 clamp(17px,1.3vw,20px)/1 var(--font,"Albert Sans",sans-serif);cursor:pointer;padding:0 18px}
.mf .mf-atc[disabled]{opacity:.5;cursor:not-allowed}
.mf-atc:active{transform:scale(.99)}
.mf-qty button:focus-visible,.mf-atc:focus-visible,.mf .mf-thumbs button:focus-visible,.shop .card.mf-pick:focus-visible{outline:3px solid var(--green,#00D652);outline-offset:2px}
.mf-perks{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;color:#3a3936}
.mf-perks span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green,#00D652);margin-right:7px;vertical-align:2px}
.mf-more{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:64px;padding:12px 20px;border:1.5px solid #151515;border-radius:var(--r-btn,12px);background:rgba(255,255,255,.5);color:#151515;text-decoration:none;transition:background .15s,color .15s}
.mf-more-t{display:grid;gap:3px;min-width:0}
.mf-more-t b{font-size:17px;font-weight:700;line-height:1.2}
.mf-more-t small{font-size:14px;font-weight:500;color:#45484E;line-height:1.3}
.mf-more-a{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#151515;color:#fff;font-size:18px;transition:transform .15s}
.mf-more:hover{background:#fff}.mf-more:hover .mf-more-a{transform:translateX(3px)}
.mf-more:focus-visible{outline:3px solid var(--green,#00D652);outline-offset:2px}
/* the chooser: How to get started sits on the same paper and runs straight into the product */
.shop:has(+ .muby-sec--feature),.muby-sec:has(+ .muby-sec--feature) .shop{padding-bottom:clamp(20px,3vh,36px)}
.shop .card.mf-pick{cursor:pointer}
.shop .card.mf-on{outline:2.5px solid #151515;outline-offset:-2.5px}
.shop .card.hi.mf-on{outline-color:var(--green,#00D652)}
.shop .card.mf-pick:not(.mf-on){opacity:.82}
.shop .card.mf-pick:not(.mf-on):hover{opacity:1}
@media(max-width:900px){
  .mf{padding:0 0 48px}
  .mf-grid{grid-template-columns:1fr;gap:12px}
   .mf .mf-thumbs{display:none}
  .mf .mf-stage{border-radius:0;min-height:0}
  .mf .mf-stage .mp-track{aspect-ratio:1/1}
  .mf .mf-stage .mp-slide img{max-height:none}
  .mf .mf-stage .mp-dots{display:flex}
  .mf-buy{border-radius:20px;margin:0 12px;padding:24px 18px}
  .mf-tags span{font-size:12px;padding:8px 12px}
  .mf-row{grid-template-columns:132px 1fr}
  .mf-qty{grid-template-columns:40px 1fr 40px;height:58px}
  .mf .mf-atc{height:58px}
}

/* r28 · one corner language for the whole theme (from the homepage product block):
   panels, photos and cards 20px · smaller boxes 14px · buttons and fields 12px · small labels 8px · round things stay round */
:root{--r-lg:20px;--r-md:14px;--r-btn:12px;--r-sm:8px}
.card,.heroes .panel img,.cmpC .ph,.cmpC .grid2 .ph,.wall2 .r,.bas,.swipe,.fc .f,.fc .b,.fc .card3,.myth .done,.offer .in,.mrev,.mrev-in,
.pv-n,.ev-t .ph,.evx-ph,.xa-p .im,.ledger .pic,.pf,.pf-in,.pf-f,.pf-b,.bi-stage,.bi-stage canvas,.mf .mf-stage,.mf-buy{border-radius:var(--r-lg)!important}
.card{overflow:hidden}
.card .ph{border-radius:0!important}
.faq .zr,.drawer .nudge,.drawer .it,.code,.offer .code,.heroes .panel .dyk,.toast,.mf-box,.mf .mf-thumbs button,.bas .lab,.swipe .hint,.bas .hint{border-radius:var(--r-md)!important}
.btn,.mfc input,.offer .code button,.offer2 .copyb,.offer3 .copyb,.heroes .tabs button,.tabs button,.sw button,.sw2 button,.you button,.wz-btn,.bag,.nav .pill,.mf .mf-atc,.mf-qty{border-radius:var(--r-btn)!important}
.pill,.stk,.chips b,.in span,.wall2 .r .v,.hero .stars.rv,.ledger .row .n,.fc .f .num,.fc .f .pill,.fc .f .q,.fc .b .stamp{border-radius:var(--r-sm)!important}
.drawer .it img{border-radius:10px!important}
.why-t li,.why-t .t,.mf-tags span,.mf .mp-price .mp-save{border-radius:999px!important}
/* product pages */
.mp .mp-track,.mp .mp-vc,.mp .mp-r,.mp .mp-quote,.mp .mp-xc,.mp .mp-a,.mp .mp-f,.mp .mp-nums>div,.mp .mp-proof .mp-nums>.mp-num,.mp-sv video{border-radius:var(--r-lg)!important}
.mp .mp-track{overflow-x:auto;overflow-y:hidden}
.mp .mp-steps li,.mp .mp-note,.mp .mp-opt,.mp-toast{border-radius:var(--r-md)!important}
.mp .mp-btn,.mp .mp-sub label,.mp .mp-thumbs button,.mp .mp-code button{border-radius:var(--r-btn)!important}
.mp .mp-tag,.mp .mp-price .mp-save,.mp .mp-pay .mp-pay-t,.mp .mp-flag{border-radius:var(--r-sm)!important}
/* preview only: hero drafts stay off the product page routes */
body.pdp-on .hp,body.pdp-on .hp-pick{display:none!important}

/* r31 · face poster hero in the theme (Viktor: use the girl hero on staging) */
html[data-hp="a"] .nav .pill,html[data-hp="a"] .nav a.pill{color:#fff!important}html[data-hp="a"] .nav .pill b{color:var(--ink)!important}
.hp-t .stars{display:flex;align-items:center;gap:10px}
.hp-t .stars b{color:var(--green,#00D652);letter-spacing:.06em}
@media(max-width:700px){html .hp .cta .btn{flex:1 1 auto;justify-content:center}}
/* menu stays readable where it runs over the photo (narrower desktops, longer Swedish labels) */
@media(min-width:901px){html[data-hp="a"] .nav .menu{background:rgba(244,245,247,.92);border-radius:12px;padding:8px 14px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}}

/* r32 · hero fits the first screen (Viktor 22 Oct)
   desktop: the whole poster + the green band in one screen; phone: whole poster + headline + text */
.mq{box-sizing:border-box;height:44px;display:flex;align-items:center;padding:0!important}
@media(min-width:901px){
  html[data-hp="a"] .hp-a{display:grid;grid-template-columns:minmax(0,1fr) auto;height:calc(100svh - 44px);min-height:540px;max-height:1200px;align-items:center}
  .hp-a .hp-stage{height:min(100%,calc(56vw * 1.1532));width:auto;aspect-ratio:1214/1400;min-height:0;align-self:end;overflow:visible}
  .hp-a .hp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
  .hp-a .hp-pk{bottom:0!important}
  .hp-a .hp-band{height:100%;padding-block:clamp(72px,10vh,110px) clamp(24px,4vh,48px)!important}
}
@media(max-width:900px){
  .hp-a .hp-stage{width:100%;margin-inline:0;aspect-ratio:1214/1400}  /* Viktor 22 Oct: full-width poster on phones, text may start below the fold */
  .hp-a .hp-band{padding-top:calc(5.2% + 18px)!important;padding-bottom:28px}
  .hp-a .hp-t{gap:10px}
  .hp-a h1{font-size:clamp(30px,8.4vw,40px)!important}
  .hp-a h1 em{margin-top:.25em!important}
  .hp-a .sub{font-size:16px;line-height:1.4}
}
/* compact product cards in How to get started: photo, name, stars (the product below has the details) */
.shop.compact .cards{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:clamp(8px,1.4vw,18px)!important}
.shop.compact .card{display:flex!important;flex-direction:column;grid-template-columns:none!important}
.shop.compact .card .ph{aspect-ratio:1/1!important;width:100%;min-height:0!important}
.shop.compact .card .b{padding:clamp(10px,1.4vw,18px) clamp(10px,1.4vw,20px) clamp(12px,1.6vw,20px)!important;gap:4px;display:grid}
.shop.compact .card h3{font-size:clamp(15px,1.7vw,24px)!important;line-height:1.1}
.shop.compact .card .rvs{margin:0;font-size:clamp(12px,1.1vw,15px)!important}
@media(max-width:700px){
  .shop.compact .stk{font-size:10px!important;padding:5px 7px!important;top:8px!important;left:8px!important}
  .shop.compact .card .rvs b{letter-spacing:0;font-size:11px}
}

/* r33 · chooser cards: no text (also in the design page), green outline follows the chosen product */
.shop.compact .card .sp,.shop.compact .card .b>p:not(.rvs),.shop.compact .card .row{display:none!important}
.shop .card.mf-pick.hi:not(.mf-on){outline-color:transparent!important;transform:none}
.shop .card.mf-on,.shop .card.hi.mf-on{outline:3px solid var(--green,#00D652)!important;outline-offset:1px!important}

/* r34 · phones: chooser cards stacked again (photo left, name and stars right) */
@media(max-width:700px){
  .shop.compact .cards{grid-template-columns:1fr!important;gap:12px!important}
  .shop.compact .card{display:grid!important;grid-template-columns:clamp(112px,34vw,150px) minmax(0,1fr)!important;align-items:center}
  .shop.compact .card .ph{aspect-ratio:1/1!important;height:100%;min-height:0!important}
  .shop.compact .card .b{padding:14px 16px!important;gap:6px}
  .shop.compact .card h3{font-size:22px!important}
  .shop.compact .card .rvs{font-size:14px!important;white-space:nowrap}
  .shop.compact .card .rvs b{font-size:13px}
  .shop.compact .stk{font-size:10px!important;padding:5px 7px!important;top:8px!important;left:8px!important}
}

/* r35 · story circles back on top of the first page (phones; Viktor 22 Oct) */
@media(max-width:700px){
  .hp-a .hstories{position:absolute;top:0!important;left:0;right:0;z-index:5;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 10px!important;background:var(--bone);gap:14px}
  html[data-hp="a"]:has(.hp-a .hstories) .nav{top:calc(84px + env(safe-area-inset-top,0px))!important}
  .hp-a:has(.hstories){padding-top:calc(140px + env(safe-area-inset-top,0px))}
}

/* r36 · homepage product block: payment icons under the button, 10% first-order sign-up (Viktor 22 Oct) */
.mf-pay{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.mf-pay li{display:flex;margin:0}
.mf-pay svg{width:41px;height:26px;display:block}
.mf-sign{margin-top:18px;background:#fff;border-radius:var(--r-md);padding:18px;display:grid;gap:14px;box-shadow:0 0 0 1px rgba(21,21,21,.08)}
.mf-sign-h{display:flex;gap:14px;align-items:center}
.mf-sign-b{flex:0 0 auto;width:58px;height:58px;border-radius:50%;background:var(--green);color:var(--ink);display:grid;place-items:center;font-family:var(--disp);font-size:20px;line-height:1;letter-spacing:0}
.mf-sign-t{margin:0;font-family:"Hanken Grotesk",var(--font);font-weight:700;font-size:18px;line-height:1.2;color:var(--ink)}
.mf-sign-x{margin:4px 0 0;font-family:"Hanken Grotesk",var(--font);font-weight:500;font-size:15.5px;line-height:1.38;color:#3d3d3a}
.mf-sign .mfc{max-width:none}
.mf-sign .mfc input{background:#F7F8FA}
.mf-sign .mfc .btn{background:var(--ink);color:#fff;border-color:var(--ink);min-width:104px}
.mf-sign .mfc .btn:hover{background:#000}
.mf-sign .mfc-fine{font-size:12.5px;opacity:.75}
.mf-sign .mfc-row{flex-wrap:nowrap}
.mf-sign .mfc input{flex:1 1 0;width:0}
.mf-sign .mfc .btn{flex:0 0 auto}
@media(max-width:700px){
  .mf-sign{padding:16px}.mf-sign-b{width:52px;height:52px;font-size:18px}.mf-sign-t{font-size:17px}
  .mf-pay{gap:4px;flex-wrap:nowrap}
  .mf-pay li{flex:1 1 0;min-width:0;max-width:41px}
  .mf-pay svg{width:100%;height:auto;aspect-ratio:38/24}
  .mf-sign .mfc .btn{min-width:0;padding-inline:18px}
}

/* r37 · homepage product as its own section after "Korean, beyond the label" (Viktor 23 Oct): heading + product switcher */
.mf{padding-top:clamp(52px,9vh,104px)}
.mf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;margin:0 0 clamp(20px,3.4vh,36px);padding-inline:clamp(4px,1vw,10px)}
.mf-h{margin:0;font-size:clamp(34px,4.6vw,72px)!important;line-height:.95}
.mf-tabs{display:flex;gap:6px;padding:6px;background:#fff;border-radius:999px;box-shadow:0 0 0 1px rgba(21,21,21,.08),0 6px 24px rgba(21,21,21,.05)}
.mf-tab{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px;padding:6px 22px 6px 6px;border-radius:999px;color:var(--ink,#151515);transition:background .2s,color .2s}
.mf-tab-i{width:46px;height:46px;border-radius:50%;overflow:hidden;background:var(--bone,#F4F5F7);flex:0 0 auto;transition:box-shadow .2s}
.mf-tab-i img{width:100%;height:100%;object-fit:cover;display:block}
.mf-tab-t{display:grid;gap:1px;line-height:1.15}
.mf-tab-t b{font-family:"Hanken Grotesk",var(--font);font-weight:700;font-size:16.5px;white-space:nowrap}
.mf-tab-t small{font-family:"Hanken Grotesk",var(--font);font-weight:500;font-size:14px;opacity:.68}
.mf-tab:hover{background:var(--bone,#F4F5F7)}
.mf-tab[aria-selected="true"]{background:#fff;color:var(--ink,#151515);box-shadow:inset 0 0 0 3px var(--green,#00D652)}
.mf-tab[aria-selected="true"]:hover{background:#fff}
.mf-tab:focus-visible{outline:2px solid var(--ink,#151515);outline-offset:2px}
.mf-panel:not([hidden]){animation:mfIn .35s ease both}
@keyframes mfIn{from{opacity:0;transform:translateY(8px)}}
@media(prefers-reduced-motion:reduce){.mf-panel:not([hidden]){animation:none}}
@media(max-width:700px){
  .mf-head{flex-direction:column;align-items:stretch}
  .mf-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:5px;border-radius:22px}
  .mf-tab{flex-direction:column;justify-content:center;gap:7px;padding:10px 4px 10px;border-radius:17px;text-align:center}
  .mf-tab-i{width:52px;height:52px}
  .mf-tab-t{justify-items:center}
  .mf-tab-t b{font-size:15.5px}
  .mf-tab-t small{font-size:13px}
}

/* r29 · legibility pass on the existing type (Viktor: keep the fonts, make the text easier to read). Generated by gen_r29.py */
:root{--mute:#4D5056}
html body .mp{--soft:#45484E}
body,html .mp{font-weight:450}
html body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.mfc .btn{align-items:center;justify-content:center}
/* hero buttons wrap instead of running off narrow phones (longer Swedish labels) */
@media(max-width:700px){html .hero .cta,html .hero[data-h] .cta{flex-wrap:wrap}html .hero .cta .btn,html .hero[data-h] .cta .btn{flex:1 1 auto;justify-content:center}}
/* game: the text column never pushes wider than the phone (long Swedish labels) */
@media(max-width:900px){html .bi-wrap{grid-template-columns:minmax(0,1fr)}html .bi-h>*{min-width:0;max-width:100%}html .bi-h .eyb,html .bi-help span{white-space:normal}}
/* the moving green band in Manrope bold (from the font test) */
html .mq{font-family:"Manrope","Helvetica Neue",Arial,sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.12em}
html .k{font-size:12.5px}
html .btn{font-size:16px}
html .nav .menu{font-size:17px}
html .nav .pill{font-size:17px}
html .hero .stars{font-size:16px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .mq{font-size:12.5px}
html .stage .st p{font-size:16px}
html .stage .buy .pr s{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .card .b p{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .card .row .pr s{font-size:16px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .card .stk{font-size:12.5px}
@media(max-width:900px){html .card .btn{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}}
html .story .f p{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .split figcaption p{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .nums span{font-size:16px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .bas .lab{font-size:12.5px}
html .wall .r .q span{font-size:12.5px}
html .wall .r .v{font-size:12.5px}
@media(max-width:900px){html .wall .r .q p{font-size:16px}}
html .feed figcaption{font-size:12.5px}
html .mc .stamp small{font-size:12.5px}
html .mc .ans b{font-size:12.5px}
html .mc .ans span{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .mc .tap{font-size:12.5px}
html .offer .code button{font-size:12.5px}
html .offer ul{font-size:16px}
html .faq .zr p{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html footer .g h4{font-size:12.5px;opacity:.85}
html footer a{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .bar .t b{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .bar .btn{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .toast{font-size:17px}
html .hero .trust{font-size:12.5px}
html .hero .vid{font-size:12.5px}
html .slot .note{font-size:12.5px}
html .slot .worldnav button{font-size:17px}
html .heroes .tabs button{font-size:12.5px}
html .heroes .panel .n small{font-size:12.5px;opacity:.85}
html .heroes .panel p{font-size:16px}
html .heroes .panel .in span{font-size:12.5px}
html .proof .cap{font-size:12.5px;opacity:.85}
html .cmpA .pic .tag{font-size:12.5px}
html .cmpA .rows .hd{font-size:12.5px}
html .cmpA .rw .m p{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .sw button{font-size:12.5px}
@media(max-width:900px){html .cmpA .rw .o{font-size:16px}}
html .cmpB .swipe .lab small{font-size:12.5px}
html .cmpB .cc .m::before{font-size:12.5px}
html .cmpB .cc .o::before{font-size:12.5px;opacity:.85}
html .cmpC .d .l span{font-size:16px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .cmpC .d .l.o span{font-size:16px}
html .vpick{font-size:12.5px}
html .vpick button{font-size:12.5px}
html .shop .you button{font-size:17px}
html .card .b .sp{font-size:16px}
html .strip .n small{font-size:12.5px}
html .strip .tl span{font-size:12.5px}
html .myth .prog{font-size:12.5px}
html .fc .f .pill{font-size:12.5px}
html .fc .f .num{font-size:12.5px}
html .fc .b span{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .fc .b .flip{font-size:12.5px;opacity:.85}
html .myth .done p{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html footer .tr{font-size:12.5px}
html .drawer .it b{font-size:16px}
html .drawer .it span{font-size:16px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .drawer .it .qty button{font-size:16px}
html .drawer .nudge b{font-size:16px}
html .drawer .nudge span{font-size:16px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .drawer .nudge .btn{font-size:16px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .drawer .ft .code{font-size:12.5px}
html .drawer .ft .perks{font-size:12.5px;opacity:.85}
html .trio figcaption p{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .ledger .row p{font-size:16px}
html .stripes .band p{font-size:16px}
html .nums2 span{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .nums2 em{font-size:12.5px;opacity:.85}
html .proof2 .cap{font-size:12.5px;opacity:.85}
html .wall2 .r .v{font-size:12.5px}
html .wall2 .r figcaption span{font-size:12.5px}
html .tally span{font-size:16px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .cmpC .hd{font-size:12.5px;opacity:.85}
html .proof .nums.four em{font-size:12.5px;opacity:.85}
@media(max-width:900px){html .card .b p{font-size:16px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}}
@media(max-width:900px){html .card .b p.sp{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}}
html .sw2 button{font-size:12.5px}
html .feedg .g .v{font-size:12.5px}
html .feedg .g figcaption p{font-size:16px}
html .feedg .g figcaption span{font-size:12.5px}
html .voice .ph .v{font-size:12.5px}
html .voice .who{font-size:12.5px}
html .heroes .panel .dyk{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .heroes .panel .dyk b{font-size:12.5px}
html .bas .hint,html .swipe .hint{font-size:12.5px}
html .divider{font-size:12.5px}
@media (min-width:901px){html .cmpC .top .lede{font-size:16px}}
@media (min-width:901px){html .cmpC .d b{font-size:16px}}
@media (min-width:901px){html .cmpB .lede{font-size:16px}}
@media (min-width:901px){html .shop .card .b p{font-size:16px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}}
@media (min-width:901px) and (max-height:800px){html .cmpC .d b{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}}
html .rvbig span{font-size:12.5px}
html .card .rvs b{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
@media(max-width:900px){html .hero .stars.rv{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}}
@media (min-width:901px) and (max-height:800px){html .cmpB .why{font-size:16px}}
html .wz-eb{font-size:12.5px}
html .wz-body{font-size:17.5px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .wz-chips b{font-size:12.5px}
@media (min-width:901px) and (max-height:800px){html .ledger .row p{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}}
@media (min-width:901px) and (max-height:760px){html .ledger .lede{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}}
html .nav .menu a{font-size:16px}
html .hero .sub{color:#1C1D20}
html .hero .trust{color:#1C1D20}
html .ledger .row .n{font-size:12.5px}
html .heroes .panel .n small{opacity:.85}
html .duo .pr s{font-size:16px}
html .duo .eb{font-size:12.5px;opacity:.85}
html .duo .bd{font-size:17.5px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .duo .chips b{font-size:12.5px}
html .cmpC .lede{color:#28292D}
html .cmpC .d .l.o span{font-size:16px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .film p{color:#1C1D20}
@media(max-width:700px){html .hero .sub{font-size:16px}}
html .eyb{font-size:12.5px}
html .xp .lede{color:#28292D}
html .bdg .bh{font-size:12.5px}
html .bdg .role{font-size:12.5px;opacity:.85}
@media(max-width:480px){html .bdg blockquote{font-size:16.5px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}}
html .ev-note{font-size:12.5px}
html .ev-t .hd{font-size:12.5px}
html .ev-bub .bb{font-size:12.5px}
html .evx-h{font-size:12.5px}
html .evx-p b{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .evx-p span{font-size:16px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .offer2 .copyb{font-size:12.5px}
html .offer2 ul{font-size:16px}
html .tk-stub small{font-size:12.5px}
html .lb-pic figcaption{font-size:12.5px}
html .rv-p{font-size:12.5px}
html .xp2 .lede{color:#28292D}
html .xp2 .role{font-size:12.5px}
html .xa-p blockquote{font-size:16.5px}
html .xb-q figcaption b{font-size:16px}
@media(max-width:860px){html .xa-p blockquote{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}}
@media(max-width:700px){html .hs span{font-size:12.5px}}
html .offer3 .copyb{font-size:12.5px}
html .offer3 ul{font-size:16px}
html .hx-ring{opacity:.85}
html .hxm{font-size:12.5px}
@media(max-width:700px){html .hx-stamp{font-size:16px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}}
html .hero[data-v="p"] .pkick{font-size:12.5px}
html .nerds .nl span{font-size:12.5px}
html .dvt{font-size:12.5px}
html .dvA .pt small{font-size:12.5px}
html .dvA .pin p{font-size:17.5px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .dvB .brow .n{font-size:12.5px}
html .dvB .brow small{font-size:12.5px;opacity:.85}
html .dvB .brow p{font-size:17.5px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .dvC .st{font-size:12.5px}
html .dvC figcaption span{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .fbd-s{font-size:12.5px}
html .rt b{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
@media(max-width:700px){html .rt p{font-size:16px}}
@media(min-width:1100px){html .heroes .tabs button::before{font-size:12.5px}}
html .bi-leg{font-size:12.5px}
html .bi-help{font-size:12.5px;opacity:.85}
html .hset button{font-size:12.5px}
html .proof .pnote{font-size:12.5px;opacity:.85}
@media(max-width:700px){html .why-t .t{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}}
@media(max-width:700px){html .why-t .x,html .why-t .v{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}}
html .faq .zr b{font-size:12.5px}
html .of3-ws{font-size:16px}
html footer .fnl p{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .wall2 .rvbig .rvn{font-size:12.5px;opacity:.85}
html .wall2 .r .rst{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .mrev-v{font-size:12.5px}
html .mrev-n{font-size:12.5px;opacity:.85}
html .pv-k{font-size:12.5px;color:#45484E}
html .pv-n span{font-size:16.5px}
html .pv-n em{font-size:16px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500;color:#45484E}
html .pv-foot{font-size:16px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500;color:#45484E}
@media(max-width:700px){html .pv-n span{font-size:16px}}
@media(max-width:700px){html .why .why-t .t{font-size:16.5px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}}
@media(max-width:700px){html .why .why-t .v,html .why .why-t .x{font-size:16px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}}
html .hp-pick{font-size:12.5px}
html .mf-perks{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .mf-more{font-size:16px}
html .mp-k{font-size:12.5px}
html .mp-head p.mp-lede{color:#1C1D20}
html .mp-btn{font-size:16px}
html .mp-note b{font-size:12.5px}
html .mp-crumb{font-size:12.5px}
html .mp-tag{font-size:12.5px}
html .mp-rate{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .mp-intro{color:#1C1D20}
html .mp-price .mp-save{font-size:12.5px}
html .mp-unit{font-size:12.5px}
html .mp-bens li>i{font-size:12.5px}
html .mp-bens b{font-size:16.5px}
html .mp-bens small{font-size:16px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .mp-opt b{font-size:16px}
html .mp-opt .p{font-size:16px}
html .mp-flag{font-size:12.5px}
html .mp-sub label{font-size:17px}
html .mp-perks{font-size:12.5px}
html .mp-code p{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .mp-code button{font-size:12.5px}
html .mp-trust b{font-size:16.5px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .mp-nums span{font-size:16px}
html .mp-nums em{font-size:12.5px}
html .mp-qa p{font-size:16px;color:#1C1D20}
html .mp-quote figcaption{font-size:12.5px}
html .mp-quote .tr{font-size:16.5px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .mp-a .in span{font-size:12.5px}
html .mp-a strong small{font-size:12.5px}
html .mp-a p{font-size:17.5px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500;color:#1C1D20}
html .mp-stamps{font-size:12.5px}
html .mp-steps .n{font-size:12.5px}
html .mp-steps p{font-size:17.5px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500;color:#1C1D20}
html .mp-revsum{font-size:16px}
html .mp-r .v{font-size:12.5px}
html .mp-r p{font-size:17.5px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .mp-r span{font-size:12.5px}
html .mp-revnote{font-size:12.5px}
html .mp-faq details p{font-size:16px;color:#1C1D20}
html .mp-xc p{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .mp-xc .mp-btn{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .mp-bar b{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .mp-toast{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .mp-sv-h{font-size:12.5px}
html .mp-swipe{font-size:12.5px}
@media(max-width:900px){html .mp-nums span{font-size:16.5px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}}
@media(max-width:900px){html .mp-a p{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}}
@media(max-width:900px){html .mp-steps b{font-size:16px}}
@media(max-width:900px){html .mp-steps p{font-size:16px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}}
@media(max-width:900px){html .mp-qa p{font-size:17.5px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}}
@media(max-width:900px){html .mp-intro{font-size:16px}}
html .mp-vc .h{font-size:12.5px}
html .mp-f b{font-size:16.5px}
html .mp-inci summary{font-size:16px}
html .mp-inci p{font-size:16px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
@media(max-width:900px){html .mp-f b{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}}
html .mp-spec p{font-size:12.5px}
html .mp-desc{font-size:16px;color:#1C1D20}
html .mp-checks li{font-size:17px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .mp-pay .mp-pay-t{font-size:12.5px}
html .mp-acc summary{font-size:12.5px}
html .mp-acc-b{font-size:17.5px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500;color:#1C1D20}
html .mp-foot{font-size:12.5px}
html .mp .mp-btn{font-size:16px}
html .mp-desc{font-size:16px}
html .mp-qa p,html .mp-a p,html .mp-faq details p{font-size:17.5px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .mp-nums span{font-size:16.5px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .mp-bens b{font-size:16px}
html .mp-r p{font-size:16px}
html .mp-checks li{font-size:16.5px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .mp .mp-proof .mp-num span{font-size:16.5px}
html .mp .mp-proof .mp-num em{font-size:16px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .mp .mp-proof .mp-foot{font-size:16px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
@media(max-width:900px){html .mp .mp-proof .mp-num span{font-size:16px}}
html .mp-revsum .mp-revn{font-size:12.5px}
html .mp-rate .mp-raten{font-size:16px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .mp-r .mp-stars{font-size:16px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
html .mp-r p.mp-rt{font-size:16px}
html .mp-r p.mp-rt+p{font-size:17.5px;font-family:"Hanken Grotesk","Albert Sans","Helvetica Neue",Arial,sans-serif;font-weight:500}
/* end r29 generated */

/* r38 · science pass (Viktor 23 Oct): Proof boxes refined (white, label + product tag, light big number, green bar, Active row);
   "What's in our products." as ingredient cards with the original mubyskin.com photos, 3 x 2 on desktop, swipe row on phones */
html .pv-n{background:#fff;box-shadow:0 0 0 1px rgba(21,21,21,.09),0 10px 30px rgba(21,21,21,.04);padding:26px 28px 24px;display:flex;flex-direction:column;gap:16px;align-items:stretch;text-align:left}
html .pv-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0}
html .pv-n .pv-i{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#5A5D63;max-width:none}
html .pv-n .pv-in{margin:0;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);padding:5px 9px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(21,21,21,.22);white-space:nowrap;max-width:none}
html .pv-n strong{font-family:"Hanken Grotesk",var(--font);font-weight:300;font-size:clamp(60px,5.6vw,84px);letter-spacing:-.03em;line-height:.95;margin-top:6px;grid-row:auto}
html .pv-n strong small{font-size:.38em;font-weight:400;letter-spacing:0;margin-left:.06em}
html .pv-bar{display:block;position:relative;height:6px;border-radius:99px;background:#ECEEF1;overflow:hidden}
html .pv-bar>i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--green,#00D652)}
html .pv-n>span{margin:0;font-family:"Hanken Grotesk",var(--font);font-weight:500;font-size:19px;line-height:1.35;color:var(--ink);max-width:none;flex-grow:1}
html .pv-n>span::first-letter{text-transform:uppercase}
html .pv-n em{margin:0;padding-top:14px;border-top:1px solid rgba(21,21,21,.1);display:flex;justify-content:space-between;gap:16px;align-items:baseline;font-size:15.5px;color:var(--ink)}
html .pv-n em::before{display:none}
html .pv-n em small{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#5A5D63;font-weight:400}
html .pv-n em span{margin:0;font-family:"Hanken Grotesk",var(--font);font-size:15.5px;font-weight:500;color:var(--ink);text-align:right;max-width:none}
html .pv-foot{font-size:17px;color:var(--ink);text-align:left}
@media(max-width:700px){
  html .pv-n{display:flex;flex-direction:column;align-items:stretch;padding:20px 20px 18px;gap:14px}
  html .pv-n .pv-top span{align-self:auto}
  html .pv-n strong{font-size:64px;white-space:nowrap}
  html .pv-n>span{font-size:17.5px;align-self:auto}
  html .pv-n em{align-self:auto;padding-top:12px;font-size:15px}
  html .pv-foot{text-align:left;font-size:16px}
}
.hcards .head{display:block;margin-bottom:clamp(24px,4vh,40px)}
.hc-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.hc{background:#fff;border-radius:var(--r-lg,20px);box-shadow:0 0 0 1px rgba(21,21,21,.1);overflow:hidden;display:flex;flex-direction:column}
.hc-im{aspect-ratio:16/10;background:#F4F5F7;overflow:hidden}
.hc-im img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.hc-b{padding:22px 24px 24px;display:flex;flex-direction:column;gap:14px;flex-grow:1}
.hc-t{display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#5A5D63}
.hc-t span:last-child{color:#3C3F44;font-size:11.5px;letter-spacing:.06em}
.hc h3{margin:0;font-family:var(--disp);font-weight:400;font-size:28px;line-height:1;text-transform:uppercase;letter-spacing:.01em}
.hc p{margin:0;font-family:"Hanken Grotesk",var(--font);font-weight:500;font-size:16px;line-height:1.5;color:#3C3F44;flex-grow:1}
.hc-n{display:flex;align-items:baseline;gap:12px;padding-top:14px;border-top:1px solid rgba(21,21,21,.1)}
.hc-n b{font-family:"Hanken Grotesk",var(--font);font-weight:300;font-size:40px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.hc-n span{font-family:"Hanken Grotesk",var(--font);font-size:14px;line-height:1.35;color:#3C3F44}
.hc-prog{display:none}
@media(max-width:1000px) and (min-width:701px){.hc-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  .hcards{padding-inline:0!important}
  .hcards .head{padding-inline:16px}
  .hc-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 16px 4px;scroll-padding-left:16px;scrollbar-width:none}
  .hc-row::-webkit-scrollbar{display:none}
  .hc{flex:0 0 min(302px,80vw);scroll-snap-align:start}
  .hc-im{aspect-ratio:4/3}
  .hc-b{padding:18px 18px 20px;gap:12px}
  .hc h3{font-size:25px}
  .hc p{font-size:15.5px}
  .hc-n b{font-size:36px}
  .hc-n span{font-size:13.5px}
  .hc-prog{display:flex;align-items:center;gap:16px;padding:18px 16px 0}
  .hc-prog>i{flex:1 1 auto;height:3px;border-radius:99px;background:rgba(21,21,21,.12);position:relative;overflow:hidden}
  .hc-prog>i>i{position:absolute;top:0;bottom:0;left:0;width:16.67%;border-radius:99px;background:var(--ink);transition:left .25s ease}
  .hc-prog span{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:#3C3F44;font-variant-numeric:tabular-nums}
}
.heroes.hcards{display:block!important}

/* r39 · How to get started: black Add + green Read more on every card; the whole card opens the product page (Viktor 23 Oct) */
.shop .card{position:relative}
.shop .card h3 a.card-link{color:inherit;text-decoration:none}
.shop .card h3 a.card-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.shop .card .row{position:relative;z-index:2}
.shop .card .stk{z-index:3}
.shop .card h3 a.card-link:focus-visible{outline:none}
.shop .card:has(.card-link:focus-visible){outline:3px solid var(--ink)!important;outline-offset:2px}
.shop .card .row{flex-wrap:wrap;gap:12px 14px}
.shop .card .btns{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.shop .card .btns .btn{height:46px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;text-decoration:none}
.shop .card .btns [data-add]{background:var(--ink)!important;color:#fff!important;border-color:var(--ink)!important}
.shop .card .btns .more{background:var(--green,#00D652)!important;color:var(--ink)!important;border-color:var(--green,#00D652)!important}
.shop .card .btns [data-add]:hover{background:#000!important}
.shop .card .btns .more:hover{filter:brightness(.95)}
@media(max-width:700px){
  .shop .card .row{flex-direction:column;align-items:stretch}
  .shop .card .btns{margin-left:0;display:grid;grid-template-columns:auto 1fr;gap:8px}
  .shop .card .btns .btn{height:44px;padding:0 14px;font-size:15px}
}

/* r40 · What's in our products now sits right after the homepage product (paper), so it takes bone; Proof moves below Your words (Viktor 23 Oct) */
.heroes.hcards{background:var(--bone)}

/* r41 · Recommended by skin experts moved above Barrier Land; Pick a face now follows Why Muby (both were bone), so it takes paper (Viktor 23 Oct) */
.offer3{background:var(--paper,#ECEEF1)!important}

/* r42 · desktop: every section fits one window (Viktor 23 Oct, "not bigger than a full size window"). Phones unchanged. */
@media (min-width:901px){
  /* Korean, beyond the label */
  html .ledger .kbband{height:clamp(180px,31vh,360px)!important;min-height:0!important}
  html .ledger .kbband h2{font-size:clamp(34px,min(5.4vw,7.6vh),104px)!important}
  html .ledger .grid{padding-block:clamp(20px,4vh,56px)!important}
  html .ledger .txt{row-gap:clamp(12px,2vh,28px)!important;column-gap:clamp(32px,5vw,96px)!important;padding-block:0!important}
  html .ledger .row{padding-block:clamp(7px,1.25vh,16px)!important}
  html .ledger .row p{max-width:none!important;font-size:clamp(15px,2.05vh,17px)!important;line-height:1.42!important;margin-top:4px!important}
  html .ledger .lede{font-size:clamp(18px,2.8vh,24px)!important}

  /* Take a closer look */
  html .mf{--mf-pt:clamp(24px,4.5vh,64px);--mf-pb:clamp(20px,3.5vh,48px);--mf-hh:clamp(56px,8.5vh,84px);padding-top:var(--mf-pt);padding-bottom:var(--mf-pb)}
  html .mf-head{height:var(--mf-hh);margin-bottom:clamp(10px,1.6vh,20px);align-items:center;flex-wrap:nowrap}
  html .mf-h{font-size:clamp(30px,min(3.4vw,6.4vh),62px)!important;white-space:nowrap}
  html .mf-h br{display:none}
  html .mf .mf-grid{height:calc(100svh - var(--mf-pt) - var(--mf-pb) - var(--mf-hh) - clamp(10px,1.6vh,20px));max-height:980px;min-height:520px;align-items:stretch}
  html .mf .mf-stage{min-height:0!important;height:100%}
  html .mf .mf-thumbs{height:100%;min-height:0;overflow:hidden}
  html .mf .mf-thumbs button{flex:1 1 0;min-height:0;aspect-ratio:auto!important;max-height:22%}
  html .mf-buy{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:clamp(18px,3vh,44px) clamp(20px,2.6vw,44px)!important;gap:clamp(8px,1.5vh,18px)!important}
  html .mf .mf-title{font-size:clamp(30px,min(3.2vw,5.6vh),58px)!important}
  html .mf-intro{font-size:clamp(15px,2.15vh,19px)!important;max-width:none}
  html .mf-box{padding:clamp(12px,1.8vh,18px) 18px!important;gap:clamp(6px,1vh,12px)!important}
  html .mf-checks{gap:clamp(2px,.6vh,8px)!important}
  html .mf .mf-atc,html .mf .mf-qty{height:clamp(46px,7vh,62px)!important}
  html .mf-more{min-height:0!important;padding-block:clamp(8px,1.4vh,14px)!important}
  html .mf-pay{margin-top:0!important}
  html .mf-sign{margin-top:0!important;padding:clamp(12px,1.8vh,18px)!important;gap:clamp(8px,1.2vh,14px)!important}
  html .mf-sign-b{width:clamp(40px,6vh,58px)!important;height:clamp(40px,6vh,58px)!important;font-size:clamp(15px,2.2vh,20px)!important}
  html .mf-sign-x{font-size:15px!important}
  html .mf-sign .mfc-fine{display:none}
  html .mf-buy>*{flex-shrink:0}
  html .mf-sign{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:center}
  html .mf-sign-h{display:contents}
  html .mf-sign-b{grid-row:1/3;align-self:center}
  html .mf-sign-h>div{grid-column:2}
  html .mf-sign-x{display:none}
  html .mf-sign .mfc-w{grid-column:2}

  /* What's in our products */
  html .heroes.hcards{--hc-pt:clamp(24px,4.5vh,64px);--hc-hh:clamp(40px,7vh,72px);padding-block:var(--hc-pt)!important}
  html .hcards .head{margin-bottom:clamp(12px,2vh,28px)!important}
  html .hcards .head h2{font-size:clamp(30px,min(3.4vw,6.4vh),62px)!important;white-space:nowrap}
  html .hcards .head h2 br{display:none}
  html .hc-row{height:calc(100svh - 2 * var(--hc-pt) - var(--hc-hh) - clamp(12px,2vh,28px));max-height:1040px;min-height:540px;grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(10px,1.6vh,20px)}
  html .hc{min-height:0}
  html .hc-im{aspect-ratio:auto!important;flex:1 1 auto;min-height:48px}
  html .hc-b{flex:0 0 auto;padding:clamp(12px,1.8vh,22px) clamp(16px,1.6vw,24px)!important;gap:clamp(6px,1vh,14px)!important}
  html .hc h3{font-size:clamp(20px,3.1vh,28px)!important}
  html .hc p{font-size:clamp(14px,2vh,16px)!important;line-height:1.42!important;flex-grow:0!important}
  html .hc-n{padding-top:clamp(8px,1.3vh,14px)!important}
  html .hc-n b{font-size:clamp(26px,4.4vh,40px)!important}

  /* Recommended by skin experts */
  html .xp2{padding-block:clamp(28px,5vh,72px)!important}
  html .xa-p .im{aspect-ratio:auto!important;height:clamp(220px,calc(100svh - 330px),640px)}

  /* Why Muby: heading and the two circles left, the comparison right */
  html .why{padding-block:clamp(28px,5.5vh,80px)!important}
  html .why .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-areas:"h t" "c t" "b t";column-gap:clamp(32px,5vw,88px);row-gap:clamp(14px,2.6vh,30px);align-items:center;max-width:1280px}
  html .why h2{grid-area:h;text-align:left!important;margin:0!important;align-self:end;font-size:clamp(36px,min(4.4vw,8vh),76px)!important}
  html .why-h{grid-area:c;margin:0!important;max-width:none!important;justify-items:start;gap:clamp(12px,2vw,32px)}
  html .why-h figure{justify-items:center}
  html .why-h img{width:clamp(96px,min(13vw,20vh),220px)!important}
  html .why-h figcaption{font-size:clamp(16px,min(1.8vw,3vh),30px)!important}
  html .why-t{grid-area:t;gap:clamp(6px,1.1vh,14px)!important}
  html .why-t li{min-height:clamp(42px,6.6vh,80px)!important}
  html .why .ctas{grid-area:b;justify-content:flex-start!important;margin-top:0!important;align-self:start}
}
@media (min-width:901px) and (max-height:1000px){
  html .mf-intro{display:none}
}
@media (min-width:901px) and (max-height:900px){
  html .mf-buy .mf-k,html .mf-buy .mf-perks{display:none}
}
@media (min-width:901px) and (max-height:800px){
  html .shop.sec{padding-block:clamp(24px,5vh,56px)!important}
  html .mf .mf-title{font-size:clamp(28px,4.8vh,44px)!important}
}

/* r43 · desktop, Viktor 24 Oct: What's in our products and Why Muby no longer full width.
   Ingredient cards keep their 16:10 photos in a full-width scroll row with arrows and a progress bar.
   Why Muby: heading, the two products, then the comparison, in one centred column; no buttons. */
@media (min-width:901px){
  /* full-width scroll row (Viktor 24 Oct): heading and controls on the page gutter, cards run to the window edge */
  html .heroes.hcards{--hc-gap:20px;--hc-card:clamp(320px,27vw,440px);padding-block:clamp(26px,6vh,96px)!important}
  html .hcards .head{margin-bottom:clamp(12px,2.6vh,32px)!important}
  html .hcards .head h2{font-size:clamp(32px,min(3.6vw,6.4vh),62px)!important}
  html .hc-row{display:flex;height:auto;max-height:none;min-height:0;gap:var(--hc-gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:calc(-1 * min(3vw,40px));padding:2px min(3vw,40px) 4px;scroll-padding-inline:min(3vw,40px)}
  html .hc-row::-webkit-scrollbar{display:none}
  html .hc{flex:0 0 var(--hc-card);scroll-snap-align:start}
  html .hc-im{aspect-ratio:16/10!important;flex:none}
  html .hc-b{flex:1 1 auto;padding:clamp(16px,2.4vh,22px) 24px clamp(18px,2.6vh,24px)!important;gap:clamp(10px,1.6vh,14px)!important}
  html .hc h3{font-size:clamp(22px,3.2vh,28px)!important}
  html .hc p{font-size:16px!important;line-height:1.5!important;flex-grow:1!important}
  html .hc-n b{font-size:clamp(30px,4.6vh,40px)!important}
  html .hc-n{align-items:center!important;min-height:clamp(50px,7vh,60px)}
  html .hcards .hc-prog{display:flex;align-items:center;gap:16px;padding:clamp(10px,2.2vh,24px) 0 0}
  html .hc-prog>i{flex:1 1 auto;height:3px;border-radius:99px;background:rgba(21,21,21,.12);position:relative;overflow:hidden}
  html .hc-prog>i>i{position:absolute;top:0;bottom:0;left:0;width:50%;border-radius:99px;background:var(--ink);transition:left .3s ease}
  html .hc-prog span{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:#3c3f44;font-variant-numeric:tabular-nums;min-width:8ch;text-align:right}
  html .hc-arr{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font-size:18px;line-height:1;display:grid;place-items:center;cursor:pointer;padding:0;transition:background .15s,color .15s}
  html .hc-arr:hover:not(:disabled){background:var(--ink);color:#fff}
  html .hc-arr:disabled{opacity:.3;cursor:default}
  html .hc-arr:focus-visible{outline:2px solid var(--green);outline-offset:3px}

  html .why{padding-block:clamp(26px,5.5vh,80px)!important}
  html .why .wrap{display:block;max-width:min(880px,calc(100vw - 96px));margin-inline:auto}
  html .why h2{text-align:center!important;margin:0 0 clamp(8px,1.8vh,26px)!important;font-size:clamp(34px,min(4.4vw,6.4vh),72px)!important}
  html .why-h{display:grid;grid-template-columns:1fr 1fr;justify-items:center;gap:clamp(16px,4vw,64px);max-width:600px!important;margin:0 auto clamp(10px,2.2vh,30px)!important}
  html .why-h figure{gap:clamp(6px,1.2vh,14px)}
  html .why-h img{width:clamp(80px,14.5vh,180px)!important}
  html .why-h figcaption{font-size:clamp(15px,min(1.6vw,2.6vh),26px)!important}
  html .why-h figcaption br{display:none}
  html .why-t{gap:clamp(6px,1vh,12px)!important}
  html .why-t li{grid-template-columns:1fr minmax(0,2.1fr) 1fr!important;min-height:clamp(38px,5.4vh,62px)!important}
}
@media (max-width:900px){.hc-arr{display:none}}

/* r44 · cool scheme (Viktor 24 Oct: "more scientific, remove the beige, mostly white and/or light grey").
   Warm neutrals were swapped for cool greys by theme/tools/recolor_cool.py; sections alternate white and light grey. */
:root{--white:#FFFFFF;--g1:#F4F5F7;--mist:#ECEEF1}
html body{background:var(--white)}
html body .hp,html body #everyday,html body #experts,html body #heroes,html body #proof,html body #dose,html body #myth{background:var(--white)!important}
html body #shop,html body #origin,html body .muby-sec--feature,html body .muby-sec--feature .mf,html body #wall,html body #offer,html body #faq{background:var(--g1)!important}
html body footer{background:var(--white)!important}

/* r45 · desktop side margins like jiyuskin.com, a little narrower (Viktor 24 Oct). Every content section keeps its content,
   including scroll rows, photos and cards, inside a side margin; backgrounds stay full width. Full width: the hero,
   the green band and the photo dividers (Korean beyond the label band, Barrier Land). Phones unchanged. */
@media (min-width:901px){
  html body{--gx:clamp(24px,4vw,64px)}
  html body #shop,html body #heroes,html body #proof,html body #faq{padding-inline:var(--gx)!important}
  html body #everyday .wrap,html body #experts .xa,html body .muby-sec--feature .mf,html body #wall .head,html body #myth .head,html body #offer .wrap,html body #dose .wrap{padding-inline:var(--gx)!important}
  html body #dose .wrap{max-width:min(880px,calc(100vw - 2 * var(--gx)))!important}
  html body #everyday .ev-row,html body #wall .track,html body #myth .track{margin-inline:var(--gx)!important;padding-inline:0!important;scroll-padding-inline:0!important}
  html body #heroes .hc-row{margin-inline:0!important;padding-inline:0!important;scroll-padding-inline:0!important}
}

/* r46 · 24 Oct: a little more side margin on bigger laptops (r45 --gx now 4vw, max 64px); the moving band in ink
   with white text and small green markers instead of a green band; Barrier Invaders keeps its pixel font. */
html body .mq{background:#151515!important;color:var(--green)!important;border-block:1px solid #151515}
html body .mq span{color:#fff;font-weight:500!important;letter-spacing:.14em!important;margin-inline:.55em}
html body .bi{--mono:"Space Mono",ui-monospace,monospace}
/* r47 · footer: one font and one style (Viktor 24 Oct). Column headings Inter 600, everything else Inter 400 in the same size;
   small print one step smaller; the 10% heading is a plain heading (no tilted sticker); Sign up button in ink. */
html body footer:not(#_),html body footer:not(#_) *{font-family:"Inter","Helvetica Neue",Arial,sans-serif!important;letter-spacing:0!important;text-transform:none!important;font-style:normal!important}
html body footer:not(#_) h4,html body footer:not(#_) .fnl h4{font-size:15px!important;font-weight:600!important;line-height:1.35!important;color:var(--ink)!important;margin:0 0 12px!important;padding:0!important;background:none!important;transform:none!important;rotate:none!important;box-shadow:none!important;border-radius:0!important;display:block!important}
html body footer:not(#_) a,html body footer:not(#_) p,html body footer:not(#_) .k,html body footer:not(#_) .tr span,html body footer:not(#_) .fnl p{font-size:15px!important;font-weight:400!important;line-height:1.6!important;color:#3c3f44!important;opacity:1!important}
html body footer:not(#_) a:hover{color:var(--ink)!important;text-decoration:underline;text-underline-offset:3px}
html body footer:not(#_) .g>div{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
html body footer:not(#_) .g>div>h4{margin-bottom:8px!important}
html body footer:not(#_) .k{margin:14px 0 0!important}
html body footer:not(#_) .tr{display:flex!important;flex-direction:column!important;gap:4px!important;margin:0!important;padding:0!important}
html body footer:not(#_) .tr span{padding:0!important;border:0!important;background:none!important}
html body footer:not(#_) .tr span::before,html body footer:not(#_) .tr span::after{content:none!important}
html body footer:not(#_) .fnl .mfc-row input,html body footer:not(#_) .fnl .mfc-row button{font-size:15px!important}
html body footer:not(#_) .fnl .mfc-row button{background:var(--ink)!important;color:#fff!important;border-color:var(--ink)!important;font-weight:600!important}
html body footer:not(#_) .mfc-msg,html body footer:not(#_) .mfc-fine,html body footer:not(#_) .fine,html body footer:not(#_) .fine span,html body footer:not(#_) .fnl p.mfc-fine{font-size:13px!important;line-height:1.5!important;color:#5b5e64!important}

/* r48 · 24 Oct. What's in our products: back to 3 x 2 on desktop inside the side margins (phones keep the swipe row).
   Proof, not promises: a results table (Viktor picked layout A of four, then A of five table designs). */
@media (min-width:901px){
  html body #heroes .hc-row{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible!important;gap:20px}
  html body #heroes .hc{flex:none}
  html body #heroes .hc-prog{display:none!important}
}

.pv2{position:relative;background:#fff;color:var(--ink);padding-block:clamp(48px,9vh,112px)}
.pv2-k{font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#5b5e64;margin:0 0 12px}
.pv2-head h2{margin:0;font-size:clamp(36px,4.2vw,64px)!important}
.pv2-foot{margin:22px 0 0;font-size:15px;color:#3c3f44}
.pv2-lede{margin:16px 0 0;font-size:17px;line-height:1.5;color:#3c3f44;max-width:34ch}

/* A · table */
.pva-table{margin-top:clamp(24px,4vh,44px);border-top:1.5px solid var(--ink)}
.pva-r{display:grid;grid-template-columns:1.1fr 1.6fr 1fr 1.1fr .8fr;gap:24px;align-items:center;padding:clamp(16px,2.6vh,26px) 0;border-bottom:1px solid rgba(21,21,21,.12);font-size:15.5px;color:#3c3f44}
.pva-th{padding:12px 0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#5b5e64}
.pva-m{font-weight:600;color:var(--ink);font-size:17px}
.pva-n{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:10px;row-gap:8px}
.pva-n b{font-family:"Inter Tight",Inter,sans-serif;font-weight:500;font-size:clamp(36px,3.6vw,52px);line-height:1;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.pva-n b+small{display:none}
.pva-n b::after{content:"%";font-size:.45em;margin-left:2px;letter-spacing:0}
.pva-n em{font-style:normal;font-size:14px;color:#5b5e64}
.pva-bar{grid-column:1/-1;display:block;height:4px;border-radius:2px;background:#ECEEF1;position:relative;overflow:hidden;max-width:260px}
.pva-bar i{position:absolute;inset:0 auto 0 0;background:var(--green);border-radius:2px}
.pva-in{justify-self:start;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(21,21,21,.2);color:var(--ink)}
@media (max-width:900px){
  .pva-th{display:none}
  .pva-r{grid-template-columns:1fr auto;gap:6px 16px;align-items:start}
  .pva-m{grid-column:1;grid-row:1;font-size:16px}
  .pva-in{grid-column:2;grid-row:1}
  .pva-n{grid-column:1/-1;grid-row:2;margin-top:6px}
  .pva-r>span:nth-child(3),.pva-r>span:nth-child(4){grid-column:1/-1;font-size:14px}
  .pva-r>span:nth-child(3){grid-row:3}.pva-r>span:nth-child(4){grid-row:4;color:#5b5e64}
}

@media (max-width:900px){.pv2{padding-inline:16px}}

/* r50 · What's in our products on desktop: all six in one row like jiyuskin.com (Viktor 24 Oct), no card boxes,
   portrait photos with rounded corners (not ovals). 901-1199px: two rows of three. Phones keep the swipe cards. */
@media (min-width:901px){
  html body #heroes .hc-row{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none!important;grid-auto-rows:auto;height:auto!important;max-height:none!important;min-height:0!important;gap:clamp(28px,3vw,40px) clamp(16px,1.6vw,24px)!important}
  html body #heroes .hc{background:transparent!important;box-shadow:none!important;border-radius:0!important;overflow:visible}
  html body #heroes .hc-im{aspect-ratio:4/5!important;border-radius:var(--r-md,14px);overflow:hidden}
  html body #heroes .hc-b{padding:16px 0 0!important;gap:8px!important}
  html body #heroes .hc h3{font-size:clamp(19px,1.5vw,23px)!important}
  html body #heroes .hc p{font-size:15px!important;line-height:1.5!important}
  html body #heroes .hc-n{min-height:0!important;padding-top:10px!important;margin-top:4px;flex-direction:column;align-items:flex-start!important;gap:4px}
  html body #heroes .hc-n b{font-size:clamp(26px,2.2vw,32px)!important}
  html body #heroes .hc-n span{font-size:13px!important;line-height:1.4!important;min-height:2.8em}
}
@media (min-width:1200px){
  html body #heroes .hc-row{grid-template-columns:repeat(6,minmax(0,1fr))}
  html body #heroes .hc-b .hc-t{flex-direction:column;align-items:flex-start;gap:4px}
}

/* r51 · phones: the ingredient row gets the desktop look (Viktor 24 Oct): no card boxes, portrait 4:5 photos with rounded corners,
   text under the photo; still a swipe row with the progress bar and counter. */
@media (max-width:900px){
  html body #heroes .hc{flex:0 0 min(60vw,236px)!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;overflow:visible}
  html body #heroes .hc-im{aspect-ratio:4/5!important;border-radius:var(--r-md,14px);overflow:hidden}
  html body #heroes .hc-b{padding:14px 0 0!important;gap:8px!important}
  html body #heroes .hc-t{flex-direction:column;align-items:flex-start;gap:4px}
  html body #heroes .hc h3{font-size:21px!important}
  html body #heroes .hc p{font-size:15px!important;line-height:1.5!important}
  html body #heroes .hc-n{min-height:0!important;padding-top:10px!important;margin-top:4px;flex-direction:column;align-items:flex-start!important;gap:4px}
  html body #heroes .hc-n b{font-size:30px!important}
  html body #heroes .hc-n span{font-size:13px!important;line-height:1.4!important;min-height:2.8em}
  html body #heroes .hc-row{gap:16px!important}
}

/* r52 · ingredient Read more (Viktor 24 Oct, like jiyuskin.com): a quiet text link on each ingredient (the photo opens it too)
   and a pop-up with the photo, the number, more text, key facts and the products it is in (Add + link to the product page). */
html body #heroes .hc-more{align-self:flex-start;margin-top:12px;padding:0;border:0;background:none;font:500 13.5px/1.4 Inter,"Helvetica Neue",Arial,sans-serif;color:var(--ink);text-decoration:underline;text-decoration-color:rgba(21,21,21,.3);text-underline-offset:4px;cursor:pointer}
html body #heroes .hc-more:hover{text-decoration-color:var(--ink)}
html body #heroes .hc-more:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:2px}
html.hcd-on,html.hcd-on body{overflow:hidden}
.hcd{position:fixed;inset:0;margin:auto;height:fit-content;width:min(940px,calc(100vw - 48px));max-width:none;max-height:min(88vh,760px);padding:0;border:0;border-radius:var(--r-lg,20px);background:#fff;color:var(--ink);overflow:hidden;box-shadow:0 30px 80px rgba(21,21,21,.25)}
.hcd::backdrop{background:rgba(21,21,21,.45);backdrop-filter:blur(2px)}
.hcd[open]{display:block}
.hcd-in{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);max-height:min(88vh,760px)}
.hcd-im{background:#F4F5F7;min-height:100%}
.hcd-im img{display:block;width:100%;height:100%;object-fit:cover}
.hcd-b{overflow-y:auto;padding:clamp(28px,3.4vw,48px) clamp(24px,3.4vw,48px) clamp(28px,3vw,40px);overscroll-behavior:contain}
.hcd-k{margin:0 0 10px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#5b5e64;padding-right:44px}
.hcd h3{margin:0;font-size:clamp(30px,3vw,42px)!important;line-height:1.05!important}
.hcd-stat{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:18px 0 0;padding:14px 0;border-block:1px solid rgba(21,21,21,.12)}
.hcd-stat b{font:500 clamp(30px,2.8vw,38px)/1 "Inter Tight",Inter,sans-serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hcd-stat span{font-size:14px;color:#3c3f44}
.hcd-txt{margin-top:18px}
.hcd-txt p{margin:0 0 12px;font-size:16px;line-height:1.6;color:#2a2c30}
.hcd-facts{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.hcd-facts li{position:relative;padding-left:18px;font-size:14.5px;line-height:1.45;color:#2a2c30}
.hcd-facts li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:1px;background:var(--green)}
.hcd-found{margin-top:24px;padding-top:18px;border-top:1px solid rgba(21,21,21,.12)}
.hcd-fk{margin:0 0 10px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#5b5e64}
.hcd-p{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:14px;padding:8px 0}
.hcd-p+.hcd-p{border-top:1px solid rgba(21,21,21,.06)}
.hcd-pi{display:block;width:56px;height:56px;border-radius:12px;overflow:hidden;background:#F4F5F7}
.hcd-pi img{width:100%;height:100%;object-fit:cover;display:block}
.hcd-pn{font-size:15.5px;font-weight:600;color:var(--ink);text-decoration:none;line-height:1.3}
.hcd-pn small{display:block;font-weight:400;font-size:13.5px;color:#5b5e64;margin-top:2px}
.hcd-pn:hover{text-decoration:underline;text-underline-offset:3px}
.hcd-p .btn{min-height:40px;padding:0 18px;font-size:14px;background:var(--ink);color:#fff;border-color:var(--ink)}
.hcd-x{position:absolute;top:14px;right:14px;z-index:2;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;border:1.5px solid rgba(21,21,21,.18);background:#fff;color:var(--ink);font-size:26px;line-height:1;cursor:pointer;padding:0}
.hcd-x:hover{border-color:var(--ink)}
.hcd-x:focus-visible{outline:2px solid var(--green);outline-offset:2px}
@media (max-width:760px){
  .hcd{width:100vw;max-height:92vh;margin:auto 0 0;inset:auto 0 0 0;border-radius:20px 20px 0 0}
  .hcd-in{display:block;max-height:92vh;overflow-y:auto;overscroll-behavior:contain}
  .hcd-im{aspect-ratio:16/10;min-height:0}
  .hcd-b{overflow:visible;padding:22px 20px 28px}
  .hcd-x{top:12px;right:12px;background:rgba(255,255,255,.92)}
  .hcd-p{grid-template-columns:48px 1fr auto;gap:12px}
  .hcd-pi{width:48px;height:48px}
}
@media (prefers-reduced-motion:no-preference){.hcd[open]{animation:hcdIn .22s ease-out}@keyframes hcdIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}}

/* r53 · 24 Oct (Viktor): calmer review cards and type details.
   Second heading lines a bit bigger on phones (e.g. "Your photos."). Review cards: no tilt, the Verified buyer label is a small
   flat white tag with a green tick. Korean beyond the label: the 01-04 badges share the baseline of their row title. */
@media (max-width:900px){html body h2 em,html body h2.disp em{font-size:.56em!important;line-height:1.2!important;margin-top:.2em!important}}
html body .wall2 .r{transform:none!important;rotate:none!important}
html body .wall2 .r:hover{transform:none!important}
html body:not(#_) .wall2 .r .v{top:12px!important;left:12px!important;right:auto!important;transform:none!important;rotate:none!important;background:rgba(255,255,255,.94)!important;color:var(--ink)!important;font:600 12px/1 Inter,"Helvetica Neue",Arial,sans-serif!important;letter-spacing:0!important;text-transform:none!important;padding:7px 10px 7px 9px!important;border-radius:999px!important;box-shadow:0 1px 3px rgba(21,21,21,.12)!important;display:inline-flex;align-items:center;gap:6px}
html body:not(#_) .wall2 .r .v::before{content:""!important;width:14px;height:14px;border-radius:50%;flex:none;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.6 7.2l2.2 2.2 4.6-4.8' fill='none' stroke='%23151515' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;margin:0!important;position:static!important}
html body .ledger .row{align-items:baseline!important}
@media (max-width:900px){html body #wall .track{padding-inline:16px!important;scroll-padding-inline:16px!important}}
@media (min-width:901px){html body #wall>.wrap{padding-inline:var(--gx)!important}}
html body:not(#_) .ledger .row .n{display:inline-block;line-height:1!important;letter-spacing:.04em!important;font-variant-numeric:tabular-nums;align-self:baseline!important;justify-self:start}

/* r54 · 24 Oct. Headings never touch what follows (descenders of "get started." ran into the cards).
   How to get started in the ingredient look (Viktor picked B Clean): no boxes, rounded photos, flat Step / Most popular tags, black Add + underlined Read more. */
html body:not(#_) section .head{margin-bottom:clamp(22px,3.2vh,40px)!important}
/* B · clean */
html body:not(#_) #shop .card{background:transparent!important;box-shadow:none!important;border:0!important;outline:0!important;overflow:visible}
html body:not(#_) #shop .card.hi::before,html body:not(#_) #shop .card.hi::after{display:none!important}
html body:not(#_) #shop .card .ph{border-radius:var(--r-md,14px)!important;overflow:hidden!important}
html body:not(#_) #shop .card .b{padding:16px 0 0!important}
html body:not(#_) #shop .stk{transform:none!important;rotate:none!important;top:12px!important;left:12px!important;background:rgba(255,255,255,.94)!important;color:var(--ink)!important;font:600 12px/1 Inter,sans-serif!important;letter-spacing:0!important;text-transform:none!important;padding:7px 10px!important;border-radius:999px!important;box-shadow:0 1px 3px rgba(21,21,21,.12)!important}
html body:not(#_) #shop .card.hi .stk{background:var(--ink)!important;color:#fff!important}
html body:not(#_) #shop .btns .more{background:none!important;border:0!important;color:var(--ink)!important;padding:0 4px!important;min-height:0!important;font-weight:500!important;text-decoration:underline;text-decoration-color:rgba(21,21,21,.3);text-underline-offset:4px;box-shadow:none!important}
html body:not(#_) #shop .btns{align-items:center;gap:14px}
@media (max-width:900px){html body:not(#_) #shop .card .b{padding:2px 0 0 14px!important}html body:not(#_) #shop .card+.card{margin-top:8px}}

}

/* r55 · Why Muby as a table (Viktor picked B) and Myth or Muby with captions (Viktor picked B). */
/* Why Muby · B table */
.why .wyt{display:block;max-width:880px;margin:clamp(20px,3vh,36px) auto 0;border-top:1.5px solid var(--ink)}
html body:not(#_) .why .wrap{max-width:min(880px,calc(100vw - 2 * var(--gx,24px)))!important}
html body:not(#_) .why h2{text-align:left!important}
.wyt-r{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);align-items:center;border-bottom:1px solid rgba(21,21,21,.12);min-height:clamp(46px,6vh,60px)}
.wyt-r>span{padding:10px 0;font-size:16px;color:var(--ink)}
.wyt-h>span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#5b5e64;padding-block:14px}
.wyt-c{display:flex;align-items:center;justify-content:center;gap:10px;text-align:center}
.wyt-h .wyt-c{flex-direction:column;gap:8px;color:var(--ink)!important;font-weight:500}
.wyt-h .wyt-c img{width:clamp(76px,10vh,112px);height:clamp(76px,10vh,112px);border-radius:50%;object-fit:cover;background:#F4F5F7}
.wyt-r:not(.wyt-h) .wyt-c:nth-child(2){background:rgba(0,214,82,.06);align-self:stretch}
.wyt-h .wyt-c:nth-child(2){background:rgba(0,214,82,.06);align-self:stretch;border-radius:12px 12px 0 0}
.wyt-y,.wyt-n{display:block;width:22px;height:22px;border-radius:50%}
.wyt-y{background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 11.4l3.3 3.3L16 8' fill='none' stroke='%23151515' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat}
.wyt-n{background:none;position:relative}
.wyt-n::after{content:"";position:absolute;left:5px;right:5px;top:10px;height:2px;border-radius:1px;background:#9aa0a7}
@media (max-width:900px){.wyt-r{grid-template-columns:minmax(0,1.5fr) 84px 84px}.wyt-h .wyt-c img{width:68px!important;height:68px!important}.wyt-r>span{font-size:14.5px}.wyt-h>span{font-size:10.5px;letter-spacing:.08em}.why .wyt{margin-inline:0}}

/* Myth or Muby · B captions: photo with only a small number tag, white caption under it; the answer opens under the caption with a Myth / Fact tag */
html body:not(#_) .myth .track{align-items:flex-start;height:auto!important;max-height:none!important;padding-bottom:8px}
html body:not(#_) .myth .fc{width:min(72vw,300px)!important;height:auto!important;max-height:none!important;flex:0 0 auto}
html body:not(#_) .myth .fc{aspect-ratio:auto;perspective:none}
html body:not(#_) .myth .fc .card3,html body:not(#_) .myth .fc.open .card3{transform:none!important;height:auto;transition:none;border-radius:0}
html body:not(#_) .myth .fc .f,html body:not(#_) .myth .fc .b{position:relative;inset:auto;transform:none!important;backface-visibility:visible;-webkit-backface-visibility:visible;visibility:visible;padding:0;border-radius:0!important;box-shadow:none;background:transparent;display:block;overflow:visible}
html body:not(#_) .myth .fc .f img{position:static;display:block;width:100%;aspect-ratio:4/5;height:auto;object-fit:cover;opacity:1;border-radius:var(--r-md,14px)}
html body:not(#_) .myth .fc .f .top{position:absolute;top:12px;left:12px;right:12px}
html body:not(#_) .myth .fc .f .qm{display:none}
html body:not(#_) .myth .fc .f .num{background:rgba(255,255,255,.94)!important;color:var(--ink);text-shadow:none;font:600 12px/1 Inter,sans-serif!important;letter-spacing:0!important;text-transform:none!important;padding:7px 10px;border-radius:999px!important}
html body:not(#_) .myth .fc .f .q{display:block;margin:14px 0 8px!important;color:var(--ink)!important;text-shadow:none!important;text-decoration:none!important;background:none!important;padding:0!important;box-shadow:none!important;font:600 clamp(18px,1.5vw,21px)/1.25 "Inter Tight",Inter,sans-serif!important;letter-spacing:-.012em!important;border-radius:0!important;padding:0;background:none}
html body:not(#_) .myth .fc .f .bot{justify-content:flex-start}
html body:not(#_) .myth .fc .f .pill{background:none!important;padding:0!important;color:var(--ink);font:500 13.5px/1.4 Inter,sans-serif!important;letter-spacing:0!important;text-transform:none!important;text-decoration:underline;text-decoration-color:rgba(21,21,21,.3);text-underline-offset:4px}
html body:not(#_) .myth .fc.open .f .bot{display:none}
html body:not(#_) .myth .fc .b{display:none;margin-top:4px;padding:14px 16px!important;background:#F4F5F7!important;border-radius:var(--r-md,14px)!important;color:var(--ink)}
html body:not(#_) .myth .fc.open .b{display:block}
html body:not(#_) .myth .fc .b .stamp{position:static;display:inline-block;transform:none!important;rotate:none!important;font:600 12px/1 Inter,sans-serif!important;letter-spacing:.06em!important;text-transform:uppercase;padding:6px 9px;border-radius:999px!important;background:var(--ink);color:#fff;border:0;margin:0 0 10px}
html body:not(#_) .myth .fc .b.muby .stamp{font-size:0!important;background:var(--green);color:var(--ink);padding:0}
html body:not(#_) .myth .fc .b.muby .stamp::after{content:"Fact";font:600 12px/1 Inter,sans-serif;letter-spacing:.06em;display:inline-block;padding:6px 9px}
html body:not(#_) .myth .fc .b p{margin:0 0 6px;color:var(--ink);font:600 16px/1.35 Inter,sans-serif!important}
html body:not(#_) .myth .fc .b span:not(.stamp){color:#3c3f44;font-size:14.5px!important;line-height:1.45}
html body:not(#_) .myth .fc .b .flip{display:none}
@media (max-width:900px){html body:not(#_) .myth .track{padding-inline:16px!important;scroll-padding-inline:16px!important}}
html body:not(#_) .myth .dots i.myth{background:var(--ink)!important;border-color:var(--ink)!important}
html body:not(#_) .myth .dots i.muby{background:var(--green)!important;border-color:var(--green)!important}

/* r56/r57 · 24 Oct (Viktor): white page; the very light grey #F7F8FA only to separate two content sections that touch.
   After a photo divider (Korean beyond the label band, Barrier Land) no colour change is needed.
   Order: hero W · band · shop W · reels G · ingredients W · experts G · reviews W · [photo] origin W · closer look G · proof W ·
   [photo] why W · pick a face G · myth W · FAQ G · footer W. */
:root{--g1:#F7F8FA}
html body #shop,html body .hp,html body #heroes,html body #wall,html body #origin,html body #proof,html body #dose,html body #myth{background:#fff!important}
html body #everyday,html body #experts,html body .muby-sec--feature,html body .muby-sec--feature .mf,html body #offer,html body #faq{background:var(--g1)!important}
html body:not(#_) footer{background:#fff!important;box-shadow:inset 0 1px 0 rgba(21,21,21,.08)}
html body:not(#_) footer h4,html body:not(#_) footer a,html body:not(#_) footer p,html body:not(#_) footer .k,html body:not(#_) footer .tr span,html body:not(#_) footer .fnl p,html body:not(#_) footer .mfc-fine,html body:not(#_) footer .fine,html body:not(#_) footer .fine span{color:var(--ink)!important;opacity:1!important}

/* r60 · experts on desktop at about half the height (Viktor 24 Oct): portraits 4:5 at clamp(200px,17vw,300px) wide, heading column takes the rest. */
@media (min-width:901px){
  html body:not(#_) #experts .xa{grid-template-columns:minmax(0,1fr) repeat(2,clamp(200px,17vw,300px));column-gap:clamp(24px,3vw,48px);align-items:start}
  html body:not(#_) #experts .xa-p .im{height:auto!important;aspect-ratio:4/5!important}
  html body:not(#_) #experts .xa-p .im img{width:100%;height:100%;object-fit:cover}
}

/* r61 · hero rating with the number of reviews ("4.99 from 77 reviews"; the theme fills both from Judge.me). */
html body:not(#_) .hp-a .stars.rv .rv-n{font-weight:400;color:var(--ink);margin-left:.15em}

/* r62 · 24 Oct (Viktor). Experts on larger screens: heading and the two portraits as one centred group (less empty space).
   Why Muby table 10% bigger. */
@media (min-width:901px){
  html body:not(#_) #experts .xa{grid-template-columns:clamp(270px,22vw,400px) repeat(2,clamp(200px,17vw,300px));justify-content:center;column-gap:clamp(32px,4vw,72px);align-items:center}
  html body:not(#_) #experts .xp-t{max-width:none;min-width:0}
  html body:not(#_) .why .wrap{max-width:min(968px,calc(100vw - 2 * var(--gx,24px)))!important}
  html body:not(#_) .why .wyt{max-width:968px}
  html body:not(#_) .why h2{font-size:clamp(37px,min(4.8vw,7vh),79px)!important}
  html body:not(#_) .why .wyt-r{min-height:clamp(51px,6.6vh,66px)}
  html body:not(#_) .why .wyt-r>span{font-size:17.5px}
  html body:not(#_) .why .wyt-h>span{font-size:13px}
  html body:not(#_) .why .wyt-h .wyt-c img{width:clamp(84px,11vh,124px);height:clamp(84px,11vh,124px)}
  html body:not(#_) .why .wyt-y,html body:not(#_) .why .wyt-n{width:24px;height:24px;background-size:24px}
}

/* r46 type sans: start (generated by theme/tools/gen_type_sans.py, do not edit by hand) */
:root,html body .mp,html body .mf{--disp:"Inter Tight","Inter","Helvetica Neue",Arial,sans-serif;--serif:"Inter Tight","Inter","Helvetica Neue",Arial,sans-serif;--font:"Inter","Helvetica Neue",Arial,sans-serif;--sans:"Inter","Helvetica Neue",Arial,sans-serif;--mono:"Inter","Helvetica Neue",Arial,sans-serif}
html body{font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-weight:400;font-feature-settings:"cv11","ss01"}
html body,html body .heroes .panel h3,html body .proof .wk,html body .card .b .sp,html body .wall2 .r figcaption p,html body .fc .b p,html body .myth .done b,html body .cmpC .d .l.o span,html body footer .spf,html body .btn,html body .nav .menu a,html body .hero .stars.rv strong,html body .duo .pr,html body .drawer,html body .rt b,html body .mfc input,html body .mfc-msg,html body .mfc-fine,html body .of3-wt,html body .mrev h3,html body .mrev p,html body .pv-n span,html body .pv-n em,html body .pv-foot,html body .hp-word span,html body .mf .mp,html body .mf-tags span,html body .mf .mp-price .mp-save,html body .mf .mp-unit,html body .mf-qty input,html body .mf .mf-atc,html body .mf-sign-t,html body .mf-sign-x,html body .mf-tab-t b,html body .mf-tab-t small,html body .mq,html body .hero .stars,html body .stage .buy .pr s,html body .card .b p,html body .card .row .pr s,html body .card .btn,html body .story .f p,html body .split figcaption p,html body .nums span,html body .mc .ans span,html body .faq .zr p,html body footer a,html body .bar .t b,html body .bar .btn,html body .cmpA .rw .m p,html body .cmpC .d .l span,html body .fc .b span,html body .myth .done p,html body .drawer .it span,html body .drawer .nudge span,html body .drawer .nudge .btn,html body .trio figcaption p,html body .nums2 span,html body .tally span,html body .card .b p.sp,html body .heroes .panel .dyk,html body .shop .card .b p,html body .cmpC .d b,html body .card .rvs b,html body .hero .stars.rv,html body .wz-body,html body .ledger .row p,html body .ledger .lede,html body .duo .bd,html body .bdg blockquote,html body .evx-p b,html body .evx-p span,html body .xa-p blockquote,html body .hx-stamp,html body .dvA .pin p,html body .dvB .brow p,html body .dvC figcaption span,html body .why-t .t,html body .why-t .x,html body .why-t .v,html body footer .fnl p,html body .wall2 .r .rst,html body .why .why-t .t,html body .why .why-t .v,html body .why .why-t .x,html body .mf-perks,html body .mp-rate,html body .mp-bens small,html body .mp-code p,html body .mp-trust b,html body .mp-quote .tr,html body .mp-a p,html body .mp-steps p,html body .mp-r p,html body .mp-xc p,html body .mp-xc .mp-btn,html body .mp-bar b,html body .mp-toast,html body .mp-nums span,html body .mp-qa p,html body .mp-inci p,html body .mp-f b,html body .mp-checks li,html body .mp-acc-b,html body .mp-faq details p,html body .mp .mp-proof .mp-num em,html body .mp .mp-proof .mp-foot,html body .mp-rate .mp-raten,html body .mp-r .mp-stars,html body .mp-r p.mp-rt+p,html body .pv-n strong,html body .pv-n>span,html body .pv-n em span,html body .hc p,html body .hc-n b,html body .hc-n span,html body .wz-btn,html body .mp,html body .mp-acc summary::after,html body .mp .mp-btn{font-family:"Inter","Helvetica Neue",Arial,sans-serif!important}
html body .mq,html body .ledger .row .n,html body .heroes .head .k,html body .heroes .tabs button,html body .heroes .panel .n small,html body .heroes .panel .in span,html body .shop .head .k,html body .card .stk,html body .you button,html body .duo .eb,html body .duo .chips b,html body .proof .nums em,html body .bas .lab,html body .swipe .hint,html body .bas .hint,html body .wall2 .r .v,html body .cmpB .k,html body .cmpC .k,html body .cmpC .sw2 button,html body .strip .tl span,html body .fc .f .q,html body .fc .f .num,html body .fc .f .pill,html body .myth .prog,html body .offer .code b,html body footer h4,html body .offer .in .k,html body .eyb,html body .bdg .bh,html body .bdg .role,html body .ev-note,html body .ev-t .hd,html body .ev-bub .bb,html body .evx-h,html body .offer2 .code b,html body .offer2 .copyb,html body .offer2 .cd,html body .tk-stub span,html body .tk-stub small,html body .lb-l,html body .lb-pic figcaption,html body .pc-stamp text,html body .rv-p,html body .xp2 .role,html body .hs span,html body .of3-hint,html body .offer3 .code b,html body .offer3 .copyb,html body .offer3 .cd,html body .pf-b small,html body .hx-ring,html body .hx-rim text,html body .hx-stamp,html body .hxm,html body .hero[data-v="p"] .pkick,html body .nerds .nl span,html body .dvt,html body .dvA .pt small,html body .dvB .brow .n,html body .dvB .brow small,html body .dvC .st,html body .fbd-s,html body .rt p,html body .heroes .tabs button::before,html body .hset button,html body .proof .pnote,html body .heroes .panel .dyk b,html body .faq .zr b,html body .heroes .tabs .tr,html body .gst span,html body .wall2 .rvbig .rvn,html body .mrev-v,html body .mrev-n,html body .pv-k,html body .hp-pick,html body .mf-k,html body .pv-n .pv-i,html body .pv-n .pv-in,html body .pv-n em small,html body .hc-t,html body .hc-prog span,html body .hero .trust,html body .hero .vid,html body .slot .note,html body .proof .cap,html body .cmpA .pic .tag,html body .cmpA .rows .hd,html body .sw button,html body .cmpB .swipe .lab small,html body .cmpB .cc .m::before,html body .cmpB .cc .o::before,html body .vpick,html body .vpick button,html body .strip .n small,html body .fc .b .flip,html body footer .tr,html body .drawer .ft .code,html body .drawer .ft .perks,html body .nums2 em,html body .proof2 .cap,html body .wall2 .r figcaption span,html body .cmpC .hd,html body .proof .nums.four em,html body .sw2 button,html body .feedg .g .v,html body .feedg .g figcaption span,html body .voice .ph .v,html body .voice .who,html body .divider,html body .rvbig span,html body .wz-tag,html body .wz-eb,html body .wz-chips b,html body .wz-was,html body .wz-dot,html body .mp-k,html body .mp-note b,html body .mp-crumb,html body .mp-tag,html body .mp-price .mp-save,html body .mp-unit,html body .mp-bens li>i,html body .mp-flag,html body .mp-perks,html body .mp-code button,html body .mp-nums em,html body .mp-quote figcaption,html body .mp-a .in span,html body .mp-a strong small,html body .mp-stamps,html body .mp-steps .n,html body .mp-r .v,html body .mp-r span,html body .mp-revnote,html body .mp-sv-h,html body .mp-swipe,html body .mp-vc .h,html body .mp-spec p,html body .mp-pay .mp-pay-t,html body .mp-acc summary,html body .mp-foot,html body .mp-revsum .mp-revn{font-family:"Inter","Helvetica Neue",Arial,sans-serif!important;font-weight:500!important;letter-spacing:.12em!important}
html body .disp,html body .disp em,html body h1 em,html body h2 em,html body .heroes .panel .n,html body .card h3,html body .duo h3,html body .proof .nums b,html body .rvbig strong,html body .cmpB .swipe .lab,html body .strip .n,html body .fc .f .qm,html body .fc .b .stamp,html body .offer h2,html body .bdg .bb b,html body .lb-code b,html body .pc-stamp .big,html body .xa-p b,html body .xb-q blockquote,html body .xc-p b,html body .pf-b b,html body .hx-l,html body .hx-mu,html body .nerds .nl li,html body .dvA .pt,html body .dvA .pplus,html body .dvB .brow b,html body .dvC figcaption b,html body .dvC .sop,html body .dvC .ssum b,html body .fbd-k,html body .rt h3,html body .rt small,html body .rt span,html body .heroes .tabs button,html body .why-h figcaption,html body .pv-n strong,html body .hp-word,html body .mf .mf-title,html body .mf-sign-b,html body .hc h3,html body .slot h2 em,html body .heroes .panel h3,html body .proof .wk,html body .cmpA h2 em,html body .cmpA .rw .o,html body .cmpB .cc .o,html body .cmpC .d .l.o span,html body .card .b .sp,html body .film h2 em,html body .fc .f .q,html body .fc .b p,html body .myth .done b,html body footer .spf,html body .drawer .empty,html body .trio h2 em,html body .ledger h2 em,html body .stripes h2 em,html body .nums2 b,html body .proof2 .wk,html body .wall2 h2 em,html body .wall2 .r figcaption p,html body .tally b,html body .feedg h2 em,html body .feedg .g figcaption p,html body .voice .big,html body .hero .stars.rv strong,html body .wz-word,html body .wz-card h2,html body .wz-tl,html body .mp h1,html body .mp h2,html body .mp h3,html body .mp-nums strong,html body .mp-quote blockquote,html body .mp-a strong,html body .mp-revsum strong,html body .mp .mp-proof .mp-num strong{font-family:"Inter Tight","Inter","Helvetica Neue",Arial,sans-serif!important;text-transform:none!important;font-weight:600!important;letter-spacing:-.012em!important}
/* big headings: tighter */
html body .disp,html body .offer h2,html body .wz-card h2,html body .mp h1,html body .mp h2{letter-spacing:-.03em!important}
html body h1,html body h2{line-height:1.02!important}
/* second heading lines: same face, regular weight */
html body .disp em,html body h1 em,html body h2 em{font-family:"Inter Tight","Inter","Helvetica Neue",Arial,sans-serif!important;font-style:normal!important;font-weight:400!important;text-transform:none!important;letter-spacing:-.025em!important}
html body .hp-a h1 em{font-size:.5em!important;line-height:1.15!important;margin-top:.25em!important;display:block}
/* r46 type sans: end */


/* ---------- Shopify theme glue (muby-theme.css, appended by build_theme.py) ---------- */
.skip{position:absolute;left:-9999px;top:8px;z-index:999;background:#fff;color:var(--ink);padding:10px 14px;font-weight:600}
.skip:focus{left:16px}
a.pill{text-decoration:none}
.card a.ph{display:block;color:inherit;text-decoration:none}
.shopify-section{display:block}
/* width/height attributes are only for layout stability; CSS decides the real size */
:where(img){height:auto}
/* pages other than the homepage: header sits at the very top (no stories band above it) */
body.muby:not(.t-index) .nav{top:0!important;position:absolute}
body.t-product .bar{display:none!important}
body.t-product .mp-hero{padding-top:84px}
.mp{--disp:'Cinzel',Georgia,serif}
/* theme editor: keep revealed content visible while editing */
.shopify-design-mode .reveal{opacity:1!important;transform:none!important}

/* 6 Oct r13: Peaks divider crop */
.ledger .kbband img,.kbband img{object-position:50% 46%}