.docs {
  max-width: var(--pgsx-measure-wide);
  margin: 0 auto;
  padding: var(--pgsx-space-16) var(--pgsx-shell-gutter) var(--pgsx-space-24);
}

.docs__head {
  margin-bottom: var(--pgsx-space-12);
}

.docs__title {
  font-family: var(--pgsx-font-display);
  font-variation-settings:
    "opsz" 72,
    "SOFT" 30,
    "wght" 380;
  font-size: var(--pgsx-text-3xl);
  line-height: var(--pgsx-leading-display);
  letter-spacing: var(--pgsx-tracking-display);
  margin: var(--pgsx-space-3) 0 var(--pgsx-space-4);
  color: var(--pgsx-text-primary);
}

.docs__title em {
  font-style: normal;
  color: var(--pgsx-accent);
}

.docs__lede {
  color: var(--pgsx-text-secondary);
  font-size: var(--pgsx-text-md);
  line-height: var(--pgsx-leading-body);
  margin: 0;
}

.docs__section {
  margin-bottom: var(--pgsx-space-12);
}

.docs__section h2 {
  font-family: var(--pgsx-font-display);
  font-size: var(--pgsx-text-xl);
  margin: 0 0 var(--pgsx-space-4);
  padding-bottom: var(--pgsx-space-3);
  border-bottom: 1px solid var(--pgsx-rule);
  color: var(--pgsx-text-primary);
}

.docs__steps,
.docs__list {
  color: var(--pgsx-text-secondary);
  line-height: var(--pgsx-leading-body);
  padding-left: var(--pgsx-space-6);
  margin: 0;
}

.docs__steps li,
.docs__list li {
  margin-bottom: var(--pgsx-space-3);
}

.docs__steps strong,
.docs__list strong {
  color: var(--pgsx-text-primary);
}

.docs code {
  font-family: var(--pgsx-font-mono);
  font-size: 0.9em;
  background: var(--pgsx-surface);
  border: 1px solid var(--pgsx-border);
  border-radius: var(--pgsx-radius-sm);
  padding: 1px 5px;
}

.docs__faq {
  display: flex;
  flex-direction: column;
  gap: var(--pgsx-space-2);
}

.docs__faq-item {
  border: 1px solid var(--pgsx-border);
  border-radius: var(--pgsx-radius-md);
  background: var(--pgsx-surface);
  padding: var(--pgsx-space-4) var(--pgsx-space-5);
}

.docs__faq-item summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--pgsx-text-primary);
}

.docs__faq-item p {
  color: var(--pgsx-text-secondary);
  line-height: var(--pgsx-leading-body);
  margin: var(--pgsx-space-3) 0 0;
}

.docs__foot {
  margin-top: var(--pgsx-space-8);
  color: var(--pgsx-text-muted);
  font-size: var(--pgsx-text-sm);
}

.docs__foot a,
.docs p a {
  color: var(--pgsx-accent);
}