/* ============================================================
   GHOST ZERO — FEATURES HUB + FEATURE DETAIL
   Command room · the TAMED Systems grid (C34 big squares +
   C53 corner ID tags) — ember + grayscale ONLY, no neon.
   "Instrument, don't cosplay." Per DESIGN-CONTRACT.md.
   ============================================================ */

.feat-hero {
  position: relative;
  background: var(--gz-graphite);
  padding: clamp(140px, 18vw, 200px) var(--pad-x) clamp(56px, 8vw, 88px);
  border-bottom: 1px solid var(--gz-steel);
  overflow: hidden;
}
.feat-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 50px 50px; /* C82 grid, dimmed to a whisper */
  pointer-events: none;
}
.feat-hero-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: end;
  position: relative;
  z-index: 2;
}
@media (max-width: 880px) { .feat-hero-grid { grid-template-columns: 1fr; gap: 28px; } }
.feat-hero h1 { margin: 22px 0 0; color: var(--gz-white); }
.feat-hero h1 em { color: var(--gz-ember); font-style: italic; }
.feat-hero p { font-size: var(--t-lead); margin: 0 0 8px; max-width: 50ch; }

/* capability count readout */
.cap-count {
  display: inline-flex;
  gap: 18px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gz-ash);
  border: 1px solid var(--gz-steel);
  padding: 9px 14px;
  margin-top: 16px;
}
.cap-count b { color: var(--gz-ember); font-weight: 500; }

/* ---------- the capability grid (C34 tamed) ---------- */
.cap-section {
  border-bottom: 1px solid var(--gz-steel);
  background: var(--gz-graphite);
}
.cap-section .sec-head .num { color: var(--gz-ember); }
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-left: 1px solid var(--gz-steel);
}
@media (max-width: 1020px) { .cap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .cap-grid { grid-template-columns: 1fr; } }

.cap-cell {
  position: relative;
  border-right: 1px solid var(--gz-steel);
  border-bottom: 1px solid var(--gz-steel);
  padding: 30px 24px 22px;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--gz-graphite);
  transition: background 180ms ease;
}
.cap-cell:hover { background: var(--gz-charcoal); }
.cap-cell:hover .cap-arr { color: var(--gz-ember); transform: translateX(5px); }
/* C53 corner ID tag */
.cap-cell .idtag {
  position: absolute;
  top: 0; right: 0;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--gz-ash);
  border-left: 1px solid var(--gz-steel);
  border-bottom: 1px solid var(--gz-steel);
  padding: 4px 9px;
}
.cap-cell .cap-surface {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gz-ember);
}
.cap-cell h3 {
  margin: 0;
  font-family: var(--font-shell);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.005em;
  color: var(--gz-white);
  line-height: 1.15;
}
.cap-cell p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--gz-fog); }
.cap-cell .cap-arr {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gz-ash);
  transition: color 150ms ease, transform 180ms ease;
}

/* ---------- FEATURE DETAIL template ---------- */
.fd-head {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(130px, 16vw, 180px) var(--pad-x) clamp(36px, 5vw, 56px);
}
.fd-head .kicker {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gz-ash);
}
.fd-head .kicker .tag { border: 1px solid var(--gz-ember); color: var(--gz-ember); padding: 2px 8px; }
.fd-head h1 { margin: 18px 0 14px; color: var(--gz-white); max-width: 18ch; }
.fd-head .lede { font-size: var(--t-lead); color: var(--gz-fog); max-width: 56ch; margin: 0; }

.fd-grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--pad-x) clamp(72px, 10vw, 110px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 880px) { .fd-grid { grid-template-columns: 1fr; } }
.fd-body { font-size: 16.5px; line-height: 1.7; color: var(--gz-fog); }
.fd-body > * + * { margin-top: 20px; }
.fd-body h2 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gz-ash);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 38px;
}
.fd-body h2::before { content: ""; width: 24px; height: 1px; background: var(--gz-ember); }

.fd-rail {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (max-width: 880px) { .fd-rail { position: static; } }
.fd-rail .spec-card {
  border: 1px solid var(--gz-steel);
  background: var(--gz-charcoal);
  padding: 16px;
  display: grid;
  gap: 9px;
}
.fd-rail .spec-card .sc-cap {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gz-ember);
  margin-bottom: 4px;
}
.fd-rail .specline {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gz-ash);
}
.fd-rail .specline .dots { flex: 1; border-bottom: 1px dotted var(--gz-steel); transform: translateY(-2px); }
.fd-rail .specline .val { color: var(--gz-white); }
.fd-rail a.rel {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--gz-steel);
  color: var(--gz-fog);
  padding: 9px 12px;
  transition: border-color 150ms ease, color 150ms ease;
}
.fd-rail a.rel:hover { border-color: var(--gz-ember); color: var(--gz-white); }
.fd-rail a.rel b { color: var(--gz-ember); margin-right: 6px; }

/* proof strip — clients using this feature (cross-link engine) */
.fd-proof {
  border: 1px solid var(--gz-steel);
  background: var(--gz-void);
  padding: 18px;
}
.fd-proof .fp-cap {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gz-ash);
  margin-bottom: 12px;
}
.fd-proof .fp-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px dashed var(--gz-steel);
  font-size: 13px;
  color: var(--gz-fog);
}
.fd-proof .fp-row a { color: var(--gz-white); font-weight: 500; }
.fd-proof .fp-row a:hover { color: var(--gz-ember); }
.fd-proof .fp-row .m { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--gz-ember); text-transform: uppercase; }


/* sticky category index — plain-English feature groups */
.feat-index {
  background: var(--gz-charcoal);
  border-bottom: 1px solid var(--gz-steel);
  position: sticky;
  top: 64px;
  z-index: 50;
}
.feat-index-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.feat-index a {
  padding: 13px 12px;
  border-right: 1px solid var(--gz-steel);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gz-ash);
  transition: background 160ms ease, color 160ms ease;
  text-align: center;
}
.feat-index a:last-child { border-right: none; }
.feat-index a:hover { background: var(--gz-graphite); color: var(--gz-white); }
.feat-index a b { color: var(--gz-ember); font-weight: 500; margin-right: 5px; }
@media (max-width: 880px) { .feat-index { display: none; } }
.cap-section { scroll-margin-top: 116px; }