.single-post-page {
    overflow: hidden;
    background: #fff;
    color: #092653
}

.single-post-page em {
    color: #0870ec;
    font-style: normal
}

.single-post-hero {
    position: relative;
    padding: 18px 0 28px;
    background: radial-gradient(circle at 89% 7%, rgba(58, 147, 255, .28), transparent 32%), linear-gradient(135deg, #fff 0%, #f1f8ff 68%, #e8f4ff 100%)
}

.single-post-hero:after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(120deg, transparent 65%, rgba(255, 255, 255, .5))
}

.single-post-hero>.tsl-container {
    position: relative;
    z-index: 1
}

.single-post-breadcrumb {
    min-height: 30px;
    margin-bottom: 12px;
    color: #617b9d;
    font-size: 15px
}

.single-post-breadcrumb p {
    margin: 0
}

.single-post-breadcrumb .rank-math-breadcrumb p {
    display: flex;
    gap: 11px;
    align-items: center;
    flex-wrap: wrap
}

.single-post-breadcrumb a {
    color: #55759e
}

.single-post-hero__grid {
    display: grid;
    grid-template-columns: 56% 44%;
    min-height: 430px;
    align-items: center
}

.single-post-hero__copy {
    padding: 15px 18px 18px 0
}

.single-post-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border-radius: 20px;
    background: #eaf4ff;
    color: #086be0;
    font-size: 15px;
    font-weight: 750
}

.single-post-eyebrow svg {
    width: 17px
}

.single-post-hero h1 {
    margin: 22px 0 14px;
    font-size: clamp(38px, 4vw, 38px);
    line-height: 1.06;
    letter-spacing: -.04em;
        background: linear-gradient(8deg, #092d61, #0875e7, #092d61);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    max-width: 580px;
}

.single-post-hero__copy>p {
    max-width: 690px;
    margin: 0;
    color: #5c7596;
    font-size: 16px;
    line-height: 1.65
}

.single-post-meta {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 27px;
    color: #637b9a;
    font-size: 12px
}

.single-post-meta>span {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 20px;
    border-left: 1px solid #d5e2ef
}

.single-post-meta>span:first-child {
    padding-left: 0;
    border: 0
}

.single-post-meta img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover
}

.single-post-meta svg {
    width: 25px;
    color: #0b2852
}

.single-post-meta b {
    display: flex;
    flex-direction: column;
    color: #0a2854;
    font-size: 14px
}

.single-post-meta small,
.single-post-meta time {
    margin-top: 2px;
    color: #607896;
    font-size: 15px;
    font-weight: 500
}

.single-post-hero__media {
    position: relative;
    align-self: stretch;
    min-height: 430px
}

.single-post-hero__media>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    /* clip-path: polygon(13% 0, 100% 0, 100% 100%, 0 100%, 0 21%) */
}

.single-post-share {
    position: absolute;
    z-index: 2;
    top: 12px;
    right: 18px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px 6px 13px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 8px 25px rgba(9, 58, 116, .09);
    font-size: 15px
}

.single-post-share a,
.single-post-share button {
    display: grid;
    width: 27px;
    height: 27px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #e9f4ff;
    color: #0871e8;
    font-size: 15px;
    font-weight: 850;
    cursor: pointer
}

.single-post-share button svg {
    width: 14px
}

.single-post-share button.is-copied {
    background: #0871e8;
    color: #fff
}

.single-post-video {
    position: absolute;
    z-index: 2;
    right: 4%;
    bottom: 18%;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 285px;
    padding: 16px 22px;
    border-radius: 17px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 17px 40px rgba(7, 52, 107, .18)
}

.single-post-video i {
    display: grid;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 50%;
    background: #0871ed;
    color: #fff;
    font-style: normal
}

.single-post-video span {
    display: flex;
    flex-direction: column
}

.single-post-video strong {
    font-size: 15px
}

.single-post-video small {
    margin-top: 4px;
    color: #627995;
    font-size: 15px;
    line-height: 1.4
}

.single-post-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr) 285px;
    gap: 30px;
    align-items: start;
    padding-top: 44px;
    padding-bottom: 65px
}

.single-post-toc,
.single-post-sidebar {
    position: sticky;
    top: 120px;
  
}

.single-post-toc__box,
.single-post-side-list {
    padding: 20px;
    border: 1px solid #dce8f5;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(14, 64, 122, .06)
}

.single-post-toc h2,
.single-post-side-list h2 {
    margin: 0 0 17px;
    font-size: 16px
}

.single-post-toc nav {
    display: grid;
    
}

.single-post-toc nav a {
    display: grid;
    grid-template-columns: 33px 1fr;
    
    gap: 9px;
    
    padding: 5px 8px;
    border-left: 3px solid transparent;
    border-radius: 0 9px 9px 0;
    color: #607797;
    font-size: 15px;
    line-height: 1.35;
    transition: .22s
}

.single-post-toc nav a:hover,
.single-post-toc nav a.is-active {
    border-left-color: #0871ed;
    background: #edf5ff;
    color: #0865d8
}

.single-post-toc nav a.is-child {
    padding-left: 20px
}

.single-post-toc nav b {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    background: #edf4fc;
    color: #48698f;
    font-size: 13px
}

.single-post-toc nav a.is-active b {
    background: #fff;
    color: #0871ed
}

.single-post-download {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 17px;
    padding: 11px;
    border-top: 1px solid #dce8f5;
    border-radius: 8px;
    background: #eff6ff;
    color: #0871ed;
    font-size: 15px;
    font-weight: 750
}

.single-post-download svg {
    width: 19px
}

.single-post-download svg:last-child {
    margin-left: auto;
    transform: rotate(90deg)
}

.single-post-content {
    min-width: 0;
    color: #526b8c;
    font-size: 16px;
    line-height: 1.8
}

.single-post-content>:first-child {
    margin-top: 0
}

.single-post-content h2,
.single-post-content h3,
.single-post-content h4 {
    scroll-margin-top: 125px;
    color: #092653;
    line-height: 1.25;
    letter-spacing: -.02em
}

.single-post-content h2 {
    margin: 42px 0 13px;
    padding-top: 13px;
    border-top: 1px solid #dce8f5;
    font-size: 32px
}

.single-post-content h3 {
    margin: 30px 0 10px;
    font-size: 24px
}

.single-post-content h2:before {
    display: block;
    margin-bottom: 7px;
    color: #0871ed;
    content: counter(post-section, decimal-leading-zero);
    counter-increment: post-section;
    font-size: 15px;
    font-weight: 700
}

.single-post-content {
    counter-reset: post-section
}

.single-post-content p {
    margin: 0 0 18px
}

.single-post-content ul,
.single-post-content ol {
    padding-left: 24px
}

.single-post-content a {
    color: #0871ed;
    text-decoration: underline;
    text-underline-offset: 3px
}

.single-post-content img,
.single-post-content figure {
    max-width: 100% !important;
    height: auto !important
}

.single-post-content figure {
    margin: 25px 0
}

.single-post-content figure img {
    display: block;
    width: 100%;
    border-radius: 16px
}

.single-post-content figcaption {
    margin-top: 7px;
    text-align: center;
    color: #7588a2;
    font-size: 15px
}

.single-post-content blockquote {
    margin: 22px 0;
    padding: 18px 22px;
    border-left: 4px solid #0871ed;
    border-radius: 0 12px 12px 0;
    background: #f1f7ff
}

.single-post-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse
}

.single-post-content td,
.single-post-content th {
    padding: 10px;
    border: 1px solid #dce8f5
}

.single-post-content iframe,
.single-post-content video {
    max-width: 100%
}

.single-post-contact {
    padding: 20px;
    border-radius: 16px;
    background: linear-gradient(145deg, #1484ff, #064fc9);
    color: #fff;
    box-shadow: 0 16px 34px rgba(5, 91, 204, .2)
}

.single-post-contact h2 {
    margin: 0 0 7px;
    font-size: 18px;
    line-height: 1.3
}

.single-post-contact p {
    margin: 0 0 13px;
    color: #d9eaff;
    font-size: 15px;
    line-height: 1.5
}

.single-post-contact a {
    display: flex;
    height: 40px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 7px;
    border-radius: 8px;
    background: #fff;
    color: #0871ed;
    font-size: 15px;
    font-weight: 800
}

.single-post-contact svg {
    width: 17px
}

.single-post-side-list {
    margin-top: 15px
}

.single-post-side-list>a:not(.single-post-side-more) {
    display: grid;
    grid-template-columns: 72px 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid #e3ebf4
}

.single-post-side-list img {
    width: 72px;
    height: 52px;
    border-radius: 7px;
    object-fit: cover
}

.single-post-side-list strong {
    display: -webkit-box;
    overflow: hidden;
    color: #132e57;
    font-size: 15px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.single-post-side-list span {
    min-width: 0
}

.single-post-side-list small {
    display: block;
    margin-top: 4px;
    color: #0871ed;
    font-size: 15px
}

.single-post-side-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    padding: 9px;
    border: 1px solid #bcd8f7;
    border-radius: 8px;
    color: #0871ed;
    font-size: 15px;
    font-weight: 750
}

.single-post-side-more svg {
    width: 15px
}

.single-post-faq {
    margin-top: 48px;
    padding: 34px 22px 22px;
    border-radius: 21px;
    background: radial-gradient(circle at 92% 10%, rgba(181, 216, 255, .55), transparent 24%), linear-gradient(145deg, #fbfdff, #edf6ff);
    box-shadow: inset 0 0 0 1px #e1edf9
}

.single-post-faq .product-section-heading {
    text-align: center
}

.single-post-faq .product-section-heading>span {
    color: #0873e8;
    font-size: 15px;
    font-weight: 850
}

.single-post-faq .product-section-heading h2 {
    margin: 7px 0 4px;
    padding: 0;
    border: 0;
    font-size: 32px
}

.single-post-faq .product-section-heading h2:before {
    display: none
}

.single-post-faq .product-section-heading p {
    font-size: 15px
}

.single-post-faq .single-product-faq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 11px;
    margin-top: 25px
}

.single-post-faq .single-product-faq-card {
    overflow: hidden;
    border-left: 4px solid #0878ed;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(20, 76, 139, .07)
}

.single-post-faq button {
    display: grid;
    width: 100%;
    min-height: 95px;
    grid-template-columns: 48px 1fr 38px;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 0;
    background: transparent;
    color: #09275a;
    text-align: left;
    cursor: pointer
}

.single-post-faq button>i {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 50%;
    background: #edf6ff;
    color: #0873e8
}

.single-post-faq button svg {
    width: 22px
}

.single-post-faq button>span {
    display: flex;
    min-width: 0;
    flex-direction: column
}

.single-post-faq button strong {
    font-size: 15px
}

.single-post-faq button small {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 5px;
    color: #607796;
    font-size: 15px;
    font-weight: 400;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.single-post-faq button>b {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 50%;
    background: #edf5ff;
    color: #0873e8;
    font-size: 20px;
    transition: transform .25s
}

.single-post-faq .single-product-faq-card.is-open button>b {
    transform: rotate(45deg)
}

.single-post-faq .single-product-faq-card>div {
    color: #526d8e
}

.single-post-faq .single-product-faq-card>div[hidden] {
    display: none
}

.single-post-faq .single-product-faq-card>div p {
    margin: 0;
    padding: 0 18px 18px 74px;
    font-size: 15px
}

.single-post-related {
    padding: 65px 0;
    background: radial-gradient(circle at 5% 45%, rgba(51, 143, 255, .11), transparent 27%), linear-gradient(150deg, #fff, #f5faff)
}

.single-post-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 25px
}

.single-post-section-heading>div:first-child>span {
    display: inline-block;
    padding: 6px 13px;
    border-radius: 18px;
    background: #eaf4ff;
    color: #0871ed;
    font-size: 15px;
    font-weight: 800
}

.single-post-section-heading h2 {
    margin: 8px 0 4px;
    font-size: clamp(32px, 3.2vw, 48px);
    line-height: 1.08;
    letter-spacing: -.035em
}

.single-post-section-heading p {
    max-width: 680px;
    margin: 0;
    color: #627995
}

.single-post-section-heading>div:last-child {
    display: flex;
    align-items: center;
    gap: 12px
}

.single-post-section-heading button {
    display: grid;
    width: 47px;
    height: 47px;
    padding: 0;
    place-items: center;
    border: 1px solid #cfe1f5;
    border-radius: 50%;
    background: #fff;
    color: #0871ed;
    cursor: pointer
}

.single-post-section-heading button:first-child svg {
    transform: rotate(180deg)
}

.single-post-section-heading button:disabled {
    opacity: .38;
    cursor: default
}

.single-post-section-heading button svg {
    width: 18px
}

.single-post-section-heading>div:last-child>a {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 15px;
    color: #0871ed;
    font-size: 15px;
    font-weight: 750
}

.single-post-section-heading a svg {
    width: 17px
}

.single-post-related__track {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding: 3px 2px 20px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none
}

.single-post-related__track::-webkit-scrollbar {
    display: none
}

.single-post-related article {
    flex: 0 0 calc((100% - 54px)/4);
    overflow: hidden;
    border: 1px solid #dce8f5;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 11px 28px rgba(16, 72, 137, .07);
    scroll-snap-align: start
}

.single-post-related article>a {
    display: block
}

.single-post-related article>a>img {
    width: 100%;
    height: 205px;
    object-fit: cover
}

.single-post-related article>a>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 17px 0;
    color: #607a99;
    font-size: 15px
}

.single-post-related article>a>div span {
    padding: 5px 9px;
    border-radius: 14px;
    background: #eaf4ff;
    color: #0871ed;
    font-weight: 750;
    font-size: 14px;
}

.single-post-related time {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
}

.single-post-related time svg {
    width: 13px
}

.single-post-related h3 {
    display: -webkit-box;
    overflow: hidden;
    min-height: 52px;
    margin: 11px 17px 6px;
    color: #0a2856;
    font-size: 18px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.single-post-related article p {
    display: -webkit-box;
    overflow: hidden;
    min-height: 62px;
    margin: 0 17px;
    color: #627995;
    font-size: 15px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3
}

.single-post-related article>a>strong {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 17px;
    color: #0871ed;
    font-size: 15px
}

.single-post-related article>a>strong svg {
    width: 16px
}

.single-post-cta {
    padding: 0 0 65px;
    background: #f5faff
}

.single-post-cta__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 35px;
    align-items: center;
    overflow: hidden;
    min-height: 210px;
    padding: 35px 42px;
    border-radius: 22px;
    background: #064188;
    color: #fff
}

.single-post-cta__inner:before {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(90deg, rgba(1, 50, 111, .98) 0%, rgba(5, 96, 190, .86) 56%, rgba(5, 66, 139, .34)), var(--post-cta-bg) center right/58% 100% no-repeat
}

.single-post-cta__inner>* {
    position: relative
}

.single-post-cta__inner>div>span {
    font-size: 15px;
    letter-spacing: .08em
}

.single-post-cta h2 {
    max-width: 620px;
    margin: 9px 0;
    font-size: 34px;
    line-height: 1.2
}

.single-post-cta p {
    max-width: 600px;
    margin: 0;
    color: #d9e9fb;
    font-size: 15px
}

.single-post-cta__inner>a {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 12px;
    background: #fff;
    color: #0871ed;
    font-weight: 800
}

.single-post-cta__inner>a svg {
    width: 20px
}

.single-post-cta ul {
    position: relative;
    grid-column: 1/-1;
    display: flex;
    justify-content: center;
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #dcecff;
    font-size: 15px
}

.single-post-cta li {
    display: flex;
    align-items: center;
    gap: 7px
}

.single-post-cta li svg {
    width: 20px;
    padding: 4px;
    border-radius: 50%;
    background: #1b87ed;
    color: #fff
}

@media(max-width:1100px) {
    .single-post-hero__copy {
        padding-right: 28px
    }

    .single-post-layout {
        grid-template-columns: 215px minmax(0, 1fr) 245px;
        gap: 20px
    }

    .single-post-meta>span {
        padding: 0 11px
    }

    .single-post-related article {
        flex-basis: calc((100% - 18px)/2)
    }
}

@media(max-width:900px) {
    .single-post-layout {
        grid-template-columns: 1fr
    }

    .single-post-toc,
    .single-post-sidebar {
        position: static;
        max-height: none;
        overflow: visible
    }

    .single-post-toc nav {
        max-height: 330px
    }

    .single-post-sidebar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px
    }

    .single-post-side-list {
        margin-top: 0
    }

    .single-post-content {
        grid-row: 2
    }

    .single-post-sidebar {
        grid-row: 3
    }

    .single-post-hero__grid {
        grid-template-columns: 1fr
    }

    .single-post-hero__copy {
        padding: 20px 0 30px
    }

    .single-post-hero__media {
        min-height: 390px
    }

    .single-post-section-heading {
        align-items: flex-start;
        flex-direction: column
    }

    .single-post-section-heading>div:last-child {
        width: 100%
    }

    .single-post-section-heading>div:last-child>a {
        margin-left: auto
    }

    .single-post-cta__inner {
        grid-template-columns: 1fr
    }

    .single-post-cta__inner>a {
        max-width: 330px
    }
}

@media(max-width:700px) {
    .single-post-hero {
        padding-top: 8px
    }

    .single-post-hero h1 {
        font-size: 36px
    }

    .single-post-hero__copy>p {
        font-size: 15px
    }

    .single-post-meta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px
    }

    .single-post-meta>span {
        padding: 0;
        border: 0
    }

    .single-post-hero__media {
        min-height: 260px
    }

    .single-post-hero__media>img {
        clip-path: none;
        border-radius: 15px
    }

    .single-post-share {
        top: 9px;
        right: 9px
    }

    .single-post-video {
        right: 12px;
        bottom: 12px;
        max-width: 260px;
        padding: 11px
    }

    .single-post-layout {
        padding-top: 28px
    }

    .single-post-content {
        font-size: 15px
    }

    .single-post-content h2 {
        font-size: 27px
    }

    .single-post-content h3 {
        font-size: 21px
    }

    .single-post-sidebar {
        grid-template-columns: 1fr
    }

    .single-post-faq {
        padding: 28px 13px 15px
    }

    .single-post-faq .product-section-heading h2 {
        font-size: 28px
    }

    .single-post-faq button {
        grid-template-columns: 43px 1fr 34px;
        gap: 8px;
        padding: 11px
    }

    .single-post-faq button>i {
        width: 42px;
        height: 42px
    }

    .single-post-faq .single-product-faq-card>div p {
        padding-left: 62px
    }

    .single-post-related {
        padding: 45px 0
    }

    .single-post-section-heading h2 {
        font-size: 33px
    }

    .single-post-section-heading>div:last-child>a {
        font-size: 15px
    }

    .single-post-related article {
        flex-basis: 86%
    }

    .single-post-related article>a>img {
        height: 210px
    }

    .single-post-cta {
        padding-bottom: 45px
    }

    .single-post-cta__inner {
        padding: 29px 22px
    }

    .single-post-cta h2 {
        font-size: 29px
    }

    .single-post-cta ul {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 10px 18px
    }
}

@media(max-width:480px) {
    .single-post-meta {
        grid-template-columns: 1fr
    }

    .single-post-meta>span {
        min-height: 36px
    }

    .single-post-hero__media {
        min-height: 220px
    }

    .single-post-share>span {
        display: none
    }

    .single-post-video {
        max-width: 220px
    }

    .single-post-toc__box {
        padding: 15px
    }

    .single-post-section-heading button {
        width: 42px;
        height: 42px
    }

    .single-post-section-heading>div:last-child>a {
        max-width: 145px
    }

    .single-post-cta ul {
        display: grid;
        grid-template-columns: 1fr
    }

    .single-post-related article {
        flex-basis: 88%
    }
}

@media(prefers-reduced-motion:reduce) {
    .single-post-page * {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }
}

.single-post-page {
    overflow: visible;
    overflow-x: clip
}

.single-post-layout.has-no-toc {
    grid-template-columns: minmax(0, 1fr) 285px
}

@media(max-width:900px) {
    .single-post-layout.has-no-toc {
        grid-template-columns: 1fr
    }
}