/* Zavvy marketing / handoff — tokens mirror @zavvy/design colors.light (Refresh v2). */
:root {
  --zavvy-primary: #ff4d5a;
  --zavvy-primary-pressed: #e63e4b;
  --zavvy-primary-soft: #ff4d5a14;
  --zavvy-bg: #f9fcff;
  --zavvy-surface: #ffffff;
  --zavvy-text: #02102b;
  --zavvy-muted: #5e6a7b;
  --zavvy-border: #dfe5ec;
  --zavvy-radius-lg: 16px;
  --zavvy-radius-sheet: 20px;
  --zavvy-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.zavvy-handoff-page {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(180deg, var(--zavvy-primary-soft) 0%, var(--zavvy-bg) 42%);
  color: var(--zavvy-text);
  font-family: var(--zavvy-font);
  text-align: center;
}

.zavvy-handoff-sheet {
  width: 100%;
  max-width: 22rem;
  background: var(--zavvy-surface);
  border-radius: var(--zavvy-radius-sheet);
  padding: 28px 22px 24px;
  box-shadow: 0 18px 48px -28px #ff4d5a55;
}

.zavvy-handoff-chrome {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--zavvy-border);
  margin: 0 auto 18px;
}

.zavvy-handoff-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zavvy-primary);
  margin: 0 0 8px;
}

.zavvy-handoff-title {
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0 0 8px;
  line-height: 1.25;
}

.zavvy-handoff-body {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--zavvy-muted);
  margin: 0 0 18px;
}

.zavvy-handoff-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border-radius: var(--zavvy-radius-lg);
  background: var(--zavvy-primary);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 24px #ff4d5a33;
}

.zavvy-handoff-cta:hover {
  background: var(--zavvy-primary-pressed);
}

.zavvy-loading-dots::after {
  content: "";
  display: inline-block;
  width: 1.2em;
  text-align: left;
  animation: zavvy-dots 1.2s steps(4, end) infinite;
}

@keyframes zavvy-dots {
  0% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  75% {
    content: "...";
  }
}