/* /health/pulse - Framer redo (BRIEF 1218803133929418), a NIGHT product page.
   Linked by site_health_pulse.html only (the css/redesign/ per-page sheet
   convention, as health-stm-wav.css). Measured against 02_page
   renders/28 health_pulse and the 13_element breakdown at 1440/810/390; the
   six-slide deck is the shared "pulse" slide set (css/framer/decks/pulse.css).
   PULSE's accent is its own gold, rgb(253, 197, 62) (Framer #FDC53E), set on
   the wrapper; grounds and inks are page variables. Framer's 64px header
   floats over the film; shop2's header is solid above it. */

.jifu-prod--pulse {
  --jifu-accent-pulse: rgb(253, 197, 62);
  --jifu-page-accent: var(--jifu-accent-pulse);
  --jifu-pulse-ground: rgb(2, 1, 11);
  --jifu-pulse-ink: rgb(244, 246, 248);
  --jifu-pulse-body: rgb(227, 231, 234);
  --jifu-pulse-dim: rgb(185, 181, 189);
  --jifu-pulse-well: rgb(25, 25, 25);
  --jifu-pulse-rule: rgb(38, 36, 47);
  --jifu-pulse-panel: rgb(11, 10, 20);
}
.jifu-prod--pulse .jifu-buy-strip--dark { background: var(--jifu-pulse-ground); }

/* ---- Hero: the shared night film hero (.jifu-prod-hero, jifu.css) with PULSE's
   numbers - 828px at desktop; below it the film sits at its own 16:9 over a
   dark tail (456 of 546 at 810, 219 of 300 at 390). Film + controls only. */
.jifu-prod--pulse .jifu-prod-hero { height: 828px; background: rgb(0, 0, 0); }
.jifu-pulse-hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 1, 11, .45) 0%, rgba(2, 1, 11, 0) 38%, rgba(2, 1, 11, 0) 58%, rgb(2, 1, 11) 96%);
}

/* ---- PULSE band: ground photo at 30%, wordmark + eyebrow centred, then the
   bag (531x571) beside the copy column (501). */
.jifu-pulse-band { position: relative; isolation: isolate; background: var(--jifu-pulse-ground); padding: 110px 0 190px; }
.jifu-pulse-band__ground { position: absolute; inset: 0; z-index: -2; opacity: .3; }
.jifu-pulse-band__ground img { width: 100%; height: 100%; object-fit: cover; }
.jifu-pulse-band__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(2, 1, 11) 0%, rgba(2, 1, 11, .72) 26%, rgba(2, 1, 11, .72) 72%, rgb(2, 1, 11) 100%);
}
.jifu-pulse-band__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.jifu-pulse-wordmark { width: 210px; height: 64px; object-fit: contain; }
.jifu-pulse-eyebrow {
  width: 220px; margin-top: 44px; font-family: var(--jifu-font-display); font-weight: 700;
  font-size: 15.3px; line-height: 1.06; color: var(--jifu-pulse-body);
}
.jifu-pulse-band__grid {
  display: grid; grid-template-columns: 531px 501px; column-gap: 64px; align-items: center;
  width: 1096px; margin: 80px auto 0;
}
.jifu-pulse-band__media img { width: 531px; height: 571px; object-fit: contain; }
.jifu-pulse-title {
  font-family: var(--jifu-font-display); font-weight: 700; font-size: 30.6px; line-height: 1.04;
  letter-spacing: -0.02em; text-transform: uppercase; color: var(--jifu-page-accent);
}
.jifu-pulse-title span { display: block; }
.jifu-pulse-lead, .jifu-pulse-body {
  font-family: var(--jifu-font-body); font-size: 15.3px; line-height: 1.55; color: var(--jifu-pulse-body);
}
.jifu-pulse-lead { margin-top: 25px; font-weight: 700; }
.jifu-pulse-body { margin-top: 53px; font-weight: 400; }
.jifu-pulse-btn {
  display: inline-flex; margin-top: 42px; padding: 15px 40px; border-radius: 999px;
  border: 1px solid var(--jifu-page-accent); background: var(--jifu-pulse-well);
  font-family: var(--jifu-font-body); font-weight: 700; font-size: 12.6px; line-height: 1.55;
  letter-spacing: .06em; text-transform: uppercase; color: var(--jifu-page-accent);
}

/* ---- Deck band: the shared "pulse" slide set in the ported Deck. */
.jifu-pulse-deck { background: var(--jifu-pulse-ground); padding-block: 80px; }
.jifu-pulse-deck__wrap { width: 1096px; margin-inline: auto; }

/* Lighter slider (ASANA:1219472043301281, "verify the slider, is too dark").
   Deck.tsx's generated set (css/framer/decks/pulse.css, do not edit) lays every
   slide photo (-0) at 42% opacity under a 94% -> 56% night gradient (-1), so
   the photos read near-black. On this page the photo shows at full strength
   and the gradient keeps only a soft fade on the copy side. The six slides'
   copy sits beside or below the photo; test_photo_contrast guards what
   overlaps. */
.jifu-pulse-deck :is(.fr-dk-pulse-0-0, .fr-dk-pulse-1-0, .fr-dk-pulse-2-0,
                     .fr-dk-pulse-3-0, .fr-dk-pulse-4-0, .fr-dk-pulse-5-0) { opacity: 1; }
.jifu-pulse-deck :is(.fr-dk-pulse-0-1, .fr-dk-pulse-1-1, .fr-dk-pulse-2-1,
                     .fr-dk-pulse-3-1, .fr-dk-pulse-4-1, .fr-dk-pulse-5-1) {
  background-image: linear-gradient(105deg, rgba(2, 1, 11, .4) 0%, rgba(2, 1, 11, .12) 46%, rgba(2, 1, 11, 0) 100%);
}

/* ---- Closing: photo + scrim, the copy block at Framer's stage position. */
.jifu-pulse-closing { position: relative; isolation: isolate; height: 660px; background: var(--jifu-pulse-ground); }
.jifu-pulse-closing__media { position: absolute; inset: 0; z-index: -2; }
/* The coffee shot (ASANA:1219471962684385, shop/pages/health-pulse-coffee) is a
   PORTRAIT 4:5 still in a landscape band: object-position frames the pouch,
   sachets and cup per breakpoint (the window is ~1/3 of the source height at
   1440, ~1/2 at 810, almost all of it at 390). */
.jifu-pulse-closing__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 92%; }
.jifu-pulse-closing__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(2, 1, 11) 0%, rgba(2, 1, 11, .25) 30%, rgba(2, 1, 11, .72) 78%, rgb(2, 1, 11) 100%);
}
.jifu-pulse-closing__copy { position: absolute; left: 539px; top: 473px; width: 362px; }
.jifu-pulse-closing__title {
  font-family: var(--jifu-font-display); font-weight: 700; font-size: 22.95px; line-height: 1.02;
  letter-spacing: -0.02em; text-transform: uppercase; color: var(--jifu-pulse-ink);
}
.jifu-pulse-closing__line {
  margin-top: 15px; font-family: var(--jifu-font-display); font-weight: 700; font-size: 15.3px;
  line-height: 1.15; text-transform: uppercase; color: var(--jifu-page-accent);
}

/* ---- Disclaimer band. */
.jifu-pulse-disclaimer { background: var(--jifu-pulse-ground); padding: 54px 20px 58px; }
.jifu-pulse-disclaimer p {
  max-width: 620px; margin-inline: auto; text-align: center; font-family: var(--jifu-font-body);
  font-size: 10.8px; line-height: 1.65; color: var(--jifu-pulse-dim);
}

/* ---- Tablet (810-1439.98): the film letterboxes over a dark tail; one column. */
@media (max-width: 1439.98px) {
  .jifu-prod--pulse .jifu-prod-hero { height: auto; padding-bottom: 90px; }
  .jifu-pulse-hero__scrim { bottom: 90px; }
  .jifu-pulse-band { padding: 65px 0 56px; }
  .jifu-pulse-eyebrow { margin-top: 32px; }
  .jifu-pulse-band__grid { grid-template-columns: minmax(0, 1fr); width: 518px; margin-top: 52px; }
  .jifu-pulse-band__media { justify-self: center; }
  .jifu-pulse-band__media img { width: 380px; height: 408px; }
  .jifu-pulse-band__copy { margin-top: 41px; }
  .jifu-pulse-lead { margin-top: 26px; }
  .jifu-pulse-body { margin-top: 26px; }
  .jifu-pulse-btn { margin-top: 16px; }
  .jifu-pulse-deck { padding-block: 48.5px; }
  .jifu-pulse-deck__wrap { width: 729px; }
  .jifu-pulse-closing { height: 470px; }
  .jifu-pulse-closing__media img { object-position: 50% 95%; }
  .jifu-pulse-closing__copy { left: 224px; top: 312px; }
  .jifu-pulse-disclaimer { padding: 41px 20px 44px; }
}

/* ---- Phone (<= 809.98). */
@media (max-width: 809.98px) {
  .jifu-prod--pulse .jifu-prod-hero { padding-bottom: 81px; }
  .jifu-pulse-hero__scrim { bottom: 81px; }
  .jifu-pulse-band { padding: 56px 0 48px; }
  .jifu-pulse-wordmark { width: 179px; height: 54px; }
  .jifu-pulse-eyebrow { margin-top: 26px; font-size: 13.5px; }
  .jifu-pulse-band__grid { width: 299px; margin-top: 47px; }
  .jifu-pulse-band__media img { width: 299px; height: 322px; }
  .jifu-pulse-band__copy { margin-top: 28px; }
  .jifu-pulse-title { font-size: 24.77px; }
  .jifu-pulse-lead { margin-top: 48px; }
  .jifu-pulse-body { margin-top: 57px; }
  .jifu-pulse-btn { margin-top: 36px; font-size: 11.8px; }
  .jifu-pulse-deck { padding-block: 39.8px; }
  .jifu-pulse-deck__wrap { width: auto; margin-inline: 20px; }
  .jifu-pulse-closing { height: 460px; }
  .jifu-pulse-closing__media img { object-position: 50% 60%; }
  .jifu-pulse-closing__copy { left: 20px; top: 315px; width: 350px; }
  .jifu-pulse-closing__title { font-size: 18.58px; }
  .jifu-pulse-closing__line { font-size: 13.5px; }
  .jifu-pulse-disclaimer { padding: 30px 20px 56px; }
  .jifu-pulse-disclaimer p { text-align: left; }
}

/* WCAG AA over the photograph (test_photo_contrast, 2026-09-24): on phones the
   composition table's grey NRV figures sit over the slide photo (up to 3.8% of
   glyph pixels under 4.5). A light scrim under the text, phone only. */
@media (max-width: 809.98px) {
  .jifu-pulse-deck .fr-dk-pulse-0::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(0, 0, 0, .35);
  }
  .jifu-pulse-deck .fr-dk-pulse-0 p.fr-dk__i { z-index: 2; }
}

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