@layer components {
  .ec-final-cta {
    --final-cta-title-size-min: 1.75rem;
    --final-cta-row-gap: var(--ec-space-40);
    --final-cta-chip-icon-bg: rgb(255 255 255 / 0.08);

    background: var(--ec-bg-mid);
    color: var(--ec-text-inverse);
  }

  .ec-final-cta__inner {
    display: grid;
    gap: var(--final-cta-row-gap);
    align-items: center;
  }

  .ec-final-cta__content {
    display: flex;
    flex-direction: column;
    gap: var(--ec-space-12);
    align-items: start;
  }

  .ec-final-cta__title {
    font-size: clamp(var(--final-cta-title-size-min), 1.4rem + 1.5dvw, var(--ec-size-h3));
    font-weight: var(--ec-weight-black);
    line-height: var(--ec-leading-title-lg);
  }

  .ec-final-cta__title-accent {
    display: block;
    color: var(--ec-text-accent);
  }

  .ec-final-cta__lead {
    font-size: var(--ec-size-lg);
    line-height: var(--ec-leading-body-lg);
  }

  .ec-final-cta__advice {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ec-space-8);
    align-items: center;
    padding-block-start: var(--ec-space-8);
    font-size: var(--ec-size-sm);
    font-weight: var(--ec-weight-bold);
    line-height: var(--ec-leading-default);
  }

  .ec-final-cta__advice .ec-link {
    min-block-size: 24px;
  }

  .ec-final-cta__chips {
    --chip-icon-bg: var(--final-cta-chip-icon-bg);

    gap: var(--ec-space-16);
  }

  .ec-final-cta__card {
    padding: var(--ec-space-4);
    border-radius: var(--ec-radius-xl);
    background: var(--ec-bg-accent-light);
  }

  .ec-final-cta__chips--card {
    --chip-icon-bg: var(--ec-bg-white);

    gap: var(--ec-space-4) var(--ec-space-16);
    justify-content: center;
    padding-block: var(--ec-space-6);
    color: var(--ec-text-primary);
  }

  .ec-final-cta__upload .ec-upload {
    --upload-bg: var(--ec-bg-mid);
  }

  @media (width >= 60rem) {
    .ec-final-cta__inner {
      grid-template-columns: minmax(0, 500px) minmax(0, 499px);
      justify-content: space-between;
    }
  }
}