.f4f-article-faq {
    --f4f-faq-text: #111827;
    --f4f-faq-muted: #475569;
    --f4f-faq-surface: #ffffff;
    --f4f-faq-surface-open: #f8fafc;
    --f4f-faq-border: #dbe3ee;
    --f4f-faq-accent: #187447;
    --f4f-faq-accent-soft: #eaf6ef;
    --f4f-faq-shadow: 0 3px 12px rgba(15, 23, 42, .055);
    width: 100%;
    max-width: 900px;
    margin: 2.4rem auto 1.5rem;
    color: var(--f4f-faq-text);
    font-family: inherit;
}

.f4f-article-faq__title {
    margin: 0 0 1.15rem;
    color: var(--f4f-faq-text);
    font-size: clamp(1.55rem, 4vw, 1.9rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.025em;
}

.f4f-article-faq__list {
    display: grid;
    gap: .7rem;
}

.f4f-article-faq__item {
    margin: 0;
    overflow: clip;
    border: 1px solid var(--f4f-faq-border);
    border-radius: .72rem;
    background: var(--f4f-faq-surface);
    box-shadow: var(--f4f-faq-shadow);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.f4f-article-faq__item:hover {
    border-color: color-mix(in srgb, var(--f4f-faq-accent) 40%, var(--f4f-faq-border));
}

.f4f-article-faq__item[open] {
    border-color: color-mix(in srgb, var(--f4f-faq-accent) 48%, var(--f4f-faq-border));
    background: var(--f4f-faq-surface-open);
    box-shadow: 0 7px 20px rgba(15, 23, 42, .075);
}

.f4f-article-faq__question {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2rem;
    align-items: center;
    gap: 1rem;
    min-height: 3.8rem;
    padding: .85rem 1rem .85rem 1.1rem;
    color: var(--f4f-faq-text);
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.45;
    list-style: none;
    cursor: pointer;
}

.f4f-article-faq__question::-webkit-details-marker { display: none; }
.f4f-article-faq__question::marker { content: ''; }

.f4f-article-faq__question:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--f4f-faq-accent) 28%, transparent);
    outline-offset: -3px;
}

.f4f-article-faq__icon {
    position: relative;
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 50%;
    background: var(--f4f-faq-accent-soft);
    color: var(--f4f-faq-accent);
    transition: background .18s ease, transform .18s ease;
}

.f4f-article-faq__icon::before,
.f4f-article-faq__icon::after {
    content: '';
    position: absolute;
    width: .8rem;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.f4f-article-faq__icon::after {
    transform: rotate(90deg);
    transition: transform .18s ease, opacity .18s ease;
}

.f4f-article-faq__item[open] .f4f-article-faq__icon {
    background: var(--f4f-faq-accent);
    color: #fff;
}

.f4f-article-faq__item[open] .f4f-article-faq__icon::after {
    opacity: 0;
    transform: rotate(0);
}

.f4f-article-faq__answer {
    padding: .95rem 1.1rem 1.15rem;
    border-top: 1px solid var(--f4f-faq-border);
    color: var(--f4f-faq-muted);
    font-size: .98rem;
    line-height: 1.72;
}

.f4f-article-faq__answer > :first-child { margin-top: 0; }
.f4f-article-faq__answer > :last-child { margin-bottom: 0; }
.f4f-article-faq__answer p { margin: 0 0 .85rem; }
.f4f-article-faq__answer ul,
.f4f-article-faq__answer ol { margin: .7rem 0 .85rem 1.35rem; padding: 0; }
.f4f-article-faq__answer li { margin: 0 0 .35rem; }
.f4f-article-faq__answer a {
    color: var(--f4f-faq-accent);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: .14em;
}

html[data-theme="dark"] .f4f-article-faq,
body.dark-mode .f4f-article-faq,
body.is-dark .f4f-article-faq,
.dark .f4f-article-faq {
    --f4f-faq-text: #edf4ff;
    --f4f-faq-muted: #bdc9d9;
    --f4f-faq-surface: #142235;
    --f4f-faq-surface-open: #182940;
    --f4f-faq-border: #34465e;
    --f4f-faq-accent: #67d394;
    --f4f-faq-accent-soft: #203e36;
    --f4f-faq-shadow: 0 5px 18px rgba(0, 0, 0, .22);
}

@media (prefers-color-scheme: dark) {
    .f4f-article-faq {
        --f4f-faq-text: #edf4ff;
        --f4f-faq-muted: #bdc9d9;
        --f4f-faq-surface: #142235;
        --f4f-faq-surface-open: #182940;
        --f4f-faq-border: #34465e;
        --f4f-faq-accent: #67d394;
        --f4f-faq-accent-soft: #203e36;
        --f4f-faq-shadow: 0 5px 18px rgba(0, 0, 0, .22);
    }

    html[data-theme="light"] .f4f-article-faq,
    body.light-mode .f4f-article-faq,
    body.is-light .f4f-article-faq {
        --f4f-faq-text: #111827;
        --f4f-faq-muted: #475569;
        --f4f-faq-surface: #ffffff;
        --f4f-faq-surface-open: #f8fafc;
        --f4f-faq-border: #dbe3ee;
        --f4f-faq-accent: #187447;
        --f4f-faq-accent-soft: #eaf6ef;
        --f4f-faq-shadow: 0 3px 12px rgba(15, 23, 42, .055);
    }
}

@media (max-width: 600px) {
    .f4f-article-faq { margin-top: 2rem; }
    .f4f-article-faq__question {
        grid-template-columns: minmax(0, 1fr) 1.8rem;
        gap: .7rem;
        min-height: 3.55rem;
        padding: .78rem .82rem .78rem .9rem;
        font-size: .95rem;
    }
    .f4f-article-faq__icon { width: 1.8rem; height: 1.8rem; }
    .f4f-article-faq__answer { padding: .85rem .9rem 1rem; font-size: .93rem; }
}

@media (prefers-reduced-motion: reduce) {
    .f4f-article-faq__item,
    .f4f-article-faq__icon,
    .f4f-article-faq__icon::after { transition: none; }
}