/* faq: sticky heading + accordion. Owned by the faq agent. */
#faq { padding-bottom: var(--s8); }
.faq { align-items: start; row-gap: var(--s7); }
.faq__stick { position: sticky; top: calc(var(--nav-h) + var(--s7)); }
.faq__stick > * + * { margin-top: var(--s5); }
.faq__h { font-size: clamp(40px, 4.6vw, 88px); }
.faq__demo { margin-top: var(--s6) !important; font-family: var(--f-label); font-size: 14px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }

.faq__list { border-top: 1px solid var(--line-strong); }
.faq__item { border-bottom: 1px solid var(--line-soft); position: relative; }
.faq__item::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease); }
.faq__item.is-open::after { transform: scaleX(1); }
.faq__q { font: inherit; }
.faq__btn { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) 28px; column-gap: var(--s4); align-items: baseline; padding: var(--s5) 0; text-align: left; color: var(--text); }
.faq__n { font-size: 14px; color: var(--dim); letter-spacing: .12em; transition: color .3s; }
.faq__qt { font-family: var(--f-display); font-weight: 600; font-size: clamp(19px, 1vw + 14px, 28px); line-height: 1.2; transition: color .3s; }
.faq__ic { align-self: center; width: 24px; height: 24px; color: var(--gold); transition: transform .6s var(--ease); }
.faq__btn:hover .faq__qt { color: var(--gold-hi); }
.faq__btn:focus-visible { outline-offset: -1px; }
.faq__btn[aria-expanded="true"] .faq__ic { transform: rotate(135deg); }
.faq__btn[aria-expanded="true"] .faq__n { color: var(--gold); }

.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.faq__ai { overflow: hidden; min-height: 0; padding-left: 60px; opacity: 0; transform: translateY(-6px); transition: opacity .4s var(--ease), transform .6s var(--ease); }
.faq__ai p { padding-bottom: var(--s6); max-width: 36em; color: var(--muted); font-size: var(--t-body); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__item.is-open .faq__ai { opacity: 1; transform: none; transition-delay: .12s; }

@media (max-width: 899px) {
  .faq__stick { position: static; }
  .faq__btn { grid-template-columns: 32px minmax(0, 1fr) 24px; column-gap: var(--s3); }
  .faq__ai { padding-left: 44px; }
}
.faq__side { align-self: stretch; }