.blog-topbar { position: sticky; }
.blog-hero, .article-hero { padding: 120px clamp(20px, 7vw, 96px) 48px; background: #f7f8f5; border-bottom: 1px solid var(--line); }
.blog-hero h1, .article-hero h1 { max-width: 960px; margin: 0; font-size: clamp(42px, 7vw, 84px); line-height: .96; }
.blog-hero p, .article-hero p { max-width: 760px; color: var(--muted); font-size: 18px; line-height: 1.65; }
.blog-list { max-width: 1080px; margin: 0 auto; padding: 48px 24px 80px; display: grid; gap: 18px; }
.post-card { display: grid; gap: 12px; padding: 24px; color: inherit; text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.post-card:hover { border-color: rgba(26, 167, 184, .45); }
.post-card h2 { margin: 0; font-size: clamp(24px, 3vw, 36px); line-height: 1.08; }
.post-card p { margin: 0; color: var(--muted); line-height: 1.6; }
.post-meta { color: var(--cyan); font-size: 13px; font-weight: 800; text-transform: uppercase; }
.article { max-width: 840px; margin: 0 auto; padding: 44px 24px 96px; }
.article-content { font-size: 18px; line-height: 1.78; }
.article-content h2 { margin: 56px 0 16px; font-size: clamp(28px, 4vw, 42px); line-height: 1.08; }
.article-content h3 { margin: 36px 0 12px; font-size: 24px; }
.article-content p, .article-content li { color: #273742; }
.article-content ul { padding-left: 24px; }
.article-cta { margin-top: 56px; padding: 24px; background: #10202a; color: #fff; border-radius: 8px; }
.article-cta p { margin: 8px 0 20px; color: rgba(255,255,255,.72); }
.article-cta .button { display: inline-flex; width: auto; }
@media (max-width: 640px) {
  .blog-hero, .article-hero { padding-top: 96px; }
  .article-content { font-size: 16px; }
  .article-cta .button { width: 100%; justify-content: center; }
}