/* Main and library layout follows the reference HCP portal. */
html{scroll-padding-top:90px}.site-header{position:fixed;inset:0 0 auto;z-index:30;height:80px;padding:0;border-bottom:0;background:linear-gradient(#0005,transparent);color:#151719;isolation:isolate;transition:color .5s ease,box-shadow .5s ease;display:block}.header-inner{height:100%;max-width:1200px;margin:auto;display:flex;align-items:center;gap:28px}.site-header .brand{width:210px;display:block;flex-shrink:0}.site-header .brand img{width:190px;height:auto;filter:none;transition:filter .5s ease}.site-header nav{margin-left:auto;height:100%;gap:0;font-size:16px;font-weight:500}.site-header nav a{height:auto;display:block;padding:25px 0;letter-spacing:-.5px}.site-header nav a:after{display:none}.nav-source{position:relative;height:100%;display:flex;align-items:center;gap:12px;margin-right:40px}.nav-source>button{font-size:17px;padding:0 4px}.source-menu{position:absolute;left:50%;right:auto;top:80px;background:#fff;color:#151719;width:460px;display:none;grid-template-columns:1fr 1fr;gap:20px;padding:32px;box-shadow:0 8px 25px #0001;border-top:1px solid #e8eaec}.source-menu b{font-size:13px;letter-spacing:.8px;display:block;padding-bottom:15px}.site-header .source-menu a{font-size:13px;padding:8px 0;letter-spacing:.2px}.source-menu a:hover{color:var(--blue)}.header-upload{display:flex;align-items:center;gap:7px;font-size:12px;white-space:nowrap;margin-left:24px;padding:10px 0}.header-upload svg{width:23px;height:23px}.site-header::before{content:'';position:absolute;inset:0;background:white;opacity:1;z-index:-1;transition:opacity .5s ease}.site-header.is-interacting{box-shadow:0 1px 0 #00000008}body.home-top .site-header{color:white}body.home-top .site-header::before{opacity:0}body.home-top .site-header .brand img{filter:brightness(0) invert(1)}body.home-top .site-header.is-interacting{color:#151719}body.home-top .site-header.is-interacting::before{opacity:1}body.home-top .site-header.is-interacting .brand img{filter:none}

#site-main{max-width:none;margin:0;padding:0}.main-visual{position:relative;width:100%;aspect-ratio:auto;height:min(56.25vw,100svh);min-height:min(360px,100svh);max-height:100svh;background:#111;overflow:hidden}.main-visual video{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}.film-shade{position:absolute;inset:20% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.35) 48%,rgba(0,0,0,.68));pointer-events:none}.film-caption{position:absolute;left:max(5%,calc((100% - 1200px)/2));bottom:110px;color:white;max-width:60%;text-shadow:0 1px 8px #000a}.film-caption>span{font-size:11px;letter-spacing:2px}.film-caption p{margin:8px 0;font-size:18px;font-weight:500}.film-caption button{padding:0;font-size:12px;border-bottom:1px solid #ffffff80;line-height:2}.film-controls{text-shadow:0 1px 6px #000a;position:absolute;right:max(5%,calc((100% - 1200px)/2));bottom:115px;display:flex;align-items:center;color:white;gap:14px;font-size:12px}.film-controls button{color:inherit;min-width:26px;height:34px;padding:0;font-size:18px}.film-controls #film-sound{font-size:9px;letter-spacing:1px;min-width:72px;border-left:1px solid #ffffff60;padding-left:16px;margin-left:5px}.film-dots{position:absolute;bottom:55px;left:0;right:0;display:flex;justify-content:center;gap:11px}.film-dots button{padding:7px;position:relative;width:16px;height:16px}.film-dots button:after{content:'';position:absolute;inset:4px;border:1px solid #fff;border-radius:50%;background:transparent}.film-dots button[aria-current=true]:after{background:white}
.main-source,.product-films{max-width:1200px;margin:auto;padding:125px 0 135px}.main-source h2,.product-films h2{font-size:40px;font-weight:500;letter-spacing:-1.6px;line-height:1.2;margin:0 0 18px}.main-source>p,.product-films>p{font-size:16px;color:#868b8f;margin:0 0 55px}.brand-doors{display:grid;grid-template-columns:1fr 1fr;gap:30px}.brand-door{height:400px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:transform .2s}.brand-door:hover{transform:translateY(-4px)}.skin-door{background:#dbe7ed}.skin-door .door-product{position:absolute;width:280px;height:320px;object-fit:contain;right:0;bottom:0;mix-blend-mode:multiply;opacity:.7}.skin-door .door-logo{filter:brightness(0);width:280px;height:auto;z-index:1}.brand-door>span{position:absolute;left:35px;bottom:30px;font-size:14px;letter-spacing:.6px;z-index:1}.brand-door small{display:block;font-size:11px;margin-top:6px;letter-spacing:.7px;color:#677983}.group-door{background:#18232b;color:white}.group-door>img{width:280px;filter:brightness(0) invert(1)}.group-door small{color:#c0c8cc}.product-films{padding:75px 0 130px;border-top:1px solid #e6e6e6}.films-heading{display:flex;align-items:center;justify-content:space-between}.films-heading a{font-size:13px;color:#6a747c}.home-films{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:35px 25px}.home-film{padding:0;text-align:left;display:block;min-width:0}.home-film img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#e8ecee}.home-film span{display:block;font-size:14px;line-height:1.65;margin-top:13px}.home-film:hover span{color:var(--blue)}
#library-page{padding-top:80px}.sub-visual{height:240px;background:#e5edf2;position:relative;overflow:hidden}.sub-visual-inner{max-width:1200px;height:100%;margin:auto;position:relative;display:flex;align-items:center}.sub-visual-inner>span{position:absolute;left:0;top:20px;font-size:13px;color:#8294a0}.sub-logo{width:380px;filter:brightness(0)}.sub-product{position:absolute;right:100px;top:-70px;width:330px;height:350px;object-fit:contain;mix-blend-mode:multiply;transform:rotate(-10deg);opacity:.9}.breadcrumb{max-width:1200px;margin:30px auto 55px;color:#8a8f92;font-size:12px}#library-page .library{max-width:1200px;margin:auto;padding-bottom:100px}.section-title{display:block;text-align:center;margin:0 0 38px}.section-title h2{font-size:40px;font-weight:500;letter-spacing:-1.6px;margin:0}.section-title p{font-size:15px;color:#92979b;margin:10px 0}.tabs{border:0;max-width:700px;margin:0 auto 45px;grid-template-columns:repeat(3,1fr)}.tabs button{font-size:18px;text-align:center;border:0;padding:14px 20px;border-bottom:1px solid #e0e3e5}.tabs button span{display:none}.tabs button[aria-selected=true]{background:#fff;color:var(--blue);border-bottom:2px solid var(--blue)}.tabs b{float:none;border:0;font-size:10px;position:static;color:#979da1;vertical-align:middle;margin-left:5px;min-width:0;padding:0}.tabs button[aria-selected=true] b{color:var(--blue)}.toolbar{margin:0 0 22px}.toolbar select{border-color:#e1e4e6;font-size:13px;min-width:100px}.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:70px 26px}.card-image.video{aspect-ratio:16/9}.card:first-child .card-image{border-radius:35px 0 35px 0}.card-meta{font-size:12px;margin:18px 0 10px}.card-title{font-size:17px;font-weight:400;min-height:54px}.card-channel{font-size:11px;margin-top:10px}.card-bottom{margin-top:16px}.card-bottom span{font-size:12px}.channel-tools{display:flex;align-items:center;gap:18px;font-size:12px;color:#7c858c;margin:0 0 18px}.channel-tools button{font-size:12px;padding:0;color:var(--blue);margin-left:auto}.channel-tools a{color:#6c777f;font-size:12px}.list-bar{border:0;border-bottom:1px solid #e2e4e6;margin-bottom:28px;padding:8px 0 20px}.pagination{margin-top:70px}
@media(max-width:1300px){.header-inner,.main-source,.product-films,.sub-visual-inner,#library-page .library,.breadcrumb{width:90%}.brand-door{height:350px}.sub-product{right:20px}.main-source,.product-films{padding-top:90px;padding-bottom:90px}}
@media(max-width:900px){.site-header .brand{width:160px}.site-header .brand img{width:150px}.site-header nav{font-size:14px}.header-upload{margin-left:15px}.main-visual{min-height:min(380px,100svh)}.main-source h2,.product-films h2{font-size:32px}.brand-door{height:300px}.skin-door .door-logo,.group-door>img{width:210px}.skin-door .door-product{width:230px}.home-films{grid-template-columns:repeat(3,minmax(0,1fr))}.film-caption{bottom:115px}.film-caption p{font-size:14px}.film-controls{bottom:65px}.film-dots{bottom:65px;left:5%;right:auto;gap:5px}.sub-logo{width:270px}.sub-product{width:250px;right:-40px}.card-title{font-size:15px}.grid{gap:50px 20px}.channel-tools{flex-wrap:wrap}.channel-tools span{flex-basis:100%}.channel-tools button{margin-left:0}}
@media(max-width:600px){.site-header,.header-inner{height:70px}.header-inner{gap:10px}.site-header .brand{width:130px}.site-header .brand img{width:125px}.site-header nav{display:block;font-size:12px}.site-header nav a{display:block;padding:23px 0;letter-spacing:-.5px}.nav-source{gap:4px}.source-menu{top:70px;right:-49px;width:calc(100vw - 32px);max-width:370px;padding:23px 19px;gap:14px}.header-upload{margin-left:5px;padding:8px 0}.header-upload span{display:none}.header-upload svg{width:20px}.site-header .source-menu a{padding:8px 0;font-size:12px}.source-menu b{font-size:11px}.main-visual{aspect-ratio:auto;height:68svh;min-height:380px;max-height:620px}.main-visual video{object-fit:cover;object-position:center}.film-caption{left:5%;bottom:78px;max-width:85%}.film-caption>span{font-size:9px}.film-caption p{font-size:13px}.film-caption button{font-size:11px}.film-controls{gap:9px;bottom:52px}.film-controls #film-sound{min-width:65px;padding-left:10px;font-size:8px}.film-dots{bottom:26px;gap:1px}.film-dots button{width:12px;height:12px;padding:6px}.film-dots button:after{inset:3px}.main-source,.product-films{padding:60px 0}.main-source h2,.product-films h2{font-size:27px;letter-spacing:-.9px}.main-source>p,.product-films>p{font-size:12px;margin-bottom:30px}.brand-doors{grid-template-columns:1fr;gap:18px}.brand-door{height:270px}.brand-door>span{left:24px;bottom:23px;font-size:12px}.brand-door small{font-size:10px}.home-films{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 14px}.home-film span{font-size:12px;margin-top:9px}.films-heading a{font-size:10px}#library-page{padding-top:70px}.sub-visual{height:180px}.sub-logo{width:215px;z-index:1}.sub-product{width:200px;height:240px;right:-60px;top:-10px;opacity:.5}.sub-visual-inner>span{font-size:10px;top:17px}.breadcrumb{font-size:9px;margin:22px auto 35px}.breadcrumb span{margin:0 6px}.section-title h2{font-size:29px}.section-title p{font-size:12px}.section-title{margin-bottom:25px}.tabs{margin-bottom:30px}.tabs button{font-size:14px;padding:12px 7px}.tabs b{font-size:9px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:35px 14px}.card:first-child .card-image{border-radius:22px 0 22px 0}.card-title{font-size:12px;min-height:39px}.card-meta{font-size:9px;margin:12px 0 8px}.card-bottom span,.card-channel{font-size:9px}.card-bottom{margin-top:11px}.channel-tools{font-size:10px;gap:12px}.channel-tools button,.channel-tools a{font-size:10px}.list-bar{padding-bottom:15px}.pagination{margin-top:45px}}

.source-menu{display:grid;opacity:0;visibility:hidden;pointer-events:none;transform:translate(calc(var(--source-menu-x,-50%) + var(--source-menu-shift,0px)),-6px);transition:opacity .24s ease,transform .24s ease,visibility 0s .24s}.nav-source.open .source-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(calc(var(--source-menu-x,-50%) + var(--source-menu-shift,0px)),0);transition:opacity .24s ease,transform .24s ease,visibility 0s}
@media(max-width:600px){.film-dots{bottom:94px}.film-caption{bottom:146px}}
.corporate-footer #back-top{position:fixed;top:auto;right:28px;bottom:28px;z-index:20;width:58px;height:58px;border-radius:50%;background:#161a1d;color:white;display:flex;align-items:center;justify-content:center;font-size:10px;letter-spacing:.4px;box-shadow:0 3px 15px #0001;margin:0}
@media(max-width:600px){.corporate-footer #back-top{width:43px;height:43px;right:16px;bottom:16px;font-size:9px}}

/* Official channels and upload account access. */
.header-inner{gap:24px}.site-header nav{gap:28px}.channel-nav{display:flex;align-items:center;gap:22px}.site-header .channel-nav a{font-size:12px;letter-spacing:0;white-space:nowrap}.header-upload{margin-left:0}.header-account{font-size:12px;white-space:nowrap;padding:10px 0}.header-account:hover,.channel-nav a:hover{color:var(--blue)}
#login{width:440px}#login h2{font-size:26px;font-weight:500;margin:8px 0}#login-form{display:grid;gap:18px}#login-form label{display:grid;gap:7px;font-size:13px}#login-form input{width:100%;border:1px solid #d4d9dd;padding:11px 12px;background:white;font-size:14px}#login-error{margin:0;color:#b63838;font-size:13px;min-height:0}#login-error:empty{display:none}
@media(max-width:1100px){.session-user{display:none}html{scroll-padding-top:110px}.site-header{height:100px}.header-inner{height:100%;position:relative;display:grid;grid-template-columns:minmax(140px,1fr) auto auto auto;grid-template-rows:65px 35px;gap:0 18px}.site-header nav{display:contents}.site-header .brand{grid-column:1;grid-row:1;width:160px}.site-header .brand img{width:150px}.nav-source{grid-column:2;grid-row:1;height:65px;margin-right:32px}.header-upload{grid-column:3;grid-row:1}.header-account{grid-column:4;grid-row:1}.channel-nav{grid-column:1/-1;grid-row:2;justify-content:flex-end;gap:26px;height:35px;border-top:1px solid #b2b8bd33}.site-header .channel-nav a{padding:8px 0;font-size:11px}.source-menu{top:100px;width:400px}#library-page{padding-top:100px}}
@media(max-width:600px){html{scroll-padding-top:106px}.site-header{height:96px}.header-inner{height:100%;grid-template-columns:minmax(90px,1fr) auto auto auto;grid-template-rows:56px 40px;gap:0 8px}.site-header .brand{width:105px}.site-header .brand img{width:100px}.nav-source{height:56px;gap:2px;font-size:11px;position:static;margin-right:8px}.site-header .nav-source>a{padding:17px 0;letter-spacing:-.5px}.nav-source>button{font-size:14px;padding:0 2px}.header-upload{margin:0}.header-upload svg{width:19px;height:19px}.header-account{font-size:10px}.session-user{display:none}.channel-nav{height:40px;justify-content:center;gap:16px}.site-header .channel-nav a{font-size:10px;padding:10px 0}.source-menu{--source-menu-x:0%;top:96px;left:0;right:auto;width:100%;max-width:none;padding:23px 19px}#library-page{padding-top:96px}#login h2{font-size:23px}}

.source-menu a[aria-current=page],.nav-source>a[aria-current=location]{color:var(--blue)}.breadcrumb .crumb-brand{margin:0}.sub-visual.group-banner{background:#e8ecef}.group-banner .sub-logo{width:330px}.film-controls button{min-width:34px;height:38px}.film-dots button:focus-visible{outline-color:white}.film-caption button:hover{border-color:white}.home-film[aria-current=true] img{outline:2px solid var(--blue);outline-offset:3px}
@media(max-width:600px){.group-banner .sub-logo{width:240px}.film-controls{gap:7px}.film-controls button{min-width:30px}.film-dots{gap:1px}.film-dots button{width:20px;height:24px;padding:10px}.film-dots button:after{inset:8px 6px}.film-dots{bottom:86px}}
@media(max-width:600px) and (max-height:500px){.film-caption{bottom:110px}.film-dots{bottom:68px}.film-controls{bottom:26px}}
@media(prefers-reduced-motion:reduce){.site-header,.site-header::before,.site-header .brand img,.source-menu{transition:none!important}}

html{scrollbar-gutter:stable}body:has(dialog[open]){overflow:hidden}

@media(max-width:600px){.channel-nav{gap:10px;justify-content:space-between}.channel-word{display:none}}
@media(min-width:1101px) and (max-width:1300px){.session-user{display:none}.channel-nav{gap:16px}.site-header nav{gap:20px}.header-inner{gap:18px}}

/* SkinCeuticals leads the portal; corporate identity remains in the footer. */
.site-header .brand{display:flex;align-items:center;gap:16px;width:430px;max-width:100%;color:inherit}.site-header .brand img{width:235px;filter:brightness(0);flex-shrink:0}.brand-claim{display:flex;align-items:center;gap:9px;border-left:1px solid currentColor;padding-left:15px}.site-header .brand .brand-rank{display:flex;align-items:baseline;gap:2px;font-family:Arial,sans-serif;font-size:16px;line-height:1;letter-spacing:-1px}.brand-rank b{font-size:44px;font-weight:400}.site-header .brand .brand-claim-text{font-family:Arial,sans-serif;font-size:11px;font-weight:700;line-height:1.15;letter-spacing:0;white-space:nowrap}.header-inner{gap:28px}.site-header nav{margin-left:auto}.source-menu{z-index:1}
body.home-top .site-header.is-interacting .brand img{filter:brightness(0)}
@media(min-width:1101px) and (max-width:1300px){.site-header .brand{width:360px;gap:12px}.site-header .brand img{width:195px}.brand-claim{padding-left:12px;gap:7px}.site-header .brand .brand-claim-text{font-size:10px}.brand-rank b{font-size:36px}.header-inner{gap:18px}.nav-source{margin-right:28px}}
@media(max-width:1100px){.header-inner{grid-template-columns:minmax(0,1fr) auto;gap:0 24px}.site-header .brand{grid-column:1;grid-row:1;width:400px;gap:14px}.site-header .brand img{width:215px}.nav-source{grid-column:2;grid-row:1;margin-right:32px}.channel-nav{grid-column:1/-1}}
@media(max-width:900px) and (min-width:601px){.site-header .brand{width:335px;gap:11px}.site-header .brand img{width:180px}.brand-claim{padding-left:11px;gap:7px}.site-header .brand .brand-claim-text{font-size:9px}.brand-rank b{font-size:34px}}
@media(max-width:600px){html{scroll-padding-top:134px}.site-header{height:124px}.header-inner{grid-template-rows:84px 40px;gap:0 12px}.site-header .brand{width:190px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}.site-header .brand img{width:165px;max-width:100%}.brand-claim{border-left:0;padding-left:0;gap:6px}.site-header .brand .brand-rank{font-size:10px}.brand-rank b{font-size:25px}.site-header .brand .brand-claim-text{font-size:8px;line-height:1.15}.nav-source{height:84px;margin-right:0}.source-menu{top:124px}#library-page{padding-top:124px}}

.site-header .brand-symbol{display:block;width:235px;aspect-ratio:9.4;overflow:hidden;flex-shrink:0}.site-header .brand-symbol img{width:100%}
@media(min-width:1101px) and (max-width:1300px){.site-header .brand-symbol{width:195px}}
@media(max-width:1100px){.site-header .brand-symbol{width:215px}}
@media(max-width:900px) and (min-width:601px){.site-header .brand-symbol{width:180px}}
@media(max-width:600px){.site-header .brand-symbol{width:165px;max-width:100%}}

/* The disclosure icon shares the label's visual center, independent of font glyphs. */
.nav-source{gap:4px}.site-header .nav-source>a{font-size:14px;font-weight:600;line-height:1.25;white-space:nowrap;letter-spacing:0}.nav-source>button{display:inline-flex;align-items:center;justify-content:center;width:28px;height:44px;padding:0;flex-shrink:0;border-radius:3px;line-height:1}.nav-source>button svg{display:block;width:12px;height:8px;transition:transform .24s ease}.nav-source.open>button svg{transform:rotate(180deg)}.nav-source>button:focus-visible{outline-offset:1px}.source-menu>div+div{border-left:1px solid #e5eaed;padding-left:20px}.source-menu b{font-size:12px;letter-spacing:1px}.site-header .source-menu a{line-height:1.5;padding:9px 0}
@media(min-width:1101px){.site-header nav{gap:24px}.nav-source{margin-right:16px}.channel-nav{position:relative;padding-left:20px}.channel-nav::before{content:'';position:absolute;left:0;top:50%;height:18px;border-left:1px solid currentColor;opacity:.22;transform:translateY(-50%)}}
@media(max-width:600px){.site-header .nav-source>a{font-size:11px}.nav-source{gap:2px}.nav-source>button{width:24px}.nav-source>button svg{width:10px;height:7px}.source-menu>div+div{padding-left:14px}.source-menu b{font-size:10px;letter-spacing:.5px}}
@media(prefers-reduced-motion:reduce){.nav-source>button svg{transition:none}}

/* A restrained marker highlight gives the home section titles a shared accent. */
.main-source h2,.product-films h2{width:fit-content;position:relative;isolation:isolate}.main-source h2::before,.product-films h2::before{content:'';position:absolute;z-index:-1;left:-.06em;right:-.12em;bottom:.02em;height:.32em;background:#ccebf5;border-radius:2px}.main-source>p{max-width:680px;line-height:1.8;word-break:keep-all;color:#74818a}
@media(max-width:600px){.main-source>p{max-width:320px;line-height:1.85}}

/* Keep portrait PRO-TALK fully visible inside its padded 16:9 frame. */
.main-visual #main-film[data-fit="contain"]{object-fit:contain;background:#080808}
/* Center the playlist strip; retain scrolling when the viewport is narrow. */
.main-visual .film-dots{left:50%;right:auto;bottom:20px;width:max-content;max-width:calc(100% - 240px);transform:translateX(-50%);justify-content:flex-start;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}
.main-visual .film-dots::-webkit-scrollbar{display:none}
.main-visual .film-dots button{flex-shrink:0}
@media(max-width:600px){.main-visual .film-dots{bottom:16px;max-width:calc(100% - 180px)}}
.home-film[data-film] img{object-fit:contain;background:#080808}

/* Native portrait sources stay inside a centered 16:9 frame on every viewport. */
.main-visual #main-film[data-fit="contain"]{width:var(--film-frame-width,100%);height:var(--film-frame-height,100%);inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);object-fit:contain;background:#080808}
.film-controls .film-quality{font-size:11px;line-height:1.4;white-space:nowrap;letter-spacing:.2px;padding:3px 6px;border:1px solid #ffffff55;border-radius:3px;color:inherit}