/* Servicing Provider Eligibility answers, shared by /updates, /servicing-provider-eligibility
   and the demo. */
/* Three answers from Servicing Provider Eligibility, one card each: the
   verdict as a pill in its verdict colour, the request in one line (the item
   in mono, then the provider's specialty), the answer's first sentence as
   the line to read, and the rule it rests on beneath in stone. The card
   that says no shows the provider's specialties beside the ones the item
   needs, as chips, so the gap is the picture. Three across when the body
   allows, one column on a phone. */
.answers {
  max-inline-size: 45.5rem;
  margin: var(--space-8) 0 var(--space-16);
  font-size: var(--type-body-s);
}
.answers figcaption { color: var(--color-stone-60); line-height: var(--lh-label); margin-block-end: var(--space-12); }
.answer-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-12);
}
.answer {
  --v: var(--verdict-eligible);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-20);
  background: var(--color-paper);
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-default);
}
.answer.is-no { --v: var(--verdict-not-eligible); }
.answer-verdict {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: 0.25rem 0.75rem 0.25rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--v) 10%, transparent);
  color: var(--v);
  font-size: var(--type-label-s);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  line-height: 1.6;
}
.answer-verdict::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--v); }
.answer-request { margin: 0; font-size: var(--type-label-m); color: var(--color-stone-60); line-height: 1.5; }
.answer-request b { font-family: var(--font-mono); font-weight: 600; color: var(--color-midnight); font-feature-settings: "tnum" 1; }
.answer-text { margin: 0; font-size: var(--type-body-m); line-height: 1.5; color: var(--color-midnight); }
.answer-source { margin: auto 0 0; color: var(--color-stone-60); line-height: 1.6; }
.answer-gap { margin: 0; display: grid; gap: var(--space-8); }
.answer-gap > div { display: grid; gap: var(--space-4); }
.answer-gap dt { font-size: var(--type-label-s); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--color-stone-60); }
.answer-gap dd { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-4); }
.answer-chip { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--color-stone-05); border: 1px solid var(--color-stone-20); color: var(--color-stone-90); font-size: var(--type-label-m); line-height: 1.6; }
.answer-gap .is-needed .answer-chip { background: color-mix(in srgb, var(--color-royal) 8%, transparent); border-color: color-mix(in srgb, var(--color-royal) 20%, transparent); color: var(--color-navy); }