/* The start page: the moving background of the Words module (colour drift + the 3D sphere), a greeting and what to do. */
body.welcome { min-height: 100vh; min-height: 100dvh; overflow: hidden; }
.welcome-sphere { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
.welcome-main { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 18px; padding: calc(26px + env(safe-area-inset-top)) var(--gutter) calc(14px + env(safe-area-inset-bottom)); text-align: center; pointer-events: none; }
.welcome-top { display: grid; justify-items: center; gap: clamp(8px, 2vh, 20px); }
.welcome-brand { margin: 0; display: inline-flex; align-items: center; gap: 12px; font: 800 clamp(18px, 2.4vw, 26px) var(--font-display); }
.welcome-brand .logo { height: clamp(26px, 3.4vw, 40px); width: auto; color: var(--c-text); }
.welcome-title { font-size: clamp(42px, 9vw, 112px); line-height: 1; text-wrap: balance; }
.welcome-bottom { display: grid; justify-items: center; gap: 12px; }
.welcome-lead { margin: 0; display: inline-flex; align-items: center; gap: 14px; max-width: min(92vw, 760px); padding: 14px 26px; border-radius: 999px; font: 700 clamp(17px, 2.6vw, 30px)/1.25 var(--font-display); text-wrap: balance; }
.welcome-lead svg { flex: none; width: clamp(28px, 3.4vw, 42px); height: auto; color: var(--c-primary); }
.welcome-bottom .legal { pointer-events: auto; }
@media (max-width: 520px) { .welcome-lead { border-radius: var(--r-xl); padding: 14px 18px; } }