/* Native horizontal scrolling keeps mouse, touch and keyboard navigation consistent. */
.use-cases { padding-block: 35px 26px; border-bottom: 1px solid var(--line); }
.use-cases-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 25px; border-inline: 1px solid var(--line); padding-inline: 20px; margin-bottom: 21px; }
.use-cases-heading .eyebrow { font-size: 10px; color: #788187; letter-spacing: .04em; }
.use-cases-heading h2 { font-size: 29px; margin: 11px 0 9px; letter-spacing: -.6px; }
.use-cases-heading p { font-size: 14px; line-height: 1.7; color: #78838b; margin: 0; }
.use-cases-controls { display: flex; gap: 7px; padding-top: 15px; }
.use-cases-controls button { display: grid; place-items: center; width: 35px; height: 34px; border: 1px solid #e2e6e8; border-radius: 3px; background: #fff; font-size: 18px; transition: border-color .2s, background .2s; }
.use-cases-controls button:hover:not(:disabled) { border-color: #aab3b9; background: #fafbfc; }
.use-cases-controls button:disabled { color: #c7cdd0; cursor: default; }
.use-case-track { position: relative; display: flex; align-items: stretch; gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; padding: 7px 1px 18px; }
.use-case-track::-webkit-scrollbar { display: none; }
.use-case-track:focus-visible { outline-offset: 5px; }
.use-case-card { position: relative; isolation: isolate; flex: 0 0 calc((100% - 54px)/4.2); min-width: 260px; min-height: 365px; display: flex; flex-direction: column; padding: 26px 25px 22px; border-radius: 3px; background-color: var(--case-bg); color: var(--case-ink); scroll-snap-align: start; transition: transform .2s, box-shadow .2s; }
.use-case-card::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: .65; background-image: linear-gradient(#21352b0d 1px,transparent 1px),linear-gradient(90deg,#21352b0d 1px,transparent 1px); background-size: 23px 23px; }
.use-case-card:hover, .use-case-card:focus-within { transform: translateY(-4px); box-shadow: 0 12px 18px -14px #26362b65; }
.case-stone { --case-bg: #c6c7b9; --case-ink: #353b2e; }
.case-blue { --case-bg: #b6d3e0; --case-ink: #263e4a; }
.case-orange { --case-bg: #fc8a4c; --case-ink: #4a2b19; }
.case-dusk { --case-bg: #b9bfdc; --case-ink: #1f2a4a; }
.case-grey { --case-bg: #d0d5d5; --case-ink: #344449; }
.use-case-number { font-size: 10px; letter-spacing: .04em; opacity: .75; }
.use-case-card h3 { margin: 27px 0 16px; font-size: clamp(24px,1.7vw,30px); line-height: 1.18; font-weight: 500; letter-spacing: -.65px; }
.use-case-card>p { font-size: 13px; line-height: 1.75; margin: 0 0 30px; max-width: 290px; opacity: .85; }
.use-case-card-footer { margin-top: auto; padding-top: 18px; border-top: 1px solid #21352b2b; }
.use-case-card-footer strong { font-size: 15px; font-weight: 500; letter-spacing: -.2px; }
.use-case-card-footer a { display: flex; justify-content: space-between; gap: 15px; align-items: center; width: 100%; font-size: 11px; line-height: 1.6; margin-top: 11px; }
.use-case-card-footer a span { transition: transform .2s; }
.use-case-card-footer a:hover span { transform: translate(2px,-2px); }
.use-cases-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #808a91; font-size: 9px; line-height: 1.7; letter-spacing: .03em; }
@media (max-width: 1200px) {
  .use-case-card { flex-basis: calc((100% - 36px)/3.2); }
}
@media (max-width: 800px) {
  .use-case-card { flex-basis: 43%; }
  .use-cases-heading h2 { font-size: 26px; }
}
@media (max-width: 560px) {
  .use-cases { padding-top: 27px; }
  .use-cases-heading { padding-inline: 12px; gap: 15px; }
  .use-cases-heading h2 { font-size: 25px; }
  .use-cases-heading p { font-size: 13px; }
  .use-cases-controls { padding-top: 2px; gap: 5px; }
  .use-cases-controls button { width: 31px; height: 31px; font-size: 16px; }
  .use-case-card { flex-basis: 84%; min-width: 245px; min-height: 355px; padding: 24px 22px; }
  .use-case-card h3 { font-size: 28px; }
  .use-cases-footer { font-size: 8px; }
  .use-cases-footer>span:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .use-case-track { scroll-behavior: auto; }
  .use-case-card, .use-case-card-footer a span { transition: none; }
}