/*
 * start.css — post-signup start page: welcome hero + suggestive action cards.
 */
.wg-start { max-width: 760px; margin: 0 auto; }

.wg-start-hero { text-align: center; padding: 14px 0 22px; }
.wg-start-hero h1 { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; }
.wg-start-hero p { margin: 0 auto; max-width: 460px; color: var(--wg-muted); }

.wg-start-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { .wg-start-grid { grid-template-columns: 1fr 1fr; } }

.wg-start-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--wg-border-soft, #e6efe9);
  border-radius: 16px;
  box-shadow: var(--wg-shadow-card);
  color: var(--wg-text); text-decoration: none;
  transition: box-shadow .2s ease, transform .2s var(--wg-ease-spring, ease), border-color .16s ease;
  animation: wg-page-in .35s var(--wg-ease-out, ease) both;
}
/* Staggered entrance — the cards cascade in one after another */
.wg-start-grid .wg-start-card:nth-child(2) { animation-delay: .05s; }
.wg-start-grid .wg-start-card:nth-child(3) { animation-delay: .10s; }
.wg-start-grid .wg-start-card:nth-child(4) { animation-delay: .15s; }
.wg-start-grid .wg-start-card:nth-child(5) { animation-delay: .20s; }
.wg-start-grid .wg-start-card:nth-child(6) { animation-delay: .25s; }
.wg-start-grid .wg-start-card:nth-child(7) { animation-delay: .30s; }
.wg-start-grid .wg-start-card:nth-child(8) { animation-delay: .35s; }
.wg-start-card:hover { text-decoration: none; box-shadow: var(--wg-shadow-hover); transform: translateY(-2px); border-color: #d8e6dd; }
.wg-start-card:active { transform: scale(0.98); }

.wg-start-ico {
  flex: none; width: 52px; height: 52px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.55rem; background: var(--wg-tint, #f4fbf7);
  transition: transform .22s var(--wg-ease-spring, ease);
}
.wg-start-card:hover .wg-start-ico { transform: scale(1.1) rotate(-4deg); }
/* Per-card tint so the grid reads colourful and scannable */
.wg-start-card--buy    .wg-start-ico { background: #eafaf0; }
.wg-start-card--sell   .wg-start-ico { background: #fff6df; }
.wg-start-card--events .wg-start-ico { background: #fdeef3; }
.wg-start-card--jobs   .wg-start-ico { background: #e9f0fd; }
.wg-start-card--comm    .wg-start-ico { background: #eef8f9; }
.wg-start-card--flights .wg-start-ico { background: #e8f4fd; }
.wg-start-card--points  .wg-start-ico { background: #fdf3e3; }
.wg-start-card--learn   .wg-start-ico { background: #f3effd; }

.wg-start-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wg-start-t { font-weight: 700; line-height: 1.3; }
.wg-start-d { font-size: 0.84rem; color: var(--wg-muted); line-height: 1.4; }
.wg-start-arrow { flex: none; font-size: 1.6rem; color: var(--wg-muted); line-height: 1; transition: transform .18s var(--wg-ease-spring, ease), color .16s ease; }
.wg-start-card:hover .wg-start-arrow { transform: translateX(3px); color: var(--wg-color, #0eaf4c); }

.wg-start-skip { text-align: center; margin: 22px 0 8px; }
.wg-start-skip .wg-btn { width: auto; padding: 10px 22px; border-radius: 999px; }

/* Guest "log in or join first" prompt */
.wg-start-login-msg { margin: 0 0 16px; color: var(--wg-muted); line-height: 1.5; }
.wg-start-login-actions { display: flex; flex-direction: column; gap: 8px; }
.wg-start-login-actions .wg-btn { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .wg-start-card, .wg-start-ico, .wg-start-arrow { animation: none; transition: none; }
  .wg-start-card:hover, .wg-start-card:active,
  .wg-start-card:hover .wg-start-ico, .wg-start-card:hover .wg-start-arrow { transform: none; }
}