/* FAQ page specific styles – scoped to .faq-page to avoid conflicts */
.faq-page .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.faq-page .lead { font-size: 1.125rem; color: var(--text-muted, #3e4a59); }
.faq-page .faq-hero { padding: 3rem 0 1rem; background: linear-gradient(180deg, rgba(33,88,170,0.08), transparent); }
.faq-page .faq-hero__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2rem; align-items: center; }
.faq-page .faq-hero__media img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.12); }

.faq-page .faq-search { display: grid; grid-template-columns: 1fr auto; gap: .75rem; margin: 1rem 0; }
.faq-page .faq-search input[type="search"] { padding: .8rem 1rem; border-radius: 10px; border: 1px solid var(--border, #d7dce2); }
.faq-page .faq-search .btn { padding: .8rem 1rem; border-radius: 10px; }
.faq-page .hint { font-size: .9rem; color: var(--text-muted, #566173); grid-column: 1/-1; margin: 0; }
.faq-page .results-count { font-size: .9rem; color: var(--text-muted, #566173); grid-column: 1/-1; }

.faq-page .faq-shortcuts ul { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none; margin: 1rem 0 0; }
.faq-page .faq-shortcuts a { display: inline-block; padding: .5rem .75rem; border-radius: 999px; border: 1px solid var(--border, #d7dce2); background: #fff; text-decoration: none; font-size: .9rem; }

.faq-page .faq-section { padding: 2.5rem 0; }
.faq-page .section-header { margin-bottom: 1rem; }
.faq-page .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.faq-page .two-col img { width: 100%; height: auto; border-radius: 12px; }

.faq-page .feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.faq-page .feature-grid li { background: #fff; border: 1px solid var(--border, #e6ebf2); border-radius: 12px; padding: 1rem; box-shadow: 0 2px 10px rgba(0,0,0,.03); }

.faq-page .wide-media img { width: 100%; height: auto; border-radius: 12px; }

.faq-page .steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: .75rem; }
.faq-page .steps li { background: #fff; border: 1px solid var(--border, #e6ebf2); border-radius: 12px; padding: 1rem; }

.faq-page .cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.faq-page .card { background: #fff; border: 1px solid var(--border, #e6ebf2); border-radius: 12px; padding: 1rem; }

.faq-page .tips { display: grid; gap: .5rem; padding-left: 1.2rem; }

.faq-page .requirements { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: start; }
.faq-page .requirements .cta { display: flex; gap: .75rem; align-items: center; }

/* Accessible accordion */
.faq-page .faq-accordion { display: grid; gap: .5rem; }
.faq-page .faq-item { border: 1px solid var(--border, #e6ebf2); border-radius: 12px; background: #fff; overflow: hidden; }
.faq-page .faq-toggle { width: 100%; text-align: left; padding: 1rem 1rem; background: transparent; border: 0; cursor: pointer; font: inherit; }
.faq-page .faq-toggle[aria-expanded="true"] { background: linear-gradient(180deg, rgba(255,215,128,0.15), rgba(255,255,255,0)); }
.faq-page .faq-panel { padding: 0 1rem 1rem; }

.faq-page .controls { display: flex; justify-content: flex-end; }

.faq-page .support-form .form-field { display: grid; gap: .4rem; margin-bottom: .9rem; }
.faq-page .support-form input, .faq-page .support-form select, .faq-page .support-form textarea { padding: .7rem .9rem; border: 1px solid var(--border, #d7dce2); border-radius: 10px; width: 100%; }
.faq-page .form-actions { display: flex; gap: .75rem; align-items: center; }

.faq-page .newsletter-cta { padding: 2.5rem 0; background: linear-gradient(180deg, transparent, rgba(33,88,170,0.07)); text-align: center; }
.faq-page .newsletter-form { display: inline-grid; grid-auto-flow: column; gap: .5rem; margin-top: .75rem; }

/* Utility */
.faq-page .btn { cursor: pointer; }
.faq-page .btn-primary { background: #2158aa; color: #fff; border: 1px solid #2158aa; }
.faq-page .btn-outline { background: transparent; color: #2158aa; border: 1px solid #2158aa; }
.faq-page .btn-secondary { background: #eef3fb; color: #2158aa; border: 1px solid #cfe0ff; }
.faq-page .btn-small { font-size: .9rem; padding: .5rem .75rem; border-radius: 10px; border: 1px solid var(--border, #d7dce2); background: #fff; }

/* Responsive */
@media (max-width: 1024px) {
  .faq-page .faq-hero__inner { grid-template-columns: 1fr; }
  .faq-page .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .faq-page .cards { grid-template-columns: repeat(2, 1fr); }
  .faq-page .requirements { grid-template-columns: 1fr; }
  .faq-page .two-col { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .faq-page .newsletter-form { grid-auto-flow: row; }
}