/* Figma 463:1561. Scoped styles; shared fonts and the red token come from site.css. */
.desk-footer {
  --studio-red: var(--red, #f61515);
  --studio-dark: #151515;
  --desk-ease-out: cubic-bezier(.23, 1, .32, 1);
  color: #fff;
  margin-block-start: var(--section-gap, 220px);
  --desk-width: min(calc(100vw - 80px), 1360px);
  --desk-height: calc(var(--desk-width) * 575 / 1360);
  --desk-top: clamp(285px, 22.9167vw, 330px);
  --red-end: calc(var(--desk-top) + var(--desk-height) * 310 / 575);
  position: relative;
  isolation: isolate;
  min-block-size: calc(var(--desk-top) + var(--desk-height));
  overflow: clip;
  background: linear-gradient(to bottom, var(--studio-red) 0 var(--red-end), var(--studio-dark) var(--red-end) 100%);
}

.desk-footer__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
  padding: clamp(112px, 13.8889vw, 200px) 24px 0;
  text-align: center;
}

.desk-footer__heading {
  font-family: "General Sans", "Geist", sans-serif;
  margin: 0;
  max-inline-size: 22ch;
  font-size: clamp(30px, 2.7778vw, 40px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.desk-footer__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 19px;
  font-family: "Tanker", Impact, sans-serif;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -.01em;
}

/* The buttons that lived here are the site's one Button now — .btn / .btn--l / .btn--paper in
   site.css (2026-09-08). The separator between them stays in invite-band.css. */

.desk-stage {
  position: absolute;
  z-index: 1;
  inset-block-start: var(--desk-top);
  inset-inline-start: 50%;
  margin-inline-start: calc(var(--desk-width) / -2);
  inline-size: var(--desk-width);
  block-size: var(--desk-height);
  /* The hit area stays still; only its child moves. */
  touch-action: pan-y;
  user-select: none;
}

.desk-tilt {
  inline-size: 100%;
  block-size: 100%;
}

.desk-crop {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
  pointer-events: none;
}

.desk-image,
.desk-canvas {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: -23.89%;
  display: block;
  inline-size: 100%;
  block-size: 147.78%;
  max-inline-size: none;
  object-fit: fill;
  pointer-events: none;
  -webkit-user-drag: none;
}

@media (max-width: 600px) {
  .desk-footer {
    --desk-width: calc(100vw - 24px);
    --desk-top: 300px;
    min-block-size: calc(var(--desk-top) + var(--desk-height) + 28px);
  }
  .desk-footer__copy { padding-block-start: 96px; }
  .desk-footer__heading { max-inline-size: 330px; }
  .desk-footer__actions { gap: 14px; }
}

.desk-canvas { visibility: hidden; }
[data-desk-renderer="webgl"] .desk-canvas { visibility: visible; }
[data-desk-renderer="webgl"] .desk-image { visibility: hidden; }