/* Rules page styles — minimal and complementary to base.css */
.hero { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 900px) { .hero { grid-template-columns: 1.1fr 1fr; } }
.hero__content h1 { margin-top: 0; }
.hero__media img { width: 100%; height: auto; box-shadow: var(--shadow-3); }
.hero__cta { margin-top: var(--space-4); }

/* Table of contents */
.toc { position: relative; }
.toc__list { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.toc a { display: block; padding: var(--space-3) var(--space-4); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-m); background: color-mix(in oklab, var(--color-bg-elevated) 88%, black); box-shadow: var(--shadow-1); }
.toc a:hover { text-decoration: none; border-color: color-mix(in oklab, var(--color-primary) 40%, var(--gray-600)); }
.toc a.is-active { border-color: color-mix(in oklab, var(--color-primary) 80%, var(--gray-600)); box-shadow: var(--shadow-2), 0 0 24px rgba(121,197,150,0.08); }

/* Media figure */
.media { margin-top: var(--space-6); }
.media figcaption { color: var(--color-text-muted); font-size: var(--fs-200); margin-top: var(--space-2); }

/* FAQ controls */
.faq-actions { display: flex; gap: var(--space-3); align-items: center; margin-block: var(--space-3) var(--space-2); }
.faq-list details { padding: var(--space-3) var(--space-4); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-m); background: linear-gradient(180deg, color-mix(in oklab, var(--color-surface) 90%, black), var(--color-bg-elevated)); box-shadow: var(--shadow-1); }
.faq-list details + details { margin-top: var(--space-3); }
.faq-list summary { cursor: pointer; font-weight: 600; color: var(--color-heading); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before { content: "▸"; margin-right: var(--space-2); color: var(--color-primary); }
.faq-list details[open] summary::before { content: "▾"; }

/* Anchor offset for in-page navigation */
[id] { scroll-margin-top: 96px; }

/* Minor typography */
.muted { color: var(--color-text-muted); font-size: var(--fs-200); }