/* A code component's Shadow DOM doesn't inherit the prototype's global box-sizing reset. */
.hMT9Ak2gmofkX8TcPZgZ,
.hMT9Ak2gmofkX8TcPZgZ *,
.hMT9Ak2gmofkX8TcPZgZ *::before,
.hMT9Ak2gmofkX8TcPZgZ *::after {
  box-sizing: border-box;
}

/* Fills the grid cell it sits in, so cards in a row are level (a code component's host is otherwise inline). */
:host {
  display: block;
  height: 100%;
}

/*
 * One of the outcome's numbers (prototype CaseStudy .stats li): a white card, 32px corners, its figure
 * (brand blue) over its label; it lifts a little on hover. 24px corners on phones.
 */
.hMT9Ak2gmofkX8TcPZgZ {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: max(32px, 3.24vw) max(22px, 1.85vw);
  border-radius: 32px;
  background: #fff;
  color: var(--text-primary, #171717);
  font-family: var(--type-family-base, 'Raleway', system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition:
    translate 500ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 500ms ease;
}

.hMT9Ak2gmofkX8TcPZgZ:hover {
  translate: 0 -4px;
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.12);
}

/* About 115px at 1728, brand blue, ExtraLight. */
.IY5T3KJtNUDden7RTH92 {
  margin-bottom: max(10px, 0.93vw);
  /* Lining figures (Raleway's default old-style ones rise and drop), so every figure stands the same height. */
  font-variant-numeric: lining-nums;
  white-space: nowrap;
  color: var(--action-primary-default, #0073e6);
  font-size: calc(var(--type-heading-xl-size, 64px) * 1.48);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Body / Default, SemiBold. */
.S_HqjnFOGijsTnTfXB0V {
  color: var(--neutral-700, #353535);
  font-size: var(--type-default-size, 16px);
  font-weight: 600;
  line-height: var(--type-default-lh, 23px);
  text-wrap: pretty;
}

@media (max-width: 767px) {
  .hMT9Ak2gmofkX8TcPZgZ {
    border-radius: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hMT9Ak2gmofkX8TcPZgZ {
    transition: none;
  }

  .hMT9Ak2gmofkX8TcPZgZ:hover {
    translate: none;
    box-shadow: none;
  }
}

/* A code component's Shadow DOM doesn't inherit the prototype's global box-sizing reset. */
.ps_cZIOaeMzXS8lfaQKB,
.ps_cZIOaeMzXS8lfaQKB *,
.ps_cZIOaeMzXS8lfaQKB *::before,
.ps_cZIOaeMzXS8lfaQKB *::after {
  box-sizing: border-box;
}

/* A block in the Rich Text's flow, with room above and below like a figure (the host is otherwise inline). */
:host {
  display: block;
  margin-block: max(32px, 2.78vw);
}

/* The width the group is given decides the columns, so it reads the same in any column. */
.ps_cZIOaeMzXS8lfaQKB {
  container-type: inline-size;
}

/* Cards in a row are level; the gap is the Stat Card grid's on the page. */
.Hj6XK8LHqyHfeahQPXaq {
  display: grid;
  grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr));
  gap: max(16px, 1.39vw);
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.Hj6XK8LHqyHfeahQPXaq[data-columns='1'] {
  --columns: 1;
}

.Hj6XK8LHqyHfeahQPXaq[data-columns='2'] {
  --columns: 2;
}

.Hj6XK8LHqyHfeahQPXaq[data-columns='3'] {
  --columns: 3;
}

.BlfDO00lEmXTRaddCD1f {
  margin: 0;
  padding: 0;
}

/*
 * The figures are large and don't wrap, so three across needs about 760px of column and two about
 * 520px; below that the cards stack (never two plus one left alone).
 */
@container (max-width: 760px) {
  .Hj6XK8LHqyHfeahQPXaq[data-columns='3'] {
    --columns: 1;
  }
}

@container (max-width: 520px) {
  .Hj6XK8LHqyHfeahQPXaq[data-columns='2'] {
    --columns: 1;
  }
}