:root{--forest:#234d35;--forest-deep:#163a28;--ink:#193528;--ink-soft:#586653;--sage:#d8e2c7;--sage-deep:#a9bd91;--ivory:#f4f4ec;--ivory-warm:#eaf0d9;--chartreuse:#dceab6;--gold:#789348;--warn-bg:#edeccf;--warn-ink:#586324;--line:rgba(25,53,40,.17);--sans:'Noto Sans Thai',system-ui,sans-serif;--display:'Manrope','Noto Sans Thai',sans-serif;--brand-wordmark-font:'Kanit',var(--display);--brand-wordmark-weight:400;--gutter:clamp(24px,5.4vw,96px);--header-h:76px;--visual-top:100px;color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ivory);color:var(--ink);font:400 16px/1.75 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
a{color:inherit;text-underline-offset:4px}
button,a,summary{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--forest);outline-offset:4px}
button:disabled{cursor:not-allowed;opacity:.6}
summary{cursor:pointer}
p{margin-top:0}
[hidden]{display:none!important}
.mr-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mr-skip{position:absolute;left:-999px;top:8px;z-index:50;background:var(--forest);color:white;padding:8px 14px}
.mr-skip:focus{left:12px}
.mr-header{position:fixed;inset:0 0 auto;z-index:30;height:var(--header-h);padding:0 var(--gutter);display:flex;align-items:center;gap:20px;background:rgba(244,244,236,.94);border-bottom:1px solid rgba(25,53,40,.08);backdrop-filter:blur(14px)}
.mr-brand{display:flex;align-items:center;gap:12px;margin-right:auto;text-decoration:none;flex:none}
.mr-brand__logos{display:flex;align-items:center;gap:12px}
.mr-brand__house{display:flex;align-items:center;gap:7px;font:var(--brand-wordmark-weight) 14px var(--brand-wordmark-font);white-space:nowrap}
.mr-brand__house img{width:30px;height:33px;object-fit:contain}
.mr-brand__sep{opacity:.5;font:400 16px/1 var(--sans)}
/* Original outlined logo extracted from official label artwork, with true transparent counters. */
.mr-brand__mediral{display:block;width:106px;aspect-ratio:62.312/14.690}
.mr-brand__mediral img{width:100%;height:100%;object-fit:contain}
.mr-brand__partner{font:500 9px/1.45 var(--display);letter-spacing:.03em;color:inherit;opacity:.76;border-left:1px solid currentColor;padding-left:10px;white-space:nowrap}
.mr-btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:48px;padding:10px 22px;border:1px solid var(--forest-deep);border-radius:2px;background:var(--forest-deep);color:var(--ivory);font:500 13px/1.5 var(--sans);text-decoration:none;cursor:pointer;transition:background .2s,transform .2s}
.mr-btn:hover{background:#315b3e;transform:translateY(-2px)}
.mr-btn--ghost{background:transparent;color:var(--forest-deep);border-color:var(--line)}
.mr-btn--ghost:hover{background:#e2ead4}
.mr-btn--small{min-height:34px;padding:6px 14px;font-size:11px}
.mr-header .mr-btn{border-radius:99px;background:transparent;color:var(--forest)}
.mr-btn[aria-disabled=true]{background:#dbe1d1;border-color:transparent;color:#55654f;cursor:not-allowed;transform:none}
.mr-actions{display:flex;flex-wrap:wrap;gap:10px}
.mr-kicker{margin:0 0 14px;color:var(--forest);font:600 10px/1.5 var(--sans);letter-spacing:.12em}
.mr-fine,.mr-disclosure{font-size:11px;line-height:1.75;color:var(--ink-soft)}
.mr-fine{margin:18px 0 0}
.mr-tag{display:inline-block;padding:2px 6px;background:#e5ecd9;color:var(--forest);font-size:10px}
.mr-tag--warn{background:var(--warn-bg);color:var(--warn-ink)}
.mr-h2{font:600 clamp(28px,3vw,48px)/1.25 var(--sans);letter-spacing:-.035em;margin:0 0 20px;text-wrap:balance}
.mr-rail{position:fixed;z-index:25;right:15px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:7px}
.mr-rail a{display:flex;align-items:center;justify-content:flex-end;gap:8px;text-decoration:none;min-height:30px}
.mr-rail__label{font-size:10px;opacity:0;transition:opacity .2s}
.mr-rail a:hover .mr-rail__label,.mr-rail a:focus-visible .mr-rail__label{opacity:1}
.mr-rail__dot{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid transparent;background:rgba(244,244,236,.8);font:600 9px var(--display)}
.mr-rail__dot img,.mr-rail__foam{display:none}
.mr-rail__dot b{font:inherit}
.mr-rail a.is-active .mr-rail__dot{border-color:var(--forest)}
.mr-rail a.is-done .mr-rail__dot{background:#dbe6ce}
main{position:relative;z-index:1}
.mr-reading-chapter{scroll-margin-top:calc(var(--header-h) + 28px)}
.mr-pack{display:block;position:relative;height:100%;width:auto;aspect-ratio:var(--pack-aspect,.4);overflow:hidden;flex:none}
.mr-pack>img{position:absolute;max-width:none;width:var(--pack-img-width,100%);height:var(--pack-img-height,100%);left:var(--pack-img-left,0%);top:var(--pack-img-top,0%);object-fit:fill}




.mr-more{border-top:1px solid var(--line);padding:15px 0;font-size:12px;color:var(--ink-soft)}
.mr-more summary{color:var(--forest);font-size:13px;font-weight:500;padding:8px 0}
.mr-more ul{padding-left:18px}
.mr-facts{display:grid;gap:8px;margin:15px 0}
.mr-facts dt{font-size:10px}
.mr-facts dd{margin:3px 0 0;font-size:12px;color:var(--ink)}
.mr-offer{background:var(--chartreuse);padding:18px 20px;margin-bottom:16px;font-size:12px}
.mr-offer p{margin:5px 0;color:var(--ink-soft)}
.mr-offer__price{font:700 36px/1.2 var(--display);color:var(--forest-deep)!important}
.mr-offer__price small{font:400 12px var(--sans)}
.mr-hint{font-size:12px;margin:12px 0}
.mr-manual-copy,.mr-hint textarea{width:100%;min-height:110px;padding:12px;border:1px solid var(--line);background:var(--ivory);font:400 14px/1.7 var(--sans)}
.mr-footer{position:relative;z-index:2;padding:35px var(--gutter);background:var(--forest-deep);color:#d3ddc9;font-size:11px;line-height:1.9}
.mr-footer details{max-width:1100px}
.mr-footer summary{padding:8px 0;margin-bottom:15px}
.mr-footer p{max-width:950px}
.mr-footer__house{font:600 19px var(--display);color:var(--ivory);margin:30px 0 10px}
.mr-alert{position:relative;z-index:5;margin:100px var(--gutter) 30px;padding:20px;background:var(--warn-bg);font-size:13px}
.mr-alert p{margin:0 0 10px}
.mr-noscript{position:relative;z-index:5;background:var(--ivory);padding:25px var(--gutter)}
.mr-nodata .mr-order__message,.mr-nodata [data-slot=offer],.mr-nodata [data-slot=pieces],.mr-nodata [data-slot=summary]{display:none}
@media(max-width:1100px){:root{--gutter:30px;--header-h:64px;--visual-top:106px}
.mr-header{padding-inline:24px}
.mr-rail{left:50%;right:auto;top:69px;transform:translateX(-50%);flex-direction:row;gap:5px}
.mr-rail__label{display:none}
.mr-rail__dot{width:26px;height:26px}
.mr-rail a{min-width:29px}
.mr-reading-chapter{scroll-margin-top:106px}}
@media(max-width:700px){:root{--gutter:22px;--header-h:58px;--visual-top:96px;--mobile-art-h:34svh}
.mr-header{padding-inline:17px;gap:10px}
.mr-brand{gap:7px}
.mr-brand__logos{gap:5px}
.mr-brand__house{font-size:10px;gap:4px}
.mr-brand__house img{width:20px;height:22px}
.mr-brand__mediral{width:66px}
.mr-brand__sep{font-size:12px}
.mr-brand__partner{font-size:8px;letter-spacing:0;padding-left:7px;white-space:normal}
.mr-brand__partner span{display:block}
@media(max-width:360px){.mr-header{padding-inline:12px;gap:6px}.mr-header .mr-btn{padding-inline:7px;font-size:9px}.mr-brand__house span{font-size:9px}.mr-brand__logos{gap:4px}.mr-brand__mediral{width:61px}}
.mr-header .mr-btn{min-height:32px;padding:5px 10px;font-size:10px;gap:6px}
.mr-rail{top:61px}
.mr-rail a{min-height:26px}
.mr-rail__dot{height:24px;width:24px;font-size:9px}



.mr-more summary{font-size:12px}
.mr-h2{font-size:29px}
.mr-offer{padding:15px}
.mr-offer__price{font-size:32px}
.mr-disclosure{font-size:10px}
.mr-footer{padding:27px var(--gutter)}
.mr-reading-chapter{scroll-margin-top:100px}}
@media(max-width:700px) and (max-height:700px){:root{--mobile-art-h:32svh}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}
.mr-btn:hover{transform:none}}
@media(max-width:1100px){.mr-rail{isolation:isolate}
.mr-rail::before{content:'';position:absolute;inset:-5px -100vw -6px;background:rgba(244,244,236,.96);z-index:-1;pointer-events:none}}
/* ==========================================================================
   The cinema — one sticky viewport, one clock (js/cinema.js, js/score.js).
   Every layer here is placed at its HOME: the composed reading pose for tall (portrait) or wide
   screens. The score only moves layers around these homes, so CSS alone paints the first frame and
   every hold. Positions use left/top, never transform: the engine owns transform and opacity.
   Invisible .mr-slot boxes mark hand-off poses (the routine row, the rising bottle, the glass stem).
   ========================================================================== */
.mr-cinema{position:relative;height:calc(var(--screens,15.75) * 100svh);height:calc((var(--screens,15.75) - 1) * 100svh + 100lvh);background:#163a28}
.mr-cinema:focus{outline:none}
.mr-mark{position:absolute;left:0;width:1px;height:1px;pointer-events:none;scroll-margin-top:0}
/* The viewport and shots clip without being scroll containers: focusing or revealing a layer near an
   edge must never scroll the cinema internally (hidden stays as a fallback where clip is unknown). */
.mr-cinema__view{position:sticky;top:0;height:100svh;height:100lvh;overflow:hidden;overflow:clip;isolation:isolate;perspective:1400px;background:var(--ivory)}
/* Paint through the space Safari reveals when its toolbar folds away. The large viewport is
   stable during that gesture; the separate small-viewport clock keeps chapter timing and text
   positions unchanged. The track includes the extra painted height so its final hold stays pinned. */
.mr-cinema__clock{position:absolute;top:0;left:0;width:0;height:100svh;visibility:hidden;pointer-events:none}
.mr-flow .mr-cinema__clock{display:none}
.mr-shot,.mr-shot__cam,.mr-shot__bg{position:absolute;inset:0}
.mr-shot{overflow:hidden;overflow:clip}
[data-layer]{transform-origin:50% 50%}
/* First paint is a composed opening, not every future scene at its unposed CSS home.
   Visibility keeps geometry measurable. The controller releases mr-boot only after its first pose. */
.mr-boot:not(.mr-flow) .mr-cinema [data-layer]{visibility:hidden}
.mr-boot:not(.mr-flow) .mr-cinema :is([data-layer="hero"],[data-layer="hero.bg"],[data-layer="hero.kicker"],[data-layer="hero.promise"],[data-layer="hero.BR"],[data-layer="hero.AC"],[data-layer="hero.SU"],[data-layer="hero.CL"],[data-layer="hero.PO"],[data-layer="hero.cta"]){visibility:visible}

.mr-art,.mr-actor,.mr-slot,.mr-plane,.mr-bubbles{position:absolute;margin:0}
.mr-art img{width:100%;height:100%;object-fit:contain}
/* Art boxes have their own aspect, so a home is measurable before its picture has loaded. */
.mr-art{aspect-ratio:1}
.mr-art.is-live,.mr-actor.is-live,.mr-plane.is-live{will-change:transform,opacity}
/* A running cinema lets only what is visible take pointer events (it inherits into faded shots). */
.mr-cinema.is-running [data-layer]:not(.is-live){pointer-events:none}
.mr-slot{visibility:hidden;pointer-events:none}
.mr-line{display:block}

/* Packs: height and aspect fix the box, the base line stands them where the composition needs. */
.mr-actor,.mr-slot{--x:50%;--base:80svh;--h:30svh;height:var(--h);width:calc(var(--h) * var(--a,var(--pack-aspect,.4)));left:calc(var(--x) - var(--h) * var(--a,var(--pack-aspect,.4)) / 2);top:calc(var(--base) - var(--h));isolation:isolate}
.mr-actor .mr-pack{height:100%;width:100%}
.mr-actor::after{content:'';position:absolute;z-index:-1;left:-16%;right:-16%;bottom:-2.5%;height:6%;border-radius:50%;background:radial-gradient(closest-side,rgba(38,46,28,.34),rgba(38,46,28,0))}
.mr-actor--cl{--a:.2667}.mr-actor--ac{--a:.4107}.mr-actor--br{--a:.3184}.mr-actor--su{--a:.2455}.mr-actor--po{--a:1.0681}
.mr-slot--cl{--a:.2667}.mr-slot--ac{--a:.4107}.mr-slot--br{--a:.3184}.mr-slot--su{--a:.2455}.mr-slot--po{--a:1.0681}

/* Type shared by every chapter: the reader's problem (large, then a kicker), a title, waves, a foot. */
.mr-problem,.mr-title,.mr-wave,.mr-pairs,.mr-foot,.mr-cl__word,.mr-hero__kicker,.mr-hero__promise,.mr-hero__pick,.mr-hero__cta,.mr-rg__title,.mr-rg__foot,.mr-step,.mr-badge,.mr-route{position:absolute;margin:0;text-align:center}
/* Story text keeps a symmetric safe inset wide enough to clear the chapter rail on the right. */
.mr-cinema{--safe:max(48px,4vw)}
.mr-problem,.mr-title,.mr-wave,.mr-pairs,.mr-foot,.mr-cl__word,.mr-hero__kicker,.mr-hero__promise,.mr-hero__pick,.mr-hero__cta,.mr-rg__title,.mr-rg__foot{left:0;right:0;padding-inline:var(--safe)}
.mr-hero__promise,.mr-hero__kicker,.mr-hero__cta{padding-inline:max(16px,4vw)}
.mr-problem{top:11.5svh;font:600 clamp(14px,3.9vw,18px)/1.45 var(--sans);letter-spacing:.01em;text-wrap:balance;white-space:pre-line}
.mr-title{top:15.5svh;font:700 min(10.4vw,6svh)/1.22 var(--sans);letter-spacing:-.03em}
.mr-wave{top:17svh}
.mr-wave__word{display:block;font:700 min(12vw,7svh)/1.2 var(--sans);letter-spacing:-.02em}
.mr-wave__names{display:block;margin-top:.8em;font:500 clamp(13px,1.3vw,17px)/1.5 var(--display);letter-spacing:.02em;opacity:.88}
.mr-foot{top:85.5svh}
.mr-foot__headline{margin:0 0 18px;font:600 min(10.4vw,6svh)/1.2 var(--sans);letter-spacing:-.03em}
.mr-foot .mr-support{margin:4px auto 0;max-width:32em;font:400 clamp(13px,1.45vw,18px)/1.6 var(--sans);text-wrap:balance}
.mr-foot__more{display:inline-block;margin-top:8px;padding:4px 12px;border-radius:99px;font:600 12px/1.5 var(--sans);text-decoration:none;color:inherit;border:1px solid currentColor;opacity:.9}
.mr-foot__more:hover{opacity:1}
.mr-tag-line{margin:0;font:500 12px/1.5 var(--sans);letter-spacing:.04em}
.mr-tag-line b{font:700 11px var(--display);margin-right:10px;letter-spacing:.1em}

/* Hero — a complete first frame: promise, five packs on one ledge, a way in. */
.mr-hero__bg{background:url(assets/experience/p0-1-stage-tall.webp) 50% 59%/cover no-repeat}
.mr-hero__kicker{top:11.5svh;font:600 11px/1.5 var(--sans);letter-spacing:.14em;color:var(--forest)}
.mr-hero__promise{top:15.5svh;color:var(--forest-deep)}
.mr-hero__title{margin:0;font:700 min(12vw,6.2svh)/1.16 var(--sans);letter-spacing:-.035em}
.mr-hero__why{margin:1.6svh auto 0;max-width:30em;font:600 clamp(13px,3.6vw,16px)/1.5 var(--sans);color:var(--forest)}
.mr-hero__pick{top:11.5svh;font:700 min(9.4vw,5svh)/1.22 var(--sans);letter-spacing:-.03em;color:var(--forest-deep)}
.mr-hero__cta{top:86svh}
.mr-hero__cta .mr-actions,.mr-rg__foot .mr-actions{justify-content:center}
.mr-hero__cta .mr-btn{min-height:46px}
.mr-hero__cta .mr-fine{display:inline-block;margin-top:10px;padding:2px 10px;border-radius:99px;background:rgba(244,244,236,.82);color:var(--forest-deep);font-size:11px}
[data-layer^=hero].mr-actor--br{--x:60%;--base:66svh;--h:24svh}
[data-layer^=hero].mr-actor--ac{--x:37%;--base:67.5svh;--h:20svh}
[data-layer^=hero].mr-actor--su{--x:83%;--base:77svh;--h:24svh}
[data-layer^=hero].mr-actor--cl{--x:17%;--base:79svh;--h:32svh}
[data-layer^=hero].mr-actor--po{--x:52%;--base:83svh;--h:11.5svh}
.mr-slot--cl{--x:12%;--base:65svh;--h:23svh}
.mr-slot--ac{--x:31%;--base:65svh;--h:16svh}
.mr-slot--br{--x:50%;--base:65svh;--h:19.5svh}
.mr-slot--su{--x:69%;--base:65svh;--h:20.5svh}
.mr-slot--po{--x:87%;--base:65svh;--h:9svh}
/* The route: this set's memory aid, "เริ่มจากขาว ค่อยไปเขียว". Colour is always tied to a number, a pack
   name and a role; it says nothing about strength, and PO stays optional. */
.mr-tone{display:inline-block;width:.8em;height:.8em;margin:0 .32em 0 .38em;border-radius:50%;vertical-align:-.06em;background:var(--tone);box-shadow:inset 0 0 0 1px rgba(25,53,40,.28)}
.mr-tone--white{--tone:#fbfbf6}.mr-tone--pale{--tone:#cfdc8c}.mr-tone--deep{--tone:#1d5433}.mr-tone--compact{--tone:#2f7650}
.mr-route{left:8vw;right:8vw;top:67.4svh;height:8px;border-radius:99px;background:rgba(25,53,40,.08);overflow:hidden}
.mr-route i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#fbfbf6 0%,#f2f3ea 22%,#cfdc8c 50%,#1d5433 72%,rgba(47,118,80,.55) 78%,rgba(47,118,80,.55) 100%);clip-path:inset(0 calc((1 - var(--draw,1)) * 100%) 0 0);box-shadow:inset 0 0 0 1px rgba(25,53,40,.2)}
.mr-route i::after{content:'';position:absolute;top:0;bottom:0;left:78%;right:0;background:repeating-linear-gradient(90deg,transparent 0 6px,var(--ivory) 6px 10px)}
.mr-badge{top:69.4svh;width:22vw;left:calc(var(--x) - 11vw);font:600 12px/1.4 var(--sans);color:var(--forest-deep);white-space:nowrap}
.mr-badge b{font:700 11px var(--display);letter-spacing:.04em}
/* On narrow screens a mark is its number and colour dot; the colour word is in the whole line below. */
@media (max-width:640px){.mr-badge__word{display:none}.mr-badge .mr-tone{margin-right:0}}
.mr-badge--cl{--x:12%}.mr-badge--ac{--x:31%}.mr-badge--br{--x:50%}.mr-badge--su{--x:69%}.mr-badge--po{--x:87%}
/* Tall: one whole line per piece, a short list under the row, never squeezed under a pack. */
.mr-step{left:max(16px,6vw);right:max(16px,6vw);top:calc(74.2svh + var(--i) * 3.9svh);text-align:left;font:500 clamp(13px,3.5vw,14px)/1.35 var(--sans);color:var(--ink);white-space:nowrap}
.mr-step__n{font-weight:700;color:var(--forest-deep)}
.mr-step__n b{font:700 .86em var(--display);letter-spacing:.04em}
.mr-step__name{color:var(--forest-deep);font-weight:600}
.mr-step__role::before{content:'— '}
.mr-step--cl{--i:0}.mr-step--ac{--i:1}.mr-step--br{--i:2}.mr-step--su{--i:3}.mr-step--po{--i:4}
.mr-hero__context{display:block;margin-bottom:.5em;font:600 clamp(12px,3.4vw,15px)/1.4 var(--sans);letter-spacing:.02em;color:var(--forest)}
.mr-hero__route{display:block;margin-top:.55em;font:500 clamp(12px,3.4vw,15px)/1.5 var(--sans);letter-spacing:0;color:var(--ink)}
.mr-shot--rg .mr-route{top:67.4svh}
.mr-shot--rg .mr-badge{top:69.4svh}
[data-layer^=rg].mr-actor--cl{--x:12%;--base:66svh;--h:25svh}
[data-layer^=rg].mr-actor--ac{--x:31%;--base:66svh;--h:17.5svh}
[data-layer^=rg].mr-actor--br{--x:50%;--base:66svh;--h:21svh}
[data-layer^=rg].mr-actor--su{--x:69%;--base:66svh;--h:22svh}
[data-layer^=rg].mr-actor--po{--x:87%;--base:66svh;--h:9.5svh}


/* CL — rinse: the foam front reveals the scene; later a sideways sweep turns line one into line two. */
.mr-shot--cl{clip-path:polygon(0 calc((var(--edge,-12) + var(--tilt,0)) * 1%),100% calc((var(--edge,-12) - var(--tilt,0)) * 1%),100% 100%,0 100%);color:var(--forest-deep)}
.mr-shot--cl .mr-shot__bg{background:radial-gradient(110% 70% at 50% 34%,#fdfcf7 0%,#f1f4ea 52%,#dde7da 100%)}
.mr-cl__title{position:absolute;inset:0;margin:0;pointer-events:none}
.mr-cl__word{--y:20svh;top:calc(var(--y) - .62em);font:700 min(14vw,8.4svh)/1.2 var(--sans);letter-spacing:-.04em;white-space:nowrap}
.mr-cl__word--next{font-size:min(7.8vw,5.4svh);font-weight:400;letter-spacing:-.015em;color:#38614c}
[data-layer^=cl].mr-actor--cl{--x:50%;--base:83svh;--h:49svh}
.mr-shot--cl .mr-actor::after{background:radial-gradient(closest-side,rgba(40,70,60,.22),rgba(40,70,60,0))}
.mr-cl__botanical{width:29vw;filter:drop-shadow(0 12px 15px rgba(42,76,47,.13))}
.mr-cl__botanical--0{left:-3vw;top:51svh}
.mr-cl__botanical--1{left:76vw;top:47svh;width:26vw}
.mr-cl__botanical--2{left:1vw;top:65svh;width:24vw}
.mr-cl__botanical-label{position:absolute;top:29svh;left:5vw;width:90vw;margin:0;text-align:center;font:600 clamp(14px,3.8vw,18px)/1.5 var(--sans);color:var(--forest)}
.mr-bubbles{inset:0;pointer-events:none}
.mr-bubbles i{position:absolute;border-radius:50%;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.95),rgba(255,255,255,.35) 42%,rgba(190,214,205,.25) 70%,rgba(255,255,255,0) 72%);box-shadow:inset 0 0 0 1px rgba(130,170,160,.28);width:calc(10px + var(--i) * 3px);aspect-ratio:1;left:calc(22% + var(--i) * 7%);top:calc(80svh - var(--i) * 5.2svh)}
.mr-bubbles i:nth-child(odd){left:calc(70% - var(--i) * 5%)}

/* Shared transition materials, above every chapter. */
.mr-fx-foam{aspect-ratio:1774/887;width:170vw;left:-35vw;top:calc(50% - 42.5vw);pointer-events:none;z-index:5}
.mr-fx-ring{width:100vmax;left:calc(50% - 50vmax);top:calc(58% - 50vmax);pointer-events:none;z-index:6}
/* Shared light streak between the brightening and sunscreen chapters. */
.mr-fx-streak{position:absolute;width:38vw;height:130svh;left:31vw;top:-15svh;z-index:7;pointer-events:none;background:linear-gradient(90deg,rgba(255,250,232,0),rgba(255,247,222,.55) 34%,rgba(255,255,252,.97) 50%,rgba(255,247,222,.55) 66%,rgba(255,250,232,0));transform-origin:50% 50%}
.mr-fx-motes{position:absolute;inset:-10% 0;z-index:7;pointer-events:none;background:
  radial-gradient(circle at 12% 70%,rgba(255,255,250,.9) 0 3px,transparent 4px),radial-gradient(circle at 22% 40%,rgba(255,255,250,.8) 0 2px,transparent 3px),
  radial-gradient(circle at 31% 82%,rgba(255,255,250,.9) 0 4px,transparent 5px),radial-gradient(circle at 44% 58%,rgba(255,255,250,.7) 0 2px,transparent 3px),
  radial-gradient(circle at 52% 76%,rgba(255,255,250,.9) 0 3px,transparent 4px),radial-gradient(circle at 63% 46%,rgba(255,255,250,.8) 0 2px,transparent 3px),
  radial-gradient(circle at 71% 88%,rgba(255,255,250,.9) 0 5px,transparent 6px),radial-gradient(circle at 80% 62%,rgba(255,255,250,.8) 0 3px,transparent 4px),
  radial-gradient(circle at 90% 36%,rgba(255,255,250,.7) 0 2px,transparent 3px),radial-gradient(circle at 8% 30%,rgba(255,255,250,.7) 0 2px,transparent 3px),
  radial-gradient(circle at 38% 22%,rgba(255,255,250,.6) 0 2px,transparent 3px),radial-gradient(circle at 58% 92%,rgba(255,255,250,.9) 0 4px,transparent 5px)}
.mr-fx-veil{aspect-ratio:1774/887;width:190vw;left:-45vw;top:calc(50% - 47.5vw);z-index:8;pointer-events:none}

/* AC — concentrate: through the ring; soothe, balance at the glass, hydration; the bottle, the lens.
   The mask follows the ring's measured inner edge (wider to the left and top), feathered under water. */
.mr-shot--ac{--m:var(--portal,9);-webkit-mask-image:radial-gradient(calc(var(--m) * 35vmax) calc(var(--m) * 32.5vmax) at calc(50% - var(--m) * 3vmax) calc(58% - var(--m) * 3.5vmax),#000 90%,transparent 100%);mask-image:radial-gradient(calc(var(--m) * 35vmax) calc(var(--m) * 32.5vmax) at calc(50% - var(--m) * 3vmax) calc(58% - var(--m) * 3.5vmax),#000 90%,transparent 100%);color:#eef2df}
.mr-shot--ac .mr-shot__bg{background:radial-gradient(90% 70% at 50% 34%,#2f5d3e 0%,#1a3f2b 54%,#0f2a1c 100%)}
/* AC's film fills the room behind every AC layer, feathered into the forest: no frame, no player. */
.mr-chapter-film{pointer-events:none}
.mr-ac__film,.mr-br__film{inset:0;width:auto;aspect-ratio:auto}
.mr-chapter-film .mr-fx__clip,.mr-chapter-film .mr-fx__clipframe{position:relative;width:100%;height:100%}
.mr-chapter-film img,.mr-chapter-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mr-ac__film .mr-fx__clipframe{-webkit-mask-image:radial-gradient(ellipse 72% 62% at 50% 52%,#000 55%,rgba(0,0,0,.6) 78%,transparent 100%);mask-image:radial-gradient(ellipse 72% 62% at 50% 52%,#000 55%,rgba(0,0,0,.6) 78%,transparent 100%)}
.mr-ac__film .mr-fx__clipframe::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,36,24,.78),rgba(12,36,24,.42) 30%,rgba(12,36,24,.12) 50%,rgba(12,36,24,.14) 64%,rgba(12,36,24,.55))}
.mr-shot--ac :is(.mr-problem,.mr-wave,.mr-title){text-shadow:0 2px 18px rgba(8,24,16,.7)}
.mr-shot--ac [data-layer="ac.w1"] .mr-wave__word{font-size:min(9vw,5.4svh)}
.mr-ac__tea{aspect-ratio:1536/1024;width:128vw;left:-26vw;top:62svh;z-index:3}
.mr-ac__witch{width:30vw;left:2vw;top:53svh}
.mr-ac__grape{width:28vw;left:70vw;top:54svh}
.mr-ac__cone{aspect-ratio:auto;height:36svh;width:calc(36svh * 1122 / 1402);left:calc(50% - 18svh * 1122 / 1402);top:11svh;z-index:2}
.mr-ac__cone img{height:100%;width:auto}
.mr-ac__amber{width:14vw;left:43vw;top:19svh;z-index:1}
.mr-ac__gel{width:26vw;left:9vw;top:47svh}
.mr-ac__lens{width:20vw;left:72vw;top:69svh;z-index:2}
/* The balance words stand at the glass stem: two whole words, the stem in the gap between them. */
.mr-shot--ac [data-layer="ac.w2"]{top:calc(39svh - .75 * min(12vw,7svh))}
.mr-shot--ac [data-layer="ac.w2"]{padding-inline:16px}
.mr-wave__word--split{display:grid;grid-template-columns:1fr 1fr;column-gap:max(26px,4.4svh);white-space:nowrap;font-size:min(10vw,5.8svh)}
.mr-wave__word--split>span:first-child{text-align:right}
.mr-wave__word--split>span:last-child{text-align:left}
.mr-shot--ac [data-layer="ac.w2"] .mr-wave__names{margin-top:7svh}
.mr-shot--ac .mr-wave__names,.mr-shot--ac .mr-tag-line,.mr-shot--ac .mr-problem{color:#dceab6}
.mr-slot--ac-rise{--x:50%;--base:84svh;--h:36svh}
.mr-slot--stem{--x:50%;--base:45.6svh;--h:3.6svh;--a:1}
[data-layer^=ac].mr-actor--ac{--x:50%;--base:82svh;--h:43svh}
.mr-shot--ac .mr-actor::after{background:radial-gradient(closest-side,rgba(0,0,0,.42),rgba(0,0,0,0))}

/* BR — light through the drop: a warm, lit world; three depths come into focus; two pairs. */
.mr-shot--br{color:var(--forest-deep)}
.mr-shot--br .mr-shot__bg{background:radial-gradient(95% 70% at 64% 16%,#fffbee 0%,#f6e9c4 30%,#d8c186 58%,#7c7a45 84%,#3e5534 100%)}
.mr-br__film .mr-fx__clipframe{-webkit-mask-image:radial-gradient(ellipse 76% 64% at 50% 51%,#000 38%,rgba(0,0,0,.72) 68%,transparent 100%);mask-image:radial-gradient(ellipse 76% 64% at 50% 51%,#000 38%,rgba(0,0,0,.72) 68%,transparent 100%)}
.mr-br__film .mr-fx__clipframe::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(250,241,214,.88),rgba(250,241,214,.38) 29%,transparent 47%,rgba(83,91,48,.12) 70%,rgba(49,70,37,.6))}
.mr-br__beams{position:absolute;inset:0;pointer-events:none}
.mr-br__beams i{position:absolute;top:-20svh;height:140svh;width:16vw;left:calc(38vw + var(--k,0) * 18vw);transform:rotate(24deg);background:linear-gradient(90deg,rgba(255,252,236,0),rgba(255,250,230,.5) 50%,rgba(255,252,236,0))}
.mr-br__beams i:nth-child(2){--k:1;width:10vw;opacity:.7}.mr-br__beams i:nth-child(3){--k:2;width:22vw;opacity:.5}
[data-layer^=br].mr-actor--br{--x:50%;--base:78svh;--h:46svh}
.mr-plane{filter:blur(calc((1 - var(--focus,1)) * 7px))}
.mr-plane img{width:100%;height:auto}
.mr-plane figcaption{position:absolute;white-space:nowrap;font:700 clamp(15px,1.6vw,21px)/1.3 var(--sans);color:var(--forest-deep);text-shadow:0 1px 12px rgba(255,250,232,.9)}
/* Three depths around the bottle, never over it; each name sits on the outer side of its plane. */
.mr-plane--near{width:46vw;left:-10vw;top:60svh}
.mr-plane--near figcaption{left:36%;bottom:100%}
.mr-plane--mid{width:32vw;left:64vw;top:44svh}
.mr-plane--mid figcaption{right:auto;left:-18%;top:100%}
.mr-plane--far{width:18vw;left:9vw;top:36svh}
.mr-plane--far figcaption{left:0;top:100%}
.mr-pairs{top:17svh;display:grid;gap:2.2svh}
.mr-pairs p{margin:0}
.mr-pairs .mr-wave__word{font-size:min(9vw,5.4svh)}
.mr-pairs .mr-wave__names{margin-top:.35em}
.mr-br__title{top:17svh;font-size:min(9.2vw,5.8svh);font-weight:600;line-height:1.25;text-wrap:balance}
.mr-shot--br .mr-foot{top:83svh;color:#fbf6e6;text-shadow:0 1px 10px rgba(30,40,20,.5)}
.mr-shot--br .mr-foot__headline{position:absolute;top:-66svh;left:0;right:0;padding-inline:var(--safe);margin:0;color:var(--forest-deep);text-shadow:none}
.mr-shot--br .mr-problem,.mr-shot--br .mr-wave__names{color:#4d5a2a}

/* SU — weightless: an airy, cool frame; the tube floats; three jobs travel sideways. */
.mr-shot--su{clip-path:inset(0 calc((1 - var(--wipe,1.2)) * 100%) 0 0);color:var(--forest-deep)}
.mr-shot--su .mr-shot__bg{inset:0 -8%;background:radial-gradient(60% 40% at 78% 14%,rgba(255,252,230,.95),rgba(255,252,230,0) 70%),linear-gradient(180deg,#eaf3ef 0%,#f7faf2 48%,#e0ecdb 100%)}
.mr-su__title{font-size:min(8.6vw,4.7svh)}
.mr-su__film{left:calc(50% - min(44vw,20svh));top:39svh;width:min(88vw,40svh);height:auto;aspect-ratio:16/9}
.mr-protection{color:var(--forest-deep)}
.mr-protection dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}
.mr-protection dl>div+div{border-left:1px solid rgba(43,77,55,.2);padding-left:12px}
.mr-protection dt{white-space:nowrap;font:700 clamp(29px,6vw,45px)/1.1 var(--display);letter-spacing:-.035em}
.mr-protection dt span{font-size:.57em;letter-spacing:.01em}
.mr-protection dd{margin:5px 0 0;font:500 clamp(11px,2.6vw,13px)/1.4 var(--sans)}
.mr-protection__source{margin:7px 0 0;font:500 11px/1.5 var(--sans);color:var(--forest)}
.mr-su__protection{position:absolute;top:27.5svh;left:7vw;width:86vw;text-align:center}
.mr-su__film .mr-fx__clipframe{-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 48%,rgba(0,0,0,.92) 65%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 48%,rgba(0,0,0,.92) 65%,transparent 100%)}
.mr-su__film img,.mr-su__film video{object-fit:contain;object-position:50% 50%}
.mr-chapter-film__comparison{position:absolute;bottom:8px;left:0;width:100%;display:grid;grid-template-columns:1fr 1fr;justify-items:center;font:500 clamp(11px,2.9vw,13px)/1.4 var(--sans);color:#fff}
.mr-chapter-film__comparison span{padding:3px 10px;border-radius:20px;background:rgba(24,41,33,.78)}
.mr-chapter-film__caption{position:absolute;top:100%;left:0;width:100%;margin:8px 0 0;text-align:center;color:#375346;font:500 clamp(11px,2.9vw,13px)/1.5 var(--sans)}
.mr-chapter-film__caption strong,.mr-chapter-film__caption span,.mr-chapter-film__caption small{display:block}
.mr-chapter-film__caption strong{font-size:clamp(12px,3vw,14px);font-weight:600}
.mr-chapter-film__caption small{margin-top:5px;font-size:10px;opacity:.85}
.mr-shot--su [data-layer="su.w1"]{top:78svh}
.mr-su__air{width:17vw;left:70vw;top:30svh;opacity:.9}
[data-layer^=su].mr-actor--su{--x:52%;--base:67svh;--h:33svh}
.mr-su__ribbon{aspect-ratio:2138/735;width:150vw;left:-25vw;top:44svh;z-index:1}
.mr-wave--band{z-index:3}
.mr-su__ribbon--back{width:120vw;left:-10vw;top:30svh;z-index:0;opacity:.55}
.mr-wave--band{top:69.5svh}
/* Each sideways phrase stays on one line: sized to fit, never broken inside a word. */
.mr-wave--band .mr-wave__word{font-size:min(8vw,5svh);white-space:nowrap}
.mr-wave--band .mr-wave__names{margin-top:.4em}

/* PO — quiet finish: a dark room, the powder settles, the headline's outline becomes solid. */
.mr-shot--po{color:#f4f4ec}
.mr-shot--po .mr-shot__bg{background:radial-gradient(90% 70% at 50% 40%,#2c5a40 0%,#173a28 60%,#0d2418 100%)}
.mr-po__band{aspect-ratio:1774/887;width:170vw;left:-35vw;top:61svh}
.mr-po__title{color:rgba(244,244,236,var(--fill,1));-webkit-text-stroke:1.2px rgba(244,244,236,.92);paint-order:stroke fill}
[data-layer^=po].mr-actor--po{--x:50%;--base:76svh;--h:19svh}
.mr-shot--po .mr-actor::after{background:radial-gradient(closest-side,rgba(0,0,0,.45),rgba(0,0,0,0))}
.mr-shot--po .mr-wave{top:36svh}
.mr-shot--po .mr-wave__word{font-size:min(9vw,5.4svh)}
.mr-shot--po .mr-wave__names,.mr-shot--po .mr-problem,.mr-shot--po .mr-tag-line{color:#dceab6}
/* The powder settles low, so the support reads in the clear room above the compact. */
.mr-shot--po .mr-foot{top:37svh}

/* The set, reassembled — the hand-over from the story to the page's working actions. */
.mr-shot--rg{color:var(--forest-deep)}
.mr-rg__title{top:15svh;font:700 min(11vw,6.4svh)/1.2 var(--sans);letter-spacing:-.035em}
.mr-rg__title .mr-line{display:block}
.mr-rg__foot{top:86svh}
.mr-rg__carry{margin:0 0 12px;font:500 clamp(13px,1.5vw,17px)/1.5 var(--sans)}

/* Header and rail follow the chapter on screen. */
body:is([data-chapter=AC],[data-chapter=PO]) .mr-brand__mediral{filter:brightness(0) invert(1)}
body:is([data-chapter=AC],[data-chapter=PO]) .mr-header{background:rgba(15,42,28,.78);border-color:transparent;color:var(--ivory)}
/* Keyboard focus and rail labels stay visible on the dark chapters. */
body:is([data-chapter=AC],[data-chapter=PO]) :is(.mr-header,.mr-rail) :focus-visible{outline-color:var(--chartreuse)}
body:is([data-chapter=AC],[data-chapter=PO]) .mr-rail__label{color:var(--ivory);text-shadow:0 1px 6px rgba(0,0,0,.5)}
body:is([data-chapter=AC],[data-chapter=PO]) .mr-header .mr-btn{color:var(--ivory);border-color:rgba(238,242,223,.4)}
body:is([data-chapter=routine],[data-chapter=CL],[data-chapter=BR],[data-chapter=SU],[data-chapter=close]) .mr-header{background:rgba(244,244,236,.72)}
.mr-rail{right:10px;left:auto;top:50%;transform:translateY(-50%);flex-direction:column;gap:6px;transition:opacity .25s,visibility .25s}
.mr-rail::before{display:none}
.mr-rail__dot{width:24px;height:24px;background:rgba(244,244,236,.72);color:var(--forest-deep)}
.mr-rail a[data-tone] .mr-rail__dot{box-shadow:0 0 0 2px var(--tone)}
.mr-rail a[data-tone=white]{--tone:#fbfbf6}.mr-rail a[data-tone=pale]{--tone:#cfdc8c}.mr-rail a[data-tone=deep]{--tone:#1d5433}.mr-rail a[data-tone=compact]{--tone:#2f7650}
body:is([data-chapter=AC],[data-chapter=PO]) .mr-rail__dot{background:rgba(15,42,28,.72);color:var(--ivory)}
body:is([data-chapter=AC],[data-chapter=PO]) .mr-rail a.is-active .mr-rail__dot{border-color:var(--chartreuse)}
body:is([data-chapter=AC],[data-chapter=PO]) .mr-rail a.is-done .mr-rail__dot{background:var(--chartreuse);color:var(--forest-deep)}
/* A hidden rail also leaves the tab order: invisible links are never focus stops. The regroup clears it
   too: the five stand across the whole width there, and the frame carries its own way on. */
body[data-step=routine] .mr-rail,body[data-reading-chapter] .mr-rail,body[data-chapter=close] .mr-rail{opacity:0;visibility:hidden;pointer-events:none}

/* Wide screens: the same chapters, composed for landscape. */
@media (min-aspect-ratio:10001/10000){
  .mr-hero__bg{background-image:url(assets/experience/p0-1-stage-wide.webp)}
  .mr-hero__kicker{top:10.5svh}
  .mr-hero__promise{top:14svh}
  .mr-hero__title{font-size:min(4.8vw,8svh);line-height:1.12}
  .mr-hero__title .mr-line:nth-child(n+2){display:inline}
  .mr-hero__pick{top:13svh;font-size:min(4.2vw,7svh)}
  .mr-hero__cta{top:86.5svh}
  [data-layer^=hero].mr-actor--br{--x:56%;--base:66svh;--h:26svh}
  [data-layer^=hero].mr-actor--ac{--x:45%;--base:68svh;--h:22svh}
  [data-layer^=hero].mr-actor--su{--x:67%;--base:77svh;--h:27svh}
  [data-layer^=hero].mr-actor--cl{--x:34%;--base:80svh;--h:34svh}
  [data-layer^=hero].mr-actor--po{--x:57%;--base:81.5svh;--h:11.5svh}
  .mr-slot--cl{--x:26%;--base:68svh;--h:29svh}
  .mr-slot--ac{--x:38%;--base:68svh;--h:21svh}
  .mr-slot--br{--x:50%;--base:68svh;--h:24svh}
  .mr-slot--su{--x:62%;--base:68svh;--h:25svh}
  .mr-slot--po{--x:74%;--base:68svh;--h:11svh}
  .mr-route{left:20vw;right:20vw;top:70svh}
  .mr-badge{display:none}
  /* Each column stays inside its own product: 11vw wide on 12vw spacing, wrapping within it. */
  .mr-step{top:72.5svh;left:calc(var(--x) - 5.5vw);right:auto;width:11vw;text-align:center;white-space:normal;font-size:clamp(13px,1.05vw,15px)}
  .mr-step>span{display:block}
  .mr-step__role::before{content:none}
  .mr-step__role{margin-top:2px;color:var(--ink-soft)}
  .mr-step--cl{--x:26%}.mr-step--ac{--x:38%}.mr-step--br{--x:50%}.mr-step--su{--x:62%}.mr-step--po{--x:74%}
  .mr-shot--rg .mr-route{top:70svh}
  .mr-shot--rg .mr-badge{display:block;top:71.8svh;width:10vw;left:calc(var(--x) - 5vw)}
  .mr-shot--rg .mr-badge--cl{--x:26%}.mr-shot--rg .mr-badge--ac{--x:38%}.mr-shot--rg .mr-badge--br{--x:50%}.mr-shot--rg .mr-badge--su{--x:62%}.mr-shot--rg .mr-badge--po{--x:74%}
  [data-layer^=rg].mr-actor--cl{--x:26%;--base:68svh;--h:29svh}
  [data-layer^=rg].mr-actor--ac{--x:38%;--base:68svh;--h:21svh}
  [data-layer^=rg].mr-actor--br{--x:50%;--base:68svh;--h:24svh}
  [data-layer^=rg].mr-actor--su{--x:62%;--base:68svh;--h:25svh}
  [data-layer^=rg].mr-actor--po{--x:74%;--base:68svh;--h:11svh}
    .mr-problem{top:11.5svh;white-space:normal}
  .mr-title{font-size:min(5.4vw,9.4svh)}
  .mr-wave__word{font-size:min(7.4vw,12svh)}
  .mr-foot{top:86svh}
  .mr-fx-foam{width:130vw;left:-15vw;top:calc(50% - 32.5vw)}
  .mr-fx-veil{width:140vw;left:-20vw;top:calc(50% - 35vw)}
  .mr-cl__word{--y:25svh;font-size:min(8.6vw,13.5svh)}
  .mr-cl__word--next{font-size:min(5.2vw,8.2svh)}
  .mr-cl__botanical{width:19vw}
  .mr-cl__botanical--0{left:14vw;top:43svh}
  .mr-cl__botanical--1{left:68vw;top:39svh;width:19vw}
  .mr-cl__botanical--2{left:25vw;top:59svh;width:15vw}
  .mr-cl__botanical-label{top:73svh;left:66vw;width:25vw}
  [data-layer^=cl].mr-actor--cl{--base:83svh;--h:48svh}
  .mr-shot--ac [data-layer="ac.w1"] .mr-wave__word{font-size:min(6vw,10svh)}
  .mr-ac__tea{width:66vw;left:-10vw;top:48svh}
  .mr-ac__witch{width:13vw;left:16vw;top:56svh}
  .mr-ac__grape{width:12vw;left:72vw;top:57svh}
  .mr-ac__cone{height:44svh;width:calc(44svh * 1122 / 1402);left:calc(50% - 22svh * 1122 / 1402);top:9svh}
  .mr-ac__amber{width:6vw;left:47vw;top:18svh}
  .mr-ac__gel{width:10vw;left:33vw;top:40svh}
  .mr-shot--ac [data-layer="ac.w2"]{top:calc(43svh - .75 * min(7.4vw,12svh))}
  .mr-shot--ac [data-layer="ac.w2"] .mr-wave__names{margin-top:8svh}
  .mr-wave__word--split{font-size:min(7.4vw,12svh)}
  .mr-slot--ac-rise{--base:88svh;--h:44svh}
  .mr-slot--stem{--base:51.5svh;--h:3.4svh}
  [data-layer^=ac].mr-actor--ac{--x:66%;--base:88svh;--h:58svh}
  .mr-ac__lens{width:8.5vw;left:74.5vw;top:74svh}
  .mr-ac__title{top:26svh;left:7vw;right:auto;width:46vw;padding-inline:0;text-align:left}
  .mr-shot--ac .mr-foot{top:56svh;left:7vw;right:auto;width:40vw;padding-inline:0;text-align:left}
  .mr-shot--ac .mr-foot .mr-support{margin-inline:0}
  [data-layer^=br].mr-actor--br{--x:34%;--base:86svh;--h:58svh}
  .mr-plane--near{width:26vw;left:4vw;top:50svh}
  .mr-plane--mid{width:20vw;left:64vw;top:34svh}
  .mr-plane--mid figcaption{right:auto;left:30%}
  .mr-plane--far{width:9vw;left:15vw;top:22svh}
  .mr-pairs{grid-template-columns:1fr 1fr;max-width:1000px;margin-inline:auto}
  .mr-pairs .mr-wave__word{font-size:min(4.6vw,8svh)}
  .mr-br__title{top:17svh;left:10vw;right:10vw;width:auto;padding-inline:0;text-align:center;font-size:min(4.6vw,7.4svh)}
  .mr-shot--br .mr-foot{top:26svh;bottom:auto;left:auto;right:6vw;width:40vw;padding-inline:0;display:block;text-align:left;color:var(--forest-deep);text-shadow:none}
  .mr-shot--br .mr-foot__headline{position:static;padding-inline:0;margin-bottom:24px;font-size:min(5.2vw,8.4svh)}
  .mr-shot--br .mr-foot .mr-tag-line{font-size:clamp(16px,1.6vw,22px)}
  .mr-shot--br .mr-foot__more{font-size:14px}
  .mr-shot--br .mr-foot .mr-support{margin-inline:0}
  [data-layer^=su].mr-actor--su{--x:60%;--base:72svh;--h:40svh}
  .mr-su__title{top:24svh;left:6vw;right:auto;width:auto;text-align:left;font-size:min(4.6vw,8.4svh)}
  .mr-su__title .mr-line,.mr-wave--band .mr-wave__word{white-space:nowrap}
  .mr-su__ribbon{width:84vw;left:8vw;top:46svh}
  .mr-su__ribbon--back{width:62vw;left:44vw;top:12svh}
  .mr-su__air{width:8vw;left:80vw;top:24svh}
  .mr-su__film{left:auto;right:5vw;top:29svh;width:min(50vw,64svh)}
  .mr-su__protection{top:49svh;left:6vw;width:36vw;text-align:left}
  .mr-su__protection dt{font-size:clamp(34px,4.2vw,62px)}
  .mr-chapter-film__caption{font-size:12px}
  .mr-wave--band{top:72svh;left:6vw;right:auto;width:44vw;text-align:left}
  .mr-wave--band .mr-wave__word{font-size:min(4.4vw,8svh)}
  .mr-shot--su [data-layer="su.w1"]{top:72svh}
  .mr-shot--su .mr-foot{top:86svh}
  .mr-po__band{width:120vw;left:-10vw;top:56svh}
  [data-layer^=po].mr-actor--po{--base:78svh;--h:24svh}
  .mr-shot--po .mr-wave,.mr-shot--po .mr-foot{top:40svh}
  .mr-shot--po .mr-wave__word{font-size:min(4.6vw,8svh)}
  .mr-rg__title{top:15svh;font-size:min(5.4vw,9svh)}
}

/* ---------- normal flow: reduced motion and short screens read every chapter in place ---------- */
.mr-flow .mr-cinema{height:auto}
.mr-flow .mr-cinema__view{position:relative;height:auto;overflow:visible;perspective:none;background:none}
.mr-flow .mr-shot{position:relative;inset:auto;overflow:visible;clip-path:none;-webkit-mask-image:none;mask-image:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:18px 10px;padding:calc(var(--header-h) + 36px) var(--gutter) 64px}
.mr-flow .mr-shot__cam{display:contents}
.mr-flow :where(.mr-shot [data-layer]:not(.mr-shot__bg)){position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;grid-column:1/-1;transform:none!important;opacity:1!important;visibility:visible!important;filter:none!important}
.mr-flow .mr-shot__bg{position:absolute;inset:0;z-index:-1}
.mr-flow .mr-art,.mr-flow .mr-slot,.mr-flow .mr-bubbles,.mr-flow .mr-plane,.mr-flow .mr-br__beams,.mr-flow [data-view]>.mr-fx,.mr-flow .mr-fx-foam,.mr-flow .mr-fx-ring,.mr-flow .mr-fx-gold,.mr-flow .mr-fx-streak,.mr-flow .mr-fx-motes,.mr-flow .mr-fx-veil,.mr-flow .mr-shot--rg{display:none}
.mr-flow .mr-actor{--h:clamp(110px,24vh,170px);justify-self:center}
.mr-flow .mr-hero__kicker{order:1}.mr-flow .mr-hero__promise{order:2}
.mr-flow [data-layer="hero.CL"]{order:4}.mr-flow [data-layer="hero.AC"]{order:5}.mr-flow [data-layer="hero.BR"]{order:6}.mr-flow [data-layer="hero.SU"]{order:7}.mr-flow [data-layer="hero.PO"]{order:8}
.mr-flow .mr-shot--hero .mr-actor{grid-column:auto;align-self:end}
.mr-flow [data-layer="hero.PO"]{--h:clamp(56px,11vh,80px)}
.mr-flow .mr-hero__pick{order:13;font-size:26px}.mr-flow .mr-hero__cta{order:15}
/* Flow: the route reads on one ivory ledge, whatever stage sits behind it (steps close the row gap). */
.mr-flow .mr-hero__pick,.mr-flow .mr-step{background:rgba(250,249,241,.96)}
.mr-flow .mr-hero__pick{padding:22px 18px 14px;border-radius:20px 20px 0 0}
.mr-flow .mr-step{order:14;margin-top:-18px;padding:5px 18px;text-align:left;white-space:normal;font-size:15px}
.mr-flow .mr-step--po{padding-bottom:20px;border-radius:0 0 20px 20px}
.mr-flow .mr-badge,.mr-flow .mr-route{display:none}
.mr-flow .mr-problem{order:1;font-size:17px}
.mr-flow :is(.mr-problem,.mr-title,.mr-wave,.mr-pairs,.mr-foot,.mr-cl__word){padding-inline:0}
.mr-flow .mr-cl__title{position:relative;inset:auto;grid-column:1/-1;order:2}
.mr-flow .mr-cl__botanical-label{order:3;width:auto;font-size:16px}
.mr-flow .mr-cl__word{font-size:clamp(34px,8vw,64px)}
.mr-flow .mr-cl__word--next{font-size:clamp(25px,6.2vw,46px);white-space:normal}
.mr-flow .mr-title{order:2;font-size:clamp(30px,6vw,52px);text-align:center;width:auto}
.mr-flow .mr-su__protection{order:3;width:min(100%,430px);justify-self:center;text-align:center;margin-block:4px 14px}
.mr-flow .mr-su__protection dt{font-size:clamp(29px,6vw,45px)}
.mr-flow .mr-wave,.mr-flow .mr-pairs{order:3;text-align:center;width:auto}
.mr-flow .mr-wave__word,.mr-flow .mr-pairs .mr-wave__word{font-size:clamp(22px,4vw,32px)}
.mr-flow .mr-wave__names{margin-top:.4em!important}
.mr-flow .mr-wave__word--split{display:block}
.mr-flow .mr-wave__word--split>span{display:inline}
.mr-flow .mr-pairs{display:grid;gap:12px}
.mr-flow .mr-shot:not(.mr-shot--hero) .mr-actor{order:6;--h:clamp(220px,48vh,340px)}
.mr-flow .mr-shot--po .mr-actor.mr-actor--po{--h:clamp(96px,20vh,150px)}
/* No pack or its shadow may widen the phone layout in flow. */
.mr-flow .mr-shot{overflow-x:clip}
.mr-flow .mr-foot{order:7;text-align:center;width:auto;color:inherit!important;text-shadow:none}
.mr-flow .mr-shot--br .mr-foot{display:block;color:#fbf6e6!important;text-shadow:0 1px 10px rgba(30,40,20,.55)}
.mr-flow .mr-shot--br .mr-foot__headline{position:static;padding-inline:0}
.mr-flow .mr-foot__headline{font-size:clamp(28px,6vw,42px);margin-bottom:16px;color:inherit!important;text-shadow:inherit}
.mr-flow .mr-foot .mr-support{margin-inline:auto}
.mr-flow .mr-po__title{-webkit-text-stroke:0}
.mr-flow .mr-shot--su{clip-path:none}
.mr-flow .mr-mark{scroll-margin-top:var(--header-h)}
.mr-flow .mr-hero__bg{background-position:50% 100%}
.mr-flow .mr-rail{display:none}

/* ---------- after the story: the real exchange, then one way to order (LINE with myClover) ---------- */
.mr-close{background:#eef1e3;border-bottom:1px solid var(--line)}
.mr-close__inner{max-width:1100px;margin:auto;padding:76px var(--gutter) 68px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,72px);align-items:start}
/* Scroll poses belong to descendants; these two anchors keep their natural document positions. */
.mr-trust{margin:0;display:grid;gap:14px;align-content:start;perspective:1600px;--letter-y:0px;--letter-turn:0deg;--letter-fold:0deg;--letter-fold-shade:0;--letter-sticker-y:0px;--letter-sticker-turn:-12deg;--letter-sticker-scale:1;--letter-sticker-opacity:1;--letter-photo-y:0px;--letter-photo-turn:-2deg;--letter-photo-opacity:1}
.mr-trust__intro{font:500 12px/1.6 var(--sans);letter-spacing:.04em;color:var(--forest)}
.mr-letter-anchor{position:relative;z-index:2;perspective:1400px;max-width:440px}
.mr-trust__experience{position:relative;isolation:isolate;margin:0;padding:34px 27px 32px;background:radial-gradient(ellipse at 100% 0,rgba(220,230,190,.28),transparent 52%),#fffdf4;border:1px solid #d8dcc9;border-radius:3px 8px 4px 3px;box-shadow:0 3px 7px -4px #34482540,0 23px 40px -30px #34482570;color:var(--forest-deep);transform-origin:50% 20%;transform:translate3d(0,var(--letter-y),0) rotate(calc(var(--letter-turn) * var(--letter-tilt-factor,1)))}
/* A pressed crease has a highlight on one side and a soft shadow on the other. */
.mr-trust__experience:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,transparent 33.1%,#bbc2a416 33.2%,#8e987126 33.33%,#fffef9cc 33.55%,transparent 34.4%,transparent 66.1%,#b8bca41c 66.2%,#89946c22 66.35%,#fffffbcc 66.55%,transparent 67.4%),linear-gradient(90deg,transparent 49.5%,#aab08e0b 49.8%,#fffef97a 50%,transparent 50.6%)}
.mr-trust__experience:after{content:'';position:absolute;inset:7px;border:1px solid #85936714;pointer-events:none;border-radius:1px}
.mr-letter__fold{position:absolute;inset:0 0 auto;height:33.33%;z-index:3;pointer-events:none;transform-origin:50% 100%;transform:rotateX(var(--letter-fold));opacity:var(--letter-fold-shade);background:linear-gradient(180deg,#fffdf4,#edf0de);border:1px solid #d8dcc9;box-shadow:0 -12px 28px -14px #34482570;backface-visibility:hidden}
.mr-trust__clover{position:absolute;z-index:4;right:9px;top:-20px;width:64px;pointer-events:none;transform:translate3d(0,var(--letter-sticker-y),0) rotate(var(--letter-sticker-turn)) scale(var(--letter-sticker-scale));opacity:var(--letter-sticker-opacity);filter:drop-shadow(0 2px 1px #29421e33)}
.mr-trust__clover svg{display:block;width:100%;height:auto;overflow:visible}
.mr-trust__experience .mr-trust__eyebrow{padding-right:32px;margin:0 0 14px;font:400 10px/1.6 var(--sans);letter-spacing:.03em;color:#587048}
.mr-trust__experience h3{font:600 clamp(28px,3.3vw,38px)/1.3 var(--sans);letter-spacing:-.04em;margin:0 0 13px;padding-right:15px}
.mr-trust__experience .mr-trust__lead{margin:0 0 24px;font:500 17px/1.7 var(--sans);text-wrap:pretty}
.mr-trust__story p{margin:0 0 18px;font:400 14px/1.95 var(--sans);color:#3d5138;text-wrap:pretty}
.mr-trust__experience .mr-trust__wish{margin:24px 0 20px;padding-top:16px;border-top:1px dashed #b9c8a5;font:400 13px/1.8 var(--sans);color:#476d36}
.mr-trust__experience footer{font:500 12px/1.7 var(--sans);color:var(--forest-deep)}
.mr-trust__experience small{display:block;margin-top:5px;font:400 10px/1.7 var(--sans);color:var(--ink-soft)}
.mr-letter__attachment{position:relative;z-index:1;max-width:414px;margin:4px 10px 0 16px}
.mr-trust__photo{position:relative;margin:0;padding:14px 10px 15px;background:#fffef9;border:1px solid #dedfce;box-shadow:0 3px 5px -3px #30432240,0 21px 38px -25px #30432277;transform:translate3d(0,var(--letter-photo-y),0) rotate(var(--letter-photo-turn));opacity:var(--letter-photo-opacity)}
.mr-trust__photo:after{content:'';position:absolute;right:18px;top:-10px;width:62px;height:21px;transform:rotate(8deg);background:linear-gradient(90deg,#d9dfbf70,#dce3c6b8,#d9dfbf70);border-inline:1px dashed #b7c29580}
.mr-trust__chat-title{margin:0 0 12px;font-size:11px;letter-spacing:0}
/* The unchanged screenshot is the photograph itself, not a control or a lightbox. */
.mr-trust__shot{display:block;overflow:hidden;background:#111;border:1px solid #26392120}
.mr-trust__shot img{width:100%;height:auto}
.mr-trust__caption{margin:12px 3px 0;font-size:10px;line-height:1.7;color:var(--ink-soft)}
@media(max-width:700px){.mr-trust{--letter-tilt-factor:.25}.mr-trust__experience{padding:32px 23px 29px}.mr-trust__clover{right:8px;width:59px}.mr-letter__attachment{margin-inline:9px}}
/* Readable, open stationery is the baseline, including short screens and reduced motion. */
.mr-flow .mr-trust__experience,.mr-flow .mr-trust__photo,.mr-flow .mr-trust__clover{transform:none;opacity:1}
.mr-flow .mr-letter__fold{display:none}
@media(prefers-reduced-motion:reduce),(max-height:520px){.mr-trust__experience,.mr-trust__photo,.mr-trust__clover{transform:none!important;opacity:1!important}.mr-letter__fold{display:none}}
/* In-page links to the order land below the fixed header, like every reading chapter. */
.mr-order{scroll-margin-top:calc(var(--header-h) + 28px)}
.mr-order .mr-h2{margin-bottom:12px}
.mr-order__how{font-size:15px;line-height:1.85;max-width:34em}
.mr-actions--order{margin-top:18px}
.mr-btn--line{background:var(--forest-deep);border-color:var(--forest-deep);color:var(--ivory);font-weight:600;gap:10px}
.mr-btn--line::before{content:'';width:12px;height:12px;border-radius:50%;background:#06c755;box-shadow:0 0 0 3px rgba(6,199,85,.25);flex:none}
.mr-order__note{margin:12px 0 0;font-size:11px;line-height:1.7;color:var(--ink-soft)}
.mr-order__route{margin:24px 0 0;font:700 clamp(17px,2vw,21px)/1.4 var(--sans);color:var(--forest-deep)}
.mr-picks{border:0;margin:10px 0 0;padding:0}
.mr-pick__mark{display:block;font:700 11px/1.5 var(--sans);color:var(--forest)}
.mr-pick__mark b{font:700 10px var(--display);color:var(--gold)}
.mr-picks legend{font-size:12px;color:var(--ink-soft);margin-bottom:6px}
.mr-pick{display:grid;grid-template-columns:20px 40px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer}
.mr-pick input{width:17px;height:17px;accent-color:var(--forest)}
.mr-pick .mr-pack{height:52px;justify-self:center}
.mr-pick[data-row=PO] .mr-pack{height:28px}
.mr-pick__name{font-size:14px;line-height:1.4;font-weight:600;min-width:0}
.mr-pick__name small{display:block;font-size:11px;font-weight:400;color:var(--ink-soft)}
.mr-pick__more{font-size:12px;white-space:nowrap;color:var(--forest)}
.mr-pick.is-off .mr-pack,.mr-pick.is-off .mr-pick__name{opacity:.45}
.mr-order__message{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px;padding:12px 14px;border:1px dashed rgba(25,53,40,.25);background:rgba(255,255,255,.6)}
.mr-order__message p{margin:0;flex:1 1 16em;font-size:13px;line-height:1.6}
.mr-fact{margin:10px 0 16px;font-size:12px}
.mr-fact summary{color:var(--forest);font-weight:500}
.mr-fact small{display:block;color:var(--ink-soft)}
@media (max-width:900px){
  .mr-close__inner{grid-template-columns:1fr;gap:36px;padding:44px var(--gutter) 48px}
  .mr-letter-anchor{max-width:100%}.mr-letter__attachment{max-width:calc(100% - 26px)}
}
@media (max-width:420px){
  .mr-pick{grid-template-columns:20px 32px minmax(0,1fr);row-gap:2px}
  .mr-pick__more{grid-column:3}
}

/* ---------- a product's own page: one template, each with its chapter's colour and material ---------- */
.mr-detail-page{--dt-hero:#e9efe2;--dt-ink:var(--forest-deep);background:var(--ivory)}
body[data-product=CL]{--dt-hero:linear-gradient(165deg,#fdfcf7,#e1ebe0)}
body[data-product=AC]{--dt-hero:radial-gradient(90% 80% at 72% 30%,#2f5d3e,#12301f);--dt-ink:#eef2df}
body[data-product=BR]{--dt-hero:radial-gradient(90% 80% at 72% 18%,#fffbee,#ecdcaa 55%,#b9a868)}
body[data-product=SU]{--dt-hero:linear-gradient(170deg,#eaf4f0,#f8faf2 52%,#dde9d8)}
body[data-product=PO]{--dt-hero:radial-gradient(90% 80% at 62% 30%,#2c5a40,#0e2619);--dt-ink:#f4f4ec}
.mr-detail{padding-top:var(--header-h)}
.mr-route-nav{background:var(--ivory);border-bottom:1px solid var(--line);padding:10px var(--gutter)}
.mr-route-nav p{margin:0 0 6px;font:700 12px/1.4 var(--sans);color:var(--forest)}
.mr-route-nav ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.mr-route-nav a{display:block;padding:6px 8px;border-radius:8px;border:1px solid var(--line);text-decoration:none;font:600 12px/1.35 var(--sans);color:var(--forest-deep);background:#fff}
.mr-route-nav b{font:700 11px var(--display)}
.mr-route-nav__name{display:block;font-weight:400;font-size:11px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mr-route-nav .is-current a{border-color:var(--forest);box-shadow:inset 0 0 0 1px var(--forest);background:#eef1e3}
.mr-route-nav .is-current .mr-route-nav__name{color:var(--forest-deep);font-weight:600;white-space:normal}
.mr-detail__hero{position:relative;overflow:hidden;overflow:clip;background:var(--dt-hero);color:var(--dt-ink);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:32px;padding:clamp(40px,7vh,72px) var(--gutter);min-height:min(80svh,720px)}
.mr-detail__material{position:absolute;inset:0;pointer-events:none}
.mr-detail__material img{position:absolute;width:62%;max-width:none;right:-6%;top:50%;transform:translateY(-50%);opacity:.55}
body[data-product=CL] .mr-detail__material img{width:90%;right:-20%;top:78%}
body[data-product=SU] .mr-detail__material img{width:110%;right:-30%}
body[data-product=PO] .mr-detail__material img{width:100%;right:-18%;top:80%;opacity:.8}
.mr-detail__copy{position:relative;max-width:36em}
.mr-detail__copy .mr-kicker{color:inherit;opacity:.85}
.mr-detail__copy .mr-kicker b{font:700 11px var(--display);margin-right:8px}
.mr-detail__problem{margin:0 0 10px;font:600 clamp(14px,1.5vw,17px)/1.5 var(--sans);opacity:.9}
.mr-detail h1{margin:0 0 12px;font:700 clamp(30px,4.6vw,54px)/1.18 var(--sans);letter-spacing:-.035em;text-wrap:balance}
.mr-detail__role{display:block;margin-top:6px;font:600 clamp(17px,2vw,22px)/1.4 var(--sans);letter-spacing:0;opacity:.85}
.mr-detail__headline{margin:0 0 14px;font:600 clamp(19px,2.2vw,26px)/1.4 var(--sans)}
.mr-detail__lead{font-size:15px;line-height:1.85;max-width:34em}
.mr-detail__protection{max-width:440px;margin:20px 0 18px;padding-block:16px;border-block:1px solid rgba(43,77,55,.2)}
.mr-detail__protection dt{font-size:clamp(34px,4vw,52px)}
.mr-detail__hero .mr-actions{margin-top:22px}
.mr-detail__hero .mr-btn--ghost{color:inherit;border-color:currentColor}
.mr-detail__pack{position:relative;margin:0;justify-self:center;height:min(58svh,480px);isolation:isolate}
.mr-detail__pack .mr-pack{height:100%}
.mr-detail__pack::after{content:'';position:absolute;z-index:-1;left:-18%;right:-18%;bottom:-2%;height:6%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.35),transparent)}
body[data-product=PO] .mr-detail__pack{height:min(28svh,240px)}
.mr-detail__block{max-width:900px;margin:0 auto;padding:clamp(36px,6vh,56px) var(--gutter);border-bottom:1px solid var(--line)}
.mr-detail__block h2{margin:0 0 18px;font:700 clamp(22px,2.6vw,30px)/1.3 var(--sans);letter-spacing:-.02em;color:var(--forest-deep)}
.mr-detail__texture,.mr-detail__fit,.mr-detail__set{margin:16px 0 0;font-size:14px;line-height:1.8}
.mr-detail__texture b{margin-right:8px;color:var(--forest)}
.mr-detail__use dl{display:grid;gap:10px;margin:0}
.mr-detail__use dl div{display:grid;grid-template-columns:7em minmax(0,1fr);gap:12px}
.mr-detail__use dt{font-size:12px;color:var(--ink-soft)}
.mr-detail__use dd{margin:0;font-size:14px;line-height:1.7}
.mr-detail__intro{font-size:13px;color:var(--ink-soft);margin:-6px 0 16px}
.mr-atlas__count-note{margin:0 0 22px;font-size:13px;line-height:1.8;color:var(--ink-soft)}
.mr-detail__fine{font-size:11px;color:var(--ink-soft);margin-top:12px}
.mr-detail__aka{margin-top:14px;padding:12px 14px;border-left:2px solid var(--sage-deep);background:rgba(255,255,255,.6)}
.mr-detail__aka h3{margin:0 0 4px;font:600 12px/1.5 var(--sans);color:var(--forest)}
.mr-detail__aka p{margin:0;font-size:13px;line-height:1.7}
.mr-detail__faq details{border-top:1px solid var(--line);padding:4px 0}
.mr-detail__faq summary{padding:12px 0;font-weight:600;color:var(--forest-deep)}
.mr-detail__faq p{margin:0 0 14px;font-size:14px;line-height:1.8}
/* Product pages — one short sequence per page: ingredients → material → care. Each page keeps its
   own palette and rhythm; the pictures illustrate names and materials, never a supplier or a result. */
.mr-detail-page{--seq-bg:#f2f5ec;--seq-accent:var(--forest);--seq-tint:#e4ecdb;--seq-panel:#e9efe2;--ease:cubic-bezier(.2,.7,.2,1)}
body[data-product=CL]{--seq-bg:#f4f7f2;--seq-accent:#2a6246;--seq-tint:#e2eee7;--seq-panel:#e8f1ec}
body[data-product=AC]{--seq-bg:#eef3ea;--seq-accent:#234d35;--seq-tint:#dde8d5;--seq-panel:#173a2a}
body[data-product=BR]{--seq-bg:#fbf7e9;--seq-accent:#6f5f1c;--seq-tint:#f1e6c0;--seq-panel:#f5ebc7}
body[data-product=SU]{--seq-bg:#f1f7f3;--seq-accent:#1d5433;--seq-tint:#dfede4;--seq-panel:#e4f0ea}
body[data-product=PO]{--seq-bg:#eef1e8;--seq-accent:#1f4a33;--seq-tint:#dde6d8;--seq-panel:#12301f}
.mr-seq{background:var(--seq-bg);color:var(--forest-deep);padding:clamp(48px,9vh,96px) var(--gutter) clamp(36px,6vh,64px);overflow:hidden;overflow:clip}
.mr-seq__title{max-width:1100px;margin:0 auto clamp(28px,6vh,56px);font:700 clamp(15px,1.4vw,18px)/1.4 var(--sans);letter-spacing:.02em;color:var(--seq-accent)}
.mr-seq__beats{list-style:none;margin:0 auto;padding:0;max-width:1100px;display:grid;gap:clamp(48px,10vh,120px)}
.mr-beat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,5vw,72px)}
.mr-beat:nth-child(2) .mr-beat__visual{order:2}
.mr-beat__visual{position:relative;width:100%;max-width:500px;aspect-ratio:1;justify-self:center}
.mr-beat__label{margin:0 0 10px;font:600 14px/1.4 var(--sans);color:var(--seq-accent)}
.mr-beat__label b{margin-right:8px;font:700 12px var(--display);letter-spacing:.06em}
.mr-beat h3 span{display:inline-block}
.mr-beat h3{margin:0 0 16px;font:800 clamp(32px,5vw,60px)/1.25 var(--sans);letter-spacing:-.02em;text-wrap:balance}
.mr-beat__copy>p{margin:0;max-width:32em;font-size:15px;line-height:1.85}
.mr-beat__names{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.mr-beat__names li{padding:3px 11px;border-radius:99px;background:var(--seq-tint);font:500 13px/1.6 var(--sans)}
.mr-beat__more{display:inline-block;margin-top:16px;padding:6px 0;font:600 14px/1.5 var(--sans);color:var(--seq-accent)}
.mr-seq__fine{max-width:1100px;margin:clamp(36px,7vh,64px) auto 0;font-size:11px;line-height:1.7;color:var(--ink-soft)}
/* Beat 1: the named ingredients as a small still life, or for SU its seven plants as one ring. */
.mr-tableau{position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,var(--seq-tint),rgba(255,255,255,0))}
.mr-tableau__item{position:absolute;width:40%;aspect-ratio:1;left:var(--x);top:var(--y);transform:rotate(var(--r,0deg))}
.mr-tableau__item img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(30,45,25,.16))}
.mr-tableau__item:nth-of-type(1){--x:5%;--y:9%;--r:-7deg}
.mr-tableau__item:nth-of-type(2){--x:55%;--y:4%;--r:6deg}
.mr-tableau__item:nth-of-type(3){--x:29%;--y:32%;width:44%}
.mr-tableau__item:nth-of-type(4){--x:3%;--y:56%;--r:5deg}
.mr-tableau__item:nth-of-type(5){--x:56%;--y:55%;--r:-4deg}
.mr-tableau--ring .mr-tableau__item{--a:calc(var(--k) / var(--n) * 360deg - 90deg);width:27%;left:calc(50% + cos(var(--a)) * 36% - 13.5%);top:calc(50% + sin(var(--a)) * 36% - 13.5%);--r:0deg}
.mr-tableau__count{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:800 clamp(72px,11vw,132px)/1 var(--display);color:var(--seq-accent)}
.mr-tableau--scene{overflow:hidden;background:var(--seq-panel)}
.mr-tableau--scene img{width:100%;height:100%;object-fit:cover}
/* Beat 2: the material, in an arch. Beat 3: the pack, with each sourced benefit in bold. */
.mr-material{position:absolute;inset:0;overflow:hidden;overflow:clip;border-radius:48% 48% 20px 20px / 36% 36% 20px 20px;background:var(--seq-panel)}
.mr-material img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
.mr-beat__pack{position:absolute;inset:6% 14%;display:flex;align-items:flex-end;justify-content:center;background:radial-gradient(closest-side,var(--seq-tint),rgba(255,255,255,0) 74%)}
.mr-beat__pack .mr-pack{height:88%}
body[data-product=PO] .mr-beat__pack .mr-pack{height:44%;margin-bottom:18%}
.mr-care{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.mr-care li{display:grid;gap:2px;padding-left:16px;border-left:2px solid var(--seq-accent)}
.mr-care b{font:700 clamp(18px,1.8vw,22px)/1.45 var(--sans)}
.mr-care span{font-size:14px;line-height:1.75;color:var(--ink)}
.mr-beat--care .mr-detail__fit{margin:18px 0 0}
/* Every listed name, image-led, all groups open. */
.mr-atlas{max-width:1100px}
/* In-page and direct links land below the fixed header. */
.mr-detail-page :is(#ingredients,.mr-seq){scroll-margin-top:calc(var(--header-h) + 16px)}
.mr-atlas__group{margin-top:32px}
.mr-atlas__group h3{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0 0 6px;font:700 18px/1.45 var(--sans);color:var(--forest-deep)}
.mr-atlas__group h3 small{font:500 12px/1.4 var(--sans);color:var(--ink-soft)}
.mr-atlas__summary{max-width:48em;margin:0 0 16px;font-size:13px;line-height:1.75}
.mr-atlas__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:22px 16px}
.mr-atlas__item{display:grid;align-content:start;justify-items:center;gap:8px;text-align:center}
.mr-atlas__img{display:block;width:100%;max-width:150px;aspect-ratio:1;padding:11%;border-radius:50%;background:radial-gradient(closest-side,#fff,var(--seq-tint))}
.mr-atlas__img img{width:100%;height:100%;object-fit:contain}
.mr-atlas__img.is-repeat img{transform:scaleX(-1) rotate(10deg)}
.mr-atlas__tile{display:block;width:100%;height:100%;border-radius:50%;border:1px dashed var(--sage-deep)}
.mr-atlas__text b{display:block;font:600 14px/1.5 var(--sans);color:var(--forest-deep)}
.mr-atlas__text small{display:block;margin-top:4px;font-size:12px;line-height:1.6;color:var(--ink-soft)}
/* Motion only with scripts and motion allowed (detail-motion.js adds .mr-reveal); otherwise all is still. */
@media (prefers-reduced-motion:no-preference){
  .mr-reveal .mr-seq__title{transition:opacity .7s var(--ease),transform .9s var(--ease)}
  .mr-reveal .mr-seq__title:not(.is-in){opacity:0;transform:translateY(12px)}
  .mr-reveal .mr-beat__visual,.mr-reveal .mr-beat__copy{transition:opacity .8s var(--ease),transform 1.05s var(--ease),clip-path 1.15s var(--ease)}
  .mr-reveal .mr-beat__copy{transition-delay:.12s}
  .mr-reveal .mr-beat:not(.is-in) .mr-beat__copy{opacity:0;transform:translateY(18px)}
  .mr-reveal .mr-beat:not(.is-in) .mr-beat__visual{opacity:0;transform:var(--seq-from,translateY(28px))}
  .mr-reveal .mr-tableau__item{transition:opacity .7s var(--ease) calc(.2s + var(--k) * 80ms),translate .95s var(--ease) calc(.2s + var(--k) * 80ms)}
  .mr-reveal .mr-beat:not(.is-in) .mr-tableau__item{opacity:0;translate:var(--item-from,0 22px)}
  .mr-reveal .mr-care li{transition:opacity .6s var(--ease) calc(.3s + var(--j,0) * 90ms),translate .8s var(--ease) calc(.3s + var(--j,0) * 90ms)}
  .mr-reveal .mr-care li:nth-child(2){--j:1}.mr-reveal .mr-care li:nth-child(3){--j:2}
  .mr-reveal .mr-beat:not(.is-in) .mr-care li{opacity:0;translate:0 12px}
  .mr-reveal .mr-atlas__item{transition:opacity .6s var(--ease) calc(var(--i) * 45ms),translate .8s var(--ease) calc(var(--i) * 45ms)}
  .mr-reveal .mr-atlas__item:not(.is-in){opacity:0;translate:0 14px}
  /* Five rhythms: CL wipes like foam, AC rises, BR blooms open, SU glides, PO settles. */
  .mr-reveal .mr-seq--wipe .mr-beat__visual{clip-path:inset(0 0 0 0)}
  .mr-reveal .mr-seq--wipe .mr-beat:not(.is-in) .mr-beat__visual{opacity:1;clip-path:inset(0 100% 0 0);transform:none}
  .mr-seq--rise{--seq-from:translateY(44px);--item-from:0 34px}
  .mr-reveal .mr-seq--bloom .mr-beat__visual{clip-path:circle(75% at 50% 50%)}
  .mr-reveal .mr-seq--bloom .mr-beat:not(.is-in) .mr-beat__visual{clip-path:circle(0% at 50% 50%);transform:scale(.94)}
  .mr-seq--glide{--seq-from:translateX(-56px);--item-from:-30px 0}
  .mr-seq--glide .mr-beat:nth-child(2){--seq-from:translateX(56px);--item-from:30px 0}
  .mr-seq--settle{--seq-from:translateY(-36px);--item-from:0 -26px}
  .mr-reveal .mr-detail__pack{animation:mr-arrive 1.1s var(--ease) both}
  .mr-reveal .mr-detail__material{animation:mr-fade 1.6s ease both}
  /* Where the browser links animation to scroll, each material drifts gently with the page. */
  @supports (animation-timeline:view()){
    .mr-material img{animation:mr-drift linear both;animation-timeline:view();animation-range:cover}
    .mr-seq--glide .mr-material img{animation-name:mr-glide}
    .mr-seq--settle .mr-material img{animation-name:mr-settle}
  }
}
@keyframes mr-drift{from{transform:translateY(-4%) scale(1.1)}to{transform:translateY(4%) scale(1.1)}}
@keyframes mr-glide{from{transform:translateX(-5%) scale(1.12)}to{transform:translateX(5%) scale(1.12)}}
@keyframes mr-settle{from{transform:translateY(-6%) scale(1.1)}to{transform:translateY(0) scale(1.1)}}
@keyframes mr-arrive{from{opacity:0;transform:translateY(18px)}}
@keyframes mr-fade{from{opacity:0}}
.mr-detail__order{background:#eef1e3;max-width:none;padding-inline:max(var(--gutter),calc((100% - 900px) / 2))}
.mr-detail__nav{max-width:900px;margin:0 auto;padding:26px var(--gutter) 40px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}
.mr-detail__nav a{color:var(--forest)}
.mr-detail-page .mr-footer p{max-width:900px}
@media (max-width:800px){
  .mr-route-nav{padding:8px 10px}
  .mr-route-nav ol{gap:4px}
  .mr-route-nav a{padding:5px 4px;text-align:center;font-size:11px}
  .mr-route-nav__name{display:none}
  .mr-route-nav .is-current .mr-route-nav__name{display:block;font-size:10px}
  .mr-detail__hero{grid-template-columns:1fr;min-height:0;padding-top:28px}
  .mr-detail__pack{order:-1;height:min(36svh,300px)}
  body[data-product=SU] .mr-detail__pack{order:0}
  body[data-product=PO] .mr-detail__pack{height:min(20svh,170px)}
  .mr-detail__material img{width:120%;right:-40%;top:22%}
  .mr-detail__use dl div{grid-template-columns:1fr;gap:2px}
  .mr-beat{grid-template-columns:1fr;gap:22px}
  .mr-beat:nth-child(2) .mr-beat__visual{order:0}
  .mr-beat__visual{max-width:min(100%,400px)}
  .mr-beat h3{font-size:clamp(28px,8.2vw,40px)}
  .mr-atlas__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 10px}
  .mr-atlas__text b{font-size:13px}
  /* Where names carry a sourced role, a phone reads them as rows: picture, then name and role. */
  .mr-atlas__group--roles .mr-atlas__grid{grid-template-columns:1fr;gap:12px}
  .mr-atlas__group--roles .mr-atlas__item{grid-template-columns:76px minmax(0,1fr);align-items:center;justify-items:start;gap:14px;text-align:left}
  .mr-atlas__group--roles .mr-atlas__text b{font-size:14px}
}
@media (prefers-reduced-motion:reduce){.mr-rail{transition:none}}

/* Flowing serum and fine powder are scene material, not circular overlays or video players. */
.mr-melt__film{inset:0;width:auto;aspect-ratio:auto;z-index:7}
.mr-melt__film .mr-fx__clipframe{-webkit-mask-image:radial-gradient(ellipse 85% 72% at 50% 50%,#000 35%,transparent 100%);mask-image:radial-gradient(ellipse 85% 72% at 50% 50%,#000 35%,transparent 100%)}
.mr-po__film{left:0;right:0;top:25svh;height:75svh;width:auto;aspect-ratio:auto}
.mr-po__film .mr-fx__clipframe{-webkit-mask-image:linear-gradient(transparent,#000 24%,#000 85%,transparent);mask-image:linear-gradient(transparent,#000 24%,#000 85%,transparent)}
.mr-po__film img,.mr-po__film video{object-position:50% 75%}
.mr-po__signature{position:absolute;top:80svh;left:7%;width:86%;margin:0;text-align:center;color:#163b2b;font:500 clamp(13px,3.6vw,20px)/1.55 var(--sans);text-shadow:0 1px 8px rgba(255,255,244,.85)}
.mr-po__signature small{display:block;margin-top:4px;font-size:10px;opacity:.8}
.mr-flow .mr-po__signature{position:static;width:auto;margin:20px 0}