/* ==========================================================================
   CareerPilot AI — Content pages (About, FAQ, Contact, Legal)
   ========================================================================== */

.prose {
  max-width: 72ch;
  margin: 0 auto;
}
.prose h2 { font-size: var(--step-2); margin-top: 2.25rem; }
.prose h3 { font-size: var(--step-1); margin-top: 1.75rem; }
.prose p, .prose li { color: var(--color-ink-soft); font-size: 1rem; line-height: 1.7; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: 0.5rem; }
.prose strong { color: var(--color-ink); }
.prose .updated { font-family: var(--font-data); font-size: 0.8rem; color: var(--color-ink-soft); margin-bottom: 2rem; display: block; }
.prose p a, .prose li a { text-decoration: underline; text-underline-offset: 2px; }

.faq-item {
  border-bottom: 1px solid var(--color-line);
  padding: 1.25rem 0;
}
.faq-item h2 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.faq-item p { margin: 0; }

.contact-card {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  padding: 1.75rem;
  background: var(--color-paper-alt);
  max-width: 72ch;
  margin: 0 auto;
}
.contact-card a { font-family: var(--font-data); }

.about-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 2rem 0;
}
.about-pillars .card { padding: 1.25rem; }
.about-pillars .card h3 { margin: 0 0 0.4rem; font-size: 0.98rem; }
.about-pillars .card p { margin: 0; font-size: 0.85rem; }
@media (max-width: 800px) { .about-pillars { grid-template-columns: 1fr; } }