.showcase-label { color: var(--color-accent-strong); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.showcase-mobile-note { display: none; }
.showcase-role-switch { display: inline-flex; border: 1px solid #c7cbd0; border-radius: 6px; overflow: hidden; }
.showcase-role-switch a { padding: .42rem .65rem; color: inherit; font-size: .79rem; text-decoration: none; white-space: nowrap; }
.showcase-role-switch a + a { border-left: 1px solid #c7cbd0; }
.showcase-role-switch a[aria-current="page"] { background: var(--color-accent); color: white; font-weight: 700; }
.showcase-clips { margin: .5rem 0 1rem; }
.showcase-clips h2 { font-size: 1.15rem; margin: 0 0 .7rem; }
.showcase-clips__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.showcase-clip { display: block; overflow: hidden; color: inherit; text-decoration: none; border: 1px solid #d9dce0; border-radius: 6px; background: var(--color-surface, #fff); }
.showcase-clip:hover, .showcase-clip:focus-visible { border-color: var(--color-accent); }
.showcase-clip__image { position: relative; display: block; aspect-ratio: 16 / 7; overflow: hidden; background: #202326; }
.showcase-clip__image img { width: 100%; height: 100%; object-fit: cover; }
.showcase-clip__image span { position: absolute; inset: 0; display: grid; place-items: center; color: white; font-size: 2rem; text-shadow: 0 2px 8px #111; }
.showcase-clip__copy { display: grid; gap: .15rem; padding: .65rem .8rem; }
.showcase-clip__copy small { color: #5b6268; }
.showcase-player { display: block; width: 100%; max-height: 72vh; background: #111; }
@media (max-width: 760px) {
  .showcase-label { display: none; }
  .showcase-mobile-note { display: block; padding: .35rem 1rem; background: #fff5cf; color: #58324a; font-size: .72rem; font-weight: 700; }
  .showcase-role-switch a { padding: .4rem .48rem; font-size: .72rem; }
  .showcase-clips__grid { grid-template-columns: 1fr; }
}