/* Shared FAQ layout for the home section and the full FAQ page. */
.faq { scroll-margin-top: 96px; }
.faq .section-head { max-width: 960px; margin-left: auto; margin-right: auto; }
.faq .faq-grid {
  align-items: start;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
  margin-left: auto;
  margin-right: auto;
  max-width: 960px;
}
.faq .faq-cat { margin: 24px 0 4px; }
.faq .faq-cat:first-child { margin-top: 0; }
.faq .faq-grid > details { align-self: start; min-width: 0; width: 100%; }
.faq .faq-grid > details > summary {
  align-items: center;
  font-size: 16px;
  gap: 14px;
  grid-template-columns: 24px minmax(0, 1fr) 28px;
  line-height: 1.6;
  padding: 18px 22px;
  text-align: left;
}
.faq .faq-grid > details > summary::marker { content: ""; }
.faq .faq-question { display: block; grid-column: 2; min-width: 0; overflow-wrap: break-word; }
.faq .faq-grid summary .q { grid-column: 1; line-height: 1; }
.faq .faq-grid summary .pm {
  align-self: center;
  display: block;
  grid-column: 3;
  height: 28px;
  margin: 0;
  position: relative;
  transform: none;
  width: 28px;
}
.faq .faq-grid summary .pm::before,
.faq .faq-grid summary .pm::after {
  background: currentColor;
  border-radius: 1px;
  content: "";
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.faq .faq-grid summary .pm::before { height: 2px; width: 12px; }
.faq .faq-grid summary .pm::after { height: 12px; transition: opacity .15s; width: 2px; }
.faq .faq-grid > details[open] > summary .pm { transform: none; }
.faq .faq-grid > details[open] > summary .pm::after { opacity: 0; }
.faq .faq-grid > details > .a {
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9;
  overflow-wrap: break-word;
  padding: 0 22px 22px 60px;
}
.faq .faq-grid > details:not([open]) > .a { display: none; }
@media (max-width: 767px) {
  .faq .faq-grid { gap: 10px; }
  .faq .faq-grid > details > summary {
    gap: 10px;
    grid-template-columns: 20px minmax(0, 1fr) 28px;
    padding: 16px;
  }
  .faq .faq-grid > details > .a { padding: 0 16px 20px 46px; }
}