/* Add to Home Screen help page. Reuses the add-a-question card.
   Centered headings, left-aligned steps in a centered column. */
.hs-card h1 { text-wrap: balance; }
.hs-lede { text-align: center; max-width: 28em; margin-left: auto; margin-right: auto; }

.hs-os { margin: 0 0 1.75rem; }
.hs-os h2 { font-size: 1.3em; text-align: center; margin: 0 0 0.15rem; }
.hs-for { text-align: center; font-size: 0.95em; margin: 0 0 0.75rem; }

.hs-steps {
  list-style: none;
  counter-reset: hs;
  margin: 0 auto;
  padding: 0;
  max-width: 28em;
  display: grid;
  gap: 0.65rem;
  text-align: left;
}
.hs-steps li {
  counter-increment: hs;
  position: relative;
  background: var(--soft);
  border: 1.5px solid var(--box);
  border-radius: 16px;
  padding: 0.8em 1em 0.85em 3.1em;
  line-height: 1.45;
}
.hs-steps li::before {
  content: counter(hs);
  position: absolute;
  left: 0.85em;
  top: 0.8em;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  background: var(--navy);
  color: var(--cream);
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1.7em;
  text-align: center;
}
.hs-aside { text-align: left; max-width: 28em; margin: 0.8rem auto 0; font-size: 0.95em; }

.hs-note { max-width: 28em; margin-left: auto; margin-right: auto; }
.hs-back { text-align: center; margin: 1.5rem 0 0; font-weight: 700; }