:root{
--ink:#111111;--cream:#fffaf3;--paper:#fffdf8;--line:#e9e2d9;
--pink:#ff6696;--pink2:#ffd4e1;--lav:#d9c8ff;--blue:#b9dcff;--mint:#bcebd3;
--yellow:#ffe56b;--coral:#ff9b82;--orange:#ffb36b;--white:#fff;--radius:28px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,"Noto Sans KR",sans-serif;letter-spacing:-.025em}img{display:block;max-width:100%}a{text-decoration:none;color:inherit}button,input{font:inherit}.wrap{width:min(1240px,calc(100% - 48px));margin:auto}.section{padding:96px 0}.eyebrow{display:block;font-size:11px;font-weight:800;letter-spacing:.16em;margin-bottom:12px}.section h2,.section-head h2{font-size:clamp(38px,5vw,72px);line-height:.95;margin:0;letter-spacing:-.055em}.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:36px}.section-head p{max-width:440px;line-height:1.7;margin:0;color:#555}.text-link{font-size:12px;font-weight:800;letter-spacing:.04em;border-bottom:1px solid currentColor;padding-bottom:3px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.02em;border:1px solid var(--ink);transition:.2s}.btn:hover{transform:translateY(-2px)}.btn-black{background:var(--ink);color:#fff}.btn-white{background:#fff;color:var(--ink)}
.announce{height:30px;background:var(--yellow);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;letter-spacing:.06em;text-align:center;padding:0 12px}.site-header{position:sticky;top:0;z-index:50;background:rgba(255,253,248,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.header-inner{height:74px;width:min(1360px,calc(100% - 40px));margin:auto;display:grid;grid-template-columns:190px 1fr 260px;align-items:center}.logo{font-size:30px;font-weight:900;letter-spacing:-.055em}.desktop-nav{display:flex;justify-content:center;gap:34px}.desktop-nav a{font-size:12px;font-weight:800}.header-actions{display:flex;justify-content:flex-end;align-items:center;gap:11px}.icon-btn,.menu-btn,.lang-toggle{border:0;background:none;cursor:pointer}.icon-btn{font-size:18px;width:28px;height:28px}.lang-toggle{display:flex;align-items:center;gap:5px;font-size:11px}.lang-toggle b,.lang-toggle em{font-style:normal;font-weight:500;opacity:.38}.lang-toggle .active{font-weight:900;opacity:1}.menu-btn{display:none;font-size:20px}.mobile-nav{display:none}
.hero{overflow:hidden;background:var(--cream);border-bottom:1px solid var(--line)}.hero-grid{min-height:660px;display:grid;grid-template-columns:.88fr 1.12fr;align-items:center;gap:30px}.kicker{font-size:11px;font-weight:900;letter-spacing:.17em;margin-bottom:18px}.hero h1{font-size:clamp(68px,7.4vw,116px);line-height:.79;letter-spacing:-.075em;margin:0 0 28px}.hero-sub{font-size:18px;line-height:1.65;margin:0;max-width:540px}.hero-buttons{display:flex;gap:10px;margin-top:28px}.hero-art{height:590px;position:relative}.product-shot{position:absolute;z-index:4;overflow:hidden;border-radius:24px;background:#fff;box-shadow:0 24px 50px rgba(68,44,38,.12)}.product-shot img{width:100%;height:100%;object-fit:cover}.product-shot.mist{width:290px;height:430px;left:9%;top:85px;transform:rotate(-4deg)}.product-shot.cream{width:320px;height:440px;right:4%;top:35px;transform:rotate(4deg)}.blob{position:absolute;border-radius:45% 55% 58% 42%/58% 44% 56% 42%;filter:saturate(1.08)}.blob-a{width:480px;height:420px;background:var(--pink2);right:-100px;top:40px;transform:rotate(-17deg)}.blob-b{width:380px;height:310px;background:var(--orange);left:8%;bottom:15px;opacity:.88;transform:rotate(19deg)}.blob-c{width:220px;height:220px;background:var(--blue);left:38%;top:-40px}.micro-badge{position:absolute;z-index:6;right:0;bottom:32px;width:150px;height:150px;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;text-align:center;background:var(--yellow);transform:rotate(8deg)}.micro-badge strong{font-size:35px;line-height:.8}.micro-badge span{font-size:9px;font-weight:800;letter-spacing:.09em}
.proof-band{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:28px}.proof-tile{min-height:150px;border:1px solid var(--ink);border-radius:24px;padding:24px;display:flex;flex-direction:column;justify-content:space-between}.proof-tile strong{font-size:46px;line-height:.9;letter-spacing:-.055em}.proof-tile span{font-size:12px;font-weight:800}.proof-tile.pink{background:var(--pink)}.proof-tile.yellow{background:var(--yellow)}.proof-tile.blue{background:var(--blue)}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.shop-card{position:relative;border:1px solid var(--ink);border-radius:28px;overflow:hidden;min-width:0}.color-blue{background:var(--blue)}.color-lav{background:var(--lav)}.color-mint{background:var(--mint)}.rank{position:absolute;z-index:3;top:15px;left:15px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--ink);font-weight:900}.shop-image{height:380px;padding:18px}.shop-image img{width:100%;height:100%;object-fit:cover;border-radius:18px}.shop-info{padding:4px 22px 22px}.shop-info h3{margin:0;font-size:27px}.shop-info p{margin:7px 0 20px;font-size:12px}.shop-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}.shop-bottom b{font-size:13px}.quick{background:var(--ink);color:#fff;border-radius:999px;padding:10px 13px;font-size:10px;font-weight:800}
.concern-section{background:#fff}.concern-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.concern-card{min-height:190px;padding:24px;border-radius:24px;border:1px solid var(--ink);display:flex;flex-direction:column;justify-content:flex-end;position:relative;transition:.2s}.concern-card:hover{transform:translateY(-4px)}.concern-card span{font-size:29px;font-weight:900;letter-spacing:-.05em}.concern-card small{font-size:12px;font-weight:700;margin-top:5px}.concern-card b{position:absolute;right:20px;top:18px;font-size:24px}.c-pink{background:var(--pink)}.c-lav{background:var(--lav)}.c-blue{background:var(--blue)}.c-yellow{background:var(--yellow)}.c-coral{background:var(--coral)}.c-mint{background:var(--mint)}.c-cream{background:var(--cream)}
.ecosystem{background:var(--pink2)}.ecosystem-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.ecosystem-copy h2{font-size:clamp(52px,6vw,92px);line-height:.82}.ecosystem-copy p{font-size:16px;line-height:1.75;max-width:570px;margin:28px 0}.orbit{height:500px;position:relative;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.24)}.orbit:before,.orbit:after{content:"";position:absolute;border:1px solid rgba(17,17,17,.35);border-radius:50%;inset:65px}.orbit:after{inset:130px}.orbit-center{width:155px;height:155px;border-radius:50%;background:var(--pink);display:flex;align-items:center;justify-content:center;flex-direction:column;border:2px solid var(--ink);font-size:36px;font-weight:900;z-index:2}.orbit-center small{font-size:10px;letter-spacing:.14em}.orb{position:absolute;padding:12px 16px;border-radius:999px;border:1px solid var(--ink);background:#fff;font-size:10px;font-weight:900}.o1{top:38px;left:42%}.o2{right:5px;top:45%}.o3{bottom:30px;left:36%}.o4{left:-10px;top:44%}
.science-simple{background:var(--cream)}.science-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.science-card{min-height:340px;border-radius:28px;border:1px solid var(--ink);padding:26px;display:flex;flex-direction:column}.science-card span{width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;border:1px solid var(--ink);font-size:11px;font-weight:900}.science-card h3{font-size:36px;letter-spacing:-.055em;margin:auto 0 12px}.science-card p{font-size:13px;line-height:1.65;margin:0;max-width:310px}.s-pink{background:var(--pink)}.s-yellow{background:var(--yellow)}.s-blue{background:var(--blue)}
.science-proof{background:#fff}.proof-head{display:flex;align-items:end;justify-content:space-between;border-bottom:2px solid var(--ink);padding-bottom:22px;margin-bottom:20px}.proof-head span{font-size:clamp(36px,4.8vw,68px);font-weight:900;letter-spacing:-.06em}.proof-head p{max-width:380px;font-size:12px;line-height:1.6}.big-proof-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--ink)}.big-proof{min-height:240px;padding:25px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);display:flex;flex-direction:column;justify-content:space-between}.big-proof b{font-size:48px;letter-spacing:-.06em}.big-proof span{font-size:12px;line-height:1.5;font-weight:700}.legal-note{font-size:10px;color:#777;line-height:1.6;margin-top:14px}
.routine{background:var(--blue)}.routine h2{margin-bottom:34px}.routine-grid{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--ink);border-radius:28px;overflow:hidden}.routine-step{min-height:190px;padding:22px;border-right:1px solid var(--ink);display:flex;flex-direction:column}.routine-step:last-child{border-right:0}.routine-step i{font-style:normal;width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center;border:1px solid var(--ink);font-weight:900}.routine-step strong{font-size:22px;margin-top:auto}.routine-step span{font-size:11px;margin-top:6px}
.life-science{background:#111;color:#fff}.life-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.life-photo{height:560px;border-radius:28px;overflow:hidden}.life-photo img{width:100%;height:100%;object-fit:cover}.life-copy h2{font-size:clamp(52px,6vw,88px);line-height:.82;margin:16px 0 28px;letter-spacing:-.07em}.life-copy p{font-size:15px;line-height:1.8;color:#ddd;max-width:560px}.eyebrow.light{color:var(--yellow)}.life-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}.life-tags span{border:1px solid #fff;border-radius:999px;padding:9px 12px;font-size:10px;font-weight:800}
.reviews{background:var(--paper)}.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.review-grid blockquote{margin:0;padding:28px;border:1px solid var(--ink);border-radius:24px;background:#fff;font-weight:900}.review-grid p{font-size:16px;line-height:1.65;font-weight:500}.review-grid cite{font-style:normal;font-size:10px;letter-spacing:.1em}
.final-cta{background:var(--pink);padding:90px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}.final-cta h2{font-size:clamp(58px,8vw,110px);line-height:.78;letter-spacing:-.075em;margin:0}.final-cta p{font-size:15px;margin:25px 0}
.footer{background:var(--cream);padding:62px 0 30px}.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,.7fr) 1.2fr;gap:32px}.footer-logo{font-size:32px;font-weight:900;letter-spacing:-.06em}.footer h4{font-size:11px;letter-spacing:.12em;margin:0 0 14px}.footer a,.footer p{display:block;font-size:11px;line-height:1.9;color:#555}.social{display:flex;gap:12px;margin-top:14px}.email-box{display:flex;border-bottom:1px solid var(--ink);margin-top:16px}.email-box input{width:100%;border:0;background:transparent;padding:9px 0;outline:0}.email-box button{border:0;background:transparent;font-size:18px}.footer-bottom{border-top:1px solid var(--line);margin-top:42px;padding-top:22px;display:flex;justify-content:space-between;font-size:9px;color:#777}
.reveal{opacity:0;transform:translateY(18px);transition:.6s ease}.reveal.on{opacity:1;transform:none}
@media(max-width:1024px){.header-inner{grid-template-columns:160px 1fr 200px}.desktop-nav{gap:18px}.hero-grid{grid-template-columns:1fr}.hero-copy{padding-top:70px}.hero-art{height:520px}.proof-band{margin-top:20px}.ecosystem-grid,.life-grid{grid-template-columns:1fr}.orbit{max-width:600px;margin:auto;width:100%}.life-photo{height:460px}.footer-grid{grid-template-columns:1.4fr 1fr 1fr}.footer-grid>div:nth-child(4),.footer-grid>.newsletter{display:none}}
@media(max-width:760px){.wrap{width:calc(100% - 28px)}.section{padding:68px 0}.announce{font-size:8px}.header-inner{height:62px;width:calc(100% - 24px);grid-template-columns:42px 1fr auto}.menu-btn{display:block}.logo{font-size:24px;text-align:center}.desktop-nav,.header-actions .icon-btn:nth-child(2){display:none}.header-actions{gap:7px}.lang-toggle{font-size:9px}.mobile-nav{position:absolute;left:0;right:0;top:62px;background:var(--pink);padding:22px 20px 28px;border-bottom:1px solid var(--ink);display:none;grid-template-columns:1fr 1fr;gap:8px;z-index:60}.mobile-nav.open{display:grid}.mobile-nav a{padding:15px;border:1px solid var(--ink);border-radius:16px;background:#fff;font-size:11px;font-weight:800}.hero-grid{min-height:auto}.hero-copy{padding-top:55px}.hero h1{font-size:66px}.hero-sub{font-size:14px}.hero-buttons{flex-direction:column}.hero-buttons .btn{width:100%}.hero-art{height:410px;margin-top:5px}.product-shot.mist{width:48%;height:310px;left:1%;top:75px}.product-shot.cream{width:52%;height:320px;right:1%;top:20px}.micro-badge{width:100px;height:100px;right:4px;bottom:8px}.micro-badge strong{font-size:25px}.proof-band{grid-template-columns:1fr;gap:8px}.proof-tile{min-height:110px}.proof-tile strong{font-size:38px}.section-head{align-items:flex-start;flex-direction:column;gap:12px}.section h2,.section-head h2{font-size:44px}.product-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}.shop-card{min-width:84%;scroll-snap-align:start}.shop-image{height:340px}.concern-grid{grid-template-columns:1fr 1fr}.concern-card{min-height:150px;padding:17px}.concern-card span{font-size:20px}.ecosystem-grid{gap:35px}.ecosystem-copy h2{font-size:55px}.orbit{height:340px}.orbit:before{inset:40px}.orbit:after{inset:90px}.orbit-center{width:110px;height:110px;font-size:26px}.orb{font-size:8px;padding:8px 10px}.science-cards{grid-template-columns:1fr}.science-card{min-height:230px}.science-card h3{font-size:30px}.proof-head{align-items:flex-start;flex-direction:column;gap:15px}.proof-head span{font-size:44px}.big-proof-grid{grid-template-columns:1fr 1fr}.big-proof{min-height:180px}.big-proof b{font-size:38px}.routine-grid{display:flex;overflow-x:auto;border:0;border-radius:0;gap:8px}.routine-step{min-width:180px;border:1px solid var(--ink)!important;border-radius:20px;background:rgba(255,255,255,.25)}.life-photo{height:350px}.life-copy h2{font-size:58px}.review-grid{display:flex;overflow-x:auto}.review-grid blockquote{min-width:85%}.final-cta{padding:72px 0}.final-cta h2{font-size:62px}.footer-grid{grid-template-columns:1fr 1fr;gap:26px}.footer-brand-col{grid-column:1/-1}.footer-grid>div:nth-child(4){display:block}.footer-bottom{flex-direction:column;gap:7px}}
/* ===== v3 linked subpages / admin-driven content ===== */
a.shop-image{display:block}.life-btn{margin-top:26px;display:inline-flex}.subpage{min-height:60vh}.subhero{padding:72px 0 54px;border-bottom:1px solid var(--ink)}.subhero.peach{background:#ffe5d5}.subhero.pink{background:var(--pink)}.subhero.yellow{background:var(--yellow)}.subhero.mint{background:var(--mint)}.subhero.dark{background:#111;color:#fff}.subhero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:55px;align-items:center}.subhero h1{font-size:clamp(58px,7vw,110px);line-height:.84;letter-spacing:-.075em;margin:16px 0 24px}.subhero p{max-width:650px;font-size:16px;line-height:1.75}.subhero-image{height:440px;border-radius:30px;overflow:hidden;background:rgba(255,255,255,.65);border:1px solid rgba(17,17,17,.15)}.subhero-image img{width:100%;height:100%;object-fit:contain}.subhero.dark .subhero-image{background:#222;border-color:#444}
.catalog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.catalog-card{border:1px solid var(--ink);border-radius:26px;overflow:hidden;transition:.25s ease}.catalog-card:hover{transform:translateY(-4px)}.catalog-card>a{display:block;color:inherit;text-decoration:none}.catalog-image{height:390px;background:rgba(255,255,255,.55);padding:20px}.catalog-image img{width:100%;height:100%;object-fit:contain}.catalog-copy{padding:22px}.catalog-copy>span{font-size:9px;font-weight:900;letter-spacing:.1em}.catalog-copy h3{font-size:27px;margin:8px 0 6px;letter-spacing:-.05em}.catalog-copy p{font-size:12px;min-height:38px}.catalog-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(17,17,17,.25);padding-top:14px;margin-top:18px}.catalog-bottom strong{font-size:10px}
.filter-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}.filter-pills a{border:1px solid var(--ink);border-radius:999px;padding:10px 15px;background:#fff;color:var(--ink);font-size:10px;font-weight:900;text-decoration:none}.filter-pills a.active{background:var(--ink);color:#fff}.reviews-page-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.review-detail-card{border:1px solid var(--ink);border-radius:24px;padding:24px;background:#fff}.review-top{display:flex;justify-content:space-between;gap:12px;font-size:10px}.stars{color:#ff2f72;letter-spacing:.08em}.product-name{font-weight:900}.review-detail-card h3{font-size:21px;margin:18px 0 10px}.review-detail-card p{font-size:14px;line-height:1.65}.review-detail-card small{color:#777}.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:18px}.ba-grid figure{margin:0;position:relative;height:180px;border-radius:14px;overflow:hidden;background:#f4f4f4}.ba-grid img{width:100%;height:100%;object-fit:cover}.ba-grid figcaption{position:absolute;bottom:6px;left:6px;background:#111;color:#fff;font-size:8px;padding:4px 6px;border-radius:4px}.empty-state{grid-column:1/-1;border:1px dashed #aaa;border-radius:20px;padding:50px;text-align:center;color:#777}
.science-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.sd-card{border:1px solid var(--ink);border-radius:28px;padding:28px;min-height:360px}.sd-card>span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--ink);font-size:10px;font-weight:900}.sd-card h2{font-size:34px;margin:110px 0 12px}.sd-card p{font-size:13px;line-height:1.7}.about-story{display:grid;grid-template-columns:1fr 1.3fr;gap:60px}.about-story h2{font-size:clamp(48px,5vw,72px);line-height:.9}.story-steps{border-top:1px solid var(--ink)}.story-steps>div{display:grid;grid-template-columns:60px 180px 1fr;gap:16px;padding:24px 0;border-bottom:1px solid var(--ink);align-items:start}.story-steps b{font-size:12px}.story-steps strong{font-size:14px}.story-steps p{margin:0;font-size:13px;line-height:1.65}.product-detail-hero{padding:70px 0;border-bottom:1px solid var(--ink)}.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.pd-image{height:620px;background:rgba(255,255,255,.6);border:1px solid var(--ink);border-radius:32px;overflow:hidden}.pd-image img{width:100%;height:100%;object-fit:contain}.pd-copy h1{font-size:clamp(60px,7vw,100px);line-height:.85;letter-spacing:-.07em;margin:14px 0 20px}.pd-copy p{font-size:17px}.pd-price{display:block;font-size:28px;margin:24px 0}.product-editor-content{max-width:900px;font-size:16px;line-height:1.8}.product-editor-content img{max-width:100%;height:auto}
@media(max-width:760px){.subhero{padding:42px 0}.subhero-grid,.pd-grid,.about-story{grid-template-columns:1fr}.subhero h1{font-size:58px}.subhero-image{height:300px}.catalog-grid,.reviews-page-grid,.science-detail-grid{grid-template-columns:1fr}.catalog-image{height:330px}.science-detail-grid{gap:9px}.sd-card{min-height:240px}.sd-card h2{margin-top:55px}.story-steps>div{grid-template-columns:45px 1fr}.story-steps p{grid-column:2}.pd-image{height:420px}.pd-copy h1{font-size:58px}.ba-grid figure{height:150px}}
/* ===== v4 page-by-page editable media/copy ===== */
.editable-media-block{height:500px;border:1px solid var(--ink);border-radius:30px;overflow:hidden;background:#fff}.editable-media-block img{width:100%;height:100%;object-fit:contain}.editable-media-block.compact{height:320px;margin-bottom:18px}.home-science-layout{display:grid;grid-template-columns:.8fr 1.7fr;gap:14px;align-items:stretch}.routine-intro{display:grid;grid-template-columns:1fr 220px;gap:30px;align-items:end;margin-bottom:30px}.routine-intro p{max-width:680px;line-height:1.7}.routine-thumb{height:160px;border:1px solid var(--ink);border-radius:22px;overflow:hidden;background:rgba(255,255,255,.4)}.routine-thumb img{width:100%;height:100%;object-fit:contain}.final-cta-grid{display:grid;grid-template-columns:1.25fr .55fr;gap:40px;align-items:center}.final-cta-image{height:300px;border:1px solid var(--ink);border-radius:30px;overflow:hidden;background:rgba(255,255,255,.5)}.final-cta-image img{width:100%;height:100%;object-fit:contain}.page-edit-section.peach-soft{background:#ffe8da}.page-edit-section.pink-soft{background:#ffe3ec}.page-edit-section.mint-soft{background:#e3f7ed}.page-edit-section.white{background:#fff}.page-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}.page-edit-grid.reverse .page-edit-media{order:2}.page-edit-media{height:480px;border:1px solid var(--ink);border-radius:30px;overflow:hidden;background:rgba(255,255,255,.7)}.page-edit-media img{width:100%;height:100%;object-fit:contain}.page-edit-copy h2{font-size:clamp(46px,5vw,76px);line-height:.9;letter-spacing:-.06em;margin:10px 0 22px}.page-edit-copy p{font-size:15px;line-height:1.8;margin:0 0 26px}.sd-image{height:150px;margin:-10px -10px 22px;border:1px solid rgba(17,17,17,.2);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.65)}.sd-image img{width:100%;height:100%;object-fit:cover}.sd-card h2{margin:34px 0 12px}.about-story-v4{display:grid;grid-template-columns:.8fr 1.2fr;gap:55px;align-items:start}.about-story-media{height:590px;border-radius:30px;overflow:hidden;border:1px solid var(--ink);background:#f5f5f5;position:sticky;top:120px}.about-story-media img{width:100%;height:100%;object-fit:cover}.about-story-copy h2{font-size:clamp(48px,5vw,76px);line-height:.9;letter-spacing:-.055em;margin:12px 0 20px}.about-story-copy>p{font-size:15px;line-height:1.8;margin-bottom:30px}
@media(max-width:1024px){.home-science-layout{grid-template-columns:1fr}.final-cta-grid,.page-edit-grid,.about-story-v4{grid-template-columns:1fr}.page-edit-grid.reverse .page-edit-media{order:0}.about-story-media{position:static;height:430px}}
@media(max-width:760px){.editable-media-block{height:330px}.editable-media-block.compact{height:250px}.routine-intro{grid-template-columns:1fr}.routine-thumb{height:200px}.final-cta-grid{grid-template-columns:1fr}.final-cta-image{height:230px}.page-edit-media{height:320px}.page-edit-copy h2{font-size:46px}.sd-image{height:180px}.about-story-media{height:330px}}
/* ===== v5 SmartStore / review / gallery additions ===== */
.smartstore-buy{display:flex;align-items:center;justify-content:center;margin:0 18px 18px;padding:12px 15px;border:1px solid #111;border-radius:999px;background:#111;color:#fff!important;font-size:12px;font-weight:800;letter-spacing:.02em;text-decoration:none;transition:.2s ease}
.smartstore-buy:hover{transform:translateY(-1px);opacity:.86}.catalog-detail-link{display:block;color:inherit;text-decoration:none}.rating-chip{display:inline-flex;margin-top:10px;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.72);font-size:11px;font-weight:800}.review-source-note{display:flex;gap:18px;align-items:flex-start;margin:25px 0 36px;padding:20px 22px;border-radius:20px;background:#111;color:#fff}.review-source-note strong{white-space:nowrap;font-size:13px}.review-source-note span{font-size:13px;line-height:1.65;opacity:.82}.product-review-section{margin:0 0 42px}.product-review-head{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px;border-radius:28px;margin-bottom:18px}.product-review-product{display:flex;gap:20px;align-items:center}.product-review-product img{width:108px;height:108px;object-fit:contain;background:rgba(255,255,255,.58);border-radius:22px}.product-review-product h2{margin:3px 0 7px;font-size:28px}.product-review-product p{margin:0;font-size:13px}.product-review-actions{display:flex;gap:8px;flex-wrap:wrap}.review-detail-card .verified-badge{display:inline-flex;padding:5px 8px;border-radius:999px;background:#111;color:#fff;font-size:9px;font-weight:900;letter-spacing:.08em}.review-detail-card .review-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.review-detail-card .stars{font-weight:900;color:#ff4f82}.review-meta{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:15px;padding-top:12px;border-top:1px solid rgba(0,0,0,.08);font-size:11px;color:#555}.review-meta a{color:#111;text-decoration:underline;text-underline-offset:3px}.pd-gallery{min-width:0}.pd-thumbs{display:flex;gap:10px;margin-top:12px}.pd-thumb{width:78px;height:78px;border:2px solid transparent;background:rgba(255,255,255,.62);border-radius:16px;padding:5px;cursor:pointer}.pd-thumb.active{border-color:#111}.pd-thumb img{width:100%;height:100%;object-fit:contain}.pd-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.pd-rating{display:inline-flex;margin-top:12px;color:#111;font-size:12px;font-weight:800;text-decoration:none}.empty-state .btn{margin-top:12px}
@media(max-width:760px){.review-source-note{display:block}.review-source-note strong{display:block;margin-bottom:8px}.product-review-head{display:block}.product-review-product{align-items:flex-start}.product-review-actions{margin-top:18px}.product-review-product h2{font-size:22px}.product-review-product img{width:88px;height:88px}.smartstore-buy{margin:0 12px 14px}.pd-thumb{width:64px;height:64px}}
/* ===== v6 uploaded SmartStore Excel reviews ===== */
.imported-review-grid blockquote{position:relative}.imported-review-grid .review-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.imported-review-grid .verified-badge{background:#111;color:#fff;border-radius:999px;padding:5px 8px;font-size:8px;letter-spacing:.08em}.review-card-link{display:inline-block;margin-top:13px;color:#111;font-size:10px;font-weight:900;text-decoration:underline;text-underline-offset:4px}.review-product-summary-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.review-product-summary{background:var(--review-color,#f7f7f7);border:1px solid #111;border-radius:28px;padding:24px}.rps-head{display:grid;grid-template-columns:130px 1fr;gap:18px;align-items:center}.rps-head img{width:130px;height:130px;object-fit:contain;background:rgba(255,255,255,.65);border-radius:22px}.rps-head h2{font-size:28px;margin:4px 0 8px}.rps-head strong{font-size:14px}.rps-head p{font-size:11px;margin:4px 0 0}.rps-samples{margin:18px 0}.rps-samples p{margin:7px 0;padding:12px 14px;background:rgba(255,255,255,.62);border-radius:14px;font-size:12px;line-height:1.55}.review-badges{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.review-badges span{display:inline-flex;padding:5px 8px;background:#f2f2f2;border-radius:999px;font-size:9px;font-weight:800}.review-pagination{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;margin:34px 0 5px}.review-pagination a{display:inline-flex;min-width:38px;height:38px;align-items:center;justify-content:center;padding:0 11px;border:1px solid #111;border-radius:999px;color:#111;background:#fff;text-decoration:none;font-size:11px;font-weight:900}.review-pagination a.active{background:#111;color:#fff}.filter-pills a small{opacity:.65;margin-left:4px}
@media(max-width:760px){.review-product-summary-grid{grid-template-columns:1fr}.rps-head{grid-template-columns:90px 1fr}.rps-head img{width:90px;height:90px}.rps-head h2{font-size:22px}.review-pagination{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:8px}.review-pagination a{flex:0 0 auto}}
/* ========================================================================== */
/* v7 — bold ingredient-education commerce UI */
/* Reference direction: minimal skincare commerce, not a replica of any site. */
/* ========================================================================== */
:root{
--ink:#0a0a0a;
--paper:#ffffff;
--cream:#f6f5f1;
--line:#111111;
--soft-line:#d7d7d3;
--lime:#c8ff5a;
--blue:#b9ddff;
--pink:#ffd2e5;
--lav:#d8d0ff;
--yellow:#ffe66e;
--mint:#c9f2df;
--coral:#ffae98;
--radius:0px;
}
body{background:#fff;color:#0a0a0a;letter-spacing:-.018em;font-family:Arial,"Noto Sans KR","Apple SD Gothic Neo",sans-serif}
.wrap{width:min(1380px,calc(100% - 56px))}
.section{padding:94px 0}
.eyebrow{font-size:12px;letter-spacing:.07em;margin:0 0 12px;font-weight:900;text-transform:uppercase}
.section h2,.section-head h2{font-size:clamp(42px,5vw,78px);line-height:.92;letter-spacing:-.065em;font-weight:900}
.section-head{align-items:flex-end;border-top:2px solid #111;padding-top:18px;margin-bottom:34px}
.section-head p{max-width:560px;color:#222;font-size:14px;line-height:1.55;margin-top:13px}
.section-head>div{max-width:880px}
.text-link{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 18px;border:1.5px solid #111;border-bottom:1.5px solid #111;background:#fff;font-size:11px;letter-spacing:.03em;font-weight:900;white-space:nowrap}
.text-link:hover{background:#111;color:#fff}
.btn{border-radius:0;border:1.5px solid #111;min-height:48px;padding:0 22px;font-size:11px;letter-spacing:.04em;font-weight:900;text-transform:uppercase}
.btn:hover{transform:none;background:var(--lime);color:#111}
.btn-black{background:#111;color:#fff}.btn-white,.btn-outline{background:#fff;color:#111}
.reveal{transform:translateY(10px);opacity:0;transition:.4s ease}.reveal.on{transform:none;opacity:1}
/* announcement + navigation */
.announce{height:auto;min-height:34px;background:#111;color:#fff;border:0;padding:0}
.announce-inner{width:min(1450px,calc(100% - 36px));min-height:34px;margin:auto;display:flex;align-items:center;justify-content:center;gap:18px;font-size:10px;font-weight:800;letter-spacing:.035em}
.announce-mark{color:var(--lime);font-weight:900;letter-spacing:.1em}.announce a{margin-left:auto;color:#fff;text-decoration:underline;text-underline-offset:3px}
.site-header{background:#fff;border-bottom:2px solid #111;backdrop-filter:none}
.header-inner{height:76px;width:min(1450px,calc(100% - 36px));grid-template-columns:210px 1fr auto}
.logo{font-size:32px;font-weight:900;letter-spacing:-.065em}
.desktop-nav{justify-content:flex-start;gap:28px}.desktop-nav a{font-size:12px;font-weight:900;letter-spacing:-.01em;padding:29px 0 25px;border-bottom:4px solid transparent}.desktop-nav a:hover{border-color:#111}
.header-actions{gap:12px}.header-text-link,.icon-btn{height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #111;background:#fff;padding:0 13px;font-size:10px;font-weight:900;width:auto}.header-text-link:hover,.icon-btn:hover{background:#111;color:#fff}.lang-toggle{height:38px;padding:0 10px;border:1px solid #111}.menu-btn{font-weight:900}
.mobile-nav{background:#fff;border-bottom:2px solid #111}.mobile-nav-head{padding:20px;border-bottom:1px solid #111;font-size:24px;font-weight:900}.mobile-nav-head span{display:block;font-size:9px;letter-spacing:.08em;margin-top:4px}.mobile-nav a{padding:18px 20px;border-bottom:1px solid #111;font-size:20px;font-weight:900}
/* hero */
.inkey-hero{background:#fff;border-bottom:2px solid #111}
.inkey-hero .hero-grid{min-height:690px;grid-template-columns:.94fr 1.06fr;gap:0}
.inkey-hero .hero-copy{padding:64px 56px 64px 0;align-self:stretch;display:flex;flex-direction:column;justify-content:center;border-right:2px solid #111}
.inkey-hero .kicker{font-size:11px;letter-spacing:.09em;margin-bottom:24px;font-weight:900}
.inkey-hero h1{font-size:clamp(70px,7vw,124px);line-height:.78;letter-spacing:-.085em;margin:0 0 30px;text-transform:uppercase;max-width:720px}
.inkey-hero .hero-sub{font-size:18px;line-height:1.45;max-width:600px}
.inkey-hero .hero-buttons{margin-top:34px;gap:8px}.inkey-hero .btn{min-width:190px}
.hero-mini-proof{display:flex;flex-wrap:wrap;gap:7px;margin-top:38px}.hero-mini-proof span{border:1px solid #111;padding:7px 9px;font-size:9px;font-weight:900;letter-spacing:.05em;background:#fff}
.inkey-hero .hero-art{height:690px;background:var(--blue);overflow:hidden;position:relative}
.hero-panel-label{position:absolute;top:18px;left:20px;border:1px solid #111;background:#fff;padding:8px 10px;font-size:10px;font-weight:900;letter-spacing:.06em;z-index:8}
.inkey-hero .product-shot{border:0;border-radius:0;box-shadow:none;background:transparent;overflow:visible}
.inkey-hero .product-shot img{object-fit:contain;mix-blend-mode:multiply}
.inkey-hero .product-shot.mist{width:44%;height:66%;left:6%;top:18%;transform:rotate(-3deg)}
.inkey-hero .product-shot.cream{width:48%;height:68%;right:4%;top:12%;transform:rotate(3deg)}
.inkey-hero .micro-badge{width:145px;height:145px;right:20px;bottom:24px;border:2px solid #111;background:var(--lime);border-radius:50%;transform:none}.inkey-hero .micro-badge strong{font-size:33px}.inkey-hero .micro-badge span{font-size:8px}
/* proof metrics */
.proof-band{margin-top:0;gap:0;width:min(1380px,calc(100% - 56px));border-left:2px solid #111;border-bottom:2px solid #111}
.proof-tile,.proof-tile.pink,.proof-tile.yellow,.proof-tile.blue{min-height:164px;border:0;border-right:2px solid #111;border-top:0;border-radius:0;background:#fff;padding:20px 22px;display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto 1fr;align-items:end;gap:0 12px}
.proof-tile small{align-self:start;font-size:10px;font-weight:900}.proof-tile strong{font-size:58px;line-height:.8;grid-row:2;grid-column:1/3}.proof-tile span{grid-column:2;grid-row:1;font-size:11px;line-height:1.3;text-align:right;align-self:start}
.proof-tile:nth-child(1){background:var(--pink)}.proof-tile:nth-child(2){background:var(--lime)}.proof-tile:nth-child(3){background:var(--blue)}
/* bestselling product cards */
.bestsellers{background:#fff}.inkey-products{grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid #111;border-left:2px solid #111}
.shop-card,.inkey-products .shop-card{background:#fff!important;border:0;border-right:2px solid #111;border-bottom:2px solid #111;border-radius:0;overflow:hidden;min-width:0}
.product-topline{min-height:42px;border-bottom:1px solid #111;padding:8px 12px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:9px;font-weight:900;text-transform:uppercase}.product-topline a{text-decoration:underline;text-underline-offset:2px}
.rank{position:static;width:auto;height:auto;border:0;border-radius:0;background:none;display:block;font-size:10px}
.shop-image{height:360px;padding:20px;background:#f5f5f2;border-bottom:1px solid #111}.shop-image img{border-radius:0;object-fit:contain;mix-blend-mode:multiply}
.shop-info{padding:18px 16px 16px;display:flex;flex-direction:column;min-height:250px}.shop-info h3{font-size:23px;line-height:1.05;letter-spacing:-.04em}.shop-info p{font-size:12px;line-height:1.5;margin:10px 0 14px}.rating-chip{background:none;border:0;border-radius:0;padding:0;margin:0 0 12px;text-decoration:underline;text-underline-offset:3px}
.shop-bottom{margin-top:auto;display:grid;grid-template-columns:auto 1fr;align-items:center}.shop-bottom b{font-size:15px}.quick{border-radius:0;padding:12px 10px;background:#111;color:#fff;text-align:center;font-size:10px;border:1px solid #111}.quick:hover{background:var(--lime);color:#111}
/* utility cards */
.utility-section{padding-top:0}.utility-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid #111;border-left:2px solid #111}.utility-card{min-height:360px;border-right:2px solid #111;border-bottom:2px solid #111;padding:24px;display:flex;flex-direction:column;transition:.15s}.utility-card:hover{filter:brightness(.96)}.utility-card>span{font-size:10px;font-weight:900;letter-spacing:.05em}.utility-card h3{font-size:clamp(34px,3.4vw,54px);line-height:.9;letter-spacing:-.06em;margin:auto 0 14px}.utility-card p{font-size:13px;line-height:1.5;max-width:360px;margin:0 0 26px}.utility-card b{font-size:12px;border-bottom:2px solid #111;align-self:flex-start}.utility-lime{background:var(--lime)}.utility-blue{background:var(--blue)}.utility-pink{background:var(--pink)}
/* concern grid */
.concern-section{background:#f5f5f2;border-top:2px solid #111;border-bottom:2px solid #111}.concern-grid{grid-template-columns:repeat(7,1fr);gap:0;border-top:2px solid #111;border-left:2px solid #111}.concern-card,.c-pink,.c-lav,.c-blue,.c-yellow,.c-coral,.c-mint,.c-cream{background:#fff;min-height:180px;border:0;border-right:2px solid #111;border-bottom:2px solid #111;border-radius:0;padding:18px;justify-content:flex-end}.concern-card:hover{transform:none;background:var(--lime)}.concern-card span{font-size:24px}.concern-card small{font-size:11px}.concern-card b{top:16px;right:16px}
/* editorial split */
.editorial-split{background:#fff}.ecosystem-grid{gap:0;grid-template-columns:1fr 1fr;border:2px solid #111;align-items:stretch}.ecosystem-copy{padding:46px;display:flex;flex-direction:column;justify-content:center}.ecosystem-copy h2{font-size:clamp(48px,5.5vw,84px);line-height:.88;margin:6px 0 20px}.ecosystem-copy p{font-size:15px;line-height:1.6;margin:0 0 30px}.editable-media-block{height:560px;border:0;border-left:2px solid #111;border-radius:0;background:#f5f5f2}.editable-media-block img{object-fit:cover}.ecosystem .text-link{align-self:flex-start}
/* science / lab */
.science-simple{background:#111;color:#fff;border-top:0}.science-simple .section-head{border-color:#fff}.section-head.invert p{color:#ddd}.science-simple .text-link{border-color:#fff;color:#fff;background:transparent}.science-simple .text-link:hover{background:#fff;color:#111}.home-science-layout{grid-template-columns:.9fr 1.6fr;gap:0;border:2px solid #fff}.science-simple .editable-media-block.compact{height:460px;margin:0;border:0;border-right:2px solid #fff;background:#222}.science-simple .editable-media-block.compact img{object-fit:cover}.science-cards{gap:0;grid-template-columns:repeat(3,1fr)}.science-card,.s-pink,.s-yellow,.s-blue{border:0;border-right:1px solid #fff;border-radius:0;background:#111!important;min-height:460px;padding:22px}.science-card:last-child{border-right:0}.science-card span{border-color:#fff;background:#fff;color:#111}.science-card h3{font-size:34px}.science-card p{color:#ddd}.science-card:hover{background:#222!important}
/* proof */
.science-proof{background:#fff}.proof-head{border-bottom:2px solid #111}.proof-head span{font-size:clamp(40px,5vw,74px)}.big-proof-grid{border-left:2px solid #111;border-top:2px solid #111}.big-proof{border-right:2px solid #111;border-bottom:2px solid #111;min-height:220px}.big-proof b{font-size:58px}.big-proof:nth-child(2){background:var(--lime)}.big-proof:nth-child(3){background:var(--blue)}
/* routine */
.routine{background:#f5f5f2;border-top:2px solid #111;border-bottom:2px solid #111}.routine-intro{grid-template-columns:1fr 340px;align-items:stretch}.routine-intro h2{font-size:clamp(44px,5vw,76px);line-height:.9;margin:0 0 16px}.routine-thumb{height:240px;border:2px solid #111;border-radius:0;background:#fff}.routine-grid{border:2px solid #111;border-radius:0}.routine-step{min-height:190px;border-right:2px solid #111;padding:16px}.routine-step i{width:auto;height:auto;border:0;border-radius:0;background:none;justify-content:flex-start;font-size:11px}.routine-step strong{font-size:22px}.routine-step:hover{background:var(--lime)}
/* about */
.life-science{background:#111;color:#fff}.life-grid{gap:0;border:2px solid #fff;align-items:stretch}.life-photo{height:590px;border-radius:0}.life-copy{padding:46px}.life-copy h2{font-size:clamp(48px,5.5vw,84px);line-height:.86}.eyebrow.light{color:var(--lime)}.life-tags span{border-radius:0;padding:8px 10px;font-size:9px}.life-science .btn-white{margin-top:24px}
/* reviews */
.inkey-reviews{background:#fff}.imported-review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid #111;border-left:2px solid #111}.imported-review-grid blockquote{margin:0;border:0;border-right:2px solid #111;border-bottom:2px solid #111;border-radius:0;padding:24px;min-height:330px;display:flex;flex-direction:column;background:#fff}.imported-review-grid blockquote:nth-child(2n){background:#f5f5f2}.imported-review-grid blockquote p{font-size:18px;line-height:1.45;letter-spacing:-.03em;margin:28px 0 22px}.imported-review-grid .verified-badge{border-radius:0;background:var(--lime);color:#111;border:1px solid #111}.imported-review-grid .stars{color:#111}.imported-review-grid cite{margin-top:auto;font-size:10px;font-style:normal}.review-card-link{font-size:10px;text-decoration:underline;margin-top:10px}
/* final CTA */
.final-cta{background:var(--lime);border-top:2px solid #111;border-bottom:2px solid #111;padding:0}.final-cta-grid{grid-template-columns:1.25fr .75fr;gap:0;align-items:stretch}.final-cta-grid>div:first-child{padding:64px 50px 64px 0;display:flex;flex-direction:column;justify-content:center}.final-cta h2{font-size:clamp(50px,6vw,88px);line-height:.86;letter-spacing:-.07em;margin:8px 0 20px}.final-cta p{max-width:620px;line-height:1.6}.final-cta .btn{align-self:flex-start;margin-top:14px}.final-cta-image{height:430px;border:0;border-left:2px solid #111;border-radius:0;background:#fff}.final-cta-image img{object-fit:cover}
/* footer */
.footer{background:#fff;color:#111;border-top:0}.footer-join{background:#111;color:#fff;border-bottom:2px solid #111;padding:34px 0}.footer-join .wrap{display:grid;grid-template-columns:1.4fr .8fr;align-items:end;gap:40px}.footer-join span{font-size:10px;font-weight:900;letter-spacing:.08em;color:var(--lime)}.footer-join h3{font-size:32px;line-height:1;margin:8px 0 0;max-width:700px}.email-box{display:flex;border:1.5px solid currentColor}.email-box input{height:48px;flex:1;border:0;background:transparent;color:inherit;padding:0 12px;min-width:0}.email-box button{border:0;border-left:1.5px solid currentColor;background:var(--lime);color:#111;font-size:10px;font-weight:900;padding:0 16px}.footer-grid{grid-template-columns:1.4fr repeat(3,1fr);padding:44px 0}.footer-grid h4{font-size:10px;letter-spacing:.08em}.footer-grid a{display:block;margin:8px 0;font-size:12px}.footer-logo{font-size:32px;font-weight:900}.footer-brand-col p{font-size:12px;max-width:260px}.social{display:flex;gap:12px}.footer-bottom{border-top:2px solid #111;padding:16px 0;font-size:10px;display:flex;justify-content:space-between}
/* subpages — same design system */
.subpage{background:#fff}.subhero{padding:58px 0;border-bottom:2px solid #111;background:#fff!important;color:#111!important}.subhero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:0;border:2px solid #111}.subhero-grid>div:first-child{padding:42px}.subhero h1{font-size:clamp(62px,7vw,110px);line-height:.8;letter-spacing:-.075em;margin:10px 0 18px;text-transform:uppercase}.subhero p{font-size:15px;line-height:1.6;max-width:650px}.subhero-image{height:480px;border-left:2px solid #111;background:var(--blue);overflow:hidden}.subhero-image img{width:100%;height:100%;object-fit:cover}.subhero.dark{background:#111!important;color:#fff!important}.subhero.dark .subhero-grid{border-color:#fff}.subhero.dark .subhero-image{border-color:#fff}.subhero.dark .eyebrow{color:var(--lime)}
.filter-pills{display:flex;gap:6px;flex-wrap:wrap;margin:20px 0 34px}.filter-pills a{border:1.5px solid #111;border-radius:0;padding:10px 13px;background:#fff;font-size:10px;font-weight:900}.filter-pills a.active,.filter-pills a:hover{background:#111;color:#fff}.catalog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid #111;border-left:2px solid #111}.catalog-card{border:0;border-right:2px solid #111;border-bottom:2px solid #111;border-radius:0;background:#fff!important;overflow:hidden}.catalog-image{height:340px;background:#f5f5f2;border-bottom:1px solid #111}.catalog-image img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.catalog-copy{padding:16px;min-height:210px}.catalog-copy h3{font-size:21px;line-height:1.05;margin:0 0 8px}.catalog-copy p{font-size:11px;line-height:1.5}.catalog-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:14px}.smartstore-buy{border-radius:0;margin:0;border:0;border-top:1px solid #111;padding:13px 15px}.catalog-detail-link{display:block}.page-edit-section{border-top:2px solid #111;background:#f5f5f2!important}.page-edit-grid{gap:0;border:2px solid #111}.page-edit-media{height:520px;border:0;border-radius:0;background:#fff}.page-edit-copy{padding:44px}.page-edit-copy h2{font-size:clamp(46px,5vw,76px)}
/* reviews page */
.review-source-note{border-radius:0;background:#111;color:#fff}.review-product-summary-grid{grid-template-columns:repeat(2,1fr);gap:0;border-top:2px solid #111;border-left:2px solid #111}.review-product-summary{background:#fff!important;border:0;border-right:2px solid #111;border-bottom:2px solid #111;border-radius:0;padding:20px}.rps-head img{border-radius:0;background:#f5f5f2}.rps-samples p{border-radius:0;background:#f5f5f2}.product-review-head{border:2px solid #111;border-radius:0;background:#f5f5f2!important}.product-review-product img{border-radius:0}.reviews-page-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid #111;border-left:2px solid #111}.review-detail-card{border:0!important;border-right:2px solid #111!important;border-bottom:2px solid #111!important;border-radius:0!important;padding:20px!important;background:#fff!important;min-height:290px}.review-detail-card .verified-badge{border-radius:0;background:var(--lime);color:#111;border:1px solid #111}.review-detail-card .stars{color:#111}.review-pagination a{border-radius:0}.review-pagination a.active{background:#111;color:#fff}
/* science detail */
.science-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid #111;border-left:2px solid #111}.sd-card,.sd-card.c-blue,.sd-card.c-pink,.sd-card.c-yellow{background:#fff!important;border:0;border-right:2px solid #111;border-bottom:2px solid #111;border-radius:0;padding:22px}.sd-card:nth-child(2){background:var(--lime)!important}.sd-card:nth-child(3){background:var(--blue)!important}.sd-image{border-radius:0;border:1px solid #111}.sd-card h2{font-size:34px}
/* about */
.about-story-v4{gap:0;border:2px solid #111}.about-story-media{height:620px;border:0;border-right:2px solid #111;border-radius:0;top:105px}.about-story-copy{padding:42px}.story-steps{border-top:2px solid #111}.story-steps>div{border-bottom:1px solid #111}
/* product detail */
.product-detail-hero{padding:58px 0;border-bottom:2px solid #111}.pd-grid{gap:0;border:2px solid #111}.pd-gallery{padding:34px;background:#f5f5f2;border-right:2px solid #111}.pd-image{height:620px;border:0;border-radius:0;background:#fff}.pd-copy{padding:42px}.pd-copy h1{font-size:clamp(54px,6vw,92px)}.pd-thumb{border-radius:0;background:#fff}.pd-actions .btn{flex:1}.pd-rating{border:1px solid #111;padding:8px 10px}.product-editor-content{padding-top:20px;padding-bottom:20px}.product-editor-content h2,.product-editor-content h3{letter-spacing:-.04em}.product-editor-content img{border:1px solid #111}
/* accessibility / focus */
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #2d6cff;outline-offset:3px}
/* responsive */
@media(max-width:1100px){
.header-inner{grid-template-columns:180px 1fr auto}.desktop-nav{gap:18px}.desktop-nav a{font-size:11px}.header-text-link{display:none}
.inkey-products,.catalog-grid{grid-template-columns:repeat(2,1fr)}
.concern-grid{grid-template-columns:repeat(3,1fr)}
.utility-card h3{font-size:38px}
.imported-review-grid,.reviews-page-grid{grid-template-columns:repeat(2,1fr)}
.editable-media-block{height:480px}
}
@media(max-width:860px){
.wrap{width:min(100% - 28px,1380px)}.announce-inner{width:calc(100% - 20px);justify-content:flex-start;overflow:hidden}.announce-mark,.announce a{display:none}
.header-inner{height:66px;display:grid;grid-template-columns:44px 1fr auto;width:calc(100% - 20px)}.menu-btn{display:block;text-align:left;padding:0}.desktop-nav{display:none}.logo{text-align:center;font-size:28px}.header-actions .icon-btn,.header-actions .header-text-link{display:none}.lang-toggle{height:34px}
.mobile-nav{display:none}.mobile-nav.open{display:block}
.inkey-hero .hero-grid{grid-template-columns:1fr;min-height:0}.inkey-hero .hero-copy{padding:48px 0 44px;border-right:0;border-bottom:2px solid #111}.inkey-hero h1{font-size:clamp(62px,17vw,94px)}.inkey-hero .hero-art{height:520px}.hero-mini-proof{margin-top:28px}
.proof-band{grid-template-columns:1fr;width:calc(100% - 28px);border-left:2px solid #111}.proof-tile{min-height:120px}
.utility-grid{grid-template-columns:1fr}.utility-card{min-height:250px}.concern-grid{grid-template-columns:repeat(2,1fr)}
.ecosystem-grid,.home-science-layout,.life-grid,.final-cta-grid,.subhero-grid,.page-edit-grid,.about-story-v4,.pd-grid{grid-template-columns:1fr}.ecosystem-copy,.life-copy,.page-edit-copy,.pd-copy{padding:32px}.editable-media-block,.science-simple .editable-media-block.compact,.life-photo,.subhero-image,.page-edit-media,.about-story-media{height:390px;border-left:0;border-right:0;border-top:2px solid currentColor}.science-simple .editable-media-block.compact{border-right:0;border-bottom:2px solid #fff}.science-cards{grid-template-columns:1fr}.science-card{min-height:220px;border-right:0;border-bottom:1px solid #fff}.science-card:last-child{border-bottom:0}.science-card h3{margin:56px 0 8px}
.big-proof-grid{grid-template-columns:repeat(2,1fr)}.routine-intro{grid-template-columns:1fr}.routine-grid{grid-template-columns:1fr}.routine-step{min-height:110px;border-right:0;border-bottom:1px solid #111}.routine-step:last-child{border-bottom:0}.routine-step strong{margin-top:28px}.life-photo{border-top:0;border-bottom:2px solid #fff}.final-cta-grid>div:first-child{padding:44px 0}.final-cta-image{height:330px;border-left:0;border-top:2px solid #111}.footer-join .wrap{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr;gap:28px}.pd-gallery{border-right:0;border-bottom:2px solid #111}.subhero-grid>div:first-child{padding:32px}.subhero-image{border-left:0}.review-product-summary-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
.section{padding:68px 0}.section-head{display:block}.section-head .text-link{margin-top:18px}.section h2,.section-head h2{font-size:46px}
.inkey-hero .hero-copy{padding-top:36px}.inkey-hero h1{font-size:62px;line-height:.82}.inkey-hero .hero-sub{font-size:15px}.inkey-hero .hero-buttons{display:grid;grid-template-columns:1fr}.inkey-hero .btn{min-width:0}.inkey-hero .hero-art{height:430px}.inkey-hero .product-shot.mist{width:50%;left:0}.inkey-hero .product-shot.cream{width:52%;right:0}.inkey-hero .micro-badge{width:108px;height:108px}.inkey-hero .micro-badge strong{font-size:26px}
.inkey-products,.catalog-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-left:2px solid #111}.inkey-products .shop-card,.catalog-card{flex:0 0 82vw;scroll-snap-align:start}.shop-image{height:330px}.shop-info{min-height:230px}.concern-grid{grid-template-columns:1fr 1fr}.concern-card{min-height:145px}.concern-card span{font-size:20px}
.ecosystem-copy h2,.life-copy h2,.final-cta h2{font-size:48px}.editable-media-block,.life-photo{height:310px}.big-proof-grid{grid-template-columns:1fr}.big-proof{min-height:160px}.routine-thumb{height:180px}.imported-review-grid,.reviews-page-grid{display:flex;overflow-x:auto;border-left:2px solid #111;scroll-snap-type:x mandatory}.imported-review-grid blockquote,.review-detail-card{flex:0 0 84vw;scroll-snap-align:start}.imported-review-grid blockquote p{font-size:16px}.footer-join h3{font-size:25px}.footer-grid{grid-template-columns:1fr}.footer-bottom{display:block}.footer-bottom span{display:block;margin:5px 0}.subhero h1{font-size:58px}.subhero-image{height:300px}.page-edit-media,.about-story-media{height:300px}.pd-image{height:420px}.pd-gallery{padding:18px}.pd-copy h1{font-size:55px}.product-review-product{display:block}.product-review-product img{margin-bottom:12px}.review-product-summary-grid{display:block}.review-product-summary{margin-bottom:12px}
}
/* v8 — editable 3-slide hero main visual */
.inkey-hero .hero-art.hero-slider{position:relative;height:690px;background:var(--blue);overflow:hidden}
.hero-slides{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;display:block;opacity:0;visibility:hidden;transition:opacity .55s ease,visibility .55s ease;background:var(--blue);z-index:1}
.hero-slide.is-active{opacity:1;visibility:visible;z-index:2}
.hero-slide img{width:100%;height:100%;object-fit:cover;display:block;mix-blend-mode:normal!important}
.hero-slide-label{position:absolute;top:20px;left:22px;z-index:4;background:#fff;border:2px solid #111;padding:9px 12px;font-size:10px;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.hero-slider-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:44px;height:44px;border:2px solid #111;background:#fff;color:#111;display:grid;place-items:center;font-size:20px;line-height:1;cursor:pointer;transition:.2s}
.hero-slider-arrow:hover{background:var(--lime)}
.hero-slider-prev{left:18px}.hero-slider-next{right:18px}
.hero-slider-dots{position:absolute;left:22px;bottom:22px;z-index:11;display:flex;gap:8px;background:#fff;border:2px solid #111;padding:8px 10px}
.hero-dot{width:34px;height:5px;border:0;background:#cfcfcf;padding:0;cursor:pointer}
.hero-dot.is-active{background:#111}
.hero-slider .micro-badge{z-index:9}
@media(max-width:760px){.inkey-hero .hero-art.hero-slider{height:520px}.hero-slide img{object-fit:cover}.hero-slider-arrow{width:40px;height:40px}.hero-slider-prev{left:12px}.hero-slider-next{right:12px}.hero-slider-dots{left:14px;bottom:14px}.hero-slide-label{top:14px;left:14px}.hero-slider .micro-badge{right:14px;bottom:55px}}
@media(max-width:520px){.inkey-hero .hero-art.hero-slider{height:430px}.hero-slider-arrow{top:auto;bottom:12px;transform:none}.hero-slider-prev{left:auto;right:62px}.hero-slider-next{right:12px}.hero-slider-dots{left:12px;bottom:14px;padding:7px 8px}.hero-dot{width:24px}.hero-slider .micro-badge{right:12px;bottom:64px}}
/* v15: manual copy line breaks from Admin */
[data-ko][data-en]{white-space:pre-line}
/* v16 — editable FIND / ROUTINE / MICROBIOME quick-navigation cards */
.utility-card [data-ko][data-en]{white-space:pre-line}
@media(max-width:860px){
.utility-card [data-ko][data-en]{white-space:pre-line;max-width:100%}
.utility-card h3[data-ko][data-en]{overflow-wrap:anywhere}
.utility-card p[data-ko][data-en]{overflow-wrap:anywhere}
}
/* v17 — Life Science title legibility: prevent Korean multi-line glyph overlap. */
.life-copy h2{
line-height:1.08!important;
letter-spacing:-.055em;
margin-top:18px;
margin-bottom:34px;
word-break:keep-all;
overflow-wrap:normal;
}
@media(max-width:760px){
.life-copy h2{
line-height:1.12!important;
letter-spacing:-.045em;
margin-bottom:28px;
}
}
/* v18 — normalize spacing for all multi-line display titles across home/sub pages */
.hero h1,
.section h2,
.section-head h2,
.ecosystem-copy h2,
.life-copy h2,
.final-cta h2,
.subhero h1,
.page-edit-copy h2,
.pd-copy h1,
.utility-card h3,
.science-card h3,
.catalog-copy h3,
.sd-card h2,
.footer-join h3{
word-break:keep-all;
overflow-wrap:normal;
}
.hero h1{line-height:.9!important;}
.section h2,.section-head h2{line-height:1.02!important;}
.utility-card h3{line-height:1.04!important; letter-spacing:-.05em;}
.ecosystem-copy h2{line-height:1.05!important; letter-spacing:-.055em; margin-bottom:30px;}
.page-edit-copy h2{line-height:1.05!important; letter-spacing:-.055em; margin:12px 0 24px;}
.subhero h1{line-height:.92!important; margin-bottom:22px;}
.pd-copy h1{line-height:.94!important; margin-bottom:20px;}
.science-card h3{line-height:1.05!important;}
.catalog-copy h3{line-height:1.12!important;}
.sd-card h2{line-height:1.06!important;}
.final-cta h2{line-height:.92!important;}
.footer-join h3{line-height:1.08!important;}
@media(max-width:860px){
.hero h1{line-height:.94!important;}
.utility-card h3{line-height:1.08!important;}
.page-edit-copy h2{line-height:1.08!important;}
.subhero h1{line-height:.98!important;}
}
@media(max-width:560px){
.section h2,.section-head h2,.ecosystem-copy h2,.life-copy h2,.final-cta h2,.page-edit-copy h2{line-height:1.08!important;}
.hero h1,.subhero h1,.pd-copy h1{line-height:1.0!important;}
.utility-card h3{line-height:1.1!important;}
}
/* v19 — final fix for main hero Korean multi-line heading spacing */
.hero-copy h1,
.hero h1{
line-height:1.02!important;
letter-spacing:-.06em!important;
margin-bottom:34px!important;
word-break:keep-all;
overflow-wrap:normal;
}
.hero-sub{
margin-top:0!important;
line-height:1.55!important;
}
@media(max-width:860px){
.hero-copy h1,
.hero h1{
line-height:1.04!important;
margin-bottom:28px!important;
}
}
@media(max-width:560px){
.hero-copy h1,
.hero h1{
line-height:1.06!important;
letter-spacing:-.05em!important;
margin-bottom:24px!important;
}
}
/* v20 — tighten main hero title multi-line spacing to remove excessive gap */
.inkey-hero h1,
.hero-copy h1,
.hero h1{
line-height:0.84!important;
letter-spacing:-0.078em!important;
margin-bottom:22px!important;
}
.inkey-hero .kicker{margin-bottom:14px!important;}
.inkey-hero .hero-sub{margin-top:0!important; line-height:1.5!important;}
@media(max-width:860px){
.inkey-hero h1, .hero-copy h1, .hero h1{
line-height:0.88!important;
margin-bottom:20px!important;
}
}
@media(max-width:560px){
.inkey-hero h1, .hero-copy h1, .hero h1{
line-height:0.92!important;
margin-bottom:18px!important;
}
}
/* v21 — Science section supports GIF and MP4 */
.science-home-media{overflow:hidden;background:#111;}
.science-home-media .science-home-media-element,
.science-home-media img,
.science-home-media video{width:100%;height:100%;display:block;object-fit:cover;}
@media(max-width:860px){.science-home-media video,.science-home-media img{object-fit:cover;}}
/* v22 — main hero title spacing matches the other two-line display headings */
.inkey-hero .hero-display-title,
.inkey-hero h1.hero-display-title{
line-height:1.04!important;
letter-spacing:-.06em!important;
margin:0 0 24px!important;
white-space:pre-line;
word-break:keep-all;
overflow-wrap:normal;
line-break:strict;
text-wrap:balance;
}
@media(max-width:860px){
.inkey-hero .hero-display-title,
.inkey-hero h1.hero-display-title{line-height:1.06!important;margin-bottom:22px!important;}
}
@media(max-width:560px){
.inkey-hero .hero-display-title,
.inkey-hero h1.hero-display-title{line-height:1.08!important;margin-bottom:20px!important;text-wrap:wrap;}
}
/* v23 — main hero: remove visible blank gap and keep leading punctuation with prior line */
.inkey-hero .hero-display-title,
.inkey-hero h1.hero-display-title,
.inkey-hero .hero-copy h1.hero-display-title{
line-height:.84!important;
letter-spacing:-.072em!important;
margin:0 0 24px!important;
white-space:pre-line!important;
word-break:keep-all!important;
overflow-wrap:normal!important;
text-wrap:wrap!important;
}
@media(max-width:860px){
.inkey-hero .hero-display-title,
.inkey-hero h1.hero-display-title,
.inkey-hero .hero-copy h1.hero-display-title{
line-height:.88!important;
margin-bottom:22px!important;
}
}
@media(max-width:560px){
.inkey-hero .hero-display-title,
.inkey-hero h1.hero-display-title,
.inkey-hero .hero-copy h1.hero-display-title{
line-height:.92!important;
letter-spacing:-.055em!important;
margin-bottom:20px!important;
}
}
/* v24 — deterministic Hero title rendering.
Each logical line is rendered as a separate block span, so no hidden blank line
or punctuation-only line can create a large visual gap. */
.inkey-hero .hero-display-title{
line-height:1!important;
white-space:normal!important;
margin:0 0 24px!important;
}
.inkey-hero .hero-display-title .hero-title-line{
display:block;
margin:0!important;
padding:0!important;
line-height:.84!important;
min-height:0!important;
}
.inkey-hero .hero-display-title .hero-title-line + .hero-title-line{
margin-top:0!important;
}
@media(max-width:860px){
.inkey-hero .hero-display-title .hero-title-line{line-height:.88!important;}
}
@media(max-width:560px){
.inkey-hero .hero-display-title .hero-title-line{line-height:.92!important;}
}
/* ==========================================================
v25 DEFINITIVE HERO FIX
Server renders exactly one block per intended line.
No data-ko JS replacement is used on H1.
========================================================== */
.inkey-hero h1.hero-display-title{
display:block!important;
margin:0 0 24px!important;
padding:0!important;
line-height:1!important;
white-space:normal!important;
font-size:inherit;
}
.inkey-hero .hero-display-title .hero-title-lang{
display:block;
margin:0!important;
padding:0!important;
}
html[lang="ko"] .inkey-hero .hero-title-en{display:none!important;}
html[lang="en"] .inkey-hero .hero-title-ko{display:none!important;}
.inkey-hero .hero-display-title .hero-title-line{
display:block!important;
margin:0!important;
padding:0!important;
height:auto!important;
min-height:0!important;
line-height:.88!important;
white-space:normal!important;
word-break:keep-all!important;
overflow-wrap:normal!important;
}
.inkey-hero .hero-display-title .hero-title-line + .hero-title-line{
margin-top:0!important;
padding-top:0!important;
}
@media(max-width:860px){
.inkey-hero .hero-display-title .hero-title-line{line-height:.91!important;}
}
@media(max-width:560px){
.inkey-hero .hero-display-title .hero-title-line{line-height:.94!important;}
}
/* ==========================================================
v26 FINAL HERO LANGUAGE + LINE SPACING FIX
- Korean and English title never display simultaneously.
- Korean display-title lines use the same comfortable spacing
as other two-line headings (1.04), avoiding glyph overlap.
========================================================== */
.inkey-hero .hero-display-title{
display:block!important;
margin:0 0 26px!important;
padding:0!important;
line-height:1!important;
white-space:normal!important;
}
.inkey-hero .hero-title-lang{
display:none!important;
margin:0!important;
padding:0!important;
}
html[lang^="ko"] .inkey-hero .hero-title-ko{
display:block!important;
}
html[lang^="en"] .inkey-hero .hero-title-en{
display:block!important;
}
.inkey-hero .hero-display-title .hero-title-line{
display:block!important;
margin:0!important;
padding:0!important;
min-height:0!important;
height:auto!important;
line-height:1.04!important;
letter-spacing:-.072em!important;
white-space:normal!important;
word-break:keep-all!important;
overflow-wrap:normal!important;
}
.inkey-hero .hero-display-title .hero-title-line + .hero-title-line{
margin-top:0!important;
padding-top:0!important;
}
/* English needs slightly more natural tracking/leading. */
html[lang^="en"] .inkey-hero .hero-display-title .hero-title-line{
line-height:.94!important;
letter-spacing:-.065em!important;
}
@media(max-width:860px){
html[lang^="ko"] .inkey-hero .hero-display-title .hero-title-line{
line-height:1.06!important;
}
html[lang^="en"] .inkey-hero .hero-display-title .hero-title-line{
line-height:.98!important;
}
}
@media(max-width:560px){
html[lang^="ko"] .inkey-hero .hero-display-title .hero-title-line{
line-height:1.08!important;
letter-spacing:-.055em!important;
}
html[lang^="en"] .inkey-hero .hero-display-title .hero-title-line{
line-height:1.02!important;
letter-spacing:-.05em!important;
}
}
/* ==========================================================
v27 HERO TITLE SPACING MATCH
Match the main Hero Korean line spacing to the two-line spacing
used in the utility cards (like "피부 고민부터 시작하세요.").
========================================================== */
html[lang^="ko"] .inkey-hero .hero-display-title .hero-title-line{
line-height:1.04!important;
letter-spacing:-.05em!important;
}
@media(max-width:860px){
html[lang^="ko"] .inkey-hero .hero-display-title .hero-title-line{
line-height:1.08!important;
}
}
@media(max-width:560px){
html[lang^="ko"] .inkey-hero .hero-display-title .hero-title-line{
line-height:1.10!important;
}
}
/* ==========================================================
v28 EXACT HERO SPACING
0001 Hero title is rendered like 0002 utility-card two-line title:
one flex row per intended line, no anonymous blank line boxes.
========================================================== */
.inkey-hero .hero-display-title{
display:block!important;
line-height:1!important;
margin:0 0 26px!important;
padding:0!important;
white-space:normal!important;
}
html[lang^="ko"] .inkey-hero .hero-title-ko,
html[lang^="en"] .inkey-hero .hero-title-en{
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
justify-content:flex-start!important;
row-gap:.08em!important;
margin:0!important;
padding:0!important;
line-height:1!important;
}
.inkey-hero .hero-title-lang[style*="display: block"]{
flex-direction:column!important;
}
.inkey-hero .hero-display-title .hero-title-line{
display:block!important;
flex:0 0 auto!important;
position:static!important;
top:auto!important;
left:auto!important;
transform:none!important;
margin:0!important;
padding:0!important;
min-height:0!important;
height:auto!important;
line-height:1!important;
white-space:normal!important;
word-break:keep-all!important;
overflow-wrap:normal!important;
letter-spacing:-.05em!important;
}
@media(max-width:860px){
html[lang^="ko"] .inkey-hero .hero-title-ko,
html[lang^="en"] .inkey-hero .hero-title-en{
row-gap:.07em!important;
}
}
@media(max-width:560px){
html[lang^="ko"] .inkey-hero .hero-title-ko,
html[lang^="en"] .inkey-hero .hero-title-en{
row-gap:.06em!important;
}
}
/* ==========================================================
v29 — EXACT TWO-LINE HERO
No newline parsing in the browser. Exactly two independent spans.
Match utility-card title line-height ratio.
========================================================== */
.inkey-hero .hero-display-title{
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
justify-content:flex-start!important;
gap:0!important;
margin:0 0 26px!important;
padding:0!important;
line-height:1!important;
white-space:normal!important;
}
.inkey-hero .hero-display-title .hero-title-line{
display:block!important;
position:static!important;
flex:0 0 auto!important;
margin:0!important;
padding:0!important;
top:auto!important;
left:auto!important;
transform:none!important;
min-height:0!important;
height:auto!important;
line-height:1.04!important;
letter-spacing:-.05em!important;
white-space:normal!important;
word-break:keep-all!important;
overflow-wrap:normal!important;
}
.inkey-hero .hero-display-title .hero-title-line:empty{
display:none!important;
}
.inkey-hero .hero-display-title .hero-title-line + .hero-title-line{
margin-top:0!important;
}
@media(max-width:860px){
.inkey-hero .hero-display-title .hero-title-line{line-height:1.08!important;}
}
@media(max-width:560px){
.inkey-hero .hero-display-title .hero-title-line{line-height:1.10!important;}
}
/* ==========================================================
v30 HOME HERO RESTRUCTURE
Large image slider on top, copy below
========================================================== */
.inkey-hero{
background:#fff!important;
border-bottom:2px solid #111!important;
}
.inkey-hero .hero-grid{
display:flex!important;
flex-direction:column!important;
gap:0!important;
min-height:0!important;
width:100%!important;
}
.inkey-hero .hero-art.hero-slider{
order:1!important;
width:100%!important;
height:720px!important;
border:2px solid #111!important;
margin:28px 0 0!important;
background:#d9e8ff!important;
}
.inkey-hero .hero-copy{
order:2!important;
width:100%!important;
padding:34px 18px 48px 18px!important;
border-right:0!important;
border-top:0!important;
align-self:stretch!important;
display:flex!important;
flex-direction:column!important;
justify-content:flex-start!important;
text-align:left!important;
}
.inkey-hero .kicker{
margin:0 0 14px!important;
}
.inkey-hero .hero-display-title{
margin:0 0 18px!important;
max-width:100%!important;
}
.inkey-hero .hero-display-title .hero-title-line{
line-height:1.02!important;
}
.inkey-hero .hero-sub{
max-width:980px!important;
margin:0 0 4px!important;
font-size:18px!important;
line-height:1.55!important;
}
.inkey-hero .hero-buttons{
margin-top:24px!important;
}
.inkey-hero .hero-mini-proof{
margin-top:24px!important;
}
.inkey-hero .hero-slide img{
object-fit:cover!important;
object-position:center center!important;
}
.inkey-hero .hero-slide-label{
top:22px!important;
left:22px!important;
}
.inkey-hero .hero-slider-arrow{
top:50%!important;
transform:translateY(-50%)!important;
}
.inkey-hero .hero-slider-prev{left:18px!important;}
.inkey-hero .hero-slider-next{right:18px!important;}
.inkey-hero .hero-slider-dots{
left:22px!important;
bottom:18px!important;
}
.inkey-hero .hero-slider .micro-badge{
right:22px!important;
bottom:18px!important;
}
/* Wider layout so the image window visually expands */
.inkey-hero > .wrap{
width:min(1500px, calc(100% - 56px))!important;
}
@media (max-width:1200px){
.inkey-hero .hero-art.hero-slider{
height:640px!important;
}
}
@media (max-width:860px){
.inkey-hero > .wrap{
width:calc(100% - 30px)!important;
}
.inkey-hero .hero-art.hero-slider{
height:520px!important;
margin-top:18px!important;
}
.inkey-hero .hero-copy{
padding:28px 8px 36px 8px!important;
}
.inkey-hero .hero-sub{
font-size:16px!important;
}
}
@media (max-width:560px){
.inkey-hero > .wrap{
width:calc(100% - 20px)!important;
}
.inkey-hero .hero-art.hero-slider{
height:380px!important;
margin-top:14px!important;
}
.inkey-hero .hero-copy{
padding:22px 2px 28px 2px!important;
}
.inkey-hero .hero-display-title{
margin-bottom:14px!important;
}
.inkey-hero .hero-sub{
font-size:15px!important;
line-height:1.5!important;
}
.inkey-hero .hero-buttons{
display:grid!important;
grid-template-columns:1fr!important;
gap:8px!important;
}
.inkey-hero .hero-mini-proof{
flex-wrap:wrap!important;
}
}
/* ==========================================================
v31 — JPG / PNG / GIF / MP4 in every editable HOME media slot
========================================================== */
.hero-slide-media,
.home-media-element,
.science-home-media-element{
display:block;
width:100%;
height:100%;
}
/* Hero slide media fills the large slider window. */
.inkey-hero .hero-slide img,
.inkey-hero .hero-slide video,
.inkey-hero .hero-slide .hero-slide-media{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center center!important;
}
/* Homepage editorial/media blocks */
.editable-media-block img,
.editable-media-block video,
.routine-thumb img,
.routine-thumb video,
.life-photo img,
.life-photo video,
.final-cta-image img,
.final-cta-image video{
width:100%!important;
height:100%!important;
display:block!important;
}
/* Same fitting rules as the original images */
.ecosystem-media img,
.ecosystem-media video,
.life-media img,
.life-media video,
.final-media img,
.final-media video{
object-fit:cover!important;
object-position:center center!important;
}
.routine-media img,
.routine-media video{
object-fit:contain!important;
object-position:center center!important;
background:inherit;
}
.science-home-media img,
.science-home-media video{
object-fit:cover!important;
object-position:center center!important;
}
/* Keep video surfaces clean and consistent. */
.inkey-hero video,
.ecosystem-media video,
.science-home-media video,
.routine-media video,
.life-media video,
.final-media video{
border:0!important;
outline:0!important;
background:#000;
}
/* GIFs are ordinary ![]()
, so they inherit the same sizing rules automatically. */
/* ==========================================================
v32 — MOBILE TYPOGRAPHY / TEXT-SAFETY SYSTEM
The admin can still set desktop font sizes freely.
On small screens, text is capped and reflowed safely.
========================================================== */
/* Better Korean/Latin rendering and predictable text boxes */
html{
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
}
body{
font-family:Arial,"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif!important;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,a,button,span,strong,b,small{
max-width:100%;
}
html[lang^="ko"] h1,
html[lang^="ko"] h2,
html[lang^="ko"] h3,
html[lang^="ko"] h4,
html[lang^="ko"] p{
word-break:keep-all;
overflow-wrap:break-word;
}
html[lang^="en"] h1,
html[lang^="en"] h2,
html[lang^="en"] h3,
html[lang^="en"] h4,
html[lang^="en"] p{
word-break:normal;
overflow-wrap:anywhere;
hyphens:none;
}
/* Tablet */
@media(max-width:760px){
body{overflow-x:hidden!important;}
.wrap,
.header-inner,
.inkey-hero > .wrap{
max-width:100%!important;
}
/* Heading rhythm */
.inkey-hero .hero-display-title .hero-title-line{
line-height:1.08!important;
letter-spacing:-.045em!important;
}
.section h2,
.section-head h2,
.ecosystem-copy h2,
.life-copy h2,
.final-cta h2,
.page-edit-copy h2,
.about-story-copy h2{
line-height:1.10!important;
letter-spacing:-.045em!important;
}
.subhero h1,
.pd-copy h1{
line-height:1.08!important;
letter-spacing:-.05em!important;
}
.utility-card h3{
line-height:1.12!important;
letter-spacing:-.04em!important;
}
/* Body copy: enough leading for Korean glyphs */
.hero-sub,
.section-head p,
.ecosystem-copy p,
.life-copy p,
.routine-intro p,
.final-cta p,
.page-edit-copy p,
.about-story-copy p,
.subhero p,
.shop-info p,
.catalog-copy p,
.science-card p,
.sd-card p,
.review-detail-card p,
.imported-review-grid blockquote p{
line-height:1.65!important;
}
/* Buttons and tags never clip */
.btn,.quick,.smartstore-buy,.text-link,
.hero-mini-proof span,.life-tags span,.filter-pills a{
white-space:normal!important;
line-height:1.25!important;
text-align:center;
overflow-wrap:anywhere;
}
/* Ignore desktop manual positioning that can push copy off-screen. */
[data-ko][data-en],
.hero-title-line{
max-width:100%!important;
}
}
/* Phone */
@media(max-width:560px){
.wrap{width:calc(100% - 24px)!important;}
.section{padding:54px 0!important;}
.announce{
height:auto!important;
min-height:28px;
padding:7px 10px!important;
line-height:1.3!important;
}
/* Header */
.header-inner{
width:calc(100% - 16px)!important;
grid-template-columns:38px minmax(0,1fr) auto!important;
}
.logo{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.mobile-nav{
max-height:calc(100vh - 62px);
overflow-y:auto;
}
.mobile-nav a{
line-height:1.3!important;
overflow-wrap:anywhere;
}
/* Main hero */
.inkey-hero > .wrap{width:calc(100% - 16px)!important;}
.inkey-hero .hero-art.hero-slider{
height:min(76vw,390px)!important;
min-height:270px!important;
}
.inkey-hero .hero-copy{
padding:20px 2px 28px!important;
}
.inkey-hero .kicker{
line-height:1.35!important;
letter-spacing:.07em!important;
}
.inkey-hero .hero-display-title{
width:100%!important;
margin-bottom:14px!important;
}
.inkey-hero .hero-display-title .hero-title-line{
line-height:1.10!important;
letter-spacing:-.04em!important;
}
.inkey-hero .hero-sub{
width:100%!important;
max-width:none!important;
line-height:1.65!important;
}
.inkey-hero .hero-buttons{
width:100%;
}
.inkey-hero .btn{
width:100%!important;
min-height:48px!important;
padding:12px 14px!important;
}
.hero-mini-proof{
gap:6px!important;
}
.hero-mini-proof span{
flex:0 1 auto;
padding:8px 9px!important;
}
.hero-slide-label{
max-width:calc(100% - 28px)!important;
white-space:normal!important;
line-height:1.2!important;
}
.hero-slider .micro-badge{
width:88px!important;
height:88px!important;
}
.hero-slider .micro-badge strong{
font-size:22px!important;
}
.hero-slider .micro-badge span{
font-size:7px!important;
}
/* Section headings and cards */
.section-head{
gap:12px!important;
margin-bottom:24px!important;
}
.section h2,
.section-head h2,
.ecosystem-copy h2,
.life-copy h2,
.final-cta h2,
.page-edit-copy h2,
.about-story-copy h2{
line-height:1.12!important;
}
.utility-card{
padding:22px!important;
min-height:240px!important;
}
.utility-card h3{
margin:auto 0 12px!important;
line-height:1.12!important;
}
.utility-card p{
line-height:1.6!important;
}
.concern-card span{
line-height:1.12!important;
}
.science-card h3,
.sd-card h2,
.shop-info h3,
.catalog-copy h2,
.product-name,
.rps-head h2{
line-height:1.15!important;
}
/* Subpages */
.subhero-grid>div:first-child,
.page-edit-copy,
.about-story-copy,
.pd-copy{
padding:24px!important;
}
.subhero h1,
.pd-copy h1{
line-height:1.10!important;
}
.subhero p,
.page-edit-copy p,
.about-story-copy p,
.product-editor-content p{
line-height:1.65!important;
}
/* Reviews */
.imported-review-grid blockquote,
.review-detail-card{
flex-basis:88vw!important;
padding:20px!important;
}
.imported-review-grid blockquote p,
.review-detail-card p{
line-height:1.65!important;
}
.review-top,
.review-detail-card small,
.imported-review-grid cite{
line-height:1.45!important;
}
/* Footer */
.footer-grid{
gap:20px!important;
}
.footer a,.footer p,.footer-grid a,.footer-brand-col p,.footer-bottom{
line-height:1.65!important;
overflow-wrap:anywhere;
}
/* Long English words/product names */
.shop-info h3,
.catalog-copy h2,
.pd-copy h1,
.science-card h3,
.utility-card h3,
.footer-join h3{
overflow-wrap:anywhere;
}
}
/* Small phones */
@media(max-width:390px){
.wrap{width:calc(100% - 18px)!important;}
.inkey-hero > .wrap{width:calc(100% - 12px)!important;}
.inkey-hero .hero-art.hero-slider{
min-height:245px!important;
}
.hero-slider-arrow{
width:36px!important;
height:36px!important;
}
.hero-slider .micro-badge{
width:76px!important;
height:76px!important;
}
.concern-grid{
grid-template-columns:1fr!important;
}
.concern-card{
min-height:125px!important;
}
.footer-grid{
grid-template-columns:1fr!important;
}
}
/* ==========================================================
v33 — AUTO MEDIA FIT
The box adopts the uploaded media's intrinsic aspect ratio.
This avoids both crop and black side bars.
========================================================== */
.media-fit-ready{
width:100%!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
aspect-ratio:var(--meb-media-ratio)!important;
background:transparent!important;
overflow:hidden!important;
}
.inkey-hero .hero-art.hero-slider.media-fit-ready,
.editable-media-block.media-fit-ready,
.routine-thumb.media-fit-ready,
.life-photo.media-fit-ready,
.final-cta-image.media-fit-ready{
height:auto!important;
min-height:0!important;
max-height:none!important;
aspect-ratio:var(--meb-media-ratio)!important;
background:transparent!important;
}
/* Use contain, but because the wrapper has the exact same ratio, no bars remain. */
.media-fit-ready > img,
.media-fit-ready > video,
.media-fit-ready img.home-media-element,
.media-fit-ready video.home-media-element,
.media-fit-ready img.science-home-media-element,
.media-fit-ready video.science-home-media-element{
width:100%!important;
height:100%!important;
object-fit:contain!important;
object-position:center center!important;
background:transparent!important;
}
.inkey-hero .hero-art.hero-slider.media-fit-ready .hero-slides,
.inkey-hero .hero-art.hero-slider.media-fit-ready .hero-slide{
width:100%!important;
height:100%!important;
}
.inkey-hero .hero-art.hero-slider.media-fit-ready .hero-slide img,
.inkey-hero .hero-art.hero-slider.media-fit-ready .hero-slide video{
width:100%!important;
height:100%!important;
object-fit:contain!important;
object-position:center center!important;
background:transparent!important;
}
/* Remove explicit black video backgrounds from the prior build. */
.inkey-hero video,
.ecosystem-media video,
.science-home-media video,
.routine-media video,
.life-media video,
.final-media video{
background:transparent!important;
}
.inkey-hero .hero-art.hero-slider{
transition:aspect-ratio .25s ease,height .25s ease;
}
/* Ratio-aware media overrides old fixed mobile heights. */
@media(max-width:760px){
.inkey-hero .hero-art.hero-slider.media-fit-ready,
.editable-media-block.media-fit-ready,
.routine-thumb.media-fit-ready,
.life-photo.media-fit-ready,
.final-cta-image.media-fit-ready{
height:auto!important;
min-height:0!important;
max-height:none!important;
}
}
/* ==========================================================
v34 — MOBILE CLEAN HERO
Hide decorative/navigation overlays on phones.
Autoplay + swipe remain available.
========================================================== */
@media(max-width:760px){
.inkey-hero .hero-slide-label,
.inkey-hero .hero-slider-arrow,
.inkey-hero .hero-slider-dots,
.inkey-hero .hero-slider .micro-badge{
display:none!important;
}
/* Make the media the single visual focus. */
.inkey-hero .hero-art.hero-slider{
border:1.5px solid #111!important;
}
.inkey-hero .hero-slide,
.inkey-hero .hero-slide img,
.inkey-hero .hero-slide video{
cursor:default!important;
}
/* Slightly tighter gap between image and lower copy. */
.inkey-hero .hero-copy{
padding-top:20px!important;
}
}
@media(max-width:560px){
.inkey-hero .hero-copy{
padding-top:18px!important;
}
.inkey-hero .kicker{
margin-bottom:10px!important;
}
}
/* ==========================================================
v35 — GLOBAL IMAGE AUTO FIT
For all major image insertion areas, automatically adopt the
uploaded media's aspect ratio so images are not cropped,
hidden, or shown with unused black side areas.
========================================================== */
.shop-image.media-fit-ready,
.subhero-image.media-fit-ready,
.catalog-image.media-fit-ready,
.pd-image.media-fit-ready{
height:auto!important;
min-height:0!important;
max-height:none!important;
aspect-ratio:var(--meb-media-ratio)!important;
background:transparent!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
}
/* Homepage / subpage image areas should scale to the real media ratio. */
.shop-image.media-fit-ready > img,
.shop-image.media-fit-ready > video,
.shop-image.media-fit-ready img,
.shop-image.media-fit-ready video,
.subhero-image.media-fit-ready > img,
.subhero-image.media-fit-ready > video,
.subhero-image.media-fit-ready img,
.subhero-image.media-fit-ready video,
.catalog-image.media-fit-ready > img,
.catalog-image.media-fit-ready > video,
.catalog-image.media-fit-ready img,
.catalog-image.media-fit-ready video,
.pd-image.media-fit-ready > img,
.pd-image.media-fit-ready > video,
.pd-image.media-fit-ready img,
.pd-image.media-fit-ready video{
width:100%!important;
height:100%!important;
object-fit:contain!important;
object-position:center center!important;
background:transparent!important;
}
/* Avoid forcing fixed heights once auto-fit is applied. */
.media-fit-ready.shop-image,
.media-fit-ready.subhero-image,
.media-fit-ready.catalog-image,
.media-fit-ready.pd-image{
padding:18px!important;
}
/* Mobile: let uploaded images breathe and prevent clipping. */
@media(max-width:760px){
.shop-image.media-fit-ready,
.subhero-image.media-fit-ready,
.catalog-image.media-fit-ready,
.pd-image.media-fit-ready{
width:100%!important;
margin-left:auto!important;
margin-right:auto!important;
}
}
/* ==========================================================
v36 — FIXED PRODUCT IMAGE SYSTEM
Product areas do NOT react to uploaded image aspect ratio.
Cards remain aligned and stable regardless of portrait/landscape source.
========================================================== */
/* Homepage product cards */
.inkey-products .shop-card{
display:flex!important;
flex-direction:column!important;
height:100%!important;
min-height:0!important;
align-self:stretch!important;
}
.inkey-products .shop-image{
width:100%!important;
height:auto!important;
aspect-ratio:1 / 1!important;
min-height:0!important;
padding:18px!important;
overflow:hidden!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
background:#f7f7f4!important;
}
.inkey-products .shop-image.media-fit-ready{
height:auto!important;
aspect-ratio:1 / 1!important;
--meb-media-ratio:1 / 1!important;
}
.inkey-products .shop-image img,
.inkey-products .shop-image video,
.inkey-products .shop-image.media-fit-ready img,
.inkey-products .shop-image.media-fit-ready video{
width:100%!important;
height:100%!important;
max-width:100%!important;
max-height:100%!important;
object-fit:contain!important;
object-position:center center!important;
border-radius:0!important;
background:transparent!important;
}
.inkey-products .shop-info{
display:flex!important;
flex-direction:column!important;
flex:1 1 auto!important;
}
.inkey-products .shop-bottom{
margin-top:auto!important;
}
/* SHOP catalog cards: fixed image zone, independent of source ratio */
.catalog-image{
width:100%!important;
height:auto!important;
aspect-ratio:1 / 1.08!important;
min-height:0!important;
overflow:hidden!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
padding:20px!important;
background:#f5f5f2!important;
}
.catalog-image.media-fit-ready{
height:auto!important;
aspect-ratio:1 / 1.08!important;
--meb-media-ratio:1 / 1.08!important;
}
.catalog-image img,
.catalog-image video,
.catalog-image.media-fit-ready img,
.catalog-image.media-fit-ready video{
width:100%!important;
height:100%!important;
max-width:100%!important;
max-height:100%!important;
object-fit:contain!important;
object-position:center center!important;
background:transparent!important;
}
/* Product detail main image: fixed display canvas */
.pd-image{
width:100%!important;
height:auto!important;
aspect-ratio:1 / 1.12!important;
min-height:0!important;
overflow:hidden!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
padding:24px!important;
}
.pd-image.media-fit-ready{
height:auto!important;
aspect-ratio:1 / 1.12!important;
--meb-media-ratio:1 / 1.12!important;
}
.pd-image img,
.pd-image video,
.pd-image.media-fit-ready img,
.pd-image.media-fit-ready video{
width:100%!important;
height:100%!important;
max-width:100%!important;
max-height:100%!important;
object-fit:contain!important;
object-position:center center!important;
background:transparent!important;
}
/* Product gallery thumbnails also stay identical in size */
.pd-thumb{
flex:0 0 78px!important;
width:78px!important;
height:78px!important;
overflow:hidden!important;
}
.pd-thumb img{
width:100%!important;
height:100%!important;
object-fit:contain!important;
}
/* Desktop product grid alignment */
@media(min-width:761px){
.inkey-products{
align-items:stretch!important;
}
.inkey-products .shop-card{
min-height:690px!important;
}
}
/* Mobile keeps the same product image ratio and card structure */
@media(max-width:760px){
.inkey-products .shop-image{
aspect-ratio:1 / 1!important;
padding:14px!important;
}
.catalog-image{
aspect-ratio:1 / 1.08!important;
padding:16px!important;
}
.pd-image{
aspect-ratio:1 / 1.12!important;
padding:18px!important;
}
.pd-thumb{
flex-basis:64px!important;
width:64px!important;
height:64px!important;
}
}
/* v40 — actual individual star ratings */
.stars{
letter-spacing:.03em;
white-space:nowrap;
}
.stars b{
margin-left:4px;
color:#111;
}
/* v45 — homepage SCIENCE YOU CAN SEE dedicated typography controls */
.meb-home-proof .proof-head>span{font-size:var(--proof-title-size)!important}
.meb-home-proof .proof-head .text-link{font-size:var(--proof-button-size)!important}
.meb-home-proof .proof-box-1>b{font-size:var(--proof1-value-size)!important}
.meb-home-proof .proof-box-1>span{font-size:var(--proof1-desc-size)!important}
.meb-home-proof .proof-box-2>b{font-size:var(--proof2-value-size)!important}
.meb-home-proof .proof-box-2>span{font-size:var(--proof2-desc-size)!important}
.meb-home-proof .proof-box-3>b{font-size:var(--proof3-value-size)!important}
.meb-home-proof .proof-box-3>span{font-size:var(--proof3-desc-size)!important}
.meb-home-proof .proof-box-4>b{font-size:var(--proof4-value-size)!important}
.meb-home-proof .proof-box-4>span{font-size:var(--proof4-desc-size)!important}
.meb-home-proof .legal-note{font-size:var(--proof-legal-size)!important}
@media(max-width:760px){
.meb-home-proof .proof-head>span{font-size:min(var(--proof-title-size),44px)!important;line-height:.95}
.meb-home-proof .proof-head .text-link{font-size:min(var(--proof-button-size),13px)!important}
.meb-home-proof .big-proof-grid{grid-template-columns:1fr 1fr}
.meb-home-proof .proof-box-1>b{font-size:min(var(--proof1-value-size),38px)!important}
.meb-home-proof .proof-box-2>b{font-size:min(var(--proof2-value-size),38px)!important}
.meb-home-proof .proof-box-3>b{font-size:min(var(--proof3-value-size),38px)!important}
.meb-home-proof .proof-box-4>b{font-size:min(var(--proof4-value-size),38px)!important}
.meb-home-proof .proof-box-1>span{font-size:min(var(--proof1-desc-size),13px)!important}
.meb-home-proof .proof-box-2>span{font-size:min(var(--proof2-desc-size),13px)!important}
.meb-home-proof .proof-box-3>span{font-size:min(var(--proof3-desc-size),13px)!important}
.meb-home-proof .proof-box-4>span{font-size:min(var(--proof4-desc-size),13px)!important}
.meb-home-proof .legal-note{font-size:min(var(--proof-legal-size),10px)!important}
}
/* ==========================================================
v46 — MOBILE GLOBAL OPTIMIZATION
Target: iPhone / small Android screens. Prevent overlap,
oversized typography, horizontal overflow, and broken nav.
Desktop rules remain unchanged.
========================================================== */
@media(max-width:760px){
html,body{max-width:100%;overflow-x:hidden!important;}
body{font-size:16px;}
img,video,svg{max-width:100%;height:auto;}
/* Announcement */
.announce{min-height:36px!important;height:auto!important;padding:8px 12px!important;}
.announce-inner{width:100%!important;display:flex!important;justify-content:center!important;align-items:center!important;gap:6px!important;white-space:normal!important;text-align:center!important;line-height:1.35!important;font-size:11px!important;}
.announce-mark,.announce-inner>a{display:none!important;}
.announce-inner>span{max-width:100%!important;overflow-wrap:anywhere!important;word-break:keep-all!important;}
/* Header: fixed proportions and no crowding */
.site-header{position:sticky!important;top:0!important;z-index:999!important;background:#fff!important;}
.header-inner{height:72px!important;width:100%!important;padding:0 14px!important;display:grid!important;grid-template-columns:44px minmax(0,1fr) 116px!important;gap:6px!important;align-items:center!important;}
.menu-btn{display:grid!important;place-items:center!important;width:40px!important;height:40px!important;padding:0!important;font-size:0!important;color:#3188ff!important;background:transparent!important;}
.menu-btn:before{content:'☰';font-size:28px!important;line-height:1!important;}
.logo{font-size:clamp(30px,9.5vw,44px)!important;line-height:1!important;text-align:center!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;letter-spacing:-.055em!important;}
.header-actions{display:flex!important;justify-content:flex-end!important;min-width:0!important;}
.header-text-link,.header-actions>.icon-btn{display:none!important;}
.lang-toggle{width:108px!important;min-height:44px!important;padding:0 10px!important;border:1.5px solid #111!important;background:#fff!important;justify-content:center!important;gap:6px!important;font-size:16px!important;white-space:nowrap!important;}
/* Mobile navigation becomes a real drawer; no overlapping cards */
.mobile-nav{display:none!important;position:fixed!important;left:0!important;right:0!important;top:108px!important;bottom:0!important;width:100%!important;height:auto!important;max-height:none!important;padding:0 16px 24px!important;background:#fff!important;border:0!important;border-top:1px solid #111!important;z-index:998!important;overflow-y:auto!important;overflow-x:hidden!important;grid-template-columns:none!important;gap:0!important;}
.mobile-nav.open{display:block!important;}
.mobile-nav-head{display:block!important;padding:24px 0 18px!important;border-bottom:2px solid #111!important;font-size:32px!important;line-height:1!important;letter-spacing:-.05em!important;}
.mobile-nav-head span{display:block!important;margin-top:8px!important;font-size:11px!important;line-height:1.35!important;letter-spacing:.08em!important;}
.mobile-nav a{display:flex!important;align-items:center!important;width:100%!important;min-height:58px!important;padding:14px 4px!important;margin:0!important;border:0!important;border-bottom:1px solid #111!important;border-radius:0!important;background:#fff!important;font-size:20px!important;font-weight:800!important;line-height:1.25!important;text-align:left!important;white-space:normal!important;word-break:keep-all!important;overflow-wrap:anywhere!important;}
/* Main hero: media + copy never exceed phone width */
.inkey-hero{overflow:hidden!important;}
.inkey-hero>.wrap{width:100%!important;max-width:100%!important;padding:0 14px!important;}
.inkey-hero .hero-grid{display:flex!important;flex-direction:column!important;gap:0!important;min-height:0!important;width:100%!important;}
.inkey-hero .hero-art.hero-slider{order:1!important;width:100%!important;max-width:100%!important;margin:0!important;border-left:1.5px solid #111!important;border-right:1.5px solid #111!important;overflow:hidden!important;}
.inkey-hero .hero-copy{order:2!important;width:100%!important;max-width:100%!important;padding:34px 2px 40px!important;margin:0!important;}
.inkey-hero .kicker{font-size:13px!important;line-height:1.35!important;letter-spacing:.08em!important;margin:0 0 26px!important;}
.inkey-hero .hero-display-title{width:100%!important;max-width:100%!important;margin:0 0 24px!important;}
.inkey-hero .hero-display-title .hero-title-line{display:block!important;width:100%!important;max-width:100%!important;font-size:clamp(40px,13.5vw,58px)!important;line-height:1.04!important;letter-spacing:-.055em!important;word-break:keep-all!important;overflow-wrap:normal!important;transform:none!important;position:static!important;}
.inkey-hero .hero-sub{width:100%!important;max-width:100%!important;margin:0!important;font-size:16px!important;line-height:1.7!important;word-break:keep-all!important;opacity:1!important;color:#222!important;}
.inkey-hero .hero-buttons{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;margin-top:24px!important;}
.inkey-hero .hero-mini-proof{display:flex!important;flex-wrap:wrap!important;gap:6px!important;margin-top:16px!important;}
.inkey-hero .hero-mini-proof span{max-width:100%!important;font-size:10px!important;line-height:1.25!important;}
/* Prevent admin X/Y settings from moving text off canvas on mobile */
.hero-title-line,[data-ko][data-en]{left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;}
/* Section headings / body */
.section{padding:56px 0!important;}
.section-head{margin-bottom:26px!important;gap:12px!important;}
.section h2,.section-head h2,.ecosystem-copy h2,.life-copy h2,.final-cta h2,.page-edit-copy h2,.about-story-copy h2{font-size:clamp(34px,10vw,48px)!important;line-height:1.08!important;letter-spacing:-.05em!important;word-break:keep-all!important;}
.section-head p,.ecosystem-copy p,.life-copy p,.routine-intro p,.final-cta p,.page-edit-copy p,.about-story-copy p{font-size:15px!important;line-height:1.7!important;word-break:keep-all!important;}
/* Proof / cards */
.proof-band{width:calc(100% - 28px)!important;margin-left:auto!important;margin-right:auto!important;}
.proof-tile{min-height:118px!important;padding:18px!important;}
.proof-tile strong{font-size:36px!important;}
.product-grid,.review-grid{max-width:100%!important;}
.shop-card{min-width:88%!important;}
.catalog-grid{grid-template-columns:1fr!important;}
/* Concern/category cards */
.concern-grid{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important;}
.concern-card{min-width:0!important;min-height:132px!important;padding:14px!important;}
.concern-card span{font-size:18px!important;line-height:1.05!important;overflow-wrap:anywhere!important;}
.concern-card small{font-size:10px!important;line-height:1.3!important;}
/* Science proof: turn 4-column desktop strip into phone-friendly 2x2 */
.meb-home-proof .proof-head{display:flex!important;align-items:flex-start!important;gap:16px!important;}
.meb-home-proof .proof-head>span{font-size:clamp(36px,11vw,50px)!important;line-height:1!important;max-width:100%!important;}
.meb-home-proof .proof-head .text-link{min-height:44px!important;padding:12px 14px!important;align-self:flex-start!important;}
.meb-home-proof .big-proof-grid{grid-template-columns:1fr 1fr!important;width:100%!important;}
.meb-home-proof .big-proof{min-width:0!important;min-height:170px!important;padding:18px!important;}
.meb-home-proof .big-proof b{font-size:clamp(30px,10vw,44px)!important;line-height:1!important;overflow-wrap:anywhere!important;}
.meb-home-proof .big-proof span{font-size:12px!important;line-height:1.45!important;word-break:keep-all!important;}
.meb-home-proof .legal-note{font-size:10px!important;line-height:1.5!important;}
/* Sub pages */
.subhero{padding:38px 0!important;}
.subhero-grid,.pd-grid,.page-edit-grid,.about-story,.ecosystem-grid,.life-grid{grid-template-columns:1fr!important;gap:24px!important;}
.subhero h1,.pd-copy h1{font-size:clamp(40px,12vw,56px)!important;line-height:1.04!important;word-break:keep-all!important;}
.subhero-image,.page-edit-media,.life-photo{width:100%!important;max-width:100%!important;}
/* Footer */
.footer-grid{grid-template-columns:1fr 1fr!important;}
.footer-brand-col{grid-column:1/-1!important;}
}
@media(max-width:390px){
.header-inner{grid-template-columns:40px minmax(0,1fr) 98px!important;padding:0 10px!important;}
.logo{font-size:30px!important;}
.lang-toggle{width:94px!important;font-size:14px!important;}
.mobile-nav{top:108px!important;padding-left:12px!important;padding-right:12px!important;}
.inkey-hero>.wrap{padding:0 10px!important;}
.inkey-hero .hero-display-title .hero-title-line{font-size:clamp(36px,12.5vw,48px)!important;}
.concern-grid{grid-template-columns:1fr!important;}
.meb-home-proof .big-proof-grid{grid-template-columns:1fr!important;}
}
@media(max-width:760px){body.meb-mobile-nav-open{overflow:hidden!important;}}
/* ==========================================================
v47 — MOBILE CATEGORY SQUARES + BILINGUAL LABELS
========================================================== */
.filter-pills a{
display:inline-flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:3px;
text-align:center;
}
.filter-pills a span{
display:block;
font-weight:900;
line-height:1.05;
letter-spacing:-.02em;
}
.filter-pills a small{
display:block;
margin:0!important;
opacity:.72;
font-weight:700;
line-height:1.2;
letter-spacing:-.03em;
word-break:keep-all;
}
@media(max-width:760px){
.filter-pills{
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:8px!important;
width:100%!important;
margin:18px 0 28px!important;
}
.filter-pills a{
width:100%!important;
min-width:0!important;
aspect-ratio:1 / 1!important;
height:auto!important;
min-height:0!important;
padding:8px 5px!important;
border:1.5px solid #111!important;
border-radius:10px!important;
background:#fff!important;
overflow:hidden!important;
}
.filter-pills a.active{
background:#111!important;
color:#fff!important;
}
.filter-pills a span{
font-size:clamp(9px,2.7vw,12px)!important;
line-height:1.06!important;
overflow-wrap:anywhere;
}
.filter-pills a small{
font-size:clamp(8px,2.3vw,10px)!important;
line-height:1.18!important;
}
}
@media(max-width:360px){
.filter-pills{gap:6px!important;}
.filter-pills a{padding:6px 3px!important;border-radius:8px!important;}
.filter-pills a span{font-size:9px!important;}
.filter-pills a small{font-size:7.5px!important;}
}
/* ==========================================================
v48 — FULL-WIDTH CATEGORY SQUARE GRID (DESKTOP + MOBILE)
Same bilingual square-card treatment across all devices.
========================================================== */
.filter-pills{
display:grid!important;
grid-template-columns:repeat(8,minmax(0,1fr))!important;
gap:10px!important;
width:100%!important;
max-width:none!important;
margin:24px 0 38px!important;
align-items:stretch!important;
}
.filter-pills a{
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
min-width:0!important;
aspect-ratio:1 / 1!important;
height:auto!important;
min-height:0!important;
padding:12px 8px!important;
border:2px solid #111!important;
border-radius:10px!important;
background:#fff!important;
color:#111!important;
text-align:center!important;
gap:6px!important;
overflow:hidden!important;
box-sizing:border-box!important;
}
.filter-pills a.active,
.filter-pills a:hover{
background:#111!important;
color:#fff!important;
}
.filter-pills a span{
display:block!important;
font-size:clamp(13px,1.05vw,17px)!important;
line-height:1.08!important;
font-weight:900!important;
letter-spacing:-.025em!important;
white-space:normal!important;
overflow-wrap:anywhere!important;
}
.filter-pills a small{
display:block!important;
margin:0!important;
font-size:clamp(10px,.78vw,13px)!important;
line-height:1.25!important;
font-weight:700!important;
opacity:.78!important;
letter-spacing:-.035em!important;
word-break:keep-all!important;
white-space:normal!important;
}
.filter-pills a.active small{opacity:.88!important;}
/* Tablet: still full width, 4 columns */
@media(max-width:1024px){
.filter-pills{
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:10px!important;
margin:20px 0 32px!important;
}
.filter-pills a{
padding:12px 8px!important;
border-radius:10px!important;
}
.filter-pills a span{font-size:15px!important;}
.filter-pills a small{font-size:11px!important;}
}
/* Mobile: larger 3-column squares for readability */
@media(max-width:760px){
.filter-pills{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:9px!important;
width:100%!important;
margin:18px 0 30px!important;
}
.filter-pills a{
aspect-ratio:1 / 1!important;
padding:10px 6px!important;
border:1.7px solid #111!important;
border-radius:9px!important;
}
.filter-pills a span{
font-size:clamp(12px,3.7vw,15px)!important;
line-height:1.05!important;
}
.filter-pills a small{
font-size:clamp(9px,2.8vw,11px)!important;
line-height:1.2!important;
}
}
@media(max-width:380px){
.filter-pills{gap:7px!important;}
.filter-pills a span{font-size:11px!important;}
.filter-pills a small{font-size:8.5px!important;}
}
/* ==========================================================
v49 — instant category filtering, no page jump
========================================================== */
.meb-instant-catalog .catalog-card[hidden],
.meb-instant-catalog .meb-filter-hidden{
display:none!important;
}
.meb-instant-filters a{
cursor:pointer;
user-select:none;
-webkit-tap-highlight-color:transparent;
}
.meb-instant-concern-section{
scroll-margin-top:0;
}
\n\n/* ==========================================================
v51 — SCIENCE YOU CAN SEE font-control priority fix
Dedicated administrator font settings must win over v46 mobile caps
and earlier generic .big-proof rules.
========================================================== */
.meb-home-proof .proof-head>span{font-size:var(--proof-title-size)!important;}
.meb-home-proof .proof-head .text-link{font-size:var(--proof-button-size)!important;}
.meb-home-proof .proof-box-1>b{font-size:var(--proof1-value-size)!important;}
.meb-home-proof .proof-box-1>span{font-size:var(--proof1-desc-size)!important;}
.meb-home-proof .proof-box-2>b{font-size:var(--proof2-value-size)!important;}
.meb-home-proof .proof-box-2>span{font-size:var(--proof2-desc-size)!important;}
.meb-home-proof .proof-box-3>b{font-size:var(--proof3-value-size)!important;}
.meb-home-proof .proof-box-3>span{font-size:var(--proof3-desc-size)!important;}
.meb-home-proof .proof-box-4>b{font-size:var(--proof4-value-size)!important;}
.meb-home-proof .proof-box-4>span{font-size:var(--proof4-desc-size)!important;}
.meb-home-proof .legal-note{font-size:var(--proof-legal-size)!important;}
@media(max-width:760px){
.meb-home-proof .proof-head>span{font-size:min(var(--proof-title-size),50px)!important;}
.meb-home-proof .proof-head .text-link{font-size:min(var(--proof-button-size),16px)!important;}
.meb-home-proof .proof-box-1>b{font-size:min(var(--proof1-value-size),44px)!important;}
.meb-home-proof .proof-box-2>b{font-size:min(var(--proof2-value-size),44px)!important;}
.meb-home-proof .proof-box-3>b{font-size:min(var(--proof3-value-size),44px)!important;}
.meb-home-proof .proof-box-4>b{font-size:min(var(--proof4-value-size),44px)!important;}
.meb-home-proof .proof-box-1>span{font-size:min(var(--proof1-desc-size),16px)!important;}
.meb-home-proof .proof-box-2>span{font-size:min(var(--proof2-desc-size),16px)!important;}
.meb-home-proof .proof-box-3>span{font-size:min(var(--proof3-desc-size),16px)!important;}
.meb-home-proof .proof-box-4>span{font-size:min(var(--proof4-desc-size),16px)!important;}
.meb-home-proof .legal-note{font-size:min(var(--proof-legal-size),12px)!important;}
}
/* =========================================================
v52 — homepage top 3 Proof band dedicated font controls
Fixes the upper 3-box summary band so admin font sizes
apply directly on both PC and mobile without being reset
by generic typography rules.
========================================================= */
.meb-top-proof .proof-tile small{font-size:var(--top-proof-index-size)!important;line-height:1.1!important;}
.meb-top-proof .top-proof-box-1 strong{font-size:var(--top-proof1-value-size)!important;line-height:.82!important;}
.meb-top-proof .top-proof-box-1 span{font-size:var(--top-proof1-desc-size)!important;line-height:1.3!important;}
.meb-top-proof .top-proof-box-2 strong{font-size:var(--top-proof2-value-size)!important;line-height:.82!important;}
.meb-top-proof .top-proof-box-2 span{font-size:var(--top-proof2-desc-size)!important;line-height:1.3!important;}
.meb-top-proof .top-proof-box-3 strong{font-size:var(--top-proof3-value-size)!important;line-height:.82!important;}
.meb-top-proof .top-proof-box-3 span{font-size:var(--top-proof3-desc-size)!important;line-height:1.3!important;}
@media (max-width: 1024px){
.meb-top-proof .proof-tile{padding:18px 20px!important;}
.meb-top-proof .proof-tile small{font-size:min(var(--top-proof-index-size),11px)!important;}
.meb-top-proof .top-proof-box-1 strong{font-size:min(var(--top-proof1-value-size),44px)!important;}
.meb-top-proof .top-proof-box-2 strong{font-size:min(var(--top-proof2-value-size),44px)!important;}
.meb-top-proof .top-proof-box-3 strong{font-size:min(var(--top-proof3-value-size),44px)!important;}
.meb-top-proof .top-proof-box-1 span{font-size:min(var(--top-proof1-desc-size),12px)!important;}
.meb-top-proof .top-proof-box-2 span{font-size:min(var(--top-proof2-desc-size),12px)!important;}
.meb-top-proof .top-proof-box-3 span{font-size:min(var(--top-proof3-desc-size),12px)!important;}
}
@media (max-width: 760px){
.meb-top-proof{grid-template-columns:1fr!important;width:calc(100% - 28px)!important;border-left:2px solid #111!important;}
.meb-top-proof .proof-tile{min-height:118px!important;padding:18px!important;grid-template-columns:42px 1fr!important;grid-template-rows:auto 1fr!important;gap:0 12px!important;}
.meb-top-proof .proof-tile small{font-size:min(var(--top-proof-index-size),11px)!important;align-self:start!important;}
.meb-top-proof .top-proof-box-1 strong{font-size:min(var(--top-proof1-value-size),38px)!important;grid-row:2;grid-column:1/3;}
.meb-top-proof .top-proof-box-2 strong{font-size:min(var(--top-proof2-value-size),38px)!important;grid-row:2;grid-column:1/3;}
.meb-top-proof .top-proof-box-3 strong{font-size:min(var(--top-proof3-value-size),38px)!important;grid-row:2;grid-column:1/3;}
.meb-top-proof .top-proof-box-1 span{font-size:min(var(--top-proof1-desc-size),12px)!important;grid-column:2;grid-row:1;text-align:right;align-self:start;}
.meb-top-proof .top-proof-box-2 span{font-size:min(var(--top-proof2-desc-size),12px)!important;grid-column:2;grid-row:1;text-align:right;align-self:start;}
.meb-top-proof .top-proof-box-3 span{font-size:min(var(--top-proof3-desc-size),12px)!important;grid-column:2;grid-row:1;text-align:right;align-self:start;}
}
/* ==========================================================
v54 — SCIENCE page image/GIF/MP4 media support
Hero right panel + Technology cards + Evidence panel
========================================================== */
.subpage .subhero-image video,
.subpage .sd-image video,
.subpage .page-edit-media video{
display:block!important;
width:100%!important;
height:100%!important;
max-width:100%!important;
max-height:100%!important;
object-fit:contain!important;
object-position:center center!important;
background:transparent!important;
}
.subpage .subhero-image img,
.subpage .sd-image img,
.subpage .page-edit-media img{
object-fit:contain!important;
object-position:center center!important;
}
/* Keep the Science Hero frame stable even when a portrait/landscape video is uploaded. */
.subpage .subhero-image{
position:relative!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
overflow:hidden!important;
}
/* Technology and Evidence media can also accept video without layout collapse. */
.subpage .sd-image,
.subpage .page-edit-media{
position:relative!important;
overflow:hidden!important;
}
@media(max-width:760px){
.subpage .subhero-image video,
.subpage .sd-image video,
.subpage .page-edit-media video{
width:100%!important;
height:100%!important;
object-fit:contain!important;
}
}
/* =========================================================
v55 — mobile Science swipe + menu typography + Footer admin
========================================================= */
html,body{max-width:100%;overflow-x:hidden;}
/* Footer / Newsletter values are controlled by admin CSS variables. */
.footer-join span{font-size:var(--footer-join-label-size)!important;}
.footer-join h3{font-size:var(--footer-join-title-size)!important;}
.footer-join .footer-newsletter-email{font-size:var(--footer-email-size)!important;}
.footer-join .footer-signup-button{font-size:var(--footer-signup-size)!important;display:flex;align-items:center;justify-content:center;border:0;border-left:1.5px solid currentColor;background:var(--lime);color:#111;font-weight:900;padding:0 16px;white-space:nowrap;text-decoration:none;}
.science-swipe-guide{display:none;}
@media(max-width:760px){
/* Mobile navigation: every item uses one dedicated admin-controlled size. */
.mobile-nav a{line-height:1.18!important;min-height:64px!important;padding:15px 8px!important;}
.mobile-nav-head{line-height:1!important;}
/* Science cards become a true finger-scroll carousel instead of overflowing the page. */
.science-detail{overflow:hidden!important;}
.science-detail>.wrap{width:100%!important;max-width:none!important;padding-left:14px!important;padding-right:0!important;overflow:visible!important;}
.science-detail-grid{
display:flex!important;
grid-template-columns:none!important;
gap:12px!important;
width:100%!important;
max-width:100%!important;
overflow-x:auto!important;
overflow-y:hidden!important;
-webkit-overflow-scrolling:touch!important;
scroll-snap-type:x mandatory!important;
scroll-behavior:smooth!important;
overscroll-behavior-x:contain!important;
touch-action:pan-x pan-y!important;
padding:0 34px 10px 0!important;
border-left:0!important;
border-top:0!important;
scrollbar-width:none!important;
}
.science-detail-grid::-webkit-scrollbar{display:none!important;}
.science-detail-grid .sd-card{
flex:0 0 calc(100vw - 48px)!important;
width:calc(100vw - 48px)!important;
max-width:calc(100vw - 48px)!important;
min-width:0!important;
scroll-snap-align:start!important;
scroll-snap-stop:always!important;
border:2px solid #111!important;
box-sizing:border-box!important;
overflow:hidden!important;
}
.science-detail-grid .sd-card .sd-image{width:100%!important;max-width:100%!important;overflow:hidden!important;}
.science-detail-grid .sd-card .sd-image img,
.science-detail-grid .sd-card .sd-image video{width:100%!important;max-width:100%!important;height:100%!important;object-fit:contain!important;}
.science-swipe-guide{
display:grid!important;
grid-template-columns:48px 1fr 48px!important;
align-items:center!important;
gap:10px!important;
margin:14px 14px 0 0!important;
}
.science-swipe-guide button{
width:48px!important;height:48px!important;border:2px solid #111!important;border-radius:50%!important;background:#fff!important;color:#111!important;font-size:22px!important;font-weight:900!important;cursor:pointer!important;
}
.science-swipe-guide button:disabled{opacity:.28!important;}
.science-swipe-guide span{text-align:center!important;font-size:13px!important;font-weight:800!important;letter-spacing:.01em!important;}
.footer-join h3{font-size:var(--footer-mobile-title-size)!important;line-height:1.15!important;}
.footer-join .email-box{width:100%!important;}
.footer-join .footer-newsletter-email{min-width:0!important;width:100%!important;}
.footer-join .footer-signup-button{min-height:48px!important;padding:0 14px!important;}
}
@media(max-width:390px){
.science-detail-grid .sd-card{flex-basis:calc(100vw - 36px)!important;width:calc(100vw - 36px)!important;max-width:calc(100vw - 36px)!important;}
.science-detail>.wrap{padding-left:10px!important;}
.science-swipe-guide{margin-right:10px!important;}
}
/* v56 — Hero typography priority cleanup */
.inkey-hero .hero-display-title .hero-title-line{font-size:inherit!important;}
@media(max-width:760px){.inkey-hero .hero-display-title .hero-title-line{font-size:inherit!important;}}
/* ==========================================================
v61 — BIO BLUE FINAL / ACTUAL LOADED CSS
The prior blue layer was accidentally added to main-v36.css,
while the current theme loads main-v40.css. v61 applies the
palette to the real loaded stylesheet and cache-busts it.
========================================================== */
:root{
--brand-blue:#67C8FF;
--brand-blue-soft:#EAF8FF;
--brand-blue-deep:#3188FF;
--brand-lime:#D9FF58;
--brand-pink:#FFD6E4;
--blue:#67C8FF;
}
/* Global brand cues */
.announce{
background:#67C8FF!important;
color:#111!important;
}
a:hover,
.text-link:hover{
color:#3188FF;
}
/* Hero */
.inkey-hero .hero-art.hero-slider,
.inkey-hero .hero-slide{
background:#EAF8FF!important;
}
.hero-slider-arrow:hover,
.hero-dot.is-active{
background:#67C8FF!important;
color:#111!important;
}
/* Upper 3 Proof cards */
.meb-top-proof .top-proof-box-1{background:#fff!important;}
.meb-top-proof .top-proof-box-2{background:#67C8FF!important;}
.meb-top-proof .top-proof-box-3{background:#EAF8FF!important;}
/* Homepage SCIENCE YOU CAN SEE */
.meb-home-proof .proof-box-1{background:#fff!important;}
.meb-home-proof .proof-box-2{background:#67C8FF!important;}
.meb-home-proof .proof-box-3{background:#EAF8FF!important;}
.meb-home-proof .proof-box-4{background:#fff!important;}
/* Science / evidence */
.science-card:nth-child(1),
.sd-card:nth-child(1){background:#fff!important;}
.science-card:nth-child(2),
.sd-card:nth-child(2){background:#67C8FF!important;}
.science-card:nth-child(3),
.sd-card:nth-child(3){background:#EAF8FF!important;}
.page-edit-section,
.subhero.blue,
.subhero.c-blue{background:#EAF8FF!important;}
/* Ecosystem / routine */
.ecosystem{background:#EAF8FF!important;}
.ecosystem .orbit-center{background:#67C8FF!important;}
.routine{background:#67C8FF!important;}
/* Category / filter selected states */
.filter-pills a.active,
.filter-pills button.active,
.filter-pills a:hover,
.filter-pills button:hover,
.concern-filter a.active,
.concern-filter button.active{
background:#67C8FF!important;
color:#111!important;
border-color:#111!important;
}
.concern-card:hover{
box-shadow:inset 0 0 0 3px #67C8FF!important;
}
/* Buttons */
.btn-black:hover,
.quick:hover,
.smartstore-buy:hover{
background:#67C8FF!important;
color:#111!important;
}
.btn-white:hover{
background:#EAF8FF!important;
color:#111!important;
}
/* Reviews */
.verified-badge,
.review-detail-card .verified-badge,
.review-pagination a.active{
background:#67C8FF!important;
color:#111!important;
}
/* Footer / Newsletter */
.footer-signup-button,
.email-box .footer-signup-button,
.email-box button{
background:#67C8FF!important;
color:#111!important;
}
.footer-join .eyebrow,
.footer-join> .wrap > div:first-child > span{
color:#67C8FF!important;
}
/* Mobile consistency */
@media(max-width:760px){
.mobile-nav a:hover,
.mobile-nav a:focus{
background:#EAF8FF!important;
color:#111!important;
}
.filter-pills a.active,
.filter-pills button.active{
background:#67C8FF!important;
color:#111!important;
}
}
/* ==========================================================
v62 — SCIENCE CARD CONTRAST FIX
01 image / 02 BIO BLUE / 03 ICE BLUE
All text optimized for contrast and readability.
========================================================== */
/* Card 01: preserve image clarity and use dark typography */
.science-card:nth-child(1),
.sd-card:nth-child(1){
position:relative!important;
background:#fff!important;
color:#111!important;
}
.science-card:nth-child(1)::before,
.sd-card:nth-child(1)::before{
background:rgba(255,255,255,.12)!important;
opacity:1!important;
}
.science-card:nth-child(1) *,
.sd-card:nth-child(1) *{
color:#111!important;
}
.science-card:nth-child(1) .science-card-media,
.sd-card:nth-child(1) .science-card-media{
opacity:1!important;
filter:none!important;
}
.science-card:nth-child(1) img,
.science-card:nth-child(1) video,
.sd-card:nth-child(1) img,
.sd-card:nth-child(1) video{
opacity:1!important;
filter:none!important;
}
/* Card 02: BIO BLUE + black text */
.science-card:nth-child(2),
.sd-card:nth-child(2){
background:#67C8FF!important;
color:#111!important;
}
.science-card:nth-child(2) *,
.sd-card:nth-child(2) *{
color:#111!important;
}
/* Card 03: ICE BLUE + black text */
.science-card:nth-child(3),
.sd-card:nth-child(3){
background:#EAF8FF!important;
color:#111!important;
}
.science-card:nth-child(3) *,
.sd-card:nth-child(3) *{
color:#111!important;
}
/* Titles / descriptions */
.science-card h2,
.science-card h3,
.science-card h4,
.sd-card h2,
.sd-card h3,
.sd-card h4{
color:#111!important;
font-weight:900!important;
}
.science-card p,
.sd-card p{
color:#333!important;
opacity:1!important;
}
/* Number circles */
.science-card .num,
.science-card .number,
.science-card .science-number,
.sd-card .num,
.sd-card .number,
.sd-card .science-number{
background:#fff!important;
color:#111!important;
border:1.5px solid #111!important;
}
/* Generic top small number/text if represented as span */
.science-card>span:first-child,
.sd-card>span:first-child{
background:#fff!important;
color:#111!important;
border:1.5px solid #111!important;
}
/* Prevent old white-text rules from winning */
.science-card:nth-child(2) h2,
.science-card:nth-child(2) h3,
.science-card:nth-child(2) p,
.science-card:nth-child(3) h2,
.science-card:nth-child(3) h3,
.science-card:nth-child(3) p,
.sd-card:nth-child(2) h2,
.sd-card:nth-child(2) h3,
.sd-card:nth-child(2) p,
.sd-card:nth-child(3) h2,
.sd-card:nth-child(3) h3,
.sd-card:nth-child(3) p{
color:#111!important;
opacity:1!important;
}
/* Hover: subtle deep-blue outline only */
.science-card,
.sd-card{
transition:box-shadow .2s ease, transform .2s ease!important;
}
.science-card:hover,
.sd-card:hover{
box-shadow:inset 0 0 0 3px #3188FF!important;
}
/* Mobile keeps the same contrast */
@media(max-width:760px){
.science-card:nth-child(2),
.sd-card:nth-child(2){
background:#67C8FF!important;
}
.science-card:nth-child(3),
.sd-card:nth-child(3){
background:#EAF8FF!important;
}
.science-card:nth-child(2) *,
.science-card:nth-child(3) *,
.sd-card:nth-child(2) *,
.sd-card:nth-child(3) *{
color:#111!important;
}
}
/* v63 Newsletter form + DB feedback */
.mebiome-newsletter-form{
position:relative;
}
.mebiome-newsletter-message{
position:absolute;
left:0;
top:calc(100% + 8px);
font-size:12px;
line-height:1.4;
font-weight:700;
min-height:17px;
}
.mebiome-newsletter-message.is-success{color:#67C8FF;}
.mebiome-newsletter-message.is-error{color:#ff8fb4;}
.mebiome-newsletter-message.is-loading{color:#fff;opacity:.7;}
.mebiome-newsletter-form button[disabled]{opacity:.55;cursor:wait;}
@media(max-width:760px){
.mebiome-newsletter-message{
position:static;
width:100%;
margin-top:8px;
}
}
/* ==========================================================
v64 — MOBILE NEWSLETTER INPUT SPACE FIX
========================================================== */
.meb-auto-translate.is-translating{
opacity:.55;
}
.meb-review-body{
white-space:pre-line;
}
@media(max-width:760px){
.footer-join .wrap{
display:block!important;
}
.footer-join .mebiome-newsletter-form,
.footer-join .email-box{
width:100%!important;
max-width:none!important;
display:grid!important;
grid-template-columns:1fr!important;
gap:10px!important;
margin-top:28px!important;
border:0!important;
overflow:visible!important;
}
.footer-join .mebiome-newsletter-email,
.footer-join .email-box input[type="email"]{
display:block!important;
width:100%!important;
min-width:0!important;
height:58px!important;
min-height:58px!important;
padding:0 16px!important;
border:1.5px solid #fff!important;
border-radius:0!important;
background:#111!important;
color:#fff!important;
font-size:16px!important;
line-height:1!important;
order:1!important;
box-sizing:border-box!important;
}
.footer-join .mebiome-newsletter-email::placeholder{
color:#b8b8b8!important;
opacity:1!important;
}
.footer-join .footer-signup-button,
.footer-join .email-box button{
width:100%!important;
min-width:0!important;
height:56px!important;
min-height:56px!important;
padding:0 18px!important;
border:1.5px solid #111!important;
background:#67C8FF!important;
color:#111!important;
justify-content:center!important;
font-size:16px!important;
order:2!important;
box-sizing:border-box!important;
}
.footer-join .mebiome-newsletter-message{
order:3!important;
position:static!important;
width:100%!important;
margin:0!important;
min-height:18px!important;
padding-top:2px!important;
font-size:13px!important;
}
}
/* v71A — Image-first fullscreen branding */
body.home .inkey-hero .hero-slide video{display:block!important}
body.home .inkey-hero .hero-copy{
background:rgba(255,255,255,.82)!important;
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
padding:26px 30px!important;
border:1.5px solid #111!important;
}
body.home .inkey-hero .hero-copy h1,
body.home .inkey-hero .hero-copy p,
body.home .inkey-hero .hero-copy .kicker{color:#111!important}
@media(max-width:760px){
body.home .inkey-hero .hero-copy{padding:18px!important;background:rgba(255,255,255,.86)!important}
}
/* v72 fallback — remove side gutters from fullscreen Hero */
body.home .inkey-hero{
width:100vw!important;
max-width:100vw!important;
margin-left:calc(50% - 50vw)!important;
margin-right:calc(50% - 50vw)!important;
}
body.home .inkey-hero .wrap,
body.home .inkey-hero .hero-layout,
body.home .inkey-hero .hero-art,
body.home .inkey-hero .hero-slider,
body.home .inkey-hero .hero-slide{
max-width:none!important;
width:100%!important;
padding-left:0!important;
padding-right:0!important;
margin-left:0!important;
margin-right:0!important;
}
body.home .inkey-hero .hero-slide img,
body.home .inkey-hero .hero-slide video,
body.home .inkey-hero .hero-art img,
body.home .inkey-hero .hero-art video{
width:100%!important;
height:100%!important;
object-fit:cover!important;
}
/* v73 fallback styles */
body.home .hero-copy-band{position:relative;z-index:5}
body.home .hero-copy-panel{background:#fff;border:2px solid #111;padding:34px 44px 28px}
body.home .inkey-hero .micro-badge{right:22px;bottom:22px;width:138px;height:138px;border-radius:50%;transform:none}
/* ==========================================================
v74 — TRUE FULL-SCREEN HERO MEDIA + 3 VIDEO SEQUENCE
========================================================== */
/* Restore videos hidden by the old image-first v71 layer */
body.home .inkey-hero .hero-slide video{
display:block!important;
}
/* Hero visual occupies the full browser width with no inner media gutter */
body.home .inkey-hero,
body.home .inkey-hero>.hero-grid,
body.home .inkey-hero .hero-art.hero-slider{
width:100vw!important;
max-width:100vw!important;
margin-left:0!important;
margin-right:0!important;
padding-left:0!important;
padding-right:0!important;
}
body.home .inkey-hero{
margin-left:calc(50% - 50vw)!important;
margin-right:calc(50% - 50vw)!important;
}
body.home .inkey-hero .hero-art.hero-slider{
height:calc(100svh - 100px)!important;
min-height:620px!important;
max-height:none!important;
position:relative!important;
background:#111!important;
overflow:hidden!important;
}
/* Kill old aspect-ratio / intrinsic-fit behavior at every wrapper level */
body.home .inkey-hero .hero-slides,
body.home .inkey-hero .hero-slide,
body.home .inkey-hero .hero-slide .hero-slide-media,
body.home .inkey-hero .hero-slide picture,
body.home .inkey-hero .hero-slide figure{
position:absolute!important;
inset:0!important;
width:100%!important;
max-width:none!important;
height:100%!important;
min-height:100%!important;
max-height:none!important;
aspect-ratio:auto!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
}
/* The actual image/video must COVER the whole viewport.
This deliberately crops overflow instead of letterboxing. */
body.home .inkey-hero .hero-slide img,
body.home .inkey-hero .hero-slide video,
body.home .inkey-hero .hero-slide .hero-slide-media{
position:absolute!important;
inset:0!important;
width:100%!important;
max-width:none!important;
height:100%!important;
min-height:100%!important;
max-height:none!important;
aspect-ratio:auto!important;
object-fit:cover!important;
object-position:center center!important;
margin:0!important;
padding:0!important;
background:transparent!important;
}
/* Ignore media-fit-ready legacy sizing */
body.home .inkey-hero .hero-art.hero-slider.media-fit-ready,
body.home .inkey-hero .hero-art.hero-slider.media-fit-ready .hero-slides,
body.home .inkey-hero .hero-art.hero-slider.media-fit-ready .hero-slide,
body.home .inkey-hero .hero-art.hero-slider.media-fit-ready .hero-slide img,
body.home .inkey-hero .hero-art.hero-slider.media-fit-ready .hero-slide video{
width:100%!important;
height:100%!important;
min-height:100%!important;
max-height:none!important;
aspect-ratio:auto!important;
object-fit:cover!important;
}
/* Controls / MPC stay over the video */
body.home .inkey-hero .hero-slider-prev{left:22px!important;}
body.home .inkey-hero .hero-slider-next{right:22px!important;}
body.home .inkey-hero .micro-badge{
right:24px!important;
bottom:24px!important;
width:138px!important;
height:138px!important;
border-radius:50%!important;
overflow:hidden!important;
z-index:20!important;
}
/* Copy panel stays below the media as requested in v73 */
body.home .hero-copy-band{
margin-top:0!important;
}
@media(max-width:1024px){
body.home .inkey-hero .hero-art.hero-slider{
height:72svh!important;
min-height:520px!important;
}
}
@media(max-width:760px){
body.home .inkey-hero .hero-art.hero-slider{
height:68svh!important;
min-height:420px!important;
}
body.home .inkey-hero .micro-badge{
right:14px!important;
bottom:14px!important;
width:104px!important;
height:104px!important;
}
}
/* ==========================================================
v75 — MOBILE HERO OPTIMIZATION
========================================================== */
@media(max-width:760px){
body.home .inkey-hero .hero-art.hero-slider{
height:min(62svh,620px)!important;
min-height:420px!important;
max-height:620px!important;
}
body.home .inkey-hero .hero-slide img,
body.home .inkey-hero .hero-slide video,
body.home .inkey-hero .hero-slide .hero-slide-media{
object-fit:cover!important;
object-position:35% 50%!important;
}
body.home .inkey-hero .micro-badge{
width:84px!important;
height:84px!important;
right:12px!important;
bottom:12px!important;
}
body.home .inkey-hero .micro-badge strong{font-size:20px!important;}
body.home .inkey-hero .micro-badge span{font-size:6px!important;}
body.home .inkey-hero .hero-slider-arrow{
width:38px!important;
height:38px!important;
background:rgba(255,255,255,.88)!important;
}
body.home .hero-copy-band{
width:calc(100% - 28px)!important;
margin-left:auto!important;
margin-right:auto!important;
}
body.home .hero-copy-panel{
padding:22px 18px 20px!important;
}
}
/* ==========================================================
v76 — FULLBLEED HOME GRID ALIGNMENT (DESKTOP)
Make hero-following boxes and product menus fill the full viewport width
so they visually match the full-width hero video.
========================================================== */
@media(min-width:761px){
body.home{overflow-x:hidden!important;}
/* 1) Copy band directly under hero: edge-to-edge like the hero itself */
body.home .hero-copy-band{
width:100vw!important;
max-width:100vw!important;
margin-left:calc(50% - 50vw)!important;
margin-right:calc(50% - 50vw)!important;
margin-top:0!important;
padding:0!important;
}
body.home .hero-copy-panel{
width:100%!important;
max-width:none!important;
margin:0!important;
min-height:0!important;
padding:38px 48px 28px!important;
border-left:2px solid #111!important;
border-right:2px solid #111!important;
border-top:0!important;
border-bottom:2px solid #111!important;
}
body.home .hero-copy-panel .hero-display-title{
max-width:none!important;
margin-right:0!important;
}
body.home .hero-copy-panel .hero-mini-proof{
display:flex!important;
flex-wrap:wrap!important;
gap:8px!important;
margin-top:22px!important;
}
/* 2) Top proof boxes: 3 equal-width boxes, full screen, zero outer gutter */
body.home .proof-band.meb-top-proof{
width:100vw!important;
max-width:100vw!important;
margin:0 calc(50% - 50vw)!important;
padding:0!important;
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:0!important;
border-left:2px solid #111!important;
border-top:0!important;
}
body.home .proof-band.meb-top-proof .proof-tile{
min-height:176px!important;
margin:0!important;
border-left:0!important;
border-top:0!important;
border-right:2px solid #111!important;
border-bottom:2px solid #111!important;
border-radius:0!important;
padding:18px 24px!important;
}
body.home .proof-band.meb-top-proof .proof-tile strong{
font-size:clamp(54px,4vw,74px)!important;
line-height:.88!important;
}
/* 3) Bestsellers section: section header + 4 product cards stretch to viewport */
body.home .bestsellers>.wrap{
width:100vw!important;
max-width:100vw!important;
margin-left:calc(50% - 50vw)!important;
margin-right:calc(50% - 50vw)!important;
padding:0!important;
}
body.home .bestsellers .section-head{
margin:0!important;
padding:0 32px 28px!important;
align-items:end!important;
gap:24px!important;
}
body.home .bestsellers .section-head>div{
max-width:900px!important;
}
body.home .bestsellers .inkey-products{
width:100%!important;
max-width:none!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:0!important;
border-left:2px solid #111!important;
border-top:2px solid #111!important;
}
body.home .bestsellers .inkey-products .shop-card{
min-height:700px!important;
}
body.home .bestsellers .inkey-products .shop-image{
height:auto!important;
aspect-ratio:1 / 1!important;
}
/* 4) Utility cards right below bestsellers also align full width for consistency */
body.home .utility-section>.wrap{
width:100vw!important;
max-width:100vw!important;
margin-left:calc(50% - 50vw)!important;
margin-right:calc(50% - 50vw)!important;
padding:0!important;
}
body.home .utility-grid{
width:100%!important;
max-width:none!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:0!important;
}
body.home .utility-card{
min-height:380px!important;
}
}
/* Tablet refinement before mobile stack */
@media(min-width:761px) and (max-width:1180px){
body.home .bestsellers .inkey-products{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
body.home .proof-band.meb-top-proof .proof-tile{
min-height:156px!important;
padding:16px 18px!important;
}
body.home .proof-band.meb-top-proof .proof-tile strong{
font-size:clamp(42px,5vw,58px)!important;
}
}
/* ==========================================================
v77 — MOBILE HERO VIDEO TEXT VISIBILITY FIX
Goal: preserve on-video Korean text visibility on mobile.
Previous mobile cover-cropping cut off the left text area.
For video slides on mobile, switch to CONTAIN + centered framing
so the entire video frame (including embedded text) remains visible.
========================================================== */
@media(max-width:760px){
body.home .inkey-hero .hero-art.hero-slider{
background:#111!important;
height:min(66svh,640px)!important;
min-height:440px!important;
max-height:640px!important;
}
/* Keep image slides filled, but show full video frames so text is not cropped */
body.home .inkey-hero .hero-slide video,
body.home .inkey-hero .hero-slide .hero-slide-media video{
object-fit:contain!important;
object-position:center center!important;
background:#111!important;
}
/* Video wrapper remains full-size, letterboxing if needed */
body.home .inkey-hero .hero-slide,
body.home .inkey-hero .hero-slide .hero-slide-media{
background:#111!important;
}
/* Slightly smaller badge so it does not cover the in-video copy */
body.home .inkey-hero .micro-badge{
width:78px!important;
height:78px!important;
right:10px!important;
bottom:10px!important;
}
body.home .inkey-hero .micro-badge strong{font-size:18px!important;}
body.home .inkey-hero .micro-badge span{font-size:6px!important;line-height:1.1!important;}
/* Move manual arrows inward and soften for mobile */
body.home .inkey-hero .hero-slider-prev{left:8px!important;}
body.home .inkey-hero .hero-slider-next{right:8px!important;}
body.home .inkey-hero .hero-slider-arrow{
width:34px!important;
height:34px!important;
background:rgba(255,255,255,.82)!important;
}
/* Copy panel below the hero: breathing room from Safari bottom bar */
body.home .hero-copy-band{
margin-top:10px!important;
width:calc(100% - 24px)!important;
}
body.home .hero-copy-panel{
padding:20px 16px 18px!important;
}
}
/* v78 fallback: mobile 16:9 landscape Hero */
@media(max-width:760px){
body.home .inkey-hero .hero-art.hero-slider{
height:auto!important;
min-height:0!important;
max-height:none!important;
aspect-ratio:16 / 9!important;
}
body.home .inkey-hero .hero-slide video{
object-fit:contain!important;
object-position:center center!important;
background:#111!important;
}
}
/* v79 fallback — mobile parent must not preserve old 78vh height */
@media(max-width:760px){
body.home .inkey-hero,
body.home .inkey-hero>.hero-grid{
height:auto!important;
min-height:0!important;
max-height:none!important;
background:#fff!important;
}
body.home .inkey-hero .hero-art.hero-slider{
height:auto!important;
min-height:0!important;
max-height:none!important;
aspect-ratio:16 / 9!important;
}
}
/* v80 fallback: keep mobile hero visible and stable */
@media(max-width:760px){
body.home .inkey-hero,
body.home .inkey-hero>.hero-grid{display:block!important;height:auto!important;min-height:0!important;max-height:none!important;background:#fff!important;}
body.home .inkey-hero .hero-art.hero-slider{display:block!important;position:relative!important;width:100vw!important;max-width:100vw!important;height:auto!important;min-height:220px!important;max-height:none!important;aspect-ratio:16 / 9!important;background:#111!important;overflow:hidden!important;}
body.home .inkey-hero .hero-art.hero-slider .hero-slides,
body.home .inkey-hero .hero-art.hero-slider .hero-slide{display:block!important;}
body.home .inkey-hero .hero-slide video{display:block!important;opacity:1!important;visibility:visible!important;}
}
/* v82 — isolated Hero final mobile geometry */
@media(max-width:760px){
body.home .inkey-hero,
body.home .inkey-hero>.hero-grid{
display:block!important;
width:100vw!important;
max-width:100vw!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
margin-left:calc(50% - 50vw)!important;
margin-right:calc(50% - 50vw)!important;
padding:0!important;
background:#fff!important;
overflow:visible!important;
}
body.home [data-hero-slider-v82].hero-art.hero-slider{
display:block!important;
position:relative!important;
width:100vw!important;
max-width:100vw!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
aspect-ratio:16/9!important;
margin:0!important;
padding:0!important;
background:#111!important;
overflow:hidden!important;
}
body.home [data-hero-slider-v82] .hero-slides,
body.home [data-hero-slider-v82] .hero-slide,
body.home [data-hero-slider-v82] .hero-slide .hero-slide-media{
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
min-height:0!important;
max-height:none!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
}
body.home [data-hero-slider-v82] .hero-slide{
display:block!important;
opacity:0!important;
visibility:hidden!important;
z-index:1!important;
}
body.home [data-hero-slider-v82] .hero-slide.is-active{
opacity:1!important;
visibility:visible!important;
z-index:2!important;
}
body.home [data-hero-slider-v82] .hero-slide video{
display:block!important;
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
opacity:1!important;
visibility:visible!important;
object-fit:contain!important;
object-position:center!important;
background:#111!important;
}
body.home [data-hero-slider-v82] .hero-slide img{
display:block!important;
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center!important;
}
body.home .hero-copy-band{
margin-top:12px!important;
}
}
/* ==========================================================
v83 — FULLWIDTH BESTSELLER BRAND FILM
Inserted immediately before BEST SELLERS.
========================================================== */
.meb-bestseller-film{
width:100vw!important;
max-width:100vw!important;
margin-left:calc(50% - 50vw)!important;
margin-right:calc(50% - 50vw)!important;
padding:0!important;
background:#111!important;
overflow:hidden!important;
}
.meb-bestseller-film-media{
position:relative!important;
width:100%!important;
min-height:min(72vh,820px)!important;
height:min(72vh,820px)!important;
overflow:hidden!important;
background:#111!important;
}
.meb-bestseller-film-video{
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
display:block!important;
object-fit:cover!important;
object-position:center center!important;
background:#111!important;
}
.meb-bestseller-film-media:after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.05) 48%,rgba(0,0,0,0) 72%);
pointer-events:none;
}
.meb-bestseller-film-overlay{
position:absolute!important;
left:clamp(28px,5vw,92px)!important;
bottom:clamp(34px,7vh,88px)!important;
z-index:3!important;
max-width:680px!important;
color:#fff!important;
}
.meb-bestseller-film-kicker{
display:block;
margin-bottom:12px;
font-size:12px;
font-weight:800;
letter-spacing:.14em;
}
.meb-bestseller-film-overlay h2{
margin:0 0 22px!important;
font-size:clamp(42px,5.8vw,88px)!important;
line-height:.92!important;
letter-spacing:-.055em!important;
color:#fff!important;
}
.meb-bestseller-film-link{
display:inline-flex!important;
align-items:center!important;
min-height:46px!important;
padding:0 18px!important;
border:1.5px solid #fff!important;
background:rgba(17,17,17,.12)!important;
color:#fff!important;
text-decoration:none!important;
font-size:12px!important;
font-weight:800!important;
letter-spacing:.04em!important;
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
}
.meb-bestseller-film-link:hover{
background:#fff!important;
color:#111!important;
}
@media(max-width:760px){
.meb-bestseller-film-media{
height:auto!important;
min-height:0!important;
aspect-ratio:16 / 9!important;
}
.meb-bestseller-film-video{
object-fit:contain!important;
object-position:center center!important;
}
.meb-bestseller-film-media:after{
background:linear-gradient(0deg,rgba(0,0,0,.46) 0%,rgba(0,0,0,.03) 58%,rgba(0,0,0,0) 80%);
}
.meb-bestseller-film-overlay{
left:16px!important;
right:16px!important;
bottom:16px!important;
max-width:none!important;
}
.meb-bestseller-film-kicker{
margin-bottom:6px!important;
font-size:8px!important;
}
.meb-bestseller-film-overlay h2{
margin-bottom:10px!important;
font-size:clamp(24px,8vw,38px)!important;
line-height:.95!important;
}
.meb-bestseller-film-link{
min-height:38px!important;
padding:0 12px!important;
font-size:10px!important;
}
}
/* ==========================================================
v84 — MIRACLE CREAM AS MAIN HERO
========================================================== */
body.home .meb-cream-hero{
width:100vw!important;
max-width:100vw!important;
margin-left:calc(50% - 50vw)!important;
margin-right:calc(50% - 50vw)!important;
padding:0!important;
background:#f7f5f2!important;
}
body.home .meb-cream-hero .hero-grid{
width:100%!important;
max-width:none!important;
margin:0!important;
padding:0!important;
}
body.home .meb-cream-hero-media{
position:relative!important;
width:100vw!important;
height:min(78vh,880px)!important;
min-height:620px!important;
overflow:hidden!important;
background:#f7f5f2!important;
}
body.home .meb-main-hero-video{
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
display:block!important;
object-fit:cover!important;
object-position:center center!important;
}
body.home .meb-cream-hero .micro-badge{
position:absolute!important;
right:24px!important;
bottom:24px!important;
width:128px!important;
height:128px!important;
border-radius:50%!important;
z-index:5!important;
}
/* ==========================================================
v84 — CURRENT WASH HERO MOVED AFTER BEST SELLERS
========================================================== */
.meb-wash-film-section{
width:100vw!important;
max-width:100vw!important;
margin-left:calc(50% - 50vw)!important;
margin-right:calc(50% - 50vw)!important;
padding:0!important;
background:#fff!important;
}
.meb-wash-film-head{
display:flex!important;
align-items:end!important;
justify-content:space-between!important;
gap:24px!important;
padding:46px clamp(24px,4vw,72px) 28px!important;
border-top:2px solid #111!important;
}
.meb-wash-film-head span{
font-size:11px!important;
font-weight:900!important;
letter-spacing:.12em!important;
}
.meb-wash-film-head h2{
margin:0!important;
max-width:980px!important;
font-size:clamp(30px,4.4vw,66px)!important;
line-height:.95!important;
letter-spacing:-.045em!important;
text-align:right!important;
}
.meb-wash-film-slider{
position:relative!important;
width:100vw!important;
height:min(72vh,820px)!important;
min-height:580px!important;
overflow:hidden!important;
background:#111!important;
}
.meb-wash-film-slides,
.meb-wash-film-slide,
.meb-wash-film-media{
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
margin:0!important;
padding:0!important;
}
.meb-wash-film-slide{
opacity:0!important;
visibility:hidden!important;
z-index:1!important;
}
.meb-wash-film-slide.is-active{
opacity:1!important;
visibility:visible!important;
z-index:2!important;
}
.meb-wash-film-media,
.meb-wash-film-media img,
.meb-wash-film-media video{
width:100%!important;
height:100%!important;
display:block!important;
object-fit:cover!important;
object-position:center!important;
}
.meb-wash-film-arrow{
position:absolute!important;
top:50%!important;
transform:translateY(-50%)!important;
z-index:8!important;
width:46px!important;
height:46px!important;
border:1.5px solid #111!important;
background:rgba(255,255,255,.88)!important;
color:#111!important;
cursor:pointer!important;
}
.meb-wash-film-prev{left:20px!important;}
.meb-wash-film-next{right:20px!important;}
.meb-wash-film-dots{
position:absolute!important;
left:20px!important;
bottom:20px!important;
z-index:8!important;
display:flex!important;
gap:7px!important;
padding:7px 9px!important;
background:rgba(255,255,255,.82)!important;
}
.meb-wash-film-dot{
width:28px!important;
height:4px!important;
border:0!important;
padding:0!important;
background:#ccc!important;
}
.meb-wash-film-dot.is-active{background:#67C8FF!important;}
.meb-wash-film-slider .micro-badge{
position:absolute!important;
right:24px!important;
bottom:24px!important;
width:112px!important;
height:112px!important;
border-radius:50%!important;
z-index:8!important;
}
@media(max-width:760px){
body.home .meb-cream-hero-media{
height:auto!important;
min-height:0!important;
aspect-ratio:16/9!important;
}
body.home .meb-main-hero-video{
object-fit:contain!important;
background:#f7f5f2!important;
}
body.home .meb-cream-hero .micro-badge{
right:8px!important;
bottom:8px!important;
width:66px!important;
height:66px!important;
}
.meb-wash-film-head{
display:block!important;
padding:30px 18px 20px!important;
}
.meb-wash-film-head span{
display:block!important;
margin-bottom:10px!important;
font-size:9px!important;
}
.meb-wash-film-head h2{
text-align:left!important;
font-size:clamp(28px,9vw,42px)!important;
}
.meb-wash-film-slider{
height:auto!important;
min-height:0!important;
aspect-ratio:16/9!important;
}
.meb-wash-film-media,
.meb-wash-film-media img,
.meb-wash-film-media video{
object-fit:contain!important;
background:#111!important;
}
.meb-wash-film-arrow{
width:34px!important;
height:34px!important;
}
.meb-wash-film-prev{left:8px!important;}
.meb-wash-film-next{right:8px!important;}
.meb-wash-film-dots{
left:8px!important;
bottom:8px!important;
padding:5px 6px!important;
}
.meb-wash-film-dot{
width:20px!important;
}
.meb-wash-film-slider .micro-badge{
right:8px!important;
bottom:8px!important;
width:64px!important;
height:64px!important;
}
}
/* ==========================================================
v86 — REVIEWS PAGE TEXT-ONLY HERO / GUIDE
Remove the two image boxes and use full-width editorial text.
========================================================== */
.reviews-text-hero{
background:#fff!important;
border-top:2px solid #111!important;
border-bottom:2px solid #111!important;
}
.reviews-text-hero .wrap{
width:min(100% - 48px, 1460px)!important;
max-width:1460px!important;
}
.reviews-text-hero-copy{
min-height:520px!important;
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
padding:64px 32px!important;
}
.reviews-text-hero-copy .eyebrow{
margin-bottom:18px!important;
}
.reviews-text-hero-copy h1{
max-width:1180px!important;
margin:0 0 28px!important;
font-size:clamp(64px,7.2vw,126px)!important;
line-height:.88!important;
letter-spacing:-.055em!important;
}
.reviews-text-hero-copy p{
max-width:980px!important;
margin:0!important;
font-size:18px!important;
line-height:1.6!important;
}
.reviews-text-guide{
background:#EAF8FF!important;
border-top:2px solid #111!important;
border-bottom:2px solid #111!important;
}
.reviews-text-guide .wrap{
width:min(100% - 48px, 1460px)!important;
max-width:1460px!important;
}
.reviews-text-guide-copy{
min-height:430px!important;
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
align-items:flex-start!important;
padding:64px 32px!important;
}
.reviews-text-guide-copy h2{
max-width:1120px!important;
margin:12px 0 24px!important;
font-size:clamp(54px,6.2vw,108px)!important;
line-height:.9!important;
letter-spacing:-.05em!important;
}
.reviews-text-guide-copy p{
max-width:980px!important;
margin:0 0 28px!important;
font-size:17px!important;
line-height:1.7!important;
}
/* Defensive: hide any legacy review page media boxes if old cached markup appears */
body .reviews-text-hero .subhero-image,
body .reviews-text-guide .page-edit-media{
display:none!important;
}
@media(max-width:760px){
.reviews-text-hero .wrap,
.reviews-text-guide .wrap{
width:calc(100% - 28px)!important;
}
.reviews-text-hero-copy{
min-height:0!important;
padding:42px 12px!important;
}
.reviews-text-hero-copy h1{
font-size:clamp(48px,14vw,72px)!important;
line-height:.92!important;
margin-bottom:22px!important;
}
.reviews-text-hero-copy p{
font-size:15px!important;
line-height:1.65!important;
}
.reviews-text-guide-copy{
min-height:0!important;
padding:44px 12px!important;
}
.reviews-text-guide-copy h2{
font-size:clamp(42px,12vw,64px)!important;
line-height:.94!important;
}
.reviews-text-guide-copy p{
font-size:15px!important;
}
}
/* ==========================================================
v87 — REVIEWS PAGE SPACING OPTIMIZATION
Reduce excessive top/bottom empty space in the two text-only sections.
========================================================== */
/* Top review hero */
.reviews-text-hero .wrap{
width:min(100% - 48px, 1460px)!important;
max-width:1460px!important;
}
.reviews-text-hero-copy{
min-height:0!important;
padding:72px 32px 64px!important;
justify-content:flex-start!important;
}
.reviews-text-hero-copy .eyebrow{
margin:0 0 16px!important;
}
.reviews-text-hero-copy h1{
margin:0 0 24px!important;
}
.reviews-text-hero-copy p{
margin:0!important;
}
/* Bottom REVIEW DATA section */
.reviews-text-guide{
padding:0!important;
}
.reviews-text-guide .wrap{
width:min(100% - 48px, 1460px)!important;
max-width:1460px!important;
}
.reviews-text-guide-copy{
min-height:0!important;
padding:64px 32px 58px!important;
justify-content:flex-start!important;
}
.reviews-text-guide-copy .eyebrow{
margin:0 0 14px!important;
}
.reviews-text-guide-copy h2{
margin:0 0 20px!important;
}
.reviews-text-guide-copy p{
margin:0 0 24px!important;
}
.reviews-text-guide-copy .btn{
margin-top:0!important;
}
/* Prevent generic section rules from re-adding large height/padding */
body .reviews-text-hero.subhero,
body .reviews-text-guide.page-edit-section{
min-height:0!important;
height:auto!important;
padding-top:0!important;
padding-bottom:0!important;
}
body .reviews-text-hero .wrap,
body .reviews-text-guide .wrap{
min-height:0!important;
height:auto!important;
}
/* Tablet */
@media(max-width:1100px) and (min-width:761px){
.reviews-text-hero-copy{
padding:58px 24px 52px!important;
}
.reviews-text-guide-copy{
padding:54px 24px 50px!important;
}
}
/* Mobile */
@media(max-width:760px){
.reviews-text-hero .wrap,
.reviews-text-guide .wrap{
width:calc(100% - 24px)!important;
}
.reviews-text-hero-copy{
padding:34px 8px 32px!important;
}
.reviews-text-hero-copy .eyebrow{
margin-bottom:10px!important;
}
.reviews-text-hero-copy h1{
margin-bottom:16px!important;
}
.reviews-text-guide-copy{
padding:34px 8px 32px!important;
}
.reviews-text-guide-copy .eyebrow{
margin-bottom:10px!important;
}
.reviews-text-guide-copy h2{
margin-bottom:16px!important;
}
.reviews-text-guide-copy p{
margin-bottom:20px!important;
}
}
/* ==========================================================
v89 — ABOUT / BRAND PAGE ADMIN EDITOR
========================================================== */
.meb-about-page .about-hero-eyebrow{font-size:var(--about-hero-eyebrow)!important;}
.meb-about-page .subhero h1{font-size:var(--about-hero-title)!important;}
.meb-about-page .subhero p{font-size:var(--about-hero-body)!important;}
.meb-about-page .about-story-eyebrow{font-size:var(--about-story-eyebrow)!important;}
.meb-about-page .about-story-copy h2{font-size:var(--about-story-title)!important;}
.meb-about-page .about-story-copy>p{font-size:var(--about-story-body)!important;}
.meb-about-page .story-steps b{font-size:var(--about-step-number)!important;}
.meb-about-page .story-steps strong{font-size:var(--about-step-title)!important;}
.meb-about-page .story-steps p{font-size:var(--about-step-body)!important;}
.meb-about-page .about-story-btn{font-size:var(--about-button)!important;}
.meb-about-page .subhero-image video,
.meb-about-page .subhero-image img,
.meb-about-page .about-story-media video,
.meb-about-page .about-story-media img,
.meb-about-page .about-page-hero-media video,
.meb-about-page .about-page-hero-media img,
.meb-about-page .about-story-main-media video,
.meb-about-page .about-story-main-media img{
width:100%!important;height:100%!important;display:block!important;object-fit:contain!important;object-position:center!important;
}
@media(max-width:760px){
.meb-about-page{--about-hero-title:min(var(--about-hero-title),54px);--about-story-title:min(var(--about-story-title),44px);}
.meb-about-page .subhero-image,.meb-about-page .about-story-media{height:auto!important;aspect-ratio:4/3!important;}
}
\n\n/* v91 — remove MPC badge everywhere, desktop + mobile */\n.micro-badge,\n.hero-slider .micro-badge,\n.meb-wash-film-slider .micro-badge,\n.meb-cream-hero .micro-badge,\nbody.home .inkey-hero .micro-badge{\n display:none!important;\n visibility:hidden!important;\n opacity:0!important;\n pointer-events:none!important;\n}\n
/* ==========================================================
v92 — Simplified Home / detailed content moved to subpages
========================================================== */
.meb-home-v92 .hero-copy-band{margin-top:18px!important;}
.meb-home-v92 .proof-band{margin-bottom:38px!important;}
.meb-home-v92 .bestsellers{padding-top:54px!important;padding-bottom:62px!important;}
.meb-home-v92 .concern-section{padding-top:54px!important;padding-bottom:62px!important;}
.meb-home-v92 .inkey-reviews{padding-top:58px!important;padding-bottom:64px!important;}
/* Give moved sections a deliberate subpage rhythm rather than a homepage-stack feel. */
.subpage .ecosystem,
.subpage .science-simple,
.subpage .meb-home-proof,
.subpage .life-science,
.subpage .routine,
.subpage .utility-section,
.subpage .meb-bestseller-film,
.subpage .meb-wash-film-section{margin-top:0!important;margin-bottom:0!important;}
.subpage .science-simple{border-top:2px solid #111!important;}
.subpage .life-science{border-top:2px solid #111!important;border-bottom:2px solid #111!important;}
@media(max-width:760px){
.meb-home-v92 .hero-copy-band{margin-top:10px!important;}
.meb-home-v92 .proof-band{margin-bottom:24px!important;}
.meb-home-v92 .bestsellers,
.meb-home-v92 .concern-section,
.meb-home-v92 .inkey-reviews{padding-top:34px!important;padding-bottom:40px!important;}
.subpage .ecosystem,
.subpage .science-simple,
.subpage .meb-home-proof,
.subpage .life-science,
.subpage .routine,
.subpage .utility-section{margin-top:0!important;}
}
/* ==========================================================
v93 — SIMPLIFIED HOME FINAL
- Removed large Hero copy box from homepage
- Removed BEST SELLERS product carousel from homepage
- Reinserted Miracle Cream full-width film after proof tiles
========================================================== */
body.home .hero-copy-band,
body.home section#products.bestsellers{
display:none!important;
}
body.home .meb-home-v93 .meb-top-proof{
margin-top:clamp(24px,4vw,56px)!important;
}
body.home .meb-cream-feature-film{
margin-top:clamp(28px,5vw,76px)!important;
margin-bottom:0!important;
border-top:2px solid #111!important;
border-bottom:2px solid #111!important;
}
body.home .meb-cream-feature-film .meb-bestseller-film-media{
min-height:min(68vh,760px)!important;
height:min(68vh,760px)!important;
}
body.home .meb-cream-feature-film .meb-bestseller-film-overlay h2{
max-width:760px!important;
}
body.home .concern-section{
margin-top:0!important;
}
@media(max-width:760px){
body.home .meb-home-v93 .meb-top-proof{
margin-top:18px!important;
}
body.home .meb-cream-feature-film{
margin-top:26px!important;
}
body.home .meb-cream-feature-film .meb-bestseller-film-media{
height:auto!important;
min-height:0!important;
aspect-ratio:16/9!important;
}
body.home .meb-cream-feature-film .meb-bestseller-film-video{
object-fit:contain!important;
object-position:center!important;
background:#f7f5f2!important;
}
body.home .meb-cream-feature-film .meb-bestseller-film-overlay{
display:none!important;
}
}
/* ==========================================================
v94 — HOME PROOF OUTER BOX + BARRIER COPY + SUBPAGE INDEX
========================================================== */
/* 1) Complete the proof tiles as one clear outer box */
body.home .meb-home-v93 .meb-top-proof{
border-top:2px solid #111!important;
border-left:2px solid #111!important;
border-bottom:2px solid #111!important;
border-right:0!important;
}
body.home .meb-home-v93 .meb-top-proof .proof-tile:last-child{
border-right:2px solid #111!important;
}
/* 2) Restore BARRIER copy over the Miracle Cream video */
body.home .meb-cream-feature-film .meb-bestseller-film-overlay{
display:block!important;
}
body.home .meb-cream-feature-film .meb-bestseller-film-overlay h2{
text-transform:uppercase!important;
}
/* 3) Desktop header dropdowns for moved sections */
.desktop-nav-group{
position:relative;
display:flex;
align-items:stretch;
}
.desktop-nav-group>.desktop-nav-parent{
display:flex;
align-items:center;
}
.desktop-submenu{
position:absolute;
top:100%;
left:-18px;
min-width:260px;
padding:8px 0;
background:#fff;
border:2px solid #111;
box-shadow:0 14px 34px rgba(0,0,0,.08);
opacity:0;
visibility:hidden;
transform:translateY(8px);
transition:.18s ease;
z-index:1200;
}
.desktop-nav-group:hover .desktop-submenu,
.desktop-nav-group:focus-within .desktop-submenu{
opacity:1;
visibility:visible;
transform:translateY(0);
}
.desktop-submenu a{
display:block!important;
padding:11px 16px!important;
border:0!important;
border-bottom:1px solid #e5e5e5!important;
font-size:11px!important;
line-height:1.35!important;
white-space:nowrap;
}
.desktop-submenu a:last-child{border-bottom:0!important;}
.desktop-submenu a:hover{background:#EAF8FF!important;}
/* 4) On-page section index at the top of Science/About */
.meb-subpage-index{
display:flex;
flex-wrap:wrap;
gap:0;
padding-top:20px;
padding-bottom:20px;
border-bottom:2px solid #111;
}
.meb-subpage-index a{
display:flex;
align-items:center;
min-height:42px;
padding:0 15px;
border:1px solid #111;
border-right:0;
background:#fff;
font-size:11px;
font-weight:900;
letter-spacing:.02em;
}
.meb-subpage-index a:last-child{border-right:1px solid #111;}
.meb-subpage-index a:hover{background:#67C8FF;}
/* Mobile submenu labels and nested links */
.mobile-nav-section-label{
padding:18px 4px 8px!important;
border-bottom:2px solid #111!important;
font-size:10px!important;
font-weight:900!important;
letter-spacing:.12em!important;
color:#318CE7!important;
}
.mobile-nav a.mobile-sub-link{
min-height:48px!important;
padding:10px 12px!important;
font-size:15px!important;
font-weight:700!important;
background:#f8fbfd!important;
}
@media(max-width:760px){
/* complete outer proof box on mobile */
body.home .meb-home-v93 .meb-top-proof{
border-top:2px solid #111!important;
border-right:2px solid #111!important;
}
body.home .meb-home-v93 .meb-top-proof .proof-tile{
border-right:0!important;
}
body.home .meb-home-v93 .meb-top-proof .proof-tile:last-child{
border-right:0!important;
}
/* show BARRIER label on top of video without obscuring the whole mobile frame */
body.home .meb-cream-feature-film .meb-bestseller-film-overlay{
display:block!important;
left:16px!important;
right:16px!important;
bottom:14px!important;
max-width:74%!important;
}
body.home .meb-cream-feature-film .meb-bestseller-film-kicker{
display:block!important;
margin:0 0 4px!important;
font-size:8px!important;
}
body.home .meb-cream-feature-film .meb-bestseller-film-overlay h2{
display:block!important;
margin:0!important;
font-size:clamp(22px,7vw,34px)!important;
line-height:.92!important;
color:#fff!important;
text-shadow:0 1px 8px rgba(0,0,0,.35);
}
body.home .meb-cream-feature-film .meb-bestseller-film-link{
display:none!important;
}
.meb-subpage-index{
width:calc(100% - 28px)!important;
padding-top:14px!important;
padding-bottom:14px!important;
flex-wrap:nowrap!important;
overflow-x:auto!important;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.meb-subpage-index::-webkit-scrollbar{display:none;}
.meb-subpage-index a{
flex:0 0 auto!important;
white-space:nowrap!important;
min-height:38px!important;
padding:0 12px!important;
font-size:10px!important;
}
}
/* ==========================================================
v95 — MAIN HERO AMPLIFY COPY + ALWAYS-VISIBLE MOVED SUBMENU
========================================================== */
/* Main Hero copy */
body.home .meb-cream-hero-media{
position:relative!important;
}
body.home .meb-main-hero-overlay{
position:absolute!important;
left:clamp(28px,5vw,86px)!important;
bottom:clamp(26px,6vh,72px)!important;
z-index:8!important;
max-width:min(760px,70vw)!important;
color:#fff!important;
pointer-events:none!important;
}
body.home .meb-main-hero-kicker{
display:block!important;
margin:0 0 10px!important;
font-size:12px!important;
font-weight:900!important;
letter-spacing:.14em!important;
color:#fff!important;
text-shadow:0 2px 12px rgba(0,0,0,.28)!important;
}
body.home .meb-main-hero-overlay h1{
margin:0!important;
max-width:760px!important;
font-size:clamp(44px,6.5vw,96px)!important;
line-height:.88!important;
letter-spacing:-.055em!important;
color:#fff!important;
text-transform:uppercase!important;
text-shadow:0 2px 18px rgba(0,0,0,.32)!important;
}
/* Mobile: moved sections in hamburger MUST remain visible */
@media(max-width:760px){
body.home .meb-main-hero-overlay{
left:18px!important;
right:18px!important;
bottom:18px!important;
max-width:82%!important;
}
body.home .meb-main-hero-kicker{
margin-bottom:5px!important;
font-size:8px!important;
letter-spacing:.1em!important;
}
body.home .meb-main-hero-overlay h1{
font-size:clamp(28px,9vw,46px)!important;
line-height:.9!important;
}
.mobile-nav .mobile-nav-parent-link{
display:flex!important;
min-height:64px!important;
padding:15px 8px!important;
background:#fff!important;
border-bottom:2px solid #111!important;
font-size:20px!important;
font-weight:900!important;
}
.mobile-nav .mobile-moved-sections{
display:block!important;
visibility:visible!important;
opacity:1!important;
height:auto!important;
max-height:none!important;
overflow:visible!important;
margin:0!important;
padding:0 0 8px!important;
background:#EAF8FF!important;
border-bottom:2px solid #111!important;
}
.mobile-nav .mobile-moved-title{
display:block!important;
visibility:visible!important;
opacity:1!important;
padding:12px 10px 8px!important;
color:#318CE7!important;
font-size:9px!important;
font-weight:900!important;
letter-spacing:.1em!important;
}
.mobile-nav .mobile-moved-sections a{
display:flex!important;
visibility:visible!important;
opacity:1!important;
width:100%!important;
min-height:46px!important;
margin:0!important;
padding:10px 14px!important;
border:0!important;
border-top:1px solid rgba(17,17,17,.18)!important;
border-radius:0!important;
background:#EAF8FF!important;
color:#111!important;
font-size:14px!important;
font-weight:800!important;
line-height:1.25!important;
}
.mobile-nav.open .mobile-moved-sections,
.mobile-nav.open .mobile-moved-sections a,
.mobile-nav.open .mobile-moved-title{
display:block!important;
visibility:visible!important;
opacity:1!important;
}
}
/* Desktop moved-section dropdown remains easy to discover */
@media(min-width:761px){
.desktop-nav-group>.desktop-nav-parent:after{
content:" ▾";
font-size:9px;
margin-left:4px;
}
}
/* ==========================================================
v96 — DIRECT MOBILE SUBMENU LINKS
No wrapper/div state: each moved section is a direct .
========================================================== */
@media(max-width:760px){
.mobile-nav a.meb-direct-submenu{
display:flex!important;
visibility:visible!important;
opacity:1!important;
position:relative!important;
width:100%!important;
height:auto!important;
min-height:44px!important;
max-height:none!important;
margin:0!important;
padding:10px 14px 10px 24px!important;
overflow:visible!important;
transform:none!important;
pointer-events:auto!important;
border:0!important;
border-bottom:1px solid rgba(17,17,17,.18)!important;
border-radius:0!important;
background:#EAF8FF!important;
color:#111!important;
font-size:14px!important;
font-weight:800!important;
line-height:1.25!important;
white-space:normal!important;
}
.mobile-nav a.mobile-nav-parent-link{
background:#fff!important;
border-top:2px solid #111!important;
border-bottom:2px solid #111!important;
}
/* Legacy submenu wrappers from old caches must never overlay/directly hide new links. */
.mobile-nav .mobile-moved-sections,
.mobile-nav .mobile-nav-section-label,
.mobile-nav .mobile-sub-link:not(.meb-direct-submenu){
display:none!important;
}
}
/* ==========================================================
v97 — SOFT BLUE BACKGROUNDS FOR REVIEWS + CONCERN SECTIONS
========================================================== */
body.home .concern-section,
body.home .inkey-reviews{
background:#EEF7FF !important;
}
body.home .concern-section .section-head,
body.home .inkey-reviews .section-head{
position:relative;
}
body.home .inkey-reviews .imported-review-grid blockquote{
background:#fff !important;
}
body.home .inkey-reviews .imported-review-grid blockquote:nth-child(2n){
background:#F7FBFF !important;
}
body.home .concern-section .concern-card{
background:#fff !important;
}
@media(max-width:760px){
body.home .concern-section,
body.home .inkey-reviews{
background:#EEF7FF !important;
}
}
/* ==========================================================
v98 — UNIFY CONCERN BLUE TO REVIEW BLUE
Both sections use the same calm meBIOME review-blue tone.
========================================================== */
body.home .inkey-reviews,
body.home .concern-section{
background:#EEF7FF !important;
}
body.home .inkey-reviews .imported-review-grid blockquote,
body.home .concern-section .concern-card{
background:#FFFFFF !important;
}
body.home .inkey-reviews .imported-review-grid blockquote:nth-child(2n){
background:#F7FBFF !important;
}
@media(max-width:760px){
body.home .inkey-reviews,
body.home .concern-section{
background:#EEF7FF !important;
}
}
/* v100 preserved — product boxes follow source image ratio */
.catalog-image{
padding:0!important;
aspect-ratio:2 / 3!important;
height:auto!important;
min-height:0!important;
background:#d9ecfb!important;
display:flex!important;
align-items:stretch!important;
justify-content:stretch!important;
}
.catalog-image.media-fit-ready{
aspect-ratio:2 / 3!important;
--meb-media-ratio:2 / 3!important;
}
.catalog-image img,
.catalog-image video,
.catalog-image.media-fit-ready img,
.catalog-image.media-fit-ready video{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center center!important;
max-width:none!important;
max-height:none!important;
mix-blend-mode:normal!important;
display:block!important;
}
.catalog-card{align-self:start!important;}
@media(max-width:760px){
.catalog-image,
.catalog-image.media-fit-ready{
aspect-ratio:2 / 3!important;
padding:0!important;
}
}
/* ---------- v101: review media cards (reviews section only) ---------- */
.meb-review-media{margin:16px 0 14px;overflow:hidden;border:1px solid #111;background:#eef6fb;aspect-ratio:1/1;display:block}
.meb-review-media img,.meb-review-media video{width:100%;height:100%;display:block;object-fit:cover;background:#e8f2f9}
.imported-review-grid blockquote.has-media,.review-detail-card.has-media{min-height:auto}
.imported-review-grid blockquote.has-media p{margin:0 0 16px}
.review-detail-card.has-media .meb-review-body{margin-top:0}
.review-detail-card .meb-review-body{white-space:normal}
.imported-review-grid blockquote .home-review-media{aspect-ratio:1/1}
.review-detail-card .detail-review-media{aspect-ratio:1/1;margin:12px 0 16px}
@media(max-width:760px){
.imported-review-grid blockquote .home-review-media,
.review-detail-card .detail-review-media{aspect-ratio:4/5}
}
/* v105 — empathy banner responsive fix: preserve original photo ratio, no crop */
.meb-empathy-banner{
width:100%;
margin:0;
background:#67C8FF;
overflow:hidden;
}
.meb-empathy-banner-media{
position:relative;
width:100%;
overflow:hidden;
line-height:0;
background:#67C8FF;
}
.meb-empathy-banner-media>img{
display:block;
width:100%;
height:auto!important;
max-width:none;
object-fit:contain!important;
object-position:center center!important;
}
.meb-empathy-banner-media::after{
content:"";
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
background:linear-gradient(90deg,rgba(0,0,0,.20) 0%,rgba(0,0,0,.08) 35%,rgba(0,0,0,0) 62%);
}
.meb-empathy-banner-copy{
position:absolute;
left:clamp(28px,4.6vw,76px);
bottom:clamp(24px,4.2vw,66px);
z-index:2;
color:#fff;
max-width:min(650px,48vw);
line-height:1;
text-shadow:0 2px 14px rgba(0,0,0,.28);
}
.meb-empathy-kicker{
display:block;
margin-bottom:clamp(10px,1.15vw,18px);
font-size:clamp(10px,.92vw,15px);
line-height:1.2;
font-weight:700;
letter-spacing:.20em;
}
.meb-empathy-banner-copy p{
margin:0 0 clamp(6px,.65vw,10px);
font-size:clamp(22px,2.25vw,38px);
line-height:1.08;
font-weight:500;
letter-spacing:-.035em;
}
.meb-empathy-banner-copy h2{
margin:0;
color:#fff;
font-size:clamp(42px,4.6vw,76px);
line-height:.98;
font-weight:900;
letter-spacing:-.055em;
max-width:8.8em;
}
@media(max-width:760px){
.meb-empathy-banner-media{
width:100%;
aspect-ratio:auto!important;
min-height:0!important;
}
.meb-empathy-banner-media>img{
width:100%!important;
height:auto!important;
object-fit:contain!important;
object-position:center center!important;
}
.meb-empathy-banner-media::after{
background:linear-gradient(90deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.08) 42%,rgba(0,0,0,0) 74%);
}
.meb-empathy-banner-copy{
left:16px;
right:auto;
bottom:14px;
max-width:66%;
}
.meb-empathy-kicker{
margin-bottom:7px;
font-size:7px;
line-height:1.15;
letter-spacing:.16em;
}
.meb-empathy-banner-copy p{
margin-bottom:4px;
font-size:15px;
line-height:1.1;
letter-spacing:-.035em;
}
.meb-empathy-banner-copy h2{
font-size:clamp(27px,8vw,34px);
line-height:1.0;
letter-spacing:-.05em;
max-width:7.4em;
}
}
@media(max-width:390px){
.meb-empathy-banner-copy{left:14px;bottom:12px;max-width:68%;}
.meb-empathy-kicker{font-size:6.5px;margin-bottom:6px;}
.meb-empathy-banner-copy p{font-size:14px;}
.meb-empathy-banner-copy h2{font-size:27px;}
}
/* v108 — refined slim message bridge between hero video and empathy image */
.meb-balance-bridge{
width:100%;
margin:0;
background:#EEF7FF;
border-top:1px solid rgba(17,17,17,.14);
border-bottom:1px solid rgba(17,17,17,.14);
font-family:inherit;
}
.meb-balance-bridge-inner{
width:min(92%,1500px);
margin:0 auto;
padding:24px 0 25px;
text-align:left;
}
.meb-balance-bridge-kicker{
display:block;
margin:0 0 7px;
color:#405064;
font-family:inherit;
font-size:10px;
line-height:1.1;
font-weight:700;
letter-spacing:.22em;
}
.meb-balance-bridge h2{
margin:0;
color:#111;
font-family:inherit;
font-size:clamp(22px,1.85vw,32px);
line-height:1.08;
font-weight:500;
letter-spacing:-.045em;
}
.meb-balance-bridge h2 span,
.meb-balance-bridge h2 strong{
display:block;
font-family:inherit;
}
.meb-balance-bridge h2 strong{
margin-top:2px;
font-weight:800;
}
.meb-balance-bridge p{
margin:8px 0 0;
color:#667085;
font-family:inherit;
font-size:12px;
line-height:1.35;
font-weight:400;
letter-spacing:-.025em;
}
@media(max-width:760px){
.meb-balance-bridge{
min-height:104px;
}
.meb-balance-bridge-inner{
width:calc(100% - 32px);
min-height:104px;
box-sizing:border-box;
padding:13px 0 14px;
display:flex;
flex-direction:column;
justify-content:center;
}
.meb-balance-bridge-kicker{
margin-bottom:5px;
font-size:7.5px;
line-height:1;
letter-spacing:.18em;
}
.meb-balance-bridge h2{
font-size:18px;
line-height:1.06;
letter-spacing:-.045em;
}
.meb-balance-bridge h2 strong{
margin-top:1px;
}
.meb-balance-bridge p{
margin-top:5px;
font-size:9.5px;
line-height:1.25;
}
}
/* v107 — top proof hierarchy: result first, metadata right */
body.home .meb-top-proof-v107 .proof-tile{
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(150px,38%)!important;
grid-template-rows:1fr!important;
align-items:stretch!important;
gap:24px!important;
padding:28px 30px!important;
}
body.home .meb-top-proof-v107 .meb-proof-main{
display:flex!important;
align-items:flex-end!important;
min-width:0!important;
}
body.home .meb-top-proof-v107 .meb-proof-main strong{
grid-column:auto!important;
grid-row:auto!important;
display:block!important;
width:100%!important;
font-weight:800!important;
letter-spacing:-.055em!important;
text-align:left!important;
line-height:.86!important;
}
body.home .meb-top-proof-v107 .meb-proof-meta{
display:flex!important;
flex-direction:column!important;
align-items:flex-end!important;
justify-content:space-between!important;
text-align:right!important;
min-width:0!important;
}
body.home .meb-top-proof-v107 .meb-proof-meta small{
display:block!important;
align-self:flex-end!important;
font-weight:900!important;
letter-spacing:.02em!important;
}
body.home .meb-top-proof-v107 .meb-proof-meta span{
grid-column:auto!important;
grid-row:auto!important;
display:block!important;
max-width:220px!important;
font-weight:800!important;
line-height:1.25!important;
text-align:right!important;
}
@media(max-width:760px){
body.home .meb-top-proof-v107 .proof-tile{
min-height:150px!important;
grid-template-columns:minmax(0,1fr) minmax(118px,42%)!important;
padding:22px 24px!important;
gap:16px!important;
}
body.home .meb-top-proof-v107 .meb-proof-main{
align-items:flex-end!important;
}
body.home .meb-top-proof-v107 .top-proof-box-1 .meb-proof-main strong{font-size:min(var(--top-proof1-value-size),56px)!important;}
body.home .meb-top-proof-v107 .top-proof-box-2 .meb-proof-main strong{font-size:min(var(--top-proof2-value-size),56px)!important;}
body.home .meb-top-proof-v107 .top-proof-box-3 .meb-proof-main strong{font-size:min(var(--top-proof3-value-size),46px)!important;line-height:.95!important;}
body.home .meb-top-proof-v107 .meb-proof-meta span{
max-width:145px!important;
font-size:12px!important;
line-height:1.3!important;
}
}
/* v109 — balance bridge + proof cards optimized for both desktop and mobile */
body.home .meb-balance-bridge{
position:relative;
z-index:1;
}
body.home .meb-balance-bridge-inner{
width:min(calc(100% - 64px), 1520px);
}
@media(max-width:760px){
body.home .meb-balance-bridge-inner{
width:calc(100% - 32px);
}
}
body.home .proof-band.meb-top-proof-v109{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:0!important;
width:min(calc(100% - 64px), 1800px)!important;
margin:28px auto 0!important;
border-left:2px solid #111!important;
border-top:2px solid #111!important;
}
body.home .meb-top-proof-v109 .proof-tile{
min-height:248px!important;
margin:0!important;
border:0!important;
border-right:2px solid #111!important;
border-bottom:2px solid #111!important;
border-radius:0!important;
padding:28px 30px!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)!important;
align-items:stretch!important;
gap:22px!important;
background:#F6F3EF!important;
}
body.home .meb-top-proof-v109 .top-proof-box-2{background:#67C8FF!important;}
body.home .meb-top-proof-v109 .top-proof-box-3{background:#EAF5FA!important;}
body.home .meb-top-proof-v109 .meb-proof-main{
min-width:0!important;
display:flex!important;
align-items:flex-end!important;
}
body.home .meb-top-proof-v109 .meb-proof-main strong{
display:block!important;
width:100%!important;
margin:0!important;
color:#111!important;
font-size:clamp(62px,4.8vw,88px)!important;
line-height:.92!important;
letter-spacing:-.065em!important;
text-align:left!important;
font-weight:800!important;
word-break:keep-all!important;
}
body.home .meb-top-proof-v109 .top-proof-box-3 .meb-proof-main strong{
font-size:clamp(38px,3vw,58px)!important;
line-height:1!important;
letter-spacing:-.05em!important;
white-space:nowrap!important;
}
body.home .meb-top-proof-v109 .meb-proof-meta{
min-width:0!important;
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
justify-content:center!important;
text-align:left!important;
}
body.home .meb-top-proof-v109 .meb-proof-meta small{
display:block!important;
margin:0 0 18px!important;
color:#111!important;
font-size:12px!important;
line-height:1!important;
font-weight:800!important;
letter-spacing:.02em!important;
}
body.home .meb-top-proof-v109 .meb-proof-meta span{
display:block!important;
max-width:none!important;
margin:0!important;
color:#111!important;
font-size:22px!important;
line-height:1.28!important;
font-weight:800!important;
letter-spacing:-.035em!important;
word-break:keep-all!important;
}
body.home .meb-top-proof-v109 .meb-proof-sub{
display:block!important;
max-width:none!important;
margin:16px 0 0!important;
color:rgba(17,17,17,.76)!important;
font-size:15px!important;
line-height:1.5!important;
letter-spacing:-.02em!important;
font-weight:500!important;
word-break:keep-all!important;
}
@media(max-width:1180px){
body.home .proof-band.meb-top-proof-v109{
width:calc(100% - 40px)!important;
}
body.home .meb-top-proof-v109 .proof-tile{
min-height:220px!important;
padding:24px 22px!important;
grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)!important;
gap:18px!important;
}
body.home .meb-top-proof-v109 .meb-proof-main strong{font-size:clamp(54px,5vw,72px)!important;}
body.home .meb-top-proof-v109 .top-proof-box-3 .meb-proof-main strong{font-size:clamp(34px,3.6vw,48px)!important;}
body.home .meb-top-proof-v109 .meb-proof-meta span{font-size:18px!important;}
body.home .meb-top-proof-v109 .meb-proof-sub{font-size:14px!important;}
}
@media(max-width:760px){
body.home .proof-band.meb-top-proof-v109{
grid-template-columns:1fr!important;
width:calc(100% - 28px)!important;
margin-top:18px!important;
}
body.home .meb-top-proof-v109 .proof-tile{
min-height:180px!important;
padding:20px 18px!important;
grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;
gap:16px!important;
}
body.home .meb-top-proof-v109 .meb-proof-main strong{
font-size:clamp(52px,15vw,66px)!important;
line-height:.94!important;
}
body.home .meb-top-proof-v109 .top-proof-box-3 .meb-proof-main strong{
font-size:clamp(28px,8.2vw,40px)!important;
line-height:1!important;
white-space:nowrap!important;
}
body.home .meb-top-proof-v109 .meb-proof-meta small{
margin-bottom:10px!important;
font-size:10px!important;
}
body.home .meb-top-proof-v109 .meb-proof-meta span{
font-size:17px!important;
line-height:1.32!important;
}
body.home .meb-top-proof-v109 .meb-proof-sub{
margin-top:10px!important;
font-size:13.5px!important;
line-height:1.45!important;
}
}
@media(max-width:430px){
body.home .meb-top-proof-v109 .proof-tile{
min-height:168px!important;
padding:18px 16px!important;
grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)!important;
gap:14px!important;
}
body.home .meb-top-proof-v109 .meb-proof-main strong{
font-size:clamp(48px,14vw,60px)!important;
}
body.home .meb-top-proof-v109 .top-proof-box-3 .meb-proof-main strong{
font-size:clamp(26px,7.6vw,36px)!important;
letter-spacing:-.045em!important;
}
body.home .meb-top-proof-v109 .meb-proof-meta span{
font-size:16px!important;
}
body.home .meb-top-proof-v109 .meb-proof-sub{
font-size:12.8px!important;
line-height:1.42!important;
}
}
/* V111 proof card desktop equal-height and single-line science basis */
body.home .proof-band.meb-top-proof-v109{align-items:stretch!important;}
body.home .meb-top-proof-v109 .proof-tile{height:256px!important;min-height:256px!important;align-items:center!important;}
body.home .meb-top-proof-v109 .meb-proof-main{align-self:center!important;}
body.home .meb-top-proof-v109 .meb-proof-meta{justify-content:center!important;align-self:center!important;}
body.home .meb-top-proof-v109 .top-proof-box-3 .meb-proof-main strong{font-size:clamp(34px,2.7vw,52px)!important;white-space:nowrap!important;}
body.home .meb-top-proof-v109 .top-proof-box-3 .meb-proof-meta span{white-space:nowrap!important;font-size:18px!important;letter-spacing:-.04em!important;}
body.home .meb-top-proof-v109 .top-proof-box-3 .meb-proof-sub{font-size:15px!important;}
@media(max-width:1180px){
body.home .meb-top-proof-v109 .proof-tile{height:228px!important;min-height:228px!important;}
body.home .meb-top-proof-v109 .top-proof-box-3 .meb-proof-main strong{font-size:clamp(32px,3.2vw,44px)!important;}
body.home .meb-top-proof-v109 .top-proof-box-3 .meb-proof-meta span{font-size:16px!important;white-space:nowrap!important;}
}
@media(max-width:760px){
body.home .meb-top-proof-v109 .proof-tile{height:auto!important;min-height:184px!important;}
body.home .meb-top-proof-v109 .top-proof-box-3 .meb-proof-main strong{font-size:clamp(28px,8vw,40px)!important;white-space:nowrap!important;}
body.home .meb-top-proof-v109 .top-proof-box-3 .meb-proof-meta span{font-size:16px!important;white-space:normal!important;}
}
@media(max-width:430px){
body.home .meb-top-proof-v109 .top-proof-box-3 .meb-proof-meta span{font-size:15px!important;}
}