/* Section bands — explicit rhythm rule.
 * .band--light (default white), .band--tinted, .band--dark.
 * Use as a class on <section> alongside .mr-section.
 */

[data-mr="1"] .mr-band--light {
  background-color: var(--mr-surface-page);
  color: var(--mr-text-primary);
}

[data-mr="1"] .mr-band--tinted {
  background-color: var(--mr-surface-tinted);
  color: var(--mr-text-primary);
}

[data-mr="1"] .mr-band--dark {
  background-color: var(--mr-surface-dark);
  color: var(--mr-text-on-dark);
  background-image:
    radial-gradient(
      circle at 80% 20%,
      rgba(15, 118, 110, 0.18),
      transparent 50%
    ),
    radial-gradient(
      circle at 10% 90%,
      rgba(18, 46, 69, 0.65),
      transparent 60%
    );
}

[data-mr="1"] .mr-band--dark h1,
[data-mr="1"] .mr-band--dark h2,
[data-mr="1"] .mr-band--dark h3,
[data-mr="1"] .mr-band--dark h4,
[data-mr="1"] .mr-band--dark h5,
[data-mr="1"] .mr-band--dark h6 {
  color: var(--mr-text-on-dark);
}

[data-mr="1"] .mr-band--dark p {
  color: var(--mr-text-on-dark-muted);
}

[data-mr="1"] .mr-band--dark .mr-eyebrow {
  color: var(--mr-teal-400);
}

/* Buttons are excluded: this rule outranked every .mr-btn variant's own
 * color (0-2-1 vs 0-2-0), so primary buttons on dark bands rendered their
 * label in link-blue instead of white — washed out on the roadmap, the
 * homepage final CTA and every story-page dark band (Phase roadpage.6). */
[data-mr="1"] .mr-band--dark a:not(.mr-btn) {
  color: var(--mr-teal-400);
}

[data-mr="1"] .mr-band--dark a:not(.mr-btn):hover {
  color: var(--mr-teal-100);
}