/* FAQ accordion (home and inner pages). Rendered open by build.mjs; js/faq.js closes rows and adds .faq-on. */
/* ---------- FAQ ---------- */
.faq { display: flex; flex-direction: column; gap: var(--sp-3); }
.faq-item { border-radius: var(--r-card); }
.faq-q { margin: 0; }
.faq-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-5) var(--sp-6);
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--font-serif);
  font-variation-settings: "opsz" 48;
  font-size: var(--fs-xl);
  line-height: 1.3;
  color: var(--c-fg);
  border-radius: var(--r-card);
}
.faq-mark { position: relative; display: block; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--btn-primary-fill); box-shadow: var(--btn-primary-shadow); }
.faq-mark::before, .faq-mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--c-ink); transform: translate(-50%, -50%); transition: transform var(--dur-accordion) var(--ease-out); }
.faq-mark::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.is-open .faq-mark::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur-accordion) var(--ease-out); }
.faq-a-in { overflow: hidden; }
.faq-a-in p { padding: 0 var(--sp-6) var(--sp-6); color: var(--c-fg-2); max-width: 64ch; text-wrap: pretty; }
.faq-a-in p + p { padding-top: 0; margin-top: calc(-1 * var(--sp-3)); }
.faq-on .faq-item:not(.is-open) .faq-a { grid-template-rows: 0fr; }
.faq-on .faq-item:not(.is-open) .faq-a-in { visibility: hidden; }

@media (max-width: 768px) {
  .faq-btn { padding: var(--sp-4) var(--sp-5); font-size: var(--fs-lg); }
  .faq-a-in p { padding: 0 var(--sp-5) var(--sp-5); }
}