/* Help page in the read mode of /legal/: Onest, ivory, discs, one open column.
   Static backdrop and no reveal animation keep the instructions calm. */
.help-page {
  --page-top: 20px;
  --page-bottom: 28px;
  --page-side: 48px;
  display: block;
  min-height: 100svh;
}
.help-page .ambient-glow { opacity: .45; }
.help-page .ambient-glow::before,
.help-page .ambient-glow::after { animation: none; will-change: auto; }
.help-page .site-header,
.help-page main,
.help-page footer { width: 100%; max-width: 760px; margin-inline: auto; }
.help-page main { display: block; padding: 0; text-align: left; }
.help-document { width: 100%; }
.help-hero { padding: 44px 0 40px; text-align: center; }
.help-hero .mark { --disc: 56px; margin: 0 auto 24px; }
.help-hero .disc { animation: none; }
.help-document h1 {
  margin: 0;
  font-size: 3.25rem;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.help-lead {
  max-width: 600px;
  margin: 20px auto 0;
  color: #d8dae0;
  font-size: 1.0625rem;
  line-height: 1.7;
  text-wrap: pretty;
}
.help-sections { min-width: 0; }
.help-document section { padding: 32px 0; border-top: 1px solid #2b2d33; scroll-margin-top: 32px; }
.help-document section:focus-visible { outline: 2px solid var(--focus); outline-offset: 10px; border-radius: 4px; }
.help-document h2 {
  margin: 0 0 18px;
  color: #f4f4f2;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.025em;
}
.help-sections p, .help-sections li, .help-sections dd { color: #b9bdc7; font-size: 1rem; line-height: 1.75; }
.help-sections strong { color: #f4f4f2; font-weight: 600; }
.help-sections a { color: #f4f4f2; text-decoration: underline; text-decoration-color: #777b86; }
.help-sections a:hover { text-decoration-color: #f4f4f2; }

/* Two entry points side by side; each is one large link. */
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.way {
  display: flex; flex-direction: column; gap: 6px;
  min-height: 44px; padding: 18px 20px;
  border: 1px solid #33363e; border-radius: 14px; background: #1d1f24;
  text-decoration: none;
  transition: border-color .18s ease-out, background-color .18s ease-out;
}
.help-sections .way { text-decoration: none; }
.way:hover { background: #24262c; border-color: #4a4e59; }
.way strong { font-size: 1.0625rem; }
.way span { color: var(--muted); font-size: .875rem; line-height: 1.6; }

/* Numbered steps with the ivory counter; keys pressed on the remote stand apart. */
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; padding-left: 44px; margin: 0 0 16px; counter-increment: step; }
.steps li:last-child { margin-bottom: 0; }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 2px;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 9px;
  background: #f4f4f2; color: #141519;
  font-size: .875rem; font-weight: 700; line-height: 1;
}
.keys { color: #f4f4f2; font-weight: 600; letter-spacing: .18em; white-space: nowrap; }
.help-sections .download { margin-top: 24px; text-decoration: none; color: #141519; }
.help-sections .download span { color: inherit; font-size: 13px; line-height: 1; }
.help-sections .release-status { margin-top: 12px; text-align: center; }

.notes { margin: 0; padding-left: 22px; }
.notes li { margin: 0 0 10px; }
.notes li:last-child { margin-bottom: 0; }
.notes li::marker { color: var(--muted); }

.faq { margin: 0; }
.faq dt { margin: 18px 0 4px; color: #f4f4f2; font-size: 1rem; font-weight: 600; line-height: 1.5; }
.faq dt:first-child { margin-top: 0; }
.faq dd { margin: 0; }

.help-page footer { margin-top: 24px; padding-top: 20px; border-top: 1px solid #2b2d33; }
.help-page footer a { flex-shrink: 0; }
.skip-link { position: fixed; top: 12px; left: 24px; z-index: 2; padding: 14px 18px; border-radius: 9px; background: #f4f4f2; color: #090a0c; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

@media (max-width: 760px) {
  .help-page { --page-top: 12px; --page-side: 22px; --page-bottom: 24px; }
  .help-hero { padding: 32px 0 28px; text-align: left; }
  .help-hero .mark { --disc: 44px; margin: 0 0 22px; }
  .help-document h1 { font-size: clamp(1.75rem, 8vw, 2.5rem); line-height: 1.12; letter-spacing: -.03em; }
  .help-lead { margin: 16px 0 0; font-size: 1rem; line-height: 1.65; }
  .help-document section { padding: 26px 0; scroll-margin-top: 24px; }
  .help-document h2 { font-size: 1.375rem; margin-bottom: 14px; }
  .ways { grid-template-columns: 1fr; }
  .steps li { padding-left: 40px; }
  .help-sections .download { font-size: 16px; }
  .help-page footer { align-items: flex-start; gap: 12px; text-align: left; margin-top: 0; }
}
@media (max-width: 360px) {
  .help-page { --page-side: 18px; }
  .help-sections .download { font-size: 15px; padding-inline: 12px; }
}