/* /about only (07 §8). Shared section patterns come from components/sections.css; colours and sizes from tokens.css (rule 12). */

/* Hero + "on this page" chips (same rhythm as /how-it-works) */
.about-hero { display: grid; gap: var(--space-3); justify-items: start; padding-block: var(--space-6) var(--space-5); }
.about-hero__title { font-size: var(--text-display); line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; }
.about-hero__lead { max-width: 60ch; font-size: var(--text-h3); line-height: 1.55; color: var(--color-text-muted); }
.about-toc { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.about-toc .chip { min-height: var(--tap-min); }
.about [id] { scroll-margin-top: var(--space-5); }
.about-prose { max-width: var(--prose); }
.about-note { margin-top: var(--space-5); color: var(--color-text-muted); max-width: var(--prose); }

/* What makes it different: icon cards */
.about-cards { display: grid; gap: var(--space-4); padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.about-card {
  display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
}
.about-card__icon { width: var(--icon-md); height: var(--icon-md); color: var(--color-primary); margin-bottom: var(--space-1); }
.about-card__title { font-size: var(--text-h3); }
.about-card p { color: var(--color-text-muted); font-size: var(--text-small); }

/* Who we are: company + person panels */
.about-who { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .about-who { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.about-panel {
  display: grid; gap: var(--space-3); align-content: start; padding: var(--space-5);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
}
.about-panel__title { font-size: var(--text-h3); }
.about-panel > p { color: var(--color-text-muted); }
.about-panel__label { font-size: var(--text-tiny); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.about-books { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-5); font-size: var(--text-small); }
.about-links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.about-links .chip { min-height: var(--tap-min); }

/* Other products: link tiles */
.about-products { display: grid; gap: var(--space-3); padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.about-product {
  display: grid; gap: var(--space-1); height: 100%; padding: var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  color: var(--color-text); text-decoration: none;
}
.about-product:hover { border-color: var(--color-primary); }
.about-product span { color: var(--color-text-muted); font-size: var(--text-small); }