.ap-integrations-refresh__hero {
    position: relative;
    isolation: isolate;
    height: 564.368px;
    min-height: 564.368px;
    overflow: visible;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1441 564.368'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='282.184' x2='1441' y2='282.184' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2322A7F0'/%3E%3Cstop offset='1' stop-color='%23107EDB'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 0H1441V383C1441 383 1184.5 505.5 756 541C327.5 576.5 0 561 0 561V0Z' fill='url(%23g)'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: 100% 564.368px !important;
}

.ap-integrations-refresh__hero .ap-integrations-refresh__eyebrow,
.ap-integrations-refresh__hero-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    padding: 0;
}

/* Every CTA on directory pages is intentionally static in every interaction state. */
.ap-integrations-refresh .ap-integrations-refresh__button,
.ap-integrations-refresh .ap-integrations-refresh__button:link,
.ap-integrations-refresh .ap-integrations-refresh__button:visited,
.ap-integrations-refresh .ap-integrations-refresh__button:hover,
.ap-integrations-refresh .ap-integrations-refresh__button:focus,
.ap-integrations-refresh .ap-integrations-refresh__button:focus-visible,
.ap-integrations-refresh .ap-integrations-refresh__button:active {
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    text-decoration: none !important;
    transition: none !important;
    outline: none !important;
}

.ap-integrations-refresh .ap-integrations-refresh__button--white,
.ap-integrations-refresh .ap-integrations-refresh__button--white:link,
.ap-integrations-refresh .ap-integrations-refresh__button--white:visited,
.ap-integrations-refresh .ap-integrations-refresh__button--white:hover,
.ap-integrations-refresh .ap-integrations-refresh__button--white:focus,
.ap-integrations-refresh .ap-integrations-refresh__button--white:focus-visible,
.ap-integrations-refresh .ap-integrations-refresh__button--white:active {
    border-color: transparent !important;
    background: #fff !important;
    color: #107edb !important;
}

.ap-integrations-refresh .ap-integrations-refresh__button--outline-white,
.ap-integrations-refresh .ap-integrations-refresh__button--outline-white:link,
.ap-integrations-refresh .ap-integrations-refresh__button--outline-white:visited,
.ap-integrations-refresh .ap-integrations-refresh__button--outline-white:hover,
.ap-integrations-refresh .ap-integrations-refresh__button--outline-white:focus,
.ap-integrations-refresh .ap-integrations-refresh__button--outline-white:focus-visible,
.ap-integrations-refresh .ap-integrations-refresh__button--outline-white:active {
    border-color: #fff !important;
    background: transparent !important;
    color: #fff !important;
}

.ap-integrations-refresh .ap-integrations-refresh__button--blue,
.ap-integrations-refresh .ap-integrations-refresh__button--blue:link,
.ap-integrations-refresh .ap-integrations-refresh__button--blue:visited,
.ap-integrations-refresh .ap-integrations-refresh__button--blue:hover,
.ap-integrations-refresh .ap-integrations-refresh__button--blue:focus,
.ap-integrations-refresh .ap-integrations-refresh__button--blue:focus-visible,
.ap-integrations-refresh .ap-integrations-refresh__button--blue:active {
    border-color: transparent !important;
    background: linear-gradient(90deg, #22a7f0, #107edb) !important;
    color: #fff !important;
}

.ap-integrations-refresh .ap-integrations-refresh__button--outline-blue,
.ap-integrations-refresh .ap-integrations-refresh__button--outline-blue:link,
.ap-integrations-refresh .ap-integrations-refresh__button--outline-blue:visited,
.ap-integrations-refresh .ap-integrations-refresh__button--outline-blue:hover,
.ap-integrations-refresh .ap-integrations-refresh__button--outline-blue:focus,
.ap-integrations-refresh .ap-integrations-refresh__button--outline-blue:focus-visible,
.ap-integrations-refresh .ap-integrations-refresh__button--outline-blue:active {
    border-color: #107edb !important;
    background: transparent !important;
    color: #107edb !important;
}

/* All directory CTAs use the same fixed Figma dimensions. */
.ap-integrations-refresh .ap-integrations-refresh__button,
.ap-integrations-refresh .ap-integrations-refresh__button:link,
.ap-integrations-refresh .ap-integrations-refresh__button:visited,
.ap-integrations-refresh .ap-integrations-refresh__button:hover,
.ap-integrations-refresh .ap-integrations-refresh__button:focus,
.ap-integrations-refresh .ap-integrations-refresh__button:focus-visible,
.ap-integrations-refresh .ap-integrations-refresh__button:active {
    width: 169px !important;
    min-width: 169px !important;
    max-width: 169px !important;
    height: 41px !important;
    min-height: 41px !important;
    max-height: 41px !important;
    flex: 0 0 169px !important;
}

/* Keep one-line card titles, but give glyph descenders enough vertical room. */
.ap-integrations-refresh .ap-integrations-refresh-card__title,
.ap-integration-single-refresh .ap-isr-related .ap-integrations-refresh-card__title {
    line-height: 26px !important;
    min-height: 26px !important;
    padding-bottom: 2px !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.ap-integrations-refresh__hero-artwork {
    display: block;
    width: 748px;
    height: 518px;
    max-width: none;
    object-fit: contain;
}

@media (max-width: 1023px) {
    .ap-integrations-refresh__hero-visual {
        display: none !important;
    }

    .ap-integrations-refresh__hero-actions {
        flex-direction: row;
        align-items: flex-start;
    }

    .ap-integrations-refresh__cta-actions {
        align-items: center !important;
    }
}