.signup {
  align-self: flex-start;
  background: rgba(var(--rgb-white), 0.08);
  border-radius: 0.3em;
  display: flex;
  flex-direction: column;
  padding: 1.3em 1.6em;
}

.signup p br {
  display: none;
}

.signup form {
  --flow-space: 1em;
  background: var(--color-white);
  border-radius: 2em;
  display: flex;
  max-width: 20em;
  padding: 0.25em;
}

.signup form input[type=email] {
  appearance: none;
  border: none;
  color: rgba(var(--rgb-black), 0.75);
  flex: 1;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-small);
  line-height: 1;
  margin-right: 0.25em;
  padding: 0.15em 0 0.15em 1.2em;
  vertical-align: middle;
}

.signup form input[type=email]::placeholder {
  color: rgba(var(--rgb-black), 0.4);
}

.signup form input[type=email]::selection {
  background: rgba(var(--rgb-black), 0.05);
}

.signup form.error input {
  color: var(--color-error);
  text-decoration: underline;
  text-decoration-thickness: from-font;
}

.signup--inline {
  align-self: auto;
  background: none;
  border-radius: initial;
  padding: 0;
}

.signup--inline form {
  max-width: 24em;
}

@media(min-width: 64em) and (hover: hover) and (pointer: fine) {

  .signup {
    align-self: auto;
    margin-left: -1em;
    max-width: calc(100% + 2em);
    width: calc(100% + 2em);
  }

  .signup p br {
    display: inline;
  }

  .signup--inline {
    margin-left: 0;
    max-width: none;
    width: 100%;
  }

}