/* /health/stm-bao - STM BAO+ (ASANA:1219216542617837), built from the Figma
   design node 9166-11088 of JIFU.COM-official--XANA-, not the handover pack.
   Page-only rules; the film hero (when its film is uploaded), Dark Buy strip
   and Footer CTA are the shared ones.
   BAO's two literals are the Figma's own: the deep green rgb(0, 68, 56)
   (#004438, the band fill and the BUY NOW fill) and the gold #D7B856 (the
   design file labels it "gold jifu" - the wordmark, button border and text).
   The brand token set has neither, so they are set once, here. */

.jifu-prod--bao { --jifu-page-accent: #d7b856; --jifu-bao-green: rgb(0, 68, 56); --jifu-bao-gold: #d7b856; }

/* ---- Shared bits of this page: the Figma's radial green-to-black field. */
.jifu-bao-band { background: linear-gradient(180deg, rgb(0, 24, 20) 0%, rgb(0, 44, 36) 42%, rgb(0, 17, 14) 100%); }
.jifu-bao-band + .jifu-bao-band { background: linear-gradient(180deg, rgb(0, 17, 14) 0%, rgb(0, 34, 28) 55%, rgb(0, 0, 0) 100%); }
.jifu-bao-inner { max-width: 1440px; margin-inline: auto; padding-inline: 104px; }
.jifu-bao-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 57.3px; padding: 17px 44px;
  border-radius: 15px; border: 1px solid var(--jifu-bao-gold); background: var(--jifu-bao-green); color: var(--jifu-bao-gold);
  font-family: var(--jifu-font-body); font-weight: 700; font-size: 13.5px; line-height: 1.55; text-transform: uppercase;
  letter-spacing: .05em;
}
@media (hover: hover) {
  .jifu-bao-btn:hover { background: var(--jifu-bao-gold); border-color: var(--jifu-bao-gold); color: rgb(0, 17, 14); }
}

/* ---- Title band: "NOT JUST FIBER. IT'S" over the gold wordmark. */
.jifu-bao-title { padding-block: 96px 0; text-align: center; }
.jifu-bao-title__line {
  font-family: var(--jifu-font-display); font-weight: 700; font-size: 75.78px; line-height: .9;
  /* The Figma paints this line in the page green over the gradient's lighter
     centre; lifted two steps here so the large display line holds 3:1 on the
     darker committed gradient. */
  text-transform: uppercase; color: rgb(16, 133, 108);
}
.jifu-bao-title__wordmark { width: min(600px, 86%); height: auto; margin: 18px auto 0; }

/* ---- Product band: tilted tub beside the baobab copy. */
.jifu-bao-product { padding-block: 72px; }
.jifu-bao-product__grid { display: grid; grid-template-columns: 628.2px minmax(0, 546.2px); column-gap: 57.6px; align-items: center; }
.jifu-bao-product__pack img { width: 100%; height: auto; object-fit: contain; }
.jifu-bao-product__copy { display: flex; flex-direction: column; align-items: flex-start; }
.jifu-bao-p { font-family: var(--jifu-font-body); font-size: 17.1px; line-height: 1.55; color: rgb(220, 227, 222); }
.jifu-bao-p strong { font-weight: 700; color: rgb(255, 255, 253); }
.jifu-bao-p + .jifu-bao-p { margin-top: 22.7px; }
.jifu-bao-product__copy .jifu-bao-btn { margin-top: 35.1px; }

/* ---- Slideshow: supplement facts + the tubs on the shared Framer Deck
   (ASANA:1219472047092160). One contained picture per slide in a fixed-height
   view - nothing cropped, no height jump between the tall facts card and the
   wide tubs. Tabs on desktop/tablet, dots + arrows on phone, as stm-3d. */
.jifu-bao-panels { --jifu-bao-deck-h: 640px; padding-block: 72px; }
.jifu-bao-deck--phone { display: none; }
.jifu-bao-slide { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; }
.jifu-bao-slide img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.jifu-bao-panels .fr-deck__tabs { padding-bottom: 0; }

/* ---- CTA photo band (the Figma's beach family, scrimmed to black). */
.jifu-bao-cta { position: relative; isolation: isolate; min-height: 648px; padding-block: 360px 86.4px; background: rgb(0, 0, 0); text-align: center; }
.jifu-bao-cta__media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.jifu-bao-cta__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 44%, rgb(0, 0, 0) 91%); }
.jifu-bao-cta__inner { max-width: 1440px; margin-inline: auto; padding-inline: 24px; }
.jifu-bao-cta__h2 {
  font-family: var(--jifu-font-display); font-weight: 400; font-size: 69.96px; line-height: 1.05;
  text-transform: uppercase; color: rgb(255, 255, 253);
}
.jifu-bao-cta .jifu-bao-btn { margin-top: 57.5px; }
.jifu-bao-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(170, 175, 170);
}

/* ---- Tablet (810-1439.98). */
@media (max-width: 1439.98px) {
  .jifu-bao-inner { padding-inline: 24px; }
  .jifu-bao-title { padding-block: 64px 0; }
  .jifu-bao-title__line { font-size: 58.56px; }
  .jifu-bao-product { padding-block: 48px; }
  .jifu-bao-product__grid { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .jifu-bao-panels { --jifu-bao-deck-h: 560px; }
  .jifu-bao-cta { padding-block: 280px 72.6px; }
  .jifu-bao-cta__h2 { font-size: 54.4px; }
}

/* ---- Phone (<=809.98). */
@media (max-width: 809.98px) {
  .jifu-bao-title { padding-block: 48px 0; }
  .jifu-bao-title__line { font-size: 25.94px; }
  .jifu-bao-product { padding-block: 40px; }
  .jifu-bao-p { font-size: 13.5px; }
  .jifu-bao-product__copy .jifu-bao-btn { margin-top: 28px; font-size: 12.6px; }
  .jifu-bao-panels { padding-block: 40px; --jifu-bao-deck-h: 440px; }
  .jifu-bao-deck--wide { display: none; }
  .jifu-bao-deck--phone { display: block; }
  .jifu-bao-cta { min-height: 480px; padding-block: 220px 49px; }
  .jifu-bao-cta__h2 { font-size: 22.55px; }
  .jifu-bao-cta .jifu-bao-btn { margin-top: 43px; font-size: 12.6px; }
}