/* /health/stm-system - Framer redo (BRIEF 1218803133929418). Measured against
   02_page renders/32 health_stm-system and 13_element breakdown/40 at
   1440/810/390. A product page whose render puts the middle on PARCHMENT: the
   photo Page Hero (rd.page_hero), the parchment "system" band (STMRing + the
   eight products), the bundle's Light Buy strip, a photo closing band, then
   the dark Footer CTA. Only what this page lays out itself lives here. */

/* ---- Page Hero: Framer's is 860 / 760 / 658 tall with the header floating
   over it; shop2's header is solid, so 64px comes off (as in jifu.css). */
.jifu-sys .jifu-page-hero { min-height: 796px; }
/* The copy sets the title on two lines: JIFU STM / SYSTEM. */
.jifu-sys .jifu-page-hero h1 { max-width: 5em; }
@media (max-width: 1439.98px) { .jifu-sys .jifu-page-hero { min-height: 696px; } }
@media (max-width: 809.98px) { .jifu-sys .jifu-page-hero { min-height: 594px; padding-bottom: 68px; } }

/* ---- System band (parchment). */
.jifu-sys-band { background: var(--jifu-parchment, rgb(244, 241, 234)); padding-block: 72px; }
.jifu-sys-band__shell { max-width: 1440px; margin-inline: auto; padding-inline: 44px; }
.jifu-sys-band__intro {
  max-width: 614px; margin-inline: auto; text-align: center;
  font-family: var(--jifu-font-body); font-size: 14.9px; line-height: 1.62; color: var(--jifu-ink-muted, rgba(25, 25, 25, .66));
}
.jifu-sys-stage { position: relative; height: 820px; margin-top: 40px; }
.jifu-sys-stage__ring { position: absolute; left: 50%; top: 130px; width: 560px; height: 560px; transform: translateX(-50%); }
.jifu-sys-stage__ring .fr-stmring { width: 100%; height: 100%; }
.jifu-sys-item { position: absolute; width: 342px; }
.jifu-sys-item__link { display: flex; align-items: center; gap: 14px; padding: 6px; }
/* Around the ring the image faces the ring: left-side items put it last. */
.jifu-sys-item--l .jifu-sys-item__link { flex-direction: row-reverse; text-align: right; }
.jifu-sys-item--r .jifu-sys-item__link { flex-direction: row; text-align: left; }
.jifu-sys-item__media { flex: none; width: 120px; }
.jifu-sys-item__media img { width: 120px; height: 160px; object-fit: contain; }
.jifu-sys-item__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.jifu-sys-item__name {
  font-family: var(--jifu-font-display); font-weight: 700; font-size: 19.44px; line-height: 1;
  text-transform: uppercase; color: var(--jifu-ink, rgb(25, 25, 25));
}
.jifu-sys-item__tagline { font-family: var(--jifu-font-body); font-size: 13.22px; line-height: 1.42; color: var(--jifu-ink, rgb(25, 25, 25)); }
@media (hover: hover) { .jifu-sys-item__link:hover .jifu-sys-item__name { text-decoration: underline; } }
/* Desktop positions, in the render's order (stage = 1352 wide). The ring is
   the stage's first child, so the items are children 2-9. */
.jifu-sys-item:nth-child(2) { left: 202.8px; top: 0; }
.jifu-sys-item:nth-child(3) { left: 40.5px; top: 205px; }
.jifu-sys-item:nth-child(4) { left: 40.5px; top: 451px; }
.jifu-sys-item:nth-child(5) { left: 202.8px; top: 656px; }
.jifu-sys-item:nth-child(6) { left: 743.6px; top: 0; }
.jifu-sys-item:nth-child(7) { left: 987px; top: 205px; }
.jifu-sys-item:nth-child(8) { left: 987px; top: 451px; }
.jifu-sys-item:nth-child(9) { left: 811.2px; top: 656px; }
.jifu-sys-band + .jifu-buy-strip { background: var(--jifu-parchment, rgb(244, 241, 234)); }

/* ---- Closing: photo with the legal line on a bottom fade.
   ASANA:1219425657189010 (2026-10-12): the photo is now the sunset splash
   shot; the fade is held darker for longer so every glyph pixel of the 11px
   disclaimer clears AA 4.5 over the bright spray (pixel probe: worst 3.22,
   8.8% of glyph pixels under 4.5 at 1440 on the old fade; worst 11.09, 0%
   on this one). Phones get a taller dark run because the text fills most of
   the shorter fade there. */
.jifu-sys-closing { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 617.1px; background: rgb(0, 0, 0); }
.jifu-sys-closing__media { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.jifu-sys-closing__legal {
  width: 100%; padding: 60px 24px 26px;
  background: linear-gradient(0deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .78) 60%, rgba(0, 0, 0, 0) 100%);
}
.jifu-sys-closing__legal p {
  max-width: 664.6px; margin-inline: auto; text-align: center;
  font-family: var(--jifu-font-body); font-size: 11.02px; line-height: 1.5; color: rgb(237, 237, 237);
}

/* ---- Tablet: the ring above a 2-up grid of items (image left, text right). */
@media (max-width: 1439.98px) {
  .jifu-sys-band { padding-block: 40.5px; }
  .jifu-sys-band__shell { padding-inline: 24px; padding-top: 8px; }
  .jifu-sys-band__intro { max-width: 519.2px; }
  .jifu-sys-stage { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding-block: 8px; margin-top: 56px; }
  .jifu-sys-stage__ring { position: static; grid-column: 1 / -1; justify-self: center; width: 420px; height: 420px; transform: none; margin-bottom: 12px; }
  .jifu-sys-item { position: static; width: auto; }
  .jifu-sys-item--l .jifu-sys-item__link { flex-direction: row; text-align: left; }
  .jifu-sys-item__name { font-size: 17.1px; line-height: 1.15; }
  .jifu-sys-item__tagline { font-size: 11.7px; line-height: 1.6; color: var(--jifu-ink-muted, rgba(25, 25, 25, .66)); }
  .jifu-sys-closing { min-height: 347.1px; }
}

/* ---- Phone: one column, a smaller ring. */
@media (max-width: 809.98px) {
  .jifu-sys-band { padding-block: 40px; }
  .jifu-sys-band__intro { font-size: 13px; }
  .jifu-sys-stage { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 27px; }
  .jifu-sys-stage__ring { width: 246.2px; height: 246.2px; margin-bottom: 4px; }
  .jifu-sys-item__name { font-size: 13.5px; }
  .jifu-sys-item__media { width: 98px; }
  .jifu-sys-item__media img { width: 98px; height: 130px; }
  .jifu-sys-closing { min-height: 487.5px; }
  .jifu-sys-closing__legal { padding-top: 40px; background: linear-gradient(0deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .8) 75%, rgba(0, 0, 0, 0) 100%); }
}

/* ASANA:1219066307564610 - BAO joins the cycle as the 9th item, centered
   below the ring on desktop (the 8 ring positions above are untouched);
   the tablet/phone grids flow it naturally. */
.jifu-sys-stage { height: 1010px; }
.jifu-sys-item:nth-child(10) { left: 50%; top: 840px; transform: translateX(-50%); }
@media (max-width: 1439.98px) {
  .jifu-sys-stage { height: auto; }
  .jifu-sys-item:nth-child(10) { transform: none; left: auto; top: auto; }
}