.seo-page, .seo-directory-page, .knowledge-article {
    background: #fff;
    color: #17324d
}

.seo-hero, .knowledge-article-hero {
    padding: 72px 0;
    background: linear-gradient(135deg,#f1fbf9,#eef4fb)
}

.seo-hero-grid, .seo-two-column, .knowledge-article-layout {
    display: grid;
    grid-template-columns: minmax(0,1.5fr) minmax(280px,.7fr);
    gap: 34px;
    align-items: center
}

.seo-hero h1,
.seo-directory-hero h1,
.knowledge-article-hero h1 {
    font-size: clamp(34px, 5vw, 60px);
    line-height: 1.2;
    margin: 14px 0;
    color: #022964;
}

.seo-hero p, .seo-directory-hero p, .knowledge-article-hero p {
    font-size: 19px;
    line-height: 1.9;
    max-width: 860px
}

.seo-breadcrumb {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    font-size: 14px;
    margin-bottom: 20px
}

.seo-eyebrow, .seo-directory-hero > span, .seo-section-title > span {
    color: #078f88;
    font-weight: 800
}

.seo-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px
}

.seo-summary-card, .seo-process-card {
    background: #fff;
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 18px 45px rgba(2,41,100,.10)
}

    .seo-summary-card i {
        font-size: 42px;
        color: #01b0a9
    }

.seo-section {
    padding: 72px 0
}

.seo-soft-section {
    background: #f6f9fc
}

.seo-section-title {
    max-width: 800px;
    margin-bottom: 30px
}

    .seo-section-title h2 {
        font-size: 36px;
        color: #022964;
        margin: 8px 0
    }

.seo-benefit-grid, .seo-related-grid, .seo-directory-grid, .knowledge-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 20px
}

    .seo-benefit-grid article, .seo-related-grid article, .seo-directory-grid article, .knowledge-grid article {
        border: 1px solid #dfe9ef;
        border-radius: 18px;
        padding: 24px;
        background: #fff
    }

    .seo-benefit-grid i {
        font-size: 28px;
        color: #01b0a9
    }

    .seo-benefit-grid h3, .seo-related-grid h3, .seo-directory-grid h2, .knowledge-grid h2 {
        font-size: 20px;
        color: #022964;
        margin: 12px 0
    }

.seo-check-list {
    padding: 0;
    list-style: none
}

    .seo-check-list li {
        margin: 12px 0;
        padding-inline-start: 26px;
        position: relative
    }

        .seo-check-list li:before {
            content: '✓';
            position: absolute;
            inset-inline-start: 0;
            color: #01b0a9;
            font-weight: 900
        }

.seo-process-card ol {
    list-style: none;
    padding: 0
}

.seo-process-card li {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 18px 0
}

.seo-process-card strong {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #01b0a9;
    color: white
}

.seo-directory-page {
    padding: 64px 0
}

.seo-directory-hero {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 45px
}

.knowledge-grid {
    grid-template-columns: repeat(3,minmax(0,1fr))
}

.knowledge-article-layout {
    align-items: start;
    padding-top: 60px;
    padding-bottom: 70px
}

    .knowledge-article-layout main {
        font-size: 18px;
        line-height: 2
    }

        .knowledge-article-layout main h2 {
            color: #022964;
            margin-top: 34px
        }

    .knowledge-article-layout aside {
        position: sticky;
        top: 24px;
        border: 1px solid #dfe9ef;
        border-radius: 18px;
        padding: 22px
    }

        .knowledge-article-layout aside a {
            display: block;
            padding: 11px 0;
            border-bottom: 1px solid #edf2f5
        }

.article-cta {
    background: #eef9f8;
    border-radius: 20px;
    padding: 26px;
    margin-top: 35px
}

@media(max-width:991px) {
    .seo-hero-grid, .seo-two-column, .knowledge-article-layout {
        grid-template-columns: 1fr
    }

    .seo-benefit-grid, .seo-related-grid, .seo-directory-grid, .knowledge-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .knowledge-article-layout aside {
        position: static
    }
}

@media(max-width:640px) {
    .seo-benefit-grid, .seo-related-grid, .seo-directory-grid, .knowledge-grid {
        grid-template-columns: 1fr
    }

    .seo-section {
        padding: 48px 0
    }

    .seo-hero {
        padding: 48px 0
    }
}

/* =========================================================
   SEO pages: reliable RTL/LTR alignment
   ========================================================= */
.seo-page,
.seo-directory-page,
.knowledge-article {
    direction: inherit;
}

.seo-directory-grid article,
.seo-benefit-grid article,
.seo-related-grid article,
.knowledge-grid article,
.seo-summary-card,
.seo-process-card,
.knowledge-article-layout main,
.knowledge-article-layout aside {
    direction: inherit;
    text-align: start;
}

    .seo-directory-grid article > i,
    .seo-benefit-grid article > i {
        display: block;
        text-align: start;
    }

html[dir="rtl"] .seo-page,
html[dir="rtl"] .seo-directory-page,
html[dir="rtl"] .knowledge-article,
.seo-page[dir="rtl"],
.seo-directory-page[dir="rtl"],
.knowledge-article[dir="rtl"] {
    direction: rtl;
}

    html[dir="rtl"] .seo-directory-grid article,
    html[dir="rtl"] .seo-benefit-grid article,
    html[dir="rtl"] .seo-related-grid article,
    html[dir="rtl"] .knowledge-grid article,
    html[dir="rtl"] .seo-summary-card,
    html[dir="rtl"] .seo-process-card,
    html[dir="rtl"] .knowledge-article-layout main,
    html[dir="rtl"] .knowledge-article-layout aside,
    .seo-page[dir="rtl"] .seo-benefit-grid article,
    .seo-page[dir="rtl"] .seo-related-grid article,
    .seo-page[dir="rtl"] .seo-summary-card,
    .seo-page[dir="rtl"] .seo-process-card,
    .seo-directory-page[dir="rtl"] .seo-directory-grid article,
    .knowledge-article[dir="rtl"] .knowledge-article-layout main,
    .knowledge-article[dir="rtl"] .knowledge-article-layout aside {
        text-align: right;
    }

html[dir="ltr"] .seo-page,
html[dir="ltr"] .seo-directory-page,
html[dir="ltr"] .knowledge-article,
.seo-page[dir="ltr"],
.seo-directory-page[dir="ltr"],
.knowledge-article[dir="ltr"] {
    direction: ltr;
}

    html[dir="ltr"] .seo-directory-grid article,
    html[dir="ltr"] .seo-benefit-grid article,
    html[dir="ltr"] .seo-related-grid article,
    html[dir="ltr"] .knowledge-grid article,
    html[dir="ltr"] .seo-summary-card,
    html[dir="ltr"] .seo-process-card,
    html[dir="ltr"] .knowledge-article-layout main,
    html[dir="ltr"] .knowledge-article-layout aside,
    .seo-page[dir="ltr"] .seo-benefit-grid article,
    .seo-page[dir="ltr"] .seo-related-grid article,
    .seo-page[dir="ltr"] .seo-summary-card,
    .seo-page[dir="ltr"] .seo-process-card,
    .seo-directory-page[dir="ltr"] .seo-directory-grid article,
    .knowledge-article[dir="ltr"] .knowledge-article-layout main,
    .knowledge-article[dir="ltr"] .knowledge-article-layout aside {
        text-align: left;
    }

/* Keep the directory intro centered in both languages. */
.seo-directory-hero {
    text-align: center !important;
}