/*
 * why-choose.css — shared "Why Choose" bento component.
 *
 * Single source of truth for the numbered card grid used on
 * /consulting-partners/ and /salesforce-admins/. Loaded after each page's
 * Elementor export + custom CSS so it can override framework rules.
 *
 * Design notes:
 *  - Rules are scoped under the `.why-choose` grid wrapper, giving descendant
 *    selectors (0,2,0) specificity — enough to beat the element-level heading
 *    rules in the Elementor exports on both pages.
 *  - `.why-t` intentionally sets NO font-family: each page keeps its own
 *    heading typeface (Inter on consulting-partners, Sen on salesforce-admins),
 *    which is how the titles already render. Harmonizing the typeface would make
 *    each page internally inconsistent with its other headings.
 *  - The CTA button stays page-native (.cp-why-cta-btn / .h-btn) and is not part
 *    of this component — the two pages' buttons differ by design.
 *  - 'JetBrains Mono' and 'Inter' are loaded site-wide via tracking-head.njk.
 */

.why-choose {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid #E7EBF3;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.why-choose .why-item {
  padding: 40px;
  border-right: 1px solid #E7EBF3;
  border-bottom: 1px solid #E7EBF3;
}
.why-choose .why-item:nth-child(2n) { border-right: none; }

.why-choose .why-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: #4068EB;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.why-choose .why-t {
  font-size: 18px;
  font-weight: 700;
  color: #1D1D1D;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.why-choose .why-b {
  font-size: 14px;
  line-height: 1.65;
  color: #4D4D4D;
  margin: 0;
}

.why-choose .why-cta {
  grid-column: 1 / -1;
  padding: 40px 48px;
  background: #EDF0FC;
  border-right: none;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.why-choose .why-cta-text { flex: 1; min-width: 220px; }
.why-choose .why-cta-text .why-t { margin-bottom: 10px; }

@media (max-width: 767px) {
  .why-choose { grid-template-columns: 1fr; }
  .why-choose .why-item { border-right: none !important; padding: 32px; }
  .why-choose .why-cta { padding: 32px; flex-direction: column; align-items: flex-start; }
  .why-choose .why-cta a { width: 100%; justify-content: center; text-align: center; }
}