.support {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 48px 64px;
  max-width: var(--frame);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(72px, 9vw, 112px);
}

/* FAQ: Markdown groups (h2) followed by <details> from the `faq` shortcode. */

.faq {
  display: flex;
  flex: 1 1 560px;
  flex-direction: column;
  min-width: 0;
}

.faq h2 {
  margin-bottom: 8px;
  font: 600 1.5rem / 1.2 var(--serif);
}

.faq h2:not(:first-child) {
  margin-top: 44px;
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq h2 + .faq-item {
  border-top: 1px solid var(--border);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  color: var(--text-primary);
  font: 500 1.125rem / 1.35 var(--sans);
  list-style: none;
  cursor: pointer;
}

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

.faq-question:hover {
  color: var(--primary-deep);
}

.faq-question .icon {
  color: var(--primary-deep);
  font-size: 20px;
  transition: transform 200ms ease;
}

.faq-item[open] .faq-question .icon {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 40px 22px 0;
  color: var(--text-secondary);
  font-size: 1.03125rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.faq-answer > * + * {
  margin-top: 12px;
}

.faq-answer ul {
  padding-left: 1.25em;
}

.faq-answer li + li {
  margin-top: 6px;
}

/* Contact and help */

.support-aside {
  display: flex;
  flex: 0 1 340px;
  flex-direction: column;
  gap: 12px;
}

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 26px;
}

.contact-title {
  font: 600 1.5rem / 1.2 var(--serif);
}

.contact-mail {
  font: 600 1.0625rem var(--sans);
  overflow-wrap: anywhere;
}

.contact-note {
  color: var(--text-secondary);
  font-size: 0.96875rem;
  text-wrap: pretty;
}

.help-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 26px;
  border: 1px solid var(--outline);
  border-radius: 26px;
  scroll-margin-top: var(--header-offset);
}

.help-note:target {
  border-color: var(--lilac-ink);
}

.help-icon {
  display: flex;
  flex: none;
  margin-top: 2px;
  color: var(--lilac-ink);
  font-size: 22px;
}

.help-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 0.96875rem;
  text-wrap: pretty;
}

.help-title {
  color: var(--text-primary);
  font: 600 1.0625rem / 1.3 var(--sans);
}

/* The aside sits next to the FAQ only when both columns fit (560 + 64 + 340 + gutters). */
@media (min-width: 1060px) {
  .support-aside {
    position: sticky;
    top: var(--header-offset);
  }
}