.post {
    padding-top: 8.25rem;
}

.post__inner {
    max-width: 77.5rem;
    margin: 0 auto;
}

.post-hero .breadcrumbs {
    margin-bottom: 2.25rem;
}

.post-hero .breadcrumbs__links {
    row-gap: 0.25rem;
}

.post-hero .breadcrumbs__link,
.post-hero .breadcrumbs__separator {
    color: var(--color-text);
    font-size: 0.9375rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.25rem;
    letter-spacing: -0.43px;
}

.post-hero .breadcrumbs__separator:has(+ .breadcrumbs__link_current) {
    opacity: 0.2;
}

.post-hero .breadcrumbs__link.breadcrumbs__link_current {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    opacity: 0.3;
}

.post-hero__row {
    display: grid;
    grid-template-columns: minmax(0, 671fr) minmax(0, 529fr);
    column-gap: 2.5rem;
}

.post-hero__text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1.75rem;
}

.post-hero__date {
    color: var(--color-text-muted);
    font-size: 1.125rem;
    line-height: 1.4;
}

.post-hero__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-h1-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--text-h1-line-height);
    letter-spacing: var(--text-h1-letter-spacing);
}

.post-hero__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 529 / 295;
    object-fit: cover;
    border-radius: 1.625rem;
}

.post-layout {
    display: grid;
    grid-template-columns: 15.25rem minmax(0, 42rem) 15.25rem;
    justify-content: space-between;
    align-items: start;
    padding: 5rem 0 3.5rem;
}

.post-toc,
.post-aside {
    position: sticky;
    top: 8.25rem;
}

.post-content {
    grid-column: 2;
}

.post-aside {
    grid-column: 3;
}

.post-toc__head {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    pointer-events: none;
}

.post-toc__title {
    flex: 1;
    font-family: var(--font-heading);
    font-size: var(--text-h4-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--text-h4-line-height);
    letter-spacing: var(--text-h4-letter-spacing);
}

.post-toc__chevron {
    display: none;
}

.post-toc__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.post-toc__item_level_3 {
    padding-left: 1rem;
}

.post-toc__link {
    display: block;
    color: var(--color-text-hint);
    font-family: "Inter Display", var(--font-body);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium);
    line-height: normal;
    text-decoration: none;
    transition: color .2s;
}

.post-toc__link:hover,
.post-toc__link.is-active {
    color: var(--color-text);
}

.post-aside__picture {
    display: block;
    width: 100%;
    height: 8.75rem;
    object-fit: cover;
    border-radius: 1.625rem 1.625rem 0 0;
}

.post-aside__body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.25rem 1rem 1rem;
    border-radius: 0 0 1.625rem 1.625rem;
    background-color: var(--color-bg-muted);
}

.post-aside__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.post-aside__text {
    margin: 0.75rem 0 0;
}

.post-aside__text,
.post-aside__list {
    font-family: "Inter Display", var(--font-body);
    font-size: 0.8125rem;
    line-height: normal;
}

.post-aside__list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.post-aside__list li {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.post-aside__list li::before {
    content: "";
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.285 10.714 8.214 14.643l7.5-8.214' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.post-aside .new-button,
.post-float .new-button {
    min-width: 0;
}

.post-float {
    display: none;
}

.post-content {
    color: var(--color-text);
    font-size: 1.125rem;
    line-height: 1.4;
}

.post-content > * {
    margin-top: 2rem;
    margin-bottom: 0;
}

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

.post-content > p + p {
    margin-top: 1.4em;
}

.post-content > :is(h2, h3, h4, h5, h6),
.post-content > .accent-card,
.post-content > .accent-card + * {
    margin-top: 3.5rem;
}

.post-content > :is(h2, h3, h4, h5, h6) + * {
    margin-top: 1.5rem;
}

.post-content > * + .mira-prompt {
    margin-top: 3rem;
}

.post-content > .mira-prompt + .mira-prompt {
    margin-top: 1rem;
}

.post-content :is(h2, h3, h4, h5, h6) {
    margin-bottom: 0;
    font-family: var(--font-heading);
    font-weight: var(--font-weight-semibold);
    scroll-margin-top: 8.25rem;
}

.post-content h2 {
    font-size: var(--text-h2-size);
    line-height: var(--text-h2-line-height);
    letter-spacing: var(--text-h2-letter-spacing);
}

.post-content h3 {
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-line-height);
    letter-spacing: var(--text-h3-letter-spacing);
}

.post-content h4 {
    font-size: var(--text-h4-size);
    line-height: var(--text-h4-line-height);
    letter-spacing: var(--text-h4-letter-spacing);
}

.post-content :is(h5, h6) {
    font-size: var(--text-h5-size);
    line-height: var(--text-h5-line-height);
    letter-spacing: var(--text-h5-letter-spacing);
}

.post-content :is(strong, b) {
    font-weight: 700;
}

.post-content :is(h2, h3, h4, h5, h6) :is(strong, b) {
    font-weight: inherit;
}

.post-content a:not(.new-button) {
    color: var(--color-text-accent);
    text-decoration: none;
}

.post-content a:not(.new-button):hover {
    text-decoration: underline;
}

.post-content :is(ul, ol):not([class]) {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0;
    list-style: none;
}

.post-content :is(ul, ol):not([class]) > li {
    position: relative;
    padding-left: 1.125rem;
}

.post-content ol:not([class]) {
    counter-reset: post-list;
}

.post-content ol:not([class]) > li {
    padding-left: 1.5625rem;
    counter-increment: post-list;
}

.post-content :is(ul, ol):not([class]) > li::before {
    position: absolute;
    top: 0;
    left: 0;
}

.post-content ul:not([class]) > li::before {
    content: "•";
}

.post-content ol:not([class]) > li::before {
    content: counter(post-list) ".";
}

.post-content li > :is(ul, ol) {
    margin-top: 0.75rem;
}

.post-content img {
    max-width: 100%;
    height: auto;
}

.post-content figure.w-richtext-figure-type-image img {
    border-radius: 1rem;
}

.post-table {
    --post-table-fade: 3rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}

.post-table table {
    min-width: 100%;
}

.post-table :is(th, td) {
    min-width: 8rem;
}

.post-table:not(.is-start) {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--post-table-fade));
    mask-image: linear-gradient(to right, transparent, #000 var(--post-table-fade));
}

.post-table:not(.is-end) {
    -webkit-mask-image: linear-gradient(to left, transparent, #000 var(--post-table-fade));
    mask-image: linear-gradient(to left, transparent, #000 var(--post-table-fade));
}

.post-table:not(.is-start):not(.is-end) {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--post-table-fade), #000 calc(100% - var(--post-table-fade)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--post-table-fade), #000 calc(100% - var(--post-table-fade)), transparent);
}

.post-content blockquote {
    margin-left: 0;
    margin-right: 0;
    padding: 0 0 0 1.25rem;
    border-left: 4px solid var(--color-text-accent);
    font-size: inherit;
    line-height: inherit;
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    .post-layout {
        grid-template-columns: 12.5rem minmax(0, 42rem);
        column-gap: 2.5rem;
        justify-content: start;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1439px) {
    .post-layout {
        grid-template-columns: minmax(12.5rem, 15.25rem) minmax(0, 42rem) minmax(12.5rem, 15.25rem);
        column-gap: 2.5rem;
    }
}

@media screen and (max-width: 1199px) {
    .post-aside {
        display: none;
    }

    .post-float {
        display: flex;
        position: fixed;
        z-index: 20;
        bottom: 1.25rem;
        left: 50%;
        transform: translateX(-50%);
    }

    .post-float .new-button {
        white-space: nowrap;
    }
}

@media screen and (max-width: 991px) {
    .post-hero__row {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 2rem;
    }

    .post-hero__text {
        padding-top: 0;
    }

    .post-layout {
        display: block;
        max-width: 42rem;
        padding: 1.5rem 0 3.5rem;
    }

    .post-toc {
        position: static;
        padding: 0.875rem 0.75rem 0.875rem 1rem;
        border-radius: 1rem;
        background-color: var(--color-bg-muted);
    }

    .post-toc.is-open {
        padding-bottom: 1.25rem;
    }

    .post-toc__head {
        pointer-events: auto;
        cursor: pointer;
    }

    .post-toc__title {
        font-size: 1.125rem;
    }

    .post-toc__chevron {
        display: block;
        flex: none;
        width: 1rem;
        height: 1rem;
        margin-left: 0.5rem;
        background-color: currentColor;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 5.333 8 10.333l5-5' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
        transition: transform .2s;
    }

    .post-toc.is-open .post-toc__chevron {
        transform: rotate(180deg);
    }

    .post-toc__list {
        display: none;
        gap: 0.75rem;
        margin-top: 1.25rem;
    }

    .post-toc.is-open .post-toc__list {
        display: flex;
    }

    .post-toc__item_level_3 {
        padding-left: 0;
    }

    .post-toc__link {
        color: var(--color-text);
        font-family: var(--font-body);
        font-size: 1rem;
        font-weight: var(--font-weight-regular);
        line-height: 1.4;
    }

    .post-content {
        padding-top: 3.5rem;
    }
}

@media screen and (max-width: 767px) {
    .post {
        padding-top: 6.375rem;
    }

    .post-hero .breadcrumbs {
        display: none;
    }

    .post-hero__date {
        font-size: 1rem;
    }

    .post-content {
        font-size: 1rem;
    }

    .post-content :is(h2, h3, h4, h5, h6) {
        scroll-margin-top: 6rem;
    }

    .post-content > * {
        margin-top: 1.5rem;
    }

    .post-content > :is(h2, h3, h4, h5, h6) + * {
        margin-top: 1.25rem;
    }

    .post-content > * + .mira-prompt {
        margin-top: 2.5rem;
    }

    .post-content > .mira-prompt + .mira-prompt {
        margin-top: 1rem;
    }

    .post-table :is(th, td) {
        min-width: 7rem;
    }

    .post-content > :is(h2, h3, h4, h5, h6),
    .post-content > .accent-card,
    .post-content > .accent-card + * {
        margin-top: 3.5rem;
    }
}

.post + .article-alse {
    padding-top: 0;
}

.post + .article-alse .blog-listing-content {
    padding: 0 0 6.25rem;
}

.post + .article-alse .blog-listing-content .article-hero-title {
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: var(--text-h2-size);
    line-height: var(--text-h2-line-height);
    letter-spacing: var(--text-h2-letter-spacing);
}

.post + .article-alse .blog-listing-card__content {
    padding: 1.25rem 2rem 1.5rem;
}

.post + .article-alse .blog-listing-card__title {
    margin-bottom: 0.75rem;
    font-size: var(--text-h4-size);
    line-height: var(--text-h4-line-height);
    letter-spacing: var(--text-h4-letter-spacing);
}

.post + .article-alse :is(.blog-listing-card__description, .blog-listing-card__date) {
    color: var(--color-text-hint);
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
}

@media screen and (max-width: 767px) {
    .post + .article-alse .faq.faq_product {
        padding-top: 3.5rem;
    }

    .post + .article-alse .blog-listing-content {
        padding-bottom: 3.5rem;
    }

    .post + .article-alse .blog-listing-content .article-hero-title {
        text-align: center;
    }

    .post + .article-alse .blog-listing-card {
        border-radius: 2rem;
    }

    .post + .article-alse .blog-listing-card__image {
        height: 11.25rem;
        border-radius: 2rem 2rem 0 0;
    }

    .post + .article-alse .blog-listing-card__content {
        padding: 1.25rem 1.5rem 1.5rem;
    }
}