/* Match the browser's theme before deferred JavaScript restores the saved
   preference. This prevents a white first paint while moving between pages. */
html:not([data-theme]),
html:not([data-theme]) body,
html:not([data-theme]) .page-shell {
  background-color: #f5f8f7;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]),
  html:not([data-theme]) body,
  html:not([data-theme]) .page-shell {
    background-color: #000;
    color-scheme: dark;
  }
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  background-color: #000;
}

/* Critical OLED surfaces live here as the final stylesheet so older cached
   component rules cannot bring back charcoal section bands. */
html[data-theme="dark"] .page-shell,
html[data-theme="dark"] .inner-page,
html[data-theme="dark"] .nav,
html[data-theme="dark"] .inner-page .nav,
html[data-theme="dark"] .hero,
html[data-theme="dark"] .trust-strip,
html[data-theme="dark"] .features,
html[data-theme="dark"] .content-section,
html[data-theme="dark"] .legal-wrap,
html[data-theme="dark"] .inner-footer,
html[data-theme="dark"] footer.site-footer {
  background-color: #000 !important;
  border-color: transparent !important;
}