/* ======================================================
   FAQ accordion
   Shared by the homepage and the compare pages. Extracted from home.css on
   2026-09-08, when the compare hub and its four detail pages became the third
   through sixth page to need it and a copy per stylesheet stopped being
   defensible.

   Note: the style pages (/outdoor, /hiking, /cycling, /3d, /winter,
   /custom-map-style) carry their own .sp-faq rules in style-page.css. Those
   are visually identical and were left alone rather than re-plumbing six
   pages that had just shipped. Fold them in here next time one of them is
   being edited anyway.
   ====================================================== */
.faq { padding: 96px 0; background: var(--mtk-white); }
.faq h2 { margin: 6px 0 0; }
.faq-list { margin: 32px 0 0; }
.faq-list details {
  border-bottom: 1px solid var(--mtk-neutral-20);
  padding: 4px 0;
}
.faq-list details:first-of-type { border-top: 1px solid var(--mtk-neutral-20); }
.faq-list summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 44px 18px 20px;
  position: relative;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--mtk-fg-strong);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--mtk-neutral-50);
  border-bottom: 2px solid var(--mtk-neutral-50);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.18s ease;
}
.faq-list details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq-list summary:focus-visible {
  outline: 2px solid var(--mtk-primary-50);
  outline-offset: 2px;
  border-radius: 3px;
}
.faq-list .faq-answer {
  padding: 0 44px 22px 20px;
  font-size: 0.98rem;
  line-height: 1.66;
  color: var(--mtk-fg);
}
.faq-list .faq-answer p { margin: 0; }
.faq-list .faq-answer code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: var(--mtk-neutral-10);
  border: 1px solid var(--mtk-neutral-20);
  border-radius: 3px;
  padding: 0.06em 0.32em;
}

@media (max-width: 640px) {
  .faq { padding: 64px 0; }
  .faq-list summary { padding: 16px 36px 16px 12px; font-size: 0.98rem; }
  .faq-list summary::after { right: 12px; }
  .faq-list .faq-answer { padding: 0 36px 18px 12px; }
}