/* Dark theme adjustments */
html.dark .ctf-integrations-hero,
html[data-theme="dark"] .ctf-integrations-hero {
    background:
        radial-gradient(circle at 84% 15%, rgba(53, 201, 208, .11), transparent 30%),
        radial-gradient(circle at 66% 68%, rgba(228, 92, 170, .08), transparent 32%),
        radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--brand-indigo) 17%, transparent), transparent 32%),
        linear-gradient(145deg, #17161c, #1d1b23);
}

html.dark .ctf-integrations-ecosystem,
html[data-theme="dark"] .ctf-integrations-ecosystem {
    background:
        radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--brand-indigo) 12%, transparent), transparent 28%),
        rgba(30, 29, 35, .88);
    box-shadow: 0 32px 80px rgba(0, 0, 0, .28);
}

html.dark .ctf-integrations-status.is-beta,
html[data-theme="dark"] .ctf-integrations-status.is-beta {
    color: #efc36d;
}

html.dark .ctf-integrations-discovery,
html[data-theme="dark"] .ctf-integrations-discovery {
    background: color-mix(in srgb, var(--mkt-surface) 91%, transparent);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
}

/* Responsive */
@media (max-width: 1199px) {
    .ctf-integrations-hero-grid {
        grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr);
        gap: 40px;
    }

    .ctf-integrations-ecosystem {
        min-height: 500px;
    }

    .ctf-integrations-ecosystem-node {
        width: 112px;
        height: 70px;
    }

    .ctf-integrations-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1023px) {
    .ctf-integrations-hero-grid {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 54px;
    }

    .ctf-integrations-hero-copy {
        max-width: 760px;
    }

    .ctf-integrations-hero-copy h1 {
        max-width: 15ch;
    }

    .ctf-integrations-ecosystem {
        width: min(760px, 100%);
        justify-self: center;
    }

    .ctf-integrations-result-header {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .ctf-integrations-result-header > p {
        justify-self: start;
    }

    .ctf-integrations-footer-inner {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .ctf-integrations-footer-inner > .ctf-mkt-button {
        width: fit-content;
    }
}

@media (max-width: 767px) {
    .ctf-integrations-hero-grid {
        gap: 42px;
        padding-block: 58px 66px;
    }

    .ctf-integrations-hero-copy h1 {
        margin-bottom: 19px;
        font-size: clamp(39px, 11vw, 54px);
    }

    .ctf-integrations-hero-copy > p {
        font-size: 16px;
    }

    .ctf-integrations-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .ctf-integrations-hero-actions .ctf-mkt-button {
        width: 100%;
        justify-content: center;
    }

    .ctf-integrations-ecosystem {
        min-height: 0;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        border-radius: 22px;
        padding: 18px;
    }

    .ctf-integrations-ecosystem::before,
    .ctf-integrations-ecosystem-lines,
    .ctf-integrations-ecosystem-glow {
        display: none;
    }

    .ctf-integrations-ecosystem-center {
        position: static;
        width: auto;
        min-height: 150px;
        grid-column: 1 / -1;
        transform: none;
        border-radius: 18px;
    }

    .ctf-integrations-ecosystem-node {
        position: static !important;
        width: auto;
        height: 66px;
        transform: none !important;
        border-radius: 13px;
        padding: 9px;
    }

    .ctf-integrations-ecosystem-node:nth-of-type(n + 7) {
        display: none;
    }


    .ctf-integrations-catalog {
        padding-block: 66px 82px;
    }

    .ctf-integrations-discovery {
        position: relative;
        top: auto;
        margin-inline: calc(var(--integration-page-gutter) * -0.25);
        border-radius: 18px;
        padding: 16px;
        backdrop-filter: none;
    }

    .ctf-integrations-filter-scroller {
        margin-inline: -16px;
        padding-inline: 16px;
    }

    .ctf-integrations-filters {
        min-width: max-content;
        padding-bottom: 3px;
    }

    .ctf-integrations-discovery-meta {
        align-items: flex-start;
    }

    .ctf-integrations-result-section {
        scroll-margin-top: 90px;
    }

    .ctf-integrations-result-section.is-infrastructure {
        margin-inline: -6px;
        border-radius: 22px;
        padding: 22px 16px;
    }

    .ctf-integrations-grid {
        grid-template-columns: 1fr;
    }

    .ctf-integrations-card {
        padding: 18px;
    }

    .ctf-integrations-footer-cta {
        padding-block: 62px;
    }

    .ctf-integrations-footer-inner {
        border-radius: 22px;
        padding: 28px 22px;
    }

    .ctf-integrations-footer-inner > .ctf-mkt-button {
        width: 100%;
        justify-content: center;
        white-space: normal;
        text-align: center;
    }
}

@media (max-width: 520px) {
    .ctf-integrations-proof-count {
        align-items: flex-start;
    }

    .ctf-integrations-ecosystem {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ctf-integrations-card-head {
        align-items: center;
    }

    .ctf-integrations-card-logo {
        width: 104px;
        height: 58px;
    }

    .ctf-integrations-status {
        max-width: 128px;
    }

    .ctf-integrations-card-facts > span {
        grid-template-columns: 84px minmax(0, 1fr);
    }

    .ctf-integrations-card-footer {
        align-items: flex-end;
    }

    .ctf-integrations-card-link {
        max-width: 90px;
        justify-content: flex-end;
        text-align: right;
    }

    .ctf-integrations-empty-actions {
        width: 100%;
        display: grid;
    }

    .ctf-integrations-empty-actions .ctf-mkt-button {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 360px) {
    .ctf-integrations-hero-copy h1 {
        font-size: 37px;
    }

    .ctf-integrations-ecosystem {
        padding: 14px;
    }

    .ctf-integrations-card-head {
        display: grid;
    }

    .ctf-integrations-status {
        width: fit-content;
        max-width: 100%;
    }

    .ctf-integrations-card-footer {
        display: grid;
        gap: 10px;
    }

    .ctf-integrations-card-link {
        max-width: none;
        justify-content: flex-start;
        text-align: left;
    }
}

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