/* Light section surfaces with restrained neutral-gray decorative facets. */
:root {
  --section-faceted-gray: url("/assets/section-faceted-gray.svg?v=6");
  --section-faceted-left: url("/assets/section-faceted-left.svg?v=6");
  --section-faceted-cross: url("/assets/section-faceted-cross.svg?v=6");
  --section-faceted-strata: url("/assets/section-faceted-strata.svg?v=6");
}

html.light[data-theme="light"] body:not(#faceted-section-surface-override) main > :is(
  .light-block-tone-2,
  .light-block-tone-3
) {
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.14), rgba(91, 103, 114, 0.025)),
    var(--section-faceted-art, var(--section-faceted-gray)) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html.light[data-theme="light"] body:not(#faceted-section-surface-override) main > .light-block-tone-2 {
  background-color: #f3f4f5 !important;
  background-position: center, 74% center !important;
}

html.light[data-theme="light"] body:not(#faceted-section-surface-override) main > .light-block-tone-3 {
  background-color: #e9ecef !important;
  background-position: center, 58% center !important;
}

/* Homepage has intentionally high-specificity legacy artwork rules. */
html.light[data-theme="light"] body.home-page:not(#faceted-gray-a):not(#faceted-gray-b):not(#faceted-gray-c):not(#faceted-gray-d) main > :is(
  #about#about,
  #why-pro-lex#why-pro-lex
) {
  background-color: #f3f4f5 !important;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.14), rgba(91, 103, 114, 0.025)),
    var(--section-faceted-art, var(--section-faceted-gray)) !important;
  background-position: center, 74% center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html.light[data-theme="light"] body.home-page:not(#faceted-gray-a):not(#faceted-gray-b):not(#faceted-gray-c):not(#faceted-gray-d) main > :is(
  #services#services,
  #faq#faq
) {
  background-color: #e9ecef !important;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.14), rgba(91, 103, 114, 0.025)),
    var(--section-faceted-art, var(--section-faceted-gray)) !important;
  background-position: center, 58% center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* Sitewide surface system: every intentionally toned page section uses facets. */
html.light[data-theme="light"] body:not(#faceted-site-a):not(#faceted-site-b):not(#faceted-site-c):not(#faceted-site-d):not(#faceted-site-e):not(#faceted-site-f) main :is(
  .light-block-tone-1.light-block-tone-1,
  .light-block-tone-2.light-block-tone-2,
  .light-block-tone-3.light-block-tone-3
) {
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.16), rgba(77, 89, 101, 0.026)),
    var(--section-faceted-art, var(--section-faceted-gray)) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html.light[data-theme="light"] body:not(#faceted-site-a):not(#faceted-site-b):not(#faceted-site-c):not(#faceted-site-d):not(#faceted-site-e):not(#faceted-site-f) main .light-block-tone-1.light-block-tone-1 {
  background-color: #f8f9fa !important;
  background-position: center, 82% center !important;
}

html.light[data-theme="light"] body:not(#faceted-site-a):not(#faceted-site-b):not(#faceted-site-c):not(#faceted-site-d):not(#faceted-site-e):not(#faceted-site-f) main .light-block-tone-2.light-block-tone-2 {
  background-color: #f1f3f5 !important;
  background-position: center, 70% center !important;
}

html.light[data-theme="light"] body:not(#faceted-site-a):not(#faceted-site-b):not(#faceted-site-c):not(#faceted-site-d):not(#faceted-site-e):not(#faceted-site-f) main .light-block-tone-3.light-block-tone-3 {
  background-color: #e7eaed !important;
  background-position: center, 58% center !important;
}

/* A neutral faceted canvas also fills gaps between the explicit page sections. */
html.light[data-theme="light"] body:not(#faceted-site-canvas-a):not(#faceted-site-canvas-b) main {
  background-color: #eef0f2 !important;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(73, 85, 97, 0.022)),
    var(--section-faceted-art, var(--section-faceted-gray)) !important;
  background-position: center, 76% top !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* Homepage: alternate visual weight instead of repeating one right-heavy motif. */
html.light[data-theme="light"] body.home-page:not(#facet-home-a):not(#facet-home-b):not(#facet-home-c):not(#facet-home-d):not(#facet-home-e):not(#facet-home-f) main > :is(
  .trust-bar,
  #about#about,
  #services#services,
  #popular#popular,
  #why-pro-lex#why-pro-lex,
  #articles#articles,
  #faq#faq,
  .doubts-section
) {
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.16), rgba(77, 89, 101, 0.026)),
    var(--section-faceted-art, var(--section-faceted-gray)) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html.light[data-theme="light"] body.home-page main > .trust-bar {
  --section-faceted-art: var(--section-faceted-left);
}

html.light[data-theme="light"] body.home-page main > #about {
  --section-faceted-art: var(--section-faceted-gray);
}

html.light[data-theme="light"] body.home-page main > #services {
  --section-faceted-art: var(--section-faceted-cross);
}

html.light[data-theme="light"] body.home-page main > #popular {
  --section-faceted-art: var(--section-faceted-strata);
}

html.light[data-theme="light"] body.home-page main > #why-pro-lex {
  --section-faceted-art: var(--section-faceted-left);
}

html.light[data-theme="light"] body.home-page main #articles {
  --section-faceted-art: var(--section-faceted-gray);
}

/* Articles are nested inside the work/pricing flow and have a legacy ID-heavy rule. */
html.light[data-theme="light"] body.home-page:not(#facet-articles-a):not(#facet-articles-b):not(#facet-articles-c):not(#facet-articles-d):not(#facet-articles-e):not(#facet-articles-f):not(#facet-articles-g):not(#facet-articles-h) main#top #why-pro-lex#why-pro-lex #articles#articles {
  background-color: #f8f9fa !important;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.16), rgba(77, 89, 101, 0.026)),
    var(--section-faceted-gray) !important;
  background-position: center, 76% center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html.light[data-theme="light"] body.home-page main > #faq {
  --section-faceted-art: var(--section-faceted-cross);
}

html.light[data-theme="light"] body.home-page main > .doubts-section {
  --section-faceted-art: var(--section-faceted-strata);
}

html.light[data-theme="light"] body.home-page main #reasons {
  --section-faceted-art: var(--section-faceted-gray);
}

html.light[data-theme="light"] body.home-page main #workflow {
  --section-faceted-art: var(--section-faceted-cross);
}

html.light[data-theme="light"] body.home-page main #pricing {
  --section-faceted-art: var(--section-faceted-strata);
}

/* Internal pages: each major section type receives a distinct composition. */
html.light[data-theme="light"] body main :is(
  .service-archive-page,
  .service-quick-overview,
  .subscription-plans-section,
  .article-summary,
  .legal-page
) {
  --section-faceted-art: var(--section-faceted-gray);
}

html.light[data-theme="light"] body main :is(
  .service-detail-page,
  .service-choice-panel,
  .subscription-benefits,
  .article-archive-page,
  .contacts-page
) {
  --section-faceted-art: var(--section-faceted-left);
}

html.light[data-theme="light"] body main :is(
  .pricing-page,
  .pricing-decision-panel,
  .subscription-comparison-section,
  .contacts-panel.light-block-tone-2,
  .service-final-cta
) {
  --section-faceted-art: var(--section-faceted-cross);
}

html.light[data-theme="light"] body main :is(
  .subscription-hero,
  .subscription-faq-section,
  .subscription-final-cta,
  .pricing-choice-cta,
  .contacts-panel.light-block-tone-3
) {
  --section-faceted-art: var(--section-faceted-strata);
}

/* Price directions are semantic sections without tone classes; include them too. */
html.light[data-theme="light"] body:not(#facet-pricing-a):not(#facet-pricing-b) main .pricing-direction {
  background-color: rgba(248, 249, 250, 0.76) !important;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.26), rgba(84, 96, 107, 0.02)),
    var(--section-faceted-gray) !important;
  background-position: center, 78% center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html.light[data-theme="light"] body main .pricing-direction:nth-of-type(4n + 2) {
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.26), rgba(84, 96, 107, 0.02)),
    var(--section-faceted-left) !important;
}

html.light[data-theme="light"] body main .pricing-direction:nth-of-type(4n + 3) {
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.26), rgba(84, 96, 107, 0.02)),
    var(--section-faceted-cross) !important;
}

html.light[data-theme="light"] body main .pricing-direction:nth-of-type(4n) {
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.26), rgba(84, 96, 107, 0.02)),
    var(--section-faceted-strata) !important;
}

/* Pricing directions live in separate wrappers, so distribute their weight explicitly. */
html.light[data-theme="light"] body:not(#facet-price-a):not(#facet-price-b):not(#facet-price-c) main :is(
  #corporate-law#corporate-law,
  #contracts#contracts
) {
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.26), rgba(84, 96, 107, 0.02)),
    var(--section-faceted-left) !important;
}

html.light[data-theme="light"] body:not(#facet-price-a):not(#facet-price-b):not(#facet-price-c) main :is(
  #digital-business#digital-business,
  #intellectual-property#intellectual-property
) {
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.26), rgba(84, 96, 107, 0.02)),
    var(--section-faceted-cross) !important;
}

html.light[data-theme="light"] body:not(#facet-price-a):not(#facet-price-b):not(#facet-price-c) main #labor-law-hr#labor-law-hr {
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.26), rgba(84, 96, 107, 0.02)),
    var(--section-faceted-strata) !important;
}

html.light[data-theme="light"] body main .pricing-decision-panel.pricing-decision-panel {
  --section-faceted-art: var(--section-faceted-left);
}

html.light[data-theme="light"] body main .subscription-final-cta.subscription-final-cta {
  --section-faceted-art: var(--section-faceted-gray);
}

/* Keep foreground panels crisp against the faceted field. */
html.light[data-theme="light"] body main > :is(.light-block-tone-2, .light-block-tone-3) :is(
  .area-card,
  .service-package-card,
  .reason-item,
  .workflow-step-surface,
  details
) {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

@media (max-width: 980px) {
  html.light[data-theme="light"] body:not(#faceted-section-surface-override) main > :is(
    .light-block-tone-2,
    .light-block-tone-3
  ) {
    background-position: center, 66% center !important;
    background-size: auto, auto 100% !important;
  }
}

@media (max-width: 680px) {
  html.light[data-theme="light"] body:not(#faceted-section-surface-override) main > :is(
    .light-block-tone-2,
    .light-block-tone-3
  ) {
    background-position: center, 61% center !important;
    background-size: auto, auto 76% !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  html.light[data-theme="light"] body main > :is(.light-block-tone-2, .light-block-tone-3) :is(
    .area-card,
    .service-package-card,
    .reason-item,
    .workflow-step-surface,
    details
  ) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}