/* ===========================================================
   AURALIS — FAQ accordion ("bands": full-width rows, toggle at
   the far edge). Type roles conform to stylesheet.md §3:
   question = H3, answer = Lead body. Colours are tokens only.
   =========================================================== */
.faq{padding:clamp(40px,7vw,90px) var(--shell) clamp(24px,4vw,50px)}
.faq__list{border-top:1px solid var(--line-2)}
.faq__item{border-bottom:1px solid var(--line-2)}

/* the full-width row: big question left, circular toggle at the far edge */
.faq__q{display:flex; align-items:center; justify-content:space-between; gap:clamp(30px,7vw,140px);
  width:100%; text-align:left; padding:clamp(24px,3.2vw,48px) 0; color:var(--cream)}
.faq__q h3{font-size:clamp(1.5rem,3vw,2.7rem); font-weight:500; letter-spacing:-.025em; line-height:1.05;
  max-width:26ch; text-wrap:balance; transition:transform .45s var(--ease), color .3s var(--ease)}
@media (hover:hover){ .faq__q:hover h3{transform:translateX(10px)} }
.faq__item.is-open .faq__q h3{color:var(--white)}

/* circular +/− toggle. Closed = plus; open collapses the vertical
   bar so only the horizontal remains → a minus. */
.faq__ic{flex:0 0 auto; width:46px; height:46px; border-radius:50%; border:1px solid var(--line-2);
  position:relative; transition:background .4s var(--ease), border-color .4s var(--ease)}
.faq__ic::before,.faq__ic::after{content:""; position:absolute; left:50%; top:50%; width:16px; height:1.6px;
  background:var(--cream); transform:translate(-50%,-50%); transition:transform .4s var(--ease), background .4s var(--ease)}
.faq__ic::after{transform:translate(-50%,-50%) rotate(90deg)}          /* vertical bar */
.faq__item.is-open .faq__ic{background:var(--green); border-color:var(--green)}
.faq__item.is-open .faq__ic::after{transform:translate(-50%,-50%) rotate(90deg) scaleX(0)}  /* → minus */

/* collapsible answer, held to a readable measure even at full width */
.faq__a{max-height:0; overflow:hidden; opacity:0; transform:translateY(-6px);
  transition:max-height .55s var(--ease), opacity .4s var(--ease), transform .5s var(--ease)}
.faq__item.is-open .faq__a{opacity:1; transform:none}
.faq__a p{font-size:clamp(1rem,1.4vw,1.25rem); line-height:1.6; color:var(--cream-60);
  max-width:66ch; padding:0 0 clamp(28px,3.2vw,44px)}

/* before faq.js runs (or if it doesn't), show the answers rather than hide them */
html:not(.js) .faq__a{max-height:none; opacity:1; transform:none}