/* CTA band: the last call of the home page on the inverse ground, the ask
   beside the founder. Two columns while both fit, stacked on narrow screens.
   Contrast on bg-inverse: text-inverse (heading, contact line) 17.93 light,
   15.84 dark; text-inverse-muted (the sentence, the founder line) 12.74
   light, 7.62 dark; accent-on-inverse (links, portrait ring) 8.96 light,
   7.64 dark. The button: bg-inverse text on accent-on-inverse 8.96 light,
   7.64 dark; on hover bg-inverse on text-inverse 17.93 light, 15.84 dark. */

.cta-band {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-l) var(--space-xl);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xl) clamp(var(--space-m), 4vw, var(--space-xl));
  border-radius: var(--radius-lg);
  background-color: var(--bg-inverse);
  color: var(--text-inverse);
}

.cta-band__call {
  flex: 999 1 26rem;
  min-inline-size: 0;
}

.cta-band__lead {
  max-inline-size: var(--measure);
  color: var(--text-inverse-muted);
}

.cta-band__founder {
  display: flex;
  flex: 1 1 16rem;
  gap: var(--space-s);
  align-items: center;
}

.cta-band__portrait {
  flex: none;
  inline-size: 5.25rem;
  block-size: 5.25rem;
  object-fit: cover;
  border: 2px solid var(--accent-on-inverse);
  border-radius: var(--radius-pill);
}

.cta-band__founder .cta-band__lead {
  font-size: var(--step--1);
}

.cta-band a:not(.button) {
  color: var(--accent-on-inverse);
}

.cta-band a:not(.button):hover {
  color: var(--text-inverse);
}

.cta-band .button {
  background-color: var(--accent-on-inverse);
  color: var(--bg-inverse);
}

.cta-band .button:hover {
  background-color: var(--text-inverse);
  color: var(--bg-inverse);
}