.article-container { max-width: 850px; margin: 0 auto; padding: 60px 20px; line-height: 1.7; color: var(--muted); } .article-container h2 { color: var(--text); font-size: clamp(28px, 5vw, 40px); margin-top: 40px; margin-bottom: 16px; font-weight: 800; } .article-container h3 { color: var(--accent); font-size: clamp(22px, 4vw, 28px); margin-top: 30px; margin-bottom: 12px; font-weight: 700; } .article-container p { margin-bottom: 24px; font-size: 17px; } .article-container ul { margin: 0 0 24px 0; padding-left: 20px; } .article-container ul li { margin-bottom: 12px; } .article-container img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 24px; } .toc { background: var(--card); border-radius: var(--radius); padding: 20px; margin-bottom: 40px; box-shadow: var(--shadow); } .toc ul { list-style: none; padding-left: 0; } .toc li { margin-bottom: 8px; } .toc a { color: var(--accent); text-decoration: none; font-weight: 600; } .toc a:hover { text-decoration: underline; } .cta-box { background: var(--card); border-radius: var(--radius); padding: 40px 30px; margin: 60px 0; text-align: center; box-shadow: var(--shadow); } .cta-box h3 { color: var(--text); margin-bottom: 16px; font-size: clamp(24px, 5vw, 32px); } .cta-box p { margin-bottom: 24px; color: var(--muted); } @media (max-width: 600px) { .article-container { padding: 40px 16px; } }