/* ==========================================================================
   FAQ accordion
   Built from the card system already in use (same border, radius, hover and
   motion language) so it reads as part of the established page, not a new one.
   ========================================================================== */

.faq{padding-block:32px}
.faq__cell{grid-column-end:span var(--ps-grid-columns)}
.faq__title{margin:0 0 32px;color:var(--ps-color-neutral-3-500)}
.faq__list{display:flex;flex-direction:column;gap:8px}

.faq__item{
  border:1px solid var(--ps-color-neutral-2-300);border-radius:8px;
  background:var(--sv-white);
  transition:border-color .25s ease-out,background-color .25s ease-out;
}
.faq__item:hover{border-color:var(--ps-color-neutral-2-500)}
.faq__item.is-open{border-color:var(--ps-color-neutral-3-500)}

.faq__heading{margin:0;font:inherit}
.faq__question{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding:20px 24px;text-align:left;cursor:pointer;
  font:500 16px/24px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-3-500);
}
.faq__question-text{flex:1 1 auto}

/* a precise plus/minus, not a rotating chevron */
.faq__marker{position:relative;flex:none;width:16px;height:16px;margin-top:4px}
.faq__marker::before,.faq__marker::after{
  content:"";position:absolute;left:50%;top:50%;
  background:var(--ps-color-brand-500);border-radius:1px;
  transition:transform .25s cubic-bezier(.22,.61,.36,1),opacity .25s;
}
.faq__marker::before{width:14px;height:2px;transform:translate(-50%,-50%)}
.faq__marker::after{width:2px;height:14px;transform:translate(-50%,-50%)}
.faq__item.is-open .faq__marker::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}

/* grid-row transition: no measurement, correct at any reflow */
.faq__answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.22,.61,.36,1)}
.faq__item.is-open .faq__answer{grid-template-rows:1fr}
.faq__answer-inner{overflow:hidden;min-height:0;color:var(--ps-color-secondary-5-500)}
.faq__answer-inner > *{padding:0 64px 24px 24px}
.faq__answer-inner p{margin:0}
.faq__answer-inner a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}
.faq__answer-inner a:hover{color:var(--ps-color-brand-500)}

@media (prefers-reduced-motion:reduce){
  .faq__answer{transition:none}
  .faq__marker::before,.faq__marker::after{transition:none}
}

@media (min-width:640px){
  .faq{padding-block:64px}
  .faq__question{padding:22px 28px;font-size:18px;line-height:26px}
  .faq__answer-inner > *{padding:0 72px 26px 28px}
}
@media (min-width:1024px){
  .faq{padding-block:80px}
}
@media (min-width:1350px){
  .faq__cell{grid-column-start:3;grid-column-end:span 8}
}