.formula-story {
  --formula-color: #7e183c;
  color: var(--beauty-ink, #3d1020);
  background: #fff;
  padding: 4.8rem 2.4rem 3.2rem;
  font-family: var(--beauty-sans, Arial, sans-serif);
  overflow-x: clip;
}

.formula-story *, .formula-story *::before, .formula-story *::after { box-sizing: border-box; }
.formula-story__heading { margin: 0; text-align: center; color: #7e183c; font: 700 clamp(2.8rem, 4vw, 4.4rem)/1.15 Arial, sans-serif; letter-spacing: -.035em; }
.formula-story__hint { margin: 1.2rem 0 0; padding-inline: 2.5rem; text-align: center; color: #78515f; font-size: 1.3rem; }
.formula-story__hint span { display: inline-block; margin-left: .6rem; }
.formula-story > header { position: relative; max-width: 90rem; margin-inline: auto; }
.formula-rotator { display: inline-grid; vertical-align: top; }
.formula-rotator__phrase { grid-area: 1 / 1; min-width: 0; align-self: center; }
.formula-rotator__phrase:not(:first-child) { visibility: hidden; }
.formula-motion__word-mask { padding-block: .12em; margin-block: -.12em; }
.formula-motion__word { will-change: transform, opacity; }
.formula-story__motion-toggle { position: absolute; right: 0; bottom: -.6rem; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; padding: 0; border: 1px solid #7e183c30; border-radius: 50%; color: #7e183c; background: #fff; font: 600 1.1rem/1 Arial, sans-serif; cursor: pointer; }
.formula-story__motion-toggle:hover { background: #fbe9ef; }
.formula-story__motion-toggle:focus-visible { outline: 2px solid #7e183c; outline-offset: 3px; }
.formula-story__journey { position: relative; max-width: 118rem; margin: 1.6rem auto 0; isolation: isolate; }
.formula-story__steps { position: relative; }
.formula-story__bottle-track { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.formula-story__sticky { position: relative; height: 100%; text-align: center; }
.formula-story__carrier { position: absolute; top: 24rem; left: 77.5%; width: 28rem; max-width: 46%; transform: translateX(-50%); }
.formula-bottle { position: relative; width: 100%; margin-inline: auto; transform: rotate(var(--bottle-tilt, 0deg)); }
.formula-bottle__glass { position: relative; display: block; width: 100%; height: auto; z-index: 1; }
.formula-bottle__cap { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; z-index: 4; pointer-events: none; opacity: var(--formula-cap-opacity, 0); transform-origin: 50% 28%; transform: translateY(var(--formula-cap-y, -41.5%)) rotate(var(--formula-cap-turn, -12deg)); clip-path: polygon(35.8% 30.7%, 35.8% 19.8%, 36.6% 19.3%, 38.3% 18.9%, 40.7% 18.6%, 42.5% 18.3%, 42.9% 17.2%, 42.3% 15.4%, 42.1% 12%, 42.1% 8.2%, 42.4% 6.5%, 43.2% 5%, 44.5% 3.6%, 46.2% 2.5%, 48% 1.9%, 50% 1.8%, 52.1% 2%, 54% 2.7%, 55.6% 3.8%, 56.9% 5.3%, 57.8% 7.1%, 58% 9%, 58% 15.8%, 58.4% 17.6%, 59.5% 18.6%, 61.7% 18.9%, 63.2% 19.4%, 63.9% 20%, 63.9% 30.7%); }
.formula-story__handoff { position: fixed; top: 0; left: 0; z-index: 40; pointer-events: none; transform-origin: top left; will-change: transform; }
.formula-story__handoff .formula-bottle { width: 100%; margin: 0; transform: none; }
.formula-bottle__reservoir { position: absolute; left: 22%; top: 28%; width: 56%; height: 66%; overflow: hidden; clip-path: polygon(15% 0, 85% 0, 100% 10%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 10%); z-index: 2; mix-blend-mode: multiply; opacity: .65; }
.formula-bottle__liquid { position: absolute; bottom: 0; left: 0; width: 100%; height: var(--formula-pour-fill, var(--formula-fill, 0%)); background: linear-gradient(90deg, #67122c, #c65376 45%, #8e1d42); border-top: 3px solid #e796b0; transition: height .75s cubic-bezier(.2,.65,.3,1); }
.formula-story[data-capsule-pouring="true"] .formula-bottle__liquid { transition: none; }
.formula-story__stream { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 4; overflow: hidden; pointer-events: none; opacity: 0; }
.formula-bottle__liquid::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 40%, #fff5 0 1px, transparent 2px), radial-gradient(ellipse at 70% 70%, #fff3 0 2px, transparent 3px); }
.formula-story__flying-drop { position: fixed; top: 0; left: 0; width: 14px; height: 18px; border-radius: 70% 15% 70% 70%; background: #7e183c; box-shadow: inset 2px 2px 3px #ffffff70; opacity: 0; pointer-events: none; z-index: 5; will-change: transform, opacity; }
.formula-bottle__splash { position: absolute; top: 9%; left: 38%; width: 24%; height: 2%; border: 2px solid #a94668; border-radius: 50%; opacity: 0; z-index: 3; }
.formula-bottle.is-dropping .formula-bottle__splash { animation: formula-splash .45s ease-out both; }
.formula-story__meter { display: grid; gap: .35rem; margin-top: .6rem; color: #78515f; font-size: 1.05rem; letter-spacing: .08em; }
.formula-story__meter [data-formula-count] { color: #7e183c; font-size: 1.5rem; font-weight: 700; }
.formula-story__dots { display: flex; justify-content: center; gap: .7rem; margin-top: 1.4rem; }
.formula-story__dots i { width: .6rem; height: .6rem; border-radius: 50%; background: #e8d9de; transition: background .25s; }
.formula-story__dots i.is-filled { background: #7e183c; }
.formula-step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 10%; align-items: center; min-height: max(78rem, 105svh); padding-block: 6rem; }
.formula-step:last-child { border-bottom: 0; }
.formula-step { --formula-accent: #861640; --formula-accent-soft: #fbe5ed; }
.formula-step:nth-child(2) { --formula-accent: #9d4614; --formula-accent-soft: #ffebd3; }
.formula-step:nth-child(3) { --formula-accent: #765019; --formula-accent-soft: #f6ead1; }
.formula-step:nth-child(4) { --formula-accent: #9b315a; --formula-accent-soft: #fbe3ed; }
.formula-step:first-child { min-height: max(110rem, 145svh); }
.formula-story.is-stepped .formula-step { min-height: max(68rem, calc(100svh - 7.6rem)); scroll-margin-top: 7.6rem; }
.formula-step__copy { position: relative; z-index: 1; min-width: 0; }
.formula-step__number { margin: 0 0 1.6rem; font-size: 1.15rem; color: #9d667a; letter-spacing: .15em; }
.formula-step h3 { margin: 0; color: #7e183c; font: 700 clamp(2.6rem, 3vw, 3.8rem)/1.08 Arial, sans-serif; letter-spacing: -.025em; overflow-wrap: normal; }
.formula-step__focus { display: inline-block; margin: 1.8rem 0 0; padding: .8rem 1.2rem; border-radius: 2rem; background: #fbe9ef; color: #7e183c; font-size: 1.15rem; font-weight: 600; }
.formula-step__results-label { margin: 2.8rem 0 1rem; font-size: 1rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #9d667a; }
.formula-step__results { margin: 0; padding: 0; list-style: none; font-size: clamp(1.5rem, 1.6vw, 1.9rem); line-height: 1.5; }
.formula-step__results li + li { margin-top: .65rem; }
.formula-step__results li::before { content: '↗'; margin-right: .7rem; color: #b74c70; }
.formula-step__media { position: absolute; inset: 0 0 0 auto; width: 45%; }
.formula-step__result { position: relative; display: block; width: 100%; height: 22rem; margin: 0 0 2rem; object-fit: cover; object-position: center 22%; border-radius: 1.2rem; border: .3rem solid #fff; box-shadow: 0 .8rem 2.4rem #3d172014; }
.formula-step:nth-child(3) .formula-step__result { object-position: 75% 48%; }
.formula-step:nth-child(4) .formula-step__result { object-position: center 40%; }
.formula-step__ingredient { position: absolute; top: 3rem; left: 50%; width: min(24rem, 90%); height: auto; aspect-ratio: 1; object-fit: contain; transform: translateX(-50%); border: 0; border-radius: 0; filter: none; }
.formula-source { transform: translateX(-50%); }
.formula-source__embedded, .formula-source__art { display: block; width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 72%; }
.formula-source__embedded { filter: brightness(.96) saturate(.92); transform: translateY(8%) scale(.94); mask-image: radial-gradient(ellipse at 50% 38%, #000 25%, #000e 49%, transparent 76%); }
.formula-source__art { position: absolute; inset: 0; opacity: 0; will-change: transform, opacity; }
.formula-source--capsule .formula-source__embedded, .formula-source--capsule .formula-source__art { position: absolute; inset: -15%; width: 130%; height: 130%; transform-origin: 50% 50%; mask-image: none; filter: none; }
.formula-source--capsule .formula-source__embedded { transform: translateY(8%) rotate(-90deg) scale(.94); }
.formula-capsule__half { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.formula-capsule__half--top { clip-path: inset(0 0 50% 0); transform-origin: 50% 44%; transform: translateY(calc(5% - var(--capsule-opening, 0) * 13%)) rotate(calc(var(--capsule-opening, 0) * -7deg)); }
.formula-capsule__half--bottom { clip-path: inset(50% 0 0 0); }
.formula-capsule__lower { position: absolute; inset: 0; transform-origin: 50% 55%; transform: translateY(calc(-5% + var(--capsule-opening, 0) * 8%)) rotate(calc(var(--capsule-opening, 0) * 4deg)); }
.formula-capsule__outlet { position: absolute; left: 38.5%; top: 56.5%; width: 1px; height: 1px; }
.formula-source__note { position: absolute; top: calc(100% + 1.4rem); left: 50%; transform: translateX(-50%); padding: .4rem .75rem; border: 1px solid #ffffff85; border-radius: 1rem; background: #fffbefe6; color: #765019; font-size: .8rem; line-height: 1.2; white-space: nowrap; }
.formula-source--capsule .formula-source__note { transition: opacity .2s; }
.formula-step.is-source-lifted .formula-source--capsule .formula-source__note { opacity: 0; }
.formula-step__media { mix-blend-mode: multiply; }
.formula-step.is-source-lifted .formula-step__media { mix-blend-mode: normal; }
.formula-step:not(.is-source-lifted) .maqui-motion__cluster { mask-image: radial-gradient(ellipse at 50% 42%, #000 25%, #000e 52%, transparent 79%); }
.maqui-motion { --maqui-start: 30px; position: sticky; top: 14svh; left: auto; margin: var(--maqui-start) auto 0; transform: none; isolation: isolate; }
.formula-story.is-stepped .maqui-motion { position: absolute; top: var(--maqui-start); left: 50%; margin: 0; transform: translateX(-50%); }
.maqui-motion__cluster { position: relative; display: block; width: 100%; height: auto; z-index: 2; transform-origin: 50% 70%; will-change: transform, opacity; }
.maqui-motion__cluster { aspect-ratio: 1; }
.maqui-motion__still { display: block; width: 100%; height: 100%; object-fit: contain; transition: opacity .55s ease; }
.maqui-motion__model { position: absolute; inset: 0; opacity: 0; transition: opacity .55s ease; }
.maqui-motion__model canvas { display: block; width: 100%; height: 100%; }
.maqui-motion.is-3d-ready .maqui-motion__still { opacity: 0; }
.maqui-motion.is-3d-ready .maqui-motion__model { opacity: 1; }
.maqui-world { position: absolute; top: 0; left: 50%; width: 100vw; height: 100%; transform: translateX(-50%); overflow: hidden; pointer-events: none; background: linear-gradient(#f0f2eb 0, #fcfcf8 42%, #fff 82%); }
.maqui-world__forest { position: absolute; inset: -3% -3% auto; width: 106%; max-width: none; height: min(54svh, 43rem); object-fit: cover; object-position: center 58%; opacity: .96; mask-image: linear-gradient(#000 0 45%, transparent 100%); transform: translate3d(0, var(--forest-y, 0px), 0) scale(var(--forest-zoom, 1.04)); animation: maqui-canopy 22s ease-in-out infinite alternate; animation-play-state: paused; will-change: transform; }
.maqui-world__mist { position: absolute; inset: 8% -25% auto; height: 28rem; border-radius: 50%; background: radial-gradient(ellipse, #fff8, #fff0 68%); opacity: .65; animation: maqui-mist 16s ease-in-out infinite alternate; animation-play-state: paused; }
.maqui-world__veil { position: absolute; inset: 0; background: linear-gradient(90deg, #fff7, #ffffff08 60%, #fff3), linear-gradient(0deg, #fff 0%, #ffffffe8 25%, #ffffff5c 58%, #fff0 83%); }
.maqui-world__caption { position: absolute; top: 3.4rem; left: max(2.4rem, calc((100vw - 118rem) / 2)); width: 42%; margin: 0; color: #284233; font-size: 1.05rem; line-height: 1.5; text-shadow: 0 1px 12px #fff; }
.maqui-world__caption span { display: block; margin-bottom: .7rem; color: #415c48; font-size: .85rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.maqui-world__mote { position: absolute; top: 18%; left: 8%; width: .35rem; height: .35rem; border-radius: 50%; background: #f7ffe4; box-shadow: 0 0 .8rem #f1f8d4; opacity: 0; animation: maqui-mote 11s ease-in-out infinite; animation-play-state: paused; }
.maqui-world__mote:nth-last-child(2) { left: 44%; top: 24%; animation-delay: -4s; }
.maqui-world__mote:last-child { left: 88%; top: 12%; animation-delay: -8s; }
.maqui-world.is-in-view .maqui-world__forest, .maqui-world.is-in-view .maqui-world__mist, .maqui-world.is-in-view .maqui-world__mote { animation-play-state: running; }
@keyframes maqui-canopy { from { transform: translate3d(-.8%, var(--forest-y, 0px), 0) scale(var(--forest-zoom, 1.04)) rotate(-.35deg); } to { transform: translate3d(.8%, calc(var(--forest-y, 0px) - 8px), 0) scale(calc(var(--forest-zoom, 1.04) + .025)) rotate(.35deg); } }
@keyframes maqui-mist { from { transform: translate3d(-6%, 0, 0) scale(1); } to { transform: translate3d(9%, -1.2rem, 0) scale(1.12); } }
@keyframes maqui-mote { 0%, 100% { opacity: 0; transform: translate3d(0, 2rem, 0); } 45% { opacity: .7; } 85% { opacity: 0; transform: translate3d(2rem, -5rem, 0); } }
.maqui-motion__juice { position: absolute; inset: -20%; width: 140%; height: 140%; object-fit: contain; opacity: 0; z-index: 1; pointer-events: none; will-change: transform, opacity; }
.maqui-motion__halo { position: absolute; inset: 12%; z-index: 0; border-radius: 50%; background: radial-gradient(circle, #e774a04a, #e774a000 70%); opacity: 0; }
.maqui-motion__particle { position: absolute; left: 45%; top: 45%; height: auto; opacity: 0; z-index: 4; pointer-events: none; will-change: transform, opacity; }
.maqui-motion__particle--berry { filter: drop-shadow(0 .3rem .25rem #49122b24); z-index: 3; }
.formula-story__flying-drop.is-maqui { width: 36px; height: 54px; background-color: transparent !important; background-image: url('./maqui-juice-drop-v3.png'); background-position: center; background-size: contain; background-repeat: no-repeat; border-radius: 0; box-shadow: none; }
.formula-step:nth-child(even) .formula-step__copy { grid-column: 2; grid-row: 1; }
.formula-step:nth-child(even) .formula-step__media { inset: 0 auto 0 0; }
.formula-story__end { margin: 1.6rem 0 0; text-align: center; color: #7e183c; font-size: 1.4rem; }
.formula-story__end a { color: inherit; text-underline-offset: .4rem; }

/* A single viewport canvas follows the journey, rather than four short banners.
   Four independently scrubbed layers use the reference's 70/55/40/10 depths. */
.formula-world-stage { position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none; z-index: 0; }
.formula-worlds { position: sticky; top: 0; height: 100svh; min-height: 40rem; overflow: hidden; background: #e5e6da; isolation: isolate; }
.formula-world { position: absolute; inset: 0; overflow: hidden; opacity: 0; background: #e5e6da; }
.formula-world:first-child { opacity: 1; }
.formula-world__layers { position: absolute; inset: 0; overflow: hidden; }
.formula-world__image, .formula-world__foreground { position: absolute; inset: -15%; width: 130%; max-width: none; height: 130%; object-fit: cover; object-position: center; }
.formula-world__foreground { mask-image: linear-gradient(90deg, #000 0, #0009 10%, transparent 28% 72%, #0009 90%, #000 100%); opacity: 1; }
.formula-world--maqui .formula-world__image, .formula-world--maqui .formula-world__foreground { opacity: 1; filter: none; }
.formula-world__atmosphere { position: absolute; inset: -15%; }
.formula-world__haze { display: none; }
.formula-world__atmosphere span { position: absolute; top: 32%; left: 18%; width: .35rem; height: .35rem; border-radius: 50%; background: #fffbd8; box-shadow: 0 0 1rem #fff; opacity: 0; animation: formula-world-mote 10s ease-in-out infinite paused; }
.formula-world__atmosphere span:nth-child(3) { top: 23%; left: 62%; animation-delay: -3s; }
.formula-world__atmosphere span:nth-child(4) { top: 66%; left: 83%; animation-delay: -7s; }
.formula-world__title { position: absolute; top: 10%; left: 0; width: 100%; margin: 0; padding: 0 2.4rem; color: #fffff6; opacity: .44; text-align: center; font: italic 400 clamp(7rem, 12vw, 18rem)/1 Georgia, serif; letter-spacing: -.045em; text-shadow: 0 1px 3rem #2b251111; }
.formula-world__veil { display: none; }
.formula-world__caption { position: absolute; top: 2.2rem; left: max(2.4rem, calc((100vw - 118rem) / 2)); margin: 0; padding: 1rem 1.3rem; border: 1px solid #ffffff75; border-radius: 1.2rem; background: #fffaf0c7; color: #493a30; font-size: 1.1rem; line-height: 1.45; }
.formula-world__caption span { display: block; margin-bottom: .35rem; font-size: .75rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.formula-world.is-visible .formula-world__haze, .formula-world.is-visible .formula-world__atmosphere span { animation-play-state: running; }
.formula-world.is-visible [data-parallax-layer] { will-change: transform; }
.is-world-paused .formula-world__haze, .is-world-paused .formula-world__atmosphere span { animation-play-state: paused; }
.is-world-offscreen .formula-world__haze, .is-world-offscreen .formula-world__atmosphere span { animation-play-state: paused; }
.formula-world-stage ~ .formula-story__steps .formula-step__copy { max-width: 44rem; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.formula-step__body { padding: 2rem 2.2rem; border-left: .2rem solid var(--formula-accent); border-radius: .3rem 1.2rem 1.2rem .3rem; background: #fffcf4e6; box-shadow: 0 .8rem 2.6rem #2424100c; }
.formula-step__copy > .formula-step__result { width: min(82%, 28rem); height: 18rem; margin-bottom: 1.4rem; }
.formula-step__body .formula-step__number { margin-bottom: 1rem; }
.formula-step__body .formula-step__focus { margin-top: 1.1rem; padding: .6rem 1rem; }
.formula-step__body h3, .formula-step__body .formula-step__results-label { color: var(--formula-accent); }
.formula-step__body .formula-step__focus { max-width: 100%; color: var(--formula-accent); background: var(--formula-accent-soft); line-height: 1.45; }
.formula-step__focus.formula-rotator { display: inline-grid; border-radius: .8rem; overflow: hidden; }
.formula-step__focus .formula-rotator__phrase { overflow-wrap: anywhere; }
.formula-step__body .formula-step__results li::before { color: var(--formula-accent); }
.formula-step__body .formula-step__results-label { margin-top: 1.7rem; }
.formula-step__body .formula-step__results li { position: relative; padding-left: 1.5rem; }
.formula-step__body .formula-step__results li::before { position: absolute; left: 0; top: 0; margin: 0; }
.formula-reveal__line-mask { position: relative; overflow: hidden; }
.formula-step__body .formula-reveal__line { overflow-wrap: anywhere; }
.formula-reveal__block { position: absolute; inset: 0; z-index: 1; background: var(--formula-color); pointer-events: none; transform: scaleX(0); }
.formula-world-stage ~ .formula-story__steps .formula-step__media { z-index: 2; }
.formula-world-stage ~ .formula-story__bottle-track .formula-story__meter { width: max-content; max-width: 100%; margin: 1rem auto 0; padding: .7rem 1.4rem; border: 1px solid #ffffffb0; border-radius: 1rem; background: #fffaf2e8; color: #593440; }
.formula-world-stage ~ .formula-story__bottle-track .formula-story__dots i { box-shadow: 0 0 0 2px #fff8; }
@keyframes formula-world-breath { from { transform: translate3d(-4%, 0, 0) scale(1); } to { transform: translate3d(6%, -2%, 0) scale(1.08); } }
@keyframes formula-world-mote { 0%, 100% { opacity: 0; transform: translate3d(0, 3rem, 0); } 40% { opacity: .8; } 90% { opacity: 0; transform: translate3d(2rem, -5rem, 0); } }

@keyframes formula-splash { 0% { opacity: .8; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.6); } }

@media (max-width: 749px) {
  .formula-story { padding: 3rem 1.6rem 2.8rem; }
  .formula-story__heading { font-size: clamp(2.6rem, 7vw, 3.4rem); }
  .formula-story__hint { margin-top: 1rem; font-size: 1.05rem; }
  .formula-story__journey { margin-top: .8rem; }
  .formula-story__bottle-track { inset: 0; width: 100%; }
  .formula-story__carrier { width: 21rem; max-width: 46%; }
  .formula-story__meter { font-size: .85rem; letter-spacing: .02em; }
  .formula-story__meter [data-formula-count] { font-size: 1.2rem; }
  .formula-story__dots { gap: .5rem; margin-top: 1rem; }
  .formula-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 10%; margin-left: 0; min-height: max(76rem, 108svh); padding-block: 4rem; }
  .formula-step:first-child { min-height: max(108rem, 145svh); }
  .formula-step__number { margin-bottom: 1rem; font-size: .95rem; }
  .formula-step h3 { font-size: clamp(1.9rem, 5vw, 2.8rem); line-height: 1.12; }
  .formula-step__focus { margin-top: 1.2rem; padding: .65rem .9rem; font-size: .95rem; }
  .formula-step__results-label { margin: 1.8rem 0 .8rem; font-size: .85rem; }
  .formula-step__results { font-size: 1.25rem; }
  .formula-step__result { width: 100%; height: 14rem; margin-bottom: 1.5rem; border-width: .2rem; border-radius: .9rem; }
  .formula-step__ingredient { top: 2.4rem; width: min(18rem, 98%); border: 0; }
  .maqui-motion { --maqui-start: 24px; top: 14svh; }
  .maqui-world__forest { height: min(43svh, 34rem); }
  .maqui-world__caption { top: 3rem; left: 1.6rem; font-size: .95rem; }
  .maqui-world__caption span { font-size: .75rem; letter-spacing: .12em; }
  .formula-story__end { font-size: 1.2rem; }
  .formula-world__title { top: 14%; font-size: clamp(5rem, 13vw, 9rem); padding-inline: 1.6rem; }
  .formula-world__caption { top: 1.4rem; left: 1.6rem; padding: .8rem 1rem; font-size: .95rem; }
  .formula-world__caption span { font-size: .65rem; letter-spacing: .12em; }
  .formula-world__foreground { mask-image: linear-gradient(90deg, #0009, transparent 25% 75%, #0009); }
  .formula-world-stage ~ .formula-story__steps .formula-step__copy { padding: 0; border-radius: 0; }
  .formula-step__body { padding: 1.3rem .8rem; border-radius: .2rem .9rem .9rem .2rem; }
  .formula-step__copy > .formula-step__result { width: 100%; max-width: 18rem; height: 13rem; margin-bottom: 1rem; }
  .formula-world-stage ~ .formula-story__steps .formula-step h3 { font-size: clamp(1.8rem, 4.4vw, 2.6rem); }
  .formula-world-stage ~ .formula-story__steps .formula-step__results { font-size: 1.1rem; }
  .formula-step__body .formula-step__results li { padding-left: 1.1rem; }
  .formula-world-stage ~ .formula-story__bottle-track .formula-story__meter { padding: .6rem .9rem; }
  .formula-world--maqui .formula-world__image, .formula-world--maqui .formula-world__foreground { object-position: 72% center; }
  .formula-world--orange .formula-world__image, .formula-world--orange .formula-world__foreground { object-position: 24% center; }
  .formula-world--biotin .formula-world__image, .formula-world--biotin .formula-world__foreground { object-position: 72% center; }
  .formula-world--zinc .formula-world__image, .formula-world--zinc .formula-world__foreground { object-position: 28% center; }
}

@media (prefers-reduced-motion: reduce) {
  .formula-bottle, .formula-bottle__liquid, .formula-story__dots i { transition: none; }
  .formula-bottle { transform: none; }
  .formula-story__flying-drop, .formula-story__stream { display: none; }
  .formula-bottle.is-dropping .formula-bottle__splash { animation: none; }
  .maqui-world__forest, .maqui-world__mist, .maqui-world__mote { animation: none; will-change: auto; }
  .maqui-motion__still, .maqui-motion__model { transition: none; }
  .formula-world__haze, .formula-world__atmosphere span { animation: none; }
  .formula-reveal__block { display: none; }
  .formula-reveal__line { opacity: 1 !important; transform: none !important; }
}

/* One gesture / click per mobile chapter. No desktop snapping or fixed body. */
.beauty-page-controls { display: none; }
html.has-beauty-mobile-pages { overscroll-behavior-y: none; scroll-behavior: auto !important; }
.has-beauty-mobile-pages .beauty-hero { min-height: calc(100svh - 8rem); }
.has-beauty-mobile-pages .beauty-page-controls:not([hidden]) {
  position: fixed; bottom: max(12px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  z-index: 35; display: flex; align-items: center; gap: 10px; width: min(360px, calc(100% - 28px));
  padding: 7px; border: 1px solid #ead1db; border-radius: 16px; background: #fffcf9f5;
  box-shadow: 0 6px 24px #47132b1a; color: #7e183c; font-family: var(--beauty-sans, Arial, sans-serif);
}
.beauty-page-controls button {
  min-height: 42px; padding: 8px 12px; border: 0; border-radius: 10px; background: #7e183c;
  color: #fff; font: 600 11px/1.2 var(--beauty-sans, Arial, sans-serif); cursor: pointer;
}
.beauty-page-controls button:first-child { min-width: 42px; background: #f6e7ed; color: #7e183c; font-size: 18px; }
.beauty-page-controls button:disabled { opacity: .42; cursor: default; }
.beauty-page-controls button:focus-visible { outline: 2px solid #7e183c; outline-offset: 3px; }
.beauty-page-controls__caption { flex: 1; min-width: 0; display: grid; gap: 2px; text-align: center; }
.beauty-page-controls__caption strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 600; }
.beauty-page-controls__caption > span { font-size: 9px; font-variant-numeric: tabular-nums; color: #8a6676; }
.has-beauty-mobile-pages .beauty-collections { padding-bottom: 10rem; }
.has-beauty-mobile-pages .beauty-footer { padding-bottom: calc(10rem + env(safe-area-inset-bottom)); }