/* /free-ai-seo-agent/ only. Layout, hero, form and FAQ come from /free-seo-audit/audit.css (.fsa-*),
   the results area, CTA and popup from /free-ai-seo-writer/writer.css (.fw-*). */
.fsa select { width: 100%; font: inherit; }
.ag-needs { font-size: 0.86rem; line-height: 1.5; color: var(--fsa-text-2); background: var(--fsa-paper-2); border: 1px solid var(--fsa-line); border-radius: 0.6rem; padding: 0.7rem 0.9rem; }
.ag-needs:empty { display: none; }
.ag-needs p { margin: 0 0 0.3rem; font-weight: 600; color: var(--fsa-text); }
.ag-needs ul { margin: 0; padding-left: 1.1rem; list-style: disc; }
#ag-used-panel[hidden], #ag-answer-wrap[hidden] { display: none; }
#ag-used p { overflow-wrap: anywhere; }

/* The 50 agents */
.ag-cat { margin: 2.4rem 0 0.9rem; font-size: 1.15rem; line-height: 1.3; }
.fsa-head + .ag-cat { margin-top: 0; }
.ag-cards { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); }
.ag-card {
  display: grid; gap: 0.35rem; align-content: start; text-align: left; cursor: pointer;
  font: inherit; color: var(--fsa-text); background: var(--fsa-paper);
  border: 1px solid var(--fsa-line); border-radius: var(--fsa-r); padding: 1rem 1.1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.ag-card b { font-size: 0.98rem; line-height: 1.3; }
.ag-card span { font-size: 0.84rem; line-height: 1.5; color: var(--fsa-text-3); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ag-card:hover { border-color: var(--fsa-ink); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); transform: translateY(-2px); }
.ag-card:focus-visible { outline: 2px solid var(--fsa-ink); outline-offset: 2px; }
.ag-card[aria-pressed="true"] { border-color: var(--fsa-ink); box-shadow: inset 0 0 0 1px var(--fsa-ink); }
@media (prefers-reduced-motion: reduce) { .ag-card { transition: none; } .ag-card:hover { transform: none; } }

/* Agent answers are free-form Markdown: no "answer bar" under headings, tighter headings. */
.ag-art h2 + p { border-left: 0; padding-left: 0; }
.ag-art h1 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); }
.ag-art h2 { font-size: 1.25rem; margin-top: 1.8rem; }
.ag-art code { font-size: 0.88em; background: var(--fsa-paper-2); padding: 0.1rem 0.3rem; border-radius: 0.25rem; }
.ag-art pre { overflow-x: auto; background: var(--fsa-paper-2); border: 1px solid var(--fsa-line); border-radius: 0.5rem; padding: 0.9rem 1rem; font-size: 0.82rem; line-height: 1.55; }
.ag-art pre code { background: none; padding: 0; }
.ag-art blockquote { margin: 0 0 1rem; padding-left: 0.9rem; border-left: 3px solid var(--fsa-line-2); color: var(--fsa-text-2); }