/*
 * Hero and section headings, site wide (owner, 11 Oct 2026). Linked last on
 * every page, after the page's own styles, which keep their fonts.
 *
 * 1. Spacing: the pages set headings tight (about -0.03em to -0.05em), so
 *    letters crowded. Hero and section headings use slightly open spacing.
 * 2. Colour: the treatment of "Find your next customers, or plan your
 *    business." on the homepage: the heading in its own colour, the accent
 *    words in a moving gold gradient. headings.js marks the accent words in
 *    every h1 and h2 (mx-accent); on light backgrounds it adds mx-accent-dark,
 *    a deeper gold that stays readable on cream (4.3:1 or more).
 * To undo: remove the headings.css and headings.js lines from the pages.
 */
h1, h2, h1 *, h2 * { letter-spacing: 0.01em !important; }

.mx-accent {
  background: linear-gradient(110deg, #f59e0b, #fbbf24, #fb923c, #f59e0b) !important;
  background-size: 300% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #fbbf24 !important;
  animation: mxAccentShift 5s linear infinite !important;
}
.mx-accent.mx-accent-dark {
  background-image: linear-gradient(110deg, #b45309, #c2410c, #a16207, #b45309) !important;
  color: #b45309 !important;
}
@keyframes mxAccentShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .mx-accent { animation: none !important; } }

/*
 * The "machinence" wordmark in the header bar (always dark) is light on
 * every page; some pages' own styles made it black or dark grey (11 Oct
 * 2026). headings.js does the same for the footer wordmark when the footer
 * is dark.
 */
.mxui .mx-hdr-bar .mx-brand .mx-word { color: #f4f1ff !important; }
.mxui .mx-brand .mx-word.mx-word-light { color: #f4f1ff !important; }