/* Plugin Player beta signup. Builds on ../style.css (same tokens: --bg, --cyan, --magenta, Inter). */

.beta {
  padding: 112px 0 72px;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(0, 229, 255, 0.12), transparent 55%),
    radial-gradient(ellipse at 90% 30%, rgba(255, 45, 123, 0.10), transparent 55%);
}

.beta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 56px;
  align-items: center;
}

.beta-title {
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}
.beta-title span {
  display: block;
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* room for descenders (g, y, p): a gradient clipped to text cuts them at the box edge (Rex, Nov 2: the g in "game" was cut off) */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.beta-lede {
  color: var(--text-secondary);
  font-size: 1.1rem;
  max-width: 560px;
  margin-bottom: 28px;
}

.beta-card { max-width: 560px; }

.beta-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.beta-chips li {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 999px;
  padding: 5px 12px;
}

.beta-note {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-top: 12px;
}

.beta-media { display: flex; justify-content: center; }
.beta-video {
  display: block;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 9 / 16;
  max-height: calc(100vh - 160px);
  object-fit: cover;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 0 60px rgba(0, 229, 255, 0.10), 0 20px 60px rgba(0, 0, 0, 0.5);
}

@media (max-width: 860px) {
  .beta { padding: 92px 0 48px; }
  .beta-grid { grid-template-columns: 1fr; gap: 32px; }
  /* On phones: headline, then the clip, then the form */
  .beta-copy { display: contents; }
  .beta-copy > .section-label { order: 1; margin-bottom: -20px; }
  .beta-title { order: 2; margin-bottom: -16px; }
  .beta-lede { order: 3; margin-bottom: 0; }
  .beta-media { order: 4; }
  .beta-card { order: 5; max-width: none; }
  .beta-chips { order: 6; margin-top: -8px; }
  .beta-note { order: 7; margin-top: -24px; }
  .beta-video { max-width: 260px; max-height: none; }
}