.c-home-how-it-works {
  --c-hiw-marker-size: 2.25rem;
  --c-hiw-connector-color: var(--wa-color-wr-primary);
  --c-hiw-connector-width: var(--wa-border-width-m, 2px);
  --c-hiw-step-gap: var(--wa-space-l);

  padding: var(--wa-space-l);
  background: var(--wr-color-surface-raised);

  @media (width >= 64rem) {
    padding: var(--wa-space-3xl);
  }
}

.c-home-how-it-works__inner {
  width: 100%;
  margin-inline: auto;
}

.c-home-how-it-works__title {
  width: fit-content;
  margin: 0;
  /* In-page anchor target: keep the heading clear of the fixed site header. */
  scroll-margin-block-start: calc(var(--wr-site-header-height) + var(--wa-space-l));
  color: var(--wr-color-text-primary);
  font-size: var(--wa-font-size-xl);
  font-weight: 900;
  line-height: var(--wa-line-height-condensed);
  text-transform: uppercase;
}

.c-home-how-it-works__title::after {
  content: "";
  display: block;
  inline-size: 65%;
  block-size: 0.4rem;
  margin-block-start: var(--wa-space-2xs);
  background: var(--wr-color-brand-secondary);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10'%3E%3Cpath d='M3 7C50 3 150 2 197 5' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
}

.c-home-how-it-works__steps {
  position: relative;
  width: 100%;
  margin-block-start: var(--wa-space-xl);

  @media (width >= 48rem) {
    margin-block-start: var(--wa-space-2xl);
  }
}

.c-home-how-it-works__list {
  display: grid;
  gap: var(--c-hiw-step-gap);
  width: 100%;
  max-width: 32rem;
  margin-inline: auto;
  padding: 0;
  list-style: none;

  @media (width >= 48rem) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    /* Shared rows (marker / icon / title / description) so every column lines
       up; the description row takes the slack when steps are uneven. */
    grid-template-rows: auto auto auto 1fr;
    gap: var(--wa-space-s) 0;
    max-width: none;
  }
}

/* Desktop: a dashed trail that drapes between the numbered markers. With five
   equal, gapless columns the markers sit at 10% / 30% / … / 90%, so the rail
   spans 10%–90% and its scallop peaks fall behind each circle.
   `non-scaling-stroke` keeps the dashes crisp while the path stretches. */
.c-home-how-it-works__rail {
  display: none;

  @media (width >= 48rem) {
    display: block;
    position: absolute;
    inset-block-start: calc(var(--c-hiw-marker-size) / 2 - 0.15rem);
    /* An SVG is a replaced element, so size it explicitly rather than relying on
       left/right insets (which it ignores in favour of its intrinsic ratio). */
    inset-inline-start: 10%;
    inline-size: 80%;
    block-size: 1.25rem;
    color: var(--c-hiw-connector-color);
    pointer-events: none;
  }
}

.c-home-how-it-works__rail path {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--c-hiw-connector-width);
  stroke-dasharray: 4 7;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.c-home-how-it-works__step {
  position: relative;
  display: grid;
  grid-template-columns: var(--c-hiw-marker-size) minmax(0, 1fr);
  gap: var(--wa-space-m);
  min-width: 0;
  margin: 0;

  @media (width >= 48rem) {
    grid-template-columns: none;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    justify-items: center;
    padding-inline: var(--wa-space-s);
    text-align: center;
  }

  @media (width >= 64rem) {
    padding-inline: var(--wa-space-l);
  }
}

.c-home-how-it-works__marker {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
}

/* Mobile: a vertical dashed rail drops from each marker into the gap below to
   reach the next step. Hidden on the last step and replaced by the horizontal
   rail at the desktop breakpoint. */
.c-home-how-it-works__step:not(:last-child) .c-home-how-it-works__marker::after {
  content: "";
  position: absolute;
  inset-block-start: var(--c-hiw-marker-size);
  inset-block-end: calc(-1 * var(--c-hiw-step-gap));
  inset-inline-start: 50%;
  width: 0;
  border-inline-start: var(--c-hiw-connector-width) dashed var(--c-hiw-connector-color);
  transform: translateX(-50%);

  @media (width >= 48rem) {
    content: none;
  }
}

.c-home-how-it-works__number {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  inline-size: var(--c-hiw-marker-size);
  aspect-ratio: 1;
  border-radius: var(--wa-border-radius-circle);
  background: var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-loud);
  font-size: var(--wa-font-size-s);
  font-weight: var(--wa-font-weight-bold);
  line-height: 1;
}

.c-home-how-it-works__content {
  display: grid;
  gap: var(--wa-space-xs);
  justify-items: start;
  min-width: 0;

  /* Hand the icon, title and description to the step's subgrid so they align
     row-by-row across every column. */
  @media (width >= 48rem) {
    display: contents;
  }
}

.c-home-how-it-works__icon {
  inline-size: 3.5rem;
  max-inline-size: 100%;
  block-size: auto;

  @media (width >= 48rem) {
    inline-size: 5.5rem;
  }

  @media (width >= 64rem) {
    inline-size: 6.25rem;
  }
}

.c-home-how-it-works__step-title {
  margin: 0;
  color: var(--wr-color-text-primary);
  font-family: var(--wa-font-family-body);
  font-size: var(--wa-font-size-s);
  font-weight: var(--wa-font-weight-bold);
  letter-spacing: 0.04em;
  line-height: var(--wa-line-height-condensed);
  text-transform: uppercase;
}

.c-home-how-it-works__step-body {
  margin: 0;
  color: var(--wr-color-text-primary);
  font-size: var(--wa-font-size-s);
  line-height: var(--wa-line-height-normal);
  text-wrap: balance;
}