/**
 * Answer first.
 *
 * The tinted block itself is `.answer-first` in pages.css §4 and is NOT
 * repeated here. The label composes `.eyebrow` (base.css §3) and the jump
 * chips compose `.filter-pill` (pages.css §10) – the mock-up's `.p-jump a`
 * re-typed that pill rule value for value, so composing it is what stops the
 * design system forking in two.
 *
 * A note on the names below: the section id is `answer-first`, so AGENTS.md §2
 * requires every class this file introduces to be prefixed `answer-first`. That
 * puts them in the same visual namespace as the kit's own `.answer-first`
 * block, which is unavoidable and safe – the kit ports verbatim and defines no
 * elements under it.
 */

/* why-finas.html `.p-answer .eyebrow`. The label doubles as the section's
   <h2>; `.eyebrow` already flattens the heading's font, size and colour. */
.answer-first__label {
  margin-block-end: var(--s-3);
}

/* Onward links. team.html `.p-answer-links`; industries.html's single link is
   the same row with one item in it. `.link-cta` already carries its own 44px
   tap target, so nothing is repeated here. */
.answer-first__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  margin-block-start: var(--s-4);
}

/* In-page jump chips. why-finas.html `.p-jump`. */
.answer-first__jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-block-start: var(--s-4);
}

/* Everything visual is `.filter-pill`. This adds only what a pill made of an
   anchor rather than a button needs: a box to lay out in, and the 44px tap
   target. 44px is the WCAG floor rather than a design value, and it is the
   same literal the kit's own `.link-cta` carries – there is no token for it. */
.answer-first__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
}

/* The optional typed marker, given the same display-font treatment every other
   marker in this design gets. */
.answer-first__marker {
  font-family: var(--display);
  font-weight: 800;
  color: var(--blue);
}