:root {
  --bg: #0d1b2a;
  --panel: #1b263b;
  --text: #e0e1dd;
  --muted: #778da9;
  --accent: #4361ee;
  --accent-hover: #3a52d3;
  --error: #e63946;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: 480px; margin: 0 auto; padding: 32px 24px 64px; }

.screen { display: none; }
.screen--active { display: block; }

.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; }
.brand img { border-radius: 12px; }
.brand__text { font-size: 18px; font-weight: 700; letter-spacing: 1px; }

h1, h2, h3 { color: var(--text); margin: 0 0 16px; }
h1 { font-size: 28px; line-height: 1.2; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }

.features { list-style: none; padding: 0; margin: 0 0 32px; color: var(--muted); }
.features li { padding: 6px 0 6px 24px; position: relative; }
.features li::before {
  content: "✓"; color: var(--accent); position: absolute; left: 0; top: 6px;
  font-weight: 700;
}

form { display: flex; flex-direction: column; gap: 12px; }

label { font-size: 14px; color: var(--muted); }

input[type="email"] {
  background: var(--panel); color: var(--text);
  border: 1px solid #2c3e50; border-radius: 8px;
  padding: 14px 16px; font-size: 16px; outline: none;
}
input[type="email"]:focus { border-color: var(--accent); }
input[type="email"].invalid { border-color: var(--error); }

#honeypot { position: absolute; left: -10000px; height: 0; width: 0; opacity: 0; }

button[type="submit"], .cta {
  background: var(--accent); color: #fff; border: 0;
  border-radius: 8px; padding: 16px;
  font-size: 16px; font-weight: 600; cursor: pointer;
  transition: background .15s ease;
  display: inline-block; text-decoration: none; text-align: center;
}
button[type="submit"]:hover, .cta:hover { background: var(--accent-hover); }
button[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; }

.error-msg { color: var(--error); font-size: 14px; }

.legal, .hint { font-size: 12px; color: var(--muted); margin-top: 24px; }
.legal a, .hint a { color: var(--muted); text-decoration: underline; }
.link-button { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; padding: 0; font: inherit; }

/* Screen 2 */
.check-icon { font-size: 48px; text-align: center; margin: 16px 0 24px; color: var(--accent); }
#masked-email { color: var(--accent); }

.steps { padding-left: 20px; color: var(--muted); }
.steps li { margin: 8px 0; }

.resend { margin: 24px 0; display: flex; align-items: center; gap: 12px; }
.resend button {
  background: transparent; color: var(--text);
  border: 1px solid #2c3e50; border-radius: 8px;
  padding: 10px 16px; cursor: pointer; font-size: 14px;
}
.resend button:disabled { opacity: 0.5; cursor: not-allowed; }
.resend span { color: var(--muted); font-size: 14px; }

#activated-banner {
  margin-top: 32px; padding: 24px; border-radius: 12px;
  background: #14532d; color: #d1fae5; text-align: center;
}
#activated-banner h3 { color: #d1fae5; }
#activated-banner .cta { background: #229ed9; margin-top: 16px; }

@media (max-width: 480px) {
  .container { padding: 24px 16px; }
  h1 { font-size: 24px; }
}