/* /health/stm-omg - Framer redo (BRIEF 1218803133929418), night product page.
   Measured against 02_page renders/30 health_stm-omg and 13_element
   breakdown/38 at 1440/810/390. Page-only rules; the film hero, Dark Buy
   strip and Footer CTA are the shared ones.
   OMG's accents are Framer's per-page props: the olive of its headings and
   Buy button (rgb(119, 132, 59)), the lighter olive of its Footer CTA and
   ticker (#97A552, the page accent here) and the teal of its Deck (#6FC9C6).
   The brand token set has none of them, so they are set once, here. */

.jifu-prod--omg { --jifu-page-accent: rgb(151, 165, 82); --jifu-omg-olive: rgb(119, 132, 59); }

/* ---- Film hero + caption. */
.jifu-prod--omg .jifu-prod-hero { height: 638px; background: rgb(0, 0, 0); }
.jifu-prod--omg .jifu-prod-hero .fr-film { --fr-film-inset: 24px; }
.jifu-prod--omg .jifu-prod-hero__scrim {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .55) 78%, rgb(0, 0, 0) 96%);
}
.jifu-prod--omg .jifu-prod-hero__caption {
  bottom: 86px; max-width: 782px; margin-inline: auto; padding-inline: 80px;
  font-family: var(--jifu-font-display); font-weight: 700; font-size: 18.9px; line-height: 1.55;
  letter-spacing: 0; text-transform: none; color: rgb(232, 233, 223);
}

/* ---- Shared bits of this page. */
.jifu-omg-band { background: linear-gradient(90deg, rgb(0, 0, 0) 36%, rgb(33, 39, 7) 100%); }
.jifu-omg-inner { max-width: 1440px; margin-inline: auto; padding-inline: 104px; }
.jifu-omg-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 57.3px; padding: 17px 44px;
  border-radius: 8px; border: 1px solid var(--jifu-omg-olive); background: var(--jifu-omg-olive); color: rgb(10, 12, 5);
  font-family: var(--jifu-font-body); font-weight: 700; font-size: 13.5px; line-height: 1.55; text-transform: uppercase;
}
.jifu-omg-btn--ghost { min-height: 61.3px; background: transparent; color: rgb(255, 255, 253); }
@media (hover: hover) {
  .jifu-omg-btn:hover { background: var(--jifu-page-accent); border-color: var(--jifu-page-accent); }
  .jifu-omg-btn--ghost:hover { color: rgb(10, 12, 5); }
}

/* ---- Product band: title stack, then packshot beside "Why STM OMG?". */
.jifu-omg-product { padding-block: 72px 72px; }
.jifu-omg-product__h2 {
  text-align: center; font-family: var(--jifu-font-display); font-weight: 700; font-size: 75.78px; line-height: .9;
  text-transform: uppercase; color: var(--jifu-omg-olive);
}
.jifu-omg-product__h3 {
  margin-top: 14.6px; text-align: center; font-family: var(--jifu-font-display); font-weight: 700; font-size: 61.17px;
  line-height: 1; text-transform: uppercase; color: rgb(255, 255, 253);
}
.jifu-omg-product__sub {
  margin-top: 30.7px; text-align: center; font-family: var(--jifu-font-display); font-weight: 700; font-size: 19.8px;
  line-height: 1.55; text-transform: uppercase; color: rgb(201, 205, 180);
}
.jifu-omg-product__grid { display: grid; grid-template-columns: 628.2px minmax(0, 546.2px); column-gap: 57.6px; margin-top: 67.1px; }
.jifu-omg-product__pack img { width: 100%; aspect-ratio: 628.2 / 482.6; object-fit: contain; }
.jifu-omg-product__copy { padding-top: 44.2px; display: flex; flex-direction: column; align-items: flex-start; }
.jifu-omg-product__h4 {
  font-family: var(--jifu-font-display); font-weight: 700; font-size: 49.68px; line-height: .85;
  text-transform: uppercase; color: rgb(255, 255, 253);
}
.jifu-omg-p { font-family: var(--jifu-font-body); font-size: 15.3px; line-height: 1.55; color: rgb(220, 223, 208); }
.jifu-omg-p--strong { font-weight: 700; color: rgb(255, 255, 253); }
.jifu-omg-product__h4 + .jifu-omg-p { margin-top: 32.6px; }
.jifu-omg-p--strong + .jifu-omg-p { margin-top: 19.3px; }
.jifu-omg-p + .jifu-omg-p--strong { margin-top: 22.7px; }
.jifu-omg-product__copy .jifu-omg-btn { margin-top: 35.1px; }

/* ---- Deck band (Deck.tsx "omg" set, tabs). */
.jifu-omg-deck { background: linear-gradient(90deg, rgb(0, 0, 0) 46%, rgb(33, 39, 7) 100%); min-height: 1253px; padding-top: 100px; }
.jifu-omg-deck .fr-deck { --fr-deck-accent: rgb(111, 201, 198); }

/* ---- CTA photo band (Framer centres it on x = 637.6 of the 1440 stage). */
.jifu-omg-cta { position: relative; isolation: isolate; min-height: 648px; padding-block: 220.1px 86.4px; background: rgb(0, 0, 0); text-align: center; }
.jifu-omg-cta__media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.jifu-omg-cta__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .55) 48%, rgba(0, 0, 0, .92) 88%); }
.jifu-omg-cta__inner { max-width: 1440px; margin-inline: auto; padding-inline: 24px; }
.jifu-omg-cta__box { max-width: 1227.3px; }
.jifu-omg-cta__h2 { font-family: var(--jifu-font-display); font-weight: 700; font-size: 49.38px; line-height: 1.1; color: var(--jifu-omg-olive); }
.jifu-omg-cta__h3 {
  margin-top: 11.8px; font-family: var(--jifu-font-display); font-weight: 700; font-size: 69.96px; line-height: 1.05;
  text-transform: uppercase; color: rgb(255, 255, 253);
}
.jifu-omg-cta .jifu-omg-btn { margin-top: 57.5px; }
.jifu-omg-cta__disclaimer {
  max-width: 900px; margin: 27.9px auto 0; font-family: var(--jifu-font-body); font-size: 11.7px; line-height: 1.6;
  color: rgb(141, 145, 124);
}

/* ---- Tablet (810-1439.98). */
@media (max-width: 1439.98px) {
  .jifu-prod--omg .jifu-prod-hero { height: auto; padding-bottom: 66px; }
  .jifu-prod--omg .jifu-prod-hero__scrim { aspect-ratio: 1.7778; }
  .jifu-prod--omg .jifu-prod-hero__caption { bottom: 50px; padding-inline: 24px; font-size: 18.81px; }
  .jifu-omg-inner { padding-inline: 24px; }
  .jifu-omg-product { padding-block: 40.5px 40.4px; }
  .jifu-omg-product__h2 { font-size: 58.56px; }
  .jifu-omg-product__h3 { margin-top: 11.2px; font-size: 48.06px; }
  .jifu-omg-product__sub { margin-top: 77.4px; font-size: 18.26px; }
  .jifu-omg-product__grid { grid-template-columns: minmax(0, 1fr); margin-top: 44px; }
  .jifu-omg-product__pack img { aspect-ratio: 762 / 585.4; }
  .jifu-omg-product__copy { padding-top: 32.4px; }
  .jifu-omg-product__h4 { font-size: 32.67px; }
  .jifu-omg-product__h4 + .jifu-omg-p { margin-top: 21.2px; }
  .jifu-omg-p--strong { font-size: 14.4px; }
  .jifu-omg-p--strong + .jifu-omg-p { margin-top: 18.5px; }
  .jifu-omg-p + .jifu-omg-p--strong { margin-top: 18.6px; }
  .jifu-omg-product__copy .jifu-omg-btn { margin-top: 28.6px; }
  .jifu-omg-deck { min-height: 1170px; }
  .jifu-omg-cta { padding-block: 210.5px 72.6px; }
  .jifu-omg-cta__box { max-width: none; }
  .jifu-omg-cta__h2 { font-size: 39.42px; }
  .jifu-omg-cta__h3 { margin-top: 9.5px; font-size: 54.4px; }
  .jifu-omg-cta .jifu-omg-btn { margin-top: 53px; }
}

/* ---- Phone (<=809.98). */
@media (max-width: 809.98px) {
  .jifu-prod--omg .jifu-prod-hero { padding-bottom: 57px; }
  .jifu-prod--omg .jifu-prod-hero__caption { bottom: 34px; right: 0; max-width: none; padding: 0 110px 0 7px; font-size: 13px; }
  .jifu-omg-product { padding-block: 40px 40px; }
  .jifu-omg-product__h2 { font-size: 25.94px; }
  .jifu-omg-product__h3 { margin-top: 13px; font-size: 21.42px; }
  .jifu-omg-product__sub { margin-top: 47.7px; font-size: 13px; }
  .jifu-omg-product__grid { margin-top: 67px; }
  .jifu-omg-product__pack img { aspect-ratio: 342 / 262.8; }
  .jifu-omg-product__copy { padding-top: 27.9px; }
  .jifu-omg-product__h4 { font-size: 24.77px; }
  .jifu-omg-product__h4 + .jifu-omg-p { margin-top: 25px; }
  .jifu-omg-p { font-size: 13.5px; }
  .jifu-omg-p--strong { font-size: 13px; }
  .jifu-omg-p--strong + .jifu-omg-p { margin-top: 20.8px; }
  .jifu-omg-p + .jifu-omg-p--strong { margin-top: 27.4px; }
  .jifu-omg-product__copy .jifu-omg-btn { margin-top: 45px; font-size: 12.6px; }
  .jifu-omg-deck { min-height: 1280px; }
  .jifu-omg-cta { padding-block: 259.5px 49px; }
  .jifu-omg-cta__h2 { font-size: 17.85px; }
  .jifu-omg-cta__h3 { margin-top: 8.7px; font-size: 22.55px; }
  .jifu-omg-cta .jifu-omg-btn { margin-top: 43px; font-size: 12.6px; }
}

/* WCAG AA over the photograph (test_photo_contrast, 2026-09-24). The facts
   table's panel lets the leaf photo through (glyph pixels to 47% under 4.5),
   and slide 3's captions run over the gold capsule photo (to 23%). A scrim
   under the text and above the photo - dark on a dark design, so the look
   holds; the text items are lifted above it. */
.jifu-omg-deck .fr-dk::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.jifu-omg-deck .fr-dk p.fr-dk__i { z-index: 2; }
.jifu-omg-deck .fr-dk-omg-0::after { background: rgba(0, 0, 0, .5); }
.jifu-omg-deck .fr-dk-omg-2::after { background: linear-gradient(90deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .82) 72%, rgba(0, 0, 0, 0) 92%); }

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

/* Deck: tabs on desktop/tablet, dots + arrows on phones (Framer's variants). */
.jifu-omg-deck--phone { display: none; }
@media (max-width: 809.98px) {
  .jifu-omg-deck--wide { display: none; }
  .jifu-omg-deck--phone { display: block; }
  /* The desktop photo on a phone: keep the rower (right of centre) in frame. */
  .jifu-omg-cta__media { object-position: 72% 50%; }
}