:root{
  --bg:#f6f7fb;
  --ink:#0a0a0a;
  --muted:#6b7280;
  --card:#ffffff;
  --primary:#2674ea;
  --primary-ink:#ffffff;
  --ring:#d9e3ff;
  --border:#e5e7eb;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  display:grid;
  place-items:center;
}

.wrapper{
  width:min(960px, 92vw);
  margin:8vh auto;
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:0 20px 60px rgba(20,25,40,.08);
  padding:clamp(20px, 5vw, 48px);
}

.logo{ width:240px; display:block; margin:0 auto 8px; height:auto; }

h1{
  font-size: clamp(32px, 5vw, 56px);
  line-height:1.05;
  text-align:center;
  margin:8px 0 12px;
  letter-spacing:-.02em;
}

p.lead{
  text-align:center;
  color:var(--muted);
  font-size:clamp(16px,2.5vw,20px);
  margin:0 0 18px 0;
}

.form{
  margin-top:16px;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap:12px;
}

.input, .btn{
  font:inherit;
  padding:16px 16px;
  border-radius:14px;
  border:1px solid var(--border);
  outline:none;
}

.input:focus{
  border-color:var(--ring);
  box-shadow:0 0 0 4px var(--ring);
}

.btn{
  background:var(--primary);
  color:var(--primary-ink);
  border:none;
  font-weight:700;
  cursor:pointer;
  transition:transform .04s ease;
}
.btn:active{ transform: translateY(1px); }

.sub{
  margin-top:12px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}

.note{
  margin-top:18px;
  text-align:center;
  color:var(--muted);
  font-size:14px;
}

.success{ text-align:center; color:#0b7a3b; margin-top:10px; font-weight:600; }
.error{ text-align:center; color:#b20000; margin-top:10px; font-weight:600; }

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



/* turn your 4-col form into 3 inputs + centered button row */
.form.form--centered {
    grid-template-columns: 1fr 1fr 1fr; /* three inputs on row 1 */
}

/* button row spans all columns and centers the button */
.form__btnrow {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    margin-top: 4px;
}

/* keep validation height stable */
.text-red {
    min-height: 18px;
    color: #b20000;
    font-size: 13px;
}

/* mobile: stack everything; make the button full width if you want */
@media (max-width:900px) {
    .form.form--centered {
        grid-template-columns: 1fr;
    }

    .form__btnrow {
        grid-column: 1 / -1;
    }
    /* optional: .form__btnrow .btn{ width:100%; } */
}