/* /health/gen3 - Framer redo (BRIEF 1218803133929418), a NIGHT product page.
   Linked by site_health_gen3.html only (the css/redesign/ per-page sheet
   convention). Measured against 02_page renders/26 health_gen3 and the
   13_element breakdown at 1440/810/390. Gen3's accent is its own pink,
   rgb(217, 74, 140) (the render's dominant accent, 32k px), with the deeper
   rgb(187, 47, 114) on rules/outlines; the GEN3 Deck keeps Framer's own
   papaya control accent (#FF7A45, rendered on its tabs). */

.jifu-prod--gen3 {
  --jifu-accent-gen3: rgb(217, 74, 140);
  --jifu-page-accent: var(--jifu-accent-gen3);
  --jifu-gen3-deep: rgb(187, 47, 114);
  --jifu-gen3-ground: rgb(13, 10, 12);
  --jifu-gen3-well: rgb(25, 25, 25);
  --jifu-gen3-soft: rgb(203, 189, 196);
  --jifu-gen3-muted: rgb(205, 192, 199);
  --jifu-gen3-origin: rgb(157, 143, 150);
  --jifu-gen3-lede: rgb(179, 165, 172);
  --jifu-gen3-dim: rgb(125, 112, 121);
}
.jifu-prod--gen3 .jifu-buy-strip--dark { background: var(--jifu-gen3-ground); }

/* ---- Hero: the shared night film hero with Gen3's numbers; Framer's caption
   under the film (the only text near it, as on /health/stm). */
.jifu-prod--gen3 .jifu-prod-hero { height: 864px; background: rgb(0, 0, 0); }
.jifu-prod--gen3 .jifu-prod-hero__scrim {
  /* Pre-promote gate 2026-09-28: with the film's poster frame behind it
     (PR 737) the pink caption at ~90% down fell under AA (median 4.12). The
     foot of the band is solid black from 84%, where the caption sits, so it
     reads at the accent's own ~5.3:1 on black; the film above is unchanged. */
  background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .8) 72%, rgb(0, 0, 0) 84%, rgb(0, 0, 0) 100%);
}
.jifu-prod--gen3 .jifu-prod-hero__caption {
  bottom: 89px; font-family: var(--jifu-font-display); font-weight: 700; font-size: 13.5px; line-height: 1;
  letter-spacing: 3.3px; color: var(--jifu-page-accent);
}

/* ---- Lockup: the Gen3 mark, the display line, the light sub. */
.jifu-gen3-lockup { position: relative; isolation: isolate; background: var(--jifu-gen3-ground); padding: 130px 80px 141px; text-align: center; }
.jifu-gen3-lockup::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 90% at 50% 0%, rgba(187, 47, 114, .2) 0%, rgba(13, 10, 12, 0) 62%);
}
.jifu-gen3-mark { width: 300px; height: 121px; margin-inline: auto; object-fit: contain; }
.jifu-gen3-display {
  font-family: var(--jifu-font-display); font-weight: 700; font-size: 63px; line-height: 1.02; letter-spacing: -0.01em;
  text-transform: uppercase; color: var(--jifu-white, rgb(255, 255, 255));
}
.jifu-gen3-display span { color: var(--jifu-page-accent); }
.jifu-gen3-lockup .jifu-gen3-display { margin-top: 34px; }
.jifu-gen3-light {
  font-family: var(--jifu-font-body); font-weight: 300; font-size: 45.9px; line-height: 1.05; text-transform: uppercase;
}
.jifu-gen3-lockup .jifu-gen3-light { margin-top: 25px; color: var(--jifu-gen3-soft); }
.jifu-gen3-light span { display: block; }

/* ---- Product: the tub (640x800) beside the number and the claims. */
.jifu-gen3-product { background: var(--jifu-gen3-ground); padding: 130px 80px; }
.jifu-gen3-product__grid { display: grid; grid-template-columns: 640px 568px; column-gap: 72px; align-items: center; max-width: 1280px; margin-inline: auto; }
.jifu-gen3-product__media img { width: 100%; aspect-ratio: 640 / 800; object-fit: contain; }
.jifu-gen3-number { font-family: var(--jifu-font-body); line-height: .92; }
.jifu-gen3-number strong { display: block; font-weight: 800; font-size: 63px; color: var(--jifu-page-accent); }
.jifu-gen3-number span { display: block; font-weight: 600; font-size: 26.46px; color: var(--jifu-white, rgb(255, 255, 255)); }
.jifu-gen3-origin { margin-top: 27px; font-family: var(--jifu-font-body); font-size: 12.6px; line-height: 1.62; color: var(--jifu-gen3-origin); }
.jifu-gen3-claims { margin-top: 34px; padding-left: 29px; border-left: 2px solid var(--jifu-gen3-deep); }
.jifu-gen3-claims__title {
  font-family: var(--jifu-font-display); font-weight: 700; font-size: 36px; line-height: 1.05; letter-spacing: -0.01em;
  text-transform: uppercase; color: var(--jifu-page-accent);
}
.jifu-gen3-claims ul { display: flex; flex-direction: column; gap: 10px; margin: 31px 0 0; padding: 0; list-style: none; }
.jifu-gen3-claims li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr);
  font-family: var(--jifu-font-body); font-size: 13.61px; line-height: 1.5; color: var(--jifu-gen3-muted);
}
.jifu-gen3-claims li::before { content: "\2192"; color: var(--jifu-page-accent); }
.jifu-gen3-claims li.is-lead { font-weight: 600; color: var(--jifu-white, rgb(255, 255, 255)); }
.jifu-gen3-claims li strong { font-weight: 700; color: var(--jifu-white, rgb(255, 255, 255)); }
.jifu-gen3-btn {
  display: inline-flex; margin-top: 29px; padding: 16px 42px; border-radius: 999px;
  border: 1px solid var(--jifu-gen3-deep); background: var(--jifu-gen3-well); color: var(--jifu-white, rgb(255, 255, 255));
  font-family: var(--jifu-font-body); font-weight: 700; font-size: 11.7px; line-height: 1.62; letter-spacing: .13em; text-transform: uppercase;
}

/* ---- Panel: the shared "gen3" slide set in the ported Deck, full width. */
.jifu-gen3-panel { background: var(--jifu-gen3-ground); padding: 60px 0 44px; }
.jifu-gen3-deck--phone { display: none; }

/* ---- Inside the botanical complex: four 305x381 photo tiles, caption on a scrim. */
.jifu-gen3-botanicals { background: var(--jifu-gen3-ground); padding: 130px 80px; }
.jifu-gen3-botanicals__inner { max-width: 1280px; margin-inline: auto; }
.jifu-gen3-botanicals .jifu-gen3-display { font-size: 36px; }
.jifu-gen3-botanicals__lede { max-width: 614px; margin-top: 20px; font-family: var(--jifu-font-body); font-size: 14.9px; line-height: 1.65; color: var(--jifu-gen3-lede); }
.jifu-gen3-tiles { display: grid; grid-template-columns: repeat(4, 305px); gap: 20px; margin: 53px 0 0; padding: 0; list-style: none; }
.jifu-gen3-tile { position: relative; aspect-ratio: 305 / 381; overflow: hidden; }
.jifu-gen3-tile img { width: 100%; height: 100%; object-fit: cover; }
.jifu-gen3-tile figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 0 16px;
  background: linear-gradient(180deg, rgba(13, 10, 12, 0) 0%, rgba(13, 10, 12, .92) 100%);
  font-family: var(--jifu-font-body); font-weight: 700; font-size: 11.66px; line-height: 1.35; letter-spacing: .06em;
  text-transform: uppercase; color: var(--jifu-white, rgb(255, 255, 255));
}
.jifu-gen3-tile figcaption span { color: var(--jifu-page-accent); }

/* ---- CTA band + the photo band + disclaimer. */
.jifu-gen3-cta { position: relative; isolation: isolate; background: var(--jifu-gen3-ground); padding: 130px 80px 129px; text-align: center; }
.jifu-gen3-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(110% 80% at 50% 100%, rgba(187, 47, 114, .24) 0%, rgba(13, 10, 12, 0) 60%);
}
.jifu-gen3-cta .jifu-gen3-display { font-size: 45.9px; text-transform: none; }
.jifu-gen3-cta .jifu-gen3-light { margin-top: 23px; color: var(--jifu-white, rgb(255, 255, 255)); }
.jifu-gen3-cta .jifu-gen3-btn { margin-top: 85px; }
.jifu-gen3-band { position: relative; height: 558px; background: var(--jifu-gen3-ground); }
.jifu-gen3-band img { width: 100%; height: 100%; object-fit: cover; }
.jifu-gen3-band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(13, 10, 12) 0%, rgba(13, 10, 12, 0) 30%, rgba(13, 10, 12, 0) 66%, rgb(13, 10, 12) 100%);
}
.jifu-gen3-disclaimer { background: var(--jifu-gen3-ground); padding: 60px 20px 86px; }
.jifu-gen3-disclaimer p { max-width: 792px; margin-inline: auto; text-align: center; font-family: var(--jifu-font-body); font-size: 10.35px; line-height: 1.7; color: var(--jifu-inverse-ink-faint, rgba(244, 241, 234, .56)); } /* AA: 4.19 -> ~6:1 on the gen3 ground */

/* ---- Tablet (810-1439.98). */
@media (max-width: 1439.98px) {
  .jifu-prod--gen3 .jifu-prod-hero { height: auto; padding-bottom: 130px; }
  .jifu-prod--gen3 .jifu-prod-hero__caption { bottom: 50px; font-size: 11.7px; letter-spacing: 2.86px; }
  .jifu-gen3-lockup { padding: 73px 41px 123px; }
  .jifu-gen3-lockup .jifu-gen3-display { margin-top: 24px; font-size: 48.15px; }
  .jifu-gen3-lockup .jifu-gen3-light { margin-top: 26px; font-size: 36.07px; }
  .jifu-gen3-product { padding: 73px 41px; }
  .jifu-gen3-product__grid { grid-template-columns: minmax(0, 1fr); }
  .jifu-gen3-product__copy { margin-top: 41px; }
  .jifu-gen3-number strong { font-size: 48.15px; }
  .jifu-gen3-origin { margin-top: 4px; }
  .jifu-gen3-claims { padding-left: 18px; }
  .jifu-gen3-claims__title { font-size: 27.22px; }
  .jifu-gen3-claims ul { margin-top: 30px; }
  .jifu-gen3-panel { padding: 60px 0 44px; }
  .jifu-gen3-botanicals { padding: 73px 41px; }
  .jifu-gen3-botanicals .jifu-gen3-display { font-size: 27.22px; }
  .jifu-gen3-botanicals__lede { max-width: 556px; margin-top: 18px; font-size: 13.5px; }
  .jifu-gen3-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 52px; }
  .jifu-gen3-tile figcaption { font-size: 9.9px; }
  .jifu-gen3-cta { padding: 73px 41px; }
  .jifu-gen3-cta .jifu-gen3-display { font-size: 36.07px; }
  .jifu-gen3-cta .jifu-gen3-light { margin-top: 59px; font-size: 36.07px; }
  .jifu-gen3-cta .jifu-gen3-btn { margin-top: 34px; }
  .jifu-gen3-disclaimer { padding: 41px 41px 62px; }
}

/* ---- Phone (<= 809.98). */
@media (max-width: 809.98px) {
  .jifu-prod--gen3 .jifu-prod-hero { padding-bottom: 121px; }
  /* One line, as the 390 render sets it: the shared phone caption's 230px cap
     and a 120px right inset wrapped "Discover the power of Gen3" onto two. */
  .jifu-prod--gen3 .jifu-prod-hero__caption { bottom: 34px; right: 22px; left: 0; max-width: none; margin-inline: 0; padding-left: 22px; text-align: left; font-size: 10.8px; letter-spacing: 2.64px; }
  .jifu-gen3-lockup { padding: 64px 20px 155px; }
  .jifu-gen3-mark { width: 226px; height: 91px; }
  .jifu-gen3-lockup .jifu-gen3-display { margin-top: 20px; font-size: 28.2px; }
  .jifu-gen3-lockup .jifu-gen3-light { margin-top: 35px; font-size: 22.47px; }
  .jifu-gen3-product { padding: 64px 20px; }
  .jifu-gen3-product__copy { margin-top: 28px; }
  .jifu-gen3-number strong { font-size: 28.2px; }
  .jifu-gen3-number span { font-size: 18px; }
  .jifu-gen3-origin { margin-top: 15px; font-size: 11.8px; }
  .jifu-gen3-claims { margin-top: 58px; }
  .jifu-gen3-claims__title { font-size: 17.88px; }
  .jifu-gen3-claims ul { gap: 17px; margin-top: 36px; }
  .jifu-gen3-deck--wide { display: none; }
  .jifu-gen3-deck--phone { display: block; }
  .jifu-gen3-panel { padding-bottom: 60px; }
  .jifu-gen3-botanicals { padding: 64px 20px 63px; }
  .jifu-gen3-botanicals .jifu-gen3-display { font-size: 17.88px; }
  .jifu-gen3-botanicals__lede { margin-top: 46px; font-size: 12.6px; }
  .jifu-gen3-tiles { margin-top: 85px; }
  .jifu-gen3-tile figcaption { padding: 20px 10px 10px; }
  .jifu-gen3-cta { padding: 64px 20px; }
  .jifu-gen3-cta .jifu-gen3-display { font-size: 22.47px; }
  .jifu-gen3-cta .jifu-gen3-light { margin-top: 28px; font-size: 22.47px; }
  .jifu-gen3-cta .jifu-gen3-btn { margin-top: 76px; }
  .jifu-gen3-disclaimer { padding: 34px 20px 81px; }
}

/* 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-prod--gen3 .jifu-prod-hero .fr-film { --fr-film-control-size: 42px; }

/* ASANA:1219066307564614 - the botanicals band now rides INSIDE the panel
   deck as its 4th slide; fill the slide and keep the band's own ground. */
.jifu-gen3-botanicals--slide { height: 100%; overflow-y: auto; display: flex; align-items: center; justify-content: center; }