.faq {
    background: var(--corp-color-white);
    padding: 86px 0 56px 0;

    @media (width >=768px) {
        padding: 82px 0 105px 0;
    }

    @media (width >=1200px) {
        padding: 138px 0 23px 0;
    }
}

.faq__eyebrow {
    color: var(--corp-color-neutral-black);
    opacity: 0.4;
    font-size: var(--corp-type-mobile-body-1-font-size);
    font-weight: var(--fw-500);
    text-transform: uppercase;
    line-height: var(--corp-type-mobile-body-1-line-height);
    margin-bottom: 16px;

    @media (width >=768px) {
        line-height: var(--corp-type-tablet-body-8-line-height);
    }

    @media (width >=1200px) {
        font-size: var(--corp-type-desktop-heading-4-font-size);
        line-height: var(--corp-type-desktop-heading-3xl-line-height);
        letter-spacing: -0.4px;
        margin-bottom: 24px;
    }
}

.faq__heading {
    width: 100%;
    font-size: var(--corp-type-mobile-display-3-font-size);
    font-weight: var(--fw-400);
    line-height: var(--corp-type-mobile-display-5-line-height);
    letter-spacing: -0.56px;
    color: var(--corp-color-neutral-black);
    margin-bottom: 40px;

    strong {
        font-weight: var(--fw-400);
        color: var(--corp-color-primary);
    }

    @media (width >=768px) {
        margin-bottom: 32px;
        font-size: var(--corp-type-tablet-display-font-size);
        letter-spacing: -0.42px;
    }

    @media (width >=1200px) {
        color: var(--corp-color-primary);
        margin-bottom: 60px;
        font-size: var(--corp-type-desktop-heading-xxl-font-size);
        line-height: var(--corp-type-desktop-caption-6-line-height);
        letter-spacing: -1.5px;
    }
}

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

.faq__item {
    border-bottom: 1px solid var(--secondary-gray-200);

    &[open] {
        .faq__answer {
            display: block;
        }

        .faq__answer-content {
            padding-bottom: 24px;
        }

        .faq__icon--plus {
            display: none;
        }

        .faq__icon--minus {
            display: block;
        }
    }
}

.faq__answer {
    display: none;
}

.faq__icon--minus {
    display: none;
}

.faq__question {
    width: 100%;
    padding: 20px 0;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    cursor: pointer;
    text-align: left;
    list-style: none;

    &::-webkit-details-marker {
        display: none;
    }

    &::marker {
        display: none;
    }

    @media (width >=768px) {
        padding: 14px 0;
    }

    @media (width >=1200px) {
        padding: 24px 0;
    }


}

.faq__question-text {
    font-size: var(--corp-type-mobile-heading-2-medium-font-size);
    font-weight: var(--fw-400);
    line-height: var(--corp-type-mobile-heading-1-regular-line-height);
    letter-spacing: -0.16px;
    color: var(--corp-color-neutral-black);

    @media (width >=768px) {
        font-size: var(--corp-type-tablet-heading-1-font-size);
        line-height: var(--corp-type-cta-2-line-height);
        letter-spacing: -0.14px;
    }

    @media (width >=1200px) {
        font-size: var(--corp-type-desktop-heading-2-font-size);
        line-height: var(--corp-type-desktop-heading-2-line-height);
    }
}

.faq__question-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--corp-color-primary);

    @media (width >=768px) {
        width: 16px;
        height: 16px;
    }

    @media (width >=1200px) {
        width: 32px;
        height: 32px;
    }
}


.faq__answer-content {
    overflow: hidden;
    padding-right: 48px;
    padding-bottom: 0;
    font-size: var(--corp-type-mobile-tag-2-font-size);
    line-height: var(--corp-type-mobile-body-3-line-height);
    color: var(--corp-color-neutral-black);
    opacity: 0.8;

    @media (width >=768px) {
        max-width: 85%;
        font-size: var(--corp-type-tablet-body-1-font-size);
        line-height: var(--corp-type-tablet-body-8-line-height);
    }

    @media (width >=1200px) {
        font-size: var(--corp-type-desktop-heading-4-font-size);
        line-height: var(--corp-type-desktop-heading-5-line-height);
    }

    p {
        margin: 0 0 16px;
    }

    p:last-child {
        margin-bottom: 0;
    }

    ul,
    ol {
        margin: 0 0 16px;
        padding-left: 20px;
    }

    li {
        margin-bottom: 8px;
    }

    a {
        color: var(--corp-color-primary);
        text-decoration: underline;
    }

    strong,
    b {
        font-weight: var(--fw-600);
    }
}