/* ══════════════════════════════════════════════════════════════
   00_tokens.css — Design System Token Re-exports
   
   The --ds-* token values are defined in design_tokens.css (:root).
   This file re-exports them so individual DS modules resolve against
   a fallback that matches the real token values at rest in dev tools.
   
   Theme overrides (.style-apex-dark, .palette-*) live in
   design_tokens.css and cascade into all --ds-* aliases.
   ══════════════════════════════════════════════════════════════ */

/* ── Colors ── */
:root {
  --ds-color-primary: var(--color-primary, #6366f1);
  --ds-color-primary-hover: var(--color-primary-hover, #4f46e5);
  --ds-color-primary-light: var(--color-primary-light, rgba(99,102,241,0.15));
  --ds-color-primary-subtle: var(--color-primary-subtle, rgba(99,102,241,0.06));
  --ds-color-secondary: var(--color-secondary, #818cf8);
  --ds-color-success: var(--color-success, #059669);
  --ds-color-success-hover: var(--color-success-hover, #047857);
  --ds-color-success-light: var(--color-success-light, rgba(5,150,105,0.15));
  --ds-color-success-subtle: var(--color-success-subtle, rgba(5,150,105,0.06));
  --ds-color-warning: var(--color-warning, #d97706);
  --ds-color-warning-hover: var(--color-warning-hover, #b45309);
  --ds-color-warning-light: var(--color-warning-light, rgba(217,119,6,0.15));
  --ds-color-warning-subtle: var(--color-warning-subtle, rgba(217,119,6,0.06));
  --ds-color-danger: var(--color-danger, #e11d48);
  --ds-color-danger-hover: var(--color-danger-hover, #be123c);
  --ds-color-danger-light: var(--color-danger-light, rgba(225,29,72,0.15));
  --ds-color-danger-subtle: var(--color-danger-subtle, rgba(225,29,72,0.06));
  --ds-color-info: var(--color-info, #0891b2);
  --ds-color-info-light: var(--color-info-light, rgba(8,145,178,0.15));

  /* ── Surfaces ── */
  --ds-surface-page: var(--surface-page, #0b1120);
  --ds-surface-card: var(--surface-card, rgba(255,255,255,0.02));
  --ds-surface-card-hover: var(--surface-card-hover, rgba(255,255,255,0.06));
  --ds-surface-elevated: var(--surface-elevated, rgba(255,255,255,0.06));
  --ds-surface-overlay: var(--surface-overlay, rgba(255,255,255,0.04));
  --ds-surface-border: var(--surface-border, rgba(255,255,255,0.06));
  --ds-surface-border-hover: var(--surface-border-hover, rgba(255,255,255,0.1));

  /* ── Text ── */
  --ds-text-primary: var(--text-primary, #e2e8f0);
  --ds-text-secondary: var(--text-secondary, #94a3b8);
  --ds-text-muted: var(--text-muted, #64748b);
  --ds-text-inverse: var(--text-inverse, #ffffff);
  --ds-text-link: var(--text-link, #818cf8);

  /* ── Spacing ── */
  --ds-space-xs: var(--spacing-xs, 4px);
  --ds-space-sm: var(--spacing-sm, 8px);
  --ds-space-md: var(--spacing-md, 16px);
  --ds-space-lg: var(--spacing-lg, 24px);
  --ds-space-xl: var(--spacing-xl, 32px);
  --ds-space-2xl: var(--spacing-2xl, 48px);
  --ds-space-3xl: var(--spacing-3xl, 64px);
  --ds-space-4xl: var(--spacing-4xl, 96px);

  /* ── Border Radius ── */
  --ds-radius-sm: var(--radius-sm, 6px);
  --ds-radius-md: var(--radius-md, 12px);
  --ds-radius-lg: var(--radius-lg, 16px);
  --ds-radius-xl: var(--radius-xl, 20px);
  --ds-radius-full: var(--radius-full, 9999px);

  /* ── Shadows ── */
  --ds-shadow-sm: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.2));
  --ds-shadow-md: var(--shadow-md, 0 4px 6px rgba(0,0,0,0.3));
  --ds-shadow-lg: var(--shadow-lg, 0 10px 25px rgba(0,0,0,0.4));

  /* ── Typography Scale ── */
  --ds-font-display-kpi: var(--font-display-kpi, 48px);
  --ds-font-page-title: var(--font-page-title, 40px);
  --ds-font-section-title: var(--font-section-title, 32px);
  --ds-font-card-title: var(--font-card-title, 22px);
  --ds-font-subheading: var(--font-subheading, 18px);
  --ds-font-body: var(--font-body, 16px);
  --ds-font-supporting: var(--font-supporting, 15px);
  --ds-font-caption: var(--font-caption, 13px);
  --ds-font-micro: var(--font-micro, 11px);

  /* ── Font Weights ── */
  --ds-font-weight-normal: var(--font-weight-normal, 400);
  --ds-font-weight-medium: var(--font-weight-medium, 500);
  --ds-font-weight-semibold: var(--font-weight-semibold, 600);
  --ds-font-weight-bold: var(--font-weight-bold, 700);
  --ds-font-weight-extrabold: var(--font-weight-extrabold, 800);

  /* ── Letter Spacing ── */
  --ds-letter-spacing-tight: var(--letter-spacing-tight, -0.03em);
  --ds-letter-spacing-normal: var(--letter-spacing-normal, 0);
  --ds-letter-spacing-wide: var(--letter-spacing-wide, 0.08em);
  --ds-letter-spacing-wider: var(--letter-spacing-wider, 0.5px);

  /* ── Line Height ── */
  --ds-line-height-tight: var(--line-height-tight, 1.1);
  --ds-line-height-normal: var(--line-height-normal, 1.5);
  --ds-line-height-relaxed: var(--line-height-relaxed, 1.7);

  /* ── Transitions ── */
  --ds-transition-fast: var(--transition-fast, 0.15s);
  --ds-transition-normal: var(--transition-normal, 0.25s);
  --ds-transition-slow: var(--transition-slow, 0.35s);

  /* ── Component Sizing ── */
  --ds-btn-height: var(--btn-height, 44px);
  --ds-input-height: var(--input-height, 48px);
  --ds-card-padding: var(--card-padding, 28px);
  --ds-card-padding-lg: var(--card-padding-lg, 36px);
  --ds-section-spacing: var(--section-spacing, 64px);
  --ds-section-spacing-lg: var(--section-spacing-lg, 96px);
}
/* ══════════════════════════════════════════════════════════════
   01_typography.css — Design System Typography Scale
   ══════════════════════════════════════════════════════════════ */

/* ── Display KPI ── */
.ds-display-kpi {
  font-size: var(--ds-font-display-kpi, 48px);
  font-weight: var(--ds-font-weight-extrabold, 800);
  line-height: var(--ds-line-height-tight, 1);
  letter-spacing: var(--ds-letter-spacing-tight, -0.03em);
}

/* ── Page Title ── */
.ds-page-title {
  font-size: var(--ds-font-page-title, 40px);
  font-weight: var(--ds-font-weight-extrabold, 800);
  line-height: var(--ds-line-height-tight, 1.1);
  letter-spacing: var(--ds-letter-spacing-tight, -0.02em);
}

/* ── Section Title ── */
.ds-section-title {
  font-size: var(--ds-font-section-title, 32px);
  font-weight: var(--ds-font-weight-bold, 700);
  line-height: var(--ds-line-height-tight, 1.15);
  letter-spacing: var(--ds-letter-spacing-tight, -0.015em);
}

/* ── Card Title ── */
.ds-card-title {
  font-size: var(--ds-font-card-title, 22px);
  font-weight: var(--ds-font-weight-bold, 700);
}

/* ── Subheading ── */
.ds-subheading {
  font-size: var(--ds-font-subheading, 18px);
  font-weight: var(--ds-font-weight-semibold, 600);
}

/* ── Body ── */
.ds-body {
  font-size: var(--ds-font-body, 16px);
  line-height: var(--ds-line-height-relaxed, 1.7);
  color: var(--ds-text-secondary, rgba(255,255,255,0.55));
}

/* ── Supporting ── */
.ds-supporting {
  font-size: var(--ds-font-supporting, 15px);
  color: var(--ds-text-muted, rgba(255,255,255,0.3));
}

/* ── Caption ── */
.ds-caption {
  font-size: var(--ds-font-caption, 13px);
  color: var(--ds-text-muted, rgba(255,255,255,0.25));
}

/* ── Legacy .exec-* typography aliases ── */
.exec-kpi { font-size: var(--ds-font-display-kpi, 48px); font-weight: var(--ds-font-weight-extrabold, 800); line-height: var(--ds-line-height-tight, 1); letter-spacing: var(--ds-letter-spacing-tight, -0.03em); }
.exec-kpi-medium { font-size: var(--ds-font-page-title, 40px); }
.exec-kpi-small { font-size: var(--ds-font-section-title, 32px); }
.exec-label { font-size: var(--ds-font-supporting, 15px); font-weight: var(--ds-font-weight-medium, 500); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ds-text-muted, rgba(255,255,255,0.35)); }
.exec-title { font-size: var(--ds-font-card-title, 22px); font-weight: var(--ds-font-weight-bold, 700); color: var(--ds-text-primary, #ffffff); }
.exec-subtitle { font-size: var(--ds-font-body, 16px); color: var(--ds-text-muted, rgba(255,255,255,0.35)); }
.exec-body { font-size: var(--ds-font-body, 16px); color: var(--ds-text-secondary, rgba(255,255,255,0.55)); line-height: var(--ds-line-height-relaxed, 1.7); }
.exec-metric-label { font-size: var(--ds-font-supporting, 15px); color: var(--ds-text-muted, rgba(255,255,255,0.3)); margin-bottom: 4px; }
.exec-metric-value { font-size: var(--ds-font-body, 16px); font-weight: var(--ds-font-weight-bold, 700); color: var(--ds-text-primary, #ffffff); }

/* ── DS: KPI value / label / subtext ── */
.ds-kpi-value {
  font-size: var(--ds-font-display-kpi, 48px);
  font-weight: var(--ds-font-weight-extrabold, 800);
  line-height: 1;
  letter-spacing: -0.03em;
}
.ds-kpi-label {
  font-size: var(--ds-font-supporting, 15px);
  font-weight: var(--ds-font-weight-medium, 500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.ds-kpi-subtext {
  font-size: var(--ds-font-supporting, 15px);
  color: var(--ds-text-muted, rgba(255,255,255,0.25));
  margin-top: 4px;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .ds-display-kpi, .exec-kpi { font-size: 36px; }
  .ds-page-title { font-size: 28px; }
  .ds-section-title { font-size: 24px; }
  .ds-card-title { font-size: 18px; }
}
/* ══════════════════════════════════════════════════════════════
   02_layout.css — Design System Layout
   ══════════════════════════════════════════════════════════════ */

/* ── Grid Layouts ── */
.exec-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-space-lg, 24px);
}
.exec-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ds-space-md, 16px);
}
@media (max-width: 768px) {
  .exec-grid-2, .exec-grid-4 { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .exec-grid-4 { grid-template-columns: 1fr 1fr; }
}

/* ── Section Spacing ── */
.ds-section {
  margin-bottom: var(--ds-section-spacing, 64px);
}
.ds-section-lg {
  margin-bottom: var(--ds-section-spacing-lg, 96px);
}

/* ── Cell (inside cards) ── */
.exec-cell {
  padding: var(--ds-space-md, 16px);
  border-radius: var(--ds-radius-md, 12px);
  background: var(--ds-surface-overlay, rgba(255,255,255,0.03));
}
/* ══════════════════════════════════════════════════════════════
   03_buttons.css — Design System Buttons
   ══════════════════════════════════════════════════════════════ */

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--ds-btn-height, 44px);
  padding: 8px 22px;
  border-radius: var(--ds-radius-md, 12px);
  font-size: var(--ds-font-body, 16px);
  font-weight: var(--ds-font-weight-semibold, 600);
  line-height: 1;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--ds-transition-fast, 0.15s) ease;
}
.ds-btn:hover {
  transform: translateY(-1px);
}
.ds-btn:active {
  transform: translateY(0);
}

/* ── Disabled state (native APPEX360 controls) ──
   Consistent, token-based treatment; DaisyUI .btn:disabled is left alone. */
.ds-btn:disabled,
.ds-btn[aria-disabled="true"],
.ds-btn.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
  filter: none;
}

.ds-btn-primary {
  background: var(--ds-color-primary, #6366f1);
  color: #fff;
  box-shadow: 0 2px 8px rgba(99,102,241,0.2);
}
.ds-btn-primary:hover {
  background: var(--ds-color-primary-hover, #4f46e5);
  box-shadow: 0 4px 16px rgba(99,102,241,0.3);
}

.ds-btn-secondary {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--ds-surface-border, rgba(255,255,255,0.06));
  color: var(--ds-text-primary, #fff);
}
.ds-btn-secondary:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--ds-surface-border-hover, rgba(255,255,255,0.12));
}

.ds-btn-ghost {
  background: transparent;
  color: var(--ds-text-secondary, rgba(255,255,255,0.5));
}
.ds-btn-ghost:hover {
  background: rgba(255,255,255,0.04);
  color: var(--ds-text-primary, #fff);
}

.ds-btn-success {
  background: var(--ds-color-success, #059669);
  color: #fff;
}
.ds-btn-success:hover {
  background: var(--ds-color-success-hover, #047857);
}

.ds-btn-danger {
  background: var(--ds-color-danger, #e11d48);
  color: #fff;
}
.ds-btn-danger:hover {
  background: var(--ds-color-danger-hover, #be123c);
}

/* ── Size Variants ── */
.ds-btn-sm {
  min-height: 36px;
  padding: 6px 16px;
  font-size: var(--ds-font-supporting, 15px);
}
.ds-btn-lg {
  min-height: 52px;
  padding: 12px 28px;
  font-size: var(--ds-font-body, 16px);
  font-weight: var(--ds-font-weight-bold, 700);
}
/* ══════════════════════════════════════════════════════════════
   04_cards.css — Design System Cards
   ══════════════════════════════════════════════════════════════ */

/* ── Card Shell ── */
.exec-card {
  border-radius: var(--ds-radius-lg, 14px);
  padding: var(--ds-card-padding, 28px);
  transition: all var(--ds-transition-normal, 0.25s) ease;
  background: var(--ds-surface-card, rgba(255,255,255,0.02));
  border: 1px solid var(--ds-surface-border, rgba(255,255,255,0.08));
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.03);
}
.exec-card:hover {
  transform: translateY(-1px);
  border-color: var(--ds-surface-border-hover, rgba(255,255,255,0.15));
  box-shadow: 0 4px 12px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.04);
}
/* ── Hover must NEVER affect text or icon opacity ── */
.exec-card:hover *,
.exec-card:hover i,
.exec-card:hover span,
.exec-card:hover h1, .exec-card:hover h2, .exec-card:hover h3,
.exec-card:hover h4, .exec-card:hover p {
  opacity: 1 !important;
  color: inherit;
}
body.style-colorblind .exec-card {
  border-width: 2px;
  border-radius: 8px;
}

/* ── Card Size Variants ── */
.exec-card-sm {
  padding: var(--ds-space-lg, 24px);
}
.exec-card-lg {
  padding: var(--ds-card-padding-lg, 36px);
}

/* ── KPI Card ── */
.ds-kpi-card {
  border-radius: var(--ds-radius-lg, 14px);
  padding: var(--ds-card-padding, 24px);
  text-align: center;
  border: 1px solid var(--ds-surface-border, rgba(255,255,255,0.08));
  background: var(--ds-surface-card, rgba(255,255,255,0.02));
  transition: all var(--ds-transition-normal, 0.25s) ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.03);
}
.ds-kpi-card:hover {
  transform: translateY(-1px);
  border-color: var(--ds-surface-border-hover, rgba(255,255,255,0.15));
  box-shadow: 0 4px 12px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.04);
}
/* ── Hover must NEVER affect KPI text or icon opacity ── */
.ds-kpi-card:hover *,
.ds-kpi-card:hover .kpi-label,
.ds-kpi-card:hover .kpi-value,
.ds-kpi-card:hover i {
  opacity: 1 !important;
  color: inherit;
}

/* ── Glassmorphism Card ── */
.ds-glass {
  background: rgba(15, 20, 40, 0.65) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: var(--ds-radius-lg, 16px) !important;
}
body.theme-ai-futuristic .ds-glass {
  background: rgba(10, 14, 30, 0.7) !important;
  border-color: rgba(79, 124, 255, 0.12) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(79, 124, 255, 0.06) !important;
}
body.theme-ai-futuristic .ds-glass:hover {
  box-shadow: 0 8px 30px rgba(79, 124, 255, 0.12), 0 0 20px rgba(79, 124, 255, 0.1) !important;
}

/* ── Selectable Card ── */
.selectable-card {
  cursor: pointer;
  border-radius: var(--ds-radius-lg, 16px);
  padding: var(--ds-card-padding, 12px);
  transition: all 0.2s ease;
  user-select: none;
  outline: none;
}
.selectable-card:focus-visible {
  outline: 2px solid var(--ds-color-primary, #6366f1);
  outline-offset: 2px;
}
.selectable-card[data-selected="true"] {
  border: 1px solid rgba(99, 102, 241, 0.3);
  background: rgba(99, 102, 241, 0.06);
}
.selectable-card[data-selected="true"] .selectable-check {
  opacity: 1;
  transform: scale(1);
}
.selectable-card[data-selected="false"] .selectable-check {
  opacity: 0;
  transform: scale(0.5);
}
.selectable-card[data-selected="false"] {
  border: 1px solid var(--ds-surface-border, rgba(255,255,255,0.06));
  background: rgba(255, 255, 255, 0.02);
}
.selectable-card[data-selected="false"]:hover {
  border-color: rgba(99, 102, 241, 0.2);
  background: rgba(99, 102, 241, 0.03);
}
body.style-colorblind .selectable-card[data-selected="true"] {
  border-width: 2px;
  border-style: solid;
}
body.theme-ai-futuristic .selectable-card[data-selected="true"] {
  border-color: rgba(79, 124, 255, 0.4);
  background: rgba(79, 124, 255, 0.08);
}
body.theme-high-contrast .selectable-card[data-selected="true"] {
  border: 2px solid #60a5fa;
  background: rgba(96, 165, 250, 0.12);
}

/* ── Card Icon Container ── */
.exec-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--ds-radius-md, 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
body.style-colorblind .exec-icon {
  border: 2px solid;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .exec-card { padding: var(--ds-space-lg, 24px); }
  .ds-kpi-card { padding: var(--ds-space-lg, 24px); }
}
/* ══════════════════════════════════════════════════════════════
   05_tables.css — Design System Table Styles
   ══════════════════════════════════════════════════════════════ */
/* Enterprise-grade table styles using Design Tokens */

.ds-table-wrapper {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--ds-radius-md, 12px);
  border: 1px solid var(--ds-surface-border, #e8ecf4);
  background: var(--ds-surface-card, #ffffff);
}

.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ds-font-supporting, 15px);
  color: var(--ds-text-primary, #1a1a2e);
}

/* ── Header ── */
.ds-table__head {
  background: var(--ds-surface-page, #f8f9fc);
  border-bottom: 2px solid var(--ds-surface-border, #e8ecf4);
}

.ds-table__header-row {
  border-bottom: 1px solid var(--ds-surface-border, #e8ecf4);
}

.ds-table__header-cell {
  padding: var(--ds-space-md, 16px) var(--ds-space-md, 16px);
  font-weight: 600;
  font-size: var(--ds-font-caption, 13px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ds-text-secondary, #6b7280);
  text-align: left;
  white-space: nowrap;
}

.ds-table__sort-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color var(--ds-transition-fast, 0.15s) ease;
}

.ds-table__sort-link:hover {
  color: var(--ds-color-primary, #6c5ce7);
}

/* ── Body ── */
.ds-table__body .ds-table__row {
  border-bottom: 1px solid var(--ds-surface-border, #e8ecf4);
  transition: background var(--ds-transition-fast, 0.15s) ease;
}

.ds-table__body .ds-table__row:last-child {
  border-bottom: none;
}

.ds-table__body .ds-table__row:hover {
  background: var(--ds-color-primary-subtle, rgba(108,92,231,0.03));
}

.ds-table__body .ds-table__row--clickable {
  cursor: pointer;
}

.ds-table__body .ds-table__row--clickable:hover {
  background: var(--ds-color-primary-subtle, rgba(108,92,231,0.06));
}

.ds-table__cell {
  padding: var(--ds-space-sm, 8px) var(--ds-space-md, 16px);
  vertical-align: middle;
}

.ds-table__cell--sticky {
  position: sticky;
  left: 0;
  background: var(--ds-surface-card, #ffffff);
  z-index: 1;
}

/* ── Empty state ── */
.ds-table__empty {
  padding: var(--ds-space-2xl, 48px) var(--ds-space-md, 16px);
  text-align: center;
  color: var(--ds-text-muted, #9ca3af);
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .ds-table-wrapper {
    border-radius: var(--ds-radius-sm, 6px);
  }
  .ds-table__header-cell,
  .ds-table__cell {
    padding: var(--ds-space-sm, 8px);
  }
}
/* ══════════════════════════════════════════════════════════════
   06_forms.css — Design System Forms & Inputs
   ══════════════════════════════════════════════════════════════ */

.ds-input {
  min-height: var(--ds-input-height, 48px);
  padding: 10px 16px;
  border-radius: var(--ds-radius-md, 12px);
  border: 1px solid var(--ds-surface-border, rgba(255,255,255,0.06));
  background: var(--ds-surface-card, rgba(255,255,255,0.02));
  color: var(--ds-text-primary, #fff);
  font-size: var(--ds-font-body, 16px);
  outline: none;
  transition: all var(--ds-transition-fast, 0.15s) ease;
}
.ds-input:focus {
  border-color: var(--ds-color-primary, #6366f1);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}
.ds-input::placeholder {
  color: var(--ds-text-muted, rgba(255,255,255,0.25));
}

.ds-select {
  min-height: var(--ds-input-height, 48px);
  padding: 10px 40px 10px 16px;
  border-radius: var(--ds-radius-md, 12px);
  border: 1px solid var(--ds-surface-border, rgba(255,255,255,0.06));
  background: var(--ds-surface-card, rgba(255,255,255,0.02));
  color: var(--ds-text-primary, #fff);
  font-size: var(--ds-font-body, 16px);
  font-weight: var(--ds-font-weight-semibold, 600);
  outline: none;
  cursor: pointer;
  transition: all var(--ds-transition-fast, 0.15s) ease;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.ds-select:focus {
  border-color: var(--ds-color-primary, #6366f1);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}

/* ── Disabled state (native APPEX360 controls) ──
   Consistent with .ds-btn:disabled in 03_buttons.css; DaisyUI untouched. */
.ds-input:disabled,
.ds-select:disabled,
.ds-textarea:disabled,
.ds-input[aria-disabled="true"],
.ds-select[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Error state (WCAG: more than colour — 2px border + aria-invalid) ── */
.ds-input[aria-invalid="true"],
.ds-select[aria-invalid="true"],
.ds-textarea[aria-invalid="true"] {
  border: 2px solid var(--ds-color-danger, #e11d48);
}
/* ══════════════════════════════════════════════════════════════
   07_navigation.css — Design System Navigation Styles
   ══════════════════════════════════════════════════════════════ */
/* Tab bar, section header, and breadcrumb styles using Design Tokens */

/* ── Section Header ── */
.ds-section-header {
  margin-bottom: var(--ds-space-lg, 24px);
}

.ds-section-header__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-space-md, 16px);
}

.ds-section-header__titles {
  flex: 1;
}

.ds-section-header__titles > div:first-child {
  display: flex;
  align-items: center;
  gap: var(--ds-space-sm, 8px);
}

.ds-section-header__toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ds-text-muted, #94a3b8);
  padding: 0;
  font-size: var(--ds-font-body, 16px);
}

.ds-section-header__toggle:hover {
  color: var(--ds-text-primary, #1a1a2e);
}

.ds-section-header__actions {
  display: flex;
  gap: var(--ds-space-sm, 8px);
  flex-shrink: 0;
}

/* ── Tab Bar ── */
.ds-tab-bar {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--ds-surface-border, #e8ecf4);
  padding-bottom: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ds-tab-bar--sm .ds-tab {
  padding: 8px 14px;
  font-size: var(--ds-font-caption, 13px);
}

.ds-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: var(--ds-font-supporting, 15px);
  font-weight: 500;
  color: var(--ds-text-secondary, #6b7280);
  border: none;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--ds-transition-fast, 0.15s) ease;
  text-decoration: none;
}

.ds-tab:hover {
  color: var(--ds-text-primary, #1a1a2e);
  border-bottom-color: var(--ds-surface-border-hover, #d0d5e0);
}

.ds-tab--active {
  color: var(--ds-color-primary, #6c5ce7);
  border-bottom-color: var(--ds-color-primary, #6c5ce7);
  font-weight: 600;
}

.ds-tab--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.ds-tab__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: var(--ds-radius-full, 9999px);
  padding: 0 6px;
  font-size: 10px;
  font-weight: 700;
  background: var(--ds-color-primary-light, rgba(108,92,231,0.15));
  color: var(--ds-color-primary, #6c5ce7);
}

.ds-tab__badge--success {
  background: var(--ds-color-success-light, rgba(5,150,105,0.15));
  color: var(--ds-color-success, #059669);
}

.ds-tab__badge--warning {
  background: var(--ds-color-warning-light, rgba(217,119,6,0.15));
  color: var(--ds-color-warning, #d97706);
}

.ds-tab__badge--danger {
  background: var(--ds-color-danger-light, rgba(225,29,72,0.15));
  color: var(--ds-color-danger, #e11d48);
}

/* ── Page Header ── */
.ds-page-header {
  margin-bottom: var(--ds-space-xl, 32px);
}

.ds-page-header__breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--ds-space-sm, 8px);
  font-size: var(--ds-font-caption, 13px);
}

/* ── Touch target size (WCAG 2.5.5 / mobile QA) ──
   Nav triggers, notification bell, avatar and the mobile toggle must offer a
   ≥44px hit area on touch devices. Visual dimensions are unchanged; only the
   interactive area grows via min-width/min-height. */
@media (pointer: coarse) {
  .apex-nav-link,
  .apex-nav-avatar,
  #apex-notif-bell,
  .mobile-menu-toggle {
    min-width: 44px;
    min-height: 44px;
  }
}

.ds-page-header__crumb-link {
  color: var(--ds-text-secondary, #6b7280);
  text-decoration: none;
  transition: color var(--ds-transition-fast, 0.15s) ease;
}

.ds-page-header__crumb-link:hover {
  color: var(--ds-color-primary, #6c5ce7);
}

.ds-page-header__crumb-sep {
  color: var(--ds-text-secondary, #6b7280);
}

.ds-page-header__crumb-current {
  color: var(--ds-text-secondary, #6b7280);
}

.ds-page-header__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-space-md, 16px);
  flex-wrap: wrap;
}

.ds-page-header__titles {
  flex: 1;
}

.ds-page-header__workspace {
  display: inline-block;
  font-size: var(--ds-font-caption, 13px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ds-color-primary, #6c5ce7);
  margin-bottom: 2px;
}

.ds-page-header__title {
  margin: 0;
}

.ds-page-header__subtitle {
  margin-top: 4px;
}

.ds-page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--ds-space-sm, 8px);
  flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .ds-tab {
    padding: 8px 12px;
    font-size: var(--ds-font-caption, 13px);
  }
  .ds-page-header__row {
    flex-direction: column;
  }
  .ds-page-header__actions {
    width: 100%;
    justify-content: flex-start;
  }
}
/* ══════════════════════════════════════════════════════════════
   08_badges.css — Design System Badges
   ══════════════════════════════════════════════════════════════ */

.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 18px;
  border-radius: var(--ds-radius-sm, 6px);
  font-size: var(--ds-font-supporting, 15px);
  font-weight: var(--ds-font-weight-semibold, 600);
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.55);
  transition: all var(--ds-transition-fast, 0.15s) ease;
}
.ds-badge:hover {
  transform: translateY(-1px);
  border-color: rgba(99,102,241,0.2);
  background: rgba(99,102,241,0.04);
  color: #818cf8;
  box-shadow: 0 0 12px rgba(99,102,241,0.08);
}
.ds-badge i {
  font-size: 14px;
}
body.theme-ai-futuristic .ds-badge {
  background: rgba(79, 124, 255, 0.06) !important;
  border-color: rgba(79, 124, 255, 0.12) !important;
  backdrop-filter: blur(8px) !important;
}
body.theme-ai-futuristic .ds-badge:hover {
  background: rgba(79, 124, 255, 0.1) !important;
  border-color: rgba(79, 124, 255, 0.25) !important;
  box-shadow: 0 0 16px rgba(79, 124, 255, 0.15) !important;
}

/* ── Legacy .exec-* badge aliases ── */
.exec-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--ds-radius-sm, 6px);
  font-size: var(--ds-font-supporting, 15px);
  font-weight: var(--ds-font-weight-semibold, 600);
}
body.style-colorblind .exec-badge {
  border: 2px solid;
}

/* ── Priority Badges ── */
.exec-priority-p1 { background: rgba(248,113,113,0.15); color: #f87171; }
.exec-priority-p2 { background: rgba(251,191,36,0.15); color: #fbbf24; }
.exec-priority-p3 { background: rgba(96,165,250,0.15); color: #60a5fa; }

/* ── Trend Indicators ── */
.exec-trend-up { color: var(--ds-color-success, #34d399); }
.exec-trend-down { color: var(--ds-color-danger, #f87171); }
.exec-trend-flat { color: var(--ds-text-muted, #94a3b8); }
/* ══════════════════════════════════════════════════════════════
   09_alerts.css — Design System Alerts & Notifications
   ══════════════════════════════════════════════════════════════ */
/* Alert/notification component using Design Tokens */

.ds-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-sm, 8px);
  padding: var(--ds-space-md, 16px);
  border-radius: var(--ds-radius-sm, 6px);
  border: 1px solid;
  border-left-width: 4px;
  font-size: var(--ds-font-supporting, 15px);
  color: var(--ds-text-primary, #1a1a2e);
  line-height: var(--ds-line-height-normal, 1.5);
  transition: opacity var(--ds-transition-fast, 0.15s) ease;
}

.ds-alert--success {
  background: var(--ds-color-success-subtle, rgba(5,150,105,0.06));
  border-color: var(--ds-color-success-light, rgba(5,150,105,0.15));
  border-left-color: var(--ds-color-success, #059669);
}

.ds-alert--error {
  background: var(--ds-color-danger-subtle, rgba(225,29,72,0.06));
  border-color: var(--ds-color-danger-light, rgba(225,29,72,0.15));
  border-left-color: var(--ds-color-danger, #e11d48);
}

.ds-alert--warning {
  background: var(--ds-color-warning-subtle, rgba(217,119,6,0.06));
  border-color: var(--ds-color-warning-light, rgba(217,119,6,0.15));
  border-left-color: var(--ds-color-warning, #d97706);
}

.ds-alert--info {
  background: var(--ds-color-info-light, rgba(8,145,178,0.15));
  border-color: var(--ds-color-info-light, rgba(8,145,178,0.15));
  border-left-color: var(--ds-color-info, #0891b2);
}

.ds-alert__icon {
  flex-shrink: 0;
  font-size: 14px;
  margin-top: 2px;
}

.ds-alert--success .ds-alert__icon { color: var(--ds-color-success, #059669); }
.ds-alert--error .ds-alert__icon { color: var(--ds-color-danger, #e11d48); }
.ds-alert--warning .ds-alert__icon { color: var(--ds-color-warning, #d97706); }
.ds-alert--info .ds-alert__icon { color: var(--ds-color-info, #0891b2); }

.ds-alert__content { flex: 1; }

.ds-alert__title {
  font-weight: 600;
  margin-bottom: 2px;
}

.ds-alert__message {
  color: var(--ds-text-secondary, #6b7280);
}

.ds-alert__dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ds-text-muted, #9ca3af);
  padding: 4px;
  border-radius: 4px;
  font-size: 12px;
  transition: color var(--ds-transition-fast, 0.15s) ease;
}

.ds-alert__dismiss:hover {
  color: var(--ds-text-primary, #1a1a2e);
}

/* Notification toast / flash messages */
.ds-toast {
  position: fixed;
  top: var(--ds-space-lg, 24px);
  right: var(--ds-space-lg, 24px);
  z-index: 9999;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-sm, 8px);
  pointer-events: none;
}

.ds-toast__item {
  pointer-events: auto;
  animation: ds-toast-slide-in 0.3s ease;
}

@keyframes ds-toast-slide-in {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
/* ══════════════════════════════════════════════════════════════
   10_empty_states.css — Design System Empty States
   ══════════════════════════════════════════════════════════════ */

.exec-decision-cost { background: rgba(248,113,113,0.04); border: 1px solid rgba(248,113,113,0.1); }
.exec-decision-benefit { background: rgba(52,211,153,0.04); border: 1px solid rgba(52,211,153,0.1); }
/* ══════════════════════════════════════════════════════════════
   11_loading.css — Design System Loading & Skeleton Styles
   ══════════════════════════════════════════════════════════════ */

/* ── Skeleton Loading ── */
.ds-skeleton {
  background: linear-gradient(
    90deg,
    var(--ds-surface-overlay, rgba(0,0,0,0.04)) 25%,
    var(--ds-surface-border, #e8ecf4) 50%,
    var(--ds-surface-overlay, rgba(0,0,0,0.04)) 75%
  );
  background-size: 200% 100%;
  animation: ds-skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--ds-radius-sm, 6px);
}

.ds-skeleton--text {
  height: 16px;
  width: 100%;
  margin-bottom: 8px;
}

.ds-skeleton--text-sm {
  height: 12px;
  width: 60%;
  margin-bottom: 6px;
}

.ds-skeleton--heading {
  height: 28px;
  width: 40%;
  margin-bottom: 16px;
}

.ds-skeleton--card {
  height: 120px;
  width: 100%;
  border-radius: var(--ds-radius-md, 12px);
}

.ds-skeleton--avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--ds-radius-full, 9999px);
}

.ds-skeleton--button {
  height: 44px;
  width: 120px;
  border-radius: var(--ds-radius-sm, 6px);
}

.ds-skeleton--kpi {
  height: 80px;
  width: 100%;
  border-radius: var(--ds-radius-md, 12px);
}

@keyframes ds-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Loading Spinner ── */
.ds-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-sm, 8px);
  color: var(--ds-text-secondary, #6b7280);
  font-size: var(--ds-font-supporting, 15px);
}

.ds-spinner__icon {
  width: 20px;
  height: 20px;
  border: 2px solid var(--ds-surface-border, #e8ecf4);
  border-top-color: var(--ds-color-primary, #6c5ce7);
  border-radius: var(--ds-radius-full, 9999px);
  animation: ds-spinner-rotate 0.8s linear infinite;
}

.ds-spinner--sm .ds-spinner__icon {
  width: 14px;
  height: 14px;
  border-width: 2px;
}

.ds-spinner--lg .ds-spinner__icon {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

@keyframes ds-spinner-rotate {
  to { transform: rotate(360deg); }
}

/* ── Loading Overlay ── */
.ds-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-surface-overlay, rgba(0,0,0,0.3));
  backdrop-filter: blur(2px);
  border-radius: inherit;
  z-index: 10;
}

/* ── Progress Bar ── */
.ds-progress {
  width: 100%;
  height: 6px;
  border-radius: var(--ds-radius-full, 9999px);
  background: var(--ds-surface-border, #e8ecf4);
  overflow: hidden;
}

.ds-progress__fill {
  height: 100%;
  border-radius: var(--ds-radius-full, 9999px);
  background: var(--ds-color-primary, #6c5ce7);
  transition: width var(--ds-transition-medium, 0.3s) ease;
}

.ds-progress__fill--success {
  background: var(--ds-color-success, #059669);
}

.ds-progress__fill--warning {
  background: var(--ds-color-warning, #d97706);
}

.ds-progress__fill--danger {
  background: var(--ds-color-danger, #e11d48);
}
/* ══════════════════════════════════════════════════════════════
   12_print.css — Design System Print Styles
   ══════════════════════════════════════════════════════════════ */
/* Print styles — to be populated in Phase 2 */
/* ══════════════════════════════════════════════════════════════
   13_workspace.css — Design System Workspace Layout
   ══════════════════════════════════════════════════════════════ */
/* Workspace layout — to be populated in Phase 2 */
/* ══════════════════════════════════════════════════════════════
   DS: 16 — Coming Soon / Pre-Launch Marketing
   Enterprise Design System – Release 25
   ══════════════════════════════════════════════════════════════ */

/* ── Base Reset (Coming Soon layout only) ── */
.cs-gradient-bg * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.cs-gradient-bg {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #0a0a0f;
  color: #f1f5f9;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Background Gradient ── */
.cs-gradient-bg {
  background: linear-gradient(180deg, #0b0d17 0%, #0a0a0f 40%, #0f111a 100%);
}

/* ── Glow Effect ── */
.cs-glow {
  box-shadow: 0 0 40px rgba(99, 102, 241, 0.15), 0 0 80px rgba(72, 157, 249, 0.05);
}

/* ── Duplicate Panel ── */
.cs-duplicate-panel {
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  margin-top: 12px;
}

/* ── Error State ── */
.cs-error {
  color: #ef4444;
  font-size: 12px;
  margin-top: 4px;
}

/* ── Section Structure ── */
.cs-section {
  padding: var(--ds-space-3xl) var(--ds-space-lg);
  position: relative;
}
.cs-section:nth-child(even) {
  background: rgba(11, 13, 23, 0.3);
}
.cs-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Section Header Pill ── */
.cs-section-header {
  text-align: center;
  margin-bottom: var(--ds-space-2xl);
}
.cs-label {
  display: inline-block;
  padding: 4px 14px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-color-primary-subtle);
  border: 1px solid rgba(99, 102, 241, 0.2);
  font-size: 11px;
  font-weight: var(--ds-font-weight-bold);
  color: var(--ds-color-secondary);
  text-transform: uppercase;
  letter-spacing: var(--ds-letter-spacing-wide);
  margin-bottom: 12px;
}
.cs-label i {
  margin-right: 6px;
}
.cs-section-header h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: var(--ds-font-weight-extrabold);
  letter-spacing: -0.03em;
  color: var(--ds-text-primary, #f1f5f9);
  margin: 0 0 12px;
}
.cs-section-header p {
  font-size: 16px;
  color: var(--ds-text-secondary, #94a3b8);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ── Section Heading (h2 without wrapper) ── */
.cs-section-heading {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: var(--ds-font-weight-extrabold);
  letter-spacing: -0.03em;
  color: var(--ds-text-primary, #f1f5f9);
  margin: 0 0 12px;
}

/* ── Capability Cards (Platform Highlights) ── */
.cs-capability-card {
  background: rgba(15, 17, 26, 0.6);
  border: 1px solid rgba(99, 102, 241, 0.1);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-lg);
  transition: all var(--ds-transition-fast) ease;
  cursor: default;
}
.cs-capability-card:hover {
  background: rgba(99, 102, 241, 0.04);
  border-color: rgba(99, 102, 241, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.08);
}
.cs-capability-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(72, 157, 249, 0.08));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.cs-capability-icon i {
  color: var(--ds-color-secondary, #818cf8);
  font-size: 16px;
}
.cs-capability-card h3 {
  font-size: 16px;
  font-weight: var(--ds-font-weight-bold);
  color: var(--ds-text-primary, #f1f5f9);
  margin: 0 0 6px;
}
.cs-capability-card p {
  font-size: 13px;
  color: var(--ds-text-secondary, #94a3b8);
  line-height: 1.5;
  margin: 0;
}

/* ── Resource Cards (Discover) ── */
.cs-resource-card {
  background: rgba(15, 17, 26, 0.6);
  border: 1px solid rgba(99, 102, 241, 0.1);
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
  transition: all var(--ds-transition-fast) ease;
  display: flex;
  flex-direction: column;
  cursor: default;
}
.cs-resource-card:hover {
  border-color: rgba(99, 102, 241, 0.3);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(99, 102, 241, 0.1);
}
.cs-resource-thumb {
  height: 160px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(72, 157, 249, 0.06));
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(99, 102, 241, 0.08);
}
.cs-resource-thumb-icon {
  text-align: center;
}
.cs-resource-thumb-icon i {
  font-size: 36px;
  color: var(--ds-color-secondary, #818cf8);
  display: block;
  margin-bottom: 8px;
}
.cs-resource-thumb-icon span {
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-text-secondary, #94a3b8);
}
.cs-resource-body {
  padding: 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.cs-resource-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.cs-resource-head h3 {
  font-size: 15px;
  font-weight: var(--ds-font-weight-bold);
  color: var(--ds-text-primary, #f1f5f9);
  margin: 0;
}
.cs-resource-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: var(--ds-radius-full);
  background: rgba(99, 102, 241, 0.1);
  color: var(--ds-color-secondary, #818cf8);
  font-weight: var(--ds-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cs-resource-body p {
  font-size: 13px;
  color: var(--ds-text-secondary, #94a3b8);
  margin: 0 0 auto;
  line-height: 1.5;
}
.cs-resource-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(99, 102, 241, 0.06);
}
.cs-resource-btn {
  flex: 1;
  padding: 8px 12px;
  border-radius: var(--ds-radius-sm);
  border: 1px solid rgba(99, 102, 241, 0.15);
  background: rgba(99, 102, 241, 0.06);
  color: var(--ds-color-secondary, #818cf8);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--ds-transition-fast);
  text-decoration: none;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: inherit;
}
.cs-resource-btn:hover {
  background: rgba(99, 102, 241, 0.12);
  color: var(--ds-color-secondary, #818cf8);
}
.cs-resource-btn-outline {
  composes: cs-resource-btn;
  background: transparent;
  color: var(--ds-text-muted, #94a3b8);
}
.cs-resource-btn-outline:hover {
  background: rgba(99, 102, 241, 0.06);
  color: var(--ds-color-secondary, #818cf8);
}

/* ── Value Cards (Why APPEX360) ── */
.cs-value-card {
  background: rgba(15, 17, 26, 0.6);
  border: 1px solid rgba(99, 102, 241, 0.1);
  border-radius: var(--ds-radius-lg);
  padding: 28px;
  transition: all var(--ds-transition-fast) ease;
  position: relative;
  overflow: hidden;
  cursor: default;
}
.cs-value-card:hover {
  border-color: rgba(99, 102, 241, 0.3);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(99, 102, 241, 0.1);
}
.cs-value-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ds-color-primary, #6366f1), #489df9, var(--ds-color-secondary, #818cf8));
  opacity: 0;
  transition: opacity var(--ds-transition-normal) ease;
}
.cs-value-card:hover::before {
  opacity: 1;
}
.cs-value-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--ds-radius-md);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(72, 157, 249, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.cs-value-icon i {
  color: var(--ds-color-secondary, #818cf8);
  font-size: 20px;
}
.cs-value-card h3 {
  font-size: 18px;
  font-weight: var(--ds-font-weight-extrabold);
  color: var(--ds-text-primary, #f1f5f9);
  margin: 0 0 10px;
}
.cs-value-card p {
  font-size: 14px;
  color: var(--ds-text-secondary, #94a3b8);
  line-height: 1.6;
  margin: 0;
}

/* ── Stat Card ── */
.cs-stat-card {
  text-align: center;
  padding: var(--ds-space-lg) var(--ds-space-md);
  border-radius: var(--ds-radius-md);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(99, 102, 241, 0.15);
  transition: all var(--ds-transition-fast) ease;
  cursor: default;
}
.cs-stat-card:hover {
  background: rgba(99, 102, 241, 0.04);
  border-color: rgba(99, 102, 241, 0.2);
}
.cs-stat-value {
  font-size: 32px;
  font-weight: var(--ds-font-weight-extrabold);
  background: linear-gradient(135deg, var(--ds-color-secondary, #818cf8), #489df9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cs-stat-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-text-secondary, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 4px;
}

/* ── Glass Card ── */
.cs-glass {
  background: rgba(15, 17, 26, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(99, 102, 241, 0.15);
}

/* ── Gradient Text ── */
.cs-gradient-text {
  background: linear-gradient(135deg, var(--ds-text-primary, #f1f5f9) 0%, var(--ds-color-secondary, #818cf8) 50%, #489df9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── CTA Buttons ── */
.cs-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--ds-color-primary, #6366f1), #489df9);
  color: #fff;
  font-size: 15px;
  font-weight: var(--ds-font-weight-bold);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--ds-transition-fast) ease;
  text-decoration: none;
  font-family: inherit;
}
.cs-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.35);
}
.cs-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ds-text-primary, #f1f5f9);
  font-size: 15px;
  font-weight: 600;
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--ds-transition-fast) ease;
  text-decoration: none;
  font-family: inherit;
}
.cs-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(99, 102, 241, 0.3);
}

/* ── Links ── */
.cs-footer-link {
  color: var(--ds-text-muted, #64748b);
  font-size: 13px;
  text-decoration: none;
  transition: color var(--ds-transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cs-footer-link:hover {
  color: var(--ds-color-secondary, #818cf8);
}

/* ── Footer Social Links ── */
.cs-footer-social-link:hover {
  background: rgba(99, 102, 241, 0.15) !important;
  color: #818cf8 !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
}

/* ── Divider ── */
.cs-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.15), transparent);
  border: none;
}

/* ── Nav Link ── */
.cs-login-link:hover {
  color: var(--ds-color-secondary, #818cf8) !important;
}

/* ── Form Inputs ── */
.cs-form-input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: var(--ds-radius-sm);
  color: var(--ds-text-primary, #f1f5f9);
  font-size: 14px;
  font-family: inherit;
  transition: all var(--ds-transition-fast) ease;
  outline: none;
}
.cs-form-input:focus {
  border-color: var(--ds-color-primary, #6366f1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.cs-form-input::placeholder {
  color: var(--ds-text-muted, rgba(148, 163, 184, 0.6));
}
.cs-form-input option {
  color: #1a1a2e;
  background: #ffffff;
}
.cs-form-input option:disabled {
  color: var(--ds-text-muted, #94a3b8);
}
.cs-form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-text-secondary, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.cs-form-input.cs-has-error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.cs-form-input.cs-has-error:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

/* ── Timeline ── */
.cs-timeline-line {
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.4), rgba(72, 157, 249, 0.4), rgba(99, 102, 241, 0.1));
}
.cs-timeline-row {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
  position: relative;
  padding-left: 0;
}
.cs-timeline-dot {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.cs-timeline-dot-inner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-timeline-card {
  flex: 1;
  background: rgba(15, 17, 26, 0.5);
  border: 1px solid rgba(99, 102, 241, 0.12);
  border-radius: var(--ds-radius-md);
  padding: 18px 20px;
  transition: all var(--ds-transition-fast) ease;
  cursor: default;
}
.cs-timeline-card:hover {
  border-color: rgba(99, 102, 241, 0.3);
  background: rgba(15, 17, 26, 0.7);
}
.cs-timeline-card h3 {
  font-size: 16px;
  font-weight: var(--ds-font-weight-bold);
  color: var(--ds-text-primary, #f1f5f9);
  margin: 0;
}
.cs-timeline-card p {
  font-size: 13px;
  color: var(--ds-text-secondary, #94a3b8);
  margin: 4px 0 0;
  line-height: 1.5;
}
.cs-timeline-status {
  font-size: 11px;
  padding: 2px 10px;
  border-radius: var(--ds-radius-full);
  font-weight: var(--ds-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cs-timeline-date {
  font-size: 12px;
  color: var(--ds-text-muted, #64748b);
}

/* ── Trust Badge ── */
.cs-trust-badge {
  text-align: center;
  padding: var(--ds-space-lg) var(--ds-space-md);
  border-radius: var(--ds-radius-md);
  background: rgba(15, 17, 26, 0.5);
  border: 1px solid rgba(99, 102, 241, 0.08);
  transition: all var(--ds-transition-fast) ease;
  cursor: default;
}
.cs-trust-badge:hover {
  border-color: rgba(99, 102, 241, 0.2);
  background: rgba(15, 17, 26, 0.7);
}
.cs-trust-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
.cs-trust-icon i {
  font-size: 18px;
  color: var(--ds-color-secondary, #818cf8);
}
.cs-trust-badge h3 {
  font-size: 13px;
  font-weight: var(--ds-font-weight-bold);
  color: var(--ds-text-primary, #f1f5f9);
  margin: 0 0 6px;
}
.cs-trust-badge p {
  font-size: 11px;
  color: var(--ds-text-muted, #64748b);
  margin: 0;
  line-height: 1.4;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .cs-section-header + [style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #discover [style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #why-appex360 [style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 768px) {
  .cs-section {
    padding: var(--ds-space-2xl) var(--ds-space-md);
  }
  .cs-section-header {
    margin-bottom: var(--ds-space-xl);
  }
  .cs-capability-card {
    padding: 20px;
  }
  .cs-stat-value {
    font-size: 24px;
  }
  .cs-stat-card {
    padding: var(--ds-space-md) 12px;
  }
  #enterprise-trust [style*="grid-template-columns: repeat(5"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  footer [style*="grid-template-columns: 2fr"] {
    grid-template-columns: 1fr !important;
    gap: var(--ds-space-xl) !important;
  }
  footer {
    padding: 40px 16px 24px !important;
  }
}
@media (max-width: 640px) {
  nav { padding: 12px 16px; }
  section { padding: 12px 16px 24px; }
}
@media (max-width: 600px) {
  .cs-section-header + [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  #discover [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  #why-appex360 [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  .cs-timeline-row {
    gap: 12px !important;
  }
  .cs-timeline-dot-inner {
    width: 36px !important;
    height: 36px !important;
  }
  .cs-timeline-card h3 {
    font-size: 14px !important;
  }
}
@media (max-width: 480px) {
  .cs-btn-primary, .cs-btn-secondary {
    width: 100%;
    justify-content: center;
  }
  #enterprise-trust [style*="grid-template-columns: repeat(5"] {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   HOMEPAGE COMPOSITION — FIVE ASSESSMENT CARDS + PLATFORM RIBBON
   Namespace: .cs-assess-* / .cs-connect-* — theme-isolated.
   No R27 (*) classes are touched and no global element selectors are
   used, so the protected homepage baseline CSS is unaffected.
   Card grid is class-based (never inline grid-template-columns) so it
   can never be hijacked by the attribute-selector rules above.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Section 2 — Five assessment cards, one row on desktop ───────── */
.cs-assess-section {
  max-width: 1480px;
  margin: 0 auto;
  padding: 8px 32px 76px;
}

.cs-assess-row {
  display: grid;
  /* FIVE columns — the desktop requirement. 1101px+ keeps one line. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.cs-assess-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;              /* prevents grid blowout — no clipped content */
  padding: 20px 18px;
  border-radius: 16px;
  background: rgba(15, 17, 26, 0.6);
  border: 1px solid rgba(99, 102, 241, 0.14);
  border-top: 2px solid var(--assess-colour, #6366f1);
  transition: transform var(--ds-transition-fast, 0.2s) ease,
              border-color var(--ds-transition-fast, 0.2s) ease,
              box-shadow var(--ds-transition-fast, 0.2s) ease;
}

.cs-assess-card:hover {
  transform: translateY(-2px);
  border-color: rgba(99, 102, 241, 0.38);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.cs-assess-card--soon { opacity: 0.74; }
.cs-assess-card--soon:hover { opacity: 0.9; }

.cs-assess-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 14px;
  flex: 0 0 auto;
}

.cs-assess-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #ffffff;
  margin: 0 0 6px;
}

.cs-assess-desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--cs-text-muted, #94a3b8);
  margin: 0 0 12px;
  flex: 1 1 auto;
}

.cs-assess-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.cs-assess-status--live {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.28);
  color: #4ade80;
}

.cs-assess-status--soon {
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.22);
  color: rgba(226, 232, 240, 0.75);
}

.cs-assess-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 10.5px;
  color: var(--cs-text-muted, #94a3b8);
  margin-bottom: 12px;
}

.cs-assess-price { font-weight: 700; }

.cs-assess-features {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10.5px;
  color: var(--cs-text-secondary, #cbd5e1);
  margin-bottom: 14px;
}

.cs-assess-features i { color: #4ade80; font-size: 9px; margin-right: 5px; }

.cs-assess-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.cs-assess-cta--live {
  background: rgba(129, 140, 248, 0.15);
  border: 1px solid rgba(129, 140, 248, 0.3);
  color: #a5b4fc;
  transition: background var(--ds-transition-fast, 0.2s) ease;
}

.cs-assess-cta--live:hover { background: rgba(129, 140, 248, 0.26); }

.cs-assess-cta--soon {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
  cursor: default;
}

.cs-assess-fineprint {
  font-size: 9px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.38);
  margin-top: 8px;
}

/* ── Section 3 — Platform connection ribbon (CSS marquee) ────────── */
.cs-connect-section {
  padding: 56px 0 60px;
  border-top: 1px solid rgba(99, 102, 241, 0.1);
  border-bottom: 1px solid rgba(99, 102, 241, 0.1);
  background: linear-gradient(180deg, rgba(15, 17, 26, 0.3), rgba(15, 17, 26, 0.62));
}

.cs-connect-head {
  max-width: 1480px;
  margin: 0 auto 26px;
  padding: 0 32px;
  text-align: center;
}

.cs-connect-title {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #ffffff;
  margin: 0 0 8px;
}

.cs-connect-gradient {
  background: linear-gradient(135deg, #a5b4fc, #489df9);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cs-connect-sub {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--cs-text-muted, #94a3b8);
  max-width: 760px;
  margin: 0 auto;
}

.cs-connect-ribbon {
  position: relative;
  width: 100%;
  overflow: hidden;              /* clips the marquee, not the content */
  padding: 16px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.cs-connect-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 0;                        /* no gap → translateX(-50%) is exact */
  animation: cs-connect-marquee 64s linear infinite;
  will-change: transform;
}

.cs-connect-track:hover { animation-play-state: paused; }

.cs-connect-group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ── Item — the atomic marquee unit. Symmetric padding (never a flex
   gap) sets the rhythm, so the seam between the two identical groups
   keeps exactly the same spacing as the rest of the ribbon. ─────── */
.cs-connect-item {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0 10px;
  white-space: nowrap;
}

/* ── Chip — icon tile + system name, ported from the approved R27
   platform-connectivity ribbon (.r27-connect-chip) so the anonymous
   Coming Soon ribbon and the released homepage share ONE treatment
   for a connected system. Icon + label are inline-flex siblings, so
   they travel the marquee as a single atomic item.
   ICON POLICY — glyphs are GENERIC CATEGORY icons (ERP, CMMS/EAM,
   MES, SCADA, BI, IoT, historian…). No vendor logo is used, because
   the product holds no verified/approved vendor-logo asset set; the
   connection-path note below carries the honest qualification. ──── */
.cs-connect-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px 8px 9px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.018) 100%);
  border: 1px solid rgba(129, 140, 248, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 0.22s ease, background 0.22s ease;
}

/* ── Icon tile — 44px frame holding a 22px category glyph ───────── */
.cs-connect-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: radial-gradient(circle at 32% 26%, rgba(129, 140, 248, 0.30), rgba(99, 102, 241, 0.10) 72%);
  border: 1px solid rgba(129, 140, 248, 0.22);
  color: #a5b4fc;
  transition: color 0.22s ease, border-color 0.22s ease;
}

.cs-connect-icon i {
  font-size: 22px;
  line-height: 1;
}

/* ── Name — the system name as legible text (proper case) ───────── */
.cs-connect-name {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: rgba(226, 232, 240, 0.8);
  transition: color 0.22s ease;
}

/* ── Hover — restrained lift on the chip; the marquee pauses on the
   track (.cs-connect-track:hover) as before ─────────────────────── */
.cs-connect-item:hover .cs-connect-chip {
  border-color: rgba(129, 140, 248, 0.42);
  background: linear-gradient(180deg, rgba(129, 140, 248, 0.10) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.cs-connect-item:hover .cs-connect-icon {
  color: #c7d2fe;
  border-color: rgba(129, 140, 248, 0.36);
}

.cs-connect-item:hover .cs-connect-name { color: #ffffff; }

.cs-connect-note {
  max-width: 900px;
  margin: 22px auto 0;
  padding: 0 32px;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.6;
  color: rgba(148, 163, 184, 0.85);
}

.cs-connect-note i { color: #a5b4fc; margin-right: 6px; }
.cs-connect-note strong { color: rgba(226, 232, 240, 0.95); font-weight: 700; }

/* Exactly one group width = 50% of the two-group track → seamless loop,
   no jump, no blank gap, no reset. */
@keyframes cs-connect-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ── Responsive: desktop keeps FIVE in one row ───────────────────── */
@media (max-width: 1200px) {
  .cs-assess-row { gap: 12px; }
  .cs-assess-card { padding: 18px 14px; }
  .cs-assess-name { font-size: 14px; }
}

/* Tablet — reflow cleanly, never clip */
@media (max-width: 1100px) {
  .cs-assess-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cs-assess-section { padding: 8px 24px 64px; }
}

@media (max-width: 860px) {
  .cs-assess-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-connect-head, .cs-connect-note { padding: 0 24px; }
}

/* Mobile — single column stack (the one-line rule is desktop only) */
@media (max-width: 560px) {
  .cs-assess-row { grid-template-columns: 1fr; }
  .cs-assess-section { padding: 4px 16px 52px; }
  .cs-connect-item { padding: 0 6px; }
  .cs-connect-chip { gap: 9px; padding: 6px 13px 6px 7px; border-radius: 12px; }
  .cs-connect-icon { width: 34px; height: 34px; border-radius: 9px; }
  .cs-connect-icon i { font-size: 17px; }
  .cs-connect-name { font-size: 13px; }
}

/* ── Navigation ribbon links (top nav — 11 items) ────────────────── */
.cs-nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2px 4px;
  margin: 18px 0 0;
  padding: 14px 0 2px;
  list-style: none;
  border-top: 1px solid rgba(99, 102, 241, 0.12);
}

.cs-nav-link {
  display: inline-block;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--cs-text-secondary, #cbd5e1);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--ds-transition-fast, 0.2s) ease,
              color var(--ds-transition-fast, 0.2s) ease;
}

.cs-nav-link:hover {
  background: rgba(99, 102, 241, 0.12);
  color: #ffffff;
}

@media (max-width: 860px) {
  .cs-nav-links { justify-content: flex-start; gap: 2px; }
  .cs-nav-link { padding: 6px 10px; font-size: 12px; }
}

/* ── Reduced motion: ribbon stops and shows the COMPLETE list ────── */
@media (prefers-reduced-motion: reduce) {
  .cs-connect-track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    transform: none;
  }
  .cs-connect-group {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 12px;
  }
  .cs-connect-group[aria-hidden="true"] { display: none; }
  .cs-connect-item { white-space: normal; }
  .cs-assess-card { transition: none; }
  .cs-assess-card:hover { transform: none; }
}
/* ═══════════════════════════════════════════════════════════════════
   APPEX360 Assessment Workspace — Compact Enterprise Layout
   ═══════════════════════════════════════════════════════════════════
   Reduces card height from ~700-900px to ~280-320px.
   3-4 questions visible per screen at 1440px.
   Uses --ds-* tokens throughout. No hardcoded colours.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   APPEX360 Assessment Workspace — Compact Enterprise Layout
   ═══════════════════════════════════════════════════════════════════
   Reduces card height from ~700-900px to ~280-320px.
   3-4 questions visible per screen at 1440px.
   Uses --ds-* tokens throughout. No hardcoded colours.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Container ─────────────────────────────────────────────────── */
.aws-container {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--ds-bg-primary, #0f172a), var(--ds-bg-secondary, #1e293b));
}

/* ─── Staggered card entrance animation ─────────────────────────── */
@keyframes aws-card-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.aws-card {
  animation: aws-card-in 0.25s ease-out both;
}

/* Stagger each card by index via inline style on the element */
/* style="--card-index: N" in the view generates this */
.aws-card:nth-child(1) { animation-delay: 0.00s; }
.aws-card:nth-child(2) { animation-delay: 0.04s; }
.aws-card:nth-child(3) { animation-delay: 0.08s; }
.aws-card:nth-child(4) { animation-delay: 0.12s; }
.aws-card:nth-child(5) { animation-delay: 0.16s; }
.aws-card:nth-child(6) { animation-delay: 0.20s; }
.aws-card:nth-child(7) { animation-delay: 0.24s; }
.aws-card:nth-child(8) { animation-delay: 0.28s; }
.aws-card:nth-child(9) { animation-delay: 0.32s; }
.aws-card:nth-child(10) { animation-delay: 0.36s; }

/* ─── Premium scrollbar ─────────────────────────────────────────── */
.aws-main::-webkit-scrollbar {
  width: 6px;
}
.aws-main::-webkit-scrollbar-track {
  background: transparent;
}
.aws-main::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
}
.aws-main::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.15);
}

.aws-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 12px 16px;
}

@media (max-width: 1024px) {
  .aws-layout {
    grid-template-columns: 1fr;
  }
}

/* ─── Compact Sidebar ──────────────────────────────────────────── */
.aws-sidebar {
  position: sticky;
  top: 0.75rem;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aws-cat-card {
  padding: 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}

.aws-cat-header {
  margin-bottom: 8px;
}

.aws-cat-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ds-text-primary, #ffffff);
  margin-bottom: 4px;
  line-height: 1.3;
}

.aws-domain-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  background: rgba(167,139,250,0.1);
  color: #a78bfa;
  border: 1px solid rgba(167,139,250,0.15);
}

.aws-domain-badge i {
  font-size: 9px;
}

.aws-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.aws-ring {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.aws-ring-svg {
  width: 40px;
  height: 40px;
  transform: rotate(-90deg);
}

.aws-ring-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-weight: 700;
  color: #818cf8;
}

.aws-count-num {
  font-size: 15px;
  font-weight: 700;
  color: var(--ds-text-primary, #ffffff);
  display: block;
  line-height: 1.2;
}

.aws-count-label {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
}

.aws-progress-bar {
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.05);
  overflow: hidden;
}

.aws-progress-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #818cf8, #a78bfa);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

/* Subtle shimmer on progress fill */
.aws-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  animation: aws-shimmer 2s ease-in-out infinite;
}

@keyframes aws-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ─── Question Dot Grid ───────────────────────────────────────── */
.aws-q-grid {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}

.aws-q-grid-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-text-primary, #ffffff);
  margin-bottom: 8px;
}

.aws-q-grid-count {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}

.aws-q-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.aws-q-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  color: rgba(255,255,255,0.5);
  border: 1px solid transparent;
  transition: all 0.15s ease;
  position: relative;
}

.aws-q-dot.current {
  color: #ffffff;
  background: rgba(99,102,241,0.2);
  border-color: rgba(99,102,241,0.3);
  font-weight: 700;
  box-shadow: 0 0 8px rgba(99,102,241,0.15);
}

.aws-q-dot.answered {
  color: #34d399;
}

.aws-q-dot.answered::after {
  content: '';
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #34d399;
  transition: transform 0.15s ease;
}

.aws-q-dot:hover {
  background: rgba(255,255,255,0.06);
  color: var(--ds-text-primary, #ffffff);
  transform: scale(1.1);
}

.aws-q-dot:active {
  transform: scale(0.95);
}

/* ─── Questions Per Page ──────────────────────────────────────── */
.aws-ppp {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}

.aws-ppp-select {
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--ds-text-primary, #ffffff);
  font-size: 12px;
  outline: none;
  cursor: pointer;
}

.aws-ppp-select option {
  background: #1e293b;
  color: #ffffff;
}

/* ─── Main Workspace ──────────────────────────────────────────── */
.aws-main {
  min-width: 0;
}

.aws-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.aws-heading {
  font-size: 22px;
  font-weight: 700;
  color: var(--ds-text-primary, #ffffff);
  line-height: 1.2;
  margin-bottom: 2px;
}

.aws-subhead {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
}

.aws-subhead strong {
  color: rgba(255,255,255,0.7);
}

/* ─── Compact Score Guide ─────────────────────────────────────── */
.aws-score-guide {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  flex-shrink: 0;
}

.aws-score-guide i {
  font-size: 11px;
  margin-right: 2px;
}

.aws-sg-pill {
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 10px;
}

.sg-1 { background: rgba(248,113,113,0.1); color: #f87171; }
.sg-2 { background: rgba(251,146,60,0.1); color: #fb923c; }
.sg-3 { background: rgba(251,191,36,0.1); color: #fbbf24; }
.sg-4 { background: rgba(52,211,153,0.1); color: #34d399; }
.sg-5 { background: rgba(52,211,153,0.15); color: #34d399; }
.sg-na { background: rgba(148,163,184,0.08); color: #94a3b8; }

/* ─── Compact Question Card ───────────────────────────────────── */
.aws-card {
  border-radius: 10px;
  margin-bottom: 10px;
  background: linear-gradient(135deg, rgba(30,41,59,0.6), rgba(30,41,59,0.4));
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.aws-card.answered {
  border-color: rgba(52,211,153,0.15);
  background: linear-gradient(135deg, rgba(52,211,153,0.04), rgba(30,41,59,0.4));
}

.aws-card:hover {
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.aws-card:has(.aws-score-pill:focus-within) {
  border-color: rgba(99,102,241,0.25);
  box-shadow: 0 0 0 1px rgba(99,102,241,0.1);
}

.aws-card-body {
  padding: 10px 12px;
}

/* ─── Question Row ────────────────────────────────────────────── */
.aws-q-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.aws-q-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  background: rgba(99,102,241,0.1);
  color: #818cf8;
  transition: all 0.15s;
}

.aws-q-num.done {
  background: rgba(52,211,153,0.1);
  color: #34d399;
}

.aws-q-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ds-text-primary, #ffffff);
  font-weight: 500;
  margin: 0;
  flex: 1;
}

.aws-check {
  color: #34d399;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ─── Score Pills — Compact, Touch-Friendly ───────────────────── */
.aws-score-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.aws-score-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.aws-score-pill:hover {
  border-color: rgba(99,102,241,0.25);
  background: rgba(99,102,241,0.05);
  transform: translateY(-1px);
}

.aws-score-pill:active {
  transform: translateY(0px);
  transition-duration: 0.05s;
}

.aws-score-pill.selected-1,
.aws-score-pill.selected-2,
.aws-score-pill.selected-3,
.aws-score-pill.selected-4,
.aws-score-pill.selected-5,
.aws-score-pill.selected-na {
  transform: scale(1.02);
}

.aws-score-pill.selected-1 {
  border-color: rgba(248,113,113,0.35);
  background: rgba(248,113,113,0.08);
  color: #f87171;
}

.aws-score-pill.selected-2 {
  border-color: rgba(251,146,60,0.35);
  background: rgba(251,146,60,0.08);
  color: #fb923c;
}

.aws-score-pill.selected-3 {
  border-color: rgba(251,191,36,0.35);
  background: rgba(251,191,36,0.08);
  color: #fbbf24;
}

.aws-score-pill.selected-4 {
  border-color: rgba(52,211,153,0.35);
  background: rgba(52,211,153,0.08);
  color: #34d399;
}

.aws-score-pill.selected-5 {
  border-color: rgba(52,211,153,0.4);
  background: rgba(52,211,153,0.1);
  color: #34d399;
}

.aws-score-pill.selected-na {
  border-color: rgba(148,163,184,0.25);
  background: rgba(148,163,184,0.06);
  color: #94a3b8;
}

.aws-pill-value {
  font-weight: 700;
  font-size: 13px;
}

.aws-pill-label {
  font-size: 11px;
  opacity: 0.6;
}

/* ─── Evidence + Comments Row ─────────────────────────────────── */
.aws-input-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 6px;
}

@media (max-width: 640px) {
  .aws-input-row {
    grid-template-columns: 1fr;
  }
}

.aws-input-group {
  position: relative;
}

.aws-input-icon {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 11px;
  color: rgba(255,255,255,0.15);
  pointer-events: none;
}

.aws-textarea {
  width: 100%;
  padding: 6px 8px 6px 26px;
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  line-height: 1.4;
  outline: none;
  resize: vertical;
  transition: border-color 0.15s, background 0.15s;
}

.aws-textarea:focus {
  border-color: rgba(99,102,241,0.3);
  background: rgba(99,102,241,0.03);
}

.aws-textarea::placeholder {
  color: rgba(255,255,255,0.15);
}

/* Auto-expand — grow height when user types */
.aws-textarea:not(:placeholder-shown) {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.1);
}

/* ─── Attachments Accordion ────────────────────────────────────── */
.aws-attach {
  margin-top: 0;
  border: none;
}

.aws-attach-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
  list-style: none;
  user-select: none;
}

.aws-attach-summary::-webkit-details-marker {
  display: none;
}

.aws-attach-summary:hover {
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.03);
}

.aws-attach-summary i {
  font-size: 11px;
}

.aws-attach-hint {
  opacity: 0.5;
  font-size: 11px;
}

.aws-attach-body {
  padding: 8px 0 0 0;
}

/* ─── Compact Sticky Footer ────────────────────────────────────── */
.aws-footer {
  position: sticky;
  bottom: 0.5rem;
  margin-top: 8px;
}

.aws-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-radius: 10px;
  background: rgba(15,23,42,0.95);
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  gap: 8px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
}

.aws-footer-left,
.aws-footer-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ─── Buttons ──────────────────────────────────────────────────── */
.aws-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
  border: 1px solid transparent;
  line-height: 1.3;
}

.aws-btn i {
  font-size: 11px;
}

.aws-btn-ghost {
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.5);
  border-color: rgba(255,255,255,0.06);
}

.aws-btn-ghost:hover {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
}

.aws-btn-draft {
  background: rgba(99,102,241,0.1);
  color: #818cf8;
  border-color: rgba(99,102,241,0.2);
}

.aws-btn-draft:hover {
  background: rgba(99,102,241,0.15);
  border-color: rgba(99,102,241,0.3);
}

.aws-btn-primary {
  background: #818cf8;
  color: #ffffff;
  border-color: rgba(99,102,241,0.3);
}

.aws-btn-primary:hover {
  background: #6d78f4;
}

.aws-btn-complete {
  background: #34d399;
  color: #0f172a;
  border-color: rgba(52,211,153,0.25);
}

.aws-btn-complete:hover {
  background: #2ec98d;
}

.aws-counter {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  white-space: nowrap;
}

.aws-status {
  font-size: 12px;
  text-align: center;
  flex: 1;
}

/* ─── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .aws-sidebar {
    position: static;
  }

  .aws-heading {
    font-size: 18px;
  }

  .aws-card-body {
    padding: 8px 10px;
  }

  .aws-score-row {
    gap: 3px;
  }

  .aws-score-pill {
    padding: 4px 8px;
    font-size: 12px;
  }

  .aws-footer-inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }
}

/* ─── WCAG Focus Styles ───────────────────────────────────────── */
.aws-btn:focus-visible,
.aws-score-pill:focus-within,
.aws-q-dot:focus-visible,
.aws-ppp-select:focus-visible,
.aws-textarea:focus-visible,
.aws-attach-summary:focus-visible {
  outline: 2px solid #818cf8;
  outline-offset: 2px;
}

.aws-score-pill:focus-within {
  outline: 2px solid #818cf8;
  outline-offset: 1px;
}

/* ─── Take Page Button Classes (CSP-compliant, no inline handlers) ── */
.take-btn-ghost {
  font-size: 0.6rem;
  padding: 0.2rem 0.5rem;
  border-radius: 0.4rem;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: background 0.15s ease;
}
.take-btn-ghost:hover {
  background: rgba(255,255,255,0.08);
}

.take-btn-primary {
  font-size: 0.6rem;
  padding: 0.2rem 0.5rem;
  border-radius: 0.4rem;
  background: rgba(96,165,250,0.1);
  color: #60a5fa;
  border: 1px solid rgba(96,165,250,0.2);
  cursor: pointer;
  transition: background 0.15s ease;
}
.take-btn-primary:hover {
  background: rgba(96,165,250,0.2);
}

.take-btn-clear {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.4);
  background: none;
  border: none;
  cursor: pointer;
  display: none;
  transition: color 0.15s ease;
}
.take-btn-clear:hover {
  color: rgba(255,255,255,0.7);
}

/* ─── Category Card Staggered Animation ────────────────────────── */
@keyframes cat-card-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#categoryGrid > a {
  animation: cat-card-in 0.35s ease-out both;
}

/* Stagger via inline style --cat-index set on each card */
/* nth-child fallback */
#categoryGrid > a:nth-child(1)  { animation-delay: 0.00s; }
#categoryGrid > a:nth-child(2)  { animation-delay: 0.04s; }
#categoryGrid > a:nth-child(3)  { animation-delay: 0.08s; }
#categoryGrid > a:nth-child(4)  { animation-delay: 0.12s; }
#categoryGrid > a:nth-child(5)  { animation-delay: 0.16s; }
#categoryGrid > a:nth-child(6)  { animation-delay: 0.20s; }
#categoryGrid > a:nth-child(7)  { animation-delay: 0.24s; }
#categoryGrid > a:nth-child(8)  { animation-delay: 0.28s; }
#categoryGrid > a:nth-child(9)  { animation-delay: 0.32s; }
#categoryGrid > a:nth-child(10) { animation-delay: 0.36s; }
#categoryGrid > a:nth-child(11) { animation-delay: 0.40s; }
#categoryGrid > a:nth-child(12) { animation-delay: 0.44s; }
#categoryGrid > a:nth-child(13) { animation-delay: 0.48s; }
#categoryGrid > a:nth-child(14) { animation-delay: 0.52s; }
#categoryGrid > a:nth-child(15) { animation-delay: 0.56s; }
#categoryGrid > a:nth-child(16) { animation-delay: 0.60s; }
#categoryGrid > a:nth-child(17) { animation-delay: 0.64s; }
#categoryGrid > a:nth-child(18) { animation-delay: 0.68s; }
#categoryGrid > a:nth-child(19) { animation-delay: 0.72s; }
#categoryGrid > a:nth-child(20) { animation-delay: 0.76s; }

.take-link-amber {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  transition: background 0.15s ease;
  background: rgba(251,191,36,0.1);
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,0.2);
  text-decoration: none;
}
.take-link-amber:hover {
  background: rgba(251,191,36,0.2);
}

.take-link-indigo {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  transition: background 0.15s ease;
  background: rgba(99,102,241,0.15);
  color: #818cf8;
  border: 1px solid rgba(99,102,241,0.25);
  text-decoration: none;
}
.take-link-indigo:hover {
  background: rgba(99,102,241,0.25);
}
/* ══════════════════════════════════════════════════════════════
   APPEX360 Homepage — Release 27 Enterprise Redesign
   Premium SaaS landing page — Stripe × Apple × Palantir quality
   
   Tokens:    --r27-* for all design decisions
   Sections:  r27-* BEM-style classes
   Anims:     @keyframes defined at bottom
   Responsive: 1280px / 1024px / 768px / 480px
   ══════════════════════════════════════════════════════════════ */

/* ═══ DESIGN TOKENS ═══ */
:root {
  /* ══════════════════════════════════════════════════════════════
     R27 DESIGN TOKENS — HARDCODED DARK VALUES
     
     The R27 homepage is an explicit DARK design. Every surface,
     text, and accent color is hardcoded so that theme changes
     (classic, light, corporate blue) NEVER cause:
     
       - dark text on dark backgrounds
       - light text on light backgrounds
       - contrast failures
     
     NEVER replace these with var(--text-primary) or other
     theme-relative variables — they resolve to dark values on
     light themes and will break contrast.
     ══════════════════════════════════════════════════════════════ */

  /* HOMEPAGE VISUAL CONVERGENCE (2026-10-05) — these are the validated
     apex_reference :root FALLBACK token values. They are the protection for
     the state where the theme attribute is absent (or another theme token
     file is active): with no attribute, no theme-scoped mapping applies and
     these literals govern. When data-theme='apex_reference' IS present, the
     Theme Engine-scoped mapping in
     app/views/shared/homepage/_apex_reference_convergence.html.erb re-points
     the same token names onto the apex_reference Theme Engine tokens.
     Values stay hard-coded literals (never var()) per the rule below. */

  /* Surfaces — apex_reference executive dark */
  --r27-surface: #0B1021;
  --r27-surface-alt: #0C1828;
  --r27-surface-card: #16182B;
  --r27-surface-glass: rgba(22, 24, 43, 0.7);

  /* Borders — hairlines */
  --r27-border: rgba(255, 255, 255, 0.05);
  --r27-border-light: rgba(255, 255, 255, 0.08);
  --r27-glass-border: rgba(255, 255, 255, 0.08);

  /* Text tiers — explicit light colors for WCAG AA on dark backgrounds */
  --r27-text-primary: #E3E6EE;
  --r27-text-secondary: #B6BDD3;
  --r27-text-muted: #8A93AD;

  /* Accents — apex_reference accent system (violet interactive, amber brand).
     Status colors (green/red/teal) are preserved R27 status utilities. */
  --r27-accent: #776FA3;
  --r27-accent-hover: #8F87BC;
  --r27-accent-subtle: rgba(119, 111, 163, 0.14);
  --r27-accent-warm: #CD814A;
  --r27-accent-green: #22C55E;
  --r27-accent-red: #EF4444;
  --r27-accent-teal: #14B8A6;

  /* Gradients — accent/secondary treatment */
  --r27-gradient-hero: linear-gradient(135deg, #01020D 0%, #0C1828 50%, #01020D 100%);
  --r27-gradient-cta: linear-gradient(135deg, #776FA3 0%, #5C509F 100%);
  --r27-gradient-gold: linear-gradient(135deg, #CD814A 0%, #A05A26 100%);

  /* Glass */
  --r27-glass-bg: rgba(22, 24, 43, 0.6);

  /* Shadows */
  --r27-shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --r27-shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --r27-shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
  --r27-shadow-glow: 0 0 90px -30px rgba(119, 111, 163, 0.55);

  /* Typography */
  --r27-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --r27-font-mono: "JetBrains Mono", "SF Mono", monospace;
}

/* ═══ RESET / BASE ═══ */
.r27-page {
  background: var(--r27-surface);
  color: var(--r27-text-primary);
  font-family: var(--r27-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* Focus-visible for keyboard navigation */
.r27-page *:focus-visible {
  outline: 2px solid var(--r27-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Prevent iOS zoom on input focus */
.r27-page input, .r27-page select, .r27-page textarea, .r27-page button {
  font-size: 16px;
}

/* Selection styling */
.r27-page ::selection {
  background: rgba(99, 102, 241, 0.3);
  color: #fff;
}

/* ═══ ANIMATION KEYFRAMES ═══ */
@keyframes r27-fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes r27-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes r27-scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes r27-slideDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes r27-glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(99,102,241,0.15); }
  50%      { box-shadow: 0 0 40px rgba(99,102,241,0.3); }
}
@keyframes r27-bgDrift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes r27-particleRise {
  0%   { opacity: 0; transform: translateY(20px) scale(0.5); }
  50%  { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(-60px) scale(1); }
}
@keyframes r27-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
@keyframes r27-typewriterCursor {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}
@keyframes r27-counterPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* Reduced motion — disable all animations */
@media (prefers-reduced-motion: reduce) {
  .r27-animate, .r27-animate * {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .r27-cta-glow {
    animation: none !important;
    opacity: 0.55;
  }
}

/* ═══ NAVIGATION BAR ═══ */
.r27-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  background: transparent;
  border-bottom: 1px solid transparent;
}
.r27-nav.scrolled {
  background: var(--r27-surface-glass);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 1px solid var(--r27-border);
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}
.r27-nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  color: var(--r27-text-primary);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.r27-nav-logo img, .r27-nav-logo svg {
  height: 32px;
  width: auto;
}
.r27-nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.r27-nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--r27-text-secondary);
  text-decoration: none;
  position: relative;
  padding: 4px 0;
  transition: color 0.2s ease;
}
.r27-nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background: var(--r27-accent);
  transition: width 0.2s ease;
  border-radius: 1px;
}
.r27-nav-link:hover {
  color: var(--r27-text-primary);
}
.r27-nav-link:hover::after {
  width: 100%;
}
.r27-nav-cta {
  padding: 8px 20px;
  border-radius: 8px;
  background: var(--r27-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.r27-nav-cta:hover {
  transform: scale(1.02);
  box-shadow: var(--r27-shadow-glow);
}
.r27-nav-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--r27-text-primary);
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
}
@media (max-width: 768px) {
  .r27-nav-links { display: none; }
  .r27-nav-hamburger { display: block; }
}

/* ═══ SECTION BASE — R37 Premium Polish: stronger type hierarchy,
       more vertical rhythm (+15%) while keeping consistent rhythm ═══ */
.r27-section {
  padding: 126px 24px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 1600px) {
  .r27-section { max-width: min(90vw, 1800px); }
}
.r27-section-full {
  padding: 120px 24px;
  width: 100%;
}
.r27-section-header {
  text-align: center;
  margin-bottom: 72px;
}
.r27-section-eyebrow {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--r27-accent-hover);
  margin-bottom: 18px;
}
.r27-section-title {
  font-size: clamp(34px, 3vw, 54px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--r27-text-primary);
  margin: 0 auto 22px;
  max-width: 800px;
}
.r27-section-subtitle {
  font-size: 19px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--r27-text-secondary);
  max-width: 720px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .r27-section { padding: 62px 16px; }
  .r27-section-full { padding: 60px 16px; }
  .r27-section-header { margin-bottom: 44px; }
}

/* ═══ HERO SECTION ═══ */
.r27-hero {
  min-height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: var(--r27-gradient-hero);
  background-size: 200% 200%;
  animation: r27-bgDrift 30s ease-in-out infinite;
  padding: 88px 24px 40px;
  position: relative;
  overflow: visible;
}
.r27-hero::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(ellipse at 30% 50%, rgba(99,102,241,0.03) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 20%, rgba(20,184,166,0.02) 0%, transparent 50%);
  pointer-events: none;
}
.r27-hero-inner {
  display: flex;
  align-items: center;
  gap: 48px;
  max-width: 1440px;
  width: 100%;
  position: relative;
  z-index: 1;
}
@media (min-width: 1600px) {
  .r27-hero-inner { max-width: min(90vw, 1800px); }
}
.r27-hero-text {
  flex: 0 0 42%;
  max-width: 42%;
}
.r27-hero-headline {
  font-size: clamp(50px, 6.8vw, 92px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--r27-text-primary);
  margin: 0 0 18px;
}
.r27-hero-subline {
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--r27-text-secondary);
  margin: 0 0 36px;
  max-width: 600px;
}
.r27-hero-ctas {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.r27-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 12px;
  background: linear-gradient(135deg, #818CF8 0%, #6366F1 55%, #8B5CF6 100%);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(99,102,241,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.r27-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(99,102,241,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
}
.r27-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid var(--r27-border-light);
  color: var(--r27-text-primary);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.18s ease;
}
.r27-btn-secondary:hover {
  border-color: var(--r27-accent);
  background: var(--r27-accent-subtle);
  transform: translateY(-2px);
}
.r27-btn-tertiary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  background: transparent;
  border: none;
  color: var(--r27-text-secondary);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}
.r27-btn-tertiary:hover {
  color: var(--r27-text-primary);
}
.r27-hero-credibility {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.r27-hero-cred-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--r27-accent-subtle);
  border: 1px solid rgba(99,102,241,0.15);
  font-size: 12px;
  font-weight: 500;
  color: var(--r27-accent-hover);
}
.r27-hero-cred-badge i {
  font-size: 12px;
}
.r27-hero-social {
  display: flex;
  align-items: center;
  gap: 8px;
}
.r27-hero-social-label {
  font-size: 13px;
  color: var(--r27-text-muted);
  white-space: nowrap;
}
.r27-hero-logos {
  display: flex;
  gap: 20px;
  align-items: center;
}
.r27-hero-logo {
  height: 28px;
  opacity: 0.4;
  filter: grayscale(1);
  transition: opacity 0.2s ease;
}
.r27-hero-logo:hover {
  opacity: 0.6;
}
.r27-hero-visual {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: center;
  min-height: 0;
  width: 100%;
  overflow: visible;
  gap: 0;
}
@media (max-width: 1024px) {
  .r27-hero-inner { flex-direction: column; gap: 40px; }
  .r27-hero-text, .r27-hero-visual { flex: 0 0 100%; max-width: 100%; }
  .r27-hero-text { text-align: center; }
  .r27-hero-subline { margin: 0 auto 32px; }
  .r27-hero-ctas { justify-content: center; }
}
@media (max-width: 768px) {
  .r27-hero { min-height: auto; padding: 88px 16px 56px; }
  .r27-hero-headline { font-size: clamp(34px, 10vw, 50px); }
  .r27-hero-ctas { flex-direction: column; width: 100%; }
  .r27-hero-ctas .r27-btn-primary,
  .r27-hero-ctas .r27-btn-secondary,
  .r27-hero-ctas .r27-btn-tertiary { width: 100%; justify-content: center; }
  .r27-hero-visual { display: none; }
  .r27-hero-credibility { justify-content: center; }
  .r27-hero-social { flex-direction: column; align-items: center; gap: 12px; }
  .r27-hero-logos { gap: 16px; }
  .r27-nav-links.r27-nav-open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--r27-surface-glass); backdrop-filter: blur(16px); padding: 16px 24px; border-bottom: 1px solid var(--r27-border); gap: 16px; }
}

/* ═══ INTELLIGENCE GAP SECTION ═══ */
.r27-gap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 56px;
}
.r27-gap-card {
  background: var(--r27-surface-card);
  border: 1px solid var(--r27-border);
  border-radius: 16px;
  padding: 36px 28px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  min-height: 300px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.03);
}
.r27-gap-card:hover {
  transform: translateY(-1px);
  border-color: var(--r27-border-light);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.04);
}
/* ── Hover must NEVER affect card text or icons ── */
.r27-gap-card:hover .r27-gap-card-title,
.r27-gap-card:hover .r27-gap-card-desc,
.r27-gap-card:hover .r27-gap-card-impact,
.r27-gap-card:hover i {
  opacity: 1 !important;
}
.r27-gap-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  font-size: 20px;
}
.r27-gap-card-title {
  font-size: 21px;
  font-weight: 700;
  color: var(--r27-text-primary);
  margin-bottom: 12px;
}
.r27-gap-card-desc {
  font-size: 16px;
  line-height: 1.65;
  color: var(--r27-text-secondary);
  margin-bottom: 18px;
}
.r27-gap-card-impact {
  font-size: 15px;
  font-weight: 600;
  color: #fbbf24;
  padding: 9px 14px;
  background: rgba(245,158,11,0.15);
  border: 1px solid rgba(245,158,11,0.35);
  border-radius: 10px;
  display: inline-block;
}
@media (max-width: 1024px) {
  .r27-gap-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .r27-gap-grid { grid-template-columns: 1fr; }
}

/* ═══ ARCHITECTURE SECTION ═══ */
.r27-arch {
  background: var(--r27-surface-alt);
  padding: 126px 24px;
  text-align: center;
}
.r27-arch-diagram {
  max-width: 960px;
  margin: 56px auto 0;
  position: relative;
}
.r27-arch-layer {
  padding: 28px;
  border-radius: 14px;
  margin-bottom: 8px;
  position: relative;
  border: 1px solid var(--r27-border);
}
.r27-arch-layer-boardroom {
  background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.04));
  border-color: rgba(99,102,241,0.15);
}
.r27-arch-layer-appex360 {
  background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(99,102,241,0.05));
  border-color: var(--r27-accent);
  box-shadow: 0 0 30px rgba(99,102,241,0.1);
}
.r27-arch-layer-systems {
  background: rgba(255,255,255,0.02);
  border-color: var(--r27-border);
}
.r27-arch-layer-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--r27-text-primary);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.r27-arch-layer-label i {
  margin-right: 8px;
}
.r27-arch-layer-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.r27-arch-layer-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  font-size: 13px;
  color: var(--r27-text-secondary);
  font-weight: 500;
}
.r27-arch-layer-item i {
  font-size: 14px;
  color: var(--r27-accent-teal);
}
.r27-arch-arrow {
  display: flex;
  justify-content: center;
  padding: 4px 0;
  color: var(--r27-accent);
  font-size: 14px;
  opacity: 0.5;
}
.r27-arch-caption {
  margin-top: 32px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--r27-text-secondary);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  font-style: italic;
}
.r27-arch-dataflow {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}
.r27-arch-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--r27-accent);
  opacity: 0;
  animation: r27-particleRise 3s ease-out infinite;
}
.r27-arch-particle:nth-child(1) { left: 20%; animation-delay: 0s; }
.r27-arch-particle:nth-child(2) { left: 40%; animation-delay: 0.8s; }
.r27-arch-particle:nth-child(3) { left: 60%; animation-delay: 1.6s; }
.r27-arch-particle:nth-child(4) { left: 80%; animation-delay: 2.4s; }
.r27-arch-particle:nth-child(5) { left: 50%; animation-delay: 0.4s; }

/* ═══ WORKFLOW SECTION ═══ */
.r27-workflow {
  text-align: center;
}
.r27-workflow-stages {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: 56px;
  position: relative;
}
.r27-workflow-stage {
  flex: 0 0 200px;
  padding: 28px 20px;
  background: var(--r27-surface-card);
  border: 1px solid var(--r27-border);
  border-radius: 14px;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.r27-workflow-stage:hover {
  transform: translateY(-4px);
  box-shadow: var(--r27-shadow-md);
  border-color: var(--r27-accent);
}
.r27-workflow-stage-num {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--r27-accent-subtle);
  border: 1px solid rgba(99,102,241,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--r27-accent);
  margin: 0 auto 14px;
}
.r27-workflow-stage-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--r27-text-primary);
  margin-bottom: 8px;
}
.r27-workflow-stage-desc {
  font-size: 14px;
  color: var(--r27-text-muted);
  line-height: 1.6;
}
.r27-workflow-arrow {
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--r27-text-muted);
  font-size: 20px;
  position: relative;
}
.r27-workflow-arrow::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  border-top: 1px dashed var(--r27-border-light);
  position: absolute;
  top: 50%;
}
@media (max-width: 1024px) {
  .r27-workflow-stages { flex-wrap: wrap; gap: 16px; }
  .r27-workflow-stage { flex: 0 0 calc(33% - 16px); }
  .r27-workflow-arrow { display: none; }
}
@media (max-width: 768px) {
  .r27-workflow-stage { flex: 0 0 100%; }
}

/* ═══ APPEXi SECTION ═══ */
.r27-appexi {
  background: var(--r27-surface-alt);
  padding: 126px 24px;
}
/* ★ APPEXi chat panel keeps a consistent dark theme regardless of
   the page theme — it simulates a real AI chat interface where
   dark backgrounds and light text are expected. The hardcoded
   colours prevent theme bleed (stat-cards-style regression). */
.r27-appexi-chat {
  background: #0D0E1A;
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: 16px;
  padding: 24px;
  min-height: 340px;
  position: relative;
  box-shadow: 0 16px 48px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
}
/* ── Chat header — mirrors the real APPEXi floating assistant ── */
.r27-appexi-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.r27-appexi-chat-header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.r27-appexi-chat-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(99,102,241,0.25), rgba(139,92,246,0.25));
  border: 1px solid rgba(99,102,241,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #A5B4FC;
  font-size: 16px;
  flex-shrink: 0;
}
.r27-appexi-chat-header-title {
  font-size: 15px;
  font-weight: 700;
  color: #F1F1F6;
  line-height: 1.2;
}
.r27-appexi-chat-header-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(148,163,184,0.7);
  line-height: 1.4;
}
.r27-appexi-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22C55E;
  display: inline-block;
  box-shadow: 0 0 8px rgba(34,197,94,0.6);
}
.r27-appexi-chat-header-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #34D399;
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.15);
  padding: 5px 12px;
  border-radius: 100px;
  white-space: nowrap;
}
.r27-appexi-chat-header-tag i {
  font-size: 8px;
}
/* ── Typewriter message container (hidden until a question is asked) ── */
.r27-appexi-chat-message {
  display: none;
}
.r27-appexi-chat-message:not(:empty) {
  display: block;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed rgba(255,255,255,0.07);
}
.r27-appexi-inner {
  display: flex;
  gap: 64px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
}
@media (min-width: 1600px) {
  .r27-appexi-inner { max-width: min(90vw, 1800px); }
}
.r27-appexi-left {
  flex: 0 0 40%;
}
.r27-appexi-right {
  flex: 0 0 60%;
}
.r27-appexi-questions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}
.r27-appexi-q-btn {
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--r27-accent-subtle);
  border: 1px solid rgba(99,102,241,0.12);
  color: var(--r27-text-primary);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}
.r27-appexi-q-btn:hover {
  background: rgba(99,102,241,0.2);
  transform: scale(1.02);
}
.r27-appexi-q-btn i {
  color: var(--r27-accent);
  font-size: 14px;
}

.r27-appexi-chat-message {
  font-size: 15px;
  line-height: 1.7;
  color: var(--r27-text-primary);
  white-space: pre-wrap;
}
.r27-appexi-chat-cursor {
  display: inline-block;
  width: 2px;
  height: 18px;
  background: var(--r27-accent);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: r27-typewriterCursor 0.8s step-end infinite;
}
.r27-appexi-chat-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--r27-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.r27-appexi-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.r27-appexi-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--r27-border);
  font-size: 12px;
  color: var(--r27-text-secondary);
  font-weight: 500;
}
.r27-appexi-badge i {
  color: var(--r27-accent-teal);
  font-size: 12px;
}
@media (max-width: 1024px) {
  .r27-appexi-inner { flex-direction: column; gap: 32px; }
  .r27-appexi-left, .r27-appexi-right { flex: 0 0 100%; }
}

/* ═══ COMPARISON MATRIX SECTION ═══ */
/* R37 polish: tighter header-to-table spacing for the dense matrix */
#comparison .r27-section-header { margin-bottom: 44px; }
.r27-matrix-wrapper {
  overflow-x: auto;
  margin-top: 28px;
  border-radius: 14px;
  border: 1px solid var(--r27-border);
}
.r27-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 800px;
}
.r27-matrix th {
  padding: 14px 16px;
  text-align: left;
  font-weight: 600;
  background: var(--r27-surface-alt);
  color: var(--r27-text-primary);
  border-bottom: 1px solid var(--r27-border);
  white-space: nowrap;
}
.r27-matrix th:first-child {
  position: sticky;
  left: 0;
  background: var(--r27-surface-alt);
  z-index: 2;
}
.r27-matrix th.r27-matrix-col-highlight {
  background: var(--r27-accent-subtle);
  color: var(--r27-accent-hover);
}
.r27-matrix td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--r27-border);
  color: var(--r27-text-secondary);
  text-align: center;
  position: relative;
}
.r27-matrix td:first-child {
  text-align: left;
  font-weight: 500;
  color: var(--r27-text-primary);
  position: sticky;
  left: 0;
  background: var(--r27-surface-card);
  z-index: 1;
}
.r27-matrix td.r27-matrix-col-highlight {
  background: var(--r27-accent-subtle);
}
.r27-matrix tr:hover td {
  background: rgba(255,255,255,0.02);
}
.r27-matrix tr:hover td.r27-matrix-col-highlight {
  background: rgba(99,102,241,0.12);
}
.r27-matrix-cell-yes {
  color: var(--r27-accent-green);
  font-weight: 600;
}
.r27-matrix-cell-partial {
  color: var(--r27-accent-warm);
  font-weight: 600;
}
.r27-matrix-cell-no {
  color: var(--r27-text-muted);
}
.r27-matrix-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--r27-surface-card);
  border: 1px solid var(--r27-border-light);
  font-size: 12px;
  line-height: 1.5;
  color: var(--r27-text-secondary);
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
  box-shadow: var(--r27-shadow-lg);
}
.r27-matrix td:hover .r27-matrix-tooltip {
  display: block;
}
.r27-matrix-legend {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 20px;
  flex-wrap: wrap;
}
.r27-matrix-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--r27-text-secondary);
}
.r27-matrix-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.r27-matrix-legend-dot-green { background: var(--r27-accent-green); }
.r27-matrix-legend-dot-amber { background: var(--r27-accent-warm); }
.r27-matrix-legend-dot-grey { background: var(--r27-text-muted); }
@media (max-width: 768px) {
  .r27-matrix { font-size: 12px; min-width: 600px; }
  .r27-matrix th, .r27-matrix td { padding: 10px 12px; }
}

/* ═══ STAT COUNTERS SECTION ═══ */
/* R37 polish: platform metrics become the visual anchor of the page */
.r27-stats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  margin: 56px auto 0;
  max-width: 1200px;
}
@media (min-width: 1600px) {
  .r27-stats-grid { max-width: min(80vw, 1600px); }
}
.r27-stat-card {
  text-align: center;
  padding: 30px 18px;
  background: var(--r27-surface-card);
  border: 1px solid var(--r27-border);
  border-radius: 16px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  min-height: 190px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.03);
}
.r27-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #6366F1, #A78BFA);
  opacity: 0.65;
}
.r27-stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(129,140,248,0.35);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04);
}
.r27-stat-card:hover .r27-stat-number,
.r27-stat-card:hover .r27-stat-label,
.r27-stat-card:hover i {
  opacity: 1 !important;
}
.r27-stat-number {
  font-size: clamp(44px, 4.6vw, 68px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #F1F1F6 30%, #C7D2FE);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.r27-stat-label {
  font-size: 14px;
  color: var(--r27-text-secondary);
  font-weight: 600;
  line-height: 1.45;
}
@media (max-width: 1024px) {
  .r27-stats-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .r27-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .r27-stat-card { padding: 20px 14px; min-height: 150px; }
  .r27-stat-number { min-height: 56px; }
}

/* ═══ TRUST & CREDIBILITY SECTION ═══ */
.r27-trust-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.r27-trust-badge {
  text-align: center;
  padding: 24px 12px;
  border-radius: 12px;
  border: 1px solid var(--r27-border);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  cursor: default;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.03);
}
.r27-trust-badge:hover {
  border-color: var(--r27-border-light);
  background: rgba(255,255,255,0.02);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.04);
}
.r27-trust-badge:hover .r27-trust-badge-title,
.r27-trust-badge:hover .r27-trust-badge-label,
.r27-trust-badge:hover .r27-trust-badge-icon {
  opacity: 1 !important;
}
.r27-trust-badge-icon {
  font-size: 24px;
  color: var(--r27-accent-teal);
  margin-bottom: 12px;
}
.r27-trust-badge-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--r27-text-primary);
  margin-bottom: 4px;
}
.r27-trust-badge-label {
  font-size: 12px;
  color: var(--r27-text-muted);
}
.r27-trust-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--r27-surface-glass);
  backdrop-filter: blur(12px);
  border: 1px solid var(--r27-glass-border);
  font-size: 12px;
  line-height: 1.5;
  color: var(--r27-text-secondary);
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
  box-shadow: var(--r27-shadow-lg);
  min-width: 200px;
}
.r27-trust-badge:hover .r27-trust-tooltip {
  display: block;
}
@media (max-width: 1024px) {
  .r27-trust-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .r27-trust-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ═══ FINAL CTA SECTION — R37 Premium Conversion Panel ═══ */
/* Layered glass: ambient colour glows + grid texture + frosted panel */
.r27-cta {
  position: relative;
  text-align: center;
  padding: 120px 24px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 80% at 18% 18%, rgba(99,102,241,0.22) 0%, transparent 55%),
    radial-gradient(ellipse 50% 70% at 82% 28%, rgba(139,92,246,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 50% 115%, rgba(20,184,166,0.10) 0%, transparent 60%),
    linear-gradient(160deg, #0B0D1A 0%, #10122B 45%, #0B0D1A 100%);
}
.r27-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, black 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, black 0%, transparent 75%);
  pointer-events: none;
}
.r27-cta-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  animation: r27-cta-breathe 7s ease-in-out infinite;
}
.r27-cta-glow-a {
  width: 420px;
  height: 420px;
  top: -140px;
  left: 8%;
  background: rgba(99,102,241,0.28);
}
.r27-cta-glow-b {
  width: 360px;
  height: 360px;
  bottom: -120px;
  right: 6%;
  background: rgba(139,92,246,0.24);
  animation-delay: 2.5s;
}
.r27-cta-panel {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: 0 auto;
  padding: 64px 56px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 32px 80px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.r27-cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 100px;
  background: rgba(99,102,241,0.12);
  border: 1px solid rgba(129,140,248,0.25);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #A5B4FC;
  margin-bottom: 24px;
}
.r27-cta-headline {
  font-size: clamp(34px, 3.4vw, 56px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 auto 20px;
  max-width: 800px;
  text-shadow: 0 2px 24px rgba(99,102,241,0.25);
}
.r27-cta-subtitle {
  font-size: 19px;
  line-height: 1.65;
  color: rgba(255,255,255,0.72);
  margin-bottom: 40px;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
.r27-cta-buttons {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.r27-cta-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 36px;
  border-radius: 14px;
  background: linear-gradient(135deg, #818CF8 0%, #6366F1 55%, #8B5CF6 100%);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 30px rgba(99,102,241,0.45), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.r27-cta-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(99,102,241,0.6), inset 0 1px 0 rgba(255,255,255,0.2);
}
.r27-cta-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 36px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.18s ease;
}
.r27-cta-btn-secondary:hover {
  border-color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.1);
  transform: translateY(-2px);
}
.r27-cta-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 28px;
}
.r27-cta-perk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 100px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
}
.r27-cta-perk i {
  color: #34D399;
}
.r27-cta-trust {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
}
.r27-cta-trust i {
  margin: 0 4px;
}
.r27-cta-trust span {
  margin: 0 8px;
}
@keyframes r27-cta-breathe {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.08); }
}
@media (max-width: 768px) {
  .r27-cta { padding: 72px 16px; }
  .r27-cta-panel { padding: 44px 20px; border-radius: 20px; }
  .r27-cta-buttons { flex-direction: column; align-items: center; }
  .r27-cta-btn-primary, .r27-cta-btn-secondary { width: 100%; justify-content: center; }
}

/* ═══ FOOTER ═══ */
.r27-footer {
  background: var(--r27-surface-alt);
  border-top: 1px solid var(--r27-border);
  padding: 72px 24px 36px;
}
.r27-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
}
@media (min-width: 1600px) {
  .r27-footer-inner { max-width: min(90vw, 1800px); }
}
.r27-footer-brand p {
  font-size: 14px;
  color: var(--r27-text-secondary);
  line-height: 1.6;
  margin: 12px 0 20px;
}
.r27-footer-social {
  display: flex;
  gap: 12px;
}
.r27-footer-social a {
  color: var(--r27-text-muted);
  font-size: 18px;
  transition: color 0.2s ease;
}
.r27-footer-social a:hover {
  color: var(--r27-text-primary);
}
.r27-footer-col-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--r27-text-primary);
  margin-bottom: 16px;
}
.r27-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.r27-footer-links a {
  font-size: 14px;
  color: var(--r27-text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}
.r27-footer-links a:hover {
  color: var(--r27-text-primary);
}
.r27-footer-legal {
  grid-column: 1 / -1;
  text-align: center;
  padding-top: 32px;
  margin-top: 32px;
  border-top: 1px solid var(--r27-border);
  font-size: 12px;
  color: var(--r27-text-muted);
}
.r27-footer-legal a {
  color: var(--r27-text-muted);
  text-decoration: none;
  margin: 0 8px;
  transition: color 0.2s ease;
}
.r27-footer-legal a:hover {
  color: var(--r27-text-primary);
}
@media (max-width: 1024px) {
  .r27-footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .r27-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .r27-footer-inner { grid-template-columns: 1fr; gap: 24px; }
}

/* ═══ SCROLL ENTRANCE ANIMATIONS ═══ */
.r27-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.r27-animate.visible {
  opacity: 1;
  transform: translateY(0);
}
.r27-animate-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.r27-animate-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* ═══ ENTERPRISE CAPABILITY BADGES (replaces trusted-by logos) ═══ */
.r27-hero-capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 0;
}
.r27-cap-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.12);
  font-size: 11px;
  font-weight: 500;
  color: var(--r27-text-secondary);
  transition: all 0.2s ease;
  cursor: default;
  white-space: nowrap;
}
.r27-cap-badge i {
  font-size: 10px;
  color: var(--r27-accent-hover);
}
.r27-cap-badge:hover {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.25);
  color: var(--r27-text-primary);
  transform: translateY(-1px);
}
@media (max-width: 768px) {
  .r27-hero-capabilities { justify-content: center; }
}

/* ═══ AMBIENT GLOW BEHIND INTELLIGENCE WHEEL ═══ */
.r27-hero-visual {
  position: relative;
}
.r27-hero-visual::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(99,102,241,0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: r27-glowPulse 4s ease-in-out infinite;
}
.r27-hero-visual > * {
  position: relative;
  z-index: 1;
}

/* ═══ AMBIENT DATA PARTICLES (Hero background) ═══ */
.r27-hero-particles {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.r27-hero-particle {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.4);
  animation: r27-particleRise 8s ease-in-out infinite;
}
.r27-hero-particle:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 7s; }
.r27-hero-particle:nth-child(2) { left: 25%; animation-delay: 1.2s; animation-duration: 9s; }
.r27-hero-particle:nth-child(3) { left: 40%; animation-delay: 2.5s; animation-duration: 8s; }
.r27-hero-particle:nth-child(4) { left: 55%; animation-delay: 0.8s; animation-duration: 10s; }
.r27-hero-particle:nth-child(5) { left: 70%; animation-delay: 3.2s; animation-duration: 7.5s; }
.r27-hero-particle:nth-child(6) { left: 85%; animation-delay: 1.8s; animation-duration: 8.5s; }
.r27-hero-particle:nth-child(7) { left: 15%; animation-delay: 4s; animation-duration: 9.5s; }
.r27-hero-particle:nth-child(8) { left: 60%; animation-delay: 2s; animation-duration: 7.2s; }


/* ═══ ASSESSMENT MARKETPLACE CARDS — Standalone products below hero ═══ */
.r27-assessment-marketplace {
  background: var(--r27-surface-alt, #0C0C14);
  padding: 126px 24px;
}
/* Five equal cards, ONE horizontal row on desktop (≥1024px).
   Full page width: this is a primary product-discovery section, not a
   narrow sidebar column. The old 1200px max-width was the actual cause
   of cramped cards — corrected here rather than patched with overflow. */
.r27-marketplace-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;
  width: 100%;
  max-width: min(94vw, 1720px);
  margin: 0 auto;
}
.r27-marketplace-card {
  background: var(--r27-surface-card, #111119);
  border: 1px solid color-mix(in srgb, var(--mp-colour) 25%, transparent);
  border-radius: 14px;
  padding: 26px 18px;
  display: flex;
  flex-direction: column;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}
.r27-marketplace-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--mp-colour);
}
.r27-marketplace-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--mp-colour) 50%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--mp-colour) 15%, transparent);
}
.r27-mp-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.r27-mp-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--mp-colour) 15%, transparent);
  flex-shrink: 0;
}
.r27-mp-icon-wrap i {
  font-size: 20px;
  color: var(--mp-colour);
}
.r27-mp-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--r27-text-primary, #F1F1F6);
  margin: 0;
}
.r27-mp-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--r27-text-secondary, #9C9CB0);
  margin: 0 0 14px;
  flex-grow: 0;
}
.r27-mp-meta {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}
.r27-mp-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--r27-text-muted, #6B6B82);
  padding: 4px 9px;
  border-radius: 5px;
  background: rgba(255,255,255,0.03);
}
.r27-mp-meta-item i {
  color: var(--mp-colour);
  font-size: 11px;
}
.r27-mp-features {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 18px;
  flex-grow: 1;
}
.r27-mp-feature {
  font-size: 13px;
  color: var(--r27-text-secondary, #9C9CB0);
  display: flex;
  align-items: center;
  gap: 7px;
}
.r27-mp-feature i {
  color: var(--mp-colour);
  font-size: 11px;
}
.r27-mp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 18px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--mp-colour) 40%, transparent);
  color: var(--r27-text-primary, #F1F1F6);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  margin-top: auto;
}
.r27-mp-cta:hover {
  background: color-mix(in srgb, var(--mp-colour) 15%, transparent);
  border-color: var(--mp-colour);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--mp-colour) 20%, transparent);
}
.r27-mp-upsell {
  text-align: center;
  margin-top: 40px;
  font-size: 14px;
  color: var(--r27-text-secondary, #9C9CB0);
}
.r27-mp-upsell-link {
  color: var(--r27-accent, #6366F1);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}
.r27-mp-upsell-link:hover {
  color: var(--r27-accent-hover, #818CF8);
}
.r27-mp-upsell i {
  color: var(--r27-accent, #6366F1);
  margin-right: 4px;
}
@media (max-width: 1024px) {
  .r27-marketplace-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .r27-marketplace-grid { grid-template-columns: repeat(2, 1fr); }
  .r27-marketplace-card { padding: 22px 18px; }
}
@media (max-width: 480px) {
  .r27-marketplace-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* RELEASE 33 — HERO FRAMEWORK NAVIGATOR (PREMIUM EXECUTIVE)              */
/*                                                                         */
/* Five modes of the Intelligence Wheel. Premium executive product showcase.      */
/*                                                                                 */
/* Structure:                                                                       */
/*   .fw-nav (container)                                                            */
/*   ├── .fw-nav-details (expanded panel area)                                      */
/*   │   └── .fw-nav-detail (one per, .fw-nav-detail-active visible)               */
/*   │       ├── .fw-nav-detail-accent (4px colour top bar)                        */
/*   │       └── .fw-nav-detail-inner                                               */
/*   │           ├── .fw-nav-detail-icon (56px colour badge with glow)             */
/*   │           └── .fw-nav-detail-body                                            */
/*   │               ├── .fw-nav-detail-title (32px — dominant)                    */
/*   │               ├── .fw-nav-detail-sub (12px — muted)                         */
/*   │               ├── .fw-nav-detail-outcome (19px — colour)                    */
/*   │               ├── .fw-nav-detail-highlights (3 × subtle text with dots)     */
/*   │               ├── .fw-nav-detail-ai (AI Insight label + sentence)           */
/*   │               ├── .fw-nav-detail-info (metadata + expected outcomes)        */
/*   │               └── .fw-nav-detail-cta-row (right-aligned CTA)                */
/*   └── .fw-nav-chips (segmented control selector row)                             */
/*       └── .fw-nav-chip (pill, .fw-nav-chip-active = filled+glow)                */
/*                                                                                 */
/* Hub: .hub-framework-ring — pulsed accent ring for active framework              */
/* ═════════════════════════════════════════════════════════════════════════════════ */

/* ── Container ── */
.fw-nav {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  padding: 0;
  overflow: visible;
}

/* ── Expanded Detail Panel Area ── */
.fw-nav-details {
  position: relative;
  min-height: 0;
  margin-bottom: 12px;
  overflow: visible;
}

/* ── Individual Detail Panel — Premium Executive Product Card ── */
.fw-nav-detail {
  display: none;
  position: relative;
  border-radius: 16px;
  background: rgba(8, 12, 28, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.04);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255,255,255,0.03);
  transition: opacity 0.3s ease;
}

.fw-nav-detail-active {
  display: block;
}

/* 4px colour accent bar */
.fw-nav-detail-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  opacity: 0.8;
  z-index: 2;
}

/* ── Inner Layout: icon | body (stacked) ── */
.fw-nav-detail-inner {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 18px 20px 16px;
}

/* ── Framework Icon Badge — 64px, premium glass with halo glow ── */
.fw-nav-detail-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: color-mix(in srgb, var(--fw-clr) 12%, rgba(10, 16, 32, 0.5));
  border: 1px solid color-mix(in srgb, var(--fw-clr) 16%, transparent);
  flex-shrink: 0;
  box-shadow: 0 0 28px color-mix(in srgb, var(--fw-clr) 10%, transparent);
}

.fw-nav-detail-icon i {
  font-size: 30px;
  color: var(--fw-clr);
}

/* ── Body Column — title, subtitle, outcome, highlights, AI, info, CTA ── */
.fw-nav-detail-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Framework Name — dominant, 34px, readable at 2m ── */
.fw-nav-detail-title {
  font-size: 34px;
  font-weight: 800;
  color: #F1F1F6;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.fw-nav-detail-sub {
  font-size: 13px;
  font-weight: 600;
  color: rgba(148, 163, 184, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}

/* ── Business Outcome — second in hierarchy, colour accent ── */
.fw-nav-detail-outcome {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 4px 0 6px;
}

/* ── Three Capability Highlights — subtle, no borders/fills ── */
.fw-nav-detail-highlights {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}

.fw-nav-detail-hl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  color: rgba(241, 241, 246, 0.7);
  white-space: nowrap;
}

.fw-nav-detail-hl-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0.5;
  flex-shrink: 0;
}

.fw-nav-detail-hl-sep {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.2);
  margin: 0 6px;
}

/* ── AI Insight — compact, intelligent, domain-specific ── */
.fw-nav-detail-ai {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  background: rgba(99, 102, 241, 0.04);
  border: 1px solid rgba(99, 102, 241, 0.06);
  margin: 4px 0 2px;
}

.fw-nav-detail-ai-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(148, 163, 184, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  padding-top: 1px;
}

.fw-nav-detail-ai-text {
  font-size: 13px;
  font-weight: 500;
  color: rgba(148, 163, 184, 0.7);
  line-height: 1.5;
}

/* ── Metadata + Expected Business Outcomes — single clean row ── */
.fw-nav-detail-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0 4px;
}

.fw-nav-detail-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(148, 163, 184, 0.55);
}

.fw-nav-detail-meta-sep {
  color: rgba(148, 163, 184, 0.15);
  font-weight: 300;
}

.fw-nav-detail-outcomes {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.fw-nav-detail-outcomes-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(148, 163, 184, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.fw-nav-detail-outcome-item {
  font-size: 14px;
  font-weight: 600;
  color: rgba(241, 241, 246, 0.6);
  white-space: nowrap;
}

/* ── CTA — right-aligned, strong action ── */
.fw-nav-detail-cta-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.fw-nav-detail-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 700;
  color: rgba(241, 241, 246, 0.7);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
  user-select: none;
}

.fw-nav-detail-cta:hover {
  color: #F1F1F6;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.fw-nav-arrow {
  font-size: 11px;
  transition: transform 0.25s ease;
}

.fw-nav-detail-cta:hover .fw-nav-arrow {
  transform: translateX(4px);
}

/* ── Selector Chips Row — Segmented Control ── */
.fw-nav-chips {
  display: flex;
  flex-direction: row;
  gap: 6px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: visible;
}

/* ── Individual Chip — Apple/Figma segmented control style ── */
.fw-nav-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.03);
  background: rgba(6, 10, 24, 0.3);
  color: rgba(241, 241, 246, 0.35);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  outline: none;
  user-select: none;
  flex-shrink: 0;
}

.fw-nav-chip i {
  font-size: 18px;
  color: rgba(148, 163, 184, 0.25);
  transition: color 0.3s ease;
}

.fw-nav-chip-label {
  white-space: nowrap;
}

/* ── Chip Hover ── */
.fw-nav-chip:hover {
  border-color: color-mix(in srgb, var(--fw-clr) 20%, transparent);
  background: color-mix(in srgb, var(--fw-clr) 4%, rgba(8, 12, 28, 0.5));
  color: rgba(241, 241, 246, 0.65);
  transform: translateY(-1px);
}

.fw-nav-chip:hover i {
  color: color-mix(in srgb, var(--fw-clr) 50%, rgba(148, 163, 184, 0.3));
}

/* ── Chip Active — Filled Segmented Control ── */
.fw-nav-chip-active {
  border-color: color-mix(in srgb, var(--fw-clr) 50%, transparent);
  background: color-mix(in srgb, var(--fw-clr) 14%, rgba(10, 16, 32, 0.8));
  color: #F1F1F6;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 0 28px color-mix(in srgb, var(--fw-clr) 12%, transparent),
              inset 0 1px 0 color-mix(in srgb, var(--fw-clr) 8%, rgba(255,255,255,0.06));
  transform: scale(1.02);
}

.fw-nav-chip-active i {
  color: var(--fw-clr);
  font-size: 16px;
}

/* ── Chip Focus / Keyboard ── */
.fw-nav-chip:focus-visible {
  outline: 2px solid var(--fw-clr);
  outline-offset: 2px;
}

/* ── Chip Click ── */
.fw-nav-chip:active {
  transform: scale(0.97);
  transition-duration: 0.08s;
}
.fw-nav-chip-active:active {
  transform: scale(0.97);
  transition-duration: 0.08s;
}

/* ── Hub Framework Accent Ring ── */
@keyframes framework-ring-pulse {
  0%, 100% { opacity: 0.04; transform: scale(1); }
  50% { opacity: 0.08; transform: scale(1.02); }
}
.hub-framework-ring {
  animation: framework-ring-pulse 3s ease-in-out infinite;
  transform-origin: 375px 375px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .fw-nav { max-width: 100%; padding: 0 12px; }
  .fw-nav-detail-inner {
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px 24px 16px;
  }
  .fw-nav-detail-icon { width: 54px; height: 54px; }
  .fw-nav-detail-icon i { font-size: 25px; }
  .fw-nav-detail-title { font-size: 30px; }
  .fw-nav-detail-outcome { font-size: 18px; }
  .fw-nav-detail-info { gap: 6px; }
  .fw-nav-detail-cta-row { justify-content: flex-start; }
  .fw-nav-chip { padding: 8px 18px; font-size: 14px; gap: 6px; }
  .fw-nav-chip i { font-size: 16px; }
  .fw-nav-chip-active { font-size: 14px; }
}

@media (max-width: 768px) {
  .fw-nav-detail-inner { padding: 16px 20px 14px; gap: 16px; }
  .fw-nav-detail-icon { width: 48px; height: 48px; }
  .fw-nav-detail-icon i { font-size: 22px; }
  .fw-nav-detail-title { font-size: 26px; }
  .fw-nav-detail-sub { font-size: 10px; }
  .fw-nav-detail-outcome { font-size: 17px; }
  .fw-nav-detail-hl { font-size: 12px; }
  .fw-nav-detail-ai { flex-direction: column; gap: 4px; }
  .fw-nav-detail-meta { font-size: 12px; flex-wrap: wrap; }
  .fw-nav-detail-outcome-item { font-size: 12px; }
  .fw-nav-detail-cta { font-size: 14px; padding: 7px 18px; }
  .fw-nav-chips { gap: 4px; flex-wrap: wrap; }
  .fw-nav-chip { padding: 7px 16px; font-size: 13px; gap: 5px; }
  .fw-nav-chip i { font-size: 14px; }
  .fw-nav-chip-active { font-size: 13px; transform: none; }
}

@media (max-width: 480px) {
  .fw-nav-detail-title { font-size: 20px; }
  .fw-nav-detail-sub { font-size: 9px; }
  .fw-nav-detail-outcome { font-size: 14px; }
  .fw-nav-detail-hl { font-size: 11px; }
  .fw-nav-detail-highlights { display: none; }
  .fw-nav-detail-ai { display: none; }
  .fw-nav-detail-info { display: none; }
  .fw-nav-detail-cta-row { display: none; }
  .fw-nav-chip-label { display: none; }
  .fw-nav-chip { padding: 6px 12px; }
  .fw-nav-chip i { font-size: 15px; }
  .fw-nav-chip-active { padding: 6px 14px; }
}

/* ══════════════════════════════════════════════════════════════
   What's Available Today — Product Availability Catalogue (R41.4)
   Governed four-state product-status section. Uses --r27-* tokens
   only (the R27 homepage is theme-isolated by the base.css guard),
   so badges stay contrast-safe in every app theme. Availability is
   a first-class product communication — large readable badges.
   ══════════════════════════════════════════════════════════════ */

.r27-avail-section {
  position: relative;
  padding: 110px 24px;
  background: var(--r27-surface);
}

.r27-avail-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.r27-avail-title {
  font-size: clamp(40px, 4.4vw, 58px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--r27-text-primary);
  margin: 16px 0 14px;
}

.r27-avail-sub {
  font-size: 19px;
  line-height: 1.65;
  color: var(--r27-text-secondary);
  max-width: 760px;
  margin: 0 0 52px;
}

/* ── Groups — each state is a distinct panel with a coloured top band ── */
.r27-avail-groups {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.r27-avail-group {
  position: relative;
  padding: 30px 30px 34px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 100%);
  border: 1px solid var(--r27-border);
  border-top: 3px solid transparent;
  overflow: hidden;
}

.r27-avail-group[data-state="available"]   { border-top-color: #22C55E; }
.r27-avail-group[data-state="pilot"]       { border-top-color: #F59E0B; }
.r27-avail-group[data-state="coming_soon"] { border-top-color: #6366F1; }
.r27-avail-group[data-state="enterprise"]  { border-top-color: #A855F7; }

.r27-avail-group-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.r27-avail-group-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.05);
}

.r27-avail-group-dot-available { background: #22C55E; box-shadow: 0 0 22px rgba(34, 197, 94, 0.45); }
.r27-avail-group-dot-pilot     { background: #F59E0B; box-shadow: 0 0 22px rgba(245, 158, 11, 0.45); }
.r27-avail-group-dot-coming    { background: #6366F1; box-shadow: 0 0 22px rgba(99, 102, 241, 0.45); }
.r27-avail-group-dot-enterprise{ background: #A855F7; box-shadow: 0 0 22px rgba(168, 85, 247, 0.45); }

.r27-avail-group-title {
  font-size: 26px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--r27-text-primary);
  margin: 0;
}

.r27-avail-group[data-state="available"] .r27-avail-group-title   { color: #4ADE80; }
.r27-avail-group[data-state="pilot"] .r27-avail-group-title       { color: #FBBF24; }
.r27-avail-group[data-state="coming_soon"] .r27-avail-group-title { color: #A5B4FC; }
.r27-avail-group[data-state="enterprise"] .r27-avail-group-title  { color: #C4B5FD; }

.r27-avail-group-note {
  font-size: 14px;
  color: var(--r27-text-muted);
  margin-left: 4px;
}

.r27-avail-group-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

/* ── Cards ── */
.r27-avail-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: 18px;
  background: var(--r27-surface-card);
  border: 1px solid var(--r27-border);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.r27-avail-card:hover {
  transform: translateY(-4px);
  border-color: var(--r27-border-light);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.r27-avail-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.r27-avail-icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 19px;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
}

/* Status badge — LARGE, readable at normal viewing distance */
.r27-avail-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1;
}

.r27-avail-badge i {
  font-size: 12px;
}

.r27-avail-available {
  background: rgba(34, 197, 94, 0.14);
  color: #4ADE80;
  border-color: rgba(34, 197, 94, 0.35);
}

.r27-avail-pilot {
  background: rgba(245, 158, 11, 0.14);
  color: #FBBF24;
  border-color: rgba(245, 158, 11, 0.35);
}

.r27-avail-coming {
  background: rgba(99, 102, 241, 0.18);
  color: #A5B4FC;
  border-color: rgba(99, 102, 241, 0.4);
}

.r27-avail-enterprise {
  background: rgba(168, 85, 247, 0.14);
  color: #C4B5FD;
  border-color: rgba(168, 85, 247, 0.35);
}

.r27-avail-name {
  font-size: 19px;
  font-weight: 700;
  color: var(--r27-text-primary);
  line-height: 1.3;
}

.r27-avail-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--r27-text-secondary);
  flex-grow: 1;
}

.r27-avail-card-bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

/* CTA — clearly visible. AVAILABLE cards get the solid gradient primary
   action (Start Free Trial); PILOT/COMING SOON keep the subdued
   early-access style. Styled from the governed data-state attribute. */
.r27-avail-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 11px;
  background: var(--r27-accent-subtle);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: var(--r27-accent-hover);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.r27-avail-card[data-availability="available"] .r27-avail-cta {
  background: var(--r27-gradient-cta);
  border: 1px solid transparent;
  color: #fff;
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.3);
}

.r27-avail-cta:hover {
  background: rgba(99, 102, 241, 0.22);
  border-color: rgba(99, 102, 241, 0.45);
  color: #fff;
  transform: translateY(-1px);
}

.r27-avail-card[data-availability="available"] .r27-avail-cta:hover {
  background: linear-gradient(135deg, #818CF8 0%, #6366F1 55%, #8B5CF6 100%);
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
}

/* ── Responsive ── */
@media (max-width: 1280px) {
  .r27-avail-group-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .r27-avail-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r27-avail-title { font-size: 40px; }
  .r27-avail-group { padding: 26px 24px 28px; }
}

@media (max-width: 768px) {
  .r27-avail-section { padding: 72px 20px; }
  .r27-avail-title { font-size: 34px; }
  .r27-avail-group-note { display: none; }
  .r27-avail-group-title { font-size: 22px; }
}

@media (max-width: 480px) {
  .r27-avail-group-grid { grid-template-columns: 1fr; }
  .r27-avail-title { font-size: 30px; }
  .r27-avail-group { padding: 22px 18px 24px; }
  .r27-avail-group-title { font-size: 20px; }
  .r27-avail-badge { font-size: 13.5px; padding: 7px 12px; }
}

/* ── Launch Announcement Badge (COMING SOON | Q1 2027) ── */
/* Bright-red glowing/pulsing launch indicator placed immediately above */
/* the "Enterprise Intelligence Platform" label in the hero. */
/* Subtle pulse (no rapid flashing). Disabled for prefers-reduced-motion. */

@keyframes r27-launch-glow {
  0%, 100% {
    box-shadow: 0 0 6px rgba(255, 45, 45, 0.75),
                0 0 16px rgba(255, 45, 45, 0.45),
                0 0 30px rgba(255, 45, 45, 0.28),
                inset 0 0 8px rgba(255, 45, 45, 0.22);
    border-color: #ff5c5c;
  }
  50% {
    box-shadow: 0 0 3px rgba(255, 45, 45, 0.35),
                0 0 8px rgba(255, 45, 45, 0.18),
                0 0 14px rgba(255, 45, 45, 0.10),
                inset 0 0 4px rgba(255, 45, 45, 0.08);
    border-color: #ff2d2d;
  }
}

@keyframes r27-launch-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.82); }
}

.r27-launch-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(40, 0, 0, 0.72);
  border: 2px solid #ff2d2d;
  margin-bottom: 18px;
  backdrop-filter: blur(8px);
  animation: r27-launch-glow 1.8s ease-in-out infinite;
}

.r27-launch-badge-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff2d2d;
  flex-shrink: 0;
  box-shadow: 0 0 8px #ff2d2d, 0 0 16px #ff2d2d, 0 0 24px #ff2d2d;
  animation: r27-launch-dot-pulse 1.8s ease-in-out infinite;
}

.r27-launch-badge-text {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 0 6px rgba(255, 45, 45, 0.9), 0 0 14px rgba(255, 45, 45, 0.6);
  white-space: nowrap;
}

.r27-launch-badge-sep {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.65);
  flex-shrink: 0;
}

.r27-launch-badge-date {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #ffffff;
  text-shadow: 0 0 6px rgba(255, 45, 45, 0.9), 0 0 14px rgba(255, 45, 45, 0.6);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .r27-launch-badge,
  .r27-launch-badge-dot {
    animation: none;
  }
}



/* ════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════ */
/* RELEASE 34 — PLATFORM CONNECTION RIBBON                          */
/* "APPEX360 Connects With The Systems You Already Use"             */
/* r27-connect-* namespace (theme-isolated, like all r27-*).        */
/* Pure CSS marquee: the track holds two identical groups, so       */
/* translateX(-50%) loops seamlessly — no jump, no gap, no JS.      */
/*                                                                  */
/* Each system renders as an ICON TILE + NAME chip:                 */
/*   .r27-connect-chip  → glass chip card (border, gradient, radius) */
/*   .r27-connect-icon  → 44px tile holding a 22px category glyph    */
/*   .r27-connect-name  → system name, proper case, readable         */
/*                                                                  */
/* ICON POLICY — the glyphs are GENERIC CATEGORY icons (ERP, CMMS,   */
/* EAM, MES, SCADA, BI, IoT, historian…). No vendor logo is used,    */
/* because the product holds no verified/approved vendor-logo asset  */
/* set. This deliberately avoids implying a certified or native      */
/* integration with every named product — the connection-path note   */
/* below the ribbon carries the honest qualification.                */
/*                                                                  */
/* SEAM NOTE — spacing is symmetric padding on EVERY item (the last  */
/* one included), never a flex gap, so the boundary between the two  */
/* groups has exactly the same rhythm as the rest of the ribbon.     */
/* ════════════════════════════════════════════════════════════════ */

.r27-connect {
  position: relative;
  padding: 84px 0 88px;
  background:
    radial-gradient(900px 320px at 50% 0%, rgba(99, 102, 241, 0.10), transparent 70%),
    var(--r27-surface-alt, #0C0C14);
  border-top: 1px solid var(--r27-border);
  border-bottom: 1px solid var(--r27-border);
}

.r27-connect-header { padding: 0 24px; }

.r27-connect-gradient {
  background: linear-gradient(135deg, #818CF8, #A78BFA);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Marquee viewport — clips ONLY the moving track ───────────── */
.r27-connect-ribbon {
  position: relative;
  margin: 36px 0 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.r27-connect-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: r27-connect-marquee 48s linear infinite;
}

.r27-connect-group {
  display: flex;
  align-items: center;
  flex: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── Item — symmetric padding in place of a flex gap, so the loop
   seam keeps the same rhythm as the rest of the ribbon. ─────────── */
.r27-connect-item {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 10px 9px;
}

/* ── Chip card — the atomic "system" unit: icon tile + name ────── */
.r27-connect-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px 8px 9px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.018) 100%);
  border: 1px solid rgba(129, 140, 248, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 0.22s ease, background 0.22s ease;
}

/* ── Icon tile — 44px frame, 22px glyph (20–28px desktop band) ─── */
.r27-connect-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: radial-gradient(circle at 32% 26%, rgba(129, 140, 248, 0.30), rgba(99, 102, 241, 0.10) 72%);
  border: 1px solid rgba(129, 140, 248, 0.22);
  color: var(--r27-accent-hover);
  transition: color 0.22s ease, border-color 0.22s ease;
}

.r27-connect-icon i {
  font-size: 22px;
  line-height: 1;
}

.r27-connect-name {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--r27-text-secondary);
  transition: color 0.22s ease;
}

/* ── Hover — restrained lift on the chip, pauses the marquee ───── */
.r27-connect-item:hover .r27-connect-chip {
  border-color: rgba(129, 140, 248, 0.42);
  background: linear-gradient(180deg, rgba(129, 140, 248, 0.10) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.r27-connect-item:hover .r27-connect-icon {
  color: #C7D2FE;
  border-color: rgba(129, 140, 248, 0.36);
}

.r27-connect-item:hover .r27-connect-name { color: var(--r27-text-primary); }
.r27-connect-track:hover { animation-play-state: paused; }

@keyframes r27-connect-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.r27-connect-note {
  margin: 34px auto 0;
  padding: 0 24px;
  max-width: 900px;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: var(--r27-text-muted);
}

.r27-connect-note i { color: var(--r27-accent-hover); margin-right: 6px; }
.r27-connect-note strong { color: var(--r27-text-secondary); font-weight: 600; }

.r27-connect-note-link {
  color: var(--r27-accent-hover);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(129, 140, 248, 0.4);
}
.r27-connect-note-link:hover { color: #fff; }

@media (max-width: 640px) {
  .r27-connect { padding: 60px 0 64px; }
  .r27-connect-item { padding: 7px 6px; }
  .r27-connect-chip { gap: 9px; padding: 6px 13px 6px 7px; border-radius: 12px; }
  .r27-connect-icon { width: 34px; height: 34px; border-radius: 9px; }
  .r27-connect-icon i { font-size: 17px; }
  .r27-connect-name { font-size: 13px; }
}

/* ── Reduced motion: stop the ribbon and show the COMPLETE list ──
   Deliberately scoped to the ribbon only. APPEXi visitor timing
   (the 4-second auto-open delay) is untouched by this rule.        */
@media (prefers-reduced-motion: reduce) {
  .r27-connect-ribbon {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .r27-connect-track {
    animation: none !important;
    transform: none !important;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  .r27-connect-group {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px;
    padding: 0 20px;
  }
  .r27-connect-group[aria-hidden="true"] { display: none; }
}

/* RELEASE 27 — INTEGRATION ECOSYSTEM ("Connects With Your Existing Technology")
   Pure UI section. r27-ec-* namespace (theme-isolated, like all r27-*). */
/* ════════════════════════════════════════════════════════════════ */

.r27-ec {
  position: relative;
}

.r27-ec-lead {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--r27-text-secondary);
  max-width: 760px;
  margin: 4px auto 0;
}

/* ── Central flow visual ─────────────────────────────────────── */
.r27-ec-flow {
  max-width: 820px;
  margin: 0 auto 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
}

.r27-ec-flow-systems {
  width: 100%;
  text-align: center;
}

.r27-ec-flow-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--r27-text-muted);
  margin-bottom: 16px;
}

.r27-ec-flow-label i {
  margin-right: 6px;
  color: var(--r27-accent-hover);
}

.r27-ec-flow-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.r27-ec-flow-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--r27-text-primary);
  background: var(--r27-surface-card);
  border: 1px solid var(--r27-border);
  box-shadow: var(--r27-shadow-sm);
}

.r27-ec-flow-chip i {
  font-size: 14px;
}

.r27-ec-flow-chip-cmms i { color: #6366F1; }
.r27-ec-flow-chip-erp i { color: #3B82F6; }
.r27-ec-flow-chip-mes i { color: #F59E0B; }
.r27-ec-flow-chip-safety i { color: #22C55E; }
.r27-ec-flow-chip-data i { color: #A78BFA; }

.r27-ec-flow-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2px;
  height: 52px;
  position: relative;
}

.r27-ec-flow-line {
  flex: 1;
  width: 2px;
  background: linear-gradient(180deg, rgba(129,140,248,0.55), rgba(99,102,241,0.85));
}

.r27-ec-flow-arrow {
  font-size: 12px;
  color: #818CF8;
  margin-top: -2px;
}

.r27-ec-flow-hub {
  width: 220px;
  padding: 26px 20px;
  text-align: center;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(99,102,241,0.16), rgba(139,92,246,0.10));
  border: 1px solid rgba(129,140,248,0.35);
  box-shadow: var(--r27-shadow-glow), var(--r27-shadow-md);
  position: relative;
}

.r27-ec-flow-hub-ring {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--r27-gradient-cta);
  box-shadow: 0 0 24px rgba(99,102,241,0.4);
}

.r27-ec-flow-hub-icon {
  font-size: 24px;
  color: #fff;
}

.r27-ec-flow-hub-name {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--r27-text-primary);
  background: linear-gradient(135deg, #818CF8, #A78BFA);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.r27-ec-flow-hub-sub {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--r27-text-muted);
  margin-top: 6px;
}

.r27-ec-flow-node {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--r27-text-primary);
  background: var(--r27-surface-card);
  border: 1px solid var(--r27-border-light);
  box-shadow: var(--r27-shadow-sm);
}

.r27-ec-flow-node i {
  color: #818CF8;
  font-size: 15px;
}

.r27-ec-flow-node-appexi {
  border-color: rgba(129,140,248,0.4);
}

.r27-ec-flow-node-board {
  border-color: rgba(245,158,11,0.45);
  background: linear-gradient(160deg, rgba(245,158,11,0.10), rgba(17,17,25,0.4));
}

.r27-ec-flow-node-board i { color: #F59E0B; }

/* ── Legend ──────────────────────────────────────────────────── */
.r27-ec-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 22px;
  margin: 0 auto 48px;
  padding: 14px 22px;
  border-radius: 14px;
  background: var(--r27-surface-glass);
  border: 1px solid var(--r27-glass-border);
  max-width: 900px;
}

.r27-ec-legend-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--r27-text-muted);
}

.r27-ec-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--r27-text-secondary);
}

.r27-ec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.r27-ec-tier-verified .r27-ec-dot { background: #22C55E; box-shadow: 0 0 6px rgba(34,197,94,0.6); }
.r27-ec-tier-api .r27-ec-dot { background: #818CF8; box-shadow: 0 0 6px rgba(129,140,248,0.6); }
.r27-ec-tier-enterprise .r27-ec-dot { background: #F59E0B; box-shadow: 0 0 6px rgba(245,158,11,0.6); }

/* ── Category cards grid ─────────────────────────────────────── */
.r27-ec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0 auto 52px;
  max-width: 1180px;
}

.r27-ec-card {
  background: var(--r27-surface-card);
  border: 1px solid var(--r27-border);
  border-radius: 18px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}

.r27-ec-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  opacity: 0.85;
}

.r27-ec-accent-indigo::before { background: linear-gradient(90deg, #6366F1, #818CF8); }
.r27-ec-accent-blue::before { background: linear-gradient(90deg, #3B82F6, #60A5FA); }
.r27-ec-accent-green::before { background: linear-gradient(90deg, #22C55E, #4ADE80); }
.r27-ec-accent-amber::before { background: linear-gradient(90deg, #F59E0B, #FBBF24); }
.r27-ec-accent-purple::before { background: linear-gradient(90deg, #8B5CF6, #A78BFA); }

.r27-ec-card:hover {
  border-color: var(--r27-border-light);
  transform: translateY(-2px);
  box-shadow: var(--r27-shadow-md);
}

.r27-ec-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.r27-ec-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: var(--r27-accent-subtle);
  color: var(--r27-accent-hover);
  flex-shrink: 0;
}

.r27-ec-accent-blue .r27-ec-card-icon { background: rgba(59,130,246,0.12); color: #60A5FA; }
.r27-ec-accent-green .r27-ec-card-icon { background: rgba(34,197,94,0.12); color: #4ADE80; }
.r27-ec-accent-amber .r27-ec-card-icon { background: rgba(245,158,11,0.12); color: #FBBF24; }
.r27-ec-accent-purple .r27-ec-card-icon { background: rgba(139,92,246,0.12); color: #A78BFA; }

.r27-ec-card-titles {
  min-width: 0;
}

.r27-ec-card-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--r27-text-primary);
  margin: 0 0 3px;
}

.r27-ec-card-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--r27-text-muted);
  margin: 0;
}

.r27-ec-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.r27-ec-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--r27-text-secondary);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--r27-border);
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.r27-ec-chip:hover {
  color: var(--r27-text-primary);
  border-color: var(--r27-border-light);
  background: rgba(255,255,255,0.06);
}

/* ── Credibility + badges ────────────────────────────────────── */
.r27-ec-cred {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.r27-ec-cred-statement {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--r27-text-primary);
  padding: 18px 26px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(99,102,241,0.10), rgba(139,92,246,0.06));
  border: 1px solid rgba(129,140,248,0.28);
  margin-bottom: 22px;
}

.r27-ec-cred-statement i {
  color: #4ADE80;
  font-size: 18px;
}

.r27-ec-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.r27-ec-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--r27-text-secondary);
  background: var(--r27-surface-card);
  border: 1px solid var(--r27-border-light);
}

.r27-ec-badge i {
  color: #22C55E;
  font-size: 12px;
}

.r27-ec-seo {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--r27-text-muted);
  max-width: 780px;
  margin: 26px auto 0;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .r27-ec-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .r27-ec-grid {
    grid-template-columns: 1fr;
  }
  .r27-ec-flow-hub {
    width: 200px;
    padding: 22px 16px;
  }
  .r27-ec-flow-chip {
    font-size: 13px;
    padding: 8px 14px;
  }
  .r27-ec-legend {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 18px;
  }
  .r27-ec-cred-statement {
    flex-direction: column;
    text-align: center;
    padding: 16px 18px;
  }
}

@media (max-width: 480px) {
  .r27-ec-flow-chip {
    font-size: 12.5px;
    padding: 7px 12px;
  }
  .r27-ec-badge {
    font-size: 12.5px;
    padding: 8px 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .r27-ec-card {
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════════════ */
/* BY THE NUMBERS — "Built for Enterprise-Level Intelligence"      */
/* Enterprise hierarchy: 3 primary metrics + 3 capability metrics   */
/* + subtle intelligence flow + trust statement + source labels.    */
/* Pure presentation. No backend / database / APPEXi logic.         */
/* ════════════════════════════════════════════════════════════════ */

.r27-bn {
  position: relative;
}

.r27-bn .r27-section-header {
  max-width: 860px;
  margin: 0 auto;
}

/* ── Six-card metrics row (desktop: ONE horizontal row) ─────────── */
.r27-bn-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  max-width: 1400px;
  margin: 44px auto 0;
  align-items: stretch;
}

.r27-bn-metric {
  position: relative;
  text-align: center;
  padding: 26px 16px 22px;
  background: linear-gradient(180deg, rgba(99,102,241,0.06), rgba(255,255,255,0) 55%), var(--r27-surface-card);
  border: 1px solid var(--r27-border);
  border-radius: 16px;
  overflow: hidden;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.03);
}

.r27-bn-metric::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #6366F1, #A78BFA);
  opacity: 0.5;
}

.r27-bn-number {
  font-size: clamp(40px, 3.4vw, 54px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  background: linear-gradient(135deg, #F1F1F6 30%, #C7D2FE);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.r27-bn-suffix {
  font-size: 0.5em;
  font-weight: 700;
  margin-left: 2px;
  -webkit-text-fill-color: #A5B4FC;
}

.r27-bn-metric-label {
  font-size: 14px;
  color: var(--r27-text-primary);
  font-weight: 700;
  line-height: 1.3;
}

.r27-bn-metric-desc {
  margin: 8px auto 0;
  max-width: 230px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--r27-text-muted);
}

/* ── Secondary metrics (subtle hierarchy — same row) ────────────── */
.r27-bn-metric-sm {
  border-color: rgba(148,163,184,0.22);
  background: var(--r27-surface-card);
}

.r27-bn-metric-sm::before {
  opacity: 0.25;
}

.r27-bn-number-sm {
  font-size: clamp(32px, 2.6vw, 42px);
  margin-bottom: 10px;
  background: linear-gradient(135deg, #E5E7EB 30%, #A5B4FC);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.r27-bn-metric-sm .r27-bn-metric-label {
  font-size: 13px;
  color: var(--r27-text-secondary);
}

/* ── Intelligence flow (horizontal, compact, Option B) ──────────── */
.r27-bn-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  max-width: 1060px;
  margin: 36px auto 0;
  padding: 20px 24px;
  background: linear-gradient(180deg, rgba(99,102,241,0.05), rgba(255,255,255,0) 70%);
  border-top: 1px solid var(--r27-border);
  border-bottom: 1px solid var(--r27-border);
}

.r27-bn-flow-node {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--r27-border);
  background: var(--r27-surface-card);
  font-size: 13px;
  font-weight: 600;
  color: var(--r27-text-secondary);
  white-space: nowrap;
}

.r27-bn-flow-node-accent {
  border-color: rgba(129,140,248,0.45);
  background: linear-gradient(180deg, rgba(99,102,241,0.14), rgba(99,102,241,0.04));
  color: var(--r27-text-primary);
}

.r27-bn-flow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #818CF8;
  box-shadow: 0 0 8px rgba(129,140,248,0.7);
  flex: none;
}

.r27-bn-flow-icon {
  font-size: 13px;
  color: #A5B4FC;
  flex: none;
}

.r27-bn-flow-label {
  line-height: 1.2;
}

.r27-bn-flow-line {
  width: 44px;
  height: 1px;
  margin: 0 6px;
  background: linear-gradient(90deg, rgba(129,140,248,0.15), rgba(129,140,248,0.55), rgba(129,140,248,0.15));
  position: relative;
  flex: none;
}

.r27-bn-flow-line::after {
  content: '';
  position: absolute;
  top: -2px; right: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #818CF8;
  opacity: 0.6;
}

/* ── Trust statement + source labels ────────────────────────────── */
.r27-bn-trust {
  margin: 36px auto 0;
  text-align: center;
}

.r27-bn-trust-statement {
  font-size: 15px;
  font-weight: 600;
  color: var(--r27-text-primary);
  letter-spacing: 0.01em;
}

/* ── Source-system ribbon — ICON + LABEL + CONTINUOUS MARQUEE ───── */
/* Pure CSS. The track holds FOUR identical groups, so a -25%         */
/* translation lands exactly on the next group: continuous motion,    */
/* no jump and no gap. Four groups rather than the two used by        */
/* .r27-connect-ribbon because this item set is narrower — the extra  */
/* copies keep the loop seamless on the widest desktop viewports.     */
/*                                                                    */
/* Each item is an atomic ICON TILE + LABEL unit, so ERP / CMMS are   */
/* never represented by plain text alone.                             */
/*                                                                    */
/* SEAM NOTE — spacing is symmetric margin on EVERY item (the last    */
/* one included), never a flex gap, so the boundary between groups    */
/* has exactly the same rhythm as the rest of the ribbon.             */
/*                                                                    */
/* The glyphs are generic CATEGORY icons (ERP, CMMS, EAM, MES, SCADA, */
/* EHS, quality, WMS, historian, BI, IoT, files). No vendor logo is   */
/* used, so no certified or native integration is implied.            */
.r27-bn-sources {
  display: block;
  width: 100%;
  margin-top: 20px;
  overflow: hidden;              /* clips the moving track, never the page */
}

/* Marquee viewport — masked so items fade at both edges, no hard cut. */
.r27-bn-sources-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
}

.r27-bn-sources-track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation: r27-bn-source-marquee 40s linear infinite;
}

.r27-bn-sources-group {
  display: flex;
  align-items: center;
  flex: none;
}

/* ── Chip card — the atomic "system" unit: icon tile + name ─────── */
.r27-bn-source {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  min-height: 34px;
  margin: 0 9px;
  padding: 6px 13px 6px 7px;
  border-radius: 999px;
  border: 1px solid var(--r27-border);
  background: var(--r27-surface-card);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--r27-text-secondary);
  transition: border-color 0.22s ease, color 0.22s ease;
}

/* ── Icon tile — restrained glow, consistent 22px frame ─────────── */
.r27-bn-source-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: radial-gradient(circle at 32% 26%, rgba(129,140,248,0.26), rgba(99,102,241,0.08) 72%);
  border: 1px solid rgba(129,140,248,0.20);
  color: #A5B4FC;
  transition: border-color 0.22s ease, color 0.22s ease;
}

.r27-bn-source-icon i {
  font-size: 12px;
  line-height: 1;
}

.r27-bn-source-name { white-space: nowrap; }

.r27-bn-source-flow {
  color: #A5B4FC;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 34px;
  margin: 0 9px;
}

.r27-bn-source-appex {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  min-height: 34px;
  margin: 0 9px;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid rgba(129,140,248,0.5);
  background: linear-gradient(180deg, rgba(99,102,241,0.18), rgba(99,102,241,0.05));
  font-size: 12px;
  font-weight: 700;
  color: var(--r27-text-primary);
}

.r27-bn-source-appex i {
  color: #A5B4FC;
}

/* ── Hover — restrained lift on the chip, pauses the marquee ────── */
.r27-bn-sources-track:hover { animation-play-state: paused; }

.r27-bn-source:hover {
  border-color: rgba(129,140,248,0.42);
  color: var(--r27-text-primary);
}

.r27-bn-source:hover .r27-bn-source-icon {
  border-color: rgba(129,140,248,0.38);
  color: #C7D2FE;
}

@keyframes r27-bn-source-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

/* ── Responsive ─────────────────────────────────────────────────── */
/* Desktop ≥1201px: 6-in-one-row (1440px & 1920px).                 */
/* Tablet ~1024px: 3 × 2. Tablet/mobile ~768px: 2 × 3. Mobile: 1 col. */
@media (max-width: 1200px) {
  .r27-bn-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .r27-bn-flow-line { width: 24px; }
}

@media (max-width: 768px) {
  .r27-bn-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 36px; }
  .r27-bn-metric { min-height: 0; padding: 22px 14px 20px; }
  .r27-bn-number { font-size: 38px; }
  .r27-bn-number-sm { font-size: 32px; }
  .r27-bn-flow {
    flex-direction: column;
    gap: 10px;
    padding: 20px 16px;
    margin-top: 32px;
  }
  .r27-bn-flow-line {
    width: 1px;
    height: 18px;
    background: linear-gradient(180deg, rgba(129,140,248,0.15), rgba(129,140,248,0.55), rgba(129,140,248,0.15));
  }
  .r27-bn-flow-line::after {
    top: auto; right: auto;
    bottom: 0; left: -2px;
  }
}

@media (max-width: 480px) {
  .r27-bn-grid { grid-template-columns: 1fr; gap: 12px; }
  .r27-bn-metric { min-height: 0; }
  .r27-bn-source {
    font-size: 10.5px;
    gap: 7px;
    min-height: 30px;
    padding: 5px 11px 5px 6px;
  }
  .r27-bn-source-icon { width: 19px; height: 19px; border-radius: 6px; }
  .r27-bn-source-icon i { font-size: 10px; }
  .r27-bn-source,
  .r27-bn-source-flow,
  .r27-bn-source-appex { margin: 0 7px; }
  .r27-bn-source-flow { min-height: 30px; }
  .r27-bn-source-appex { min-height: 30px; padding: 6px 12px; font-size: 11px; }
  .r27-bn-sources-viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  }
}

/* ── Reduced motion: stop the marquee and show the COMPLETE list ──
   Deliberately scoped to this ribbon only — the homepage's other
   animations and the APPEXi widget timing are untouched.            */
@media (prefers-reduced-motion: reduce) {
  .r27-bn-sources-viewport {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .r27-bn-sources-track {
    animation: none !important;
    transform: none !important;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
  .r27-bn-sources-group {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
    padding: 4px 0;
  }
  .r27-bn-sources-group[aria-hidden="true"] { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   R27 INDUSTRIES — PHOTOGRAPHY CARDS  (public marketing only)

   Scope: `.r27-ind-*` only. The shared `.r27-gap-card*` typography
   classes are REUSED but never redefined here, so every other section
   that uses them (products, services, solutions, resources, examples,
   sample reports) is completely unaffected.

   Grid: 3 columns desktop → 2 tablet (≤1024px) → 1 mobile (≤640px).
   ══════════════════════════════════════════════════════════════ */
.r27-ind-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.r27-ind-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--r27-surface-card);
  border: 1px solid var(--r27-border);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.03);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.r27-ind-card:hover {
  transform: translateY(-2px);
  border-color: var(--r27-border-light);
  box-shadow: var(--r27-shadow-lg), inset 0 1px 0 rgba(255,255,255,0.04);
}
/* Hover must never fade the card's text or the gold capability callout */
.r27-ind-card:hover .r27-gap-card-title,
.r27-ind-card:hover .r27-gap-card-desc,
.r27-ind-card:hover .r27-gap-card-impact,
.r27-ind-card:hover i {
  opacity: 1 !important;
}

/* ── Photograph (upper ~40% of the card) ─────────────────────── */
.r27-ind-photo {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0B0B12;
  border-bottom: 1px solid var(--r27-border);
}
.r27-ind-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-out;
}
/* Single restrained overlay — keeps the dark aesthetic and holds the
   image back so it can never compete with the card text below it.   */
.r27-ind-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7,7,13,0.10) 0%, rgba(7,7,13,0.42) 100%);
}
.r27-ind-card:hover .r27-ind-img { transform: scale(1.04); }

/* ── Body — reuses the existing card typography unchanged ────── */
.r27-ind-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 26px 24px 28px;
  text-align: left;
}
.r27-ind-body .r27-gap-card-icon { margin-bottom: 16px; }
/* Pin the gold capability callout to the bottom so all cards align */
.r27-ind-body .r27-gap-card-impact { margin-top: auto; align-self: flex-start; }

/* ── Source credit (licence requirement for the photography) ─── */
.r27-ind-credits {
  max-width: 1100px;
  margin: 18px auto 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  color: var(--r27-text-muted);
}

/* ── Tablet ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .r27-ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .r27-ind-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .r27-ind-body { padding: 22px 20px 24px; }
}

/* ── Reduced motion: no lift, no image zoom ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  .r27-ind-card,
  .r27-ind-img { transition: none !important; }
  .r27-ind-card:hover { transform: none; }
  .r27-ind-card:hover .r27-ind-img { transform: none; }
}
/* ═══════════════════════════════════════════════════════════════════
   APPEX360 Executive Dashboard Design System — Release 29
   ═══════════════════════════════════════════════════════════════════
   
   Every dashboard is composed from the same visual language.
   
   Principles:
   - 5-second executive test: what, good/bad, do, impact, drill
   - One primary action per page
   - Every pixel earns its place
   - Colour means something (module tokens, not decoration)
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   1. DASHBOARD LAYOUT
   ───────────────────────────────────────────────────────────────── */

.db-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--spacing-lg) var(--spacing-md);
}

.db-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.db-header-title {
  font-size: var(--font-page-title);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}

.db-header-sub {
  font-size: var(--font-supporting);
  color: var(--text-secondary);
  margin-top: var(--spacing-xs);
}

.db-header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

/* KPI Grid — responsive, consistent gap */
.db-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

/* Dashboard section: heading + grid + card */
.db-section {
  margin-bottom: var(--spacing-xl);
}

.db-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
}

.db-section-title {
  font-size: var(--font-card-title);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.db-section-title i {
  font-size: 0.85em;
  opacity: 0.6;
}

.db-section-link {
  font-size: var(--font-caption);
  color: var(--color-secondary);
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.15s ease;
}
.db-section-link:hover {
  opacity: 0.8;
}

/* ─────────────────────────────────────────────────────────────────
   2. KPI CARD
   ─────────────────────────────────────────────────────────────────
   Focus: one metric, one trend, no noise.
   
   Usage:
     <div class="db-kpi" data-module="financial">
       <div class="db-kpi-value">$2.4M</div>
       <div class="db-kpi-label">Verified Savings</div>
       <div class="db-kpi-trend up">↑ 12%</div>
     </div>
   ───────────────────────────────────────────────────────────────── */

.db-kpi {
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  transition: all 0.15s ease;
  cursor: default;
  position: relative;
  overflow: hidden;
}

.db-kpi:hover {
  border-color: var(--surface-border-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Module accent stripe at top */
.db-kpi::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--kpi-accent, var(--clr-executive-primary));
  opacity: 0.6;
}

.db-kpi[data-module="executive"]    { --kpi-accent: var(--clr-executive-primary); }
.db-kpi[data-module="operational"]  { --kpi-accent: var(--clr-operational-primary); }
.db-kpi[data-module="financial"]    { --kpi-accent: var(--clr-financial-primary); }
.db-kpi[data-module="governance"]   { --kpi-accent: var(--clr-governance-primary); }
.db-kpi[data-module="risk"]         { --kpi-accent: var(--clr-risk-primary); }
.db-kpi[data-module="asset"]        { --kpi-accent: var(--clr-asset-primary); }
.db-kpi[data-module="safety"]       { --kpi-accent: var(--clr-safety-primary); }
.db-kpi[data-module="quality"]      { --kpi-accent: var(--clr-quality-primary); }
.db-kpi[data-module="maintenance"]  { --kpi-accent: var(--clr-maintenance-primary); }
.db-kpi[data-module="people"]       { --kpi-accent: var(--clr-people-primary); }
.db-kpi[data-module="environment"]  { --kpi-accent: var(--clr-environment-primary); }

.db-kpi-value {
  font-size: var(--font-display-kpi);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: var(--spacing-xs);
}

.db-kpi-label {
  font-size: var(--font-caption);
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: var(--spacing-sm);
}

.db-kpi-footer {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-micro);
}

.db-kpi-trend {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.db-kpi-trend.up    { color: var(--trend-up); }
.db-kpi-trend.down  { color: var(--trend-down); }
.db-kpi-trend.flat  { color: var(--trend-flat); }

.db-kpi-benchmark {
  color: var(--text-muted);
  font-weight: 400;
}

/* KPI: clickable */
.db-kpi-clickable {
  cursor: pointer;
}
.db-kpi-clickable:hover {
  border-color: var(--kpi-accent, var(--clr-executive-primary));
  box-shadow: 0 0 0 1px var(--kpi-accent, var(--clr-executive-primary)), var(--shadow-md);
}

/* ─────────────────────────────────────────────────────────────────
   3. INTELLIGENCE CARD
   ─────────────────────────────────────────────────────────────────
   Focus: recommendation, confidence, impact, risk.

   Usage:
     <div class="db-intel" data-module="risk">
       <div class="db-intel-header">
         <div class="db-intel-badge" data-confidence="high">94%</div>
       </div>
       <div class="db-intel-body">
         <div class="db-intel-rec">Replace compressor with VSD</div>
         <div class="db-intel-impact">$186K/yr | 14-month payback</div>
       </div>
     </div>
   ───────────────────────────────────────────────────────────────── */

.db-intel {
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  transition: all 0.15s ease;
}

.db-intel:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--surface-border-hover);
}

.db-intel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-sm);
}

.db-intel-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-micro);
  font-weight: 700;
}

.db-intel-badge[data-confidence="high"]   { background: rgba(52,211,153,0.1); color: #34d399; }
.db-intel-badge[data-confidence="medium"] { background: rgba(245,158,11,0.1);  color: #f59e0b; }
.db-intel-badge[data-confidence="low"]    { background: rgba(239,68,68,0.1);  color: #ef4444; }

.db-intel-module {
  font-size: var(--font-micro);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.db-intel-rec {
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: var(--spacing-sm);
}

.db-intel-impact {
  font-size: var(--font-caption);
  color: var(--text-secondary);
  line-height: 1.5;
}

.db-intel-footer {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--surface-border);
}

.db-intel-evidence {
  font-size: var(--font-micro);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.db-intel-evidence i {
  font-size: 10px;
}

.db-intel-action {
  font-size: var(--font-micro);
  color: var(--color-secondary);
  font-weight: 600;
  text-decoration: none;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: opacity 0.15s ease;
}
.db-intel-action:hover {
  opacity: 0.8;
}

/* ─────────────────────────────────────────────────────────────────
   4. INSIGHT PANEL
   ─────────────────────────────────────────────────────────────────
   Focus: icon, title, summary, expand-for-detail, linked evidence.

   Usage:
     <details class="db-insight" data-module="financial">
       <summary class="db-insight-summary">
         <i class="fas fa-coins db-insight-icon"></i>
         <div>
           <div class="db-insight-title">Energy Cost Reduction</div>
           <div class="db-insight-summary-text">$186K annual savings identified</div>
         </div>
         <i class="fas fa-chevron-down db-insight-chevron"></i>
       </summary>
       <div class="db-insight-detail">...</div>
     </details>
   ───────────────────────────────────────────────────────────────── */

.db-insight {
  border-radius: var(--radius-md);
  border: 1px solid var(--surface-border);
  background: var(--surface-card);
  overflow: hidden;
  transition: border-color 0.15s ease;
  margin-bottom: var(--spacing-sm);
}

.db-insight[open] {
  border-color: var(--surface-border-hover);
}

.db-insight-summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.12s ease;
}

.db-insight-summary::-webkit-details-marker {
  display: none;
}

.db-insight-summary:hover {
  background: rgba(255,255,255,0.02);
}

.db-insight-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.db-insight[data-module="executive"]    .db-insight-icon { background: var(--clr-executive-surface); color: var(--clr-executive-primary); }
.db-insight[data-module="operational"]  .db-insight-icon { background: var(--clr-operational-surface); color: var(--clr-operational-primary); }
.db-insight[data-module="financial"]    .db-insight-icon { background: var(--clr-financial-surface); color: var(--clr-financial-primary); }
.db-insight[data-module="governance"]   .db-insight-icon { background: var(--clr-governance-surface); color: var(--clr-governance-primary); }
.db-insight[data-module="risk"]         .db-insight-icon { background: var(--clr-risk-surface); color: var(--clr-risk-primary); }
.db-insight[data-module="asset"]        .db-insight-icon { background: var(--clr-asset-surface); color: var(--clr-asset-primary); }
.db-insight[data-module="safety"]       .db-insight-icon { background: var(--clr-safety-surface); color: var(--clr-safety-primary); }
.db-insight[data-module="quality"]      .db-insight-icon { background: var(--clr-quality-surface); color: var(--clr-quality-primary); }
.db-insight[data-module="maintenance"]  .db-insight-icon { background: var(--clr-maintenance-surface); color: var(--clr-maintenance-primary); }
.db-insight[data-module="people"]       .db-insight-icon { background: var(--clr-people-surface); color: var(--clr-people-primary); }
.db-insight[data-module="environment"]  .db-insight-icon { background: var(--clr-environment-surface); color: var(--clr-environment-primary); }

.db-insight-title {
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--text-primary);
}

.db-insight-summary-text {
  font-size: var(--font-caption);
  color: var(--text-secondary);
  margin-top: 2px;
}

.db-insight-chevron {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 12px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.db-insight[open] .db-insight-chevron {
  transform: rotate(180deg);
}

.db-insight-detail {
  padding: 0 var(--spacing-lg) var(--spacing-lg);
  font-size: var(--font-supporting);
  color: var(--text-secondary);
  line-height: 1.6;
}

.db-insight-detail p {
  margin: 0 0 var(--spacing-sm);
}

.db-insight-detail p:last-child {
  margin-bottom: 0;
}

/* ─────────────────────────────────────────────────────────────────
   5. DASHBOARD TABLE
   ───────────────────────────────────────────────────────────────── */

.db-table-wrap {
  border-radius: var(--radius-md);
  border: 1px solid var(--surface-border);
  overflow: hidden;
  background: var(--surface-card);
}

.db-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-caption);
}

.db-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

.db-table th {
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
  font-weight: 600;
  font-size: var(--font-micro);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--surface-border);
  white-space: nowrap;
}

.db-table td {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid rgba(0,0,0,0.03);
  color: var(--text-primary);
  vertical-align: middle;
}

.db-table tbody tr {
  transition: background 0.1s ease;
}

.db-table tbody tr:nth-child(even) {
  background: rgba(0,0,0,0.01);
}

.db-table tbody tr:hover {
  background: rgba(99,102,241,0.03);
}

.db-table tbody tr:last-child td {
  border-bottom: none;
}

/* Table status badges */
.db-table-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 600;
}

.db-table-badge[data-status="good"]      { background: rgba(52,211,153,0.08); color: #34d399; }
.db-table-badge[data-status="warning"]   { background: rgba(245,158,11,0.08);  color: #f59e0b; }
.db-table-badge[data-status="critical"]  { background: rgba(239,68,68,0.08);  color: #ef4444; }
.db-table-badge[data-status="inactive"]  { background: rgba(107,114,128,0.08); color: #6b7280; }

/* ─────────────────────────────────────────────────────────────────
   6. DECISION CARD
   ───────────────────────────────────────────────────────────────── */

.db-decision {
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-left: 4px solid var(--kpi-accent, var(--clr-executive-primary));
  margin-bottom: var(--spacing-md);
  transition: all 0.15s ease;
}

.db-decision[data-module="executive"]    { border-left-color: var(--clr-executive-primary); }
.db-decision[data-module="operational"]  { border-left-color: var(--clr-operational-primary); }
.db-decision[data-module="financial"]    { border-left-color: var(--clr-financial-primary); }
.db-decision[data-module="governance"]   { border-left-color: var(--clr-governance-primary); }
.db-decision[data-module="risk"]         { border-left-color: var(--clr-risk-primary); }
.db-decision[data-module="asset"]        { border-left-color: var(--clr-asset-primary); }
.db-decision[data-module="safety"]       { border-left-color: var(--clr-safety-primary); }
.db-decision[data-module="quality"]      { border-left-color: var(--clr-quality-primary); }
.db-decision[data-module="maintenance"]  { border-left-color: var(--clr-maintenance-primary); }
.db-decision[data-module="people"]       { border-left-color: var(--clr-people-primary); }
.db-decision[data-module="environment"]  { border-left-color: var(--clr-environment-primary); }

.db-decision:hover {
  box-shadow: var(--shadow-md);
}

.db-decision-rec {
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.db-decision-impact {
  font-size: var(--font-caption);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
}

.db-decision-footer {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: var(--font-micro);
  color: var(--text-muted);
}

.db-decision-owner {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ─────────────────────────────────────────────────────────────────
   7. CHART CONTAINER
   ───────────────────────────────────────────────────────────────── */

.db-chart {
  border-radius: var(--radius-md);
  border: 1px solid var(--surface-border);
  background: var(--surface-card);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.db-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
}

.db-chart-title {
  font-size: var(--font-subheading);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.db-chart-body {
  min-height: 200px;
}

/* ─────────────────────────────────────────────────────────────────
   8. EMPTY STATE
   ───────────────────────────────────────────────────────────────── */

.db-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3xl) var(--spacing-lg);
  text-align: center;
  color: var(--text-muted);
}

.db-empty-icon {
  font-size: 32px;
  margin-bottom: var(--spacing-md);
  opacity: 0.3;
}

.db-empty-title {
  font-size: var(--font-subheading);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
}

.db-empty-text {
  font-size: var(--font-caption);
  color: var(--text-muted);
  max-width: 320px;
  line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────────
   9. TWO-COLUMN LAYOUT
   ───────────────────────────────────────────────────────────────── */

.db-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

@media (max-width: 1024px) {
  .db-two-col {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────────────────
   10. STATUS DOT
   ───────────────────────────────────────────────────────────────── */

.db-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.db-status-dot[data-status="good"]     { background: var(--status-good); }
.db-status-dot[data-status="warning"]  { background: var(--status-warning); }
.db-status-dot[data-status="critical"] { background: var(--status-critical); }
.db-status-dot[data-status="inactive"] { background: var(--status-inactive); }
/* ============================================================
   APPEX360 Assessment Experience - Enterprise Premium
   ============================================================
   A visual refinement layer on top of the existing assessment UI.
   
   Design principles:
   - Neutral graphite palette - colour only for selection, progress, KPIs
   - True elevation system - shadow + surface tone, not heavy borders
   - Premium motion - cubic-bezier, <250ms, micro-interactions
   - Modern typography - clear hierarchy, tighter leading, better rhythm
   - Consistent spacing - 8px grid, generous card padding
   
   Uses --ds-* tokens and existing class names. No functionality changes.
   ============================================================ */

/* --- 1. ELEVATION SYSTEM ------------------------------------------- */
/* 5 levels: background, surface, raised, elevated, overlay            */
/* Uses surface tones + shadows instead of coloured borders            */
:root {
  --elevation-bg: var(--ds-bg-primary, #0f172a);
  --elevation-surface: var(--ds-surface-card, #1e293b);
  --elevation-raised: #263348;
  --elevation-elevated: #2d3a50;
  --elevation-overlay: rgba(0, 0, 0, 0.6);
  
  --shadow-raised: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.15);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.2);
  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.15);
  
  --transition-premium: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.12s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

/* --- 2. TYPOGRAPHY SCALE ------------------------------------------ */
.assessment-launch-page h1,
.assessment-launch-page .launch-hero h1,
.aws-page-title {
  font-size: 1.5rem !important;  /* 24px — page title */
  font-weight: 700 !important;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--ds-text-primary, #f8fafc);
}

.aws-section-title {
  font-size: 0.95rem !important;  /* 15px — section title */
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  color: var(--ds-text-primary, #f1f5f9);
}

.aws-cat-name,
.assessment-launch-page .exec-card div:first-child {
  font-size: 0.85rem !important;  /* 13.6px — card title */
  font-weight: 600 !important;
  letter-spacing: 0;
  color: var(--ds-text-primary, #f1f5f9);
}

.assessment-launch-page p,
.aws-count-label,
.aws-q-grid-header,
.aws-supporting-text {
  font-size: 0.8rem !important;  /* 12.8px — supporting text */
  line-height: 1.5;
  color: var(--ds-text-secondary, #94a3b8);
}

.aws-meta,
.aws-caption,
.aws-domain-badge,
.assessment-launch-page .exec-card div:last-child {
  font-size: 0.7rem !important;  /* 11.2px — captions */
  line-height: 1.4;
  color: var(--ds-text-muted, #64748b);
}

/* --- 3. SURFACE HIERARCHY ----------------------------------------- */
/* Differentiate background, container, section, card, selected       */

/* Assessment background */
.assessment-launch-page,
.aws-container {
  background: linear-gradient(160deg, #0a0f1e 0%, #0f172a 50%, #0d1225 100%) !important;
}

/* Section containers */
.assessment-launch-page .launch-hero {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(139, 92, 246, 0.08) 50%, rgba(99, 102, 241, 0.03) 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* Stats row cards */
.assessment-launch-page .exec-card,
.aws-cat-card,
.aws-q-grid {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  box-shadow: none;
  transition: var(--transition-premium) !important;
}

/* Hover state — subtle elevation */
.assessment-launch-page .exec-card:hover,
.aws-cat-card:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: var(--shadow-raised);
  transform: translateY(-1px);
}

/* Selected cards */
.aws-cat-card.selected,
.selectable-card[data-selected="true"] {
  background: rgba(99, 102, 241, 0.08) !important;
  border-color: rgba(99, 102, 241, 0.25) !important;
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.2), var(--shadow-glow) !important;
}

/* --- 4. QUESTION CARDS -------------------------------------------- */
.aws-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  transition: var(--transition-premium) !important;
  animation: aws-card-in 0.25s ease-out both;
}

.aws-card:hover {
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: var(--shadow-raised);
}

/* Question text */
.aws-question-text {
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  color: var(--ds-text-primary, #f1f5f9);
  margin-bottom: 0.75rem;
}

/* Score pills — compact, subtle, colour only for selection */
.aws-score-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ds-text-secondary, #94a3b8);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: var(--transition-fast) !important;
}

.aws-score-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.aws-score-pill.selected {
  background: rgba(99, 102, 241, 0.15) !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
  color: #818cf8 !important;
  font-weight: 600;
}

/* --- 5. PROGRESS INDICATORS --------------------------------------- */
.aws-progress-bar {
  height: 4px !important;
  border-radius: 2px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  overflow: hidden;
}

.aws-progress-fill {
  height: 100% !important;
  border-radius: 2px !important;
  background: linear-gradient(90deg, #6366f1, #818cf8) !important;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
}

/* Progress ring */
.aws-ring {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.aws-ring-svg circle {
  transition: stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.aws-ring-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-weight: 700;
  color: #818cf8;
}

/* --- 6. QUESTION DOTS --------------------------------------------- */
.aws-q-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.aws-q-dot {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.35);
  border: 1px solid transparent;
  transition: var(--transition-fast) !important;
}

.aws-q-dot.current {
  color: #fff;
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.3);
  font-weight: 700;
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.15);
}

.aws-q-dot.answered {
  color: #34d399;
}

.aws-q-dot.answered::after {
  content: '';
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #34d399;
}

.aws-q-dot:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ds-text-primary, #fff);
  transform: scale(1.12);
}

.aws-q-dot:active {
  transform: scale(0.95);
}

/* --- 7. BUTTONS & ACTIONS ---------------------------------------─ */
.assessment-launch-page a[style*="padding:0.65rem"],
.aws-btn {
  padding: 0.6rem 1.25rem !important;
  border-radius: 8px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  transition: var(--transition-fast) !important;
}

.assessment-launch-page a[style*="background:var(--color-primary)"]:hover,
.aws-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.assessment-launch-page a[style*="background:var(--color-primary)"]:active,
.aws-btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Ghost buttons */
.assessment-launch-page a.exec-card {
  transition: var(--transition-premium) !important;
}

/* --- 8. CATEGORY PAGE --------------------------------------------- */
/* Category card grid */
.aws-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.aws-category-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  padding: 18px !important;
  cursor: pointer;
  transition: var(--transition-premium) !important;
  text-decoration: none;
  display: block;
}

.aws-category-card:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: var(--shadow-raised);
  transform: translateY(-2px);
}

.aws-category-card:active {
  transform: translateY(0);
}

.aws-category-card .aws-cat-name {
  font-size: 0.9rem !important;
  margin-bottom: 6px;
}

/* Category progress ring */
.aws-category-card .aws-ring {
  width: 36px;
  height: 36px;
}

.aws-category-card .aws-ring-svg {
  width: 36px;
  height: 36px;
}

.aws-category-card .aws-ring-text {
  font-size: 10px;
}

/* --- 9. SEARCH BAR ------------------------------------------------ */
.assessment-search {
  width: 100%;
  padding: 0.65rem 1rem 0.65rem 2.5rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--ds-text-primary, #f1f5f9);
  font-size: 0.85rem;
  outline: none;
  transition: var(--transition-premium) !important;
}

/* Search bar container (take.html.erb uses this on the wrapper div) */
.assessment-search {
  padding: 0.65rem 1rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: var(--transition-premium) !important;
}

.assessment-search:focus-within {
  border-color: rgba(99, 102, 241, 0.3);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
}

.assessment-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ds-text-primary, #f1f5f9);
  font-size: 0.85rem;
}

.assessment-search input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

/* --- 10. FOOTER / STICKY BAR ------------------------------------ */
.aws-footer {
  position: sticky;
  bottom: 0;
  padding: 10px 16px;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
}

/* --- 11. MICRO-INTERACTIONS --------------------------------------- */
/* Scale effect on score select */
.aws-score-pill.selected {
  transform: scale(1.05);
}

/* Card entrance stagger */
.aws-card:nth-child(1) { animation-delay: 0s; }
.aws-card:nth-child(2) { animation-delay: 0.04s; }
.aws-card:nth-child(3) { animation-delay: 0.08s; }
.aws-card:nth-child(4) { animation-delay: 0.12s; }
.aws-card:nth-child(5) { animation-delay: 0.16s; }
.aws-card:nth-child(6) { animation-delay: 0.20s; }
.aws-card:nth-child(7) { animation-delay: 0.24s; }
.aws-card:nth-child(8) { animation-delay: 0.28s; }
.aws-card:nth-child(9) { animation-delay: 0.32s; }
.aws-card:nth-child(10) { animation-delay: 0.36s; }

/* Category card stagger */
.aws-category-card:nth-child(1) { animation-delay: 0s; }
.aws-category-card:nth-child(2) { animation-delay: 0.03s; }
.aws-category-card:nth-child(3) { animation-delay: 0.06s; }
.aws-category-card:nth-child(4) { animation-delay: 0.09s; }
.aws-category-card:nth-child(5) { animation-delay: 0.12s; }
.aws-category-card:nth-child(6) { animation-delay: 0.15s; }
.aws-category-card:nth-child(7) { animation-delay: 0.18s; }
.aws-category-card:nth-child(8) { animation-delay: 0.21s; }
.aws-category-card:nth-child(9) { animation-delay: 0.24s; }
.aws-category-card:nth-child(10) { animation-delay: 0.27s; }
.aws-category-card:nth-child(11) { animation-delay: 0.30s; }
.aws-category-card:nth-child(12) { animation-delay: 0.33s; }
.aws-category-card:nth-child(13) { animation-delay: 0.36s; }
.aws-category-card:nth-child(14) { animation-delay: 0.39s; }
.aws-category-card:nth-child(15) { animation-delay: 0.42s; }
.aws-category-card:nth-child(16) { animation-delay: 0.45s; }
.aws-category-card:nth-child(17) { animation-delay: 0.48s; }
.aws-category-card:nth-child(18) { animation-delay: 0.51s; }
.aws-category-card:nth-child(19) { animation-delay: 0.54s; }
.aws-category-card:nth-child(20) { animation-delay: 0.57s; }

/* --- 12. RESPONSIVE ---------------------------------------------─ */
@media (max-width: 768px) {
  .aws-layout {
    grid-template-columns: 1fr !important;
  }
  
  .aws-category-grid {
    grid-template-columns: 1fr !important;
  }
  
  .assessment-launch-page .launch-hero > div {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* --- 13. EMPTY STATES --------------------------------------------- */
.aws-empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
}

.aws-empty-state i {
  font-size: 2.5rem;
  color: rgba(255, 255, 255, 0.08);
  margin-bottom: 1rem;
}

.aws-empty-state h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ds-text-primary, #e2e8f0);
  margin-bottom: 0.5rem;
}

.aws-empty-state p {
  font-size: 0.85rem;
  color: var(--ds-text-muted, #64748b);
  max-width: 400px;
  margin: 0 auto;
}

/* --- 14. FOCUS STATES (accessibility) ---------------------------─ */
.aws-card:focus-within {
  outline: none;
  border-color: rgba(99, 102, 241, 0.3) !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.aws-q-dot:focus-visible,
.aws-score-pill:focus-visible,
.assessment-search:focus-visible {
  outline: 2px solid rgba(99, 102, 241, 0.5);
  outline-offset: 2px;
}

/* --- 15. SELECTABLE CARDS (version selector) --------------------- */
.selectable-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  cursor: pointer;
  transition: var(--transition-premium) !important;
}

.selectable-card:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: var(--shadow-raised);
}

.selectable-card[data-selected="true"] {
  background: rgba(99, 102, 241, 0.08) !important;
  border-color: rgba(99, 102, 241, 0.25) !important;
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.2), var(--shadow-glow) !important;
}

/* --- 16. WORKFLOW TIMELINE --------------------------------------- */
.workflow-steps {
  display: flex;
  align-items: center;
  gap: 4px;
}

.workflow-step {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.3);
  transition: var(--transition-fast);
}

.workflow-step.active {
  color: #818cf8;
  background: rgba(99, 102, 241, 0.1);
}

.workflow-step.completed {
  color: #34d399;
}

.workflow-step .step-icon {
  font-size: 0.6rem;
  opacity: 0.6;
}

.workflow-step.active .step-icon,
.workflow-step.completed .step-icon {
  opacity: 1;
}
/* ══════════════════════════════════════════════════════════════════════════
   APPEX360 HOMEPAGE — "EXPLORE APPEX360" RIBBON + PRODUCT ROADMAP
   ──────────────────────────────────────────────────────────────────────────
   Reversible UX implementation (homepage mockup).

   SCOPE: every rule in this file is namespaced `apx-*`, or targets only the
   specific section ids listed below. Nothing here changes an existing
   component. This file is auto-included by `require_tree .` in
   application.css, so REMOVING IT REVERTS ALL OF THIS EXPERIMENT'S STYLING
   with no other file needing an edit.

   TO REMOVE: delete this file, _apx_explore_ribbon.html.erb,
   _apx_home_roadmap.html.erb, apx_explore_ribbon_controller.js, and the
   render lines in app/views/public/welcome.html.erb.
   ══════════════════════════════════════════════════════════════════════════ */

/* --------------------------------------------------------------------------
   1. FIXED-HEADER SCROLL COMPENSATION
   .r27-nav is position:fixed (height ≈ 64px). Anchored sections land under it
   unless we offset the scroll target. Applies only to the ids this ribbon
   links to, so no other page is affected.
   -------------------------------------------------------------------------- */
#explore,
#platform,
#assessments,
#integrations,
#industries,
#solutions,
#how-it-works,
#appexi,
#pricing,
#roadmap {
  scroll-margin-top: 92px;
}

/* Anchor wrappers must not alter the layout of what they wrap. */
.apx-anchor {
  display: block;
  scroll-margin-top: 92px;
}

/* Smooth scrolling only on the page that actually carries the ribbon.
   `:has()` keeps this from becoming a global html-level change. */
@media (prefers-reduced-motion: no-preference) {
  html:has(.apx-explore-nav) {
    scroll-behavior: smooth;
  }
}

/* --------------------------------------------------------------------------
   2. EXPLORE APPEX360 RIBBON
   -------------------------------------------------------------------------- */
.apx-explore-nav {
  position: relative;
  z-index: 20;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  background: linear-gradient(
    180deg,
    rgba(12, 12, 20, 0.92) 0%,
    rgba(7, 7, 13, 0.72) 100%
  );
  border-top: 1px solid var(--r27-border, rgba(255, 255, 255, 0.06));
  border-bottom: 1px solid var(--r27-border, rgba(255, 255, 255, 0.06));
  backdrop-filter: blur(14px) saturate(1.4);
}

.apx-explore-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 0;
}

.apx-explore-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--r27-text-muted, #6b6b82);
}

.apx-explore-label i {
  color: var(--r27-accent, #6366f1);
  font-size: 12px;
}

/* Single horizontal ribbon. On narrow screens it scrolls sideways rather
   than wrapping into a multi-row menu. */
.apx-explore-list {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 2px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.apx-explore-list::-webkit-scrollbar {
  display: none;
}

.apx-explore-item {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}

.apx-explore-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  color: var(--r27-text-secondary, #9c9cb0);
  background: transparent;
  transition: color 0.16s ease, background 0.16s ease,
              border-color 0.16s ease, transform 0.16s ease;
}

.apx-explore-link i {
  font-size: 11px;
  opacity: 0.75;
  transition: opacity 0.16s ease, color 0.16s ease;
}

.apx-explore-link:hover {
  color: var(--r27-text-primary, #f1f1f6);
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--r27-border-light, rgba(255, 255, 255, 0.1));
}

.apx-explore-link:hover i {
  opacity: 1;
  color: var(--r27-accent-hover, #818cf8);
}

.apx-explore-link:active {
  transform: scale(0.97);
}

.apx-explore-link:focus-visible {
  outline: 2px solid var(--r27-accent-hover, #818cf8);
  outline-offset: 2px;
  color: var(--r27-text-primary, #f1f1f6);
}

/* Active state — set by apx_explore_ribbon_controller.js via IntersectionObserver */
.apx-explore-link.is-active {
  color: var(--r27-accent-hover, #818cf8);
  background: var(--r27-accent-subtle, rgba(99, 102, 241, 0.1));
  border-color: rgba(99, 102, 241, 0.34);
}

.apx-explore-link.is-active i {
  opacity: 1;
  color: var(--r27-accent-hover, #818cf8);
}

/* --------------------------------------------------------------------------
   3. PRODUCT ROADMAP
   -------------------------------------------------------------------------- */
.apx-roadmap {
  position: relative;
  padding: 80px 24px;
  scroll-margin-top: 92px;
}

.apx-roadmap-header {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}

.apx-roadmap-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 6px 14px;
  border: 1px solid rgba(99, 102, 241, 0.24);
  border-radius: 999px;
  background: var(--r27-accent-subtle, rgba(99, 102, 241, 0.1));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--r27-accent-hover, #818cf8);
}

.apx-roadmap-title {
  margin: 0 0 14px;
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--r27-text-primary, #f1f1f6);
}

.apx-roadmap-sub {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--r27-text-secondary, #9c9cb0);
}

.apx-roadmap-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* Connector line behind the phase markers (desktop only) */
.apx-roadmap-track::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 6%;
  right: 6%;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(34, 197, 94, 0.35) 0%,
    rgba(99, 102, 241, 0.35) 40%,
    rgba(245, 158, 11, 0.3) 70%,
    rgba(139, 92, 246, 0.22) 100%
  );
  pointer-events: none;
}

.apx-roadmap-phase {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.apx-roadmap-marker {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  border: 1px solid var(--r27-border-light, rgba(255, 255, 255, 0.1));
  border-radius: 50%;
  background: var(--r27-surface-card, #111119);
  font-size: 14px;
  color: var(--r27-text-muted, #6b6b82);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.apx-roadmap-phase--complete .apx-roadmap-marker {
  border-color: rgba(34, 197, 94, 0.45);
  color: var(--r27-accent-green, #22c55e);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.08);
}

.apx-roadmap-phase--current .apx-roadmap-marker {
  border-color: rgba(99, 102, 241, 0.55);
  color: var(--r27-accent-hover, #818cf8);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12),
              0 0 18px rgba(99, 102, 241, 0.28);
}

.apx-roadmap-phase--in-progress .apx-roadmap-marker {
  border-color: rgba(245, 158, 11, 0.5);
  color: var(--r27-accent-warm, #f59e0b);
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.08);
}

.apx-roadmap-phase--planned .apx-roadmap-marker {
  border-color: rgba(139, 92, 246, 0.38);
  color: #a78bfa;
}

.apx-roadmap-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 22px 20px;
  border: 1px solid var(--r27-border, rgba(255, 255, 255, 0.06));
  border-radius: 16px;
  background: linear-gradient(
    165deg,
    var(--r27-surface-card, #111119) 0%,
    var(--r27-surface-alt, #0c0c14) 100%
  );
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.apx-roadmap-card:hover {
  transform: translateY(-3px);
  border-color: var(--r27-border-light, rgba(255, 255, 255, 0.1));
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.75);
}

.apx-roadmap-phase:hover .apx-roadmap-marker {
  transform: scale(1.06);
}

.apx-roadmap-state {
  align-self: flex-start;
  margin-bottom: 12px;
  padding: 4px 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.apx-roadmap-phase--complete .apx-roadmap-state {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.22);
  color: #22c55e;
}

.apx-roadmap-phase--current .apx-roadmap-state {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.3);
  color: #818cf8;
}

.apx-roadmap-phase--in-progress .apx-roadmap-state {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.24);
  color: #f59e0b;
}

.apx-roadmap-phase--planned .apx-roadmap-state {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.24);
  color: #a78bfa;
}

.apx-roadmap-name {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--r27-text-primary, #f1f1f6);
}

.apx-roadmap-desc {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--r27-text-secondary, #9c9cb0);
}

.apx-roadmap-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: auto 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--r27-border, rgba(255, 255, 255, 0.06));
  list-style: none;
}

.apx-roadmap-features li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--r27-text-secondary, #9c9cb0);
}

.apx-roadmap-features li i {
  flex: 0 0 auto;
  margin-top: 3px;
  font-size: 9px;
  color: var(--r27-accent-hover, #818cf8);
}

/* --------------------------------------------------------------------------
   4. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .apx-roadmap-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .apx-roadmap-track::before {
    display: none;
  }
}

@media (max-width: 900px) {
  .apx-explore-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .apx-explore-list {
    width: 100%;
    padding-bottom: 2px;
  }
}

@media (max-width: 640px) {
  .apx-explore-nav {
    padding: 0 16px;
  }

  .apx-explore-link {
    padding: 7px 11px;
    font-size: 12.5px;
  }

  .apx-roadmap {
    padding: 56px 16px;
  }

  .apx-roadmap-track {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .apx-roadmap-phase {
    align-items: stretch;
  }

  .apx-roadmap-marker {
    margin-bottom: 12px;
  }

  .apx-roadmap-header {
    margin-bottom: 32px;
  }
}

/* --------------------------------------------------------------------------
   5. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .apx-explore-link,
  .apx-explore-link i,
  .apx-roadmap-card,
  .apx-roadmap-marker {
    transition: none;
  }

  .apx-roadmap-card:hover,
  .apx-roadmap-phase:hover .apx-roadmap-marker {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   6. ASSESSMENT AVAILABILITY / EVIDENCE QUALIFICATION
   --------------------------------------------------------------------------
   Carries the benchmark + facilitated-pilot qualification that the
   pre-mockup assessment section displayed. Without it the assessment cards
   assert "Industry Benchmarking" with no qualification attached.
   Kept in THIS file so the whole experiment stays removable by deleting one
   stylesheet.
   -------------------------------------------------------------------------- */
.apx-assess-qual {
  max-width: 940px;
  margin: 20px auto 0;
  text-align: center;
  font-size: 11px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.45);
}

.apx-assess-qual strong {
  color: rgba(255, 255, 255, 0.68);
  font-weight: 600;
}

.apx-assess-qual i {
  margin-right: 4px;
  color: #818CF8;
}

@media (max-width: 640px) {
  .apx-assess-qual {
    font-size: 10.5px;
    text-align: left;
    padding: 0 4px;
  }
}
/* ══════════════════════════════════════════════════════════════════════════
   APPEX360 — HOMEPAGE ENTERPRISE COMMERCIAL LAYER (Release 45)
   ──────────────────────────────────────────────────────────────────────────
   SCOPE / SAFETY CONTRACT
   ---------------------------------------------------------------------------
   Every rule in this file is namespaced `.apx-ent*`. Nothing here redefines,
   overrides or removes a single existing rule from any earlier numbered
   stylesheet, and nothing here targets a pre-existing homepage selector.

   The homepage is a protected baseline (spec/requests/homepage_*.rb). This
   file therefore adds a NEW visual layer only. Removing this file — plus the
   `//= require` line in design_system.css and the `apx_ent_*` partials —
   reverts the page with zero residue.

   MOTION
   ---------------------------------------------------------------------------
   All motion here is CSS-only (no JavaScript, no animation libraries) and is
   enhancement only: every piece of information is fully readable with motion
   disabled. `@media (prefers-reduced-motion: reduce)` at the bottom of this
   file neutralises every animation and transition in the layer.

   NAMESPACE
   ---------------------------------------------------------------------------
   .apx-ent            local design tokens (scoped, self-contained)
   .apx-ent-*          component classes
   No `r27-*`, `r28a-*`, `r26-*`, `navbar` or `MEX` token appears anywhere in
   this file (those tokens are guarded/forbidden by the baseline specs).
   ══════════════════════════════════════════════════════════════════════════ */

/* --------------------------------------------------------------------------
   1. SCOPED DESIGN TOKENS
   Self-contained so this layer never depends on an earlier file's variables.
   -------------------------------------------------------------------------- */
.apx-ent {
  --aeb-bg:        #07070d;
  --aeb-bg-2:      #0a0a12;
  --aeb-surface:   #0e0e17;
  --aeb-surface-2: #12121d;
  --aeb-surface-3: #16161f;
  --aeb-line:      rgba(255, 255, 255, 0.07);
  --aeb-line-2:    rgba(255, 255, 255, 0.13);
  --aeb-grid:      rgba(255, 255, 255, 0.032);
  --aeb-text:      #f2f2f7;
  --aeb-text-2:    #a2a2b6;
  --aeb-text-3:    #70708a;
  --aeb-indigo:    #6366f1;
  --aeb-indigo-l:  #818cf8;
  --aeb-cyan:      #22d3ee;
  --aeb-cyan-d:    #0891b2;
  --aeb-green:     #22c55e;
  --aeb-amber:     #f59e0b;
  --aeb-violet:    #a78bfa;
  --aeb-rose:      #fb7185;
  --aeb-shadow:    0 24px 60px -28px rgba(0, 0, 0, 0.9);
  --aeb-radius:    16px;
}

/* --------------------------------------------------------------------------
   1a. MOCKUP ALIGNMENT TOKENS — RELEASE 46 (convergence, additive)
   ---------------------------------------------------------------------------
   The approved homepage visual reference
   (app/assets/images/APPEX360_Executive_Intelligence_Homepage_Mockup.png)
   presents a deep NAVY dark theme with a pronounced indigo accent. The base
   tokens above lean neutral-black. These overrides re-tune token VALUES only
   — no rule, selector or component behaviour changes — so every apx_ent band
   converges toward the approved visual language while remaining fully
   configurable: reverting this block reverts the convergence with zero
   residue. All delta values carry a `--aeb-mk` (mockup) prefix.
   -------------------------------------------------------------------------- */
.apx-ent {
  /* Token consumers only — values are defined ONCE in
     themes/tokens/apex_reference.css (:root homepage-convergence block).
     No literal palette lives in this file. */
  --aeb-mk-bg:        var(--apx-home-bg);           /* deep navy field (mockup base)          */
  --aeb-mk-bg-2:      var(--apx-home-bg-2);         /* navy gradient tail                     */
  --aeb-mk-surface:   var(--apx-home-surface);      /* navy card surface                      */
  --aeb-mk-surface-2: var(--apx-home-surface-2);    /* raised navy surface                    */
  --aeb-mk-surface-3: var(--apx-home-surface-3);    /* highest navy surface                   */
  --aeb-mk-indigo:    var(--apx-home-accent);       /* mockup accent indigo                   */
  --aeb-mk-indigo-l:  var(--apx-home-accent-light); /* light accent                           */
  --aeb-mk-radius:    var(--apx-home-radius);       /* mockup card radius                     */
  --aeb-mk-glow:      var(--apx-home-glow);

  /* Composition: the mockup token values replace the base values wherever a
     mockup value exists. New tokens (glow) are additive. */
  --aeb-bg:        var(--aeb-mk-bg);
  --aeb-bg-2:      var(--aeb-mk-bg-2);
  --aeb-surface:   var(--aeb-mk-surface);
  --aeb-surface-2: var(--aeb-mk-surface-2);
  --aeb-surface-3: var(--aeb-mk-surface-3);
  --aeb-indigo:    var(--aeb-mk-indigo);
  --aeb-indigo-l:  var(--aeb-mk-indigo-l);
  --aeb-radius:    var(--aeb-mk-radius);
}

/* Every new section sits on the dark homepage background and shares the
   reference grid + spacing rhythm. */
.apx-ent-section {
  position: relative;
  padding: 88px 24px;
  background:
    linear-gradient(180deg, var(--aeb-bg) 0%, var(--aeb-bg-2) 100%);
  background-attachment: scroll;
  scroll-margin-top: 92px;
}

/* Thin technical gridline field — the "enterprise blueprint" surface. */
.apx-ent-section--grid::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--aeb-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--aeb-grid) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 100%);
}

.apx-ent-inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
}

.apx-ent-inner--narrow { max-width: 1040px; }

/* --------------------------------------------------------------------------
   2. SECTION HEADER PRIMITIVES
   -------------------------------------------------------------------------- */
.apx-ent-head {
  max-width: 780px;
  margin: 0 auto 52px;
  text-align: center;
}

.apx-ent-head--left {
  margin-left: 0;
  text-align: left;
}

.apx-ent-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 6px 14px;
  border: 1px solid rgba(99, 102, 241, 0.26);
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.09);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aeb-indigo-l);
}

.apx-ent-eyebrow i { font-size: 11px; }

.apx-ent-h2 {
  margin: 0 0 16px;
  font-size: clamp(26px, 3.3vw, 40px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.022em;
  color: var(--aeb-text);
}

.apx-ent-h3 {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--aeb-text);
}

.apx-ent-lede {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--aeb-text-2);
}

.apx-ent-accent {
  background: linear-gradient(135deg, var(--aeb-indigo-l) 0%, var(--aeb-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------------------------
   3. REALITY ANCHOR LABELS
   Truthful credibility labels. Two visual weights:
     --solid  : the visual is a real, shipped interface / workflow
     --illus  : the visual contains illustrative or placeholder data
   -------------------------------------------------------------------------- */
.apx-ent-anchor {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--aeb-line-2);
  background: rgba(255, 255, 255, 0.035);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aeb-text-3);
  white-space: nowrap;
}

.apx-ent-anchor i { font-size: 10px; }

.apx-ent-anchor--illus {
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(245, 158, 11, 0.08);
  color: #fbbf24;
}

.apx-ent-anchor--model {
  border-color: rgba(34, 211, 238, 0.28);
  background: rgba(34, 211, 238, 0.08);
  color: #67e8f9;
}

.apx-ent-anchor--solid {
  border-color: rgba(34, 197, 94, 0.28);
  background: rgba(34, 197, 94, 0.08);
  color: #4ade80;
}

.apx-ent-anchor-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 28px 0 0;
}

/* --------------------------------------------------------------------------
   4. GLASS PANEL PRIMITIVE
   -------------------------------------------------------------------------- */
.apx-ent-panel {
  position: relative;
  border: 1px solid var(--aeb-line);
  border-radius: var(--aeb-radius);
  background: linear-gradient(165deg, var(--aeb-surface) 0%, var(--aeb-bg-2) 100%);
  box-shadow: var(--aeb-shadow);
  overflow: hidden;
}

/* Subtle top highlight — the "glass edge" of the reference language. */
.apx-ent-panel::after {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(129, 140, 248, 0.5), transparent);
  pointer-events: none;
}

/* Window chrome for product-style panels */
.apx-ent-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--aeb-line);
  background: rgba(255, 255, 255, 0.022);
}

.apx-ent-chrome-dots { display: inline-flex; gap: 6px; flex: 0 0 auto; }

.apx-ent-chrome-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}

.apx-ent-chrome-dots span:first-child { background: rgba(251, 113, 133, 0.55); }
.apx-ent-chrome-dots span:nth-child(2) { background: rgba(245, 158, 11, 0.5); }
.apx-ent-chrome-dots span:last-child { background: rgba(34, 197, 94, 0.5); }

.apx-ent-chrome-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--aeb-text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.apx-ent-chrome-title i { margin-right: 7px; color: var(--aeb-indigo-l); }

/* --------------------------------------------------------------------------
   5. HERO — PRODUCT CONSOLE STRIP
   Added inside the existing .r27-hero, below .r27-hero-inner. The existing
   hero text, CTAs, credibility badges and Intelligence Wheel are untouched.
   -------------------------------------------------------------------------- */
.apx-ent-hero-console {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 44px auto 0;
}

.apx-ent-tagline {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aeb-cyan);
}

.apx-ent-tagline span { color: var(--aeb-text-3); }

/* The SYSTEMS → DATA → … → ACTION spine */
.apx-ent-flow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 13px 18px;
  border-bottom: 1px solid var(--aeb-line);
  background: rgba(34, 211, 238, 0.035);
  list-style: none;
  margin: 0;
}

.apx-ent-flow li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aeb-text-3);
}

.apx-ent-flow li i {
  font-size: 10px;
  color: var(--aeb-cyan);
}

.apx-ent-flow li.is-core { color: var(--aeb-text); }

.apx-ent-flow li.is-core i { color: var(--aeb-indigo-l); }

.apx-ent-flow-arrow {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.16);
}

.apx-ent-console-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--aeb-line);
}

.apx-ent-console-cell {
  padding: 18px 18px 20px;
  background: var(--aeb-surface);
}

.apx-ent-console-label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aeb-text-3);
}

.apx-ent-console-label i { font-size: 11px; color: var(--aeb-indigo-l); }

.apx-ent-console-value {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0;
  font-size: 25px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--aeb-text);
  font-variant-numeric: tabular-nums;
}

.apx-ent-console-value small {
  font-size: 12px;
  font-weight: 600;
  color: var(--aeb-text-3);
}

.apx-ent-console-foot {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--aeb-text-3);
}

.apx-ent-console-foot em {
  font-style: normal;
  color: var(--aeb-text-2);
}

.apx-ent-console-bar {
  height: 4px;
  margin-top: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.apx-ent-console-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--aeb-indigo), var(--aeb-cyan));
}

.apx-ent-console-bar--warn span { background: linear-gradient(90deg, var(--aeb-amber), var(--aeb-rose)); }
.apx-ent-console-bar--ok span   { background: linear-gradient(90deg, #16a34a, var(--aeb-green)); }

.apx-ent-console-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 13px 18px;
  border-top: 1px solid var(--aeb-line);
  background: rgba(255, 255, 255, 0.018);
}

.apx-ent-console-panel p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--aeb-text-3);
}

/* --------------------------------------------------------------------------
   6. WHY APPEX360 EXISTS
   -------------------------------------------------------------------------- */
.apx-ent-why {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 22px;
  padding: 30px;
}

.apx-ent-why-col { min-width: 0; }

.apx-ent-why-colhead {
  margin: 0 0 16px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aeb-text-3);
}

.apx-ent-why-colhead--after { color: var(--aeb-cyan); }

.apx-ent-chiplist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.apx-ent-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 13px;
  border: 1px solid var(--aeb-line);
  border-radius: 10px;
  background: linear-gradient(160deg, var(--aeb-surface-2), var(--aeb-surface));
  font-size: 12.5px;
  font-weight: 500;
  color: var(--aeb-text-2);
  transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.apx-ent-chip i { font-size: 12px; color: var(--aeb-text-3); }

/* "Disordered" left column: slight rotation conveys fragmentation. */
.apx-ent-chiplist--fragmented .apx-ent-chip:nth-child(3n + 1) { transform: rotate(-1.2deg); }
.apx-ent-chiplist--fragmented .apx-ent-chip:nth-child(3n + 2) { transform: rotate(0.9deg) translateY(3px); }
.apx-ent-chiplist--fragmented .apx-ent-chip:nth-child(3n)     { transform: rotate(-0.5deg) translateY(-2px); }
.apx-ent-chiplist--fragmented .apx-ent-chip {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.022);
  color: var(--aeb-text-3);
}

.apx-ent-chiplist--governed .apx-ent-chip {
  border-color: rgba(34, 211, 238, 0.24);
  background: linear-gradient(160deg, rgba(34, 211, 238, 0.09), rgba(99, 102, 241, 0.06));
  color: var(--aeb-text);
}

.apx-ent-chiplist--governed .apx-ent-chip i { color: var(--aeb-cyan); }

.apx-ent-why-core {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 6px;
}

.apx-ent-why-coremark {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(99, 102, 241, 0.4);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 40%, rgba(99, 102, 241, 0.22), transparent 62%),
    var(--aeb-surface);
  box-shadow:
    0 0 0 10px rgba(99, 102, 241, 0.05),
    0 0 46px -8px rgba(99, 102, 241, 0.55);
  text-align: center;
  animation: apx-ent-core-pulse 5.2s ease-in-out infinite;
}

.apx-ent-why-coremark strong {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--aeb-text);
}

.apx-ent-why-coremark small {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--aeb-indigo-l);
}

.apx-ent-why-coremark i { font-size: 19px; color: var(--aeb-indigo-l); }

@keyframes apx-ent-core-pulse {
  0%, 100% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0.05), 0 0 46px -8px rgba(99, 102, 241, 0.5); }
  50%      { box-shadow: 0 0 0 14px rgba(99, 102, 241, 0.03), 0 0 62px -6px rgba(99, 102, 241, 0.75); }
}

.apx-ent-why-arrow {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.2);
}

/* --------------------------------------------------------------------------
   7. SYSTEMS → DATA → INTELLIGENCE
   -------------------------------------------------------------------------- */
.apx-ent-sys-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) 92px minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
}

.apx-ent-sys-col { padding: 26px; }

.apx-ent-sys-col--mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 26px 8px;
  border-left: 1px solid var(--aeb-line);
  border-right: 1px solid var(--aeb-line);
  background: rgba(34, 211, 238, 0.02);
}

.apx-ent-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.apx-ent-source {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 13px 12px;
  border: 1px solid var(--aeb-line);
  border-radius: 11px;
  background: linear-gradient(160deg, var(--aeb-surface-2), var(--aeb-surface));
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.apx-ent-source:hover {
  transform: translateY(-2px);
  border-color: rgba(99, 102, 241, 0.34);
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.9);
}

.apx-ent-source i { font-size: 15px; color: var(--aeb-indigo-l); }

.apx-ent-source strong {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--aeb-text);
}

.apx-ent-source span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aeb-text-3);
}

/* Vertical connector rail with travelling data packets */
.apx-ent-rail {
  position: relative;
  flex: 1 1 auto;
  width: 2px;
  margin: 6px 0;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    rgba(34, 211, 238, 0) 0%,
    rgba(34, 211, 238, 0.38) 22%,
    rgba(99, 102, 241, 0.38) 78%,
    rgba(99, 102, 241, 0) 100%
  );
  overflow: hidden;
}

.apx-ent-rail span {
  position: absolute;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--aeb-cyan);
  box-shadow: 0 0 10px 2px rgba(34, 211, 238, 0.65);
  animation: apx-ent-packet 3.6s linear infinite;
}

.apx-ent-rail span:nth-child(2) { animation-delay: 1.2s; background: var(--aeb-indigo-l); box-shadow: 0 0 10px 2px rgba(129, 140, 248, 0.6); }
.apx-ent-rail span:nth-child(3) { animation-delay: 2.4s; background: var(--aeb-violet); box-shadow: 0 0 10px 2px rgba(167, 139, 250, 0.6); }

@keyframes apx-ent-packet {
  0%   { top: -6%;  opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: 104%; opacity: 0; }
}

.apx-ent-rail-label {
  margin: 10px 0;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aeb-text-3);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
}

.apx-ent-core-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px;
}

.apx-ent-core-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  padding: 7px 14px;
  border: 1px solid rgba(99, 102, 241, 0.38);
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.1);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aeb-indigo-l);
}

.apx-ent-stage-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.apx-ent-stage-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--aeb-text-2);
}

.apx-ent-stage-list li i {
  flex: 0 0 auto;
  margin-top: 3px;
  font-size: 11px;
  color: var(--aeb-cyan);
}

.apx-ent-output-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 1px 0 0;
  padding: 22px 26px;
  border-top: 1px solid var(--aeb-line);
  background: rgba(255, 255, 255, 0.016);
}

.apx-ent-output {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.apx-ent-output-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--aeb-text-3);
}

.apx-ent-output-tag i { font-size: 10px; color: var(--aeb-amber); }

.apx-ent-output p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--aeb-text);
}

/* --------------------------------------------------------------------------
   8. DATA HEALTH / TRUST
   -------------------------------------------------------------------------- */
.apx-ent-health {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 0;
}

.apx-ent-health-main { padding: 26px 26px 22px; }

.apx-ent-health-side {
  padding: 26px;
  border-left: 1px solid var(--aeb-line);
  background: rgba(255, 255, 255, 0.016);
}

.apx-ent-metric {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--aeb-line);
}

.apx-ent-metric:last-of-type { border-bottom: 0; }

.apx-ent-metric-name {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--aeb-text);
}

.apx-ent-metric-name i { font-size: 12px; color: var(--aeb-indigo-l); }

.apx-ent-metric-val {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--aeb-text);
  font-variant-numeric: tabular-nums;
}

.apx-ent-metric-track {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.apx-ent-metric-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--aeb-indigo), var(--aeb-cyan));
}

.apx-ent-metric-track--ok span  { background: linear-gradient(90deg, #15803d, var(--aeb-green)); }
.apx-ent-metric-track--warn span { background: linear-gradient(90deg, #b45309, var(--aeb-amber)); }

.apx-ent-trustlist {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.apx-ent-trustlist li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0;
}

.apx-ent-trustlist i {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(34, 211, 238, 0.24);
  border-radius: 9px;
  background: rgba(34, 211, 238, 0.07);
  font-size: 12px;
  color: var(--aeb-cyan);
}

.apx-ent-trustlist strong {
  display: block;
  margin-bottom: 2px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--aeb-text);
}

.apx-ent-trustlist span {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--aeb-text-3);
}

/* --------------------------------------------------------------------------
   9. PLATFORM ARCHITECTURE — SIGNATURE VISUAL
   -------------------------------------------------------------------------- */
.apx-ent-arch { padding: 30px 26px 26px; }

.apx-ent-arch-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.apx-ent-arch-input li {
  margin: 0;
  padding: 7px 13px;
  border: 1px solid var(--aeb-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.028);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--aeb-text-2);
}

.apx-ent-arch-input li i { margin-right: 6px; font-size: 10px; color: var(--aeb-text-3); }

.apx-ent-arch-core {
  margin: 0 auto 6px;
  max-width: 460px;
  padding: 20px 24px;
  border: 1px solid rgba(99, 102, 241, 0.42);
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(99, 102, 241, 0.2), transparent 68%),
    linear-gradient(170deg, var(--aeb-surface-2), var(--aeb-surface));
  box-shadow: 0 0 52px -14px rgba(99, 102, 241, 0.75);
  text-align: center;
  animation: apx-ent-core-pulse 6s ease-in-out infinite;
}

.apx-ent-arch-core strong {
  display: block;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--aeb-text);
}

.apx-ent-arch-core small {
  display: block;
  margin-top: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--aeb-indigo-l);
}

.apx-ent-arch-fork {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.apx-ent-arch-fork li {
  position: relative;
  margin: 0;
  padding: 18px 12px 6px;
  font-size: 0;
}

.apx-ent-arch-fork li::before {
  content: "";
  display: block;
  width: 2px;
  height: 20px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.6), rgba(34, 211, 238, 0.5));
}

.apx-ent-arch-fork span {
  display: block;
  padding: 9px 18px;
  border: 1px solid var(--aeb-line-2);
  border-radius: 10px;
  background: var(--aeb-surface-2);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aeb-text);
}

.apx-ent-arch-fork li.is-validate span { border-color: rgba(34, 211, 238, 0.36); color: #67e8f9; }
.apx-ent-arch-fork li.is-analyse span  { border-color: rgba(129, 140, 248, 0.4);  color: var(--aeb-indigo-l); }
.apx-ent-arch-fork li.is-explain span  { border-color: rgba(167, 139, 250, 0.38); color: var(--aeb-violet); }

.apx-ent-arch-join {
  width: 2px;
  height: 22px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.5), rgba(99, 102, 241, 0.6));
}

.apx-ent-arch-chain {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.apx-ent-arch-chain li { margin: 0; }

.apx-ent-arch-node {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 24px;
  border: 1px solid var(--aeb-line-2);
  border-radius: 12px;
  background: linear-gradient(170deg, var(--aeb-surface-2), var(--aeb-surface));
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aeb-text);
}

.apx-ent-arch-node i { font-size: 12px; color: var(--aeb-indigo-l); }

.apx-ent-arch-chain li.is-decide .apx-ent-arch-node { border-color: rgba(245, 158, 11, 0.36); }
.apx-ent-arch-chain li.is-decide .apx-ent-arch-node i { color: var(--aeb-amber); }
.apx-ent-arch-chain li.is-act .apx-ent-arch-node { border-color: rgba(34, 197, 94, 0.36); }
.apx-ent-arch-chain li.is-act .apx-ent-arch-node i { color: var(--aeb-green); }
.apx-ent-arch-chain li.is-verify .apx-ent-arch-node { border-color: rgba(34, 211, 238, 0.36); }
.apx-ent-arch-chain li.is-verify .apx-ent-arch-node i { color: var(--aeb-cyan); }

.apx-ent-arch-link {
  width: 2px;
  height: 18px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.14);
}

.apx-ent-arch-outcomes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--aeb-line);
  list-style: none;
}

.apx-ent-arch-outcomes li {
  margin: 0;
  padding: 13px 14px;
  border: 1px solid var(--aeb-line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.022);
}

.apx-ent-arch-outcomes strong {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--aeb-text);
}

.apx-ent-arch-outcomes span {
  font-size: 11px;
  line-height: 1.5;
  color: var(--aeb-text-3);
}

.apx-ent-arch-outcomes i { margin-right: 6px; font-size: 11px; color: var(--aeb-cyan); }

/* Operating sequence — CONNECT → … → VERIFY */
.apx-ent-seq {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.apx-ent-seq li {
  position: relative;
  margin: 0;
  padding: 15px 10px 13px;
  border: 1px solid var(--aeb-line);
  border-radius: 12px;
  background: linear-gradient(170deg, var(--aeb-surface-2), var(--aeb-surface));
  text-align: center;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.apx-ent-seq li::after {
  content: "\f054";
  position: absolute;
  top: 50%;
  right: -9px;
  transform: translateY(-50%);
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
  font-weight: 900;
  font-size: 7.5px;
  color: rgba(255, 255, 255, 0.22);
}

.apx-ent-seq li:last-child::after { display: none; }

.apx-ent-seq li:hover {
  transform: translateY(-3px);
  border-color: rgba(99, 102, 241, 0.36);
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.9);
}

.apx-ent-seq i {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--aeb-indigo-l);
}

.apx-ent-seq strong {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aeb-text);
}

.apx-ent-seq small {
  display: block;
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.4;
  color: var(--aeb-text-3);
}

/* --------------------------------------------------------------------------
   10. PLATFORM MODULES FRAME (assessments lead-in)
   -------------------------------------------------------------------------- */
.apx-ent-modframe {
  position: relative;
  padding: 40px 24px 0;
  background: linear-gradient(180deg, var(--aeb-bg-2) 0%, var(--aeb-bg) 100%);
}

.apx-ent-modframe-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 26px 26px 24px;
  border: 1px solid var(--aeb-line);
  border-bottom: 0;
  border-radius: var(--aeb-radius) var(--aeb-radius) 0 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(99, 102, 241, 0.11), transparent 70%),
    var(--aeb-surface);
}

.apx-ent-modframe-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.apx-ent-modframe-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--aeb-text);
}

.apx-ent-modframe-title i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(99, 102, 241, 0.34);
  border-radius: 11px;
  background: rgba(99, 102, 241, 0.1);
  font-size: 16px;
  color: var(--aeb-indigo-l);
}

.apx-ent-modframe-rel {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 20px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--aeb-line);
  list-style: none;
}

.apx-ent-modframe-rel li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aeb-text-3);
}

.apx-ent-modframe-rel li i { font-size: 10px; color: var(--aeb-cyan); }

.apx-ent-modframe-rel li.is-out i { color: var(--aeb-green); }

/* --------------------------------------------------------------------------
   11. INTELLIGENCE CARDS
   -------------------------------------------------------------------------- */
.apx-ent-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.apx-ent-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--aeb-line);
  border-radius: var(--aeb-radius);
  background: linear-gradient(168deg, var(--aeb-surface) 0%, var(--aeb-bg-2) 100%);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.apx-ent-card:hover {
  transform: translateY(-4px);
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 20px 44px -22px rgba(0, 0, 0, 0.95);
}

.apx-ent-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.apx-ent-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--aeb-line-2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  font-size: 14px;
  color: var(--aeb-indigo-l);
}

.apx-ent-card h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--aeb-text);
}

.apx-ent-card p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--aeb-text-2);
}

.apx-ent-card-viz {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--aeb-line);
}

.apx-ent-card-viz svg { display: block; width: 100%; height: 46px; overflow: visible; }

.apx-ent-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aeb-text-3);
}

.apx-ent-trend { display: inline-flex; align-items: center; gap: 5px; }
.apx-ent-trend i { font-size: 10px; }
.apx-ent-trend--good { color: #4ade80; }
.apx-ent-trend--watch { color: var(--aeb-amber); }
.apx-ent-trend--risk { color: var(--aeb-rose); }

.apx-ent-bars { display: flex; align-items: flex-end; gap: 5px; height: 46px; }

.apx-ent-bars span {
  flex: 1 1 0;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--aeb-indigo-l), rgba(99, 102, 241, 0.28));
}

.apx-ent-donut-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}

.apx-ent-donut-wrap svg { flex: 0 0 auto; width: 46px; height: 46px; }

.apx-ent-node-viz {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  padding: 0 6px;
}

.apx-ent-node-viz::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 12px;
  right: 12px;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.apx-ent-node-viz span {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(99, 102, 241, 0.6);
  background: var(--aeb-surface-2);
}

.apx-ent-node-viz span:nth-child(2) { border-color: rgba(34, 211, 238, 0.7); }

/* --------------------------------------------------------------------------
   12. GOVERNED EVIDENCE LAYER
   -------------------------------------------------------------------------- */
.apx-ent-evidence { padding: 30px 26px 26px; }

.apx-ent-ev-top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 720px;
  margin: 0 auto;
}

.apx-ent-ev-node {
  padding: 18px 20px;
  border: 1px solid var(--aeb-line-2);
  border-radius: 13px;
  background: var(--aeb-surface-2);
  text-align: center;
}

.apx-ent-ev-node strong {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aeb-text);
}

.apx-ent-ev-node small {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--aeb-text-3);
}

.apx-ent-ev-node i { display: block; margin-bottom: 9px; font-size: 16px; color: var(--aeb-indigo-l); }

.apx-ent-ev-node--claim i { color: var(--aeb-amber); }
.apx-ent-ev-node--evidence i { color: var(--aeb-cyan); }
.apx-ent-ev-node--evidence { border-color: rgba(34, 211, 238, 0.3); }

.apx-ent-ev-converge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0;
}

.apx-ent-ev-funnel {
  width: 2px;
  height: 20px;
  background: rgba(255, 255, 255, 0.14);
}

.apx-ent-ev-eval {
  max-width: 340px;
  margin: 0 auto;
  padding: 15px 26px;
  border: 1px solid rgba(99, 102, 241, 0.42);
  border-radius: 13px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(99, 102, 241, 0.2), transparent 70%),
    var(--aeb-surface-2);
  box-shadow: 0 0 40px -14px rgba(99, 102, 241, 0.7);
  text-align: center;
}

.apx-ent-ev-eval strong {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--aeb-text);
}

.apx-ent-ev-eval small {
  display: block;
  margin-top: 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--aeb-indigo-l);
}

.apx-ent-ev-outcomes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.apx-ent-ev-outcomes li {
  margin: 0;
  padding: 18px;
  border: 1px solid var(--aeb-line);
  border-radius: 13px;
  background: linear-gradient(168deg, var(--aeb-surface-2), var(--aeb-surface));
}

.apx-ent-ev-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.apx-ent-ev-state--supported { border: 1px solid rgba(34, 197, 94, 0.3); background: rgba(34, 197, 94, 0.09); color: #4ade80; }
.apx-ent-ev-state--unsupported { border: 1px solid rgba(251, 113, 133, 0.3); background: rgba(251, 113, 133, 0.09); color: var(--aeb-rose); }
.apx-ent-ev-state--missing { border: 1px solid rgba(245, 158, 11, 0.3); background: rgba(245, 158, 11, 0.09); color: #fbbf24; }

.apx-ent-ev-outcomes strong {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 700;
  color: var(--aeb-text);
}

.apx-ent-ev-outcomes p {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--aeb-line);
  font-size: 12px;
  line-height: 1.6;
  color: var(--aeb-text-2);
}

.apx-ent-ev-statement {
  max-width: 860px;
  margin: 28px auto 0;
  padding: 18px 22px;
  border: 1px solid var(--aeb-line);
  border-left: 2px solid var(--aeb-cyan);
  border-radius: 0 12px 12px 0;
  background: rgba(34, 211, 238, 0.035);
}

.apx-ent-ev-statement p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--aeb-text-2);
}

.apx-ent-ev-statement strong { color: var(--aeb-text); }

/* --------------------------------------------------------------------------
   13. APPEXi WORKSPACE — FLAGSHIP CENTREPIECE
   -------------------------------------------------------------------------- */
.apx-ent-workspace {
  position: relative;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 480px;
}

.apx-ent-workspace::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 22% 0%, rgba(99, 102, 241, 0.16), transparent 70%);
}

.apx-ent-ws-side {
  position: relative;
  z-index: 1;
  padding: 20px 16px;
  border-right: 1px solid var(--aeb-line);
  background: rgba(0, 0, 0, 0.24);
}

.apx-ent-ws-sidehead {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--aeb-line);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--aeb-text-2);
}

.apx-ent-ws-sidehead i { font-size: 13px; color: var(--aeb-indigo-l); }

.apx-ent-ws-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.apx-ent-ws-nav li {
  margin: 0;
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--aeb-text-3);
}

.apx-ent-ws-nav li i { margin-right: 9px; font-size: 11px; opacity: 0.8; }

.apx-ent-ws-nav li.is-on {
  background: rgba(99, 102, 241, 0.13);
  color: var(--aeb-text);
}

.apx-ent-ws-nav li.is-on i { color: var(--aeb-indigo-l); opacity: 1; }

.apx-ent-ws-meta {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 20px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--aeb-line);
}

.apx-ent-ws-meta div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--aeb-text-3);
}

.apx-ent-ws-meta b { color: var(--aeb-text-2); font-weight: 700; }

.apx-ent-ws-main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 24px;
}

.apx-ent-ws-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.apx-ent-ws-steps li {
  position: relative;
  margin: 0;
  padding: 11px 10px;
  border: 1px solid var(--aeb-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.024);
  text-align: center;
}

.apx-ent-ws-steps li::after {
  content: "\f054";
  position: absolute;
  top: 50%;
  right: -8px;
  transform: translateY(-50%);
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
  font-weight: 900;
  font-size: 7px;
  color: rgba(255, 255, 255, 0.2);
}

.apx-ent-ws-steps li:last-child::after { display: none; }

.apx-ent-ws-steps i { display: block; margin-bottom: 6px; font-size: 12px; color: var(--aeb-indigo-l); }

.apx-ent-ws-steps strong {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aeb-text-2);
}

.apx-ent-ws-steps li.is-finding { border-color: rgba(34, 197, 94, 0.34); }
.apx-ent-ws-steps li.is-finding i { color: var(--aeb-green); }
.apx-ent-ws-steps li.is-action { border-color: rgba(245, 158, 11, 0.34); }
.apx-ent-ws-steps li.is-action i { color: var(--aeb-amber); }

.apx-ent-ws-thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 auto;
}

.apx-ent-bubble {
  max-width: 78%;
  padding: 13px 16px;
  border-radius: 13px;
  font-size: 12.5px;
  line-height: 1.6;
}

.apx-ent-bubble--user {
  align-self: flex-end;
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-bottom-right-radius: 4px;
  background: rgba(99, 102, 241, 0.12);
  color: var(--aeb-text);
}

.apx-ent-bubble--appexi {
  align-self: flex-start;
  border: 1px solid var(--aeb-line);
  border-bottom-left-radius: 4px;
  background: var(--aeb-surface-2);
  color: var(--aeb-text-2);
}

.apx-ent-bubble-who {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aeb-text-3);
}

.apx-ent-bubble-who i { font-size: 10px; color: var(--aeb-indigo-l); }

.apx-ent-bubble--appexi .apx-ent-bubble-who i { color: var(--aeb-cyan); }

.apx-ent-interrogation {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.apx-ent-interrogation li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--aeb-text-2);
}

.apx-ent-interrogation li i {
  flex: 0 0 auto;
  margin-top: 3px;
  font-size: 10px;
  color: var(--aeb-cyan);
}

.apx-ent-bubble--finding {
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.055);
}

.apx-ent-bubble--action {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.055);
}

.apx-ent-ws-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 0;
  padding: 13px 16px;
  border: 1px solid var(--aeb-line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.02);
}

.apx-ent-ws-foot i { font-size: 13px; color: var(--aeb-cyan); }

.apx-ent-ws-foot p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--aeb-text-3);
}

/* --------------------------------------------------------------------------
   14. POSITIONING · GOVERNANCE PROMISE · DEVICES · PATHWAYS
   -------------------------------------------------------------------------- */
.apx-ent-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.apx-ent-roles li {
  margin: 0;
  padding: 11px 18px;
  border: 1px solid var(--aeb-line);
  border-radius: 999px;
  background: linear-gradient(168deg, var(--aeb-surface-2), var(--aeb-surface));
  font-size: 12.5px;
  font-weight: 600;
  color: var(--aeb-text-2);
}

.apx-ent-roles li i { margin-right: 8px; font-size: 11px; color: var(--aeb-indigo-l); }

.apx-ent-promise {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 44px;
}

.apx-ent-promise-card {
  padding: 20px;
  border: 1px solid var(--aeb-line);
  border-radius: var(--aeb-radius);
  background: linear-gradient(168deg, var(--aeb-surface) 0%, var(--aeb-bg-2) 100%);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.apx-ent-promise-card:hover {
  transform: translateY(-3px);
  border-color: rgba(34, 211, 238, 0.26);
}

.apx-ent-promise-card i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 13px;
  border: 1px solid rgba(34, 211, 238, 0.24);
  border-radius: 10px;
  background: rgba(34, 211, 238, 0.07);
  font-size: 14px;
  color: var(--aeb-cyan);
}

.apx-ent-promise-card h3 {
  margin: 0 0 7px;
  font-size: 14px;
  font-weight: 700;
  color: var(--aeb-text);
}

.apx-ent-promise-card p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--aeb-text-2);
}

/* Device strip */
.apx-ent-devices {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 24px;
  margin-top: 44px;
  padding: 0;
  list-style: none;
}

.apx-ent-device {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.apx-ent-device-frame {
  position: relative;
  border: 1px solid var(--aeb-line-2);
  border-radius: 12px;
  background: linear-gradient(170deg, var(--aeb-surface-2), var(--aeb-surface));
  box-shadow: var(--aeb-shadow);
  overflow: hidden;
  transition: transform 0.22s ease, border-color 0.22s ease;
}

.apx-ent-device:hover .apx-ent-device-frame { transform: translateY(-4px); border-color: rgba(99, 102, 241, 0.34); }

.apx-ent-device--desktop .apx-ent-device-frame { width: 300px; height: 178px; }
.apx-ent-device--tablet  .apx-ent-device-frame { width: 148px; height: 198px; border-radius: 14px; }
.apx-ent-device--mobile  .apx-ent-device-frame { width: 92px;  height: 186px; border-radius: 15px; }

.apx-ent-device-screen {
  display: flex;
  flex-direction: column;
  gap: 7px;
  height: 100%;
  padding: 9px;
}

.apx-ent-device-bar {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--aeb-indigo), var(--aeb-cyan));
  opacity: 0.75;
}

.apx-ent-device-row {
  display: flex;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
}

.apx-ent-device-tile {
  flex: 1 1 0;
  border: 1px solid var(--aeb-line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.035);
}

.apx-ent-device-tile--tall { flex: 1.6 1 0; }

.apx-ent-device-label {
  margin: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aeb-text-3);
}

/* Enterprise pathway band */
.apx-ent-pathways {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 44px 0 0;
  padding: 26px;
  border: 1px solid var(--aeb-line);
  border-radius: 20px;
  background:
    radial-gradient(ellipse 60% 90% at 50% 0%, rgba(99, 102, 241, 0.13), transparent 72%),
    linear-gradient(170deg, var(--aeb-surface-2), var(--aeb-bg-2));
  list-style: none;
}

.apx-ent-pathway {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 0;
  padding: 20px 18px;
  border: 1px solid var(--aeb-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.022);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.apx-ent-pathway:hover {
  transform: translateY(-3px);
  border-color: rgba(99, 102, 241, 0.36);
  background: rgba(99, 102, 241, 0.07);
}

.apx-ent-pathway i { font-size: 17px; color: var(--aeb-indigo-l); }

.apx-ent-pathway strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--aeb-text);
}

.apx-ent-pathway span {
  font-size: 12px;
  line-height: 1.55;
  color: var(--aeb-text-3);
}

.apx-ent-pathway-go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--aeb-line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--aeb-indigo-l);
}

.apx-ent-pathway:hover .apx-ent-pathway-go { color: var(--aeb-cyan); }

/* --------------------------------------------------------------------------
   15. ACCESSIBILITY — focus visibility for every interactive element
   -------------------------------------------------------------------------- */
.apx-ent a:focus-visible,
.apx-ent button:focus-visible {
  outline: 2px solid var(--aeb-indigo-l);
  outline-offset: 3px;
  border-radius: 8px;
}

/* --------------------------------------------------------------------------
   16. RESPONSIVE — tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .apx-ent-console-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apx-ent-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apx-ent-promise { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apx-ent-pathways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apx-ent-arch-outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apx-ent-seq { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .apx-ent-seq li::after { display: none; }
  .apx-ent-workspace { grid-template-columns: 200px minmax(0, 1fr); }
}

@media (max-width: 1024px) {
  .apx-ent-sys-grid { grid-template-columns: minmax(0, 1fr); }
  .apx-ent-sys-col--mid {
    flex-direction: row;
    gap: 14px;
    padding: 18px 24px;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--aeb-line);
    border-bottom: 1px solid var(--aeb-line);
  }
  .apx-ent-rail {
    flex: 1 1 auto;
    width: auto;
    height: 2px;
    margin: 0;
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.3), rgba(99, 102, 241, 0.3));
  }
  .apx-ent-rail span { animation: none; top: 50%; margin-top: -3px; left: 33%; }
  .apx-ent-rail span:nth-child(2) { left: 50%; }
  .apx-ent-rail span:nth-child(3) { left: 66%; }
  .apx-ent-rail-label { writing-mode: horizontal-tb; margin: 0; }
  .apx-ent-health { grid-template-columns: minmax(0, 1fr); }
  .apx-ent-health-side { border-left: 0; border-top: 1px solid var(--aeb-line); }
  .apx-ent-workspace { grid-template-columns: minmax(0, 1fr); }
  .apx-ent-ws-side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    border-right: 0;
    border-bottom: 1px solid var(--aeb-line);
  }
  .apx-ent-ws-sidehead { margin: 0; padding: 0; border-bottom: 0; }
  .apx-ent-ws-nav { flex-direction: row; flex-wrap: wrap; }
  .apx-ent-ws-meta { display: none; }
}

/* --------------------------------------------------------------------------
   17. RESPONSIVE — small tablet / mobile
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .apx-ent-section { padding: 60px 16px; }
  .apx-ent-head { margin-bottom: 34px; }
  .apx-ent-cards { grid-template-columns: minmax(0, 1fr); }
  .apx-ent-console-grid { grid-template-columns: minmax(0, 1fr); }
  .apx-ent-promise { grid-template-columns: minmax(0, 1fr); }
  .apx-ent-output-grid { grid-template-columns: minmax(0, 1fr); }
  .apx-ent-arch-outcomes { grid-template-columns: minmax(0, 1fr); }
  .apx-ent-seq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apx-ent-ev-top { grid-template-columns: minmax(0, 1fr); }
  .apx-ent-ev-outcomes { grid-template-columns: minmax(0, 1fr); }
  .apx-ent-ws-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apx-ent-ws-steps li::after { display: none; }
  .apx-ent-bubble { max-width: 100%; }
  .apx-ent-why { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 22px; }
  .apx-ent-why-coremark { width: 126px; height: 126px; }
  .apx-ent-devices { flex-wrap: wrap; gap: 18px; }
  .apx-ent-pathways { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .apx-ent-arch { padding: 22px 18px; }
  .apx-ent-health-main, .apx-ent-health-side { padding: 22px 18px; }
  .apx-ent-evidence { padding: 22px 18px; }
  .apx-ent-sys-col { padding: 22px 18px; }
  .apx-ent-core-panel { padding: 22px 18px; }
  .apx-ent-modframe { padding: 30px 16px 0; }
  .apx-ent-modframe-inner { padding: 22px 18px 20px; }
  .apx-ent-ws-main { padding: 18px 16px 20px; }
  .apx-ent-flow { gap: 6px; padding: 12px 14px; }
}

@media (max-width: 480px) {
  .apx-ent-seq { grid-template-columns: minmax(0, 1fr); }
  .apx-ent-ws-steps { grid-template-columns: minmax(0, 1fr); }
  .apx-ent-console-panel { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   18. REDUCED MOTION
   Every animation and transition in this layer is neutralised. No
   information in this layer depends on motion — the layouts, values, labels
   and diagrams are identical with motion disabled.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .apx-ent-why-coremark,
  .apx-ent-arch-core,
  .apx-ent-rail span {
    animation: none !important;
  }

  .apx-ent-rail span {
    position: static;
    display: none;
  }

  .apx-ent-chip,
  .apx-ent-source,
  .apx-ent-card,
  .apx-ent-seq li,
  .apx-ent-promise-card,
  .apx-ent-pathway,
  .apx-ent-device-frame {
    transition: none !important;
  }

  .apx-ent-source:hover,
  .apx-ent-card:hover,
  .apx-ent-seq li:hover,
  .apx-ent-promise-card:hover,
  .apx-ent-pathway:hover,
  .apx-ent-device:hover .apx-ent-device-frame {
    transform: none !important;
  }

  .apx-ent-chiplist--fragmented .apx-ent-chip {
    transform: none !important;
  }
}

/* ==========================================================================
   12. MOCKUP SIGNATURE VISUAL — GOVERNED INTELLIGENCE WHEEL (Release 46)
   ---------------------------------------------------------------------------
   The single largest MISSING element in the VISUAL GAP REPORT: the approved
   mockup's hero-centrepiece intelligence wheel. The R27 hero is a protected
   baseline, so the wheel is rendered here — as a decorative backdrop of the
   first apx_ent band immediately beneath the hero — using pure CSS only
   (concentric rings + conic accent sweep). No image, no JavaScript.

   Configurable entirely through tokens; removing this block plus the
   `.apx-ent-wheel` markup reverts the feature with zero residue.
   ========================================================================== */
.apx-ent {
  --aeb-wheel-size:   620px;   /* overall wheel diameter                    */
  --aeb-wheel-rings:  3;       /* concentric structural rings               */
  --aeb-wheel-speed:  120s;    /* one full accent sweep                     */
  --aeb-wheel-line:   rgba(141, 143, 251, 0.16);
  --aeb-wheel-accent: conic-gradient(
      from 0deg,
      transparent 0deg,
      rgba(109, 111, 245, 0.00) 40deg,
      rgba(109, 111, 245, 0.55) 120deg,
      rgba(141, 143, 251, 0.85) 180deg,
      rgba(34, 211, 238, 0.35) 240deg,
      transparent 320deg
  );
}

.apx-ent-section--wheel {
  overflow: hidden;   /* contains the wheel's wide decorative rings */
}

.apx-ent-wheel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--aeb-wheel-size);
  height: var(--aeb-wheel-size);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.5;
  z-index: 0;
}

/* Concentric structural rings (drawn without extra DOM nodes). */
.apx-ent-wheel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--aeb-wheel-line);
  box-shadow:
    inset 0 0 0 60px transparent,
    0 0 0 70px  var(--aeb-wheel-line),
    0 0 0 140px rgba(141, 143, 251, 0.09),
    0 0 0 210px rgba(141, 143, 251, 0.045);
}

/* Rotating accent sweep + mockup glow. */
.apx-ent-wheel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--aeb-wheel-accent);
  -webkit-mask-image: radial-gradient(circle, transparent 62%, #000 63%, #000 66%, transparent 67%);
          mask-image: radial-gradient(circle, transparent 62%, #000 63%, #000 66%, transparent 67%);
  filter: blur(1px) drop-shadow(0 0 24px rgba(109, 111, 245, 0.45));
  animation: apx-ent-wheel-spin var(--aeb-wheel-speed) linear infinite;
}

@keyframes apx-ent-wheel-spin {
  to { transform: rotate(360deg); }
}

/* Content stacking safety: the existing `.apx-ent-inner` rule already
   provides position:relative + z-index:1, so wheel markup placed before it
   renders strictly behind all band content with no further rules. */

@media (max-width: 900px) {
  .apx-ent { --aeb-wheel-size: 420px; }
}

@media (prefers-reduced-motion: reduce) {
  .apx-ent-wheel::after { animation: none; }
}
/* ═══════════════════════════════════════════════════════════════════════════
   25_homepage_mockup_convergence.css
   Homepage visual convergence → approved reference:

     app/assets/images/APPEX360_Executive_Intelligence_Homepage_Mockup.png

   AUTHORITY
   ---------
   The file above is the approved VISUAL reference for the homepage. This
   stylesheet is the single convergence layer between that reference and the
   protected R27 homepage composition. It does not restructure any section.

   WHY A SEPARATE FILE (and not an edit to 19_homepage_redesign.css)
   -----------------------------------------------------------------
   1. R27.5.5 homepage baseline lock: "Future redesigns require new class
      prefixes." All rules here are either (a) new `apxc-*` namespace, or
      (b) descendant refinements of EXISTING stable classes, scoped so the
      protected stylesheet is never modified.
   2. The homepage baseline suites assert exact attribute strings
      (`class="r27-nav"`, `class="r27-hero-visual"`,
      `class="r27-assessment-marketplace"`, `class="r27-connect-ribbon"`) and
      section ORDER by string position. Adding a class to those elements, or
      editing their partials, would break those contracts. This file changes
      APPEARANCE ONLY — no ERB file is touched by this work package.

   TOKEN ARCHITECTURE  (DEFAULT TOKENS → COMPONENT STYLES → HOMEPAGE)
   -----------------------------------------------------------------
   The `--apxc-*` custom properties below are the DEFAULT values taken from
   the approved reference. Components consume ONLY these tokens. A future
   admin/user theme overrides the tokens and every component follows:

       USER / ADMIN THEME OVERRIDES
                 ↓
       --apxc-*  DESIGN TOKENS   (this block)
                 ↓
       COMPONENT STYLES          (nav / hero / wheel / cards / rhythm)
                 ↓
       HOMEPAGE

   Where an equivalent existing token already exists (`--r27-surface-card`,
   `--r27-accent`, …) it is REUSED via `var()` fallback — no duplicate
   palette is introduced.

   REMOVING THIS FILE COMPLETELY RESTORES THE PREVIOUS HOMEPAGE:
     1. delete this file
     2. remove the `require design_system/25_homepage_mockup_convergence`
        line from design_system.css
     3. `bundle exec rails assets:precompile`
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Bridge-first token defaults: where an equivalent token ALREADY exists in
     an earlier layer, it is consumed first (`var(--r27-accent, …)`,
     `var(--color-secondary, …)`), so a future USER/ADMIN THEME OVERRIDE of
     those existing tokens flows straight into this layer. The literal values
     are the approved-reference (mockup) fallbacks — they win only when no
     upstream token is defined. No duplicate palette is introduced. */

  /* ── Reference palette: surfaces & depth ─────────────────────────────── */
  --apxc-bg-deep:            var(--apx-home-nav-deep, #070A16);
  --apxc-nav-tint-top:       rgba(7, 10, 22, 0.94);
  --apxc-nav-tint-bottom:    rgba(7, 10, 22, 0.52);
  --apxc-nav-hairline:       var(--r27-border, rgba(255, 255, 255, 0.07));

  /* ── Accent (consumed from existing tokens first) ────────────────────── */
  --apxc-accent:             var(--r27-accent, var(--color-secondary, #8F87BC));

  /* ── Hero ambience: the luminous halo behind the Intelligence Wheel ──── */
  --apxc-halo-core:          color-mix(in srgb, var(--apxc-accent) 30%, transparent);
  --apxc-halo-mid:           color-mix(in srgb, var(--apxc-accent) 16%, transparent);
  --apxc-halo-outer:         color-mix(in srgb, var(--apxc-accent) 10%, transparent);
  --apxc-halo-blur:          34px;

  /* ── Card language ──────────────────────────────────────────────────── */
  --apxc-card-bg:            linear-gradient(180deg, rgba(23, 26, 48, 0.88) 0%, rgba(14, 16, 32, 0.96) 100%);
  --apxc-card-border:        var(--r27-border, rgba(255, 255, 255, 0.09));
  --apxc-card-border-hover:  color-mix(in srgb, var(--apxc-accent) 38%, transparent);
  --apxc-card-radius:        var(--radius-md, 16px);
  --apxc-card-lift:          -5px;
  --apxc-card-shadow:        0 20px 52px rgba(0, 0, 0, 0.46);

  /* ── Typographic contrast (the reference's key typographic move):
        large headline, deliberately smaller, calmer supporting copy ───── */
  --apxc-headline-size:      clamp(44px, 6.1vw, 82px);
  --apxc-subline-size:       clamp(16px, 1.3vw, 19px);
  --apxc-badge-opacity:      0.72;

  /* ── Section rhythm ─────────────────────────────────────────────────── */
  --apxc-section-block:      110px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   1 · NAVIGATION — reference shows ONE balanced bar:
       logo left · links centred · CTA right · visible dark band + hairline
   ═══════════════════════════════════════════════════════════════════════════ */

/* The band is present from the first paint in the reference, rather than
   appearing only after scroll. `.r27-nav.scrolled` (higher specificity)
   still takes over on scroll, so the scroll behaviour is unchanged. */
.r27-nav {
  background: linear-gradient(180deg, var(--apxc-nav-tint-top) 0%, var(--apxc-nav-tint-bottom) 100%);
  border-bottom: 1px solid var(--apxc-nav-hairline);
}

.r27-nav.scrolled {
  border-bottom-color: var(--apxc-nav-hairline);
}

@media (min-width: 1101px) {
  /* Centre the link cluster in the bar. Absolute positioning is safe here:
     `.r27-nav` is position:fixed, so it is already the containing block, and
     the mobile breakpoint below 1101px keeps the original flow layout. */
  .r27-nav-links {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    flex-wrap: nowrap;
    gap: 22px;
  }
  .r27-nav-link {
    font-size: 13.5px;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  .r27-nav-cta {
    margin-left: auto;
    white-space: nowrap;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2 · HERO — reference proportions:
       text column slightly wider than today · wheel halo · calmer support copy
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1101px) {
  .r27-hero-inner {
    gap: 40px;
  }

  /* 42% → 46%: the reference gives the narrative slightly more room and the
     wheel a firmer, squarer presence beside it. */
  .r27-hero-text {
    flex: 0 0 46%;
    max-width: 46%;
  }

  .r27-hero {
    padding-top: 96px;
  }
}

/* Headline / subline contrast — the reference's dominant typographic signal. */
.r27-hero-headline {
  font-size: var(--apxc-headline-size);
  letter-spacing: -0.032em;
  margin-bottom: 16px;
}

.r27-hero-subline {
  font-size: var(--apxc-subline-size);
  line-height: 1.6;
  margin-bottom: 26px;
  max-width: 560px;
}

.r27-hero-ctas {
  gap: 14px;
  margin-bottom: 26px;
}

/* The four credibility chips and six capability chips are FUNCTIONAL content
   (they must stay), but in the reference the hero does not compete with
   itself: the chips read as quiet supporting detail beneath the CTA pair. */
.r27-hero-credibility,
.r27-hero-capabilities {
  opacity: var(--apxc-badge-opacity);
}

.r27-hero-credibility {
  margin-bottom: 14px;
}

.r27-hero-cred-badge,
.r27-cap-badge {
  font-size: 11.5px;
}

/* ── Intelligence Wheel halo ──────────────────────────────────────────────
   Purely decorative light BEHIND the wheel, matching the reference's glow.
   `pointer-events:none` keeps every segment of the interactive wheel
   clickable — the wheel's own controller is untouched. */
@media (min-width: 1101px) {
  .r27-hero-visual {
    position: relative;
    isolation: isolate;
  }

  .r27-hero-visual::before {
    content: '';
    position: absolute;
    inset: -10%;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    background:
      radial-gradient(circle at 50% 48%, var(--apxc-halo-core) 0%,
                      var(--apxc-halo-mid) 34%,
                      var(--apxc-halo-outer) 52%,
                      transparent 72%);
    filter: blur(var(--apxc-halo-blur));
  }

  .r27-hero-visual > * {
    position: relative;
    z-index: 1;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   3 · FIVE ASSESSMENT CARDS — reference card language:
       deep panel · hairline border · coloured icon chip · hover lift
   ═══════════════════════════════════════════════════════════════════════════ */

.r27-marketplace-grid {
  gap: 18px;
}

.r27-marketplace-card {
  background: var(--apxc-card-bg);
  border: 1px solid var(--apxc-card-border);
  border-radius: var(--apxc-card-radius);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  will-change: transform;
}

.r27-marketplace-card:hover {
  transform: translateY(var(--apxc-card-lift));
  border-color: var(--apxc-card-border-hover);
  box-shadow: var(--apxc-card-shadow);
}

/* Icon chip — the reference marks each discipline with a tinted chip in the
   discipline's own colour (TPM violet · Lean green · 6σ blue · 5S amber ·
   RCM red). `--mp-colour` is already set per card by the partial. */
.r27-mp-icon-wrap {
  background: color-mix(in srgb, var(--mp-colour, #818CF8) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--mp-colour, #818CF8) 34%, transparent);
  border-radius: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.r27-marketplace-card:hover .r27-mp-icon-wrap {
  transform: scale(1.06);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mp-colour, #818CF8) 10%, transparent);
}

@media (min-width: 1101px) {
  /* Five equal columns, tighter gutters — the reference row reads as one
     band rather than five separate posters. */
  .r27-marketplace-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .r27-marketplace-card {
    padding: 22px 18px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   4 · SECTION RHYTHM — the reference stacks its acts closer together, so the
       page reads as one continuous executive narrative rather than a
       sequence of separate screens. Vertical only; horizontal padding is
       left exactly as the protected layout defines it.
   ═══════════════════════════════════════════════════════════════════════════ */

.r27-section {
  padding-top: var(--apxc-section-block);
  padding-bottom: var(--apxc-section-block);
}

/* ═══════════════════════════════════════════════════════════════════════════
   5 · ULTRAWIDE — the reference is a wide-desktop composition: keep the
       narrative column from stretching into unreadable line lengths while
       letting the wheel and card band use the extra width.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1800px) {
  .r27-hero-inner {
    gap: 64px;
  }
  .r27-hero-subline {
    max-width: 620px;
  }
  .r27-marketplace-grid {
    gap: 22px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   6 · MOTION SAFETY — all motion above is a short transform/shadow on hover
       (≤200ms). Honour the user's reduced-motion preference explicitly.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .r27-marketplace-card,
  .r27-marketplace-card:hover,
  .r27-mp-icon-wrap,
  .r27-marketplace-card:hover .r27-mp-icon-wrap {
    transition: none;
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   7 · LEGACY SURFACE CONVERGENCE — R27 charcoal → approved reference navy
   ---------------------------------------------------------------------------

   MEASURED DELTA (homepage visual convergence ticket, live render + sampled
   references). The §1–§6 rules above converge nav, hero proportions, wheel
   halo, the five assessment cards and rhythm — but every R27 LEGACY section
   (hero ground, connect, architecture, appexi, capability-availability,
   legacy card fills, ribbons) still consumes the 19 layer's :root charcoal
   tokens. Sampled from the approved references:

     mockup base  #070913 / #0D1029 · raised #1F2651 · hairlines #3E3F56
     PAGE7 base   #070B1A / #0D1228 · raised #1F2651 · text #C2C5D9
     served legacy: --r27-surface #07070D, --r27-surface-alt #0C0C14,
                    --r27-surface-card #111119, hero charcoal gradient,
                    borders rgba(255,255,255,0.06)

   This block re-points the legacy token VALUES to the apex_reference
   homepage palette (--apx-home-*, themes/tokens/apex_reference.css) — the
   same single source the enterprise layer already consumes — so the whole
   page shares ONE navy executive language. Token VALUES only: no selector,
   rule or component below token level changes. Scoped to `.r27-page`, so no
   page outside the homepage is affected. Deleting this block restores the
   R27 charcoal surfaces with zero residue. */
.r27-page {
  --r27-surface:        var(--apx-home-bg, #0a0d1d);
  --r27-surface-alt:    var(--apx-home-bg-2, #0d1024);
  --r27-surface-card:   var(--apx-home-surface, #11142a);
  --r27-surface-glass:  color-mix(in srgb, var(--apx-home-surface, #11142a) 72%, transparent);
  --r27-glass-bg:       color-mix(in srgb, var(--apx-home-surface, #11142a) 60%, transparent);
  --r27-gradient-hero:  linear-gradient(135deg,
                          var(--apx-home-bg, #0a0d1d) 0%,
                          #12183A 50%,
                          var(--apx-home-bg, #0a0d1d) 100%);
  /* Slate-tinted hairlines — the reference's borders read as #3E3F56, not
     pure white; 16% keeps them visible but quiet on the navy ground. */
  --r27-border:         rgba(140, 146, 190, 0.16);
  --r27-border-light:   rgba(140, 146, 190, 0.24);
  --r27-glass-border:   rgba(140, 146, 190, 0.20);
  /* Reference body copy sits closer to #C2C5D1 than the old #9C9CB0. */
  --r27-text-secondary: #A9ACC2;
}
/* ═══════════════════════════════════════════════════════════════════════════
   26_document_light.css — DOCUMENT LIGHT REPORT FAMILY
   ═══════════════════════════════════════════════════════════════════════════

   AUTHORITY
   ---------
   Reference family 1 of 2 in the approved reference set (see
   requirements/visual-reference-implementation-decisions-2026-10-05.md):

       A1–A6  presentation/report structure blueprints  (light document)
       B3     investor pack                             (light document)
       G5     guidance/reporting authority              (light document)

   Observed characteristics (requirements/APPEX360-visual-reference-inventory):
     near-white ground, navy header bands and left rails, bordered content
     panels, legend bars, 3×3 card grid matrices, thin rules, generous white
     space, steel-blue accents, amber brand mark.

   ARCHITECTURE (one authoritative token system — no competing values)
   -------------------------------------------------------------------
   Every value below resolves from `--apx-doc-*` tokens defined in the active
   theme token file (themes/tokens/apex_reference.css). Fallbacks exist ONLY
   so a document still renders if a non-reference theme is active — they
   repeat the reference values, they do not introduce new ones.

   CONSUMPTION
   -----------
   Add `apx-doc` to the outermost container of a report/results/PDF surface.
   Optionally use the structural classes below (apx-doc-panel, apx-doc-header,
   apx-doc-legend, apx-doc-grid3, apx-doc-score, apx-doc-table, apx-doc-rule,
   apx-doc-footer, apx-doc-brand). A scoped convergence layer then maps the
   legacy dark utilities used by pre-existing report views onto the light
   document family, so those views converge without a rewrite.

   REVERSIBLE: removing the require line in design_system.css + this file
   reverts every document surface to its previous appearance.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Token surface (local aliases → theme tokens) ───────────────────────── */
.apx-doc {
  --doc-ground:   var(--apx-doc-ground,   #F7F9FA);
  --doc-panel:    var(--apx-doc-panel,    #FFFFFF);
  --doc-panel-2:  var(--apx-doc-panel-alt,#EEF2F7);
  --doc-border:   var(--apx-doc-border,   #D7DEE6);
  --doc-border-s: var(--apx-doc-border-strong, #B9C4D0);
  --doc-ink:      var(--apx-doc-ink,      #16283C);
  --doc-ink-soft: var(--apx-doc-ink-soft, #3D4F63);
  --doc-ink-mute: var(--apx-doc-ink-muted,#5A6B7E);
  --doc-navy:     var(--apx-doc-navy,     #122E4A);
  /* Structural aliases consumed by the executive_reports / boardroom blocks
     below — previously referenced but never defined (resolved to nothing). */
  --doc-heading:  var(--apx-doc-navy,     #122E4A);
  --doc-band:     var(--apx-doc-panel-alt,#EEF2F7);
  --doc-steel:    var(--apx-doc-steel,    #568BB5);
  /* Text-safe accents: the steel/violet/amber families are used both as
     graphics (bars, swatches — 3:1) and as text (links, labels — 4.5:1).
     The *-text tokens are the WCAG-passing text members of the same family. */
  --doc-steel-text:  var(--apx-doc-steel-text,  #3D6B94);
  --doc-violet-text: var(--apx-doc-violet-text, #5E5688);
  --doc-amber-text:  var(--apx-doc-amber-text,  #A05A26);
  --doc-violet:   var(--apx-doc-violet,   #776FA3);
  --doc-amber:    var(--apx-doc-amber,    #CD814A);
  --doc-grid:     var(--apx-doc-grid,     #E3E9F0);
  --doc-axis:     var(--apx-doc-axis,     #5A6B7E);
  --doc-shadow:   var(--apx-doc-shadow,   0 6px 18px rgba(18,46,74,0.10));
  --doc-ok:       var(--apx-doc-success,  #2E7D5B);
  --doc-warn:     var(--apx-doc-warning,  #9A5B26);
  --doc-bad:      var(--apx-doc-danger,   #B0483F);
  --doc-info:     var(--apx-doc-info,     #3E6E96);
  --doc-rule:     1px solid var(--doc-border);
  --doc-radius:   6px;

  background: var(--doc-ground);
  color: var(--doc-ink);
}

/* ── Ground & typography ────────────────────────────────────────────────── */
.apx-doc h1, .apx-doc h2, .apx-doc h3, .apx-doc h4, .apx-doc h5, .apx-doc h6 {
  color: var(--doc-navy);
  letter-spacing: -0.01em;
}
.apx-doc p, .apx-doc li { color: var(--doc-ink-soft); }
.apx-doc a { color: var(--doc-steel-text); }
.apx-doc small, .apx-doc .caption { color: var(--doc-ink-mute); }

/* ── Brand treatment (H1 logo: amber glyph on the product mark) ─────────── */
.apx-doc-brand {
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--doc-navy);
}
.apx-doc-brand .apx-doc-brand-x { color: var(--doc-amber); }

/* ── Header band / rail (A1, A2, A3, A5, B3) ────────────────────────────── */
.apx-doc-header {
  background: var(--doc-navy);
  color: #FFFFFF;
  border-radius: var(--doc-radius) var(--doc-radius) 0 0;
  padding: 18px 24px;
}
.apx-doc-header h1, .apx-doc-header h2, .apx-doc-header h3 { color: #FFFFFF; }
.apx-doc-header p, .apx-doc-header small { color: rgba(255,255,255,0.72); }
.apx-doc-header .apx-doc-brand { color: #FFFFFF; }
.apx-doc-header .apx-doc-brand .apx-doc-brand-x { color: var(--doc-amber); }
.apx-doc-header-meta {
  display: flex; flex-wrap: wrap; gap: 18px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.66);
}

/* Left rail panel (A1, A4, B3) */
.apx-doc-rail {
  background: var(--doc-panel-2);
  border: var(--doc-rule);
  border-radius: var(--doc-radius);
  padding: 16px 18px;
}

/* ── Panels & cards (bordered content blocks) ───────────────────────────── */
.apx-doc-panel {
  background: var(--doc-panel);
  border: var(--doc-rule);
  border-radius: var(--doc-radius);
  padding: 20px 22px;
  box-shadow: var(--doc-shadow);
  page-break-inside: avoid;
}
.apx-doc-panel--flat { box-shadow: none; }
.apx-doc-panel--band { background: var(--doc-panel-2); box-shadow: none; }
.apx-doc-panel-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--doc-ink-mute);
  padding-bottom: 8px; margin-bottom: 12px; border-bottom: var(--doc-rule);
}

/* ── Thin rules ─────────────────────────────────────────────────────────── */
.apx-doc-rule { border: 0; border-top: var(--doc-rule); margin: 18px 0; }
.apx-doc-rule--strong { border-top-color: var(--doc-border-s); }

/* ── Legend bar (A6, A3) ────────────────────────────────────────────────── */
.apx-doc-legend {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  padding: 10px 14px;
  background: var(--doc-panel-2);
  border: var(--doc-rule);
  border-radius: var(--doc-radius);
  font-size: 11px; color: var(--doc-ink-soft);
}
.apx-doc-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.apx-doc-legend-swatch {
  width: 10px; height: 10px; border-radius: 2px;
  background: var(--doc-steel); flex: 0 0 auto;
}
.apx-doc-legend-swatch--violet { background: var(--doc-violet); }
.apx-doc-legend-swatch--amber  { background: var(--doc-amber); }
.apx-doc-legend-swatch--navy   { background: var(--doc-navy); }
.apx-doc-legend-swatch--ok     { background: var(--doc-ok); }
.apx-doc-legend-swatch--warn   { background: var(--doc-warn); }
.apx-doc-legend-swatch--bad    { background: var(--doc-bad); }

/* ── Score / maturity presentation ──────────────────────────────────────── */
.apx-doc-score {
  font-size: 40px; line-height: 1; font-weight: 800; color: var(--doc-navy);
  letter-spacing: -0.02em;
}
.apx-doc-score-unit { font-size: 15px; font-weight: 600; color: var(--doc-ink-mute); }
.apx-doc-score-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--doc-ink-mute); margin-top: 6px;
}
.apx-doc-maturity {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  border: 1px solid var(--doc-border-s);
  background: var(--doc-panel-2); color: var(--doc-ink-soft);
}
.apx-doc-maturity--ok   { background: rgba(46,125,91,0.10);  border-color: rgba(46,125,91,0.35);  color: var(--doc-ok); }
.apx-doc-maturity--warn { background: rgba(154,91,38,0.10);  border-color: rgba(154,91,38,0.35);  color: var(--doc-warn); }
.apx-doc-maturity--bad  { background: rgba(176,72,63,0.10);  border-color: rgba(176,72,63,0.35);  color: var(--doc-bad); }

/* Horizontal score bar (D8/D9 gauge motif, light form) */
.apx-doc-bar {
  height: 8px; border-radius: 999px; background: var(--doc-panel-2);
  border: 1px solid var(--doc-border); overflow: hidden;
}
.apx-doc-bar > span {
  display: block; height: 100%; background: var(--doc-steel); border-radius: 999px;
}
.apx-doc-bar--violet > span { background: var(--doc-violet); }
.apx-doc-bar--amber  > span { background: var(--doc-amber); }
.apx-doc-bar--ok     > span { background: var(--doc-ok); }
.apx-doc-bar--warn   > span { background: var(--doc-warn); }
.apx-doc-bar--bad    > span { background: var(--doc-bad); }

/* ── KPI tiles ──────────────────────────────────────────────────────────── */
.apx-doc-kpi {
  background: var(--doc-panel); border: var(--doc-rule);
  border-radius: var(--doc-radius); padding: 14px 16px;
}
.apx-doc-kpi-value { font-size: 24px; font-weight: 800; color: var(--doc-navy); line-height: 1.1; }
.apx-doc-kpi-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--doc-ink-mute); margin-top: 4px;
}

/* ── 3×3 / matrix grid (A5) ─────────────────────────────────────────────── */
.apx-doc-grid3 {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--doc-border);
  border: var(--doc-rule); border-radius: var(--doc-radius); overflow: hidden;
}
.apx-doc-grid3 > * {
  background: var(--doc-panel); padding: 14px 16px; min-height: 76px;
}
.apx-doc-grid3 > .is-band { background: var(--doc-panel-2); }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.apx-doc-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.apx-doc-table thead th {
  background: var(--doc-navy); color: #FFFFFF;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; text-align: left; padding: 9px 12px;
}
.apx-doc-table tbody td {
  padding: 9px 12px; border-bottom: var(--doc-rule); color: var(--doc-ink-soft);
}
.apx-doc-table tbody tr:nth-child(even) td { background: var(--doc-panel-2); }
.apx-doc-table tbody tr.is-highlight td { background: rgba(86,139,181,0.10); color: var(--doc-ink); }

/* ── Footer strip ───────────────────────────────────────────────────────── */
.apx-doc-footer {
  border-top: var(--doc-rule); margin-top: 22px; padding-top: 10px;
  font-size: 10px; color: var(--doc-ink-mute);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}

/* ── Chart surface on light ground ──────────────────────────────────────── */
.apx-doc canvas { max-width: 100%; }
.apx-doc .apx-doc-chart {
  background: var(--doc-panel); border: var(--doc-rule);
  border-radius: var(--doc-radius); padding: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONVERGENCE LAYER — legacy dark utilities → document light family
   Scoped strictly under .apx-doc. Maps the dark-surface vocabulary used by
   pre-existing report views so they converge without a rewrite. Values are
   doc tokens only; no new colours.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Backgrounds: dark greys → panels / bands */
.apx-doc .bg-gray-900, .apx-doc .bg-gray-950, .apx-doc .bg-slate-900,
.apx-doc .bg-gray-800, .apx-doc .bg-gray-800\/90, .apx-doc .bg-gray-800\/80,
.apx-doc .bg-gray-800\/70, .apx-doc .bg-gray-800\/60, .apx-doc .bg-gray-800\/50,
.apx-doc .bg-gray-800\/40, .apx-doc .bg-gray-800\/30,
.apx-doc .bg-gray-900\/60, .apx-doc .bg-gray-900\/50, .apx-doc .bg-gray-900\/40,
.apx-doc .bg-slate-800, .apx-doc .bg-slate-800\/50, .apx-doc .bg-slate-800\/60,
.apx-doc .bg-black { background-color: var(--doc-panel); }

.apx-doc .bg-gray-700, .apx-doc .bg-gray-700\/60, .apx-doc .bg-gray-700\/50,
.apx-doc .bg-gray-700\/40, .apx-doc .bg-gray-700\/30, .apx-doc .bg-gray-700\/20,
.apx-doc .bg-gray-600, .apx-doc .bg-gray-600\/50, .apx-doc .bg-gray-600\/40,
.apx-doc .bg-gray-600\/30, .apx-doc .bg-gray-600\/20,
.apx-doc .bg-slate-700, .apx-doc .bg-slate-700\/50,
.apx-doc .bg-gray-100, .apx-doc .bg-gray-50 { background-color: var(--doc-panel-2); }
.apx-doc .bg-white { background-color: var(--doc-panel); }

/* Neutralise dark decorative gradient banners */
.apx-doc [class*="from-gray-9"], .apx-doc [class*="from-slate-9"],
.apx-doc [class*="from-indigo-9"], .apx-doc [class*="from-emerald-9"],
.apx-doc [class*="via-gray-9"], .apx-doc [class*="to-gray-9"],
.apx-doc [class*="to-emerald-9"], .apx-doc [class*="to-slate-9"] {
  background-image: none;
  background-color: var(--doc-panel);
}

/* Text: light-on-dark → document ink */
.apx-doc .text-white, .apx-doc .text-white\/90, .apx-doc .text-white\/80,
.apx-doc .text-white\/70, .apx-doc .text-gray-100, .apx-doc .text-gray-200,
.apx-doc .text-slate-100, .apx-doc .text-slate-200 { color: var(--doc-ink); }

.apx-doc .text-gray-300, .apx-doc .text-slate-300,
.apx-doc .text-gray-400, .apx-doc .text-slate-400 { color: var(--doc-ink-soft); }

.apx-doc .text-gray-500, .apx-doc .text-gray-600,
.apx-doc .text-slate-500, .apx-doc .text-slate-600 { color: var(--doc-ink-mute); }

/* Accent text: indigo/violet app accent → document steel / violet */
.apx-doc .text-indigo-300, .apx-doc .text-indigo-400,
.apx-doc .text-indigo-500, .apx-doc .text-violet-300,
.apx-doc .text-violet-400 { color: var(--doc-steel); }

/* Status text */
.apx-doc .text-emerald-300, .apx-doc .text-emerald-400,
.apx-doc .text-green-300, .apx-doc .text-green-400 { color: var(--doc-ok); }
.apx-doc .text-amber-300, .apx-doc .text-amber-400, .apx-doc .text-amber-500,
.apx-doc .text-yellow-300, .apx-doc .text-yellow-400 { color: var(--doc-warn); }
/* amber-600/700 as body text (e.g. report confidence line) → doc-warn, AA on light */
.apx-doc .text-amber-600, .apx-doc .text-amber-700 { color: var(--doc-warn); }
.apx-doc .text-red-300, .apx-doc .text-red-400, .apx-doc .text-rose-300,
.apx-doc .text-rose-400 { color: var(--doc-bad); }
.apx-doc .text-cyan-300, .apx-doc .text-cyan-400,
.apx-doc .text-sky-300, .apx-doc .text-sky-400 { color: var(--doc-info); }

/* Borders */
.apx-doc .border-gray-700, .apx-doc .border-gray-700\/50, .apx-doc .border-gray-700\/40,
.apx-doc .border-gray-700\/30, .apx-doc .border-gray-800, .apx-doc .border-gray-800\/50,
.apx-doc .border-gray-600, .apx-doc .border-gray-600\/50,
.apx-doc .border-slate-700, .apx-doc .border-slate-700\/50,
.apx-doc .border-indigo-800\/30, .apx-doc .border-indigo-700\/25,
.apx-doc .border-indigo-600\/25, .apx-doc .border-white\/10, .apx-doc .border-white\/5 {
  border-color: var(--doc-border);
}
.apx-doc .divide-gray-700 > :not([hidden]) ~ :not([hidden]),
.apx-doc .divide-gray-800 > :not([hidden]) ~ :not([hidden]) { border-color: var(--doc-border); }

/* Tinted chips used in the dark views → document tints */
.apx-doc .bg-indigo-600\/15, .apx-doc .bg-indigo-500\/10, .apx-doc .bg-indigo-500\/15,
.apx-doc .bg-violet-500\/10, .apx-doc .bg-violet-600\/15 { background-color: rgba(86,139,181,0.10); }
.apx-doc .bg-emerald-500\/10, .apx-doc .bg-emerald-600\/15,
.apx-doc .bg-green-500\/10, .apx-doc .bg-green-600\/15 { background-color: rgba(46,125,91,0.10); }
.apx-doc .bg-amber-500\/10, .apx-doc .bg-amber-600\/15,
.apx-doc .bg-yellow-500\/10 { background-color: rgba(154,91,38,0.10); }
.apx-doc .bg-red-500\/10, .apx-doc .bg-rose-500\/10,
.apx-doc .bg-red-600\/15 { background-color: rgba(176,72,63,0.10); }

/* Inputs on the light ground */
.apx-doc .input, .apx-doc .select, .apx-doc .textarea, .apx-doc select, .apx-doc input[type="text"] {
  background: var(--doc-panel) !important;
  border: 1px solid var(--doc-border) !important;
  color: var(--doc-ink) !important;
}
.apx-doc .input::placeholder { color: var(--doc-ink-mute); }

/* ═══════════════════════════════════════════════════════════════════════════
   INLINE-STYLE CONVERGENCE — dark-ground inline styles → document light
   Pre-existing report views carry hundreds of inline styles written for the
   dark executive ground (rgba(255,255,255,0.02…) tints, white-alpha text,
   indigo accents, dark status hexes). An inline style without !important is
   overridden by an !important rule, so a single scoped block converges every
   report surface at once — no per-view literals, no per-view colours.
   Only substrings identifying the dark-ground form are matched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* White-tint fills → document bands */
.apx-doc [style*="background: rgba(255,255,255,0.0"],
.apx-doc [style*="background:rgba(255,255,255,0.0"],
.apx-doc [style*="background: rgba(255,255,255,0.1"],
.apx-doc [style*="background:rgba(255,255,255,0.1"],
.apx-doc [style*="background: rgba(255,255,255,0.2"],
.apx-doc [style*="background:rgba(255,255,255,0.2"],
.apx-doc [style*="background: rgba(17, 24, 39"],
.apx-doc [style*="background:#111827"],
.apx-doc [style*="background: #111827"],
.apx-doc [style*="background:#0f172a"],
.apx-doc [style*="background: #0f172a"],
.apx-doc [style*="background:#030712"],
.apx-doc [style*="background: #030712"],
.apx-doc [style*="background:#0b1120"],
.apx-doc [style*="background: #0b1120"] { background: var(--doc-panel-2) !important; }

.apx-doc [style*="background: rgba(255,255,255,0.3"],
.apx-doc [style*="background:rgba(255,255,255,0.3"],
.apx-doc [style*="background: rgba(255,255,255,0.4"],
.apx-doc [style*="background:rgba(255,255,255,0.4"],
.apx-doc [style*="background: rgba(255,255,255,0.5"],
.apx-doc [style*="background:rgba(255,255,255,0.5"],
.apx-doc [style*="background: rgba(255,255,255,0.6"],
.apx-doc [style*="background:rgba(255,255,255,0.6"] { background: var(--doc-panel) !important; }

/* White-hairline borders → document borders */
.apx-doc [style*="border: 1px solid rgba(255,255,255,0.0"],
.apx-doc [style*="border:1px solid rgba(255,255,255,0.0"],
.apx-doc [style*="border-bottom: 1px solid rgba(255,255,255,0.0"],
.apx-doc [style*="border-bottom:1px solid rgba(255,255,255,0.0"],
.apx-doc [style*="border-top: 1px solid rgba(255,255,255,0.0"],
.apx-doc [style*="border-top:1px solid rgba(255,255,255,0.0"],
.apx-doc [style*="border-color: rgba(255,255,255,0.0"],
.apx-doc [style*="border-color:rgba(255,255,255,0.0"],
.apx-doc [style*="border-left: 1px solid rgba(255,255,255,0.0"],
.apx-doc [style*="border-right: 1px solid rgba(255,255,255,0.0"] { border-color: var(--doc-border) !important; }

/* Bright white-alpha text → document ink */
.apx-doc [style*="color: rgba(255,255,255,0.9"],
.apx-doc [style*="color:rgba(255,255,255,0.9"],
.apx-doc [style*="color: rgba(255,255,255,0.8"],
.apx-doc [style*="color:rgba(255,255,255,0.8"],
.apx-doc [style*="color: rgba(255,255,255,0.7"],
.apx-doc [style*="color:rgba(255,255,255,0.7"],
.apx-doc [style*="color:#fff"],
.apx-doc [style*="color: #fff"],
.apx-doc [style*="color:white"],
.apx-doc [style*="color: white"] { color: var(--doc-ink) !important; }

.apx-doc [style*="color: rgba(255,255,255,0.6"],
.apx-doc [style*="color:rgba(255,255,255,0.6"],
.apx-doc [style*="color: rgba(255,255,255,0.5"],
.apx-doc [style*="color:rgba(255,255,255,0.5"],
.apx-doc [style*="color: rgba(214,219,228"],
.apx-doc [style*="color:#cbd5e1"],
.apx-doc [style*="color: #cbd5e1"],
.apx-doc [style*="color:#e2e8f0"],
.apx-doc [style*="color: #e2e8f0"] { color: var(--doc-ink-soft) !important; }

.apx-doc [style*="color: rgba(255,255,255,0.4"],
.apx-doc [style*="color:rgba(255,255,255,0.4"],
.apx-doc [style*="color: rgba(255,255,255,0.3"],
.apx-doc [style*="color:rgba(255,255,255,0.3"],
.apx-doc [style*="color: rgba(255,255,255,0.2"],
.apx-doc [style*="color:rgba(255,255,255,0.2"],
.apx-doc [style*="color: rgba(255,255,255,0.1"],
.apx-doc [style*="color:rgba(255,255,255,0.1"],
.apx-doc [style*="color: rgba(255,255,255,0.0"],
.apx-doc [style*="color:#94a3b8"],
.apx-doc [style*="color: #94a3b8"],
.apx-doc [style*="color:#64748b"],
.apx-doc [style*="color: #64748b"],
.apx-doc [style*="color:#9ca3af"],
.apx-doc [style*="color: #9ca3af"],
.apx-doc [style*="color:#6b7280"],
.apx-doc [style*="color: #6b7280"] { color: var(--doc-ink-mute) !important; }

/* Dark-surface text greys → document ink */
.apx-doc [style*="color:#e5e7eb"],
.apx-doc [style*="color: #e5e7eb"],
.apx-doc [style*="color:#f3f4f6"],
.apx-doc [style*="color: #f3f4f6"],
.apx-doc [style*="color:#d1d5db"],
.apx-doc [style*="color: #d1d5db"] { color: var(--doc-ink) !important; }

/* Indigo app accent in inline styles → document steel */
.apx-doc [style*="#818cf8"] { color: var(--doc-steel) !important; }
.apx-doc [style*="#6366F1"],
.apx-doc [style*="#6366f1"] { color: var(--doc-violet-text) !important; }

/* Dark status hexes in inline styles → document status tones */
.apx-doc [style*="color:#34d399"], .apx-doc [style*="color: #34d399"] { color: var(--doc-ok) !important; }
.apx-doc [style*="color:#fbbf24"], .apx-doc [style*="color: #fbbf24"],
.apx-doc [style*="color:#f59e0b"], .apx-doc [style*="color: #f59e0b"] { color: var(--doc-warn) !important; }
.apx-doc [style*="color:#f87171"], .apx-doc [style*="color: #f87171"],
.apx-doc [style*="color:#ef4444"], .apx-doc [style*="color: #ef4444"] { color: var(--doc-bad) !important; }
.apx-doc [style*="color:#60a5fa"], .apx-doc [style*="color: #60a5fa"] { color: var(--doc-info) !important; }

/* Dark hairline borders in inline styles → document borders */
.apx-doc [style*="#374151"], .apx-doc [style*="#2a2a45"],
.apx-doc [style*="#4b5563"], .apx-doc [style*="#1f2937"] { border-color: var(--doc-border) !important; }

/* ── executive_reports/show.html.erb <style>-block structural colors ── */
.apx-doc .er-wrap { color: var(--doc-ink); }
.apx-doc .er-wrap h1, .apx-doc .er-wrap h2, .apx-doc .er-wrap h3 { color: var(--doc-heading); }
.apx-doc .er-header,
.apx-doc .er-nav,
.apx-doc .er-card,
.apx-doc .er-section { background: var(--doc-panel); border-color: var(--doc-border); box-shadow: var(--doc-shadow); }
.apx-doc .er-header-stat,
.apx-doc .er-nav-back,
.apx-doc .er-kpi-card,
.apx-doc .er-sw-card,
.apx-doc .er-cat-item,
.apx-doc .er-domain-item,
.apx-doc .er-fin-badge,
.apx-doc .er-explain-badge { background: var(--doc-panel-2); border-color: var(--doc-border); }
.apx-doc .er-card:hover { border-color: var(--doc-violet); box-shadow: var(--doc-shadow); }
.apx-doc .er-card-header { border-bottom-color: var(--doc-border); }
.apx-doc .er-card-header h2 { color: var(--doc-heading); }
.apx-doc .er-header-stat .value,
.apx-doc .er-kpi-card .kpi-score { color: var(--doc-heading); }
.apx-doc .er-header-stat .label,
.apx-doc .er-kpi-card .kpi-label,
.apx-doc .er-nav-breadcrumbs,
.apx-doc .er-nav-breadcrumbs a,
.apx-doc .er-nav-back,
.apx-doc .er-nav-quick a { color: var(--doc-ink-mute); }
.apx-doc .er-nav-back:hover,
.apx-doc .er-nav-quick a:hover { background: var(--doc-band); color: var(--doc-ink); }
.apx-doc .er-kpi-card .kpi-score-bar { background: var(--doc-band); }
.apx-doc .er-domain-list { border-color: var(--doc-border); }

/* ── boardroom_packs/report.html.erb historical pack ── */
body:has(.apx-doc .glass-card) { background: var(--doc-ground) !important; }
.apx-doc .glass-card,
.apx-doc .kpi-card { background: var(--doc-panel) !important; border-color: var(--doc-border) !important; }
.apx-doc .kpi-label { color: var(--doc-ink-mute); }
.apx-doc .kpi-value { color: var(--doc-heading); }
.apx-doc .section-title { color: var(--doc-heading); }
.apx-doc .badge-pill { background: var(--doc-band); color: var(--doc-ink-mute); border-color: var(--doc-border); }
.apx-doc .heat-bar { background: var(--doc-band); }

/* ═══════════════════════════════════════════════════════════════════════════
   PRINT / PDF PARITY — the document family is print-first
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  .apx-doc { background: #FFFFFF; }
  .apx-doc-panel, .apx-doc-kpi, .apx-doc-table, .apx-doc-grid3 {
    box-shadow: none; break-inside: avoid; page-break-inside: avoid;
  }
  .apx-doc-header { break-after: avoid; page-break-after: avoid; }
  .apx-doc a { text-decoration: none; color: var(--doc-ink); }
}
/* APPEX360 Executive Dark component vocabulary
   Authority: requirements/visual-reference-implementation-decisions-2026-10-05.md
   Scope: opt-in .apx-exec workspaces only. Never targets public/R27 homepage.
   All colour values resolve from the active theme token layer. */

.apx-exec {
  background: var(--surface-page);
  color: var(--text-primary);
  min-width: 0;
}

/* Header band */
.apx-exec-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: var(--surface-deep);
  border-bottom: 1px solid var(--surface-border);
  color: var(--text-primary);
}
.apx-exec-band h1, .apx-exec-band h2, .apx-exec-band h3 { color: var(--heading); }
.apx-exec-band p, .apx-exec-band small { color: var(--text-secondary); }

/* Left rail / sidebar */
.apx-exec-rail {
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  border-right: 1px solid var(--sidebar-border);
  min-width: 0;
}
.apx-exec-rail a { color: var(--sidebar-text); }
.apx-exec-rail a:hover, .apx-exec-rail a[aria-current="page"] {
  color: var(--text-primary);
  background: var(--sidebar-active-bg);
}

/* Vertical panel dividers */
.apx-exec-divider {
  border: 0;
  border-left: 1px solid var(--surface-border);
  align-self: stretch;
}
.apx-exec-divider--horizontal {
  border: 0;
  border-top: 1px solid var(--surface-border);
  width: 100%;
}

/* Panel and repeated card rows */
.apx-exec-panel {
  min-width: 0;
  background: var(--surface-raised);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  padding: var(--apx-card-pad, 24px);
}
.apx-exec-card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--apx-panel-gap, 24px);
}
.apx-exec-card {
  min-width: 0;
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.apx-exec-card:hover {
  background: var(--surface-card-hover);
  border-color: var(--surface-border-hover);
}

/* Framed diagram and legend */
.apx-exec-figure {
  margin: 0;
  padding: 1.25rem;
  background: var(--surface-inset);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  overflow: auto;
}
.apx-exec-figure figcaption {
  margin-top: 0.75rem;
  color: var(--text-muted);
  font-size: 0.875rem;
}
.apx-exec-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding: 0.75rem 1rem;
  background: var(--surface-inset);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.8125rem;
}
.apx-exec-legend-item { display: inline-flex; align-items: center; gap: 0.5rem; }
.apx-exec-legend-swatch {
  width: 0.625rem;
  height: 0.625rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent-steel, var(--accent));
}
.apx-exec-legend-swatch--accent { background: var(--accent); }
.apx-exec-legend-swatch--brand { background: var(--accent-brand, var(--accent)); }

/* Horizontal bar / gauge / progress strip */
.apx-exec-meter {
  height: 0.5rem;
  overflow: hidden;
  background: var(--surface-inset);
  border: 1px solid var(--surface-border);
  border-radius: 999px;
}
.apx-exec-meter > span {
  display: block;
  width: var(--apx-meter-value, 0%);
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
}
.apx-exec-meter--brand > span { background: var(--accent-brand, var(--accent)); }
.apx-exec-meter--steel > span { background: var(--accent-steel, var(--accent)); }

/* Data table with restrained highlighted row */
.apx-exec-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--text-primary);
}
.apx-exec-table th {
  padding: 0.75rem 1rem;
  background: var(--surface-inset);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--surface-border);
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.apx-exec-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--surface-border);
}
.apx-exec-table tr[aria-selected="true"] td,
.apx-exec-table tr.is-highlight td { background: var(--accent-soft); }

/* Bright composer / input */
.apx-exec-composer {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--surface-raised);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-lg);
}
.apx-exec-composer:focus-within {
  border-color: var(--input-focus);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.apx-exec-composer textarea,
.apx-exec-composer input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--text-primary);
  box-shadow: none;
}
.apx-exec-composer textarea:focus,
.apx-exec-composer input:focus { outline: 0; box-shadow: none; }

/* CTA panels and footer/status strip */
.apx-exec-cta {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--surface-deep);
  border: 1px solid var(--surface-border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
}
.apx-exec-cta--brand { border-left-color: var(--accent-brand, var(--accent)); }
.apx-exec-cta h2, .apx-exec-cta h3 { color: var(--heading); }
.apx-exec-cta p { color: var(--text-secondary); }
.apx-exec-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  background: var(--surface-deepest, var(--surface-inset));
  border-top: 1px solid var(--surface-border);
  color: var(--text-muted);
  font-size: 0.8125rem;
}

@media (max-width: 640px) {
  .apx-exec-band { align-items: flex-start; flex-direction: column; }
  .apx-exec-divider { border-left: 0; border-top: 1px solid var(--surface-border); width: 100%; }
  .apx-exec-table th, .apx-exec-table td { padding: 0.625rem; }
}
/* ══════════════════════════════════════════════════════════════
   APEX360 Enterprise Design System
   Import order is deterministic via numbered prefixes.
   
   Usage: stylesheet_link_tag "design_system/design_system"
   
   Uses Sprockets //= require directives (NOT CSS @import) so
   all files are compiled into a SINGLE digest-bustered asset.
   CSS @import would trigger separate browser requests for each
   file that fail in production because Sprockets only serves
   digest-fingerprinted filenames.
   ══════════════════════════════════════════════════════════════ */





















/* ────────────────────────────────────────────────────────────────
   REVERSIBLE EXPERIMENT — remove this line + the file below to
   revert the explore-mockup homepage layer entirely.
   Scoped entirely to .apx-* / #section anchors. No existing rule
   in any earlier numbered file is modified.
   ──────────────────────────────────────────────────────────────── */


/* ────────────────────────────────────────────────────────────────
   ENTERPRISE COMMERCIAL LAYER (Release 45) — REVERSIBLE ADDITION
   Remove this line + the file below to revert the enterprise
   homepage layer entirely. Every rule in it is namespaced
   `.apx-ent*`; no existing rule in any earlier numbered file is
   modified, and nothing in it targets a pre-existing selector.
   Motion is CSS-only and fully disabled under prefers-reduced-motion.
   ──────────────────────────────────────────────────────────────── */


/* ────────────────────────────────────────────────────────────────
   HOMEPAGE MOCKUP CONVERGENCE LAYER — REVERSIBLE ADDITION
   Converges the rendered homepage toward the approved reference
   app/assets/images/APPEX360_Executive_Intelligence_Homepage_Mockup.png
   via `--apxc-*` design tokens → component styles. Appearance only:
   no ERB/section/order change, no existing rule in any earlier
   numbered file is modified. Remove this line + the file below to
   revert the layer entirely. See the file header for details.
   ──────────────────────────────────────────────────────────────── */


/* ────────────────────────────────────────────────────────────────────────────
   DOCUMENT LIGHT REPORT FAMILY — REVERSIBLE ADDITION
   Consumes `--apx-doc-*` tokens from the active theme token file and applies
   the light document reference family (A1–A6 / B3 / G5) to report, results
   and PDF surfaces via the `apx-doc` wrapper. Scoped entirely under .apx-doc;
   no existing rule in any earlier numbered file is modified. Remove this
   line + the file to revert.
   ──────────────────────────────────────────────────────────────────────────── */


/* ────────────────────────────────────────────────────────────────────────────
   EXECUTIVE DARK COMPONENT VOCABULARY — REVERSIBLE ADDITION
   Reference family 2 of 2 (decisions §3): the executive dark family as opt-in
   `apx-exec-*` component classes for shell / workspace / APPEXi surfaces.
   Consumes semantic theme tokens only; never targets public or R27 homepage
   selectors. Remove this line + the file to revert.
   ──────────────────────────────────────────────────────────────────────────── */