/* Act 3, method. Owned by the method agent.
   Three steps on Millet, walked left to right under one drawn hairline,
   each numbered at 73px so the act carries its own scale. */

/* Section scoped head measure: 6 columns (6 x 64 + 5 x 32 = 544) so the
   headline breaks as two balanced lines instead of stranding a short tail. */
#method .band__head { max-width: 544px; }

/* The act is short, so its ground matches its content: 96 above and below,
   not the medium band's 128, or the Millet reads as a spacer. */
#method { padding-block: var(--space-96); }

/* Desktop only: hold the second clause on one line so the break lands at
   the comma. Below 1024 the clause wraps freely and the inner nb keeps
   the mobile rag ("as it lands." never strands alone). */
@media (min-width: 1024px) {
  #method .band__title .nb-wide { white-space: nowrap; }
}

.steps {
  margin-top: var(--space-96);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--space-32);
  position: relative;
}

/* The connecting rule the three steps hang from. Drawn on reveal. */
.steps::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--hairline);
  background: var(--color-rule-light);
}

@media (prefers-reduced-motion: no-preference) {
  .js .steps::before {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1) 200ms;
  }

  .js .steps.is-revealed-line::before { transform: scaleX(1); }
}

.step {
  padding-top: var(--space-32);
}

/* The one scale change mid page: each step is numbered in the largest
   display register, so the method act reads as a full width three beat
   spine rather than a third document column. */
.step__index {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-73);
  line-height: var(--leading-73);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  color: var(--color-furrow);
}

.step__title {
  margin-top: var(--space-24);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-29);
  line-height: var(--leading-29);
}

.step__text {
  margin-top: var(--space-16);
  max-width: var(--measure);
  color: var(--color-ink-secondary-light);
}

@media (max-width: 1023px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-48);
  }

  /* Stacked steps: cap text at the same 6 column width the head uses
     (6 x 64 + 5 x 32 = 544) so lines hold the 66 to 72 character target. */
  .step__text { max-width: 544px; }
}

@media (max-width: 767px) {
  .steps { margin-top: var(--space-48); grid-template-columns: minmax(0, 1fr); }
  .step__index { font-size: var(--text-51); line-height: var(--leading-51); }
}

/* The terms. Four commercial facts under the four beats, in a hairline
   topped row: the beats say how the work lands, the terms say what you
   are agreeing to. Label in the utility register, fact in the body. */
.terms {
  margin-top: var(--space-96);
  padding-top: var(--space-32);
  border-top: var(--hairline) solid var(--color-rule-light);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--space-32);
  list-style: none;
  padding-left: 0;
}

.term__label {
  display: block;
  font-family: var(--font-utility);
  font-size: var(--text-12);
  line-height: var(--leading-12);
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-furrow);
}

.term__text {
  margin-top: var(--space-16);
  color: var(--color-ink-secondary-light);
}

@media (max-width: 1023px) {
  .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-48); }
}

@media (max-width: 767px) {
  .terms { margin-top: var(--space-64); grid-template-columns: minmax(0, 1fr); row-gap: var(--space-32); }
}