/* Final global contrast pass for supporting copy in the light theme. */
html.light[data-theme="light"] body:not(#text-contrast-scope) {
  --text-muted: #3c4b54 !important;
  --text-muted-rgb: 60, 75, 84 !important;
  --light-muted: #3c4b54 !important;
}

html.light[data-theme="light"] body:not(#text-contrast-scope) :where(p, li, small) {
  color: #3c4b54 !important;
}

/* Keep only intentionally dark CTA and article surfaces light. */
html.light[data-theme="light"] body:not(#text-contrast-scope) :where(
  .cta,
  .service-final-cta,
  .subscription-final-cta,
  .article-hero,
  .site-footer
) :where(p, li, small) {
  color: rgba(var(--dark-muted-rgb), 0.88) !important;
}

/* Article cards use a deliberately dark editorial treatment in light mode. */
html.light[data-theme="light"] body:not(#text-contrast-scope) .article-card :where(p, li, small) {
  color: #ffffff !important;
}

/* Page-level hero descriptions use the same supporting-copy color as content sections. */
html.light[data-theme="light"] body:not(#text-contrast-scope) :where(
  .hero > .container > p,
  .service-hero > div > span,
  .pricing-hero > div > span,
  .contacts-hero > div > span
) {
  color: #3c4b54 !important;
}

/* Raise the contrast of supporting copy in components with their own muted-color rules. */
html.light[data-theme="light"] body:not(#text-contrast-scope) #about p,
html.light[data-theme="light"] body:not(#text-contrast-scope) #services .service-package-card p,
html.light[data-theme="light"] body:not(#text-contrast-scope) #services .service-package-card li,
html.light[data-theme="light"] body:not(#text-contrast-scope) #popular .service-package-card p,
html.light[data-theme="light"] body:not(#text-contrast-scope) #popular .service-package-card li,
html.light[data-theme="light"] body:not(#text-contrast-scope) .service-directory-card p,
html.light[data-theme="light"] body:not(#text-contrast-scope) .service-directory-card li,
html.light[data-theme="light"] body:not(#text-contrast-scope) #why-pro-lex p,
html.light[data-theme="light"] body:not(#text-contrast-scope) #why-pro-lex li,
html.light[data-theme="light"] body:not(#text-contrast-scope) .reason-item p,
html.light[data-theme="light"] body:not(#text-contrast-scope) .reason-outcome p,
html.light[data-theme="light"] body:not(#text-contrast-scope) .section-copy p,
html.light[data-theme="light"] body:not(#text-contrast-scope) .reasons-intro {
  color: #3c4b54 !important;
}

/* Match homepage service-card hover states to the service-directory cards. */
html[data-theme="light"] body :where(
  #services .service-package-card,
  #services .area-card,
  #popular .service-package-card,
  #popular .area-card
),
html:not([data-theme="light"]) body :where(
  #services .service-package-card,
  #services .area-card,
  #popular .service-package-card,
  #popular .area-card
) {
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    background-image 180ms ease,
    box-shadow 180ms ease,
    transform 220ms ease !important;
}

html.light[data-theme="light"] body:not(#text-contrast-scope) #services .service-package-card:hover,
html.light[data-theme="light"] body:not(#text-contrast-scope) #services .service-package-card:focus-within,
html.light[data-theme="light"] body:not(#text-contrast-scope) #services .area-card:hover,
html.light[data-theme="light"] body:not(#text-contrast-scope) #services .area-card:focus-within,
html.light[data-theme="light"] body:not(#text-contrast-scope) #popular .service-package-card:hover,
html.light[data-theme="light"] body:not(#text-contrast-scope) #popular .service-package-card:focus-within,
html.light[data-theme="light"] body:not(#text-contrast-scope) #popular .area-card:hover,
html.light[data-theme="light"] body:not(#text-contrast-scope) #popular .area-card:focus-within {
  border-color: rgba(var(--light-graphite-rgb), 0.24) !important;
  background-color: var(--light-card-surface) !important;
  background-image: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 14px 30px rgba(var(--light-graphite-rgb), 0.12) !important;
  transform: none !important;
}

/* The reference card has a quiet surface glow, not a pointer-following gradient. */
html.light[data-theme="light"] body:not(#text-contrast-scope) #services .service-package-card:hover::after,
html.light[data-theme="light"] body:not(#text-contrast-scope) #services .service-package-card:focus-within::after,
html.light[data-theme="light"] body:not(#text-contrast-scope) #services .area-card:hover::after,
html.light[data-theme="light"] body:not(#text-contrast-scope) #services .area-card:focus-within::after,
html.light[data-theme="light"] body:not(#text-contrast-scope) #popular .service-package-card:hover::after,
html.light[data-theme="light"] body:not(#text-contrast-scope) #popular .service-package-card:focus-within::after,
html.light[data-theme="light"] body:not(#text-contrast-scope) #popular .area-card:hover::after,
html.light[data-theme="light"] body:not(#text-contrast-scope) #popular .area-card:focus-within::after {
  opacity: 0 !important;
  background: none !important;
}

html:not([data-theme="light"]) body:not(#text-contrast-scope) #services .service-package-card:hover,
html:not([data-theme="light"]) body:not(#text-contrast-scope) #services .service-package-card:focus-within,
html:not([data-theme="light"]) body:not(#text-contrast-scope) #services .area-card:hover,
html:not([data-theme="light"]) body:not(#text-contrast-scope) #services .area-card:focus-within,
html:not([data-theme="light"]) body:not(#text-contrast-scope) #popular .service-package-card:hover,
html:not([data-theme="light"]) body:not(#text-contrast-scope) #popular .service-package-card:focus-within,
html:not([data-theme="light"]) body:not(#text-contrast-scope) #popular .area-card:hover,
html:not([data-theme="light"]) body:not(#text-contrast-scope) #popular .area-card:focus-within {
  z-index: 1 !important;
  border-color: rgba(var(--gold-rgb), 0.52) !important;
  background-color: var(--graphite-card-hover) !important;
  background-image: none !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(var(--gold-rgb), 0.12) !important;
  transform: translateY(-2px) !important;
}