:root {
    --article-max: 860px;
    --article-border: rgba(0, 0, 0, 0.08);
    --article-muted: #5f5f5f;
    --article-surface-alt: #f6f6f6;
    --article-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
    --article-radius: 22px;
}

.article-page {
    width: min(var(--article-max), calc(100% - 2rem));
    margin: 0 auto;
    padding: 2rem 0 5rem;
}

.blog-intro-words {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--article-primary);
}

.article-header,
.article-body,
.article-cta {
    margin-bottom: 2rem;
}

.article-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
}

.article-subheader,
.article-body p,
.article-cta p {
    color: var(--article-muted);
    line-height: 1.8;
}

.article-image {
    margin: 1.25rem 0 0;
    border: 1px solid var(--article-border);
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(135deg, #f4f4f4, #ebebeb);
    box-shadow: var(--article-shadow);
}

.article-image img {
    width: 100%;
    display: block;
    object-fit: cover;
}

.article-cta {
    border: 1px solid var(--article-border);
    border-radius: var(--article-radius);
    background: var(--article-surface-alt);
    box-shadow: var(--article-shadow);
    padding: 1.5rem;
}

.article-cta .contact-us-button {
    margin-top: 1rem;
}

@media (max-width: 640px) {
    .article-page {
        width: min(var(--article-max), calc(100% - 1.25rem));
    }
}