.help__lead { max-width: 68ch; margin: 0 0 var(--s3); color: var(--paper-dim); line-height: 1.6; }

.help__toc { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.help__toc a {
  padding: 4px 14px;
  font-family: var(--display);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--paper);
  border: 2px solid var(--paper-dim);
  transform: skewX(var(--skew));
  transition: background var(--fast) linear, color var(--fast) linear;
}
.help__toc a:hover, .help__toc a:focus-visible {
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
}

.help-group { margin-bottom: var(--s5); scroll-margin-top: var(--s4); }

/* <details>/<summary> so every answer works with zero JavaScript; closed by default
   except the first of each group, open enough to read what the section is for without
   a click, closed enough that the page is not one long wall of text. */
.help-faq {
  background: var(--ink-soft);
  border: var(--edge);
  border-left: 8px solid var(--accent);
  margin-bottom: var(--s3);
}
.help-faq summary {
  position: relative;
  padding: var(--s3) var(--s6) var(--s3) var(--s3);
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--paper);
  list-style: none;
  cursor: pointer;
}
.help-faq summary::-webkit-details-marker { display: none; }
.help-faq summary::marker { content: ""; }
/* A plus/minus rather than the browser's own triangle, to match the rest of the
   site's own controls (bell, avatar menu) instead of stock chrome. */
.help-faq summary::after {
  content: "+";
  position: absolute;
  right: var(--s3);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--display);
  font-size: 1.3rem;
  color: var(--accent);
}
.help-faq[open] summary::after { content: "\2212"; }

.help-faq__body { padding: 0 var(--s3) var(--s3); line-height: 1.65; color: var(--paper-dim); }
.help-faq__body p { margin: 0; }
.help-faq__body a { color: var(--accent); }

.help-walls { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: var(--s1); }
.help-walls a {
  font-family: var(--display);
  letter-spacing: 0.06em;
  color: var(--wall-accent, var(--accent));
}
.help-walls a:hover { text-decoration: underline; }

.help__still-stuck {
  margin-top: var(--s5);
  padding: var(--s4);
  background: var(--ink-soft);
  border: var(--edge);
  border-left: 8px solid var(--accent);
  line-height: 1.6;
  color: var(--paper-dim);
}
.help__still-stuck a { color: var(--accent); }

@media (max-width: 640px) {
  .help__toc a { padding: 3px 10px; font-size: 0.72rem; }
  .help-faq summary { padding: var(--s2) var(--s5) var(--s2) var(--s2); font-size: 0.95rem; }
  .help-faq__body { padding: 0 var(--s2) var(--s2); }
}