/* Benefits — the seven approved claims as a single column, with the claim
   nearest the centre of the viewport carrying the focus.
   Tokens only, per tokens.css: no literal colours. */

.bnf__head {
  max-width: var(--measure);
  margin-bottom: var(--sp-9);
}

.bnf__head > * + * {
  margin-top: var(--sp-4);
}

.bnf__figure {
  margin: 0 auto var(--sp-8);
  max-width: 22rem;
}

.bnf__figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- the claims --------------------------------------------------------
   One column. Seven rows read down the page in the client's approved order,
   which two columns could not do — a two-column grid reads across, so the
   order was only ever implied. */

.bnf__list {
  list-style: none;
  /* Left-aligned, not centred: the list shares the heading's left edge so the
     section reads as one column of content rather than a centred block that
     happens to sit under a left-aligned heading. max-width still caps the
     measure on a wide screen. */
  margin: 0;
  padding: 0;
  max-width: 46rem;
  display: flex;
  flex-direction: column;
}

/* Icon in its own gutter, text beside it, so the text keeps one left edge all
   the way down regardless of icon width. */
.bnf__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--rule);

  /* The focused claim grows from its left edge — scaling from the centre
     would slide the text sideways as it grew, which is what makes this kind
     of effect feel unsteady. */
  transform-origin: left center;
  transition:
    transform var(--dur, 320ms) var(--ease-out, ease),
    opacity var(--dur, 320ms) var(--ease-out, ease),
    border-color var(--dur, 320ms) var(--ease-out, ease);

  /* 0.75 is a contrast floor, not a taste call. Measured against the dark
     ground: the claim composites to 5.2:1 and the uppercase label — small text,
     so it needs the full 4.5:1 — to 4.69:1. At 0.7 the label drops to 4.25 and
     at 0.45 (where this started) the claim was 2.68, well into failing. The
     focused state does its work through colour, scale and the brighter rule
     instead of by pushing the resting state further down. */
  opacity: 0.75;
}

.bnf__item:last-child {
  border-bottom: 1px solid var(--rule);
}

.bnf__item.is-focus {
  opacity: 1;
  transform: scale(1.06);
  border-color: var(--rule-strong);
}

/* The icon spans the whole text block and centres on it (QA-05). Placed in
   row 1 only, it centred on the title alone and sat high. `span 3` covers
   name + claim + study link; without a study link the extra implicit row is
   empty and collapses to 0. (`1 / -1` would not work: -1 counts explicit
   rows only, and this grid has none.) */
.bnf__icon {
  display: block;
  grid-row: 1 / span 3;
  align-self: center;
  color: var(--gold-line);
  transition: transform var(--dur, 320ms) var(--ease-out, ease);
}

.bnf__icon .kicon {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
}

.bnf__item.is-focus .bnf__icon {
  transform: scale(1.08);
}

.bnf__name,
.bnf__claim,
.bnf__study {
  grid-column: 2;
}

.bnf__name {
  margin: 0;
  text-transform: uppercase;
  line-height: var(--leading-snug);
}

.bnf__claim {
  margin: var(--sp-2) 0 0;
  color: var(--ink-muted);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
}

.bnf__item.is-focus .bnf__claim {
  color: var(--ink);
}

.bnf__study {
  margin: var(--sp-3) 0 0;
  justify-self: start;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--gold-line);
}

.bnf__study:hover {
  color: var(--gold-text);
}

/* A claim with no icon keeps its text on the same left edge as the rest. */
.bnf__item:not(:has(.bnf__icon)) :is(.bnf__name, .bnf__claim, .bnf__study) {
  grid-column: 1 / -1;
}

/* ---- tail -------------------------------------------------------------- */

/* Disclaimer tight to the list it qualifies, then the call to action. */
.bnf__disclaimer {
  margin-top: var(--sp-5);
  max-width: var(--measure);
}

.bnf__cta {
  margin-top: var(--sp-7);
}

/* ---- narrow ------------------------------------------------------------ */

@media (max-width: 48rem) {
  .bnf__item {
    column-gap: var(--sp-4);
    padding: var(--sp-5) 0;
  }

  /* A 6% scale on a narrow screen pushes the claim against the right edge,
     so the focused state leans on contrast alone here. */
  .bnf__item.is-focus {
    transform: none;
  }

  .bnf__icon .kicon {
    width: 1.875rem;
    height: 1.875rem;
  }

  .bnf__claim {
    font-size: var(--step-0);
  }
}

/* Reduced motion: no scaling, and every claim at full weight. The dimmed
   resting state is part of the effect, not the design, so it goes too — the
   JS also stops applying is-focus. */
@media (prefers-reduced-motion: reduce) {
  .bnf__item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .bnf__item.is-focus {
    transform: none;
  }

  .bnf__icon {
    transition: none;
  }
}