.faq {
  width: min(100%, 860px);
  margin: 0 auto;
  padding: var(--sp-9) var(--sp-5);
}
.faq-header {
  max-width: 540px;
  margin: 0 auto var(--sp-7);
  text-align: center;
}
.faq-header h2 {
  font-size: var(--fs-h2);
  letter-spacing: -0.035em;
}
.faq-list { display: grid; gap: var(--sp-3); }
.faq-item {
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--r-input);
  background: var(--surface);
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.faq-item[open] {
  border-color: var(--primary-soft-2);
  background: linear-gradient(135deg, var(--primary-soft), var(--surface-elevated));
  box-shadow: 0 18px 42px -32px var(--primary-glow-strong);
}
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  width: 100%;
  padding: 21px var(--sp-5);
  color: var(--text-main);
  cursor: pointer;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: 1.35;
  list-style: none;
  text-wrap: balance;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::marker { content: ''; }
.faq-question:hover { color: var(--primary); }
.faq-question:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -4px;
  border-radius: var(--r-input);
}
.faq-chevron {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--text-muted);
  transition: transform var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.faq-item[open] .faq-chevron { color: var(--primary); transform: rotate(180deg); }
.faq-answer { padding: 0 var(--sp-5) var(--sp-5); }
.faq-answer-inner {
  max-width: 65ch;
  color: var(--text-muted);
  font-size: var(--fs-md);
  line-height: 1.72;
  text-wrap: pretty;
  animation: faqReveal var(--t-base) var(--ease) both;
}
@keyframes faqReveal {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 640px) {
  .faq { padding: var(--sp-8) var(--sp-4); }
  .faq-header { margin-bottom: var(--sp-6); }
  .faq-question { padding: 18px var(--sp-4); font-size: var(--fs-base); }
  .faq-answer { padding: 0 var(--sp-4) var(--sp-4); }
  .faq-answer-inner { font-size: var(--fs-base); }
}