:root{
  /* Background and accents adjusted per request */
  --bg: #ffffff; /* solid white background */
  --card: #f5f3ff; /* very light purple/ivory for cards */
  --muted: #6b7280; /* gray for secondary text */
  --accent: #7A45E8; /* purple accent (access color) */
  --white: #0b1220; /* dark text on light bg */
  /* total time the submit message should be visible (CSS & JS will read this) */
  --msg-total: 5s;
}
*{box-sizing:border-box}
.container{ max-width:980px; margin:48px auto; padding:24px }

body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background:var(--bg); /* solid background */
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  text-align: center;
}
.container{
  max-width:980px;
  margin:48px auto;
  padding:24px;
}
.container{
  max-width:980px;
  margin:48px auto;
  padding:24px;
}
.hero{ text-align:center; margin-bottom:28px }
.hero h1{ font-size:3.0rem; margin:0 0 10px; color:var(--accent) }
.lead{ color:var(--muted); font-size:1.05rem; margin:0 auto; max-width:500px; color:var(--muted) }

.features{ display:flex; gap:18px; margin:28px 0; text-align: center;}
.feature{ background:var(--card); padding:18px; border-radius:10px; flex:1; box-shadow:0 4px 14px rgba(0,0,0,0.06) }
.feature h2{ margin:0 0 8px; font-size:1.05rem; color:var(--accent) }
.feature p{ margin:0; color:var(--muted); font-size:0.95rem }

.signup{ margin-top:28px; background:transparent; padding:18px; border-radius:10px }
/* Form layout: three columns (email | select | submit) with labels above each field */
/* Layout: make the middle column (select) a bit smaller */
form{ display:grid; gap:12px; grid-template-columns: 1fr 240px auto; align-items:end }
form .field{ display:flex; flex-direction:column }
form label{ display:block; font-size:0.9rem; color:var(--muted); margin-bottom:6px; text-align: left;}
/* Inputs and select share same height */
input[type=email], select{ width:100%; padding:12px 14px; height:44px; border-radius:8px; border:1px solid rgba(15,17,32,0.06); background:#fff; color:#0b1220; background-clip:padding-box; font-size:0.95rem }
/* no-op placeholder removed */
/* Styled select - remove native appearance and add custom arrow */
select{ -webkit-appearance:none; -moz-appearance:none; appearance:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath fill='%237A45E8' d='M7 10L0 0h14z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:12px; padding-right:38px }
/* Slightly larger submit button */
button{ background:var(--accent); color:#fff; border:none; padding:12px 20px; border-radius:8px; cursor:pointer; font-weight:700; font-size:0.98rem; position:relative }
button:disabled{ opacity:0.7; cursor:not-allowed }

/* Spinner animation */
.spinner{
  display:inline-block;
  width:16px;
  height:16px;
  border:2px solid rgba(255,255,255,0.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin 0.8s linear infinite;
}

@keyframes spin{
  to{ transform:rotate(360deg) }
}

.signup-header{ margin-top:12px; margin-bottom: 5px; color:var(--accent); font-size:2rem; font-weight: 700}
.signup-note{ margin-top:5px; color:var(--muted) }
.coming-soon{ display:block; margin:22px 0 12px; font-size:1.35rem; color:var(--accent); text-align:center; font-weight:700 }

.site-footer{ text-align:center; margin:28px 0 40px; color:var(--muted) }

@media (max-width:720px){
  .features{ flex-direction:column }
  form{ grid-template-columns:1fr; }
  button{ width:100% }
}

/* Submit message animation */
.submit-message{
  display:none;
  margin-top:18px;
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
  padding:12px 16px;
  border-radius:10px;
  font-weight:600;
  color:#fff;
  transform:translateY(6px);
  opacity:0;
}
.submit-message.show{
  display:block;
  /* slideFade plays immediately, pulseOut begins after slideFade and lasts until --msg-total */
  --msg-slide: 0.6s;
  --msg-delay: var(--msg-slide);
  --msg-duration: calc(var(--msg-total) - var(--msg-delay));
  animation: slideFade var(--msg-slide) ease-out, pulseOut var(--msg-duration) ease-in var(--msg-delay) forwards;
}
.submit-message.success{ background: linear-gradient(90deg,#34D399,#10B981); }
.submit-message.error{ background: linear-gradient(90deg,#F87171,#EF4444); }

@keyframes slideFade{
  from{ transform:translateY(10px); opacity:0 }
  to{ transform:translateY(0); opacity:1 }
}
@keyframes pulseOut{
  0%{ box-shadow:0 8px 30px rgba(0,0,0,0.12); opacity:1 }
  90%{ box-shadow:0 8px 30px rgba(0,0,0,0.12); opacity:1 }
  100%{ box-shadow:0 0 0 rgba(0,0,0,0); opacity:0 }
}