/* =============================================================================
   mod-intro — the emotional hook.

   Composition follows Formula's `mod_intro`: a centred mark, a centred
   split-colour H2, then a column of left-ranged paragraphs narrower than the
   container and centred inside it. Formula's copy column is ~920px of a
   1440px viewport; here that is `--measure`, which is the same idea expressed
   in characters rather than pixels.

   The split colour uses --accent, which is 5.67:1 on --ground and 5.10:1 on
   --alt. Sage is NOT available for this — 2.0:1 on a light ground — which is
   why the mark above the heading is the only sage in the block, and it is a
   decorative stroke carrying no meaning.
   ============================================================================= */

/* No background or colour set here on purpose. The block inherits the page
   ground, which leaves `band--alt` / `band--sage` / `band--dark` free to work
   on the <section> — a background declared here would silently outrank them
   on source order and the modifier would look broken. */


.b-intro__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  text-align: center;
}

/* --- the mark ------------------------------------------------------------- */

/* A hairline, in the same register as `.rule` in the token file — the only
   dimension in this block not taken from the spacing scale, because the scale
   starts at 4px and a 4px bar reads as a button, not a mark. */
.b-intro__mark {
  display: block;
  width: var(--sp-10);
  height: 2px;
  background: var(--sage);
}

/* --- heading -------------------------------------------------------------- */

.b-intro__eyebrow { color: var(--accent); }

.b-intro__title {
  max-width: var(--measure);
  margin: 0;
}

/* The whole point of the module. Structural, so the copy can change without
   anyone touching CSS — and so the break can move mid-line per page. */
.b-intro__accent { color: var(--accent); }

/* --- body ----------------------------------------------------------------- */

.b-intro__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  width: 100%;
  max-width: var(--measure);
  margin-block-start: var(--sp-2);
  text-align: start;
}

/* --- left variant ---------------------------------------------------------- */

.b-intro--left .b-intro__inner {
  align-items: flex-start;
  text-align: start;
}

/* --- slots ---------------------------------------------------------------- */

.b-intro .slot {
  color: var(--soft);
  border: 1px dashed var(--sage);
  border-radius: var(--radius);
  margin: 0;
}

.b-intro .slot__tag { color: var(--accent); }

.b-intro .slot--chip {
  display: inline-block;
  padding: var(--sp-1) var(--sp-2);
}

/* Inside the H2 the slots must not inherit display tracking at label size. */
.b-intro .slot--line {
  display: inline-block;
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--t-small);
  line-height: var(--lh-small);
  letter-spacing: normal;
}

.b-intro .b-intro__accent.slot--line {
  color: var(--accent);
  border-color: var(--accent);
}

.b-intro .slot--block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  text-align: start;
}

.b-intro .slot__hint { color: var(--soft); }

.b-intro .slot__lines {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.b-intro .slot__lines i {
  display: block;
  height: var(--sp-2);
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}
.b-intro .slot__lines i:last-child { width: 54%; }