/* ==========================================================================
   CRM — The hero's works-with strip (page-owned)
   ==========================================================================
   Three brand marks under the hero's actions, on the hero's own centred axis.
   It is a separate section only because the hero fragment is shared by six
   pages; everything here is tuned so the reader never reads a seam.

   Where the strip sits in the page's vertical rhythm is not this sheet's
   business — that is an arbitration between three sections, and it lives in the
   page's own PageTuning.css.

   The marks are the one place on this page where a colour Bloom does not own is
   allowed on screen, so they are handled quietly: set on one optical size, held
   a notch below full opacity, and spaced wide enough that three different
   silhouettes still read as one row.
   ========================================================================== */

.crm-logos__inner {
  display: grid;
  justify-items: center;
  gap: clamp(0.9rem, 1.5vw, 1.25rem);
  text-align: center;
}

/* The family's annotation voice, one notch quieter than the hero's own badge:
   this line introduces the marks, it does not compete with the pitch above. */
.crm-logos__label {
  margin: 0;
  color: var(--feat-muted);
  font-family: var(--feat-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
}

.crm-logos__list {
  display: flex;
  gap: clamp(1.8rem, 3.4vw, 3.1rem);
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* One size for three marks, then an optical correction on top of it. Setting
   them all to the same HEIGHT is the wrong answer here: Salesforce is a lockup
   (a cloud with its wordmark inside, 1.43:1) while the other two are bare icon
   marks (0.9:1 and 0.75:1), so at equal height the lockup carries roughly twice
   the ink and reads a size larger. These two factors were picked by eye against
   the rendered row, which is the only way to judge it. */
.crm-logos__mark {
  --crm-logo-scale: 1;

  display: block;
  width: auto;
  height: calc(clamp(1.75rem, 2.7vw, 2.3rem) * var(--crm-logo-scale));
  opacity: 0.9;
}

.crm-logos__item:first-child .crm-logos__mark {
  --crm-logo-scale: 0.86;
}

.crm-logos__item:last-child .crm-logos__mark {
  --crm-logo-scale: 1.06;
}

@media (max-width: 480px) {
  .crm-logos__list {
    gap: 1.5rem;
  }

  .crm-logos__label {
    font-size: 0.62rem;
    letter-spacing: 0.14em;
  }
}