/* Beta cohort application page.
   Uses the homepage's tokens, nav and footer from /style.css and adds only the
   form. Kept in its own file so nothing here can reach the live homepage. */

.beta-hero {
  padding-bottom: 130px;
}

/* The homepage hero is tall enough that these glows read as accents in the
   corners. This page's hero is roughly half the height, so the same glows
   cover the whole panel and wash the text out. Damped rather than removed --
   the page should still look like the same site. */
.beta-hero .hero-glow.glow-1 { opacity: 0.42; width: 780px; height: 780px; }
.beta-hero .hero-glow.glow-2 { opacity: 0.35; }
.beta-hero .hero-dots { opacity: 0.5; }

/* The form card overlaps the hero's bottom edge, which leaves a hard horizontal
   seam either side of it where bg-hero meets bg-base. This fades one into the
   other so the card sits on a gradient instead of a join. */
.beta-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  background: linear-gradient(to bottom, transparent, var(--bg-base));
  pointer-events: none;
}

.beta-hero-inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 56px 24px 0;
  text-align: center;
  animation: rise-in 0.6s ease both;
}

.beta-places {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  padding: 8px 18px;
  margin-bottom: 28px;
}

.beta-title {
  font-size: 52px;
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  color: var(--text);
}

.beta-title-accent {
  background: var(--accent-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.beta-lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 620px;
  margin: 0 auto 36px;
}

.beta-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
  text-align: left;
  max-width: 620px;
  margin-inline: auto;
}

.beta-points li {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-muted);
}

.beta-points li::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.beta-points strong { color: var(--text); font-weight: 600; }

/* ─── Form ─── */

/* Transparent, so the hero's fade above is what the card sits on rather than a
   second background starting underneath it. */
.beta-form-section {
  background: transparent;
  padding: 0 24px 110px;
}

.beta-form-wrap {
  max-width: 620px;
  margin: -110px auto 0;
  position: relative;
}

/* Scoped to this page's body class: style.css is shared with the homepage and
   a bare `body` rule here would reach it.
   The success and closed panels are a third of the form's height, so without
   this the footer rides up and leaves a screen of empty background. Pinning it
   to the bottom is the fix; reserving a fixed height just moves the emptiness
   inside the card instead. */
body.beta-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.beta-page .beta-form-section {
  flex: 1;
}

/* Centres the short panels in that reserved space instead of leaving them
   stranded at the top of it. */
.beta-success,
.beta-closed {
  text-align: center;
}

.beta-form,
.beta-success,
.beta-closed {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-container);
  padding: 32px;
}

.beta-form-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--text);
}

.beta-form-sub {
  font-size: 15px;
  color: var(--text-subtle);
  margin: 0 0 28px;
}

.beta-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 18px;
  min-width: 0;
}

.beta-field label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.beta-field input[type='text'],
.beta-field input[type='email'],
.beta-field textarea,
.beta-field select {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  padding: 12px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.beta-field input:focus,
.beta-field textarea:focus,
.beta-field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(255 117 31 / 0.25);
}

.beta-hint {
  font-size: 13px;
  color: var(--text-subtle);
}

/* Free text, so it should look writeable rather than like a squashed input.
   Vertical-only resize: dragging it wider breaks the card. */
.beta-field textarea {
  resize: vertical;
  min-height: 84px;
  line-height: 1.5;
}

.beta-field textarea::placeholder {
  color: var(--text-subtle);
}

@media (max-width: 560px) {
  .beta-title { font-size: 38px; }
  .beta-form, .beta-success, .beta-closed { padding: 26px 20px; }
  .beta-hero-inner { padding-top: 36px; }
}

.beta-why {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-subtle);
  background: var(--bg-base);
  border-radius: var(--r-control);
  padding: 12px 14px;
  margin: 4px 0 20px;
}

.beta-consent {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: 22px;
  cursor: pointer;
}

.beta-consent input {
  margin-top: 2px;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.beta-consent a {
  color: var(--accent);
  text-decoration: underline;
}

.beta-error {
  font-size: 14px;
  line-height: 1.5;
  color: #9f1d1d;
  background: #fdecec;
  border: 1px solid #f3b8b8;
  border-radius: var(--r-control);
  padding: 11px 14px;
  margin-bottom: 18px;
}

.beta-submit {
  width: 100%;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.beta-submit:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

/* Numbered because the value of this panel is answering "what happens now",
   and the order is the answer. */
.beta-next {
  text-align: left;
  margin: 0 0 22px;
  padding: 0 0 0 22px;
  display: grid;
  gap: 10px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-muted);
}

.beta-next li::marker {
  color: var(--accent);
  font-weight: 600;
}

.beta-success-foot {
  font-size: 14px !important;
  color: var(--text-subtle) !important;
  margin-bottom: 0 !important;
}

.beta-success-foot a {
  color: var(--accent);
  text-decoration: underline;
}

.beta-success h2,
.beta-closed h2 {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--text);
}

.beta-success p,
.beta-closed p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 20px;
}


/* Custom dropdown (beta/select.js), styled like the app's Select. */
.sel { position: relative; }
.sel-native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.sel-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  text-align: left;
  color: var(--text);
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sel-trigger:focus-visible,
.sel-open .sel-trigger {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(255 117 31 / 0.25);
}
.sel-invalid .sel-trigger { border-color: #d64545; }
.sel-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-placeholder { color: var(--text-3); }
.sel-chevron { width: 18px; height: 18px; flex: none; color: var(--text-3); transition: transform 0.15s ease; }
.sel-open .sel-chevron { transform: rotate(180deg); }
.sel-list {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  margin: 0;
  padding: 4px 0;
  list-style: none;
  max-height: 264px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px -12px rgb(0 0 0 / 0.35), 0 2px 8px rgb(0 0 0 / 0.08);
}
.sel-list[hidden] { display: none; }
.sel-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}
.sel-list li.sel-highlight { background: var(--surface-2); }
.sel-check { width: 16px; height: 16px; flex: none; color: var(--accent-text); visibility: hidden; }
.sel-list li[aria-selected="true"] .sel-check { visibility: visible; }
.sel-error { margin: 6px 0 0; font-size: 13px; color: #d64545; }
.sel-error[hidden] { display: none; }

/* Logo lockup per theme on the subpages, which do not load main.js. */
.nav-logo .logo-dark { display: none; }
:root[data-theme="dark"] .nav-logo .logo-light { display: none; }
:root[data-theme="dark"] .nav-logo .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav-logo .logo-light { display: none; }
  :root:not([data-theme="light"]) .nav-logo .logo-dark { display: block; }
}