/* ═══════════════════════════════════════════════════════════════════════════
   CUSTOMER PROOF
   Contextual customer evidence on commercial pages.

   This is supporting evidence, not a testimonial wall. Each card names one
   real customer, states what they actually run on Exactlly, and links to the
   full customer story where the evidence is governed. It deliberately does
   not resemble a review: no quote marks, no stars, no ratings, no person's
   name and job title, no italic pull-quote.

   Reuses the site primitives rather than restating them: .wrap for the
   container, .slbl for the eyebrow, .h2 for the heading and .btn-g for the
   link. Only what those do not already cover is defined here.

   The section carries its own background and a hairline top border, which is
   the pattern these commercial pages already use where two same-tone
   sections meet. That makes the component safe to drop between any two
   sections without disturbing .sec / .sec-alt alternation.

   The prefix is "cproof" because .cp is already a card-padding primitive in
   main.css and is in use across the site.
   ═══════════════════════════════════════════════════════════════════════════ */

.cproof {
  padding: 72px 0;
  background: var(--w);
  border-top: 1px solid var(--br);
}

/* For placement against a white neighbour, where the grey tone reads better. */
.cproof--alt { background: var(--bg); }

.cproof-hd { max-width: 720px; margin-bottom: 30px; }

.cproof-hd .h2 { margin-top: 10px; }

.cproof-sub {
  font-size: 15px;
  line-height: 1.65;
  color: var(--t-m);
  margin-top: 12px;
}

/* auto-fit caps at three across in the 1152px content width: a fourth track
   would need 1260px. Two cards balance at half width, one fills the row and
   is constrained by .cproof-grid--one below. */
.cproof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.cproof-grid--one { max-width: 720px; }

.cproof-card {
  display: flex;
  flex-direction: column;
  background: var(--w);
  border: 1px solid var(--br);
  border-radius: var(--r-l);
  padding: 24px 22px;
  box-shadow: var(--sh-s);
  min-width: 0;
}

/* The customer's own mark, at a size that identifies without dominating.
   These are the same assets the customer stories ship, referenced directly. */
.cproof-logo {
  display: block;
  height: 30px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 15px;
}

/* A customer whose logo is not yet approved. The card sets the name as type in
   the slot .cproof-logo occupies, at the same height and bottom margin, so a
   row of cards stays aligned. When the approved asset arrives the block is
   replaced by an img.cproof-logo tag and nothing else changes. This mirrors
   .cs-brandmark on the story page, which exists for the same reason: the
   alternative when a mark is missing is approximating someone's logo. */
.cproof-brandmark {
  display: flex;
  align-items: center;
  height: 30px;
  margin-bottom: 15px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--t);
}

.cproof-name {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--b);
  margin-bottom: 8px;
}

.cproof-title {
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -.02em;
  line-height: 1.35;
  color: var(--t);
  margin-bottom: 10px;
}

.cproof-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--t-m);
  margin-bottom: 16px;
}

/* Fact chips carry only figures and terms the customer confirmed. */
.cproof-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.cproof-fact {
  font-size: 12px;
  font-weight: 600;
  color: var(--b);
  background: var(--b-lt);
  border: 1px solid var(--b-bd);
  border-radius: 999px;
  padding: 5px 11px;
  line-height: 1.35;
}

/* Pushed to the card foot so links align across a row of uneven cards. */
.cproof-link { margin-top: auto; }

/* ── Compact rows ──────────────────────────────────────────────────────────
   For the Industries hub, where a wall of cards would compete with the
   industry grid it sits under. One row per industry that has a governed
   story: the industry, the customer, one line of what they run, and the
   link. Industries without a relevant story simply have no row.          */

.cproof-rows {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cproof-row {
  display: grid;
  grid-template-columns: 158px 130px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  background: var(--w);
  border: 1px solid var(--br);
  border-radius: var(--r);
  padding: 14px 18px;
}

.cproof-row-ind {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--b);
  line-height: 1.35;
}

.cproof-row-logo {
  display: block;
  height: 26px;
  width: auto;
  max-width: 122px;
  object-fit: contain;
  object-position: left center;
}

.cproof-row-t {
  font-size: 14px;
  line-height: 1.55;
  color: var(--t-m);
  min-width: 0;
}

.cproof-row-t b { color: var(--t); font-weight: 650; }

/* ── Responsive ────────────────────────────────────────────────────────────
   Cards: auto-fit already drops to two across, then one below 767px where
   two 300px tracks no longer fit. Rows need explicit handling because their
   fixed leading columns do not collapse on their own.                    */

@media (max-width: 1023px) {
  .cproof { padding: 60px 0; }
  /* Industry label and logo share the first line, text and link the second. */
  .cproof-row {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px 18px;
  }
  .cproof-row-t { grid-column: 1 / -1; }
  .cproof-row .btn-g { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .cproof { padding: 52px 0; }
  .cproof-grid { grid-template-columns: 1fr; }
  .cproof-grid--one { max-width: none; }
  .cproof-row { grid-template-columns: 1fr; gap: 10px; }
  .cproof-row-ind { grid-column: auto; }
  .cproof-card { padding: 22px 20px; }
}