/* Hub "AI agents" upsell section. Token-driven; scoped to the section so forks can drop it in. */
.hub-agents { margin-top: 2.5rem; background: var(--surface); border-radius: var(--radius); padding: 1.5rem; }
.hub-agents__head { margin-bottom: 1.25rem; }
.hub-agents__eyebrow { margin: 0 0 .25rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); font-weight: 700; }
.hub-agents__head h2 { margin: 0 0 .5rem; font-family: var(--font-heading); font-size: clamp(1.3rem, 3vw, 1.9rem); }
.hub-agents__head p { margin: 0; color: var(--muted); max-width: 62ch; }
.hub-agents__grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.agent-card { display: flex; flex-direction: column; gap: .75rem; padding: 1.25rem; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); background: var(--bg); }
.agent-card__head { display: flex; align-items: center; gap: .5rem; }
.agent-card__head h3 { margin: 0; font-family: var(--font-heading); color: var(--brand); font-size: 1.15rem; flex: 1; }
.agent-card__icon { font-size: 1.3rem; }
.agent-card__addon { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; padding: .15em .55em; border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); font-weight: 700; }
.agent-card__promise { margin: 0; font-weight: 600; }
.agent-card__bullets { margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: .92rem; line-height: 1.45; }
.agent-card__bullets li + li { margin-top: .3rem; }
.agent-card__sample { margin-top: .25rem; padding: .85rem; border-radius: calc(var(--radius) - 2px); background: var(--surface);
  border: 1px dashed color-mix(in srgb, var(--brand) 40%, transparent); font-size: .9rem; line-height: 1.45; }
.agent-card__sample p { margin: 0; }
.agent-card__sample p + p { margin-top: .35rem; }
.agent-card__sample-title { font-weight: 700; color: var(--brand); }
.agent-card__cta { margin-top: auto; display: inline-block; text-align: center; text-decoration: none; background: var(--brand); color: var(--brand-ink);
  border: 0; border-radius: var(--radius); padding: .65rem 1.1rem; font-family: var(--font-body); font-weight: 600; cursor: pointer; }
.agent-card__cta:disabled { opacity: .55; cursor: not-allowed; }