/* =============================================================================
   AdStar landing — clients.css
   Strip under the hero: the assistants the MCP connector works in, linking to
   /connect. The hero's bottom gradient is its top edge; the examples strip follows.
   ========================================================================== */

.clients {
  padding-block: 0 56px;
}
/* The hero is clipped at a fractional height (100svh), so a half-covered pixel row of its video
   can show at the boundary. A 2px black bar straddling that edge hides it, with no layout change. */
.clients::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: var(--bg);
  pointer-events: none;
}

.clients__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.clients__label {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.clients__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 36px;
}

.clients__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-md);
  line-height: var(--lh-md);
  font-weight: 600;
  color: var(--gray-100);
}
.clients__item img {
  width: 22px;
  height: 22px;
  opacity: 0.9;
}

/* Lime text link with the nav's sliding underline */
.clients__link {
  position: relative;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
  color: var(--brand-600);
}
.clients__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -4px;
  height: 2px;
  background: var(--brand-600);
  transition: right var(--dur) var(--ease-out);
}
.clients__link:hover::after { right: 0; }

@media (max-width: 767px) {
  .clients { padding-block: 0 40px; }
  .clients__list { gap: 10px 22px; }
  .clients__item { font-size: var(--fs-sm); line-height: var(--lh-sm); gap: 8px; }
  .clients__item img { width: 18px; height: 18px; }
}