:root {
  --blue: #00356B;      /* logo background */
  --sky: #B9D0EE;
  --sans: Inter, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  position: relative;
  overflow-x: hidden;
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--blue);
  color: #FFFFFF;
  font-family: var(--sans);
}

#circuits {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
}

main {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

h1 { margin: 0; }

.logo {
  display: block;
  overflow: visible;
  width: 266px;
  max-width: 70vw;
  height: auto;
  transition: filter 0.4s ease;
}

.logo.on { filter: drop-shadow(0 0 8px rgba(185, 208, 238, 0.55)); }

.tagline {
  margin: 20px 0 40px;
  font-size: 0.95rem;
  color: var(--sky);
}

form {
  width: 100%;
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  transition: border-color 0.2s;
}

form:focus-within { border-color: #FFFFFF; }

input[type="email"] {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: #FFFFFF;
  font: inherit;
  font-size: 1rem;
}

input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.55); }
input[type="email"]:focus { outline: none; }

button {
  height: 48px;
  padding: 0 4px 0 16px;
  border: 0;
  background: transparent;
  color: #FFFFFF;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

button:hover { color: var(--sky); }
button:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
button[disabled] { opacity: 0.6; cursor: progress; }

.cta {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* After sign-up the box keeps its height and centers the confirmation
   where the form was. */
.cta.done { justify-content: center; }
.cta.done .status { margin: 0; }

.status {
  min-height: 1.4em;
  margin: 14px 0 0;
  font-size: 0.875rem;
  color: var(--sky);
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

[hidden] { display: none !important; }