/* ============================================================
   Marketing Well Core — Base layer
   Element defaults + a few house utility classes that the
   specimen cards, components and UI kits all lean on.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--text);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--brand-strong);
  font-weight: var(--weight-medium);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  margin: 0;
  text-wrap: balance;
}
h1 em, h2 em, h3 em { font-style: italic; color: var(--accent); }

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }

/* ---- Layout helpers ---- */
.mw-wrap   { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.mw-wrap--wide { max-width: var(--container-wide); }
.mw-section{ padding: var(--section-y) 0; }
.mw-center { text-align: center; }
.mw-measure{ max-width: var(--container-text); }

/* ---- Display headings ---- */
.mw-display    { font-family: var(--font-display); font-weight: var(--weight-medium); line-height: var(--leading-display); letter-spacing: var(--tracking-display); color: var(--brand-strong); }
.mw-display-xl { font-size: var(--display-xl); }
.mw-display-lg { font-size: var(--display-lg); }
.mw-display-md { font-size: var(--display-md); }
.mw-display-sm { font-size: var(--display-sm); }

/* ---- Eyebrow kicker (the signature element) ---- */
.mw-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--eyebrow-weight);
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--eyebrow);
  margin: 0;
}

/* ---- Lead paragraph ---- */
.mw-lead { color: var(--text-soft); font-size: var(--text-xl); line-height: var(--leading-relaxed); }

/* ---- Marker highlight + flourish divider ---- */
.mw-mark {
  background: linear-gradient(104deg,
     transparent 0.4%, color-mix(in srgb, var(--accent) 42%, transparent) 1.4%,
     color-mix(in srgb, var(--accent) 55%, transparent) 96%, transparent 98.5%);
  padding: .04em .18em; border-radius: 3px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}