/*
  E:MERGENCE Theme Contract
  Themes: dark and light

  Edit theme allocations here first. Page CSS should consume the semantic
  --em-* tokens, or the compatibility aliases below, instead of hard-coding
  the neon green / panel / text values page by page.
*/

[data-emergence-theme="dark"] {
  color-scheme: dark;

  /* Brand allocations */
  --em-color-brand-primary: #b7ff27;
  --em-color-brand-primary-hover: #d9ff6d;
  --em-color-brand-primary-soft: #8fd148;
  --em-color-brand-forest: #2f6f3a;
  --em-color-brand-deep: #14381f;
  --em-color-highlight-neon: #b0ff00;
  --em-color-highlight-neon-soft: rgba(176, 255, 0, .18);
  --em-color-accent-cyan: #8cf7ff;
  --em-color-accent-amber: #ffcc78;
  --em-color-accent-violet: #cdbaff;
  --em-color-danger: #ff6d5d;

  /* Text */
  --em-text-primary: #f4f8ef;
  --em-text-strong: #ffffff;
  --em-text-muted: #b9c7b3;
  --em-text-soft: #8e9c88;
  --em-text-dim: #66725f;
  --em-text-on-accent: #071006;

  /* Surfaces */
  --em-surface-page: #020402;
  --em-surface-page-2: #071007;
  --em-surface-panel-solid: rgba(5, 10, 7, .92);
  --em-surface-panel: linear-gradient(180deg, rgba(5, 10, 7, .88), rgba(1, 4, 3, .96));
  --em-surface-panel-strong: linear-gradient(180deg, rgba(7, 13, 9, .94), rgba(1, 4, 3, .98));
  --em-surface-panel-soft: linear-gradient(180deg, rgba(9, 16, 10, .72), rgba(2, 5, 3, .90));
  --em-surface-card: linear-gradient(180deg, rgba(4, 8, 6, .86), rgba(1, 4, 3, .96)), var(--em-texture-card) center / cover no-repeat;
  --em-surface-card-hover: linear-gradient(180deg, rgba(8, 14, 6, .88), rgba(3, 7, 4, .96)), var(--em-texture-card) center / cover no-repeat;
  --em-surface-input: rgba(0, 5, 3, .74);
  --em-surface-header: #070c09;
  --em-texture-card: url("/assets/card-electric-green-20260529.webp");

  /* Borders and shadows */
  --em-border-subtle: rgba(255, 255, 255, .10);
  --em-border-soft: rgba(203, 237, 176, .16);
  --em-border-accent: rgba(183, 255, 39, .24);
  --em-border-accent-strong: rgba(183, 255, 39, .42);
  --em-shadow-panel: 0 28px 90px rgba(0, 0, 0, .48);
  --em-shadow-deep: 0 34px 120px rgba(0, 0, 0, .62);
  --em-glow-accent: 0 0 30px rgba(183, 255, 39, .24);
  --em-glow-neon: 0 0 28px rgba(176, 255, 0, .34);

  /* Layout scale */
  --em-max-content: 1640px;
  --em-max-readable: 920px;
  --em-radius-panel: 24px;
  --em-radius-card: 18px;
  --em-radius-control: 0;
  --em-radius-pill: 999px;

  /* Component allocations */
  --em-button-primary-bg: linear-gradient(180deg, #edff9f, var(--em-color-brand-primary));
  --em-button-primary-text: var(--em-text-on-accent);
  --em-button-secondary-bg: rgba(5, 10, 7, .68);
  --em-button-secondary-text: var(--em-text-primary);
  --em-input-bg: var(--em-surface-input);
  --em-input-border: rgba(255, 255, 255, .14);
  --em-focus-ring: 0 0 0 3px rgba(183, 255, 39, .22);

  /* Legacy compatibility aliases. Keep these until every page is refactored. */
  --bg: var(--em-surface-page);
  --bg2: var(--em-surface-page-2);
  --void: var(--em-surface-page);
  --black: var(--em-surface-page);
  --ink: var(--em-text-primary);
  --text: var(--em-text-primary);
  --muted: var(--em-text-muted);
  --soft: var(--em-text-soft);
  --dim: var(--em-text-dim);
  --quiet: var(--em-text-soft);
  --green: var(--em-color-brand-primary);
  --green2: var(--em-color-brand-primary-soft);
  --green-2: var(--em-color-brand-primary-soft);
  --green-soft: var(--em-color-highlight-neon-soft);
  --acid: var(--em-color-brand-primary);
  --acid2: var(--em-color-brand-primary-soft);
  --cyan: var(--em-color-accent-cyan);
  --amber: var(--em-color-accent-amber);
  --violet: var(--em-color-accent-violet);
  --red: var(--em-color-danger);
  --line: var(--em-border-accent);
  --line2: var(--em-border-accent-strong);
  --line-soft: var(--em-border-subtle);
  --line-strong: var(--em-border-accent-strong);
  --panel: var(--em-surface-card);
  --panel2: var(--em-surface-panel-soft);
  --panel-bg: var(--em-surface-panel-solid);
  --panel-soft: var(--em-surface-card);
  --panel-strong: var(--em-surface-panel-strong);
  --card-texture: var(--em-texture-card);
  --shadow: var(--em-shadow-deep);
  --max: var(--em-max-content);

  /* Shared header aliases */
  --shared-header-bg: var(--em-surface-header);
  --shared-card-texture: var(--em-texture-card);
  --shared-panel: var(--em-surface-card);
  --shared-link-bg: var(--em-surface-card);
  --shared-text: var(--em-text-primary);
  --shared-muted: var(--em-text-muted);
  --shared-green: var(--em-color-brand-primary);
  --shared-line: var(--em-border-accent);
  --shared-max: var(--em-max-content);
}

:root,
[data-emergence-theme="light"] {
  color-scheme: light;

  /* Brand allocations */
  --em-color-brand-primary: #3f7f48;
  --em-color-brand-primary-hover: #2f6f3a;
  --em-color-brand-primary-soft: #6aa36e;
  --em-color-brand-forest: #275b32;
  --em-color-brand-deep: #163820;
  --em-color-highlight-neon: #9be319;
  --em-color-highlight-neon-soft: rgba(113, 166, 50, .16);
  --em-color-accent-cyan: #2c8188;
  --em-color-accent-amber: #a36f26;
  --em-color-accent-violet: #7063a8;
  --em-color-danger: #b4473e;

  /* Text */
  --em-text-primary: #1e2b20;
  --em-text-strong: #071006;
  --em-text-muted: #536354;
  --em-text-soft: #6d7c6d;
  --em-text-dim: #8b9789;
  --em-text-on-accent: #ffffff;

  /* Surfaces */
  --em-surface-page: transparent;
  --em-surface-page-2: transparent;
  --em-surface-panel-solid: transparent;
  --em-surface-panel: transparent;
  --em-surface-panel-strong: transparent;
  --em-surface-panel-soft: transparent;
  --em-surface-card: transparent;
  --em-surface-card-hover: transparent;
  --em-surface-input: rgba(255, 255, 255, .82);
  --em-surface-header: #050806;
  --em-texture-card: none;
  --em-texture-light-wallpaper: url("/assets/light-theme/emergence-light-lab-default-20260625.webp");
  --em-light-page-background:
    var(--em-texture-light-wallpaper) center / cover fixed no-repeat;

  /* Borders and shadows */
  --em-border-subtle: rgba(14, 42, 18, .12);
  --em-border-soft: rgba(40, 92, 48, .16);
  --em-border-accent: rgba(63, 127, 72, .24);
  --em-border-accent-strong: rgba(63, 127, 72, .44);
  --em-shadow-panel: 0 24px 80px rgba(57, 78, 54, .18);
  --em-shadow-deep: 0 34px 110px rgba(51, 73, 48, .24);
  --em-glow-accent: 0 0 28px rgba(63, 127, 72, .20);
  --em-glow-neon: 0 0 24px rgba(130, 207, 33, .24);

  /* Component allocations */
  --em-button-primary-bg: linear-gradient(180deg, #5f9e68, #2f6f3a);
  --em-button-primary-text: #ffffff;
  --em-button-secondary-bg: rgba(255, 255, 255, .58);
  --em-button-secondary-text: var(--em-text-primary);
  --em-input-bg: var(--em-surface-input);
  --em-input-border: rgba(25, 60, 30, .18);
  --em-focus-ring: 0 0 0 3px rgba(63, 127, 72, .20);

  /* Legacy compatibility aliases */
  --bg: var(--em-surface-page);
  --bg2: var(--em-surface-page-2);
  --void: var(--em-surface-page);
  --black: var(--em-surface-page);
  --ink: var(--em-text-primary);
  --text: var(--em-text-primary);
  --muted: var(--em-text-muted);
  --soft: var(--em-text-soft);
  --dim: var(--em-text-dim);
  --quiet: var(--em-text-soft);
  --green: var(--em-color-brand-primary);
  --green2: var(--em-color-brand-primary-soft);
  --green-2: var(--em-color-brand-primary-soft);
  --green-soft: var(--em-color-highlight-neon-soft);
  --acid: var(--em-color-highlight-neon);
  --acid2: var(--em-color-brand-primary-soft);
  --cyan: var(--em-color-accent-cyan);
  --amber: var(--em-color-accent-amber);
  --violet: var(--em-color-accent-violet);
  --red: var(--em-color-danger);
  --line: var(--em-border-accent);
  --line2: var(--em-border-accent-strong);
  --line-soft: var(--em-border-subtle);
  --line-strong: var(--em-border-accent-strong);
  --panel: var(--em-surface-card);
  --panel2: var(--em-surface-panel-soft);
  --panel-bg: var(--em-surface-panel-solid);
  --panel-soft: var(--em-surface-card);
  --panel-strong: var(--em-surface-panel-strong);
  --card-texture: var(--em-texture-card);
  --shadow: var(--em-shadow-deep);
  --max: var(--em-max-content);

  /* Shared header aliases */
  --shared-header-bg: var(--em-surface-header);
  --shared-card-texture: var(--em-texture-card);
  --shared-panel: var(--em-surface-panel-strong);
  --shared-link-bg: var(--em-surface-card);
  --shared-text: var(--em-text-primary);
  --shared-muted: var(--em-text-muted);
  --shared-green: var(--em-color-brand-primary);
  --shared-line: var(--em-border-accent);
  --shared-max: var(--em-max-content);
}

html {
  background-color: var(--em-surface-page);
}

body {
  color: var(--em-text-primary);
  background-color: var(--em-surface-page);
}

html[data-emergence-theme="light"] {
  background: #f4f7f1;
}

html[data-emergence-theme="light"] body {
  color: var(--em-text-primary) !important;
  background: var(--em-light-page-background) !important;
}

html[data-emergence-theme="light"] :where(h1, h2, h3, h4, h5, h6, p, li, label, .small, .lead, .copy, .subtitle, .metric, .stat, .shared-dropdown__title, .shared-dropdown__note) {
  color: inherit;
}

html[data-emergence-theme="light"] :where(h1, h2, h3, h4, h5, h6, strong, b) {
  color: var(--em-text-strong) !important;
  text-shadow: none !important;
}

html[data-emergence-theme="light"] :where(p, li, label, .small, .lead, .copy, .subtitle, .shared-dropdown__note) {
  color: var(--em-text-muted) !important;
}

html[data-emergence-theme="light"] :where(.hero, .section, .wrap, .shell, .container, main) {
  color: var(--em-text-primary);
}

html[data-emergence-theme="light"] :where(.welcome-hero, .welcome-card, .agent-hero, .agent-card, .artifact-sidebar, .artifact-browser-card, .artifact-card, .card, .panel, .feature-card, .product-card, .proof-card, .split, .gallery-card, .download-main, .download-side, .stat, .ba-card, .flow-step, .loop, .loop-step, .price-row, .fab-file, .badge-mock, .shared-dropdown, .shared-dropdown__item, .verify-banner, .flash, .profile-card, .feed-card, .work-card, .owner-card, .settings-card, .api-card, .auth-panel, .auth-security, .feed-preview, .login-card, .badge-card, .live-badge, .signal-row, .mini-stat, .signup-step, .auth-secondary, .auth-card, .auth-form, .hero-card) {
  color: var(--em-text-primary);
  background: var(--em-surface-card) !important;
  border-color: var(--em-border-accent) !important;
  box-shadow: none !important;
}

html[data-emergence-theme="light"] :where(.live-badge, .signal-row, .mini-stat, .signup-step) :where(p, span, small) {
  color: var(--em-text-muted) !important;
}

html[data-emergence-theme="light"] :where(.signal-row strong, .mini-stat strong, .signup-step strong) {
  color: var(--em-text-strong) !important;
}

html[data-emergence-theme="light"] .live-badge,
html[data-emergence-theme="light"] .signal-row,
html[data-emergence-theme="light"] .mini-stat,
html[data-emergence-theme="light"] .signup-step {
  color: var(--em-text-primary) !important;
  background: var(--em-surface-card) !important;
  border-color: var(--em-border-accent) !important;
  box-shadow: none !important;
}

html[data-emergence-theme="light"] .signal-row strong,
html[data-emergence-theme="light"] .mini-stat strong,
html[data-emergence-theme="light"] .signup-step strong {
  color: var(--em-text-strong) !important;
}

html[data-emergence-theme="light"] .signal-row span,
html[data-emergence-theme="light"] .mini-stat span,
html[data-emergence-theme="light"] .signup-step span,
html[data-emergence-theme="light"] .signup-step p {
  color: var(--em-text-muted) !important;
}

html[data-emergence-theme="light"] .shared-site-header {
  color: #edf4e9;
  background-color: #050806 !important;
  background-image:
    radial-gradient(circle at 18% 0%, rgba(176, 255, 0, .14), transparent 34%),
    radial-gradient(circle at 78% 8%, rgba(72, 255, 206, .10), transparent 38%),
    linear-gradient(180deg, rgba(8, 13, 10, .98) 0%, rgba(4, 7, 5, .98) 60%, rgb(2, 4, 3) 100%) !important;
  border-color: rgba(176, 255, 0, .18) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .46);
}

html[data-emergence-theme="light"] .shared-mobile-drawer__panel {
  color: var(--shared-text);
  background: rgba(255, 255, 255, .94) !important;
  border-color: rgba(30, 70, 36, .12) !important;
  box-shadow: 0 18px 50px rgba(70, 90, 66, .16);
}

html[data-emergence-theme="light"] :where(.shared-nav-link, .shared-nav-trigger, .shared-login, .shared-theme-toggle, .shared-menu-toggle) {
  background: rgba(4, 9, 6, .72) !important;
  border-color: rgba(176, 255, 0, .18) !important;
  color: #edf4e9 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

html[data-emergence-theme="light"] :where(.shared-nav-link:hover, .shared-nav-link.active, .shared-nav-trigger:hover, .shared-nav-trigger.active, .shared-nav-group.open .shared-nav-trigger, .shared-login:hover, .shared-login.active, .shared-theme-toggle:hover, .shared-menu-toggle:hover) {
  color: var(--em-color-highlight-neon) !important;
  background: rgba(6, 15, 8, .86) !important;
  border-color: rgba(176, 255, 0, .34) !important;
}

:where(.card, .panel, .feature-card, .product-card, .proof-card, .split, .gallery-card, .download-main, .download-side, .stat, .ba-card, .flow-step, .loop, .loop-step, .price-row, .fab-file, .badge-mock, .shared-dropdown, .shared-dropdown__item, .verify-banner, .flash, .profile-card, .feed-card, .work-card, .owner-card, .settings-card, .api-card) {
  border-color: var(--em-border-accent);
}

:where(.card, .panel, .feature-card, .product-card, .proof-card, .split, .gallery-card, .download-main, .download-side, .flow-step, .loop, .loop-step, .fab-file, .badge-mock, .shared-dropdown, .shared-dropdown__item, .profile-card, .feed-card, .work-card, .owner-card, .settings-card, .api-card) {
  background: var(--em-surface-card);
}

:where(.btn, button, input, textarea, select, .shared-nav-link, .shared-nav-trigger, .shared-login, .shared-cta) {
  font-family: inherit;
}

:where(.btn.primary, .btn-primary, .primary, .shared-cta, button[type="submit"]) {
  background: var(--em-button-primary-bg);
  color: var(--em-button-primary-text);
  border-color: transparent;
}

html[data-emergence-theme="light"] :where(.btn.secondary, .btn-secondary, .secondary, a.btn:not(.primary), button:not([type="submit"]):not(.shared-menu-toggle):not(.shared-nav-trigger):not(.shared-theme-toggle)) {
  background: var(--em-button-secondary-bg) !important;
  color: var(--em-button-secondary-text) !important;
  border-color: var(--em-border-accent) !important;
}

html[data-emergence-theme="light"] .btn.btn-secondary,
html[data-emergence-theme="light"] a.btn.btn-secondary,
html[data-emergence-theme="light"] .btn.secondary,
html[data-emergence-theme="light"] a.btn.secondary {
  background: var(--em-button-secondary-bg) !important;
  color: var(--em-button-secondary-text) !important;
  border-color: var(--em-border-accent) !important;
}

:where(.btn:hover, button:hover, .shared-nav-link:hover, .shared-nav-trigger:hover) {
  border-color: var(--em-border-accent-strong);
}

:where(input, textarea, select) {
  background-color: var(--em-input-bg);
  color: var(--em-text-primary);
  border-color: var(--em-input-border);
}

:where(input, textarea, select, button, a):focus-visible {
  outline: none;
  box-shadow: var(--em-focus-ring);
}



html[data-emergence-theme="light"] :where(.card, .panel, .feature-card, .product-card, .proof-card, .split, .gallery-card, .download-main, .download-side, .stat, .ba-card, .flow-step, .loop, .loop-step, .price-row, .fab-file, .badge-mock, .shared-dropdown, .shared-dropdown__item, .verify-banner, .flash, .profile-card, .feed-card, .work-card, .owner-card, .settings-card, .api-card, .auth-panel, .auth-security, .feed-preview, .login-card, .badge-card, .live-badge, .signal-row, .mini-stat, .signup-step, .auth-secondary, .auth-card, .auth-form, .hero-card, .account-hero, .account-card, .account-note, .account-mini, .account-status-card, .account-tool-list li, .account-list li, .account-plan, .account-panel) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-emergence-theme="light"] .welcome-hero,
html[data-emergence-theme="light"] .welcome-card,
html[data-emergence-theme="light"] .agent-hero,
html[data-emergence-theme="light"] .agent-card,
html[data-emergence-theme="light"] .artifact-sidebar,
html[data-emergence-theme="light"] .artifact-browser-card,
html[data-emergence-theme="light"] .artifact-card,
html[data-emergence-theme="light"] .account-hero,
html[data-emergence-theme="light"] .account-card,
html[data-emergence-theme="light"] .account-note,
html[data-emergence-theme="light"] .account-mini,
html[data-emergence-theme="light"] .account-status-card,
html[data-emergence-theme="light"] .account-tool-list li,
html[data-emergence-theme="light"] .account-list li,
html[data-emergence-theme="light"] .account-plan,
html[data-emergence-theme="light"] .account-panel {
  color: var(--em-text-primary) !important;
  background: var(--em-surface-card) !important;
  border-color: var(--em-border-accent) !important;
  box-shadow: 0 18px 58px rgba(44, 72, 42, .12) !important;
}

html[data-emergence-theme="light"] .welcome-hero::before,
html[data-emergence-theme="light"] .welcome-card::before,
html[data-emergence-theme="light"] .welcome-card::after,
html[data-emergence-theme="light"] .agent-hero::before,
html[data-emergence-theme="light"] .agent-card::before,
html[data-emergence-theme="light"] .agent-card::after,
html[data-emergence-theme="light"] .artifact-sidebar::before,
html[data-emergence-theme="light"] .artifact-sidebar::after,
html[data-emergence-theme="light"] .artifact-browser-card::before,
html[data-emergence-theme="light"] .artifact-browser-card::after,
html[data-emergence-theme="light"] .artifact-card::before,
html[data-emergence-theme="light"] .artifact-card::after,
html[data-emergence-theme="light"] .account-hero::before,
html[data-emergence-theme="light"] .account-card::before,
html[data-emergence-theme="light"] .account-card::after {
  opacity: 0 !important;
}

html[data-emergence-theme="light"] .welcome-card h2,
html[data-emergence-theme="light"] .welcome-hero h1,
html[data-emergence-theme="light"] .agent-card h2,
html[data-emergence-theme="light"] .agent-hero h1,
html[data-emergence-theme="light"] .artifact-sidebar h2,
html[data-emergence-theme="light"] .artifact-browser-card h2,
html[data-emergence-theme="light"] .artifact-card h2,
html[data-emergence-theme="light"] .account-card h2,
html[data-emergence-theme="light"] .account-hero h1,
html[data-emergence-theme="light"] .account-tool-list strong,
html[data-emergence-theme="light"] .account-list strong {
  color: var(--em-text-strong) !important;
}

html[data-emergence-theme="light"] .welcome-card p,
html[data-emergence-theme="light"] .welcome-hero p,
html[data-emergence-theme="light"] .agent-card p,
html[data-emergence-theme="light"] .agent-hero p,
html[data-emergence-theme="light"] .artifact-sidebar p,
html[data-emergence-theme="light"] .artifact-browser-card p,
html[data-emergence-theme="light"] .artifact-card p,
html[data-emergence-theme="light"] .account-card p,
html[data-emergence-theme="light"] .account-hero p,
html[data-emergence-theme="light"] .account-note,
html[data-emergence-theme="light"] .account-tool-list span,
html[data-emergence-theme="light"] .account-list span {
  color: var(--em-text-muted) !important;
}

:where(.kicker, .eyebrow, .label, .status, .tag, h3 strong, .shared-dropdown__title) {
  color: var(--em-color-brand-primary);
}

/* 2026-06-27: Light mode no-wash contract. Wallpaper visibility is the source of truth. */
html[data-emergence-theme="light"] {
  --shared-header-bg: var(--em-surface-header);
}

html[data-emergence-theme="light"] body::before,
html[data-emergence-theme="light"] body::after {
  background: none !important;
  opacity: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-emergence-theme="light"] :where(
  .welcome-hero,
  .welcome-card,
  .agent-hero,
  .agent-card,
  .artifact-sidebar,
  .artifact-browser-card,
  .artifact-card,
  .account-hero,
  .account-card,
  .account-note,
  .account-mini,
  .account-status-card,
  .account-tool-list li,
  .account-list li,
  .account-plan,
  .account-panel,
  .card,
  .panel,
  .feature-card,
  .product-card,
  .proof-card,
  .split,
  .gallery-card,
  .download-main,
  .download-side,
  .stat,
  .ba-card,
  .flow-step,
  .loop,
  .loop-step,
  .price-row,
  .fab-file,
  .badge-mock,
  .shared-dropdown,
  .shared-dropdown__item,
  .verify-banner,
  .flash,
  .profile-card,
  .feed-card,
  .work-card,
  .owner-card,
  .settings-card,
  .api-card,
  .auth-panel,
  .auth-security,
  .feed-preview,
  .login-card,
  .badge-card,
  .live-badge,
  .signal-row,
  .mini-stat,
  .signup-step,
  .auth-secondary,
  .auth-card,
  .auth-form,
  .hero-card
) {
  background: var(--em-surface-card) !important;
  background-color: var(--em-surface-card) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 16px 48px rgba(44, 72, 42, .10) !important;
}

html[data-emergence-theme="light"] :where(
  .shared-site-header,
  .shared-mobile-drawer__panel,
  .welcome-hero,
  .welcome-card,
  .agent-hero,
  .agent-card,
  .artifact-sidebar,
  .artifact-browser-card,
  .artifact-card,
  .account-hero,
  .account-card,
  .account-note,
  .card,
  .panel,
  .feature-card,
  .product-card,
  .proof-card,
  .split,
  .gallery-card,
  .download-main,
  .download-side,
  .stat,
  .ba-card,
  .flow-step,
  .loop,
  .loop-step,
  .price-row,
  .fab-file,
  .badge-mock,
  .profile-card,
  .feed-card,
  .work-card,
  .owner-card,
  .settings-card,
  .api-card,
  .auth-panel,
  .auth-security,
  .feed-preview,
  .login-card,
  .badge-card,
  .live-badge,
  .signal-row,
  .mini-stat,
  .signup-step,
  .auth-secondary,
  .auth-card,
  .auth-form,
  .hero-card
)::before,
html[data-emergence-theme="light"] :where(
  .shared-site-header,
  .shared-mobile-drawer__panel,
  .welcome-hero,
  .welcome-card,
  .agent-hero,
  .agent-card,
  .artifact-sidebar,
  .artifact-browser-card,
  .artifact-card,
  .account-hero,
  .account-card,
  .account-note,
  .card,
  .panel,
  .feature-card,
  .product-card,
  .proof-card,
  .split,
  .gallery-card,
  .download-main,
  .download-side,
  .stat,
  .ba-card,
  .flow-step,
  .loop,
  .loop-step,
  .price-row,
  .fab-file,
  .badge-mock,
  .profile-card,
  .feed-card,
  .work-card,
  .owner-card,
  .settings-card,
  .api-card,
  .auth-panel,
  .auth-security,
  .feed-preview,
  .login-card,
  .badge-card,
  .live-badge,
  .signal-row,
  .mini-stat,
  .signup-step,
  .auth-secondary,
  .auth-card,
  .auth-form,
  .hero-card
)::after,
html[data-emergence-theme="light"] .phone::before {
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* 2026-06-27: Extra mobile no-wash surfaces found in browser audit. */
html[data-emergence-theme="light"] :where(
  .agent-preset,
  .artifact-market-rail,
  .artifact-stats
) {
  background: rgba(248, 251, 245, .72) !important;
  background-color: rgba(248, 251, 245, .72) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 12px 38px rgba(44, 72, 42, .09) !important;
}

html[data-emergence-theme="light"] :where(.agent-preset, .artifact-market-rail, .artifact-stats)::before,
html[data-emergence-theme="light"] :where(.agent-preset, .artifact-market-rail, .artifact-stats)::after {
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* 2026-06-27: Light mode must not keep dark homepage presentation panels over the light wallpaper. */
html[data-emergence-theme="light"] :where(
  .hero,
  .hero-inner,
  .hero-proof,
  .hero-device,
  .flagship,
  .translation,
  .before-after,
  .ba-card,
  .fab-panel,
  .file-meta div,
  .product-card,
  .visual-strip,
  .mini-shot,
  .phone-frame,
  .flow,
  .flow-step,
  .step
) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-emergence-theme="light"] :where(
  .hero,
  .hero-device,
  .flagship,
  .translation,
  .before-after,
  .ba-card,
  .fab-panel,
  .product-card,
  .visual-strip,
  .mini-shot,
  .phone-frame,
  .flow-step,
  .step
)::before,
html[data-emergence-theme="light"] :where(
  .hero,
  .hero-device,
  .flagship,
  .translation,
  .before-after,
  .ba-card,
  .fab-panel,
  .product-card,
  .visual-strip,
  .mini-shot,
  .phone-frame,
  .flow-step,
  .step
)::after {
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

html[data-emergence-theme="light"] :where(.hero, .flagship, .translation, .before-after, .fab-panel, .flow) :where(h1, h2, h3, h4, strong, b) {
  color: var(--em-text-strong) !important;
  text-shadow: none !important;
}

html[data-emergence-theme="light"] :where(.hero, .flagship, .translation, .before-after, .fab-panel, .flow) :where(p, li, span) {
  color: var(--em-text-muted) !important;
  text-shadow: none !important;
}

/* 2026-06-27: Homepage checklist text must follow light theme text colors. */
html[data-emergence-theme="light"] :where(.checklist, .ba-card ul) :where(.check, li) {
  color: var(--em-text-primary) !important;
  text-shadow: none !important;
}

html[data-emergence-theme="light"] .check::before,
html[data-emergence-theme="light"] .ba-card li::before {
  color: var(--em-color-brand-primary) !important;
  background-color: rgba(70, 132, 54, .14) !important;
}

/* 2026-06-28: Light wallpaper readability without global wash panels. */
html[data-emergence-theme="light"] .hero {
  position: relative;
  isolation: isolate;
}

html[data-emergence-theme="light"] .hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background:
    linear-gradient(
      90deg,
      rgba(235, 255, 225, .20) 0%,
      rgba(235, 255, 225, .12) 34%,
      rgba(235, 255, 225, 0) 62%
    ) !important;
  box-shadow: none !important;
}

html[data-emergence-theme="light"] .hero > *,
html[data-emergence-theme="light"] .hero-inner,
html[data-emergence-theme="light"] .hero-copy,
html[data-emergence-theme="light"] .hero-proof {
  position: relative;
  z-index: 1;
}

html[data-emergence-theme="light"] .hero :where(h1, h2) {
  color: #071207 !important;
  text-shadow:
    0 2px 3px rgba(255, 255, 255, .55),
    0 0 14px rgba(173, 253, 36, .18),
    0 1px 0 rgba(0, 0, 0, .18) !important;
}

html[data-emergence-theme="light"] .hero :where(.lead, .hero-copy p, .check, li) {
  color: #102010 !important;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .46) !important;
}

html[data-emergence-theme="light"] .hero :where(.lead, .hero-copy p) {
  display: inline;
  background: rgba(235, 255, 225, .32) !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: .08em .28em;
  border-radius: .22em;
  line-height: 1.65;
}

html[data-emergence-theme="light"] .hero .btn-row {
  margin-top: 1.55rem;
}

html[data-emergence-theme="light"] :where(.hero .stat, .hero .capability, .flagship .card, .ba-card, .flow-step, .product-card) {
  background: rgba(248, 251, 245, .08) !important;
  background-image: none !important;
  border-color: rgba(63, 127, 72, .22) !important;
}

html[data-emergence-theme="light"] .hero .capability :where(b, span) {
  color: #102010 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .42) !important;
}

html[data-emergence-theme="light"] .hero .capability b {
  color: #244d26 !important;
}

/* 2026-06-29: light-mode polish pass — keep cards minimal/transparent without making text disappear. */
html[data-emergence-theme="light"] :where(
  .card,
  .panel,
  .feature-card,
  .product-card,
  .proof-card,
  .gallery-card,
  .download-main,
  .download-side,
  .stat,
  .ba-card,
  .flow-step,
  .loop-step,
  .price-row,
  .fab-file,
  .badge-mock,
  .profile-card,
  .feed-card,
  .work-card,
  .owner-card,
  .settings-card,
  .api-card,
  .auth-panel,
  .auth-security,
  .feed-preview,
  .login-card,
  .badge-card,
  .live-badge,
  .signal-row,
  .mini-stat,
  .signup-step,
  .auth-secondary,
  .auth-card,
  .auth-form,
  .hero-card,
  .intro-band .section-head
) {
  color: #132316 !important;
  background: rgba(248, 252, 245, .56) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .52), rgba(240, 248, 236, .34)) !important;
  border-color: rgba(45, 96, 53, .28) !important;
  box-shadow: 0 18px 54px rgba(37, 58, 34, .14) !important;
  -webkit-backdrop-filter: blur(3px) saturate(1.08) !important;
  backdrop-filter: blur(3px) saturate(1.08) !important;
}

html[data-emergence-theme="light"] :where(
  .card,
  .panel,
  .feature-card,
  .product-card,
  .proof-card,
  .stat,
  .feed-preview,
  .badge-card,
  .login-card,
  .intro-band .section-head
) :where(p, li, span, .small, .stat-label, .shared-dropdown__note) {
  color: #263827 !important;
  text-shadow: none !important;
}

html[data-emergence-theme="light"] :where(.stat-number, .kicker, .label, .tag) {
  color: #275f31 !important;
  text-shadow: none !important;
}

html[data-emergence-theme="light"] .hero :where(.lead, .hero-copy p) {
  display: block !important;
  width: fit-content;
  max-width: 68ch;
  color: #102010 !important;
  background: rgba(248, 252, 245, .50) !important;
  border: 1px solid rgba(45, 96, 53, .16);
  border-radius: .55rem;
  padding: .10em .34em;
  line-height: 1.62;
}

html[data-emergence-theme="light"] .hero .stat {
  background: rgba(248, 252, 245, .68) !important;
  border-color: rgba(45, 96, 53, .34) !important;
}

html[data-emergence-theme="light"] .feed-shot,
html[data-emergence-theme="light"] .badge-art {
  border-color: rgba(45, 96, 53, .24) !important;
  box-shadow: 0 18px 48px rgba(37, 58, 34, .16) !important;
}

@media (min-width: 721px) {
  .landing-hero h1 {
    font-size: clamp(3rem, 5.9vw, 6.1rem);
  }
}

/* 2026-06-30: Any public text sitting directly on the light lab wallpaper needs a local backing. */
html[data-emergence-theme="light"] {
  --em-readability-card-bg: linear-gradient(180deg, rgba(248, 252, 245, .64), rgba(240, 248, 236, .46));
  --em-readability-card-border: rgba(45, 96, 53, .24);
  --em-readability-line-bg: rgba(238, 255, 232, .42);
  --em-readability-line-bg-strong: rgba(238, 255, 232, .52);
}

html[data-emergence-theme="light"] :where(
  .hero-copy,
  .hero .copy,
  .site-section > .section-head,
  .section > .section-head,
  .section-copy,
  .intro,
  .lede-block,
  .copy-panel
) {
  color: #102010 !important;
  background: var(--em-readability-card-bg) !important;
  background-image: var(--em-readability-card-bg) !important;
  border: 1px solid var(--em-readability-card-border) !important;
  border-radius: clamp(16px, 1.4vw, 26px);
  padding: clamp(16px, 2vw, 28px);
  box-shadow: 0 18px 54px rgba(37, 58, 34, .12) !important;
  -webkit-backdrop-filter: blur(3px) saturate(1.06) !important;
  backdrop-filter: blur(3px) saturate(1.06) !important;
}

html[data-emergence-theme="light"] :where(
  .hero-copy,
  .hero .copy,
  .site-section > .section-head,
  .section > .section-head,
  .section-copy
) :where(h1, h2, h3) {
  color: #071207 !important;
  text-shadow:
    0 2px 3px rgba(255, 255, 255, .52),
    0 0 14px rgba(173, 253, 36, .16),
    0 1px 0 rgba(0, 0, 0, .16) !important;
}

html[data-emergence-theme="light"] :where(
  .hero-copy,
  .hero .copy,
  .site-section > .section-head,
  .section > .section-head,
  .section-copy
) :where(p, li) {
  color: #142414 !important;
  font-weight: 650;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .45) !important;
}

html[data-emergence-theme="light"] :where(
  .hero-copy,
  .hero .copy,
  .site-section > .section-head,
  .section > .section-head,
  .section-copy
) > :where(.kicker, .eyebrow, .label, p) {
  display: inline;
  background: var(--em-readability-line-bg) !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: .08em .28em;
  border-radius: .22em;
  line-height: 1.7;
}

html[data-emergence-theme="light"] :where(
  .hero-copy,
  .hero .copy,
  .site-section > .section-head,
  .section > .section-head,
  .section-copy
) > :where(.kicker, .eyebrow, .label) {
  color: #275f31 !important;
  background: var(--em-readability-line-bg-strong) !important;
  font-weight: 900;
}

@media (max-width: 700px) {
  html[data-emergence-theme="light"] :where(
    .hero-copy,
    .hero .copy,
    .site-section > .section-head,
    .section > .section-head,
    .section-copy
  ) {
    max-width: calc(100vw - 32px);
    overflow: hidden;
  }

  html[data-emergence-theme="light"] :where(
    .hero-copy,
    .hero .copy,
    .site-section > .section-head,
    .section > .section-head,
    .section-copy
  ) :where(h1, h2, h3) {
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
  }

  html[data-emergence-theme="light"] .hero .copy :where(h1, h2, h3) {
    font-size: 2.35rem;
    line-height: .94;
  }

  html[data-emergence-theme="light"] :where(
    .site-section > .section-head,
    .section > .section-head
  ) :where(h1, h2, h3) {
    font-size: 1.95rem;
    line-height: .96;
  }

  .shared-nav-group:not(:hover):not(.open):not(:focus-within) .shared-dropdown {
    display: none !important;
  }

  .shared-nav-group:hover .shared-dropdown,
  .shared-nav-group.open .shared-dropdown,
  .shared-nav-group:focus-within .shared-dropdown {
    display: grid !important;
  }

  :where(.shared-dropdown) {
    left: auto !important;
    right: 0 !important;
    width: min(320px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
  }

  :where(.panel, .card, .feature-card, .product-card, .proof-card) {
    min-width: 0;
    max-width: calc(100vw - 32px);
  }

  :where(pre, code) {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}

/* 2026-06-30: Final light-mode readability contract.
   Light wallpaper is allowed to show through, but text never sits naked on it. */
html[data-emergence-theme="light"] {
  --em-readability-card-bg: linear-gradient(180deg, rgba(248, 252, 245, .70), rgba(238, 248, 235, .56));
  --em-readability-card-bg-soft: linear-gradient(180deg, rgba(248, 252, 245, .58), rgba(238, 248, 235, .42));
  --em-readability-card-border: rgba(45, 96, 53, .28);
  --em-readability-card-border-strong: rgba(45, 96, 53, .40);
  --em-readability-line-bg: rgba(238, 255, 232, .46);
  --em-readability-line-bg-strong: rgba(238, 255, 232, .58);
  --em-readability-title-shadow:
    0 2px 3px rgba(255, 255, 255, .55),
    0 0 14px rgba(173, 253, 36, .18),
    0 1px 0 rgba(0, 0, 0, .18);
  --em-readability-small-shadow: 0 1px 2px rgba(255, 255, 255, .50);
}

html[data-emergence-theme="light"] :where(
  .hero-copy,
  .hero .copy,
  .hero-text,
  .hero-content,
  .hero-panel,
  .section-head,
  .section-copy,
  .intro,
  .lede-block,
  .copy-panel,
  .text-panel,
  .headline-panel,
  .download-hero,
  .pricing-hero,
  .badges-hero,
  .account-hero,
  .welcome-hero,
  .agent-hero
) {
  color: #102010 !important;
  background: var(--em-readability-card-bg) !important;
  background-image: var(--em-readability-card-bg) !important;
  border: 1px solid var(--em-readability-card-border) !important;
  border-radius: clamp(16px, 1.4vw, 26px) !important;
  box-shadow: 0 18px 54px rgba(37, 58, 34, .12) !important;
  -webkit-backdrop-filter: blur(3px) saturate(1.06) !important;
  backdrop-filter: blur(3px) saturate(1.06) !important;
}

html[data-emergence-theme="light"] :where(
  .hero-copy,
  .hero .copy,
  .hero-text,
  .hero-content,
  .hero-panel,
  .section-head,
  .section-copy,
  .intro,
  .lede-block,
  .copy-panel,
  .text-panel,
  .headline-panel,
  .download-hero,
  .pricing-hero,
  .badges-hero,
  .account-hero,
  .welcome-hero,
  .agent-hero
) :where(h1, h2, h3, h4, .title, .headline) {
  color: #071207 !important;
  text-shadow: var(--em-readability-title-shadow) !important;
}

html[data-emergence-theme="light"] :where(
  .hero-copy,
  .hero .copy,
  .hero-text,
  .hero-content,
  .hero-panel,
  .section-head,
  .section-copy,
  .intro,
  .lede-block,
  .copy-panel,
  .text-panel,
  .headline-panel,
  .download-hero,
  .pricing-hero,
  .badges-hero,
  .account-hero,
  .welcome-hero,
  .agent-hero
) :where(p, li, span, small, .lead, .subtitle, .copy, .note, .muted) {
  color: #142414 !important;
  text-shadow: var(--em-readability-small-shadow) !important;
}

html[data-emergence-theme="light"] :where(
  .hero-copy,
  .hero .copy,
  .hero-text,
  .hero-content,
  .hero-panel,
  .section-head,
  .section-copy,
  .intro,
  .lede-block,
  .copy-panel,
  .text-panel,
  .headline-panel,
  .download-hero,
  .pricing-hero,
  .badges-hero,
  .account-hero,
  .welcome-hero,
  .agent-hero
) > :where(.kicker, .eyebrow, .label, .status, p, .lead, .subtitle) {
  background: var(--em-readability-line-bg) !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: .08em .28em;
  border-radius: .24em;
  line-height: 1.65;
}

html[data-emergence-theme="light"] :where(
  .card,
  .panel,
  .feature-card,
  .product-card,
  .proof-card,
  .split,
  .gallery-card,
  .download-main,
  .download-side,
  .download-card,
  .download-tile,
  .pricing-card,
  .price-card,
  .stat,
  .ba-card,
  .flow-step,
  .loop,
  .loop-step,
  .price-row,
  .fab-file,
  .badge-mock,
  .verify-banner,
  .flash,
  .profile-card,
  .feed-card,
  .work-card,
  .owner-card,
  .settings-card,
  .api-card,
  .auth-panel,
  .auth-security,
  .feed-preview,
  .login-card,
  .badge-card,
  .live-badge,
  .signal-row,
  .mini-stat,
  .signup-step,
  .auth-secondary,
  .auth-card,
  .auth-form,
  .hero-card,
  .account-card,
  .account-note,
  .account-mini,
  .account-status-card,
  .account-tool-list li,
  .account-list li,
  .account-plan,
  .account-panel,
  .agent-preset,
  .artifact-market-rail,
  .artifact-stats,
  .file-meta div,
  .step,
  .tile,
  .tiles > *,
  .grid > article,
  .grid > div
) {
  color: #102010 !important;
  background: var(--em-readability-card-bg-soft) !important;
  background-image: var(--em-readability-card-bg-soft) !important;
  border-color: var(--em-readability-card-border) !important;
  box-shadow: 0 14px 40px rgba(37, 58, 34, .10) !important;
  -webkit-backdrop-filter: blur(2px) saturate(1.04) !important;
  backdrop-filter: blur(2px) saturate(1.04) !important;
}

html[data-emergence-theme="light"] :where(
  .card,
  .panel,
  .feature-card,
  .product-card,
  .proof-card,
  .split,
  .gallery-card,
  .download-main,
  .download-side,
  .download-card,
  .download-tile,
  .pricing-card,
  .price-card,
  .stat,
  .ba-card,
  .flow-step,
  .loop,
  .loop-step,
  .price-row,
  .fab-file,
  .badge-mock,
  .verify-banner,
  .flash,
  .profile-card,
  .feed-card,
  .work-card,
  .owner-card,
  .settings-card,
  .api-card,
  .auth-panel,
  .auth-security,
  .feed-preview,
  .login-card,
  .badge-card,
  .live-badge,
  .signal-row,
  .mini-stat,
  .signup-step,
  .auth-secondary,
  .auth-card,
  .auth-form,
  .hero-card,
  .account-card,
  .account-note,
  .account-mini,
  .account-status-card,
  .account-tool-list li,
  .account-list li,
  .account-plan,
  .account-panel,
  .agent-preset,
  .artifact-market-rail,
  .artifact-stats,
  .file-meta div,
  .step,
  .tile,
  .tiles > *,
  .grid > article,
  .grid > div
) :where(h1, h2, h3, h4, h5, h6, strong, b, .title, .label, .kicker, .eyebrow, .status, .tag) {
  color: #071207 !important;
  text-shadow: var(--em-readability-title-shadow) !important;
}

html[data-emergence-theme="light"] :where(
  .card,
  .panel,
  .feature-card,
  .product-card,
  .proof-card,
  .split,
  .gallery-card,
  .download-main,
  .download-side,
  .download-card,
  .download-tile,
  .pricing-card,
  .price-card,
  .stat,
  .ba-card,
  .flow-step,
  .loop,
  .loop-step,
  .price-row,
  .fab-file,
  .badge-mock,
  .verify-banner,
  .flash,
  .profile-card,
  .feed-card,
  .work-card,
  .owner-card,
  .settings-card,
  .api-card,
  .auth-panel,
  .auth-security,
  .feed-preview,
  .login-card,
  .badge-card,
  .live-badge,
  .signal-row,
  .mini-stat,
  .signup-step,
  .auth-secondary,
  .auth-card,
  .auth-form,
  .hero-card,
  .account-card,
  .account-note,
  .account-mini,
  .account-status-card,
  .account-tool-list li,
  .account-list li,
  .account-plan,
  .account-panel,
  .agent-preset,
  .artifact-market-rail,
  .artifact-stats,
  .file-meta div,
  .step,
  .tile,
  .tiles > *,
  .grid > article,
  .grid > div
) :where(p, li, span, small, .note, .muted, .subtitle, .copy) {
  color: #142414 !important;
  text-shadow: var(--em-readability-small-shadow) !important;
}

html[data-emergence-theme="light"] :where(.shared-dropdown, .shared-mobile-drawer__panel) {
  color: #102010 !important;
  background: rgba(248, 252, 245, .98) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.98), rgba(238,248,235,.96)) !important;
  border-color: var(--em-readability-card-border-strong) !important;
  box-shadow: 0 22px 70px rgba(20, 35, 20, .22) !important;
}

html[data-emergence-theme="light"] :where(.shared-dropdown__item) {
  color: #102010 !important;
  background: rgba(242, 250, 238, .92) !important;
  border-color: rgba(45, 96, 53, .18) !important;
}

html[data-emergence-theme="light"] :where(.shared-dropdown__title, .shared-dropdown__note) {
  color: #102010 !important;
  text-shadow: none !important;
}

html[data-emergence-theme="light"] :where(.btn.primary, .btn-primary, .primary, .shared-cta, button[type="submit"]) {
  color: #061006 !important;
  text-shadow: none !important;
}

html[data-emergence-theme="light"] :where(.btn.secondary, .btn-secondary, .secondary, a.btn:not(.primary), button:not([type="submit"]):not(.shared-menu-toggle):not(.shared-nav-trigger):not(.shared-theme-toggle)) {
  color: #102010 !important;
  background: rgba(248, 252, 245, .82) !important;
  border-color: var(--em-readability-card-border) !important;
}

html[data-emergence-theme="light"] :where(input, textarea, select, pre, code) {
  color: #102010 !important;
  background: rgba(255, 255, 255, .86) !important;
  border-color: rgba(45, 96, 53, .24) !important;
}

html[data-emergence-theme="light"] :where(pre, code) {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 700px) {
  html[data-emergence-theme="light"] :where(
    .hero-copy,
    .hero .copy,
    .hero-text,
    .hero-content,
    .hero-panel,
    .section-head,
    .section-copy,
    .intro,
    .lede-block,
    .copy-panel,
    .text-panel,
    .headline-panel,
    .download-hero,
    .pricing-hero,
    .badges-hero,
    .account-hero,
    .welcome-hero,
    .agent-hero
  ) {
    max-width: calc(100vw - 32px) !important;
    overflow: hidden;
  }

  html[data-emergence-theme="light"] :where(
    .hero-copy,
    .hero .copy,
    .hero-text,
    .hero-content,
    .hero-panel,
    .section-head,
    .section-copy,
    .intro,
    .lede-block,
    .copy-panel,
    .text-panel,
    .headline-panel,
    .download-hero,
    .pricing-hero,
    .badges-hero,
    .account-hero,
    .welcome-hero,
    .agent-hero
  ) :where(h1, h2, h3) {
    font-size: clamp(2rem, 10vw, 3rem) !important;
    line-height: .96 !important;
    max-width: 100%;
  }

  html[data-emergence-theme="light"] :where(.shared-dropdown) {
    left: auto !important;
    right: 0 !important;
    width: min(320px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
  }

  .shared-nav-group:not(:hover):not(.open):not(:focus-within) .shared-dropdown {
    display: none !important;
  }
}

/* Final light-mode audit hardening: every large heading gets separation,
   every dark embedded panel gets readable light text, and anonymous content
   boxes on wallpaper receive a real surface. Keep this at EOF. */
html[data-emergence-theme="light"] :where(h1, h2, h3, .hero-title, .page-title, .section-title, .headline, .display-title, .title-xl) {
  text-shadow: var(--em-readability-title-shadow) !important;
}

html[data-emergence-theme="light"] :where(
  .note,
  .screen,
  .phone-screen,
  .terminal,
  .console,
  .mock-screen,
  .badge-grid > div,
  .proof-grid > div,
  .steps > div,
  .access-grid > div,
  .download-grid > div,
  .pricing-grid > div,
  .ecosystem-grid > div,
  .feature-grid > div,
  .metrics-grid > div,
  .plans > div,
  .rail > div,
  .row > div,
  .columns > div,
  .hero-metrics > div
) {
  color: #102010 !important;
  background: var(--em-readability-card-bg) !important;
  background-image:
    linear-gradient(145deg, rgba(255,255,255,.72), rgba(230,246,224,.54)),
    radial-gradient(circle at 12% 0%, rgba(173,253,36,.12), transparent 46%) !important;
  border-color: var(--em-readability-card-border) !important;
  box-shadow: var(--em-readability-card-shadow) !important;
}

html[data-emergence-theme="light"] :where(
  .note,
  .badge-grid > div,
  .proof-grid > div,
  .steps > div,
  .access-grid > div,
  .download-grid > div,
  .pricing-grid > div,
  .ecosystem-grid > div,
  .feature-grid > div,
  .metrics-grid > div,
  .plans > div,
  .rail > div,
  .row > div,
  .columns > div,
  .hero-metrics > div
) :where(h1, h2, h3, h4, strong, b, .title, .label, .kicker, .eyebrow) {
  color: #071207 !important;
  text-shadow: var(--em-readability-title-shadow) !important;
}

html[data-emergence-theme="light"] :where(
  .note,
  .badge-grid > div,
  .proof-grid > div,
  .steps > div,
  .access-grid > div,
  .download-grid > div,
  .pricing-grid > div,
  .ecosystem-grid > div,
  .feature-grid > div,
  .metrics-grid > div,
  .plans > div,
  .rail > div,
  .row > div,
  .columns > div,
  .hero-metrics > div
) :where(p, li, span, small, .muted, .copy) {
  color: #142414 !important;
  text-shadow: var(--em-readability-small-shadow) !important;
}

html[data-emergence-theme="light"] :where(.screen, .phone-screen, .terminal, .console, .mock-screen) {
  color: #eef8ec !important;
  background: rgba(4, 10, 4, .9) !important;
  background-image:
    linear-gradient(180deg, rgba(10, 18, 10, .94), rgba(2, 6, 3, .92)),
    radial-gradient(circle at 15% 12%, rgba(173,253,36,.16), transparent 42%) !important;
  border-color: rgba(173,253,36,.26) !important;
}

html[data-emergence-theme="light"] :where(.screen, .phone-screen, .terminal, .console, .mock-screen) :where(h1, h2, h3, h4, strong, b, p, li, span, small, div) {
  color: #eef8ec !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .75) !important;
}

html[data-emergence-theme="light"] :where(.screen, .phone-screen, .terminal, .console, .mock-screen) :where(.kicker, .label, .eyebrow, .status, .tag) {
  color: var(--em-color-highlight-neon) !important;
}

html[data-emergence-theme="light"] :where(footer, .site-footer, .footer) {
  color: #eef8ec !important;
  background: linear-gradient(180deg, rgba(5, 10, 5, .96), rgba(0, 4, 2, .98)) !important;
  border-color: rgba(173,253,36,.18) !important;
}

html[data-emergence-theme="light"] :where(footer, .site-footer, .footer) :where(a, p, span, small, strong, li, div) {
  color: #eef8ec !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .72) !important;
}

html[data-emergence-theme="light"] :where(footer, .site-footer, .footer) :where(a:hover, strong, .kicker, .label) {
  color: var(--em-color-highlight-neon) !important;
}

/* Pass 2 audit fixes: ensure computed backgrounds are not transparent over
   dark headers/panels, and include small label chips plus classless trust rows. */
html[data-emergence-theme="light"] :where(.shared-cta, .btn-primary, .btn.primary, a.primary, button.primary) {
  color: #061006 !important;
  background-color: var(--em-color-highlight-neon) !important;
  background-image: linear-gradient(180deg, #c8ff43, #6ebd1f) !important;
  text-shadow: none !important;
}

html[data-emergence-theme="light"] :where(.pill, .chip, .tag, .badge, .status-pill) {
  color: #061006 !important;
  background-color: rgba(217, 255, 179, .88) !important;
  background-image: linear-gradient(180deg, rgba(242, 255, 229, .9), rgba(184, 236, 126, .72)) !important;
  border-color: rgba(45, 96, 53, .34) !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .55) !important;
}

html[data-emergence-theme="light"] :where(.trust-strip > div, .signal-list > div, .mini-grid > div, .flow-row > span) {
  color: #102010 !important;
  background: var(--em-readability-card-bg) !important;
  background-image:
    linear-gradient(145deg, rgba(255,255,255,.78), rgba(230,246,224,.58)),
    radial-gradient(circle at 12% 0%, rgba(173,253,36,.13), transparent 44%) !important;
  border-color: var(--em-readability-card-border) !important;
  box-shadow: var(--em-readability-card-shadow) !important;
}

html[data-emergence-theme="light"] :where(.trust-strip > div, .signal-list > div, .mini-grid > div, .flow-row > span) :where(strong, b, span, p) {
  color: #102010 !important;
  text-shadow: var(--em-readability-small-shadow) !important;
}

html[data-emergence-theme="light"] :where(.trust-strip > div, .signal-list > div, .mini-grid > div) :where(strong, b) {
  color: #071207 !important;
  text-shadow: var(--em-readability-title-shadow) !important;
}

html[data-emergence-theme="light"] :where(.screen, .phone-screen, .terminal, .console, .mock-screen) :where(.tag, .chip, .badge, .status-pill) {
  color: #eaff9e !important;
  background-color: rgba(5, 12, 7, .86) !important;
  background-image: linear-gradient(180deg, rgba(18, 32, 18, .94), rgba(4, 10, 5, .9)) !important;
  border-color: rgba(173, 253, 36, .34) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .74) !important;
}

html[data-emergence-theme="light"] :where(.trial-badge) {
  color: #102010 !important;
  background: var(--em-readability-card-bg) !important;
  background-image:
    linear-gradient(145deg, rgba(255,255,255,.82), rgba(230,246,224,.62)),
    radial-gradient(circle at 50% 0%, rgba(173,253,36,.18), transparent 48%) !important;
  border-color: var(--em-readability-card-border-strong) !important;
  box-shadow: var(--em-readability-card-shadow) !important;
}

html[data-emergence-theme="light"] :where(.trial-badge) :where(strong, span, p) {
  color: #071207 !important;
  text-shadow: var(--em-readability-title-shadow) !important;
}

html[data-emergence-theme="light"] :where(.chat-card .tag, .toolbox .tag, .agentbox .tag, .who .tag) {
  color: #061006 !important;
  background-color: rgba(217, 255, 179, .88) !important;
  background-image: linear-gradient(180deg, rgba(242, 255, 229, .92), rgba(184, 236, 126, .76)) !important;
  border-color: rgba(45, 96, 53, .34) !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .55) !important;
}

html[data-emergence-theme="light"] .stage .chat-card .tag,
html[data-emergence-theme="light"] .stage .toolbox .tag,
html[data-emergence-theme="light"] .stage .agentbox .tag,
html[data-emergence-theme="light"] .stage .who .tag {
  color: #061006 !important;
  background-color: rgba(217, 255, 179, .9) !important;
  background-image: linear-gradient(180deg, rgba(242, 255, 229, .94), rgba(184, 236, 126, .78)) !important;
  border-color: rgba(45, 96, 53, .36) !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .55) !important;
}

html[data-emergence-theme="light"] :where(
  .welcome-status,
  .welcome-strip,
  .feed-stat,
  .email-admin-card,
  .email-admin-form,
  .owner-nav,
  .builder-tabs,
  .builder-profile-tabs,
  .profile-tabs
) {
  color: #102010 !important;
  background: var(--em-readability-card-bg) !important;
  background-image:
    linear-gradient(145deg, rgba(255,255,255,.82), rgba(230,246,224,.62)),
    radial-gradient(circle at 10% 0%, rgba(173,253,36,.14), transparent 44%) !important;
  border-color: var(--em-readability-card-border) !important;
  box-shadow: var(--em-readability-card-shadow) !important;
}

html[data-emergence-theme="light"] :where(
  .welcome-status,
  .welcome-strip,
  .feed-stat,
  .email-admin-card,
  .email-admin-form,
  .owner-nav,
  .builder-tabs,
  .builder-profile-tabs,
  .profile-tabs
) :where(h1, h2, h3, h4, strong, b, p, span, small, div, a, label) {
  color: #102010 !important;
  text-shadow: var(--em-readability-small-shadow) !important;
}

html[data-emergence-theme="light"] :where(
  .welcome-status,
  .welcome-strip,
  .feed-stat,
  .email-admin-card,
  .email-admin-form
) :where(h1, h2, h3, h4, strong, b) {
  color: #071207 !important;
  text-shadow: var(--em-readability-title-shadow) !important;
}

html[data-emergence-theme="light"] :where(.welcome-pill, .email-admin-pill) {
  color: #061006 !important;
  background-color: rgba(217, 255, 179, .88) !important;
  background-image: linear-gradient(180deg, rgba(242, 255, 229, .92), rgba(184, 236, 126, .76)) !important;
  border-color: rgba(45, 96, 53, .34) !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .55) !important;
}

html[data-emergence-theme="light"] :where(.account-danger-button) {
  color: #fff7f2 !important;
  background-color: #721f12 !important;
  background-image: linear-gradient(180deg, #a23c28, #641a0e) !important;
  border-color: rgba(160, 40, 20, .72) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .72) !important;
}

html[data-emergence-theme="light"] :where(.builder-tabs a.active, .builder-profile-tabs a.active, .profile-tabs a.active, a.active) {
  color: #061006 !important;
  background-color: var(--em-color-highlight-neon) !important;
  background-image: linear-gradient(180deg, #c8ff43, #6ebd1f) !important;
  text-shadow: none !important;
}

/* 2026-07-01: final override for phone-width shared header menus.
   This file loads after shared-header.css, so keep the viewport-safe geometry here. */
@media (max-width: 560px) {
  .shared-site-header {
    overflow: visible !important;
  }

  .shared-nav-group {
    position: static !important;
  }

  .shared-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: calc(100dvh - 128px) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    z-index: 1002 !important;
  }

  .shared-dropdown__item {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .shared-dropdown__title,
  .shared-dropdown__note {
    overflow-wrap: anywhere !important;
  }
}

/* 2026-07-03: dark-mode readability repair.
   Keep this as a shared contract layer so every public page inherits the same
   contrast behavior instead of fighting wallpaper/page-specific CSS. */
html[data-emergence-theme="dark"] {
  --em-text-primary: #f4f8ef;
  --em-text-strong: #ffffff;
  --em-text-muted: #c7d4c0;
  --em-text-soft: #aab7a4;
  --em-readability-dark-card-bg:
    linear-gradient(145deg, rgba(5, 10, 7, .82), rgba(1, 4, 3, .94)),
    radial-gradient(circle at 12% 0%, rgba(176, 255, 0, .10), transparent 44%);
  --em-readability-dark-border: rgba(183, 255, 39, .24);
  --em-readability-dark-border-strong: rgba(183, 255, 39, .42);
  --em-readability-dark-title-shadow:
    0 2px 4px rgba(0, 0, 0, .86),
    0 0 18px rgba(176, 255, 0, .18);
  --em-readability-dark-small-shadow: 0 1px 3px rgba(0, 0, 0, .82);
}

html[data-emergence-theme="dark"] body {
  color: var(--em-text-primary) !important;
}

html[data-emergence-theme="dark"] :where(
  h1,
  h2,
  h3,
  .hero-title,
  .page-title,
  .section-title,
  .headline,
  .display-title,
  .title-xl,
  .landing-hero h1,
  .hero h1
) {
  color: var(--em-text-strong) !important;
  text-shadow: var(--em-readability-dark-title-shadow) !important;
}

html[data-emergence-theme="dark"] :where(
  p,
  li,
  label,
  .lead,
  .copy,
  .subtitle,
  .hero-copy,
  .hero-copy p,
  .hero .lead,
  .section-copy,
  .shared-dropdown__note
) {
  color: var(--em-text-muted) !important;
  text-shadow: var(--em-readability-dark-small-shadow) !important;
}

html[data-emergence-theme="dark"] :where(
  strong,
  b,
  .kicker,
  .label,
  .eyebrow,
  .stat-number,
  .shared-dropdown__title
) {
  color: var(--em-text-strong) !important;
  text-shadow: var(--em-readability-dark-small-shadow) !important;
}

html[data-emergence-theme="dark"] :where(
  .card,
  .panel,
  .feature-card,
  .product-card,
  .proof-card,
  .split,
  .gallery-card,
  .download-main,
  .download-side,
  .stat,
  .ba-card,
  .flow-step,
  .loop,
  .loop-step,
  .price-row,
  .fab-file,
  .badge-mock,
  .verify-banner,
  .flash,
  .profile-card,
  .feed-card,
  .work-card,
  .owner-card,
  .settings-card,
  .api-card,
  .auth-panel,
  .auth-security,
  .feed-preview,
  .login-card,
  .badge-card,
  .live-badge,
  .signal-row,
  .mini-stat,
  .signup-step,
  .auth-secondary,
  .auth-card,
  .auth-form,
  .hero-card,
  .account-hero,
  .account-card,
  .account-note,
  .account-mini,
  .account-status-card,
  .account-tool-list li,
  .account-list li,
  .account-plan,
  .account-panel,
  .trust-strip > div,
  .signal-list > div,
  .mini-grid > div,
  .flow-row > span
) {
  color: var(--em-text-primary) !important;
  border-color: var(--em-readability-dark-border) !important;
}

html[data-emergence-theme="dark"] :where(
  .hero-copy,
  .hero .lead,
  .section-copy,
  .landing-copy,
  .intro-copy,
  .hero-summary,
  .hero-description
) {
  background: rgba(3, 8, 5, .18) !important;
  border-color: rgba(183, 255, 39, .14) !important;
}

html[data-emergence-theme="dark"] :where(.shared-dropdown, .shared-mobile-drawer__panel) {
  color: #f4f8ef !important;
  background:
    linear-gradient(180deg, rgba(5, 10, 7, .985), rgba(1, 4, 3, .995)),
    var(--em-texture-card) center / cover no-repeat !important;
  border-color: var(--em-readability-dark-border-strong) !important;
}

html[data-emergence-theme="dark"] :where(.shared-dropdown__item, .shared-mobile-drawer a) {
  color: #f4f8ef !important;
  background:
    linear-gradient(180deg, rgba(10, 18, 12, .96), rgba(3, 7, 4, .985)),
    var(--em-texture-card) center / cover no-repeat !important;
  border-color: rgba(216, 255, 180, .16) !important;
}

html[data-emergence-theme="dark"] :where(.shared-dropdown__title, .shared-dropdown__note, .shared-mobile-drawer a) {
  color: #f4f8ef !important;
  text-shadow: var(--em-readability-dark-small-shadow) !important;
}

/* 2026-07-03 canonical consistency pass.
   Final contract layer for shared header chrome, page gutters,
   and account-form readability across Rising/Landing. */
:root {
  --em-page-max: 1560px;
  --em-page-gutter: clamp(22px, 3.4vw, 58px);
  --em-header-bg-canonical:
    radial-gradient(circle at 18% 0%, rgba(176,255,0,.14), transparent 34%),
    linear-gradient(90deg, rgba(5,12,7,.99), rgba(1,10,10,.985));
  --em-light-card-readable: rgba(250, 255, 246, .74);
  --em-light-card-readable-strong: rgba(250, 255, 246, .84);
  --em-light-card-border: rgba(54, 112, 56, .24);
  --em-light-ink: #071207;
  --em-light-copy: #152819;
  --em-title-separator:
    0 2px 3px rgba(255,255,255,.62),
    0 0 14px rgba(138,210,60,.20),
    0 1px 0 rgba(0,0,0,.16);
}

.shared-site-header,
html[data-emergence-theme="light"] .shared-site-header,
html[data-emergence-theme="dark"] .shared-site-header {
  color: #f4f8ef !important;
  background-color: #050806 !important;
  background-image: var(--em-header-bg-canonical) !important;
  border-bottom: 1px solid rgba(176,255,0,.24) !important;
}

.shared-site-header__inner,
.shared-mobile-drawer {
  max-width: var(--em-page-max) !important;
}

:where(.shared-nav-link, .shared-nav-trigger, .shared-login, .shared-theme-toggle, .shared-menu-toggle),
html[data-emergence-theme="light"] :where(.shared-nav-link, .shared-nav-trigger, .shared-login, .shared-theme-toggle, .shared-menu-toggle),
html[data-emergence-theme="dark"] :where(.shared-nav-link, .shared-nav-trigger, .shared-login, .shared-theme-toggle, .shared-menu-toggle) {
  color: #f4f8ef !important;
  background: rgba(3,8,5,.86) !important;
  border-color: rgba(176,255,0,.24) !important;
  opacity: 1 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.65) !important;
}

:where(.shared-nav-link, .shared-nav-trigger, .shared-login, .shared-theme-toggle, .shared-menu-toggle):hover,
.shared-nav-link.active,
.shared-nav-trigger.active,
.shared-nav-group.open .shared-nav-trigger {
  color: var(--em-green) !important;
  background: rgba(7,18,8,.96) !important;
  border-color: rgba(176,255,0,.48) !important;
}

.shared-cta,
.shared-signup,
.shared-account,
.shared-site-header .shared-cta {
  color: #071207 !important;
  background: linear-gradient(180deg, #c9ff42, #5c9d2e) !important;
  border-color: rgba(205,255,75,.74) !important;
  text-shadow: none !important;
}

html[data-emergence-theme="light"] .shared-dropdown,
html[data-emergence-theme="light"] .shared-mobile-drawer__panel {
  background: #f8fcf4 !important;
  color: #071207 !important;
  border-color: rgba(54,112,56,.28) !important;
  box-shadow: 0 22px 45px rgba(5,14,7,.24) !important;
}

html[data-emergence-theme="light"] .shared-dropdown__item,
html[data-emergence-theme="light"] .shared-mobile-drawer a {
  background: #ffffff !important;
  color: #071207 !important;
  border-color: rgba(54,112,56,.18) !important;
}

html[data-emergence-theme="light"] .shared-dropdown__item:hover,
html[data-emergence-theme="light"] .shared-dropdown__item.active,
html[data-emergence-theme="light"] .shared-mobile-drawer a:hover,
html[data-emergence-theme="light"] .shared-mobile-drawer a.active {
  background: #eef7e9 !important;
  color: #071207 !important;
  border-color: rgba(54,112,56,.34) !important;
}

html[data-emergence-theme="light"] .shared-dropdown__title,
html[data-emergence-theme="light"] .shared-mobile-drawer a {
  color: #071207 !important;
  text-shadow: none !important;
}

html[data-emergence-theme="light"] .shared-dropdown__note {
  color: #486049 !important;
  text-shadow: none !important;
}

@media (min-width: 900px) {
  :where(.hero-inner, .section, .sections, .shell, .wrap, .signup-shell, .auth-shell, .account-shell, .page-shell, .profile-shell, .feed-shell, .work-shell, .site-shell, .container) {
    width: min(100%, var(--em-page-max)) !important;
    max-width: var(--em-page-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--em-page-gutter) !important;
    padding-right: var(--em-page-gutter) !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 1099px) {
  :where(.hero-inner, .section, .sections, .shell, .wrap, .signup-shell, .auth-shell, .account-shell, .page-shell, .profile-shell, .feed-shell, .work-shell, .site-shell, .container) {
    padding-left: clamp(16px, 4.5vw, 24px) !important;
    padding-right: clamp(16px, 4.5vw, 24px) !important;
    box-sizing: border-box !important;
  }
}

html[data-emergence-theme="light"] :where(h1, h2, h3, .hero-title, .page-title, .section-title, .display-title, .signup-copy h1) {
  color: var(--em-light-ink) !important;
  text-shadow: var(--em-title-separator) !important;
}

html[data-emergence-theme="light"] .signup-copy p,
html[data-emergence-theme="light"] .signup-copy .small,
html[data-emergence-theme="light"] .auth-card > p,
html[data-emergence-theme="light"] .signup-card > p,
html[data-emergence-theme="light"] .auth-copy,
html[data-emergence-theme="light"] .hero-copy {
  color: var(--em-light-copy) !important;
  background: rgba(250,255,246,.42) !important;
  border: 1px solid rgba(54,112,56,.16) !important;
  border-radius: 16px !important;
  padding: .72rem .9rem !important;
  font-weight: 650 !important;
  line-height: 1.65 !important;
  text-shadow: 0 1px 2px rgba(255,255,255,.58) !important;
}

html[data-emergence-theme="light"] :where(.auth-card, .signup-card, .auth-form, .signup-step, .human-check, .turnstile-shell) {
  color: var(--em-light-copy) !important;
  background: var(--em-light-card-readable) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.18), rgba(224,244,218,.08)) !important;
  border-color: var(--em-light-card-border) !important;
  box-shadow: 0 18px 42px rgba(16,32,16,.14) !important;
  -webkit-backdrop-filter: blur(4px) saturate(1.05) !important;
  backdrop-filter: blur(4px) saturate(1.05) !important;
}

html[data-emergence-theme="light"] .signup-card,
html[data-emergence-theme="light"] .auth-card {
  background: var(--em-light-card-readable-strong) !important;
}

html[data-emergence-theme="light"] :where(.auth-card, .signup-card, .auth-form, .signup-step, .human-check, .turnstile-shell) :where(h1, h2, h3, h4, label, strong, b, .kicker) {
  color: var(--em-light-ink) !important;
  text-shadow: var(--em-title-separator) !important;
}

html[data-emergence-theme="light"] :where(.auth-card, .signup-card, .auth-form, .signup-step, .human-check, .turnstile-shell) :where(p, span, small, .small, .muted, .note, .signin-note) {
  color: var(--em-light-copy) !important;
  text-shadow: 0 1px 2px rgba(255,255,255,.52) !important;
}

html[data-emergence-theme="light"] :where(.auth-card, .signup-card, .auth-form, .human-check, .turnstile-shell) :where(input, textarea, select) {
  color: #071207 !important;
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(54,112,56,.24) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.52) !important;
}

html[data-emergence-theme="light"] :where(.auth-card, .signup-card, .auth-form, .human-check, .turnstile-shell) :where(input, textarea, select)::placeholder {
  color: rgba(7,18,7,.58) !important;
}

html[data-emergence-theme="dark"] .signup-copy p,
html[data-emergence-theme="dark"] .signup-copy .small {
  color: #e4eedf !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.82) !important;
}

html[data-emergence-theme="light"] :where(
  .card,
  .panel,
  .feature-card,
  .product-card,
  .proof-card,
  .gallery-card,
  .download-main,
  .download-side,
  .stat,
  .ba-card,
  .flow-step,
  .loop,
  .loop-step,
  .price-row,
  .fab-file,
  .badge-mock,
  .profile-card,
  .feed-card,
  .work-card,
  .owner-card,
  .settings-card,
  .api-card,
  .badge-card,
  .live-badge,
  .signal-row,
  .mini-stat,
  .trust-strip > div,
  .signal-list > div,
  .mini-grid > div,
  .flow-row > span
) {
  color: var(--em-light-copy) !important;
  background: rgba(250,255,246,.62) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.16), rgba(230,245,225,.08)) !important;
  border-color: var(--em-light-card-border) !important;
  box-shadow: 0 16px 34px rgba(16,32,16,.10) !important;
}

html[data-emergence-theme="light"] :where(
  .card,
  .panel,
  .feature-card,
  .product-card,
  .proof-card,
  .gallery-card,
  .download-main,
  .download-side,
  .stat,
  .ba-card,
  .flow-step,
  .loop,
  .loop-step,
  .price-row,
  .fab-file,
  .badge-mock,
  .profile-card,
  .feed-card,
  .work-card,
  .owner-card,
  .settings-card,
  .api-card,
  .badge-card,
  .live-badge,
  .signal-row,
  .mini-stat,
  .trust-strip > div,
  .signal-list > div,
  .mini-grid > div,
  .flow-row > span
) :where(h1, h2, h3, h4, strong, b, .title, .label, .kicker, .eyebrow) {
  color: var(--em-light-ink) !important;
  text-shadow: var(--em-title-separator) !important;
}

html[data-emergence-theme="light"] :where(
  .card,
  .panel,
  .feature-card,
  .product-card,
  .proof-card,
  .gallery-card,
  .download-main,
  .download-side,
  .stat,
  .ba-card,
  .flow-step,
  .loop,
  .loop-step,
  .price-row,
  .fab-file,
  .badge-mock,
  .profile-card,
  .feed-card,
  .work-card,
  .owner-card,
  .settings-card,
  .api-card,
  .badge-card,
  .live-badge,
  .signal-row,
  .mini-stat,
  .trust-strip > div,
  .signal-list > div,
  .mini-grid > div,
  .flow-row > span
) :where(p, li, span, small, .note, .muted, .subtitle, .copy) {
  color: var(--em-light-copy) !important;
  text-shadow: 0 1px 2px rgba(255,255,255,.52) !important;
}

html[data-emergence-theme="dark"] :where(
  .card,
  .panel,
  .feature-card,
  .product-card,
  .proof-card,
  .gallery-card,
  .download-main,
  .download-side,
  .stat,
  .ba-card,
  .flow-step,
  .loop,
  .loop-step,
  .price-row,
  .fab-file,
  .badge-mock,
  .profile-card,
  .feed-card,
  .work-card,
  .owner-card,
  .settings-card,
  .api-card,
  .badge-card,
  .live-badge,
  .signal-row,
  .mini-stat,
  .trust-strip > div,
  .signal-list > div,
  .mini-grid > div,
  .flow-row > span
) {
  color: #f4f8ef !important;
  background:
    linear-gradient(180deg, rgba(4,10,6,.78), rgba(1,5,3,.88)),
    var(--em-texture-card) center / cover no-repeat !important;
  border-color: rgba(176,255,0,.22) !important;
}

html[data-emergence-theme="dark"] :where(
  .card,
  .panel,
  .feature-card,
  .product-card,
  .proof-card,
  .gallery-card,
  .download-main,
  .download-side,
  .stat,
  .ba-card,
  .flow-step,
  .loop,
  .loop-step,
  .price-row,
  .fab-file,
  .badge-mock,
  .profile-card,
  .feed-card,
  .work-card,
  .owner-card,
  .settings-card,
  .api-card,
  .badge-card,
  .live-badge,
  .signal-row,
  .mini-stat,
  .trust-strip > div,
  .signal-list > div,
  .mini-grid > div,
  .flow-row > span
) :where(h1, h2, h3, h4, strong, b, .title, .label, .kicker, .eyebrow) {
  color: #f8fff2 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,.86), 0 0 18px rgba(176,255,0,.18) !important;
}

html[data-emergence-theme="dark"] :where(
  .card,
  .panel,
  .feature-card,
  .product-card,
  .proof-card,
  .gallery-card,
  .download-main,
  .download-side,
  .stat,
  .ba-card,
  .flow-step,
  .loop,
  .loop-step,
  .price-row,
  .fab-file,
  .badge-mock,
  .profile-card,
  .feed-card,
  .work-card,
  .owner-card,
  .settings-card,
  .api-card,
  .badge-card,
  .live-badge,
  .signal-row,
  .mini-stat,
  .trust-strip > div,
  .signal-list > div,
  .mini-grid > div,
  .flow-row > span
) :where(p, li, span, small, .note, .muted, .subtitle, .copy) {
  color: #dfeedd !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.82) !important;
}

/* 2026-07-03: Header breakpoint hardening.
   There should be no tablet-width state where the two dropdown triggers stack.
   Full desktop nav appears only when it fits; narrower widths use compact nav. */
.shared-nav {
  flex-wrap: nowrap !important;
}

@media (max-width: 1099px) {
  .shared-site-header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding: 9px 16px !important;
  }

  .shared-brand img {
    height: 34px !important;
    max-width: min(28vw, 116px) !important;
  }

  .shared-actions {
    display: none !important;
  }

  .shared-nav {
    min-width: 0 !important;
    justify-self: end !important;
    justify-content: end !important;
    gap: 6px !important;
  }

  .shared-nav-trigger {
    min-height: 36px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    letter-spacing: .01em !important;
    white-space: nowrap !important;
  }

  .shared-nav-label-full {
    display: none !important;
  }

  .shared-nav-label-short {
    display: inline !important;
  }

  .shared-menu-toggle {
    display: inline-grid !important;
    place-items: center !important;
    width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    justify-self: end !important;
  }

  .shared-dropdown {
    left: auto !important;
    right: 0 !important;
    min-width: min(320px, calc(100vw - 28px)) !important;
    max-height: min(72vh, calc(100svh - 92px)) !important;
  }
}

@media (max-width: 420px) {
  .shared-site-header__inner {
    padding-left: 10px !important;
    padding-right: 10px !important;
    gap: 5px !important;
  }

  .shared-brand img {
    height: 30px !important;
    max-width: 88px !important;
  }

  .shared-nav {
    gap: 4px !important;
  }

  .shared-nav-trigger {
    min-height: 34px !important;
    padding: 0 6px !important;
    font-size: 10px !important;
  }

  .shared-menu-toggle {
    width: 36px !important;
    min-height: 36px !important;
  }
}

/* Account dashboard owns solid light-mode surfaces. This late rule beats
   broad no-wash rules intended for marketing pages. */
html[data-emergence-theme="light"] .account-page :where(.account-sidebar, .account-card, .account-side-badge) {
  color: #152416 !important;
  background: #f9fcf4 !important;
  background-color: #f9fcf4 !important;
  background-image: none !important;
  border-color: rgba(40, 88, 45, .18) !important;
  box-shadow: 0 24px 80px rgba(42, 70, 40, .18) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-emergence-theme="light"] .account-page :where(.account-mini-group, .account-list li, .evoice-hub-stat, .account-product-card, .account-bot-card, .account-side-nav a, .account-action-link.secondary, .account-action-button.secondary) {
  color: #172417 !important;
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  border-color: rgba(40, 88, 45, .16) !important;
  box-shadow: none !important;
}