/* Homepage area CTA only; shared CityLink styles provide layout and button fill. */
.city-invite.area-invite {
  gap: 32px;
  padding: 36px;
  border-top: 2px solid var(--cyan);
  background: linear-gradient(110deg, rgba(27,121,255,.18), rgba(33,214,255,.07) 65%, rgba(2,9,19,.8));
  box-shadow: inset 0 0 44px rgba(33,214,255,.07);
}
.area-invite .area-invite-copy { gap: 12px; }
.area-invite h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.25rem, 2.2vw, 1.8rem);
  line-height: 1.3;
  letter-spacing: .04em;
}
.area-invite p {
  max-width: 58ch;
  margin: 0;
  color: #d3e0e8;
  font-size: 1.05rem;
  line-height: 1.65;
}
.area-invite .area-connect-btn {
  flex-shrink: 0;
  min-height: 52px;
  padding: 18px 24px;
  font-size: .9rem;
  text-align: center;
}
.area-invite .area-connect-btn:hover,
.area-invite .area-connect-btn:focus-visible { color: var(--bg); }
.area-invite .area-connect-btn:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 4px;
}
@media (max-width: 700px) {
  .city-invite.area-invite { gap: 24px; padding: 28px 22px; }
  .area-invite .area-connect-btn { width: 100%; white-space: normal; }
}