/* /welcome — the invite-launch front door. Tokens, type, wordmark and buttons
   come from /brand.css; this file is only the page.
   One screen: a centred hero, footer. Nothing below the fold. */

/* ── Hero: the mark in its sky, the name, one line, one door ─────────────── */
.hero {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 32px 28px; overflow: hidden;   /* the sky never adds a scrollbar */
}
/* The slot holds the mark's place in the column; the sky canvas is centred on
   it and much larger, spilling behind the text and fading out at its edges.
   Everything after it is position: relative so it paints over the canvas. */
.sky { position: relative; width: 100%; height: 240px; }
#sky {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(1200px, 100vw); height: 680px; pointer-events: none;
}
.hero > :not(.sky) { position: relative; }
/* The wordmark at hero size: "Light" regular, "Plane" bold, all white (brand.css). */
.name { margin: 4px 0 0; font-size: 56px; line-height: 1.05; letter-spacing: -1px; font-weight: 700; }
.name b { font-weight: 400; }
.tagline { margin: 14px 0 36px; font-size: clamp(18px, 2.2vw, 24px); color: var(--muted); }
.glow {
    background: linear-gradient(100deg, #8fa6ff 0%, #b49bff 45%, #5fe0c8 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    background-size: 200% 100%; animation: sheen 9s ease-in-out infinite alternate;
    font-weight: 600;
}
@keyframes sheen { to { background-position: 100% 0; } }
.hero .btn { min-width: 180px; }
.fine { margin: 18px 0 0; font-size: 13px; color: var(--dim); letter-spacing: .3px; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 28px 24px; color: var(--dim); font-size: 13px; }
.foot nav { display: flex; gap: 20px; }
.foot a:hover { color: var(--ink); }

/* ── Narrow screens ──────────────────────────────────────────────────────── */
@media (max-width: 560px) {
    .hero, .foot { padding-left: 16px; padding-right: 16px; }
    .sky { height: 200px; }
    .foot { justify-content: center; }
}