﻿/* =========================================================
   DOTNET EXPERT — THIRD-PARTY INTEGRATION
   Web Deployment design system / refined production CSS
   Scoped to #third-party-integration.
   ========================================================= */

#third-party-integration {
    --int-ink: #303638;
    --int-heading: #2f3638;
    --int-primary: #159fca;
    --int-primary-dark: #087aa1;
    --int-accent: #22c9df;
    --int-cyan-soft: #e9fafd;
    --int-text: #58676d;
    --int-muted: #819096;
    --int-border: #dce7ea;
    --int-soft: #f5fafb;
    --int-white: #ffffff;
    --int-green: #2e8b70;
    --int-orange: #bd7a32;
    --int-red: #bb5b56;
    --int-purple: #6d68a7;
    --int-radius: 20px;
    --int-shadow: 0 18px 48px rgba(38, 54, 58, .075);
    --int-shadow-hover: 0 22px 48px rgba(38, 54, 58, .13);
    --int-ease: cubic-bezier(.22, 1, .36, 1);
    position: relative;
    overflow: clip;
    padding: 91px 0 68px;
    color: var(--dep-text);
    background: radial-gradient(circle at 8% 5%, rgba(34, 201, 223, .13), transparent 24%), radial-gradient(circle at 95% 14%, rgba(21, 159, 202, .10), transparent 23%), linear-gradient(180deg, #f7fbfc 0%, #ffffff 46%, #f7fbfc 100%);
    font-size: 16px;
    line-height: 1.75;
}

    #third-party-integration,
    #third-party-integration * {
        box-sizing: border-box;
    }

        #third-party-integration::before,
        #third-party-integration::after {
            content: "";
            position: absolute;
            z-index: 0;
            pointer-events: none;
            border-radius: 50%;
        }

        #third-party-integration::before {
            width: 360px;
            height: 360px;
            top: 280px;
            left: -230px;
            border: 1px solid rgba(34,201,223,.14);
            box-shadow: 0 0 0 28px rgba(34,201,223,.025),0 0 0 58px rgba(34,201,223,.018);
        }

        #third-party-integration::after {
            width: 280px;
            height: 280px;
            right: -190px;
            bottom: 320px;
            border: 1px solid rgba(21,159,202,.12);
        }

        #third-party-integration img {
            max-width: 100%;
            height: auto;
        }

        #third-party-integration a {
            color: var(--int-primary-dark);
        }

        #third-party-integration p:last-child {
            margin-bottom: 0;
        }

        /* Layout */
        #third-party-integration .integration-container {
            position: relative;
            z-index: 1;
            width: min(1320px,calc(100% - 40px));
            margin: 0 auto;
        }

        #third-party-integration .integration-layout {
            display: grid;
            grid-template-columns: minmax(0,1fr) 320px;
            gap: 24px;
            align-items: start;
        }

        #third-party-integration .integration-main {
            min-width: 0;
            overflow: hidden;
            border: 1px solid var(--int-border);
            border-radius: 24px;
            background: var(--int-white);
            box-shadow: var(--int-shadow);
            animation: intFadeUp .65s var(--int-ease) both;
        }

        /* Hero */
        #third-party-integration .integration-intro {
            position: relative;
            overflow: hidden;
            padding: 38px 42px 30px;
            background: radial-gradient(circle at 88% 0%, rgba(34, 201, 223, .16), transparent 31%), linear-gradient(135deg, #ffffff 0%, #f5fafb 100%);
        }

            #third-party-integration .integration-intro::before {
                content: "";
                position: absolute;
                top: 0;
                left: 42px;
                width: 86px;
                height: 4px;
                border-radius: 0 0 6px 6px;
                background: linear-gradient(90deg,var(--int-primary),var(--int-accent));
            }

        #third-party-integration .integration-intro__eyebrow {
            display: inline-flex;
            align-items: center;
            margin: 0 0 18px;
            padding: 6px 12px;
            border: 1px solid #c9eaf0;
            border-radius: 999px;
            background: rgba(255,255,255,.82);
            color: var(--int-primary-dark);
            font-size: 10px;
            font-weight: 850;
            letter-spacing: .15em;
            line-height: 1.2;
            box-shadow: 0 5px 15px rgba(21,159,202,.06);
        }

        #third-party-integration .integration-intro__title {
            max-width: 930px;
            margin: 0 0 20px;
            color: var(--int-heading);
            font-size: clamp(36px,4vw,56px);
            font-weight: 780;
            line-height: 1.06;
            letter-spacing: -.045em;
        }

        #third-party-integration .integration-intro__text {
            max-width: 900px;
            margin: 0 0 12px;
            color: #5d7077;
            font-size: 17px;
            line-height: 1.82;
        }

        #third-party-integration .integration-hero-image {
            position: relative;
            margin: 0 42px 8px;
            overflow: hidden;
            border: 1px solid var(--int-border);
            border-radius: 18px;
            background: #f1f7f8;
            box-shadow: 0 12px 30px rgba(38,54,58,.06);
        }

            #third-party-integration .integration-hero-image::after {
                content: "";
                position: absolute;
                inset: auto 0 0;
                height: 35%;
                background: linear-gradient(180deg,transparent,rgba(47,54,56,.10));
                pointer-events: none;
            }

            #third-party-integration .integration-hero-image img {
                display: block;
                width: 100%;
                transition: transform .7s var(--int-ease),filter .7s ease;
            }

            #third-party-integration .integration-hero-image:hover img {
                transform: scale(1.025);
                filter: saturate(1.05);
            }

        /* Common blocks */
        #third-party-integration .integration-block {
            position: relative;
            padding: 40px 42px;
            border-top: 1px solid rgba(210,224,228,.78);
        }

            #third-party-integration .integration-block::before {
                content: "";
                position: absolute;
                top: 0;
                left: 42px;
                width: 58px;
                height: 3px;
                border-radius: 0 0 5px 5px;
                background: var(--int-primary);
            }

        #third-party-integration .integration-block__title {
            position: relative;
            margin: 0 0 24px;
            color: var(--int-heading);
            font-size: clamp(27px,2.4vw,35px);
            font-weight: 740;
            line-height: 1.2;
            letter-spacing: -.028em;
        }

            #third-party-integration .integration-block__title::after {
                content: "";
                display: block;
                width: 42px;
                height: 3px;
                margin-top: 12px;
                border-radius: 3px;
                background: var(--int-accent);
                transition: width .35s var(--int-ease);
            }

        #third-party-integration .integration-block:hover .integration-block__title::after {
            width: 64px;
        }

        #third-party-integration .integration-block p {
            margin: 0 0 14px;
        }

        #third-party-integration .integration-block h3 {
            margin: 0 0 9px;
            color: var(--int-heading);
            font-size: 20px;
            line-height: 1.35;
        }

        #third-party-integration .integration-block ul {
            margin: 0 0 18px;
            padding-left: 22px;
        }

        #third-party-integration .integration-block li {
            margin-bottom: 7px;
        }

            #third-party-integration .integration-block li::marker {
                color: var(--int-primary);
            }

        /* Generic content cards */
        #third-party-integration .integration-subgrid {
            display: grid;
            grid-template-columns: repeat(2,minmax(0,1fr));
            gap: 16px;
            margin-top: 20px;
        }

        #third-party-integration .integration-subsection {
            position: relative;
            padding: 20px;
            border: 1px solid var(--int-border);
            border-radius: 16px;
            background: rgba(255,255,255,.84);
            box-shadow: 0 8px 24px rgba(38,54,58,.04);
            transition: transform .3s var(--int-ease),box-shadow .3s ease,border-color .3s ease;
        }

            #third-party-integration .integration-subsection::before {
                content: "";
                display: block;
                width: 30px;
                height: 3px;
                margin-bottom: 14px;
                border-radius: 4px;
                background: var(--int-primary);
            }

            #third-party-integration .integration-subsection:hover {
                transform: translateY(-4px);
                border-color: #c4e2e8;
                box-shadow: var(--int-shadow-soft);
            }

        /* Section identities */
        #third-party-integration #integration-definition {
            background: linear-gradient(135deg,#eefbfd 0%,#fff 80%);
        }

            #third-party-integration #integration-definition::before {
                background: var(--int-accent);
            }

        #third-party-integration #integration-services {
            background: #fff;
        }

            #third-party-integration #integration-services .integration-subsection:nth-child(odd) {
                background: linear-gradient(145deg,#fff,#f6fbfc);
            }

            #third-party-integration #integration-services .integration-subsection:nth-child(even) {
                background: linear-gradient(145deg,#f4fafb,#fff);
            }

        /* Platforms */
        #third-party-integration #integration-hosting {
            color: #dcecef;
            background: linear-gradient(135deg,#30383a 0%,#263638 55%,#12566b 100%);
        }

            #third-party-integration #integration-hosting::before {
                background: var(--int-accent);
            }

            #third-party-integration #integration-hosting .integration-block__title {
                color: #fff;
            }

                #third-party-integration #integration-hosting .integration-block__title::after {
                    background: var(--int-accent);
                }

            #third-party-integration #integration-hosting p {
                color: #c8dadd;
            }

            #third-party-integration #integration-hosting > ul {
                display: grid;
                grid-template-columns: repeat(2,minmax(0,1fr));
                gap: 10px;
                margin: 22px 0 0;
                padding: 0;
                list-style: none;
            }

                #third-party-integration #integration-hosting > ul li {
                    margin: 0;
                    padding: 15px;
                    border: 1px solid rgba(255,255,255,.14);
                    border-radius: 12px;
                    background: rgba(255,255,255,.065);
                    color: #eefbfc;
                    transition: transform .25s var(--int-ease),background .25s ease,border-color .25s ease;
                }

                    #third-party-integration #integration-hosting > ul li:hover {
                        transform: translateY(-3px);
                        border-color: rgba(34,201,223,.48);
                        background: rgba(34,201,223,.10);
                    }

        /* Technologies */
        #third-party-integration #integration-technologies {
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg,#10282f 0%,#12343d 52%,#0d242b 100%);
            color: #eefbfc;
        }

            #third-party-integration #integration-technologies::before {
                background: var(--int-primary);
            }

            #third-party-integration #integration-technologies::after {
                content: "";
                position: absolute;
                width: 280px;
                height: 280px;
                right: -100px;
                top: -130px;
                border-radius: 50%;
                background: rgba(34,201,223,.10);
                pointer-events: none;
            }

            #third-party-integration #integration-technologies .integration-block__title {
                color: #fff;
            }

                #third-party-integration #integration-technologies .integration-block__title::after {
                    background: var(--int-accent);
                }

            #third-party-integration #integration-technologies > p {
                color: #c7e1e5;
            }

        #third-party-integration .integration-technologies__grid {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: repeat(3,minmax(0,1fr));
            gap: 18px;
            margin-top: 26px;
            align-items: stretch;
        }

        #third-party-integration .integration-technologies__group {
            display: flex;
            flex-direction: column;
            min-height: 205px;
            padding: 22px;
            border: 1px solid rgba(96,226,239,.18);
            border-radius: 16px;
            background: linear-gradient(145deg,rgba(255,255,255,.055),rgba(34,201,223,.035));
            box-shadow: inset 0 1px 0 rgba(255,255,255,.035),0 14px 30px rgba(0,0,0,.14);
            transition: transform .3s var(--int-ease),border-color .3s ease,background .3s ease,box-shadow .3s ease;
        }

            #third-party-integration .integration-technologies__group:hover {
                transform: translateY(-5px);
                border-color: rgba(34,201,223,.48);
                background: rgba(255,255,255,.075);
                box-shadow: 0 18px 38px rgba(0,0,0,.18);
            }

            #third-party-integration .integration-technologies__group h3 {
                margin: 0 0 14px;
                color: #fff;
                font-size: 1.05rem;
                font-weight: 750;
            }

        #third-party-integration .integration-technologies__items {
            display: grid;
            grid-template-columns: repeat(2,minmax(0,1fr));
            gap: 10px;
            flex: 1;
        }

            #third-party-integration .integration-technologies__items span {
                display: flex;
                align-items: center;
                justify-content: center;
                min-height: 42px;
                padding: 8px 10px;
                border: 1px solid rgba(34,201,223,.22);
                border-radius: 10px;
                background: rgba(34,201,223,.07);
                color: #e8fbfd;
                font-size: 1.2rem;
                font-weight: 650;
                line-height: 1.25;
                text-align: center;
                transition: transform .25s ease,background .25s ease,border-color .25s ease;
            }

                #third-party-integration .integration-technologies__items span:hover {
                    transform: translateY(-2px);
                    border-color: rgba(34,201,223,.58);
                    background: rgba(34,201,223,.15);
                }

        /* Scope */
        #third-party-integration #integration-scope {
            background: #fff;
        }

            #third-party-integration #integration-scope > ul {
                columns: 2;
                column-gap: 34px;
            }

                #third-party-integration #integration-scope > ul li {
                    break-inside: avoid;
                }

        /* Benefits */
        #third-party-integration #integration-benefits {
            background: linear-gradient(135deg,#f2fafc 0%,#e9f6f9 100%);
        }

        #third-party-integration .integration-benefits-grid {
            display: grid;
            grid-template-columns: repeat(2,minmax(0,1fr));
            gap: 16px;
            margin-top: 20px;
        }

        #third-party-integration .integration-benefit {
            position: relative;
            min-height: 155px;
            padding: 20px 20px 18px 68px;
            border: 1px solid #d1e4e8;
            border-radius: 16px;
            background: rgba(255,255,255,.86);
            transition: transform .3s var(--int-ease),box-shadow .3s ease,border-color .3s ease;
        }

            #third-party-integration .integration-benefit:hover {
                transform: translateY(-5px);
                border-color: #b0d9e0;
                box-shadow: var(--int-shadow-soft);
            }

        #third-party-integration .integration-benefit__number {
            position: absolute;
            top: 22px;
            left: 21px;
            display: grid;
            width: 36px;
            height: 36px;
            place-items: center;
            border-radius: 10px;
            background: linear-gradient(145deg,#e1f7fa,#d1eef2);
            color: var(--int-primary-dark);
            font-size: 12px;
            font-weight: 850;
        }

        #third-party-integration .integration-benefit h3 {
            margin-bottom: 7px;
            font-size: 19px;
        }

        #third-party-integration .integration-benefit p {
            margin: 0;
        }

        /* Process */
        #third-party-integration #integration-process {
            background: linear-gradient(180deg,#edf8fb 0%,#f7fafb 100%);
        }

        #third-party-integration .integration-process-grid {
            display: grid;
            grid-template-columns: repeat(2,minmax(0,1fr));
            gap: 16px;
            margin-top: 20px;
        }

        #third-party-integration .integration-process-step {
            position: relative;
            min-height: 150px;
            padding: 21px 20px 19px 70px;
            border: 1px solid #d3e6ea;
            border-radius: 16px;
            background: rgba(255,255,255,.88);
            box-shadow: 0 7px 22px rgba(21,159,202,.045);
            transition: transform .3s var(--int-ease),box-shadow .3s ease,border-color .3s ease;
        }

            #third-party-integration .integration-process-step:hover {
                transform: translateY(-5px);
                border-color: #a9d5de;
                box-shadow: 0 16px 34px rgba(21,159,202,.11);
            }

        #third-party-integration .integration-process-step__number {
            position: absolute;
            top: 22px;
            left: 20px;
            display: grid;
            width: 42px;
            height: 42px;
            place-items: center;
            border-radius: 12px;
            background: linear-gradient(135deg,#087aa1,#22c9df);
            color: #fff;
            font-size: 14px;
            font-weight: 850;
            box-shadow: 0 8px 18px rgba(21,159,202,.22);
        }


        /* FAQ */
        #third-party-integration #integration-faq {
            background: linear-gradient(135deg,#f7fbfc,#fff);
        }

        #third-party-integration .integration-faq__accordion {
            margin-top: 10px;
        }

        #third-party-integration .integration-faq__item {
            overflow: hidden;
            margin-bottom: 10px;
            border: 1px solid var(--int-border) !important;
            border-radius: 12px !important;
            background: #fff;
            transition: border-color .25s ease,box-shadow .25s ease;
        }

            #third-party-integration .integration-faq__item:hover {
                border-color: #bfdde3 !important;
                box-shadow: 0 8px 24px rgba(21,159,202,.08);
            }

            #third-party-integration .integration-faq__item .accordion-header {
                margin: 0;
            }

            #third-party-integration .integration-faq__item .accordion-button {
                padding: 18px 20px;
                color: var(--int-heading);
                background: #fff;
                font-size: 16px;
                line-height: 1.45;
                font-weight: 700;
                box-shadow: none;
            }

                #third-party-integration .integration-faq__item .accordion-button:not(.collapsed) {
                    color: var(--int-primary-dark);
                    background: #eefafd;
                    box-shadow: none;
                }

                #third-party-integration .integration-faq__item .accordion-button:focus {
                    border-color: transparent;
                    box-shadow: none;
                }

            #third-party-integration .integration-faq__item .accordion-body {
                padding: 0 20px 20px;
                color: var(--int-text);
                line-height: 1.75;
            }

        /* CTA */
        #third-party-integration #integration-contact.integration-cta {
            position: relative;
            overflow: hidden;
            padding-top: 46px;
            padding-bottom: 46px;
            background: radial-gradient(circle at 92% 15%,rgba(34,201,223,.24),transparent 25%),linear-gradient(135deg,#eaf9fc 0%,#f8fcfd 100%);
        }

            #third-party-integration #integration-contact.integration-cta::after {
                content: "";
                position: absolute;
                width: 230px;
                height: 230px;
                right: -95px;
                bottom: -125px;
                border: 1px solid rgba(21,159,202,.18);
                border-radius: 50%;
                box-shadow: 0 0 0 28px rgba(21,159,202,.035),0 0 0 56px rgba(21,159,202,.025);
                pointer-events: none;
            }

            #third-party-integration #integration-contact.integration-cta a {
                position: relative;
                z-index: 1;
                font-weight: 750;
                text-decoration-thickness: 1px;
                text-underline-offset: 3px;
            }

        #third-party-integration #integration-conclusion {
            background: #fff;
        }

        /* Sidebar */
        #third-party-integration .integration-sidebar {
            position: sticky;
            top: 91px;
            z-index: 10;
            align-self: start;
            overflow: auto;
            max-height: calc(100vh - 124px);
            border: 1px solid #d5e3e7;
            border-radius: 22px;
            background: #fff;
            box-shadow: 0 18px 55px rgba(38,54,58,.09);
            animation: intFadeUp .65s .08s var(--int-ease) both;
        }

        #third-party-integration .integration-sidebar__rate {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            overflow: hidden;
            padding: 27px 26px 24px;
            background: radial-gradient(circle at 88% 10%,rgba(255,255,255,.18),transparent 9rem),linear-gradient(135deg,#30383a 0%,#166b80 48%,#159fca 100%);
            color: #fff;
        }

            #third-party-integration .integration-sidebar__rate strong {
                color: #fff;
                font-size: 37px;
                line-height: 1;
                letter-spacing: -.045em;
            }

            #third-party-integration .integration-sidebar__rate span {
                color: rgba(255,255,255,.92);
                font-size: 10px;
                font-weight: 850;
                letter-spacing: .14em;
                text-transform: uppercase;
            }

        #third-party-integration .integration-sidebar__section {
            padding: 21px 24px;
            border-bottom: 1px solid #e6eef0;
        }

            #third-party-integration .integration-sidebar__section h2,
            #third-party-integration .integration-sidebar__details h3 {
                margin: 0 0 7px;
                color: var(--int-heading);
                font-size: 15px;
                line-height: 1.4;
            }

            #third-party-integration .integration-sidebar__section h2 {
                display: flex;
                align-items: center;
                gap: 9px;
                font-size: 17px;
            }

                #third-party-integration .integration-sidebar__section h2::before {
                    content: "";
                    width: 5px;
                    height: 22px;
                    border-radius: 4px;
                    background: linear-gradient(180deg,var(--int-primary),var(--int-accent));
                }

        #third-party-integration .integration-sidebar__meetings p {
            margin: 0 0 12px;
            color: var(--int-muted);
            font-size: 13px;
        }

        #third-party-integration .integration-meetings {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
        }

            #third-party-integration .integration-meetings span {
                display: grid;
                width: 35px;
                height: 35px;
                place-items: center;
                border: 1px solid #dfeaec;
                border-radius: 10px;
                background: #f7fbfc;
                color: var(--int-primary-dark);
                font-size: 10px;
                font-weight: 800;
            }

        #third-party-integration .integration-sidebar__details {
            display: grid;
            gap: 0;
            padding: 0 24px;
        }

            #third-party-integration .integration-sidebar__details section {
                padding: 21px 0;
            }

                #third-party-integration .integration-sidebar__details section + section {
                    border-top: 1px solid #edf2f3;
                }

            #third-party-integration .integration-sidebar__details a {
                display: flex;
                align-items: center;
                gap: 9px;
                margin: 7px 0;
                color: var(--int-primary-dark);
                font-size: 13px;
                line-height: 1.5;
                text-decoration: none;
                transition: color .2s ease,padding-left .25s var(--int-ease);
            }

                #third-party-integration .integration-sidebar__details a:hover {
                    padding-left: 4px;
                    color: var(--int-primary);
                }

        #third-party-integration .integration-sidebar__social {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding: 18px 24px 22px;
        }

            #third-party-integration .integration-sidebar__social a {
                display: grid;
                width: 35px;
                height: 35px;
                place-items: center;
                border: 1px solid #dce7ea;
                border-radius: 10px;
                background: #f7fbfc;
                text-decoration: none;
                font-size: 12px;
                font-weight: 800;
            }

                #third-party-integration .integration-sidebar__social a:hover {
                    transform: translateY(-3px);
                    border-color: #b8dce3;
                    box-shadow: 0 7px 16px rgba(38,54,58,.09);
                }

/* =========================================================
   Responsive
   Matched to the Web Deployment responsive system
   ========================================================= */

@media (max-width: 1180px) {
    #third-party-integration .integration-intro,
    #third-party-integration .integration-block {
        padding-left: 36px;
        padding-right: 36px;
    }

    #third-party-integration .integration-hero-image {
        margin-left: 36px;
        margin-right: 36px;
    }

    #third-party-integration .integration-block::before,
    #third-party-integration .integration-intro::before {
        left: 36px;
    }
}

@media (max-width: 960px) {
    #third-party-integration {
        padding-top: 44px;
    }

        #third-party-integration .integration-layout {
            grid-template-columns: 1fr;
        }

        #third-party-integration .integration-main {
            order: 1;
        }

        #third-party-integration .integration-sidebar {
            position: relative;
            top: auto;
            z-index: 1;
            max-height: none;
            overflow: visible;
            order: 2;
        }

        #third-party-integration .integration-intro__title {
            font-size: clamp(34px, 6vw, 50px);
        }

        #third-party-integration .integration-intro__text {
            max-width: 100%;
        }

        #third-party-integration .integration-hero-image img {
            width: 100%;
            height: auto;
        }

        #third-party-integration .integration-technologies__grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
}

@media (max-width: 720px) {
    #third-party-integration {
        padding: 90px 0 48px;
    }

        #third-party-integration .integration-container {
            width: min(100% - 20px, 680px);
        }

        #third-party-integration .integration-intro,
        #third-party-integration .integration-block {
            padding-left: 22px;
            padding-right: 22px;
        }

        #third-party-integration .integration-intro {
            padding-top: 30px;
            padding-bottom: 24px;
        }

            #third-party-integration .integration-intro::before,
            #third-party-integration .integration-block::before {
                left: 22px;
            }

        #third-party-integration .integration-intro__eyebrow {
            margin-bottom: 14px;
            padding: 6px 10px;
            font-size: 9px;
        }

        #third-party-integration .integration-intro__title {
            font-size: clamp(32px, 8.5vw, 43px);
            line-height: 1.08;
            letter-spacing: -.035em;
        }

        #third-party-integration .integration-intro__text {
            margin-bottom: 10px;
            font-size: 15px;
            line-height: 1.72;
        }

        #third-party-integration .integration-hero-image {
            margin-left: 22px;
            margin-right: 22px;
            border-radius: 16px;
        }

        #third-party-integration .integration-block {
            padding-top: 30px;
            padding-bottom: 30px;
        }

        #third-party-integration .integration-subgrid,
        #third-party-integration .integration-process-grid,
        #third-party-integration .integration-benefits-grid,
        #third-party-integration .integration-technologies__grid {
            grid-template-columns: 1fr;
        }

        #third-party-integration #integration-hosting > ul {
            grid-template-columns: 1fr;
        }

        #third-party-integration #integration-scope > ul {
            columns: 1;
        }

        #third-party-integration .integration-technologies__group {
            min-height: auto;
        }

        #third-party-integration .integration-faq__item .accordion-button {
            padding: 16px;
            font-size: 1rem;
        }

        #third-party-integration .integration-faq__item .accordion-body {
            padding: 0 16px 17px;
        }

        #third-party-integration .integration-pricing__card {
            padding: 24px;
        }

            #third-party-integration .integration-pricing__card h3 {
                font-size: 40px;
            }
}

@media (max-width: 480px) {
    #third-party-integration {
        padding: 88px 0 36px;
    }

        #third-party-integration .integration-container {
            width: calc(100% - 12px);
        }

        #third-party-integration .integration-main,
        #third-party-integration .integration-sidebar {
            border-radius: 18px;
        }

        #third-party-integration .integration-intro,
        #third-party-integration .integration-block {
            padding-left: 16px;
            padding-right: 16px;
        }

        #third-party-integration .integration-intro {
            padding-top: 24px;
            padding-bottom: 20px;
        }

            #third-party-integration .integration-intro::before,
            #third-party-integration .integration-block::before {
                left: 16px;
            }

        #third-party-integration .integration-intro__title {
            font-size: 34px;
            line-height: 1.1;
        }

        #third-party-integration .integration-intro__text {
            font-size: 16px;
            line-height: 1.75;
        }

        #third-party-integration .integration-hero-image {
            margin: 0 16px 8px;
            border-radius: 13px;
        }

        #third-party-integration .integration-block {
            padding-top: 30px;
            padding-bottom: 30px;
        }

        #third-party-integration .integration-block__title {
            font-size: 24px;
        }

        #third-party-integration .integration-subsection {
            padding: 18px;
        }

        #third-party-integration .integration-process-step,
        #third-party-integration .integration-benefit {
            padding: 18px 18px 18px 64px;
        }

        #third-party-integration .integration-pricing__card {
            padding: 20px;
            border-radius: 16px;
        }

            #third-party-integration .integration-pricing__card h3 {
                font-size: 34px;
            }

            #third-party-integration .integration-pricing__card > strong {
                margin-bottom: 20px;
                font-size: 18px;
            }

            #third-party-integration .integration-pricing__card p {
                font-size: 16px;
                line-height: 1.75;
            }

        #third-party-integration .integration-sidebar__rate {
            padding: 24px 20px 21px;
        }

            #third-party-integration .integration-sidebar__rate strong {
                font-size: 32px;
            }

        #third-party-integration .integration-sidebar__section,
        #third-party-integration .integration-sidebar__details,
        #third-party-integration .integration-sidebar__social {
            padding-left: 20px;
            padding-right: 20px;
        }
}

@media (prefers-reduced-motion: reduce) {
    #third-party-integration *,
    #third-party-integration *::before,
    #third-party-integration *::after,
}

@keyframes intFadeUp {
    from {
        opacity: 0;
        transform: translateY(16px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media (prefers-reduced-motion:reduce) {
    #third-party-integration *, #third-party-integration *::before, #third-party-integration *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* =========================================================
   FINAL PRICING OVERRIDE
   Match the Web Deployment pricing section exactly:
   full-width card inside the main content column.
   ========================================================= */

#third-party-integration #integration-pricing {
    width: 100%;
    background: linear-gradient(135deg, #eefafd 0%, #f7fbfc 100%);
}

    #third-party-integration #integration-pricing .integration-block__title {
        margin-bottom: 14px;
    }

    #third-party-integration #integration-pricing .integration-pricing__card {
        display: block;
        width: 100%;
        max-width: none;
        min-width: 0;
        margin: 10px 0 0;
        padding: 28px;
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
        border: 1px solid #b8e0e8;
        border-radius: 20px;
        background: linear-gradient(135deg, #ffffff 0%, #f8fcfd 100%);
        box-shadow: 0 16px 36px rgba(21, 159, 202, .09);
    }

        #third-party-integration #integration-pricing .integration-pricing__card::before {
            content: "";
            display: block;
            width: 40px;
            height: 4px;
            margin-bottom: 25px;
            border-radius: 0 0 5px 5px;
            background: linear-gradient(90deg, var(--int-primary), var(--int-accent));
        }

        #third-party-integration #integration-pricing .integration-pricing__card::after {
            content: "";
            position: absolute;
            right: -62px;
            bottom: -92px;
            width: 165px;
            height: 165px;
            border-radius: 50%;
            background: rgba(34, 201, 223, .12);
            pointer-events: none;
        }

        #third-party-integration #integration-pricing .integration-pricing__card h3 {
            position: relative;
            z-index: 1;
            margin: 0 0 16px;
            color: var(--int-primary-dark);
            font-size: 47px;
            font-weight: 500;
            line-height: 1.1;
            letter-spacing: -.025em;
        }

        #third-party-integration #integration-pricing .integration-pricing__card > strong {
            position: relative;
            z-index: 1;
            display: block;
            margin: 0 0 24px;
            color: #52636a;
            font-size: 20px;
            line-height: 1.35;
        }

        #third-party-integration #integration-pricing .integration-pricing__card p {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: none;
            margin: 0 0 16px;
            color: #5d7077;
            font-size: 17px;
            line-height: 1.82;
        }

            #third-party-integration #integration-pricing .integration-pricing__card p:last-child {
                margin-bottom: 0;
            }

@media (max-width: 720px) {
    #third-party-integration #integration-pricing .integration-pricing__card {
        padding: 24px;
    }

        #third-party-integration #integration-pricing .integration-pricing__card h3 {
            font-size: 40px;
        }
}

@media (max-width: 480px) {
    #third-party-integration #integration-pricing .integration-pricing__card {
        padding: 20px;
        border-radius: 16px;
    }

        #third-party-integration #integration-pricing .integration-pricing__card h3 {
            font-size: 34px;
        }

        #third-party-integration #integration-pricing .integration-pricing__card > strong {
            margin-bottom: 20px;
            font-size: 18px;
        }

        #third-party-integration #integration-pricing .integration-pricing__card p {
            font-size: 16px;
            line-height: 1.75;
        }
}
