.contact-direct-note,
.support-dm-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid #efb08d;
  border-radius: 12px;
  background: linear-gradient(110deg, #fff5ed, #fff 62%);
}

.contact-direct-note .eyebrow,
.contact-direct-note h3,
.contact-direct-note p {
  margin: 0;
}

.contact-direct-note h3 {
  margin-top: 3px;
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  line-height: 1.08;
}

.contact-direct-note p:not(.eyebrow) {
  max-width: 720px;
  margin-top: 6px;
  color: #4f555c;
  font-size: 12px;
}

.contact-direct-note > div:first-child,
.support-dm-note > div:first-child {
  min-width: min(100%, 340px);
}

.contact-social-actions {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.contact-social-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid #cad2d9;
  border-radius: 9px;
  background: #fff;
  color: #20262d;
  font: inherit;
  font-size: 11px;
  font-weight: 760;
  line-height: 1.15;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.contact-social-action > svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-social-action span {
  display: grid;
  gap: 1px;
}

.contact-social-action span strong {
  color: inherit;
  font-size: 10px;
}

.contact-social-action .social-link-arrow,
.contact-social-action .social-copy-icon {
  width: 14px;
  height: 14px;
  opacity: 0.72;
}

.contact-social-action.is-instagram {
  border-color: #c73576;
  background: #c73576;
  color: #fff;
}

.contact-social-action.is-x:hover,
.contact-social-action.is-x:focus-visible {
  border-color: #111827;
}

.contact-social-action.is-whatsapp {
  border-color: #75c995;
  color: #126b34;
}

.contact-social-action:hover,
.contact-social-action:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(21, 29, 38, 0.1);
  outline: 3px solid rgba(199, 53, 118, 0.12);
}

.contact-dm-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  flex: 0 0 auto;
  padding: 10px 15px;
  border: 1px solid #bd3c72;
  border-radius: 8px;
  background: #c73576;
  color: #fff;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.contact-dm-primary:hover,
.contact-dm-primary:focus-visible {
  background: #a92964;
  outline: 3px solid rgba(199, 53, 118, 0.16);
}

.contact-tiles {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.contact-tile {
  grid-template-columns: 44px minmax(0, 1fr) auto;
}

button.contact-tile {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tile-action-icon {
  display: inline-flex;
  grid-column: 3;
  grid-row: 1 / span 2;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #f2f4f5;
  color: #4d5963;
}

.tile-action-icon svg,
.follow-link-arrow {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.follow-link-arrow {
  margin-left: 2px;
}

.tile-instagram .tile-icon {
  background: #fce7f3;
  color: #be185d;
}

.tile-x .tile-icon {
  background: #e8edf1;
  color: #111827;
}

.tile-whatsapp .tile-icon {
  background: #dcfce7;
  color: #15803d;
}

.support-dm-note {
  margin-bottom: 20px;
  border-color: #c9d8cf;
  background: linear-gradient(110deg, #f2fbf6, #fff 65%);
}

.support-dm-note > div {
  display: grid;
  gap: 3px;
}

.support-dm-note strong {
  color: #163f2c;
  font-size: 13px;
}

.support-dm-note span {
  color: #4d5e54;
  font-size: 12px;
}

.support-dm-note span a {
  color: #9d255e;
  font-weight: 800;
  text-underline-offset: 2px;
}

.support-dm-note > .contact-social-actions {
  display: flex;
  gap: 8px;
}

.support-dm-note .contact-social-action,
.support-dm-note .contact-social-action span,
.support-dm-note .contact-social-action strong {
  color: inherit;
}

@media (max-width: 760px) {
  .contact-direct-note,
  .support-dm-note {
    align-items: stretch;
    flex-direction: column;
    padding: 14px;
  }

  .contact-dm-primary {
    width: 100%;
  }

  .contact-social-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .support-dm-note > .contact-social-actions {
    display: grid;
  }

  .contact-social-action {
    width: 100%;
  }

  .contact-tiles {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 761px) and (max-width: 1080px) {
  .contact-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}