/* Capabilities: the numbered capability index and the people-and-platform rows. Shared patterns in site.css. */

/* ---------- Capability index ---------- */
.index { display: flex; flex-direction: column; }
.index-row {
  display: grid; grid-template-columns: 90px 1.1fr 1.6fr; gap: 32px; align-items: start;
  padding: 30px 20px; margin: 0 -20px; border-top: 1px solid var(--border-subtle); border-radius: 10px;
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.index-row:hover { background: rgba(80, 200, 120, .10); }
.index-row__num { font: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow); color: var(--text-tertiary); padding-top: 10px; }
.index-row__title {
  margin: 0; font: var(--weight-semibold) var(--text-h2) / var(--leading-heading) var(--font-display);
  letter-spacing: var(--tracking-heading);
}
.index-row__text { margin: 2px 0 0; font: var(--type-body); color: var(--text-secondary); text-wrap: pretty; }
.tags {
  display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap;
  font: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-tertiary);
}
.tags__dot { width: 5px; height: 5px; border-radius: 999px; background: var(--green-500); }

/* ---------- People and platform ---------- */
.pp { max-width: 1100px; margin: 0 auto; }
.pp-row { display: grid; grid-template-columns: 1fr 150px 1fr; align-items: start; padding: 26px 0; border-top: 1px solid var(--border-dark-subtle); }
.pp-row__side h3 {
  margin: 0; font: var(--weight-semibold) var(--text-h3) / var(--leading-snug) var(--font-display);
  letter-spacing: var(--tracking-heading);
}
.pp-row__side p { margin: 6px 0 0; font: var(--type-body-sm); color: var(--text-inverse-secondary); text-wrap: pretty; }
.pp-row__left { text-align: right; }
.pp-conn { display: flex; align-items: center; padding: 0 18px; margin-top: 8px; }
.pp-conn__line { flex: 1; height: 1px; background: rgba(255, 255, 255, .18); }
.pp-conn__node { width: 6px; height: 6px; border-radius: 999px; background: var(--green-500); flex: none; }
.pp-conn__node--orange { background: var(--orange-500); }
.pp-conn__node--open { width: 8px; height: 8px; border: 1.5px solid rgba(255, 255, 255, .92); background: var(--surface-dark); }

@media (max-width: 820px) {
  .index-row { grid-template-columns: 1fr; gap: 8px; }
  .index-row__num { padding-top: 0; }
  /* Connector turns vertical on the left; both sides stack and align left. */
  .pp-row { grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; align-items: stretch; }
  .pp-row__left { text-align: left; grid-column: 2; grid-row: 1; }
  .pp-row__right { grid-column: 2; grid-row: 2; margin-top: 20px; }
  .pp-conn { grid-column: 1; grid-row: 1 / span 2; flex-direction: column; align-items: center; padding: 6px 0; margin-top: 0; }
  .pp-conn__line { width: 1px; height: auto; flex: 1; }
}