main.single-integration {
    background-color: var(--neutral-100);

    .single-integration__wrapper {
        max-width: 81rem;
        margin: var(--size-spacing-0) auto;        
        padding: var(--size-spacing-0) 1.125rem;
        
        @media (max-width: 768px) {
            overflow: hidden;
        }
    }

    .single-integration__nav {
        padding: var(--size-spacing-7) 0 var(--size-spacing-3) 0;

        .hrt-tertiary-button {
            transform: translateX(calc(-1 * var(--size-spacing-0)));
        }

        svg {
            fill: var(--neutral-1000);
        }
        
        @media (max-width: 1024px) {
            padding: var(--size-spacing-3) 0 var(--size-spacing-4) 0;
        }
    }

    .single-integration__content {
        display: grid;
        grid-template-columns: 355px 1fr;
        gap: var(--size-spacing-3);        

        @media (max-width: 1024px) {
            grid-template-columns: 1fr;
            gap: 0;
        }
    }

    .single-integration__sidebar {
        align-self: start;
        position: sticky;
        top: 110px;
        padding-bottom: var(--size-spacing-3);

        @media (max-width: 1024px) {
            position: relative;
            top: 0;
        }

        .single-integration__intro, .single-integration__requirements {
            background-color: var(--neutral-0);
            border: 1px solid var(--neutral-400);
            border-radius: var(--size-radius-xl);
            padding: var(--size-spacing-3);        
        }

        .single-integration__requirements {
            margin-top: var(--size-spacing-3);
        }

        h1.single-integration__title {
            color: var(--neutral-1000);
            font-size: var(--size-font-heading-lg);
            font-weight: var(--font-weight-bold);
            line-height: var(--line-height-tight);
            margin-bottom: var(--size-spacing-half);
        }

        h2.single-integration__requirements-title {            
            color: var(--neutral-1000);
            font-size: var(--size-font-heading-sm);
            font-weight: var(--font-weight-bold);
            line-height: var(--line-height-tight);
            margin-bottom: var(--size-spacing-2);
        }

        p.single-integration__tagline {            
            font-size: var(--size-font-body-xs);
            line-height: var(--line-height-condensed);
            color: var(--neutral-700);
        }

        .intro-wysiwyg, .requirements-wysiwyg {            
            a, p, li, h1, h2, h3, h4, h5, h6  {
                font-size: var(--size-font-body-sm);                
                color: var(--neutral-700);
                line-height: 20px;
            }
            
            a {
                &:hover {
                    text-decoration: none;
                }
            }

            p {
                margin-bottom: var(--size-spacing-1);
                &:last-of-type {
                    margin-bottom: 0;
                }
            }
        }

        .intro-wysiwyg { 
            padding: var(--size-spacing-2) 0 var(--size-spacing-3) 0;
        }

        .single-integration__tags {
            padding: var(--size-spacing-3) 0 var(--size-spacing-2) 0;
            display: flex;
            flex-wrap: wrap;
            gap: var(--size-spacing-1);
        }

        .single-integration__tag-item {
            position: relative;

            &.has-tooltip {
                cursor: pointer;

                &:hover .single-integration__tooltip {
                    opacity: 1;
                    visibility: visible;
                }
            }
        }

        .single-integration__tooltip {
            color: var(--neutral-0);
            background: #232323;
            position: absolute;
            bottom: calc(100% + 10px);
            left: 0;
            width: 275px;
            border-radius: 12px;
            padding: 16px;
            font-size: var(--size-font-body-md);
            font-weight: var(--font-weight-regular);
            line-height: var(--line-height-body);
            text-align: left;
            white-space: normal;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s ease, visibility 0.2s ease;
            z-index: 5;
            pointer-events: none;
        }

        .single-integration__tooltip-arrow {
            position: absolute;
            bottom: -7px;
            left: 20px;
        }

        .single-integration__logo-container {
            position: relative;

            .single-integration__tag {
                position: absolute;
                top: -12px;
                left: 50%;
                transform: translateX(-50%);
                z-index: 1;
            }

            .single-integration__logo {
                position: relative;
                aspect-ratio: 229 / 128;
                background: var(--neutral-50);
                border-radius: var(--size-radius-xl);
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
                padding: var(--size-spacing-3) var(--size-spacing-2);
                box-sizing: border-box;        

                img {
                    height: 100%;
                    max-width: 180px;
                    max-height: 80px;
                    object-fit: contain;
                    transition: all var(--time-transition-fast) var(--ease-default);

                    @media (max-width: 1024px) {
                        max-width: 250px;    
                        max-height: 100%;
                    }

                    @media (max-width: 640px) {
                        max-width: 100%;        
                        max-height: 125px;               
                    }
                }
            }
        }

        .single-integration__buttons {
            display: flex;
            gap: var(--size-spacing-2);
            @media (max-width: 425px) {
                flex-flow: wrap;
                gap: var(--size-spacing-1);
                a {
                    width: 100%;
                }
            }
        }
        
    }

    .single-integration__main {
        min-width: 0;
        display: flex;
        flex-flow: column;
        gap: var(--size-spacing-3);
        padding-bottom: var(--size-spacing-3);
    }

    .single-integration__call-to-action {        
        background-color: var(--green-1000);
        border-radius: var(--size-radius-xl);
        padding: var(--size-spacing-4);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--size-spacing-6);
        margin-bottom: var(--size-spacing-12);        

        h4 {
            color: var(--neutral-0);
            font-weight: var(--font-weight-bold);
            font-size: var(--size-font-heading-md);
            margin-bottom: var(--size-spacing-1);
            line-height: var(--line-height-tight);
        }
        
        .wysiwyg {
            a, p, li, h1, h2, h3, h4, h5, h6  {
                font-size: var(--size-font-body-sm);
                line-height: var(--line-height-body);
                color: var(--neutral-0);
                margin: var(--size-spacing-0);
                padding: var(--size-spacing-0);
            }
        }

        > .hrt-primary-button {
            flex-shrink: 0;
            white-space: nowrap;
        }

        @media (max-width: 768px) {
            flex-flow: column;
            align-items: start;
            gap: var(--size-spacing-3);
            margin-top: var(--size-spacing-0);
            margin-bottom: var(--size-spacing-2);
        }
    }

    /* For Gutenberg */
    .integration-block {
        background-color: var(--neutral-0);
        border: 1px solid var(--neutral-400);
        border-radius: var(--size-radius-xl);
        padding: var(--size-spacing-4);

        a, p, li, h1, h2, h3, h4, h5, h6  {
            margin-left: var(--size-spacing-0) !important;      
            margin-right: var(--size-spacing-0) !important;
            max-width: 100%;      
        }

        ul, ol {
            display: flex;
            flex-direction: column;
            gap: var(--size-spacing-1);
            margin: var(--size-spacing-0) !important;
            padding-left: var(--size-spacing-3);
            max-width: 100%;
        }
        
        a {
            &:hover {
                text-decoration: none !important;
            }
        }

        .link-list {
            gap: var(--size-spacing-2);

            a {
                color: var(--neutral-1000);
            }
            
            li::marker {
                color: var(--neutral-1000);
            }
        }

    }

}

/* Lightbox */
.integrations-image-slider__lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--black-55);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--time-transition-fast) var(--ease-default),
                visibility var(--time-transition-fast) var(--ease-default);

    &[aria-hidden="false"] {
        opacity: 1;
        visibility: visible;
    }
}

.integrations-image-slider__lightbox-close {
    position: absolute;
    padding: 9px;
    top: var(--size-spacing-1-and-half);
    right: var(--size-spacing-1-and-half);
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--size-spacing-5);
    width: var(--size-spacing-5);
    background: var(--neutral-50);
    border: none;
    border-radius: var(--size-radius-full);
    cursor: pointer;
    color: var(--neutral-1000);
    transition: background-color var(--time-transition-fast) var(--ease-default);
    z-index: var(--z-index-2);
    &:hover {
        background-color: var(--neutral-200);
    }
    @media (max-width: 768px) {
        height: var(--size-spacing-3);
        width: var(--size-spacing-3);
        padding: var(--size-spacing-half);
        top: var(--size-spacing-1);
        right: var(--size-spacing-1);
    }
}

.integrations-image-slider__lightbox-modal {
    position: relative;
    background-color: var(--neutral-50);
    border-radius: var(--size-radius-xxl);
    @media (max-width: 768px) {
        width: 95%;        
    }
}

.integrations-image-slider__lightbox-img-wrapper {
    position: relative;
    padding: var(--size-spacing-6);
    @media (max-width: 768px) {
        padding: var(--size-spacing-3);
    }
}

.integrations-image-slider__lightbox-img {
    max-width: 90vw;
    max-height: 75vh;
    object-fit: contain;
    display: block;
    border-radius: var(--size-radius-xxl);
    @media (max-width: 768px) {
        max-width: 100%;
    }
}

/* Overrides */
main a:not(.c-btn-primary):not(.c-btn-white):not(.wp-block-button__link):not(.wrapped):hover {
    text-decoration-color: inherit !important;
}
.mktoForm .mktoButtonRow .mktoButtonWrap .mktoButton {
    width: 100% !important;
}