.help-article-body ol {
  list-style: none;
  counter-reset: help-step;
  padding: 0;
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.help-article-body ol > li {
  counter-increment: help-step;
  position: relative;
  padding: 0.85rem 1rem 0.85rem 3.15rem;
  border: 1px solid color-mix(in srgb, var(--app-card-border, #2a2a2a) 80%, transparent);
  border-radius: 1.25rem;
  background: color-mix(in srgb, var(--app-card-bg, #161616) 70%, transparent);
}

@media (min-width: 640px) {
  .help-article-body ol {
    gap: 1rem;
  }

  .help-article-body ol > li {
    padding: 1rem 1.25rem 1rem 3.5rem;
  }
}

.help-article-body ol > li::before {
  content: counter(help-step);
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: color-mix(in srgb, #6C9918 18%, transparent);
  color: #8fbf2a;
}

.help-article-body p {
  margin-bottom: 1rem;
}

.help-article-body a {
  color: #8fbf2a;
  text-decoration: underline;
}

html:has(.help-layout),
body:has(.help-layout) {
  overflow-x: clip !important;
}

body:has(.help-layout) {
  overflow-y: visible !important;
}

.help-shell {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 2.5rem 1rem 5rem;
  animation: none !important;
  transform: none !important;
}

.help-layout {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.help-content {
  min-width: 0;
}

.help-nav details > summary {
  list-style: none;
}

.help-nav details > summary::-webkit-details-marker {
  display: none;
}

.help-nav-desktop {
  display: none;
}

.help-nav-mobile {
  display: block;
}

@media (min-width: 768px) {
  .help-shell {
    padding: 3.5rem 1.5rem 6rem;
  }

  .help-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
  }

  .help-nav {
    position: sticky;
    top: 6rem;
  }

  .help-nav-panel {
    border: 1px solid color-mix(in srgb, var(--app-card-border, #2a2a2a) 85%, transparent);
    border-radius: 1.5rem;
    background: color-mix(in srgb, var(--app-card-bg, #161616) 55%, transparent);
    padding: 1.15rem 0.75rem 1.25rem;
  }

  .help-nav-desktop {
    display: block;
  }

  .help-nav-mobile {
    display: none;
  }
}