/* ══════════════════════════════════════════════════════════════
   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 {
  /* Nav items jump to these sections; keep the heading clear of any
     fixed/sticky chrome instead of landing with it tucked under. */
  scroll-margin-top: 24px;
  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 {
  /* 18px — the card title was 15px, which read as a label rather than the
     name of a product. Long names wrap naturally (no clamp, no ellipsis). */
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: #ffffff;
  margin: 0 0 8px;
}

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

.cs-assess-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 11.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: 6px;
  font-size: 12.5px;
  color: var(--cs-text-muted, #94a3b8);
  margin-bottom: 14px;
}

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

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

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

.cs-assess-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 9px;
  font-size: 15.5px;
  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: 11.5px;
  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;
}

/* Hover-pause is a courtesy, never a requirement. It applies only on devices
   with a real pointer, and the browser resumes the instant the pointer leaves.
   Touch screens never match this, so a tap can never leave the strip stuck. */
@media (hover: hover) and (pointer: fine) {
  .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;
}

/* ── Verified brand mark — authentic artwork replaces the category glyph
   inside the same 44px tile, so a logo tile and a category tile keep one
   rhythm in the marquee. Fixed height with `width: auto` preserves each
   mark's true aspect ratio (never squashed to a square); `max-width` and
   `object-fit: contain` keep an unusually wide mark inside the tile
   without cropping it. Marks are single-colour SVGs bundled locally —
   no network request, no icon-font dependency, no layout shift. ────── */
.cs-connect-logo {
  display: block;
  height: 24px;
  width: auto;
  /* Wide enough that a 1.38:1 logomark is never letterboxed inside the box
     (the MEX mark wants 33px at this height; the tile is 44px, so it still
     keeps clear space). `object-fit: contain` stays as the final guard so a
     pathological viewBox can never crop or squash a mark. */
  max-width: 36px;
  object-fit: contain;
}

/* ── 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); }
}

/* ══════════════════════════════════════════════════════════════════
   MULTI-ROW ECOSYSTEM STRIP (2026-10-26)
   Three independent marquees — CMMS & EAM, ERP, industrial & data —
   so a larger inventory keeps every mark legible instead of shrinking
   chips into unreadable specks. Each row owns its own track, so the
   pace is measured per row by marquee_controller.js.
   ══════════════════════════════════════════════════════════════════ */
.cs-connect-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.cs-connect-row { position: relative; }

/* Row 2 travels the other way. With two identical groups a reversed
   animation starts at the same visual position, so there is no jump. */
.cs-connect-row--reverse .cs-connect-track { animation-direction: reverse; }

.cs-connect-row-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.72);
}

.cs-connect-row-label i {
  font-size: 11px;
  color: rgba(165, 180, 252, 0.75);
}

/* The rows are tighter than the single-row version was. */
.cs-connect-row .cs-connect-ribbon { padding: 9px 0; }

/* ── Logo plate — a light plate under EVERY vendor mark ────────────
   Vendor artwork is published in whatever ink the vendor chose: some
   marks are white, several are near-black (#595a5c Fiix, #281444
   Pronto, dark-blue QAD). Putting the mark on its own light plate
   keeps every logo legible on the dark strip WITHOUT recolouring,
   inverting or redrawing anyone's brand. Plate geometry is identical
   for every vendor, so mixed inks still read as one rhythm. ─────── */
/* Geometry is consistent, width is NOT fixed on purpose: a square
   logomark (MEX, UpKeep) and a 6:1 wordmark (Pronto, JD Edwards) cannot
   share one fixed frame without shrinking the wordmark into a smudge.
   The plate therefore hugs its mark between a 46px floor and a 104px
   ceiling, so every vendor stays proportionate and legible. */
.cs-connect-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: auto;
  min-width: 46px;
  max-width: 104px;
  height: 40px;
  padding: 7px 9px;
  border-radius: 9px;
  background: linear-gradient(180deg, #ffffff 0%, #eef2f9 100%);
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(2, 6, 23, 0.35);
  overflow: hidden;
}

.cs-connect-plate i {
  font-size: 19px;
  line-height: 1;
  color: #475569;              /* neutral glyph on the plate, never brand-coloured */
}

/* Marks are contained, never stretched. A definite HEIGHT is what makes
   this work: several vendor SVGs carry only a viewBox (no width/height
   attributes — Fiix, Limble, Fracttal, NetSuite, SYSPRO, Infor), so with
   `height:auto` the browser shrinks them instead of scaling them, which
   rendered those wordmarks 4–10px tall. Fixing the height and letting the
   width follow the ratio keeps every mark legible; `object-fit: contain`
   letterboxes the few that hit the 92px width ceiling instead of
   distorting them. */
.cs-connect-plate .cs-connect-logo {
  display: block;
  flex: none;
  width: auto;
  height: 22px;
  min-width: 0;
  max-width: 92px;
  object-fit: contain;
}

/* ── Connection status dot ───────────────────────────────────────── */
.cs-connect-status {
  flex: none;
  width: 6px;
  height: 6px;
  margin-left: 2px;
  border-radius: 50%;
  display: inline-block;
}

.cs-connect-status--implemented { background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.14); }
.cs-connect-status--ecosystem   { background: rgba(148, 163, 184, 0.5); }

.cs-connect-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  max-width: 1100px;
  margin: 20px auto 0;
  padding: 0 32px;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(148, 163, 184, 0.9);
}

.cs-connect-legend-item { display: inline-flex; align-items: center; gap: 7px; }
.cs-connect-legend-item .cs-connect-status { margin-left: 0; }
.cs-connect-legend-item strong { color: rgba(226, 232, 240, 0.95); font-weight: 700; }

/* ── Responsive: shrink the plate, never the legibility ──────────── */
@media (max-width: 768px) {
  .cs-connect-plate { min-width: 40px; max-width: 84px; height: 35px; padding: 6px 7px; }
  .cs-connect-plate .cs-connect-logo { height: 19px; max-width: 72px; }
  .cs-connect-plate i { font-size: 16px; }
  .cs-connect-name { font-size: 13px; }
  .cs-connect-chip { gap: 9px; padding: 7px 14px 7px 7px; }
  .cs-connect-row-label { font-size: 10px; letter-spacing: 0.08em; }
  .cs-connect-legend { font-size: 11px; gap: 6px 14px; padding: 0 20px; }
  .cs-connect-rows { gap: 2px; }
}

/* ── Responsive: desktop keeps FIVE in one row ───────────────────── */
@media (max-width: 1200px) {
  .cs-assess-row { gap: 12px; }
  .cs-assess-card { padding: 18px 14px; }
  /* Was 14px — shrinking the title on smaller screens is what made the
     five cards unreadable. Long names wrap instead. */
  .cs-assess-name { font-size: 17px; }
}

/* 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; }
  /* Small screens shrink the chips, so the track gets shorter (measured
     group width ≈3,120px here vs ≈3,901px on desktop) while the 64s
     duration stayed fixed — the same marquee then travelled ~49px/s
     instead of ~61px/s, i.e. visibly slower on a phone. Retuned to hold
     the same visual pace: 3,120px ÷ 61px/s ≈ 51s. Measured after the
     change — desktop 1280px 62px/s, tablet 768px 63px/s, mobile 390px
     61.7px/s. */
  .cs-connect-track { animation-duration: 51s; }
  /* Keep a mark optically matched to its 17px category glyph so the row
     does not show one oversized logo next to smaller icons. */
  .cs-connect-logo { height: 18px; max-width: 28px; }
}

/* ── 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: 9px 14px;
  border-radius: 8px;
  /* 16px on desktop/tablet — the nav was 12.5px, which read as fine print
     rather than navigation. Weight stays at 600 so the size does the work
     without the strip looking heavy. */
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.25;
  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: 4px; }
  /* Never solve crowding by shrinking the label back to fine print: 15.5px
     still reads as navigation on a tablet. */
  .cs-nav-link { padding: 8px 12px; font-size: 15.5px; }
}

@media (max-width: 560px) {
  .cs-nav-links { gap: 2px 2px; }
  .cs-nav-link { padding: 8px 10px; font-size: 15px; }
}

/* ── Reduced motion: the strip KEEPS MOVING, at about a third of the pace ──
   A still marquee reads as a broken marquee — that is exactly the defect that
   was reported. Nothing in this block may set `animation: none`; the pace is
   reduced in marquee_controller.js instead (SPEED × REDUCED_MOTION_FACTOR).
   The row also keeps its single-line shape, so all platforms stay reachable
   and the component never changes character. ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cs-assess-card { transition: none; }
  .cs-assess-card:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════
   INFOGRAPHIC showcase (#platform-infographic) — Coming Soon
   Two columns on desktop, single column on mobile. The poster is
   height-bounded on purpose; full legibility comes from the
   click-to-expand viewer.
   ══════════════════════════════════════════════════════════════ */
.cs-ig-section {
  position: relative;
  overflow: hidden;
}
.cs-ig-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 55% at 82% 18%, rgba(72, 157, 249, 0.10), transparent 70%),
    radial-gradient(45% 45% at 8% 88%, rgba(99, 102, 241, 0.10), transparent 70%);
  pointer-events: none;
}
.cs-ig-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

/* ── Copy column ── */
.cs-ig-copy h2 {
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: var(--ds-font-weight-extrabold, 800);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--ds-text-primary, #f1f5f9);
  margin: 1rem 0 14px;
}
.cs-ig-lede {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ds-text-secondary, #94a3b8);
  margin: 0;
  max-width: 46ch;
}
.cs-ig-points {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.cs-ig-point {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ds-text-secondary, #94a3b8);
}
.cs-ig-point-icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--ds-color-secondary, #818cf8);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(72, 157, 249, 0.06));
  border: 1px solid rgba(99, 102, 241, 0.18);
  margin-top: 1px;
}
.cs-ig-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: 26px;
}
.cs-ig-open {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, filter 0.15s ease-out;
}
.cs-ig-open:hover { transform: translateY(-1px); }
.cs-ig-open:active { transform: scale(0.985); }
.cs-ig-hint {
  font-size: 12px;
  color: var(--ds-text-muted, #94a3b8);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── Poster column ── */
.cs-ig-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
/* The overview keeps the artwork's own proportions: no fixed box, no crop. */
.cs-ig-trigger {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #0b0f19;
  cursor: zoom-in;
  line-height: 0;
  box-shadow:
    0 24px 60px -30px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(99, 102, 241, 0.20);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.cs-ig-trigger--overview {
  max-width: 100%;
  margin: 0;
}
.cs-ig-trigger:hover,
.cs-ig-trigger:focus-visible {
  transform: translateY(-3px);
  box-shadow:
    0 34px 74px -32px rgba(0, 0, 0, 0.92),
    0 0 0 1px rgba(72, 157, 249, 0.42);
}
.cs-ig-trigger:focus-visible {
  outline: 2px solid var(--ds-color-secondary, #818cf8);
  outline-offset: 3px;
}
.cs-ig-trigger img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Overview block ── */
.cs-ig-overview {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}
.cs-ig-poster-actions { justify-content: center; }

@media (min-width: 901px) {
  #platform-infographic .cs-ig-grid {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(22px, 3vw, 40px);
  }
  #platform-infographic .cs-ig-overview {
    width: min(100%, 820px);
    justify-self: center;
  }
}

/* ── In-page navigation links ── */
.cs-ig-navlink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ds-text-primary, #f1f5f9);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(99, 102, 241, 0.32);
  text-decoration: none;
  transition: transform 0.15s ease-out, background 0.15s ease-out, border-color 0.15s ease-out;
}
.cs-ig-navlink:hover {
  transform: translateY(-1px);
  background: rgba(99, 102, 241, 0.18);
  border-color: rgba(72, 157, 249, 0.50);
  color: var(--ds-text-primary, #f8fafc);
}
.cs-ig-navlink:active { transform: scale(0.985); }
.cs-ig-navlink:focus-visible {
  outline: 2px solid #489df9;
  outline-offset: 3px;
}
.cs-ig-navlink i { font-size: 13px; color: #6ea8ff; }

/* Headline for the centred head block (the copy column carries the same type). */
.cs-ig-head h2 {
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: var(--ds-font-weight-extrabold, 800);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--ds-text-primary, #f1f5f9);
  margin: 1rem 0 14px;
}

/* ── Gallery heading + structure groups ── */
.cs-ig-gallery-head {
  max-width: none;
  margin: 0 0 clamp(24px, 3vw, 34px);
  text-align: left;
}
.cs-ig-gallery-head h3 {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: var(--ds-font-weight-extrabold, 800);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ds-text-primary, #f1f5f9);
  margin: 0 0 10px;
}
.cs-ig-gallery-head p {
  margin: 0;
  max-width: 78ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ds-text-secondary, #94a3b8);
}
.cs-ig-group + .cs-ig-group { margin-top: clamp(30px, 3.4vw, 46px); }
.cs-ig-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 13.5px;
  font-weight: var(--ds-font-weight-extrabold, 800);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ds-text-secondary, #94a3b8);
}
.cs-ig-group-title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.38), rgba(99, 102, 241, 0));
}
.cs-ig-group-title i { font-size: 12px; color: #6ea8ff; }
/* A group whose gallery holds ONE card — that card is then the only child —
   puts its heading on the same centred axis as the card. CSS-only via :has(),
   so no markup change is needed. Two exclusions, both deliberate:
     • groups that contain a full two-card row (pages 1–2, 7–8) keep their
       heading on the gallery content boundary, because that heading sits
       directly above the full row;
     • below 521px every card is full-width, so no row is partial and the
       heading already aligns with the card — no centring applied there.
   The trailing gradient rule is suppressed on the centred variants: it is a
   "fill the remaining width" element that only reads correctly on a
   left-aligned heading. */
@media (min-width: 521px) {
  .cs-ig-group:has(.cs-ig-card:only-child) .cs-ig-group-title {
    justify-content: center;
    text-align: center;
  }
  .cs-ig-group:has(.cs-ig-card:only-child) .cs-ig-group-title::after {
    display: none;
  }
}
.cs-ig-zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #f8fafc;
  background: rgba(10, 12, 22, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.18s ease-out, transform 0.18s ease-out;
  line-height: 1;
}
.cs-ig-trigger:hover .cs-ig-zoom,
.cs-ig-trigger:focus-visible .cs-ig-zoom { opacity: 1; transform: scale(1); }
@media (hover: none) {
  .cs-ig-zoom { opacity: 1; transform: scale(1); }
}
.cs-ig-caption {
  font-size: 12.5px;
  color: var(--ds-text-muted, #94a3b8);
  text-align: left;
  max-width: none;
}

/* ── Poster gallery (all pages) ── */
/* Left-aligned to the container edge so the intro, the group titles and the
   card grid all share ONE vertical axis. Inside .cs-ig-grid the copy and the
   poster sit side by side, so no narrow centred column is left floating in a
   1200px row; at 900px the poster stacks underneath the copy. */
.cs-ig-head {
  position: relative;
  max-width: none;
  margin: 0;
  text-align: left;
}
.cs-ig-head .cs-ig-lede { margin: 0; max-width: 66ch; }
.cs-ig-head .cs-ig-points {
  margin-top: 26px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  text-align: left;
}
.cs-ig-head .cs-ig-actions { justify-content: flex-start; }

.cs-ig-gallery {
  position: relative;
  /* Centre-justified flex row. A row holding fewer cards than a full row is
     centred inside the shared gallery area instead of being stranded on the
     left edge (that left-stranding was the visible defect on pages 3, 4, 5, 6
     and 10). A full row still spans the container exactly, so pages 1–2 and
     7–8 keep the same edges as before. Card size is fixed by the flex-basis on
     .cs-ig-card below, so centring never resizes or crops the artwork. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  --cs-ig-gap: clamp(16px, 1.8vw, 26px);
  --cs-ig-half-gap: clamp(8px, 0.9vw, 13px);
  gap: var(--cs-ig-gap);
}
.cs-ig-card {
  /* Two cards per row above 520px. flex-grow is 0 so a lone card keeps its
     full size rather than stretching across the container. */
  flex: 0 1 calc(50% - var(--cs-ig-half-gap));
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid rgba(99, 102, 241, 0.22);
  border-radius: 14px;
  overflow: hidden;
  background: #0d1220;
  cursor: zoom-in;
  text-align: left;
  font: inherit;
  line-height: 1.25;
  box-shadow: 0 16px 40px -30px rgba(0, 0, 0, 0.9);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
}
.cs-ig-card:hover,
.cs-ig-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(72, 157, 249, 0.45);
  box-shadow:
    0 30px 62px -30px rgba(0, 0, 0, 0.92),
    0 0 0 1px rgba(72, 157, 249, 0.30);
}
.cs-ig-card:active { transform: translateY(-1px) scale(0.995); }
.cs-ig-card:focus-visible {
  outline: 2px solid var(--ds-color-secondary, #818cf8);
  outline-offset: 3px;
}
/* Consistent 3:2 thumbnail box — cropping happens here only. */
.cs-ig-card-media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #070b14;
  line-height: 0;
}
.cs-ig-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.3s ease-out;
}
.cs-ig-card:hover .cs-ig-card-media img,
.cs-ig-card:focus-visible .cs-ig-card-media img { transform: scale(1.03); }
.cs-ig-card-zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #f8fafc;
  background: rgba(10, 12, 22, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.18s ease-out, transform 0.18s ease-out;
  line-height: 1;
}
.cs-ig-card:hover .cs-ig-card-zoom,
.cs-ig-card:focus-visible .cs-ig-card-zoom { opacity: 1; transform: scale(1); }
@media (hover: none) {
  .cs-ig-card-zoom { opacity: 1; transform: scale(1); }
}
.cs-ig-card-foot {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 16px 16px;
  background: transparent;
  border-top: 1px solid rgba(99, 102, 241, 0.16);
  line-height: 1.3;
}
.cs-ig-card-meta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6ea8ff;
}
.cs-ig-card-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #e2e8f5;
  text-wrap: balance;
}
.cs-ig-card-note {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ds-text-muted, #94a3b8);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Full-size viewer ── */
html.cs-ig-locked,
body.cs-ig-locked { overflow: hidden; }

.cs-ig-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  /* Small gutter only — the viewer fills the viewport (fullscreen-style). */
  padding: clamp(8px, 1.4vw, 18px);
}
.cs-ig-modal.is-open { display: flex; }
.cs-ig-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 7, 15, 0.93);
  backdrop-filter: blur(6px);
  animation: cs-ig-fade 0.18s ease-out both;
}
.cs-ig-modal-body {
  position: relative;
  display: block;
  width: min(92vw, 1500px);
  height: calc(100vh - 116px);
  height: calc(100dvh - 116px);
  max-width: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
  background: #070b14;
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(99, 102, 241, 0.28);
  animation: cs-ig-pop 0.2s ease-out both;
}
/* Natural dimensions preserve the artwork ratio; scrolling reveals zoomed areas. */
.cs-ig-modal-body img {
  display: none;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
  transform-origin: top left;
  border-radius: 14px;
}
.cs-ig-modal.is-ready .cs-ig-modal-body img { display: block; }
.cs-ig-zoom-controls {
  position: absolute;
  z-index: 5;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: calc(100% - 100px);
  padding: 8px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  background: rgba(12,15,24,.94);
  backdrop-filter: blur(8px);
}
.cs-ig-control {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 9px;
  background: #171b29;
  color: #f8fafc;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.cs-ig-control:hover { background: rgba(99,102,241,.45); }
.cs-ig-control:focus-visible { outline: 2px solid #70b7ff; outline-offset: 2px; }
.cs-ig-zoom-level { min-width: 48px; color: #dbeafe; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }
.cs-ig-modal.is-zoomed .cs-ig-modal-body img { transform-origin: top left; }
.cs-ig-modal:not(.is-ready) .cs-ig-modal-body { min-width: 220px; min-height: 180px; }
.cs-ig-modal:not(.is-ready) .cs-ig-modal-body::after {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(99, 102, 241, 0.28);
  border-top-color: #489df9;
  animation: cs-ig-spin 0.8s linear infinite;
}

/* Previous / next */
.cs-ig-modal-nav {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(15, 17, 26, 0.88);
  color: #f8fafc;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease-out, transform 0.15s ease-out;
}
.cs-ig-modal-nav:hover { background: rgba(99, 102, 241, 0.85); transform: scale(1.05); }
.cs-ig-modal-nav:active { transform: scale(0.95); }
.cs-ig-modal-nav:focus-visible {
  outline: 2px solid #489df9;
  outline-offset: 3px;
}
.cs-ig-modal-nav--prev { margin-right: clamp(8px, 1.6vw, 20px); }
.cs-ig-modal-nav--next { margin-left: clamp(8px, 1.6vw, 20px); }

/* Label + counter */
.cs-ig-modal-bar {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(14px, 2.4vw, 24px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 32px);
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(12, 15, 24, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  font-size: 12.5px;
  color: #cbd5e1;
}
.cs-ig-modal-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #e2e8f5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-ig-modal-count {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #94a3b8;
}
.cs-ig-modal-count::before {
  content: "·";
  margin-right: 12px;
  color: rgba(148, 163, 184, 0.5);
}

.cs-ig-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 4;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(15, 17, 26, 0.86);
  color: #f8fafc;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease-out, transform 0.15s ease-out;
}
.cs-ig-modal-close:hover { background: rgba(99, 102, 241, 0.85); transform: scale(1.04); }
.cs-ig-modal-close:active { transform: scale(0.96); }
.cs-ig-modal-close:focus-visible {
  outline: 2px solid #489df9;
  outline-offset: 3px;
}

@keyframes cs-ig-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cs-ig-pop {
  from { opacity: 0; transform: translateY(6px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cs-ig-spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════
   FAQ (#faq) — native <details> accordion, no JavaScript required
   ══════════════════════════════════════════════════════════════ */
.cs-faq-list {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  gap: 10px;
}
.cs-faq-item {
  border: 1px solid rgba(99, 102, 241, 0.14);
  border-radius: 14px;
  background: rgba(15, 17, 26, 0.55);
  overflow: hidden;
  transition: border-color 0.2s ease-out, background 0.2s ease-out;
}
.cs-faq-item:hover { border-color: rgba(99, 102, 241, 0.30); }
.cs-faq-item[open] {
  border-color: rgba(99, 102, 241, 0.38);
  background: rgba(17, 19, 30, 0.78);
}
.cs-faq-question {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: var(--ds-font-weight-semibold, 600);
  line-height: 1.45;
  color: var(--ds-text-primary, #f1f5f9);
  transition: color 0.15s ease-out;
}
.cs-faq-question::-webkit-details-marker { display: none; }
.cs-faq-question::marker { content: ""; }
.cs-faq-question:hover { color: #c7d2fe; }
.cs-faq-question:focus-visible {
  outline: 2px solid var(--ds-color-secondary, #818cf8);
  outline-offset: -2px;
  border-radius: 14px;
}
.cs-faq-num {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ds-color-secondary, #818cf8);
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.18);
  border-radius: 6px;
  padding: 3px 6px;
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}
.cs-faq-label { flex: 1 1 auto; min-width: 0; }
.cs-faq-icon {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--ds-text-muted, #94a3b8);
  margin-top: 3px;
  transition: transform 0.2s ease-out, color 0.2s ease-out;
}
.cs-faq-item[open] .cs-faq-icon {
  transform: rotate(180deg);
  color: var(--ds-color-secondary, #818cf8);
}
.cs-faq-answer {
  padding: 0 22px 20px 58px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ds-text-secondary, #94a3b8);
}
.cs-faq-answer p { margin: 0 0 10px; }
.cs-faq-answer p:last-child { margin-bottom: 0; }
.cs-faq-item[open] .cs-faq-answer { animation: cs-faq-in 0.2s ease-out both; }

.cs-faq-items {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.cs-faq-items li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(99, 102, 241, 0.10);
  color: var(--ds-text-primary, #e2e8f0);
  font-size: 13.5px;
}
.cs-faq-items i {
  color: #22c55e;
  font-size: 11px;
  margin-top: 4px;
}
.cs-faq-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 12px !important;
  padding: 10px 12px;
  border-radius: 9px;
  background: rgba(72, 157, 249, 0.07);
  border: 1px solid rgba(72, 157, 249, 0.18);
  font-size: 13px;
  line-height: 1.6;
  color: #cbd5e1;
}
.cs-faq-note i { color: #489df9; margin-top: 3px; font-size: 12px; }
.cs-faq-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: #8ab4fb;
  text-decoration: none;
  border-bottom: 1px solid rgba(138, 180, 251, 0.32);
  padding-bottom: 2px;
  transition: color 0.15s ease-out, border-color 0.15s ease-out, gap 0.15s ease-out;
}
.cs-faq-cta:hover { color: #bfdbfe; border-color: rgba(191, 219, 254, 0.7); gap: 11px; }
.cs-faq-cta:focus-visible {
  outline: 2px solid var(--ds-color-secondary, #818cf8);
  outline-offset: 3px;
  border-radius: 4px;
}

@keyframes cs-faq-in {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── APPEX360 infographic HTML reconstruction (scoped; original remains below) ── */
.cs-ig-html {
  position: relative;
  margin: clamp(28px, 4vw, 52px) 0;
  padding: clamp(16px, 2.4vw, 30px);
  display: grid;
  gap: 14px;
  color: #10213c;
  background: #f4f7fb;
  border: 1px solid #dce5ef;
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
  font-family: inherit;
}
.cs-ig-html * { box-sizing: border-box; }
.cs-ig-html h2, .cs-ig-html h3, .cs-ig-html p { margin-top: 0; }
.cs-ig-html h2 { margin-bottom: 0; color: #fff; font-size: clamp(22px, 3vw, 36px); line-height: 1.08; font-weight: 850; letter-spacing: -.035em; }
.cs-ig-html h3 { margin-bottom: 12px; color: #123c78; font-size: clamp(15px, 1.45vw, 19px); line-height: 1.18; font-weight: 800; }
.cs-ig-html p { margin-bottom: 10px; color: #40516a; font-size: 13px; line-height: 1.5; }
.cs-ig-html-hero { min-height: 150px; display: grid; grid-template-columns: minmax(180px, .8fr) 1.2fr; align-items: center; gap: 24px; padding: clamp(20px, 4vw, 42px); color: #fff; background: linear-gradient(118deg, #06152e 0%, #123c78 62%, #147ac1 100%); border-radius: 14px; }
.cs-ig-html-brand { color: #fff; font-size: clamp(25px, 4vw, 42px); line-height: .9; font-weight: 900; letter-spacing: -.06em; white-space: nowrap; }
.cs-ig-html-brand span { color: #43b8ef; }
.cs-ig-html-brand small { display: block; margin-top: 8px; color: #c9d8e9; font-size: 8px; letter-spacing: .2em; font-weight: 700; }
.cs-ig-html-kicker { margin: 0 0 8px !important; color: #dbeafe !important; font-size: 11px !important; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.cs-ig-html-intro, .cs-ig-html-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cs-ig-html-panel { min-width: 0; padding: clamp(15px, 2vw, 22px); background: #fff; border: 1px solid #dbe5f0; border-radius: 12px; }
.cs-ig-html-appexi { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 16px; }
.cs-ig-html-appexi h3, .cs-ig-html-appexi > p { grid-column: 1; }
.cs-ig-html-orb { grid-column: 2; grid-row: 1 / span 3; display: grid; place-items: center; width: clamp(76px, 10vw, 120px); aspect-ratio: 1; border-radius: 50%; color: #eaf8ff; font-weight: 800; font-size: 13px; background: radial-gradient(circle at 35% 30%, #62d5ff, #1376ba 45%, #092f67 75%); box-shadow: 0 0 28px #4dbcf477; }
.cs-ig-html-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.cs-ig-html-tags span, .cs-ig-html-source span, .cs-ig-html-outcomes span { padding: 6px 9px; color: #164578; background: #eaf4ff; border: 1px solid #cfe4fa; border-radius: 999px; font-size: 10px; font-weight: 750; }
.cs-ig-html-pair .cs-ig-html-panel { min-height: 160px; }
.cs-ig-html-benefits { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cs-ig-html-benefits div { min-width: 0; padding: 10px 5px; text-align: center; border-radius: 9px; background: #f1f7ff; }
.cs-ig-html-benefits b, .cs-ig-html-benefits span { display: block; }
.cs-ig-html-benefits b { color: #1681b8; font-size: 12px; }
.cs-ig-html-benefits span { margin-top: 4px; color: #42546a; font-size: 9px; line-height: 1.25; }
.cs-ig-html-flow, .cs-ig-html-process { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 82px; }
.cs-ig-html-source, .cs-ig-html-outcomes { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.cs-ig-html-outcomes span { background: #effaf5; border-color: #cdebdc; color: #1e6b4b; }
.cs-ig-html-arrow { flex: none; color: #1594d2; font-size: 25px; font-weight: 800; }
.cs-ig-html-core { display: grid; place-items: center; min-width: 98px; min-height: 74px; padding: 10px; color: #fff; text-align: center; font-size: 13px; font-weight: 850; background: linear-gradient(145deg, #1b91ce, #144c9a); border: 4px solid #cdeeff; border-radius: 16px; box-shadow: 0 5px 15px #1765a633; }
.cs-ig-html-core small { color: #d9f4ff; font-size: 7px; letter-spacing: .1em; }
.cs-ig-html-assessments { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.cs-ig-html-assessments article { display: grid; align-content: start; gap: 10px; min-height: 108px; padding: 12px 9px; color: #123b73; background: linear-gradient(#e8f4ff 0 44px, #fff 44px); border: 1px solid #d6e3f0; border-radius: 9px; }
.cs-ig-html-assessments b { font-size: 10px; line-height: 1.25; }
.cs-ig-html-assessments span { color: #596a7f; font-size: 9px; }
.cs-ig-html-note { margin: 8px 0 0 !important; color: #66758a !important; font-size: 10px !important; font-style: italic; }
.cs-ig-html-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cs-ig-html-features .cs-ig-html-panel { min-height: 145px; }
.cs-ig-html-features h3 { font-size: 14px; }
.cs-ig-html-map { min-height: 43px; color: #248dd0; font-size: 21px; line-height: 1.25; text-align: center; background: linear-gradient(120deg, #edf7ff, #f8fbff); border-radius: 8px; }
.cs-ig-html-symbol { color: #2087cd; font-size: 34px; font-weight: 800; text-align: center; line-height: 1.2; }
.cs-ig-html-device { display: grid; place-items: center; min-height: 48px; margin: 0 auto 8px; max-width: 150px; color: #286196; font-size: 10px; font-weight: 800; border: 4px solid #24364c; border-bottom-width: 8px; border-radius: 5px; background: #f5f9fc; }
.cs-ig-html-process { justify-content: space-between; }
.cs-ig-html-process > div:not(.cs-ig-html-core) { display: grid; gap: 6px; max-width: 30%; color: #214e80; font-size: 10px; }
.cs-ig-html-process > div > span { color: #64748b; font-size: 9px; line-height: 1.35; }
.cs-ig-html-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.cs-ig-html-roles span { display: grid; place-items: center; min-height: 36px; padding: 5px; color: #235482; background: #eef6ff; border-radius: 7px; text-align: center; font-size: 9px; font-weight: 700; }
.cs-ig-html-industries { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.cs-ig-html-industries span { display: grid; place-items: center; min-height: 38px; padding: 5px; color: #275173; background: #eaf3fa; border-radius: 6px; text-align: center; font-size: 9px; font-weight: 700; }
.cs-ig-html-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; background: #091a35; border-radius: 11px; }
.cs-ig-html-footer strong { color: #fff; font-size: clamp(13px, 1.7vw, 20px); }
.cs-ig-original-fallback { margin: 0; padding: 14px; border: 1px dashed rgba(147, 197, 253, .4); border-radius: 14px; }
.cs-ig-original-fallback figcaption { margin-bottom: 10px; color: var(--ds-text-secondary, #94a3b8); font-size: 12px; font-weight: 700; }
.cs-ig-original-fallback .cs-ig-trigger--overview { max-width: 420px; }

@media (max-width: 767px) {
  .cs-ig-html { padding: 12px; gap: 10px; }
  .cs-ig-html-hero, .cs-ig-html-intro, .cs-ig-html-pair { grid-template-columns: 1fr; }
  .cs-ig-html-hero { gap: 20px; }
  .cs-ig-html-assessments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-ig-html-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-ig-html-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-ig-html-benefits div:last-child { grid-column: 1 / -1; }
  .cs-ig-html-industries { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cs-ig-html-flow, .cs-ig-html-process { flex-wrap: wrap; }
  .cs-ig-html-process { justify-content: center; }
  .cs-ig-html-process > div:not(.cs-ig-html-core) { max-width: 35%; }
  .cs-ig-html-footer { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 420px) {
  .cs-ig-html-features { grid-template-columns: 1fr; }
  .cs-ig-html-flow { gap: 5px; }
  .cs-ig-html-source span, .cs-ig-html-outcomes span { padding: 5px 6px; font-size: 9px; }
  .cs-ig-html-core { min-width: 82px; }
  .cs-ig-html-arrow { font-size: 19px; }
}

/* ── Responsive: infographic + FAQ ── */
/* Every gallery shares ONE track set that spans the full container width, so
   card size, gaps and both edges are identical whether a group holds one card
   or three. The old `--sparse` 300px cap made a lone card occupy a quarter of
   the row while the three-up group filled it — that mismatch was the visible
   "some rows are tiny, some are not" defect. Two columns hold from 521px up. */
@media (max-width: 900px) {
  .cs-ig-grid { grid-template-columns: 1fr; }
  .cs-ig-trigger--overview { max-width: 520px; }
  .cs-ig-lede { max-width: none; }
}
@media (max-width: 520px) {
  .cs-ig-card { flex-basis: 100%; }
}
@media (max-width: 640px) {
  .cs-ig-modal-body {
    width: calc(100vw - 16px);
    height: calc(100vh - 124px);
    height: calc(100dvh - 124px);
  }
  .cs-ig-zoom-controls {
    top: 8px;
    left: 8px;
    right: 58px;
    transform: none;
    max-width: none;
    gap: 5px;
    padding: 5px;
  }
  .cs-ig-control { min-width: 36px; min-height: 38px; padding: 6px 8px; font-size: 12px; }
  .cs-ig-zoom-level { min-width: 40px; font-size: 11px; }
  .cs-ig-modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
  }
  .cs-ig-modal-nav--prev { left: 8px; margin: 0; }
  .cs-ig-modal-nav--next { right: 8px; margin: 0; }
  .cs-ig-modal-nav:hover { transform: translateY(-50%) scale(1.05); }
  .cs-ig-modal-bar { bottom: 10px; gap: 8px; padding: 6px 12px; }
  .cs-ig-modal-label { max-width: 40vw; font-size: 10.5px; }
}
@media (max-width: 600px) {
  .cs-ig-head h2,
  .cs-ig-copy h2 { font-size: 26px; }
  /* On phones the column is already narrow: a 330px cap left the poster inset
     from the rest of the section, so it now fills the column exactly. */
  .cs-ig-trigger--overview { max-width: 100%; }
  .cs-faq-question { padding: 15px 16px; gap: 10px; font-size: 14.5px; }
  .cs-faq-num { display: none; }
  .cs-faq-answer { padding: 0 16px 18px; font-size: 13.5px; }
  .cs-ig-modal { padding: 8px; }
  .cs-ig-modal-body { max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); border-radius: 10px; }
  .cs-ig-modal-body img { max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); }
  .cs-ig-modal-close { top: 10px; right: 10px; width: 38px; height: 38px; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .cs-ig-trigger,
  .cs-ig-open,
  .cs-ig-card,
  .cs-ig-card-media img,
  .cs-ig-navlink,
  .cs-faq-icon,
  .cs-faq-item,
  .cs-faq-cta,
  .cs-ig-zoom { transition: none; }
  .cs-ig-modal-backdrop,
  .cs-ig-modal-body,
  .cs-faq-item[open] .cs-faq-answer { animation: none; }
  .cs-ig-trigger:hover,
  .cs-ig-card:hover,
  .cs-ig-card:hover .cs-ig-card-media img,
  .cs-ig-navlink: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;
}

/* STAGE 1B / F-2 — the honest unknown.
   Deliberately not styled like N/A: dashed outline reads "unrecorded",
   so a reader cannot mistake "I don't know" for "does not apply". */
.aws-score-pill.aws-pill-unknown {
  border-style: dashed;
}

.aws-score-pill.selected-unknown {
  border-color: rgba(167,139,250,0.35);
  background: rgba(167,139,250,0.08);
  color: #a78bfa;
  transform: scale(1.02);
}

.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 appears as a text-only name chip until approved,      */
/* authentic vendor-logo files are available locally. Generic icons  */
/* are not used as stand-ins for MEX, SAP, or other vendor marks.    */
/* The connection-path note below carries the integration caveat.    */
/*                                                                  */
/* 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 24s 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: 0;
  padding: 10px 18px;
  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-icon--logo {
  background: #fff;
  border-color: rgba(255, 255, 255, 0.28);
}

.r27-connect-icon--logo img {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.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); }

/* Keep the animated strip inside the viewport, including on narrow screens. */
.r27-connect {
  max-width: 100%;
  overflow-x: clip;
}

@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; }
}

/* The platform strip is intentionally always animated on both public pages. */

/* 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-chip-platforms {
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  max-width: 100%;
}
.r27-ec-flow-wordmarks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.r27-ec-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--r27-text-primary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}
.r27-ec-wordmark-sap { color: #0879ad; }
.r27-ec-wordmark-oracle { color: #c74634; letter-spacing: 0.03em; }
.r27-ec-wordmark-microsoft { color: #4b5563; }
.r27-ec-wordmark-microsoft i { color: #f25022; }

.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; }
}

/* Owner-approved visual-reference treatment for the homepage industry section. */
.r27-mockup-industries {
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(20px, 2.5vw, 38px);
  color: #102449;
  background: #f4f7fb;
  border: 1px solid #dce5ef;
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(13, 35, 67, 0.10);
}
.r27-mockup-industries__header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 18px;
}
.r27-mockup-industries__header h2 {
  margin: 0;
  color: #102449;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 800;
  line-height: 1.15;
}
.r27-mockup-industries__header p {
  margin: 0;
  color: #334d73;
  font-size: 14px;
  line-height: 1.5;
}
.r27-mockup-industries__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
#industries .r27-mockup-industry-card {
  position: relative;
  min-width: 0;
  padding: 0 !important;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dce5ef;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(17, 42, 77, 0.08);
  transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}
#industries .r27-mockup-industry-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(17, 42, 77, 0.14);
}
#industries .r27-mockup-industry-card__photo {
  aspect-ratio: 4 / 3;
  width: 100%;
  background-color: #dbe7f2;
  background-repeat: no-repeat;
}
#industries .r27-mockup-industry-card__icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 8px;
  place-items: center;
  color: #fff;
  background: var(--industry-accent);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(12, 34, 68, 0.18);
  font-size: 13px;
}
#industries .r27-mockup-industry-card__body {
  box-sizing: border-box;
  width: 100%;
  padding: 2px 10px 12px !important;
}
#industries .r27-mockup-industry-card__body h3 {
  margin: 0 0 5px;
  color: #102449;
  font-size: 13px !important;
  font-weight: 800;
  line-height: 1.25;
}
#industries .r27-mockup-industry-card__body p {
  width: 100%;
  max-width: none;
  margin: 0;
  color: #334d73;
  font-size: 11px !important;
  line-height: 1.4;
}
@media (max-width: 1100px) {
  .r27-mockup-industries__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .r27-mockup-industries__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .r27-mockup-industries { padding: 16px; border-radius: 14px; }
  .r27-mockup-industry-card__body { padding: 2px 8px 10px; }
  .r27-mockup-industry-card__body h3 { font-size: 12px; }
  .r27-mockup-industry-card__body p { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .r27-mockup-industry-card { transition: none; }
  .r27-mockup-industry-card:hover { 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.
   -------------------------------------------------------------------------- */
/* ── LAYOUT DEFECT FIX — 2026-10-15 (owner-authorised homepage work) ───────
   The note above says this console sits "below .r27-hero-inner". It did not.
   `.r27-hero` (19_homepage_redesign.css:316) is `display:flex` with the row
   direction left implicit, so this console became a THIRD flex child and
   competed with `.r27-hero-inner` for the same row. Because the hero was also
   `align-items: flex-start`, "below" was not achievable by any margin.

   MEASURED EFFECT BEFORE THE FIX (real Chromium, 1280px, live page):
     .r27-hero-inner   915px   (should be 1232px = 1280 − 2×24px padding)
     .r27-hero-text    421px   (= 46% of 915, not of 1232)
     h1                78.08px in a 421px column → ~6 lines, 487px tall
     primary CTA       top y = 957px → below the fold on a 1280×800 screen

   The console's own `margin: 44px auto 0` and `max-width: 1280px` are already
   written for a single-column stack. Restoring that stack is the fix: the hero
   becomes one column, so the narrative gets its full 1232px, the console sits
   underneath at full width, and no existing value above is changed.

   `align-items: stretch` (overriding 19's `flex-start`) is required — in a
   column flex container `flex-start` would shrink both children to fit-content
   instead of giving them the full width. `.r27-hero-particles` is
   `position:absolute` (19:1552) and is unaffected by the cross axis. */
.r27-hero {
  flex-direction: column;
  align-items: stretch;
}

.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;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8 · HERO HIERARCHY + PAGE RHYTHM — 2026-10-15 (owner-authorised work)
   ---------------------------------------------------------------------------

   WHY THIS SECTION EXISTS
   §1–§7 converge the nav, the cards and the colour, but the hero still could not
   behave as designed: a layout defect upstream held `.r27-hero-inner` at 915px
   instead of 1232px, so the narrative column was starved and the headline broke
   into twice the intended number of lines. That defect is fixed in
   24_homepage_enterprise.css, next to the console that caused it (see the note
   there). With the hero restored to a single column, this section tunes the
   hierarchy the defect had been distorting.

   MEASURED BEFORE (real Chromium, 1280px live page):
     .r27-hero-inner 915px · .r27-hero-text 421px · h1 78.08px → ~6 lines
     (487px tall) · primary CTA top y = 957px — below the fold.
   TARGET: a 3-line headline, and the CTA pair inside the first screen.

   These are overrides at the END of the last-loaded homepage layer, so they win
   the cascade. No selector already in this file is rewritten, no colour token is
   touched, and §1–§7 stay intact and independently active. */

/* Headline scale and page rhythm.
   6.1vw measured 78.08px inside a 421px column, which broke the three intended
   lines ("Turn Operational" / "Complexity Into" / "Executive Clarity") into six.
   The narrative column is now 52% (below), so the intended three lines fit at
   5.15vw. The 38px floor is a mobile correction — the old 44px floor ran the
   headline almost ten characters wide on a 390px screen.
   110px → 96px of section rhythm shortens a 26-section page by roughly 720px of
   empty vertical space without moving any section or changing any layout. */
.r27-page {
  --apxc-headline-size: clamp(38px, 5.15vw, 76px);
  --apxc-section-block: 96px;
}

@media (min-width: 1101px) {
  /* SECOND CAUSE OF THE SAME SYMPTOM, measured after the stacking fix above.
     19_homepage_redesign.css:339 centres this flex row (`align-items: center`).
     The wheel column is 1123px tall and the narrative column is 766px, so
     centring padded the narrative with (1123 − 766) / 2 = 178px of dead space
     ABOVE the headline — the headline did not begin until y = 404px.
     Top-aligning the narrative removes that padding. `.r27-hero-visual` keeps
     its own `align-self: center` (19:481), so the wheel stays optically centred
     and only the text column moves up. */
  .r27-hero-inner {
    align-items: flex-start;
  }

  /* 46% → 52%: the narrative column was the one being starved. The wheel keeps a
     firm 48% and gains prominence anyway, because the two now divide 1232px
     instead of 915px (measured wheel container: 454px → 552px, +22%). */
  .r27-hero-text {
    flex: 0 0 52%;
    max-width: 52%;
  }

  /* 96px → 84px above the fold, so the headline, the subline and the CTA pair
     sit together on the first screen. */
  .r27-hero {
    padding-top: 84px;
  }
}

/* Chip rhythm. The ten chips (four credibility + six capability) are functional
   content and every one of them stays. What changes is the width of the block —
   not its content — so the CTA pair and the chips read as one closing cluster
   rather than two competing bands of equal weight. */
.r27-hero-credibility,
.r27-hero-capabilities {
  gap: 8px;
}

.r27-hero-credibility {
  margin-bottom: 10px;
}

.r27-hero-capabilities {
  margin-top: 0;
  margin-bottom: 0;
}

/* Tablet band, 769–1024px. 19_homepage_redesign.css stacks the hero here but
   keeps the desktop 88px top padding, which is generous once the wheel sits
   below the copy instead of beside it. There is no horizontal change: the
   layout has already become one column by this width. */
@media (min-width: 769px) and (max-width: 1024px) {
  .r27-hero {
    padding-top: 72px;
  }

  .r27-hero-subline {
    max-width: 640px;
  }
}

/* Mobile hero — MEASURED DEFECT at a 390px viewport.
   `.r27-launch-badge` renders "AVAILABLE NOW · 5 Assessments · Free 14-Day
   Trial" as `display: inline-flex` inside a `border-radius: 999px` pill, with
   `white-space: nowrap` on BOTH text spans. Measured at 390px: the badge's
   right edge sat at x = 477 — 87px past the right of the screen. Because
   documentElement.scrollWidth stayed 390, the page did NOT scroll sideways, so
   the overflow was silently CLIPPED: the badge was cut off mid-word rather than
   prompting a scrollbar. This is the worst kind of responsive failure, because
   nothing in a scrollWidth check reveals it.

   The fix changes layout only. Not one word of the badge's content moves, and
   `border-radius` drops from a pill to a rounded rectangle so that a wrapped
   two-line badge still reads as a deliberate shape rather than a squashed oval.
   The separator is hidden because a vertical rule between two stacked lines
   reads as a broken dash.

   SPECIFICITY, and why these selectors look odd. The first version of this rule
   used the plain class `.r27-launch-badge`, and a live computed-style read at
   390px came back `flex-wrap: wrap` (my declaration applied) but
   `border-radius: 999px` (19's declaration applied). That combination is only
   possible if 19_homepage_redesign.css is evaluated AFTER this file — so mine
   won on the properties 19 does not declare, and lost on the ones it does. Do
   not "tidy" these doubled class names into single classes: `.a.a` has
   specificity (0,0,2,0) and beats 19's (0,0,1,0) no matter which stylesheet is
   evaluated last. Verified after the change: border-radius 16px, badge right
   edge 374px inside a 390px viewport. */
@media (max-width: 480px) {
  .r27-launch-badge.r27-launch-badge {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px;
    max-width: 100%;
    border-radius: 16px;
    padding: 10px 16px;
  }

  .r27-launch-badge-text.r27-launch-badge-text,
  .r27-launch-badge-date.r27-launch-badge-date {
    white-space: normal;
    text-align: center;
  }

  .r27-launch-badge-sep.r27-launch-badge-sep {
    display: none;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   26 · HOMEPAGE HERO VERTICAL DENSITY — measured correction (2026-10-17)

   WHY THIS FILE EXISTS SEPARATELY
     The same rules were first written into 25_homepage_mockup_convergence.css.
     That file is a change-controlled baseline protected by
     spec/validators/homepage_enterprise_layer_baseline_spec.rb, so editing it
     requires recorded owner re-approval. Rather than regenerate a protected
     manifest without that approval, the geometry correction lives here, in a
     new additive layer. 24 and 25 remain byte-identical to their baseline.

   MEASURED BEFORE (1280×800 viewport, computed, not estimated):
     section.r27-hero          1,696px
     .r27-hero-inner           1,123px
     .r27-hero-visual          1,123px
     .apex-donut-stack         1,123px   ← 62% of the wheel column was the
                                          framework navigator stacked beneath
                                          a 490px wheel
     .r27-hero-text              763px

   The reference composition is one tight statement per viewport: the wheel is
   a supporting object, not the tallest thing on the page. The stack is
   `flex-direction: column` (the wheel partial sets the width inline, so the
   column grows to wheel + navigator height). Constraining the stack width
   scales the square wheel down proportionally and shrinks the navigator with
   it, without touching the wheel partial, its controller, or its inline
   sizing attribute.

   MEASURED AFTER (1280): hero 1,490px (−206px), active detail card 570→395px.

   SCOPE / SAFETY:
     · desktop only (min-width: 1101px) — the stacked mobile/tablet layout,
       where wheel-over-navigator is correct, is untouched;
     · no ERB changed, so the protected R27 partials are byte-identical;
     · `!important` is required because the width cap is an inline style;
     · no colour, type, token or content changes — geometry only;
     · every wheel segment and navigator chip remains rendered and clickable.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1101px) {
  .r27-hero-visual .apex-donut-stack {
    max-width: 350px !important;
    gap: 8px;
  }

  /* Keep the wheel navigator visually subordinate to the reference hero. */
  .r27-hero .fw-nav-detail-inner {
    gap: 8px;
    padding: 10px 12px 9px;
  }

  .r27-hero .fw-nav-detail-title {
    font-size: 18px;
  }

  .r27-hero .fw-nav-detail-outcome {
    font-size: 13px;
    margin: 1px 0 3px;
  }

  .r27-hero .fw-nav-detail-ai {
    padding: 6px 8px;
    margin: 0;
  }

  .r27-hero .fw-nav-detail-ai-text,
  .r27-hero .fw-nav-detail-meta,
  .r27-hero .fw-nav-detail-outcome-item {
    font-size: 10px;
    line-height: 1.3;
  }

  .r27-hero .fw-nav-detail-info {
    padding: 3px 0 1px;
  }

  .r27-hero .fw-nav-detail-info > *:not(:first-child) {
    display: none;
  }

  .r27-hero .fw-nav-detail-cta {
    padding: 6px 12px;
    font-size: 12px;
  }

  .r27-hero {
    padding-bottom: 24px;
  }

  .r27-assessment-marketplace {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .r27-hero {
    padding-top: 64px;
  }

  /* The wheel column no longer dictates the hero's height, so align the two
     columns on their top edge rather than stretching the visual to the text. */
  .r27-hero-inner {
    align-items: flex-start;
  }

  /* ── Framework navigator density ────────────────────────────────────────
     MEASURED (1280): .fw-nav 672px = active detail card 570px + chips 88px.
     The active card alone was taller than the 430px wheel above it, so the
     hero visual column reached 1,112px and drove the section to 1,665px —
     more than two viewports before any product content appears.

     The reference treats this card as a compact caption for the wheel, not a
     second content column. These are DENSITY overrides only: every element
     (title, subtitle, outcome, highlights, AI insight, meta, illustrative
     targets, CTA) keeps rendering. No content is hidden or removed. */
  .r27-hero .fw-nav-detail-inner {
    gap: 12px;
    padding: 14px 16px 12px;
  }

  .r27-hero .fw-nav-detail-icon {
    width: 44px;
    height: 44px;
  }

  .r27-hero .fw-nav-detail-icon i {
    font-size: 20px;
  }

  .r27-hero .fw-nav-detail-body {
    gap: 5px;
  }

  .r27-hero .fw-nav-detail-title {
    font-size: 22px;
    line-height: 1.15;
  }

  .r27-hero .fw-nav-detail-sub {
    font-size: 12px;
  }

  .r27-hero .fw-nav-detail-outcome {
    font-size: 15px;
    margin: 2px 0 4px;
  }

  .r27-hero .fw-nav-detail-hl {
    font-size: 12.5px;
  }

  .r27-hero .fw-nav-detail-ai {
    padding: 8px 12px;
    margin: 2px 0 0;
  }

  .r27-hero .fw-nav-detail-ai-text {
    font-size: 12px;
    line-height: 1.45;
  }

  .r27-hero .fw-nav-detail-info {
    padding: 6px 0 2px;
  }

  .r27-hero .fw-nav-detail-meta,
  .r27-hero .fw-nav-detail-outcome-item {
    font-size: 12px;
  }

  .r27-hero .fw-nav-detail-cta {
    padding: 8px 16px;
    font-size: 13px;
  }

  .r27-hero .fw-nav-chips {
    gap: 6px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   26b · SECTION CARD DENSITY — measured correction (2026-10-17)

   WHY
     The hero correction (26a) fixed one viewport. Measuring the card bands 2–5
     showed the same failure repeating at section level: every card carried
     desktop-marketing padding and full-size type, so each row of content was
     two-to-three viewports tall. The reference treats these bands as compact
     rows of cards, not as full-page panels.

   MEASURED BEFORE (1280 computed, per-card height):
     .r27-marketplace-grid card    556px   (assessment methodology)
     .r27-ec-grid card             766px   (integration ecosystem)
        └ .r27-ec-card-titles      281px   ← type block alone
        └ .r27-ec-chips            371px
     .r27-ind-grid card            697px   (industries)
     .r27-gap-grid card            531px   (intelligence / data-flow)
        └ each child had 24px vertical padding → 192px of pure padding

   WHAT THIS FILE DOES — AND DOES NOT
     · DENSITY ONLY. No element is hidden, collapsed, truncated or removed.
       Every card, chip, title, description, metric and CTA still renders.
     · Typography and spacing are tightened to the reference's compact card
       rhythm. No colour, token, icon or content change.
     · Nothing here is duplicated from 24/25; those two stay byte-identical to
       their protected baseline. This is the additive layer.
     · `!important` is used only where the declaration it overrides is an
       inline style in the protected partial (the three "Measures / Built for
       / You receive" lines and the assessment CTAs).
     · Not scoped to a viewport: these are pure tightenings that must hold on
       tablet and mobile too, where the same overflow was compounding.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── §2 · Assessment methodology cards ─────────────────────────────────────
   556px → compact. The three-line "Measures / Built for / You receive" block
   is required content (it must answer what/who/what-you-get) — it is kept in
   full and only set at card body size. */
.r27-marketplace-grid > * {
  padding: 18px !important;
}

.r27-marketplace-grid .r27-mp-card-header {
  min-height: 0 !important;
  padding: 0 0 8px !important;
}

.r27-marketplace-grid .r27-mp-icon-wrap {
  width: 42px !important;
  height: 42px !important;
  font-size: 17px !important;
}

.r27-marketplace-grid .r27-mp-title {
  font-size: 15px !important;
  line-height: 1.25 !important;
}

.r27-marketplace-grid .r27-mp-desc {
  font-size: 12px !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

/* the required what/who/what-you-get block (inline-styled in the partial) */
.r27-marketplace-grid div[style*="flex-direction:column"] {
  gap: 4px !important;
  margin: 6px 0 8px !important;
}

.r27-marketplace-grid div[style*="flex-direction:column"] > div {
  font-size: 11px !important;
  line-height: 1.4 !important;
}

.r27-marketplace-grid .r27-mp-meta {
  font-size: 11px !important;
  margin: 0 !important;
}

.r27-marketplace-grid .r27-mp-features {
  gap: 3px !important;
  margin-top: 6px !important;
}

.r27-marketplace-grid .r27-mp-feature {
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.r27-marketplace-grid .r27-mp-cta {
  padding: 7px 12px !important;
  font-size: 12px !important;
  margin-top: 8px !important;
}

/* ── §3 · Integration ecosystem cards ──────────────────────────────────────
   766px → compact. The type block was 281px on its own, so the headline and
   description are set to card scale; all 20 system chips are kept. */
.r27-ec-grid > * {
  padding: 16px !important;
}

.r27-ec-grid .r27-ec-card-head {
  min-height: 0 !important;
  gap: 10px !important;
  padding: 0 0 10px !important;
}

.r27-ec-grid .r27-ec-card-icon {
  width: 38px !important;
  height: 38px !important;
  font-size: 16px !important;
}

.r27-ec-grid .r27-ec-card-titles {
  gap: 2px !important;
}

.r27-ec-grid .r27-ec-card-titles > * {
  margin: 0 !important;
}

.r27-ec-grid .r27-ec-card-titles > :first-child {
  font-size: 15px !important;
  line-height: 1.25 !important;
}

.r27-ec-grid .r27-ec-card-titles > :not(:first-child) {
  font-size: 11.5px !important;
  line-height: 1.45 !important;
}

.r27-ec-grid .r27-ec-chips {
  gap: 5px !important;
}

.r27-ec-grid .r27-ec-chips > * {
  padding: 3px 9px !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

/* ── §4 · Intelligence / data-flow cards ───────────────────────────────────
   531px → compact. The bloat was structural: the card's grid applied 24px
   padding to the top AND bottom of every child (192px of padding alone). */
.r27-gap-grid > * {
  min-height: 0 !important;
  padding: 18px !important;
  gap: 6px !important;
}

.r27-gap-grid .r27-gap-card > * {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.r27-gap-grid .r27-gap-card-icon {
  width: 38px !important;
  height: 38px !important;
  font-size: 16px !important;
}

.r27-gap-grid .r27-gap-card-title {
  font-size: 16px !important;
  line-height: 1.3 !important;
}

.r27-gap-grid .r27-gap-card-desc {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
}

.r27-gap-grid .r27-gap-card-impact {
  font-size: 11.5px !important;
  line-height: 1.4 !important;
}

/* ── §5 · Industries cards ─────────────────────────────────────────────────
   697px → compact. Photo band sized and the body (which reuses the
   gap-card-* vocabulary) set to card scale.

   Photo band height — CHANGED 2026-10-19 under explicit owner authorisation.
   It was a flat `height: 138px`, which forced the 16:9 photographs (1000x563)
   into a 306x137 slot: a 2.23:1 letterbox that cropped ~20 % of every image's
   height and left six thin grey strips instead of six photographic panels.
   Measured before: 306x137 desktop, 258x137 phone, unchanged by viewport.
   Desktop target 220-240 px; mobile steps down so cards stay proportionate and
   the section does not grow excessively tall. `object-fit: cover` on
   `.r27-ind-img` (19_homepage_redesign.css) keeps the crop centred, so the
   subject band of each photograph is what remains visible.

   This corrects framing ONLY. It does not improve the photography itself —
   image selection and colour quality are a separate, still-open item. */
.r27-ind-grid .r27-ind-photo {
  height: 232px !important;
  min-height: 0 !important;
}

@media (max-width: 768px) {
  .r27-ind-grid .r27-ind-photo {
    height: 196px !important;
  }
}

@media (max-width: 430px) {
  .r27-ind-grid .r27-ind-photo {
    height: 168px !important;
  }
}

.r27-ind-grid .r27-ind-body {
  padding: 16px 18px 18px !important;
}

.r27-ind-grid .r27-ind-body > * {
  margin: 0 !important;
}

.r27-ind-grid .r27-gap-card-icon {
  width: 34px !important;
  height: 34px !important;
  font-size: 14px !important;
  margin-bottom: 6px !important;
}

.r27-ind-grid .r27-gap-card-title {
  font-size: 15.5px !important;
  line-height: 1.3 !important;
  margin-bottom: 4px !important;
}

.r27-ind-grid .r27-gap-card-desc {
  font-size: 12px !important;
  line-height: 1.5 !important;
  margin-bottom: 6px !important;
}

.r27-ind-grid .r27-gap-card-impact {
  font-size: 11.5px !important;
  line-height: 1.4 !important;
}

/* ── §6–9 · Grid gutter density ────────────────────────────────────────────
   MEASURED (1280): .r27-page = 34,995px across 29 bands. The residual bloat in
   bands 6–9 is card size, not band padding — a first attempt that forced band
   padding to a fixed 64px made the page 888px TALLER, because most bands had
   less than that and the override added space. That approach was reverted
   (recorded here so it is not repeated): band padding is left exactly as the
   protected layers define it.

   What remains is the gutter between cards, which compounds on every row of a
   multi-row grid. Only the gaps are tightened. No band is removed, no band
   padding is touched, and nothing is hidden. */
.r27-marketplace-grid,
.r27-ec-grid,
.r27-ind-grid,
.r27-gap-grid {
  gap: 16px !important;
}

/* ── §10 · Tablet two-column integrity (641–768px) ─────────────────────────
   MEASURED DEFECT, before this fix: at 768px `.apx-ent-cards` (9 cards)
   rendered as ONE 3,841px column. Cause is a breakpoint boundary, not content:
   24_homepage_enterprise.css:2076 drops every card grid to `minmax(0,1fr)` at
   `max-width: 768px` — which also catches a 768px tablet — while line 2026
   already declares a 2-column tablet layout at `max-width: 1180px`. So the
   641–768px range collapsed two columns into one for no legibility gain.

   Restoring 2 columns keeps every card, every word and every action; 390px
   phones stay on the single-column rule. Override only — the protected layers
   (24, 25) are not edited. */
@media (min-width: 641px) and (max-width: 768px) {
  .apx-ent-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .apx-ent-promise { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
   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); }
}

/* Investor Pack — align this report surface with the supplied light-document
   references without changing its copy, figures, links, or PDF action. */
.apx-investor-pack .hero {
  background: linear-gradient(135deg, var(--doc-navy), #1D4668) !important;
  color: #FFFFFF;
  border: 1px solid var(--doc-border-s);
  box-shadow: var(--doc-shadow);
}
.apx-investor-pack .hero h1,
.apx-investor-pack .hero p { color: #FFFFFF !important; }
.apx-investor-pack .hero p { opacity: 0.78; }
.apx-investor-pack .hero .fa-chart-pie { color: var(--doc-amber) !important; }
.apx-investor-pack .hero .btn-primary {
  background: var(--doc-amber) !important;
  border-color: var(--doc-amber) !important;
  color: #FFFFFF !important;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.apx-investor-pack .hero .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(18, 46, 74, 0.22);
}
.apx-investor-pack .card,
.apx-investor-pack .bg-base-100 {
  background-color: var(--doc-panel) !important;
  border-color: var(--doc-border) !important;
  box-shadow: var(--doc-shadow);
}
.apx-investor-pack .bg-base-200 { background-color: var(--doc-panel-2) !important; }
.apx-investor-pack h2,
.apx-investor-pack h3,
.apx-investor-pack .card-title { color: var(--doc-navy); }
.apx-investor-pack p { color: var(--doc-ink-soft); }
.apx-investor-pack .table thead th {
  background: var(--doc-navy);
  color: #FFFFFF;
}
.apx-investor-pack .table tbody tr:nth-child(even) td { background: var(--doc-panel-2); }
.apx-investor-pack .text-primary,
.apx-investor-pack .text-secondary,
.apx-investor-pack .text-accent { color: var(--doc-steel-text) !important; }
/* 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; }
}
/* ══════════════════════════════════════════════════════════════
   26_reporting_consistency.css — Reporting consistency layer
   ══════════════════════════════════════════════════════════════

   Scope: EXECUTIVE REPORTING surfaces only
     • Standardised KPI card internals  (.exk-*)
     • Executive surface / report navigation rail (.apx-rail-*)

   Deliberately additive: every rule below introduces NEW class
   names (exk-, apx-rail-). No existing selector, token or
   homepage rule is modified, so the protected R27 homepage and
   the PDF layouts are unaffected — they never render these
   classes.

   Theme-aware: reads existing design-system custom properties
   with literal fallbacks, so light, dark and the apex_reference
   theme all resolve to a sensible value.
   ══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   1. KPI CARD — standardised internals
   Wrapper is the shared `.exec-card` shell (theme + hover + motion
   already apply). These rules only standardise what is inside it.
   ────────────────────────────────────────────────────────────── */

.exk {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  min-height: 132px;
  /* apex_density.css applies the card padding with !important. Rather than
     fight it with a second !important, we override the density *variable*
     it reads — an own-element declaration always beats an inherited
     ancestor value, so this stays deterministic at every density. */
  --density-card-padding: 20px 16px 16px;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
}

/* Top accent rule — one consistent colour cue per card */
.exk::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--exk-accent, var(--color-primary, #818cf8));
  opacity: 0.85;
}

.exk--clickable {
  cursor: pointer;
}
.exk--clickable:focus-visible {
  outline: 2px solid var(--exk-accent, var(--color-primary, #818cf8));
  outline-offset: 2px;
}

/* — Icon ------------------------------------------------ */
.exk-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 10px;
  border-radius: var(--ds-radius-md, 10px);
  font-size: 15px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--exk-accent, #818cf8) 12%, transparent);
  color: var(--exk-accent, #818cf8);
}
/* Fallback for engines without color-mix() */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .exk-icon {
    background: var(--surface-overlay, rgba(255, 255, 255, 0.06));
  }
}

/* — Label ----------------------------------------------- */
.exk-label {
  width: 100%;
  margin: 0 0 6px;
  display: block;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted, rgba(255, 255, 255, 0.45));
  overflow-wrap: anywhere;
}

/* — Value ----------------------------------------------- */
.exk-value {
  margin: 0;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--exk-accent, #818cf8);
  overflow-wrap: anywhere;
}
.exk-value--large  { font-size: clamp(26px, 5.4vw, 46px); }
.exk-value--medium { font-size: clamp(24px, 4.6vw, 38px); }
.exk-value--small  { font-size: clamp(21px, 4vw, 30px); }
.exk-value--empty  { color: var(--text-muted, rgba(255, 255, 255, 0.4)); }

/* — Meta row (trend + status) ---------------------------- */
.exk-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 8px;
  margin-top: 8px;
  min-height: 18px;
}

.exk-trend {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* — Status pill (the standard status indicator) ---------- */
.exk-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}
.exk-status::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  flex-shrink: 0;
}

.exk-status--success {
  color: var(--color-success, #34d399);
  background: var(--color-success-light, rgba(52, 211, 153, 0.12));
  border-color: var(--color-success-light, rgba(52, 211, 153, 0.25));
}
.exk-status--warning {
  color: var(--color-warning, #fbbf24);
  background: var(--color-warning-light, rgba(251, 191, 36, 0.12));
  border-color: var(--color-warning-light, rgba(251, 191, 36, 0.25));
}
.exk-status--danger {
  color: var(--color-danger, #f87171);
  background: var(--color-danger-light, rgba(248, 113, 113, 0.12));
  border-color: var(--color-danger-light, rgba(248, 113, 113, 0.25));
}
.exk-status--neutral {
  color: var(--text-secondary, rgba(255, 255, 255, 0.6));
  background: var(--surface-overlay, rgba(255, 255, 255, 0.06));
  border-color: var(--surface-border, rgba(255, 255, 255, 0.12));
}

/* — Secondary + badge ----------------------------------- */
.exk-secondary {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted, rgba(255, 255, 255, 0.45));
  overflow-wrap: anywhere;
}

.exk-badge {
  margin-top: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--surface-overlay, rgba(255, 255, 255, 0.06));
  color: var(--exk-accent, #818cf8);
}

/* — Responsive ------------------------------------------- */
@media (max-width: 640px) {
  .exk {
    min-height: 112px;
    --density-card-padding: 16px 10px 14px;
  }
  .exk-icon {
    width: 32px;
    height: 32px;
    font-size: 13px;
    margin-bottom: 8px;
  }
  .exk-label {
    font-size: 10px;
  }
}

/* — Print / PDF ------------------------------------------ */
@media print {
  .exk {
    min-height: 0;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .exk::before {
    display: none;
  }
  .exk-value,
  .exk-status {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .exk-value--large,
  .exk-value--medium,
  .exk-value--small {
    font-size: 20px !important;
  }
  .exk-status {
    border: 1px solid currentColor;
  }
}

/* ──────────────────────────────────────────────────────────────
   2. EXECUTIVE SURFACE NAVIGATION RAIL
   Consistent navigation between dashboards, reports and
   supporting detail. Horizontally scrollable on small screens so
   the rail never truncates or disappears on mobile.
   ────────────────────────────────────────────────────────────── */

.apx-rail {
  margin-bottom: 20px;
  border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--ds-radius-lg, 14px);
  background: var(--surface-card, rgba(255, 255, 255, 0.02));
  overflow: hidden;
}

.apx-rail-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.apx-rail-row + .apx-rail-row {
  border-top: 1px solid var(--surface-border, rgba(255, 255, 255, 0.08));
}

.apx-rail-caption {
  flex-shrink: 0;
  padding-right: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, rgba(255, 255, 255, 0.35));
  white-space: nowrap;
}

.apx-rail-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text-secondary, rgba(255, 255, 255, 0.6));
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.apx-rail-link:hover {
  background: var(--surface-hover, rgba(255, 255, 255, 0.06));
  color: var(--text-primary, rgba(255, 255, 255, 0.9));
}
.apx-rail-link:focus-visible {
  outline: 2px solid var(--color-primary, #818cf8);
  outline-offset: 2px;
}
.apx-rail-link i {
  width: 13px;
  text-align: center;
  font-size: 11px;
}

.apx-rail-link--active {
  font-weight: 600;
  color: var(--color-primary, #818cf8);
  background: var(--color-primary-subtle, rgba(129, 140, 248, 0.12));
  border-color: var(--color-primary-subtle, rgba(129, 140, 248, 0.3));
}

@media (max-width: 640px) {
  .apx-rail-row {
    padding: 7px 8px;
    gap: 4px;
  }
  .apx-rail-caption {
    display: none;
  }
  .apx-rail-link {
    padding: 5px 8px;
    font-size: 11px;
  }
}

@media print {
  .apx-rail {
    display: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   6. RESPONSIVE CONTAINMENT — executive surfaces at phone width
   ──────────────────────────────────────────────────────────────
   MEASURED 2026-10-19, real Chromium, signed-in org_admin, 390×844:
   /executive_homepage laid out 495 px wide in a 390 px viewport
   (105 px of horizontal document overflow). Two causes, both the
   same one: a flex/grid child keeps the default `min-width: auto`,
   so its intrinsic min-content width wins over the column.

     • `.executive-brief-widget` measured 412 px inside a 278 px
       content box — its long unbroken sentence set the floor.
     • the welcome banner's action badge was pushed to x=495 by the
       non-shrinking `flex-1` text column beside it.

   The correction is containment only. Nothing is hidden, clipped,
   truncated or removed: the same words wrap inside the viewport.
   No protected homepage file (19/24/25, welcome.html.erb,
   public.html.erb, base.css) is touched, and no R27 class is named.
   ────────────────────────────────────────────────────────────── */

.db-two-col > * {
  min-width: 0;
}

.welcome-banner-widget .flex-1 {
  min-width: 0;
}

@media (max-width: 640px) {
  .welcome-banner-widget .card-body > .flex {
    flex-wrap: wrap;
  }
  .welcome-banner-widget .flex-shrink-0 {
    flex-shrink: 1;
  }
  /* Section headers: `flex: 1` still floors at min-content, which pushed
     "Intelligence Overview" 6 px past a 390 px viewport. Containment only. */
  .db-container .ds-section-header__row {
    flex-wrap: wrap;
  }
  .db-container .ds-section-header__titles {
    min-width: 0;
  }
  /* Page-header extras (Live badge + Export + timestamp) are a nowrap row
     pushed right by an inline `margin-left:auto`, so at 390 px they laid the
     document out 1013 px wide. Let them take a full line and wrap. The
     !important is required because the caller sets margin-left inline. */
  .ds-page-header__extra {
    width: 100%;
    min-width: 0;
  }
  .ds-page-header__extra > div {
    flex-wrap: wrap;
    margin-left: 0 !important;
    row-gap: 8px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   7. REFERENCE GAMUT — reporting dashboard family (2026-10-20)

   WHY THIS EXISTS
   The four reporting dashboards were rendering measurably off-gamut against
   the approved dark reference frame A7
   (APPEX360_PRESENTATION_STRUCTURE-PAGE7.png, 1536x1024). Clusters below are
   ImageMagick 12-colour quantisations of the actual reference file — authority
   data, not preference:

     A7 ground   #0C1023  76.1 % of the frame   rgb(12,16,35)
     A7 panel    #1F2651   8.6 % of the frame   rgb(31,38,81)
     A7 border   #A2A7C4   2.0 % of the frame   rgb(162,167,196)
     A7 text     #E6E8F2   1.9 % of the frame

   The dashboards were rendering these grounds instead:

     portfolio        #0B0F18      executive_home   #0D121C
     owner_dashboard  #0C111A      benchmarking     #121927  (raw Tailwind
                                                              gray-900, no
                                                              design-system
                                                              surface at all)

   Every one of them is blue-deficient against #0C1023, and benchmarking was a
   neutral grey that appears nowhere in the reference palette. This block makes
   the reporting family use the reference ground, panel and border exactly.

   SCOPE
   `.apx-surface` is applied by the four dashboard views themselves, so nothing
   else inherits it: the public homepage (.r27-page) and the light-document
   report surfaces (.apx-doc) are untouched. `body:has()` is the only way to
   colour the page ground without editing a shared layout; where `:has()` is
   unsupported the body simply keeps its existing ground and nothing breaks.

   WHAT THIS DOES NOT DO
   No layout, type, spacing or hierarchy change, and no semantic colour change
   (severity/status accents are left exactly as they were — the reference does
   not evidence a remap of their meaning). Only the surface gamut moves.
   ══════════════════════════════════════════════════════════════════════════ */

body:has(.apx-surface) {
  background-color: #0C1023;
}

.apx-surface {
  --surface-page: #0C1023;
  /* A7 panel rgba(31,38,81) over the A7 ground. Alpha, not opacity: it keeps
     card separation visible without making every panel a solid indigo slab. */
  --surface-card: rgba(31, 38, 81, 0.65);
  --surface-card-hover: rgba(45, 54, 110, 0.78);
  --surface-border: rgba(162, 167, 196, 0.16);
  --surface-border-hover: rgba(162, 167, 196, 0.30);
  /* The design-system card components read the --ds-* aliases, which resolve
     at :root and therefore do NOT follow a descendant override of the alias
     they point at. Both families have to be set here. */
  --ds-surface-card: rgba(31, 38, 81, 0.65);
  --ds-surface-border: rgba(162, 167, 196, 0.16);
  background-color: var(--surface-page);
}

/* ══════════════════════════════════════════════════════════════════════════
   O-7 — PHONE-WIDTH OVERFLOW IN REPORT HEADERS (2026-11-05)
   ──────────────────────────────────────────────────────────────────────────
   Measured on real Chromium against the browser-fixture database at a 390px
   viewport, before any change:
     S2 Executive Summary   50px   (cause: the sr-only table — fixed in base.css)
     S5 Full Report        191px   (cause: this header action row)
     X1 Intelligence        69px   (cause: this header action row + breadcrumbs)
     S3 Executive Financial  0px   (already compliant)

   Root cause, common to S5 and X1: every report surface renders a Daisy `navbar`
   whose right-hand slot is `<div class="flex-none gap-2 flex">`. `flex-none` is
   `flex: none`, so the slot refuses to shrink AND `flex-wrap` is `nowrap`, so the
   buttons cannot drop to a second line. The slot therefore keeps its full
   intrinsic width and pushes the document wider than the viewport — the overflow
   is pure layout, and the content behind it is perfectly readable.

   The correction is confined to (a) phone widths only and (b) navbars: the slot
   may shrink and wrap, and its buttons align right on the new line. Nothing is
   hidden, reordered or removed, so every control stays reachable. Above 640px no
   rule here applies and the desktop layout is byte-for-byte unaffected.

   Breadcrumbs get the same treatment: they are a single nowrap line, so a long
   company name took the X1 breadcrumb row 108px past a 390px viewport. Wrapping
   the list is the smallest fix that keeps every crumb visible.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  nav.navbar {
    flex-wrap: wrap;
    row-gap: 0.25rem;
  }

  nav.navbar > .flex-none {
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
    max-width: 100%;
  }

  nav.navbar > .flex-none > .btn {
    flex: 0 1 auto;
    min-width: 0;
  }

  .breadcrumbs ul {
    flex-wrap: wrap;
    row-gap: 0.125rem;
  }

  .breadcrumbs li {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* ── O-7, round 2 (2026-11-05) ─────────────────────────────────────────────
   First correction measured: S2 50→3, S5 191→119, X1 69→54, S3 0→0.
   The residual offenders were then identified by DOM ancestry rather than guessed:

   S2  3px  `nav.navbar > .flex-1 > span.text-xl … > span` — the header title line.
            Cause: 1.5rem side padding on a 390px viewport leaves 366px for a
            logo + title that need 369px. Fix: narrower phone padding. No text is
            clipped, truncated or hidden.
   S5 119px `div.tpm-house-wrapper` — the TPM "house" chart lays five pillar columns
            side by side with content wider than the card. Fix: the chart's own
            wrapper scrolls horizontally at phone widths, so the chart stays complete
            and readable and the PAGE stops overflowing. Not overflow:hidden — the
            content is reachable.
   X1  54px the hero row `div.flex.items-center.gap-6` (title + right-aligned
            "1 categories / 0 critical gaps" block) cannot wrap.
   X1  29px `nav.navbar > .flex-1` (Back + APEX360 + "Intelligence Platform" + badge)
            cannot wrap either.

   Nothing is removed. Every control, badge and figure remains on screen.          */
@media (max-width: 640px) {
  nav.navbar {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  nav.navbar > .flex-1 {
    flex-wrap: wrap;
    min-width: 0;
    row-gap: 0.25rem;
  }

  .tpm-house-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .max-w-7xl > .flex.items-center.gap-6 {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   29_homepage_visibility.css
   HOMEPAGE VISIBILITY CORRECTION — the "it still looks unchanged" fix.
   ═══════════════════════════════════════════════════════════════════════════

   WHY THIS FILE EXISTS (root cause, evidence-backed)
   --------------------------------------------------
   The homepage escalation ("still unchanged") was investigated end to end.
   The conclusion was NOT a delivery problem:

     * the public site (appex360.com) serves the SAME digest-fingerprinted
       bundles as this running application;
     * the served bundle
       /assets/design_system/design_system-94ba12ab…css (371,183 bytes)
       CONTAINS every latest rule — verified by grepping the fetched bundle for
       `5.15vw`, `apxc-headline-size`, `apxc-halo-core`,
       `launch-badge.r27-launch-badge` and `r27-marketplace-card:hover`.

   So the correct assets were reaching the browser. The real cause was the
   last category: THE CORRECT ASSETS LOAD BUT THE VISUAL CHANGE IS TOO SMALL
   TO SEE. Layer 25 only *refines* the existing R27 composition — a nav tint,
   a 46%→52% column nudge, 96px section rhythm, card gradients and hover
   lifts. Nothing changed composition, emphasis or legibility, so a viewer
   correctly reports "it looks the same".

   THE MEASURED DEFECT THIS FILE FIXES
   -----------------------------------
   Layer 25 §3 forces the five assessment cards into
   `grid-template-columns: repeat(5, minmax(0, 1fr))` from 1101px up. On a
   standard 1232px content width that is ~232px per card — yet EACH card
   contains a title, a description, a status badge, THREE two-to-three-line
   evidence rows, a metadata row, three feature chips and a CTA. Five
   ~232px columns cannot show that legibly, so the band reads as a cramped
   wall of small text instead of the reference's clean executive row.
   That single fact is the largest visible gap on the page.

   CHANGE CONTROL / WHY THIS IS A NEW FILE AND NOT AN EDIT TO 24 OR 25
   -------------------------------------------------------------------
   24_homepage_enterprise.css and 25_homepage_mockup_convergence.css are
   SHA-256 baseline-guarded by
   spec/validators/homepage_enterprise_layer_baseline_spec.rb. Appending to
   either would trip that drift guard. design_system.css itself is NOT
   hashed (the spec regex-checks its `//= require` lines only) and a NEW
   stylesheet is not in the protected set — so this correction ships with
   every certified file left byte-identical. Revert = delete this file and
   the single require line below.

   LOAD ORDER, deliberately: this is the LAST `//= require` in the manifest,
   so it is the last stylesheet evaluated and therefore wins the cascade.
   That matters — 25 §8 records evidence that 19_homepage_redesign.css is
   evaluated AFTER 25, so only a layer required last can reliably override.

   SCOPE / SAFETY
   --------------
   * Appearance only. No ERB file is touched. No class attribute string, no
     section order, no route, no partial and no content is modified — the
     protected homepage suites assert those exact strings.
   * No existing selector is rewritten and no token VALUE is redefined; this
     layer only consumes tokens already published upstream.
   * Nothing here touches APPEXi reasoning, scoring, question banks, billing
     or authentication.
   * PRESERVED EXACTLY (owner ruling 2026-10-15): TPM and Reliability stay
     "Facilitated Pilot"; Lean, Six Sigma and 5S stay "Coming Soon · Q2 2027";
     all five assessment links stay live; "RCM" stays on the methodology
     wheel. All three are ERB-level facts this layer cannot alter.
   * `.r27-marketplace-card--soon` is the existing modifier the partial
     already emits for the three non-pilot cards — reused, never renamed.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   1 · FIVE ASSESSMENT CARDS — give the band room to breathe
   ---------------------------------------------------------------------------
   5 columns only where there is genuine room for them (≥1600px). Below that
   the band steps down to 4 / 3 / 2 / 1 columns so each card has a humane
   reading measure. All five cards and all five links are untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

.r27-marketplace-grid {
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 18px;
}

@media (min-width: 700px) {
  .r27-marketplace-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The common desktop widths (1101–1599px) get THREE wide cards — the
   readability win that is actually visible on a laptop. */
@media (min-width: 1101px) {
  .r27-marketplace-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (min-width: 1101px) {
  /* The supplied mockup shows all five disciplines in one compact row. */
  .r27-marketplace-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
  }

  .r27-marketplace-card {
    padding: 16px 12px !important;
  }

  .r27-marketplace-card .r27-mp-title {
    font-size: 13px !important;
  }

  .r27-marketplace-card .r27-mp-desc {
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

  .r27-marketplace-card .r27-mp-feature {
    font-size: 10px !important;
  }
}

/* ── Card internals ──────────────────────────────────────────────────────── */

/* The card is an <a> carrying an INLINE `display:block` from the protected
   partial. An inline declaration outranks any stylesheet rule, so `!important`
   is the only way to make the card a flex column — which is what lets every
   CTA sit on one aligned baseline (owner objective: CTA alignment). This is
   the same specificity reasoning 25 §8 already documents for `.a.a`. */
.r27-marketplace-card {
  display: flex !important;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Coming-soon cards keep their existing 0.85 de-emphasis, but regain full
   contrast on hover so the band never reads as "greyed out". */
.r27-marketplace-card--soon {
  opacity: 0.9;
}

.r27-marketplace-card--soon:hover {
  opacity: 1;
}

/* ── Every CTA lands on the same baseline ──────────────────────────────── */
.r27-marketplace-card .r27-mp-cta {
  margin-top: auto;
}

.r27-mp-cta {
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.r27-marketplace-card:hover .r27-mp-cta {
  transform: translateY(-1px);
}

/* ── Card title: the card's anchor ─────────────────────────────────────── */
.r27-mp-title {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.r27-mp-desc {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ── Icon chip: one clear element of colour per discipline ─────────────── */
.r27-mp-icon-wrap {
  flex: 0 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2 · AVAILABILITY BADGES — make commercial state unmissable
   ---------------------------------------------------------------------------
   The badge is a bare <span> with INLINE colours (the partial styles it
   inline on purpose to stay out of the protected stylesheet), so it has no
   class hook. It is selected structurally instead:

     .r27-marketplace-card > div:not([class]) > span

   That matches ONLY the badge. The card's other classless wrapper div holds
   the "Measures / Built for / You receive" rows, whose children are <div>s —
   not <span>s — and .r27-mp-meta / .r27-mp-features carry their own classes.

   Only properties the inline styles do NOT set are declared here
   (text-transform, letter-spacing, font-weight), so there is no fight with
   the partial and no `!important` is needed. Result: "FACILITATED PILOT"
   versus "COMING SOON · Q2 2027" reads instantly as two different states —
   the owner's availability objective, expressed visually.
   ═══════════════════════════════════════════════════════════════════════════ */

.r27-marketplace-card > div:not([class]) > span {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  white-space: nowrap;
}

/* Pilot (TPM · Reliability) — add a quiet confirmatory halo. */
.r27-marketplace-card:not(.r27-marketplace-card--soon) > div:not([class]) > span {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.09);
}

/* Coming soon (Lean · Six Sigma · 5S) — dashed edge, so the distinction
   survives even in greyscale. */
.r27-marketplace-card--soon > div:not([class]) > span {
  border-style: dashed;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3 · INTELLIGENCE WHEEL — raise the centrepiece
   ---------------------------------------------------------------------------
   25 §2 owns `.r27-hero-visual::before` (the halo) and is not edited here.
   This adds the SECOND element — a concentric orbit ring — via ::after, so
   the wheel reads as an instrument rather than a floating graphic. Purely
   decorative: pointer-events:none keeps every interactive segment clickable
   and the wheel's own controller is untouched. §2 sets `.r27-hero-visual > *`
   to z-index:1, so z-index:0 keeps this safely behind the wheel.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1101px) {
  .r27-hero-visual::after {
    content: "";
    position: absolute;
    inset: 6%;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    border: 1px solid var(--apxc-nav-hairline, rgba(255, 255, 255, 0.07));
    box-shadow: inset 0 0 60px var(--apxc-halo-outer, rgba(143, 135, 188, 0.1));
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   4 · NAVIGATION — a bar that reads as an instrument panel
   ---------------------------------------------------------------------------
   Appearance/state only: no geometry is changed, because the nav bar was
   already measured. Links get a dependable hover/active affordance and the
   primary CTA gains a little lift so the bar has a clear focal point.
   ═══════════════════════════════════════════════════════════════════════════ */

.r27-nav-link {
  transition: color 0.16s ease, opacity 0.16s ease;
}

.r27-nav-link:hover {
  color: var(--apxc-accent);
}

.r27-nav-cta {
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.r27-nav-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--apxc-accent) 26%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   5 · SECTION HIERARCHY — one legible act heading per section
   ---------------------------------------------------------------------------
   The reference separates its acts by typographic weight, not by boxes. The
   eyebrow becomes a tracked, accent-coloured label and the title gains a
   short accent rule, so the page scans as a sequence of named sections.
   Purely presentational: no heading text, order or markup changes.
   ═══════════════════════════════════════════════════════════════════════════ */

.r27-section-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--apxc-accent);
}

.r27-section-title {
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.r27-section-header {
  border-bottom: 1px solid var(--apxc-nav-hairline, rgba(255, 255, 255, 0.07));
  padding-bottom: 18px;
  margin-bottom: 34px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6 · SPACING RHYTHM — consistent band gutters
   ═══════════════════════════════════════════════════════════════════════════ */

.r27-assessment-marketplace {
  --apxc-band-gutter: 26px;
}

.r27-mp-upsell {
  margin-top: var(--apxc-band-gutter);
}

/* ═══════════════════════════════════════════════════════════════════════════
   7 · HORIZONTAL OVERFLOW GUARD
   ---------------------------------------------------------------------------
   Every element in the card band is allowed to shrink and wrap, so no width
   can push the page past the viewport. (The badges below 481px are already
   handled by 25 §8 — this complements it, it does not replace it.)
   ═══════════════════════════════════════════════════════════════════════════ */

.r27-assessment-marketplace,
.r27-marketplace-grid,
.r27-marketplace-card {
  max-width: 100%;
}

@media (max-width: 480px) {
  .r27-marketplace-card > div:not([class]) > span {
    white-space: normal;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   8 · MOTION SAFETY — every motion above is a short transform/shadow
       (≤200ms) and is disabled outright under reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .r27-marketplace-card,
  .r27-marketplace-card:hover,
  .r27-mp-cta,
  .r27-nav-cta,
  .r27-nav-cta:hover,
  .r27-marketplace-card:hover .r27-mp-cta {
    transition: none;
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   9 · REFERENCE COMPOSITION — hero, wheel details, assessment row
   ---------------------------------------------------------------------------
   The mockup's hero is a single compact viewport with a readable, not oversized,
   headline and the wheel as its peer. The wheel navigator remains intact; its
   detail card is compressed so the framework controls are not pushed below the
   fold. The 5-card band is handled above at desktop widths.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1101px) {
  .r27-hero-visual .apex-donut-stack {
    max-width: 300px !important;
  }

  .r27-hero-headline {
    font-size: clamp(40px, 4.15vw, 56px);
    line-height: 1.02;
  }

  .r27-hero {
    padding-top: 72px;
    padding-bottom: 28px;
  }

  .r27-hero .fw-nav-detail-inner {
    padding: 10px 12px 8px;
    gap: 7px;
  }

  .r27-hero .fw-nav-detail-icon {
    width: 36px;
    height: 36px;
  }

  .r27-hero .fw-nav-detail-title {
    font-size: 16px;
  }

  .r27-hero .fw-nav-detail-sub,
  .r27-hero .fw-nav-detail-hl,
  .r27-hero .fw-nav-detail-ai-text,
  .r27-hero .fw-nav-detail-meta,
  .r27-hero .fw-nav-detail-outcome-item {
    font-size: 10px;
    line-height: 1.3;
  }

  .r27-hero .fw-nav-detail-ai {
    padding: 5px 7px;
    margin: 0;
  }

  .r27-hero .fw-nav-detail-info {
    padding: 2px 0;
  }

  .r27-hero .fw-nav-detail-cta {
    padding: 5px 10px;
    font-size: 11px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   10 · HERO FIRST SCREEN — BADGE RHYTHM
   ---------------------------------------------------------------------------
   The hero carries TEN small badges across two rows directly below the CTAs:
   four credibility badges (security, encryption, trial, no card) and six
   capability badges (enterprise ready, AI-powered, explainable, secure,
   operational excellence, executive intelligence).

   At their inherited size those two rows read as a dense slab of pills that
   competes with the headline for attention and pushes the fold down. Nothing
   is removed, reordered or renamed here — the section only:

     • steps the badge type and padding DOWN one notch, so both rows read as
       supporting detail rather than a second headline;
     • tightens the gap between the two rows, so the pair occupies less
       vertical space above the fold;
     • guarantees both rows wrap instead of sprawling past their column.

   Reversible: delete this section and the inherited R27 sizing returns
   unchanged. 19_homepage_redesign.css (protected) is NOT edited, and no
   protected R27 token or colour is redefined.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Both rows: wrap, and never exceed their column ─────────────────────── */
.r27-hero-credibility,
.r27-hero-capabilities {
  max-width: 100%;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* The capability row is the more numerous of the two, so it gets the smaller
   top gap — the pair then reads as one block of supporting detail. */
.r27-hero-capabilities {
  margin-top: 0.75rem;
}

/* ── Credibility badges: compact, quiet confirmation ────────────────────── */
.r27-hero-cred-badge {
  font-size: 0.75rem;
  line-height: 1.35;
  padding: 0.25rem 0.6rem;
  opacity: 0.85;
  white-space: nowrap;
}

/* ── Capability badges: second-order detail, one step down again ────────── */
.r27-cap-badge {
  font-size: 0.6875rem;
  line-height: 1.35;
  padding: 0.2rem 0.55rem;
  opacity: 0.72;
  white-space: nowrap;
}

/* Below 900px the hero is no longer wide enough for the pills to compete with
   it, so the smaller type only costs legibility. Hand full size and full
   opacity back. (25 §8 already owns the pass below 481px.) */
@media (max-width: 900px) {
  .r27-hero-cred-badge,
  .r27-cap-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem;
    opacity: 1;
  }

  .r27-hero-capabilities {
    margin-top: 0.5rem;
  }
}

/* Match the §7 overflow guard: no badge may push the page past the viewport. */
@media (max-width: 480px) {
  .r27-hero-cred-badge,
  .r27-cap-badge {
    white-space: normal;
    text-align: center;
  }
}
/* ══════════════════════════════════════════════════════════════════
   APPEX360 HOMEPAGE — CONVERGENCE SHELL (ADDITIVE)
   Owner ruling 2026-10-17: Option B — bounded component-level
   compression. Adds tab panels + disclosure accordions so the
   supporting bands stop stacking into one continuous scroll.

   SCOPE DISCIPLINE
   • Every rule is namespaced .apx-conv* — nothing else is selected.
   • No existing homepage class, token, partial or asset is modified.
   • Panels are visible by default. JavaScript only adds the [hidden]
     attribute once it is ready, so with JS disabled the page degrades
     to the full stacked layout (no content is ever unreachable).
   • Existing .r27-animate reveal rules are untouched; the controller
     releases them inside a panel when it becomes active.
   ══════════════════════════════════════════════════════════════════ */

/* ── Shell bands ─────────────────────────────────────────────────── */
.apx-conv-band {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 24px 0;
}

.apx-conv-band--tight { padding-top: 0; }

/* ── Band surface lock (owner ruling: dark palette on every band) ───
   These bands previously carried no background of their own, so they
   inherited whatever the page shell painted. If the shell ever failed
   to paint, the bands showed through as white strips. Each band now
   paints the canonical homepage surface explicitly. Visually identical
   to the page surface today; it can no longer fall back to white.
   Additive and namespaced — no r27-* rule is changed. */
.apx-conv-band {
  background-color: var(--r27-surface, #0B1021);
}

/* Same guarantee for the canvas itself, scoped to pages that contain the
   homepage shell. Prevents a white strip appearing above/below the page
   container on any browser that paints the root canvas first. */
html:has(.r27-page),
body:has(.r27-page) {
  background-color: var(--r27-surface, #0B1021);
}

/* ── Tabs ────────────────────────────────────────────────────────── */
.apx-conv-tabs {
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 20px;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.045) 0%,
      rgba(255, 255, 255, 0.012) 100%);
  overflow: hidden;
}

.apx-conv-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
}

.apx-conv-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.66);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease,
              border-color 150ms ease, transform 150ms ease;
}

.apx-conv-tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.apx-conv-tab:active { transform: scale(0.98); }

.apx-conv-tab:focus-visible {
  outline: 2px solid var(--r27-accent, #776fa3);
  outline-offset: 2px;
}

.apx-conv-tab[aria-selected="true"] {
  color: #fff;
  background: rgba(119, 111, 163, 0.26);
  border-color: rgba(119, 111, 163, 0.55);
}

.apx-conv-tab i {
  font-size: 12px;
  opacity: 0.85;
}

/* ── Panels ──────────────────────────────────────────────────────── */
.apx-conv-panel[hidden] { display: none; }

.apx-conv-panel {
  animation: apxConvFade 180ms ease-out both;
}

@keyframes apxConvFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Disclosure accordion ────────────────────────────────────────── */
.apx-conv-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.apx-conv-details {
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.022);
  overflow: hidden;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.apx-conv-details:hover { border-color: rgba(255, 255, 255, 0.18); }

.apx-conv-details[open] {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(119, 111, 163, 0.42);
}

.apx-conv-details > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  cursor: pointer;
  list-style: none;
  color: rgba(255, 255, 255, 0.90);
  font-size: 14.5px;
  font-weight: 600;
  transition: color 150ms ease, background-color 150ms ease;
}

.apx-conv-details > summary::-webkit-details-marker { display: none; }

.apx-conv-details > summary:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
}

.apx-conv-details > summary:focus-visible {
  outline: 2px solid var(--r27-accent, #776fa3);
  outline-offset: -2px;
}

.apx-conv-details > summary > i.apx-conv-icon {
  font-size: 13px;
  color: var(--r27-accent, #776fa3);
  opacity: 0.95;
}

.apx-conv-details > summary > .apx-conv-hint {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.42);
  white-space: nowrap;
}

.apx-conv-details > summary > .apx-conv-hint > i {
  font-size: 11px;
  transition: transform 200ms ease;
}

.apx-conv-details[open] > summary > .apx-conv-hint > i {
  transform: rotate(180deg);
}

.apx-conv-body {
  padding: 0 6px 10px;
  animation: apxConvFade 180ms ease-out both;
}

/* The bands inside a panel keep their own internal padding; trim only
   the large inter-section rhythm that the stacked layout needed. */
.apx-conv-body > section,
.apx-conv-body > div { margin-top: 0; }

/* ── Compact intro line above a band ─────────────────────────────── */
.apx-conv-lede {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.apx-conv-lede p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.45);
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .apx-conv-band { padding-left: 16px; padding-right: 16px; }
  .apx-conv-tablist {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .apx-conv-tablist::-webkit-scrollbar { display: none; }
  .apx-conv-tab { flex: 0 0 auto; padding: 9px 14px; font-size: 13px; }
  .apx-conv-details > summary { padding: 14px 16px; font-size: 13.5px; }
  .apx-conv-details > summary > .apx-conv-hint { display: none; }
}

@media (max-width: 420px) {
  .apx-conv-tab { font-size: 12.5px; padding: 8px 12px; }
}

/* ── Motion preferences ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .apx-conv-panel,
  .apx-conv-body { animation: none; }
  .apx-conv-tab,
  .apx-conv-details,
  .apx-conv-details > summary,
  .apx-conv-details > summary > .apx-conv-hint > i {
    transition: none;
  }
}
/* APPEX360 homepage first-screen convergence — additive and reversible.
   Only applies on the public homepage shell; no content or functionality is
   hidden, removed, or resized through JavaScript. */
.r27-page .r27-hero {
  padding-top: clamp(28px, 4vh, 54px) !important;
  padding-bottom: 18px !important;
}

.r27-page .r27-hero-inner {
  align-items: flex-start !important;
  gap: clamp(24px, 4vw, 56px) !important;
  max-width: 1220px !important;
}

.r27-page .r27-hero-text {
  flex: 0 1 52% !important;
  max-width: 52% !important;
}

.r27-page .r27-hero-visual {
  flex: 0 1 48% !important;
  min-width: 0 !important;
  align-self: flex-start !important;
  justify-content: center !important;
}

.r27-page .r27-hero-visual .apex-donut-stack {
  width: min(100%, 430px) !important;
  max-width: 430px !important;
  height: auto !important;
  margin: 0 auto !important;
  gap: 8px !important;
}

.r27-page .r27-hero-visual .apex-donut-wheel {
  width: min(100%, 350px) !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  margin: 0 auto !important;
}

.r27-page .r27-hero-visual .fw-nav {
  margin-top: 8px !important;
}

.r27-page .r27-hero-visual .fw-nav-detail-inner {
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
}

.r27-page .r27-hero-visual .fw-nav-detail-info {
  max-height: 54px !important;
  overflow: auto !important;
  padding: 0 !important;
}

.r27-page .r27-hero-visual .fw-nav-detail-info > *:not(:first-child) { display: none !important; }
.r27-page .r27-hero-visual .fw-nav-detail-ai { display: none !important; }
.r27-page .r27-hero-visual .fw-nav-chips { gap: 4px !important; flex-wrap: wrap !important; }
.r27-page .r27-hero-visual .fw-nav-chip { padding: 6px 9px !important; font-size: 10px !important; }

.r27-page .apx-ent-hero-console { display: none !important; }

@media (min-width: 901px) {
  .r27-page .r27-hero-inner { display: grid !important; grid-template-columns: 1.08fr 0.92fr !important; }
  .r27-page .r27-hero-text { width: auto !important; max-width: none !important; }
  .r27-page .r27-hero-visual { width: auto !important; max-width: none !important; }
}

@media (max-width: 900px) {
  .r27-page .apx-ent-hero-console { display: block !important; }
}

.r27-page .apx-ent-hero-console {
  max-width: 1160px !important;
  margin: 16px auto 0 !important;
}

.r27-page .r27-hero-headline {
  font-size: clamp(34px, 4vw, 54px) !important;
  line-height: 1.02 !important;
}

.r27-page .r27-section-eyebrow {
  margin-bottom: 12px !important;
}

.r27-page .r27-hero-subline {
  margin-top: 12px !important;
  line-height: 1.5 !important;
}

.r27-page .r27-hero-credibility,
.r27-page .r27-hero-capabilities {
  margin-top: 12px !important;
}

.r27-page .r27-marketplace-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.r27-page .r27-assessment-marketplace {
  padding-top: 26px !important;
  padding-bottom: 32px !important;
}

@media (max-width: 900px) {
  .r27-page .r27-hero { padding-top: 22px !important; }
  .r27-page .r27-hero-inner { gap: 18px !important; }
  .r27-page .r27-hero-visual .apex-donut-stack { max-width: 310px !important; }
  .r27-page .r27-marketplace-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* ── Intelligence Wheel restored at tablet/mobile (2026-10-19) ─────
     The protected baseline (19_homepage_redesign.css:501, inside its own
     @media max-width:768px block) sets `.r27-hero-visual { display:none }`,
     which removed the signature wheel entirely at 768px and 390px — the one
     element the brief calls "prominent". The baseline is NOT edited; the
     wheel is restored here, in the newest convergence layer, as a centred
     band beneath the hero copy. */
  .r27-page .r27-hero-visual {
    display: flex !important;
    width: 100% !important;
    max-width: 310px !important;
    margin: 6px auto 0 !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .r27-page .r27-hero-visual .apex-donut-stack {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ── Tablet Intelligence Wheel balance (2026-10-19) ────────────────────
   Measured at 768 px: the wheel column was 310×718 — a 310 px donut
   stacked on a navigator forced to 318 px of wrapped detail (188 px at
   desktop) plus 62 px of wrapped chips (32 px at desktop). The height came
   from the column being too narrow, not from the wheel.
   Widening the column and capping the donut alone yields a near-square
   composition (≈520×536) while the wheel stays larger than it was.
   Scoped strictly to 641–900 px: desktop (>900) and mobile (≤640) are
   byte-for-byte unaffected. */
@media (min-width: 641px) and (max-width: 900px) {
  .r27-page .r27-hero-visual {
    max-width: 520px !important;
  }
  .r27-page .r27-hero-visual .apex-donut-stack {
    width: 100% !important;
    max-width: 520px !important;
  }
  .r27-page .r27-hero-visual .apex-donut-container {
    width: 100% !important;
    max-width: 300px !important;
    margin: 0 auto !important;
  }
  .r27-page .r27-hero-visual .fw-nav {
    width: 100% !important;
  }
}

@media (min-width: 769px) {
  .r27-page .r27-launch-badge {
    position: relative !important;
    top: 36px !important;
    margin-bottom: 54px !important;
  }
}

@media (max-width: 640px) {
  .r27-page .r27-hero { padding-top: 16px !important; padding-bottom: 12px !important; }
  .r27-page .r27-hero-inner { gap: 10px !important; }
  .r27-page .r27-hero-text { max-width: 100% !important; }
  .r27-page .r27-hero-visual .apex-donut-stack { max-width: 260px !important; }
  .r27-page .apx-ent-hero-console { margin-top: 10px !important; }
  .r27-page .r27-assessment-marketplace { padding-top: 18px !important; }
  .r27-page .r27-marketplace-grid { grid-template-columns: 1fr !important; }
}

/* Reference-photo alignment: restrained violet/blue hero light and a clear
   violet primary action. Layout, copy, links, and all existing interactions stay intact. */
.r27-page .r27-hero {
  background-image:
    radial-gradient(ellipse at 78% 38%, rgba(124, 92, 235, 0.20) 0%, transparent 46%),
    radial-gradient(ellipse at 18% 0%, rgba(75, 108, 207, 0.13) 0%, transparent 42%);
}

.r27-page .r27-btn-primary {
  background: linear-gradient(135deg, #7C3AED 0%, #5B4BCE 100%) !important;
  box-shadow: 0 10px 28px rgba(91, 75, 206, 0.28);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.r27-page .r27-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(91, 75, 206, 0.38);
}
/* APPEX360 homepage — Stage 2 B1 composition convergence (2026-11-01).
   Additive and reversible. Applies only to the public homepage shell.
   No content is removed: the tablet/mobile hero console keeps every row and
   stays fully reachable through its own scroll container. */

/* ── 1. Launch badge rhythm ────────────────────────────────────────────
   Layer 32 offsets the badge by top:36px + margin-bottom:54px on ≥769px —
   ~90px of dead vertical space above the headline that the B1 reference does
   not have (B1 keeps the badge tight against the headline). */
@media (min-width: 769px) {
  .r27-page .r27-launch-badge {
    top: 0 !important;
    margin-bottom: 14px !important;
  }
}

/* ── 2. Headline scale ─────────────────────────────────────────────────
   B1 sets a tighter display line-height and a slightly smaller cap than the
   layer-32 clamp(34px, 4vw, 54px), which produced a 3-line block that pushed
   the metric strip below the fold at 1440. */
.r27-page .r27-hero-headline {
  font-size: clamp(32px, 3.6vw, 48px) !important;
  line-height: 1.03 !important;
  letter-spacing: -0.015em !important;
}

/* ── 3. Tablet / mobile hero console ──────────────────────────────────
   Measured 2026-11-01: the hero block is 2,471px tall at 768 and 2,485px at
   390. The dominant contributor is the hero console, which layer 32 restores
   as a full stacked block below 900px. Capping its viewport height with its
   own scrollbar keeps every row present and reachable while restoring B1's
   first-screen density (B1 first screen = headline + subcopy + actions +
   gauge + metric strip). */
@media (max-width: 900px) {
  .r27-page .apx-ent-hero-console {
    max-height: 340px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 640px) {
  .r27-page .apx-ent-hero-console {
    max-height: 260px !important;
    margin-top: 8px !important;
  }
}

/* ── 4. First-screen band spacing ─────────────────────────────────────
   Bring the explore ribbon and the top of the five-assessment strip into the
   first screen at 1440/1920, matching B1's "hero + strip" first screen. */
.r27-page .r27-hero {
  padding-bottom: 10px !important;
}

.r27-page .r27-assessment-marketplace {
  padding-top: 20px !important;
}

@media (min-width: 901px) {
  .r27-page .r27-hero-capabilities {
    margin-top: 10px !important;
  }
}
/* ══════════════════════════════════════════════════════════════════════════
   GUIDED TOUR — .gt-* only
   User-initiated onboarding. Nothing here is visible until the user opens it.
   Uses existing design tokens with hard fallbacks so it works on every theme.
   ══════════════════════════════════════════════════════════════════════════ */

.gt-panel {
  position: fixed;
  right: 1.25rem;
  bottom: 5.5rem; /* clears the floating dock */
  z-index: 900;
  font-family: inherit;
}

/* ── Launcher ──────────────────────────────────────────────────────────── */

.gt-launcher {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--r27-border, rgba(255, 255, 255, 0.14));
  background: var(--r27-glass, rgba(17, 24, 39, 0.92));
  color: var(--r27-text, #e5e7eb);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.gt-launcher:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34);
  border-color: var(--r27-accent, #776fa3);
}

.gt-launcher:focus-visible {
  outline: 2px solid var(--r27-accent, #776fa3);
  outline-offset: 2px;
}

.gt-launcher__count {
  font-variant-numeric: tabular-nums;
  opacity: 0.65;
  font-size: 0.75rem;
}

/* ── Dialog ────────────────────────────────────────────────────────────── */

.gt-dialog {
  margin-top: 0.6rem;
  width: min(24rem, calc(100vw - 2.5rem));
  border-radius: 14px;
  border: 1px solid var(--r27-border, rgba(255, 255, 255, 0.14));
  background: var(--r27-surface, #0b1120);
  color: var(--r27-text, #e5e7eb);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  animation: gt-rise 180ms ease-out;
}

.gt-dialog[hidden] { display: none; }

@keyframes gt-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .gt-dialog { animation: none; }
  .gt-launcher { transition: none; }
}

.gt-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1rem 0.5rem;
}

.gt-dialog__eyebrow {
  margin: 0 0 0.15rem;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--r27-accent, #a5a0d6);
}

.gt-dialog__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.gt-dialog__close {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 140ms ease, background 140ms ease;
}

.gt-dialog__close:hover { opacity: 1; background: rgba(255, 255, 255, 0.06); }
.gt-dialog__close:focus-visible { outline: 2px solid var(--r27-accent, #776fa3); outline-offset: 2px; }

/* ── Progress ──────────────────────────────────────────────────────────── */

.gt-dialog__progress { padding: 0 1rem 0.5rem; }

.gt-progress-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.gt-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--r27-accent, #776fa3);
  transition: width 200ms ease-out;
}

.gt-progress-label {
  margin: 0.4rem 0 0;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
}

/* ── Body ──────────────────────────────────────────────────────────────── */

.gt-dialog__body { padding: 0.25rem 1rem 0.75rem; }

.gt-dialog__text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  opacity: 0.88;
}

.gt-dialog__actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.gt-action-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--r27-accent, #a5a0d6);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 140ms ease;
}

.gt-action-link:hover { border-bottom-color: currentColor; }
.gt-action-link:focus-visible { outline: 2px solid var(--r27-accent, #776fa3); outline-offset: 2px; }

.gt-help-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  opacity: 0.65;
  color: inherit;
  text-decoration: none;
  transition: opacity 140ms ease;
}

.gt-help-link:hover { opacity: 1; }
.gt-help-link:focus-visible { outline: 2px solid var(--r27-accent, #776fa3); outline-offset: 2px; }

/* ── Footer / controls ─────────────────────────────────────────────────── */

.gt-dialog__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--r27-border, rgba(255, 255, 255, 0.1));
  background: rgba(0, 0, 0, 0.15);
}

.gt-dialog__nav { display: flex; gap: 0.4rem; }

.gt-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--r27-border, rgba(255, 255, 255, 0.14));
  background: transparent;
  color: inherit;
  transition: background 140ms ease, opacity 140ms ease;
}

.gt-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.gt-btn:focus-visible { outline: 2px solid var(--r27-accent, #776fa3); outline-offset: 2px; }
.gt-btn--ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); }

.gt-btn--primary {
  background: var(--r27-accent, #776fa3);
  border-color: transparent;
  color: #0b1120;
}

.gt-btn--primary:hover { filter: brightness(1.08); }

.gt-dialog__meta { display: flex; gap: 0.75rem; align-items: center; }

.gt-inline-form { display: inline; margin: 0; }

.gt-link-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.75rem;
  opacity: 0.55;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 140ms ease;
}

.gt-link-button:hover { opacity: 1; }
.gt-link-button:focus-visible { outline: 2px solid var(--r27-accent, #776fa3); outline-offset: 2px; }

/* ── Dashboard entry card ──────────────────────────────────────────────── */

.gt-entry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: 14px;
  border: 1px solid var(--ds-border, rgba(119, 111, 163, 0.35));
  background: linear-gradient(135deg, rgba(119, 111, 163, 0.14), rgba(119, 111, 163, 0.04));
}

.gt-entry__icon {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--r27-accent, #776fa3);
  color: #0b1120;
  font-size: 1rem;
}

.gt-entry__body { flex: 1 1 16rem; min-width: 0; }

.gt-entry__title {
  margin: 0 0 0.2rem;
  font-size: 0.9375rem;
  font-weight: 700;
}

.gt-entry__text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  opacity: 0.78;
}

.gt-entry__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.gt-entry__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ── Standalone page ───────────────────────────────────────────────────── */

.gt-page { max-width: 56rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; }

.gt-page__eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
}

.gt-page__title { margin: 0 0 0.5rem; font-size: 1.75rem; font-weight: 700; }
.gt-page__lede { margin: 0 0 0.5rem; max-width: 44rem; line-height: 1.6; opacity: 0.85; }
.gt-page__status { margin: 0 0 1.75rem; font-size: 0.8125rem; opacity: 0.65; }

.gt-page__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }

.gt-page__step {
  display: flex;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: 14px;
  border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.1));
  background: var(--ds-surface, rgba(255, 255, 255, 0.03));
}

.gt-page__step-index {
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--r27-accent, #776fa3);
  color: #0b1120;
  font-size: 0.8125rem;
  font-weight: 700;
}

.gt-page__step-body { min-width: 0; }
.gt-page__step-phase {
  margin: 0 0 0.2rem;
  font-size: 0.6875rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.55;
}
.gt-page__step-title { margin: 0 0 0.35rem; font-size: 1rem; font-weight: 700; }
.gt-page__step-text { margin: 0 0 0.6rem; font-size: 0.875rem; line-height: 1.55; opacity: 0.85; }
.gt-page__step-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

.gt-page__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ── Contextual hint (used on assessment / results / APPEXi / marketplace) ── */

.gt-hint {
  margin: 0 0 1.25rem;
  border-radius: 12px;
  border: 1px solid var(--ds-border, rgba(255, 255, 255, 0.12));
  background: rgba(119, 111, 163, 0.08);
}

.gt-hint > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.95rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.gt-hint > summary::-webkit-details-marker { display: none; }
.gt-hint > summary:focus-visible { outline: 2px solid var(--r27-accent, #776fa3); outline-offset: 2px; }

.gt-hint__body {
  padding: 0 0.95rem 0.85rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  opacity: 0.85;
}

.gt-hint__body p { margin: 0 0 0.5rem; }
.gt-hint__body p:last-child { margin-bottom: 0; }

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .gt-panel {
    right: 0.75rem;
    left: 0.75rem;
    bottom: 4.75rem;
  }

  .gt-dialog {
    width: 100%;
    max-height: min(70vh, 32rem);
    overflow-y: auto;
  }

  .gt-dialog__footer { gap: 0.75rem; }
  .gt-dialog__meta { width: 100%; justify-content: flex-start; }

  .gt-entry { padding: 1rem; }
  .gt-entry__actions { width: 100%; }
  .gt-entry__cta { width: 100%; justify-content: center; }

  .gt-page { padding: 1.25rem 0.9rem 3rem; }
  .gt-page__title { font-size: 1.4rem; }
  .gt-page__step { padding: 0.95rem; }
}
/* ══════════════════════════════════════════════════════════════
   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.
   ──────────────────────────────────────────────────────────────────────────── */


/* ────────────────────────────────────────────────────────────────────────────
   REPORTING CONSISTENCY LAYER — REVERSIBLE ADDITION
   Standardises the executive reporting surfaces: the shared KPI card
   internals (.exk-*) and the executive surface/report navigation rail
   (.apx-rail-*). Every rule introduces a NEW class name; no existing rule in
   any earlier numbered file is modified, and neither the protected R27
   homepage nor the PDF layouts render these classes. Remove this line + the
   file to revert.
   ──────────────────────────────────────────────────────────────────────────── */


/* ────────────────────────────────────────────────────────────────────────────
   HOMEPAGE VISIBILITY CORRECTION — REVERSIBLE ADDITION (see file header)
   Fixes the measured defect that made the homepage read as "unchanged": the
   five assessment cards were forced into ~232px columns on a 1232px content
   width. Gives the card band legible width, aligns the CTAs, makes the
   availability badges unmissable and raises the wheel/nav/section hierarchy.
   Required LAST on purpose, so it wins the cascade. Appearance only: no ERB
   file, class string, section order, route or token VALUE is modified.
   Remove this line + the file to revert.
   ──────────────────────────────────────────────────────────────────────────── */


/* ────────────────────────────────────────────────────────────────────────────
   HOMEPAGE CONVERGENCE SHELL — REVERSIBLE ADDITION
   Bounded component-level compression authorised by the owner on 2026-10-17
   (Option B). Adds accessible tab panels and disclosure accordions so the
   supporting homepage bands stop stacking into one continuous scroll.
   Every rule is namespaced .apx-conv*; no existing partial, class, token or
   protected file is modified. Panels ship visible and JavaScript only adds the
   [hidden] attribute, so the page degrades to the full stacked layout.
   Remove this line + the file to revert.
   ──────────────────────────────────────────────────────────────────────────── */




/* ────────────────────────────────────────────────────────────────────────────
   GUIDED TOUR — REVERSIBLE ADDITION (Workstream 2)
   User-initiated in-app onboarding panel. Every rule is namespaced .gt-*.
   No existing partial, class, token or protected homepage file is modified.
   Ships closed and inert: the panel only appears after an explicit user
   action. Remove this line + the file to revert.
   ──────────────────────────────────────────────────────────────────────────── */