:root {
    --site-content-width: 1200px;
}

/* Sections share the same content edges as the header and footer. */
main .container {
    width: 100%;
    max-width: var(--site-content-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 32px;
    padding-right: 32px;
}

main :is(.system-grid, .system-note, .changelog-list, .faq-download-list,
    .faq-list, .policy-content, .terms-content, .article-content,
    .related-empty, .about-timeline) {
    width: 100%;
    max-width: none;
}

main .article-header h1 { max-width: none; }
main [id] { scroll-margin-top: 96px; }

.about-page .page-hero { text-align: center; }
.about-page .page-hero p { max-width: none; }
.about-page .about-intro .about-grid { display: block; text-align: center; }
.about-page .about-intro .about-text { min-width: 0; }
.about-page .about-intro .about-text h2 { line-height: 1.4; }
.about-page .about-intro .about-text p { margin-bottom: 16px; }
.blog-page .blog-grid { margin-top: 0; }

.breadcrumbs { margin-bottom: 18px; color: #5a6e87; font-size: 0.9rem; }
.breadcrumbs ol { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; list-style: none; padding: 0; margin: 0; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.breadcrumbs li + li::before { content: '/'; color: #718096; }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 32px; color: #1d4ed8; }
.breadcrumbs [aria-current] { overflow-wrap: anywhere; }
.about-page .breadcrumbs ol, .article-header .breadcrumbs ol { justify-content: center; }
.article-header .breadcrumbs li:last-child { max-width: 100%; }
main .context-link, main .reading-links a, main .page-guide a {
    color: #1d4ed8;
    text-decoration: underline;
    text-underline-offset: 3px;
}
main .context-link:hover, main .reading-links a:hover, main .page-guide a:hover { color: #1e40af; }
main a:focus-visible { outline: 3px solid #2563eb; outline-offset: 4px; border-radius: 3px; }
main .reading-links, main .page-guide { margin-top: 20px; color: #475569; font-size: 0.95rem; line-height: 1.8; }
main .help-card .context-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; }

@media (max-width: 992px) {
    main .container { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 768px) {
    main .container { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 480px) {
    main .container { padding-left: 12px; padding-right: 12px; }
}