.helper-main { max-width: 68rem; margin: 0 auto; padding: clamp(1.5rem, 5vw, 3.5rem) 1.25rem 3rem; }
.helper-main > * { max-inline-size: 46rem; }
.helper-main .lead { margin-bottom: 2rem; }
.step { display: flex; gap: 1rem; margin-bottom: 1.75rem; align-items: flex-start; }
.step-num {
  flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: var(--primary); color: var(--primary-ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.9rem;
}
.step h2 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.step p { color: var(--muted); margin-bottom: 0.6rem; }
.platforms { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.platform-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); text-decoration: none; font-weight: 600;
}
.platform-btn:hover { border-color: var(--primary); color: var(--primary); }
.status-box {
  margin: 2rem 0; padding: 1rem 1.25rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface);
  display: flex; align-items: center; gap: 0.6rem; font-weight: 600;
}
.status-box.on { border-color: var(--ok); color: var(--ok); }
.status-box.on::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--ok); }
.status-box.off::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--muted); }
.note-box { padding: 1rem 1.25rem; border-radius: var(--radius); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); font-size: 0.92rem; color: var(--muted); }
code { background: var(--bg); padding: 0.1rem 0.4rem; border-radius: 4px; font-size: 0.9em; }