/* Shared by the per-agent pages under /agents/. Layers on styles.css; defines
   nothing that page already defines. Kept small on purpose — an agent page is
   the landing's vocabulary applied to one agent, not a second design. */
.agent-hero { padding: 116px 0 34px; }
.agent-hero .agent-icon { width: 54px; height: 54px; border-radius: 13px; }
.agent-hero .agent-icon svg { width: 27px; height: 27px; }
.agent-hero-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.agent-hero h1 { font-family: var(--font-display); font-size: clamp(30px, 5vw, 44px); font-weight: 500; margin: 0; letter-spacing: -0.01em; }
.agent-hero .agent-role { font-size: 13px; margin-top: 4px; }
.agent-lede { color: var(--text-2); font-size: 18px; line-height: 1.62; max-width: 66ch; margin: 20px 0 0; }
.agent-hero .badge { position: static; }

.agent-back { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); text-decoration: none; margin-bottom: 22px; }
.agent-back:hover { color: var(--accent); }

.spec { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; max-width: 68ch; }
.spec li { display: flex; gap: 14px; font-size: 15px; color: var(--text-2); line-height: 1.6; }
.spec b { color: var(--text); font-weight: 500; font-family: var(--font-mono); font-size: 12.5px; min-width: 104px; flex: none; padding-top: 2px; }

.sample-block { margin-top: 26px; }
.sample-block h3 { font-family: var(--font-display); font-size: 20px; font-weight: 500; margin: 0 0 4px; }
.sample-block > p { color: var(--text-2); font-size: 14.5px; margin: 0 0 12px; max-width: 70ch; }
/* Real output wraps rather than scrolling sideways — it is meant to be read. */
.sample-block .term-body { white-space: pre-wrap; word-break: break-word; font-size: 13px; max-height: 460px; overflow-y: auto; }

.level-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.level-card h4 { font-family: var(--font-display); font-size: 17px; font-weight: 500; margin: 0 0 6px; }
.level-card .mono { color: var(--muted); font-size: 11.5px; }
.level-card p { color: var(--text-2); font-size: 14px; line-height: 1.58; margin: 6px 0 0; }

.note-honest {
  border-left: 2px solid var(--warn); background: color-mix(in srgb, var(--warn) 7%, transparent);
  padding: 14px 18px; border-radius: 0 8px 8px 0; margin-top: 26px; max-width: 72ch;
}
.note-honest p { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.6; }
.note-honest b { color: var(--text); font-weight: 500; }

@media (max-width: 560px) {
  .agent-hero { padding: 96px 0 26px; }
  .spec li { flex-direction: column; gap: 3px; }
  .spec b { min-width: 0; }
}