/* ──────────────────────────────────────────────────────────────
   BCB — Microbiome Testing page CSS
   Loads automatically by the slug-match auto-loader on
   /services/microbiome-testing/.
   All selectors scoped to body.page-microbiome-testing so utility
   class names (.eyebrow, .h2-pink, .body-lg, .closer, .hero, .right,
   .why, .cancannot, .test, .how, .bill, .locs, etc.) cannot bleed
   into other pages that may use the same names differently.
   Color resolved through var() tokens; live re-tone flows through.
   ────────────────────────────────────────────────────────────── */

/* shared section system */
body.page-microbiome-testing .sec { padding: clamp(48px, 6vw, 80px) 32px; background: transparent; }
body.page-microbiome-testing .sec--lg { padding: clamp(64px, 9vw, 112px) 32px; }
body.page-microbiome-testing .sec--sm { padding: clamp(36px, 5vw, 56px) 32px; }
body.page-microbiome-testing .inner { max-width: 1180px; margin: 0 auto; }
body.page-microbiome-testing .inner--narrow { max-width: 900px; }
body.page-microbiome-testing .eyebrow { font-family: var(--font-accent); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pink-500); margin: 0 0 16px; }
body.page-microbiome-testing .h2-pink { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.14; letter-spacing: -0.02em; color: var(--pink-500); margin: 0 0 18px; text-wrap: balance; }
body.page-microbiome-testing .body-lg { font-size: clamp(16px, 1.15vw, 18px); line-height: 1.65; color: var(--navy-500); margin: 0 0 18px; text-wrap: pretty; }
body.page-microbiome-testing .body { font-size: 15.5px; line-height: 1.65; color: var(--navy-500); margin: 0 0 14px; }

/* hero */
body.page-microbiome-testing .hero { padding: clamp(22px, 3.4vw, 44px) 32px clamp(14px, 2.2vw, 24px); background: transparent; }
body.page-microbiome-testing .hero__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
body.page-microbiome-testing .hero__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 4.2vw, 54px); line-height: 1.06; letter-spacing: -0.025em; color: var(--pink-500); margin: 0 0 18px; text-wrap: balance; }
body.page-microbiome-testing .hero__lede { font-size: clamp(17px, 1.3vw, 21px); line-height: 1.42; color: var(--navy-700); margin: 0 0 18px; font-weight: 500; }
body.page-microbiome-testing .hero__body { font-size: clamp(15px, 1.05vw, 17px); line-height: 1.65; color: var(--navy-500); margin: 0 0 18px; max-width: 56ch; }
body.page-microbiome-testing .hero__screen { font-size: 14.5px; line-height: 1.6; color: var(--navy-700); margin: 0 0 26px; padding: 16px 20px; background: var(--note-bg); border: 1px solid var(--note-border); border-radius: var(--radius-md); font-weight: 500; max-width: 58ch; }
/* transparent PNG cutout: float on the page gradient, no solid box/frame */
body.page-microbiome-testing .hero__media { background: transparent; display: flex; align-items: center; justify-content: center; }
body.page-microbiome-testing .hero__media img { width: auto; max-width: 100%; height: auto; max-height: clamp(200px, 26vw, 300px); object-fit: contain; margin: 0 auto; display: block; }

/* ─── On-this-page chips ─────────────────────────────────── */
body.page-microbiome-testing .hero__toc {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 9px;
  margin-top: clamp(16px, 2vw, 22px);
}
body.page-microbiome-testing .hero__toc-label {
  font-family: var(--font-accent);
  font-weight: 700; font-size: 11.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--navy-400);
  flex-basis: 100%; margin: 0 0 8px;
}
body.page-microbiome-testing .hero__toc-chip {
  font-family: var(--font-sans);
  font-weight: 600; font-size: 13.5px;
  color: var(--navy-600);
  text-decoration: none;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(62, 80, 104, 0.14);
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
body.page-microbiome-testing .hero__toc-chip:hover {
  background: #fff;
  color: var(--pink-600);
  border-color: var(--pink-200);
}

/* Jump targets clear the fixed nav + hub-subnav strip */
body.page-microbiome-testing #testing-right,
body.page-microbiome-testing #tests,
body.page-microbiome-testing #how-it-works,
body.page-microbiome-testing #billing { scroll-margin-top: 130px; }

/* ─── Lead intro: longer opening moved down from the hero ─── */
body.page-microbiome-testing .hero-intro {
  padding: clamp(24px, 3vw, 40px) 32px clamp(8px, 1.5vw, 16px);
}
body.page-microbiome-testing .hero-intro .inner--prose { max-width: 760px; margin: 0 auto; }
body.page-microbiome-testing .hero-intro .hero__body { max-width: none; font-size: clamp(16px, 1.15vw, 17.5px); line-height: 1.7; }
body.page-microbiome-testing .hero-intro .hero__screen { max-width: none; margin: 0; }

@media (max-width: 880px) {
  /* Single column, centered header. display:contents flattens the text
     wrapper so the chip row can reorder relative to the cutout. */
  body.page-microbiome-testing .hero { padding-top: clamp(14px, 3vw, 22px); }
  body.page-microbiome-testing .hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
  }
  body.page-microbiome-testing .hero__inner > div:not(.hero__media) { display: contents; }
  body.page-microbiome-testing .hero__lede { margin-bottom: 18px; }
  body.page-microbiome-testing .hero__media { order: -1; max-width: 300px; margin: 0 auto 4px; }
  body.page-microbiome-testing .hero__toc {
    order: 1;
    justify-content: center;
    gap: 6px;
    margin-top: clamp(14px, 3vw, 18px);
  }
  body.page-microbiome-testing .hero__toc-label { width: 100%; text-align: center; margin: 0 0 2px; }
  body.page-microbiome-testing .hero__toc-chip { font-size: 12px; padding: 6px 12px; }
}

/* is testing right (two-column: useful when / less useful when) */
body.page-microbiome-testing .right { padding: var(--sec-pad-y) 32px; background: transparent; }
body.page-microbiome-testing .right__inner { max-width: 1000px; margin: 0 auto; }
body.page-microbiome-testing .right__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 32px); margin-top: 28px; }
@media (max-width: 760px) { body.page-microbiome-testing .right__cols { grid-template-columns: 1fr; } }
body.page-microbiome-testing .right__col { padding: 28px 28px 24px; background: var(--white); border-radius: var(--radius-xl); box-shadow: var(--shadow-xs); border-top: 4px solid var(--pink-500); }
body.page-microbiome-testing .right__col--less { border-top-color: var(--navy-300); }
body.page-microbiome-testing .right__col h3 { font-family: var(--font-display); font-weight: 800; font-size: 19px; line-height: 1.22; letter-spacing: -0.015em; color: var(--navy-700); margin: 0 0 16px; }
body.page-microbiome-testing .right__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
body.page-microbiome-testing .right__col li { padding-left: 24px; position: relative; font-size: 14.5px; line-height: 1.55; color: var(--navy-700); }
body.page-microbiome-testing .right__col li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--pink-500); }
body.page-microbiome-testing .right__col--less li::before { background: var(--navy-300); }
body.page-microbiome-testing .right__floor { margin-top: 24px; padding: 18px 22px; background: var(--note-bg); border-radius: var(--radius-md); font-size: 14.5px; line-height: 1.6; color: var(--navy-700); font-style: italic; border: 1px solid var(--note-border); }

/* why context — credentials and scope */
body.page-microbiome-testing .why { padding: clamp(56px, 8vw, 88px) 32px; }
body.page-microbiome-testing .why__inner { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(36px, 5vw, 64px); align-items: start; }
@media (max-width: 880px) { body.page-microbiome-testing .why__inner { grid-template-columns: 1fr; } }
body.page-microbiome-testing .why__scope { margin-top: 18px; padding: 22px 24px; background: var(--note-bg); border: 1px solid var(--note-border); border-radius: var(--radius-md); }
body.page-microbiome-testing .why__scope p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--navy-700); font-weight: 500; }
body.page-microbiome-testing .why__scope p + p { margin-top: 10px; }
body.page-microbiome-testing .credentials { padding: 30px 28px; }
body.page-microbiome-testing .credentials h4 { font-family: var(--font-accent); font-weight: 700; font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--pink-500); margin: 0 0 14px; }
body.page-microbiome-testing .credentials ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
body.page-microbiome-testing .credentials li { font-size: 14.5px; line-height: 1.5; color: var(--navy-700); padding-left: 24px; position: relative; }
body.page-microbiome-testing .credentials li::before { content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--pink-100); border: 2px solid var(--pink-500); }

/* can / cannot */
body.page-microbiome-testing .cancannot { padding: clamp(48px, 6vw, 80px) 32px; background: transparent; }
body.page-microbiome-testing .cancannot__inner { max-width: 980px; margin: 0 auto; }
body.page-microbiome-testing .cancannot__card { padding: clamp(28px, 4vw, 40px); background: var(--white); border-radius: var(--radius-xl); box-shadow: var(--shadow-card-lift); }
body.page-microbiome-testing .cancannot__card p { font-size: 15.5px; line-height: 1.7; color: var(--navy-700); margin: 0 0 14px; }
body.page-microbiome-testing .cancannot__card p:last-child { margin-bottom: 0; }

/* tests offered */
body.page-microbiome-testing .tests__head { text-align: center; max-width: 720px; margin: 0 auto 36px; }
body.page-microbiome-testing .tests__list { display: flex; flex-direction: column; gap: 18px; }
body.page-microbiome-testing .test { padding: 26px 30px 24px; scroll-margin-top: 96px; }
body.page-microbiome-testing .test__num { font-family: var(--font-accent); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; color: var(--pink-500); text-transform: uppercase; margin: 0 0 6px; display: block; }
body.page-microbiome-testing .test h3 { font-family: var(--font-display); font-weight: 800; font-size: 21px; line-height: 1.22; letter-spacing: -0.018em; color: var(--navy-700); margin: 0 0 10px; }
body.page-microbiome-testing .test p { font-size: 14.8px; line-height: 1.65; color: var(--navy-500); margin: 0; }

/* how testing works */
body.page-microbiome-testing .how { background: transparent; padding: clamp(56px, 8vw, 88px) 32px; }
body.page-microbiome-testing .how__inner { max-width: 980px; margin: 0 auto; }
body.page-microbiome-testing .how__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; counter-reset: step; }
@media (max-width: 880px) { body.page-microbiome-testing .how__steps { grid-template-columns: 1fr; } }
body.page-microbiome-testing .how__step { padding: 22px 22px 20px; background: var(--white); border-radius: var(--radius-lg); counter-increment: step; position: relative; box-shadow: var(--shadow-xs); }
body.page-microbiome-testing .how__step::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--font-accent); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; color: var(--pink-500); margin-bottom: 6px; }
body.page-microbiome-testing .how__step h4 { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--navy-700); margin: 0 0 8px; letter-spacing: -0.012em; }
body.page-microbiome-testing .how__step p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--navy-500); }

/* billing */
body.page-microbiome-testing .bill { padding: clamp(48px, 6vw, 80px) 32px; }
body.page-microbiome-testing .bill__inner { max-width: 880px; margin: 0 auto; padding: clamp(32px, 4vw, 44px); background: rgba(255,255,255,0.92); border-radius: var(--radius-xl); border: 1px solid rgba(31,45,64,0.06); box-shadow: var(--shadow-card-lift); }
body.page-microbiome-testing .bill__inner p { font-size: 15px; line-height: 1.65; color: var(--navy-500); margin: 0 0 14px; }
body.page-microbiome-testing .bill__inner p:last-of-type { margin-bottom: 0; }
body.page-microbiome-testing .bill__disclosure { margin-top: 22px; padding: 18px 22px; background: var(--note-bg); border: 1px solid var(--note-border); border-radius: var(--radius-md); font-size: 14.5px; line-height: 1.6; color: var(--navy-700); }
body.page-microbiome-testing .bill__disclosure strong { color: var(--navy-700); font-weight: 700; }

/* locations */
body.page-microbiome-testing .locs__inner { max-width: 880px; margin: 0 auto; text-align: center;
  /* Lifted frosted card (footer-ombré rule: the section over the fade is a card, not bare prose). */
  background: var(--card-lift-bg); backdrop-filter: var(--card-lift-blur); -webkit-backdrop-filter: var(--card-lift-blur);
  border: 1px solid rgba(255,255,255,0.6); border-radius: var(--radius-xl);
  padding: clamp(32px,4.5vw,52px) clamp(28px,4vw,48px); box-shadow: 0 18px 50px -28px rgba(41,52,72,0.35); }
body.page-microbiome-testing .locs__inner .body-lg { margin: 0 0 16px; }

/* CLOSER → LIGHT frosted card + Case-A fade (enabled below). Was a flat navy CTA. */
body.page-microbiome-testing .closer { position: relative; background: transparent; color: var(--navy-500); padding: clamp(48px, 7vw, 80px) 24px; }
body.page-microbiome-testing .footer-ombre-blend { display: block; }
body.page-microbiome-testing .sec--sm,
body.page-microbiome-testing #billing { position: relative; z-index: 1; }
body.page-microbiome-testing .closer__inner { max-width: 760px; margin: 0 auto; text-align: center; background: var(--card-lift-bg); backdrop-filter: var(--card-lift-blur); -webkit-backdrop-filter: var(--card-lift-blur); border: 1px solid rgba(255,255,255,0.6); border-radius: var(--radius-xl); padding: clamp(40px,5.5vw,60px) clamp(28px,4vw,48px); box-shadow: 0 18px 50px -28px rgba(41,52,72,0.35); }
body.page-microbiome-testing .closer .eyebrow { color: var(--pink-600); }
body.page-microbiome-testing .closer h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.14; letter-spacing: -0.02em; color: var(--navy-700); margin: 0 0 18px; text-wrap: balance; }
body.page-microbiome-testing .closer p { font-size: clamp(15px, 1.05vw, 17px); line-height: 1.65; color: var(--navy-500); margin: 0 0 24px; }

/* ─── Mobile: center section heads; keep multi-line body + lists left ─── */
@media (max-width: 760px) {
  body.page-microbiome-testing .right__inner > .eyebrow,
  body.page-microbiome-testing .right__inner > .h2-pink,
  body.page-microbiome-testing .cancannot__inner > .eyebrow,
  body.page-microbiome-testing .cancannot__inner > .h2-pink,
  body.page-microbiome-testing .why__inner > div > .eyebrow,
  body.page-microbiome-testing .why__inner > div > .h2-pink,
  body.page-microbiome-testing .how__inner > .eyebrow,
  body.page-microbiome-testing .how__inner > .h2-pink,
  body.page-microbiome-testing .bill__inner > .eyebrow,
  body.page-microbiome-testing .bill__inner > .h2-pink {
    text-align: center;
  }
}