Embedded Form

#mc_embed_signup form {
  .mc-field-group > * + * {
    --flow: var(--space-3xs);
    margin-top: var(--flow);
  }

  h2 {
    display: none;
  }

  label {
    display: block;
  }

  input[type="text"],
  input[type="email"] {
    border: solid 2px var(--light-grey);
    font-size: var(--step-0);
    padding: var(--space-xs);
  }

  label.checkbox.subfield {
    align-items: center;
    display: grid !important;
    grid-template-columns: 1em auto;
    gap: var(--space-2xs);
  }

  label.checkbox.subfield span {
    font-size: var(--step-0);
    pointer-events: none;
  }

  /* https://moderncss.dev/pure-css-custom-checkbox-style/ */
  label.checkbox.subfield input[type="checkbox"] {
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    appearance: none;
    /* For iOS < 15 to remove gradient background */
    background-color: #fff;
    /* Not removed via appearance */
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1.15em;
    height: 1.15em;
    border: 0.15em solid var(--light-grey);
    border-radius: 0.15em;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;

    &::before {
      content: "";
      width: 0.65em;
      height: 0.65em;
      transform: scale(0);
      transition: 120ms transform ease-in-out;
      box-shadow: inset 1em 1em currentColor;
      transform-origin: bottom left;
      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    }

    &:focus {
      outline: max(2px, 0.15em) solid currentColor;
      outline-offset: max(2px, 0.15em);
    }

    &:checked {
      &::before {
        transform: scale(1);
      }
    }
  }

  input[type="submit"] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--dark);
    outline: none;
    border: none;
    color: var(--white);
    font-size: var(--step--1);
    font-weight: 700;
    padding: 1rem 2rem;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    min-height: 54px;
    transition: color 0.2s var(--confident-ease);
    transition-property: background-color, color, box-shadow;

    &:hover {
      background-color: var(--green-step--2);
    }

    &:active {
      border-top: 2px solid var(--light-grey-step--2);
      background-color: var(--dark);
    }
  }

  fieldset {
    border: 0;
    padding: 0;
  }

  input[type="text"],
  input[type="email"] {
    width: 100%;
  }
  @media screen and (min-width: 600px) {
    input[type="text"] {
      width: 50%;
    }
    input[type="email"] {
      width: 75%;
    }
  }

  .indicates-required {
    font-size: var(--step--1);
  }

  .content__gdpr,
  .content__gdprLegal {
    font-size: var(--step--1);

    label:not(.checkbox) {
      color: var(--theme-heading, var(--theme, var(--dark)));
      font-size: var(--step-1);
      font-family: var(--font-heading);
      font-weight: 900;
      -webkit-font-smoothing: antialiased;
    }
  }
  .content__gdprLegal {
    margin-block-start: var(--space-s);
  }

  div.mce_inline_error {
    background: none;
    color: var(--error-red);
    font-size: var(--step--1);
    font-weight: normal;
    margin: var(--space-3xs) 0 0 0;
    padding: 0;
  }
}

#mc_embed_signup_scroll > * + *,
.content__gdpr > * + * {
  margin-top: var(--flow);
}