@layer components {
    .faq-section { margin-top: var(--space-12); }
    .faq-title { font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--space-5); color: var(--primary-600); }
    .faq-item { border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: var(--space-2); overflow: hidden; }
    .faq-question {
        padding: var(--space-4) var(--space-5); background: var(--steel-50); cursor: pointer;
        display: flex; justify-content: space-between; align-items: center;
        font-weight: 600; font-size: var(--text-sm); color: var(--steel-800);
    }
    .faq-question::after {
        content: '+'; font-size: var(--text-lg); color: var(--primary-600);
        transition: transform var(--transition);
    }
    .faq-item.open .faq-question::after { content: '\2212'; }
    .faq-answer {
        padding: 0 var(--space-5); max-height: 0; overflow: hidden;
        transition: all var(--duration-normal) var(--ease-default);
        font-size: var(--text-sm); color: var(--steel-600); line-height: var(--leading-relaxed);
    }
    .faq-item.open .faq-answer { padding: var(--space-4) var(--space-5); max-height: 600px; }
}