/* ============================================================================
   HINT IT — v2 : /v2/what (page-unique styles)
   ----------------------------------------------------------------------------
   The consumer explainer page. Shared vocabulary carries the layout
   (hero-brand, section, stack, steps); the unique bits below: the headline's
   light-purple accent span, the bold purple section taglines (legacy #7b4bc1
   → --text-brand), the responsive video frame, and the disc bullets for the
   "what happens next" notes (the reset zeroes list padding).
   ============================================================================ */

/* Accent half of the hero headline — light purple that reads on the brand band
   (legacy used #9d7dcd on white; --purple-300 is the token neighbor). */
.hint-v2 .what-accent {
  color: var(--purple-300);
}

/* Bold purple one-line tagline under each section heading */
.hint-v2 .what-tagline {
  color: var(--text-brand);
  font-weight: var(--fw-bold);
}

/* Responsive 16:9 video frame in the hero */
.hint-v2 .what-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: var(--space-6);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--purple-900);
}
.hint-v2 .what-video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* "What happens next" bullets after the numbered steps */
.hint-v2 .what-notes {
  list-style: disc;
  padding-left: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.hint-v2 .what-notes li {
  line-height: var(--leading-relaxed);
}