/* /health/stm-wav - Framer redo (BRIEF 1218803133929418), night product page.
   Measured against 02_page renders/33 health_stm-wav and 13_element
   breakdown/41 at 1440/810/390. Shared pieces (film hero, Buy strip Dark,
   Footer CTA) are jifu.css's; this sheet is only what WAV lays out itself.
   WAV's accent is its own red (Framer's per-page Accent prop, #E3182F); the
   brand token set has no WAV red, so it is set once here on the wrapper. */

.jifu-prod--wav { --jifu-page-accent: rgb(227, 24, 47); }
/* AA (2026-09-24): WAV red on the Footer CTA band measured 4.05:1 - as the
   eyebrow and ticker on rgb(15,15,15), and as the Join Now fill under its dark
   label. A lifted WAV red carries the CTA band's text roles (~5:1 both ways);
   the page's own red stays on its rules, list squares and buttons. */
.jifu-prod--wav.jifu-page--cta-accent { --jifu-page-cta-accent: rgb(240, 60, 75); --jifu-page-cta-fill: rgb(240, 60, 75); }

/* ---- Film hero: black ground, top-and-bottom scrim, caption, column controls. */
.jifu-prod--wav .jifu-prod-hero { background: rgb(0, 0, 0); }
.jifu-prod--wav .jifu-prod-hero .fr-film { --fr-film-inset: 28px; }
.jifu-prod--wav .jifu-prod-hero__scrim {
  background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 62%, rgb(0, 0, 0) 96%);
}
.jifu-prod--wav .jifu-prod-hero__caption {
  bottom: 108px; padding-inline: 72px; font-size: 11.7px; line-height: 1.55;
  color: rgba(255, 255, 255, .72);
}

/* ---- Product band: lockup, headline, dek, then the can beside the story. */
.jifu-wav-product { position: relative; isolation: isolate; padding-block: 132px 58.6px; background: rgb(0, 0, 0); }
.jifu-wav-product__ground { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.jifu-wav-product__scrim {
  position: absolute; inset: 0; z-index: -1;
  /* .75 mid (Framer .62): the red H2 sat 0.3-1.4% of glyph pixels under AA on the wave's red highlights. */
  background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, .75) 22%, rgba(0, 0, 0, .75) 74%, rgb(0, 0, 0) 100%);
}
.jifu-wav-inner { max-width: 1440px; margin-inline: auto; padding-inline: 152px; }
.jifu-wav-product__lockup { width: 420px; max-width: 100%; margin-inline: auto; }
.jifu-wav-product__title {
  margin-top: 42px; text-align: center;
  font-family: var(--jifu-font-display); font-weight: 700; font-size: 37.8px; line-height: 1.05;
  text-transform: uppercase; color: var(--jifu-white, rgb(255, 255, 255));
}
.jifu-wav-product__dek {
  max-width: 724.6px; margin: 18px auto 0; text-align: center;
  font-family: var(--jifu-font-display); font-weight: 700; font-size: 18px; line-height: 1.55;
  color: rgba(255, 255, 255, .72);
}
.jifu-wav-product__grid { display: grid; grid-template-columns: 406px minmax(0, 640px); column-gap: 123.5px; margin-top: 44.7px; }
/* The product render is the 3-can "WAV+ 3 floating" shot (ASANA:1219472043375572),
   delivered e_trim'd to its 1127x867 content box; it fills the 406px column. */
.jifu-wav-product__can { justify-self: end; align-self: center; width: 406px; height: auto; aspect-ratio: 1127 / 867; object-fit: contain; }
.jifu-wav-product__copy { padding-top: 81.6px; display: flex; flex-direction: column; align-items: flex-start; }
.jifu-wav-product__h2 {
  font-family: var(--jifu-font-display); font-weight: 700; font-size: 41.4px; line-height: 1;
  text-transform: uppercase; color: var(--jifu-prod-accent);
}
.jifu-wav-p {
  max-width: 606.5px; font-family: var(--jifu-font-body); font-size: 16.2px; line-height: 1.55;
  color: rgba(255, 255, 255, .72);
}
.jifu-wav-product__h2 + .jifu-wav-p { margin-top: 31px; }
.jifu-wav-p + .jifu-wav-p { margin-top: 21.8px; }
.jifu-wav-list { list-style: none; margin: 27.8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13.9px; }
.jifu-wav-list li {
  position: relative; padding-left: 26px;
  font-family: var(--jifu-font-body); font-size: 16.2px; line-height: 1.55; color: var(--jifu-white, rgb(255, 255, 255));
}
.jifu-wav-list li::before { content: ""; position: absolute; left: 0; top: 11.16px; width: 9px; height: 9px; background: var(--jifu-prod-accent); }
.jifu-prod--wav .jifu-prod-btn {
  min-height: 59.7px; padding: 17px 46px; font-size: 12.6px; letter-spacing: .1em;
  color: var(--jifu-white, rgb(255, 255, 255));
}
.jifu-wav-product__copy .jifu-prod-btn { margin-top: 32.9px; }
@media (hover: hover) {
  .jifu-prod--wav .jifu-prod-btn:hover { background: var(--jifu-prod-accent); color: var(--jifu-white, rgb(255, 255, 255)); }
}

/* ---- "This is smart energy". */
.jifu-wav-smart { padding-block: 110px 52px; text-align: center; background: rgb(0, 0, 0); }
.jifu-wav-smart__sub {
  font-family: var(--jifu-font-body); font-size: 15.3px; line-height: 1.55; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(255, 255, 255, .5);
}
.jifu-wav-smart__title {
  margin-top: 12.3px; font-family: var(--jifu-font-display); font-weight: 700; font-size: 75.6px;
  line-height: .95; text-transform: uppercase; color: var(--jifu-white, rgb(255, 255, 255));
}

/* ---- Deck (Deck.tsx "wav" set): side arrows on desktop, dots only below. */
.jifu-wav-deck { background: rgb(0, 0, 0); }
.jifu-wav-deck .fr-deck__dotrow { display: flex; justify-content: center; align-items: center; height: 74px; margin: 0; }

/* ---- CTA photo band: TAKE THE [WAV+] / RIDE THE ENERGY. / NEVER STATIC. */
.jifu-wav-cta { position: relative; isolation: isolate; min-height: 760px; padding-block: 336.5px 86px; }
.jifu-wav-cta__media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.jifu-wav-cta__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, .15) 55%, rgb(0, 0, 0) 100%);
}
.jifu-wav-cta__title {
  font-family: var(--jifu-font-display); font-weight: 700; font-size: 84.6px; line-height: .9;
  text-transform: uppercase; color: var(--jifu-white, rgb(255, 255, 255));
}
.jifu-wav-cta__mark { display: inline-block; height: 50.2px; width: auto; margin-left: .16em; vertical-align: .02em; }
.jifu-wav-cta .jifu-prod-btn { margin-top: 49.8px; }

/* ---- Disclaimer. */
.jifu-wav-disclaimer { padding-block: 58px 80.8px; background: rgb(0, 0, 0); }
.jifu-wav-disclaimer p {
  max-width: 764.8px; font-family: var(--jifu-font-body); font-size: 9.9px; line-height: 1.6;
  color: var(--jifu-inverse-ink-faint, rgba(244, 241, 234, .56)); /* AA: 42% white measured 3.95:1 on black */
}

/* ---- Tablet (810-1439.98). */
@media (max-width: 1439.98px) {
  .jifu-prod--wav .jifu-prod-hero { padding-bottom: 66px; }
  .jifu-prod--wav .jifu-prod-hero .fr-film { --fr-film-inset: 16px; }
  .jifu-prod--wav .jifu-prod-hero__scrim { aspect-ratio: 1.7778; }
  .jifu-prod--wav .jifu-prod-hero__caption { bottom: 50px; padding-inline: 41px; font-size: 9.9px; }
  .jifu-wav-product { padding-block: 81px 64.8px; }
  .jifu-wav-inner { padding-inline: 40.5px; }
  .jifu-wav-product__title { margin-top: 32.3px; font-size: 24.79px; }
  .jifu-wav-product__dek { max-width: 543.5px; margin-top: 17px; font-size: 13.5px; }
  .jifu-wav-product__grid { grid-template-columns: minmax(0, 1fr); margin-top: 61.2px; }
  /* Keep the old can slot's 426px box height so the copy below stays on the
     dark part of the ground photo (the red h2 drops under AA higher up). */
  .jifu-wav-product__can { justify-self: center; width: min(100%, 360px); height: 426px; aspect-ratio: auto; }
  .jifu-wav-product__copy { padding-top: 30px; }
  .jifu-wav-product__h2 { font-size: 26.24px; }
  .jifu-wav-p { max-width: none; font-size: 13.5px; }
  .jifu-wav-product__h2 + .jifu-wav-p { margin-top: 28.3px; }
  .jifu-wav-p + .jifu-wav-p { margin-top: 20.5px; }
  .jifu-wav-list { margin-top: 24.2px; gap: 13.3px; }
  .jifu-wav-list li { padding-left: 0; font-size: 13.5px; }
  .jifu-wav-list li::before { left: -26px; top: 6.16px; }
  .jifu-wav-product__copy .jifu-prod-btn { margin-top: 32.3px; }
  .jifu-wav-smart { padding-block: 64.8px 37.7px; }
  .jifu-wav-smart__sub { font-size: 10.8px; }
  .jifu-wav-smart__title { margin-top: 11.5px; font-size: 46.66px; }
  .jifu-wav-cta { min-height: 469.8px; padding-block: 185.2px 56.7px; }
  .jifu-wav-cta__title { font-size: 48.11px; }
  .jifu-wav-cta__mark { height: 28.3px; }
  .jifu-wav-cta .jifu-prod-btn { margin-top: 38.2px; }
  .jifu-wav-disclaimer { padding-block: 40.5px 53.4px; }
  .jifu-wav-deck .fr-deck__arrow--side { display: none; }
}

/* ---- Phone (<=809.98). */
@media (max-width: 809.98px) {
  .jifu-prod--wav .jifu-prod-hero { padding-bottom: 57px; }
  .jifu-prod--wav .jifu-prod-hero .fr-film { --fr-film-inset: 14px; }
  .jifu-prod--wav .jifu-prod-hero__caption { bottom: 34px; right: 0; max-width: none; padding: 0 72px 0 20px; }
  /* The film's own on-screen copy (its "Powered by / green tea guarana
     B-vitamins" card and others) passes behind the bottom-right corner where
     the stacked play/mute buttons sit - at 390px their own translucent
     circles (control-bg .58) were not enough separation from the film's white
     text (mobile review 2026-09-29). A darker corner scrim behind the pair,
     phone-only so the desktop/tablet render is untouched. */
  .jifu-prod--wav .jifu-prod-hero .fr-film__controls {
    padding: 10px 8px;
    border-radius: 999px;
    background: radial-gradient(circle at 70% 50%, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .28) 62%, rgba(0, 0, 0, 0) 100%);
  }
  .jifu-wav-product { padding-block: 64px 56px; }
  .jifu-wav-inner { padding-inline: 20px; }
  .jifu-wav-product__lockup { width: 288.6px; }
  .jifu-wav-product__title { margin-top: 26px; font-size: 13.5px; }
  .jifu-wav-product__dek { margin-top: 39.9px; font-size: 12.6px; }
  .jifu-wav-product__grid { margin-top: 55.5px; }
  .jifu-wav-product__h2 { font-size: 18.95px; }
  .jifu-wav-p { font-size: 12.6px; }
  .jifu-wav-product__h2 + .jifu-wav-p { margin-top: 36px; }
  .jifu-wav-p + .jifu-wav-p { margin-top: 26.7px; }
  .jifu-wav-list { margin-top: 52.8px; gap: 14.7px; }
  .jifu-wav-list li { font-size: 12.6px; }
  .jifu-wav-list li::before { top: 5.8px; }
  .jifu-prod--wav .jifu-prod-btn { font-size: 11.8px; }
  .jifu-wav-product__copy .jifu-prod-btn { margin-top: 33.2px; }
  .jifu-wav-smart { padding-block: 56px 34.4px; }
  .jifu-wav-smart__title { margin-top: 11.6px; font-size: 23.32px; }
  .jifu-wav-cta { min-height: 420px; padding-block: 203.2px 40px; }
  .jifu-wav-cta__title { font-size: 24.77px; }
  .jifu-wav-cta__mark { height: 23.8px; }
  .jifu-wav-cta .jifu-prod-btn { margin-top: 50.1px; }
  .jifu-wav-disclaimer { padding-block: 30px 56.6px; }
}

/* WCAG AA over the photograph (test_photo_contrast, 2026-09-24): the deck's red
   "Plant extracts" / "Vitamins" labels (fr-dk-wav-0-87 / -90, generated from
   Deck.tsx) measured 100% of glyph pixels under 4.5 on the slide's near-black
   photo (median 3.9-4.3). The lifted WAV red the CTA band uses clears it. */
.jifu-wav-deck .fr-dk-wav-0-87,
.jifu-wav-deck .fr-dk-wav-0-90 { color: rgb(240, 60, 75); }
/* ...and the product band's red H2 over its photograph (median 4.31 on phones,
   6.2% of glyph pixels under 3.0 at desktop) takes the same lifted red. */
.jifu-wav-product__h2 { color: rgb(240, 60, 75); }

/* 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--wav .jifu-prod-hero .fr-film { --fr-film-control-size: 52px; --fr-film-icon-size: 20px; }