/* 1. Typography – Space Grotesk */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap");

body{
  font-family:"Space Grotesk",Arial,Helvetica,sans-serif;
  margin:0;
  /* keep host’s dark bg; only add some top spacing */
  background:transparent;
  color:#e4e7ec;
  padding:2rem 1rem;
  display:flex;
  justify-content:center;
}

/* 2. Card-style container */
.container{
  max-width:540px;
  width:100%;
  background:#E6E6E6;            /* bright card on dark page */
  color:#111;                    /* readable text inside card */
  padding:2rem 2.2rem;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}

/* 3. Headings */
h1{
  font-size:1.75rem;
  font-weight:600;
  margin:0 0 1.2rem;
  text-align:center;
}

h2{font-size:1.25rem;margin-top:2rem}

/* 4. Form layout – stacked fields */
form label{
  display:block;
  margin-bottom:1.25rem;
  font-size:.9rem;
  font-weight:500;
}

form input,
form select{
  width:100%;
  padding:.6rem .7rem;
  margin-top:.35rem;
  border:1px solid #c4c8d0;
  border-radius:6px;
  font-family:inherit;
  font-size:.95rem;
}

button{
  display:block;
  width:100%;
  background:#BB4D1E;
  color:#fff;
  border:none;
  padding:.8rem 1.2rem;
  border-radius:6px;
  cursor:pointer;
  font-size:1rem;
  font-weight:600;
  margin-top:.25rem;
  transition:background .2s ease;
}
button:hover{background:#005fa3}

/* 5. Results section */
#results{
  margin-top:2rem;
  line-height:1.45;
}
.hidden{display:none}