/* FAQs (faqs.html). Builds on about.css + how.css. Scoped to .faq so other pages are untouched. */
.faq-list{padding-top:clamp(8px,1vw,16px);padding-bottom:var(--ab-gap)}
.faq-item{max-width:920px;border-top:1px solid #ECECEE}
.faq-item:last-child{border-bottom:1px solid #ECECEE}
.faq .faq-q{margin:0;font:inherit}
.faq-q button{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(24px,2.2vw,32px) 0;cursor:pointer;font:600 clamp(20px,1.75vw,26px)/1.25 var(--body);letter-spacing:-.016em;color:var(--ink);transition:color .2s}
.faq-q button:hover{color:var(--pink)}
.faq-q button:focus-visible{outline:3px solid var(--pink);outline-offset:4px;border-radius:10px}
.faq-ico{position:relative;flex:none;width:18px;height:18px;color:var(--ink)}
.faq-ico::before,.faq-ico::after{content:"";position:absolute;left:0;top:50%;width:100%;height:2px;margin-top:-1px;border-radius:1px;background:currentColor;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.faq-ico::after{transform:rotate(90deg)}
.faq-q button[aria-expanded="true"] .faq-ico{color:var(--pink)}
.faq-q button[aria-expanded="true"] .faq-ico::after{transform:rotate(0)}
.faq-a{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .32s cubic-bezier(.2,.8,.2,1),visibility 0s linear .32s}
.faq-a.open{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .32s cubic-bezier(.2,.8,.2,1),visibility 0s}
.faq-in{overflow:hidden;min-height:0}
.faq .faq-in p{max-width:680px;padding:0 48px clamp(26px,2.4vw,34px) 0;opacity:0;transform:translateY(-4px);transition:opacity .25s ease,transform .3s ease}
.faq-a.open .faq-in p{opacity:1;transform:none}
.faq .faq-in a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:3px}
.faq .faq-in a:hover{color:var(--pink)}
.faq .confirm{background:#fff1a8;color:#6b4e00;font-weight:600;padding:1px 5px;border-radius:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
@media (prefers-reduced-motion:reduce){.faq-a,.faq-a.open,.faq-ico::before,.faq-ico::after,.faq .faq-in p{transition:none}}
@media (max-width:760px){
  .faq-list{padding-top:0;padding-bottom:56px}
  .faq-q button{gap:16px;padding:22px 0;font-size:19px}
  .faq .faq-in p{padding:0 32px 24px 0}
  .faq-ico{width:16px;height:16px}
}