/* wizard, usage-first selector (4 chips) */

.pd-wizard {
  background: linear-gradient(135deg, var(--pd-primary) 0%, var(--pd-primary-dark) 100%);
  color: var(--pd-white);
  padding: var(--pd-space-7) var(--pd-space-4);
  border-radius: var(--pd-radius-lg);
  text-align: center;
}
.pd-wizard__eyebrow {
  display: inline-block;
  font-size: var(--pd-fs-xs);
  font-weight: var(--pd-fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pd-accent);
  margin-bottom: var(--pd-space-3);
}
.pd-wizard__title {
  font-size: var(--pd-fs-xl);
  font-weight: var(--pd-fw-extra);
  margin: 0 0 var(--pd-space-2);
  color: var(--pd-white);
}
.pd-wizard__lede {
  font-size: var(--pd-fs-base);
  opacity: .85;
  max-width: 560px;
  margin: 0 auto var(--pd-space-5);
}

.pd-wizard-chips {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pd-space-3);
  max-width: 720px;
  margin: 0 auto;
}
@media (min-width: 640px) { .pd-wizard-chips { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pd-wizard-chips { grid-template-columns: repeat(4, 1fr); } }

.pd-wizard-chip {
  background: rgba(255, 255, 255, 0.10);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: var(--pd-white);
  padding: var(--pd-space-4);
  border-radius: var(--pd-radius);
  text-align: left;
  cursor: pointer;
  transition: all var(--pd-dur) var(--pd-ease);
  font-family: inherit;
}
.pd-wizard-chip:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: var(--pd-accent);
  transform: translateY(-2px);
}
.pd-wizard-chip[aria-pressed="true"], .pd-wizard-chip.is-selected {
  background: var(--pd-accent);
  border-color: var(--pd-accent);
  color: var(--pd-white);
  box-shadow: 0 10px 26px rgba(255, 106, 44, 0.32);
}
.pd-wizard-chip__icon {
  width: 32px; height: 32px;
  margin-bottom: var(--pd-space-2);
  color: currentColor;
}
.pd-wizard-chip__title {
  display: block;
  font-size: var(--pd-fs-md);
  font-weight: var(--pd-fw-bold);
  margin-bottom: 2px;
}
.pd-wizard-chip__hint {
  display: block;
  font-size: var(--pd-fs-xs);
  opacity: .85;
}

.pd-wizard__skip {
  display: inline-block;
  margin-top: var(--pd-space-5);
  font-size: var(--pd-fs-sm);
  color: var(--pd-white);
  text-decoration: underline;
  opacity: .8;
}
.pd-wizard__skip:hover { opacity: 1; color: var(--pd-white); }