/* v2: cards are a white→lavender gradient with a soft lift on hover.
   This replaces v1's flat surface-step + border-colour hover. */
.mq-card {
  background: linear-gradient(180deg, #ffffff 0%, var(--mq-card) 100%);
  border: var(--hairline);
  border-radius: 20px;
  padding: var(--s-7);
  transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.mq-card:hover { box-shadow: 0 12px 32px rgba(52,34,67,0.10); transform: translateY(-2px); }
.mq-card--flat { background: #fff; }

.mq-media {
  border: var(--hairline);
  border-radius: 20px;
  overflow: hidden;
  background: var(--mq-card);
  aspect-ratio: 16 / 10;
}
.mq-media > img, .mq-media > video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Hero: purple gradient panel, white type */
.mq-hero-panel { background: var(--mq-hero); color: #fff; }
.mq-hero-panel .mq-display-xl, .mq-hero-panel .mq-display-l, .mq-hero-panel .mq-h2 { color: #fff; }
.mq-hero-panel .mq-body-l { color: rgba(255,255,255,0.82); }
.mq-hero-panel .mq-eyebrow { color: var(--mq-accent); }
.mq-hero-panel .mq-btn--ghost { color: #fff; border-color: rgba(255,255,255,0.35); }
.mq-hero-panel .mq-btn--ghost:hover { border-color: #fff; }

/* Full-bleed gradient CTA band, purple to green */
.mq-band {
  background: var(--mq-band);
  color: #fff;
  border-radius: 20px;
  padding: var(--s-8);
}
.mq-band .mq-h2, .mq-band .mq-h3 { color: #fff; }
.mq-band .mq-body-l, .mq-band .mq-body { color: rgba(255,255,255,0.86); }
.mq-band .mq-eyebrow { color: var(--mq-accent); }