.guide-article-page {
    margin: 0;
    color: #172033;
    background: #f4f7fb;
    font-family: Inter, Arial, sans-serif;
    overflow-x: hidden;
}
.guide-article-page main {
    max-width: none;
    margin: 0;
    padding: 0 20px 80px;
}
.guide-article-page article {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 0 48px;
}
.guide-article-page .article-hero {
    width: 100vw;
    margin: 0 0 48px calc((860px - 100vw) / 2);
    padding: 72px max(28px, calc((100vw - 860px) / 2 + 28px));
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    overflow: hidden;
}
.guide-article-page .article-crumb {
    margin: 0 0 20px;
    color: #dbeafe;
    font-size: .86rem;
}
.guide-article-page .article-crumb a { color: #fff; font-weight: 700; }
.guide-article-page .article-hero h1 {
    width: 100%;
    max-width: 820px;
    margin: 0 0 20px;
    color: #fff;
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    line-height: 1.08;
    letter-spacing: -.03em;
    overflow-wrap: anywhere;
}
.guide-article-page .article-intro {
    max-width: 760px;
    margin: 0;
    color: #eef2ff;
    font-size: 1.12rem;
    line-height: 1.75;
}
.guide-article-page article > h2,
.guide-article-page article > h3,
.guide-article-page article > p,
.guide-article-page article > ol,
.guide-article-page article > ul,
.guide-article-page article > .example {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.guide-article-page article > h2 {
    margin-top: 42px;
    margin-bottom: 14px;
    color: #172033;
    font-size: 1.65rem;
    line-height: 1.25;
}
.guide-article-page article > h3 { margin-top: 26px; color: #344054; }
.guide-article-page article > p,
.guide-article-page article > li,
.guide-article-page article > ol,
.guide-article-page article > ul {
    color: #5d687a;
    font-size: 1rem;
    line-height: 1.8;
}
.guide-article-page article > ol,
.guide-article-page article > ul { padding-left: 24px; }
.guide-article-page article a { color: #1d4ed8; font-weight: 650; }
.guide-article-page article a:hover { color: #153eaa; }
.guide-article-page .example {
    margin-top: 28px;
    padding: 24px 26px;
    border: 1px solid #c9d9f6;
    border-left: 5px solid #667eea;
    border-radius: 8px;
    background: #eef4ff;
}
.guide-article-page .example h3 { margin-top: 0; color: #172033; }
.guide-article-page .example p { margin: 12px 0 0; }
.guide-article-page code { padding: 2px 5px; color: #4338ca; border-radius: 4px; background: #e0e7ff; }
@media (max-width: 900px) {
    .guide-article-page .article-hero { width: calc(100% + 40px); margin: 0 -20px 40px; padding: 64px 20px; }
    .guide-article-page .article-hero h1, .guide-article-page .article-intro { max-width: 100%; }
}
@media (max-width: 640px) {
    .guide-article-page main { padding: 0 16px 56px; }
    .guide-article-page .article-hero { width: calc(100% + 32px); margin: 0 -16px 36px; padding: 56px 20px; }
    .guide-article-page .article-hero h1 { font-size: 2.35rem; }
    .guide-article-page .article-intro { font-size: 1rem; }
    .guide-article-page article > h2 { margin-top: 34px; font-size: 1.4rem; }
    .guide-article-page .example { padding: 20px; }
}