:root{
  --cream:#F6F1E8;
  --forest:#0F2E2A;
  --slate:#2C3E3A;
  --gut:#2F8F5B;
  --gut-dark:#1F6D46;
  --line:rgba(15,46,42,.12);
  --soft:rgba(255,255,255,.38);
  --soft-2:rgba(15,46,42,.045);
  --micro:12px;
  --xs:16px;
  --splus:24px;
  --sm:32px;
  --md:48px;
  --lg-soft:64px;
  --lg:72px;
  --xl:96px;
  --max:1280px;
  --wide:1440px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--forest);font-family:'Inter','Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.site-header{min-height:72px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 34px;background:rgba(246,241,232,.88);backdrop-filter:blur(14px);position:sticky;top:0;z-index:30;border-bottom:1px solid rgba(15,46,42,.045)}
.brand-logo svg{width:252px;height:auto;display:block;margin-left:-22px}.site-nav{display:flex;gap:38px;font-size:15px;font-weight:700;letter-spacing:-.01em}.nav-cta{justify-self:end;min-height:40px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--forest);color:var(--cream);font-weight:700;font-size:14px}.container-wide{width:min(calc(100% - 64px),var(--wide));margin:0 auto}.section-space{padding:var(--lg) 0}.section-intro{width:min(calc(100% - 64px),var(--max));margin:0 auto var(--sm)}.section-intro.narrow{max-width:860px}.section-intro.centered{text-align:center;max-width:900px}.kicker{font:700 12px/1.1 'Satoshi','Inter',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--gut);margin:0 0 var(--micro)}.kicker.light{color:rgba(246,241,232,.76)}h1,h2,h3{font-family:'Satoshi','Inter',sans-serif;margin:0;letter-spacing:-.045em}h1{font-size:clamp(48px,5.6vw,88px);line-height:.93}h2{font-size:clamp(34px,3.6vw,58px);line-height:1.02}h3{font-size:clamp(19px,1.5vw,24px);line-height:1.14}p{font-size:17px;line-height:1.72;color:rgba(15,46,42,.72);margin:0}.lead{font-size:20px;line-height:1.55;max-width:620px;color:rgba(15,46,42,.76)}
/* hero */
.hero{width:min(calc(100% - 64px),1440px);margin:var(--md) auto var(--lg-soft);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);gap:var(--md);align-items:center}.hero-media{min-height:650px;border-radius:34px;overflow:hidden;background:linear-gradient(120deg,rgba(47,143,91,.08),rgba(255,255,255,.22));box-shadow:0 30px 70px rgba(15,46,42,.055)}.hero-media img{width:100%;height:650px;object-fit:cover;object-position:center}.hero-copy{padding:var(--md) 0}.hero-copy h1{max-width:570px}.hero-copy .lead{margin-top:var(--splus)}.hero-markers{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--sm)}.hero-markers span{min-height:36px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;background:rgba(47,143,91,.08);color:var(--forest);font-size:13px;font-weight:700}.commerce-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;max-width:650px;margin-top:var(--sm);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.commerce-row div{padding:18px 20px 18px 0}.commerce-row small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(15,46,42,.48);font-weight:800;margin-bottom:6px}.commerce-row strong{font-size:15px;color:var(--forest)}.hero-actions{display:flex;align-items:center;gap:22px;margin-top:var(--sm)}.primary-btn{min-height:46px;padding:0 28px;border-radius:999px;background:var(--forest);color:var(--cream);display:inline-flex;align-items:center;font-size:15px;font-weight:800}.text-link{font-size:15px;font-weight:800;color:var(--forest);border-bottom:1px solid rgba(15,46,42,.3)}
/* education */
.education{position:relative}.education-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--lg-soft);align-items:center}.microbiome-visual{min-height:540px;border-radius:40px;background:radial-gradient(circle at 40% 34%, rgba(47,143,91,.18), transparent 28%), radial-gradient(circle at 70% 72%, rgba(15,46,42,.08), transparent 26%), rgba(255,255,255,.24);display:grid;place-items:center;overflow:hidden;position:relative}.balance-orbit{width:min(390px,72vw);height:min(390px,72vw);border-radius:50%;border:1px solid rgba(15,46,42,.11);position:relative}.balance-orbit:after{content:"";position:absolute;inset:58px;border-radius:50%;border:1px dashed rgba(15,46,42,.12)}.balance-orbit span{position:absolute;border-radius:50%;filter:drop-shadow(0 12px 18px rgba(15,46,42,.08))}.good{width:44px;height:44px;background:var(--gut)}.bad{width:28px;height:28px;background:rgba(15,46,42,.22)}.good.one{left:54px;top:78px}.good.two{right:44px;top:96px}.good.three{left:98px;bottom:48px}.good.four{right:76px;bottom:68px}.bad.one{left:174px;top:24px}.bad.two{right:42px;bottom:158px}.bad.three{left:52px;bottom:160px}.center-note{position:absolute;inset:122px;border-radius:50%;background:rgba(246,241,232,.82);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}.center-note strong{font-family:'Satoshi';font-size:26px;letter-spacing:-.04em}.center-note em{font-style:normal;font-size:12px;line-height:1.4;color:rgba(15,46,42,.62);max-width:150px}.education-copy{max-width:620px}.education-copy h3{margin:0 0 var(--xs);font-size:25px}.education-copy p+p,.education-copy h3:not(:first-child){margin-top:var(--splus)}.bridge{padding-top:var(--splus);border-top:1px solid var(--line);font-weight:600;color:rgba(15,46,42,.82)}
/* formulation */




.line-icon{width:52px;height:52px;border:2px solid rgba(246,241,232,.82);border-radius:50%;position:relative}.microbe-icon:before,.microbe-icon:after{content:"";position:absolute;border:2px solid rgba(246,241,232,.82);border-radius:50%;width:18px;height:18px;left:15px;top:-9px}.microbe-icon:after{left:32px;top:17px}.enzyme-icon{border-radius:14px}.enzyme-icon:before{content:"";position:absolute;height:34px;width:2px;background:rgba(246,241,232,.82);left:24px;top:8px;transform:rotate(45deg)}.fibre-icon:before{content:"";position:absolute;width:36px;height:2px;background:rgba(246,241,232,.82);left:8px;top:25px;transform:rotate(-28deg)}.bio-icon:before{content:"✦";position:absolute;font-size:28px;left:13px;top:8px;color:rgba(246,241,232,.86)}
/* benefits */
.benefit-story{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--lg-soft);align-items:center}.benefit-timeline{position:relative;padding-left:70px}.benefit-timeline:before{content:"";position:absolute;left:23px;top:22px;bottom:22px;width:1px;background:rgba(15,46,42,.16)}.benefit-timeline article{position:relative;padding:0 0 var(--md)}.benefit-timeline article:last-child{padding-bottom:0}.dot{position:absolute;left:-55px;top:11px;width:12px;height:12px;background:var(--forest);border-radius:50%;box-shadow:0 0 0 12px var(--cream)}.benefit-pill{display:inline-flex;align-items:center;min-height:34px;padding:0 16px;border-radius:999px;background:var(--forest);color:var(--cream);font-weight:700;font-size:13px;margin-bottom:var(--xs)}.benefit-timeline h3{font-size:25px;margin-bottom:12px}.benefit-timeline ul{margin:0;padding-left:18px;color:rgba(15,46,42,.76);font-size:16px;line-height:1.7}.benefit-media{border-radius:34px;overflow:hidden;background:rgba(255,255,255,.24);box-shadow:0 26px 70px rgba(15,46,42,.045)}.benefit-media img{width:100%;height:560px;object-fit:cover;object-position:center}
/* use cases */
.use-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.use-row article{padding:var(--sm) var(--splus);min-height:230px}.use-row span{font-family:'Satoshi';font-size:13px;font-weight:900;color:var(--gut);letter-spacing:.12em}.use-row h3{font-size:22px;margin:var(--splus) 0 var(--xs)}.use-row p{font-size:15px;line-height:1.62}
/* ingredients */
.ingredient-shell{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--lg-soft);align-items:start}.ingredient-copy{padding-top:var(--splus)}.ingredient-copy>p{max-width:640px}.dose-table{margin-top:var(--sm);border-top:1px solid var(--line);max-width:760px}.dose-table div{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);font-size:15px}.dose-table strong{font-family:'Satoshi';font-size:18px;letter-spacing:-.03em}.dose-table span{color:rgba(15,46,42,.62)}.dose-table b{font-weight:800;color:var(--gut)}.usage-note{margin-top:var(--splus);font-size:15px;line-height:1.65;max-width:680px}.label-card{display:flex;justify-content:center;padding:var(--splus);border-radius:34px;background:rgba(255,255,255,.22)}.label-card img{max-height:640px;width:auto;object-fit:contain;filter:drop-shadow(0 24px 38px rgba(15,46,42,.08))}.ingredient-layers{margin-top:var(--md);display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.ingredient-layers article{padding:28px 24px}.ingredient-layers h3{font-size:20px;margin-bottom:14px}.ingredient-layers p{font-size:14px;line-height:1.62}
/* range */
.range-strip article a{display:block;text-decoration:none;color:inherit}
.range-strip{display:grid;grid-template-columns:repeat(8,minmax(118px,1fr));gap:14px}.range-strip article{padding:14px;border-radius:26px;background:rgba(255,255,255,.18);transition:transform .25s ease, background .25s ease;border:1px solid rgba(15,46,42,.045)}.range-strip article:hover{transform:translateY(-3px);background:rgba(255,255,255,.32)}.range-strip img{aspect-ratio:1/1.18;width:100%;object-fit:contain;border-radius:20px;background:linear-gradient(180deg,color-mix(in srgb,var(--sku) 10%, transparent),rgba(255,255,255,.08))}.range-strip h3{font-size:14px;text-align:center;margin-top:12px;letter-spacing:-.02em}.footer{padding:var(--lg) 32px;background:var(--forest);color:var(--cream)}.footer-inner{width:min(100%,1280px);margin:0 auto;display:flex;align-items:end;justify-content:space-between}.footer-logo{font-family:'Satoshi';font-size:58px;font-weight:700;letter-spacing:-.05em}.footer-logo span{font-size:22px;margin-left:4px}.footer p{color:rgba(246,241,232,.68);font-size:14px}
@media(max-width:1100px){.site-nav{display:none}.hero{grid-template-columns:1fr;gap:var(--sm)}.hero-media,.hero-media img{height:auto;min-height:0}.hero-media img{aspect-ratio:1/1;object-fit:cover}.education-grid,.benefit-story,.ingredient-shell{grid-template-columns:1fr}.use-row,.ingredient-layers{grid-template-columns:repeat(2,1fr)}.range-strip{grid-template-columns:repeat(4,1fr)}.label-card img{max-height:520px}.benefit-media img{height:420px}}
@media(max-width:680px){:root{--lg:56px;--lg-soft:48px;--xl:72px}.site-header{grid-template-columns:1fr auto;padding:0 20px}.brand-logo svg{width:206px;margin-left:-20px}.nav-cta{min-height:36px;padding:0 16px;font-size:13px}.container-wide,.section-intro,.hero{width:calc(100% - 28px)}.hero{margin:var(--splus) auto var(--md)}h1{font-size:44px}h2{font-size:34px}.lead{font-size:17px}.hero-copy{padding:0}.commerce-row{grid-template-columns:1fr}.commerce-row div{padding:15px 0}.hero-actions{align-items:flex-start;flex-direction:column;gap:14px}.microbiome-visual{min-height:360px;border-radius:28px}.balance-orbit{width:300px;height:300px}.center-note{inset:92px}.benefit-timeline{padding-left:54px}.dot{left:-39px}.benefit-media img{height:330px}.use-row,.ingredient-layers{grid-template-columns:1fr}.use-row article{min-height:auto}.dose-table div{grid-template-columns:1fr;gap:6px}.range-strip{grid-template-columns:repeat(2,1fr);gap:10px}.footer-inner{display:block}.footer-logo{font-size:48px}.footer p{margin-top:12px}}


/* ===========================
   Refinement pass — May 12
   =========================== */

.site-header{
  grid-template-columns:auto 1fr auto auto;
  column-gap:18px;
}

.nav-home{
  min-height:38px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(15,46,42,.13);
  color:var(--forest);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:800;
  background:rgba(255,255,255,.14);
}

/* Hero: fit within first screen more gracefully */
.hero{
  min-height:calc(100vh - 96px);
  margin:24px auto 56px;
  grid-template-columns:.96fr 1.04fr;
  gap:42px;
}

.hero-media{
  height:calc(100vh - 160px);
  min-height:560px;
  max-height:720px;
  border-radius:32px;
}

.hero-media img{
  height:100%;
  object-position:center;
}

.hero-copy{
  align-self:center;
  padding:0 20px 0 0;
}

h1{
  font-size:clamp(54px,5.55vw,88px);
  line-height:.92;
  max-width:680px;
}

.lead{
  max-width:640px;
  margin-top:24px;
  font-size:19px;
  line-height:1.55;
}

.hero-markers{
  margin-top:28px;
}

.hero-markers span{
  min-height:34px;
  padding:0 15px;
  font-size:13px;
}

.commerce-row{
  margin-top:26px;
}

.commerce-row div{
  padding:14px 20px 14px 0;
}

.hero-actions{
  margin-top:28px;
}

/* Benefits: make it concise and less tall */
.benefits.section-space{
  padding-top:64px;
  padding-bottom:72px;
}

.benefits .section-intro{
  margin-bottom:42px;
}

.benefits .section-intro h2{
  max-width:920px;
  margin-left:auto;
  margin-right:auto;
}

.benefit-story{
  grid-template-columns:.78fr 1.22fr;
  gap:48px;
  align-items:center;
}

.benefit-timeline{
  padding-left:62px;
}

.benefit-timeline article{
  padding-bottom:30px;
}

.benefit-pill{
  min-height:30px;
  font-size:12px;
  padding:0 14px;
  margin-bottom:12px;
}

.benefit-timeline h3{
  font-size:22px;
  margin-bottom:8px;
}

.benefit-timeline ul{
  font-size:15px;
  line-height:1.55;
}

.benefit-media{
  border-radius:32px;
  background:
    radial-gradient(circle at 40% 40%, rgba(47,143,91,.09), transparent 34%),
    rgba(255,255,255,.22);
}

.benefit-media img{
  height:410px;
  object-fit:cover;
  object-position:center;
}

/* Especially useful during: alignment and polish */
.use-cases.section-space{
  padding-top:72px;
  padding-bottom:72px;
}

.use-cases .section-intro.narrow{
  width:min(100% - 64px,1280px);
  max-width:1280px;
  text-align:left;
  margin-bottom:48px;
}

.use-cases .section-intro h2{
  max-width:820px;
}

.use-cases .section-intro p:not(.kicker){
  max-width:760px;
}

.use-row article{
  min-height:196px;
  padding:30px 24px;
}

.use-row h3{
  font-size:21px;
  margin:22px 0 12px;
}

.use-row p{
  font-size:15px;
  max-width:310px;
}

/* Ingredients: better alignment, calmer consumer copy */
.ingredients.section-space{
  padding-top:76px;
}

.ingredient-shell{
  grid-template-columns:1.05fr .95fr;
  gap:56px;
  align-items:center;
}

.ingredient-copy{
  padding-top:0;
}

.ingredient-copy h2{
  max-width:720px;
}

.label-card{
  padding:16px;
  border-radius:30px;
  background:
    radial-gradient(circle at center, rgba(47,143,91,.08), transparent 62%),
    rgba(255,255,255,.18);
}

.label-card img{
  max-height:600px;
  width:min(100%,520px);
  object-fit:contain;
}

.dose-table{
  margin-top:30px;
}

.dose-table div{
  padding:16px 0;
}

.usage-note{
  margin-top:22px;
}

/* Replaces repeated bottom ingredient paragraph strip with a stronger proof strip */
.ingredient-proof{
  margin-top:48px;
  padding:34px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:48px;
  align-items:center;
}

.ingredient-proof h3{
  font-size:32px;
  line-height:1.08;
  letter-spacing:-.045em;
  max-width:440px;
}

.proof-list{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.proof-list span{
  min-height:92px;
  border-radius:22px;
  background:rgba(255,255,255,.2);
  border:1px solid rgba(15,46,42,.055);
  display:flex;
  align-items:flex-end;
  padding:18px;
  color:var(--forest);
  font-family:'Satoshi','Inter',sans-serif;
  font-weight:800;
  font-size:15px;
  line-height:1.15;
}

/* Footer logo correction */
.footer-brand svg{
  width:230px;
  display:block;
  margin-left:-28px;
}

.footer-actions{
  text-align:right;
}

.footer-home{
  margin-top:14px;
  min-height:38px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid rgba(246,241,232,.22);
  color:var(--cream);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:800;
}

.footer-logo{display:none}

@media(max-width:1100px){
  .hero{
    min-height:auto;
    grid-template-columns:1fr;
  }
  .hero-media{
    height:auto;
    max-height:none;
    min-height:0;
  }
  .hero-media img{
    aspect-ratio:1.15/1;
    height:auto;
  }
  .ingredient-proof{
    grid-template-columns:1fr;
  }
  .proof-list{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:680px){
  .site-header{
    grid-template-columns:1fr auto auto;
    column-gap:8px;
  }
  .nav-home{
    min-height:34px;
    padding:0 12px;
    font-size:12px;
  }
  .hero{
    margin:18px auto 48px;
    gap:26px;
  }
  h1{
    font-size:42px;
    line-height:.95;
  }
  .lead{
    font-size:16px;
    margin-top:18px;
  }
  .hero-markers{
    margin-top:22px;
  }
  .commerce-row{
    margin-top:22px;
  }
  .benefits.section-space{
    padding-top:52px;
    padding-bottom:56px;
  }
  .benefit-media img{
    height:280px;
  }
  .use-cases .section-intro.narrow{
    width:calc(100% - 28px);
    margin-bottom:32px;
  }
  .ingredient-shell{
    gap:32px;
  }
  .label-card img{
    max-height:460px;
  }
  .ingredient-proof{
    margin-top:34px;
    gap:24px;
  }
  .ingredient-proof h3{
    font-size:26px;
  }
  .proof-list{
    grid-template-columns:1fr;
    gap:10px;
  }
  .proof-list span{
    min-height:70px;
  }
  .footer-inner{
    display:block;
  }
  .footer-actions{
    text-align:left;
    margin-top:12px;
  }
}


/* =========================================
   Editorial rhythm refinement — Section 2
   ========================================= */

/* Tighten Hero → Section 2 relationship */

.hero{
  margin-bottom: 40px !important;
}

/* Reduce excessive arrival spacing for section 2 */

.education.section-space{
  padding-top: 44px !important;
}

/* Stronger editorial composition */

.education .section-intro{
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

/* Headline width refined */

.education .section-intro h2{
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: -0.055em;
}

/* Supporting copy becomes editorial support text */

.education .section-intro p:not(.kicker){
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  font-size: 20px;
  line-height: 1.62;
  letter-spacing: -0.012em;
  color: rgba(15,46,42,.74);
}

/* Reduce paragraph-like feeling */

.education-copy{
  max-width: 1080px;
  margin-top: 42px !important;
}

.education-copy p{
  font-size: 17px;
  line-height: 1.78;
  color: rgba(15,46,42,.72);
}

.education-copy p:first-child{
  margin-top: 0;
}

/* Mobile refinements */

@media(max-width:768px){

  .hero{
    margin-bottom: 28px !important;
  }

  .education.section-space{
    padding-top: 34px !important;
  }

  .education .section-intro h2{
    max-width: 100%;
  }

  .education .section-intro p:not(.kicker){
    max-width: 92%;
    font-size: 17px;
    line-height: 1.58;
  }

  .education-copy{
    margin-top: 30px !important;
  }

  .education-copy p{
    font-size: 15.5px;
    line-height: 1.72;
  }

}



/* =====================================================
   Three-change refinement pass
   1) Section 2 headline correction
   2) Global density calibration
   3) Merge benefits + useful-during
   ===================================================== */

/* Global density: closer to landing page rhythm */
:root{
  --product-section-y: 72px;
  --product-section-y-compact: 60px;
}

.section-space{
  padding-top: var(--product-section-y) !important;
  padding-bottom: var(--product-section-y) !important;
}

.section-intro{
  margin-bottom: 42px !important;
}

.section-intro .kicker,
.kicker{
  font-size: 12px !important;
  letter-spacing: .22em !important;
}

.section-intro h2,
.ingredients h2,
.use-cases h2{
  font-size: clamp(40px, 4.2vw, 70px) !important;
  line-height: .94 !important;
  letter-spacing: -.058em !important;
}

.section-intro p:not(.kicker){
  font-size: clamp(17px, 1.28vw, 20px) !important;
  line-height: 1.58 !important;
}

p{
  line-height: 1.62;
}

.hero{
  min-height: calc(100vh - 108px);
  margin-bottom: 34px !important;
}

h1{
  font-size: clamp(50px, 5.05vw, 82px) !important;
  line-height: .92 !important;
}

.lead{
  font-size: 18px !important;
  line-height: 1.52 !important;
  margin-top: 22px !important;
}

.hero-media{
  max-height: 680px !important;
}

.hero-actions{
  margin-top: 24px !important;
}

/* Section 2 corrected editorial intro, matching approved visual direction */
.education.section-space{
  padding-top: 40px !important;
  padding-bottom: 66px !important;
}

.education .section-intro{
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  margin-bottom: 54px !important;
}

.education .section-intro .kicker{
  text-align:center;
  margin-bottom: 18px !important;
}

.education .section-intro h2{
  max-width: 560px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: clamp(48px, 5vw, 78px) !important;
  line-height: .92 !important;
  letter-spacing: -.062em !important;
}

.education .section-intro p:not(.kicker){
  max-width: 560px !important;
  margin: 22px auto 0 !important;
  font-size: 18px !important;
  line-height: 1.62 !important;
  letter-spacing: -.01em !important;
}

/* Lower education area: compact but still breathable */
.education-grid{
  gap: 48px !important;
  align-items: center !important;
}

.balance-visual{
  min-height: 440px !important;
  border-radius: 30px !important;
}

.education-copy{
  margin-top: 0 !important;
}

.education-copy article{
  padding: 26px 0 !important;
}

.education-copy h3{
  font-size: 24px !important;
  line-height: 1.12 !important;
  margin-bottom: 12px !important;
}

.education-copy p{
  font-size: 16px !important;
  line-height: 1.62 !important;
}

/* Formulation section density */
.formulation{
  padding-top: 70px !important;
  padding-bottom: 70px !important;
}



.formulation h2{
  font-size: clamp(42px, 4.6vw, 72px) !important;
}

.layer-grid{
  gap: 14px !important;
  margin-top: 44px !important;
}

.layer-card{
  padding: 24px !important;
}

.layer-card h3{
  font-size: 21px !important;
}

.layer-card p{
  font-size: 14.5px !important;
  line-height: 1.56 !important;
}

/* Benefits + useful moments merged into one concise designed system */
.benefits.section-space{
  padding-top: 66px !important;
  padding-bottom: 70px !important;
}

.benefits .section-intro{
  margin-bottom: 38px !important;
}

.benefit-story{
  grid-template-columns: .84fr 1.16fr !important;
  gap: 44px !important;
  align-items: center !important;
}

.benefit-timeline{
  padding-left: 54px !important;
}

.benefit-timeline article{
  padding-bottom: 24px !important;
}

.benefit-timeline article:last-child{
  padding-bottom: 0 !important;
}

.benefit-timeline h3{
  font-size: 21px !important;
}

.benefit-timeline ul{
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  margin-top: 8px !important;
}

.benefit-pill{
  min-height: 28px !important;
  font-size: 11.5px !important;
  margin-bottom: 10px !important;
}

.benefit-media img{
  height: 340px !important;
  object-fit: cover !important;
}

.use-moments{
  margin-top: 52px;
  padding-top: 32px;
  border-top: 1px solid rgba(15,46,42,.10);
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 46px;
  align-items: start;
}

.use-moments-copy h3{
  font-family: 'Satoshi','Inter',sans-serif;
  font-size: clamp(26px, 2.3vw, 38px);
  line-height: 1.04;
  letter-spacing: -.045em;
  color: var(--forest);
  max-width: 420px;
  margin: 14px 0 0;
}

.use-moments-grid{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 16px;
}

.use-moments-grid article{
  padding: 0 18px 0 0;
}

.use-moments-grid span{
  display: block;
  color: var(--gut);
  font-family: 'Satoshi','Inter',sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .14em;
  margin-bottom: 18px;
}

.use-moments-grid strong{
  display: block;
  color: var(--forest);
  font-family: 'Satoshi','Inter',sans-serif;
  font-size: 18px;
  line-height: 1.08;
  letter-spacing: -.035em;
  margin-bottom: 12px;
}

.use-moments-grid p{
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(15,46,42,.68);
}

/* Hide old use-cases section if any survived */
.use-cases{
  display:none !important;
}

/* Ingredients tighter and visually aligned */
.ingredients.section-space{
  padding-top: 68px !important;
  padding-bottom: 68px !important;
}

.ingredient-shell{
  gap: 48px !important;
}

.ingredient-copy h2{
  font-size: clamp(40px, 4.1vw, 66px) !important;
}

.dose-table{
  margin-top: 26px !important;
}

.dose-table div{
  padding: 14px 0 !important;
}

.label-card img{
  max-height: 560px !important;
}

.ingredient-proof{
  margin-top: 40px !important;
  padding: 28px 0 !important;
}

.proof-list span{
  min-height: 78px !important;
}

/* Range/footer density */
.range.section-space{
  padding-top: 66px !important;
  padding-bottom: 66px !important;
}

.footer{
  padding: 54px 0 !important;
}

/* Mobile */
@media(max-width: 900px){
  .section-space{
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  .education .section-intro h2{
    max-width: 420px !important;
    font-size: 46px !important;
  }

  .education .section-intro p:not(.kicker){
    max-width: 430px !important;
    font-size: 16px !important;
  }

  .education-grid,
  .benefit-story,
  .use-moments{
    grid-template-columns: 1fr !important;
  }

  .balance-visual{
    min-height: 340px !important;
  }

  .use-moments-grid{
    grid-template-columns: repeat(2,1fr);
  }

  .benefit-media img{
    height: 280px !important;
  }
}

@media(max-width: 560px){
  h1{
    font-size: 40px !important;
  }

  .section-intro h2,
  .ingredients h2{
    font-size: 38px !important;
  }

  .education .section-intro h2{
    font-size: 42px !important;
    max-width: 360px !important;
  }

  .education .section-intro p:not(.kicker){
    max-width: 330px !important;
  }

  .use-moments-grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .use-moments{
    gap: 24px;
  }
}



/* =====================================
   Final refinement preview
   ===================================== */

/* Change 3: formulation section compact */
.formulation{
  padding-top:58px !important;
  padding-bottom:58px !important;
}



.formulation h2{
  font-size:clamp(38px,4vw,62px) !important;
  max-width:720px;
}

.layer-grid{
  margin-top:32px !important;
  gap:10px !important;
}

.layer-card{
  padding:18px 18px 16px !important;
  min-height:180px !important;
  border-radius:24px !important;
}

.layer-card .icon{
  margin-bottom:12px !important;
}

.layer-card h3{
  font-size:18px !important;
  line-height:1.08 !important;
  margin-bottom:10px !important;
}

.layer-card p{
  font-size:13.5px !important;
  line-height:1.5 !important;
}

/* change 4: calmer headline hierarchy */
.section-intro h2,
.ingredients h2,
.range h2{
  font-size:clamp(34px,3.8vw,60px) !important;
}

.section-intro p:not(.kicker),
.range .section-intro p{
  margin-top:16px !important;
  line-height:1.62 !important;
}

/* Section 2 exact editorial composition */
.education .section-intro{
  max-width:620px !important;
}

.education .section-intro h2{
  max-width:520px !important;
  font-size:clamp(46px,4.5vw,72px) !important;
}

.education .section-intro p:not(.kicker){
  max-width:500px !important;
  margin-top:20px !important;
  font-size:17px !important;
}

.education-grid{
  margin-top:12px !important;
}

/* Change 1 + 6 integrated benefits/useful section */
.benefits{
  padding-top:60px !important;
  padding-bottom:60px !important;
}

.benefits .section-intro{
  margin-bottom:30px !important;
}

.benefits .section-intro h2{
  max-width:760px !important;
}

.benefit-story{
  align-items:center !important;
  gap:38px !important;
}

.benefit-media img{
  height:320px !important;
  object-fit:cover !important;
  object-position:center !important;
  border-radius:28px !important;
}

.benefits-useful{
  margin-top:30px;
  padding-top:24px;
  border-top:1px solid rgba(15,46,42,.10);
}

.benefits-useful-header{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:24px;
}

.benefits-useful-header h3{
  font-family:'Satoshi','Inter',sans-serif;
  font-size:clamp(22px,2vw,32px);
  line-height:1.02;
  letter-spacing:-.045em;
  color:var(--forest);
  margin:0;
}

.benefits-useful-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.benefits-useful-grid article{
  padding:18px 18px 0 0;
}

.benefits-useful-grid span{
  display:block;
  margin-bottom:14px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  color:var(--gut);
}

.benefits-useful-grid strong{
  display:block;
  font-family:'Satoshi','Inter',sans-serif;
  font-size:17px;
  line-height:1.08;
  letter-spacing:-.03em;
  margin-bottom:10px;
  color:var(--forest);
}

.benefits-useful-grid p{
  font-size:13.5px;
  line-height:1.52;
  color:rgba(15,46,42,.68);
  margin:0;
}

/* change 5 ingredient architecture strip redesign */
.ingredient-proof{
  grid-template-columns:.72fr 1.28fr !important;
  align-items:center !important;
  gap:36px !important;
  margin-top:34px !important;
  padding:34px 0 !important;
}

.ingredient-proof h3{
  max-width:420px !important;
  font-size:clamp(32px,3vw,46px) !important;
  line-height:.98 !important;
  letter-spacing:-.05em !important;
}

.proof-list{
  gap:12px !important;
}

.proof-list span{
  min-height:108px !important;
  border-radius:24px !important;
  padding:18px !important;
  align-items:flex-start !important;
  justify-content:flex-end !important;
  font-size:16px !important;
  line-height:1.08 !important;
  display:flex !important;
  flex-direction:column !important;
}

.proof-list span:nth-child(1)::after{
  content:"Blend";
}
.proof-list span:nth-child(2)::after{
  content:"Support";
}
.proof-list span:nth-child(3)::after{
  content:"Enzymes";
}
.proof-list span:nth-child(4)::after{
  content:"Nutrients";
}

.proof-list span::after{
  font-size:16px;
  line-height:1.08;
  font-weight:800;
}

.proof-list span{
  color:transparent !important;
  position:relative;
}

.proof-list span::before{
  content:attr(data-title);
}

.proof-list span:nth-child(1)::before{content:"Probiotic";}
.proof-list span:nth-child(2)::before{content:"Prebiotic";}
.proof-list span:nth-child(3)::before{content:"Digestive";}
.proof-list span:nth-child(4)::before{content:"Gut Support";}

.proof-list span::before{
  color:var(--forest);
  font-size:16px;
  line-height:1.08;
  font-weight:800;
}

/* spacing after headings */
.ingredients .section-intro p{
  margin-top:20px !important;
}

.range .section-intro p{
  margin-top:22px !important;
}

@media(max-width:900px){
  .benefits-useful-header{
    display:block;
  }
  .benefits-useful-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .ingredient-proof{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:560px){
  .benefits-useful-grid{
    grid-template-columns:1fr;
  }
  .proof-list{
    grid-template-columns:1fr !important;
  }
}



/* ==========================================
   Four corrections refinement pass
   1. Correct benefits image crop
   2. Visible integrated "Especially useful during"
   3. Redesign functional systems strip cards
   4. Increase headline-to-subtext spacing
   ========================================== */

/* Benefits image crop / placement */
.benefit-media{
  overflow:hidden !important;
  border-radius:28px !important;
  background:rgba(255,255,255,.18) !important;
}

.benefit-media img{
  width:100% !important;
  height:360px !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
  border-radius:28px !important;
}

/* Make the useful-during element visible and integrated under the image */
.benefit-story{
  grid-template-columns:.78fr 1.22fr !important;
  grid-template-areas:
    "timeline image"
    "timeline usepanel" !important;
  gap:26px 44px !important;
  align-items:start !important;
}

.benefit-timeline{
  grid-area:timeline !important;
  align-self:center !important;
}

.benefit-media{
  grid-area:image !important;
}

.benefit-use-panel{
  grid-area:usepanel !important;
  margin-top:0 !important;
  padding:22px 24px 24px !important;
  border-radius:26px !important;
  background:rgba(255,255,255,.18) !important;
  border:1px solid rgba(15,46,42,.055) !important;
}

.benefit-use-panel .kicker{
  margin:0 0 18px !important;
  color:var(--gut) !important;
  font-size:11px !important;
  letter-spacing:.20em !important;
}

.benefit-use-grid{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:12px !important;
}

.benefit-use-grid span{
  display:flex !important;
  align-items:center !important;
  min-height:54px !important;
  padding:0 14px !important;
  border-radius:18px !important;
  background:rgba(246,241,232,.56) !important;
  color:var(--forest) !important;
  font-family:'Satoshi','Inter',sans-serif !important;
  font-weight:800 !important;
  font-size:14px !important;
  line-height:1.08 !important;
  letter-spacing:-.025em !important;
}

/* Remove any previous hidden/failed useful blocks */
.use-moments,
.benefits-useful{
  display:none !important;
}

/* Ingredient architecture strip: proper modules, not shallow pill cards */
.ingredient-proof{
  grid-template-columns:.68fr 1.32fr !important;
  gap:44px !important;
  align-items:center !important;
  padding:40px 0 !important;
  margin-top:42px !important;
  border-top:1px solid rgba(15,46,42,.10) !important;
  border-bottom:1px solid rgba(15,46,42,.10) !important;
}

.ingredient-proof h3{
  max-width:390px !important;
  font-size:clamp(32px,2.9vw,44px) !important;
  line-height:1.03 !important;
  letter-spacing:-.052em !important;
}

.proof-list{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:14px !important;
}

.proof-list span,
.proof-list span::before,
.proof-list span::after{
  content:none !important;
  color:inherit !important;
}

.proof-list article{
  min-height:126px !important;
  border-radius:26px !important;
  border:1px solid rgba(15,46,42,.075) !important;
  background:rgba(255,255,255,.18) !important;
  padding:18px 18px 20px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
}

.proof-list article span{
  display:block !important;
  color:var(--gut) !important;
  font-family:'Satoshi','Inter',sans-serif !important;
  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:.16em !important;
  line-height:1 !important;
}

.proof-list article strong{
  display:block !important;
  color:var(--forest) !important;
  font-family:'Satoshi','Inter',sans-serif !important;
  font-weight:850 !important;
  font-size:18px !important;
  line-height:1.06 !important;
  letter-spacing:-.035em !important;
}

/* Headline/subtext spacing fix */
.ingredients .section-intro p:not(.kicker),
.range .section-intro p:not(.kicker),
.section-intro p:not(.kicker){
  margin-top:24px !important;
}

.ingredients .section-intro h2,
.range .section-intro h2{
  margin-bottom:0 !important;
}

/* Specific feeding guide title: reduce hugeness slightly and give copy air */
.ingredients .section-intro h2{
  font-size:clamp(42px,4.4vw,72px) !important;
  line-height:.94 !important;
  max-width:1180px !important;
}

.ingredients .section-intro p:not(.kicker){
  max-width:780px !important;
  font-size:19px !important;
  line-height:1.58 !important;
}

@media(max-width:980px){
  .benefit-story{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "timeline"
      "image"
      "usepanel" !important;
  }

  .benefit-use-grid{
    grid-template-columns:repeat(2,1fr) !important;
  }

  .proof-list{
    grid-template-columns:repeat(2,1fr) !important;
  }

  .ingredient-proof{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:560px){
  .benefit-media img{
    height:280px !important;
  }

  .benefit-use-grid{
    grid-template-columns:1fr !important;
  }

  .proof-list{
    grid-template-columns:1fr !important;
  }

  .proof-list article{
    min-height:96px !important;
  }

  .ingredients .section-intro h2{
    font-size:38px !important;
  }
}



/* ===== final alignment corrections ===== */

/* ingredient architecture strip */
.ingredient-proof{
  grid-template-columns:.78fr 1.22fr !important;
  gap:38px !important;
  align-items:center !important;
}

.ingredient-proof h3{
  max-width:520px !important;
  font-size:clamp(34px,3vw,50px) !important;
  line-height:.96 !important;
  letter-spacing:-.05em !important;
}

.proof-list{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:14px !important;
  align-items:stretch !important;
}

.proof-list article{
  min-height:132px !important;
  padding:18px 18px 18px !important;
  border-radius:28px !important;
  background:rgba(255,255,255,.22) !important;
  border:1px solid rgba(15,46,42,.06) !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
}

.proof-list article strong{
  font-size:17px !important;
  line-height:1.04 !important;
  letter-spacing:-.03em !important;
  margin-top:auto !important;
}

/* benefits image frame correction */
.benefit-media{
  max-width:860px !important;
  justify-self:end !important;
}

.benefit-media img{
  height:300px !important;
  border-radius:30px !important;
  object-fit:cover !important;
  object-position:center 58% !important;
}

/* especially useful strip refinement */
.benefit-use-panel{
  max-width:860px !important;
  justify-self:end !important;
  padding:24px 28px 28px !important;
  border-radius:30px !important;
}

.benefit-use-grid{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:16px !important;
  align-items:center !important;
}

.benefit-use-grid span{
  min-height:74px !important;
  justify-content:center !important;
  text-align:center !important;
  padding:0 16px !important;
  border-radius:20px !important;
  background:rgba(47,143,91,.08) !important;
  border:1px solid rgba(47,143,91,.10) !important;
  font-size:15px !important;
  line-height:1.15 !important;
}

/* keep headline 2 lines not 3 */
@media(min-width:1200px){
  .ingredient-proof h3{
    max-width:620px !important;
  }
}

@media(max-width:980px){
  .benefit-use-grid{
    grid-template-columns:repeat(2,1fr) !important;
  }
}



/* ==========================================================
   Final 4-change correction pass
   ========================================================== */

/* CHANGE 2 — Standardized editorial typography rhythm */
.section-intro .kicker,
.ingredients .kicker,
.range .kicker,
.formulation .kicker,
.kicker{
  margin-bottom: 20px !important;
}

.section-intro h2,
.ingredients .section-intro h2,
.range .section-intro h2{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  font-size: clamp(38px, 3.75vw, 64px) !important;
  line-height: .96 !important;
  letter-spacing: -.055em !important;
}

.section-intro p:not(.kicker),
.ingredients .section-intro p:not(.kicker),
.range .section-intro p:not(.kicker){
  margin-top: 26px !important;
  font-size: clamp(17px, 1.18vw, 20px) !important;
  line-height: 1.62 !important;
}

.ingredients .section-intro h2{
  font-size: clamp(42px, 4vw, 68px) !important;
  max-width: 1180px !important;
}

.ingredients .section-intro p:not(.kicker){
  max-width: 760px !important;
}

/* CHANGE 4 — Formulation section: tighter composition and watermark control */
.formulation{
  padding-top: 52px !important;
  padding-bottom: 54px !important;
}





.formulation .kicker{
  margin-bottom: 18px !important;
}

.formulation h2{
  font-size: clamp(38px, 4vw, 62px) !important;
  line-height: .96 !important;
  max-width: 760px !important;
  margin-bottom: 0 !important;
}

.layer-grid{
  margin-top: 34px !important;
  gap: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

.layer-card{
  min-height: 174px !important;
  padding: 20px 22px 18px !important;
}

.layer-card h3{
  font-size: 18px !important;
  line-height: 1.12 !important;
}

.layer-card p{
  font-size: 13.8px !important;
  line-height: 1.48 !important;
}

/* CHANGE 3 — Benefits image + useful strip as one aligned editorial module */
.benefit-story{
  grid-template-columns: .82fr 1.18fr !important;
  grid-template-areas:
    "timeline image"
    "timeline usepanel" !important;
  gap: 24px 42px !important;
  align-items: center !important;
}

.benefit-timeline{
  grid-area: timeline !important;
  align-self: center !important;
}

.benefit-media{
  grid-area: image !important;
  width: min(100%, 760px) !important;
  justify-self: end !important;
  overflow: hidden !important;
  border-radius: 30px !important;
}

.benefit-media img{
  width: 100% !important;
  height: 420px !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  border-radius: 30px !important;
}

.benefit-use-panel{
  grid-area: usepanel !important;
  width: min(100%, 760px) !important;
  justify-self: end !important;
  padding: 24px 28px 26px !important;
  border-radius: 30px !important;
  background: rgba(47,143,91,.075) !important;
  border: 1px solid rgba(47,143,91,.13) !important;
}

.benefit-use-panel .kicker{
  text-align: left !important;
  margin: 0 0 18px !important;
  color: var(--gut) !important;
  font-size: 11.5px !important;
  letter-spacing: .22em !important;
}

.benefit-use-grid{
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
}

.benefit-use-grid span{
  min-height: 58px !important;
  padding: 0 14px !important;
  border-radius: 18px !important;
  background: rgba(246,241,232,.62) !important;
  border: 1px solid rgba(47,143,91,.08) !important;
  color: var(--forest) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-family: 'Satoshi','Inter',sans-serif !important;
  font-size: 14px !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
}

.use-moments,
.benefits-useful{
  display: none !important;
}

/* CHANGE 1 — Four functional systems strip, rebuilt as compact editorial architecture */
.ingredient-proof{
  display: grid !important;
  grid-template-columns: .62fr 1.38fr !important;
  gap: 48px !important;
  align-items: center !important;
  margin-top: 42px !important;
  padding: 38px 0 !important;
  border-top: 1px solid rgba(15,46,42,.10) !important;
  border-bottom: 1px solid rgba(15,46,42,.10) !important;
}

.ingredient-proof h3{
  max-width: 560px !important;
  font-size: clamp(34px, 3vw, 48px) !important;
  line-height: .98 !important;
  letter-spacing: -.052em !important;
}

.proof-list{
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  border-left: 1px solid rgba(15,46,42,.10) !important;
}

.proof-list article{
  min-height: 134px !important;
  padding: 4px 24px 4px !important;
  border: none !important;
  border-right: 1px solid rgba(15,46,42,.10) !important;
  background: transparent !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.proof-list article strong{
  display: block !important;
  color: var(--forest) !important;
  font-family: 'Satoshi','Inter',sans-serif !important;
  font-size: 19px !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
  font-weight: 850 !important;
  margin-bottom: 14px !important;
}

.proof-list article p{
  display: block !important;
  margin: 0 !important;
  color: rgba(15,46,42,.68) !important;
  font-size: 13.5px !important;
  line-height: 1.48 !important;
}

/* Defensive override: kill old numbering/inner-tile artifacts */
.proof-list span,
.proof-list span::before,
.proof-list span::after{
  display: none !important;
  content: none !important;
}

/* Responsive */
@media(max-width: 1080px){
  .benefit-story{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "timeline"
      "image"
      "usepanel" !important;
  }

  .benefit-media,
  .benefit-use-panel{
    width: 100% !important;
    justify-self: stretch !important;
  }

  .ingredient-proof{
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .proof-list{
    grid-template-columns: repeat(2, 1fr) !important;
    border-top: 1px solid rgba(15,46,42,.10) !important;
  }

  .proof-list article{
    border-bottom: 1px solid rgba(15,46,42,.10) !important;
  }
}

@media(max-width: 680px){
  .benefit-media img{
    height: 310px !important;
  }

  .benefit-use-grid{
    grid-template-columns: 1fr 1fr !important;
  }

  .proof-list{
    grid-template-columns: 1fr !important;
  }

  .proof-list article{
    min-height: 104px !important;
    padding: 22px 0 !important;
  }

  
}



/* =====================================================
   Formulation section — watermark alignment fix only
   Scope: no other page sections touched
   ===================================================== */

/* Keep the canister as a contained atmospheric watermark, not a large framed block */


/* Place the feature strip so its bottom line visually contains the watermark */
.formulation .layer-grid{
  margin-top: 42px !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Ensure the watermark bottom does not visibly drop below the strip */


/* Desktop optical correction: keep "pritzo" and "Gut" visible above the cards */
@media(min-width: 1000px){
  
}

/* Tablet/mobile: keep watermark decorative and subtle */
@media(max-width: 999px){
  
}



/* Final watermark crop alignment correction */




/* hard crop so watermark visually ends with card strip */


.layer-grid{
  position: relative !important;
  z-index: 2 !important;
}



/* =====================================================
   TRUE formulation watermark correction
   Align watermark end to card strip end.
   Remove visible rectangular watermark-frame tail.
   ===================================================== */



/* kill previous gradient crop overlay */


/*
  Watermark is now aligned from the card strip bottom upward,
  not from the top down. This prevents the watermark frame from
  ending independently of the card strip.
*/


.layer-grid{
  position: relative !important;
  z-index: 2 !important;
}

/* Desktop optical alignment */
@media(min-width: 1000px){
  
}

/* Smaller screens: keep subtle and non-disruptive */
@media(max-width: 999px){
  
}







/* Section 3 responsive behavior */
@media(max-width:900px){
  
}

@media(max-width:640px){
  
  
}


/* =========================
   SECTION 3 — FORMULATION
   Clean rebuilt section only
========================= */

.formulation-band{
  padding-left:32px;
  padding-right:32px;
}

.band-inner{
  width:min(100%,1440px);
  height:620px;
  margin:0 auto;
  border-radius:38px;
  padding:64px;
  background:
    radial-gradient(circle at 18% 22%, rgba(47,143,91,.30), transparent 30%),
    linear-gradient(135deg,#0F2E2A 0%,#174330 54%,#2F8F5B 100%);
  color:var(--cream);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.band-heading{
  position:relative;
  z-index:3;
  max-width:980px;
}

.formulation-band .kicker.light{
  color:rgba(246,241,232,.76);
  margin:0 0 22px;
}

.formulation-band h2{
  color:var(--cream);
  font-size:clamp(46px,4.35vw,64px);
  line-height:.96;
  letter-spacing:-.055em;
  margin:0;
  white-space:nowrap;
}

.formulation-canister{
  position:absolute;
  z-index:1;
  right:10%;
  bottom:64px; /* aligns canister end with the card strip end */
  width:auto;
  height:500px;
  opacity:.44;
  filter:saturate(.92) contrast(.95) brightness(.72);
  mix-blend-mode:soft-light;
  pointer-events:none;
  user-select:none;
}

.glass-panel{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  padding:0;
  border-radius:28px;
  background:rgba(246,241,232,.16);
  border:1px solid rgba(246,241,232,.20);
  backdrop-filter:blur(18px);
  overflow:hidden;
}

.glass-panel article{
  min-height:250px;
  padding:34px 32px;
  background:rgba(15,46,42,.12);
}

.glass-panel h3{
  color:var(--cream);
  font-size:20px;
  line-height:1.15;
  margin:22px 0 0;
  letter-spacing:-.03em;
}

.glass-panel p{
  font-size:15px;
  line-height:1.58;
  color:rgba(246,241,232,.78);
  margin:14px 0 0;
}

@media(max-width:1100px){
  .formulation-band h2{
    white-space:normal;
  }
}

@media(max-width:900px){
  .formulation-band{
    padding-left:20px;
    padding-right:20px;
  }

  .band-inner{
    height:auto;
    min-height:auto;
    padding:48px 28px;
    border-radius:30px;
  }

  .formulation-canister{
    width:250px;
    height:auto;
    right:-28px;
    top:86px;
    bottom:auto;
    opacity:.22;
  }

  .glass-panel{
    grid-template-columns:repeat(2,1fr);
    margin-top:64px;
  }
}

@media(max-width:640px){
  .band-inner{
    padding:32px 20px;
    border-radius:28px;
  }

  .formulation-band h2{
    font-size:40px;
  }

  .formulation-canister{
    display:none;
  }

  .glass-panel{
    grid-template-columns:1fr;
    margin-top:48px;
  }

  .glass-panel article{
    min-height:auto;
    padding:26px 22px;
  }
}



/* =========================================================
   Section 4 only — benefits composition refinement
   No other sections affected
   ========================================================= */

.benefits.section-space{
  padding-top: 42px !important; /* tightens Section 3 → 4 rhythm */
}

.benefits .section-intro{
  margin-bottom: 28px !important;
}

.benefits .section-intro h2{
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: .96 !important;
  letter-spacing: -.055em !important;
}

.benefits .section-intro h2 br{
  display:block;
}

.benefit-story{
  align-items: start !important;
  gap: 20px 42px !important;
}

.benefit-timeline{
  padding-top: 22px !important;
}

.benefit-media{
  width: min(100%, 760px) !important;
  justify-self: end !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 54px rgba(15,46,42,.045) !important;
  border: 1px solid rgba(15,46,42,.035) !important;
}

.benefit-media img{
  height: 390px !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: saturate(.96) contrast(.94) brightness(1.02) !important;
  transform: scale(1.01) !important;
}

.benefit-use-panel{
  width: min(100%, 760px) !important;
  justify-self: end !important;
  margin-top: 10px !important; /* docks band closer to image */
  padding: 22px 26px 24px !important;
  border-radius: 28px !important;
  background:
    linear-gradient(180deg, rgba(47,143,91,.082), rgba(47,143,91,.055)),
    rgba(255,255,255,.20) !important;
  border: 1px solid rgba(47,143,91,.105) !important;
  box-shadow: 0 14px 42px rgba(15,46,42,.035) !important;
}

.benefit-use-panel .kicker{
  margin: 0 0 16px !important;
  color: var(--gut) !important;
  text-align: left !important;
}

.benefit-use-grid{
  gap: 12px !important;
  align-items: center !important;
}

.benefit-use-grid span{
  min-height: 56px !important;
  border-radius: 17px !important;
  background: rgba(246,241,232,.70) !important;
  border: 1px solid rgba(15,46,42,.035) !important;
  box-shadow: none !important;
}

/* Responsive section 4 only */
@media(max-width: 980px){
  .benefits.section-space{
    padding-top: 52px !important;
  }

  .benefit-story{
    gap: 24px !important;
  }

  .benefit-media,
  .benefit-use-panel{
    width:100% !important;
    justify-self: stretch !important;
  }

  .benefit-media img{
    height: 330px !important;
  }
}

@media(max-width: 560px){
  .benefits .section-intro h2{
    max-width: 360px !important;
  }

  .benefit-media img{
    height: 280px !important;
  }
}



/* =========================================================
   Section 4 only — alignment refinement pass
   Keeps all other sections untouched.
   ========================================================= */

/* Reduce awkward space between left and right compositions */
.benefit-story{
  grid-template-columns: .72fr 1.02fr !important;
  gap: 16px 24px !important;
  align-items: start !important;
}

/* Timeline now aligns with the image top rather than floating lower */
.benefit-timeline{
  padding-top: 4px !important;
  align-self: start !important;
}

/* Make timeline slightly more compact so its bottom relates to the strip */
.benefit-timeline article{
  padding-bottom: 26px !important;
}

.benefit-timeline h3{
  margin-bottom: 8px !important;
}

/* Right-side image and strip become one narrower editorial module */
.benefit-media,
.benefit-use-panel{
  width: min(100%, 700px) !important;
  justify-self: start !important;
}

/* Image: slightly narrower/taller ratio, softer, more editorial */
.benefit-media{
  border-radius: 30px !important;
  overflow: hidden !important;
  box-shadow: 0 14px 42px rgba(15,46,42,.04) !important;
  border: 1px solid rgba(15,46,42,.035) !important;
}

.benefit-media img{
  height: 360px !important;
  width: 100% !important;
  object-fit: cover !important;
  object-position: center 54% !important;
  filter: saturate(.90) contrast(.86) brightness(1.04) !important;
  transform: scale(1.015) !important;
}

/* Dock the utility strip closer to the image and visually connect it */
.benefit-use-panel{
  margin-top: 12px !important;
  padding: 20px 24px 22px !important;
  border-radius: 26px !important;
  background:
    linear-gradient(180deg, rgba(47,143,91,.075), rgba(47,143,91,.048)),
    rgba(255,255,255,.18) !important;
  border: 1px solid rgba(47,143,91,.09) !important;
  box-shadow: 0 10px 32px rgba(15,46,42,.028) !important;
}

.benefit-use-panel .kicker{
  margin: 0 0 14px !important;
  text-align: left !important;
}

.benefit-use-grid{
  gap: 10px !important;
}

.benefit-use-grid span{
  min-height: 50px !important;
  border-radius: 16px !important;
  background: rgba(246,241,232,.72) !important;
  border: 1px solid rgba(15,46,42,.03) !important;
  font-size: 13.5px !important;
}

/* Responsive: preserve same visual stack on smaller screens */
@media(max-width: 980px){
  .benefit-story{
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .benefit-timeline{
    padding-top: 0 !important;
  }

  .benefit-media,
  .benefit-use-panel{
    width: 100% !important;
    justify-self: stretch !important;
  }

  .benefit-media img{
    height: 320px !important;
  }
}

@media(max-width: 560px){
  .benefit-media img{
    height: 270px !important;
  }
}



/* =========================================================
   Section 4 only — full-width "Especially useful during" strip
   No other sections affected
   ========================================================= */

.benefit-story{
  grid-template-columns: .72fr 1.02fr !important;
  grid-template-areas:
    "timeline image"
    "usepanel usepanel" !important;
  gap: 18px 24px !important;
  align-items: start !important;
}

.benefit-use-panel{
  grid-area: usepanel !important;
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
  margin-top: 12px !important;
  padding: 22px 28px !important;
  display: grid !important;
  grid-template-columns: .34fr .66fr !important;
  align-items: center !important;
  gap: 28px !important;
  border-radius: 28px !important;
  background:
    linear-gradient(180deg, rgba(47,143,91,.072), rgba(47,143,91,.046)),
    rgba(255,255,255,.18) !important;
  border: 1px solid rgba(47,143,91,.09) !important;
  box-shadow: 0 10px 32px rgba(15,46,42,.028) !important;
}

.benefit-use-panel .kicker{
  margin: 0 !important;
  text-align: left !important;
  color: var(--gut) !important;
  line-height: 1.4 !important;
}

.benefit-use-grid{
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
}

.benefit-use-grid span{
  min-height: 50px !important;
  border-radius: 16px !important;
  background: rgba(246,241,232,.72) !important;
  border: 1px solid rgba(15,46,42,.03) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

@media(max-width: 980px){
  .benefit-story{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "timeline"
      "image"
      "usepanel" !important;
  }

  .benefit-use-panel{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

@media(max-width: 560px){
  .benefit-use-grid{
    grid-template-columns: 1fr !important;
  }
}



/* =========================================================
   Section 4 only — timeline text + image crop refinement
   No other page sections affected.
   ========================================================= */

/* Left timeline now ends within the image height */
.benefit-timeline article{
  padding-bottom: 22px !important;
}

.benefit-timeline ul{
  margin-top: 8px !important;
}

/* Adjust crop: less top space, more breathing toward lower cushion/face area */
.benefit-media img{
  object-position: center 64% !important;
  transform: scale(1.005) !important;
}

/* Keep Section 4 strip behavior unchanged */


/* =========================================================
   Section 5 — Feeding Guide + Ingredient Disclosure Refinement
   ========================================================= */

/* Better typography rhythm for Section 5 header */
.ingredients.section-space{
  padding-top: 68px !important;
}

.ingredients .section-intro{
  margin-bottom: 42px !important;
}

.ingredients .section-intro .kicker{
  margin-bottom: 20px !important;
}

.ingredients .section-intro h2{
  font-size: clamp(42px, 4.15vw, 72px) !important;
  line-height: .94 !important;
  letter-spacing: -.058em !important;
  margin-bottom: 0 !important;
}

.ingredients .section-intro p:not(.kicker){
  margin-top: 30px !important;
  max-width: 760px !important;
  font-size: 19px !important;
  line-height: 1.58 !important;
}

/* Replace tall label image with compact premium disclosure table */
.ingredient-system-card{
  width: min(100%, 620px);
  justify-self: end;
  align-self: center;
  border-radius: 30px;
  background: rgba(255,255,255,.24);
  border: 1px solid rgba(15,46,42,.065);
  box-shadow: 0 20px 70px rgba(15,46,42,.055);
  overflow: hidden;
}

.ingredient-card-head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid rgba(15,46,42,.12);
}

.ingredient-card-head p{
  margin: 0;
  font-family: 'Satoshi','Inter',sans-serif;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--forest);
}

.ingredient-card-head span{
  font-family: 'Satoshi','Inter',sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(15,46,42,.62);
  white-space: nowrap;
}

.ingredient-system-table{
  display: grid;
  grid-template-columns: 158px minmax(0, 1fr) 122px;
  font-size: 13px;
  color: var(--forest);
}

.system-band{
  padding: 16px 15px;
  color: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  border-bottom: 1px solid rgba(246,241,232,.26);
}

.system-band strong{
  font-family: 'Satoshi','Inter',sans-serif;
  font-size: 15px;
  line-height: 1.05;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.system-band small{
  font-size: 11px;
  line-height: 1.22;
  color: rgba(246,241,232,.86);
}

.system-band.probiotic{ background:#1F6B43; }
.system-band.prebiotic{ background:#7A9147; }
.system-band.enzyme{ background:#4D9493; }
.system-band.nutrients{ background:#9A7142; }

.ingredient-name,
.ingredient-dose{
  min-height: 29px;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(15,46,42,.11);
  background: rgba(246,241,232,.42);
}

.ingredient-name{
  font-weight: 700;
  line-height: 1.25;
}

.ingredient-dose{
  justify-content: flex-end;
  text-align: right;
  font-weight: 850;
  white-space: nowrap;
  color: rgba(15,46,42,.86);
}

/* Compact, premium closing strip after Section 5 */
.ingredient-proof{
  margin-top: 42px !important;
  padding: 36px 0 !important;
  border-top: 1px solid rgba(15,46,42,.10) !important;
  border-bottom: 1px solid rgba(15,46,42,.10) !important;
  grid-template-columns: .72fr 1.28fr !important;
  gap: 44px !important;
  align-items: center !important;
}

.ingredient-proof h3{
  max-width: 620px !important;
  font-size: clamp(36px, 3.45vw, 56px) !important;
  line-height: .98 !important;
}

.proof-list-minimal{
  display: grid !important;
  grid-template-columns: repeat(4,1fr) !important;
  gap: 0 !important;
  border-left: 1px solid rgba(15,46,42,.10) !important;
}

.proof-list-minimal article{
  min-height: 92px !important;
  border: none !important;
  border-right: 1px solid rgba(15,46,42,.10) !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 22px !important;
  display: flex !important;
  align-items: center !important;
}

.proof-list-minimal article strong{
  display: block !important;
  font-family:'Satoshi','Inter',sans-serif !important;
  font-size: 20px !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
  color: var(--forest) !important;
}

/* Hide any old copy inside proof cards if older CSS resurrects it */
.proof-list-minimal article p,
.proof-list-minimal article span{
  display:none !important;
}

@media(max-width: 980px){
  .ingredient-system-card{
    width: 100%;
    justify-self: stretch;
  }

  .ingredient-system-table{
    grid-template-columns: 142px minmax(0,1fr) 110px;
  }

  .ingredient-proof{
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .proof-list-minimal{
    grid-template-columns: repeat(2,1fr) !important;
    border-top: 1px solid rgba(15,46,42,.10) !important;
  }
}

@media(max-width: 640px){
  .ingredients .section-intro h2{
    font-size: 40px !important;
  }

  .ingredient-system-table{
    grid-template-columns: 1fr 1fr;
  }

  .system-band{
    grid-column: 1 / -1;
    min-height: 78px;
  }

  .ingredient-dose{
    font-size: 12px;
  }

  .proof-list-minimal{
    grid-template-columns: 1fr !important;
  }

  .proof-list-minimal article{
    min-height: 70px !important;
    padding: 0 !important;
  }
}



/* =========================================================
   Final spacing refinements only
   1. Section 4 → 5 rhythm
   2. Section 5 headline → subtext spacing
   3. Section 5 left/right vertical alignment
   4. Section 5 → 6 rhythm
   ========================================================= */

/* 1. Reduce Section 5 top padding slightly */
.ingredients.section-space{
  padding-top: 52px !important;
}

/* 2. Add stronger release between Section 5 headline and subtext */
.ingredients .section-intro p:not(.kicker){
  margin-top: 44px !important;
}

/* 3. Vertically center the left feeding-guide content against the ingredient table */
.ingredient-shell{
  align-items: center !important;
}

.ingredient-copy{
  align-self: center !important;
}

/* 4. Reduce top padding before Explore The Range */
.range.section-space{
  padding-top: 50px !important;
}



/* =========================================================
   Final footer + spacing refinements only
   1. Section 5 headline/subtext gap
   2. Section 6 top padding
   3. Trust strip above footer
   4. Footer CTA Back to top styling
   ========================================================= */

/* 1. Correct actual Section 5 structure: .ingredient-copy, not .section-intro */
.ingredients .ingredient-copy > h2 + p{
  margin-top: 34px !important;
  max-width: 760px !important;
  line-height: 1.58 !important;
}

/* 2. Reduce Section 6 top padding another ~20% from current */
.range.section-space{
  padding-top: 40px !important;
}

/* 3. Thin muted trust strip above footer */
.trust-strip{
  padding: 24px 32px 0;
  background: var(--cream);
}

.trust-strip-inner{
  border-top: 1px solid rgba(15,46,42,.10);
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 0;
  align-items: center;
  min-height: 74px;
}

.trust-strip span{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 74px;
  font-family: 'Satoshi','Inter',sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(15,46,42,.58);
}

.trust-strip span:not(:last-child){
  border-right: 1px solid rgba(15,46,42,.08);
}

.trust-strip span::before{
  content: "";
  width: 7px;
  height: 7px;
  border: 1.5px solid rgba(15,46,42,.36);
  border-radius: 999px;
  margin-right: 11px;
}

/* 4. Footer CTA becomes subtle utility action */
.footer a,
.footer button{
  transition: opacity .2s ease, border-color .2s ease, transform .2s ease;
}

.footer a[href="#top"],
.footer .back-to-top,
.footer button{
  font-size: 15px !important;
  font-weight: 750 !important;
  padding: 14px 28px !important;
  border-radius: 999px !important;
  border-color: rgba(246,241,232,.24) !important;
  color: rgba(246,241,232,.90) !important;
  background: transparent !important;
}

.footer a[href="#top"]:hover,
.footer .back-to-top:hover,
.footer button:hover{
  border-color: rgba(246,241,232,.42) !important;
  transform: translateY(-1px);
}

@media(max-width: 760px){
  .trust-strip{
    padding-left: 20px;
    padding-right: 20px;
  }

  .trust-strip-inner{
    grid-template-columns: 1fr 1fr;
  }

  .trust-strip span:nth-child(2){
    border-right: 0;
  }

  .trust-strip span{
    font-size: 11.5px;
    min-height: 58px;
  }

  .range.section-space{
    padding-top: 44px !important;
  }
}



/* =========================================================
   Final refinements only
   1. Feeding guide subtext spacing
   2. Certification icon strip redesign
   ========================================================= */

/* 1. Pull subtext slightly upward */
.ingredients .ingredient-copy > h2 + p{
  margin-top: 25px !important;
}

/* 2. Certification strip with icon system */
.trust-strip{
  padding: 22px 32px 0 !important;
  background: var(--cream);
}

.trust-strip-inner{
  border-top: 1px solid rgba(15,46,42,.08);
  display:flex;
  justify-content:center;
  align-items:center;
  gap:72px;
  min-height:84px;
  flex-wrap:wrap;
}

.trust-item{
  display:flex;
  align-items:center;
  gap:14px;
}

.trust-icon{
  width:48px;
  height:48px;
  border:1.5px solid rgba(15,46,42,.32);
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Satoshi','Inter',sans-serif;
  font-size:14px;
  font-weight:900;
  letter-spacing:.04em;
  color:rgba(15,46,42,.72);
}

.trust-item span{
  font-family:'Satoshi','Inter',sans-serif;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1.35;
  color:rgba(15,46,42,.60);
  max-width:120px;
}

@media(max-width:760px){

  .trust-strip-inner{
    gap:28px;
    justify-content:flex-start;
  }

  .trust-icon{
    width:42px;
    height:42px;
    font-size:12px;
  }

  .trust-item span{
    font-size:10.5px;
  }
}



/* =========================================================
   Targeted refinements only:
   1. Feeding guide dog-size silhouettes
   2. Explore range excludes current SKU while preserving card size
   ========================================================= */

/* Feeding guide icon column */
.dose-table div[role="row"]{
  grid-template-columns: 42px 1.05fr .9fr .8fr !important;
  align-items: center !important;
}

.dog-size-icon{
  width: 30px;
  height: 22px;
  display: inline-block;
  opacity: .86;
  background: var(--forest);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

/* simple refined dog silhouettes via inline SVG masks */
.dog-size-icon{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 56' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M21 24c1-9 9-15 19-15h22c8 0 15 5 18 12l7 2c4 1 6 5 5 9-1 3-4 5-8 5h-3v12c0 3-2 5-5 5s-5-2-5-5V38H36v11c0 3-2 5-5 5s-5-2-5-5V36c-5-2-7-6-5-12Zm57-11c0-5 4-9 9-9 3 0 6 2 8 5l-8 10h-7c-1-2-2-4-2-6ZM16 27 6 21c-3-2-6 2-4 5l10 13c2 3 6 1 6-2v-6c-1-1-2-2-2-4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 56' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M21 24c1-9 9-15 19-15h22c8 0 15 5 18 12l7 2c4 1 6 5 5 9-1 3-4 5-8 5h-3v12c0 3-2 5-5 5s-5-2-5-5V38H36v11c0 3-2 5-5 5s-5-2-5-5V36c-5-2-7-6-5-12Zm57-11c0-5 4-9 9-9 3 0 6 2 8 5l-8 10h-7c-1-2-2-4-2-6ZM16 27 6 21c-3-2-6 2-4 5l10 13c2 3 6 1 6-2v-6c-1-1-2-2-2-4Z'/%3E%3C/svg%3E");
}

.dog-small{ transform: scale(.64); transform-origin: center; }
.dog-medium{ transform: scale(.78); transform-origin: center; }
.dog-large{ transform: scale(.92); transform-origin: center; }
.dog-xl{ transform: scale(1.08); transform-origin: center; }

/* Keep range card sizing while centering 7 remaining SKUs */
.range-grid,
.product-range-grid,
.sku-grid{
  justify-content: center !important;
}

.range .range-grid,
.range .product-range-grid,
.range .sku-grid{
  grid-template-columns: repeat(7, minmax(132px, 1fr)) !important;
}

@media(max-width: 1180px){
  .range .range-grid,
  .range .product-range-grid,
  .range .sku-grid{
    grid-template-columns: repeat(4, minmax(132px, 1fr)) !important;
  }
}

@media(max-width: 760px){
  .dose-table div[role="row"]{
    grid-template-columns: 34px 1fr !important;
  }

  .dose-table div[role="row"] span,
  .dose-table div[role="row"] b{
    grid-column: 2;
  }

  .dog-size-icon{
    width: 26px;
    height: 20px;
  }

  .range .range-grid,
  .range .product-range-grid,
  .range .sku-grid{
    grid-template-columns: repeat(2, minmax(132px, 1fr)) !important;
  }
}



/* =========================================================
   Corrected range spacing + dog silhouettes
   Only affects feeding guide icons and Explore The Range
   ========================================================= */

/* Proper dog silhouettes, not pig-like icons */
.dog-size-icon{
  width: 36px !important;
  height: 24px !important;
  background: var(--forest) !important;
  opacity: .88 !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20120%2070%27%3E%0A%3Cpath%20fill%3D%27black%27%20d%3D%27M24%2040c0-12%2010-22%2024-22h30c10%200%2018%206%2022%2015l9%203c5%202%208%206%207%2011-1%204-5%207-10%207h-5v9c0%204-3%207-7%207s-7-3-7-7v-8H44v8c0%204-3%207-7%207s-7-3-7-7V51c-4-2-6-6-6-11Z%27/%3E%0A%3Cpath%20fill%3D%27black%27%20d%3D%27M94%2025c0-10%207-18%2017-18%204%200%208%202%209%205l-8%208%207%2010h-14c-4%200-8-2-11-5Z%27/%3E%0A%3Cpath%20fill%3D%27black%27%20d%3D%27M25%2034%2010%2025c-3-2-7%200-7%204%200%202%201%204%203%205l17%2012c2%201%205%200%205-3v-4c0-2-1-4-3-5Z%27/%3E%0A%3Cpath%20fill%3D%27black%27%20d%3D%27M52%2017c2-8%209-13%2017-13%204%200%208%202%2011%205-5%200-9%203-12%208H52Z%27/%3E%0A%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20120%2070%27%3E%0A%3Cpath%20fill%3D%27black%27%20d%3D%27M24%2040c0-12%2010-22%2024-22h30c10%200%2018%206%2022%2015l9%203c5%202%208%206%207%2011-1%204-5%207-10%207h-5v9c0%204-3%207-7%207s-7-3-7-7v-8H44v8c0%204-3%207-7%207s-7-3-7-7V51c-4-2-6-6-6-11Z%27/%3E%0A%3Cpath%20fill%3D%27black%27%20d%3D%27M94%2025c0-10%207-18%2017-18%204%200%208%202%209%205l-8%208%207%2010h-14c-4%200-8-2-11-5Z%27/%3E%0A%3Cpath%20fill%3D%27black%27%20d%3D%27M25%2034%2010%2025c-3-2-7%200-7%204%200%202%201%204%203%205l17%2012c2%201%205%200%205-3v-4c0-2-1-4-3-5Z%27/%3E%0A%3Cpath%20fill%3D%27black%27%20d%3D%27M52%2017c2-8%209-13%2017-13%204%200%208%202%2011%205-5%200-9%203-12%208H52Z%27/%3E%0A%3C/svg%3E") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

.dog-small{ transform: scale(.66) !important; transform-origin:center; }
.dog-medium{ transform: scale(.82) !important; transform-origin:center; }
.dog-large{ transform: scale(.98) !important; transform-origin:center; }
.dog-xl{ transform: scale(1.14) !important; transform-origin:center; }

/* Reusable current-SKU exclusion:
   change body data-current-sku on each SKU page to hide that SKU automatically */
body[data-current-sku="gut"] .range-strip article[data-sku="gut"],
body[data-current-sku="fibre"] .range-strip article[data-sku="fibre"],
body[data-current-sku="skin-coat"] .range-strip article[data-sku="skin-coat"],
body[data-current-sku="hip-joint"] .range-strip article[data-sku="hip-joint"],
body[data-current-sku="hip-joint-plus"] .range-strip article[data-sku="hip-joint-plus"],
body[data-current-sku="oral-care"] .range-strip article[data-sku="oral-care"],
body[data-current-sku="immunity"] .range-strip article[data-sku="immunity"],
body[data-current-sku="multivitamin"] .range-strip article[data-sku="multivitamin"]{
  display:none !important;
}

/* Preserve original 8-card card width, but center the 7 remaining cards */
.range-strip{
  display:grid !important;
  gap:14px !important;
  justify-content:center !important;
  grid-template-columns: repeat(7, minmax(118px, calc((100% - 98px) / 8))) !important;
}

@media(max-width:1180px){
  .range-strip{
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media(max-width:760px){
  .dog-size-icon{
    width: 30px !important;
    height: 22px !important;
  }

  .range-strip{
    grid-template-columns: repeat(2, 1fr) !important;
  }
}


/* =========================================================
   Feeding guide final dog line-image assets only
   Cropped transparent icons, no repeated size labels.
   ========================================================= */

.dose-table div[role="row"]{
  grid-template-columns: 52px 1.05fr .9fr .8fr !important;
  align-items: center !important;
}

.dog-size-img{
  display:block;
  width:42px;
  height:30px;
  object-fit:contain;
  object-position:center;
  opacity:.92;
  mix-blend-mode:multiply;
}

.dog-small-img{ width:34px; height:26px; }
.dog-medium-img{ width:40px; height:28px; }
.dog-large-img{ width:46px; height:31px; }
.dog-xl-img{ width:50px; height:34px; }

@media(max-width:760px){
  .dose-table div[role="row"]{
    grid-template-columns: 42px 1fr !important;
  }

  .dog-size-img{
    width:34px;
    height:25px;
  }

  .dog-large-img,
  .dog-xl-img{
    width:38px;
    height:28px;
  }
}



/* =========================================================
   Final anchor landing + XL dog icon correction only
   ========================================================= */

/* Clean XL dog asset sizing */
.dog-xl-img{
  width: 52px !important;
  height: 34px !important;
  object-fit: contain !important;
  object-position: center !important;
  mix-blend-mode: multiply;
}

/* Sticky-header anchor landing correction */
html{
  scroll-behavior: smooth;
}

section[id]{
  scroll-margin-top: 118px;
}

/* Section 2 needs the most breathing room after anchor jump */
#education{
  scroll-margin-top: 158px;
}

/* Section 3 works visually with the dark panel but still needs a safe offset */
#formulation{
  scroll-margin-top: 118px;
}

/* Section 4 benefits headline should land with kicker visible */
#benefits{
  scroll-margin-top: 132px;
}

/* Section 5 must land at the full section header, not the ingredient table */
#ingredients{
  scroll-margin-top: 150px;
}

/* Section 6 range should not feel crowded by the sticky header */
.range.section-space{
  scroll-margin-top: 126px;
}

@media(max-width: 760px){
  section[id],
  #education,
  #formulation,
  #benefits,
  #ingredients,
  .range.section-space{
    scroll-margin-top: 96px;
  }

  .dog-xl-img{
    width: 42px !important;
    height: 30px !important;
  }
}



/* Final XL dog icon: cropped from approved reference image */
.dog-xl-img{
  content: normal !important;
  width: 54px !important;
  height: 38px !important;
  object-fit: contain !important;
  object-position: center !important;
  opacity: .92 !important;
  mix-blend-mode: multiply;
}

@media(max-width:760px){
  .dog-xl-img{
    width: 44px !important;
    height: 32px !important;
  }
}


/* =========================================================
   Responsive safety patch — Section 5 + Footer
   Keeps desktop unchanged. Fixes tablet/mobile overflow.
   ========================================================= */

@media (max-width: 900px){
  .ingredients.section-space{
    padding-top: 48px !important;
  }

  .ingredient-shell{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 34px !important;
    align-items: stretch !important;
  }

  .ingredient-copy{
    width: 100% !important;
    max-width: none !important;
  }

  .ingredients .ingredient-copy > h2{
    max-width: 100% !important;
    font-size: clamp(40px, 10vw, 58px) !important;
    line-height: .96 !important;
  }

  .ingredients .ingredient-copy > h2 + p{
    max-width: 100% !important;
    font-size: clamp(18px, 4.4vw, 24px) !important;
    line-height: 1.45 !important;
  }

  .ingredient-system-card{
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    border-radius: 26px !important;
    overflow: hidden !important;
  }

  .ingredient-card-head{
    padding: 22px 22px 16px !important;
    gap: 12px !important;
  }

  .ingredient-card-head p{
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  .ingredient-card-head span{
    font-size: 10px !important;
  }

  .ingredient-system-table{
    grid-template-columns: minmax(0, 1fr) minmax(82px, auto) !important;
    width: 100% !important;
  }

  .system-band{
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-height: 92px !important;
    padding: 22px 24px !important;
  }

  .system-band strong{
    font-size: 22px !important;
    line-height: 1.05 !important;
  }

  .system-band small{
    font-size: 14px !important;
    max-width: 280px !important;
    white-space: normal !important;
  }

  .ingredient-name,
  .ingredient-dose{
    min-height: 52px !important;
    padding: 12px 18px !important;
    font-size: 15px !important;
    line-height: 1.18 !important;
  }

  .ingredient-dose{
    white-space: normal !important;
  }
}

@media (max-width: 760px){
  .trust-strip{
    padding: 24px 24px 0 !important;
  }

  .trust-strip-inner{
    width: min(100%, 520px) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    justify-items: start !important;
    align-items: start !important;
    min-height: auto !important;
    padding: 26px 0 24px !important;
  }

  .trust-item{
    width: 100% !important;
    gap: 18px !important;
  }

  .trust-icon{
    width: 58px !important;
    height: 58px !important;
    flex: 0 0 58px !important;
    font-size: 15px !important;
  }

  .trust-item span{
    max-width: 220px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  .footer{
    padding: 54px 24px 72px !important;
  }

  .footer-inner{
    width: min(100%, 520px) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    align-items: start !important;
    justify-content: start !important;
  }

  .footer-brand svg{
    width: min(100%, 250px) !important;
    margin-left: 0 !important;
  }

  .footer-actions{
    text-align: left !important;
    width: 100% !important;
  }

  .footer-actions p,
  .footer p{
    max-width: 100% !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
    margin: 0 0 22px !important;
  }

  .footer-home,
  .footer a[href="#top"]{
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 52px !important;
    padding: 0 28px !important;
    font-size: 16px !important;
  }
}

@media (max-width: 430px){
  .ingredients .ingredient-copy > h2{
    font-size: 38px !important;
  }

  .ingredient-card-head{
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .ingredient-system-table{
    grid-template-columns: minmax(0,1fr) 78px !important;
  }

  .ingredient-name,
  .ingredient-dose{
    padding: 11px 14px !important;
    font-size: 14px !important;
  }

  .system-band strong{
    font-size: 20px !important;
  }
}

/* =========================================================
   FINAL TARGETED PATCH — 3 requested changes only
   1) Section 3 watermark moves 6–7% left on desktop
   2) Orbit graphic becomes elegant on tablet/mobile
   3) Ingredient table uses cleaner mobile/tablet disclosure layout
   Desktop layout remains otherwise unchanged.
   ========================================================= */

/* 1. Section 3: watermark canister reverted to original locked desktop position.
   Base rule remains right:10%; no desktop override applied. */

/* 2. Why Gut Health Matters: tablet/mobile orbit refinement */
@media (max-width: 900px){
  .microbiome-visual{
    min-height: 420px !important;
    padding: 28px !important;
  }

  .balance-orbit{
    width: min(330px, 78vw) !important;
    height: min(330px, 78vw) !important;
  }

  .balance-orbit:after{
    inset: 72px !important;
  }

  .center-note{
    inset: 104px !important;
    padding: 18px !important;
  }

  .center-note strong{
    font-size: 24px !important;
    line-height: 1.05 !important;
  }

  .center-note em{
    font-size: 12px !important;
    line-height: 1.35 !important;
    max-width: 112px !important;
  }

  .good{width:38px !important;height:38px !important;}
  .bad{width:25px !important;height:25px !important;}

  .good.one{left:58px !important;top:82px !important;}
  .good.two{right:58px !important;top:102px !important;}
  .good.three{left:106px !important;bottom:56px !important;}
  .good.four{right:88px !important;bottom:70px !important;}
  .bad.one{left:166px !important;top:36px !important;}
  .bad.two{right:56px !important;bottom:150px !important;}
  .bad.three{left:58px !important;bottom:154px !important;}
}

@media (max-width: 560px){
  .microbiome-visual{
    min-height: 360px !important;
    padding: 24px !important;
    border-radius: 28px !important;
  }

  .balance-orbit{
    width: min(284px, 72vw) !important;
    height: min(284px, 72vw) !important;
  }

  .balance-orbit:after{
    inset: 64px !important;
  }

  .center-note{
    inset: 88px !important;
    padding: 14px !important;
  }

  .center-note strong{
    font-size: 21px !important;
    line-height: 1.04 !important;
  }

  .center-note em{
    font-size: 11px !important;
    line-height: 1.32 !important;
    max-width: 92px !important;
  }

  .good{width:32px !important;height:32px !important;}
  .bad{width:22px !important;height:22px !important;}

  .good.one{left:46px !important;top:74px !important;}
  .good.two{right:48px !important;top:88px !important;}
  .good.three{left:82px !important;bottom:50px !important;}
  .good.four{right:70px !important;bottom:58px !important;}
  .bad.one{left:138px !important;top:32px !important;}
  .bad.two{right:44px !important;bottom:130px !important;}
  .bad.three{left:46px !important;bottom:132px !important;}
}

/* 3. Section 5: elegant mobile/tablet ingredient disclosure */
@media (max-width: 900px){
  .ingredient-system-card{
    border-radius: 28px !important;
    background: rgba(255,255,255,.24) !important;
    box-shadow: 0 18px 54px rgba(15,46,42,.055) !important;
  }

  .ingredient-card-head{
    padding: 24px 24px 20px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: start !important;
  }

  .ingredient-card-head p{
    font-size: clamp(18px, 4.6vw, 24px) !important;
    line-height: 1.22 !important;
    letter-spacing: .075em !important;
  }

  .ingredient-card-head span{
    font-size: 11px !important;
    line-height: 1 !important;
  }

  .ingredient-system-table{
    grid-template-columns: minmax(0, 1fr) max-content !important;
    column-gap: 0 !important;
  }

  .system-band{
    grid-column: 1 / -1 !important;
    min-height: 0 !important;
    padding: 20px 24px !important;
    gap: 8px !important;
    border-bottom: 0 !important;
  }

  .system-band:not(:first-child){
    margin-top: 8px !important;
  }

  .system-band strong{
    font-size: clamp(20px, 5vw, 26px) !important;
    line-height: 1.02 !important;
    letter-spacing: .055em !important;
  }

  .system-band small{
    font-size: 14px !important;
    line-height: 1.35 !important;
    max-width: none !important;
    overflow: visible !important;
  }

  .ingredient-name,
  .ingredient-dose{
    min-height: 48px !important;
    padding: 13px 20px !important;
    font-size: 15px !important;
    line-height: 1.22 !important;
    background: rgba(246,241,232,.44) !important;
    border-bottom: 1px solid rgba(15,46,42,.10) !important;
  }

  .ingredient-name{
    font-weight: 760 !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  .ingredient-dose{
    justify-content: flex-end !important;
    align-items: center !important;
    text-align: right !important;
    white-space: nowrap !important;
    min-width: 98px !important;
    padding-left: 12px !important;
    color: rgba(15,46,42,.82) !important;
  }
}

@media (max-width: 420px){
  .ingredient-card-head{
    padding: 22px 20px 18px !important;
  }

  .system-band{
    padding: 18px 20px !important;
  }

  .ingredient-name,
  .ingredient-dose{
    padding-left: 18px !important;
    padding-right: 18px !important;
    font-size: 14px !important;
  }

  .ingredient-dose{
    min-width: 86px !important;
    white-space: normal !important; /* only the narrowest phones may wrap */
    line-height: 1.12 !important;
  }
}

/* =========================================================
   Gut page content refresh — Section 2 + Section 3 only
   Modular content structure for future SKU pages
   ========================================================= */

.education .section-intro p:not(.kicker){
  display:none !important;
}

.education .section-intro{
  margin-bottom:48px !important;
}

.education-grid{
  grid-template-columns:.86fr 1.14fr !important;
  gap:56px !important;
  align-items:center !important;
}

.education-copy{
  max-width:760px !important;
  margin-top:0 !important;
}

.education-copy .education-block{
  padding:0 !important;
}

.education-copy .education-block + .education-block,
.education-copy .visible-signs,
.education-copy .bridge{
  margin-top:24px !important;
}

.education-copy h3,
.education-copy .visible-signs h3{
  margin:0 0 10px !important;
  font-size:24px !important;
  line-height:1.12 !important;
  letter-spacing:-.04em !important;
}

.education-copy p{
  margin:0 !important;
  font-size:16px !important;
  line-height:1.62 !important;
  color:rgba(15,46,42,.72) !important;
}

.education-copy p + p{
  margin-top:10px !important;
}

.visible-signs{
  padding-top:4px;
}

.sign-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.sign-chip-row span{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  padding:0 14px;
  border-radius:999px;
  background:rgba(255,255,255,.24);
  border:1px solid rgba(15,46,42,.08);
  color:rgba(15,46,42,.82);
  font-family:'Satoshi','Inter',sans-serif;
  font-size:13px;
  font-weight:800;
  letter-spacing:-.01em;
}

.sign-chip-row span::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--gut);
  opacity:.72;
  margin-right:8px;
}

.education-copy .bridge{
  padding-top:18px !important;
  border-top:1px solid var(--line) !important;
  font-size:14.5px !important;
  line-height:1.45 !important;
  font-weight:600 !important;
  max-width:600px !important;
  color:rgba(15,46,42,.78) !important;
}

.prebiotic-icon{
  border-radius:16px;
}

.prebiotic-icon:before{
  content:"";
  position:absolute;
  left:24px;
  top:12px;
  width:2px;
  height:28px;
  background:rgba(246,241,232,.82);
}

.prebiotic-icon:after{
  content:"";
  position:absolute;
  left:16px;
  top:15px;
  width:18px;
  height:12px;
  border:2px solid rgba(246,241,232,.82);
  border-left:0;
  border-bottom:0;
  border-radius:0 14px 0 0;
  transform:rotate(-28deg);
}

.digestive-icon:before,
.digestive-icon:after{
  content:"";
  position:absolute;
  height:2px;
  background:rgba(246,241,232,.82);
  left:11px;
  right:11px;
  top:24px;
}

.digestive-icon:before{
  transform:rotate(-26deg);
}

.digestive-icon:after{
  width:15px;
  left:26px;
  right:auto;
  top:29px;
  transform:rotate(26deg);
}

@media(max-width:900px){
  .education-grid{
    grid-template-columns:1fr !important;
    gap:34px !important;
  }

  .education-copy{
    max-width:100% !important;
  }

  .education-copy .education-block + .education-block,
  .education-copy .visible-signs,
  .education-copy .bridge{
    margin-top:22px !important;
  }
}

@media(max-width:560px){
  .education .section-intro{
    margin-bottom:32px !important;
  }

  .education-copy h3,
  .education-copy .visible-signs h3{
    font-size:22px !important;
  }

  .education-copy p{
    font-size:15px !important;
  }

  .sign-chip-row{
    gap:8px;
  }

  .sign-chip-row span{
    min-height:32px;
    padding:0 12px;
    font-size:12.5px;
  }
}


/* =====================================================
   Section 2 density + alignment refinement
   Keeps the modular section structure; tightens copy rhythm
   so the right stack fits visually within the left visual height.
   ===================================================== */

.education-grid{
  grid-template-columns:.92fr 1.08fr !important;
  gap:64px !important;
  align-items:start !important;
}

.education-copy{
  width:100% !important;
  max-width:640px !important;
  justify-self:start !important;
  margin-top:0 !important;
}

.education-copy .education-block + .education-block,
.education-copy .visible-signs,
.education-copy .bridge{
  margin-top:16px !important;
}

.education-copy h3,
.education-copy .visible-signs h3{
  margin:0 0 8px !important;
  font-size:22px !important;
  line-height:1.12 !important;
  letter-spacing:-.04em !important;
}

.education-copy p{
  margin:0 !important;
  font-size:15px !important;
  line-height:1.5 !important;
  letter-spacing:-.012em !important;
  color:rgba(15,46,42,.72) !important;
}

.education-copy p + p{
  margin-top:8px !important;
}

.visible-signs{
  padding-top:0 !important;
}

.sign-chip-row{
  gap:8px !important;
}

.sign-chip-groups{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.sign-chip-groups .sign-chip-row{
  width:100%;
}

.sign-chip-row span{
  min-height:30px !important;
  padding:0 12px !important;
  font-size:12.5px !important;
  letter-spacing:-.01em !important;
}

.sign-chip-row span::before{
  width:5px !important;
  height:5px !important;
  margin-right:7px !important;
}

.education-copy .bridge{
  padding-top:16px !important;
  font-size:15px !important;
  line-height:1.5 !important;
}

@media(max-width:900px){
  .education-copy{
    max-width:100% !important;
    justify-self:stretch !important;
  }
}

@media(max-width:560px){
  .education-copy h3,
  .education-copy .visible-signs h3{
    font-size:21px !important;
  }

  .education-copy p,
  .education-copy .bridge{
    font-size:15px !important;
    line-height:1.58 !important;
  }
}


/* ===========================
   Final Gut page micro-refinements — Section 2/3 only
   =========================== */
@media (min-width: 901px){
  .education-grid{
    align-items:start !important;
    gap:68px !important;
  }
  .education-copy{
    margin-top:22px !important;
  }
  .education-copy .support-line{
    max-width:560px !important;
  }
}

/* Align Section 3 card copy baselines without changing the card layout */
.glass-panel h3{
  min-height:46px !important;
  display:flex !important;
  align-items:flex-start !important;
  line-height:1.12 !important;
  margin-top:22px !important;
}

.glass-panel p{
  margin-top:14px !important;
}

/* Replace abstract card symbols with clearer premium line icons */
.glass-panel .line-icon{
  display:grid !important;
  place-items:center !important;
  border:0 !important;
  border-radius:0 !important;
}

.glass-panel .line-icon::before,
.glass-panel .line-icon::after{
  content:none !important;
  display:none !important;
}

.glass-panel .line-icon svg{
  width:52px;
  height:52px;
  overflow:visible;
}

.glass-panel .line-icon svg *{
  fill:none;
  stroke:rgba(246,241,232,.84);
  stroke-width:2.25;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media(max-width: 680px){
  .glass-panel h3{
    min-height:0 !important;
    display:block !important;
  }
}

/* =========================================================
   FINAL RESPONSIVE STABILIZATION PATCH — May 13
   Purpose: preserve locked desktop while preventing tablet/mobile
   horizontal overflow, clipped sections, and two-column layouts on
   narrow screens after modularization.
   ========================================================= */

html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

#product-page-root,
main,
section,
.container-wide,
.section-intro,
.hero,
.education-grid,
.benefit-story,
.ingredient-shell,
.range-strip{
  max-width:100%;
}

.hero > *,
.education-grid > *,
.benefit-story > *,
.ingredient-shell > *,
.range-strip > *,
.glass-panel > *,
.ingredient-system-card,
.ingredient-system-table,
.ingredient-name,
.ingredient-dose{
  min-width:0;
}

@media (max-width: 1180px){
  .site-header{
    min-height:72px !important;
    grid-template-columns:auto 1fr auto auto !important;
    gap:14px !important;
    padding:0 24px !important;
  }

  .brand-logo svg{
    width:220px !important;
    margin-left:-16px !important;
  }

  .site-nav{
    gap:24px !important;
    font-size:14px !important;
  }

  .nav-home,
  .nav-cta{
    white-space:nowrap !important;
  }

  .hero{
    width:calc(100% - 48px) !important;
    min-height:auto !important;
    margin:36px auto 58px !important;
    grid-template-columns:1fr !important;
    gap:34px !important;
  }

  .hero-media{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:1.08 / 1 !important;
  }

  .hero-media img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }

  .hero-copy{
    width:100% !important;
    padding:0 !important;
  }

  .hero-copy h1{
    max-width:570px !important;
    font-size:clamp(46px,8vw,76px) !important;
  }

  .education-grid{
    width:calc(100% - 48px) !important;
    grid-template-columns:1fr !important;
    gap:36px !important;
    align-items:start !important;
  }

  .education-copy{
    width:100% !important;
    max-width:780px !important;
    justify-self:center !important;
  }

  .microbiome-visual{
    width:100% !important;
    max-width:720px !important;
    justify-self:center !important;
  }

  .ingredient-shell{
    width:calc(100% - 48px) !important;
    grid-template-columns:1fr !important;
    gap:38px !important;
    align-items:start !important;
  }

  .ingredient-copy,
  .ingredient-system-card{
    width:100% !important;
    max-width:none !important;
    justify-self:stretch !important;
  }

  .benefit-story{
    width:calc(100% - 48px) !important;
    grid-template-columns:1fr !important;
    grid-template-areas:
      "timeline"
      "image"
      "usepanel" !important;
    gap:26px !important;
  }

  .benefit-media,
  .benefit-use-panel{
    width:100% !important;
    max-width:none !important;
    justify-self:stretch !important;
  }

  .range-strip{
    width:calc(100% - 48px) !important;
    grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  }
}

@media (max-width: 900px){
  .site-nav{
    display:none !important;
  }

  .site-header{
    grid-template-columns:auto 1fr auto auto !important;
  }

  .brand-logo svg{
    width:206px !important;
  }

  .section-space{
    padding-top:56px !important;
    padding-bottom:56px !important;
  }

  .section-intro,
  .section-intro.narrow,
  .section-intro.centered{
    width:calc(100% - 48px) !important;
    max-width:760px !important;
  }

  .section-intro.centered{
    text-align:center !important;
  }

  h2{
    font-size:clamp(38px,8vw,58px) !important;
  }

  .education .section-intro{
    margin-bottom:34px !important;
  }

  .education-grid{
    grid-template-columns:1fr !important;
    gap:34px !important;
    align-items:start !important;
  }

  .education-copy{
    max-width:720px !important;
    justify-self:center !important;
  }

  .education-copy .bridge{
    max-width:100% !important;
  }

  .formulation-band{
    padding-left:24px !important;
    padding-right:24px !important;
  }

  .band-inner{
    width:100% !important;
    height:auto !important;
    min-height:auto !important;
    padding:46px 28px !important;
    border-radius:30px !important;
  }

  .formulation-band h2{
    white-space:normal !important;
    font-size:clamp(40px,8vw,58px) !important;
  }

  .formulation-canister{
    right:-30px !important;
    top:82px !important;
    bottom:auto !important;
    height:auto !important;
    width:260px !important;
    opacity:.18 !important;
  }

  .glass-panel{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    margin-top:56px !important;
  }

  .glass-panel article{
    min-height:auto !important;
  }

  .benefit-use-panel{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }

  .benefit-use-grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  }

  .ingredient-system-table{
    grid-template-columns:minmax(0,1fr) minmax(92px,max-content) !important;
  }

  .ingredient-dose{
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .ingredient-proof{
    width:calc(100% - 48px) !important;
    grid-template-columns:1fr !important;
    gap:28px !important;
  }

  .proof-list-minimal{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width: 640px){
  .site-header{
    min-height:74px !important;
    grid-template-columns:1fr auto auto !important;
    gap:8px !important;
    padding:0 14px !important;
  }

  .brand-logo{
    overflow:hidden !important;
  }

  .brand-logo svg{
    width:190px !important;
    max-width:48vw !important;
    margin-left:-14px !important;
  }

  .nav-home{
    min-height:38px !important;
    padding:0 13px !important;
    font-size:13px !important;
  }

  .nav-cta{
    min-height:40px !important;
    padding:0 16px !important;
    font-size:14px !important;
  }

  .container-wide,
  .section-intro,
  .section-intro.narrow,
  .section-intro.centered,
  .hero,
  .education-grid,
  .benefit-story,
  .ingredient-shell,
  .ingredient-proof,
  .range-strip{
    width:calc(100% - 32px) !important;
  }

  .hero{
    margin:28px auto 44px !important;
    gap:28px !important;
  }

  .hero-media{
    aspect-ratio:1 / 1.05 !important;
    border-radius:28px !important;
  }

  .hero-copy h1{
    font-size:clamp(42px,13.2vw,58px) !important;
    line-height:.94 !important;
  }

  .kicker{
    font-size:11px !important;
    letter-spacing:.16em !important;
  }

  .lead,
  .hero-copy .lead{
    font-size:17px !important;
    line-height:1.55 !important;
  }

  .hero-markers{
    gap:8px !important;
  }

  .hero-markers span{
    min-height:32px !important;
    padding:0 12px !important;
    font-size:12px !important;
  }

  .commerce-row{
    grid-template-columns:1fr !important;
  }

  .commerce-row div{
    padding:14px 0 !important;
  }

  .hero-actions{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:14px !important;
  }

  .section-intro.centered,
  .section-intro.narrow{
    text-align:center !important;
  }

  h2{
    font-size:clamp(36px,12vw,48px) !important;
    line-height:.98 !important;
  }

  .education-copy{
    max-width:100% !important;
  }

  .education-copy h3,
  .education-copy .visible-signs h3{
    font-size:22px !important;
  }

  .education-copy p,
  .education-copy .bridge{
    font-size:15px !important;
    line-height:1.58 !important;
  }

  .sign-chip-groups,
  .sign-chip-row{
    width:100% !important;
  }

  .sign-chip-row span{
    max-width:100% !important;
  }

  .microbiome-visual{
    min-height:340px !important;
    padding:20px !important;
  }

  .balance-orbit{
    width:min(280px,76vw) !important;
    height:min(280px,76vw) !important;
  }

  .band-inner{
    padding:34px 20px !important;
    border-radius:26px !important;
  }

  .formulation-canister{
    display:none !important;
  }

  .glass-panel{
    grid-template-columns:1fr !important;
    margin-top:42px !important;
    border-radius:24px !important;
  }

  .glass-panel article{
    padding:28px 24px !important;
  }

  .glass-panel h3{
    min-height:0 !important;
    display:block !important;
    font-size:22px !important;
  }

  .benefit-timeline{
    padding-left:52px !important;
  }

  .benefit-timeline:before{
    left:18px !important;
  }

  .dot{
    left:-42px !important;
  }

  .benefit-media img{
    height:300px !important;
  }

  .benefit-use-panel{
    padding:22px 20px !important;
    border-radius:24px !important;
  }

  .benefit-use-grid{
    grid-template-columns:1fr !important;
  }

  .dose-table div[role="row"]{
    grid-template-columns:42px 1fr !important;
    gap:4px 14px !important;
  }

  .dose-table div[role="row"] span,
  .dose-table div[role="row"] b{
    grid-column:2 !important;
  }

  .ingredient-system-card{
    border-radius:24px !important;
  }

  .ingredient-card-head{
    padding:22px 20px 18px !important;
  }

  .ingredient-system-table{
    grid-template-columns:minmax(0,1fr) minmax(74px,88px) !important;
  }

  .system-band{
    padding:18px 20px !important;
  }

  .ingredient-name,
  .ingredient-dose{
    min-height:46px !important;
    padding:11px 14px !important;
    font-size:13.5px !important;
  }

  .ingredient-dose{
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
    min-width:0 !important;
  }

  .proof-list-minimal{
    grid-template-columns:1fr !important;
  }

  .range-strip{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:12px !important;
  }

  .range-strip article{
    border-radius:22px !important;
    padding:12px !important;
  }

  .range-strip h3{
    font-size:13px !important;
  }
}

@media (max-width: 420px){
  .site-header{
    padding:0 10px !important;
    gap:6px !important;
  }

  .brand-logo svg{
    width:174px !important;
    max-width:44vw !important;
    margin-left:-18px !important;
  }

  .nav-home{
    padding:0 10px !important;
    font-size:12px !important;
  }

  .nav-cta{
    padding:0 13px !important;
    font-size:13px !important;
  }

  .container-wide,
  .section-intro,
  .section-intro.narrow,
  .section-intro.centered,
  .hero,
  .education-grid,
  .benefit-story,
  .ingredient-shell,
  .ingredient-proof,
  .range-strip{
    width:calc(100% - 24px) !important;
  }

  .hero-copy h1{
    font-size:40px !important;
  }

  h2{
    font-size:35px !important;
  }

  .range-strip{
    grid-template-columns:1fr 1fr !important;
  }
}

/* =========================================================
   GUT PRODUCT PAGE — SURGICAL REBUILD SECTIONS 2–5
   Keeps original header, hero shell, range and footer systems.
   ========================================================= */

/* Hero product image update: contain the approved Pritzo product image without changing hero structure */
.hero-product-image{
  background:
    radial-gradient(circle at 76% 20%, rgba(47,143,91,.10), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.26), rgba(47,143,91,.055));
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-product-image img{
  object-fit:contain !important;
  object-position:center !important;
  padding:34px !important;
  filter:drop-shadow(0 30px 55px rgba(15,46,42,.12));
}

/* Shared line icon language */
.flow-icon svg,
.mini-icon svg,
.category-icon svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:var(--forest);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* SECTION 2 — full-width 4-part process flow */
.gut-process.section-space{
  padding-top:48px !important;
  padding-bottom:48px !important;
}
.process-card{
  border-radius:34px;
  background:
    radial-gradient(circle at 74% 36%, rgba(47,143,91,.055), transparent 34%),
    rgba(255,255,255,.36);
  border:1px solid rgba(15,46,42,.055);
  box-shadow:0 18px 70px rgba(15,46,42,.035);
  padding:48px 50px 44px;
}
.process-header{
  max-width:720px;
  margin-bottom:38px;
}
.process-header h2{
  font-size:clamp(38px,3.6vw,62px) !important;
  line-height:1 !important;
  letter-spacing:-.055em !important;
  color:var(--forest);
}
.process-header p:not(.kicker){
  margin-top:22px;
  max-width:690px;
  font-size:18px;
  line-height:1.58;
  color:rgba(15,46,42,.74);
}
.flow-row{
  display:grid;
  grid-template-columns:1fr 44px 1fr 44px 1fr 44px 1fr;
  gap:12px;
  align-items:start;
}
.flow-step{
  text-align:center;
  position:relative;
}
.flow-number{
  width:34px;
  height:34px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto -12px;
  position:relative;
  z-index:2;
  background:var(--forest);
  color:var(--cream);
  font-family:'Satoshi','Inter',sans-serif;
  font-weight:900;
  font-size:15px;
}
.flow-icon{
  width:150px;
  height:150px;
  border-radius:999px;
  margin:0 auto 22px;
  padding:38px;
  background:rgba(246,241,232,.58);
  border:1px solid rgba(15,46,42,.13);
  display:flex;
  align-items:center;
  justify-content:center;
}
.flow-step.accent .flow-icon{
  background:radial-gradient(circle at center, rgba(47,143,91,.14), rgba(47,143,91,.055));
  border-color:rgba(47,143,91,.22);
}
.flow-step h3{
  font-size:22px !important;
  line-height:1.08 !important;
  letter-spacing:-.04em !important;
  color:var(--forest);
  margin-bottom:12px;
}
.flow-step p{
  max-width:250px;
  margin:0 auto;
  font-size:14.6px;
  line-height:1.55;
  color:rgba(15,46,42,.76);
}
.flow-arrow{
  align-self:center;
  justify-self:center;
  margin-top:58px;
  font-size:38px;
  line-height:1;
  color:var(--forest);
  font-family:'Satoshi','Inter',sans-serif;
  opacity:.88;
}
.signs-band{
  margin-top:42px;
  padding:22px 28px 24px;
  border-radius:26px;
  background:linear-gradient(180deg, rgba(47,143,91,.055), rgba(47,143,91,.035)), rgba(246,241,232,.52);
  border:1px solid rgba(47,143,91,.07);
}
.signs-band h3{
  text-align:center;
  font-size:23px !important;
  line-height:1.1 !important;
  margin-bottom:22px;
  color:var(--forest);
}
.signs-row,
.benefits-row{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:0;
}
.signs-row article,
.benefits-row article{
  min-height:106px;
  padding:0 14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-right:1px solid rgba(15,46,42,.18);
}
.signs-row article:last-child,
.benefits-row article:last-child{border-right:0;}
.mini-icon{
  width:56px;
  height:56px;
  border-radius:999px;
  padding:12px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,46,42,.16);
  margin-bottom:12px;
}
.mini-icon svg{stroke:var(--forest);stroke-width:2.4 !important;opacity:.95;}
.signs-row span,
.benefits-row span{
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:14.5px;
  line-height:1.22;
  color:rgba(15,46,42,.88);
}

/* SECTION 3 — chew visual as hero, minimal duplicate copy */
.chew-showcase.section-space{
  padding-top:34px !important;
  padding-bottom:38px !important;
}
.chew-card{
  border-radius:34px;
  background:rgba(255,255,255,.30);
  border:1px solid rgba(15,46,42,.055);
  box-shadow:0 18px 70px rgba(15,46,42,.032);
  padding:44px 46px 34px;
  display:grid;
  grid-template-columns:.35fr .65fr;
  gap:32px;
  align-items:center;
}
.chew-copy h2{
  font-size:clamp(34px,3.1vw,52px) !important;
  line-height:1.02 !important;
  color:var(--forest);
}
.chew-copy p:not(.kicker){
  margin-top:22px;
  font-size:16px;
  line-height:1.62;
  color:rgba(15,46,42,.74);
  max-width:430px;
}
.chew-visual img{
  width:100%;
  max-height:430px;
  object-fit:contain;
  object-position:center;
}

/* SECTION 4 — feeding guide + transparent ingredient categories */
.transparent-section.section-space{
  padding-top:38px !important;
  padding-bottom:38px !important;
}
.transparent-shell{
  display:grid;
  grid-template-columns:310px minmax(0,1fr);
  gap:22px;
  align-items:stretch;
}
.feeding-panel,
.transparent-ingredients{
  border-radius:28px;
  background:rgba(255,255,255,.32);
  border:1px solid rgba(15,46,42,.06);
  box-shadow:0 14px 50px rgba(15,46,42,.025);
}
.feeding-panel{
  padding:28px 28px;
}
.feeding-panel h2{
  font-size:26px !important;
  line-height:1.06 !important;
  letter-spacing:-.04em !important;
  max-width:250px;
}
.feeding-panel p:not(.kicker){
  margin-top:10px;
  font-size:14px;
  line-height:1.52;
  color:rgba(15,46,42,.72);
}
.simple-dose-table{
  margin-top:24px;
  border-top:1px solid rgba(15,46,42,.11);
}
.simple-dose-table div[role="row"]{
  display:grid !important;
  grid-template-columns:42px 1fr auto !important;
  gap:12px !important;
  align-items:center !important;
  min-height:54px;
  padding:10px 0 !important;
  border-bottom:1px solid rgba(15,46,42,.10);
}
.simple-dose-table strong{
  font-size:13.5px;
  color:rgba(15,46,42,.82);
}
.simple-dose-table b{
  font-size:13.5px;
  color:var(--forest);
  font-weight:850;
  white-space:nowrap;
}
.simple-dose-table .dog-size-img{
  width:32px !important;
  height:24px !important;
}
.feeding-panel .usage-note{
  margin-top:18px;
  font-size:12.5px;
  line-height:1.55;
}
.transparent-ingredients{
  padding:28px 30px 24px;
}
.transparent-ingredients h2{
  font-size:clamp(30px,2.7vw,44px) !important;
  line-height:1.02 !important;
  letter-spacing:-.045em !important;
  margin-bottom:30px;
}
.ingredient-category-row{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
  border-left:1px solid rgba(15,46,42,.10);
}
.ingredient-category-row article{
  padding:0 18px 4px;
  border-right:1px solid rgba(15,46,42,.18);
  min-height:256px;
}
.category-icon{
  width:62px;
  height:62px;
  border-radius:999px;
  padding:16px;
  margin-bottom:16px;
  background:linear-gradient(180deg, rgba(47,143,91,.10), rgba(246,241,232,.60));
  border:1px solid rgba(15,46,42,.09);
}
.ingredient-category-row h3{
  font-size:18px !important;
  line-height:1.08 !important;
  letter-spacing:-.032em !important;
  margin:0 0 6px;
}
.ingredient-category-row em{
  display:block;
  font-style:normal;
  font-size:11px;
  line-height:1.2;
  color:var(--gut);
  font-weight:850;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.ingredient-category-row ul{
  list-style:none;
  margin:0;
  padding:0;
}
.ingredient-category-row li{
  position:relative;
  padding-left:10px;
  font-size:12.6px;
  line-height:1.52;
  color:rgba(15,46,42,.74);
  margin-bottom:5px;
}
.ingredient-category-row li:before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--gut);
}
.clean-note{
  margin-top:22px !important;
  padding-top:18px;
  border-top:1px solid rgba(15,46,42,.10);
  text-align:center;
  font-size:15px !important;
  color:var(--forest) !important;
  font-weight:650;
}
.clean-note:before{
  content:"♧";
  color:var(--gut);
  margin-right:9px;
}

/* SECTION 5 — horizontal visible benefits strip */
.visible-benefits.section-space{
  padding-top:28px !important;
  padding-bottom:34px !important;
}
.benefits-strip-card{
  padding:24px 30px 26px;
  border-radius:28px;
  background:rgba(255,255,255,.28);
  border:1px solid rgba(15,46,42,.055);
}
.centered-kicker{
  text-align:center;
  margin-bottom:18px !important;
}
.benefits-row article{
  min-height:112px;
}
.benefits-row .mini-icon{
  background:rgba(255,255,255,.46);
}

/* Keep original range/footer visible and reduce transition from rebuilt sections */
.range.section-space{
  padding-top:34px !important;
}

@media(max-width:1180px){
  .flow-row{grid-template-columns:repeat(4,1fr);gap:22px;}
  .flow-arrow{display:none;}
  .transparent-shell{grid-template-columns:1fr;}
  .feeding-panel{max-width:none;}
  .ingredient-category-row{grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(15,46,42,.10);}
  .ingredient-category-row article{border-bottom:1px solid rgba(15,46,42,.10);padding-top:22px;}
  .chew-card{grid-template-columns:1fr;}
}
@media(max-width:760px){
  .hero-product-image img{padding:18px !important;}
  .process-card{padding:32px 20px 26px;border-radius:28px;}
  .process-header{margin-bottom:28px;}
  .flow-row{grid-template-columns:1fr;gap:28px;}
  .flow-icon{width:132px;height:132px;padding:34px;}
  .flow-step p{max-width:320px;}
  .signs-band{padding:20px 16px;}
  .signs-row,.benefits-row{grid-template-columns:repeat(2,1fr);}
  .signs-row article,.benefits-row article{border-bottom:1px solid rgba(15,46,42,.08);}
  .signs-row article:nth-child(2n),.benefits-row article:nth-child(2n){border-right:0;}
  .signs-row article:nth-last-child(-n+2),.benefits-row article:nth-last-child(-n+2){border-bottom:0;}
  .chew-card{padding:30px 18px 20px;border-radius:28px;}
  .chew-visual img{max-height:none;}
  .transparent-ingredients{padding:26px 18px;}
  .ingredient-category-row{grid-template-columns:1fr;border-left:0;}
  .ingredient-category-row article{border-right:0;padding:22px 4px;min-height:auto;}
  .benefits-strip-card{padding:22px 14px;}
}

/* =========================================================
   LOCKED UPDATE — Hero pedestal image + Section 4 color-coded ingredients
   Scope: image treatment only for hero; Section 4 internal visual architecture only.
   ========================================================= */

/* Change #1: revert hero visual to the approved pedestal scene without changing hero layout/spacing */
.hero-product-image{
  background:rgba(255,255,255,.18) !important;
  display:block !important;
}
.hero-product-image img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  padding:0 !important;
  filter:none !important;
}

/* Change #2: Section 4 approved colored-header ingredient architecture */
.transparent-ingredients{
  padding:28px 30px 24px !important;
}
.transparent-ingredients .kicker{
  display:inline-block;
}
.transparent-ingredients .kicker::after{
  content:'PER SOFT CHEW';
  position:absolute;
  right:30px;
  color:rgba(15,46,42,.54);
  font-family:'Satoshi','Inter',sans-serif;
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
}
.transparent-ingredients{
  position:relative;
  overflow:hidden;
}
.ingredient-category-row{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:0 !important;
  border:1px solid rgba(15,46,42,.10) !important;
  border-radius:22px !important;
  overflow:hidden !important;
  background:rgba(246,241,232,.48) !important;
}
.ingredient-category-row article{
  padding:0 !important;
  border-right:1px solid rgba(15,46,42,.10) !important;
  min-height:312px !important;
  background:rgba(255,255,255,.18) !important;
}
.ingredient-category-row article:last-child{
  border-right:0 !important;
}
.ingredient-category-head{
  min-height:122px;
  padding:26px 20px 22px;
  display:flex;
  align-items:center;
  gap:16px;
  color:var(--cream);
}
.ingredient-category--probiotic .ingredient-category-head{
  background:linear-gradient(135deg,#1F7A45,#16643A);
}
.ingredient-category--prebiotic .ingredient-category-head{
  background:linear-gradient(135deg,#7C9645,#6E873C);
}
.ingredient-category--enzyme .ingredient-category-head{
  background:linear-gradient(135deg,#4F9B9A,#3D8586);
}
.ingredient-category--nutrient .ingredient-category-head{
  background:linear-gradient(135deg,#A7753D,#956634);
}
.ingredient-category-head .category-icon{
  width:58px !important;
  height:58px !important;
  border-radius:999px !important;
  flex:0 0 58px !important;
  padding:15px !important;
  margin:0 !important;
  background:rgba(246,241,232,.13) !important;
  border:1px solid rgba(246,241,232,.58) !important;
}
.ingredient-category-head .category-icon svg{
  stroke:var(--cream) !important;
  stroke-width:2.15 !important;
}
.ingredient-category-head h3{
  margin:0 0 7px !important;
  color:var(--cream) !important;
  font-size:20px !important;
  line-height:1.02 !important;
  letter-spacing:.02em !important;
  text-transform:uppercase;
}
.ingredient-category-head em{
  display:block !important;
  margin:0 !important;
  color:rgba(246,241,232,.82) !important;
  font-size:13px !important;
  line-height:1.25 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  font-weight:600 !important;
}
.ingredient-category-row ul{
  list-style:none !important;
  margin:0 !important;
  padding:20px 20px 18px !important;
}
.ingredient-category-row li{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:start !important;
  gap:14px !important;
  padding:10px 0 !important;
  margin:0 !important;
  border-bottom:1px solid rgba(15,46,42,.08) !important;
  color:var(--forest) !important;
  font-size:14.5px !important;
  line-height:1.28 !important;
}
.ingredient-category-row li:last-child{
  border-bottom:0 !important;
}
.ingredient-category-row li:before{
  display:none !important;
}
.ingredient-category-row li span{
  color:rgba(15,46,42,.86);
  font-weight:650;
}
.ingredient-category-row li b{
  color:rgba(15,46,42,.78);
  font-size:14px;
  font-weight:800;
  white-space:nowrap;
}
.clean-note{
  margin-top:22px !important;
  padding-top:18px !important;
  border-top:1px solid rgba(15,46,42,.10) !important;
}

@media(max-width:1180px){
  .transparent-ingredients .kicker::after{display:none;}
  .ingredient-category-row{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .ingredient-category-row article:nth-child(2n){border-right:0 !important;}
  .ingredient-category-row article:nth-child(-n+2){border-bottom:1px solid rgba(15,46,42,.10) !important;}
}
@media(max-width:760px){
  .ingredient-category-row{
    grid-template-columns:1fr !important;
  }
  .ingredient-category-row article{
    min-height:auto !important;
    border-right:0 !important;
    border-bottom:1px solid rgba(15,46,42,.10) !important;
  }
  .ingredient-category-row article:last-child{border-bottom:0 !important;}
  .ingredient-category-head{
    min-height:104px;
    padding:22px 18px 20px;
  }
  .ingredient-category-row ul{
    padding:16px 18px !important;
  }
}

/* =========================================================
   TYPOGRAPHY REFINEMENT PASS — applied to approved Gut page
   Scope: visual hierarchy, type scale, icon scale and Section 4 alignment only.
   No section order, imagery, spacing, layout widths, carousel or footer changes.
   ========================================================= */

/* Global editorial restraint */
.kicker,
.section-intro .kicker,
.process-header .kicker,
.chew-copy .kicker,
.transparent-ingredients .kicker,
.feeding-panel .kicker,
.centered-kicker{
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.18em !important;
}

.section-intro h2,
.process-header h2,
.chew-copy h2,
.transparent-ingredients h2,
.benefits-strip-card h2,
.ingredients .section-intro h2,
.range .section-intro h2{
  font-size:clamp(32px,3.05vw,52px) !important;
  line-height:1.02 !important;
  letter-spacing:-.052em !important;
}

.section-intro p:not(.kicker),
.process-header p:not(.kicker),
.chew-copy p:not(.kicker),
.feeding-panel p:not(.kicker),
.transparent-ingredients p:not(.kicker),
.benefits-strip-card p:not(.kicker){
  font-size:15.5px !important;
  line-height:1.62 !important;
}

/* Section 2 — make process the story, not the icon circles */
.process-header h2{
  font-size:clamp(34px,3.15vw,54px) !important;
}

.process-header p:not(.kicker){
  font-size:16px !important;
  line-height:1.58 !important;
}

.flow-number{
  width:30px !important;
  height:30px !important;
  font-size:13px !important;
  margin-bottom:-10px !important;
}

.flow-icon{
  width:116px !important;
  height:116px !important;
  padding:30px !important;
  margin-bottom:18px !important;
}

.flow-icon svg{
  transform:scale(.92);
  transform-origin:center;
}

.flow-arrow{
  margin-top:44px !important;
  font-size:30px !important;
  opacity:.74 !important;
}

.flow-step h3{
  font-size:19px !important;
  line-height:1.12 !important;
  margin-bottom:9px !important;
}

.flow-step p{
  font-size:13.4px !important;
  line-height:1.5 !important;
  max-width:230px !important;
}

.signs-band h3{
  font-size:20px !important;
  margin-bottom:18px !important;
}

.mini-icon{
  width:48px !important;
  height:48px !important;
  padding:13px !important;
  margin-bottom:10px !important;
}

.mini-icon svg{stroke:var(--forest);stroke-width:2.4 !important;opacity:.95;}
.signs-row span,
.benefits-row span{
  font-size:13.2px !important;
  line-height:1.22 !important;
}

/* Section 3 — chew visual becomes primary focal point */
.chew-copy h2{
  font-size:clamp(30px,2.55vw,44px) !important;
  line-height:1.04 !important;
}

.chew-copy p:not(.kicker){
  font-size:15px !important;
  line-height:1.58 !important;
}

/* Section 4 — approved architecture, calmer headers, fixed ingredient/dose alignment */
.feeding-panel h2{
  font-size:23px !important;
  line-height:1.08 !important;
}

.feeding-panel p:not(.kicker){
  font-size:13.2px !important;
}

.simple-dose-table strong,
.simple-dose-table b{
  font-size:12.8px !important;
}

.feeding-panel .usage-note{
  font-size:12px !important;
}

.transparent-ingredients h2{
  font-size:clamp(28px,2.25vw,38px) !important;
  line-height:1.04 !important;
  margin-bottom:24px !important;
}

.ingredient-category-head{
  min-height:92px !important;
  padding:18px 16px 16px !important;
  gap:12px !important;
}

.ingredient-category-head .category-icon{
  width:44px !important;
  height:44px !important;
  flex-basis:44px !important;
  padding:12px !important;
}

.ingredient-category-head h3{
  font-size:15.5px !important;
  line-height:1.05 !important;
  margin-bottom:5px !important;
  letter-spacing:.025em !important;
}

.ingredient-category-head em{
  font-size:11px !important;
  line-height:1.22 !important;
  font-weight:600 !important;
}

.ingredient-category-row article{
  min-height:284px !important;
}

.ingredient-category-row ul{
  padding:16px 16px 14px !important;
}

.ingredient-category-row li{
  grid-template-columns:minmax(0,1fr) minmax(44px,auto) !important;
  gap:8px !important;
  padding:8px 0 !important;
  font-size:12.8px !important;
  line-height:1.24 !important;
}

.ingredient-category-row li span{
  font-weight:620 !important;
  min-width:0 !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  hyphens:none !important;
}

.ingredient-category-row li b{
  font-size:12.3px !important;
  line-height:1.22 !important;
  text-align:right !important;
  white-space:nowrap !important;
  align-self:start !important;
}

.clean-note{
  font-size:13.5px !important;
  line-height:1.45 !important;
}

/* Section 5 — soften benefit labels */
.benefits-strip-card .kicker,
.centered-kicker{
  font-size:11px !important;
}

.benefits-row article{
  min-height:96px !important;
}

.benefits-row .mini-icon{
  width:46px !important;
  height:46px !important;
}

/* Mobile/tablet safety: maintain proportionally restrained hierarchy */
@media(max-width:1180px){
  .flow-icon{
    width:110px !important;
    height:110px !important;
    padding:28px !important;
  }
  .ingredient-category-head{
    min-height:88px !important;
  }
  .ingredient-category-row article{
    min-height:auto !important;
  }
}

@media(max-width:760px){
  .section-intro h2,
  .process-header h2,
  .chew-copy h2,
  .transparent-ingredients h2,
  .benefits-strip-card h2{
    font-size:clamp(32px,9.6vw,42px) !important;
  }
  .flow-icon{
    width:104px !important;
    height:104px !important;
    padding:27px !important;
  }
  .flow-step h3{
    font-size:18px !important;
  }
  .ingredient-category-head{
    min-height:86px !important;
  }
  .ingredient-category-row li{
    font-size:13px !important;
  }
}

/* =========================================================
   FINAL MICRO REFINEMENTS — icons, color rhythm, alignment polish
   Scope: Section 2 icons/circles/color, Section 3 tiny visual shift,
   Section 4 alignment/header polish, Section 5 icon quality + color bar.
   Mobile adaptive overrides included.
   ========================================================= */

/* Section 2: smaller process circles + clearer green emphasis on desired states */
.flow-icon{
  width:102px !important;
  height:102px !important;
  padding:26px !important;
  background:rgba(246,241,232,.66) !important;
  border-color:rgba(15,46,42,.115) !important;
}
.flow-icon svg,
.mini-icon svg{
  stroke-width:2.05 !important;
}
.flow-step.accent .flow-icon{
  background:linear-gradient(180deg, rgba(237,246,239,.96), rgba(47,143,91,.085)) !important;
  border-color:rgba(47,143,91,.30) !important;
  box-shadow:0 14px 32px rgba(47,143,91,.075) !important;
}
.flow-step.accent .flow-number{
  background:var(--sku-primary) !important;
}
.flow-arrow{
  margin-top:38px !important;
}

/* Keep visible-sign icons neutral but better drawn and clearer */
.signs-row .mini-icon,
.benefits-row .mini-icon{
  background:rgba(255,255,255,.50) !important;
  border-color:rgba(15,46,42,.10) !important;
}

/* Section 3: tiny right shift only for visual container, not layout/spacing */
.chew-visual{
  transform:translateX(2.5%) !important;
}

/* Section 4: calmer category headers + robust ingredient/dose alignment */
.ingredient-category-head{
  min-height:80px !important;
  padding:14px 14px 13px !important;
  gap:10px !important;
}
.ingredient-category-head .category-icon{
  width:38px !important;
  height:38px !important;
  flex:0 0 38px !important;
  padding:10px !important;
}
.ingredient-category-head h3{
  font-size:14.2px !important;
  line-height:1.08 !important;
  margin-bottom:3px !important;
}
.ingredient-category-head em{
  font-size:10.2px !important;
  line-height:1.18 !important;
}
.ingredient-category-row{
  grid-template-columns:1.18fr .84fr .90fr 1.08fr !important;
}
.ingredient-category-row article{
  min-height:268px !important;
}
.ingredient-category-row ul{
  padding:13px 14px 12px !important;
}
.ingredient-category-row li{
  grid-template-columns:minmax(0,1fr) minmax(44px,max-content) !important;
  gap:8px !important;
  padding:7px 0 !important;
  align-items:start !important;
  font-size:12.15px !important;
  line-height:1.22 !important;
}
.ingredient-category-row li span{
  min-width:0 !important;
  white-space:normal !important;
  overflow-wrap:break-word !important;
  word-break:normal !important;
  hyphens:auto !important;
}
.ingredient-category-row li b{
  min-width:44px !important;
  text-align:right !important;
  white-space:nowrap !important;
  font-size:11.8px !important;
  line-height:1.22 !important;
  color:rgba(15,46,42,.76) !important;
}

/* Section 5: locked color-bar format; icons stay monochrome */
.benefits-strip-card{
  position:relative !important;
  overflow:hidden !important;
}
.centered-kicker::after{
  content:"";
  display:block;
  width:min(620px,72%);
  height:3px;
  margin:18px auto 0;
  border-radius:999px;
  background:linear-gradient(90deg,
    #2F8F5B 0%,
    #7D9B47 34%,
    #5B9EA3 68%,
    #A97A42 100%);
  opacity:.84;
}
.benefits-row{
  margin-top:4px !important;
}
.benefits-row .mini-icon{
  width:48px !important;
  height:48px !important;
  padding:12px !important;
  border-radius:999px !important;
}
.benefits-row .mini-icon svg{
  stroke-width:2.05 !important;
}

/* Tablet/mobile safety */
@media(max-width:1180px){
  .flow-icon{
    width:100px !important;
    height:100px !important;
    padding:25px !important;
  }
  .chew-visual{
    transform:none !important;
  }
  .ingredient-category-row{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .ingredient-category-head{
    min-height:78px !important;
  }
  .ingredient-category-row article{
    min-height:auto !important;
  }
}
@media(max-width:760px){
  .flow-icon{
    width:92px !important;
    height:92px !important;
    padding:24px !important;
  }
  .flow-arrow{display:none !important;}
  .ingredient-category-row{
    grid-template-columns:1fr !important;
  }
  .ingredient-category-head{
    min-height:74px !important;
    padding:14px 16px !important;
  }
  .ingredient-category-row li{
    grid-template-columns:minmax(0,1fr) minmax(64px,max-content) !important;
    font-size:12.8px !important;
  }
  .ingredient-category-row li b{
    min-width:64px !important;
    font-size:12.3px !important;
  }
  .centered-kicker::after{
    width:84%;
    height:2px;
    margin-top:15px;
  }
  .benefits-row .mini-icon{
    width:46px !important;
    height:46px !important;
  }
}

/* =========================================================
   FINAL SECTION 4 BREATHING ROOM PATCH
   Scope: Section 4 only. Retains overall section/card height and layout.
   Goal: less scrunched ingredient table by reducing category band height,
   adding whitespace before architecture, and giving ingredient rows air.
   ========================================================= */
.transparent-ingredients h2{
  margin-bottom:32px !important;
}
.ingredient-category-head{
  min-height:64px !important;
  padding:10px 14px 9px !important;
  gap:9px !important;
  align-items:center !important;
}
.ingredient-category-head .category-icon{
  width:34px !important;
  height:34px !important;
  flex:0 0 34px !important;
  padding:9px !important;
}
.ingredient-category-head h3{
  font-size:13.8px !important;
  line-height:1.06 !important;
  margin-bottom:2px !important;
}
.ingredient-category-head em{
  font-size:9.8px !important;
  line-height:1.15 !important;
}
.ingredient-category-row article{
  min-height:268px !important;
}
.ingredient-category-row ul{
  padding:18px 16px 16px !important;
}
.ingredient-category-row li{
  padding:8.8px 0 !important;
  line-height:1.24 !important;
  font-size:12.15px !important;
}
.ingredient-category-row li b{
  align-self:start !important;
  padding-top:0 !important;
}

@media(max-width:1180px){
  .transparent-ingredients h2{
    margin-bottom:28px !important;
  }
  .ingredient-category-head{
    min-height:66px !important;
    padding:11px 14px 10px !important;
  }
  .ingredient-category-row article{
    min-height:auto !important;
  }
}
@media(max-width:760px){
  .transparent-ingredients h2{
    margin-bottom:24px !important;
  }
  .ingredient-category-head{
    min-height:64px !important;
    padding:12px 16px !important;
  }
  .ingredient-category-row ul{
    padding:16px 16px 15px !important;
  }
  .ingredient-category-row li{
    padding:8px 0 !important;
  }
}


/* =========================================================
   FINAL HERO REFINEMENT + FEEDING GUIDE DATA UPDATE
   Scope: reduce hero headline dominance only; no layout/spacing changes.
   ========================================================= */
.hero-copy h1{
  font-size:clamp(46px,4.75vw,74px) !important;
  line-height:.96 !important;
  max-width:570px !important;
}
.hero-copy .kicker{
  margin-bottom:18px !important;
}
@media (max-width:1180px){
  .hero-copy h1{
    font-size:clamp(42px,7vw,64px) !important;
    max-width:570px !important;
  }
}
@media (max-width:680px){
  .hero-copy h1{
    font-size:38px !important;
    line-height:.98 !important;
    max-width:100% !important;
  }
  .hero-copy .kicker{
    margin-bottom:14px !important;
  }
}


/* Multi-SKU build: touch-friendly related products carousel and overflow guards */
.range-strip{overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding-bottom:6px;}
.range-strip article{scroll-snap-align:start;}
.hero-media img,.chew-visual img,.range-strip img{max-width:100%;}
.transparent-shell,.process-card,.chew-card,.benefits-strip-card{overflow:hidden;}
@media(max-width:900px){.range-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,42vw);grid-template-columns:none;gap:12px;}.transparent-shell{grid-template-columns:1fr;}.ingredient-category-row{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.range-strip{grid-auto-columns:minmax(148px,68vw);}.ingredient-category-row{grid-template-columns:1fr;}.simple-dose-table div{grid-template-columns:42px 1fr;row-gap:4px;}.simple-dose-table div b{grid-column:2;}.hero-media{max-height:none}.hero-media img{height:auto;aspect-ratio:1/1;object-fit:cover}.primary-btn,.text-link{min-height:44px;align-items:center}}

/* =========================================================
   FINAL SKU HERO STANDARDIZATION PATCH
   Uses the approved 1536x768 standardized hero exports.
   No SKU-specific crop, scale, translate or object-position overrides.
   ========================================================= */
.hero-product-image,
.hero-media.hero-product-image{
  background:rgba(255,255,255,.18) !important;
  overflow:hidden !important;
}
.hero-product-image img,
.hero-media.hero-product-image img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:none !important;
  padding:0 !important;
  filter:none !important;
}
@media(max-width:1100px){
  .hero-product-image img,
  .hero-media.hero-product-image img{
    object-fit:cover !important;
    object-position:center center !important;
    transform:none !important;
  }
}

/* =========================================================
   HERO CARD CROP PATCH
   Product pages use SKU hero-card crops generated from the
   standardized full hero banners. The crops are canister-only
   and exclude the banner headline/body text, matching the
   original Gut product-page card treatment.
   ========================================================= */
.hero-product-image img,
.hero-media.hero-product-image img{
  object-fit:cover !important;
  object-position:center center !important;
  transform:none !important;
  padding:0 !important;
}

/* =====================================================
   Approved edit batch: Changes #1–#4 only
   #1 Hero-card assets refreshed separately with locked crop 420,20,620,700
   #2 Restore Gut-style coloured ingredient category headers across all SKUs
   #3 Improve ingredient row typography to prevent avoidable wrapping
   #4 SKU-tinted hero benefit pills
   ===================================================== */

/* Change #4: hero benefit pills derive softly from SKU colour */
.hero-markers span{
  background: color-mix(in srgb, var(--sku-primary) 13%, #F6F1E8) !important;
  border: 1px solid color-mix(in srgb, var(--sku-primary) 18%, transparent) !important;
  color: var(--forest) !important;
}

/* Change #2: ingredient group headers use data-driven category colour */
.ingredient-category-head{
  background: var(--group-color, var(--sku-primary)) !important;
  color: var(--cream) !important;
  border-bottom: 0 !important;
}
.ingredient-category-head .category-icon{
  border-color: rgba(246,241,232,.45) !important;
  color: var(--cream) !important;
  background: rgba(246,241,232,.08) !important;
}
.ingredient-category-head .category-icon svg,
.ingredient-category-head .category-icon svg *{
  stroke: currentColor !important;
}
.ingredient-category-head h3,
.ingredient-category-head em{
  color: var(--cream) !important;
}
.ingredient-category-head em{
  opacity: .82 !important;
}

/* Change #3: keep ingredient names and dose values on one line where possible */
.ingredient-category-row li{
  grid-template-columns: minmax(0,1fr) auto !important;
  column-gap: 14px !important;
}
.ingredient-category-row li span{
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: clamp(11px, .72vw, 13px) !important;
  line-height: 1.12 !important;
  letter-spacing: -.03em !important;
}
.ingredient-category-row li b{
  white-space: nowrap !important;
  font-size: clamp(11px, .72vw, 13px) !important;
  line-height: 1.12 !important;
}

@media(max-width:900px){
  .ingredient-category-row li span,
  .ingredient-category-row li b{
    font-size: 13px !important;
  }
}
@media(max-width:520px){
  .ingredient-category-row li span,
  .ingredient-category-row li b{
    font-size: 12.5px !important;
  }
}


/* === Approved edit pass v5: Changes #5, #6, #7 only === */

/* Change #6: process-step numbers stay brand forest, not SKU accent */
.flow-step.accent .flow-number,
.flow-number{
  background:var(--forest) !important;
  color:var(--cream) !important;
}

/* Change #5: shared chew image with dynamic SKU-specific labels */
.chew-visual{
  min-height:430px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.chew-diagram{
  position:relative;
  width:min(100%, 780px);
  min-height:430px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.chew-diagram .chew-core{
  width:min(48vw, 420px);
  max-width:420px;
  max-height:350px;
  object-fit:contain;
  object-position:center;
  border-radius:22px;
  filter:drop-shadow(0 18px 34px rgba(15,46,42,.13));
}
.chew-callout{
  position:absolute;
  width:190px;
  padding:14px 16px 15px;
  border-radius:20px;
  background:rgba(255,255,255,.50);
  border:1px solid rgba(15,46,42,.08);
  box-shadow:0 12px 32px rgba(15,46,42,.045);
}
.chew-callout-icon{
  width:40px;
  height:40px;
  border-radius:999px;
  padding:10px;
  margin-bottom:8px;
  background:color-mix(in srgb, var(--sku-primary) 12%, #F6F1E8);
  border:1px solid color-mix(in srgb, var(--sku-primary) 26%, rgba(15,46,42,.08));
}
.chew-callout-icon svg{
  stroke:var(--forest);
  stroke-width:2.05;
}
.chew-callout h3{
  margin:0 0 5px !important;
  font-size:17px !important;
  line-height:1.02 !important;
  letter-spacing:-.035em !important;
  color:var(--forest);
}
.chew-callout p{
  margin:0 !important;
  font-size:12.2px !important;
  line-height:1.28 !important;
  color:rgba(15,46,42,.72) !important;
}
.chew-callout-1{ left:0; top:18px; }
.chew-callout-2{ right:0; top:26px; }
.chew-callout-3{ left:18px; bottom:26px; }
.chew-callout-4{ right:18px; bottom:24px; }

/* Change #7: ingredient category header/row normalization */
.ingredient-category-head{
  height:86px !important;
  min-height:86px !important;
  padding:18px 16px 16px !important;
  align-items:center !important;
  overflow:hidden;
}
.ingredient-category-head .category-icon{
  width:46px !important;
  height:46px !important;
  flex:0 0 46px !important;
  padding:12px !important;
}
.ingredient-category-head h3{
  font-size:16px !important;
  line-height:1.02 !important;
  letter-spacing:.015em !important;
  margin-bottom:4px !important;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.ingredient-category-head em{
  font-size:11.2px !important;
  line-height:1.18 !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.ingredient-category-row li{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:10px !important;
  min-height:34px;
  padding:7px 0 !important;
  margin:0 !important;
  border-bottom:1px solid rgba(15,46,42,.075);
  font-size:12.4px !important;
  line-height:1.18 !important;
}
.ingredient-category-row li:last-child{
  border-bottom:0;
}
.ingredient-category-row li:before{
  display:none !important;
}
.ingredient-category-row li span{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:740;
  color:rgba(15,46,42,.78);
}
.ingredient-category-row li b{
  white-space:nowrap !important;
  font-weight:850 !important;
  color:rgba(15,46,42,.78);
}
.ingredient-category-row li span.long-name{
  font-size:11.4px;
  letter-spacing:-.01em;
}

@media (max-width: 980px){
  .chew-card{
    grid-template-columns:1fr !important;
  }
  .chew-diagram{
    min-height:auto;
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
  }
  .chew-diagram .chew-core{
    width:min(78vw, 360px);
    margin:0 auto 4px;
  }
  .chew-callout{
    position:static;
    width:auto;
    display:grid;
    grid-template-columns:44px 1fr;
    column-gap:12px;
    align-items:center;
  }
  .chew-callout-icon{
    grid-row:1 / span 2;
    margin-bottom:0;
  }
}

@media (max-width: 760px){
  .ingredient-category-head{
    height:auto !important;
    min-height:74px !important;
  }
  .ingredient-category-row li span{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }
}

/* =========================================================
   FINAL SECTION 3 CLEANUP + HERO HEADLINE TUNING
   Scope: approved current request only.
   - Section 3 uses finished SKU infographic PNG only.
   - Removes old callout overlay behavior.
   - Hero headline reduced ~10–15%; weight and width unchanged.
   ========================================================= */
.chew-visual{
  min-height:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.chew-diagram,
.chew-infographic-frame{
  position:relative !important;
  width:100% !important;
  max-width:820px !important;
  min-height:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.chew-diagram .chew-core,
.chew-infographic-image{
  display:block !important;
  width:100% !important;
  max-width:820px !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center !important;
  border-radius:0 !important;
  filter:none !important;
}
.chew-callout{
  display:none !important;
}
.hero-copy h1{
  font-size:clamp(40px,4.15vw,64px) !important;
  line-height:.93 !important;
  font-weight:inherit !important;
}
@media (max-width:1180px){
  .hero-copy h1{
    font-size:clamp(38px,6.2vw,56px) !important;
    line-height:.95 !important;
  }
}
@media (max-width:680px){
  .hero-copy h1{
    font-size:34px !important;
    line-height:.98 !important;
  }
}

/* =========================================================
   APPROVED EDIT PASS V8: Changes #1B, #8, #9 only
   Scope:
   #1B Per-SKU hero optical centering via horizontal object-position only.
   #8 Roll back hero headline typography reduction only.
   #9 Ingredient table overflow protection.
   No layout, asset, spacing, crop-size, canister-size, content or navigation changes.
   ========================================================= */

/* #1B — Per-SKU hero optical centering; scale/crop dimensions remain unchanged */
body[data-current-sku="skin-coat"] .hero-product-image img,
body[data-current-sku="skin-coat"] .hero-media.hero-product-image img{
  object-position:52% center !important;
}
body[data-current-sku="hip-joint"] .hero-product-image img,
body[data-current-sku="hip-joint"] .hero-media.hero-product-image img{
  object-position:51% center !important;
}
body[data-current-sku="oral-care"] .hero-product-image img,
body[data-current-sku="oral-care"] .hero-media.hero-product-image img{
  object-position:48% center !important;
}
body[data-current-sku="immunity"] .hero-product-image img,
body[data-current-sku="immunity"] .hero-media.hero-product-image img{
  object-position:54% center !important;
}
body[data-current-sku="gut"] .hero-product-image img,
body[data-current-sku="gut"] .hero-media.hero-product-image img,
body[data-current-sku="fibre"] .hero-product-image img,
body[data-current-sku="fibre"] .hero-media.hero-product-image img,
body[data-current-sku="hip-joint-plus"] .hero-product-image img,
body[data-current-sku="hip-joint-plus"] .hero-media.hero-product-image img,
body[data-current-sku="multivitamin"] .hero-product-image img,
body[data-current-sku="multivitamin"] .hero-media.hero-product-image img{
  object-position:center center !important;
}

/* #8 — Hero typography rollback only: restore pre-reduction headline scale/leading */
.hero-copy h1{
  font-size:clamp(46px,4.75vw,74px) !important;
  line-height:.96 !important;
  font-weight:inherit !important;
}
@media (max-width:1180px){
  .hero-copy h1{
    font-size:clamp(42px,7vw,64px) !important;
    line-height:.96 !important;
  }
}
@media (max-width:680px){
  .hero-copy h1{
    font-size:38px !important;
    line-height:.98 !important;
  }
}

/* #9 — Ingredient table overflow protection */
.ingredient-category-row li{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(74px,max-content) !important;
  column-gap:12px !important;
  align-items:start !important;
  min-height:32px !important;
  padding:6px 0 !important;
  overflow:visible !important;
}
.ingredient-category-row li span{
  min-width:0 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  font-size:13px !important;
  line-height:1.18 !important;
  letter-spacing:-.02em !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
}
.ingredient-category-row li b{
  min-width:74px !important;
  white-space:nowrap !important;
  text-align:right !important;
  justify-self:end !important;
  font-size:13px !important;
  line-height:1.18 !important;
}
@media(max-width:900px){
  .ingredient-category-row li{
    grid-template-columns:minmax(0,1fr) minmax(72px,max-content) !important;
  }
  .ingredient-category-row li span,
  .ingredient-category-row li b{
    font-size:12.8px !important;
  }
}
@media(max-width:520px){
  .ingredient-category-row li{
    grid-template-columns:minmax(0,1fr) minmax(68px,max-content) !important;
  }
  .ingredient-category-row li span,
  .ingredient-category-row li b{
    font-size:12.5px !important;
  }
}


/* =========================================================
   CHANGE #13 — Hero editorial restraint review patch
   Scope: Hero section only.
   - Removes hero descriptive paragraph via JS render change.
   - Reduces headline scale by ~8–10% from restored V8 scale.
   - Keeps headline weight, line breaks, hero image, layout, facts row and CTA styling intact.
   ========================================================= */
.hero-copy h1{
  font-size:clamp(42px,4.35vw,67px) !important;
  line-height:.92 !important;
  font-weight:inherit !important;
}
.hero-markers{
  margin-top:28px !important;
  gap:12px !important;
  max-width:650px !important;
}
.hero-markers span{
  padding-left:18px !important;
  padding-right:18px !important;
}
.commerce-row{
  margin-top:36px !important;
}
.hero-actions{
  margin-top:38px !important;
}
@media (max-width:1180px){
  .hero-copy h1{
    font-size:clamp(39px,6.45vw,59px) !important;
    line-height:.94 !important;
  }
  .hero-markers{
    margin-top:26px !important;
  }
  .commerce-row{
    margin-top:34px !important;
  }
  .hero-actions{
    margin-top:36px !important;
  }
}
@media (max-width:680px){
  .hero-copy h1{
    font-size:35px !important;
    line-height:.96 !important;
  }
  .hero-markers{
    margin-top:22px !important;
    gap:9px !important;
  }
  .hero-markers span{
    padding-left:12px !important;
    padding-right:12px !important;
  }
  .commerce-row{
    margin-top:28px !important;
  }
  .hero-actions{
    margin-top:30px !important;
  }
}


/* Change #14 - Hero Breathing Room Review */
.hero-copy h1{
  line-height:1.01 !important;
  margin-bottom:16px !important;
}
.hero-markers{
  margin-top:16px !important;
}

/* Change #15 - Hero Vertical Rebalance Review
   Scope: desktop/tablet hero only. Moves entire right content stack upward as one group.
   Locked base: Change #14 remains unchanged.
*/
@media (min-width:1101px){
  .hero-copy{
    transform:translateY(-30px) !important;
  }
}

/* =========================================================
   CHANGE #16 — Restore frozen header
   Scope: Header only.
   Keeps approved hero lock (Changes #13, #14, #15) unchanged.
   ========================================================= */
.site-header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:9999 !important;
  background:rgba(246,241,232,.90) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  backdrop-filter:blur(14px) !important;
}
body{
  padding-top:72px !important;
}
@media (max-width:680px){
  body{
    padding-top:72px !important;
  }
}

/* =========================================================
   CHANGE #16 — Section 2 compression & process simplification
   Scope: Why Gut Health Matters section only.
   Removes large process icons, replaces with a numbered rail,
   compresses vertical height and reduces signs strip height.
   ========================================================= */
.gut-process.section-space{
  padding-top:30px !important;
  padding-bottom:32px !important;
}
.process-card{
  padding:38px 50px 30px !important;
}
.process-header{
  margin-bottom:28px !important;
}
.process-header h2{
  font-size:clamp(32px,2.85vw,50px) !important;
  line-height:1.02 !important;
}
.process-header p:not(.kicker){
  margin-top:16px !important;
  max-width:680px !important;
}
.process-rail{
  display:grid;
  grid-template-columns:34px 1fr 34px 1fr 34px 1fr 34px;
  align-items:center;
  max-width:1040px;
  margin:0 auto 18px;
}
.rail-number{
  width:34px;
  height:34px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--forest);
  color:var(--cream);
  font-family:'Satoshi','Inter',sans-serif;
  font-size:14px;
  font-weight:900;
  box-shadow:0 6px 18px rgba(15,46,42,.10);
}
.rail-line{
  height:1px;
  background:linear-gradient(90deg, rgba(15,46,42,.22), rgba(15,46,42,.50), rgba(15,46,42,.22));
  position:relative;
}
.rail-line::after{
  content:'→';
  position:absolute;
  right:-3px;
  top:50%;
  transform:translateY(-53%);
  font-family:'Satoshi','Inter',sans-serif;
  font-size:24px;
  color:rgba(15,46,42,.70);
  background:rgba(250,246,238,.72);
  padding-left:8px;
}
.flow-row.flow-row-compact{
  grid-template-columns:repeat(4,1fr) !important;
  gap:34px !important;
  align-items:start !important;
  max-width:1120px;
  margin:0 auto;
}
.flow-row-compact .flow-icon,
.flow-row-compact .flow-number,
.flow-row-compact + .flow-arrow,
.flow-arrow{display:none !important;}
.flow-row-compact .flow-step h3{
  font-size:18px !important;
  line-height:1.12 !important;
  margin-bottom:8px !important;
}
.flow-row-compact .flow-step p{
  font-size:13.2px !important;
  line-height:1.43 !important;
  max-width:235px !important;
}
.signs-band{
  margin-top:30px !important;
  padding:18px 24px 16px !important;
  border-radius:24px !important;
}
.signs-band h3{
  font-size:18px !important;
  margin-bottom:14px !important;
}
.signs-row article{
  min-height:76px !important;
  padding:0 12px !important;
}
.signs-row .mini-icon{
  width:40px !important;
  height:40px !important;
  padding:11px !important;
  margin-bottom:8px !important;
}
.signs-row span{
  font-size:12.8px !important;
}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
@media(max-width:1180px){
  .process-rail{display:none;}
  .flow-row.flow-row-compact{grid-template-columns:repeat(4,1fr) !important;gap:22px !important;}
}
@media(max-width:760px){
  .gut-process.section-space{padding-top:24px !important;padding-bottom:26px !important;}
  .process-card{padding:30px 20px 24px !important;}
  .flow-row.flow-row-compact{grid-template-columns:1fr !important;gap:22px !important;}
  .signs-band{padding:18px 14px !important;}
}

/* =========================================================
   CHANGE #17 — Section 2 process rail + signs strip refinement
   Scope: Why Gut Health Matters section only.
   Keeps approved compressed height from Change #16.
   ========================================================= */
.process-rail{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:34px !important;
  align-items:center !important;
  max-width:1120px !important;
  margin:0 auto 18px !important;
  position:relative !important;
}
.process-rail::before{
  content:'';
  position:absolute;
  left:12.5%;
  right:12.5%;
  top:50%;
  height:1px;
  transform:translateY(-50%);
  background:linear-gradient(90deg, rgba(15,46,42,.20), rgba(15,46,42,.42), rgba(15,46,42,.20));
  z-index:0;
}
.rail-step{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:38px;
  z-index:1;
}
.rail-step:not(:last-child)::after{
  content:'→';
  position:absolute;
  left:calc(100% + 5px);
  top:50%;
  transform:translate(-50%,-53%);
  font-family:'Satoshi','Inter',sans-serif;
  font-size:25px;
  line-height:1;
  color:rgba(15,46,42,.68);
  background:rgba(250,246,238,.84);
  padding:0 8px;
  z-index:2;
}
.rail-number{
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  min-height:36px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:var(--forest) !important;
  color:var(--cream) !important;
  opacity:1 !important;
  border:0 !important;
  box-shadow:0 8px 20px rgba(15,46,42,.13) !important;
  font-family:'Satoshi','Inter',sans-serif !important;
  font-size:15px !important;
  font-weight:900 !important;
  line-height:1 !important;
}
.rail-line{display:none !important;}
.flow-row.flow-row-compact{
  max-width:1120px !important;
  gap:34px !important;
}
.flow-row-compact .flow-step{
  text-align:center !important;
}
.flow-row-compact .flow-step h3,
.flow-row-compact .flow-step p{
  margin-left:auto !important;
  margin-right:auto !important;
}
.signs-band{
  background:linear-gradient(180deg, rgba(47,143,91,.085), rgba(47,143,91,.050)), rgba(246,241,232,.66) !important;
  border-color:rgba(47,143,91,.14) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.50), 0 12px 36px rgba(15,46,42,.035) !important;
}
.signs-row article{
  border-right-color:rgba(15,46,42,.145) !important;
}
.signs-row .mini-icon{
  width:42px !important;
  height:42px !important;
  padding:10px !important;
  background:rgba(255,255,255,.64) !important;
  border-color:rgba(15,46,42,.16) !important;
  box-shadow:0 6px 14px rgba(15,46,42,.045) !important;
}
.signs-row .mini-icon svg{
  stroke:rgba(15,46,42,.82) !important;
  stroke-width:2.75 !important;
}
.signs-band h3{
  color:rgba(15,46,42,.98) !important;
}
.signs-row span{
  color:rgba(15,46,42,.88) !important;
  font-weight:700 !important;
}
@media(max-width:1180px){
  .process-rail{display:none !important;}
}

/* =========================================================
   CHANGE #18A + #18B — page rhythm + Section 3 height test
   18A: Increase and standardize post-Section-2 inter-section spacing.
   18B: Reduce Section 3 internal vertical padding without shrinking the chew infographic.
   ========================================================= */

/* 18A — standard content-section gap after Section 2 */
.chew-showcase.section-space,
.transparent-section.section-space,
.visible-benefits.section-space,
.range.section-space{
  margin-top:14px !important;
}

/* 18B — make the chew showcase section slightly tighter while preserving image scale */
.chew-showcase.section-space{
  padding-top:28px !important;
  padding-bottom:32px !important;
}

.chew-card{
  padding:38px 42px 30px !important;
}

.chew-visual img{
  max-height:430px !important;
}

@media(max-width:760px){
  .chew-showcase.section-space,
  .transparent-section.section-space,
  .visible-benefits.section-space,
  .range.section-space{
    margin-top:10px !important;
  }
  .chew-card{
    padding:30px 20px 22px !important;
  }
}

/* =========================================================
   CHANGE #19A — ingredient table header row compression
   Scope: Transparent Ingredients category headers only.
   Goal: reduce coloured header-band height by approx. 10–15%
   without changing column widths, table body, copy, or section layout.
   ========================================================= */
.ingredient-category-head{
  height:76px !important;
  min-height:76px !important;
  padding:13px 14px 12px !important;
  gap:10px !important;
  align-items:center !important;
}
.ingredient-category-head .category-icon{
  width:40px !important;
  height:40px !important;
  flex:0 0 40px !important;
  padding:10px !important;
}
.ingredient-category-head h3{
  font-size:15px !important;
  line-height:1.02 !important;
  margin-bottom:3px !important;
  letter-spacing:.015em !important;
}
.ingredient-category-head em{
  font-size:10.5px !important;
  line-height:1.15 !important;
}

@media(max-width:760px){
  .ingredient-category-head{
    height:auto !important;
    min-height:68px !important;
    padding:12px 14px !important;
  }
}

/* =========================================================
   CHANGE #20A — Benefits strip emphasis
   Make visible benefit outcomes read stronger without changing section structure.
   ========================================================= */
.visible-benefits .benefits-row article{
  border-right-color:rgba(15,46,42,.20) !important;
}
.visible-benefits .benefits-row .mini-icon{
  width:54px !important;
  height:54px !important;
  padding:12px !important;
  margin-bottom:8px !important;
  background:rgba(255,255,255,.72) !important;
  border-color:rgba(15,46,42,.18) !important;
  box-shadow:0 10px 24px rgba(15,46,42,.035) !important;
}
.visible-benefits .benefits-row .mini-icon svg{
  stroke:var(--forest) !important;
  stroke-width:2.85 !important;
  opacity:1 !important;
}
.visible-benefits .benefits-row span{
  font-weight:800 !important;
  font-size:15.2px !important;
  line-height:1.18 !important;
  color:var(--forest) !important;
  letter-spacing:-.01em !important;
}
.visible-benefits .centered-kicker::after{
  opacity:.72 !important;
}

@media(max-width:760px){
  .visible-benefits .benefits-row .mini-icon{
    width:50px !important;
    height:50px !important;
  }
  .visible-benefits .benefits-row span{
    font-size:14.2px !important;
  }
}


/* =========================================================
   CHANGE #22B — Ingredient table cleanup
   Scope: shared product template CSS only.
   Goals:
   - prevent ugly mid-word breaks
   - improve ingredient/dose column widths
   - allow proper phrase wrapping
   - keep quantities aligned
   - preserve content and card-height consistency across SKUs
   ========================================================= */
.ingredient-category-row{
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}

.ingredient-category-row article{
  display: flex !important;
  flex-direction: column !important;
  min-height: 284px !important;
}

.ingredient-category-row ul{
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding: 14px 14px 13px !important;
}

.ingredient-category-row li{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(76px, max-content) !important;
  column-gap: 12px !important;
  align-items: start !important;
  min-height: 34px !important;
  padding: 6px 0 !important;
  overflow: visible !important;
}

.ingredient-category-row li span{
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: block !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  line-height: 1.18 !important;
  letter-spacing: -.018em !important;
}

.ingredient-category-row li b{
  min-width: 76px !important;
  justify-self: end !important;
  text-align: right !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  line-height: 1.18 !important;
  font-variant-numeric: tabular-nums !important;
}

@media(max-width: 1100px){
  .ingredient-category-row{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .ingredient-category-row article{
    min-height: 260px !important;
  }
}

@media(max-width: 620px){
  .ingredient-category-row{
    grid-template-columns: 1fr !important;
  }
  .ingredient-category-row article{
    min-height: auto !important;
  }
  .ingredient-category-row li{
    grid-template-columns: minmax(0, 1fr) minmax(68px, max-content) !important;
  }
  .ingredient-category-row li b{
    min-width: 68px !important;
  }
}

/* Navigation ease refinements */
.footer-link-row{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
  margin-top:14px;
}
.footer-link-row .footer-home{
  margin-top:0;
}
@media(max-width:680px){
  .footer-actions{
    text-align:left;
  }
  .footer-link-row{
    justify-content:flex-start;
  }
}