@layer components {
  .outro-cta {
    background: var(--c-volt);
    color: var(--c-on-volt);
  }

  .outro-cta__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
  }

  .outro-cta__title {
    max-width: 20ch;
  }

  .outro-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .site-footer {
    background: var(--c-dark);
    color: var(--c-on-dark-soft);
  }

  .site-footer__top {
    display: grid;
    gap: 2.5rem;
    padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  }

  @media (min-width: 56rem) {
    .site-footer__top {
      grid-template-columns: 1.3fr 0.7fr 0.7fr 0.9fr;
    }
  }

  .site-footer .logotype {
    color: var(--c-on-dark);
  }

  .site-footer__lead {
    margin-top: 1rem;
    max-width: 32ch;
    font-size: var(--fs-small);
  }

  .site-footer__heading {
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: var(--fs-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-on-dark);
    margin-bottom: 0.9rem;
  }

  .site-footer__list {
    display: grid;
    gap: 0.6rem;
    font-size: var(--fs-small);
  }

  .site-footer__list a {
    transition: color var(--dur-fast) var(--ease-out);
  }

  .site-footer__list a:hover,
  .site-footer__list a:focus-visible {
    color: var(--c-volt);
  }

  .site-footer__bottom {
    border-top: 1px dashed hsl(0 0% 100% / 0.16);
    padding-block: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    justify-content: space-between;
    font-size: var(--fs-small);
  }
}