/* Right-column illustration for knowledge-base articles */
.article-page {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 28px 32px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 8px;
    box-sizing: border-box;
}
/* Same horizontal origin as single-column pages: text card lines up with privacy/support/KB index. */
@media (min-width: 901px) {
    .article-page:not(.article-page--text-only) {
        padding-left: max(8px, calc((100% - var(--site-text-column, min(720px, 100%))) / 2));
    }
}
/* Single full-width column (no aside): same text width as article + sidebar layouts */
.article-page.article-page--text-only {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    max-width: min(720px, 100%);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.article-page.article-page--text-only .article-main {
    flex: 1 1 auto;
    max-width: min(720px, 100%);
    width: 100%;
}
.article-page .article-main {
    flex: 1 1 420px;
    max-width: 720px;
    margin: 0; /* flex row: don’t center the text column alone */
}
/* 1200×630 hero above article body (same column width as other articles) */
.article-hero-og {
    margin: 0 0 28px 0;
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    background: rgba(90, 47, 160, 0.45);
}
.article-hero-og picture {
    display: block;
}
.article-hero-og img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 630;
    object-fit: contain;
    vertical-align: bottom;
}
.article-aside {
    flex: 0 0 220px;
    width: 220px;
    position: sticky;
    top: 32px;
    align-self: flex-start;
}
.article-aside picture {
    display: block;
}
.article-aside img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center 20%;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    background: rgba(255, 255, 255, 0.08);
}
/* Square Mac app icon (no portrait crop) */
.article-aside img.article-aside-app-icon {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    object-position: center;
    background: rgba(90, 47, 160, 0.35);
}
/* 1200×630 OG / social artwork in aside: landscape; default 3:4 + cover would crop badly */
.article-aside img.article-aside-og {
    aspect-ratio: 1200 / 630;
    object-fit: contain;
    object-position: center;
    background: rgba(90, 47, 160, 0.45);
}
@media (max-width: 900px) {
    .article-aside {
        position: relative;
        top: auto;
        flex: 1 1 100%;
        max-width: 280px;
        margin: 0 auto;
        order: -1;
    }
    .article-page {
        flex-direction: column;
    }
    .article-page:not(.article-page--text-only) {
        padding-left: 8px;
    }
    .article-page.article-page--text-only {
        max-width: 100%;
        padding: 0 8px;
    }
}