/* Shared public-page geometry overrides old entrance-only breakpoints.
   A stable scrollbar gutter also prevents horizontal movement between pages. */
html { scrollbar-gutter: stable; }
body.nx-page, body.waitlist-entrance {
  --public-gutter: clamp(24px, 4vw, 84px);
  --public-header-height: 84px;
  --public-lime: #d5f6a4;
}
.public-header.public-header {
  box-sizing: border-box; width: 100%; max-width: none;
  height: var(--public-header-height); min-height: var(--public-header-height);
  padding: 0 var(--public-gutter); margin: 0; flex-shrink: 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 25px;
  border-bottom: 1px solid #ffffff0a; position: relative; z-index: 5;
}
.public-header a { text-decoration: none; }
.public-header .public-brand { display: flex; flex-shrink: 0; justify-self: start; }
.public-header .public-brand img { display: block; width: 128px; height: 38px; object-fit: contain; }
.public-header .public-header-action { justify-self: end; }
.public-header nav { display: flex; gap: 32px; font-size: 12px; color: #a4afa1; }
.public-header nav a { color: inherit; }
.public-header nav a:hover { color: #edf1eb; }
.public-header .public-header-action, .waitlist-entrance #waitlist-form .primary {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 11px 18px; border: 1px solid #dfffb2; border-radius: 9px;
  background: linear-gradient(180deg, #e1fbbb, #c7ee94); color: #182311;
  font: 700 11px Manrope, system-ui, sans-serif; white-space: nowrap;
  box-shadow: inset 0 1px 0 #fff9;
}
/* Keep the particle sculpture, with the same ink and glass as the landing. */
.waitlist-entrance .login-scene {
  padding: 0; gap: 0; background: radial-gradient(ellipse at 50% 45%, #182820 0%, #080e0b 76%);
}
.waitlist-entrance .login-scene::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url('../assets/landing/glass-ribbon-v1.png') center / cover no-repeat;
  opacity: .25; mask-image: linear-gradient(90deg, transparent 25%, #000 72%);
}
.waitlist-entrance .welcome-layout { width: 100%; padding: 20px var(--public-gutter); margin: 0 auto auto; }
.waitlist-entrance #welcome-footer { padding: 20px var(--public-gutter); }
.waitlist-entrance #waitlist-form .primary { width: 100%; font-size: 13px; min-height: 48px; }
.public-header a:focus-visible { outline: 2px solid var(--public-lime); outline-offset: 5px; }
@media (max-width: 760px) {
  body.nx-page, body.waitlist-entrance { --public-gutter: 20px; --public-header-height: 72px; }
  .public-header.public-header { grid-template-columns: 1fr auto; }
  .public-header nav { display: none; }
  .public-header .public-brand img { width: 108px; height: 38px; }
  .public-header .public-header-action { padding: 10px 13px; gap: 12px; }
  .waitlist-entrance .login-scene::before { opacity: .13; }
}

/* Paint only the final public layout. Cross-document transitions keep the
   header anchored while the content makes a brief, native crossfade. */
html.public-preparing { background: #080e0b; }
html.public-preparing body { visibility: hidden; }
@view-transition { navigation: auto; }
.public-header { view-transition-name: public-header; }
::view-transition-group(root), ::view-transition-group(public-header) { animation-duration: 160ms; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; }

/* One restrained button family: matte lime for the main action and a quiet
   outlined header action. Fixed icon geometry avoids mismatched text arrows. */
.nx-page .nx-cta, .public-header .public-header-action,
.waitlist-entrance #waitlist-form .primary {
  min-height: 48px; padding: 0 22px; gap: 18px; border-radius: 12px;
  background: #d5f6a4; border: 1px solid #d5f6a4;
  color: #182311; box-shadow: none; font-size: 13px; font-weight: 600;
  line-height: 1.2; letter-spacing: 0; text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease;
  transform: none;
}
.nx-page .nx-cta:hover, .waitlist-entrance #waitlist-form .primary:hover {
  background: #e0f9bd; border-color: #e0f9bd; box-shadow: none; transform: none;
}
.public-header .public-header-action {
  width: 166px; min-height: 42px; padding: 0 16px;
  background: #ffffff04; border-color: #c9e8b02e; color: #e1edd8;
  display: flex; justify-content: space-between; font-size: 12px;
}
.public-header .public-header-action:hover { background: #d5f6a410; border-color: #c9e8b060; }
.public-header-action > span { display: flex; align-items: center; }
.nx-page .nx-cta > span, .waitlist-entrance #waitlist-form .primary > span {
  font-size: 0; width: 16px; height: 16px; flex-shrink: 0;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media(max-width:760px) { .public-header .public-header-action { width: 154px; } }
@media(prefers-reduced-motion:reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
/* The return link points back; forward actions keep the right-facing arrow. */
.waitlist-entrance .public-header-action svg { transform: rotate(180deg); }