/* ---------- Base Style Adjustments ---------- */

html,
body {
  height: 100%;
}

html::before {
  filter: none;
}

.card-container {
  flex-direction: column;
}

/* ---------- Overall Page Layout ---------- */

.landing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  min-height: 100svh;
}

/* ---------- Registration/Login Hint Text Style ---------- */
.page-hint {
  margin: 8px 0 0;
  font-size: 0.95rem;
  color: var(--muted);
  text-align: center;
}

/* ---------- Error Text Style ---------- */

.error {
  display: flex;
  justify-content: center;
  gap: 8px;
}

/* ---------- Phone Breakpoint (≤600px) ---------- */

@media (max-width: 600px) {
  .landing {
    grid-template-columns: 1fr;
  }

  .landing > div {
    display: none;
  }

  .landing .card {
    min-width: unset;
    width: 100%;
  }

  input {
    padding: 14px 14px;
  }

  .btn-sub {
    padding: 14px 16px;
  }
}