/* Shared product language: a white canvas, coloured chapters, polished metal. */
:root{--chapter-blue:#c4dceb;--chapter-mustard:#ddba53;--chapter-green:#c6d9c9;--chapter-pink:#efd1dd;--chapter-taupe:#b9aaa0;--scene-ease:cubic-bezier(.16,1,.3,1)}
html[data-oyster-page="home"] .proof{padding:0 26px 30px;max-width:1440px;margin:auto}
html[data-oyster-page="home"] .proof-panel{border:1px solid #ded8d3;border-radius:32px;background:#fff;padding:52px 0 38px;box-shadow:0 16px 55px #30262007;overflow:hidden}
html[data-oyster-page="home"] .proof-head h2{font-size:clamp(26px,3vw,38px);font-weight:600;letter-spacing:-.045em}
html[data-oyster-page="home"] .feat-in{border:1px solid #30262015;box-shadow:0 12px 44px #3026200b}
html[data-oyster-page="home"] .feat :is(h2 span,.fstat){color:#302620!important}
html[data-oyster-page="home"] .feat .feat-tag{background:#ffffff70!important;color:#302620!important;border:1px solid #30262015}
html[data-oyster-page="home"] .feat :is(p,.who){color:#51443c}
html[data-oyster-page="home"] .prompt-sec{background:var(--chapter-blue)!important;padding-block:100px;margin-block:40px}
/* Distinct product chapters. Screenshots retain their original product colours. */
html[data-oyster-page="retail-os"] .rhero{background:linear-gradient(180deg,#fff 0 48%,var(--chapter-blue) 48% 100%);border-radius:0 0 36px 36px;padding-bottom:140px}
html[data-oyster-page="retail-os"] .rheroshot{margin-bottom:-80px}
html[data-oyster-page="retail-os"] .rstat{padding-top:105px}
html[data-oyster-page="retail-os"] :is(.rqfig,.rcsfig){background:var(--chapter-blue)}
html[data-oyster-page="retail-os"] .sefeat[style*="background"]{background:var(--chapter-blue)!important}
html[data-oyster-page="retail-os"] .rcases{background:var(--chapter-taupe);padding-block:100px}
html[data-oyster-page="retail-os"] .rcases :is(.rcasecard,.rmod){background:#fff}
html[data-oyster-page="retail-os"] .rclose{background:var(--chapter-blue);border-radius:30px;max-width:1280px;margin:40px auto 80px}
html[data-oyster-page="skin-analysis"] .ehero{background:linear-gradient(180deg,#fff 0 52%,var(--chapter-mustard) 52% 100%);border-radius:0 0 36px 36px}
html[data-oyster-page="skin-analysis"] .sefeat[style*="background"]{background:var(--chapter-mustard)!important}
html[data-oyster-page="skin-analysis"] .odo{background:var(--chapter-taupe);margin-block:40px;padding-block:90px}
html[data-oyster-page="skin-analysis"] .eclose{background:var(--chapter-mustard);border-radius:30px;max-width:1280px;margin:40px auto 80px}
html[data-oyster-page="oyster-pay"] .pay-hero{background:linear-gradient(180deg,#fff 0 58%,var(--chapter-green) 58% 100%)}
html[data-oyster-page="oyster-pay"] :is(.pay-mint,.pay-close){background:var(--chapter-green)}
html[data-oyster-page="oyster-pay"] .pay-peach{background:var(--chapter-taupe)}
html[data-oyster-page="oyster-pay"] .pay-sand{background:#fff;border-block:1px solid #3026201a}
html[data-oyster-page="analytics"] :is(.sghero,.sglogos,.sgbig){background:#fff}
html[data-oyster-page="analytics"] .sgwild{background:var(--chapter-blue);padding-block:90px}
html[data-oyster-page="analytics"] .sgwildcard{background:#fff}
html[data-oyster-page="analytics"] .sgseries{background:var(--chapter-taupe);padding-block:90px}
html[data-oyster-page="analytics"] .sgclose{background:var(--chapter-blue);border-radius:30px;max-width:1280px;margin:40px auto 80px}
html[data-oyster-page="recommendations"] .wfeat{padding-block:90px}
html[data-oyster-page="recommendations"] .wbig{background:var(--chapter-mustard);padding-block:100px}
html[data-oyster-page="recommendations"] .wclose{background:var(--chapter-taupe);border-radius:30px;max-width:1280px;margin:40px auto 80px}
html[data-oyster-page="research"] .research-paper{background:var(--chapter-taupe);padding:clamp(24px,4vw,60px);gap:50px;border:0}
html[data-oyster-page="research"] .research-paper-cover{box-shadow:0 25px 50px #30262024;transform:rotate(-2deg)}
html[data-oyster-page="research"] .psec:last-child{border-top:1px solid #30262025;padding-top:70px}
/* Cinematic image entrances once per page; no scroll interception or layout shifts. */
.oy-scene{perspective:1400px}
.oy-scene-ready{opacity:0;transform:translateY(24px) scale(.975);transition:opacity .8s var(--scene-ease),transform .8s var(--scene-ease)}
.oy-scene-ready.oy-scene-seen{opacity:1;transform:none}
html .rv.oy-revealed{opacity:1;transform:none}
.oy-depth{transform:translateY(var(--scene-drift,0px));transition:transform .2s cubic-bezier(.2,.6,.3,1)}
html :is(.btn,.op-button,.di-cta):active{transform:translateY(0) scale(.98);transition-duration:80ms}
@view-transition{navigation:auto}
::view-transition-old(root){animation:chapter-out .16s cubic-bezier(.45,0,.15,1) both}
::view-transition-new(root){animation:chapter-in .4s var(--scene-ease) both}
@keyframes chapter-out{to{opacity:0}}
@keyframes chapter-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:760px){html[data-oyster-page="home"] .proof{padding-inline:14px}html[data-oyster-page="home"] .proof-panel{border-radius:24px;padding-block:36px}html[data-oyster-page="home"] .prompt-sec{padding-block:64px}html :is(.rclose,.eclose,.sgclose,.wclose){margin-inline:16px!important;border-radius:24px!important}.oy-scene-ready{transform:translateY(18px);transition-duration:.6s}.oy-depth{transform:none}}
@media(prefers-reduced-motion:reduce){.oy-scene-ready,html .rv{opacity:1!important;transform:none!important}.oy-depth{transform:none!important}::view-transition-old(root),::view-transition-new(root){animation:none}}
/* The same chapter system continues through integrations and specialist pages. */
html :is(.aacircle,.aavis,.fnvis,.wvis,.sgpvis,.wfvis){background:var(--chapter-blue);border:1px solid #30262012}
html :is(.aaclose,.fnclose,.wclose,.sgclose,.wfclose,.pr-close,.fcta){background:var(--chapter-taupe);border-radius:30px;max-width:1280px;margin:48px auto 80px}
html :is(.pillar.t-blush,.pillar.t-sage){background:var(--chapter-blue)}
html .pillar.t-ochre{background:var(--chapter-mustard)}
html[data-oyster-page="home"] .fcta{background:var(--chapter-taupe)}
@media(max-width:760px){html :is(.aaclose,.fnclose,.wfclose,.pr-close,.fcta){margin:32px 16px 56px;border-radius:24px}}