.cms-content-page,
.cms-blog-page {
    color: #172033;
}

.cms-content-container {
    width: min(1120px, calc(100% - 36px));
    margin-inline: auto;
}

.cms-content-page {
    padding: 32px 0 76px;
}

.cms-breadcrumbs {
    margin-bottom: 30px;
    color: #637087;
    font-size: .9rem;
}

.cms-breadcrumbs a {
    color: #205bb0;
}

.cms-article-header {
    max-width: 850px;
    margin: 0 auto 28px;
}

.cms-article-header h1,
.cms-blog-hero h1 {
    margin: 0;
    color: #142845;
    font-size: clamp(2rem, 5vw, 3.35rem);
    line-height: 1.15;
}

.cms-eyebrow {
    margin: 0 0 10px;
    color: #2463c5;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.cms-article-date {
    margin: 13px 0 0;
    color: #637087;
}

.cms-featured-image {
    display: block;
    width: min(100%, 980px);
    max-height: 520px;
    margin: 0 auto 34px;
    border-radius: 14px;
    object-fit: cover;
}

.cms-rich-content {
    max-width: 850px;
    margin: 0 auto;
    color: #303b4d;
    font-size: 1.05rem;
    line-height: 1.85;
    overflow-wrap: anywhere;
}

.cms-rich-content p {
    margin: 0 0 1.35em;
}

.cms-rich-content h2,
.cms-rich-content h3,
.cms-rich-content h4 {
    margin: 1.5em 0 .6em;
    color: #142845;
    line-height: 1.3;
}

.cms-rich-content ul,
.cms-rich-content ol {
    margin: 0 0 1.35em;
    padding-left: 1.6em;
}

.cms-rich-content ul {
    list-style: disc;
}

.cms-rich-content ol {
    list-style: decimal;
}

.cms-rich-content li {
    margin: .35em 0;
    padding-left: .25em;
}

.cms-rich-content blockquote {
    margin: 1.5em 0;
    padding: 12px 18px;
    border-left: 4px solid #2463c5;
    background: #f1f6ff;
    color: #40516a;
}

.cms-rich-content a {
    color: #205bb0;
    text-decoration: underline;
    text-underline-offset: .15em;
}

.cms-rich-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.2em auto;
}

.cms-rich-content figure {
    max-width: 100%;
    margin: 1.5em auto;
}

.cms-rich-content figcaption {
    margin-top: 8px;
    color: #637087;
    font-size: .9rem;
    text-align: center;
}

.cms-rich-content table {
    width: 100%;
    margin: 1.5em 0;
    border-collapse: collapse;
    font-size: .95rem;
}

.cms-rich-content th,
.cms-rich-content td {
    padding: 10px 12px;
    border: 1px solid #dce3ed;
    text-align: left;
    vertical-align: top;
}

.cms-rich-content th {
    background: #f1f6ff;
    color: #142845;
}

.cms-rich-content hr {
    margin: 2em 0;
    border: 0;
    border-top: 1px solid #dce3ed;
}

.cms-tags,
.cms-back-link {
    max-width: 850px;
    margin: 30px auto 0;
}

.cms-tags {
    color: #536174;
}

.cms-back-link a,
.cms-category-list a {
    color: #205bb0;
}

.cms-message {
    padding: 35px 0;
    color: #536174;
    line-height: 1.7;
}

.cms-button {
    display: inline-block;
    margin-top: 8px;
    padding: 11px 17px;
    border-radius: 7px;
    background: #2463c5;
    color: #fff;
    text-decoration: none;
}

.cms-blog-hero {
    padding: clamp(48px, 8vw, 88px) 0;
    background: radial-gradient(circle at 85% 15%, #cfe1ff 0, transparent 32%), linear-gradient(120deg, #edf4ff, #f8faff 72%);
}

.cms-blog-hero .cms-content-container > p:last-child {
    max-width: 620px;
    margin: 16px 0 0;
    color: #536174;
    font-size: 1.08rem;
    line-height: 1.65;
}

.cms-blog-layout {
    padding-top: 38px;
    padding-bottom: 70px;
}

.cms-post-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.cms-post-card {
    overflow: hidden;
    border: 1px solid #e0e6ef;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 8px 24px rgb(20 40 69 / 6%);
}

.cms-post-card-link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.cms-post-card img,
.cms-post-placeholder {
    display: grid;
    width: 100%;
    height: 205px;
    object-fit: cover;
}

.cms-post-placeholder {
    place-items: center;
    background: linear-gradient(135deg, #dceaff, #f0f5fc);
    color: #2463c5;
    font-size: 1.6rem;
    font-weight: 800;
}

.cms-post-card-body {
    padding: 20px;
}

.cms-post-card time {
    color: #637087;
    font-size: .84rem;
}

.cms-post-card h2 {
    margin: 9px 0;
    color: #142845;
    font-size: 1.15rem;
    line-height: 1.4;
}

.cms-post-card p {
    margin: 0 0 15px;
    color: #536174;
    line-height: 1.6;
}

.cms-read-more {
    color: #205bb0;
    font-weight: 700;
}

.cms-category-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin-top: 38px;
    padding-top: 23px;
    border-top: 1px solid #e0e6ef;
}

.cms-category-list h2 {
    width: 100%;
    margin: 0;
    color: #142845;
    font-size: 1.1rem;
}

.cms-category-list a {
    text-decoration: none;
}

.cms-category-list span {
    color: #637087;
}

.cms-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 34px;
}

.cms-pagination a {
    padding: 9px 14px;
    border: 1px solid #cbd7e8;
    border-radius: 7px;
    color: #205bb0;
    text-decoration: none;
}

.cms-pagination span {
    color: #536174;
}

@media (max-width: 850px) {
    .cms-post-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .cms-content-container {
        width: min(100% - 28px, 1120px);
    }

    .cms-post-grid {
        grid-template-columns: 1fr;
    }

    .cms-post-card img,
    .cms-post-placeholder {
        height: 190px;
    }
}
