.faq {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    max-width: 922px;
    margin: 0 auto;
}
.faq__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    text-align: center;
    margin: 0 auto;
}
.faq__eyebrow {
    text-transform: uppercase;
    font-family: var(--font-family-subtitle);
    font-size: var(--fs-subtitle);
    font-weight: var(--fw-subtitle);
    line-height: var(--lh-subtitle);
    color: var(--color-placeholder);
    margin-bottom: var(--sp-1);
}
.faq__title {
    color: var(--color-title);
    font-family: var(--font-family-heading);
    font-size: var(--fs-title-lg);
    font-weight: var(--fw-title-lg);
    line-height: var(--lh-title-lg);
}

.faq__categories-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--sp-3);
}
.faq__categories-item {
    display: inline-block;
    width: fit-content;
}
.faq__categories-link,
.faq__categories-link:visited,
.faq__categories-link:hover {
    display: flex;
    padding: var(--sp-2) var(--sp-3);
    align-items: center;
    gap: var(--sp-1);
    border-radius: var(--sp-3);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}
.faq__categories-link--active,
.faq__categories-link--active:visited,
.faq__categories-link--active:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.faq__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-1);
}
.faq__item {
    width: 100%;
    border-radius: var(--border-radius);
    background: var(--color-white);
    padding: 14px 20px;
}
.faq__question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    list-style: none;
}
.faq__question::-webkit-details-marker {
    display: none;
}
.faq__question::marker {
    content: "";
}
.faq__question-text {
    font-weight: 600;
}
.faq__question-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    transform: rotate(0deg);
    transform-origin: center;
    transition: transform 0.2s ease;
}
.faq__question-icon svg {
    display: block;
}
.faq__item[open] .faq__question-icon {
    transform: rotate(45deg);
}
.faq__answer {
    display: flex;
    flex-direction: column;
    margin-top: var(--sp-2);
    gap: var(--sp-2);
}
.faq__answer-link,
.faq__answer-link:visited ,
.faq__answer-link:hover {
    color: var(--color-primary);
    font-weight: 500;
}