.two-column-layout {
  display: flex;
  gap: 2.5rem; /* Space between columns */
  padding-top: 2.5rem; /* Add spacing at the top */
}

.left-column {
  flex: 1; /* Ensure equal size */
  padding-right: 3rem; /* Space before the divider */
  border-right: 1px solid #ccc; /* The dividing line */
}

.right-column {
  flex: 1; /* Ensure equal size */
  padding-left: 3rem; /* Space after the divider */
}

.right-column h3 {
  margin-bottom: 2rem; /* Increased spacing below the Sign up header */
}

.left-column h3 { /* Changed h2 to h3 to match HTML */
  margin-top: 0;
  margin-bottom: 2rem; /* Add identical vertical spacing below the left column header */
}

.left-column ul {
  list-style: disc;
  margin-left: 1.25rem;
  margin-top: 0; /* Ensure spacing is controlled by h2 margin-bottom */
  padding: 0;
}

.left-column li {
  margin-bottom: 0.625rem;
}

.flow input[type="email"],
.flow input[type="password"] {
  max-width: 18.75rem; /* Limit the width of input fields */
  width: 100%; /* Ensure it doesn't exceed container if container is smaller */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.flow > * {
  margin-bottom: 1rem; /* Add spacing between direct children of the form */
}

.flow > *:last-child {
  margin-bottom: 0; /* Remove bottom margin from the last child */
}