/* «If it is heavy»: one readable column. Tokens mirror styles.css (this page does not load it). */

:root {
  --background-color-primary: #0b0806;
  --text-color-primary: #f1e6d4;
  --text-color-secondary: #cdbda4;
  --text-color-accent: #ff7a2e;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-hand: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  background: var(--background-color-primary);
  color: var(--text-color-primary);
  font: 400 1rem/1.55 var(--font-ui);
}

.help {
  max-width: 36rem;
  margin: 0 auto;
  padding: max(1.5rem, env(safe-area-inset-top)) 1rem 3rem;
}

.help_nav {
  display: flex;
  gap: 1.5rem;
  margin: 0 0 2rem;
  font-size: 0.875rem;
  color: var(--text-color-secondary);
}

.help_block + .help_block {
  margin-top: 3rem;
}

.help_title {
  margin: 0 0 1rem;
  font: 600 2.5rem/1.1 var(--font-hand);
}

.help_list {
  padding-left: 1rem;
}

.help_list li + li {
  margin-top: 0.5rem;
}

.help a {
  color: var(--text-color-accent);
}

.help a[href^='tel:'] {
  white-space: nowrap;
}

.help a:focus-visible {
  outline: 2px solid var(--text-color-accent);
  outline-offset: 2px;
}

.help_forget {
  padding: 0.625rem 1.25rem;
  border: 1px solid var(--text-color-secondary);
  border-radius: 999px;
  background: transparent;
  color: var(--text-color-primary);
  font: inherit;
  cursor: pointer;
}

.help_forget:disabled {
  opacity: 0.5;
  cursor: default;
}

.help_forget:focus-visible {
  outline: 2px solid var(--text-color-accent);
  outline-offset: 2px;
}

.help_forgot {
  color: var(--text-color-secondary);
}