@font-face {
  font-family: "Raveo";
  src: url("../fonts/Raveo-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Raveo";
  src: url("../fonts/Raveo-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Raveo";
  src: url("../fonts/Raveo-SemiBold.woff2") format("woff2");
  font-weight: 650;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GGG Compare Sans";
  src: url("../fonts/GGGCompare-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GGG Compare Sans";
  src: url("../fonts/GGGCompare-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --white: #f8f7f5;
  --light: #efede6;
  --dark: #181e25;
  --green: #16231b;
  --green-2: #181e25;
  --muted: #6b6a6a;
  --gray: #aaa;
  --line: #e4e4e4;
  --brand: #d6fd70;
  --_colors---color--dark: #181e25;
  --_colors---color--light: #fff;
  --_colors---color--accent: #d6fd70;
  --_colors---color--dark-32: #181e2552;
  --_colors---color--light-16: #ffffff29;
  --_colors---color--accent-64: #d6fd70a3;
  --radius--32: 32px;
  --_buttons---button-large--font-family: "Raveo", Arial, Helvetica, sans-serif;
  --_buttons---button-large--font-size: 16px;
  --_buttons---button-large--line-height: 150%;
  --_buttons---button-large--font-weight: 650;
  --_buttons---button-large--letter-spacing: 0;
  --_buttons---button-large--radius: var(--radius--32);
  --_buttons---button-small--font-family: "Raveo", Arial, Helvetica, sans-serif;
  --_buttons---button-small--font-size: 14px;
  --_buttons---button-small--line-height: 114%;
  --_buttons---button-small--font-weight: 650;
  --_buttons---button-small--letter-spacing: 0;
  --_buttons---button-small--radius: var(--radius--32);
  --ease: cubic-bezier(.22, .82, .24, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* never let the browser re-anchor the viewport when content above or
     around it changes size - on this scroll-driven site those corrections
     read as the page jumping to another section on its own */
  overflow-anchor: none;
  /* kill phantom horizontal scroll from intentional edge-bleeds (approach
     rail, hero words, spinning sparks); `clip` does this without creating a
     scroll container, so the sticky 3D intro keeps working */
  overflow-x: clip;
}

/* iOS can re-target a smooth anchor while its browser chrome collapses.
   Finger scrolling remains native and inertial; only scripted anchor motion
   is made immediate so the page cannot drift back to an old section. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  color: var(--dark);
  background: var(--white);
  font-family: "Raveo", Arial, Helvetica, sans-serif;
  letter-spacing: 0;
  overflow-x: clip;
}

body.menu-open {
  overflow: hidden;
}

body.is-preloading {
  height: 100svh;
  overflow: hidden;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  color: inherit;
  font: inherit;
}

.container {
  width: 100%;
  max-width: 100%;
  padding-inline: 36px;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 2000;
  padding: .75rem 1rem;
  color: var(--white);
  background: var(--green);
  border-radius: 999px;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: none;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  color: var(--dark);
  font-size: 14px;
  background: rgba(248, 247, 245, .48);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid rgba(24, 30, 37, .05);
  transition: color .35s var(--ease), background .35s var(--ease), transform .45s var(--ease);
}

.site-header.is-scrolled {
  color: var(--dark);
  background: rgba(248, 247, 245, .72);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid rgba(24, 30, 37, .08);
}

.header-inner {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-top: 21px;
  padding-bottom: 21px;
}

.header-identity {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.brand {
  display: inline-flex;
  width: 100px;
  align-items: center;
}

.brand img,
.footer-brand img {
  width: 100%;
  height: auto;
}

.site-header:not(.is-scrolled) .brand img {
  filter: none;
}

.yc-badge,
.ggg-yc-badge {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 9px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 999px;
  color: var(--dark);
  background: rgba(255, 255, 255, .42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .68),
    0 8px 24px -14px rgba(24, 30, 37, .4);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}

.yc-badge:hover,
.ggg-yc-badge:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    0 12px 28px -16px rgba(24, 30, 37, .5);
}

.ggg-yc-mark-img {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 6px;
}

.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  margin-left: auto;
}

.desktop-nav a {
  line-height: 1.9;
}

/* "Research" points to a separate portal - a small north-east arrow signals
   that, and nudges on hover. Used on both the landing and the portal nav. */
.nav-portal {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nav-portal-mark {
  font-size: 0.72em;
  line-height: 1;
  opacity: 0.5;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}

.nav-portal:hover .nav-portal-mark {
  opacity: 0.9;
  transform: translate(1px, -1px);
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}

.w-inline-block {
  max-width: 100%;
  display: inline-block;
}

.button-text {
  z-index: 1;
  font-family: var(--_buttons---button-large--font-family);
  font-size: var(--_buttons---button-large--font-size);
  line-height: var(--_buttons---button-large--line-height);
  font-weight: var(--_buttons---button-large--font-weight);
  letter-spacing: var(--_buttons---button-large--letter-spacing);
  margin-top: -.03em;
  position: relative;
}

.button-text-small {
  font-family: var(--_buttons---button-small--font-family);
  font-size: var(--_buttons---button-small--font-size);
  line-height: var(--_buttons---button-small--line-height);
  font-weight: var(--_buttons---button-small--font-weight);
  letter-spacing: var(--_buttons---button-small--letter-spacing);
}

.button-text-mask {
  flex: none;
  height: 22px;
  margin-top: 1px;
  margin-bottom: 3px;
  overflow: hidden;
}

.button-text-mask.small-mask {
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  height: 14px;
  margin-top: 2px;
  margin-bottom: 2px;
}

.gut-intro {
  --gut-intro-ink: #101312;
  --gut-intro-muted: #6a6d69;
  min-height: 600vh;
  min-height: 600svh;
  position: relative;
  isolation: isolate;
  overflow: visible;
  color: var(--gut-intro-ink);
  background:
    radial-gradient(circle at 50% 28%, rgba(214, 253, 112, .22), transparent 28%),
    linear-gradient(180deg, #fff 0%, #f6f8f1 44%, #fff 100%);
  font-family: "Poppins", var(--font-sans);
}

.gut-intro-webgl {
  width: 100%;
  height: 100vh;
  height: 100lvh;
  display: block;
  position: sticky;
  top: 0;
  z-index: 1;
  pointer-events: none;
}

.gut-intro-content {
  position: relative;
  z-index: 2;
  margin-top: -100svh;
  overflow: hidden;
  pointer-events: auto;
}

.gut-intro-panel {
  box-sizing: border-box;
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(64px, 10vw, 210px);
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition: none;
}

.gut-intro-panel h2 {
  max-width: 9ch;
  font-size: clamp(46px, 7.6vw, 122px);
  font-weight: 900;
  line-height: .9;
  letter-spacing: 0;
  text-transform: uppercase;
}

.gut-intro-panel p {
  max-width: 35ch;
  margin-top: 28px;
  color: var(--gut-intro-muted);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 700;
  line-height: 1.55;
}

.gut-intro-side.right {
  align-items: flex-end;
  text-align: right;
}

.gut-intro-side.right p {
  margin-left: auto;
}

.gut-intro-hero {
  position: relative;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 6vh;
}

.gut-intro-hero-field {
  position: absolute;
  inset: clamp(88px, 12vh, 130px) clamp(28px, 5vw, 90px) clamp(120px, 16vh, 180px);
  z-index: 2;
  pointer-events: none;
}

.gut-intro-tree {
  position: absolute;
  top: 2%;
  right: 12%;
  width: clamp(52px, 6.4vw, 96px);
  height: auto;
  filter: invert(87%) sepia(98%) saturate(466%) hue-rotate(28deg) brightness(106%);
  transform-origin: 50% 50%;
  /* slow, calm spin so the lime spark feels alive without being noisy */
  animation: gggSparkSpin 26s linear infinite;
  will-change: transform;
}

@keyframes gggSparkSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .gut-intro-tree { animation: none; transform: rotate(8deg); }
}

.gut-intro-chip {
  position: absolute;
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  border: 1px solid rgba(16, 19, 18, .16);
  border-radius: 999px;
  padding: 7px 14px;
  color: rgba(16, 19, 18, .74);
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 18px 54px rgba(16, 19, 18, .08);
  backdrop-filter: blur(14px);
  font-size: clamp(10px, .82vw, 13px);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  /* the claims drift like the capsules behind them - each chip on its own
     tempo so the field never moves in lockstep */
  animation: gggChipFloat 5.8s ease-in-out infinite;
  will-change: transform;
}

@keyframes gggChipFloat {
  0%, 100% { transform: translate3d(0, -5px, 0); }
  50% { transform: translate3d(0, 6px, 0); }
}

.gut-intro-chip.chip-b { animation-duration: 6.6s; animation-delay: -2.1s; }
.gut-intro-chip.chip-c { animation-duration: 5.2s; animation-delay: -3.4s; }
.gut-intro-chip.chip-d { animation-duration: 7.1s; animation-delay: -1.2s; }
.gut-intro-chip.chip-e { animation-duration: 6.1s; animation-delay: -4.4s; }
.gut-intro-chip.chip-f { animation-duration: 5.5s; animation-delay: -2.8s; }

@media (prefers-reduced-motion: reduce) {
  .gut-intro-chip { animation: none; }
}

.gut-intro-chip.chip-a {
  top: 11%;
  left: 13%;
}

.gut-intro-chip.chip-b {
  top: 24%;
  right: 19%;
}

.gut-intro-chip.chip-c {
  top: 45%;
  left: 7%;
}

.gut-intro-chip.chip-d {
  right: 9%;
  bottom: 30%;
}

.gut-intro-chip.chip-e {
  left: 20%;
  bottom: 15%;
}

.gut-intro-chip.chip-f {
  right: 26%;
  bottom: 9%;
}

.gut-intro-hero-words {
  position: absolute;
  right: clamp(28px, 4vw, 76px);
  bottom: clamp(58px, 8vh, 92px);
  left: clamp(28px, 4vw, 76px);
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  pointer-events: none;
}

.gut-intro-panel .gut-intro-hero-word {
  max-width: 12ch;
  margin: 0;
  color: var(--gut-intro-ink);
  font-size: clamp(22px, 2.25vw, 42px);
  font-weight: 900;
  line-height: 1.16;
  text-transform: uppercase;
}

.gut-intro-panel .gut-intro-hero-word.right {
  text-align: right;
}

.gut-intro-scroll {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(16, 19, 18, .55);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
}

.gut-intro-scroll-chevrons {
  display: grid;
  gap: 3px;
  justify-items: center;
}

/* walkway chevrons: a mechanical cascade pointing the way down */
.gut-intro-scroll-chevrons i {
  width: 12px;
  height: 12px;
  border-right: 2.5px solid rgba(16, 19, 18, .7);
  border-bottom: 2.5px solid rgba(16, 19, 18, .7);
  border-radius: 1px;
  transform: rotate(45deg);
  animation: gutChevron 1.6s ease-in-out infinite;
}

.gut-intro-scroll-chevrons i:nth-child(1) { animation-delay: 0s; }
.gut-intro-scroll-chevrons i:nth-child(2) { animation-delay: .18s; }
.gut-intro-scroll-chevrons i:nth-child(3) { animation-delay: .36s; }

@keyframes gutChevron {
  0%, 55%, 100% { opacity: .18; transform: rotate(45deg) translate(0, 0); }
  22% { opacity: 1; transform: rotate(45deg) translate(2px, 2px); }
}

.gut-intro-footer {
  align-items: center;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0 5vw clamp(18px, 2.4vh, 34px);
  text-align: center;
}

.gut-intro-footer .gut-intro-reveal {
  position: static;
  width: min(100%, 1500px);
}

.gut-intro-panel .gut-intro-giant {
  display: block;
  width: 100%;
  max-width: 100%;
  font-size: clamp(50px, 7.2vw, 126px);
  line-height: .86;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
}

.gut-intro-cta {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  margin-top: clamp(18px, 3vh, 30px);
  padding: 14px 40px;
  border-radius: 999px;
  color: var(--_colors---color--dark);
  background: var(--brand);
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}

.gut-intro-cta:hover {
  transform: scale(1.06);
}

.gut-intro-cta-row {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
  pointer-events: auto;
}

.gut-intro-fine {
  max-width: 44ch;
  margin-top: clamp(12px, 2vh, 20px);
  margin-inline: auto;
  color: rgba(16, 19, 18, .5);
  font-size: 12px;
}

.gut-intro-reveal {
  opacity: 0;
  transform: translateY(44px);
  transition:
    opacity .72s cubic-bezier(.16, 1, .3, 1),
    transform .72s cubic-bezier(.16, 1, .3, 1);
}

.gut-intro-reveal.visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .gut-intro-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 760px) {
  .gut-intro-panel {
    justify-content: flex-start;
    padding: clamp(86px, 13svh, 104px) 7vw 0;
  }

  .gut-intro-panel.gut-intro-hero {
    justify-content: flex-end;
    align-items: center;
    padding: 0 7vw 5vh;
  }

  .gut-intro-hero-field {
    inset: clamp(84px, 12svh, 108px) 7vw clamp(120px, 18svh, 164px);
  }

  .gut-intro-tree {
    top: 0;
    right: 2%;
    width: clamp(48px, 13vw, 72px);
  }

  .gut-intro-chip {
    min-height: 26px;
    padding: 6px 10px;
    font-size: 9px;
    background: rgba(255, 255, 255, .62);
  }

  .gut-intro-chip.chip-a {
    top: 12%;
    left: 0;
  }

  .gut-intro-chip.chip-b {
    top: 28%;
    right: 0;
  }

  .gut-intro-chip.chip-c {
    top: auto;
    /* Keep the two lower claims on one deliberate row and leave a soft,
       device-independent gap above the centered microbiome sentence. */
    bottom: calc(clamp(240px, 31svh, 280px) + 96px - clamp(120px, 18svh, 164px));
    left: 0;
  }

  .gut-intro-chip.chip-d {
    right: 2%;
    bottom: calc(clamp(240px, 31svh, 280px) + 96px - clamp(120px, 18svh, 164px));
  }

  .gut-intro-chip.chip-e,
  .gut-intro-chip.chip-f {
    display: none;
  }

  .gut-intro-panel h2 {
    max-width: 100%;
    font-size: clamp(36px, 9.4vw, 56px);
    line-height: .94;
  }

  .gut-intro-panel p {
    max-width: min(36ch, 84vw);
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.45;
  }

  .gut-intro-side.right p {
    max-width: min(34ch, 78vw);
  }

  .gut-intro-hero-words {
    right: 7vw;
    bottom: clamp(66px, 10vh, 94px);
    left: 7vw;
    gap: 18px;
  }

  .gut-intro-panel .gut-intro-hero-word {
    /* the verified-probiotic wording is longer than the old two-word pairs:
       give it one more ch and a slightly smaller cap so each block stays
       ~3 lines and clears the tagline above */
    max-width: 13ch;
    font-size: clamp(15px, 3.6vw, 20px);
    line-height: 1.16;
  }

  .gut-intro-scroll {
    font-size: 18px;
  }

  .gut-intro-footer {
    justify-content: flex-end;
    padding: clamp(86px, 13svh, 104px) 7vw clamp(18px, 3vh, 28px);
  }

  .gut-intro-panel .gut-intro-giant {
    font-size: clamp(40px, 11.5vw, 66px);
    line-height: .9;
    overflow-wrap: anywhere;
  }

  .gut-intro-cta {
    margin-top: 20px;
    min-height: 48px;
    padding-inline: 24px;
    font-size: 15px;
  }

  .gut-intro-cta-row {
    gap: 8px;
    margin-bottom: 14px;
  }

  .gut-intro-fine {
    margin-top: 14px;
    font-size: 11px;
  }
}

.button-bg {
  border-radius: var(--radius--32);
  background-color: var(--_colors---color--dark);
  position: absolute;
  inset: 0%;
}

.button-bg:where(.w-variant-c809d80b-9246-fa83-82c0-f51abafffa03),
.button-bg.accent {
  background-color: var(--_colors---color--accent);
}

.cta-small {
  min-height: 34px;
  color: var(--_colors---color--light);
  text-align: center;
  padding: 8px 16px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--_buttons---button-small--radius);
}

.cta-small:where(.w-variant-c809d80b-9246-fa83-82c0-f51abafffa03) {
  color: var(--_colors---color--dark);
}

.cta-main {
  min-height: 42px;
  border-radius: var(--_buttons---button-large--radius);
  font-family: var(--_buttons---button-large--font-family);
  color: var(--_colors---color--light);
  font-size: var(--_buttons---button-large--font-size);
  line-height: var(--_buttons---button-large--line-height);
  font-weight: var(--_buttons---button-large--font-weight);
  letter-spacing: var(--_buttons---button-large--letter-spacing);
  flex: none;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  transition: color .2s, background-color .2s, border-color .2s, transform .28s var(--ease);
  display: inline-flex;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.cta-main.accent,
.cta-main.dark-outlined {
  color: var(--_colors---color--dark);
}

.cta-main:hover,
.cta-small:hover {
  transform: translateY(-2px);
}

.header-actions .cta-small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cta {
  --bg: transparent;
  --fg: currentColor;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 0 21px 0 26px;
  border: 1.5px solid transparent;
  border-radius: 100px;
  color: var(--fg);
  background: var(--bg);
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  transition: transform .28s var(--ease), background .28s var(--ease), color .28s var(--ease);
}

.cta.dark {
  --bg: var(--green);
  --fg: var(--white);
}

.cta.light {
  --bg: var(--white);
  --fg: var(--green);
}

.cta:hover {
  transform: translateY(-2px);
}

.cta i,
.scroll-cta i {
  width: 16px;
  height: 16px;
  position: relative;
}

.cta i::before,
.cta i::after,
.scroll-cta i::before,
.scroll-cta i::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.cta i::before {
  right: 2px;
  top: 2px;
  width: 9px;
  height: 1.5px;
  transform: rotate(45deg);
  transform-origin: right center;
}

.cta i::after {
  right: 2px;
  top: 2px;
  width: 1.5px;
  height: 9px;
}

.menu-toggle {
  display: none;
  width: 54px;
  height: 54px;
  position: relative;
  border: 0;
  border-radius: 50%;
  color: var(--white);
  background: var(--green);
  cursor: pointer;
}

.menu-toggle span {
  position: absolute;
  left: 25%;
  width: 50%;
  height: 2px;
  border-radius: 10px;
  background: currentColor;
  transition: transform .28s var(--ease), top .28s var(--ease), opacity .2s var(--ease);
}

.menu-toggle span:first-child {
  top: 20px;
}

.menu-toggle span:nth-child(2) {
  top: 26px;
}

.menu-toggle span:last-child {
  top: 33px;
}

.menu-toggle[aria-expanded="true"] span:first-child {
  top: 18px;
  left: 17px;
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:last-child {
  top: 37px;
  left: 17px;
  transform: rotate(-45deg);
}

.mobile-menu {
  display: none;
}

.preloader {
  position: fixed;
  inset: 0;
  z-index: 5000;
  overflow: hidden;
  color: var(--dark);
  background: var(--white);
  transform: translateY(0);
  will-change: transform, opacity;
  transition:
    transform .95s cubic-bezier(.76, 0, .24, 1),
    opacity .42s var(--ease) .48s,
    visibility .95s step-end;
}

.preloader-logo,
.preloader-waitlist,
.preloader-left,
.preloader-right {
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}

.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-102%);
  pointer-events: none;
}

.preloader.is-hidden .preloader-logo,
.preloader.is-hidden .preloader-waitlist,
.preloader.is-hidden .preloader-left,
.preloader.is-hidden .preloader-right {
  opacity: 0;
  transform: translateY(-14px);
}

.preloader-logo {
  position: absolute;
  left: clamp(28px, 4.1vw, 78px);
  top: clamp(34px, 6.6vh, 76px);
  width: clamp(120px, 7.4vw, 150px);
}

.preloader-waitlist {
  position: absolute;
  right: clamp(36px, 4vw, 72px);
  top: clamp(36px, 6.4vh, 76px);
  z-index: 2;
}

.preloader-bottle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(36vw, 540px);
  height: auto;
  transform: translate(-50%, -50%);
  transform-origin: 50% 55%;
  animation: preloader-bottle-arrive 3.2s cubic-bezier(.18, .88, .24, 1) both;
  transition: opacity .45s var(--ease), transform .52s var(--ease);
}

.preloader.is-complete .preloader-bottle {
  animation: none;
  transform: translate(-50%, -50%) rotate(-1deg) scale(1.03);
}

.preloader.is-hidden .preloader-bottle {
  opacity: 0;
  transform: translate(-50%, -68%) rotate(-2deg) scale(.98);
}

.preloader-left,
.preloader-right {
  position: absolute;
  bottom: clamp(42px, 5.6vh, 86px);
  margin: 0;
  color: var(--dark);
  font-size: clamp(24px, 2.1vw, 42px);
  font-weight: 650;
  line-height: 1.2;
  text-transform: uppercase;
}

.preloader-left {
  left: clamp(28px, 3.3vw, 62px);
}

.preloader-right {
  right: clamp(28px, 3.3vw, 62px);
  text-align: right;
}

@keyframes preloader-bottle-arrive {
  0% {
    opacity: 0;
    transform: translate(-50%, -45%) rotate(-7deg) scale(.88);
  }

  18% {
    opacity: 1;
  }

  58% {
    transform: translate(-50%, -51%) rotate(2deg) scale(1.02);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-1deg) scale(1.03);
  }
}

.hero {
  min-height: 100svh;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--white);
  background: var(--green);
}

.hero-video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}

.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(31, 54, 49, .74), rgba(31, 54, 49, .2) 48%, rgba(31, 54, 49, .52)),
    linear-gradient(180deg, rgba(31, 54, 49, .12), rgba(31, 54, 49, .74));
}

.hero-inner {
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: 132px;
  padding-bottom: 52px;
}

.hero h1,
.hero h2#hero-title {
  align-self: start;
  margin: 80px 0 0;
  color: var(--white);
  font-size: clamp(76px, 10.8vw, 168px);
  font-weight: 400;
  line-height: .88;
  max-width: none;
  z-index: 2;
}

.hero h1 em,
.hero h2#hero-title em {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
}

.hero-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 36px;
}

.hero-bottom p {
  width: min(440px, 38vw);
  margin: 0;
  color: var(--white);
  font-size: clamp(26px, 2.3vw, 42px);
  font-weight: 500;
  line-height: 1.08;
}

.hero-bottom em {
  font-style: italic;
}

.scroll-cta {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  color: var(--white);
  font-size: 18px;
  text-transform: uppercase;
}

.scroll-cta i::before {
  left: 7px;
  top: 0;
  width: 1.5px;
  height: 17px;
}

.scroll-cta i::after {
  left: 3px;
  bottom: 0;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  background: transparent;
  transform: rotate(45deg);
}

.science-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}

.science-action {
  display: inline-flex;
  min-width: 154px;
  min-height: 58px;
  padding: 8px 9px 8px 22px;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: transform .25s ease, background-color .25s ease, border-color .25s ease;
}

.science-action-primary {
  color: var(--green);
  border-color: var(--brand);
  background: var(--brand);
}

.science-action i {
  position: relative;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  color: var(--green);
  background: var(--white);
}

.science-action-primary i {
  color: var(--white);
  background: var(--green);
}

.science-action i::before,
.science-action i::after {
  content: "";
  position: absolute;
}

.science-action i::before {
  top: 19px;
  left: 12px;
  width: 15px;
  height: 1.5px;
  background: currentColor;
}

.science-action i::after {
  top: 15px;
  right: 12px;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.science-action:hover,
.science-action:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .62);
  background: rgba(255, 255, 255, .17);
}

.science-action-primary:hover,
.science-action-primary:focus-visible {
  color: var(--green);
  border-color: #e3ff9c;
  background: #e3ff9c;
}

.section {
  position: relative;
  background: var(--white);
}

.impact-section {
  padding: 120px 0 165px;
}

.impact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(480px, .82fr);
  gap: 7vw;
  align-items: start;
}

.impact-visual {
  position: sticky;
  top: 116px;
  overflow: hidden;
  border-radius: 0;
}

.impact-visual img {
  width: 100%;
  height: clamp(420px, 36vw, 620px);
  object-fit: cover;
  background: #efede6;
}

.impact-copy h2 {
  max-width: 560px;
  margin: 0 0 42px;
  color: var(--dark);
  font-size: clamp(36px, 3.15vw, 58px);
  font-weight: 500;
  line-height: .96;
}

.accordion-list {
  display: grid;
}

.accordion-list details {
  border-bottom: 1px solid var(--line);
}

.accordion-list details:first-child {
  border-top: 1px solid var(--line);
}

.accordion-list summary {
  min-height: 58px;
  display: grid;
  grid-template-columns: 58px 1fr 18px;
  align-items: center;
  gap: 22px;
  cursor: pointer;
  list-style: none;
  color: var(--dark);
}

.accordion-list summary::-webkit-details-marker {
  display: none;
}

.accordion-list summary span {
  color: var(--muted);
  font-size: 12px;
}

.accordion-list summary strong {
  font-size: 15px;
  font-weight: 650;
}

.accordion-list summary i {
  width: 14px;
  height: 14px;
  position: relative;
}

.accordion-list summary i::before,
.accordion-list summary i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 1.5px;
  background: var(--dark);
  transform: translate(-50%, -50%);
}

.accordion-list summary i::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.accordion-list details[open] summary i::after {
  transform: translate(-50%, -50%) rotate(0);
}

.accordion-list p {
  max-width: 620px;
  margin: 0;
  padding: 0 0 28px 80px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}

/* symptom accordion: tag + description + how-we-help + citation */
.accordion-body {
  max-width: 660px;
  padding: 0 0 28px 80px;
}

.accordion-list .accordion-body p {
  max-width: none;
  margin: 0 0 12px;
  padding: 0;
}

.accordion-list .accordion-body p:last-child {
  margin-bottom: 0;
}

.accordion-tag {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--dark);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .5;
}

.accordion-help {
  color: var(--dark);
}

.accordion-cite {
  font-size: 14px;
  line-height: 1.5;
}

.accordion-cite cite {
  font-style: normal;
  font-weight: 600;
  color: var(--dark);
}

.impact-summary {
  display: grid;
  gap: 6px;
  max-width: 660px;
  margin-top: 36px;
  padding-left: 80px;
}

.impact-summary strong {
  color: var(--dark);
  font-size: clamp(18px, 1.3vw, 22px);
  font-weight: 650;
  line-height: 1.35;
}

.impact-summary span {
  color: var(--muted);
  font-size: 16px;
}

.approach-section {
  padding: clamp(120px, 10.8vw, 210px) 0 clamp(120px, 9.5vw, 185px);
  overflow: hidden;
}

.approach-shell > h2,
.nutrient-section h2,
.process-section h2,
.ingredient-section h2,
.community-section h2,
.image-cta h2 {
  margin: 0;
  color: var(--dark);
  font-size: clamp(36px, 4vw, 72px);
  font-weight: 500;
  line-height: .95;
}

.approach-shell > h2 {
  max-width: 1100px;
  margin-bottom: clamp(84px, 11.8vw, 340px);
  font-size: clamp(56px, 7.2vw, 138px);
  line-height: .97;
}

/* when an intro line follows the heading, the heading takes a small gap and
   the intro carries the space before the carousel */
.approach-shell > h2:has(+ .approach-intro) {
  margin-bottom: clamp(18px, 1.6vw, 32px);
}

.approach-intro {
  max-width: 46ch;
  margin: 0 0 clamp(56px, 8vw, 200px);
  color: var(--muted);
  font-size: clamp(17px, 1.5vw, 24px);
  line-height: 1.45;
}

@media (max-width: 900px) {
  .approach-intro {
    margin-bottom: 32px;
    font-size: 17px;
  }
}

.approach-wrapper {
  display: grid;
  grid-template-columns: minmax(390px, 1fr) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 96px);
  align-items: stretch;
}

.approach-block {
  min-width: 0;
}

.approach-block:first-child {
  min-height: clamp(410px, 30.5vw, 610px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.approach-text-stack {
  display: grid;
  width: 100%;
  max-width: clamp(430px, 33vw, 690px);
}

.approach-text-slide {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transform: translateY(24px);
  transition: opacity .46s var(--ease), transform .58s var(--ease);
}

.approach-text-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.approach-text-slide h3 {
  margin: 0 0 clamp(22px, 1.8vw, 34px);
  color: var(--dark);
  font-size: clamp(26px, 1.55vw, 38px);
  font-weight: 650;
  line-height: 1.18;
}

.approach-text-slide p,
.nutrient-section p,
.process-top p,
.community-grid p {
  max-width: 640px;
  margin: 0;
  color: var(--dark);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.46;
}

.approach-text-slide p {
  line-height: 1.86;
}

.approach-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 330px);
  margin-top: 54px;
}

.approach-count {
  display: flex;
  align-items: baseline;
  gap: 5px;
  color: var(--dark);
  font-size: clamp(34px, 2.5vw, 54px);
  font-weight: 650;
  line-height: 1;
}

.approach-buttons {
  display: flex;
  align-items: center;
  gap: 14px;
}

.approach-arrow {
  position: relative;
  width: clamp(42px, 2.8vw, 56px);
  height: clamp(42px, 2.8vw, 56px);
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
  transition: opacity .2s ease, background .2s ease, border-color .2s ease;
}

.approach-arrow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 13px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  /* the chevron's ink sits right of its box center: -72%/-28% lands both
     glyphs symmetrically in their circles (tip a hair past true center) */
  transform: translate(-72%, -50%) rotate(45deg);
}

.approach-prev::before {
  transform: translate(-28%, -50%) rotate(-135deg);
}

.approach-arrow:hover:not(:disabled) {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--white);
}

.approach-arrow:disabled {
  opacity: .32;
  cursor: default;
}

.approach-image-block {
  display: flex;
  align-items: flex-start;
}

.approach-image-window {
  width: calc(100% + 36px);
  overflow: visible;
}

.approach-card-track {
  display: flex;
  gap: clamp(16px, 1.25vw, 36px);
  transition: transform .8s var(--ease);
  will-change: transform;
}

.approach-card {
  flex: 0 0 clamp(270px, 19.1vw, 432px);
  opacity: .48;
  transition: opacity .35s ease, transform .5s var(--ease);
}

.approach-card.is-active {
  opacity: 1;
}

.approach-card img {
  width: 100%;
  aspect-ratio: 366 / 438;
  object-fit: cover;
  background: #dfe7eb;
}

.approach-card h3 {
  margin: clamp(8px, .45vw, 12px) 0 0;
  color: var(--dark);
  font-size: clamp(18px, 1.25vw, 28px);
  font-weight: 650;
  line-height: 1.04;
  text-transform: uppercase;
}

.approach-card p,
.ingredient-rail p,
.community-rail p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.approach-card p {
  display: none;
  margin-top: 12px;
}

.nutrient-section {
  position: relative;
  overflow-x: clip;
  min-height: 500vh;
  min-height: 500svh;
  padding: 0;
}

.nutrient-grid {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(520px, .95fr);
  gap: 7vw;
  align-items: center;
  overflow: hidden;
  padding-top: clamp(88px, 11vh, 120px);
  padding-bottom: clamp(28px, 5vh, 56px);
}

.nutrient-capsules {
  position: relative;
  min-height: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.nutrient-capsules img {
  width: min(80%, 560px);
  height: auto;
  mix-blend-mode: multiply;
  filter: contrast(1.06) saturate(.92);
  transform: translate3d(0, var(--nutrient-y, 0), 0) rotate(var(--nutrient-rotate, 0deg));
  transition: transform .16s linear;
}

.nutrient-copy {
  display: grid;
  align-content: center;
  min-height: 0;
  padding-top: 0;
}

.nutrient-section h2 {
  position: relative;
  top: auto;
  max-width: 760px;
  min-height: auto;
  padding-top: 0;
  margin-bottom: clamp(34px, 5vh, 64px);
  background: transparent;
  z-index: 1;
}

.nutrient-list {
  position: relative;
  min-height: clamp(300px, 42vh, 480px);
  padding-bottom: 0;
}

.nutrient-row {
  position: absolute;
  inset: 0;
  max-width: 760px;
  opacity: 0;
  transform: translateY(26px);
  pointer-events: none;
  transition: opacity .38s var(--ease), transform .5s var(--ease);
}

.nutrient-row.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nutrient-row span {
  display: block;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.nutrient-row p {
  margin: 0;
  color: var(--dark);
  font-size: clamp(20px, 1.25vw, 30px);
  font-weight: 650;
  line-height: 1.55;
}

.process-section {
  padding: clamp(40px, 3.4vw, 62px) 0 clamp(36px, 3vw, 54px);
  color: var(--white);
  background: #2f3834;
  overflow: hidden;
}

.process-top {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(520px, 1fr);
  gap: 8vw;
  align-items: start;
  min-height: clamp(150px, 12vw, 232px);
}

.process-top h2,
.process-top p {
  color: var(--white);
}

.process-principles {
  display: flex;
  align-items: flex-start;
  gap: clamp(28px, 4vw, 76px);
  margin-top: clamp(26px, 2.6vw, 56px);
}

.process-principles article {
  display: grid;
  gap: 16px;
  width: 140px;
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
  line-height: 1.2;
}

.process-principles i {
  width: clamp(58px, 5.2vw, 100px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background:
    repeating-linear-gradient(30deg, transparent 0 7px, rgba(255, 255, 255, .22) 8px 9px),
    radial-gradient(circle, rgba(255, 255, 255, .1), transparent 62%);
  animation: processIconPulse 4.8s ease-in-out infinite;
}

.process-principles article:nth-child(2) i {
  animation-delay: .8s;
  background:
    repeating-radial-gradient(circle, transparent 0 10px, rgba(255, 255, 255, .2) 11px 12px),
    radial-gradient(circle, rgba(255, 255, 255, .08), transparent 62%);
}

.process-principles article:nth-child(3) i {
  animation-delay: 1.5s;
}

.process-slider {
  margin-top: clamp(40px, 3.5vw, 72px);
}

.process-control,
.community-control {
  display: flex;
  align-items: center;
  gap: 34px;
  margin-bottom: clamp(24px, 3vw, 58px);
}

.process-count {
  display: flex;
  align-items: baseline;
  gap: 5px;
  color: currentColor;
  font-size: clamp(28px, 2.1vw, 44px);
  font-weight: 650;
  line-height: 1;
}

.process-buttons {
  display: flex;
  gap: 14px;
}

.process-arrow {
  color: var(--white);
  background: transparent;
  border-color: rgba(255, 255, 255, .25);
}

.process-window,
.ingredient-window,
.community-window {
  overflow: visible;
}

.process-cards,
.ingredient-rail,
.community-rail {
  display: flex;
  gap: clamp(16px, 1.25vw, 36px);
  transition: transform .75s var(--ease);
  will-change: transform;
}

.process-cards article {
  flex: 0 0 clamp(320px, 24.5vw, 470px);
  min-height: clamp(360px, 26vw, 480px);
  padding: clamp(20px, 1.25vw, 32px);
  color: var(--green);
  background: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  row-gap: clamp(24px, 2.1vw, 44px);
  opacity: .56;
  transition: opacity .35s ease;
}

.process-cards article.is-active {
  opacity: 1;
}

.process-cards span {
  display: block;
  margin-bottom: clamp(24px, 2vw, 46px);
  color: var(--green);
  font-size: 14px;
  font-weight: 650;
}

.process-cards p {
  margin: 0;
  color: var(--green);
  font-size: clamp(18px, 1.15vw, 24px);
  line-height: 1.5;
}

.process-cards img {
  width: 100%;
  aspect-ratio: 744 / 452;
  object-fit: cover;
  background: var(--light);
}

.care-flow {
  margin-top: clamp(34px, 3vw, 56px);
}

.care-flow-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.care-flow-rail::before,
.care-flow-rail::after {
  content: "";
  position: absolute;
  top: 21px;
  right: 0;
  left: 0;
  height: 1px;
}

.care-flow-rail::before {
  background: rgba(255, 255, 255, .2);
}

.care-flow-rail::after {
  background: var(--brand);
  box-shadow: 0 0 20px rgba(214, 253, 112, .28);
  transform: scaleX(0);
  transform-origin: left center;
  animation: careFlowLine 1.15s .15s var(--ease) forwards;
}

.care-flow-step {
  position: relative;
  min-height: clamp(260px, 18vw, 340px);
  padding: 62px clamp(18px, 1.45vw, 28px) clamp(22px, 2vw, 36px) 0;
  outline: none;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, .11);
  background: transparent;
  transition: opacity .32s var(--ease), transform .32s var(--ease);
}

.care-flow-step:not(:first-child) {
  padding-left: clamp(18px, 1.45vw, 28px);
}

.care-flow-step:last-child {
  padding-right: 0;
  border-right: 0;
}

.care-flow-step:hover,
.care-flow-step:focus-visible {
  z-index: 2;
  transform: translateY(-4px);
}

.care-flow-rail:has(.care-flow-step:hover) .care-flow-step:not(:hover),
.care-flow-rail:has(.care-flow-step:focus-visible) .care-flow-step:not(:focus-visible) {
  opacity: .46;
}

.care-flow-node {
  position: absolute;
  z-index: 2;
  top: 13px;
  left: 0;
  width: 17px;
  height: 17px;
  border: 5px solid #2f3834;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 1px rgba(214, 253, 112, .78), 0 0 22px rgba(214, 253, 112, .22);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}

.care-flow-step:hover .care-flow-node,
.care-flow-step:focus-visible .care-flow-node {
  box-shadow: 0 0 0 5px rgba(214, 253, 112, .13), 0 0 25px rgba(214, 253, 112, .34);
  transform: scale(1.15);
}

.care-flow-number {
  display: block;
  margin-bottom: clamp(44px, 3.8vw, 72px);
  color: rgba(255, 255, 255, .24);
  font-size: clamp(42px, 4.1vw, 78px);
  font-weight: 500;
  letter-spacing: -.06em;
  line-height: .8;
}

.care-flow-step h3 {
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(22px, 1.45vw, 30px);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.02;
}

.care-flow-step p {
  margin: 0;
  max-width: 220px;
  color: rgba(255, 255, 255, .68);
  font-size: clamp(14px, .86vw, 17px);
  line-height: 1.52;
}

.care-flow-branch {
  position: absolute;
  right: clamp(18px, 1.45vw, 28px);
  bottom: clamp(20px, 1.5vw, 28px);
  left: clamp(18px, 1.45vw, 28px);
  padding: 13px 0 0 22px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.care-flow-branch::before {
  content: "";
  position: absolute;
  top: 13px;
  bottom: 2px;
  left: 0;
  width: 1px;
  background: var(--brand);
}

.care-flow-branch span,
.care-flow-outcomes span {
  display: block;
  color: rgba(255, 255, 255, .56);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.25;
  text-transform: uppercase;
}

.care-flow-branch strong {
  display: block;
  margin-top: 5px;
  color: var(--brand);
  font-size: 16px;
  font-weight: 500;
}

.care-flow-outcomes {
  display: grid;
  grid-template-columns: minmax(240px, .8fr) minmax(220px, .7fr) minmax(300px, 1fr);
  gap: 0;
  width: 100%;
  margin-top: clamp(18px, 2.2vw, 40px);
  border-top: 1px solid rgba(255, 255, 255, .16);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  background: transparent;
}

.care-flow-outcomes article,
.care-flow-outcome-label {
  position: relative;
  min-height: clamp(128px, 9vw, 170px);
  padding: clamp(24px, 2vw, 38px);
  border-right: 1px solid rgba(255, 255, 255, .16);
  background: transparent;
}

.care-flow-outcome-label {
  padding-left: 0;
}

.care-flow-outcome-label strong {
  display: block;
  max-width: 280px;
  margin-top: 12px;
  color: #fff;
  font-size: clamp(24px, 1.7vw, 34px);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.05;
}

.care-flow-outcomes strong {
  display: block;
  margin-top: 12px;
  color: #fff;
  font-size: clamp(20px, 1.45vw, 29px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.12;
}

.care-flow-outcomes .care-flow-refund {
  background: rgba(255, 255, 255, .025);
}

.care-flow-outcomes .care-flow-success {
  border-right: 0;
  background: var(--brand);
}

.care-flow-outcomes .care-flow-success span {
  color: rgba(24, 30, 37, .62);
}

.care-flow-outcomes .care-flow-success strong {
  color: var(--dark);
}

.comparison-section {
  padding: clamp(96px, 8vw, 160px) 0 clamp(108px, 9vw, 180px);
  color: var(--dark);
  background: #f8f7f5;
}

.comparison-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .72fr);
  gap: clamp(48px, 8vw, 150px);
  align-items: end;
  margin-bottom: clamp(64px, 6vw, 112px);
}

.comparison-head h2,
.comparison-head p {
  margin: 0;
}

.comparison-head p {
  max-width: 540px;
  color: var(--muted);
  font-size: clamp(18px, 1.25vw, 25px);
  line-height: 1.45;
}

.comparison-list-wrap {
  position: relative;
  border: 1px solid var(--line);
  border-radius: clamp(18px, 1.6vw, 28px);
  overflow: hidden;
  background: var(--white);
}

.comparison-axis,
.comparison-item {
  display: grid;
  grid-template-columns: minmax(150px, .56fr) minmax(0, 1fr) minmax(0, 1.08fr);
}

.comparison-axis {
  min-height: 0;
  border-bottom: 1px solid var(--line);
}

.comparison-axis strong {
  display: flex;
  align-items: center;
  padding: clamp(16px, 1.4vw, 22px) clamp(22px, 2.3vw, 44px);
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .11em;
  text-transform: uppercase;
}

/* thin dividers between the three columns only */
.comparison-axis strong + strong,
.comparison-item h3 ~ p,
.comparison-item p + p {
  border-left: 1px solid var(--line);
}

.comparison-axis strong:last-child {
  color: var(--dark);
  background: var(--brand);
  border-left-color: rgba(102, 132, 22, .35);
}

.comparison-item {
  position: relative;
  min-height: 0;
  border-bottom: 1px solid var(--line);
  transition: background .3s var(--ease);
}

.comparison-item:last-child {
  border-bottom: 0;
}

.comparison-item h3,
.comparison-item p {
  margin: 0;
}

.comparison-item h3 {
  display: flex;
  align-items: center;
  padding: clamp(20px, 1.9vw, 32px) clamp(18px, 1.7vw, 30px) clamp(20px, 1.9vw, 32px) clamp(22px, 2.3vw, 44px);
  color: var(--dark);
  font-size: clamp(13px, .86vw, 16px);
  font-weight: 650;
  letter-spacing: .04em;
  line-height: 1.3;
  text-transform: uppercase;
}

.comparison-item p {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1vw, 16px);
  padding: clamp(20px, 1.9vw, 32px) clamp(22px, 2vw, 40px);
  font-size: clamp(16px, 1.08vw, 21px);
  line-height: 1.32;
}

/* leading status pill: muted cross for typical, lime check for GutGutGoose */
.comparison-item p::before {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.comparison-item p span {
  display: none;
}

.comparison-typical {
  color: #6f736f;
}

.comparison-typical::before {
  content: "\00d7";
  background: rgba(24, 30, 37, .06);
  color: #9da19f;
}

.comparison-ours {
  color: var(--dark);
  background: rgba(214, 253, 112, .14);
  font-weight: 500;
  border-left-color: rgba(102, 132, 22, .28);
}

.comparison-ours::before {
  content: "\2713";
  background: var(--brand);
  color: var(--dark);
}

.comparison-item:hover {
  background: rgba(24, 30, 37, .02);
}

.comparison-item:hover .comparison-ours {
  background: rgba(214, 253, 112, .24);
}

@keyframes careFlowLine {
  to { transform: scaleX(1); }
}

.ingredient-section {
  min-height: 760px;
  padding: clamp(90px, 8vw, 150px) 0 clamp(115px, 9vw, 180px);
  overflow: hidden;
}

.ingredient-head {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(520px, 1fr);
  gap: 8vw;
  align-items: start;
}

.ingredient-head > p {
  margin: 0;
  color: var(--green);
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
}

.ingredient-head h2 {
  max-width: 650px;
}

.ingredient-controls {
  display: flex;
  align-items: center;
  gap: 34px;
  margin-top: 38px;
}

.ingredient-count {
  color: var(--dark);
}

.approach-image-window,
.process-window,
.ingredient-window,
.community-window {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.approach-image-window.is-dragging,
.process-window.is-dragging,
.ingredient-window.is-dragging,
.community-window.is-dragging {
  cursor: grabbing;
}

.approach-card-track.is-dragging,
.process-cards.is-dragging,
.ingredient-rail.is-dragging,
.community-rail.is-dragging {
  transition: none;
}

.ingredient-window {
  margin-top: clamp(110px, 11vw, 210px);
}

.ingredient-rail article {
  flex: 0 0 clamp(190px, 14vw, 280px);
  min-height: 250px;
  display: grid;
  align-content: start;
  gap: 18px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
  opacity: .5;
  transition: opacity .35s ease, transform .35s var(--ease);
}

.ingredient-rail article.is-active {
  opacity: 1;
}

.ingredient-rail img {
  width: clamp(116px, 8.8vw, 168px);
  height: clamp(116px, 8.8vw, 168px);
  border-radius: 50%;
  object-fit: cover;
}

.ingredient-rail h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
}

.community-section {
  padding: clamp(52px, 4.8vw, 88px) 0 clamp(60px, 5.5vw, 104px);
  overflow: hidden;
}

.community-grid {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(520px, 1fr);
  gap: 8vw;
  align-items: start;
}

.community-grid p + p {
  margin-top: 26px;
}

.community-slider {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(520px, 1fr);
  gap: 8vw;
  align-items: end;
  margin-top: clamp(80px, 9vw, 170px);
}

.community-copy-stack {
  display: grid;
}

.community-copy-stack article {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .42s var(--ease), transform .5s var(--ease);
}

.community-copy-stack article.is-active {
  opacity: 1;
  transform: translateY(0);
}

.community-copy-stack h3,
.community-rail h3 {
  margin: 0;
  font-size: clamp(20px, 1.4vw, 30px);
  font-weight: 650;
}

.community-copy-stack p {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 15px;
}

.community-control {
  grid-column: 1;
  align-self: start;
  margin: 96px 0 0;
  color: var(--dark);
}

.community-window {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.community-rail article {
  flex: 0 0 clamp(250px, 19vw, 365px);
  display: grid;
  gap: 14px;
  opacity: .5;
  transition: opacity .35s ease;
}

.community-rail article.is-active {
  opacity: 1;
}

.community-rail img {
  width: 100%;
  aspect-ratio: 366 / 474;
  object-fit: cover;
  filter: grayscale(.05);
}

@keyframes processIconPulse {
  0%,
  100% {
    transform: scale(.96) rotate(0deg);
    opacity: .58;
  }

  50% {
    transform: scale(1.04) rotate(9deg);
    opacity: 1;
  }
}

.image-cta {
  position: relative;
  min-height: 180svh;
  overflow: clip;
  color: var(--white);
  background: #0d1411;
}

.image-cta-tree-video {
  position: sticky;
  top: 0;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100svh;
  object-fit: cover;
  object-position: 52% 50%;
  background: url("../videos/ggg-tree-poster.jpg") 52% 50% / cover no-repeat;
  border: 0;
  opacity: 1;
  filter: saturate(1.04) contrast(1.01);
  mix-blend-mode: normal;
  pointer-events: none;
}

.image-cta-bg-video {
  display: none;
}

.image-cta::after {
  content: "";
  position: sticky;
  top: 0;
  display: block;
  height: 100svh;
  margin-top: -100svh;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .24), rgba(0, 0, 0, .08) 48%, rgba(0, 0, 0, 0)),
    linear-gradient(180deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .02) 54%, rgba(0, 0, 0, .28));
  pointer-events: none;
}

.image-cta-copy {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  gap: 22px;
  align-content: end;
  width: min(720px, 58vw);
  min-height: 100svh;
  margin-top: -100svh;
  padding: 0 clamp(32px, 6vw, 92px) clamp(64px, 9vh, 98px);
}

.image-cta-copy .cta-main {
  justify-self: start;
  width: max-content;
  min-width: 0;
  padding-inline: 22px;
}

.image-cta p {
  margin: 0;
  font-size: 22px;
}

.image-cta h2 {
  color: var(--white);
  font-size: clamp(60px, 7.2vw, 108px);
}

.site-footer {
  color: var(--white);
  background: var(--green);
  padding: 120px 0 36px;
}

.footer-top {
  min-height: 150px;
  display: grid;
  grid-template-columns: minmax(180px, .7fr) 1fr;
  gap: 7vw;
  align-items: start;
}

.footer-brand {
  width: 150px;
  filter: brightness(0) invert(1);
}

.footer-top p {
  justify-self: center;
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(260px, .7fr) 1fr;
  gap: 8vw;
  padding-top: 90px;
}

.footer-grid p {
  max-width: 260px;
  margin: 0 0 26px;
  font-size: 15px;
  line-height: 1.45;
}

.footer-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 17px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 999px;
  font-size: 13px;
}

.footer-grid nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 17px 38px;
  color: rgba(255, 255, 255, .78);
  font-size: 14px;
}

.footer-bottom {
  padding-top: 92px;
  color: rgba(255, 255, 255, .62);
  font-size: 12px;
}

@media (max-width: 1180px) {
  .brand {
    width: 82px;
  }

  .impact-grid,
  .nutrient-grid,
  .process-top,
  .ingredient-head,
  .community-grid,
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }

  .approach-wrapper {
    grid-template-columns: minmax(340px, .92fr) minmax(0, 1.08fr);
    gap: 48px;
  }

  .approach-card {
    flex-basis: 300px;
  }
}

@media (max-width: 900px) {
  .hero,
  .hero-inner {
    min-height: var(--app-vh, 100vh);
  }

  .container {
    padding-inline: 22px;
  }

  .header-inner {
    min-height: 72px;
    gap: 18px;
  }

  .desktop-nav,
  .header-actions .cta {
    display: none;
  }

  .header-identity {
    gap: 10px;
  }

  .yc-badge {
    min-height: 34px;
    padding: 5px 11px 5px 6px;
    gap: 7px;
    font-size: 12px;
  }

  .ggg-yc-mark-img {
    width: 22px;
    height: 22px;
    border-radius: 6px;
  }

  .menu-toggle {
    display: block;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    color: var(--white);
    background: rgba(47, 56, 52, .92);
  }

  .menu-toggle span {
    left: 25%;
    width: 50%;
    height: 2px;
    background: currentColor;
  }

  .menu-toggle span:first-child {
    top: 15px;
  }

  .menu-toggle span:nth-child(2) {
    top: 21px;
  }

  .menu-toggle span:last-child {
    top: 27px;
  }

  .menu-toggle[aria-expanded="true"] span:first-child {
    top: 21px;
    left: 25%;
    transform: rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] span:last-child {
    top: 21px;
    left: 25%;
    transform: rotate(-45deg);
  }

  .mobile-menu {
    position: fixed;
    inset: 72px 0 auto;
    display: grid;
    gap: 0;
    padding: 20px 22px 34px;
    color: var(--dark);
    background: var(--white);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-16px);
    transition: opacity .25s var(--ease), transform .25s var(--ease);
  }

  .mobile-menu.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .mobile-menu a {
    padding: 19px 0;
    border-bottom: 1px solid var(--line);
    font-size: 28px;
    line-height: 1.1;
  }

  .hero-inner {
    padding-top: 96px;
    padding-bottom: 34px;
    grid-template-rows: auto 1fr;
  }

  .hero-bottom {
    align-self: end;
  }

  .gut-intro-panel {
    justify-content: flex-start;
    padding: clamp(86px, 13svh, 104px) 7vw 0;
  }

  .gut-intro-panel h2 {
    max-width: 100%;
    font-size: clamp(36px, 9.4vw, 56px);
    line-height: .94;
  }

  .gut-intro-panel p {
    max-width: min(36ch, 84vw);
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.45;
  }

  .hero h1,
  .hero h2#hero-title {
    margin-top: 56px;
  }

  .hero-bottom {
    display: grid;
    gap: 34px;
  }

  .hero-bottom p {
    width: min(560px, 90vw);
  }

  .scroll-cta {
    justify-self: end;
  }

  .impact-grid,
  .nutrient-grid,
  .process-top,
  .ingredient-head,
  .community-grid,
  .footer-top,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .approach-shell > h2 {
    margin-bottom: 34px;
    font-size: clamp(48px, 12vw, 86px);
  }

  .approach-wrapper {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .approach-block:first-child {
    min-height: auto;
  }

  .approach-text-stack {
    display: none;
  }

  .approach-control {
    width: 100%;
    max-width: 400px;
    margin-top: 0;
  }

  .approach-image-window {
    width: 100vw;
    margin-left: -22px;
    padding-inline: 22px;
  }

  .approach-card {
    flex-basis: min(78vw, 400px);
  }

  .approach-card p {
    display: block;
    opacity: 0;
    transition: opacity .35s ease;
  }

  .approach-card.is-active p {
    opacity: 1;
  }

  .impact-visual {
    position: relative;
    top: auto;
  }

  .impact-visual img {
    height: 360px;
  }

  .nutrient-section {
    /* PHONE: static, un-pinned. No sticky and no viewport-height units means
       the address bar can't resize anything mid-scroll, so it cannot shake.
       Clean stacked layout: heading + capsule + the four points. */
    min-height: auto;
    padding: 58px 0 54px;
  }

  .nutrient-grid {
    position: static;
    height: auto;
    grid-template-rows: auto auto;
    gap: 32px;
    padding: 0;
  }

  .nutrient-capsules {
    position: relative;
    top: auto;
    min-height: 0;
    height: min(74vw, 300px);
    justify-content: center;
    order: 1;
  }

  .nutrient-capsules img {
    width: min(74%, 330px);
    margin-top: 0;
    margin-left: 0;
  }

  .nutrient-copy {
    align-self: start;
    align-content: start;
    padding-top: 0;
  }

  .nutrient-section h2 {
    position: relative;
    top: auto;
    min-height: auto;
    margin-bottom: 22px;
    font-size: clamp(32px, 8.6vw, 46px);
    line-height: .96;
  }

  .nutrient-list {
    display: grid;
    gap: 22px;
    min-height: 0;
    height: auto;
    padding-bottom: 0;
  }

  /* all four points shown in normal flow (they were absolutely stacked for the
     scroll-reveal, which we've dropped on phones) */
  .nutrient-row {
    position: relative;
    inset: auto;
    max-width: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .nutrient-row span {
    margin-bottom: 10px;
  }

  .nutrient-row p {
    font-size: clamp(16px, 4.15vw, 20px);
    line-height: 1.42;
  }

  .process-top {
    min-height: auto;
  }

  .process-principles {
    margin-top: 42px;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .process-principles article {
    flex: 0 0 132px;
  }

  .process-window,
  .ingredient-window,
  .community-window {
    width: 100vw;
    margin-left: -22px;
    padding-inline: 22px;
    overflow: hidden;
  }

  .process-cards article {
    flex-basis: min(82vw, 380px);
    min-height: 480px;
  }

  .ingredient-head > div {
    min-width: 0;
  }

  .ingredient-window {
    margin-top: 72px;
  }

  .ingredient-rail article {
    flex-basis: min(62vw, 250px);
  }

  .community-slider {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .community-control {
    margin-top: 24px;
  }

  .community-window {
    grid-column: auto;
    grid-row: auto;
  }

  .community-rail article {
    flex-basis: min(76vw, 340px);
  }
}

@media (max-width: 620px) {

  /* the fixed-width icon row must wrap or it widens the whole grid
     column and clips every sibling heading/paragraph off-screen */
  .process-principles {
    flex-wrap: wrap;
    row-gap: 30px;
  }

  .container {
    padding-inline: 18px;
  }

  .brand,
  .footer-brand {
    width: 86px;
  }

  .header-inner {
    gap: 12px;
  }

  .header-actions {
    gap: 10px;
  }

  .yc-badge {
    min-height: 32px;
    padding: 5px 9px 5px 6px;
    gap: 6px;
    font-size: 11px;
  }

  .ggg-yc-mark-img {
    width: 20px;
    height: 20px;
    border-radius: 5px;
  }

  .hero h1,
  .hero h2#hero-title {
    font-size: 54px;
  }

  .hero-bottom p {
    width: 100%;
    font-size: 18px;
  }

  .impact-section,
  .approach-section,
  .ingredient-section,
  .community-section {
    padding-block: 80px;
  }

  .impact-copy h2,
  .approach-shell > h2,
  .nutrient-section h2,
  .process-section h2,
  .ingredient-section h2,
  .community-section h2 {
    font-size: 42px;
  }

  .accordion-list summary {
    grid-template-columns: 46px 1fr 18px;
    gap: 14px;
  }

  .accordion-list p {
    padding-left: 60px;
  }

  .accordion-body {
    padding-left: 60px;
  }

  .accordion-list .accordion-body p {
    padding-left: 0;
  }

  .impact-summary {
    padding-left: 60px;
  }

  .image-cta {
    min-height: 172svh;
    /* page-colored, NOT dark: the old dark backdrop peeked out around the
       video while scrolling and read as a dark-green glitch */
    background: var(--white);
  }

  /* ONE tree, full-bleed - the old blurred duplicate video behind the sharp
     one read as "tree behind tree". The scrubbed video fills the phone
     screen edge to edge with no mask, so nothing shows behind it. */
  .image-cta-tree-video {
    width: 100%;
    /* lvh, not svh: fill the LARGEST viewport so the video still covers the
       screen when the address bar collapses mid-scroll (svh left a white gap
       of page background showing under it). overflow:clip crops the excess. */
    height: 100lvh;
    z-index: 1;
    opacity: 1;
    object-fit: cover;
    object-position: 52% 38%;
    background: url("../videos/ggg-tree-poster.jpg") 52% 38% / cover no-repeat;
    transform: none;
  }

  .image-cta::after {
    z-index: 2;
    height: 100lvh;
    margin-top: -100lvh;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .03) 46%, rgba(0, 0, 0, .72)),
      linear-gradient(90deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0) 62%);
  }

  .image-cta-copy {
    z-index: 3;
    width: 100%;
    min-height: 100svh;
    margin-top: -100lvh;
    padding: 0 18px max(30px, env(safe-area-inset-bottom));
    gap: 16px;
    align-content: end;
    max-width: none;
  }

  .image-cta h2 {
    max-width: 100%;
    font-size: clamp(42px, 12.4vw, 52px);
    line-height: .94;
  }

  .image-cta p {
    font-size: clamp(18px, 5.8vw, 24px);
  }

  .image-cta-copy .cta-main {
    width: max-content;
    min-width: 0;
    max-width: none;
    justify-self: start;
    padding-inline: 14px;
  }

  .footer-grid nav {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .care-flow-rail {
    grid-template-columns: 1fr;
    padding-left: 40px;
  }

  .care-flow-rail::before,
  .care-flow-rail::after {
    top: 0;
    right: auto;
    bottom: 0;
    left: 19px;
    width: 1px;
    height: auto;
  }

  .care-flow-rail::after {
    transform: scaleY(0);
    transform-origin: center top;
    animation-name: careFlowLineY;
  }

  .care-flow-step {
    min-height: 0;
    padding: 28px 0 30px 28px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .11);
  }

  .care-flow-step:not(:first-child) {
    padding-left: 28px;
  }

  .care-flow-step:last-child {
    border-bottom: 0;
  }

  .care-flow-node {
    top: 34px;
    left: -29px;
  }

  .care-flow-number {
    margin-bottom: 18px;
    font-size: clamp(38px, 8vw, 58px);
  }

  .care-flow-step h3 {
    font-size: clamp(22px, 5.4vw, 28px);
  }

  .care-flow-step p {
    max-width: 560px;
    font-size: 15px;
  }

  .care-flow-branch {
    position: static;
    margin-top: 26px;
    padding-left: 20px;
  }

  .care-flow-outcomes {
    grid-template-columns: 1fr;
    width: 100%;
    margin-top: 28px;
  }

  .care-flow-outcomes article,
  .care-flow-outcome-label {
    min-height: 0;
    padding: 26px 28px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
  }

  .care-flow-outcome-label {
    padding-left: 0;
  }

  .care-flow-outcomes .care-flow-success {
    border-bottom: 0;
  }

  .comparison-head {
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
  }
}

@media (max-width: 760px) {
  .process-section {
    padding-bottom: 54px;
  }

  .care-flow {
    margin-top: 22px;
  }

  .care-flow-rail {
    padding-left: 20px;
  }

  .care-flow-rail::before,
  .care-flow-rail::after {
    left: 6px;
  }

  .care-flow-step,
  .care-flow-step:not(:first-child) {
    padding: 24px 0 26px 24px;
  }

  .care-flow-node {
    top: 30px;
    left: -21px;
    width: 15px;
    height: 15px;
  }

  .care-flow-number {
    font-size: 38px;
  }

  .care-flow-outcomes article,
  .care-flow-outcome-label {
    padding: 24px;
  }

  .care-flow-outcome-label {
    padding-left: 0;
  }

  .comparison-section {
    padding-top: 86px;
  }

  .comparison-head {
    margin-bottom: 48px;
  }

  .comparison-axis {
    display: none;
  }

  .comparison-item {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 26px clamp(20px, 5vw, 28px) 28px;
  }

  .comparison-item h3 {
    padding: 0 0 20px;
    border-left: 0;
  }

  .comparison-item p {
    display: grid;
    grid-template-columns: 24px 1fr;
    column-gap: 12px;
    align-items: start;
    padding: 14px 0;
    border-left: 0;
    font-size: clamp(17px, 5vw, 21px);
  }

  .comparison-item p::before {
    grid-row: 1 / span 2;
    margin-top: 2px;
  }

  .comparison-item p span {
    display: block;
    color: #7d817f;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .comparison-ours {
    margin-top: 4px;
    background: transparent;
  }

  .comparison-ours span {
    color: #668416 !important;
  }

  .comparison-item:hover,
  .comparison-item:hover .comparison-ours {
    background: transparent;
  }
}

@keyframes careFlowLineY {
  to { transform: scaleY(1); }
}

/* ---- formula map: six inputs visible at once, no horizontal carousel ---- */
.ingredient-section {
  min-height: 0;
  background: #f2f4ef;
}

.ingredient-window {
  width: auto;
  margin-top: clamp(64px, 7vw, 118px);
  overflow: visible;
  cursor: default;
  touch-action: auto;
  user-select: auto;
}

.ingredient-rail {
  counter-reset: ingredient;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(220px, 18vw, 286px) minmax(0, 1fr);
  grid-template-rows: repeat(3, minmax(156px, auto));
  gap: 0 clamp(34px, 4vw, 76px);
  width: 100%;
  transform: none !important;
  transition: none;
}

.ingredient-core {
  position: relative;
  grid-column: 2;
  grid-row: 1 / 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 560px;
  padding: clamp(28px, 2.4vw, 44px);
  overflow: hidden;
  color: var(--white);
  background: var(--green);
}

.ingredient-core::before {
  position: absolute;
  top: 16px;
  right: 24px;
  color: var(--brand);
  content: "✱";
  font-size: clamp(74px, 7vw, 126px);
  font-weight: 500;
  line-height: 1;
}

.ingredient-core::after {
  position: absolute;
  inset: 22% auto auto -34%;
  width: 112%;
  aspect-ratio: 1;
  border: 1px solid rgba(214, 253, 112, .38);
  border-radius: 50%;
  box-shadow:
    0 0 0 28px rgba(214, 253, 112, .06),
    0 0 0 64px rgba(214, 253, 112, .035);
  content: "";
}

.ingredient-core > * {
  position: relative;
  z-index: 1;
}

.ingredient-core span {
  margin-bottom: 18px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ingredient-core strong {
  font-size: clamp(38px, 3.3vw, 60px);
  font-weight: 500;
  line-height: 1.02;
}

.ingredient-core small {
  max-width: 23ch;
  margin-top: 24px;
  color: rgba(248, 247, 245, .68);
  font-size: 14px;
  line-height: 1.45;
}

.ingredient-rail article {
  counter-increment: ingredient;
  position: relative;
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  gap: 7px 20px;
  min-height: 0;
  padding: 25px 0;
  border-top: 1px solid rgba(24, 30, 37, .14);
  opacity: 1;
  flex: none;
  transition: color .25s ease;
}

.ingredient-rail article::after {
  position: absolute;
  top: 8px;
  right: 0;
  color: rgba(24, 30, 37, .36);
  content: "0" counter(ingredient);
  font-size: 11px;
  font-weight: 650;
}

.ingredient-rail article:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.ingredient-rail article:nth-of-type(2) { grid-column: 3; grid-row: 1; }
.ingredient-rail article:nth-of-type(3) { grid-column: 1; grid-row: 2; }
.ingredient-rail article:nth-of-type(4) { grid-column: 3; grid-row: 2; }
.ingredient-rail article:nth-of-type(5) { grid-column: 1; grid-row: 3; }
.ingredient-rail article:nth-of-type(6) { grid-column: 3; grid-row: 3; }

.ingredient-rail article:nth-of-type(even) {
  grid-template-columns: minmax(0, 1fr) 108px;
}

.ingredient-rail article:nth-of-type(even)::after {
  right: auto;
  left: 0;
}

.ingredient-rail img {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  transition: transform .45s var(--ease), filter .35s ease;
}

.ingredient-rail article:nth-of-type(even) img {
  grid-column: 2;
}

.ingredient-rail h3,
.ingredient-rail p {
  grid-column: 2;
}

.ingredient-rail article:nth-of-type(even) h3,
.ingredient-rail article:nth-of-type(even) p {
  grid-column: 1;
}

.ingredient-rail h3 {
  align-self: end;
  font-size: clamp(18px, 1.35vw, 24px);
}

.ingredient-rail p {
  align-self: start;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.42;
}

@media (hover: hover) {
  .ingredient-rail article:hover img {
    transform: scale(1.055) rotate(2deg);
    filter: saturate(1.08);
  }
}

/* ---- community: one editorial profile at a time ---- */
.community-section {
  padding-top: clamp(76px, 7vw, 130px);
}

.community-grid {
  grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr);
  gap: clamp(52px, 7vw, 132px);
  padding-bottom: clamp(42px, 4vw, 74px);
  border-bottom: 1px solid var(--line);
}

.community-grid h2 {
  margin: 0;
  font-size: clamp(54px, 5.1vw, 92px);
  font-weight: 500;
  line-height: .94;
}

.community-grid > div {
  max-width: 760px;
  padding-top: 8px;
}

.community-grid > div p {
  font-size: clamp(18px, 1.45vw, 27px);
  font-weight: 500;
  line-height: 1.42;
}

.community-slider {
  display: grid;
  grid-template-areas:
    "copy portrait"
    "controls portrait";
  grid-template-columns: minmax(360px, .88fr) minmax(460px, 1.12fr);
  grid-template-rows: 1fr auto;
  gap: 0;
  align-items: stretch;
  margin-top: clamp(46px, 5vw, 86px);
  overflow: hidden;
  background: #edf1eb;
  border: 1px solid rgba(24, 30, 37, .1);
}

.community-copy-stack {
  grid-area: copy;
  min-height: clamp(430px, 35vw, 590px);
  padding: clamp(34px, 4vw, 72px);
}

.community-copy-stack article {
  align-self: start;
}

.community-copy-stack article::before {
  display: block;
  margin-bottom: clamp(44px, 5vw, 88px);
  color: var(--green);
  content: "Scientific advisor";
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.community-copy-stack h3 {
  font-size: clamp(28px, 2.3vw, 42px);
  font-weight: 500;
}

.community-copy-stack p {
  max-width: 46ch;
  font-size: 15px;
}

.community-copy-stack .community-quote {
  display: block;
  max-width: 38ch;
  margin-top: clamp(28px, 2.5vw, 46px);
  color: var(--dark);
  font-size: clamp(19px, 1.45vw, 27px);
  font-weight: 500;
  line-height: 1.46;
}

.community-control {
  grid-area: controls;
  align-self: end;
  margin: 0;
  padding: 0 clamp(34px, 4vw, 72px) clamp(34px, 4vw, 64px);
}

.community-window {
  grid-area: portrait;
  width: auto;
  min-width: 0;
  min-height: clamp(520px, 44vw, 720px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  cursor: default;
  touch-action: pan-y;
  background: #929693;
}

.community-rail {
  display: grid;
  width: 100%;
  height: 100%;
  transform: none !important;
  transition: none;
}

.community-rail article {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(1.018);
  pointer-events: none;
  transition: opacity .55s ease, transform .75s var(--ease);
}

.community-rail article.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.community-rail img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(.04) contrast(.98);
}

.community-rail h3,
.community-rail p {
  display: none;
}

/* ---- pricing: white at rest, deep-green lift on interaction ---- */
.pricing-card,
.pricing-card-premium {
  color: var(--green);
  background: #fff;
  border-color: var(--line);
  outline: none;
  transform: translateY(0) scale(1);
  box-shadow: 0 0 0 rgba(22, 35, 27, 0);
  transition:
    color .3s ease,
    background-color .3s ease,
    border-color .3s ease,
    transform .36s var(--ease),
    box-shadow .36s var(--ease);
}

.pricing-card .pricing-list li,
.pricing-card-premium .pricing-list li {
  border-top-color: var(--line);
  transition: border-color .3s ease;
}

.pricing-amount {
  letter-spacing: 0;
}

.pricing-card:focus-visible,
.pricing-card:focus-within {
  color: var(--white);
  background: var(--green);
  border-color: var(--green);
  transform: translateY(-7px) scale(1.008);
  box-shadow: 0 22px 46px rgba(22, 35, 27, .16);
}

.pricing-card:focus-visible .pricing-list li,
.pricing-card:focus-within .pricing-list li {
  border-top-color: rgba(255, 255, 255, .16);
}

@media (hover: hover) {
  .pricing-card:hover {
    color: var(--white);
    background: var(--green);
    border-color: var(--green);
    transform: translateY(-7px) scale(1.008);
    box-shadow: 0 22px 46px rgba(22, 35, 27, .16);
  }

  .pricing-card:hover .pricing-list li {
    border-top-color: rgba(255, 255, 255, .16);
  }
}

.pricing-card:active {
  transform: translateY(-3px) scale(1.003);
}

@media (max-width: 900px) {
  .ingredient-head {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .ingredient-window {
    width: auto;
    margin: 52px 0 0;
    padding-inline: 22px;
    overflow: visible;
  }

  .ingredient-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 1px;
    background: rgba(24, 30, 37, .1);
  }

  .ingredient-core {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 280px;
  }

  .ingredient-rail article,
  .ingredient-rail article:nth-of-type(n) {
    grid-column: auto;
    grid-row: auto;
    display: block;
    min-height: 286px;
    padding: 22px 18px;
    background: var(--white);
    border: 0;
  }

  .ingredient-rail article::after,
  .ingredient-rail article:nth-of-type(even)::after {
    top: 18px;
    right: 18px;
    left: auto;
  }

  .ingredient-rail img,
  .ingredient-rail article:nth-of-type(even) img {
    display: block;
    width: 88px;
    height: 88px;
    margin-bottom: 24px;
  }

  .ingredient-rail p {
    margin-top: 10px;
    font-size: 13px;
  }

  .community-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .community-grid h2 {
    font-size: clamp(46px, 13vw, 68px);
  }

  .community-slider {
    grid-template-areas:
      "portrait"
      "copy"
      "controls";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .community-window {
    width: auto;
    min-height: min(108vw, 520px);
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  .community-copy-stack {
    min-height: 0;
    padding: 30px 24px 26px;
  }

  .community-copy-stack article::before {
    margin-bottom: 34px;
  }

  .community-copy-stack .community-quote {
    font-size: clamp(17px, 4.8vw, 22px);
  }

  .community-control {
    padding: 0 24px 28px;
  }
}

@media (max-width: 760px) {
  /* Phone intro reading order: the bottle holds the TOP band (under the
     header) and every section's writing sits in the BOTTOM band. Text then
     scrolls straight into its seat without ever crossing the bottle, so
     nothing overlaps the writing. Wins over the flex-start rule above. */
  .gut-intro-panel[data-intro-panel^="section"],
  .gut-intro-stage .gut-intro-panel {
    justify-content: flex-end;
    /* lean bottom padding: real iPhones lose ~90px to Safari's bars (svh),
       and every pixel saved here goes to the parked jar above the writing */
    padding: 0 7vw clamp(48px, 8.5svh, 118px);
  }

  /* Writing lane: the phone texts scroll 1:1 with the finger inside this
     clipped window below the jar (positions mirrored from the hidden
     originals by gutgut-intro.js). Clipping at the lane top means writing
     and jar can never overlap - no fades needed. */
  .gut-intro-stage {
    position: sticky;
    top: 0;
    height: 0;
    z-index: 2;
    pointer-events: none;
  }

  .gut-intro-lane {
    position: absolute;
    top: var(--gut-lane-top, 46svh);
    left: 0;
    right: 0;
    height: calc(var(--app-vh, 100vh) - var(--gut-lane-top, 46svh));
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34px);
    mask-image: linear-gradient(180deg, transparent 0, #000 34px);
  }

  .gut-intro-lane .gut-intro-panel {
    position: absolute;
    top: calc(-1 * var(--gut-lane-top, 46svh));
    left: 0;
    right: 0;
    height: 100vh;
    height: 100svh;
    min-height: 0;
    margin: 0;
    will-change: transform;
  }

  /* only the ORIGINALS (in .gut-intro-content) hide - the lane clones also
     carry .gut-intro-side and must stay visible */
  .gut-stage-on .gut-intro-content .gut-intro-side > .gut-intro-reveal {
    visibility: hidden;
  }

  /* CALM first screen: no spinning spark, no bobbing chips - the ambient
     zoo of movement read as busy/cheap and motion-sickening on device */
  .gut-intro-tree {
    display: none;
  }

  .gut-intro-chip {
    animation: none;
  }

  .gut-intro {
    touch-action: pan-y; /* horizontal swipes spin the bottle */
  }

  .gut-intro-panel.gut-intro-hero {
    padding-bottom: 0;
  }

  .gut-intro-hero-words {
    /* raised with the rest of the under-bottle content to close the gap below
       the jar (was clamp(124px, 15svh, 140px)) */
    bottom: clamp(164px, 20svh, 180px);
    align-items: flex-end;
  }

  .gut-intro-cta-row {
    position: absolute;
    right: 0;
    bottom: clamp(112px, 14svh, 124px);
    left: 0;
    margin: 0;
  }

  /* the row is bottom-anchored; the buttons' top margin only inflates the
     row box upward into the hero words */
  .gut-intro-cta-row .gut-intro-cta {
    margin-top: 0;
  }

  .gut-intro-scroll {
    position: absolute;
    right: 0;
    bottom: 10px;
    left: 0;
    width: max-content;
    margin: 0 auto;
    gap: 6px;
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ingredient-rail img,
  .community-rail article,
  .pricing-card {
    transition: none;
  }
}

@media (max-width: 430px) {
  .yc-badge span {
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .yc-badge {
    width: 32px;
    min-width: 32px;
    padding: 5px;
    justify-content: center;
    gap: 0;
  }
}


/* full "Backed by Y Combinator" wording for phones, where the header
   only has room for the compact Y chip */
.ggg-yc-mobile {
  display: none;
}

@media (max-width: 900px) {
  .ggg-yc-mobile {
    position: absolute;
    top: clamp(96px, 13svh, 122px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 8px;
    color: var(--dark);
    background: rgba(255, 255, 255, .86);
    border: 1px solid var(--line, rgba(16, 19, 18, .12));
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
  }

  .ggg-yc-mobile img {
    border-radius: 5px;
  }
}


/* ---- native app-style swipe on touch layouts ----
   Phones get real browser scrolling with momentum + snap (like any
   photo gallery); the JS only mirrors the active index. Desktop keeps
   the transform carousel so cards still bleed past the container. */
@media (max-width: 900px) {
  .approach-image-window,
  .process-window,
  .ingredient-window,
  .community-window {
    width: 100vw;
    margin-left: -22px;
    padding-inline: 22px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 22px;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .approach-image-window::-webkit-scrollbar,
  .process-window::-webkit-scrollbar,
  .ingredient-window::-webkit-scrollbar,
  .community-window::-webkit-scrollbar {
    display: none;
  }

  .approach-card-track,
  .process-cards,
  .ingredient-rail,
  .community-rail {
    transition: none;
    will-change: auto;
  }

  .approach-card,
  .process-cards article,
  .ingredient-rail article,
  .community-rail article {
    scroll-snap-align: start;
  }
}


/* ---- pricing: same component language as the process/step cards ---- */
.pricing-section {
  padding: clamp(80px, 7vw, 132px) 0 clamp(70px, 6vw, 120px);
}

.pricing-head {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(320px, .8fr);
  gap: 7vw;
  align-items: end;
  margin-bottom: clamp(44px, 4vw, 76px);
}

.pricing-head h2 {
  margin: 0;
  color: var(--dark);
  font-size: clamp(36px, 4vw, 72px);
  font-weight: 500;
  line-height: .98;
}

.pricing-head p {
  max-width: 520px;
  margin: 0;
  color: var(--dark);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.46;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.25vw, 36px);
  align-items: stretch;
}

.pricing-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(24px, 1.8vw, 38px);
  color: var(--green);
  background: var(--white);
  border: 1px solid var(--line);
}

.pricing-card h3 {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pricing-amount {
  font-size: clamp(44px, 3.4vw, 64px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.01em;
}

.pricing-amount span {
  font-size: .38em;
  font-weight: 500;
  opacity: .62;
  margin-left: 4px;
}

.pricing-note {
  margin: 12px 0 0;
  font-size: 15px;
  opacity: .66;
}

.pricing-list {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.pricing-list li {
  position: relative;
  padding: 14px 0 14px 26px;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
  line-height: 1.42;
  font-weight: 500;
}

.pricing-list li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 12px;
  color: var(--brand, #d6fd70);
  font-weight: 600;
  font-size: 18px;
}

.pricing-card-premium {
  color: var(--white);
  background: var(--green);
  border-color: var(--green);
}

.pricing-card-premium .pricing-list li {
  border-top-color: rgba(255, 255, 255, .16);
}

.pricing-buy {
  align-self: flex-start;
}

/* the recommended plan speaks the site's own kicker language ("START HERE"
   on the live site) - a lime chip on the card edge plus a brand hairline,
   so it reads as guidance rather than a sales sticker */
.pricing-card-start {
  position: relative;
  border-color: rgba(214, 253, 112, .9);
  box-shadow: 0 0 0 1px rgba(214, 253, 112, .9);
}

.pricing-start-flag {
  position: absolute;
  top: -13px;
  left: clamp(20px, 1.6vw, 34px);
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 13px;
  border-radius: 999px;
  color: var(--_colors---color--dark);
  background: var(--brand);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* the hover/focus green state keeps the flag legible */
.pricing-card-start:focus-within .pricing-start-flag {
  box-shadow: 0 4px 14px -6px rgba(22, 35, 27, .5);
}

/* quiet YC founder line under the plans - a note, not a banner */
.pricing-yc-deal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  max-width: 1200px;
  margin: 26px auto 0;
  padding: 0 24px;
  color: rgba(16, 19, 18, .58);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.pricing-yc-deal img {
  flex: none;
  border-radius: 4px;
}

/* phone: keep the icon hugging the (wrapped) sentence, not the screen edge */
@media (max-width: 760px) {
  .pricing-yc-deal span {
    max-width: 30ch;
    text-align: left;
  }
}

.pricing-yc-deal a {
  color: rgba(16, 19, 18, .82);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent, #c8f169);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.pricing-yc-deal a:hover {
  color: #101312;
}

.pricing-yc-deal a:focus-visible {
  outline: 3px solid var(--accent, #c8f169);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (hover: hover) {
  .pricing-card-start:hover .pricing-start-flag {
    box-shadow: 0 4px 14px -6px rgba(22, 35, 27, .5);
  }
}

@media (max-width: 900px) {
  .pricing-head {
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: start;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}


/* ---- contact: dark wedge, human promise ---- */
/* ---- In the press: editorial masthead wall. Big type + hairline rows -
   same scale language as the community/impact sections, its own rhythm. ---- */
.press-section {
  padding: clamp(76px, 7vw, 130px) 0;
  background: var(--light);
  border-top: 1px solid var(--line);
}

.press-grid {
  position: relative; /* anchors the cursor-following preview */
  display: grid;
  grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr);
  gap: clamp(52px, 7vw, 132px);
  align-items: start;
}

/* photo preview that trails the cursor across the coverage list
   (positioned by ggg-motion.js; desktop pointers only) */
.press-float {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 300px;
  height: 220px;
  border-radius: 18px;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 28px 64px -26px rgba(24, 30, 37, .5);
  transition: opacity .22s ease;
  will-change: transform;
}

@media (max-width: 900px), (hover: none) {
  .press-float {
    display: none;
  }
}

.press-kicker {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.press-head h2 {
  margin: 0 0 18px;
  font-size: clamp(44px, 4.6vw, 84px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.01em;
}

.press-head p {
  max-width: 40ch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
}

.press-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.press-item a {
  position: relative;
  display: block;
  padding: clamp(20px, 2.2vw, 30px) clamp(44px, 4vw, 64px) clamp(20px, 2.2vw, 30px) 0;
  border-bottom: 1px solid var(--line);
  color: var(--dark);
  text-decoration: none;
}

.press-row-top {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.press-outlet {
  display: inline;
  font-size: clamp(21px, 2vw, 30px);
  font-weight: 650;
  line-height: 1.12;
  /* the same lime sweep the scientists' names get, revealed on hover */
  background: linear-gradient(180deg, rgba(214, 253, 112, 0) 58%, rgba(214, 253, 112, .85) 58%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size .38s cubic-bezier(.16, 1, .3, 1);
}

.press-meta {
  color: var(--gray);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.press-quote {
  display: block;
  max-width: 56ch;
  margin-top: 8px;
  color: var(--muted);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.5;
}

.press-arrow {
  position: absolute;
  top: 50%;
  right: 6px;
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 650;
  color: var(--dark);
  opacity: .35;
  transform: translateY(-50%);
  transition: opacity .3s ease, transform .38s cubic-bezier(.16, 1, .3, 1);
}

@media (hover: hover) {
  .press-item a:hover .press-outlet {
    background-size: 100% 100%;
  }

  .press-item a:hover .press-arrow {
    opacity: 1;
    transform: translateY(-50%) translate(4px, -4px);
  }
}

.press-item a:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}

.press-item a:focus-visible .press-outlet {
  background-size: 100% 100%;
}

@media (max-width: 900px) {
  .press-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .press-head h2 {
    font-size: clamp(38px, 9vw, 56px);
  }

  .press-item a {
    padding-right: 40px;
  }
}

.contact-section {
  padding: clamp(80px, 7vw, 130px) 0;
  color: var(--white);
  background: #2f3834;
}

.contact-inner {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(320px, .9fr);
  gap: 7vw;
  align-items: center;
}

.contact-copy h2 {
  margin: 0 0 22px;
  font-size: clamp(36px, 4vw, 72px);
  font-weight: 500;
  line-height: .98;
}

.contact-copy p {
  max-width: 460px;
  margin: 0 0 30px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.46;
  color: rgba(255, 255, 255, .82);
}

.contact-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-links li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 16px;
}

.contact-links li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.contact-links span {
  color: rgba(255, 255, 255, .6);
}

.contact-links a {
  color: var(--brand, #d6fd70);
  font-weight: 600;
  text-decoration: none;
}

.contact-links a:hover {
  text-decoration: underline;
}

@media (max-width: 900px) {
  .contact-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}





/* contact: monograph rows + editorial underline fields */
.contact-facts {
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  max-width: 460px;
}

.contact-facts li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.contact-facts li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.contact-facts span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

.contact-facts b {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--white);
  text-align: right;
}

.contact-booking {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 30px;
}

.contact-book {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 14px 22px 14px 24px;
  color: var(--dark, #181e25);
  background: var(--brand, #d6fd70);
  border: 1px solid var(--brand, #d6fd70);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  transition: transform .28s var(--ease), background-color .28s ease, border-color .28s ease;
}

.contact-book svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .28s var(--ease);
}

.contact-booking > p {
  max-width: 20ch;
  margin: 0;
  color: rgba(255, 255, 255, .5);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

.contact-book:hover {
  transform: translateY(-2px);
}

.contact-book:hover svg {
  transform: translateX(3px);
}

.contact-book:focus-visible {
  outline-color: var(--white, #fff);
}

.contact-meeting-card {
  display: flex;
  min-height: clamp(390px, 30vw, 510px);
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(28px, 3.2vw, 54px);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: clamp(22px, 2vw, 34px);
  background: rgba(255, 255, 255, .055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.contact-meeting-label {
  margin: 0 0 clamp(46px, 5vw, 92px);
  color: var(--brand, #d6fd70);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.contact-meeting-card h3 {
  max-width: 11ch;
  margin: 0;
  color: var(--white, #fff);
  font-size: clamp(34px, 3.1vw, 56px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: .98;
}

.contact-meeting-card > p:not(.contact-meeting-label) {
  max-width: 38ch;
  margin: 22px 0 34px;
  color: rgba(255, 255, 255, .66);
  font-size: clamp(15px, 1vw, 18px);
  line-height: 1.5;
}

.contact-meeting-card .contact-book--large {
  width: 100%;
  min-height: 60px;
  margin-top: auto;
  justify-content: space-between;
  padding-right: 26px;
  padding-left: 28px;
  font-size: 17px;
}

.contact-meeting-card small {
  display: block;
  margin-top: 14px;
  color: rgba(255, 255, 255, .42);
  font-size: 11px;
  letter-spacing: .02em;
}

.contact-form {
  display: grid;
  gap: 34px;
  align-content: start;
}

.contact-form-head {
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.contact-form-head h3 {
  margin: 0;
  color: var(--white, #fff);
  font-size: clamp(24px, 2vw, 34px);
  font-weight: 500;
  line-height: 1.1;
}

.contact-form-head p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, .56);
  font-size: 14px;
  font-weight: 500;
}

.contact-field {
  display: grid;
  gap: 6px;
}

.contact-field span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

.contact-field span i {
  font-style: normal;
  color: var(--brand, #d6fd70);
  margin-right: 6px;
}

.contact-field input,
.contact-field textarea {
  width: 100%;
  padding: 12px 0 16px;
  color: var(--white);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  border-radius: 0;
  font: inherit;
  font-size: 17px;
  resize: vertical;
  transition: border-color .3s var(--ease);
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: rgba(255, 255, 255, .3);
}

.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-bottom-color: var(--brand, #d6fd70);
  box-shadow: 0 1px 0 0 var(--brand, #d6fd70);
}

.contact-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

button.contact-send {
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  padding: 12px 30px;
}

.contact-status {
  margin: 0;
  min-height: 22px;
  font-size: 15px;
  color: var(--brand, #d6fd70);
}

.contact-status.is-error {
  color: #ffb3a0;
}

@media (max-width: 560px) {
  .contact-booking {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .contact-booking > p {
    max-width: none;
  }

  .contact-facts li {
    align-items: flex-start;
  }

  .contact-facts b {
    max-width: 56%;
  }

  .contact-meeting-card {
    min-height: 390px;
    padding: 26px 22px;
    border-radius: 24px;
  }

  .contact-meeting-label {
    margin-bottom: 56px;
  }
}


/* click feedback on every pill CTA, as on gutgutgoose.com */
.cta-small,
.gut-intro-cta,
button.contact-send {
  transition: transform .18s var(--ease);
}

.cta-small:active,
.gut-intro-cta:active,
button.contact-send:active,
.approach-arrow:active,
.menu-toggle:active {
  transform: scale(.9);
}


/* ---- desktop rails: transform carousel (process / science / community) ----
   The old full-bleed native-scroll rails showed 4 cards in a 100vw window with
   only ~440px of scroll and mandatory snap, so the later steps could never come
   into focus and the right card was always cut off. These windows now clip to
   the container/grid box and the JS translates the track: the active card lands
   at the left, the offset clamps so the LAST card ends fully visible at the
   right edge (never cut), and cards past the edge peek to signal more. Arrows,
   drag, keys and shift-wheel all drive the same transform. */
@media (min-width: 901px) {
  .process-window,
  .ingredient-window,
  .community-window {
    overflow: hidden;
  }

  .process-cards article:not(.is-active),
  .ingredient-rail article:not(.is-active),
  .community-rail article:not(.is-active) {
    cursor: pointer;
  }
}


/* ---- approach: peek carousel (desktop) ----
   the window box stays exactly one card wide so the JS offset math always
   lands the active image flush at the left column edge. overflow is opened
   so the upcoming cards spill to the RIGHT and peek/bleed toward the screen
   edge (the section's overflow:hidden trims them at the viewport). clip-path
   trims only the LEFT edge, so passed cards disappear and never touch the
   text column, while you can always see there are more pictures coming. */
@media (min-width: 901px) {
  .approach-image-window {
    width: clamp(270px, 19.1vw, 432px);
    overflow: visible;
    clip-path: inset(-140px -100vw -140px -1px);
  }

  .approach-image-window .approach-card {
    opacity: .58;
    cursor: pointer;
    transition: opacity .45s var(--ease), transform .8s var(--ease);
  }

  .approach-image-window .approach-card:hover {
    opacity: .82;
  }

  .approach-image-window .approach-card.is-active {
    opacity: 1;
    cursor: default;
  }
}


@media (min-width: 901px) {
  .community-window {
    width: auto;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
    scroll-padding-left: 0;
  }
}


@media (min-width: 901px) {
  .community-grid {
    grid-template-columns: minmax(240px, .42fr) minmax(520px, 1.4fr);
    gap: 4vw;
  }
}


@media (min-width: 901px) {
  /* the researcher photos start much further left: shrink the name
     column of the slider grid (the window's real parent) */
  .community-slider {
    grid-template-columns: minmax(240px, .45fr) 1.75fr;
  }
}


/* ---- community: quote fills the left panel, portrait rail on the right ----
   Previously the left column held only a name, leaving a big empty gap and
   pushing the photos far right, while the tall photo+quote cards overflowed
   the screen. Now the active researcher's quote fills the left panel and the
   rail cards are just photo + name, so the whole block fits one screen. */
.community-copy-stack .community-quote { display: none; }

@media (min-width: 901px) {
  .community-slider {
    grid-template-columns: clamp(280px, 27vw, 400px) minmax(0, 1fr);
    gap: clamp(40px, 3.6vw, 76px);
    margin-top: clamp(30px, 3vw, 56px);
    align-items: start;
  }

  .community-copy-stack .community-quote {
    display: block;
    margin: 20px 0 0;
    max-width: 34ch;
    color: var(--dark);
    font-size: clamp(17px, 1.15vw, 22px);
    font-weight: 500;
    line-height: 1.5;
  }

  .community-control {
    margin: clamp(26px, 2.6vw, 48px) 0 0;
  }

  .community-rail p { display: none; }

  .community-rail article { gap: 12px; }

  .community-rail img { aspect-ratio: 366 / 398; }
}



/* ---- true-center content without background stripes ----
   both-edges ballasting fixed the off-center but painted a cream gutter down
   the LEFT of dark sections. Instead: keep a single right-side gutter and
   slim the scrollbar itself, so centered content sits within ~4px of the
   true middle and dark sections stay edge-to-edge dark. */
@media (min-width: 901px) {
  html {
    scrollbar-gutter: stable;
    scrollbar-width: thin;
  }

  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(24, 30, 37, .34);
    border-radius: 999px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(24, 30, 37, .56);
  }
}


/* contact: quiet monograph upgrade - kicker rule + warm intro line,
   same vocabulary as the section labels and the bottle print */
.contact-copy .contact-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

.contact-copy .contact-kicker::before {
  content: "";
  width: 34px;
  height: 3px;
  background: var(--brand, #d6fd70);
}

.contact-copy .contact-intro {
  max-width: 46ch;
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-size: 17px;
  line-height: 1.55;
}


/* ---- green highlight on important words (marker swipe, keeps text color) ---- */
.hl {
  background: linear-gradient(180deg, rgba(214, 253, 112, 0) 52%, rgba(214, 253, 112, .85) 52%);
  padding: 0 .05em;
  border-radius: 2px;
  color: inherit;
  font-weight: 650;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---- calm colorful landing: soft green fields drifting behind the intro ----
   pure CSS (no vanta/WebGL) so it never competes with the 3D bottle for the
   GPU; a height:0 sticky wrapper keeps the field in view down the whole intro
   without adding layout height. */
/* Crawlable/screen-reader text equivalent of the 3D intro. Visually hidden
   (standard clip technique - NOT display:none, so it stays in the a11y tree
   and is read by crawlers/AT). This is the page's real H1 and value prop. */
.gut-seo-intro {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.gut-intro-ambient {
  position: sticky;
  top: 0;
  height: 0;
  z-index: 0;
}

.gut-intro-ambient::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  pointer-events: none;
  background:
    radial-gradient(30% 26% at 20% 26%, rgba(96, 196, 108, .30), transparent 72%),
    radial-gradient(28% 24% at 84% 20%, rgba(214, 253, 112, .34), transparent 72%),
    radial-gradient(34% 30% at 74% 82%, rgba(70, 178, 150, .24), transparent 74%),
    radial-gradient(30% 28% at 24% 80%, rgba(176, 232, 120, .24), transparent 74%);
  filter: blur(6px);
  animation: gggAmbient 40s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes gggAmbient {
  0%   { transform: translate3d(-1.5%, -1%, 0) scale(1.06); }
  50%  { transform: translate3d(2%, 1.5%, 0) scale(1.14); }
  100% { transform: translate3d(-1%, 1%, 0) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .gut-intro-ambient::before { animation: none; }
}

/* ---- landing (intro) highlights: soft LIGHT-GREEN marker on the busy words,
   distinct from the lime used on the scrolled sections ---- */
.gut-intro .hl {
  background: linear-gradient(180deg, rgba(150, 226, 150, 0) 50%, rgba(150, 226, 150, .72) 50%);
  font-weight: inherit;
  border-radius: 3px;
}

/* Buy visible from the very first intro screen, stacked above the scroll hint */
.gut-intro-cta-hero {
  margin-top: 0;
}

.gut-intro-cta-secondary {
  margin-top: 0;
  color: var(--gut-intro-ink);
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(16, 19, 18, .14);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

/* the geo-pricing wrappers are part of the big price, not the /mo suffix */
.pricing-amount [data-cur],
.pricing-amount [data-val] {
  font-size: inherit;
  font-weight: inherit;
  opacity: 1;
  margin-left: 0;
}

/* ---- Research / Stories portal (matches the site's card language) ---- */
.stories-section { padding: clamp(120px, 12vw, 200px) 0 clamp(90px, 9vw, 150px); }

.stories-head { max-width: 900px; }
.stories-kicker {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 20px;
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
.stories-kicker::before { content: ""; width: 34px; height: 3px; background: var(--brand); }
.stories-head h1 {
  margin: 0;
  color: var(--dark);
  font-size: clamp(48px, 6.4vw, 104px);
  font-weight: 500;
  line-height: .97;
  letter-spacing: -.01em;
}
.stories-intro {
  max-width: 620px;
  margin: clamp(22px, 2.4vw, 34px) 0 0;
  color: var(--dark);
  font-size: clamp(17px, 1.2vw, 21px);
  font-weight: 500;
  line-height: 1.55;
}

.research-portal {
  margin-top: clamp(42px, 5.2vw, 84px);
}

.research-hero-card {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
  min-height: clamp(560px, 64vw, 820px);
  overflow: hidden;
  color: var(--white);
  background: var(--green);
  border-radius: 8px;
}

.research-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 44px;
  padding: clamp(28px, 4.8vw, 72px);
}

.research-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.research-pill-row span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  border: 1px solid rgba(248, 247, 245, .24);
  border-radius: 999px;
  padding: 7px 12px;
  color: rgba(248, 247, 245, .9);
  background: rgba(248, 247, 245, .09);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.research-hero-card h2,
.research-evidence h2 {
  margin: 0;
  font-size: clamp(42px, 5.7vw, 96px);
  font-weight: 650;
  line-height: .92;
  letter-spacing: 0;
}

.research-hero-card p {
  max-width: 46ch;
  margin: 22px 0 0;
  color: rgba(248, 247, 245, .75);
  font-size: clamp(16px, 1.24vw, 20px);
  line-height: 1.45;
}

.research-hero-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.research-stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(248, 247, 245, .18);
  background: rgba(248, 247, 245, .18);
}

.research-stat-row span {
  min-height: 86px;
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 16px;
  background: rgba(8, 13, 10, .34);
  color: rgba(248, 247, 245, .86);
  font-size: 13px;
}

.research-stat-row b {
  color: var(--brand);
  font-size: 12px;
}

.research-system-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 1px;
  background: rgba(24, 30, 37, .16);
  border: 1px solid rgba(24, 30, 37, .16);
  border-top: 0;
}

.research-system-card {
  display: grid;
  gap: 22px;
  align-content: start;
  background: #f4f7ee;
  padding: clamp(18px, 2vw, 28px);
}

.research-system-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}

.research-system-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.research-system-card h3 {
  max-width: 12ch;
  margin: 8px 0 0;
  color: var(--dark);
  font-size: clamp(26px, 2.5vw, 42px);
  font-weight: 650;
  line-height: .98;
}

.research-system-card p {
  max-width: 36ch;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.research-evidence {
  display: grid;
  grid-template-columns: minmax(320px, .68fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 78px);
  align-items: start;
  margin-top: clamp(80px, 8vw, 132px);
}

.research-evidence h2 {
  color: var(--dark);
  font-size: clamp(38px, 4.8vw, 78px);
}

.research-table-wrap {
  overflow-x: auto;
  border-top: 1px solid rgba(24, 30, 37, .18);
}

.research-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  color: var(--dark);
}

.research-table th,
.research-table td {
  border-bottom: 1px solid rgba(24, 30, 37, .14);
  padding: 22px 18px;
  text-align: left;
  vertical-align: top;
}

.research-table th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.research-table td {
  font-size: 15px;
  line-height: 1.45;
}

.research-table td:first-child {
  width: 20%;
  color: var(--green);
  font-weight: 650;
}

.stories-grid {
  margin-top: clamp(48px, 5vw, 84px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2vw, 34px);
}

.story-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--white);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.story-card:hover {
  transform: translateY(-4px);
  border-color: rgba(24, 30, 37, .16);
  box-shadow: 0 30px 60px -34px rgba(24, 30, 37, .4);
}

.story-card-media {
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--light);
}
.story-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.story-card:hover .story-card-media img { transform: scale(1.05); }

.story-card-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 1.6vw, 28px);
  flex: 1;
}
.story-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.story-tags span {
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(24, 30, 37, .05);
  border: 1px solid rgba(24, 30, 37, .08);
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.story-card-body h3 {
  margin: 0;
  color: var(--dark);
  font-size: clamp(19px, 1.35vw, 24px);
  font-weight: 650;
  line-height: 1.24;
}
.story-readmore {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 650;
  color: var(--dark);
}
.story-readmore i { color: var(--brand); font-style: normal; transition: transform .25s var(--ease); }
.story-card:hover .story-readmore i { transform: translateX(4px); }

.desktop-nav a.is-active { color: var(--dark); font-weight: 650; }

@media (max-width: 900px) {
  .stories-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .research-hero-card,
  .research-evidence {
    grid-template-columns: 1fr;
  }
  .research-hero-card {
    min-height: auto;
  }
  .research-hero-card img {
    min-height: 360px;
  }
  .research-system-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .stories-grid { grid-template-columns: 1fr; }
  .research-hero-copy {
    padding: 24px;
  }
  .research-stat-row {
    grid-template-columns: 1fr 1fr;
  }
  .research-stat-row span {
    min-height: 70px;
    padding: 13px;
  }
  .research-table th,
  .research-table td {
    padding: 18px 14px;
  }
}

/* ---- final compact section sizing: title + primary state fit one viewport ---- */
.ingredient-section {
  padding: clamp(48px, 6vh, 72px) 0;
}

.ingredient-window {
  margin-top: clamp(34px, 4vh, 54px);
  overflow: visible !important;
}

.ingredient-rail {
  grid-template-columns: minmax(0, 1fr) clamp(190px, 16vw, 250px) minmax(0, 1fr);
  grid-template-rows: repeat(3, minmax(112px, 1fr));
  max-height: min(49vh, 440px);
  gap: 0 clamp(24px, 3vw, 54px);
}

.ingredient-core {
  min-height: 0;
  height: 100%;
  padding: clamp(24px, 2vw, 34px);
}

.ingredient-core::before {
  font-size: clamp(58px, 5vw, 88px);
}

.ingredient-core strong {
  font-size: clamp(33px, 2.6vw, 47px);
}

.ingredient-rail article,
.ingredient-rail article:nth-of-type(even) {
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 5px 16px;
  padding: 14px 0;
  cursor: default;
}

.ingredient-rail article:nth-of-type(even) {
  grid-template-columns: minmax(0, 1fr) 82px;
}

.ingredient-rail img,
.ingredient-rail article:nth-of-type(even) img {
  width: 82px;
  height: 82px;
}

.ingredient-rail h3 {
  font-size: clamp(16px, 1.05vw, 20px);
}

.ingredient-rail p {
  font-size: 12.5px;
}

.community-section {
  padding: clamp(44px, 5vh, 64px) 0 clamp(48px, 6vh, 72px);
}

.community-grid {
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: clamp(38px, 5vw, 86px);
  padding-bottom: clamp(24px, 3vh, 38px);
}

.community-grid h2 {
  font-size: clamp(48px, 4.2vw, 72px);
}

.community-grid > div p {
  font-size: clamp(16px, 1.18vw, 21px);
}

.community-grid p + p {
  margin-top: 16px;
}

.community-slider {
  grid-template-areas:
    "copy portrait"
    "controls portrait";
  grid-template-columns: minmax(330px, .9fr) minmax(420px, 1.1fr);
  grid-template-rows: 1fr auto;
  gap: 0;
  align-items: stretch;
  margin-top: clamp(20px, 2.6vh, 30px);
}

.community-copy-stack {
  min-height: clamp(360px, 49vh, 440px);
  padding: clamp(28px, 3vw, 48px);
}

.community-copy-stack article::before {
  margin-bottom: clamp(24px, 3vh, 38px);
}

.community-copy-stack h3 {
  font-size: clamp(26px, 2vw, 36px);
}

.community-copy-stack .community-quote {
  max-width: 43ch;
  margin-top: clamp(20px, 2.4vh, 30px);
  font-size: clamp(17px, 1.18vw, 21px);
  line-height: 1.4;
}

.community-control {
  margin: 0;
  padding: 0 clamp(28px, 3vw, 48px) clamp(26px, 3vh, 40px);
}

.community-window {
  min-height: clamp(360px, 49vh, 440px);
}

.community-rail img {
  aspect-ratio: auto;
}

.pricing-section {
  padding: clamp(46px, 5vh, 66px) 0 clamp(52px, 6vh, 76px);
}

.pricing-head {
  margin-bottom: clamp(26px, 3vh, 38px);
}

.pricing-grid {
  gap: clamp(12px, 1vw, 20px);
}

.pricing-card,
.pricing-card-premium {
  gap: 18px;
  padding: clamp(20px, 1.4vw, 28px);
  color: var(--green);
  background: #fff;
  border-color: var(--line);
  outline: none;
  transform: translateY(0) scale(1);
  box-shadow: 0 0 0 rgba(22, 35, 27, 0);
  transition:
    color .3s ease,
    background-color .3s ease,
    border-color .3s ease,
    transform .36s var(--ease),
    box-shadow .36s var(--ease);
}

.pricing-card .pricing-list li,
.pricing-card-premium .pricing-list li {
  padding-top: 10px;
  padding-bottom: 10px;
  border-top-color: var(--line);
  font-size: 14px;
  transition: border-color .3s ease;
}

.pricing-list {
  margin-top: 18px;
}

.pricing-amount {
  font-size: clamp(42px, 3vw, 56px);
  letter-spacing: 0;
}

.pricing-card:focus-visible,
.pricing-card:focus-within {
  color: var(--white);
  background: var(--green);
  border-color: var(--green);
  transform: translateY(-7px) scale(1.008);
  box-shadow: 0 22px 46px rgba(22, 35, 27, .16);
}

.pricing-card:focus-visible .pricing-list li,
.pricing-card:focus-within .pricing-list li {
  border-top-color: rgba(255, 255, 255, .16);
}

@media (hover: hover) {
  .pricing-card:hover {
    color: var(--white);
    background: var(--green);
    border-color: var(--green);
    transform: translateY(-7px) scale(1.008);
    box-shadow: 0 22px 46px rgba(22, 35, 27, .16);
  }

  .pricing-card:hover .pricing-list li {
    border-top-color: rgba(255, 255, 255, .16);
  }
}

@media (max-width: 900px) {
  .ingredient-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    max-height: none;
    gap: 1px;
  }

  .ingredient-core {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 230px;
  }

  .ingredient-rail article,
  .ingredient-rail article:nth-of-type(n) {
    grid-column: auto;
    grid-row: auto;
    display: block;
    min-height: 250px;
    padding: 18px 15px;
    background: var(--white);
  }

  .ingredient-rail img,
  .ingredient-rail article:nth-of-type(even) img {
    width: 76px;
    height: 76px;
    margin-bottom: 18px;
  }

  .community-grid {
    grid-template-columns: 1fr;
  }

  .community-slider {
    grid-template-areas:
      "portrait"
      "copy"
      "controls";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .community-window {
    width: auto;
    min-height: min(92vw, 440px);
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  .community-copy-stack {
    min-height: 0;
  }

  .pricing-card,
  .pricing-card-premium {
    min-height: 0;
  }
}

@media (min-width: 901px) {
  .approach-section {
    padding: clamp(46px, 6vh, 66px) 0 clamp(52px, 7vh, 76px);
  }

  .approach-shell > h2 {
    max-width: 760px;
    margin-bottom: clamp(30px, 4vh, 46px);
    font-size: clamp(50px, 5.2vw, 76px);
    line-height: .95;
  }

  .approach-wrapper {
    grid-template-columns: minmax(340px, .92fr) minmax(0, 1.08fr);
    gap: clamp(34px, 4vw, 68px);
  }

  .approach-block:first-child {
    min-height: clamp(330px, 48vh, 410px);
  }

  .approach-text-slide h3 {
    margin-bottom: 16px;
    font-size: clamp(22px, 1.45vw, 30px);
  }

  .approach-text-slide p {
    max-width: 46ch;
    font-size: 16px;
    line-height: 1.55;
  }

  .approach-control {
    margin-top: 24px;
  }

  .approach-image-window {
    width: clamp(230px, 17vw, 310px);
  }

  .approach-card {
    flex-basis: clamp(230px, 17vw, 310px);
  }

  .approach-card h3 {
    font-size: clamp(16px, 1vw, 21px);
  }

  .ingredient-section h2 {
    max-width: 620px;
    font-size: clamp(34px, 3vw, 52px);
  }

  .ingredient-head {
    grid-template-columns: minmax(230px, .62fr) minmax(460px, 1.18fr);
    gap: 5vw;
  }

  .pricing-section {
    padding-top: 38px;
    padding-bottom: 48px;
  }

  .pricing-head {
    margin-bottom: 20px;
  }

  .pricing-head h2 {
    font-size: clamp(34px, 3.4vw, 56px);
  }

  .pricing-card,
  .pricing-card-premium {
    padding: 20px 24px;
  }

  .pricing-card .pricing-list li,
  .pricing-card-premium .pricing-list li {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 13px;
    line-height: 1.34;
  }
}

@media (min-width: 901px) {
  .community-copy-stack,
  .community-window {
    height: clamp(360px, 49vh, 440px);
    min-height: 0;
  }
}

#approach,
#process,
.ingredient-section,
#community,
#pricing {
  scroll-margin-top: 86px;
}

/* ---- scientific community: all three people, one balanced view ---- */
.community-section {
  padding: 46px 0 54px;
  background: #f7f8f5;
}

.community-grid {
  grid-template-columns: minmax(340px, .82fr) minmax(520px, 1.18fr);
  align-items: center;
  gap: clamp(64px, 7vw, 132px);
  padding-bottom: 32px;
  border-bottom: 0;
}

.community-grid h2 {
  max-width: 11ch;
  font-size: 64px;
  line-height: .96;
}

.community-intro {
  display: grid;
  grid-template-columns: 1fr;
  max-width: none;
  gap: 0;
  padding-top: 0;
}

.community-intro > span {
  display: block;
  margin-bottom: 10px;
  color: #52605a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.community-intro p,
.community-grid p + p {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.35;
}

.community-intro p:last-child {
  border-bottom: 1px solid var(--line);
}

.community-intro p::before {
  color: #8c948f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}

.community-intro p:first-of-type::before {
  content: "01";
}

.community-intro p:nth-of-type(2)::before {
  content: "02";
}

.community-people {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.community-person {
  display: grid;
  /* media row sizes from its own portrait aspect-ratio so the whole photo
     shows (no crop, no side strips) instead of a fixed short band */
  grid-template-rows: auto auto;
  min-width: 0;
  padding: 18px 20px 20px;
  border-right: 1px solid var(--line);
}

.community-person:last-child {
  border-right: 0;
}

.community-person-media {
  display: grid;
  position: relative;
  min-width: 0;
  /* portrait framing that matches the photos so the full person is visible */
  aspect-ratio: 790 / 956;
  overflow: hidden;
  place-items: center;
  background: #171e27;
}

.community-person:first-child .community-person-media {
  background: #000;
}

.community-person-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* cover, NOT contain: the two portrait photos match the frame exactly (no
     crop), and Robin's near-square photo fills instead of leaving a black gap
     at the bottom - only a sliver of his black background trims at the sides. */
  object-fit: cover;
  object-position: center top;
}

.community-person-copy {
  display: grid;
  align-content: start;
  gap: 7px;
  padding-top: 15px;
}

.community-person-copy > span {
  color: #52605a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.community-person h3 {
  margin: 0;
  color: var(--dark);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.1;
}

.community-person p {
  margin: 0;
}

.community-person .community-role {
  min-height: 2.5em;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
}

.community-person .community-quote {
  max-width: 43ch;
  padding-top: 5px;
  color: var(--dark);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}

@media (min-width: 1500px) {
  .community-grid h2 {
    font-size: 70px;
  }

  .community-person {
    grid-template-rows: auto auto;
  }
}

@media (max-width: 900px) {
  .community-section {
    padding: 40px 0 44px;
  }

  .community-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-bottom: 24px;
  }

  .community-grid h2 {
    max-width: 12ch;
    font-size: 42px;
  }

  .community-intro {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .community-intro > span {
    margin-bottom: 6px;
    font-size: 9px;
  }

  .community-intro p,
  .community-grid p + p {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    padding: 9px 0;
    font-size: 14px;
  }

  .community-people {
    grid-template-columns: 1fr;
  }

  .community-person {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: minmax(132px, auto);
    gap: 14px;
    min-height: 150px;
    padding: 10px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .community-person:last-child {
    border-bottom: 0;
  }

  .community-person-media {
    min-height: 132px;
  }

  .community-person-copy {
    gap: 4px;
    align-content: center;
    padding: 2px 8px 2px 0;
  }

  .community-person-copy > span {
    font-size: 8.5px;
    letter-spacing: 0;
  }

  .community-person h3 {
    font-size: 16px;
    line-height: 1.15;
  }

  .community-person .community-role {
    display: block;
    min-height: 0;
    font-size: 9.5px;
    line-height: 1.25;
  }

  .community-person .community-quote {
    display: block;
    max-width: none;
    padding-top: 2px;
    font-size: 11.5px;
    line-height: 1.3;
  }
}

/* ---- phone ingredients: compact, inset, and stable while media loads ---- */
@media (max-width: 620px) {
  .ingredient-section {
    padding: 34px 0 40px;
  }

  .ingredient-head {
    gap: 9px;
  }

  .ingredient-head > p {
    font-size: 10px;
  }

  .ingredient-section h2 {
    max-width: none;
    font-size: clamp(27px, 7.2vw, 30px);
    line-height: 1.02;
  }

  .ingredient-window,
  .ingredient-window.container {
    width: 100%;
    max-width: none;
    margin: 20px 0 0;
    padding: 0;
    overflow: hidden !important;
  }

  .ingredient-rail {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
  }

  .ingredient-core {
    min-height: 146px;
    padding: 14px;
  }

  .ingredient-core::before {
    top: 10px;
    right: 16px;
    font-size: 56px;
  }

  .ingredient-core strong {
    max-width: calc(100% - 72px);
    font-size: clamp(26px, 7.4vw, 31px);
    line-height: 1;
  }

  .ingredient-core span {
    margin-bottom: 6px;
    font-size: 10px;
  }

  .ingredient-core small {
    max-width: 27ch;
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.28;
  }

  .ingredient-rail article,
  .ingredient-rail article:nth-of-type(n) {
    min-height: 190px;
    padding: 12px 11px;
  }

  .ingredient-rail img,
  .ingredient-rail article:nth-of-type(even) img {
    width: 56px;
    height: 56px;
    margin-bottom: 11px;
  }

  .ingredient-rail h3 {
    font-size: 14px;
    line-height: 1.12;
  }

  .ingredient-rail p {
    margin-top: 7px;
    font-size: 11.5px;
    line-height: 1.34;
  }
}

/* ---- desktop formula field: phone hierarchy, widened for three columns ---- */
@media (min-width: 901px) {
  .ingredient-head {
    grid-template-columns: minmax(180px, .42fr) minmax(0, 1.58fr);
    gap: clamp(40px, 5vw, 84px);
  }

  .ingredient-head h2,
  .ingredient-section h2 {
    max-width: 800px;
    font-size: clamp(38px, 3.35vw, 54px);
    line-height: .98;
  }

  .ingredient-window,
  .ingredient-window.container {
    margin-top: clamp(28px, 3.5vh, 42px);
  }

  .ingredient-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: minmax(150px, auto) repeat(2, minmax(140px, 1fr));
    gap: 1px;
    max-height: none;
    background: rgba(24, 30, 37, .12);
  }

  .ingredient-core {
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
    grid-template-rows: auto 1fr;
    align-content: center;
    column-gap: clamp(42px, 5vw, 88px);
    min-height: 150px;
    height: auto;
    padding: clamp(24px, 2.2vw, 34px) clamp(28px, 2.8vw, 44px);
  }

  .ingredient-core::before {
    top: 18px;
    right: 28px;
    content: "\2731";
    font-size: clamp(58px, 4.5vw, 78px);
  }

  .ingredient-core::after {
    inset: -150% -2% auto auto;
    width: 48%;
  }

  .ingredient-core span {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 7px;
  }

  .ingredient-core strong {
    grid-column: 1;
    grid-row: 2;
    max-width: 19ch;
    font-size: clamp(36px, 3.1vw, 52px);
    line-height: 1;
  }

  .ingredient-core small {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: end;
    max-width: 30ch;
    margin: 0;
    padding-right: 64px;
    font-size: 13.5px;
  }

  .ingredient-rail article,
  .ingredient-rail article:nth-of-type(n) {
    grid-column: auto;
    grid-row: auto;
    grid-template-columns: 78px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-content: center;
    align-items: start;
    gap: 6px 18px;
    min-height: 140px;
    padding: 20px;
    border: 0;
    background: var(--white);
  }

  .ingredient-rail article::after,
  .ingredient-rail article:nth-of-type(even)::after {
    top: 16px;
    right: 16px;
    left: auto;
  }

  .ingredient-rail img,
  .ingredient-rail article:nth-of-type(even) img {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    width: 78px;
    height: 78px;
  }

  .ingredient-rail h3,
  .ingredient-rail p,
  .ingredient-rail article:nth-of-type(even) h3,
  .ingredient-rail article:nth-of-type(even) p {
    grid-column: 2;
  }

  .ingredient-rail h3 {
    align-self: end;
    font-size: clamp(17px, 1.15vw, 20px);
    line-height: 1.08;
  }

  .ingredient-rail p {
    align-self: start;
    font-size: 13px;
    line-height: 1.38;
  }
}

/* Phone keeps the four explanations but omits the expensive capsule scene. */
@media (max-width: 760px) {
  .nutrient-section .nutrient-capsules {
    display: none;
  }

  .nutrient-section .nutrient-grid {
    grid-template-rows: auto;
    gap: 0;
  }
}

/* ---- hover life for the process steps and the scientists ----
   Same reactive feel as the pricing cards, tuned per section: process steps
   lift out of the dark rail and come into full focus; the scientists get a
   quiet lift plus a marker swipe under their name (the site's .hl language). */
.process-cards article {
  overflow: hidden;
  transition:
    opacity .35s ease,
    transform .36s var(--ease),
    box-shadow .36s var(--ease);
}

.process-cards img {
  transition: transform .55s var(--ease);
}

@media (hover: hover) {
  .process-cards article:hover {
    opacity: 1;
    transform: translateY(-8px);
    box-shadow: 0 30px 54px -26px rgba(0, 0, 0, .55);
  }

  .process-cards article:hover img {
    transform: scale(1.05);
  }
}

.community-person {
  transition:
    background-color .3s ease,
    transform .36s var(--ease),
    box-shadow .36s var(--ease);
}

.community-person-media img {
  transition: transform .55s var(--ease);
}

.community-person h3 {
  width: max-content;
  max-width: 100%;
  padding: 0 .12em;
  margin-left: -.12em;
  background-image: linear-gradient(180deg, rgba(214, 253, 112, 0) 58%, rgba(214, 253, 112, .85) 58%);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 100%;
  transition: background-size .45s var(--ease);
}

@media (hover: hover) {
  .community-person:hover {
    background-color: #fff;
    transform: translateY(-6px);
    box-shadow: 0 28px 52px -30px rgba(22, 35, 27, .32);
  }

  .community-person:hover .community-person-media img {
    transform: scale(1.045);
  }

  .community-person:hover h3 {
    background-size: 100% 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .process-cards article,
  .process-cards img,
  .community-person,
  .community-person-media img,
  .community-person h3 {
    transition: none;
  }
}

/* ---- tree CTA: primary action + research portal side by side ---- */
.image-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.image-cta-actions .cta-main {
  width: max-content;
  min-width: 0;
}

.cta-main.light-outlined {
  color: var(--_colors---color--light, #fff);
}

.button-bg.light-outlined {
  border: 1.5px solid rgba(255, 255, 255, .52);
  background: rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.cta-main.light-outlined:hover .button-bg.light-outlined {
  border-color: rgba(255, 255, 255, .8);
  background: rgba(255, 255, 255, .14);
}

.cta-main.light-outlined .nav-portal-mark {
  opacity: .7;
}

.image-cta-note {
  margin: 0;
  color: rgba(255, 255, 255, .64);
}

.image-cta p.image-cta-note {
  font-size: 13.5px;
}

/* (The click-to-enlarge lightbox was removed 2026-07-18: "pop up" meant the
   pricing-card hover lift, which these sections have; clicking a card just
   selects it.) */

/* ---- phone readability polish (July 2026) ----
   Same design, bigger comfortable type. The audience skews older and
   non-technical; small captions were the weakest part of the phone view.
   Backup of the pre-polish files: backups/2026-07-17-pre-mobile-polish/. */
@media (max-width: 900px) {
  /* the scientists: names and quotes were 9-12px */
  .community-person {
    grid-template-columns: 118px minmax(0, 1fr);
    min-height: 160px;
  }

  .community-person-copy {
    gap: 6px;
  }

  .community-person-copy > span {
    font-size: 10px;
    letter-spacing: .06em;
  }

  .community-person h3 {
    font-size: 18.5px;
  }

  .community-person .community-role {
    font-size: 11.5px;
    line-height: 1.3;
  }

  .community-person .community-quote {
    font-size: 13.5px;
    line-height: 1.38;
  }

  .community-intro p,
  .community-grid p + p {
    font-size: 15.5px;
    line-height: 1.42;
  }

  /* approach cards: caption-sized copy up to body size */
  .approach-card h3 {
    font-size: 20px;
    line-height: 1.1;
  }

  .approach-card p {
    font-size: 15px;
    line-height: 1.5;
  }

  /* the four "why probiotics fail" points read as body copy, ONE voice -
     the semi-bold weight next to the heading made the fonts feel chaotic */
  .nutrient-row p {
    font-size: clamp(17px, 4.5vw, 19px);
    font-weight: 500;
    line-height: 1.55;
  }

  .nutrient-row span {
    font-size: 12px;
    letter-spacing: .14em;
  }

  .nutrient-list {
    gap: 30px;
  }

  /* phone: the four points arrive one by one (fade-up + a lime sweep under
     the number) instead of landing as one block of text. The .ggg-io class
     is added by JS, so without JS the rows stay plainly visible. */
  .nutrient-row.ggg-io {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .55s var(--ease), transform .65s var(--ease);
  }

  .nutrient-row.ggg-io:nth-of-type(2) { transition-delay: .08s; }
  .nutrient-row.ggg-io:nth-of-type(3) { transition-delay: .16s; }
  .nutrient-row.ggg-io:nth-of-type(4) { transition-delay: .24s; }

  .nutrient-row.ggg-io span {
    display: inline-block;
    padding: 0 .3em 2px 0;
    background-image: linear-gradient(180deg, rgba(214, 253, 112, 0) 62%, rgba(214, 253, 112, .9) 62%);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0% 100%;
    transition: background-size .5s var(--ease) .3s, color .4s ease .3s;
  }

  .nutrient-row.ggg-io.ggg-in {
    opacity: 1;
    transform: none;
  }

  .nutrient-row.ggg-io.ggg-in span {
    color: var(--dark);
    background-size: 100% 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nutrient-row.ggg-io {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .nutrient-row.ggg-io span {
    transition: none;
    background-size: 100% 100%;
  }
}

@media (max-width: 760px) {
  .gut-intro-panel p {
    font-size: 15px;
    line-height: 1.5;
  }
}

@media (max-width: 620px) {
  /* ingredient tiles: 11.5px descriptions were the smallest text on the page */
  .ingredient-head > p {
    font-size: 11px;
  }

  .ingredient-rail h3 {
    font-size: 15.5px;
  }

  .ingredient-rail p {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.4;
  }

  .ingredient-core small {
    font-size: 12.5px;
    line-height: 1.32;
  }

  .ingredient-rail article,
  .ingredient-rail article:nth-of-type(n) {
    min-height: 200px;
  }
}

/* (pinned nutrient styles removed 2026-07-18 - the points stack plainly) */

.ggg-line {
  will-change: transform;
}

/* (The hand-rolled sticky "pin and scrub" was removed 2026-07-18 - it shook
   on real iPhones. The GSAP ScrollTrigger version above replaces it; with
   no GSAP the rows simply stay visible in flow.) */

/* ---- responsive sticky buy bar (hidden while intro / tree CTA / footer
   are on screen - those carry their own Buy) ---- */
.ggg-buybar {
  display: none;
}

@media (max-width: 760px) {
  .ggg-buybar {
    position: fixed;
    right: 10px;
    bottom: 10px;
    left: 10px;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 10px 10px 18px;
    color: var(--dark);
    background: rgba(248, 247, 245, .88);
    border: 1px solid rgba(24, 30, 37, .1);
    border-radius: 18px;
    box-shadow: 0 18px 44px -18px rgba(16, 19, 18, .38);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    transform: translateY(calc(100% + 24px));
    opacity: 0;
    /* visibility keeps the hidden Buy link out of the tab order; the delay
       lets the slide-out transition finish before it snaps invisible */
    visibility: hidden;
    pointer-events: none;
    transition: transform .45s var(--ease), opacity .35s ease, visibility 0s .45s;
  }

  .ggg-buybar.is-visible {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform .45s var(--ease), opacity .35s ease, visibility 0s 0s;
  }

  /* slips away while you scroll down so it never sits on the line you're
     reading; comes back when you pause or scroll up */
  .ggg-buybar.is-visible.is-dodging {
    transform: translateY(calc(100% + 24px));
    opacity: 0;
    pointer-events: none;
  }

  .ggg-buybar-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .ggg-buybar-copy b {
    font-size: 14.5px;
    font-weight: 650;
    line-height: 1.15;
  }

  .ggg-buybar-copy span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.2;
  }

  .ggg-buybar-cta {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 26px;
    border-radius: 999px;
    color: var(--_colors---color--dark);
    background: var(--brand);
    font-size: 16px;
    font-weight: 650;
    transition: transform .18s var(--ease);
  }

  .ggg-buybar-cta:active {
    transform: scale(.94);
  }
}

/* ---- accessibility: a clear brand-colored keyboard focus everywhere ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--brand, #d6fd70);
  outline-offset: 2px;
  border-radius: 4px;
}

/* the pinned writing stage exists only on phones */
@media (min-width: 761px) {
  .gut-intro-stage {
    display: none;
  }
}

/* ---- grandma-test round (2026-07-18) ---- */

/* the first screen says what this is, in one plain sentence */
.gut-intro-hero-tagline {
  position: relative;
  z-index: 3;
  max-width: 34ch;
  margin: 0 auto 14px;
  color: rgba(16, 19, 18, .78);
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  /* balance the two lines so the centered text reads evenly instead of a full
     first line with "at home." dangling short underneath */
  text-wrap: balance;
}

@media (max-width: 760px) {
  /* .gut-intro-hero prefix raises specificity above ".gut-intro-panel p" so the
     centering always wins: left/right 0 + auto inline margins keep the
     max-width box dead-centered on the X axis at any width or line count. */
  .gut-intro-hero .gut-intro-hero-tagline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(240px, 31svh, 280px);
    margin-inline: auto;
    font-size: 15px;
  }
}



/* solid-enough bars: content sliding through the frosted header/buy bar
   read as "broken overprint" to non-technical testers */
.site-header {
  background: rgba(248, 247, 245, .88);
}

.site-header.is-scrolled {
  background: rgba(248, 247, 245, .96);
}

@media (max-width: 760px) {
  .ggg-buybar {
    background: rgba(248, 247, 245, .97);
  }

  /* the last pricing card can scroll fully clear of the sticky bar */
  .pricing-section {
    padding-bottom: 130px;
  }
}

/* contact: the real address, next to the form */
.contact-alt {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, .72);
  font-size: 15px;
}

.contact-alt a {
  color: var(--brand, #d6fd70);
  font-weight: 600;
}

/* stories masthead: body-level way back home */
.research-back-line {
  margin: 0 0 14px;
  font-size: 14.5px;
  font-weight: 650;
}

.research-back-line a {
  color: var(--muted, #6b6a6a);
}

.research-back-line a:hover {
  color: var(--dark, #181e25);
}

/* dad test: 42px arrows with a 14px dead gap between them ate mis-taps -
   wider spacing + an invisible enlarged hit area on every arrow */
.approach-buttons,
.process-buttons {
  gap: 22px;
}

.approach-arrow::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
}

@media (max-width: 900px) {
  .science-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 540px) {
  .science-hero .hero-bottom {
    gap: 18px;
  }

  .science-actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .science-action {
    min-width: 0;
    min-height: 52px;
    padding: 6px 6px 6px 16px;
    gap: 8px;
    font-size: 14px;
  }

  .science-action i {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .science-action i::before {
    top: 18px;
    left: 11px;
  }

  .science-action i::after {
    top: 14px;
    right: 11px;
  }
}

/* ---- Seed-inspired comparison stage: dark product backdrop + translucent
   comparison chart + one continuous highlighted GutGutGoose column. ---- */
.comparison-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #f8f7f5;
  background:
    radial-gradient(circle at 19% 18%, rgba(214, 253, 112, .08), transparent 32%),
    radial-gradient(circle at 88% 86%, rgba(214, 253, 112, .06), transparent 28%),
    #173714;
}

.comparison-section::before {
  position: absolute;
  z-index: -1;
  top: -36%;
  left: -13%;
  width: 54%;
  aspect-ratio: 1 / 1.65;
  border: 1px solid rgba(214, 253, 112, .08);
  border-radius: 32%;
  background: rgba(214, 253, 112, .025);
  content: "";
  transform: rotate(27deg);
}

.comparison-head,
.comparison-list-wrap {
  position: relative;
  z-index: 1;
}

.comparison-head {
  display: block;
}

.comparison-head h2 {
  max-width: 8ch;
  color: #f8f7f5;
  font-size: clamp(42px, 4.1vw, 62px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.comparison-head h2 .hl {
  color: #f8f7f5;
  background: transparent;
  box-shadow: none;
}

.comparison-head p {
  max-width: 25ch;
  margin-top: 24px;
  color: rgba(248, 247, 245, .62);
  font-size: 16px;
  line-height: 1.5;
}

.comparison-list-wrap {
  --compare-brand-column: clamp(100px, 8vw, 116px);
  --compare-other-column: clamp(190px, 15vw, 236px);
  --compare-chart-padding: clamp(18px, 1.6vw, 26px);
  padding: var(--compare-chart-padding);
  border: 1px solid rgba(248, 247, 245, .18);
  border-radius: 32px;
  overflow: hidden;
  background: rgba(248, 247, 245, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
}

.comparison-list-wrap::after {
  position: absolute;
  z-index: 0;
  top: 16px;
  right: calc(var(--compare-chart-padding) + var(--compare-other-column));
  bottom: 16px;
  width: var(--compare-brand-column);
  border-radius: 17px;
  background: rgba(248, 247, 245, .17);
  content: "";
  pointer-events: none;
}

.comparison-axis,
.comparison-item {
  position: relative;
  z-index: 1;
  grid-template-columns:
    minmax(320px, 1fr)
    var(--compare-brand-column)
    var(--compare-other-column);
}

.comparison-axis {
  min-height: 54px;
  border: 0;
}

.comparison-axis strong {
  justify-content: center;
  padding: 10px;
  color: #f8f7f5;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
}

.comparison-axis strong + strong,
.comparison-item h3 ~ p,
.comparison-item p + p {
  border-left: 0;
}

.comparison-axis strong:nth-child(2) {
  align-self: center;
  justify-self: center;
  width: max-content;
  padding: 6px 10px;
  border: 1px solid rgba(248, 247, 245, .72);
  border-radius: 999px;
  background: transparent;
  font-size: 12px;
}

.comparison-axis strong:last-child {
  color: #f8f7f5;
  background: transparent;
}

.comparison-item {
  min-height: 60px;
  border: 0;
  background: transparent;
}

.comparison-item h3 {
  display: flex;
  align-items: center;
  padding: 15px 14px 15px 0;
  color: #f8f7f5;
  font-size: clamp(14px, .95vw, 17px);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.3;
  text-transform: none;
}

.comparison-item h3 span,
.comparison-item p span {
  display: none;
}

.comparison-item p {
  justify-content: center;
  min-width: 0;
  padding: 14px 12px;
  color: #f8f7f5;
  font-size: clamp(12px, .78vw, 14px);
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
}

.comparison-item p::before {
  display: none;
}

.comparison-ours {
  background: transparent;
}

.comparison-ours::after {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #f8f7f5;
  content: "";
}

.comparison-typical {
  color: rgba(248, 247, 245, .88);
}

.comparison-item:hover,
.comparison-item:hover .comparison-ours {
  background: transparent;
}

@media (min-width: 1000px) {
  .comparison-section {
    display: grid;
    grid-template-columns: minmax(230px, 300px) minmax(680px, 900px);
    justify-content: center;
    align-items: start;
    gap: clamp(30px, 4vw, 58px);
    padding-right: max(28px, calc((100vw - 1320px) / 2));
    padding-left: max(28px, calc((100vw - 1320px) / 2));
  }

  .comparison-head,
  .comparison-list-wrap {
    width: auto;
    margin-right: 0;
    margin-left: 0;
  }

  .comparison-head {
    margin-bottom: 0;
  }
}

@media (max-width: 999px) {
  .comparison-section {
    display: block;
  }

  .comparison-head h2 {
    max-width: 12ch;
  }

  .comparison-head p {
    max-width: 40ch;
  }

  .comparison-list-wrap {
    padding-bottom: 32px;
    overflow-x: auto;
    scrollbar-color: var(--brand) rgba(248, 247, 245, .16);
    scrollbar-width: thin;
  }

  .comparison-list-wrap::-webkit-scrollbar {
    height: 7px;
  }

  .comparison-list-wrap::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(248, 247, 245, .16);
  }

  .comparison-list-wrap::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--brand);
  }

  .comparison-list-wrap::after {
    display: none;
  }

  .comparison-axis,
  .comparison-item {
    display: grid;
    grid-template-columns: minmax(340px, 1fr) 104px 210px;
    min-width: 700px;
  }

  .comparison-axis {
    display: grid;
  }

  .comparison-item {
    padding: 0;
  }

  .comparison-item h3,
  .comparison-item p {
    border-left: 0;
  }

  .comparison-item p {
    display: flex;
  }

  .comparison-ours {
    margin-top: 0;
    background: rgba(248, 247, 245, .17);
  }

  .comparison-item:first-child .comparison-ours {
    border-radius: 16px 16px 0 0;
  }

  .comparison-item:last-child .comparison-ours {
    border-radius: 0 0 16px 16px;
  }
}

/* Phones keep the same three-column Seed chart. Compact column widths and
   type let it fit the viewport without changing into a card layout. */
@media (max-width: 759px) {
  .comparison-list-wrap {
    --compare-brand-column: 64px;
    --compare-other-column: minmax(88px, .9fr);
    --compare-chart-padding: 12px;
    padding: var(--compare-chart-padding);
    overflow: hidden;
  }

  .comparison-axis {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) 64px minmax(88px, .9fr);
    min-width: 0;
    min-height: 42px;
  }

  .comparison-axis strong {
    padding: 6px 4px;
    font-size: 9px;
    line-height: 1.15;
  }

  .comparison-axis strong:nth-child(2) {
    max-width: 58px;
    padding: 4px 6px;
    font-size: 8px;
  }

  .comparison-item {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) 64px minmax(88px, .9fr);
    gap: 0;
    min-width: 0;
    min-height: 56px;
    padding: 0;
    border: 0;
  }

  .comparison-item h3 {
    grid-column: auto;
    padding: 10px 8px 10px 0;
    font-size: 11px;
    line-height: 1.25;
  }

  .comparison-item p {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0;
    min-width: 0;
    padding: 8px 6px;
    border: 0;
    border-radius: 0;
    font-size: 9px;
    line-height: 1.25;
    text-align: center;
  }

  .comparison-item p span {
    display: none;
  }

  .comparison-ours {
    margin-top: 0;
    background: rgba(248, 247, 245, .17);
  }

  .comparison-item:first-child .comparison-ours {
    border-radius: 12px 12px 0 0;
  }

  .comparison-item:last-child .comparison-ours {
    border-radius: 0 0 12px 12px;
  }
}

/* Semantic Seed-style comparison table. The section keeps a clean branded
   background with no product image, outline, or bottle-derived decoration. */
.comparison-section::before {
  display: none;
}

.comparison-list-wrap {
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.comparison-list-wrap::after {
  display: none;
}

.comparison-table {
  width: 100%;
  max-width: 816px;
  min-height: 447px;
  padding: 24px 16px;
  border: 1px solid rgba(248, 247, 245, .2);
  border-radius: 32px;
  border-spacing: 0;
  border-collapse: separate;
  table-layout: fixed;
  color: #fcfcf7;
  background: rgba(248, 247, 245, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  font-family: "GGG Compare Sans", "Raveo", Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.comparison-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.comparison-table col.comparison-table-feature {
  width: 56%;
}

.comparison-table col.comparison-table-brand {
  width: 14%;
}

.comparison-table col.comparison-table-typical {
  width: 30%;
}

.comparison-table col.comparison-table-feature {
  width: 56%;
}

.comparison-table th,
.comparison-table td {
  border: 0;
  color: inherit;
  vertical-align: middle;
}

.comparison-table thead th {
  height: 40px;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  text-align: center;
}

.comparison-table thead th:first-child {
  padding: 0;
}

.comparison-table tbody th {
  height: 72px;
  padding: 24px 20px 24px 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  text-align: left;
}

.comparison-table tbody td {
  height: 72px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 300;
  line-height: 22px;
  text-align: center;
}

.comparison-table thead th:nth-child(2),
.comparison-table tbody td:nth-child(2) {
  background: rgba(214, 253, 112, .19);
}

.comparison-table thead th:nth-child(2) {
  border-radius: 16px 16px 0 0;
}

.comparison-table tbody tr:last-child td:nth-child(2) {
  border-radius: 0 0 16px 16px;
}

.comparison-footnote {
  width: 100%;
  max-width: 816px;
  margin: 18px 0 0;
  color: rgba(248, 247, 245, .6);
  font-family: "GGG Compare Sans", "Raveo", Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.5;
}

.comparison-table-brand-title span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 3px 10px;
  border: 1px solid rgba(252, 252, 247, .72);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 400;
  line-height: 18px;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.comparison-table-brand-title {
  position: relative;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.comparison-table-yes span {
  display: block;
  width: 16px;
  height: 16px;
  margin: 0 auto;
  border: 1px solid #fcfcf7;
  border-radius: 50%;
  background: #fcfcf7;
}

@media (min-width: 1000px) {
  .comparison-section {
    grid-template-columns: minmax(250px, 330px) minmax(620px, 816px);
    gap: clamp(32px, 4vw, 64px);
  }

  .comparison-head h2 {
    max-width: none;
    font-size: clamp(44px, 3.75vw, 54px);
    line-height: 1.02;
    letter-spacing: -.04em;
  }

  .comparison-head p {
    max-width: 27ch;
    margin-top: 28px;
    font-size: 17px;
    line-height: 1.48;
  }
}

@media (max-width: 999px) {
  .comparison-list-wrap {
    padding: 0;
    overflow: visible;
  }

  .comparison-table {
    margin-inline: auto;
  }
}

@media (max-width: 759px) {
  .comparison-table {
    width: 100%;
    min-height: 0;
    padding: 12px;
    border-radius: 24px;
    font-size: 11px;
    line-height: 14px;
  }

  .comparison-table col.comparison-table-feature {
    width: 50%;
  }

  .comparison-table col.comparison-table-brand {
    width: 18.5%;
  }

  .comparison-table col.comparison-table-typical {
    width: 31.5%;
  }

  .comparison-table thead th {
    height: 42px;
    padding: 5px 4px;
    font-size: 9px;
    line-height: 11px;
  }

  .comparison-table tbody th {
    height: 58px;
    padding: 10px 8px 10px 0;
    font-size: 11px;
    line-height: 13px;
  }

  .comparison-table tbody td {
    height: 58px;
    padding: 8px 5px;
    font-size: 9px;
    line-height: 11px;
  }

  .comparison-table-brand-title span {
    min-height: 20px;
    max-width: 58px;
    padding: 3px 5px;
    font-size: 7px;
    line-height: 10px;
  }

  .comparison-table thead th:nth-child(2) {
    border-radius: 12px 12px 0 0;
  }

  .comparison-table tbody tr:last-child td:nth-child(2) {
    border-radius: 0 0 12px 12px;
  }

  .comparison-table-yes span {
    width: 14px;
    height: 14px;
  }

  .comparison-footnote {
    margin-top: 14px;
    font-size: 10px;
    line-height: 1.45;
  }

}

/* ---- Seed-inspired process chapters ----
   Open, numbered science chapters replace the old carousel. Each chapter
   keeps the full customer journey visible and gives the evidence imagery the
   same editorial weight as the copy. */
.seed-process.process-section {
  padding: clamp(96px, 8vw, 156px) 0 0;
  color: #16361c;
  background: #fff;
  overflow: clip;
}

.seed-process .process-top {
  min-height: 0;
  padding-bottom: clamp(78px, 7vw, 132px);
}

.seed-process .process-top h2,
.seed-process .process-top p {
  margin: 0;
  color: #16361c;
}

.seed-process .process-top p {
  max-width: 650px;
  font-size: clamp(21px, 1.45vw, 29px);
  line-height: 1.4;
}

.seed-process-chapters {
  padding-bottom: clamp(98px, 8vw, 164px);
}

.seed-process-step {
  padding: 0 0 clamp(82px, 7vw, 136px);
  border-top: 1px solid rgba(22, 54, 28, .32);
}

.seed-process-step + .seed-process-step {
  margin-top: 0;
}

.seed-process-step-head {
  display: grid;
  grid-template-columns: minmax(190px, .64fr) minmax(0, 1.36fr);
  align-items: start;
  padding: clamp(30px, 3.1vw, 58px) 0 clamp(56px, 5.5vw, 104px);
}

.seed-process-step-head span,
.seed-process-step-head h3 {
  margin: 0;
  color: #16361c;
  font-size: clamp(58px, 5.35vw, 102px);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .94;
}

.seed-process-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: center;
  background: #eef2ed;
}

.seed-process-media--portrait {
  object-position: center 62%;
}

.seed-process-step-body {
  display: grid;
  grid-template-columns: minmax(190px, .64fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(34px, 4.4vw, 86px);
  padding-top: clamp(46px, 4.5vw, 84px);
}

.seed-process-step-body > div {
  grid-column: 2;
}

.seed-process-step-body h4,
.seed-process-step-body p,
.seed-process-note strong,
.seed-process-note span {
  margin: 0;
}

.seed-process-step-body h4 {
  margin-bottom: 20px;
  color: #16361c;
  font-size: clamp(25px, 1.75vw, 35px);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.08;
}

.seed-process-step-body p {
  max-width: 570px;
  color: #35533b;
  font-size: clamp(17px, 1.15vw, 22px);
  line-height: 1.52;
}

.seed-process-note {
  grid-column: 3;
  align-self: start;
  padding-top: 18px;
  border-top: 3px solid var(--brand);
}

.seed-process-note span {
  display: block;
  margin-bottom: 11px;
  color: #667569;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .11em;
  line-height: 1.25;
  text-transform: uppercase;
}

.seed-process-note strong {
  display: block;
  max-width: 530px;
  color: #16361c;
  font-size: clamp(20px, 1.4vw, 28px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.seed-process-decision span:not(:first-child) {
  margin-top: clamp(24px, 2vw, 36px);
  padding-top: clamp(22px, 1.8vw, 32px);
  border-top: 1px solid rgba(22, 54, 28, .18);
}

@media (max-width: 900px) {
  .seed-process.process-section {
    padding-top: 82px;
  }

  .seed-process .process-top {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-bottom: 76px;
  }

  .seed-process-step {
    padding-bottom: 84px;
  }

  .seed-process-step-head {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 16px;
    padding: 26px 0 52px;
  }

  .seed-process-step-head span,
  .seed-process-step-head h3 {
    font-size: clamp(45px, 9.5vw, 72px);
  }

  .seed-process-media {
    aspect-ratio: 4 / 3;
  }

  .seed-process-step-body {
    grid-template-columns: 1fr 1fr;
    gap: 34px;
    padding-top: 42px;
  }

  .seed-process-step-body > div {
    grid-column: 1;
  }

  .seed-process-note {
    grid-column: 2;
  }
}

@media (max-width: 620px) {
  .seed-process.process-section {
    padding-top: 68px;
  }

  .seed-process .process-top {
    gap: 22px;
    padding-bottom: 56px;
  }

  .seed-process .process-top p {
    font-size: 19px;
  }

  .seed-process-step {
    padding-bottom: 68px;
  }

  .seed-process-step-head {
    grid-template-columns: 66px minmax(0, 1fr);
    padding: 22px 0 38px;
  }

  .seed-process-step-head span,
  .seed-process-step-head h3 {
    font-size: clamp(39px, 11vw, 49px);
    line-height: .98;
  }

  .seed-process-media {
    width: calc(100% + 36px);
    max-width: none;
    margin-left: -18px;
    aspect-ratio: 1 / 1;
  }

  .seed-process-step-body {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-top: 36px;
  }

  .seed-process-step-body > div,
  .seed-process-note {
    grid-column: 1;
  }

  .seed-process-step-body h4 {
    font-size: 26px;
  }

  .seed-process-step-body p {
    font-size: 17px;
  }

  .seed-process-note strong {
    font-size: 21px;
  }
}

/* --------------------------------------------------------------------------
   One-button conversion hierarchy
   Every lime action starts the Standard gut test. Research, comparison,
   clinic care, newsletter, and booking remain available as secondary paths.
   -------------------------------------------------------------------------- */

.site-header .header-waitlist {
  min-width: 152px;
  padding-inline: 16px;
  white-space: nowrap;
}

.site-header .header-waitlist .button-text {
  padding-inline: 0;
}

/* Keep one label at rest. The legacy Webflow duplicate was intended for a
   roll animation, but long conversion copy exposed both lines on phones. */
.button-text-mask .button-text._2 {
  display: none;
}

.button-text-mask {
  position: relative;
  z-index: 2;
}

.button-bg {
  z-index: 0;
  pointer-events: none;
}

.button-text-mask .button-text._1 {
  position: relative;
  z-index: 2;
  opacity: 1;
  transform: none;
}

.gut-intro-cta-hero {
  min-width: 188px;
}

.gut-intro-cta-secondary {
  min-height: auto;
  margin-left: 8px;
  padding: 7px 2px 5px;
  border: 0;
  border-bottom: 1px solid rgba(16, 19, 18, .38);
  border-radius: 0;
  color: rgba(16, 19, 18, .72);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-size: 13px;
  font-weight: 650;
}

.gut-intro-cta-secondary:hover,
.gut-intro-cta-secondary:focus-visible {
  color: var(--gut-intro-ink);
  border-bottom-color: currentColor;
  background: transparent;
  transform: translateY(-1px);
}

.science-action-secondary {
  min-width: auto;
  min-height: auto;
  padding: 8px 2px 6px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .52);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-size: 14px;
}

.science-action-secondary i {
  display: none;
}

.science-action-secondary:hover,
.science-action-secondary:focus-visible {
  border-bottom-color: #fff;
  background: transparent;
}

.pricing-buy-secondary {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 8px 17px;
  border: 1px solid rgba(24, 30, 37, .28);
  border-radius: 999px;
  color: var(--dark, #181e25);
  background: transparent;
  text-align: center;
  transition: color .24s ease, border-color .24s ease, background-color .24s ease, transform .24s var(--ease);
}

.pricing-buy-secondary:hover,
.pricing-buy-secondary:focus-visible {
  color: var(--white, #fff);
  border-color: var(--green, #1d3f2b);
  background: var(--green, #1d3f2b);
  transform: translateY(-2px);
}

.pricing-card-clinics .pricing-buy.pricing-buy-secondary {
  display: inline-flex;
  color: var(--white, #fff);
  border-color: rgba(255, 255, 255, .48);
}

.pricing-card-clinics .pricing-buy.pricing-buy-secondary:hover,
.pricing-card-clinics .pricing-buy.pricing-buy-secondary:focus-visible {
  color: var(--green, #16361c);
  border-color: var(--brand, #d6fd70);
  background: var(--brand, #d6fd70);
}

.contact-book {
  color: var(--white, #fff);
  border-color: rgba(255, 255, 255, .46);
  background: transparent;
}

.contact-book:hover,
.contact-book:focus-visible {
  border-color: rgba(255, 255, 255, .86);
  background: rgba(255, 255, 255, .09);
}

.image-cta-secondary-link,
.cta-secondary-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 2px 6px;
  border-bottom: 1px solid currentColor;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  opacity: .72;
  transition: opacity .2s ease, transform .2s var(--ease);
}

.image-cta-secondary-link {
  color: var(--white, #fff);
}

.cta-secondary-link {
  color: var(--dark, #181e25);
}

.image-cta-secondary-link:hover,
.image-cta-secondary-link:focus-visible,
.cta-secondary-link:hover,
.cta-secondary-link:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
}

.cta-button-wrap {
  align-items: center;
  gap: 18px;
}

.newsletter-form-block {
  opacity: .62;
  transition: opacity .25s ease;
}

.newsletter-form-block:hover,
.newsletter-form-block:focus-within {
  opacity: 1;
}

@media (max-width: 760px) {
  .ggg-inapp-webview .image-cta {
    min-height: var(--ggg-inapp-tree-h, 180svh);
  }

  .ggg-inapp-webview .image-cta-tree-video,
  .ggg-inapp-webview .image-cta::after {
    height: var(--ggg-inapp-vh, var(--app-vh, 100vh));
  }

  .ggg-inapp-webview .image-cta::after {
    margin-top: calc(-1 * var(--ggg-inapp-vh, var(--app-vh, 100vh)));
  }

  .ggg-inapp-webview .image-cta-copy {
    min-height: var(--ggg-inapp-vh, var(--app-vh, 100vh));
    margin-top: calc(-1 * var(--ggg-inapp-vh, var(--app-vh, 100vh)));
  }

  /* Feathered reading light for the bottle sequence. The radial fade keeps
     moving product details from crossing the copy without introducing a
     visible card edge or an expensive live blur during the 3D animation. */
  .gut-intro-side > .gut-intro-reveal {
    position: relative;
    isolation: isolate;
  }

  .gut-intro-side > .gut-intro-reveal::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -30px -24px -28px;
    pointer-events: none;
    background: radial-gradient(
      ellipse 88% 74% at 50% 52%,
      rgba(250, 252, 246, .97) 0%,
      rgba(250, 252, 246, .90) 46%,
      rgba(250, 252, 246, .58) 68%,
      rgba(250, 252, 246, 0) 100%
    );
  }

  .site-header .header-waitlist {
    min-width: 132px;
    padding-inline: 11px;
  }

  .site-header .header-waitlist .button-text-small {
    font-size: 11.5px;
  }

  .gut-intro-hero .gut-intro-cta-row .gut-intro-cta-hero {
    width: min(56vw, 188px);
  }

  .gut-intro-hero .gut-intro-cta-row .gut-intro-cta-secondary {
    width: auto;
    min-height: auto;
    padding-inline: 2px;
  }

  .science-actions {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .science-action-primary {
    min-width: 190px;
  }

  .science-action-secondary {
    min-width: auto;
    min-height: auto;
    padding: 7px 2px 5px;
  }

  .ggg-buybar-cta {
    max-width: 142px;
    padding-inline: 17px;
    font-size: 13px;
    text-align: center;
    white-space: nowrap;
  }
}

@media (min-width: 761px) {
  .ggg-buybar {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 900;
    display: flex;
    width: min(690px, calc(100% - 48px));
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 10px 10px 10px 24px;
    color: var(--dark);
    border: 1px solid rgba(24, 30, 37, .11);
    border-radius: 999px;
    background: rgba(248, 247, 245, .9);
    box-shadow: 0 20px 54px -22px rgba(16, 19, 18, .42);
    -webkit-backdrop-filter: blur(18px) saturate(155%);
    backdrop-filter: blur(18px) saturate(155%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, calc(100% + 40px));
    transition: transform .45s var(--ease), opacity .35s ease, visibility 0s .45s;
  }

  .ggg-buybar.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition: transform .45s var(--ease), opacity .35s ease, visibility 0s 0s;
  }

  .ggg-buybar.is-visible.is-dodging {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, calc(100% + 40px));
  }

  .ggg-buybar-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .ggg-buybar-copy b {
    color: var(--dark);
    font-size: 15.5px;
    font-weight: 650;
    line-height: 1.15;
  }

  .ggg-buybar-copy span {
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.2;
  }

  .ggg-buybar-cta {
    flex: none;
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    padding: 13px 27px;
    border-radius: 999px;
    color: var(--_colors---color--dark);
    background: var(--brand);
    font-size: 14px;
    font-weight: 650;
    white-space: nowrap;
    transition: transform .18s var(--ease);
  }

  .ggg-buybar-cta:hover,
  .ggg-buybar-cta:focus-visible {
    transform: translateY(-2px);
  }

  .ggg-buybar-cta:active {
    transform: scale(.96);
  }
}

@media (max-width: 390px) {
  .site-header .brand {
    width: 78px;
  }

  .site-header .header-waitlist {
    min-width: 120px;
    padding-inline: 9px;
  }

  .site-header .header-waitlist .button-text-small {
    font-size: 10.5px;
  }

  .science-action-primary {
    min-width: 176px;
    font-size: 13px;
  }

  .ggg-buybar-cta {
    max-width: 132px;
    padding-inline: 13px;
    font-size: 12px;
  }
}