#faq.section-wrapper {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    gap: var(--grid-gap);
    align-items: start;
    --faq-border: 1px solid var(--jet-black);

    h2 {
        font-size: var(--fs-display);
        grid-column: 1 / span 4;
    }

    .faq-section-content {
        grid-column: 5 / span 7;
        min-width: 0;
        margin-top: var(--space-xxl);

        @media (max-width: 64rem) {
            margin-top: var(--space-xl);
        }
    }

    .faq-category-tabs {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
        margin-block: var(--space-xs);
    }
    
    .faq-category-tab {
        outline: 1px solid var(--jet-black);
        appearance: none;
        border: 0;
        border-radius: var(--space-xxs);
        padding: var(--space-sm) var(--space-base);
        font: inherit;
        font-size: var(--fs-md);
        line-height: 1;
        cursor: pointer;
        
        transition: color 300ms var(--out), background-color 300ms var(--out), background-size 300ms var(--out), opacity 300ms var(--out), transform 300ms var(--out);
    }
    .faq-category-tab:hover {
        background-color: rgb(210, 210, 210);
    }

    .faq-category-tab:last-child {
        border-right: 0;
    }

    .faq-category-tab[aria-selected="true"] {
        background: var(--jet-black, #000);
        color: var(--the-white, #fff);
    }

    .faq-category-tab:focus-visible,
    .faq-question-trigger:focus-visible {
        outline: 2px solid var(--color-accent, #ff0035);
        outline-offset: 1px;
    }

    .faq-category-panel {
        max-width: none;
        animation: faq-fade-in 260ms ease;
    }

    .faq-question-list {
        gap: var(--space-xxs);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .faq-question-item {
        border-bottom: 0.5px solid var(--jet-black);
    }

    .faq-question-item h3 {
        margin: 0;
    }

    .faq-question-trigger {
        width: 100%;
        border: 0;
        background: transparent;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.25rem;
        text-align: left;
        padding: var(--space-base) var(--space-xs);
        font: inherit;
        font-size: var(--fs-md);
        border-radius: 0;
        transition: color 300ms var(--out), background-color 300ms var(--out), background-size 300ms var(--out), opacity 300ms var(--out), transform 300ms var(--out);
    }

    .faq-question-trigger:hover {
        background: var(--silver);
    }

    .faq-question-title {
        max-width: 60ch;
    }

    .faq-question-icon {
        position: relative;
        inline-size: var(--space-md);
        block-size: var(--space-md);
        flex: 0 0 var(--space-md);
    }

    .faq-question-icon::before,
    .faq-question-icon::after {
        content: "";
        position: absolute;
        inset: 50% auto auto 50%;
        width: 1rem;
        height: 2px;
        background: currentColor;
        transform: translate(-50%, -50%);
        transition: transform 240ms ease, opacity 220ms ease;
    }

    .faq-question-icon::after {
        transform: translate(-50%, -50%) rotate(90deg);
    }

    .faq-question-trigger[aria-expanded="true"] {
        border-radius: var(--space-sm) var(--space-sm) 0 0;
    }
    .faq-question-trigger[aria-expanded="true"] .faq-question-icon::after {
        transform: translate(-50%, -50%) rotate(90deg) scaleX(0.08);
        opacity: 0;
    }

    .faq-answer-panel {
        overflow: hidden;
        height: 0;
        transition: height 320ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .faq-answer-content {
        padding: 0 var(--space-sm) var(--space-md);
        text-wrap: balance;
        max-width: 75ch;
    }

    .faq-answer-content p:first-child {
        margin-top: 0;
    }

    .faq-answer-content ul {
        margin: 0;
        padding: var(--space-sm) var(--space-lg);
    }

    .faq-empty-state {
        margin: 0;
        padding: var(--space-sm) 0;
        color: color-mix(in srgb, var(--color-text, #111) 68%, transparent);
    }
}

@media (max-width: 64rem) {
    #faq.section-wrapper {
        .faq-section-content {
            grid-column: 2 / span 7;
        }

        .faq-question-trigger {
            gap: var(--space-xs);
            padding: var(--space-xs);
        }

        .faq-answer-content {
            gap: var(--space-xs);
            padding: 0 var(--space-xs) var(--space-sm);
            font-size: var(--fs-sm);
            line-height: 1.05;
        }
    }
}

@media (max-width: 48rem) {
    #faq.section-wrapper {
        h2 {
            grid-column: 1 / -1;
            padding-inline: var(--space-xs);
        }

        .faq-section-content {
            grid-column: 1 / -1;
            padding-inline: var(--space-xs);
        }

        .faq-category-tabs {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .faq-category-tab {
            padding: var(--space-xs) var(--space-sm);
            font-size: var(--fs-md);
        }

        .faq-question-trigger {
            gap: var(--space-xs);
            padding: var(--space-xs);
            font-size: var(--fs-sm);
        }

        .faq-question-trigger[aria-expanded="true"] {
           padding-bottom: 0;
        }

        .faq-answer-content {
            padding-bottom: 1rem;
        }
    }
}

@keyframes faq-fade-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

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