.brand-mark {
  background: var(--panel);
  border: 1px solid rgba(218, 240, 231, .22);
}

.brand-mark img {
  width: 33px;
  height: 33px;
  filter: none;
}

.footer-brand img {
  width: 120px;
  height: 58px;
  object-fit: contain;
  filter: none;
}

.app-preview {
  position: relative;
  margin: 0;
  z-index: 1;
}

.app-preview-glow {
  position: absolute;
  inset: 10% 4% 14%;
  background: var(--teal);
  filter: blur(70px);
  opacity: .1;
  z-index: -1;
}

.app-preview img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(143, 220, 207, .3);
  box-shadow: 18px 22px 0 rgba(0, 0, 0, .2), 0 0 70px rgba(32, 212, 210, .08);
  transform: rotate(2deg);
}

.app-preview figcaption {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  color: var(--muted);
  font: 10px 'DM Mono', monospace;
  letter-spacing: 1px;
}

.app-preview figcaption span:first-child {
  color: var(--teal);
}

@media (max-width: 800px) {
  .app-preview {
    margin-top: 63px;
  }

  .app-preview img {
    transform: none;
  }
}