/* Shared section navigation: full labels, with space reserved for the CTA. */
.wf-strip {
  height: auto;
  background: #fff;
}

.wf-strip .wrap {
  height: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content max-content;
  column-gap: clamp(8px, 1vw, 16px);
  padding-block: 8px;
}

.wf-strip ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 4px 12px;
  height: auto;
  width: 100%;
  min-width: 0;
}

.wf-strip .wrap ol > li {
  display: block;
}

.wf-strip ol a {
  min-width: 0;
  height: auto;
  min-height: 36px;
  gap: 6px;
  line-height: 1.35;
  white-space: normal;
  color: var(--navy);
}

.wf-strip .wrap ol > li a span {
  position: static;
  width: auto;
  height: auto;
  clip-path: none;
  min-width: 0;
  background: transparent;
  padding: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Keep the progress line below the words rather than masking it with white. */
.wf-strip ol::before,
.wf-strip ol::after {
  top: auto;
  bottom: 3px;
  height: 2px;
  margin-top: 0;
}

.wf-strip .wf-count,
.wf-strip .wf-cta {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .wf-strip .wrap {
    grid-template-columns: minmax(0, 1fr) max-content;
    row-gap: 8px;
  }

  .wf-strip ol {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wf-strip .wf-cta {
    display: inline-flex;
  }

  .wf-strip .wf-count {
    justify-self: start;
  }
}