.cpts-email-suggestion {
  color: inherit;
  display: block;
  font-size: 14px;
  line-height: 1.45;
  margin-top: 6px;
}

.cpts-email-suggestion[hidden] {
  display: none;
}

/* The newsletter row puts its button beside the field from 782 px: the note
   moves after the button so it takes the next line, under the field. Below
   that width the row is one column and the note keeps its place above the button. */
@media (min-width: 782px) {
  .cpts-newsletter-signup__email-row > .cpts-email-suggestion {
    grid-column: 1;
    margin-top: -6px;
    order: 1;
  }
}

/* Doubled class: the newsletter and form blocks style every button of their
   form, and this one must read as an inline link inside the sentence. */
.cpts-email-suggestion .cpts-email-suggestion__apply {
  background: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  cursor: pointer;
  display: inline;
  font: inherit;
  font-weight: 700;
  height: auto;
  min-height: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  width: auto;
}

@media (min-width: 1118px) and (hover: hover) and (pointer: fine) {
  .cpts-email-suggestion .cpts-email-suggestion__apply:hover {
    background: none;
    color: inherit;
    text-decoration-thickness: 2px;
  }
}

.cpts-email-suggestion .cpts-email-suggestion__apply:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}