.method {
  padding: clamp(0.9rem, 2.1vw, 2.35rem) var(--gutter) clamp(2.8rem, 4.55vw, 5.1rem);
  scroll-margin-block-start: calc(var(--header-top) + var(--header-height) + 1.15rem);
  background: var(--mist);
  color: var(--slate);
}

.method__intro { margin-bottom: clamp(1.8rem, 3.45vw, 3.7rem); }

.method h2 {
  margin: clamp(0.75rem, 1.45vw, 1.25rem) 0 0;
  font: 700 clamp(1.28rem, 5.75vw, 2.45rem)/1.12 var(--font-title);
  letter-spacing: -0.045em;
}

.method__steps {
  --step-gap: clamp(1.4rem, 3.35vw, 2.25rem);
  --step-indent: clamp(1.9rem, 6vw, 3.15rem);
  --step-size: clamp(1.7rem, 4.8vw, 2.7rem);
  --marker-size: 0.6rem;
  --marker-top: calc(var(--step-size) * 0.55);
  --rail-position: calc(0.6rem - var(--step-indent));
  position: relative;
  display: grid;
  row-gap: var(--step-gap);
  margin: 0;
  padding-inline-start: var(--step-indent);
  list-style: none;
}

.method__step { position: relative; min-width: 0; }

.method__number {
  display: block;
  font: 700 var(--step-size)/1.1 var(--font-title);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}

.method__marker {
  width: var(--marker-size);
  height: var(--marker-size);
  background: var(--yellow);
  rotate: 45deg;
}

.method h3 {
  margin: 0.38rem 0 0.32rem;
  font: 700 clamp(1.03rem, 3.8vw, 1.45rem)/1.21 var(--font-title);
  letter-spacing: -0.032em;
  overflow-wrap: break-word;
}

.method__step p {
  max-width: 48ch;
  font-size: clamp(0.92rem, 1.28vw, 1.15rem);
  line-height: 1.55;
}

.method__action {
  display: flex;
  justify-content: center;
  margin-block-start: clamp(1.75rem, 4.35vw, 4.5rem);
}

@media (width < 1024px) {
  .method__step:not(:last-child)::before,
  .method__marker {
    position: absolute;
    inset-block-start: var(--marker-top);
    inset-inline-start: var(--rail-position);
  }

  .method__step:not(:last-child)::before {
    inset-block-end: calc(-1 * (var(--step-gap) + var(--marker-top)));
    width: 2px;
    translate: -50% 0;
    background: var(--yellow);
    content: "";
  }

  .method__marker { translate: -50% -50%; }
}

@media (max-width: 479px) {
  .method__cta { width: 100%; }
}

@media (min-width: 1024px) {
  .method h2 { font-size: clamp(2rem, 3.35vw, 3.55rem); }

  .method__steps {
    --step-size: clamp(2.7rem, 4.15vw, 4.75rem);
    --marker-size: clamp(0.66rem, 0.95vw, 1.05rem);
    --rail-start: calc(var(--step-size) * 0.61);
    --rail-turn: clamp(0.65rem, 1.25vw, 1.35rem);
    --rail-weight: 3px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(1.15rem, 2.45vw, 3rem);
    row-gap: clamp(0.66rem, 1.22vw, 1.25rem);
    padding-inline-start: 0;
  }

  .method__step {
    display: grid;
    grid-row: 1 / span 4;
    grid-template-rows: subgrid;
    align-items: start;
  }

  .method__steps::before,
  .method__steps::after {
    position: absolute;
    grid-column: 1 / -1;
    grid-row: 2 / 3;
    height: var(--rail-weight);
    background: var(--yellow);
    translate: 0 -50%;
    content: "";
  }

  .method__steps::before { inset: 50% var(--rail-turn) auto var(--rail-start); }
  .method__steps::after {
    inset: calc(50% - var(--rail-turn)) 0 auto auto;
    width: calc(var(--rail-turn) * 1.4142 + 1px);
    transform-origin: right center;
    rotate: -45deg;
  }

  .method__marker {
    z-index: 1;
    margin-inline-start: var(--rail-start);
    translate: -50% 0;
  }

  .method h3 {
    margin: 0;
    font-size: clamp(1.13rem, 1.74vw, 1.85rem);
  }
}

@media (prefers-reduced-motion: no-preference) {
  :root:has(.method:target) { scroll-behavior: smooth; }
}