/* blocks.css — product-information blocks reused verbatim from the live site,
   namespaced under .kx so the v2 token system and these never collide.
   Source: css/style-proto-green.css (feature + mock components). */
.kx{
  --bg:#FFFFFF;--bg-alt:#F5FAF6;--bg-deep:#EFF6F0;
  --g-900:#0B2212;--g-800:#0E2E16;--g-700:#1A4D24;--g-600:#1E6330;--g-500:#2D7A48;
  --g-400:#52A065;--g-300:#7DBB8A;--g-200:#A8CCAF;--g-100:#C5E2CA;--g-050:#DDF0E2;
  --amber:#E8A838;
  --border:rgba(46,122,72,0.22);--border-mid:rgba(46,122,72,0.34);--border-glow:rgba(46,122,72,0.55);
  --text:#0B2212;--text-soft:rgba(10,28,14,.70);--text-muted:rgba(10,28,14,.68);--text-dim:rgba(10,28,14,.42);
  --ff-sans:'Instrument Sans',system-ui,sans-serif;--ff-mono:'Space Mono',monospace;
  --r-xs:4px;--r-sm:6px;--r-md:10px;--r-lg:14px;--r-xl:18px;--r-2xl:24px;
  --ease:cubic-bezier(0.16,1,0.3,1);--max-w:1080px;--section-pad:130px;
}
.kx .feature-grid{gap:64px}
.kx .feature-text p{max-width:460px}
.kx .reveal{opacity:1;transform:none}

/* dark stage for the exchange ecosystem animation */
.kx-stage{
  background:radial-gradient(120% 120% at 50% 0%, #0d2a18 0%, #071a0d 70%);
  border:1px solid rgba(82,160,101,0.28);border-radius:18px;
  padding:30px 26px 22px;overflow:hidden;
}
.kx-stage .hero-exchange{position:relative;width:100%;max-width:1100px;margin:0 auto}
.kx-stage .hero-exchange svg{display:block;width:100%;height:auto}
.kx-stage .hero-trade{margin:10px auto 0;text-align:center;font-family:'Space Mono',monospace;
  font-size:13px;letter-spacing:-0.01em;color:rgba(255,255,255,0.58);min-height:18px;transition:opacity .4s ease}
.kx-stage .hero-trade .ok,.kx-stage .hero-trade .sv{color:#6FCF8C}
@media(max-width:760px){.kx .feature-grid{grid-template-columns:1fr;gap:32px}}
.kx .feature-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 88px;
  align-items: center;
}
.kx .feature-grid.reverse .feature-text { order: 2; }
.kx .feature-grid.reverse .feature-visual { order: 1; }

/* Text side */
.kx .feature-eyebrow {
  display: block;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--g-500);
  margin-bottom: 18px;
}
.kx .feature-text h2 {
  font-size: clamp(28px, 3.2vw, 46px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.07;
  color: var(--text);
  margin-bottom: 20px;
}
.kx .feature-text p {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--text-muted);
  max-width: 420px;
  margin-bottom: 32px;
}
.kx .feature-list {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.kx .feature-list li {
  font-size: 14px;
  color: var(--g-200);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}
.kx .feature-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--g-500);
}

/* Feature callout — inline highlight block beneath the bullet list */
.kx .feature-callout {
  margin-top: 24px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  border: 0.5px solid rgba(46, 122, 72, 0.22);
  background: rgba(46, 122, 72, 0.06);
  position: relative;
}
.kx .feature-callout-label {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--g-500);
  background: rgba(46, 122, 72, 0.12);
  border: 0.5px solid rgba(46, 122, 72, 0.28);
  border-radius: var(--r-xs);
  padding: 2px 7px;
  margin-bottom: 10px;
}
.kx .feature-callout p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

/* ─── MOCK PANEL (product UI hints) ─────────────────────────────────────── */
.kx .feature-visual { position: relative; }

/* Ambient glow behind panel */
.kx .feature-visual::before {
  content: '';
  position: absolute;
  inset: -30px;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(46, 122, 72, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.kx .mock {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  border: 0.5px solid var(--border-mid);
  border-radius: var(--r-xl);
  padding: 22px;
  font-size: 13px;
  /* Top shimmer line */
  overflow: hidden;
  /* Mock panels render on white: remap the pale (dark-bg) text vars to
     high-contrast tones so every label and value stays readable. */
  --g-100: #0B2212;
  --g-200: rgba(10,28,14,0.74);
  --g-300: #1A4D24;
  --text-dim: rgba(10,28,14,0.6);
}
.kx .mock::after {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(46, 122, 72, 0.45), transparent);
}

/* Mock: header row */
.kx .mock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 0.5px solid var(--border);
}
.kx .mock-title {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--g-700);
  letter-spacing: 0.04em;
}
.kx .mock-badge {
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  background: rgba(46, 122, 72, 0.08);
  border: 0.5px solid var(--border);
  padding: 3px 9px;
  border-radius: 100px;
  letter-spacing: 0.01em;
}
.kx .mock-badge.green { color: var(--g-600); border-color: rgba(46, 122, 72, 0.28); }
.kx .mock-badge.amber { color: var(--amber); border-color: rgba(232,168,56,0.28); background: rgba(232,168,56,0.06); }
.kx .mock-badge.running { color: var(--g-400); border-color: rgba(46, 122, 72, 0.32); }

/* Mock: shared atoms */
.kx .mock-divider { height: 0.5px; background: var(--border); margin: 14px 0; }

.kx .mock-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
}
.kx .mock-footer-label { font-size: 12px; color: var(--text-muted); }
.kx .mock-footer-val { font-family: var(--ff-mono); font-size: 12px; color: var(--g-700); }

/* ── SPEND mock ───────────────────────────────────────────────────── */
.kx .mock-spend-rows { display: flex; flex-direction: column; gap: 9px; }

.kx .mock-spend-row {
  display: grid;
  /* label sizes to its content (capped) so long labels never overflow the
     bar; bar takes the remaining space; value is a fixed right-aligned column */
  grid-template-columns: minmax(72px, max-content) minmax(0, 1fr) 56px;
  align-items: center;
  gap: 12px;
}
.kx .mock-row-label { font-size: 12px; color: var(--text-muted); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kx .mock-bar-wrap { min-width: 0; height: 5px; background: rgba(46, 122, 72, 0.10); border-radius: 3px; overflow: hidden; }
.kx .mock-bar { height: 100%; background: linear-gradient(90deg, var(--g-600), var(--g-400)); border-radius: 3px; }
.kx .mock-row-amount { font-family: var(--ff-mono); font-size: 11px; color: var(--text-soft); text-align: right; }

/* Fleet-pacing mock (Trade): longer labels like "queue · micro-batched" need a
   wider, content-sized label column so they never collide with the bar/value. */
.kx .mock-fleet .mock-spend-row {
  grid-template-columns: minmax(110px, max-content) minmax(0, 1fr) 52px;
}
.kx .mock-fleet .mock-row-label { white-space: nowrap; }

/* Micro-batching mini-diagram: bursty arrivals → paced batches → fleet */
.kx .mock-mb-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin: 2px 0 14px;
}
.kx .mock-mb-stage { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.kx .mock-mb-stage svg { display: block; width: 100%; height: auto; }
.kx .mock-mb-cap {
  font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted); text-align: center; line-height: 1.3;
}
.kx .mock-mb-arrow { color: var(--g-400); flex: none; }
.kx .mock-mb-divider { height: 1px; background: var(--border-md); margin: 0 0 12px; opacity: 0.7; }

.kx .mock-split-row {
  display: flex;
  gap: 14px;
  margin: 14px 0 10px;
}
.kx .mock-split-item { display: flex; align-items: center; gap: 6px; }
.kx .mock-split-tag {
  font-family: var(--ff-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--r-xs);
}
.kx .mock-split-tag.capex { background: rgba(46, 122, 72, 0.14); color: var(--g-300); }
.kx .mock-split-tag.opex { background: rgba(197, 216, 240, 0.09); color: var(--g-200); }
.kx .mock-split-val { font-family: var(--ff-mono); font-size: 12px; color: var(--text); }

.kx .mock-alert {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--amber);
  background: rgba(232,168,56,0.07);
  border: 0.5px solid rgba(232,168,56,0.18);
  border-radius: var(--r-sm);
  padding: 8px 11px;
  margin-top: 4px;
}

/* ── KEYS mock ────────────────────────────────────────────────────── */
.kx .mock-table { display: flex; flex-direction: column; }
.kx .mock-table-row {
  display: grid;
  grid-template-columns: 1fr 90px 68px;
  align-items: center;
  padding: 8px 4px;
  border-bottom: 0.5px solid rgba(46, 122, 72, 0.07);
  gap: 8px;
}
.kx .mock-table-row:last-child { border-bottom: none; }
.kx .mock-table-row.hdr span {
  font-family: var(--ff-sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
}
.kx .mock-key { font-family: var(--ff-mono); font-size: 11px; color: var(--g-300); }
.kx .mock-team { font-size: 12px; color: var(--text-muted); }
.kx .mock-status { font-size: 12px; font-weight: 500; }
.kx .mock-status.active { color: var(--g-400); }
.kx .mock-status.rotating { color: var(--amber); }

/* ── TEAMS & BUDGETS mock ────────────────────────────────────────── */
.kx .mock-budget-bar-track { flex: 1; height: 5px; background: rgba(46, 122, 72, 0.10); border-radius: 3px; overflow: hidden; }
.kx .mock-budget-bar-fill { height: 100%; border-radius: 3px; }
.kx .mock-budget-bar-fill.ok { background: linear-gradient(90deg, var(--g-600), var(--g-400)); }
.kx .mock-budget-bar-fill.warn { background: linear-gradient(90deg, #c0651a, #e8a838); }

/* Org summary banner */
.kx .mock-org-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  background: rgba(46, 122, 72, 0.05);
  border: 0.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
}
.kx .mock-org-label {
  font-family: var(--ff-sans);
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.kx .mock-org-amount {
  font-family: var(--ff-mono);
  font-size: 17px; font-weight: 600;
  color: var(--g-100); line-height: 1.2;
}
.kx .mock-org-cap { font-size: 11px; color: var(--text-muted); font-weight: 400; }
.kx .mock-org-meta { font-size: 9px; color: var(--text-dim); margin-top: 2px; }
.kx .mock-org-pacing { display: flex; flex-direction: column; justify-content: center; }
.kx .mock-org-pace-text { font-size: 11px; color: var(--text-muted); margin-top: 4px; line-height: 1.55; }
.kx .mock-saving { color: var(--g-400); font-weight: 600; }

/* Team rows */
.kx .mock-team-table { display: flex; flex-direction: column; }
.kx .mock-team-hdr {
  display: grid;
  grid-template-columns: 26px 1fr 110px 72px;
  gap: 8px;
  padding: 4px 2px 7px;
  font-family: var(--ff-sans);
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-dim);
  border-bottom: 0.5px solid var(--border);
  margin-bottom: 2px;
}
.kx .mock-team-row {
  display: grid;
  grid-template-columns: 26px 1fr 110px 72px;
  gap: 8px;
  align-items: center;
  padding: 7px 2px;
  border-bottom: 0.5px solid rgba(46, 122, 72, 0.07);
}
.kx .mock-team-row:last-child { border-bottom: none; }
.kx .mock-av {
  width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-sans); font-size: 10px; font-weight: 700;
  color: rgba(255,255,255,0.88); flex-shrink: 0;
}
.kx .mock-tn { font-size: 12px; font-weight: 600; color: var(--g-100); }
.kx .mock-tl { font-size: 10px; color: var(--text-dim); margin-top: 1px; }
.kx .mock-tb span { font-family: var(--ff-mono); font-size: 11px; color: var(--text-muted); }
.kx .mock-tb em { color: var(--text-dim); font-style: normal; }
.kx .mock-pill {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 500;
  padding: 2px 8px; border-radius: 20px;
  background: rgba(46, 122, 72, 0.08); color: var(--text-muted);
  white-space: nowrap;
}
.kx .mock-pill.ok { background: rgba(46, 122, 72, 0.14); color: var(--g-400); }
.kx .mock-pill.warn { background: rgba(192,101,26,0.15); color: #e8a838; }

/* ── OBSERVABILITY Capex/Opex hero cards ──────────────────────────── */
.kx .mock-cx-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 4px;
}
.kx .mock-cx-card {
  background: rgba(46, 122, 72, 0.06);
  border: 0.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 13px;
}
.kx .mock-cx-tag {
  display: inline-block;
  font-family: var(--ff-sans);
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 2px 7px; border-radius: 3px;
  margin-bottom: 7px;
}
.kx .mock-cx-tag.capex { background: rgba(59,79,160,0.15); color: #3b4fa0; }
.kx .mock-cx-tag.opex { background: rgba(46, 122, 72, 0.15); color: #1e5a9c; }
.kx .mock-cx-amount {
  font-family: var(--ff-mono); font-size: 17px; font-weight: 600;
  color: #0b2212; line-height: 1.1; margin-bottom: 4px;
}
.kx .mock-cx-meta { font-size: 9px; color: var(--text-muted); margin-bottom: 7px; }
.kx .mock-cx-bar { height: 4px; background: rgba(46, 122, 72, 0.10); border-radius: 2px; overflow: hidden; }
.kx .mock-cx-bar-fill { height: 100%; border-radius: 2px; }
.kx .mock-cx-bar-fill.capex { background: linear-gradient(90deg, #3b4fa0, #6677cc); }
.kx .mock-cx-bar-fill.opex { background: linear-gradient(90deg, var(--g-600), var(--g-400)); }

/* ── QUALITY / EVALS mock ─────────────────────────────────────────── */
.kx .mock-qa-hero {
  display: grid; grid-template-columns: 1fr auto;
  gap: 12px; align-items: center;
}
.kx .mock-qa-big-score {
  font-family: var(--ff-mono); font-size: 26px; font-weight: 600;
  color: var(--g-200); line-height: 1; margin: 4px 0;
}
.kx .mock-qa-sparkline { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.kx .mock-qa-trend-label { font-size: 9px; color: var(--g-500); font-family: var(--ff-sans); }
.kx .mock-qual-table { display: flex; flex-direction: column; }
.kx .mock-qual-hdr {
  display: grid; grid-template-columns: 1fr 1fr 48px;
  gap: 8px; padding: 4px 0 7px;
  font-family: var(--ff-sans); font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-dim);
  border-bottom: 0.5px solid var(--border);
}
.kx .mock-qual-row {
  display: grid; grid-template-columns: 1fr 1fr 48px;
  gap: 8px; align-items: center;
  padding: 7px 0;
  border-bottom: 0.5px solid rgba(46, 122, 72, 0.07);
}
.kx .mock-qual-row:last-child { border-bottom: none; }
.kx .mock-qual-bar-track { flex: 1; height: 4px; background: rgba(46, 122, 72, 0.10); border-radius: 2px; overflow: hidden; }
.kx .mock-qual-bar-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--g-600), var(--g-400)); }
.kx .mock-qual-score { font-family: var(--ff-mono); font-size: 11px; color: var(--g-400); text-align: right; }

/* ── OMS / ORDER BOOK mock ────────────────────────────────────────── */
.kx .mock-oms-overview {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; align-items: start;
  background: rgba(46, 122, 72, 0.05);
  border: 0.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: 11px 13px;
}
.kx .mock-oms-trend-up {
  font-family: var(--ff-mono); font-size: 11px;
  color: var(--g-400); margin-top: 4px;
}
.kx .mock-oms-book { display: flex; flex-direction: column; }
.kx .mock-oms-hdr {
  display: grid; grid-template-columns: 1fr 64px 40px 56px;
  gap: 6px; padding: 4px 0 7px;
  font-family: var(--ff-sans); font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-dim);
  border-bottom: 0.5px solid var(--border);
}
.kx .mock-oms-row {
  display: grid; grid-template-columns: 1fr 64px 40px 56px;
  gap: 6px; align-items: center;
  padding: 7px 0;
  border-bottom: 0.5px solid rgba(46, 122, 72, 0.07);
}
.kx .mock-oms-row:last-child { border-bottom: none; }
.kx .mock-oms-row.best { background: rgba(46, 122, 72, 0.04); border-radius: 4px; padding: 7px 4px; }
.kx .mock-oms-bar-wrap { height: 4px; background: rgba(46, 122, 72, 0.10); border-radius: 2px; overflow: hidden; }
.kx .mock-oms-bar-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--g-600), var(--g-400)); }
.kx .mock-oms-bar-fill.warn { background: linear-gradient(90deg, #6b3e1a, #c07030); }
.kx .mock-oms-price { font-family: var(--ff-mono); font-size: 10px; color: var(--text-muted); }
.kx .mock-oms-rev { font-family: var(--ff-mono); font-size: 10px; color: var(--text-muted); text-align: right; }
.kx .mock-oms-rev.ok { color: var(--g-400); }
.kx .mock-oms-rev.warn { color: var(--text-dim); font-size: 9px; }

/* ── HERO secondary paragraph ─────────────────────────────────────── */
.kx .hero-sub--secondary {
  margin-top: 12px;
  font-size: clamp(13px, 1.5vw, 15px);
  color: var(--text-dim);
}

/* ── EXCHANGE mock ────────────────────────────────────────────────── */
.kx .mock-model-table { display: flex; flex-direction: column; gap: 2px; }
.kx .mock-model-row {
  display: grid;
  grid-template-columns: 1fr 48px 54px 42px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  gap: 6px;
}
.kx .mock-saving-val {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
}
.kx .mock-saving-val.good { color: var(--g-600); font-weight: 700; }
.kx .mock-saving-val.baseline { color: var(--text-muted); }
.kx .mock-model-row.hdr span {
  font-family: var(--ff-sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  padding: 0 2px;
}
.kx .mock-model-row.best { background: rgba(46, 122, 72, 0.09); border: 0.5px solid rgba(46, 122, 72, 0.30); }
.kx .mock-model-name { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); font-weight: 500; }
.kx .mock-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(46, 122, 72, 0.3); flex-shrink: 0; }
.kx .mock-dot.on { background: var(--g-500); }
.kx .mock-model-row span.price { font-family: var(--ff-mono); font-size: 12px; color: var(--text-muted); }
.kx .mock-latency { font-family: var(--ff-mono); font-size: 12px; color: var(--text-muted); }
.kx .mock-latency.fast { color: var(--g-400); }

/* ── ROUTING mock ─────────────────────────────────────────────────── */
.kx .mock-routing-table { display: flex; flex-direction: column; gap: 2px; }
.kx .mock-routing-row {
  display: grid;
  grid-template-columns: 1fr 1fr 56px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  gap: 8px;
  font-size: 12px;
  color: var(--g-100);
}
.kx .mock-routing-row.hdr span {
  font-family: var(--ff-sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
}
.kx .mock-routing-row.active { background: rgba(46, 122, 72, 0.09); border: 0.5px solid rgba(46, 122, 72, 0.30); }
.kx .mock-routing-model { font-family: var(--ff-mono); font-size: 12px; color: var(--text-muted); }
.kx .mock-routing-status { font-family: var(--ff-sans); font-size: 12px; font-weight: 500; color: var(--g-400); }

.kx .mock-stat-callout {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
}
.kx .mock-stat-num { font-family: var(--ff-mono); font-size: 20px; color: var(--text); letter-spacing: -0.03em; }
.kx .mock-stat-label { font-size: 12px; color: var(--text-muted); }

/* ── DEADLINE mock ────────────────────────────────────────────────── */
.kx .mock-task-name {
  font-size: 12.5px;
  color: var(--g-100);
  line-height: 1.45;
  font-style: italic;
  margin-bottom: 14px;
}
.kx .mock-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-bottom: 16px;
}
.kx .mock-meta-cell {
  background: rgba(46, 122, 72, 0.07);
  border: 0.5px solid rgba(46, 122, 72, 0.12);
  border-radius: var(--r-sm);
  padding: 8px 10px;
}
.kx .mock-meta-label { font-size: 10px; font-family: var(--ff-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 5px; }
.kx .mock-meta-val { font-family: var(--ff-mono); font-size: 12px; color: var(--g-300); }

.kx .mock-progress-header { display: flex; justify-content: space-between; font-family: var(--ff-sans); font-size: 11px; font-weight: 500; color: var(--text-muted); margin-bottom: 6px; }
.kx .mock-progress-track { height: 5px; background: rgba(46, 122, 72, 0.10); border-radius: 3px; overflow: hidden; }
.kx .mock-progress-fill { height: 100%; background: linear-gradient(90deg, var(--g-600), var(--g-400)); border-radius: 3px; }

/* ── ENTERPRISE mock ──────────────────────────────────────────────── */
.kx .mock-deploy-cols {
  display: grid;
  grid-template-columns: 1fr 0.5px 1fr;
  gap: 0;
  margin-bottom: 14px;
}
.kx .mock-deploy-col { padding: 8px 10px 10px; }
.kx .mock-deploy-sep { background: var(--border); }
.kx .mock-deploy-label {
  font-size: 12px;
  font-weight: 600;
  color: #0b2212;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kx .mock-deploy-items { display: flex; flex-direction: column; gap: 5px; }
.kx .mock-deploy-item { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.kx .mock-deploy-item::before {
  content: '';
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--g-500);
  flex-shrink: 0;
}
.kx .mock-cert-row { display: flex; gap: 6px; flex-wrap: wrap; }
.kx .mock-cert {
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--g-300);
  background: rgba(46, 122, 72, 0.09);
  border: 0.5px solid rgba(46, 122, 72, 0.20);
  padding: 4px 9px;
  border-radius: var(--r-xs);
}


.kx .feature-list li{color:var(--text-soft)}