/**
 * CTA band.
 *
 * `.cta-band`, `.cta-band__inner` and `.cta-band__actions` are owned by
 * pages.css §13 and are not repeated or redefined here – including the two-cell
 * grid and its collapse at 860px, which is what lets the actions become the
 * second cell whenever there is no card beside them.
 *
 * What this file adds is the optional aside, which the kit has no equivalent
 * for: the employer card on About (`.p-emp`) and the verification checklist on
 * Why Choose FINAS (`.p-check`) are the same object with different contents, so
 * they port as one prefixed block rather than two.
 *
 * Every translucent white here is an `--on-dark-*` token. The mock-ups wrote
 * them as rgba() literals at four slightly different opacities; the tokens are
 * what stops a fifth appearing.
 */

/* When a card takes the second cell the actions sit under the copy instead,
   and need the same separation the hero gives its own action row. The mock-up
   leaves them flush against the paragraph, which reads as a bug rather than a
   decision. */
.cta-band__actions--inline {
  margin-block-start: var(--s-5);
}

/* about.html `.p-cta-note` – the quiet "questions first?" line under the
   actions. */
.cta-band__note {
  margin-block-start: var(--s-3);
  font-size: var(--text-s);
  color: var(--on-dark-muted);
}
.cta-band__note-link {
  color: var(--white);
  font-weight: 700;
  text-decoration: underline;
}

/* The optional card. about.html `.p-emp`, why-finas.html `.p-check`. */
.cta-band__aside {
  background: var(--on-dark-surface-soft);
  border: 1px solid var(--on-dark-hairline);
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  align-items: flex-start;
}

.cta-band__aside-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Gold on navy clears AA comfortably; the light-ground caution that makes
     `--gold-deep` exist does not apply here. */
  color: var(--gold);
}

.cta-band__aside h3 {
  color: var(--white);
  font-size: var(--text-xl);
}

.cta-band__aside p {
  font-size: var(--text-s);
}

.cta-band__list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.cta-band__list li {
  display: flex;
  gap: 0.6em;
  align-items: flex-start;
  font-size: var(--text-s);
  color: var(--on-dark);
}
/* 17px is the mock-up's own tick size – a shade smaller than the 18px an icon
   beside 15px text would otherwise take, and no token carries it. */
.cta-band__list li svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--gold);
  margin-block-start: 0.2em;
}