/* ===========================================================================
   The sections that turn a feature tour into a sales page.
   ---------------------------------------------------------------------------
   Segmentation and the marketplace strip. The homepage had
   four consecutive answers to "what does it do" and none at all to "is it for
   me" or "what does it cost" — which is where a visitor either self-qualifies
   or leaves.
   =========================================================================== */

/* ── Marketplace strip ───────────────────────────────────────────────────── */
.connects {
  background: var(--paper-2);
  padding: 96px 0;
}
.connects__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.connects__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.conn {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  transition:
    border-color 0.24s,
    transform 0.24s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.conn:hover {
  transform: translateX(3px);
  border-color: rgba(20, 112, 106, 0.3);
}
.conn__ico {
  width: 24px;
  height: 24px;
  color: var(--teal);
}
.conn span {
  display: grid;
  gap: 2px;
}
.conn b {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
}
.conn i {
  font-style: normal;
  font-size: 0.79rem;
  color: var(--muted);
}
.conn em {
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper-2);
  padding: 4px 9px;
  border-radius: 999px;
}
/* Only one of these is actually built, and it says so. */
.conn--live {
  border-color: rgba(20, 112, 106, 0.32);
  background: linear-gradient(120deg, rgba(99, 231, 127, 0.13), #fff 60%);
}
.conn__tag {
  background: var(--spring) !important;
  color: var(--ink) !important;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .connects__grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

@media (max-width: 620px) {
  .connects {
    padding: 68px 0;
  }
}