/* ============================================================
   Systems, Automation & Applied AI, page-specific styles.
   Supplements css/main.css (design-system tokens only; no overrides).
   ============================================================ */

/* ---------- The problem ---------- */

.problem h2 { max-width:22ch; }
.problem__intro { max-width:var(--text-max); color:var(--muted); margin-top:var(--s-5); }
.problem__list { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s-6); margin-top:var(--s-7); }
.problem__list li { border-top:1px solid var(--gold-500); padding-top:var(--s-4); color:var(--muted); }
.problem__closing { max-width:var(--text-max); margin-top:var(--s-7); font-size:var(--fs-body-lg); }

/* ---------- What's included ---------- */

.scope h2 { max-width:24ch; margin-bottom:var(--s-4); }
.scope__intro { max-width:var(--text-max); color:var(--muted); margin-bottom:var(--s-7); }
.scope__grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s-6) var(--s-8); max-width:960px; }
.scope__item { border-top:1px solid var(--border-light); padding-top:var(--s-4); }
.scope__item h3 { margin-bottom:var(--s-2); }
.scope__item p { color:var(--muted); }
.scope__honesty { max-width:var(--text-max-body); margin-top:var(--s-7); }
.scope__honesty p { color:var(--muted); margin-bottom:var(--s-4); }
.scope__cta { margin-top:var(--s-6); }

/* Grounded-AI stance (gold rule echoes the pull-quote anatomy) */
.stance { border-left:1px solid var(--gold-500); padding-left:var(--s-5); margin-top:var(--s-7); max-width:var(--text-max); }
.stance h3 { margin-bottom:var(--s-3); }
.stance p { color:var(--muted); margin-bottom:var(--s-4); }
.stance p:last-child { margin-bottom:0; }

/* ---------- Featured work ---------- */

.featured h2 { max-width:20ch; }
.featured__intro { max-width:var(--text-max); color:var(--muted); margin-top:var(--s-5); }
.featured__proof { max-width:var(--text-max-body); margin-top:var(--s-6); color:var(--muted); }

/* ---------- Further reading + adjacent expertise ---------- */

.reading h2 { margin-bottom:var(--s-6); max-width:24ch; }
.reading__list { max-width:var(--text-max); }
.reading__list li { border-top:1px solid var(--border-light); padding:var(--s-4) 0; }
.reading__list li:last-child { border-bottom:1px solid var(--border-light); }
.reading__cluster { display:block; text-transform:uppercase; color:var(--muted); margin-bottom:var(--s-1); }
.related { margin-top:var(--s-8); }
.related h3 { margin-bottom:var(--s-4); }
.related__row { display:flex; flex-direction:column; gap:var(--s-3); max-width:var(--text-max); }

/* ---------- FAQ section heading rhythm ---------- */

.faq-section h2 { margin-bottom:var(--s-6); }
.faq-section .faq { margin-bottom:var(--s-5); }

/* ---------- Responsive ---------- */

@media (max-width:900px) {
  .problem__list { grid-template-columns:1fr 1fr; }
}

@media (max-width:720px) {
  .problem__list, .scope__grid { grid-template-columns:1fr; }
}