/* Legal pages and the full FAQ page (doc sections 8.12 and 8.14). */
.content-meta { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .05em; color: var(--muted-foreground); }

/* minmax(0, ...) keeps wide content (tables, long URLs) from stretching the column past the viewport. */
.content-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-bottom: 6rem; }
.content-toc { display: flex; flex-direction: column; gap: .75rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: 1.35rem; background: var(--card); align-self: start; }
.content-toc ol { display: flex; flex-direction: column; gap: .5rem; }
.content-toc a { font-size: .875rem; color: var(--muted-foreground); transition: color .15s; }
.content-toc a:hover { color: var(--primary); }

.prose { max-width: 48rem; min-width: 0; overflow-wrap: break-word; font-size: 1rem; line-height: 1.75; color: var(--foreground); }
.prose h2 { margin-top: 2.5rem; margin-bottom: .75rem; font-size: 1.5rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.02em; scroll-margin-top: 7rem; }
.prose h2:first-child, .prose .notice + h2, .prose blockquote + h2 { margin-top: 0; }
.prose h3 { margin-top: 1.75rem; margin-bottom: .5rem; font-size: 1.125rem; font-weight: 600; }
.prose p, .prose ul, .prose ol { margin-bottom: 1rem; color: color-mix(in srgb, var(--foreground) 85%, transparent); }
.prose ul { list-style: disc; padding-left: 1.25rem; }
.prose ol { list-style: decimal; padding-left: 1.25rem; }
.prose li { margin-bottom: .375rem; }
.prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 4px; }
/* "> ..." in the admin Markdown editor renders as a blockquote: the same highlighted notice box. */
.prose .notice, .prose blockquote { margin-bottom: 2rem; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--secondary); font-size: .875rem; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 600; color: var(--foreground); }
.prose img { max-width: 100%; height: auto; }
/* Narrow screens: a wide table scrolls inside itself instead of pushing the whole page sideways. */
@media (max-width: 767px) {
  .prose table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: .875rem; }
  .prose th, .prose td { min-width: 9rem; }
}

.faq-page { display: grid; gap: 2.5rem; padding-bottom: 6rem; }
.faq-nav ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.faq-nav a { display: inline-flex; height: 2.25rem; align-items: center; padding: 0 1rem; border: 1px solid var(--border); border-radius: 9999px; background: var(--card); font-size: .875rem; font-weight: 500; transition: border-color .15s, color .15s; }
.faq-nav a:hover { border-color: var(--primary); color: var(--primary); }
.faq-groups { display: flex; flex-direction: column; gap: 3rem; }
.faq-group { scroll-margin-top: 7rem; }
.faq-group h2 { font-family: var(--font-mono); font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .18em; color: var(--primary); }

@media (min-width: 1024px) {
  .content-layout { grid-template-columns: 16rem minmax(0, 1fr); gap: 4rem; }
  .content-toc { position: sticky; top: 8rem; }
  .faq-page { grid-template-columns: 16rem minmax(0, 1fr); gap: 4rem; }
  .faq-nav { position: sticky; top: 8rem; align-self: start; }
  .faq-nav ul { flex-direction: column; }
}