.use-cases{padding-block:var(--section-space,7rem);background:var(--c-bg);scroll-margin-top:var(--header-h)}
.use-cases__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:4rem}
.use-cases__head h2{max-width:38rem;margin:0 0 1.25rem;font-size:var(--fs-h2);line-height:1.1;letter-spacing:var(--track-tight)}
.use-cases__head p{max-width:40rem;margin:0;color:var(--c-ink);line-height:1.7}
/* A bento grid: three columns, with three wide cards that lay the video beside the words. */
.use-cases__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;grid-auto-flow:dense;gap:.75rem;width:calc(100% - var(--gutter)*2);max-width:calc(var(--max) - var(--gutter)*2);margin:0 auto;padding:0;list-style:none}
.use-case{position:relative;min-width:0;display:flex;flex-direction:column;border:1px solid #ebe7e3;border-radius:22px;overflow:hidden;background:#f4f2ef}
/* The stills and videos are 16:9, so the window follows the card's width and never crops them. */
.use-case__visual {
  position: relative;
  aspect-ratio: 16 / 9;
  flex: none;
  overflow: hidden;
  margin: 14px 14px 0;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background: #f4f6f9;
}

.use-case__visual img,
.use-case__visual video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.use-case__visual video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .25s ease;
}
.use-case__visual video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .use-case__visual video { transition: none; } }

.use-case__body{display:flex;flex-direction:column;flex:1;padding:18px 25px 20px;color:var(--c-ink)}
.use-case__body h3{font-size:1.5rem;line-height:1.2;letter-spacing:-.025em;margin:0 0 9px;color:inherit}
.use-case__body p{font-size:15px;line-height:1.6;color:var(--c-ink-2);margin:0}
.use-case--wide{grid-column:span 2;display:grid;grid-template-columns:minmax(0,2.3fr) minmax(0,1fr);align-items:center}
.use-case--wide .use-case__visual{margin:14px 0 14px 14px}
.use-case--wide .use-case__body{flex:none;padding:14px 20px 14px 18px}
@media(max-width:1000px){.use-cases__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:639px){.use-cases{padding-block:4rem}.use-cases__head{align-items:flex-start;flex-direction:column;gap:1.5rem;margin-bottom:2rem}.use-cases__head h2{font-size:2rem}.use-case__body{padding:23px}.use-case__body h3{font-size:1.4rem}.use-case__body p{font-size:14px}}


/* Each card links to its page. The headline's link stretches over the whole card, and draws the focus ring around it. */
.use-case__body h3 a{color:inherit;text-decoration:none}
.use-case__body h3 a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:21px}
.use-case__body h3 a:focus-visible{outline:none}
.use-case__body h3 a:focus-visible::after{outline:3px solid #1979eb;outline-offset:-5px}

/* Show the first two rows at each grid width until the visitor expands the list. */
.use-cases__grid.is-collapsed > :nth-child(n+6){display:none}
.use-cases__more{display:flex;justify-content:center;margin-top:1.75rem}
.use-cases__more[hidden]{display:none}

@media(max-width:1000px){
  .use-cases__grid.is-collapsed > :nth-child(n+4){display:none}
}

@media(max-width:639px){
  .use-cases__grid{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}
  .use-cases__grid.is-collapsed > :nth-child(n+3){display:none}
  .use-case--wide{grid-column:auto;display:flex;align-items:stretch}
  .use-case--wide .use-case__visual{margin:14px 14px 0}
  .use-case--wide .use-case__body{flex:1;padding:23px}
}