/* "Everything Your Team Needs": every card ends in the same full-width panel,
   tinted to the card's colour, with the screenshot or video sitting in it */
.cc-card .cc-card-visual { padding: 1.6rem 1.6rem 0; }
.cc-card .cc-feature-mock { display: block; }
.r2-shot { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 16px 16px 0 0; overflow: hidden;
  display: grid; place-items: center; box-shadow: 0 -1px 0 rgba(20,22,28,0.04), 0 24px 40px -28px rgba(20,22,28,0.35);
  background: radial-gradient(70% 80% at 20% 0%, rgba(255,255,255,0.9) 0%, transparent 70%), linear-gradient(155deg, var(--shot-a) 0%, var(--shot-b) 100%); }
.cc-card.t-azure .r2-shot { --shot-a: #eaf0fd; --shot-b: #d7e3fb; }
.cc-card.t-violet .r2-shot { --shot-a: #f1edfe; --shot-b: #e1d9fd; }
.cc-card.t-teal .r2-shot { --shot-a: #e6f5f1; --shot-b: #cdeee5; }
.cc-card.t-amber .r2-shot { --shot-a: #faf1e1; --shot-b: #f5e2bf; }
.r2-shot video.is-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.r2-shot img, .r2-shot video.is-fit { width: 88%; height: 84%; object-fit: contain; object-position: center bottom; align-self: end; margin-top: 8%;
  filter: drop-shadow(0 18px 26px rgba(20,22,28,0.22)); }