/* Shared typography and layouts for guides, articles and information pages. */
.content-site .site-nav { max-width: 1056px; margin: 0 auto; }
.info-standalone, .faq-page, .tutorial-page, .blog-page, .article-page { max-width: 820px; margin: 0 auto; padding: 48px 0 64px; }
.info-header, .faq-header, .tutorial-header, .blog-header, .article-header { text-align: left; margin-bottom: 32px; }
.info-header h1, .faq-header h1, .tutorial-header h1, .blog-header h1, .article-header h1 { font-size: clamp(28px,4vw,38px); line-height: 1.4; letter-spacing: -1px; margin-bottom: 12px; color: var(--text-color); font-weight: 650; }
.info-header p, .faq-header p, .tutorial-header p, .blog-header p { color: var(--text-secondary); font-size: 15px; }
.info-section, .faq-item, .tutorial-section, .blog-card { margin-bottom: 20px; padding: 28px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: none; }
.info-section h3, .faq-question, .tutorial-section h2, .blog-card h2 { font-size: 20px; line-height: 1.5; margin-bottom: 12px; font-weight: 600; color: var(--text-color); }
.info-section p, .info-section li, .faq-answer, .tutorial-section > p, .blog-excerpt { color: var(--text-secondary); font-size: 15px; line-height: 1.9; }
.info-list, .faq-answer ul { padding-left: 22px; }.info-list li { margin: 8px 0; }.faq-answer p { margin: 8px 0; }
.faq-category { margin: 32px 0 18px; color: #c4b5fd; font-size: 22px; }.faq-category h2 { font-size: 22px; }
.faq-question { display: flex; align-items: baseline; gap: 12px; }.faq-question::before { content: 'Q'; font-size: 13px; color: #c4b5fd; }
.tutorial-step, .tutorial-tips, .highlight-box, .tip-box, .warning-box { margin: 20px 0; padding: 18px 20px; border-radius: 0 10px 10px 0; background: #8b5cf60b; border-left: 3px solid #a78bfa; }
.tutorial-step h3, .article-content h3 { font-size: 18px; color: #c4b5fd; margin-bottom: 10px; }.tutorial-tips h4 { font-size: 16px; color: #9bd0b9; margin-bottom: 8px; }
.tutorial-step p, .tutorial-tips p { white-space: pre-line; color: var(--text-secondary); line-height: 1.9; font-size: 15px; }.tutorial-tips, .tip-box { border-color: #78ae99; background: #78ae9908; }
.blog-list { display: grid; gap: 0; }.blog-card { transition: border-color .18s; }.blog-card:hover { border-color: #615181; }
.blog-meta, .article-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--text-secondary); margin: 12px 0 20px; }
.blog-excerpt { margin-bottom: 18px; }.read-more { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: #c4b5fd; text-decoration: none; font-weight: 600; }
.back-home, .back-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 20px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text-color); text-decoration: none; font-size: 14px; }
.back-home:hover, .back-link:hover { background: var(--surface-hover); border-color: #615181; }
.article-content { color: var(--text-secondary); font-size: 16px; line-height: 1.95; }.article-content h2 { color: var(--text-color); font-size: 24px; line-height: 1.5; margin: 36px 0 16px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }.article-content h3 { margin-top: 24px; }.article-content p { margin: 18px 0; }.article-content ul, .article-content ol { padding-left: 24px; margin: 20px 0; }.article-content li { margin: 10px 0; }
.article-content strong { color: #dce0e9; }.contact-link { color: var(--accent-color); overflow-wrap: anywhere; }.last-updated { color: var(--text-secondary); font-size: 13px; margin-top: 20px; }
.contact-method { padding: 16px 0; border-bottom: 1px solid var(--line); }.contact-method:last-child { border: 0; }.contact-method h3 { margin-bottom: 8px; }
.content-site { padding: 0 32px; }.content-site a { overflow-wrap: anywhere; }
@media (max-width: 700px) {
    .content-site { padding: 0 20px; }.content-site .site-nav { gap: 8px; }.content-site .nav-button { font-size: 12px; padding: 8px; }.content-site .brand { font-size: 18px; }
    .info-standalone, .faq-page, .tutorial-page, .blog-page, .article-page { padding: 32px 0 48px; }
    .info-section, .faq-item, .tutorial-section, .blog-card { padding: 20px; }.info-section h3, .faq-question, .tutorial-section h2, .blog-card h2 { font-size: 18px; }
    .tutorial-step, .tutorial-tips { padding: 14px; }.article-content h2 { font-size: 21px; }
}