@font-face {
    font-family: "HK Grotesk";
    src: url("../fonts/hkgrotesk-regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "HK Grotesk";
    src: url("../fonts/hkgrotesk-semibold.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "HK Grotesk";
    src: url("../fonts/hkgrotesk-bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

.onz-blog-post-page {
    --onz-post-ink: #172d3c;
    --onz-post-deep: #0b202c;
    --onz-post-paper: #f2f5f2;
    --onz-post-white: #fff;
    --onz-post-muted: #62727a;
    --onz-post-line: rgba(23, 45, 60, .17);
    --onz-post-accent: #f9a515;
    --onz-post-green: #1ec999;
    color: var(--onz-post-ink);
    background: var(--onz-post-white);
    font-family: "HK Grotesk", sans-serif;
}

.onz-blog-post-page .layout-wrapper.landing { overflow: clip; }

.onz-blog-post-main,
.onz-blog-post-main h1,
.onz-blog-post-main h2,
.onz-blog-post-main h3,
.onz-blog-post-main h4,
.onz-blog-post-main h5,
.onz-blog-post-main h6,
.onz-blog-post-main p,
.onz-blog-post-main a,
.onz-blog-post-main span,
.onz-blog-post-main strong,
.onz-blog-post-main small,
.onz-blog-post-main time,
.onz-blog-post-main em,
.onz-blog-post-main b,
.onz-blog-post-main li,
.onz-blog-post-main summary { font-family: "HK Grotesk", sans-serif; }

.onz-blog-post-shell {
    width: min(1240px, calc(100% - 48px));
    margin-inline: auto;
}

.onz-blog-post-progress {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1100;
    height: 3px;
    pointer-events: none;
}

.onz-blog-post-progress span {
    display: block;
    width: var(--onz-post-progress, 0%);
    height: 100%;
    background: var(--onz-post-accent);
    transform-origin: left center;
}

.onz-blog-post-hero {
    position: relative;
    padding: 142px 0 148px;
    overflow: hidden;
    color: var(--onz-post-white);
    background:
        radial-gradient(circle at 86% 18%, rgba(30, 201, 153, .15), transparent 26%),
        linear-gradient(135deg, #0b202c 0%, #102f3e 100%);
}

.onz-blog-post-hero::after {
    position: absolute;
    right: -4vw;
    bottom: -170px;
    width: 470px;
    height: 470px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    content: "";
}

.onz-blog-post-breadcrumb {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 9px;
    align-items: center;
    margin-bottom: 68px;
    color: rgba(255, 255, 255, .64);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
}

.onz-blog-post-breadcrumb a { color: inherit; text-decoration: none; transition: color 180ms ease; }
.onz-blog-post-breadcrumb a:hover { color: var(--onz-post-accent); }
.onz-blog-post-breadcrumb > i { font-size: 16px; opacity: .6; }

.onz-blog-post-hero__copy {
    position: relative;
    z-index: 1;
    max-width: 1060px;
}

.onz-blog-post-kicker,
.onz-blog-post-recommendation > p,
.onz-blog-post-cta > p,
.onz-blog-post-section-heading p {
    margin: 0;
    color: var(--onz-post-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .15em;
    line-height: 1.2;
    text-transform: uppercase;
}

.onz-blog-post-hero h1 {
    max-width: 1050px;
    margin: 22px 0 0;
    color: var(--onz-post-white);
    font-size: clamp(52px, 6vw, 86px);
    font-weight: 600;
    letter-spacing: -.06em;
    line-height: .96;
    text-wrap: balance;
}

.onz-blog-post-deck {
    max-width: 790px;
    margin: 34px 0 0;
    color: rgba(255, 255, 255, .75);
    font-size: 21px;
    line-height: 1.52;
}

.onz-blog-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 30px;
    align-items: center;
    margin-top: 42px;
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
    font-weight: 600;
}

.onz-blog-post-meta > span,
.onz-blog-post-meta__authors > span {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.onz-blog-post-meta > span + span:not(.onz-blog-post-meta__authors) {
    padding-left: 30px;
    border-left: 1px solid rgba(255, 255, 255, .17);
}

.onz-blog-post-meta i { color: var(--onz-post-accent); font-size: 17px; }
.onz-blog-post-meta__authors { display: inline-flex; flex-wrap: wrap; gap: 14px; }
.onz-blog-post-meta__authors img { width: 30px; height: 30px; border: 2px solid rgba(255, 255, 255, .58); border-radius: 50%; object-fit: cover; }

.onz-blog-post-motion .onz-blog-post-hero__copy > *,
.onz-blog-post-motion .onz-blog-post-breadcrumb {
    opacity: 0;
    transform: translateY(22px);
    animation: onz-blog-post-rise 700ms cubic-bezier(.2, .7, .2, 1) forwards;
}

.onz-blog-post-motion .onz-blog-post-breadcrumb { animation-delay: 70ms; }
.onz-blog-post-motion .onz-blog-post-hero__copy > :nth-child(1) { animation-delay: 140ms; }
.onz-blog-post-motion .onz-blog-post-hero__copy > :nth-child(2) { animation-delay: 220ms; }
.onz-blog-post-motion .onz-blog-post-hero__copy > :nth-child(3) { animation-delay: 310ms; }
.onz-blog-post-motion .onz-blog-post-hero__copy > :nth-child(4) { animation-delay: 400ms; }

.onz-blog-post-cover {
    position: relative;
    z-index: 2;
    height: clamp(460px, 55vw, 710px);
    margin-top: -82px;
    margin-bottom: 0;
    overflow: hidden;
    background: #dce2df;
}

.onz-blog-post-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.onz-blog-post-layout {
    display: grid;
    grid-template-columns: minmax(210px, 260px) minmax(0, 790px);
    gap: 82px;
    justify-content: center;
    padding-top: 112px;
    padding-bottom: 132px;
}

.onz-blog-post-aside { min-width: 0; }
.onz-blog-post-toc { position: sticky; top: 104px; }

.onz-blog-post-toc summary {
    display: flex;
    padding: 17px 0;
    align-items: center;
    justify-content: space-between;
    color: var(--onz-post-ink);
    border-top: 1px solid var(--onz-post-ink);
    border-bottom: 1px solid var(--onz-post-line);
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .07em;
    list-style: none;
    text-transform: uppercase;
}

.onz-blog-post-toc summary::-webkit-details-marker { display: none; }
.onz-blog-post-toc summary i { color: var(--onz-post-accent); font-size: 20px; transition: transform 180ms ease; }
.onz-blog-post-toc[open] summary i { transform: rotate(45deg); }
.onz-blog-post-toc nav { max-height: calc(100vh - 190px); padding-top: 22px; overflow-y: auto; scrollbar-width: thin; }
.onz-blog-post-toc ol { margin: 0; padding: 0; list-style: none; }
.onz-blog-post-toc li + li { margin-top: 11px; }
.onz-blog-post-toc li.is-level-3 { padding-left: 15px; }

.onz-blog-post-toc a {
    display: block;
    padding-left: 14px;
    color: #748189;
    border-left: 2px solid transparent;
    font-size: 13px;
    line-height: 1.42;
    text-decoration: none;
    transition: color 180ms ease, border-color 180ms ease;
}

.onz-blog-post-toc a:hover,
.onz-blog-post-toc a.is-active { color: var(--onz-post-ink); border-left-color: var(--onz-post-accent); }

.onz-blog-post-column { min-width: 0; }
.onz-blog-post-column--centered { grid-column: 1 / -1; width: min(790px, 100%); margin-inline: auto; }

.onz-blog-post-recommendation {
    margin-bottom: 60px;
    padding: 34px 38px 36px;
    color: var(--onz-post-ink);
    border-top: 1px solid var(--onz-post-ink);
    border-bottom: 1px solid var(--onz-post-line);
    background: #eef5f1;
}

.onz-blog-post-recommendation > p { color: #96600d; }
.onz-blog-post-recommendation h2 { margin: 15px 0 12px; font-size: 30px; font-weight: 600; letter-spacing: -.035em; line-height: 1.08; }
.onz-blog-post-recommendation > span { display: block; color: var(--onz-post-muted); font-size: 16px; line-height: 1.6; }
.onz-blog-post-recommendation > div { display: flex; flex-wrap: wrap; gap: 13px 25px; margin-top: 25px; }
.onz-blog-post-recommendation a { display: inline-flex; gap: 8px; align-items: center; color: var(--onz-post-ink); font-size: 14px; font-weight: 700; text-decoration: none; }
.onz-blog-post-recommendation a i { transition: transform 180ms ease; }
.onz-blog-post-recommendation a:hover i { transform: translateX(4px); }

.onz-blog-post-content {
    color: #435762;
    font-size: 19px;
    line-height: 1.78;
}

.onz-blog-post-content > :first-child { margin-top: 0 !important; }
.onz-blog-post-content > p:first-child { color: var(--onz-post-ink); font-size: 22px; line-height: 1.68; }
.onz-blog-post-content p,
.onz-blog-post-content ul,
.onz-blog-post-content ol,
.onz-blog-post-content blockquote,
.onz-blog-post-content table,
.onz-blog-post-content figure,
.onz-blog-post-content iframe,
.onz-blog-post-content pre { margin-top: 0; margin-bottom: 1.35em; }
.onz-blog-post-content ul,
.onz-blog-post-content ol { padding-left: 1.35em; }
.onz-blog-post-content li + li { margin-top: .45em; }
.onz-blog-post-content li::marker { color: #a76500; font-weight: 700; }
.onz-blog-post-content strong { color: var(--onz-post-ink); font-weight: 700; }

.onz-blog-post-content h2,
.onz-blog-post-content h3,
.onz-blog-post-content h4,
.onz-blog-post-content h5,
.onz-blog-post-content h6 {
    color: var(--onz-post-ink);
    font-weight: 600;
    letter-spacing: -.035em;
    scroll-margin-top: 112px;
    text-wrap: balance;
}

.onz-blog-post-content h2 { margin: 2.2em 0 .65em; font-size: clamp(35px, 4.1vw, 48px); line-height: 1.03; }
.onz-blog-post-content h3 { margin: 2em 0 .65em; font-size: clamp(27px, 3vw, 34px); line-height: 1.08; }
.onz-blog-post-content h4 { margin: 2em 0 .65em; font-size: 24px; line-height: 1.16; }
.onz-blog-post-content h5,
.onz-blog-post-content h6 { margin: 1.8em 0 .6em; font-size: 20px; line-height: 1.2; }

.onz-blog-post-content .border > :first-child { margin-top: 0; }
.onz-blog-post-content .border > :last-child { margin-bottom: 0; }

.onz-blog-post-content a {
    color: var(--onz-post-ink);
    text-decoration-color: var(--onz-post-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.onz-blog-post-content a:hover { color: #9d6100; }
.onz-blog-post-content a.btn-primary,
.onz-blog-post-content a.btn-primary:visited {
    color: var(--onz-post-deep);
    background: var(--onz-post-accent);
    border-color: var(--onz-post-accent);
    text-decoration: none;
    transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.onz-blog-post-content a.btn-primary:hover,
.onz-blog-post-content a.btn-primary:focus-visible {
    color: var(--onz-post-white);
    background: var(--onz-post-deep);
    border-color: var(--onz-post-deep);
    transform: translateY(-2px);
}
.onz-blog-post-content img { display: block; max-width: 100%; height: auto; margin: 2.3em auto; }
.onz-blog-post-content figure img { margin-bottom: .65em; }
.onz-blog-post-content figcaption { color: #7c8a91; font-size: 14px; line-height: 1.5; }

.onz-blog-post-content blockquote {
    padding: 10px 0 10px 30px;
    color: var(--onz-post-ink);
    border-left: 4px solid var(--onz-post-accent);
    font-size: 23px;
    line-height: 1.55;
}

.onz-blog-post-content blockquote > :last-child { margin-bottom: 0; }
.onz-blog-post-content iframe { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.onz-blog-post-content table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 16px; }
.onz-blog-post-content th,
.onz-blog-post-content td { min-width: 140px; padding: 13px 15px; border-bottom: 1px solid var(--onz-post-line); text-align: left; vertical-align: top; }
.onz-blog-post-content th { color: var(--onz-post-ink); background: var(--onz-post-paper); font-weight: 700; }
.onz-blog-post-content pre { padding: 24px; overflow-x: auto; color: #eaf1ee; background: var(--onz-post-deep); font-size: 14px; line-height: 1.65; }
.onz-blog-post-content code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .88em; }
.onz-blog-post-content .ratio { margin-bottom: 1.6em; }

.onz-blog-post-cta {
    margin-top: 90px;
    padding: 58px 54px 60px;
    color: var(--onz-post-white);
    background: var(--onz-post-deep);
}

.onz-blog-post-cta h2 { max-width: 610px; margin: 18px 0 15px; color: var(--onz-post-white); font-size: clamp(36px, 4.5vw, 52px); font-weight: 600; letter-spacing: -.045em; line-height: 1; }
.onz-blog-post-cta > span { display: block; max-width: 620px; color: rgba(255, 255, 255, .7); font-size: 17px; line-height: 1.6; }
.onz-blog-post-cta > div { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; margin-top: 32px; }
.onz-blog-post-button { display: inline-flex; min-height: 54px; padding: 14px 23px; gap: 12px; align-items: center; color: var(--onz-post-deep); background: var(--onz-post-accent); font-size: 15px; font-weight: 700; text-decoration: none; transition: background 180ms ease, transform 180ms ease; }
.onz-blog-post-button:hover { color: var(--onz-post-deep); background: var(--onz-post-white); transform: translateY(-2px); }
.onz-blog-post-text-link { display: inline-flex; gap: 9px; align-items: center; color: var(--onz-post-white); font-size: 15px; font-weight: 700; text-decoration: none; }
.onz-blog-post-text-link:hover { color: var(--onz-post-accent); }

.onz-blog-post-related { padding: 124px 0 136px; background: var(--onz-post-paper); }
.onz-blog-post-section-heading { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .55fr); gap: 80px; align-items: end; margin-bottom: 68px; }
.onz-blog-post-section-heading p { color: #a36100; }
.onz-blog-post-section-heading h2,
.onz-blog-post-authors h2 { margin: 15px 0 0; color: var(--onz-post-ink); font-size: clamp(46px, 5vw, 68px); font-weight: 600; letter-spacing: -.055em; line-height: .96; }
.onz-blog-post-section-heading > span { color: var(--onz-post-muted); font-size: 18px; line-height: 1.55; }
.onz-blog-post-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.onz-blog-post-related__item { min-width: 0; border-top: 1px solid var(--onz-post-line); }
.onz-blog-post-related__item > a { display: flex; height: 100%; flex-direction: column; color: var(--onz-post-ink); text-decoration: none; }
.onz-blog-post-related__media { position: relative; display: block; height: 250px; overflow: hidden; background: #dce2df; }
.onz-blog-post-related__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 620ms cubic-bezier(.2, .7, .2, 1); }
.onz-blog-post-related__media small { position: absolute; right: 0; bottom: 0; display: grid; width: 48px; height: 48px; place-items: center; color: var(--onz-post-deep); background: var(--onz-post-accent); font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.onz-blog-post-related__copy { display: flex; height: 100%; padding-top: 22px; flex-direction: column; align-items: flex-start; }
.onz-blog-post-related__copy time { color: #7b8a91; font-size: 13px; font-weight: 600; }
.onz-blog-post-related__copy > strong { margin-top: 14px; font-size: clamp(25px, 2.4vw, 34px); font-weight: 600; letter-spacing: -.04em; line-height: 1.04; }
.onz-blog-post-related__copy > span { margin-top: 17px; color: var(--onz-post-muted); font-size: 16px; line-height: 1.5; }
.onz-blog-post-related__copy > b { display: inline-flex; margin-top: auto; padding-top: 25px; gap: 9px; align-items: center; font-size: 14px; font-weight: 700; }
.onz-blog-post-related__copy b i { transition: transform 180ms ease; }
.onz-blog-post-related__item a:hover img { transform: scale(1.04); }
.onz-blog-post-related__item a:hover b i { transform: translate(3px, -3px); }

.onz-blog-post-authors { padding: 112px 0 120px; background: #e5ece8; }
.onz-blog-post-authors .onz-blog-post-kicker { color: #19765e; }
.onz-blog-post-authors h2 { font-size: clamp(42px, 4.8vw, 62px); }
.onz-blog-post-authors__list { margin-top: 58px; border-top: 1px solid var(--onz-post-line); }
.onz-blog-post-author { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 34px; padding: 38px 0; border-bottom: 1px solid var(--onz-post-line); }
.onz-blog-post-author > img { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; }
.onz-blog-post-author h3 { margin: 0; color: var(--onz-post-ink); font-size: 27px; font-weight: 600; letter-spacing: -.035em; }
.onz-blog-post-author p { max-width: 830px; margin: 12px 0 0; color: var(--onz-post-muted); font-size: 16px; line-height: 1.65; }
.onz-blog-post-author__links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 19px; }
.onz-blog-post-author__links a { display: inline-flex; gap: 8px; align-items: center; color: var(--onz-post-ink); font-size: 14px; font-weight: 700; text-decoration: none; }
.onz-blog-post-author__links a:hover { color: #16775e; }

.onz-blog-post-motion .onz-blog-post-reveal { opacity: 0; transform: translateY(26px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.2, .7, .2, 1); }
.onz-blog-post-motion .onz-blog-post-reveal.is-visible { opacity: 1; transform: none; }

@keyframes onz-blog-post-rise {
    to { opacity: 1; transform: none; }
}

@media (max-width: 991.98px) {
    .onz-blog-post-layout { grid-template-columns: 1fr; gap: 54px; }
    .onz-blog-post-toc { position: static; }
    .onz-blog-post-toc nav { max-height: 340px; }
    .onz-blog-post-column--centered { grid-column: auto; }
    .onz-blog-post-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .onz-blog-post-related__item:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: calc(50% - 16px); }
}

@media (max-width: 767.98px) {
    .onz-blog-post-shell { width: min(100% - 32px, 1240px); }

    .onz-blog-post-hero { padding: 112px 0 118px; }
    .onz-blog-post-hero::after { right: -220px; bottom: -210px; }
    .onz-blog-post-breadcrumb { margin-bottom: 47px; }
    .onz-blog-post-hero h1 { font-size: clamp(42px, 12.5vw, 60px); line-height: .97; }
    .onz-blog-post-deck { margin-top: 25px; font-size: 17px; }
    .onz-blog-post-meta { display: block; margin-top: 31px; }
    .onz-blog-post-meta > span { margin-top: 12px; }
    .onz-blog-post-meta > span + span:not(.onz-blog-post-meta__authors) { padding-left: 0; border-left: 0; }
    .onz-blog-post-meta__authors { margin-top: 18px !important; }
    .onz-blog-post-cover { width: calc(100% - 32px); height: 330px; margin-top: -58px; }
    .onz-blog-post-layout { padding-top: 76px; padding-bottom: 96px; }
    .onz-blog-post-recommendation { margin-bottom: 48px; padding: 29px 24px 31px; }
    .onz-blog-post-recommendation h2 { font-size: 27px; }
    .onz-blog-post-content { font-size: 17px; line-height: 1.74; }
    .onz-blog-post-content > p:first-child { font-size: 19px; }
    .onz-blog-post-content h2 { margin-top: 1.9em; font-size: 35px; }
    .onz-blog-post-content h3 { font-size: 28px; }
    .onz-blog-post-content blockquote { padding-left: 22px; font-size: 20px; }
    .onz-blog-post-cta { margin-top: 70px; padding: 42px 27px 46px; }
    .onz-blog-post-cta h2 { font-size: 37px; }
    .onz-blog-post-related { padding: 88px 0 96px; }
    .onz-blog-post-section-heading { display: block; margin-bottom: 46px; }
    .onz-blog-post-section-heading h2,
    .onz-blog-post-authors h2 { font-size: 43px; }
    .onz-blog-post-section-heading > span { display: block; margin-top: 20px; font-size: 17px; }
    .onz-blog-post-related__grid { display: block; }
    .onz-blog-post-related__item + .onz-blog-post-related__item { margin-top: 62px; }
    .onz-blog-post-related__item:last-child:nth-child(odd) { max-width: none; }
    .onz-blog-post-related__media { height: 245px; }
    .onz-blog-post-related__copy > strong { font-size: 30px; }
    .onz-blog-post-authors { padding: 84px 0 92px; }
    .onz-blog-post-authors__list { margin-top: 42px; }
    .onz-blog-post-author { display: block; padding: 32px 0; }
    .onz-blog-post-author > img { width: 86px; height: 86px; margin-bottom: 22px; }
    .onz-blog-post-author h3 { font-size: 25px; }
}

@media (prefers-reduced-motion: reduce) {
    .onz-blog-post-motion .onz-blog-post-hero__copy > *,
    .onz-blog-post-motion .onz-blog-post-breadcrumb,
    .onz-blog-post-motion .onz-blog-post-reveal { opacity: 1; transform: none; animation: none; transition: none; }
    .onz-blog-post-related__media img,
    .onz-blog-post-related__copy b i,
    .onz-blog-post-button,
    .onz-blog-post-recommendation a i { transition: none; }
}

@media print {
    .onz-blog-post-page .onz-header,
    .onz-blog-post-page .onz-footer,
    .onz-blog-post-progress,
    .onz-blog-post-aside,
    .onz-blog-post-related,
    .onz-blog-post-authors,
    .onz-blog-post-cta { display: none !important; }
    .onz-blog-post-hero { padding: 30px 0; color: #000; background: #fff; }
    .onz-blog-post-hero h1,
    .onz-blog-post-kicker { color: #000; }
    .onz-blog-post-deck,
    .onz-blog-post-meta { color: #333; }
    .onz-blog-post-cover { height: auto; margin-top: 20px; }
    .onz-blog-post-layout { display: block; padding-block: 40px; }
}