/* The Help Center.
 *
 * It borrows the legal pages' reading layout wholesale — contents rail,
 * windows, numbered sections — because that layout was built for exactly this
 * job: a long document you scan rather than read, where you need to see the
 * whole shape before finding the one paragraph you came for.
 *
 * What it does NOT borrow is the accordion. Collapsing answers behind a click
 * is the default shape of an ecommerce FAQ and it is the wrong one here: it
 * hides the very thing the page exists to give away, it costs a click per
 * question, and it makes the page unsearchable with ctrl-F. Apple's support
 * pages and Linear's docs both leave the text on the page. So does this.
 *
 * Everything below is therefore small: a question style, a spacing rhythm, and
 * a marker that ties the questions to the same idiom as the footer links.
 */

.help-item + .help-item { margin-top: 1.75rem; }

.help-q {
  position: relative;
  margin: 0 0 .5rem;
  font-size: 1rem; font-weight: 620;
  letter-spacing: -.012em; line-height: 1.4;
  color: var(--text);
  max-width: 62ch;
}

/* The same hanging marker the footer uses, but always visible rather than on
   hover — here it is punctuation, not feedback. It sits in the window's
   padding so the question text stays flush with the section heading above it;
   an indent of its own width would put every question a few pixels off the
   only vertical line the eye has. */
.help-q::before {
  content: ""; position: absolute; left: -.95rem; top: .6em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-ring);
}

/* Answers are plain <p> inside .legal-s, so they inherit measure, color and
   leading from the legal stylesheet. The only change is the gap under the
   last one, which would otherwise double up with .help-item's margin. */
.help-item p:last-child, .help-item ul:last-child { margin-bottom: 0; }

/* A quieter aside for the one-line asides that follow an answer — the "and if
   that fails" sentence that is worth having but not worth the same weight. */
.help-note {
  font-size: .86rem; color: var(--text-faint);
  max-width: 62ch; margin: .45rem 0 0;
}
.help-note a { color: var(--text-muted); border-bottom-color: var(--border-strong); }

@media (max-width: 520px) {
  /* The marker hangs into the window padding, which is at its narrowest here.
     Pulling it in keeps it inside the card rather than clipped by it. */
  .help-q::before { left: -.75rem; }
}