/* Mor & Meadow landing pages in the new site's hand-drawn style.
   Layered over the landing app's own CSS; built section by section. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Mrs+Saint+Delafield&family=UnifrakturMaguntia&display=swap');

:root {
  --mm-ink: #1d3340;
  --mm-navy: #1f4d6f;
  --mm-header: #16465b;
  --mm-serif: 'Cormorant Garamond', Georgia, serif;
  --mm-script: 'Mrs Saint Delafield', cursive;
}

/* ---------------------------------------------------------------- 1. Top bar */
.lp .header { background: var(--mm-header); border-bottom: 0; }
.lp .header__inner { padding: 14px 32px; max-width: none; }
.lp .header__logo { height: 40px; }
.lp .header__note { font-family: var(--mm-serif); font-size: 21px; font-weight: 500; font-style: italic; color: #fff; letter-spacing: .01em; }
.lp .header__note--mobile { background: #cfe1f1; color: var(--mm-navy); font-size: clamp(15px, 4.3vw, 18px); line-height: 1.35; padding: 9px 14px; text-wrap: balance; }
.lp .header__cta .btn { min-height: 0; padding: 10px 20px; border: 1px solid #fff; background: #fff; color: var(--mm-header); font-family: var(--mm-serif); font-size: 18px; font-weight: 600; letter-spacing: .06em; border-radius: 4px; }
.lp .header__cta .btn:hover { filter: none; background: transparent; color: #fff; }

/* Our buttons (serif, square-ish, thin arrow); hero only for now. Hover fades like the main site. */
.lp .hero .btn, .lp .header .btn { transition: background-color .35s ease, color .35s ease, border-color .35s ease; font-family: var(--mm-serif); font-weight: 600; letter-spacing: .06em; border-radius: 4px; }
.lp .hero .btn::after { content: ""; width: 16px; height: 12px; flex: 0 0 16px; background: currentColor; -webkit-mask: url('/mm/arrow-right.png') center / contain no-repeat; mask: url('/mm/arrow-right.png') center / contain no-repeat; }
.lp .header__cta .btn::after { display: none; }

/* Uppercase eyebrows, set in the serif with a pencil stroke after them; hero only for now */
.lp .hero .eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--mm-serif); font-size: 16px; font-weight: 600; letter-spacing: .18em; color: var(--mm-navy); }
.lp .hero .eyebrow::after { content: ""; width: 64px; height: 8px; background: url('/mm/line.png') 6% 50% / 300px 100% no-repeat; opacity: 1; }
.lp .hero .eyebrow--light { color: #fff; }
.lp .hero .eyebrow--light::after { filter: brightness(0) invert(1); opacity: 1; }

/* ---------------------------------------------------------------- 2. Hero */
.lp .hero { align-items: center; min-height: min(86vh, 780px); }
.lp .hero__shade { background: linear-gradient(180deg, rgba(15, 35, 50, .35) 0%, rgba(15, 35, 50, .3) 40%, rgba(15, 35, 50, .62) 100%); }
.lp .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 31px; background: #fff; z-index: 1; -webkit-mask: url('/mm/edge-top.png') center top / 100% 100% no-repeat; mask: url('/mm/edge-top.png') center top / 100% 100% no-repeat; transform: scaleY(-1); }
.lp .hero__inner { max-width: 860px; padding: 120px 24px 110px; }
.lp .hero .eyebrow { margin-bottom: 18px; text-shadow: 0 1px 14px rgba(0,0,0,.35); }
.lp .hero__title { font-family: var(--mm-serif); font-weight: 400; font-size: clamp(46px, 6vw, 84px); line-height: 1.02; letter-spacing: -.01em; margin-bottom: 22px; text-wrap: balance; text-shadow: 0 2px 24px rgba(0,0,0,.25); }
.lp .hero__sub { font-family: var(--mm-serif); font-size: 23px; line-height: 1.5; font-weight: 500; max-width: 600px; margin-bottom: 30px; text-wrap: balance; text-shadow: 0 1px 14px rgba(0,0,0,.35); }
.lp .hero__cta { flex-direction: column; }
/* "New autumn offer": a hand-written note above the button instead of a pill */
.lp .hero .badge { background: none; padding: 0; margin: 0 0 6px; border-radius: 0; font-family: var(--mm-script); font-size: 38px; font-weight: 400; letter-spacing: 0; line-height: 1.1; text-transform: lowercase; color: #fff; transform: rotate(-3deg); text-shadow: 0 1px 14px rgba(0,0,0,.35); }
.lp .hero__cta .btn { width: auto; min-height: 0; padding: 16px 34px; background: #fff; color: var(--mm-navy); border: 1px solid #fff; font-size: 21px; }
.lp .hero__cta .btn:hover { filter: none; background: transparent; color: #fff; }
.lp .hero__reassure { font-family: var(--mm-serif); font-size: 19px; font-style: italic; font-weight: 500; opacity: .95; margin-top: 16px; }

@media (max-width: 760px) {
  .lp .header__inner { padding: 10px 16px; }
  .lp .header__logo { height: 30px; }
  .lp .header__cta .btn { font-size: 16px; padding: 8px 14px; }
  .lp .hero { min-height: 640px; }
  .lp .hero__inner { padding: 90px 20px 84px; }
  .lp .hero__title { font-size: 46px; }
  .lp .hero__sub { font-size: 20px; }
  .lp .hero .badge { font-size: 34px; }
  .lp .hero__cta .btn { font-size: 19px; padding: 15px 28px; }
  .lp .hero .eyebrow { flex-direction: column; max-width: 186px; font-size: 14px; letter-spacing: .14em; gap: 10px; line-height: 1.5; text-align: center; text-wrap: balance; }
  .lp .hero .eyebrow::after { width: 48px; }
}

/* Hero copy all pure white */
.lp .hero, .lp .hero .eyebrow, .lp .hero__title, .lp .hero__sub, .lp .hero__reassure, .lp .hero .badge { color: #fff; opacity: 1; }

/* ---------------------------------------------------------------- 3. Press row */
/* The app's placeholder note ("Sample outlets...") is not for customers */
.lp .sample-flag { display: none; }
.lp .press { padding: 52px 24px 64px; border-bottom: 0; background: #fff; }
/* Centred uppercase eyebrow with a pencil stroke either side */
.lp .press .eyebrow { display: inline-flex; align-items: center; gap: 16px; margin: 0 0 26px; font-family: var(--mm-serif); font-size: 16px; font-weight: 600; letter-spacing: .2em; color: var(--mm-navy); }
.lp .press .eyebrow::before, .lp .press .eyebrow::after { content: ""; width: 64px; height: 8px; background: url('/mm/line.png') 6% 50% / 300px 100% no-repeat; }
.lp .press .eyebrow::before { transform: scaleX(-1); }
/* Mastheads keep their character, in our ink */
.lp .press__list { gap: 16px 64px; }
.lp .press__name { color: var(--mm-ink); opacity: .88; font-size: clamp(22px, 2.4vw, 32px); }
.lp .press__name--caps { font-family: var(--mm-serif); font-weight: 500; letter-spacing: .08em; }

/* ---------------------------------------------------------------- 4. "Your whole ritual" (benefits) */
.lp .benefits { background: var(--mm-header); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 110px); align-items: center; padding: 100px max(clamp(24px, 6vw, 120px), calc((100% - 1400px) / 2)); }
.lp .benefits__img { min-height: 0; aspect-ratio: 4 / 5; -webkit-mask: url('/mm/mask-portrait.png') center / 100% 100% no-repeat; mask: url('/mm/mask-portrait.png') center / 100% 100% no-repeat; }
.lp .benefits__img img { object-position: 50% 60%; }
/* a cut-out product shot (png) rather than a photo: square, uncropped, on a watercolour wash, no torn mask */
.lp .benefits__img:has(img[src*=".png"]) { aspect-ratio: 1 / 1; max-width: 560px; width: 100%; justify-self: center; -webkit-mask: none; mask: none; }
.lp .benefits__img:has(img[src*=".png"])::before { content: ""; position: absolute; left: 50%; top: 52%; width: 88%; height: 78%; transform: translate(-50%, -50%) rotate(-6deg); background: url('/mm/watercolour-light-blue-circle.png') center / 100% 100% no-repeat; opacity: .32; }
/* the bottles fill only the middle of the png, so scale it up: bottles as big as before, box stays short */
.lp .benefits__img:has(img[src*=".png"]) { overflow: visible; }
.lp .benefits__img img[src*=".png"] { object-fit: contain !important; padding: 0; transform: scale(1.45); }
.lp .benefits__body { padding: 0; max-width: 600px; }
.lp .benefits__body .h2 { font-family: var(--mm-serif); font-weight: 400; font-size: clamp(40px, 4.2vw, 60px); line-height: 1.06; margin-bottom: 30px; text-wrap: balance; }
.lp .benefits__list { gap: 0; margin: 0 0 40px; font-family: var(--mm-serif); font-size: 22px; font-weight: 500; line-height: 1.35; }
.lp .benefits__list li { position: relative; gap: 22px; padding: 16px 0; }
.lp .benefits__list li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 7px; background: url('/mm/line.png') center / 100% 100% no-repeat; filter: brightness(0) invert(1); opacity: .45; }
.lp .benefits__list li:nth-child(even)::after { transform: scaleX(-1); }
/* Our hand-drawn symbols instead of outline icons in circles */
.lp .benefits__icon { width: 44px; height: 40px; border: 0; border-radius: 0; background: #fff; -webkit-mask: var(--mm-ico) center / contain no-repeat; mask: var(--mm-ico) center / contain no-repeat; }
.lp .benefits__icon svg { display: none; }
.lp .benefits__list li:nth-child(1) .benefits__icon { --mm-ico: url('/mm/hand/instant-hydration-symbol.png'); }
.lp .benefits__list li:nth-child(2) .benefits__icon { --mm-ico: url('/mm/hand/barrier-strengthening-symbol.png'); }
.lp .benefits__list li:nth-child(3) .benefits__icon { --mm-ico: url('/mm/hand/overnight-resilience-symbol.png'); }
.lp .benefits__list li:nth-child(4) .benefits__icon { --mm-ico: url('/mm/hand/seaweed.png'); }
.lp .benefits__list li:nth-child(5) .benefits__icon { --mm-ico: url('/mm/hand/day-resilience-symbol.png'); }
.lp .benefits .btn { min-height: 0; padding: 16px 34px; background: #fff; color: var(--mm-header); border: 1px solid #fff; font-family: var(--mm-serif); font-size: 21px; font-weight: 600; letter-spacing: .06em; border-radius: 4px; transition: background-color .35s ease, color .35s ease, border-color .35s ease; }
.lp .benefits .btn::after { content: ""; width: 16px; height: 12px; flex: 0 0 16px; background: currentColor; -webkit-mask: url('/mm/arrow-right.png') center / contain no-repeat; mask: url('/mm/arrow-right.png') center / contain no-repeat; }
.lp .benefits .btn:hover { filter: none; background: transparent; color: #fff; }

@media (max-width: 860px) {
  .lp .benefits { grid-template-columns: 1fr; gap: 40px; padding: 64px 20px 72px; }
  .lp .benefits__img { aspect-ratio: 4 / 4.4; max-height: none; }
  .lp .benefits__img:has(img[src*=".png"]) { aspect-ratio: 4 / 3; max-width: 340px; margin-bottom: -20px; }
  .lp .benefits__body .h2 { font-size: 38px; margin-bottom: 18px; }
  .lp .benefits__list { font-size: 20px; margin-bottom: 32px; }
  .lp .benefits__list li { gap: 18px; padding: 14px 0; }
  .lp .benefits__icon { width: 38px; height: 34px; }
  .lp .benefits .btn { font-size: 19px; padding: 15px 28px; }
}

/* ---------------------------------------------------------------- 5. "But does it really work?" (stats) */
.lp .stats { background: #fff; padding: 110px 24px 96px; max-width: none; }
.lp .stats .h2 { font-family: var(--mm-serif); font-weight: 400; font-size: clamp(40px, 4.2vw, 60px); line-height: 1.06; color: var(--mm-ink); margin: 0 0 56px; }
.lp .stats__grid { max-width: 1180px; margin: 0 auto; gap: 0; }
.lp .stats__grid > div { position: relative; border-top: 0; padding: 0 34px; text-align: center; }
/* hand-drawn pencil stroke between columns instead of straight rules */
.lp .stats__grid > div + div::before { content: ""; position: absolute; left: -4px; top: 10px; bottom: 6px; width: 8px; background: url('/mm/line-v.png') center / 100% 100% no-repeat; opacity: .35; }
.lp .stats__grid > div:nth-child(odd)::before { transform: scaleY(-1); }
/* each figure sits on a soft watercolour wash, like a note in the margin */
.lp .stats__value { position: relative; z-index: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 130px; height: 130px; margin: 0 0 18px; font-family: var(--mm-serif); font-weight: 400; font-size: 64px; line-height: 1; color: var(--mm-navy); }
.lp .stats__value::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 260px; height: 220px; transform: translate(-50%, -50%) rotate(-8deg); background: url('/mm/watercolour-light-blue-circle.png') center / 100% 100% no-repeat; opacity: .38; }
.lp .stats__grid > div:nth-child(2) .stats__value::before { transform: translate(-50%, -50%) rotate(14deg) scaleX(-1); }
.lp .stats__grid > div:nth-child(3) .stats__value::before { transform: translate(-50%, -50%) rotate(-20deg); }
.lp .stats__grid > div:nth-child(4) .stats__value::before { transform: translate(-50%, -50%) rotate(4deg) scaleX(-1); width: 380px; height: 230px; }
.lp .stats__label { font-family: var(--mm-serif); font-size: 21px; font-weight: 500; line-height: 1.45; color: var(--mm-ink); max-width: 240px; margin: 0 auto; text-wrap: balance; }

@media (max-width: 860px) {
  .lp .stats { padding: 72px 20px 80px; }
  .lp .stats .h2 { font-size: 38px; margin-bottom: 36px; }
  .lp .stats__grid { grid-template-columns: 1fr 1fr; row-gap: 44px; }
  .lp .stats__grid > div { padding: 0 14px; }
  .lp .stats__grid > div:nth-child(3)::before { display: none; }
  .lp .stats__value { font-size: 52px; height: 110px; min-width: 110px; margin-bottom: 12px; }
  .lp .stats__value::before { width: 210px; height: 180px; }
  .lp .stats__grid > div:nth-child(4) .stats__value::before { width: 290px; height: 190px; }
  .lp .stats__label { font-size: 18px; }
}

/* ---------------------------------------------------------------- 6. "Real people, real rituals" (video carousel) */
.lp .ugc { background: #fff; padding: 130px 0 140px; }
.lp .ugc .h2 { font-family: var(--mm-serif); font-weight: 400; font-size: clamp(40px, 4.2vw, 60px); line-height: 1.06; color: var(--mm-ink); margin-bottom: 18px; }
.lp .ugc__intro { margin: 0 auto 30px; font-family: var(--mm-serif); font-size: 21px; font-style: italic; font-weight: 500; color: var(--mm-ink); }
.lp .ugc__frame { max-width: none; }
.lp .ugc__track { gap: 26px; padding: 34px 64px 38px; scroll-snap-type: none; }
.lp .ugc__card { scroll-snap-align: none; }
/* torn-paper cards with a gentle alternating tilt, like the home page video row */
.lp .ugc__card { border-radius: 0; background: transparent; flex-basis: clamp(210px, 21vw, 270px); transform: rotate(-1.4deg); -webkit-mask: url('/mm/mask-portrait.png') center / 100% 100% no-repeat; mask: url('/mm/mask-portrait.png') center / 100% 100% no-repeat; }
.lp .ugc__card:nth-child(even) { transform: rotate(1.4deg) translateY(10px); }
.lp .ugc__card video { background: var(--mm-ink); }
.lp .ugc__meta { background: linear-gradient(180deg, rgba(15, 35, 50, 0) 0%, rgba(15, 35, 50, .75) 100%); padding: 56px 18px 20px; }
.lp .ugc__product { background: none; padding: 0; margin: 0 0 6px; border-radius: 0; font-family: var(--mm-serif); font-size: 14px; font-weight: 600; letter-spacing: .18em; color: #fff; }
.lp .ugc__caption { font-family: var(--mm-serif); font-size: 24px; font-weight: 500; line-height: 1.12; }
.lp .ugc__name { font-family: var(--mm-serif); font-size: 18px; font-style: italic; font-weight: 500; opacity: 1; }
/* drawn speaker instead of the emoji */
.lp .ugc__sound { top: 16px; right: 16px; width: 40px; height: 40px; font-size: 0; color: transparent; background: rgba(15, 35, 50, .35); }
.lp .ugc__sound::before { content: ""; position: absolute; inset: 9px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.2L12 5.5v13l-4.8-4H4z'/%3E%3Cpath d='M16 9.5l5 5M21 9.5l-5 5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.2L12 5.5v13l-4.8-4H4z'/%3E%3Cpath d='M16 9.5l5 5M21 9.5l-5 5'/%3E%3C/svg%3E") center / contain no-repeat; }
.lp .ugc__sound[aria-label="Mute video"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.2L12 5.5v13l-4.8-4H4z'/%3E%3Cpath d='M15.5 9a4 4 0 0 1 0 6M18 6.5a7.5 7.5 0 0 1 0 11'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.2L12 5.5v13l-4.8-4H4z'/%3E%3Cpath d='M15.5 9a4 4 0 0 1 0 6M18 6.5a7.5 7.5 0 0 1 0 11'/%3E%3C/svg%3E"); }
/* our hand-drawn arrows, no round buttons */
/* arrows sit together, centred under the cards, so they never land on a photo */
.lp .ugc__frame { padding-bottom: 54px; }
.lp .ugc__nav { top: auto; bottom: 0; width: 64px; height: 30px; margin-top: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--mm-navy); font-size: 0; color: transparent; transition: opacity .3s ease, transform .3s ease; }
.lp .ugc__nav--prev { left: calc(50% - 84px); -webkit-mask: url('/mm/arrow-left.png') center / contain no-repeat; mask: url('/mm/arrow-left.png') center / contain no-repeat; }
.lp .ugc__nav--next { right: calc(50% - 84px); -webkit-mask: url('/mm/arrow-right.png') center / contain no-repeat; mask: url('/mm/arrow-right.png') center / contain no-repeat; }
.lp .ugc__nav--prev:hover { transform: translateX(-4px); }
.lp .ugc__nav--next:hover { transform: translateX(4px); }
/* navy button on white, as on the main site */
.lp .ugc .center .btn { margin-top: 34px; min-height: 0; padding: 16px 34px; background: var(--mm-navy); color: #fff; border: 1px solid var(--mm-navy); font-family: var(--mm-serif); font-size: 21px; font-weight: 600; letter-spacing: .06em; border-radius: 4px; transition: background-color .35s ease, color .35s ease, border-color .35s ease; }
.lp .ugc .center .btn::after { content: ""; width: 16px; height: 12px; flex: 0 0 16px; background: currentColor; -webkit-mask: url('/mm/arrow-right.png') center / contain no-repeat; mask: url('/mm/arrow-right.png') center / contain no-repeat; }
.lp .ugc .center .btn:hover { filter: none; background: #fff; color: var(--mm-navy); }

@media (max-width: 760px) {
  .lp .ugc { padding: 88px 0 96px; }
  .lp .ugc .h2 { font-size: 38px; }
  .lp .ugc__intro { font-size: 19px; margin-bottom: 18px; }
  .lp .ugc__track { gap: 18px; padding: 20px 20px 26px; }
  .lp .ugc__frame { padding-bottom: 0; }
  .lp .ugc__card { flex-basis: 64vw; }
  .lp .ugc__caption { font-size: 22px; }
  .lp .ugc .center .btn { font-size: 19px; padding: 15px 28px; }
}

/* ---------------------------------------------------------------- 7. Autumn offer */
/* pale blue band with torn paper edges top and bottom */
.lp .offer { position: relative; background: #dfeaed; padding: 140px 0 150px; }
.lp .offer::before, .lp .offer::after { content: ""; position: absolute; left: 0; right: 0; height: 31px; background: #fff; -webkit-mask: url('/mm/edge-top.png') center top / 100% 100% no-repeat; mask: url('/mm/edge-top.png') center top / 100% 100% no-repeat; }
.lp .offer::before { top: -3px; }
.lp .offer::after { bottom: -3px; transform: scale(-1, -1); }
.lp .offer .wrap { max-width: 1240px; }
.lp .offer .h2 { font-family: var(--mm-serif); font-weight: 400; font-size: clamp(40px, 4.2vw, 60px); line-height: 1.06; color: var(--mm-ink); margin-bottom: 56px; text-wrap: balance; }
.lp .offer .h2 em { white-space: nowrap; }
.lp .offer__grid { gap: clamp(40px, 5vw, 80px); align-items: center; }
/* gallery: torn paper card, bottles on a watercolour wash */
.lp .offer__main { border-radius: 0; background: #fff; -webkit-mask: url('/mm/mask-portrait.png') center / 100% 100% no-repeat; mask: url('/mm/mask-portrait.png') center / 100% 100% no-repeat; }
.lp .offer__main::before { content: ""; position: absolute; left: 50%; top: 52%; width: 92%; height: 82%; transform: translate(-50%, -50%) rotate(-6deg); background: url('/mm/watercolour-light-blue-circle.png') center / 100% 100% no-repeat; opacity: .45; }
.lp .offer__main img[src*=".png"] { object-fit: contain !important; padding: 6% 8%; }
.lp .offer__save { z-index: 1; top: 26px; left: 26px; padding: 10px 18px 9px; background: #fff; border-radius: 0; font-family: var(--mm-serif); font-size: 16px; font-weight: 700; line-height: 1; letter-spacing: .18em; text-transform: uppercase; color: var(--mm-navy); -webkit-mask: url('/mm/mask-block.png') center / 100% 100% no-repeat; mask: url('/mm/mask-block.png') center / 100% 100% no-repeat; }
.lp .offer__thumbs { gap: 14px; margin-top: 18px; justify-content: center; }
.lp .offer__thumbs button { width: 72px; height: 72px; border: 0; border-radius: 0; overflow: visible; background: #fff; transition: opacity .45s ease; opacity: .7; }
.lp .offer__thumbs button img { -webkit-mask: url('/mm/mask-portrait.png') center / 100% 100% no-repeat; mask: url('/mm/mask-portrait.png') center / 100% 100% no-repeat; }
.lp .offer__thumbs button:hover, .lp .offer__thumbs .is-active { opacity: 1; }
.lp .offer__thumbs .is-active::after { opacity: 1; }
.lp .offer__thumbs button::after { content: ""; opacity: 0; transition: opacity .45s ease; position: absolute; left: 4px; right: 4px; bottom: -12px; height: 7px; background: url('/mm/line.png') 6% 50% / 300px 100% no-repeat; }
/* card */
.lp .offer__card { font-family: var(--mm-serif); color: var(--mm-ink); }
.lp .offer__name { font-family: var(--mm-serif); font-weight: 400; font-size: 46px; line-height: 1.05; color: var(--mm-ink); }
.lp .offer__tagline { margin: 8px 0 26px; font-size: 22px; font-style: italic; font-weight: 500; color: var(--mm-ink); }
/* the set switch: serif words, the chosen one ink with a pencil underline (no boxed buttons) */
.lp .offer__tabs { gap: 8px 34px; margin-bottom: 28px; }
.lp .offer__tabs button { position: relative; flex: 0 0 auto; min-height: 0; padding: 4px 0 14px; border: 0; border-radius: 0; background: none; color: var(--mm-ink); opacity: .5; font: 500 22px var(--mm-serif); letter-spacing: .01em; transition: opacity .45s ease; }
.lp .offer__tabs button::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 0; height: 7px; background: url('/mm/line.png') 6% 50% / 300px 100% no-repeat; opacity: 0; transition: opacity .45s ease; }
.lp .offer__tabs button:hover { opacity: .8; }
.lp .offer__tabs .is-active, .lp .offer__tabs .is-active:hover { background: none; color: var(--mm-ink); opacity: 1; }
.lp .offer__tabs .is-active::after { opacity: 1; }
/* what's in the set: plain text between pencil lines, hand drawn ticks */
.lp .offer__box { border: 0; border-radius: 0; background: url('/mm/line.png') 50% 0 / max(100%, 980px) 5px no-repeat, url('/mm/line.png') 50% 100% / max(100%, 980px) 5px no-repeat; padding: 28px 0 30px; margin-bottom: 30px; }
.lp .offer__gifts { margin-bottom: 8px; font-size: 22px; font-style: italic; font-weight: 600; color: var(--mm-navy); }
.lp .offer__pitch { margin-bottom: 20px; font-size: 21px; font-style: italic; font-weight: 500; line-height: 1.5; }
.lp .offer__includes { gap: 12px; font-size: 20px; font-weight: 500; line-height: 1.4; }
.lp .offer__includes li { align-items: baseline; gap: 14px; }
.lp .offer__includes svg { display: none; }
.lp .offer__includes li::before { content: ""; flex: 0 0 20px; width: 20px; height: 20px; transform: translateY(3px); background: var(--mm-navy); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.6%2013.2c1.6%201.1%203.3%203%204.9%205.6.4.6.9.6%201.2%200C12.4%2013%2015.9%208.3%2020.6%204.4%27/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.6%2013.2c1.6%201.1%203.3%203%204.9%205.6.4.6.9.6%201.2%200C12.4%2013%2015.9%208.3%2020.6%204.4%27/%3E%3C/svg%3E") center / contain no-repeat; }
.lp .offer__includes strong { display: none; }
/* buy button: our navy serif button */
.lp .offer .btn--buy { min-height: 0; padding: 19px 28px; background: var(--mm-navy); color: #fff; border: 1px solid var(--mm-navy); font-family: var(--mm-serif); font-size: 22px; font-weight: 600; letter-spacing: .05em; border-radius: 4px; text-transform: none; transition: background-color .35s ease, color .35s ease; }
.lp .offer .btn--buy::after { content: ""; width: 16px; height: 12px; flex: 0 0 16px; background: currentColor; -webkit-mask: url('/mm/arrow-right.png') center / contain no-repeat; mask: url('/mm/arrow-right.png') center / contain no-repeat; }
.lp .offer .btn--buy:hover { filter: none; background: #fff; color: var(--mm-navy); }
.lp .offer .btn--buy .btn__sep { opacity: .5; }
.lp .offer .btn--buy s { opacity: .65; }
.lp .offer__guarantee { margin-top: 14px; font-size: 19px; font-style: italic; font-weight: 500; color: var(--mm-ink); }

@media (max-width: 860px) {
  .lp .offer { padding: 96px 0 104px; }
  .lp .offer .h2 { font-size: 38px; margin-bottom: 32px; }
  .lp .offer__save { font-size: 14px; top: 18px; left: 18px; padding: 9px 14px 8px; }
  .lp .offer__thumbs button { width: 56px; height: 56px; }
  .lp .offer__name { font-size: 38px; }
  .lp .offer__tagline { font-size: 20px; margin-bottom: 20px; }
  .lp .offer__tabs { gap: 6px 24px; margin-bottom: 22px; }
  .lp .offer__tabs button { font-size: 20px; }
  .lp .offer__box { padding: 24px 0 26px; margin-bottom: 26px; }
  .lp .offer__gifts { font-size: 20px; }
  .lp .offer__pitch, .lp .offer__includes { font-size: 18px; }
  .lp .offer .btn--buy { font-size: 20px; padding: 17px 20px; }
}

/* ---------------------------------------------------------------- 8. What's in your box */
.lp .box.wrap { max-width: none; background: #fff; padding: 130px max(clamp(24px, 6vw, 120px), calc((100% - 1300px) / 2)) 140px; }
.lp .box .h2 { font-family: var(--mm-serif); font-weight: 400; font-size: clamp(40px, 4.2vw, 60px); line-height: 1.06; color: var(--mm-ink); margin-bottom: 60px; }
.lp .box__grid { gap: 40px 32px; }
/* torn paper photos, gently tilted like the video cards */
.lp .box__img { border-radius: 0; aspect-ratio: 4 / 5; background: #dfeaed; -webkit-mask: url('/mm/mask-portrait.png') center / 100% 100% no-repeat; mask: url('/mm/mask-portrait.png') center / 100% 100% no-repeat; transform: rotate(-1.2deg); transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.lp .box__card:nth-child(even) .box__img { transform: rotate(1.2deg); }
.lp .box__card:hover .box__img { transform: rotate(0deg) scale(1.015); }
.lp .box__img img { transition: transform .8s cubic-bezier(.22,.61,.36,1); }
.lp .box__card:hover .box__img img { transform: scale(1.04); }
/* tag: small torn white label, same as the offer's save tag */
.lp .box__img .tag { top: 22px; right: auto; left: 22px; padding: 9px 15px 8px; background: #fff; color: var(--mm-navy); border-radius: 0; font-family: var(--mm-serif); font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: .18em; text-transform: uppercase; -webkit-mask: url('/mm/mask-block.png') center / 100% 100% no-repeat; mask: url('/mm/mask-block.png') center / 100% 100% no-repeat; }
.lp .box__title { position: relative; margin: 30px 0 22px; font-family: var(--mm-serif); font-weight: 500; font-size: 30px; line-height: 1.1; color: var(--mm-ink); }
.lp .box__title::after { content: ""; position: absolute; left: 0; bottom: -12px; width: 64px; height: 7px; background: url('/mm/line.png') 6% 50% / 300px 100% no-repeat; opacity: .8; }
.lp .box__card > p, .lp .box__more p { font-family: var(--mm-serif); font-size: 20px; font-weight: 500; line-height: 1.45; color: var(--mm-ink); }
/* more details: serif link with a drawn plus that turns to a minus */
.lp .box__card { display: flex; flex-direction: column; }
.lp .box__card > p { flex: 1 0 auto; margin-bottom: 0; }
.lp .box__more { margin-top: 14px; }
.lp .box__more summary { display: inline-flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; font-family: var(--mm-serif); font-size: 19px; font-weight: 600; letter-spacing: .03em; color: var(--mm-navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.lp .box__more summary::-webkit-details-marker { display: none; }
.lp .box__more summary::marker { content: ""; }
.lp .box__more summary::before { content: ""; order: 2; width: 13px; height: 13px; flex: 0 0 13px; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; transition: transform .4s ease, background-size .4s ease; }
.lp .box__more[open] summary::before { transform: rotate(180deg); background-size: 100% 1.5px, 1.5px 0; }
.lp .box__more p { margin-top: 12px; font-style: italic; }
.lp .box__more[open] p { animation: mm-rise .5s cubic-bezier(.22,.61,.36,1); }
@keyframes mm-rise { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* button: our navy serif button */
.lp .box .center .btn { margin-top: 64px; min-height: 0; padding: 16px 34px; background: var(--mm-navy); color: #fff; border: 1px solid var(--mm-navy); font-family: var(--mm-serif); font-size: 21px; font-weight: 600; letter-spacing: .06em; border-radius: 4px; transition: background-color .35s ease, color .35s ease; }
.lp .box .center .btn::after { content: ""; width: 16px; height: 12px; flex: 0 0 16px; background: currentColor; -webkit-mask: url('/mm/arrow-right.png') center / contain no-repeat; mask: url('/mm/arrow-right.png') center / contain no-repeat; }
.lp .box .center .btn:hover { filter: none; background: #fff; color: var(--mm-navy); }

@media (max-width: 860px) {
  .lp .box.wrap { padding: 88px 22px 96px; }
  .lp .box .h2 { font-size: 38px; margin-bottom: 36px; }
  .lp .box__title { font-size: 27px; }
  .lp .box__img { aspect-ratio: 5 / 4; }
  .lp .box__card > p, .lp .box__more p { font-size: 19px; }
  .lp .box .center .btn { margin-top: 44px; font-size: 19px; padding: 15px 28px; }
}

/* ---------------------------------------------------------------- 9. Story */
/* pale blue band, torn white edge at the top; photo on torn paper */
.lp .story { position: relative; background: #dfeaed; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 110px); align-items: center; padding: 140px max(clamp(24px, 6vw, 120px), calc((100% - 1300px) / 2)) 150px; }
.lp .story::before { content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 31px; background: #fff; -webkit-mask: url('/mm/edge-top.png') center top / 100% 100% no-repeat; mask: url('/mm/edge-top.png') center top / 100% 100% no-repeat; z-index: 1; }
.lp .story__img { min-height: 0; aspect-ratio: 5 / 4; -webkit-mask: url('/mm/mask-landscape.png') center / 100% 100% no-repeat; mask: url('/mm/mask-landscape.png') center / 100% 100% no-repeat; transform: rotate(-1.2deg); }
.lp .story__body { max-width: 600px; padding: 0; }
.lp .story .eyebrow { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 22px; font-family: var(--mm-serif); font-size: 16px; font-weight: 600; letter-spacing: .18em; color: var(--mm-navy); }
.lp .story .eyebrow::after { content: ""; width: 64px; height: 8px; background: url('/mm/line.png') 6% 50% / 300px 100% no-repeat; }
.lp .story .h2 { margin-bottom: 30px; font-family: var(--mm-serif); font-weight: 400; font-size: clamp(40px, 4vw, 58px); line-height: 1.06; color: var(--mm-ink); text-wrap: balance; }
.lp .story__body p:not(.eyebrow) { margin-bottom: 18px; font-family: var(--mm-serif); font-size: 21px; font-weight: 500; line-height: 1.5; color: var(--mm-ink); }
.lp .story__body p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .lp .story { grid-template-columns: 1fr; gap: 44px; padding: 96px 22px 104px; }
  .lp .story .eyebrow { font-size: 14px; letter-spacing: .14em; gap: 10px; }
  .lp .story .eyebrow::after { width: 48px; }
  .lp .story .h2 { font-size: 38px; margin-bottom: 24px; }
  .lp .story__body p:not(.eyebrow) { font-size: 19px; }
}

/* ---------------------------------------------------------------- 10. What's inside */
/* deep navy band with torn edges; our botanical illustrations in place of numbers */
.lp .ingredients { position: relative; background: var(--mm-header); padding: 150px 0 160px; }
.lp .ingredients::before, .lp .ingredients::after { content: ""; position: absolute; left: 0; right: 0; height: 31px; -webkit-mask: url('/mm/edge-top.png') center top / 100% 100% no-repeat; mask: url('/mm/edge-top.png') center top / 100% 100% no-repeat; z-index: 1; }
.lp .ingredients::before { top: -3px; background: #dfeaed; }
.lp .ingredients::after { bottom: -3px; background: #fff; transform: scale(-1, -1); }
.lp .ingredients .wrap { max-width: 1340px; }
.lp .ingredients .h2 { font-family: var(--mm-serif); font-weight: 400; font-size: clamp(40px, 4.2vw, 60px); line-height: 1.06; color: #fff; margin-bottom: 18px; }
.lp .ingredients .lead { max-width: 620px; margin: 0 auto 70px; font-family: var(--mm-serif); font-size: 23px; font-style: italic; font-weight: 500; line-height: 1.45; color: rgba(255,255,255,.88); text-wrap: balance; }
.lp .ingredients__list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
.lp .ingredients__list li { position: relative; border: 0; padding: 0 clamp(14px, 1.8vw, 30px); text-align: center; }
/* pencil divider between columns */
.lp .ingredients__list li + li::after { content: ""; position: absolute; left: 0; top: 30px; bottom: 10px; width: 8px; margin-left: -4px; background: url('/mm/line-v.png') center / 100% 100% no-repeat; filter: brightness(0) invert(1); opacity: .35; }
.lp .ingredients__n { display: none; }
.lp .ingredients__list li::before { content: ""; display: block; height: 150px; margin: 0 auto 26px; background: var(--mm-ing) center bottom / contain no-repeat; transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.lp .ingredients__list li:hover::before { transform: translateY(-4px) rotate(-2deg); }
.lp .ingredients__list li:nth-child(1) { --mm-ing: url('/mm/ing/tremella.webp'); }
.lp .ingredients__list li:nth-child(2) { --mm-ing: url('/mm/ing/red-algae.webp'); }
.lp .ingredients__list li:nth-child(3) { --mm-ing: url('/mm/ing/mosscelltec.webp'); }
.lp .ingredients__list li:nth-child(4) { --mm-ing: url('/mm/ing/sea-lettuce.webp'); }
.lp .ingredients__list li:nth-child(5) { --mm-ing: url('/mm/ing/rosemary.webp'); }
.lp .ingredients__role { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; margin: 0 0 16px; font-family: var(--mm-serif); font-size: 15px; font-weight: 600; letter-spacing: .18em; color: #fff; }
.lp .ingredients__role::after { content: ""; width: 54px; height: 7px; background: url('/mm/line.png') 6% 50% / 300px 100% no-repeat; filter: brightness(0) invert(1); opacity: .8; }
.lp .ingredients h3 { margin-bottom: 12px; font-family: var(--mm-serif); font-weight: 500; font-size: 27px; line-height: 1.12; color: #fff; text-wrap: balance; }
.lp .ingredients__list p:last-child { font-family: var(--mm-serif); font-size: 19px; font-weight: 500; line-height: 1.45; color: rgba(255,255,255,.85); }

@media (max-width: 1100px) {
  .lp .ingredients__list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 56px 0; }
  .lp .ingredients__list li { grid-column: span 2; }
  .lp .ingredients__list li:nth-child(4) { grid-column: 2 / span 2; }
  .lp .ingredients__list li + li::after { display: none; }
}
@media (max-width: 760px) {
  .lp .ingredients { padding: 100px 0 110px; }
  .lp .ingredients .h2 { font-size: 38px; }
  .lp .ingredients .lead { font-size: 20px; margin-bottom: 48px; }
  .lp .ingredients__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 0; }
  .lp .ingredients__list li, .lp .ingredients__list li:nth-child(4) { grid-column: auto; padding: 0 12px; }
  .lp .ingredients__list li:nth-child(5) { grid-column: 1 / -1; max-width: 300px; margin: 0 auto; }
  .lp .ingredients__list li::before { height: 110px; margin-bottom: 18px; }
  .lp .ingredients__role { font-size: 13px; letter-spacing: .14em; }
  .lp .ingredients h3 { font-size: 23px; }
  .lp .ingredients__list p:last-child { font-size: 17px; }
}

/* ---------------------------------------------------------------- 11. Why switch */
.lp .compare.wrap { max-width: none; background: #fff; padding: 140px max(clamp(24px, 6vw, 120px), calc((100% - 1000px) / 2)) 140px; }
.lp .compare .h2 { font-family: var(--mm-serif); font-weight: 400; font-size: clamp(40px, 4.2vw, 60px); line-height: 1.06; color: var(--mm-ink); margin-bottom: 56px; }
.lp .compare__table { max-width: 920px; font-family: var(--mm-serif); color: var(--mm-ink); }
/* pencil line under every row instead of a hairline */
.lp .compare__table th, .lp .compare__table td { border: 0; padding: 20px 16px; }
.lp .compare__table tbody tr { background: url('/mm/line.png') 50% 100% / max(100%, 980px) 5px no-repeat; }
.lp .compare__table tbody th { font-size: 21px; font-weight: 500; line-height: 1.3; }
.lp .compare__table thead th { padding-bottom: 18px; font-size: 14px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mm-navy); }
/* our column: a soft blue wash, navy torn label on top */
.lp .compare__us { background: rgba(31, 77, 111, .08); }
.lp .compare__table thead .compare__us { padding: 18px 18px 16px; background: var(--mm-navy); color: #fff; border-radius: 0; font-size: 22px; font-weight: 600; letter-spacing: .02em; text-transform: none; -webkit-mask: url('/mm/mask-block.png') center / 100% 100% no-repeat; mask: url('/mm/mask-block.png') center / 100% 100% no-repeat; }
/* hand drawn ticks and crosses */
.lp .compare .yes, .lp .compare .no { display: inline-block; width: 30px; height: 30px; border: 0; border-radius: 0; background: var(--mm-navy); vertical-align: middle; }
.lp .compare .yes { -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.6%2013.2c1.6%201.1%203.3%203%204.9%205.6.4.6.9.6%201.2%200C12.4%2013%2015.9%208.3%2020.6%204.4%27/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.6%2013.2c1.6%201.1%203.3%203%204.9%205.6.4.6.9.6%201.2%200C12.4%2013%2015.9%208.3%2020.6%204.4%27/%3E%3C/svg%3E") center / contain no-repeat; }
.lp .compare .no { width: 24px; height: 24px; background: var(--mm-ink); opacity: .4; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6.2%206.4c3.6%203.4%207.4%207.6%2011.4%2011.3%27/%3E%3Cpath%20d%3D%27M17.6%206c-3.9%203.6-7.6%207.5-11.3%2011.8%27/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6.2%206.4c3.6%203.4%207.4%207.6%2011.4%2011.3%27/%3E%3Cpath%20d%3D%27M17.6%206c-3.9%203.6-7.6%207.5-11.3%2011.8%27/%3E%3C/svg%3E") center / contain no-repeat; }
.lp .compare .yes--muted { opacity: .4; background: var(--mm-ink); }
.lp .compare .yes svg, .lp .compare .no svg { display: none; }
/* the app's internal draft note is not for customers */
.lp .compare .footnote { display: none; }
.lp .compare .center .btn { margin-top: 60px; min-height: 0; padding: 16px 34px; background: var(--mm-navy); color: #fff; border: 1px solid var(--mm-navy); font-family: var(--mm-serif); font-size: 21px; font-weight: 600; letter-spacing: .06em; border-radius: 4px; transition: background-color .35s ease, color .35s ease; }
.lp .compare .center .btn::after { content: ""; width: 16px; height: 12px; flex: 0 0 16px; background: currentColor; -webkit-mask: url('/mm/arrow-right.png') center / contain no-repeat; mask: url('/mm/arrow-right.png') center / contain no-repeat; }
.lp .compare .center .btn:hover { filter: none; background: #fff; color: var(--mm-navy); }

@media (max-width: 760px) {
  .lp .compare.wrap { padding: 96px 16px 100px; }
  .lp .compare .h2 { font-size: 38px; margin-bottom: 32px; }
  .lp .compare__table th, .lp .compare__table td { padding: 15px 6px; }
  .lp .compare__table tbody th { font-size: 16px; line-height: 1.25; padding-left: 0; }
  .lp .compare__table thead th { font-size: 11px; letter-spacing: .1em; }
  .lp .compare__table thead .compare__us { font-size: 16px; padding: 12px 8px; }
  .lp .compare .yes { width: 24px; height: 24px; }
  .lp .compare .no { width: 19px; height: 19px; }
  .lp .compare .center .btn { margin-top: 44px; font-size: 19px; padding: 15px 28px; }
}

/* ---------------------------------------------------------------- 12. Questions & answers */
/* pale blue band with a torn white edge; pencil lines between questions */
.lp .faq.wrap { position: relative; max-width: none; background: #dfeaed; padding: 140px max(clamp(24px, 6vw, 120px), calc((100% - 860px) / 2)) 150px; }
.lp .faq.wrap::before { content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 31px; background: #fff; -webkit-mask: url('/mm/edge-top.png') center top / 100% 100% no-repeat; mask: url('/mm/edge-top.png') center top / 100% 100% no-repeat; }
.lp .faq .h2 { font-family: var(--mm-serif); font-weight: 400; font-size: clamp(40px, 4.2vw, 60px); line-height: 1.06; color: var(--mm-ink); margin-bottom: 50px; }
.lp .faq__list { border: 0; margin-bottom: 0; background: url('/mm/line.png') 50% 0 / max(100%, 980px) 5px no-repeat; }
.lp .faq__item { border: 0; background: url('/mm/line.png') 50% 100% / max(100%, 980px) 5px no-repeat; }
.lp .faq__item summary { padding: 26px 52px 26px 0; font-family: var(--mm-serif); font-size: 24px; font-weight: 500; line-height: 1.3; color: var(--mm-ink); transition: color .35s ease; }
.lp .faq__item summary:hover { color: var(--mm-navy); }
/* drawn plus that turns into a minus */
.lp .faq__item summary::after { content: ""; top: 50%; right: 8px; width: 18px; height: 18px; margin-top: -9px; background: linear-gradient(var(--mm-navy), var(--mm-navy)) center / 100% 1.6px no-repeat, linear-gradient(var(--mm-navy), var(--mm-navy)) center / 1.6px 100% no-repeat; transition: transform .45s ease, background-size .45s ease; }
.lp .faq__item[open] summary::after { transform: rotate(180deg); background-size: 100% 1.6px, 1.6px 0; }
.lp .faq__item p { max-width: 720px; padding: 0 0 30px; font-family: var(--mm-serif); font-size: 21px; font-weight: 500; line-height: 1.55; color: var(--mm-ink); }
.lp .faq__item[open] p { animation: mm-rise .5s cubic-bezier(.22,.61,.36,1); }
.lp .faq .center .btn { margin-top: 60px; min-height: 0; padding: 16px 34px; background: var(--mm-navy); color: #fff; border: 1px solid var(--mm-navy); font-family: var(--mm-serif); font-size: 21px; font-weight: 600; letter-spacing: .06em; border-radius: 4px; transition: background-color .35s ease, color .35s ease; }
.lp .faq .center .btn::after { content: ""; width: 16px; height: 12px; flex: 0 0 16px; background: currentColor; -webkit-mask: url('/mm/arrow-right.png') center / contain no-repeat; mask: url('/mm/arrow-right.png') center / contain no-repeat; }
.lp .faq .center .btn:hover { filter: none; background: #fff; color: var(--mm-navy); }

@media (max-width: 760px) {
  .lp .faq.wrap { padding: 96px 22px 104px; }
  .lp .faq .h2 { font-size: 38px; margin-bottom: 32px; }
  .lp .faq__item summary { font-size: 21px; padding: 22px 40px 22px 0; }
  .lp .faq__item summary::after { width: 15px; height: 15px; margin-top: -7.5px; right: 4px; }
  .lp .faq__item p { font-size: 19px; padding-bottom: 24px; }
  .lp .faq .center .btn { margin-top: 44px; font-size: 19px; padding: 15px 28px; }
}

/* nothing may push the page sideways on phones (the stats washes spill past the edge) */
html, body, .lp .stats { overflow-x: clip; }
/* keyboard focus ring in our navy, not the app's orange */
.lp :focus-visible { outline: 2px solid var(--mm-navy); outline-offset: 3px; }
.lp .hero :focus-visible, .lp .header :focus-visible, .lp .benefits :focus-visible, .lp .ingredients :focus-visible, .lp .final :focus-visible { outline-color: #fff; }

/* ---------------------------------------------------------------- 13. Final band, footer, sticky bar, demo dialog */
.lp .final { min-height: 620px; }
.lp .final::before, .lp .final::after { content: ""; position: absolute; left: 0; right: 0; height: 31px; z-index: 2; -webkit-mask: url('/mm/edge-top.png') center top / 100% 100% no-repeat; mask: url('/mm/edge-top.png') center top / 100% 100% no-repeat; }
.lp .final::before { top: -3px; background: #dfeaed; }
.lp .final::after { bottom: -3px; background: var(--mm-header); transform: scale(-1, -1); }
.lp .final .hero__shade { background: linear-gradient(rgba(10, 20, 22, .38), rgba(10, 20, 22, .55)); }
.lp .final__inner { max-width: 760px; padding: 130px 24px 140px; }
.lp .final .h2 { margin-bottom: 18px; font-family: var(--mm-serif); font-weight: 400; font-size: clamp(44px, 5vw, 72px); line-height: 1.04; color: #fff; text-wrap: balance; text-shadow: 0 2px 24px rgba(0,0,0,.25); }
.lp .final__inner p { margin-bottom: 34px; font-family: var(--mm-serif); font-size: 23px; font-weight: 500; line-height: 1.5; color: #fff; text-wrap: balance; text-shadow: 0 1px 14px rgba(0,0,0,.35); }
.lp .final .btn, .lp .sticky .btn { width: auto; min-height: 0; padding: 16px 34px; border-radius: 4px; font-family: var(--mm-serif); font-size: 21px; font-weight: 600; letter-spacing: .06em; transition: background-color .35s ease, color .35s ease, border-color .35s ease; }
.lp .final .btn { background: #fff; color: var(--mm-navy); border: 1px solid #fff; }
.lp .final .btn:hover { filter: none; background: transparent; color: #fff; }
.lp .final .btn::after, .lp .sticky .btn::after { content: ""; width: 16px; height: 12px; flex: 0 0 16px; background: currentColor; -webkit-mask: url('/mm/arrow-right.png') center / contain no-repeat; mask: url('/mm/arrow-right.png') center / contain no-repeat; }
/* footer: navy, our wordmark, serif */
.lp .footer { background: var(--mm-header); padding: 70px 24px 80px; font-family: var(--mm-serif); font-size: 18px; font-weight: 500; line-height: 1.6; color: rgba(255,255,255,.82); }
.lp .footer::before { content: ""; display: block; width: 190px; height: 44px; margin: 0 auto 26px; background: url('/mm/logo-white.webp') center / contain no-repeat; }
.lp .footer a { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
/* mobile sticky bar: white paper with a pencil line, our navy button */
.lp .sticky { background: #fff url('/mm/line.png') 50% 0 / max(100%, 980px) 5px no-repeat; border-top: 0; padding-top: 14px; box-shadow: 0 -8px 24px rgba(29, 51, 64, .08); }
.lp .sticky .btn { width: 100%; background: var(--mm-navy); color: #fff; border: 1px solid var(--mm-navy); font-size: 19px; padding: 15px 20px; }
/* demo checkout dialog */
.lp .demo { background: #fff; border-radius: 0; padding: 40px 36px 36px; font-family: var(--mm-serif); color: var(--mm-ink); -webkit-mask: url('/mm/mask-block.png') center / 100% 100% no-repeat; mask: url('/mm/mask-block.png') center / 100% 100% no-repeat; }
.lp .demo .eyebrow { font-family: var(--mm-serif); font-size: 14px; font-weight: 600; letter-spacing: .18em; color: var(--mm-navy); }
.lp .demo h3 { font-family: var(--mm-serif); font-weight: 500; font-size: 30px; line-height: 1.15; }
.lp .demo p { font-size: 19px; font-weight: 500; line-height: 1.5; }
.lp .demo .footnote { font-size: 16px; font-style: italic; opacity: .8; }
.lp .demo .btn { min-height: 0; padding: 13px 28px; background: var(--mm-navy); color: #fff; border: 1px solid var(--mm-navy); border-radius: 4px; font-family: var(--mm-serif); font-size: 19px; font-weight: 600; letter-spacing: .06em; transition: background-color .35s ease, color .35s ease; }
.lp .demo .btn:hover { filter: none; background: #fff; color: var(--mm-navy); }

@media (max-width: 760px) {
  .lp .final { min-height: 520px; }
  .lp .final__inner { padding: 100px 22px 110px; }
  .lp .final .h2 { font-size: 42px; }
  .lp .final__inner p { font-size: 20px; }
  .lp .final .btn { font-size: 19px; padding: 15px 28px; }
  .lp .footer { padding: 56px 22px 120px; font-size: 17px; }
  .lp .footer::before { width: 160px; height: 38px; }
}

/* ================================================================ Page: bloom-dry-skin
   Section order differs (benefits → ingredients → videos → offer → story → faq), so keep the bands alternating:
   ingredients goes pale blue with dark text, story goes white. */
body[data-mm="bloom-dry-skin"] .stats__value { font-size: 50px; }
body[data-mm="bloom-dry-skin"] .stats__grid > div:nth-child(4) .stats__value::before { width: 300px; height: 220px; }
body[data-mm="bloom-dry-skin"] .ingredients { background: #dfeaed; }
body[data-mm="bloom-dry-skin"] .ingredients::before { background: var(--mm-header); }
body[data-mm="bloom-dry-skin"] .ingredients .h2, body[data-mm="bloom-dry-skin"] .ingredients h3 { color: var(--mm-ink); }
body[data-mm="bloom-dry-skin"] .ingredients .lead, body[data-mm="bloom-dry-skin"] .ingredients__list p:last-child { color: var(--mm-ink); }
body[data-mm="bloom-dry-skin"] .ingredients__role { color: var(--mm-navy); }
body[data-mm="bloom-dry-skin"] .ingredients__role::after, body[data-mm="bloom-dry-skin"] .ingredients__list li + li::after { filter: none; }
body[data-mm="bloom-dry-skin"] .story { background: #fff; }
body[data-mm="bloom-dry-skin"] .story::before { display: none; }
@media (max-width: 760px) {
  body[data-mm="bloom-dry-skin"] .stats__value { font-size: 38px; }
  body[data-mm="bloom-dry-skin"] .stats__grid > div:nth-child(4) .stats__value::before { width: 210px; height: 180px; }
}

/* ================================================================ Page: christmas-gift
   hero → benefits (navy) → offer (blue) → box (white) → story (blue) → faq → final: faq goes white. */
body[data-mm="christmas-gift"] .hero::after { background: var(--mm-header); }
body[data-mm="christmas-gift"] .offer::before { background: var(--mm-header); }
body[data-mm="christmas-gift"] .faq.wrap { background: #fff; }
body[data-mm="christmas-gift"] .faq.wrap::before { background: #dfeaed; }
body[data-mm="christmas-gift"] .final::before { background: #fff; }
/* the first two box photos are shot on white: let the pale blue paper show through so the torn edge reads */
body[data-mm="christmas-gift"] .box__card:nth-child(-n+2) .box__img img { mix-blend-mode: multiply; }

/* ---------------------------------------------------------------- 14. Problem → our answer (ps) */
/* pale blue band; problems on torn white paper, our answers on torn navy paper, hand arrows between */
.lp .ps.wrap { position: relative; max-width: none; background: #dfeaed; padding: 140px max(clamp(24px, 6vw, 120px), calc((100% - 1080px) / 2)) 150px; }
.lp .ps.wrap::before, .lp .ps.wrap::after { content: ""; position: absolute; left: 0; right: 0; height: 31px; background: #fff; -webkit-mask: url('/mm/edge-top.png') center top / 100% 100% no-repeat; mask: url('/mm/edge-top.png') center top / 100% 100% no-repeat; }
.lp .ps.wrap::before { top: -3px; }
.lp .ps.wrap::after { bottom: -3px; transform: scale(-1, -1); }
.lp .ps .h2 { font-family: var(--mm-serif); font-weight: 400; font-size: clamp(40px, 4.2vw, 60px); line-height: 1.06; color: var(--mm-ink); margin-bottom: 18px; text-wrap: balance; }
.lp .ps__intro { max-width: 620px; margin: 0 auto 56px; font-family: var(--mm-serif); font-size: 23px; font-style: italic; font-weight: 500; line-height: 1.45; color: var(--mm-ink); text-wrap: balance; }
.lp .ps__heads, .lp .ps__row { grid-template-columns: 1fr 72px 1fr; max-width: 1080px; }
.lp .ps__heads { margin-bottom: 18px; }
.lp .ps__heads .eyebrow { display: flex; align-items: center; gap: 14px; padding-left: 4px; font-family: var(--mm-serif); font-size: 15px; font-weight: 600; letter-spacing: .18em; }
.lp .ps__heads .eyebrow::after { content: ""; width: 54px; height: 7px; background: url('/mm/line.png') 6% 50% / 300px 100% no-repeat; }
.lp .ps__heads .eyebrow:first-child { color: var(--mm-ink); opacity: .7; }
.lp .ps__heads .eyebrow:last-child { color: var(--mm-navy); }
.lp .ps__list { gap: 22px; margin-bottom: 0; }
.lp .ps__card { border-radius: 0; padding: 32px 34px 34px 78px; -webkit-mask: url('/mm/mask-block.png') center / 100% 100% no-repeat; mask: url('/mm/mask-block.png') center / 100% 100% no-repeat; }
.lp .ps__card h3 { margin-bottom: 10px; font-family: var(--mm-serif); font-weight: 500; font-size: 27px; line-height: 1.15; }
.lp .ps__card p { font-family: var(--mm-serif); font-size: 19px; font-weight: 500; line-height: 1.5; }
.lp .ps__card--problem { background: #fff; color: var(--mm-ink); }
.lp .ps__card--problem p { color: var(--mm-ink); opacity: .85; }
.lp .ps__card--solution { background: var(--mm-navy); color: #fff; }
.lp .ps__card--solution p { color: rgba(255,255,255,.88); }
/* hand drawn cross and tick in place of the round badges */
.lp .ps__mark { top: 34px; left: 30px; width: 28px; height: 28px; border-radius: 0; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.6%2013.2c1.6%201.1%203.3%203%204.9%205.6.4.6.9.6%201.2%200C12.4%2013%2015.9%208.3%2020.6%204.4%27/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.6%2013.2c1.6%201.1%203.3%203%204.9%205.6.4.6.9.6%201.2%200C12.4%2013%2015.9%208.3%2020.6%204.4%27/%3E%3C/svg%3E") center / contain no-repeat; }
.lp .ps__mark svg { display: none; }
.lp .ps__mark--no { width: 24px; height: 24px; top: 36px; left: 32px; background: var(--mm-ink); opacity: .45; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6.2%206.4c3.6%203.4%207.4%207.6%2011.4%2011.3%27/%3E%3Cpath%20d%3D%27M17.6%206c-3.9%203.6-7.6%207.5-11.3%2011.8%27/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6.2%206.4c3.6%203.4%207.4%207.6%2011.4%2011.3%27/%3E%3Cpath%20d%3D%27M17.6%206c-3.9%203.6-7.6%207.5-11.3%2011.8%27/%3E%3C/svg%3E") center / contain no-repeat; }
/* hand drawn arrow between the cards */
.lp .ps__arrow { font-size: 0; color: transparent; }
.lp .ps__arrow::before { content: ""; width: 34px; height: 24px; background: var(--mm-navy); -webkit-mask: url('/mm/arrow-right.png') center / contain no-repeat; mask: url('/mm/arrow-right.png') center / contain no-repeat; }
.lp .ps .center .btn { margin-top: 60px; min-height: 0; padding: 16px 34px; background: var(--mm-navy); color: #fff; border: 1px solid var(--mm-navy); font-family: var(--mm-serif); font-size: 21px; font-weight: 600; letter-spacing: .06em; border-radius: 4px; transition: background-color .35s ease, color .35s ease; }
.lp .ps .center .btn::after { content: ""; width: 16px; height: 12px; flex: 0 0 16px; background: currentColor; -webkit-mask: url('/mm/arrow-right.png') center / contain no-repeat; mask: url('/mm/arrow-right.png') center / contain no-repeat; }
.lp .ps .center .btn:hover { filter: none; background: #fff; color: var(--mm-navy); }
/* a study note under the stats (grown-not-picked) */
.lp .stats .footnote { max-width: 760px; margin: 60px auto 0; font-family: var(--mm-serif); font-size: 18px; font-style: italic; font-weight: 500; line-height: 1.5; color: var(--mm-ink); opacity: .75; text-wrap: balance; }

@media (max-width: 760px) {
  .lp .ps.wrap { padding: 96px 18px 104px; }
  .lp .ps__heads { display: none; }
  .lp .ps__row { grid-template-columns: 1fr; }
  .lp .ps__arrow { height: 48px; transform: rotate(90deg); }
  .lp .ps .h2 { font-size: 36px; }
  .lp .ps__intro { font-size: 20px; margin-bottom: 36px; }
  .lp .ps__list { gap: 34px; }
  .lp .ps__card { padding: 26px 22px 28px 62px; }
  .lp .ps__card h3 { font-size: 23px; }
  .lp .ps__card p { font-size: 18px; }
  .lp .ps__mark { top: 28px; left: 22px; width: 24px; height: 24px; }
  .lp .ps__mark--no { top: 30px; left: 24px; width: 20px; height: 20px; }
  .lp .ps__label { font-family: var(--mm-serif); font-size: 13px; font-weight: 600; letter-spacing: .16em; margin-bottom: 8px; }
  .lp .ps__card--problem .ps__label { color: var(--mm-ink); opacity: .7; }
  .lp .ps__card--solution .ps__label { color: rgba(255,255,255,.8); }
  .lp .ps__arrow { height: 44px; }
  .lp .ps .center .btn { margin-top: 44px; font-size: 19px; padding: 15px 28px; }
  .lp .stats .footnote { font-size: 16px; margin-top: 44px; }
}

/* ================================================================ Page: grown-not-picked
   hero → press → ps (blue) → stats → story (blue) → videos → ingredients (navy) → offer (blue) → story → faq (blue) → final */
body[data-mm="grown-not-picked"] .stats__value { font-size: 54px; }
/* the film scan has a black border: crop it out */
.lp .story__img img[src*="film"] { transform: scale(1.08); }
body[data-mm="grown-not-picked"] .ugc { position: relative; }
body[data-mm="grown-not-picked"] .ugc::before { content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 31px; background: #dfeaed; -webkit-mask: url('/mm/edge-top.png') center top / 100% 100% no-repeat; mask: url('/mm/edge-top.png') center top / 100% 100% no-repeat; z-index: 1; }
body[data-mm="grown-not-picked"] .ingredients::before { background: #fff; }
body[data-mm="grown-not-picked"] .ingredients::after { background: #dfeaed; }
body[data-mm="grown-not-picked"] .offer::before { display: none; }
body[data-mm="grown-not-picked"] .offer + .story { background: #fff; }
body[data-mm="grown-not-picked"] .offer + .story::before { display: none; }
@media (max-width: 760px) {
  body[data-mm="grown-not-picked"] .stats__value { font-size: 40px; }
}

/* ---------------------------------------------------------------- 15. Founder's letter (sea-swim) */
/* pale blue band, torn photo, the letter on torn white paper, signed in script */
.lp .letter { position: relative; background: #dfeaed; padding: 140px max(clamp(24px, 6vw, 120px), calc((100% - 1120px) / 2)) 150px; }
.lp .letter::before, .lp .letter::after { content: ""; position: absolute; left: 0; right: 0; height: 31px; background: #fff; -webkit-mask: url('/mm/edge-top.png') center top / 100% 100% no-repeat; mask: url('/mm/edge-top.png') center top / 100% 100% no-repeat; }
.lp .letter::before { top: -3px; }
.lp .letter::after { bottom: -3px; transform: scale(-1, -1); }
.lp .letter__inner { max-width: 1120px; grid-template-columns: 380px 1fr; gap: clamp(40px, 6vw, 96px); }
.lp .letter__img { border-radius: 0; -webkit-mask: url('/mm/mask-portrait.png') center / 100% 100% no-repeat; mask: url('/mm/mask-portrait.png') center / 100% 100% no-repeat; transform: rotate(-1.4deg); }
.lp .letter .eyebrow { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 20px; font-family: var(--mm-serif); font-size: 16px; font-weight: 600; letter-spacing: .18em; color: var(--mm-navy); }
.lp .letter .eyebrow::after { content: ""; width: 64px; height: 8px; background: url('/mm/line.png') 6% 50% / 300px 100% no-repeat; }
.lp .letter .h2 { margin-bottom: 34px; font-family: var(--mm-serif); font-weight: 400; font-size: clamp(40px, 4vw, 58px); line-height: 1.06; color: var(--mm-ink); }
.lp .letter__paper { border-radius: 0; box-shadow: none; background: #fff; padding: clamp(32px, 5vw, 60px) clamp(28px, 5vw, 64px); -webkit-mask: url('/mm/mask-block.png') center / 100% 100% no-repeat; mask: url('/mm/mask-block.png') center / 100% 100% no-repeat; }
.lp .letter__paper p { margin-bottom: 18px; font-family: var(--mm-serif); font-size: 22px; font-weight: 500; line-height: 1.55; color: var(--mm-ink); }
.lp .letter__paper .letter__sign { margin: 34px 0 6px; font-family: var(--mm-script); font-size: 68px; font-style: normal; font-weight: 400; line-height: 1; color: var(--mm-navy); transform: rotate(-3deg); transform-origin: left center; }
.lp .letter__paper .letter__role { margin: 0; text-wrap: balance; font-family: var(--mm-serif); font-size: 14px; font-weight: 600; letter-spacing: .16em; color: var(--mm-navy); opacity: .75; }

@media (max-width: 860px) {
  .lp .letter { padding: 96px 20px 104px; }
  .lp .letter__inner { grid-template-columns: 1fr; gap: 44px; }
  .lp .letter__img { max-width: 300px; width: 100%; justify-self: center; }
  .lp .letter .eyebrow { font-size: 14px; letter-spacing: .14em; gap: 10px; }
  .lp .letter .eyebrow::after { width: 48px; }
  .lp .letter .h2 { font-size: 38px; margin-bottom: 26px; }
  .lp .letter__paper { padding: 30px 24px 32px; }
  .lp .letter__paper p { font-size: 19px; }
  .lp .letter__paper .letter__sign { font-size: 56px; }
}

/* ================================================================ Page: sea-swim
   hero → press → letter (blue) → ps (white) → box (blue) → videos (white) → ingredients (navy) → offer (blue) → faq (white) → final */
body[data-mm="sea-swim"] .ps.wrap { background: #fff; }
body[data-mm="sea-swim"] .ps.wrap::before, body[data-mm="sea-swim"] .ps.wrap::after { display: none; }
body[data-mm="sea-swim"] .ps__card--problem { background: #dfeaed; }
body[data-mm="sea-swim"] .box.wrap { position: relative; background: #dfeaed; }
body[data-mm="sea-swim"] .box.wrap::before, body[data-mm="sea-swim"] .box.wrap::after { content: ""; position: absolute; left: 0; right: 0; height: 31px; background: #fff; -webkit-mask: url('/mm/edge-top.png') center top / 100% 100% no-repeat; mask: url('/mm/edge-top.png') center top / 100% 100% no-repeat; }
body[data-mm="sea-swim"] .box.wrap::before { top: -3px; }
body[data-mm="sea-swim"] .box.wrap::after { bottom: -3px; transform: scale(-1, -1); }
body[data-mm="sea-swim"] .ingredients::before { background: #fff; }
body[data-mm="sea-swim"] .ingredients::after { background: #dfeaed; }
body[data-mm="sea-swim"] .offer::before { display: none; }
body[data-mm="sea-swim"] .faq.wrap { background: #fff; }
body[data-mm="sea-swim"] .faq.wrap::before { display: none; }
body[data-mm="sea-swim"] .final::before { background: #fff; }

/* ================================================================ Page: cracked-skin
   hero → press → stats → ps (blue) → box → ingredients (navy) → videos → offer (blue) → story → faq (blue) → final */
body[data-mm="cracked-skin"] .stats__value { font-size: 50px; }
body[data-mm="cracked-skin"] .stats__grid > div:nth-child(4) .stats__value::before { width: 300px; height: 220px; }
body[data-mm="cracked-skin"] .ingredients::before { background: #fff; }
body[data-mm="cracked-skin"] .story { background: #fff; }
body[data-mm="cracked-skin"] .story::before { display: none; }
@media (max-width: 760px) {
  body[data-mm="cracked-skin"] .stats__value { font-size: 38px; }
  body[data-mm="cracked-skin"] .stats__grid > div:nth-child(4) .stats__value::before { width: 210px; height: 180px; }
}

@media (max-width: 760px) {
  .lp .press { padding: 40px 20px 46px; }
  .lp .press .eyebrow { font-size: 14px; letter-spacing: .16em; gap: 12px; margin-bottom: 20px; }
  .lp .press .eyebrow::before, .lp .press .eyebrow::after { width: 44px; }
  .lp .press__list { gap: 12px 30px; }
  .lp .press__name { font-size: 22px; }
}