:root{
  --ink:#111;
  --paper:#fff;
  --line:#cfcfcf;
}

*{box-sizing:border-box}

html,body{min-height:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
}

.header{
  height:84px;
  padding:0 30px;
  display:flex;
  align-items:center;
}

.signup-page{
  min-height:calc(100vh - 84px);
  display:grid;
  place-items:center;
  padding:32px 20px 116px;
}

.signup-card{
  width:min(440px,100%);
  text-align:center;
}

.confirmation-message{
  margin:0;
  font-weight:700;
  text-align:center;
}

.brand{
  font-weight:800;
  font-size:25px;
  line-height:.9;
  text-align:left;
}

form{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  width:100%;
}

label{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

input[type="email"]{
  min-width:0;
  height:46px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:0;
  background:#fff;
  color:var(--ink);
  font:inherit;
}

input[type="email"]:focus{
  outline:1px solid var(--ink);
  outline-offset:0;
  border-color:var(--ink);
}

button{
  height:46px;
  padding:0 20px;
  border:1px solid var(--ink);
  border-radius:0;
  background:var(--ink);
  color:#fff;
  font:inherit;
  cursor:pointer;
}

button:hover{background:#333}
button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.honeypot{
  position:absolute;
  left:-5000px;
}

@media(max-width:480px){
  .header{padding:0 16px}
  form{grid-template-columns:1fr}
  button{width:100%}
}