/* Membership page-specific styles (lightweight, leveraging base.css) */

.hero {
  background: radial-gradient(1200px 600px at 10% 10%, rgba(178, 75, 243, 0.12), transparent 50%),
              radial-gradient(1200px 600px at 90% 90%, rgba(14, 165, 233, 0.12), transparent 50%);
}

.hero-figure img {
  border-radius: var(--radius-lg);
  box-shadow: var(--glow-purple), var(--shadow-lg);
}

.tiers-figure img {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* FAQ details as cards with improved summary UX */
details.card {
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-fast);
}

details.card[open] {
  border-color: var(--color-border-primary);
  box-shadow: var(--glow-purple), var(--shadow-xl);
  transform: translateY(-2px);
}

details.card summary {
  cursor: pointer;
  list-style: none;
  outline: none;
}

details.card summary::-webkit-details-marker { display: none; }

details.card summary h3 {
  display: inline-block;
  margin-bottom: 0;
}