:root {
  --primary: oklch(55% 0.17 170);
  --primary-hover: oklch(49% 0.17 170);
  --primary-content: oklch(98% 0.01 170);
  --secondary: oklch(75% 0.18 85);
  --base-100: oklch(100% 0 0);
  --base-200: oklch(97% 0.003 80);
  --base-300: oklch(93% 0.005 80);
  --base-content: oklch(20% 0.01 285);
  --radius-field: 0.5rem;
  --radius-box: 0.75rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  color: var(--base-content);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60rem 60rem at 15% -10%, color-mix(in oklab, var(--primary) 12%, transparent), transparent 60%),
    radial-gradient(50rem 50rem at 110% 110%, color-mix(in oklab, var(--secondary) 16%, transparent), transparent 55%),
    var(--base-100);
}

.card {
  width: 100%;
  max-width: 34rem;
  text-align: center;
  z-index: 1;
}

.logo { height: 3.5rem; width: auto; margin: 0 auto 2.5rem; display: block; }

.eyebrow {
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primary); margin-bottom: 1rem;
}

h1 {
  font-size: clamp(2rem, 6vw, 3.25rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -0.02em;
}
h1 .accent { color: var(--primary); }

.subtitle {
  margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.6;
  color: color-mix(in oklab, var(--base-content) 70%, transparent);
}

form { margin-top: 2.5rem; }

.pill {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--base-100); border: 1px solid var(--base-300);
  border-radius: 9999px; padding: 0.4rem 0.4rem 0.4rem 1.25rem;
  box-shadow: 0 10px 25px -10px color-mix(in oklab, var(--base-content) 25%, transparent);
  max-width: 30rem; margin: 0 auto;
}
.pill input[type="email"] {
  flex: 1; border: 0; outline: none; background: transparent;
  font-size: 1rem; color: var(--base-content); min-width: 0;
}
.pill input::placeholder { color: color-mix(in oklab, var(--base-content) 45%, transparent); }

button {
  border: 0; cursor: pointer; font-family: inherit; font-weight: 600; font-size: 1rem;
  color: var(--primary-content); background: var(--primary);
  border-radius: 9999px; padding: 0.75rem 1.75rem; white-space: nowrap;
  transition: background 0.15s ease;
}
button:hover { background: var(--primary-hover); }
button:disabled { opacity: 0.6; cursor: default; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.message { margin-top: 1rem; font-size: 0.95rem; min-height: 1.25rem; }
.message.success { color: var(--primary); font-weight: 500; }
.message.error { color: oklch(60% 0.22 25); }

@media (max-width: 480px) {
  .pill { flex-direction: column; border-radius: var(--radius-box); padding: 1rem; gap: 0.75rem; }
  .pill input[type="email"] { width: 100%; text-align: center; }
  button { width: 100%; }
}