.after-automation-takeover {
  background: #ffffff;
  color: #111111;
  padding: 16px;
}

.after-automation-takeover__frame {
  align-items: center;
  /* Hand-drawn frame: textured SVG stretched along each edge via border-image. */
  border: 4px solid #111111;
  border-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQxIiBoZWlnaHQ9IjQ5IiB2aWV3Qm94PSIwIDAgMjQxIDQ5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBmaWx0ZXI9InVybCgjZmlsdGVyMF9nXzQ2XzUzNTQpIj4KPHJlY3QgeD0iMSIgeT0iMSIgd2lkdGg9IjIzOSIgaGVpZ2h0PSI0NyIgc3Ryb2tlPSJibGFjayIvPgo8L2c+CjxkZWZzPgo8ZmlsdGVyIGlkPSJmaWx0ZXIwX2dfNDZfNTM1NCIgeD0iMCIgeT0iMCIgd2lkdGg9IjI0MSIgaGVpZ2h0PSI0OSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJzaGFwZSIvPgo8ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC4zMzMzMzMzNDMyNjc0NDA4IDAuMzMzMzMzMzQzMjY3NDQwOCIgbnVtT2N0YXZlcz0iMyIgc2VlZD0iNjU2IiAvPgo8ZmVEaXNwbGFjZW1lbnRNYXAgaW49InNoYXBlIiBzY2FsZT0iMSIgeENoYW5uZWxTZWxlY3Rvcj0iUiIgeUNoYW5uZWxTZWxlY3Rvcj0iRyIgcmVzdWx0PSJkaXNwbGFjZWRJbWFnZSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgLz4KPGZlTWVyZ2UgcmVzdWx0PSJlZmZlY3QxX3RleHR1cmVfNDZfNTM1NCI+CjxmZU1lcmdlTm9kZSBpbj0iZGlzcGxhY2VkSW1hZ2UiLz4KPC9mZU1lcmdlPgo8L2ZpbHRlcj4KPC9kZWZzPgo8L3N2Zz4K")
    4 stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  min-height: clamp(500px, 49.8vw, 637px);
  max-width: 1280px;
  overflow: hidden;
  padding: 56px 18px 72px;
  position: relative;
  text-align: center;
}

.after-automation-takeover__art {
  margin-bottom: 26px;
  margin-top: -8px;
}

.after-automation-takeover__art img {
  display: block;
  image-rendering: auto;
  width: clamp(230px, 30vw, 386px);
}

.after-automation-takeover__copy {
  max-width: 572px;
}

.after-automation-takeover h1 {
  color: #111111;
  font-family: "Signifier", "Palatino", "Georgia", "Times New Roman", serif;
  font-size: clamp(44px, 4.4vw, 56px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

.after-automation-takeover__dek {
  color: #111111;
  font-family: "Signifier", "Palatino", "Georgia", "Times New Roman", serif;
  font-size: 20px;
  line-height: 1.1;
  margin: 24px auto 0;
  max-width: 572px;
  text-wrap: balance;
}

.after-automation-takeover__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
}

.after-automation-takeover__button {
  align-items: center;
  border: 1px solid #111111;
  display: inline-flex;
  font-family: "Signifier", "Palatino", "Georgia", "Times New Roman", serif;
  font-size: 16px;
  justify-content: center;
  align-items: center;
  line-height: 1;
  min-height: 48px;
  min-width: 168px;
  padding: 0 20px;
  text-decoration: none;
}

.after-automation-takeover__arrow {
  display: block;
  flex: 0 0 auto;
  transform: translateY(2px);
  margin-top: -3px;
}

.after-automation-takeover__inline-logo {
  display: block;
  height: 18px;
  width: 65px;
  margin-bottom: -3px;
}

.after-automation-takeover__button--primary {
  background: #111111;
  color: #ffffff;
  min-width: 240px;
}

.after-automation-takeover__button--secondary {
  background: #ffffff;
  color: #111111;
  gap: 8px;
}

@media (max-width: 575px) {
  .after-automation-takeover {
    padding: 10px;
  }

  .after-automation-takeover__frame {
    min-height: 520px;
    padding: 42px 18px 46px;
  }

  .after-automation-takeover h1 {
    font-size: clamp(40px, 12vw, 54px);
  }

  .after-automation-takeover__dek {
    font-size: 16px;
  }

  .after-automation-takeover__actions {
    align-items: stretch;
    flex-direction: column;
    width: min(100%, 280px);
  }

  .after-automation-takeover__button {
    width: 100%;
  }
}