/* Components used only by the content pages reshelled in November 2026 (case studies,
   service pages, tools and guides, legal pages): stat tiles, a contents box, a progress bar
   and a few layout helpers. Loaded after site.css and built on its tokens, so it follows the
   light and dark themes. Kept apart from site.css so that file's cached version stays valid;
   fold it in at the next site.css version bump. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.stat { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); text-align: center; }
.stat strong { display: block; font-size: 1.6rem; line-height: 1.15; letter-spacing: -0.02em; color: var(--accent); margin-bottom: 6px; overflow-wrap: anywhere; }
.stat span { display: block; font-size: 0.88rem; color: var(--text-3); }
.stat-sm strong { font-size: 1.1rem; color: var(--text); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.row > * { min-width: 0; }
.row .avatar { flex: 0 0 auto; }
.avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
.avatar-lg { width: 96px; height: 96px; }
.price { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text); margin: 0 0 6px; }
.steps-row.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps-row.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps-row.cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .steps-row.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .steps-row.cols-3, .steps-row.cols-4, .steps-row.cols-6 { grid-template-columns: 1fr; } }
.steps .eyebrow { margin-bottom: 6px; }
.toc { padding: 18px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); }
.toc .eyebrow { margin-bottom: 10px; }
.toc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
.toc-list li { margin: 0; }
.toc-list a { color: var(--text-2); text-decoration: none; }
.toc-list a:hover { color: var(--text); text-decoration: underline; }
@media (max-width: 560px) { .toc-list { grid-template-columns: 1fr; } }
.progress { height: 8px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--line); overflow: hidden; margin: 10px 0 0; }
.progress > span { display: block; height: 100%; width: 0; background: var(--grad); transition: width 0.2s ease; }
.card .tag-row:last-child { margin-bottom: 0; }
.card > .btn-row { margin-top: 16px; }
.card .stats { margin-top: 16px; }
.prose .stats, .prose .steps-row { font-size: 1rem; line-height: 1.5; }
.prose .card h3, .prose .card h4 { margin-top: 0; }
.prose .grid > .card { margin: 0; }
.prose .eyebrow { margin-bottom: 8px; }
.work-card .quote { margin-top: 0; }
.notice strong:first-child { display: block; color: var(--text); margin-bottom: 4px; }
.notice ul, .notice ol { margin-bottom: 0; }
.grid > .quote, .text-center > .quote { margin-top: 0; }
.grid > .quote p { font-size: 1.02rem; }