/* Section 3 — How it works. Deliberately quiet: black, typographic, no imagery.
   The only graphic device is the starting-sequence timeline: numbered discs joined
   by a hairline — horizontal across the four steps on desktop, vertical down a rail
   on mobile. No cards, boxes or borders around content. */

.how {
  --how-disc: 3.25rem;
  --how-line: rgb(255 255 255 / 0.25);

  /* Top padding matches the other sections so this heading sits at the same height
     within its section as "Choose your Z." and "Arrive at A1 Motor Park." do. */
  /* Tight at the bottom: the CTA closes the section, so it hands over to the A1
     boundary rule without a black gap under it. */
  padding-block: clamp(4rem, 9vh, 7rem) clamp(2.25rem, 4.5vh, 3.25rem);
  background-color: var(--zh-black);
  scroll-margin-top: var(--zh-header-height);
}

.how__eyebrow {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.65);
}

.how__steps {
  display: grid;
  grid-template-columns: 1fr;
  margin: clamp(3rem, 8vh, 5.5rem) 0 0;
  padding: 0;
  list-style: none;
}

/* Mobile: a left rail — disc in the first column, copy in the second. */
.how-step {
  position: relative;
  display: grid;
  grid-template-columns: var(--how-disc) 1fr;
  column-gap: 1.25rem;
  padding-bottom: 2.5rem;
}

.how-step > :not(.how-step__marker) {
  grid-column: 2;
}

/* Vertical connector, from the underside of one disc to the next. */
.how-step::before {
  content: "";
  position: absolute;
  top: var(--how-disc);
  bottom: 0;
  left: calc(var(--how-disc) / 2);
  width: 1px;
  background-color: var(--how-line);
}

.how-step:last-child {
  padding-bottom: 0;
}

.how-step:last-child::before {
  display: none;
}

.how-step__marker {
  position: relative;
  display: grid;
  place-items: center;
  height: var(--how-disc);
}

.how-step__number {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--how-disc);
  height: var(--how-disc);
  border-radius: 50%;
  background-color: var(--zh-white);
  color: var(--zh-black);
  font-size: 1.125rem;
  font-style: italic;
  font-weight: 800;
  line-height: 1;
}

.how-step__title {
  margin: 0.75rem 0 0;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.15;
  text-transform: uppercase;
}

.how-step__action,
.how-step__object {
  display: block;
}

.how-step__object {
  font-size: 0.7em;
  color: var(--zh-red);
}

.how-step__text {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: rgb(255 255 255 / 0.7);
}

.how-step__aside {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.5);
}

.how__cta {
  margin-top: clamp(2.5rem, 6vh, 4rem);
}

@media (min-width: 60rem) {
  /* Only the timeline and its closing button are centred — the section heading and
     its subtext stay on the page's left grid like every other section. */
  .how__steps,
  .how__cta {
    text-align: center;
  }

  .how__steps {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Columns run edge to edge so the hairline segments join into one line; the copy
     is held narrow and centred instead of being inset with padding. */
  .how-step {
    display: block;
    padding-bottom: 0;
  }

  .how-step::before {
    display: none;
  }

  /* Horizontal connector, drawn through the centre of the discs. It stops at the
     first and last disc rather than running off the ends of the sequence. */
  .how-step__marker::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--how-line);
  }

  .how-step:first-child .how-step__marker::before {
    left: 50%;
  }

  .how-step:last-child .how-step__marker::before {
    right: 50%;
  }

  .how-step__title {
    margin-top: 1.5rem;
  }

  .how-step__text,
  .how-step__aside {
    max-width: 20ch;
    margin-inline: auto;
  }
}