/* Video cards: homepage "See it in motion" and /investors. Uses the page's own colour tokens. */
.vrow{display:grid;grid-template-columns:repeat(4,minmax(0,260px));gap:20px;margin-top:44px}
@media(max-width:960px){
  /* Phones and small tablets: a swipeable row with the next card peeking in. The row bleeds
     to the screen edges inside the section's own padding, so the page itself never scrolls sideways. */
  .vrow{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(66%,260px);overflow-x:auto;
        scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
        margin:44px calc(-1 * var(--pad)) 0;padding:0 var(--pad) 10px;scroll-padding-inline:var(--pad);scrollbar-width:thin}
  .vrow .vc{scroll-snap-align:start}
}
.vsingle{max-width:320px;margin:44px auto 0}

/* position:relative keeps the visually-hidden description inside its card. Without it, the
   description escapes the swipe row's scroll area and widens the whole page on phones. */
.vc{position:relative;margin:0;min-width:0}
.vc-frame{position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#151715;border:1px solid var(--line)}
.vc-frame video,.vc-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:transparent}
.vc-frame video{background:#000}
.vc-poster{z-index:1}

/* The play control. Selectors are doubled up to win over the homepage's global button style. */
/* Lower part of the card (centre at 82% of the height), clear of the posters' main text. */
.vc .vc-play{position:absolute;z-index:2;left:50%;top:82%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:64px;height:64px;padding:0 18px;margin:0;
  border:1px solid rgba(238,236,230,.35);border-radius:999px;background:rgba(11,12,11,.62);color:#EEECE6;box-shadow:none;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  grid-column:auto;justify-self:auto;transition:background .2s,border-color .2s}
.vc .vc-play:hover{transform:translate(-50%,-50%);background:rgba(11,12,11,.8);border-color:#F2B24C;box-shadow:none}
.vc .vc-play:focus-visible{outline:3px solid #F2B24C;outline-offset:3px}
.vc .vc-play svg{width:22px;height:22px;flex:none;margin-left:3px}
.vc-play-text:empty{display:none}
.vc .vc-frame video:focus-visible{outline:3px solid #F2B24C;outline-offset:-3px}

.vc-dur{position:absolute;z-index:2;right:12px;bottom:12px;padding:3px 9px;border-radius:999px;background:rgba(11,12,11,.7);
  color:#EEECE6;font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.02em}

.vc.playing .vc-poster,.vc.playing .vc-play,.vc.playing .vc-dur{display:none}

.vc-title{margin-top:14px;font-size:17px;font-weight:500;letter-spacing:-.01em;color:var(--paper)}
.vc-line{margin-top:4px;font-size:14.5px;color:var(--paper2, rgba(238,236,230,.74))}
.vc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}