/* P26M — homepage FAQ.
 * Plain <details>/<summary> accordion: no JS, keyboard-accessible natively.
 */

.faq {
    padding-block: var(--section-pad-y);
    position: relative;
    isolation: isolate;
}

.faq::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 55% at 50% 0%, var(--color-brand-glow-soft) 0%, transparent 65%);
    z-index: -1;
    pointer-events: none;
}

.faq__head { max-width: 640px; margin-inline: auto; text-align: center; margin-bottom: var(--space-8); }

.faq__list {
    max-width: 800px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.faq__item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-elevated);
    overflow: hidden;
    transition: border-color var(--dur-base) var(--ease-out);
}

.faq__item[open] { border-color: var(--color-border-strong); }

.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--color-text);
    transition: background var(--dur-fast) var(--ease-out);
}

/* Native marker replaced by .faq__chevron so open/closed state matches the
   rotation language used elsewhere (e.g. header nav caret), not the browser
   default triangle. */
.faq__question::-webkit-details-marker { display: none; }
.faq__question::marker { content: ''; }

.faq__question:hover { background: var(--color-overlay); }

.faq__chevron {
    width: 18px;
    height: 18px;
    color: var(--color-brand);
    flex-shrink: 0;
    transition: transform var(--dur-base) var(--ease-out);
}

.faq__item[open] .faq__chevron { transform: rotate(90deg); }

.faq__answer {
    margin: 0;
    padding: 0 var(--space-6) var(--space-6);
    font-size: var(--fs-base);
    color: var(--color-text-secondary);
    line-height: 1.65;
    max-width: 65ch;
}