/* Shared, deliberately small compatibility layer for every product page. */
body.digestaid-product-page-active,
body.digestaid-product-page-active .dfp-page,
body.digestaid-product-page-active .dpp-compact-page {
  --ink: #f5f7fb;
  --text: #f5f7fb;
  --muted: #b7c1cf;
  --sub: #b7c1cf;
  --faint: #8797aa;
}

body.digestaid-product-page-active main h1,
body.digestaid-product-page-active main h2,
body.digestaid-product-page-active main h3 {
  color: #f5f7fb !important;
  opacity: 1 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.digestaid-product-page-active main .hero h1 span {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

body.digestaid-product-page-active .hero__intro,
body.digestaid-product-page-active .section-copy p,
body.digestaid-product-page-active .challenge-copy > p,
body.digestaid-product-page-active .capability-list p,
body.digestaid-product-page-active .benefit-list p,
body.digestaid-product-page-active .regulatory-note {
  color: #b7c1cf !important;
  opacity: 1 !important;
}

body.digestaid-product-page-active .hero__meta strong,
body.digestaid-product-page-active .intended-use__system strong,
body.digestaid-product-page-active .workflow-card h3,
body.digestaid-product-page-active .capability-list h3,
body.digestaid-product-page-active .evidence-card h3,
body.digestaid-product-page-active .benefit-list strong {
  color: #e2e8ef !important;
  opacity: 1 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.digestaid-product-page-active .hero__meta span,
body.digestaid-product-page-active .intended-use__system small,
body.digestaid-product-page-active .workflow-card p {
  color: #aab6c5 !important;
  opacity: 1 !important;
}

/* Keep product marks as signatures, not dominant hero artwork. */
body.digestaid-product-page-active .hero__copy > img,
body.digestaid-product-page-active .technology-logo,
body.digestaid-product-page-active .deep-capsule-logo,
body.digestaid-product-page-active .smart-node-logo,
body.digestaid-product-page-active .sonomind-logo,
body.digestaid-product-page-active .leak-logo,
body.digestaid-product-page-active .hpv-logo,
body.digestaid-product-page-active .precision-logo,
body.digestaid-product-page-active .smart-procto-logo {
  width: auto !important;
  max-width: min(220px, 54%) !important;
  max-height: 92px !important;
  margin-bottom: 28px !important;
  object-fit: contain !important;
  object-position: left center !important;
}

body.digestaid-product-leaksight .dfp-page {
  --cyan: #c6a0ff;
  --blue: #8c20ff;
  --line: rgba(198, 160, 255, .2);
}

body.digestaid-product-leaksight .eyebrow,
body.digestaid-product-leaksight .status,
body.digestaid-product-leaksight .button span,
body.digestaid-product-leaksight .text-link span,
body.digestaid-product-leaksight .accuracy strong,
body.digestaid-product-leaksight .capability-list article > i,
body.digestaid-product-leaksight .benefit-list i {
  color: #c6a0ff !important;
}

body.digestaid-product-leaksight .button {
  border-color: #a95bff !important;
}

body.digestaid-product-leaksight .hero__glow {
  background: radial-gradient(circle, rgba(140, 32, 255, .2), transparent 68%) !important;
}

body.digestaid-product-precisionrect .dfp-page {
  --cyan: #ff668f;
  --blue: #ff9188;
  --line: rgba(255, 102, 143, .22);
}

body.digestaid-product-precisionrect .eyebrow,
body.digestaid-product-precisionrect .status,
body.digestaid-product-precisionrect .button span,
body.digestaid-product-precisionrect .text-link span,
body.digestaid-product-precisionrect .accuracy strong,
body.digestaid-product-precisionrect .capability-list article > i,
body.digestaid-product-precisionrect .benefit-list i {
  color: #ff7898 !important;
}

body.digestaid-product-precisionrect .button {
  border-color: #ff668f !important;
}

body.digestaid-product-precisionrect .hero__glow {
  background: radial-gradient(circle, rgba(255, 80, 126, .2), transparent 68%) !important;
}
.dfp-page h1,
.dfp-page h2,
.dfp-page h3 {
  color: var(--ink, #eff2f6) !important;
  opacity: 1 !important;
  text-wrap: balance;
  hyphens: none;
  -webkit-text-fill-color: currentColor !important;
}

.dfp-page .hero h1 span {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

.keep-together {
  white-space: nowrap;
}

.dfp-page > section[id],
.dpp-compact-page > section[id] {
  scroll-margin-top: 76px;
}

/* A product must remain complete even if JavaScript or IntersectionObserver is
   unavailable. Page-specific reveal rules are neutralised, then the shared
   enhancement animates a section only after it is already visible. */
body.digestaid-product-page-active .dfp-page .section-transition,
body.digestaid-product-page-active .dfp-page .section-transition > *,
body.digestaid-product-page-active .dfp-page [data-reveal],
body.digestaid-product-page-active .dpp-compact-page > section {
  opacity: 1 !important;
  filter: none !important;
  transform: none;
}

body.digestaid-product-page-active.has-dpp-scroll-motion .dpp-scroll-section {
  opacity: .38 !important;
  filter: blur(3px) !important;
  transform: translate3d(0, 24px, 0) scale(.996) !important;
  transition:
    opacity .72s cubic-bezier(.16, 1, .3, 1),
    filter .72s cubic-bezier(.16, 1, .3, 1),
    transform .82s cubic-bezier(.16, 1, .3, 1) !important;
  will-change: opacity, filter, transform;
}

body.digestaid-product-page-active.has-dpp-scroll-motion .dpp-scroll-section.is-visible {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

/* The visible mobile transition happens on the section's real content, not
   only on its background. This also reveals product imagery made from CSS
   panels instead of <img> elements. */
body.digestaid-product-page-active.has-dpp-scroll-motion .dpp-scroll-section > .dpp-scroll-child {
  opacity: 0 !important;
  visibility: visible !important;
  filter: blur(8px) !important;
  transform: translate3d(0, 32px, 0) scale(.986) !important;
  transition:
    opacity .7s cubic-bezier(.16, 1, .3, 1) var(--dpp-child-delay, 0ms),
    filter .7s cubic-bezier(.16, 1, .3, 1) var(--dpp-child-delay, 0ms),
    transform .82s cubic-bezier(.16, 1, .3, 1) var(--dpp-child-delay, 0ms) !important;
  will-change: opacity, filter, transform;
}

body.digestaid-product-page-active.has-dpp-scroll-motion .dpp-scroll-section.is-visible > .dpp-scroll-child {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

body.digestaid-product-page-active .dpp-scroll-section img,
body.digestaid-product-page-active .dpp-scroll-section picture,
body.digestaid-product-page-active .dpp-scroll-section figure {
  visibility: visible !important;
}

/* Some supplied product styles target the bare `footer` element and turn the
   shared footer itself into a grid. The home component is a block containing
   its own internal grid, so restore only that missing browser default. */
body.digestaid-product-page-active footer.digestaid-global-footer {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

@keyframes dpp-section-enter {
  from {
    opacity: .35;
    filter: blur(5px);
    transform: translate3d(0, 34px, 0) scale(.994);
  }
  to {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

/* Restore the canonical desktop header after legacy product declarations.
   The footer is intentionally not styled here: it is owned entirely by the
   Homepage Extension, making it pixel-identical to the home page. */
@media (min-width: 901px) {
  body.digestaid-global-chrome-enabled .digestaid-global-header {
    position: sticky;
    top: 0;
    display: flex;
    width: 100%;
    height: 58px;
    padding: 0 max(24px, calc((100% - 1040px) / 2));
    align-items: center;
    justify-content: space-between;
  }

  body.admin-bar.digestaid-global-chrome-enabled .digestaid-global-header {
    top: 32px;
  }

  body.digestaid-global-chrome-enabled .digestaid-global-header-logo {
    width: 140px;
    max-height: none;
    margin: 0;
  }

  body.digestaid-global-chrome-enabled .digestaid-global-nav {
    position: static;
    display: flex;
    width: auto;
    min-width: 0;
    padding: 0;
    flex-direction: row;
    gap: 30px;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  body.digestaid-global-chrome-enabled .digestaid-global-nav a {
    padding: 0;
    color: #d9dfe9 !important;
  }

  body.digestaid-global-chrome-enabled .digestaid-global-nav a:hover,
  body.digestaid-global-chrome-enabled .digestaid-global-nav a:focus-visible,
  body.digestaid-global-chrome-enabled .digestaid-global-nav a[aria-current="page"] {
    color: #73f6f9 !important;
  }

  body.digestaid-global-chrome-enabled .digestaid-global-menu-toggle {
    display: none;
  }
}

/* The original product layouts used 190px. This closes the requested 40px
   gap without changing their internal grids or artwork. */
@media (min-width: 981px) {
  body.digestaid-product-page-active .dfp-page > .hero {
    padding-top: 150px !important;
  }
}

@media (max-width: 980px) {
  body.digestaid-product-page-active .dfp-page > .hero {
    padding-top: 100px !important;
  }
}

@media (max-width: 640px) {
  body.digestaid-product-page-active .dfp-page > .hero {
    padding-top: 105px !important;
  }

  /* Keep the scroll-progress signal visible on mobile. Legacy product styles
     hid it completely, so the background narrative appeared static. */
  body.digestaid-product-page-active .page-timeline {
    display: block !important;
    top: 112px !important;
    right: 3px !important;
    bottom: 24px !important;
    width: 12px !important;
    opacity: .82;
    pointer-events: none !important;
  }

  body.digestaid-product-page-active .page-timeline__track {
    right: auto !important;
    left: 5px !important;
  }

  body.digestaid-product-page-active .page-timeline > i {
    left: 3px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.digestaid-product-page-active.has-dpp-scroll-motion .dpp-scroll-section,
  body.digestaid-product-page-active.has-dpp-scroll-motion .dpp-scroll-section.is-visible,
  body.digestaid-product-page-active.has-dpp-scroll-motion .dpp-scroll-section > .dpp-scroll-child,
  body.digestaid-product-page-active.has-dpp-scroll-motion .dpp-scroll-section.is-visible > .dpp-scroll-child {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Continuous editorial hand-off. Unlike the old binary observer, this follows
   the actual viewport position, so text fades in on approach and fades out as
   the next product section takes focus on both desktop and mobile. */
body.digestaid-product-page-active [data-dpp-scroll-copy] {
  opacity: var(--dpp-copy-opacity, 1) !important;
  visibility: visible !important;
  filter: blur(var(--dpp-copy-blur, 0px)) !important;
  transform:
    translate3d(
      var(--dpp-copy-x, 0px),
      var(--dpp-copy-y, 0px),
      0
    )
    scale(var(--dpp-copy-scale, 1)) !important;
  transform-origin: 50% 50%;
  transition: none !important;
  will-change: opacity, filter, transform;
}

@media (prefers-reduced-motion: reduce) {
  body.digestaid-product-page-active [data-dpp-scroll-copy] {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

body.digestaid-product-page-active .digestaid-global-menu-toggle,
body.digestaid-product-page-active .digestaid-global-menu-toggle:hover,
body.digestaid-product-page-active .digestaid-global-menu-toggle:focus,
body.digestaid-product-page-active .digestaid-global-menu-toggle:active,
body.digestaid-product-page-active .digestaid-global-menu-toggle[aria-expanded="true"] {
  border-color: transparent !important;
  background: transparent !important;
  color: #73f6f9 !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none !important;
  appearance: none !important;
  outline: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
}

body.digestaid-product-page-active .digestaid-global-menu-toggle span,
body.digestaid-product-page-active .digestaid-global-menu-toggle:hover span,
body.digestaid-product-page-active .digestaid-global-menu-toggle:active span,
body.digestaid-product-page-active .digestaid-global-menu-toggle[aria-expanded="true"] span {
  background: #73f6f9 !important;
  background-color: #73f6f9 !important;
  box-shadow: none !important;
}

html body.digestaid-global-chrome-enabled header.digestaid-global-header button.digestaid-global-menu-toggle:is(:hover, :focus, :focus-visible, :active, [aria-expanded="true"]) {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #73f6f9 !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

html body.digestaid-global-chrome-enabled header.digestaid-global-header button.digestaid-global-menu-toggle:is(:hover, :focus, :focus-visible, :active, [aria-expanded="true"]) span {
  background: #73f6f9 !important;
  background-color: #73f6f9 !important;
  box-shadow: none !important;
}

body.digestaid-product-page-active .digestaid-global-header.is-menu-open .digestaid-global-nav a:hover,
body.digestaid-product-page-active .digestaid-global-header.is-menu-open .digestaid-global-nav a:focus-visible,
body.digestaid-product-page-active .digestaid-global-header.is-menu-open .digestaid-global-nav a:active,
body.digestaid-product-page-active .digestaid-global-header.is-menu-open .digestaid-global-nav a[aria-current="page"] {
  color: #73f6f9 !important;
  background: transparent !important;
}