/* ============================================================
   GHOST ZERO APP — features showcase (extends features.css)
   The white-labeled CRM command center. Command room · ember.
   Scaffold 2026-06-13 — copy pulled from old /all-features,
   reframed as APP (product) features, not GZ services.
   ============================================================ */

/* ---- app vs. service distinction band (Jonny's key line) ---- */
.appsvc { background: var(--gz-graphite); border-bottom: 1px solid var(--gz-steel); }
.appsvc-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(44px, 6vw, 76px) var(--pad-x);
}
.appsvc-eyebrow { margin-bottom: 22px; }
.appsvc-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--gz-steel);
  border: 1px solid var(--gz-steel);
}
@media (max-width: 780px) { .appsvc-cols { grid-template-columns: 1fr; } }
.appsvc-col { background: var(--gz-graphite); padding: 28px 26px; }
.appsvc-col.is-app { background: var(--gz-charcoal); }
.appsvc-col .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gz-ember); }
.appsvc-col h3 { font-family: var(--font-display); font-size: 30px; color: var(--gz-white); margin: 8px 0 10px; line-height: 1; }
.appsvc-col p { font-size: 14.5px; color: var(--gz-fog); margin: 0 0 16px; line-height: 1.55; }
.appsvc-col .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.appsvc-col .chip {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gz-fog); border: 1px solid var(--gz-steel); padding: 5px 9px;
  transition: border-color 150ms ease, color 150ms ease;
}
a.chip:hover { border-color: var(--gz-ember); color: var(--gz-white); }

/* ---- replacement-value banner ---- */
.value-banner { background: var(--gz-void); border-bottom: 1px solid var(--gz-steel); }
.value-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: clamp(36px, 5vw, 60px) var(--pad-x);
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.value-inner .vb-num { font-family: var(--font-display); font-size: clamp(52px, 8vw, 100px); line-height: 0.9; color: var(--gz-white); }
.value-inner .vb-num em { color: var(--gz-ember); font-style: normal; }
.value-inner .vb-cap { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gz-ash); max-width: 38ch; line-height: 1.7; }

/* ---- "replaces [competitor]" line inside each cap-cell ---- */
.cap-cell .cap-vs {
  margin-top: auto;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gz-ash); display: flex; align-items: center; gap: 7px;
}
.cap-cell .cap-vs .x { color: var(--gz-iron); }
.cap-cell .cap-vs b { color: var(--gz-ember); font-weight: 500; }
.cap-cell .cap-vs.built { color: var(--gz-iron); }