/* ─── Hero + chat (one band) ───────────────────────────── */
.sp-hero {
  padding: 48px 24px 72px;
  background: var(--bg-primary);
}
.sp-hero-inner {
  max-width: 720px;
  margin: 0 auto 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sp-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 800; line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
  color: var(--text-primary);
}
.sp-hero-sub {
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--text-secondary);
  max-width: 680px;
  line-height: 1.65;
  margin: 0;
}

.sp-chat-card {
  max-width: 760px;
  margin: 0 auto;
  /* The embed falls back to a 520px min-height, so stay at or above it. */
  height: clamp(520px, 68vh, 680px);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 40px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}
/* Sizes the element before the embed script upgrades it, too. */
.sp-chat-card hellu-support-chat {
  display: block;
  width: 100%;
  height: 100%;
}
.sp-noscript {
  padding: 32px 24px;
  margin: 0;
  text-align: center;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.7;
}

/* ─── Email / login fallback ───────────────────────────── */
.sp-fallback {
  padding: 72px 24px 96px;
  background: var(--bg-warm, #f5f4f1);
  border-top: 1px solid var(--border-subtle);
}
.sp-fallback-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.sp-fallback h2 {
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  color: var(--text-primary);
}
.sp-fallback p {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.7;
  margin: 0 auto 28px;
}
.sp-fallback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

@media (max-width: 640px) {
  .sp-hero { padding-top: 40px; }
}