/* "Copy my email" button, with a small status line above it. */
.copy-email-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

/* Always present so revealing the status never shifts the button. */
.copy-email-status {
  height: 20px;
  font-family: Albert Sans, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--deep-pink);
  opacity: 0;
  transition: opacity .2s ease;
}

.copy-email-wrap.is-copied .copy-email-status { opacity: 1; }

@media screen and (max-width: 479px) {
  .copy-email-status { font-size: 12px; }
}

/* Contact page: direct ways to get in touch, in place of the old form. */
.contact-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  width: 100%;
}

.contact-actions-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}

.contact-secondary-link {
  font-family: Albert Sans, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--midnight-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-secondary-link:hover { color: var(--deep-pink); }

/* The copy button on this page sits on white, so it keeps the site's
   standard button colour rather than the white pill used on gradients. */
.contact-actions .copy-email-wrap { align-items: flex-start; }
.contact-actions .copy-email-status { align-self: flex-start; }

/* Card columns sit level now the tall form has gone. */
.contact-card-v1 { align-items: center; }

/* Contact hero: the CTAs sit centred under the intro line. */
.play-section-intro .contact-actions {
  align-items: center;
  margin-top: 26px;
}
.play-section-intro .contact-actions-secondary { justify-content: center; }
.play-section-intro .copy-email-wrap { align-items: center; }