/* /health-glo - Framer redo (BRIEF 1218803133929418). Linked by site_health_glo.html
   only (the css/redesign/ per-page sheet convention). Measured against 02_page
   renders/24 health-glo and the 13_element breakdown at 1440/810/390.
   Like /health/liv, the render is a mostly LIGHT page: white cue/say/close
   bands and five cream bands (rgb(243, 238, 225)), with only the film hero and
   the buy band + Buy strip dark. The build spec's "pd-benefits" band is hidden
   in the published page and is not built. GLO's accent is its own gold,
   rgb(222, 183, 54), set on the wrapper. */

.jifu-glo {
  --jifu-accent-glo: rgb(222, 183, 54);
  --jifu-page-accent: var(--jifu-accent-glo);
  --jifu-glo-cream: rgb(243, 238, 225);
  /* WCAG AA (fix-forward 2026-09-24): the bright GLO gold measured 1.92:1 as
     text on white and 1.66:1 on cream, and 60% ink 4.38:1 on cream. Text now
     takes a deeper gold mixed from the same two tokens (~6.1:1 on white,
     ~5.3:1 on cream). 45% gold, not 55%: on phones the product names are
     16px - normal text, floor 4.5, where 55% measured 4.17:1 on cream. The
     bright gold stays on rules and borders. Soft copy takes the ink-muted
     token (~5.4:1 on cream). */
  --jifu-glo-accent-text: color-mix(in srgb, var(--jifu-accent-glo) 45%, var(--jifu-ink, rgb(25, 25, 25)));
  --jifu-glo-soft: var(--jifu-ink-muted, rgba(25, 25, 25, .66));
  --jifu-glo-dark: var(--jifu-midnight, rgb(25, 25, 25));
}
.jifu-glo-shell { max-width: 1125px; margin-inline: auto; }

/* ---- Hero: the shared night film hero - the film is the whole band (no
   tail at any breakpoint), under Framer's light scrim. */
.jifu-glo .jifu-prod-hero { height: 792px; background: rgb(8, 8, 8); }
.jifu-glo .jifu-prod-hero__scrim {
  background: linear-gradient(0deg, rgba(10, 10, 10, .34) 0%, rgba(10, 10, 10, 0) 45%, rgba(10, 10, 10, .22) 100%);
}

/* ---- Cue + say (white). */
.jifu-glo-cue { background: var(--jifu-ground, rgb(255, 255, 255)); padding: 36px 20px 26px; text-align: center; }
.jifu-glo-cue p {
  display: inline-block; padding-bottom: 8px; border-bottom: 1px solid var(--jifu-page-accent);
  font-family: var(--jifu-font-body); font-weight: 700; font-size: 10.8px; line-height: 1.62; letter-spacing: .22em;
  text-transform: uppercase; color: var(--jifu-glo-accent-text);
}
.jifu-glo-say { background: var(--jifu-ground, rgb(255, 255, 255)); padding: 45px 20px 55px; text-align: center; }
.jifu-glo-say__title {
  font-family: var(--jifu-font-display); font-weight: 700; font-size: 55.73px; line-height: 1.04; letter-spacing: -0.015em;
  text-transform: uppercase; color: var(--jifu-glo-accent-text);
}
.jifu-glo-say__sub {
  margin-top: 19px; font-family: var(--jifu-font-display); font-weight: 700; font-size: 41.76px; line-height: 1.1;
  letter-spacing: -0.015em; text-transform: uppercase; color: var(--jifu-ink, rgb(25, 25, 25));
}
.jifu-glo-say__sub span { display: block; }

/* ---- Cream run: statement, photo, the 4-step ritual, cleanse/repair. */
.jifu-glo-cream { background: var(--jifu-glo-cream); }
.jifu-glo-stmt { padding: 54px 20px 63px; }
.jifu-glo-stmt p {
  max-width: 526px; font-family: var(--jifu-font-display); font-weight: 700; font-size: 25.2px; line-height: 1.1;
  letter-spacing: -0.015em; text-transform: uppercase; color: var(--jifu-ink, rgb(25, 25, 25));
}
.jifu-glo-stmt p span { display: block; }
.jifu-glo-photo { height: 660px; }
.jifu-glo-photo img { width: 100%; height: 100%; object-fit: cover; }
.jifu-glo-h {
  font-family: var(--jifu-font-display); font-weight: 700; font-size: 55.73px; line-height: 1.04; letter-spacing: -0.015em;
  text-transform: uppercase; color: var(--jifu-ink, rgb(25, 25, 25));
}
.jifu-glo-actives { padding: 54px 20px; }
.jifu-glo-acts { display: grid; grid-template-columns: repeat(4, 263px); gap: 24px; margin: 50px 0 0; padding: 0; list-style: none; }
.jifu-glo-act { display: flex; flex-direction: column; padding-top: 19.2px; border-top: 1px solid var(--jifu-page-accent); }
.jifu-glo-act img { width: 100%; aspect-ratio: 263 / 329; object-fit: cover; }
.jifu-glo-act__lines { display: flex; flex-direction: column; gap: 9.6px; margin-top: auto; padding-top: 9.6px; }
.jifu-glo-act__name {
  font-family: var(--jifu-font-display); font-weight: 700; font-size: 25.2px; line-height: 1.62; letter-spacing: -0.42px;
  text-transform: uppercase; color: var(--jifu-glo-accent-text);
}
.jifu-glo-act__step {
  font-family: var(--jifu-font-body); font-weight: 700; font-size: 9.9px; line-height: 1.62; letter-spacing: 1.76px;
  text-transform: uppercase; color: var(--jifu-glo-soft);
}
.jifu-glo-act__body { font-family: var(--jifu-font-body); font-size: 13.5px; line-height: 1.6; color: var(--jifu-glo-soft); }
.jifu-glo-ritual { padding: 68px 20px 49px; }
.jifu-glo-ritual__lead {
  max-width: 693px; margin-top: 50px; font-family: var(--jifu-font-body); font-weight: 700; font-size: 41.76px; line-height: 1.18;
  color: var(--jifu-ink, rgb(25, 25, 25));
}
.jifu-glo-ritual__body { max-width: 669px; margin-top: 78px; font-family: var(--jifu-font-body); font-size: 17.5px; line-height: 1.6; color: var(--jifu-glo-soft); }

/* ---- Buy band (dark) + the dark Buy strip. */
.jifu-glo-buy { background: var(--jifu-glo-dark); padding: 68px 20px 67px; }
.jifu-glo-buy__grid { display: grid; grid-template-columns: 522px minmax(0, 1fr); column-gap: 80px; align-items: center; }
.jifu-glo-buy__media img { width: 100%; aspect-ratio: 522 / 312; object-fit: contain; }
.jifu-glo-buy__name {
  font-family: var(--jifu-font-display); font-weight: 700; font-size: 41.76px; line-height: 1.02; letter-spacing: -0.015em;
  text-transform: uppercase; color: var(--jifu-parchment, rgb(244, 241, 234));
}
.jifu-glo-buy__meta {
  margin-top: 18px; font-family: var(--jifu-font-body); font-weight: 700; font-size: 9.9px; line-height: 1.62; letter-spacing: .16em;
  text-transform: uppercase; color: var(--jifu-inverse-ink-muted, rgba(244, 241, 234, .66));
}
.jifu-glo-btn {
  display: inline-flex; align-items: center; min-height: 52px; margin-top: 17px; padding: 0 28.8px; border-radius: 999px;
  border: 1px solid var(--jifu-parchment, rgb(244, 241, 234)); color: var(--jifu-parchment, rgb(244, 241, 234));
  font-family: var(--jifu-font-body); font-weight: 700; font-size: 10.8px; line-height: 1.62; letter-spacing: .16em; text-transform: uppercase;
}
.jifu-glo .jifu-buy-strip--dark { background: var(--jifu-glo-dark); }

/* ---- Close (white). */
.jifu-glo-close { background: var(--jifu-ground, rgb(255, 255, 255)); padding: 54px 20px; text-align: center; }
.jifu-glo-close__q { font-family: var(--jifu-font-display); font-weight: 700; font-size: 41.76px; line-height: 1.1; letter-spacing: -0.015em; color: var(--jifu-glo-accent-text); }
.jifu-glo-close__a {
  max-width: 853px; margin: 15px auto 0; font-family: var(--jifu-font-display); font-weight: 700; font-size: 55.73px; line-height: 1.02;
  letter-spacing: -0.015em; text-transform: uppercase; color: var(--jifu-ink, rgb(25, 25, 25));
}
.jifu-glo-close__note {
  max-width: 556px; margin: 20px auto 0; padding-top: 20px; border-top: 1px solid var(--jifu-rule, rgba(25, 25, 25, .16));
  font-family: var(--jifu-font-body); font-size: 10.8px; line-height: 1.6; color: var(--jifu-glo-soft);
}

/* ---- Tablet (810-1439.98). */
@media (max-width: 1439.98px) {
  .jifu-glo .jifu-prod-hero { height: auto; padding-bottom: 0; }
  .jifu-glo-shell { max-width: 704px; }
  .jifu-glo-say__title { font-size: 31.35px; }
  .jifu-glo-say__sub { margin-top: 16px; }
  .jifu-glo-stmt p { max-width: 391px; }
  .jifu-glo-photo { height: 371px; }
  .jifu-glo-h { font-size: 31.35px; }
  .jifu-glo-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; margin-top: 36px; }
  .jifu-glo-act img { aspect-ratio: 342 / 428; }
  .jifu-glo-act__name { font-size: 18.72px; letter-spacing: -0.312px; }
  .jifu-glo-ritual__lead { max-width: 411px; margin-top: 35px; font-size: 24.79px; }
  .jifu-glo-ritual__body { max-width: 585px; margin-top: 54px; font-size: 15.3px; }
  .jifu-glo-buy__grid { grid-template-columns: 328px minmax(0, 1fr); column-gap: 48px; }
  .jifu-glo-buy__name { font-size: 24.79px; }
  .jifu-glo-close__q { font-size: 24.79px; }
  .jifu-glo-close__a { max-width: 480px; margin-top: 13px; font-size: 31.35px; }
}

/* ---- Phone (<= 809.98). */
@media (max-width: 809.98px) {
  .jifu-glo-shell { max-width: none; }
  .jifu-glo-say { padding: 45px 25px 61px; }
  .jifu-glo-say__title { font-size: 20.99px; }
  .jifu-glo-say__sub { font-size: 19.82px; }
  .jifu-glo-stmt { padding: 54px 25px 100px; }
  .jifu-glo-stmt p { font-size: 20.4px; }
  .jifu-glo-photo { height: 179px; }
  .jifu-glo-actives, .jifu-glo-ritual, .jifu-glo-buy, .jifu-glo-close { padding-inline: 25px; }
  .jifu-glo-h { font-size: 20.99px; }
  .jifu-glo-acts { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 32px; }
  .jifu-glo-act img { aspect-ratio: 339 / 424; }
  .jifu-glo-act__name { font-size: 15.5px; }
  .jifu-glo-ritual__lead { margin-top: 39px; font-size: 19.82px; }
  .jifu-glo-ritual__body { margin-top: 59px; font-size: 13.5px; }
  .jifu-glo-buy__grid { grid-template-columns: minmax(0, 1fr); }
  .jifu-glo-buy__copy { margin-top: 31px; }
  .jifu-glo-buy__name { font-size: 19.82px; }
  .jifu-glo-close__q { font-size: 19.82px; }
  .jifu-glo-close__a { font-size: 20.99px; }
  .jifu-glo-close__note { max-width: none; }
}