/* The homepage's main structure (founder, via the owner, 2026-10-12): "The Big Problem", "Our Solution" and "Our Results"
   must be "very big and obvious, the main structure and the most obvious kind of flow of the website". Each label is now
   its section's h2, numbered 1, 2, 3 so a skimmer reads Problem, Solution, Results in order; the former h2 sits under it
   as the supporting headline (a <p> that keeps its id). Replaces the small eyebrow labels of 2026-10-08.
   Sizes: 44px on phones, growing with the viewport (7vw) to 96px from 1372px wide. */
.section-label {
  --label-size: clamp(44px, 7vw, 96px);
  display: flex;
  align-items: flex-start;
  gap: calc(var(--label-size) * .2);
  margin: 0 0 clamp(16px, 1.8vw, 26px);
  font-size: var(--label-size);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -.055em;
  color: var(--wine);
}
/* The step number: a burgundy disc centred on the first line, so a two-line label on a phone keeps a hanging indent. */
.section-step {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--label-size) * .68);
  height: calc(var(--label-size) * .68);
  margin-top: calc(var(--label-size) * .16);
  border-radius: 50%;
  background: var(--wine);
  color: #fff;
  font-size: calc(var(--label-size) * .4);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.section-headline {
  margin: 0;
  max-width: 17em;
  font-size: clamp(28px, 3.1vw, 46px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.045em;
  color: var(--aelo-blue, #092e3e);
  text-wrap: balance;
}
/* The headline sits right under the label; the intro beside it starts at the same line. */
.section-label + .section-heading { align-items: flex-start; }
/* "Our Results" keeps its oversized "Up to 90%" figure (results.css); only the block's own spacing is reset here. */
.results-headline { max-width: none; font-size: inherit; letter-spacing: normal; }

@media (max-width: 760px) {
  .section-label { margin-bottom: 14px; }
}