/* The beta's password page and download page, in the look of the site's other pages (the Terms, Privacy and help
   center): the bar along the top, a big two-tone title over a little timeline, and what to do in a card beside it.
   /styles.css gives the tokens, the fonts, the bar, the pink .btn and the footer's links. Dark, like the main page. */
.beta {
  --raise: #2E2823; --text: #ECE5DB; --rule-strong: rgba(246, 242, 236, .22); --gold: #F0B526; --violet: #A07CF5;
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
}
.beta-help { padding: 8px 15px; border-radius: 999px; background: var(--raise); color: var(--ink); font: 600 15px/1 var(--body); text-decoration: none; box-shadow: inset 0 0 0 1px var(--rule); transition: box-shadow .2s; }
.beta-help:hover, .beta-help:focus-visible { box-shadow: inset 0 0 0 1px var(--pink); }

.beta-col {
  flex: 1; width: 100%; max-width: 1240px; min-width: 0; margin: 0 auto;
  padding: calc(64px + clamp(28px, 7vh, 72px)) var(--gut) clamp(56px, 10vh, 104px);
  overflow-wrap: break-word;
}
.beta-col p, .beta-col li { font-size: 17px; line-height: 1.6; }
.beta-col a { color: var(--ink); text-decoration-color: var(--pink); text-underline-offset: .18em; }
.beta-col a:hover { color: var(--pink); }

/* ---------- the head: the title on the left, the card beside it ---------- */
.beta-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); column-gap: 5vw; align-items: end; }
.beta-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 22px; color: var(--muted); font: 600 14px/1 var(--body) !important; }
.beta-kicker span { padding: 7px 12px; border-radius: 999px; background: color-mix(in srgb, var(--pink) 16%, transparent); color: #F46C8D; }
.beta-title { font-size: clamp(60px, 9.4vw, 148px); font-weight: 800; font-stretch: 75%; line-height: .84; letter-spacing: -.03em; color: var(--ink); }
.beta-title span { display: block; padding-bottom: .04em; }
.beta-title span:nth-child(2) { color: var(--pink); padding-left: .55em; }
.beta-sub { max-width: 40ch; margin-top: 24px; color: var(--muted); font-size: clamp(17px, 1.3vw, 20px) !important; line-height: 1.5; text-wrap: pretty; }

/* The little timeline under the title: three lanes of clips and the playhead crossing them. */
.beta-lanes { position: relative; display: grid; gap: 5px; max-width: 520px; margin-top: 34px; }
.beta-lanes span { position: relative; height: 9px; }
.beta-lanes b { position: absolute; top: 0; bottom: 0; left: var(--x); width: var(--w); border-radius: 3px; background: color-mix(in srgb, var(--pink) 78%, transparent); }
.beta-lanes span:nth-child(2) b { background: color-mix(in srgb, var(--ink) 22%, transparent); }
.beta-lanes span:nth-child(3) b { background: color-mix(in srgb, var(--teal) 60%, transparent); }
.beta-lanes i { position: absolute; top: -8px; bottom: -6px; left: 38%; width: 2px; background: var(--pink); box-shadow: 0 0 10px rgba(240, 83, 122, .6); }
.beta-lanes i::before { content: ""; position: absolute; left: -5px; top: -2px; width: 12px; height: 9px; border-radius: 3px 3px 6px 6px; background: var(--pink); }
@media (prefers-reduced-motion: no-preference) {
  .beta-lanes i { animation: beta-run 9s linear infinite; }
  .beta-title span { animation: beta-cut .95s cubic-bezier(.65, 0, .25, 1) both; }
  .beta-title span:nth-child(2) { animation-delay: .16s; }
}
@keyframes beta-run { from { left: 0; } to { left: calc(100% - 2px); } }
@keyframes beta-cut { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% -10% -20% 0); } }

/* The card: the sign-in, or the download. */
.beta-card {
  position: relative; padding: clamp(24px, 2.6vw, 32px); border-radius: 26px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule), 0 40px 80px -40px rgba(0, 0, 0, .8);
}

/* ---------- the password page ---------- */
.beta-login { display: flex; flex-direction: column; gap: 14px; }
.beta-login input[type="password"] {
  width: 100%; height: 56px; padding: 0 20px; border-radius: 999px;
  border: 1px solid var(--rule-strong); background: var(--well); color: var(--ink);
  font: 400 17px/1 var(--body); caret-color: var(--pink); transition: border-color .25s, box-shadow .25s;
}
.beta-login input[type="password"]::placeholder { color: #8A8076; }
.beta-login input[type="password"]:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 4px rgba(240, 83, 122, .16); }
.beta-wrong { color: var(--pink); font-size: 16px !important; }
.beta-wrong[hidden] { display: none; }
.beta-continue { justify-content: space-between; width: 100%; margin-top: 4px; }
.beta-apply { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 16px !important; }

/* ---------- the download page ---------- */
.beta-downloads { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.beta-download { max-width: 100%; }
.beta-version { color: var(--muted); font-size: 15px !important; }
.beta-note { color: var(--muted); }
.beta-note.is-error { color: var(--pink); }
.beta-terms { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 15px !important; line-height: 1.55 !important; }

/* What to know, as panels under the head, each with its own color from the timeline's lanes. */
.beta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; margin-top: clamp(56px, 9vh, 96px); }
/* Under the video the panels sit at the grid's own gap, as one group with it. */
.beta-video + .beta-grid { margin-top: 20px; }
.beta-panel { --a: var(--teal); padding: 26px 28px 28px; border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
.beta-panel:nth-child(2) { --a: var(--pink); }
.beta-panel:nth-child(3) { --a: var(--gold); }
.beta-panel[hidden] { display: none; }
/* The getting-started video: one full-width panel between the head and the other panels, the video filling its width.
   It comes after the panels' colors because, as main's second child, :nth-child(2) would make it pink. */
.beta-panel.beta-video { --a: var(--violet); margin-top: clamp(56px, 9vh, 96px); }
.beta-video video { display: block; width: 100%; max-width: 100%; height: auto; margin-top: 18px; border-radius: 14px; background: #000; }
.beta-panel p, .beta-panel li { color: var(--text); }
.beta-h { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; color: var(--ink); font: 700 clamp(22px, 2vw, 26px)/1.1 var(--display); font-stretch: 84%; letter-spacing: -.015em; }
.beta-h::before { content: ""; flex: none; width: 18px; height: 9px; border-radius: 3px; background: var(--a); }

/* The install steps: numbered markers on the playhead's line, as in the help center. */
.beta-steps { position: relative; counter-reset: step; margin: 18px 0 18px; padding-left: 52px; }
.beta-steps::before { content: ""; position: absolute; left: 17px; top: 8px; bottom: 20px; width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--pink) 30%, transparent); }
.beta-steps li { position: relative; counter-increment: step; min-height: 36px; margin-bottom: 14px; padding-top: 4px; }
.beta-steps li:last-child { margin-bottom: 0; }
.beta-steps li::before {
  content: counter(step); position: absolute; left: -52px; top: 0; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 50%; background: var(--pink); color: var(--paper); font: 700 17px/1 var(--display); font-stretch: 85%;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--pink) 16%, transparent);
}
.beta-notes { margin: 0; }
.beta-notes li { position: relative; margin: 8px 0; padding-left: 22px; }
.beta-notes li::before { content: ""; position: absolute; left: 2px; top: .66em; width: 8px; height: 8px; border-radius: 2px; background: var(--a); }

/* The footer: the copyright band, with Help, Terms and Privacy. */
.beta-foot { background: var(--paper); border-top: 1px solid var(--rule); }
.beta-foot .foot { margin-top: 0; }

/* Below the wide width: the title first, then the card under it. */
@media (max-width: 900px) {
  .beta-hero { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .beta-lanes { margin-top: 28px; }
}
@media (max-width: 760px) {
  .beta-col { padding-top: calc(52px + 36px); }
  .beta-help { padding: 7px 13px; font-size: 14px; }
  .beta-panel { padding: 22px 20px 24px; }
}