/* ==========================================================================
   Call To Action Section
   Block: .call-to-action-band / .call-to-action-band-section
   --------------------------------------------------------------------------
   The band that closes a page. Dark, so it reads as the end of the document
   and joins visually to the footer below it.
   ========================================================================== */

.call-to-action-band {
  position: relative;
  overflow: hidden;
  background-image: var(--gradient-ink);
}

.call-to-action-band-section--default {
  background-image: none;
  background-color: var(--color-background);
}

.call-to-action-band-section--soft {
  background-image: none;
  background-color: var(--color-background-sunken);
}

.call-to-action-band__glow {
  position: absolute;
  inset-block-start: -30%;
  inset-inline-start: 50%;
  width: min(40rem, 90vw);
  height: min(40rem, 90vw);
  background: radial-gradient(circle, var(--color-brand-indigo), transparent 66%);
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.4;
  transform: translateX(-50%);
  pointer-events: none;
}

.call-to-action-band__inner {
  position: relative;
  z-index: var(--z-index-base);
  display: grid;
  gap: var(--space-medium);
  justify-items: start;
  max-width: 44rem;
}

.call-to-action-band__title {
  font-size: var(--font-size-heading-2);
}

.call-to-action-band__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-x-small) var(--space-medium);
  padding: 0;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  list-style: none;
}

.call-to-action-band__list li {
  display: flex;
  gap: 0.4375rem;
  align-items: center;
}

.call-to-action-band__list svg {
  width: 1rem;
  height: 1rem;
  color: var(--color-success-bright);
}

/* On a light variant the bright green tick is the wrong weight against white. */
.call-to-action-band-section--default .call-to-action-band__list svg,
.call-to-action-band-section--soft .call-to-action-band__list svg {
  color: var(--color-success);
}