/* Ported verbatim from MKT-342 mockup CSS (commission-benchmark-page-1-standalone.html). */

.faq__list {
    max-width: 820px;
    margin-inline: auto;
    margin-top: var(--var-40);
}

.faq__item {
    border-top: var(--var-1) solid var(--color-stroke);
}

.faq__item:last-child {
    border-bottom: var(--var-1) solid var(--color-stroke);
}

.faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--var-16);
    list-style: none;
    cursor: pointer;
    padding-block: var(--var-20);
    font-family: var(--font-heading);
    font-size: var(--h6);
    font-weight: 600;
    color: var(--color-1st-fg);
}

.faq__q::-webkit-details-marker {
    display: none;
}

.faq__icon {
    position: relative;
    flex: none;
    width: var(--var-20);
    height: var(--var-20);
    color: var(--color-1st-brd);
    transition: transform 0.2s ease;
}

.faq__icon::before,
.faq__icon::after {
    content: '';
    position: absolute;
    background: currentColor;
}

.faq__icon::before {
    top: 50%;
    left: 0;
    right: 0;
    height: var(--var-2);
    transform: translateY(-50%);
}

.faq__icon::after {
    left: 50%;
    top: 0;
    bottom: 0;
    width: var(--var-2);
    transform: translateX(-50%);
}

details[open] .faq__icon {
    transform: rotate(45deg);
}

.faq__a {
    margin: 0;
    padding: 0 0 var(--var-24);
    font-size: var(--label-lg);
    line-height: 1.6;
    color: var(--color-body);
    max-width: 74ch;
}

@media (prefers-reduced-motion: reduce) {
    .faq__icon {
        transition: none;
    }
}