@layer classic-backgrounds {
  html:not([data-catalog-skin="glass"]) body.office-catalog-dle:is(:has(main#top.product-page), :has(main.catalog-home-page)) {
    --classic-canvas: #f7f8fa;
    --classic-paper: #fafbfc;
    --classic-apps-paper: #f8fafc;
    --classic-faq-paper: #f8f6f8;
    --classic-line: #dfe5ec;
    --classic-line-soft: rgba(91, 111, 135, .1);
    --classic-highlight: rgba(255, 255, 255, .78);
    --classic-divider: rgba(76, 97, 120, .1);
    --classic-divider-highlight: rgba(255, 255, 255, .5);
    --classic-divider-inset: inset 0 1px 0 var(--classic-divider-highlight);
    --classic-surface-header:
      radial-gradient(560px 190px at 10% 0%, rgba(24, 90, 189, .04), transparent 74%),
      radial-gradient(480px 180px at 82% 0%, rgba(105, 85, 178, .025), transparent 72%),
      linear-gradient(180deg, #fbfaf8 0%, #fafbfc 100%);
    --classic-surface-breadcrumbs: linear-gradient(90deg, #f3f6fa 0%, #f6f6f8 54%, #f3f7f7 100%);
    --classic-surface-hero:
      radial-gradient(70% 78% at 8% 0%, rgba(53, 121, 203, .055), transparent 74%),
      radial-gradient(62% 68% at 98% 32%, rgba(116, 102, 186, .035), transparent 75%),
      linear-gradient(135deg, #f3f7fb 0%, #fafaf9 54%, #f5f7fa 100%);
    --classic-surface-trust: linear-gradient(90deg, #eef3f8 0%, #f3f4f8 52%, #eef5f5 100%);
    --classic-surface-facts:
      radial-gradient(620px 260px at 10% 18%, rgba(69, 119, 174, .018), transparent 74%),
      linear-gradient(135deg, #fbfaf8 0%, #fff 58%, #fafbfd 100%);
    --classic-surface-versions:
      radial-gradient(880px 420px at 2% 0%, rgba(61, 116, 181, .04), transparent 75%),
      linear-gradient(145deg, #f3f6f9 0%, #f7f8fa 56%, #f2f6f7 100%);
    --classic-surface-requirements:
      radial-gradient(760px 300px at 94% 4%, rgba(190, 167, 116, .03), transparent 72%),
      linear-gradient(180deg, #fcfbf8 0%, #fff 54%, #fafaf8 100%);
    --classic-surface-features:
      radial-gradient(860px 390px at 7% 0%, rgba(55, 112, 181, .018), transparent 74%),
      linear-gradient(138deg, #f8fafc 0%, #fbfcfd 57%, #f7fafb 100%);
    --classic-surface-faq:
      radial-gradient(760px 330px at 92% 18%, rgba(110, 89, 168, .032), transparent 74%),
      linear-gradient(135deg, #f8f6f8 0%, #faf9fa 56%, #f6f7f9 100%);
    --classic-surface-return: linear-gradient(112deg, #edf3f9 0%, #f2f5f9 58%, #eef4f5 100%);
    --classic-surface-footer: #efedea;
    background: var(--classic-canvas) !important;
  }

  /* A single, restrained surface palette for the full home-page sequence. */
  html:not([data-catalog-skin="glass"]) body.office-catalog-dle:has(main#top.catalog-home-page) {
    --classic-surface-header: #fbfaf8;
    --classic-surface-hero: linear-gradient(145deg, #ebf3f8 0%, #f1f5f7 55%, #f6f8f6 100%);
    --classic-surface-footer: #dfe8e5;
  }

  html:not([data-catalog-skin="glass"]) body.office-catalog-dle:is(:has(main#top.product-page), :has(main.catalog-home-page)) > header.office-header {
    border-bottom: 0 !important;
    background: var(--classic-surface-header) !important;
    box-shadow: none !important;
  }

  html:not([data-catalog-skin="glass"]) body.office-catalog-dle:has(main#top.product-page) .catalog-product-breadcrumbs {
    border-top: 1px solid var(--classic-divider) !important;
    border-bottom: 0 !important;
    background: var(--classic-surface-breadcrumbs) !important;
    box-shadow: var(--classic-divider-inset) !important;
  }

  html:not([data-catalog-skin="glass"]) body.office-catalog-dle:has(main#top.product-page) > main#top > .hero.hero-second-screen {
    border-top: 1px solid var(--classic-divider) !important;
    border-bottom: 0 !important;
    background: var(--classic-surface-hero) !important;
    box-shadow: var(--classic-divider-inset) !important;
  }

  html:not([data-catalog-skin="glass"]) body.office-catalog-dle:has(main#top.product-page) > main#top > .trust-strip {
    border-top: 1px solid var(--classic-divider) !important;
    border-bottom: 0 !important;
    background: var(--classic-surface-trust) !important;
    box-shadow: var(--classic-divider-inset) !important;
  }

  html:not([data-catalog-skin="glass"]) body.office-catalog-dle:has(main#top.product-page) > main#top > .program-facts {
    border-top: 1px solid var(--classic-divider) !important;
    border-bottom: 0 !important;
    background: var(--classic-surface-facts) !important;
    box-shadow: var(--classic-divider-inset) !important;
  }

  html:not([data-catalog-skin="glass"]) body.office-catalog-dle:has(main#top.product-page) > main#top > #versions {
    border-top: 1px solid var(--classic-divider) !important;
    border-bottom: 0 !important;
    background: var(--classic-surface-versions) !important;
    box-shadow: var(--classic-divider-inset) !important;
  }

  html:not([data-catalog-skin="glass"]) body.office-catalog-dle:has(main#top.product-page) > main#top > #requirements {
    border-top: 1px solid var(--classic-divider) !important;
    border-bottom: 0 !important;
    background: var(--classic-surface-requirements) !important;
    box-shadow: var(--classic-divider-inset) !important;
  }

  html:not([data-catalog-skin="glass"]) body.office-catalog-dle:has(main#top.product-page) > main#top > #features {
    border-top: 1px solid var(--classic-divider) !important;
    border-bottom: 0 !important;
    background: var(--classic-surface-features) !important;
    box-shadow: var(--classic-divider-inset) !important;
  }

  html:not([data-catalog-skin="glass"]) body.office-catalog-dle:has(main#top.product-page) > main#top > #faq {
    border-top: 1px solid var(--classic-divider) !important;
    border-bottom: 0 !important;
    background: var(--classic-surface-faq) !important;
    box-shadow: var(--classic-divider-inset) !important;
  }

  html:not([data-catalog-skin="glass"]) body.office-catalog-dle:has(main#top.product-page) > main#top > .download-return {
    border-top: 1px solid var(--classic-divider) !important;
    border-bottom: 0 !important;
    background: var(--classic-surface-return) !important;
    box-shadow: var(--classic-divider-inset) !important;
  }

  html:not([data-catalog-skin="glass"]) body.office-catalog-dle:is(:has(main#top.product-page), :has(main.catalog-home-page)) > footer.footer {
    border-top: 1px solid var(--classic-divider) !important;
    background: var(--classic-surface-footer) !important;
    box-shadow: var(--classic-divider-inset) !important;
  }

  /* The catalog home uses the same classic surface vocabulary as product pages. */
  html:not([data-catalog-skin="glass"]) body.office-catalog-dle > main.catalog-home-page > #office-platforms.ch-word-hero {
    border-top: 1px solid var(--classic-divider) !important;
    border-bottom: 0 !important;
    background: var(--classic-surface-hero) !important;
    box-shadow: var(--classic-divider-inset) !important;
  }

  html:not([data-catalog-skin="glass"]) body.office-catalog-dle > main.catalog-home-page > #office-versions {
    border-top: 1px solid var(--classic-divider) !important;
    border-bottom: 0 !important;
    background: #fbfaf8 !important;
    box-shadow: var(--classic-divider-inset) !important;
  }

  html:not([data-catalog-skin="glass"]) body.office-catalog-dle > main.catalog-home-page > #home-platforms.platform-choice-home {
    border-top: 1px solid var(--classic-divider) !important;
    border-bottom: 0 !important;
    background: #f0f5f5 !important;
    box-shadow: var(--classic-divider-inset) !important;
  }

  html:not([data-catalog-skin="glass"]) body.office-catalog-dle > main.catalog-home-page > #office-apps {
    border-top: 1px solid var(--classic-divider) !important;
    border-bottom: 0 !important;
    background: #f9faf8 !important;
    box-shadow: var(--classic-divider-inset) !important;
  }

  html:not([data-catalog-skin="glass"]) body.office-catalog-dle > main.catalog-home-page > #faq.faq-section {
    border-top: 1px solid var(--classic-divider) !important;
    border-bottom: 0 !important;
    background: #eef3ef !important;
    box-shadow: var(--classic-divider-inset) !important;
  }
}