.mcosmetic-case{padding-bottom:80px}
.mcosmetic-case>.back-link{display:inline-block;margin:56px 0 34px}
.mcosmetic-case .eyebrow{margin:0 0 18px;color:#cda5bd;font-size:12px;letter-spacing:.14em}
.mcosmetic-system{padding-top:16px}
.mcosmetic-context{padding-top:96px}
.mcosmetic-section-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,420px);align-items:end;column-gap:56px;row-gap:18px;margin-bottom:36px}
.mcosmetic-section-heading>.eyebrow{grid-column:1/-1;max-width:none;margin:0}
.mcosmetic-section-heading h1,.mcosmetic-section-heading h2{margin:0;font-size:clamp(34px,4.1vw,58px);font-weight:400;line-height:1.08;letter-spacing:-.05em}
.mcosmetic-section-heading>p:not(.eyebrow){max-width:420px;margin:0;color:#aaa7ae;font-size:17px;line-height:1.55}
.mcosmetic-context .mcosmetic-section-heading>p:not(.eyebrow){justify-self:end;text-align:right}
.mcosmetic-icon-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #ffffff22;border-bottom:1px solid #ffffff22}
.mcosmetic-icon-grid figure{display:flex;min-width:0;height:155px;flex-direction:column;align-items:center;justify-content:center;gap:14px;margin:0;border-bottom:1px solid #ffffff16}
.mcosmetic-icon-grid figure:nth-last-child(-n+4){border-bottom:0}
.mcosmetic-icon-art{position:relative;display:block;width:68px;height:68px}
.mcosmetic-icon-art img{display:block;width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1);opacity:.52;transition:opacity .3s ease}
.mcosmetic-icon-art::after{position:absolute;inset:0;content:"";pointer-events:none;opacity:0;background:linear-gradient(110deg,#fff 5%,#cbd5e9 27%,#fff 48%,#e5d9e9 72%,#fff 95%);background-size:250% 100%;-webkit-mask-image:var(--icon);mask-image:var(--icon);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;transition:opacity .3s ease}
.mcosmetic-icon-grid figure:hover .mcosmetic-icon-art img{opacity:.18}
.mcosmetic-icon-grid figure:hover .mcosmetic-icon-art::after{opacity:1;animation:mcosmetic-pearl 2s linear infinite}
.mcosmetic-icon-grid figcaption{color:#fff;opacity:.52;font-size:13px;line-height:1.3;transition:opacity .3s ease}
.mcosmetic-icon-grid figure:hover figcaption{opacity:.88}
@keyframes mcosmetic-pearl{from{background-position:100% 0}to{background-position:0 0}}
@media(prefers-reduced-motion:reduce){.mcosmetic-icon-grid figure:hover .mcosmetic-icon-art::after{animation:none}}
.mcosmetic-colorways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:24px}
.mcosmetic-colorway{min-width:0;margin:0;padding:24px 26px;border-radius:20px}
.mcosmetic-colorway--pink{background:#f3e8f0}
.mcosmetic-colorway--white{background:#502642}
.mcosmetic-colorway>div{display:flex;align-items:center;justify-content:space-evenly;gap:22px;height:92px}
.mcosmetic-colorway img{width:auto;height:auto;max-width:68px;max-height:69px;object-fit:contain}
.mcosmetic-colorway figcaption{margin-top:12px;font-size:13px;line-height:1.35}
.mcosmetic-colorway--pink figcaption{color:#553f51}
.mcosmetic-colorway--white figcaption{color:#e8d0e1}
.mcosmetic-context-stage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mcosmetic-context-card{display:flex;min-width:0;flex-direction:column;margin:0;overflow:hidden;border:1px solid #ffffff18;border-radius:24px;background:#19171c}
.mcosmetic-context-visual{display:flex;flex:1;align-items:flex-end;justify-content:center;min-width:0;padding:28px 18px 24px;background:radial-gradient(circle at 50% 24%,#483043 0,#29212b 48%,#1c1a20 100%)}
.mcosmetic-context-visual .mcosmetic-phone{margin:0}
.mcosmetic-context-caption{display:flex;box-sizing:border-box;min-height:164px;flex-direction:column;padding:21px 24px 25px;border-top:1px solid #ffffff18;background:#19171c;text-align:left}
.mcosmetic-context-index{color:#9a889a;font-size:11px;line-height:1.4;letter-spacing:.15em}
.mcosmetic-context-caption strong{margin-top:13px;color:#f3f0f3;font-size:23px;font-weight:400;line-height:1.15;letter-spacing:-.035em}
.mcosmetic-context-caption>span:last-child{margin-top:10px;color:#aaa6ae;font-size:14px;line-height:1.48}
.mcosmetic-phone{position:relative;box-sizing:border-box;width:min(100%,260px);margin:0 auto;padding:5px;border:2px solid #5b535d;border-radius:38px;background:#0b0a0d;box-shadow:0 20px 40px #0007;overflow:hidden}
.mcosmetic-phone img{display:block;width:100%;height:auto;border-radius:31px}
.mcosmetic-status-time,.mcosmetic-dynamic-island,.mcosmetic-status-icons,.mcosmetic-home-indicator{position:absolute;z-index:2;pointer-events:none}
.mcosmetic-status-time{top:15px;left:22px;color:#211725;font-size:10px;font-weight:650;line-height:14px;letter-spacing:-.02em}
.mcosmetic-dynamic-island{top:10px;left:50%;width:69px;height:18px;transform:translateX(-50%);border-radius:20px;background:#050507;box-shadow:inset 0 0 0 1px #151519}
.mcosmetic-dynamic-island::after{content:"";position:absolute;right:7px;top:6px;width:6px;height:6px;border-radius:50%;background:#131c2d;box-shadow:inset 0 0 0 1px #2b3950}
.mcosmetic-status-icons{top:15px;right:19px;width:40px;height:13px;color:#211725}
.mcosmetic-home-indicator{bottom:10px;left:50%;width:78px;height:3px;transform:translateX(-50%);border-radius:4px;background:#211725}
.mcosmetic-phone--pink .mcosmetic-status-time,.mcosmetic-phone--pink .mcosmetic-status-icons{color:#fff}
.mcosmetic-phone--pink .mcosmetic-home-indicator{background:#fff}
.mcosmetic-case .icon-minimal-links{margin-top:68px}
@media(max-width:1023px){.mcosmetic-section-heading{grid-template-columns:1fr;gap:18px}.mcosmetic-section-heading>p:not(.eyebrow){max-width:650px;margin:0}.mcosmetic-context .mcosmetic-section-heading>p:not(.eyebrow){justify-self:start;text-align:left}.mcosmetic-context-caption{padding:19px 19px 23px}}
@media(max-width:760px){.mcosmetic-case{padding-bottom:46px}.mcosmetic-case>.back-link{margin:32px 0 24px}.mcosmetic-system{padding-top:6px}.mcosmetic-context{padding-top:66px}.mcosmetic-section-heading{margin-bottom:25px}.mcosmetic-section-heading h1,.mcosmetic-section-heading h2{font-size:clamp(32px,8vw,43px)}.mcosmetic-section-heading>p:not(.eyebrow){font-size:15px}.mcosmetic-icon-grid figure{height:105px;gap:10px}.mcosmetic-icon-art{width:47px;height:47px}.mcosmetic-icon-grid figcaption{font-size:10px}.mcosmetic-colorways{grid-template-columns:1fr;gap:10px;margin-bottom:18px}.mcosmetic-colorway{padding:17px 20px}.mcosmetic-colorway>div{height:65px}.mcosmetic-colorway img{max-width:48px;max-height:51px}.mcosmetic-context-stage{grid-template-columns:1fr;gap:16px}.mcosmetic-context-card{border-radius:20px}.mcosmetic-context-visual{padding:26px 18px 20px}.mcosmetic-phone{width:min(100%,280px);border-radius:34px;padding:4px}.mcosmetic-phone img{border-radius:27px}.mcosmetic-context-caption{min-height:0;padding:20px 23px 24px}.mcosmetic-context-caption strong{font-size:21px}.mcosmetic-context-caption>span:last-child{font-size:13px}.mcosmetic-case .icon-minimal-links{margin-top:42px}}
@media(max-width:420px){.mcosmetic-icon-grid figcaption{display:none}.mcosmetic-icon-grid figure{height:82px}.mcosmetic-icon-art{width:44px;height:44px}}
