/* ═══════════════════════════════════════════════════════════════
   Chthonia Product Page — styles-software.css
   Extends styles.css (Style B dark base), Chthonia green accent
   ═══════════════════════════════════════════════════════════════ */

/* ── Chthonia colour tokens ──────────────────────────────────── */
:root {
  --ch-green:     #00C98D;
  --ch-teal:      #00D4FF;
  --ch-grad:      linear-gradient(135deg, #00C98D 0%, #00D4FF 100%);
  --ch-grad-soft: linear-gradient(135deg, rgba(0,201,141,0.15) 0%, rgba(0,212,255,0.08) 100%);
  --ch-border:    rgba(0,201,141,0.28);
  --ch-glow:      rgba(0,201,141,0.2);
  --ch-panel:     #0E211A;
  --ch-warn:      #F0A24B;
  --ch-red:       #FF6E5A;
}

/* Chthonia page surface tint — shift bg from blue (#060D1A / #0B1628) to a green-leaning dark family that matches Chthonia brand */
.sw-page {
  /* C-version palette adopted as Chthonia product colour spec (2026-06-10) */
  --bg-base:    #06110D;
  --bg-surface: #0A1812;
  --text-2:     #93A89F;
  --text-3:     #6E8479; /* was #5C726A — lifted for WCAG AA (4.8:1 on base, 4.6:1 on surface) */
}
.sw-page h2 .nowrap { white-space: nowrap; display: inline-block; }
@media (max-width: 720px) {
  .sw-page h2 .nowrap { white-space: normal; display: inline; }
}

/* override eyebrow / buttons / nav for sw-page */
.sw-page .eyebrow {
  font-size: 14px;
  background: var(--ch-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sw-page .button.primary {
  background: var(--ch-grad);
  box-shadow: 0 0 28px var(--ch-glow);
}
.sw-page .button.primary:hover { box-shadow: 0 0 44px rgba(0,201,141,0.4); }
.sw-page .button.secondary:hover { border-color: var(--ch-green); color: var(--ch-green); background: rgba(0,201,141,0.07); }

/* ── Shared section header ───────────────────────────────────── */
.ch-section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 60px;
}
.ch-section-header h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 14px;
}
.ch-section-sub {
  font-size: 0.97rem;
  color: var(--text-2);
  line-height: 1.72;
}

/* shared section padding */
.ch-why, .ch-pillars, .ch-modules, .ch-caps, .ch-roadmap, .ch-cta {
  padding: 100px 48px;
}

/* ════════════════════════════════════════════════════════════════
   S1 · HERO
   ════════════════════════════════════════════════════════════════ */
.sw-hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 68px;
  background: var(--bg-base);
}
/* hero background video */
.sw-hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
/* darkening overlay over the video */
.sw-hero-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(7,20,15,0.82) 0%,
    rgba(7,20,15,0.55) 35%,
    rgba(7,20,15,0.70) 60%,
    rgba(7,20,15,0.96) 85%,
    rgba(7,20,15,1) 100%);
}
.sw-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 65% 70% at 20% 50%, rgba(0,201,141,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 20%, rgba(0,212,255,0.12) 0%, transparent 55%),
    radial-gradient(ellipse 40% 55% at 55% 85%, rgba(0,201,141,0.10) 0%, transparent 60%);
  z-index: 2; pointer-events: none;
}
.sw-hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,201,141,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,201,141,0.035) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 2; pointer-events: none;
}
.sw-hero-content {
  position: relative; z-index: 3;
  width: 100%; max-width: 820px;
  margin: 0 auto;
  padding: 80px 48px;
  text-align: center;
}
.ch-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px 6px 10px;
  border: 1px solid var(--ch-border);
  border-radius: 100px;
  background: rgba(0,201,141,0.06);
  margin-bottom: 28px;
}
.ch-badge-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ch-grad);
  box-shadow: 0 0 8px var(--ch-green);
}
.ch-badge span {
  font-size: 0.71rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--ch-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.sw-hero h1 {
  font-size: var(--fs-display);
  font-weight: 800; line-height: 1.1; letter-spacing: -0.03em;
  color: var(--text-1); margin-bottom: 20px;
}
.sw-hero h1 em {
  font-style: normal;
  background: var(--ch-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.sw-hero .hero-copy {
  max-width: 600px; margin: 0 auto 36px;
  /* Chthonia light green (overrides the AIDC blue --hero-sub-color from styles-v2.css) */
  font-size: var(--fs-lead); color: #9FE3C6; line-height: 1.7; text-shadow: var(--hero-sub-shadow);
}
.sw-hero .hero-actions { justify-content: center; }
/* Hero stats bar */
.ch-hero-stats {
  display: flex; align-items: center; justify-content: center; gap: 0;
  margin: 40px auto 0;
  padding: 20px 32px;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-m);
  background: rgba(255,255,255,0.03);
  width: fit-content;
  max-width: 480px;
}
.ch-hero-stat {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 0 32px;
}
.ch-hero-stat strong {
  font-size: 1.7rem; font-weight: 800; line-height: 1;
  background: var(--ch-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ch-hero-stat span {
  font-size: 0.72rem; color: var(--text-3); line-height: 1.4; text-align: center;
}
.ch-hero-stat-divider {
  width: 1px; height: 40px; background: var(--border-1); flex-shrink: 0;
}

.ch-slogan {
  margin-top: 36px; padding-top: 0; border-top: none;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  background: var(--ch-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ════════════════════════════════════════════════════════════════
   S2 · WHY CHTHONIA
   ════════════════════════════════════════════════════════════════ */
.ch-why { background: var(--bg-base); position: relative; overflow: hidden; }
.ch-why::before { display: none; }
.ch-why-inner {
  max-width: 1280px; margin: 0 auto;
  position: relative; z-index: 1;
}
.ch-why-inner > .eyebrow,
.ch-why-inner h2,
.ch-why-lead,
.ch-why-close {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.ch-why-close { border-top: none; padding-top: 0; }
.ch-why-inner h2 {
  font-size: var(--fs-h2); font-weight: 800;
  letter-spacing: -0.03em; margin-bottom: 14px; line-height: 1.2;
}
.ch-why-lead {
  font-size: 1rem; color: var(--text-2); line-height: 1.78; margin-bottom: 0;
}
.ch-why-close {
  font-size: 0.97rem; color: var(--text-2); line-height: 1.72;
  margin-top: 44px; padding-top: 0;
  border-top: none;
}

/* ════════════════════════════════════════════════════════════════
   S3 · THREE PILLARS
   ════════════════════════════════════════════════════════════════ */
.ch-pillars { background: var(--bg-base); }
.ch-pillars-inner { max-width: 1280px; margin: 0 auto; }
.ch-pillars-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }

.ch-pillar-card {
  background: var(--bg-card); border: 1px solid var(--border-1);
  border-radius: var(--radius-m); padding: 36px 30px;
  position: relative; overflow: hidden;
  transition: all 0.3s var(--ease);
}
.ch-pillar-card:hover { border-color: var(--ch-border); transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.ch-pillar-card--accent {
  background: var(--ch-grad-soft);
  border-color: var(--ch-border);
}
.ch-pillar-num {
  position: absolute; top: 24px; right: 28px;
  font-size: 4rem; font-weight: 900; line-height: 1;
  color: rgba(255,255,255,0.04); letter-spacing: -0.04em;
  pointer-events: none; user-select: none;
}
.ch-pillar-icon-wrap {
  width: 52px; height: 52px; border-radius: var(--radius-s);
  background: var(--ch-grad-soft); border: 1px solid var(--ch-border);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
}
.ch-pillar-icon-wrap svg {
  width: 26px; height: 26px; stroke: var(--ch-green);
}
.ch-pillar-card h3 {
  font-size: 1.1rem; font-weight: 700; color: var(--text-1); margin-bottom: 12px;
}
.ch-pillar-card p {
  font-size: 0.88rem; color: var(--text-2); line-height: 1.68; margin-bottom: 20px;
}
.ch-pillar-tags {
  list-style: none; display: flex; flex-wrap: wrap; gap: 6px;
}
.ch-pillar-tags li {
  font-size: 0.72rem; font-weight: 600; padding: 4px 10px;
  border-radius: 100px; border: 1px solid var(--ch-border);
  color: var(--ch-green); background: rgba(0,201,141,0.06);
}

/* ════════════════════════════════════════════════════════════════
   S4 · CORE MODULES
   ════════════════════════════════════════════════════════════════ */
.ch-modules { background: var(--bg-surface); position: relative; overflow: hidden; }
.ch-modules::before {
  content: '';
  position: absolute; top: -60px; left: 0; right: 0; height: 120px;
  background: var(--bg-surface);
  clip-path: polygon(0 60px, 100% 0, 100% 100%, 0 100%);
}
.ch-modules-inner { max-width: 1280px; margin: 0 auto; position: relative; z-index: 1; }

/* tabs — pill style matching homepage Chthonia software core */
.ch-tab-row {
  display: flex; gap: 12px; margin-bottom: 48px; flex-wrap: wrap;
  justify-content: center;
}
.ch-tab {
  flex: 0 1 auto;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 26px;
  border-radius: 100px;
  border: 1.5px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.04);
  color: var(--text-1);
  font-size: 0.95rem; font-weight: 600;
  cursor: pointer; transition: all 0.25s var(--ease);
}
.ch-tab:hover {
  border-color: var(--ch-green);
  background: rgba(0,201,141,0.08);
  color: var(--ch-green);
  transform: translateY(-1px);
}
.ch-tab.active {
  background: linear-gradient(135deg, rgba(0,201,141,0.22) 0%, rgba(0,212,255,0.16) 100%);
  border-color: rgba(0,201,141,0.55);
  color: var(--ch-green);
  box-shadow: 0 0 24px rgba(0,201,141,0.18);
}
.ch-tab-label { font-weight: 700; }
.ch-tab-sub {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-3);
  padding-left: 10px; border-left: 1px solid currentColor;
  opacity: 0.7;
}
.ch-tab.active .ch-tab-sub { color: var(--ch-green); opacity: 1; }

/* panels — slide-in animation */
.ch-panel { display: none; }
.ch-panel.active {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  animation: ch-panel-slide-in 0.45s var(--ease, cubic-bezier(0.4,0,0.2,1)) both;
}
@keyframes ch-panel-slide-in {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
.ch-panel-screenshot {
  position: relative; order: 1;
  display: flex; flex-direction: column; gap: 20px;
}
.ch-panel-screenshot::before {
  content: '';
  position: absolute; inset: -24px; top: -24px; bottom: auto; height: 320px;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,201,141,0.1) 0%, transparent 70%);
  pointer-events: none;
}
.ch-panel-screenshot img {
  position: relative; width: 100%; border-radius: var(--radius-m);
  border: 1px solid var(--ch-border);
  box-shadow: 0 24px 64px rgba(0,0,0,0.4), 0 0 48px rgba(0,201,141,0.07);
}
.ch-panel-copy { order: 2; text-align: left; align-self: center; }
.ch-panel-copy .eyebrow { display: block; }
.ch-panel-copy h3 {
  font-size: clamp(1.8rem, 2.4vw, 2.2rem); font-weight: 800;
  letter-spacing: -0.02em; margin-bottom: 18px; line-height: 1.2;
}
.ch-panel-copy > p {
  font-size: 1.05rem; color: var(--text-1); line-height: 1.75; margin-bottom: 28px;
  max-width: 520px;
}
.ch-feature-list {
  list-style: none; display: flex; flex-direction: column; gap: 12px;
  max-width: 520px; margin: 0;
}
/* capability chips relocated into panel body (C-version layout) */
.ch-panel-copy .ch-capability-chips { justify-content: flex-start; margin-top: 24px; }
.ch-feature-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 0.98rem; color: var(--text-1); line-height: 1.55;
  padding-left: 0;
  text-align: left;
}
.ch-feature-list li::before {
  content: '';
  flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px;
  border-radius: 50%;
  background: rgba(0,201,141,0.12);
  border: 1px solid var(--ch-border);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 9l3.5 3.5L14 6' stroke='%2300C98D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-size: 70%; background-repeat: no-repeat; background-position: center;
}

/* ════════════════════════════════════════════════════════════════
   S5 · KEY CAPABILITIES
   ════════════════════════════════════════════════════════════════ */
.ch-caps { background: var(--bg-base); }
.ch-caps-inner { max-width: 1280px; margin: 0 auto; }
.ch-caps-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }

.ch-cap-card {
  background: var(--bg-card); border: 1px solid var(--border-1);
  border-radius: var(--radius-m); padding: 32px;
  display: grid; grid-template-columns: 56px 1fr; gap: 22px;
  align-items: start; transition: all 0.3s var(--ease);
  position: relative; overflow: hidden;
}
.ch-cap-card:hover { border-color: var(--ch-border); background: rgba(255,255,255,0.065); transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.ch-cap-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--ch-grad); opacity: 0; transition: opacity 0.3s;
}
.ch-cap-card:hover::after { opacity: 1; }
.ch-cap-icon {
  width: 56px; height: 56px; border-radius: var(--radius-s);
  background: var(--ch-grad-soft); border: 1px solid var(--ch-border);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ch-cap-icon img {
  width: 30px; height: 30px;
  filter: brightness(0) saturate(100%) invert(65%) sepia(60%) saturate(450%) hue-rotate(115deg) brightness(90%);
}
.ch-cap-icon--inline { background: var(--ch-grad-soft); }
.ch-cap-body h4 {
  font-size: 1rem; font-weight: 700; color: var(--text-1); margin-bottom: 8px;
}
.ch-cap-body p { font-size: 0.88rem; color: var(--text-2); line-height: 1.66; }

/* ════════════════════════════════════════════════════════════════
   S6 · ROADMAP
   ════════════════════════════════════════════════════════════════ */
.ch-roadmap { background: var(--bg-surface); position: relative; overflow: hidden; }
.ch-roadmap::before {
  content: '';
  position: absolute; top: -60px; left: 0; right: 0; height: 120px;
  background: var(--bg-surface);
  clip-path: polygon(0 60px, 100% 0, 100% 100%, 0 100%);
}
.ch-roadmap::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 60%, rgba(0,201,141,0.05) 0%, transparent 70%);
  pointer-events: none;
}
.ch-roadmap-inner { max-width: 1280px; margin: 0 auto; position: relative; z-index: 1; }

/* Horizontal 3-column roadmap */
.ch-roadmap-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
}
/* connecting line across all three columns */
.ch-roadmap-track::before {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(16.67% + 28px);
  right: calc(16.67% + 28px);
  height: 1px;
  background: var(--border-1);
  z-index: 0;
}

.ch-phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 28px 0;
  position: relative;
  z-index: 1;
}
.ch-phase-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.ch-phase-dot {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--border-1); background: var(--bg-surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 800; color: var(--text-3);
}
.ch-phase-dot--active {
  background: var(--ch-grad); border-color: transparent;
  box-shadow: 0 0 20px var(--ch-glow);
}
.ch-phase-dot--active svg { width: 22px; height: 22px; stroke: #fff; stroke-width: 2.5; }
.ch-phase-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--ch-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ch-phase-content {
  width: 100%; text-align: left;
  background: var(--ch-panel); border: 1px solid var(--border-1);
  border-radius: var(--radius-m); padding: 24px 24px 26px;
  transition: all 0.3s var(--ease);
}
.ch-phase-content:hover { border-color: var(--ch-border); transform: translateY(-3px); }
.ch-phase--active .ch-phase-content { border-color: var(--ch-border); background: var(--ch-grad-soft); }
.ch-phase-content h4 {
  font-size: 1.1rem; font-weight: 700; color: var(--text-1); margin-bottom: 16px;
}
.ch-phase-content ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ch-phase-content ul li {
  font-size: 0.85rem; color: var(--text-2); line-height: 1.5;
  padding-left: 14px; position: relative;
}
.ch-phase-content ul li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--ch-green); opacity: 0.5;
}
.ch-phase--active .ch-phase-content ul li { color: var(--text-1); }
.ch-phase--active .ch-phase-content ul li::before { opacity: 1; }

/* ════════════════════════════════════════════════════════════════
   S7 · CTA
   ════════════════════════════════════════════════════════════════ */
.ch-cta { background: var(--bg-base); text-align: center; position: relative; overflow: hidden; }
.ch-cta::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(0,201,141,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.ch-cta-inner { position: relative; z-index: 1; max-width: 580px; margin: 0 auto; }
.ch-cta h2 {
  font-size: var(--fs-cta); font-weight: 800;
  letter-spacing: -0.04em; margin-bottom: 16px; line-height: 1.1;
}
.ch-cta p { font-size: 0.98rem; color: var(--text-2); line-height: 1.72; margin-bottom: 14px; }
.ch-cta-slogan {
  font-size: 0.73rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--ch-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 32px;
}
.ch-cta .hero-actions { justify-content: center; }

/* ════════════════════════════════════════════════════════════════
   PROBLEM LIST (inside S2 Why Chthonia)
   ════════════════════════════════════════════════════════════════ */
.ch-problem-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 32px 0 28px;
}
.ch-problem-card {
  --accent: #00C98D;
  position: relative;
  padding: 24px 24px 22px;
  border-radius: var(--radius-m);
  border: 1px solid var(--ch-border);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 100%),
    var(--bg-card, rgba(255,255,255,0.02));
  transition: transform 0.25s var(--ease, ease), border-color 0.25s, box-shadow 0.25s;
  overflow: hidden;
}
.ch-problem-card::before {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  opacity: 0.55;
  transition: opacity 0.25s, box-shadow 0.25s;
}
.ch-problem-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--accent) 50%, transparent);
}
.ch-problem-card:hover::before {
  opacity: 1;
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 60%, transparent);
}
.ch-problem-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  margin-bottom: 14px;
}
.ch-problem-icon svg { width: 24px; height: 24px; }
.ch-problem-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text-1);
  margin: 0 0 8px;
}
.ch-problem-card p {
  font-size: 0.9rem;
  color: var(--text-2);
  line-height: 1.65;
  margin: 0;
}
.ch-problem-card.accent-orange { --accent: #FF7A4B; }
.ch-problem-card.accent-indigo { --accent: #8B7CFF; }
.ch-problem-card.accent-amber  { --accent: #F0C84B; }
.ch-problem-card.accent-teal   { --accent: #3DA37F; }

/* ════════════════════════════════════════════════════════════════
   CAPABILITY CHIPS (inside Tab panels)
   ════════════════════════════════════════════════════════════════ */
.ch-capability-chips {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
  margin-top: 4px; padding: 0;
  border-top: none;
}
.ch-capability-chips span {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 6px 14px; border-radius: 100px;
  border: 1px solid var(--ch-border);
  color: var(--ch-green);
  background: rgba(0,201,141,0.06);
}

/* ════════════════════════════════════════════════════════════════
   S4 · OPERATIONAL LIFECYCLE
   ════════════════════════════════════════════════════════════════ */
.ch-lifecycle {
  padding: 100px 48px;
  background: var(--bg-base);
}
.ch-lifecycle-inner { max-width: 1280px; margin: 0 auto; }

.ch-lifecycle-track {
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.ch-lifecycle-step {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-m);
  padding: 32px 24px;
  text-align: center;
  transition: all 0.3s var(--ease);
  position: relative;
}
.ch-lifecycle-step:hover {
  border-color: var(--ch-border);
  background: rgba(0,201,141,0.04);
  transform: translateY(-4px);
}
.ch-lifecycle-num {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em;
  background: var(--ch-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 14px;
}
.ch-lifecycle-step h3 {
  font-size: 1rem; font-weight: 700; color: var(--text-1); margin-bottom: 10px;
}
.ch-lifecycle-step p {
  font-size: 0.83rem; color: var(--text-2); line-height: 1.62;
}
.ch-lifecycle-arrow {
  flex-shrink: 0;
  width: 32px;
  display: flex; align-items: center; justify-content: center;
  padding-top: 52px;
  color: var(--ch-border);
  font-size: 1.2rem;
  font-weight: 300;
}

/* ════════════════════════════════════════════════════════════════
   S5 · DEPLOYMENT MODELS
   ════════════════════════════════════════════════════════════════ */
.ch-deployment {
  padding: 100px 48px;
  background: var(--bg-surface);
  position: relative; overflow: hidden;
}
.ch-deployment::before {
  content: '';
  position: absolute; top: -60px; left: 0; right: 0; height: 120px;
  background: var(--bg-surface);
  clip-path: polygon(0 60px, 100% 0, 100% 100%, 0 100%);
}
.ch-deployment-inner { max-width: 1280px; margin: 0 auto; position: relative; z-index: 1; }

.ch-deployment-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.ch-deployment-card {
  background: var(--bg-card); border: 1px solid var(--border-1);
  border-radius: var(--radius-m); padding: 36px 30px;
  transition: all 0.3s var(--ease);
  position: relative; overflow: hidden;
}
.ch-deployment-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--ch-grad); opacity: 0; transition: opacity 0.3s;
}
.ch-deployment-card:hover {
  border-color: var(--ch-border);
  transform: translateY(-4px);
}
.ch-deployment-card:hover::after { opacity: 1; }
.ch-deployment-icon {
  width: 52px; height: 52px; border-radius: var(--radius-s);
  background: var(--ch-grad-soft); border: 1px solid var(--ch-border);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
}
.ch-deployment-icon svg { stroke: var(--ch-green); }
.ch-deployment-card h3 {
  font-size: 1.05rem; font-weight: 700; color: var(--text-1); margin-bottom: 12px;
}
.ch-deployment-card p {
  font-size: 0.87rem; color: var(--text-2); line-height: 1.68;
}

/* ════════════════════════════════════════════════════════════════
   S6 · REFERENCE ARCHITECTURE
   ════════════════════════════════════════════════════════════════ */
.ch-architecture {
  padding: 100px 48px;
  background: var(--bg-base);
}
.ch-architecture-inner { max-width: 900px; margin: 0 auto; }

.ch-arch-diagram {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-m);
  overflow: hidden;
}
.ch-arch-row,
.ch-arch-core {
  padding: 24px 32px;
}
.ch-arch-row-label,
.ch-arch-core-label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 14px;
}
.ch-arch-experience {
  background: rgba(0,201,141,0.06);
  border-bottom: 1px solid var(--ch-border);
}
.ch-arch-experience .ch-arch-row-label { color: var(--ch-green); }
.ch-arch-row-items {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.ch-arch-row-items span {
  font-size: 0.82rem; font-weight: 600; color: var(--text-1);
  padding: 7px 16px; border-radius: var(--radius-s);
  background: var(--bg-card); border: 1px solid var(--border-1);
}
.ch-arch-experience .ch-arch-row-items span {
  border-color: var(--ch-border); background: rgba(0,201,141,0.08);
  color: var(--ch-green);
}
.ch-arch-core {
  background: var(--bg-surface);
  border-top: none; border-bottom: 1px solid var(--border-1);
  position: relative;
}
.ch-arch-core-label {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em;
  background: var(--ch-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 16px;
}
.ch-arch-core-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.ch-arch-core-grid span {
  font-size: 0.8rem; font-weight: 500; color: var(--text-2);
  padding: 8px 14px; border-radius: var(--radius-s);
  background: var(--bg-card); border: 1px solid var(--border-1);
  text-align: center;
}
.ch-arch-infra {
  background: rgba(255,255,255,0.02);
  border-top: none;
}
.ch-arch-connector {
  height: 1px; background: var(--border-1);
}
.ch-arch-infra .ch-arch-row-items span {
  color: var(--text-3);
}
.ch-arch-token {
  background: rgba(0,212,255,0.05);
  border-bottom: 1px solid rgba(0,212,255,0.2);
}
.ch-arch-token .ch-arch-row-label { color: var(--ch-teal); }
.ch-arch-token .ch-arch-row-items span {
  border-color: rgba(0,212,255,0.2);
  background: rgba(0,212,255,0.06);
  color: var(--ch-teal);
}
.ch-arch-workload {
  background: rgba(0,201,141,0.04);
  border-bottom: 1px solid var(--border-1);
}
.ch-arch-workload .ch-arch-row-label { color: var(--ch-green); }
.ch-arch-workload .ch-arch-row-items span {
  border-color: var(--ch-border);
  background: rgba(0,201,141,0.06);
  color: var(--ch-green);
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .ch-why-inner { grid-template-columns: 1fr; gap: 48px; }
  .ch-problem-grid { grid-template-columns: repeat(2, 1fr); }
  .ch-pillars-grid { grid-template-columns: 1fr; }
  .ch-panel.active { grid-template-columns: 1fr; gap: 40px; }
  .ch-panel-screenshot { order: -1; }
  .ch-caps-grid { grid-template-columns: 1fr; }
  .ch-deployment-grid { grid-template-columns: 1fr; }
  .ch-arch-core-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .ch-problem-grid { grid-template-columns: 1fr; }
  .ch-why, .ch-pillars, .ch-modules, .ch-caps, .ch-roadmap, .ch-cta,
  .ch-lifecycle, .ch-deployment, .ch-architecture,
  .sw-hero-content { padding-left: 20px; padding-right: 20px; }
  .ch-why-stats { grid-template-columns: 1fr 1fr; }
  /* capabilities tabs — keep all three on one row as a compact segmented
     control (label stacked over its sub-label). Small type + tight line-height
     so the longest label ("AI GPU Cloud Service") doesn't blow up the active
     tab's height (Kuma 2026-06-30) */
  /* NB: .ch-modules-scoped (0,2,0) so these beat the EOF FIXED TYPE-SCALE
     rule `.ch-tab { font-size: var(--fs-body) }` — a media query adds no
     specificity, so a bare .ch-tab here would lose to that later rule.
     Label stays ≥11px for legibility; the roadmap sub-label (FOCUS 2026 /
     2027 H1 / 2027 H2) is shown below it on phones too (Kuma chose to keep the
     timing — 2026-06-30), so the tab carries one extra small line. */
  /* .ch-modules-scoped so it beats the desktop `.ch-modules .ch-tab-row`
     (0,2,0) — a bare .ch-tab-row would lose and silently keep flex-wrap:wrap */
  .ch-modules .ch-tab-row { flex-wrap: nowrap; gap: 6px; align-items: stretch; }
  .ch-modules .ch-tab {
    flex: 1; min-width: 0; flex-direction: column; gap: 3px;
    padding: 9px 5px; text-align: center;
    line-height: 1.18;
  }
  .ch-modules .ch-tab-label { font-size: 11px; line-height: 1.18; }
  .ch-modules .ch-tab-sub {
    display: block; padding-left: 0; border-left: none;
    font-size: 10px; letter-spacing: 0.03em; line-height: 1.2;
  }
  /* operating loop — stack the steps (the connector arrows are re-pointed +
     re-animated downward in the EOF mobile block below) */
  .ch-lifecycle-track { flex-direction: column; gap: 10px; }
  .ch-arch-core-grid { grid-template-columns: repeat(2, 1fr); }
  .ch-roadmap-track { grid-template-columns: 1fr; gap: 40px; }
  .ch-roadmap-track::before { display: none; }
  .ch-phase { align-items: flex-start; text-align: left; padding: 0; }
  .ch-phase-top { flex-direction: row; align-items: center; gap: 16px; margin-bottom: 20px; }
}

/* ════════════════════════════════════════════════════════════════
   RESTRUCTURE 2026-06-10 — AI Factory narrative sections
   New: S2 Economics / S7 Revenue Intelligence / S8 Workflow Protection
   Reframes: S5 Profit Engine strip, S9 condensed reference architecture
   ════════════════════════════════════════════════════════════════ */

/* --- background re-assignment for new section order (alternation) --- */
.ch-economics { padding: 100px 48px; background: var(--bg-surface); position: relative; overflow: hidden; }
.ch-revintel  { padding: 100px 48px; background: var(--bg-base); }
.ch-protect   { padding: 100px 48px; background: var(--bg-surface); position: relative; overflow: hidden; }
.ch-economics-inner, .ch-revintel-inner, .ch-protect-inner {
  max-width: 1280px; margin: 0 auto; position: relative; z-index: 1;
}
/* override existing section backgrounds for new order */
.ch-architecture { background: var(--bg-surface); }
.ch-deployment { background: var(--bg-base); }
.ch-deployment::before { display: none; }

/* ── S2 · AI FACTORY ECONOMICS ─────────────────────────────────── */
.ch-econ-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ch-econ-card {
  background: var(--bg-card); border: 1px solid var(--border-1);
  border-radius: var(--radius-m); padding: 28px 24px;
  transition: all 0.3s var(--ease); position: relative; overflow: hidden;
}
.ch-econ-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--ch-grad); opacity: 0; transition: opacity 0.3s;
}
.ch-econ-card:hover { border-color: var(--ch-border); transform: translateY(-4px); }
.ch-econ-card:hover::after { opacity: 1; }
.ch-econ-icon {
  width: 48px; height: 48px; border-radius: var(--radius-s);
  background: var(--ch-grad-soft); border: 1px solid var(--ch-border);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.ch-econ-icon svg { width: 24px; height: 24px; stroke: var(--ch-green); }
.ch-econ-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--text-1); margin-bottom: 10px; }
.ch-econ-card p { font-size: 0.88rem; color: var(--text-2); line-height: 1.65; }
.ch-econ-close {
  text-align: center; max-width: 780px; margin: 40px auto 0;
  font-size: 1rem; color: var(--text-2); line-height: 1.72;
}
.ch-econ-close span { font-weight: 700; color: var(--ch-green); }

/* ── S5 · PROFIT ENGINE outcome cards (icon, prominent) ────────── */
.ch-profit-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px;
}
.ch-profit-metric {
  text-align: center; padding: 30px 24px;
  border: 1px solid var(--ch-border); border-radius: var(--radius-m);
  background: var(--ch-grad-soft);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: transform 0.3s var(--ease);
}
.ch-profit-metric:hover { transform: translateY(-4px); }
.ch-profit-icon {
  width: 54px; height: 54px; border-radius: var(--radius-s); margin-bottom: 8px;
  background: rgba(0,201,141,0.1); border: 1px solid var(--ch-border);
  display: flex; align-items: center; justify-content: center;
}
.ch-profit-icon svg { width: 28px; height: 28px; stroke: var(--ch-green); }
.ch-profit-metric strong { display: block; font-size: 1.1rem; font-weight: 800; color: var(--text-1); }
.ch-profit-metric span { font-size: 0.86rem; color: var(--text-2); }
.ch-profit-result {
  text-align: center; margin-top: 26px;
  font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em;
  background: var(--ch-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── S7 · AI TOKEN REVENUE INTELLIGENCE ────────────────────────── */
.ch-revintel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 28px; }
.ch-revintel-card {
  background: var(--bg-card); border: 1px solid var(--border-1);
  border-radius: var(--radius-m); padding: 30px 28px;
  transition: all 0.3s var(--ease);
}
.ch-revintel-card:hover { border-color: var(--ch-border); transform: translateY(-3px); }
.ch-revintel-card h3 {
  font-size: 1.05rem; font-weight: 700; color: var(--text-1); margin-bottom: 14px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border-1);
}
.ch-revintel-card p { font-size: 0.9rem; color: var(--text-2); line-height: 1.7; }
.ch-kpi-map {
  background: var(--bg-card); border: 1px solid var(--border-1);
  border-radius: var(--radius-m); padding: 32px 32px 28px;
}
.ch-kpi-map > h3 {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--ch-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 18px;
}
.ch-kpi-map ul { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 32px; }
.ch-kpi-map li { font-size: 0.9rem; color: var(--text-2); line-height: 1.5; padding-left: 20px; position: relative; }
.ch-kpi-map li::before { content: '→'; position: absolute; left: 0; color: var(--ch-green); font-weight: 700; }
.ch-kpi-map li strong { color: var(--text-1); font-weight: 600; }
.ch-revintel-logic {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border-1);
  font-size: 0.92rem; color: var(--text-3); line-height: 1.7; font-style: italic; text-align: center;
}

/* ── S8 · AI JOB WORKFLOW PROTECTION ───────────────────────────── */
.ch-protect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ch-protect-card {
  background: var(--bg-card); border: 1px solid var(--border-1);
  border-radius: var(--radius-m); padding: 30px 28px;
  transition: all 0.3s var(--ease); position: relative; overflow: hidden;
}
.ch-protect-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--ch-grad); opacity: 0; transition: opacity 0.3s;
}
.ch-protect-card:hover { border-color: var(--ch-border); transform: translateY(-4px); }
.ch-protect-card:hover::after { opacity: 1; }
.ch-protect-icon {
  width: 48px; height: 48px; border-radius: var(--radius-s);
  background: var(--ch-grad-soft); border: 1px solid var(--ch-border);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.ch-protect-icon svg { width: 24px; height: 24px; stroke: var(--ch-green); }
.ch-protect-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--text-1); margin-bottom: 14px; }
.ch-protect-card ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ch-protect-card li { font-size: 0.86rem; color: var(--text-2); line-height: 1.55; padding-left: 18px; position: relative; }
.ch-protect-card li::before {
  content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--ch-green); opacity: 0.7;
}
.ch-protect-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 32px; }
.ch-protect-chips span {
  font-size: 0.8rem; font-weight: 600; padding: 8px 18px; border-radius: 100px;
  border: 1px solid var(--ch-border); color: var(--ch-green); background: rgba(0,201,141,0.06);
}

/* ── S9 · CONDENSED REFERENCE ARCHITECTURE ─────────────────────── */
.ch-refarch { margin-top: 48px; }
.ch-refarch-layers { display: flex; flex-direction: column; gap: 8px; max-width: 900px; margin: 0 auto; }
.ch-refarch-layer {
  padding: 16px 22px; border-radius: var(--radius-m);
  border: 1px solid var(--border-1); background: var(--bg-card);
  font-size: 0.88rem; color: var(--text-2);
}
.ch-refarch-layer--cp { border-color: var(--ch-border); background: var(--ch-grad-soft); color: var(--text-1); }
.ch-refarch-tag {
  display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ch-green); margin-right: 12px;
}
.ch-refarch-note {
  max-width: 760px; margin: 24px auto 0; text-align: center;
  font-size: 0.86rem; color: var(--text-3); line-height: 1.7;
}

/* ── responsive for restructure sections ───────────────────────── */
@media (max-width: 1024px) {
  .ch-econ-grid { grid-template-columns: repeat(2, 1fr); }
  .ch-revintel-grid, .ch-protect-grid, .ch-profit-strip { grid-template-columns: 1fr; }
  .ch-kpi-map ul { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .ch-economics, .ch-revintel, .ch-protect { padding-left: 20px; padding-right: 20px; }
  .ch-econ-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   C-INTEGRATION 2026-06-10 — adopt selected Version-C presentations
   (original type scale kept; C colour/interaction adopted)
   ════════════════════════════════════════════════════════════════ */

/* ── S3 · Enterprise Problem → "capital leak" alert cards ──────── */
.ch-leak-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px; }
.ch-leak {
  background: var(--ch-panel); border: 1px solid var(--border-1);
  border-left: 3px solid var(--ch-warn); border-radius: var(--radius-m);
  padding: 24px 22px; transition: all 0.3s var(--ease);
}
.ch-leak:hover { border-left-color: var(--ch-red); transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.ch-leak-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ch-leak-label { font-size: 1.05rem; font-weight: 700; color: var(--text-1); line-height: 1.25; }
.ch-leak-flag {
  flex-shrink: 0; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em;
  padding: 3px 8px; border-radius: 5px; color: var(--ch-warn);
  background: rgba(240,162,75,0.12); border: 1px solid rgba(240,162,75,0.3);
  font-family: var(--font-body);
}
.ch-leak p { font-size: 0.9rem; color: var(--text-2); line-height: 1.62; }

/* ── S4 · Beyond IaaS → layer stack panel (enlarged titles) ────── */
.ch-stack { display: flex; flex-direction: column; gap: 8px; }
.ch-stack-layer {
  border: 1px solid var(--border-1); border-radius: var(--radius-m);
  padding: 20px 26px; background: var(--ch-panel); transition: all 0.25s var(--ease);
}
.ch-stack-layer:hover { transform: translateX(4px); border-color: var(--ch-border); }
.ch-stack-layer--l4 { border-color: rgba(0,201,141,0.32); background: rgba(0,201,141,0.07); }
.ch-stack-layer--l3 { border-color: var(--ch-border); background: rgba(0,201,141,0.05); }
.ch-stack-layer--l2 { background: var(--ch-grad-soft); border-color: var(--ch-border); }
.ch-stack-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ch-stack-n {
  font-size: 0.74rem; font-weight: 800; color: #04140E; background: var(--ch-grad);
  padding: 3px 9px; border-radius: 6px;
}
.ch-stack-layer--l4 .ch-stack-n { background: var(--ch-grad); }
.ch-stack-title { font-size: 1.2rem; font-weight: 800; color: var(--text-1); letter-spacing: -0.02em; }
.ch-stack-items { display: flex; flex-wrap: wrap; gap: 8px; }
.ch-stack-items span {
  font-size: 0.82rem; font-weight: 500; color: var(--text-2);
  padding: 7px 15px; border-radius: 8px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-1);
}

/* ── S7 · Revenue Intelligence → KPI signal table + formula box ── */
.ch-kpi-table {
  border: 1px solid var(--border-1); border-radius: var(--radius-m); overflow: hidden; background: var(--ch-panel);
}
.ch-kpi-table-head, .ch-kpi-table-row { display: grid; grid-template-columns: 230px 1fr; gap: 24px; padding: 15px 26px; }
.ch-kpi-table-head {
  background: rgba(0,201,141,0.07); border-bottom: 1px solid var(--ch-border);
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ch-green);
  font-family: var(--font-body);
}
.ch-kpi-table-row { border-bottom: 1px solid var(--border-1); transition: background 0.2s; }
.ch-kpi-table-row:last-child { border-bottom: none; }
.ch-kpi-table-row:hover { background: rgba(255,255,255,0.02); }
.ch-kpi-table-row span:first-child { font-size: 0.92rem; font-weight: 700; color: var(--text-1); }
.ch-kpi-table-row span:last-child { font-size: 0.9rem; color: var(--text-2); }
.ch-revintel-logic {
  margin-top: 24px; padding: 18px 24px; border: 1px dashed var(--ch-border); border-radius: var(--radius-m);
  background: rgba(0,201,141,0.04); font-style: normal; text-align: center;
  font-size: 0.92rem; color: var(--text-2); line-height: 1.7;
}
.ch-revintel-logic em { font-style: normal; color: var(--ch-green); font-weight: 700; }

/* ── S8 · Workflow Protection → status-widget header (dot) ─────── */
.ch-protect-top { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.ch-protect-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: var(--ch-green); box-shadow: 0 0 8px var(--ch-green);
}
.ch-protect-top h3 { margin-bottom: 0; }

/* ── S10 · Roadmap → C-style status badge on the timeline ──────── */
.ch-phase-status {
  display: inline-block; margin-bottom: 12px;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em;
  padding: 3px 10px; border-radius: 100px;
  color: var(--text-3); background: rgba(255,255,255,0.05); border: 1px solid var(--border-1);
  font-family: var(--font-body);
}
.ch-phase--active .ch-phase-status { color: #04140E; background: var(--ch-grad); border-color: transparent; }

/* ── responsive for C-integration blocks ──────────────────────── */
@media (max-width: 1024px) {
  .ch-leak-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .ch-leak-grid { grid-template-columns: 1fr; }
  .ch-kpi-table-head, .ch-kpi-table-row { grid-template-columns: 1fr; gap: 4px; }
  .ch-kpi-table-head span:last-child { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   DESIGN POLISH 2026-06-15 — visual rhythm system (P1)
   Goal: kill the "every section looks the same / text fatigue" feel.
   P1 = (a) subtle texture layer so sections stop blurring together
        (b) numbered editorial eyebrows for documentary rhythm
   CSS-only. No copy changed. Revert tag: pre-design-polish-v1
   ════════════════════════════════════════════════════════════════ */

/* --- (a) faint dot-grid texture on all content sections ---------- */
/* layered as background-image so it coexists with each section's
   own background-color / pseudo glows; cards sit on top and cover it,
   so dots only breathe in the gutters. */
.ch-economics, .ch-why, .ch-architecture, .ch-lifecycle, .ch-modules,
.ch-revintel, .ch-protect, .ch-deployment, .ch-roadmap {
  background-image:
    /* uniform top divider hairline (fades at both ends) */
    linear-gradient(90deg, transparent 0%, rgba(0,201,141,0.38) 50%, transparent 100%),
    /* dot-grid texture — visible in the gutters between cards */
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1.3px, transparent 1.6px);
  background-size: 80% 1px, 24px 24px;
  background-position: top center, 0 0;
  background-repeat: no-repeat, repeat;
}
/* drop the inconsistent angled clip-path dividers in favour of the
   uniform hairline above */
.ch-modules::before, .ch-roadmap::before { display: none; }

/* (numbered eyebrows removed per Kuma 2026-06-15 — keep eyebrows plain
   and centred; do NOT set display:inline-block here as it breaks the
   margin:auto centring used by .ch-why-inner > .eyebrow) */

/* ════════════════════════════════════════════════════════════════
   DESIGN POLISH 2026-06-15 — data visuals (P2)
   Add a visual anchor to the three text-heavy sections so they stop
   reading as walls of copy: S2 flow / S7 finance retint / S8 signal.
   ════════════════════════════════════════════════════════════════ */

/* ── S2 · The economics → photographic background ──────────────── */
/* Kuma-supplied art behind the section; dark gradient overlay keeps the
   header copy and cards readable. Tune the overlay alpha to taste.
   This overrides the P1 dot-grid for .ch-economics (photo = texture). */
.ch-economics {
  background-image:
    /* uniform top divider hairline (kept for section rhythm) */
    linear-gradient(90deg, transparent 0%, rgba(0,201,141,0.38) 50%, transparent 100%),
    /* left/right edge vignette — fades the artwork into the dark page so
       there's no hard seam at the section sides */
    linear-gradient(to right,
      #06110D 0%, rgba(6,17,13,0) 17%, rgba(6,17,13,0) 83%, #06110D 100%),
    /* readability overlay — darker at the header zone, lifts in the
       middle so the artwork's streams + core read, settles before cards */
    linear-gradient(to bottom,
      rgba(6,17,13,0.88) 0%, rgba(6,17,13,0.62) 24%,
      rgba(6,17,13,0.42) 48%, rgba(6,17,13,0.58) 72%,
      rgba(6,17,13,0.90) 100%),
    /* the artwork */
    url("assets/chthonia/chthonia-economics-bg-v1-1920x1080.png");
  background-size: 72% 1px, cover, cover, cover;
  background-position: top center, center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}
/* keep the section heading on a single line (wraps again on mobile) */
.ch-economics .ch-section-header { max-width: 900px; }
.ch-economics .ch-section-header h2 { white-space: nowrap; }
@media (max-width: 768px) {
  .ch-economics .ch-section-header h2 { white-space: normal; }
}
/* in this section the cards become near-solid panels so they stay
   readable over the brighter artwork (default card is ~4.5% white) */
.ch-economics .ch-econ-card {
  background: rgba(9,21,16,0.9);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
/* flow-band label chips also firm up slightly over the artwork */
.ch-economics .ch-flow-chip { background: rgba(9,21,16,0.78); }

/* ── S2 · AI Factory flow band (input → core → output) ──────────── */
.ch-flow {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 22px;
  max-width: 820px;
  margin: 4px auto 56px;
  padding: 8px 12px;
  /* frameless — no border/panel, just a soft glow behind the core so it
     doesn't read as yet another card in a page already full of boxes */
  background: radial-gradient(ellipse 46% 150% at 50% 50%, rgba(0,201,141,0.06) 0%, transparent 72%);
}
.ch-flow-side { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.ch-flow-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px; border-radius: 100px;
  border: 1px solid var(--border-1); background: rgba(255,255,255,0.03);
  font-size: 0.88rem; font-weight: 700; color: var(--text-1);
}
.ch-flow-chip svg { width: 18px; height: 18px; color: var(--text-2); }
.ch-flow-chip--out { border-color: var(--ch-border); background: rgba(0,201,141,0.07); }
.ch-flow-chip--out svg { color: var(--ch-green); }
.ch-flow-unit {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--ch-green); font-family: var(--font-body);
}

/* the connecting pipes carry a flowing light dot */
.ch-flow-pipe {
  position: relative; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(0,201,141,0.15), rgba(0,201,141,0.4));
  overflow: visible;
}
.ch-flow-pipe--out { background: linear-gradient(90deg, rgba(0,201,141,0.4), rgba(0,201,141,0.55)); }
.ch-flow-dot {
  position: absolute; top: 50%; left: 0; width: 7px; height: 7px;
  border-radius: 50%; background: var(--ch-green);
  box-shadow: 0 0 10px var(--ch-green);
  transform: translate(-50%, -50%);
  animation: ch-flow-run 2.4s linear infinite;
}
.ch-flow-pipe--out .ch-flow-dot { animation-delay: 1.2s; }
@keyframes ch-flow-run {
  0%   { left: 0;    opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* the glowing AI-factory core */
.ch-flow-core {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--ch-grad-soft); border: 1px solid var(--ch-border);
}
.ch-flow-core-ring {
  position: absolute; inset: -6px; border-radius: 50%;
  border: 1px solid var(--ch-border);
  animation: ch-core-pulse 2.8s ease-out infinite;
}
@keyframes ch-core-pulse {
  0%   { transform: scale(1);    opacity: 0.7; }
  100% { transform: scale(1.35); opacity: 0; }
}
.ch-flow-core-label {
  font-size: 0.78rem; font-weight: 800; line-height: 1.2; text-align: center;
  background: var(--ch-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
@media (prefers-reduced-motion: reduce) {
  .ch-flow-dot, .ch-flow-core-ring { animation: none; }
  .ch-flow-dot { left: 50%; }
}
@media (max-width: 768px) {
  .ch-flow { grid-template-columns: 1fr; gap: 14px; justify-items: center; }
  .ch-flow-side { flex-direction: row; }
  .ch-flow-pipe { width: 2px; height: 32px; background: linear-gradient(180deg, rgba(0,201,141,0.15), rgba(0,201,141,0.4)); }
  .ch-flow-pipe--out { background: linear-gradient(180deg, rgba(0,201,141,0.4), rgba(0,201,141,0.55)); }
  .ch-flow-dot { animation: ch-flow-run-v 2.4s linear infinite; left: 50%; }
  @keyframes ch-flow-run-v { 0%{top:0;opacity:0} 15%{opacity:1} 85%{opacity:1} 100%{top:100%;opacity:0} }
}

/* ── S7 · Revenue Intelligence → structure only (green-first) ────── */
/* keep the section in Chthonia green like the rest of the page; add
   hierarchy (numbered lenses, accent rules, equation strip) without a
   colour jump. */
.ch-revintel-grid { counter-reset: chview; }
.ch-revintel-card {
  position: relative; overflow: hidden;
  padding-top: 34px;
}
.ch-revintel-card::before {
  counter-increment: chview;
  content: counter(chview, decimal-leading-zero);
  position: absolute; top: 18px; right: 22px;
  font-family: var(--font-body);
  font-size: 1.5rem; font-weight: 800; line-height: 1;
  color: rgba(0,201,141,0.18); letter-spacing: -0.02em;
}
.ch-revintel-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--ch-green), transparent);
  opacity: 0.55;
}
.ch-revintel-card:hover { border-color: var(--ch-border); transform: translateY(-3px); }
.ch-revintel-card h3 { border-bottom-color: var(--ch-border); }

/* KPI signal table → arrow emphasis (green head kept from base) */
.ch-kpi-table-row span:last-child { position: relative; padding-left: 18px; }
.ch-kpi-table-row span:last-child::before {
  content: '→'; position: absolute; left: 0;
  color: var(--ch-green); font-weight: 700; opacity: 0.7;
}
.ch-kpi-table-row:hover { background: rgba(0,201,141,0.04); }

/* formula box → prominent green equation strip */
.ch-revintel-logic {
  border-style: solid; border-color: var(--ch-border);
  background: rgba(0,201,141,0.05);
  font-size: 1rem; font-weight: 600; color: var(--text-1);
  letter-spacing: 0.01em;
}
.ch-revintel-logic em {
  background: var(--ch-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  font-weight: 800;
}

/* ── S8 · Workload Protection → "live monitor" feel ─────────────── */
/* health dot now pulses; an equalizer signal shows the job is alive */
.ch-protect-dot {
  position: relative;
  animation: ch-dot-pulse 2s ease-in-out infinite;
}
@keyframes ch-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,201,141,0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(0,201,141,0); }
}
.ch-protect-sig {
  margin-left: auto;
  display: inline-flex; align-items: flex-end; gap: 3px; height: 18px;
}
.ch-protect-sig i {
  width: 3px; border-radius: 2px; background: var(--ch-green); opacity: 0.85;
  animation: ch-sig 1.1s ease-in-out infinite;
}
.ch-protect-sig i:nth-child(1) { height: 40%; animation-delay: 0s;    }
.ch-protect-sig i:nth-child(2) { height: 90%; animation-delay: 0.18s; }
.ch-protect-sig i:nth-child(3) { height: 55%; animation-delay: 0.36s; }
.ch-protect-sig i:nth-child(4) { height: 100%; animation-delay: 0.54s; }
.ch-protect-sig i:nth-child(5) { height: 65%; animation-delay: 0.72s; }
@keyframes ch-sig {
  0%, 100% { transform: scaleY(0.4); opacity: 0.45; }
  50%      { transform: scaleY(1);   opacity: 0.95; }
}
.ch-protect-sig i { transform-origin: bottom; }
@media (prefers-reduced-motion: reduce) {
  .ch-protect-dot, .ch-protect-sig i { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   DESIGN POLISH 2026-06-15 — depth & motion (P3)
   S4 stack connector rail, S5 animated lifecycle flow
   ════════════════════════════════════════════════════════════════ */

/* ── S4 · Beyond IaaS stack → connected layers with depth ───────── */
.ch-stack { position: relative; padding-left: 34px; }
/* vertical rail running top(L4)→bottom(L1) */
.ch-stack::before {
  content: ''; position: absolute; left: 9px; top: 22px; bottom: 22px; width: 2px;
  background: linear-gradient(180deg,
    var(--ch-green) 0%, var(--ch-green) 45%, rgba(0,201,141,0.25) 100%);
  border-radius: 2px;
}
.ch-stack-layer { position: relative; box-shadow: 0 10px 24px -18px rgba(0,0,0,0.7); }
/* node on the rail, aligned to each layer's centre */
.ch-stack-layer::before {
  content: ''; position: absolute; left: -25px; top: 50%; transform: translateY(-50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--ch-panel); border: 2px solid var(--ch-green);
  box-shadow: 0 0 0 3px var(--bg-base);
}
.ch-stack-layer--l4::before { box-shadow: 0 0 8px var(--ch-green), 0 0 0 3px var(--bg-base); }
.ch-stack-layer--l3::before { box-shadow: 0 0 8px var(--ch-green), 0 0 0 3px var(--bg-base); }
.ch-stack-layer--l1::before { border-color: rgba(0,201,141,0.4); }
.ch-stack-layer:hover { transform: translateX(6px); box-shadow: 0 14px 30px -16px rgba(0,0,0,0.8); }
@media (max-width: 768px) {
  .ch-stack { padding-left: 26px; }
  .ch-stack::before { left: 6px; }
  .ch-stack-layer::before { left: -22px; }
}

/* ── S5 · Operating loop → animated flow arrows ─────────────────── */
.ch-lifecycle-arrow {
  background: var(--ch-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  font-size: 1.5rem; font-weight: 600;
  animation: ch-arrow-flow 1.8s ease-in-out infinite;
}
/* arrows are the only <div> children among <article> steps → nth-of-type 1–4 */
.ch-lifecycle-arrow:nth-of-type(1) { animation-delay: 0s; }
.ch-lifecycle-arrow:nth-of-type(2) { animation-delay: 0.2s; }
.ch-lifecycle-arrow:nth-of-type(3) { animation-delay: 0.4s; }
.ch-lifecycle-arrow:nth-of-type(4) { animation-delay: 0.6s; }
@keyframes ch-arrow-flow {
  0%, 100% { opacity: 0.3; transform: translateX(-3px); }
  50%      { opacity: 1;   transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .ch-lifecycle-arrow { animation: none; opacity: 0.7; }
}

/* ── S3 · leak cards → icon + tag layout (Kuma 2026-06-15) ───────── */
/* bare orange icon (no box) keeps S3 visually distinct from the
   icon-in-box sections; title drops to its own line below the top row */
.ch-leak-icon { display: inline-flex; color: var(--ch-warn); transition: color 0.3s var(--ease); }
.ch-leak-icon svg { width: 24px; height: 24px; }
.ch-leak:hover .ch-leak-icon { color: var(--ch-red); }
.ch-leak-label { display: block; margin-bottom: 8px; }

/* top row = icon + tag side by side; tag is now readable orange text
   (badge styling dropped, size bumped) instead of a tiny corner chip */
.ch-leak-top {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 10px; margin-bottom: 12px;
}
.ch-leak-flag {
  font-size: 0.86rem; font-weight: 800; letter-spacing: 0.06em;
  color: var(--ch-warn);
  background: none; border: none; padding: 0; border-radius: 0;
  font-family: var(--font-body);
}
.ch-leak:hover .ch-leak-flag { color: var(--ch-red); }

/* ── S3 · two-column layout (left narrative / right evidence cards) ─ */
/* breaks the page's repeated "centered header over a full-width grid"
   rhythm — S3 reads as argument-on-the-left, the four leaks on the right */
.ch-why-layout {
  display: grid;
  grid-template-columns: 1fr minmax(380px, 460px);
  gap: 48px;
  align-items: start;
  text-align: left;
}
/* swap sides: cards on the left, narrative intro on the right */
.ch-why-layout .ch-leak-grid { order: 1; }
.ch-why-intro { order: 2; }
.ch-why-intro .eyebrow,
.ch-why-intro h2,
.ch-why-intro .ch-why-lead,
.ch-why-intro .ch-why-close {
  max-width: none; margin-left: 0; margin-right: 0; text-align: left;
}
.ch-why-intro h2 { margin-bottom: 18px; }
.ch-why-intro .ch-why-lead { margin-bottom: 22px; }
.ch-why-intro .ch-why-close {
  margin-top: 0; padding-top: 18px;
  border-top: 1px solid var(--ch-border); color: var(--text-1);
}
.ch-why-layout .ch-leak-grid { grid-template-columns: 1fr 1fr; margin-top: 0; }
@media (max-width: 1024px) {
  .ch-why-layout { grid-template-columns: 1fr; gap: 36px; }
  /* stacked: heading first, cards after */
  .ch-why-intro { order: 0; }
  .ch-why-layout .ch-leak-grid { order: 1; }
  /* centre the S3 "operations gap" header on mobile to match every other
     section (its desktop two-column layout left-aligns it) — Kuma 2026-06-30 */
  .ch-why-intro,
  .ch-why-intro .eyebrow,
  .ch-why-intro h2,
  .ch-why-intro .ch-why-lead,
  .ch-why-intro .ch-why-close { text-align: center; }
}
@media (max-width: 600px) {
  .ch-why-layout .ch-leak-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   DESIGN POLISH 2026-06-15 — S4 reference layout (Kuma attachment)
   Each layer = [icon + title] | [dot-separated capabilities] | [visual]
   in one rounded container; the IaaS Compute row is highlighted.
   Right-side art is a placeholder until Kuma supplies final images.
   Overrides the earlier C-integration stack + P3 rail styles.
   ════════════════════════════════════════════════════════════════ */
.ch-architecture-inner { max-width: 1160px; }

.ch-stack {
  padding-left: 0;                 /* undo P3 rail offset */
  gap: 0;
  border: 1px solid var(--border-1);
  border-radius: 16px;
  overflow: hidden;
  background: var(--ch-panel);
}
.ch-stack::before { display: none; }   /* remove P3 vertical rail */

.ch-stack-layer {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 1.5fr) 150px;
  align-items: center;
  gap: 32px;
  padding: 22px 28px;
  border: none;
  border-bottom: 1px solid var(--border-1);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: background 0.25s var(--ease);
}
.ch-stack-layer:last-child { border-bottom: none; }
.ch-stack-layer::before { display: none; }   /* remove P3 node dot */
.ch-stack-layer:hover { transform: none; box-shadow: none; background: rgba(255,255,255,0.02); }

/* left — L-number badge + title */
.ch-stack-head { display: flex; align-items: center; gap: 16px; margin-bottom: 0; }
/* .ch-stack prefix raises specificity above the old per-layer badge
   rules so every non-active badge shares one legible soft style */
.ch-stack .ch-stack-n {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,201,141,0.13);
  border: 1px solid rgba(0,201,141,0.45);
  color: #3DE3B0;
  font-family: var(--font-body);
  font-size: 0.92rem; font-weight: 800; letter-spacing: 0.02em;
  padding: 0;
}
.ch-stack-title { font-size: 1.05rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }

/* middle — dot-separated capability text (no pills) */
.ch-stack-items { display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
.ch-stack-items span {
  font-size: 0.9rem; font-weight: 500; color: var(--text-2);
  padding: 0; background: none; border: none; border-radius: 0;
}
.ch-stack-items span:not(:first-child)::before {
  content: '·'; color: var(--ch-green); font-weight: 800; opacity: 0.8;
  margin: 0 12px;
}

/* right — visual placeholder (swap for <img> when art is ready) */
.ch-stack-media {
  justify-self: end;
  width: 150px; height: 92px; border-radius: 12px;
  border: 1px dashed var(--border-1);
  background:
    radial-gradient(ellipse at 60% 50%, rgba(0,201,141,0.06), transparent 70%),
    rgba(255,255,255,0.015);
  display: flex; align-items: center; justify-content: center;
}
.ch-stack-media-ph { color: var(--text-3); display: inline-flex; }
.ch-stack-media-ph svg { width: 28px; height: 28px; }

/* highlighted row */
.ch-stack-layer--active {
  background: var(--ch-grad-soft);
  box-shadow: inset 0 0 0 1px var(--ch-border), 0 0 30px rgba(0,201,141,0.1);
}
.ch-stack-layer--active:hover { background: var(--ch-grad-soft); }
.ch-stack-layer--active .ch-stack-title { color: var(--text-1); }
.ch-stack-layer--active .ch-stack-n {
  background: var(--ch-grad); border-color: transparent; color: #04140E;
}
.ch-stack-layer--active .ch-stack-media {
  border-style: solid; border-color: var(--ch-border);
  background:
    radial-gradient(ellipse at 60% 50%, rgba(0,201,141,0.18), transparent 70%),
    rgba(0,201,141,0.05);
}
.ch-stack-layer--active .ch-stack-media-ph { color: var(--ch-green); }

@media (max-width: 860px) {
  .ch-stack-layer { grid-template-columns: 1fr; gap: 14px; }
  .ch-stack-media { justify-self: stretch; width: 100%; height: 120px; }
}

/* ── S5 · operating loop tweaks (Kuma 2026-06-16) ───────────────── */
/* keep the heading on one line (wraps again on mobile) */
.ch-lifecycle .ch-section-header { max-width: 820px; }
.ch-lifecycle .ch-section-header h2 { white-space: nowrap; }
@media (max-width: 768px) {
  .ch-lifecycle .ch-section-header h2 { white-space: normal; }
}
/* arrows are now chevron SVGs, not "→" glyphs — drop the text-clip and
   colour the stroke; the staggered flow animation still applies */
.ch-lifecycle-arrow { -webkit-text-fill-color: initial; color: var(--ch-green); }
.ch-lifecycle-arrow svg { width: 20px; height: 20px; stroke: var(--ch-green); }

/* ════════════════════════════════════════════════════════════════
   B REDESIGN 2026-06-16 — reduce card repetition (frontend-design pass)
   B-only overrides. A version (styles-software.css) stays untouched.
   ════════════════════════════════════════════════════════════════ */

/* S5 — demote the 3 outcome cards to a light inline metric strip so the
   section reads as "flow → result", not "flow + a third card grid". */
.ch-profit-strip {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
  gap: 0; margin-top: 40px;
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
  background: none;
}
.ch-profit-metric {
  flex: 1 1 0; min-width: 210px;
  border: none; background: none; border-radius: 0;
  padding: 18px 26px; gap: 5px;
  position: relative;
}
.ch-profit-metric:hover { transform: none; }
.ch-profit-metric + .ch-profit-metric::before {
  content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 1px;
  background: var(--border-1);
}
.ch-profit-metric strong { font-size: 0.95rem; }
.ch-profit-metric span { font-size: 0.8rem; color: var(--text-3); }
@media (max-width: 680px) {
  .ch-profit-metric + .ch-profit-metric::before { display: none; }
  .ch-profit-metric { border-top: 1px solid var(--border-1); }
  .ch-profit-strip { border: none; }
}

/* ── S2 — frameless feature columns floating on the artwork ─────── */
/* drop the 4 solid card panels; render as 4 frameless columns split by
   hairlines over a soft darkening band so text stays legible. */
.ch-economics .ch-econ-grid {
  gap: 0;
  /* frosted dark band so the columns read clearly over the bright art,
     while the blur still lets the artwork glow through behind them */
  background: rgba(6,17,13,0.45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 8px 0;
}
.ch-economics .ch-econ-card {
  background: none; border: none; border-radius: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 26px 28px;
  position: relative;
}
.ch-economics .ch-econ-card::after { display: none; }   /* kill hover underline */
.ch-economics .ch-econ-card:hover { transform: none; }
.ch-economics .ch-econ-card + .ch-econ-card::before {
  content: ''; position: absolute; left: 0; top: 26px; bottom: 26px; width: 1px;
  background: rgba(255,255,255,0.09);
}
.ch-economics .ch-econ-card h3,
.ch-economics .ch-econ-card p { text-shadow: 0 2px 10px rgba(0,0,0,0.55); }
@media (max-width: 1024px) {
  .ch-economics .ch-econ-card + .ch-econ-card::before { display: none; }
}

/* ── S8 — one "monitor console" instead of three separate cards ──── */
.ch-protect-grid {
  gap: 0;
  border: 1px solid var(--ch-border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--ch-panel);
}
.ch-protect-card {
  border: none; border-radius: 0; background: none;
  padding: 30px 28px;
}
.ch-protect-card::after { display: none; }
.ch-protect-card:hover { transform: none; background: rgba(0,201,141,0.03); }
.ch-protect-card + .ch-protect-card { border-left: 1px solid var(--border-1); }
@media (max-width: 1024px) {
  .ch-protect-card + .ch-protect-card { border-left: none; border-top: 1px solid var(--border-1); }
}

/* ── S7 — 3 lenses marked by a left colour bar (no dividers, no number);
   the KPI table stays the hero ──────────────────────────────────── */
.ch-revintel-grid {
  gap: 28px;
  align-items: stretch;             /* all three cards share the tallest height */
  border-top: none; border-bottom: none;
  margin-bottom: 32px;
}
.ch-revintel-card {
  border: none; background: none; border-radius: 0;
  padding: 2px 0 2px 24px;          /* room + breathing for the left bar */
  position: relative; height: 100%; box-sizing: border-box;
}
.ch-revintel-card:hover { transform: none; border-color: transparent; }
.ch-revintel-card::before { display: none; }   /* remove the 01/02/03 numbering */
.ch-revintel-card::after {                      /* full-height left colour line */
  content: ''; display: block;
  position: absolute; left: 0; right: auto; top: 0; bottom: 0;
  width: 2px; height: auto;                      /* override A's height:2px top bar */
  border-radius: 4px; background: var(--ch-green); opacity: 1;
  transition: box-shadow 0.3s var(--ease);
}
.ch-revintel-card:hover::after { box-shadow: 0 0 14px rgba(0,201,141,0.55); }
.ch-revintel-card h3 {
  border-bottom: none; padding-bottom: 0; padding-left: 0;
  margin-bottom: 10px;
}
.ch-revintel-card + .ch-revintel-card { border-left: none; }
/* remove the "→" prefix that rendered as garbage in the Signal column */
.ch-kpi-table-row span:last-child { padding-left: 0; }
.ch-kpi-table-row span:last-child::before { content: none; display: none; }

/* ── S9 — deployment modes become a slim segmented selector; the
   reference-architecture diagram becomes the section's hero ─────── */
.ch-deployment-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 1px solid var(--border-1); border-radius: 14px; overflow: hidden;
  background: var(--ch-panel); margin-bottom: 44px;
}
.ch-deployment-card {
  border: none; border-radius: 0; background: none; box-shadow: none;
  padding: 22px 24px;
  display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: center;
}
.ch-deployment-card::after { display: none; }
.ch-deployment-card:hover { transform: none; background: rgba(0,201,141,0.04); }
.ch-deployment-card + .ch-deployment-card { border-left: 1px solid var(--border-1); }
.ch-deployment-icon {
  width: 42px; height: 42px; margin-bottom: 0; grid-row: span 2;
}
.ch-deployment-card h3 { font-size: 0.98rem; margin-bottom: 4px; }
.ch-deployment-card p { font-size: 0.82rem; line-height: 1.55; }

/* elevate the reference architecture as the hero visual */
.ch-refarch { margin-top: 0; }
.ch-refarch-layers { gap: 10px; }
.ch-refarch-layer {
  padding: 20px 26px; font-size: 0.92rem;
  display: flex; align-items: center; gap: 14px;
}
.ch-refarch-layer--cp {
  box-shadow: 0 0 26px rgba(0,201,141,0.12);
}
.ch-refarch-tag {
  flex-shrink: 0; min-width: 150px; margin-right: 0;
  font-size: 0.72rem;
}
@media (max-width: 860px) {
  .ch-deployment-grid { grid-template-columns: 1fr; }
  .ch-deployment-card + .ch-deployment-card { border-left: none; border-top: 1px solid var(--border-1); }
  .ch-refarch-layer { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ch-refarch-tag { min-width: 0; }
}

/* ── B · tech-pattern background for The operating loop only (Kuma art) ─ */
/* dark circuit/star texture behind S5; a uniform overlay keeps it subtle
   and the copy readable. Replaces the P1 dot-grid here. Keeps the top
   hairline. (S7 / S9 reverted to their previous dot-grid style.) */
.ch-lifecycle {
  background-image:
    linear-gradient(90deg, transparent 0%, rgba(0,201,141,0.38) 50%, transparent 100%),
    linear-gradient(rgba(6,17,13,0.6), rgba(6,17,13,0.6)),
    url("assets/chthonia/chthonia-tech-pattern.png");
  background-size: 80% 1px, cover, cover;
  background-position: top center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

/* ── B · light-stream parallax background (S2 + S5 compare) ──────── */
/* Splits a section's background into two pseudo layers so the artwork
   can drift on scroll while the tint + vignette + readability overlays
   stay locked to the section:
     ::before = artwork only, oversized + translateY (the parallax)
     ::after  = green tint / vignette / readability / hairline (static)
   The JS in software-redesign.html writes --ch-econ-shift (px) on scroll
   via rAF; range is kept inside the ::before headroom so no edge shows.
   Applied to S1 hero (.sw-hero, section_bg_01 light-streams — moved here
   from S2 per Kuma 2026-06-22), S5 (.ch-lifecycle) and S9 (.ch-deployment)
   — each with its own ::before image override below. To drop a section,
   remove its selector from this group + the JS list. */
.sw-hero, .ch-lifecycle, .ch-deployment {
  background-image: none;
  isolation: isolate;
  position: relative;
  overflow: hidden;
}
.sw-hero::before, .ch-lifecycle::before, .ch-deployment::before {
  content: ""; display: block;      /* .ch-deployment::before was display:none */
  position: absolute; left: 0; right: 0;
  top: -24%; height: 148%;          /* headroom each side for the drift */
  z-index: 0; pointer-events: none;
  background-image: url("assets/chthonia/section_bg_01.png");
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transform: translate3d(0, var(--ch-econ-shift, 0px), 0);
  will-change: transform;
}
.sw-hero::after, .ch-lifecycle::after, .ch-deployment::after {
  content: ""; position: absolute; inset: 0;
  z-index: 1; pointer-events: none;
  background-image:
    /* uniform top divider hairline */
    linear-gradient(90deg, transparent 0%, rgba(0,201,141,0.38) 50%, transparent 100%),
    /* left/right edge vignette — fade artwork into the dark page */
    linear-gradient(to right,
      #06110D 0%, rgba(6,17,13,0) 17%, rgba(6,17,13,0) 83%, #06110D 100%),
    /* readability overlay — darker top/bottom, lifts in the middle */
    linear-gradient(to bottom,
      rgba(6,17,13,0.88) 0%, rgba(6,17,13,0.62) 24%,
      rgba(6,17,13,0.42) 48%, rgba(6,17,13,0.58) 72%,
      rgba(6,17,13,0.90) 100%);
  background-size: 72% 1px, 100% 100%, 100% 100%;
  background-position: top center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
/* keep content above both pseudo layers */
.sw-hero > .sw-hero-content,
.ch-lifecycle > .ch-lifecycle-inner,
.ch-deployment > .ch-deployment-inner { position: relative; z-index: 2; }

/* honour reduced-motion: park the artwork centred, no drift */
@media (prefers-reduced-motion: reduce) {
  .sw-hero::before, .ch-lifecycle::before, .ch-deployment::before { transform: none; }
}

/* S5 — green data-center light-tunnel artwork (section_bg_04, Kuma
   2026-06-22). Same parallax + overlay treatment from the shared rules;
   only the ::before image changes. */
.ch-lifecycle::before {
  background-image: url("assets/chthonia/section_bg_04.jpg");
}

/* S9 — section_bg_05 artwork (Kuma 2026-06-22), same parallax + overlay. */
.ch-deployment::before {
  background-image: url("assets/chthonia/section_bg_05.png");
}

/* ── B · S7 logic line → S5 "profit strip" treatment ─────────────── */
/* Drop the bordered green formula box; render the two equations as a
   hairline-topped/bottomed band of equal cells split by a vertical
   divider — the same look as S5's .ch-profit-strip. Wording unchanged
   (the old "·" separator becomes the divider). Overrides the earlier
   .ch-revintel-logic box rules. */
.ch-revintel-logic {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
  gap: 0;
  margin-top: 40px; padding: 0;
  border: none; border-radius: 0;
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
  background: none;
  text-align: center;
}
.ch-revintel-eq {
  flex: 0 1 auto; min-width: 0;   /* hug content + sit centred, not spread */
  padding: 18px 22px;
  position: relative;
  font-size: 0.95rem; font-weight: 600; color: var(--text-2);
  line-height: 1.6; letter-spacing: 0.01em;
}
.ch-revintel-eq + .ch-revintel-eq::before {
  content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 1px;
  background: var(--border-1);
}
@media (max-width: 680px) {
  .ch-revintel-eq + .ch-revintel-eq::before { display: none; }
  .ch-revintel-eq { border-top: 1px solid var(--border-1); }
  .ch-revintel-logic { border-top: none; border-bottom: none; }
}

/* ── B · S6 "Platform capabilities" — 2-column feature list ──────── */
/* The copy column stacked a paragraph + 6 single-column bullets + chips,
   making each tab panel taller than its screenshot and the whole section
   feel long. Lay the 6 features out in 2 columns to roughly halve the
   bullet block height; the copy itself is untouched. Collapses back to a
   single column on narrow screens. */
.ch-modules .ch-feature-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 28px;
  row-gap: 12px;
  max-width: none;          /* span the copy column, not the old 520px */
}
@media (max-width: 640px) {
  .ch-modules .ch-feature-list { grid-template-columns: 1fr; }
}

/* S6 header — keep the h2 on one line and widen the header so the
   subtitle settles into ~2 lines instead of 3. Both fall back to natural
   wrapping on narrow screens. */
.ch-modules .ch-section-header { max-width: 920px; }
.ch-modules .ch-section-header h2 { white-space: nowrap; }
@media (max-width: 768px) {
  .ch-modules .ch-section-header { max-width: 100%; }
  .ch-modules .ch-section-header h2 { white-space: normal; }
}

/* S6 — tighten vertical rhythm to cut the section's overall height
   (spacing only, no copy touched). Trims section padding + the two big
   gaps before the panel + a little inside the copy column. */
.ch-modules { padding-top: 72px; padding-bottom: 72px; }
.ch-modules .ch-section-header { margin-bottom: 36px; }
.ch-modules .ch-tab-row { margin-bottom: 28px; }
.ch-modules .ch-panel-copy > p { margin-bottom: 18px; }
.ch-modules .ch-panel-copy .ch-capability-chips { margin-top: 16px; }

/* S6 — underline tabs instead of pills. Labels stack over their small
   timeline sub; the row carries a hairline baseline and the active tab
   turns green with a 2px underline sitting on that baseline. */
.ch-modules .ch-tab-row {
  gap: 0;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 760px;            /* keep the row centred, not full 1280 */
  margin-left: auto; margin-right: auto;
  border-bottom: 1px solid var(--ch-border);
}
.ch-modules .ch-tab {
  flex: 1 1 0;                 /* three equal-width, larger click targets */
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 16px 15px;
  margin-bottom: -1px;                 /* overlap the row baseline */
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--text-2);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.ch-modules .ch-tab:hover {
  background: none;
  transform: none;
  color: var(--text-1);
  border-bottom-color: rgba(0,201,141,0.4);
}
.ch-modules .ch-tab.active {
  background: none;
  box-shadow: none;
  color: var(--ch-green);
  border-bottom-color: var(--ch-green);
}
/* the small "Focus 2026" line drops its divider rule and centres below */
.ch-modules .ch-tab-sub {
  border-left: none;
  padding-left: 0;
  opacity: 0.7;
}
.ch-modules .ch-tab.active .ch-tab-sub { color: var(--ch-green); opacity: 1; }

/* ── B · S4 "What Chthonia is" — drop image placeholders, two columns ── */
/* The L1–L4 .ch-stack-media placeholder squares are removed from markup;
   each layer row drops from 3 columns to 2 (L-badge + title | chips). */
.ch-stack-media { display: none; }
.ch-stack-layer {
  grid-template-columns: minmax(230px, 0.85fr) 1.6fr;
  gap: 36px;
}
@media (max-width: 860px) {
  .ch-stack-layer { grid-template-columns: 1fr; gap: 12px; }
}

/* ── B · S4 — whole section two columns: heading left, stack right ──── */
/* .ch-architecture-inner holds exactly two children (.ch-section-header
   and .ch-stack), so a 2-col grid puts the copy on the left and the
   L1–L4 diagram on the right. */
.ch-architecture-inner {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 56px;
  align-items: start;
  max-width: 1280px;     /* match other sections so the left edge aligns */
  margin: 0 auto;
}
.ch-architecture .ch-section-header {
  max-width: none; margin: 0; text-align: left;
}
@media (max-width: 900px) {
  .ch-architecture-inner { grid-template-columns: 1fr; gap: 32px; }
  .ch-architecture .ch-section-header { text-align: center; }
}

/* ── B · S11 CTA — full saturated green→teal panel (Kuma 2026-06-22) ──
   Deliberate "jump" / pop: the whole CTA block flips to a bright Chthonia
   green→teal gradient so it stands out hard against the dark sections
   above (roadmap) and the footer below. Copy + buttons invert to dark-on-
   bright; the giant "Chthonia" watermark becomes a soft tone-on-tone white;
   a top radial highlight adds depth. Overrides base .ch-cta (~line 514) and
   the in-page button theming. The earlier dark-glow CTA treatment is fully
   replaced here. */
.ch-cta {
  /* hex-texture image blended under a semi-transparent green→teal tint so the
     panel reads softer and its edges fade into the dark page (Kuma 2026-06-23,
     same treatment as index/service CTA but kept on Chthonia green). */
  background:
    linear-gradient(118deg, rgba(0,184,131,0.56) 0%, rgba(0,201,141,0.44) 44%, rgba(0,212,255,0.50) 100%),
    linear-gradient(180deg, rgba(6,17,13,0.70) 0%, rgba(6,17,13,0.32) 34%, rgba(6,17,13,0.34) 66%, rgba(6,17,13,0.82) 100%),
    url('assets/visuals/CTA_BG_02.jpg') center / cover no-repeat,
    #06110D;
}
/* gentle top sheen (lighter than the old bright panel) */
.ch-cta::before {
  background: radial-gradient(ellipse 70% 60% at 50% 10%, rgba(255,255,255,0.12) 0%, transparent 60%);
}
/* (giant "Chthonia" watermark removed per Kuma 2026-06-22) */
.ch-cta::after { content: none; }
/* white copy on the dimmer textured panel */
.ch-cta h2 { color: #fff; }
.ch-cta p { color: rgba(255,255,255,0.85); }
.ch-cta-slogan {
  background: none;
  -webkit-text-fill-color: rgba(255,255,255,0.72);
  color: rgba(255,255,255,0.72);
}
/* primary — white pill, Chthonia gradient text (text wrapped in a <span>
   because background-clip:text can't coexist with a white button fill) */
.ch-cta .button.primary {
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,30,20,0.25);
}
.ch-cta .button.primary span {
  background: var(--ch-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}
.ch-cta .button.primary:hover {
  background: #fff; transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,30,20,0.32);
}
/* secondary — white semi-transparent outline, white text */
.ch-cta .button.secondary {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.55);
  color: #fff;
}
.ch-cta .button.secondary:hover {
  background: rgba(255,255,255,0.26);
  border-color: rgba(255,255,255,0.85);
  color: #fff;
}

/* ── B · S3 → S4 — merge "operations gap" into "what Chthonia is" ─────
   Kuma: bring S4 (.ch-architecture) onto the same surface as S3
   (.ch-why) instead of stepping up to bg-surface, halve the gap between
   the two sections, and drop the green hairline divider that sat at the
   top of S4. Overrides: the bg-surface assignment (~line 854), the shared
   100px section padding (~line 67 / 722), and the top-hairline layer of
   the section-texture group (~line 1113) — keeping only its dot grid.
   background-color (not the `background` shorthand) so the dot-grid
   background-image below is not reset. */
.ch-architecture {
  background-color: var(--bg-base);    /* match .ch-why, was bg-surface */
  padding-top: 50px;                   /* half the inter-section gap */
  background-image:                    /* dot grid only — no top hairline */
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1.3px, transparent 1.6px);
  background-size: 24px 24px;
  background-position: 0 0;
  background-repeat: repeat;
}
.ch-why { padding-bottom: 50px; }      /* half the inter-section gap */

/* ── B · S1 Hero — subpage two-column layout (Kuma 2026-06-22) ────────
   Reworked from the homepage-style full-bleed centred stack into a
   left-copy / right-visual split (ref: CoreWeave Vera Rubin hero). This
   overturns the earlier "no right-side visual" decision — confirmed by
   Kuma. Side-by-side instead of stacked is what actually cuts the height.
   - Option A: the existing loop video moves OUT of the full-bleed bg INTO
     a contained rounded frame on the right; section bg is now solid
     bg-base, so the page reads calmer / more subpage. (Base .sw-hero-bg-
     video / .sw-hero-bg-overlay elements were removed from the HTML; their
     base rules ~line 84/94 are now simply unused.)
   - Slogan removed from the hero (still present in S11 CTA).
   - Stats bar relocated under the video in the right column.
   - English copy unchanged (frozen, waiting on Jay).
   Overrides base .sw-hero (~74) and .sw-hero-content (~124). */
.sw-hero { min-height: 52vh; }
.sw-hero-content {
  /* other sections put their 48px gutter on the SECTION and cap the INNER
     at 1280; here the 48px gutter lives INSIDE this max-width box, so to
     get the same 1280 content width the box must be 1280 + 48 + 48 = 1376.
     This makes the hero content edges line up with every section below. */
  max-width: 1376px;
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: 56px;
  align-items: center;
  text-align: left;
  padding-top: 44px;
  padding-bottom: 44px;
}
/* left column — copy, left-aligned (was centred) */
/* Chthonia wordmark replaces the old "Chthonia Platform" badge chip
   (Kuma 2026-06-22). inline-block so it follows the column's text-align
   (left on desktop, centred on mobile). */
.sw-hero-logo {
  display: inline-block;
  width: clamp(134px, 11.2vw, 157px);   /* official Chthonia wordmark, −20% */
  height: auto;
  margin-bottom: 24px;
}
.sw-hero-left h1 { margin-bottom: 18px; }
.sw-hero .hero-copy { max-width: 540px; margin: 0 0 30px; }
.sw-hero .hero-actions { justify-content: flex-start; }

/* right column — contained video frame + stats under it */
.sw-hero-right {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: stretch;
}
.sw-hero-video-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-l, 20px);
  overflow: hidden;
  border: 1px solid var(--ch-border);
  background: var(--bg-surface);
  box-shadow: 0 24px 60px -24px rgba(0,201,141,0.35);
}
.sw-hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* stats bar — bare row under the video (Kuma: drop the card panel). No
   border / fill / padding now; just the two figures split by the divider,
   which also shaves a little height. */
.sw-hero-right .ch-hero-stats {
  margin: 0;
  width: 100%;
  max-width: none;
  justify-content: space-around;
  background: none;
  border: none;
  border-radius: 0;
  padding: 4px 0 0;
}

@media (max-width: 900px) {
  .sw-hero-content { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .sw-hero-left .hero-copy { margin-left: auto; margin-right: auto; }
  .sw-hero .hero-actions { justify-content: center; }
  .sw-hero-video-frame { aspect-ratio: 16 / 9; }
}

/* ── B · S2 economics — revert to a plain section (Kuma 2026-06-22) ───
   The light-stream parallax bg moved from S2 to S1 hero (see the
   light-stream parallax group ~1743, now keyed off .sw-hero). With
   .ch-economics dropped from that group, its earlier photographic bg
   (~line 1142, chthonia-economics-bg-v1) would re-surface — suppress it
   and restore the standard section texture (bg-surface + dot grid + top
   hairline) so S2 reads like every other plain section. */
.ch-economics {
  background-color: var(--bg-surface);
  background-image:
    linear-gradient(90deg, transparent 0%, rgba(0,201,141,0.38) 50%, transparent 100%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1.3px, transparent 1.6px);
  background-size: 80% 1px, 24px 24px;
  background-position: top center, 0 0;
  background-repeat: no-repeat, repeat;
}

/* ── B · S2 economics cards → homepage big-icon style (Kuma 2026-06-22) ─
   Now that S2 is a plain section, drop the frosted band + hairline-split
   columns (~1597) and the boxed base cards (~860). Render each of the 4 as
   a centred big circular icon + title + copy, mirroring index's
   .lifecycle-icon (styles-v2.css ~775) but recoloured Chthonia green
   instead of cyan (green-first per Kuma). */
.ch-economics .ch-econ-grid {
  gap: 28px;
  background: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  padding: 8px 0 0;
}
.ch-economics .ch-econ-card {
  background: none; border: none; border-radius: 0; box-shadow: none;
  padding: 0 12px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  overflow: visible;
}
.ch-economics .ch-econ-card::after { display: none; }   /* no hover underline */
.ch-economics .ch-econ-card:hover { transform: none; }
.ch-economics .ch-econ-card + .ch-econ-card::before { display: none; } /* no hairline dividers */
.ch-economics .ch-econ-card h3 { margin-top: 2px; }
.ch-economics .ch-econ-card h3,
.ch-economics .ch-econ-card p { text-shadow: none; }
.ch-economics .ch-econ-card p { max-width: 240px; }

/* the big circular icon — index .lifecycle-icon, green palette */
.ch-economics .ch-econ-icon {
  width: 120px; height: 120px;
  border-radius: 50%;
  border: 2px solid var(--ch-border);
  background:
    radial-gradient(circle at 50% 40%, rgba(0,201,141,0.22) 0%, rgba(0,201,141,0.06) 60%, transparent 100%),
    var(--bg-base);
  margin-bottom: 22px;
  flex-shrink: 0;
}
.ch-economics .ch-econ-icon svg {
  width: 48px; height: 48px;
  stroke: var(--ch-green);
  filter: drop-shadow(0 0 8px rgba(0,201,141,0.45));
}
@media (max-width: 1024px) {
  .ch-economics .ch-econ-icon { width: 104px; height: 104px; }
}
/* phones: the 4 cards stack to one column — tighten the icon + rhythm so the
   steps sit as an evenly-spaced set instead of drifting far apart (Kuma 2026-06-29) */
@media (max-width: 768px) {
  .ch-economics .ch-econ-grid { gap: 8px; }
  .ch-economics .ch-econ-icon { width: 78px; height: 78px; margin-bottom: 12px; }
  .ch-economics .ch-econ-icon svg { width: 34px; height: 34px; }
  .ch-economics .ch-econ-card { padding: 8px 16px; }
}

/* ── B · S5 operating-loop cards — legibility over bright bg (Kuma
   2026-06-22) ────────────────────────────────────────────────────────
   New section_bg_04 light-tunnel is much brighter through the centre, so
   the base near-transparent white card fill (--bg-card 0.045) let the
   artwork wash out the middle cards (Run especially). Swap to a dark,
   mostly-opaque frosted fill so the copy reads on every card; hover stays
   dark (green-tinted) instead of the old translucent green. */
.ch-lifecycle-step {
  background: rgba(6,17,13,0.80);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-color: rgba(255,255,255,0.09);
  overflow: hidden;   /* clip the hover underline to the rounded corners */
}
/* hover = A-version economics card: lift (base) + green border + a green
   gradient underline sliding in at the bottom. Dark fill kept for
   legibility over the bright bg. */
.ch-lifecycle-step::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--ch-grad);
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.ch-lifecycle-step:hover {
  background: rgba(8,24,18,0.84);
  border-color: var(--ch-border);
}
.ch-lifecycle-step:hover::after { opacity: 1; }

/* ── B · S10 roadmap — clearer step numbers + connector (Kuma 2026-06-22) ─
   The connecting line was a faint 1px border-1 and the non-active step
   circles used dim text-3 numbers on a faint border, so the track and the
   "H1 / H2" labels were hard to read. Thicken + green-tint the connector,
   and brighten the non-active circles' border + number (active circle left
   as-is via :not()). */
.ch-roadmap-track::before {
  height: 2px;
  background: linear-gradient(90deg,
    rgba(0,201,141,0.55) 0%, rgba(0,201,141,0.32) 55%, rgba(0,201,141,0.16) 100%);
}
.ch-phase-dot:not(.ch-phase-dot--active) {
  border: 1.5px solid rgba(0,201,141,0.45);
  color: var(--text-1);
  font-size: 0.82rem;
}

/* ── B · S8 Workload resilience → left-intro + 3 separate cards (Kuma
   2026-06-22, ref layout) ────────────────────────────────────────────
   Replaces the single "monitor console" frame (~1625) with a two-column
   split: left = eyebrow/title/sub + chips (left-aligned), right = three
   separate rounded cards. Re-establishes per-card borders/bg/hover that
   the console treatment had flattened, and hides the equaliser bars so the
   longer titles ("Snapshot & RDMA Checkpoint") get full width. */
.ch-protect-layout {
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  gap: 48px;
  align-items: start;
}
/* left intro — left-aligned header + chips */
.ch-protect-layout .ch-section-header {
  text-align: left; max-width: none; margin: 0 0 26px;
}
/* chips now live in the right column, in a row under the 3 cards */
.ch-protect-right .ch-protect-chips {
  justify-content: flex-start; margin-top: 18px;
}
/* right — three separate cards again (undo console frame) */
.ch-protect-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  border: none; border-radius: 0; overflow: visible; background: none;
}
.ch-protect-card {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-m);
  background: var(--ch-panel);
  padding: 26px 22px;
}
.ch-protect-card + .ch-protect-card { border-left: 1px solid var(--border-1); }
.ch-protect-card::after { display: block; }      /* restore the hover underline */
.ch-protect-card:hover {
  transform: translateY(-4px);
  border-color: var(--ch-border);
  background: var(--ch-panel);
}
/* ref title row = dot + title only */
.ch-protect-sig { display: none; }
.ch-protect-top { gap: 8px; }

@media (max-width: 1024px) {
  .ch-protect-layout { grid-template-columns: 1fr; gap: 32px; }
  .ch-protect-layout .ch-section-header { text-align: center; }
  .ch-protect-right .ch-protect-chips { justify-content: center; }
  /* re-assert the stack here: the non-media repeat(3) above would otherwise
     win over the base 1024 rule by source order */
  .ch-protect-grid { grid-template-columns: 1fr; }
}

/* ── B · obvious green 1px border on S5 / S8 / S10 cards (Kuma 2026-06-22)
   The lifecycle steps, workload-resilience cards and roadmap phase cards
   all used the faint --border-1; switch to a clearly visible green hairline,
   brighter on hover / for the active roadmap phase. */
.ch-lifecycle-step,
.ch-protect-card,
.ch-phase-content {
  border: 1px solid rgba(0,201,141,0.45);
}
/* the S8 cards carried a leftover console divider (faint left border) that
   would otherwise leave their left edge a different colour — green it too */
.ch-protect-card + .ch-protect-card { border-left-color: rgba(0,201,141,0.45); }
.ch-lifecycle-step:hover,
.ch-protect-card:hover,
.ch-phase-content:hover,
.ch-phase--active .ch-phase-content {
  border-color: rgba(0,201,141,0.65);
}

/* ── B · S5 operating-loop arrows — bigger + overlapping the cards (Kuma
   2026-06-22) ─────────────────────────────────────────────────────────
   Enlarge the chevron (was 20px) and let it straddle the seam between two
   cards, painted above them (and their green border). The ch-arrow-flow
   drift animation (~1377) is untouched. Slim the arrow column so the larger
   svg overflows onto both neighbours; align-self centres it vertically on
   the row (replacing the old padding-top hack). */
.ch-lifecycle-arrow {
  width: 12px;
  align-self: center;
  padding-top: 0;
  position: relative;
  z-index: 3;
  overflow: visible;
}
.ch-lifecycle-arrow svg {
  width: 48px; height: 48px;
  max-width: none;         /* KEY: styles-v2.css line 7 clamps svg to 100%
                              of the 12px column — release it so 48px sticks */
  flex-shrink: 0;
  stroke: var(--ch-green);
  stroke-width: 2.4;
  filter: drop-shadow(0 0 7px rgba(0,201,141,0.55));
}

/* ═══════════════════════════════════════════════════════════════
   FIXED TYPE-SCALE ENFORCEMENT (2026-06-23) — normalises scattered sizes
   Hero 64 / Section 44 / Sub-title 20 / Body 16 / Chart·Eyebrow 14 (px).
   Exempt (kept large = display figures): .ch-pillar-num, .ch-hero-stat strong,
   .ch-profit-metric strong, .ch-profit-result, .ch-lifecycle-arrow.
   ═══════════════════════════════════════════════════════════════ */
/* 28px — mid title (title beside the Chthonia product screenshot) */
.ch-panel-copy h3 { font-size: var(--fs-midtitle); }
/* 20px — card / sub-headings + operating-loop result titles + closing line */
.ch-pillar-card h3, .ch-cap-body h4, .ch-phase-content h4,
.ch-lifecycle-step h3, .ch-deployment-card h3, .ch-econ-card h3,
.ch-revintel-card h3, .ch-protect-card h3, .ch-leak-label,
.ch-profit-metric strong,
.ch-profit-result { font-size: var(--fs-subtitle); }
/* 16px — body / paragraphs / lists / leads / tabs + KPI table rows + stack-layer titles */
.ch-section-sub, .ch-why-lead, .ch-why-close, .ch-pillar-card p,
.ch-panel-copy > p, .ch-feature-list li, .ch-cap-body p, .ch-cta p,
.ch-problem-card p, .ch-lifecycle-step p, .ch-deployment-card p,
.ch-econ-card p, .ch-econ-close, .ch-revintel-card p, .ch-kpi-map li,
.ch-protect-card li, .ch-leak p, .ch-phase-content ul li, .ch-refarch-note,
.ch-revintel-logic, .ch-tab, .ch-profit-metric span, .ch-stack-title,
.ch-kpi-table-row span:first-child, .ch-kpi-table-row span:last-child { font-size: var(--fs-body); }
/* 14px — charts / diagrams / kickers / status pills + capsule tags */
.ch-badge span, .ch-slogan, .ch-tab-sub, .ch-phase-label, .ch-cta-slogan,
.ch-arch-core-label, .ch-kpi-map > h3, .ch-kpi-table-head, .ch-refarch-tag,
.ch-flow-unit, .ch-flow-core-label, .ch-phase-status, .ch-flow-chip,
.ch-stack-n, .ch-stack .ch-stack-n, .ch-hero-stat span,
.ch-phase-dot, .ch-phase-dot:not(.ch-phase-dot--active),
.ch-arch-row-items span, .ch-arch-core-grid span,
.ch-stack-items span, .ch-lifecycle-num, .ch-refarch-layer,
.ch-revintel-eq, .ch-leak-flag,
.ch-pillar-tags li, .ch-capability-chips span, .ch-protect-chips span { font-size: var(--fs-chart); }
/* Hero + section titles — Montserrat 600 (800 too heavy at display sizes) */
.sw-hero h1, .ch-section-header h2, .ch-why-inner h2, .ch-cta h2 { font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE — operating-loop arrows (Kuma 2026-06-30)
   On phones the 5 steps stack vertically, so the connector chevron must
   POINT down (svg rotate) AND DRIFT down (vertical keyframe) instead of the
   desktop sideways drift. Placed at EOF so it wins over the desktop arrow
   override (~line 2323) regardless of media-query specificity.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .ch-lifecycle-arrow {
    width: 100%; height: 26px; padding: 0; align-self: stretch;
    display: flex; align-items: center; justify-content: center;
    animation: ch-arrow-flow-v 1.8s ease-in-out infinite;
  }
  .ch-lifecycle-arrow svg {
    width: 30px; height: 30px; max-width: none; flex-shrink: 0;
    transform: rotate(90deg);
  }
  @keyframes ch-arrow-flow-v {
    0%, 100% { opacity: 0.3; transform: translateY(-3px); }
    50%      { opacity: 1;   transform: translateY(3px); }
  }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .ch-lifecycle-arrow { animation: none; opacity: 0.7; }
}