/* Body In Balance — overrides for the designed sales page.
   Loads after the engine's own stylesheet. Two desktop layout fixes. */

/* 1. The gold highlight overlapped the descenders of the line above.
      An inline <mark> draws its background from the font's content box,
      which here is 82px for a 58px font — taller than any sensible line
      height. Raising line-height alone would need about 1.42 and would make
      the hero very airy, so instead the highlight is painted as a gradient
      sized to the text. It sits inside the line box and cannot reach the
      line above. box-decoration-break keeps it correct if it ever wraps. */
.dp h1 mark,
.dp h2 mark {
  background-color: transparent;
  background-image: linear-gradient(rgb(236, 213, 174), rgb(236, 213, 174));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 0.98em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* A little extra air in the headline, now that it is not fighting the
   highlight. */
.dp h1,
.dp h2 {
  line-height: 1.28;
}

/* 2. Section labels stranded at the far left on wide screens.
      .dp-eyebrow is display:table with no auto margins, so it hugs the left
      of its section while the heading and content below it are centred.

      These four sections have no max-width at all (.dp-sec carries none of
      its own; .dp-wide and .dp-narrow add one), so they run the full window
      and the label ends up very far from the content. Written without :has()
      so this still works in older browsers. */
.dp-sec:not(.dp-wide):not(.dp-narrow) > .dp-eyebrow,
.dp-path > .dp-eyebrow {
  margin-left: auto;
  margin-right: auto;
}

/* The constrained sections have the same mismatch, more mildly: What You Get,
   How It Works and Bonuses all centre their heading but not their label.
   The story section is deliberately excluded — its body text is left-aligned
   in a two-column layout and it has no centred heading, so its label belongs
   on the left. Keying on "has a heading" is what tells them apart. */
.dp-sec:has(> h2) > .dp-eyebrow {
  margin-left: auto;
  margin-right: auto;
}