/* T13 FAQ (Figma 307:3812) */
.s-faq { --faq-width: 800px; padding-block: var(--section-y); }
.s-faq__inner {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-10);
  max-width: calc(var(--faq-width) + var(--gutter) * 2);
}
.s-faq__title {
  font-family: var(--font-heading); font-weight: var(--fw-heading);
  font-size: var(--h2-size); line-height: var(--h2-lh); letter-spacing: var(--h2-ls);
  color: var(--text-strong); text-align: center;
}

.s-faq__list { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; }
.s-faq {
  --faq-tint: color-mix(in srgb, var(--amber-950) 4%, var(--stone-100));
}
.s-faq__item {
  background: var(--stone-100); border-radius: var(--radius-sm); overflow: hidden;
  box-shadow: inset 0 0 0 1px transparent;
  transition: background var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.s-faq__item.is-open { background: var(--faq-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber-950) 8%, transparent); }
.s-faq__q { font: inherit; }
.s-faq__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  width: 100%; padding: var(--space-5);
  text-align: left; color: var(--text-strong); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.s-faq__q-text {
  font-family: var(--font-heading); font-weight: var(--fw-heading);
  font-size: var(--h6-size); line-height: var(--h6-lh); letter-spacing: var(--h6-ls);
  transition: transform var(--dur-slow) var(--ease-out);
}
@media (hover: hover) {
  .s-faq__item:hover { background: var(--faq-tint); }
  .s-faq__trigger:hover .s-faq__q-text { transform: translateX(4px); }
}
.s-faq__icon {
  position: relative; flex: none;
  width: 38px; height: 36px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--amber-950) 10%, transparent);
  transition: background var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.s-faq__icon::before, .s-faq__icon::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 14px; height: 1.5px; border-radius: 1px;
  background: currentColor; transform: translate(-50%, -50%);
  transition: transform var(--dur-slow) var(--ease-out);
}
/* Plus turns into a minus: the vertical bar rotates flat onto the horizontal one */
.s-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
@media (hover: hover) { .s-faq__trigger:hover .s-faq__icon { background: color-mix(in srgb, var(--amber-950) 18%, transparent); } }
.s-faq__trigger:active .s-faq__icon { transform: scale(0.9); transition-duration: var(--dur-fast); }
.s-faq__trigger[aria-expanded="true"] .s-faq__icon { background: var(--amber-950); color: var(--stone-50); }
.s-faq__trigger[aria-expanded="true"] .s-faq__icon::before { transform: translate(-50%, -50%) rotate(180deg); }
.s-faq__trigger[aria-expanded="true"] .s-faq__icon::after { transform: translate(-50%, -50%) rotate(180deg); }
.s-faq__trigger:focus-visible { outline: none; }
.s-faq__item:has(.s-faq__trigger:focus-visible) { box-shadow: inset 0 0 0 2px var(--amber-950), 0 0 0 4px var(--focus-ring); }

/* Collapsed by default only when JS runs, so content stays readable without it */
.js .s-faq__panel {
  display: grid; grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.js .s-faq__item.is-open .s-faq__panel {
  grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows var(--dur-slow) var(--ease-out), visibility 0s;
}
.s-faq__panel-inner { overflow: hidden; min-height: 0; }
.s-faq__a {
  padding: 0 var(--space-5) var(--space-5);
  max-width: 64ch;
  font-size: var(--para-md-size); line-height: var(--para-md-lh); letter-spacing: var(--para-md-ls);
  color: var(--text-medium);
}
/* Answer text settles in just after the panel starts opening, and leaves first on close */
.js .s-faq__a {
  opacity: 0; transform: translateY(-6px);
  transition: opacity 180ms ease, transform var(--dur-slow) var(--ease-out);
}
.js .s-faq__item.is-open .s-faq__a {
  opacity: 1; transform: none;
  transition: opacity 260ms ease 90ms, transform var(--dur-slow) var(--ease-out) 60ms;
}

.s-faq__support {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1) var(--space-2);
  padding-top: var(--space-2);
  font-family: var(--font-heading); font-weight: var(--fw-heading);
  font-size: var(--h6-size); line-height: var(--h6-lh); letter-spacing: var(--h6-ls);
  color: var(--text-strong); text-align: center;
}
.s-faq__support-muted { opacity: 0.5; }
.s-faq__support-link {
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1.5px no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--dur-slow) var(--ease-out);
}
.s-faq__support-link:hover, .s-faq__support-link:focus-visible { background-size: 100% 1.5px; }

@media (min-width: 768px) {
  .s-faq__inner { gap: var(--space-12); }
  .s-faq__trigger { padding: var(--space-6); }
  .s-faq__a { padding: 0 var(--space-6) var(--space-6); }
  .s-faq__support { padding-top: 0; }
  .s-faq__title { margin-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .s-faq__item, .s-faq__q-text, .s-faq__icon, .s-faq__icon::before, .s-faq__icon::after,
  .js .s-faq__panel, .js .s-faq__item.is-open .s-faq__panel,
  .js .s-faq__a, .js .s-faq__item.is-open .s-faq__a, .s-faq__support-link { transition: none; }
  .js .s-faq__a { transform: none; }
  .s-faq__trigger:hover .s-faq__q-text { transform: none; }
}
@media (min-width: 1024px) {
  .s-faq { padding-bottom: 32px; }
}