/* /health/stm-skin - Framer redo (BRIEF 1218803133929418). Measured against
   02_page renders/31 health_stm-skin and 13_element breakdown/39 at
   1440/810/390. The render keeps most of this product page on WHITE: film
   hero (with its line of copy, as rendered), a white intro, the Light Buy
   strip, the dark skin Deck, three photo bands, a white heading, the dark
   Buy band, a white disclaimer, then the Footer CTA. Page-only rules. */

/* ---- Film hero + its copy (Framer's "Copy" frame). */
.jifu-skin .jifu-prod-hero { height: 764px; }
.jifu-skin .jifu-prod-hero .fr-film { --fr-film-inset: 48px; }
.jifu-skin .jifu-prod-hero__scrim {
  /* Pre-promote gate 2026-09-28: the poster frame (PR 737) put bright skin
     tones under the lower-left copy (0.2% of glyph pixels under 3.0). The
     band under the copy (~70-90% down) is deepened; the top of the film is
     unchanged. */
  background: linear-gradient(180deg, rgba(8, 8, 8, .3) 0%, rgba(8, 8, 8, 0) 30%, rgba(8, 8, 8, .6) 62%, rgba(8, 8, 8, .78) 100%);
}
.jifu-skin-hero__copy {
  position: absolute; left: max(128px, calc(50% - 592px)); bottom: 88px; width: 482px; margin: 0;
  font-family: var(--jifu-font-display); font-weight: 700; font-size: 19.73px; line-height: 1.45;
  color: rgba(255, 255, 255, .86);
}

/* ---- Shared type for this page (Framer h-lg / h-md / lede / body). */
.jifu-skin-rule { display: block; width: 56px; height: 2px; background: var(--jifu-prod-accent); }
.jifu-skin-h {
  margin-top: 28px; font-family: var(--jifu-font-display); font-weight: 700; font-size: 49.75px;
  line-height: 1.04; letter-spacing: -0.015em;
}
.jifu-skin-h--md { font-size: 32.47px; }
/* AA (2026-09-24): 42% ink measured 2.67:1 on white; ink-muted clears the 3:1 large-type floor with room. */
.jifu-skin-h__soft { color: var(--jifu-ink-muted, rgba(25, 25, 25, .66)); }
.jifu-skin-h--light { color: var(--jifu-white, rgb(255, 255, 255)); }
.jifu-skin-h--light .jifu-skin-h__soft { color: rgba(255, 255, 255, .55); }
.jifu-skin-lede { font-family: var(--jifu-font-display); font-weight: 700; font-size: 19.73px; line-height: 1.45; color: rgba(255, 255, 255, .86); }
.jifu-skin-p { font-family: var(--jifu-font-body); font-size: 15.01px; line-height: 1.55; color: var(--jifu-ink, rgb(25, 25, 25)); }
.jifu-skin-p--light { color: rgba(255, 255, 255, .86); }
.jifu-skin-p--strong { font-weight: 700; }

/* ---- Intro (white): packshot left, the story right. */
.jifu-skin-intro { background: var(--jifu-white, rgb(255, 255, 255)); padding-block: 129.6px 153.8px; }
.jifu-skin-inner { max-width: 1440px; margin-inline: auto; padding-inline: 128px; }
.jifu-skin-intro__grid { display: grid; grid-template-columns: 500.4px minmax(0, 611.6px); column-gap: 72px; }
.jifu-skin-intro__media { align-self: center; }
.jifu-skin-intro__media img { width: 100%; aspect-ratio: 500.4 / 379.9; object-fit: contain; }
.jifu-skin-intro .jifu-skin-h { color: var(--jifu-ink, rgb(25, 25, 25)); }
.jifu-skin-intro .jifu-skin-h + .jifu-skin-p { margin-top: 45.4px; }
.jifu-skin-intro .jifu-skin-p + .jifu-skin-p { margin-top: 24.3px; }
.jifu-skin-list { list-style: none; margin: 54.6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12.8px; }
.jifu-skin-list li { position: relative; padding-left: 18px; font-family: var(--jifu-font-body); font-weight: 500; font-size: 15.01px; line-height: 1.55; color: var(--jifu-ink, rgb(25, 25, 25)); }
.jifu-skin-list li::before { content: ""; position: absolute; left: 0; top: 9.93px; width: 6px; height: 6px; border-radius: 999px; background: var(--jifu-prod-accent); }
.jifu-skin-list + .jifu-skin-p { margin-top: 34.9px; }
.jifu-skin-intro hr { margin: 36.7px 0 0; border: 0; border-top: 1px solid var(--jifu-rule, rgba(25, 25, 25, .16)); }
.jifu-skin-intro hr + .jifu-skin-p { margin-top: 33px; }

/* ---- The dark skin Deck, tabs below. */
/* The Deck's own tab row (tabs_pad) gives the band its 81.7px under the slide. */
.jifu-skin-slider { background: var(--jifu-midnight-well, rgb(8, 8, 8)); }

/* ---- Photo bands ("bleed"). */
.jifu-skin-bleed { position: relative; isolation: isolate; min-height: 720px; background: rgb(8, 8, 8); }
.jifu-skin-bleed__media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.jifu-skin-bleed__scrim { position: absolute; inset: 0; z-index: -1; }
.jifu-skin-bleed--motion .jifu-skin-bleed__scrim { background: linear-gradient(90deg, rgba(8, 8, 8, .72) 0%, rgba(8, 8, 8, .35) 46%, rgba(8, 8, 8, 0) 78%); }
.jifu-skin-bleed--science .jifu-skin-bleed__scrim { background: linear-gradient(90deg, rgba(8, 8, 8, 0) 0%, rgba(8, 8, 8, 0) 30%, rgba(8, 8, 8, .72) 58%, rgba(8, 8, 8, .9) 100%); }
.jifu-skin-bleed--timeless .jifu-skin-bleed__scrim { background: linear-gradient(180deg, rgba(8, 8, 8, .28) 0%, rgba(8, 8, 8, .34) 40%, rgba(8, 8, 8, .7) 56%, rgba(8, 8, 8, .92) 100%); }
.jifu-skin-bleed__inner { max-width: 1440px; margin-inline: auto; }
.jifu-skin-bleed--motion .jifu-skin-bleed__inner { padding: 245.8px 0 0 478.9px; }
.jifu-skin-bleed--science .jifu-skin-bleed__inner { padding: 280px 128px 0 627.2px; }
.jifu-skin-bleed--timeless .jifu-skin-bleed__inner { padding: 411.4px 0 0 478.9px; }
.jifu-skin-bleed__copy { max-width: 482.2px; }
.jifu-skin-bleed--science .jifu-skin-bleed__copy { max-width: 684.8px; }
.jifu-skin-bleed .jifu-skin-lede { margin-top: 31.9px; }
.jifu-skin-bleed--timeless .jifu-skin-lede { margin-top: 32px; }
.jifu-skin-bleed--science .jifu-skin-h + .jifu-skin-p { margin-top: 31px; }
.jifu-skin-bleed--science .jifu-skin-p + .jifu-skin-p { margin-top: 21.4px; }
.jifu-skin-bleed--science .jifu-skin-p + .jifu-skin-p + .jifu-skin-p { margin-top: 24.2px; }

/* ---- White heading band. */
.jifu-skin-routine { background: var(--jifu-white, rgb(255, 255, 255)); padding: 129.6px 128px 141.6px; text-align: center; }
.jifu-skin-routine .jifu-skin-h { margin: 0 auto; max-width: 1184px; color: var(--jifu-ink, rgb(25, 25, 25)); }

/* ---- Dark Buy band + white disclaimer. */
.jifu-skin-buy { background: var(--jifu-inverse-ground, rgb(15, 15, 15)); min-height: 119.3px; display: flex; justify-content: center; align-items: flex-start; }
.jifu-skin-buy__btn {
  display: inline-flex; align-items: center; min-height: 55.3px; padding: 16px 38.4px; border-radius: 999px;
  background: var(--jifu-parchment, rgb(244, 241, 234)); color: var(--jifu-ink, rgb(25, 25, 25));
  font-family: var(--jifu-font-body); font-weight: 600; font-size: 13.5px; line-height: 1.55;
}
@media (hover: hover) { .jifu-skin-buy__btn:hover { background: var(--jifu-prod-accent); } }
.jifu-skin-disclaimer { background: var(--jifu-white, rgb(255, 255, 255)); min-height: 181px; padding-block: 49px 40px; }
.jifu-skin-disclaimer p { max-width: 619.8px; font-family: var(--jifu-font-body); font-size: 10.8px; line-height: 1.5; color: var(--jifu-ink-muted, rgba(25, 25, 25, .66)); }

/* ---- Tablet (810-1439.98). */
@media (max-width: 1439.98px) {
  .jifu-skin .jifu-prod-hero { height: auto; padding-bottom: 136px; }
  .jifu-skin .jifu-prod-hero .fr-film { --fr-film-inset: 24px; }
  .jifu-skin .jifu-prod-hero__scrim { aspect-ratio: 1.7778; }
  .jifu-skin-hero__copy { left: 41px; bottom: 57px; width: 434px; font-size: 17.73px; }
  .jifu-skin-h { font-size: 38.98px; }
  .jifu-skin-h--md { font-size: 27.37px; }
  .jifu-skin-lede { font-size: 17.74px; }
  .jifu-skin-p, .jifu-skin-list li { font-size: 14.16px; }
  .jifu-skin-intro { padding-block: 72.9px 117.8px; }
  .jifu-skin-inner { padding-inline: 40.5px; }
  .jifu-skin-intro__grid { grid-template-columns: minmax(0, 1fr); }
  .jifu-skin-intro__media img { aspect-ratio: 729 / 553.4; }
  .jifu-skin-intro__copy { margin-top: 40.5px; }
  .jifu-skin-intro .jifu-skin-p { max-width: 645.8px; }
  .jifu-skin-intro .jifu-skin-h + .jifu-skin-p { margin-top: 41.1px; }
  .jifu-skin-intro .jifu-skin-p + .jifu-skin-p { margin-top: 44.9px; }
  .jifu-skin-list { margin-top: 28.7px; gap: 12.4px; }
  .jifu-skin-list li::before { top: 8.97px; }
  .jifu-skin-list + .jifu-skin-p { margin-top: 34.4px; max-width: none; }
  .jifu-skin-bleed--motion .jifu-skin-bleed__inner { padding: 261.4px 0 0 188.2px; }
  .jifu-skin-bleed--science .jifu-skin-bleed__inner { padding: 336.3px 82.1px 0; }
  .jifu-skin-bleed--timeless .jifu-skin-bleed__inner { padding: 474.2px 0 0 188.2px; }
  .jifu-skin-bleed__copy { max-width: 433.6px; }
  .jifu-skin-bleed--science .jifu-skin-bleed__copy { max-width: 645.8px; }
  .jifu-skin-bleed .jifu-skin-lede { margin-top: 29px; }
  .jifu-skin-bleed--timeless .jifu-skin-lede { margin-top: 29.1px; }
  .jifu-skin-bleed--science .jifu-skin-h + .jifu-skin-p { margin-top: 30.3px; }
  .jifu-skin-bleed--science .jifu-skin-p + .jifu-skin-p { margin-top: 20.4px; font-size: 15.01px; }
  .jifu-skin-bleed--science .jifu-skin-p + .jifu-skin-p + .jifu-skin-p { margin-top: 18.9px; font-size: 14.16px; }
  .jifu-skin-routine { padding: 72.9px 40.5px 81.9px; }
  .jifu-skin-disclaimer { padding-inline: 0; }
}

/* ---- Phone (<=809.98). */
@media (max-width: 809.98px) {
  .jifu-skin .jifu-prod-hero { padding-bottom: 197px; }
  .jifu-skin .jifu-prod-hero .fr-film { --fr-film-inset: 14px; }
  .jifu-skin-hero__copy { left: 20px; bottom: 40px; width: auto; right: 20px; font-size: 13.5px; }
  .jifu-skin-h { font-size: 25.75px; }
  .jifu-skin-h--md { font-size: 19.4px; }
  .jifu-skin-lede { font-size: 13.5px; }
  .jifu-skin-p, .jifu-skin-list li { font-size: 12.6px; }
  .jifu-skin-intro { padding-block: 72px 102.7px; }
  .jifu-skin-inner { padding-inline: 20px; }
  .jifu-skin-intro__media img { aspect-ratio: 350 / 265.7; }
  .jifu-skin-intro__copy { margin-top: 32px; }
  .jifu-skin-intro .jifu-skin-h + .jifu-skin-p { margin-top: 58.2px; }
  .jifu-skin-intro .jifu-skin-p + .jifu-skin-p { margin-top: 30.7px; }
  .jifu-skin-list { margin-top: 58.7px; gap: 13.4px; }
  .jifu-skin-list li::before { top: 7.8px; }
  .jifu-skin-list + .jifu-skin-p { margin-top: 35.4px; }
  .jifu-skin-intro hr { margin-top: 39.8px; }
  .jifu-skin-bleed--motion .jifu-skin-bleed__inner { padding: 258.6px 20px 0; }
  .jifu-skin-bleed--science .jifu-skin-bleed__inner { padding: 267.9px 20px 0; }
  .jifu-skin-bleed--timeless .jifu-skin-bleed__inner { padding: 503.7px 20px 0; }
  /* Dr. AQ's portrait sits at ~31% of the photo; the centred ~30%-wide phone
     crop showed only his shoulder (mobile review 2026-09-25). The top-down
     scrim keeps his face clear and sinks the photo's baked-in name plate
     under the copy. */
  .jifu-skin-bleed--science .jifu-skin-bleed__media { object-position: 22% 50%; }
  .jifu-skin-bleed--science .jifu-skin-bleed__scrim { background: linear-gradient(180deg, rgba(8, 8, 8, .1) 0%, rgba(8, 8, 8, .2) 30%, rgba(8, 8, 8, .84) 52%, rgba(8, 8, 8, .96) 76%, rgb(8, 8, 8) 100%); }
  .jifu-skin-bleed__copy, .jifu-skin-bleed--science .jifu-skin-bleed__copy { max-width: none; }
  .jifu-skin-bleed .jifu-skin-lede, .jifu-skin-bleed--timeless .jifu-skin-lede { margin-top: 39.5px; }
  .jifu-skin-bleed--science .jifu-skin-h + .jifu-skin-p { margin-top: 39.4px; }
  .jifu-skin-bleed--science .jifu-skin-p + .jifu-skin-p { margin-top: 46.3px; }
  .jifu-skin-bleed--science .jifu-skin-p + .jifu-skin-p + .jifu-skin-p { margin-top: 16.1px; font-size: 12.6px; }
  .jifu-skin-routine { padding: 72px 20px 128.2px; }
  .jifu-skin-buy__btn { font-size: 12.6px; }
  .jifu-skin-disclaimer { min-height: 217px; }
}

/* ---- STM SKIN slider (ASANA:1219471962831688): marketing's four shots
   replace the Deck's Framer backgrounds (template swaps the src). Each shot
   carries its product on the RIGHT half, so the Deck's separate product
   render is hidden at every width, and on desktop the copy of Serum, Cleanser
   and Day moves to the free LEFT half (Night already sits there): the same
   48.6111% step as the generated left 51.9444% -> 3.3333% of the Night slide.
   The slide is the size container, so 1cqw = 1% of its width. */
.jifu-skin-slider .fr-dk-skin-0-1,
.jifu-skin-slider .fr-dk-skin-1-1,
.jifu-skin-slider .fr-dk-skin-2-1,
.jifu-skin-slider .fr-dk-skin-3-1 { display: none; }
@media (min-width: 1440px) {
  .jifu-skin-slider .fr-dk-skin-0 > .fr-dk__i:not(img),
  .jifu-skin-slider .fr-dk-skin-1 > .fr-dk__i:not(img),
  .jifu-skin-slider .fr-dk-skin-2 > .fr-dk__i:not(img) { translate: -48.6111cqw 0; }
  /* WCAG AA (test_photo_contrast): the Night shot's bright horizon runs under
     the lower copy (36-50% of glyph pixels under 4.5 unscrimmed). A left
     scrim in the shot's own deep blue sits under the copy only. */
  .jifu-skin-slider .fr-dk-skin-3::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(0, 28, 52, .78) 0%, rgba(0, 28, 52, .7) 44%, rgba(0, 28, 52, 0) 60%);
  }
  .jifu-skin-slider .fr-dk-skin-3 > .fr-dk__i:not(img) { z-index: 2; }
}
/* Tablet + phone stack a slide: picture band on top, copy below. The shot is
   a landscape, so it fills only the picture band (the top half, where the
   product render stood), framed on its product, and fades into a ground
   sampled from the shot itself; the copy sits on that solid ground, never on
   the photo (this also retires the 2026-09-24 phone scrim the old Serum/Day
   backgrounds needed for AA). Cleanser keeps its dark copy on a light ground. */
@media (max-width: 1439.98px) {
  .jifu-skin-slider .fr-dk-skin-0-0,
  .jifu-skin-slider .fr-dk-skin-1-0,
  .jifu-skin-slider .fr-dk-skin-2-0,
  .jifu-skin-slider .fr-dk-skin-3-0 {
    height: 50%; object-fit: cover; object-position: 100% 50%;
    -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  }
  .jifu-skin-slider .fr-dk-skin-0 { background-color: rgb(0, 0, 0); }
  .jifu-skin-slider .fr-dk-skin-1 { background-color: rgb(227, 233, 238); }
  .jifu-skin-slider .fr-dk-skin-2 { background-color: rgb(8, 35, 65); }
  .jifu-skin-slider .fr-dk-skin-3 { background-color: rgb(0, 44, 81); }
}
@media (max-width: 809.98px) {
  .jifu-skin-slider .fr-dk-skin-0-0,
  .jifu-skin-slider .fr-dk-skin-1-0,
  .jifu-skin-slider .fr-dk-skin-2-0,
  .jifu-skin-slider .fr-dk-skin-3-0 { object-position: 96% 50%; }
}

/* ---- Bundle (ASANA:1219472280650441): the intro visual is the STM SKIN
   Bundle (all four products, the shop's own STM-SKIN-BUNDLE image) and is set larger - a
   560px column on desktop instead of a 500px box that the old render's
   whitespace shrank to ~200px of product. */
.jifu-skin-intro__grid { grid-template-columns: minmax(0, 560px) minmax(0, 552px); }
.jifu-skin-intro__media .jifu-skin-intro__bundle { aspect-ratio: 1 / 1; height: auto; object-fit: contain; }
@media (max-width: 1439.98px) {
  .jifu-skin-intro__grid { grid-template-columns: minmax(0, 1fr); }
  .jifu-skin-intro__media .jifu-skin-intro__bundle { max-width: 560px; margin-inline: auto; }
}

/* ---- Lifestyle band (ASANA:1219472047199770): marketing's 16x9 stone-bath
   shot. The woman sits centre-left of the frame, so on desktop the copy moves
   to the page's left edge (128px, as the intro) at a narrower measure, with a
   left scrim under it; the frame is held a little high so her head is never
   cropped on wide screens. */
@media (min-width: 1440px) {
  .jifu-skin-bleed--motion .jifu-skin-bleed__media { object-position: 50% 30%; }
  .jifu-skin-bleed--motion .jifu-skin-bleed__inner { padding: 245.8px 0 0 128px; }
  .jifu-skin-bleed--motion .jifu-skin-bleed__copy { max-width: 380px; }
  .jifu-skin-bleed--motion .jifu-skin-bleed__scrim { background: linear-gradient(90deg, rgba(8, 8, 8, .82) 0%, rgba(8, 8, 8, .7) 26%, rgba(8, 8, 8, .25) 38%, rgba(8, 8, 8, 0) 46%); }
}

/* ---- Copy never over the photo (ASANA:1219472280678751). Below desktop the
   two bands whose copy lay across a person - Dr. AQ (science: the copy ran
   over his arms and the photo's baked-in name plate at 810-1439, over his
   face at 390) and the lifestyle band - STACK: the photo as a full-width
   16:9 block, then the copy on the band's dark ground. */
@media (max-width: 1439.98px) {
  .jifu-skin-bleed--stack { min-height: 0; display: flex; flex-direction: column; }
  .jifu-skin-bleed--stack .jifu-skin-bleed__media {
    position: static; z-index: auto; display: block; width: 100%; height: auto;
    aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 50%;
  }
  .jifu-skin-bleed--stack .jifu-skin-bleed__scrim { display: none; }
  .jifu-skin-bleed--stack .jifu-skin-bleed__inner,
  .jifu-skin-bleed--motion.jifu-skin-bleed--stack .jifu-skin-bleed__inner,
  .jifu-skin-bleed--science.jifu-skin-bleed--stack .jifu-skin-bleed__inner { width: 100%; padding: 72.9px 82.1px 96px; }
  .jifu-skin-bleed--stack .jifu-skin-bleed__copy { max-width: 645.8px; }
}
@media (max-width: 809.98px) {
  .jifu-skin-bleed--stack .jifu-skin-bleed__inner,
  .jifu-skin-bleed--motion.jifu-skin-bleed--stack .jifu-skin-bleed__inner,
  .jifu-skin-bleed--science.jifu-skin-bleed--stack .jifu-skin-bleed__inner { padding: 48px 20px 72px; }
}

/* Film controls at Framer's per-page size (13_element breakdown Film props,
   same at every breakpoint); the shared product hero sets 44px / 17px. */
.jifu-skin .jifu-prod-hero .fr-film { --fr-film-icon-size: 22px; }