.block-newsletter-signup {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-lg); }
  .block-newsletter-signup__title {
    margin-bottom: var(--spacing-xs); }

.nl {
  padding: var(--spacing-xs);
  border-radius: 0.4375rem;
  background: #ffffff;
  box-shadow: 0 1rem 4rem rgba(120, 120, 120, 0.1);
  /* ------------------------------------------------- error, as on the calculator */
  /* -------------------------------------------------------------- the receipt */
  /* Step 2. Same furniture as the form, so the block does not change shape when it
       moves on. */
  /* ---------------------------------------------------------- honeypot, unseen */ }
  @media (min-width: 768px) {
    .nl {
      padding: var(--spacing-xm); } }
  .nl__intro {
    max-width: 42rem;
    margin: 0 0 var(--spacing-xs);
    font-size: var(--fz-md-t16);
    line-height: 1.55;
    color: #4d4d4d; }
  .nl__row {
    display: grid;
    gap: var(--spacing-xxs); }
  .nl__field {
    min-width: 0; }
  .nl__label {
    display: block;
    margin-bottom: .375rem;
    font-size: var(--fz-sm-t14);
    font-weight: 600;
    color: #000; }
  .nl__input-wrap {
    display: flex; }
  .nl__input {
    width: 100%;
    padding: .875rem 1rem;
    font-size: var(--fz-md-t16);
    color: #000;
    border: 1px solid #dbdbdb;
    border-radius: 0.4375rem;
    background: #ffffff;
    transition: border-color 300ms ease-in-out; }
    .nl__input::-moz-placeholder {
      color: #999999; }
    .nl__input::placeholder {
      color: #999999; }
    .nl__input:focus {
      outline: none;
      border-color: #ff27b8; }
    .nl__input.has-error {
      border-color: #ff4040;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0; }
  .nl__cta.fz-button {
    color: #ffffff;
    border-color: transparent;
    background: #ff27b8 border-box;
    justify-self: start; }
    .nl__cta.fz-button:after {
      background: #ff27b8; }
    .nl__cta.fz-button:hover, .nl__cta.fz-button:focus, .nl__cta.fz-button:active {
      color: #ffffff;
      background: #d81f9b border-box; }
      .nl__cta.fz-button:hover:after, .nl__cta.fz-button:focus:after, .nl__cta.fz-button:active:after {
        background: #d81f9b;
        opacity: 1; }
    .nl__cta.fz-button:focus-visible {
      outline: 2px solid #ff27b8;
      outline-offset: 3px; }
    .nl__cta.fz-button.is-loading {
      opacity: .55;
      pointer-events: none; }
  .nl__field--consent {
    margin-top: var(--spacing-xs); }
  .nl__radios {
    display: grid;
    gap: .5rem; }
    @media (min-width: 768px) {
      .nl__radios {
        grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .nl__radio {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    margin: 0;
    padding: .875rem 1rem;
    font-size: var(--fz-md-t16);
    line-height: 1.4;
    color: #000;
    border: 1px solid #dbdbdb;
    border-radius: 0.4375rem;
    cursor: pointer;
    transition: border-color 300ms ease-in-out, background 300ms ease-in-out; }
    .nl__radio:hover {
      border-color: #787878; }
    .nl__radio input {
      flex: 0 0 auto;
      margin-top: .2rem;
      accent-color: #ff27b8; }
    .nl__radio:has(input:checked) {
      border-color: #ff27b8;
      background: rgba(255, 39, 184, 0.05); }
    .nl__radio input.has-error {
      outline: 2px solid #ff4040;
      outline-offset: 2px; }
  .nl__error {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: -1px 0 0;
    padding: .5rem .875rem;
    font-size: var(--fz-sm-t14);
    font-weight: 600;
    line-height: 1.35;
    color: #ffffff;
    border-radius: 0 0 0.4375rem 0.4375rem;
    background: #ff4040; }
    .nl__error[hidden] {
      display: none; }
  .nl__error-icon {
    flex: 0 0 auto;
    width: 1.0625rem;
    height: 1.0625rem;
    margin-top: .05rem;
    fill: currentColor; }
  .nl__form-error {
    margin: var(--spacing-xs) 0 0;
    border-radius: 0.4375rem; }
  .nl__step-title {
    margin: 0 0 .375rem;
    font-size: var(--fz-lg-t20);
    font-weight: 700;
    color: #2d2d2d; }
  .nl__row--pair {
    display: grid;
    gap: var(--spacing-xs); }
    @media (min-width: 768px) {
      .nl__row--pair {
        grid-template-columns: 1fr 1fr; } }
  .nl__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: var(--spacing-xs);
    flex-wrap: wrap; }
  .nl__skip {
    padding: 0;
    border: 0;
    background: none;
    font-size: var(--fz-sm-t14);
    color: #4d4d4d;
    text-decoration: underline;
    cursor: pointer; }
    .nl__skip:hover {
      color: #2d2d2d; }
  .nl__done {
    display: flex;
    align-items: baseline;
    gap: .5rem; }
    .nl__done h3 {
      margin: 0 0 .125rem;
      font-size: var(--fz-md-t16);
      font-weight: 700;
      line-height: 1.5;
      color: #000; }
      .nl__done h3:focus-visible {
        outline: 2px solid #ff27b8;
        outline-offset: 3px; }
    .nl__done p {
      margin: 0;
      max-width: 42rem;
      font-size: var(--fz-md-t16);
      line-height: 1.5;
      color: #4d4d4d; }
    .nl__done[hidden] {
      display: none; }
  .nl__done-tick {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    align-self: flex-start;
    margin-top: .1875rem;
    color: #ff27b8; }
  .nl__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden; }
  .nl__form[hidden] {
    display: none; }