/* FAQ: heading and demo button on the left, five questions on the right; answers slide open */
.faq{--fq-bg:#F7F7F5;--fq-ink:#121614;--fq-mute:#6B7079;--fq-line:#E2E3E0;--fq-green:#00683C;--fq-bright:#5FC184;
  background:var(--fq-bg);color:var(--fq-ink);padding:var(--section-y) var(--gutter) var(--section-y);position:relative;z-index:2}
.faq-wrap{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,96px);align-items:start}
.faq-head{position:sticky;top:calc(var(--nav-h) + 32px)}
.faq-head h2{font-size:var(--h2);line-height:1.06;letter-spacing:-.03em;font-weight:500;text-wrap:balance}
.faq-head p{font-size:var(--lead);line-height:1.6;color:var(--fq-mute);margin-top:16px;max-width:26em}
.faq-head .btn{margin-top:32px;background:var(--fq-ink);color:#F7F7F5!important}
.faq-head .btn:hover{background:#2A302C;box-shadow:none}

.faq-list{border-top:1px solid var(--fq-line)}
.faq-item{border-bottom:1px solid var(--fq-line);position:relative}
.faq-item::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--fq-bright);transition:width .6s cubic-bezier(.22,1,.36,1)}
.faq-item.open::before{width:100%}
.faq-q{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;width:100%;padding:24px 0;font-size:var(--h3);font-weight:500;letter-spacing:-.01em;line-height:1.3}
.faq-q:focus-visible{outline:2px solid var(--fq-bright);outline-offset:4px;border-radius:4px}
.faq-q .ic{position:relative;width:32px;height:32px;border-radius:50%;border:1px solid var(--fq-line);transition:background .3s,border-color .3s}
.faq-q .ic::before,.faq-q .ic::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:currentColor;transform:translate(-50%,-50%);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.faq-q .ic::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-q:hover .ic{border-color:var(--fq-bright)}
.faq-item.open .ic{background:var(--fq-ink);border-color:var(--fq-ink);color:#F7F7F5}
.faq-item.open .ic::after{transform:translate(-50%,-50%) rotate(0deg)}
/* the answer's height eases open by animating its grid row from 0 to its natural size */
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{font-size:var(--body);line-height:1.65;color:var(--fq-mute);max-width:40em;padding:0 56px 24px 0;opacity:0;transform:translateY(-4px);transition:opacity .4s,transform .5s cubic-bezier(.22,1,.36,1)}
.faq-item.open .faq-a p{opacity:1;transform:none;transition-delay:.08s}
@media (prefers-reduced-motion:reduce){.faq *{transition:none!important}}

@media(max-width:900px){.faq-wrap{grid-template-columns:1fr}.faq-head{position:static}}
@media(max-width:560px){.faq-q{gap:16px;padding:20px 0}.faq-a p{padding-right:0}}