/* Phase 23: Homepage only at all viewport widths. Existing hover/slider behaviors preserved. */
  body.home #root .section-reveal,
  body.home #root .section-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Article/product pages and dark mode keep their existing palette. */
  html:not(.dark) body.home #root {
    --muted-foreground: #5f6c7e;
  }
  html:not(.dark) body.home #root .section-reveal .mergan-long-copy {
    color: #5f6c7e;
  }
  /* CTA with a dark background: restore the original contrast-safe light text. */
  html:not(.dark) body.home #root .section-reveal .text-\[\#C2D2E2\].mergan-long-copy,
  html:not(.dark) body.home #root .text-\[\#C2D2E2\].mergan-long-copy {
    color: #c2d2e2;
  }
  html:not(.dark) body.home #root .text-\[\#1A8DD4\] {
    color: #136fa9;
  }

/* Mobile and tablet Lighthouse: the small eyebrow above the hero has a
   light secondary background. This exact utility class is used by React. */
html:not(.dark) body.home #root .mergan-hero-slide__content > .mb-3.text-\[\#1A8DD4\] {
  color: #136fa9;
}
/* A small numeric label in the homepage essence carousel. */
html:not(.dark) body.home #root .mergan-home-essence__count {
  color: #5f6c7e;
}