/*
 * 4P3X SafeSpark™ Hub — deep-teal colour system
 * Applied version: 29.0.0-hub-access-readiness.3-4pex-adaptive
 * Central design tokens for every Hub page, demonstration and scoped role App.
 */
:root {
  /* SafeSpark™ primary brand */
  --ss-primary: #0F766E;
  --ss-primary-hover: #115E59;
  --ss-primary-active: #134E4A;
  --ss-primary-soft: #CCFBF1;
  --ss-primary-subtle: #F0FDFA;
  --ss-primary-border: #5EEAD4;

  /* Dark surfaces */
  --ss-bg-dark: #090E18;
  --ss-bg-dark-secondary: #111827;
  --ss-bg-dark-elevated: #172033;
  --ss-bg-dark-soft: #1F2937;

  /* Light surfaces */
  --ss-bg-light: #F8FAFC;
  --ss-bg-white: #FFFFFF;
  --ss-bg-muted: #F1F5F9;

  /* Text */
  --ss-text-on-dark: #F8FAFC;
  --ss-text-on-dark-muted: #CBD5E1;
  --ss-text-main: #172033;
  --ss-text-muted: #475569;
  --ss-text-subtle: #64748B;

  /* Borders */
  --ss-border-light: #D8E2E8;
  --ss-border-dark: #334155;
  --ss-divider-light: #E2E8F0;
  --ss-divider-dark: #253247;

  /* Focus and interaction */
  --ss-focus: #14B8A6;
  --ss-focus-outer: rgba(20, 184, 166, 0.32);
  --ss-hover-soft: rgba(15, 118, 110, 0.10);
  --ss-active-soft: rgba(15, 118, 110, 0.18);

  /* Restricted gold branding */
  --ss-gold: #C9A84C;
  --ss-gold-light: #E4CD82;
  --ss-gold-dark: #8A6A20;

  /* Semantic states */
  --ss-success: #15803D;
  --ss-success-soft: #DCFCE7;
  --ss-warning: #B45309;
  --ss-warning-soft: #FEF3C7;
  --ss-danger: #B91C1C;
  --ss-danger-soft: #FEE2E2;
  --ss-info: #0369A1;
  --ss-info-soft: #E0F2FE;
  --ss-info-text: #BAE6FD;
  --ss-warning-text: #FDE68A;
  --ss-danger-text: #FCA5A5;

  /* Optional 4P3X AI™ identity — use only in explicitly labelled AI components */
  --ss-ai-purple: #6D28D9;
  --ss-ai-purple-soft: #EDE9FE;

  /* Alpha tokens for dynamically generated interface and SVG content */
  --ss-primary-a05: rgba(15,118,110,.05);
  --ss-primary-a06: rgba(15,118,110,.06);
  --ss-primary-a09: rgba(15,118,110,.09);
  --ss-primary-a20: rgba(15,118,110,.20);
  --ss-primary-a26: rgba(15,118,110,.26);
  --ss-primary-a34: rgba(15,118,110,.34);
  --ss-primary-a50: rgba(15,118,110,.50);
  --ss-primary-a55: rgba(15,118,110,.55);
  --ss-primary-a07: rgba(15,118,110,.07);
  --ss-primary-a08: rgba(15,118,110,.08);
  --ss-primary-a10: rgba(15,118,110,.10);
  --ss-primary-a12: rgba(15,118,110,.12);
  --ss-primary-a13: rgba(15,118,110,.13);
  --ss-primary-a14: rgba(15,118,110,.14);
  --ss-primary-a15: rgba(15,118,110,.15);
  --ss-primary-a16: rgba(15,118,110,.16);
  --ss-primary-a18: rgba(15,118,110,.18);
  --ss-primary-a25: rgba(15,118,110,.25);
  --ss-primary-a28: rgba(15,118,110,.28);
  --ss-primary-a30: rgba(15,118,110,.30);
  --ss-primary-a32: rgba(15,118,110,.32);
  --ss-primary-a35: rgba(15,118,110,.35);
  --ss-primary-a38: rgba(15,118,110,.38);
  --ss-primary-a40: rgba(15,118,110,.40);
  --ss-primary-a45: rgba(15,118,110,.45);
  --ss-primary-a46: rgba(15,118,110,.46);
  --ss-info-a05: rgba(3,105,161,.05);
  --ss-info-a06: rgba(3,105,161,.06);
  --ss-info-a09: rgba(3,105,161,.09);
  --ss-info-a20: rgba(3,105,161,.20);
  --ss-info-a26: rgba(3,105,161,.26);
  --ss-info-a34: rgba(3,105,161,.34);
  --ss-info-a50: rgba(3,105,161,.50);
  --ss-info-a55: rgba(3,105,161,.55);
  --ss-info-a07: rgba(3,105,161,.07);
  --ss-info-a08: rgba(3,105,161,.08);
  --ss-info-a10: rgba(3,105,161,.10);
  --ss-info-a12: rgba(3,105,161,.12);
  --ss-info-a14: rgba(3,105,161,.14);
  --ss-info-a15: rgba(3,105,161,.15);
  --ss-info-a16: rgba(3,105,161,.16);
  --ss-info-a18: rgba(3,105,161,.18);
  --ss-info-a28: rgba(3,105,161,.28);
  --ss-info-a30: rgba(3,105,161,.30);
  --ss-info-a32: rgba(3,105,161,.32);
  --ss-info-a35: rgba(3,105,161,.35);
  --ss-info-a38: rgba(3,105,161,.38);
  --ss-info-a40: rgba(3,105,161,.40);
  --ss-info-a45: rgba(3,105,161,.45);

  /* Shadows */
  --ss-shadow-soft: 0 10px 30px rgba(2, 8, 23, 0.10);
  --ss-shadow-dark: 0 14px 38px rgba(0, 0, 0, 0.32);

  /* Layout */
  --ss-radius-small: 10px;
  --ss-radius-medium: 16px;
  --ss-radius-large: 24px;
  --ss-touch-target: 44px;

}

html { color-scheme: dark; background: var(--ss-bg-dark); }
body {
  background:
    radial-gradient(circle at 18% -8%, var(--ss-primary-a16), transparent 34rem),
    var(--ss-bg-dark) !important;
  color: var(--ss-text-on-dark);
}
body.menu-open { overflow: hidden; }
::selection { background: var(--ss-primary); color: #FFFFFF; }
a { text-underline-offset: .18em; }
a:hover { text-decoration-thickness: .12em; }

/* Consistent keyboard focus */
:focus-visible {
  outline: 3px solid var(--ss-focus) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px var(--ss-focus-outer) !important;
}
.skip:focus { background: var(--ss-bg-white); color: var(--ss-text-main); }

/* Header and navigation */
.topbar {
  background: rgba(9,14,24,.94) !important;
  border-bottom-color: var(--ss-divider-dark) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
}
.brand strong { color: var(--ss-text-on-dark); }
.brand small { color: var(--ss-text-on-dark-muted) !important; }
.nav a,.nav button,.native-menu>summary { color: var(--ss-text-on-dark-muted) !important; }
.nav a:hover,.nav button:hover,.nav a[aria-current="page"],.nav-page-option.active,.nav-role-link.active {
  color: #FFFFFF !important;
  background: var(--ss-primary-a18) !important;
  border-color: var(--ss-primary) !important;
}
.native-menu[open]>.nav,#siteNav.open,.demo-menu-panel {
  background: var(--ss-bg-dark-secondary) !important;
  border-color: var(--ss-border-dark) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.58) !important;
}
.native-menu .nav-menu-heading strong,.demo-menu-head strong { color: var(--ss-primary-border) !important; }
.native-menu .nav-menu-heading small,.demo-menu-head small { color: var(--ss-text-on-dark-muted) !important; }
.nav-group-label,#siteNav .nav-group-label { color: var(--ss-primary-border) !important; border-color: var(--ss-divider-dark) !important; }
.menu-backdrop,.demo-menu-backdrop { background: rgba(2,8,23,.72) !important; }

/* Hero and major dark sections */
.hero,.hub-v271-hero,.big-demo-intro {
  background:
    linear-gradient(135deg,var(--ss-primary-a16),rgba(9,14,24,0) 60%),
    var(--ss-bg-dark-secondary) !important;
  border-bottom: 1px solid var(--ss-divider-dark);
}
.hero h1,.hub-v271-hero h1,.big-demo-intro h1 { color: var(--ss-text-on-dark) !important; }
.hero h1 span,.hub-v271-hero h1 span,.big-demo-intro h1 span {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--ss-primary-border) !important;
}
.eyebrow { color: var(--ss-primary-border) !important; }
.lead,.hero p,.hub-v271-hero .lead,.big-demo-intro p { color: var(--ss-text-on-dark-muted) !important; }
.hero::before,.hero::after,.card::after { animation: none !important; }

/* One button system */
.btn,.ss-button-primary,.ss-button-secondary {
  min-height: var(--ss-touch-target);
  border-radius: var(--ss-radius-small) !important;
  padding: .72rem 1rem;
  font-weight: 800;
  transition: background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.btn.primary,.btn.green,.btn.purple,.hub-primary-action,.ss-button-primary,
button[type="submit"].primary,.install-trigger.primary {
  background: var(--ss-primary) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--ss-primary) !important;
  box-shadow: none !important;
}
.btn.primary:hover,.btn.green:hover,.btn.purple:hover,.hub-primary-action:hover,.ss-button-primary:hover {
  background: var(--ss-primary-hover) !important;
  border-color: var(--ss-primary-hover) !important;
  transform: translateY(-1px);
}
.btn.primary:active,.btn.green:active,.btn.purple:active,.hub-primary-action:active,.ss-button-primary:active {
  background: var(--ss-primary-active) !important;
  transform: none;
}
.btn.ghost,.btn.secondary,.ss-button-secondary {
  background: transparent !important;
  color: var(--ss-primary-border) !important;
  border: 1px solid var(--ss-primary-border) !important;
}
.btn.ghost:hover,.btn.secondary:hover,.ss-button-secondary:hover {
  background: var(--ss-primary-a12) !important;
  color: #FFFFFF !important;
  border-color: var(--ss-focus) !important;
}
.quiet-link { color: var(--ss-primary-border) !important; }
.btn[disabled],button[disabled],input[disabled],select[disabled],textarea[disabled],.disabled,[aria-disabled="true"] {
  opacity: .55 !important;
  cursor: not-allowed !important;
  border-color: var(--ss-border-dark) !important;
  filter: saturate(.45);
}

/* Cards and grouped content */
.card,.sidebar,.workspace,.stepbox,.metric,.role-install-card,.hub-app-launcher,.recommended-card,
.current-slide-card,.classroom-controller,.student-response,.support-flag,.device-grid article,.health-grid article,
.timeline-rich article,.parent-child-card,.home-action,.strength-next>div,.parent-update,.lesson-preview-rich,
.executive-callout,.priority-list button,.strand-grid>div,.indicator-grid>div,.support-summary-grid>div,
.governance-grid>div,.pack-grid>div,.attendance-grid>div,.staff-cards>article,.scope-matrix>article,
.demo-panel,.demo-metric,.demo-lesson-stage,.demo-slide,.demo-student,.demo-chain article,.demo-scope-card,
.demo-benefit,.big-demo-launch-panel,.demo-director-shell {
  background: var(--ss-bg-dark-elevated) !important;
  border-color: var(--ss-border-dark) !important;
  color: var(--ss-text-on-dark);
  box-shadow: none !important;
}
.card:hover,.role-install-card:hover,.hub-app-launcher:hover,.demo-link:hover,.priority-list button:hover {
  border-color: var(--ss-primary) !important;
}
.card p,.stepbox p,.metric span,.role-install-card p,.hub-app-launcher p,.demo-panel p,.demo-metric span,
.demo-scope-card span,.demo-benefit span,.visual-description,.lesson-image-caption,.priority-list small,
.strand-grid span small,.indicator-grid span,.support-summary-grid span,.governance-grid span,.pack-grid span,
.pack-grid small,.attendance-grid span,.attendance-grid small,.staff-metrics span,.assurance-list small,
.sync-queue small,.scope-matrix p { color: var(--ss-text-on-dark-muted) !important; }
.app-accent { background: var(--ss-primary) !important; }
.notice,.safe-note,.vex-bubble,.method-output,.support-panel,.vex-response,.answer-feedback,.confidence-help,.extra-example,
.cast-assurance,.teacher-message-box,.teacher-approved-note,.owner-panel {
  background: var(--ss-primary-a10) !important;
  border-color: var(--ss-primary-a40) !important;
  color: var(--ss-text-on-dark) !important;
}

/* Light Hub catalogue cards */
.version-card,.demo-group,.trust-panel,.demo-catalogue {
  background: var(--ss-bg-white) !important;
  border-color: var(--ss-border-light) !important;
  color: var(--ss-text-main) !important;
  box-shadow: var(--ss-shadow-soft) !important;
}
.version-card h3,.demo-group h2,.demo-group h3,.trust-panel h2,.demo-catalogue h2 { color: var(--ss-text-main) !important; }
.version-card p,.demo-group p,.trust-panel p,.demo-catalogue p { color: var(--ss-text-muted) !important; }
.version-card:hover,.demo-group:hover { border-color: var(--ss-primary) !important; }
.version-card .status-line span,.badge,.status-pill,.demo-status,.live-chip,.visual-match-pill {
  background: var(--ss-primary-subtle) !important;
  border-color: var(--ss-primary-border) !important;
  color: var(--ss-primary-active) !important;
  box-shadow: none !important;
}
.badge::before,.live-chip span,.status-dot.green { background: var(--ss-primary) !important; box-shadow: none !important; }
.demo-link {
  background: var(--ss-bg-light) !important;
  border-color: var(--ss-border-light) !important;
  color: var(--ss-text-main) !important;
}
.demo-link:hover,.demo-link.active,.version-card.selected,.card.selected,[aria-selected="true"] {
  background: var(--ss-primary-subtle) !important;
  border-color: var(--ss-primary) !important;
  color: var(--ss-text-main) !important;
}

/* Forms, search, filtering and sorting */
input,select,textarea,.lesson-search,.field input,.field textarea,.field select,.parent-lesson-selector select,
.speech-rate select,.word-order input {
  min-height: var(--ss-touch-target);
  background: var(--ss-bg-dark-secondary) !important;
  color: var(--ss-text-on-dark) !important;
  border-color: var(--ss-border-dark) !important;
  border-radius: var(--ss-radius-small) !important;
}
input::placeholder,textarea::placeholder { color: #94A3B8 !important; opacity: 1; }
input:focus,select:focus,textarea:focus,.lesson-search:focus { border-color: var(--ss-focus) !important; }
input[type="checkbox"],input[type="radio"],input[type="range"] { accent-color: var(--ss-primary); }
.filter-chip,.method-btn,.confidence-btn,.word-token,.dashboard-tabs .btn,.dashboard-tabs-scroll .btn,
.parent-tabs .btn,.rolebar button,.guided-stage,.demo-layout-controls .btn,.demo-controls .btn {
  border-color: var(--ss-border-dark) !important;
  background: var(--ss-bg-dark-secondary) !important;
  color: var(--ss-text-on-dark-muted) !important;
}
.filter-chip.active,.filter-chip[aria-pressed="true"],.method-btn.active,.method-btn[aria-pressed="true"],
.confidence-btn.active,.rolebar button.active,.dashboard-tabs .btn.active,.dashboard-tabs-scroll .btn.active,
.parent-tabs .btn.active,.guided-stage.active,.demo-layout-controls .btn[aria-pressed="true"],
.demo-controls .btn[aria-pressed="true"],.answer-options input:checked+span {
  background: var(--ss-primary-a18) !important;
  border-color: var(--ss-primary) !important;
  color: var(--ss-primary-border) !important;
}

/* Lesson, pack and role interfaces */
.lesson-item,.takehome-list button,.lesson-mini-visual,.selected-lesson-visual,.lesson-visual-frame,.visual,
.demo-visual-board,.demo-slide-screen,.big-screen-visual {
  background: var(--ss-bg-dark-secondary) !important;
  border-color: var(--ss-border-dark) !important;
}
.lesson-item:hover,.lesson-item.active,.takehome-list button:hover,.priority-list button:hover {
  background: var(--ss-primary-a12) !important;
  border-color: var(--ss-primary) !important;
}
.lesson-item.done::after,.lesson-item-status,.worked-answer,.completion-checklist p.complete,.guided-stage.complete span {
  color: #86EFAC !important;
}
.progress-track,.class-progress,.table-progress,.device-meter,.storage-meter,.big-screen-stage-progress {
  background: var(--ss-bg-dark-soft) !important;
}
.progress-track span,.class-progress span,.table-progress span,.device-meter span,.storage-meter span,
.big-screen-stage-progress span.active,.portal-dot.active,.demo-progress button.active {
  background: var(--ss-primary) !important;
}
.big-screen-stage-progress span.complete,.demo-progress button.complete { background: var(--ss-success) !important; }
.visual,.demo-visual-board { box-shadow: inset 0 0 0 1px var(--ss-primary-a10); }
.visual svg,.lesson-visual-frame svg,.selected-lesson-visual svg,.teacher-slide-visual svg,.dashboard-chart,
.big-screen-visual svg { color: var(--ss-primary); }

/* Lesson portal */
.lesson-portal,.lesson-portal-v271 { color: var(--ss-text-on-dark); }
.lesson-portal::backdrop,.lesson-portal-v271::backdrop { background: rgba(2,8,23,.82) !important; }
.lesson-portal-shell,.lesson-portal-v271 .lesson-portal-shell {
  background: var(--ss-bg-dark-secondary) !important;
  border-color: var(--ss-border-dark) !important;
  box-shadow: var(--ss-shadow-dark) !important;
}
.lesson-portal-head,.lesson-portal-v271 .lesson-portal-head,
.lesson-portal-foot,.lesson-portal-v271 .lesson-portal-foot {
  background: var(--ss-bg-dark-elevated) !important;
  border-color: var(--ss-divider-dark) !important;
}
.lesson-portal-body,.lesson-portal-v271 .lesson-portal-body { background: var(--ss-bg-dark-secondary) !important; }
.v271-stage,.practice-card,.worked-example,.completion-checklist p,.matching-grid label,.answer-options label {
  background: var(--ss-bg-dark-elevated) !important;
  border-color: var(--ss-border-dark) !important;
  color: var(--ss-text-on-dark) !important;
}
.worked-number { background: var(--ss-primary) !important; color: #FFFFFF !important; }
.answer-feedback.correct { background: rgba(21,128,61,.18) !important; border-color: var(--ss-success) !important; color: #BBF7D0 !important; }
.answer-feedback.incorrect { background: rgba(185,28,28,.16) !important; border-color: var(--ss-danger) !important; color: #FECACA !important; }

/* Tables and comparison views */
.table-wrap,.demo-table-wrap { scrollbar-color: var(--ss-primary) var(--ss-bg-dark-secondary); }
.table,.demo-table { background: var(--ss-bg-dark-secondary); color: var(--ss-text-on-dark); }
.table th,.demo-table th { color: var(--ss-primary-border) !important; background: var(--ss-bg-dark-elevated); }
.table th,.table td,.demo-table th,.demo-table td { border-color: var(--ss-divider-dark) !important; }
.table tr[aria-selected="true"],.table tr.selected,.demo-table tr.selected { background: var(--ss-primary-a12); }

/* Guided demonstrations */
.demo-director-top,.demo-progress-wrap,.demo-controls,.demo-layout-controls,.demo-caption {
  background: var(--ss-bg-dark-secondary) !important;
  border-color: var(--ss-divider-dark) !important;
}
.demo-scene-number,.demo-lesson-stage b,.demo-menu-step-list span,.scope-number {
  background: var(--ss-primary-a18) !important;
  color: var(--ss-primary-border) !important;
  border-color: var(--ss-primary) !important;
}
.demo-progress button { background: var(--ss-bg-dark-soft) !important; }
.demo-progress button.active { background: var(--ss-primary) !important; }
.demo-progress button.complete { background: var(--ss-success) !important; }
.demo-visual-board .formula,.demo-slide-screen strong,.demo-benefit strong,.demo-table th { color: var(--ss-primary-border) !important; }
.demo-visual-board .subformula,.demo-metric strong,.demo-chain article:not(:last-child)::after { color: var(--ss-primary-border) !important; }
.demo-status.amber,.status-pill.warning,.status-dot.amber,.risk-level.medium {
  background: rgba(180,83,9,.16) !important;
  color: #FDE68A !important;
  border-color: var(--ss-warning) !important;
}
.demo-status.purple,.status-dot.purple { background: var(--ss-info-a14) !important; color: #BAE6FD !important; border-color: var(--ss-info) !important; }
.risk-level.high,.trend.down { color: #FCA5A5 !important; }
.risk-level.low,.trend.up { color: #86EFAC !important; }

/* Branding: gold remains only inside official imagery and small premium/achievement details */
.brand-premium,.achievement strong,.certificate-mark,.official-brand-detail { color: var(--ss-gold-light) !important; }
.hero-wordmark,.platform-wordmark-card,.brand-logo-card { border-color: var(--ss-border-dark) !important; }
.ecosystem-callout,.platform-brand-band,.role-brand-strip { background: var(--ss-bg-dark-secondary) !important; border-color: var(--ss-divider-dark) !important; }

/* Explicitly labelled 4P3X AI™ components may use contained purple */
.ai-component,[data-component="4p3x-ai"] {
  --ss-component-accent: var(--ss-ai-purple);
  border-color: var(--ss-ai-purple) !important;
  background: rgba(109,40,217,.10) !important;
}
.ai-component .component-label,[data-component="4p3x-ai"] .component-label { color: #DDD6FE !important; }

/* Toasts and system states */
.toast { background: var(--ss-bg-dark-elevated) !important; border-color: var(--ss-primary) !important; color: var(--ss-text-on-dark); }
.status-success,.quiz button.correct { border-color: var(--ss-success) !important; background: rgba(21,128,61,.18) !important; }
.status-warning { border-color: var(--ss-warning) !important; background: rgba(180,83,9,.16) !important; }
.status-danger,.quiz button.wrong { border-color: var(--ss-danger) !important; background: rgba(185,28,28,.16) !important; }
.status-info { border-color: var(--ss-info) !important; background: var(--ss-info-a14) !important; }

/* Responsive refinements */
@media (max-width: 900px) {
  .native-menu[open]>.nav,#siteNav.open { background: var(--ss-bg-dark-secondary) !important; }
  .version-card,.demo-group { min-width: 0; }
  .table-wrap,.demo-table-wrap { position: relative; }
  .table-wrap::after,.demo-table-wrap::after {
    content: "Scroll sideways to view more";
    display: block;
    color: var(--ss-text-on-dark-muted);
    font-size: .78rem;
    padding-top: .5rem;
  }
}
@media (max-width: 560px) {
  .btn,.ss-button-primary,.ss-button-secondary { width: 100%; }
  .native-menu>summary.btn { width: auto; }
  .version-card,.demo-group,.card,.stepbox { border-radius: var(--ss-radius-medium) !important; }
  .native-menu[open]>.nav { border-radius: var(--ss-radius-medium) !important; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Access-readiness governance and reviewer pathway */
.status-label,.status-badge{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--ss-primary);background:var(--ss-primary-a12);color:var(--ss-primary-border);border-radius:999px;padding:.42rem .72rem;font-weight:800;font-size:.84rem}
.status-badge.status-success{border-color:var(--ss-success);background:rgba(21,128,61,.18);color:#BBF7D0}
.status-badge.status-warning{border-color:var(--ss-warning);background:rgba(180,83,9,.16);color:#FDE68A}
.status-badge.status-danger{border-color:var(--ss-danger);background:rgba(185,28,28,.16);color:#FECACA}
.status-badge.status-info{border-color:var(--ss-info);background:var(--ss-info-a14);color:#BAE6FD}
.governance-hero .lead{max-width:72ch}.governance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.governance-wide{grid-column:1/-1}.governance-grid .stepbox{height:100%}.governance-grid h2{margin-top:0}.governance-footer-links{display:flex;flex-wrap:wrap;gap:.35rem .55rem;align-items:center}.governance-footer-links a{color:var(--ss-primary-border)}
.status-matrix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.status-column{background:var(--ss-bg-dark-elevated);border:1px solid var(--ss-border-dark);border-radius:var(--ss-radius-medium);padding:1.2rem}.status-column h2{font-size:1.18rem}.status-column li+li{margin-top:.5rem}
.access-hero-actions{max-width:850px}.hero-summary{margin-top:1.1rem;color:var(--ss-text-on-dark-muted);font-weight:700}.access-variant-card{display:flex;flex-direction:column;justify-content:space-between}.review-status-copy{border-left:4px solid var(--ss-primary);padding-left:.8rem;color:var(--ss-text-on-dark-muted)}.review-status-panel{background:var(--ss-bg-dark-elevated);border:1px solid var(--ss-primary-a46);border-radius:var(--ss-radius-medium);padding:1.2rem}.review-status-section{padding-top:1rem;padding-bottom:1rem}.section-muted{background:var(--ss-bg-dark-secondary);border-block:1px solid var(--ss-divider-dark)}
.tour-shell{max-width:900px;margin:auto;background:var(--ss-bg-dark-elevated);border:1px solid var(--ss-border-dark);border-radius:var(--ss-radius-large);padding:clamp(1rem,4vw,2.2rem);box-shadow:var(--ss-shadow-dark)}.tour-copy{font-size:1.1rem;line-height:1.75;min-height:8rem}.tour-progress{display:grid;grid-template-columns:repeat(14,1fr);gap:.35rem;margin-bottom:1.2rem}.tour-progress button{min-height:12px;border:0;border-radius:999px;background:var(--ss-bg-dark-soft);padding:0}.tour-progress button.active{background:var(--ss-primary);box-shadow:0 0 0 2px var(--ss-primary-border)}
@media(max-width:760px){.governance-grid,.status-matrix{grid-template-columns:1fr}.governance-wide{grid-column:auto}.tour-progress{grid-template-columns:repeat(7,1fr)}.tour-copy{min-height:0}.access-hero-actions{display:grid}.governance-footer-links{display:block}.governance-footer-links a{display:inline-block;margin:.25rem .2rem}}
.target-language-support{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;margin:1rem 0;padding:.9rem 1rem;border:1px solid var(--ss-primary-a46);border-radius:var(--ss-radius-small);background:var(--ss-primary-a10)}
.target-language-support p{margin:0}.target-language-support [lang]{font-size:1.1em;color:var(--ss-primary-border);font-weight:800}

/* Contained 4PEX AI™ adaptive-agent identity. SafeSpark actions remain teal. */
[data-component="4pex-ai"],.fourpex-dashboard-card,.fourpex-agent {
  --ss-component-accent: var(--ss-ai-purple);
}