.blog-page,
.article-page {
    --blog-navy: #092a52;
    --blog-blue: #0969c7;
    --blog-blue-dark: #07539d;
    --blog-cyan: #2db8c4;
    --blog-text: #172b43;
    --blog-muted: #5d6f82;
    --blog-line: #dbe8f2;
    --blog-soft: #f3f8fc;
    --blog-surface: #fff;
    --blog-shadow: 0 18px 48px rgba(9, 42, 82, .08);
    --blog-shadow-raised: 0 24px 60px rgba(9, 42, 82, .14);
    color: var(--blog-text);
    background: linear-gradient(180deg, #f2f8fd 0, #fff 38rem);
}

.blog-page *,
.article-page * {
    box-sizing: border-box;
}

.blog-page :where(a, button, input),
.article-page :where(a, button) {
    -webkit-tap-highlight-color: transparent;
}

.blog-page :where(a, button, input):focus-visible,
.article-page :where(a, button):focus-visible {
    border-radius: 8px;
    outline: 3px solid rgba(45, 184, 196, .48);
    outline-offset: 3px;
}

.blog-hero {
    min-height: 22rem;
    display: flex;
    align-items: center;
    padding-block: clamp(3rem, 7vw, 6rem);
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    background:
        radial-gradient(circle at 12% 18%, rgba(77, 220, 220, .26), transparent 25rem),
        radial-gradient(circle at 88% 88%, rgba(71, 150, 255, .2), transparent 28rem),
        linear-gradient(132deg, #071b39 0%, #075db8 58%, #1685c5 100%);
}

.blog-hero::before {
    position: absolute;
    z-index: -1;
    width: min(34rem, 70vw);
    aspect-ratio: 1;
    inset-inline-end: -14rem;
    bottom: -25rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    box-shadow:
        0 0 0 5rem rgba(255, 255, 255, .025),
        0 0 0 10rem rgba(255, 255, 255, .02);
    content: "";
}

.blog-hero__inner {
    width: 100%;
    max-width: 58rem;
}

.blog-breadcrumb,
.article-breadcrumb {
    line-height: 1.65;
}

.blog-breadcrumb li[aria-current="page"],
.article-breadcrumb li[aria-current="page"] {
    overflow: hidden;
    max-width: min(34rem, 70vw);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blog-breadcrumb a,
.article-breadcrumb a {
    display: inline-flex;
    min-height: 2.25rem;
    align-items: center;
}

.blog-eyebrow {
    letter-spacing: .01em;
}

.blog-hero h1,
.article-hero h1 {
    letter-spacing: -.025em;
    text-wrap: balance;
}

.blog-hero .lead {
    max-width: 45rem;
    line-height: 1.9;
}

.blog-section {
    padding-block: clamp(2.5rem, 5vw, 5rem);
}

.blog-shell {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 19rem);
    gap: clamp(1.5rem, 3vw, 2.75rem);
}

.blog-main {
    min-width: 0;
}

.blog-section-head {
    align-items: center;
    margin-bottom: 1.25rem;
}

.blog-section-head h2,
.related-posts__head h2 {
    color: var(--blog-text);
    letter-spacing: -.015em;
}

.blog-section-head p {
    color: var(--blog-muted);
}

.blog-section-count {
    display: inline-flex;
    min-height: 2.25rem;
    align-items: center;
    justify-content: center;
    padding: .35rem .8rem;
    border: 1px solid #cfe1ee;
    border-radius: 999px;
    color: var(--blog-blue-dark);
    background: #eef7fd;
    font-size: .86rem;
    font-weight: 900;
    white-space: nowrap;
}

.featured-grid,
.blog-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.4rem);
}

.featured-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: clamp(2.25rem, 5vw, 4rem);
}

.blog-card,
.featured-grid .blog-card {
    display: flex;
    min-width: 0;
    height: 100%;
    flex-direction: column;
    overflow: clip;
    border: 1px solid var(--blog-line);
    border-radius: 1.35rem;
    background: var(--blog-surface);
    box-shadow: var(--blog-shadow);
    transform: translateZ(0);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.blog-card__media,
.featured-grid .blog-card__media {
    display: block;
    min-height: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-bottom: 1px solid #e4eef5;
    background:
        linear-gradient(135deg, rgba(9, 105, 199, .08), rgba(45, 184, 196, .08)),
        #eaf4fb;
}

.blog-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .35s ease;
}

.blog-card__content,
.featured-grid .blog-card__content {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    padding: clamp(1.05rem, 2.2vw, 1.45rem);
}

.blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .42rem;
    padding: 0;
    margin: 0 0 .8rem;
    color: var(--blog-muted);
    font-size: .79rem;
    font-weight: 800;
    list-style: none;
}

.blog-meta > li {
    display: inline-flex;
    min-height: 1.85rem;
    align-items: center;
    padding: .2rem .62rem;
    border: 1px solid #e1edf5;
    border-radius: 999px;
    background: #f4f8fb;
    white-space: nowrap;
}

.blog-meta a {
    color: var(--blog-blue-dark);
    text-decoration: none;
}

.blog-meta a:hover {
    text-decoration: underline;
    text-underline-offset: .2em;
}

.blog-card__title,
.featured-grid .blog-card__title {
    margin: 0 0 .65rem;
    color: var(--blog-text);
    font-size: clamp(1.08rem, 1.8vw, 1.3rem);
    line-height: 1.55;
    letter-spacing: -.01em;
    text-wrap: balance;
}

.blog-card__title a {
    color: inherit;
    text-decoration: none;
}

.blog-card__summary,
.featured-grid .blog-card__summary {
    display: -webkit-box;
    overflow: hidden;
    margin: 0 0 1rem;
    color: var(--blog-muted);
    line-height: 1.82;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.featured-grid .blog-card__summary {
    -webkit-line-clamp: 2;
}

.blog-card__link {
    display: inline-flex;
    width: fit-content;
    min-height: 2.75rem;
    align-items: center;
    gap: .5rem;
    margin-top: auto;
    color: var(--blog-blue-dark);
    font-weight: 900;
    text-decoration: none;
}

.blog-search {
    display: grid;
    grid-template-columns: minmax(12rem, .72fr) minmax(18rem, 1.28fr);
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    margin-bottom: 1.4rem;
    border: 1px solid var(--blog-line);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--blog-shadow);
}

.blog-search__intro {
    display: grid;
    gap: .15rem;
    padding-inline: .3rem;
}

.blog-search__intro label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    color: var(--blog-text);
    font-size: 1rem;
    font-weight: 900;
    white-space: normal;
}

.blog-search__intro span {
    color: var(--blog-muted);
    font-size: .84rem;
}

.blog-search__controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .65rem;
}

.blog-search__controls input {
    width: 100%;
    min-width: 0;
    min-height: 3rem;
    padding: .7rem .95rem;
    border: 1px solid #d5e4ef;
    border-radius: .8rem;
    color: var(--blog-text);
    background: #f7fafc;
    font: inherit;
}

.blog-search__controls input::placeholder {
    color: #788a9c;
}

.blog-search__controls input:focus {
    border-color: var(--blog-blue);
    outline: 3px solid rgba(9, 105, 199, .12);
    background: #fff;
}

.blog-search__controls .btn {
    min-width: 5.5rem;
    min-height: 3rem;
}

.search-summary {
    min-height: 3.25rem;
    border: 1px solid #d3e7f5;
    background: #edf7fe;
}

.blog-empty {
    min-height: 22rem;
    align-content: center;
    border: 1px dashed #a9c9df;
    background:
        radial-gradient(circle at 50% 0, rgba(45, 184, 196, .1), transparent 13rem),
        #fff;
}

.blog-empty__icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1.1rem;
    background: #e8f4fc;
}

.blog-pagination {
    padding-top: 1rem;
    border-top: 1px solid #e2ecf3;
}

.blog-pagination .btn {
    min-height: 2.75rem;
}

.blog-sidebar,
.article-sidebar {
    top: 6.5rem;
}

.blog-side-card,
.article-side-card {
    border: 1px solid var(--blog-line);
    border-radius: 1.25rem;
    box-shadow: var(--blog-shadow);
}

.blog-side-card h2,
.article-side-card h2 {
    color: var(--blog-text);
    letter-spacing: -.01em;
}

.blog-category-list a,
.article-category-list a {
    min-height: 2.8rem;
}

.blog-category-list__count,
.article-category-list__count {
    flex: 0 0 auto;
}

.blog-side-card--editorial {
    position: relative;
    overflow: hidden;
    padding-top: 4.25rem;
    background: linear-gradient(145deg, #fff, #f1f8fd);
}

.blog-side-card--editorial::after {
    position: absolute;
    width: 7rem;
    height: 7rem;
    inset-inline-end: -3.5rem;
    top: -3.5rem;
    border-radius: 50%;
    background: rgba(45, 184, 196, .11);
    content: "";
}

.blog-side-card__icon {
    position: absolute;
    display: grid;
    width: 2.4rem;
    height: 2.4rem;
    place-items: center;
    inset-inline-start: 1.3rem;
    top: 1.2rem;
    border-radius: .75rem;
    color: #fff;
    background: linear-gradient(135deg, var(--blog-blue), var(--blog-cyan));
    font-weight: 900;
}

.blog-side-card--editorial p {
    margin: 0;
    color: var(--blog-muted);
    line-height: 1.8;
}

.blog-side-card--cta {
    overflow: hidden;
    background:
        radial-gradient(circle at 0 0, rgba(45, 184, 196, .28), transparent 10rem),
        linear-gradient(145deg, #0969c7, #092a52);
}

.blog-side-card--cta .actions,
.article-side-card--action .actions {
    display: grid;
    gap: .6rem;
}

.article-hero {
    padding-block: clamp(2.75rem, 6vw, 5.5rem);
    border-bottom: 1px solid var(--blog-line);
    background:
        radial-gradient(circle at 8% 12%, rgba(45, 184, 196, .14), transparent 22rem),
        radial-gradient(circle at 92% 90%, rgba(9, 105, 199, .1), transparent 24rem),
        linear-gradient(145deg, #fff 0%, #edf7ff 100%);
}

.article-hero__inner {
    max-width: 65rem;
}

.article-kicker {
    border: 1px solid #c9e3f3;
    color: var(--blog-blue-dark);
    background: #eaf6fd;
}

.article-hero h1 {
    max-width: 58rem;
    color: var(--blog-text);
    line-height: 1.3;
}

.article-meta {
    gap: .55rem;
    margin-top: 1.35rem;
}

.article-meta li {
    min-height: 2rem;
    padding: .25rem .7rem;
    border: 1px solid #dbe8f1;
    border-radius: 999px;
    color: #52677d;
    background: rgba(255, 255, 255, .72);
}

.article-meta li::after {
    display: none;
}

.article-section {
    padding-block: clamp(2rem, 5vw, 4.75rem);
}

.article-layout {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 19rem);
    gap: clamp(1.5rem, 3vw, 2.75rem);
}

.article-card {
    border: 1px solid var(--blog-line);
    border-radius: 1.55rem;
    box-shadow: var(--blog-shadow);
}

.article-cover {
    aspect-ratio: 16 / 9;
    border-bottom: 1px solid #e2edf4;
}

.article-cover img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.article-content {
    padding: clamp(1.4rem, 4vw, 3.5rem);
}

.article-deck {
    max-width: 48rem;
    padding: 1rem 1.2rem;
    border: 0;
    border-inline-start: 4px solid var(--blog-blue);
    border-radius: .75rem;
    color: #344b64;
    background: #f5f9fc;
    font-size: clamp(1.06rem, 2vw, 1.23rem);
    line-height: 1.95;
}

.article-toc {
    display: grid;
    grid-template-columns: minmax(9rem, .38fr) minmax(0, 1fr);
    gap: 1.25rem;
    max-width: 48rem;
    padding: clamp(1.1rem, 2vw, 1.45rem);
    margin: 0 auto 2.25rem;
    border: 1px solid #d4e5f1;
    border-radius: 1rem;
    background: linear-gradient(145deg, #f8fbfd, #eef7fd);
}

.article-toc__eyebrow,
.article-trust__eyebrow {
    margin: 0 0 .25rem;
    color: var(--blog-blue-dark);
    font-size: .78rem;
    font-weight: 900;
}

.article-toc h2 {
    margin: 0;
    color: var(--blog-text);
    font-size: 1.12rem;
}

.article-toc ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem 1.25rem;
    padding: 0;
    margin: 0;
    counter-reset: article-toc;
    list-style: none;
}

.article-toc li {
    position: relative;
    min-width: 0;
    padding-inline-start: 1.6rem;
    counter-increment: article-toc;
}

.article-toc li::before {
    position: absolute;
    inset-inline-start: 0;
    top: .22rem;
    color: var(--blog-blue);
    content: counter(article-toc, decimal-leading-zero);
    font-size: .72rem;
    font-weight: 900;
}

.article-toc__subitem {
    margin-inline-start: .6rem;
}

.article-toc a {
    display: inline-flex;
    min-height: 2.1rem;
    align-items: center;
    color: #35516d;
    font-size: .88rem;
    font-weight: 800;
    line-height: 1.5;
    text-decoration: none;
}

.article-toc a:hover {
    color: var(--blog-blue-dark);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.article-prose {
    max-width: 46rem;
    color: #233a52;
    font-size: clamp(1.02rem, 1.45vw, 1.11rem);
    line-height: 2.05;
}

.article-heading-anchor {
    display: block;
    scroll-margin-top: 7rem;
}

.article-heading-anchor:focus {
    outline: none;
}

.article-prose h2,
.article-prose h3 {
    color: var(--blog-text);
}

.article-prose h2 {
    position: relative;
    padding-top: .8rem;
    margin-top: 2.8rem;
    font-size: clamp(1.42rem, 2.8vw, 1.85rem);
}

.article-prose h2::before {
    position: absolute;
    width: 2.7rem;
    height: .22rem;
    inset-inline-start: 0;
    top: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--blog-blue), var(--blog-cyan));
    content: "";
}

.article-prose h3 {
    color: #153f68;
    font-size: clamp(1.18rem, 2vw, 1.4rem);
}

.article-prose p {
    margin-bottom: 1.3rem;
}

.article-prose ul,
.article-prose ol {
    padding: 1rem 2.75rem 1rem 1rem;
    border: 1px solid #e0ebf3;
    border-radius: .9rem;
    background: #f8fbfd;
}

.article-prose li::marker {
    color: var(--blog-blue);
    font-weight: 900;
}

.article-prose blockquote {
    border-inline-start-color: var(--blog-cyan);
    background: #eef9f8;
}

.article-tags {
    gap: .55rem;
    max-width: 46rem;
}

.article-tags a {
    min-height: 2.4rem;
    padding-inline: .8rem;
    border: 1px solid #d7e8f4;
    background: #f0f8fd;
}

.article-trust {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.1rem;
    max-width: 46rem;
    padding: clamp(1.2rem, 3vw, 1.7rem);
    margin: 2rem auto 0;
    border: 1px solid #d2e4ef;
    border-radius: 1.1rem;
    background:
        radial-gradient(circle at 100% 0, rgba(45, 184, 196, .1), transparent 12rem),
        #f9fcfe;
}

.article-trust__avatar {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    place-items: center;
    border-radius: 1rem;
    color: #fff;
    background: linear-gradient(135deg, var(--blog-blue), var(--blog-cyan));
    box-shadow: 0 10px 24px rgba(9, 105, 199, .18);
    font-size: 1.35rem;
    font-weight: 900;
}

.article-trust h2 {
    margin: 0 0 .45rem;
    color: var(--blog-text);
    font-size: 1.25rem;
}

.article-trust__content > p:not(.article-trust__eyebrow) {
    margin: 0;
    color: var(--blog-muted);
    line-height: 1.8;
}

.article-trust__links {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .9rem;
    margin-top: .7rem;
}

.article-trust__links a {
    color: var(--blog-blue-dark);
    font-size: .86rem;
    font-weight: 900;
    text-decoration: underline;
    text-decoration-color: rgba(9, 105, 199, .32);
    text-underline-offset: .25rem;
}

.article-trust__facts {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.25rem;
    padding-top: .85rem;
    margin: .85rem 0 0;
    border-top: 1px solid #dfebf3;
}

.article-trust__facts div {
    display: flex;
    gap: .35rem;
    align-items: baseline;
}

.article-trust__facts dt {
    color: #6d7f91;
    font-size: .78rem;
    font-weight: 800;
}

.article-trust__facts dd {
    margin: 0;
    color: #2e4862;
    font-size: .82rem;
    font-weight: 900;
}

.article-cta {
    max-width: 46rem;
    margin-inline: auto;
    background:
        radial-gradient(circle at 5% 5%, rgba(45, 184, 196, .3), transparent 12rem),
        linear-gradient(135deg, #0969c7, #092a52);
}

.article-side-card--action {
    border-color: #d0e5f3;
    background: linear-gradient(145deg, #f6fbfe, #eaf6fd);
}

.related-posts {
    margin-top: clamp(2.75rem, 6vw, 5rem);
}

.related-grid {
    gap: clamp(1rem, 2vw, 1.4rem);
}

.related-card {
    height: 100%;
    border: 1px solid var(--blog-line);
    border-radius: 1.25rem;
    box-shadow: var(--blog-shadow);
}

.related-card__media {
    aspect-ratio: 16 / 9;
    border-bottom: 1px solid #e2edf4;
}

.related-card__content {
    padding: 1.15rem;
}

.related-card time {
    color: var(--blog-muted);
}

.related-card h3 {
    color: var(--blog-text);
    line-height: 1.65;
    text-wrap: balance;
}

@media (hover: hover) and (pointer: fine) {
    .blog-card:hover,
    .related-card:hover {
        border-color: rgba(9, 105, 199, .3);
        box-shadow: var(--blog-shadow-raised);
        transform: translateY(-4px);
    }

    .blog-card:hover .blog-card__media img,
    .related-card:hover .related-card__media img {
        transform: scale(1.035);
    }
}

@media (max-width: 1100px) {
    .blog-shell,
    .article-layout {
        grid-template-columns: 1fr;
    }

    .blog-sidebar,
    .article-sidebar {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .blog-side-card--cta,
    .article-side-card--action {
        align-self: stretch;
    }
}

@media (max-width: 900px) {
    .featured-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .article-toc {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .blog-hero {
        min-height: 0;
        padding-block: 2.6rem 3rem;
    }

    .featured-grid,
    .blog-list,
    .related-grid {
        grid-template-columns: 1fr;
    }

    .blog-search {
        grid-template-columns: 1fr;
    }

    .blog-sidebar,
    .article-sidebar {
        grid-template-columns: 1fr;
    }

    .article-cover,
    .article-cover img {
        aspect-ratio: 16 / 9;
    }

    .article-toc ol {
        grid-template-columns: 1fr;
    }

    .article-trust {
        grid-template-columns: 1fr;
    }

    .article-trust__avatar {
        width: 3rem;
        height: 3rem;
        border-radius: .85rem;
    }
}

@media (max-width: 560px) {
    .blog-section {
        padding-block: 2rem 3rem;
    }

    .blog-section-head,
    .related-posts__head {
        align-items: flex-start;
        flex-direction: column;
    }

    .blog-section-count {
        align-self: flex-start;
    }

    .blog-search {
        padding: .85rem;
        border-radius: 1rem;
    }

    .blog-search__controls {
        grid-template-columns: 1fr;
    }

    .blog-search__controls .btn {
        width: 100%;
    }

    .search-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .blog-card,
    .featured-grid .blog-card,
    .related-card {
        border-radius: 1.05rem;
    }

    .blog-card__content,
    .featured-grid .blog-card__content {
        padding: 1rem;
    }

    .blog-pagination {
        grid-template-columns: 1fr 1fr;
    }

    .blog-pagination__status {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .blog-pagination .btn {
        width: 100%;
        padding-inline: .65rem;
    }

    .article-hero {
        padding-block: 2.25rem 2.65rem;
    }

    .article-meta {
        align-items: flex-start;
        flex-direction: row;
    }

    .article-meta li {
        width: auto;
    }

    .article-content {
        padding: 1.25rem 1rem 1.5rem;
    }

    .article-deck {
        padding: .9rem 1rem;
        margin-bottom: 1.5rem;
    }

    .article-toc {
        padding: 1rem;
        margin-bottom: 1.75rem;
    }

    .article-prose {
        line-height: 1.95;
    }

    .article-prose h2 {
        margin-top: 2.3rem;
    }

    .article-prose ul,
    .article-prose ol {
        padding: .85rem 2.25rem .85rem .75rem;
    }

    .article-trust,
    .article-cta {
        padding: 1rem;
        border-radius: 1rem;
    }

    .article-trust__facts {
        display: grid;
        grid-template-columns: 1fr;
    }

    .article-cta {
        grid-template-columns: 1fr;
    }

    .article-cta .actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .article-cta .btn {
        width: 100%;
    }
}

@media (max-width: 380px) {
    .blog-breadcrumb li[aria-current="page"],
    .article-breadcrumb li[aria-current="page"] {
        max-width: 12rem;
    }

    .blog-meta > li,
    .article-meta li {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .blog-pagination {
        grid-template-columns: 1fr;
    }

    .blog-pagination__status {
        grid-column: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .blog-card,
    .blog-card__media img,
    .related-card,
    .related-card__media img {
        transition: none;
    }
}

@media (forced-colors: active) {
    .blog-card,
    .related-card,
    .blog-side-card,
    .article-card,
    .article-side-card,
    .article-toc,
    .article-trust {
        border: 1px solid CanvasText;
        box-shadow: none;
    }

    .article-prose h2::before {
        background: Highlight;
    }
}

@media print {
    .blog-page,
    .article-page {
        background: #fff;
    }

    .blog-card,
    .related-card,
    .article-card,
    .article-toc,
    .article-trust {
        box-shadow: none;
    }

    .article-toc,
    .article-trust {
        break-inside: avoid;
    }
}