/* FAQ page specific styles (built on base.css) */
.faq-hero { padding: var(--space-10) 0 var(--space-6); background: linear-gradient(180deg, rgb(14 20 36 / 0.6), transparent); }
.faq-hero h1 { margin-bottom: var(--space-3); }
.faq-controls { display: grid; gap: var(--space-4); grid-template-columns: 1fr; margin-top: var(--space-5); }
.faq-controls input[type='search'] { max-width: 720px; }
.faq-actions { display: inline-flex; gap: var(--space-3); flex-wrap: wrap; }
.faq-hero__media { margin-top: var(--space-6); }

.accordion { margin-top: var(--space-6); display: grid; gap: var(--space-4); }
.accordion__item { border: 1px solid var(--gray-700); border-radius: var(--radius-lg); background: var(--color-surface-2); box-shadow: var(--shadow-sm); overflow: hidden; }
.accordion__item summary { list-style: none; cursor: pointer; padding: var(--space-5) var(--space-6); position: relative; }
.accordion__item summary::-webkit-details-marker { display: none; }
.accordion__item summary h3 { margin: 0; font-size: var(--fs-2xl); }
.accordion__panel { padding: 0 var(--space-6) var(--space-6); }
.accordion__item[open] .accordion__panel { animation: panelIn var(--transition-slow) ease; }
@keyframes panelIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* caret indicator */
.accordion__item summary::after { content: '\25BC'; position: absolute; right: var(--space-6); top: 50%; transform: translateY(-50%) rotate(0deg); color: var(--gray-300); transition: transform var(--transition-normal) ease; }
.accordion__item[open] summary::after { transform: translateY(-50%) rotate(-180deg); }

.faq-figure { margin: var(--space-6) 0; }

.faq-cta { margin: var(--space-10) 0 var(--space-12); text-align: center; }
.faq-cta__actions { display: inline-flex; gap: var(--space-4); margin-top: var(--space-3); flex-wrap: wrap; }

/* Responsive tweaks */
@media (min-width: 768px) {
  .faq-controls { grid-template-columns: 1fr auto; align-items: center; }
}