/* Landing-page layout on top of folio.css (The Grain, untouched).
   Only structure lives here — tokens, type, buttons come from folio.css.
   Everything is left-aligned (folio.css centers the masthead and footer for
   the relay's small dialog pages; a landing page reads as a column). */

.masthead { text-align: left; }
.footer { text-align: left; }

.hero .lede {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.62;
  color: var(--fg);
  max-width: 560px;
  margin: 0;
}
.hero .lede em { color: var(--ink); }

.hero-cta { margin: 26px 0 10px; }
.btn.download { font-size: 13px; padding: 13px 34px; }
.requirements { margin-top: 0; }

/* the description ends here; generous air before the install steps.
   Label flush left (no leading hairline — nothing centered). */
.divider.how-it-works { margin: 96px 0 26px; }
.divider.how-it-works::before { display: none; }
.steps-cta { margin-top: 22px; }

/* numbered steps, typographic rows on hairlines */
.steps ol { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.steps li {
  counter-increment: step;
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--border-light);
}
.steps li:first-child { border-top: 0; padding-top: 2px; }
.steps li::before {
  content: counter(step);
  font-family: var(--font-serif);
  font-size: 21px;
  color: var(--accent);
  flex: none;
  width: 26px;
  text-align: center;
}
.step-body { flex: 1; }
.step-title {
  display: block;
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 2px;
}
.step-text { display: block; font-size: 13.5px; line-height: 1.66; color: var(--fg-muted); }

@media (max-width: 620px) {
  .hero .lede { font-size: 17px; }
}

/* folio.css breaks code anywhere (long tokens); keep shell commands whole */
.steps code { word-break: normal; white-space: nowrap; }