@keyframes faq-reveal {
    0% {
        opacity: 0;
        transform: translateY(-2px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

:root {
    --faq-radius: var(--radius, 8px);
    --faq-gap: var(--spacing, 1rem);
    --faq-gap-sm: var(--spacingHalf, .5rem);
    --faq-border: var(--color-border, #e3e6ea);
    --faq-bg: #fff;
    --faq-text: var(--color-text, #0f172a);
    --faq-accent: var(--color-primary, #0d1b2a);
    --faq-accent-2: var(--color-secondary, #ffc857);
    --faq-shadow: 0 2px 10px #0000000f
}

details+details,
h2+details {
    margin-top: var(--faq-gap)
}

details {
    background: var(--faq-bg);
    border: 1px solid var(--faq-border);
    border-radius: var(--faq-radius);
    box-shadow: var(--card-shadow, var(--faq-shadow));
    overflow: hidden
}

summary {
    cursor: pointer;
    padding: calc(var(--faq-gap) - 2px)var(--faq-gap);
    color: var(--faq-text);
    align-items: center;
    gap: var(--faq-gap-sm);
    user-select: none;
    outline: 0;
    font-weight: 600;
    list-style: none;
    display: flex;
    position: relative
}

summary::-webkit-details-marker {
    display: none
}

summary::marker {
    content: ""
}

summary:before {
    content: "";
    width: 1.1rem;
    height: 1.1rem;
    color: var(--faq-accent);
    background-color: currentColor;
    flex: 0 0 1.1rem;
    transition: transform .18s;
    transform: rotate(0);
    -webkit-mask: url(/img/icons/chevron-down.svg) 50%/contain no-repeat;
    mask: url(/img/icons/chevron-down.svg) 50%/contain no-repeat
}

details[open] summary:before {
    transform: rotate(180deg)
}

summary:hover {
    background: color-mix(in oklab, var(--faq-accent)8%, #fff)
}

summary:focus-visible {
    outline: 2px solid var(--faq-accent-2);
    outline-offset: 2px;
    border-radius: var(--faq-radius)
}

details>:not(summary) {
    padding: 0 var(--faq-gap)var(--faq-gap);
    color: var(--faq-text)
}

details[open]>:not(summary) {
    animation: .16s faq-reveal
}

details p {
    margin: var(--faq-gap-sm)0 0;
    line-height: 1.55
}

main a {
    text-decoration: underline
}

main h2 {
    text-align: center
}