:root { color-scheme: dark; background: #030201; }
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; background: #030201; }
main { width: 100%; }

.landing-frame,
.signup-frame {
  position: relative;
  margin: auto;
  line-height: 0;
}

.landing-frame { width: min(100%, 1536px); }
.signup-frame { width: min(100%, 1024px); }

.landing-art,
.signup-art {
  width: 100%;
  background-position: top center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  user-select: none;
  -webkit-touch-callout: none;
}

.landing-art {
  position: relative;
  aspect-ratio: 3 / 2;
  background-image: url(../images/landing-wide-v2.png);
}

.landing-art::after {
  content: '';
  position: absolute;
  z-index: 2;
  left: 2.25%;
  top: .3%;
  width: 21.8%;
  aspect-ratio: 8 / 3;
  background: #030201 url(../images/stogether-logo-realistic-v2.png) center / contain no-repeat;
}

.landing-frame::before {
  content: 'stogether.app';
  position: absolute;
  z-index: 3;
  left: 2.8%;
  top: 10.1%;
  color: #f0641f;
  font: 400 clamp(8px, .95vw, 15px) Arial, sans-serif;
  line-height: 1;
}

.signup-art { aspect-ratio: 2 / 3; }

.cta {
  position: absolute;
  display: block;
  cursor: pointer;
  transition: filter .18s ease, box-shadow .18s ease;
}

.cta:hover,
.cta:focus-visible {
  filter: brightness(1.12);
  box-shadow: 0 0 12px #ff7a284f, 0 0 28px #e85c2038;
  outline: 0;
}

.header { display: none; }

.primary {
  left: 3.78%;
  top: 46.38%;
  width: 19.15%;
  height: 3.62%;
  border-radius: 5px;
}

.final {
  left: 67.9%;
  top: 91.15%;
  width: 24.1%;
  height: 4.1%;
  border-radius: 5px;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}