#faq {
  padding: 120px 48px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;
}
.faq-title {
  font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 900;
  line-height: 1.05; letter-spacing: -.04em;
}
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid #e0e0e0; overflow: hidden; }
.faq-trigger {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0; cursor: pointer;
  font-size: 1rem; font-weight: 700; letter-spacing: .01em;
  background: none; border: none; width: 100%; text-align: left;
  gap: 16px; color: var(--black);
}
.faq-icon {
  flex-shrink: 0; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--black); border-radius: 50%;
  position: relative; transition: background .25s, border-color .25s;
}
.faq-icon::before, .faq-icon::after {
  content: ''; position: absolute; background: var(--black); border-radius: 2px;
  transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .35s;
}
.faq-icon::before { width: 12px; height: 2px; }
.faq-icon::after  { width: 2px;  height: 12px; }
.faq-item.open .faq-icon { background: var(--yellow); border-color: var(--yellow); }
.faq-item.open .faq-icon::before { background: var(--black); }
.faq-item.open .faq-icon::after  { transform: rotate(90deg); opacity: 0; }
.faq-body { max-height: 0; overflow: hidden; transition: max-height .45s cubic-bezier(.4,0,.2,1); }
.faq-body > p,
.faq-richtext { padding: 0 0 24px; font-size: .9rem; line-height: 1.7; color: #555; }
.faq-richtext p { padding: 0; font: inherit; color: inherit; }
.faq-richtext p + p { margin-top: .8em; }
.faq-richtext strong { font-weight: 700; }

@media (max-width: 900px) {
  #faq { grid-template-columns: 1fr; gap: 48px; padding: 80px 24px; }
}