/* layout-only; no colors or typography changed */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;display:flex;flex-direction:column}

main{display:flex;justify-content:center;padding:24px}
section{width:100%;max-width:560px}

form{display:grid;grid-template-columns:1fr;gap:12px}

label{margin-top:8px}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="submit"],
select{
  width:100%;
  min-height:42px;
  padding:8px 10px;
}

/* submit button full width, separated from fields */
input[type="submit"]{
  margin-top:12px;
  cursor:pointer;
}

/* small screens already single column; add a bit more air on large */
@media (min-width:900px){
  section{padding:8px 0}
}
header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
}

header img {
  max-height: 60px;
  margin-bottom: 12px;
}

#tri-colour {
  display: flex;
  width: 100%;
  height: 8px;
}

#tri-colour > div {
  flex: 1;
}

#blue   { background:#003366; }
#green  { background:#008000; }
#purple { background:#800080; }