/* signup form · live state · loading · success · error · v0.9 */

.signup .field,
.signup .qinput,
.signup .cta { transition: all .18s cubic-bezier(.16,.84,.44,1); }

/* qinput · inline with .field band · flex:1 takes remaining space · same 42px height */
#home .signup .qinput {
  flex: 1;
  width: auto;        /* override .field's 280px */
  height: 42px;
  padding: 0 16px;
  background: rgba(17,22,40,.9);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  outline: none;
  margin-top: 0;
  transition: border-color .15s ease;
}
#home .signup .qinput::placeholder { color: var(--dim); }
#home .signup .qinput:focus { border-color: rgba(91,140,240,.6); }
#home .signup .qinput:disabled { opacity: .6; }

.signup .cta.loading {
  cursor: progress;
  background-size: 200% 100%;
  background-image: linear-gradient(120deg, #5b7bff 25%, #7a5cff 50%, #5b7bff 75%);
  animation: ctaShimmer 1.4s linear infinite;
}
@keyframes ctaShimmer { from { background-position: 0% 50%; } to { background-position: -200% 50%; } }

.signup .cta.success {
  background: linear-gradient(120deg, #4cd888, #3eb87a);
  cursor: default;
  animation: ctaPop 320ms cubic-bezier(.16,.84,.44,1);
}
@keyframes ctaPop {
  0%   { transform: scale(.96); }
  60%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* status floats below the form band · doesn't disrupt the row layout
   z-index: .flow follows .signup in DOM and paints over the absolute status — lift above it
   pill bg: status lands on .flow's dark cards, needs its own surface to stay readable */
#home .signup { position: relative; }
.signup-status {
  position: absolute;
  top: 100%; left: 50%;
  margin-top: 10px;
  transform: translate(-50%, -3px);
  width: max-content;
  max-width: 920px;
  padding: 5px 14px;
  background: rgba(11,14,26,.92);
  border: 1px solid var(--line);
  border-radius: 999px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease, color .15s ease;
  pointer-events: none;
  z-index: 5;
}
.signup-status:not(:empty) { opacity: 1; transform: translateY(0); }
.signup-status.error { color: var(--orange); }
.signup-status.ok    { color: var(--green); }