.faq { background: #f7f8fc; }
.faq-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 92px; align-items: start; }
.faq-intro { position: sticky; top: 130px; }
.faq-intro h2 { margin-bottom: 21px; }
.faq-intro p { max-width: 390px; color: #697188; font-size: 15px; line-height: 1.7; }
.faq-intro a { display: inline-flex; gap: 9px; margin-top: 15px; color: var(--blue); font-size: 14px; font-weight: 600; }
.accordion { border-top: 1px solid #daddE9; }
.faq-item { border-bottom: 1px solid #dadde9; transition: background .35s ease, padding .45s var(--ease-out); }
.faq-item:hover, .faq-item.is-open { padding-inline: 16px; background: rgba(255,255,255,.68); }
.faq-item button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 26px 0; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; transition: color .3s ease; }
.faq-item button:hover { color: var(--blue); }
.faq-item button span { display: flex; gap: 17px; font: 600 17px/1.4 "Manrope"; letter-spacing: -.4px; }
.faq-item button i { color: #9da4b7; font-size: 9px; font-style: normal; padding-top: 7px; }
.faq-item button b { position: relative; flex: 0 0 30px; width: 30px; height: 30px; border: 1px solid #d6dbe9; border-radius: 50%; transition: transform .45s var(--ease-out), background .3s ease, border-color .3s ease; }
.faq-item button:hover b { transform: rotate(90deg); }
.faq-item.is-open button:hover b { transform: rotate(0); }
.faq-item button b::before, .faq-item button b::after { content: ""; position: absolute; width: 10px; height: 1px; left: 9px; top: 14px; background: var(--ink); transition: transform .25s ease; }
.faq-item button b::after { transform: rotate(90deg); }
.faq-item.is-open button b { background: var(--blue); border-color: var(--blue); }
.faq-item.is-open button b::before, .faq-item.is-open button b::after { background: #fff; }
.faq-item.is-open button b::after { transform: rotate(0); }
.faq-answer { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s var(--ease-out), opacity .4s ease; }
.faq-answer > p { min-height: 0; overflow: hidden; margin: 0; color: #697188; font-size: 14px; line-height: 1.7; }
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; opacity: 1; }
.faq-item.is-open .faq-answer > p { padding: 0 60px 27px 35px; }