/* ============================================================
   TOKENS
   TODO: вынести в /css/tokens.css когда будет создан
   ============================================================ */

:root {
    /* Colors */
    --c-green:      #006746;
    --c-text:       #282828;
    --c-text-mute:  #333333;
    --c-text-dim:   #777777;
    --c-white:      #FFFFFF;
    --c-sand:       #FAF7F5;
    --c-dark:       #1A1919;
    --c-border:     #E6E6E6;
    --c-divider:    #D9D9D9;
    --c-stroke:     #E5E5E5;

    /* Font family */
    --font: Gilroy;

    /* Heading scale */
    --fs-h1: 60px;  --lh-h1: 68px;  --ls-h1: -0.60px;
    --fs-h2: 48px;  --lh-h2: 52px;  --ls-h2: -0.48px;
    --fs-h3: 44px;  --lh-h3: 48px;  --ls-h3: -0.50px;
    --fs-h4: 32px;  --lh-h4: 36px;  --ls-h4: -0.32px;
    --fs-h5: 28px;  --lh-h5: 34px;  --ls-h5: -0.14px;
    --fs-h6: 20px;  --lh-h6: 28px;

    /* Paragraph scale */
    --fs-p-lg: 18px;  --lh-p-lg: 26px;  --ls-p-lg: 0.18px;
    --fs-p-md: 16px;  --lh-p-md: 24px;  --ls-p-md: 0.16px;

    /* Label */
    --fs-label: 14px;  --lh-label: 20px;  --ls-label: 1.12px;
}

.built-for {
    padding-top: 80px;

     @media (max-width: 1199px) {
        padding-top: 56px;
    }
}


/* ============================================================
   Splide overrides
   ============================================================ */

.splide__arrow:not([disabled]) svg path,
.splide__arrow:not([disabled]) svg rect {
    stroke: var(--c-text-mute);
}


/* ============================================================
   Hero
   ============================================================ */

.hero {
    padding-top: 80px;
    background: linear-gradient(180deg, var(--c-sand) 0%, var(--c-white) 100%);

    & .hero__content {
        margin-bottom: 80px;
    }

    & .hero__content-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        align-self: stretch;
        margin-bottom: 32px;
    }

    & .hero__title {
        color: var(--c-green);
        text-align: center;
        font-kerning: none;
        font-feature-settings: 'liga' off;
        font-family: var(--font);
        font-size: var(--fs-label);
        font-weight: 600;
        line-height: var(--lh-label);
        letter-spacing: var(--ls-label);
        text-transform: uppercase;
    }

    & .hero__subtitle {
        color: var(--c-text);
        text-align: center;
        font-feature-settings: 'liga' off;
        font-family: var(--font);
        font-size: var(--fs-h1);
        font-weight: 700;
        line-height: var(--lh-h1);
        letter-spacing: var(--ls-h1);

        .dp_br { display: block; }
        .mb_br { display: none; }
    }

    & .hero__text {
        max-width: 640px;
        width: 100%;
        color: var(--c-text);
        text-align: center;
        font-family: var(--font);
        font-size: var(--fs-p-lg);
        font-weight: 400;
        line-height: 28px;
        letter-spacing: var(--ls-p-lg);

        br { display: none; }
    }

    & .button {
        margin-bottom: 24px;
    }

    @media (max-width: 1199px) {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    @media (max-width: 767px) {
        & .hero__content {
            margin-bottom: 32px;
        }

        & .hero__subtitle {
            font-size: var(--fs-h4);
            line-height: var(--lh-h4);
            letter-spacing: var(--ls-h4);

            .dp_br { display: none; }
            .mb_br { display: block; }
        }

        & .hero__text {
            font-size: var(--fs-p-md);
            line-height: var(--lh-p-md);
            letter-spacing: var(--ls-p-md);

            br { display: block; }
        }

        & .button {
            margin-bottom: 16px;
        }

        & .business-socials__text {
            font-size: var(--fs-label);
        }
    }
}


/* ============================================================
   Business Socials
   ============================================================ */

.business-socials {
    display: flex;
    justify-content: center;
    gap: 32px;
    padding-top: 2px;

    & .business-socials__item {
        display: flex;
        align-items: center;
        font-weight: 500;
    }

    & .business-socials__logo {
        height: 32px;
        width: 32px;
        margin-top: -2px;
        display: flex;
        margin-right: 8px;
        align-items: center;
        justify-content: center;
        border-radius: 100%;
        background-color: #F5F5F5;
    }

    & .business-socials__rating {
        color: var(--c-text-dim);
    }

    & .business-socials__link {
        gap: 2px;
        color: var(--c-text-dim);

        &:hover {
            color: var(--c-text);
        }
    }
}


/* ============================================================
   Customers Logo Slider
   ============================================================ */

.built-for .customers-logo-slider {
    padding-top: 64px;
    padding-bottom: 64px;
    background: var(--c-white);

    & .customers-logo-slider__title {
        width: 100%;
        display: block;
        text-align: center;
        margin-bottom: 24px;
        color: var(--c-text-dim);
        font-family: var(--font);
        font-size: var(--fs-label);
        font-weight: 600;
        line-height: var(--lh-label);
        letter-spacing: var(--ls-label);
        text-transform: uppercase;

        br { display: none; }
    }

    & .customers-logo-slider__wrapper {
        overflow: hidden;
        width: 100%;
        position: relative;
        mask-image: linear-gradient(
            90deg,
            transparent 0%,
            black 100px,
            black calc(100% - 100px),
            transparent 100%
        );
        -webkit-mask-image: linear-gradient(
            90deg,
            transparent 0%,
            black 100px,
            black calc(100% - 100px),
            transparent 100%
        );
    }

    & .customers-logo-slider__logos {
        display: flex;
        flex-wrap: nowrap;
        width: max-content;
        will-change: transform;
        gap: 56px;
    }

    & .customers-logo-slider__slide {
        flex-shrink: 0;

        & img {
            display: block;
            max-width: 100%;
        }
    }

    @media (max-width: 767px) {
        padding-top: 48px;
        padding-bottom: 48px;

        & .customers-logo-slider__title {
            letter-spacing: 0.56px;

            br { display: block; }
        }
    }
}


/* ============================================================
   Store Execution
   ============================================================ */

.store-execution {
    background: var(--c-white);

    & .store-execution__item:nth-child(even) .features {
        flex-flow: row-reverse;
    }

    & .features {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 80px;
        padding: 80px 0;
    }

    & .features__inner {
        flex: 1 0 0;
        min-width: 335px;
        padding: 72px 0;
    }

    & .features__label {
        color: var(--c-green);
        font-size: var(--fs-label);
        font-weight: 600;
        line-height: var(--lh-label);
        letter-spacing: var(--ls-label);
        text-transform: uppercase;
    }

    & .features__title {
        margin: 24px 0;
        color: var(--c-text);
        font-feature-settings: 'liga' off;
        font-family: var(--font);
        font-size: var(--fs-h2);
        font-weight: 700;
        line-height: var(--lh-h2);
        letter-spacing: var(--ls-h2);
    }

    & .features__text {
        color: var(--c-text);
        font-feature-settings: 'liga' off;
        font-family: var(--font);
        font-size: var(--fs-p-lg);
        font-weight: 400;
        line-height: var(--lh-p-lg);
        letter-spacing: var(--ls-p-lg);
    }

    & .features__picture {
        min-height: 362px;
        max-height: 618px;
        max-width: 618px;
        width: 100%;
    }

    @media (max-width: 767px) {
        padding-top: unset;
        padding-bottom: unset;

        & .store-execution__item:nth-child(even) .features {
            flex-flow: column-reverse;
        }

        & .features {
            padding-top: 48px;
            padding-bottom: 48px;
            gap: 32px;
            flex-direction: column-reverse;
        }

        & .features__inner {
            padding: unset;
        }

        & .features__title {
            margin: 12px 0;
            font-size: var(--fs-h5);
            line-height: var(--lh-h5);
            letter-spacing: var(--ls-h5);
        }

        & .features__text {
            font-size: var(--fs-p-md);
            line-height: var(--lh-p-md);
            letter-spacing: var(--ls-p-md);
        }
    }
}


/* ============================================================
   Execution CTA
   ============================================================ */

.execution-cta {
    padding-top: 88px;
    padding-bottom: 88px;
    background-color: var(--c-dark);
    position: relative;
    overflow: hidden;

    &::before {
        content: "";
        position: absolute;
        width: 1074px;
        height: 336px;
        left: calc(50% - (1074px / 2));
        top: -220px;
        border-radius: 1074px;
        opacity: 0.3;
        background: linear-gradient(90deg, #0F2 0%, #00EAFF 100%);
        filter: blur(120px);
        pointer-events: none;
    }

    & .execution-cta__wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 1;
    }

    & .execution-cta__img {
        margin-bottom: 32px;
    }

    & .execution-cta__header {
        margin-bottom: 32px;
    }

    & .execution-cta__title {
        margin-bottom: 16px;
        color: var(--c-white);
        text-align: center;
        font-feature-settings: 'liga' off;
        font-family: var(--font);
        font-size: var(--fs-h2);
        font-weight: 700;
        line-height: var(--lh-h2);
        letter-spacing: var(--ls-h2);
    }

    & .execution-cta__text {
        color: var(--c-white);
        text-align: center;
        font-feature-settings: 'liga' off;
        font-family: var(--font);
        font-size: var(--fs-p-lg);
        font-weight: 400;
        line-height: var(--lh-p-lg);
        letter-spacing: var(--ls-p-lg);
    }

    @media (max-width: 767px) {
        padding-top: 64px;
        padding-bottom: 64px;

        & .execution-cta__img {
            max-width: 280px;
        }

        & .execution-cta__title {
            margin-bottom: 12px;
            font-size: var(--fs-h4);
            line-height: var(--lh-h4);
            letter-spacing: var(--ls-h4);
        }

        & .execution-cta__text {
            font-size: var(--fs-p-md);
            line-height: var(--lh-p-md);
            letter-spacing: var(--ls-p-md);

            br { display: none; }
        }
    }
}


/* ============================================================
   Tools Connect
   ============================================================ */

.tools-connect {
    padding-top: 80px;
    padding-bottom: 80px;
    background: var(--c-sand);

    & .tools-connect__card {
        display: flex;
        gap: 64px;
        align-items: center;
        padding-bottom: 48px;
        border-bottom: 1px dashed rgba(0, 0, 0, 0.10);
    }

    & .tools-connect__picture {
        min-height: 362px;
        max-height: 557px;
        max-width: 557px;
        width: 100%;
    }

    & .tools-connect__inner {
        display: flex;
        flex-direction: column;
    }

    & .tools-connect__label {
        color: var(--c-green);
        font-kerning: none;
        font-feature-settings: 'liga' off;
        font-family: var(--font);
        font-size: var(--fs-label);
        font-weight: 600;
        line-height: var(--lh-label);
        letter-spacing: var(--ls-label);
        text-transform: uppercase;
    }

    & .tools-connect__title {
        margin: 16px 0;
        color: var(--c-text);
        font-feature-settings: 'liga' off;
        font-family: var(--font);
        font-size: var(--fs-h2);
        font-weight: 700;
        line-height: var(--lh-h2);
        letter-spacing: var(--ls-h2);
    }

    & .tools-connect__text {
        margin-bottom: 28px;
        color: var(--c-text);
        font-feature-settings: 'liga' off;
        font-family: var(--font);
        font-size: var(--fs-p-lg);
        font-weight: 400;
        line-height: var(--lh-p-lg);
        letter-spacing: var(--ls-p-lg);
    }

    & .tools-connect__checklist-item {
        display: flex;
        align-items: center;
        gap: 12px;
        color: var(--c-text);
        font-feature-settings: 'liga' off;
        font-family: var(--font);
        font-size: var(--fs-p-lg);
        font-weight: 500;
        line-height: var(--lh-p-lg);
        letter-spacing: var(--ls-p-lg);

        & span {
            display: inline-block;
            font-weight: inherit;
        }

        &:not(:last-child) {
            margin-bottom: 10px;
        }
    }

    & .tool-cards {
        padding-top: 48px;
        display: flex;
        justify-content: space-between;
        gap: 48px;
    }

    & .tool-cards__item {
        max-width: calc((100% - 96px) / 3);
    }

    & .tool-card__picture {
        margin-bottom: 24px;

        & img {
            border-radius: 24px;
        }
    }

    & .tool-card__title {
        margin-bottom: 8px;
        color: var(--c-text);
        font-feature-settings: 'liga' off;
        font-family: var(--font);
        font-size: var(--fs-h6);
        font-weight: 600;
        line-height: var(--lh-h6);
    }

    & .tool-card__text {
        color: var(--c-text);
        font-feature-settings: 'liga' off;
        font-family: var(--font);
        font-size: var(--fs-p-md);
        font-weight: 400;
        line-height: var(--lh-p-md);
        letter-spacing: var(--ls-p-md);
    }

    @media (max-width: 991px) {
        & .tools-connect__card {
            flex-wrap: wrap;
            justify-content: center;
        }
    }

    @media (max-width: 767px) {
        padding-top: 48px;
        padding-bottom: 48px;

        & .tools-connect__card {
            flex-direction: column;
            gap: 16px;
            padding-bottom: 32px;
        }

        & .tools-connect__title {
            font-size: var(--fs-h5);
            line-height: var(--lh-h5);
            letter-spacing: var(--ls-h5);
        }

        & .tools-connect__text {
            font-size: var(--fs-p-md);
            line-height: var(--lh-p-md);
            letter-spacing: var(--ls-p-md);
        }

        & .tools-connect__checklist-item {
            gap: 10px;
            font-size: var(--fs-p-md);
            line-height: var(--lh-p-md);
            letter-spacing: var(--ls-p-md);
        }

        & .tool-cards {
            padding-top: 32px;
            flex-wrap: wrap;
            justify-content: center;
        }

        & .tool-cards__item {
            max-width: 362px;
        }
    }
}


/* ============================================================
   Success Quotes
   ============================================================ */

.success-quotes {
    padding-top: 96px;
    padding-bottom: 96px;
    overflow: hidden;
    background: var(--c-white);

    & .splide__arrows {
        max-width: 1178px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }

    & .arrows_desktop {
        position: absolute;
        top: 69px;
        right: 53px;
    }

    & .success-quotes__header {
        max-width: 686px;

        & .success-quotes__title {
            margin-bottom: 24px;
            color: var(--c-text);
            font-feature-settings: 'ss02' on, 'ss03' on, 'liga' off;
            font-size: var(--fs-h3);
            font-weight: 700;
            line-height: var(--lh-h3);
            letter-spacing: -0.44px;
        }

        & .success-quotes__desc {
            color: var(--c-text);
            font-feature-settings: 'ss02' on, 'ss03' on, 'liga' off;
            font-size: var(--fs-p-lg);
            font-weight: 400;
            line-height: 28px;
            letter-spacing: var(--ls-p-lg);
        }
    }

    & .splide__track {
        margin-top: 48px;
        overflow: unset;
    }

    & .splide__list li:not(:last-child) {
        margin-right: 32px;
    }

    & .case-quote {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        padding: 16px;
        border-radius: 32px;
        background-color: var(--c-sand);

        & .case-quote__inner {
            padding: 24px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        & .poster {
            border-radius: 16px;
            align-self: center;
            max-height: 504px;
            width: 100%;
        }
    }

    & .case-quote__logo {
        max-width: 167px;
        margin-bottom: 20px;
        max-height: 56px;
    }

    & .case-quote__text {
        margin-bottom: 20px;

        & .case-quote__quote {
            color: var(--c-text);
            font-style: italic;
            font-size: 24px;
            line-height: 32px;
            letter-spacing: -0.5px;
        }
    }

    & .customer {
        margin-top: auto;

        & .profile {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 24px 0;

            & .profile__avatar {
                width: 48px;
                height: 48px;
                border-radius: 100%;
            }
        }

        & .cards-stats {
            display: flex;
            gap: 65px;
            position: relative;

            & li:last-child {
                border-left: 1px solid var(--c-divider);
                padding-left: 32px;
            }
        }
    }

    & .author__name {
        color: var(--c-text);
        font-size: var(--fs-p-md);
        font-weight: 600;
        line-height: var(--lh-p-md);
        letter-spacing: -0.16px;
    }

    & .author__position {
        color: var(--c-text-mute);
        font-size: var(--fs-p-md);
        line-height: var(--lh-p-md);
        letter-spacing: -0.16px;
    }

    & .card__num {
        color: var(--c-text);
        font-feature-settings: 'salt' on;
        font-size: var(--fs-h4);
        font-weight: 600;
        line-height: 40px;
    }

    & .card__text {
        color: var(--c-text-mute);
        font-size: var(--fs-label);
        font-weight: 400;
        line-height: var(--lh-label);
    }

    @media (max-width: 991px) {
        padding-top: 56px;
        padding-bottom: 56px;

        & .arrows_desktop {
            position: unset;
        }

        & .splide__arrows {
            flex-direction: row-reverse;
            justify-content: space-between;
            align-items: center;
        }

        & .splide__pagination {
            & .splide__pagination__page {
                padding: unset;
                margin: unset;
                width: 8px;
                height: 8px;
                background-color: var(--c-divider);
                border-radius: 100%;
                opacity: 1;

                &.is-active {
                    background: var(--c-text);
                }
            }

            & li {
                width: 24px;
                height: 24px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

        & .case-quote {
            grid-template-columns: 1fr;
            gap: 8px;
            padding: 8px;

            & .case-quote__inner {
                padding: 16px;
            }

            & .poster {
                grid-row: 1;
                border-radius: 24px;
                max-height: unset;
                width: unset;
            }
        }

        & .case-quote__logo {
            margin-bottom: 16px;
        }

        & .case-quote__text {
            margin-bottom: unset;

            & .case-quote__quote {
                font-size: 18px;
                font-weight: 400;
                line-height: 24px;
                letter-spacing: -0.2px;
            }
        }

        & .button {
            order: 1;
            width: 100%;
        }

        & .customer {
            & .cards-stats {
                justify-content: space-between;
                gap: 16px;
                margin-bottom: 24px;

                & li {
                    max-width: calc(50% - 8px);
                }

                & li:last-child {
                    border-left: none;
                    padding-left: unset;
                }

                & .card__num {
                    font-size: 20px;
                    line-height: 30px;
                    margin-bottom: 4px;
                }

                &::before {
                    display: none;
                }
            }
        }
    }

    @media (max-width: 767px) {
        & .success-quotes__header {
            & .success-quotes__title {
                font-size: var(--fs-h5);
                line-height: var(--lh-h5);
                letter-spacing: var(--ls-h5);
                margin-bottom: 16px;
            }

            & .success-quotes__desc {
                font-size: var(--fs-p-md);
                line-height: var(--lh-p-md);

                br { display: none; }
            }
        }

        & .splide__track {
            margin-top: 24px;
            margin-bottom: 24px;
        }
    }
}


/* ============================================================
   Additional Features
   ============================================================ */

.additional-features {
    overflow: hidden;
    background: var(--c-white);

    & .container {
        position: relative;
    }

    & .additional-features__header {
        margin-bottom: 48px;
        max-width: 680px;
        text-align: left;

        & .additional-features__title {
            color: var(--c-text);
            font-size: var(--fs-h3);
            font-weight: 700;
            line-height: var(--lh-h3);
            letter-spacing: -0.5px;
            margin-bottom: 24px;
        }

        & .additional-features__desc {
            color: var(--c-text-mute);
            font-size: var(--fs-p-lg);
            font-weight: 400;
            line-height: 28px;
        }
    }

    & .splide__track {
        overflow: unset;
    }

    & .additional-features__cards {
        display: flex;

        & li {
            max-width: 370px;

            &:not(:last-child) {
                margin-right: 32px;
            }
        }
    }

    & .splide-additional-features {
        margin: 0 auto;
        max-width: fit-content;
    }

    & .arrows_desktop {
        position: absolute;
        top: 69px;
        right: 53px;
    }

    & .feature-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 32px;
        border-radius: 24px;
        border: 1px solid var(--c-border);
        background: var(--c-white);
        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.04);

        & .feature-card__logo {
            width: 56px;
            height: 56px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-bottom: 24px;
            border-radius: 8px;

            &.orange { background-color: #FFF5EE; }
            &.purple { background-color: #F5ECFC; }
            &.mint   { background-color: #E6F5F1; }
            &.sky    { background-color: #ECF4FC; }
            &.rose   { background-color: #FCECEF; }
            &.lilac  { background-color: #EFECFC; }
        }

        & .feature-card__title {
            margin-bottom: 8px;
            font-size: var(--fs-h6);
            font-weight: 600;
            line-height: var(--lh-h6);

            & a {
                display: inline-flex;
                align-items: center;
                gap: 2px;
                color: inherit;
                font-size: inherit;
                font-weight: inherit;
                line-height: inherit;

                & span {
                    display: inline-block;
                    position: relative;
                }
            }
        }

        & .feature-card__text {
            color: var(--c-text-mute);
            font-size: var(--fs-p-md);
            font-weight: 400;
            line-height: var(--lh-p-md);
        }

        &:hover .feature-card__title a {
            color: var(--c-green);

            & span::after {
                display: block;
                position: absolute;
                content: "";
                height: 1px;
                left: 0;
                bottom: 3px;
                width: 100%;
                background-color: var(--c-green);
            }

            & svg path {
                fill: var(--c-green);
            }
        }
    }

    @media (max-width: 1199px) {
        padding: 48px 0;

        & .arrows_desktop {
            position: absolute;
            top: 100px;
            left: 80%;
        }
    }

    @media (max-width: 991px) {
        padding: 48px 0;

        & .additional-features__header {
            margin-bottom: 32px;

            & .additional-features__title {
                font-size: var(--fs-h4);
                line-height: var(--lh-h4);
                letter-spacing: -0.5px;
                margin-bottom: 16px;
            }

            & .additional-features__desc {
                font-size: var(--fs-p-md);
                line-height: var(--lh-p-md);
            }
        }

        & .additional-features__cards {
            & li {
                min-width: 320px;
                flex: 1 0 0;

                &:not(:last-child) {
                    margin-right: 16px;
                }
            }
        }

        & .feature-card {
            padding: 24px;
        }

        & .splide__track {
            margin-bottom: 32px;
        }

        & .splide__arrows {
            display: flex;
            flex-direction: row-reverse;
            justify-content: space-between;
        }

        & .arrows_desktop {
            position: unset;
        }

        & .splide__pagination {
            & .splide__pagination__page {
                padding: unset;
                margin: unset;
                width: 8px;
                height: 8px;
                background-color: var(--c-divider);
                border-radius: 100%;
                opacity: 1;

                &.is-active {
                    background: var(--c-text);
                }
            }

            & li {
                width: 24px;
                height: 24px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
}


/* ============================================================
   FAQ
   ============================================================ */

.built-for .faq {
    padding: 80px 0;
    margin: unset;
    background-color: var(--c-white);

    & .faq__title {
        margin-bottom: 48px;
        color: var(--c-text);
        font-feature-settings: 'liga' off;
        font-family: var(--font);
        font-size: var(--fs-h2);
        font-weight: 700;
        line-height: var(--lh-h2);
        letter-spacing: var(--ls-h2);
        text-align: start;
    }

    & .faq__list {
        display: flex;
        flex-direction: column;
    }

    & .faq__item {
        padding-bottom: 28px;
        border-top: 1px solid var(--c-stroke);

        &:last-child {
            border-bottom: 1px solid var(--c-stroke);
        }
    }

    & .faq__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding-top: 32px;
        cursor: pointer;
        user-select: none;
    }

    & .faq__question {
        margin-bottom: 4px;
        color: var(--c-text);
        font-size: var(--fs-h6);
        font-weight: 600;
        line-height: var(--lh-h6);
        flex: 1;
    }

    & .faq__icon {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;

        &::before,
        &::after {
            content: '';
            position: absolute;
            background-color: var(--c-text-dim);
            border-radius: 2px;
            transition: transform 0.417s cubic-bezier(0.35, 0, 0.25, 1), background-color 0.2s ease;
            will-change: transform;
        }

        &::before {
            width: 16px;
            height: 2px;
        }

        &::after {
            width: 2px;
            height: 16px;
        }
    }

    & .faq__header:hover .faq__icon::before,
    & .faq__header:hover .faq__icon::after {
        background-color: var(--c-text);
    }

    & .faq__item--open .faq__icon {
        &::before {
            transform: rotate(180deg);
        }

        &::after {
            transform: rotate(90deg);
        }
    }

    & .faq__body {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
    }

    & .faq__answer {
        max-width: 560px;
        padding-top: 8px;
        color: var(--c-text);
        font-feature-settings: 'liga' off;
        font-family: var(--font);
        font-size: var(--fs-p-md);
        font-weight: 400;
        line-height: var(--lh-p-md);
        letter-spacing: var(--ls-p-md);
        opacity: 0;
        transition: opacity 0.25s ease 0.1s;
    }

    & .faq__item--open .faq__answer {
        opacity: 1;
    }

    @media (max-width: 991px) {
        padding: 48px 0;

        & .faq__title {
            font-size: var(--fs-h4);
            line-height: var(--lh-h4);
            letter-spacing: -0.5px;
            margin-bottom: 32px;
        }

        & .faq__question {
            font-size: var(--fs-p-lg);
            line-height: var(--lh-p-lg);
        }
    }

    @media (max-width: 767px) {
        & .faq__item {
            padding-bottom: 20px;
        }

        & .faq__question {
            font-size: var(--fs-p-md);
            line-height: var(--lh-p-md);
        }

        & .faq__header {
            padding-top: 20px;
        }
    }
}