/* FAQ Redesign — professional, accessible accordion */
.faq-section {
  --faq-max-width: 980px;
  --faq-radius: 14px;
  --faq-gap: 14px;
  --faq-border: 1px;
  --faq-shadow: 0 2px 12px rgba(0,0,0,.06);
  --faq-bg: #ffffff;
  --faq-bg-hover: #fafafa;
  --faq-text: #101828;
  --faq-muted: #475467;
  --faq-line: #EAECF0;
  --faq-accent: #2563eb;
  --faq-focus: 0 0 0 3px rgba(37, 99, 235, .35);
  scroll-margin-top: 80px;
  margin: 48px auto;
  padding: 0 16px;
  color: var(--faq-text);
}
@media (prefers-color-scheme: dark) {
  .faq-section {
    --faq-bg: #111827;
    --faq-bg-hover: #0b1220;
    --faq-text: #F8FAFC;
    --faq-muted: #9CA3AF;
    --faq-line: #1f2937;
    --faq-shadow: 0 2px 20px rgba(0,0,0,.45);
    --faq-focus: 0 0 0 3px rgba(96, 165, 250, .55);
  }
}
.faq-section > h2, .faq-section > h3 {
  text-align: center;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.2;
  margin: 0 auto 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.faq-accordion {
  max-width: var(--faq-max-width);
  margin: 0 auto;
  display: grid;
  gap: var(--faq-gap);
}
.faq-item {
  border: var(--faq-border) solid var(--faq-line);
  border-radius: var(--faq-radius);
  background: var(--faq-bg);
  box-shadow: var(--faq-shadow);
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  user-select: none;
  font-weight: 600;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .faq-n {
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--faq-line);
  background: var(--faq-bg-hover);
  font-size: 13px;
  color: var(--faq-muted);
}
.faq-item .faq-question {
  font-size: clamp(15px, 1.6vw, 17px);
}
.faq-item summary:focus-visible {
  outline: none;
  box-shadow: var(--faq-focus);
  border-radius: calc(var(--faq-radius) - var(--faq-border));
}
.faq-item summary::after {
  content: "";
  width: 18px;
  height: 18px;
  mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 15.5l-5-5h10l-5 5z'/%3E%3C/svg%3E") no-repeat center / contain;
  background: currentColor;
  opacity: .65;
  transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-answer {
  padding: 0 20px 18px 68px;
  color: var(--faq-muted);
  line-height: 1.75;
  font-size: 15px;
}
.faq-answer p { margin: 12px 0; }
.faq-answer a { color: var(--faq-accent); text-decoration: underline; }
.faq-answer ul, .faq-answer ol { padding-left: 20px; margin: 10px 0; }
.faq-answer img, .faq-answer video { max-width: 100%; height: auto; border-radius: 8px; }
@media (max-width: 640px) {
  .faq-answer { padding-left: 58px; font-size: 14px; }
  .faq-item summary { padding: 16px 16px; }
  .faq-item .faq-n { min-width: 32px; height: 26px; }
}
/* Optional: only one open at a time */
.faq-section[data-single='true'] .faq-item[open] ~ .faq-item[open] { /* no-op, controlled by JS */ }
/* Print: expand all for readability */
@media print {
  .faq-item { break-inside: avoid; }
  .faq-item summary::after { display: none; }
  .faq-item[open] .faq-answer { display: block !important; }
}


/* === v1.2 enhancements (2025-08-28) === */
/* Two-column layout on wider screens */
@media (min-width: 900px) {
  .faq-accordion { grid-template-columns: 1fr 1fr; }
}
/* Slightly larger headings and improved spacing */
.faq-section > h2, .faq-section > h3 {
  letter-spacing: -0.015em;
}
/* Smoother hover for summary */
.faq-item summary:hover { background: var(--faq-bg-hover); }
/* Ensure crisp focus outline for keyboard users */
.faq-item summary:focus-visible { outline: none; box-shadow: var(--faq-focus); }
/* Optional subtle divider when collapsed */
.faq-item:not([open]) { border-color: var(--faq-line); }
/* Remove any unintended spacing from legacy nav */
.faq-section .faq-nav { display: none !important; }