.feature-strip {
  padding-block: var(--sp-5);
  background: var(--color-surface);
  border-block: 1px solid var(--color-border);
}

.feature-strip__list {
  list-style: none;
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

.feature-strip__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  position: relative;
  counter-increment: step;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--color-canvas);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.feature-strip__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-1);
}

.feature-strip__item::before {
  content: counter(step);
  position: absolute;
  top: -8px;
  left: var(--sp-3);
  background: var(--color-primary);
  color: #fff;
  font-size: var(--fs-12);
  font-weight: var(--fw-bold, 700);
  border-radius: var(--r-pill);
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  box-shadow: var(--sh-1);
}

.feature-strip__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.feature-strip__icon svg {
  width: 22px;
  height: 22px;
}

.feature-strip__label {
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  line-height: var(--lh-snug);
}

@media (min-width: 640px) {
  .feature-strip__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .feature-strip {
    padding-block: var(--sp-6);
  }
  .feature-strip__list {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-5);
    align-items: stretch;
  }
  .feature-strip__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(var(--sp-5) * -0.5 - 4px);
    width: calc(var(--sp-5) - 8px);
    height: 2px;
    background: linear-gradient(90deg, var(--color-border-strong), transparent);
    transform: translateY(-50%);
    pointer-events: none;
  }
}

[data-theme="dark"] .feature-strip__item {
  background: var(--color-canvas-2);
}