/* FAQ page: readable disclosures on the shared red interior backdrop. */
.faq-page .site-nav { --color-primary-light: var(--color-copy-light); }
.faq-page .interior-hero h1 { max-width: 18ch; margin-inline: auto; }
.faq-panel {
  position: relative;
  z-index: 1;
  margin-top: -40px;
  padding: clamp(32px,4vw,56px);
  border-radius: clamp(24px,3vw,40px);
  background: var(--color-surface-light);
  color: var(--color-text-dark);
}
.faq-disclosure + .faq-disclosure { border-top: 1px solid var(--interior-line); }
.faq-disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 28px;
  list-style: none;
  cursor: pointer;
  color: var(--color-text-dark);
  font-size: var(--font-size-question);
  font-weight: 600;
  line-height: 1.5;
}
.faq-disclosure summary::-webkit-details-marker { display: none; }
.faq-disclosure summary > span:first-child { min-width: 0; }
.faq-disclosure summary:hover,
.faq-disclosure[open] summary { color: var(--color-primary-dark); }
.faq-disclosure summary:focus-visible { outline-offset: 4px; border-radius: 8px; }
.faq-toggle {
  position: relative;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-surface-tint);
  color: var(--color-primary-dark);
}
.faq-toggle::before,
.faq-toggle::after {
  content: '';
  position: absolute;
  inset: 19px 13px;
  border-radius: 1px;
  background: currentColor;
}
.faq-toggle::after { transform: rotate(90deg); transition: transform .2s; }
.faq-disclosure[open] .faq-toggle::after { transform: rotate(0); }
.faq-response { max-width: 85ch; padding: 0 64px 28px 0; }
.faq-response p { margin: 0; color: var(--interior-muted); font-size: var(--font-size-body); line-height: 1.75; }
.faq-response a { color: var(--color-primary-dark); text-decoration: underline; text-underline-offset: 4px; }
.faq-response a:hover { color: var(--color-text-dark); }
.faq-page .interior-cta h2 { max-width: 20ch; text-wrap: balance; }

@media (max-width: 760px) {
  .faq-panel { margin-top: -24px; padding: 12px 24px; border-radius: 24px; }
  .faq-disclosure summary { gap: 16px; padding-block: 24px; }
  .faq-toggle { flex-basis: 36px; width: 36px; height: 36px; }
  .faq-toggle::before, .faq-toggle::after { inset: 17px 11px; }
  .faq-response { padding: 0 0 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-toggle::after { transition: none; }
}