/* The FAQ, as the product pages write it:

     <section class="faq">
       <h2 class="faq-head">…</h2>
       <div class="faq-list">
         <div class="faq-item">
           <button class="faq-q" type="button" aria-expanded="false" aria-controls="a1" id="q1">
             The question<span class="faq-mark" aria-hidden="true"></span></button>
           <div class="faq-a" id="a1" role="region" aria-labelledby="q1"><div><p>The answer</p></div></div>
         </div>
       </div>
     </section>

   Plain buttons rather than <details>, because a closed details element hides
   its content outright and there is nothing there to animate from. The answer
   is a grid that goes from 0fr to 1fr, which animates its height without
   anything having to measure it, and `visibility` keeps the closed text out
   of the accessibility tree. The plus loses its upright stroke to become a
   minus. faq.js opens and closes them. Uses the page's --pad, --accent,
   --text-dark, --text-mid and --ease. */

.faq{
  padding:0 var(--pad) clamp(80px,12vh,140px);
  background:#fff;
}
/* inside .faq, so a page's heading class (.h2{margin:0}) can't undo the centring */
.faq .faq-head,.faq .faq-list{max-width:760px;margin-inline:auto}
.faq .faq-head{margin-block:0 clamp(24px,3.4vh,40px);text-align:center}
.faq-item{border-top:1px solid rgba(0,0,0,.11)}
.faq-item:last-child{border-bottom:1px solid rgba(0,0,0,.11)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:none;border:0;padding:clamp(18px,2.4vh,24px) 0;
  font:inherit;font-size:clamp(16px,1.55vw,19px);font-weight:600;
  letter-spacing:-.014em;line-height:1.35;color:var(--text-dark);
  text-align:left;cursor:pointer;
}
.faq-q:hover{color:var(--accent)}
.faq-mark{position:relative;flex:none;width:15px;height:15px}
.faq-mark::before,.faq-mark::after{
  content:"";position:absolute;left:0;top:7px;width:15px;height:1.6px;
  background:currentColor;border-radius:1px;
  transition:transform .34s var(--ease),opacity .34s var(--ease);
}
.faq-mark::after{transform:rotate(90deg)}
.faq-item.is-open .faq-mark::after{transform:rotate(0);opacity:0}
.faq-a{
  display:grid;grid-template-rows:0fr;visibility:hidden;
  transition:grid-template-rows .36s var(--ease), visibility .36s var(--ease);
}
.faq-a > div{overflow:hidden}
.faq-item.is-open .faq-a{grid-template-rows:1fr;visibility:visible}
.faq-a p{
  margin:0;padding:0 46px clamp(20px,2.6vh,26px) 0;
  font-size:clamp(15px,1.45vw,17px);line-height:1.55;
  letter-spacing:-.008em;color:var(--text-mid);
}