.sample {
    width: min(680px, 100%);
    margin: 0;
    border: 1px solid var(--color-divider);
    border-radius: 14px;
    overflow: hidden;
    background: var(--color-neutral-900);
    text-align: left;
  }
  .sample-frame { position: relative; aspect-ratio: 16 / 9; background: var(--color-neutral-900); }
  .sample-frame video { width: 100%; height: 100%; display: block; background: #000; }
  .sample-cover {
    position: absolute; inset: 0; width: 100%;
    display: grid; place-items: center;
    border: 0; padding: 0; cursor: pointer;
    background: var(--color-neutral-900); color: var(--color-neutral-100);
    font: inherit; text-align: center;
  }
  .sample-cover::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(rgba(24,26,24,.34) 0, rgba(24,26,24,.34) 52%,
                                rgba(24,26,24,.92) 100%),
                var(--sample-poster) center / cover no-repeat;
  }
  .sample-cover > * { position: relative; }
  .sample-cover:focus-visible { outline: 2px solid var(--color-accent-400); outline-offset: -4px; }
  .sample-eyebrow {
    position: absolute; left: 18px; right: 18px; bottom: 36px;
    font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--color-accent-400);
  }
  .sample-play {
    width: 64px; height: 64px; border-radius: 50%;
    border: 2px solid var(--color-accent-400);
    background: rgba(20,16,10,.35);
    display: grid; place-items: center;
    transition: transform .12s ease, background .12s ease;
  }
  .sample-cover:hover .sample-play { transform: scale(1.06); background: rgba(248,198,74,.14); }
  @media (prefers-reduced-motion: reduce) {
    .sample-cover:hover .sample-play { transform: none; }
  }
  .sample-title {
    position: absolute; left: 18px; right: 18px; bottom: 14px;
    font-size: 13px; color: var(--color-neutral-100); line-height: 1.45;
    font-weight: 600;
  }
  .sample-cap { padding: 12px 16px; background: var(--color-bg); font-size: 13px; line-height: 1.55; }
  .sample-note { margin: 4px 0 0; font-size: 12.5px; }
  @media (max-width: 520px) {
    .sample-eyebrow { font-size: 11.5px; bottom: 42px; }
    .sample-title { font-size: 15px; line-height: 1.35; }
  }
.sample-lang{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.sample-lang[hidden]{display:none}
.sample-lang .lang-b{font:inherit;font-size:13px;line-height:1;padding:10px 14px;border-radius:999px;
  border:1px solid var(--color-neutral-300);background:none;color:inherit;cursor:pointer;
  transition:background .15s,border-color .15s}
.sample-lang .lang-b:hover,.sample-lang .lang-b:focus-visible{border-color:var(--color-neutral-600)}
.sample-lang .lang-b[aria-pressed="true"]{background:var(--color-accent-100);
  border-color:var(--color-accent-400);font-weight:600}
.sample-meta{position:absolute;left:18px;right:18px;bottom:14px;
  display:flex;flex-direction:column;gap:4px}
.sample-meta .sample-eyebrow,.sample-meta .sample-title{position:static}
.sample-cover.stack{display:flex;flex-direction:column;align-items:center}
.sample-cover.stack .sample-play{margin:auto 0}
.sample-cover.stack .sample-meta{position:relative;left:auto;right:auto;bottom:auto;
  align-self:stretch;padding:0 18px 14px}