.faq-page {
  max-width: 880px;
  margin-inline: auto;
  padding-block: var(--mkt-space-16);
}

.faq-page .marketing-h1 {
  margin-bottom: var(--mkt-space-10);
}

.faq-category {
  margin-bottom: var(--mkt-space-10);
}

.faq-category-heading {
  margin: 0 0 var(--mkt-space-5);
  font-size: var(--mkt-text-lg);
  font-weight: 700;
  color: var(--mkt-ink);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--mkt-space-3);
}

.faq-item {
  background-color: var(--mkt-surface);
  border: 1px solid var(--mkt-border);
  border-radius: var(--mkt-radius-md);
  overflow: hidden;
}

.faq-question {
  display: flex;
  align-items: center;
  gap: var(--mkt-space-3);
  padding: var(--mkt-space-5);
  font-size: var(--mkt-text-base);
  font-weight: 600;
  color: var(--mkt-ink);
  cursor: pointer;
  list-style: none;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question::after {
  content: "+";
  flex-shrink: 0;
  margin-left: auto;
  font-size: var(--mkt-text-lg);
  font-weight: 400;
  color: var(--mkt-brand-secondary);
  transition: transform 0.15s ease;
}

.faq-item[open] .faq-question::after {
  content: "−";
}

.faq-question:hover {
  background-color: rgba(139, 99, 155, 0.04);
}

.faq-question:focus-visible {
  outline: 0.2rem solid var(--mkt-brand) !important;
  outline-offset: -0.2rem !important;
}

.faq-answer {
  padding: 0 var(--mkt-space-5) var(--mkt-space-5);
  color: var(--mkt-muted);
  font-size: var(--mkt-text-sm);
  line-height: 1.7;
}

.faq-answer p {
  margin: 0 0 var(--mkt-space-3);
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-answer-link a {
  font-weight: 600;
}

#faq-preview {
  background-color: var(--mkt-surface);
  border: 1px solid var(--mkt-border);
  border-radius: var(--mkt-radius-lg);
  box-shadow: var(--mkt-shadow-sm);
  padding: var(--mkt-space-10);
}

.faq-preview-heading {
  margin: 0 0 var(--mkt-space-6);
  font-size: var(--mkt-text-xl);
  font-weight: 700;
  color: var(--mkt-ink);
}

.faq-preview-list {
  display: flex;
  flex-direction: column;
  gap: var(--mkt-space-3);
  margin-bottom: var(--mkt-space-6);
}

.faq-preview-item {
  border: 1px solid var(--mkt-border-light);
  border-radius: var(--mkt-radius-md);
  overflow: hidden;
}

.faq-preview-question {
  display: flex;
  align-items: center;
  gap: var(--mkt-space-3);
  padding: var(--mkt-space-4) var(--mkt-space-5);
  font-size: var(--mkt-text-sm);
  font-weight: 600;
  color: var(--mkt-ink);
  cursor: pointer;
  list-style: none;
}

.faq-preview-question::-webkit-details-marker {
  display: none;
}

.faq-preview-question::after {
  content: "+";
  flex-shrink: 0;
  margin-left: auto;
  font-size: var(--mkt-text-base);
  font-weight: 400;
  color: var(--mkt-brand-secondary);
}

.faq-preview-item[open] .faq-preview-question::after {
  content: "−";
}

.faq-preview-question:hover {
  background-color: rgba(139, 99, 155, 0.04);
}

.faq-preview-question:focus-visible {
  outline: 0.2rem solid var(--mkt-brand) !important;
  outline-offset: -0.2rem !important;
}

.faq-preview-answer {
  padding: 0 var(--mkt-space-5) var(--mkt-space-4);
  color: var(--mkt-muted);
  font-size: var(--mkt-text-xs);
  line-height: 1.7;
}

.faq-preview-answer p {
  margin: 0;
}

.faq-preview-more {
  margin: 0;
  text-align: right;
}

.faq-preview-more a {
  font-weight: 600;
  font-size: var(--mkt-text-sm);
}

@media (max-width: 575.98px) {
  .faq-page {
    padding-block: var(--mkt-space-12);
  }

  .faq-question {
    padding: var(--mkt-space-4);
  }

  #faq-preview {
    padding: var(--mkt-space-6);
  }
}