/* SyncoTab · /app/welcome (visitors without a session). Uses the site's tokens (site.css). */
.welcome {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center; padding-block: clamp(2.5rem, 7vw, 6rem);
}
.welcome-eyebrow { margin: 0 0 .9rem; font: 650 .78rem/1 var(--font-text); letter-spacing: .1em; text-transform: uppercase; color: var(--sunburst-hi); }
.welcome h1 { margin: 0; font: 800 var(--step-5)/1.05 var(--font-display); letter-spacing: -.01em; max-width: 16ch; }
.welcome-lead { margin: 1.2rem 0 0; font-size: var(--step-1); line-height: 1.55; color: var(--nickel); max-width: 38rem; }
.welcome-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }
.welcome-note { margin: 1.1rem 0 0; color: var(--nickel-2); font-size: .95rem; }
.welcome-art { position: relative; aspect-ratio: 5 / 4; border-radius: 22px; overflow: hidden; background: var(--paper); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); }
.welcome-paper { position: absolute; inset: 0; }
.welcome-staff { position: absolute; left: 8%; right: 8%; top: 28%; height: 24%; display: flex; flex-direction: column; justify-content: space-between; }
.welcome-staff span { height: 1px; background: #B9BDC8; }
.welcome-zone { position: absolute; left: 26%; width: 48%; top: 25%; height: 30%; border: 2px solid #C93BCB; border-radius: 4px; background: rgba(214, 75, 214, .14); }
.welcome-zone b { position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: 5px; background: #C93BCB; color: #fff; font-size: .8rem; }
.welcome-cursor { position: absolute; left: 49%; top: 25%; width: 3px; height: 30%; background: #E8892F; }
.welcome-lock {
  position: absolute; left: 0; right: 0; bottom: 0; height: 24%; display: flex; align-items: center; justify-content: center; gap: .6rem;
  background: rgba(22, 32, 58, .84); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--ink); font-weight: 600;
}
.welcome-lock svg { width: 20px; height: 20px; color: var(--sunburst-hi); }
@media (max-width: 860px) {
  .welcome { grid-template-columns: 1fr; }
  .welcome-actions .btn { flex: 1 1 12rem; justify-content: center; }
}