.faq-section { background: linear-gradient(200deg, var(--surface) 0%, var(--canvas) 100%); padding: 10rem 0; }
.faq-section__inner { width: min(1080px, calc(100% - 4rem)); margin: 0 auto; }

.faq-intro { text-align: center; margin: 0 auto 5.6rem; max-width: 640px; }
.faq-intro h2 {
  margin: 0 0 1.2rem; font-weight: 800; font-size: clamp(3rem, 3.4vw, 4rem);
  line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance;
}

.faq-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0 5.6rem; }

.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }

.faq-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.6rem;
  list-style: none; padding: 2.4rem 1.2rem; margin: 0 -1.2rem; cursor: pointer;
  font-weight: 700; font-size: 1.9rem; line-height: 1.25; letter-spacing: -0.01em;
  border-radius: var(--radius-md);
  transition: background-color 220ms var(--ease);
}
.faq-list summary:hover { background: var(--canvas); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .material-symbols-rounded { color: var(--ink-muted); flex: 0 0 auto; transition: transform 260ms var(--ease); }
.faq-list details[open] summary .material-symbols-rounded { transform: rotate(45deg); }
.faq-list summary:hover .material-symbols-rounded { color: var(--accent); }

.faq-list p { margin: 0; padding: 0 4rem 2.8rem 1.2rem; color: var(--ink-muted); font-size: 1.6rem; }

@media (max-width: 880px) {
  .faq-section { padding: 7rem 0; }
  .faq-intro { margin-bottom: 4rem; }
  .faq-columns { grid-template-columns: 1fr; gap: 0; }
  .faq-list + .faq-list { border-top: none; }
}

@media (max-width: 560px) {
  .faq-section { padding: 6rem 0; }
  .faq-section__inner { width: calc(100% - 3.2rem); }
  .faq-intro { margin-bottom: 3.6rem; }
  .faq-list summary { font-size: 1.7rem; padding: 2rem 0; margin: 0; }
  .faq-list p { padding: 0 0 2.2rem; }
}