/* ==========================================================================
   How it works — schematic three-step page. Quiet, parchment. Uses tokens
   from style.css and reuses .hero__cta for the closing button (same crimson
   element as the landing page — the only crimson thing on this screen).
   No new colors here.
   ========================================================================== */

.how-it-works__home {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 5;
  display: block;
  text-decoration: none;
  padding: var(--space-1);
  margin: calc(var(--space-1) * -1);
  transition: opacity 0.2s ease;
}

.how-it-works__home img {
  display: block;
  width: 2.1rem;
  height: 2.1rem;
}

.how-it-works__home:hover,
.how-it-works__home:focus-visible {
  opacity: 0.7;
}

.how-it-works {
  position: relative;
  z-index: 3;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--space-2) + 2rem) var(--space-3) var(--space-3);
}

.how-it-works__title {
  font-family: var(--font-heading-secondary);
  font-weight: 700;
  font-size: calc(clamp(1.5rem, 6.5vw, 2.2rem) * var(--heading-scale));
  color: var(--color-ink);
  -webkit-text-fill-color: var(--color-ink);
  margin: 0 0 var(--space-3);
}

/* -------------------------------------------------------------------------
   Steps — a simple vertical progression, each in its own quiet box.
   ------------------------------------------------------------------------- */
.how-it-works__steps {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  max-width: 30ch;
  width: 100%;
}

.how-it-works__step {
  border: 1px solid var(--color-mist-dark);
  padding: var(--space-2) var(--space-2);
}

.how-it-works__step + .how-it-works__step {
  margin-top: var(--space-2);
}

.how-it-works__step-heading {
  font-family: var(--font-heading-secondary);
  font-weight: 700;
  font-size: calc(1.2rem * var(--heading-scale));
  color: var(--color-ink);
  -webkit-text-fill-color: var(--color-ink);
  margin: 0 0 0.2em;
}

.how-it-works__step-text {
  font-size: calc(var(--size-quiet) * var(--body-scale));
  color: var(--color-ash);
  -webkit-text-fill-color: var(--color-ash);
  line-height: 1.5;
  margin: 0;
}

/* -------------------------------------------------------------------------
   The honest note — plain fact, not a disclaimer. Same size and tone as the
   rest of the page: no border, no icon, no smaller type. A generous gap
   above it separates it from the CTA as its own, closing thought, and it's
   allowed to run wider than the steps above on bigger screens since it's
   prose, not a short list.
   ------------------------------------------------------------------------- */
.how-it-works__note {
  font-size: calc(var(--size-quiet) * var(--body-scale));
  color: var(--color-ink);
  -webkit-text-fill-color: var(--color-ink);
  line-height: 1.6;
  max-width: 36ch;
  margin: var(--space-4) 0 0;
}

.how-it-works__note a {
  color: var(--color-ink);
  -webkit-text-fill-color: var(--color-ink);
}

@media (min-width: 640px) {
  .how-it-works__steps {
    max-width: 44ch;
  }

  .how-it-works__note {
    max-width: 56ch;
  }
}

@media (min-width: 900px) {
  .how-it-works__note {
    max-width: 68ch;
  }
}