/* USP strip: icon + label items with hairline separators. */

.feature-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: var(--space-4) 0;
}

.feature-strip li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-5);
  font-size: 1rem;
  color: var(--color-text);
}

.feature-strip li + li {
  border-left: 1px solid var(--color-border-input);
}

.feature-strip i {
  font-size: 1.3rem;
  color: #25465f; /* live --primary (petrol navy) */
}

@media (max-width: 1024px) {
  .feature-strip {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .feature-strip li + li {
    border-left: 0;
  }
}

@media (max-width: 640px) {
  .feature-strip {
    /* Scroll horizontally so 4-5 features don't wrap into a chaotic pile on
       a phone; each item stays intact and the eye scans left-to-right. */
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-inline: var(--container-pad);
    margin-inline: calc(-1 * var(--container-pad));
  }
  .feature-strip::-webkit-scrollbar { display: none; }
  .feature-strip li {
    padding: 0 var(--space-3);
    font-size: 0.875rem;
    flex: 0 0 auto;
  }
  .feature-strip i {
    font-size: 1.1rem;
  }
}

/* Standard page header (PageHeader): the USP strip under the hero band on
   non-custom pages, with a hairline dividing the header region from the page
   content below. */
.page-header__strip {
  border-bottom: 1px solid var(--color-border);
}