/* ==========================================================================
   Beta sign-up page: copy + form on the left, read-aloud phone mockup on the right.
   ========================================================================== */

.beta { padding: clamp(40px, 6vw, 88px) 0 clamp(72px, 9vw, 128px); }
.beta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(40px, 7vw, 112px);
  align-items: center;
}
.beta-copy .lead { margin-top: 20px; max-width: 24ch; }
.beta-copy .beta-form { margin-top: 40px; }

ul.points { list-style: none; padding: 0; margin: 44px 0 0; display: grid; gap: 14px; }
.points li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--ink-2); }
.points svg {
  flex: none; width: 22px; height: 22px;
  fill: none; stroke: var(--olive); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Stage ---------- */
.beta-stage {
  display: flex; justify-content: center;
  padding: clamp(40px, 5vw, 60px) 24px;
  background: var(--paper-2); border-radius: 36px;
}
.beta-phone { --phone-w: 300px; animation: beta-float 9s ease-in-out infinite; }
@keyframes beta-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------- Read-aloud screen (dark) ---------- */
.ra {
  display: flex; flex-direction: column;
  background: var(--night); color: var(--night-ink);
  font-family: var(--font);
}
.ra::after { /* home indicator */
  content: ""; position: absolute; left: 50%; bottom: 0.55em; width: 34%; height: 0.3em; transform: translateX(-50%);
  border-radius: var(--pill); background: rgb(241 238 230 / 0.55);
}
.ra-top { display: flex; align-items: center; justify-content: space-between; padding: 3.5em 1.3em 0; }
.ra-icon { display: grid; place-items: center; width: 2.4em; height: 2.4em; color: var(--night-muted); }
.ra-icon svg { width: 1.7em; height: 1.7em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ra-aa { font-size: 1.05em; font-weight: 600; letter-spacing: -0.02em; }
.ra-title { display: grid; justify-items: center; text-align: center; line-height: 1.25; }
.ra-title b { font-size: 0.95em; font-weight: 600; }
.ra-title small { font-size: 0.8em; color: var(--night-muted); }

.ra-text {
  flex: 1; min-height: 0; overflow: hidden;
  padding: 1.8em 1.7em 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 76%, transparent 100%);
}
.ra-text p {
  margin-top: -0.9em;
  font-family: var(--font-book); font-size: 1.42em; line-height: 1.52; letter-spacing: -0.003em;
  color: #85867b;
}
.ra-text .s { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ra-text .now {
  padding: 0.06em 0.2em;
  border-radius: 0.28em;
  background: rgb(111 132 98 / 0.4); color: #f4f1ea;
}

.ra-card {
  margin: 0 1em 1.5em; padding: 1.15em 1.3em 1.3em;
  background: var(--night-2); border: 1px solid var(--night-line); border-radius: 1.9em;
}
.ra-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; font-size: 0.95em; }
.ra-meta b { font-weight: 600; }
.ra-meta span { font-size: 0.85em; color: var(--night-muted); font-variant-numeric: tabular-nums; }
.ra-bar { position: relative; height: 0.32em; margin-top: 0.95em; border-radius: var(--pill); background: #3b3d35; }
.ra-bar span { position: absolute; left: 0; top: 0; bottom: 0; width: 37%; border-radius: inherit; background: var(--olive-2); }
.ra-bar span::after { content: ""; position: absolute; right: -0.45em; top: 50%; width: 0.9em; height: 0.9em; margin-top: -0.45em; border-radius: 50%; background: var(--night-ink); }
.ra-ctrl { display: flex; align-items: center; justify-content: center; gap: 2.4em; margin-top: 1.15em; }
.ra-skip { width: 2.3em; height: 2.3em; fill: none; stroke: var(--night-muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ra-skip text { fill: var(--night-muted); stroke: none; font-family: var(--font); font-size: 7px; font-weight: 600; }
.ra-play { display: grid; place-items: center; width: 3.9em; height: 3.9em; border-radius: 50%; background: var(--night-ink); color: var(--night); }
.ra-play svg { width: 1.6em; height: 1.6em; margin-left: 0.12em; fill: currentColor; }

/* ---------- Responsive ---------- */
@media (max-width: 959px) {
  .beta-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .beta-copy .lead { max-width: none; }
  .beta-stage { padding: 36px 20px; border-radius: 28px; }
  .beta-phone { --phone-w: 264px; }
}