/* /agents: one hero and two short card rows in the /mcp page language.
   Loaded after mcp.css; everything is scoped to body.agents-page. */
.agents-page .mcp-main { width: min(1240px, calc(100% - 40px)); margin: 0 auto; }
.agents-page .mcp-hero-agents { padding: clamp(56px, 8vw, 112px) 0 clamp(56px, 8vw, 96px); }
.agents-page .mcp-hero-agents h1 { font-size: clamp(36px, 6.4vw, 96px); line-height: .9; letter-spacing: -.05em; }
.agents-page .agents-hero-lede {
  max-width: 640px; margin: 28px auto 0;
  color: #b7b7b7; font-size: clamp(15px, 1.4vw, 19px); line-height: 1.5; letter-spacing: -.01em;
}
.agents-page .mcp-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }

.agents-page .mcp-section { padding: clamp(56px, 7vw, 96px) 0; border-top: 1px solid var(--line); }
.agents-page .mcp-section h2 {
  margin: 0 0 32px;
  font-size: clamp(28px, 4vw, 52px); font-weight: 800; line-height: .95; letter-spacing: -.045em;
  text-transform: uppercase;
}
.agents-page .mcp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); }
.agents-page .mcp-card { padding: 28px; border-left: 1px solid var(--line); }
.agents-page .mcp-card:first-child { border-left: 0; }
.agents-page .mcp-card span { color: var(--red); font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.agents-page .mcp-card h3 { margin: 18px 0 10px; font-size: 20px; line-height: 1.2; letter-spacing: -.02em; }
.agents-page .mcp-card p { margin: 0; color: #a3a3a3; font-size: 15px; line-height: 1.5; }
.agents-page .mcp-fineprint { max-width: 760px; margin: 20px 0 0; color: #7a7a7a; font-size: 13px; line-height: 1.6; }

@media (max-width: 820px) {
  .agents-page .mcp-grid { grid-template-columns: 1fr; }
  .agents-page .mcp-card { border-left: 0; border-top: 1px solid var(--line); }
  .agents-page .mcp-card:first-child { border-top: 0; }
  .agents-page .mcp-actions .mcp-button { width: 100%; }
}
.agents-page .mcp-fineprint a { color: #d8dee8; text-decoration: underline; text-underline-offset: 2px; }
