.efficacy-motion{border:1px solid #d9e3ce;border-radius:18px;padding:28px;background:linear-gradient(145deg,#f3f7ed,#fbfcf8);margin-top:28px}.chart-heading{display:flex;align-items:center;justify-content:space-between;gap:24px}.chart-heading h3{font-size:21px;margin-bottom:7px;line-height:1.5}.chart-heading p{font-size:12px}.chart-readout{font:40px/1.2 var(--serif);white-space:nowrap;color:#3c643d;font-variant-numeric:tabular-nums}
.chart-bars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:20px 0}.chart-bars button{display:flex;flex-direction:column;align-items:center;gap:8px;background:transparent;padding:0 8px 10px;border-radius:8px}.chart-track{width:100%;height:145px;display:flex;align-items:end;justify-content:center;border-bottom:1px solid #c3d2b5}.chart-bar{display:block;width:70%;max-width:100px;background:#b2c898;border-radius:7px 7px 0 0;transform-origin:bottom;transition:transform .7s ease,background .3s}.chart-bar-0{height:7.01%}.chart-bar-1{height:29.57%}.chart-bar-2{height:58.12%}.chart-bar-3{height:100%}.chart-bars button[aria-pressed=true]{background:#eaf1e1}.chart-bars button[aria-pressed=true] .chart-bar{background:#3b6648}.chart-value{font-size:17px;color:#244c3a;font-variant-numeric:tabular-nums}.chart-week{font-size:12px;color:#667b5a}
.chart-footer{display:flex;align-items:center;justify-content:space-between;gap:22px;border-top:1px solid #dce4d5;padding-top:18px}.chart-footer p{font-size:12px;line-height:1.8;max-width:760px}
.compare-surface{position:relative;width:100%;aspect-ratio:697/535;overflow:hidden;border-radius:10px;background:#e6ecdf;margin-top:18px!important;display:block!important;isolation:isolate}.compare-surface>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}.compare-surface .compare-after{clip-path:inset(0 0 0 50%)}.compare-divider{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;box-shadow:0 0 0 1px #173f3630;pointer-events:none}.compare-divider:after{content:'⋮';display:grid;place-items:center;position:absolute;left:-14px;top:calc(50% - 20px);height:40px;width:30px;border-radius:20px;background:#fff;color:#173f36;box-shadow:0 3px 12px #173f3625;font-size:24px}
.compare-label{position:absolute;bottom:10px;font-size:11px;line-height:1.5;background:#fafbf7eb;color:#244c3b;padding:5px 9px;border-radius:5px}.compare-label-before{left:8px}.compare-label-after{right:8px}
.comparison-pair>.compare-controls{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:16px}.compare-controls label{font-size:12px;color:#526d4b}.compare-controls input{accent-color:#355d3c;width:100%;margin:0;cursor:ew-resize;min-height:28px}.compare-controls input:focus-visible{outline:2px solid #7a9a63;outline-offset:3px}
.comparison-pair.is-comparison-ready>.comparison-original{display:none}.comparison-pair>.compare-controls[hidden]{display:none}
/* Larger reading text and direction-free controls across all pages. */
.desktop-nav{font-size:14px;gap:25px}.mobile-nav a{font-size:15px}.language-trigger{font-size:13px}.language-chevron,.visual-open,.back-top:after{display:none}
.button,.text-link{font-size:14px}.hero-description{font-size:17px}.hero-actions .button{font-size:14px}.hero-actions .text-link{font-size:14px}
.section-heading>p,.product-page .section-heading>p{font-size:15px}.product-info>p:not(.eyebrow),.benefit p,.ritual-grid p,.credentials-preview p:not(.eyebrow),.story-copy>p:not(.eyebrow){font-size:15px}
.product-overview p,.product-profile p:not(.eyebrow),.product-page .product-profile p:not(.eyebrow),.formula-grid p,.product-feature-grid p,.product-routine li p,.product-routine>div>p:not(.eyebrow){font-size:15px}
.spec-panel dl>div{font-size:14px}.product-section-nav a{font-size:13px}.product-intro-copy .tags span{font-size:12px}.certificate-summary,.product-credential-note,.evidence-note,.result-metrics span,.faq-list summary{font-size:14px}.film-note,.product-intro-copy .fine-print{font-size:12px}.faq-list details>p{font-size:14px}.footer-top nav{font-size:13px}
@media(max-width:600px){.efficacy-motion{padding:19px}.chart-heading{align-items:flex-start;flex-direction:column;gap:10px}.chart-readout{font-size:32px}.chart-bars{gap:6px}.chart-bars button{padding:0 3px 8px}.chart-track{height:115px}.chart-value{font-size:14px}.chart-week{font-size:11px;text-align:center}.chart-footer p{font-size:12px}
.language-trigger{font-size:12px}.hero-description{font-size:15px}.hero-actions .button,.hero-actions .text-link{font-size:12px}.button,.text-link{font-size:13px}.section-heading>p,.product-page .section-heading>p{font-size:14px}.product-info>p:not(.eyebrow),.benefit p,.ritual-grid p,.credentials-preview p:not(.eyebrow),.story-copy>p:not(.eyebrow){font-size:14px}.product-overview p,.product-profile p:not(.eyebrow),.product-page .product-profile p:not(.eyebrow),.formula-grid p,.product-feature-grid p,.product-routine li p,.product-routine>div>p:not(.eyebrow){font-size:14px}.spec-panel dl>div{font-size:13px}.product-section-nav a{font-size:12px}.product-intro-copy .tags span{font-size:11px}.certificate-summary,.product-credential-note,.evidence-note,.result-metrics span,.faq-list summary,.faq-list details>p{font-size:12px}.film-note,.product-intro-copy .fine-print{font-size:11px}.footer-top nav{font-size:12px}.testing-details summary{font-size:13px}}
@media(prefers-reduced-motion:reduce){.care-experience *{animation:none!important;transition:none!important}.chart-bar{transition:none!important}}
/* Full-height botanical opening and finite care illustrations. */
.hero{min-height:calc(100svh - var(--product-header-height,89px));display:flex;flex-direction:column;justify-content:center;background-position:center;background-size:cover}
.hero .hero-grid{display:grid;grid-template-columns:1.05fr 1fr;flex:1;align-items:center;gap:36px;min-height:0;padding-top:44px;padding-bottom:30px}
.hero .hero-copy{max-width:670px}.hero h1{font-size:clamp(46px,4.8vw,76px)}.hero .hero-bottom{margin-top:auto}.hero:before{background:linear-gradient(90deg,#f5f6eff2 0%,#f5f6efcc 37%,#f5f6ef20 100%)}
.brand-experience{min-width:0;position:relative}.brand-glass{position:relative}.brand-glass .care-illustration{width:100%;max-height:440px;overflow:visible}.brand-art-wordmark{position:absolute;left:0;right:0;bottom:11%;text-align:center;font-size:15px;letter-spacing:7px;color:#395a41}
.brand-art-caption{padding:0 12px;text-align:center}.brand-art-caption>p{font:23px/1.5 var(--serif);color:#31513c}.brand-experience .care-phases{display:flex;justify-content:center;gap:15px;margin-top:20px;padding:0;border-top:1px solid #80916b40}.brand-experience .care-phases li{flex:1;flex-direction:column;gap:7px;border:0;padding:15px 0 0}.brand-experience .care-phases strong{font-size:12px}.brand-experience .care-phases span{width:auto;height:auto;background:none;font-size:10px}
.care-storyboard{display:grid;grid-template-columns:1.5fr 1fr;border:1px solid #d7e1d0;border-radius:24px;overflow:hidden;background:#f5f7ef;box-shadow:0 18px 60px #173f3606}.care-canvas{position:relative;display:grid;align-items:center;background:radial-gradient(ellipse at 50% 45%,#fffdf6,#e8eee1);overflow:hidden;min-width:0;min-height:410px}.canvas-nose{background:radial-gradient(ellipse at center,#fcfdf9,#e8f0ef)}.canvas-sun{background:radial-gradient(ellipse at 50% 20%,#fffbeb,#eef0e5)}
.care-illustration{width:100%;height:auto;max-height:490px}.care-canvas-label{position:absolute;top:25px;left:28px;font-size:10px;letter-spacing:2px;color:#6e806b}.care-scene-badge{position:absolute;top:22px;right:25px;font:22px var(--serif);color:#8c753d}.care-scene-badge small{font:11px var(--sans);display:block;letter-spacing:2px;margin-top:4px}
.care-story-copy{padding:30px 36px;align-self:center}.care-product-thumbnail{width:100px;height:100px;object-fit:contain;mix-blend-mode:multiply;margin-bottom:12px}.care-story-copy h3{font:26px/1.45 var(--serif)}.care-phases{list-style:none;padding:0;margin:24px 0 0}.care-phases li{display:flex;align-items:center;gap:16px;border-top:1px solid #d9e2d1;padding:15px 0;color:#7b8771}.care-phases span{width:31px;height:31px;border-radius:50%;background:#e6eddc;display:grid;place-items:center;flex-shrink:0;font-size:11px}.care-phases strong{font-size:14px;font-weight:400;line-height:1.65}.care-illustration-note{font-size:11px;line-height:1.8;margin-top:22px;color:#76806e}
/* Every narrative finishes within 4.8 seconds and rests on its final frame. */
.care-playing .care-illustration *{animation-duration:4.8s;animation-fill-mode:both;animation-timing-function:ease-in-out;animation-iteration-count:1}
.care-playing .nose-sheet{animation-name:strip-lift}.care-playing .nose-impurities{animation-name:pore-clear}.care-playing .lifted-impurities{animation-name:lift-reveal}.care-playing .care-finish{animation-name:finish-glow}
.nose-sheet{opacity:0}.lifted-impurities{opacity:0}.care-finish{opacity:0}.care-complete .nose-impurities{opacity:.06}.care-complete .care-finish{opacity:.8}
.care-playing .cream-drop{animation-name:cream-drop}.care-playing .cream-sweep{animation-name:cream-spread;transform-origin:300px 245px}.care-playing .cream-spots{animation-name:spot-soften}.care-playing .cream-radiance{animation-name:cream-glow}.cream-sweep,.cream-radiance,.cream-drop{opacity:0}.care-complete .cream-spots{opacity:.16}.care-complete .cream-radiance{opacity:.4}
.care-playing .sun-layer{animation-name:layer-form;transform-origin:center}.care-playing .sun-shield{animation-name:shield-form}.care-playing .uv-rays{animation-name:uv-arrive}.care-playing .uv-reflection{animation-name:uv-return}.sun-layer,.sun-shield,.uv-reflection{opacity:0}.uv-rays{opacity:.65}.care-complete .sun-layer,.care-complete .sun-shield{opacity:1}.care-complete .uv-rays{opacity:.3}.care-complete .uv-reflection{opacity:.6}
.care-playing .brand-leaf{animation-name:leaf-open;transform-origin:300px 180px}.care-playing .brand-dew{animation-name:dew-fall}.care-playing .brand-ripple{animation-name:ripple-spread;transform-origin:300px 320px}.care-playing .brand-surface{animation-name:surface-light}.brand-dew{opacity:0}.brand-surface{opacity:.8}.care-complete .brand-ripple{opacity:.55}
.care-playing .care-phases li:nth-child(1){animation:phase-one 4.8s both}.care-playing .care-phases li:nth-child(2){animation:phase-two 4.8s both}.care-playing .care-phases li:nth-child(3){animation:phase-three 4.8s both}.care-complete .care-phases li{color:#37583e}
@keyframes strip-lift{0%{opacity:0;transform:translateY(-65px)}18%,45%{opacity:1;transform:translateY(0)}70%{opacity:1;transform:translate(12px,-55px) rotate(-2deg)}92%,100%{opacity:0;transform:translate(30px,-130px) rotate(-6deg)}}
@keyframes pore-clear{0%,45%{opacity:.8}68%,100%{opacity:.06}}
@keyframes lift-reveal{0%,45%{opacity:0}60%,100%{opacity:.7}}
@keyframes finish-glow{0%,68%{opacity:0}88%,100%{opacity:.8}}
@keyframes cream-drop{0%{opacity:0;transform:translateY(-25px)}12%{opacity:1;transform:translateY(0)}30%{opacity:0;transform:translateY(95px)}100%{opacity:0}}
@keyframes cream-spread{0%,18%{opacity:0;transform:scaleX(.08)}28%{opacity:.95;transform:scaleX(.2)}48%{opacity:.75;transform:scaleX(1)}70%,100%{opacity:0;transform:scaleX(1.05)}}
@keyframes spot-soften{0%,44%{opacity:.45}100%{opacity:.16}}
@keyframes cream-glow{0%,40%{opacity:0}100%{opacity:.4}}
@keyframes layer-form{0%{opacity:0;transform:scaleX(.1)}30%,100%{opacity:1;transform:scaleX(1)}}
@keyframes shield-form{0%,25%{opacity:0;transform:translateY(18px)}48%,100%{opacity:1;transform:translateY(0)}}
@keyframes uv-arrive{0%,38%{opacity:0;transform:translate(-15px,-32px)}63%{opacity:.9;transform:translate(12px,24px)}85%,100%{opacity:.3;transform:translate(0,0)}}
@keyframes uv-return{0%,60%{opacity:0;transform:translate(8px,16px)}83%,100%{opacity:.6;transform:translate(0,0)}}
@keyframes leaf-open{0%{opacity:.2;transform:rotate(-12deg) scale(.85)}40%,100%{opacity:1;transform:rotate(0) scale(1)}}
@keyframes dew-fall{0%,23%{opacity:0;transform:translateY(-20px) scale(.95)}37%{opacity:1;transform:translateY(0)}63%{opacity:.8;transform:translateY(64px)}70%,100%{opacity:0;transform:translateY(70px)}}
@keyframes ripple-spread{0%,53%{opacity:0;transform:scale(.2)}80%{opacity:.8;transform:scale(1)}100%{opacity:.55;transform:scale(1.05)}}
@keyframes surface-light{0%,50%{opacity:.1}100%{opacity:.8}}
@keyframes phase-one{0%,32%{color:#173f36}33%,100%{color:#63775b}}
@keyframes phase-two{0%,32%{color:#89927f}33%,66%{color:#173f36}67%,100%{color:#63775b}}
@keyframes phase-three{0%,66%{color:#89927f}67%,100%{color:#173f36}}
@media(min-width:1500px){.brand-glass .care-illustration{max-height:540px}.hero .hero-grid{padding-top:60px;padding-bottom:50px}}
@media(max-width:1000px){.hero .hero-grid{gap:15px}.hero h1{font-size:49px}.brand-art-caption>p{font-size:21px}.care-story-copy{padding:24px}.care-storyboard{grid-template-columns:1.2fr 1fr}.care-canvas{min-height:380px}}
@media(max-width:750px){.hero .hero-grid{grid-template-columns:1fr;gap:14px;padding-top:32px;padding-bottom:24px}.hero .hero-copy{max-width:100%}.hero h1{font-size:clamp(37px,7vw,51px);margin:16px 0}.hero-description{max-width:540px}.hero .hero-actions{margin-top:22px}.hero-footnote{display:none}.brand-glass .care-illustration{height:245px;width:100%}.brand-art-wordmark{font-size:12px;letter-spacing:5px}.brand-art-caption>p{font-size:19px}.brand-experience .care-phases{margin-top:12px}.brand-experience .care-phases li{padding-top:10px}.hero:before{background:linear-gradient(180deg,#f5f6eff5,#f5f6ef90)}.care-storyboard{grid-template-columns:1fr}.care-canvas{min-height:280px}.care-illustration{max-height:340px}.care-story-copy{display:grid;grid-template-columns:74px 1fr;gap:10px 18px;padding:22px}.care-product-thumbnail{width:74px;height:74px;margin:0}.care-story-copy h3{font-size:23px;align-self:center}.care-story-copy .care-phases,.care-illustration-note{grid-column:1/-1}.care-story-copy .care-phases{margin:0}.care-illustration-note{margin:0}.care-phases li{padding:12px 0}.care-scene-badge{font-size:19px}.care-canvas-label{font-size:9px;top:20px;left:20px}}
@media(max-width:380px){.hero h1{font-size:36px}.brand-glass .care-illustration{height:205px}.brand-experience .care-phases{gap:8px}.brand-experience .care-phases strong{font-size:11px}.hero .hero-grid{padding-top:24px}.care-canvas{min-height:235px}.care-story-copy h3{font-size:21px}}
@media(prefers-reduced-motion:reduce){.care-experience *{animation:none!important}.nose-impurities{opacity:.06}.care-finish{opacity:.8}.cream-spots{opacity:.16}.cream-radiance{opacity:.4}.sun-layer,.sun-shield{opacity:1}.uv-reflection{opacity:.6}.uv-rays{opacity:.3}}
/* Photorealistic AI simulation sprites; separate from unchanged original evidence. */
.real-care .care-storyboard{grid-template-columns:1.2fr 1fr;background:#f6f7f0}
.real-care-media{position:relative;min-width:0;align-self:stretch;overflow:hidden;background:#e3d1bb}
.real-photo{position:relative;aspect-ratio:1;overflow:hidden;width:100%;height:100%;min-height:0;isolation:isolate}
.real-photo .real-sprite{position:absolute;left:50%;top:0;height:100%;width:auto;max-width:none;transform:translateX(-25%);pointer-events:none}
.real-photo .sprite-after{transform:translateX(-75%)}
.real-transition{opacity:0}.care-playing .real-transition{animation:real-care-fade 4.8s ease-in-out both}.care-complete .real-transition{opacity:1}
.real-simulation-badge{position:absolute;z-index:3;left:20px;top:20px;padding:7px 11px;background:#fafbf2ee;border:1px solid #ffffff60;border-radius:20px;color:#344b36;font-size:10px;letter-spacing:1px;line-height:1.5}
.real-state-label{position:absolute;left:20px;bottom:20px;background:#fcfcf2ed;color:#294434;border-radius:7px;padding:10px 14px;font-size:12px;z-index:2;display:grid}
.real-state-label>span{grid-area:1/1}.real-after-label{opacity:0}.care-playing .real-before-label{animation:real-label-before 4.8s both}.care-playing .real-after-label{animation:real-label-after 4.8s both}.care-complete .real-before-label{opacity:0}.care-complete .real-after-label{opacity:1}
.real-media-sun{display:flex;flex-direction:column;background:#eee9db}.sun-real-grid{display:grid;grid-template-columns:1fr 1fr;flex:1;min-height:440px;gap:2px;background:#f9f8f0}.sun-real-side{position:relative;min-width:0;overflow:hidden}.sun-real-side .real-photo{aspect-ratio:auto}.sun-side-label{position:absolute;bottom:20px;left:10px;right:10px;text-align:center;padding:10px 8px;border-radius:7px;background:#f9fbf0f0;color:#284432;font-size:13px;line-height:1.5}.sun-unprotected .sun-side-label{background:#f8ede3f0;color:#755036}.sun-real-caption{padding:16px 20px;font-size:12px;text-align:center;color:#665f4a;line-height:1.7}.real-care .care-illustration-note{padding-top:17px;border-top:1px solid #dbe1d2}
@keyframes real-care-fade{0%,22%{opacity:0}86%,100%{opacity:1}}
@keyframes real-label-before{0%,55%{opacity:1}75%,100%{opacity:0}}
@keyframes real-label-after{0%,55%{opacity:0}75%,100%{opacity:1}}
@media(max-width:1050px){.real-care .care-storyboard{grid-template-columns:1.1fr 1fr}.real-care .care-story-copy{padding:24px}.sun-real-grid{min-height:420px}.sun-side-label{font-size:12px}}
@media(max-width:750px){.real-care .care-storyboard{grid-template-columns:1fr}.real-care-media{align-self:auto}.real-photo{height:auto;aspect-ratio:1}.sun-real-grid{min-height:350px}.sun-real-side .real-photo{height:100%;aspect-ratio:auto}.real-simulation-badge{top:15px;left:15px;font-size:9px}.real-state-label{left:15px;bottom:15px;font-size:11px}.sun-side-label{font-size:11px;left:8px;right:8px;bottom:15px}.sun-real-caption{font-size:11px;padding:13px 16px}.real-care .care-story-copy{padding:22px}.real-care .care-illustration-note{font-size:11px}}
@media(prefers-reduced-motion:reduce){.real-transition,.real-after-label{opacity:1}.real-before-label{opacity:0}}
/* Application sequence: before, dab/adhere, spread/peel, care result. */
.application-frame{opacity:0;z-index:1}.care-playing .application-1{animation:apply-first 4.8s ease-in-out both}.care-playing .application-2{animation:apply-second 4.8s ease-in-out both}.care-paused *{animation-play-state:paused!important}
.real-using-label{opacity:0}.care-playing .real-using-label{animation:use-label 4.8s both}.care-complete .real-using-label{opacity:0}
@keyframes apply-first{0%,8%{opacity:0}16%,31%{opacity:1}43%,100%{opacity:0}}
@keyframes apply-second{0%,31%{opacity:0}43%,57%{opacity:1}72%,100%{opacity:0}}
@keyframes real-care-fade{0%,60%{opacity:0}94%,100%{opacity:1}}
@keyframes real-label-before{0%,8%{opacity:1}16%,100%{opacity:0}}
@keyframes use-label{0%,8%{opacity:0}16%,60%{opacity:1}72%,100%{opacity:0}}
@keyframes real-label-after{0%,60%{opacity:0}72%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.application-frame,.real-using-label{opacity:0!important}}
@media(max-width:450px){.real-media-sun .real-sprite{transform:translateX(calc(-25% - 25px))}.real-media-sun .sprite-after{transform:translateX(calc(-75% - 25px))}}