/* S3 How we work. 2026-10-24, human: five ruled rows edge to edge, like the
   display rows above. A row = quiet «Step N» (as in variant B), the step name,
   and a fee tag at the right (Fixed fee on rows 1-4, Success fee on row 5);
   the last row is inverted (night band, cream text) so the success fee stands
   out. No step descriptions, no fee notes (that copy is in git and HANDOFF §2).
   The rows are full-width blocks with the lane padding on themselves, so the
   rules and the band run from edge to edge. Mobile-first; desktop from 1024px.
   Rules: 1px ink at 30%, the Questions rhythm. */

.hww {
  --rule-30: color-mix(in srgb, var(--color-ink) 30%, transparent);
  padding-top: 64px; /* audit 2026-10-24: the standard section distance 88 incl. the air (was 96) */
}
.hww__title {
  font-size: 28px;
  font-weight: var(--font-weight-medium);
  line-height: 115%;
  letter-spacing: var(--tracking-tight);
}
.hww__steps {
  margin-top: 24px;
  list-style: none;
}

/* Mobile row: labels line («Step N» left, fee right), the name under it. */
.hww__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 24px;
  align-items: baseline;
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: 1px solid var(--rule-30);
}
.hww__step,
.hww__fee {
  font-size: 16px;
  line-height: var(--leading-body);
  opacity: 0.62;
}
.hww__step {
  grid-area: 1 / 1;
}
.hww__fee {
  grid-area: 1 / 2;
  text-align: right;
  white-space: nowrap;
}
.hww__name {
  grid-area: 2 / 1 / 3 / 3;
  padding-top: 4px;
  font-size: 22px;
  font-weight: var(--font-weight-medium);
  line-height: 125%;
  letter-spacing: -0.01em;
}
/* Success row: inverted colours. */
.hww__row--success {
  background: var(--color-night);
  color: var(--color-surface);
}

@media (min-width: 1024px) {
  /* One line per row: «Step N» in a 96px lane (x 120 at 1440), the name from
     x 240, the fee tag flush right (x 1320); rows 28 / 28 like the FAQ rows. */
  .hww {
    padding-top: 112px; /* audit 2026-10-24: the standard section distance 144 incl. the air (was 128) */
  }
  .hww__title {
    font-size: var(--text-h2);
  }
  .hww__steps {
    margin-top: 32px;
  }
  .hww__row {
    grid-template-columns: 96px minmax(0, 1fr) auto;
    padding-top: 28px;
    padding-bottom: 28px;
  }
  .hww__step {
    grid-area: auto;
  }
  .hww__fee {
    grid-area: auto;
  }
  .hww__name {
    grid-area: auto;
    padding-top: 0;
    font-size: var(--text-h3);
    white-space: nowrap;
  }
}