.faq__grid { display: grid; gap: 28px; }
.faq__more { margin-top: 20px; color: var(--color-ink-2); }
.faq__groups { display: grid; gap: 36px; }
.faq__group-title {
  margin: 0 0 6px; font-family: var(--font-body); font-size: .8rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-text);
}
.faq__list { border-top: 1px solid var(--color-line); }
.faq__item { border-bottom: 1px solid var(--color-line); }
.faq__item > summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 2.4rem 1fr 20px; align-items: start; gap: 12px;
  min-height: 64px; padding: 16px 0; font-weight: 600; font-size: 1.12rem; line-height: 1.35;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__num { font-family: var(--font-body); font-size: 1.5rem; line-height: 1.1; color: var(--color-ink-2); opacity: .55; font-weight: 500; }
.faq__icon { position: relative; width: 20px; height: 20px; margin-top: 2px; transition: transform .3s; }
.faq__icon::before, .faq__icon::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px;
  background: var(--color-ink); border-radius: 2px; transition: transform .3s, opacity .3s;
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] > summary .faq__icon::after { transform: rotate(0); opacity: 0; }
.faq__item[open] > summary .faq__icon { transform: rotate(180deg); }
.faq__item[open] > summary .faq__num { color: var(--color-accent-text); opacity: 1; }
@media (hover: hover) { .faq__item > summary:hover .faq__q { color: var(--color-accent-text); } }
.faq__item > summary:focus-visible { outline: 3px solid var(--color-blue); outline-offset: 2px; border-radius: 6px; }
.faq__a { padding-left: calc(2.4rem + 12px); overflow: hidden; }
.faq__a-in { max-width: 40em; padding: 0 0 22px; color: var(--color-ink-2); }
.faq__item[open] .faq__a-in { animation: faq-fade .4s ease both; }
@keyframes faq-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (min-width: 1024px) {
  .faq__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
  .faq__side { position: sticky; top: calc(var(--size-header-h) + 24px); align-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .faq__icon, .faq__icon::before, .faq__icon::after { transition: none; }
  .faq__item[open] .faq__a-in { animation: none; }
}