/* The signup has one question in focus. All styles stay within this surface. */
[data-beta-intro] { display: block; max-width: 760px; margin-inline: auto; width: 100%; }
[data-beta-intro] h2 { max-width: 20ch; width: auto; font-size: clamp(2rem, 5vw, 3.5rem); }
[data-beta-intro] .cta-sub { max-width: 58ch; }
.lead-form--application { max-width: 760px; margin-inline: auto; gap: 22px; scroll-margin-top: 110px; }
.beta-progress-header { display: flex; align-items: center; gap: 16px; }
.beta-mini-portrait { border-radius: 50%; object-fit: cover; width: 56px; height: 56px; }
.beta-progress-header p { margin: 0; color: #c8c8ce; font-size: .88rem; }
.beta-progress { display: block; width: 100%; height: 3px; border: 0; border-radius: 4px; background: #303037; accent-color: #ff584f; }
.beta-progress::-webkit-progress-bar { background: #303037; border-radius: 4px; }
.beta-progress::-webkit-progress-value { background: #ff584f; border-radius: 4px; transition: width .2s ease; }
.beta-progress::-moz-progress-bar { background: #ff584f; }
.beta-step { border: 0; padding: 6px 0 0; margin: 0; min-inline-size: 0; animation: beta-question-in .18s ease-out; }
.beta-step legend { padding: 0; font-size: clamp(1.4rem, 3.5vw, 2rem); font-weight: 600; line-height: 1.25; letter-spacing: -.025em; color: #f8f8fa; }
.beta-step-hint { margin: 12px 0 24px; line-height: 1.6; color: #b9b9c1; max-width: 58ch; }
.lead-form--application .beta-step .lead-form-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.beta-step textarea { min-height: 112px; resize: vertical; }
.beta-navigation { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; justify-content: space-between; }
.beta-navigation .primary-btn { margin-left: auto; min-width: 170px; }
.lead-form--application .beta-navigation .lead-submit { width: auto; max-width: 100%; }
.beta-navigation button { min-height: 50px; }
.lead-form--application .form-note { margin: 0; font-size: .82rem; color: #a9a9b2; }
.lead-form--application .form-feedback:empty { display: none; }
.beta-completion { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); align-items: start; gap: clamp(24px, 5vw, 56px); max-width: 920px; margin: 0 auto; scroll-margin-top: 120px; animation: beta-question-in .3s ease-out; }
.beta-completion-portrait { width: 100%; height: auto; border-radius: 24px; }
.beta-completion :is(h1, h2) { max-width: 23ch; font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.12; letter-spacing: -.035em; }
.beta-completion-copy > p { color: #c3c3cc; line-height: 1.7; margin: 20px 0; }
.beta-completion-copy > .section-label { color: #ff8a81; margin: 0 0 12px; }
.beta-completion-copy > .beta-completion-relax { color: #fff; }
.beta-completion .primary-btn { margin-top: 8px; }
.beta-step legend:focus-visible, #beta-receipt-heading:focus-visible { outline: 2px solid #ff8a81; outline-offset: 6px; }
[data-beta-intro][hidden], [data-lead-form][hidden], [data-beta-receipt][hidden], [data-beta-step][hidden], .beta-navigation [hidden], .mobile-sticky-cta[hidden] { display: none !important; }
@keyframes beta-question-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.beta-entry-copy { max-width: 680px; margin-inline: auto; padding-block: 20px; }
.beta-entry-copy h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; }
.beta-entry-copy .cta-sub { margin-block: 22px 28px; color: #b9b9c1; }
.beta-application-page { min-height: 100svh; display: flex; flex-direction: column; background: #0c0d11; }
.beta-application-header { width: 100%; max-width: 1200px; margin-inline: auto; padding: 24px clamp(20px, 4vw, 48px); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.beta-application-header .brand-logo img { width: 148px; height: auto; }
.beta-exit { color: #b9b9c1; font-size: .88rem; padding-block: 12px; text-decoration: none; }
.beta-exit:hover { color: #fff; }
.beta-application-main { flex: 1; width: 100%; max-width: 960px; margin-inline: auto; padding: clamp(20px, 5vh, 56px) 24px 40px; }
.beta-application-intro { max-width: 640px; margin: 0 auto 32px; }
.beta-application-intro h1 { font-size: 1.15rem; font-weight: 500; line-height: 1.4; letter-spacing: -.01em; }
.beta-application-intro .cta-sub { color: #aaaab5; font-size: .9rem; line-height: 1.6; margin-top: 8px; }
.beta-application-page .lead-form--application { max-width: 640px; padding: 0; border: 0; background: transparent; border-radius: 0; box-shadow: none; scroll-margin-top: 24px; }
.beta-application-page .beta-step legend { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
.beta-application-page .beta-completion { padding-block: 32px; scroll-margin-top: 24px; }
.beta-application-page .beta-navigation { margin-top: 8px; }
.beta-application-page .beta-navigation .primary-btn { width: auto; min-height: 52px; margin-top: 0; }
.beta-application-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; padding: 24px 24px 64px; color: #a9a9b2; font-size: .8rem; }
.beta-application-footer a { color: inherit; text-decoration: none; padding-block: 8px; }
.beta-application-footer a:hover, .beta-application-footer a[aria-current] { color: #fff; }
.beta-application-page a:focus-visible { outline: 2px solid #ff8a81; outline-offset: 4px; }
/* Keep labels stable; replace the legacy diagonal wipe with tactile states. */
.beta-page .primary-btn, .beta-page .outline-btn {
  border-radius: 12px;
  min-height: 52px;
  padding: 13px 22px;
  gap: 14px;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.beta-page .primary-btn::before, .beta-page .outline-btn::before { content: none; }
.beta-page .primary-btn {
  color: #211311;
  background: #ff776d;
  border-color: #ff928a;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%);
}
.beta-page .outline-btn { color: #e3e3e9; background: #1b1c22; border-color: #42434c; }
.beta-page .primary-btn:hover, .beta-page .outline-btn:hover { transform: none; }
.beta-page :is(.primary-btn, .outline-btn):focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.beta-page :is(.primary-btn, .outline-btn):active:not(:disabled) { transform: scale(.985); }
.beta-page :is(.primary-btn, .outline-btn):disabled { opacity: .65; cursor: wait; transform: none; box-shadow: none; }
.beta-navigation [data-beta-next]::after {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10h13m-5-5 5 5-5 5' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .beta-page .primary-btn:hover:not(:disabled) { background: #ff8b82; border-color: #ffa29b; transform: translateY(-1px); box-shadow: 0 4px 16px rgb(255 88 79 / 12%); }
  .beta-page .outline-btn:hover:not(:disabled) { color: #fff; background: #282930; border-color: #696a76; transform: translateY(-1px); }
  .beta-navigation [data-beta-next]:hover:not(:disabled)::after { transform: translateX(3px); }
  .beta-page :is(.primary-btn, .outline-btn):active:not(:disabled) { transform: scale(.985); }
}
@media (max-width: 600px) {
  .beta-application-header { padding: 16px 20px; }
  .beta-application-header .brand-logo img { width: 120px; }
  .beta-exit { font-size: .78rem; }
  .beta-application-main { padding: 24px 20px 28px; }
  .beta-application-intro { margin-bottom: 24px; }
  .lead-form--application { padding: 24px 18px; border-radius: 20px; }
  .beta-completion { grid-template-columns: 1fr; }
  .beta-completion-portrait { width: 144px; height: 144px; border-radius: 20px; }
  .beta-navigation .primary-btn { min-width: 0; }
  .beta-step legend { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .beta-step, .beta-completion { animation: none; }
  .beta-progress::-webkit-progress-value { transition: none; }
  .beta-page .primary-btn, .beta-page .outline-btn, .beta-navigation [data-beta-next]::after { transition: none; transform: none !important; }
  .beta-page .lead-submit[aria-busy="true"]::after { animation: none; }
}
