/* Platform Demos player: Resource Center (#platformdemo) and RTSM platform page.
   Markup lives in each page; behaviour in /assets/platform-demos.js. */
.kc-demos-head, .kc-demos-head .title-wrap { text-align: left; }
.kc-demos-head .section-description { display: none; }
/* Pages where the header sits right above the player (RTSM page) get the same 43px gap the
   Resource Center has between its separate header and player widgets. */
.kc-demos-head + .kc-demos { margin-top: 43px; }
@media (max-width: 767px) {
  .kc-demos-head .title-wrap .section-title { font-size: 30px; line-height: 38px; }
}
.kc-demos-head .title-wrap .kc-demos__eyebrow { margin: 0 0 4px; line-height: 1.2; font-family: Nunito, 'Helvetica Neue', Arial, sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #615B9C; }
.kc-demos { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; margin-top: 8px; font-family: Nunito, 'Helvetica Neue', Arial, sans-serif; color: #1F1B33; text-align: left; }
.kc-demos__main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.kc-demos__stage { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #1F1B33; box-shadow: 0 30px 60px -30px rgba(31,27,51,.55); }
.kc-demos__poster { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #1F1B33; cursor: pointer; display: block; }
.kc-demos__poster[hidden] { display: none; }
.kc-demos__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kc-demos__play { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; background: #615B9C; box-shadow: 0 10px 30px rgba(31,27,51,.45), 0 0 0 8px rgba(255,255,255,.18); display: grid; place-items: center; transition: transform .15s; }
.kc-demos__poster:hover .kc-demos__play, .kc-demos__poster:focus-visible .kc-demos__play { transform: scale(1.06); }
.kc-demos__poster:focus-visible { outline: 3px solid #615B9C; outline-offset: -3px; }
.kc-demos__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kc-demos__text { padding: 0 4px; }
.kc-demos .kc-demos__title { margin: 0; font-family: inherit; font-size: 26px; line-height: 1.2; font-weight: 800; letter-spacing: 0; word-spacing: normal; color: #1F1B33; text-transform: none; }
.kc-demos__desc { margin: 10px 0 0; font-size: 17px; line-height: 1.6; color: #4A4660; max-width: 44em; }
.kc-demos__list { position: relative; margin-top: -10px; background: #fff; border-radius: 18px; padding: 10px; box-shadow: 0 1px 2px rgba(31,27,51,.06), 0 18px 40px -26px rgba(31,27,51,.35); }
.kc-demos__count { position: absolute; left: 4px; bottom: 100%; margin: 0 0 12px; line-height: 1.4; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #6B6880; }
.kc-demos__list ol { list-style: none; margin: 0; padding: 0; }
.kc-demos__list li { margin: 0; padding: 0; }
.kc-demos__list li::before { content: none; }
.kc-demos__item { width: 100%; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; text-align: left; color: #1F1B33; font-family: inherit; transition: background .15s; }
.kc-demos__item:hover { background: rgba(97,91,156,.08); }
.kc-demos .kc-demos__item:hover, .kc-demos .kc-demos__item:focus, .kc-demos .kc-demos__item:active { color: #1F1B33; }
.kc-demos .kc-demos__item .kc-demos__name { color: #1F1B33; }
.kc-demos__item:focus-visible { outline: 3px solid #615B9C; outline-offset: 0; }
.kc-demos__item[aria-current="true"] { background: rgba(97,91,156,.10); }
.kc-demos__thumb { position: relative; display: block; width: 112px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; }
.kc-demos__item[aria-current="true"] .kc-demos__thumb { box-shadow: 0 0 0 3px #615B9C; }
.kc-demos__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kc-demos__dur { position: absolute; right: 4px; bottom: 4px; font-size: 11px; font-weight: 800; line-height: 1.4; color: #fff; background: rgba(31,27,51,.8); border-radius: 4px; padding: 1px 5px; }
.kc-demos__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kc-demos__cat { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #6B6880; }
.kc-demos__item[aria-current="true"] .kc-demos__cat { color: #615B9C; }
.kc-demos__name { font-size: 15px; line-height: 1.3; font-weight: 800; }
@media (max-width: 900px) {
  .kc-demos { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .kc-demos__stage { border-radius: 14px; }
  .kc-demos__play { width: 64px; height: 64px; margin: -32px 0 0 -32px; box-shadow: 0 8px 24px rgba(31,27,51,.45), 0 0 0 6px rgba(255,255,255,.18); }
  .kc-demos__play svg { width: 22px; height: 22px; }
  .kc-demos .kc-demos__title { font-size: 22px; }
  .kc-demos__desc { font-size: 16px; }
  .kc-demos__item { min-height: 72px; }
  .kc-demos__count { position: static; margin: 8px 10px 6px; }
  .kc-demos__list { margin-top: 0; }
}