@layer components {
  .ec-footer {
    --footer-px: var(--ec-space-16);
    --footer-logo-w: 228px;
    --footer-tagline: color-mix(in srgb, var(--ec-text-inverse) 80%, transparent);
    --footer-muted: color-mix(in srgb, var(--ec-text-inverse) 50%, transparent);
    --footer-divider: color-mix(in srgb, var(--ec-stroke-default) 50%, transparent);

    display: flex;
    flex-direction: column;
    gap: var(--ec-space-24);
    padding-block: var(--ec-section-py-sm);
    padding-inline: var(--footer-px);
    background: var(--ec-bg-dark);
  }

  .ec-footer > * {
    max-inline-size: var(--ec-page-max);
    margin-inline: auto;
    inline-size: 100%;
  }

  .ec-footer__top {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ec-space-24);
    align-items: flex-start;
    justify-content: space-between;
    padding-block-end: var(--ec-space-24);
    border-block-end: 1px solid var(--footer-divider);
  }

  .ec-footer__logo {
    flex-shrink: 0;
    display: block;
  }

  .ec-footer__logo img {
    inline-size: var(--footer-logo-w);
    block-size: auto;
  }

  .ec-footer__tagline {
    color: var(--footer-tagline);
    font-size: var(--ec-size-sm);
    line-height: var(--ec-leading-default);
  }

  .ec-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ec-space-16) var(--ec-space-24);
    align-items: baseline;
    justify-content: space-between;
    color: var(--footer-muted);
    font-size: var(--ec-size-xs);
    line-height: var(--ec-leading-title);
  }

  .ec-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ec-space-16);
    align-items: baseline;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ec-footer__links li + li::before {
    content: "•";
    margin-inline-end: var(--ec-space-16);
  }

  .ec-footer__links a {
    color: inherit;
    text-decoration: none;
    transition: color var(--ec-transition);
  }

  .ec-footer__links a:hover {
    color: var(--ec-text-inverse);
    text-decoration: underline;
  }

  .ec-footer-sticky {
    --footer-sticky-z: 100;

    position: fixed;
    z-index: var(--footer-sticky-z);
    inset-block-end: 0;
    inset-inline: 0;
    display: flex;
    padding-block: var(--ec-space-12);
    padding-block-end: calc(var(--ec-space-12) + env(safe-area-inset-bottom));
    padding-inline: var(--ec-space-16);
    background: var(--ec-bg-dark);
  }

  .ec-footer-sticky__cta {
    inline-size: 100%;
  }

  body:has(.ec-footer-sticky) {
    padding-block-end: calc(64px + env(safe-area-inset-bottom));
  }

  @media (width >= 60rem) {
    .ec-footer {
      --footer-px: var(--ec-section-px-lg);
    }

    .ec-footer-sticky {
      display: none;
    }

    body:has(.ec-footer-sticky) {
      padding-block-end: 0;
    }
  }
}