.support-hero {
  background:
    radial-gradient(circle at 82% 24%, var(--clay-pale), var(--clear) 34%),
    linear-gradient(145deg, var(--wash-light), var(--panel));
  border-bottom: var(--line) solid var(--border);
}

.support-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle, var(--dot) var(--line), var(--clear) var(--focus-width));
  background-size: var(--space-2) var(--space-2);
  mask-image: linear-gradient(90deg, var(--clear), var(--text), var(--clear));
}

.support-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  align-items: center;
  gap: var(--space-8);
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}

.support-intro {
  max-width: var(--reading-width);
}

.support-kicker,
.help-section-label {
  margin-bottom: var(--space-1);
  color: var(--accent-dark);
  font-family: var(--mono);
  font-size: var(--small-size);
  font-weight: var(--semibold);
  letter-spacing: .04em;
}

.support-intro h1 {
  margin-top: var(--space-1);
}

.support-actions {
  margin-top: var(--space-4);
}

.support-summary {
  padding: var(--space-4);
  background: linear-gradient(145deg, var(--bg), var(--panel));
  border: var(--line) solid var(--bg);
  border-radius: var(--soft);
  box-shadow: var(--lift-shadow);
}

.support-summary dl {
  margin: var(--space-3) 0 0;
}

.support-summary dl div {
  display: grid;
  grid-template-columns: minmax(96px, .7fr) minmax(0, 1.5fr);
  gap: var(--space-2);
  padding-block: var(--space-2);
  border-top: var(--line) solid var(--border);
}

.support-summary dt {
  color: var(--muted);
  font-size: var(--small-size);
}

.support-summary dd {
  margin: 0;
  font-size: var(--nav-size);
  font-weight: var(--semibold);
  overflow-wrap: anywhere;
}

.support-document {
  position: relative;
}

.support-callout {
  max-width: var(--reading-width);
  margin-top: var(--space-6);
  margin-bottom: 0;
}

.help-section {
  display: grid;
  grid-template-columns: minmax(200px, .85fr) minmax(0, 2fr);
  gap: var(--space-8);
  padding-top: var(--space-10);
  padding-bottom: var(--space-4);
}

.help-section + .help-section {
  border-top: var(--line) solid var(--border);
}

.help-section-heading {
  align-self: start;
  position: sticky;
  top: calc(var(--anchor-offset) + var(--space-6));
}

.help-section-heading h2 {
  margin-bottom: var(--space-2);
}

.help-section-heading p:last-child {
  color: var(--muted);
  font-size: var(--nav-size);
}

.help-section .faq-list {
  min-width: 0;
}

.help-section .faq {
  padding-block: var(--space-3);
}

.help-section .faq summary {
  font-size: var(--large);
}

.help-section .faq p {
  line-height: var(--leading);
}

.support-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: var(--space-8);
  padding: var(--space-5);
  background: linear-gradient(120deg, var(--wash), var(--clay-pale));
  border-radius: var(--soft);
}

.support-next h2 {
  font-size: var(--h3);
  margin-bottom: var(--space-1);
}

.support-next p {
  max-width: var(--reading-width);
  margin-bottom: 0;
  color: var(--muted);
}

.support-next .button {
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .support-hero-inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .support-summary {
    max-width: var(--reading-width);
  }

  .help-section {
    grid-template-columns: minmax(160px, .7fr) minmax(0, 2fr);
    gap: var(--space-4);
  }
}

@media (max-width: 768px) {
  .support-hero-inner {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }

  .help-section {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding-top: var(--space-8);
  }

  .help-section-heading {
    position: static;
  }

  .support-next {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-4);
  }
}

@media (max-width: 640px) {
  .support-hero-inner {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }

  .support-summary {
    padding: var(--space-3);
  }

  .support-summary dl div {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .support-actions .button {
    flex: 1 1 auto;
  }

  .support-callout {
    margin-top: var(--space-4);
  }

  .help-section {
    padding-top: var(--space-6);
  }

  .help-section .faq summary {
    font-size: var(--body-size);
  }

  .support-next {
    margin-top: var(--space-6);
    padding: var(--space-3);
  }
}