.early-access {
  box-sizing: border-box;
  width: min(540px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 26px clamp(16px, 4vw, 30px);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  font: 14px/1.5 var(--sans);
}
.early-access::backdrop { background: rgb(0 0 0 / .7); }
.early-access-heading { padding-inline-end: 32px; }
.signup-close {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel); color: var(--ink); font-size: 22px; cursor: pointer;
}
.signup-close:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.early-access-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; }
.early-access h2 { margin: 0; font: inherit; font-size: 15px; color: var(--ink); }
.early-access-heading > span { color: var(--focus); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.early-access > p { margin: 10px 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.early-access .signup-note { font-size: 10px; }

.signup-label { display: block; margin: 15px 0 6px; font-size: 11px; color: var(--ink); }
.signup-row { display: flex; gap: 8px; }
.signup-row input { flex: 1; min-width: 0; border: 1px solid #63545c; border-radius: 3px; padding: 11px 12px; background: #100c0f; color: var(--ink); font: inherit; font-size: 13px; }
.signup-row button, #signup-retry { border: 1px solid #ed4962; border-radius: 3px; padding: 10px 14px; background: #a9102c; color: white; font: inherit; font-size: 11px; cursor: pointer; }
.signup-row button:disabled { background: #2d2026; border-color: #63545c; color: #bfb1b8; cursor: default; }
.signup-row input:focus-visible, .signup-consent input:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.signup-consent { display: flex; gap: 9px; align-items: flex-start; margin: 12px 0; color: var(--muted); font-size: 11px; }
.signup-consent input { margin: 3px 0 0; accent-color: var(--focus); }
.signup-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.signup-status { color: #c8bfc3; font-size: 11px; min-height: 1.6em; }
.signup-status[data-error="true"] { color: #ffa6b4; }
.signup-note a { text-decoration: underline; text-underline-offset: 3px; }
@media(max-width:460px) { .signup-row { flex-direction: column; } .signup-row button { padding: 12px; } }

.early-access[hidden], .early-access [hidden] { display: none; }
.signup-success { margin-top: 22px; padding: 2px 0 2px 16px; border-left: 2px solid #a9102c; }
.signup-success h2 { margin: 0 0 8px; color: var(--ink); font: inherit; font-size: 15px; font-weight: 500; }
.signup-success h2:focus { outline: none; }
.signup-success p { margin: 6px 0; max-width: 52ch; color: var(--muted); font-size: 12px; line-height: 1.6; }
.early-access:has(.signup-success:not([hidden])) > .early-access-heading,
.early-access:has(.signup-success:not([hidden])) > p:not(.signup-note) { display: none; }