/* Flat shared buttons. Keep the existing text wrappers for page compatibility. */
.pearl-button {
  cursor: pointer;
  position: relative;
  border: 1px solid #ffffff30;
  border-radius: 14px;
  background: #292929;
  color: #f8f8f5;
  box-shadow: none;
  transition: background .2s ease, border-color .2s ease;
}
.button.pearl-button { border: 1px solid #ffffff30; border-radius: 14px; }
header > .menu.pearl-button { border-radius: 50%; }
header > .menu.pearl-button .pearl-text { line-height: 1; }
.pearl-button > .pearl-surface { display: none; }
.pearl-text {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: inherit;
}
.pearl-button:hover { background: #383329; border-color: #ffd32980; }
.pearl-button:focus-visible, .hero .button.pearl-button:focus-visible {
  outline: 2px solid var(--accent, #ffd329);
  outline-offset: 5px;
}
@media (prefers-reduced-motion: reduce) {
  .pearl-button { transition: none; }
}