/* ── SIGN UP SECTION ── */
.sign-up {
  width: 100%;
  background-color: var(--al-white);
}

.sign-up-header {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: var(--max-container);
  margin: 80px auto 64px;
}

.sign-up-header h1 {
  font-family: var(--font-heading-bold);
  /* font-size: 20.5vw; */
  font-size: 25vw;
  line-height: 100%;
  color: var(--al-red);
  text-transform: none;
}

.sign-up-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap:2px;
  margin-bottom: 64px;
  width: 100%;
}

@media (min-width: 1440px) {
  .sign-up-header h1 {
    font-size: 360px;
  }
  .sign-up-content {
    gap:0px;
  }
}

.sign-up-subheader {
  flex: 1;
}

.sign-up-subheader h2,
.sign-up-subheader p {
  color: var(--al-black);
  max-width: 630px;
  font-family: var(--font-heading-black);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: 900;
}

.sign-up-form {
  display: flex;
  align-items: flex-end;
  flex: 1.056;
}

.input-group {
  flex: 1;
  position: relative;
  z-index: 0;
}

.sign-up-form input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--al-red);
  padding: 11px 0 11px 12px;
  font-family: var(--font-regular);
  font-size: var(--font-size-medium);
  line-height: var(--line-height-medium);
  color: var(--al-black);
  background: transparent;
  outline: none;
  border-radius: unset;
}

.sign-up-form input::placeholder {
  color: var(--al-black);
}

.sign-up-form label {
  font-family: var(--font-regular);
  font-size: var(--font-size-main);
  line-height: var(--line-height-main);
  color: var(--al-black);
  position: absolute;
  top: 11px;
  left: 12px;
  transition: all .3s ease-in-out;
  z-index: -1;
  background: var(--al-white);
}

.sign-up-form input:focus~label,
.sign-up-form input:not(:placeholder-shown)~label {
  top: -11px;
  left: 0px;
  font-size: var(--font-size-tiny);
}
.sign-up-form .btn-brand{
  height: 46px;
  padding: 16px 24px;
}

/* ── MOBILE RESPONSIVE ── */
@media (max-width: 767.98px) {

  .sign-up {
    margin: 64px 0;
  }

  .sign-up-header {
    width: var(--extra-container-width);
    margin: 0 auto 32px;
  }

  .sign-up-header h1 {
    font-size: 24vw; 
  }
  
  .sign-up-form input{
  padding: 12px 0 12px 8px;
  }

  .sign-up-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
  }

  .sign-up-subheader h2,
  .sign-up-subheader p,
  .sign-up-subheader.h2 * {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
  }
  .sign-up-subheader {
      font-family: var(--font-heading-bold);
      font-size: var(--font-size-h3);
      line-height: var(--line-height-h3);
      margin: 0;
  }


  .sign-up-form {
    flex-direction: column;
    width: 100%;
    align-items: flex-start;
    gap: 24px;
  }

  .input-group {
    width: 100%;
  }

  .btn-red {
    width: 100%;
    padding: 15.5px 24px;
  }

  .sign-up-form .btn-brand {
    width: 100%;
  }
  .sign-up-form .btn-brand{
  padding: 16.5px 129.5px;
}

}