/* Paper cards use the page's shared colors, type, and panel spacing. */
.agents { margin-top: 0; padding: 38px 34px 42px; }
.agents-intro { display: block; padding-bottom: 28px; }
.agents h2 { padding: 0; border: 0; }
.agents-intro p {
  margin: var(--space-heading-copy) 0 0;
  max-width: 70ch;
  color: var(--agent-muted);
}
.agent-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.agents .agent-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: 48px auto;
  align-items: center;
  align-content: start;
  gap: 18px 16px;
  min-width: 0;
  height: 100%;
  padding: 28px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.agent-logo {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
}
.agent-logo img { display: block; width: 40px; height: 40px; object-fit: contain; }
.agent-logo--instinct img { width: auto; height: 39px; }
.agents .agent-row h3 { color: var(--ink); }
.agents .agent-row p {
  grid-column: 1 / -1;
  max-width: 52ch;
  margin: 0;
  color: var(--muted);
}
@media (max-width: 760px) {
  .agents { padding: 30px 0 34px; }
  .agents-intro { padding-bottom: 22px; }
  .agent-list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .agents .agent-row { padding: 22px; gap: 14px 14px; }
}