.wa-connect {
  padding: clamp(48px, 6vw, 80px) var(--site-gutter);
  background: var(--ivory);
  color: var(--ink-deep);
}

.wa-connect__inner { max-width: var(--site-content-width); margin-inline: auto; }
.wa-connect__heading { display: grid; justify-items: start; gap: 24px; margin-bottom: 28px; }
.wa-connect h2 { margin: 0; font-size: var(--product-heading-size); line-height: 1.15; letter-spacing: -.035em; text-wrap: balance; }
.wa-connect__cta { text-decoration: none; }
.wa-connect__cta svg { width: 20px; height: 20px; flex: none; }

.wa-connect__columns {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: 256px auto auto;
  grid-template-areas: "global formats" "global formats" "global formats";
  column-gap: 20px;
}

.wa-connect__card {
  display: grid;
  grid-template-rows: subgrid;
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: #edf2fa;
}

.wa-connect__card--formats { grid-area: formats; background: #f0f5f1; }
.wa-connect__card--global { grid-area: global; }
.wa-connect__visual { position: relative; display: grid; align-items: center; min-width: 0; isolation: isolate; padding-block: 16px; }
.wa-connect__visual--formats { padding-inline: 28px; }
.wa-connect__visual--global { overflow: hidden; }
.wa-connect__map {
  display: block;
  width: min(calc(100% + 32px), 448px);
  justify-self: center;
  max-width: none;
  height: auto;
  margin-inline: -16px;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.wa-connect__routes { stroke: #7c9fe8; stroke-width: 1.5; stroke-dasharray: 5 7; }
.wa-connect__nodes { fill: var(--blue-text); }
.wa-connect__node-halo { fill: #fff; stroke: #b9cdf4; stroke-width: 1; }
.wa-connect__map-labels { fill: #455b7f; font: 18px "Inter", "Segoe UI", sans-serif; }

.wa-connect__format-field {
  position: relative;
  width: 100%;
  height: 224px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}

.wa-connect__arcs { position: absolute; inset: 0; width: 100%; height: 100%; stroke: #d7e3df; stroke-width: 1; }
.wa-connect__arcs path + path { stroke: #e2ece7; }
.wa-connect__formats { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }

.wa-connect__format {
  --format-color: #3564cb;
  --format-surface: #eef3ff;
  position: absolute;
  left: var(--format-x);
  top: var(--format-y);
  width: 52px;
  height: 52px;
  transform: translate(-50%, -50%) rotate(var(--format-angle)) scale(var(--format-scale));
}

.wa-connect__format:nth-child(1) { --format-x: 5%; --format-y: 36%; --format-angle: -20deg; --format-scale: .85; }
.wa-connect__format:nth-child(2) { --format-x: 26%; --format-y: 20%; --format-angle: -12deg; --format-scale: .96; }
.wa-connect__format:nth-child(3) { --format-x: 50%; --format-y: 14%; --format-angle: 2deg; --format-scale: 1; }
.wa-connect__format:nth-child(4) { --format-x: 74%; --format-y: 20%; --format-angle: 12deg; --format-scale: .96; }
.wa-connect__format:nth-child(5) { --format-x: 95%; --format-y: 36%; --format-angle: 20deg; --format-scale: .85; }
.wa-connect__format:nth-child(6) { --format-x: 5%; --format-y: 64%; --format-angle: 20deg; --format-scale: .85; }
.wa-connect__format:nth-child(7) { --format-x: 26%; --format-y: 80%; --format-angle: 12deg; --format-scale: .96; }
.wa-connect__format:nth-child(8) { --format-x: 50%; --format-y: 86%; --format-angle: -2deg; --format-scale: 1; }
.wa-connect__format:nth-child(9) { --format-x: 74%; --format-y: 80%; --format-angle: -12deg; --format-scale: .96; }
.wa-connect__format:nth-child(10) { --format-x: 95%; --format-y: 64%; --format-angle: -20deg; --format-scale: .85; }
.wa-connect__format--image, .wa-connect__format--interactive { --format-color: #7853ab; --format-surface: #f4effc; }
.wa-connect__format--video { --format-color: #ba5c45; --format-surface: #fff1eb; }
.wa-connect__format--audio, .wa-connect__format--contact { --format-color: #258478; --format-surface: #eaf7f3; }
.wa-connect__format--location { --format-color: #ac7a26; --format-surface: #fff7e5; }
.wa-connect__format--flow { --format-color: #24804b; --format-surface: #eaf7ee; }

.wa-connect__medallion {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  border: 5px solid #fff;
  border-radius: 50%;
  color: var(--format-color);
  background: var(--format-surface);
  box-shadow: 0 6px 20px #1d365115, 0 1px 3px #1d36510a;
  transition: transform 220ms cubic-bezier(.16, 1, .3, 1);
}

.wa-connect__medallion svg { width: 22px; height: 22px; }
.wa-connect__format-name { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wa-connect__hub { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 32px; background: #fff; color: #1c7050; box-shadow: 0 8px 28px #1d365110; transform: translate(-50%, -50%); font-size: 15px; font-weight: 500; }
.wa-connect__hub svg { width: 22px; height: 22px; flex: none; }
.wa-connect__copy { display: grid; grid-row: 2 / span 2; grid-template-rows: subgrid; padding: 12px 28px 28px; }
.wa-connect h3 { margin: 0 0 12px; font-size: 20px; line-height: 1.35; letter-spacing: -.02em; text-wrap: balance; }
.wa-connect__copy p { margin: 0; color: #536582; font-size: 14px; line-height: 1.7; }

@media (hover: hover) {
  .wa-connect__format:hover .wa-connect__medallion { transform: translateY(-4px); }
}

@media (max-width: 1100px) {
  .wa-connect__visual--formats { padding-inline: 24px; }
  .wa-connect__copy { padding: 12px 24px 24px; }
}

@media (max-width: 900px) {
  .wa-connect__columns { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "formats" "global"; gap: 20px; }
  .wa-connect__heading { margin-bottom: 24px; }
  .wa-connect h3 { font-size: 18px; }
  .wa-connect__card { grid-template-rows: auto auto; }
  .wa-connect__visual { padding-block: 16px; }
  .wa-connect__visual--formats { padding-inline: 24px; }
  .wa-connect__format-field { height: 200px; }
  .wa-connect__copy { display: block; grid-row: auto; padding: 8px 24px 24px; }
  .wa-connect__format { width: 44px; height: 44px; }
  .wa-connect__medallion { border-width: 4px; }
  .wa-connect__medallion svg { width: 20px; height: 20px; }
  .wa-connect__hub { font-size: 14px; padding: 8px 14px; gap: 6px; }
  .wa-connect__hub svg { width: 20px; height: 20px; }
  .wa-connect__map-labels { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-connect__medallion { transition: none; }
  .wa-connect__format:hover .wa-connect__medallion { transform: none; }
}

.sms-page[data-product="whatsapp"] .sms-messaging-matrix__link { margin-top: 42px; }