/* Scenario content and its homepage previews share the theme palette and controls. */
.agents-heading h1 { max-width: 18ch; }
.agents-note { max-width: var(--measure); font-size: var(--text-sm); margin-top: var(--space-6); padding-left: var(--space-4); border-left: var(--stroke) solid var(--accent); }
.agent-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.agent-filters a { display: inline-flex; align-items: center; min-height: var(--control-sm); padding: var(--space-2) var(--space-5); border: var(--stroke) solid var(--border); border-radius: var(--radius-pill); color: var(--text-muted); font-size: var(--text-sm); }
.agent-filters a[aria-current], .agent-filters a:hover { background: var(--action); color: var(--on-action); border-color: var(--action); }
.agent-count { margin-block: var(--space-6); font-size: var(--text-sm); }
.agent-grid { display: grid; gap: var(--space-5); }
.agent-card { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-5) var(--space-12); background: var(--surface-raised); border: var(--stroke) solid var(--border); border-radius: var(--radius-md); padding: var(--home-panel-space); padding-bottom: var(--space-4); scroll-margin-top: var(--space-8); }
.agent-card:target { border-color: var(--accent); }
.agent-card-top { margin-bottom: var(--space-4); }
.agent-card-top .eyebrow { margin: 0; }
.agent-card h2 { font-size: var(--text-h3); font-weight: 450; margin-bottom: var(--space-4); }
.agent-card-intro > p { font-size: var(--text-sm); max-width: 56ch; }
.agent-outcome { display: flex; flex-direction: column; align-items: start; border-left: var(--stroke) solid var(--border); padding-left: var(--space-8); }
.agent-outcome > span { color: var(--accent); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.agent-outcome p { color: var(--text); font-size: var(--text-sm); margin-top: var(--space-2); }
.agent-detail { grid-column: 1 / -1; border-top: var(--stroke) solid var(--border); }
.agent-detail summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-block: var(--space-4); cursor: pointer; font-size: var(--text-sm); list-style: none; }
.agent-detail summary::-webkit-details-marker { display: none; }
.agent-detail summary > span { font-size: var(--text-xl); color: var(--accent); }
.agent-detail[open] summary > span { transform: rotate(45deg); }
.agent-detail-body { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-12); padding-bottom: var(--space-6); font-size: var(--text-sm); }
.agent-detail-body h3 { font-size: var(--text-base); margin: var(--space-6) 0 var(--space-2); line-height: 1.4; letter-spacing: 0; }
.agent-detail-body ol { padding-left: var(--space-5); color: var(--text-muted); }
.agent-detail-body li + li { margin-top: var(--space-2); }
.agent-build { border-left: var(--stroke) solid var(--accent); padding-left: var(--space-4); margin-bottom: var(--space-6); }
.agent-enquire { margin-top: auto; padding-top: var(--space-5); }
.agent-principles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }
.agent-principles h2 { font-size: var(--text-h3); max-width: 20ch; margin-bottom: var(--space-6); }
.agent-principles p + p { margin-top: var(--space-5); }
.home-scenarios { padding-block: var(--home-section); }
.agent-preview-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-8); }
.agent-preview { display: flex; flex-direction: column; padding-block: var(--space-5); border-top: var(--stroke) solid var(--border); transition: border-color var(--duration); }
.agent-preview:hover { border-color: var(--accent); }
.agent-preview-index { display: flex; justify-content: space-between; color: var(--accent); font-family: var(--font-mono); font-size: var(--text-sm); margin-bottom: var(--space-8); }
.agent-preview h3 { font-size: var(--text-lg); font-weight: 500; line-height: 1.3; margin-bottom: var(--space-4); }
.agent-preview p { font-size: var(--text-sm); margin-bottom: var(--space-6); }
.agent-preview-systems { margin-top: auto; font-size: var(--text-xs); color: var(--text-dim); }
.agent-capabilities { padding-top: 0; }
.agent-capabilities-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-8) var(--space-12); }
.agent-capabilities-grid article { padding-top: var(--space-5); border-top: var(--stroke) solid var(--border); }
.agent-capabilities h3 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.agent-capabilities p { font-size: var(--text-sm); }
@media (max-width: 48rem) {
  .agent-card, .agent-detail-body, .agent-principles, .agent-capabilities-grid, .agent-preview-grid { grid-template-columns: 1fr; }
  .agent-detail-body { gap: 0; }
  .agent-outcome { border-left: 0; border-top: var(--stroke) solid var(--border); padding: var(--space-4) 0 0; }
  .agent-preview-grid { gap: var(--space-4); }
  .agent-preview-index { margin-bottom: var(--space-5); }
  .agent-principles { gap: var(--space-8); }
}
@media (prefers-reduced-motion: reduce) { .agent-preview { transition: none; } }