/*
 * CMG Design System v1.0
 * Corporate identity, visual ergonomics and accessibility guardrails.
 */

body[data-theme],
body.portal-shell,
body.portal-auth-shell,
body.field-shell,
body.auth-shell,
body.marketing-shell,
body .marketing-shell,
body.catalog-marketing-page {
  --cmg-blue: var(--cmg-cyan);
  --cmg-blue-strong: #0891b2;
  --cmg-panel: var(--cmg-surface);
  --cmg-panel-alt: var(--cmg-surface-soft);
  --cmg-border: #e5e7eb;
  --cmg-border-strong: #cbd5e1;
  --cmg-text: #111827;
  --cmg-text-soft: #6b7280;
  --cmg-muted: #6b7280;
  --cmg-success: #16a34a;
  --cmg-warning: #f59e0b;
  --cmg-danger: #dc2626;
  --cmg-shadow: var(--cmg-shadow-card);
  background-color: var(--cmg-bg);
  color: var(--cmg-text);
  font-family: var(--cmg-font-ui);
  line-height: var(--cmg-line-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body[data-theme="desktop"],
body[data-theme="cmg"],
.field-shell,
.portal-shell,
.portal-auth-shell,
.auth-shell {
  background:
    linear-gradient(rgba(0, 184, 217, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 184, 217, 0.035) 1px, transparent 1px),
    var(--cmg-bg);
  background-size: 32px 32px;
}

body[data-theme="desktop"] .shell,
body[data-theme="cmg"] .shell,
.field-page,
.portal-page,
.auth-wrap {
  color: var(--cmg-text);
}

body[data-theme="desktop"] h1,
body[data-theme="cmg"] h1,
.field-shell h1,
.portal-shell h1,
.auth-shell h1 {
  color: var(--cmg-text);
  font-size: clamp(28px, 2.2vw, var(--cmg-text-h1));
  letter-spacing: 0;
  line-height: var(--cmg-line-tight);
}

body[data-theme="desktop"] h2,
body[data-theme="cmg"] h2,
.field-shell h2,
.portal-shell h2,
.auth-shell h2 {
  color: var(--cmg-text);
  font-size: clamp(22px, 1.8vw, var(--cmg-text-h2));
  letter-spacing: 0;
  line-height: var(--cmg-line-tight);
}

body[data-theme="desktop"] h3,
body[data-theme="cmg"] h3,
.field-shell h3,
.portal-shell h3,
.auth-shell h3 {
  color: var(--cmg-text);
  font-size: clamp(18px, 1.45vw, var(--cmg-text-h3));
  letter-spacing: 0;
  line-height: var(--cmg-line-tight);
}

body[data-theme="desktop"] a,
body[data-theme="cmg"] a,
.field-shell a,
.portal-shell a,
.auth-shell a {
  color: var(--cmg-blue-strong);
}

body[data-theme="desktop"] .app-header,
body[data-theme="cmg"] .app-header,
.field-topbar,
.portal-topbar {
  background: linear-gradient(180deg, #ffffff 0%, #f2fbfd 100%) !important;
  border-bottom: 1px solid rgba(0, 184, 217, 0.28) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.06) !important;
}

body[data-theme="desktop"] .brand-logo,
body[data-theme="cmg"] .brand-logo,
.field-brand img,
.portal-brand img,
.marketing-brand img {
  object-fit: contain;
}

body[data-theme="desktop"] :where(.workspace-head, .hero, .page-hero, .panel, .card, .dashboard-card, .metric-card, .stat-card, .report-card, .settings-section, .xui-card, .xui-panel),
body[data-theme="cmg"] :where(.workspace-head, .hero, .page-hero, .panel, .card, .dashboard-card, .metric-card, .stat-card, .report-card, .settings-section, .xui-card, .xui-panel),
.field-shell :where(.field-card, .panel, .card, .hero-panel),
.portal-shell :where(.portal-card, .portal-hero, .portal-metrics article),
.auth-shell :where(.auth-card, .auth-panel, .card) {
  background: var(--cmg-surface);
  border: 1px solid var(--cmg-border);
  border-radius: var(--cmg-radius-card);
  box-shadow: var(--cmg-shadow-card);
}

body[data-theme="desktop"] :where(.workspace-head, .hero, .page-hero, .panel, .card, .dashboard-card, .metric-card, .stat-card, .report-card, .settings-section, .xui-card, .xui-panel):hover,
body[data-theme="cmg"] :where(.workspace-head, .hero, .page-hero, .panel, .card, .dashboard-card, .metric-card, .stat-card, .report-card, .settings-section, .xui-card, .xui-panel):hover,
.portal-shell :where(.portal-card, .portal-hero, .portal-metrics article):hover {
  box-shadow: var(--cmg-shadow-hover);
  transition: box-shadow var(--cmg-motion-fast) ease, border-color var(--cmg-motion-fast) ease;
}

body[data-theme="desktop"] :where(.workspace-head, .hero, .page-hero, .panel, .card, .dashboard-card, .metric-card, .stat-card, .report-card, .settings-section, .xui-card, .xui-panel) > :where(header, .panel-header, .card-header, .section-header),
body[data-theme="cmg"] :where(.workspace-head, .hero, .page-hero, .panel, .card, .dashboard-card, .metric-card, .stat-card, .report-card, .settings-section, .xui-card, .xui-panel) > :where(header, .panel-header, .card-header, .section-header),
.portal-shell :where(.portal-card, .portal-hero) > :where(header, .portal-card__header) {
  background: linear-gradient(90deg, rgba(0, 184, 217, 0.08), rgba(255, 255, 255, 0.82));
  border-bottom: 1px solid var(--cmg-border);
  border-radius: var(--cmg-radius-card) var(--cmg-radius-card) 0 0;
}

body[data-theme="desktop"] :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
body[data-theme="cmg"] :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.field-shell :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.portal-shell :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.portal-auth-shell :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.auth-shell :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 44px;
  border: 1px solid var(--cmg-border-strong);
  border-radius: var(--cmg-radius-control);
  background: var(--cmg-surface);
  color: var(--cmg-text);
  font: 500 14px/1.45 var(--cmg-font-ui);
  padding-inline: var(--cmg-input-x);
}

body[data-theme="desktop"] :where(input, select, textarea):focus,
body[data-theme="cmg"] :where(input, select, textarea):focus,
.field-shell :where(input, select, textarea):focus,
.portal-shell :where(input, select, textarea):focus,
.portal-auth-shell :where(input, select, textarea):focus,
.auth-shell :where(input, select, textarea):focus {
  border-color: var(--cmg-cyan);
  box-shadow: 0 0 0 3px rgba(0, 184, 217, 0.16);
  outline: none;
}

body[data-theme="desktop"] :where(button, .button, .btn, .portal-button, .field-main-link),
body[data-theme="cmg"] :where(button, .button, .btn),
.field-shell :where(button, .button, .btn, .field-main-link),
.portal-shell :where(button, .button, .btn, .portal-button),
.portal-auth-shell :where(button, .button, .btn, .portal-button),
.auth-shell :where(button, .button, .btn) {
  min-height: 44px;
  border-radius: var(--cmg-radius-control);
  font-family: var(--cmg-font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}

body[data-theme="desktop"] :where(.button-primary, .btn-primary, .button.is-primary, button[type="submit"]),
body[data-theme="cmg"] :where(.button-primary, .btn-primary, .button.is-primary, button[type="submit"]),
.field-shell :where(.button-primary, .btn-primary, .field-main-link, button[type="submit"]),
.portal-shell :where(.portal-button--primary, .button-primary, .btn-primary, button[type="submit"]),
.portal-auth-shell :where(.portal-button--primary, .button-primary, .btn-primary, button[type="submit"]),
.auth-shell :where(.button-primary, .btn-primary, button[type="submit"]) {
  background: var(--cmg-navy);
  border-color: var(--cmg-navy);
  color: #f8fafc;
}

body[data-theme="desktop"] :where(.button-primary, .btn-primary, .button.is-primary, button[type="submit"]):hover,
body[data-theme="cmg"] :where(.button-primary, .btn-primary, .button.is-primary, button[type="submit"]):hover,
.field-shell :where(.button-primary, .btn-primary, .field-main-link, button[type="submit"]):hover,
.portal-shell :where(.portal-button--primary, .button-primary, .btn-primary, button[type="submit"]):hover,
.portal-auth-shell :where(.portal-button--primary, .button-primary, .btn-primary, button[type="submit"]):hover,
.auth-shell :where(.button-primary, .btn-primary, button[type="submit"]):hover {
  background: #172554;
  border-color: #172554;
}

body[data-theme="desktop"] :where(.pill, .badge, .tag),
body[data-theme="cmg"] :where(.pill, .badge, .tag),
.field-shell :where(.pill, .badge, .tag),
.portal-shell :where(.pill, .badge, .tag) {
  border-radius: var(--cmg-radius-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

body[data-theme="desktop"] :where(table:not(.invoice-document-lines)):not(.calendar),
body[data-theme="cmg"] :where(table:not(.invoice-document-lines)):not(.calendar),
.portal-shell :where(table):not(.invoice-document-lines),
.field-shell :where(table):not(.invoice-document-lines) {
  border-collapse: separate;
  border-spacing: 0;
  color: var(--cmg-text);
  font-family: var(--cmg-font-data);
  font-size: var(--cmg-text-table);
}

body[data-theme="desktop"] :where(table:not(.invoice-document-lines)) th,
body[data-theme="cmg"] :where(table:not(.invoice-document-lines)) th,
.portal-shell :where(table) th,
.field-shell :where(table) th {
  min-height: var(--cmg-table-head-height);
  background: var(--cmg-table-head-bg);
  color: var(--cmg-slate);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  padding: var(--cmg-table-cell-y) var(--cmg-table-cell-x);
  text-transform: none;
}

body[data-theme="desktop"] :where(table:not(.invoice-document-lines)) td,
body[data-theme="cmg"] :where(table:not(.invoice-document-lines)) td,
.portal-shell :where(table) td,
.field-shell :where(table) td {
  min-height: var(--cmg-table-row-height);
  border-bottom: 1px solid var(--cmg-border);
  padding: var(--cmg-table-cell-y) var(--cmg-table-cell-x);
  vertical-align: middle;
}

body[data-theme="desktop"] :where(table:not(.invoice-document-lines)) tr:hover td,
body[data-theme="cmg"] :where(table:not(.invoice-document-lines)) tr:hover td,
.portal-shell :where(table) tr:hover td,
.field-shell :where(table) tr:hover td {
  background: var(--cmg-table-hover);
}

body[data-theme="desktop"] :where(.table-wrap, .data-table-wrap, .ledger-table-wrap, .report-table-wrap, .modal-table-wrap),
body[data-theme="cmg"] :where(.table-wrap, .data-table-wrap, .ledger-table-wrap, .report-table-wrap, .modal-table-wrap) {
  border: 1px solid var(--cmg-border);
  border-radius: var(--cmg-radius-card);
  overflow: auto;
  box-shadow: var(--cmg-shadow-card);
}

body[data-theme="desktop"] :where(.table-wrap, .data-table-wrap, .ledger-table-wrap, .report-table-wrap, .modal-table-wrap) thead th,
body[data-theme="cmg"] :where(.table-wrap, .data-table-wrap, .ledger-table-wrap, .report-table-wrap, .modal-table-wrap) thead th {
  position: sticky;
  top: 0;
  z-index: 3;
}

#cmgLiveSearchPopover,
.global-search__results,
.assistant-autocomplete,
.inventory-item-autocomplete {
  border: 1px solid var(--cmg-border-strong) !important;
  border-radius: var(--cmg-radius-card) !important;
  background: var(--cmg-surface) !important;
  box-shadow: var(--cmg-shadow-hover) !important;
  overflow: auto !important;
}

#cmgLiveSearchPopover .global-search__item,
.global-search__results .global-search__item,
.assistant-autocomplete__item,
.assistant-autocomplete__option,
.inventory-item-autocomplete__item {
  min-height: 44px;
  border-radius: var(--cmg-radius-control) !important;
  color: var(--cmg-text) !important;
  display: grid;
  gap: 2px;
  padding: 10px 12px !important;
}

#cmgLiveSearchPopover .global-search__item:hover,
#cmgLiveSearchPopover .global-search__item.is-active,
.global-search__results .global-search__item:hover,
.assistant-autocomplete__item:hover,
.assistant-autocomplete__item.is-active,
.assistant-autocomplete__option:hover,
.inventory-item-autocomplete__item:hover,
.inventory-item-autocomplete__item[aria-selected="true"] {
  background: var(--cmg-table-selected) !important;
}

#cmgLiveSearchPopover .global-search__group-title,
.global-search__results .global-search__group-title,
.assistant-autocomplete__title,
.inventory-item-autocomplete__item strong {
  color: var(--cmg-navy) !important;
  font-size: 13px;
  letter-spacing: 0;
}

#cmgLiveSearchPopover .global-search__item-meta,
.global-search__results .global-search__item-meta,
.assistant-autocomplete__meta {
  color: var(--cmg-muted) !important;
  font-size: 12px;
}

.status-paid,
[data-status="paid"],
[data-payment-state="paid"] {
  --ui-status-color: var(--cmg-success);
  --ui-status-bg: #dcfce7;
}

.status-partial,
.status-partial-paid,
[data-status="partial"],
[data-payment-state="partial"] {
  --ui-status-color: var(--cmg-warning);
  --ui-status-bg: #fef3c7;
}

.status-overdue,
[data-status="overdue"],
[data-payment-state="overdue"] {
  --ui-status-color: var(--cmg-error);
  --ui-status-bg: #fee2e2;
}

.status-paid,
.status-partial,
.status-partial-paid,
.status-overdue,
[data-status="paid"],
[data-status="partial"],
[data-status="overdue"],
[data-payment-state] {
  background: var(--ui-status-bg);
  color: var(--ui-status-color);
  border-radius: var(--cmg-radius-pill);
  font-weight: 800;
}

body.theme-dark,
body[data-theme="dark"],
body[data-color-scheme="dark"],
html[data-theme="dark"] body {
  color-scheme: dark;
  --cmg-bg: var(--cmg-dark-bg);
  --cmg-surface: var(--cmg-dark-card);
  --cmg-surface-soft: #182235;
  --cmg-text: var(--cmg-dark-text);
  --cmg-muted: var(--cmg-dark-muted);
  --cmg-border: var(--cmg-dark-border);
  --cmg-border-strong: rgba(255, 255, 255, 0.14);
  --cmg-table-head-bg: #182235;
  --cmg-table-hover: rgba(0, 184, 217, 0.08);
  background: var(--cmg-dark-bg);
  color: var(--cmg-dark-text);
}

body.theme-dark :where(.app-header, .field-topbar, .portal-topbar),
body[data-theme="dark"] :where(.app-header, .field-topbar, .portal-topbar),
body[data-color-scheme="dark"] :where(.app-header, .field-topbar, .portal-topbar),
html[data-theme="dark"] body :where(.app-header, .field-topbar, .portal-topbar) {
  background: linear-gradient(180deg, #101827 0%, #0b1220 100%) !important;
  border-bottom-color: var(--cmg-dark-border) !important;
}

@media (max-width: 768px) {
  body.is-mobile-next,
  .field-shell,
  .portal-shell {
    --cmg-panel-x: 16px;
    --cmg-panel-y: 16px;
    --cmg-grid-gap: 12px;
    --cmg-text-body: 15px;
    font-size: 15px;
  }

  body.is-mobile-next h1,
  .field-shell h1,
  .portal-shell h1 {
    font-size: 24px !important;
    line-height: 1.18;
  }

  body.is-mobile-next h2,
  .field-shell h2,
  .portal-shell h2 {
    font-size: 20px !important;
  }

  body.is-mobile-next :where(.workspace-head, .hero, .page-hero, .panel, .card, .dashboard-card, .metric-card, .stat-card, .report-card, .settings-section, .xui-card, .xui-panel),
  .field-shell :where(.field-card, .panel, .card, .hero-panel),
  .portal-shell :where(.portal-card, .portal-hero, .portal-metrics article) {
    border-radius: var(--cmg-radius-card);
    padding: 16px;
  }

  body.is-mobile-next :where(button, .button, .btn),
  .field-shell :where(button, .button, .btn),
  .portal-shell :where(button, .button, .btn) {
    min-height: 44px;
  }
}

@media (min-width: 769px) and (max-width: 1280px) {
  body.is-mobile-next,
  .field-shell,
  .portal-shell {
    --cmg-panel-x: 20px;
    --cmg-panel-y: 20px;
    --cmg-grid-gap: 16px;
  }
}

@media print {
  body {
    background: #ffffff !important;
  }

  body :where(.app-header, .mobile-topbar, .sidebar, .bottom-nav, .portal-topbar) {
    display: none !important;
  }
}

/*
 * CMG Corporate Identity Extension
 * Quiet premium brand treatment for platform surfaces.
 */

:root {
  --cmg-brand-navy: #0F172A;
  --cmg-brand-slate: #334155;
  --cmg-brand-cyan: #00B8D9;
  --cmg-brand-violet: #5B5BD6;
  --cmg-brand-ice: #F8FAFC;
  --cmg-brand-line: #D8E8F0;
  --cmg-brand-dark-bg: #0B1220;
  --cmg-brand-dark-card: #121A29;
  --cmg-brand-mark-size: 44px;
  --cmg-brand-wordmark-width: 132px;
}

body[data-theme],
body.portal-shell,
body.portal-auth-shell,
body.field-shell,
body.auth-shell,
body.marketing-shell,
body .marketing-shell,
body.catalog-marketing-page {
  --cmg-blue: var(--cmg-brand-cyan);
  --cmg-blue-strong: #0787A3;
  --cmg-link: #075985;
}

.app-brand,
.field-brand,
.portal-brand,
.marketing-brand,
.kti-brand {
  letter-spacing: 0;
}

.app-brand__logo,
.marketing-brand img {
  width: var(--cmg-brand-wordmark-width) !important;
  max-width: var(--cmg-brand-wordmark-width) !important;
  height: auto !important;
  object-fit: contain !important;
}

.brand-logo,
.mobile-topbar__logo,
.field-brand img,
.portal-brand img,
.kti-brand img {
  width: var(--cmg-brand-mark-size) !important;
  height: var(--cmg-brand-mark-size) !important;
  max-width: var(--cmg-brand-mark-size) !important;
  max-height: var(--cmg-brand-mark-size) !important;
  object-fit: contain !important;
}

.app-brand__meta strong,
.portal-brand span,
.field-brand strong {
  color: var(--cmg-brand-navy);
  font-weight: 800;
  letter-spacing: 0;
}

body[data-theme="desktop"] .app-header,
body[data-theme="cmg"] .app-header,
.field-topbar,
.portal-topbar {
  background:
    linear-gradient(90deg, rgba(248, 250, 252, .98), rgba(236, 253, 255, .96)) !important;
  border-bottom-color: rgba(0, 184, 217, .24) !important;
}

body[data-theme="desktop"] .app-header__ai-desk,
body[data-theme="cmg"] .app-header__ai-desk {
  border-color: rgba(0, 184, 217, .34);
  background: rgba(255, 255, 255, .82);
  color: var(--cmg-brand-navy);
}

body[data-theme="desktop"] .header-nav__link,
body[data-theme="cmg"] .header-nav__link {
  min-height: 40px;
  border-radius: 10px;
  color: var(--cmg-brand-slate);
  font-weight: 750;
}

body[data-theme="desktop"] .header-nav__link.is-active,
body[data-theme="cmg"] .header-nav__link.is-active {
  border-color: rgba(0, 184, 217, .42);
  background: rgba(0, 184, 217, .1);
  color: var(--cmg-brand-navy);
  box-shadow: inset 0 -2px 0 var(--cmg-brand-cyan);
}

.marketing-shell {
  --mk-bg: var(--cmg-brand-dark-bg);
  --mk-text: #D8DEE8;
  --mk-muted: #94A3B8;
  --mk-accent: var(--cmg-brand-cyan);
  --mk-warm: #E9C46A;
  color: var(--mk-text);
  font-family: var(--cmg-font-ui) !important;
}

body:not(.catalog-marketing-page) .marketing-shell {
  background: transparent !important;
  color: #D8DEE8 !important;
}

body:not(.catalog-marketing-page) .marketing-brand img {
  width: var(--cmg-brand-wordmark-width) !important;
  max-width: var(--cmg-brand-wordmark-width) !important;
  height: auto !important;
  object-fit: contain !important;
}

body:not(.catalog-marketing-page) {
  background:
    radial-gradient(circle at 14% 12%, rgba(0, 184, 217, .12), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(91, 91, 214, .1), transparent 24%),
    linear-gradient(180deg, #0B1220 0%, #0D1725 52%, #0B1220 100%) !important;
}

body:not(.catalog-marketing-page) .marketing-header {
  background: rgba(18, 26, 41, .84) !important;
  border-color: rgba(255, 255, 255, .08) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 40px rgba(2, 8, 18, .28) !important;
}

body:not(.catalog-marketing-page) .hero-poster {
  min-height: auto !important;
  padding: clamp(40px, 5vw, 76px) clamp(24px, 4vw, 64px) !important;
  border-color: rgba(255, 255, 255, .08) !important;
  background:
    linear-gradient(135deg, rgba(18, 26, 41, .92), rgba(15, 23, 42, .78)),
    radial-gradient(circle at 18% 20%, rgba(0, 184, 217, .13), transparent 32%) !important;
}

body:not(.catalog-marketing-page) .hero-poster h1 {
  max-width: 720px;
  color: #F8FAFC !important;
  font-size: clamp(2.05rem, 3.4vw, 3.25rem) !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
  line-height: 1.1 !important;
}

body:not(.catalog-marketing-page) .hero-copy {
  max-width: 680px;
  color: #B8C4D4 !important;
  font-size: clamp(.98rem, 1vw, 1.08rem) !important;
  line-height: 1.62 !important;
}

.hero-kicker,
.section-kicker,
.capability-card span,
.integration-pill,
.planner-badge,
.planner-tile__eyebrow {
  color: var(--cmg-brand-cyan) !important;
  letter-spacing: .08em !important;
  font-weight: 850 !important;
}

.marketing-button {
  min-height: 42px !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.marketing-button--primary {
  background: linear-gradient(135deg, var(--cmg-brand-cyan), #68E1F2) !important;
  color: #06131F !important;
  box-shadow: 0 14px 32px rgba(0, 184, 217, .18) !important;
}

.marketing-button--ghost {
  border-color: rgba(216, 222, 232, .18) !important;
  background: rgba(255, 255, 255, .035) !important;
  color: #D8DEE8 !important;
}

.capability-card,
.commerce-card,
.integration-band__item,
.demo-panel,
.field-panel,
.planner-panel,
.hero-caption {
  border-color: rgba(255, 255, 255, .08) !important;
  background: rgba(18, 26, 41, .74) !important;
  box-shadow: 0 18px 48px rgba(2, 8, 18, .24) !important;
}

.capability-card h3,
.commerce-card strong,
.integration-band__item strong,
.workflow-copy h2,
.planner-copy h2,
.demo-panel h2 {
  color: #F8FAFC !important;
  letter-spacing: 0 !important;
}

.capability-card p,
.commerce-card p,
.integration-band__item p,
.planner-copy p,
.demo-panel__copy p,
.field-panel p,
.workflow-step p {
  color: #AAB8C8 !important;
  line-height: 1.55 !important;
}

.public-language-switch label {
  border-color: rgba(255, 255, 255, .12) !important;
  background: rgba(18, 26, 41, .88) !important;
}

.cmg-brand-spec,
.brand-system-card,
.identity-card {
  background: var(--cmg-surface);
  border: 1px solid var(--cmg-border);
  border-radius: var(--cmg-radius-card);
  box-shadow: var(--cmg-shadow-card);
}

.cmg-brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(0, 184, 217, .24);
  border-radius: var(--cmg-radius-pill);
  background: rgba(0, 184, 217, .08);
  color: var(--cmg-brand-navy);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

body.theme-dark .app-brand__meta strong,
body[data-theme="dark"] .app-brand__meta strong,
body[data-color-scheme="dark"] .app-brand__meta strong,
html[data-theme="dark"] body .app-brand__meta strong {
  color: #D8DEE8;
}

body.theme-dark .cmg-brand-chip,
body[data-theme="dark"] .cmg-brand-chip,
body[data-color-scheme="dark"] .cmg-brand-chip,
html[data-theme="dark"] body .cmg-brand-chip {
  border-color: rgba(0, 184, 217, .28);
  background: rgba(0, 184, 217, .12);
  color: #D8DEE8;
}

@media (max-width: 768px) {
  :root {
    --cmg-brand-mark-size: 38px;
    --cmg-brand-wordmark-width: 112px;
  }

  body:not(.catalog-marketing-page) .marketing-header {
    width: min(100% - 24px, 720px) !important;
    border-radius: 14px !important;
  }

  body:not(.catalog-marketing-page) .hero-poster h1 {
    font-size: clamp(1.9rem, 8vw, 2.45rem) !important;
    line-height: 1.12 !important;
  }

  .marketing-button {
    min-height: 44px !important;
  }
}

/* Final public SaaS homepage overrides. Loaded after marketing.css on purpose. */
body:has(.cmg-public-saas) {
  background: #eef4f8 !important;
}

body:has(.cmg-public-saas) .public-language-switch {
  position: fixed !important;
  top: auto !important;
  right: 18px !important;
  bottom: 18px !important;
  left: auto !important;
  z-index: 80 !important;
}

body:has(.cmg-public-saas) .public-language-switch label {
  min-height: 42px !important;
  border: 1px solid #d3e1ec !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: #0d1f33 !important;
  box-shadow: 0 14px 34px rgba(29, 63, 91, 0.14) !important;
}

body:has(.cmg-public-saas) .public-language-switch select {
  color: #0d1f33 !important;
}

.cmg-public-saas .cmg-public-hero h1,
.cmg-public-saas .cmg-public-section h2,
.cmg-public-saas .cmg-public-split-copy h2,
.cmg-public-saas .cmg-public-demo h2 {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
}

.cmg-public-saas .cmg-public-hero h1 {
  max-width: 680px !important;
  font-size: clamp(36px, 4.1vw, 56px) !important;
  line-height: 1.04 !important;
  font-weight: 900 !important;
}

.cmg-public-saas .cmg-public-section h2,
.cmg-public-saas .cmg-public-split-copy h2,
.cmg-public-saas .cmg-public-demo h2 {
  font-size: clamp(28px, 2.7vw, 42px) !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
}

.cmg-public-saas .cmg-public-hero {
  min-height: auto !important;
  padding-top: 56px !important;
}

.cmg-public-saas .cmg-public-button--primary {
  background: #0879bd !important;
  border-color: #0879bd !important;
  color: #fff !important;
}

.cmg-public-saas .cmg-public-button--ghost {
  background: #fff !important;
  color: #0f2b45 !important;
}

.cmg-public-saas .cmg-public-button--text {
  background: transparent !important;
  border-color: transparent !important;
  color: #006cae !important;
}

.cmg-public-saas [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.cmg-public-saas .cmg-public-nav {
  min-height: 58px !important;
  padding: 8px 10px !important;
  margin-top: 10px !important;
  box-shadow: 0 14px 34px rgba(31, 60, 86, 0.1) !important;
}

.cmg-public-saas .cmg-public-brand img {
  width: 132px !important;
}

.cmg-public-saas .cmg-public-nav__links a {
  min-height: 34px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
}

.cmg-public-saas .cmg-public-button {
  min-height: 36px !important;
  padding: 0 13px !important;
  font-size: 13px !important;
}

.cmg-public-saas .cmg-public-hero {
  grid-template-columns: minmax(0, 0.96fr) minmax(360px, 0.84fr) !important;
  gap: 28px !important;
  padding-top: 38px !important;
  padding-bottom: 24px !important;
}

.cmg-public-saas .cmg-public-hero h1 {
  max-width: 610px !important;
  font-size: clamp(34px, 3.25vw, 48px) !important;
  line-height: 1.05 !important;
}

.cmg-public-saas .cmg-public-lead {
  max-width: 620px !important;
  margin-top: 14px !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

.cmg-public-saas .cmg-public-hero__actions {
  margin-top: 18px !important;
  gap: 8px !important;
}

.cmg-public-saas .cmg-public-trustbar {
  margin-top: 16px !important;
  gap: 6px !important;
}

.cmg-public-saas .cmg-public-trustbar span,
.cmg-public-saas .cmg-public-proofline span,
.cmg-public-saas .cmg-public-proofline strong {
  min-height: 26px !important;
  padding: 0 9px !important;
  font-size: 11px !important;
}

.cmg-public-saas .cmg-public-proofline {
  margin-top: 10px !important;
  gap: 6px !important;
}

.cmg-public-saas .cmg-public-product {
  box-shadow: 0 22px 56px rgba(28, 58, 86, 0.13) !important;
}

.cmg-public-saas .cmg-public-product::before {
  height: 6px !important;
}

.cmg-public-saas .cmg-public-product__top {
  padding: 13px 16px !important;
}

.cmg-public-saas .cmg-public-product__grid {
  gap: 10px !important;
  padding: 14px !important;
}

.cmg-public-saas .cmg-public-metric {
  min-height: 88px !important;
  padding: 12px !important;
}

.cmg-public-saas .cmg-public-metric strong {
  margin-top: 8px !important;
  font-size: 23px !important;
}

.cmg-public-saas .cmg-public-metric small,
.cmg-public-saas .cmg-public-preview-row p,
.cmg-public-saas .cmg-public-flow p,
.cmg-public-saas .cmg-public-persona-grid p,
.cmg-public-saas .cmg-public-module p,
.cmg-public-saas .cmg-public-portal-list span,
.cmg-public-saas .cmg-public-integration-grid p {
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.cmg-public-saas .cmg-public-preview-row {
  margin: 0 14px 12px !important;
  padding: 12px !important;
}

.cmg-public-saas .cmg-public-product-strip {
  padding: 0 14px 10px !important;
  gap: 6px !important;
}

.cmg-public-saas .cmg-public-product-strip span {
  min-height: 26px !important;
  font-size: 10px !important;
}

.cmg-public-saas .cmg-public-mini-chart {
  height: 92px !important;
  padding: 0 18px 16px !important;
  gap: 8px !important;
}

.cmg-public-saas .cmg-public-personas {
  padding: 0 0 24px !important;
}

.cmg-public-saas .cmg-public-personas__heading {
  gap: 18px !important;
  margin-bottom: 10px !important;
}

.cmg-public-saas .cmg-public-personas__heading h2 {
  font-size: clamp(22px, 2vw, 30px) !important;
  line-height: 1.08 !important;
}

.cmg-public-saas .cmg-public-persona-grid,
.cmg-public-saas .cmg-public-flow,
.cmg-public-saas .cmg-public-module-grid,
.cmg-public-saas .cmg-public-portal-list,
.cmg-public-saas .cmg-public-integration-grid {
  gap: 10px !important;
}

.cmg-public-saas .cmg-public-persona-grid article,
.cmg-public-saas .cmg-public-flow article,
.cmg-public-saas .cmg-public-module,
.cmg-public-saas .cmg-public-portal-list article,
.cmg-public-saas .cmg-public-integration-grid article {
  padding: 14px !important;
  box-shadow: 0 10px 24px rgba(36, 62, 86, 0.06) !important;
}

.cmg-public-saas .cmg-public-flow strong,
.cmg-public-saas .cmg-public-persona-grid strong,
.cmg-public-saas .cmg-public-module strong,
.cmg-public-saas .cmg-public-portal-list strong,
.cmg-public-saas .cmg-public-integration-grid strong {
  font-size: 14px !important;
}

.cmg-public-saas .cmg-public-band {
  padding-bottom: 22px !important;
}

.cmg-public-saas .cmg-public-section {
  padding: 38px 0 !important;
}

.cmg-public-saas .cmg-public-section__heading {
  margin-bottom: 16px !important;
  gap: 24px !important;
}

.cmg-public-saas .cmg-public-section h2,
.cmg-public-saas .cmg-public-split-copy h2,
.cmg-public-saas .cmg-public-demo h2 {
  font-size: clamp(24px, 2.2vw, 34px) !important;
}

.cmg-public-saas .cmg-public-demo {
  padding: 22px !important;
  gap: 22px !important;
}

@media (max-width: 720px) {
  body:has(.cmg-public-saas) .public-language-switch {
    display: none !important;
  }

  .cmg-public-saas .cmg-public-hero h1 {
    font-size: clamp(28px, 8.2vw, 35px) !important;
    line-height: 1.07 !important;
  }

  .cmg-public-saas .cmg-public-hero {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding-top: 24px !important;
    padding-bottom: 18px !important;
  }

  .cmg-public-saas .cmg-public-nav {
    min-height: 0 !important;
  }

  .cmg-public-saas .cmg-public-brand img {
    width: 120px !important;
  }

  .cmg-public-saas .cmg-public-lead {
    font-size: 14px !important;
  }

  .cmg-public-saas .cmg-public-product {
    margin-top: 2px !important;
  }

  .cmg-public-saas .cmg-public-section {
    padding: 28px 0 !important;
  }

  .cmg-public-saas .cmg-public-personas__heading h2,
  .cmg-public-saas .cmg-public-section h2,
  .cmg-public-saas .cmg-public-split-copy h2,
  .cmg-public-saas .cmg-public-demo h2 {
    font-size: clamp(22px, 7vw, 30px) !important;
  }
}

/* Nexus-aligned public homepage */
.cmg-nexus-public {
  --nx-bg: #e8f0f6;
  --nx-card: #fff;
  --nx-line: #cdddea;
  --nx-blue: #0879bd;
  --nx-blue-dark: #055e96;
  --nx-text: #06192b;
  --nx-muted: #55708a;
  background: linear-gradient(180deg, #f3f8fc 0%, #e8f0f6 100%) !important;
}

.cmg-nexus-public .cmg-nexus-main,
.cmg-nexus-public .cmg-nexus-hero,
.cmg-nexus-public .cmg-nexus-strip,
.cmg-nexus-public .cmg-nexus-modules,
.cmg-nexus-public .cmg-nexus-proof,
.cmg-nexus-public .cmg-nexus-demo,
.cmg-nexus-public .cmg-nexus-footer {
  width: min(1240px, calc(100vw - 40px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.cmg-nexus-public .cmg-nexus-nav {
  border-color: var(--nx-line) !important;
  background: rgba(255, 255, 255, .94) !important;
}

.cmg-nexus-hero {
  display: grid !important;
  grid-template-columns: 180px minmax(0, 1fr) 330px !important;
  gap: 12px !important;
  padding: 28px 0 14px !important;
}

.cmg-nexus-rail,
.cmg-nexus-stage,
.cmg-nexus-signals,
.cmg-nexus-strip,
.cmg-nexus-module-grid article,
.cmg-nexus-proof article,
.cmg-nexus-demo {
  border: 1px solid var(--nx-line) !important;
  border-radius: 8px !important;
  background: var(--nx-card) !important;
  box-shadow: 0 12px 28px rgba(25, 58, 86, .08) !important;
}

.cmg-nexus-rail {
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
  padding: 12px !important;
}

.cmg-nexus-rail__label,
.cmg-nexus-signals__head span,
.cmg-nexus-kpis span,
.cmg-nexus-strip span,
.cmg-nexus-proof span {
  color: #006cae !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.cmg-nexus-rail a {
  display: grid !important;
  gap: 3px !important;
  padding: 10px !important;
  border: 1px solid #dce8f1 !important;
  border-radius: 8px !important;
  background: #f8fbfe !important;
  color: var(--nx-text) !important;
  text-decoration: none !important;
}

.cmg-nexus-rail a.is-active {
  border-color: #86c7ea !important;
  background: #eaf7ff !important;
  box-shadow: inset 3px 0 0 var(--nx-blue) !important;
}

.cmg-nexus-rail a strong {
  font-size: 13px !important;
  line-height: 1.15 !important;
}

.cmg-nexus-rail a small {
  color: var(--nx-muted) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.cmg-nexus-stage {
  padding: 16px !important;
}

.cmg-nexus-stage__head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 18px !important;
  align-items: start !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid #e2ecf3 !important;
}

.cmg-nexus-stage__head h1 {
  max-width: 720px !important;
  margin: 0 !important;
  color: var(--nx-text) !important;
  font-size: clamp(32px, 3.2vw, 48px) !important;
  font-weight: 950 !important;
  line-height: 1.03 !important;
  letter-spacing: 0 !important;
}

.cmg-nexus-stage__head p:not(.cmg-public-eyebrow),
.cmg-nexus-demo p,
.cmg-nexus-proof p,
.cmg-nexus-module-grid p,
.cmg-nexus-signals p {
  color: var(--nx-muted) !important;
  font-size: 12px !important;
  line-height: 1.48 !important;
}

.cmg-nexus-stage__head p:not(.cmg-public-eyebrow) {
  max-width: 680px !important;
  margin: 9px 0 0 !important;
}

.cmg-nexus-status {
  display: grid !important;
  gap: 5px !important;
  min-width: 150px !important;
  padding: 10px !important;
  border: 1px solid #d7e6f1 !important;
  border-radius: 8px !important;
  background: #f7fbfe !important;
}

.cmg-nexus-status span {
  color: #0a7c5b !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.cmg-nexus-status strong {
  color: var(--nx-text) !important;
  font-size: 14px !important;
}

.cmg-nexus-search {
  display: grid !important;
  grid-template-columns: 112px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  margin-top: 12px !important;
  padding: 10px 12px !important;
  border: 1px solid #cae0ef !important;
  border-radius: 8px !important;
  background: #f3f9fe !important;
}

.cmg-nexus-search span {
  color: #006cae !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.cmg-nexus-search strong {
  color: var(--nx-text) !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
}

.cmg-nexus-kpis {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 12px !important;
}

.cmg-nexus-kpis article {
  min-height: 88px !important;
  padding: 12px !important;
  border: 1px solid #d9e6f0 !important;
  border-radius: 8px !important;
  background: #fff !important;
}

.cmg-nexus-kpis strong {
  display: block !important;
  margin-top: 8px !important;
  color: var(--nx-text) !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

.cmg-nexus-kpis small {
  display: block !important;
  margin-top: 7px !important;
  color: var(--nx-muted) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.cmg-nexus-stage__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

.cmg-nexus-signals {
  padding: 12px !important;
}

.cmg-nexus-signals__head {
  display: flex !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid #e2ecf3 !important;
}

.cmg-nexus-signals__head strong {
  color: var(--nx-muted) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

.cmg-nexus-signals article {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: start !important;
  padding: 11px 0 !important;
  border-bottom: 1px solid #edf3f8 !important;
}

.cmg-nexus-signals article:last-child {
  border-bottom: 0 !important;
}

.cmg-nexus-signals article strong,
.cmg-nexus-module-grid article strong,
.cmg-nexus-proof article strong {
  display: block !important;
  color: var(--nx-text) !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

.cmg-nexus-signals article p,
.cmg-nexus-module-grid article p,
.cmg-nexus-proof article p {
  margin: 6px 0 0 !important;
}

.cmg-nexus-signals article > span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  padding: 0 8px !important;
  border: 1px solid #cae0ef !important;
  border-radius: 999px !important;
  background: #f5fbff !important;
  color: #006cae !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
}

.cmg-nexus-strip {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 10px !important;
}

.cmg-nexus-strip span {
  display: inline-flex !important;
  min-height: 26px !important;
  align-items: center !important;
  padding: 0 9px !important;
  border: 1px solid #dce8f1 !important;
  border-radius: 999px !important;
  background: #f8fbfe !important;
  color: #38526d !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.cmg-nexus-modules,
.cmg-nexus-proof,
.cmg-nexus-demo {
  margin-top: 14px !important;
}

.cmg-nexus-section-head {
  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: end !important;
  margin-bottom: 10px !important;
}

.cmg-nexus-section-head h2,
.cmg-nexus-demo h2 {
  margin: 0 !important;
  color: var(--nx-text) !important;
  font-size: clamp(24px, 2.4vw, 34px) !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
}

.cmg-nexus-module-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.cmg-nexus-module-grid article {
  min-height: 118px !important;
  padding: 14px !important;
}

.cmg-nexus-proof {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.cmg-nexus-proof article {
  padding: 14px !important;
}

.cmg-nexus-proof span {
  display: block !important;
  margin-bottom: 9px !important;
}

.cmg-nexus-demo {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px) !important;
  gap: 18px !important;
  padding: 18px !important;
}

.cmg-nexus-demo-form {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: start !important;
}

.cmg-nexus-demo-form button {
  grid-column: 1 / -1 !important;
}

.cmg-nexus-footer {
  padding-top: 14px !important;
}

@media (max-width: 1120px) {
  .cmg-nexus-hero {
    grid-template-columns: 1fr !important;
  }

  .cmg-nexus-rail {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  .cmg-nexus-rail__label {
    grid-column: 1 / -1 !important;
  }

  .cmg-nexus-signals {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .cmg-nexus-signals__head {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 760px) {
  .cmg-nexus-public .cmg-nexus-main,
  .cmg-nexus-public .cmg-nexus-hero,
  .cmg-nexus-public .cmg-nexus-strip,
  .cmg-nexus-public .cmg-nexus-modules,
  .cmg-nexus-public .cmg-nexus-proof,
  .cmg-nexus-public .cmg-nexus-demo,
  .cmg-nexus-public .cmg-nexus-footer {
    width: min(100vw - 24px, 640px) !important;
  }

  .cmg-nexus-hero {
    padding-top: 18px !important;
  }

  .cmg-nexus-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .cmg-nexus-stage__head,
  .cmg-nexus-search,
  .cmg-nexus-section-head,
  .cmg-nexus-demo {
    grid-template-columns: 1fr !important;
  }

  .cmg-nexus-stage__head h1 {
    font-size: clamp(28px, 8vw, 36px) !important;
  }

  .cmg-nexus-kpis,
  .cmg-nexus-module-grid,
  .cmg-nexus-proof,
  .cmg-nexus-signals,
  .cmg-nexus-demo-form {
    grid-template-columns: 1fr !important;
  }

  .cmg-nexus-module-grid article {
    min-height: 0 !important;
  }
}