/* 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);
  white-space: nowrap;
}

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

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

/* One row at every width, as on phones: a label never wraps, and when the
   row is wider than the screen it scrolls sideways instead. The strip spans
   the whole screen, out of whatever container holds it; the auto margins
   centre a row that fits and fall to 0 when it scrolls. */
.feature-strip {
  justify-content: flex-start;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-inline: var(--container-pad);
  margin-inline: calc(50% - 50vw);
}

/* 100vw counts a desktop scrollbar, so the full-width strip pokes past the
   page by half its width; clip that instead of scrolling the page sideways. */
html:has(.feature-strip) {
  overflow-x: clip;
}
.feature-strip::-webkit-scrollbar { display: none; }
.feature-strip li {
  flex: 0 0 auto;
}
.feature-strip li:first-child {
  margin-inline-start: auto;
}
.feature-strip li:last-child {
  margin-inline-end: auto;
}

@media (max-width: 640px) {
  .feature-strip li {
    padding: 0 var(--space-3);
    font-size: 0.875rem;
  }
  .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);
}