@font-face {
  font-family: Nunito;
  src: url("assets/nunito-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  color-scheme: light;
  background: #ebeef1;
  color: #364857;
  font-family: Nunito, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

body { margin: 0; }

.landing {
  position: relative;
  min-height: 600px;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.intro {
  position: absolute;
  top: calc(50% - 91.07px);
  left: 50%;
  width: 486.379px;
  max-width: calc(100% - 32px);
  transform: translateX(-50%);
  text-align: center;
}

.paperclips { display: block; margin-inline: auto; }

h1 {
  margin: 14px 0 0;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.26px;
  transform: rotate(-2.65deg);
}

.line { display: block; white-space: nowrap; }

.highlight {
  position: relative;
  display: inline-block;
  isolation: isolate;
}

.highlight img {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%) rotate(0.36deg);
  pointer-events: none;
}

.line + .line .highlight img { transform: translateX(-50%) rotate(-0.28deg); }

.app {
  position: absolute;
  display: block;
  object-fit: contain;
  user-select: none;
  transform: translate(-50%, -50%) rotate(calc(var(--tilt) + var(--spin, 0deg)));
}

.app-red { left: 16.365%; top: 26.237%; --tilt: 15deg; }
.app-package { left: 79.693%; top: 36.97%; --tilt: -21.37deg; }
.app-blue { left: 69.492%; top: 79.559%; --tilt: 6deg; }
.app-grid { left: 27.671%; top: 74.833%; --tilt: -6.44deg; }

footer {
  position: absolute;
  top: max(570px, calc(100svh - 30px));
  left: 21px;
  right: 21px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #a1aab1;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

small { font: inherit; }

footer a { color: inherit; text-decoration: none; }
footer a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid #364857; outline-offset: 4px; border-radius: 2px; }

.legal-header { padding-top: 31.65px; }
.legal-header a { display: block; width: fit-content; margin-inline: auto; transform: translateX(-0.21px); }
.legal-header img, .legal-content address img { display: block; }

.legal-content {
  width: min(500px, calc(100% - 40px));
  margin: 55.65px auto 48px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 16px;
  font-weight: 400;
  line-height: 19px;
  letter-spacing: -0.16px;
}

.legal-content h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 500;
  line-height: 31px;
  letter-spacing: -0.26px;
  text-align: center;
  transform: none;
}

.legal-content p, .legal-content address { margin: 0; }

.privacy-copy h2 {
  margin: 0 0 19px;
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  letter-spacing: inherit;
}

.privacy-copy section + section { margin-top: 19px; }
.privacy-copy a { color: inherit; text-underline-offset: 2px; }

@media (max-width: 600px) {
  .landing { min-height: 540px; }
  .intro { top: calc(50% - 80px); }
  h1 { font-size: 20px; letter-spacing: -0.01em; }
  .highlight img { bottom: 0.18em; scale: 0.76; transform-origin: left bottom; }
  .app { width: 78px; height: 78px; }
  .app-red { left: 19%; top: 20%; }
  .app-package { left: 80%; top: 27%; }
  .app-grid { left: 22%; top: 72%; }
  .app-blue { left: 77%; top: 79%; }
  footer { top: max(506px, calc(100svh - 34px)); left: 16px; right: 16px; gap: 5px 10px; flex-wrap: wrap; font-size: 10px; }
}

@media (max-width: 374px) {
  h1 { font-size: 17px; }
  .highlight img { scale: 0.65; }
}