/* The invite-only page (public/private/index.html, js/pages/private.js): the wordmark and one card in the middle of
   the screen, on the site's canvas under the content pages' glow. Static: nothing animates in, nothing moves once
   the lock tile is in its fixed-size slot. */

/* no header, footer or tab bar here: their placeholders stay empty and out of the layout (app.css keeps room under
   the page for the phone tab bar); no scrollbar gutter kept either (app.css), so the card sits in the true middle */
.pv-body :is(#site-header, #site-footer, #mobile-nav) { display: none; }
.pv-body { padding-bottom: 0; }
html:has(> body.pv-body) { scrollbar-gutter: auto; }

.pv-page {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: max(40px, env(safe-area-inset-top)) var(--gutter) max(48px, env(safe-area-inset-bottom));
}
.pv-glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(56% 56% at 50% -8%, rgba(139, 92, 246, .17), rgba(139, 92, 246, .05) 46%, transparent 76%);
}
.pv-glow::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(60% 56% at 50% 0%, #000 0%, transparent 75%);
  mask-image: radial-gradient(60% 56% at 50% 0%, #000 0%, transparent 75%);
  opacity: .5;
}

.pv-stack { width: min(400px, 100%); display: flex; flex-direction: column; align-items: center; gap: 26px; }
.pv-brand { margin: 0; }

.pv-card {
  width: 100%; padding: 34px 28px 28px; border-radius: var(--radius-3xl);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--surface-1); box-shadow: var(--shadow-card);
}
/* the slot private.js fills with the lock tile (cards.js iconTile): the tile's own size, so nothing moves */
.pv-icon { display: grid; flex: none; width: 56px; height: 56px; margin-bottom: 18px; }
.pv-title { font-size: 24px; line-height: 1.25; letter-spacing: -.01em; }
.pv-text { margin: 10px 0 26px; max-width: 320px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }

@media (max-width: 420px) {
  .pv-card { padding: 30px 20px 22px; }
  .pv-title { font-size: 22px; }
}