:root {
  --canvas: #ffffff;
  --ink: #000000;
  --orange: #ff5500;
  --shadow-orange: rgba(255, 85, 0, 0.16);
  --shadow-ink: rgba(0, 0, 0, 0.10);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--canvas);
  color: var(--ink);
  font-family: "DM Sans", Arial, sans-serif;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--canvas);
}

.landing {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--canvas);
}

.top-blank {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: var(--canvas);
  pointer-events: none;
}

.brand-shape {
  position: absolute;
  display: block;
  object-fit: contain;
  object-position: center;
  user-select: none;
  pointer-events: none;
}

.hero-copy {
  position: absolute;
  z-index: 1;
}

h1 {
  margin: 0;
  color: var(--ink);
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 600;
}

.hero-copy p {
  margin: 0;
  color: var(--ink);
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 400;
}

.waitlist-form {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--canvas);
  box-shadow: 0 0 0 1px var(--shadow-ink), 0 24px 70px var(--shadow-orange);
}

.waitlist-form input {
  min-width: 0;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 400;
}

.waitlist-form input::placeholder {
  color: rgba(0, 0, 0, 0.36);
  opacity: 1;
}

.waitlist-form button {
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: var(--orange);
  color: var(--canvas);
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.form-message {
  display: none;
  margin: 0;
  color: var(--ink);
  font-family: "DM Sans", Arial, sans-serif;
  font-weight: 500;
}

.form-message.is-visible {
  display: block;
}

.form-message.is-error {
  color: var(--orange);
}

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

@media (min-width: 1000px) {
  .landing {
    min-height: 900px;
  }

  .top-blank {
    height: 112px;
  }

  .brand-shape {
    left: -8.6805556vw;
    top: -49.5px;
    width: 58.6805556vw;
    max-width: 845px;
    height: 999px;
  }

  .hero-copy {
    left: 54.7916667vw;
    top: 190px;
    width: 43.4027778vw;
    max-width: 625px;
  }

  h1 {
    width: 625px;
    max-width: 100%;
    font-size: clamp(86px, 7.7777778vw, 112px);
    line-height: 1.023;
    letter-spacing: -0.075em;
  }

  .hero-copy > p:not(.form-message) {
    width: 535px;
    max-width: 100%;
    margin-top: 46px;
    font-size: 24px;
    line-height: 1.35;
    letter-spacing: -0.84px;
  }

  .waitlist-form {
    width: 560px;
    height: 74px;
    margin-top: 41px;
    border-radius: 999px;
    padding: 8px 8px 8px 34px;
    gap: 16px;
  }

  .waitlist-form input {
    flex: 1 1 auto;
    height: 58px;
    font-size: 18px;
    line-height: 1;
    letter-spacing: -0.36px;
  }

  .waitlist-form button {
    flex: 0 0 157px;
    width: 157px;
    height: 58px;
    font-size: 18px;
    line-height: 1;
    letter-spacing: -0.36px;
  }

  .form-message {
    width: 492px;
    margin-top: 16px;
    margin-left: 34px;
    font-size: 18px;
    line-height: 1.35;
    letter-spacing: -0.36px;
  }
}

@media (min-width: 481px) and (max-width: 999px) {
  .landing {
    min-height: 1035px;
  }

  .top-blank {
    height: 86px;
  }

  .brand-shape {
    left: 0;
    top: 53px;
    width: 100vw;
    height: 49.1358025vw;
    max-height: 398px;
  }

  .hero-copy {
    left: 12.0987654vw;
    top: 526px;
    width: 75.8024691vw;
  }

  h1 {
    width: 614px;
    max-width: 100%;
    font-size: clamp(62px, 10.617284vw, 86px);
    line-height: 0.93;
    letter-spacing: -0.0744em;
  }

  .hero-copy > p:not(.form-message) {
    width: 522px;
    max-width: 100%;
    margin-top: 32px;
    font-size: clamp(17px, 2.7160494vw, 22px);
    line-height: 1.34;
    letter-spacing: -0.72px;
  }

  .waitlist-form {
    width: min(560px, 69.1358025vw);
    height: 74px;
    margin-top: 42px;
    border-radius: 999px;
    padding: 8px 8px 8px 34px;
    gap: 16px;
  }

  .waitlist-form input {
    flex: 1 1 auto;
    height: 58px;
    font-size: 18px;
    line-height: 1;
    letter-spacing: -0.36px;
  }

  .waitlist-form button {
    flex: 0 0 157px;
    width: 157px;
    height: 58px;
    font-size: 18px;
    line-height: 1;
    letter-spacing: -0.36px;
  }

  .form-message {
    width: min(492px, calc(69.1358025vw - 68px));
    margin-top: 16px;
    margin-left: 34px;
    font-size: 18px;
    line-height: 1.35;
    letter-spacing: -0.36px;
  }
}

@media (max-width: 480px) {
  .landing {
    min-height: 900px;
  }

  .top-blank {
    height: 44px;
  }

  .brand-shape {
    left: 1px;
    top: 54px;
    width: calc(100vw - 2px);
    height: 77.1794872vw;
    max-height: 301px;
  }

  .hero-copy {
    left: 7.1794872vw;
    top: 426px;
    width: 86.4102564vw;
  }

  h1 {
    width: 337px;
    max-width: 100%;
    font-size: clamp(48px, 15.8974359vw, 62px);
    line-height: 0.94;
    letter-spacing: -0.0758em;
  }

  .hero-copy > p:not(.form-message) {
    width: 320px;
    max-width: 100%;
    margin-top: 28px;
    font-size: 17px;
    line-height: 1.42;
    letter-spacing: -0.42px;
  }

  .waitlist-form {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 85.6410256vw;
    max-width: 334px;
    height: 126px;
    margin-top: 32px;
    border-radius: 31px;
    padding: 0 8px 8px;
    box-shadow: 0 0 0 1px var(--shadow-ink), 0 20px 58px var(--shadow-orange);
  }

  .waitlist-form input {
    width: 100%;
    height: 58px;
    padding: 0 16px;
    font-size: 17px;
    line-height: 1;
    letter-spacing: -0.32px;
  }

  .waitlist-form button {
    width: 100%;
    height: 58px;
    font-size: 18px;
    line-height: 1;
    letter-spacing: -0.36px;
  }

  .form-message {
    width: calc(85.6410256vw - 48px);
    max-width: 286px;
    margin-top: 16px;
    margin-left: 24px;
    font-size: 17px;
    line-height: 1.35;
    letter-spacing: -0.32px;
  }
}