/* CX Clarity — charcoal / graphite / silver · left clarity rail · Sep 2026 */
/* Checklist: crisp footers · left five-beat · no purple-first bg · CX motion */

body.cx-clarity,
body.enterprise.clarity.cx-clarity {
  --theme-name: cx-clarity;
  --secondary: #D9DAE2;
  --muted: #C8CAD4;
  --tertiary: #C8CAD4;
  --steel: #D9DAE2;
  --steel-deep: #C8CAD4;
  --text-faint: #D9DAE2;
  --footer-link: #E5E5EB;
  --footer-link-hover: #F8F8FB;
  --footer-meta: #D9DAE2;
  --cx-accent: #5B8DEF;
  --cx-accent-soft: rgba(91, 141, 239, 0.14);
  --cx-amber: #F59E0B;
  color: var(--white);
  background: #08090D !important;
  background-image: none !important;
}

/* Kill purple-first page washes */
body.cx-clarity .intel-field,
body.cx-clarity .field-glow,
body.cx-clarity .field-fog,
body.cx-clarity .precision-field,
body.enterprise.cx-clarity .intel-field .field-glow {
  background: radial-gradient(ellipse 60% 40% at 70% 12%, rgba(91, 141, 239, 0.07), transparent 55%),
              radial-gradient(ellipse 40% 30% at 12% 78%, rgba(248, 248, 251, 0.03), transparent 50%) !important;
  opacity: 0.55 !important;
}
body.cx-clarity .field-fog { opacity: 0.25 !important; filter: none !important; }
body.cx-clarity {
  --grad-field: radial-gradient(ellipse 70% 50% at 70% 10%, rgba(91, 141, 239, 0.08), transparent 55%),
                radial-gradient(ellipse 45% 35% at 10% 80%, rgba(248, 248, 251, 0.03), transparent),
                linear-gradient(180deg, #08090D 0%, #0C0D12 50%, #08090D 100%);
  --orb-cyan: rgba(91, 141, 239, 0.14);
  --orb-violet: rgba(91, 141, 239, 0.08);
  --grad-cta: linear-gradient(135deg, #F8F8FB, #E5E5EB);
  --grad-flow: linear-gradient(90deg, #5B8DEF, #94A3B8, #E5E5EB);
}

/* Purple intel-core → graphite / blue CX */
body.cx-clarity .intel-core-stage {
  background:
    radial-gradient(circle at 40% 35%, rgba(91, 141, 239, 0.18), transparent 45%),
    radial-gradient(circle at 60% 65%, rgba(248, 248, 251, 0.06), transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(17, 18, 25, 0.95), #090A0E) !important;
  border-color: rgba(248, 248, 251, 0.14) !important;
  box-shadow: 0 0 48px rgba(91, 141, 239, 0.12), inset 0 0 32px rgba(0, 0, 0, 0.35) !important;
}
body.cx-clarity .intel-core-ring,
body.cx-clarity .intel-core-ring:nth-child(2),
body.cx-clarity .intel-core-ring:nth-child(3) {
  border-color: rgba(148, 163, 184, 0.28) !important;
}
body.cx-clarity .intel-core-node {
  background: #5B8DEF !important;
  box-shadow: 0 0 12px rgba(91, 141, 239, 0.45) !important;
}
body.cx-clarity .intel-proof strong { color: #93C5FD !important; }

/* ——— FOOTER: kill cloudy grey ——— */
body.cx-clarity .site-footer {
  background: #06070A !important;
  border-top: 1px solid rgba(248, 248, 251, 0.12) !important;
}
body.cx-clarity .site-footer a,
body.cx-clarity .site-footer .footer-col a {
  color: var(--footer-link) !important;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.18s ease, transform 0.18s ease;
}
body.cx-clarity .site-footer a:hover,
body.cx-clarity .site-footer .footer-col a:hover {
  color: var(--footer-link-hover) !important;
  transform: translateX(1px);
}
body.cx-clarity .site-footer h4,
body.cx-clarity .site-footer .footer-col h4 {
  color: #F8F8FB !important;
  letter-spacing: 0.1em;
}
body.cx-clarity .site-footer .text-sec,
body.cx-clarity .site-footer .note,
body.cx-clarity .site-footer .footer-bottom,
body.cx-clarity .site-footer .footer-bottom p,
body.cx-clarity .site-footer .footer-bottom a {
  color: var(--footer-meta) !important;
}
body.cx-clarity .site-footer .logo,
body.cx-clarity .site-footer .logo span { color: #F8F8FB !important; }
body.cx-clarity .site-footer .logo .product { color: #93C5FD !important; }

/* Muddy secondary type → crisp silver */
body.cx-clarity .note,
body.cx-clarity .text-sec,
body.cx-clarity .micro-label,
body.cx-clarity .muted,
body.cx-clarity .secondary,
body.cx-clarity .hero-meta,
body.cx-clarity .mega-d,
body.cx-clarity .cta-trust,
body.cx-clarity .cta-paths {
  color: #D9DAE2 !important;
}
body.cx-clarity .section-kicker { color: #93C5FD !important; }

/* Primary CTA stays white-on-dark enterprise */
body.cx-clarity .btn-primary {
  background: #F8F8FB !important;
  color: #08090D !important;
  border: 1px solid rgba(248, 248, 251, 0.25) !important;
  box-shadow: none !important;
  transition: transform 0.2s ease, background 0.2s ease;
}
body.cx-clarity .btn-primary:hover {
  background: #E5E5EB !important;
  transform: translateY(-1px);
}
body.cx-clarity .btn-secondary {
  color: #F8F8FB !important;
  border-color: rgba(248, 248, 251, 0.22) !important;
  background: transparent !important;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
body.cx-clarity .btn-secondary:hover {
  border-color: rgba(91, 141, 239, 0.45) !important;
  background: rgba(91, 141, 239, 0.08) !important;
  transform: translateY(-1px);
}

/* ——— LEFT FIVE-BEAT RAIL ——— */
body.cx-clarity .e2e-rail,
body.cx-clarity .e2e-rail--left {
  margin: 0;
  padding: 1.1rem 1rem 1.2rem;
  border-radius: 14px;
  border: 1px solid rgba(248, 248, 251, 0.12);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.045), rgba(8, 9, 13, 0.55));
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}
body.cx-clarity .e2e-rail-kicker {
  margin: 0 0 0.85rem;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 650;
  color: #93C5FD;
}
body.cx-clarity .e2e-beats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.55rem !important;
  grid-template-columns: none !important;
}
body.cx-clarity .e2e-beats li,
body.cx-clarity .e2e-beat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.65rem 0.7rem;
  border-radius: 10px;
  border: 1px solid rgba(248, 248, 251, 0.08);
  background: rgba(8, 9, 13, 0.45);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
body.cx-clarity .e2e-beats li:hover,
body.cx-clarity .e2e-beat:hover,
body.cx-clarity .e2e-beat.is-on {
  border-color: rgba(91, 141, 239, 0.4);
  background: rgba(91, 141, 239, 0.08);
  transform: translateX(2px);
}
body.cx-clarity .e2e-k {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #E5E5EB !important; /* not muddy violet-grey */
}
body.cx-clarity .e2e-v {
  font-size: 0.82rem;
  line-height: 1.45;
  color: #E5E5EB !important;
}
body.cx-clarity .e2e-v p { margin: 0 0 0.4rem; color: inherit; }
body.cx-clarity .e2e-v p:last-child { margin-bottom: 0; }
body.cx-clarity .e2e-v a {
  color: #F8F8FB !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.cx-clarity .e2e-bullets {
  margin: 0.15rem 0 0;
  padding-left: 1.05rem;
  color: #E5E5EB;
}
body.cx-clarity .e2e-bullets li { margin: 0.2rem 0; }

/* Editorial stage: left rail + content */
@media (min-width: 1100px) {
  body.cx-clarity main#main,
  body.cx-clarity main.page-main,
  body.cx-clarity main.cx-stage {
    display: grid !important;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
    column-gap: 2rem;
    align-items: start;
    max-width: var(--max-w, 100rem);
    margin-inline: auto;
    padding-inline: clamp(1rem, 3vw, 2rem);
    width: 100%;
    box-sizing: border-box;
  }
  body.cx-clarity main#main > .e2e-rail,
  body.cx-clarity main.page-main > .e2e-rail,
  body.cx-clarity main.cx-stage > .e2e-rail {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: 5.75rem;
    align-self: start;
    max-height: calc(100vh - 6.5rem);
    overflow: auto;
    z-index: 5;
  }
  body.cx-clarity main#main > *:not(.e2e-rail),
  body.cx-clarity main.page-main > *:not(.e2e-rail),
  body.cx-clarity main.cx-stage > *:not(.e2e-rail) {
    grid-column: 2;
    min-width: 0;
  }
}
@media (max-width: 1099px) {
  body.cx-clarity .e2e-rail {
    margin: 1rem clamp(1rem, 3vw, 1.5rem) 1.5rem;
  }
}

/* ——— Interactive canvas ——— */
.cx-viz-stage {
  border: 1px solid rgba(248, 248, 251, 0.12);
  border-radius: 16px;
  padding: 1.15rem 1.2rem 1.35rem;
  margin: 0 0 1.75rem;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(8, 9, 13, 0.5));
  backdrop-filter: blur(14px);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.cx-viz-stage:hover {
  border-color: rgba(91, 141, 239, 0.35);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}
.cx-viz-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 650;
  color: #93C5FD;
}
.cx-viz-title {
  margin: 0 0 0.85rem;
  font-size: 1.05rem;
  color: #F8F8FB;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cx-viz-hint {
  margin: 0.75rem 0 0;
  font-size: 0.78rem;
  color: #D9DAE2;
}

/* Node / line teaching widgets */
.cx-nodes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.5rem 0 0.85rem;
}
.cx-node {
  appearance: none;
  border: 1px solid rgba(248, 248, 251, 0.14);
  background: rgba(8, 9, 13, 0.5);
  color: #E5E5EB;
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.cx-node:hover { transform: translateY(-2px); border-color: rgba(91, 141, 239, 0.45); }
.cx-node.is-on {
  color: #F8F8FB;
  border-color: rgba(91, 141, 239, 0.55);
  background: rgba(91, 141, 239, 0.16);
  box-shadow: 0 0 0 1px rgba(91, 141, 239, 0.2);
}
.cx-panel { display: none; padding: 0.85rem 1rem; border-radius: 12px; border: 1px solid rgba(248, 248, 251, 0.1); background: rgba(8, 9, 13, 0.45); color: #E5E5EB; font-size: 0.9rem; line-height: 1.5; }
.cx-panel.is-on { display: block; animation: cx-reveal 0.35s ease; }
.cx-panel strong { color: #F8F8FB; }
.cx-stat-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.cx-stat {
  flex: 1 1 110px;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  border: 1px solid rgba(248, 248, 251, 0.1);
  background: rgba(255, 255, 255, 0.03);
}
.cx-stat b { display: block; font-size: 1.15rem; color: #F8F8FB; letter-spacing: -0.02em; }
.cx-stat span { font-size: 0.7rem; color: #D9DAE2; }
.cx-stat .ex { color: #F59E0B; font-size: 0.6rem; letter-spacing: 0.06em; margin-left: 0.25rem; }

.cx-flow {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(96px, 1fr);
  gap: 0.4rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
}
.cx-flow button {
  appearance: none;
  text-align: left;
  padding: 0.7rem 0.65rem;
  border-radius: 10px;
  border: 1px solid rgba(248, 248, 251, 0.1);
  background: rgba(8, 9, 13, 0.45);
  color: #E5E5EB;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  min-width: 96px;
}
.cx-flow button:hover { transform: translateY(-2px); }
.cx-flow button.is-on {
  border-color: rgba(91, 141, 239, 0.5);
  background: rgba(91, 141, 239, 0.12);
  color: #F8F8FB;
}
.cx-flow button .k { display: block; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: #93C5FD; margin-bottom: 0.25rem; }
.cx-flow button .t { display: block; font-size: 0.8rem; font-weight: 600; }

.cx-topo {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.cx-topo .cell {
  padding: 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(248, 248, 251, 0.1);
  background: rgba(8, 9, 13, 0.4);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.cx-topo .cell:hover, .cx-topo .cell.is-on {
  transform: translateY(-2px);
  border-color: rgba(91, 141, 239, 0.4);
}
.cx-topo .cell h4 { margin: 0 0 0.35rem; color: #F8F8FB; font-size: 0.88rem; }
.cx-topo .cell p { margin: 0; font-size: 0.75rem; color: #D9DAE2; line-height: 1.4; }

.cx-chooser {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.cx-chooser a {
  display: block;
  padding: 1.1rem 1.15rem;
  border-radius: 14px;
  border: 1px solid rgba(248, 248, 251, 0.14);
  background: rgba(255, 255, 255, 0.03);
  text-decoration: none;
  color: inherit;
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}
.cx-chooser a:hover {
  transform: translateY(-3px) scale(1.01);
  border-color: rgba(91, 141, 239, 0.45);
  background: rgba(91, 141, 239, 0.08);
}
.cx-chooser a h3 { margin: 0 0 0.4rem; color: #F8F8FB; font-size: 1.05rem; }
.cx-chooser a p { margin: 0; color: #D9DAE2; font-size: 0.85rem; line-height: 1.45; }

.cx-plan-grid {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.cx-plan {
  appearance: none;
  text-align: left;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid rgba(248, 248, 251, 0.12);
  background: rgba(8, 9, 13, 0.45);
  color: inherit;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.cx-plan:hover { transform: translateY(-2px); }
.cx-plan.is-on {
  border-color: rgba(91, 141, 239, 0.5);
  box-shadow: inset 0 0 0 1px rgba(91, 141, 239, 0.25);
}
.cx-plan .name { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: #93C5FD; font-weight: 700; }
.cx-plan .fee { margin: 0.4rem 0 0.15rem; font-size: 1.05rem; color: #F8F8FB; font-weight: 650; }
.cx-plan .mo { font-size: 0.8rem; color: #D9DAE2; }

/* Motion / connectiveness */
@keyframes cx-reveal {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes cx-pulse-line {
  0%, 100% { stroke-dashoffset: 0; opacity: 0.55; }
  50% { stroke-dashoffset: -24; opacity: 1; }
}
body.cx-clarity .reveal,
body.cx-clarity .cx-viz-stage,
body.cx-clarity .venture-card,
body.cx-clarity .module-panel,
body.cx-clarity .pricing-plane {
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, opacity 0.28s ease;
}
body.cx-clarity .venture-card:hover,
body.cx-clarity .pricing-plane:hover,
body.cx-clarity .module-panel:hover {
  transform: translateY(-3px);
  border-color: rgba(91, 141, 239, 0.35) !important;
}
body.cx-clarity .cx-svg-line {
  stroke: #5B8DEF;
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 6 8;
  animation: cx-pulse-line 3.2s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  body.cx-clarity *,
  body.cx-clarity .cx-svg-line {
    animation: none !important;
    transition: none !important;
  }
}

/* Selected states: blue not purple washes */
body.cx-clarity .loop-stage.is-on,
body.cx-clarity .of-controls button.is-on,
body.cx-clarity .c360-step.is-on,
body.cx-clarity .ip-step.is-on {
  border-color: rgba(91, 141, 239, 0.5) !important;
  background: rgba(91, 141, 239, 0.12) !important;
  box-shadow: inset 0 0 0 1px rgba(91, 141, 239, 0.2);
  color: #F8F8FB !important;
}

/* Soft link colour — cool silver-blue, not muddy violet */
body.cx-clarity a:not(.btn):not(.nav-brand):not(.logo) { color: #93C5FD; }
body.cx-clarity a:not(.btn):not(.nav-brand):not(.logo):hover { color: #F8F8FB; }

/* Venture / parent house */
body.cx-clarity .venture-card .vk { color: #93C5FD !important; }

/* Ensure wrap mains still get readable padding on small */
body.cx-clarity main.wrap:not(#main) { padding-inline: clamp(1rem, 3vw, 2rem); }

/* === CX hard kill: legacy light athena/lumen washes in chrome.css === */
html, body.cx-clarity, body.enterprise.cx-clarity {
  background: #08090D !important;
  background-image: none !important;
  color: #F8F8FB !important;
  color-scheme: dark;
}
body.cx-clarity::before,
body.cx-clarity::after,
body.enterprise.cx-clarity::before,
body.enterprise.cx-clarity::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}
body.cx-clarity .intel-field,
body.cx-clarity .cursor-glow-layer {
  background: radial-gradient(ellipse 70% 45% at 70% 0%, rgba(91,141,239,.07), transparent 55%) !important;
  mix-blend-mode: normal !important;
  opacity: 0.45 !important;
}
body.cx-clarity .intel-field .field-glow,
body.cx-clarity .intel-field .field-fog,
body.cx-clarity .intel-field .field-grid {
  background: transparent !important;
  opacity: 0.2 !important;
}
/* Legacy light glass → dark glass */
body.cx-clarity .site-header,
body.cx-clarity .site-nav,
body.cx-clarity .card,
body.cx-clarity .glass-card,
body.cx-clarity .outcome,
body.cx-clarity .proof-panel,
body.cx-clarity .tailor-step,
body.cx-clarity .mega,
body.cx-clarity .pricing-plane,
body.cx-clarity .module-panel {
  background: rgba(17, 18, 25, 0.88) !important;
  color: #F8F8FB !important;
  border-color: rgba(248, 248, 251, 0.12) !important;
}
body.cx-clarity .site-header.is-scrolled,
body.cx-clarity .site-nav.is-scrolled {
  background: rgba(8, 9, 13, 0.92) !important;
}
body.cx-clarity .mega-k,
body.cx-clarity .card h3,
body.cx-clarity .glass-card h3 { color: #F8F8FB !important; }
body.cx-clarity .mega-d,
body.cx-clarity .card p,
body.cx-clarity .glass-card p { color: #D9DAE2 !important; }
/* Ensure main content text stays crisp on charcoal */
body.cx-clarity h1, body.cx-clarity h2, body.cx-clarity h3,
body.cx-clarity .hero h1, body.cx-clarity .display {
  color: #F8F8FB !important;
}
body.cx-clarity p, body.cx-clarity li, body.cx-clarity .lead {
  color: #E5E5EB !important;
}