/* ============================================================
   coming-soon.css — short "launching soon" page
   Reuses tokens.css + base.css (shared components, icons, type).
   ============================================================ */

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

.cs-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ---- Header ---- */
.cs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
  padding: 5px 48px;
}
.cs-header .logo {
  font-weight: var(--fw-bold);
  font-size: var(--fs-14);
  line-height: var(--lh-16-8);
  letter-spacing: var(--ls-042);
  color: var(--fg);
}
.header-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}
.icon-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-64);
  background: var(--surface-2);
  color: var(--fg);
}
.icon-btn .icon { width: 16px; height: 16px; }
.icon-btn .ui-icon { color: var(--fg); }
.theme-toggle .sun { display: none; }
.theme-toggle .moon { display: inline; }
[data-theme="dark"] .theme-toggle .sun { display: inline; }
[data-theme="dark"] .theme-toggle .moon { display: none; }

/* ---- Hero (centered) ---- */
.cs-main {
  flex: 1 0 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 48px;
}
.cs-hero {
  width: 100%;
  max-width: 920px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ---- Entrance: blur-in reveal (staggered) ---- */
@keyframes blur-in {
  from { opacity: 0; filter: blur(14px); transform: translateY(14px); }
  to   { opacity: 1; filter: blur(0);    transform: translateY(0); }
}
.cs-hero > * {
  animation: blur-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.cs-hero > *:nth-child(1) { animation-delay: 0.05s; }
.cs-hero > *:nth-child(2) { animation-delay: 0.18s; }
.cs-hero > *:nth-child(3) { animation-delay: 0.31s; }
.cs-hero > *:nth-child(4) { animation-delay: 0.44s; }
.cs-hero > *:nth-child(5) { animation-delay: 0.57s; }

@media (prefers-reduced-motion: reduce) {
  .cs-hero > * { animation: none; }
}
.cs-hero .badge--beta { margin-bottom: var(--sp-sp); }

.cs-title {
  width: 100%;
  max-width: 820px;
  margin: 0;
}
.accent-word { color: var(--accent-orange); }
.cs-sub {
  width: 100%;
  max-width: 560px;
  margin-top: var(--sp-sp);
  font-weight: var(--fw-medium);
  font-size: var(--fs-20);
  line-height: var(--lh-32);
  letter-spacing: var(--ls-04);
  color: var(--text-muted);
}

/* ---- Email capture ---- */
.cs-form {
  width: 100%;
  margin-top: var(--sp-40);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.cs-form-label {
  font-weight: var(--fw-medium);
  font-size: var(--fs-20);
  line-height: var(--lh-32);
  letter-spacing: var(--ls-04);
  color: var(--fg);
}
.cs-note { text-align: center; }

.btn-link {
  font-weight: var(--fw-medium);
  font-size: var(--fs-14);
  line-height: var(--lh-22-4);
  letter-spacing: var(--ls-028);
  color: var(--text-muted);
  transition: color 0.15s ease;
}
.btn-link:hover { color: var(--fg); }

/* ---- Value props ---- */
.cs-points {
  margin-top: var(--sp-xl);
  padding-top: var(--sp-40);
  border-top: 1px solid var(--hairline);
  width: 100%;
  display: flex;
  gap: var(--sp-40);
  text-align: left;
}
.cs-point {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}
.cs-point__icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  margin-bottom: 4px;
  color: var(--fg);
}
.cs-point__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.cs-point .subtitle { max-width: 280px; }

/* ---- Footer ---- */
.cs-footer {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 48px;
  border-top: 1px solid var(--hairline);
}
.footer-copy {
  font-weight: var(--fw-regular);
  font-size: var(--fs-12);
  line-height: var(--lh-15-6);
  letter-spacing: var(--ls-024);
  color: var(--text-muted);
}
.footer-legal {
  display: flex;
  gap: 24px;
}
.footer-legal a {
  font-size: var(--fs-12);
  line-height: var(--lh-15-6);
  letter-spacing: var(--ls-024);
  color: var(--text-muted);
  transition: color 0.15s ease;
}
.footer-legal a:hover { color: var(--fg); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .cs-header { padding: 5px 24px; }
  .cs-main { padding: 64px 24px; }
  .cs-points {
    flex-direction: column;
    gap: 28px;
    margin-top: 48px;
    padding-top: 32px;
  }
  .cs-point { gap: 6px; }
  .cs-point .subtitle { max-width: none; }
}

@media (max-width: 600px) {
  .cs-header { padding: 5px 20px; }
  .cs-main { padding: 48px 20px; }
  .cs-sub { font-size: 17px; line-height: 26px; letter-spacing: -0.3px; }
  .cs-form-label { font-size: 18px; line-height: 28px; }
  .cs-footer { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; }
  .email-form { width: 100%; }
}