/* /health/liv - Framer redo (BRIEF 1218803133929418). Linked by site_health_liv.html
   only (the css/redesign/ per-page sheet convention). Measured against 02_page
   renders/27 health_liv and the 13_element breakdown at 1440/810/390.
   The render is a mostly LIGHT page (parchment product band + Buy strip, white
   "What's inside" band, parchment legal band) with a dark photo hero and a dark
   photo closing; the build spec's "science on-dark" and "benefits on-dark"
   bands are hidden in the published page (zero height) and are not built.
   Accent = the health pillar green (.jifu-page--health). */

.jifu-liv {
  --jifu-liv-parchment: var(--jifu-parchment, rgb(244, 241, 234));
  --jifu-liv-green: var(--jifu-accent-health, rgb(139, 197, 61));
  --jifu-liv-th: rgb(74, 74, 74);
  --jifu-liv-dim: rgb(90, 90, 90);
}

/* ---- Hero: the shared FILM Page Hero (rd.page_hero_film, jifu.css; ticket
   1219425657189016). The LIV film carries its own words, so the only thing
   over it is LIV's one pill CTA, bottom-left at the film controls' inset.
   Desktop keeps the photo hero's 674px band (738 - 64, as the render) so the
   CTA stays above a 900px fold; the film covers it (a ~8% crop top and bottom
   at 1440, clear of the film's centred type). Phones collapse to 16:9 (jifu.css). */
.jifu-liv .jifu-page-hero--film { max-height: 674px; }
.jifu-liv-pill {
  display: inline-flex; align-items: center; gap: 9.6px; padding: 14px 26px; border-radius: 999px;
  background: var(--jifu-liv-parchment); color: var(--jifu-ink, rgb(25, 25, 25));
  font-family: var(--jifu-font-body); font-weight: 700; font-size: 10.8px; line-height: 1.6; letter-spacing: 1.92px; text-transform: uppercase;
}

/* ---- Product band (parchment): the pouch on a green glow beside the copy. */
.jifu-liv-product { background: var(--jifu-liv-parchment); padding: 120px 0; }
.jifu-liv-product__grid { display: grid; grid-template-columns: 541px 568px; column-gap: 72px; align-items: center; width: 1181px; margin-inline: auto; }
.jifu-liv-shot { padding: 40px; background: radial-gradient(120% 90% at 50% 45%, rgba(139, 197, 61, .18) 0%, rgba(139, 197, 61, 0) 62%); }
.jifu-liv-shot img { width: 100%; aspect-ratio: 461 / 433; object-fit: contain; }
.jifu-liv-rule { display: block; width: 56px; height: 3px; background: var(--jifu-liv-green); }
.jifu-liv-statement {
  margin-top: 20px; font-family: var(--jifu-font-display); font-weight: 700; font-size: 55.73px; line-height: 1.02;
  letter-spacing: -0.015em; text-transform: uppercase; color: var(--jifu-ink, rgb(25, 25, 25));
}
.jifu-liv-dose {
  margin-top: 40px; padding-left: 63px; border-left: 2px solid var(--jifu-liv-green);
  font-family: var(--jifu-font-body); font-weight: 700; font-size: 15.3px; line-height: 1.6; color: var(--jifu-ink, rgb(25, 25, 25));
}
.jifu-liv-subhead { margin-top: 25px; font-family: var(--jifu-font-display); font-weight: 700; font-size: 25.2px; line-height: 1.28; color: var(--jifu-ink, rgb(25, 25, 25)); }
.jifu-liv-lead, .jifu-liv-p { font-family: var(--jifu-font-body); font-size: 15.3px; line-height: 1.6; color: var(--jifu-ink, rgb(25, 25, 25)); }
.jifu-liv-lead { margin-top: 14px; }
.jifu-liv-p { margin-top: 13px; }
.jifu-liv-btn {
  display: inline-flex; margin-top: 25px; padding: 13.6px 25.6px; border-radius: 999px;
  background: var(--jifu-ink, rgb(25, 25, 25)); color: var(--jifu-liv-parchment);
  font-family: var(--jifu-font-body); font-weight: 700; font-size: 10.8px; line-height: 1.6; letter-spacing: .16em; text-transform: uppercase;
}
.jifu-liv .jifu-buy-strip { background: var(--jifu-liv-parchment); }

/* ---- What's inside (white): statement + pouch + lead left, the composition
   table right. */
.jifu-liv-inside { background: var(--jifu-ground, rgb(255, 255, 255)); padding: 120px 0 305px; }
.jifu-liv-inside__grid { display: grid; grid-template-columns: 471px 637px; column-gap: 72px; width: 1180px; margin-inline: auto; align-items: start; }
.jifu-liv-inside__intro { min-width: 0; }
.jifu-liv-inside__pouch { width: 178px; margin: 18px auto 0; }
.jifu-liv-inside__pouch img { width: 178px; height: 326px; object-fit: contain; }
.jifu-liv-inside .jifu-liv-lead { margin-top: 29px; }
.jifu-liv-caption {
  padding-bottom: 14px; border-bottom: 1px solid var(--jifu-ink, rgb(25, 25, 25));
  font-family: var(--jifu-font-body); font-size: 22.32px; line-height: 1.6; color: var(--jifu-ink, rgb(25, 25, 25));
}
.jifu-liv-table { width: 100%; border-collapse: collapse; }
.jifu-liv-table th {
  padding: 0; text-align: left; font-family: var(--jifu-font-body); font-weight: 700; font-size: 9.9px; line-height: 1.6;
  letter-spacing: .08em; text-transform: uppercase; color: var(--jifu-liv-th);
}
.jifu-liv-table th:last-child, .jifu-liv-table td:last-child { width: 70px; text-align: left; }
.jifu-liv-table thead th { padding-bottom: 25px; }
.jifu-liv-table td {
  padding: 9px 0; border-bottom: 1px solid var(--jifu-rule-soft, rgba(25, 25, 25, .1));
  font-family: var(--jifu-font-body); font-size: 12.6px; line-height: 1.6; color: var(--jifu-ink, rgb(25, 25, 25));
}
.jifu-liv-table td em { font-style: italic; }
.jifu-liv-table tr.is-key td { font-weight: 700; }
.jifu-liv-table tr.is-sub td:first-child { padding-left: 16px; color: var(--jifu-liv-dim); }

/* ---- Closing (dark photo band) + legal (parchment). */
.jifu-liv-closing { position: relative; isolation: isolate; min-height: 594px; display: flex; flex-direction: column; justify-content: center; padding: 0 29px; }
.jifu-liv-closing__media { position: absolute; inset: 0; z-index: -2; }
.jifu-liv-closing__media img { width: 100%; height: 100%; object-fit: cover; }
.jifu-liv-closing__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(25, 25, 25, .86) 0%, rgba(25, 25, 25, .72) 26%, rgba(25, 25, 25, .3) 52%, rgba(25, 25, 25, 0) 78%); }
.jifu-liv-closing__title {
  max-width: 330px; font-family: var(--jifu-font-display); font-weight: 700; font-size: 68.54px; line-height: .92;
  letter-spacing: -0.015em; text-transform: uppercase; color: var(--jifu-white, rgb(255, 255, 255));
}
.jifu-liv-closing__lead { max-width: 258px; margin-top: 21px; font-family: var(--jifu-font-body); font-size: 15.3px; line-height: 1.6; color: var(--jifu-white, rgb(255, 255, 255)); }
.jifu-liv-closing .jifu-liv-btn { align-self: flex-start; margin-top: 31px; background: var(--jifu-liv-parchment); color: var(--jifu-ink, rgb(25, 25, 25)); }
.jifu-liv-legal { background: var(--jifu-liv-parchment); padding: 44px 20px 70px; }
.jifu-liv-legal p { max-width: 763px; margin-inline: auto; text-align: center; font-family: var(--jifu-font-body); font-size: 10.8px; line-height: 1.6; color: var(--jifu-liv-dim); }

/* ---- Tablet (810-1439.98): one column. */
@media (max-width: 1439.98px) {
  .jifu-liv-product { padding: 73px 16px 74px; }
  .jifu-liv-product__grid { grid-template-columns: minmax(0, 1fr); width: auto; }
  .jifu-liv-shot { padding: 24px 25px; }
  .jifu-liv-product__copy { margin-top: 41px; }
  .jifu-liv-statement { font-size: 31.35px; }
  .jifu-liv-dose { margin-top: 31px; }
  .jifu-liv-subhead { margin-top: 12px; font-size: 18.72px; }
  .jifu-liv-lead { margin-top: 12px; max-width: 698px; }
  .jifu-liv-p { margin-top: 11px; max-width: 698px; }
  .jifu-liv-btn { margin-top: 24px; }
  .jifu-liv-inside { padding: 73px 16px 120px; }
  .jifu-liv-inside__grid { grid-template-columns: minmax(0, 1fr); width: auto; }
  .jifu-liv-inside .jifu-liv-lead { margin-top: 31px; }
  .jifu-liv-inside__pouch { margin-top: 29px; }
  .jifu-liv-inside__table { margin-top: 64px; }
  .jifu-liv-caption { font-size: 19.49px; }
  .jifu-liv-closing { padding: 0 16px; }
  .jifu-liv-closing__title { max-width: 338px; font-size: 54.94px; }
  .jifu-liv-closing__lead { max-width: 338px; margin-top: 11px; }
  .jifu-liv-legal { padding: 44px 24px 70px; }
}

/* ---- Phone (<= 809.98). */
@media (max-width: 809.98px) {
  .jifu-liv-product { padding: 64px 8px; }
  .jifu-liv-shot { padding: 16px; }
  .jifu-liv-product__copy { margin-top: 32px; }
  .jifu-liv-statement { font-size: 20.99px; }
  .jifu-liv-dose { margin-top: 66px; }
  .jifu-liv-subhead { margin-top: 29px; font-size: 15.5px; }
  .jifu-liv-lead { margin-top: 17px; font-size: 13.5px; }
  .jifu-liv-p { margin-top: 66px; }
  .jifu-liv-btn { margin-top: 28px; }
  .jifu-liv-inside { padding: 64px 8px 120px; }
  .jifu-liv-caption { font-size: 14.9px; }
  .jifu-liv-closing { padding: 0 8px; }
  .jifu-liv-closing__title { font-size: 35.86px; }
  .jifu-liv-closing__lead { margin-top: 28px; font-size: 13.5px; }
  .jifu-liv-closing .jifu-liv-btn { margin-top: 58px; }
  .jifu-liv-legal { padding: 44px 8px 94px; }
}