/* Figma 638:938 and 638:1109. Keep this local correction scoped to these sections. */
.solutions,
.footer {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.card-edge {
  inset: calc(1 * var(--u));
  width: calc(100% - 2 * var(--u));
  height: calc(100% - 2 * var(--u));
}

.solution-card {
  -webkit-backdrop-filter: blur(calc(40 * var(--u)));
  backdrop-filter: blur(calc(40 * var(--u)));
}

.solution-list li {
  border-color: rgb(0 0 0 / 6%);
}

.footer-wordmark {
  background: none;
  font-size: 0;
  letter-spacing: 0;
  line-height: 0;
}

.footer-wordmark img {
  width: 100%;
  height: 100%;
}

@media (min-width: 1024px) {
  /* A full scene remains one screen; the inset card scales uniformly within it. */
  .solutions {
    --scene-x: var(--u);
    --scene-y: var(--v);
  }

  .solution-card-frame {
    --card-unit: min(var(--scene-x), var(--scene-y));
    --u: var(--card-unit);
    --v: var(--card-unit);
    left: calc(80 * var(--scene-x));
    top: auto;
    bottom: calc(78.625 * var(--scene-y));
  }

  /* The footer is a 1920 × 742 composition, not an independently stretched screen. */
  .footer {
    --v: var(--u);
  }

  .footer-contact dd {
    line-height: calc(16 * var(--u));
  }

  .footer-contact > div:last-child dd {
    line-height: calc(20 * var(--u));
  }

  .footer-wordmark {
    left: calc(64.464 * var(--u));
    top: calc(404.906 * var(--u));
    width: calc(1759 * var(--u));
    height: calc(338 * var(--u));
  }
}

@media (max-width: 1023px) {
  .card-edge {
    inset: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
  }

  .solution-card {
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
  }

  .footer-wordmark {
    top: auto;
    left: 14px;
    bottom: 0;
    width: calc(100% - 28px);
    height: auto;
    aspect-ratio: 1759 / 338;
  }
}