/* Dark entry-surface theme — mirrors the access.html mockup / ui-design-principles.md:
   atmospheric radial gradient, MindFront monolith + wire as the brand, one decision. Token
   values inlined from Foundations.css (dark theme) since this is a standalone static page. */
:root {
  --bg-from: #11171f;
  --bg-to:   #0a0d12;
  --text:    #d1d5db;
  --text-2:  #9ca3af;
  --text-3:  #6b7280;
  --border:  #2a3340;
  --accent:  #4a8acf;
}

html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--bg-to); }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.page {
  position: fixed; inset: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  /* Atmospheric vignette peaked above the focal point — this IS the page background. */
  background: radial-gradient(ellipse at 50% 14%, var(--bg-from) 0%, var(--bg-to) 80%);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 300;
  animation: fade-in 400ms ease both;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.inner { display: flex; flex-direction: column; align-items: center; text-align: center; width: 88%; max-width: 30rem; }

/* Monolith wordmark — the brand hero. */
.wordmark { width: 100%; max-width: 19rem; color: var(--text); opacity: 0.94; }
.wordmark svg { width: 100%; display: block; }

.rule { width: 100%; height: 1px; background: var(--border); margin: 1rem 0 0; }

/* Wire — kept from the auth surface; glows on the dark field. */
.wire {
  width: 100%; height: 22px; margin-top: 0.5rem; display: block; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.tagline { margin-top: 2.25rem; font-size: 0.95rem; line-height: 1.6; color: var(--text-2); max-width: 27rem; }

/* One decision: the download. */
.dl { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 1.75rem; }

.dl__button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-width: 17rem; height: 3.1rem; padding: 0 1.9rem;
  border: 1px solid var(--border); background: rgba(74, 138, 207, 0.06); color: var(--text);
  font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: all 0.14s ease;
  animation: dl-rise 420ms ease both;
}
.dl__button[hidden] { display: none; }
.dl__button:hover { border-color: var(--accent); color: #eef4fb; background: rgba(74, 138, 207, 0.14); box-shadow: 0 0 24px rgba(74, 138, 207, 0.18); }
.dl__button:active { transition: none; transform: scale(0.985); }
.dl__arrow { color: var(--accent); }
@keyframes dl-rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.dl__note { margin-top: 1.1rem; font-size: 0.85rem; line-height: 1.5; color: var(--text-3); max-width: 26rem; }
.dl__hint { margin-top: 0.5rem; font-size: 0.78rem; line-height: 1.5; color: var(--text-3); font-style: italic; }
.dl__hint[hidden] { display: none; }

.diagnostics {
  position: fixed; bottom: 0.9rem; left: 0; right: 0; text-align: center;
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3);
}

@media (max-width: 480px) {
  .inner { width: 90%; }
  .dl__button { min-width: 0; width: 100%; }
}