/* TaskiLi Waitlist Light Theme and Modal Styles */
:root {
  /* Map to main site variables */
  --taskili-green: var(--primary-color);
  --taskili-dark: var(--dark-bg);
  --taskili-text: var(--text-color);
  --taskili-muted: var(--text-color);
  --taskili-border: #222;
  --bg: var(--dark-bg);
}

body.waitlist-page {
  background: var(--bg);
  color: var(--taskili-text);
}

/* Header tweaks on light bg */
body.waitlist-page header {
  background: rgba(10, 10, 10, 0.8);
  border-bottom: 1px solid var(--taskili-border);
}
body.waitlist-page nav ul li a,
body.waitlist-page .site-nav a {
  color: var(--secondary-color);
}

/* Hero */
.waitlist-hero {
  padding: 8rem 1.5rem 4rem 1.5rem;
  text-align: center;
}
.waitlist-hero h1 {
  font-size: 3rem;
  line-height: 1.15;
  margin: 0 0 0.75rem 0;
  color: var(--secondary-color);
}
.waitlist-hero .subheadline {
  font-size: 1.125rem;
  color: var(--taskili-text);
  max-width: 840px;
  margin: 0.25rem auto 1.5rem auto;
}
.waitlist-hero .stats {
  color: var(--secondary-color);
  background: var(--card-bg);
  border: 1px solid var(--taskili-border);
  display: inline-block;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  font-size: 0.95rem;
}

/* Buttons */
.btn-taskili {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.3rem;
  border-radius: 999px;
  font-weight: 700;
  border: 2px solid var(--primary-color);
  background: var(--primary-color);
  color: var(--dark-bg);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.2s ease, background 0.2s ease;
  text-decoration: none;
}
.btn-taskili:hover { box-shadow: 0 6px 18px rgba(0, 191, 255, 0.28); transform: translateY(-1px); background: transparent; color: var(--primary-color); }
.btn-taskili:active { transform: translateY(0); }

/* Benefits */
.why-taskili {
  padding: 3rem 1.5rem;
  background: transparent;
}
.benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
}
.benefit {
  background: var(--card-bg);
  border: 1px solid var(--taskili-border);
  border-radius: 12px;
  padding: 1.25rem;
}
.benefit h4 { margin: 0.5rem 0; }
.benefit p { margin: 0.25rem 0 0 0; color: var(--taskili-text); }

/* Video Teaser */
.demo {
  padding: 3rem 1.5rem;
  text-align: center;
}
.demo .teaser {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--taskili-border);
}
.demo .teaser iframe, .demo .teaser video { width: 100%; height: 100%; border: 0; display: block; }
.demo .caption { color: var(--taskili-text); margin-top: 0.75rem; }

/* Social Proof */
.social-proof { padding: 2.5rem 1.5rem; text-align: center; }
.social-proof .placeholder { color: var(--taskili-text); }

/* Footer */
.waitlist-footer {
  padding: 2rem 1.5rem;
  border-top: 1px solid var(--taskili-border);
  color: var(--taskili-text);
}
.waitlist-footer .links { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.waitlist-footer .links a { color: var(--secondary-color); text-decoration: underline; }
.waitlist-footer .brand { margin-top: 0.5rem; font-size: 0.95rem; color: var(--taskili-text); }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: none; align-items: center; justify-content: center; z-index: 2000; }
.modal-overlay.open { display: flex; }
.modal {
  width: min(92vw, 520px);
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--taskili-border);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.modal header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--taskili-border); }
.modal header h3 { margin: 0; font-size: 1.2rem; }
.modal header button { background: none; border: 0; font-size: 1.25rem; cursor: pointer; color: var(--secondary-color); }
.modal .content { padding: 1.25rem; }
.form-grid { display: grid; gap: 0.9rem; }
.form-grid input, .form-grid select { width: 78%; margin: 0 auto; padding: 0.85rem 0.9rem; background: var(--card-bg); border: 1px solid #333; color: var(--taskili-text); border-radius: 10px; font-size: 1rem; }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.5rem; max-width: 78%; margin-left: auto; margin-right: auto; }
.form-foot .urgency { color: #f59e0b; background: #1f2937; border: 1px solid #374151; padding: 0.4rem 0.6rem; border-radius: 999px; font-size: 0.9rem; }

/* Optional: on very small screens, let inputs expand for usability */
@media (max-width: 380px) {
  .form-grid input, .form-grid select { width: 100%; }
  .form-foot { max-width: 100%; }
}

/* Success */
.success-note { display: none; margin-top: 0.75rem; color: #a7f3d0; background: #064e3b; border: 1px solid #10b98155; padding: 0.6rem 0.75rem; border-radius: 10px; font-weight: 600; max-width: 78%; margin-left: auto; margin-right: auto; }
.success-note.show { display: block; }

/* Social icons */
.socials { display: flex; gap: 0.75rem; justify-content: center; margin-top: 0.25rem; }
.socials a { color: var(--secondary-color); font-size: 1.1rem; }