@layer sections {
#faq { padding: var(--space-1) 0; }
#faq .fq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
#faq .fq-head { display: grid; gap: 22px; }
#faq .fq-head .m-text-2 { font-size: clamp(40px, 4.6vw, 68px); max-width: 9ch; }
#faq .fq-list { border-top: 1.5px solid var(--color-2); }
#faq .fq-item { border-bottom: 1.5px solid var(--color-2); }
#faq .fq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; }
#faq .fq-item summary::-webkit-details-marker { display: none; }
#faq .fq-sign { --m-shape-size: 22px; background: var(--color-5); transition: transform .45s cubic-bezier(.3, .7, .2, 1); }
#faq .fq-item[open] .fq-sign { transform: rotate(45deg); }
#faq .fq-item .m-text { max-width: 60ch; padding: 0 0 24px; }
@media (hover: hover) { #faq .fq-item summary:hover .fq-sign { transform: rotate(90deg); } #faq .fq-item[open] summary:hover .fq-sign { transform: rotate(135deg); } }
@media (max-width: 900px) { #faq .fq-grid { grid-template-columns: 1fr; } }
}