/* TwinPare Health & Fitness Light Mode layer hardening — 2026-09-02
 *
 * The visual-density layer intentionally uses dark photographic overlays in Dark
 * Mode. In Light Mode those pseudo-elements must be recolored as well; changing
 * only the parent background leaves a dark overlay above otherwise dark Light
 * Mode typography. Keep imagery, but put it behind genuinely light surfaces.
 */

html[data-color-mode="light"] body.theme-health::before {
  opacity: .065 !important;
  filter: saturate(.72) contrast(.92) brightness(1.10) !important;
}

html[data-color-mode="light"] body.theme-health .health-v2__hero::before {
  background:
    linear-gradient(90deg,rgba(244,251,253,.98) 0%,rgba(244,251,253,.86) 26%,rgba(244,251,253,.38) 62%,rgba(244,251,253,.10) 100%),
    linear-gradient(180deg,rgba(244,251,253,.08),rgba(244,251,253,.56) 100%),
    url('/images/twins-hub/science/hero-v2.jpg') left 38%/cover no-repeat !important;
  opacity: .16 !important;
  filter: saturate(.78) contrast(.92) brightness(1.12) !important;
}

/* Data → context diagram: preserve the product screenshot as atmosphere while
 * making the actual information surface light and readable. */
html[data-color-mode="light"] body.theme-health .health-v2__flow {
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(0,126,152,.16) !important;
  box-shadow: 0 18px 46px rgba(38,70,82,.08) !important;
}

html[data-color-mode="light"] body.theme-health .health-v2__flow::before {
  opacity: .075 !important;
  filter: saturate(.72) brightness(1.12) !important;
}

html[data-color-mode="light"] body.theme-health .health-v2__flow::after {
  background: linear-gradient(135deg,rgba(255,255,255,.94),rgba(239,248,252,.91)) !important;
}

html[data-color-mode="light"] body.theme-health .health-v2__flow :is(strong,em) {
  color: #21192D !important;
  background: rgba(109,70,182,.09) !important;
}

/* Six capability cards. Dark Mode keeps the cinematic dark cards; Light Mode
 * keeps the image header but fades into a white information surface. */
html[data-color-mode="light"] body.theme-health .health-v2__area {
  color: #15202A !important;
  background: rgba(250,254,255,.97) !important;
  border-color: rgba(0,126,152,.16) !important;
  box-shadow: 0 16px 40px rgba(38,70,82,.08) !important;
}

html[data-color-mode="light"] body.theme-health .health-v2__area::before {
  opacity: .56 !important;
  border-bottom-color: rgba(0,126,152,.12) !important;
  filter: saturate(.88) brightness(1.03) !important;
}

html[data-color-mode="light"] body.theme-health .health-v2__area::after {
  background: linear-gradient(to bottom,rgba(250,254,255,.08) 0%,rgba(250,254,255,.94) 68px,rgba(250,254,255,.995) 132px) !important;
}

html[data-color-mode="light"] body.theme-health .health-v2__area h3 {
  color: #15202A !important;
  text-shadow: none !important;
}

html[data-color-mode="light"] body.theme-health .health-v2__area p {
  color: #56616E !important;
  text-shadow: none !important;
}

html[data-color-mode="light"] body.theme-health .health-v2__area small {
  color: #006A80 !important;
  text-shadow: none !important;
}

/* Individual-use image header should fade into the light card instead of ending
 * in a dark strip. */
html[data-color-mode="light"] body.theme-health .health-v2__individual-inner::before {
  background:
    linear-gradient(to bottom,rgba(255,255,255,.03),rgba(250,254,255,.96)),
    url('/images/apps/health/latest-2026-08-26/home-energy-focus.webp') center 29%/cover no-repeat !important;
  opacity: .62 !important;
  filter: saturate(.84) brightness(1.04) !important;
}

/* Twin research bridge: this was the second dark pseudo-layer visible in the
 * Chrome screenshots. Keep the twin image subtle, but make the panel light. */
html[data-color-mode="light"] body.theme-health .health-v2__research-card {
  background: rgba(248,246,252,.96) !important;
  border-color: rgba(92,79,156,.16) !important;
  box-shadow: 0 16px 42px rgba(46,36,78,.08) !important;
}

html[data-color-mode="light"] body.theme-health .health-v2__research-card::before {
  opacity: .09 !important;
  filter: saturate(.72) brightness(1.14) !important;
}

html[data-color-mode="light"] body.theme-health .health-v2__research-card::after {
  background: linear-gradient(135deg,rgba(248,246,252,.96),rgba(239,248,252,.91)) !important;
}

html[data-color-mode="light"] body.theme-health .health-v2__research-card :is(strong,h2,h3) {
  color: #21192D !important;
  text-shadow: none !important;
}

html[data-color-mode="light"] body.theme-health .health-v2__research-card :is(span,p) {
  color: #5B5568 !important;
  text-shadow: none !important;
}

html[data-color-mode="light"] body.theme-health .health-v2__research-card b {
  color: #6540A8 !important;
  text-shadow: none !important;
}

/* Real-product proof cards are below the main Health narrative. Their media
 * wells intentionally stay dark so app screenshots retain contrast; the text
 * surfaces, labels and boundary note must follow the Light Mode palette. */
html[data-color-mode="light"] body.theme-health .product-proof__eyebrow {
  color: #6540A8 !important;
}

html[data-color-mode="light"] body.theme-health .product-proof__head h2,
html[data-color-mode="light"] body.theme-health .proof-card h3,
html[data-color-mode="light"] body.theme-health .product-proof__boundary strong {
  color: #171322 !important;
}

html[data-color-mode="light"] body.theme-health :is(.product-proof__head p,.proof-card p,.product-proof__boundary p) {
  color: #5B5568 !important;
}

html[data-color-mode="light"] body.theme-health .proof-card {
  background: rgba(255,255,255,.94) !important;
  border-color: rgba(0,126,152,.15) !important;
  box-shadow: 0 18px 46px rgba(38,70,82,.08) !important;
}

html[data-color-mode="light"] body.theme-health .proof-card__visual {
  border-bottom: 1px solid rgba(0,126,152,.13) !important;
}

html[data-color-mode="light"] body.theme-health .proof-card__title-row span {
  color: #006A80 !important;
  background: rgba(0,126,152,.10) !important;
  border: 1px solid rgba(0,126,152,.16) !important;
}

html[data-color-mode="light"] body.theme-health .product-proof__boundary {
  background: linear-gradient(135deg,rgba(109,70,182,.07),rgba(0,126,152,.055)) !important;
  border-color: rgba(92,79,156,.16) !important;
  box-shadow: 0 12px 32px rgba(46,36,78,.05) !important;
}

@media (max-width: 620px) {
  html[data-color-mode="light"] body.theme-health .health-v2__area {
    background: rgba(250,254,255,.98) !important;
  }

  html[data-color-mode="light"] body.theme-health .health-v2__area::before {
    opacity: .46 !important;
    filter: saturate(.82) brightness(1.06) !important;
  }

  html[data-color-mode="light"] body.theme-health .health-v2__area::after {
    background: linear-gradient(to bottom,rgba(250,254,255,.10) 0%,rgba(250,254,255,.96) 58px,rgba(250,254,255,1) 112px) !important;
  }

  html[data-color-mode="light"] body.theme-health .health-v2__area :is(h3,p,.health-v2__badge) {
    text-shadow: none !important;
  }
}