.blog-page {
    --omp-navy: #053463;
    --omp-orange: #F57502;
    color: var(--omp-navy);
}
.blog-page:not(.blog-article) { background: #f4f7fb; }
.blog-kicker { color: var(--omp-orange); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; margin: 0 0 .35rem; }
.blog-hero { max-width: 40rem; margin-bottom: .25rem; }
.blog-hero h1, .blog-article h1, .blog-body h2, .blog-body h3 { color: var(--omp-navy); }
.blog-hero h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.15; margin: 0 0 .6rem; }
.blog-lead { max-width: 40rem; margin: 0; color: #3d4d63; font-size: 1.05rem; }
.blog-tools { display: flex; flex-direction: column; gap: 1rem; margin: 1.5rem 0 1.25rem; }
.blog-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.blog-chip { border: 1px solid hsl(var(--border)); border-radius: 999px; padding: .55rem .9rem; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; color: var(--omp-navy); background: #fff; font-size: .92rem; }
.blog-chip.is-active, .blog-chip:hover { background: var(--omp-orange); color: #fff; border-color: var(--omp-orange); }
.blog-chip:focus-visible, .blog-search button:focus-visible, .blog-card-link:focus-visible { outline: 2px solid var(--omp-orange); outline-offset: 2px; }
.blog-search { display: flex; align-items: center; gap: .5rem; max-width: 28rem; background: #fff; border: 1px solid hsl(var(--border)); border-radius: 999px; padding: .25rem .25rem .25rem .9rem; }
.blog-search i { color: #6b7280; }
.blog-search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: .4rem 0; outline: none; }
.blog-search button { border: 0; border-radius: 999px; background: var(--omp-navy); color: #fff; font-weight: 700; min-height: 44px; padding: .45rem .9rem; }
.blog-grid { display: grid; grid-template-columns: 1fr; gap: 1.15rem; justify-content: start; }
@media (min-width: 768px) { .blog-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.75rem), 1fr)); } }
.blog-card.is-feature, .blog-grid.is-single .blog-card { grid-column: 1 / -1; }
.blog-card { background: #fff; border: 1px solid hsl(var(--border)); border-radius: 1.15rem; box-shadow: var(--shadow-card); overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.blog-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover, 0 12px 40px -8px hsl(210 50% 15% / 0.15)); }
.blog-card-link { color: inherit; display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.blog-card-link img, .blog-card-fallback { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 30%; display: block; }
.blog-card-fallback { display: grid; place-items: end start; padding: 1rem 1.15rem; background: linear-gradient(145deg, #053463, #1d5a93); color: #fff; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .8rem; }
.blog-card.is-feature .blog-card-link img,
.blog-card.is-feature .blog-card-fallback { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 30%; height: auto; max-width: none; margin: 0; border-radius: 0; }
@media (min-width: 1024px) {
    .blog-card.is-feature .blog-card-link { display: grid; grid-template-columns: 3fr 2fr; align-items: center; }
    .blog-card.is-feature .blog-card-link img,
    .blog-card.is-feature .blog-card-fallback { height: 100%; max-height: 460px; border-radius: 0; }
}
.blog-card-body { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.2rem 1.2rem; flex: 1; }
.blog-card-cat { color: var(--omp-orange); font-size: .8rem; font-weight: 700; margin: 0; letter-spacing: .04em; text-transform: uppercase; }
.blog-card h2, .blog-card h3 { font-size: 1.15rem; margin: 0; line-height: 1.3; }
.blog-card.is-feature h2 { font-size: 1.45rem; }
.blog-card-excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; color: #3d4d63; font-size: .9375rem; line-height: 1.5; }
.blog-card-more { color: var(--omp-orange); font-weight: 700; margin-top: auto; padding-top: .4rem; }
.blog-card.is-feature .blog-card-more { margin-top: .35rem; }
.blog-card-meta { color: #4b5563; font-size: .85rem; margin: 0; }
.blog-empty { background: #fff; border: 1px dashed hsl(var(--border)); border-radius: 1.15rem; padding: 1.5rem 1.25rem; }
.blog-empty h2 { font-size: 1.25rem; margin: 0 0 .4rem; }
.blog-pager { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.5rem 0; }
.blog-pager a { border: 1px solid hsl(var(--border)); border-radius: .5rem; min-height: 44px; min-width: 44px; padding: .55rem .7rem; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: var(--omp-navy); background: #fff; }
.blog-pager a[aria-current="page"] { background: var(--omp-navy); color: #fff; }
.blog-page > .container > .blog-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.blog-related .blog-card-link { padding: 1rem 1.2rem 1.2rem; gap: .35rem; }
.blog-cta { background: var(--omp-navy); color: #fff; border-radius: 1.15rem; padding: 1.4rem 1.5rem; margin: 1.75rem 0 0; }
.blog-cta h2 { color: #fff; font-size: 1.35rem; margin: 0 0 .35rem; }
.blog-cta p { margin: 0; color: #d7e2ef; }
.blog-cta .btn { background: var(--omp-orange); border-color: var(--omp-orange); color: #fff; font-weight: 700; }
.blog-cta .btn:hover { background: #d96500; border-color: #d96500; }
.blog-layout { display: grid; gap: 2rem; align-items: start; grid-template-columns: minmax(0, 1fr); }
.blog-main, .blog-article-head, .blog-body { min-width: 0; max-width: 100%; }
@media (min-width: 1100px) {
    .blog-layout { grid-template-columns: minmax(0, 46rem) 17rem; justify-content: center; }
    .blog-toc-mobile { display: none; }
    .blog-body { max-width: 46rem; }
}
.blog-article { background: #f4f7fb; }
.blog-article h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.2; margin: .15rem 0 .55rem; }
.blog-body { font-size: 1.125rem; line-height: 1.65; }
.blog-body p, .blog-body li { font-size: 1.125rem; line-height: 1.65; }
.blog-body p { margin: 0 0 1rem; }
.blog-body h2 { scroll-margin-top: 5.5rem; margin: 2.1rem 0 .65rem; font-size: 1.35rem; line-height: 1.3; }
.blog-body h3 { scroll-margin-top: 5.5rem; margin: 1.35rem 0 .4rem; font-size: 1.08rem; line-height: 1.35; }
.blog-body ul, .blog-body ol { margin: 0 0 1.1rem; padding-left: 1.25rem; }
.blog-body li { margin: .4rem 0; }
.blog-body li::marker { color: var(--omp-orange); }
.blog-body a:not(.btn) { color: #0c4a7a; text-decoration: underline; text-underline-offset: .15em; overflow-wrap: anywhere; }
.blog-body a:not(.btn):hover { color: var(--omp-orange); }
.blog-body blockquote { margin: 1rem 0; padding: .2rem 0 .2rem 1rem; border-left: 3px solid var(--omp-orange); color: #3d4d63; }
.blog-body code { font-size: .92em; background: #eef2f6; border-radius: .3rem; padding: .05rem .3rem; }
.blog-body pre:not(.blog-document) { background: #053463; color: #fff; border-radius: .8rem; padding: .9rem 1rem; overflow: auto; }
.blog-body pre:not(.blog-document) code { background: transparent; color: inherit; padding: 0; }
.blog-body pre.blog-document {
    background: #fff;
    color: #1c2834;
    border: 1px solid #d7e0ea;
    border-radius: .25rem;
    box-shadow: 0 12px 28px -20px rgba(5, 52, 99, .55);
    padding: 1.6rem 1.7rem;
    margin: 1.2rem 0 1.4rem;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.6;
    white-space: pre-wrap;
    text-decoration: none;
}
.blog-body pre.blog-document code {
    font-family: inherit;
    font-size: 1rem;
    line-height: inherit;
    background: transparent;
    color: inherit;
    border: 0;
    padding: 0;
    white-space: pre-wrap;
    word-break: normal;
    text-decoration: none;
}
.blog-table-wrap { overflow-x: auto; max-width: 100%; margin: 0 0 1.1rem; -webkit-overflow-scrolling: touch; }
.blog-body table { width: max-content; min-width: 100%; border-collapse: collapse; margin: 0; font-size: .95rem; }
.blog-body pre.blog-document mark { background: #fff3bf; color: inherit; padding: 0 .15em; border-radius: .15em; }
.blog-body th, .blog-body td { border-bottom: 1px solid hsl(var(--border)); padding: .45rem .4rem; text-align: left; vertical-align: top; }
.blog-body input[type="checkbox"] { accent-color: var(--omp-orange); margin-right: .4rem; }
.blog-body li:has(input[type="checkbox"]) { list-style: none; margin-left: -1.15rem; }
.blog-article-head { display: grid; gap: 1rem; margin-bottom: 1.35rem; min-width: 0; }
.blog-article-head .blog-byline { margin-bottom: 0; }
.blog-hero-frame { margin: 0; max-width: 100%; }
.blog-hero-frame .blog-hero-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: 50% 35%;
    border-radius: 1rem;
    margin: 0;
}
.blog-body img, .blog-md-preview img {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: none;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    margin: 1rem 0;
    cursor: zoom-in;
}
.blog-breadcrumb { font-size: .92rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-bottom: 1rem; color: #6b7280; }
.blog-breadcrumb a { color: #3d4d63; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.blog-author-bio { margin: .35rem 0 0; color: #3d4d63; font-size: .95rem; }
.blog-breadcrumb a:hover { color: var(--omp-orange); }
.blog-byline { color: #4b5563; margin: 0 0 1rem; }
.blog-staff-views { margin: .35rem 0 0; color: #6b7280; font-size: .85rem; }
.blog-side { display: none; }
@media (min-width: 1100px) {
    .blog-side { display: flex; flex-direction: column; gap: .75rem; position: sticky; top: 5.5rem; max-height: calc(100vh - 6.5rem); }
    .blog-toc, .blog-side-cta { background: #fff; border: 1px solid hsl(var(--border)); border-radius: 1.15rem; padding: 1rem; }
    .blog-toc { overflow: auto; }
}
.blog-side-cta { background: #fff7f0; }
.blog-toc h2, .blog-side-cta h2 { font-size: 1rem; margin: 0 0 .7rem; color: var(--omp-navy); }
.blog-toc ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .1rem; }
.blog-toc a { display: flex; align-items: center; min-height: 44px; color: #3d4d63; text-decoration: none; font-size: .9rem; line-height: 1.35; padding: .55rem .5rem; border-radius: .5rem; }
.blog-toc a:hover, .blog-toc a.is-active { background: #f4f7fb; color: var(--omp-navy); }
.blog-toc a.is-active { color: var(--omp-orange); font-weight: 700; }
.blog-toc-mobile { background: #fff; border: 1px solid hsl(var(--border)); border-radius: .9rem; padding: .75rem 1rem; margin: 0 0 1rem; }
.blog-toc-mobile summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.blog-side-cta p { color: #3d4d63; margin: 0 0 .8rem; }
.blog-side-cta .btn { width: 100%; }
.blog-cta.is-inline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; background: #fff7f0; color: var(--omp-navy); border: 1px solid #f3d2b0; margin: 1.5rem 0; }
.blog-cta.is-inline .blog-cta-title { color: var(--omp-navy); font-weight: 700; margin: 0 0 .2rem; }
.blog-cta.is-inline p { color: #3d4d63; margin: 0; }
.blog-article .blog-cta:not(.is-inline) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.blog-faq { margin-top: 2rem; }
.blog-faq > h2 { font-size: 1.35rem; margin: 0 0 .8rem; }
.blog-faq .accordion-item { border: 1px solid hsl(var(--border)); border-radius: .8rem; overflow: hidden; margin-bottom: .5rem; background: #fff; }
.blog-faq .accordion-button { color: var(--omp-navy); font-weight: 700; background: #fff; box-shadow: none; }
.blog-faq .accordion-button:not(.collapsed) { background: #f4f7fb; color: var(--omp-navy); }
.blog-faq .accordion-body { color: #3d4d63; }
.blog-share a, .blog-copy, .blog-share-native { border: 1px solid hsl(var(--border)); background: #fff; border-radius: 999px; min-height: 44px; padding: .55rem .9rem; display: inline-flex; align-items: center; text-decoration: none; font-weight: 700; }
.blog-share a:hover, .blog-copy:hover, .blog-share-native:hover { border-color: var(--omp-orange); color: var(--omp-orange); }
.blog-legal { background: #fff; border-radius: .8rem; padding: .85rem 1rem; margin-top: 1.5rem; }
.blog-video { margin: 1.5rem 0; }
.blog-video-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 1rem; }
.blog-callout { border-radius: .9rem; padding: .9rem 1rem; margin: 1rem 0; }
.blog-callout.is-summary { background: #fff; border-left: 3px solid var(--omp-navy); }
.blog-callout.is-warning { background: #fff7f0; border-left: 3px solid var(--omp-orange); }
.blog-figure { margin: 2rem 0; max-width: 100%; }
.blog-figure img { margin: 0; }
.blog-figure figcaption { margin-top: .6rem; font-size: .875rem; line-height: 1.45; color: #64748b; text-align: center; }
.blog-figure .zoom-hint { display: block; margin-top: .35rem; font-size: .75rem; font-weight: 600; color: #64748b; text-align: center; }
.blog-figure.is-screenshot { overflow: hidden; }
.blog-figure.is-screenshot::before {
    content: "";
    display: block;
    height: 28px;
    border-radius: 12px 12px 0 0;
    background:
        radial-gradient(circle at 14px 14px, #f87171 4px, transparent 5px),
        radial-gradient(circle at 30px 14px, #fbbf24 4px, transparent 5px),
        radial-gradient(circle at 46px 14px, #34d399 4px, transparent 5px),
        #f1f5f9;
}
.blog-figure.is-screenshot img {
    width: 100%;
    max-width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 1px 3px rgb(15 23 42 / .08), 0 12px 32px rgb(15 23 42 / .10);
}
.blog-video-facade { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; background: #111; border-radius: 1rem; overflow: hidden; color: #fff; }
.blog-video-facade img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; opacity: .9; margin: 0; }
.blog-video-play { position: absolute; left: 50%; top: 50%; width: 4.25rem; height: 4.25rem; transform: translate(-50%, -50%); border-radius: 999px; background: #fff; }
.blog-video-play::before { content: ""; position: absolute; left: 1.7rem; top: 1.35rem; border-style: solid; border-width: .75rem 0 .75rem 1.2rem; border-color: transparent transparent transparent #053463; }
.blog-video-label { margin: .45rem 0 0; font-weight: 700; color: var(--omp-navy); }
.blog-share { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 1.2rem 0; }
.blog-share a, .blog-copy, .blog-share-native { color: var(--omp-navy); gap: .4rem; }
.blog-share-status { color: #3d4d63; font-size: .9rem; min-height: 1.2em; }
@media (max-width: 640px) {
    .blog-share.is-native a { display: none; }
}
.blog-lightbox {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.blog-lightbox::backdrop { background: rgb(15 23 42 / .85); }
.blog-lightbox img {
    display: block;
    width: auto;
    height: auto;
    max-width: 96vw;
    max-height: 94vh;
    margin: 0;
    object-fit: contain;
    object-position: center;
    cursor: default;
}
.blog-lightbox button { position: fixed; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: #053463; font-size: 1.2rem; }
.blog-legal { font-size: .9rem; color: #4b5563; }
.blog-preview-flag { background: #fff4e8; border-radius: .6rem; padding: .5rem .8rem; }
.blog-md-bar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.blog-md-toolbar, .blog-md-modes { display: flex; flex-wrap: wrap; gap: .3rem; }
.blog-md-toolbar button, .blog-md-modes button { border: 1px solid hsl(var(--border)); background: #fff; color: var(--omp-navy, #053463); border-radius: .5rem; min-width: 2rem; min-height: 2rem; padding: .2rem .45rem; line-height: 1; }
.blog-md-toolbar button:hover, .blog-md-modes button:hover, .blog-md-modes button[aria-pressed="true"] { background: #053463; color: #fff; border-color: #053463; }
.blog-md-assist { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .6rem; }
.blog-md-assist-label { margin: 0; }
.blog-md-assist .form-control { max-width: 22rem; }
.blog-md-panes { display: grid; grid-template-columns: 1fr; gap: .75rem; align-items: stretch; }
@media (min-width: 992px) { .blog-md.is-split .blog-md-panes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.blog-md.is-write .blog-md-preview, .blog-md.is-preview .blog-md-editor { display: none; }
.blog-md-editor { min-height: 28rem; resize: vertical; line-height: 1.5; width: 100%; }
.blog-md-preview { min-height: 28rem; max-height: 40rem; overflow: auto; background: #fff; border: 1px solid hsl(var(--border)); border-radius: .75rem; padding: 1rem 1.15rem; }
.blog-md-empty { color: #6b7280; margin: 0; }
.blog-google { background: #fff; border: 1px solid hsl(var(--border)); border-radius: .75rem; padding: .75rem 1rem; margin-top: .75rem; }
.blog-google strong { display: block; color: #1a0dab; font-weight: 500; }
.blog-google-url { display: block; color: #006621; font-size: .85rem; margin: .15rem 0; }
.blog-google p { margin: 0; color: #3d4d63; }
#meta-title-count.is-over, #meta-desc-count.is-over { color: #9a3412; font-weight: 700; }
.home-blog { padding: 4rem 0; }
.home-blog > .container > .blog-kicker { text-align: center; }
.home-blog h2, .home-blog .section-description { text-align: center; }
.home-blog-grid { display: grid; gap: 1.15rem; margin-top: 1.5rem; }
@media (min-width: 768px) { .home-blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .home-blog-grid .home-blog-extra { display: none; } }
.home-blog-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid hsl(var(--border)); border-radius: 1.15rem; box-shadow: var(--shadow-card); overflow: hidden; color: inherit; text-decoration: none; }
.home-blog-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 30%; display: block; }
.home-blog-card div { padding: 1rem 1.15rem 1.2rem; }
.home-blog-card h3 { color: var(--omp-navy); font-size: 1.1rem; }
.home-blog-card p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-blog-card span { color: var(--omp-orange); font-weight: 700; }
.header-nav-toggle { display: none; border: 0; background: transparent; font-size: 1.6rem; color: var(--omp-navy, #053463); }
@media (max-width: 991.98px) {
    .header-homepage .header-nav-toggle { display: inline-flex; }
    .header-homepage .header-nav.is-open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: #fff; padding: 1rem 1.25rem; z-index: 30; box-shadow: var(--shadow-card); }
}