@layer components {
  .ec-contact {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--ec-space-16);
    padding: var(--ec-space-24);
    border: 2px solid var(--ec-stroke-accent);
    border-radius: var(--ec-radius-xl);
    background: var(--ec-bg-white);
  }

  .ec-contact__avatars {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: var(--ec-space-24);
    display: flex;
    translate: 0 -50%;
  }

  .ec-contact__avatars img {
    border: 2px solid var(--ec-bg-white);
    border-radius: var(--ec-radius-full);
    background: var(--ec-bg-accent);
  }

  .ec-contact__avatars img + img {
    margin-inline-start: calc(var(--ec-space-12) * -1);
  }

  .ec-contact__title {
    color: var(--ec-text-primary);
    font-size: var(--ec-size-card-title-lg);
    font-weight: var(--ec-weight-extrabold);
    line-height: var(--ec-leading-title);
    text-align: center;
  }

  .ec-contact__accent {
    color: var(--ec-text-accent);
  }

  .ec-contact__lede {
    color: var(--ec-text-secondary);
    font-size: var(--ec-size-sm);
    line-height: var(--ec-leading-default);
    text-align: center;
  }

  .ec-contact > .ec-btn {
    align-self: center;
  }

  .ec-contact__hint {
    color: var(--ec-text-secondary);
    font-size: var(--ec-size-xs);
    line-height: var(--ec-leading-default);
  }

  .ec-contact__alert,
  .ec-contact__status {
    color: var(--ec-text-accent);
    font-size: var(--ec-size-sm);
    line-height: var(--ec-leading-default);
  }

  .ec-contact__status:empty {
    display: none;
  }

  .ec-contact__captcha:empty {
    display: none;
  }

  .ec-contact__legal {
    color: var(--ec-text-secondary);
    text-align: center;
    font-size: var(--ec-size-xs);
    line-height: var(--ec-leading-default);
  }

  .ec-contact__required {
    color: var(--ec-text-primary);
    font-size: var(--ec-size-label);
    font-weight: var(--ec-weight-medium);
    letter-spacing: var(--ec-tracking-label);
    line-height: var(--ec-leading-default);
    text-transform: uppercase;
  }

  .ec-contact__required-mark {
    color: var(--ec-text-accent);
  }

  .ec-contact--done {
    align-items: center;
    text-align: center;
  }

  .ec-contact--done .ec-contact__text {
    display: flex;
    flex-direction: column;
    gap: var(--ec-space-4);
  }

  .ec-contact__seal {
    display: grid;
    place-content: center;
    inline-size: 48px;
    block-size: 48px;
    border-radius: var(--ec-radius-full);
    background: var(--ec-bg-accent-light);
    color: var(--ec-text-accent);
  }

  .ec-confirm {
    inline-size: min(439px, 100% - 2 * var(--ec-space-16));
    padding: var(--ec-space-24);
    border: 0;
    border-radius: var(--ec-radius-xl);
    background: var(--ec-bg-white);
    color: var(--ec-text-primary);
    text-align: center;
  }

  .ec-confirm[open] {
    display: flex;
    flex-direction: column;
    gap: var(--ec-space-16);
    align-items: center;
  }

  .ec-confirm::backdrop {
    background: rgb(58 58 58 / 0.7);
  }

  .ec-confirm__seal {
    display: grid;
    place-content: center;
    inline-size: 48px;
    block-size: 48px;
    border-radius: var(--ec-radius-full);
    background: var(--ec-bg-accent-light);
    color: var(--ec-text-accent);
  }

  .ec-confirm__title {
    margin: 0;
    font-size: var(--ec-size-card-title);
    font-weight: var(--ec-weight-bold);
    line-height: var(--ec-leading-title);
  }

  .ec-confirm__text {
    margin: 0;
    font-size: var(--ec-size-sm);
    line-height: var(--ec-leading-default);
  }
}