.c-faq .container {
    padding-block: 40px;
}

.c-faq .container > .h2 {
    color: var(--p1-color);
    margin-bottom: 32px;
}

.c-faq .container > .body > * {
    margin-top: 0;
    margin-bottom: 32px;
    color: var(--p2-color);
    max-width: 571px;
}

.c-faq .container > .body a {
    color: var(--s1-color);
    border-bottom: 1px solid transparent;
}

.c-faq .container > .body a:hover {
    border-bottom: 1px solid var(--s1-color);
}

.c-faq .container .c-faq__list .c-faq__item {
    cursor: pointer;
    border-top: 1px solid #D1DAE2;
    padding: 18px 5px;
    position: relative;
}

.c-faq .container .c-faq__item:hover {
    background-color: var(--t1-color);
}

.c-faq .container .c-faq__item:hover .h3 {
    color: var(--s-color);
}

.c-faq .container .c-faq__item:hover .h3::before {
    background-color: var(--s-color);
}

.c-faq .container .c-faq__item:hover .h3::after {
    background-color: var(--s-color);
}

.c-faq .container .c-faq__item .h3::before {
    content: '';
    background: var(--p1-color);
    height: 17px;
    width: 2px;
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translate(0, -50%);
    transition: all 0.2s ease-in-out;
}

.c-faq .container .c-faq__item .h3::after {
    content: '';
    background: var(--p1-color);
    height: 2px;
    width: 16px;
    position: absolute;
    top: 50%;
    right: 7px;
    transform: translate(0, -50%);
}

.c-faq .container .c-faq__list .c-faq__item:last-child {
    border-bottom: 1px solid #D1DAE2;
}

.c-faq .container .c-faq__list .c-faq__item .h3{
    cursor: pointer;
    margin: 0;
    color: var(--p1-color);
    position: relative;
    padding-right: 30px;
    font-size: 20px;
}

.c-faq__list .c-faq__item .body > * {
    color: var(--p2-color);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
    height: 0;
    margin: 0;
}

.c-faq__list .c-faq__item.is-active .body > * {
    opacity: 1;
    visibility: visible;
    height: auto;
    margin: 26px 0 20px;
}

.c-faq__list .c-faq__item .body a {
    color: var(--s1-color);
    border-bottom: 1px solid transparent;
}

.c-faq__list .c-faq__item .body a:hover {
    border-bottom: 1px solid var(--s1-color);
}

.c-faq .container .c-faq__item.is-active .h3::before {
    transform: translate(0, -50%) rotate(90deg);
}

.c-faq .o-button {
    margin-top: 32px;
    color: var(--p1-color);
}

/* Variant 2 */
.c-faq.c-faq--variant-2 .container {
    padding-top: 30px;
}

.c-faq.c-faq--variant-2 .container > .h2 {
    margin-bottom: 32px;
}

@media screen and (min-width: 1024px) {
    .c-faq .container {
        padding-block: 100px;
    }

    .c-faq.c-faq--variant-2 .container {
        padding-bottom: 0;
    }

    .c-faq .container .c-faq__list .c-faq__item {
        padding: 26px 10px;
    }

    .c-faq .container .c-faq__list .c-faq__item .h3 {
        font-size: 32px;
    }
}

/* Global FAQ block inside the happy client section (OW-3458, ported from co OW-3263).
   Scoped so the FAQs on the role/industry/team builder templates keep their styling. */
.c-happy-client .c-faq {
    background: var(--w-color);
    position: relative;
    z-index: 10;
    overflow: hidden;
}

.c-happy-client .c-faq .container > .h2 {
    margin-bottom: 16px;
}

.c-happy-client .c-faq__list .c-faq__item.is-active .body ul,
.c-happy-client .c-faq__list .c-faq__item.is-active .body ol {
    padding-left: 24px;
}

/* The FAQ replaces the gap the specialist diagonal used to fill, so drop the
   diagonal and let the specialist card sit on its own background */
.c-happy-client .c-faq ~ .c-happy-client-talk-to-specialist {
    margin-top: 0;
    min-height: 900px;
}

.c-happy-client .c-faq ~ .c-happy-client-talk-to-specialist::before {
    display: none;
}

.c-happy-client .c-faq ~ .c-happy-client-talk-to-specialist .wrapper {
    min-height: 900px;
}

.c-happy-client .c-faq ~ .c-happy-client-talk-to-specialist .wrapper .container {
    margin-top: -573px;
}

@media screen and (min-width: 1024px) {
    /* Smaller questions so the longer ones fit on one line (Mike, co OW-3263) */
    .c-happy-client .c-faq .container .c-faq__list .c-faq__item .h3 {
        font-size: 24px;
    }

    .c-happy-client .c-faq ~ .c-happy-client-talk-to-specialist .wrapper .container {
        margin-top: 0;
    }
}