.new-onboarding .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s .65s, transform .6s .65s;
}
.new-onboarding .s.a .grid { opacity: 1; transform: translateY(0) }

.new-onboarding .gc {
  padding: 18px 16px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
  transition: all .2s;
  background: var(--white);
}
.new-onboarding .gc:hover { border-color: var(--border-hover); background: var(--sand-light) }
.new-onboarding .gc.sel { border-color: var(--coral); background: var(--coral-glow); color: var(--coral); font-weight: 600 }

.new-onboarding .gc.sk { border-style: dashed; color: var(--text-muted); font-weight: 400; font-size: 13.5px }
.new-onboarding .gc.sk.sel { border-style: solid; color: var(--text-primary); font-weight: 500 }

/* Color chips (3-col grid) */
.new-onboarding .colorgrid { grid-template-columns: 1fr 1fr 1fr }
.new-onboarding .colchip { display: flex; align-items: center; gap: 8px; justify-content: center; min-height: 52px }
.new-onboarding .cdot { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0 }

/* Grid "other" input */
.new-onboarding .grid-other-input input { width: 100%; box-sizing: border-box }