/* Shared use-case component: identical on the homepage and locale pages. */
:is(.home-page, .locale-page) .use-cases {
  padding-block: 104px;
  text-align: center;
}
:is(.home-page, .locale-page) .use-cases h3 {
  max-width: 23ch;
  margin-inline: auto;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.0833;
  font-weight: 600;
  letter-spacing: -.025em;
  text-align: center;
  text-wrap: balance;
}
:is(.home-page, .locale-page) .use-cases > .use-cases-audience {
  max-width: 760px;
  margin: 24px auto 0;
  color: #6e6e73;
  font-size: 1.3125rem;
  line-height: 1.4;
  letter-spacing: -.018em;
  font-weight: 400;
  text-wrap: balance;
}
:is(.home-page, .locale-page) .use-cases ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 48px 32px;
  max-width: 1080px;
  margin: 56px auto 40px;
  padding: 0;
}
:is(.home-page, .locale-page) .use-cases li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
  font-size: 1.1875rem;
  line-height: 1.3158;
  letter-spacing: -.015em;
}
:is(.home-page, .locale-page) .use-cases li .case-symbol {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  color: #1d1d1f;
}
:is(.home-page, .locale-page) .use-cases li .case-symbol :is(svg, img) { width: 42px; height: 42px; }
:is(.home-page, .locale-page) .use-cases li strong {
  display: block;
  max-width: 24ch;
  font-weight: 600;
  text-wrap: balance;
  overflow-wrap: normal;
}
:is(.home-page, .locale-page) .use-cases > p {
  max-width: 42rem;
  margin: 0 auto;
  font-size: 1.0625rem;
  line-height: 1.4706;
  text-align: center;
}
:is(.home-page, .locale-page) .use-cases > p strong { font-weight: 400; }
@media (max-width: 1023px) {
  :is(.home-page, .locale-page) .use-cases { padding-block: 88px; }
  :is(.home-page, .locale-page) .use-cases ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 720px;
    gap: 40px 36px;
  }
}
@media (max-width: 699px) {
  :is(.home-page, .locale-page) .use-cases { padding-block: 72px; }
  :is(.home-page, .locale-page) .use-cases h3 { max-width: 19ch; }
  :is(.home-page, .locale-page) .use-cases ul { margin-block: 40px 36px; gap: 36px 24px; }
  :is(.home-page, .locale-page) .use-cases li { gap: 14px; font-size: 1.0625rem; line-height: 1.3529; letter-spacing: -.016em; }
  :is(.home-page, .locale-page) .use-cases li .case-symbol { width: 40px; height: 40px; flex-basis: 40px; }
  :is(.home-page, .locale-page) .use-cases li .case-symbol :is(svg, img) { width: 36px; height: 36px; }
  :is(.home-page, .locale-page) .use-cases > p { max-width: 29ch; }
  :is(.home-page, .locale-page) .use-cases > .use-cases-audience {
    max-width: 760px;
    margin-top: 20px;
    font-size: 1.0625rem;
    line-height: 1.4706;
  }
}