/* ==========================================================================
   Prose — long-form article content (accessibility, consumer info, about,
   funding, news posts). Readable measure, clear hierarchy, accessible links.
   ========================================================================== */
.prose { max-width: 72ch; }
.prose > * + * { margin-top: var(--space-3); }
/* Space siblings INSIDE <section> wrappers too (headings, paragraphs, lists). */
.prose section > * + * { margin-top: var(--space-3); }
.prose section > h3 { margin-top: var(--space-4); }
.prose h2 {
  font-size: var(--text-2xl);
  margin-top: var(--space-6);
  padding-top: var(--space-2);
  scroll-margin-top: calc(var(--sticky-top) + var(--space-3));
}
.prose h3 { font-size: var(--text-xl); margin-top: var(--space-4); }
.prose h2 + p, .prose h3 + p { margin-top: var(--space-2); }
.prose p, .prose li { line-height: var(--leading-relaxed); }
/* Exclude .btn so buttons placed inside prose keep their own colors
   (otherwise a primary button gets blue link text on its blue fill). */
.prose a:not(.btn) { color: var(--color-accent-hover); text-underline-offset: 0.18em; }
.prose a:not(.btn):hover { text-decoration-thickness: 2px; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul > li + li, .prose ol > li + li { margin-top: 0.5rem; }
.prose ul li::marker { color: var(--color-accent); }
.prose strong { color: var(--color-text); }
.prose blockquote {
  border-left: 4px solid var(--color-accent);
  padding-left: var(--space-3);
  font-style: italic;
  color: var(--color-text-muted);
}
.prose hr { margin-block: var(--space-5); }

/* Definition-style contact block */
.contact-block {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.contact-block dt { font-weight: var(--weight-semibold); color: var(--color-primary); }
.contact-block dd { margin: 0 0 var(--space-2); color: var(--color-text-muted); }
.contact-block dd:last-child { margin-bottom: 0; }
.contact-block a { color: var(--color-accent-hover); }

/* On-page table of contents (sticky on wide screens) */
.toc {
  font-size: var(--text-sm);
}
.toc__title {
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.toc a { color: var(--color-text-muted); text-decoration: none; display: block; padding: 0.2rem 0; border-left: 2px solid var(--color-border); padding-left: var(--space-2); }
.toc a:hover { color: var(--color-accent-hover); border-color: var(--color-accent); }

/* Two-column doc layout: sticky TOC + content */
.doc-layout { display: grid; gap: var(--space-6); }
@media (min-width: 960px) {
  .doc-layout { grid-template-columns: 240px 1fr; }
  .doc-layout__aside { position: sticky; top: calc(var(--sticky-top) + var(--space-3)); align-self: start; }
}

/* Callout / notice box */
.notice {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.notice__icon { flex-shrink: 0; color: var(--color-accent); }
.notice h3 { margin: 0 0 0.25rem; font-size: var(--text-lg); }
.notice p { margin: 0; }
.notice--accent { background: #eef5fc; border-color: #cfe2f6; }
.notice--warn { background: #fffbeb; border-color: #fde68a; }
.notice--warn .notice__icon { color: #b45309; }