/* FAQ - page-specific styles. Loaded after base.css. */

/* ============ FAQ ============ */
.faq-band{padding-block:clamp(52px,7vw,86px)}
.page-head .lede a{font-weight:600}

.qa-group{
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);align-items:start;
}
.qa-group + .qa-group{
  margin-top:clamp(38px,5vw,60px);padding-top:clamp(38px,5vw,60px);
  border-top:1px solid var(--line);
}
.qa-head{position:sticky;top:96px}
.qa-head h2{font-family:var(--serif);font-size:clamp(24px,2.6vw,30px);font-weight:600;line-height:1.25}
.qa-head p{font-size:14.5px;color:var(--ink-soft);margin-top:8px;max-width:34ch}

.qa-list{display:flex;flex-direction:column;gap:10px}
.qa{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;transition:border-color .2s,box-shadow .2s;
}
.qa[open]{border-color:var(--peri);box-shadow:0 20px 44px -34px rgba(69,58,82,.42)}
.qa summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:18px 22px;cursor:pointer;list-style:none;
  font-family:var(--serif);font-size:18.5px;font-weight:600;line-height:1.4;
  color:var(--ink);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--cta)}
.qa summary:focus-visible{outline:3px solid var(--cta);outline-offset:-3px}
.chev{
  flex:none;width:11px;height:11px;margin-top:7px;
  border-right:2px solid var(--cta);border-bottom:2px solid var(--cta);
  transform:rotate(45deg);transition:transform .22s ease;
}
.qa[open] .chev{transform:rotate(-135deg)}
.qa-body{padding:0 22px 20px}
.qa-body p{font-size:15.5px;line-height:1.7;color:var(--ink-soft);max-width:68ch}

/* ---- Closing CTA ---- */
.faq-cta{text-align:center}
.faq-cta .lede{margin-inline:auto}
.faq-cta-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:30px}

@media (prefers-reduced-motion:reduce){
  .chev{transition:none}
}

/* ============ Responsive - page ============ */
@media (max-width:960px){
  .qa-group{grid-template-columns:1fr;gap:18px}
  .qa-head{position:static}
}
@media (max-width:640px){
  .qa summary{font-size:16.5px;padding:16px 14px}
  .qa-body{padding:0 14px 16px}
}