@layer modules {
  .email-cta {
    --accent-color: #3e2b99;
    background-color: #f0f1f5;
    padding-block: 2rem;
    accent-color: var(--accent-color);
    position: relative;
    &:has(protected-form:not(:defined)){ outline: 5px solid red; }
    h2 {
      margin: .2em 0 .8em;
      text-align: center;
      font-size: clamp(2rem, 1vw + 1.7rem, 2.5rem);
    }
    &.standalone {
      border-radius: 1rem;
      padding: clamp(1rem, 3.6vw + .2rem, 2rem);
      h2 { font-size: clamp(1.6rem, 1.4vw + 1.3rem, 2rem); }
    }
    & > p {
      max-width: 500px;
      margin-inline: auto;
      text-align: center;
    }
    form, protected-form {
      display: block;
      max-width: 45rem;
      margin: 0 auto;
      transition: opacity .3s, visibility 0s;
      &[hidden]{
        visibility: hidden;
        opacity: 0;
        transition: opacity .3s, visibility 0s .3s;
      }
      &.sending {
        pointer-events: none;
        opacity: .7;
      }
    }
    fieldset {
      display: flex;
      height: 4.5rem;
      padding: 0;
      margin: 2rem 0 0;
      border: none;
      input[type=email]{
        flex: 1 0 0;
        width: 0;
        min-width: 0;
        padding-inline: 1rem;
        border: none;
        border-radius: .5rem 0 0 .5rem;
        outline: none;
        font-size: 1.1rem;
      }
      button {
        width: max-content;
        padding: 0 1rem;
        color: white;
        background-color: var(--accent-color);
        border: none;
        border-radius: 0 .5rem .5rem 0;
        font-size: 1.1rem;
        cursor: pointer;
        &:empty {
          width: 4.5rem;
          font-size: 1.6rem;
          &::after { content: "➔"; }
        }
        &:hover { opacity: .8; }
      }
    }
    .email-cta-fail {
      margin: .4rem 0 0 1rem
    }
    .email-cta-consent {
      display: block;
      margin: 1rem 0 0 0;
      letter-spacing: -.06ch;
      font-size: .85rem;
      a {
        color: inherit;
      }
    }
    input[type=checkbox]{
      width: 1.2rem;
      height: 1.2rem;
      margin: 0 .3rem 0 0;
      vertical-align: -.2em;
    }
    .email-cta-success {
      position: absolute;
      inset: auto 0 4rem;
      text-align: center;
    }
  }
}