@layer components {
  html:has(.ec-cover:not([hidden])) {
    overflow: hidden;
  }

  .ec-cover {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: var(--ec-bg-white);
  }

  .ec-cover[hidden] {
    display: none;
  }

  .ec-cover__chrome {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding: var(--ec-space-16) var(--ec-space-40);
    box-shadow: 0 1px 8px rgb(0 0 0 / 0.15);
  }

  .ec-cover__logo img {
    display: block;
    inline-size: auto;
    block-size: 38px;
  }

  .ec-cover__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  }

  .ec-limit {
    inline-size: min(27.5rem, 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-limit[open] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ec-space-16);
  }

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

  .ec-limit__close {
    position: absolute;
    inset-block-start: var(--ec-space-8);
    inset-inline-end: var(--ec-space-8);
    display: flex;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ec-text-primary);
    cursor: pointer;
  }

  .ec-limit__text-block {
    display: flex;
    flex-direction: column;
    gap: var(--ec-space-4);
  }

  .ec-limit__title {
    margin: 0;
    color: var(--ec-text-primary);
    font-size: var(--ec-size-card-title);
    font-weight: var(--ec-weight-extrabold);
    line-height: var(--ec-leading-title);
  }

  .ec-limit__text {
    margin: 0;
    color: var(--ec-text-secondary);
    font-size: var(--ec-size-sm);
    line-height: var(--ec-leading-default);
  }

  .ec-limit__promises {
    justify-content: center;
    padding-block: 6px;
  }

  .ec-limit__promises .ec-chip {
    font-weight: var(--ec-weight-regular);
  }

  .ec-limit__promises .ec-chip__icon {
    --chip-icon-bg: var(--ec-bg-accent-light);
  }

  @media (width < 60rem) {
    .ec-cover__chrome {
      padding-inline: var(--ec-section-px-sm);
    }

    .ec-limit__cta {
      align-self: stretch;
    }
  }
}