/* Static pages: fonts and the page lockup; the frame, card and type come from /shared/keylink.css (WCC style). */
@font-face { font-family: Selawik; font-weight: 400; src: url("/shared/selawik-regular.woff2") format("woff2"); }
@font-face { font-family: Selawik; font-weight: 600; src: url("/shared/selawik-semibold.woff2") format("woff2"); }
body { margin: 0; background: #0a1929; }
.kl-page-lockup { display: block; height: 40px; width: auto; margin: 0 0 18px; }
.kl-page .kl-card > *:last-child { margin-bottom: 0; }
.kl-page #bad p, .kl-page #reason { color: #ffd7d2; }

/* Invite page: setup video (loaded only on click; signed URLs from the server) */
.kl-video { margin: 18px 0 20px; }
.kl-video-btn { display: inline-flex; align-items: center; gap: 10px; font: inherit; font-weight: 600; color: inherit;
  background: rgba(124, 200, 250, 0.12); border: 1px solid rgba(124, 200, 250, 0.45); border-radius: 999px;
  padding: 8px 18px 8px 10px; cursor: pointer; }
.kl-video-btn:hover, .kl-video-btn:focus-visible { background: rgba(124, 200, 250, 0.22); }
.kl-video-btn[disabled] { opacity: 0.6; cursor: progress; }
.kl-video-icon { width: 26px; height: 26px; border-radius: 50%; background: #7CC8FA; position: relative; flex: none; }
.kl-video-icon::after { content: ""; position: absolute; left: 10px; top: 7px; border-style: solid; border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent #0B1626; }
.kl-video-box { margin-top: 14px; }
.kl-video-box video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; background: #0B1626; }