/* CUSTOMER EXPERIENCE — bespoke editorial experience for expertise.html's
   experience tab only, shown via #cx-experience (js/expertise.js hides
   the generic .expertise-detail__grid / .expertise-capabilities markup
   and swaps this in instead, exactly like #strat-experience/
   #brand-experience/#campaigns-experience/#aiw-experience/#sm-experience/
   #web-experience do for their own tabs).

   Deliberately its own "cx-" class namespace — this page stays
   independently editable without a future "small correction only to X"
   tweak on one silently touching another.

   Content is intentionally a single statement, not an article: one
   heading, one paragraph. No sections, cards, visuals or CTA below it —
   .expertise-detail__panel's own bottom padding (css/expertise.css)
   already provides the page's closing whitespace. */

.cx[hidden] {
  display: none;
}

.cx-hero {
  text-align: center;
}

.cx-hero__heading {
  margin: var(--cb-space-3) auto 0;
  max-width: 26ch;
  font-family: var(--cb-font-sans);
  font-weight: var(--cb-weight-medium);
  font-size: 32px;
  line-height: var(--cb-text-page-heading-leading);
  letter-spacing: var(--cb-text-page-heading-tracking);
  color: var(--cb-color-ink);
}

@media (min-width: 50.0625rem) {
  .cx-hero__heading {
    font-size: 36px;
  }
}

@media (min-width: 80rem) {
  .cx-hero__heading {
    font-size: 40px;
  }
}

/* Large-screen continuation (V-1, docs/FINAL_VISUAL_REVIEW.md) — matches
   the same fluid growth now applied to --cb-text-page-heading-size
   (tokens.css) so this bespoke heading stays consistent with the other
   simple capability tabs on large displays. 1440px and below unaffected. */
@media (min-width: 90rem) {
  .cx-hero__heading {
    font-size: clamp(2.5rem, 1.375rem + 1.25vw, 2.875rem); /* 40–46px */
  }
}

.cx-hero__intro {
  margin: var(--cb-space-4) auto 0;
  max-width: 1000px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--cb-color-text-secondary);
}