.blog-hero {
    background:
        linear-gradient(135deg, rgba(248, 250, 252, 0.96), rgba(226, 232, 240, 0.92)),
        radial-gradient(circle at top right, rgba(14, 116, 144, 0.12), transparent 38%);
    border-bottom: 1px solid #dbe5f0;
}

.blog-shell {
    background: #f8fafc;
}

.blog-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    border: 1px solid #d3deea;
    background: #ffffff;
    color: #334155;
    text-decoration: none;
    font-size: 0.94rem;
    line-height: 1;
}

.blog-tag-chip.is-active,
.blog-tag-chip:hover {
    border-color: #0f766e;
    color: #0f172a;
    background: #ecfeff;
}

.blog-featured-card,
.blog-post-card,
.blog-sidebar-card,
.blog-author-card,
.blog-article-card {
    border: 1px solid #dbe5f0;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05);
}

.blog-featured-card .badge,
.blog-post-card .badge,
.blog-article-card .badge {
    font-size: 0.74rem;
}

.blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    color: #64748b;
    font-size: 0.94rem;
}

.blog-article-body h2 {
    margin-top: 2rem;
    margin-bottom: 0.8rem;
    font-size: 1.45rem;
    color: #0f172a;
}

.blog-article-body h3 {
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    font-size: 1.05rem;
    color: #0f172a;
}

.blog-article-body p,
.blog-article-body li {
    color: #334155;
    line-height: 1.75;
    font-size: 1rem;
}

.blog-article-body ul,
.blog-article-body ol {
    padding-left: 1.3rem;
}

.blog-callout,
.blog-cta-card {
    margin: 1.5rem 0;
    padding: 1.1rem 1.2rem;
    border-radius: 16px;
}

.blog-callout {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.blog-cta-card {
    background: linear-gradient(135deg, #0f172a, #1d4ed8);
    color: #ffffff;
}

.blog-cta-card h3,
.blog-cta-card p {
    color: #ffffff;
}

.blog-cta-card .btn {
    margin-top: 0.25rem;
}

.blog-breadcrumbs {
    font-size: 0.94rem;
}

.blog-breadcrumbs a {
    color: #0f766e;
    text-decoration: none;
}

.blog-breadcrumbs a:hover {
    text-decoration: underline;
}

.blog-author-bullets {
    padding-left: 1.1rem;
}

@media (max-width: 767.98px) {
    .blog-hero h1 {
        font-size: 2rem;
    }

    .blog-article-body h2 {
        font-size: 1.25rem;
    }
}